/* Millennial Gamez — Snake (scoped) */
#mgz-snake, #mgz-snake * { box-sizing: border-box; }
#mgz-snake { color: #0f172a; background: #fff; }

#mgz-snake .mgz-wrap {
  width: 100%; max-width: 720px; margin: 0 auto; padding: 14px;
  display: grid; gap: 12px; font: 500 16px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
#mgz-snake .mgz-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border:1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.06); border-radius:14px;
}
#mgz-snake .mgz-brand{ font-weight:800; letter-spacing:.2px; }
#mgz-snake .mgz-right{ display:flex; gap:12px; align-items:center; }
#mgz-snake .mgz-pill{
  background:#fff; border:1px solid rgba(15,23,42,.12);
  border-radius:999px; padding:6px 10px; font-weight:700;
  min-width:64px; text-align:center;
}
#mgz-snake .mgz-buttons{ display:flex; gap:8px; }
#mgz-snake .mgz-btn{
  appearance:none; border:1px solid rgba(15,23,42,.12); background:#fff;
  border-radius:12px; padding:8px 12px; cursor:pointer; font-weight:700;
}
#mgz-snake .mgz-btn:active{ transform: translateY(1px); }
#mgz-snake .mgz-btn--primary{ background:#1e90ff; border-color:#1e90ff; color:#fff; }

#mgz-snake .mgz-board{
  position:relative; width:100%; aspect-ratio:1/1;
  border:1px solid rgba(15,23,42,.12); border-radius:18px; overflow:hidden; background:#fff;
}
#mgz-snake canvas{ width:100%; height:100%; display:block; background:#fff; }

#mgz-snake .mgz-overlay{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(255,255,255,.82); backdrop-filter: blur(4px);
  color:#0f172a; text-align:center; padding:20px;
}
#mgz-snake .mgz-overlay.hidden{ display:none; }
#mgz-snake .mgz-overlay h1{ margin:0 0 8px; font-size:clamp(20px,5vw,32px); }
#mgz-snake .mgz-overlay p{ margin:0 0 14px; opacity:.8; }

#mgz-snake .mgz-hint{ text-align:center; font-size:12px; opacity:.7; }

/* Touch D‑pad */
#mgz-snake .mgz-pad{
  position:absolute; right:10px; bottom:10px;
  display:grid; grid-template-areas: ". up ." "left . right" ". down .";
  gap:8px; user-select:none; -webkit-user-select:none;
}
#mgz-snake .mgz-pad button{
  grid-area: var(--area);
  width:54px; height:54px; border-radius:12px;
  border:1px solid rgba(15,23,42,.12); background:rgba(255,255,255,.92);
  box-shadow:0 2px 8px rgba(0,0,0,.08); font-weight:900; cursor:pointer;
}
@media (hover:hover) and (pointer:fine){ #mgz-snake .mgz-pad{ display:none; } }