/* NEON SKIN — "After Hours". Active when <html data-skin="neon">.
   Neon tubes on a dark brick wall. Two tube colors, --n1 and --n2, drive everything:
   - data-neon="cycle": both hues drift slowly through the whole rainbow (--nh animates 0→360)
   - data-neon="duo": the player's two picked colors, set inline on <html> by applyNeon() in app.js
   Art in /skins/neon/ is white outlines used as CSS masks, so it recolors with the tubes. */
@property --nh { syntax: "<number>"; inherits: true; initial-value: 0; }
[data-skin="neon"] {
  --n1: #39ff14; --n2: #b026ff;
  --bg: #07060b; --bg2: #0c0a12; --panel: #0e0c16e6; --panel2: #15121f; --line: #2a2438; --line2: #3b3350;
  --text: #f6f3ff; --muted: #a59fbf; --dim: #6b6585;
  --red: var(--n2); --red2: var(--n2); --deep: #1a0b26; --amber: var(--n1); --bone: #e8e4ff; --green: #5dffb0;
  --common: #c9c3e6; --uncommon: var(--n1); --rare: var(--n2);
  --display: "Tilt Neon", "Trebuchet MS", system-ui, sans-serif; --body: "Outfit", system-ui, -apple-system, Segoe UI, sans-serif; --type: "Tilt Neon", "Courier New", monospace;
  --crest-ring: color-mix(in srgb, var(--n2) 28%, #0b0912); --crest-bulb: var(--n1); --crest-field: #07060b; --crest-text: #ffffff;
  /* a lit tube: hot white core, colored glow */
  --tube1: 0 0 2px #fff8, 0 0 8px var(--n1), 0 0 22px color-mix(in srgb, var(--n1) 60%, transparent);
  --tube2: 0 0 2px #fff8, 0 0 8px var(--n2), 0 0 22px color-mix(in srgb, var(--n2) 60%, transparent);
  --glow1: 0 0 0 1px color-mix(in srgb, var(--n1) 55%, transparent), 0 0 14px -2px var(--n1), inset 0 0 12px -4px var(--n1);
  --glow2: 0 0 0 1px color-mix(in srgb, var(--n2) 55%, transparent), 0 0 14px -2px var(--n2), inset 0 0 12px -4px var(--n2);
}
[data-skin="neon"][data-neon="cycle"] {
  --n1: hsl(var(--nh) 100% 58%); --n2: hsl(calc(var(--nh) + 150) 100% 62%);
  animation: neonHue 60s linear infinite;
}
@keyframes neonHue { to { --nh: 360; } }
@media (prefers-reduced-motion: reduce) { [data-skin="neon"][data-neon="cycle"] { animation: none; --nh: 290; } }

/* wall: dark brick with a colored wash from each tube */
[data-skin="neon"] body {
  background:
    radial-gradient(70% 45% at 15% 0%, color-mix(in srgb, var(--n1) 16%, transparent), transparent 70%),
    radial-gradient(70% 45% at 85% 100%, color-mix(in srgb, var(--n2) 16%, transparent), transparent 70%),
    repeating-linear-gradient(0deg, #ffffff05 0 2px, transparent 2px 34px),
    repeating-linear-gradient(90deg, #ffffff04 0 2px, transparent 2px 68px),
    var(--bg);
  background-attachment: fixed;
}
[data-skin="neon"] .grain { opacity: .05; }
[data-skin="neon"] #decor .haze { position: absolute; inset: auto 0 0; height: 38vh;
  background: linear-gradient(transparent, color-mix(in srgb, var(--n2) 10%, transparent)),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--n2) 22%, transparent) 0 1px, transparent 1px 56px);
  -webkit-mask: linear-gradient(transparent, #000 70%); mask: linear-gradient(transparent, #000 70%);
  transform: perspective(300px) rotateX(55deg); transform-origin: bottom; opacity: .7; }
[data-skin="neon"] #decor .buzz { position: absolute; width: 260px; height: 260px; border-radius: 50%; filter: blur(60px); opacity: .18; animation: drift2 18s ease-in-out infinite alternate; }
[data-skin="neon"] #decor .buzz.b1 { background: var(--n1); left: -80px; top: 20%; }
[data-skin="neon"] #decor .buzz.b2 { background: var(--n2); right: -80px; top: 55%; animation-delay: -9s; }
@keyframes drift2 { to { translate: 40px -60px; } }

