:root{--ink:#071018;--paper:#f5f1e8;--lime:#d8ff45;--aqua:#65e6cf;--muted:#a8b1b6}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:42px 42px}
header{width:min(1220px,calc(100% - 32px));height:78px;margin:auto;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
header a{color:var(--paper);font-size:12px;font-weight:900;letter-spacing:.12em;text-decoration:none;text-transform:uppercase}
.brand{font-size:24px!important;letter-spacing:-.05em!important;text-transform:none!important}
.brand span{color:var(--lime)}
main{width:min(1220px,calc(100% - 32px));margin:20px auto 70px;display:grid;grid-template-columns:.7fr 1.35fr .7fr;gap:28px;align-items:start}
.intro,.leaderboard,.game-shell{position:relative}
.eyebrow{margin:0 0 16px;color:var(--aqua);font-size:11px;font-weight:900;letter-spacing:.17em;text-transform:uppercase}
.intro h1{margin:0;font-size:clamp(50px,6vw,88px);line-height:.86;letter-spacing:-.07em}
.intro h1 em{color:var(--lime);font-style:normal}
.intro>p:last-child{color:var(--muted);line-height:1.65}
.game-shell{overflow:hidden;border:1px solid rgba(255,255,255,.15);background:#0d1924}
.hud{display:grid;grid-template-columns:repeat(4,1fr);background:#09131d;border-bottom:1px solid rgba(255,255,255,.13)}
.hud div{padding:13px;text-align:center;border-right:1px solid rgba(255,255,255,.1)}
.hud div:last-child{border:0}
.hud small{display:block;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.hud strong{display:block;margin-top:4px;color:var(--lime);font-size:18px}
.stage{position:relative;aspect-ratio:540/820;max-height:72vh}
canvas{display:block;width:100%;height:100%;background:#182630;touch-action:none}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:24px 28px;overflow-y:auto;text-align:center;background:rgba(7,16,24,.92);backdrop-filter:blur(5px)}
.overlay[hidden]{display:none}
.overlay h2{margin:0;font-size:46px;letter-spacing:-.055em}
.overlay p:not(.eyebrow){max-width:330px;color:var(--muted);line-height:1.55}
.overlay button,#score-form button,.board-head button{border:0;padding:14px 18px;color:var(--ink);background:var(--lime);font-weight:900;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.mobile-controls{display:none;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.12)}
.mobile-controls button{min-height:62px;border:0;color:var(--paper);background:#111f2a;font-size:30px;touch-action:manipulation}
#score-form{padding:18px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
#score-form[hidden]{display:none}
#score-form label{display:grid;gap:6px;color:var(--aqua);font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
#score-form input{width:100%;padding:13px;border:1px solid rgba(255,255,255,.2);color:var(--paper);background:#071018;font:inherit;text-transform:uppercase}
#submit-message{grid-column:1/-1;margin:0;color:var(--muted);font-size:12px}
.leaderboard{padding:22px;background:var(--paper);color:var(--ink)}
.board-head{display:flex;align-items:start;justify-content:space-between;gap:12px}
.leaderboard h2{margin:0;font-size:38px;letter-spacing:-.05em}
.board-head button{padding:9px 10px;font-size:9px}
.leaderboard ol{list-style:none;padding:0;margin:22px 0}
.leaderboard li{display:grid;grid-template-columns:32px 1fr auto;gap:8px;padding:12px 0;border-top:1px solid rgba(7,16,24,.15);font-size:13px}
.leaderboard li b{overflow:hidden;text-overflow:ellipsis}
.leaderboard li span:last-child{font-variant-numeric:tabular-nums;font-weight:900}
.fine{color:#59636a;font-size:11px;line-height:1.5}
@media(max-width:980px){main{grid-template-columns:1fr minmax(300px,620px)}
.intro{grid-column:1/-1}
.leaderboard{grid-column:1}
.game-shell{grid-column:2;grid-row:2}
}
@media(max-width:700px){header{height:64px}
main{display:flex;flex-direction:column;margin-top:10px}
.intro h1{font-size:58px}
.game-shell,.leaderboard{width:100%}
.stage{max-height:none}
.mobile-controls{display:grid}
.leaderboard{order:3}
.hud strong{font-size:15px}
.hud div{padding:10px 5px}
}