/* Tetris — Tafelronde. Dark, clean, responsive. One stylesheet. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
canvas{display:block;touch-action:none}
ul{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}

:root{
  --bg:#0a0c11; --bg-2:#0e1118; --surface:#141926; --surface-2:#1b2130;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16); --sheen:rgba(255,255,255,.05);
  --tx:#e9edf5; --tx-2:#9aa4b8; --tx-3:#626c80;
  --gold:#f2b840; --gold-2:#d0951d;
  --f-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --r:14px; --r-lg:20px;
  color-scheme:dark;
}
body{
  font-family:var(--f-ui); color:var(--tx);
  background:
    radial-gradient(1100px 640px at 50% -14%, rgba(242,184,64,.13), transparent 60%),
    radial-gradient(760px 560px at 100% 110%, rgba(56,189,248,.10), transparent 60%),
    radial-gradient(700px 520px at 0% 100%, rgba(129,140,248,.09), transparent 60%),
    var(--bg);
  min-height:100vh;min-height:100dvh;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
#app{
  max-width:820px;margin:0 auto;
  padding:14px 14px calc(14px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:12px;min-height:100dvh;
}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px}
.brand-mini{font-weight:800;letter-spacing:.14em;font-size:12px;color:var(--tx-3);transition:color .15s}
.brand-mini:hover{color:var(--gold)}

.stage{
  display:grid;
  grid-template-columns:minmax(102px,128px) minmax(0,1fr) minmax(102px,128px);
  gap:16px;align-items:start;justify-content:center;flex:1;
  max-width:640px;margin:0 auto;width:100%;
}
.rail{display:flex;flex-direction:column;gap:10px}
.rail-right{align-items:stretch}

.mini-box{
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--r);
  padding:10px;display:flex;flex-direction:column;gap:7px;align-items:center;
  box-shadow:0 10px 26px -18px rgba(0,0,0,.8), inset 0 1px 0 var(--sheen);
}
.mini-label{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);font-weight:800}
#hold,#next{width:100%;height:auto;background:#0b0e15;border-radius:10px;border:1px solid var(--line)}

.stat{
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--r);
  padding:9px 13px;display:flex;flex-direction:column;gap:1px;
  box-shadow:0 10px 26px -18px rgba(0,0,0,.8), inset 0 1px 0 var(--sheen);
}
.stat-label{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);font-weight:800}
.stat-val{font-weight:800;font-size:20px;font-variant-numeric:tabular-nums;transition:color .2s}
.stat-val.bump{animation:bump .45s cubic-bezier(.2,.9,.3,1.4)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.32);color:var(--gold)}100%{transform:scale(1)}}

.board-wrap{
  position:relative;width:100%;max-width:min(52vh,340px);aspect-ratio:1/2;margin:0 auto;
  border-radius:var(--r-lg);
  padding:8px;
  background:linear-gradient(160deg,#241a09,#150f06);
  border:1px solid rgba(242,184,64,.22);
  box-shadow:0 34px 64px -30px rgba(0,0,0,.85), 0 0 60px -30px rgba(242,184,64,.4), inset 0 1px 0 var(--sheen);
  will-change:transform;
}
#board{
  width:100%;height:100%;border-radius:12px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg,#0c0f17,#080a10);
  box-shadow:inset 0 2px 24px rgba(0,0,0,.6);
}

.overlay{
  position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:18px;
  background:rgba(8,10,17,.9);backdrop-filter:blur(4px);transition:opacity .25s ease;border-radius:var(--r-lg);
}
.overlay.hidden{opacity:0;pointer-events:none}
.panel{width:100%;max-width:264px;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.ov-title{
  margin:0;font-weight:800;font-size:clamp(27px,7vw,40px);letter-spacing:-.02em;
  background:linear-gradient(175deg,#fff 10%,#ffe6ae 55%,var(--gold-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ov-text{margin:0;color:var(--tx-2);font-size:13px;line-height:1.5}
.keys{display:flex;flex-direction:column;gap:3px;color:var(--tx-3);font-size:11px;margin-top:2px}
.keys b{color:var(--tx-2);font-weight:600}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 22px;border-radius:999px;font-weight:700;font-size:14px;
  border:1px solid transparent;transition:transform .12s,filter .15s,background .15s,border-color .15s;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#241a04;box-shadow:0 12px 26px -12px rgba(242,184,64,.8)}
.btn-primary:hover{filter:brightness(1.07)}
.btn-ghost{background:var(--surface-2);color:var(--tx);border-color:var(--line-2)}
.btn-ghost:hover{background:#232a3a}

/* touch pad */
.pad{
  display:none;grid-template-columns:repeat(6,1fr);gap:8px;
  max-width:460px;margin:6px auto 0;width:100%;
}
.pbtn{
  border:1px solid var(--line-2);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border-radius:14px;color:var(--tx-2);font-size:22px;
  min-height:56px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:background .1s,transform .08s,color .1s,box-shadow .1s;
  box-shadow:0 6px 14px -10px rgba(0,0,0,.8), inset 0 1px 0 var(--sheen);
  user-select:none;-webkit-user-select:none;
}
.pbtn small{font-size:9.5px;font-weight:700;letter-spacing:.04em;color:var(--tx-3)}
.pbtn.down,.pbtn:active{background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#241a04;transform:scale(.94)}
.pbtn.down small,.pbtn:active small{color:#4a3406}
.pbtn.drop{
  grid-column:1/-1;flex-direction:row;gap:8px;font-size:15px;font-weight:800;
  color:var(--gold);border-color:rgba(242,184,64,.4);
  background:linear-gradient(180deg,rgba(242,184,64,.14),rgba(242,184,64,.05));
}
.pbtn.drop.down,.pbtn.drop:active{color:#241a04}
.pad-hint{display:none;text-align:center;color:var(--tx-3);font-size:11px;margin:8px 0 0}

@media (hover:none) and (pointer:coarse){
  .pad{display:grid}
  .pad-hint{display:block}
}

@media (max-width:560px){
  .stage{grid-template-columns:66px minmax(0,1fr) 66px;gap:9px}
  .mini-label,.stat-label{font-size:8.5px}
  .stat-val{font-size:16px}
  .stat{padding:7px 9px}
  .mini-box{padding:7px}
  .board-wrap{max-width:min(56vh,320px)}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}