*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif}
.background{
 position:fixed;inset:0;background:url('ethan-jason.jpg') center/cover no-repeat;
 filter:brightness(.55) contrast(1.1)
}
.shade{position:fixed;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.48),rgba(0,0,0,.08),rgba(0,0,0,.65))}
main{position:relative;z-index:2;width:min(900px,92vw);height:100vh;margin:auto;
 display:flex;flex-direction:column;align-items:center;justify-content:center}
.title{font-size:clamp(42px,7vw,82px);font-weight:900;letter-spacing:2px;
 text-shadow:4px 4px 0 #000;margin-bottom:35px}
.title span{color:#e5cf80}
#jason{width:min(760px,92vw);min-height:230px;border:4px solid #e5cf80;
 border-radius:25px;background:rgba(0,0,0,.72);color:#f7f0d7;
 box-shadow:0 0 0 2px #111,0 0 30px rgba(229,207,128,.25),inset 0 0 50px #000;
 display:flex;align-items:center;justify-content:space-around;gap:15px;
 cursor:pointer;font-size:clamp(38px,6vw,68px);font-weight:900;line-height:.95;
 transition:transform .1s,background .1s}
#jason small{font-size:.7em}
#jason:hover{background:rgba(25,25,20,.82)}
#jason:active,#jason.flash{transform:scale(.985);background:rgba(80,70,35,.85)}
.x{font-size:clamp(55px,8vw,100px);color:#e5cf80}
.hint{font-size:18px;color:#ddd;text-transform:uppercase;letter-spacing:1px}
.hint b{color:#e5cf80}
kbd{border:2px solid #ccc;border-radius:5px;padding:3px 10px;margin-right:6px}
.stats{margin-top:18px;width:min(600px,88vw);padding:18px 28px;background:rgba(0,0,0,.7);
 border:1px solid #555;border-radius:14px;display:flex;align-items:center;justify-content:space-around;text-align:center}
.stats small{display:block;color:#aaa;letter-spacing:1px}.stats strong{display:block;color:#e5cf80;font-size:34px;margin-top:4px}
.line{height:55px;width:1px;background:#777}
#status{height:25px;margin-top:12px;color:#aaa;font-size:13px;max-width:90%;text-align:center}
.volume{position:fixed;z-index:3;left:25px;top:25px;display:flex;align-items:center;gap:10px;background:#0008;padding:10px 14px;border-radius:10px}
.volume input{width:150px;accent-color:#e5cf80}
footer{position:fixed;z-index:3;bottom:18px;width:100%;text-align:center;color:#aaa;letter-spacing:3px;font-weight:bold}
@media(max-width:600px){
 .background{background-position:35% center}
 .title{margin-bottom:20px}
 #jason{min-height:170px}
 .volume{top:10px;left:10px}.volume input{width:90px}
 .stats{padding:13px}.stats strong{font-size:28px}
}
