:root{
  --bg:#0e1116; --panel:#161b22; --line:#232a34;
  --ink:#e6edf3; --muted:#8b949e;
  --snake:#3fb950; --snake-head:#56d364; --food:#f85149; --grid:#171d26;
  --accent:#58a6ff;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f4f6fa; --panel:#ffffff; --line:#dfe3ea;
    --ink:#111820; --muted:#5b6773;
    --snake:#2da44e; --snake-head:#3fb950; --food:#cf222e; --grid:#eceff4;
    --accent:#0969da;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:grid; place-items:center; padding:16px;
  -webkit-tap-highlight-color:transparent;
}
.wrap{width:100%; max-width:600px; display:flex; flex-direction:column; gap:14px}

.bar{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
h1{margin:0; font-size:1.5rem; letter-spacing:-.02em}
h1::before{content:"🐍 "}
.scores{display:flex; gap:10px}
.score{
  display:flex; flex-direction:column; align-items:flex-end;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:6px 12px; min-width:78px;
}
.score i{font-style:normal; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.score b{font-size:1.15rem; font-variant-numeric:tabular-nums}

.stage{position:relative; aspect-ratio:1; width:100%}
canvas{
  width:100%; height:100%; display:block;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  touch-action:none;
}

.overlay{
  position:absolute; inset:0; display:grid; place-items:center;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(3px); border-radius:14px;
}
.overlay[hidden]{display:none}
.panel{text-align:center; padding:24px; max-width:82%}
.panel h2{margin:0 0 6px; font-size:1.4rem}
.panel p{margin:0 0 16px; color:var(--muted); font-size:.92rem}
.btn{
  font:inherit; font-weight:600; color:#fff; background:var(--accent);
  border:0; border-radius:10px; padding:11px 26px; cursor:pointer;
}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

kbd{
  font:inherit; font-size:.78em; background:var(--panel); color:var(--muted);
  border:1px solid var(--line); border-bottom-width:2px; border-radius:5px;
  padding:1px 6px; margin:0 1px;
}

.pad{display:none; flex-direction:column; align-items:center; gap:8px}
.pad .row{display:flex; gap:8px}
.dir{
  font-size:1.1rem; width:64px; height:52px; color:var(--ink);
  background:var(--panel); border:1px solid var(--line); border-radius:10px; cursor:pointer;
}
.dir:active{background:var(--line)}
@media (hover:none) and (pointer:coarse){ .pad{display:flex} }

.foot{display:flex; gap:16px; justify-content:center; color:var(--muted); font-size:.82rem}
@media (hover:none) and (pointer:coarse){ .foot{display:none} }