:root{
  --bg1:#0b1020;--bg2:#0f1630;--bg3:#151a3a;
  --neon:#35f6ff;--neon2:#58ff9c;--snake:#7eff41;--food:#ff3d81;--grid:#1e2540;
  --text:#e6f1ff;--muted:#9aa7bd;--panel:#0d1226cc;--accent:#ffcf4d;
}
*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% 20%, #112 0%, transparent 60%),
              radial-gradient(1200px 800px at 80% 0%, #022 0%, transparent 60%),
              linear-gradient(145deg, var(--bg1), var(--bg2) 40%, var(--bg3));
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; gap:10px; border-bottom:1px solid #141a33; backdrop-filter: blur(6px);
}
.brand{font-weight:800; letter-spacing:2px}
.neon{color:var(--neon); text-shadow:0 0 8px var(--neon),0 0 16px var(--neon)}
.hud{display:flex; gap:14px; color:var(--muted)}
.controls{display:flex; gap:8px}
.controls button{background:#121936; border:1px solid #1b2555; color:var(--text); padding:6px 10px; border-radius:8px; cursor:pointer}
.controls button.toggle.on{box-shadow:0 0 12px #00e5ff66 inset, 0 0 8px #00e5ff33}
.controls button:hover{border-color:#2d3b7d}

.stage{position:relative; height:calc(100% - 56px)}
#game{ display:block; width:100%; height:100%; image-rendering: crisp-edges; image-rendering: pixelated; }
#touch-hint{ position:absolute; bottom:16px; left:50%; transform: translateX(-50%); color:var(--muted); font-size:.9rem; opacity:.6 }

.overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background: radial-gradient(800px 600px at 50% 40%, #0a0f2fcc, #060919ee 60%, #020416f2 100%); transition: opacity .2s ease; }
.overlay.hidden{ pointer-events:none; opacity:0 }
.overlay.mode-menu{
  background:
    radial-gradient(900px 700px at 35% 35%, #0a143acc, transparent 65%),
    radial-gradient(900px 700px at 75% 25%, #031a2acc, transparent 65%),
    linear-gradient(145deg, #070b1a, #0a1026 40%, #0b1433);
  background-blend-mode: screen, screen, normal;
  /* animated grid glow */
  --grid-c: rgba(0, 224, 255, .06);
  --grid-bg: repeating-linear-gradient(45deg, var(--grid-c) 0 2px, transparent 2px 18px);
  -webkit-mask-image: radial-gradient(1200px 900px at 50% 45%, #000 40%, transparent 100%);
          mask-image: radial-gradient(1200px 900px at 50% 45%, #000 40%, transparent 100%);
}
.overlay.mode-menu::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background: var(--grid-bg);
  animation: gridShift 22s linear infinite;
}
.overlay .panel{ position:relative; z-index: 2 }
/* Background leaderboard window */
.bg-window{ position:absolute; z-index:1; left:6%; top:12%; width:min(520px, 46%); max-height:62vh; overflow:auto; padding:12px 12px 10px; border-radius:14px; border:1px solid #1d2757; background: linear-gradient(180deg, #0b1234cc, #0b1234aa); box-shadow: 0 8px 34px #000a, 0 0 40px #00e5ff11; backdrop-filter: blur(6px); transform: perspective(900px) rotateY(-6deg) rotateX(2deg); }
.bg-title{ font-weight:800; letter-spacing:1px; color:#d7eaff; margin-bottom:6px; text-shadow: 0 0 8px var(--neon) }
#scores-list-bg{ margin:0; padding: 0 0 0 18px; }
.bg-window li{ padding:2px 0; color:#e6f1ff }
.bg-status{ margin-top:6px }

/* Difficulty badges */
.badge{ display:inline-block; font-size:.75rem; padding:2px 8px; border-radius:999px; border:1px solid currentColor; margin-left:6px; opacity:.9 }
.badge.diff-easy{ color:#58ff9c }
.badge.diff-normal{ color:#7dd3fc }
.badge.diff-hard{ color:#f59e0b }
.badge.diff-insane{ color:#ff3d81 }
.country{ color:var(--muted); margin-left:6px }
.flag{ margin-left:6px; }
.panel{ background:var(--panel); border:1px solid #1d2757; border-radius:16px; padding:22px; width:min(720px, calc(100% - 32px)); box-shadow: 0 10px 40px #0009; }
.overlay.mode-menu .panel{ box-shadow: 0 0 40px #00e5ff33, 0 0 120px #00e5ff11, 0 10px 40px #0009; border-color:#2040a0; }
.title{ margin:0 0 6px; font-size:2rem; letter-spacing:2px; text-align:center }
.title.logo{ position:relative; font-family: 'Audiowide', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial; font-weight:900; letter-spacing:3px; text-transform:uppercase; text-shadow: 0 0 8px #00e0ff, 0 0 16px #00e0ff, 0 0 28px #58ff9c; animation: neonPulse 3.6s ease-in-out infinite; }
.title.logo .neon{ color:transparent; background: linear-gradient(90deg, #58ff9c, #00e0ff); -webkit-background-clip:text; background-clip:text; -webkit-text-stroke: 1px #aefbd6; text-shadow: 0 0 12px #00e0ff, 0 0 24px #00e0ff; animation: neonFlicker 6.5s linear infinite; }
.title.logo::after{ content:""; position:absolute; inset:-2px; pointer-events:none; opacity:.08; background: repeating-linear-gradient(0deg, rgba(255,255,255,.28) 0 1px, rgba(0,0,0,0) 1px 3px); mix-blend-mode: overlay; animation: scanPan 10s linear infinite; border-radius:4px }
.subtitle{ text-align:center; color:var(--muted); margin:0 0 14px }
.menu-art{ margin:6px auto 8px; max-width:520px; opacity:.95 }
.menu-art svg{ display:block; margin:0 auto; filter: drop-shadow(0 0 6px #00e0ff55); animation: floatY 5.5s ease-in-out infinite; }
.menu-art svg .glow{ filter: drop-shadow(0 0 8px #00e0ff) drop-shadow(0 0 10px #58ff9c); }
.menu-art svg .snake-body{ animation: slither 4.8s ease-in-out infinite; transform-origin: 60px 30px; }
.menu-art svg .snake-eyes{ animation: blink 4.8s steps(1) infinite; }
.menu-art svg .snake-tongue{ transform-origin: 114px 16px; animation: tongueFlick 2.4s ease-in-out infinite; filter: drop-shadow(0 0 4px #ff3d8177) }
.menu-art svg .sparkles circle{ animation: sparkle 3s ease-in-out infinite; }
.menu-art svg .sparkles circle:nth-child(1){ animation-delay: .2s }
.menu-art svg .sparkles circle:nth-child(2){ animation-delay: 1.1s }
.menu-art svg .sparkles circle:nth-child(3){ animation-delay: .6s }
.menu-art svg .sparkles circle:nth-child(4){ animation-delay: 1.8s }
.menu-art svg .sparkles circle:nth-child(5){ animation-delay: .9s }
.menu{ margin:8px 0 12px }
.menu-grid{ display:flex; flex-direction:column; gap:10px }
.menu .row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.menu label{ color:var(--text) }
.menu select{ background:#0e1440; color:var(--text); border:1px solid #1b2555; border-radius:8px; padding:8px 10px }
.menu .toggles{ display:flex; gap:10px; flex-wrap:wrap }
.menu .toggles label{ background:#0c1336; border:1px solid #1b2555; border-radius:999px; padding:6px 10px; color:#cfe6ff }
.menu input[type=checkbox]{ accent-color: var(--neon); }
.leaderboard h2{ margin:12px 0 8px; }
.leaderboard .lb{ display:grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap:12px; }
.bg-window .lb{ display:grid; grid-template-columns: 1fr; gap:10px; }
@media (max-width: 780px){ .leaderboard .lb{ grid-template-columns: 1fr } }
.lb-group-title{ color:var(--muted); font-weight:700; margin:2px 0 6px }
.lb-list{ margin:0; padding:0 0 0 18px; }
.lb-list li{ padding:2px 0; }
.lb-row{ display:grid; grid-template-columns: 1fr 22px 84px 92px; align-items:center; gap:8px; }
.lb-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.lb-flag{ width:22px; display:flex; align-items:center; justify-content:center }
.lb-flag .fi{ font-size:1em; line-height:1; }
.lb-flag .flag{ margin:0; }
.lb-score{ text-align:right }
.lb-date{ text-align:right; color:var(--muted) }
#scores-list{ margin:0; padding:0 0 0 18px; max-height:220px; overflow:auto }
.status{ color:var(--muted); font-size:.9rem; margin-top:6px }
.enter-name{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0 0 }
.enter-name input{ flex:1 1 200px; background:#0e1440; color:var(--text); border:1px solid #1b2555; border-radius:8px; padding:8px 10px }
.actions{ display:flex; gap:10px; justify-content:center; margin-top:12px }
button.primary{ background:linear-gradient(180deg, #1e2a6a, #16225b); border:1px solid #2b3a8a; color:#eaf6ff; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:700; letter-spacing:.5px; box-shadow:0 0 12px #00f0ff33 inset, 0 8px 22px #0008 }
button.hidden{ display:none }
.hidden{ display:none }

/* Footer meta and bug link */
.meta{ margin-top:10px; text-align:center; color:var(--muted); font-size:.9rem }
.meta .dev{ color:#e6f1ff }
.linklike{ background:none; border:none; color:var(--neon); cursor:pointer; padding:0 2px; text-decoration:underline; font: inherit }
.linklike:hover{ color:#58ff9c }

/* Modal */
.modal{ position:fixed; inset:0; background: #0b1020cc; display:flex; align-items:center; justify-content:center; z-index:50; backdrop-filter: blur(2px) }
.modal .modal-content{ width:min(640px, calc(100% - 32px)); background:#0d1226; border:1px solid #1d2757; border-radius:12px; box-shadow: 0 18px 50px #000c }
.modal-header{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid #16224a }
.modal-header h3{ margin:0 }
.modal-header .icon{ background:#111a3d; border:1px solid #22306a; color:#cfe6ff; border-radius:8px; cursor:pointer; padding:4px 8px }
.modal-body{ padding:12px }
.modal-body textarea{ width:100%; background:#0e1440; color:#e6f1ff; border:1px solid #24336e; border-radius:8px; padding:10px; resize:vertical; min-height:120px }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; padding:0 12px 12px }
.modal.hidden{ display:none !important }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* Panic sheet (Excel-like) */
.panic{ position:absolute; inset:12px; background:#f8fafc; color:#0b1220; border:1px solid #cbd5e1; border-radius:10px; box-shadow: 0 10px 40px #000a; z-index:20; overflow:hidden }
.panic .bar{ height:28px; display:flex; align-items:center; justify-content:space-between; padding:0 10px; background: linear-gradient(#e2e8f0, #cbd5e1); border-bottom:1px solid #94a3b8; font-weight:600; letter-spacing:.2px }
.panic .bar .actions{ opacity:.7 }
.panic .grid{ display:grid; grid-template-columns: 28px repeat(5, 1fr); grid-auto-rows:24px; background:#fff }
.panic .cell{ border:1px solid #e2e8f0; padding:3px 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.panic .cell.h{ background:#f1f5f9; font-weight:700; text-align:center }
.panic .cell.r{ background:#f1f5f9; text-align:right; padding-right:6px; font-weight:700 }

@media (max-width:640px){
  .brand{ font-size:1rem }
  .hud span{ font-size:.9rem }
  .panel{ padding:16px }
}

/* Animations */
@keyframes gridShift {
  0% { background-position: 0 0; }
  100% { background-position: 420px 220px; }
}
@keyframes neonPulse {
  0%, 100% { text-shadow: 0 0 6px #00e0ff, 0 0 16px #00e0ff, 0 0 22px #58ff9c; }
  50% { text-shadow: 0 0 12px #00e0ff, 0 0 28px #00e0ff, 0 0 42px #58ff9c; }
}
@keyframes neonFlicker {
  0%, 2%, 4%, 8%, 100% { opacity:1 }
  1%, 3%, 7% { opacity:.86 }
  5% { opacity:.65 }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-4px) }
}
@keyframes slither {
  0%, 100% { transform: rotate(0deg) translateX(0) }
  50% { transform: rotate(-1.5deg) translateX(2px) }
}
@keyframes blink {
  0%, 90%, 100% { opacity: 1 }
  92%, 94% { opacity: 0 }
}
@keyframes tongueFlick {
  0%, 100% { transform: translateX(0) }
  50% { transform: translateX(3px) }
}
@keyframes sparkle {
  0%, 100% { opacity:.25; transform: scale(.8) }
  50% { opacity:1; transform: scale(1.2) }
}
@keyframes scanPan {
  0% { background-position-y: 0 }
  100% { background-position-y: 120px }
}