/* Neon Snake: the canvas fills the stage; HUD, D-pad and menus are HTML over it */
.sn { display: flex; flex-direction: column; color: #dfe9ff; --sn-hud: 48px; }
.sn-stage { position: relative; width: 100%; height: min(78vh, 680px); min-height: 360px; background: #03050c; overflow: hidden;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
@media (max-width: 600px) { .sn-stage { height: auto; aspect-ratio: 4 / 5; max-height: 76vh; min-height: 0; } }
#sn-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }

/* HUD */
.sn-hud { position: absolute; left: 0; right: 0; top: 0; height: var(--sn-hud); display: flex; align-items: center; gap: 14px; padding: 0 8px 0 14px; z-index: 3; pointer-events: none; }
.sn-hud > * { pointer-events: auto; }
.sn-stat { display: flex; flex-direction: column; line-height: 1.05; min-width: 44px; }
.sn-k { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8aa3c4; }
.sn-stat b { font-size: 21px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; transition: transform .18s cubic-bezier(.3,1.6,.5,1), color .18s; display: inline-block; transform-origin: left center; }
.sn-stat b.sn-pop { transform: scale(1.22); color: #b8f6ff; }
.sn-stat-best b { color: #ffd166; font-size: 17px; margin-top: 3px; }
.sn-combo { display: flex; flex-direction: column; align-items: center; gap: 3px; opacity: 0; transform: scale(.8); transition: opacity .2s, transform .25s cubic-bezier(.3,1.6,.5,1); }
.sn-combo.on { opacity: 1; transform: none; }
.sn-combo b { font-size: 17px; font-weight: 900; color: #ff4fd8; text-shadow: 0 0 10px rgba(255,79,216,0.7); font-variant-numeric: tabular-nums; line-height: 1; }
.sn-combo i { display: block; width: 38px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.12); overflow: hidden; }
.sn-combo i span { display: block; height: 100%; background: linear-gradient(90deg, #ff4fd8, #55d6ff); transform-origin: left center; }
.sn-sp { flex: 1 1 auto; }
.sn-tool { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; border: 1px solid #1c2b4a; background: rgba(11,19,40,0.8);
  color: #bfe0ff; cursor: pointer; touch-action: manipulation; padding: 0; transition: border-color .15s, color .15s, opacity .15s; }
.sn-tool svg { width: 19px; height: 19px; }
@media (hover: hover) { .sn-tool:hover:not(:disabled) { border-color: #55d6ff; color: #fff; } }
.sn-tool:focus-visible { outline: 2px solid #55d6ff; outline-offset: 2px; }
.sn-tool:disabled { opacity: 0.35; cursor: default; }
#sn-pause .pl { display: none; } #sn-pause.is-paused .pl { display: inline; } #sn-pause.is-paused .pz { display: none; }
#sn-sound .off { display: none; } #sn-sound[aria-pressed="true"] { color: #6f84a3; } #sn-sound[aria-pressed="true"] .on { display: none; } #sn-sound[aria-pressed="true"] .off { display: inline; }
#sn-dpad-btn[aria-pressed="true"] { color: #04121a; background: #55d6ff; border-color: #55d6ff; }

/* on-screen arrows (optional) */
.sn-dpad[hidden] { display: none; }
.sn-dpad { position: absolute; z-index: 2; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 4px; touch-action: none; }
.sn-dp { border: 1px solid rgba(85,214,255,0.35); background: rgba(11,19,40,0.72); color: #bff3ff; border-radius: 16px; display: grid; place-items: center; padding: 0;
  cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; transition: background .08s, transform .08s, border-color .08s; }
.sn-dp svg { width: 46%; height: 46%; }
.sn-dp.is-down { background: rgba(85,214,255,0.32); border-color: #55d6ff; transform: scale(.94); }
.sn-dp-up { grid-area: 1 / 2; } .sn-dp-left { grid-area: 2 / 1; } .sn-dp-right { grid-area: 2 / 3; } .sn-dp-down { grid-area: 3 / 2; }

/* menus */
.sn-overlay[hidden] { display: none; }
.sn-overlay { position: absolute; left: 0; right: 0; bottom: 0; top: var(--sn-hud); display: flex; align-items: center; justify-content: center; padding: 12px;
  background: radial-gradient(ellipse at center, rgba(3,6,16,0.35), rgba(3,5,12,0.78)); z-index: 4; overflow: auto; }
.sn-overlay.sn-ov-title { background: radial-gradient(ellipse at center, rgba(3,6,16,0.1), rgba(3,5,12,0.5)); }
.sn-panel { width: min(100%, 360px); margin: auto; text-align: center; padding: 22px 20px 20px; border: 1px solid #1c2b4a; border-radius: 18px;
  background: rgba(8,13,30,0.86); box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(85,214,255,0.06) inset; animation: sn-in .28s cubic-bezier(.2,.9,.25,1.1); }
@keyframes sn-in { from { opacity: 0; transform: scale(.94) translateY(8px); } }
.sn-logo { margin: 0 0 4px; font-size: clamp(30px, 8.5vw, 40px); font-weight: 900; letter-spacing: 0.04em; line-height: 1.05;
  background: linear-gradient(90deg, #3dffb5, #55d6ff 30%, #a66bff 60%, #ff4fd8 85%, #ffd166); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(85,214,255,0.35)); }
.sn-tag { margin: 0 0 16px; color: #8aa3c4; font-size: 13.5px; line-height: 1.45; }
.sn-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 13px; background: #050a18; border: 1px solid #1c2b4a; margin: 0 0 8px; }
.sn-mode { font: inherit; font-size: 13.5px; font-weight: 700; color: #8aa3c4; background: transparent; border: 0; border-radius: 9px; min-height: 40px; cursor: pointer; touch-action: manipulation; transition: background .15s, color .15s; }
.sn-mode[aria-checked="true"] { background: #13234a; color: #fff; box-shadow: inset 0 0 0 1px rgba(85,214,255,0.45), 0 0 16px rgba(85,214,255,0.18); }
@media (hover: hover) { .sn-mode:hover { color: #fff; } }
.sn-mode:focus-visible { outline: 2px solid #55d6ff; outline-offset: 1px; }
.sn-desc { margin: 0 0 14px; font-size: 12.5px; color: #8aa3c4; min-height: 1.4em; }
.sn-best { margin: 0 0 14px; font-size: 12.5px; color: #8aa3c4; } .sn-best b { color: #ffd166; font-variant-numeric: tabular-nums; }
.sn-actions { display: flex; flex-direction: column; gap: 8px; }
.sn-row { display: flex; gap: 8px; } .sn-row > * { flex: 1 1 0; }
.sn-btn { font: inherit; font-weight: 700; font-size: 14.5px; padding: 11px 16px; min-height: 46px; border-radius: 12px; cursor: pointer; touch-action: manipulation;
  border: 1px solid #1c2b4a; background: #0b1328; color: #dfe9ff; transition: background .15s, border-color .15s, transform .1s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
@media (hover: hover) { .sn-btn:hover { border-color: #55d6ff; } }
.sn-btn:active { transform: translateY(1px); }
.sn-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sn-btn svg { width: 17px; height: 17px; flex: none; }
.sn-btn-primary { background: linear-gradient(135deg, #3dffb5, #55d6ff); color: #03141c; border-color: transparent; font-size: 16px; font-weight: 800; box-shadow: 0 6px 24px rgba(85,214,255,0.3); }
@media (hover: hover) { .sn-btn-primary:hover { border-color: transparent; filter: brightness(1.08); } }
.sn-keys { margin: 12px 0 0; font-size: 11.5px; color: #6f84a3; }
.sn-head { margin: 0 0 2px; font-size: 13px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #8aa3c4; }
.sn-score { margin: 0; font-size: 54px; font-weight: 900; color: #fff; line-height: 1.05; font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgba(85,214,255,0.45); }
.sn-newbest { display: inline-block; margin: 6px 0 2px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase;
  color: #1a1200; background: linear-gradient(90deg, #ffd166, #fff1b8, #ffd166); background-size: 200% 100%; animation: sn-shine 1.6s linear infinite; box-shadow: 0 0 22px rgba(255,209,102,0.55); }
@keyframes sn-shine { to { background-position: -200% 0; } }
.sn-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 14px 0 16px; }
.sn-stats div { padding: 8px 4px; border-radius: 10px; background: #050a18; border: 1px solid #16223d; }
.sn-stats span { display: block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #6f84a3; font-weight: 700; }
.sn-stats b { display: block; margin-top: 2px; font-size: 17px; color: #dfe9ff; font-variant-numeric: tabular-nums; }
.sn-stats .gold b { color: #ffd166; }
.sn-toast[hidden] { display: none; }
.sn-toast { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 6; padding: 8px 14px; border-radius: 999px; background: #dfe9ff; color: #04060f; font-size: 13px; font-weight: 700; animation: sn-in .2s ease-out; pointer-events: none; white-space: nowrap; }
.sn-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* short stages (phone sideways): tighter menus */
.sn-short .sn-panel { padding: 14px 16px 14px; width: min(100%, 440px); }
.sn-short .sn-logo { font-size: 28px; }
.sn-short .sn-tag, .sn-short .sn-keys { display: none; }
.sn-short .sn-desc, .sn-short .sn-best { margin-bottom: 8px; }
.sn-short .sn-score { font-size: 40px; }
.sn-short .sn-stats { margin: 8px 0 10px; }
.sn-short .sn-stats div { padding: 5px 4px; }
.sn-short .sn-btn { min-height: 42px; padding: 8px 14px; }
.sn-short .sn-actions.sn-wide { flex-direction: row; } .sn-short .sn-actions.sn-wide > * { flex: 1 1 0; }

.sn-help { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; }
.sn-help .hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .sn-help .hint-kb { display: none; } .sn-help .hint-touch { display: inline; } }
.stage .sn-help { padding: 10px 14px 12px; }
@media (max-width: 400px) { .sn-hud { gap: 10px; padding-left: 10px; } .sn-stat b { font-size: 19px; } .sn-tool { width: 40px; } }

/* full screen: the board takes every pixel */
.stage.is-immersive .stage-body > .sn { min-height: 0; }
.stage.is-immersive .sn-stage { flex: 1 1 auto; height: auto; aspect-ratio: auto; max-height: none; min-height: 0; }
.stage.is-immersive .sn-help { display: none; }
@media (prefers-reduced-motion: reduce) { .sn-panel, .sn-toast { animation: none; } .sn-newbest { animation: none; } .sn-stat b { transition: none; } }