/* The Neon theme (Settings > Display > Theme; the default): the redesign's language (redesign/, the preview) over
   the game's own screens. Forged-ink glass panels, gold for prestige and yellow for "go" (PLAY), teal for information; a
   display serif for titles, the pixel sans for the interface, pixel digits for numbers; chamfered buttons, thin
   warm hairlines instead of copper frames, the painted places behind it all under a vignette and a little grain.
   Everything here is under html[data-theme='neon']: Legacy (main.css, ui3.css, legacy.css) never
   see it. Loaded last on every page. */

@font-face { font-family: 'Alegreya SC'; src: url('../assets/fonts/alegreya-sc-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

html[data-theme='neon'] {
  /* the redesign's tokens */
  --ink-0: #060509;
  --ink-1: #0d0b12;
  --ink-2: #15121b;
  --ink-3: #1e1926;
  --ink-4: #2a2334;
  --glass: rgba(20, 16, 26, 0.78);
  --glass-hi: rgba(36, 29, 46, 0.86);
  --line-1: rgba(255, 232, 196, 0.08);
  --line-2: rgba(255, 232, 196, 0.16);
  --line-3: rgba(255, 232, 196, 0.28);
  --gold-2: #d39a3e;
  --gold-3: #8a5c22;
  --ember: #ff6b2c;
  --ember-2: #e2401a;
  --ember-3: #8f1f0c;
  --teal-2: #239d8c;
  --cut: 4px;
  --chamfer: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --n-radius: 2px;
  /* the game's own names, on those tokens (every screen reads these) */
  --bg: var(--ink-0);
  --bg-2: var(--ink-1);
  --panel: var(--ink-2);
  --panel-2: var(--ink-3);
  --panel-3: var(--ink-4);
  --inset: var(--ink-1);
  --line: rgba(255, 232, 196, 0.16);
  --copper: #d39a3e;
  --copper-hi: #f5c862;
  --copper-dk: #8a5c22;
  --teal: #4fdcc6;
  --teal-hi: #a8fff1;
  --teal-dk: #239d8c;
  --gold: #f5c862;
  --text: #f3ebde;
  --text-2: #bfb3a3;
  --muted: #8f8476;
  --good: #72de6c;
  --bad: #ff5a6e;
  --rarity-common: #a9afb7;
  --rarity-rare: #4fa8ff;
  --rarity-epic: #b770ff;
  --rarity-legendary: #ffb52f;
  --font-title: 'Alegreya SC', Georgia, serif;
  --font-label: 'Eriband Digits', 'Alegreya SC', Georgia, serif; /* the small capitals: Pixelify's bold C reads as an O */
  --font-num: 'Micro 5', 'Pixelify Sans', monospace;
  /* no copper frames */
  --frame-panel: none;
  --frame-button: none;
  --frame-button-red: none;
  --frame-tab: none;
  --frame-inset: none;
  --frame-card: none;
  --radius: 8px;
  --avatar-bg: #1e1926;
  /* the main page's own set (ui3.css), on the same tokens */
  --v3-bg: var(--ink-1);
  --v3-win: rgba(13, 11, 18, 0.9);
  --v3-panel: rgba(20, 16, 26, 0.82);
  --v3-panel-2: rgba(36, 29, 46, 0.86);
  --v3-panel-3: var(--ink-4);
  --v3-edge: rgba(255, 232, 196, 0.16);
  --v3-rim: rgba(255, 232, 196, 0.1);
  --v3-rim-soft: rgba(255, 232, 196, 0.06);
  --v3-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9);
}
:root.cb[data-theme='neon'] { --team-red: #f08a2b; --team-red-hi: #ffc58a; }
html[data-theme='neon'] ::selection { background: var(--gold); color: var(--ink-0); }
html[data-theme='neon'] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme='neon'] ::-webkit-scrollbar-thumb { background: var(--ink-4); border: 3px solid transparent; background-clip: padding-box; border-radius: 10px; }
html[data-theme='neon'] ::-webkit-scrollbar-track { background: transparent; }

/* ================================================================== the world behind: a grade, a vignette, grain */
html[data-theme='neon'] body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 35%, rgba(6, 5, 9, 0.72) 100%),
    linear-gradient(180deg, rgba(6, 5, 9, 0.5) 0%, rgba(6, 5, 9, 0.1) 30%, rgba(6, 5, 9, 0.3) 70%, rgba(6, 5, 9, 0.85) 100%);
}
html[data-theme='neon'] body::before {
  content: ''; position: fixed; inset: -50%; z-index: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* (the board in a fight: no grade over it) */
html[data-theme='neon'] body:has(.screen.battle)::after { background: radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(6, 5, 9, 0.6) 100%); }
html[data-theme='neon'] #boot { background: linear-gradient(rgba(12, 8, 16, 0.5), rgba(12, 8, 16, 0.85)), url(../assets/art/brand/splash-landscape.webp) center / cover no-repeat, var(--ink-0); }
@media (orientation: portrait) {
  html[data-theme='neon'] #boot { background: linear-gradient(rgba(12, 8, 16, 0.5), rgba(12, 8, 16, 0.85)), url(../assets/art/brand/splash-portrait.webp) center / cover no-repeat, var(--ink-0); }
}
/* (the logo from the first paint, no words before it) */
html[data-theme='neon'] .boot-logo { display: block; transform: translateX(-12.49%); } /* (its words in the middle of the screen, the mark to their left) */
html[data-theme='neon'] #boot:has(.boot-logo) :is(.boot-title, .boot-sub) { display: none; }
html[data-theme='neon'] .boot-spin { display: block; width: 56px; height: 56px; background: url(../assets/art/brand/loading-spinner-anim.webp) 0 0 / 672px 56px no-repeat; animation: boot-spin 0.96s steps(12) infinite; }
@keyframes boot-spin { to { background-position: -672px 0; } }
html[data-theme='neon'] .boot-title { font-family: var(--font-title); letter-spacing: 4px; color: var(--gold); text-shadow: 0 4px 0 var(--gold-3), 0 0 30px rgba(245, 200, 98, 0.35); }
html[data-theme='neon'] .boot-bar { height: 8px; border: 0; border-radius: 6px; background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--line-1); overflow: hidden; }
html[data-theme='neon'] .boot-bar i { border-radius: inherit; background: linear-gradient(180deg, #ffe7a3, var(--gold) 45%, var(--gold-2)); box-shadow: 0 0 10px var(--gold); }

/* ================================================================== type */
html[data-theme='neon'] .title {
  font-family: var(--font-title); font-weight: 700; letter-spacing: 0.04em; line-height: 1.05;
  background: linear-gradient(180deg, #fff6dc 0%, var(--gold) 55%, var(--gold-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.5));
}
html[data-theme='neon'] .title.teal { background: linear-gradient(180deg, #e2fffa, var(--teal) 60%, var(--teal-2)); -webkit-background-clip: text; background-clip: text; }
html[data-theme='neon'] .h2 { font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 10px; }
html[data-theme='neon'] .h2::before { content: ''; width: 16px; height: 2px; flex: none; background: currentColor; box-shadow: 0 0 8px currentColor; }
html[data-theme='neon'] .tier { font-family: var(--font-num); font-size: 16px; }

/* ================================================================== panels */
html[data-theme='neon'] .panel {
  border: 1px solid var(--line-2); border-image: none; border-radius: var(--n-radius);
  background: #120f17;
  box-shadow: none;
  image-rendering: auto;
}
html[data-theme='neon'] .panel.dark { background: rgba(6, 5, 9, 0.7); }
html[data-theme='neon'] .panel.flat { border: 1px solid var(--line-1); background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); }
html[data-theme='neon'] .panel.inset { border: 1px solid var(--line-1); border-image: none; background: rgba(0, 0, 0, 0.38); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6); }
/* a panel's tab: a teal kicker inside it */
html[data-theme='neon'] .panel > .tab {
  position: static; transform: none; display: flex; align-items: center; gap: 10px; align-self: flex-start;
  margin: 0 0 10px; padding: 0; white-space: normal; max-width: 100%; overflow-wrap: anywhere;
  font: 700 12px/1.2 var(--font-label); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold);
  background: none; border: 0; border-image: none; box-shadow: none;
}
html[data-theme='neon'] .panel > .tab::before { content: ''; width: 16px; height: 2px; flex: none; background: currentColor; box-shadow: 0 0 8px currentColor; }
html[data-theme='neon'] .panel.has-tab { margin-top: 0; padding-top: 14px; }

/* ================================================================== buttons: chamfered, a shine sweeps across on hover */
html[data-theme='neon'] .btn {
  --bg: #1b1722;
  --edge: var(--line-3);
  isolation: isolate; min-height: 40px; padding: 6px 20px;
  font-family: var(--font-label); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text); background: none; border: 0; border-image: none; border-radius: 0;
  box-shadow: none; text-shadow: none; image-rendering: auto;
  filter: none;
  transition: transform 0.12s var(--ease-out), filter 0.2s, color 0.15s;
}
html[data-theme='neon'] .btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; clip-path: var(--chamfer); pointer-events: none;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--edge);
  transition: box-shadow 0.15s, background 0.15s;
}
html[data-theme='neon'] .btn:hover:not(:disabled) { --edge: var(--gold); color: var(--gold); transform: translateY(-1px); filter: drop-shadow(0 0 8px rgba(245, 200, 98, 0.28)); }
html[data-theme='neon'] .btn:active:not(:disabled), html[data-theme='neon'] .btn.pressed { transform: translateY(1px) scale(0.98); filter: brightness(0.95); }
html[data-theme='neon'] .btn:disabled, html[data-theme='neon'] .btn.disabled { filter: grayscale(1) brightness(0.6); }
html[data-theme='neon'] .btn.primary { --bg: linear-gradient(180deg, #ffd84a, #eeb91f); --edge: transparent; color: #1a1206; }
html[data-theme='neon'] .btn.primary:hover:not(:disabled) { --bg: linear-gradient(180deg, #ffe680, #f7c636); --edge: transparent; color: #1a1206; filter: drop-shadow(0 0 12px rgba(255, 216, 74, 0.6)); }
html[data-theme='neon'] :is(.btn.gold, .btn.teal) { --bg: rgba(245, 200, 98, 0.1); --edge: var(--gold-2); color: #f5d98a; }
html[data-theme='neon'] :is(.btn.gold, .btn.teal):hover:not(:disabled) { --bg: var(--gold); --edge: var(--gold); color: #1a1206; }
html[data-theme='neon'] .btn.danger, html[data-theme='neon'] .btn.red { --bg: rgba(255, 90, 110, 0.1); --edge: var(--bad); color: #ff9aa6; }
html[data-theme='neon'] :is(.btn.danger, .btn.red):hover:not(:disabled) { --bg: var(--bad); --edge: var(--bad); color: #fff; }
/* (the main page's own variants set a bevel and a fill of their own: none of it here, the plate is the ::before) */
html[data-theme='neon'] .btn:is(.primary, .teal, .gold, .danger, .red, .small, .big, .icon, .selected, .active, .block) { background: none; border: 0; box-shadow: none; }
html[data-theme='neon'] .btn.small { --cut: 3px; min-height: 30px; padding: 2px 12px; font-size: 11px; letter-spacing: 0.1em; }
html[data-theme='neon'] .btn.big { --cut: 5px; min-height: 50px; padding: 8px 28px; font-size: 16px; }
html[data-theme='neon'] .btn.icon { --cut: 3px; padding: 4px; letter-spacing: 0; }
html[data-theme='neon'] .btn.active { color: var(--gold); }
html[data-theme='neon'] .btn.selected { filter: drop-shadow(0 0 1px var(--gold)) drop-shadow(0 0 8px rgba(245, 200, 98, 0.55)); }
html[data-theme='neon'] .btn.selected::before { box-shadow: inset 0 0 0 2px var(--gold), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
html[data-theme='neon'] .btn.link { filter: none; text-transform: none; letter-spacing: 0; color: var(--gold); }
html[data-theme='neon'] .btn.link::before { display: none; }

/* ================================================================== tabs: a strip, the open one inked in gold */
html[data-theme='neon'] .tabs { gap: 2px; border-bottom: 1px solid var(--line-1); }
html[data-theme='neon'] .tabs .btn {
  min-height: 42px; padding: 4px 16px; filter: none; transform: none;
  font-size: 13px; letter-spacing: 0.08em; color: #a79e91; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; transition: color 0.15s, border-color 0.2s;
  box-shadow: none; text-shadow: none;
}
html[data-theme='neon'] .tabs .btn::before { display: none; }
html[data-theme='neon'] .tabs .btn:hover:not(:disabled) { color: #f3ebde; background: none; border-bottom-color: rgba(245, 200, 98, 0.45); filter: none; transform: none; }
html[data-theme='neon'] .tabs .btn.on { color: var(--gold); border-bottom-color: var(--gold); background: none; box-shadow: none; }
html[data-theme='neon'] .tabs .btn.on::after { display: none; }
html[data-theme='neon'] .tabs .btn:has(.lbl) :is(canvas, img) { display: none; } /* (words, as in the bar) */
html[data-theme='neon'] .tabs-burger { border-radius: var(--n-radius); }
html[data-theme='neon'] .tabs-menu { border: 1px solid var(--line-3); border-radius: var(--n-radius); background: linear-gradient(180deg, rgba(34, 28, 44, 0.98), rgba(18, 14, 24, 0.98)); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7); }
html[data-theme='neon'] .tabs-menu-item { border-radius: 6px; }

/* ================================================================== cards (champions, mascots, skins...) */
html[data-theme='neon'] .card {
  border: 1px solid var(--line-2); border-image: none; border-radius: var(--n-radius);
  background: radial-gradient(ellipse at 50% 30%, #2f2739 0, #1b1622 58%, #120f17 100%);
  box-shadow: 0 14px 28px -18px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.3s var(--ease-out), border-color 0.25s, box-shadow 0.25s;
}
html[data-theme='neon'] .card:hover { transform: translateY(-3px); filter: none; border-color: var(--line-3); box-shadow: 0 22px 40px -22px rgba(0, 0, 0, 1), 0 0 0 1px rgba(245, 200, 98, 0.18); }
html[data-theme='neon'] .card.locked:hover { transform: none; }
html[data-theme='neon'] .card.selected { background: radial-gradient(ellipse at 50% 30%, #23413c 0, #15201f 60%, #0e1414 100%); border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal), 0 0 18px -2px rgba(79, 220, 198, 0.55); }
html[data-theme='neon'] .card .name { letter-spacing: 0.02em; }

/* ================================================================== chips, tags, bars */
html[data-theme='neon'] .chip { gap: 6px; padding: 2px 10px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.3); color: var(--text-2); letter-spacing: 0.04em; }
html[data-theme='neon'] .chip.order { color: #9cb8ff; border-color: rgba(100, 146, 255, 0.45); background: rgba(100, 146, 255, 0.12); }
html[data-theme='neon'] .chip.wild { color: #9be8a0; border-color: rgba(107, 214, 114, 0.45); background: rgba(107, 214, 114, 0.12); }
html[data-theme='neon'] .chip.arcane { color: #d2b4ff; border-color: rgba(185, 138, 255, 0.45); background: rgba(185, 138, 255, 0.12); }
html[data-theme='neon'] .chip.shadow { color: #ff9cb8; border-color: rgba(255, 99, 144, 0.45); background: rgba(255, 99, 144, 0.12); }
html[data-theme='neon'] .chip.gold { color: var(--gold); border-color: rgba(245, 200, 98, 0.45); background: rgba(245, 200, 98, 0.1); }
html[data-theme='neon'] .bar { border: 0; border-radius: 6px; background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--line-1); }
html[data-theme='neon'] .bar > i { border-radius: inherit; background: linear-gradient(180deg, #ffe9a8, var(--gold) 45%, var(--gold-2)); }
html[data-theme='neon'] .bar.xp > i { background: linear-gradient(180deg, #e0c8ff, #b98aff 45%, #6c3fc9); }
html[data-theme='neon'] .bar.energy > i { background: linear-gradient(180deg, #ffe7a3, var(--gold) 45%, var(--gold-2)); }
html[data-theme='neon'] .bar.hp > i { background: linear-gradient(180deg, #b8f5b4, var(--good) 45%, #2f9c39); }
html[data-theme='neon'] .bar.hp.low > i { background: linear-gradient(180deg, #ffb0ba, var(--bad) 45%, #a8213a); }
html[data-theme='neon'] .bar.hp > i.sh { background: linear-gradient(180deg, #ffffff, #9fcfff); }
html[data-theme='neon'] .cur { gap: 6px; padding: 2px 12px 2px 4px; border: 1px solid var(--line-2); border-radius: 16px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.25)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
html[data-theme='neon'] .kbd { border-radius: 0; border-color: var(--line-2); background: rgba(0, 0, 0, 0.35); }
html[data-theme='neon'] .badge::after { border: 0; box-shadow: 0 0 0 2px var(--ink-1); }

/* ================================================================== inputs, switches, lists */
html[data-theme='neon'] .input { border: 1px solid var(--line-2); border-image: none; border-radius: var(--n-radius); background: rgba(0, 0, 0, 0.4); box-shadow: none; transition: border-color 0.25s, box-shadow 0.25s; }
html[data-theme='neon'] .input:focus { border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(245, 200, 98, 0.12); }
html[data-theme='neon'] .switch { width: 46px; height: 26px; border: 1px solid var(--line-2); border-radius: 13px; background: var(--ink-4); transition: background 0.3s; }
html[data-theme='neon'] .switch::after { top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(180deg, #fff, #c9bfb1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); transition: left 0.35s var(--ease-back); }
html[data-theme='neon'] .switch.on { border-color: transparent; background: linear-gradient(180deg, #ffd768, #e8a92d); box-shadow: 0 0 12px -2px rgba(245, 200, 98, 0.7); }
html[data-theme='neon'] .switch.on::after { left: 22px; background: linear-gradient(180deg, #fff, #c9bfb1); }
html[data-theme='neon'] input[type='range'] { accent-color: var(--gold); }
html[data-theme='neon'] .toggle { padding: 4px 10px; border: 1px solid var(--line-1); border-image: none; border-radius: var(--n-radius); background: rgba(0, 0, 0, 0.22); box-shadow: none; }
html[data-theme='neon'] .toggle:hover { background: rgba(255, 255, 255, 0.04); }
html[data-theme='neon'] .list-item {
  position: relative; border: 1px solid var(--line-1); border-image: none; border-radius: var(--n-radius);
  background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); transition: background 0.25s, border-color 0.25s;
}
html[data-theme='neon'] button.list-item:hover, html[data-theme='neon'] .list-item:hover:not(:disabled) { border-color: var(--line-2); background: linear-gradient(90deg, rgba(245, 200, 98, 0.08), rgba(0, 0, 0, 0.28) 70%); box-shadow: inset 3px 0 0 var(--gold); }

/* ================================================================== modal, tooltip, toasts */
html[data-theme='neon'] .modal-back { background: rgba(6, 5, 9, 0.66); backdrop-filter: blur(3px); }
html[data-theme='neon'] .modal {
  border: 1px solid var(--line-3); border-image: none; border-radius: 2px;
  background: #15111b;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75);
}
html[data-theme='neon'] .modal::before, html[data-theme='neon'] .modal::after { display: none; }
html[data-theme='neon'] .modal.emote-wheel-modal { padding: 0; background: none; border: 0; box-shadow: none; }
/* the emote wheel: the game stays in sight behind it, the mascot in its hollow; flat like the rest */
html[data-theme='neon'] .modal-back:has(.emote-wheel-modal) { background: rgba(5, 3, 7, 0.25); backdrop-filter: none; }
html[data-theme='neon'] .emote-wheel { border-color: #17131d; box-shadow: 0 0 0 1px var(--line-3), 0 12px 26px rgba(0, 0, 0, 0.5), inset 0 0 0 1px var(--line-3); }
html[data-theme='neon'] .wheel-page { display: grid; place-items: center; background: rgba(13, 10, 18, 0.95); border: 1px solid var(--line-2); box-shadow: none; opacity: 1; }
html[data-theme='neon'] .wheel-page.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
html[data-theme='neon'] .wheel-page:hover { border-color: var(--gold); }
html[data-theme='neon'] .emote-name, html[data-theme='neon'] .phrase-pill { background: rgba(13, 10, 18, 0.95); border: 1px solid var(--line-2); border-radius: 0; box-shadow: none; }
html[data-theme='neon'] .phrase-pill:hover, html[data-theme='neon'] .phrase-pill:focus-visible { border-color: var(--gold); color: var(--gold); }
/* the phrases: no stone ring, a thin circle round the mascot and two even columns of the same buttons beside it */
html[data-theme='neon'] .emote-wheel.nx-phrases { border: 0; box-shadow: none; }
html[data-theme='neon'] .nx-phrases .emote-name { display: none; }
html[data-theme='neon'] .nx-phrases .emote-hub { width: 112px; height: 112px; margin: -56px 0 0 -56px; background: rgba(13, 10, 18, 0.35); box-shadow: 0 0 0 1px var(--line-3); }
html[data-theme='neon'] .nx-phrases .wheel-pages { bottom: calc(100% - 44px); }
html[data-theme='neon'] .nx-phrases .phrase-pill { width: 160px; min-height: 40px; margin: 0; padding: 4px 10px; display: grid; place-items: center; font: 600 14px/1.15 var(--nx-ui); color: #fff6dc; text-align: center; white-space: normal; }
html[data-theme='neon'] .nx-phrases .phrase-pill:hover, html[data-theme='neon'] .nx-phrases .phrase-pill:focus-visible { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); }
html[data-theme='neon'] #tooltip {
  border: 1px solid var(--line-3); border-image: none; border-radius: var(--n-radius);
  background: linear-gradient(180deg, rgba(34, 28, 44, 0.98), rgba(18, 14, 24, 0.98));
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.6);
}
html[data-theme='neon'] #tooltip .tt-title { color: var(--gold); }
html[data-theme='neon'] .toast {
  border: 1px solid var(--line-3); border-image: none; border-radius: 10px; padding: 10px 18px;
  background: linear-gradient(180deg, rgba(40, 32, 50, 0.97), rgba(20, 16, 26, 0.97)); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

/* ================================================================== the main page's window (ui3): glass over the place */
html[data-theme='neon'] #app > .screen.win {
  border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(20, 16, 26, 0.88), rgba(10, 8, 14, 0.92));
  box-shadow: 0 0 0 100vmax rgba(6, 5, 9, 0.28), 0 40px 90px -30px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
@media (max-width: 760px) {
  html[data-theme='neon'] #app > .screen.win { border-width: 0; border-radius: 0; box-shadow: none; background: rgba(10, 8, 14, 0.86); }
}
html[data-theme='neon'] .screen.win > .screen-head {
  padding: 14px 24px 12px; gap: 14px;
  background: linear-gradient(180deg, rgba(255, 232, 196, 0.04), transparent); border-bottom: 1px solid var(--line-1); box-shadow: none;
}
html[data-theme='neon'] .screen.win > .screen-head::after { content: ''; position: absolute; left: 24px; right: 24px; height: 1px; margin-top: 0; pointer-events: none; }
html[data-theme='neon'] .screen-head .title { font-size: 26px; letter-spacing: 0.04em; }
html[data-theme='neon'] .screen-head > .btn.icon:first-child {
  width: 38px; height: 38px; min-width: 38px; min-height: 38px; padding: 0; filter: none;
  border: 1px solid var(--line-1); border-radius: 10px; background: rgba(255, 255, 255, 0.03); box-shadow: none;
}
html[data-theme='neon'] .screen-head > .btn.icon:first-child::before { display: none; }
html[data-theme='neon'] .screen-head > .btn.icon:first-child:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--line-3); }
@media (max-width: 760px) { html[data-theme='neon'] .screen-head .title { font-size: 19px; } }

/* ================================================================== the bar on top (hub.css, ui3.css) */
html[data-theme='neon'] .hub-bar {
  background: linear-gradient(180deg, rgba(8, 6, 11, 0.94), rgba(8, 6, 11, 0.62));
  border-bottom: 1px solid var(--line-1); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
}
html[data-theme='neon'] .hub-bar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(245, 200, 98, 0.45) 30%, rgba(245, 200, 98, 0.45) 70%, transparent); opacity: 0.5; }
html[data-theme='neon'] .hub-brand .t1 { font-family: var(--font-title); font-size: 20px; letter-spacing: 0.08em;
  background: linear-gradient(180deg, #fff3cf 10%, var(--gold) 50%, var(--gold-2) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
html[data-theme='neon'] .hub-tab {
  padding: 0 15px; filter: none; transform: none;
  font-size: 12px; letter-spacing: 0.14em; color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; box-shadow: none; text-shadow: none;
}
html[data-theme='neon'] .hub-tab::before { display: none; }
html[data-theme='neon'] .hub-tab:hover:not(:disabled) { color: var(--text); background: none; transform: none; filter: none; }
html[data-theme='neon'] .hub-tab.on { color: var(--gold); border-bottom-color: var(--gold); background: radial-gradient(80% 120% at 50% 100%, rgba(245, 200, 98, 0.16), transparent 70%); box-shadow: 0 2px 12px -4px var(--gold); }
html[data-theme='neon'] .hub-tab canvas, html[data-theme='neon'] .hub-tab img { opacity: 1; filter: grayscale(0.7) brightness(0.8); transition: filter 0.3s, transform 0.35s var(--ease-back); }
html[data-theme='neon'] .hub-tab:hover canvas, html[data-theme='neon'] .hub-tab:hover img { filter: none; transform: translateY(-2px) scale(1.08); }
html[data-theme='neon'] .hub-tab.on canvas, html[data-theme='neon'] .hub-tab.on img { filter: drop-shadow(0 0 6px rgba(245, 200, 98, 0.6)); }
/* PLAY: the yellow call to action, its stripes moving (the open one lit brighter, a glow round it) */
html[data-theme='neon'] .hub-play {
  --cut: 10px; height: 44px; padding: 0 28px; filter: drop-shadow(0 8px 16px rgba(255, 200, 40, 0.28));
  font-family: var(--font-title); font-size: 20px; letter-spacing: 0.08em; text-transform: uppercase; color: #2a1a06; text-shadow: 0 1px 0 rgba(255, 250, 220, 0.6);
  border: 0; clip-path: var(--chamfer);
  background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255, 255, 255, 0.14) 22px 26px), radial-gradient(120% 140% at 20% 0%, #fff6c8 0%, transparent 45%), linear-gradient(180deg, #ffe680 0%, #ffd23a 40%, #f0b419 78%, #b9800c 100%);
  background-size: 52px 100%, auto, auto;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), inset 0 -5px 0 rgba(120, 70, 0, 0.45);
  animation: n-stripes 2.4s linear infinite;
}
html[data-theme='neon'] .hub-play::before { display: none; }
html[data-theme='neon'] .hub-play:hover:not(:disabled) { filter: drop-shadow(0 10px 20px rgba(255, 200, 40, 0.4)) brightness(1.08); transform: translateY(-1px); }
html[data-theme='neon'] .hub-play.on { filter: drop-shadow(0 0 12px rgba(255, 220, 80, 0.7)); background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255, 255, 255, 0.2) 22px 26px), radial-gradient(120% 140% at 20% 0%, #fffbe6 0%, transparent 50%), linear-gradient(180deg, #fff3a8 0%, #ffe04d 45%, #f5c21f 100%); background-size: 52px 100%, auto, auto; }
@keyframes n-stripes { to { background-position: 52px 0, 0 0, 0 0; } }
html[data-theme='neon'] .hub-tools .btn { --cut: 0px; width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; filter: none; border: 1px solid var(--line-1); border-radius: 10px; background: rgba(255, 255, 255, 0.03); box-shadow: none; }
html[data-theme='neon'] .hub-tools .btn::before { display: none; }
html[data-theme='neon'] .hub-tools .btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); border-color: var(--line-3); transform: none; }
html[data-theme='neon'] .hub-bar .currencies .cur { border: 1px solid var(--line-2); border-radius: 18px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.25)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
html[data-theme='neon'] .hub-me { border: 1px solid var(--line-1); border-radius: 26px; background: rgba(255, 255, 255, 0.03); box-shadow: none; }
html[data-theme='neon'] .hub-me:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--line-2); }
html[data-theme='neon'] .hub-me .hub-pic { border: 0; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #3a3046, #1a1520); }
html[data-theme='neon'] .hub-me .hub-xp { border-radius: 2px; background: rgba(0, 0, 0, 0.6); }
html[data-theme='neon'] .hub-me .hub-xp i { background: linear-gradient(90deg, var(--gold-2), var(--gold)); box-shadow: 0 0 6px var(--gold); }
html[data-theme='neon'] .hub-me.with-banner { border-radius: 12px; }
html[data-theme='neon'] .hub-me.with-banner .hub-pic { border-radius: 8px; }

/* phones: the bottom bar as glass, each tab a rounded square, PLAY the yellow one */
@media (max-width: 760px) {
  html[data-theme='neon'] .hub-bottom { background: linear-gradient(180deg, rgba(20, 16, 26, 0.9), rgba(8, 6, 11, 0.98)); border-top: 1px solid var(--line-2); box-shadow: 0 -10px 30px -10px rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); }
  html[data-theme='neon'] .hub-btab { filter: none; border: 1px solid var(--line-1); border-radius: 12px; background: rgba(255, 255, 255, 0.03); box-shadow: none; color: var(--muted); padding: 4px 2px 3px; font-size: 10px; letter-spacing: 0; text-transform: none; }
  html[data-theme='neon'] .hub-btab::before { display: none; }
  html[data-theme='neon'] .hub-btab.on { color: var(--gold); border-color: rgba(245, 200, 98, 0.5); background: radial-gradient(90% 100% at 50% 100%, rgba(245, 200, 98, 0.2), rgba(255, 255, 255, 0.03)); box-shadow: 0 0 14px -4px var(--gold); }
  html[data-theme='neon'] .hub-bplay { filter: drop-shadow(0 6px 14px rgba(255, 200, 40, 0.3)); border: 0; border-radius: 14px; font-family: var(--font-title); font-size: 13px; color: #2a1a06; text-shadow: 0 1px 0 rgba(255, 250, 220, 0.6);
    background: radial-gradient(120% 140% at 20% 0%, #fff6c8 0%, transparent 45%), linear-gradient(180deg, #ffe680 0%, #ffd23a 40%, #f0b419 78%, #b9800c 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), inset 0 -5px 0 rgba(120, 70, 0, 0.45); }
  html[data-theme='neon'] .hub-bplay::before { display: none; }
  html[data-theme='neon'] .hub-bplay.on { filter: drop-shadow(0 0 12px rgba(255, 220, 80, 0.7)); background: radial-gradient(120% 140% at 20% 0%, #fffbe6 0%, transparent 50%), linear-gradient(180deg, #fff3a8 0%, #ffe04d 45%, #f5c21f 100%); }
  html[data-theme='neon'] .hub-me, html[data-theme='neon'] .hub-me.with-banner { border: 0; background: none; }
}

/* ================================================================== Home and Play (hub3.css) */
html[data-theme='neon'] .h3-cont { border-left: 1px solid var(--line-2); box-shadow: inset 3px 0 0 var(--teal), 0 24px 50px -28px rgba(0, 0, 0, 0.9); }
html[data-theme='neon'] .h3-cont.hot { box-shadow: inset 3px 0 0 var(--gold), 0 24px 50px -28px rgba(0, 0, 0, 0.9); }
html[data-theme='neon'] .h3-cont:hover, html[data-theme='neon'] .h3-cont:focus-visible { border-color: var(--line-3); box-shadow: inset 3px 0 0 var(--gold), 0 30px 60px -30px #000, 0 0 0 1px rgba(245, 200, 98, 0.18); }
html[data-theme='neon'] .h3-cont-text b, html[data-theme='neon'] .h3-tile b { color: var(--text); letter-spacing: 0.1em; }
html[data-theme='neon'] .h3-cta { color: var(--gold); letter-spacing: 0.14em; }
html[data-theme='neon'] .h3-tile { border-top: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; }
html[data-theme='neon'] .h3-tile:hover, html[data-theme='neon'] .h3-tile:focus-visible { border-color: rgba(245, 200, 98, 0.45); box-shadow: 0 30px 60px -30px #000, 0 0 0 1px rgba(245, 200, 98, 0.3), 0 0 30px -10px rgba(245, 200, 98, 0.35); }
html[data-theme='neon'] .h3-tile-ico { border: 1px solid var(--line-2); border-radius: 14px; background: radial-gradient(circle at 50% 40%, #2f2739, #120f17 75%); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.8); }
html[data-theme='neon'] .h3-thumb { border-bottom: 1px solid var(--line-2); }
html[data-theme='neon'] .h3-status { font-family: var(--font-label); border: 1px solid rgba(245, 200, 98, 0.45); border-radius: 4px; background: rgba(245, 200, 98, 0.1); letter-spacing: 0.08em; text-transform: uppercase; }
html[data-theme='neon'] .h3-event { border: 0; border-radius: 4px; color: #2a1a06; background: linear-gradient(180deg, #ffe7a3, var(--gold) 45%, var(--gold-2)); }
html[data-theme='neon'] :is(.h3-evg, .h3-linkline, .h3-quests) { border: 1px solid var(--line-1); border-radius: var(--n-radius); background: rgba(0, 0, 0, 0.28); }
html[data-theme='neon'] :is(.h3-evg, .h3-linkline, .h3-quests):hover { border-color: var(--line-2); box-shadow: inset 3px 0 0 var(--gold); background: linear-gradient(90deg, rgba(245, 200, 98, 0.08), rgba(0, 0, 0, 0.28) 70%); }
html[data-theme='neon'] .h3-evg { color: var(--gold); }
html[data-theme='neon'] .h3-faces canvas { border: 1px solid var(--line-2); border-radius: 10px; background: radial-gradient(circle at 50% 38%, #2f2739, #120f17 75%); box-shadow: none; }
html[data-theme='neon'] .h3-weekbar { border-top-color: var(--line-1); }
html[data-theme='neon'] .h3-stage { background: radial-gradient(ellipse at 50% 85%, rgba(245, 200, 98, 0.16), transparent 62%); }

/* ================================================================== champion select (draft) */
html[data-theme='neon'] :is(.dr-head, .dr-choice-bar) { border: 1px solid var(--line-2); border-image: none; border-radius: var(--n-radius); background: linear-gradient(180deg, var(--glass-hi), var(--glass)); }
html[data-theme='neon'] .dr-team { border-radius: var(--n-radius); }
html[data-theme='neon'] .dr-team.p0 { box-shadow: inset 0 2px 0 var(--blue), 0 0 24px -12px var(--blue), var(--v3-shadow); }
html[data-theme='neon'] .dr-team.p1 { box-shadow: inset 0 2px 0 var(--team-red), 0 0 24px -12px var(--team-red), var(--v3-shadow); }
html[data-theme='neon'] .dr-team-head b { font-size: 14px; letter-spacing: 0.06em; }
html[data-theme='neon'] .dr-slot { border: 1px dashed var(--line-2); border-radius: var(--n-radius); background: rgba(0, 0, 0, 0.3); }
html[data-theme='neon'] .dr-slot.filled { border: 1px solid var(--line-2); background: radial-gradient(circle at 50% 36%, #2f2739, #120f17 74%); }
html[data-theme='neon'] .champ-tile { border: 1px solid var(--line-1); border-image: none; border-radius: var(--n-radius); background: radial-gradient(ellipse at 50% 30%, #2a2334 0, #17131d 70%); box-shadow: 0 10px 20px -14px #000; }
html[data-theme='neon'] .champ-tile:not(.disabled):hover { border-color: var(--line-3); box-shadow: 0 0 0 1px rgba(245, 200, 98, 0.25), 0 14px 26px -14px #000; }
html[data-theme='neon'] .champ-tile.chosen { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(245, 200, 98, 0.45); }
html[data-theme='neon'] .ct-tier { border: 1px solid var(--line-2); border-radius: 4px; background: rgba(10, 8, 13, 0.85); box-shadow: none; }
html[data-theme='neon'] :is(.pool, .dr-pool) { border-radius: var(--n-radius); background: rgba(6, 5, 9, 0.45); }

/* ================================================================== the fight's HUD */
html[data-theme='neon'] .battle:not(.narrow) .roster { border: 1px solid var(--line-2); border-top: 2px solid var(--line-2); border-radius: var(--n-radius); background: linear-gradient(180deg, var(--glass-hi), var(--glass)); box-shadow: var(--v3-shadow); }
html[data-theme='neon'] .battle:not(.narrow) .roster.p0 { border-top-color: var(--blue); }
html[data-theme='neon'] .battle:not(.narrow) .roster.p1 { border-top-color: var(--team-red); }
html[data-theme='neon'] .roster-hero { border: 1px solid var(--line-1); border-radius: 6px; background: rgba(0, 0, 0, 0.32); box-shadow: none; }
html[data-theme='neon'] .roster-hero:hover { border-color: var(--line-3); box-shadow: none; }
html[data-theme='neon'] .action-bar:not(:empty) { border: 1px solid var(--line-1); border-image: none; border-radius: 0; background: rgba(13, 10, 18, 0.95); box-shadow: none; }
html[data-theme='neon'] .battle .turn-banner { border: 1px solid var(--line-1); border-radius: 0; background: rgba(13, 10, 18, 0.95); box-shadow: none; }
html[data-theme='neon'] .battle .tl-chip.now { outline-color: var(--gold); }
html[data-theme='neon'] .chronicle { border-image: none; }

/* ================================================================== Inventory, shop, profile, patrol, gauntlet (ui3.css) */
html[data-theme='neon'] :is(.inv-pic, .inv-slot, .inv-slot-ico, .it-tile, .it-pic, .it-eq, .it-champ, .boost, .boost-pic, .doll-bonus, .inv-doll.doll2, .emblem-side, .craft-funds, .it-compare, .inv-gearfx, .inv-stats > span) {
  border: 1px solid var(--line-1); border-radius: var(--n-radius);
}
html[data-theme='neon'] :is(.inv-slot, .it-tile, .it-champ, .boost) { background: radial-gradient(ellipse at 50% 25%, #2a2334 0, #15121b 75%); }
html[data-theme='neon'] :is(.inv-pic, .inv-slot-ico, .it-pic, .boost-pic) { background: radial-gradient(circle at 50% 40%, #2f2739, #0d0b12 75%); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5); }
html[data-theme='neon'] :is(.inv-slot, .it-tile, .it-champ):hover { border-color: var(--line-3); box-shadow: 0 0 0 1px rgba(245, 200, 98, 0.2); }
html[data-theme='neon'] .it-eq { border-color: var(--gold); border-radius: 50%; }
html[data-theme='neon'] :is(.inv-name, .it-head) { font-size: 20px; color: var(--gold); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); }
html[data-theme='neon'] .boost-sec { font-family: var(--font-text); font-weight: 700; font-size: 12px; letter-spacing: 0.24em; }
html[data-theme='neon'] .boost-tag { border-radius: 4px; }
html[data-theme='neon'] :is(.patrol-route, .gx-card) { border-radius: var(--n-radius); }
html[data-theme='neon'] .patrol-route.selected { background: linear-gradient(180deg, rgba(245, 200, 98, 0.16), rgba(20, 16, 26, 0.85)); }
html[data-theme='neon'] .screen-profile .playercard { border-radius: 12px; overflow: hidden; }
html[data-theme='neon'] .screen-results .title { letter-spacing: 0.06em; }
html[data-theme='neon'] .theme-opt { border-radius: var(--n-radius); }

/* ================================================================== the hub's Home and Play (hub.css) */
html[data-theme='neon'] .hub-title {
  font-family: var(--font-title); font-size: clamp(24px, 2.6vw, 34px); letter-spacing: 0.03em; line-height: 1.05;
  background: linear-gradient(180deg, #fff6dc 0%, var(--gold) 55%, var(--gold-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.5));
}
html[data-theme='neon'] .hub-lobby > .row .hub-title { padding: 0; border: 0; background: linear-gradient(180deg, #fff6dc 0%, var(--gold) 55%, var(--gold-2) 100%); -webkit-background-clip: text; background-clip: text; }
html[data-theme='neon'] :is(.hub-kicker, .hub-kind, .hub-card-head) { font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }
html[data-theme='neon'] .hub-kind { display: flex; align-items: center; gap: 10px; align-self: stretch; margin: 14px 0 4px; padding: 0; background: none; border: 0; color: var(--text-2); }
html[data-theme='neon'] .hub-kind::before { content: ''; width: 16px; height: 2px; flex: none; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
html[data-theme='neon'] .hub-kind::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
html[data-theme='neon'] .hub-kicker { display: flex; align-items: center; gap: 10px; }
html[data-theme='neon'] .hub-kicker::before { content: ''; width: 16px; height: 2px; flex: none; background: currentColor; box-shadow: 0 0 8px currentColor; }
html[data-theme='neon'] .hub-hero { background: radial-gradient(ellipse at 78% 50%, rgba(245, 200, 98, 0.14), transparent 60%), linear-gradient(135deg, var(--glass-hi), var(--glass)); }
html[data-theme='neon'] .hub-faces canvas { border: 1px solid var(--line-2); border-radius: 12px; background: radial-gradient(circle at 50% 38%, #2f2739, #120f17 75%); box-shadow: none; }
html[data-theme='neon'] .hub-mode { border-left: 1px solid var(--line-2); box-shadow: inset 3px 0 0 var(--gold-2), 0 24px 50px -28px rgba(0, 0, 0, 0.9); }
html[data-theme='neon'] .hub-mode.adventure { box-shadow: inset 3px 0 0 var(--team-red), 0 24px 50px -28px rgba(0, 0, 0, 0.9); }
html[data-theme='neon'] .hub-mode.daily { box-shadow: inset 3px 0 0 var(--gold), 0 24px 50px -28px rgba(0, 0, 0, 0.9); }
html[data-theme='neon'] .hub-mode.learn { box-shadow: inset 3px 0 0 var(--teal), 0 24px 50px -28px rgba(0, 0, 0, 0.9); }
html[data-theme='neon'] .hub-mode:hover, html[data-theme='neon'] .hub-mode:focus-visible { border-color: var(--line-3); box-shadow: inset 3px 0 0 var(--gold), 0 0 0 1px rgba(245, 200, 98, 0.25), 0 30px 60px -30px #000; }
html[data-theme='neon'] .hub-mode-ico { border: 1px solid var(--line-2); border-radius: 12px; background: radial-gradient(circle at 50% 40%, #2f2739, #120f17 75%); box-shadow: none; }
html[data-theme='neon'] .hub-mode-text b { color: var(--text); letter-spacing: 0.1em; }
html[data-theme='neon'] .hub-big { color: var(--gold); }

/* ================================================================== Snake (screens/snake.js: .snake-neon, its own art) */
html[data-theme='neon'] .screen-snake.snake-neon { background: var(--ink-0) var(--sk-bd) center / cover no-repeat; }
html[data-theme='neon'] .screen-snake.snake-neon::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(110% 90% at 50% 50%, transparent 40%, rgba(6, 5, 9, 0.7) 100%); }
html[data-theme='neon'] .snake-neon > * { position: relative; }
html[data-theme='neon'] .snake-neon .sk-title { display: block; width: min(420px, 100%); height: auto; margin: -6px auto 2px; image-rendering: pixelated; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6)); }
html[data-theme='neon'] .snake-neon .sk-over-art { display: block; width: min(200px, 50vw); height: auto; margin: 0 auto; image-rendering: pixelated; }
html[data-theme='neon'] .snake-neon .snake-hud {
  max-width: 820px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 12px;
  background: linear-gradient(180deg, var(--glass-hi), var(--glass)); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9);
}
html[data-theme='neon'] .snake-neon .snake-hud b.gold { font: 400 24px/1 var(--font-num); }
html[data-theme='neon'] .snake-neon .snake-wave { color: var(--ember); letter-spacing: 0.06em; }
html[data-theme='neon'] .snake-neon .snake-canvas { border: 0; background: none; box-shadow: 0 40px 80px -30px #000, 0 0 60px -20px rgba(255, 140, 60, 0.25); }
/* the stage: the field, a brazier at each corner of its frame */
html[data-theme='neon'] .sk-stage { position: relative; line-height: 0; }
html[data-theme='neon'] .sk-brazier {
  position: absolute; z-index: 2; width: var(--cell, 48px); aspect-ratio: var(--bar, 48 / 72); pointer-events: none;
  background: var(--bz) 0 0 / calc(var(--bn, 6) * 100%) 100% no-repeat; image-rendering: pixelated;
  animation: n-steps var(--bd, 720ms) steps(calc(var(--bn, 6) - 1), jump-none) infinite;
  filter: drop-shadow(0 0 10px rgba(255, 140, 50, 0.45));
}
html[data-theme='neon'] .sk-brazier { width: calc(var(--cell, 48px) * 1.3); }
html[data-theme='neon'] .sk-brazier.tl { left: calc(var(--cell, 48px) * -1.45); top: calc(var(--cell, 48px) * 0.2); }
html[data-theme='neon'] .sk-brazier.tr { right: calc(var(--cell, 48px) * -1.45); top: calc(var(--cell, 48px) * 0.2); }
html[data-theme='neon'] .sk-brazier.bl { left: calc(var(--cell, 48px) * -1.45); bottom: calc(var(--cell, 48px) * 0.1); }
html[data-theme='neon'] .sk-brazier.br { right: calc(var(--cell, 48px) * -1.45); bottom: calc(var(--cell, 48px) * 0.1); }
@keyframes n-steps { from { background-position-x: 0; } to { background-position-x: 100%; } }
/* a level up: the perks as cards */
html[data-theme='neon'] .snake-neon .snake-perks { width: min(700px, calc(100vw - 24px)); padding: 18px; border-color: rgba(245, 200, 98, 0.45); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 40px -10px rgba(245, 200, 98, 0.35); }
html[data-theme='neon'] .snake-neon .snake-perk-list { gap: 12px; }
html[data-theme='neon'] .snake-neon .snake-perk {
  --cut: 0px; aspect-ratio: 240 / 340; min-height: 0; padding: 14% 10% 10%; justify-content: flex-start; gap: 6px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6));
  text-transform: none; letter-spacing: 0.02em; background: var(--sk-card) center / 100% 100% no-repeat; image-rendering: pixelated;
}
html[data-theme='neon'] .snake-neon .snake-perk::before { display: none; }
html[data-theme='neon'] .snake-neon .snake-perk:hover, html[data-theme='neon'] .snake-neon .snake-perk:focus-visible { background-image: var(--sk-card-hover); transform: translateY(-4px); }
html[data-theme='neon'] .snake-neon .snake-perk b { font-family: var(--font-title); font-size: 17px; color: var(--gold); }
html[data-theme='neon'] .snake-neon .sk-perk-ico { width: 46%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6)); }
html[data-theme='neon'] .snake-neon .snake-perk .kbd { position: absolute; top: 6%; left: 8%; }
@media (max-width: 700px) {
  html[data-theme='neon'] .snake-neon .snake-perk-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-theme='neon'] .snake-neon .snake-perk { padding: 12% 6% 6%; }
  html[data-theme='neon'] .snake-neon .snake-perk .xs { font-size: 9px; line-height: 1.2; }
  html[data-theme='neon'] .snake-neon .snake-perk b { font-size: 12px; }
}
/* (phones: the field takes the width, no room for the braziers) */
@media (max-width: 700px) { html[data-theme='neon'] .sk-brazier { display: none; } }
/* phones: the field across the width at the top, the score, health and pause under it, the arrow pad at the
   bottom (a finger dragged anywhere steers too: screens/snake.js), so the screen doesn't scroll or zoom under it */
@media (max-width: 700px) {
  html[data-theme='neon'] .screen-snake.snake-neon:has(.snake-wrap) { touch-action: none; }
  html[data-theme='neon'] .snake-neon .snake-body:has(.snake-wrap) { display: flex; flex-direction: column; padding: 4px 2px calc(10px + var(--safe-b)); overflow: hidden; }
  html[data-theme='neon'] .snake-neon .snake-wrap { flex: 1; min-height: 0; width: 100%; gap: 10px; }
  html[data-theme='neon'] .snake-neon .snake-wrap > .sk-stage { order: 1; }
  html[data-theme='neon'] .snake-neon .snake-hud { order: 2; width: calc(100% - 12px); }
  html[data-theme='neon'] .snake-neon .snake-hud .btn { min-width: 48px; min-height: 44px; }
  html[data-theme='neon'] .snake-neon .snake-pad { order: 3; display: grid; margin-top: auto; grid-template-columns: repeat(3, 76px); grid-template-rows: repeat(2, 60px); gap: 8px; }
  html[data-theme='neon'] .snake-neon .snake-pad .btn { --cut: 10px; min-height: 0; font-size: 22px; letter-spacing: 0; }
}