:root {
        --ink: #0d120a;             /* greenwood ink */
        --ink-deep: #070a05;
        --parchment: #f2ecd8;       /* wanted-poster ivory */
        --parchment-dim: rgba(242,236,216,0.6);
        --chain: #d2ff03;           /* THE Robinhood Chain accent */
        --chain-bright: #e6ff5c;
        --chain-dim: rgba(210,255,3,0.38);
        --chain-faint: rgba(210,255,3,0.16);
        --chain-deep: #8fb400;
        --sheriff: #c22f20;         /* the Sheriff's crimson — danger only */
        --sheriff-bright: #ff5e4d;
        --sheriff-deep: #7c130d;
        --gold: #c9a24b;            /* stolen coin gold */
        --gold-bright: #f2cd72;
        --gold-dim: rgba(201,162,75,0.38);
        --lincoln: #3a6e2a;         /* Lincoln green cloth */
        --lincoln-bright: #6aa845;
        --panel: rgba(13, 18, 10, 0.86);
        --panel-solid: rgba(11, 15, 9, 0.97);
        --hairline: rgba(210,255,3,0.34);
        --ink-edge: rgba(0,0,0,0.65);
        --bg-glass: rgba(13,18,10,0.62);
        --hp: #ff4f56; --stam: #f5c518; --xp: #d2ff03;
      }
      * { box-sizing: border-box; margin: 0; padding: 0; }
      html, body { width: 100%; height: 100%; overflow: hidden; background: #101408;
        font-family: 'Outfit', system-ui, sans-serif; color: var(--parchment);
        user-select: none; -webkit-user-select: none; cursor: default; }
      canvas { display: block; outline: none; }
      #app { position: fixed; inset: 0; }
      ::selection { background: rgba(210,255,3,0.35); }

      /* ============== HUD CHROME ============== */
      .hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }

      /* ===== Bloodlust (Will Scarlet's Red Mist) screen effect — bold pulsing
         red vignette + on-screen text so the frenzy is impossible to miss. ===== */
      .bloodlust-tint { position: fixed; inset: 0; z-index: 6; pointer-events: none;
        opacity: 0; transition: opacity 0.3s ease;
        background: radial-gradient(ellipse at center,
          rgba(200,20,30,0) 28%, rgba(200,20,30,0.28) 62%, rgba(150,10,18,0.62) 100%); }
      .bloodlust-tint.show { opacity: 1; animation: bloodlustPulse 1.1s ease-in-out infinite; }
      @keyframes bloodlustPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
      /* The text block — pinned high-center, pulses while active */
      .bloodlust-text { position: absolute; top: 14%; left: 50%;
        transform: translateX(-50%); text-align: center; opacity: 0;
        text-shadow: 0 0 22px rgba(255,40,60,0.9), 0 3px 10px rgba(0,0,0,0.8); }
      .bloodlust-tint.show .bloodlust-text {
        animation: bloodlustTextIn 0.5s cubic-bezier(.2,1.4,.4,1) forwards,
                   bloodlustTextPulse 1.1s ease-in-out 0.5s infinite; }
      @keyframes bloodlustTextIn {
        0%   { opacity: 0; transform: translateX(-50%) scale(2.2); }
        60%  { opacity: 1; }
        100% { opacity: 1; transform: translateX(-50%) scale(1); } }
      @keyframes bloodlustTextPulse { 0%,100% { opacity: 0.85; } 50% { opacity: 1; } }
      .bloodlust-tag { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 22px; letter-spacing: 0.18em; color: #ffd0d0; margin-bottom: 2px; }
      .bloodlust-name { font-family: 'Pirata One', serif; font-size: 52px;
        letter-spacing: 0.1em; color: #ff3a4a;
        -webkit-text-stroke: 1px rgba(255,200,200,0.5); }
      .bloodlust-sub { font-family: 'Outfit', sans-serif; font-size: 14px;
        font-weight: 800; letter-spacing: 0.4em; color: #ffe0a0; margin-top: 4px; }

      /* ===== Large side-of-screen HORN OF SHERWOOD indicator (held-item prompt)
         — the player's boon, so it wears the chain green, not the Sheriff's red. */
      .horn-indicator { position: fixed; right: 28px; top: 50%;
        transform: translateY(-50%) translateX(40px); z-index: 8;
        display: none; flex-direction: column; align-items: center; gap: 8px;
        padding: 18px 20px; pointer-events: none;
        background: linear-gradient(180deg, rgba(22,32,8,0.85), rgba(9,14,4,0.72));
        border: 2px solid var(--chain);
        box-shadow: 0 0 28px rgba(210,255,3,0.45), inset 0 0 22px rgba(210,255,3,0.15),
                    0 8px 30px rgba(0,0,0,0.6);
        border-radius: 6px; opacity: 0;
        text-align: center; }
      .horn-indicator.show { display: flex; opacity: 1;
        animation: hornIn 0.4s ease, hornPulse 1.6s ease-in-out 0.4s infinite; }
      @keyframes hornIn { from { transform: translateY(-50%) translateX(40px); opacity: 0; }
        to { transform: translateY(-50%) translateX(0); opacity: 1; } }
      @keyframes hornPulse {
        0%, 100% { box-shadow: 0 0 28px rgba(210,255,3,0.45), inset 0 0 22px rgba(210,255,3,0.15), 0 8px 30px rgba(0,0,0,0.6); }
        50% { box-shadow: 0 0 46px rgba(210,255,3,0.8), inset 0 0 30px rgba(210,255,3,0.3), 0 8px 30px rgba(0,0,0,0.6); } }
      .horn-icon { width: 64px; height: 64px; border-radius: 50%;
        background: radial-gradient(circle at 38% 35%, #eaff7a 0%, #a8cc02 45%, #2a3a02 100%);
        box-shadow: 0 0 26px rgba(210,255,3,0.75), inset 0 0 14px rgba(0,0,0,0.55);
        display: flex; align-items: center; justify-content: center;
        animation: hornSpin 3s linear infinite; }
      .horn-core { width: 22px; height: 22px; border-radius: 50%;
        background: radial-gradient(circle, #ffffff 0%, #f2ffbe 60%, transparent 100%);
        box-shadow: 0 0 16px rgba(242,255,190,0.95); }
      @keyframes hornSpin { to { transform: rotate(360deg); } }
      .horn-label { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 12px; letter-spacing: 0.12em; color: var(--chain-bright);
        text-shadow: 0 0 10px rgba(210,255,3,0.6); }
      .horn-key { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13px;
        letter-spacing: 0.16em; color: var(--parchment); margin-top: 2px; }
      .horn-key span { display: inline-block; min-width: 22px; padding: 1px 7px;
        margin-left: 4px; border: 1.5px solid var(--chain); border-radius: 4px;
        background: rgba(210,255,3,0.16); font-weight: 800; color: #fff;
        box-shadow: 0 0 12px rgba(210,255,3,0.45); }
      .horn-sub { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
        color: var(--parchment-dim); }
      /* Greenwood panel: dark forest fill, chain hairline, ink edge, arrow fittings */
      .hud .top-left, .hud .top-center, .hud .top-right {
        background: linear-gradient(180deg, rgba(18,26,12,0.88) 0%, rgba(9,13,7,0.88) 100%);
        border: 1px solid var(--hairline);
        box-shadow: 0 0 0 1px var(--ink-edge), inset 0 1px 0 rgba(242,236,216,0.06),
                    0 10px 28px rgba(4,8,3,0.45);
        backdrop-filter: blur(8px) saturate(1.1);
        -webkit-backdrop-filter: blur(8px) saturate(1.1);
      }
      /* the Outlaw's Mark — chain-green corner fittings (arrowhead brackets) */
      .hud .top-left::before, .hud .top-center::before, .hud .top-right::before,
      .hud .top-left::after,  .hud .top-center::after,  .hud .top-right::after {
        content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none;
        border-style: solid; border-color: var(--chain);
      }
      .hud .top-left::before, .hud .top-center::before, .hud .top-right::before {
        top: -1px; left: -1px; border-width: 2px 0 0 2px; }
      .hud .top-left::after, .hud .top-center::after, .hud .top-right::after {
        bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

      .hud .top-left { position: absolute; top: 16px; left: 16px; width: 320px;
        padding: 13px 16px 14px; }
      .level-block { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
        border-bottom: 1px solid rgba(210,255,3,0.24); padding-bottom: 9px; }
      .level-text { font-family: 'Outfit', sans-serif; font-size: 10px;
        letter-spacing: 0.32em; text-transform: uppercase; color: var(--parchment-dim);
        font-weight: 700; }
      .level-num { font-family: 'Pirata One', serif; font-size: 32px;
        color: var(--chain); line-height: 1;
        text-shadow: 0 2px 0 rgba(0,0,0,0.55), 0 0 18px rgba(210,255,3,0.4); }
      .player-name { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 15px; color: var(--parchment); margin-left: auto;
        letter-spacing: 0.04em; text-shadow: 0 1px 0 rgba(0,0,0,0.6); opacity: 0.92; }

      .stat-row { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
      .stat-row:last-child { margin-bottom: 0; }
      .stat-label { font-family: 'Outfit', sans-serif; font-size: 10px;
        letter-spacing: 0.2em; text-transform: uppercase; color: var(--parchment-dim);
        width: 34px; text-align: right; font-weight: 700; }
      .bar { flex: 1; position: relative; height: 13px;
        background: linear-gradient(180deg, rgba(0,0,0,0.72), rgba(10,14,6,0.6));
        border: 1px solid rgba(210,255,3,0.4); overflow: hidden;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.7), 0 1px 0 rgba(242,236,216,0.05); }
      .bar-ghost { position: absolute; inset: 0; transform-origin: left center;
        background: rgba(230,255,92,0.8); }
      .bar-fill { position: absolute; inset: 0; transform-origin: left center;
        transition: transform 0.12s ease-out; }
      .bar-fill::after { content: ""; position: absolute; inset: 0 0 55% 0;
        background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0)); }
      .bar-fill.hp   { background: linear-gradient(180deg, #ff6b5e 0%, #e03a30 55%, #9e1f17 100%); }
      .bar-fill.stam { background: linear-gradient(180deg, #ffe66a 0%, #f5c518 55%, #b8900f 100%); }
      /* XP wears the chain — your share of the take, with a fletching stripe */
      .bar-fill.xp   { background:
          repeating-linear-gradient(-55deg, rgba(255,255,255,0.14) 0 2px, transparent 2px 7px),
          linear-gradient(180deg, #e6ff5c 0%, #d2ff03 55%, #8fb400 100%); }
      .stat-num { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--parchment);
        opacity: 0.92; min-width: 56px; text-align: right; font-weight: 600;
        text-shadow: 0 1px 0 rgba(0,0,0,0.6); }
      /* low-HP alarm — set by JS on the panel */
      .top-left.hp-low { animation: hpLowPulse 1.1s ease-in-out infinite; }
      .top-left.hp-low .bar-fill.hp { filter: saturate(1.25) brightness(1.1); }
      @keyframes hpLowPulse {
        0%, 100% { box-shadow: 0 0 0 1px var(--ink-edge), 0 10px 28px rgba(4,8,3,0.45); }
        50% { box-shadow: 0 0 0 1px rgba(194,47,32,0.9), 0 0 26px rgba(194,47,32,0.45),
                          0 10px 28px rgba(4,8,3,0.45); }
      }

      .hud .top-center { position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
        text-align: center; padding: 10px 30px 11px; min-width: 240px; }
      .wave-eyebrow { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 10px; letter-spacing: 0.28em; color: var(--chain);
        text-transform: uppercase; margin-bottom: 3px;
        text-shadow: 0 0 12px rgba(210,255,3,0.4); }
      .wave-number { font-family: 'Pirata One', serif;
        font-size: 30px; line-height: 1; color: var(--parchment);
        text-shadow: 0 2px 0 rgba(0,0,0,0.6), 0 0 22px rgba(210,255,3,0.18); }
      .wave-meta { margin-top: 6px; display: flex; justify-content: center; gap: 16px;
        font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
        color: var(--parchment-dim); font-variant-numeric: tabular-nums; font-weight: 600; }
      .wave-meta b { color: var(--gold-bright); font-weight: 700;
        text-shadow: 0 1px 0 rgba(0,0,0,0.6); }

      .hud .top-right { position: absolute; top: 16px; right: 16px; text-align: right;
        padding: 12px 16px; min-width: 170px; }
      .ko-label { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 10px; letter-spacing: 0.26em; color: var(--parchment-dim);
        text-transform: uppercase; }
      .ko-num { font-family: 'Pirata One', serif; font-size: 32px;
        line-height: 1.05; color: var(--chain);
        text-shadow: 0 2px 0 rgba(0,0,0,0.6), 0 0 20px rgba(210,255,3,0.32);
        font-variant-numeric: tabular-nums; }
      .timer-row { margin-top: 5px; font-size: 10px; color: var(--parchment-dim);
        font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.12em;
        text-transform: uppercase; }
      .timer-row b { color: var(--parchment); }

      /* ============== SKILL BAR ============== */
      .hud .bottom-bar { position: absolute; bottom: 18px; left: 50%;
        transform: translateX(-50%); display: flex; gap: 7px; padding: 7px;
        background: linear-gradient(180deg, rgba(18,26,12,0.82) 0%, rgba(9,13,7,0.86) 100%);
        border: 1px solid var(--hairline);
        box-shadow: 0 0 0 1px var(--ink-edge), 0 10px 28px rgba(4,8,3,0.45);
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
      .skill-slot { width: 54px; height: 54px; position: relative;
        background: linear-gradient(180deg, rgba(22,30,14,0.9), rgba(9,13,6,0.95));
        border: 1px solid rgba(210,255,3,0.42);
        box-shadow: inset 0 1px 0 rgba(242,236,216,0.07), inset 0 -4px 8px rgba(0,0,0,0.5);
        display: flex; align-items: center; justify-content: center; overflow: hidden; }
      .skill-slot.locked { background: rgba(5,8,4,0.6);
        border: 1px dashed rgba(210,255,3,0.26); box-shadow: none; }
      .skill-slot.locked .skill-icon { font-size: 24px; color: rgba(242,236,216,0.28);
        font-family: 'Pirata One', serif; filter: none; }
      .skill-slot.locked .skill-key { color: rgba(242,236,216,0.55);
        background: rgba(0,0,0,0.7); border: 1px solid rgba(210,255,3,0.26); }
      .skill-icon { font-size: 27px; transition: transform 0.25s ease;
        filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)) drop-shadow(0 0 6px rgba(210,255,3,0.28)); }
      .skill-key { position: absolute; bottom: 2px; right: 2px; font-size: 8px;
        color: var(--chain); font-weight: 800; letter-spacing: 0.06em;
        background: rgba(5,8,4,0.92); padding: 1px 4px;
        border: 1px solid rgba(210,255,3,0.42); }
      .skill-cooldown { position: absolute; inset: 0; background: rgba(3,5,2,0.78);
        transform-origin: bottom; transform: scaleY(0); transition: transform 0.05s linear; }
      .skill-level { position: absolute; top: 2px; left: 2px; font-size: 8px;
        color: var(--ink); font-weight: 800; background: var(--chain);
        padding: 1px 4px; border: 1px solid rgba(0,0,0,0.6); letter-spacing: 0.04em;
        box-shadow: 0 1px 2px rgba(0,0,0,0.5); }

      /* ============== BOSS HUD — the villain's great-bar ============== */
      .boss-hud { position: fixed; bottom: 108px; left: 50%;
        transform: translateX(-50%) translateY(20px);
        width: 56vw; max-width: 740px; min-width: 420px;
        pointer-events: none; z-index: 6; opacity: 0; padding: 18px 26px 14px;
        background: radial-gradient(ellipse at center, rgba(4,8,3,0.55) 0%, rgba(4,8,3,0) 72%);
        transition: opacity 0.5s ease, transform 0.5s ease; }
      .boss-hud.show { opacity: 1; transform: translateX(-50%) translateY(0); }
      .boss-hud-eyebrow { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 11px; letter-spacing: 0.3em; color: var(--sheriff-bright);
        text-transform: uppercase; text-align: center; margin-bottom: 3px;
        text-shadow: 0 0 14px rgba(255,94,77,0.55), 0 1px 0 rgba(0,0,0,0.8); }
      .boss-hud-name { font-family: 'Pirata One', serif; font-size: 26px;
        letter-spacing: 0.1em; text-transform: uppercase;
        color: var(--parchment); text-align: center; margin-bottom: 9px;
        text-shadow: 0 2px 0 rgba(0,0,0,0.75), 0 4px 16px rgba(0,0,0,0.7),
                     0 0 26px rgba(255,94,77,0.2); }
      .boss-hud-bar { position: relative; height: 14px;
        background: linear-gradient(180deg, rgba(0,0,0,0.78), rgba(16,9,7,0.7));
        border: 1px solid rgba(255,94,77,0.5); overflow: visible;
        box-shadow: 0 0 0 1px var(--ink-edge), inset 0 2px 5px rgba(0,0,0,0.75),
                    0 6px 20px rgba(0,0,0,0.55); }
      /* chain finials — the outlaws' mark bracketing the villain's life */
      .boss-hud-bar::before, .boss-hud-bar::after { content: ""; position: absolute;
        top: 50%; width: 11px; height: 11px; background: var(--chain);
        transform: translateY(-50%) rotate(45deg);
        box-shadow: 0 0 0 1px rgba(0,0,0,0.8), 0 0 10px rgba(210,255,3,0.5); }
      .boss-hud-bar::before { left: -7px; }
      .boss-hud-bar::after  { right: -7px; }
      .boss-hud-chip, .boss-hud-fill { position: absolute; inset: 0;
        transform-origin: left center; }
      .boss-hud-chip { background: rgba(230,255,92,0.85);
        transition: transform 0.08s linear; transform: scaleX(1); }
      .boss-hud-fill { background: linear-gradient(180deg,
          #ff7264 0%, #c22f20 52%, #6e110b 100%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -3px 0 rgba(0,0,0,0.35);
        transition: transform 0.18s cubic-bezier(.4,.05,.4,1); transform: scaleX(1); }
      /* Enraged phase — the bar burns hotter, finials pulse */
      .boss-hud.enraged .boss-hud-fill { background: linear-gradient(180deg,
          #ffc24a 0%, #ff6a2c 48%, #a82408 100%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -3px 0 rgba(0,0,0,0.35),
                    0 0 18px rgba(255,106,44,0.55); }
      .boss-hud.enraged .boss-hud-eyebrow { color: #ffb24a;
        text-shadow: 0 0 16px rgba(255,138,40,0.7), 0 1px 0 rgba(0,0,0,0.8); }
      .boss-hud.enraged .boss-hud-name { text-shadow: 0 2px 0 rgba(0,0,0,0.75),
          0 4px 16px rgba(0,0,0,0.7), 0 0 30px rgba(255,106,44,0.4); }
      .boss-hud.enraged .boss-hud-bar::before,
      .boss-hud.enraged .boss-hud-bar::after { background: #ffb24a;
        animation: finialPulse 0.8s ease-in-out infinite; }
      @keyframes finialPulse {
        0%, 100% { box-shadow: 0 0 0 1px rgba(0,0,0,0.8), 0 0 10px rgba(255,178,74,0.5); }
        50% { box-shadow: 0 0 0 1px rgba(0,0,0,0.8), 0 0 22px rgba(255,106,44,0.95); }
      }

      /* ===== Boss cast tell — a brief color-keyed glow on the boss bar when a
         signature move begins its windup. No words: the COLOR carries the
         flavor (cyan=Gisborne, gold=Golem, ember=Sheriff, violet=Witch) and the
         glow is peripheral so it never steals focus from the 3D threat tell. */
      .boss-hud.casting .boss-hud-bar {
        animation: bossCastGlow 0.5s ease-out 1; }
      @keyframes bossCastGlow {
        0%   { box-shadow: 0 0 0 1px rgba(0,0,0,0.8), 0 0 4px 0 var(--cast-col, #fff); }
        40%  { box-shadow: 0 0 0 1px rgba(0,0,0,0.8), 0 0 26px 6px var(--cast-col, #fff); }
        100% { box-shadow: 0 0 0 1px rgba(0,0,0,0.8), 0 0 4px 0 var(--cast-col, #fff); }
      }
      .boss-hud.casting .boss-hud-name {
        text-shadow: 0 2px 0 rgba(0,0,0,0.75), 0 0 16px var(--cast-col, #fff); }

      /* ===== Arena-wide danger vignette — reserved for the two "the whole floor
         is the threat" moves (the Sheriff's Brand-Fire Rite, the Witch's Curse),
         where there is no single in-world spot to look at. Still wordless: a
         red edge-glow blooms inward to say "find your safe spot NOW". */
      .arena-danger { position: fixed; inset: 0; pointer-events: none; z-index: 6;
        opacity: 0; transition: opacity 0.18s ease-out;
        box-shadow: inset 0 0 120px 30px rgba(194,47,32,0.0); }
      .arena-danger.show { opacity: 1;
        box-shadow: inset 0 0 140px 50px rgba(194,47,32,0.55);
        animation: arenaDangerPulse 0.9s ease-in-out infinite; }
      @keyframes arenaDangerPulse {
        0%, 100% { box-shadow: inset 0 0 120px 36px rgba(194,47,32,0.40); }
        50%      { box-shadow: inset 0 0 170px 64px rgba(194,47,32,0.70); }
      }

      /* ===== Witch's Curse countdown — tells the player exactly how long until
         the lightning falls, so reaching the charmed ring is a fair race. The
         ring itself glows chain green in-world; the sub line matches it. */
      .storm-warn { position: fixed; top: 18%; left: 50%; transform: translateX(-50%);
        z-index: 7; opacity: 0; pointer-events: none; text-align: center;
        transition: opacity 0.2s ease-out; }
      .storm-warn.show { opacity: 1; }
      .storm-warn-label { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 16px; letter-spacing: 2px; color: #eef7b8; text-transform: uppercase;
        text-shadow: 0 2px 6px rgba(0,0,0,0.9), 0 0 18px rgba(210,255,3,0.65); }
      .storm-warn-count { font-family: 'Pirata One', serif; font-size: 68px;
        line-height: 1.05; color: #fff;
        text-shadow: 0 3px 0 rgba(0,0,0,0.8), 0 0 30px rgba(210,255,3,0.85);
        animation: stormCountPulse 1s ease-in-out infinite; }
      .storm-warn-sub { font-family: 'Outfit', sans-serif; font-weight: 700;
        font-size: 13px; letter-spacing: 1px; color: var(--chain); margin-top: 2px;
        text-shadow: 0 2px 5px rgba(0,0,0,0.9), 0 0 14px rgba(210,255,3,0.5); }
      @keyframes stormCountPulse {
        0%, 100% { transform: scale(1); text-shadow: 0 3px 0 rgba(0,0,0,0.8), 0 0 30px rgba(210,255,3,0.8); }
        50% { transform: scale(1.12); text-shadow: 0 3px 0 rgba(0,0,0,0.8), 0 0 44px rgba(230,255,92,1); }
      }

      /* ============== WAVE BANNER ============== */
      .banner { position: fixed; top: 27%; left: 50%; transform: translateX(-50%);
        text-align: center; pointer-events: none; opacity: 0;
        transition: opacity 0.4s ease; z-index: 10; }
      .banner.show { opacity: 1; animation: bannerPulse 1.6s ease-out; }
      @keyframes bannerPulse {
        0% { transform: translateX(-50%) scale(0.7); opacity: 0; }
        18% { transform: translateX(-50%) scale(1.12); opacity: 1; }
        100% { transform: translateX(-50%) scale(1); opacity: 1; }
      }
      .banner .eyebrow { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 15px; letter-spacing: 0.32em; color: var(--chain);
        text-transform: uppercase; margin-bottom: 8px;
        text-shadow: 0 0 18px rgba(210,255,3,0.55), 0 2px 6px rgba(0,0,0,0.7); }
      .banner .title { font-family: 'Pirata One', serif;
        font-size: 96px; line-height: 1; color: var(--parchment); letter-spacing: 0.02em;
        text-shadow: 0 5px 0 var(--ink-deep), 0 8px 26px rgba(0,0,0,0.65),
                     0 0 50px rgba(210,255,3,0.22); }
      .banner .sub { font-family: 'Outfit', sans-serif; font-weight: 700;
        font-size: 15px; margin-top: 12px; color: var(--chain-bright);
        letter-spacing: 0.34em; text-transform: uppercase;
        text-shadow: 0 2px 8px rgba(0,0,0,0.7); }

      /* ============== LEVEL UP — wanted posters on the line ============== */
      .levelup { position: fixed; inset: 0;
        background: radial-gradient(ellipse at 50% 38%, rgba(16,24,10,0.6) 0%, rgba(5,8,4,0.84) 100%);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        display: none; align-items: center; justify-content: center; z-index: 20;
        flex-direction: column; }
      .levelup.show { display: flex; animation: fadeIn 0.3s ease; }
      @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
      .levelup .lu-title { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 20px; letter-spacing: 0.3em; color: var(--chain);
        text-transform: uppercase; margin-bottom: 6px;
        text-shadow: 0 0 24px rgba(210,255,3,0.55); }
      .levelup .lu-sub { font-family: 'Pirata One', serif; font-size: 58px;
        color: var(--parchment); margin-bottom: 34px;
        text-shadow: 0 4px 0 rgba(0,0,0,0.5), 0 0 34px rgba(210,255,3,0.22); }
      .lu-cards { display: flex; gap: 26px; overflow: visible; }
      /* Each card is a notice nailed up in the greenwood — parchment, iron
         nail, hemp twine — swinging as it settles. */
      .lu-card { width: 224px; height: 352px; position: relative;
        background:
          repeating-linear-gradient(90deg, rgba(110,90,40,0.045) 0 1px, transparent 1px 5px),
          linear-gradient(180deg, #f9f0da 0%, #efe2c4 100%);
        border: 1px solid rgba(100,80,35,0.55);
        box-shadow: inset 0 0 0 1px rgba(255,252,240,0.6), inset 0 0 34px rgba(110,90,40,0.14),
                    0 14px 30px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.4);
        padding: 30px 18px 16px; color: #22190f; cursor: pointer;
        display: flex; flex-direction: column;
        transform-origin: top center;
        transition: transform 0.22s ease, box-shadow 0.22s ease;
        animation: posterHang 0.65s cubic-bezier(.25,.9,.3,1.15) backwards; }
      /* iron nail head at the top of each poster */
      .lu-card::before { content: ""; position: absolute; top: 10px; left: 50%;
        width: 11px; height: 11px; transform: translateX(-50%); border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #d8d4c8 0%, #8a877a 55%, #3c3a32 100%);
        box-shadow: inset 0 1px 3px rgba(20,18,12,0.8), 0 1px 0 rgba(255,252,240,0.8); }
      /* hemp twine running up from the nail */
      .lu-card::after { content: ""; position: absolute; top: -16px; left: 50%;
        width: 2px; height: 24px; transform: translateX(-50%);
        background: linear-gradient(180deg, rgba(154,120,70,0) 0%, #9a7846 35%, #6b5230 100%); }
      .lu-card:nth-child(1) { animation-delay: 0.05s; }
      .lu-card:nth-child(2) { animation-delay: 0.16s; }
      .lu-card:nth-child(3) { animation-delay: 0.27s; }
      @keyframes posterHang {
        0%   { transform: translateY(-46px) rotate(-3.5deg); opacity: 0; }
        55%  { transform: translateY(4px) rotate(1.6deg); opacity: 1; }
        80%  { transform: translateY(-2px) rotate(-0.7deg); }
        100% { transform: translateY(0) rotate(0); opacity: 1; }
      }
      .lu-card:hover { transform: translateY(-9px) rotate(-0.5deg) scale(1.03);
        box-shadow: inset 0 0 0 1px rgba(255,252,240,0.6), inset 0 0 34px rgba(110,90,40,0.14),
                    0 22px 48px rgba(0,0,0,0.6), 0 0 28px rgba(210,255,3,0.25); }
      .lu-card.selected { transform: translateY(-12px) scale(1.05);
        box-shadow: inset 0 0 0 2px var(--chain-deep), inset 0 0 34px rgba(143,180,0,0.12),
                    0 0 0 2px var(--chain),
                    0 24px 52px rgba(0,0,0,0.65), 0 0 40px rgba(210,255,3,0.45); }
      .lu-card-rarity { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
        color: #7c5a1e; text-align: center; margin-bottom: 7px; }
      .lu-card-name { font-family: 'Pirata One', serif; font-size: 26px;
        line-height: 1.1; margin-bottom: 6px; text-align: center;
        color: #1c1406; }
      .lu-card-icon { width: 92px; height: 92px; margin: 14px auto 12px;
        display: flex; align-items: center; justify-content: center; font-size: 56px;
        border: 1px solid rgba(100,80,35,0.45);
        background: radial-gradient(circle at 50% 42%, rgba(255,252,240,0.9), rgba(232,216,180,0.55));
        box-shadow: inset 0 0 14px rgba(110,90,40,0.18);
        filter: drop-shadow(0 2px 2px rgba(50,40,20,0.3)); }
      .lu-card-desc { font-size: 12.5px; line-height: 1.5; color: rgba(34,25,15,0.85);
        margin-top: auto; font-weight: 500; text-align: center; }
      .lu-card-key { position: absolute; bottom: 10px; right: 10px;
        width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
        background: var(--chain); color: var(--ink); font-size: 11px; font-weight: 800;
        font-family: 'Outfit', sans-serif;
        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35), 0 1px 3px rgba(40,50,10,0.4); }
      .lu-card-level { position: absolute; top: 8px; right: 8px; background: var(--ink);
        color: var(--chain); font-size: 9px; font-weight: 800;
        padding: 3px 7px; border: 1px solid var(--chain-deep); letter-spacing: 0.14em; }
      .lu-invoke { margin-top: 30px; padding: 15px 60px;
        background: linear-gradient(180deg, #e6ff5c 0%, #d2ff03 55%, #8fb400 100%);
        color: var(--ink); border: 1px solid var(--chain-deep);
        font-family: 'Outfit', sans-serif; font-size: 15px;
        font-weight: 800; letter-spacing: 0.4em; text-transform: uppercase;
        cursor: pointer; text-shadow: 0 1px 0 rgba(255,255,255,0.25);
        box-shadow: 0 0 0 1px var(--ink-edge), inset 0 1px 0 rgba(255,255,255,0.45),
                    0 6px 16px rgba(90,120,0,0.5);
        transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease, filter 0.2s; }
      .lu-invoke:disabled { opacity: 0.3; cursor: not-allowed; }
      .lu-invoke:not(:disabled):hover { filter: brightness(1.06); transform: translateY(-2px);
        box-shadow: 0 0 0 1px var(--ink-edge), inset 0 1px 0 rgba(255,255,255,0.45),
                    0 10px 26px rgba(210,255,3,0.5); }
      .lu-invoke:not(:disabled):active { transform: translateY(1px); }

      /* ============== SACRIFICE MODAL ============== */
      .sacrifice-modal { position: fixed; inset: 0; display: none;
        align-items: center; justify-content: center; flex-direction: column;
        background: radial-gradient(ellipse at 50% 40%, rgba(46,10,12,0.55) 0%, rgba(12,4,5,0.88) 100%);
        z-index: 35; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
      .sacrifice-modal.show { display: flex; animation: fadeIn 0.45s ease; }
      .sac-tag { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 14px; letter-spacing: 0.3em; color: var(--sheriff-bright);
        text-transform: uppercase; margin-bottom: 14px;
        text-shadow: 0 0 16px rgba(255,94,77,0.55); }
      .sac-card { width: 360px; padding: 26px 28px; position: relative; overflow: hidden;
        background: linear-gradient(180deg, rgba(30,12,12,0.97) 0%, rgba(14,6,7,0.97) 100%);
        border: 1px solid rgba(194,47,32,0.7);
        box-shadow: 0 0 0 1px var(--ink-edge), inset 0 1px 0 rgba(255,120,110,0.12),
                    0 18px 50px rgba(0,0,0,0.6), 0 0 44px rgba(194,47,32,0.3);
        color: var(--parchment); margin-bottom: 22px; }
      .sac-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0;
        height: 3px; background: linear-gradient(90deg, transparent, var(--sheriff-bright), transparent); }
      .sac-icon { font-size: 52px; text-align: center; margin-bottom: 8px;
        color: #ff8a7e; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6)); }
      .sac-name { font-family: 'Pirata One', serif; font-size: 28px;
        text-align: center; margin-bottom: 16px;
        color: var(--parchment); letter-spacing: 0.04em;
        text-shadow: 0 2px 0 rgba(0,0,0,0.6); }
      .sac-row { display: flex; align-items: center; gap: 10px;
        padding: 10px 12px; margin-bottom: 8px;
        background: rgba(0,0,0,0.4); border: 1px solid rgba(242,236,216,0.18); }
      .sac-row.sac-buff { border-color: rgba(210,255,3,0.5); color: #e2f78a; }
      .sac-row.sac-nerf { border-color: rgba(255,94,77,0.55); color: #ffb3ab; margin-bottom: 0; }
      .sac-duration { margin-top: 16px; padding-top: 12px;
        border-top: 1px dashed rgba(201,162,75,0.4);
        font-family: 'IM Fell English', serif; font-style: italic; font-size: 12px;
        letter-spacing: 0.18em; text-align: center; color: var(--gold-bright);
        text-transform: uppercase; }
      .sac-tag-chip { font-family: 'Outfit', sans-serif; font-size: 9px;
        letter-spacing: 0.3em; font-weight: 800; text-transform: uppercase;
        padding: 2px 8px; min-width: 54px; text-align: center;
        background: rgba(0,0,0,0.5); border: 1px solid currentColor; }
      .sac-actions { display: flex; gap: 18px; }
      .sac-btn { padding: 14px 36px;
        font-family: 'Outfit', sans-serif; font-size: 13px;
        font-weight: 800; letter-spacing: 0.34em; text-transform: uppercase;
        cursor: pointer; color: var(--parchment);
        box-shadow: 0 0 0 1px var(--ink-edge), 0 5px 14px rgba(0,0,0,0.5);
        transition: transform 0.15s ease, filter 0.15s ease; }
      .sac-decline { background: linear-gradient(180deg, #2e3a22 0%, #182013 100%);
        border: 1px solid rgba(242,236,216,0.35); }
      .sac-accept  { background: linear-gradient(180deg, #e6ff5c 0%, #d2ff03 55%, #8fb400 100%);
        border: 1px solid var(--chain-deep); color: var(--ink);
        text-shadow: 0 1px 0 rgba(255,255,255,0.25); }
      .sac-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
      .sac-btn:active { transform: translateY(1px); }

      /* ============== SETTINGS BUTTON / DEV PANEL / SETTINGS ============== */
      .settings-btn { display: none !important; position: fixed; top: 16px; right: 50%;
        transform: translateX(220px); z-index: 6;
        width: 36px; height: 36px; background: var(--bg-glass);
        border: 1px solid var(--chain-dim); border-radius: 50%;
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        color: var(--parchment); font-size: 17px;
        cursor: pointer; display: flex; align-items: center; justify-content: center;
        pointer-events: auto; transition: transform 0.25s ease, border-color 0.2s, color 0.2s; }
      .settings-btn:hover { transform: translateX(220px) rotate(90deg);
        border-color: var(--chain); color: var(--chain); }

      .dev-panel { position: fixed; bottom: 16px; left: 16px; z-index: 25;
        background: var(--panel-solid); padding: 11px 12px;
        border: 1px solid rgba(160,120,230,0.55);
        box-shadow: 0 0 0 1px var(--ink-edge), 0 10px 28px rgba(0,0,0,0.5);
        color: var(--parchment); font-family: 'Outfit', sans-serif; font-size: 11px;
        min-width: 220px; pointer-events: auto; display: none; }
      .dev-panel.show { display: block; }
      .dev-header { display: flex; justify-content: space-between; align-items: center;
        margin-bottom: 10px; padding-bottom: 6px;
        border-bottom: 1px dashed rgba(180,140,255,0.4); }
      .dev-title { font-weight: 800; letter-spacing: 0.4em; color: #c8a0ff; }
      .dev-hint { font-size: 9px; opacity: 0.55; letter-spacing: 0.15em; }
      .dev-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
        flex-wrap: wrap; }
      .dev-row-label { font-size: 9px; opacity: 0.65; letter-spacing: 0.22em;
        text-transform: uppercase; margin-bottom: 4px; }
      .dev-row input[type="checkbox"] { accent-color: #c8a0ff;
        width: 15px; height: 15px; cursor: pointer; }
      .dev-row label, .dev-row span { cursor: pointer; }
      .dev-jumps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px;
        margin-bottom: 8px; }
      .dev-jump { padding: 5px 0; background: rgba(106,74,166,0.35);
        border: 1px solid rgba(180,140,255,0.6); color: var(--parchment);
        font-family: 'Outfit', sans-serif; font-size: 10px; font-weight: 800;
        cursor: pointer; transition: background 0.15s; }
      .dev-jump:hover { background: rgba(180,140,255,0.5); }
      .dev-jump:active { transform: translateY(1px); }
      .dev-bonus { padding: 6px 10px; flex: 1; }

      .settings { display: none !important; position: fixed; top: 0; right: 0; bottom: 0; width: 340px;
        background: linear-gradient(180deg, rgba(15,22,11,0.95) 0%, rgba(8,11,6,0.96) 100%);
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        border-left: 1px solid var(--hairline);
        box-shadow: -16px 0 50px rgba(0,0,0,0.5);
        transform: translateX(100%); transition: transform 0.3s cubic-bezier(.4,.2,.2,1);
        padding: 26px 24px; z-index: 30; overflow-y: auto; }
      .settings.show { transform: translateX(0); }
      .settings h2 { font-family: 'Pirata One', serif;
        font-size: 30px; margin-bottom: 3px; color: var(--chain); }
      .settings .sub-flavor { font-family: 'IM Fell English', serif; font-style: italic;
        color: var(--parchment-dim); font-size: 12px; letter-spacing: 0.22em;
        text-transform: uppercase; margin-bottom: 24px; }
      .setting-group { margin-bottom: 19px; }
      .setting-label { display: flex; justify-content: space-between; font-size: 11px;
        letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 7px;
        color: var(--parchment-dim); }
      .setting-label b { color: var(--chain); font-weight: 700; }
      .setting-group input[type="range"] { width: 100%;
        -webkit-appearance: none; appearance: none; background: transparent; }
      .setting-group input[type="range"]::-webkit-slider-runnable-track {
        height: 3px; background: rgba(210,255,3,0.26); border-radius: 2px; }
      .setting-group input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none; width: 15px; height: 15px;
        background: var(--chain); border: 1px solid rgba(0,0,0,0.7);
        border-radius: 50%; margin-top: -6px; cursor: pointer;
        box-shadow: 0 0 10px rgba(210,255,3,0.45); }
      .setting-group input[type="range"]::-moz-range-track {
        height: 3px; background: rgba(210,255,3,0.26); border-radius: 2px; }
      .setting-group input[type="range"]::-moz-range-thumb {
        width: 15px; height: 15px; background: var(--chain);
        border: 1px solid rgba(0,0,0,0.7); border-radius: 50%; cursor: pointer; }
      .reset-btn { margin-top: 12px; width: 100%; padding: 11px;
        background: linear-gradient(180deg, #e8483c 0%, #c12d22 55%, #7c130d 100%);
        color: #fdf2dc; border: 1px solid rgba(255,94,77,0.6);
        font-family: 'Outfit', sans-serif; font-weight: 800;
        font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
        cursor: pointer; transition: filter 0.2s, transform 0.15s;
        box-shadow: 0 0 0 1px var(--ink-edge), 0 4px 12px rgba(124,19,13,0.4); }
      .reset-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }

      .setting-music-group .music-mini-row { display: flex; gap: 8px; margin-top: 6px; }
      .music-mini-btn { flex: 1; padding: 6px 10px;
        background: linear-gradient(180deg, #e6ff5c 0%, #b8dd02 100%);
        color: var(--ink); border: 1px solid var(--chain-deep);
        font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 800;
        letter-spacing: 0.2em; cursor: pointer; text-transform: uppercase;
        box-shadow: 0 0 0 1px var(--ink-edge); transition: filter 0.15s; }
      .music-mini-btn:hover:not(:disabled) { filter: brightness(1.06); }
      .music-mini-btn:disabled { opacity: 0.35; cursor: not-allowed; }
      .music-mini-toggle { padding: 6px; font-size: 13px; letter-spacing: 0; }
      #musicStatus { font-size: 10px; opacity: 0.7; font-style: italic;
        text-transform: lowercase; letter-spacing: 0.05em; }

      /* ============== TIER BANNER ============== */
      .tier-banner { position: fixed; top: 22%; left: 50%;
        transform: translate(-50%, 0); pointer-events: none;
        z-index: 50; text-align: center; opacity: 0;
        transition: opacity 0.5s ease; }
      .tier-banner.show { opacity: 1; }
      .tier-banner-flavor { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 17px; letter-spacing: 0.24em;
        color: var(--gold-bright); text-transform: uppercase;
        text-shadow: 0 0 18px rgba(242,205,114,0.55), 0 2px 8px rgba(0,0,0,0.8);
        margin-bottom: 14px; }
      .tier-banner-num { font-family: 'Pirata One', serif;
        font-size: 76px; line-height: 1;
        color: var(--sheriff-bright); letter-spacing: 0.14em;
        text-shadow: 0 5px 0 rgba(40,8,6,0.9), 0 12px 36px rgba(255,94,77,0.55);
        margin-bottom: 10px; }
      .tier-banner-name { font-family: 'Outfit', sans-serif; font-size: 19px;
        letter-spacing: 0.45em; color: var(--parchment); text-transform: uppercase;
        font-weight: 600; text-shadow: 0 2px 6px rgba(0,0,0,0.85); }

      /* ============== GAME OVER — the ballad ends ============== */
      .gameover { position: fixed; inset: 0;
        background: radial-gradient(ellipse at 50% 42%, rgba(24,16,12,0.82) 0%, rgba(6,5,4,0.95) 100%);
        backdrop-filter: blur(8px); display: none; align-items: center;
        justify-content: center; flex-direction: column; z-index: 40; overflow: hidden; }
      .gameover.show { display: flex; animation: fadeIn 0.6s ease; }
      /* WANTED — a giant blackletter W watermarks the capture notice */
      .gameover::before { content: "W"; position: absolute; left: 50%; top: 50%;
        transform: translate(-50%, -54%); font-family: 'Pirata One', serif;
        font-size: min(80vh, 76vw); color: rgba(194,47,32,0.08);
        pointer-events: none; line-height: 1; }
      .go-tag { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 17px; letter-spacing: 0.3em; color: var(--sheriff-bright);
        text-transform: uppercase; margin-bottom: 8px;
        text-shadow: 0 0 18px rgba(255,94,77,0.5); }
      .go-title { font-family: 'Pirata One', serif; font-size: 104px;
        color: var(--parchment); letter-spacing: 0.05em;
        text-shadow: 0 6px 0 var(--sheriff-deep), 0 10px 34px rgba(0,0,0,0.75);
        margin-bottom: 30px; }
      .go-stats { display: grid; grid-template-columns: repeat(2, auto);
        gap: 13px 56px; margin-bottom: 38px; padding: 22px 38px;
        font-family: 'Outfit', sans-serif;
        background: rgba(9,13,7,0.6); border: 1px solid var(--chain-dim);
        box-shadow: 0 0 0 1px var(--ink-edge), 0 12px 34px rgba(0,0,0,0.45); }
      .go-stat-label { text-align: right; font-size: 11px; letter-spacing: 0.3em;
        color: var(--parchment-dim); text-transform: uppercase; align-self: center; }
      .go-stat-val { font-size: 22px; color: var(--chain);
        font-weight: 700; font-variant-numeric: tabular-nums;
        text-shadow: 0 1px 0 rgba(0,0,0,0.6); }
      .go-buttons { display: flex; flex-direction: column; gap: 12px;
        align-items: stretch; width: 280px; position: relative; }
      .go-restart { padding: 15px 36px;
        background: linear-gradient(180deg, #e6ff5c 0%, #d2ff03 55%, #8fb400 100%);
        border: 1px solid var(--chain-deep); color: var(--ink);
        font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 800;
        letter-spacing: 0.36em; text-transform: uppercase; cursor: pointer;
        transition: all 0.22s; text-shadow: 0 1px 0 rgba(255,255,255,0.25);
        box-shadow: 0 0 0 1px var(--ink-edge), inset 0 1px 0 rgba(255,255,255,0.45),
                    0 6px 18px rgba(90,120,0,0.5); }
      .go-restart:hover { filter: brightness(1.06);
        transform: translateY(-2px); box-shadow: 0 0 0 1px var(--ink-edge),
        inset 0 1px 0 rgba(255,255,255,0.45), 0 12px 32px rgba(210,255,3,0.5); }
      .go-menu { padding: 12px 30px;
        background: rgba(13,18,10,0.6);
        border: 1px solid var(--chain-dim); color: var(--parchment-dim);
        font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700;
        letter-spacing: 0.36em; text-transform: uppercase; cursor: pointer;
        transition: all 0.22s; backdrop-filter: blur(6px); }
      .go-menu:hover { border-color: var(--chain); color: var(--parchment);
        transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.45); }

      /* ============== SCREEN LAYERS ============== */
      .flash { position: fixed; inset: 0; background: white; pointer-events: none;
        opacity: 0; z-index: 8; mix-blend-mode: screen; }
      .vignette { position: fixed; inset: 0; pointer-events: none;
        background: radial-gradient(ellipse at center, transparent 42%, rgba(16,24,10,0.5) 100%);
        z-index: 4; }
      .damage-vignette { position: fixed; inset: 0; pointer-events: none;
        background: radial-gradient(ellipse at center, transparent 40%, rgba(255,40,40,0.6) 100%);
        z-index: 7; opacity: 0; transition: opacity 0.3s ease; }
      .death-fade { position: fixed; inset: 0; pointer-events: none;
        background: rgba(0,0,0,0); z-index: 9;
        transition: background 1.3s cubic-bezier(.45,.05,.55,.95); }
      .death-fade.show { background: rgba(0,0,0,0.92); }

      /* ============== LOADER + COUNTDOWN ============== */
      /* ===== LOADING SCREEN — World of Warcraft style =====
         Full-bleed art fills the screen; the title sits low and the loading bar
         is pinned near the bottom with chain-green trim. Drop your image into
         BG_LOADER_SRC (top of the script) and it fills the whole background. */
      .loader { position: fixed; inset: 0; z-index: 110;
        display: none; align-items: flex-end; justify-content: center;
        background: #0b1006;
        background-size: cover; background-position: center; background-repeat: no-repeat;
        pointer-events: auto; overflow: hidden; }
      .loader.show { display: flex; animation: fadeIn 0.35s ease; }
      .loader.hide { animation: fadeOutLoader 0.5s ease forwards; }
      @keyframes fadeOutLoader { to { opacity: 0; pointer-events: none; } }
      /* Soft dark gradient along the bottom so text + bar stay legible over any art */
      .loader::after { content: ""; position: absolute; inset: 0; pointer-events: none;
        background: linear-gradient(180deg,
          rgba(5,8,4,0) 45%, rgba(5,8,4,0.35) 70%, rgba(5,8,4,0.85) 100%); }
      .loader-inner { position: relative; z-index: 2; text-align: center;
        width: 100%; max-width: 900px; padding: 0 32px 7vh; }
      .loader-tag { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 14px; letter-spacing: 0.32em; color: var(--chain);
        text-transform: uppercase; margin-bottom: 10px;
        text-shadow: 0 0 18px rgba(210,255,3,0.5), 0 2px 8px rgba(0,0,0,0.9); }
      .loader-title { font-family: 'Pirata One', serif;
        font-size: 46px; line-height: 1; color: var(--parchment);
        text-shadow: 0 3px 0 var(--ink-deep), 0 6px 24px rgba(0,0,0,0.9);
        margin-bottom: 22px; letter-spacing: 0.05em; }
      /* Ornate bar frame — pointed chain-green ends, dark inset channel */
      .loader-bar-wrap { position: relative; width: min(620px, 80vw); height: 22px;
        margin: 0 auto 14px;
        background: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(11,15,7,0.8));
        border: 2px solid var(--chain-deep);
        box-shadow: 0 0 0 1px rgba(0,0,0,0.8), inset 0 2px 6px rgba(0,0,0,0.85),
                    0 0 22px rgba(210,255,3,0.3), 0 6px 20px rgba(0,0,0,0.6);
        overflow: hidden; }
      /* Chain diamond finials at each end of the bar */
      .loader-bar-wrap::before, .loader-bar-wrap::after { content: ""; position: absolute;
        top: 50%; width: 16px; height: 16px; background: var(--chain);
        transform: translateY(-50%) rotate(45deg); z-index: 3;
        box-shadow: 0 0 0 1.5px rgba(0,0,0,0.85), 0 0 12px rgba(210,255,3,0.6); }
      .loader-bar-wrap::before { left: -9px; }
      .loader-bar-wrap::after  { right: -9px; }
      .loader-bar { height: 100%; width: 0%; position: relative;
        background:
          repeating-linear-gradient(-55deg, rgba(255,255,255,0.16) 0 2px, transparent 2px 8px),
          linear-gradient(180deg, #e6ff5c 0%, #c2ec02 48%, #7a9a00 100%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 0 14px rgba(210,255,3,0.6);
        transition: width 0.18s ease-out; }
      /* Glossy highlight sweep across the top of the fill, WoW-style */
      .loader-bar::after { content: ""; position: absolute; inset: 0 0 50% 0;
        background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0)); }
      .loader-status { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 14px; letter-spacing: 0.18em; color: var(--parchment);
        text-shadow: 0 2px 6px rgba(0,0,0,0.95); min-height: 18px; }

      .countdown { position: fixed; top: 18%; left: 50%; transform: translateX(-50%);
        z-index: 12; pointer-events: none; text-align: center; display: none; }
      .countdown.show { display: block; }
      .countdown-tag { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 13px; letter-spacing: 0.3em; color: var(--sheriff-bright);
        text-transform: uppercase; margin-bottom: 10px;
        text-shadow: 0 0 18px rgba(255,94,77,0.65); }
      .countdown-num { font-family: 'Pirata One', serif;
        font-size: 148px; line-height: 1; color: var(--parchment);
        text-shadow: 0 7px 0 var(--ink-deep), 0 12px 32px rgba(0,0,0,0.7),
                     0 0 44px rgba(210,255,3,0.25);
        animation: countPulse 1s ease-out; font-variant-numeric: tabular-nums; }
      .countdown-sub { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 17px; letter-spacing: 0.3em; color: var(--chain);
        text-transform: uppercase; margin-top: 12px;
        text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 0 16px rgba(210,255,3,0.4); }
      @keyframes countPulse {
        0%   { transform: scale(0.5); opacity: 0; }
        25%  { transform: scale(1.22); opacity: 1; }
        100% { transform: scale(1); opacity: 1; }
      }

      /* ============== TITLE SCREEN ============== */
      .title-screen { position: fixed; inset: 0; background: #0a0e06;
        z-index: 100; display: flex; align-items: center; justify-content: center;
        flex-direction: column; text-align: center; padding: 40px; overflow: hidden; }
      .title-screen.hidden { display: none; }
      .title-video { position: absolute; inset: 0; width: 100%; height: 100%;
        object-fit: cover; z-index: 0; filter: saturate(1.05) brightness(0.9); }
      .title-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none;
        background:
          radial-gradient(ellipse at center,
            rgba(10,14,6,0) 0%, rgba(10,14,6,0.38) 55%, rgba(6,9,4,0.82) 100%),
          linear-gradient(180deg,
            rgba(6,9,4,0.5) 0%, rgba(6,9,4,0.08) 26%,
            rgba(6,9,4,0.3) 74%, rgba(6,9,4,0.76) 100%); }
      .title-motto, .title-name, .title-tagline,
      .title-controls, .title-start, .title-music { position: relative; z-index: 3; }
      .title-motto { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 16px; letter-spacing: 0.3em; color: var(--chain);
        text-transform: uppercase; margin-bottom: 10px;
        text-shadow: 0 0 26px rgba(210,255,3,0.5), 0 2px 8px rgba(0,0,0,0.85); }
      .title-name { font-family: 'Pirata One', serif;
        font-size: 118px; line-height: 0.95; color: var(--parchment); letter-spacing: 0.02em;
        text-shadow: 0 5px 0 var(--ink-deep), 0 9px 0 rgba(8,12,4,0.55),
                     0 16px 54px rgba(0,0,0,0.78), 0 0 70px rgba(210,255,3,0.2);
        margin-bottom: 14px; }
      .title-tagline { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 16px; color: var(--parchment-dim); margin-bottom: 40px;
        letter-spacing: 0.2em; text-transform: uppercase;
        text-shadow: 0 2px 8px rgba(0,0,0,0.85); }

      .title-controls { display: grid; grid-template-columns: repeat(2, auto);
        gap: 6px 36px; margin-bottom: 38px; text-align: left;
        font-size: 13px; color: var(--parchment); opacity: 0.96;
        background: rgba(9,13,7,0.55); padding: 18px 28px;
        border: 1px solid var(--chain-dim);
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 0 0 1px var(--ink-edge), 0 8px 30px rgba(0,0,0,0.5); }
      .title-controls .k { background: rgba(210,255,3,0.1);
        padding: 3px 12px; color: var(--chain);
        font-family: 'Outfit', sans-serif; font-weight: 600; letter-spacing: 0.12em;
        border: 1px solid rgba(210,255,3,0.4);
        min-width: 92px; text-align: center; }
      .title-controls > span:not(.k) { color: var(--parchment-dim); }

      .title-menu { position: relative; z-index: 3; display: flex; flex-direction: column;
        gap: 13px; width: 330px; }
      .title-btn { padding: 13px 28px; cursor: pointer; position: relative;
        display: flex; flex-direction: column; align-items: center; gap: 4px;
        transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease,
                    background 0.2s ease, border-color 0.2s ease; }
      .title-btn-tag { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 10px; letter-spacing: 0.3em; opacity: 0.82;
        text-transform: uppercase; }
      .title-btn-label { font-family: 'Pirata One', serif; font-size: 21px;
        letter-spacing: 0.2em; text-transform: uppercase; }
      /* the chain-green call to arms */
      .title-btn-primary {
        background: linear-gradient(180deg, #e6ff5c 0%, #d2ff03 55%, #8fb400 100%);
        border: 1px solid var(--chain-deep); color: var(--ink);
        text-shadow: 0 1px 0 rgba(255,255,255,0.3);
        box-shadow: 0 0 0 1px var(--ink-edge), inset 0 1px 0 rgba(255,255,255,0.45),
                    0 8px 26px rgba(120,160,0,0.5), 0 14px 48px rgba(0,0,0,0.45); }
      .title-btn-primary:hover { filter: brightness(1.06); transform: translateY(-3px);
        box-shadow: 0 0 0 1px var(--ink-edge), inset 0 1px 0 rgba(255,255,255,0.45),
                    0 14px 38px rgba(210,255,3,0.55), 0 18px 60px rgba(0,0,0,0.5); }
      .title-btn-secondary {
        background: linear-gradient(180deg, #35502a 0%, #23361c 60%, #152410 100%);
        border: 1px solid rgba(140,190,100,0.55); color: var(--parchment);
        text-shadow: 0 1px 0 rgba(0,0,0,0.55);
        box-shadow: 0 0 0 1px var(--ink-edge), inset 0 1px 0 rgba(255,255,255,0.12),
                    0 8px 26px rgba(20,40,12,0.6), 0 14px 48px rgba(0,0,0,0.45); }
      .title-btn-secondary:hover { filter: brightness(1.15); transform: translateY(-3px);
        box-shadow: 0 0 0 1px var(--ink-edge), inset 0 1px 0 rgba(255,255,255,0.12),
                    0 14px 38px rgba(106,168,69,0.45), 0 18px 60px rgba(0,0,0,0.5); }
      .title-btn-ghost { background: rgba(9,13,7,0.55);
        border: 1px solid var(--chain-dim); color: var(--parchment-dim);
        text-shadow: 0 1px 0 rgba(0,0,0,0.55);
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 0 0 1px rgba(0,0,0,0.45), 0 6px 20px rgba(0,0,0,0.4); }
      .title-btn-ghost:hover { background: rgba(18,28,12,0.7);
        border-color: var(--chain); color: var(--parchment);
        transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(0,0,0,0.45),
        0 10px 30px rgba(0,0,0,0.5), 0 0 22px rgba(210,255,3,0.15); }

      /* ============== MENU MODALS ============== */
      .menu-modal { position: fixed; inset: 0; display: none;
        align-items: center; justify-content: center;
        background: rgba(6, 9, 4, 0.78);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        z-index: 105; }
      .menu-modal.show { display: flex; animation: fadeIn 0.32s ease; }
      .menu-modal-card { width: 460px; max-width: 92vw; max-height: 92vh;
        overflow-y: auto; padding: 30px 36px;
        background: linear-gradient(180deg, rgba(17,25,12,0.98) 0%, rgba(9,13,7,0.98) 100%);
        border: 1px solid var(--hairline);
        box-shadow: 0 0 0 1px var(--ink-edge), inset 0 1px 0 rgba(242,236,216,0.07),
                    0 24px 70px rgba(0,0,0,0.7);
        position: relative; color: var(--parchment);
        animation: cardRise 0.45s cubic-bezier(.2,.9,.3,1.1); }
      @keyframes cardRise {
        from { transform: translateY(26px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
      }
      /* the outlaw green and the stolen gold, woven along the top edge */
      .menu-modal-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0;
        height: 2px; background: linear-gradient(90deg,
          transparent 0%, var(--chain) 18%, var(--gold-bright) 50%,
          var(--chain) 82%, transparent 100%); }
      .menu-modal-card::after { content: ""; position: absolute; inset: 4px;
        pointer-events: none; border: 1px solid rgba(210,255,3,0.14); }
      .menu-modal-eyebrow { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 11px; letter-spacing: 0.28em; color: var(--chain);
        text-transform: uppercase; text-align: center; margin-bottom: 7px;
        text-shadow: 0 0 14px rgba(210,255,3,0.35); }
      .menu-modal-title { font-family: 'Pirata One', serif;
        font-size: 38px; line-height: 1; color: var(--parchment);
        text-align: center; letter-spacing: 0.04em; margin-bottom: 24px;
        text-shadow: 0 3px 0 rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.45); }
      .menu-modal-icon { font-size: 52px; text-align: center; margin-bottom: 12px;
        color: var(--chain);
        text-shadow: 0 0 26px rgba(210,255,3,0.45), 0 3px 0 rgba(0,0,0,0.6); }
      .menu-modal-text { font-family: 'Outfit', sans-serif; font-size: 14px;
        line-height: 1.65; color: var(--parchment-dim); text-align: center;
        margin-bottom: 22px; padding: 0 8px; }
      .menu-modal-eta { padding: 15px; margin-bottom: 22px;
        background: rgba(6,9,4,0.55); border: 1px solid var(--chain-dim);
        text-align: center; }
      .menu-modal-eta-label { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 10px; letter-spacing: 0.3em; color: var(--parchment-dim);
        text-transform: uppercase; margin-bottom: 5px; }
      .menu-modal-eta-date { font-family: 'Pirata One', serif;
        font-size: 28px; color: var(--chain); letter-spacing: 0.12em;
        text-shadow: 0 0 18px rgba(210,255,3,0.45), 0 2px 0 rgba(0,0,0,0.5); }
      .menu-modal-close { display: block; margin: 0 auto;
        padding: 12px 38px; cursor: pointer;
        font-family: 'Outfit', sans-serif; font-size: 12px;
        letter-spacing: 0.36em; text-transform: uppercase; font-weight: 800;
        background: linear-gradient(180deg, #e6ff5c 0%, #d2ff03 55%, #8fb400 100%);
        border: 1px solid var(--chain-deep); color: var(--ink);
        text-shadow: 0 1px 0 rgba(255,255,255,0.25);
        box-shadow: 0 0 0 1px var(--ink-edge), inset 0 1px 0 rgba(255,255,255,0.45),
                    0 5px 14px rgba(90,120,0,0.45);
        transition: transform 0.15s ease, filter 0.2s ease; }
      .menu-modal-close:hover { filter: brightness(1.06); transform: translateY(-2px); }
      .menu-modal-close:active { transform: translateY(1px); }

      /* === Leaderboard === */
      .menu-modal-card-wide { width: 640px; max-width: 95vw; }
      .leaderboard-note { text-align: center; font-size: 11px; letter-spacing: 0.14em;
        text-transform: uppercase; color: var(--gold); margin: -4px 0 12px;
        font-family: 'IM Fell English', serif; font-style: italic; }
      .leaderboard-list { display: flex; flex-direction: column; gap: 4px;
        margin: 4px 0 22px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
      .leaderboard-list::-webkit-scrollbar { width: 6px; }
      .leaderboard-list::-webkit-scrollbar-track { background: rgba(11,15,7,0.4); }
      .leaderboard-list::-webkit-scrollbar-thumb { background: rgba(210,255,3,0.35); }
      .leaderboard-list::-webkit-scrollbar-thumb:hover { background: rgba(210,255,3,0.55); }
      .leaderboard-row { display: grid;
        grid-template-columns: 44px 1fr 80px 100px;
        align-items: center; gap: 12px; padding: 10px 14px;
        background: rgba(6,9,4,0.45);
        border: 1px solid rgba(210,255,3,0.12);
        font-family: 'Outfit', sans-serif; }
      .leaderboard-row.is-header { background: transparent; border: none;
        padding: 2px 14px 6px;
        font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 10px; letter-spacing: 0.24em;
        text-transform: uppercase; color: var(--parchment-dim);
        position: sticky; top: 0; z-index: 1;
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
      /* the top three ride in chain green with a coin-gold thread */
      .leaderboard-row.is-top-3 {
        background: linear-gradient(90deg, rgba(210,255,3,0.16) 0%, rgba(210,255,3,0.04) 100%);
        border-color: rgba(210,255,3,0.4); }
      .lb-rank { font-family: 'Pirata One', serif;
        font-size: 16px; color: var(--gold); text-align: center;
        text-shadow: 0 1px 0 rgba(0,0,0,0.6); }
      .leaderboard-row.is-top-3 .lb-rank { font-size: 22px; color: var(--chain); }
      .lb-player { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
      .lb-player-name { font-size: 14px; font-weight: 600; color: var(--parchment);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .lb-player-handle { font-size: 11px; color: var(--parchment-dim);
        letter-spacing: 0.04em; white-space: nowrap; overflow: hidden;
        text-overflow: ellipsis; }
      .lb-games, .lb-wave { font-family: 'Pirata One', serif;
        font-size: 17px; color: var(--parchment); text-align: right;
        font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(0,0,0,0.6); }
      .lb-wave { color: var(--chain); }
      .leaderboard-empty, .leaderboard-loading, .leaderboard-error {
        padding: 40px 20px; text-align: center;
        font-family: 'Outfit', sans-serif; font-size: 14px; color: var(--parchment-dim); }
      .leaderboard-empty-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.6; }
      .leaderboard-error { color: #e08a80; }
      @media (max-width: 520px) {
        .leaderboard-row { grid-template-columns: 36px 1fr 56px 72px;
          gap: 8px; padding: 8px 10px; }
        .lb-games, .lb-wave { font-size: 14px; }
      }

      /* === Player setup === */
      .skin-preview-wrap { display: flex; align-items: center; justify-content: center;
        gap: 8px; margin: 6px auto 6px; }
      .skin-preview-canvas {
        background:
          radial-gradient(ellipse at center bottom, rgba(210,255,3,0.12) 0%, rgba(6,9,4,0) 62%),
          linear-gradient(180deg, rgba(26,38,16,0.5) 0%, rgba(6,9,4,0.75) 100%);
        border: 1px solid var(--chain-dim);
        box-shadow: inset 0 0 28px rgba(0,0,0,0.55); display: block; }
      .skin-arrow { width: 36px; height: 60px;
        background: rgba(9,13,7,0.6); border: 1px solid var(--chain-dim);
        color: var(--parchment); font-family: 'Pirata One', serif;
        font-size: 24px; line-height: 1; cursor: pointer;
        transition: background 0.18s, transform 0.12s, border-color 0.18s, color 0.18s; }
      .skin-arrow:hover { background: rgba(24,36,14,0.7);
        border-color: var(--chain); color: var(--chain);
        transform: translateY(-2px); }
      .skin-arrow:active { transform: translateY(0); }
      .skin-info { text-align: center; margin: 0 0 16px; }
      .skin-info-sub { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 11px; letter-spacing: 0.24em; color: var(--parchment-dim);
        text-transform: uppercase; margin-bottom: 4px; }
      .skin-info-name { font-family: 'Pirata One', serif;
        font-size: 20px; letter-spacing: 0.12em;
        color: var(--parchment); text-shadow: 0 1px 0 rgba(0,0,0,0.6); }

      /* ===== Character stats / signature-power panel on the select screen ===== */
      .char-stats { margin: 0 0 16px; padding: 12px 14px;
        background: linear-gradient(180deg, rgba(13,20,9,0.7), rgba(6,9,4,0.55));
        border: 1px solid var(--chain-dim);
        box-shadow: inset 0 1px 0 rgba(220,255,120,0.08), 0 2px 10px rgba(0,0,0,0.4);
        border-radius: 3px; }
      .char-power-label { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 10px; letter-spacing: 0.22em; color: var(--chain-deep);
        text-transform: uppercase; margin-bottom: 5px; }
      .char-power-name { font-family: 'Pirata One', serif;
        font-size: 17px; letter-spacing: 0.06em;
        color: var(--chain); text-shadow: 0 0 10px rgba(210,255,3,0.35);
        margin-bottom: 3px; }
      .char-power-desc { font-size: 11px; line-height: 1.45; color: var(--parchment-dim);
        margin-bottom: 10px; }
      .char-tilt { display: flex; gap: 8px; justify-content: center;
        border-top: 1px solid rgba(210,255,3,0.16); padding-top: 9px; }
      .char-tilt-row { font-family: 'Outfit', sans-serif; font-size: 11px;
        font-weight: 700; letter-spacing: 0.03em; padding: 3px 9px; border-radius: 2px;
        white-space: nowrap; }
      .char-tilt-up   { color: #dff75e; background: rgba(210,255,3,0.1);
        border: 1px solid rgba(210,255,3,0.35); }
      .char-tilt-down { color: #f0a890; background: rgba(200,80,50,0.12);
        border: 1px solid rgba(220,110,80,0.3); }

      .username-input { display: block; width: 100%; box-sizing: border-box;
        margin: 4px 0 4px; padding: 12px 14px;
        background: rgba(6,9,4,0.65); border: 1px solid var(--chain-dim);
        color: var(--parchment); font-family: 'Outfit', sans-serif; font-size: 16px;
        letter-spacing: 0.04em; outline: none;
        transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; }
      .username-input:focus { border-color: var(--chain);
        background: rgba(15,23,10,0.7); box-shadow: 0 0 0 1px rgba(210,255,3,0.25); }
      .username-input::placeholder { color: rgba(242,236,216,0.35); }
      .username-error { min-height: 18px; margin-bottom: 14px;
        font-family: 'Outfit', sans-serif; font-size: 12px;
        color: #e08a80; text-align: center; }
      .setup-x-hint { padding: 13px 18px; margin-bottom: 16px;
        background: rgba(6,9,4,0.45); border: 1px solid rgba(210,255,3,0.16);
        font-family: 'Outfit', sans-serif; font-size: 12px; line-height: 1.55;
        color: var(--parchment-dim); text-align: left; }
      .setup-x-hint strong { color: var(--chain); font-weight: 600; }
      .setup-x-mark { font-weight: 800; color: var(--parchment); }
      .setup-buttons { display: flex; flex-direction: column; gap: 10px; }
      .setup-btn { padding: 13px 22px; cursor: pointer;
        font-family: 'Outfit', sans-serif; font-weight: 800;
        font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
        transition: transform 0.15s, filter 0.2s, background 0.2s, border-color 0.2s; }
      .setup-btn-x {
        background: linear-gradient(180deg, #35502a 0%, #23361c 60%, #152410 100%);
        border: 1px solid rgba(140,190,100,0.5); color: var(--parchment);
        text-shadow: 0 1px 0 rgba(0,0,0,0.5);
        box-shadow: 0 0 0 1px var(--ink-edge), 0 4px 16px rgba(20,40,12,0.5); }
      .setup-btn-x:hover { filter: brightness(1.15); transform: translateY(-2px); }
      .setup-btn-continue {
        background: linear-gradient(180deg, #e6ff5c 0%, #d2ff03 55%, #8fb400 100%);
        border: 1px solid var(--chain-deep); color: var(--ink);
        text-shadow: 0 1px 0 rgba(255,255,255,0.25);
        box-shadow: 0 0 0 1px var(--ink-edge), inset 0 1px 0 rgba(255,255,255,0.45),
                    0 5px 14px rgba(90,120,0,0.45); }
      .setup-btn-continue:hover { filter: brightness(1.06); transform: translateY(-2px); }
      .setup-btn-sub { font-size: 10px; opacity: 0.75; margin-left: 4px;
        letter-spacing: 0.18em; text-transform: none; font-style: italic; }
      .setup-or { text-align: center; font-family: 'IM Fell English', serif;
        font-style: italic; font-size: 11px; letter-spacing: 0.3em;
        color: rgba(242,236,216,0.4); margin: 2px 0; }

      /* === Auth badge === */
      .auth-badge { display: none; position: relative; z-index: 3;
        margin-top: 14px; padding: 8px 16px;
        align-items: center; gap: 10px;
        background: rgba(9,13,7,0.6); border: 1px solid var(--chain-dim);
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        font-family: 'Outfit', sans-serif; }
      .auth-badge.show { display: inline-flex; }
      .auth-badge-label { font-family: 'IM Fell English', serif; font-style: italic;
        font-size: 10px; letter-spacing: 0.26em;
        text-transform: uppercase; color: var(--parchment-dim); }
      .auth-badge-name { font-size: 14px; font-weight: 600; color: var(--parchment);
        letter-spacing: 0.05em; }
      .auth-badge-verified { font-size: 10px; font-weight: 700;
        padding: 2px 6px; background: rgba(210,255,3,0.16);
        border: 1px solid rgba(210,255,3,0.5); color: var(--chain);
        letter-spacing: 0.1em; }
      .auth-badge-change { margin-left: 4px; background: none; border: none;
        font-family: 'Outfit', sans-serif; font-size: 11px;
        color: rgba(242,236,216,0.45); cursor: pointer; padding: 2px 6px;
        transition: color 0.15s; }
      .auth-badge-change:hover { color: var(--parchment); }

      .lb-verified-mark { display: inline-block; margin-left: 4px;
        font-size: 10px; font-weight: 700; padding: 1px 5px;
        background: rgba(210,255,3,0.16); border: 1px solid rgba(210,255,3,0.5);
        color: var(--chain); vertical-align: middle; letter-spacing: 0.08em; }

      /* How-to-play grid inside a modal */
      .menu-modal-controls { display: grid !important; grid-template-columns: repeat(2, auto);
        gap: 8px 24px; margin-bottom: 24px; text-align: left;
        font-size: 13px; color: var(--parchment);
        background: rgba(6,9,4,0.4); padding: 16px 20px;
        border: 1px solid rgba(210,255,3,0.18);
        backdrop-filter: none; -webkit-backdrop-filter: none;
        box-shadow: none; justify-content: center; }

      .setting-music-group .music-mini-row { display: flex; gap: 8px; margin-top: 6px; }

      /* Drifting oak leaves over the title screen — gold, with every fourth
         leaf touched by the chain (a little Sherwood magic). */
      .leaf-bg { position: absolute; inset: 0; pointer-events: none;
        z-index: 2; overflow: hidden; }
      .leaf-bg span { position: absolute; top: 0; left: 0; width: 14px; height: 9px;
        background: radial-gradient(ellipse, #e8c860 30%, #b8862a 100%);
        border-radius: 50% 0 50% 0; will-change: transform;
        box-shadow: 0 0 6px rgba(232,200,96,0.45); }
      .leaf-bg span:nth-child(4n) {
        background: radial-gradient(ellipse, #e6ff5c 30%, #9dbf00 100%);
        box-shadow: 0 0 8px rgba(210,255,3,0.55); }

      /* Quality floor */
      @media (max-width: 900px) {
        .hud .top-left { width: 250px; }
        .title-name { font-size: 68px; }
        .banner .title { font-size: 62px; }
        .lu-cards { gap: 14px; }
        .lu-card { width: 178px; height: 300px; padding: 26px 12px 12px; }
      }
      button:focus-visible, input:focus-visible {
        outline: 2px solid var(--chain); outline-offset: 2px; }
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { animation-duration: 0.01ms !important;
          transition-duration: 0.01ms !important; }
      }

      /* ===== SETUP MODAL — height-adaptive: fits without scrolling =====
         The muster roll is the tallest modal in the game; everything here is
         scoped to it alone. The preview canvas breathes with the viewport
         (clamp on vh) and the copy tightens in steps on shorter screens, so
         the card stays inside the window from 1440p monitors down to a
         768-tall laptop with browser chrome. */
      #playerSetupModal .menu-modal-card { padding: clamp(14px, 2.6vh, 26px) 34px;
        max-height: 96vh; }
      #playerSetupModal .menu-modal-title { margin-bottom: clamp(6px, 1.4vh, 14px); }
      #playerSetupModal .skin-preview-canvas { width: auto;
        height: clamp(150px, 30vh, 280px); aspect-ratio: 6 / 7; }
      #playerSetupModal .skin-info { margin-bottom: clamp(6px, 1.2vh, 12px); }
      #playerSetupModal .char-stats { margin-bottom: clamp(6px, 1.2vh, 12px);
        padding: 10px 14px; }
      #playerSetupModal .char-power-desc { margin-bottom: 7px; }
      #playerSetupModal .username-error { margin-bottom: clamp(4px, 1vh, 10px); }
      #playerSetupModal .setup-x-hint { margin-bottom: clamp(6px, 1.2vh, 12px);
        padding: 10px 14px; }
      #playerSetupModal .setup-buttons { gap: 8px; }

      @media (max-height: 880px) {
        #playerSetupModal .menu-modal-title { font-size: 30px; }
        #playerSetupModal .skin-info-name { font-size: 18px; }
        #playerSetupModal .setup-btn { padding: 11px 20px; }
        #playerSetupModal .setup-x-hint { font-size: 11.5px; line-height: 1.45; }
      }
      @media (max-height: 790px) {
        #playerSetupModal .menu-modal-title { font-size: 26px; }
        #playerSetupModal .menu-modal-eyebrow { margin-bottom: 4px; }
        #playerSetupModal .setup-x-hint { display: none; }
        #playerSetupModal .char-power-desc { font-size: 10.5px; margin-bottom: 6px; }
      }
      @media (max-height: 710px) {
        #playerSetupModal .setup-buttons { flex-direction: row; }
        #playerSetupModal .setup-buttons .setup-btn { flex: 1 1 0;
          padding: 11px 8px; font-size: 11px; letter-spacing: 0.16em; }
        #playerSetupModal .setup-or { display: none; }
        #playerSetupModal .username-input { padding: 10px 12px; font-size: 15px; }
      }