/* type */
[data-skin="neon"] .h, [data-skin="neon"] .tcard .name, [data-skin="neon"] .method .t { font-weight: 400; letter-spacing: .02em; }
[data-skin="neon"] .h { color: #fff; text-shadow: var(--tube1); }
[data-skin="neon"] .kicker { color: var(--n2); text-shadow: 0 0 8px var(--n2); }
[data-skin="neon"] label.lbl { color: var(--muted); }

/* controls */
[data-skin="neon"] .btn { background: #120f1c; border: 1.5px solid var(--line2); border-radius: 12px; }
[data-skin="neon"] .btn.primary { background: color-mix(in srgb, var(--n2) 14%, #0b0912); border: 2px solid var(--n2); color: #fff; box-shadow: var(--glow2); text-shadow: 0 0 6px var(--n2); }
[data-skin="neon"] .btn.amber { background: color-mix(in srgb, var(--n1) 14%, #0b0912); border: 2px solid var(--n1); color: #fff; box-shadow: var(--glow1); text-shadow: 0 0 6px var(--n1); }
[data-skin="neon"] .input, [data-skin="neon"] select.input, [data-skin="neon"] .segb, [data-skin="neon"] .toggle { background: #0a0810; border-color: var(--line2); }
[data-skin="neon"] .input:focus { border-color: var(--n1); box-shadow: 0 0 12px -3px var(--n1); }
[data-skin="neon"] .segb.on { background: transparent; color: #fff; border: 2px solid var(--n1); box-shadow: var(--glow1); }
[data-skin="neon"] .switch.on { background: var(--n1); box-shadow: 0 0 10px var(--n1); }

/* home: the marquee is a neon sign hung on the wall */
[data-skin="neon"] .marquee { background: #0b0912cc; border: 2px solid var(--n2); border-radius: 22px; box-shadow: var(--glow2), 0 0 70px -20px var(--n2); overflow: visible; isolation: isolate; }
[data-skin="neon"] .marquee::before { display: none; }
[data-skin="neon"] .edition { color: #fff; border: 1.5px solid var(--n1); border-radius: 999px; padding: 4px 14px 3px; font-size: 13px; letter-spacing: .32em; text-shadow: var(--tube1); box-shadow: var(--glow1); animation: neonFlicker 7s infinite; }
@keyframes neonFlicker { 0%, 40%, 44%, 46%, 100% { opacity: 1; } 42%, 45% { opacity: .3; } }
[data-skin="neon"] .tagline { color: var(--bone); }
[data-skin="neon"] .card-panel { background: #0e0c16d9; border: 1.5px solid var(--line2); backdrop-filter: blur(6px); }
[data-skin="neon"] .crest { filter: drop-shadow(0 0 10px var(--n2)) drop-shadow(0 0 3px var(--n1)); }

/* recolorable art: the outer <i> carries the glow, the inner <b> is the SVG mask */
.neon-art { display: block; filter: drop-shadow(0 0 2px #fff9) drop-shadow(0 0 6px var(--c, var(--n1))) drop-shadow(0 0 14px var(--c, var(--n1))); }
.neon-art b { display: block; width: 100%; height: 100%; background: var(--c, var(--n1)); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
[data-skin="neon"] .sk-n-popcorn { --c: var(--n1); left: -26px; bottom: -22px; width: 74px; height: 86px; rotate: -10deg; animation: neonFlicker 9s -3s infinite; }
[data-skin="neon"] .sk-n-glasses { --c: var(--n2); right: -24px; top: -26px; width: 96px; height: 48px; rotate: 12deg; }
[data-skin="neon"] .sk-n-star1 { --c: var(--n1); left: 16px; top: 16px; width: 26px; height: 26px; animation: neonPulse 2.4s ease-in-out infinite; }
[data-skin="neon"] .sk-n-star2 { --c: var(--n2); right: 18px; bottom: 54px; width: 18px; height: 18px; animation: neonPulse 2.4s -1.2s ease-in-out infinite; }
[data-skin="neon"] .sk-n-arrow { --c: var(--n1); position: relative; display: block; width: 84px; height: 36px; margin: 6px auto 30px; rotate: 90deg; animation: neonChase 1.6s steps(1) infinite; }
[data-skin="neon"] .marquee + .sk-n-arrow { margin-top: -2px; }
[data-skin="neon"] .sk-n-lobby { --c: var(--n2); right: 12px; top: 12px; width: 28px; height: 28px; opacity: .85; }
[data-skin="neon"] .sk-n-results { --c: var(--n1); right: 14px; top: 14px; width: 34px; height: 34px; animation: neonPulse 2.4s ease-in-out infinite; }
@keyframes neonPulse { 50% { opacity: .45; } }
@keyframes neonChase { 50% { opacity: .55; } }

/* shell */
[data-skin="neon"] .topbar { background: #07060be6; border-bottom: 1.5px solid color-mix(in srgb, var(--n2) 60%, transparent); box-shadow: 0 2px 16px -8px var(--n2); }
[data-skin="neon"] .mini-logo { color: #fff; text-shadow: var(--tube2); }
[data-skin="neon"] .mini-logo span { color: var(--n1); }
[data-skin="neon"] .code-chip { background: transparent; border: 1.5px solid var(--n1); color: #fff; text-shadow: var(--tube1); box-shadow: var(--glow1); }
[data-skin="neon"] .phase-pill, [data-skin="neon"] .ms-clock { color: var(--n1); text-shadow: 0 0 8px var(--n1); }
[data-skin="neon"] .movie-strip { background: #0a0810; color: var(--bone); }
[data-skin="neon"] .tabbar { background: #07060bf2; border-top: 1.5px solid color-mix(in srgb, var(--n2) 60%, transparent); }
[data-skin="neon"] .tab.on { background: #15121f; color: #fff; box-shadow: inset 0 -2px 0 var(--n1), 0 6px 14px -8px var(--n1); }
[data-skin="neon"] .panel, [data-skin="neon"] .chat { background: #0e0c16d9; border: 1.5px solid var(--line2); }
[data-skin="neon"] .banner { background: linear-gradient(90deg, color-mix(in srgb, var(--n2) 18%, #0e0c16), #0e0c16); border: 1.5px solid var(--n2); box-shadow: 0 0 14px -6px var(--n2); }
[data-skin="neon"] .banner.amber { background: linear-gradient(90deg, color-mix(in srgb, var(--n1) 16%, #0e0c16), #0e0c16); border-color: var(--n1); box-shadow: 0 0 14px -6px var(--n1); }
[data-skin="neon"] .banner.green { background: linear-gradient(90deg, #0b2a1e, #0e0c16); border-color: var(--green); }
[data-skin="neon"] .method.mine { background: color-mix(in srgb, var(--n1) 10%, var(--panel2)); border-color: var(--n1); box-shadow: var(--glow1); }

/* cards: each one a little lit sign, its rarity color on the tube */
[data-skin="neon"] .tcard { background: linear-gradient(165deg, #16121f, #0b0912); border: 1.5px solid color-mix(in srgb, var(--rc) 70%, transparent); box-shadow: 0 0 12px -6px var(--rc), inset 0 0 14px -10px var(--rc); }
[data-skin="neon"] .tcard.rare { border-width: 2px; box-shadow: 0 0 18px -4px var(--rc), inset 0 0 16px -8px var(--rc); }
[data-skin="neon"] .tcard .top { text-shadow: 0 0 6px var(--rc); }
[data-skin="neon"] .tcard::after { border-top: 1.5px dashed color-mix(in srgb, var(--rc) 30%, transparent); }
[data-skin="neon"] .tcard .mod { color: #fff; background: color-mix(in srgb, var(--n1) 10%, transparent); border-left-color: var(--n1); }
[data-skin="neon"] .tcard.hit { background: linear-gradient(165deg, #0f2a20, #08140f); border-color: var(--green); box-shadow: 0 0 18px -4px var(--green); }
[data-skin="neon"] .stamp { color: #fff; border: 2px solid var(--green); background: #04120ccc; text-shadow: 0 0 6px var(--green); box-shadow: 0 0 12px var(--green), inset 0 0 8px var(--green); border-radius: 999px; padding: 0 12px; }
[data-skin="neon"] .tcard .call { background: color-mix(in srgb, var(--n2) 16%, #0b0912); border: 2px solid var(--n2); color: #fff; text-shadow: 0 0 6px var(--n2); box-shadow: 0 0 12px -3px var(--n2); }
[data-skin="neon"] .tcard .call.name { background: color-mix(in srgb, var(--n1) 16%, #0b0912); border-color: var(--n1); color: #fff; box-shadow: 0 0 12px -3px var(--n1); }
[data-skin="neon"] .tag.mod { background: color-mix(in srgb, var(--n1) 18%, transparent); color: #fff; }
[data-skin="neon"] .tag.rev { background: color-mix(in srgb, var(--n2) 18%, transparent); color: #fff; }
[data-skin="neon"] .pill.host { background: color-mix(in srgb, var(--n1) 18%, transparent); color: var(--n1); }

/* live votes */
[data-skin="neon"] .claim { background: #0b0912f5; border: 2px solid var(--n1); box-shadow: 0 16px 40px -10px #000c, var(--glow1); }
[data-skin="neon"] .claim .bar i { background: var(--n1); box-shadow: 0 0 8px var(--n1); }
[data-skin="neon"] .vbtn.no { color: var(--n2); border-color: var(--n2); background: color-mix(in srgb, var(--n2) 10%, transparent); }
[data-skin="neon"] .vbtn.on.no { background: var(--n2); color: #fff; }
[data-skin="neon"] .msg a { color: var(--n1); }
[data-skin="neon"] .msg.revenge { color: #fff; background: color-mix(in srgb, var(--n2) 10%, transparent); border-left-color: var(--n2); }
[data-skin="neon"] .ms-bar i { background: linear-gradient(90deg, var(--n1), var(--n2)); box-shadow: 0 0 8px var(--n1); }

/* FX: the hit stamp switches on like a sign, with a stutter */
[data-skin="neon"] .fx-scrim { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--n2) 30%, #07060b), #000e 70%); }
[data-skin="neon"] .fx-flash { background: var(--n1); }
[data-skin="neon"] .fx-stampbig { color: #fff; background: transparent; border: 4px solid var(--n1); border-radius: 999px; transform: rotate(-6deg); text-shadow: var(--tube1);
  box-shadow: 0 0 20px var(--n1), inset 0 0 20px var(--n1); padding: 6px 34px 2px; line-height: 1.05; animation-name: neonOn; animation-duration: .9s; }
@keyframes neonOn { 0% { opacity: 0; transform: rotate(-6deg) scale(1.1); } 20% { opacity: 1; } 30% { opacity: .1; } 45% { opacity: 1; } 55% { opacity: .3; } 100% { opacity: 1; transform: rotate(-6deg) scale(1); } }
[data-skin="neon"] .fx-pts { color: #fff; text-shadow: var(--tube2); }
[data-skin="neon"] .fx-title { color: #fff; text-shadow: var(--tube1), 0 0 50px var(--n2); animation-name: neonOn; }
[data-skin="neon"] .fx-mine { background: transparent; border: 2px solid var(--n2); box-shadow: var(--glow2); }
[data-skin="neon"] .particle { width: 4px; height: 18px; border-radius: 2px; box-shadow: 0 0 8px currentColor, 0 0 2px #fff; }
[data-skin="neon"] .leader { background: #0b0912; box-shadow: 0 0 0 4px var(--n2), 0 0 40px var(--n2), inset 0 0 30px color-mix(in srgb, var(--n2) 40%, transparent); }
[data-skin="neon"] .leader::before, [data-skin="neon"] .leader::after { background: color-mix(in srgb, var(--n1) 60%, transparent); }
[data-skin="neon"] .leader .ring { border-color: color-mix(in srgb, var(--n1) 60%, transparent); }
[data-skin="neon"] .leader .num { color: #fff; text-shadow: var(--tube1); }

/* neon color picker (shown under the skin picker while Neon is on) */
.neon-pick { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 12px; }
.neon-pick .seg { justify-content: center; }
.neon-pick .segb { display: inline-flex; align-items: center; gap: 6px; }
.neon-pick .sw { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
.neon-pick .rainbow { width: 26px; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #ff2a4d, #ffe600, #39ff14, #00e5ff, #2a7bff, #b026ff, #ff2bd6); }
.neon-pick .custom input[type="color"] { width: 28px; height: 24px; padding: 0; border: 1px solid var(--line2); border-radius: 6px; background: none; cursor: pointer; }
.neon-pick .custom input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.neon-pick .custom input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }