/* Cuezo — the sticker look (2026-10-31).
 *
 * The characters were redrawn as flat vector stickers (thick dark outline, white sticker border,
 * flat lime + violet blocks), so the UI around them follows: no gradient text, no soft glows —
 * solid colours, a dark "ink" outline and a hard offset drop shadow, like a sticker on the table.
 *
 * Everything lives in this one file, loaded after style.css. To go back to the glossy look,
 * drop its <link> from play.html (the git tag ai-art-version has the AI-character art too).
 * Rules start with "body" so they also beat tv.js's inline TV_CSS, which comes later in the page.
 */
:root { --ink: #1A1033; --paper: #F2F2F2; }

/* ── buttons: flat lime, ink outline, a hard step underneath ── */
body .btn { background: var(--lime); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); }
body .btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
body .btn.violet { background: var(--violet); color: #fff; box-shadow: 0 5px 0 var(--ink); }
body .btn.ghost { background: transparent; border: 2px solid var(--border); box-shadow: none; }
body .btn:disabled { box-shadow: none; }

/* ── the hero card: one flat wash, ink edge, hard shadow (was a breathing glow) ── */
body .card.wincard { background: #22183F; border: 3px solid var(--lime); box-shadow: 6px 7px 0 var(--ink); animation: none; }

/* ── big stamps ("Champion", "Maja IS"): sticker lettering, not chrome ── */
body .tv-stamp, body .tsy-stamp {
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--lime);
  -webkit-text-stroke: .1em var(--ink); paint-order: stroke fill; filter: none; text-shadow: .05em .07em 0 var(--ink);
}
body .tv-banner { font-family: inherit; color: #FFD34D; -webkit-text-stroke: .12em var(--ink); paint-order: stroke fill; text-shadow: .05em .07em 0 var(--ink); }

/* ── song cards: ink outline + white sticker edge + hard drop ── */
body .sdcard { border: 2px solid var(--ink); box-shadow: 0 0 0 3px var(--paper), 4px 5px 0 3px rgba(0,0,0,.35); }
body .tv-stagecard .sdcard { box-shadow: 0 0 0 .3vw var(--paper), .5vw .6vw 0 .3vw rgba(0,0,0,.4); }
/* a winning / playing card: the colour ring stays, the glow goes */
body .tv-cards .win { box-shadow: .5vw .6vw 0 rgba(0,0,0,.4); }
body .bt-side.playing .sdcard, body .bt-tvside.playing .sdcard { box-shadow: 0 0 0 3px var(--paper), 5px 6px 0 3px rgba(0,0,0,.35); }
body .bt-side.won .sdcard, body .bt-tvside.won .sdcard { box-shadow: 0 0 0 3px var(--paper), 5px 6px 0 3px rgba(0,0,0,.35); }

/* ── avatars round the table and in lists: a white sticker ring inside an ink edge ── */
body .tv-seat .av { border-color: var(--paper); box-shadow: 0 0 0 .25vw var(--ink), .3vw .4vw 0 .25vw rgba(0,0,0,.35); }
body .sdseat .av { border-color: var(--paper); box-shadow: 0 0 0 2px var(--ink); }
body .avatar { border: 2px solid var(--paper); box-shadow: 0 0 0 2px var(--ink); }

/* ── the arena: flat cel-shaded light cones (hard edges, no blur) and a flat felt with an ink rim ── */
body .tv-beam { filter: none; opacity: .38;
  background: conic-gradient(from 160deg at 50% 0, transparent 0deg 15deg, var(--c) 15deg 25deg, transparent 25deg 360deg); }
body .tv-stage.live .tv-beam { opacity: .55; }
body .tv-felt { background: #21173F; border: .55vw solid #3A2B68; box-shadow: 0 0 0 .35vw var(--ink), .8vw 1vw 0 .35vw rgba(0,0,0,.4); }

/* ── pills and chips get the ink edge too ── */
body .tag { border: 2px solid var(--ink); }
body .sddefense { border: 2px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); }
body .tv-pitchov .sddefense.tv { box-shadow: .3vw .4vw 0 var(--ink); }

/* ── Battle's VS: sticker lettering too ── */
body .bt-tvvstag, body .bt-vstag { text-shadow: .05em .07em 0 var(--ink); -webkit-text-stroke: .06em var(--ink); paint-order: stroke fill; filter: none; }

/* ── one palette: lime (action) · violet (brand + surfaces) · gold (winning) · coral (spy / danger) · ink + paper ── */
:root { --bg: #120D24; --card: #1C1536; --card2: #251C45; --border: rgba(255,255,255,.1); --gold: #FFD34D; --coral: #F87171; }
body { background: var(--bg); }   /* the night-violet of the TV arena, not black with glows */
body .poster-btn { background: var(--violet); color: #fff; border-color: var(--ink); }
body .tsy-st-who span { color: var(--lime); }
body .pitchcard.twist { border-color: rgba(255,211,77,.55); } body .pitchcard.twist .pitchlabel { color: var(--gold); }
body #hostBarBtn.armed { background: var(--gold); }
body .tv-beam.b2 { --c: rgba(167,139,250,.5); }   /* lights in brand colours only (was pink) */
body .tv-haze { background: radial-gradient(70% 55% at 50% 0%, rgba(124,58,237,.28), transparent 70%); }

/* ── type: a chunky rounded display face for anything that shouts; body text stays the system font ── */
@font-face { font-family: "Fredoka"; src: url("/fonts/fredoka.woff2") format("woff2"); font-weight: 300 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fredoka"; src: url("/fonts/fredoka-ext.woff2") format("woff2"); font-weight: 300 700; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* ── emoji: OpenMoji (flat, outlined — the sticker look) instead of each phone's glossy set.
      Emoji code points only, so arrows, ▸ and digits stay in the text font. CC BY-SA 4.0, openmoji.org ── */
@font-face { font-family: "CuezoEmoji"; src: url("/fonts/openmoji.woff2") format("woff2"); font-display: swap;
  unicode-range: U+00A9, U+00AE, U+203C, U+2049, U+2122, U+2139, U+2194-2199, U+21A9-21AA, U+231A-231B, U+2328, U+23CF, U+23E9-23F3, U+23F8-23FA, U+24C2,
    U+25AA-25AB, U+25B6, U+25C0, U+25FB-25FE, U+2600-27BF, U+2934-2935, U+2B05-2B07, U+2B1B-2B1C, U+2B50, U+2B55, U+3030, U+303D, U+3297, U+3299,
    U+FE0F, U+200D, U+20E3, U+1F000-1FAFF, U+E0020-E007F; }
body { font-family: "CuezoEmoji", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body h1, body h2, body h3, body .tv-h, body .tv-stamp, body .tsy-stamp, body .tv-banner, body .btn, body .tag, body .tv-tag,
body .tv-seat .nm, body .tv-chip, body .mode-grid b, body .tv-modetile span, body .tsy-q, body .tsy-tvq, body .pitchlabel,
body .bt-tvvstag, body .bt-vstag, body .bt-tvnote, body .combo, body #hostBarBtn {
  font-family: "Fredoka", "CuezoEmoji", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 700; letter-spacing: .01em;
}
body .tag, body .tv-tag { letter-spacing: .12em; }
/* buttons and inputs don't inherit the page font on their own — without this, reaction buttons kept the glossy emoji */
body button, body input, body textarea, body select { font-family: inherit; }

/* ── landing page (index.html): the same sticker rules for its own pieces ── */
body .btn-primary { background: var(--lime); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); font-family: "Fredoka", "CuezoEmoji", sans-serif; font-weight: 700; }
body .btn-primary:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
body .btn-ghost { background: var(--card); border: 2px solid var(--border); font-family: "Fredoka", "CuezoEmoji", sans-serif; font-weight: 700; }
body .brand-glow { background: radial-gradient(closest-side, rgba(124,58,237,.22), transparent 74%); }
body .tone-brand, body .tone-lime, body .tone-violet, body .tone-pink, body .tone-cyan { --tone: radial-gradient(64% 72% at 50% 28%, rgba(124,58,237,.18), transparent 74%); }
body .hero h1, body h2.section-title, body .join-band h2 { letter-spacing: -.5px; }
body .scene-card { border: 3px solid var(--violet); box-shadow: 6px 7px 0 var(--ink); }
body .join-band { background: #2A1C52; border: 3px solid var(--ink); box-shadow: 7px 8px 0 var(--ink); }
body .m-lock { background: var(--lime); } body .m-now { background: var(--violet); }

/* ── the last soft glows → ink rings and hard shadows ── */
body .tv-seat.win .av { box-shadow: 0 0 0 .25vw var(--ink), .3vw .4vw 0 .25vw rgba(0,0,0,.35); }
body .sdseat.mine .av { box-shadow: 0 0 0 2px var(--ink); }
body .charpick.on { box-shadow: 3px 4px 0 var(--ink); }
body .tv-dancer { box-shadow: 0 0 0 .3vw var(--ink); }
body .tv-screen { box-shadow: 0 0 0 .3vw var(--ink), .8vw 1vw 0 .3vw rgba(0,0,0,.4); }
body .tv-how-step.on { box-shadow: .3vw .4vw 0 var(--ink); }
body .tv-cards .win, body .bt-side.won .sdcard, body .bt-tvside.won .sdcard { outline-color: var(--gold); }
body .m-lock { box-shadow: 0 3px 0 var(--ink); }

/* ── buttons beside an input (Classic's Search): full height, no stray top margin from .btn ── */
body #ytSearchBtn { margin: 0; align-self: stretch; min-height: 48px; padding: 0 18px !important; }