*{box-sizing:border-box}
body{color-scheme:dark;--surface:#1D1928;--line:#2F2A3E;--ink:#F4EFE4;--ink-2:#B4ADC2;--accent:#FFC72C;--on-accent:#17131F;--paper:#EFE7D6;--paper-ink:#1B1724;--paper-2:#6A6176;--red:#BB3319;--jade:#0B7653;--ground:#100E16;--F:Bungee,var(--display,var(--sans));margin:0;min-height:100vh;display:flex;justify-content:center;overflow:hidden;overscroll-behavior:none;background:radial-gradient(90% 60% at 50% 0,#251F33,#0000),var(--ground);color:var(--ink);font:16px/1.5 var(--sans)}
#shell{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:560px;height:100dvh;padding:12px 8px 14px}

/* score plates: cream card stock, ink numerals, no glow */
#hud{display:grid;grid:auto/repeat(4,minmax(0,1fr));gap:6px;width:100%}
.hud-cell{display:grid;align-content:center;justify-items:center;gap:3px;min-width:0;padding:8px 4px 9px;border-radius:8px;background:var(--paper);box-shadow:inset 0 -3px 0 #0000001F,0 1px 0 #00000080}
.hud-label{font:800 10px/1 var(--sans);letter-spacing:.2em;color:var(--paper-2)}
.hud-value{font:clamp(17px,4.6vw,26px)/1.3 var(--F);font-variant-numeric:tabular-nums;padding:0 6px;color:var(--paper-ink);max-width:100%;overflow:hidden}
#hudBest{color:var(--red)}
#hudLines,#hudLevel{color:var(--jade)}

/* the well */
#stage{--H:min(100cqh,(100cqw - 62px)*2);position:relative;flex:1;min-height:0;width:100%;display:flex;justify-content:center;align-items:flex-start;gap:8px;padding:6px 2px;container-type:size;touch-action:none;cursor:pointer}
#stage:has(canvas:nth-of-type(3)){--H:min(100cqh,(100cqw - 124px)*2)}
#game{flex:none;height:var(--H);width:auto;aspect-ratio:1/2;margin-top:calc((100cqh - var(--H))/2);background:#0A0A12;border-radius:6px;box-shadow:0 0 0 2px #05040A,0 0 0 4px #3A3449,0 18px 40px -14px #000}
#stage>canvas:not(#game){position:static;flex:none;width:54px;height:54px;margin-top:calc((100cqh - var(--H))/2);background:#0E0E16;border-radius:8px;box-shadow:0 0 0 2px #05040A,0 0 0 3px #3A3449}
#stage::after{content:"NEXT";order:9;width:54px;margin:calc((100cqh - var(--H))/2 + 62px) 0 0 -62px;font:12px/1 var(--F);letter-spacing:.06em;text-align:center;color:var(--paper)}

/* cards over the well: printed cream cards with ink type */
.overlay{position:absolute;inset:calc((100cqh - var(--H))/2 + 28px) auto auto calc(50% - 31px);transform:translateX(-50%);width:calc(var(--H)/2 - 20px);display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 12px;text-align:center;border-radius:10px;background:var(--paper);color:var(--paper-ink);box-shadow:inset 0 -3px 0 #0000001F,0 22px 40px -14px #000}
.title{margin:0;font:calc(var(--H)*.054)/1 var(--F);color:var(--paper-ink);overflow-wrap:break-word;max-width:100%}
.title span{color:var(--red)}
.title.small{font-size:calc(var(--H)*.045)}
.tag{margin:0;font:700 12px/1.55 var(--sans);letter-spacing:.12em;color:var(--paper-2);max-width:30ch}
#finalScore{font:30px/1.1 var(--F);color:var(--red)}
.hint{display:inline-flex;align-items:center;min-height:44px;margin:4px 0 0;padding:0 18px;border-radius:99px;background:var(--paper-ink);color:var(--paper);font:800 min(13px,calc(var(--H)*.024))/1.2 var(--sans);letter-spacing:.06em;box-shadow:0 3px 0 #00000040;animation:pulse 2.4s ease-in-out infinite}
.keys-hint,#hud::after{margin:0;font:500 12px/1.9 var(--mono,ui-monospace,monospace);color:var(--paper-2);max-width:36ch}
@keyframes pulse{50%{transform:scale(1.04)}}

/* touch pad: matte key caps */
#controls{display:grid;grid:auto/repeat(5,minmax(0,1fr));gap:8px;width:100%}
.tbtn,.sbtn{border:0;border-radius:99px;cursor:pointer;font:700 12px/1 var(--sans);box-shadow:inset 0 0 0 1px var(--line);transition:.12s}
.tbtn{min-height:48px;background:var(--surface);color:var(--ink);font-size:20px;box-shadow:inset 0 0 0 1px var(--line),inset 0 -3px 0 #00000059;touch-action:none;user-select:none;-webkit-user-select:none}
.tbtn:active{transform:scale(.95);background:#28233A}
.tbtn.wide{background:var(--accent);color:var(--on-accent);font-size:13px;letter-spacing:.1em;box-shadow:inset 0 -3px 0 #00000033}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#sysrow{display:flex;justify-content:space-between;gap:8px;width:100%}
.sbtn{min-height:44px;padding:0 20px;background:none;color:var(--ink-2);letter-spacing:.12em}
.sbtn:hover{color:var(--ink);box-shadow:inset 0 0 0 1px #77728F}
.sbtn{text-transform:uppercase}
.sbtn.muted{text-decoration:line-through}
:where(#shell) :where(button:not(.tbtn,.sbtn)){min-height:44px;padding:0 18px;border:0;border-radius:99px;background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);font:700 13px/1 var(--sans);letter-spacing:.06em;cursor:pointer}
:where(.overlay) :where(button){background:var(--paper-ink);color:var(--paper);box-shadow:none}
:where(#shell) :where([class*=hud]:not(#hud,.hud-cell,.hud-label,.hud-value),[class*=panel],[class*=card],aside){border-radius:14px;background:var(--surface);color:var(--ink)}

/* desktop: one lacquered cabinet with a printed name plate */
@media(min-width:900px) and (min-height:700px){
body{align-items:center;background:radial-gradient(60% 50% at 50% 50%,var(--ground) 30%,#100E1600),var(--sf-wall,none) 0 0/360px,var(--ground)}
#shell{--B:clamp(500px,100dvh - 166px,880px);display:grid;grid:auto 160px auto 1fr auto auto/calc(var(--B)/2) 252px;gap:16px 12px;width:auto;max-width:none;height:auto;padding:16px;border-radius:22px;background:linear-gradient(#231E30,#17141F);box-shadow:inset 0 1px 0 #FFFFFF1A,inset 0 0 0 1px #FFFFFF0D,0 0 0 1px #000,0 40px 90px -30px #000}
/* the plate: cream stock over one inlaid band of the printed tiles */
#shell::before,h1.title{content:attr(aria-label);grid-column:1/-1;box-sizing:border-box;height:56px;padding-bottom:12px;border-radius:8px;background:var(--sf-strip,none) 6px calc(100% - 4px)/auto 10px repeat-x,var(--paper);background-clip:padding-box;box-shadow:inset 0 0 0 1px #0000001A,0 1px 0 #000;font:21px/44px var(--F);letter-spacing:.04em;text-align:center;text-transform:uppercase;color:var(--paper-ink);overflow:hidden;white-space:nowrap}
#shell[data-t]::before{content:attr(data-t)}
h1.title{position:absolute;inset:-100px auto auto -10px;width:calc(var(--B)/2 + 264px);font-size:40px;max-width:none}
#stage{--H:var(--B);grid-area:2/1/-1;height:var(--H);padding:0;justify-content:start}
#stage>canvas:not(#game){width:252px;height:134px;margin:26px 0 0;object-fit:none}
#stage::after{position:absolute;inset:4px auto auto calc(var(--H)/2 + 12px);width:252px;margin:0;color:var(--ink-2)}
.overlay{inset:28px auto auto 50%}
#hud,#controls,#sysrow{grid-column:2}
#hud{grid-row:3/5;align-self:stretch;grid:1fr auto auto/1fr 1fr;gap:8px}
.hud-cell:nth-child(-n+2){grid-column:1/-1}
.hud-cell:first-child{gap:10px}
.hud-cell:first-child::after{content:"";width:126px;height:18px;background:var(--sf-strip,none) 0 0/auto 100%}
#hudScore{font-size:48px;line-height:1.1}
#controls{grid-row:5;grid:auto/repeat(4,1fr)}
.wide{grid-column:1/-1}
#sysrow{grid-row:6}
@media(hover:hover) and (pointer:fine){#controls,.keys-hint{display:none}#hud::after{content:"←→ MOVE · ↑/X ROTATE · ↓ SOFT · SPACE DROP · P PAUSE";grid-column:1/-1;text-align:center;color:var(--ink-2)}}
}
@media(max-height:640px),(max-width:600px){.keys-hint{display:none}}
/* touch: swipe hint under the start pill (the keys legend is for keyboards) */
@media(pointer:coarse){#ovTitle .keys-hint{display:none}#ovTitle::after{content:"Swipe to move \00B7  tap to rotate";font:600 12px/1.4 var(--sans);letter-spacing:.04em;color:var(--paper-2)}}
@media(prefers-reduced-motion:reduce){.hint{animation:none}.tbtn{transition:none}}