/* Snake — Tafelronde. Dark, clean, mobile-first. One stylesheet, no framework. */
*,*::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}

:root{
  --bg:#0a0c11; --bg-2:#0e1118; --surface:#131722; --surface-2:#1a1f2c;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --tx:#e9edf5; --tx-2:#98a2b6; --tx-3:#626c80;
  --gold:#f2b840; --gold-2:#d0951d;
  --green:#3ddc97; --green-2:#28b479;
  --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 620px at 50% -12%, rgba(242,184,64,.12), transparent 60%),
    radial-gradient(820px 560px at 92% 118%, rgba(61,220,151,.08), transparent 60%),
    var(--bg);
  min-height:100vh; min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

#app{
  max-width:680px; margin:0 auto;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:14px; min-height:100dvh;
}

/* ---------- topbar ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand-mini{
  font-weight:800; letter-spacing:.14em; font-size:12px; color:var(--tx-3);
  transition:color .15s;
}
.brand-mini:hover{color:var(--gold)}
.scores{display:flex;gap:10px}
.score{
  display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;
  background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:7px 13px; min-width:74px;
}
.score span:last-child{font-weight:800;font-size:20px;font-variant-numeric:tabular-nums}
.score-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);font-weight:700}

/* ---------- stage ---------- */
.stage{display:flex;flex-direction:column;gap:12px;flex:1}
.board-wrap{
  position:relative; width:100%; aspect-ratio:1/1;
  border-radius:var(--r-lg); overflow:hidden;
  background:
    linear-gradient(180deg,var(--bg-2),#0b0e15);
  border:1px solid var(--line);
  box-shadow:0 20px 50px -24px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04);
  margin:0 auto; max-width:min(78vh,680px);
}
#board{width:100%;height:100%}

/* ---------- overlay ---------- */
.overlay{
  position:absolute; inset:0; z-index:5;
  display:grid; place-items:center; padding:22px;
  background:rgba(8,10,17,.82); backdrop-filter:blur(3px);
  transition:opacity .25s ease;
}
.overlay.hidden{opacity:0;pointer-events:none}
.panel{
  width:100%; max-width:340px; text-align:center;
  display:flex; flex-direction:column; gap:14px; align-items:center;
}
.ov-title{
  margin:0; font-weight:800; font-size:clamp(30px,8vw,44px); 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:14px;line-height:1.55;max-width:30ch}
.hints{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  color:var(--tx-3);font-size:11.5px;margin-top:2px;
}
.hints .dot{color:var(--line-2)}

/* ---------- buttons ---------- */
.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}

/* ---------- toolbar ---------- */
.toolbar{display:flex;align-items:center;justify-content:center;gap:16px;min-height:38px;flex-wrap:wrap}
.speed-toggle{display:inline-flex;align-items:center;gap:8px;color:var(--tx-2);font-size:13px;cursor:pointer;user-select:none}
.speed-toggle input{width:16px;height:16px;accent-color:var(--gold)}

/* ---------- d-pad ---------- */
.dpad{
  display:none;
  grid-template-columns:repeat(3,64px);
  grid-template-rows:repeat(3,64px);
  gap:8px; justify-content:center; margin:2px auto 0;
}
.dbtn{
  border:1px solid var(--line-2); background:var(--surface);
  border-radius:14px; color:var(--tx-2); font-size:18px;
  display:grid;place-items:center;
  transition:background .12s,transform .1s;
}
.dbtn:active{background:var(--gold);color:#241a04;transform:scale(.94)}
.dbtn.up{grid-area:1/2} .dbtn.left{grid-area:2/1}
.dbtn.right{grid-area:2/3} .dbtn.down{grid-area:3/2}

@media (hover:none) and (pointer:coarse){
  .dpad{display:grid}
}

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