:root{
  --bg:#000; --text:#f2f2f2; --muted:#bdbdbd;
  --glass: rgba(15,15,15,.55);
  --border: rgba(255,255,255,.10);
  --accent:#e5e5e5;
  --grid: #1b1b1b;
  --food:#6ee7b7;   /* verde menta */
  --snake:#60a5fa;  /* azul suave */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Poppins,system-ui,Segoe UI,Roboto,Arial,sans-serif;
}

/* Topbar (igual estilo) */
.topbar{
  position:fixed; top:12px; left:50%; transform:translateX(-50%);
  width:min(960px,92vw); height:48px; padding:0 14px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:rgba(18,18,18,.35);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px; backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  box-shadow:0 10px 30px rgba(0,0,0,.35); z-index:9;
}
.topbar .brand-link{ color:var(--text); text-decoration:none; font-weight:700; }
.topbar__links{ display:flex; gap:16px }
.topbar__links a{ color:var(--text); text-decoration:none; font-weight:600; font-size:14px; opacity:.9 }
.topbar__links a:hover{ opacity:1 }

/* Layout */
.wrap{
  min-height:100vh; display:grid; place-items:center; padding:96px 20px 28px;
}
.card-glass{
  background:var(--glass);
  border:1px solid var(--border); border-radius:18px;
  backdrop-filter:blur(10px) saturate(130%);
  -webkit-backdrop-filter:blur(10px) saturate(130%);
  box-shadow:0 10px 40px rgba(0,0,0,.45);
}
.game{
  width:min(720px,95vw);
  padding:18px 18px 12px;
  display:flex; flex-direction:column; gap:12px; align-items:center;
}
.hud{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:6px 6px 0;
}
.score{ font-weight:700 }
.state{ color:var(--muted); font-size:13px }

canvas#board{
  width:min(560px,90vw); height:min(560px,90vw);
  background:#0a0a0a; border:1px solid var(--border); border-radius:12px;
  image-rendering: pixelated;
}

/* Buttons */
.controls{ display:flex; flex-direction:column; gap:10px; align-items:center }
.btn{
  appearance:none; cursor:pointer; font-weight:700; color:var(--text);
  padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.12); transition:.16s ease;
}
.btn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.16) }
.keys-hint{ color:var(--muted); font-size:12px }

/* Touchpad */
.touchpad{
  position:fixed; right:16px; bottom:16px; display:grid; gap:6px; z-index:8;
}
.touchpad .row{ display:flex; gap:6px; justify-content:center }
.touchpad button{
  width:54px; height:54px; border-radius:12px; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.1); color:var(--text); font-weight:700; font-size:16px;
}
@media (min-width: 900px){
  .touchpad{ display:none; }
}