/* ============================================================
   162-0: PERFECT SEASON — styles
   Visual language: Era Ball-derived void/scoreboard aesthetic.
   Near-black background, animated starfield, single monospace
   type family in caps, muted gold accent, flat thin-border
   components, quality-tier color coding with a shimmer sweep
   on top-tier cards.
   ============================================================ */

:root {
  /* ── Backgrounds ─────────────────────────── */
  --void:   #0a0a0a;   /* page/screen bg */
  --void-2: #131313;   /* card bg */
  --panel:  #141414;   /* panel/aside bg */
  --panel-border:       rgba(255, 255, 255, 0.10);
  --panel-border-hover: rgba(201, 164, 85, 0.55);

  
/* RAM extra disco spots + sequin layers — injected by applySettings */
@keyframes ram-spot-amber { 0%{left:60%;top:80%} 20%{left:85%;top:55%} 40%{left:20%;top:20%} 60%{left:40%;top:30%} 80%{left:70%;top:75%} 100%{left:60%;top:80%} }
@keyframes ram-spot-teal  { 0%{left:10%;top:80%} 20%{left:50%;top:20%} 40%{left:80%;top:65%} 60%{left:15%;top:10%} 80%{left:45%;top:90%} 100%{left:10%;top:80%} }
@keyframes ram-spot-red   { 0%{left:90%;top:70%} 20%{left:30%;top:85%} 40%{left:55%;top:10%} 60%{left:85%;top:40%} 80%{left:10%;top:50%} 100%{left:90%;top:70%} }

.ram-seq-el-1 {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1px 1px at 51% 55%, rgba(255,220,160,0.87) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 63%, rgba(255,245,215,0.88) 0%, transparent 100%),
    radial-gradient(2px 2px at 38% 19%, rgba(255,220,160,0.95) 0%, transparent 100%),
    radial-gradient(2px 2px at 70% 92%, rgba(255,245,215,0.83) 0%, transparent 100%),
    radial-gradient(2px 2px at 95% 11%, rgba(210,245,255,0.83) 0%, transparent 100%),
    radial-gradient(1px 1px at 73% 14%, rgba(215,235,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 72%, rgba(255,220,160,0.82) 0%, transparent 100%),
    radial-gradient(1px 1px at 72%  3%, rgba(255,210,245,0.93) 0%, transparent 100%),
    radial-gradient(1px 1px at 87% 82%, rgba(255,210,245,0.96) 0%, transparent 100%),
    radial-gradient(1px 1px at 44% 33%, rgba(210,245,255,0.97) 0%, transparent 100%),
    radial-gradient(1px 1px at 26% 74%, rgba(255,245,215,0.95) 0%, transparent 100%),
    radial-gradient(1px 1px at 59% 13%, rgba(215,235,255,0.97) 0%, transparent 100%),
    radial-gradient(1px 1px at 64% 15%, rgba(215,235,255,0.93) 0%, transparent 100%),
    radial-gradient(2px 2px at 72% 44%, rgba(255,220,160,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 79% 72%, rgba(255,210,245,0.77) 0%, transparent 100%),
    radial-gradient(1px 1px at 51% 42%, rgba(215,235,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 25%  6%, rgba(210,245,255,0.82) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 13%, rgba(255,245,215,0.97) 0%, transparent 100%),
    radial-gradient(2px 2px at  6% 12%, rgba(255,220,160,0.92) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 69%, rgba(255,245,215,0.96) 0%, transparent 100%);
  animation: seq-flash-a 3.8s ease-in-out infinite;
}
.ram-seq-el-2 {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1px 1px at 20% 60%, rgba(255,245,215,0.93) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 46%, rgba(255,255,255,0.88) 0%, transparent 100%),
    radial-gradient(1px 1px at 12% 96%, rgba(255,255,255,0.91) 0%, transparent 100%),
    radial-gradient(1px 1px at 84% 28%, rgba(215,235,255,0.96) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 24%, rgba(215,235,255,0.84) 0%, transparent 100%),
    radial-gradient(1px 1px at 54% 28%, rgba(255,210,245,0.89) 0%, transparent 100%),
    radial-gradient(2px 2px at 50% 22%, rgba(210,245,255,0.78) 0%, transparent 100%),
    radial-gradient(1px 1px at  2% 79%, rgba(255,220,160,0.79) 0%, transparent 100%),
    radial-gradient(2px 2px at 23%  5%, rgba(255,245,215,0.99) 0%, transparent 100%),
    radial-gradient(1px 1px at 83% 51%, rgba(255,220,160,0.94) 0%, transparent 100%),
    radial-gradient(1px 1px at  8% 79%, rgba(255,220,160,0.94) 0%, transparent 100%),
    radial-gradient(1px 1px at 66% 93%, rgba(255,220,160,0.83) 0%, transparent 100%),
    radial-gradient(1px 1px at 89% 45%, rgba(215,235,255,1.00) 0%, transparent 100%),
    radial-gradient(2px 2px at 53%  9%, rgba(215,235,255,0.91) 0%, transparent 100%),
    radial-gradient(2px 2px at 34% 32%, rgba(210,245,255,0.93) 0%, transparent 100%),
    radial-gradient(2px 2px at 67% 65%, rgba(215,235,255,0.79) 0%, transparent 100%),
    radial-gradient(2px 2px at 88% 76%, rgba(255,245,215,0.76) 0%, transparent 100%),
    radial-gradient(1px 1px at 37% 92%, rgba(210,245,255,0.76) 0%, transparent 100%),
    radial-gradient(2px 2px at 78% 30%, rgba(255,220,160,0.91) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 97%, rgba(215,235,255,0.83) 0%, transparent 100%);
  animation: seq-flash-b 5.3s ease-in-out infinite;
  animation-delay: -2.1s;
}
.ram-seq-el-3 {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1px 1px at  7% 28%, rgba(255,255,255,0.79) 0%, transparent 100%),
    radial-gradient(1px 1px at 36%  3%, rgba(210,245,255,0.79) 0%, transparent 100%),
    radial-gradient(1px 1px at  4% 58%, rgba(255,210,245,0.81) 0%, transparent 100%),
    radial-gradient(1px 1px at 84% 17%, rgba(210,245,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 64% 39%, rgba(255,255,255,0.93) 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 63%, rgba(255,245,215,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 16% 74%, rgba(210,245,255,0.91) 0%, transparent 100%),
    radial-gradient(1px 1px at 43% 17%, rgba(255,220,160,0.91) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 97%, rgba(210,245,255,0.84) 0%, transparent 100%),
    radial-gradient(1px 1px at 23% 62%, rgba(210,245,255,0.82) 0%, transparent 100%),
    radial-gradient(1px 1px at 29% 15%, rgba(215,235,255,0.97) 0%, transparent 100%),
    radial-gradient(1px 1px at 73% 48%, rgba(215,235,255,0.93) 0%, transparent 100%),
    radial-gradient(2px 2px at 46% 67%, rgba(255,245,215,0.88) 0%, transparent 100%),
    radial-gradient(1px 1px at 41% 92%, rgba(255,255,255,0.99) 0%, transparent 100%),
    radial-gradient(1px 1px at 42% 17%, rgba(255,255,255,0.94) 0%, transparent 100%),
    radial-gradient(1px 1px at 84% 48%, rgba(255,245,215,0.76) 0%, transparent 100%),
    radial-gradient(1px 1px at 71% 88%, rgba(255,245,215,0.87) 0%, transparent 100%),
    radial-gradient(2px 2px at 63% 30%, rgba(255,245,215,0.88) 0%, transparent 100%),
    radial-gradient(2px 2px at 59% 10%, rgba(210,245,255,0.82) 0%, transparent 100%),
    radial-gradient(1px 1px at 33% 48%, rgba(255,255,255,0.86) 0%, transparent 100%);
  animation: seq-flash-c 4.6s ease-in-out infinite;
  animation-delay: -1.4s;
}
@keyframes seq-flash-a { 0%{opacity:0.06} 50%{opacity:1.00} 100%{opacity:0.06} }
@keyframes seq-flash-b { 0%{opacity:0.55} 50%{opacity:0.06} 100%{opacity:0.55} }
@keyframes seq-flash-c { 0%{opacity:0.10} 50%{opacity:0.92} 100%{opacity:0.10} }


/* HUD radar sweep line — injected by JS, rotates from center */
.hud-sweep-el {
  position: fixed;
  top: 50%; left: 50%;
  width: 55vw; height: 1px;
  transform-origin: 0% 50%;
  pointer-events: none; z-index: 1;
  background: linear-gradient(to right,
    rgba(255,160,0,0.70) 0%,
    rgba(0,255,140,0.20) 55%,
    transparent 100%
  );
  box-shadow: 0 0 4px rgba(255,160,0,0.40);
  animation: hud-radar 5s linear infinite;
}
/* Trailing green wake behind the sweep */
.hud-sweep-trail {
  position: fixed;
  top: 50%; left: 50%;
  width: 55vw; height: 1px;
  transform-origin: 0% 50%;
  pointer-events: none; z-index: 1;
  background: linear-gradient(to right,
    rgba(0,200,100,0.08) 0%,
    transparent 80%
  );
  animation: hud-radar 5s linear infinite;
  animation-delay: -0.4s; /* slightly behind the main line */
}
@keyframes hud-radar { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }


/* DNB ambient elements — injected by JS */
/* DNB ambient elements — injected by JS */
/* DNB: two bottom-corner speaker glows pulsing alternately */
.dnb-bass-el {
  /* Left speaker — amber, hits on the beat */
  position: fixed; bottom: 0; left: 0;
  width: 55%; height: 55%;
  pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 0% 100%,
    rgba(200,120,20,0.35) 0%,
    rgba(200,120,20,0.10) 40%,
    transparent 70%
  );
  animation: dnb-bass-pulse 3.8s ease-in-out infinite;
}
.dnb-sub-el {
  /* Right speaker — teal, offset half a beat */
  position: fixed; bottom: 0; right: 0;
  width: 55%; height: 55%;
  pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 100% 100%,
    rgba(0,160,140,0.28) 0%,
    rgba(0,160,140,0.08) 40%,
    transparent 70%
  );
  animation: dnb-sub-pulse 3.8s ease-in-out infinite;
  animation-delay: 1.9s;
}
.dnb-warmth-el {
  /* Centre warmth — very subtle amber floor */
  position: fixed; bottom: 0; left: 10%; right: 10%;
  height: 30%;
  pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(120,55,10,0.15) 0%,
    transparent 80%
  );
  animation: dnb-bass-pulse 5.5s ease-in-out infinite;
  animation-delay: 0.8s;
}
@keyframes dnb-bass-pulse { 0%{opacity:0.35} 50%{opacity:1.00} 100%{opacity:0.35} }
@keyframes dnb-sub-pulse  { 0%{opacity:0.20} 50%{opacity:0.90} 100%{opacity:0.20} }

/* HUD static grid lines — injected by JS */
.hud-grid-el {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    linear-gradient(rgba(0,200,100,0.06) 1px, transparent 1px) center/100% 8vmin,
    linear-gradient(90deg, rgba(0,200,100,0.06) 1px, transparent 1px) center/8vmin 100%;
}




/* ══════════════════════════════════════════════════════════════
   INDUSTRIAL STYLE
   Warning amber TL + red-orange TR caution lights pulsing at
   different speeds. Floor machinery glow. Static diagonal
   stripe texture. Oswald all-caps. Hard square borders.




/* ── Base palette ────────────────────────── */
  --gold:       #c9a455;
  --gold-bright:#e3c272;
  --white:      #f2f0ea;
  --gray:       #8c8c8c;
  --gray-dim:   #565656;
  --green:      #5fbf7a;
  --red:        #c0524a;
  --blue:       #5a8fc9;
  --purple:     #a07fd1;

  /* ── Tier colors (swap these for accessibility palettes) ── */
  --tier-elite:   var(--gold);     /* gold   — top tier */
  --tier-great:   var(--purple);   /* purple — second tier */
  --tier-good:    var(--green);    /* green  — third tier */
  --tier-average: #7a9ab0;         /* blue-grey placeholder — WAR 5th tier (pending) */

  /* ── Semantic aliases (swap these for sport skins / styles) ── */
  --accent:         var(--gold);   /* primary action color: buttons, active states */
  --accent-rgb:     201, 164, 85;  /* RGB channels of --accent for rgba() usage */
  --text-primary:   var(--white);
  --text-secondary: var(--gray);
  --bg-card:        var(--void-2);
  --bg-panel:       var(--panel);

  /* ── RGB channels for rgba() usage ─────────
     Usage: rgba(var(--gold-rgb), 0.3)
     Allows opacity variants while keeping tier colors swappable.
     ──────────────────────────────────────────────────────────── */
  --gold-rgb:   201, 164, 85;
  --purple-rgb: 160, 127, 209;
  --green-rgb:  95, 191, 122;
  --red-rgb:    192, 82, 74;
  --blue-rgb:   90, 143, 201;

  /* ── Typography ──────────────────────────── */
  --font: "IBM Plex Mono", "Courier New", monospace;
}

   All scoped to [data-style="industrial"].
══════════════════════════════════════════════════════════════ */

[data-style="industrial"] {
  --tier-elite:  #ddb800;
  --tier-great:  #c04028;
  --tier-good:   #888888;
  --tier-average: #6c6c6c;
  --gold:        #ddb800;
  --gold-rgb:    221, 184, 0;
  --gold-bright: #f0cc00;
  --purple-rgb:  192, 64, 40;
  --green-rgb:   136, 136, 136;
  --font:        'Oswald', 'IBM Plex Mono', monospace;
  --void:        #0c0c0c;
  --void-2:      #141414;
}

[data-style="industrial"] body {
  background:
    repeating-linear-gradient(-52deg,
      transparent 0px, transparent 18px,
      rgba(220,180,0,0.05) 18px, rgba(220,180,0,0.05) 19px
    ),
    #0c0c0c;
}
[data-style="industrial"] body::before { display: none; }
[data-style="industrial"] body::after  { display: none; }

/* ─ Warning light A: top-left, amber, large, 2.4s ─ */
.ind-light-a {
  position: fixed; top: -55%; left: -40%; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 0% 0%,
    rgba(255,150,0,0.55) 0%, rgba(220,120,0,0.20) 25%,
    rgba(200,100,0,0.06) 50%, transparent 72%);
  animation: ind-light-a 2.4s ease-in-out infinite;
}
@keyframes ind-light-a { 0%{opacity:0.12} 50%{opacity:1.00} 100%{opacity:0.12} }

/* ─ Warning light B: top-right, red-orange, smaller, 1.7s ─ */
.ind-light-b {
  position: fixed; top: -40%; right: -50%; width: 80%; height: 80%;
  pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 100% 0%,
    rgba(220,60,0,0.48) 0%, rgba(200,40,0,0.16) 25%,
    rgba(180,20,0,0.04) 50%, transparent 70%);
  animation: ind-light-b 1.7s ease-in-out infinite;
  animation-delay: -0.5s;
}
@keyframes ind-light-b { 0%{opacity:0.10} 50%{opacity:1.00} 100%{opacity:0.10} }

/* ─ Floor machinery glow: slow 5s breathe ─ */
.ind-floor {
  position: fixed; bottom: -30%; left: -20%; right: -20%; height: 55%;
  pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(180,80,0,0.28) 0%, rgba(140,50,0,0.10) 40%, transparent 70%);
  animation: ind-floor 5s ease-in-out infinite;
  animation-delay: -1.8s;
}
@keyframes ind-floor {
  0%{transform:scaleX(1.00) scaleY(1.00);opacity:0.35}
  50%{transform:scaleX(1.04) scaleY(1.08);opacity:1.00}
  100%{transform:scaleX(1.00) scaleY(1.00);opacity:0.35}
}

/* ─ Typography ─ */
[data-style="industrial"] .player-name,
[data-style="industrial"] .diamond-pos-name,
[data-style="industrial"] .manager-name,
[data-style="industrial"] .brand,
[data-style="industrial"] .modal-title,
[data-style="industrial"] .section-label,
[data-style="industrial"] .lineup-group-name,
[data-style="industrial"] .lineup-card-label {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}

/* ─ Industrial: card tier treatments ─ */
[data-style="industrial"] .player-card.tier-elite,
[data-style="industrial"] .expanded-draft-card.tier-elite {
  border-color: rgba(221,184,0,0.75);
  background-color: rgba(221,184,0,0.06);
  background-image: linear-gradient(160deg,
    rgba(221,184,0,0.12) 0%, rgba(221,184,0,0.04) 50%, transparent 100%);
  box-shadow:
    0 0 18px rgba(221,184,0,0.22),
    inset 0 2px 0 rgba(221,184,0,0.40),
    inset 0 0 0 1px rgba(221,184,0,0.10);
  border-radius: 0;
}
[data-style="industrial"] .player-card.tier-great,
[data-style="industrial"] .expanded-draft-card.tier-great {
  border-color: rgba(192,64,40,0.62);
  background-color: rgba(192,64,40,0.05);
  background-image: none;
  box-shadow: inset 0 2px 0 rgba(192,64,40,0.28);
  border-radius: 0;
}
[data-style="industrial"] .player-card.tier-good,
[data-style="industrial"] .expanded-draft-card.tier-good {
  border-color: rgba(136,136,136,0.40);
  background-image: none;
  border-radius: 0;
}
[data-style="industrial"] .player-card.tier-average,
[data-style="industrial"] .expanded-draft-card.tier-average {
  border-color: rgba(108,108,108,0.40);
  background-image: none;
  border-radius: 0;
}
[data-style="industrial"] .slot-box.tier-elite,
[data-style="industrial"] .slot-filled.tier-elite {
  border-color: rgba(221,184,0,0.55);
  background-color: rgba(221,184,0,0.05);
  box-shadow: 0 0 10px rgba(221,184,0,0.14);
  border-radius: 0;
}
[data-style="industrial"] .slot-box.tier-great,
[data-style="industrial"] .slot-filled.tier-great {
  border-color: rgba(192,64,40,0.45);
  background-color: rgba(192,64,40,0.04);
  border-radius: 0;
}
[data-style="industrial"] .slot-box.tier-good,
[data-style="industrial"] .slot-filled.tier-good {
  border-color: rgba(136,136,136,0.30);
  border-radius: 0;
}
[data-style="industrial"] .slot-box.tier-average,
[data-style="industrial"] .slot-filled.tier-average {
  border-color: rgba(108,108,108,0.30);
  border-radius: 0;
}
[data-style="industrial"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average) { border-radius: 0; }
[data-style="industrial"] .diamond-pos-card.tier-elite {
  border-color: rgba(221,184,0,0.55); background-color: rgba(221,184,0,0.05);
  box-shadow: 0 0 8px rgba(221,184,0,0.14); border-radius: 0;
}
[data-style="industrial"] .diamond-pos-card.tier-great {
  border-color: rgba(192,64,40,0.45); border-radius: 0;
}
[data-style="industrial"] .diamond-pos-card.tier-good { border-radius: 0; }
[data-style="industrial"] .diamond-pos-card.tier-average { border-radius: 0; }
[data-style="industrial"] .lineup-card { border-radius: 0; border-top: 2px solid rgba(221,184,0,0.25); }
[data-style="industrial"] .void-panel  { border-radius: 0; border-top: 2px solid rgba(221,184,0,0.20); }
[data-style="industrial"] .modal-panel { border-radius: 0; border-top: 2px solid rgba(221,184,0,0.35); }
[data-style="industrial"] .btn-primary {
  background: rgba(221,184,0,0.12); color: #ddb800;
  border: 1px solid rgba(221,184,0,0.45); border-radius: 0;
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.12em;
}
[data-style="industrial"] .btn-outline { border-radius: 0; }
[data-style="industrial"] .player-pos,
[data-style="industrial"] .slot-box-pos {
  background: transparent; color: rgba(221,184,0,0.65);
  border-color: rgba(221,184,0,0.28); border-radius: 0;
}

/* ─ Industrial: border pulse on elite cards (no shimmer sweep) ─ */
[data-style="industrial"] .shimmer-overlay { display: none; }
[data-style="industrial"] .player-card.tier-elite,
[data-style="industrial"] .expanded-draft-card.tier-elite {
  animation: ind-border-pulse 2.4s ease-in-out infinite;
}
@keyframes ind-border-pulse {
  0%   { box-shadow: inset 0 2px 0 rgba(221,184,0,0.35), 0 0  6px rgba(221,184,0,0.12); border-color: rgba(221,184,0,0.55); }
  50%  { box-shadow: inset 0 2px 0 rgba(221,184,0,0.55), 0 0 18px rgba(221,184,0,0.28); border-color: rgba(221,184,0,0.85); }
  100% { box-shadow: inset 0 2px 0 rgba(221,184,0,0.35), 0 0  6px rgba(221,184,0,0.12); border-color: rgba(221,184,0,0.55); }
}




/* ══════════════════════════════════════════════════════════════
   VENETIAN GOTHIC STYLE
   Deep canal void #03090e. Aged gold elite, crimson great,
   teal canal good. Water ripple bottom, candlelight top.
   Cinzel all-caps serif.
══════════════════════════════════════════════════════════════ */

[data-style="venetian"] {
  --tier-elite:  #c8960e;
  --tier-great:  #b03020;
  --tier-good:   #008090;
  --tier-average: #336c73;
  --gold:        #c8960e;
  --gold-rgb:    200, 150, 14;
  --gold-bright: #e0aa18;
  --purple-rgb:  176, 48, 32;
  --green-rgb:   0, 128, 144;
  --font:        'Cinzel', serif;
  --void:        #03090e;
  --void-2:      #060f16;
}

[data-style="venetian"] body {
  background: #03090e;
}
/* Water ripple — bottom, slow 8s alternate */
[data-style="venetian"] body::before {
  content: ''; position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
  animation: none;
  background:
    radial-gradient(ellipse 200% 70% at 50% 120%, rgba(0,90,115,0.38) 0%, transparent 55%),
    radial-gradient(ellipse 140% 45% at 15% 115%, rgba(0,70,95,0.26) 0%, transparent 50%),
    radial-gradient(ellipse 140% 45% at 85% 115%, rgba(0,70,95,0.26) 0%, transparent 50%);
}
/* Candlelight top corners */
[data-style="venetian"] body::after {
  content: ''; position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
  animation: venetian-candle 6s ease-in-out infinite alternate;
  background:
    radial-gradient(ellipse 60% 50% at 0%   0%, rgba(160,100,10,0.18) 0%, transparent 100%),
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(160,100,10,0.18) 0%, transparent 100%),
    radial-gradient(ellipse 45% 35% at 50%  0%, rgba(120,20,10,0.12)  0%, transparent 100%);
}
@keyframes venetian-candle { 0%{opacity:0.50} 100%{opacity:1.00} }

[data-style="venetian"] .player-name,
[data-style="venetian"] .diamond-pos-name,
[data-style="venetian"] .manager-name,
[data-style="venetian"] .brand,
[data-style="venetian"] .modal-title,
[data-style="venetian"] .section-label,
[data-style="venetian"] .lineup-group-name,
[data-style="venetian"] .lineup-card-label {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ─ Venetian Gothic: card tier treatments ─ */
[data-style="venetian"] .player-card.tier-elite,
[data-style="venetian"] .expanded-draft-card.tier-elite {
  border-color: rgba(200,150,14,0.62);
  background-color: rgba(200,150,14,0.05);
  background-image: linear-gradient(140deg,
    rgba(200,150,14,0.14) 0%, rgba(200,150,14,0.04) 50%, transparent 100%);
  box-shadow:
    0 0 20px rgba(200,150,14,0.14),
    inset 0 1px 0 rgba(200,150,14,0.38);
  border-radius: 0;
}
[data-style="venetian"] .player-card.tier-great,
[data-style="venetian"] .expanded-draft-card.tier-great {
  border-color: rgba(176,48,32,0.55);
  background-color: rgba(176,48,32,0.04);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(176,48,32,0.22);
  border-radius: 0;
}
[data-style="venetian"] .player-card.tier-good,
[data-style="venetian"] .expanded-draft-card.tier-good {
  border-color: rgba(0,128,144,0.42);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(0,128,144,0.16);
  border-radius: 0;
}
[data-style="venetian"] .player-card.tier-average,
[data-style="venetian"] .expanded-draft-card.tier-average {
  border-color: rgba(51,108,115,0.42);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(51,108,115,0.16);
  border-radius: 0;
}
[data-style="venetian"] .slot-box.tier-elite,
[data-style="venetian"] .slot-filled.tier-elite {
  border-color: rgba(200,150,14,0.45); background-color: rgba(200,150,14,0.04);
  box-shadow: 0 0 10px rgba(200,150,14,0.10); border-radius: 0;
}
[data-style="venetian"] .slot-box.tier-great,
[data-style="venetian"] .slot-filled.tier-great {
  border-color: rgba(176,48,32,0.38); border-radius: 0;
}
[data-style="venetian"] .slot-box.tier-good,
[data-style="venetian"] .slot-filled.tier-good {
  border-color: rgba(0,128,144,0.32); border-radius: 0;
}
[data-style="venetian"] .slot-box.tier-average,
[data-style="venetian"] .slot-filled.tier-average {
  border-color: rgba(51,108,115,0.32); border-radius: 0;
}
[data-style="venetian"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average) { border-radius: 0; }
[data-style="venetian"] .diamond-pos-card.tier-elite {
  border-color: rgba(200,150,14,0.48); background-color: rgba(200,150,14,0.04);
  box-shadow: 0 0 8px rgba(200,150,14,0.10); border-radius: 0;
}
[data-style="venetian"] .diamond-pos-card.tier-great { border-color: rgba(176,48,32,0.40); border-radius: 0; }
[data-style="venetian"] .diamond-pos-card.tier-good  { border-color: rgba(0,128,144,0.34); border-radius: 0; }
[data-style="venetian"] .lineup-card { border-radius: 0; border-top: 1px solid rgba(200,150,14,0.28); }
[data-style="venetian"] .void-panel  { border-radius: 0; border-top: 1px solid rgba(200,150,14,0.22); }
[data-style="venetian"] .modal-panel { border-radius: 0; border-top: 2px solid rgba(200,150,14,0.38); }
[data-style="venetian"] .btn-primary {
  background: rgba(200,150,14,0.10); color: #c8960e;
  border: 1px solid rgba(200,150,14,0.42); border-radius: 0;
  font-family: 'Cinzel', serif; text-transform: uppercase; letter-spacing: 0.08em;
}
[data-style="venetian"] .btn-outline { border-radius: 0; }
[data-style="venetian"] .player-pos,
[data-style="venetian"] .slot-box-pos {
  background: transparent; color: rgba(200,150,14,0.60);
  border-color: rgba(200,150,14,0.25); border-radius: 0;
}

/* ─ Venetian: candlelight flicker on elite cards ─ */
[data-style="venetian"] .shimmer-overlay::before {
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(ellipse at 30% 20%,
    rgba(200,130,10,0.18) 0%, rgba(200,100,5,0.06) 50%, transparent 80%);
  animation: ven-flicker 3.8s ease-in-out infinite;
  transform: none;
}
@keyframes ven-flicker {
  0%   { opacity: 0.50; }
  18%  { opacity: 1.00; }
  19%  { opacity: 0.70; }
  20%  { opacity: 1.00; }
  55%  { opacity: 0.80; }
  56%  { opacity: 0.40; }
  57%  { opacity: 0.90; }
  85%  { opacity: 1.00; }
  100% { opacity: 0.50; }
}




/* ══════════════════════════════════════════════════════════════
   BAROQUE ROME STYLE
   Deep warm void #0c0806. Gold leaf elite, burgundy great,
   cream marble good. Gold shimmer sweep across body.
   IM Fell English italic.
══════════════════════════════════════════════════════════════ */

[data-style="baroque"] {
  --tier-elite:  #e0c050;
  --tier-great:  #c84030;
  --tier-good:   #c8c0b0;
  --tier-average: #a09c95;
  --gold:        #e0c050;
  --gold-rgb:    224, 192, 80;
  --gold-bright: #f0d460;
  --purple-rgb:  200, 64, 48;
  --green-rgb:   200, 192, 176;
  --font:        'IM Fell English', serif;
  --void:        #0c0806;
  --void-2:      #161008;
}

[data-style="baroque"] body {
  background: #0c0806;
}
/* Warm radial ambience */
[data-style="baroque"] body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%,    rgba(160,120,15,0.16) 0%, transparent 100%),
    radial-gradient(ellipse 55% 38% at  0% 100%,  rgba(110,25,8,0.13)   0%, transparent 100%),
    radial-gradient(ellipse 55% 38% at 100% 100%, rgba(110,25,8,0.13)   0%, transparent 100%);
  animation: baroque-radial 7s ease-in-out infinite alternate;
}
@keyframes baroque-radial { 0%{opacity:0.55} 100%{opacity:1.00} }
/* Gold shimmer sweep */
[data-style="baroque"] body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(105deg,
    transparent 0%, transparent 30%,
    rgba(200,160,40,0.05) 40%, rgba(255,220,120,0.10) 50%,
    rgba(200,160,40,0.05) 60%, transparent 70%, transparent 100%
  );
  animation: baroque-sweep 9s ease-in-out infinite;
}
@keyframes baroque-sweep { 0%{transform:translateX(-120%)} 100%{transform:translateX(120%)} }

[data-style="baroque"] .player-name,
[data-style="baroque"] .diamond-pos-name,
[data-style="baroque"] .manager-name,
[data-style="baroque"] .brand,
[data-style="baroque"] .modal-title,
[data-style="baroque"] .section-label,
[data-style="baroque"] .lineup-group-name,
[data-style="baroque"] .lineup-card-label {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  letter-spacing: 0.02em;
}

/* ─ Baroque Rome: card tier treatments ─ */
[data-style="baroque"] .player-card.tier-elite,
[data-style="baroque"] .expanded-draft-card.tier-elite {
  border-color: rgba(224,192,80,0.58);
  border-top: 2px solid rgba(224,192,80,0.75);
  background-color: rgba(224,192,80,0.05);
  background-image: linear-gradient(160deg,
    rgba(224,192,80,0.13) 0%, rgba(224,192,80,0.04) 55%, transparent 100%);
  box-shadow: 0 0 22px rgba(224,192,80,0.12);
  border-radius: 0;
}
[data-style="baroque"] .player-card.tier-great,
[data-style="baroque"] .expanded-draft-card.tier-great {
  border-color: rgba(200,64,48,0.50);
  border-top: 2px solid rgba(200,64,48,0.65);
  background-color: rgba(200,64,48,0.04);
  background-image: none;
  border-radius: 0;
}
[data-style="baroque"] .player-card.tier-good,
[data-style="baroque"] .expanded-draft-card.tier-good {
  border-color: rgba(200,192,176,0.30);
  border-top: 2px solid rgba(200,192,176,0.42);
  background-image: none;
  border-radius: 0;
}
[data-style="baroque"] .player-card.tier-average,
[data-style="baroque"] .expanded-draft-card.tier-average {
  border-color: rgba(160,156,149,0.30);
  border-top: 2px solid rgba(160,156,149,0.42);
  background-image: none;
  border-radius: 0;
}
[data-style="baroque"] .slot-box.tier-elite,
[data-style="baroque"] .slot-filled.tier-elite {
  border-color: rgba(224,192,80,0.44); border-top: 1px solid rgba(224,192,80,0.60);
  background-color: rgba(224,192,80,0.04);
  box-shadow: 0 0 10px rgba(224,192,80,0.10); border-radius: 0;
}
[data-style="baroque"] .slot-box.tier-great,
[data-style="baroque"] .slot-filled.tier-great {
  border-color: rgba(200,64,48,0.38); border-top: 1px solid rgba(200,64,48,0.52); border-radius: 0;
}
[data-style="baroque"] .slot-box.tier-good,
[data-style="baroque"] .slot-filled.tier-good {
  border-color: rgba(200,192,176,0.24); border-top: 1px solid rgba(200,192,176,0.34); border-radius: 0;
}
[data-style="baroque"] .slot-box.tier-average,
[data-style="baroque"] .slot-filled.tier-average {
  border-color: rgba(160,156,149,0.24); border-top: 1px solid rgba(160,156,149,0.34); border-radius: 0;
}
[data-style="baroque"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average) { border-radius: 0; }
[data-style="baroque"] .diamond-pos-card.tier-elite {
  border-color: rgba(224,192,80,0.48); border-top: 1px solid rgba(224,192,80,0.65);
  background-color: rgba(224,192,80,0.04); box-shadow: 0 0 8px rgba(224,192,80,0.10); border-radius: 0;
}
[data-style="baroque"] .diamond-pos-card.tier-great {
  border-color: rgba(200,64,48,0.40); border-top: 1px solid rgba(200,64,48,0.55); border-radius: 0;
}
[data-style="baroque"] .diamond-pos-card.tier-good  { border-radius: 0; }
[data-style="baroque"] .lineup-card { border-radius: 0; border-top: 2px solid rgba(224,192,80,0.28); }
[data-style="baroque"] .void-panel  { border-radius: 0; border-top: 2px solid rgba(224,192,80,0.22); }
[data-style="baroque"] .modal-panel { border-radius: 0; border-top: 2px solid rgba(224,192,80,0.42); }
[data-style="baroque"] .btn-primary {
  background: rgba(224,192,80,0.10); color: #e0c050;
  border: 1px solid rgba(224,192,80,0.42); border-radius: 0;
  font-family: 'IM Fell English', serif; font-style: italic;
}
[data-style="baroque"] .btn-outline { border-radius: 0; }
[data-style="baroque"] .player-pos,
[data-style="baroque"] .slot-box-pos {
  background: transparent; color: rgba(224,192,80,0.60);
  border-color: rgba(224,192,80,0.25); border-radius: 0;
}

/* ─ Baroque: slow gold leaf sweep, 2× per cycle ─ */
[data-style="baroque"] .shimmer-overlay::before {
  top: 0; left: -180%; width: 60%; height: 100%;
  background: linear-gradient(70deg,
    transparent 0%, rgba(255,220,100,0.07) 35%,
    rgba(255,230,120,0.16) 50%,
    rgba(255,220,100,0.07) 65%, transparent 100%);
  animation: baroque-gold 8s ease-in-out infinite;
  animation-delay: var(--shimmer-offset, 0ms);
}
@keyframes baroque-gold {
  0%   { transform: translateX(0%);   opacity: 0; }
  5%   { opacity: 1; }
  30%  { transform: translateX(460%); opacity: 1; }
  35%  { opacity: 0; transform: translateX(460%); }
  36%  { transform: translateX(0%);   opacity: 0; }
  40%  { opacity: 1; }
  58%  { transform: translateX(460%); opacity: 1; }
  63%  { opacity: 0; }
  100% { transform: translateX(0%);   opacity: 0; }
}




/* ══════════════════════════════════════════════════════════════
   VHS / ANALOG STYLE
   Near-black base #0e0a10. Hot pink elite, cyan great,
   grey good. Scanlines, tracking bands, glitch tears,
   luminance drift, horizontal wobble, bottom static strip.
   VT323 CRT terminal font.
══════════════════════════════════════════════════════════════ */

[data-style="vhs"] {
  --tier-elite:  #ff50a0;
  --tier-great:  #50c8ff;
  --tier-good:   #c0c0c0;
  --tier-average: #999999;
  --gold:        #ff50a0;
  --gold-rgb:    255, 80, 160;
  --gold-bright: #ff70b8;
  --purple-rgb:  80, 200, 255;
  --green-rgb:   192, 192, 192;
  --font:        'VT323', 'Share Tech Mono', monospace;
  --void:        #0e0a10;
  --void-2:      #160e18;
}

[data-style="vhs"] body {
  background: #0e0a10;
}
/* Dense scanlines — always on */
/* VHS: game content sits above bg elements via stacking context */
[data-style="vhs"] body::before {
  content: ''; position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;
  animation: none;
  background: repeating-linear-gradient(0deg,
    transparent 0px, transparent 1px,
    rgba(0,0,0,0.40) 1px, rgba(0,0,0,0.40) 2px
  );
}
[data-style="vhs"] body::after { display: none; }

/* Horizontal wobble wrapper — contains colour bleed + luma drift */
.vhs-wobble {
  position: fixed; inset: -4px; pointer-events: none; z-index: 0;
  background:
    linear-gradient(to bottom,
      rgba(80,0,0,0.12) 0%, transparent 12%,
      transparent 88%, rgba(0,0,80,0.10) 100%
    ),
    #0e0a10;
  animation: vhs-h-wobble 3.1s ease-in-out infinite;
}
@keyframes vhs-h-wobble {
  0%  {transform:translateX(0px)}   17%{transform:translateX(-1.5px)}
  34% {transform:translateX(1px)}   51%{transform:translateX(-2px)}
  68% {transform:translateX(0.5px)} 85%{transform:translateX(-1px)}
  100%{transform:translateX(0px)}
}

/* Luminance drift */
.vhs-luma {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(to bottom,
    transparent 0%, rgba(255,255,255,0.04) 30%,
    rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.04) 70%,
    transparent 100%
  );
  animation: vhs-luma-drift 8s linear infinite;
}
@keyframes vhs-luma-drift { from{transform:translateY(-100%)} to{transform:translateY(100%)} }

/* Scanline tear 1 */
.vhs-tear-1 {
  position: fixed; left: 0; right: 0; height: 14px;
  pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(0deg,
    transparent 0px, transparent 2px,
    rgba(0,0,0,0.40) 2px, rgba(0,0,0,0.40) 3px
  );
  animation: vhs-tear-pos-1 11s linear infinite, vhs-tear-shift-1 11s linear infinite;
}
@keyframes vhs-tear-pos-1 { from{top:-5%} to{top:105%} }
@keyframes vhs-tear-shift-1 {
  0%,24%{transform:translateX(0);opacity:0} 24.5%{opacity:1;transform:translateX(-12px)}
  25%{transform:translateX(6px)} 25.5%{transform:translateX(-3px)}
  26%{transform:translateX(0);opacity:1} 27%{opacity:0}
  55%{opacity:0} 55.5%{opacity:1;transform:translateX(18px)}
  56%{transform:translateX(-8px)} 56.5%{transform:translateX(0);opacity:1} 57%{opacity:0}
  85%{opacity:0} 85.3%{opacity:1;transform:translateX(-20px)}
  86%{transform:translateX(0);opacity:1} 86.5%{opacity:0}
  100%{opacity:0}
}

/* Scanline tear 2 */
.vhs-tear-2 {
  position: fixed; left: 0; right: 0; height: 9px;
  pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(0deg,
    transparent 0px, transparent 2px,
    rgba(0,0,0,0.40) 2px, rgba(0,0,0,0.40) 3px
  );
  animation: vhs-tear-pos-2 7.3s linear infinite, vhs-tear-shift-2 7.3s linear infinite;
  animation-delay: -2.4s;
}
@keyframes vhs-tear-pos-2 { from{top:-5%} to{top:105%} }
@keyframes vhs-tear-shift-2 {
  0%,38%{transform:translateX(0);opacity:0} 38.5%{opacity:1;transform:translateX(14px)}
  39%{transform:translateX(-7px)} 39.5%{transform:translateX(0);opacity:1} 40%{opacity:0}
  71%{opacity:0} 71.4%{opacity:1;transform:translateX(-16px)}
  72%{transform:translateX(0);opacity:1} 72.5%{opacity:0}
  100%{opacity:0}
}

/* Tracking bands */
.vhs-band-1 {
  position: fixed; left: 0; right: 0; height: 3px;
  background: rgba(200,200,200,0.80); pointer-events: none; z-index: 0;
  animation: vhs-band-sweep 9.3s linear infinite, vhs-band-glitch 9.3s linear infinite;
}
.vhs-band-2 {
  position: fixed; left: 0; right: 0; height: 2px; opacity: 0.60;
  background: rgba(200,200,200,0.80); pointer-events: none; z-index: 0;
  animation: vhs-band-sweep 5.7s linear infinite;
  animation-delay: -1.7s;
}
.vhs-band-3 {
  position: fixed; left: 0; right: 0; height: 1px; opacity: 0.38;
  background: rgba(200,200,200,0.80); pointer-events: none; z-index: 0;
  animation: vhs-band-sweep 3.8s linear infinite;
  animation-delay: -0.9s;
}
@keyframes vhs-band-sweep { from{top:-1%} to{top:101%} }
@keyframes vhs-band-glitch {
  0%,32%{transform:translateX(0)} 32.2%{transform:translateX(-14px)}
  32.5%{transform:translateX(8px)} 32.8%{transform:translateX(0)}
  68%{transform:translateX(0)} 68.2%{transform:translateX(20px)}
  68.5%{transform:translateX(-9px)} 68.8%{transform:translateX(0)}
  100%{transform:translateX(0)}
}

/* Bottom static strip */
.vhs-static-strip {
  position: fixed; bottom: 0; left: 0; right: 0; height: 10px;
  pointer-events: none; z-index: 0;
  filter: url(#vhs-static-filter);
  background: rgba(140,140,140,0.90);
}
.vhs-static-fade {
  position: fixed; bottom: 10px; left: 0; right: 0; height: 20px;
  pointer-events: none; z-index: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.20) 50%, transparent 100%);
}

[data-style="vhs"] .player-name,
[data-style="vhs"] .manager-name,
[data-style="vhs"] .brand,
[data-style="vhs"] .modal-title,
[data-style="vhs"] .section-label,
[data-style="vhs"] .lineup-group-name,
[data-style="vhs"] .lineup-card-label {
  font-family: 'VT323', monospace;
  font-size: 1.2em;
  letter-spacing: 0.04em;
}

/* ─ VHS / Analog: card tier treatments ─ */
[data-style="vhs"] .player-card.tier-elite,
[data-style="vhs"] .expanded-draft-card.tier-elite {
  border-color: rgba(255,80,160,0.62);
  background-color: rgba(255,80,160,0.05);
  background-image: none;
  box-shadow:
    0 0 14px rgba(255,80,160,0.22),
    0 0 30px rgba(255,80,160,0.08),
    inset 0 0 0 1px rgba(0,200,255,0.12);
  border-radius: 0;
}
[data-style="vhs"] .player-card.tier-great,
[data-style="vhs"] .expanded-draft-card.tier-great {
  border-color: rgba(80,200,255,0.55);
  background-color: rgba(80,200,255,0.04);
  background-image: none;
  box-shadow: 0 0 10px rgba(80,200,255,0.18);
  border-radius: 0;
}
[data-style="vhs"] .player-card.tier-good,
[data-style="vhs"] .expanded-draft-card.tier-good {
  border-color: rgba(192,192,192,0.34);
  background-image: none;
  border-radius: 0;
}
[data-style="vhs"] .player-card.tier-average,
[data-style="vhs"] .expanded-draft-card.tier-average {
  border-color: rgba(153,153,153,0.34);
  background-image: none;
  border-radius: 0;
}
[data-style="vhs"] .slot-box.tier-elite,
[data-style="vhs"] .slot-filled.tier-elite {
  border-color: rgba(255,80,160,0.48); background-color: rgba(255,80,160,0.04);
  box-shadow: 0 0 8px rgba(255,80,160,0.14); border-radius: 0;
}
[data-style="vhs"] .slot-box.tier-great,
[data-style="vhs"] .slot-filled.tier-great {
  border-color: rgba(80,200,255,0.40); border-radius: 0;
}
[data-style="vhs"] .slot-box.tier-good,
[data-style="vhs"] .slot-filled.tier-good { border-color: rgba(192,192,192,0.26); border-radius: 0; }
[data-style="vhs"] .slot-box.tier-average,
[data-style="vhs"] .slot-filled.tier-average { border-color: rgba(153,153,153,0.26); border-radius: 0; }
[data-style="vhs"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average) { border-radius: 0; }
[data-style="vhs"] .diamond-pos-card.tier-elite {
  border-color: rgba(255,80,160,0.50); background-color: rgba(255,80,160,0.04);
  box-shadow: 0 0 8px rgba(255,80,160,0.14); border-radius: 0;
}
[data-style="vhs"] .diamond-pos-card.tier-great { border-color: rgba(80,200,255,0.42); border-radius: 0; }
[data-style="vhs"] .diamond-pos-card.tier-good  { border-color: rgba(192,192,192,0.28); border-radius: 0; }
[data-style="vhs"] .lineup-card { border-radius: 0; border-left: 2px solid rgba(255,80,160,0.30); }
[data-style="vhs"] .void-panel  { border-radius: 0; border-left: 2px solid rgba(255,80,160,0.22); }
[data-style="vhs"] .modal-panel { border-radius: 0; border-left: 2px solid rgba(255,80,160,0.40); }
[data-style="vhs"] .btn-primary {
  background: rgba(255,80,160,0.12); color: #ff50a0;
  border: 1px solid rgba(255,80,160,0.45); border-radius: 0;
  font-family: 'VT323', monospace; font-size: 1.1em; letter-spacing: 0.05em;
  box-shadow: 0 0 8px rgba(255,80,160,0.14);
}
[data-style="vhs"] .btn-outline { border-radius: 0; font-family: 'VT323', monospace; font-size: 1.1em; }
[data-style="vhs"] .player-pos,
[data-style="vhs"] .slot-box-pos {
  background: transparent; color: rgba(255,80,160,0.65);
  border-color: rgba(255,80,160,0.28); border-radius: 0;
  font-family: 'Share Tech Mono', monospace;
}

/* ─ VHS: horizontal tracking band on elite cards ─ */
[data-style="vhs"] .shimmer-overlay::before {
  left: 0; right: 0; top: -10%; width: 100%; height: 12%;
  background: linear-gradient(to bottom,
    transparent 0%, rgba(200,200,200,0.05) 30%,
    rgba(200,200,200,0.10) 50%,
    rgba(200,200,200,0.05) 70%, transparent 100%);
  animation: vhs-card-track 9s linear infinite;
  animation-delay: var(--shimmer-offset, 0ms);
  transform: none;
}
@keyframes vhs-card-track {
  0%   { top: -10%; opacity: 0; }
  4%   { opacity: 1; }
  22%  { top: 110%; opacity: 0.8; }
  23%  { opacity: 0; top: 110%; }
  55%  { top: -10%; opacity: 0; }
  57%  { opacity: 1; }
  66%  { top: 110%; opacity: 0.6; }
  67%  { opacity: 0; }
  100% { top: -10%; opacity: 0; }
}


/* Diamond pos names stay at base size — VT323 at 1.2em overflows the card */
[data-style="vhs"] .diamond-pos-name {
  font-family: 'VT323', monospace;
  font-size: 1em;
  letter-spacing: 0.04em;
}


/* ══════════════════════════════════════════════════════════════
   NEON VEGAS STYLE
   Near-black void #040208. Hot pink elite, electric blue great,
   amber gold good. Five oversized corner glow elements,
   slow opacity animation, tube flicker top signs. Rajdhani bold.
══════════════════════════════════════════════════════════════ */

[data-style="neon"] {
  --tier-elite:  #ff1478;
  --tier-great:  #6040ff;
  --tier-good:   #ffb414;
  --tier-average: #ccab64;
  --gold:        #ff1478;
  --gold-rgb:    255, 20, 120;
  --gold-bright: #ff40a0;
  --purple-rgb:  96, 64, 255;
  --green-rgb:   255, 180, 20;
  --font:        'Rajdhani', sans-serif;
  --void:        #040208;
  --void-2:      #080410;
}

[data-style="neon"] body {
  background: #040208;
}
[data-style="neon"] body::before,
[data-style="neon"] body::after { display: none; }

/* Five injected glow elements */
.neon-pink {
  position: fixed; bottom: -50%; left: -50%; width: 120%; height: 120%;
  pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 0% 100%,
    rgba(255,20,120,0.42) 0%, rgba(255,20,120,0.14) 35%,
    rgba(255,20,120,0.03) 60%, transparent 80%);
  animation: neon-breathe 5s ease-in-out infinite;
}
.neon-blue {
  position: fixed; bottom: -50%; right: -50%; width: 120%; height: 120%;
  pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 100% 100%,
    rgba(60,20,255,0.38) 0%, rgba(60,20,255,0.11) 35%,
    rgba(60,20,255,0.02) 60%, transparent 80%);
  animation: neon-breathe 5s ease-in-out infinite;
  animation-delay: -1.2s;
}
.neon-top-l {
  position: fixed; top: 0; left: 0;
  width: 60%; height: 55%;
  pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 0% 0%,
    rgba(255,20,120,0.22) 0%,
    rgba(255,20,120,0.07) 45%,
    transparent 80%
  );
  animation: neon-tube 7s ease-in-out infinite;
}
.neon-top-r {
  position: fixed; top: 0; right: 0;
  width: 60%; height: 55%;
  pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 100% 0%,
    rgba(60,20,255,0.20) 0%,
    rgba(60,20,255,0.06) 45%,
    transparent 80%
  );
  animation: neon-tube 7s ease-in-out infinite;
  animation-delay: -2.5s;
}
.neon-amber {
  position: fixed; bottom: -30%; left: -10%; right: -10%; height: 60%;
  pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255,160,20,0.18) 0%, rgba(255,140,0,0.06) 45%, transparent 75%);
  animation: neon-breathe 6s ease-in-out infinite;
  animation-delay: -3s;
}
@keyframes neon-breathe { 0%{opacity:0.45} 50%{opacity:1.00} 100%{opacity:0.45} }
@keyframes neon-tube { 0%{opacity:0.45} 50%{opacity:1.00} 100%{opacity:0.45} }

[data-style="neon"] .player-name,
[data-style="neon"] .diamond-pos-name,
[data-style="neon"] .manager-name,
[data-style="neon"] .brand,
[data-style="neon"] .modal-title,
[data-style="neon"] .section-label,
[data-style="neon"] .lineup-group-name,
[data-style="neon"] .lineup-card-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ─ Neon Vegas: card tier treatments ─ */
[data-style="neon"] .player-card.tier-elite,
[data-style="neon"] .expanded-draft-card.tier-elite {
  border-color: rgba(255,20,120,0.70);
  background-color: rgba(255,20,120,0.05);
  background-image: none;
  box-shadow:
    0 0 16px rgba(255,20,120,0.28),
    0 0 40px rgba(255,20,120,0.10),
    inset 0 0 0 1px rgba(255,20,120,0.12),
    inset 0 1px 0 rgba(255,20,120,0.30);
  border-radius: 1px;
}
[data-style="neon"] .player-card.tier-great,
[data-style="neon"] .expanded-draft-card.tier-great {
  border-color: rgba(96,64,255,0.62);
  background-color: rgba(96,64,255,0.05);
  background-image: none;
  box-shadow:
    0 0 14px rgba(96,64,255,0.24),
    0 0 32px rgba(96,64,255,0.08),
    inset 0 1px 0 rgba(96,64,255,0.25);
  border-radius: 1px;
}
[data-style="neon"] .player-card.tier-good,
[data-style="neon"] .expanded-draft-card.tier-good {
  border-color: rgba(255,180,20,0.55);
  background-color: rgba(255,180,20,0.04);
  background-image: none;
  box-shadow:
    0 0 10px rgba(255,180,20,0.20),
    inset 0 1px 0 rgba(255,180,20,0.22);
  border-radius: 1px;
}
[data-style="neon"] .player-card.tier-average,
[data-style="neon"] .expanded-draft-card.tier-average {
  border-color: rgba(204,171,100,0.55);
  background-color: rgba(204,171,100,0.04);
  background-image: none;
  box-shadow:
    0 0 10px rgba(204,171,100,0.20),
    inset 0 1px 0 rgba(204,171,100,0.22);
  border-radius: 1px;
}
[data-style="neon"] .slot-box.tier-elite,
[data-style="neon"] .slot-filled.tier-elite {
  border-color: rgba(255,20,120,0.55); background-color: rgba(255,20,120,0.04);
  box-shadow: 0 0 10px rgba(255,20,120,0.18); border-radius: 1px;
}
[data-style="neon"] .slot-box.tier-great,
[data-style="neon"] .slot-filled.tier-great {
  border-color: rgba(96,64,255,0.48); box-shadow: 0 0 8px rgba(96,64,255,0.14); border-radius: 1px;
}
[data-style="neon"] .slot-box.tier-good,
[data-style="neon"] .slot-filled.tier-good {
  border-color: rgba(255,180,20,0.44); box-shadow: 0 0 6px rgba(255,180,20,0.12); border-radius: 1px;
}
[data-style="neon"] .slot-box.tier-average,
[data-style="neon"] .slot-filled.tier-average {
  border-color: rgba(204,171,100,0.44); box-shadow: 0 0 6px rgba(204,171,100,0.12); border-radius: 1px;
}
[data-style="neon"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average) { border-radius: 1px; }
[data-style="neon"] .diamond-pos-card.tier-elite {
  border-color: rgba(255,20,120,0.58); background-color: rgba(255,20,120,0.04);
  box-shadow: 0 0 10px rgba(255,20,120,0.20); border-radius: 1px;
}
[data-style="neon"] .diamond-pos-card.tier-great {
  border-color: rgba(96,64,255,0.50); box-shadow: 0 0 8px rgba(96,64,255,0.15); border-radius: 1px;
}
[data-style="neon"] .diamond-pos-card.tier-good {
  border-color: rgba(255,180,20,0.46); box-shadow: 0 0 6px rgba(255,180,20,0.12); border-radius: 1px;
}
[data-style="neon"] .diamond-pos-card.tier-average {
  border-color: rgba(204,171,100,0.46); box-shadow: 0 0 6px rgba(204,171,100,0.12); border-radius: 1px;
}
[data-style="neon"] .lineup-card { border-radius: 1px; border-left: 2px solid rgba(255,20,120,0.35); }
[data-style="neon"] .void-panel  { border-radius: 1px; border-left: 2px solid rgba(255,20,120,0.25); }
[data-style="neon"] .modal-panel {
  border-radius: 1px; border-color: rgba(255,20,120,0.30);
  box-shadow: 0 0 40px rgba(255,20,120,0.12), 0 0 80px rgba(96,64,255,0.06);
}
[data-style="neon"] .btn-primary {
  background: rgba(255,20,120,0.14); color: #ff1478;
  border: 1px solid rgba(255,20,120,0.52); border-radius: 1px;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 0.08em;
  box-shadow: 0 0 10px rgba(255,20,120,0.20);
  text-shadow: 0 0 6px rgba(255,20,120,0.50);
}
[data-style="neon"] .btn-outline { border-radius: 1px; font-family: 'Rajdhani', sans-serif; font-weight: 600; }
[data-style="neon"] .player-pos,
[data-style="neon"] .slot-box-pos {
  background: transparent; color: rgba(255,20,120,0.65);
  border-color: rgba(255,20,120,0.28); border-radius: 1px;
  font-family: 'Rajdhani', sans-serif; font-weight: 600;
}

/* ─ Neon Vegas: sign flicker on elite card border + glow ─ */
[data-style="neon"] .shimmer-overlay { display: none; }
[data-style="neon"] .player-card.tier-elite,
[data-style="neon"] .expanded-draft-card.tier-elite {
  animation: neon-sign-flicker 6s ease-in-out infinite;
}
@keyframes neon-sign-flicker {
  0%,15%  {
    box-shadow: 0 0 16px rgba(255,20,120,0.28), 0 0 40px rgba(255,20,120,0.10), inset 0 0 0 1px rgba(255,20,120,0.12), inset 0 1px 0 rgba(255,20,120,0.30);
    border-color: rgba(255,20,120,0.70); opacity: 1;
  }
  16% {
    box-shadow: 0 0  6px rgba(255,20,120,0.10), 0 0 10px rgba(255,20,120,0.04), inset 0 1px 0 rgba(255,20,120,0.10);
    border-color: rgba(255,20,120,0.25); opacity: 0.75;
  }
  17% {
    box-shadow: 0 0 16px rgba(255,20,120,0.28), 0 0 40px rgba(255,20,120,0.10), inset 0 1px 0 rgba(255,20,120,0.30);
    border-color: rgba(255,20,120,0.70); opacity: 1;
  }
  18% {
    box-shadow: 0 0  4px rgba(255,20,120,0.08), 0 0  8px rgba(255,20,120,0.03), inset 0 1px 0 rgba(255,20,120,0.08);
    border-color: rgba(255,20,120,0.20); opacity: 0.60;
  }
  19%,48% {
    box-shadow: 0 0 16px rgba(255,20,120,0.28), 0 0 40px rgba(255,20,120,0.10), inset 0 1px 0 rgba(255,20,120,0.30);
    border-color: rgba(255,20,120,0.70); opacity: 1;
  }
  49% { box-shadow: none; border-color: rgba(255,20,120,0.12); opacity: 0.30; }
  50% {
    box-shadow: 0 0 16px rgba(255,20,120,0.28), 0 0 40px rgba(255,20,120,0.10), inset 0 1px 0 rgba(255,20,120,0.30);
    border-color: rgba(255,20,120,0.70); opacity: 1;
  }
  51% {
    box-shadow: 0 0  8px rgba(255,20,120,0.14), 0 0 16px rgba(255,20,120,0.05), inset 0 1px 0 rgba(255,20,120,0.14);
    border-color: rgba(255,20,120,0.35); opacity: 0.80;
  }
  52%,100% {
    box-shadow: 0 0 16px rgba(255,20,120,0.28), 0 0 40px rgba(255,20,120,0.10), inset 0 1px 0 rgba(255,20,120,0.30);
    border-color: rgba(255,20,120,0.70); opacity: 1;
  }
}



/* Retro star field — injected by JS */
.retro-stars-el {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 34%  7%, rgba(255,255,255,0.22) 0%, transparent 100%),
    radial-gradient(1px 1px at 56% 24%, rgba(0,200,200,0.28) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 11%, rgba(255,255,255,0.24) 0%, transparent 100%),
    radial-gradient(1px 1px at 91% 35%, rgba(255,255,255,0.20) 0%, transparent 100%),
    radial-gradient(1px 1px at  8% 52%, rgba(0,200,200,0.22) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 68%, rgba(255,255,255,0.26) 0%, transparent 100%),
    radial-gradient(1px 1px at 47% 80%, rgba(255,255,255,0.20) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 60%, rgba(0,200,200,0.24) 0%, transparent 100%),
    radial-gradient(1px 1px at 83% 75%, rgba(255,255,255,0.22) 0%, transparent 100%),
    radial-gradient(1px 1px at 96% 90%, rgba(255,255,255,0.18) 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 90%, rgba(0,200,200,0.20) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 45%, rgba(255,255,255,0.16) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 38%, rgba(255,255,255,0.24) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 55%, rgba(0,200,200,0.22) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 28%, rgba(255,255,255,0.20) 0%, transparent 100%),
    radial-gradient(1px 1px at 55%  5%, rgba(255,255,255,0.18) 0%, transparent 100%),
    radial-gradient(1px 1px at  3% 15%, rgba(0,200,200,0.24) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 42%, rgba(255,255,255,0.22) 0%, transparent 100%),
    radial-gradient(1px 1px at 44% 95%, rgba(255,255,255,0.20) 0%, transparent 100%);
  animation: retro-twinkle 4s ease-in-out infinite alternate;
  opacity: 0.8;
}
@keyframes retro-twinkle { 0%{opacity:0.30} 100%{opacity:1.00} }

/* ── Style overrides (data-style attribute on root) ─────────────
   Each style block only overrides what it changes.
   Tier colors and accent inherit from :root unless overridden.
   ──────────────────────────────────────────────────────────── */
/* [data-style="aero"] body {
  background:
    radial-gradient(ellipse at 15% 0%,   rgba(var(--gold-rgb), 0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 100%, rgba(var(--purple-rgb), 0.05) 0%, transparent 50%),
    var(--void);
  background-attachment: fixed;
}
/* Suppress default stars and rotating lines */
[data-style="aero"] body::before,
[data-style="aero"] body::before { display: none; }
[data-style="aero"] body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 60% 30% at 25% 20%, rgba(var(--gold-rgb), 0.05) 0%, transparent 100%),
    radial-gradient(ellipse 50% 25% at 75% 80%, rgba(var(--purple-rgb), 0.04) 0%, transparent 100%);
  animation: aero-aurora 12s ease-in-out infinite alternate;
}
@keyframes aero-aurora {
  0%   { opacity: 0.5; transform: scale(1.0); }
  50%  { opacity: 1.0; transform: scale(1.08); }
  100% { opacity: 0.6; transform: scale(0.96); }
} — populated when Aero style is built */
/* [data-style="artdeco"]   { 
  --void:   #0a0804;
  --void-2: #141210;} — populated when Art Deco is built   */
/* [data-style="brutalist"] { } — populated when Brutalist is built  */
/* [data-style="synthwave"] { 
  --font: 'Rajdhani', 'IBM Plex Mono', monospace;
  --void:   #0d0010;
  --void-2: #150018;} — populated when Synthwave is built  */
/* [data-style="broadsheet"]{ } — populated when Broadsheet is built */
/* [data-style="glass"]     { } — populated when Glassmorphism built */



/* ── Sport skin overrides (data-sport attribute, auto-applied) ──
   Override --accent and --font per sport.
   Tier colors stay gold/purple/green across all sports.
   ──────────────────────────────────────────────────────────── */
/* [data-sport="baseball"]    { } — default, no override needed     */
/* [data-sport="basketball"]  { --accent: #e85d1a; }                */
/* [data-sport="football"]    { --accent: #4a9e4a; }                */
/* [data-sport="hockey"]      { --accent: #4a90c4; }                */
/* [data-sport="soccer"]      { --accent: #5a9e6a; }                */

* { box-sizing: border-box; }

/* ---------- loading overlay ---------- */

#loading-overlay {
  position: fixed;
  inset: 0;
  background: var(--void);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 9999;
  transition: opacity 0.4s ease;
}
#loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
.loading-title {
  font-family: var(--font);
  font-size: clamp(36px, 8vw, 56px);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold);
}
.loading-dot {
  color: rgba(201,164,85,0.4);
}
.loading-sub {
  font-size: 11px;
  letter-spacing: 6px;
  color: rgba(255,255,255,0.25);
  text-transform: uppercase;
  margin-top: -8px;
}
.loading-bar-wrap {
  width: 160px;
  height: 2px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}
.loading-bar {
  height: 100%;
  width: 0%;
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.35s ease;
}
.loading-status {
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.18);
  text-transform: uppercase;
}

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--void);
  color: var(--white);
  font-family: var(--font);
  position: relative;
  overflow-x: hidden;
}

/* ---------- animated void background ---------- */

body::before {
  content: "";
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.022) 0deg 0.5deg,
    transparent 0.5deg 6deg
  );
  animation: rotateLines 260s linear infinite;
  z-index: 0;
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.8) 50%, transparent),
    radial-gradient(1px 1px at 68% 58%, rgba(255,255,255,0.55) 50%, transparent),
    radial-gradient(1px 1px at 38% 78%, rgba(255,255,255,0.7) 50%, transparent),
    radial-gradient(1px 1px at 88% 14%, rgba(255,255,255,0.45) 50%, transparent),
    radial-gradient(1px 1px at 8% 88%, rgba(255,255,255,0.6) 50%, transparent),
    radial-gradient(1px 1px at 52% 42%, rgba(255,255,255,0.4) 50%, transparent),
    radial-gradient(1px 1px at 82% 72%, rgba(255,255,255,0.5) 50%, transparent),
    radial-gradient(1px 1px at 28% 12%, rgba(255,255,255,0.6) 50%, transparent),
    radial-gradient(1px 1px at 95% 45%, rgba(255,255,255,0.35) 50%, transparent),
    radial-gradient(1px 1px at 5% 55%, rgba(255,255,255,0.5) 50%, transparent);
  background-size: 600px 600px;
  animation: starDrift 100s linear infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes rotateLines { to { transform: rotate(360deg); } }
@keyframes starDrift { from { background-position: 0 0; } to { background-position: -600px 600px; } }

main { position: relative; z-index: 1; }
.site-header { position: relative; z-index: 10; }
.site-footer { position: relative; z-index: 0; }

main { max-width: 1440px; margin: 0 auto; padding: 0 20px 80px; }

h1, h2, h3, button, .mono-caps {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------- header ---------- */

.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 26px 20px 18px;
  border-bottom: 1px solid var(--panel-border);
  max-width: 1440px;
  margin: 0 auto;
}

.brand {
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--white);
}


.brand-sub {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gray);
  text-transform: uppercase;
}

/* ── Sport switcher ─────────────────────────────────────── */
.sport-switcher { position: relative; }
.brand-sub-btn {
  font-size: 11px; letter-spacing: 0.18em; color: var(--gray); text-transform: uppercase;
  background: none; border: none; cursor: pointer; font-family: var(--font);
  padding: 4px 8px; border-radius: 5px 5px 0 0;
  display: flex; align-items: center; justify-content: space-between;
  width: 145px; white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.brand-sub-btn:hover { color: var(--gold); background: #2a2a2a; }
.brand-sub-btn.open  { color: var(--gold); background: #2a2a2a; }
.sport-chevron {
  font-size: 7px; display: inline-block; flex-shrink: 0; margin-left: 4px;
  transition: transform 0.15s ease;
}
.brand-sub-btn.open .sport-chevron { transform: rotate(180deg); }
.sport-dropdown {
  position: absolute; top: 100%; left: 0;
  background: #2a2a2a; border-radius: 0 0 5px 5px;
  width: 145px; padding: 2px 0 6px; z-index: 200;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.sport-dropdown.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sport-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; font-family: var(--font);
  cursor: pointer; color: var(--gray);
}
.sport-item--active { color: var(--gold); cursor: default; }
.sport-item--disabled { color: #333; cursor: not-allowed; }
.sport-item:not(.sport-item--disabled):not(.sport-item--active):hover { color: var(--white); }
@media (max-width: 480px) {
  .brand-sub-btn { font-size: 10px; letter-spacing: 0.15em; }
  .site-header { align-items: center; padding: 14px 16px 10px; flex-wrap: nowrap; }
  .site-header-left { flex-direction: column; align-items: flex-start; gap: 4px; }
  .sport-dropdown { left: 0; right: auto; border-radius: 0 5px 5px 5px; }
  .sv2-mode-btn { font-size: 9px; padding: 6px 2px; letter-spacing: 0.01em; }
  .mode-label-full { display: none !important; }
  .mode-label-short { display: inline !important; }
  .sv2-pool-chip { padding: 0 4px; font-size: 9px; letter-spacing: 0.01em; flex: 1 1 auto; min-width: 0; }
  .sv2-pool-row { display: flex; flex-wrap: wrap; gap: 5px; }
  .sv2-diff-chip { padding: 7px 2px; }
  .sv2-diff-label { font-size: 9px; letter-spacing: 0.02em; }
  .sv2-diff-sub { font-size: 7px; }
  .sv2-controls-grid > div { min-width: 0; }
  .sv2-pool-row, .sv2-diff-row { min-width: 0; }
  .manager-actions { justify-content: center; width: 100%; }
  .result-tab { padding: 8px 4px !important; font-size: 10px !important; letter-spacing: 0.06em !important; flex: 1; text-align: center; }
  .roster-desktop-view { display: none !important; }
  .roster-bullpen-bench { display: none !important; }
  .roster-mobile-list { display: block !important; }
  .standings-division { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .standings-table { min-width: 580px; }
  .standings-table th, .standings-table td { white-space: nowrap; }
  .hc-body { flex-direction: column; align-items: center; }
  .hc-zone-wrap { width: 100%; max-width: 280px; margin: 0 auto; }
  .hc-pitch-list { width: 100%; }
  .hc-player-avatar,
  .hc-player .player-photo,
  .hc-player .player-photo-fallback { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; max-width: 28px !important; max-height: 28px !important; font-size: 10px; }
  .hc-player-name { font-size: 10px; }
  .hc-player-meta { font-size: 9px; }
  .hc-count-center { width: 60px; }
  .hc-player { gap: 6px; }
  .box-score-pbp-layout { flex-direction: column; }
  .box-score-pbp-timeline { width: 100% !important; border-right: none !important; border-bottom: 1px solid var(--panel-border); height: 280px; flex-shrink: 0; }
  .box-score-pbp-filters { gap: 3px; padding: 6px 8px; }
  .pbp-filter-chip { padding: 2px 6px; font-size: 8px; }
  .box-score-pbp-detail { overflow-y: auto; }
  #postseason-bracket-tree-wrap { overflow: visible !important; }
  #postseason-bracket-footer { margin-top: 12px !important; width: 100% !important; justify-content: center !important; }
  .ps-champ-banner { text-align: center; margin: 0 auto; }
  .ps-footer-left { display: none !important; }
  #postseason-bracket-viewing-bar { width: 100% !important; text-align: center !important; margin-top: 8px !important; }
  .ps-bracket-footer--desktop { display: none !important; }
  .ps-viewing-bar--desktop { display: none !important; }
  .ps-bracket-footer--mobile:not(.ps-hidden) { display: flex !important; width: 100% !important; justify-content: center; margin-top: 12px; }
  .ps-viewing-bar--mobile:not(.ps-hidden) { display: block !important; width: 100% !important; text-align: center; margin-top: 8px; }
  .postseason-mvp-grid { grid-template-columns: 1fr !important; }
  .roll-card { padding: 12px !important; box-sizing: border-box; width: 100%; }
  .draft-layout { margin-top: 12px; width: 100%; box-sizing: border-box; }
  .draft-main { min-width: 0; width: 100%; box-sizing: border-box; }
  .player-list { max-height: 400px; }
  .player-browse-controls { flex-wrap: wrap; min-width: 0; }
}

/* ---------- screens ---------- */

.screen { display: none; }
.screen.active { display: block; animation: fadeIn 0.3s ease; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- shared panel look ---------- */

.void-panel, .roll-card, .lineup-card, .scoreboard {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 3px;
}

.void-panel { padding: 40px; margin-top: 30px; }

.void-panel h1 {
  font-size: clamp(22px, 3.6vw, 30px);
  margin: 0 0 16px;
  color: var(--white);
  letter-spacing: 0.04em;
}

.lede {
  line-height: 1.7;
  margin: 0 0 18px;
  color: #c7c4bb;
  text-transform: none;
  letter-spacing: normal;
  font-size: 14px;
}
.lede.small { font-size: 12.5px; color: var(--gray); }
.lede em { color: var(--gold); font-style: normal; }

.section-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--gold);
  margin: 30px 0 6px;
}

/* ---------- era chips ---------- */

.chip-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 16px 0 30px;
}
@media (max-width: 600px) { .chip-row { grid-template-columns: repeat(2, 1fr); } }

.park-chips-wrap { display: flex; flex-direction: column; gap: 4px; }
.park-chips-wrap > .chip {
  align-self: flex-start;
  width: auto;
  min-width: 180px;
  margin-bottom: 10px;
}

.park-selector-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 860px) { .park-selector-layout { grid-template-columns: 1fr; } }

.park-detail-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  padding: 18px;
  position: sticky;
  top: 20px;
  min-height: 220px;
}
@media (max-width: 860px) { .park-detail-panel { position: static; } }

.park-detail-placeholder {
  color: var(--gray);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 60px 0;
}

.park-detail-name { font-size: 16px; color: var(--white); margin-bottom: 4px; }
.park-detail-team { font-size: 12px; color: var(--gold); letter-spacing: 0.04em; margin-bottom: 2px; }
.park-detail-span { font-size: 11px; color: var(--gray); letter-spacing: 0.04em; margin-bottom: 14px; }
.park-detail-image { width: 100%; border-radius: 2px; display: block; margin-bottom: 4px; background: var(--void-2); }
.park-detail-source { font-size: 9.5px; color: var(--gray-dim); margin-top: 4px; }
.park-detail-source a { color: var(--gray-dim); }

.park-fallback-icon { width: 100%; height: 160px; background: var(--void-2); border-radius: 2px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.park-fallback-icon svg { width: 64px; height: 64px; opacity: 0.5; }

.manager-layout { max-width: 640px; margin: 26px auto 0; }
.manager-layout .roll-card-label { font-size: 18px; color: var(--white); margin-bottom: 18px; }
.manager-era-line { color: var(--gray); font-size: 13px; margin-bottom: 10px; }
.manager-era-line span { color: var(--gold); font-weight: 600; }

.compact-roster-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 16px;
  margin-bottom: 18px;
}
@media (max-width: 480px) { .compact-roster-grid { grid-template-columns: 1fr; } }
.compact-roster-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--panel-border);
  font-size: 12px;
}
.compact-roster-pos { color: var(--gray); width: 26px; flex-shrink: 0; }
.compact-roster-name { color: var(--white); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-roster-name.tier-elite { color: var(--gold); }
.compact-roster-name.tier-great { color: var(--purple); }
.compact-roster-name.tier-good  { color: var(--green); }
.compact-roster-stat { color: var(--gold); flex-shrink: 0; }
.compact-roster-sim { color: var(--gray); font-size: 11px; flex-shrink: 0; margin-left: 8px; }
.compact-roster-empty { color: var(--gray-dim); }

#manager-preroll { margin-top: 18px; }
.manager-slots-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.manager-slot { cursor: pointer; border-radius: 3px; transition: opacity 0.15s; min-width: 0; }
.manager-slot .roll-box { min-width: 0; }
.manager-slot.selected .roll-box { border-color: var(--gold); box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.3); }
.manager-slot.dimmed { opacity: 0.4; }
.manager-slot.spinning-active { pointer-events: none; }
@media (max-width: 540px) { .manager-slots-row { grid-template-columns: 1fr; } }
.manager-actions { display: flex; gap: 12px; margin-top: 16px; }
.manager-actions .btn-reroll { flex: 1; }
.manager-actions .btn-primary { flex: 1; }

.manager-card {
  background: var(--void-2);
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  padding: 18px;
  margin-top: 18px;
}
.manager-card.tier-over { border-color: var(--gold); box-shadow: 0 0 14px rgba(var(--gold-rgb), 0.22); background-color: rgba(var(--gold-rgb), 0.09); }
.manager-card.tier-neutral { border-color: var(--panel-border); }
.manager-card.tier-under { border-color: var(--red); background-color: rgba(192, 82, 74, 0.07); }

.manager-card-body { display: flex; gap: 16px; align-items: flex-start; }
.manager-card-info { flex: 1; min-width: 0; }
.manager-photo, .manager-fallback-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  border: 1px solid var(--panel-border);
}
.manager-fallback-icon {
  display: flex; align-items: center; justify-content: center;
  background: var(--void);
  color: var(--gray-dim);
  font-size: 26px;
}
.manager-photo-sm, .manager-fallback-icon-sm {
  width: 32px; height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  border: 1px solid var(--panel-border);
  vertical-align: middle;
}
.manager-fallback-icon-sm {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--void);
  color: var(--gray-dim);
  font-size: 14px;
}
.manager-banner-body { display: flex; align-items: center; gap: 10px; }

/* ---------- Player headshot circles ---------- */
.player-photo, .player-photo-fallback {
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  object-position: 50% 18%;
  background: var(--void);
  border: 1.5px solid var(--panel-border);
  /* Belt-and-suspenders: overflow:hidden ensures the circle crop holds even
     if the image loads at natural dimensions before CSS is fully applied. */
  overflow: hidden;
  display: block;
}
.player-photo-xl, .player-photo-fallback-xl { width: 52px; height: 52px; min-width: 52px; min-height: 52px; max-width: 52px; max-height: 52px; }
.player-photo-md, .player-photo-fallback-md { width: 34px; height: 34px; min-width: 34px; min-height: 34px; max-width: 34px; max-height: 34px; }
.player-photo-sm, .player-photo-fallback-sm { width: 28px; height: 28px; min-width: 28px; min-height: 28px; max-width: 28px; max-height: 28px; }
.player-photo-fallback {
  display: flex; align-items: center; justify-content: center; font-size: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
  background-size: 60%; background-repeat: no-repeat; background-position: center 40%;
}
.tier-elite .player-photo, .tier-elite .player-photo-fallback { border-color: var(--gold); }
.tier-great .player-photo, .tier-great .player-photo-fallback { border-color: var(--purple); }
.tier-good  .player-photo, .tier-good  .player-photo-fallback { border-color: var(--green); }
.player-card-with-photo { display: flex; align-items: flex-start; gap: 10px; min-width: 0; overflow: hidden; position: relative; z-index: 1; }
.player-card-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; position: relative; z-index: 1; }
.expanded-draft-card-top { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; position: relative; z-index: 1; }
.postseason-mvp-tile-body { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.postseason-mvp-tile-body .player-photo,
.postseason-mvp-tile-body .player-photo-fallback { width: 44px; height: 44px; }

/* Diamond cards — photo overhangs above card */
.diamond-pos-card-wrap {
  position: absolute;
  transform: translate(-50%, -50%);
}
.diamond-pos-card-photo {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}
.diamond-pos-card-wrap .diamond-pos-card {
  position: relative;
  transform: none;
}

/* Rotation cards — photo inside card, centered at top */
.rotation-card-wrap { position: relative; display: inline-block; }
.rotation-card-wrap .diamond-pos-card {
  position: relative; transform: none;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 4px;
}
.rotation-card-wrap .diamond-pos-card-photo {
  position: static !important; transform: none !important;
  left: auto !important; top: auto !important;
  align-self: center; display: block;
  margin: 0 auto 3px;
}
/* rotation-strip gap wider to accommodate photos */
.rotation-strip-cards { display: flex; flex-wrap: wrap; gap: 16px; }

/* DH card — photo centered above text */
.dh-card-with-photo {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; text-align: center !important;
  transform: none !important; position: relative !important;
  padding-top: 6px !important; gap: 0 !important;
}
.dh-card-with-photo .player-photo,
.dh-card-with-photo .player-photo-fallback { margin-bottom: 5px; }

/* Slot box — photo at top, pos+name+badges in header row */
.slot-box-pos {
  font-size: 10px; background: var(--void); color: var(--gold);
  border: 1px solid var(--panel-border); border-radius: 2px;
  padding: 1px 6px; align-self: flex-start;
}
.slot-box .player-photo, .slot-box .player-photo-fallback {
  width: 40px; height: 40px; align-self: flex-start; margin-bottom: 2px;
}
.slot-box-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---------- Sandbox panel ---------- */
.start-btns-row { display: flex; gap: 10px; align-items: stretch; }
.start-btns-row > * { flex: 1; }
.btn-hard, .btn-sandbox {
  padding: 10px 18px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--gray);
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--font);
}
.btn-hard:not(:disabled):hover { border-color: var(--red); color: var(--red); }
.btn-sandbox:not(:disabled):hover { border-color: var(--gold); color: var(--gold); }
.btn-hard:disabled, .btn-sandbox:disabled { opacity: 0.4; cursor: default; }
.sandbox-panel {
  background: var(--void-2); border: 1px solid var(--panel-border);
  border-radius: 3px; margin-bottom: 16px; overflow: hidden;
}
.sandbox-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--panel-border);
}
.sandbox-label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: var(--gold); }
.sandbox-tabs { display: flex; gap: 4px; }
.sandbox-tab {
  font-size: 10px; letter-spacing: 0.08em; padding: 3px 10px;
  border: 1px solid var(--panel-border); border-radius: 2px;
  background: transparent; color: var(--gray); cursor: pointer; text-transform: uppercase;
}
.sandbox-tab.active { border-color: var(--gold); color: var(--gold); }
.sandbox-tab-panel { padding: 14px; }
.sandbox-field-row { margin-bottom: 10px; }
.sandbox-field-label {
  display: block; font-size: 9px; letter-spacing: 0.1em; color: var(--gray);
  margin-bottom: 5px; text-transform: uppercase;
}
.sandbox-select {
  width: 100%; background: var(--void); border: 1px solid var(--panel-border);
  color: var(--white); font-size: 13px; padding: 7px 10px; border-radius: 2px; cursor: pointer;
}
.sandbox-select:focus { outline: none; border-color: var(--gold); }
.sandbox-search-input {
  width: 100%; background: var(--void); border: 1px solid var(--panel-border);
  color: var(--white); font-size: 13px; padding: 7px 10px;
  border-radius: 2px; box-sizing: border-box;
}
.sandbox-search-input:focus { outline: none; border-color: var(--gold); }
.sandbox-search-input::placeholder { color: var(--gray-dim); }
.sandbox-load-btn { width: 100%; margin-top: 4px; }
.sandbox-search-results {
  margin-top: 12px;
  max-height: 600px;
  overflow-y: auto;
  padding-right: 4px;
}
.sandbox-search-results::-webkit-scrollbar { width: 6px; }
.sandbox-search-results::-webkit-scrollbar-thumb { background: var(--panel-border); border-radius: 3px; }
.sandbox-search-hint { font-size: 11px; color: var(--gray); padding: 6px 0; text-align: center; }


.manager-card-placeholder {
  text-align: center;
  padding: 30px 0;
  color: var(--gray);
  font-size: 12px;
  letter-spacing: 0.1em;
  margin-top: 18px;
}

.manager-name-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.manager-name { font-size: 17px; color: var(--white); }
.overperform-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--void);
  background: var(--gold);
  border-radius: 2px;
  padding: 1px 5px;
  align-self: flex-start;
}
.underperform-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--white);
  background: var(--red);
  border-radius: 2px;
  padding: 1px 5px;
  align-self: flex-start;
}
.manager-record { font-size: 12px; color: var(--gray); margin-bottom: 10px; }
.manager-rating-line { font-size: 13px; color: var(--gold); margin-bottom: 4px; }
.manager-rating-line.under { color: var(--red); }
.manager-connections-line { font-size: 11px; color: var(--green); margin-top: 6px; }

.park-category-group { margin-bottom: 4px; }
.park-category-heading {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gray);
  margin: 14px 0 8px;
}
.park-category-group .chip-row { margin: 0 0 6px; }

.chip {
  background: var(--void-2);
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: var(--white);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.chip:hover { border-color: var(--panel-border-hover); }
.chip.selected {
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.08);
  box-shadow: 0 0 16px rgba(var(--gold-rgb), 0.3);
  color: var(--gold);
}
.chip-decade { font-size: 16px; font-weight: 700; letter-spacing: 0.06em; color: var(--white); }
.chip.selected .chip-decade { color: var(--gold); }
.chip-meta { font-size: 10px; color: var(--gray); letter-spacing: 0.04em; text-transform: none; }

/* Medium (Easy) intentionally left unstyled — inherits default gold chip style */
.chip.difficulty-hard.selected {
  border-color: #d4914a;
  background: rgba(212, 145, 74, 0.08);
  box-shadow: 0 0 16px rgba(212, 145, 74, 0.3);
  color: #d4914a;
}
.chip.difficulty-brutal.selected {
  border-color: var(--red);
  background: rgba(192, 82, 74, 0.08);
  box-shadow: 0 0 16px rgba(192, 82, 74, 0.3);
  color: var(--red);
}
.chip.difficulty-punish.selected {
  border-color: #8b1a1a;
  background: rgba(139, 26, 26, 0.12);
  box-shadow: 0 0 16px rgba(139, 26, 26, 0.4);
  color: #c03030;
}

/* ---------- buttons ---------- */

.btn-primary {
  font-size: 15px;
  letter-spacing: 0.1em;
  background: var(--gold);
  color: #1a1404;
  border: none;
  border-radius: 2px;
  padding: 14px 34px;
  cursor: pointer;
  font-weight: 700;
  font-family: var(--font);
  transition: box-shadow 0.15s, transform 0.1s, background 0.15s;
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 0 22px rgba(var(--gold-rgb), 0.5); transform: translateY(-1px); background: var(--gold-bright); }
.btn-primary:disabled { background: #292929; color: #5a5a5a; cursor: not-allowed; }

.btn-reroll {
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--white);
  border-radius: 2px;
  padding: 9px 16px;
  cursor: pointer;
}
.btn-quick-draft {
  font-family: var(--font);
  font-size: 10px;
  padding: 4px 8px;
  border: 1px dashed var(--gray-dim);
  background: transparent;
  color: var(--gray-dim);
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: 0.03em;
}
.btn-quick-draft:hover { border-color: var(--gray); color: var(--gray); }
.btn-quick-draft:disabled,
.btn-stacked-draft:disabled,
.btn-reroll:disabled,
.btn-outline:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-debug-draft { border-color: #5a3a8a; color: #8a5abf; }
.btn-debug-draft:hover { border-color: #8a5abf; color: #b07fff; }
.btn-reroll:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---------- draft screen layout ---------- */

.draft-layout {
  display: grid;
  grid-template-columns: 660px 1fr;
  gap: 22px;
  align-items: start;
  margin-top: 26px;
}
@media (max-width: 1000px) { .draft-layout { grid-template-columns: 1fr; } }

/* Draft locked state — applied during quick draft async loop */
#screen-setup.draft-in-progress .draft-action-btn,
#screen-setup.draft-in-progress #quick-draft-btn,
#screen-setup.draft-in-progress #reroll-btn,
#screen-setup.draft-in-progress #reroll-team-btn,
#screen-setup.draft-in-progress #reroll-year-btn,
#screen-setup.draft-in-progress #sandbox-load-btn,
#screen-setup.draft-in-progress .slot-box,
#screen-setup.draft-in-progress .position-picker,
#screen-setup.draft-in-progress .sandbox-search-input {
  pointer-events: none;
  opacity: 0.5;
}
#screen-setup.draft-in-progress #quick-draft-btn {
  opacity: 0.7; /* slightly less dim so user can see it's processing */
  cursor: wait;
}

.draft-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 12px;
}

.round-indicator { color: var(--white); font-weight: 600; letter-spacing: 0.06em; }
.reroll-btn-group { display: flex; align-items: center; gap: 4px; }
.btn-reroll-split { padding: 9px 12px; }
.reroll-count-label { font-size: 11px; color: var(--gray); letter-spacing: 0.04em; white-space: nowrap; margin-left: 2px; }
.season-era-label { color: var(--gray); font-size: 11px; text-transform: none; letter-spacing: normal; flex-basis: 100%; }

.roll-card { padding: 20px; overflow: hidden; }

.roll-display { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 16px; }
.roll-box {
  background: var(--void-2);
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.roll-box-label { font-size: 10px; letter-spacing: 0.16em; color: var(--gray); flex-shrink: 0; width: 44px; }
.roll-box-value {
  font-size: 15px; font-weight: 700; color: var(--white); letter-spacing: 0.01em;
  height: 20px; overflow: hidden; position: relative; flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: flex-start;
}
.roll-box-value .reel-text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  position: absolute;
  top: 0; left: 0;
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.06s ease-in, opacity 0.06s ease-in;
}
.roll-box-value .reel-text.reel-incoming { transform: translateY(-100%); opacity: 0; transition: none; }
.roll-box-value .reel-text.reel-outgoing { transform: translateY(100%); opacity: 0; }
.roll-box.spinning .roll-box-value { color: var(--gold); }

.player-browse-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.player-search-input {
  flex: 1;
  background: var(--void-2);
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  color: var(--white);
  font-family: var(--font);
  font-size: 12px;
  padding: 9px 12px;
  letter-spacing: 0.02em;
}
.player-search-input::placeholder { color: var(--gray-dim); text-transform: none; letter-spacing: normal; }
.player-search-input:focus { outline: none; border-color: var(--gold); }
.eligible-count {
  font-size: 11px;
  color: var(--gray);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.position-section { margin-bottom: 8px; }
.position-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--void-2);
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  padding: 9px 12px;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--white);
  user-select: none;
}
.position-section-header:hover { border-color: var(--gold); }
.position-section-header .pos-name { color: var(--gold); font-weight: 700; margin-right: 8px; }
.position-section-header .pos-count { color: var(--gray); font-weight: 400; }
.position-section-header .chevron { color: var(--gray); transition: transform 0.15s; font-size: 10px; }
.position-section.expanded .chevron { transform: rotate(180deg); }
.position-section-body {
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 9px;
  padding: 9px 0 0;
}
.position-section.expanded .position-section-body { display: grid; }
@media (max-width: 480px) { .position-section-body { grid-template-columns: 1fr; } }

.player-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: 600px;
  overflow-y: auto;
  padding-right: 4px;
}
.player-list::-webkit-scrollbar { width: 6px; }
.player-list::-webkit-scrollbar-thumb { background: var(--panel-border); border-radius: 3px; }

.player-list-placeholder {
  text-align: center;
  padding: 40px 0;
  color: var(--gray);
  font-size: 12px;
  letter-spacing: 0.1em;
}

.player-card {
  background: var(--void-2);
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 12px;
  position: relative;
  min-width: 0;
  transition: border-color 0.15s;
}
.player-card.hard-mode-card { min-height: 120px; }
.player-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.player-card.tier-elite, .slot-box.tier-elite, .diamond-pos-card.tier-elite, .expanded-draft-card.tier-elite { border-color: var(--gold); box-shadow: 0 0 14px rgba(var(--gold-rgb), 0.22); background-color: rgba(var(--gold-rgb), 0.09); }
.player-card.tier-great, .slot-box.tier-great, .diamond-pos-card.tier-great, .expanded-draft-card.tier-great { border-color: var(--purple); background-color: rgba(var(--purple-rgb), 0.08); }
.player-card.tier-good, .slot-box.tier-good, .diamond-pos-card.tier-good, .expanded-draft-card.tier-good { border-color: var(--green); background-color: rgba(var(--green-rgb), 0.07); }
.player-card.tier-average, .slot-box.tier-average, .diamond-pos-card.tier-average, .expanded-draft-card.tier-average { border-color: var(--tier-average); background-color: rgba(var(--tier-average-rgb, 122, 154, 176), 0.05); }
.player-card.ineligible { opacity: 0.4; }

/* Shimmer renders in its own absolutely-positioned, self-clipping overlay
   (a sibling element, added only for top-tier cards) — NOT a pseudo-element
   of the card itself. A pseudo-element would force overflow:hidden onto the
   card to contain the sweep, which also silently clips real stat text
   whenever a card's content runs slightly taller than its computed height.
   This way the clipping only ever applies to the decorative sweep. */
.shimmer-overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.shimmer-overlay::before {
  content: "";
  position: absolute;
  top: 0; left: -150%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.16), transparent);
  animation: shimmer 3.2s ease-in-out infinite;
  /* Synced to a shared global clock (set via JS, see shimmerDelayStyle())
     rather than each element starting its own independent 0% cycle -
     found in review that the shimmer visibly restarted every reroll,
     since each reroll fully re-renders the card as a brand-new DOM
     element with no memory of the previous one's animation progress.
     A custom property is needed here specifically because regular
     inline styles don't reach a pseudo-element of the same node, but
     custom properties do cascade into them. */
  animation-delay: var(--shimmer-offset, 0ms);
}
@keyframes shimmer { 0% { left: -150%; } 100% { left: 150%; } }

/* ══════════════════════════════════════════════════════════════
   SPORT SKINS
   Applied automatically via data-sport attribute on <html>.
   Only two things change per sport:
   1. --accent color (and --accent-rgb for rgba() usage)
   2. Elite card shimmer — tint color and animation speed
   All other tier colors (purple/green) stay constant.
   Dividers: 1px solid rgba(var(--accent-rgb), 0.20) automatically
   via --accent-rgb. Filled slots: border/bg tint via --accent-rgb.
══════════════════════════════════════════════════════════════ */

/* Baseball shimmer — slow (3.2s), warm gold tint. This IS the
   default shimmer already defined above, explicitly documented here. */
/* [data-sport="baseball"] .shimmer-overlay::before — no override needed,
   default 3.2s pure white shimmer is the baseball variant */

/* Future sport shimmer overrides — uncomment when implemented:

[data-sport="basketball"] .shimmer-overlay::before {
  background: linear-gradient(100deg,
    transparent,
    rgba(232,93,26,0.08),
    rgba(255,255,255,0.20),
    rgba(232,93,26,0.08),
    transparent
  );
  animation-duration: 2.0s;
}

[data-sport="football"] .shimmer-overlay::before {
  background: linear-gradient(100deg,
    transparent,
    rgba(74,158,74,0.06),
    rgba(255,255,255,0.18),
    rgba(74,158,74,0.06),
    transparent
  );
  animation-duration: 2.8s;
}

[data-sport="hockey"] .shimmer-overlay::before {
  background: linear-gradient(100deg,
    transparent,
    rgba(74,144,196,0.10),
    rgba(220,240,255,0.22),
    rgba(74,144,196,0.10),
    transparent
  );
  animation-duration: 4.0s;
}

[data-sport="soccer"] .shimmer-overlay::before {
  background: linear-gradient(100deg,
    transparent,
    rgba(90,158,106,0.06),
    rgba(255,255,255,0.18),
    rgba(90,158,106,0.06),
    transparent
  );
  animation-duration: 3.0s;
}
*/

.player-top { display: flex; align-items: baseline; gap: 6px; grid-column: 1; flex-wrap: wrap; }
/* The badges' own align-self:flex-start (needed elsewhere, e.g. flex-
   column slot-box contexts, to stop them stretching) actively causes a
   visible misalignment here: this row mixes a much larger name (14.5px)
   with small badges/position/year text (~10px) under baseline
   alignment, and "flex-start" (top of line) lands at a different
   height than "baseline" (near the bottom of the large name text).
   Reset back to baseline specifically in this context, confirmed via
   real review - Bobby Wallace's HOF badge visibly floating above his
   position/year text, not a hypothetical. */
.player-top .hof-badge, .player-top .clutch-badge, .player-top .ace-badge,
.player-top .ironman-badge, .player-top .twoway-badge,
.player-top .workhorse-badge, .player-top .slugger-badge,
.player-top .contact-badge, .player-top .speedster-badge,
.player-top .glasscannon-badge, .player-top .groundball-badge,
.player-top .shutdown-badge { align-self: baseline; }
.player-name { font-weight: 600; font-size: 14.5px; text-transform: none; letter-spacing: normal; color: var(--white); }
.player-pos {
  font-size: 10px;
  background: var(--void);
  color: var(--gold);
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  padding: 1px 6px;
}
.hof-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--void);
  background: var(--gold);
  border-radius: 2px;
  padding: 1px 5px;
  align-self: flex-start;
}
.clutch-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--white);
  background: var(--red);
  border-radius: 2px;
  padding: 1px 5px;
  align-self: flex-start;
}
.ace-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--white);
  background: var(--purple);
  border-radius: 2px;
  padding: 1px 5px;
  align-self: flex-start;
}
.ironman-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--void);
  background: var(--green);
  border-radius: 2px;
  padding: 1px 5px;
  align-self: flex-start;
}
.twoway-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--void);
  background: var(--gold-bright);
  border-radius: 2px;
  padding: 1px 5px;
  align-self: flex-start;
}
/* New skill badges — distinct colors from existing tier/badge palette.
   Workhorse: steel blue (durability/endurance connotation).
   Slugger: deep red/crimson (power, danger).
   Contact: teal (precision, control).
   Speedster: electric lime (speed).
   Glass Cannon: orange (power + fragility — warm like Slugger but distinct). */
.workhorse-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--void); background: #5b8db8;
  border-radius: 2px; padding: 1px 5px; align-self: flex-start;
}
.slugger-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--white); background: #b83232;
  border-radius: 2px; padding: 1px 5px; align-self: flex-start;
}
.contact-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--void); background: #3aada8;
  border-radius: 2px; padding: 1px 5px; align-self: flex-start;
}
.speedster-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--void); background: #a0d020;
  border-radius: 2px; padding: 1px 5px; align-self: flex-start;
}
.glasscannon-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--void); background: #e07820;
  border-radius: 2px; padding: 1px 5px; align-self: flex-start;
}
.real-awards-line {
  font-size: 9.5px;
  color: var(--gold);
  text-transform: none;
  letter-spacing: 0.01em;
  min-height: 12px;
}
.teammates-line {
  font-size: 9.5px;
  color: var(--green);
  text-transform: none;
  letter-spacing: 0.01em;
  min-height: 12px;
}
.player-year {
  font-size: 10px;
  color: var(--gray);
  letter-spacing: 0.04em;
}

.player-stats { font-size: 11.5px; color: var(--gray); grid-column: 1; text-transform: none; letter-spacing: normal; }
.player-plus { font-size: 10.5px; color: var(--gold); grid-column: 1; }

.slot-buttons { grid-column: 2; display: flex; flex-direction: column; gap: 4px; align-self: end; position: relative; z-index: 1; align-items: flex-start; }

.slot-btn {
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.06em;
  background: transparent;
  color: var(--white);
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  padding: 7px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.slot-btn:hover { border-color: var(--gold); color: var(--gold); }

.no-slot { font-size: 10px; color: var(--gray-dim); text-transform: none; }

.draft-action-btn {
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0.06em;
  background: var(--gold);
  color: var(--void);
  font-weight: 700;
  border: none;
  border-radius: 2px;
  padding: 9px 16px;
  cursor: pointer;
  white-space: nowrap;
}
/* Tier-matched draft button colors in base theme */
.tier-great .draft-action-btn { background: var(--purple); color: var(--white); }
.tier-good  .draft-action-btn { background: var(--green);  color: var(--void); }
.draft-action-btn:hover { background: var(--gold-bright); }
.draft-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Salary cap UI ── */
.cap-price-label { display: block; font-size: 10px; letter-spacing: 0.05em; color: var(--gold); font-weight: 500; margin-top: 4px; text-align: center; }
.cap-price-label.cap-price-min { color: var(--gray); font-weight: 400; }
.cap-price-label.cap-price-unaffordable { color: var(--red, #e85040); }
.tier-great .cap-price-label { color: var(--purple); }
.tier-good  .cap-price-label { color: var(--green); }

.cap-tracker { padding: 8px 12px; background: var(--void-2); border: 1px solid var(--panel-border); border-radius: 2px; margin-bottom: 10px; }
.cap-tracker.cap-tight { border-color: rgba(232,160,32,0.5); }
.cap-tracker.cap-exhausted { border-color: rgba(232,64,48,0.6); background: rgba(232,64,48,0.08); }
.cap-tracker-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; font-size: 10px; }
.cap-tracker-label { color: var(--gray); flex: 0 0 auto; }
.cap-tracker-remaining { font-weight: 600; color: var(--white); flex: 1; }
.cap-tracker-per-slot { color: var(--gray); flex: 0 0 auto; }
.cap-tracker-per-slot.cap-per-warn { color: #e8a020; }
.cap-track { height: 3px; background: var(--panel-border); border-radius: 2px; }
.cap-fill { height: 100%; border-radius: 2px; background: var(--gold); transition: width 0.2s; }
.cap-fill.cap-fill-warn { background: #e8a020; }

.position-picker-actions { display: flex; gap: 8px; margin-top: 8px; }
.position-picker-release { font-size: 10px; font-weight: 600; letter-spacing: 0.07em; padding: 5px 12px; border: 1px solid rgba(232,64,48,0.5); background: rgba(232,64,48,0.12); color: #e85040; border-radius: 2px; cursor: pointer; }
.position-picker-release:hover { background: rgba(232,64,48,0.25); }

.cap-hard-stop { padding: 24px 16px; text-align: center; border: 1px solid rgba(232,64,48,0.4); border-radius: 2px; background: rgba(232,64,48,0.08); }
.cap-hard-stop-title { font-size: 13px; font-weight: 700; color: #e85040; letter-spacing: 0.06em; margin-bottom: 8px; }
.cap-hard-stop-sub { font-size: 12px; color: var(--white); margin-bottom: 6px; }
.cap-hard-stop-hint { font-size: 11px; color: var(--gray); }

/* Unaffordable cards in salary cap mode — greyed out but still visible/inspectable */
.player-card.cap-unaffordable { opacity: 0.45; }
.player-card.cap-unaffordable .draft-action-btn { pointer-events: none; opacity: 0.5; }
.player-card.cap-unaffordable .cap-price-label { color: var(--gray) !important; }

/* Result screen cap summary */
.final-cap-summary { margin: 12px 0; }
.cap-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.cap-summary-stat { background: var(--void-2); border: 1px solid var(--panel-border); border-radius: 2px; padding: 10px 12px; text-align: center; }
.cap-summary-val { font-size: 18px; font-weight: 600; color: var(--white); margin-bottom: 2px; }
.cap-summary-label { font-size: 10px; color: var(--gray); letter-spacing: 0.05em; text-transform: uppercase; }
.cap-tier-breakdown { background: var(--void-2); border: 1px solid var(--panel-border); border-radius: 2px; padding: 10px 14px; }
.cap-tier-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--panel-border); font-size: 12px; }
.cap-tier-row:last-child { border-bottom: none; }
.cap-tier-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cap-tier-dot.cap-tier-elite { background: var(--gold); }
.cap-tier-dot.cap-tier-great { background: var(--purple); }
.cap-tier-dot.cap-tier-good  { background: var(--green); }
.cap-tier-dot.cap-tier-min   { background: var(--gray); }
.cap-tier-name { flex: 1; color: var(--white); }
.cap-tier-count { color: var(--gray); }
.cap-tier-amount { font-weight: 600; min-width: 55px; text-align: right; }

.position-picker {
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  padding: 10px;
  background: var(--void-2);
  margin-bottom: 12px;
}
.position-picker-label { font-size: 10.5px; color: var(--gray); margin-bottom: 8px; text-transform: none; }
.position-picker-hint { font-size: 10px; color: var(--gray-dim); margin-bottom: 8px; font-style: italic; }

.expanded-draft-card {
  background: var(--void-2);
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  padding: 14px;
  margin-bottom: 12px;
  position: relative;
}
/* expanded-draft-card-top — defined in player headshot block above */
.expanded-draft-card-tag { color: var(--gray); font-size: 11px; margin-bottom: 6px; }
.expanded-draft-card-basics { color: var(--white); font-size: 12.5px; margin-bottom: 10px; }
.expanded-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px 0;
  border-top: 1px dashed var(--panel-border);
  border-bottom: 1px dashed var(--panel-border);
}
@media (max-width: 420px) { .expanded-stat-grid { grid-template-columns: repeat(2, 1fr); } }
.expanded-stat { display: flex; flex-direction: column; font-size: 15px; color: var(--white); font-weight: 700; }
.expanded-stat-full { grid-column: 1 / -1; font-size: 13px; border-top: 1px dashed var(--panel-border); padding-top: 6px; margin-top: 2px; }
.expanded-stat-label { font-size: 10px; color: var(--gray); font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; order: -1; margin-bottom: 2px; }
.expanded-draft-card-plus { color: var(--gold); font-weight: 700; font-size: 12.5px; margin-bottom: 6px; }

/* ---------- Statcast percentile card ---------- */
.statcast-card {
  background: var(--void-2);
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  padding: 14px;
  margin-bottom: 12px;
}
.statcast-card-empty { padding: 12px 14px; }
.statcast-card-header {
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.statcast-card-sub { color: var(--gray); font-weight: 400; text-transform: none; letter-spacing: normal; font-size: 10.5px; }
.statcast-note { color: var(--gray); font-size: 11px; font-style: italic; }
.statcast-bar-row {
  display: grid;
  grid-template-columns: 96px 1fr 52px;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}
.statcast-bar-label { font-size: 10.5px; color: var(--white); }
.statcast-bar-track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.10); /* light gray track — filled portion overlaid on top */
}
.statcast-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 3px;
}
.statcast-bar-track-empty {
  background: rgba(255,255,255,0.07);
}
.statcast-bar-track-value { background: transparent; }
.statcast-bar-track-est { border: 1px dashed rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); }
.statcast-bar-marker-est { font-size: 8px !important; }
.statcast-est-label { font-size: 7px; opacity: 0.7; margin-left: 1px; }
.statcast-bar-raw-pos { color: #5a8fc9; }
.statcast-bar-raw-neg { color: #c0402e; }
.statcast-not-qualified {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font-size: 8.5px;
  color: var(--gray-dim);
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
}
.statcast-bar-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--white);
  /* background set inline to match bar color */
  border: 1.5px solid rgba(255, 255, 255, 0.30);
}
.statcast-bar-raw { font-size: 11px; color: var(--gold); font-weight: 700; text-align: right; }

/* POOR / AVERAGE / GREAT axis header — appears once at top of bar area */
.statcast-pag-header {
  display: flex;
  padding-left: calc(96px + 10px);
  padding-right: calc(52px + 10px);
  justify-content: space-between;
  margin-bottom: 4px;
  align-items: flex-end;
}
.statcast-pag-label {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.statcast-pag-poor  { color: #5a8fc9; }
.statcast-pag-avg   { color: var(--gray-dim); }
.statcast-pag-great { color: #c0402e; }
/* Triangle markers pointing down */
.statcast-pag-label::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
/* Est footnote below sections with estimated bars */
.statcast-est-footnote {
  font-size: 8px;
  color: var(--gray-dim);
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(255,255,255,0.1);
}
.statcast-section { margin-bottom: 10px; }
.statcast-section-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray-dim);
  border-bottom: 1px dashed var(--panel-border);
  padding-bottom: 4px;
  margin-bottom: 8px;
}
.statcast-catching-row {
  display: grid;
  grid-template-columns: 96px 1fr 52px;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}
.statcast-catching-note { font-size: 10px; color: var(--gray-dim); font-style: italic; }
.statcast-pill-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.statcast-pill {
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 2px;
  border: 1px solid var(--panel-border);
  color: var(--gray);
  background: var(--panel);
}
.statcast-pill-pos { color: var(--green); border-color: rgba(var(--green-rgb), 0.4); }
.statcast-pill-neg { color: var(--red); border-color: rgba(192, 82, 74, 0.4); }
@media (max-width: 420px) {
  .statcast-bar-row { grid-template-columns: 76px 1fr 44px; gap: 6px; }
  .statcast-bar-label { font-size: 9.5px; }
}
.position-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.position-option {
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.04em;
  background: var(--void);
  color: var(--gray);
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  padding: 6px 10px;
  cursor: pointer;
}
.position-option:hover { border-color: var(--gold-bright); }
/* Natural (real, actually-played) position - the visual distinction
   the whole picker concept hinges on, per the PerfectDraft reference */
.position-option.natural { border-color: var(--gold); color: var(--gold); background: rgba(var(--gold-rgb), 0.08); }
/* The slot they currently occupy, swap mode only - a third distinct
   state from natural/out-of-position, since "where they are now" and
   "where they're naturally suited" aren't always the same slot */
.position-option.current { background: var(--gold); color: var(--void); font-weight: 700; }
/* Armed but not yet confirmed - a second click on this SAME option
   commits it. Animated rather than just another static border color,
   so it's unmistakably distinct from natural/current at a glance
   rather than just one more flavor of gold highlighting. */
.position-option.pending-confirm {
  border-color: var(--gold-bright);
  background: var(--gold-bright);
  color: var(--void);
  font-weight: 700;
  animation: pendingPulse 1s ease-in-out infinite;
}
@keyframes pendingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--gold-rgb), 0.5); }
  50% { box-shadow: 0 0 0 4px rgba(var(--gold-rgb), 0); }
}
.position-option-occupant { display: block; font-size: 9px; color: var(--gray-dim); margin-top: 1px; }
/* Pitcher slot restriction — blocked slots greyed out and unclickable */
.position-option.slot-blocked { opacity: 0.25; cursor: not-allowed; border-color: var(--gray-dim); color: var(--gray-dim); background: transparent; pointer-events: none; }
.position-option.slot-blocked:hover { border-color: var(--gray-dim); }
#draft-picker-panel { margin-bottom: 14px; }
#draft-picker-panel:empty { display: none; }
#lineup-swap-panel { margin-bottom: 14px; }
#lineup-swap-panel:empty { display: none; }
.position-picker-cancel {
  font-family: var(--font);
  font-size: 10px;
  color: var(--gray);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

/* ---------- lineup grid (used during draft AND in the result recap) ---------- */

.lineup-card { padding: 20px; position: sticky; top: 20px; }
@media (max-width: 1000px) { .lineup-card { position: static; } }

.lineup-card-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--gold);
  margin-bottom: 14px;
}

.lineup-group { margin-bottom: 8px; }
.lineup-group:last-child { margin-bottom: 0; }
.lineup-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--void-2);
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  padding: 9px 12px;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--white);
  user-select: none;
}
.lineup-group-header:hover { border-color: var(--gold); }
.lineup-group-name { color: var(--gold); font-weight: 700; margin-right: 8px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }
.lineup-group-count { color: var(--gray); font-weight: 400; }
.lineup-group-header .chevron { color: var(--gray); transition: transform 0.15s; font-size: 10px; }
.lineup-group.expanded .chevron { transform: rotate(180deg); }
.lineup-group-body {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 9px 0 0;
}
.lineup-group.expanded .lineup-group-body { display: grid; }
@media (max-width: 480px) { .lineup-group-body { grid-template-columns: 1fr; } }

.slot-box {
  background: var(--void-2);
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  padding: 14px 10px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  transition: border-color 0.15s, background-color 0.15s;
}
.slot-box.swappable { cursor: pointer; }
.slot-box.swappable:hover { border-color: var(--gold-bright); }
.slot-box.swap-active { border-color: var(--gold); box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.25); }
.player-card.picker-active { border-color: var(--gold); box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.25); }

.slot-box-pos {
  font-size: 10px;
  background: var(--void);
  color: var(--gold);
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  padding: 1px 6px;
  align-self: flex-start;
}
.slot-box-name { font-size: 13.5px; color: var(--white); font-weight: 600; text-transform: none; letter-spacing: normal; }
.slot-box.empty .slot-box-name { color: var(--gray-dim); font-weight: 400; }
.slot-box-tag { font-size: 9.5px; color: var(--gold); letter-spacing: 0.02em; text-transform: none; }
.slot-box-stats { font-size: 10px; color: var(--gray); text-transform: none; letter-spacing: normal; }
.slot-box-plus { font-size: 10px; color: var(--gold); text-transform: none; letter-spacing: normal; }

/* ---------- result screen ---------- */

.scoreboard { text-align: center; padding: 48px 30px 30px; margin-top: 10px; }

/* Held back until the result animation finishes, then faded in together -
   mirrors Era Ball's reveal: only the record + streak squares are visible
   while the season "plays out," everything else (sub-stats, banners,
   ticker, awards, roster) appears only once that's done. Removing the
   class (rather than swapping to a forced display value) restores each
   element's own natural display type instead of assuming they're all
   block-level - a button and a div don't necessarily want the same one. */
.reveal-pending { display: none !important; }
.fade-in-reveal { animation: revealFadeIn 0.4s ease-out; }
@keyframes revealFadeIn { from { opacity: 0; } to { opacity: 1; } }

.scoreboard-label { font-size: 12px; letter-spacing: 0.2em; color: var(--gray); }

.final-record {
  font-weight: 700;
  font-size: clamp(54px, 13vw, 104px);
  color: var(--gold);
  text-shadow: 0 0 30px rgba(var(--gold-rgb), 0.4);
  line-height: 1;
  margin: 8px 0;
  font-variant-numeric: tabular-nums;
}

.final-message {
  font-size: 15px;
  color: var(--white);
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}

.final-sub { font-size: 12px; color: var(--gray); margin: 3px 0; text-transform: none; letter-spacing: normal; }

/* Opponent comparison table */
.opp-comparison { font-size: 12px; }

/* ---------- Team Identity / Analysis panel ---------- */
.analysis-identity-tag {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.analysis-bars { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.analysis-row { display: grid; grid-template-columns: 150px 1fr 44px; align-items: center; gap: 8px; }
.analysis-label { font-size: 10.5px; color: var(--gray); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.analysis-badge { font-size: 7.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 5px; border-radius: 2px; }
.analysis-badge-strength { background: rgba(var(--gold-rgb), 0.15); color: var(--gold); border: 1px solid rgba(var(--gold-rgb), 0.4); }
.analysis-badge-weakness { background: rgba(140,140,140,0.10); color: var(--gray-dim); border: 1px solid rgba(140,140,140,0.3); }
.analysis-bar-wrap { position: relative; height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: visible; }
.analysis-bar { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
.analysis-bar.tier-elite  { background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.6), var(--gold)); }
.analysis-bar.tier-great  { background: linear-gradient(90deg, rgba(var(--purple-rgb), 0.5), var(--purple)); }
.analysis-bar.tier-avg    { background: rgba(255,255,255,0.2); }
.analysis-bar.tier-weak   { background: rgba(192,82,74,0.5); }
/* The 100-mark (league average line) sits at exactly 50% of the bar's width (since 200 = visual ceiling) */
.analysis-avg-line { position: absolute; left: 50%; top: -2px; height: 10px; width: 1px; background: rgba(255,255,255,0.2); pointer-events: none; }
.analysis-score { font-size: 11px; font-weight: 700; text-align: right; }
.analysis-score.tier-elite { color: var(--gold); }
.analysis-score.tier-great { color: var(--purple); }
.analysis-score.tier-avg   { color: var(--gray); }
.analysis-score.tier-weak  { color: var(--red); }
.analysis-pressure-section { border-top: 1px solid var(--panel-border); padding-top: 12px; }
.analysis-pressure-label { font-size: 9px; color: var(--gray-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.analysis-pressure-note { font-size: 8.5px; text-transform: none; letter-spacing: 0; margin-left: 4px; }
.analysis-pressure-players { display: flex; gap: 10px; flex-wrap: wrap; }
.analysis-pressure-player { font-size: 11px; color: var(--white); }
.analysis-pressure-score { font-size: 10px; color: var(--gray); margin-left: 3px; }

/* ---------- Postseason screen ---------- */
.postseason-round-label { font-size: 11px; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; margin-bottom: 6px; }
.postseason-matchup { display: flex; align-items: center; justify-content: center; gap: 30px; margin: 10px 0; }
.postseason-side-label { font-size: 11px; color: var(--gray); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; }
.postseason-score { font-size: 48px; font-weight: 700; color: var(--gold); line-height: 1; text-shadow: 0 0 16px rgba(var(--gold-rgb), 0.4); }
.postseason-score-opp { color: var(--white); text-shadow: none; }
.postseason-vs { font-size: 24px; color: var(--gray-dim); align-self: flex-end; margin-bottom: 6px; }
.postseason-game-result-line { font-size: 13px; color: var(--white); margin-top: 6px; }
.postseason-special-performance { font-size: 11px; color: var(--gold); margin-top: 8px; }
.postseason-special-performance .label { text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray-dim); margin-right: 6px; }

.postseason-bracket-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.postseason-bracket-round { background: var(--void-2); border: 1px solid var(--panel-border); border-radius: 2px; padding: 8px 10px; min-width: 100px; flex: 1; cursor: pointer; }
.postseason-bracket-round.active { border-color: var(--gold); box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.25); }
.postseason-bracket-round.future { opacity: 0.4; cursor: default; }
.postseason-bracket-round-name { font-size: 8.5px; color: var(--gray-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.postseason-bracket-round-score { font-size: 14px; font-weight: 700; color: var(--white); }
.postseason-bracket-round-score .sep { color: var(--gray-dim); margin: 0 3px; font-weight: 400; }
.postseason-bracket-round-status { font-size: 8.5px; margin-top: 3px; letter-spacing: 0.05em; }
.postseason-bracket-round-status.live { color: var(--gold); }
.postseason-bracket-round-status.won { color: var(--green); }
.postseason-bracket-round-status.lost { color: var(--red); }
.postseason-bracket-arrow { color: var(--gray-dim); font-size: 14px; }

.postseason-round-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.postseason-game-tile { background: var(--void-2); border: 1px solid var(--panel-border); border-radius: 2px; padding: 8px; cursor: pointer; }
.postseason-game-tile:hover { border-color: var(--panel-border-hover); }
.postseason-game-tile-header { display: flex; justify-content: space-between; font-size: 9px; color: var(--gray-dim); margin-bottom: 4px; }
.postseason-game-tile-result { font-weight: 700; }
.postseason-game-tile-result.win { color: var(--green); }
.postseason-game-tile-result.loss { color: var(--red); }
.postseason-game-tile-score { font-size: 16px; font-weight: 700; color: var(--white); margin-bottom: 2px; }
.postseason-game-tile-note { font-size: 9px; color: var(--gray); }
.postseason-game-tile-special { margin-top: 3px; }
.postseason-game-tile-special-star { font-size: 8.5px; color: var(--gold); letter-spacing: 0.03em; }

.box-score-special {
  border-top: 1px solid var(--panel-border);
  padding-top: 14px;
  margin-top: 4px;
}
.box-score-special-label { font-size: 9px; color: var(--gray-dim); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; }
.box-score-special-name { font-size: 15px; font-weight: 700; color: var(--gold); margin-bottom: 3px; }
.box-score-special-line { font-size: 11px; color: var(--gray); }

/* ── Gameday Highlight Card ───────────────────────────────── */
.hc-wrap {
  border-top: 1px solid var(--panel-border);
  margin-top: 18px;
  padding-top: 16px;
}
.hc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.hc-situation {
  font-size: 10px;
  color: var(--gray-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hc-tab-active {
  font-size: 10px;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.hc-headline {
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}
.hc-wp-line {
  font-size: 11px;
  color: var(--gray);
  margin-bottom: 10px;
}
.hc-wp-est {
  font-size: 10px;
  color: var(--gray-dim);
}
.hc-description {
  font-size: 12px;
  color: var(--gray);
  margin-bottom: 8px;
  line-height: 1.4;
}
.hc-description-main {
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
  line-height: 1.4;
  max-width: 680px;
}
.hc-statcast-row {
  display: flex;
  gap: 24px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--panel-border);
}
.hc-statcast-label {
  font-size: 9px;
  color: var(--gray-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.hc-statcast-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
}
.hc-player-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: 14px;
  gap: 8px;
}
.hc-player {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.hc-player-right {
  justify-content: flex-end;
}
.hc-player-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--panel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-dim);
  flex-shrink: 0;
}
.hc-player .player-photo,
.hc-player .player-photo-fallback {
  width: 40px; height: 40px;
  min-width: 40px; min-height: 40px;
  max-width: 40px; max-height: 40px;
  flex-shrink: 0;
}
.hc-player-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
}
.hc-player-meta {
  font-size: 10px;
  color: var(--gray-dim);
  margin-top: 1px;
}
.hc-player-info-right {
  text-align: right;
}
.hc-count-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  width: 80px;
}
.hc-count-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
}
.hc-body {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.hc-zone-wrap {
  flex-shrink: 0;
  position: relative;
  width: 220px;
  height: 280px;
  border-radius: 4px;
  overflow: hidden;
}
.hc-stadium-bg {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 45%;
  background-size: 400%;
  background-position: center 100%;
  opacity: 1;
}
.hc-infield-bg {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background-size: 400%;
  background-position: center 0%;
  opacity: 1;
}
.hc-batter-model {
  position: absolute;
  height: 110%;
  width: auto;
  object-fit: contain;
  pointer-events: none;
  bottom: -3px;
  opacity: 1;
}
.hc-zone {
  position: absolute;
  left: -20px;
  top: 85%;
  transform: translateY(-85%);
  z-index: 1;
}
.hc-pitch-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hc-pitch-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hc-pitch-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.hc-pitch-detail {
  flex: 1;
}
.hc-pitch-outcome {
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
}
.hc-pitch-meta {
  font-size: 10px;
  color: var(--gray-dim);
  margin-top: 1px;
}
.hc-pitch-count {
  font-size: 10px;
  color: var(--gray-dim);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.hc-disclaimer {
  font-size: 9px;
  color: var(--gray-dim);
  margin-top: 12px;
  font-style: italic;
}

.bs-notes { border-top: 1px solid var(--panel-border); padding-top: 12px; margin-bottom: 4px; font-size: 10px; }
.bs-notes-section-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray); margin-top: 8px; margin-bottom: 4px; }
.bs-notes-section-label:first-child { margin-top: 0; }
.bs-note-row { margin-bottom: 4px; color: var(--gray); }
.bs-note-label { color: var(--white); font-weight: 700; margin-right: 6px; }

.postseason-champion-banner {
  text-align: center;
  padding: 30px;
  margin: 20px 0;
  background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.12), transparent);
  border: 1px solid var(--gold);
  border-radius: 3px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(var(--gold-rgb), 0.4);
}

.postseason-controls { display: flex; gap: 10px; justify-content: center; margin: 20px 0 10px; flex-wrap: wrap; }
.postseason-controls .btn-primary, .postseason-controls .btn-outline { padding: 12px 22px; }

/* Round MVP grid — 2×2, each tile shows round name + player + stat line */
.postseason-mvp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0;
}
.postseason-mvp-tile {
  background: var(--void-2);
  border: 1px solid var(--panel-border);
  border-radius: 3px;
  padding: 16px 18px;
}
.postseason-mvp-tile-round {
  font-size: 8.5px;
  color: var(--gray-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 5px;
}
.postseason-mvp-tile-label {
  font-size: 9px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.postseason-mvp-tile-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.postseason-mvp-tile-stats {
  font-size: 10px;
  color: var(--gray);
  line-height: 1.5;
}

.postseason-qualify-banner { text-align: center; margin: 16px 0; }
.postseason-qualify-banner .btn-primary { display: block; margin: 0 auto; }
.postseason-qualify-note { font-size: 11px; color: var(--gray); margin-top: 8px; }

/* ---------- Result screen tabs ---------- */
.result-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--panel-border);
  margin: 18px 0 0;
}
.result-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--gray);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 10px 18px;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.result-tab:hover { color: var(--white); }
.result-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.result-tab-panel { padding-top: 4px; }
.roster-mobile-list { display: none; }
.roster-mobile-section { margin-bottom: 12px; }
.roster-mobile-section-label { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); padding: 8px 0 4px; border-bottom: 1px solid var(--panel-border); margin-bottom: 6px; }
.roster-mobile-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.roster-mobile-slot { font-size: 9px; color: var(--gray); letter-spacing: 0.08em; min-width: 28px; }
.roster-mobile-name { font-size: 12px; color: var(--white); flex: 1; }
.roster-mobile-stats { font-size: 10px; color: var(--gray); text-align: right; }
.result-tab-placeholder {
  padding: 40px 0;
  text-align: center;
}
.result-tab-placeholder-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gray);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.result-tab-placeholder-body {
  font-size: 11px;
  color: var(--gray-dim);
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.6;
}
.result-action-bar {
  margin: 18px 0 4px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

/* ---------- Box score modal ---------- */
/* max-width override lives after .modal-panel base rule to win the cascade — see below */
.box-score-final { text-align: center; margin-bottom: 16px; }
/* Line score table */
.line-score-wrap { margin-bottom: 14px; overflow-x: auto; }
.line-score { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--font); }
.line-score th, .line-score td { padding: 5px 7px; text-align: center; border-bottom: 1px solid var(--panel-border); white-space: nowrap; }
.line-score th { color: var(--gray-dim); font-weight: 400; font-size: 10px; letter-spacing: 0.05em; }
.line-score td.line-score-team { text-align: left; color: var(--gray); font-size: 11px; min-width: 120px; }
.line-score td.line-score-runs { font-weight: 700; color: var(--white); }
.line-score td.line-score-inning { color: var(--gray); }
.line-score td.line-score-inning.scored { color: var(--white); }
.line-score td.line-score-zero { color: var(--gray-dim); }
.line-score-x { color: var(--gray-dim); font-style: italic; }
.line-score-divider { border-left: 1px solid var(--panel-border) !important; }
.line-score-decision { display: flex; gap: 16px; justify-content: center; font-size: 11px; color: var(--gray); margin-bottom: 14px; flex-wrap: wrap; }
.line-score-decision span { white-space: nowrap; }
.line-score-decision .decision-label { color: var(--gray-dim); margin-right: 3px; }
.line-score-decision .decision-name { color: var(--white); }
.box-score-final-line { font-size: 11px; color: var(--gray); text-transform: uppercase; letter-spacing: 0.1em; }
.box-score-final-score { font-size: 34px; font-weight: 700; color: var(--white); margin: 4px 0; }
.box-score-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 760px) { .box-score-tables { grid-template-columns: 1fr; } }
.box-score-col { min-width: 0; display: flex; flex-direction: column; }
.box-score-team-block { min-width: 0; }
.box-score-team-label { font-size: 10px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.box-score-table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.bs-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bs-table-scroll .box-score-table { width: auto; min-width: 100%; white-space: nowrap; }
.box-score-table th { text-align: right; color: var(--gray-dim); font-weight: 400; font-size: 9px; text-transform: uppercase; padding: 3px 4px; border-bottom: 1px solid var(--panel-border); }
.box-score-table th:first-child { text-align: left; }
.box-score-table td { text-align: right; color: var(--white); padding: 3px 4px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.box-score-table td:first-child { text-align: left; color: var(--white); font-weight: 600; }
.box-score-table tfoot td { font-weight: 700; border-top: 1px solid var(--panel-border); border-bottom: none; }
/* Cumulative stat columns — slightly muted to distinguish from per-game counting stats */
.bs-cum { color: var(--gray) !important; }
.box-score-table th.bs-cum { color: var(--gold) !important; opacity: 0.7; }
.bs-cum-note { font-size: 8.5px; color: var(--gray-dim); margin-top: 6px; margin-bottom: 10px; }
.bs-sub-row td { color: var(--gray) !important; font-style: italic; }
.bs-sub-name { padding-left: 18px !important; }
.bs-sub-label { font-size: 8.5px; color: var(--gold); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-left: 4px; font-style: normal; }
.bs-pos-label { font-size: 8.5px; color: var(--gray); font-weight: 400; letter-spacing: 0.03em; margin-left: 4px; }
.box-score-pitching-section { margin-top: 10px; }

/* Postseason cumulative stats tables */
.ps-stats-section-label { font-size: 10px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.ps-stats-table-wrap { overflow-x: auto; }
.ps-stats-table { width: 100%; border-collapse: collapse; font-size: 10.5px; white-space: nowrap; }
.ps-stats-table th { text-align: right; color: var(--gray-dim); font-weight: 400; font-size: 9px; text-transform: uppercase; padding: 3px 6px; border-bottom: 1px solid var(--panel-border); }
.ps-stats-table th:first-child { text-align: left; min-width: 130px; }
.ps-stats-table td { text-align: right; color: var(--white); padding: 3px 6px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ps-stats-table td:first-child { text-align: left; font-weight: 600; }

.opp-row { display: grid; grid-template-columns: 150px 1fr 1fr; gap: 4px; padding: 5px 0; border-bottom: 1px solid var(--panel-border); }
.opp-row:last-child { border-bottom: none; }
.opp-header { font-size: 10px; color: var(--gray-dim); text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 6px; }
.opp-header span:nth-child(2), .opp-header span:nth-child(3) { text-align: center; }
.opp-label { color: var(--gray); text-align: left; }
.opp-team { color: var(--white); font-weight: 700; text-align: center; }
.opp-league { color: var(--gray-dim); text-align: center; }
.opp-highlight { color: var(--gold); }

/* Team Totals panel */
.team-totals-grid { display: flex; flex-direction: column; gap: 14px; }
.team-totals-section-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gray-dim); border-bottom: 1px dashed var(--panel-border); padding-bottom: 4px; margin-bottom: 8px; }
.team-totals-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.team-total-stat { display: flex; flex-direction: column; }
.team-total-label { font-size: 9.5px; color: var(--gray); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.team-total-value { font-size: 16px; font-weight: 700; color: var(--white); }

.streak-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  margin: 24px auto 10px;
  max-width: 680px;
}
.streak-sq { width: 9px; height: 9px; border-radius: 1px; flex-shrink: 0; }
.streak-sq.win { background: var(--gold); }
.streak-sq.loss { background: #2c2c2c; }

.streak-legend {
  display: flex;
  gap: 18px;
  justify-content: center;
  font-size: 10.5px;
  color: var(--gray);
  margin-bottom: 10px;
  text-transform: none;
}
.streak-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 1px; margin-right: 5px; vertical-align: middle; }

.record-banner {
  margin: 22px auto 0;
  max-width: 480px;
  padding: 14px 20px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  background: rgba(var(--gold-rgb), 0.08);
  color: var(--gold);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  text-align: center;
}

.true-story-banner {
  margin: 12px auto 0;
  max-width: 480px;
  padding: 12px 20px;
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  color: var(--gray);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: none;
}
.true-story-banner em { color: var(--white); font-style: normal; }

.manager-banner {
  margin: 12px auto 0;
  max-width: 480px;
  padding: 12px 20px;
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  color: var(--gray);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.manager-banner em { color: var(--white); font-style: normal; }
.manager-banner.over { border-color: var(--gold); color: var(--gold); background: rgba(var(--gold-rgb), 0.08); }
.manager-banner.under { border-color: var(--red); color: var(--red); background: rgba(192, 82, 74, 0.07); }
.manager-banner.over em, .manager-banner.under em { color: inherit; }

.highlights-ticker {
  margin: 18px 0 0;
  border-top: 1px solid var(--panel-border);
  border-bottom: 1px solid var(--panel-border);
  background: var(--void-2);
  overflow: hidden;
  white-space: nowrap;
  padding: 9px 0;
}
.ticker-track {
  display: inline-block;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--white);
  animation: tickerScroll linear infinite;
}
.ticker-track .ticker-item { color: var(--gold); font-weight: 700; margin: 0 10px; }
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

#season-awards-body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 18px;
}
@media (max-width: 480px) { #season-awards-body { grid-template-columns: 1fr; } }

.award-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--panel-border);
  font-size: 12.5px;
}
.award-name { color: var(--gold); font-weight: 700; letter-spacing: 0.04em; flex-shrink: 0; }
.award-winner { color: var(--white); text-align: right; }
.award-stat { color: var(--gray); font-size: 11px; }
.award-empty { color: var(--gray); font-size: 12.5px; text-align: center; padding: 10px 0; grid-column: 1 / -1; }

.result-recap { margin: 24px 0; position: static; }

.diamond-field {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.95;
  max-width: 720px;
  margin: 0 auto;
  border-radius: 2px;
  overflow: hidden;
}
.diamond-field-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}
.diamond-positions { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.diamond-pos-card {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 108px;
  background: var(--void-2);
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  padding: 6px 8px;
  text-align: center;
}
.diamond-pos-badge {
  position: absolute;
  top: -7px;
  right: -4px;
  font-size: 8px !important;
  padding: 0px 3px !important;
}
.diamond-pos-label { font-size: 9px; color: var(--gray); letter-spacing: 0.08em; }
.diamond-pos-name { font-size: 11px; color: var(--white); margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diamond-pos-stat { font-size: 9.5px; color: var(--gold); display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.diamond-pos-stat-label { color: var(--gray); font-size: 8px; letter-spacing: 0.06em; }
.diamond-pos-sim { font-size: 9.5px; color: var(--gray-dim, #666); display: flex; justify-content: space-between; align-items: center; gap: 4px; margin-top: 1px; }
.diamond-pos-sim-label { font-size: 8px; letter-spacing: 0.06em; }
.diamond-pos-sim-val { color: var(--gray); }

/* Real field coordinates, viewed from a broadcast-style aerial angle -
   home plate at the bottom, outfield spread across the top. Percentage-
   based so the whole layout scales with .diamond-field's own width. */
.diamond-pos-card-wrap.pos-C  { left: 50%; top: 91%; }
.diamond-pos-card-wrap.pos-SP1 { left: 50%; top: 64%; }
.diamond-pos-card-wrap.pos-1B { left: 72%; top: 58%; }
.diamond-pos-card-wrap.pos-2B { left: 62%; top: 38%; }
.diamond-pos-card-wrap.pos-3B { left: 28%; top: 58%; }
.diamond-pos-card-wrap.pos-SS { left: 38%; top: 38%; }
.diamond-pos-card-wrap.pos-LF { left: 19%; top: 25%; }
.diamond-pos-card-wrap.pos-CF { left: 50%; top: 12%; }
.diamond-pos-card-wrap.pos-RF { left: 81%; top: 25%; }

/* DH has no real fielding position - deliberately NOT placed on the
   field itself, shown in its own clearly-separate area below instead
   so the diagram never implies a fictional defensive spot for them. */
.diamond-dh-area {
  max-width: 340px;
  width: 100%;
  margin: 14px auto 0;
}
.diamond-dh-area .diamond-pos-card {
  position: relative;
  transform: none;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
}
.diamond-dh-area .diamond-pos-name { margin: 0; flex: 1; }
.diamond-dh-area .diamond-pos-label { width: 64px; flex-shrink: 0; line-height: 1.5; }
.diamond-dh-area .dh-stats-col { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.diamond-dh-note { color: var(--gray-dim); font-size: 8px; }

.result-rotation-strip { margin-top: 14px; }
.rotation-strip-label { font-size: 10px; color: var(--gray-dim); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; }
/* rotation-strip-cards — defined in player headshot block above */
.rotation-strip-cards .diamond-pos-card {
  position: relative; /* must be relative (not static) so the shimmer-overlay's inset:0 is contained within the card, not the result screen */
  transform: none;
}

.mini-diamond-field { max-width: 100%; aspect-ratio: 1 / 0.85; margin-bottom: 6px; }
.mini-diamond-field .diamond-pos-card { width: 64px; padding: 3px 4px; }
.mini-diamond-field .diamond-pos-label { font-size: 7.5px; }
.mini-diamond-field .diamond-pos-name { font-size: 8.5px; margin: 1px 0 0; }
.mini-diamond-field .diamond-pos-badge { top: -6px; right: -3px; font-size: 7px !important; }
.mini-diamond-dh {
  margin-bottom: 14px;
  font-size: 10px;
  color: var(--gray);
  text-align: center;
}
.mini-diamond-dh span { color: var(--gold); }
@media (max-width: 700px) {
  .diamond-pos-card { width: 84px; padding: 4px 6px; }
  .diamond-pos-name { font-size: 9.5px; }
  .diamond-pos-stat { font-size: 8.5px; }
}


#play-again-btn { display: block; margin: 10px auto 0; }

/* ---------- secondary nav buttons (setup screen) ---------- */

.nav-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* ---------- modal overlay ---------- */
body.modal-open { overflow: hidden; touch-action: none; }
html:has(body.modal-open) { overflow: hidden; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 500;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px;
  overflow-y: auto;
}
.modal-overlay.active { display: flex; }

.modal-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 3px;
  max-width: 640px;
  width: 100%;
  padding: 30px;
  position: relative;
}
/* Box score needs more room for two side-by-side stat tables — override after the base rule so cascade wins */
.box-score-modal-panel { max-width: 1060px; width: 100%; display: flex; flex-direction: column; overflow: hidden; max-height: 90vh; padding: 0; }

/* ── Box score modal — header ── */
.box-score-header { flex-direction: row; align-items: flex-start; padding: 12px 16px; }
.box-score-header-meta { flex: 1; min-width: 0; }
.box-score-header-game { font-size: 10px; color: var(--gray-dim); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 3px; }
.box-score-header-matchup { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.box-score-header-teams { font-size: 15px; font-weight: 600; color: var(--white); }
.box-score-header-score { font-size: 14px; font-weight: 700; }
.box-score-header-score.win { color: #3a9e5f; }
.box-score-header-score.loss { color: #ef4444; }
.box-score-header-result { font-size: 10px; color: var(--gray-dim); letter-spacing: 0.06em; text-transform: uppercase; }

/* ── Box score modal — tab strip ── */
.box-score-tab-strip { display: flex; border-bottom: 1px solid var(--panel-border); flex-shrink: 0; }
.box-score-tab { flex: 1; padding: 9px 0; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; border: none; background: transparent; cursor: pointer; font-family: var(--font); color: var(--gray-dim); font-weight: 400; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; }
.box-score-tab.active { color: var(--white); font-weight: 700; border-bottom-color: var(--gold); }
.box-score-tab:hover:not(.active) { color: var(--white); }

/* ── Box score modal — tab content ── */
.box-score-tab-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.box-score-tab-content > .modal-body { padding: 12px 30px 30px; overflow-y: auto; }
.box-score-tab-content.hidden { display: none; }

/* ── Box score modal — play by play layout ── */
.box-score-pbp-layout { display: flex; flex: 1; overflow: hidden; min-height: 0; }
.box-score-pbp-timeline { width: 35%; border-right: 1px solid var(--panel-border); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; }
.box-score-pbp-filters { display: flex; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--panel-border); flex-shrink: 0; flex-wrap: wrap; }
.box-score-pbp-events { flex: 1; overflow-y: auto; }
.box-score-pbp-detail { flex: 1; overflow-y: auto; padding: 14px 18px; }

/* ── Play by Play — filter chips ── */
.pbp-filter-chip { padding: 3px 9px; font-size: 9px; letter-spacing: 0.09em; text-transform: uppercase; border: 1px solid var(--panel-border); border-radius: 2px; cursor: pointer; font-family: var(--font); background: transparent; color: var(--gray-dim); transition: all 0.12s; }
.pbp-filter-chip.active { border-color: rgba(201,164,85,0.5); background: rgba(201,164,85,0.09); color: var(--gold); }
.pbp-filter-chip:hover:not(.active) { color: var(--white); border-color: rgba(255,255,255,0.2); }

/* ── Play by Play — inning header ── */
.pbp-inning-header { padding: 8px 12px 4px; font-size: 13px; font-weight: 700; color: var(--white); border-bottom: 1px solid var(--panel-border); }

/* ── Play by Play — event rows ── */
.pbp-event-row { display: flex; gap: 8px; padding: 8px 12px; cursor: pointer; border-left: 2px solid transparent; transition: background 0.1s; }
.pbp-event-row--pa:hover { background: rgba(255,255,255,0.03); }
.pbp-event-row--pa.selected { background: rgba(74,143,212,0.07); border-left-color: rgba(74,143,212,0.5); }
.pbp-event-row--nonevent { opacity: 0.65; cursor: default; align-items: flex-start; }

/* ── Play by Play — PA avatar ── */
.pbp-pa-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: rgba(40,55,90,0.8); border: 1px solid rgba(255,255,255,0.07); display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--gray-dim); font-weight: 700; overflow: hidden; }
.pbp-pa-avatar--photo { background: transparent; border-color: rgba(255,255,255,0.12); padding: 0; }
.pbp-pa-avatar--photo .player-photo { width: 28px; height: 28px; object-fit: cover; border-radius: 50%; display: block; }
.pbp-pa-avatar--photo .player-photo-fallback { display: none; }

/* ── Play by Play — PA content ── */
.pbp-pa-content { flex: 1; min-width: 0; }
.pbp-badge { font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 6px; border-radius: 2px; display: inline-block; margin-bottom: 3px; }
.pbp-pa-desc { font-size: 11px; color: var(--gray); line-height: 1.45; }
.pbp-pa-desc strong { color: var(--white); }
.pbp-pa-score-update { font-size: 10px; font-weight: 700; color: var(--gold); margin-top: 3px; }

/* ── Play by Play — non-PA event ── */
.pbp-event-icon { width: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--gray-dim); }
.pbp-event-nonpa { flex: 1; }
.pbp-event-nonpa-type { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-dim); margin-bottom: 2px; }
.pbp-event-nonpa-desc { font-size: 11px; color: var(--gray); }

/* ── Play by Play — detail panel ── */
.pbp-detail-label { font-size: 10px; color: var(--gold); font-weight: 700; letter-spacing: 0.04em; text-align: right; margin-bottom: 4px; }
.pbp-empty-prompt { display: flex; align-items: center; justify-content: center; height: 200px; font-size: 11px; color: var(--gray-dim); letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- Share Result card ---------- */
#share-card-capture { display: flex; justify-content: center; }
.share-card {
  width: 400px;
  max-width: 100%;
  background: var(--void);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 16px;
  font-family: var(--font);
}
.share-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 3px; }
.share-brand { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; color: var(--gold); }
.share-sub { font-size: 8px; color: var(--gray-dim); letter-spacing: 0.04em; margin-top: 2px; }
.share-record { font-size: 30px; font-weight: 700; color: var(--white); line-height: 1; text-align: right; }
.share-record-label { font-size: 8px; color: var(--gold); text-align: right; letter-spacing: 0.04em; margin-top: 2px; min-height: 8px; }
.share-meta { font-size: 9px; color: var(--gray); text-align: center; margin: 7px 0 10px; letter-spacing: 0.02em; }
.share-meta .gold { color: var(--gold); }

.diamond-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.95;
  background: linear-gradient(180deg, #1d3a24, #16291c);
  border: 1px solid var(--panel-border);
  border-radius: 3px;
  margin-bottom: 10px;
  overflow: hidden;
}
.diamond-field-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.dcard { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-align: center; width: 50px; line-height: 1; }
.dcard-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--panel);
  border: 1.5px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  flex-shrink: 0;
}
.dcard-circle span { font-size: 6px; font-weight: 700; color: var(--gold); line-height: 1; display: block; }
.dcard-circle.tier-elite { border-color: var(--gold); box-shadow: 0 0 4px rgba(var(--gold-rgb), 0.6); }
.dcard-circle.tier-great { border-color: var(--purple); }
.dcard-circle.tier-great span { color: var(--purple); }
.dcard-circle.tier-good { border-color: var(--green); }
.dcard-circle.tier-good span { color: var(--green); }
.dcard-name { font-size: 6.5px; font-weight: 700; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50px; }
.dcard-meta { font-size: 5.5px; color: var(--gray); margin-top: 1.5px; }
.dcard-war { font-size: 5.5px; color: var(--gold-bright); margin-top: 1px; }
/* Real field coordinates - same proven values as the result screen's own
   diamond (.diamond-pos-card.pos-X in this same file), reused exactly
   rather than re-guessed, since those are already confirmed correct. */
.dcard.pos-C  { left: 50%; top: 91%; }
.dcard.pos-SP1 { left: 50%; top: 64%; }
.dcard.pos-1B { left: 72%; top: 58%; }
.dcard.pos-2B { left: 62%; top: 38%; }
.dcard.pos-3B { left: 28%; top: 58%; }
.dcard.pos-SS { left: 38%; top: 38%; }
.dcard.pos-LF { left: 19%; top: 25%; }
.dcard.pos-CF { left: 50%; top: 12%; }
.dcard.pos-RF { left: 81%; top: 25%; }

.roster-compact { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--panel-border); border-radius: 2px; overflow: hidden; margin-bottom: 10px; font-size: 8px; }
.roster-section { background: var(--void-2); padding: 6px 8px; }
.roster-section-label { display: flex; justify-content: space-between; font-size: 7px; color: var(--gray-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; }
.roster-section-label .war-total { color: var(--gold-bright); text-transform: none; letter-spacing: 0; }
.roster-line { display: flex; justify-content: space-between; align-items: baseline; color: var(--gray); padding: 1.5px 0; }
.roster-line .name { color: var(--white); }
.roster-line .name.tier-elite { color: var(--gold); }
.roster-line .name.tier-great { color: var(--purple); }
.roster-line .name.tier-good { color: var(--green); }
.roster-line .stats { display: flex; gap: 5px; font-size: 7px; white-space: nowrap; }
.roster-line .war { color: var(--gold-bright); }
.bullpen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6px; }
.bp-entry { padding: 1.5px 0; line-height: 1.25; }
.bp-name { font-size: 6.5px; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.bp-name.tier-elite { color: var(--gold); }
.bp-name.tier-great { color: var(--purple); }
.bp-name.tier-good { color: var(--green); }
.bp-name.cl { color: var(--gold); }
.bp-stat { font-size: 5.5px; color: var(--gray); display: block; }
.bp-stat .war { color: var(--gold-bright); }

.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--panel-border); border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
.stat-cell { background: var(--void-2); padding: 6px 4px; text-align: center; }
.stat-cell-label { font-size: 7px; color: var(--gray); letter-spacing: 0.04em; text-transform: uppercase; }
.stat-cell-value { font-size: 12px; font-weight: 700; color: var(--white); margin-top: 2px; }
.stat-cell-value.gold { color: var(--gold); }

.share-footer { display: flex; justify-content: space-between; align-items: center; font-size: 8px; color: var(--gray-dim); border-top: 1px dashed var(--panel-border); padding-top: 7px; }
.share-footer .gold { color: var(--gold); }

.share-playoffs { border-top: 1px solid var(--panel-border); padding-top: 8px; margin-bottom: 10px; }
.share-playoff-outcome { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-align: center; margin-bottom: 6px; }
.share-playoff-outcome.champion { color: var(--gold); }
.share-playoff-outcome.eliminated { color: var(--gray); }
.share-playoff-row { display: flex; justify-content: space-between; font-size: 8px; padding: 2px 0; color: var(--gray); }
.share-playoff-round { color: var(--gray); }
.share-playoff-mvp { font-size: 8px; color: var(--gold); margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(var(--gold-rgb), 0.2); }
.share-playoff-status { font-weight: 700; }
.share-playoff-status.won { color: var(--green); }
.share-playoff-status.lost { color: var(--red); }

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--panel-border);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.modal-title { font-size: 18px; font-weight: 700; color: var(--gold); letter-spacing: 0.05em; }
.modal-close {
  background: none; border: none; color: var(--gray); font-size: 20px;
  cursor: pointer; line-height: 1; padding: 0 0 0 14px;
}
.modal-close:hover { color: var(--gold); }

.modal-section-label {
  font-size: 11px; letter-spacing: 0.14em; color: var(--gold);
  margin: 20px 0 8px;
}
.modal-section-label:first-child { margin-top: 0; }

.modal-body p { color: #c7c4bb; font-size: 13px; line-height: 1.6; margin: 0 0 8px; }
.modal-body a { color: var(--gold); }

.modal-progress { font-size: 12px; color: var(--gray); font-weight: 400; letter-spacing: 0.04em; margin-left: 8px; }

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
}
@media (max-width: 480px) { .achievements-grid { grid-template-columns: 1fr; } }

.achievement-card {
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  padding: 12px;
  background: var(--void-2);
}
.achievement-card.locked { opacity: 0.55; }
.achievement-tier-label { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); margin-bottom: 6px; }
.achievement-name { font-size: 13px; font-weight: 700; color: var(--white); display: flex; align-items: center; gap: 6px; }
.achievement-card.locked .achievement-name { color: var(--gray); }
.achievement-desc { font-size: 11.5px; color: var(--gray); line-height: 1.4; margin-top: 4px; }
.achievement-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Tier colors apply to unlocked cards only - locked cards stay neutral
   gray/dimmed regardless of tier, since revealing the tier color would
   be its own small hint about what's behind the "???" mystery-box
   state, undermining the point of not showing anything yet. */
.achievement-card.unlocked.tier-legendary { border-color: var(--gold); }
.achievement-card.unlocked.tier-legendary .achievement-name { color: var(--gold); }
.achievement-card.unlocked.tier-perfect { border-color: #fff; box-shadow: 0 0 24px rgba(255,255,255,0.4); }
.achievement-card.unlocked.tier-perfect .achievement-name { color: #fff; }
.achievement-card.unlocked.tier-perfect .achievement-tier-label { color: #fff; letter-spacing: 0.2em; }

/* Perfect Season result screen */
.perfect-season #final-record,
.perfect-record {
  color: #fff !important;
  text-shadow: 0 0 30px rgba(255,255,255,0.8), 0 0 60px rgba(255,255,255,0.4);
  animation: perfect-pulse 2s ease-in-out infinite;
}
@keyframes perfect-pulse {
  0%   { text-shadow: 0 0 20px rgba(255,255,255,0.6), 0 0 40px rgba(255,255,255,0.3); }
  50%  { text-shadow: 0 0 40px rgba(255,255,255,1.0), 0 0 80px rgba(255,255,255,0.6); }
  100% { text-shadow: 0 0 20px rgba(255,255,255,0.6), 0 0 40px rgba(255,255,255,0.3); }
}

/* Perfect Season banner */
#perfect-season-banner {
  text-align: center;
  margin-bottom: 12px;
  animation: perfect-banner-in 0.6s ease-out forwards;
}
@keyframes perfect-banner-in {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}
.perfect-banner-text {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #fff;
  text-shadow: 0 0 30px rgba(255,255,255,0.9), 0 0 60px rgba(255,255,255,0.5);
  animation: perfect-pulse 2s ease-in-out infinite;
}
.perfect-banner-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.05em;
  margin-top: 4px;
}

/* Perfect dot — W/L squares flash gold */
.streak-sq.win.perfect-dot {
  background: var(--gold) !important;
  box-shadow: 0 0 6px rgba(255,215,0,0.6);
  animation: perfect-dot-flash 1s ease-in-out 3;
}
@keyframes perfect-dot-flash {
  0%   { background: var(--gold); box-shadow: 0 0 6px rgba(255,215,0,0.6); }
  50%  { background: #fff; box-shadow: 0 0 12px rgba(255,255,255,0.9); }
  100% { background: var(--gold); box-shadow: 0 0 6px rgba(255,215,0,0.6); }
}

/* Perfect ticker — gold text for 162-0 */
#ticker-track.perfect-ticker .ticker-item {
  color: var(--gold);
  text-shadow: 0 0 8px rgba(255,215,0,0.5);
}

/* Marquee light border on scoreboard for perfect season */
#screen-result.perfect-season > .scoreboard {
  animation: marquee-lights 1.5s linear infinite;
  border: 2px solid transparent;
}
@keyframes marquee-lights {
  0%   { box-shadow: 0 0 0 3px #FFD700, 0 0 16px 6px rgba(255,215,0,0.5); }
  16%  { box-shadow: 0 0 0 3px #fff,    0 0 16px 6px rgba(255,255,255,0.5); }
  33%  { box-shadow: 0 0 0 3px #FF6B6B, 0 0 16px 6px rgba(255,107,107,0.5); }
  50%  { box-shadow: 0 0 0 3px #6B6BFF, 0 0 16px 6px rgba(107,107,255,0.5); }
  66%  { box-shadow: 0 0 0 3px #6BFF6B, 0 0 16px 6px rgba(107,255,107,0.5); }
  83%  { box-shadow: 0 0 0 3px #FFB86B, 0 0 16px 6px rgba(255,184,107,0.5); }
  100% { box-shadow: 0 0 0 3px #FFD700, 0 0 16px 6px rgba(255,215,0,0.5); }
}
  0%   { transform: translateY(0) rotate(0deg); opacity: 0.9; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* Balloon animation */
@keyframes balloon-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0.85; }
  50%  { transform: translateY(-50vh) translateX(var(--sway)); opacity: 0.85; }
  100% { transform: translateY(-110vh) translateX(0); opacity: 0; }
}
.achievement-card.unlocked.tier-epic { border-color: var(--purple); }
.achievement-card.unlocked.tier-epic .achievement-name { color: var(--purple); }
.achievement-card.unlocked.tier-rare { border-color: var(--green); }
.achievement-card.unlocked.tier-rare .achievement-name { color: var(--green); }
.achievement-card.unlocked.tier-common { border-color: var(--gray); }

/* Achievement toasts — same tier-color convention as the modal cards
   above, just in a stacked, dismissible, bottom-right notification form. */
.achievement-toasts {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 500;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  max-width: 300px;
  pointer-events: none;
}
.achievement-toast {
  position: relative;
  background: var(--void-2);
  border: 1px solid var(--gray);
  border-radius: 2px;
  padding: 12px 30px 12px 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  animation: achievementToastIn 0.3s ease-out;
}
.achievement-toast.tier-legendary { border-color: var(--gold); box-shadow: 0 4px 18px rgba(var(--gold-rgb), 0.25); }
.achievement-toast.tier-legendary .achievement-toast-name { color: var(--gold); }
.achievement-toast.tier-perfect { border-color: #fff; box-shadow: 0 4px 24px rgba(255,255,255,0.4); }
.achievement-toast.tier-perfect .achievement-toast-name { color: #fff; }
.achievement-toast.tier-epic { border-color: var(--purple); box-shadow: 0 4px 18px rgba(var(--purple-rgb), 0.25); }
.achievement-toast.tier-epic .achievement-toast-name { color: var(--purple); }
.achievement-toast.tier-rare { border-color: var(--green); box-shadow: 0 4px 18px rgba(var(--green-rgb), 0.25); }
.achievement-toast.tier-rare .achievement-toast-name { color: var(--green); }
.achievement-toast.tier-common { border-color: var(--gray); }
.achievement-toast-label { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); margin-bottom: 4px; }
.achievement-toast-name { font-size: 13px; font-weight: 700; color: var(--white); margin-bottom: 3px; }
.achievement-toast-desc { font-size: 11px; color: var(--gray); line-height: 1.4; }
.achievement-toast-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: var(--gray);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px;
}
.achievement-toast-close:hover { color: var(--white); }
@keyframes achievementToastIn {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
.achievement-toast-out {
  animation: achievementToastOut 0.25s ease-in forwards;
}
@keyframes achievementToastOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(30px); }
}
@media (max-width: 480px) {
  .achievement-toasts { left: 12px; right: 12px; max-width: none; bottom: 12px; }
}

/* stat grid (Lifetime Stats) */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 6px; }
@media (max-width: 480px) { .stat-grid { grid-template-columns: 1fr; } }
.stat-box {
  background: var(--void-2); border: 1px solid var(--panel-border); border-radius: 2px;
  padding: 12px 14px;
}
.stat-box-label { font-size: 10px; letter-spacing: 0.1em; color: var(--gray); margin-bottom: 4px; }
.stat-box-value { font-size: 20px; font-weight: 700; color: var(--white); }
.stat-box-sub { font-size: 10.5px; color: var(--gray); margin-top: 2px; }

.era-stat-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12px; padding: 6px 0; border-bottom: 1px dashed var(--panel-border);
}
.era-stat-row .era-name { color: var(--gold); font-weight: 700; width: 56px; flex-shrink: 0; }
.era-stat-row .era-record { color: var(--white); }
.era-stat-row .era-drafts { color: var(--gray); }

/* accordion (What's New) */
.changelog-entry { border-bottom: 1px solid var(--panel-border); }
.changelog-toggle {
  width: 100%; background: none; border: none; color: var(--white);
  font-family: var(--font); font-size: 13px; text-align: left;
  padding: 12px 0; cursor: pointer; display: flex; justify-content: space-between;
}
.changelog-toggle .v-label { color: var(--gold); font-weight: 700; }
.changelog-toggle .v-date { color: var(--gray); font-size: 11px; }
.changelog-body { display: none; padding-bottom: 12px; }
.changelog-body.open { display: block; }
.changelog-body ul { margin: 0; padding-left: 18px; }
.changelog-body li { color: #c7c4bb; font-size: 12.5px; line-height: 1.6; margin-bottom: 4px; }
.sm-body p { color: #c7c4bb; font-size: 12.5px; line-height: 1.6; margin: 0 0 10px; }
.sm-body p:last-child { margin-bottom: 0; }
.sm-body strong { color: var(--white); }

.btn-outline {
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--white);
  border-radius: 2px;
  padding: 10px 18px;
  cursor: pointer;
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

.btn-outline-small {
  font-family: var(--font); font-size: 11px; letter-spacing: 0.06em;
  background: transparent; border: 1px solid var(--panel-border); color: var(--gray);
  border-radius: 2px; padding: 6px 12px; cursor: pointer; margin-top: 16px;
}
.btn-outline-small:hover { border-color: var(--red); color: var(--red); }

.btn-share-result {
  font-family: var(--font); font-size: 12px; letter-spacing: 0.06em;
  background: transparent; border: 1px solid var(--panel-border); color: var(--gray);
  border-radius: 2px; padding: 9px 20px; cursor: pointer;
  display: block; margin: 24px auto 16px;
}
.btn-share-result:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- footer ---------- */

.site-footer {
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: rgba(242, 240, 234, 0.35);
  padding: 30px 20px 50px;
  text-transform: uppercase;
}

.lock-in-wrap { margin-top: 14px; padding-top: 14px; padding-bottom: 14px; border-top: 1px solid var(--panel-border); }
.lock-in-hint { font-size: 10px; color: var(--gray); letter-spacing: 0.05em; margin-bottom: 8px; text-align: center; }
.lock-in-btn { width: 100%; font-size: 12px; letter-spacing: 0.12em; }

.ps-stats-totals td { color: var(--gold); border-top: 1px solid var(--panel-border); border-bottom: none; font-weight: 600; }
.ps-stats-totals td:first-child { color: var(--gold); }


/* ══════════════════════════════════════════════════════════════
   SETTINGS — gear button + modal
══════════════════════════════════════════════════════════════ */

.site-header-left { display: flex; align-items: baseline; gap: 10px; }

.settings-btn {
  font-size: 11px;
  letter-spacing: 0.10em;
  align-self: center;
}

.settings-modal { max-width: 520px; }

.settings-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 10px;
}

.settings-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Scrollable style picker — caps at 5 visible options (~280px) */
#settings-style-options {
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,164,85,0.30) transparent;
  padding-right: 4px;
}
#settings-style-options::-webkit-scrollbar {
  width: 4px;
}
#settings-style-options::-webkit-scrollbar-track {
  background: transparent;
}
#settings-style-options::-webkit-scrollbar-thumb {
  background: rgba(201,164,85,0.25);
  border-radius: 2px;
}
#settings-style-options::-webkit-scrollbar-thumb:hover {
  background: rgba(201,164,85,0.45);
}

.settings-option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  background: var(--void-2);
  border: 1px solid var(--panel-border);
  border-radius: 3px;
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s;
  font-family: var(--font);
}
.settings-option:hover { border-color: rgba(var(--gold-rgb), 0.4); }
.settings-option.active {
  border-color: var(--tier-elite);
  background: rgba(var(--gold-rgb), 0.06);
}

.settings-option-swatches {
  display: flex;
  gap: 4px;
  align-items: center;
}
.settings-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.swatch {
  display: inline-flex;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  max-height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
  flex-grow: 0;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
  vertical-align: middle;
  align-self: center;
}
.swatch-aero-el {
  background: rgba(var(--gold-rgb), 0.22);
  border: 1px solid rgba(var(--gold-rgb), 0.60);
}
.swatch-aero-gr {
  background: rgba(var(--purple-rgb), 0.20);
  border: 1px solid rgba(var(--purple-rgb), 0.55);
}
.swatch-aero-go {
  background: rgba(var(--green-rgb), 0.18);
  border: 1px solid rgba(var(--green-rgb), 0.50);
}

/* Generic tier swatches — CSS variable based, respond to palette changes.
   Used by Art Deco, Secession, and any future theme swatch in settings. */
/* Per-theme swatches — hardcoded so active theme never affects them */

/* Default */
.swatch-flat-el { background:rgba(201,164,85,0.18); border:1px solid rgba(201,164,85,0.70); }
.swatch-flat-gr { background:rgba(160,127,209,0.16); border:1px solid rgba(160,127,209,0.62); }
.swatch-flat-go { background:rgba(95,191,122,0.14);  border:1px solid rgba(95,191,122,0.56); }

/* Aero */
.swatch-aero-el { background:rgba(201,164,85,0.22); border:1px solid rgba(201,164,85,0.60); }
.swatch-aero-gr { background:rgba(160,127,209,0.20); border:1px solid rgba(160,127,209,0.55); }
.swatch-aero-go { background:rgba(95,191,122,0.18);  border:1px solid rgba(95,191,122,0.50); }

/* Art Deco */
.swatch-artdeco-el { background:rgba(201,168,76,0.12); border:1px solid rgba(201,168,76,0.65); border-radius:0; }
.swatch-artdeco-gr { background:rgba(160,127,209,0.10); border:1px solid rgba(160,127,209,0.58); border-radius:0; }
.swatch-artdeco-go { background:rgba(95,191,122,0.09);  border:1px solid rgba(95,191,122,0.52); border-radius:0; }

/* Viennese Secession */
.swatch-secession-el { background:rgba(201,168,76,0.12); border:1px solid rgba(201,168,76,0.65); border-radius:0; box-shadow:0 0 0 2px rgba(201,168,76,0.08); }
.swatch-secession-gr { background:rgba(160,127,209,0.10); border:1px solid rgba(160,127,209,0.58); border-radius:0; box-shadow:0 0 0 2px rgba(160,127,209,0.06); }
.swatch-secession-go { background:rgba(95,191,122,0.09);  border:1px solid rgba(95,191,122,0.52); border-radius:0; box-shadow:0 0 0 2px rgba(95,191,122,0.04); }

/* Japanese Minimalism — left stroke only */
.swatch-jp-el { background:transparent; border:none; border-left:3px solid rgba(180,40,30,0.80); border-radius:0; }
.swatch-jp-gr { background:transparent; border:none; border-left:3px solid rgba(160,127,209,0.65); border-radius:0; }
.swatch-jp-go { background:transparent; border:none; border-left:3px solid rgba(95,191,122,0.50); border-radius:0; }

/* Synthwave */
.swatch-synthwave-el { background:rgba(255,0,200,0.12); border:1px solid rgba(255,0,200,0.55); border-radius:1px; box-shadow:0 0 6px rgba(255,0,200,0.25); }
.swatch-synthwave-gr { background:rgba(0,229,255,0.08); border:1px solid rgba(0,229,255,0.45); border-radius:1px; }
.swatch-synthwave-go { background:rgba(123,0,255,0.08); border:1px solid rgba(123,0,255,0.40); border-radius:1px; }

/* Cyberpunk */
.swatch-cyberpunk-el { background:rgba(0,180,255,0.12); border:1px solid rgba(0,180,255,0.55); border-radius:0; box-shadow:0 0 6px rgba(0,180,255,0.20); }
.swatch-cyberpunk-gr { background:rgba(200,255,0,0.10); border:1px solid rgba(200,255,0,0.45); border-radius:0; }
.swatch-cyberpunk-go { background:rgba(180,60,255,0.10); border:1px solid rgba(180,60,255,0.40); border-radius:0; }

/* Gothic */
.swatch-gothic-el { background:rgba(140,0,20,0.10); border:1px solid rgba(140,0,20,0.55); border-radius:0; }
.swatch-gothic-gr { background:rgba(180,175,170,0.06); border:1px solid rgba(180,175,170,0.30); border-radius:0; }
.swatch-gothic-go { background:rgba(120,118,115,0.04); border:1px solid rgba(120,118,115,0.20); border-radius:0; }

/* Darkwave */
.swatch-darkwave-el { background:rgba(200,200,230,0.08); border:1px solid rgba(200,200,230,0.32); border-radius:1px; }
.swatch-darkwave-gr { background:rgba(100,100,180,0.06); border:1px solid rgba(100,100,180,0.26); border-radius:1px; }
.swatch-darkwave-go { background:rgba(70,70,110,0.04); border:1px solid rgba(70,70,110,0.20); border-radius:1px; }

/* Sci-Fi HUD */
.swatch-hud-el { background:rgba(255,160,0,0.10); border:1px solid rgba(255,160,0,0.52); border-radius:0; box-shadow:0 0 6px rgba(255,160,0,0.18); }
.swatch-hud-gr { background:rgba(0,255,140,0.08); border:1px solid rgba(0,255,140,0.40); border-radius:0; }
.swatch-hud-go { background:rgba(0,180,100,0.06); border:1px solid rgba(0,180,100,0.28); border-radius:0; }

/* Retrofuturism */
.swatch-retro-el { background:rgba(204,48,32,0.14); border:1px solid rgba(204,48,32,0.65); border-radius:0; }
.swatch-retro-gr { background:rgba(0,180,180,0.10); border:1px solid rgba(0,180,180,0.50); border-radius:0; }
.swatch-retro-go { background:rgba(208,128,32,0.10); border:1px solid rgba(208,128,32,0.48); border-radius:0; }

/* Constructivism */
.swatch-constructivism-el { background:rgba(200,30,20,0.14); border:1px solid rgba(200,30,20,0.65); border-radius:0; }
.swatch-constructivism-gr { background:rgba(136,120,104,0.08); border:1px solid rgba(136,120,104,0.38); border-radius:0; }
.swatch-constructivism-go { background:rgba(80,72,64,0.06); border:1px solid rgba(80,72,64,0.28); border-radius:0; }

/* Backrooms */
.swatch-backrooms-el { background:rgba(200,188,120,0.10); border:1px solid rgba(200,188,120,0.42); border-radius:0; }
.swatch-backrooms-gr { background:rgba(160,155,90,0.07); border:1px solid rgba(160,155,90,0.30); border-radius:0; }
.swatch-backrooms-go { background:rgba(110,105,65,0.05); border:1px solid rgba(110,105,65,0.22); border-radius:0; }

/* Liquid DNB */
.swatch-dnb-el { background:rgba(200,120,20,0.12); border:1px solid rgba(200,120,20,0.48); border-radius:2px; }
.swatch-dnb-gr { background:rgba(0,160,140,0.08); border:1px solid rgba(0,160,140,0.38); border-radius:2px; }
.swatch-dnb-go { background:rgba(160,80,30,0.06); border:1px solid rgba(160,80,30,0.30); border-radius:2px; }

/* Daft Punk / RAM */
.swatch-ram-el { background:rgba(200,160,80,0.12); border:1px solid rgba(200,160,80,0.52); border-radius:1px; box-shadow:0 0 4px rgba(200,160,80,0.14); }
.swatch-ram-gr { background:rgba(192,104,120,0.08); border:1px solid rgba(192,104,120,0.38); border-radius:1px; }
.swatch-ram-go { background:rgba(96,120,128,0.06); border:1px solid rgba(96,120,128,0.28); border-radius:1px; }

/* Visualizer */
.swatch-visualizer-el { background:rgba(136,204,68,0.10); border:1px solid rgba(136,204,68,0.50); border-radius:1px; box-shadow:0 0 4px rgba(136,204,68,0.16); }
.swatch-visualizer-gr { background:rgba(40,180,180,0.08); border:1px solid rgba(40,180,180,0.40); border-radius:1px; }
.swatch-visualizer-go { background:rgba(56,112,204,0.06); border:1px solid rgba(56,112,204,0.32); border-radius:1px; }

/* Industrial */
.swatch-industrial-el { background:rgba(221,184,0,0.12); border:1px solid rgba(221,184,0,0.55); border-radius:0; }
.swatch-industrial-gr { background:rgba(192,64,40,0.08); border:1px solid rgba(192,64,40,0.42); border-radius:0; }
.swatch-industrial-go { background:rgba(136,136,136,0.06); border:1px solid rgba(136,136,136,0.30); border-radius:0; }

/* Venetian Gothic */
.swatch-venetian-el { background:rgba(200,150,14,0.12); border:1px solid rgba(200,150,14,0.50); border-radius:0; }
.swatch-venetian-gr { background:rgba(176,48,32,0.08); border:1px solid rgba(176,48,32,0.40); border-radius:0; }
.swatch-venetian-go { background:rgba(0,128,144,0.06); border:1px solid rgba(0,128,144,0.35); border-radius:0; }

/* Baroque Rome */
.swatch-baroque-el { background:rgba(224,192,80,0.12); border:1px solid rgba(224,192,80,0.52); border-radius:0; }
.swatch-baroque-gr { background:rgba(200,64,48,0.08); border:1px solid rgba(200,64,48,0.40); border-radius:0; }
.swatch-baroque-go { background:rgba(200,192,176,0.06); border:1px solid rgba(200,192,176,0.30); border-radius:0; }

/* VHS / Analog */
.swatch-vhs-el { background:rgba(255,80,160,0.10); border:1px solid rgba(255,80,160,0.48); border-radius:0; box-shadow:0 0 4px rgba(255,80,160,0.14); }
.swatch-vhs-gr { background:rgba(80,200,255,0.08); border:1px solid rgba(80,200,255,0.38); border-radius:0; }
.swatch-vhs-go { background:rgba(192,192,192,0.06); border:1px solid rgba(192,192,192,0.28); border-radius:0; }

/* Neon Vegas */
.swatch-neon-el { background:rgba(255,20,120,0.12); border:1px solid rgba(255,20,120,0.55); border-radius:1px; box-shadow:0 0 6px rgba(255,20,120,0.20); }
.swatch-neon-gr { background:rgba(96,64,255,0.08); border:1px solid rgba(96,64,255,0.45); border-radius:1px; box-shadow:0 0 4px rgba(96,64,255,0.14); }
.swatch-neon-go { background:rgba(255,180,20,0.08); border:1px solid rgba(255,180,20,0.42); border-radius:1px; }

/* Keep swatch-tier-* as alias for flat/default (used by palette options) */
.swatch-tier-el { background:rgba(201,164,85,0.18); border:1px solid rgba(201,164,85,0.70); }
.swatch-tier-gr { background:rgba(160,127,209,0.16); border:1px solid rgba(160,127,209,0.62); }
.swatch-tier-go { background:rgba(95,191,122,0.14);  border:1px solid rgba(95,191,122,0.56); }

.settings-option-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.settings-option-desc {
  font-size: 10px;
  color: var(--gray);
  line-height: 1.5;
}
.settings-option-text { flex: 1; }

/* ══════════════════════════════════════════════════════════════
   AERO STYLE — Phase 1 + Phase 2 combined
   Phase 1: gradient fills + inset highlights on cards + slots
   Phase 2: body gradient + frosted glass blur on panels/modals
   All scoped to [data-style="aero"]. Zero effect on Default.
══════════════════════════════════════════════════════════════ */

/* Body background: subtle ambient gradients give blur something
   to work with — the defining characteristic of Windows Aero.
   Opacity kept low so it doesn't compete with card content. */
[data-style="aero"] body {
  background:
    radial-gradient(ellipse at 15% 0%,   rgba(var(--gold-rgb),   0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 100%, rgba(var(--purple-rgb), 0.05) 0%, transparent 50%),
    var(--void);
  background-attachment: fixed;
  min-height: 100vh;
}

/* ── Phase 1: Draft picker player cards ──────────────────── */
[data-style="aero"] .player-card.tier-elite {
  background: linear-gradient(160deg,
    rgba(var(--gold-rgb), 0.18) 0%,
    rgba(var(--gold-rgb), 0.06) 55%,
    rgba(0,0,0,0) 100%
  );
  border-color: rgba(var(--gold-rgb), 0.55);
  box-shadow:
    0 0 20px rgba(var(--gold-rgb), 0.28),
    inset 0 1.5px 0 rgba(var(--gold-rgb), 0.55);
}
[data-style="aero"] .player-card.tier-great {
  background: linear-gradient(160deg,
    rgba(var(--purple-rgb), 0.16) 0%,
    rgba(var(--purple-rgb), 0.05) 55%,
    rgba(0,0,0,0) 100%
  );
  border-color: rgba(var(--purple-rgb), 0.50);
  box-shadow: inset 0 1.5px 0 rgba(var(--purple-rgb), 0.35);
}
[data-style="aero"] .player-card.tier-good {
  background: linear-gradient(160deg,
    rgba(var(--green-rgb), 0.14) 0%,
    rgba(var(--green-rgb), 0.04) 55%,
    rgba(0,0,0,0) 100%
  );
  border-color: rgba(var(--green-rgb), 0.45);
  box-shadow: inset 0 1.5px 0 rgba(var(--green-rgb), 0.28);
}
[data-style="aero"] .player-card.tier-average {
  background: linear-gradient(160deg,
    rgba(90,122,106, 0.14) 0%,
    rgba(90,122,106, 0.04) 55%,
    rgba(0,0,0,0) 100%
  );
  border-color: rgba(90,122,106, 0.45);
  box-shadow: inset 0 1.5px 0 rgba(90,122,106, 0.28);
}
/* Neutral draft card — subtle white gradient + inset highlight */
[data-style="aero"] .player-card:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average):not(.ineligible) {
  background: linear-gradient(160deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.01) 50%,
    rgba(0,0,0,0) 100%
  );
  border-color: rgba(255,255,255,0.13);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.10);
}

/* ── Phase 1: Expanded draft card (detail view) ────────── */
[data-style="aero"] .expanded-draft-card.tier-elite {
  background: linear-gradient(160deg,
    rgba(var(--gold-rgb), 0.18) 0%,
    rgba(var(--gold-rgb), 0.06) 55%,
    rgba(0,0,0,0) 100%
  );
  border-color: rgba(var(--gold-rgb), 0.55);
  box-shadow:
    0 0 20px rgba(var(--gold-rgb), 0.28),
    inset 0 1.5px 0 rgba(var(--gold-rgb), 0.45);
}
[data-style="aero"] .expanded-draft-card.tier-great {
  background: linear-gradient(160deg,
    rgba(var(--purple-rgb), 0.16) 0%,
    rgba(var(--purple-rgb), 0.05) 55%,
    rgba(0,0,0,0) 100%
  );
  border-color: rgba(var(--purple-rgb), 0.50);
  box-shadow: inset 0 1.5px 0 rgba(var(--purple-rgb), 0.35);
}
[data-style="aero"] .expanded-draft-card.tier-good {
  background: linear-gradient(160deg,
    rgba(var(--green-rgb), 0.14) 0%,
    rgba(var(--green-rgb), 0.04) 55%,
    rgba(0,0,0,0) 100%
  );
  border-color: rgba(var(--green-rgb), 0.45);
  box-shadow: inset 0 1.5px 0 rgba(var(--green-rgb), 0.28);
}
[data-style="aero"] .expanded-draft-card.tier-average {
  background: linear-gradient(160deg,
    rgba(90,122,106, 0.14) 0%,
    rgba(90,122,106, 0.04) 55%,
    rgba(0,0,0,0) 100%
  );
  border-color: rgba(90,122,106, 0.45);
  box-shadow: inset 0 1.5px 0 rgba(90,122,106, 0.28);
}

/* ── Phase 1: Lineup card slot boxes ───────────────────── */
[data-style="aero"] .slot-box.tier-elite,
[data-style="aero"] .slot-filled.tier-elite {
  background: linear-gradient(160deg,
    rgba(var(--gold-rgb), 0.16) 0%,
    rgba(var(--gold-rgb), 0.05) 60%,
    rgba(0,0,0,0) 100%
  );
  border-color: rgba(var(--gold-rgb), 0.50);
  box-shadow:
    0 0 12px rgba(var(--gold-rgb), 0.18),
    inset 0 1.5px 0 rgba(var(--gold-rgb), 0.35);
}
[data-style="aero"] .slot-box.tier-great,
[data-style="aero"] .slot-filled.tier-great {
  background: linear-gradient(160deg,
    rgba(var(--purple-rgb), 0.14) 0%,
    rgba(var(--purple-rgb), 0.04) 60%,
    rgba(0,0,0,0) 100%
  );
  border-color: rgba(var(--purple-rgb), 0.45);
  box-shadow: inset 0 1.5px 0 rgba(var(--purple-rgb), 0.28);
}
[data-style="aero"] .slot-box.tier-good,
[data-style="aero"] .slot-filled.tier-good {
  background: linear-gradient(160deg,
    rgba(var(--green-rgb), 0.12) 0%,
    rgba(var(--green-rgb), 0.03) 60%,
    rgba(0,0,0,0) 100%
  );
  border-color: rgba(var(--green-rgb), 0.40);
  box-shadow: inset 0 1.5px 0 rgba(var(--green-rgb), 0.24);
}
[data-style="aero"] .slot-box.tier-average,
[data-style="aero"] .slot-filled.tier-average {
  background: linear-gradient(160deg,
    rgba(var(--green-rgb), 0.12) 0%,
    rgba(var(--green-rgb), 0.03) 60%,
    rgba(0,0,0,0) 100%
  );
  border-color: rgba(var(--green-rgb), 0.40);
  box-shadow: inset 0 1.5px 0 rgba(var(--green-rgb), 0.24);
}
/* Non-tier slots — subtle Aero treatment */
[data-style="aero"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average),
[data-style="aero"] .slot-filled:not(.tier-elite):not(.tier-great):not(.tier-good) {
  background: linear-gradient(160deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.01) 50%,
    rgba(0,0,0,0) 100%
  );
  border-color: rgba(255,255,255,0.12);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.08);
}

/* ── Phase 1: Diamond position cards (result screen) ─────── */
[data-style="aero"] .diamond-pos-card.tier-elite {
  background: linear-gradient(160deg,
    rgba(var(--gold-rgb), 0.18) 0%,
    rgba(var(--gold-rgb), 0.06) 55%,
    rgba(0,0,0,0) 100%
  );
  border-color: rgba(var(--gold-rgb), 0.55);
  box-shadow: 0 0 14px rgba(var(--gold-rgb), 0.25), inset 0 1.5px 0 rgba(var(--gold-rgb), 0.38);
}
[data-style="aero"] .diamond-pos-card.tier-great {
  background: linear-gradient(160deg,
    rgba(var(--purple-rgb), 0.16) 0%,
    rgba(var(--purple-rgb), 0.05) 55%,
    rgba(0,0,0,0) 100%
  );
  border-color: rgba(var(--purple-rgb), 0.48);
  box-shadow: inset 0 1.5px 0 rgba(var(--purple-rgb), 0.30);
}
[data-style="aero"] .diamond-pos-card.tier-good {
  background: linear-gradient(160deg,
    rgba(var(--green-rgb), 0.14) 0%,
    rgba(var(--green-rgb), 0.04) 55%,
    rgba(0,0,0,0) 100%
  );
  border-color: rgba(var(--green-rgb), 0.42);
  box-shadow: inset 0 1.5px 0 rgba(var(--green-rgb), 0.25);
}
[data-style="aero"] .diamond-pos-card.tier-average {
  background: linear-gradient(160deg,
    rgba(var(--green-rgb), 0.14) 0%,
    rgba(var(--green-rgb), 0.04) 55%,
    rgba(0,0,0,0) 100%
  );
  border-color: rgba(var(--green-rgb), 0.42);
  box-shadow: inset 0 1.5px 0 rgba(var(--green-rgb), 0.25);
}

/* ── Phase 2: Frosted glass panels + modals ─────────────── */

/* Modals */
[data-style="aero"] .modal-panel {
  background: rgba(14, 14, 14, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 8px 32px rgba(0,0,0,0.6);
}
[data-style="aero"] .modal-header {
  border-bottom-color: rgba(255,255,255,0.07);
}

/* Lineup card aside */
[data-style="aero"] .lineup-card {
  background: rgba(14,14,14,0.70);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Position section group headers */
[data-style="aero"] .position-section {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255,255,255,0.10);
}

/* Sandbox panel */
[data-style="aero"] #sandbox-panel,
[data-style="aero"] .sandbox-section {
  background: rgba(14, 14, 14, 0.70);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}

/* Result screen recap panels */
[data-style="aero"] .result-recap,
[data-style="aero"] .lineup-card.result-recap {
  background: rgba(14, 14, 14, 0.70);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Highlight card */
[data-style="aero"] .highlight-card {
  background: rgba(10, 10, 10, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Scoreboard */
[data-style="aero"] .scoreboard {
  background: rgba(14,14,14,0.70);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Buttons get subtle gloss */
[data-style="aero"] .btn-primary {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.2);
}
[data-style="aero"] .btn-outline {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
[data-style="aero"] .btn-outline:hover {
  background: rgba(255,255,255,0.08);
}

/* Aero: modal overlay — lighter scrim so page bleeds through to blur */
[data-style="aero"] .modal-overlay {
  background: rgba(0,0,0,0.50);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Aero: Setup screen ─────────────────────────────────── */
[data-style="aero"] .void-panel {
  background: rgba(14,14,14,0.70);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ── Aero: Roll boxes (era/team/decade chips) ───────────── */
[data-style="aero"] .roll-box {
  background: rgba(14,14,14,0.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ── Aero: Player search input ──────────────────────────── */
[data-style="aero"] .player-search-input {
  background: rgba(14,14,14,0.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ── Aero: Manager banner ───────────────────────────────── */
[data-style="aero"] .manager-banner {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ── Aero: Record banner (gold border — keep tier color) ── */
[data-style="aero"] .record-banner {
  background: rgba(14,14,14,0.70);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 0 20px rgba(var(--gold-rgb), 0.20),
    inset 0 1px 0 rgba(var(--gold-rgb), 0.25);
}

/* ── Aero: Highlights ticker ────────────────────────────── */
[data-style="aero"] .highlights-ticker {
  background: rgba(10,10,10,0.60);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ── Aero: Result tabs bar ──────────────────────────────── */
[data-style="aero"] .result-tabs {
  border-bottom-color: rgba(255,255,255,0.08);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.03);
}
[data-style="aero"] .result-tab.active {
  text-shadow: 0 0 12px rgba(var(--gold-rgb), 0.5);
}

/* ── Aero: Postseason panels ────────────────────────────── */
[data-style="aero"] .postseason-round-games,
[data-style="aero"] .postseason-bracket-summary {
  background: rgba(14,14,14,0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ── Aero: Postseason matchup scoreboard ────────────────── */
[data-style="aero"] .postseason-matchup {
  background: rgba(10,10,10,0.50);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ── Aero: Player badges — inset gloss chip ─────────────── */
[data-style="aero"] .hof-badge,
[data-style="aero"] .ace-badge,
[data-style="aero"] .clutch-badge,
[data-style="aero"] .ironman-badge,
[data-style="aero"] .overperform-badge,
[data-style="aero"] .underperform-badge,
[data-style="aero"] .twoway-badge,
[data-style="aero"] .analysis-badge,
[data-style="aero"] .diamond-pos-badge {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.15);
}

/* ── Aero: Share button ─────────────────────────────────── */
[data-style="aero"] .btn-share-result {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

/* ── Aero: Postseason game tiles ────────────────────────── */
[data-style="aero"] .postseason-game-tile {
  background: rgba(14,14,14,0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ── Aero: Postseason MVP tiles ─────────────────────────── */
[data-style="aero"] .postseason-mvp-tile {
  background: rgba(14,14,14,0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ── Aero: Champion banner — gold glow ──────────────────── */
[data-style="aero"] .postseason-champion-banner {
  background: rgba(10,8,4,0.80);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 0 40px rgba(var(--gold-rgb), 0.35),
    inset 0 1px 0 rgba(var(--gold-rgb), 0.40),
    inset 0 -1px 0 rgba(var(--gold-rgb), 0.15);
}

/* ── Aero: Statcast card ────────────────────────────────── */
[data-style="aero"] .statcast-card {
  background: rgba(14,14,14,0.70);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ── Aero: Compact roster (bullpen/bench) ───────────────── */
[data-style="aero"] .compact-roster-row {
  border-color: rgba(255,255,255,0.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

/* ── Aero: Box score inner panels ───────────────────────── */
[data-style="aero"] .box-score-team-block {
  background: rgba(10,10,10,0.50);
  border-color: rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
[data-style="aero"] .box-score-final-line {
  border-color: rgba(255,255,255,0.08);
}

/* ── Aero: Manager card ─────────────────────────────────── */
[data-style="aero"] .manager-card {
  background: rgba(14,14,14,0.70);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(255,255,255,0.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}

/* ── Aero: Achievement cards ────────────────────────────── */
[data-style="aero"] .achievement-card {
  background: rgba(14,14,14,0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ── Aero: Sandbox tabs ─────────────────────────────────── */
[data-style="aero"] .sandbox-tabs {
  border-bottom-color: rgba(255,255,255,0.08);
}
[data-style="aero"] .sandbox-tab {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-style="aero"] .sandbox-tab.hc-tab-active {
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

/* ── Aero: Postseason qualify banner ────────────────────── */
[data-style="aero"] .postseason-qualify-banner {
  background: rgba(14,14,14,0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(var(--gold-rgb), 0.35);
  box-shadow: inset 0 1px 0 rgba(var(--gold-rgb), 0.20);
}

/* ── Aero: True story banner ────────────────────────────── */
[data-style="aero"] .true-story-banner {
  background: rgba(14,14,14,0.70);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ── Aero: Start buttons row ─────────────────────────────  */
[data-style="aero"] .btn-primary {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.20);
}

/* ══════════════════════════════════════════════════════════════
   ART DECO STYLE
   Stepped shadow rings, corner chevron ornaments, gold geometric
   language, diamond dividers, wider letter-spacing, square corners.
   All scoped to [data-style="artdeco"].
══════════════════════════════════════════════════════════════ */

/* ── Root overrides ── */
[data-style="artdeco"] {
  --tier-elite: #c9a84c;
  --gold-rgb:   201, 168, 76;
}

/* ── Typography — wider tracking throughout ── */
[data-style="artdeco"] h1,
[data-style="artdeco"] h2,
[data-style="artdeco"] h3,
[data-style="artdeco"] button,
[data-style="artdeco"] .mono-caps {
  letter-spacing: 0.18em;
}

/* ── Site header ── */
[data-style="artdeco"] body {
  background:
    repeating-linear-gradient(-45deg, transparent 0px, transparent 18px, rgba(201,164,85,0.04) 18px, rgba(201,164,85,0.04) 19px, transparent 19px, transparent 36px, rgba(201,164,85,0.025) 36px, rgba(201,164,85,0.025) 37px),
    repeating-linear-gradient(45deg,  transparent 0px, transparent 36px, rgba(201,164,85,0.02) 36px, rgba(201,164,85,0.02) 37px),
    #0a0804;
  overflow: hidden;
}
/* Shimmer sweep across diagonal lines */
[data-style="artdeco"] body::before { display: none; }
[data-style="artdeco"] body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(100deg, transparent 0%, transparent 30%, rgba(201,164,85,0.05) 42%, rgba(255,220,140,0.10) 50%, rgba(201,164,85,0.05) 58%, transparent 70%, transparent 100%);
  animation: artdeco-sweep 7s ease-in-out infinite;
}
@keyframes artdeco-sweep { 0%{transform:translateX(-120%)} 100%{transform:translateX(120%)} }

[data-style="artdeco"] .site-header {
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.22);
}
[data-style="artdeco"] .brand {
  letter-spacing: 0.18em;
}

/* ── Tier cards — stepped shadow rings + corner chevrons ── */
[data-style="artdeco"] .player-card.tier-elite {
  border-color: rgba(var(--gold-rgb), 0.75);
  border-radius: 1px;
  background-color: transparent;
  background-image: linear-gradient(150deg,
    rgba(var(--gold-rgb), 0.13) 0%,
    rgba(var(--gold-rgb), 0.05) 45%,
    transparent 100%
  );
  box-shadow:
    0 0 0 2px rgba(var(--gold-rgb), 0.18),
    0 0 0 4px rgba(var(--gold-rgb), 0.06),
    0 0 20px rgba(var(--gold-rgb), 0.20),
    inset 0 1px 0 rgba(230,200,100,0.45);
}
[data-style="artdeco"] .player-card.tier-great {
  border-color: rgba(var(--purple-rgb), 0.65);
  border-radius: 1px;
  background-color: transparent;
  background-image: linear-gradient(150deg,
    rgba(var(--purple-rgb), 0.12) 0%,
    rgba(var(--purple-rgb), 0.04) 45%,
    transparent 100%
  );
  box-shadow:
    0 0 0 2px rgba(var(--purple-rgb), 0.14),
    0 0 0 4px rgba(var(--purple-rgb), 0.05),
    inset 0 1px 0 rgba(190,160,240,0.35);
}
[data-style="artdeco"] .player-card.tier-good {
  border-color: rgba(var(--green-rgb), 0.58);
  border-radius: 1px;
  background-color: transparent;
  background-image: linear-gradient(150deg,
    rgba(var(--green-rgb), 0.10) 0%,
    rgba(var(--green-rgb), 0.03) 45%,
    transparent 100%
  );
  box-shadow:
    0 0 0 2px rgba(var(--green-rgb), 0.11),
    0 0 0 4px rgba(var(--green-rgb), 0.04),
    inset 0 1px 0 rgba(130,220,150,0.28);
}
[data-style="artdeco"] .player-card.tier-average {
  border-color: rgba(90,122,106, 0.58);
  border-radius: 1px;
  background-color: transparent;
  background-image: linear-gradient(150deg,
    rgba(90,122,106, 0.10) 0%,
    rgba(90,122,106, 0.03) 45%,
    transparent 100%
  );
  box-shadow:
    0 0 0 2px rgba(90,122,106, 0.11),
    0 0 0 4px rgba(90,122,106, 0.04),
    inset 0 1px 0 rgba(130,220,150,0.28);
}

/* Corner chevron ornaments on ALL tier cards */
[data-style="artdeco"] .player-card.tier-elite::before,
[data-style="artdeco"] .player-card.tier-great::before,
[data-style="artdeco"] .player-card.tier-good::before,
[data-style="artdeco"] .player-card.tier-average::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 10px; height: 10px;
  border-top: 2px solid;
  border-left: 2px solid;
  pointer-events: none;
  z-index: 2;
}
[data-style="artdeco"] .player-card.tier-elite::after,
[data-style="artdeco"] .player-card.tier-great::after,
[data-style="artdeco"] .player-card.tier-good::after,
[data-style="artdeco"] .player-card.tier-average::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 10px; height: 10px;
  border-bottom: 2px solid;
  border-right: 2px solid;
  pointer-events: none;
  z-index: 2;
}
[data-style="artdeco"] .player-card.tier-elite::before,
[data-style="artdeco"] .player-card.tier-elite::after {
  border-color: rgba(var(--gold-rgb), 0.90);
}
[data-style="artdeco"] .player-card.tier-great::before,
[data-style="artdeco"] .player-card.tier-great::after {
  border-color: rgba(var(--purple-rgb), 0.80);
}
[data-style="artdeco"] .player-card.tier-good::before,
[data-style="artdeco"] .player-card.tier-good::after {
  border-color: rgba(var(--green-rgb), 0.70);
}
[data-style="artdeco"] .player-card.tier-average::before,
[data-style="artdeco"] .player-card.tier-average::after {
  border-color: rgba(90,122,106, 0.70);
}

/* ── Expanded draft card ── */
[data-style="artdeco"] .expanded-draft-card.tier-elite {
  border-color: rgba(var(--gold-rgb), 0.75);
  border-radius: 1px;
  background-color: transparent;
  background-image: linear-gradient(150deg, rgba(var(--gold-rgb), 0.13) 0%, rgba(var(--gold-rgb), 0.05) 45%, transparent 100%);
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.18), 0 0 0 4px rgba(var(--gold-rgb), 0.06), 0 0 20px rgba(var(--gold-rgb), 0.22), inset 0 1px 0 rgba(230,200,100,0.45);
}
[data-style="artdeco"] .expanded-draft-card.tier-great {
  border-color: rgba(var(--purple-rgb), 0.65);
  border-radius: 1px;
  background-color: transparent;
  background-image: linear-gradient(150deg, rgba(var(--purple-rgb), 0.12) 0%, rgba(var(--purple-rgb), 0.04) 45%, transparent 100%);
  box-shadow: 0 0 0 2px rgba(var(--purple-rgb), 0.14), 0 0 0 4px rgba(var(--purple-rgb), 0.05), inset 0 1px 0 rgba(190,160,240,0.35);
}
[data-style="artdeco"] .expanded-draft-card.tier-good {
  border-color: rgba(var(--green-rgb), 0.58);
  border-radius: 1px;
  background-color: transparent;
  background-image: linear-gradient(150deg, rgba(var(--green-rgb), 0.10) 0%, rgba(var(--green-rgb), 0.03) 45%, transparent 100%);
  box-shadow: 0 0 0 2px rgba(var(--green-rgb), 0.11), 0 0 0 4px rgba(var(--green-rgb), 0.04), inset 0 1px 0 rgba(130,220,150,0.28);
}
[data-style="artdeco"] .expanded-draft-card.tier-average {
  border-color: rgba(90,122,106, 0.58);
  border-radius: 1px;
  background-color: transparent;
  background-image: linear-gradient(150deg, rgba(90,122,106, 0.10) 0%, rgba(90,122,106, 0.03) 45%, transparent 100%);
  box-shadow: 0 0 0 2px rgba(90,122,106, 0.11), 0 0 0 4px rgba(90,122,106, 0.04), inset 0 1px 0 rgba(130,220,150,0.28);
}

/* ── Art Deco: chevron corners on expanded draft card ── */
[data-style="artdeco"] .expanded-draft-card.tier-elite::before,
[data-style="artdeco"] .expanded-draft-card.tier-great::before,
[data-style="artdeco"] .expanded-draft-card.tier-good::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 12px; height: 12px;
  border-top: 2px solid;
  border-left: 2px solid;
  pointer-events: none;
  z-index: 2;
}
[data-style="artdeco"] .expanded-draft-card.tier-elite::after,
[data-style="artdeco"] .expanded-draft-card.tier-great::after,
[data-style="artdeco"] .expanded-draft-card.tier-good::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 12px; height: 12px;
  border-bottom: 2px solid;
  border-right: 2px solid;
  pointer-events: none;
  z-index: 2;
}
[data-style="artdeco"] .expanded-draft-card.tier-elite::before,
[data-style="artdeco"] .expanded-draft-card.tier-elite::after {
  border-color: rgba(var(--gold-rgb), 0.95);
}
[data-style="artdeco"] .expanded-draft-card.tier-great::before,
[data-style="artdeco"] .expanded-draft-card.tier-great::after {
  border-color: rgba(var(--purple-rgb), 0.90);
}
[data-style="artdeco"] .expanded-draft-card.tier-good::before,
[data-style="artdeco"] .expanded-draft-card.tier-good::after {
  border-color: rgba(var(--green-rgb), 0.85);
}

/* ── Slot boxes ── */
[data-style="artdeco"] .slot-box.tier-elite,
[data-style="artdeco"] .slot-filled.tier-elite {
  border-color: rgba(var(--gold-rgb), 0.55);
  background-color: transparent;
  background-image: linear-gradient(150deg, rgba(var(--gold-rgb), 0.10) 0%, transparent 60%);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.12), inset 0 1px 0 rgba(var(--gold-rgb), 0.35);
  border-radius: 1px;
}
[data-style="artdeco"] .slot-box.tier-great,
[data-style="artdeco"] .slot-filled.tier-great {
  box-shadow: 0 0 0 1px rgba(var(--purple-rgb), 0.10), inset 0 1px 0 rgba(var(--purple-rgb), 0.25);
  border-radius: 1px;
}
[data-style="artdeco"] .slot-box.tier-good,
[data-style="artdeco"] .slot-filled.tier-good {
  box-shadow: 0 0 0 1px rgba(var(--green-rgb), 0.08), inset 0 1px 0 rgba(var(--green-rgb), 0.20);
  border-radius: 1px;
}
[data-style="artdeco"] .slot-box.tier-average,
[data-style="artdeco"] .slot-filled.tier-average {
  box-shadow: 0 0 0 1px rgba(var(--green-rgb), 0.08), inset 0 1px 0 rgba(var(--green-rgb), 0.20);
  border-radius: 1px;
}
[data-style="artdeco"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average),
[data-style="artdeco"] .slot-filled:not(.tier-elite):not(.tier-great):not(.tier-good) {
  border-color: rgba(var(--gold-rgb), 0.12);
  border-radius: 1px;
}

/* ── Diamond position cards ── */
[data-style="artdeco"] .diamond-pos-card.tier-elite {
  border-color: rgba(var(--gold-rgb), 0.65);
  background-color: transparent;
  background-image: linear-gradient(150deg, rgba(var(--gold-rgb), 0.11) 0%, transparent 60%);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.14), inset 0 1px 0 rgba(var(--gold-rgb), 0.38);
  border-radius: 1px;
}
[data-style="artdeco"] .diamond-pos-card.tier-great {
  box-shadow: 0 0 0 1px rgba(var(--purple-rgb), 0.11), inset 0 1px 0 rgba(var(--purple-rgb), 0.26);
  border-radius: 1px;
}
[data-style="artdeco"] .diamond-pos-card.tier-good {
  box-shadow: 0 0 0 1px rgba(var(--green-rgb), 0.09), inset 0 1px 0 rgba(var(--green-rgb), 0.20);
  border-radius: 1px;
}
[data-style="artdeco"] .diamond-pos-card.tier-average {
  box-shadow: 0 0 0 1px rgba(var(--green-rgb), 0.09), inset 0 1px 0 rgba(var(--green-rgb), 0.20);
  border-radius: 1px;
}

/* ── Panels — gold top border ── */
[data-style="artdeco"] .lineup-card {
  background: var(--void);
  border-color: rgba(var(--gold-rgb), 0.28);
  border-top: 2px solid rgba(var(--gold-rgb), 0.60);
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.08);
}
[data-style="artdeco"] .position-section {
  border-color: rgba(var(--gold-rgb), 0.20);
  border-top: 1px solid rgba(var(--gold-rgb), 0.40);
}
[data-style="artdeco"] .void-panel {
  background: var(--void);
  border-color: rgba(var(--gold-rgb), 0.30);
  border-top: 2px solid rgba(var(--gold-rgb), 0.60);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.10);
}

/* ── Modals — gold border ── */
[data-style="artdeco"] .modal-panel {
  background: var(--void);
  border-color: rgba(var(--gold-rgb), 0.40);
  border-top: 3px solid rgba(var(--gold-rgb), 0.70);
  border-radius: 1px;
  box-shadow:
    0 0 0 1px rgba(var(--gold-rgb), 0.12),
    0 0 0 3px rgba(var(--gold-rgb), 0.06),
    0 8px 32px rgba(0,0,0,0.6);
}
[data-style="artdeco"] .modal-header {
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.18);
  letter-spacing: 0.14em;
}

/* ── Buttons — square corners, wider tracking ── */
[data-style="artdeco"] .btn-primary {
  border-radius: 1px;
  letter-spacing: 0.18em;
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.30), 0 0 0 3px rgba(var(--gold-rgb), 0.10);
}
[data-style="artdeco"] .btn-outline {
  border-radius: 1px;
  letter-spacing: 0.16em;
  border-color: rgba(var(--gold-rgb), 0.50);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.15);
}
[data-style="artdeco"] .btn-outline:hover {
  border-color: rgba(var(--gold-rgb), 0.75);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.22);
}

/* ── Result screen ── */
[data-style="artdeco"] .record-banner {
  border-radius: 1px;
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.18), 0 0 20px rgba(var(--gold-rgb), 0.22), inset 0 1px 0 rgba(var(--gold-rgb), 0.40);
}
[data-style="artdeco"] .postseason-champion-banner {
  border-radius: 1px;
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.22), 0 0 0 5px rgba(var(--gold-rgb), 0.08), 0 0 40px rgba(var(--gold-rgb), 0.35), inset 0 1px 0 rgba(var(--gold-rgb), 0.50);
}

/* ── Settings option active ── */
[data-style="artdeco"] .settings-option.active {
  border-color: var(--tier-elite);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.15);
}

/* ── Badges — wider tracking, square ── */
[data-style="artdeco"] .hof-badge,
[data-style="artdeco"] .ace-badge,
[data-style="artdeco"] .clutch-badge,
[data-style="artdeco"] .ironman-badge {
  border-radius: 1px;
  letter-spacing: 0.14em;
}

/* ── Roll boxes ── */
[data-style="artdeco"] .roll-box {
  border-color: rgba(var(--gold-rgb), 0.20);
  border-radius: 1px;
}

/* ── Scoreboard ── */
[data-style="artdeco"] .scoreboard {
  background: var(--void);
  border-color: rgba(var(--gold-rgb), 0.28);
  border-top: 2px solid rgba(var(--gold-rgb), 0.55);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.07);
}

/* ── Manager card ── */
[data-style="artdeco"] .manager-card {
  background: var(--void);
  border-color: rgba(var(--gold-rgb), 0.32);
  border-top: 2px solid rgba(var(--gold-rgb), 0.60);
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.08);
}

/* ── Achievement cards ── */
[data-style="artdeco"] .achievement-card {
  background: var(--void);
  border-color: rgba(var(--gold-rgb), 0.28);
  border-top: 1px solid rgba(var(--gold-rgb), 0.45);
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.08);
}

/* ── Postseason tiles ── */
[data-style="artdeco"] .postseason-game-tile,
[data-style="artdeco"] .postseason-mvp-tile {
  background: var(--void);
  border-color: rgba(var(--gold-rgb), 0.28);
  border-top: 1px solid rgba(var(--gold-rgb), 0.45);
  border-radius: 1px;
}

/* ── Art Deco: result screen recap panels ── */
[data-style="artdeco"] .result-recap,
[data-style="artdeco"] .lineup-card.result-recap {
  border-color: rgba(var(--gold-rgb), 0.28);
  border-top: 2px solid rgba(var(--gold-rgb), 0.55);
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.07);
}

/* ── Art Deco: highlight card ── */
[data-style="artdeco"] .highlight-card {
  background: var(--void);
  border-color: rgba(var(--gold-rgb), 0.35);
  border-top: 2px solid rgba(var(--gold-rgb), 0.60);
  border-radius: 1px;
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.10);
}

/* ── Art Deco: sandbox panel ── */
[data-style="artdeco"] #sandbox-panel,
[data-style="artdeco"] .sandbox-section {
  border-color: rgba(var(--gold-rgb), 0.22);
  border-top: 1px solid rgba(var(--gold-rgb), 0.40);
  border-radius: 1px;
}

/* ── Art Deco: record banner ── */


/* ── Art Deco: chevron corners on slot boxes ── */
[data-style="artdeco"] .slot-box.tier-elite,
[data-style="artdeco"] .slot-box.tier-great,
[data-style="artdeco"] .slot-box.tier-good,
[data-style="artdeco"] .slot-filled.tier-elite,
[data-style="artdeco"] .slot-filled.tier-great,
[data-style="artdeco"] .slot-filled.tier-good {
  position: relative;
}
[data-style="artdeco"] .slot-box.tier-elite,
[data-style="artdeco"] .slot-box.tier-great,
[data-style="artdeco"] .slot-box.tier-good,
[data-style="artdeco"] .slot-filled.tier-elite,
[data-style="artdeco"] .slot-filled.tier-great,
[data-style="artdeco"] .slot-filled.tier-good {
  border-radius: 1px; /* sharp corners so chevrons sit flush */
}
[data-style="artdeco"] .slot-box.tier-elite::before,
[data-style="artdeco"] .slot-box.tier-great::before,
[data-style="artdeco"] .slot-box.tier-good::before,
[data-style="artdeco"] .slot-filled.tier-elite::before,
[data-style="artdeco"] .slot-filled.tier-great::before,
[data-style="artdeco"] .slot-filled.tier-good::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 9px; height: 9px;
  border-top: 2px solid;
  border-left: 2px solid;
  pointer-events: none;
  z-index: 2;
}
[data-style="artdeco"] .slot-box.tier-elite::after,
[data-style="artdeco"] .slot-box.tier-great::after,
[data-style="artdeco"] .slot-box.tier-good::after,
[data-style="artdeco"] .slot-filled.tier-elite::after,
[data-style="artdeco"] .slot-filled.tier-great::after,
[data-style="artdeco"] .slot-filled.tier-good::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 9px; height: 9px;
  border-bottom: 2px solid;
  border-right: 2px solid;
  pointer-events: none;
  z-index: 2;
}
[data-style="artdeco"] .slot-box.tier-elite::before,
[data-style="artdeco"] .slot-box.tier-elite::after,
[data-style="artdeco"] .slot-filled.tier-elite::before,
[data-style="artdeco"] .slot-filled.tier-elite::after {
  border-color: rgba(var(--gold-rgb), 1.0);
}
[data-style="artdeco"] .slot-box.tier-great::before,
[data-style="artdeco"] .slot-box.tier-great::after,
[data-style="artdeco"] .slot-filled.tier-great::before,
[data-style="artdeco"] .slot-filled.tier-great::after {
  border-color: rgba(var(--purple-rgb), 0.95);
}
[data-style="artdeco"] .slot-box.tier-good::before,
[data-style="artdeco"] .slot-box.tier-good::after,
[data-style="artdeco"] .slot-filled.tier-good::before,
[data-style="artdeco"] .slot-filled.tier-good::after {
  border-color: rgba(var(--green-rgb), 0.90);
}

/* Art Deco: diamond pos cards — no corner ornaments, too small */

/* ── Art Deco: Josefin Sans font ── */
[data-style="artdeco"] {
  --font: 'Josefin Sans', 'IBM Plex Mono', 'Courier New', monospace;
}
[data-style="artdeco"] .player-name,
[data-style="artdeco"] .diamond-pos-name,
[data-style="artdeco"] .manager-name,
[data-style="artdeco"] h1,
[data-style="artdeco"] h2,
[data-style="artdeco"] h3,
[data-style="artdeco"] .brand,
[data-style="artdeco"] .brand-sub,
[data-style="artdeco"] .btn-primary,
[data-style="artdeco"] .btn-outline,
[data-style="artdeco"] .modal-title,
[data-style="artdeco"] .mono-caps,
[data-style="artdeco"] .section-label,
[data-style="artdeco"] .position-label {
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: 0.14em;
}

/* ══════════════════════════════════════════════════════════════
   VIENNESE SECESSION STYLE
   Klimt / Koloman Moser / Ver Sacrum. Flat color fields on black,
   warm gilt gold, corner square ornaments, dot-row panel tops,
   Cormorant Upright for player names. No gradients on card fill.
   All scoped to [data-style="secession"].
══════════════════════════════════════════════════════════════ */

/* ── Root ── */
[data-style="secession"] {
  --tier-elite: #c9a84c;
  --gold-rgb:   201, 168, 76;

  --font: 'Cormorant Upright', 'IBM Plex Mono', monospace;
  --void:   #0a0804;
  --void-2: #141210;}

/* ── Typography — Cormorant Upright for names and headings ── */
[data-style="secession"] body {
  background: #0a0804;
}
[data-style="secession"] body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(2px 2px at  7% 12%, rgba(201,164,85,0.70) 0%, transparent 100%),
    radial-gradient(2px 2px at 23% 34%, rgba(201,164,85,0.55) 0%, transparent 100%),
    radial-gradient(3px 3px at 41%  8%, rgba(201,164,85,0.65) 0%, transparent 100%),
    radial-gradient(2px 2px at 57% 28%, rgba(201,164,85,0.50) 0%, transparent 100%),
    radial-gradient(2px 2px at 72% 15%, rgba(201,164,85,0.70) 0%, transparent 100%),
    radial-gradient(3px 3px at 88% 40%, rgba(201,164,85,0.60) 0%, transparent 100%),
    radial-gradient(2px 2px at 15% 58%, rgba(201,164,85,0.65) 0%, transparent 100%),
    radial-gradient(2px 2px at 34% 72%, rgba(201,164,85,0.50) 0%, transparent 100%),
    radial-gradient(3px 3px at 52% 55%, rgba(201,164,85,0.70) 0%, transparent 100%),
    radial-gradient(2px 2px at 68% 68%, rgba(201,164,85,0.55) 0%, transparent 100%),
    radial-gradient(2px 2px at 83% 80%, rgba(201,164,85,0.65) 0%, transparent 100%),
    radial-gradient(3px 3px at 28% 90%, rgba(201,164,85,0.70) 0%, transparent 100%),
    radial-gradient(2px 2px at 63% 92%, rgba(201,164,85,0.55) 0%, transparent 100%),
    radial-gradient(2px 2px at 94% 22%, rgba(201,164,85,0.60) 0%, transparent 100%),
    radial-gradient(3px 3px at 11% 45%, rgba(201,164,85,0.70) 0%, transparent 100%),
    radial-gradient(2px 2px at 32% 20%, rgba(201,164,85,0.65) 0%, transparent 100%),
    radial-gradient(2px 2px at 76% 38%, rgba(201,164,85,0.55) 0%, transparent 100%),
    radial-gradient(3px 3px at 19% 78%, rgba(201,164,85,0.65) 0%, transparent 100%),
    radial-gradient(2px 2px at 85% 65%, rgba(201,164,85,0.60) 0%, transparent 100%),
    radial-gradient(3px 3px at 92% 55%, rgba(201,164,85,0.70) 0%, transparent 100%),
    radial-gradient(2px 2px at 38% 96%, rgba(201,164,85,0.50) 0%, transparent 100%),
    radial-gradient(2px 2px at 70% 10%, rgba(201,164,85,0.65) 0%, transparent 100%),
    radial-gradient(3px 3px at  5% 30%, rgba(201,164,85,0.60) 0%, transparent 100%),
    radial-gradient(2px 2px at 47% 48%, rgba(201,164,85,0.55) 0%, transparent 100%),
    radial-gradient(2px 2px at 60% 74%, rgba(201,164,85,0.60) 0%, transparent 100%),
    radial-gradient(3px 3px at 80% 92%, rgba(201,164,85,0.65) 0%, transparent 100%),
    radial-gradient(2px 2px at 25% 52%, rgba(201,164,85,0.55) 0%, transparent 100%),
    radial-gradient(2px 2px at 97% 68%, rgba(201,164,85,0.60) 0%, transparent 100%);
  animation: sec-dots-a 4s ease-in-out infinite alternate;
}
[data-style="secession"] body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1px 1px at 48% 45%, rgba(201,164,85,0.50) 0%, transparent 100%),
    radial-gradient(2px 2px at 61% 62%, rgba(201,164,85,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at  8% 52%, rgba(201,164,85,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 68%, rgba(201,164,85,0.40) 0%, transparent 100%),
    radial-gradient(1px 1px at 47% 80%, rgba(201,164,85,0.50) 0%, transparent 100%),
    radial-gradient(2px 2px at 78% 25%, rgba(201,164,85,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 38%, rgba(201,164,85,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 96% 90%, rgba(201,164,85,0.45) 0%, transparent 100%),
    radial-gradient(2px 2px at 18% 15%, rgba(201,164,85,0.50) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 50%, rgba(201,164,85,0.40) 0%, transparent 100%);
  animation: sec-dots-b 5.5s ease-in-out infinite alternate-reverse;
}
@keyframes sec-dots-a { 0%{opacity:0.10} 100%{opacity:0.85} }
@keyframes sec-dots-b { 0%{opacity:0.80} 100%{opacity:0.15} }

[data-style="secession"] .player-name,
[data-style="secession"] .diamond-pos-name,
[data-style="secession"] .manager-name,
[data-style="secession"] .slot-box-name,
[data-style="secession"] h1,
[data-style="secession"] h2,
[data-style="secession"] h3,
[data-style="secession"] .brand,
[data-style="secession"] .modal-title,
[data-style="secession"] .panel-label,
[data-style="secession"] .position-section-header .pos-name,
[data-style="secession"] .sandbox-label {
  font-family: 'Cormorant Upright', serif;
  letter-spacing: 0.08em;
}
[data-style="secession"] .btn-primary,
[data-style="secession"] .btn-outline,
[data-style="secession"] .btn-reroll {
  letter-spacing: 0.16em;
}

/* ── Player cards — flat fill + outer ring + corner squares ── */
[data-style="secession"] .player-card.tier-elite {
  border-color: rgba(var(--gold-rgb), 0.65);
  background-color: rgba(var(--gold-rgb), 0.07);
  background-image: none;
  box-shadow:
    0 0 0 3px rgba(var(--gold-rgb), 0.06),
    inset 0 1.5px 0 rgba(var(--gold-rgb), 0.50);
  border-radius: 1px;
}
[data-style="secession"] .player-card.tier-great {
  border-color: rgba(var(--purple-rgb), 0.58);
  background-color: rgba(var(--purple-rgb), 0.06);
  background-image: none;
  box-shadow:
    0 0 0 3px rgba(var(--purple-rgb), 0.05),
    inset 0 1.5px 0 rgba(var(--purple-rgb), 0.38);
  border-radius: 1px;
}
[data-style="secession"] .player-card.tier-good {
  border-color: rgba(var(--green-rgb), 0.52);
  background-color: rgba(var(--green-rgb), 0.05);
  background-image: none;
  box-shadow:
    0 0 0 3px rgba(var(--green-rgb), 0.04),
    inset 0 1.5px 0 rgba(var(--green-rgb), 0.30);
  border-radius: 1px;
}
[data-style="secession"] .player-card.tier-average {
  border-color: rgba(90,122,106, 0.52);
  background-color: rgba(90,122,106, 0.05);
  background-image: none;
  box-shadow:
    0 0 0 3px rgba(90,122,106, 0.04),
    inset 0 1.5px 0 rgba(90,122,106, 0.30);
  border-radius: 1px;
}

/* Corner square ornaments on player cards */
[data-style="secession"] .player-card.tier-elite::before,
[data-style="secession"] .player-card.tier-great::before,
[data-style="secession"] .player-card.tier-good::before,
[data-style="secession"] .player-card.tier-average::before {
  content: '';
  position: absolute; top: 4px; left: 4px;
  width: 5px; height: 5px;
  border: 1.5px solid;
  pointer-events: none; z-index: 2;
}
[data-style="secession"] .player-card.tier-elite::after,
[data-style="secession"] .player-card.tier-great::after,
[data-style="secession"] .player-card.tier-good::after,
[data-style="secession"] .player-card.tier-average::after {
  content: '';
  position: absolute; bottom: 4px; right: 4px;
  width: 5px; height: 5px;
  border: 1.5px solid;
  pointer-events: none; z-index: 2;
}
[data-style="secession"] .player-card.tier-elite::before,
[data-style="secession"] .player-card.tier-elite::after {
  border-color: rgba(var(--gold-rgb), 0.85);
}
[data-style="secession"] .player-card.tier-great::before,
[data-style="secession"] .player-card.tier-great::after {
  border-color: rgba(var(--purple-rgb), 0.75);
}
[data-style="secession"] .player-card.tier-good::before,
[data-style="secession"] .player-card.tier-good::after {
  border-color: rgba(var(--green-rgb), 0.65);
}
[data-style="secession"] .player-card.tier-average::before,
[data-style="secession"] .player-card.tier-average::after {
  border-color: rgba(90,122,106, 0.65);
}

/* ── Expanded draft card ── */
[data-style="secession"] .expanded-draft-card.tier-elite {
  border-color: rgba(var(--gold-rgb), 0.65);
  background-color: rgba(var(--gold-rgb), 0.07);
  background-image: none;
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.06), inset 0 1.5px 0 rgba(var(--gold-rgb), 0.50);
  border-radius: 1px;
}
[data-style="secession"] .expanded-draft-card.tier-great {
  border-color: rgba(var(--purple-rgb), 0.58);
  background-color: rgba(var(--purple-rgb), 0.06);
  background-image: none;
  box-shadow: 0 0 0 3px rgba(var(--purple-rgb), 0.05), inset 0 1.5px 0 rgba(var(--purple-rgb), 0.38);
  border-radius: 1px;
}
[data-style="secession"] .expanded-draft-card.tier-good {
  border-color: rgba(var(--green-rgb), 0.52);
  background-color: rgba(var(--green-rgb), 0.05);
  background-image: none;
  box-shadow: 0 0 0 3px rgba(var(--green-rgb), 0.04), inset 0 1.5px 0 rgba(var(--green-rgb), 0.30);
  border-radius: 1px;
}
[data-style="secession"] .expanded-draft-card.tier-average {
  border-color: rgba(90,122,106, 0.52);
  background-color: rgba(90,122,106, 0.05);
  background-image: none;
  box-shadow: 0 0 0 3px rgba(90,122,106, 0.04), inset 0 1.5px 0 rgba(90,122,106, 0.30);
  border-radius: 1px;
}

/* Corner squares on expanded card */
[data-style="secession"] .expanded-draft-card.tier-elite::before,
[data-style="secession"] .expanded-draft-card.tier-great::before,
[data-style="secession"] .expanded-draft-card.tier-good::before {
  content: ''; position: absolute; top: 4px; left: 4px;
  width: 7px; height: 7px; border: 1.5px solid;
  pointer-events: none; z-index: 2;
}
[data-style="secession"] .expanded-draft-card.tier-elite::after,
[data-style="secession"] .expanded-draft-card.tier-great::after,
[data-style="secession"] .expanded-draft-card.tier-good::after {
  content: ''; position: absolute; bottom: 4px; right: 4px;
  width: 7px; height: 7px; border: 1.5px solid;
  pointer-events: none; z-index: 2;
}
[data-style="secession"] .expanded-draft-card.tier-elite::before,
[data-style="secession"] .expanded-draft-card.tier-elite::after { border-color: rgba(var(--gold-rgb), 0.85); }
[data-style="secession"] .expanded-draft-card.tier-great::before,
[data-style="secession"] .expanded-draft-card.tier-great::after { border-color: rgba(var(--purple-rgb), 0.75); }
[data-style="secession"] .expanded-draft-card.tier-good::before,
[data-style="secession"] .expanded-draft-card.tier-good::after  { border-color: rgba(var(--green-rgb), 0.65); }

/* ── Slot boxes ── */
[data-style="secession"] .slot-box.tier-elite,
[data-style="secession"] .slot-filled.tier-elite {
  border-color: rgba(var(--gold-rgb), 0.55);
  background-color: rgba(var(--gold-rgb), 0.07);
  background-image: none;
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.05), inset 0 1.5px 0 rgba(var(--gold-rgb), 0.38);
  border-radius: 1px;
}
[data-style="secession"] .slot-box.tier-great,
[data-style="secession"] .slot-filled.tier-great {
  border-color: rgba(var(--purple-rgb), 0.50);
  background-color: rgba(var(--purple-rgb), 0.06);
  background-image: none;
  box-shadow: 0 0 0 2px rgba(var(--purple-rgb), 0.04), inset 0 1.5px 0 rgba(var(--purple-rgb), 0.28);
  border-radius: 1px;
}
[data-style="secession"] .slot-box.tier-good,
[data-style="secession"] .slot-filled.tier-good {
  border-color: rgba(var(--green-rgb), 0.44);
  background-color: rgba(var(--green-rgb), 0.05);
  background-image: none;
  box-shadow: 0 0 0 2px rgba(var(--green-rgb), 0.03), inset 0 1.5px 0 rgba(var(--green-rgb), 0.24);
  border-radius: 1px;
}
[data-style="secession"] .slot-box.tier-average,
[data-style="secession"] .slot-filled.tier-average {
  border-color: rgba(var(--green-rgb), 0.44);
  background-color: rgba(var(--green-rgb), 0.05);
  background-image: none;
  box-shadow: 0 0 0 2px rgba(var(--green-rgb), 0.03), inset 0 1.5px 0 rgba(var(--green-rgb), 0.24);
  border-radius: 1px;
}
[data-style="secession"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average),
[data-style="secession"] .slot-filled:not(.tier-elite):not(.tier-great):not(.tier-good) {
  border-color: rgba(255,255,255,0.07);
  border-radius: 1px;
}

/* Corner squares on slot boxes */
[data-style="secession"] .slot-box.tier-elite::before,
[data-style="secession"] .slot-box.tier-great::before,
[data-style="secession"] .slot-box.tier-good::before,
[data-style="secession"] .slot-filled.tier-elite::before,
[data-style="secession"] .slot-filled.tier-great::before,
[data-style="secession"] .slot-filled.tier-good::before {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 5px; height: 5px; border: 1.5px solid;
  pointer-events: none; z-index: 2;
}
[data-style="secession"] .slot-box.tier-elite::after,
[data-style="secession"] .slot-box.tier-great::after,
[data-style="secession"] .slot-box.tier-good::after,
[data-style="secession"] .slot-filled.tier-elite::after,
[data-style="secession"] .slot-filled.tier-great::after,
[data-style="secession"] .slot-filled.tier-good::after {
  content: ''; position: absolute; bottom: 3px; right: 3px;
  width: 5px; height: 5px; border: 1.5px solid;
  pointer-events: none; z-index: 2;
}
[data-style="secession"] .slot-box.tier-elite::before,
[data-style="secession"] .slot-box.tier-elite::after,
[data-style="secession"] .slot-filled.tier-elite::before,
[data-style="secession"] .slot-filled.tier-elite::after { border-color: rgba(var(--gold-rgb), 0.80); }
[data-style="secession"] .slot-box.tier-great::before,
[data-style="secession"] .slot-box.tier-great::after,
[data-style="secession"] .slot-filled.tier-great::before,
[data-style="secession"] .slot-filled.tier-great::after { border-color: rgba(var(--purple-rgb), 0.70); }
[data-style="secession"] .slot-box.tier-good::before,
[data-style="secession"] .slot-box.tier-good::after,
[data-style="secession"] .slot-filled.tier-good::before,
[data-style="secession"] .slot-filled.tier-good::after  { border-color: rgba(var(--green-rgb), 0.62); }

/* ── Diamond position cards ── */
[data-style="secession"] .diamond-pos-card.tier-elite {
  border-color: rgba(var(--gold-rgb), 0.58);
  background-color: rgba(var(--gold-rgb), 0.08);
  background-image: none;
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.05), inset 0 1.5px 0 rgba(var(--gold-rgb), 0.38);
  border-radius: 1px;
}
[data-style="secession"] .diamond-pos-card.tier-great {
  border-color: rgba(var(--purple-rgb), 0.50);
  background-color: rgba(var(--purple-rgb), 0.06);
  background-image: none;
  box-shadow: 0 0 0 2px rgba(var(--purple-rgb), 0.04), inset 0 1.5px 0 rgba(var(--purple-rgb), 0.28);
  border-radius: 1px;
}
[data-style="secession"] .diamond-pos-card.tier-good {
  border-color: rgba(var(--green-rgb), 0.44);
  background-color: rgba(var(--green-rgb), 0.05);
  background-image: none;
  box-shadow: 0 0 0 2px rgba(var(--green-rgb), 0.03), inset 0 1.5px 0 rgba(var(--green-rgb), 0.22);
  border-radius: 1px;
}
[data-style="secession"] .diamond-pos-card.tier-average {
  border-color: rgba(var(--green-rgb), 0.44);
  background-color: rgba(var(--green-rgb), 0.05);
  background-image: none;
  box-shadow: 0 0 0 2px rgba(var(--green-rgb), 0.03), inset 0 1.5px 0 rgba(var(--green-rgb), 0.22);
  border-radius: 1px;
}

/* Secession: diamond pos cards — no corner squares, too small */

/* ── Panels — gold top border + dot-row ornament ── */
[data-style="secession"] .lineup-card {
  background: var(--void);
  border-color: rgba(var(--gold-rgb), 0.18);
  border-top: 2px solid rgba(var(--gold-rgb), 0.45);
  box-shadow: none;
}
[data-style="secession"] .void-panel {
  background: var(--void);
  border-color: rgba(var(--gold-rgb), 0.18);
  border-top: 2px solid rgba(var(--gold-rgb), 0.45);
}
[data-style="secession"] .position-section {
  border-color: rgba(var(--gold-rgb), 0.12);
  border-top: 1px solid rgba(var(--gold-rgb), 0.25);
}
[data-style="secession"] .modal-panel {
  background: var(--void);
  border-color: rgba(var(--gold-rgb), 0.28);
  border-top: 2px solid rgba(var(--gold-rgb), 0.55);
  border-radius: 1px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
[data-style="secession"] .modal-header {
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.14);
  letter-spacing: 0.16em;
}
[data-style="secession"] .scoreboard {
  background: var(--void);
  border-color: rgba(var(--gold-rgb), 0.18);
  border-top: 2px solid rgba(var(--gold-rgb), 0.40);
}
[data-style="secession"] .manager-card {
  background: var(--void);
  border-color: rgba(var(--gold-rgb), 0.18);
  border-top: 2px solid rgba(var(--gold-rgb), 0.40);
  border-radius: 1px;
}
[data-style="secession"] .highlight-card {
  background: var(--void);
  border-color: rgba(var(--gold-rgb), 0.22);
  border-top: 2px solid rgba(var(--gold-rgb), 0.45);
  border-radius: 1px;
}
[data-style="secession"] .achievement-card {
  background: var(--void);
  border-color: rgba(var(--gold-rgb), 0.16);
  border-top: 1px solid rgba(var(--gold-rgb), 0.35);
  border-radius: 1px;
}
[data-style="secession"] .postseason-game-tile,
[data-style="secession"] .postseason-mvp-tile {
  background: var(--void);
  border-color: rgba(var(--gold-rgb), 0.16);
  border-top: 1px solid rgba(var(--gold-rgb), 0.32);
  border-radius: 1px;
}

/* ── Buttons ── */
[data-style="secession"] .btn-primary {
  background: rgba(var(--gold-rgb), 0.12);
  color: rgba(var(--gold-rgb), 0.95);
  border: 1px solid rgba(var(--gold-rgb), 0.50);
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.08);
  border-radius: 0;
}
[data-style="secession"] .btn-primary:hover:not(:disabled) {
  background: rgba(var(--gold-rgb), 0.20);
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.14);
  transform: none;
}
[data-style="secession"] .btn-outline {
  border-color: rgba(255,255,255,0.22);
  border-radius: 0;
  box-shadow: none;
}
[data-style="secession"] .btn-outline:hover {
  border-color: rgba(var(--gold-rgb), 0.55);
  color: rgba(var(--gold-rgb), 0.90);
}
[data-style="secession"] .btn-reroll {
  border-radius: 0;
}

/* ── Result screen ── */
[data-style="secession"] .record-banner {
  border-radius: 1px;
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.12), inset 0 1px 0 rgba(var(--gold-rgb), 0.25);
}
[data-style="secession"] .postseason-champion-banner {
  border-radius: 1px;
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.16), 0 0 0 5px rgba(var(--gold-rgb), 0.06), inset 0 1px 0 rgba(var(--gold-rgb), 0.35);
}

/* ── Settings option active state ── */
[data-style="secession"] .settings-option.active {
  border-color: var(--tier-elite);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.12);
}

/* ── Badges ── */
[data-style="secession"] .hof-badge,
[data-style="secession"] .ace-badge,
[data-style="secession"] .clutch-badge,
[data-style="secession"] .ironman-badge {
  border-radius: 0;
  letter-spacing: 0.12em;
}

/* ══════════════════════════════════════════════════════════════
   JAPANESE MINIMALISM STYLE
   Ma (negative space). Single ink stroke. Vermilion accent.
   Noto Serif JP for names. No fills, no gradients, no glow.
   All scoped to [data-style="jp"].
══════════════════════════════════════════════════════════════ */

[data-style="jp"] {
  --tier-elite: #b4281e;
  --gold:       #b4281e;
  --gold-rgb:   180, 40, 30;
  --gold-bright:#d43020;

  --purple-rgb: 160, 127, 209;
  --green-rgb:  95, 191, 122;

  --font: 'Noto Serif JP', 'IBM Plex Mono', monospace;
  --void:   #0a0a08;
  --void-2: #131311;}

/* ── Typography — Noto Serif JP for names ── */
[data-style="jp"] body {
  background: #0a0a08;
}
[data-style="jp"] body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 80% 4% at 48% 62%, rgba(180,40,30,0.09) 0%, transparent 100%),
    radial-gradient(ellipse 55% 2% at 40% 63%, rgba(180,40,30,0.06) 0%, transparent 100%),
    radial-gradient(ellipse 25% 1.5% at 65% 62%, rgba(180,40,30,0.05) 0%, transparent 100%);
  animation: jp-wash 7s ease-in-out infinite alternate;
}
[data-style="jp"] body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 2% 28% at 18% 0%, rgba(180,40,30,0.06) 0%, transparent 100%);
  animation: jp-wash 9s ease-in-out infinite alternate-reverse;
}
@keyframes jp-wash { 0%{opacity:0.15} 100%{opacity:1.00} }

/* ── Screentone B — diagonal dot band across scene ── */
[data-style="showa"] .screentone-band {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(200,130,50,.12) 1px, transparent 1px);
  background-size: 5px 5px;
  -webkit-mask-image: linear-gradient(135deg, transparent 0%, transparent 27%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 57%, transparent 65%, transparent 100%);
  mask-image: linear-gradient(135deg, transparent 0%, transparent 27%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 57%, transparent 65%, transparent 100%);
}

/* ── Cherry blossoms ── */
[data-style="showa"] .blossom {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  animation: jp-fall linear infinite;
}
@keyframes jp-fall {
  0%   { transform: translateY(0px) rotate(0deg);   opacity: 0.55; }
  80%  { opacity: 0.45; }
  100% { transform: translateY(110vh) rotate(380deg); opacity: 0; }
}

[data-style="jp"] .player-name,
[data-style="jp"] .diamond-pos-name,
[data-style="jp"] .manager-name,
[data-style="jp"] .brand {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  letter-spacing: 0.05em;
}

/* ── Player cards — ink stroke left border, no fill ── */
[data-style="jp"] .player-card.tier-elite {
  border-color: transparent;
  border-left: 2px solid rgba(180,40,30,0.80);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-radius: 0;
}
[data-style="jp"] .player-card.tier-great {
  border-color: transparent;
  border-left: 2px solid rgba(var(--purple-rgb), 0.55);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-radius: 0;
}
[data-style="jp"] .player-card.tier-good {
  border-color: transparent;
  border-left: 2px solid rgba(var(--green-rgb), 0.40);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-radius: 0;
}
[data-style="jp"] .player-card.tier-average {
  border-color: transparent;
  border-left: 2px solid rgba(90,122,106, 0.40);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-radius: 0;
}
[data-style="jp"] .player-card:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average):not(.ineligible) {
  border-color: transparent;
  border-left: 1px solid rgba(255,255,255,0.08);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-radius: 0;
}

/* ── Expanded draft card ── */
[data-style="jp"] .expanded-draft-card.tier-elite {
  border-color: transparent;
  border-left: 2px solid rgba(180,40,30,0.80);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-radius: 0;
}
[data-style="jp"] .expanded-draft-card.tier-great {
  border-color: transparent;
  border-left: 2px solid rgba(var(--purple-rgb), 0.55);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-radius: 0;
}
[data-style="jp"] .expanded-draft-card.tier-good {
  border-color: transparent;
  border-left: 2px solid rgba(var(--green-rgb), 0.40);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-radius: 0;
}
[data-style="jp"] .expanded-draft-card.tier-average {
  border-color: transparent;
  border-left: 2px solid rgba(90,122,106, 0.40);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-radius: 0;
}

/* ── Slot boxes — hairline border, no fill ── */
[data-style="showa"] .slot-box.tier-elite,
[data-style="showa"] .slot-filled.tier-elite {
  border-color: transparent;
  border-left: 2px solid rgba(180,40,30,0.65);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-radius: 0;
  position: relative; overflow: hidden;
}
[data-style="showa"] .slot-box.tier-great,
[data-style="showa"] .slot-filled.tier-great {
  border-color: transparent;
  border-left: 2px solid rgba(var(--purple-rgb), 0.45);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-radius: 0;
  position: relative; overflow: hidden;
}
[data-style="showa"] .slot-box.tier-good,
[data-style="showa"] .slot-filled.tier-good {
  border-color: transparent;
  border-left: 2px solid rgba(var(--green-rgb), 0.35);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-radius: 0;
  position: relative; overflow: hidden;
}
[data-style="showa"] .slot-box.tier-average,
[data-style="showa"] .slot-filled.tier-average {
  border-color: transparent;
  border-left: 2px solid rgba(var(--green-rgb), 0.35);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-radius: 0;
  position: relative; overflow: hidden;
}
[data-style="showa"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average),
[data-style="showa"] .slot-filled:not(.tier-elite):not(.tier-great):not(.tier-good) {
  border-color: transparent;
  border-left: 1px solid rgba(255,255,255,0.06);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-radius: 0;
  position: relative; overflow: hidden;
}
[data-style="showa"] .slot-box::after,
[data-style="showa"] .slot-filled::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: radial-gradient(circle, rgba(200,130,50,.15) 1px, transparent 1px);
  background-size: 5px 5px;
  -webkit-mask-image: linear-gradient(135deg, transparent 0%, transparent 20%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 70%, transparent 85%, transparent 100%);
  mask-image: linear-gradient(135deg, transparent 0%, transparent 20%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 70%, transparent 85%, transparent 100%);
}

/* ── Diamond pos cards — left stroke only ── */
[data-style="jp"] .diamond-pos-card.tier-elite {
  border-color: transparent;
  border-left: 2px solid rgba(180,40,30,0.70);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-radius: 0;
}
[data-style="jp"] .diamond-pos-card.tier-great {
  border-color: transparent;
  border-left: 2px solid rgba(var(--purple-rgb), 0.45);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-radius: 0;
}
[data-style="jp"] .diamond-pos-card.tier-good {
  border-color: transparent;
  border-left: 2px solid rgba(var(--green-rgb), 0.35);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-radius: 0;
}
[data-style="jp"] .diamond-pos-card.tier-average {
  border-color: transparent;
  border-left: 2px solid rgba(var(--green-rgb), 0.35);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-radius: 0;
}

/* ── Panels — single top stroke ── */
[data-style="jp"] .lineup-card {
  border-color: transparent;
  border-top: 1px solid rgba(180,40,30,0.25);
  box-shadow: none;
  background: transparent;
}
[data-style="jp"] .void-panel {
  background: var(--void);
  border-color: transparent;
  border-top: 1px solid rgba(180,40,30,0.20);
  box-shadow: none;
}
[data-style="jp"] .position-section {
  border-color: transparent;
  border-top: 1px solid rgba(255,255,255,0.05);
}
[data-style="jp"] .modal-panel {
  background: var(--void);
  border-color: transparent;
  border-top: 1px solid rgba(180,40,30,0.40);
  border-radius: 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
}
[data-style="jp"] .modal-header {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
[data-style="jp"] .manager-card {
  background: var(--void);
  border-color: transparent;
  border-top: 1px solid rgba(180,40,30,0.25);
  border-radius: 0;
}
[data-style="jp"] .scoreboard {
  background: var(--void);
  border-color: transparent;
  border-top: 1px solid rgba(180,40,30,0.25);
}
[data-style="jp"] .highlight-card,
[data-style="jp"] .achievement-card {
  background: var(--void);
  border-color: transparent;
  border-left: 1px solid rgba(180,40,30,0.30);
  border-radius: 0;
}
[data-style="jp"] .postseason-game-tile,
[data-style="jp"] .postseason-mvp-tile {
  background: var(--void);
  border-color: transparent;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-radius: 0;
}

/* ── Buttons — outlined, restrained ── */
[data-style="jp"] .btn-primary {
  background: transparent;
  color: rgba(180,40,30,0.80);
  border: 1px solid rgba(180,40,30,0.45);
  border-radius: 0;
  box-shadow: none;
  letter-spacing: 0.18em;
}
[data-style="jp"] .btn-primary:hover:not(:disabled) {
  background: rgba(180,40,30,0.08);
  transform: none;
  box-shadow: none;
}
[data-style="jp"] .btn-outline {
  border-color: rgba(255,255,255,0.14);
  border-radius: 0;
  box-shadow: none;
}
[data-style="jp"] .draft-action-btn:hover:not(:disabled) {
  color: #f8f0e8;
}

[data-style="jp"] .btn-reroll { border-radius: 0; }

/* ── Badges — outline only ── */
[data-style="jp"] .hof-badge,
[data-style="jp"] .ace-badge,
[data-style="jp"] .clutch-badge,
[data-style="jp"] .ironman-badge {
  border-radius: 0;
  background: transparent;
  border-color: rgba(180,40,30,0.40);
  color: rgba(180,40,30,0.75);
}

/* ── Settings active ── */
[data-style="jp"] .settings-option.active {
  border-color: rgba(180,40,30,0.55);
  background: rgba(180,40,30,0.05);
  box-shadow: none;
}

/* ── Result banners ── */
[data-style="jp"] .record-banner {
  border-radius: 0;
  box-shadow: none;
  border-color: transparent;
  border-left: 3px solid rgba(180,40,30,0.60);
}
[data-style="jp"] .postseason-champion-banner {
  border-radius: 0;
  border-color: transparent;
  border-top: 2px solid rgba(180,40,30,0.70);
  box-shadow: none;
}


/* ══════════════════════════════════════════════════════════════
   SYNTHWAVE STYLE
   Outrun / Kavinsky / Perturbator. Void: #0d0010.
   Hot magenta elite, electric cyan great, deep violet good.
   Rajdhani for names. Scanline body overlay.
   All scoped to [data-style="synthwave"].
══════════════════════════════════════════════════════════════ */

[data-style="synthwave"] {
  --tier-elite:   #ff00c8;
  --tier-great:   #00e5ff;
  --tier-good:    #7b00ff;
  --tier-average: #915bcc;
  --gold:         #ff00c8;
  --gold-rgb:     255, 0, 200;
  --gold-bright:  #ff44d8;
  --purple-rgb:   0, 229, 255;
  --green-rgb:    123, 0, 255;
}

/* ── Body — deep purple void + scanlines ── */
[data-style="synthwave"] body {
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(255,0,200,0.04) 2px, rgba(255,0,200,0.04) 4px),
    radial-gradient(ellipse 100% 18% at 50% 56%, rgba(255,0,200,0.12) 0%, transparent 100%),
    #0d0010;
  background-attachment: fixed;
}
[data-style="synthwave"] body::before {
  content: ''; position: fixed; inset: -100% 0 0 0; height: 200%;
  pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 28px, rgba(255,0,200,0.08) 28px, rgba(255,0,200,0.08) 29px);
  animation: synth-scroll 4s linear infinite;
}
[data-style="synthwave"] body::after {
  content: ''; position: fixed; inset: 0; animation: none; pointer-events: none; z-index: 0;
  /* Horizon glow at ~55% down the page */
  background: radial-gradient(ellipse 120% 8% at 50% 55%, rgba(255,0,200,0.12) 0%, transparent 100%);
  background-attachment: fixed;
}
@keyframes synth-scroll { 0%{transform:translateY(0px)} 100%{transform:translateY(29px)} }

/* ── Typography — Rajdhani for names ── */
[data-style="synthwave"] .player-name,
[data-style="synthwave"] .diamond-pos-name,
[data-style="synthwave"] .manager-name,
[data-style="synthwave"] .brand,
[data-style="synthwave"] .btn-primary,
[data-style="synthwave"] .btn-outline,
[data-style="synthwave"] .mono-caps,
[data-style="synthwave"] .position-section-header .pos-name {
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.10em;
}

/* ── Player cards ── */
[data-style="synthwave"] .player-card.tier-elite {
  border-color: rgba(255,0,200,0.65);
  background-color: rgba(255,0,200,0.06);
  background-image: none;
  box-shadow:
    0 0 20px rgba(255,0,200,0.25),
    0 0 40px rgba(255,0,200,0.08),
    inset 0 1px 0 rgba(255,0,200,0.30);
  border-radius: 1px;
}
[data-style="synthwave"] .player-card.tier-great {
  border-color: rgba(0,229,255,0.55);
  background-color: rgba(0,229,255,0.04);
  background-image: none;
  box-shadow:
    0 0 14px rgba(0,229,255,0.18),
    inset 0 1px 0 rgba(0,229,255,0.22);
  border-radius: 1px;
}
[data-style="synthwave"] .player-card.tier-good {
  border-color: rgba(123,0,255,0.50);
  background-color: rgba(123,0,255,0.05);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(123,0,255,0.20);
  border-radius: 1px;
}
[data-style="synthwave"] .player-card.tier-average {
  border-color: rgba(145,91,204,0.50);
  background-color: rgba(145,91,204,0.05);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(145,91,204,0.20);
  border-radius: 1px;
}

/* ── Expanded draft card ── */
[data-style="synthwave"] .expanded-draft-card.tier-elite {
  border-color: rgba(255,0,200,0.65);
  background-color: rgba(255,0,200,0.06);
  background-image: none;
  box-shadow: 0 0 20px rgba(255,0,200,0.25), inset 0 1px 0 rgba(255,0,200,0.30);
  border-radius: 1px;
}
[data-style="synthwave"] .expanded-draft-card.tier-great {
  border-color: rgba(0,229,255,0.55);
  background-color: rgba(0,229,255,0.04);
  background-image: none;
  box-shadow: 0 0 14px rgba(0,229,255,0.18), inset 0 1px 0 rgba(0,229,255,0.22);
  border-radius: 1px;
}
[data-style="synthwave"] .expanded-draft-card.tier-good {
  border-color: rgba(123,0,255,0.50);
  background-color: rgba(123,0,255,0.05);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(123,0,255,0.20);
  border-radius: 1px;
}
[data-style="synthwave"] .expanded-draft-card.tier-average {
  border-color: rgba(145,91,204,0.50);
  background-color: rgba(145,91,204,0.05);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(145,91,204,0.20);
  border-radius: 1px;
}

/* ── Slot boxes ── */
[data-style="synthwave"] .slot-box.tier-elite,
[data-style="synthwave"] .slot-filled.tier-elite {
  border-color: rgba(255,0,200,0.50);
  background-color: rgba(255,0,200,0.05);
  background-image: none;
  box-shadow: 0 0 10px rgba(255,0,200,0.15), inset 0 1px 0 rgba(255,0,200,0.22);
  border-radius: 1px;
}
[data-style="synthwave"] .slot-box.tier-great,
[data-style="synthwave"] .slot-filled.tier-great {
  border-color: rgba(0,229,255,0.42);
  background-color: rgba(0,229,255,0.03);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(0,229,255,0.18);
  border-radius: 1px;
}
[data-style="synthwave"] .slot-box.tier-good,
[data-style="synthwave"] .slot-filled.tier-good {
  border-color: rgba(123,0,255,0.38);
  background-color: rgba(123,0,255,0.04);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(123,0,255,0.16);
  border-radius: 1px;
}
[data-style="synthwave"] .slot-box.tier-average,
[data-style="synthwave"] .slot-filled.tier-average {
  border-color: rgba(145,91,204,0.38);
  background-color: rgba(145,91,204,0.04);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(145,91,204,0.16);
  border-radius: 1px;
}

/* ── Diamond pos cards ── */
[data-style="synthwave"] .diamond-pos-card.tier-elite {
  border-color: rgba(255,0,200,0.55);
  background-color: rgba(255,0,200,0.07);
  background-image: none;
  box-shadow: 0 0 12px rgba(255,0,200,0.22), inset 0 1px 0 rgba(255,0,200,0.25);
  border-radius: 1px;
}
[data-style="synthwave"] .diamond-pos-card.tier-great {
  border-color: rgba(0,229,255,0.45);
  background-color: rgba(0,229,255,0.04);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(0,229,255,0.18);
  border-radius: 1px;
}
[data-style="synthwave"] .diamond-pos-card.tier-good {
  border-color: rgba(123,0,255,0.40);
  background-color: rgba(123,0,255,0.05);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(123,0,255,0.14);
  border-radius: 1px;
}
[data-style="synthwave"] .diamond-pos-card.tier-average {
  border-color: rgba(145,91,204,0.40);
  background-color: rgba(145,91,204,0.05);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(145,91,204,0.14);
  border-radius: 1px;
}

/* ── Panels — magenta top border ── */
[data-style="synthwave"] .lineup-card {
  background: rgba(13,0,16,0.95);
  border-color: rgba(255,0,200,0.14);
  border-top: 1px solid rgba(255,0,200,0.35);
  box-shadow: none;
}
[data-style="synthwave"] .void-panel {
  background: rgba(13,0,16,0.95);
  border-color: rgba(255,0,200,0.12);
  border-top: 1px solid rgba(255,0,200,0.30);
}
[data-style="synthwave"] .modal-panel {
  background: rgba(13,0,16,0.95);
  border-color: rgba(255,0,200,0.25);
  border-top: 2px solid rgba(255,0,200,0.55);
  border-radius: 1px;
  box-shadow: 0 0 40px rgba(255,0,200,0.10), 0 8px 32px rgba(0,0,0,0.8);
}
[data-style="synthwave"] .modal-header {
  border-bottom: 1px solid rgba(255,0,200,0.12);
}
[data-style="synthwave"] .scoreboard {
  background: rgba(13,0,16,0.95);
  border-color: rgba(255,0,200,0.14);
  border-top: 1px solid rgba(255,0,200,0.30);
}
[data-style="synthwave"] .manager-card {
  background: rgba(13,0,16,0.95);
  border-color: rgba(255,0,200,0.14);
  border-top: 1px solid rgba(255,0,200,0.28);
  border-radius: 1px;
}
[data-style="synthwave"] .highlight-card {
  background: rgba(13,0,16,0.95);
  border-color: rgba(255,0,200,0.20);
  border-top: 1px solid rgba(255,0,200,0.40);
  border-radius: 1px;
}
[data-style="synthwave"] .achievement-card,
[data-style="synthwave"] .postseason-game-tile,
[data-style="synthwave"] .postseason-mvp-tile {
  background: rgba(13,0,16,0.95);
  border-color: rgba(255,0,200,0.14);
  border-top: 1px solid rgba(255,0,200,0.25);
  border-radius: 1px;
}

/* ── Buttons ── */
[data-style="synthwave"] .btn-primary {
  background: rgba(255,0,200,0.14);
  color: rgba(255,0,200,0.95);
  border: 1px solid rgba(255,0,200,0.55);
  border-radius: 1px;
  box-shadow: 0 0 12px rgba(255,0,200,0.20);
  letter-spacing: 0.16em;
}
[data-style="synthwave"] .btn-primary:hover:not(:disabled) {
  background: rgba(255,0,200,0.22);
  box-shadow: 0 0 20px rgba(255,0,200,0.30);
  transform: none;
}
[data-style="synthwave"] .btn-outline {
  border-color: rgba(255,0,200,0.30);
  border-radius: 1px;
  box-shadow: none;
}
[data-style="synthwave"] .draft-action-btn:hover:not(:disabled) {
  color: var(--void);
  box-shadow: 0 0 12px rgba(255,0,200,0.35);
}

/* ── Badges ── */
[data-style="synthwave"] .hof-badge,
[data-style="synthwave"] .ace-badge,
[data-style="synthwave"] .clutch-badge,
[data-style="synthwave"] .ironman-badge {
  border-radius: 0;
  background: rgba(255,0,200,0.12);
  border-color: rgba(255,0,200,0.40);
  color: rgba(255,0,200,0.90);
}

/* ── Settings active ── */
[data-style="synthwave"] .settings-option.active {
  border-color: rgba(255,0,200,0.55);
  background: rgba(255,0,200,0.06);
  box-shadow: 0 0 10px rgba(255,0,200,0.12);
}

/* ── Result banners ── */
[data-style="synthwave"] .record-banner {
  border-radius: 1px;
  box-shadow: 0 0 20px rgba(255,0,200,0.20), inset 0 1px 0 rgba(255,0,200,0.25);
}
[data-style="synthwave"] .postseason-champion-banner {
  border-radius: 1px;
  box-shadow: 0 0 40px rgba(255,0,200,0.35), 0 0 80px rgba(255,0,200,0.12), inset 0 1px 0 rgba(255,0,200,0.40);
}

/* ── Theme: draft-action-btn overrides ──────────────────────────
   Each theme gives the Draft button its own character.
   Tier-specific colors come from descendant selectors on .tier-*.
──────────────────────────────────────────────────────────────── */

/* Aero — solid tier color with gloss inset */
[data-style="aero"] .draft-action-btn {
  background: var(--gold);
  color: var(--void);
  border: none;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.20);
}
[data-style="aero"] .tier-great .draft-action-btn {
  background: var(--purple);
  color: var(--white);
}
[data-style="aero"] .tier-good .draft-action-btn {
  background: var(--green);
  color: var(--void);
}

/* Art Deco — outlined, no fill, letter-spaced */
[data-style="artdeco"] .draft-action-btn {
  background: transparent;
  color: rgba(var(--gold-rgb), 0.90);
  border: 1px solid rgba(var(--gold-rgb), 0.55);
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.12);
  letter-spacing: 0.14em;
}
[data-style="artdeco"] .tier-great .draft-action-btn {
  color: rgba(var(--purple-rgb), 0.90);
  border-color: rgba(var(--purple-rgb), 0.50);
  box-shadow: 0 0 0 1px rgba(var(--purple-rgb), 0.10);
}
[data-style="artdeco"] .tier-good .draft-action-btn {
  color: rgba(var(--green-rgb), 0.85);
  border-color: rgba(var(--green-rgb), 0.45);
  box-shadow: 0 0 0 1px rgba(var(--green-rgb), 0.08);
}

/* Viennese Secession — outlined, restrained */
[data-style="secession"] .draft-action-btn {
  background: transparent;
  color: rgba(var(--gold-rgb), 0.85);
  border: 1px solid rgba(var(--gold-rgb), 0.50);
  border-radius: 0;
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.06);
  letter-spacing: 0.12em;
}
[data-style="secession"] .tier-great .draft-action-btn {
  color: rgba(var(--purple-rgb), 0.85);
  border-color: rgba(var(--purple-rgb), 0.45);
  box-shadow: 0 0 0 2px rgba(var(--purple-rgb), 0.05);
}
[data-style="secession"] .tier-good .draft-action-btn {
  color: rgba(var(--green-rgb), 0.80);
  border-color: rgba(var(--green-rgb), 0.40);
  box-shadow: 0 0 0 2px rgba(var(--green-rgb), 0.04);
}

/* Japanese Minimalism — bare text button, vermilion on elite */
[data-style="jp"] .draft-action-btn {
  background: transparent;
  color: rgba(180,40,30,0.65);
  border: 1px solid rgba(180,40,30,0.35);
  border-radius: 0;
  box-shadow: none;
  letter-spacing: 0.18em;
  font-weight: 400;
}
[data-style="jp"] .tier-great .draft-action-btn {
  color: rgba(var(--purple-rgb), 0.60);
  border-color: rgba(var(--purple-rgb), 0.28);
}
[data-style="jp"] .tier-good .draft-action-btn {
  color: rgba(var(--green-rgb), 0.55);
  border-color: rgba(var(--green-rgb), 0.24);
}

/* Synthwave — glowing magenta on elite, cyan/violet on others */
[data-style="synthwave"] .draft-action-btn {
  background: rgba(255,0,200,0.12);
  color: rgba(255,0,200,0.90);
  border: 1px solid rgba(255,0,200,0.50);
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(255,0,200,0.20);
  letter-spacing: 0.12em;
}
[data-style="synthwave"] .tier-great .draft-action-btn {
  background: rgba(0,229,255,0.08);
  color: rgba(0,229,255,0.85);
  border-color: rgba(0,229,255,0.42);
  box-shadow: 0 0 8px rgba(0,229,255,0.15);
}
[data-style="synthwave"] .tier-good .draft-action-btn {
  background: rgba(123,0,255,0.08);
  color: rgba(123,0,255,0.85);
  border-color: rgba(123,0,255,0.38);
  box-shadow: none;
}

/* ── Interactive state + position pill overrides per theme ──────
   Classes: .player-pos, .slot-box-pos (position pills),
            .pending-confirm (picker awaiting second tap),
            .picker-active (card being drafted),
            .swap-active (card being swapped),
            .natural (natural position buttons in picker),
            .selected (selected position option)
────────────────────────────────────────────────────────────────── */

/* ── Aero ── */
[data-style="aero"] .player-pos,
[data-style="aero"] .slot-box-pos {
  border-color: rgba(var(--gold-rgb), 0.35);
  background: rgba(var(--gold-rgb), 0.08);
  color: var(--gold);
  border-radius: 2px;
}
[data-style="aero"] .pending-confirm {
  border-color: var(--gold-bright);
  background: var(--gold);
  box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.40);
}
[data-style="aero"] .picker-active,
[data-style="aero"] .swap-active {
  border-color: rgba(var(--gold-rgb), 0.70);
  box-shadow: 0 0 16px rgba(var(--gold-rgb), 0.30), inset 0 1.5px 0 rgba(var(--gold-rgb), 0.20);
}
[data-style="aero"] .natural {
  border-color: rgba(var(--gold-rgb), 0.55);
  color: var(--gold);
  background: rgba(var(--gold-rgb), 0.10);
  box-shadow: inset 0 1.5px 0 rgba(var(--gold-rgb), 0.20);
}
[data-style="aero"] .selected {
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.12);
  box-shadow: 0 0 18px rgba(var(--gold-rgb), 0.32);
}

/* ── Art Deco ── */
[data-style="artdeco"] .player-pos,
[data-style="artdeco"] .slot-box-pos {
  border-color: rgba(var(--gold-rgb), 0.45);
  background: transparent;
  color: rgba(var(--gold-rgb), 0.85);
  border-radius: 0;
  letter-spacing: 0.08em;
}
[data-style="artdeco"] .pending-confirm {
  border-color: rgba(var(--gold-rgb), 0.90);
  background: rgba(var(--gold-rgb), 0.18);
  color: rgba(var(--gold-rgb), 0.95);
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.15);
}
[data-style="artdeco"] .picker-active,
[data-style="artdeco"] .swap-active {
  border-color: rgba(var(--gold-rgb), 0.75);
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.15), 0 0 0 4px rgba(var(--gold-rgb), 0.05);
}
[data-style="artdeco"] .natural {
  border-color: rgba(var(--gold-rgb), 0.55);
  color: rgba(var(--gold-rgb), 0.90);
  background: rgba(var(--gold-rgb), 0.07);
  border-radius: 0;
}
[data-style="artdeco"] .selected {
  border-color: rgba(var(--gold-rgb), 0.80);
  background: rgba(var(--gold-rgb), 0.09);
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.14), 0 0 0 4px rgba(var(--gold-rgb), 0.05);
}

/* ── Viennese Secession ── */
[data-style="secession"] .player-pos,
[data-style="secession"] .slot-box-pos {
  border-color: rgba(var(--gold-rgb), 0.40);
  background: transparent;
  color: rgba(var(--gold-rgb), 0.80);
  border-radius: 0;
}
[data-style="secession"] .pending-confirm {
  border-color: rgba(var(--gold-rgb), 0.85);
  background: rgba(var(--gold-rgb), 0.14);
  color: rgba(var(--gold-rgb), 0.95);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.08);
}
[data-style="secession"] .picker-active,
[data-style="secession"] .swap-active {
  border-color: rgba(var(--gold-rgb), 0.70);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.10), 0 0 0 5px rgba(var(--gold-rgb), 0.04);
}
[data-style="secession"] .natural {
  border-color: rgba(var(--gold-rgb), 0.50);
  color: rgba(var(--gold-rgb), 0.85);
  background: rgba(var(--gold-rgb), 0.07);
  border-radius: 0;
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.06);
}
[data-style="secession"] .selected {
  border-color: rgba(var(--gold-rgb), 0.75);
  background: rgba(var(--gold-rgb), 0.08);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.10), 0 0 0 5px rgba(var(--gold-rgb), 0.04);
}

/* ── Japanese Minimalism ── */
[data-style="jp"] .player-pos,
[data-style="jp"] .slot-box-pos {
  border-color: rgba(180,40,30,0.30);
  background: transparent;
  color: rgba(180,40,30,0.65);
  border-radius: 0;
}
[data-style="jp"] .pending-confirm {
  border-color: rgba(180,40,30,0.75);
  background: rgba(180,40,30,0.10);
  color: rgba(180,40,30,0.90);
  box-shadow: none;
}
[data-style="jp"] .picker-active,
[data-style="jp"] .swap-active {
  border-left: 3px solid rgba(180,40,30,0.70);
  border-color: transparent;
  border-left-color: rgba(180,40,30,0.70);
  box-shadow: none;
}
[data-style="jp"] .natural {
  border-color: rgba(180,40,30,0.35);
  color: rgba(180,40,30,0.70);
  background: rgba(180,40,30,0.05);
  border-radius: 0;
}
[data-style="jp"] .selected {
  border-color: rgba(180,40,30,0.60);
  background: rgba(180,40,30,0.06);
  color: rgba(180,40,30,0.85);
  box-shadow: none;
}

/* ── Synthwave ── */
[data-style="synthwave"] .player-pos,
[data-style="synthwave"] .slot-box-pos {
  border-color: rgba(255,0,200,0.40);
  background: rgba(255,0,200,0.07);
  color: rgba(255,0,200,0.85);
  border-radius: 1px;
}
[data-style="synthwave"] .pending-confirm {
  border-color: rgba(255,0,200,0.90);
  background: rgba(255,0,200,0.20);
  color: rgba(255,0,200,1.0);
  box-shadow: 0 0 16px rgba(255,0,200,0.40);
}
[data-style="synthwave"] .picker-active,
[data-style="synthwave"] .swap-active {
  border-color: rgba(255,0,200,0.70);
  box-shadow: 0 0 16px rgba(255,0,200,0.30), 0 0 32px rgba(255,0,200,0.10);
}
[data-style="synthwave"] .natural {
  border-color: rgba(255,0,200,0.50);
  color: rgba(255,0,200,0.88);
  background: rgba(255,0,200,0.08);
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(255,0,200,0.15);
}
[data-style="synthwave"] .selected {
  border-color: rgba(255,0,200,0.75);
  background: rgba(255,0,200,0.10);
  color: rgba(255,0,200,0.95);
  box-shadow: 0 0 16px rgba(255,0,200,0.30);
}

/* ── Accessibility palette overrides (data-palette attribute) ───
   Only swap the three tier color variables.
   Everything else (backgrounds, typography) stays unchanged.
   ──────────────────────────────────────────────────────────── */
[data-palette="deuteranopia"] {
  --tier-elite:   #f5c800;   --gold-rgb:   245, 200, 0;   --gold: #f5c800;   --gold-bright: #ffd900;
  --tier-great:   #e06000;   --purple-rgb: 224, 96, 0;
  --tier-good:    #0090c0;   --green-rgb:  0, 144, 192;
}
[data-palette="protanopia"] {
  --tier-elite:   #f5c800;   --gold-rgb:   245, 200, 0;   --gold: #f5c800;   --gold-bright: #ffd900;
  --tier-great:   #0060c0;   --purple-rgb: 0, 96, 192;
  --tier-good:    #60b8e0;   --green-rgb:  96, 184, 224;
}
[data-palette="tritanopia"] {
  --tier-elite:   #c03030;   --gold-rgb:   192, 48, 48;   --gold: #c03030;   --gold-bright: #d84040;
  --tier-great:   #e08030;   --purple-rgb: 224, 128, 48;
  --tier-good:    #30c090;   --green-rgb:  48, 192, 144;
}
[data-palette="monochrome"] {
  --tier-elite:   #f0f0f0;   --gold-rgb:   240, 240, 240;   --gold: #f0f0f0;   --gold-bright: #ffffff;
  --tier-great:   #b0b0b8;   --purple-rgb: 176, 176, 184;
  --tier-good:    #707078;   --green-rgb:  112, 112, 120;
}

/* ── Synthwave: drifting CRT scanline field on elite cards ──
   The repeating pattern is 2px tall so shifting background-position
   by 2px completes one full loop — seamless, infinite, slow drift.
   Feels like a phosphor screen that's always refreshing. ── */
[data-style="synthwave"] .shimmer-overlay::before {
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0)        0px,
    rgba(0,0,0,0)        2px,
    rgba(255,0,200,0.12) 2px,
    rgba(255,0,200,0.12) 4px
  );
  animation: sw-scanlines 0.4s linear infinite;
}
@keyframes sw-scanlines {
  0%   { background-position: 0 0px; }
  100% { background-position: 0 4px; }
}

/* ══════════════════════════════════════════════════════════════
   CYBERPUNK STYLE
   Blade Runner / Ghost in the Shell / Akira.
   Deep blue-black #030814. Electric blue elite,
   acid yellow great, violet good.
   Diagonal clip-path corners. HUD grid body.
   Share Tech Mono for metadata. Rajdhani for names.
   Vertical CRT scan sweep on elite via shimmer-overlay.
   All scoped to [data-style="cyberpunk"].
══════════════════════════════════════════════════════════════ */

[data-style="cyberpunk"] {
  --tier-elite:  #00b4ff;
  --tier-great:  #c8ff00;
  --tier-good:   #b43cff;
  --tier-average: #aa76cc;
  --gold:        #00b4ff;
  --gold-rgb:    0, 180, 255;
  --gold-bright: #44ccff;
  --purple-rgb:  200, 255, 0;
  --green-rgb:   180, 60, 255;

  --font: 'Rajdhani', 'IBM Plex Mono', monospace;
  --void:   #030814;
  --void-2: #050c1a;}

[data-style="cyberpunk"] body {
  background:
    linear-gradient(rgba(0,180,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,180,255,0.03) 1px, transparent 1px),
    #030814;
  background-size: 28px 28px, 28px 28px, auto;
  background-attachment: fixed;
}
/* Suppress default stars and rotating lines */
[data-style="cyberpunk"] body::before { display: none; }
/* Replace stars with vertical rain streaks */
[data-style="cyberpunk"] body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    repeating-linear-gradient(180deg,
      transparent 0px, transparent 18px,
      rgba(0,180,255,0.06) 18px, rgba(0,180,255,0.06) 19px,
      transparent 19px, transparent 36px,
      rgba(0,255,200,0.04) 36px, rgba(0,255,200,0.04) 37px,
      transparent 37px, transparent 60px
    );
  background-size: auto 60px;
  animation: cyber-rain 3s linear infinite;
}
@keyframes cyber-rain { 0%{background-position:0 0} 100%{background-position:0 60px} }

/* ── Typography ── */
[data-style="cyberpunk"] .player-name,
[data-style="cyberpunk"] .diamond-pos-name,
[data-style="cyberpunk"] .manager-name,
[data-style="cyberpunk"] .brand {
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.10em;
}

/* ── Player cards — diagonal clip-path ── */
[data-style="cyberpunk"] .player-card.tier-elite {
  border-color: rgba(0,180,255,0.60);
  background-color: rgba(0,180,255,0.08);
  background-image: none;
  box-shadow: 0 0 18px rgba(0,180,255,0.18), inset 0 1px 0 rgba(0,180,255,0.28);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  border-radius: 0;
}
[data-style="cyberpunk"] .player-card.tier-great {
  border-color: rgba(200,255,0,0.48);
  background-color: rgba(200,255,0,0.05);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(200,255,0,0.20);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  border-radius: 0;
}
[data-style="cyberpunk"] .player-card.tier-good {
  border-color: rgba(180,60,255,0.42);
  background-color: rgba(180,60,255,0.05);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(180,60,255,0.16);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  border-radius: 0;
}
[data-style="cyberpunk"] .player-card.tier-average {
  border-color: rgba(170,118,204,0.42);
  background-color: rgba(170,118,204,0.05);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(170,118,204,0.16);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  border-radius: 0;
}

/* ── CRT scan on elite shimmer-overlay ── */
[data-style="cyberpunk"] .shimmer-overlay::before {
  top: -100%; left: 0;
  width: 100%; height: 40%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0,180,255,0.04) 20%,
    rgba(200,240,255,0.18) 50%,
    rgba(0,180,255,0.04) 80%,
    transparent 100%
  );
  animation: cyberpunk-scan 3.0s ease-in-out infinite;
  animation-delay: var(--shimmer-offset, 0ms);
}
@keyframes cyberpunk-scan {
  0%   { top: -100%; }
  100% { top:  150%; }
}

/* ── Expanded draft card ── */
[data-style="cyberpunk"] .expanded-draft-card.tier-elite {
  border-color: rgba(0,180,255,0.60);
  background-color: rgba(0,180,255,0.08);
  background-image: none;
  box-shadow: 0 0 18px rgba(0,180,255,0.18), inset 0 1px 0 rgba(0,180,255,0.28);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  border-radius: 0;
}
[data-style="cyberpunk"] .expanded-draft-card.tier-great {
  border-color: rgba(200,255,0,0.48);
  background-color: rgba(200,255,0,0.05);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(200,255,0,0.20);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  border-radius: 0;
}
[data-style="cyberpunk"] .expanded-draft-card.tier-good {
  border-color: rgba(180,60,255,0.42);
  background-color: rgba(180,60,255,0.05);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(180,60,255,0.16);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  border-radius: 0;
}
[data-style="cyberpunk"] .expanded-draft-card.tier-average {
  border-color: rgba(170,118,204,0.42);
  background-color: rgba(170,118,204,0.05);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(170,118,204,0.16);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  border-radius: 0;
}

/* ── Slot boxes ── */
[data-style="cyberpunk"] .slot-box.tier-elite,
[data-style="cyberpunk"] .slot-filled.tier-elite {
  border-color: rgba(0,180,255,0.40);
  background-color: rgba(0,180,255,0.04);
  background-image: none;
  box-shadow: 0 0 8px rgba(0,180,255,0.10);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  border-radius: 0;
}
[data-style="cyberpunk"] .slot-box.tier-great,
[data-style="cyberpunk"] .slot-filled.tier-great {
  border-color: rgba(200,255,0,0.32);
  background-color: rgba(200,255,0,0.03);
  background-image: none;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  border-radius: 0;
}
[data-style="cyberpunk"] .slot-box.tier-good,
[data-style="cyberpunk"] .slot-filled.tier-good {
  border-color: rgba(180,60,255,0.30);
  background-image: none;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  border-radius: 0;
}
[data-style="cyberpunk"] .slot-box.tier-average,
[data-style="cyberpunk"] .slot-filled.tier-average {
  border-color: rgba(170,118,204,0.30);
  background-image: none;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  border-radius: 0;
}
[data-style="cyberpunk"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average),
[data-style="cyberpunk"] .slot-filled:not(.tier-elite):not(.tier-great):not(.tier-good) {
  border-color: rgba(0,180,255,0.08);
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

/* ── Diamond pos cards — small so minimal clip ── */
[data-style="cyberpunk"] .diamond-pos-card.tier-elite {
  border-color: rgba(0,180,255,0.50);
  background-color: rgba(0,180,255,0.07);
  background-image: none;
  box-shadow: 0 0 10px rgba(0,180,255,0.15);
  border-radius: 0;
}
[data-style="cyberpunk"] .diamond-pos-card.tier-great {
  border-color: rgba(200,255,0,0.40);
  background-color: rgba(200,255,0,0.04);
  background-image: none;
  border-radius: 0;
}
[data-style="cyberpunk"] .diamond-pos-card.tier-good {
  border-color: rgba(180,60,255,0.35);
  background-color: rgba(180,60,255,0.04);
  background-image: none;
  border-radius: 0;
}
[data-style="cyberpunk"] .diamond-pos-card.tier-average {
  border-color: rgba(170,118,204,0.35);
  background-color: rgba(170,118,204,0.04);
  background-image: none;
  border-radius: 0;
}

/* ── Panels ── */
[data-style="cyberpunk"] .lineup-card {
  background: rgba(3,8,20,0.95);
  border-color: rgba(0,180,255,0.14);
  border-top: 1px solid rgba(0,180,255,0.35);
  box-shadow: none;
}
[data-style="cyberpunk"] .void-panel {
  background: rgba(3,8,20,0.95);
  border-color: rgba(0,180,255,0.12);
  border-top: 1px solid rgba(0,180,255,0.28);
}
[data-style="cyberpunk"] .modal-panel {
  background: rgba(3,8,20,0.95);
  border-color: rgba(0,180,255,0.25);
  border-top: 2px solid rgba(0,180,255,0.55);
  border-radius: 0;
  box-shadow: 0 0 40px rgba(0,180,255,0.10), 0 8px 32px rgba(0,0,0,0.8);
}
[data-style="cyberpunk"] .modal-header {
  border-bottom: 1px solid rgba(0,180,255,0.12);
}
[data-style="cyberpunk"] .scoreboard {
  background: rgba(3,8,20,0.95);
  border-color: rgba(0,180,255,0.14);
  border-top: 1px solid rgba(0,180,255,0.30);
}
[data-style="cyberpunk"] .manager-card,
[data-style="cyberpunk"] .highlight-card,
[data-style="cyberpunk"] .achievement-card,
[data-style="cyberpunk"] .postseason-game-tile,
[data-style="cyberpunk"] .postseason-mvp-tile {
  background: rgba(3,8,20,0.95);
  border-color: rgba(0,180,255,0.14);
  border-top: 1px solid rgba(0,180,255,0.28);
  border-radius: 0;
}

/* ── Buttons ── */
[data-style="cyberpunk"] .btn-primary {
  background: rgba(0,180,255,0.12);
  color: rgba(0,180,255,0.95);
  border: 1px solid rgba(0,180,255,0.55);
  border-radius: 0;
  box-shadow: 0 0 12px rgba(0,180,255,0.20);
  letter-spacing: 0.16em;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
[data-style="cyberpunk"] .btn-primary:hover:not(:disabled) {
  background: rgba(0,180,255,0.22);
  box-shadow: 0 0 20px rgba(0,180,255,0.30);
  transform: none;
}
[data-style="cyberpunk"] .btn-outline {
  border-color: rgba(0,180,255,0.30);
  border-radius: 0;
}
[data-style="cyberpunk"] .draft-action-btn {
  background: rgba(0,180,255,0.12);
  color: rgba(0,180,255,0.92);
  border: 1px solid rgba(0,180,255,0.50);
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
  box-shadow: none;
  letter-spacing: 0.12em;
}
[data-style="cyberpunk"] .tier-great .draft-action-btn {
  background: rgba(200,255,0,0.10);
  color: rgba(200,255,0,0.88);
  border-color: rgba(200,255,0,0.45);
}
[data-style="cyberpunk"] .tier-good .draft-action-btn {
  background: rgba(180,60,255,0.10);
  color: rgba(180,60,255,0.85);
  border-color: rgba(180,60,255,0.42);
}

/* ── Interactive states ── */
[data-style="cyberpunk"] .player-pos,
[data-style="cyberpunk"] .slot-box-pos {
  background: rgba(0,180,255,0.08);
  color: rgba(0,180,255,0.85);
  border-color: rgba(0,180,255,0.38);
  border-radius: 0;
}
[data-style="cyberpunk"] .pending-confirm {
  border-color: rgba(0,180,255,0.90);
  background: rgba(0,180,255,0.20);
  color: rgba(0,180,255,1.0);
  box-shadow: 0 0 16px rgba(0,180,255,0.40);
}
[data-style="cyberpunk"] .picker-active,
[data-style="cyberpunk"] .swap-active {
  border-color: rgba(0,180,255,0.70);
  box-shadow: 0 0 16px rgba(0,180,255,0.30);
}
[data-style="cyberpunk"] .natural {
  border-color: rgba(0,180,255,0.50);
  color: rgba(0,180,255,0.88);
  background: rgba(0,180,255,0.08);
  border-radius: 0;
}
[data-style="cyberpunk"] .selected {
  border-color: rgba(0,180,255,0.75);
  background: rgba(0,180,255,0.10);
  color: rgba(0,180,255,0.95);
  box-shadow: 0 0 16px rgba(0,180,255,0.30);
}

/* ── Badges ── */
[data-style="cyberpunk"] .hof-badge,
[data-style="cyberpunk"] .ace-badge,
[data-style="cyberpunk"] .clutch-badge,
[data-style="cyberpunk"] .ironman-badge {
  border-radius: 0;
  background: rgba(0,180,255,0.12);
  border-color: rgba(0,180,255,0.40);
  color: rgba(0,180,255,0.90);
}
[data-style="cyberpunk"] .settings-option.active {
  border-color: rgba(0,180,255,0.55);
  background: rgba(0,180,255,0.06);
  box-shadow: 0 0 10px rgba(0,180,255,0.12);
}
[data-style="cyberpunk"] .record-banner {
  border-radius: 0;
  box-shadow: 0 0 20px rgba(0,180,255,0.20), inset 0 1px 0 rgba(0,180,255,0.25);
}
[data-style="cyberpunk"] .postseason-champion-banner {
  border-radius: 0;
  box-shadow: 0 0 40px rgba(0,180,255,0.35), 0 0 80px rgba(0,180,255,0.12), inset 0 1px 0 rgba(0,180,255,0.40);
}


/* ══════════════════════════════════════════════════════════════
   GOTHIC STYLE
   Sisters of Mercy / Bauhaus / The Cure.
   Deep void #080608. Blood crimson elite,
   bone-grey great, dim good.
   Cinzel for names — cold, monumental, all-caps.
   UnifrakturMaguntia for brand/headings only.
   Diamond ✦ ornaments via content.
   Cross-hatch texture on body.
   Radial vignette pulse on elite shimmer-overlay.
   All scoped to [data-style="gothic"].
══════════════════════════════════════════════════════════════ */

[data-style="gothic"] {
  --tier-elite:  #8c0014;
  --tier-great:  #b4b0aa;
  --tier-good:   #686460;
  --tier-average: #53514f;
  --gold:        #8c0014;
  --gold-rgb:    140, 0, 20;
  --gold-bright: #aa0018;
  --purple-rgb:  180, 176, 170;
  --green-rgb:   104, 100, 96;

  --font: 'Cinzel', 'IBM Plex Mono', monospace;
  --void:   #080608;
  --void-2: #100c0e;}

[data-style="gothic"] body {
  background:
    repeating-linear-gradient(45deg,  rgba(255,255,255,0.010) 0, rgba(255,255,255,0.010) 1px, transparent 1px, transparent 8px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.010) 0, rgba(255,255,255,0.010) 1px, transparent 1px, transparent 8px),
    #080608;
  background-attachment: fixed;
}
[data-style="gothic"] body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.80) 100%);
  animation: gothic-vignette 4.5s ease-in-out infinite;
}
[data-style="gothic"] body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 0%   0%,   rgba(100,0,15,0.32) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(100,0,15,0.32) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 0%,   rgba(60,0,10,0.18)  0%, transparent 40%),
    radial-gradient(ellipse at 0%   100%, rgba(60,0,10,0.18)  0%, transparent 40%);
  animation: gothic-vignette 4.5s ease-in-out infinite;
  animation-delay: 0.8s;
}
@keyframes gothic-vignette { 0%{opacity:0.15} 50%{opacity:1.00} 100%{opacity:0.15} }

/* ── Typography — Cinzel for names, Unifraktur for brand only ── */
[data-style="gothic"] .player-name,
[data-style="gothic"] .diamond-pos-name,
[data-style="gothic"] .manager-name {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
[data-style="gothic"] .brand {
  font-family: 'UnifrakturMaguntia', cursive;
  letter-spacing: 0.04em;
}

/* ── Vignette pulse on elite shimmer-overlay ── */
[data-style="gothic"] .shimmer-overlay {
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.45) 100%);
  overflow: visible;
}
[data-style="gothic"] .shimmer-overlay::before {
  display: none;
}
[data-style="gothic"] .shimmer-overlay {
  animation: gothic-breathe 4s ease-in-out infinite;
  animation-delay: var(--shimmer-offset, 0ms);
}
@keyframes gothic-breathe {
  0%   { opacity: 0.30; }
  50%  { opacity: 1.0;  }
  100% { opacity: 0.30; }
}

/* ── Player cards — diamond ornaments via outline trick ── */
[data-style="gothic"] .player-card.tier-elite {
  border-color: rgba(140,0,20,0.60);
  background-color: rgba(140,0,20,0.05);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(140,0,20,0.18);
  border-radius: 0;
}
[data-style="gothic"] .player-card.tier-great {
  border-color: rgba(180,175,170,0.28);
  background-color: rgba(180,175,170,0.02);
  background-image: none;
  border-radius: 0;
}
[data-style="gothic"] .player-card.tier-good {
  border-color: rgba(120,118,115,0.18);
  background-image: none;
  border-radius: 0;
}
[data-style="gothic"] .player-card.tier-average {
  border-color: rgba(120,118,115,0.18);
  background-image: none;
  border-radius: 0;
}

/* ── Expanded draft card ── */
[data-style="gothic"] .expanded-draft-card.tier-elite {
  border-color: rgba(140,0,20,0.60);
  background-color: rgba(140,0,20,0.05);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(140,0,20,0.18);
  border-radius: 0;
}
[data-style="gothic"] .expanded-draft-card.tier-great {
  border-color: rgba(180,175,170,0.28);
  background-color: rgba(180,175,170,0.02);
  background-image: none;
  border-radius: 0;
}
[data-style="gothic"] .expanded-draft-card.tier-good {
  border-color: rgba(120,118,115,0.18);
  background-image: none;
  border-radius: 0;
}
[data-style="gothic"] .expanded-draft-card.tier-average {
  border-color: rgba(120,118,115,0.18);
  background-image: none;
  border-radius: 0;
}

/* ── Slot boxes ── */
[data-style="gothic"] .slot-box.tier-elite,
[data-style="gothic"] .slot-filled.tier-elite {
  border-color: rgba(140,0,20,0.40);
  background-color: rgba(140,0,20,0.04);
  background-image: none;
  border-radius: 0;
}
[data-style="gothic"] .slot-box.tier-great,
[data-style="gothic"] .slot-filled.tier-great {
  border-color: rgba(150,145,140,0.18);
  background-image: none;
  border-radius: 0;
}
[data-style="gothic"] .slot-box.tier-good,
[data-style="gothic"] .slot-filled.tier-good {
  border-color: rgba(110,108,105,0.12);
  background-image: none;
  border-radius: 0;
}
[data-style="gothic"] .slot-box.tier-average,
[data-style="gothic"] .slot-filled.tier-average {
  border-color: rgba(110,108,105,0.12);
  background-image: none;
  border-radius: 0;
}
[data-style="gothic"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average),
[data-style="gothic"] .slot-filled:not(.tier-elite):not(.tier-great):not(.tier-good) {
  border-color: rgba(255,255,255,0.04);
  border-radius: 0;
}

/* ── Diamond pos cards ── */
[data-style="gothic"] .diamond-pos-card.tier-elite {
  border-color: rgba(140,0,20,0.50);
  background-color: rgba(140,0,20,0.05);
  background-image: none;
  border-radius: 0;
}
[data-style="gothic"] .diamond-pos-card.tier-great {
  border-color: rgba(150,145,140,0.22);
  background-image: none;
  border-radius: 0;
}
[data-style="gothic"] .diamond-pos-card.tier-good {
  border-color: rgba(110,108,105,0.14);
  background-image: none;
  border-radius: 0;
}
[data-style="gothic"] .diamond-pos-card.tier-average {
  border-color: rgba(110,108,105,0.14);
  background-image: none;
  border-radius: 0;
}

/* ── Panels ── */
[data-style="gothic"] .lineup-card {
  background: #080608;
  border-color: rgba(140,0,20,0.16);
  border-top: 2px solid rgba(140,0,20,0.45);
  box-shadow: none;
  border-radius: 0;
}
[data-style="gothic"] .void-panel {
  background: #080608;
  border-color: rgba(140,0,20,0.12);
  border-top: 1px solid rgba(140,0,20,0.28);
  border-radius: 0;
}
[data-style="gothic"] .modal-panel {
  background: #080608;
  border-color: rgba(140,0,20,0.28);
  border-top: 2px solid rgba(140,0,20,0.55);
  border-radius: 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.8);
}
[data-style="gothic"] .modal-header {
  border-bottom: 1px solid rgba(140,0,20,0.14);
}
[data-style="gothic"] .scoreboard,
[data-style="gothic"] .manager-card,
[data-style="gothic"] .highlight-card,
[data-style="gothic"] .achievement-card,
[data-style="gothic"] .postseason-game-tile,
[data-style="gothic"] .postseason-mvp-tile {
  background: #080608;
  border-color: rgba(140,0,20,0.14);
  border-top: 1px solid rgba(140,0,20,0.28);
  border-radius: 0;
  box-shadow: none;
}

/* ── Buttons ── */
[data-style="gothic"] .btn-primary {
  background: transparent;
  color: rgba(140,0,20,0.80);
  border: 1px solid rgba(140,0,20,0.45);
  border-radius: 0;
  box-shadow: none;
  letter-spacing: 0.16em;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
}
[data-style="gothic"] .btn-primary:hover:not(:disabled) {
  background: rgba(140,0,20,0.08);
  transform: none;
  box-shadow: none;
}
[data-style="gothic"] .btn-outline {
  border-color: rgba(255,255,255,0.12);
  border-radius: 0;
}
[data-style="gothic"] .draft-action-btn {
  background: transparent;
  color: rgba(140,0,20,0.70);
  border: 1px solid rgba(140,0,20,0.38);
  border-radius: 0;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  box-shadow: none;
}
[data-style="gothic"] .tier-great .draft-action-btn {
  color: rgba(160,155,150,0.50);
  border-color: rgba(160,155,150,0.22);
}
[data-style="gothic"] .tier-good .draft-action-btn {
  color: rgba(110,108,105,0.38);
  border-color: rgba(110,108,105,0.16);
}

/* ── Interactive states ── */
[data-style="gothic"] .player-pos,
[data-style="gothic"] .slot-box-pos {
  background: transparent;
  color: rgba(140,0,20,0.70);
  border-color: rgba(140,0,20,0.35);
  border-radius: 0;
}
[data-style="gothic"] .pending-confirm {
  border-color: rgba(140,0,20,0.80);
  background: rgba(140,0,20,0.12);
  color: rgba(140,0,20,0.95);
  box-shadow: none;
}
[data-style="gothic"] .picker-active,
[data-style="gothic"] .swap-active {
  border-color: rgba(140,0,20,0.65);
  box-shadow: inset 0 0 0 1px rgba(140,0,20,0.20);
}
[data-style="gothic"] .natural {
  border-color: rgba(140,0,20,0.40);
  color: rgba(140,0,20,0.75);
  background: rgba(140,0,20,0.06);
  border-radius: 0;
}
[data-style="gothic"] .selected {
  border-color: rgba(140,0,20,0.65);
  background: rgba(140,0,20,0.07);
  color: rgba(140,0,20,0.88);
  box-shadow: none;
}

/* ── Badges ── */
[data-style="gothic"] .hof-badge,
[data-style="gothic"] .ace-badge,
[data-style="gothic"] .clutch-badge,
[data-style="gothic"] .ironman-badge {
  border-radius: 0;
  background: rgba(140,0,20,0.10);
  border-color: rgba(140,0,20,0.32);
  color: rgba(140,0,20,0.78);
  font-family: 'Cinzel', serif;
  letter-spacing: 0.10em;
}
[data-style="gothic"] .settings-option.active {
  border-color: rgba(140,0,20,0.50);
  background: rgba(140,0,20,0.05);
  box-shadow: none;
}
[data-style="gothic"] .record-banner,
[data-style="gothic"] .postseason-champion-banner {
  border-radius: 0;
  border-top: 2px solid rgba(140,0,20,0.60);
  box-shadow: none;
}


/* ══════════════════════════════════════════════════════════════
   DARKWAVE STYLE
   Dead Can Dance / Cocteau Twins / 4AD.
   Deep indigo void #06060f. Cold silver elite,
   pale indigo great, slate good.
   Cormorant Upright light weight for names.
   No ornaments — atmosphere only.
   Fog radial gradient on body.
   Slow breath shimmer (5.5s, silver) on elite.
   All scoped to [data-style="darkwave"].
══════════════════════════════════════════════════════════════ */

[data-style="darkwave"] {
  --tier-elite:  #c0c0d8;
  --tier-great:  #6868a0;
  --tier-good:   #383858;
  --tier-average: #383846;
  --gold:        #c0c0d8;
  --gold-rgb:    192, 192, 216;
  --gold-bright: #d8d8ee;
  --purple-rgb:  104, 104, 160;
  --green-rgb:   56, 56, 88;

  --font: 'Cormorant Upright', 'IBM Plex Mono', monospace;
  --void:   #06060f;
  --void-2: #0d0d18;}

[data-style="darkwave"] body {
  background: #06060f;
  overflow: hidden;
}
[data-style="darkwave"] body::before {
  content: ''; position: fixed;
  top: 0; left: -100%; width: 300%; height: 100%;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 45% 30% at 25% 82%, rgba(100,100,180,0.10) 0%, transparent 100%),
    radial-gradient(ellipse 35% 20% at 60% 90%, rgba(120,120,200,0.08) 0%, transparent 100%),
    radial-gradient(ellipse 25% 14% at 15% 96%, rgba(100,100,160,0.07) 0%, transparent 100%),
    radial-gradient(ellipse 20% 12% at 80% 88%, rgba(80,80,150,0.06) 0%, transparent 100%);
  animation: dw-pool-a 22s ease-in-out infinite;
}
[data-style="darkwave"] body::after {
  content: ''; position: fixed;
  top: 0; left: -100%; width: 300%; height: 100%;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 40% 22% at 50% 86%, rgba(90,90,170,0.08) 0%, transparent 100%),
    radial-gradient(ellipse 30% 16% at 30% 94%, rgba(110,110,185,0.07) 0%, transparent 100%),
    radial-gradient(ellipse 20% 12% at 70% 92%, rgba(80,80,155,0.06) 0%, transparent 100%);
  animation: dw-pool-b 15s ease-in-out infinite;
  animation-delay: -6s;
}
@keyframes dw-pool-a { 0%{transform:translateX(0%);opacity:0.70} 25%{transform:translateX(8%);opacity:1.00} 50%{transform:translateX(-5%);opacity:0.60} 75%{transform:translateX(6%);opacity:1.00} 100%{transform:translateX(0%);opacity:0.70} }
@keyframes dw-pool-b { 0%{transform:translateX(0%) translateY(0%);opacity:0.80} 33%{transform:translateX(-8%) translateY(2%);opacity:1.00} 66%{transform:translateX(7%) translateY(-2%);opacity:0.60} 100%{transform:translateX(0%) translateY(0%);opacity:0.80} }

/* ── Typography — Cormorant Upright light ── */
[data-style="darkwave"] .player-name,
[data-style="darkwave"] .diamond-pos-name,
[data-style="darkwave"] .manager-name,
[data-style="darkwave"] .brand {
  font-family: 'Cormorant Upright', serif;
  font-weight: 300;
  letter-spacing: 0.08em;
}

/* ── Slow breath shimmer on elite ── */
[data-style="darkwave"] .shimmer-overlay::before {
  top: 0; left: -240%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(220,220,255,0.03) 25%,
    rgba(255,255,255,0.10) 50%,
    rgba(220,220,255,0.03) 75%,
    transparent 100%
  );
  animation: darkwave-breath 5.5s ease-in-out infinite;
  animation-delay: var(--shimmer-offset, 0ms);
}
@keyframes darkwave-breath {
  0%   { left: -240%; }
  100% { left:  240%; }
}

/* ── Player cards ── */
[data-style="darkwave"] .player-card.tier-elite {
  border-color: rgba(200,200,230,0.35);
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(200,200,230,0.05) 0%, transparent 60%);
  box-shadow: 0 0 24px rgba(180,180,220,0.08), inset 0 1px 0 rgba(220,220,255,0.18);
  border-radius: 1px;
}
[data-style="darkwave"] .player-card.tier-great {
  border-color: rgba(100,100,180,0.32);
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(100,100,180,0.04) 0%, transparent 60%);
  box-shadow: inset 0 1px 0 rgba(120,120,200,0.14);
  border-radius: 1px;
}
[data-style="darkwave"] .player-card.tier-good {
  border-color: rgba(70,70,110,0.24);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(80,80,120,0.10);
  border-radius: 1px;
}
[data-style="darkwave"] .player-card.tier-average {
  border-color: rgba(70,70,110,0.24);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(80,80,120,0.10);
  border-radius: 1px;
}

/* ── Expanded draft card ── */
[data-style="darkwave"] .expanded-draft-card.tier-elite {
  border-color: rgba(200,200,230,0.35);
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(200,200,230,0.05) 0%, transparent 60%);
  box-shadow: 0 0 24px rgba(180,180,220,0.08), inset 0 1px 0 rgba(220,220,255,0.18);
  border-radius: 1px;
}
[data-style="darkwave"] .expanded-draft-card.tier-great {
  border-color: rgba(100,100,180,0.32);
  background-image: linear-gradient(180deg, rgba(100,100,180,0.04) 0%, transparent 60%);
  box-shadow: inset 0 1px 0 rgba(120,120,200,0.14);
  border-radius: 1px;
}
[data-style="darkwave"] .expanded-draft-card.tier-good {
  border-color: rgba(70,70,110,0.24);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(80,80,120,0.10);
  border-radius: 1px;
}
[data-style="darkwave"] .expanded-draft-card.tier-average {
  border-color: rgba(70,70,110,0.24);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(80,80,120,0.10);
  border-radius: 1px;
}

/* ── Slot boxes ── */
[data-style="darkwave"] .slot-box.tier-elite,
[data-style="darkwave"] .slot-filled.tier-elite {
  border-color: rgba(180,180,230,0.22);
  background-color: rgba(180,180,230,0.03);
  background-image: none;
  border-radius: 1px;
}
[data-style="darkwave"] .slot-box.tier-great,
[data-style="darkwave"] .slot-filled.tier-great {
  border-color: rgba(100,100,170,0.16);
  background-image: none;
  border-radius: 1px;
}
[data-style="darkwave"] .slot-box.tier-good,
[data-style="darkwave"] .slot-filled.tier-good {
  border-color: rgba(70,70,110,0.10);
  background-image: none;
  border-radius: 1px;
}
[data-style="darkwave"] .slot-box.tier-average,
[data-style="darkwave"] .slot-filled.tier-average {
  border-color: rgba(70,70,110,0.10);
  background-image: none;
  border-radius: 1px;
}
[data-style="darkwave"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average),
[data-style="darkwave"] .slot-filled:not(.tier-elite):not(.tier-great):not(.tier-good) {
  border-color: rgba(80,80,120,0.06);
  border-radius: 1px;
}

/* ── Diamond pos cards ── */
[data-style="darkwave"] .diamond-pos-card.tier-elite {
  border-color: rgba(180,180,230,0.28);
  background-color: rgba(180,180,230,0.04);
  background-image: none;
  border-radius: 1px;
}
[data-style="darkwave"] .diamond-pos-card.tier-great {
  border-color: rgba(100,100,170,0.20);
  background-image: none;
  border-radius: 1px;
}
[data-style="darkwave"] .diamond-pos-card.tier-good {
  border-color: rgba(70,70,110,0.14);
  background-image: none;
  border-radius: 1px;
}
[data-style="darkwave"] .diamond-pos-card.tier-average {
  border-color: rgba(70,70,110,0.14);
  background-image: none;
  border-radius: 1px;
}

/* ── Panels ── */
[data-style="darkwave"] .lineup-card {
  background: rgba(6,6,15,0.95);
  border-color: rgba(120,120,180,0.12);
  border-top: 1px solid rgba(160,160,210,0.22);
  box-shadow: none;
}
[data-style="darkwave"] .void-panel {
  background: rgba(6,6,15,0.95);
  border-color: rgba(100,100,160,0.10);
  border-top: 1px solid rgba(140,140,200,0.18);
}
[data-style="darkwave"] .modal-panel {
  background: rgba(6,6,15,0.95);
  border-color: rgba(160,160,210,0.20);
  border-top: 1px solid rgba(180,180,230,0.35);
  border-radius: 1px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.8);
}
[data-style="darkwave"] .modal-header {
  border-bottom: 1px solid rgba(120,120,180,0.10);
}
[data-style="darkwave"] .scoreboard,
[data-style="darkwave"] .manager-card,
[data-style="darkwave"] .highlight-card,
[data-style="darkwave"] .achievement-card,
[data-style="darkwave"] .postseason-game-tile,
[data-style="darkwave"] .postseason-mvp-tile {
  background: rgba(6,6,15,0.95);
  border-color: rgba(100,100,160,0.12);
  border-top: 1px solid rgba(140,140,200,0.18);
  border-radius: 1px;
  box-shadow: none;
}

/* ── Buttons ── */
[data-style="darkwave"] .btn-primary {
  background: transparent;
  color: rgba(180,180,230,0.65);
  border: 1px solid rgba(160,160,210,0.28);
  border-radius: 1px;
  box-shadow: none;
  letter-spacing: 0.16em;
  font-family: 'Cormorant Upright', serif;
  font-weight: 300;
}
[data-style="darkwave"] .btn-primary:hover:not(:disabled) {
  background: rgba(160,160,210,0.06);
  transform: none;
  box-shadow: none;
}
[data-style="darkwave"] .btn-outline {
  border-color: rgba(120,120,180,0.18);
  border-radius: 1px;
}
[data-style="darkwave"] .draft-action-btn:hover:not(:disabled) {
  color: var(--void);
  background: rgba(180,180,230,0.55);
}
[data-style="darkwave"] .draft-action-btn {
  background: transparent;
  color: rgba(180,180,230,0.55);
  border: 1px solid rgba(180,180,230,0.24);
  border-radius: 1px;
  font-family: 'Cormorant Upright', serif;
  font-weight: 300;
  letter-spacing: 0.12em;
  box-shadow: none;
}
[data-style="darkwave"] .tier-great .draft-action-btn {
  color: rgba(120,120,190,0.75);
  border-color: rgba(110,110,175,0.30);
}
[data-style="darkwave"] .tier-good .draft-action-btn {
  color: rgba(100,100,160,0.72);
  border-color: rgba(80,80,130,0.28);
}

/* ── Interactive states ── */
[data-style="darkwave"] .player-pos,
[data-style="darkwave"] .slot-box-pos {
  background: rgba(180,180,230,0.05);
  color: rgba(180,180,230,0.55);
  border-color: rgba(160,160,210,0.22);
  border-radius: 1px;
}
[data-style="darkwave"] .pending-confirm {
  border-color: rgba(200,200,240,0.60);
  background: rgba(180,180,230,0.12);
  color: rgba(200,200,240,0.90);
  box-shadow: 0 0 12px rgba(180,180,220,0.20);
}
[data-style="darkwave"] .picker-active,
[data-style="darkwave"] .swap-active {
  border-color: rgba(180,180,230,0.45);
  box-shadow: 0 0 14px rgba(160,160,210,0.15);
}
[data-style="darkwave"] .natural {
  border-color: rgba(160,160,210,0.30);
  color: rgba(180,180,230,0.60);
  background: rgba(160,160,210,0.06);
  border-radius: 1px;
}
[data-style="darkwave"] .selected {
  border-color: rgba(180,180,230,0.45);
  background: rgba(160,160,210,0.08);
  color: rgba(200,200,240,0.80);
  box-shadow: 0 0 12px rgba(160,160,210,0.14);
}

/* ── Badges ── */
[data-style="darkwave"] .hof-badge,
[data-style="darkwave"] .ace-badge,
[data-style="darkwave"] .clutch-badge,
[data-style="darkwave"] .ironman-badge {
  border-radius: 1px;
  background: rgba(160,160,210,0.08);
  border-color: rgba(160,160,210,0.24);
  color: rgba(180,180,230,0.65);
}
[data-style="darkwave"] .settings-option.active {
  border-color: rgba(160,160,210,0.40);
  background: rgba(120,120,180,0.06);
  box-shadow: none;
}
[data-style="darkwave"] .record-banner,
[data-style="darkwave"] .postseason-champion-banner {
  border-radius: 1px;
  border-top: 1px solid rgba(180,180,230,0.35);
  box-shadow: 0 0 30px rgba(160,160,210,0.12);
}

/* ══════════════════════════════════════════════════════════════
   SCI-FI HUD / TACTICAL STYLE
   XCOM / Deus Ex / Dead Space UI.
   Void #020508. Amber target-lock elite,
   radar green great, dim green good.
   Corner bracket marks on cards.
   Single amber scanline sweep on elite.
   Share Tech Mono for data readouts.
   All scoped to [data-style="hud"].
══════════════════════════════════════════════════════════════ */

[data-style="hud"] {
  --tier-elite:  #ffa000;
  --tier-great:  #00ff8c;
  --tier-good:   #00b464;
  --tier-average: #40906c;
  --gold:        #ffa000;
  --gold-rgb:    255, 160, 0;
  --gold-bright: #ffb830;
  --purple-rgb:  0, 255, 140;
  --green-rgb:   0, 180, 100;

  --font: 'Share Tech Mono', monospace;
  --void:   #020508;
  --void-2: #060c10;}

[data-style="hud"] body {
  background: #020508;
}
/* Radar center dot */
[data-style="hud"] body::before {
  content: ''; position: fixed;
  animation: none;
  top: 50%; left: 50%;
  width: 200vmax; height: 200vmax;
  margin: -100vmax 0 0 -100vmax;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle, transparent calc(12vmin - 1px), rgba(0,200,100,0.09) calc(12vmin), transparent calc(12vmin + 1px)),
    radial-gradient(circle, transparent calc(24vmin - 1px), rgba(0,200,100,0.08) calc(24vmin), transparent calc(24vmin + 1px)),
    radial-gradient(circle, transparent calc(36vmin - 1px), rgba(0,200,100,0.07) calc(36vmin), transparent calc(36vmin + 1px)),
    radial-gradient(circle, transparent calc(48vmin - 1px), rgba(0,200,100,0.06) calc(48vmin), transparent calc(48vmin + 1px)),
    radial-gradient(circle, transparent calc(62vmin - 1px), rgba(0,200,100,0.05) calc(62vmin), transparent calc(62vmin + 1px)),
    radial-gradient(circle, transparent calc(78vmin - 1px), rgba(0,200,100,0.04) calc(78vmin), transparent calc(78vmin + 1px)),
    radial-gradient(circle, rgba(0,40,15,0.30) 0%, transparent 75vmin),
    #020508;
}
[data-style="hud"] body::after {
  content: ''; position: fixed;
  top: 50%; left: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: rgba(255,160,0,0.75);
  box-shadow: 0 0 8px rgba(255,160,0,0.55), 0 0 20px rgba(255,160,0,0.20);
}
@keyframes hud-radar { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

[data-style="hud"] .player-name,
[data-style="hud"] .diamond-pos-name,
[data-style="hud"] .manager-name,
[data-style="hud"] .brand {
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 0.08em;
}

/* ── Amber scanline sweep on elite shimmer-overlay ── */
[data-style="hud"] .shimmer-overlay::before {
  top: -5%; left: 0;
  width: 100%; height: 2px;
  background: rgba(255,160,0,0.70);
  box-shadow: 0 0 8px rgba(255,160,0,0.90);
  animation: hud-scan 2.5s linear infinite;
  animation-delay: var(--shimmer-offset, 0ms);
}
@keyframes hud-scan { 0%{top:-5%} 100%{top:105%} }

/* ── Corner bracket marks on cards ── */
[data-style="hud"] .player-card.tier-elite::before,
[data-style="hud"] .player-card.tier-great::before,
[data-style="hud"] .player-card.tier-good::before,
[data-style="hud"] .expanded-draft-card.tier-elite::before,
[data-style="hud"] .expanded-draft-card.tier-great::before,
[data-style="hud"] .expanded-draft-card.tier-good::before,
[data-style="hud"] .slot-box.tier-elite::before,
[data-style="hud"] .slot-box.tier-great::before,
[data-style="hud"] .slot-box.tier-good::before,
[data-style="hud"] .slot-filled.tier-elite::before,
[data-style="hud"] .slot-filled.tier-great::before,
[data-style="hud"] .slot-filled.tier-good::before {
  content: ''; position: absolute; top: -1px; left: -1px;
  width: 8px; height: 8px;
  border-top: 2px solid; border-left: 2px solid;
  pointer-events: none; z-index: 2;
}
[data-style="hud"] .player-card.tier-elite::after,
[data-style="hud"] .player-card.tier-great::after,
[data-style="hud"] .player-card.tier-good::after,
[data-style="hud"] .expanded-draft-card.tier-elite::after,
[data-style="hud"] .expanded-draft-card.tier-great::after,
[data-style="hud"] .expanded-draft-card.tier-good::after,
[data-style="hud"] .slot-box.tier-elite::after,
[data-style="hud"] .slot-box.tier-great::after,
[data-style="hud"] .slot-box.tier-good::after,
[data-style="hud"] .slot-filled.tier-elite::after,
[data-style="hud"] .slot-filled.tier-great::after,
[data-style="hud"] .slot-filled.tier-good::after {
  content: ''; position: absolute; bottom: -1px; right: -1px;
  width: 8px; height: 8px;
  border-bottom: 2px solid; border-right: 2px solid;
  pointer-events: none; z-index: 2;
}
[data-style="hud"] .player-card.tier-elite::before,
[data-style="hud"] .player-card.tier-elite::after,
[data-style="hud"] .expanded-draft-card.tier-elite::before,
[data-style="hud"] .expanded-draft-card.tier-elite::after,
[data-style="hud"] .slot-box.tier-elite::before,
[data-style="hud"] .slot-box.tier-elite::after,
[data-style="hud"] .slot-filled.tier-elite::before,
[data-style="hud"] .slot-filled.tier-elite::after { border-color: rgba(255,160,0,0.85); }
[data-style="hud"] .player-card.tier-great::before,
[data-style="hud"] .player-card.tier-great::after,
[data-style="hud"] .expanded-draft-card.tier-great::before,
[data-style="hud"] .expanded-draft-card.tier-great::after,
[data-style="hud"] .slot-box.tier-great::before,
[data-style="hud"] .slot-box.tier-great::after,
[data-style="hud"] .slot-filled.tier-great::before,
[data-style="hud"] .slot-filled.tier-great::after { border-color: rgba(0,255,140,0.70); }
[data-style="hud"] .player-card.tier-good::before,
[data-style="hud"] .player-card.tier-good::after,
[data-style="hud"] .expanded-draft-card.tier-good::before,
[data-style="hud"] .expanded-draft-card.tier-good::after,
[data-style="hud"] .slot-box.tier-good::before,
[data-style="hud"] .slot-box.tier-good::after,
[data-style="hud"] .slot-filled.tier-good::before,
[data-style="hud"] .slot-filled.tier-good::after { border-color: rgba(0,180,100,0.50); }

/* ── Player cards ── */
[data-style="hud"] .player-card.tier-elite {
  border-color: rgba(255,160,0,0.45);
  background-color: rgba(0,0,0,0.6);
  background-image: none;
  box-shadow: 0 0 14px rgba(255,160,0,0.12), inset 0 0 20px rgba(255,160,0,0.04);
  border-radius: 0;
}
[data-style="hud"] .player-card.tier-great {
  border-color: rgba(0,255,140,0.35);
  background-color: rgba(0,0,0,0.6);
  background-image: none;
  border-radius: 0;
}
[data-style="hud"] .player-card.tier-good {
  border-color: rgba(0,180,100,0.22);
  background-color: rgba(0,0,0,0.6);
  background-image: none;
  border-radius: 0;
}
[data-style="hud"] .player-card.tier-average {
  border-color: rgba(64,144,108,0.22);
  background-color: rgba(0,0,0,0.6);
  background-image: none;
  border-radius: 0;
}

/* ── Expanded draft card ── */
[data-style="hud"] .expanded-draft-card.tier-elite {
  border-color: rgba(255,160,0,0.45);
  background-color: rgba(0,0,0,0.6);
  background-image: none;
  box-shadow: 0 0 14px rgba(255,160,0,0.12);
  border-radius: 0;
}
[data-style="hud"] .expanded-draft-card.tier-great {
  border-color: rgba(0,255,140,0.35);
  background-color: rgba(0,0,0,0.6);
  background-image: none;
  border-radius: 0;
}
[data-style="hud"] .expanded-draft-card.tier-good {
  border-color: rgba(0,180,100,0.22);
  background-color: rgba(0,0,0,0.6);
  background-image: none;
  border-radius: 0;
}
[data-style="hud"] .expanded-draft-card.tier-average {
  border-color: rgba(64,144,108,0.22);
  background-color: rgba(0,0,0,0.6);
  background-image: none;
  border-radius: 0;
}

/* ── Slot boxes ── */
[data-style="hud"] .slot-box.tier-elite,
[data-style="hud"] .slot-filled.tier-elite {
  border-color: rgba(255,160,0,0.30);
  background-color: rgba(255,160,0,0.04);
  background-image: none;
  border-radius: 0;
}
[data-style="hud"] .slot-box.tier-great,
[data-style="hud"] .slot-filled.tier-great {
  border-color: rgba(0,255,140,0.22);
  background-color: rgba(0,255,140,0.03);
  background-image: none;
  border-radius: 0;
}
[data-style="hud"] .slot-box.tier-good,
[data-style="hud"] .slot-filled.tier-good {
  border-color: rgba(0,180,100,0.15);
  background-image: none;
  border-radius: 0;
}
[data-style="hud"] .slot-box.tier-average,
[data-style="hud"] .slot-filled.tier-average {
  border-color: rgba(64,144,108,0.15);
  background-image: none;
  border-radius: 0;
}
[data-style="hud"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average),
[data-style="hud"] .slot-filled:not(.tier-elite):not(.tier-great):not(.tier-good) {
  border-color: rgba(255,255,255,0.05);
  border-radius: 0;
}

/* ── Diamond pos cards ── */
[data-style="hud"] .diamond-pos-card.tier-elite {
  border-color: rgba(255,160,0,0.38);
  background-color: rgba(255,160,0,0.05);
  background-image: none;
  border-radius: 0;
}
[data-style="hud"] .diamond-pos-card.tier-great {
  border-color: rgba(0,255,140,0.28);
  background-color: rgba(0,255,140,0.03);
  background-image: none;
  border-radius: 0;
}
[data-style="hud"] .diamond-pos-card.tier-good {
  border-color: rgba(0,180,100,0.18);
  background-image: none;
  border-radius: 0;
}
[data-style="hud"] .diamond-pos-card.tier-average {
  border-color: rgba(64,144,108,0.18);
  background-image: none;
  border-radius: 0;
}

/* ── Panels ── */
[data-style="hud"] .lineup-card {
  background: rgba(2,5,8,0.95);
  border: 1px solid rgba(255,160,0,0.14);
  border-top: 1px solid rgba(255,160,0,0.32);
  box-shadow: none; border-radius: 0;
}
[data-style="hud"] .void-panel {
  background: rgba(2,5,8,0.95);
  border-color: rgba(255,160,0,0.10);
  border-top: 1px solid rgba(255,160,0,0.24);
  border-radius: 0;
}
[data-style="hud"] .modal-panel {
  background: rgba(2,5,8,0.95);
  border-color: rgba(255,160,0,0.22);
  border-top: 2px solid rgba(255,160,0,0.50);
  border-radius: 0;
  box-shadow: 0 0 40px rgba(255,160,0,0.08), 0 8px 32px rgba(0,0,0,0.8);
}
[data-style="hud"] .modal-header { border-bottom: 1px solid rgba(255,160,0,0.12); }
[data-style="hud"] .scoreboard,
[data-style="hud"] .manager-card,
[data-style="hud"] .highlight-card,
[data-style="hud"] .achievement-card,
[data-style="hud"] .postseason-game-tile,
[data-style="hud"] .postseason-mvp-tile {
  background: rgba(2,5,8,0.95);
  border-color: rgba(255,160,0,0.12);
  border-top: 1px solid rgba(255,160,0,0.24);
  border-radius: 0; box-shadow: none;
}

/* ── Buttons ── */
[data-style="hud"] .btn-primary {
  background: rgba(255,160,0,0.10);
  color: rgba(255,160,0,0.95);
  border: 1px solid rgba(255,160,0,0.52);
  border-radius: 0; letter-spacing: 0.18em;
  box-shadow: none;
  font-family: 'Share Tech Mono', monospace;
}
[data-style="hud"] .btn-primary:hover:not(:disabled) {
  background: rgba(255,160,0,0.18);
  box-shadow: 0 0 12px rgba(255,160,0,0.20);
  transform: none;
}
[data-style="hud"] .btn-outline { border-color: rgba(255,160,0,0.28); border-radius: 0; }
[data-style="hud"] .draft-action-btn:hover:not(:disabled) {
  color: var(--void);
}

[data-style="hud"] .draft-action-btn {
  background: rgba(255,160,0,0.08);
  color: rgba(255,160,0,0.88);
  border: 1px solid rgba(255,160,0,0.45);
  border-radius: 0; letter-spacing: 0.14em;
  font-family: 'Share Tech Mono', monospace;
  box-shadow: none;
}
[data-style="hud"] .tier-great .draft-action-btn {
  background: rgba(0,255,140,0.06);
  color: rgba(0,255,140,0.78);
  border-color: rgba(0,255,140,0.35);
}
[data-style="hud"] .tier-good .draft-action-btn {
  background: transparent;
  color: rgba(0,180,100,0.58);
  border-color: rgba(0,180,100,0.26);
}

/* ── Interactive states ── */
[data-style="hud"] .player-pos,
[data-style="hud"] .slot-box-pos {
  background: rgba(255,160,0,0.08);
  color: rgba(255,160,0,0.85);
  border-color: rgba(255,160,0,0.38);
  border-radius: 0;
}
[data-style="hud"] .pending-confirm {
  border-color: rgba(255,160,0,0.90);
  background: rgba(255,160,0,0.18);
  color: rgba(255,160,0,1.0);
  box-shadow: 0 0 14px rgba(255,160,0,0.35);
}
[data-style="hud"] .picker-active,
[data-style="hud"] .swap-active {
  border-color: rgba(255,160,0,0.68);
  box-shadow: 0 0 14px rgba(255,160,0,0.24);
}
[data-style="hud"] .natural {
  border-color: rgba(255,160,0,0.48);
  color: rgba(255,160,0,0.88);
  background: rgba(255,160,0,0.07);
  border-radius: 0;
}
[data-style="hud"] .selected {
  border-color: rgba(255,160,0,0.72);
  background: rgba(255,160,0,0.10);
  color: rgba(255,160,0,0.95);
  box-shadow: 0 0 14px rgba(255,160,0,0.25);
}

/* ── Badges ── */
[data-style="hud"] .hof-badge,
[data-style="hud"] .ace-badge,
[data-style="hud"] .clutch-badge,
[data-style="hud"] .ironman-badge {
  border-radius: 0;
  background: rgba(255,160,0,0.10);
  border-color: rgba(255,160,0,0.40);
  color: rgba(255,160,0,0.88);
  font-family: 'Share Tech Mono', monospace;
}
[data-style="hud"] .settings-option.active {
  border-color: rgba(255,160,0,0.52);
  background: rgba(255,160,0,0.06);
  box-shadow: 0 0 8px rgba(255,160,0,0.10);
}
[data-style="hud"] .record-banner,
[data-style="hud"] .postseason-champion-banner {
  border-radius: 0;
  box-shadow: 0 0 20px rgba(255,160,0,0.18), inset 0 1px 0 rgba(255,160,0,0.22);
}


/* ══════════════════════════════════════════════════════════════
   RETROFUTURISM STYLE — Space Age / Atompunk
   Dark blue-grey void #0c0e14. Vermilion elite,
   atomic teal great, amber good.
   Bold left color stripe on cards.
   Josefin Sans all-caps for names.
   Atom orbit ring motif on body/panels.
   All scoped to [data-style="retro"].
══════════════════════════════════════════════════════════════ */

[data-style="retro"] {
  --tier-elite:  #cc3020;
  --tier-great:  #00b4b4;
  --tier-good:   #d08020;
  --tier-average: #a68358;
  --gold:        #cc3020;
  --gold-rgb:    204, 48, 32;
  --gold-bright: #e03828;
  --purple-rgb:  0, 180, 180;
  --green-rgb:   208, 128, 32;

  --font: 'Josefin Sans', 'IBM Plex Mono', monospace;
  --void:   #0c0e14;
  --void-2: #12141c;}

[data-style="retro"] body {
  background:
    radial-gradient(5px 5px at 12% 18%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(3px 3px at 34%  7%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(5px 5px at 56% 24%, rgba(0,220,220,0.65) 0%, transparent 100%),
    radial-gradient(3px 3px at 78% 11%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(4px 4px at 91% 35%, rgba(255,255,255,0.50) 0%, transparent 100%),
    radial-gradient(3px 3px at  8% 52%, rgba(0,220,220,0.55) 0%, transparent 100%),
    radial-gradient(5px 5px at 25% 68%, rgba(255,255,255,0.62) 0%, transparent 100%),
    radial-gradient(3px 3px at 47% 80%, rgba(255,255,255,0.50) 0%, transparent 100%),
    radial-gradient(4px 4px at 65% 60%, rgba(0,220,220,0.58) 0%, transparent 100%),
    radial-gradient(3px 3px at 83% 75%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(5px 5px at 96% 90%, rgba(255,255,255,0.48) 0%, transparent 100%),
    radial-gradient(3px 3px at 18% 90%, rgba(0,220,220,0.50) 0%, transparent 100%),
    radial-gradient(4px 4px at 40% 45%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(3px 3px at 72% 38%, rgba(255,255,255,0.58) 0%, transparent 100%),
    radial-gradient(5px 5px at 88% 55%, rgba(0,220,220,0.52) 0%, transparent 100%),
    radial-gradient(3px 3px at 30% 28%, rgba(255,255,255,0.50) 0%, transparent 100%),
    radial-gradient(4px 4px at 55%  5%, rgba(255,255,255,0.48) 0%, transparent 100%),
    radial-gradient(3px 3px at  3% 15%, rgba(0,220,220,0.58) 0%, transparent 100%),
    radial-gradient(5px 5px at 62% 42%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(3px 3px at 44% 95%, rgba(255,255,255,0.50) 0%, transparent 100%),
    radial-gradient(4px 4px at 15% 35%, rgba(255,255,255,0.48) 0%, transparent 100%),
    radial-gradient(3px 3px at 70% 50%, rgba(0,220,220,0.50) 0%, transparent 100%),
    radial-gradient(5px 5px at 50% 70%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(3px 3px at 85% 20%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(4px 4px at  5% 75%, rgba(0,220,220,0.48) 0%, transparent 100%),
    #0c0e14;
}
/* Ring 1 — large circle, slow clockwise */
[data-style="retro"] body::before {
  content: ''; position: fixed;
  top: 50%; left: 50%; width: 120vmax; height: 120vmax;
  margin: -60vmax 0 0 -60vmax;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: none;
  border: 1px solid rgba(0,180,180,0.08);
  box-shadow: 0 0 20px rgba(0,180,180,0.03) inset;
  animation: retro-ring-a 28s linear infinite;
}
/* Ring 2 — tilted ellipse, faster, counter-clockwise */
[data-style="retro"] body::after {
  content: ''; position: fixed;
  background: none;
  top: 50%; left: 50%; width: 90vmax; height: 38vmax;
  margin: -19vmax 0 0 -45vmax;
  border-radius: 50%; pointer-events: none; z-index: 0;
  border: 1px solid rgba(0,180,180,0.065);
  animation: retro-ring-b 18s linear infinite reverse;
}
@keyframes retro-ring-a { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes retro-ring-b { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

[data-style="retro"] .player-name,
[data-style="retro"] .diamond-pos-name,
[data-style="retro"] .manager-name,
[data-style="retro"] .brand,
[data-style="retro"] .btn-primary,
[data-style="retro"] .draft-action-btn {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── Cards — no fill, bold left stripe only ── */
[data-style="retro"] .player-card.tier-elite {
  border: none;
  border-left: 4px solid #cc3020;
  background-color: rgba(255,255,255,0.04);
  background-image: none;
  box-shadow: none;
  border-radius: 0;
}
[data-style="retro"] .player-card.tier-great {
  border: none;
  border-left: 4px solid #00b4b4;
  background-color: rgba(255,255,255,0.04);
  background-image: none;
  box-shadow: none;
  border-radius: 0;
}
[data-style="retro"] .player-card.tier-good {
  border: none;
  border-left: 4px solid #d08020;
  background-color: rgba(255,255,255,0.04);
  background-image: none;
  box-shadow: none;
  border-radius: 0;
}
[data-style="retro"] .player-card.tier-average {
  border: none;
  border-left: 4px solid #d08020;
  background-color: rgba(255,255,255,0.04);
  background-image: none;
  box-shadow: none;
  border-radius: 0;
}
[data-style="retro"] .player-card:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average):not(.ineligible) {
  border: none;
  border-left: 4px solid rgba(255,255,255,0.10);
  background-color: rgba(255,255,255,0.02);
  background-image: none;
  box-shadow: none;
  border-radius: 0;
}

/* No shimmer on retro — clean and optimistic */
[data-style="retro"] .shimmer-overlay { display: none; }

/* ── Expanded card ── */
[data-style="retro"] .expanded-draft-card.tier-elite {
  border: none; border-left: 4px solid #cc3020;
  background-color: rgba(255,255,255,0.04); background-image: none;
  box-shadow: none; border-radius: 0;
}
[data-style="retro"] .expanded-draft-card.tier-great {
  border: none; border-left: 4px solid #00b4b4;
  background-color: rgba(255,255,255,0.04); background-image: none;
  box-shadow: none; border-radius: 0;
}
[data-style="retro"] .expanded-draft-card.tier-good {
  border: none; border-left: 4px solid #d08020;
  background-color: rgba(255,255,255,0.04); background-image: none;
  box-shadow: none; border-radius: 0;
}
[data-style="retro"] .expanded-draft-card.tier-average {
  border: none; border-left: 4px solid #d08020;
  background-color: rgba(255,255,255,0.04); background-image: none;
  box-shadow: none; border-radius: 0;
}

/* ── Slot boxes ── */
[data-style="retro"] .slot-box.tier-elite,
[data-style="retro"] .slot-filled.tier-elite {
  border: none; border-left: 3px solid #cc3020;
  background-color: rgba(255,255,255,0.03); background-image: none;
  box-shadow: none; border-radius: 0;
}
[data-style="retro"] .slot-box.tier-great,
[data-style="retro"] .slot-filled.tier-great {
  border: none; border-left: 3px solid #00b4b4;
  background-color: rgba(255,255,255,0.03); background-image: none;
  box-shadow: none; border-radius: 0;
}
[data-style="retro"] .slot-box.tier-good,
[data-style="retro"] .slot-filled.tier-good {
  border: none; border-left: 3px solid #d08020;
  background-color: rgba(255,255,255,0.03); background-image: none;
  box-shadow: none; border-radius: 0;
}
[data-style="retro"] .slot-box.tier-average,
[data-style="retro"] .slot-filled.tier-average {
  border: none; border-left: 3px solid #d08020;
  background-color: rgba(255,255,255,0.03); background-image: none;
  box-shadow: none; border-radius: 0;
}
[data-style="retro"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average),
[data-style="retro"] .slot-filled:not(.tier-elite):not(.tier-great):not(.tier-good) {
  border: none; border-left: 3px solid rgba(255,255,255,0.08);
  background-color: rgba(255,255,255,0.02); background-image: none;
  box-shadow: none; border-radius: 0;
}

/* ── Diamond pos cards ── */
[data-style="retro"] .diamond-pos-card.tier-elite {
  border: none; border-left: 3px solid #cc3020;
  background-color: rgba(255,255,255,0.04); background-image: none;
  border-radius: 0; box-shadow: none;
}
[data-style="retro"] .diamond-pos-card.tier-great {
  border: none; border-left: 3px solid #00b4b4;
  background-color: rgba(255,255,255,0.04); background-image: none;
  border-radius: 0; box-shadow: none;
}
[data-style="retro"] .diamond-pos-card.tier-good {
  border: none; border-left: 3px solid #d08020;
  background-color: rgba(255,255,255,0.04); background-image: none;
  border-radius: 0; box-shadow: none;
}
[data-style="retro"] .diamond-pos-card.tier-average {
  border: none; border-left: 3px solid #d08020;
  background-color: rgba(255,255,255,0.04); background-image: none;
  border-radius: 0; box-shadow: none;
}

/* ── Panels ── */
[data-style="retro"] .lineup-card {
  background: rgba(12,14,20,0.95);
  border-color: rgba(0,180,180,0.16);
  border-top: 2px solid rgba(0,180,180,0.35);
  box-shadow: none; border-radius: 0;
}
[data-style="retro"] .void-panel {
  background: rgba(12,14,20,0.95);
  border-color: rgba(0,180,180,0.12);
  border-top: 1px solid rgba(0,180,180,0.24);
  border-radius: 0;
}
[data-style="retro"] .modal-panel {
  background: rgba(12,14,20,0.95);
  border-color: rgba(204,48,32,0.30);
  border-top: 2px solid rgba(204,48,32,0.60);
  border-radius: 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
}
[data-style="retro"] .modal-header { border-bottom: 1px solid rgba(0,180,180,0.14); }
[data-style="retro"] .scoreboard,
[data-style="retro"] .manager-card,
[data-style="retro"] .highlight-card,
[data-style="retro"] .achievement-card,
[data-style="retro"] .postseason-game-tile,
[data-style="retro"] .postseason-mvp-tile {
  background: rgba(12,14,20,0.95);
  border-color: rgba(0,180,180,0.12);
  border-top: 1px solid rgba(0,180,180,0.22);
  border-radius: 0; box-shadow: none;
}

/* ── Buttons ── */
[data-style="retro"] .btn-primary {
  background: #cc3020; color: #f0ede4;
  border: none; border-radius: 0;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.20);
  letter-spacing: 0.16em;
}
[data-style="retro"] .btn-primary:hover:not(:disabled) {
  background: #e03828; transform: none;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.20);
}
[data-style="retro"] .btn-outline {
  border-color: rgba(0,180,180,0.40);
  border-radius: 0; border-width: 2px;
}
[data-style="retro"] .draft-action-btn {
  background: transparent;
  color: #cc3020;
  border: 2px solid #cc3020;
  border-radius: 0; box-shadow: none;
}
[data-style="retro"] .tier-great .draft-action-btn { color: #00b4b4; border-color: #00b4b4; }
[data-style="retro"] .tier-good  .draft-action-btn { color: #d08020; border-color: #d08020; }

/* ── Interactive states ── */
[data-style="retro"] .player-pos,
[data-style="retro"] .slot-box-pos {
  background: rgba(204,48,32,0.10);
  color: #cc3020; border-color: rgba(204,48,32,0.40);
  border-radius: 0;
}
[data-style="retro"] .pending-confirm {
  border-color: #cc3020; background: rgba(204,48,32,0.15);
  color: #cc3020; box-shadow: none;
}
[data-style="retro"] .picker-active,
[data-style="retro"] .swap-active {
  border-color: #cc3020; box-shadow: none;
  border-width: 2px;
}
[data-style="retro"] .natural {
  border-color: rgba(0,180,180,0.55);
  color: #00b4b4; background: rgba(0,180,180,0.08);
  border-radius: 0; border-width: 2px;
}
[data-style="retro"] .selected {
  border-color: #00b4b4; border-width: 2px;
  background: rgba(0,180,180,0.08);
  color: #00b4b4; box-shadow: none;
}

/* ── Badges ── */
[data-style="retro"] .hof-badge,
[data-style="retro"] .ace-badge,
[data-style="retro"] .clutch-badge,
[data-style="retro"] .ironman-badge {
  border-radius: 0;
  background: #cc3020; color: #f0ede4;
  border-color: #cc3020;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase;
}
[data-style="retro"] .settings-option.active {
  border-color: rgba(204,48,32,0.55);
  background: rgba(204,48,32,0.06);
  box-shadow: none;
}
[data-style="retro"] .record-banner { border-radius: 0; border-left: 4px solid #cc3020; box-shadow: none; }
[data-style="retro"] .postseason-champion-banner { border-radius: 0; border-top: 3px solid #cc3020; box-shadow: none; }


/* ══════════════════════════════════════════════════════════════
   SOVIET CONSTRUCTIVISM STYLE
   Rodchenko / Lissitzky / Malevich.
   Warm charcoal void #0e0d0c.
   Revolutionary red elite, warm grey great, dim good.
   Oswald bold condensed for names.
   Flat cards — thick red top border on all tiers.
   Diagonal corner slash on elite.
   No gradients, no glow — flat printed ink.
   All scoped to [data-style="constructivism"].
══════════════════════════════════════════════════════════════ */

[data-style="constructivism"] {
  --tier-elite:  #c81e14;
  --tier-great:  #887868;
  --tier-good:   #504840;
  --tier-average: #403c38;
  --gold:        #c81e14;
  --gold-rgb:    200, 30, 20;
  --gold-bright: #e02010;
  --purple-rgb:  136, 120, 104;
  --green-rgb:   80, 72, 64;

  --font: 'Oswald', 'IBM Plex Mono', monospace;
  --void:   #0e0d0c;
  --void-2: #161412;}

[data-style="constructivism"] body {
  background:
    repeating-linear-gradient(45deg,  rgba(200,30,20,0.012) 0, rgba(200,30,20,0.012) 1px, transparent 1px, transparent 12px),
    repeating-linear-gradient(-45deg, rgba(200,30,20,0.012) 0, rgba(200,30,20,0.012) 1px, transparent 1px, transparent 12px),
    #0e0d0c;
  background-attachment: fixed;
  overflow: hidden;
}
/* Primary slash — wide */
[data-style="constructivism"] body::before {
  content: ''; position: fixed;
  top: -30%; width: 28%; height: 180%;
  background: rgba(200,30,20,0.065);
  transform: rotate(-18deg);
  pointer-events: none; z-index: 0;
  animation: con-slash 12s ease-in-out infinite alternate;
}
/* Secondary slash — thin accent, slight delay */
[data-style="constructivism"] body::after {
  content: ''; position: fixed;
  top: -30%; width: 8%; height: 180%;
  background: rgba(200,30,20,0.040);
  transform: rotate(-18deg);
  pointer-events: none; z-index: 0;
  animation: con-slash 12s ease-in-out infinite alternate;
  animation-delay: 0.4s;
}
@keyframes con-slash { 0%{left:-18%} 100%{left:-4%} }

[data-style="constructivism"] .player-name,
[data-style="constructivism"] .diamond-pos-name,
[data-style="constructivism"] .manager-name,
[data-style="constructivism"] .brand,
[data-style="constructivism"] .btn-primary,
[data-style="constructivism"] .draft-action-btn {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* No shimmer — flat printed ink */
[data-style="constructivism"] .shimmer-overlay { display: none; }

/* ── Player cards — flat, thick top border ── */
[data-style="constructivism"] .player-card.tier-elite {
  border: none;
  border-top: 3px solid #c81e14;
  background-color: #161412;
  background-image: none;
  box-shadow: none;
  border-radius: 0;
}
/* Diagonal corner slash on elite */
[data-style="constructivism"] .player-card.tier-elite::after {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 0; height: 0;
  border-top: 22px solid #c81e14;
  border-left: 22px solid transparent;
  pointer-events: none; z-index: 2;
}
[data-style="constructivism"] .player-card.tier-great {
  border: none; border-top: 3px solid #887868;
  background-color: #161412; background-image: none;
  box-shadow: none; border-radius: 0;
}
[data-style="constructivism"] .player-card.tier-good {
  border: none; border-top: 3px solid #504840;
  background-color: #161412; background-image: none;
  box-shadow: none; border-radius: 0;
}
[data-style="constructivism"] .player-card.tier-average {
  border: none; border-top: 3px solid #504840;
  background-color: #161412; background-image: none;
  box-shadow: none; border-radius: 0;
}

/* ── Expanded card ── */
[data-style="constructivism"] .expanded-draft-card.tier-elite {
  border: none; border-top: 3px solid #c81e14;
  background-color: #161412; background-image: none;
  box-shadow: none; border-radius: 0;
}
[data-style="constructivism"] .expanded-draft-card.tier-great {
  border: none; border-top: 3px solid #887868;
  background-color: #161412; background-image: none;
  box-shadow: none; border-radius: 0;
}
[data-style="constructivism"] .expanded-draft-card.tier-good {
  border: none; border-top: 3px solid #504840;
  background-color: #161412; background-image: none;
  box-shadow: none; border-radius: 0;
}
[data-style="constructivism"] .expanded-draft-card.tier-average {
  border: none; border-top: 3px solid #504840;
  background-color: #161412; background-image: none;
  box-shadow: none; border-radius: 0;
}

/* ── Slot boxes — thick left bar ── */
[data-style="constructivism"] .slot-box.tier-elite,
[data-style="constructivism"] .slot-filled.tier-elite {
  border: none; border-left: 4px solid #c81e14;
  background-color: #121110; background-image: none;
  box-shadow: none; border-radius: 0;
}
[data-style="constructivism"] .slot-box.tier-great,
[data-style="constructivism"] .slot-filled.tier-great {
  border: none; border-left: 4px solid #706858;
  background-color: #121110; background-image: none;
  box-shadow: none; border-radius: 0;
}
[data-style="constructivism"] .slot-box.tier-good,
[data-style="constructivism"] .slot-filled.tier-good {
  border: none; border-left: 4px solid #484038;
  background-color: #121110; background-image: none;
  box-shadow: none; border-radius: 0;
}
[data-style="constructivism"] .slot-box.tier-average,
[data-style="constructivism"] .slot-filled.tier-average {
  border: none; border-left: 4px solid #484038;
  background-color: #121110; background-image: none;
  box-shadow: none; border-radius: 0;
}
[data-style="constructivism"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average),
[data-style="constructivism"] .slot-filled:not(.tier-elite):not(.tier-great):not(.tier-good) {
  border: none; border-left: 4px solid #252018;
  background-color: #121110; background-image: none;
  box-shadow: none; border-radius: 0;
}

/* ── Diamond pos cards ── */
[data-style="constructivism"] .diamond-pos-card.tier-elite {
  border: none; border-top: 2px solid #c81e14;
  background-color: #161412; background-image: none;
  border-radius: 0; box-shadow: none;
}
[data-style="constructivism"] .diamond-pos-card.tier-great {
  border: none; border-top: 2px solid #706858;
  background-color: #161412; background-image: none;
  border-radius: 0; box-shadow: none;
}
[data-style="constructivism"] .diamond-pos-card.tier-good {
  border: none; border-top: 2px solid #484038;
  background-color: #161412; background-image: none;
  border-radius: 0; box-shadow: none;
}
[data-style="constructivism"] .diamond-pos-card.tier-average {
  border: none; border-top: 2px solid #484038;
  background-color: #161412; background-image: none;
  border-radius: 0; box-shadow: none;
}

/* ── Panels — thick red rule ── */
[data-style="constructivism"] .lineup-card {
  background: #161412;
  border: none; border-top: 2px solid rgba(200,30,20,0.45);
  border-left: none; border-right: none; border-bottom: none;
  box-shadow: none; border-radius: 0;
}
[data-style="constructivism"] .void-panel {
  background: #161412;
  border: none; border-top: 1px solid rgba(200,30,20,0.25);
  border-radius: 0;
}
[data-style="constructivism"] .modal-panel {
  border: none; border-top: 3px solid #c81e14;
  border-radius: 0; box-shadow: 0 8px 32px rgba(0,0,0,0.7);
  background: #141210;
}
[data-style="constructivism"] .modal-header { border-bottom: 1px solid rgba(200,30,20,0.18); }
[data-style="constructivism"] .scoreboard,
[data-style="constructivism"] .manager-card,
[data-style="constructivism"] .highlight-card,
[data-style="constructivism"] .achievement-card,
[data-style="constructivism"] .postseason-game-tile,
[data-style="constructivism"] .postseason-mvp-tile {
  border: none; border-top: 2px solid rgba(200,30,20,0.28);
  border-radius: 0; box-shadow: none;
  background-color: #161412;
}

/* ── Buttons ── */
[data-style="constructivism"] .btn-primary {
  background: #c81e14; color: #f0e8d8;
  border: none; border-radius: 0;
  letter-spacing: 0.18em; box-shadow: none;
}
[data-style="constructivism"] .btn-primary:hover:not(:disabled) {
  background: #e02010; transform: none; box-shadow: none;
}
[data-style="constructivism"] .btn-outline {
  border-color: rgba(200,30,20,0.35); border-radius: 0; border-width: 2px;
}
[data-style="constructivism"] .draft-action-btn {
  background: transparent;
  color: #c81e14; border: 2px solid #c81e14;
  border-radius: 0; box-shadow: none; letter-spacing: 0.10em;
}
[data-style="constructivism"] .tier-great .draft-action-btn { color: #806858; border-color: #806858; }
[data-style="constructivism"] .tier-good  .draft-action-btn { color: #504030; border-color: #504030; }

/* ── Interactive states ── */
[data-style="constructivism"] .player-pos,
[data-style="constructivism"] .slot-box-pos {
  background: rgba(200,30,20,0.10);
  color: #c81e14; border-color: rgba(200,30,20,0.40);
  border-radius: 0;
}
[data-style="constructivism"] .pending-confirm {
  border-color: #c81e14; background: rgba(200,30,20,0.14);
  color: #c81e14; box-shadow: none;
}
[data-style="constructivism"] .picker-active,
[data-style="constructivism"] .swap-active {
  border-color: #c81e14; border-width: 2px; box-shadow: none;
}
[data-style="constructivism"] .natural {
  border-color: rgba(200,30,20,0.50); border-width: 2px;
  color: #c81e14; background: rgba(200,30,20,0.07);
  border-radius: 0;
}
[data-style="constructivism"] .selected {
  border-color: #c81e14; border-width: 2px;
  background: rgba(200,30,20,0.08);
  color: #c81e14; box-shadow: none;
}

/* ── Badges ── */
[data-style="constructivism"] .hof-badge,
[data-style="constructivism"] .ace-badge,
[data-style="constructivism"] .clutch-badge,
[data-style="constructivism"] .ironman-badge {
  border-radius: 0; background: #c81e14;
  border-color: #c81e14; color: #f0e8d8;
  font-family: 'Oswald', sans-serif;
  font-weight: 700; text-transform: uppercase;
}
[data-style="constructivism"] .settings-option.active {
  border-color: rgba(200,30,20,0.52);
  background: rgba(200,30,20,0.06); box-shadow: none;
}
[data-style="constructivism"] .record-banner,
[data-style="constructivism"] .postseason-champion-banner {
  border-radius: 0; border-top: 3px solid #c81e14; box-shadow: none;
}


/* ══════════════════════════════════════════════════════════════
   BACKROOMS STYLE
   Analog horror / liminal space.
   Warm near-black #0e0d08. Desaturated yellow-green.
   Courier Prime — dot-matrix filing system aesthetic.
   Cards like room classification sheets.
   Fluorescent flicker on elite shimmer-overlay.
   No glow, no gradients — institutional blankness.
   All scoped to [data-style="backrooms"].
══════════════════════════════════════════════════════════════ */

[data-style="backrooms"] {
  --tier-elite:  #c8bc78;
  --tier-great:  #909060;
  --tier-good:   #585840;
  --tier-average: #46463b;
  --gold:        #c8bc78;
  --gold-rgb:    200, 188, 120;
  --gold-bright: #d8cc88;
  --purple-rgb:  144, 144, 96;
  --green-rgb:   88, 88, 64;

  --font: 'Courier Prime', monospace;
  --void:   #0e0d08;
  --void-2: #141208;}

[data-style="backrooms"] body {
  background:
    repeating-linear-gradient(90deg, rgba(180,170,100,0.012) 0, rgba(180,170,100,0.012) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(0deg,  rgba(180,170,100,0.012) 0, rgba(180,170,100,0.012) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 59px, rgba(200,190,120,0.07) 59px, rgba(200,190,120,0.07) 60px),
    repeating-linear-gradient(0deg,  transparent 0px, transparent 59px, rgba(200,190,120,0.07) 60px, rgba(200,190,120,0.07) 61px),
    #0e0d08;
  background-attachment: fixed;
}
[data-style="backrooms"] body::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: 4px;
  pointer-events: none; z-index: 0;
  background: rgba(210,200,140,0.40);
  box-shadow: 0 0 24px rgba(210,200,140,0.14);
  animation: br-flicker-body 6s linear infinite;
}
[data-style="backrooms"] body::after {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: 45%;
  pointer-events: none; z-index: 0;
  background: linear-gradient(to bottom, rgba(210,200,140,0.05) 0%, transparent 100%);
  animation: br-flicker-body 6s linear infinite;
}
@keyframes br-flicker-body {
  0%,47%     { opacity: 1.0; }
  48%        { opacity: 0.0; }
  48.6%      { opacity: 1.0; }
  49.4%      { opacity: 0.0; }
  49.8%      { opacity: 1.0; }
  50.5%      { opacity: 0.2; }
  51%        { opacity: 1.0; }
  51.8%      { opacity: 0.0; }
  52.2%,100% { opacity: 1.0; }
}

[data-style="backrooms"] .player-name,
[data-style="backrooms"] .diamond-pos-name,
[data-style="backrooms"] .manager-name,
[data-style="backrooms"] .brand,
[data-style="backrooms"] .btn-primary,
[data-style="backrooms"] .draft-action-btn,
[data-style="backrooms"] .modal-title {
  font-family: 'Courier Prime', monospace;
  letter-spacing: 0.04em;
}

/* ── Fluorescent flicker on elite shimmer-overlay ── */
[data-style="backrooms"] .shimmer-overlay {
  background: rgba(210,200,140,0.05);
  overflow: visible;
  animation: br-flicker 6s linear infinite;
  animation-delay: var(--shimmer-offset, 0ms);
}
[data-style="backrooms"] .shimmer-overlay::before {
  display: none;
}
/* Full 6s cycle: rapid erratic cuts in first ~1s, then silent for ~5s */
@keyframes br-flicker {
  0%     { opacity: 1.0; }
  1%     { opacity: 0.0; }
  1.5%   { opacity: 1.0; }
  2.5%   { opacity: 0.0; }
  3%     { opacity: 1.0; }
  3.5%   { opacity: 0.3; }
  4%     { opacity: 1.0; }
  5%     { opacity: 0.0; }
  5.5%   { opacity: 1.0; }
  100%   { opacity: 1.0; }
}

/* ── Player cards — institutional, flat ── */
[data-style="backrooms"] .player-card.tier-elite {
  border-color: rgba(200,188,120,0.40);
  background-color: #0a0908;
  background-image: none;
  box-shadow: 0 0 8px rgba(200,188,120,0.06);
  border-radius: 0;
}
[data-style="backrooms"] .player-card.tier-great {
  border-color: rgba(160,155,90,0.28);
  background-color: #0a0908;
  background-image: none;
  border-radius: 0; box-shadow: none;
}
[data-style="backrooms"] .player-card.tier-good {
  border-color: rgba(110,105,65,0.20);
  background-color: #0a0908;
  background-image: none;
  border-radius: 0; box-shadow: none;
}
[data-style="backrooms"] .player-card.tier-average {
  border-color: rgba(110,105,65,0.20);
  background-color: #0a0908;
  background-image: none;
  border-radius: 0; box-shadow: none;
}

/* ── Expanded card ── */
[data-style="backrooms"] .expanded-draft-card.tier-elite {
  border-color: rgba(200,188,120,0.40); background-color: #0a0908;
  background-image: none; box-shadow: none; border-radius: 0;
}
[data-style="backrooms"] .expanded-draft-card.tier-great {
  border-color: rgba(160,155,90,0.28); background-color: #0a0908;
  background-image: none; border-radius: 0; box-shadow: none;
}
[data-style="backrooms"] .expanded-draft-card.tier-good {
  border-color: rgba(110,105,65,0.20); background-color: #0a0908;
  background-image: none; border-radius: 0; box-shadow: none;
}
[data-style="backrooms"] .expanded-draft-card.tier-average {
  border-color: rgba(110,105,65,0.20); background-color: #0a0908;
  background-image: none; border-radius: 0; box-shadow: none;
}

/* ── Slot boxes ── */
[data-style="backrooms"] .slot-box.tier-elite,
[data-style="backrooms"] .slot-filled.tier-elite {
  border-color: rgba(200,188,120,0.24); background-color: #0a0908;
  background-image: none; border-radius: 0;
  border-bottom: 1px solid rgba(200,188,120,0.18);
  border-top: none; border-left: none; border-right: none;
}
[data-style="backrooms"] .slot-box.tier-great,
[data-style="backrooms"] .slot-filled.tier-great {
  border-color: rgba(160,155,90,0.16); background-color: #0a0908;
  background-image: none; border-radius: 0;
  border-bottom: 1px solid rgba(160,155,90,0.12);
  border-top: none; border-left: none; border-right: none;
}
[data-style="backrooms"] .slot-box.tier-good,
[data-style="backrooms"] .slot-filled.tier-good {
  border-color: transparent; background-color: #0a0908;
  background-image: none; border-radius: 0;
  border-bottom: 1px solid rgba(110,105,65,0.10);
  border-top: none; border-left: none; border-right: none;
}
[data-style="backrooms"] .slot-box.tier-average,
[data-style="backrooms"] .slot-filled.tier-average {
  border-color: transparent; background-color: #0a0908;
  background-image: none; border-radius: 0;
  border-bottom: 1px solid rgba(110,105,65,0.10);
  border-top: none; border-left: none; border-right: none;
}
[data-style="backrooms"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average),
[data-style="backrooms"] .slot-filled:not(.tier-elite):not(.tier-great):not(.tier-good) {
  border-color: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  border-top: none; border-left: none; border-right: none;
  background-color: #0a0908; background-image: none; border-radius: 0;
}

/* ── Diamond pos cards ── */
[data-style="backrooms"] .diamond-pos-card.tier-elite {
  border-color: rgba(200,188,120,0.30); background-color: #0a0908;
  background-image: none; border-radius: 0;
}
[data-style="backrooms"] .diamond-pos-card.tier-great {
  border-color: rgba(160,155,90,0.20); background-color: #0a0908;
  background-image: none; border-radius: 0;
}
[data-style="backrooms"] .diamond-pos-card.tier-good {
  border-color: rgba(110,105,65,0.14); background-color: #0a0908;
  background-image: none; border-radius: 0;
}
[data-style="backrooms"] .diamond-pos-card.tier-average {
  border-color: rgba(110,105,65,0.14); background-color: #0a0908;
  background-image: none; border-radius: 0;
}

/* ── Panels ── */
[data-style="backrooms"] .lineup-card {
  background: #0c0b08;
  border-color: rgba(200,188,120,0.12);
  border-top: 1px solid rgba(200,188,120,0.22);
  box-shadow: none; border-radius: 0;
}
[data-style="backrooms"] .void-panel {
  background: #0c0b08;
  border-color: rgba(180,170,90,0.10);
  border-top: 1px dashed rgba(180,170,90,0.18);
  border-radius: 0;
}
[data-style="backrooms"] .modal-panel {
  border-color: rgba(200,188,120,0.22);
  border-top: 1px solid rgba(200,188,120,0.35);
  border-radius: 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.8);
  background: #0c0b08;
}
[data-style="backrooms"] .modal-header { border-bottom: 1px dashed rgba(180,170,90,0.16); }
[data-style="backrooms"] .scoreboard,
[data-style="backrooms"] .manager-card,
[data-style="backrooms"] .highlight-card,
[data-style="backrooms"] .achievement-card,
[data-style="backrooms"] .postseason-game-tile,
[data-style="backrooms"] .postseason-mvp-tile {
  background: #0c0b08;
  border-color: rgba(180,170,90,0.12);
  border-top: 1px dashed rgba(180,170,90,0.16);
  border-radius: 0; box-shadow: none;
}

/* ── Buttons ── */
[data-style="backrooms"] .btn-primary {
  background: rgba(200,188,120,0.08);
  color: rgba(200,188,120,0.70);
  border: 1px solid rgba(200,188,120,0.28);
  border-radius: 0; letter-spacing: 0.10em;
  font-style: italic; box-shadow: none;
}
[data-style="backrooms"] .btn-primary:hover:not(:disabled) {
  background: rgba(200,188,120,0.14); transform: none; box-shadow: none;
}
[data-style="backrooms"] .btn-outline {
  border-color: rgba(180,170,90,0.20); border-radius: 0;
  border-style: dashed;
}
[data-style="backrooms"] .draft-action-btn:hover:not(:disabled) {
  color: var(--void);
  background: rgba(200,188,120,0.65);
}

[data-style="backrooms"] .draft-action-btn {
  background: transparent;
  color: rgba(200,188,120,0.60);
  border: 1px solid rgba(200,188,120,0.28);
  border-radius: 0; font-style: italic; box-shadow: none;
}
[data-style="backrooms"] .tier-great .draft-action-btn {
  color: rgba(160,155,90,0.48); border-color: rgba(160,155,90,0.20);
}
[data-style="backrooms"] .tier-good .draft-action-btn {
  color: rgba(110,105,65,0.38); border-color: rgba(110,105,65,0.14);
}

/* ── Interactive states ── */
[data-style="backrooms"] .player-pos,
[data-style="backrooms"] .slot-box-pos {
  background: rgba(200,188,120,0.07);
  color: rgba(200,188,120,0.62); border-color: rgba(200,188,120,0.24);
  border-radius: 0;
}
[data-style="backrooms"] .pending-confirm {
  border-color: rgba(200,188,120,0.60); background: rgba(200,188,120,0.10);
  color: rgba(200,188,120,0.85); box-shadow: none;
}
[data-style="backrooms"] .picker-active,
[data-style="backrooms"] .swap-active {
  border-color: rgba(200,188,120,0.45); box-shadow: none;
}
[data-style="backrooms"] .natural {
  border-color: rgba(200,188,120,0.32); border-style: dashed;
  color: rgba(200,188,120,0.68); background: rgba(200,188,120,0.05);
  border-radius: 0;
}
[data-style="backrooms"] .selected {
  border-color: rgba(200,188,120,0.48);
  background: rgba(200,188,120,0.07);
  color: rgba(200,188,120,0.80); box-shadow: none;
}

/* ── Badges ── */
[data-style="backrooms"] .hof-badge,
[data-style="backrooms"] .ace-badge,
[data-style="backrooms"] .clutch-badge,
[data-style="backrooms"] .ironman-badge {
  border-radius: 0; background: rgba(200,188,120,0.10);
  border-color: rgba(200,188,120,0.30); color: rgba(200,188,120,0.72);
  font-family: 'Courier Prime', monospace; font-style: italic;
}
[data-style="backrooms"] .settings-option.active {
  border-color: rgba(200,188,120,0.38);
  background: rgba(200,188,120,0.05); box-shadow: none;
}
[data-style="backrooms"] .record-banner,
[data-style="backrooms"] .postseason-champion-banner {
  border-radius: 0; border-top: 1px solid rgba(200,188,120,0.32);
  box-shadow: none;
}


/* ══════════════════════════════════════════════════════════════
   LIQUID DNB / JAZZ JUNGLE STYLE
   Goldie / LTJ Bukem / Roni Size / 4hero.
   Warm void #070608. Amber bass elite,
   deep teal sub-bass great, burnt sienna good.
   DM Serif Display italic for names.
   Fluid radial ripple rising from bottom on elite.
   Vinyl groove dotted divider aesthetic.
   All scoped to [data-style="dnb"].
══════════════════════════════════════════════════════════════ */

[data-style="dnb"] {
  --tier-elite:  #e8a040;
  --tier-great:  #40c0b0;
  --tier-good:   #c06020;
  --tier-average: #996f53;
  --gold:        #e8a040;
  --gold-rgb:    200, 120, 20;
  --gold-bright: #f0b050;
  --purple-rgb:  0, 160, 140;
  --green-rgb:   160, 80, 30;

  --font: 'DM Serif Display', 'IBM Plex Mono', monospace;
  --void:   #070608;
  --void-2: #0e0c0a;}

[data-style="dnb"] body {
  background: #070608;
}
[data-style="dnb"] body::before,
[data-style="dnb"] body::after { display: none; }
/* Suppress default stars and rotating lines */
[data-style="dnb"] body::before,
[data-style="dnb"] body::after { display: none; }

[data-style="dnb"] .player-name,
[data-style="dnb"] .diamond-pos-name,
[data-style="dnb"] .manager-name,
[data-style="dnb"] .brand,
[data-style="dnb"] .modal-title {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  letter-spacing: 0.02em;
}

/* ── Fluid rising ripple on elite shimmer-overlay ── */
[data-style="dnb"] .shimmer-overlay::before {
  bottom: -120%; top: auto; left: 0;
  width: 100%; height: 60%;
  background: radial-gradient(ellipse 120% 60% at 50% 100%,
    rgba(200,120,20,0.14) 0%,
    rgba(200,120,20,0.06) 35%,
    rgba(200,120,20,0.02) 60%,
    transparent 100%
  );
  animation: dnb-ripple 4.0s ease-in-out infinite;
  animation-delay: var(--shimmer-offset, 0ms);
}
@keyframes dnb-ripple {
  0%   { bottom: -120%; }
  100% { bottom:  140%; }
}

/* ── Player cards — fluid radial bg on elite ── */
[data-style="dnb"] .player-card.tier-elite {
  border-color: rgba(200,120,20,0.45);
  background-color: rgba(200,120,20,0.03);
  background-image: radial-gradient(ellipse at 0% 100%, rgba(200,120,20,0.12) 0%, transparent 60%);
  box-shadow: inset 0 1px 0 rgba(200,120,20,0.25), 0 0 16px rgba(200,120,20,0.10);
  border-radius: 2px;
}
[data-style="dnb"] .player-card.tier-great {
  border-color: rgba(0,160,140,0.38);
  background-color: rgba(0,160,140,0.02);
  background-image: radial-gradient(ellipse at 0% 100%, rgba(0,160,140,0.08) 0%, transparent 55%);
  box-shadow: inset 0 1px 0 rgba(0,160,140,0.18);
  border-radius: 2px;
}
[data-style="dnb"] .player-card.tier-good {
  border-color: rgba(160,80,30,0.30);
  background-color: rgba(160,80,30,0.02);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(160,80,30,0.12);
  border-radius: 2px;
}
[data-style="dnb"] .player-card.tier-average {
  border-color: rgba(160,80,30,0.30);
  background-color: rgba(160,80,30,0.02);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(160,80,30,0.12);
  border-radius: 2px;
}

/* ── Expanded card ── */
[data-style="dnb"] .expanded-draft-card.tier-elite {
  border-color: rgba(200,120,20,0.45);
  background-image: radial-gradient(ellipse at 0% 100%, rgba(200,120,20,0.12) 0%, transparent 60%);
  box-shadow: inset 0 1px 0 rgba(200,120,20,0.25), 0 0 16px rgba(200,120,20,0.10);
  border-radius: 2px;
}
[data-style="dnb"] .expanded-draft-card.tier-great {
  border-color: rgba(0,160,140,0.38);
  background-image: radial-gradient(ellipse at 0% 100%, rgba(0,160,140,0.08) 0%, transparent 55%);
  box-shadow: inset 0 1px 0 rgba(0,160,140,0.18);
  border-radius: 2px;
}
[data-style="dnb"] .expanded-draft-card.tier-good {
  border-color: rgba(160,80,30,0.30);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(160,80,30,0.12);
  border-radius: 2px;
}
[data-style="dnb"] .expanded-draft-card.tier-average {
  border-color: rgba(160,80,30,0.30);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(160,80,30,0.12);
  border-radius: 2px;
}

/* ── Slot boxes ── */
[data-style="dnb"] .slot-box.tier-elite,
[data-style="dnb"] .slot-filled.tier-elite {
  border-color: rgba(200,120,20,0.28); background-color: rgba(200,120,20,0.04);
  background-image: none; border-radius: 2px;
}
[data-style="dnb"] .slot-box.tier-great,
[data-style="dnb"] .slot-filled.tier-great {
  border-color: rgba(0,160,140,0.22); background-color: rgba(0,160,140,0.03);
  background-image: none; border-radius: 2px;
}
[data-style="dnb"] .slot-box.tier-good,
[data-style="dnb"] .slot-filled.tier-good {
  border-color: rgba(160,80,30,0.16);
  background-image: none; border-radius: 2px;
}
[data-style="dnb"] .slot-box.tier-average,
[data-style="dnb"] .slot-filled.tier-average {
  border-color: rgba(160,80,30,0.16);
  background-image: none; border-radius: 2px;
}
[data-style="dnb"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average),
[data-style="dnb"] .slot-filled:not(.tier-elite):not(.tier-great):not(.tier-good) {
  border-color: rgba(255,255,255,0.05); border-radius: 2px;
  background-image: none;
}

/* ── Diamond pos cards ── */
[data-style="dnb"] .diamond-pos-card.tier-elite {
  border-color: rgba(200,120,20,0.35); background-color: rgba(200,120,20,0.05);
  background-image: none; border-radius: 2px;
}
[data-style="dnb"] .diamond-pos-card.tier-great {
  border-color: rgba(0,160,140,0.28); background-color: rgba(0,160,140,0.04);
  background-image: none; border-radius: 2px;
}
[data-style="dnb"] .diamond-pos-card.tier-good {
  border-color: rgba(160,80,30,0.22);
  background-image: none; border-radius: 2px;
}
[data-style="dnb"] .diamond-pos-card.tier-average {
  border-color: rgba(160,80,30,0.22);
  background-image: none; border-radius: 2px;
}

/* ── Panels ── */
[data-style="dnb"] .lineup-card {
  background: rgba(7,6,8,0.95);
  border-color: rgba(200,120,20,0.16);
  border-top: 1px solid rgba(200,120,20,0.30);
  box-shadow: none; border-radius: 2px;
}
[data-style="dnb"] .void-panel {
  background: rgba(7,6,8,0.95);
  border-color: rgba(200,120,20,0.12);
  border-top: 1px solid rgba(200,120,20,0.22);
  border-radius: 2px;
}
[data-style="dnb"] .modal-panel {
  background: rgba(7,6,8,0.95);
  border-color: rgba(200,120,20,0.22);
  border-top: 2px solid rgba(200,120,20,0.45);
  border-radius: 2px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
}
[data-style="dnb"] .modal-header { border-bottom: 1px solid rgba(200,120,20,0.14); }
[data-style="dnb"] .scoreboard,
[data-style="dnb"] .manager-card,
[data-style="dnb"] .highlight-card,
[data-style="dnb"] .achievement-card,
[data-style="dnb"] .postseason-game-tile,
[data-style="dnb"] .postseason-mvp-tile {
  background: rgba(7,6,8,0.95);
  border-color: rgba(200,120,20,0.14);
  border-top: 1px solid rgba(200,120,20,0.22);
  border-radius: 2px; box-shadow: none;
}

/* ── Buttons ── */
[data-style="dnb"] .btn-primary {
  background: transparent;
  color: rgba(200,120,20,0.88);
  border: 1px solid rgba(200,120,20,0.45);
  border-radius: 2px; letter-spacing: 0.10em;
  font-family: 'DM Serif Display', serif; font-style: italic;
  box-shadow: none;
}
[data-style="dnb"] .btn-primary:hover:not(:disabled) {
  background: rgba(200,120,20,0.10); transform: none; box-shadow: none;
}
[data-style="dnb"] .btn-outline { border-color: rgba(200,120,20,0.28); border-radius: 2px; }
[data-style="dnb"] .draft-action-btn:hover:not(:disabled) {
  color: var(--void);
}

[data-style="dnb"] .draft-action-btn {
  background: transparent;
  color: rgba(200,120,20,0.75);
  border: 1px solid rgba(200,120,20,0.38);
  border-radius: 2px;
  font-family: 'DM Serif Display', serif; font-style: italic;
  box-shadow: none; letter-spacing: 0.06em;
}
[data-style="dnb"] .tier-great .draft-action-btn {
  color: rgba(0,160,140,0.68); border-color: rgba(0,160,140,0.30);
}
[data-style="dnb"] .tier-good .draft-action-btn {
  color: rgba(160,80,30,0.58); border-color: rgba(160,80,30,0.24);
}

/* ── Interactive states ── */
[data-style="dnb"] .player-pos,
[data-style="dnb"] .slot-box-pos {
  background: rgba(200,120,20,0.08);
  color: rgba(200,120,20,0.80); border-color: rgba(200,120,20,0.32);
  border-radius: 2px;
}
[data-style="dnb"] .pending-confirm {
  border-color: rgba(200,120,20,0.80); background: rgba(200,120,20,0.14);
  color: rgba(200,120,20,0.95); box-shadow: 0 0 10px rgba(200,120,20,0.20);
}
[data-style="dnb"] .picker-active,
[data-style="dnb"] .swap-active {
  border-color: rgba(200,120,20,0.60); box-shadow: 0 0 12px rgba(200,120,20,0.15);
}
[data-style="dnb"] .natural {
  border-color: rgba(200,120,20,0.40); color: rgba(200,120,20,0.78);
  background: rgba(200,120,20,0.06); border-radius: 2px;
}
[data-style="dnb"] .selected {
  border-color: rgba(200,120,20,0.60); background: rgba(200,120,20,0.08);
  color: rgba(200,120,20,0.88); box-shadow: 0 0 10px rgba(200,120,20,0.14);
}

/* ── Badges ── */
[data-style="dnb"] .hof-badge,
[data-style="dnb"] .ace-badge,
[data-style="dnb"] .clutch-badge,
[data-style="dnb"] .ironman-badge {
  border-radius: 1px; background: rgba(200,120,20,0.12);
  border-color: rgba(200,120,20,0.35); color: rgba(200,120,20,0.85);
  font-family: 'DM Serif Display', serif; font-style: italic;
}
[data-style="dnb"] .settings-option.active {
  border-color: rgba(200,120,20,0.42);
  background: rgba(200,120,20,0.06); box-shadow: none;
}
[data-style="dnb"] .record-banner { border-radius: 2px; box-shadow: 0 0 16px rgba(200,120,20,0.14); }
[data-style="dnb"] .postseason-champion-banner {
  border-radius: 2px;
  box-shadow: 0 0 30px rgba(200,120,20,0.25), inset 0 1px 0 rgba(200,120,20,0.30);
}

/* ── Secondary element rules for 5 new themes ─────────────────────
   These complement the core card/panel/button rules already added.
   Most use rgba(var(--gold-rgb), ...) so they follow each theme's
   accent color automatically via the root variable overrides.
──────────────────────────────────────────────────────────────── */

/* ════ SCI-FI HUD secondary ════ */
[data-style="hud"] .site-header { border-bottom: 1px solid rgba(var(--gold-rgb), 0.18); }
[data-style="hud"] .roll-box { border-color: rgba(var(--gold-rgb), 0.22); border-radius: 0; }
[data-style="hud"] #sandbox-panel,
[data-style="hud"] .sandbox-section { border-color: rgba(var(--gold-rgb), 0.18); border-radius: 0; }
[data-style="hud"] .sandbox-tab { border-radius: 0; }
[data-style="hud"] .result-recap,
[data-style="hud"] .lineup-card.result-recap { border-color: rgba(var(--gold-rgb), 0.22); border-radius: 0; }
[data-style="hud"] .result-tabs { border-bottom-color: rgba(var(--gold-rgb), 0.16); }
[data-style="hud"] .result-tab.active { border-bottom-color: var(--gold); color: var(--gold); }
[data-style="hud"] .position-section { border-color: rgba(var(--gold-rgb), 0.14); border-top-color: rgba(var(--gold-rgb), 0.22); border-radius: 0; }
[data-style="hud"] .btn-reroll { border-radius: 0; }
[data-style="hud"] .btn-share-result { border-radius: 0; border-color: rgba(var(--gold-rgb), 0.40); color: var(--gold); }
[data-style="hud"] .postseason-round-games,
[data-style="hud"] .postseason-matchup { border-color: rgba(var(--gold-rgb), 0.14); }
[data-style="hud"] .postseason-qualify-banner { border-color: rgba(var(--gold-rgb), 0.22); border-radius: 0; }
[data-style="hud"] .postseason-bracket-summary { border-color: rgba(var(--gold-rgb), 0.14); }
[data-style="hud"] .highlights-ticker { border-top-color: rgba(var(--gold-rgb), 0.16); }
[data-style="hud"] .manager-banner { border-color: rgba(var(--gold-rgb), 0.16); border-radius: 0; }
[data-style="hud"] .true-story-banner { border-color: rgba(var(--gold-rgb), 0.22); border-radius: 0; }
[data-style="hud"] .compact-roster-row { border-bottom-color: rgba(var(--gold-rgb), 0.10); }
[data-style="hud"] .box-score-team-block { border-color: rgba(var(--gold-rgb), 0.12); }
[data-style="hud"] .box-score-final-line { color: rgba(var(--gold-rgb), 0.55); }
[data-style="hud"] .statcast-card { border-color: rgba(var(--gold-rgb), 0.16); border-radius: 0; }
[data-style="hud"] .twoway-badge,
[data-style="hud"] .overperform-badge,
[data-style="hud"] .underperform-badge,
[data-style="hud"] .analysis-badge { border-radius: 0; }
[data-style="hud"] .player-search-input { border-radius: 0; border-color: rgba(var(--gold-rgb), 0.22); }
[data-style="hud"] .modal-overlay { background: rgba(0,0,0,0.85); }
[data-style="hud"] .mono-caps,
[data-style="hud"] .pos-name,
[data-style="hud"] .position-section-header .pos-name { font-family: 'Share Tech Mono', monospace; letter-spacing: 0.12em; }

/* ════ RETROFUTURISM secondary ════ */
[data-style="retro"] .site-header { border-bottom: 2px solid rgba(204,48,32,0.30); }
[data-style="retro"] .roll-box { border-color: rgba(0,180,180,0.22); border-radius: 0; }
[data-style="retro"] #sandbox-panel,
[data-style="retro"] .sandbox-section { border-color: rgba(0,180,180,0.18); border-radius: 0; }
[data-style="retro"] .sandbox-tab { border-radius: 0; }
[data-style="retro"] .result-recap,
[data-style="retro"] .lineup-card.result-recap { border-color: rgba(204,48,32,0.24); border-radius: 0; }
[data-style="retro"] .result-tabs { border-bottom-color: rgba(204,48,32,0.18); }
[data-style="retro"] .result-tab.active { border-bottom-color: #cc3020; color: #cc3020; }
[data-style="retro"] .position-section { border-color: rgba(0,180,180,0.14); border-top-color: rgba(0,180,180,0.24); border-radius: 0; }
[data-style="retro"] .btn-reroll { border-radius: 0; border-color: rgba(204,48,32,0.40); color: #cc3020; }
[data-style="retro"] .btn-share-result { border-radius: 0; border-color: rgba(204,48,32,0.45); color: #cc3020; background: transparent; }
[data-style="retro"] .postseason-round-games,
[data-style="retro"] .postseason-matchup { border-color: rgba(204,48,32,0.16); }
[data-style="retro"] .postseason-qualify-banner { border-color: rgba(204,48,32,0.28); border-radius: 0; }
[data-style="retro"] .highlights-ticker { border-top-color: rgba(0,180,180,0.18); }
[data-style="retro"] .manager-banner { border-color: rgba(204,48,32,0.18); border-radius: 0; }
[data-style="retro"] .true-story-banner { border-color: rgba(204,48,32,0.24); border-radius: 0; }
[data-style="retro"] .compact-roster-row { border-bottom-color: rgba(0,180,180,0.10); }
[data-style="retro"] .box-score-team-block { border-color: rgba(204,48,32,0.14); }
[data-style="retro"] .box-score-final-line { color: #cc3020; }
[data-style="retro"] .statcast-card { border-color: rgba(0,180,180,0.16); border-radius: 0; }
[data-style="retro"] .twoway-badge,
[data-style="retro"] .overperform-badge,
[data-style="retro"] .underperform-badge,
[data-style="retro"] .analysis-badge { border-radius: 0; }
[data-style="retro"] .player-search-input { border-radius: 0; border-color: rgba(0,180,180,0.28); }
[data-style="retro"] .modal-overlay { background: rgba(0,0,0,0.80); }
[data-style="retro"] .mono-caps,
[data-style="retro"] .pos-name,
[data-style="retro"] .position-label,
[data-style="retro"] .position-section-header .pos-name {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
}

/* ════ CONSTRUCTIVISM secondary ════ */
[data-style="constructivism"] .site-header { border-bottom: 2px solid rgba(200,30,20,0.30); }
[data-style="constructivism"] .roll-box { border-color: rgba(200,30,20,0.20); border-radius: 0; }
[data-style="constructivism"] #sandbox-panel,
[data-style="constructivism"] .sandbox-section { border-color: rgba(200,30,20,0.16); border-radius: 0; background: #121110; }
[data-style="constructivism"] .sandbox-tab { border-radius: 0; }
[data-style="constructivism"] .result-recap,
[data-style="constructivism"] .lineup-card.result-recap { border-top: 2px solid rgba(200,30,20,0.40); border-radius: 0; }
[data-style="constructivism"] .result-tabs { border-bottom-color: rgba(200,30,20,0.20); }
[data-style="constructivism"] .result-tab.active { border-bottom-color: #c81e14; color: #c81e14; }
[data-style="constructivism"] .position-section { border-top: 1px solid rgba(200,30,20,0.20); border-radius: 0; }
[data-style="constructivism"] .btn-reroll { border-radius: 0; border-color: rgba(200,30,20,0.40); color: #c81e14; }
[data-style="constructivism"] .btn-share-result { border-radius: 0; border-color: rgba(200,30,20,0.45); color: #c81e14; background: transparent; }
[data-style="constructivism"] .postseason-qualify-banner { border-top: 2px solid rgba(200,30,20,0.35); border-radius: 0; }
[data-style="constructivism"] .highlights-ticker { border-top: 2px solid rgba(200,30,20,0.22); }
[data-style="constructivism"] .manager-banner { border-top: 2px solid rgba(200,30,20,0.22); border-radius: 0; }
[data-style="constructivism"] .true-story-banner { border-top: 2px solid rgba(200,30,20,0.28); border-radius: 0; }
[data-style="constructivism"] .compact-roster-row { border-bottom: 1px solid rgba(200,30,20,0.10); }
[data-style="constructivism"] .box-score-team-block { border-color: rgba(200,30,20,0.14); }
[data-style="constructivism"] .box-score-final-line { color: #c81e14; }
[data-style="constructivism"] .statcast-card { border-top: 2px solid rgba(200,30,20,0.22); background: #141210; border-radius: 0; }
[data-style="constructivism"] .twoway-badge,
[data-style="constructivism"] .overperform-badge,
[data-style="constructivism"] .underperform-badge,
[data-style="constructivism"] .analysis-badge { border-radius: 0; }
[data-style="constructivism"] .player-search-input { border-radius: 0; border-color: rgba(200,30,20,0.24); background: #121110; }
[data-style="constructivism"] .modal-overlay { background: rgba(0,0,0,0.85); }
[data-style="constructivism"] .mono-caps,
[data-style="constructivism"] .pos-name,
[data-style="constructivism"] .position-label,
[data-style="constructivism"] .position-section-header .pos-name {
  font-family: 'Oswald', sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}

/* ════ BACKROOMS secondary ════ */
[data-style="backrooms"] .site-header { border-bottom: 1px dashed rgba(200,188,120,0.18); }
[data-style="backrooms"] .roll-box { border-color: rgba(200,188,120,0.18); border-radius: 0; }
[data-style="backrooms"] #sandbox-panel,
[data-style="backrooms"] .sandbox-section { border-color: rgba(200,188,120,0.16); border-radius: 0; border-style: dashed; background: #0c0b08; }
[data-style="backrooms"] .sandbox-tab { border-radius: 0; }
[data-style="backrooms"] .result-recap,
[data-style="backrooms"] .lineup-card.result-recap { border-color: rgba(200,188,120,0.20); border-radius: 0; }
[data-style="backrooms"] .result-tabs { border-bottom-color: rgba(200,188,120,0.16); }
[data-style="backrooms"] .result-tab.active { border-bottom-color: rgba(200,188,120,0.70); color: rgba(200,188,120,0.78); }
[data-style="backrooms"] .position-section { border-color: rgba(200,188,120,0.10); border-top-color: rgba(200,188,120,0.16); border-radius: 0; }
[data-style="backrooms"] .btn-reroll { border-radius: 0; border-color: rgba(200,188,120,0.24); color: rgba(200,188,120,0.58); border-style: dashed; }
[data-style="backrooms"] .btn-share-result { border-radius: 0; border-color: rgba(200,188,120,0.24); color: rgba(200,188,120,0.58); background: transparent; font-style: italic; }
[data-style="backrooms"] .postseason-qualify-banner { border-color: rgba(200,188,120,0.18); border-radius: 0; border-style: dashed; }
[data-style="backrooms"] .highlights-ticker { border-top: 1px dashed rgba(200,188,120,0.14); }
[data-style="backrooms"] .manager-banner { border-color: rgba(200,188,120,0.14); border-radius: 0; }
[data-style="backrooms"] .true-story-banner { border-color: rgba(200,188,120,0.18); border-radius: 0; border-style: dashed; }
[data-style="backrooms"] .compact-roster-row { border-bottom: 1px dashed rgba(200,188,120,0.10); }
[data-style="backrooms"] .box-score-team-block { border-color: rgba(200,188,120,0.10); }
[data-style="backrooms"] .box-score-final-line { color: rgba(200,188,120,0.55); font-family: 'Courier Prime', monospace; }
[data-style="backrooms"] .statcast-card { border-color: rgba(200,188,120,0.14); border-radius: 0; background: #0a0908; }
[data-style="backrooms"] .twoway-badge,
[data-style="backrooms"] .overperform-badge,
[data-style="backrooms"] .underperform-badge,
[data-style="backrooms"] .analysis-badge { border-radius: 0; font-family: 'Courier Prime', monospace; font-style: italic; }
[data-style="backrooms"] .player-search-input { border-radius: 0; border-color: rgba(200,188,120,0.20); border-style: dashed; background: #0a0908; }
[data-style="backrooms"] .modal-overlay { background: rgba(0,0,0,0.88); }
[data-style="backrooms"] .mono-caps,
[data-style="backrooms"] .pos-name,
[data-style="backrooms"] .position-label,
[data-style="backrooms"] .position-section-header .pos-name {
  font-family: 'Courier Prime', monospace; letter-spacing: 0.08em;
}

/* ════ LIQUID DNB secondary ════ */
[data-style="dnb"] .site-header { border-bottom: 1px solid rgba(200,120,20,0.18); }
[data-style="dnb"] .roll-box { border-color: rgba(200,120,20,0.20); border-radius: 2px; }
[data-style="dnb"] #sandbox-panel,
[data-style="dnb"] .sandbox-section { border-color: rgba(200,120,20,0.16); border-radius: 2px; }
[data-style="dnb"] .sandbox-tab { border-radius: 2px; }
[data-style="dnb"] .result-recap,
[data-style="dnb"] .lineup-card.result-recap { border-color: rgba(200,120,20,0.20); border-radius: 2px; }
[data-style="dnb"] .result-tabs { border-bottom-color: rgba(200,120,20,0.16); }
[data-style="dnb"] .result-tab.active { border-bottom-color: rgba(200,120,20,0.80); color: rgba(200,120,20,0.85); }
[data-style="dnb"] .position-section { border-color: rgba(200,120,20,0.12); border-top-color: rgba(200,120,20,0.20); border-radius: 2px; }
[data-style="dnb"] .btn-reroll { border-radius: 2px; border-color: rgba(200,120,20,0.36); color: rgba(200,120,20,0.80); }
[data-style="dnb"] .btn-share-result { border-radius: 2px; border-color: rgba(200,120,20,0.38); color: rgba(200,120,20,0.80); background: transparent; font-family: 'DM Serif Display', serif; font-style: italic; }
[data-style="dnb"] .postseason-qualify-banner { border-color: rgba(200,120,20,0.22); border-radius: 2px; }
[data-style="dnb"] .highlights-ticker { border-top-color: rgba(200,120,20,0.16); }
[data-style="dnb"] .manager-banner { border-color: rgba(200,120,20,0.16); border-radius: 2px; }
[data-style="dnb"] .true-story-banner { border-color: rgba(200,120,20,0.20); border-radius: 2px; }
[data-style="dnb"] .compact-roster-row { border-bottom-color: rgba(200,120,20,0.10); }
[data-style="dnb"] .box-score-team-block { border-color: rgba(200,120,20,0.12); }
[data-style="dnb"] .box-score-final-line { color: rgba(200,120,20,0.60); }
[data-style="dnb"] .statcast-card { border-color: rgba(200,120,20,0.14); border-radius: 2px; }
[data-style="dnb"] .twoway-badge,
[data-style="dnb"] .overperform-badge,
[data-style="dnb"] .underperform-badge,
[data-style="dnb"] .analysis-badge { border-radius: 1px; }
[data-style="dnb"] .player-search-input { border-radius: 2px; border-color: rgba(200,120,20,0.22); }
[data-style="dnb"] .modal-overlay { background: rgba(0,0,0,0.82); }
[data-style="dnb"] .mono-caps,
[data-style="dnb"] .pos-name,
[data-style="dnb"] .position-label,
[data-style="dnb"] .position-section-header .pos-name {
  font-family: 'DM Serif Display', serif; font-style: italic; letter-spacing: 0.04em;
}

/* ── Per-theme lineup card header + group overrides ────────────────
   lineup-group-header: the collapsible section row (Starting Lineup etc)
   lineup-group-name: the label text inside it
   lineup-card-label: "Your Lineup Card" heading
   These all use var(--void-2)/var(--panel-border) in base which don't
   respond to theme changes — need explicit overrides.
──────────────────────────────────────────────────────────────── */

/* Aero */
[data-style="aero"] .lineup-group-header {
  background: rgba(14,14,14,0.70);
  backdrop-filter: blur(12px);
  border-color: rgba(255,255,255,0.12);
  border-radius: 2px;
}

/* Art Deco */
[data-style="artdeco"] .lineup-group-header {
  background: var(--void-2);
  border-color: rgba(var(--gold-rgb), 0.22);
  border-radius: 1px;
}
[data-style="artdeco"] .lineup-group-name { font-family: 'Josefin Sans', sans-serif; letter-spacing: 0.14em; }
[data-style="artdeco"] .lineup-card-label { font-family: 'Josefin Sans', sans-serif; letter-spacing: 0.18em; }

/* Viennese Secession */
[data-style="secession"] .lineup-group-header {
  background: var(--void-2);
  border-color: rgba(var(--gold-rgb), 0.18);
  border-radius: 1px;
}
[data-style="secession"] .lineup-group-name { font-family: 'Cormorant Upright', serif; letter-spacing: 0.10em; }
[data-style="secession"] .lineup-card-label { font-family: 'Cormorant Upright', serif; letter-spacing: 0.16em; }

/* Japanese Minimalism */
[data-style="jp"] .lineup-group-header {
  background: transparent;
  border-color: transparent;
  border-left: 2px solid rgba(180,40,30,0.40);
  border-radius: 0;
}
[data-style="jp"] .lineup-group-name { font-family: 'Noto Serif JP', serif; font-weight: 400; }
[data-style="jp"] .lineup-card-label { font-family: 'Noto Serif JP', serif; font-weight: 300; }

/* Synthwave */
[data-style="synthwave"] .lineup-group-header {
  background: rgba(13,0,16,0.80);
  border-color: rgba(255,0,200,0.18);
  border-radius: 1px;
}
[data-style="synthwave"] .lineup-group-name { font-family: 'Rajdhani', sans-serif; font-weight: 600; letter-spacing: 0.12em; }
[data-style="synthwave"] .lineup-card-label { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 0.18em; }

/* Cyberpunk */
[data-style="cyberpunk"] .lineup-group-header {
  background: rgba(0,0,0,0.70);
  border-color: rgba(0,180,255,0.20);
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}
[data-style="cyberpunk"] .lineup-group-name { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 0.12em; }
[data-style="cyberpunk"] .lineup-card-label { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 0.18em; }

/* Gothic */
[data-style="gothic"] .lineup-group-header {
  background: #0e0c0c;
  border-color: rgba(140,0,20,0.20);
  border-radius: 0;
}
[data-style="gothic"] .lineup-group-name { font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
[data-style="gothic"] .lineup-card-label { font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }

/* Darkwave */
[data-style="darkwave"] .lineup-group-header {
  background: rgba(6,6,15,0.80);
  border-color: rgba(120,120,180,0.14);
  border-radius: 1px;
}
[data-style="darkwave"] .lineup-group-name { font-family: 'Cormorant Upright', serif; font-weight: 300; letter-spacing: 0.10em; }
[data-style="darkwave"] .lineup-card-label { font-family: 'Cormorant Upright', serif; font-weight: 300; letter-spacing: 0.14em; }

/* Sci-Fi HUD */
[data-style="hud"] .lineup-group-header {
  background: rgba(0,0,0,0.70);
  border-color: rgba(255,160,0,0.20);
  border-radius: 0;
  font-family: 'Share Tech Mono', monospace;
}
[data-style="hud"] .lineup-group-name { font-family: 'Share Tech Mono', monospace; letter-spacing: 0.10em; }
[data-style="hud"] .lineup-card-label { font-family: 'Share Tech Mono', monospace; letter-spacing: 0.16em; }
[data-style="hud"] .lineup-group-name::before { content: '[ '; opacity: 0.5; }
[data-style="hud"] .lineup-group-name::after  { content: ' ]'; opacity: 0.5; }

/* Retrofuturism */
[data-style="retro"] .lineup-group-header {
  background: rgba(255,255,255,0.04);
  border: none;
  border-left: 3px solid rgba(204,48,32,0.55);
  border-radius: 0;
}
[data-style="retro"] .lineup-group-name { font-family: 'Josefin Sans', sans-serif; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
[data-style="retro"] .lineup-card-label { font-family: 'Josefin Sans', sans-serif; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: #cc3020; }

/* Constructivism */
[data-style="constructivism"] .lineup-group-header {
  background: #161412;
  border: none;
  border-left: 4px solid rgba(200,30,20,0.50);
  border-radius: 0;
}
[data-style="constructivism"] .lineup-group-name { font-family: 'Oswald', sans-serif; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
[data-style="constructivism"] .lineup-card-label { font-family: 'Oswald', sans-serif; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }

/* Backrooms */
[data-style="backrooms"] .lineup-group-header {
  background: #0c0b08;
  border-color: rgba(200,188,120,0.14);
  border-style: dashed;
  border-radius: 0;
}
[data-style="backrooms"] .lineup-group-name { font-family: 'Courier Prime', monospace; letter-spacing: 0.08em; }
[data-style="backrooms"] .lineup-card-label { font-family: 'Courier Prime', monospace; letter-spacing: 0.10em; font-style: italic; }

/* Liquid DNB */
[data-style="dnb"] .lineup-group-header {
  background: rgba(7,6,8,0.85);
  border-color: rgba(200,120,20,0.18);
  border-radius: 2px;
}
[data-style="dnb"] .lineup-group-name { font-family: 'DM Serif Display', serif; font-style: italic; letter-spacing: 0.06em; }
[data-style="dnb"] .lineup-card-label { font-family: 'DM Serif Display', serif; font-style: italic; letter-spacing: 0.08em; }

/* ══════════════════════════════════════════════════════════════
   GLOBAL SECONDARY SWEEP — missing coverage across all themes
   Fixes: font cascades to secondary elements, result-tab coverage
   for older themes, hardcoded lede color, manager screen elements.
   Strategy: group by "font family" cluster since most themed-font
   themes need the same classes covered.
══════════════════════════════════════════════════════════════ */

/* ── result-tab / result-tab.active — missing from 7 older themes ──
   Base already uses var(--gold) for active state so color is fine,
   but the tab itself needs border-radius:0 for sharp-edged themes. */
[data-style="artdeco"] .result-tab,
[data-style="cyberpunk"] .result-tab,
[data-style="gothic"] .result-tab,
[data-style="constructivism"] .result-tab { border-radius: 0; }

[data-style="artdeco"] .result-tab.active { border-bottom-color: var(--gold); color: var(--gold); }
[data-style="secession"] .result-tab.active { border-bottom-color: var(--gold); color: var(--gold); }
[data-style="jp"] .result-tab.active { border-bottom-color: var(--gold); color: var(--gold); }
[data-style="synthwave"] .result-tab.active { border-bottom-color: var(--gold); color: var(--gold); }
[data-style="cyberpunk"] .result-tab.active { border-bottom-color: var(--gold); color: var(--gold); }
[data-style="gothic"] .result-tab.active { border-bottom-color: var(--gold); color: var(--gold); }
[data-style="darkwave"] .result-tab.active { border-bottom-color: var(--gold); color: var(--gold); }

/* ── .lede — hardcoded #c7c4bb, should follow theme ── */
[data-style="synthwave"] .lede,
[data-style="cyberpunk"] .lede,
[data-style="gothic"] .lede,
[data-style="darkwave"] .lede,
[data-style="hud"] .lede,
[data-style="retro"] .lede,
[data-style="constructivism"] .lede,
[data-style="backrooms"] .lede,
[data-style="dnb"] .lede { color: var(--gray); }

/* ── manager-connections-line uses --green (fixed color) ──
   For dark/themed themes this can look wrong — use --tier-good instead */
[data-style="synthwave"] .manager-connections-line,
[data-style="cyberpunk"] .manager-connections-line,
[data-style="gothic"] .manager-connections-line,
[data-style="darkwave"] .manager-connections-line,
[data-style="hud"] .manager-connections-line,
[data-style="retro"] .manager-connections-line,
[data-style="constructivism"] .manager-connections-line,
[data-style="backrooms"] .manager-connections-line,
[data-style="dnb"] .manager-connections-line { color: var(--tier-good); }

/* ── aero missing manager-name, lineup-card-label, lineup-group-name ── */
[data-style="aero"] .manager-name { font-size: 17px; font-weight: 700; }
[data-style="aero"] .lineup-card-label { color: var(--gold); letter-spacing: 0.16em; }
[data-style="aero"] .lineup-group-name { color: var(--gold); }

/* ════════════════════════════════════════════════════════════════
   SECONDARY ELEMENTS — 5 new themes
   (scoreboard, manager-card, highlight-card, achievement-card,
    postseason tiles, record-banner, opp-header, badges)
════════════════════════════════════════════════════════════════ */

/* ── Industrial ───────────────────────────────────────────────── */
[data-style="industrial"] .scoreboard,
[data-style="industrial"] .manager-card,
[data-style="industrial"] .highlight-card,
[data-style="industrial"] .achievement-card,
[data-style="industrial"] .postseason-game-tile,
[data-style="industrial"] .postseason-mvp-tile {
  background: #141414;
  border-color: rgba(221,184,0,0.12);
  border-top: 2px solid rgba(221,184,0,0.28);
  border-radius: 0;
  box-shadow: none;
}
[data-style="industrial"] .record-banner,
[data-style="industrial"] .postseason-champion-banner {
  border-radius: 0;
  border-top: 2px solid rgba(221,184,0,0.55);
  box-shadow: none;
}
[data-style="industrial"] .modal-title,
[data-style="industrial"] .modal-section-label,
[data-style="industrial"] .section-label,
[data-style="industrial"] .manager-rating-line,
[data-style="industrial"] .manager-record,
[data-style="industrial"] .hc-player-name,
[data-style="industrial"] .hc-situation,
[data-style="industrial"] .ps-stats-section-label,
[data-style="industrial"] .roster-section-label,
[data-style="industrial"] .award-name,
[data-style="industrial"] .postseason-mvp-tile-name,
[data-style="industrial"] .opp-header,
[data-style="industrial"] .stat-cell-label,
[data-style="industrial"] .expanded-draft-card-tag,
[data-style="industrial"] .lineup-group-count {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
[data-style="industrial"] .hof-badge,
[data-style="industrial"] .ace-badge,
[data-style="industrial"] .clutch-badge,
[data-style="industrial"] .ironman-badge {
  border-radius: 0;
  background: rgba(221,184,0,0.10);
  border-color: rgba(221,184,0,0.32);
  color: rgba(221,184,0,0.80);
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* ── Venetian Gothic ──────────────────────────────────────────── */
[data-style="venetian"] .scoreboard,
[data-style="venetian"] .manager-card,
[data-style="venetian"] .highlight-card,
[data-style="venetian"] .achievement-card,
[data-style="venetian"] .postseason-game-tile,
[data-style="venetian"] .postseason-mvp-tile {
  background: #060f16;
  border-color: rgba(200,150,14,0.10);
  border-top: 1px solid rgba(200,150,14,0.25);
  border-radius: 0;
  box-shadow: none;
}
[data-style="venetian"] .record-banner,
[data-style="venetian"] .postseason-champion-banner {
  border-radius: 0;
  border-top: 2px solid rgba(200,150,14,0.50);
  box-shadow: none;
}
[data-style="venetian"] .modal-title,
[data-style="venetian"] .modal-section-label,
[data-style="venetian"] .section-label,
[data-style="venetian"] .manager-rating-line,
[data-style="venetian"] .manager-record,
[data-style="venetian"] .hc-player-name,
[data-style="venetian"] .hc-situation,
[data-style="venetian"] .ps-stats-section-label,
[data-style="venetian"] .roster-section-label,
[data-style="venetian"] .award-name,
[data-style="venetian"] .postseason-mvp-tile-name,
[data-style="venetian"] .opp-header,
[data-style="venetian"] .stat-cell-label,
[data-style="venetian"] .expanded-draft-card-tag,
[data-style="venetian"] .lineup-group-count {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-style="venetian"] .hof-badge,
[data-style="venetian"] .ace-badge,
[data-style="venetian"] .clutch-badge,
[data-style="venetian"] .ironman-badge {
  border-radius: 0;
  background: rgba(200,150,14,0.08);
  border-color: rgba(200,150,14,0.30);
  color: rgba(200,150,14,0.80);
  font-family: 'Cinzel', serif;
  letter-spacing: 0.08em;
}

/* ── Baroque Rome ─────────────────────────────────────────────── */
[data-style="baroque"] .scoreboard,
[data-style="baroque"] .manager-card,
[data-style="baroque"] .highlight-card,
[data-style="baroque"] .achievement-card,
[data-style="baroque"] .postseason-game-tile,
[data-style="baroque"] .postseason-mvp-tile {
  background: #161008;
  border-color: rgba(224,192,80,0.10);
  border-top: 2px solid rgba(224,192,80,0.24);
  border-radius: 0;
  box-shadow: none;
}
[data-style="baroque"] .record-banner,
[data-style="baroque"] .postseason-champion-banner {
  border-radius: 0;
  border-top: 2px solid rgba(224,192,80,0.52);
  box-shadow: none;
}
[data-style="baroque"] .modal-title,
[data-style="baroque"] .modal-section-label,
[data-style="baroque"] .section-label,
[data-style="baroque"] .manager-rating-line,
[data-style="baroque"] .manager-record,
[data-style="baroque"] .hc-player-name,
[data-style="baroque"] .hc-situation,
[data-style="baroque"] .ps-stats-section-label,
[data-style="baroque"] .roster-section-label,
[data-style="baroque"] .award-name,
[data-style="baroque"] .postseason-mvp-tile-name,
[data-style="baroque"] .opp-header,
[data-style="baroque"] .stat-cell-label,
[data-style="baroque"] .expanded-draft-card-tag,
[data-style="baroque"] .lineup-group-count {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  letter-spacing: 0.04em;
}
[data-style="baroque"] .hof-badge,
[data-style="baroque"] .ace-badge,
[data-style="baroque"] .clutch-badge,
[data-style="baroque"] .ironman-badge {
  border-radius: 0;
  background: rgba(224,192,80,0.08);
  border-color: rgba(224,192,80,0.30);
  color: rgba(224,192,80,0.82);
  font-family: 'IM Fell English', serif;
  font-style: italic;
}

/* ── VHS / Analog ─────────────────────────────────────────────── */
[data-style="vhs"] .scoreboard,
[data-style="vhs"] .manager-card,
[data-style="vhs"] .highlight-card,
[data-style="vhs"] .achievement-card,
[data-style="vhs"] .postseason-game-tile,
[data-style="vhs"] .postseason-mvp-tile {
  background: #160e18;
  border-color: rgba(255,80,160,0.10);
  border-left: 2px solid rgba(255,80,160,0.28);
  border-radius: 0;
  box-shadow: none;
}
[data-style="vhs"] .record-banner,
[data-style="vhs"] .postseason-champion-banner {
  border-radius: 0;
  border-left: 2px solid rgba(255,80,160,0.55);
  box-shadow: none;
}
[data-style="vhs"] .modal-title,
[data-style="vhs"] .modal-section-label,
[data-style="vhs"] .section-label,
[data-style="vhs"] .manager-rating-line,
[data-style="vhs"] .manager-record,
[data-style="vhs"] .hc-player-name,
[data-style="vhs"] .hc-situation,
[data-style="vhs"] .ps-stats-section-label,
[data-style="vhs"] .roster-section-label,
[data-style="vhs"] .award-name,
[data-style="vhs"] .postseason-mvp-tile-name,
[data-style="vhs"] .opp-header,
[data-style="vhs"] .stat-cell-label,
[data-style="vhs"] .expanded-draft-card-tag,
[data-style="vhs"] .lineup-group-count {
  font-family: 'VT323', monospace;
  letter-spacing: 0.05em;
  font-size: 1.05em;
}
[data-style="vhs"] .hof-badge,
[data-style="vhs"] .ace-badge,
[data-style="vhs"] .clutch-badge,
[data-style="vhs"] .ironman-badge {
  border-radius: 0;
  background: rgba(255,80,160,0.08);
  border-color: rgba(255,80,160,0.30);
  color: rgba(255,80,160,0.82);
  font-family: 'VT323', monospace;
  letter-spacing: 0.05em;
  font-size: 1.05em;
}

/* ── Neon Vegas / Kabukicho ───────────────────────────────────── */
[data-style="neon"] .scoreboard,
[data-style="neon"] .manager-card,
[data-style="neon"] .highlight-card,
[data-style="neon"] .achievement-card,
[data-style="neon"] .postseason-game-tile,
[data-style="neon"] .postseason-mvp-tile {
  background: #080410;
  border-color: rgba(255,20,120,0.12);
  border-left: 2px solid rgba(255,20,120,0.30);
  border-radius: 1px;
  box-shadow: none;
}
[data-style="neon"] .record-banner,
[data-style="neon"] .postseason-champion-banner {
  border-radius: 1px;
  border-color: rgba(255,20,120,0.35);
  box-shadow: 0 0 20px rgba(255,20,120,0.18), 0 0 40px rgba(96,64,255,0.08);
}
[data-style="neon"] .modal-title,
[data-style="neon"] .modal-section-label,
[data-style="neon"] .section-label,
[data-style="neon"] .manager-rating-line,
[data-style="neon"] .manager-record,
[data-style="neon"] .hc-player-name,
[data-style="neon"] .hc-situation,
[data-style="neon"] .ps-stats-section-label,
[data-style="neon"] .roster-section-label,
[data-style="neon"] .award-name,
[data-style="neon"] .postseason-mvp-tile-name,
[data-style="neon"] .opp-header,
[data-style="neon"] .stat-cell-label,
[data-style="neon"] .expanded-draft-card-tag,
[data-style="neon"] .lineup-group-count {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-style="neon"] .hof-badge,
[data-style="neon"] .ace-badge,
[data-style="neon"] .clutch-badge,
[data-style="neon"] .ironman-badge {
  border-radius: 1px;
  background: rgba(255,20,120,0.10);
  border-color: rgba(255,20,120,0.35);
  color: rgba(255,20,120,0.88);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 0 0 6px rgba(255,20,120,0.45);
}


/* ══════════════════════════════════════════════════════════════
   FONT CASCADE GROUPS
   Themes with custom fonts need those fonts applied to ALL
   text-bearing secondary elements, not just player-name.
   Grouped by font family to avoid duplication.
══════════════════════════════════════════════════════════════ */

/* ── Rajdhani group: Synthwave + Cyberpunk ── */
[data-style="synthwave"] .modal-title,
[data-style="synthwave"] .modal-section-label,
[data-style="synthwave"] .section-label,
[data-style="synthwave"] .manager-rating-line,
[data-style="synthwave"] .manager-record,
[data-style="synthwave"] .hc-player-name,
[data-style="synthwave"] .hc-situation,
[data-style="synthwave"] .ps-stats-section-label,
[data-style="synthwave"] .roster-section-label,
[data-style="synthwave"] .award-name,
[data-style="synthwave"] .postseason-mvp-tile-name,
[data-style="synthwave"] .opp-header,
[data-style="synthwave"] .stat-cell-label,
[data-style="synthwave"] .expanded-draft-card-tag,
[data-style="synthwave"] .lineup-group-count,
[data-style="cyberpunk"] .modal-title,
[data-style="cyberpunk"] .modal-section-label,
[data-style="cyberpunk"] .section-label,
[data-style="cyberpunk"] .manager-rating-line,
[data-style="cyberpunk"] .manager-record,
[data-style="cyberpunk"] .hc-player-name,
[data-style="cyberpunk"] .hc-situation,
[data-style="cyberpunk"] .ps-stats-section-label,
[data-style="cyberpunk"] .roster-section-label,
[data-style="cyberpunk"] .award-name,
[data-style="cyberpunk"] .postseason-mvp-tile-name,
[data-style="cyberpunk"] .opp-header,
[data-style="cyberpunk"] .stat-cell-label,
[data-style="cyberpunk"] .expanded-draft-card-tag,
[data-style="cyberpunk"] .lineup-group-count {
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.08em;
}

/* ── Cinzel group: Gothic ── */
[data-style="gothic"] .modal-title,
[data-style="gothic"] .modal-section-label,
[data-style="gothic"] .section-label,
[data-style="gothic"] .manager-rating-line,
[data-style="gothic"] .manager-record,
[data-style="gothic"] .hc-player-name,
[data-style="gothic"] .hc-situation,
[data-style="gothic"] .ps-stats-section-label,
[data-style="gothic"] .roster-section-label,
[data-style="gothic"] .award-name,
[data-style="gothic"] .postseason-mvp-tile-name,
[data-style="gothic"] .opp-header,
[data-style="gothic"] .stat-cell-label,
[data-style="gothic"] .expanded-draft-card-tag,
[data-style="gothic"] .lineup-group-count {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* ── Cormorant Upright group: Secession + Darkwave ── */
[data-style="secession"] .modal-title,
[data-style="secession"] .modal-section-label,
[data-style="secession"] .section-label,
[data-style="secession"] .manager-rating-line,
[data-style="secession"] .manager-record,
[data-style="secession"] .hc-player-name,
[data-style="secession"] .hc-situation,
[data-style="secession"] .ps-stats-section-label,
[data-style="secession"] .roster-section-label,
[data-style="secession"] .award-name,
[data-style="secession"] .postseason-mvp-tile-name,
[data-style="secession"] .opp-header,
[data-style="secession"] .stat-cell-label,
[data-style="secession"] .expanded-draft-card-tag,
[data-style="secession"] .lineup-group-count,
[data-style="darkwave"] .modal-title,
[data-style="darkwave"] .modal-section-label,
[data-style="darkwave"] .section-label,
[data-style="darkwave"] .manager-rating-line,
[data-style="darkwave"] .manager-record,
[data-style="darkwave"] .hc-player-name,
[data-style="darkwave"] .hc-situation,
[data-style="darkwave"] .ps-stats-section-label,
[data-style="darkwave"] .roster-section-label,
[data-style="darkwave"] .award-name,
[data-style="darkwave"] .postseason-mvp-tile-name,
[data-style="darkwave"] .opp-header,
[data-style="darkwave"] .stat-cell-label,
[data-style="darkwave"] .expanded-draft-card-tag,
[data-style="darkwave"] .lineup-group-count {
  font-family: 'Cormorant Upright', serif;
  font-weight: 300;
  letter-spacing: 0.08em;
}

/* ── Josefin Sans group: Art Deco + Retrofuturism ── */
[data-style="artdeco"] .modal-title,
[data-style="artdeco"] .modal-section-label,
[data-style="artdeco"] .section-label,
[data-style="artdeco"] .manager-rating-line,
[data-style="artdeco"] .manager-record,
[data-style="artdeco"] .hc-player-name,
[data-style="artdeco"] .hc-situation,
[data-style="artdeco"] .ps-stats-section-label,
[data-style="artdeco"] .roster-section-label,
[data-style="artdeco"] .award-name,
[data-style="artdeco"] .postseason-mvp-tile-name,
[data-style="artdeco"] .opp-header,
[data-style="artdeco"] .stat-cell-label,
[data-style="artdeco"] .expanded-draft-card-tag,
[data-style="artdeco"] .lineup-group-count,
[data-style="retro"] .modal-title,
[data-style="retro"] .modal-section-label,
[data-style="retro"] .section-label,
[data-style="retro"] .manager-rating-line,
[data-style="retro"] .manager-record,
[data-style="retro"] .hc-player-name,
[data-style="retro"] .hc-situation,
[data-style="retro"] .ps-stats-section-label,
[data-style="retro"] .roster-section-label,
[data-style="retro"] .award-name,
[data-style="retro"] .postseason-mvp-tile-name,
[data-style="retro"] .opp-header,
[data-style="retro"] .stat-cell-label,
[data-style="retro"] .expanded-draft-card-tag,
[data-style="retro"] .lineup-group-count {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Oswald group: Constructivism ── */
[data-style="constructivism"] .modal-title,
[data-style="constructivism"] .modal-section-label,
[data-style="constructivism"] .section-label,
[data-style="constructivism"] .manager-rating-line,
[data-style="constructivism"] .manager-record,
[data-style="constructivism"] .hc-player-name,
[data-style="constructivism"] .hc-situation,
[data-style="constructivism"] .ps-stats-section-label,
[data-style="constructivism"] .roster-section-label,
[data-style="constructivism"] .award-name,
[data-style="constructivism"] .postseason-mvp-tile-name,
[data-style="constructivism"] .opp-header,
[data-style="constructivism"] .stat-cell-label,
[data-style="constructivism"] .expanded-draft-card-tag,
[data-style="constructivism"] .lineup-group-count {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Courier Prime group: Backrooms ── */
[data-style="backrooms"] .modal-title,
[data-style="backrooms"] .modal-section-label,
[data-style="backrooms"] .section-label,
[data-style="backrooms"] .manager-rating-line,
[data-style="backrooms"] .manager-record,
[data-style="backrooms"] .hc-player-name,
[data-style="backrooms"] .hc-situation,
[data-style="backrooms"] .ps-stats-section-label,
[data-style="backrooms"] .roster-section-label,
[data-style="backrooms"] .award-name,
[data-style="backrooms"] .postseason-mvp-tile-name,
[data-style="backrooms"] .opp-header,
[data-style="backrooms"] .stat-cell-label,
[data-style="backrooms"] .expanded-draft-card-tag,
[data-style="backrooms"] .lineup-group-count {
  font-family: 'Courier Prime', monospace;
  letter-spacing: 0.06em;
}

/* ── DM Serif Display group: Liquid DNB ── */
[data-style="dnb"] .modal-title,
[data-style="dnb"] .modal-section-label,
[data-style="dnb"] .section-label,
[data-style="dnb"] .manager-rating-line,
[data-style="dnb"] .manager-record,
[data-style="dnb"] .hc-player-name,
[data-style="dnb"] .hc-situation,
[data-style="dnb"] .ps-stats-section-label,
[data-style="dnb"] .roster-section-label,
[data-style="dnb"] .award-name,
[data-style="dnb"] .postseason-mvp-tile-name,
[data-style="dnb"] .opp-header,
[data-style="dnb"] .stat-cell-label,
[data-style="dnb"] .expanded-draft-card-tag,
[data-style="dnb"] .lineup-group-count {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  letter-spacing: 0.04em;
}

/* ── Noto Serif JP group: JP Minimalism ── */
[data-style="jp"] .modal-title,
[data-style="jp"] .modal-section-label,
[data-style="jp"] .section-label,
[data-style="jp"] .manager-rating-line,
[data-style="jp"] .manager-record,
[data-style="jp"] .hc-player-name,
[data-style="jp"] .hc-situation,
[data-style="jp"] .ps-stats-section-label,
[data-style="jp"] .roster-section-label,
[data-style="jp"] .award-name,
[data-style="jp"] .postseason-mvp-tile-name,
[data-style="jp"] .opp-header,
[data-style="jp"] .expanded-draft-card-tag,
[data-style="jp"] .lineup-group-count {
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  letter-spacing: 0.04em;
}

/* ── Share Tech Mono group: Sci-Fi HUD ── */
[data-style="hud"] .modal-title,
[data-style="hud"] .modal-section-label,
[data-style="hud"] .section-label,
[data-style="hud"] .manager-rating-line,
[data-style="hud"] .manager-record,
[data-style="hud"] .hc-player-name,
[data-style="hud"] .hc-situation,
[data-style="hud"] .ps-stats-section-label,
[data-style="hud"] .roster-section-label,
[data-style="hud"] .award-name,
[data-style="hud"] .postseason-mvp-tile-name,
[data-style="hud"] .opp-header,
[data-style="hud"] .stat-cell-label,
[data-style="hud"] .expanded-draft-card-tag,
[data-style="hud"] .lineup-group-count {
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 0.10em;
}

/* ══════════════════════════════════════════════════════════════
   MANAGER SCREEN — specific secondary elements
   manager-card-body background, manager-name-row border
══════════════════════════════════════════════════════════════ */

/* Themes with custom fonts need manager card body font set */
[data-style="gothic"] .manager-card-body,
[data-style="gothic"] .manager-card-info {
  background: #080608; font-family: 'Cinzel', serif; }
[data-style="darkwave"] .manager-card-body,
[data-style="darkwave"] .manager-card-info {
  background: rgba(6,6,15,0.95); font-family: 'Cormorant Upright', serif; font-weight: 300; }
[data-style="backrooms"] .manager-card-body,
[data-style="backrooms"] .manager-card-info {
  background: #0c0b08; font-family: 'Courier Prime', monospace; }
[data-style="dnb"] .manager-card-body,
[data-style="dnb"] .manager-card-info {
  background: rgba(7,6,8,0.95); font-family: 'DM Serif Display', serif; font-style: italic; }
[data-style="retro"] .manager-card-body,
[data-style="retro"] .manager-card-info {
  background: rgba(12,14,20,0.95); font-family: 'Josefin Sans', sans-serif; }
[data-style="constructivism"] .manager-card-body,
[data-style="constructivism"] .manager-card-info {
  background: #161412; font-family: 'Oswald', sans-serif; }

/* ══════════════════════════════════════════════════════════════
   HC (highlight card) body text — needs font cascade too
══════════════════════════════════════════════════════════════ */
[data-style="gothic"] .hc-description,
[data-style="gothic"] .hc-player-meta { font-family: 'Cinzel', serif; letter-spacing: 0.06em; }
[data-style="darkwave"] .hc-description,
[data-style="darkwave"] .hc-player-meta { font-family: 'Cormorant Upright', serif; font-weight: 300; }
[data-style="backrooms"] .hc-description,
[data-style="backrooms"] .hc-player-meta { font-family: 'Courier Prime', monospace; font-style: italic; }
[data-style="dnb"] .hc-description,
[data-style="dnb"] .hc-player-meta { font-family: 'DM Serif Display', serif; font-style: italic; }
[data-style="retro"] .hc-description,
[data-style="retro"] .hc-player-meta { font-family: 'Josefin Sans', sans-serif; }
[data-style="constructivism"] .hc-description,
[data-style="constructivism"] .hc-player-meta { font-family: 'Oswald', sans-serif; }
[data-style="synthwave"] .hc-description,
[data-style="synthwave"] .hc-player-meta { font-family: 'Rajdhani', sans-serif; }
[data-style="cyberpunk"] .hc-description,
[data-style="cyberpunk"] .hc-player-meta { font-family: 'Rajdhani', sans-serif; }

/* ══════════════════════════════════════════════════════════════
   dcard-circle — uses var(--panel) background which is always
   near-black regardless of theme. Make it follow void-2.
══════════════════════════════════════════════════════════════ */
[data-style="retro"] .dcard-circle { background: rgba(255,255,255,0.04); border-color: var(--gold); }
[data-style="constructivism"] .dcard-circle { background: #161412; border-color: var(--gold); }
[data-style="backrooms"] .dcard-circle { background: #0a0908; border-color: var(--gold); }

/* ── Per-theme roll-card backgrounds (shared panel rule override) ── */
[data-style="aero"] .roll-card { background: rgba(14,14,14,0.70); }
[data-style="artdeco"] .roll-card { background: var(--void); }
[data-style="secession"] .roll-card { background: var(--void); }
[data-style="jp"] .roll-card { background: var(--void); }
[data-style="synthwave"] .roll-card { background: rgba(13,0,16,0.95); }
[data-style="cyberpunk"] .roll-card { background: rgba(3,8,20,0.95); }
[data-style="gothic"] .roll-card { background: #080608; }
[data-style="darkwave"] .roll-card { background: rgba(6,6,15,0.95); }
[data-style="hud"] .roll-card { background: rgba(2,5,8,0.95); }
[data-style="retro"] .roll-card { background: rgba(12,14,20,0.95); }
[data-style="constructivism"] .roll-card { background: #161412; }
[data-style="backrooms"] .roll-card { background: #0c0b08; }
[data-style="dnb"] .roll-card { background: rgba(7,6,8,0.95); }
[data-style="mint"] .roll-card { background: rgba(26,12,5,.96); }

/* ── Era chip decade font — force neutral numerals ──────────────────
   Elegant serif fonts (Cormorant, Noto Serif JP, DM Serif Display)
   use oldstyle numerals that sit below the baseline, making "2020S"
   look wrong. Override chip-decade to use a clean neutral font for
   these themes so era labels read clearly. ── */
[data-style="darkwave"] .chip-decade,
[data-style="secession"] .chip-decade,
[data-style="jp"] .chip-decade,
[data-style="dnb"] .chip-decade,
[data-style="mint"] .chip-decade {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  letter-spacing: 0.08em;
}

/* ── Slot-box inner element font overrides ─────────────────────────
   slot-box-name, slot-box-stats, slot-box-plus, slot-box-tag,
   slot-box-pos, real-awards-line, teammates-line all have
   text-transform:none and letter-spacing:normal in base which don't
   break inheritance — but browser font matching can sometimes not
   cascade var(--font) through certain element chains. Adding explicit
   overrides per themed-font theme to guarantee correct rendering.
──────────────────────────────────────────────────────────────── */

/* Rajdhani: Synthwave + Cyberpunk */
[data-style="synthwave"] .slot-box-name,
[data-style="synthwave"] .slot-box-stats,
[data-style="synthwave"] .slot-box-plus,
[data-style="synthwave"] .slot-box-tag,
[data-style="synthwave"] .real-awards-line,
[data-style="synthwave"] .teammates-line,
[data-style="cyberpunk"] .slot-box-name,
[data-style="cyberpunk"] .slot-box-stats,
[data-style="cyberpunk"] .slot-box-plus,
[data-style="cyberpunk"] .slot-box-tag,
[data-style="cyberpunk"] .real-awards-line,
[data-style="cyberpunk"] .teammates-line {
  font-family: 'Rajdhani', sans-serif;
}

/* Cinzel: Gothic */
[data-style="gothic"] .slot-box-name,
[data-style="gothic"] .slot-box-stats,
[data-style="gothic"] .slot-box-plus,
[data-style="gothic"] .slot-box-tag,
[data-style="gothic"] .real-awards-line,
[data-style="gothic"] .teammates-line {
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Cormorant Upright: Secession + Darkwave */
[data-style="secession"] .slot-box-name,
[data-style="secession"] .slot-box-stats,
[data-style="secession"] .slot-box-plus,
[data-style="secession"] .slot-box-tag,
[data-style="secession"] .real-awards-line,
[data-style="secession"] .teammates-line,
[data-style="darkwave"] .slot-box-name,
[data-style="darkwave"] .slot-box-stats,
[data-style="darkwave"] .slot-box-plus,
[data-style="darkwave"] .slot-box-tag,
[data-style="darkwave"] .real-awards-line,
[data-style="darkwave"] .teammates-line {
  font-family: 'Cormorant Upright', serif;
  font-weight: 300;
}

/* Josefin Sans: Art Deco + Retrofuturism */
[data-style="artdeco"] .slot-box-name,
[data-style="artdeco"] .slot-box-stats,
[data-style="artdeco"] .slot-box-plus,
[data-style="artdeco"] .slot-box-tag,
[data-style="artdeco"] .real-awards-line,
[data-style="artdeco"] .teammates-line,
[data-style="retro"] .slot-box-name,
[data-style="retro"] .slot-box-stats,
[data-style="retro"] .slot-box-plus,
[data-style="retro"] .slot-box-tag,
[data-style="retro"] .real-awards-line,
[data-style="retro"] .teammates-line {
  font-family: 'Josefin Sans', sans-serif;
}

/* Noto Serif JP: Japanese Minimalism */
[data-style="jp"] .slot-box-name,
[data-style="jp"] .slot-box-stats,
[data-style="jp"] .slot-box-plus,
[data-style="jp"] .slot-box-tag,
[data-style="jp"] .real-awards-line,
[data-style="jp"] .teammates-line {
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
}

/* Oswald: Constructivism */
[data-style="constructivism"] .slot-box-name,
[data-style="constructivism"] .slot-box-stats,
[data-style="constructivism"] .slot-box-plus,
[data-style="constructivism"] .slot-box-tag,
[data-style="constructivism"] .real-awards-line,
[data-style="constructivism"] .teammates-line {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

/* Courier Prime: Backrooms */
[data-style="backrooms"] .slot-box-name,
[data-style="backrooms"] .slot-box-stats,
[data-style="backrooms"] .slot-box-plus,
[data-style="backrooms"] .slot-box-tag,
[data-style="backrooms"] .real-awards-line,
[data-style="backrooms"] .teammates-line {
  font-family: 'Courier Prime', monospace;
}

/* DM Serif Display: Liquid DNB */
[data-style="dnb"] .slot-box-name,
[data-style="dnb"] .slot-box-stats,
[data-style="dnb"] .slot-box-plus,
[data-style="dnb"] .slot-box-tag,
[data-style="dnb"] .real-awards-line,
[data-style="dnb"] .teammates-line {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
}

/* Share Tech Mono: Sci-Fi HUD */
[data-style="hud"] .slot-box-name,
[data-style="hud"] .slot-box-stats,
[data-style="hud"] .slot-box-plus,
[data-style="hud"] .slot-box-tag,
[data-style="hud"] .real-awards-line,
[data-style="hud"] .teammates-line {
  font-family: 'Share Tech Mono', monospace;
}

/* Nunito + DM Serif Display: Mint (MintyCafe) */
[data-style="mint"] .slot-box-name { font-family: 'DM Serif Display', serif; }
[data-style="mint"] .slot-box-stats,
[data-style="mint"] .slot-box-plus,
[data-style="mint"] .slot-box-tag,
[data-style="mint"] .real-awards-line,
[data-style="mint"] .teammates-line { font-family: 'Nunito', sans-serif; }

/* ══════════════════════════════════════════════════════════════
   DAFT PUNK / RAM STYLE
   Random Access Memories. Giorgio, Moroder, 70s studio warmth.
   Warm near-black #0e0b08. Amber gold elite, burgundy rose
   great, muted slate good. Playfair Display bold serif.
   Body: slow disco colour-shifting stage light spots.
   Elite cards: silver/multi-colour sequin sparkle effect —
   three layers (fabric dots, always-on base, two animated
   sparkle layers at offset phases, never simultaneously dark).
   VU meter tick strip on panel top.
   All scoped to [data-style="ram"].
══════════════════════════════════════════════════════════════ */

[data-style="ram"] {
  --tier-elite:  #c8a050;
  --tier-great:  #c06878;
  --tier-good:   #607880;
  --tier-average: #586266;
  --gold:        #c8a050;
  --gold-rgb:    200, 160, 80;
  --gold-bright: #e0b860;
  --purple-rgb:  192, 104, 120;
  --green-rgb:   96, 120, 128;
  --font:        'Playfair Display', 'IBM Plex Mono', monospace;
  --void:        #0e0b08;
  --void-2:      #161210;
}

/* Disco body — slow multi-colour stage light drift */
[data-style="ram"] body {
  background: #0e0b08;
  overflow: hidden;
}
/* Disco colour spots — each is its own pseudo or we use ::before + ::after for 2 */
/* Full 5-spot implementation needs separate elements in HTML — handled via ::before/::after for 2 spots */
[data-style="ram"] body::before {
  content: ''; position: fixed; pointer-events: none; z-index: 0;
  width: 55%; height: 55%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(220,60,180,0.09) 0%, transparent 70%);
  animation: ram-spot-pink 22s ease-in-out infinite;
}
[data-style="ram"] body::after {
  content: ''; position: fixed; pointer-events: none; z-index: 0;
  width: 55%; height: 55%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(60,120,220,0.08) 0%, transparent 70%);
  animation: ram-spot-blue 18s ease-in-out infinite;
  animation-delay: -4s;
}
@keyframes ram-spot-pink { 0%{left:20%;top:30%} 20%{left:75%;top:15%} 40%{left:45%;top:85%} 60%{left:30%;top:60%} 80%{left:85%;top:40%} 100%{left:20%;top:30%} }
@keyframes ram-spot-blue { 0%{left:80%;top:20%} 20%{left:15%;top:65%} 40%{left:65%;top:45%} 60%{left:70%;top:80%} 80%{left:25%;top:15%} 100%{left:80%;top:20%} }
@keyframes ram-disco {
  0%   { background:
    radial-gradient(ellipse at 20% 30%, rgba(220,60,180,0.06) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 20%, rgba(60,120,220,0.05) 0%, transparent 35%),
    radial-gradient(ellipse at 60% 80%, rgba(220,160,40,0.05) 0%, transparent 40%),
    radial-gradient(ellipse at 10% 80%, rgba(40,200,180,0.04) 0%, transparent 35%),
    radial-gradient(ellipse at 90% 70%, rgba(200,80,60,0.04) 0%, transparent 30%),
    #0e0b08; }
  33%  { background:
    radial-gradient(ellipse at 75% 15%, rgba(220,60,180,0.06) 0%, transparent 40%),
    radial-gradient(ellipse at 15% 70%, rgba(60,120,220,0.05) 0%, transparent 35%),
    radial-gradient(ellipse at 85% 55%, rgba(220,160,40,0.05) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 20%, rgba(40,200,180,0.04) 0%, transparent 35%),
    radial-gradient(ellipse at 30% 85%, rgba(200,80,60,0.04) 0%, transparent 30%),
    #0e0b08; }
  66%  { background:
    radial-gradient(ellipse at 45% 85%, rgba(220,60,180,0.06) 0%, transparent 40%),
    radial-gradient(ellipse at 65% 45%, rgba(60,120,220,0.05) 0%, transparent 35%),
    radial-gradient(ellipse at 20% 20%, rgba(220,160,40,0.05) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 65%, rgba(40,200,180,0.04) 0%, transparent 35%),
    radial-gradient(ellipse at 55% 10%, rgba(200,80,60,0.04) 0%, transparent 30%),
    #0e0b08; }
  100% { background:
    radial-gradient(ellipse at 30% 60%, rgba(220,60,180,0.06) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 80%, rgba(60,120,220,0.05) 0%, transparent 35%),
    radial-gradient(ellipse at 40% 30%, rgba(220,160,40,0.05) 0%, transparent 40%),
    radial-gradient(ellipse at 20% 10%, rgba(40,200,180,0.04) 0%, transparent 35%),
    radial-gradient(ellipse at 85% 40%, rgba(200,80,60,0.04) 0%, transparent 30%),
    #0e0b08; }
}

/* ── Typography ── */
[data-style="ram"] .player-name,
[data-style="ram"] .diamond-pos-name,
[data-style="ram"] .manager-name,
[data-style="ram"] .brand,
[data-style="ram"] .modal-title,
[data-style="ram"] .section-label,
[data-style="ram"] .lineup-group-name,
[data-style="ram"] .lineup-card-label {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* ── Sequin sparkle on elite shimmer-overlay ──
   Three layers injected as separate DOM elements via JS shimmer-overlay.
   CSS handles fabric + base + two animated sparkle layers. ── */
[data-style="ram"] .shimmer-overlay {
  overflow: visible;
  background: none;
  animation: none;
}
[data-style="ram"] .shimmer-overlay::before {
  /* Layer A — 28 sparkle pinpoints, bright→dim 2.4s */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 1px 1px at 53% 50%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 19% 13%, rgba(255,245,215,0.91) 0%, transparent 100%),
    radial-gradient(ellipse 2px 2px at 91% 70%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 55% 94%, rgba(210,245,255,0.96) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 24% 74%, rgba(255,245,215,0.94) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 88% 13%, rgba(215,235,255,0.81) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 73%  2%, rgba(215,235,255,1.00) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 70% 12%, rgba(215,235,255,0.84) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 61%  8%, rgba(255,245,215,0.99) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 93% 22%, rgba(215,235,255,1.00) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 66% 86%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 62% 89%, rgba(215,235,255,0.89) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 13% 20%, rgba(255,245,215,0.88) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 19% 68%, rgba(215,235,255,0.96) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at  9% 83%, rgba(255,255,255,0.91) 0%, transparent 100%),
    radial-gradient(ellipse 2px 2px at 18% 47%, rgba(215,235,255,0.83) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 93% 78%, rgba(255,255,255,0.88) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 14% 17%, rgba(255,255,255,1.00) 0%, transparent 100%),
    radial-gradient(ellipse 2px 2px at 54% 20%, rgba(255,255,255,0.86) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 65% 31%, rgba(255,245,215,0.96) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 25% 88%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at  8% 45%, rgba(255,255,255,0.87) 0%, transparent 100%),
    radial-gradient(ellipse 2px 2px at 53% 51%, rgba(215,235,255,0.91) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 25%  6%, rgba(255,245,215,0.88) 0%, transparent 100%),
    radial-gradient(ellipse 2px 2px at 58% 31%, rgba(255,245,215,0.85) 0%, transparent 100%),
    radial-gradient(ellipse 2px 2px at 94% 41%, rgba(255,255,255,0.94) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 29% 93%, rgba(255,225,165,0.88) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 47% 46%, rgba(255,220,160,0.81) 0%, transparent 100%);
  animation: ram-sequin-a 2.4s ease-in-out infinite;
  animation-delay: var(--shimmer-offset, 0ms);
}
[data-style="ram"] .shimmer-overlay::after {
  /* Layer B — 28 sparkle pinpoints, inverse phase 3.1s */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 2px 2px at 58% 98%, rgba(255,255,255,0.88) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 34% 10%, rgba(255,210,245,0.94) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 43% 63%, rgba(255,210,245,0.98) 0%, transparent 100%),
    radial-gradient(ellipse 2px 2px at 57% 39%, rgba(215,235,255,0.97) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 22% 38%, rgba(215,235,255,0.92) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 81% 87%, rgba(215,235,255,0.87) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 27% 46%, rgba(255,255,255,0.94) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 26% 87%, rgba(255,225,165,0.93) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 86% 55%, rgba(255,255,255,0.97) 0%, transparent 100%),
    radial-gradient(ellipse 2px 2px at  2% 68%, rgba(255,245,215,1.00) 0%, transparent 100%),
    radial-gradient(ellipse 2px 2px at 23% 67%, rgba(215,235,255,0.85) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 96% 55%, rgba(215,235,255,0.93) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 82% 79%, rgba(255,245,215,0.80) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 15% 41%, rgba(255,255,255,0.99) 0%, transparent 100%),
    radial-gradient(ellipse 2px 2px at 55% 40%, rgba(255,245,215,0.93) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 92% 77%, rgba(210,245,255,0.95) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 52% 53%, rgba(255,255,255,0.87) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 18% 59%, rgba(215,235,255,0.99) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 24% 48%, rgba(255,245,215,0.89) 0%, transparent 100%),
    radial-gradient(ellipse 2px 2px at 91% 50%, rgba(255,255,255,0.99) 0%, transparent 100%),
    radial-gradient(ellipse 2px 2px at 63% 75%, rgba(255,225,165,0.90) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 23% 11%, rgba(255,210,245,0.89) 0%, transparent 100%),
    radial-gradient(ellipse 2px 2px at  3% 16%, rgba(255,245,215,0.81) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 85% 95%, rgba(255,255,255,0.91) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 83%  3%, rgba(210,245,255,0.85) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 19% 77%, rgba(255,255,255,0.81) 0%, transparent 100%),
    radial-gradient(ellipse 2px 2px at 67% 31%, rgba(255,210,245,0.83) 0%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 84%  6%, rgba(255,210,245,1.00) 0%, transparent 100%);
  animation: ram-sequin-b 3.1s ease-in-out infinite;
  animation-delay: calc(var(--shimmer-offset, 0ms) + 1100ms);
}
@keyframes ram-sequin-a {
  0%   { opacity: 0.35; }
  50%  { opacity: 1.00; }
  100% { opacity: 0.35; }
}
@keyframes ram-sequin-b {
  0%   { opacity: 1.00; }
  50%  { opacity: 0.30; }
  100% { opacity: 1.00; }
}

/* ── Player cards ── */
[data-style="ram"] .player-card.tier-elite {
  border-color: rgba(200,160,80,0.55);
  background-color: rgba(200,160,80,0.03);
  background-image: linear-gradient(135deg, rgba(200,160,80,0.10) 0%, rgba(200,160,80,0.02) 50%, transparent 100%);
  box-shadow: inset 0 1px 0 rgba(200,160,80,0.28), 0 0 20px rgba(200,160,80,0.07);
  border-radius: 1px;
}
[data-style="ram"] .player-card.tier-great {
  border-color: rgba(192,104,120,0.42);
  background-color: transparent;
  background-image: linear-gradient(135deg, rgba(192,104,120,0.07) 0%, transparent 60%);
  box-shadow: inset 0 1px 0 rgba(192,104,120,0.16);
  border-radius: 1px;
}
[data-style="ram"] .player-card.tier-good {
  border-color: rgba(96,120,128,0.30);
  background-color: rgba(96,120,128,0.02);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(96,120,128,0.10);
  border-radius: 1px;
}
[data-style="ram"] .player-card.tier-average {
  border-color: rgba(88,98,102,0.30);
  background-color: rgba(88,98,102,0.02);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(88,98,102,0.10);
  border-radius: 1px;
}

/* ── Expanded card ── */
[data-style="ram"] .expanded-draft-card.tier-elite {
  border-color: rgba(200,160,80,0.55);
  background-image: linear-gradient(135deg, rgba(200,160,80,0.10) 0%, rgba(200,160,80,0.02) 50%, transparent 100%);
  box-shadow: inset 0 1px 0 rgba(200,160,80,0.28), 0 0 20px rgba(200,160,80,0.07);
  border-radius: 1px;
}
[data-style="ram"] .expanded-draft-card.tier-great {
  border-color: rgba(192,104,120,0.42);
  background-image: linear-gradient(135deg, rgba(192,104,120,0.07) 0%, transparent 60%);
  box-shadow: inset 0 1px 0 rgba(192,104,120,0.16);
  border-radius: 1px;
}
[data-style="ram"] .expanded-draft-card.tier-good {
  border-color: rgba(96,120,128,0.30);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(96,120,128,0.10);
  border-radius: 1px;
}
[data-style="ram"] .expanded-draft-card.tier-average {
  border-color: rgba(88,98,102,0.30);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(88,98,102,0.10);
  border-radius: 1px;
}

/* ── Slot boxes ── */
[data-style="ram"] .slot-box.tier-elite,
[data-style="ram"] .slot-filled.tier-elite {
  border-color: rgba(200,160,80,0.32); background-color: rgba(200,160,80,0.04);
  background-image: none; border-radius: 1px;
}
[data-style="ram"] .slot-box.tier-great,
[data-style="ram"] .slot-filled.tier-great {
  border-color: rgba(192,104,120,0.24); background-image: none; border-radius: 1px;
}
[data-style="ram"] .slot-box.tier-good,
[data-style="ram"] .slot-filled.tier-good {
  border-color: rgba(96,120,128,0.18); background-image: none; border-radius: 1px;
}
[data-style="ram"] .slot-box.tier-average,
[data-style="ram"] .slot-filled.tier-average {
  border-color: rgba(88,98,102,0.18); background-image: none; border-radius: 1px;
}
[data-style="ram"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average),
[data-style="ram"] .slot-filled:not(.tier-elite):not(.tier-great):not(.tier-good) {
  border-color: rgba(255,255,255,0.06); background-image: none; border-radius: 1px;
}

/* ── Diamond pos cards ── */
[data-style="ram"] .diamond-pos-card.tier-elite {
  border-color: rgba(200,160,80,0.40); background-color: rgba(200,160,80,0.05);
  background-image: none; border-radius: 1px;
}
[data-style="ram"] .diamond-pos-card.tier-great {
  border-color: rgba(192,104,120,0.30); background-image: none; border-radius: 1px;
}
[data-style="ram"] .diamond-pos-card.tier-good {
  border-color: rgba(96,120,128,0.22); background-image: none; border-radius: 1px;
}
[data-style="ram"] .diamond-pos-card.tier-average {
  border-color: rgba(88,98,102,0.22); background-image: none; border-radius: 1px;
}

/* ── Panels ── */
[data-style="ram"] .lineup-card {
  background: rgba(14,11,8,0.92);
  border-color: rgba(200,160,80,0.16);
  border-top: 2px solid rgba(200,160,80,0.40);
  box-shadow: none; border-radius: 1px;
}
[data-style="ram"] .void-panel {
  background: rgba(14,11,8,0.92);
  border-color: rgba(200,160,80,0.12);
  border-top: 1px solid rgba(200,160,80,0.28);
  border-radius: 1px;
}
[data-style="ram"] .roll-card { background: rgba(14,11,8,0.92); }
[data-style="ram"] .scoreboard,
[data-style="ram"] .manager-card,
[data-style="ram"] .highlight-card,
[data-style="ram"] .achievement-card,
[data-style="ram"] .postseason-game-tile,
[data-style="ram"] .postseason-mvp-tile {
  background: rgba(14,11,8,0.92);
  border-color: rgba(200,160,80,0.14);
  border-top: 1px solid rgba(200,160,80,0.24);
  border-radius: 1px; box-shadow: none;
}
[data-style="ram"] .modal-panel {
  background: rgba(14,11,8,0.96);
  border-color: rgba(200,160,80,0.22);
  border-top: 2px solid rgba(200,160,80,0.50);
  border-radius: 1px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
}
[data-style="ram"] .modal-header { border-bottom: 1px solid rgba(200,160,80,0.12); }

/* VU meter tick strip on lineup card top */
[data-style="ram"] .lineup-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: repeating-linear-gradient(
    90deg,
    rgba(200,160,80,0.40) 0px, rgba(200,160,80,0.40) 1px,
    transparent 1px, transparent 8px,
    rgba(200,160,80,0.20) 8px, rgba(200,160,80,0.20) 9px,
    transparent 9px, transparent 24px
  );
  pointer-events: none; z-index: 2; border-radius: 1px 1px 0 0;
}

/* ── Lineup group header ── */
[data-style="ram"] .lineup-group-header {
  background: rgba(20,16,12,0.85);
  border-color: rgba(200,160,80,0.18);
  border-radius: 1px;
  font-family: 'Playfair Display', serif;
}
[data-style="ram"] .lineup-group-name { font-family: 'Playfair Display', serif; font-weight: 700; letter-spacing: 0.02em; }
[data-style="ram"] .lineup-card-label { font-family: 'Playfair Display', serif; font-weight: 700; letter-spacing: 0.04em; font-style: italic; }

/* ── Buttons ── */
[data-style="ram"] .btn-primary {
  background: transparent; color: rgba(200,160,80,0.88);
  border: 1px solid rgba(200,160,80,0.48); border-radius: 1px;
  font-family: 'Playfair Display', serif; font-style: italic;
  letter-spacing: 0.04em; box-shadow: none;
}
[data-style="ram"] .btn-primary:hover:not(:disabled) {
  background: rgba(200,160,80,0.08); transform: none; box-shadow: none;
}
[data-style="ram"] .btn-outline { border-color: rgba(200,160,80,0.28); border-radius: 1px; }
[data-style="ram"] .draft-action-btn:hover:not(:disabled) {
  color: var(--void);
}

[data-style="ram"] .draft-action-btn {
  background: transparent; color: rgba(200,160,80,0.78);
  border: 1px solid rgba(200,160,80,0.40); border-radius: 1px;
  font-family: 'Playfair Display', serif; font-style: italic;
  letter-spacing: 0.04em; box-shadow: none;
}
[data-style="ram"] .tier-great .draft-action-btn { color: rgba(192,104,120,0.68); border-color: rgba(192,104,120,0.32); }
[data-style="ram"] .tier-good  .draft-action-btn { color: rgba(96,120,128,0.55); border-color: rgba(96,120,128,0.25); }
[data-style="ram"] .btn-reroll { border-radius: 1px; }
[data-style="ram"] .btn-share-result { border-radius: 1px; color: rgba(200,160,80,0.78); border-color: rgba(200,160,80,0.38); font-family: 'Playfair Display', serif; font-style: italic; }

/* ── Interactive states ── */
[data-style="ram"] .player-pos,
[data-style="ram"] .slot-box-pos {
  background: rgba(200,160,80,0.07); color: rgba(200,160,80,0.80);
  border-color: rgba(200,160,80,0.30); border-radius: 1px;
}
[data-style="ram"] .pending-confirm {
  border-color: rgba(200,160,80,0.80); background: rgba(200,160,80,0.12);
  color: rgba(200,160,80,0.95); box-shadow: 0 0 12px rgba(200,160,80,0.18);
}
[data-style="ram"] .picker-active,
[data-style="ram"] .swap-active {
  border-color: rgba(200,160,80,0.60); box-shadow: 0 0 12px rgba(200,160,80,0.12);
}
[data-style="ram"] .natural {
  border-color: rgba(200,160,80,0.38); color: rgba(200,160,80,0.78);
  background: rgba(200,160,80,0.06); border-radius: 1px;
}
[data-style="ram"] .selected {
  border-color: rgba(200,160,80,0.60); background: rgba(200,160,80,0.08);
  color: rgba(200,160,80,0.90); box-shadow: 0 0 10px rgba(200,160,80,0.14);
}

/* ── Badges ── */
[data-style="ram"] .hof-badge,
[data-style="ram"] .ace-badge,
[data-style="ram"] .clutch-badge,
[data-style="ram"] .ironman-badge {
  border-radius: 1px; background: rgba(200,160,80,0.10);
  border-color: rgba(200,160,80,0.35); color: rgba(200,160,80,0.85);
  font-family: 'Playfair Display', serif;
}
[data-style="ram"] .settings-option.active {
  border-color: rgba(200,160,80,0.45); background: rgba(200,160,80,0.05); box-shadow: none;
}
[data-style="ram"] .record-banner,
[data-style="ram"] .postseason-champion-banner {
  border-radius: 1px; border-top: 2px solid rgba(200,160,80,0.45);
  box-shadow: 0 0 20px rgba(200,160,80,0.12);
}

/* ── Secondary elements ── */
[data-style="ram"] .site-header { border-bottom: 1px solid rgba(200,160,80,0.16); }
[data-style="ram"] .roll-box { border-color: rgba(200,160,80,0.18); border-radius: 1px; }
[data-style="ram"] #sandbox-panel,
[data-style="ram"] .sandbox-section { border-color: rgba(200,160,80,0.14); border-radius: 1px; background: rgba(14,11,8,0.92); }
[data-style="ram"] .result-recap,
[data-style="ram"] .lineup-card.result-recap { border-color: rgba(200,160,80,0.18); border-radius: 1px; }
[data-style="ram"] .result-tabs { border-bottom-color: rgba(200,160,80,0.14); }
[data-style="ram"] .result-tab.active { border-bottom-color: var(--gold); color: var(--gold); }
[data-style="ram"] .position-section { border-color: rgba(200,160,80,0.12); border-top-color: rgba(200,160,80,0.20); border-radius: 1px; }
[data-style="ram"] .postseason-qualify-banner { border-color: rgba(200,160,80,0.20); border-radius: 1px; }
[data-style="ram"] .highlights-ticker { border-top-color: rgba(200,160,80,0.14); }
[data-style="ram"] .manager-banner { border-color: rgba(200,160,80,0.14); border-radius: 1px; }
[data-style="ram"] .true-story-banner { border-color: rgba(200,160,80,0.18); border-radius: 1px; }
[data-style="ram"] .statcast-card { border-color: rgba(200,160,80,0.14); border-radius: 1px; }
[data-style="ram"] .player-search-input { border-color: rgba(200,160,80,0.20); border-radius: 1px; }
[data-style="ram"] .modal-overlay { background: rgba(0,0,0,0.80); }
[data-style="ram"] .modal-section-label,
[data-style="ram"] .section-label,
[data-style="ram"] .ps-stats-section-label,
[data-style="ram"] .roster-section-label,
[data-style="ram"] .opp-header {
  font-family: 'Playfair Display', serif; font-style: italic;
}
[data-style="ram"] .slot-box-name,
[data-style="ram"] .slot-box-stats,
[data-style="ram"] .slot-box-plus,
[data-style="ram"] .slot-box-tag,
[data-style="ram"] .real-awards-line,
[data-style="ram"] .teammates-line { font-family: 'Playfair Display', serif; }
[data-style="ram"] .hc-player-name,
[data-style="ram"] .hc-description,
[data-style="ram"] .hc-player-meta { font-family: 'Playfair Display', serif; }
[data-style="ram"] .manager-card-body,
[data-style="ram"] .manager-card-info { font-family: 'Playfair Display', serif; }
[data-style="ram"] .chip-decade { font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.08em; }


/* ══════════════════════════════════════════════════════════════
   VISUALIZER STYLE — Suchmos / Winamp
   Neo-soul + classic EQ spectrum.
   Deep cool near-navy #060a0e.
   Lime green elite, teal great, deep blue good.
   Space Grotesk geometric sans.
   EQ bar watermark in panels.
   Spectrum gradient dividers.
   Winamp peak line shimmer on elite
   (low opacity, full off-screen travel, peak hold).
   All scoped to [data-style="visualizer"].
══════════════════════════════════════════════════════════════ */

[data-style="visualizer"] {
  --tier-elite:  #88cc44;
  --tier-great:  #28b4b4;
  --tier-good:   #3870cc;
  --tier-average: #627aa3;
  --gold:        #88cc44;
  --gold-rgb:    136, 204, 68;
  --gold-bright: #a0e050;
  --purple-rgb:  40, 180, 180;
  --green-rgb:   56, 112, 204;
  --font:        'Space Grotesk', 'IBM Plex Mono', monospace;
  --void:        #060a0e;
  --void-2:      #0c1218;
}

[data-style="visualizer"] body {
  background: #060a0e;
}
[data-style="visualizer"] body::before,
[data-style="visualizer"] body::after { display: none; }
/* EQ bar background — 160 segmented bars injected by JS */
.viz-eq-bg-wrap {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 35%;
  display: flex; align-items: flex-end; gap: 1px; padding: 0;
  pointer-events: none; z-index: 0;
  overflow: hidden;
}
.viz-eq-bg-bar {
  flex: 1; min-width: 0; height: 100%;
  transform-origin: bottom;
  opacity: 0.22;
}
.viz-eq-bg-bar:nth-child(1) { background: linear-gradient(to top, #1e3cdc, transparent); animation: vzeq1 1.91s ease-in-out infinite alternate; animation-delay: -0.03s; }
.viz-eq-bg-bar:nth-child(2) { background: linear-gradient(to top, #1c43da, transparent); animation: vzeq2 2.02s ease-in-out infinite alternate; animation-delay: -0.2s; }
.viz-eq-bg-bar:nth-child(3) { background: linear-gradient(to top, #1b4ad8, transparent); animation: vzeq3 2.13s ease-in-out infinite alternate; animation-delay: -0.37s; }
.viz-eq-bg-bar:nth-child(4) { background: linear-gradient(to top, #1a51d6, transparent); animation: vzeq4 2.03s ease-in-out infinite alternate; animation-delay: -0.54s; }
.viz-eq-bg-bar:nth-child(5) { background: linear-gradient(to top, #1958d4, transparent); animation: vzeq5 2.14s ease-in-out infinite alternate; animation-delay: -0.71s; }
.viz-eq-bg-bar:nth-child(6) { background: linear-gradient(to top, #175fd3, transparent); animation: vzeq6 2.25s ease-in-out infinite alternate; animation-delay: -0.88s; }
.viz-eq-bg-bar:nth-child(7) { background: linear-gradient(to top, #1666d1, transparent); animation: vzeq7 2.35s ease-in-out infinite alternate; animation-delay: -1.05s; }
.viz-eq-bg-bar:nth-child(8) { background: linear-gradient(to top, #156dcf, transparent); animation: vzeq8 2.26s ease-in-out infinite alternate; animation-delay: -1.22s; }
.viz-eq-bg-bar:nth-child(9) { background: linear-gradient(to top, #1474cd, transparent); animation: vzeq9 2.37s ease-in-out infinite alternate; animation-delay: -1.39s; }
.viz-eq-bg-bar:nth-child(10) { background: linear-gradient(to top, #127bcc, transparent); animation: vzeq10 2.47s ease-in-out infinite alternate; animation-delay: -1.56s; }
.viz-eq-bg-bar:nth-child(11) { background: linear-gradient(to top, #1182ca, transparent); animation: vzeq11 2.38s ease-in-out infinite alternate; animation-delay: -1.73s; }
.viz-eq-bg-bar:nth-child(12) { background: linear-gradient(to top, #1089c8, transparent); animation: vzeq12 2.48s ease-in-out infinite alternate; animation-delay: -1.9s; }
.viz-eq-bg-bar:nth-child(13) { background: linear-gradient(to top, #108fc4, transparent); animation: vzeq13 2.59s ease-in-out infinite alternate; animation-delay: -2.07s; }
.viz-eq-bg-bar:nth-child(14) { background: linear-gradient(to top, #1095be, transparent); animation: vzeq14 2.5s ease-in-out infinite alternate; animation-delay: -2.24s; }
.viz-eq-bg-bar:nth-child(15) { background: linear-gradient(to top, #109ab9, transparent); animation: vzeq15 2.6s ease-in-out infinite alternate; animation-delay: -2.41s; }
.viz-eq-bg-bar:nth-child(16) { background: linear-gradient(to top, #10a0b3, transparent); animation: vzeq16 2.71s ease-in-out infinite alternate; animation-delay: -2.58s; }
.viz-eq-bg-bar:nth-child(17) { background: linear-gradient(to top, #10a6ad, transparent); animation: vzeq17 2.62s ease-in-out infinite alternate; animation-delay: -2.75s; }
.viz-eq-bg-bar:nth-child(18) { background: linear-gradient(to top, #10aba8, transparent); animation: vzeq18 2.72s ease-in-out infinite alternate; animation-delay: -2.92s; }
.viz-eq-bg-bar:nth-child(19) { background: linear-gradient(to top, #10b1a2, transparent); animation: vzeq19 2.83s ease-in-out infinite alternate; animation-delay: -3.09s; }
.viz-eq-bg-bar:nth-child(20) { background: linear-gradient(to top, #10b69d, transparent); animation: vzeq20 2.94s ease-in-out infinite alternate; animation-delay: -3.26s; }
.viz-eq-bg-bar:nth-child(21) { background: linear-gradient(to top, #10bc97, transparent); animation: vzeq21 2.84s ease-in-out infinite alternate; animation-delay: -3.43s; }
.viz-eq-bg-bar:nth-child(22) { background: linear-gradient(to top, #10c291, transparent); animation: vzeq22 2.95s ease-in-out infinite alternate; animation-delay: -3.6s; }
.viz-eq-bg-bar:nth-child(23) { background: linear-gradient(to top, #10c78c, transparent); animation: vzeq23 3.06s ease-in-out infinite alternate; animation-delay: -3.77s; }
.viz-eq-bg-bar:nth-child(24) { background: linear-gradient(to top, #16c982, transparent); animation: vzeq24 2.96s ease-in-out infinite alternate; animation-delay: -3.94s; }
.viz-eq-bg-bar:nth-child(25) { background: linear-gradient(to top, #1dca79, transparent); animation: vzeq25 3.07s ease-in-out infinite alternate; animation-delay: -0.11s; }
.viz-eq-bg-bar:nth-child(26) { background: linear-gradient(to top, #23cb6f, transparent); animation: vzeq26 3.18s ease-in-out infinite alternate; animation-delay: -0.28s; }
.viz-eq-bg-bar:nth-child(27) { background: linear-gradient(to top, #2acc66, transparent); animation: vzeq27 3.08s ease-in-out infinite alternate; animation-delay: -0.45s; }
.viz-eq-bg-bar:nth-child(28) { background: linear-gradient(to top, #31cd5c, transparent); animation: vzeq28 3.19s ease-in-out infinite alternate; animation-delay: -0.62s; }
.viz-eq-bg-bar:nth-child(29) { background: linear-gradient(to top, #38ce53, transparent); animation: vzeq29 3.29s ease-in-out infinite alternate; animation-delay: -0.79s; }
.viz-eq-bg-bar:nth-child(30) { background: linear-gradient(to top, #3fcf49, transparent); animation: vzeq30 3.2s ease-in-out infinite alternate; animation-delay: -0.96s; }
.viz-eq-bg-bar:nth-child(31) { background: linear-gradient(to top, #45d040, transparent); animation: vzeq31 3.31s ease-in-out infinite alternate; animation-delay: -1.13s; }
.viz-eq-bg-bar:nth-child(32) { background: linear-gradient(to top, #4cd136, transparent); animation: vzeq32 3.41s ease-in-out infinite alternate; animation-delay: -1.3s; }
.viz-eq-bg-bar:nth-child(33) { background: linear-gradient(to top, #56d130, transparent); animation: vzeq33 3.52s ease-in-out infinite alternate; animation-delay: -1.47s; }
.viz-eq-bg-bar:nth-child(34) { background: linear-gradient(to top, #63d02d, transparent); animation: vzeq34 3.43s ease-in-out infinite alternate; animation-delay: -1.64s; }
.viz-eq-bg-bar:nth-child(35) { background: linear-gradient(to top, #6fcf2a, transparent); animation: vzeq35 3.53s ease-in-out infinite alternate; animation-delay: -1.81s; }
.viz-eq-bg-bar:nth-child(36) { background: linear-gradient(to top, #7cce26, transparent); animation: vzeq36 3.64s ease-in-out infinite alternate; animation-delay: -1.98s; }
.viz-eq-bg-bar:nth-child(37) { background: linear-gradient(to top, #89cd23, transparent); animation: vzeq37 3.55s ease-in-out infinite alternate; animation-delay: -2.15s; }
.viz-eq-bg-bar:nth-child(38) { background: linear-gradient(to top, #95cc20, transparent); animation: vzeq38 3.65s ease-in-out infinite alternate; animation-delay: -2.32s; }
.viz-eq-bg-bar:nth-child(39) { background: linear-gradient(to top, #a2cb1d, transparent); animation: vzeq39 3.76s ease-in-out infinite alternate; animation-delay: -2.49s; }
.viz-eq-bg-bar:nth-child(40) { background: linear-gradient(to top, #afca1a, transparent); animation: vzeq40 3.67s ease-in-out infinite alternate; animation-delay: -2.66s; }
.viz-eq-bg-bar:nth-child(41) { background: linear-gradient(to top, #bbc917, transparent); animation: vzeq41 3.77s ease-in-out infinite alternate; animation-delay: -2.83s; }
.viz-eq-bg-bar:nth-child(42) { background: linear-gradient(to top, #c8c714, transparent); animation: vzeq42 3.88s ease-in-out infinite alternate; animation-delay: -3.0s; }
.viz-eq-bg-bar:nth-child(43) { background: linear-gradient(to top, #cdbd14, transparent); animation: vzeq43 3.78s ease-in-out infinite alternate; animation-delay: -3.17s; }
.viz-eq-bg-bar:nth-child(44) { background: linear-gradient(to top, #d2b314, transparent); animation: vzeq44 3.89s ease-in-out infinite alternate; animation-delay: -3.34s; }
.viz-eq-bg-bar:nth-child(45) { background: linear-gradient(to top, #d6aa14, transparent); animation: vzeq45 4.0s ease-in-out infinite alternate; animation-delay: -3.51s; }
.viz-eq-bg-bar:nth-child(46) { background: linear-gradient(to top, #dba014, transparent); animation: vzeq46 3.9s ease-in-out infinite alternate; animation-delay: -3.68s; }
.viz-eq-bg-bar:nth-child(47) { background: linear-gradient(to top, #e09614, transparent); animation: vzeq47 4.01s ease-in-out infinite alternate; animation-delay: -3.85s; }
.viz-eq-bg-bar:nth-child(48) { background: linear-gradient(to top, #e58c14, transparent); animation: vzeq48 4.12s ease-in-out infinite alternate; animation-delay: -0.02s; }
.viz-eq-bg-bar:nth-child(49) { background: linear-gradient(to top, #ea8314, transparent); animation: vzeq49 4.22s ease-in-out infinite alternate; animation-delay: -0.19s; }
.viz-eq-bg-bar:nth-child(50) { background: linear-gradient(to top, #ef7914, transparent); animation: vzeq50 4.13s ease-in-out infinite alternate; animation-delay: -0.36s; }
.viz-eq-bg-bar:nth-child(51) { background: linear-gradient(to top, #ed6e16, transparent); animation: vzeq51 4.24s ease-in-out infinite alternate; animation-delay: -0.53s; }
.viz-eq-bg-bar:nth-child(52) { background: linear-gradient(to top, #eb6418, transparent); animation: vzeq52 4.34s ease-in-out infinite alternate; animation-delay: -0.7s; }
.viz-eq-bg-bar:nth-child(53) { background: linear-gradient(to top, #e8591b, transparent); animation: vzeq53 4.25s ease-in-out infinite alternate; animation-delay: -0.87s; }
.viz-eq-bg-bar:nth-child(54) { background: linear-gradient(to top, #e54f1e, transparent); animation: vzeq54 4.36s ease-in-out infinite alternate; animation-delay: -1.04s; }
.viz-eq-bg-bar:nth-child(55) { background: linear-gradient(to top, #e34420, transparent); animation: vzeq55 4.46s ease-in-out infinite alternate; animation-delay: -1.21s; }
.viz-eq-bg-bar:nth-child(56) { background: linear-gradient(to top, #e03923, transparent); animation: vzeq56 4.37s ease-in-out infinite alternate; animation-delay: -1.38s; }
.viz-eq-bg-bar:nth-child(57) { background: linear-gradient(to top, #dd2f26, transparent); animation: vzeq57 4.47s ease-in-out infinite alternate; animation-delay: -1.55s; }
.viz-eq-bg-bar:nth-child(58) { background: linear-gradient(to top, #d82629, transparent); animation: vzeq58 4.58s ease-in-out infinite alternate; animation-delay: -1.72s; }
.viz-eq-bg-bar:nth-child(59) { background: linear-gradient(to top, #cb1f30, transparent); animation: vzeq59 4.49s ease-in-out infinite alternate; animation-delay: -1.89s; }
.viz-eq-bg-bar:nth-child(60) { background: linear-gradient(to top, #be1936, transparent); animation: vzeq60 4.59s ease-in-out infinite alternate; animation-delay: -2.06s; }
.viz-eq-bg-bar:nth-child(61) { background: linear-gradient(to top, #b2133c, transparent); animation: vzeq61 4.7s ease-in-out infinite alternate; animation-delay: -2.23s; }
.viz-eq-bg-bar:nth-child(62) { background: linear-gradient(to top, #a50c43, transparent); animation: vzeq62 4.81s ease-in-out infinite alternate; animation-delay: -2.4s; }
.viz-eq-bg-bar:nth-child(63) { background: linear-gradient(to top, #980649, transparent); animation: vzeq63 4.71s ease-in-out infinite alternate; animation-delay: -2.57s; }
.viz-eq-bg-bar:nth-child(64) { background: linear-gradient(to top, #8c0050, transparent); animation: vzeq64 4.82s ease-in-out infinite alternate; animation-delay: -2.74s; }
@keyframes vzeq1 { 0%{transform:scaleY(0.06)} 20%{transform:scaleY(0.37)} 45%{transform:scaleY(0.11)} 70%{transform:scaleY(0.35)} 100%{transform:scaleY(0.08)} }
@keyframes vzeq2 { 0%{transform:scaleY(0.11)} 20%{transform:scaleY(0.61)} 45%{transform:scaleY(0.12)} 70%{transform:scaleY(0.74)} 100%{transform:scaleY(0.05)} }
@keyframes vzeq3 { 0%{transform:scaleY(0.08)} 20%{transform:scaleY(0.58)} 45%{transform:scaleY(0.13)} 70%{transform:scaleY(0.45)} 100%{transform:scaleY(0.09)} }
@keyframes vzeq4 { 0%{transform:scaleY(0.11)} 20%{transform:scaleY(0.48)} 45%{transform:scaleY(0.1)} 70%{transform:scaleY(0.72)} 100%{transform:scaleY(0.05)} }
@keyframes vzeq5 { 0%{transform:scaleY(0.05)} 20%{transform:scaleY(0.72)} 45%{transform:scaleY(0.14)} 70%{transform:scaleY(0.33)} 100%{transform:scaleY(0.11)} }
@keyframes vzeq6 { 0%{transform:scaleY(0.04)} 20%{transform:scaleY(0.57)} 45%{transform:scaleY(0.15)} 70%{transform:scaleY(0.48)} 100%{transform:scaleY(0.08)} }
@keyframes vzeq7 { 0%{transform:scaleY(0.05)} 20%{transform:scaleY(0.58)} 45%{transform:scaleY(0.05)} 70%{transform:scaleY(0.74)} 100%{transform:scaleY(0.05)} }
@keyframes vzeq8 { 0%{transform:scaleY(0.06)} 20%{transform:scaleY(0.67)} 45%{transform:scaleY(0.08)} 70%{transform:scaleY(0.35)} 100%{transform:scaleY(0.07)} }
@keyframes vzeq9 { 0%{transform:scaleY(0.1)} 20%{transform:scaleY(0.4)} 45%{transform:scaleY(0.14)} 70%{transform:scaleY(0.55)} 100%{transform:scaleY(0.07)} }
@keyframes vzeq10 { 0%{transform:scaleY(0.12)} 20%{transform:scaleY(0.55)} 45%{transform:scaleY(0.06)} 70%{transform:scaleY(0.76)} 100%{transform:scaleY(0.07)} }
@keyframes vzeq11 { 0%{transform:scaleY(0.04)} 20%{transform:scaleY(0.48)} 45%{transform:scaleY(0.15)} 70%{transform:scaleY(0.43)} 100%{transform:scaleY(0.06)} }
@keyframes vzeq12 { 0%{transform:scaleY(0.1)} 20%{transform:scaleY(0.7)} 45%{transform:scaleY(0.06)} 70%{transform:scaleY(0.46)} 100%{transform:scaleY(0.07)} }
@keyframes vzeq13 { 0%{transform:scaleY(0.08)} 20%{transform:scaleY(0.51)} 45%{transform:scaleY(0.1)} 70%{transform:scaleY(0.55)} 100%{transform:scaleY(0.11)} }
@keyframes vzeq14 { 0%{transform:scaleY(0.03)} 20%{transform:scaleY(0.65)} 45%{transform:scaleY(0.06)} 70%{transform:scaleY(0.37)} 100%{transform:scaleY(0.11)} }
@keyframes vzeq15 { 0%{transform:scaleY(0.07)} 20%{transform:scaleY(0.63)} 45%{transform:scaleY(0.06)} 70%{transform:scaleY(0.57)} 100%{transform:scaleY(0.12)} }
@keyframes vzeq16 { 0%{transform:scaleY(0.1)} 20%{transform:scaleY(0.59)} 45%{transform:scaleY(0.09)} 70%{transform:scaleY(0.41)} 100%{transform:scaleY(0.09)} }
@keyframes vzeq17 { 0%{transform:scaleY(0.03)} 20%{transform:scaleY(0.71)} 45%{transform:scaleY(0.05)} 70%{transform:scaleY(0.45)} 100%{transform:scaleY(0.04)} }
@keyframes vzeq18 { 0%{transform:scaleY(0.11)} 20%{transform:scaleY(0.61)} 45%{transform:scaleY(0.06)} 70%{transform:scaleY(0.42)} 100%{transform:scaleY(0.07)} }
@keyframes vzeq19 { 0%{transform:scaleY(0.09)} 20%{transform:scaleY(0.64)} 45%{transform:scaleY(0.08)} 70%{transform:scaleY(0.64)} 100%{transform:scaleY(0.09)} }
@keyframes vzeq20 { 0%{transform:scaleY(0.06)} 20%{transform:scaleY(0.41)} 45%{transform:scaleY(0.11)} 70%{transform:scaleY(0.42)} 100%{transform:scaleY(0.09)} }
@keyframes vzeq21 { 0%{transform:scaleY(0.05)} 20%{transform:scaleY(0.5)} 45%{transform:scaleY(0.08)} 70%{transform:scaleY(0.37)} 100%{transform:scaleY(0.08)} }
@keyframes vzeq22 { 0%{transform:scaleY(0.06)} 20%{transform:scaleY(0.6)} 45%{transform:scaleY(0.14)} 70%{transform:scaleY(0.61)} 100%{transform:scaleY(0.05)} }
@keyframes vzeq23 { 0%{transform:scaleY(0.07)} 20%{transform:scaleY(0.35)} 45%{transform:scaleY(0.1)} 70%{transform:scaleY(0.51)} 100%{transform:scaleY(0.07)} }
@keyframes vzeq24 { 0%{transform:scaleY(0.07)} 20%{transform:scaleY(0.54)} 45%{transform:scaleY(0.06)} 70%{transform:scaleY(0.67)} 100%{transform:scaleY(0.05)} }
@keyframes vzeq25 { 0%{transform:scaleY(0.05)} 20%{transform:scaleY(0.71)} 45%{transform:scaleY(0.13)} 70%{transform:scaleY(0.57)} 100%{transform:scaleY(0.09)} }
@keyframes vzeq26 { 0%{transform:scaleY(0.05)} 20%{transform:scaleY(0.54)} 45%{transform:scaleY(0.1)} 70%{transform:scaleY(0.64)} 100%{transform:scaleY(0.07)} }
@keyframes vzeq27 { 0%{transform:scaleY(0.1)} 20%{transform:scaleY(0.3)} 45%{transform:scaleY(0.15)} 70%{transform:scaleY(0.37)} 100%{transform:scaleY(0.06)} }
@keyframes vzeq28 { 0%{transform:scaleY(0.1)} 20%{transform:scaleY(0.41)} 45%{transform:scaleY(0.08)} 70%{transform:scaleY(0.46)} 100%{transform:scaleY(0.05)} }
@keyframes vzeq29 { 0%{transform:scaleY(0.06)} 20%{transform:scaleY(0.49)} 45%{transform:scaleY(0.11)} 70%{transform:scaleY(0.77)} 100%{transform:scaleY(0.12)} }
@keyframes vzeq30 { 0%{transform:scaleY(0.09)} 20%{transform:scaleY(0.47)} 45%{transform:scaleY(0.13)} 70%{transform:scaleY(0.66)} 100%{transform:scaleY(0.11)} }
@keyframes vzeq31 { 0%{transform:scaleY(0.04)} 20%{transform:scaleY(0.48)} 45%{transform:scaleY(0.13)} 70%{transform:scaleY(0.32)} 100%{transform:scaleY(0.05)} }
@keyframes vzeq32 { 0%{transform:scaleY(0.04)} 20%{transform:scaleY(0.73)} 45%{transform:scaleY(0.04)} 70%{transform:scaleY(0.47)} 100%{transform:scaleY(0.12)} }
@keyframes vzeq33 { 0%{transform:scaleY(0.06)} 20%{transform:scaleY(0.54)} 45%{transform:scaleY(0.12)} 70%{transform:scaleY(0.74)} 100%{transform:scaleY(0.09)} }
@keyframes vzeq34 { 0%{transform:scaleY(0.06)} 20%{transform:scaleY(0.65)} 45%{transform:scaleY(0.07)} 70%{transform:scaleY(0.7)} 100%{transform:scaleY(0.05)} }
@keyframes vzeq35 { 0%{transform:scaleY(0.05)} 20%{transform:scaleY(0.39)} 45%{transform:scaleY(0.08)} 70%{transform:scaleY(0.63)} 100%{transform:scaleY(0.08)} }
@keyframes vzeq36 { 0%{transform:scaleY(0.08)} 20%{transform:scaleY(0.33)} 45%{transform:scaleY(0.13)} 70%{transform:scaleY(0.5)} 100%{transform:scaleY(0.12)} }
@keyframes vzeq37 { 0%{transform:scaleY(0.12)} 20%{transform:scaleY(0.33)} 45%{transform:scaleY(0.13)} 70%{transform:scaleY(0.58)} 100%{transform:scaleY(0.07)} }
@keyframes vzeq38 { 0%{transform:scaleY(0.04)} 20%{transform:scaleY(0.63)} 45%{transform:scaleY(0.14)} 70%{transform:scaleY(0.56)} 100%{transform:scaleY(0.08)} }
@keyframes vzeq39 { 0%{transform:scaleY(0.09)} 20%{transform:scaleY(0.58)} 45%{transform:scaleY(0.07)} 70%{transform:scaleY(0.69)} 100%{transform:scaleY(0.06)} }
@keyframes vzeq40 { 0%{transform:scaleY(0.06)} 20%{transform:scaleY(0.58)} 45%{transform:scaleY(0.06)} 70%{transform:scaleY(0.51)} 100%{transform:scaleY(0.09)} }
@keyframes vzeq41 { 0%{transform:scaleY(0.12)} 20%{transform:scaleY(0.72)} 45%{transform:scaleY(0.13)} 70%{transform:scaleY(0.63)} 100%{transform:scaleY(0.09)} }
@keyframes vzeq42 { 0%{transform:scaleY(0.09)} 20%{transform:scaleY(0.6)} 45%{transform:scaleY(0.04)} 70%{transform:scaleY(0.47)} 100%{transform:scaleY(0.07)} }
@keyframes vzeq43 { 0%{transform:scaleY(0.07)} 20%{transform:scaleY(0.5)} 45%{transform:scaleY(0.09)} 70%{transform:scaleY(0.51)} 100%{transform:scaleY(0.11)} }
@keyframes vzeq44 { 0%{transform:scaleY(0.1)} 20%{transform:scaleY(0.52)} 45%{transform:scaleY(0.14)} 70%{transform:scaleY(0.46)} 100%{transform:scaleY(0.12)} }
@keyframes vzeq45 { 0%{transform:scaleY(0.06)} 20%{transform:scaleY(0.48)} 45%{transform:scaleY(0.09)} 70%{transform:scaleY(0.38)} 100%{transform:scaleY(0.06)} }
@keyframes vzeq46 { 0%{transform:scaleY(0.04)} 20%{transform:scaleY(0.73)} 45%{transform:scaleY(0.06)} 70%{transform:scaleY(0.39)} 100%{transform:scaleY(0.09)} }
@keyframes vzeq47 { 0%{transform:scaleY(0.05)} 20%{transform:scaleY(0.56)} 45%{transform:scaleY(0.09)} 70%{transform:scaleY(0.55)} 100%{transform:scaleY(0.04)} }
@keyframes vzeq48 { 0%{transform:scaleY(0.07)} 20%{transform:scaleY(0.7)} 45%{transform:scaleY(0.09)} 70%{transform:scaleY(0.46)} 100%{transform:scaleY(0.05)} }
@keyframes vzeq49 { 0%{transform:scaleY(0.1)} 20%{transform:scaleY(0.45)} 45%{transform:scaleY(0.06)} 70%{transform:scaleY(0.6)} 100%{transform:scaleY(0.11)} }
@keyframes vzeq50 { 0%{transform:scaleY(0.07)} 20%{transform:scaleY(0.49)} 45%{transform:scaleY(0.05)} 70%{transform:scaleY(0.53)} 100%{transform:scaleY(0.11)} }
@keyframes vzeq51 { 0%{transform:scaleY(0.08)} 20%{transform:scaleY(0.66)} 45%{transform:scaleY(0.07)} 70%{transform:scaleY(0.61)} 100%{transform:scaleY(0.07)} }
@keyframes vzeq52 { 0%{transform:scaleY(0.08)} 20%{transform:scaleY(0.63)} 45%{transform:scaleY(0.09)} 70%{transform:scaleY(0.49)} 100%{transform:scaleY(0.05)} }
@keyframes vzeq53 { 0%{transform:scaleY(0.07)} 20%{transform:scaleY(0.69)} 45%{transform:scaleY(0.04)} 70%{transform:scaleY(0.41)} 100%{transform:scaleY(0.12)} }
@keyframes vzeq54 { 0%{transform:scaleY(0.05)} 20%{transform:scaleY(0.41)} 45%{transform:scaleY(0.09)} 70%{transform:scaleY(0.61)} 100%{transform:scaleY(0.05)} }
@keyframes vzeq55 { 0%{transform:scaleY(0.08)} 20%{transform:scaleY(0.42)} 45%{transform:scaleY(0.07)} 70%{transform:scaleY(0.4)} 100%{transform:scaleY(0.07)} }
@keyframes vzeq56 { 0%{transform:scaleY(0.08)} 20%{transform:scaleY(0.37)} 45%{transform:scaleY(0.07)} 70%{transform:scaleY(0.57)} 100%{transform:scaleY(0.06)} }
@keyframes vzeq57 { 0%{transform:scaleY(0.07)} 20%{transform:scaleY(0.36)} 45%{transform:scaleY(0.1)} 70%{transform:scaleY(0.78)} 100%{transform:scaleY(0.05)} }
@keyframes vzeq58 { 0%{transform:scaleY(0.04)} 20%{transform:scaleY(0.73)} 45%{transform:scaleY(0.07)} 70%{transform:scaleY(0.5)} 100%{transform:scaleY(0.06)} }
@keyframes vzeq59 { 0%{transform:scaleY(0.05)} 20%{transform:scaleY(0.65)} 45%{transform:scaleY(0.06)} 70%{transform:scaleY(0.44)} 100%{transform:scaleY(0.11)} }
@keyframes vzeq60 { 0%{transform:scaleY(0.06)} 20%{transform:scaleY(0.35)} 45%{transform:scaleY(0.1)} 70%{transform:scaleY(0.76)} 100%{transform:scaleY(0.09)} }
@keyframes vzeq61 { 0%{transform:scaleY(0.06)} 20%{transform:scaleY(0.58)} 45%{transform:scaleY(0.06)} 70%{transform:scaleY(0.6)} 100%{transform:scaleY(0.05)} }
@keyframes vzeq62 { 0%{transform:scaleY(0.09)} 20%{transform:scaleY(0.73)} 45%{transform:scaleY(0.05)} 70%{transform:scaleY(0.53)} 100%{transform:scaleY(0.08)} }
@keyframes vzeq63 { 0%{transform:scaleY(0.11)} 20%{transform:scaleY(0.31)} 45%{transform:scaleY(0.11)} 70%{transform:scaleY(0.6)} 100%{transform:scaleY(0.06)} }
@keyframes vzeq64 { 0%{transform:scaleY(0.09)} 20%{transform:scaleY(0.35)} 45%{transform:scaleY(0.07)} 70%{transform:scaleY(0.42)} 100%{transform:scaleY(0.09)} }

/* ── Typography ── */
[data-style="visualizer"] .player-name,
[data-style="visualizer"] .diamond-pos-name,
[data-style="visualizer"] .manager-name,
[data-style="visualizer"] .brand,
[data-style="visualizer"] .modal-title,
[data-style="visualizer"] .section-label,
[data-style="visualizer"] .lineup-group-name,
[data-style="visualizer"] .lineup-card-label {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ── Winamp peak line shimmer on elite ──
   Travels from 120% (below, hidden) to -20% (above, hidden).
   Low opacity. Peak hold at top. z-index 0 behind all content. ── */
[data-style="visualizer"] .shimmer-overlay::before {
  top: 120%; left: -5%; width: 110%; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(56,112,204,0.28) 8%,
    rgba(40,180,180,0.35) 30%,
    rgba(136,204,68,0.42) 58%,
    rgba(200,160,40,0.32) 82%,
    rgba(220,80,40,0.22) 94%,
    transparent 100%
  );
  box-shadow: 0 0 4px rgba(136,204,68,0.25);
  animation: viz-peak 3.5s ease-in-out infinite;
  animation-delay: var(--shimmer-offset, 0ms);
}
@keyframes viz-peak {
  0%   { top:  120%; }
  35%  { top:  -20%; }
  60%  { top:  -20%; }
  100% { top:   120%; }
}

/* ── Player cards ── */
[data-style="visualizer"] .player-card.tier-elite {
  border-color: rgba(136,204,68,0.50);
  background-color: rgba(136,204,68,0.05);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(136,204,68,0.25), 0 0 16px rgba(136,204,68,0.08);
  border-radius: 1px;
}
[data-style="visualizer"] .player-card.tier-great {
  border-color: rgba(40,180,180,0.40);
  background-color: rgba(40,180,180,0.04);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(40,180,180,0.18);
  border-radius: 1px;
}
[data-style="visualizer"] .player-card.tier-good {
  border-color: rgba(56,112,204,0.32);
  background-color: rgba(56,112,204,0.03);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(56,112,204,0.12);
  border-radius: 1px;
}
[data-style="visualizer"] .player-card.tier-average {
  border-color: rgba(98,122,163,0.32);
  background-color: rgba(98,122,163,0.03);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(98,122,163,0.12);
  border-radius: 1px;
}

/* ── Expanded card ── */
[data-style="visualizer"] .expanded-draft-card.tier-elite {
  border-color: rgba(136,204,68,0.50); background-color: rgba(136,204,68,0.05);
  background-image: none; box-shadow: inset 0 1px 0 rgba(136,204,68,0.25), 0 0 14px rgba(136,204,68,0.07); border-radius: 1px;
}
[data-style="visualizer"] .expanded-draft-card.tier-great {
  border-color: rgba(40,180,180,0.40); background-color: rgba(40,180,180,0.04);
  background-image: none; box-shadow: inset 0 1px 0 rgba(40,180,180,0.18); border-radius: 1px;
}
[data-style="visualizer"] .expanded-draft-card.tier-good {
  border-color: rgba(56,112,204,0.32); background-color: rgba(56,112,204,0.03);
  background-image: none; box-shadow: inset 0 1px 0 rgba(56,112,204,0.12); border-radius: 1px;
}
[data-style="visualizer"] .expanded-draft-card.tier-average {
  border-color: rgba(98,122,163,0.32); background-color: rgba(98,122,163,0.03);
  background-image: none; box-shadow: inset 0 1px 0 rgba(98,122,163,0.12); border-radius: 1px;
}

/* ── Slot boxes ── */
[data-style="visualizer"] .slot-box.tier-elite,
[data-style="visualizer"] .slot-filled.tier-elite {
  border-color: rgba(136,204,68,0.28); background-color: rgba(136,204,68,0.04);
  background-image: none; border-radius: 1px;
}
[data-style="visualizer"] .slot-box.tier-great,
[data-style="visualizer"] .slot-filled.tier-great {
  border-color: rgba(40,180,180,0.22); background-image: none; border-radius: 1px;
}
[data-style="visualizer"] .slot-box.tier-good,
[data-style="visualizer"] .slot-filled.tier-good {
  border-color: rgba(56,112,204,0.18); background-image: none; border-radius: 1px;
}
[data-style="visualizer"] .slot-box.tier-average,
[data-style="visualizer"] .slot-filled.tier-average {
  border-color: rgba(98,122,163,0.18); background-image: none; border-radius: 1px;
}
[data-style="visualizer"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average),
[data-style="visualizer"] .slot-filled:not(.tier-elite):not(.tier-great):not(.tier-good) {
  border-color: rgba(255,255,255,0.06); background-image: none; border-radius: 1px;
}

/* ── Diamond pos cards ── */
[data-style="visualizer"] .diamond-pos-card.tier-elite {
  border-color: rgba(136,204,68,0.38); background-color: rgba(136,204,68,0.05);
  background-image: none; border-radius: 1px;
}
[data-style="visualizer"] .diamond-pos-card.tier-great {
  border-color: rgba(40,180,180,0.28); background-image: none; border-radius: 1px;
}
[data-style="visualizer"] .diamond-pos-card.tier-good {
  border-color: rgba(56,112,204,0.22); background-image: none; border-radius: 1px;
}
[data-style="visualizer"] .diamond-pos-card.tier-average {
  border-color: rgba(98,122,163,0.22); background-image: none; border-radius: 1px;
}

/* ── Panels — EQ bar watermark ── */
[data-style="visualizer"] .lineup-card {
  background: rgba(6,10,14,0.95);
  border-color: rgba(136,204,68,0.14);
  border-top: 1px solid rgba(136,204,68,0.30);
  box-shadow: none; border-radius: 1px;
  overflow: hidden;
}
[data-style="visualizer"] .lineup-card:not(.result-recap)::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 80px;
  background:
    linear-gradient(to top, rgba(56,112,204,0.14) 0%, transparent 48%) 4px 0/8px 100% no-repeat,
    linear-gradient(to top, rgba(56,112,204,0.14) 0%, transparent 62%) 14px 0/8px 100% no-repeat,
    linear-gradient(to top, rgba(40,180,180,0.12) 0%, transparent 72%) 24px 0/8px 100% no-repeat,
    linear-gradient(to top, rgba(40,180,180,0.12) 0%, transparent 78%) 34px 0/8px 100% no-repeat,
    linear-gradient(to top, rgba(136,204,68,0.10) 0%, transparent 84%) 44px 0/8px 100% no-repeat,
    linear-gradient(to top, rgba(136,204,68,0.08) 0%, transparent 68%) 54px 0/8px 100% no-repeat,
    linear-gradient(to top, rgba(200,160,40,0.06) 0%, transparent 52%) 64px 0/8px 100% no-repeat,
    linear-gradient(to top, rgba(200,100,40,0.05) 0%, transparent 38%) 74px 0/8px 100% no-repeat;
  pointer-events: none; z-index: 0;
}
[data-style="visualizer"] .void-panel {
  background: rgba(6,10,14,0.95);
  border-color: rgba(136,204,68,0.10);
  border-top: 1px solid rgba(136,204,68,0.22);
  border-radius: 1px;
}
[data-style="visualizer"] .roll-card { background: rgba(6,10,14,0.95); }
[data-style="visualizer"] .scoreboard,
[data-style="visualizer"] .manager-card,
[data-style="visualizer"] .highlight-card,
[data-style="visualizer"] .achievement-card,
[data-style="visualizer"] .postseason-game-tile,
[data-style="visualizer"] .postseason-mvp-tile {
  background: rgba(6,10,14,0.95);
  border-color: rgba(136,204,68,0.12);
  border-top: 1px solid rgba(136,204,68,0.22);
  border-radius: 1px; box-shadow: none;
}
[data-style="visualizer"] .modal-panel {
  background: rgba(6,10,14,0.98);
  border-color: rgba(136,204,68,0.20);
  border-top: 2px solid rgba(136,204,68,0.45);
  border-radius: 1px; box-shadow: 0 8px 40px rgba(0,0,0,0.7);
}
[data-style="visualizer"] .modal-header { border-bottom: 1px solid rgba(136,204,68,0.10); }

/* ── Lineup group header ── */
[data-style="visualizer"] .lineup-group-header {
  background: rgba(10,16,22,0.90);
  border-color: rgba(136,204,68,0.18);
  border-radius: 1px;
  font-family: 'Space Grotesk', sans-serif;
}
[data-style="visualizer"] .lineup-group-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: 0.06em; }
[data-style="visualizer"] .lineup-card-label { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: 0.10em; }

/* ── Buttons ── */
[data-style="visualizer"] .btn-primary {
  background: rgba(136,204,68,0.10); color: rgba(136,204,68,0.92);
  border: 1px solid rgba(136,204,68,0.45); border-radius: 1px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: 0.10em;
  box-shadow: none;
}
[data-style="visualizer"] .btn-primary:hover:not(:disabled) {
  background: rgba(136,204,68,0.18); transform: none; box-shadow: 0 0 12px rgba(136,204,68,0.18);
}
[data-style="visualizer"] .btn-outline { border-color: rgba(136,204,68,0.28); border-radius: 1px; }
[data-style="visualizer"] .draft-action-btn {
  background: rgba(136,204,68,0.08); color: rgba(136,204,68,0.85);
  border: 1px solid rgba(136,204,68,0.40); border-radius: 1px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: 0.08em; box-shadow: none;
}
[data-style="visualizer"] .tier-great .draft-action-btn {
  background: rgba(40,180,180,0.07); color: rgba(40,180,180,0.80); border-color: rgba(40,180,180,0.35);
}
[data-style="visualizer"] .tier-good .draft-action-btn {
  background: rgba(56,112,204,0.07); color: rgba(56,112,204,0.75); border-color: rgba(56,112,204,0.30);
}
[data-style="visualizer"] .btn-reroll { border-radius: 1px; }
[data-style="visualizer"] .btn-share-result { border-radius: 1px; color: rgba(136,204,68,0.80); border-color: rgba(136,204,68,0.35); }

/* ── Interactive states ── */
[data-style="visualizer"] .player-pos,
[data-style="visualizer"] .slot-box-pos {
  background: rgba(136,204,68,0.08); color: rgba(136,204,68,0.82);
  border-color: rgba(136,204,68,0.30); border-radius: 1px;
}
[data-style="visualizer"] .pending-confirm {
  border-color: rgba(136,204,68,0.82); background: rgba(136,204,68,0.12);
  color: rgba(136,204,68,0.95); box-shadow: 0 0 12px rgba(136,204,68,0.20);
}
[data-style="visualizer"] .picker-active,
[data-style="visualizer"] .swap-active {
  border-color: rgba(136,204,68,0.60); box-shadow: 0 0 12px rgba(136,204,68,0.14);
}
[data-style="visualizer"] .natural {
  border-color: rgba(136,204,68,0.38); color: rgba(136,204,68,0.80);
  background: rgba(136,204,68,0.06); border-radius: 1px;
}
[data-style="visualizer"] .selected {
  border-color: rgba(136,204,68,0.60); background: rgba(136,204,68,0.08);
  color: rgba(136,204,68,0.90); box-shadow: 0 0 10px rgba(136,204,68,0.14);
}

/* ── Badges ── */
[data-style="visualizer"] .hof-badge,
[data-style="visualizer"] .ace-badge,
[data-style="visualizer"] .clutch-badge,
[data-style="visualizer"] .ironman-badge {
  border-radius: 1px; background: rgba(136,204,68,0.10);
  border-color: rgba(136,204,68,0.35); color: rgba(136,204,68,0.88);
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
}
[data-style="visualizer"] .settings-option.active {
  border-color: rgba(136,204,68,0.45); background: rgba(136,204,68,0.06); box-shadow: none;
}
[data-style="visualizer"] .record-banner,
[data-style="visualizer"] .postseason-champion-banner {
  border-radius: 1px; border-top: 2px solid rgba(136,204,68,0.40);
  box-shadow: 0 0 20px rgba(136,204,68,0.12);
}

/* ── Secondary elements ── */
[data-style="visualizer"] .site-header { border-bottom: 1px solid rgba(136,204,68,0.14); }
[data-style="visualizer"] .roll-box { border-color: rgba(136,204,68,0.16); border-radius: 1px; }
[data-style="visualizer"] #sandbox-panel,
[data-style="visualizer"] .sandbox-section { border-color: rgba(136,204,68,0.12); border-radius: 1px; background: rgba(6,10,14,0.95); }
[data-style="visualizer"] .result-recap,
[data-style="visualizer"] .lineup-card.result-recap { border-color: rgba(136,204,68,0.16); border-radius: 1px; }
[data-style="visualizer"] .result-tabs { border-bottom-color: rgba(136,204,68,0.14); }
[data-style="visualizer"] .result-tab.active { border-bottom-color: var(--gold); color: var(--gold); }
[data-style="visualizer"] .position-section { border-color: rgba(136,204,68,0.10); border-top-color: rgba(136,204,68,0.18); border-radius: 1px; }
[data-style="visualizer"] .postseason-qualify-banner { border-color: rgba(136,204,68,0.18); border-radius: 1px; }
[data-style="visualizer"] .highlights-ticker { border-top-color: rgba(136,204,68,0.12); }
[data-style="visualizer"] .manager-banner { border-color: rgba(136,204,68,0.12); border-radius: 1px; }
[data-style="visualizer"] .true-story-banner { border-color: rgba(136,204,68,0.16); border-radius: 1px; }
[data-style="visualizer"] .statcast-card { border-color: rgba(136,204,68,0.12); border-radius: 1px; }
[data-style="visualizer"] .player-search-input { border-color: rgba(136,204,68,0.20); border-radius: 1px; }
[data-style="visualizer"] .modal-overlay { background: rgba(0,0,0,0.82); }
[data-style="visualizer"] .slot-box-name,
[data-style="visualizer"] .slot-box-stats,
[data-style="visualizer"] .slot-box-plus,
[data-style="visualizer"] .slot-box-tag,
[data-style="visualizer"] .real-awards-line,
[data-style="visualizer"] .teammates-line { font-family: 'Space Grotesk', sans-serif; }
[data-style="visualizer"] .hc-player-name,
[data-style="visualizer"] .hc-description,
[data-style="visualizer"] .hc-player-meta { font-family: 'Space Grotesk', sans-serif; }
[data-style="visualizer"] .manager-card-body,
[data-style="visualizer"] .manager-card-info { font-family: 'Space Grotesk', sans-serif; }
[data-style="visualizer"] .modal-section-label,
[data-style="visualizer"] .section-label,
[data-style="visualizer"] .ps-stats-section-label,
[data-style="visualizer"] .roster-section-label,
[data-style="visualizer"] .opp-header { font-family: 'Space Grotesk', sans-serif; font-weight: 600; }


/* ══════════════════════════════════════════════════════════════
   GAMECUBE
   Indigo-violet bubble UI. Sphere glints, pill shapes,
   radial bubble pulse on elite. Nunito rounded weight.
   Void: #0b0820. Elite: amber-gold. Great: purple. Good: mint.
══════════════════════════════════════════════════════════════ */

[data-style="gamecube"] {
  --tier-elite:  #ffd850;
  --tier-great:  #d4a0ff;
  --tier-good:   #50e0a0;
  --tier-average: #73b397;
  --gold:        #ffd850;
  --gold-rgb:    255, 216, 80;
  --gold-bright: #ffe870;
  --purple-rgb:  212, 160, 255;
  --green-rgb:   80, 224, 160;
  --font:        'Nunito', 'IBM Plex Mono', sans-serif;
  --void:        #0b0820;
  --void-2:      #110d28;
}

[data-style="gamecube"] body { background: #0b0820; }
[data-style="gamecube"] body::before { display: none; }
[data-style="gamecube"] body::after  { display: none; }

/* Typography — Nunito rounded weight */
[data-style="gamecube"] .player-name,
[data-style="gamecube"] .diamond-pos-name,
[data-style="gamecube"] .manager-name,
[data-style="gamecube"] .brand,
[data-style="gamecube"] .modal-title,
[data-style="gamecube"] .section-label,
[data-style="gamecube"] .lineup-group-name,
[data-style="gamecube"] .lineup-card-label {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  letter-spacing: 0.04em;
}

/* Card tier treatments */
[data-style="gamecube"] .player-card.tier-elite,
[data-style="gamecube"] .expanded-draft-card.tier-elite {
  border-color: rgba(255,216,80,0.65);
  background-color: rgba(255,216,80,0.05);
  background-image: radial-gradient(ellipse at 60% 20%, rgba(255,216,80,.10) 0%, rgba(180,130,255,.06) 50%, transparent 100%);
  border-radius: 16px;
  animation: gc-bubble-pulse 2.8s ease-in-out infinite;
}
[data-style="gamecube"] .shimmer-overlay { display: none; }
@keyframes gc-bubble-pulse {
  0%,100% { box-shadow: 0 0 14px rgba(255,216,80,.18), inset 0 0 24px rgba(255,216,80,.04); border-color: rgba(255,216,80,.55); }
  50%      { box-shadow: 0 0 28px rgba(255,216,80,.32), inset 0 0 36px rgba(255,216,80,.09); border-color: rgba(255,216,80,.85); }
}
[data-style="gamecube"] .player-card.tier-great,
[data-style="gamecube"] .expanded-draft-card.tier-great {
  border-color: rgba(212,160,255,0.50);
  background-color: rgba(212,160,255,0.04);
  background-image: none;
  border-radius: 16px;
}
[data-style="gamecube"] .player-card.tier-good,
[data-style="gamecube"] .expanded-draft-card.tier-good {
  border-color: rgba(80,224,160,0.38);
  background-color: rgba(80,224,160,0.03);
  background-image: none;
  border-radius: 16px;
}
[data-style="gamecube"] .player-card.tier-average,
[data-style="gamecube"] .expanded-draft-card.tier-average {
  border-color: rgba(115,179,151,0.38);
  background-color: rgba(115,179,151,0.03);
  background-image: none;
  border-radius: 16px;
}
[data-style="gamecube"] .player-card,
[data-style="gamecube"] .expanded-draft-card { border-radius: 14px; }

/* Slot boxes */
[data-style="gamecube"] .slot-box,
[data-style="gamecube"] .slot-filled { border-radius: 14px; }
[data-style="gamecube"] .slot-box.tier-elite,
[data-style="gamecube"] .slot-filled.tier-elite {
  border-color: rgba(255,216,80,.55);
  background-color: rgba(255,216,80,.05);
  border-radius: 14px;
}
[data-style="gamecube"] .slot-box.tier-great,
[data-style="gamecube"] .slot-filled.tier-great {
  border-color: rgba(212,160,255,.42);
  background-color: rgba(212,160,255,.03);
  border-radius: 14px;
}
[data-style="gamecube"] .slot-box.tier-good,
[data-style="gamecube"] .slot-filled.tier-good {
  border-color: rgba(80,224,160,.32);
  border-radius: 14px;
}
[data-style="gamecube"] .slot-box.tier-average,
[data-style="gamecube"] .slot-filled.tier-average {
  border-color: rgba(115,179,151,.32);
  border-radius: 14px;
}

/* Diamond pos cards */
[data-style="gamecube"] .diamond-pos-card { border-radius: 12px; }
[data-style="gamecube"] .diamond-pos-card.tier-elite {
  border-color: rgba(255,216,80,.55);
  background-color: rgba(255,216,80,.05);
  border-radius: 12px;
  animation: gc-bubble-pulse 2.8s ease-in-out infinite;
}
[data-style="gamecube"] .diamond-pos-card.tier-great {
  border-color: rgba(212,160,255,.42);
  border-radius: 12px;
}
[data-style="gamecube"] .diamond-pos-card.tier-good {
  border-color: rgba(80,224,160,.32);
  border-radius: 12px;
}
[data-style="gamecube"] .diamond-pos-card.tier-average {
  border-color: rgba(115,179,151,.32);
  border-radius: 12px;
}

/* Panels */
[data-style="gamecube"] .lineup-card  { border-radius: 18px; border-color: rgba(100,70,200,.30); }
[data-style="gamecube"] .void-panel   { border-radius: 16px; border-color: rgba(100,70,200,.22); }
[data-style="gamecube"] .modal-panel  { border-radius: 20px; border-color: rgba(100,70,200,.40); background: rgba(14,10,34,.97); }
[data-style="gamecube"] .modal-header { border-bottom-color: rgba(100,70,200,.20); }
[data-style="gamecube"] .scoreboard,
[data-style="gamecube"] .manager-card,
[data-style="gamecube"] .highlight-card,
[data-style="gamecube"] .postseason-game-tile,
[data-style="gamecube"] .postseason-mvp-tile { border-radius: 14px; border-color: rgba(100,70,200,.28); }

/* Button */
[data-style="gamecube"] .btn-primary {
  background: linear-gradient(160deg, #6040c8, #4828a0);
  border: 1.5px solid #8060e0; color: #fff;
  font-family: 'Nunito', sans-serif; font-weight: 800;
  border-radius: 99px; letter-spacing: 0.04em;
}
[data-style="gamecube"] .btn-outline { border-radius: 99px; }

/* Pos pill */
[data-style="gamecube"] .player-pos,
[data-style="gamecube"] .slot-box-pos {
  border-radius: 99px;
  background: rgba(140,100,255,.15);
  color: rgba(200,160,255,.80);
  border-color: rgba(140,100,255,.35);
}

/* Swatch colours */
.swatch-gamecube-el { background: rgba(255,216,80,.22);  border: 1px solid rgba(255,216,80,.60); }
.swatch-gamecube-gr { background: rgba(212,160,255,.20); border: 1px solid rgba(212,160,255,.55); }
.swatch-gamecube-go { background: rgba(80,224,160,.18);  border: 1px solid rgba(80,224,160,.50); }


/* ══════════════════════════════════════════════════════════════
   PLAYSTATION 2
   Pure black void. Single thin blue bottom-edge light line.
   Restraint is the effect. Elite: barely brighter border only.
   No shimmer. No glow. Rajdhani mono-weight.
══════════════════════════════════════════════════════════════ */

[data-style="ps2"] {
  --tier-elite:  #4488ff;
  --tier-great:  #1f3f99;
  --tier-good:   #0d2255;
  --tier-average: #242d44;
  --gold:        #4488ff;
  --gold-rgb:    68, 136, 255;
  --gold-bright: #66aaff;
  --purple-rgb:  31, 63, 153;
  --green-rgb:   13, 34, 85;
  --font:        'Rajdhani', 'Share Tech Mono', monospace;
  --void:        #000000;
  --void-2:      #050810;
}

[data-style="ps2"] body { background: #000; }
[data-style="ps2"] body::before { display: none; }
[data-style="ps2"] body::after  { display: none; }

/* Typography */
[data-style="ps2"] .player-name,
[data-style="ps2"] .diamond-pos-name,
[data-style="ps2"] .manager-name,
[data-style="ps2"] .brand,
[data-style="ps2"] .modal-title,
[data-style="ps2"] .section-label,
[data-style="ps2"] .lineup-group-name,
[data-style="ps2"] .lineup-card-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Shimmer — suppressed entirely. The bottom line is the effect. */
[data-style="ps2"] .shimmer-overlay { display: none; }

/* Card tier — elite gets brighter border + intensified bottom line */
[data-style="ps2"] .player-card,
[data-style="ps2"] .expanded-draft-card {
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
[data-style="ps2"] .player-card::after,
[data-style="ps2"] .expanded-draft-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #0044cc 25%, #44aaff 50%, #0044cc 75%, transparent);
  pointer-events: none;
}
[data-style="ps2"] .player-card.tier-elite,
[data-style="ps2"] .expanded-draft-card.tier-elite {
  border-color: rgba(68,136,255,0.65);
  background-color: rgba(68,136,255,0.03);
  background-image: none;
  box-shadow: none;
  border-radius: 0;
}
[data-style="ps2"] .player-card.tier-elite::after,
[data-style="ps2"] .expanded-draft-card.tier-elite::after {
  background: linear-gradient(90deg, transparent, #0055ff 18%, #88ccff 50%, #0055ff 82%, transparent);
  height: 1px;
}
[data-style="ps2"] .player-card.tier-great,
[data-style="ps2"] .expanded-draft-card.tier-great {
  border-color: rgba(31,63,153,0.55);
  background-image: none;
  border-radius: 0;
}
[data-style="ps2"] .player-card.tier-good,
[data-style="ps2"] .expanded-draft-card.tier-good {
  border-color: rgba(13,34,85,0.45);
  background-image: none;
  border-radius: 0;
}
[data-style="ps2"] .player-card.tier-average,
[data-style="ps2"] .expanded-draft-card.tier-average {
  border-color: rgba(36,45,68,0.45);
  background-image: none;
  border-radius: 0;
}

/* Slots */
[data-style="ps2"] .slot-box,
[data-style="ps2"] .slot-filled { border-radius: 0; }
[data-style="ps2"] .slot-box.tier-elite,
[data-style="ps2"] .slot-filled.tier-elite { border-color: rgba(68,136,255,.50); border-radius: 0; }
[data-style="ps2"] .slot-box.tier-great,
[data-style="ps2"] .slot-filled.tier-great { border-color: rgba(31,63,153,.38); border-radius: 0; }
[data-style="ps2"] .slot-box.tier-good,
[data-style="ps2"] .slot-filled.tier-good  { border-color: rgba(13,34,85,.30);  border-radius: 0; }
[data-style="ps2"] .slot-box.tier-average,
[data-style="ps2"] .slot-filled.tier-average { border-color: rgba(36,45,68,.30);  border-radius: 0; }
[data-style="ps2"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average) { border-radius: 0; }

/* Diamond cards */
[data-style="ps2"] .diamond-pos-card { border-radius: 0; position: relative; overflow: hidden; }
[data-style="ps2"] .diamond-pos-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #0044cc, transparent);
  pointer-events: none;
}
[data-style="ps2"] .diamond-pos-card.tier-elite { border-color: rgba(68,136,255,.55); border-radius: 0; }
[data-style="ps2"] .diamond-pos-card.tier-great { border-color: rgba(31,63,153,.40); border-radius: 0; }
[data-style="ps2"] .diamond-pos-card.tier-good  { border-color: rgba(13,34,85,.30);  border-radius: 0; }

/* Panels */
[data-style="ps2"] .lineup-card,
[data-style="ps2"] .void-panel { border-radius: 0; border-color: rgba(0,34,136,.35); position: relative; }
[data-style="ps2"] .lineup-card::before,
[data-style="ps2"] .void-panel::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #0044cc 30%, #44aaff 50%, #0044cc 70%, transparent);
  pointer-events: none;
}
[data-style="ps2"] .modal-panel {
  border-radius: 0; border-color: rgba(0,68,204,.45);
  background: rgba(2,4,16,.98);
}
[data-style="ps2"] .modal-header { border-bottom: 1px solid rgba(0,34,136,.30); }
[data-style="ps2"] .scoreboard,
[data-style="ps2"] .manager-card,
[data-style="ps2"] .highlight-card,
[data-style="ps2"] .postseason-game-tile,
[data-style="ps2"] .postseason-mvp-tile { border-radius: 0; border-color: rgba(0,34,136,.35); }

/* Button */
[data-style="ps2"] .btn-primary {
  background: #000; border: 1px solid #0044cc; color: #4488ff;
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  border-radius: 0; letter-spacing: 0.12em; text-transform: uppercase;
}
[data-style="ps2"] .btn-outline { border-radius: 0; }

/* Pos label */
[data-style="ps2"] .player-pos,
[data-style="ps2"] .slot-box-pos {
  background: transparent; color: rgba(68,136,255,.70);
  border-color: rgba(0,68,204,.40); border-radius: 0;
}

.swatch-ps2-el { background: rgba(68,136,255,.18);  border: 1px solid rgba(68,136,255,.55); }
.swatch-ps2-gr { background: rgba(31,63,153,.16);   border: 1px solid rgba(31,63,153,.45); }
.swatch-ps2-go { background: rgba(13,34,85,.14);    border: 1px solid rgba(13,34,85,.35); }


/* ══════════════════════════════════════════════════════════════
   XBOX (Original dashboard — blades)
   Deep olive-black void. Green blade left-border accents.
   Elite: double-cut diamond clip-path + green left-to-right sweep.
   All sharp angles, no rounded corners. Rajdhani.
══════════════════════════════════════════════════════════════ */

[data-style="xbox"] {
  --tier-elite:  #2aca2a;
  --tier-great:  #107c10;
  --tier-good:   #0d5a0d;
  --tier-average: #264826;
  --gold:        #2aca2a;
  --gold-rgb:    42, 202, 42;
  --gold-bright: #44dd44;
  --purple-rgb:  16, 124, 16;
  --green-rgb:   13, 90, 13;
  --font:        'Rajdhani', 'IBM Plex Mono', sans-serif;
  --void:        #060a06;
  --void-2:      #0a100a;
}

[data-style="xbox"] body { background: #060a06; }
[data-style="xbox"] body::before { display: none; }
[data-style="xbox"] body::after  { display: none; }

/* Typography */
[data-style="xbox"] .player-name,
[data-style="xbox"] .diamond-pos-name,
[data-style="xbox"] .manager-name,
[data-style="xbox"] .brand,
[data-style="xbox"] .modal-title,
[data-style="xbox"] .section-label,
[data-style="xbox"] .lineup-group-name,
[data-style="xbox"] .lineup-card-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Shimmer — replaced with green left-to-right sweep on elite */
[data-style="xbox"] .shimmer-overlay { display: none; }

/* Card tier */
[data-style="xbox"] .player-card,
[data-style="xbox"] .expanded-draft-card {
  border-radius: 0;
  border-left: 3px solid rgba(16,124,16,.50);
  overflow: hidden;
}
[data-style="xbox"] .player-card.tier-elite,
[data-style="xbox"] .expanded-draft-card.tier-elite {
  border-left-color: #2aca2a;
  border-color: rgba(42,202,42,.10); /* other borders dim */
  border-left: 3px solid #2aca2a;
  background-color: rgba(42,202,42,.04);
  background-image: none;
  box-shadow: 0 0 16px rgba(42,202,42,.18), inset 0 0 24px rgba(42,202,42,.04);
  clip-path: polygon(14px 0%, calc(100% - 14px) 0%, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0% calc(100% - 14px), 0% 14px);
  border-radius: 0;
  position: relative;
}
/* Green sweep injected via ::before on elite */
[data-style="xbox"] .player-card.tier-elite::before,
[data-style="xbox"] .expanded-draft-card.tier-elite::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(42,202,42,.16) 50%, transparent 100%);
  animation: xbox-sweep 3s ease-in-out infinite;
}
@keyframes xbox-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
[data-style="xbox"] .player-card.tier-great,
[data-style="xbox"] .expanded-draft-card.tier-great {
  border-left-color: rgba(16,124,16,.80);
  background-image: none;
  border-radius: 0;
  clip-path: polygon(14px 0%,100% 0%,100% 100%,0% 100%,0% 14px);
}
[data-style="xbox"] .player-card.tier-good,
[data-style="xbox"] .expanded-draft-card.tier-good {
  border-left-color: rgba(13,90,13,.65);
  background-image: none;
  border-radius: 0;
  clip-path: polygon(14px 0%,100% 0%,100% 100%,0% 100%,0% 14px);
}
[data-style="xbox"] .player-card.tier-average,
[data-style="xbox"] .expanded-draft-card.tier-average {
  border-left-color: rgba(38,72,38,.65);
  background-image: none;
  border-radius: 0;
  clip-path: polygon(14px 0%,100% 0%,100% 100%,0% 100%,0% 14px);
}
[data-style="xbox"] .player-card:not(.tier-elite):not(.tier-great):not(.tier-good),
[data-style="xbox"] .expanded-draft-card:not(.tier-elite):not(.tier-great):not(.tier-good) {
  clip-path: polygon(14px 0%,100% 0%,100% 100%,0% 100%,0% 14px);
  border-radius: 0;
}

/* Slots */
[data-style="xbox"] .slot-box,
[data-style="xbox"] .slot-filled {
  border-radius: 0;
  border-left: 2px solid rgba(13,90,13,.50);
  clip-path: polygon(10px 0%,100% 0%,100% 100%,0% 100%,0% 10px);
}
[data-style="xbox"] .slot-box.tier-elite,
[data-style="xbox"] .slot-filled.tier-elite {
  border-left-color: #2aca2a;
  clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
  border-radius: 0;
}
[data-style="xbox"] .slot-box.tier-great,
[data-style="xbox"] .slot-filled.tier-great { border-left-color: rgba(16,124,16,.70); border-radius: 0; }
[data-style="xbox"] .slot-box.tier-good,
[data-style="xbox"] .slot-filled.tier-good  { border-left-color: rgba(13,90,13,.50); border-radius: 0; }
[data-style="xbox"] .slot-box.tier-average,
[data-style="xbox"] .slot-filled.tier-average { border-left-color: rgba(38,72,38,.50); border-radius: 0; }
[data-style="xbox"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average) { border-radius: 0; }

/* Diamond pos cards */
[data-style="xbox"] .diamond-pos-card {
  border-radius: 0;
  border-left: 2px solid rgba(16,124,16,.55);
  clip-path: polygon(10px 0%,100% 0%,100% 100%,0% 100%,0% 10px);
}
[data-style="xbox"] .diamond-pos-card.tier-elite {
  border-left-color: #2aca2a;
  clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
  box-shadow: 0 0 10px rgba(42,202,42,.14);
  border-radius: 0;
}
[data-style="xbox"] .diamond-pos-card.tier-great { border-left-color: rgba(16,124,16,.65); border-radius: 0; }
[data-style="xbox"] .diamond-pos-card.tier-good  { border-left-color: rgba(13,90,13,.45); border-radius: 0; }

/* Panels */
[data-style="xbox"] .lineup-card {
  border-radius: 0; border-left: 3px solid rgba(16,124,16,.40);
  clip-path: polygon(14px 0%,100% 0%,100% 100%,0% 100%,0% 14px);
}
[data-style="xbox"] .void-panel {
  border-radius: 0; border-left: 2px solid rgba(16,124,16,.30);
}
[data-style="xbox"] .modal-panel {
  border-radius: 0; border-left: 3px solid rgba(42,202,42,.40);
  clip-path: polygon(14px 0%,100% 0%,100% 100%,0% 100%,0% 14px);
  background: rgba(4,8,4,.98);
}
[data-style="xbox"] .modal-header { border-bottom-color: rgba(16,124,16,.25); }
[data-style="xbox"] .scoreboard,
[data-style="xbox"] .manager-card,
[data-style="xbox"] .highlight-card,
[data-style="xbox"] .postseason-game-tile,
[data-style="xbox"] .postseason-mvp-tile {
  border-radius: 0; border-left: 2px solid rgba(16,124,16,.35);
  clip-path: polygon(10px 0%,100% 0%,100% 100%,0% 100%,0% 10px);
}

/* Opponent surfaces — BLU-equivalent (steel accent) */
[data-style="xbox"] .opp-header { color: rgba(42,202,42,.50); }

/* Button */
[data-style="xbox"] .btn-primary {
  background: linear-gradient(180deg,#1a8a1a,#0e5a0e);
  border: none; color: #fff;
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  border-radius: 0; letter-spacing: 0.12em; text-transform: uppercase;
  clip-path: polygon(8px 0%,100% 0%,100% 100%,0% 100%,0% 8px);
}
[data-style="xbox"] .btn-outline {
  border-radius: 0; border-left: 2px solid rgba(42,202,42,.40);
}

/* Pos label */
[data-style="xbox"] .player-pos,
[data-style="xbox"] .slot-box-pos {
  background: transparent; color: rgba(42,202,42,.65);
  border-color: rgba(16,124,16,.40); border-radius: 0;
}

.swatch-xbox-el { background: rgba(42,202,42,.18);  border: 1px solid rgba(42,202,42,.55); }
.swatch-xbox-gr { background: rgba(16,124,16,.16);  border: 1px solid rgba(16,124,16,.45); }
.swatch-xbox-go { background: rgba(13,90,13,.14);   border: 1px solid rgba(13,90,13,.38); }


/* ══════════════════════════════════════════════════════════════
   WINDOWS XP (Luna theme)
   Dark navy void. Blue title bar gradient on cards/panels.
   Green pill button (Start button style). Blue-silver shimmer.
   Rajdhani / Share Tech Mono.
══════════════════════════════════════════════════════════════ */

[data-style="winxp"] {
  --tier-elite:  #5588ff;
  --tier-great:  #3355bb;
  --tier-good:   #1a3a88;
  --tier-average: #3c4a6c;
  --gold:        #5588ff;
  --gold-rgb:    85, 136, 255;
  --gold-bright: #7799ff;
  --purple-rgb:  51, 85, 187;
  --green-rgb:   26, 58, 136;
  --font:        'Rajdhani', 'Share Tech Mono', sans-serif;
  --void:        #06080f;
  --void-2:      #0c1228;
}

[data-style="winxp"] body { background: #06080f; }
[data-style="winxp"] body::before { display: none; }
[data-style="winxp"] body::after  { display: none; }

/* Typography */
[data-style="winxp"] .player-name,
[data-style="winxp"] .diamond-pos-name,
[data-style="winxp"] .manager-name,
[data-style="winxp"] .brand,
[data-style="winxp"] .modal-title,
[data-style="winxp"] .section-label,
[data-style="winxp"] .lineup-group-name,
[data-style="winxp"] .lineup-card-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Cards — XP title bar strip as top accent, blue-silver shimmer on elite */
[data-style="winxp"] .player-card,
[data-style="winxp"] .expanded-draft-card {
  border-radius: 5px 5px 3px 3px;
  border-top: 3px solid rgba(30,60,200,.70);
  background-image: linear-gradient(180deg, rgba(30,60,220,.12) 0%, transparent 20%);
  overflow: hidden;
}
[data-style="winxp"] .player-card.tier-elite,
[data-style="winxp"] .expanded-draft-card.tier-elite {
  border-top: 3px solid rgba(60,96,238,.95);
  border-color: rgba(34,68,204,.55);
  background-color: rgba(34,68,204,.06);
  background-image: linear-gradient(180deg, rgba(48,96,238,.20) 0%, transparent 22%);
  box-shadow: 0 0 14px rgba(60,100,240,.22), inset 0 0 0 1px rgba(80,130,255,.10);
  border-radius: 5px 5px 3px 3px;
}
/* Shimmer — XP blue-silver sweep */
[data-style="winxp"] .shimmer-overlay::before {
  background: linear-gradient(90deg, transparent, rgba(80,140,255,.18) 50%, transparent);
}
[data-style="winxp"] .player-card.tier-great,
[data-style="winxp"] .expanded-draft-card.tier-great {
  border-top: 3px solid rgba(30,60,180,.70);
  background-image: linear-gradient(180deg, rgba(30,60,180,.10) 0%, transparent 20%);
  border-radius: 5px 5px 3px 3px;
}
[data-style="winxp"] .player-card.tier-good,
[data-style="winxp"] .expanded-draft-card.tier-good {
  border-top: 3px solid rgba(20,40,140,.55);
  background-image: none;
  border-radius: 5px 5px 3px 3px;
}
[data-style="winxp"] .player-card.tier-average,
[data-style="winxp"] .expanded-draft-card.tier-average {
  border-top: 3px solid rgba(20,40,140,.55);
  background-image: none;
  border-radius: 5px 5px 3px 3px;
}

/* Slots */
[data-style="winxp"] .slot-box,
[data-style="winxp"] .slot-filled {
  border-radius: 4px; border-color: rgba(20,40,140,.40);
  background-color: rgba(8,14,32,.60);
}
[data-style="winxp"] .slot-box.tier-elite,
[data-style="winxp"] .slot-filled.tier-elite {
  border-color: rgba(60,96,238,.50); background-color: rgba(34,68,204,.05); border-radius: 4px;
}
[data-style="winxp"] .slot-box.tier-great,
[data-style="winxp"] .slot-filled.tier-great {
  border-color: rgba(30,60,180,.40); border-radius: 4px;
}
[data-style="winxp"] .slot-box.tier-good,
[data-style="winxp"] .slot-filled.tier-good  { border-radius: 4px; }
[data-style="winxp"] .slot-box.tier-average,
[data-style="winxp"] .slot-filled.tier-average { border-radius: 4px; }
[data-style="winxp"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average) { border-radius: 4px; }

/* Diamond pos cards — mini title bar */
[data-style="winxp"] .diamond-pos-card {
  border-radius: 4px 4px 2px 2px;
  border-top: 2px solid rgba(30,60,200,.65);
  background-image: linear-gradient(180deg, rgba(30,60,220,.14) 0%, transparent 30%);
}
[data-style="winxp"] .diamond-pos-card.tier-elite {
  border-top: 2px solid rgba(60,96,238,.90);
  border-color: rgba(60,96,238,.40);
  box-shadow: 0 0 10px rgba(60,100,240,.18);
  border-radius: 4px 4px 2px 2px;
}
[data-style="winxp"] .diamond-pos-card.tier-great { border-top: 2px solid rgba(30,60,180,.70); border-radius: 4px 4px 2px 2px; }
[data-style="winxp"] .diamond-pos-card.tier-good  { border-radius: 4px 4px 2px 2px; }

/* Panels */
[data-style="winxp"] .lineup-card {
  border-radius: 5px 5px 3px 3px;
  border-top: 3px solid rgba(30,60,180,.50);
  background-image: linear-gradient(180deg, rgba(20,50,180,.08) 0%, transparent 15%);
}
[data-style="winxp"] .void-panel {
  border-radius: 4px; border-top: 2px solid rgba(30,60,180,.35);
}
[data-style="winxp"] .modal-panel {
  border-radius: 5px 5px 3px 3px;
  border: 1px solid rgba(30,60,180,.45);
  border-top: none;
  background: rgba(8,12,28,.98);
  overflow: hidden;
  padding: 0;
}
/* Restore panel padding for all direct children except the injected title bar */
[data-style="winxp"] .modal-panel .modal-body {
  padding: 20px 30px 30px;
}
[data-style="winxp"] .modal-panel > .btn-outline-small,
[data-style="winxp"] .modal-panel > .btn-primary,
[data-style="winxp"] .modal-panel > button {
  margin: 0 30px 16px;
  display: block;
}
[data-style="winxp"] .modal-panel > .lede,
[data-style="winxp"] .modal-panel > p {
  padding: 0 30px 20px;
  display: block;
}
[data-style="winxp"] .modal-header {
  background: none;
  border-bottom: 1px solid rgba(30,60,180,.22);
  padding: 14px 30px 12px;
  margin: 0;
  border-radius: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
[data-style="winxp"] .modal-header::before { display: none; }
[data-style="winxp"] .modal-header::after  { display: none; }
[data-style="winxp"] .modal-title { color: rgba(180,210,255,.85) !important; }
[data-style="winxp"] .modal-close.xp-hidden { display: none; }

/* XP injected title bar — rendered as first child of modal-panel, before modal-header */
[data-style="winxp"] .xp-titlebar-injected {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  background: linear-gradient(180deg, #3a6af0 0%, #1e42d8 45%, #1432c0 100%);
  border-bottom: 1px solid #0a1aa0;
  flex-shrink: 0;
}
[data-style="winxp"] .xp-tb-icon {
  width: 12px; height: 12px;
  background: #5088ff;
  border-radius: 2px;
  flex-shrink: 0;
  display: inline-block;
}
[data-style="winxp"] .xp-tb-title {
  font-size: 11px; font-weight: 700; color: #fff;
  font-family: 'Rajdhani', sans-serif; letter-spacing: 0.04em;
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 1px 1px 1px rgba(0,0,60,.6); line-height: 1;
}
[data-style="winxp"] .xp-tb-btns {
  display: flex; gap: 2px; margin-left: auto; flex-shrink: 0;
}
[data-style="winxp"] .xp-tb-btn {
  width: 16px; height: 14px; border-radius: 2px;
  font-size: 8px; font-weight: 700; font-family: sans-serif;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; cursor: default; user-select: none;
}
[data-style="winxp"] .xp-tb-min,
[data-style="winxp"] .xp-tb-max { background: #2a52e0; border: 1px solid #4a72ff; color: #aaccff; }
[data-style="winxp"] .xp-tb-cls { background: #cc2020; border: 1px solid #ff4444; color: #fff; cursor: pointer; }
[data-style="winxp"] .xp-tb-cls:hover { background: #ee2222; }

/* Restore top borders that were removed when luna bars were added */
[data-style="winxp"] .scoreboard,
[data-style="winxp"] .manager-card,
[data-style="winxp"] .highlight-card {
  border-top: 2px solid rgba(30,60,180,.45);
  border-radius: 4px;
  overflow: visible;
}
[data-style="winxp"] .scoreboard::before,
[data-style="winxp"] .highlight-card::before,
[data-style="winxp"] .lineup-card::before { display: none; content: none; }
[data-style="winxp"] .lineup-card {
  border-top: 3px solid rgba(30,60,180,.50);
  overflow: visible;
  border-radius: 5px 5px 3px 3px;
}
[data-style="winxp"] .postseason-game-tile,
[data-style="winxp"] .postseason-mvp-tile {
  border-top: 2px solid rgba(30,60,200,.45);
  overflow: visible;
  border-radius: 4px;
}
[data-style="winxp"] .postseason-game-tile:hover,
[data-style="winxp"] .postseason-mvp-tile:hover {
  border-top-color: rgba(80,120,255,.75);
}
[data-style="winxp"] .postseason-game-tile::before,
[data-style="winxp"] .postseason-mvp-tile::before { display: none; content: none; }


/* Green pill button — XP Start button */
[data-style="winxp"] .btn-primary {
  background: linear-gradient(180deg, #3a9a3a 0%, #2a7a2a 50%, #1e5a1e 100%);
  border: 1px solid #50b050; color: #fff;
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  border-radius: 12px; letter-spacing: 0.06em;
}
[data-style="winxp"] .btn-outline { border-radius: 4px; }

/* Pos label */
[data-style="winxp"] .player-pos,
[data-style="winxp"] .slot-box-pos {
  background: rgba(8,14,40,.60); color: rgba(85,136,255,.75);
  border-color: rgba(30,60,180,.40); border-radius: 3px;
}

.swatch-winxp-el { background: rgba(85,136,255,.20);  border: 1px solid rgba(85,136,255,.55); }
.swatch-winxp-gr { background: rgba(51,85,187,.17);   border: 1px solid rgba(51,85,187,.48); }
.swatch-winxp-go { background: rgba(26,58,136,.14);   border: 1px solid rgba(26,58,136,.40); }


/* ══════════════════════════════════════════════════════════════
   EUROBEAT / INITIAL D
   Touge midnight. Red #cc0000, yellow #ffcc00, white.
   Angled clip-path corners on everything. Japanese text via
   Noto Serif JP. Diagonal headlight beam sweep on elite.
   Speed line repeating-linear-gradient body texture.
══════════════════════════════════════════════════════════════ */

[data-style="eurobeat"] {
  --tier-elite:  #ffcc00;
  --tier-great:  #cc0000;
  --tier-good:   #888888;
  --tier-average: #6c6c6c;
  --gold:        #ffcc00;
  --gold-rgb:    255, 204, 0;
  --gold-bright: #ffdd33;
  --purple-rgb:  204, 0, 0;
  --green-rgb:   136, 136, 136;
  --font:        'Bebas Neue', 'Rajdhani', sans-serif;
  --void:        #04040e;
  --void-2:      #08081a;
}

[data-style="eurobeat"] body {
  background:
    repeating-linear-gradient(75deg, transparent, transparent 9px, rgba(255,255,255,.018) 9px, rgba(255,255,255,.018) 10px),
    #04040e;
}
[data-style="eurobeat"] body::before { display: none; }
/* Racing stripe — positioned relative to body top, below the app header */
[data-style="eurobeat"] body::after {
  content: '';
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  pointer-events: none; z-index: 1; animation: none; width: 100%;
  background: linear-gradient(90deg, #cc0000 0%, #cc0000 55%, #ffcc00 55%, #ffcc00 77%, #fff 77%, #fff 100%);
}

/* Typography */
[data-style="eurobeat"] .player-name,
[data-style="eurobeat"] .diamond-pos-name,
[data-style="eurobeat"] .manager-name,
[data-style="eurobeat"] .brand,
[data-style="eurobeat"] .modal-title,
[data-style="eurobeat"] .section-label,
[data-style="eurobeat"] .lineup-group-name,
[data-style="eurobeat"] .lineup-card-label {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.10em;
}

/* Shimmer — diagonal yellow headlight beam */
[data-style="eurobeat"] .shimmer-overlay::before {
  background: linear-gradient(115deg, transparent 20%, rgba(255,204,0,.16) 50%, transparent 80%);
  animation-duration: 2.5s;
}

/* Cards — angled corner clip-path */
[data-style="eurobeat"] .player-card,
[data-style="eurobeat"] .expanded-draft-card {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  border-color: rgba(136,0,0,.55);
  position: relative; overflow: hidden;
}
/* bottom speed stripe */
[data-style="eurobeat"] .player-card::after,
[data-style="eurobeat"] .expanded-draft-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #cc0000, #ff4400 40%, transparent);
  pointer-events: none;
}
[data-style="eurobeat"] .player-card.tier-elite,
[data-style="eurobeat"] .expanded-draft-card.tier-elite {
  border-color: rgba(204,0,0,.80);
  background-color: rgba(204,0,0,.04);
  background-image: none;
  box-shadow: 0 0 18px rgba(200,0,0,.16), inset 0 1px 0 rgba(255,80,0,.18);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  border-radius: 0;
}
[data-style="eurobeat"] .player-card.tier-great,
[data-style="eurobeat"] .expanded-draft-card.tier-great {
  border-color: rgba(136,0,0,.55);
  background-image: none; border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
[data-style="eurobeat"] .player-card.tier-good,
[data-style="eurobeat"] .expanded-draft-card.tier-good {
  border-color: rgba(80,0,0,.40);
  background-image: none; border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
[data-style="eurobeat"] .player-card.tier-average,
[data-style="eurobeat"] .expanded-draft-card.tier-average {
  border-color: rgba(80,0,0,.40);
  background-image: none; border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
[data-style="eurobeat"] .player-card:not(.tier-elite):not(.tier-great):not(.tier-good),
[data-style="eurobeat"] .expanded-draft-card:not(.tier-elite):not(.tier-great):not(.tier-good) {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  border-radius: 0;
}

/* Slots */
[data-style="eurobeat"] .slot-box,
[data-style="eurobeat"] .slot-filled {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
[data-style="eurobeat"] .slot-box.tier-elite,
[data-style="eurobeat"] .slot-filled.tier-elite  { border-color: rgba(204,0,0,.55); border-radius: 0; }
[data-style="eurobeat"] .slot-box.tier-great,
[data-style="eurobeat"] .slot-filled.tier-great  { border-color: rgba(136,0,0,.42); border-radius: 0; }
[data-style="eurobeat"] .slot-box.tier-good,
[data-style="eurobeat"] .slot-filled.tier-good   { border-color: rgba(60,0,0,.32);  border-radius: 0; }
[data-style="eurobeat"] .slot-box.tier-average,
[data-style="eurobeat"] .slot-filled.tier-average { border-color: rgba(60,0,0,.32);  border-radius: 0; }
[data-style="eurobeat"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average) { border-radius: 0; }

/* Diamond pos cards */
[data-style="eurobeat"] .diamond-pos-card {
  border-radius: 0; border-color: rgba(136,0,0,.45);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  position: relative; overflow: hidden;
}
[data-style="eurobeat"] .diamond-pos-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, #cc0000, transparent);
  pointer-events: none;
}
[data-style="eurobeat"] .diamond-pos-card.tier-elite {
  border-color: rgba(204,0,0,.70);
  box-shadow: 0 0 10px rgba(200,0,0,.14);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  border-radius: 0;
}
[data-style="eurobeat"] .diamond-pos-card.tier-great { border-color: rgba(136,0,0,.50); border-radius: 0; }
[data-style="eurobeat"] .diamond-pos-card.tier-good  { border-color: rgba(80,0,0,.35);  border-radius: 0; }

/* Panels */
[data-style="eurobeat"] .lineup-card {
  border-radius: 0; border-color: rgba(136,0,0,.35);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  position: relative; overflow: hidden;
}
[data-style="eurobeat"] .lineup-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #cc0000 60%, #ffcc00 80%, #fff 100%);
  pointer-events: none;
}
[data-style="eurobeat"] .void-panel {
  border-radius: 0; border-color: rgba(100,0,0,.28);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
[data-style="eurobeat"] .modal-panel {
  border-radius: 0; border-color: rgba(136,0,0,.55);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  background: rgba(4,4,14,.98);
}
[data-style="eurobeat"] .modal-header { border-bottom-color: rgba(136,0,0,.30); }
[data-style="eurobeat"] .scoreboard,
[data-style="eurobeat"] .manager-card,
[data-style="eurobeat"] .highlight-card,
[data-style="eurobeat"] .postseason-game-tile,
[data-style="eurobeat"] .postseason-mvp-tile {
  border-radius: 0; border-color: rgba(100,0,0,.40);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

/* Opponent score — dim white rather than RED on RED */
[data-style="eurobeat"] .opp-header { color: rgba(255,255,255,.30); letter-spacing: 0.14em; font-family: 'Bebas Neue', sans-serif; }

/* Button */
[data-style="eurobeat"] .btn-primary {
  background: #cc0000; border: none; color: #fff;
  font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.16em;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
[data-style="eurobeat"] .btn-outline {
  border-radius: 0; border-color: rgba(136,0,0,.50);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

/* Pos label */
[data-style="eurobeat"] .player-pos,
[data-style="eurobeat"] .slot-box-pos {
  background: transparent; color: rgba(204,0,0,.70);
  border-color: rgba(136,0,0,.40); border-radius: 0;
  font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.12em;
}


.swatch-eurobeat-el { background: rgba(255,204,0,.22);  border: 1px solid rgba(255,204,0,.60); }
.swatch-eurobeat-gr { background: rgba(204,0,0,.18);    border: 1px solid rgba(204,0,0,.55); }
.swatch-eurobeat-go { background: rgba(136,136,136,.15); border: 1px solid rgba(136,136,136,.40); }


/* ══════════════════════════════════════════════════════════════
   TF2 / 1950s PROPAGANDA
   RED team (#b03010) vs BLU team (#6a9ab0).
   Warm olive-black void #0d0b08. Hard offset drop-shadow cards.
   No glow, no shimmer. Hatch overlay + stamp on elite.
   Muted military tier palette. Bebas Neue.
══════════════════════════════════════════════════════════════ */

[data-style="tf2"] {
  --tier-elite:  #b03010;
  --tier-great:  #a07010;
  --tier-good:   #485868;
  --tier-average: #454c53;
  --gold:        #b03010;
  --gold-rgb:    176, 48, 16;
  --gold-bright: #c83818;
  --purple-rgb:  160, 112, 16;
  --green-rgb:   72, 88, 104;
  --font:        'Oswald', 'IBM Plex Mono', sans-serif;
  --void:        #0d0b08;
  --void-2:      #131008;
}

[data-style="tf2"] body {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(255,255,255,.012) 6px, rgba(255,255,255,.012) 7px),
    #0d0b08;
}
[data-style="tf2"] body::before { display: none; }
[data-style="tf2"] body::after  { display: none; }

/* Typography */
[data-style="tf2"] .player-name,
[data-style="tf2"] .diamond-pos-name,
[data-style="tf2"] .manager-name,
[data-style="tf2"] .brand,
[data-style="tf2"] .modal-title,
[data-style="tf2"] .section-label,
[data-style="tf2"] .lineup-group-name,
[data-style="tf2"] .lineup-card-label {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.12em;
}

/* Shimmer — suppressed entirely */
[data-style="tf2"] .shimmer-overlay { display: none; }

/* Cards — offset drop shadow, no border-radius */
[data-style="tf2"] .player-card,
[data-style="tf2"] .expanded-draft-card {
  border-radius: 0;
  border-color: rgba(46,36,24,.80);
  background-color: #131008;
  background-image: none;
  box-shadow: 3px 3px 0 #0e0c06;
}
[data-style="tf2"] .player-card.tier-elite,
[data-style="tf2"] .expanded-draft-card.tier-elite {
  border-color: rgba(90,48,8,.90);
  background-color: #181208;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.018) 5px, rgba(255,255,255,.018) 6px);
  box-shadow: 4px 4px 0 #0e0a04;
  border-radius: 0;
}
[data-style="tf2"] .player-card.tier-great,
[data-style="tf2"] .expanded-draft-card.tier-great {
  border-color: rgba(46,36,20,.80);
  background-image: none;
  box-shadow: 3px 3px 0 #0e0c06;
  border-radius: 0;
}
[data-style="tf2"] .player-card.tier-good,
[data-style="tf2"] .expanded-draft-card.tier-good {
  border-color: rgba(36,32,20,.70);
  background-image: none;
  box-shadow: 2px 2px 0 #0c0a06;
  border-radius: 0;
}
[data-style="tf2"] .player-card.tier-average,
[data-style="tf2"] .expanded-draft-card.tier-average {
  border-color: rgba(36,32,20,.70);
  background-image: none;
  box-shadow: 2px 2px 0 #0c0a06;
  border-radius: 0;
}

/* Slots */
[data-style="tf2"] .slot-box,
[data-style="tf2"] .slot-filled {
  border-radius: 0; border-color: rgba(36,28,16,.65);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(255,255,255,.012) 6px, rgba(255,255,255,.012) 12px);
  box-shadow: 2px 2px 0 #0a0806;
}
[data-style="tf2"] .slot-box.tier-elite,
[data-style="tf2"] .slot-filled.tier-elite  { border-color: rgba(90,48,8,.70); border-radius: 0; box-shadow: 3px 3px 0 #0e0a04; }
[data-style="tf2"] .slot-box.tier-great,
[data-style="tf2"] .slot-filled.tier-great  { border-color: rgba(60,40,8,.55); border-radius: 0; }
[data-style="tf2"] .slot-box.tier-good,
[data-style="tf2"] .slot-filled.tier-good   { border-radius: 0; }
[data-style="tf2"] .slot-box.tier-average,
[data-style="tf2"] .slot-filled.tier-average { border-radius: 0; }
[data-style="tf2"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average) { border-radius: 0; }

/* Diamond pos cards */
[data-style="tf2"] .diamond-pos-card {
  border-radius: 0; border-color: rgba(46,36,24,.70);
  background-color: #131008; box-shadow: 2px 2px 0 #0a0804;
}
[data-style="tf2"] .diamond-pos-card.tier-elite {
  border-color: rgba(90,48,8,.80);
  box-shadow: 3px 3px 0 #0e0a04;
  border-radius: 0;
}
[data-style="tf2"] .diamond-pos-card.tier-great { border-color: rgba(60,40,8,.55); border-radius: 0; }
[data-style="tf2"] .diamond-pos-card.tier-good  { border-radius: 0; }

/* Panels */
[data-style="tf2"] .lineup-card {
  border-radius: 0; border-color: rgba(46,36,24,.60);
  box-shadow: 4px 4px 0 #0a0806; background-image: none;
}
[data-style="tf2"] .void-panel {
  border-radius: 0; border-color: rgba(36,28,16,.50);
  box-shadow: 3px 3px 0 #080604;
}
[data-style="tf2"] .modal-panel {
  border-radius: 0; border-color: rgba(60,40,16,.70);
  box-shadow: 5px 5px 0 #0a0806; background: rgba(13,11,8,.98);
}
[data-style="tf2"] .modal-header { border-bottom-color: rgba(46,36,24,.45); }
[data-style="tf2"] .scoreboard,
[data-style="tf2"] .manager-card,
[data-style="tf2"] .highlight-card,
[data-style="tf2"] .postseason-game-tile,
[data-style="tf2"] .postseason-mvp-tile {
  border-radius: 0; border-color: rgba(46,36,24,.55);
  background-color: #100d08; box-shadow: 3px 3px 0 #0a0806;
}

/* ── RED vs BLU opponent surfaces ── */
/* W/L result label on game tiles: W = RED, L = BLU */
[data-style="tf2"] .postseason-game-tile-result.win  { color: #b03010; }
[data-style="tf2"] .postseason-game-tile-result.loss { color: #6a9ab0; }
/* Opponent comparison row header — BLU tint */
[data-style="tf2"] .opp-header { color: rgba(106,154,176,.55); letter-spacing: 0.16em; font-family: 'Bebas Neue', sans-serif; }
/* Box score: user team label stays RED, opponent label goes BLU */
[data-style="tf2"] .bs-user-team .box-score-team-label { color: rgba(176,48,16,.75); font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.14em; }
[data-style="tf2"] .bs-opp-team .box-score-team-label { color: rgba(106,154,176,.70); font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.14em; }
/* Opponent box score block — subtle BLU left border accent */
[data-style="tf2"] .bs-opp-team { border-left: 3px solid rgba(106,154,176,.35); padding-left: 8px; }
[data-style="tf2"] .bs-user-team { border-left: 3px solid rgba(176,48,16,.35); padding-left: 8px; }
/* Postseason bracket: WON = RED, ELIMINATED = BLU */
[data-style="tf2"] .postseason-bracket-round-status.won  { color: #b03010; }
[data-style="tf2"] .postseason-bracket-round-status.lost { color: #6a9ab0; }
/* Series result line */
[data-style="tf2"] .postseason-game-result-line { color: rgba(106,154,176,.60); font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.10em; }

/* Button */
[data-style="tf2"] .btn-primary {
  background: #7a1808; border: 2px solid #3a1008; color: #e8d8b0;
  font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.16em;
  border-radius: 0; box-shadow: 2px 2px 0 #1a0806;
}
[data-style="tf2"] .btn-outline {
  border-radius: 0; border-color: rgba(46,36,24,.65);
  box-shadow: 2px 2px 0 #0a0806;
}

/* Pos label */
[data-style="tf2"] .player-pos,
[data-style="tf2"] .slot-box-pos {
  background: transparent; color: rgba(176,48,16,.65);
  border-color: rgba(90,48,8,.45); border-radius: 0;
  font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.14em;
}

/* Ace/Clutch/HOF badges — warm RED stamp style */
[data-style="tf2"] .ace-badge,
[data-style="tf2"] .clutch-badge,
[data-style="tf2"] .ironman-badge,
[data-style="tf2"] .hof-badge {
  background: #7a1808; color: #e8d8b0;
  border: 1px solid #3a1008; border-radius: 0;
  font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.12em;
  box-shadow: 1px 1px 0 #1a0806;
}

.swatch-tf2-el { background: rgba(176,48,16,.22); border: 1px solid rgba(176,48,16,.60); }
.swatch-tf2-gr { background: rgba(160,112,16,.18); border: 1px solid rgba(160,112,16,.50); }
.swatch-tf2-go { background: rgba(72,88,104,.16);  border: 1px solid rgba(72,88,104,.42); }


/* ══════════════════════════════════════════════════════════════
   SHOWA ANIME
   Astro Boy / Shin-chan / Hai Yorokonde era.
   Deep warm charcoal void #0e0a06. Rust red #c84a1e accent.
   Halftone dot texture (radial-gradient dots). Conic speed
   line bursts. Amber wash sweep on elite. Noto Serif JP.
══════════════════════════════════════════════════════════════ */

[data-style="showa"] {
  --tier-elite:  #c84a1e;
  --tier-great:  #c08020;
  --tier-good:   #487040;
  --tier-average: #485944;
  --gold:        #c84a1e;
  --gold-rgb:    200, 74, 30;
  --gold-bright: #e05a28;
  --purple-rgb:  192, 128, 32;
  --green-rgb:   72, 112, 64;
  --font:        'Noto Serif JP', 'IBM Plex Mono', serif;
  --void:        #0e0a06;
  --void-2:      #130e08;
}

[data-style="showa"] body {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 13px, rgba(255,255,255,.012) 13px, rgba(255,255,255,.012) 14px),
    #0e0a06;
}
[data-style="showa"] body::before { display: none; }
[data-style="showa"] body::after  { display: none; }

/* Typography — Noto Serif JP */
[data-style="showa"] .player-name,
[data-style="showa"] .diamond-pos-name,
[data-style="showa"] .manager-name,
[data-style="showa"] .brand,
[data-style="showa"] .modal-title,
[data-style="showa"] .section-label,
[data-style="showa"] .lineup-group-name,
[data-style="showa"] .lineup-card-label {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Shimmer — warm amber wash sweep */
[data-style="showa"] .shimmer-overlay::before {
  /* Wider element + softer gradient so diagonal edges never hit the card boundary visibly */
  width: 120%;
  left: -200%;
  background: linear-gradient(135deg,
    transparent 0%,
    transparent 30%,
    rgba(220,140,40,.08) 45%,
    rgba(220,140,40,.13) 50%,
    rgba(220,140,40,.08) 55%,
    transparent 70%,
    transparent 100%
  );
}
@keyframes shimmer-showa { 0% { left: -200%; } 100% { left: 200%; } }
[data-style="showa"] .shimmer-overlay::before {
  animation-name: shimmer-showa;
  animation-duration: 4s;
}

/* Cards — halftone dot patch bottom-right, conic burst top-left */
[data-style="showa"] .player-card,
[data-style="showa"] .expanded-draft-card {
  border-radius: 2px;
  border-color: rgba(46,30,16,.80);
  background-color: #130e08;
  background-image: none;
  position: relative; overflow: hidden;
}
/* halftone bottom-right */
[data-style="showa"] .player-card::after,
[data-style="showa"] .expanded-draft-card::after {
  content: ''; position: absolute; bottom: -6px; right: -6px;
  width: 80px; height: 80px;
  background-image: radial-gradient(circle, rgba(200,130,50,.28) 1.3px, transparent 1.3px);
  background-size: 8px 8px; opacity: .7; pointer-events: none;
}
/* conic speed-line burst top-left */
[data-style="showa"] .player-card::before,
[data-style="showa"] .expanded-draft-card::before {
  content: ''; position: absolute; top: -24px; left: -24px;
  width: 90px; height: 90px;
  background: repeating-conic-gradient(rgba(200,90,20,.07) 0deg 5deg, transparent 5deg 10deg);
  border-radius: 50%; pointer-events: none;
}
[data-style="showa"] .player-card.tier-elite,
[data-style="showa"] .expanded-draft-card.tier-elite {
  border-color: rgba(90,46,16,.90);
  background-color: #150f08;
  background-image: none;
  box-shadow: 0 0 16px rgba(200,74,30,.14), inset 0 1px 0 rgba(220,130,60,.18);
  border-radius: 2px;
}
/* enlarged halftone on elite */
[data-style="showa"] .player-card.tier-elite::after,
[data-style="showa"] .expanded-draft-card.tier-elite::after {
  width: 110px; height: 110px;
  background-image: radial-gradient(circle, rgba(200,130,50,.32) 1.5px, transparent 1.5px);
  background-size: 9px 9px; opacity: .8;
}
[data-style="showa"] .player-card.tier-great,
[data-style="showa"] .expanded-draft-card.tier-great {
  border-color: rgba(60,36,10,.75);
  background-image: none; border-radius: 2px;
}
[data-style="showa"] .player-card.tier-good,
[data-style="showa"] .expanded-draft-card.tier-good {
  border-color: rgba(34,22,8,.60);
  background-image: none; border-radius: 2px;
}
[data-style="showa"] .player-card.tier-average,
[data-style="showa"] .expanded-draft-card.tier-average {
  border-color: rgba(34,22,8,.60);
  background-image: none; border-radius: 2px;
}

/* Slots */
[data-style="showa"] .slot-box,
[data-style="showa"] .slot-filled {
  border-radius: 2px; border-color: rgba(34,20,8,.55);
  background-image: repeating-linear-gradient(0deg, transparent, transparent 13px, rgba(255,255,255,.010) 13px, rgba(255,255,255,.010) 14px);
}
[data-style="showa"] .slot-box.tier-elite,
[data-style="showa"] .slot-filled.tier-elite  { border-color: rgba(90,46,16,.65); border-radius: 2px; }
[data-style="showa"] .slot-box.tier-great,
[data-style="showa"] .slot-filled.tier-great  { border-color: rgba(60,36,10,.50); border-radius: 2px; }
[data-style="showa"] .slot-box.tier-good,
[data-style="showa"] .slot-filled.tier-good   { border-color: rgba(30,20,8,.40);  border-radius: 2px; }
[data-style="showa"] .slot-box:not(.tier-elite):not(.tier-great):not(.tier-good):not(.tier-average) { border-radius: 2px; }

/* Diamond pos cards */
[data-style="showa"] .diamond-pos-card {
  border-radius: 2px; border-color: rgba(46,30,16,.65);
  background-color: #130e08; position: relative; overflow: hidden;
}
[data-style="showa"] .diamond-pos-card::after {
  content: ''; position: absolute; bottom: -4px; right: -4px;
  width: 40px; height: 40px;
  background-image: radial-gradient(circle, rgba(200,130,50,.22) 1px, transparent 1px);
  background-size: 6px 6px; opacity: .6; pointer-events: none;
}
[data-style="showa"] .diamond-pos-card.tier-elite {
  border-color: rgba(90,46,16,.75);
  box-shadow: 0 0 10px rgba(200,74,30,.12);
  border-radius: 2px;
}
[data-style="showa"] .diamond-pos-card.tier-great { border-color: rgba(60,36,10,.55); border-radius: 2px; }
[data-style="showa"] .diamond-pos-card.tier-good  { border-color: rgba(30,20,8,.40);  border-radius: 2px; }

/* Panels */
[data-style="showa"] .lineup-card {
  border-radius: 3px; border-color: rgba(46,30,16,.55);
  background-image: none; position: relative; overflow: hidden;
}
[data-style="showa"] .lineup-card::after {
  content: ''; position: absolute; bottom: -6px; right: -6px;
  width: 100px; height: 100px;
  background-image: radial-gradient(circle, rgba(200,130,50,.18) 1.2px, transparent 1.2px);
  background-size: 8px 8px; opacity: .5; pointer-events: none;
}
[data-style="showa"] .void-panel {
  border-radius: 2px; border-color: rgba(36,22,10,.45);
}
[data-style="showa"] .modal-panel {
  border-radius: 3px; border-color: rgba(60,38,16,.65);
  background: rgba(14,10,6,.98); position: relative; overflow: hidden;
}
[data-style="showa"] .modal-panel::after {
  content: ''; position: absolute; bottom: -8px; right: -8px;
  width: 120px; height: 120px;
  background-image: radial-gradient(circle, rgba(200,130,50,.20) 1.3px, transparent 1.3px);
  background-size: 9px 9px; opacity: .55; pointer-events: none;
}
[data-style="showa"] .modal-header { border-bottom-color: rgba(46,30,16,.35); }
[data-style="showa"] .scoreboard,
[data-style="showa"] .manager-card,
[data-style="showa"] .highlight-card,
[data-style="showa"] .postseason-game-tile,
[data-style="showa"] .postseason-mvp-tile {
  border-radius: 2px; border-color: rgba(46,30,16,.50);
  background-color: #120d08;
}

/* Opponent header */
[data-style="showa"] .opp-header { color: rgba(200,130,50,.40); font-family: 'Noto Serif JP', serif; }

/* Button */
[data-style="showa"] .btn-primary {
  background: #1a0e06; border: 2px solid rgba(46,30,16,.80); color: #c09040;
  font-family: 'Noto Serif JP', serif; letter-spacing: 0.05em;
  border-radius: 2px;
}
[data-style="showa"] .btn-outline { border-radius: 2px; border-color: rgba(46,30,16,.60); }

/* Pos label */
[data-style="showa"] .player-pos,
[data-style="showa"] .slot-box-pos {
  background: transparent; color: rgba(200,74,30,.65);
  border-color: rgba(90,46,16,.40); border-radius: 2px;
  font-family: 'Noto Serif JP', serif;
}

/* Badges */
[data-style="showa"] .ace-badge,
[data-style="showa"] .clutch-badge,
[data-style="showa"] .ironman-badge,
[data-style="showa"] .hof-badge {
  background: #c84a1e; color: #f0d8a0;
  border-radius: 2px; font-family: 'Noto Serif JP', serif;
}

/* Award / result text — warm amber */
[data-style="showa"] .award-name { color: #c08020; font-family: 'Noto Serif JP', serif; }
[data-style="showa"] .postseason-champion-banner {
  font-family: 'Bebas Neue', sans-serif;
  color: #c84a1e; letter-spacing: 0.14em;
  text-shadow: none;
  border-color: rgba(90,46,16,.55);
}

.swatch-showa-el { background: rgba(200,74,30,.22);   border: 1px solid rgba(200,74,30,.60); }
.swatch-showa-gr { background: rgba(192,128,32,.18);  border: 1px solid rgba(192,128,32,.50); }
.swatch-showa-go { background: rgba(72,112,64,.16);   border: 1px solid rgba(72,112,64,.44); }


/* ══════════════════════════════════════════════════════════════
   GAMECUBE — BACKGROUND ELEMENTS
══════════════════════════════════════════════════════════════ */

[data-style="gamecube"] body {
  background: #0b0820;
}
[data-style="gamecube"] body::before,
[data-style="gamecube"] body::after { display: none; }

/* Floating spheres */
.gc-sphere-1, .gc-sphere-2, .gc-sphere-3 {
  position: fixed; border-radius: 50%; pointer-events: none; z-index: 0;
}
.gc-sphere-1 {
  width: 420px; height: 420px; top: -100px; left: -80px;
  background: radial-gradient(circle at 38% 35%, rgba(160,110,255,.20) 0%, rgba(100,60,220,.07) 45%, transparent 70%);
  animation: gc-drift-1 22s ease-in-out infinite;
}
.gc-sphere-2 {
  width: 280px; height: 280px; bottom: -40px; left: 2%;
  background: radial-gradient(circle at 40% 38%, rgba(80,200,255,.14) 0%, rgba(60,140,255,.05) 45%, transparent 70%);
  animation: gc-drift-2 28s ease-in-out infinite;
}
.gc-sphere-3 {
  width: 160px; height: 160px; top: 42%; left: 5%;
  background: radial-gradient(circle at 42% 36%, rgba(200,160,255,.12) 0%, rgba(140,90,255,.04) 45%, transparent 70%);
  animation: gc-drift-3 18s ease-in-out infinite;
}
@keyframes gc-drift-1 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(30px,-25px)} 66%{transform:translate(-15px,40px)} }
@keyframes gc-drift-2 { 0%,100%{transform:translate(0,0)} 40%{transform:translate(-40px,25px)} 70%{transform:translate(25px,-30px)} }
@keyframes gc-drift-3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(15px,-35px)} }

/* 3D Cube */
.gc-cube-persp {
  position: fixed; top: 36%; right: 10%; width: 200px; height: 200px;
  perspective: 280px; z-index: 0; pointer-events: none;
}
.gc-cube-inner {
  width: 100px; height: 100px; margin: 50px;
  transform-style: preserve-3d;
  animation: gc-tumble 18s linear infinite;
}
.gc-face { position: absolute; width: 100px; height: 100px; border: 1px solid rgba(255,255,255,.12); }
.gc-face-front  { background: rgba(140,100,230,.28); transform: translateZ(50px); }
.gc-face-back   { background: rgba(20,10,80,.50);    transform: rotateY(180deg) translateZ(50px); }
.gc-face-left   { background: rgba(70,40,180,.36);   transform: rotateY(-90deg) translateZ(50px); }
.gc-face-right  { background: rgba(100,68,210,.28);  transform: rotateY(90deg) translateZ(50px); }
.gc-face-top    { background: rgba(165,140,235,.36); transform: rotateX(90deg) translateZ(50px); }
.gc-face-bot    { background: rgba(15,8,60,.50);     transform: rotateX(-90deg) translateZ(50px); }
@keyframes gc-tumble {
  0%   { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  100% { transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg); }
}


/* ══════════════════════════════════════════════════════════════
   PS2 — BACKGROUND ELEMENTS
══════════════════════════════════════════════════════════════ */

[data-style="ps2"] body {
  background:
    linear-gradient(rgba(0,60,200,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,60,200,.025) 1px, transparent 1px),
    #000;
  background-size: 40px 40px, 40px 40px, auto;
  background-attachment: fixed;
}
[data-style="ps2"] body::before,
[data-style="ps2"] body::after { display: none; }

/* Conic rotation */
.ps2-conic-el {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200vmax; height: 200vmax; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg, rgba(0,40,180,.06) 8deg, transparent 16deg,
    transparent 80deg, rgba(0,60,200,.04) 88deg, transparent 96deg,
    transparent 170deg, rgba(0,40,160,.05) 178deg, transparent 186deg,
    transparent 260deg, rgba(0,50,180,.04) 268deg, transparent 276deg,
    transparent 360deg);
  animation: ps2-conic-spin 90s linear infinite;
}
@keyframes ps2-conic-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* Centre glow */
.ps2-glow-el {
  position: fixed; top: 42%; left: 50%; transform: translate(-50%,-50%);
  width: 600px; height: 300px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,60,200,.12) 0%, transparent 70%);
  animation: ps2-breathe 10s ease-in-out infinite;
}
@keyframes ps2-breathe {
  0%,100% { opacity:.5; transform:translate(-50%,-50%) scale(1); }
  50%      { opacity:1;  transform:translate(-50%,-50%) scale(1.12); }
}

/* Rising columns */
.ps2-col-el {
  position: fixed; bottom: -100%; width: 1px;
  background: linear-gradient(to top, transparent, rgba(0,80,255,.50) 40%, rgba(60,140,255,.28) 70%, transparent);
  animation: ps2-rise linear infinite;
  z-index: 0; pointer-events: none;
}
@keyframes ps2-rise {
  0%   { bottom: -100%; opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: .5; }
  100% { bottom: 120%; opacity: 0; }
}

/* Bottom light line */
.ps2-line-el {
  position: fixed; bottom: 0; left: 0; right: 0; height: 1px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0,80,255,.60) 30%, rgba(60,160,255,.80) 50%, rgba(0,80,255,.60) 70%, transparent);
}


/* ══════════════════════════════════════════════════════════════
   XBOX — BACKGROUND ELEMENTS
══════════════════════════════════════════════════════════════ */

[data-style="xbox"] body {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(10,40,10,.04) 3px, rgba(10,40,10,.04) 4px),
    #060a06;
  background-attachment: fixed;
}
[data-style="xbox"] body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0; width: 100%; height: 100%;
  background: conic-gradient(from 200deg at 18% 110%,
    transparent 0deg, rgba(16,120,16,.16) 10deg, rgba(20,160,20,.08) 14deg, transparent 22deg,
    transparent 90deg,  rgba(14,100,14,.10) 98deg, transparent 108deg,
    transparent 190deg, rgba(18,130,18,.12) 198deg, transparent 208deg,
    transparent 300deg, rgba(14,100,14,.07) 308deg, transparent 316deg,
    transparent 360deg);
  animation: xbx-bg-spin 60s linear infinite;
}
@keyframes xbx-bg-spin { to { transform: rotate(360deg); } }
[data-style="xbox"] body::after {
  content: '';
  position: fixed; bottom: -10%; left: -8%; width: 75%; height: 75%;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 15% 95%, rgba(20,160,20,.22) 0%, rgba(14,110,14,.10) 25%, transparent 55%),
    radial-gradient(ellipse at 85% 5%,  rgba(10,80,10,.10)  0%, transparent 45%);
  animation: xbx-glow-pulse 10s ease-in-out infinite;
}
@keyframes xbx-glow-pulse { 0%,100%{opacity:.75} 50%{opacity:1} }

/* Faint X watermark */
.xbx-x-el {
  position: fixed; bottom: -5%; right: -4%;
  font-family: 'Rajdhani', sans-serif; font-size: 420px; font-weight: 900;
  color: rgba(16,124,16,.05); z-index: 0; pointer-events: none; user-select: none;
  line-height: 1; animation: xbx-x-pulse 14s ease-in-out infinite;
}
@keyframes xbx-x-pulse { 0%,100%{opacity:.5} 50%{opacity:1} }


/* ══════════════════════════════════════════════════════════════
   WINDOWS XP — BACKGROUND ELEMENTS
══════════════════════════════════════════════════════════════ */

[data-style="winxp"] body {
  background:
    radial-gradient(ellipse 120% 55% at 50% -5%, rgba(30,65,140,.22) 0%, transparent 65%),
    radial-gradient(ellipse 80% 35% at 50% 108%, rgba(18,55,18,.25) 0%, transparent 60%),
    #06080f;
  background-attachment: fixed;
}
[data-style="winxp"] body::before,
[data-style="winxp"] body::after { display: none; }

/* Boot screen */
.xp-boot-el {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 1; background: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  pointer-events: none; opacity: 0.18;
}
.xp-boot-logo { display: flex; align-items: baseline; gap: 6px; }
.xp-boot-win  { font-family: Tahoma, sans-serif; font-size: 42px; font-style: italic; color: #4080e0; }
.xp-boot-xp   { font-family: Tahoma, sans-serif; font-size: 48px; font-weight: 700; color: #fff; }
.xp-boot-sub  { font-family: Tahoma, sans-serif; font-size: 13px; color: rgba(200,220,255,.75); letter-spacing: .12em; font-style: italic; }
.xp-boot-track {
  width: 140px; height: 10px; border: 1px solid rgba(255,255,255,.20); border-radius: 1px; overflow: hidden; position: relative;
}
.xp-boot-dots {
  display: flex; gap: 4px; position: absolute; left: -48px;
  animation: xp-dots-scroll 1.2s linear infinite;
}
.xp-boot-dots > div { width: 12px; height: 10px; background: linear-gradient(180deg, #4488ff, #2255dd); border-radius: 1px; flex-shrink: 0; }
@keyframes xp-dots-scroll { 0%{left:-48px} 100%{left:140px} }

/* Desktop icons */
.xp-icons-el {
  position: fixed; top: 16px; left: 16px; z-index: 5;
  display: flex; flex-direction: column; gap: 14px; pointer-events: none;
}
.xp-desktop-icon {
  display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px;
}
.xp-desktop-icon span {
  font-size: 11px; color: #fff; font-family: Tahoma, sans-serif;
  text-align: center; text-shadow: 1px 1px 2px rgba(0,0,0,.85), 0 0 4px rgba(0,0,0,.7); line-height: 1.2;
}
.xp-icon-mc {
  width: 30px; height: 26px; position: relative;
  border: 2px solid #888; background: linear-gradient(180deg, #1040a0, #2060d0); border-radius: 1px;
}
.xp-icon-mc::after {
  content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 4px; background: #999; border-radius: 1px;
}
.xp-icon-rb {
  width: 28px; height: 30px; position: relative;
}
.xp-icon-rb::before {
  content: ''; position: absolute; top: 0; left: 3px; width: 22px; height: 4px;
  background: linear-gradient(180deg, #e8e8e8, #b0b0b0); border-radius: 1px 1px 0 0;
}
.xp-icon-rb::after {
  content: ''; position: absolute; bottom: 0; left: 4px; width: 20px; height: 22px;
  background: linear-gradient(180deg, #d0d0d0, #a8a8a8); border-radius: 0 0 3px 3px;
}
.xp-icon-doc { font-size: 28px; line-height: 1; }

/* Taskbar */
.xp-taskbar-el {
  position: fixed; bottom: 0; left: 0; right: 0; height: 30px; z-index: 10;
  pointer-events: none; display: flex; align-items: center;
  background: linear-gradient(180deg, #2050d8 0%, #1838b8 50%, #1030a8 100%);
  border-top: 1px solid #5080ff;
  box-shadow: inset 0 1px 0 rgba(120,160,255,.35);
}
.xp-start-btn {
  height: 26px; margin: 2px 2px; display: flex; align-items: center; gap: 4px; padding: 0 8px 0 4px;
  background: linear-gradient(180deg, #5aaa3a 0%, #3a8a20 40%, #2a7010 70%, #3a8820 100%);
  border: 1px solid #206010; border-radius: 0 12px 12px 0;
  box-shadow: inset 0 1px 0 rgba(200,255,150,.28), 0 1px 2px rgba(0,0,0,.4);
  font-family: Tahoma, 'Franklin Gothic Medium', sans-serif; font-size: 12px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 1px rgba(0,60,0,.6);
}
.xp-flag {
  width: 18px; height: 18px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 1px; border: 1px solid rgba(255,255,255,.3); border-radius: 2px; overflow: hidden; flex-shrink: 0;
}
.xp-flag > div:nth-child(1) { background: #e82020; }
.xp-flag > div:nth-child(2) { background: #20b820; }
.xp-flag > div:nth-child(3) { background: #2020e8; }
.xp-flag > div:nth-child(4) { background: #e8d020; }
.xp-tray-el {
  margin-left: auto; height: 30px; display: flex; align-items: center; gap: 4px; padding: 0 8px;
  background: linear-gradient(180deg, #1030a8, #0c28a0);
  border-left: 1px solid #4070e8;
}
.xp-tray-icons { font-size: 13px; }
.xp-tray-div   { width: 1px; height: 18px; background: rgba(255,255,255,.15); margin: 0 2px; }
.xp-clock-el   { font-family: Tahoma, sans-serif; font-size: 11px; color: rgba(220,235,255,.95); white-space: nowrap; }

/* Slow cloud drift */
[data-style="winxp"] body::before {
  content: '';
  position: fixed; top: 4%; left: 5%; width: 70%; height: 45%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(60,100,180,.10) 0%, transparent 70%);
  animation: xp-light-drift 30s ease-in-out infinite;
}
@keyframes xp-light-drift {
  0%,100% { transform: translateX(0) scale(1); opacity: .6; }
  33%      { transform: translateX(60px) scale(1.05); opacity: 1; }
  66%      { transform: translateX(-40px) scale(.96); opacity: .7; }
}


/* ══════════════════════════════════════════════════════════════
   EUROBEAT / INITIAL D — BACKGROUND ELEMENTS
══════════════════════════════════════════════════════════════ */

[data-style="eurobeat"] body {
  background:
    repeating-linear-gradient(75deg, transparent, transparent 9px, rgba(255,255,255,.016) 9px, rgba(255,255,255,.016) 10px),
    #03030c;
  background-attachment: fixed;
}
[data-style="eurobeat"] body::before { display: none; }
/* Racing stripe via body::after */
/* stripe handled by body::after in theme block above */

/* Background mountains + sunset SVG wrapper */
.euro-bg-wrap {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}

/* Dashboard wrapper — pinned to bottom */
.euro-dash-wrap {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1; pointer-events: none;
  display: flex; justify-content: center; align-items: flex-end;
}


/* ══════════════════════════════════════════════════════════════
   TF2 / 1950s — BACKGROUND ELEMENTS
══════════════════════════════════════════════════════════════ */

[data-style="tf2"] body {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(255,255,255,.012) 6px, rgba(255,255,255,.012) 7px),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.06) 2px, rgba(0,0,0,.06) 4px),
    #0d0b08;
  background-attachment: fixed;
}
[data-style="tf2"] body::before,
[data-style="tf2"] body::after { display: none; }

/* RED corner glow — bottom left */
.tf2-red-el {
  position: fixed; bottom: 0; left: 0; width: 45%; height: 55%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 0% 100%, rgba(160,40,10,.30) 0%, rgba(120,20,5,.12) 40%, transparent 70%);
  animation: tf2-red-pulse 9s ease-in-out infinite;
}
@keyframes tf2-red-pulse { 0%,100%{opacity:.7} 50%{opacity:1} }

/* BLU corner glow — top right */
.tf2-blu-el {
  position: fixed; top: 0; right: 0; width: 45%; height: 55%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 100% 0%, rgba(60,100,140,.28) 0%, rgba(40,70,110,.10) 40%, transparent 70%);
  animation: tf2-blu-pulse 12s ease-in-out infinite;
  animation-delay: -5s;
}
@keyframes tf2-blu-pulse { 0%,100%{opacity:.6} 50%{opacity:1} }

/* RED / BLU text labels */
.tf2-red-label {
  position: fixed; bottom: 6%; left: 3%; z-index: 1; pointer-events: none;
  font-family: 'Bebas Neue', sans-serif; font-size: 140px; line-height: 1;
  letter-spacing: .04em; color: rgba(176,48,16,.16); user-select: none;
}
.tf2-blu-label {
  position: fixed; top: 6%; right: 3%; z-index: 1; pointer-events: none;
  font-family: 'Bebas Neue', sans-serif; font-size: 140px; line-height: 1;
  letter-spacing: .04em; color: rgba(80,130,170,.14); user-select: none; text-align: right;
}


/* ══════════════════════════════════════════════════════════════
   SHOWA ANIME — BACKGROUND ELEMENTS
══════════════════════════════════════════════════════════════ */

[data-style="showa"] body {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 13px, rgba(255,255,255,.011) 13px, rgba(255,255,255,.011) 14px),
    #0e0a06;
  background-attachment: fixed;
}
[data-style="showa"] body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0; animation: none; width: 100%; height: 100%;
  background-image: radial-gradient(circle, rgba(200,130,50,.22) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: .75;
}
[data-style="showa"] body::after { display: none; }

/* Spotlight from top */
.showa-spot-el {
  position: fixed; top: -10%; left: 50%; transform: translateX(-50%);
  width: 800px; height: 600px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(200,100,30,.16) 0%, rgba(180,80,20,.06) 40%, transparent 70%);
  animation: showa-spot-pulse 6s ease-in-out infinite;
}
@keyframes showa-spot-pulse { 0%,100%{opacity:.7} 50%{opacity:1} }

/* Conic speed burst — corner */
.showa-burst-el {
  position: fixed; bottom: -20vmin; right: -20vmin;
  width: 90vmin; height: 90vmin;
  z-index: 0; pointer-events: none; border-radius: 50%;
  background: repeating-conic-gradient(rgba(200,90,20,.05) 0deg 4deg, transparent 4deg 8deg);
  animation: showa-burst-spin 40s linear infinite;
}
@keyframes showa-burst-spin { to { transform: rotate(360deg); } }


/* ══════════════════════════════════════════════════════════════
   TECHWEAR (Arknights-inspired)
   Ice blue on near-black, angular clip-paths, blueprint grid
══════════════════════════════════════════════════════════════ */

[data-style="techwear"] {
  --tier-elite:  #50b4dc;
  --tier-great:  #3080c0;
  --tier-good:   #204878;
  --tier-average: #394a60;
  --gold:        #50b4dc;
  --gold-rgb:    80, 180, 220;
  --gold-bright: #70d0f0;
  --purple-rgb:  48, 128, 192;
  --green-rgb:   32, 72, 120;
  --font:        'Rajdhani', 'Share Tech Mono', sans-serif;
  --void:        #060810;
  --void-2:      #0a0e1a;
}

[data-style="techwear"] body {
  background:
    linear-gradient(rgba(40,80,160,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40,80,160,.030) 1px, transparent 1px),
    #060810;
  background-size: 24px 24px, 24px 24px, auto;
  background-attachment: fixed;
}
[data-style="techwear"] body::before { display: none; }
[data-style="techwear"] body::after  { display: none; }

/* Typography */
[data-style="techwear"] .player-name,
[data-style="techwear"] .diamond-pos-name,
[data-style="techwear"] .manager-name,
[data-style="techwear"] .brand,
[data-style="techwear"] .modal-title,
[data-style="techwear"] .section-label,
[data-style="techwear"] .lineup-group-name,
[data-style="techwear"] .lineup-card-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* Shimmer — cold ice-blue scan */
[data-style="techwear"] .shimmer-overlay::before {
  width: 55%;
  background: linear-gradient(100deg, transparent, rgba(80,180,255,.18), transparent);
  animation-name: shimmer;
  animation-duration: 3.5s;
}

/* Cards */
[data-style="techwear"] .player-card,
[data-style="techwear"] .expanded-draft-card {
  border-color: rgba(60,120,200,.30);
  background-color: #0a0e1a;
  background-image: none;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
[data-style="techwear"] .player-card.tier-elite,
[data-style="techwear"] .expanded-draft-card.tier-elite {
  border-color: rgba(80,180,255,.65);
  background-color: rgba(80, 180, 220, 0.07) !important;
  background-image: none;
  box-shadow: 0 0 16px rgba(60,140,220,.18), inset 0 1px 0 rgba(80,180,255,.25);
}
[data-style="techwear"] .player-card.tier-great,
[data-style="techwear"] .expanded-draft-card.tier-great {
  border-color: rgba(48,128,192,.50);
  background-color: rgba(48, 128, 192, 0.05) !important;
  background-image: none;
}
[data-style="techwear"] .player-card.tier-good,
[data-style="techwear"] .expanded-draft-card.tier-good {
  border-color: rgba(32,72,120,.40);
  background-color: rgba(32, 72, 120, 0.04) !important;
  background-image: none;
}
[data-style="techwear"] .player-card.tier-average,
[data-style="techwear"] .expanded-draft-card.tier-average {
  border-color: rgba(57,74,96,.40);
  background-color: rgba(57, 74, 96, 0.04) !important;
  background-image: none;
}

/* Buttons */
[data-style="techwear"] .btn-primary {
  background: rgba(60,140,220,.15);
  border-color: rgba(60,140,220,.50);
  color: rgba(80,180,255,.95);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
  border-radius: 0;
}
[data-style="techwear"] .btn-outline {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: 0;
}

/* Slot box */
[data-style="techwear"] .slot-box {
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  border-radius: 0;
}

/* Pos label */
[data-style="techwear"] .player-pos,
[data-style="techwear"] .slot-box-pos {
  background: rgba(8,16,40,.60);
  color: rgba(80,160,220,.80);
  border-color: rgba(40,100,180,.40);
  border-radius: 0;
}

/* Swatches */
.swatch-techwear-el { background: rgba(80,180,220,.20);  border: 1px solid rgba(80,180,220,.55); }
.swatch-techwear-gr { background: rgba(48,128,192,.17);  border: 1px solid rgba(48,128,192,.48); }
.swatch-techwear-go { background: rgba(32,72,120,.14);   border: 1px solid rgba(32,72,120,.38); }


/* ══════════════════════════════════════════════════════════════
   VIRTUAL IDOL FES (Hololive concert)
   Pink/purple/cyan, pill shapes, Nunito, iridescent elite
══════════════════════════════════════════════════════════════ */

[data-style="idolfes"] {
  --tier-elite:  #dc50ff;
  --tier-great:  #8050e0;
  --tier-good:   #2880c0;
  --tier-average: #567d99;
  --gold:        #dc50ff;
  --gold-rgb:    220, 80, 255;
  --gold-bright: #f070ff;
  --purple-rgb:  128, 80, 224;
  --green-rgb:   40, 128, 192;
  --font:        'Nunito', sans-serif;
  --void:        #080414;
  --void-2:      #0e0820;
}

[data-style="idolfes"] body {
  background: #080414;
  background-attachment: fixed;
}
[data-style="idolfes"] body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 25% -10%, rgba(255,60,180,.10) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 75% -10%, rgba(80,100,255,.10) 0%, transparent 65%);
  animation: idolfes-spot 12s ease-in-out infinite;
}
@keyframes idolfes-spot {
  0%,100% { opacity: .7; }
  50%      { opacity: 1; }
}
[data-style="idolfes"] body::after { display: none; }

/* Typography */
[data-style="idolfes"] .player-name,
[data-style="idolfes"] .diamond-pos-name,
[data-style="idolfes"] .manager-name,
[data-style="idolfes"] .brand,
[data-style="idolfes"] .modal-title,
[data-style="idolfes"] .section-label,
[data-style="idolfes"] .lineup-group-name,
[data-style="idolfes"] .lineup-card-label {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  letter-spacing: 0.02em;
}

/* Shimmer — iridescent colour sweep */
[data-style="idolfes"] .shimmer-overlay::before {
  width: 80%;
  background: linear-gradient(100deg, transparent, rgba(255,80,200,.14), rgba(120,80,255,.14), rgba(80,200,255,.12), transparent);
  animation-name: shimmer;
  animation-duration: 2.8s;
}

/* Cards */
[data-style="idolfes"] .player-card,
[data-style="idolfes"] .expanded-draft-card {
  border-color: rgba(180,80,255,.25);
  background-color: rgba(20,8,40,.85);
  background-image: none;
  border-radius: 12px;
}
[data-style="idolfes"] .player-card::before,
[data-style="idolfes"] .expanded-draft-card::before {
  content: '';
  position: absolute; inset: 0; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,100,200,.06) 0%, rgba(100,60,255,.06) 50%, rgba(60,200,255,.04) 100%);
  pointer-events: none;
}
[data-style="idolfes"] .player-card.tier-elite,
[data-style="idolfes"] .expanded-draft-card.tier-elite {
  border-color: rgba(220,80,255,.60);
  background-color: rgba(220, 80, 255, 0.07) !important;
  background-image: none;
  box-shadow: 0 0 20px rgba(200,60,255,.22), 0 0 40px rgba(200,60,255,.08), inset 0 1px 0 rgba(220,80,255,.25);
}
[data-style="idolfes"] .player-card.tier-great,
[data-style="idolfes"] .expanded-draft-card.tier-great {
  border-color: rgba(128,80,224,.45);
  background-color: rgba(128, 80, 224, 0.05) !important;
  background-image: none;
  box-shadow: 0 0 12px rgba(128,80,224,.15);
}
[data-style="idolfes"] .player-card.tier-good,
[data-style="idolfes"] .expanded-draft-card.tier-good {
  border-color: rgba(40,128,192,.38);
  background-color: rgba(40, 128, 192, 0.04) !important;
  background-image: none;
}
[data-style="idolfes"] .player-card.tier-average,
[data-style="idolfes"] .expanded-draft-card.tier-average {
  border-color: rgba(86,125,153,.38);
  background-color: rgba(86, 125, 153, 0.04) !important;
  background-image: none;
}

/* Buttons */
[data-style="idolfes"] .btn-primary {
  background: linear-gradient(135deg, rgba(255,60,180,.20), rgba(120,40,255,.20));
  border-color: rgba(200,60,255,.45);
  color: #f0c0ff;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  border-radius: 99px;
}
[data-style="idolfes"] .btn-outline {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  border-radius: 99px;
}

/* Pos / slot */
[data-style="idolfes"] .player-pos,
[data-style="idolfes"] .slot-box-pos {
  background: rgba(20,8,40,.60);
  color: rgba(200,100,255,.80);
  border-color: rgba(160,60,255,.35);
  border-radius: 99px;
}

.swatch-idolfes-el { background: rgba(220,80,255,.20);  border: 1px solid rgba(220,80,255,.55); }
.swatch-idolfes-gr { background: rgba(128,80,224,.17);  border: 1px solid rgba(128,80,224,.48); }
.swatch-idolfes-go { background: rgba(40,128,192,.14);  border: 1px solid rgba(40,128,192,.40); }


/* ══════════════════════════════════════════════════════════════
   KRONII STREAM
   Deep teal/navy, clock motif, Space Grotesk + Share Tech Mono
══════════════════════════════════════════════════════════════ */

[data-style="kronii"] {
  --tier-elite:  #40d0e8;
  --tier-great:  #2890b0;
  --tier-good:   #185878;
  --tier-average: #355160;
  --gold:        #40d0e8;
  --gold-rgb:    64, 208, 232;
  --gold-bright: #60e8ff;
  --purple-rgb:  40, 144, 176;
  --green-rgb:   24, 88, 120;
  --font:        'Space Grotesk', 'Share Tech Mono', sans-serif;
  --void:        #030812;
  --void-2:      #060e1a;
}

[data-style="kronii"] body {
  background:
    linear-gradient(rgba(0,80,120,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,80,120,.022) 1px, transparent 1px),
    #030812;
  background-size: 32px 32px, 32px 32px, auto;
  background-attachment: fixed;
}
[data-style="kronii"] body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 70% 60% at 50% -5%, rgba(60,180,210,.10) 0%, transparent 65%);
  animation: kronii-glow 14s ease-in-out infinite;
}
@keyframes kronii-glow { 0%,100%{opacity:.5} 50%{opacity:1} }
[data-style="kronii"] body::after { display: none; }

/* Typography */
[data-style="kronii"] .player-name,
[data-style="kronii"] .diamond-pos-name,
[data-style="kronii"] .manager-name,
[data-style="kronii"] .brand,
[data-style="kronii"] .modal-title,
[data-style="kronii"] .section-label,
[data-style="kronii"] .lineup-group-name,
[data-style="kronii"] .lineup-card-label {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Shimmer — slow deep teal, long pause */
@keyframes shimmer-kronii { 0%,15% { left: -150%; } 100% { left: 150%; } }
[data-style="kronii"] .shimmer-overlay::before {
  width: 55%;
  background: linear-gradient(100deg, transparent, rgba(60,200,220,.18), transparent);
  animation-name: shimmer-kronii;
  animation-duration: 5s;
}

/* Cards */
[data-style="kronii"] .player-card,
[data-style="kronii"] .expanded-draft-card {
  border-color: rgba(60,160,190,.28);
  border-top: 2px solid rgba(40,160,190,.45);
  background-color: rgba(4,16,32,.88);
  background-image: none;
  border-radius: 0;
}
[data-style="kronii"] .player-card::after,
[data-style="kronii"] .expanded-draft-card::after {
  content: '⏳';
  position: absolute; bottom: 4px; left: 6px;
  font-size: 20px; opacity: .055; pointer-events: none; line-height: 1;
}
[data-style="kronii"] .player-card.tier-elite::after,
[data-style="kronii"] .expanded-draft-card.tier-elite::after {
  content: '🐍';
  font-size: 16px; opacity: .12;
}
[data-style="kronii"] .player-card.tier-elite,
[data-style="kronii"] .expanded-draft-card.tier-elite {
  border-color: rgba(64,208,232,.55);
  border-top: 2px solid rgba(64,208,232,.80);
  background-color: rgba(64, 208, 232, 0.07) !important;
  background-image: none;
  border-radius: 0;
  box-shadow: 0 0 14px rgba(40,180,210,.18), inset 0 1px 0 rgba(64,208,232,.20);
}
[data-style="kronii"] .player-card.tier-great,
[data-style="kronii"] .expanded-draft-card.tier-great {
  border-color: rgba(40,144,176,.45);
  border-top: 2px solid rgba(40,144,176,.62);
  background-color: rgba(40, 144, 176, 0.05) !important;
  background-image: none;
  border-radius: 0;
}
[data-style="kronii"] .player-card.tier-good,
[data-style="kronii"] .expanded-draft-card.tier-good {
  border-color: rgba(24,88,120,.38);
  border-top: 2px solid rgba(24,88,120,.52);
  background-color: rgba(24, 88, 120, 0.04) !important;
  background-image: none;
  border-radius: 0;
}
[data-style="kronii"] .player-card.tier-average,
[data-style="kronii"] .expanded-draft-card.tier-average {
  border-color: rgba(53,81,96,.38);
  border-top: 2px solid rgba(53,81,96,.52);
  background-color: rgba(53, 81, 96, 0.04) !important;
  background-image: none;
  border-radius: 0;
}

/* Buttons */
[data-style="kronii"] .btn-primary {
  background: rgba(40,160,190,.14);
  border-color: rgba(50,180,210,.40);
  color: rgba(64,208,232,.95);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 0;
  clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
}
[data-style="kronii"] .btn-outline {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  border-radius: 0;
}
[data-style="kronii"] .player-pos,
[data-style="kronii"] .slot-box-pos {
  font-family: 'Share Tech Mono', monospace;
  background: rgba(4,16,40,.60);
  color: rgba(64,180,210,.75);
  border-color: rgba(40,130,160,.35);
  border-radius: 0;
  letter-spacing: 0.14em;
}

.swatch-kronii-el { background: rgba(64,208,232,.20);  border: 1px solid rgba(64,208,232,.55); }
.swatch-kronii-gr { background: rgba(40,144,176,.17);  border: 1px solid rgba(40,144,176,.48); }
.swatch-kronii-go { background: rgba(24,88,120,.14);   border: 1px solid rgba(24,88,120,.38); }


/* ══════════════════════════════════════════════════════════════
   ROLLERCOASTER TYCOON
   Beige/brown inset bevel, Courier Prime, no shimmer
══════════════════════════════════════════════════════════════ */

[data-style="rct"] {
  --tier-elite:  #f0c840;
  --tier-great:  #c89030;
  --tier-good:   #40c080;
  --tier-average: #61997d;
  --gold:        #f0c840;
  --gold-rgb:    240, 200, 64;
  --gold-bright: #f8e060;
  --purple-rgb:  160, 80, 220;
  --green-rgb:   64, 192, 128;
  --font:        'Courier Prime', monospace;
  --void:        #1a1008;
  --void-2:      #221408;
}

[data-style="rct"] body {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(200,170,100,.040) 59px, rgba(200,170,100,.040) 60px),
    repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(200,170,100,.040) 59px, rgba(200,170,100,.040) 60px),
    #1a1008;
  background-attachment: fixed;
}
[data-style="rct"] body::before,
[data-style="rct"] body::after { display: none; }

/* Typography */
[data-style="rct"] .player-name,
[data-style="rct"] .diamond-pos-name,
[data-style="rct"] .manager-name,
[data-style="rct"] .brand,
[data-style="rct"] .modal-title,
[data-style="rct"] .section-label,
[data-style="rct"] .lineup-group-name,
[data-style="rct"] .lineup-card-label {
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* No shimmer — bevel brightness pulse instead */
[data-style="rct"] .shimmer-overlay { display: none; }

/* Cards — inset bevel border */
/* RCT player-card base — see corrected rule below */
/* RCT first elite — see corrected rule below */
@keyframes rct-elite-pulse {
  0%,100% { opacity: 0; }
  50%      { opacity: 1; }
}
[data-style="rct"] .player-card.tier-great,
[data-style="rct"] .expanded-draft-card.tier-great {
  background-color: #1e1408 !important;
  background-image: none !important;
  border-top-color: #7a6030 !important;
  border-left-color: #7a6030 !important;
  border-bottom-color: #1a0c04 !important;
  border-right-color: #1a0c04 !important;
}
[data-style="rct"] .player-card.tier-good,
[data-style="rct"] .expanded-draft-card.tier-good {
  background-image: none !important;
}
[data-style="rct"] .player-card.tier-average,
[data-style="rct"] .expanded-draft-card.tier-average {
  background-image: none !important;
}

/* Buttons */
[data-style="rct"] .btn-primary {
  background: #4a3018 !important;
  border: 2px solid #6a5028 !important;
  border-top-color: #a07838 !important;
  border-left-color: #a07838 !important;
  border-bottom-color: #2a1808;
  border-right-color: #2a1808;
  border-width: 2px;
  color: #d0a040;
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 0;
  box-shadow: 2px 2px 0 #0e0804;
}
[data-style="rct"] .btn-outline {
  font-family: 'Courier Prime', monospace;
  border-radius: 0;
}
[data-style="rct"] .player-pos,
[data-style="rct"] .slot-box-pos {
  background: #1a1008;
  color: #8a6030;
  border-color: #5a4020;
  border-radius: 0;
  font-family: 'Courier Prime', monospace;
}

.swatch-rct-el { background: rgba(240,200,64,.20);  border: 1px solid rgba(240,200,64,.55); }
.swatch-rct-gr { background: rgba(200,144,48,.17);  border: 1px solid rgba(200,144,48,.48); }
.swatch-rct-go { background: rgba(64,192,128,.14);  border: 1px solid rgba(64,192,128,.40); }


/* ══════════════════════════════════════════════════════════════
   NASA MISSION CONTROL
   Amber monochrome, Share Tech Mono, CRT scanlines, radar sweep
══════════════════════════════════════════════════════════════ */

[data-style="nasa"] {
  --tier-elite:  #ffb000;
  --tier-great:  #cc7800;
  --tier-good:   #884400;
  --tier-average: #6c4e30;
  --gold:        #ffb000;
  --gold-rgb:    255, 176, 0;
  --gold-bright: #ffd040;
  --purple-rgb:  200, 100, 0;
  --green-rgb:   136, 68, 0;
  --font:        'Share Tech Mono', monospace;
  --void:        #020305;
  --void-2:      #040508;
}

[data-style="nasa"] body {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,140,0,.022) 2px, rgba(255,140,0,.022) 3px),
    linear-gradient(rgba(255,80,0,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,80,0,.022) 1px, transparent 1px),
    #020305;
  background-size: auto, 18px 18px, 18px 18px;
  background-attachment: fixed;
}
[data-style="nasa"] body::before,
[data-style="nasa"] body::after { display: none; }

/* Typography */
[data-style="nasa"] .player-name,
[data-style="nasa"] .diamond-pos-name,
[data-style="nasa"] .manager-name,
[data-style="nasa"] .brand,
[data-style="nasa"] .modal-title,
[data-style="nasa"] .section-label,
[data-style="nasa"] .lineup-group-name,
[data-style="nasa"] .lineup-card-label {
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* Shimmer — two sequential amber scan lines */
@keyframes shimmer-nasa-a {
  0%,5%   { left: -5%; opacity: 0; }
  8%      { opacity: 1; }
  30%     { left: 105%; opacity: .7; }
  32%,100%{ opacity: 0; left: 105%; }
}
@keyframes shimmer-nasa-b {
  0%,32%  { left: -5%; opacity: 0; }
  35%     { opacity: .8; }
  55%     { left: 105%; opacity: .5; }
  58%,100%{ opacity: 0; left: 105%; }
}
[data-style="nasa"] .shimmer-overlay::before {
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(255,190,0,.72) 30%, rgba(255,160,0,.72) 70%, transparent);
  animation-name: shimmer-nasa-a;
  animation-duration: 4s;
}
[data-style="nasa"] .shimmer-overlay::after {
  content: '';
  position: absolute; top: 0; left: -5%; height: 100%; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(255,190,0,.55) 30%, rgba(255,160,0,.55) 70%, transparent);
  animation: shimmer-nasa-b 4s ease-in-out infinite;
  animation-delay: var(--shimmer-offset, 0ms);
}

/* Cards */
[data-style="nasa"] .player-card,
[data-style="nasa"] .expanded-draft-card {
  background-color: #020408;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,140,0,.014) 3px, rgba(255,140,0,.014) 4px);
  border-color: rgba(255,140,0,.28);
  border-left: 2px solid rgba(255,120,0,.45);
  border-radius: 0;
}
[data-style="nasa"] .player-card.tier-elite,
[data-style="nasa"] .expanded-draft-card.tier-elite {
  border-color: rgba(255,180,0,.55);
  border-left-color: rgba(255,160,0,.80);
  background-color: rgba(255, 176, 0, 0.07) !important;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,140,0,.020) 3px, rgba(255,140,0,.020) 4px);
  box-shadow: 0 0 14px rgba(255,140,0,.16), inset 0 0 20px rgba(255,100,0,.05);
}
[data-style="nasa"] .player-card.tier-great,
[data-style="nasa"] .expanded-draft-card.tier-great {
  border-color: rgba(200,120,0,.42);
  border-left-color: rgba(200,100,0,.60);
  background-color: rgba(200, 100, 0, 0.05) !important;
  background-image: none;
}
[data-style="nasa"] .player-card.tier-good,
[data-style="nasa"] .expanded-draft-card.tier-good {
  border-color: rgba(136,68,0,.35);
  background-color: rgba(136, 68, 0, 0.04) !important;
  background-image: none;
}
[data-style="nasa"] .player-card.tier-average,
[data-style="nasa"] .expanded-draft-card.tier-average {
  border-color: rgba(108,78,48,.35);
  background-color: rgba(108, 78, 48, 0.04) !important;
  background-image: none;
}

/* Buttons */
[data-style="nasa"] .btn-primary {
  background: rgba(255,120,0,.10);
  border-color: rgba(255,140,0,.38);
  color: rgba(255,190,0,.95);
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 0;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}
[data-style="nasa"] .btn-outline {
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 0.10em;
  border-radius: 0;
}
[data-style="nasa"] .player-pos,
[data-style="nasa"] .slot-box-pos {
  font-family: 'Share Tech Mono', monospace;
  background: #020305;
  color: rgba(255,150,0,.70);
  border-color: rgba(255,100,0,.28);
  border-radius: 0;
}

.swatch-nasa-el { background: rgba(255,176,0,.22);  border: 1px solid rgba(255,176,0,.58); }
.swatch-nasa-gr { background: rgba(200,120,0,.18);  border: 1px solid rgba(200,120,0,.50); }
.swatch-nasa-go { background: rgba(136,68,0,.15);   border: 1px solid rgba(136,68,0,.40); }


/* ══════════════════════════════════════════════════════════════
   Y2K CHROME BUTTERFLY
   Iridescent silver-purple, Space Grotesk, Orbitron stats
══════════════════════════════════════════════════════════════ */

[data-style="y2k"] {
  --tier-elite:  #d0a0ff;
  --tier-great:  #90b0ff;
  --tier-good:   #60d0ff;
  --tier-average: #86b7cc;
  --gold:        #d0a0ff;
  --gold-rgb:    208, 160, 255;
  --gold-bright: #e8c0ff;
  --purple-rgb:  144, 176, 255;
  --green-rgb:   96, 208, 255;
  --font:        'Space Grotesk', sans-serif;
  --void:        #08040e;
  --void-2:      #0e0818;
}

[data-style="y2k"] body {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(160,100,255,.08) 0%, transparent 60%),
    #08040e;
  background-attachment: fixed;
}
[data-style="y2k"] body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 100% 60% at 50% -10%, rgba(180,120,255,.06) 0%, transparent 65%);
  animation: y2k-sheen 16s ease-in-out infinite;
}
@keyframes y2k-sheen { 0%,100%{opacity:.5} 50%{opacity:1} }
[data-style="y2k"] body::after { display: none; }

/* Typography */
[data-style="y2k"] .player-name,
[data-style="y2k"] .diamond-pos-name,
[data-style="y2k"] .manager-name,
[data-style="y2k"] .brand,
[data-style="y2k"] .modal-title,
[data-style="y2k"] .section-label,
[data-style="y2k"] .lineup-group-name,
[data-style="y2k"] .lineup-card-label {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Shimmer — wide iridescent foil */
@keyframes shimmer-y2k { 0% { left: -160%; } 100% { left: 160%; } }
[data-style="y2k"] .shimmer-overlay::before {
  width: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(220,200,255,.10) 35%, rgba(255,255,255,.18) 50%, rgba(180,220,255,.10) 65%, transparent 80%);
  animation-name: shimmer-y2k;
  animation-duration: 3.2s;
}

/* Cards */
[data-style="y2k"] .player-card,
[data-style="y2k"] .expanded-draft-card {
  background: linear-gradient(135deg, rgba(200,180,255,.07) 0%, rgba(180,220,255,.05) 50%, rgba(220,180,255,.07) 100%);
  background-color: transparent;
  border-color: rgba(200,160,255,.28);
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
[data-style="y2k"] .player-card.tier-elite,
[data-style="y2k"] .expanded-draft-card.tier-elite {
  border-color: rgba(220,160,255,.60);
  background-color: rgba(208, 160, 255, 0.07) !important;
  box-shadow: 0 0 20px rgba(200,120,255,.20), 0 0 1px rgba(255,255,255,.35), inset 0 1px 0 rgba(220,160,255,.20);
}
[data-style="y2k"] .player-card.tier-great,
[data-style="y2k"] .expanded-draft-card.tier-great {
  border-color: rgba(144,176,255,.45);
  background-color: rgba(144, 176, 255, 0.05) !important;
  box-shadow: 0 0 12px rgba(120,160,255,.14);
}
[data-style="y2k"] .player-card.tier-good,
[data-style="y2k"] .expanded-draft-card.tier-good {
  border-color: rgba(96,208,255,.35);
  background-color: rgba(96, 208, 255, 0.04) !important;
}
[data-style="y2k"] .player-card.tier-average,
[data-style="y2k"] .expanded-draft-card.tier-average {
  border-color: rgba(134,183,204,.35);
  background-color: rgba(134, 183, 204, 0.04) !important;
}

/* Buttons */
[data-style="y2k"] .btn-primary {
  background: linear-gradient(135deg, rgba(200,160,255,.22), rgba(160,200,255,.18));
  border-color: rgba(200,160,255,.45);
  color: #f0e0ff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  border-radius: 99px;
}
[data-style="y2k"] .btn-outline {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  border-radius: 99px;
}
[data-style="y2k"] .player-pos,
[data-style="y2k"] .slot-box-pos {
  background: rgba(14,8,28,.60);
  color: rgba(200,160,255,.80);
  border-color: rgba(160,120,255,.35);
  border-radius: 99px;
}

.swatch-y2k-el { background: rgba(208,160,255,.20);  border: 1px solid rgba(208,160,255,.55); }
.swatch-y2k-gr { background: rgba(144,176,255,.17);  border: 1px solid rgba(144,176,255,.48); }
.swatch-y2k-go { background: rgba(96,208,255,.14);   border: 1px solid rgba(96,208,255,.40); }


/* ══════════════════════════════════════════════════════════════
   DARK ACADEMIA
   Oxblood/gold, Cinzel + Playfair + IM Fell, candlelight flicker
══════════════════════════════════════════════════════════════ */

[data-style="darkacad"] {
  --tier-elite:  #d4a838;
  --tier-great:  #a06890;
  --tier-good:   #608858;
  --tier-average: #5b6c57;
  --gold:        #d4a838;
  --gold-rgb:    212, 168, 56;
  --gold-bright: #eccc60;
  --purple-rgb:  160, 104, 144;
  --green-rgb:   96, 136, 88;
  --font:        'Playfair Display', 'IM Fell English', serif;
  --void:        #0a0804;
  --void-2:      #120e08;
}

[data-style="darkacad"] body {
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(160,100,30,.07) 0%, transparent 65%),
    #0a0804;
  background-attachment: fixed;
}
[data-style="darkacad"] body::before { display: none; }
[data-style="darkacad"] body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 40%, rgba(5,3,1,.55) 100%);
}

/* Typography */
[data-style="darkacad"] .player-name,
[data-style="darkacad"] .diamond-pos-name,
[data-style="darkacad"] .manager-name,
[data-style="darkacad"] .brand,
[data-style="darkacad"] .modal-title,
[data-style="darkacad"] .section-label,
[data-style="darkacad"] .lineup-group-name,
[data-style="darkacad"] .lineup-card-label {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Shimmer — candlelight flicker, no sweep */
@keyframes shimmer-darkacad {
  0%,100% { opacity: .3; }
  20%  { opacity: .9; }
  40%  { opacity: .4; }
  65%  { opacity: 1; }
  80%  { opacity: .3; }
}
[data-style="darkacad"] .shimmer-overlay::before {
  left: 0; width: 100%; top: 0; height: 100%;
  background: radial-gradient(ellipse at 70% 20%, rgba(200,140,40,.14) 0%, transparent 60%);
  animation-name: shimmer-darkacad;
  animation-duration: 4s;
}

/* Cards */
[data-style="darkacad"] .player-card,
[data-style="darkacad"] .expanded-draft-card {
  background-color: #120e08;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 14px, rgba(180,140,60,.018) 14px, rgba(180,140,60,.018) 15px);
  border-color: rgba(130,95,45,.48);
  border-top: 2px solid rgba(160,120,50,.38);
  border-radius: 0;
}
[data-style="darkacad"] .player-card.tier-elite,
[data-style="darkacad"] .expanded-draft-card.tier-elite {
  border-color: rgba(190,150,60,.70);
  border-top-color: rgba(200,160,65,.62);
  background-color: rgba(212, 168, 56, 0.07) !important;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 14px, rgba(200,155,65,.026) 14px, rgba(200,155,65,.026) 15px);
  box-shadow: 0 0 18px rgba(160,110,30,.16), inset 0 1px 0 rgba(210,165,75,.22);
}
[data-style="darkacad"] .player-card.tier-great,
[data-style="darkacad"] .expanded-draft-card.tier-great {
  border-color: rgba(130,80,110,.45);
  background-image: none;
  background-color: rgba(160, 104, 144, 0.05) !important;
}
[data-style="darkacad"] .player-card.tier-good,
[data-style="darkacad"] .expanded-draft-card.tier-good {
  border-color: rgba(80,110,75,.38);
  background-color: rgba(96, 136, 88, 0.04) !important;
  background-image: none;
}
[data-style="darkacad"] .player-card.tier-average,
[data-style="darkacad"] .expanded-draft-card.tier-average {
  border-color: rgba(80,110,75,.38);
  background-color: rgba(91, 108, 87, 0.04) !important;
  background-image: none;
}

/* Buttons */
[data-style="darkacad"] .btn-primary {
  background: rgba(130,90,32,.16);
  border-color: rgba(160,115,48,.48);
  color: rgba(210,168,75,.95);
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: 0.10em;
  border-radius: 0;
}
[data-style="darkacad"] .btn-outline {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  border-radius: 0;
}
[data-style="darkacad"] .player-pos,
[data-style="darkacad"] .slot-box-pos {
  font-family: 'IM Fell English', serif;
  background: rgba(14,10,4,.60);
  color: rgba(170,125,50,.72);
  border-color: rgba(130,95,40,.35);
  border-radius: 0;
}

.swatch-darkacad-el { background: rgba(212,168,56,.20);  border: 1px solid rgba(212,168,56,.55); }
.swatch-darkacad-gr { background: rgba(160,104,144,.17); border: 1px solid rgba(160,104,144,.48); }
.swatch-darkacad-go { background: rgba(96,136,88,.14);   border: 1px solid rgba(96,136,88,.40); }


/* ══════════════════════════════════════════════════════════════
   COTTAGECORE
   Warm cream/amber/dusty rose, Playfair Display, dashed borders
══════════════════════════════════════════════════════════════ */

[data-style="cottagecore"] {
  --tier-elite:  #d4a85a;
  --tier-great:  #c87870;
  --tier-good:   #80b068;
  --tier-average: #778c6d;
  --gold:        #d4a85a;
  --gold-rgb:    212, 168, 90;
  --gold-bright: #eccc80;
  --purple-rgb:  200, 120, 112;
  --green-rgb:   128, 176, 104;
  --font:        'Playfair Display', serif;
  --void:        #0c0907;
  --void-2:      #140e09;
}

[data-style="cottagecore"] body {
  background:
    radial-gradient(ellipse 90% 60% at 30% 20%, rgba(200,160,80,.055) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 70% 80%, rgba(180,120,100,.045) 0%, transparent 55%),
    #0c0907;
  background-attachment: fixed;
}
[data-style="cottagecore"] body::before {
  content: '';
  position: fixed; top: -5%; left: 50%; transform: translateX(-50%);
  width: 600px; height: 400px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(220,180,100,.09) 0%, transparent 65%);
  animation: cottage-warmth 9s ease-in-out infinite;
}
@keyframes cottage-warmth { 0%,100%{opacity:.7} 50%{opacity:1} }
[data-style="cottagecore"] body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 50%, rgba(8,6,4,.38) 100%);
}

/* Typography */
[data-style="cottagecore"] .player-name,
[data-style="cottagecore"] .diamond-pos-name,
[data-style="cottagecore"] .manager-name,
[data-style="cottagecore"] .brand,
[data-style="cottagecore"] .modal-title,
[data-style="cottagecore"] .section-label,
[data-style="cottagecore"] .lineup-group-name,
[data-style="cottagecore"] .lineup-card-label {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.02em;
}

/* Shimmer — sunlight bloom from top-right corner */
@keyframes shimmer-cottage {
  0%,100% { opacity: .3; transform: scale(1); }
  50%     { opacity: 1; transform: scale(1.18); }
}
[data-style="cottagecore"] .shimmer-overlay::before {
  top: -20px; right: -20px; left: auto; width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220,180,90,.18) 0%, transparent 65%);
  animation-name: shimmer-cottage;
  animation-duration: 5s;
}

/* Cards */
[data-style="cottagecore"] .player-card,
[data-style="cottagecore"] .expanded-draft-card {
  background-color: #130e09;
  background-image: none;
  border-color: rgba(180,140,90,.28);
  border-style: dashed;
  border-radius: 8px;
}
[data-style="cottagecore"] .player-card.tier-elite,
[data-style="cottagecore"] .expanded-draft-card.tier-elite {
  border-color: rgba(210,170,100,.50);
  border-style: solid;
  border-top-width: 2px;
  background-color: rgba(212, 168, 90, 0.07) !important;
  background-image: none;
  box-shadow: 0 0 16px rgba(200,150,70,.12), inset 0 1px 0 rgba(220,175,90,.18);
}
[data-style="cottagecore"] .player-card.tier-great,
[data-style="cottagecore"] .expanded-draft-card.tier-great {
  border-color: rgba(200,120,110,.38);
  border-style: dashed;
  background-image: none;  background-color: rgba(200, 120, 112, 0.05) !important;

}
[data-style="cottagecore"] .player-card.tier-good,
[data-style="cottagecore"] .expanded-draft-card.tier-good {
  border-color: rgba(130,175,100,.32);
  border-style: dashed;
  background-color: rgba(128, 176, 104, 0.04) !important;
  background-image: none;
}
[data-style="cottagecore"] .player-card.tier-average,
[data-style="cottagecore"] .expanded-draft-card.tier-average {
  border-color: rgba(130,175,100,.32);
  border-style: dashed;
  background-color: rgba(119, 140, 109, 0.04) !important;
  background-image: none;
}

/* Buttons */
[data-style="cottagecore"] .btn-primary {
  background: rgba(180,130,65,.14);
  border-color: rgba(200,155,80,.35);
  border-style: solid;
  color: rgba(220,175,95,.95);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 14px;
  border-radius: 99px;
}
[data-style="cottagecore"] .btn-outline {
  font-family: 'Playfair Display', serif;
  border-radius: 99px;
}
[data-style="cottagecore"] .player-pos,
[data-style="cottagecore"] .slot-box-pos {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  background: rgba(14,10,6,.55);
  color: rgba(190,145,80,.72);
  border-color: rgba(160,120,60,.30);
  border-radius: 99px;
}

.swatch-cottagecore-el { background: rgba(212,168,90,.20);  border: 1px solid rgba(212,168,90,.55); }
.swatch-cottagecore-gr { background: rgba(200,120,112,.17); border: 1px solid rgba(200,120,112,.48); }
.swatch-cottagecore-go { background: rgba(128,176,104,.14); border: 1px solid rgba(128,176,104,.40); }


/* ══════════════════════════════════════════════════════════════
   ARKNIGHTS II (Rhodes Island)
   Charcoal, orange diamond, angular clips, operator file feel
══════════════════════════════════════════════════════════════ */

[data-style="arknights"] {
  --tier-elite:  #ff9800;
  --tier-great:  #4ec8e0;
  --tier-good:   #9060e0;
  --tier-average: #907ab3;
  --gold:        #ff9800;
  --gold-rgb:    255, 152, 0;
  --gold-bright: #ffb840;
  --purple-rgb:  78, 200, 224;
  --green-rgb:   144, 96, 224;
  --font:        'Rajdhani', sans-serif;
  --void:        #111214;
  --void-2:      #1a1d22;
}

[data-style="arknights"] body {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(255,255,255,.010) 8px, rgba(255,255,255,.010) 9px),
    repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(255,255,255,.008) 8px, rgba(255,255,255,.008) 9px),
    #111214;
  background-attachment: fixed;
}
[data-style="arknights"] body::before,
[data-style="arknights"] body::after { display: none; }

/* Typography */
[data-style="arknights"] .player-name,
[data-style="arknights"] .diamond-pos-name,
[data-style="arknights"] .manager-name,
[data-style="arknights"] .brand,
[data-style="arknights"] .modal-title,
[data-style="arknights"] .section-label,
[data-style="arknights"] .lineup-group-name,
[data-style="arknights"] .lineup-card-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Shimmer — fast orange laser scan, fires infrequently */
@keyframes shimmer-arknights {
  0%,70%   { left: -5%; opacity: 0; }
  71%      { opacity: 1; }
  80%      { left: 105%; opacity: .8; }
  81%,100% { opacity: 0; left: 105%; }
}
[data-style="arknights"] .shimmer-overlay::before {
  width: 4px;
  background: linear-gradient(180deg, transparent, rgba(255,160,0,.75), rgba(255,120,0,.55), transparent);
  animation-name: shimmer-arknights;
  animation-duration: 5s;
}

/* Cards */
[data-style="arknights"] .player-card,
[data-style="arknights"] .expanded-draft-card {
  background-color: #1e2026;
  background-image: none;
  border-color: #2e3038;
  border-top: 2px solid rgba(255,140,0,.55);
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
/* Orange cut corner accent */
[data-style="arknights"] .player-card::before,
[data-style="arknights"] .expanded-draft-card::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 8px; height: 8px;
  background: rgba(255,140,0,.55);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  pointer-events: none;
}
/* Chess rook watermark */
[data-style="arknights"] .player-card::after,
[data-style="arknights"] .expanded-draft-card::after {
  content: '♜';
  position: absolute; bottom: 0; right: 6px;
  font-size: 44px; color: rgba(255,255,255,.030);
  line-height: 1; pointer-events: none;
}
[data-style="arknights"] .player-card.tier-elite,
[data-style="arknights"] .expanded-draft-card.tier-elite {
  border-top-color: rgba(255,165,0,.92);
  background-color: rgba(255, 152, 0, 0.07) !important;
  background-image: none;
  box-shadow: 0 0 0 1px rgba(255,140,0,.18), 0 2px 14px rgba(255,100,0,.12);
}
[data-style="arknights"] .player-card.tier-great,
[data-style="arknights"] .expanded-draft-card.tier-great {
  border-top-color: rgba(78,200,224,.55);
  background-color: rgba(78, 200, 224, 0.05) !important;
  background-image: none;
}
[data-style="arknights"] .player-card.tier-good,
[data-style="arknights"] .expanded-draft-card.tier-good {
  border-top-color: rgba(144,96,224,.45);
  background-color: rgba(144, 96, 224, 0.04) !important;
  background-image: none;
}
[data-style="arknights"] .player-card.tier-average,
[data-style="arknights"] .expanded-draft-card.tier-average {
  border-top-color: rgba(144,122,179,.45);
  background-color: rgba(144, 122, 179, 0.04) !important;
  background-image: none;
}

/* Buttons */
[data-style="arknights"] .btn-primary {
  background: rgba(255,130,0,.12);
  border-color: rgba(255,140,0,.42);
  border-bottom: 2px solid rgba(255,120,0,.55);
  color: rgba(255,180,40,.95);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0;
}
[data-style="arknights"] .btn-outline {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: 0;
}
[data-style="arknights"] .player-pos,
[data-style="arknights"] .slot-box-pos {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  background: rgba(14,16,22,.70);
  color: rgba(255,150,0,.70);
  border-color: rgba(255,120,0,.28);
  border-radius: 0;
  letter-spacing: 0.14em;
}

.swatch-arknights-el { background: rgba(255,152,0,.22);  border: 1px solid rgba(255,152,0,.58); }
.swatch-arknights-gr { background: rgba(78,200,224,.17); border: 1px solid rgba(78,200,224,.48); }
.swatch-arknights-go { background: rgba(144,96,224,.14); border: 1px solid rgba(144,96,224,.40); }


/* ══════════════════════════════════════════════════════════════
   BAELZ (Council of Chaos)
   Deep red/black, die motif, diagonal hatch, chaotic shimmer
══════════════════════════════════════════════════════════════ */

[data-style="baelz"] {
  --tier-elite:  #e02020;
  --tier-great:  #a01010;
  --tier-good:   #601010;
  --tier-average: #4c2929;
  --gold:        #e02020;
  --gold-rgb:    224, 32, 32;
  --gold-bright: #ff4040;
  --purple-rgb:  160, 16, 16;
  --green-rgb:   96, 16, 16;
  --font:        'Rajdhani', sans-serif;
  --void:        #0e0608;
  --void-2:      #160a0c;
}

[data-style="baelz"] body {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(180,0,0,.022) 3px, rgba(180,0,0,.022) 4px),
    #0e0608;
  background-attachment: fixed;
}
[data-style="baelz"] body::before,
[data-style="baelz"] body::after { display: none; }

/* Typography */
[data-style="baelz"] .player-name,
[data-style="baelz"] .diamond-pos-name,
[data-style="baelz"] .manager-name,
[data-style="baelz"] .brand,
[data-style="baelz"] .modal-title,
[data-style="baelz"] .section-label,
[data-style="baelz"] .lineup-group-name,
[data-style="baelz"] .lineup-card-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Shimmer — three rapid chaotic red flashes */
@keyframes shimmer-baelz {
  0%,60%   { left: -80%; opacity: 0; }
  62%      { opacity: 1; }
  68%      { left: 130%; opacity: .8; }
  70%      { left: -80%; opacity: 0; }
  72%      { opacity: .6; }
  76%      { left: 130%; opacity: .5; }
  78%      { left: -80%; opacity: 0; }
  80%      { opacity: .4; left: 10%; }
  84%      { left: 130%; opacity: 0; }
  100%     { left: -80%; opacity: 0; }
}
[data-style="baelz"] .shimmer-overlay::before {
  width: 35%;
  background: linear-gradient(110deg, transparent, rgba(220,30,30,.24), transparent);
  animation-name: shimmer-baelz;
  animation-duration: 4s;
}

/* Cards */
[data-style="baelz"] .player-card,
[data-style="baelz"] .expanded-draft-card {
  background-color: #140608;
  background-image: none;
  border-color: rgba(200,20,30,.28);
  border-top: 2px solid rgba(220,30,30,.70);
  border-radius: 2px;
}
/* Diagonal hazard hatch on all cards */
[data-style="baelz"] .player-card::after,
[data-style="baelz"] .expanded-draft-card::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,.010) 3px, rgba(255,255,255,.010) 4px);
}
/* Die watermark on non-elite, Mr. Squeaks on elite */
[data-style="baelz"] .player-card::before,
[data-style="baelz"] .expanded-draft-card::before {
  content: '⚄';
  position: absolute; bottom: 4px; left: 6px;
  font-size: 18px; opacity: .09; pointer-events: none; line-height: 1;
  color: rgba(200,40,40,1);
}
[data-style="baelz"] .player-card.tier-elite::before,
[data-style="baelz"] .expanded-draft-card.tier-elite::before {
  content: '🐭';
  font-size: 16px; opacity: .14;
}
[data-style="baelz"] .player-card.tier-elite,
[data-style="baelz"] .expanded-draft-card.tier-elite {
  border-color: rgba(230,30,40,.62);
  border-top-color: rgba(255,40,40,.88);
  background-color: rgba(224, 32, 32, 0.07) !important;
  background-image: none;
  box-shadow: 0 0 16px rgba(200,20,30,.22), inset 1px 0 0 rgba(220,20,30,.35);
}
[data-style="baelz"] .player-card.tier-great,
[data-style="baelz"] .expanded-draft-card.tier-great {
  border-color: rgba(160,16,24,.45);
  background-color: rgba(160, 16, 16, 0.05) !important;
  background-image: none;
}
[data-style="baelz"] .player-card.tier-good,
[data-style="baelz"] .expanded-draft-card.tier-good {
  border-color: rgba(20,165,148,.32);
  border-top-color: rgba(20,185,165,.50);
  background-color: rgba(10, 80, 70, 0.04) !important;
  background-image: none;
}
[data-style="baelz"] .player-card.tier-average,
[data-style="baelz"] .expanded-draft-card.tier-average {
  border-color: rgba(20,165,148,.32);
  border-top-color: rgba(20,185,165,.50);
  background-color: rgba(10, 80, 70, 0.04) !important;
  background-image: none;
}

/* Buttons */
[data-style="baelz"] .btn-primary {
  background: rgba(200,20,30,.18);
  border-color: rgba(220,30,40,.45);
  border-bottom: 2px solid rgba(240,40,40,.62);
  color: rgba(255,100,100,.95);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: 2px;
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
}
[data-style="baelz"] .btn-outline {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  border-radius: 2px;
}
[data-style="baelz"] .player-pos,
[data-style="baelz"] .slot-box-pos {
  background: rgba(14,4,6,.65);
  color: rgba(200,40,40,.72);
  border-color: rgba(180,20,30,.30);
  border-radius: 2px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
}

[data-style="baelz"] .ace-badge,
[data-style="baelz"] .clutch-badge,
[data-style="baelz"] .ironman-badge {
  color: rgba(30,185,165,.90);
  border-color: rgba(20,165,148,.45);
  background: rgba(8,40,36,.70);
}

.swatch-baelz-el { background: rgba(224,32,32,.22);  border: 1px solid rgba(224,32,32,.58); }
.swatch-baelz-gr { background: rgba(160,16,16,.18);  border: 1px solid rgba(160,16,16,.48); }
.swatch-baelz-go { background: rgba(96,16,16,.14);   border: 1px solid rgba(96,16,16,.38); }


/* ══════════════════════════════════════════════════════════════
   BAELZ — background die watermark (injected element)
══════════════════════════════════════════════════════════════ */

/* baelz-bg-die enabled */

/* ── Y2K — Orbitron for stat numbers ── */
[data-style="y2k"] .player-stat,
[data-style="y2k"] .stat-value {
  font-family: 'Orbitron', monospace;
}

/* ── Baelz — Orbitron for stat numbers ── */
[data-style="baelz"] .player-stat,
[data-style="baelz"] .stat-value {
  font-family: 'Orbitron', monospace;
}


/* ══════════════════════════════════════════════════════════════
   SLOT-BOX + DIAMOND-POS-CARD TIER OVERRIDES FOR NEW THEMES
   (lineup card, result screen, postseason — these use .slot-box
    and .diamond-pos-card, not .player-card)
══════════════════════════════════════════════════════════════ */

/* ── Techwear ── */
[data-style="techwear"] .slot-box,
[data-style="techwear"] .slot-filled {
  background-color: #0a0e1a;
  border-color: rgba(60,120,200,.28);
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
[data-style="techwear"] .slot-box.tier-elite,
[data-style="techwear"] .slot-filled.tier-elite {
  border-color: rgba(80,180,255,.60); background-color: #0c1220;
  box-shadow: 0 0 12px rgba(60,140,220,.16);
}
[data-style="techwear"] .slot-box.tier-great,
[data-style="techwear"] .slot-filled.tier-great { border-color: rgba(48,128,192,.45); background-color: #0a1018; }
[data-style="techwear"] .slot-box.tier-good,
[data-style="techwear"] .slot-filled.tier-good  { border-color: rgba(32,72,120,.35); }
[data-style="techwear"] .slot-box.tier-average,
[data-style="techwear"] .slot-filled.tier-average { border-color: rgba(57,74,96,.35); }
[data-style="techwear"] .diamond-pos-card.tier-elite {
  border-color: rgba(80,180,255,.60); background-color: #0c1220;
  box-shadow: 0 0 8px rgba(60,140,220,.14); border-radius: 0;
}
[data-style="techwear"] .diamond-pos-card.tier-great { border-color: rgba(48,128,192,.45); border-radius: 0; }
[data-style="techwear"] .diamond-pos-card.tier-good  { border-color: rgba(32,72,120,.35); border-radius: 0; }

/* ── Virtual Idol Fes ── */
[data-style="idolfes"] .slot-box,
[data-style="idolfes"] .slot-filled {
  background-color: rgba(20,8,40,.85); border-color: rgba(160,60,255,.22); border-radius: 12px;
}
[data-style="idolfes"] .slot-box.tier-elite,
[data-style="idolfes"] .slot-filled.tier-elite {
  border-color: rgba(220,80,255,.55); background-color: rgba(24,8,48,.90);
  box-shadow: 0 0 14px rgba(200,60,255,.18);
}
[data-style="idolfes"] .slot-box.tier-great,
[data-style="idolfes"] .slot-filled.tier-great { border-color: rgba(128,80,224,.40); }
[data-style="idolfes"] .slot-box.tier-good,
[data-style="idolfes"] .slot-filled.tier-good  { border-color: rgba(40,128,192,.32); }
[data-style="idolfes"] .slot-box.tier-average,
[data-style="idolfes"] .slot-filled.tier-average { border-color: rgba(86,125,153,.32); }
[data-style="idolfes"] .diamond-pos-card.tier-elite {
  border-color: rgba(220,80,255,.55); background-color: rgba(24,8,48,.90);
  box-shadow: 0 0 8px rgba(200,60,255,.16); border-radius: 12px;
}
[data-style="idolfes"] .diamond-pos-card.tier-great { border-color: rgba(128,80,224,.40); border-radius: 12px; }
[data-style="idolfes"] .diamond-pos-card.tier-good  { border-color: rgba(40,128,192,.32); border-radius: 12px; }

/* ── Kronii ── */
[data-style="kronii"] .slot-box,
[data-style="kronii"] .slot-filled {
  background-color: rgba(4,16,32,.88); border-color: rgba(60,160,190,.25);
  border-top: 2px solid rgba(40,160,190,.42); border-radius: 0;
}
[data-style="kronii"] .slot-box.tier-elite,
[data-style="kronii"] .slot-filled.tier-elite {
  border-color: rgba(64,208,232,.50); border-top: 2px solid rgba(64,208,232,.75);
  background-color: rgba(4,20,36,.92); border-radius: 0;
  box-shadow: 0 0 10px rgba(40,180,210,.14);
}
[data-style="kronii"] .slot-box.tier-great,
[data-style="kronii"] .slot-filled.tier-great { border-color: rgba(40,144,176,.40); border-top-color: rgba(40,144,176,.58); border-radius: 0; }
[data-style="kronii"] .slot-box.tier-good,
[data-style="kronii"] .slot-filled.tier-good  { border-color: rgba(24,88,120,.32); border-top-color: rgba(24,88,120,.48); border-radius: 0; }
[data-style="kronii"] .slot-box.tier-average,
[data-style="kronii"] .slot-filled.tier-average { border-color: rgba(53,81,96,.32); border-top-color: rgba(53,81,96,.48); border-radius: 0; }
[data-style="kronii"] .diamond-pos-card.tier-elite {
  border-color: rgba(64,208,232,.50); background-color: rgba(4,20,36,.92);
  box-shadow: 0 0 8px rgba(40,180,210,.12); border-radius: 4px;
}
[data-style="kronii"] .diamond-pos-card.tier-great { border-color: rgba(40,144,176,.40); border-radius: 4px; }
[data-style="kronii"] .diamond-pos-card.tier-good  { border-color: rgba(24,88,120,.32); border-radius: 4px; }

/* ── RollerCoaster Tycoon ── */
[data-style="rct"] .slot-box,
[data-style="rct"] .slot-filled {
  background-color: #1e1408;
  border: 2px solid #5a4020;
  border-top-color: #6a5028; border-left-color: #6a5028;
  border-bottom-color: #2a1808; border-right-color: #2a1808;
  border-radius: 0;
  box-shadow: inset 1px 1px 0 rgba(180,130,60,.10), 2px 2px 0 #0e0804;
}
[data-style="rct"] .slot-box.tier-elite,
[data-style="rct"] .slot-filled.tier-elite {
  background-color: #241808;
  border-top-color: #9a7840; border-left-color: #9a7840;
  border-bottom-color: #3a2010; border-right-color: #3a2010;
  box-shadow: inset 1px 1px 0 rgba(220,180,80,.18), 3px 3px 0 #0e0804;
  animation: rct-elite-pulse 2.5s ease-in-out infinite;
}
[data-style="rct"] .slot-box.tier-great,
[data-style="rct"] .slot-filled.tier-great {
  border-top-color: #7a6030; border-left-color: #7a6030;
}
[data-style="rct"] .diamond-pos-card {
  background-color: #1e1408;
  border: 2px solid #5a4020;
  border-top-color: #6a5028; border-left-color: #6a5028;
  border-bottom-color: #2a1808; border-right-color: #2a1808;
  border-radius: 0;
  box-shadow: 2px 2px 0 #0e0804;
}
[data-style="rct"] .diamond-pos-card.tier-elite {
  border-top-color: #9a7840; border-left-color: #9a7840;
  animation: rct-elite-pulse 2.5s ease-in-out infinite;
}
[data-style="rct"] .diamond-pos-card.tier-great { border-top-color: #7a6030; border-left-color: #7a6030; }

/* Fix RCT player-card bevel — use border shorthand first then override sides */
[data-style="rct"] .player-card,
[data-style="rct"] .expanded-draft-card {
  background-color: #1e1408 !important;
  background-image: none !important;
  border: 3px solid #5a4020 !important;
  border-top-color: #b08848 !important;
  border-left-color: #b08848 !important;
  border-bottom-color: #0e0804 !important;
  border-right-color: #0e0804 !important;
  border-radius: 0 !important;
  box-shadow: inset 1px 1px 0 rgba(220,170,80,.22), 2px 2px 0 #080400 !important;
}
[data-style="rct"] .player-card.tier-elite,
[data-style="rct"] .expanded-draft-card.tier-elite {
  background-color: #241808 !important;
  background-image: none !important;
  border: 3px solid #6a5028 !important;
  border-top-color: #c09850 !important;
  border-left-color: #c09850 !important;
  border-bottom-color: #0a0602 !important;
  border-right-color: #0a0602 !important;
  border-radius: 0 !important;
  box-shadow: inset 1px 1px 0 rgba(220,180,80,.20), 3px 3px 0 #080400 !important;
  position: relative;
  overflow: hidden;
}
/* Pulsing amber glow overlay — pseudo-element avoids background-color cascade fights */
[data-style="rct"] .player-card.tier-elite::before,
[data-style="rct"] .expanded-draft-card.tier-elite::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(240,200,80,.28) 0%, rgba(200,150,40,.12) 50%, transparent 80%);
  animation: rct-elite-pulse 2.5s ease-in-out infinite;
  z-index: 0;
}
[data-style="rct"] .btn-primary {
  background: #4a3018 !important;
  border: 2px solid #8a6030 !important;
  border-top-color: #a07838 !important;
  border-left-color: #a07838 !important;
  border-bottom-color: #2a1808 !important;
  border-right-color: #2a1808 !important;
  color: #d0a040 !important;
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 0;
  box-shadow: 2px 2px 0 #0e0804;
}

/* ── NASA ── */
[data-style="nasa"] .slot-box,
[data-style="nasa"] .slot-filled {
  background-color: #020408;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,140,0,.012) 3px, rgba(255,140,0,.012) 4px);
  border-color: rgba(255,140,0,.25);
  border-left: 2px solid rgba(255,120,0,.40);
  border-radius: 0;
}
[data-style="nasa"] .slot-box.tier-elite,
[data-style="nasa"] .slot-filled.tier-elite {
  border-color: rgba(255,180,0,.50); border-left-color: rgba(255,160,0,.72);
  background-color: #030509;
  box-shadow: 0 0 10px rgba(255,140,0,.12);
}
[data-style="nasa"] .slot-box.tier-great,
[data-style="nasa"] .slot-filled.tier-great { border-color: rgba(200,120,0,.38); border-left-color: rgba(200,100,0,.55); }
[data-style="nasa"] .slot-box.tier-good,
[data-style="nasa"] .slot-filled.tier-good  { border-color: rgba(136,68,0,.30); }
[data-style="nasa"] .slot-box.tier-average,
[data-style="nasa"] .slot-filled.tier-average { border-color: rgba(108,78,48,.30); }
[data-style="nasa"] .diamond-pos-card.tier-elite {
  border-color: rgba(255,180,0,.50); border-left: 2px solid rgba(255,160,0,.72);
  background-color: #030509; box-shadow: 0 0 8px rgba(255,140,0,.10); border-radius: 0;
}
[data-style="nasa"] .diamond-pos-card.tier-great { border-color: rgba(200,120,0,.38); border-radius: 0; }
[data-style="nasa"] .diamond-pos-card.tier-good  { border-color: rgba(136,68,0,.30); border-radius: 0; }

/* ── Y2K ── */
[data-style="y2k"] .slot-box,
[data-style="y2k"] .slot-filled {
  background: linear-gradient(135deg, rgba(200,180,255,.06) 0%, rgba(180,220,255,.04) 100%);
  border-color: rgba(180,140,255,.22); border-radius: 8px;
}
[data-style="y2k"] .slot-box.tier-elite,
[data-style="y2k"] .slot-filled.tier-elite {
  border-color: rgba(220,160,255,.55); box-shadow: 0 0 14px rgba(200,120,255,.16);
}
[data-style="y2k"] .slot-box.tier-great,
[data-style="y2k"] .slot-filled.tier-great { border-color: rgba(144,176,255,.40); }
[data-style="y2k"] .slot-box.tier-good,
[data-style="y2k"] .slot-filled.tier-good  { border-color: rgba(96,208,255,.30); }
[data-style="y2k"] .slot-box.tier-average,
[data-style="y2k"] .slot-filled.tier-average { border-color: rgba(134,183,204,.30); }
[data-style="y2k"] .diamond-pos-card.tier-elite {
  border-color: rgba(220,160,255,.55); box-shadow: 0 0 8px rgba(200,120,255,.14); border-radius: 8px;
}
[data-style="y2k"] .diamond-pos-card.tier-great { border-color: rgba(144,176,255,.40); border-radius: 8px; }
[data-style="y2k"] .diamond-pos-card.tier-good  { border-color: rgba(96,208,255,.30); border-radius: 8px; }

/* ── Dark Academia ── */
[data-style="darkacad"] .slot-box,
[data-style="darkacad"] .slot-filled {
  background-color: #120e08;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 14px, rgba(180,140,60,.016) 14px, rgba(180,140,60,.016) 15px);
  border-color: rgba(130,95,45,.42); border-top: 2px solid rgba(160,120,50,.32); border-radius: 0;
}
[data-style="darkacad"] .slot-box.tier-elite,
[data-style="darkacad"] .slot-filled.tier-elite {
  border-color: rgba(190,150,60,.65); border-top-color: rgba(200,160,65,.58);
  background-color: #160e06; box-shadow: 0 0 12px rgba(160,110,30,.14);
}
[data-style="darkacad"] .slot-box.tier-great,
[data-style="darkacad"] .slot-filled.tier-great { border-color: rgba(130,80,110,.40); }
[data-style="darkacad"] .slot-box.tier-good,
[data-style="darkacad"] .slot-filled.tier-good  { border-color: rgba(80,110,75,.32); }
[data-style="darkacad"] .slot-box.tier-average,
[data-style="darkacad"] .slot-filled.tier-average { border-color: rgba(80,110,75,.32); }
[data-style="darkacad"] .diamond-pos-card.tier-elite {
  border-color: rgba(190,150,60,.65); background-color: #160e06;
  box-shadow: 0 0 8px rgba(160,110,30,.12); border-radius: 0;
}
[data-style="darkacad"] .diamond-pos-card.tier-great { border-color: rgba(130,80,110,.40); border-radius: 0; }
[data-style="darkacad"] .diamond-pos-card.tier-good  { border-color: rgba(80,110,75,.32); border-radius: 0; }

/* ── Cottagecore ── */
[data-style="cottagecore"] .slot-box,
[data-style="cottagecore"] .slot-filled {
  background-color: #130e09; border-color: rgba(180,140,90,.25);
  border-style: dashed; border-radius: 8px;
}
[data-style="cottagecore"] .slot-box.tier-elite,
[data-style="cottagecore"] .slot-filled.tier-elite {
  border-color: rgba(210,170,100,.45); border-style: solid; border-top-width: 2px;
  background-color: #180e08; box-shadow: 0 0 10px rgba(200,150,70,.10);
}
[data-style="cottagecore"] .slot-box.tier-great,
[data-style="cottagecore"] .slot-filled.tier-great { border-color: rgba(200,120,110,.32); }
[data-style="cottagecore"] .slot-box.tier-good,
[data-style="cottagecore"] .slot-filled.tier-good  { border-color: rgba(130,175,100,.28); }
[data-style="cottagecore"] .slot-box.tier-average,
[data-style="cottagecore"] .slot-filled.tier-average { border-color: rgba(130,175,100,.28); }
[data-style="cottagecore"] .diamond-pos-card.tier-elite {
  border-color: rgba(210,170,100,.45); border-style: solid; background-color: #180e08;
  box-shadow: 0 0 8px rgba(200,150,70,.10); border-radius: 8px;
}
[data-style="cottagecore"] .diamond-pos-card.tier-great { border-color: rgba(200,120,110,.32); border-radius: 8px; }
[data-style="cottagecore"] .diamond-pos-card.tier-good  { border-color: rgba(130,175,100,.28); border-radius: 8px; }

/* ── Arknights ── */
[data-style="arknights"] .slot-box,
[data-style="arknights"] .slot-filled {
  background-color: #1e2026; border-color: #2e3038;
  border-top: 2px solid rgba(255,140,0,.45); border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
[data-style="arknights"] .slot-box.tier-elite,
[data-style="arknights"] .slot-filled.tier-elite {
  border-top-color: rgba(255,165,0,.88); background-color: #23262e;
  box-shadow: 0 0 0 1px rgba(255,140,0,.15), 0 2px 10px rgba(255,100,0,.10);
}
[data-style="arknights"] .slot-box.tier-great,
[data-style="arknights"] .slot-filled.tier-great { border-top-color: rgba(78,200,224,.50); background-color: #1c2028; }
[data-style="arknights"] .slot-box.tier-good,
[data-style="arknights"] .slot-filled.tier-good  { border-top-color: rgba(144,96,224,.40); }
[data-style="arknights"] .slot-box.tier-average,
[data-style="arknights"] .slot-filled.tier-average { border-top-color: rgba(144,122,179,.40); }
[data-style="arknights"] .diamond-pos-card {
  background-color: #1e2026; border-color: #2e3038;
  border-top: 2px solid rgba(255,140,0,.45); border-radius: 0;
}
[data-style="arknights"] .diamond-pos-card.tier-elite {
  border-top-color: rgba(255,165,0,.88); background-color: #23262e;
  box-shadow: 0 0 0 1px rgba(255,140,0,.14);
}
[data-style="arknights"] .diamond-pos-card.tier-great { border-top-color: rgba(78,200,224,.50); background-color: #1c2028; }
[data-style="arknights"] .diamond-pos-card.tier-good  { border-top-color: rgba(144,96,224,.40); }

/* ── Baelz ── */
[data-style="baelz"] .slot-box,
[data-style="baelz"] .slot-filled {
  background-color: #140608; border-color: rgba(200,20,30,.25);
  border-top: 2px solid rgba(220,30,30,.60); border-radius: 2px;
}
[data-style="baelz"] .slot-box.tier-elite,
[data-style="baelz"] .slot-filled.tier-elite {
  border-color: rgba(230,30,40,.55); border-top-color: rgba(255,40,40,.80);
  background-color: #180608; box-shadow: 0 0 12px rgba(200,20,30,.18);
}
[data-style="baelz"] .slot-box.tier-great,
[data-style="baelz"] .slot-filled.tier-great { border-color: rgba(160,16,24,.38); }
[data-style="baelz"] .slot-box.tier-good,
[data-style="baelz"] .slot-filled.tier-good  { border-color: rgba(20,165,148,.28); border-top-color: rgba(20,185,165,.45); }
[data-style="baelz"] .slot-box.tier-average,
[data-style="baelz"] .slot-filled.tier-average { border-color: rgba(20,165,148,.28); border-top-color: rgba(20,185,165,.45); }
[data-style="baelz"] .diamond-pos-card.tier-elite {
  border-color: rgba(230,30,40,.55); border-top: 2px solid rgba(255,40,40,.80);
  background-color: #180608; box-shadow: 0 0 8px rgba(200,20,30,.16); border-radius: 2px;
}
[data-style="baelz"] .diamond-pos-card.tier-great { border-color: rgba(160,16,24,.38); border-radius: 2px; }
[data-style="baelz"] .diamond-pos-card.tier-good  { border-color: rgba(20,165,148,.28); border-radius: 2px; }


/* ══════════════════════════════════════════════════════════════
   OURO KRONII — BACKGROUND ELEMENTS
══════════════════════════════════════════════════════════════ */

[data-style="kronii"] body::before {
  content: '';
  position: fixed; bottom: -10%; left: 50%; transform: translateX(-50%);
  width: 700px; height: 500px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(60,180,210,.10) 0%, transparent 65%);
  animation: kronii-glow 14s ease-in-out infinite;
}
[data-style="kronii"] body::after { display: none; }

/* Nebula cloud blobs */
.nb1,.nb2,.nb3,.nb4,.nb5,.nb6{position:fixed;pointer-events:none;z-index:0;border-radius:40% 60% 55% 45% / 50% 45% 55% 50%;}
.nb1{width:420px;height:300px;top:-5%;left:-8%;background:radial-gradient(ellipse at 55% 45%,rgba(60,40,160,.28) 0%,rgba(40,20,120,.12) 50%,transparent 75%);filter:blur(40px);animation:nb-drift-1 28s ease-in-out infinite}
.nb2{width:380px;height:320px;top:5%;right:-10%;background:radial-gradient(ellipse at 40% 60%,rgba(80,40,180,.22) 0%,rgba(50,20,140,.10) 50%,transparent 75%);filter:blur(45px);animation:nb-drift-2 34s ease-in-out infinite;animation-delay:-12s}
.nb3{width:500px;height:260px;top:25%;left:-15%;background:radial-gradient(ellipse at 60% 40%,rgba(40,30,120,.20) 0%,rgba(30,15,100,.08) 55%,transparent 78%);filter:blur(50px);animation:nb-drift-3 26s ease-in-out infinite;animation-delay:-7s}
.nb4{width:360px;height:280px;bottom:15%;right:-8%;background:radial-gradient(ellipse at 45% 55%,rgba(70,30,160,.24) 0%,rgba(40,15,120,.10) 50%,transparent 74%);filter:blur(42px);animation:nb-drift-4 30s ease-in-out infinite;animation-delay:-18s}
.nb5{width:440px;height:240px;bottom:5%;left:-5%;background:radial-gradient(ellipse at 50% 50%,rgba(50,25,140,.22) 0%,rgba(30,10,100,.09) 52%,transparent 76%);filter:blur(48px);animation:nb-drift-5 22s ease-in-out infinite;animation-delay:-4s}
.nb6{width:300px;height:300px;top:50%;left:35%;background:radial-gradient(ellipse at 50% 50%,rgba(90,50,200,.14) 0%,rgba(50,20,140,.06) 55%,transparent 78%);filter:blur(55px);animation:nb-drift-1 38s ease-in-out infinite;animation-delay:-20s}
@keyframes nb-drift-1{0%,100%{transform:translate(0,0) rotate(0deg);opacity:.85;filter:blur(40px)}50%{transform:translate(30px,-20px) rotate(4deg);opacity:1;filter:blur(46px)}}
@keyframes nb-drift-2{0%,100%{transform:translate(0,0) rotate(0deg);opacity:.70;filter:blur(45px)}50%{transform:translate(-25px,30px) rotate(-3deg);opacity:.95;filter:blur(52px)}}
@keyframes nb-drift-3{0%,100%{transform:translate(0,0) rotate(0deg);opacity:.80;filter:blur(50px)}50%{transform:translate(20px,25px) rotate(5deg);opacity:1;filter:blur(44px)}}
@keyframes nb-drift-4{0%,100%{transform:translate(0,0) rotate(0deg);opacity:.75;filter:blur(42px)}50%{transform:translate(-30px,-20px) rotate(-4deg);opacity:.90;filter:blur(50px)}}
@keyframes nb-drift-5{0%,100%{transform:translate(0,0) rotate(0deg);opacity:.80;filter:blur(48px)}50%{transform:translate(25px,-30px) rotate(3deg);opacity:.95;filter:blur(55px)}}

/* Wide glowing horizontal bar through clock */
.kronii-hline{
  position:fixed;left:0;right:0;top:12%;
  transform:translateY(-50%);
  z-index:0;pointer-events:none;
  height:140px;
}
.kronii-hline::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,
    transparent 0%,rgba(255,210,100,.01) 8%,rgba(255,215,110,.04) 16%,
    rgba(255,218,115,.10) 24%,rgba(255,220,120,.18) 32%,rgba(255,225,128,.28) 40%,
    rgba(255,228,132,.36) 46%,rgba(255,230,135,.40) 50%,rgba(255,228,132,.36) 54%,
    rgba(255,225,128,.28) 60%,rgba(255,220,120,.18) 68%,rgba(255,218,115,.10) 76%,
    rgba(255,215,110,.04) 84%,rgba(255,210,100,.01) 92%,transparent 100%);
  filter:blur(12px);
  animation:kronii-hline-pulse 4s ease-in-out infinite;
}
.kronii-hline::after{
  content:'';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:400px;height:120px;
  background:radial-gradient(ellipse 100% 100% at 50% 50%,rgba(255,255,210,.20) 0%,rgba(255,230,120,.12) 30%,rgba(255,220,100,.06) 55%,transparent 75%);
  filter:blur(14px);
  animation:kronii-hline-pulse 4s ease-in-out infinite;
}
@keyframes kronii-hline-pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* Clock point */
.kronii-clock{
  position:fixed;left:50%;top:12%;
  transform:translate(-50%,-50%);
  z-index:0;pointer-events:none;
}
.kronii-ring{
  width:160px;height:160px;border-radius:50%;
  border:1.5px solid rgba(255,220,140,.60);
  box-shadow:0 0 12px rgba(255,200,80,.30),inset 0 0 8px rgba(255,200,80,.15);
  position:relative;
}
.kronii-hand{
  position:absolute;bottom:50%;left:50%;
  transform-origin:bottom center;
  border-radius:2px 2px 0 0;
}
.kronii-hand-s{width:1px;height:260px;margin-left:-.5px;background:rgba(255,255,255,.90);box-shadow:0 0 6px 3px rgba(255,220,100,.70),0 0 14px 5px rgba(255,200,80,.40),0 0 28px 8px rgba(255,180,60,.20)}
.kronii-hand-m{width:1.5px;height:192px;margin-left:-.75px;background:rgba(255,220,110,.92);box-shadow:0 0 6px 3px rgba(255,210,90,.65),0 0 14px 5px rgba(255,190,70,.38),0 0 26px 7px rgba(255,170,50,.18)}
.kronii-hand-h{width:2px;height:100px;margin-left:-1px;background:rgba(255,210,90,.80);box-shadow:0 0 5px 3px rgba(255,200,80,.60),0 0 12px 5px rgba(255,180,60,.32),0 0 22px 6px rgba(255,160,40,.16)}
.kronii-star{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,1) 0%,rgba(255,220,120,.90) 40%,rgba(255,160,40,.40) 70%,transparent 100%);
  box-shadow:0 0 45px rgba(255,200,80,.88),0 0 90px rgba(255,150,40,.48);
  z-index:2;
}
.kronii-star::before{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:1.5px;height:160px;
  background:linear-gradient(180deg,transparent 0%,rgba(255,240,180,.60) 20%,rgba(255,255,220,.90) 48%,rgba(255,255,255,1.00) 50%,rgba(255,255,220,.90) 52%,rgba(255,240,180,.60) 80%,transparent 100%);
  filter:blur(1px);box-shadow:0 0 4px 2px rgba(255,230,150,.50);
}
.kronii-star::after{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:200px;height:1.5px;
  background:linear-gradient(90deg,transparent 0%,rgba(255,240,180,.55) 15%,rgba(255,255,220,.88) 45%,rgba(255,255,255,1.00) 50%,rgba(255,255,220,.88) 55%,rgba(255,240,180,.55) 85%,transparent 100%);
  filter:blur(1px);box-shadow:0 0 4px 2px rgba(255,230,150,.50);
}

/* Pulse ring */
.kronii-pulse{
  position:fixed;left:50%;top:12%;
  transform:translate(-50%,-50%);
  width:160px;height:160px;border-radius:50%;
  border:1.5px solid rgba(255,210,100,.70);
  pointer-events:none;z-index:0;
  animation:kronii-pulse-expand 13s ease-out infinite;
}
@keyframes kronii-pulse-expand{
  0%,18%{width:160px;height:160px;opacity:0}
  20%{opacity:.85;border-color:rgba(255,210,100,.70)}
  60%{opacity:.50}
  88%{opacity:.12}
  100%{width:820px;height:820px;opacity:0;border-color:rgba(255,210,100,.05)}
}

/* LOADING text */
.kronii-loading{
  position:fixed;bottom:5%;left:50%;transform:translateX(-50%);
  z-index:0;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.kronii-loading-text{
  font-family:'Share Tech Mono',monospace;font-size:18px;
  color:rgba(200,220,240,.80);letter-spacing:.28em;
  animation:kronii-loading-pulse 2.5s ease-in-out infinite;
  position:relative;z-index:0;
}
@keyframes kronii-loading-pulse{0%,100%{opacity:.40}50%{opacity:.88}}

/* BTTF 88 */
.kronii-88-wrap{position:relative;display:inline-block;line-height:1;}
.kronii-88-wrap::before{
  content:'88';position:absolute;inset:0;
  font-family:'DSEG7 Classic','Courier New',monospace;
  font-size:42px;font-weight:700;color:rgba(180,0,0,.22);letter-spacing:.08em;pointer-events:none;
}
.kronii-88{
  font-family:'DSEG7 Classic','Courier New',monospace;
  font-size:42px;font-weight:700;color:#ff2200;letter-spacing:.08em;
  text-shadow:0 0 6px rgba(255,60,0,.90),0 0 14px rgba(255,30,0,.70),0 0 28px rgba(255,0,0,.45),0 0 50px rgba(220,0,0,.25);
  animation:kronii-88-flicker .1s ease-in-out infinite;position:relative;z-index:1;
}
@keyframes kronii-88-flicker{
  0%,100%{opacity:1}3%{opacity:.92}6%{opacity:1}8%{opacity:.30}9%{opacity:1}
  35%{opacity:1}36%{opacity:.88}37%{opacity:1}60%{opacity:1}61%{opacity:.15}
  62%{opacity:.95}63%{opacity:1}78%{opacity:1}79%{opacity:.40}80%{opacity:.95}
  81%{opacity:.70}82%{opacity:1}95%{opacity:1}96%{opacity:.85}97%{opacity:1}
}


/* ══════════════════════════════════════════════════════════════
   TECHWEAR — BACKGROUND ELEMENTS
══════════════════════════════════════════════════════════════ */

.tw-scan {
  position: fixed; top: 0; left: -5%; width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent, rgba(80,180,255,.45) 40%, rgba(80,180,255,.45) 60%, transparent);
  box-shadow: 0 0 12px rgba(80,180,255,.30);
  animation: tw-scan 10s ease-in-out infinite;
  z-index: 0; pointer-events: none;
}
@keyframes tw-scan { 0%,10%{left:-5%} 80%,100%{left:105%} }

.tw-glow {
  position: fixed; top: -20%; left: -15%; width: 60%; height: 60%;
  z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 0% 0%, rgba(60,140,220,.16) 0%, rgba(40,100,180,.06) 40%, transparent 70%);
  animation: tw-glow-pulse 6s ease-in-out infinite;
}
@keyframes tw-glow-pulse { 0%,100%{opacity:.6} 50%{opacity:1} }

.tw-class {
  position: fixed; bottom: 8%; left: 50%; transform: translateX(-50%);
  font-family: 'Share Tech Mono', monospace; font-size: 11px;
  color: rgba(60,140,220,.18); letter-spacing: .30em; text-transform: uppercase;
  pointer-events: none; z-index: 0; white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════════
   VIRTUAL IDOL FES — BACKGROUND ELEMENTS
══════════════════════════════════════════════════════════════ */

[data-style="idolfes"] body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 25% -10%, rgba(255,60,180,.10) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 75% -10%, rgba(80,100,255,.10) 0%, transparent 65%);
  animation: idolfes-spot 12s ease-in-out infinite;
}
@keyframes idolfes-spot { 0%,100%{opacity:.7} 50%{opacity:1} }

.idol-spot { position: fixed; top: -30%; pointer-events: none; z-index: 0; width: 300px; height: 700px; border-radius: 0 0 50% 50%; }
.idol-spot-1 { left: 15%; background: linear-gradient(180deg, rgba(255,60,180,.18) 0%, transparent 80%); animation: idol-sweep-1 8s ease-in-out infinite; transform-origin: 50% 0; }
.idol-spot-2 { left: 40%; background: linear-gradient(180deg, rgba(180,60,255,.16) 0%, transparent 80%); animation: idol-sweep-2 11s ease-in-out infinite; transform-origin: 50% 0; }
.idol-spot-3 { left: 65%; background: linear-gradient(180deg, rgba(60,180,255,.15) 0%, transparent 80%); animation: idol-sweep-3 9s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes idol-sweep-1 { 0%,100%{transform:rotate(-12deg);opacity:.7} 50%{transform:rotate(12deg);opacity:1} }
@keyframes idol-sweep-2 { 0%,100%{transform:rotate(8deg);opacity:.6} 50%{transform:rotate(-8deg);opacity:1} }
@keyframes idol-sweep-3 { 0%,100%{transform:rotate(-6deg);opacity:.8} 50%{transform:rotate(10deg);opacity:.5} }

.idol-floor {
  position: fixed; bottom: 0; left: 0; right: 0; height: 35%; z-index: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(255,60,180,.08) 0%, rgba(120,40,255,.05) 40%, transparent 100%);
}

.idol-crowd {
  position: fixed; bottom: 0; left: 0; right: 0; height: 22%;
  z-index: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(4,2,14,.80) 0%, rgba(4,2,14,.40) 60%, transparent 100%);
}
.lightstick {
  position: absolute; bottom: 0; width: 4px; border-radius: 2px 2px 1px 1px;
  transform-origin: bottom center;
}
@keyframes ls-sway-a { 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(8deg)} }
@keyframes ls-sway-b { 0%,100%{transform:rotate(6deg)} 50%{transform:rotate(-10deg)} }
@keyframes ls-sway-c { 0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(7deg)} }
@keyframes ls-sway-d { 0%,100%{transform:rotate(10deg)} 50%{transform:rotate(-6deg)} }
@keyframes ls-sway-e { 0%,100%{transform:rotate(-12deg)} 50%{transform:rotate(4deg)} }
/* ── Idol Fes glitter dots ── */
.idol-glitter-el {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.idol-glitter-el::before, .idol-glitter-el::after {
  content: ''; position: absolute; width: 1.5px; height: 1.5px; border-radius: 50%;
  background: transparent;
  box-shadow:
    120px 200px 0 rgba(255,100,200,.80), 280px 150px 0 rgba(180,80,255,.70),
    450px 300px 0 rgba(100,200,255,.80), 600px 100px 0 rgba(255,80,180,.60),
    750px 250px 0 rgba(200,100,255,.70), 900px 180px 0 rgba(80,180,255,.80),
    150px 400px 0 rgba(255,120,200,.50), 380px 450px 0 rgba(150,80,255,.60),
    520px 380px 0 rgba(100,220,255,.70), 700px 420px 0 rgba(255,100,180,.50),
    1050px 200px 0 rgba(255,80,200,.65), 1150px 350px 0 rgba(80,200,255,.55),
    200px 550px 0 rgba(200,100,255,.60), 850px 500px 0 rgba(255,120,180,.55),
    1000px 420px 0 rgba(120,220,255,.65);
  animation: idol-glitter-a 4s ease-in-out infinite;
}
.idol-glitter-el::after {
  box-shadow:
    200px 300px 0 rgba(255,80,200,.60), 350px 200px 0 rgba(160,60,255,.80),
    500px 150px 0 rgba(80,200,255,.70), 650px 350px 0 rgba(255,100,180,.50),
    820px 280px 0 rgba(180,80,255,.60), 100px 350px 0 rgba(100,200,255,.70),
    420px 480px 0 rgba(255,120,200,.60), 580px 420px 0 rgba(140,80,255,.70),
    740px 200px 0 rgba(80,220,255,.50), 880px 400px 0 rgba(255,80,180,.70),
    1100px 300px 0 rgba(200,80,255,.55), 950px 150px 0 rgba(80,180,255,.65),
    300px 500px 0 rgba(255,100,200,.60), 1200px 450px 0 rgba(120,80,255,.55),
    70px 280px 0 rgba(100,220,200,.60);
  animation: idol-glitter-b 5s ease-in-out infinite; animation-delay: -2s;
}
@keyframes idol-glitter-a { 0%,100%{opacity:.35} 33%{opacity:.90} 66%{opacity:.50} }
@keyframes idol-glitter-b { 0%,100%{opacity:.55} 33%{opacity:.20} 66%{opacity:.85} }



/* ══════════════════════════════════════════════════════════════
   ROLLERCOASTER TYCOON — BACKGROUND ELEMENTS
══════════════════════════════════════════════════════════════ */

.rct-floor-el {
  position: fixed; bottom: 0; left: 0; right: 0; height: 40%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 120% 80% at 50% 100%, rgba(200,140,40,.12) 0%, transparent 60%);
  animation: rct-floor-pulse 7s ease-in-out infinite;
}
@keyframes rct-floor-pulse { 0%,100%{opacity:.6} 50%{opacity:1} }


/* ══════════════════════════════════════════════════════════════
   NASA MISSION CONTROL — BACKGROUND ELEMENTS
══════════════════════════════════════════════════════════════ */

.nasa-radar-el {
  position: fixed; top: 50%; left: 50%;
  width: 200vmax; height: 200vmax; margin: -100vmax;
  background: conic-gradient(from 0deg, transparent 355deg, rgba(255,160,0,.07) 358deg, transparent 360deg);
  animation: nasa-radar-spin 8s linear infinite;
  z-index: 0; pointer-events: none;
}
@keyframes nasa-radar-spin { to { transform: rotate(360deg); } }

.nasa-ring-el {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  border-radius: 50%; border: 1px solid rgba(255,140,0,.08); z-index: 0; pointer-events: none;
}
.nasa-ring-1 { width: 200px; height: 200px; }
.nasa-ring-2 { width: 400px; height: 400px; }
.nasa-ring-3 { width: 600px; height: 600px; }
.nasa-ring-4 { width: 800px; height: 800px; }

.nasa-ping-el {
  position: fixed; top: 50%; left: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,160,0,.50); z-index: 0; pointer-events: none;
  animation: nasa-ping-expand 4s ease-out infinite;
}
.nasa-ping-2 { animation-delay: -2s; }
@keyframes nasa-ping-expand {
  0%  { width:10px; height:10px; opacity:.8; transform:translate(-50%,-50%); }
  100%{ width:500px; height:500px; opacity:0; transform:translate(-50%,-50%); }
}

.nasa-corner-el {
  position: fixed; bottom: 0; right: 0; width: 40%; height: 40%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 100% 100%, rgba(255,120,0,.08) 0%, transparent 65%);
}


/* ══════════════════════════════════════════════════════════════
   Y2K CHROME BUTTERFLY — BACKGROUND ELEMENTS
══════════════════════════════════════════════════════════════ */

.y2k-sheen-el {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(135deg,
    rgba(200,160,255,.06) 0%, rgba(160,200,255,.04) 25%,
    rgba(255,200,240,.06) 50%, rgba(160,220,255,.04) 75%,
    rgba(200,160,255,.06) 100%);
  background-size: 400% 400%;
  animation: y2k-shift 12s ease-in-out infinite;
}
@keyframes y2k-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

.y2k-bf-el {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-size: 52vmin; line-height: 1;
  color: rgba(180,140,255,.055);
  user-select: none; pointer-events: none; z-index: 0;
  animation: y2k-bf-drift 20s ease-in-out infinite;
}
@keyframes y2k-bf-drift {
  0%,100%{transform:translate(-50%,-50%) rotate(-3deg) scale(1)}
  33%{transform:translate(-52%,-48%) rotate(2deg) scale(1.04)}
  66%{transform:translate(-48%,-52%) rotate(-1deg) scale(.97)}
}

.y2k-gloss-el {
  position: fixed; top: 0; left: -120%; width: 60%; height: 100%; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.04) 50%, transparent 70%);
  animation: y2k-gloss 8s ease-in-out infinite;
}
@keyframes y2k-gloss { 0%,20%{left:-120%} 80%,100%{left:160%} }


/* ══════════════════════════════════════════════════════════════
   DARK ACADEMIA — BACKGROUND ELEMENTS
══════════════════════════════════════════════════════════════ */

/* darkacad candle via injected .da-candle-el — see below */
@keyframes darkacad-candle {
  0%,100%{opacity:.85;transform:translateX(-50%) scaleX(1)}
  33%{opacity:1;transform:translateX(-52%) scaleX(1.06)}
  66%{opacity:.90;transform:translateX(-49%) scaleX(.97)}
}


.da-candle-el {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 110%; height: 65%; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(200,125,35,.28) 0%,
    rgba(170,100,22,.16) 22%,
    rgba(140,78,14,.07) 45%,
    rgba(110,60,10,.03) 62%,
    transparent 78%);
  animation: darkacad-candle 6s ease-in-out infinite;
}
.da-lines-el {
  position: fixed; top: -100%; left: 0; right: 0; height: 300%; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 22px, rgba(180,140,60,.045) 22px, rgba(180,140,60,.045) 23px);
  animation: da-lines-drift 40s linear infinite;
}
@keyframes da-lines-drift { 0%{transform:translateY(0)} 100%{transform:translateY(33.33%)} }

.da-book-el {
  position: fixed; right: 8%; top: 50%; transform: translateY(-50%) rotate(90deg);
  font-family: 'Cinzel', serif; font-size: 13px; color: rgba(180,140,60,.10);
  letter-spacing: .40em; text-transform: uppercase; pointer-events: none; z-index: 0; white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════════
   COTTAGECORE — BACKGROUND ELEMENTS
══════════════════════════════════════════════════════════════ */

[data-style="cottagecore"] body::before {
  content: '';
  position: fixed; top: -5%; left: 50%; transform: translateX(-50%);
  width: 600px; height: 400px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(220,180,100,.10) 0%, transparent 65%);
  animation: cottage-warmth 9s ease-in-out infinite;
}
@keyframes cottage-warmth { 0%,100%{opacity:.7} 50%{opacity:1} }
[data-style="cottagecore"] body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 50%, rgba(8,6,4,.42) 100%);
}

.cott-cloud-el { position: fixed; border-radius: 50%; filter: blur(30px); pointer-events: none; z-index: 0; }
.cott-c1 { width:300px;height:180px;top:15%;left:-5%;background:rgba(200,150,120,.08);animation:cott-drift-1 30s ease-in-out infinite; }
.cott-c2 { width:240px;height:150px;top:40%;right:-5%;background:rgba(160,190,130,.07);animation:cott-drift-2 38s ease-in-out infinite;animation-delay:-15s; }
.cott-c3 { width:200px;height:130px;bottom:20%;left:20%;background:rgba(200,140,120,.06);animation:cott-drift-3 25s ease-in-out infinite;animation-delay:-8s; }
@keyframes cott-drift-1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(60px,30px)} }
@keyframes cott-drift-2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-50px,-40px)} }
@keyframes cott-drift-3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,-30px)} }

.cott-floral-el {
  position: fixed; bottom: 5%; right: 5%; font-size: 120px;
  color: rgba(200,150,100,.06); pointer-events: none; z-index: 0; user-select: none;
  animation: cott-floral-drift 12s ease-in-out infinite;
}
@keyframes cott-floral-drift { 0%,100%{transform:rotate(-3deg) scale(1)} 50%{transform:rotate(3deg) scale(1.04)} }


/* ══════════════════════════════════════════════════════════════
   RHODES ISLAND (ARKNIGHTS) — BACKGROUND ELEMENTS
══════════════════════════════════════════════════════════════ */

.ark-logo-el {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 0; pointer-events: none;
  animation: ark-logo-pulse 8s ease-in-out infinite;
}
@keyframes ark-logo-pulse { 0%,100%{opacity:.6} 50%{opacity:1} }

.ark-sweep-el {
  position: fixed; bottom: -20%; right: -20%; width: 70%; height: 70%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 90% 90%, rgba(255,130,0,.14) 0%, rgba(200,90,0,.06) 35%, transparent 65%);
  animation: ark-sweep-pulse 10s ease-in-out infinite;
}
@keyframes ark-sweep-pulse { 0%,100%{opacity:.6} 50%{opacity:1} }

.ark-scanline-el {
  position: fixed; top: -5%; left: 0; right: 0; height: 2px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,140,0,.35) 30%, rgba(255,160,0,.55) 50%, rgba(255,140,0,.35) 70%, transparent);
  animation: ark-scanline 6s ease-in-out infinite;
}
@keyframes ark-scanline {
  0%,5%{top:-5%;opacity:0} 10%{opacity:1} 90%{top:105%;opacity:.8} 95%,100%{top:105%;opacity:0}
}


/* ══════════════════════════════════════════════════════════════
   HAKOS BAELZ — BACKGROUND ELEMENTS (UPDATED)
══════════════════════════════════════════════════════════════ */

/* Die watermark — fixed to viewport */
.baelz-bg-die {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 80vmin; line-height: 1;
  color: rgba(180,10,20,.065);
  user-select: none; pointer-events: none;
  animation: baelz-die-spin 30s linear infinite;
  z-index: 0;
}
@keyframes baelz-die-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* Corner glows */
.baelz-glow-tr {
  position: fixed; top: -15%; right: -10%; width: 50%; height: 55%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 80% 20%, rgba(200,20,30,.14) 0%, transparent 65%);
  animation: baelz-glow-p 9s ease-in-out infinite;
}
.baelz-glow-bl {
  position: fixed; bottom: -15%; left: -10%; width: 50%; height: 55%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 20% 80%, rgba(160,10,20,.10) 0%, transparent 65%);
  animation: baelz-glow-p 12s ease-in-out infinite; animation-delay: -4s;
}
@keyframes baelz-glow-p { 0%,100%{opacity:.6} 50%{opacity:1} }

/* Chaos flash bursts */
.baelz-flash-el { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; opacity: 0; }
.baelz-f1 { width:300px;height:300px;top:20%;left:15%;background:radial-gradient(circle,rgba(220,20,20,.28) 0%,transparent 65%);animation:baelz-flash-a 7s ease-out infinite; }
.baelz-f2 { width:200px;height:200px;top:60%;right:20%;background:radial-gradient(circle,rgba(200,15,15,.22) 0%,transparent 65%);animation:baelz-flash-a 7s ease-out infinite;animation-delay:-2.3s; }
.baelz-f3 { width:250px;height:250px;bottom:15%;left:40%;background:radial-gradient(circle,rgba(210,18,18,.20) 0%,transparent 65%);animation:baelz-flash-a 7s ease-out infinite;animation-delay:-4.7s; }
.baelz-f4 { width:180px;height:180px;top:35%;right:8%;background:radial-gradient(circle,rgba(200,20,20,.25) 0%,transparent 65%);animation:baelz-flash-b 9s ease-out infinite;animation-delay:-1.5s; }
.baelz-f5 { width:220px;height:220px;top:10%;right:35%;background:radial-gradient(circle,rgba(215,18,18,.20) 0%,transparent 65%);animation:baelz-flash-b 9s ease-out infinite;animation-delay:-6s; }
@keyframes baelz-flash-a {
  0%,85%,100%{opacity:0;transform:scale(.8)}
  88%{opacity:1;transform:scale(1)}
  93%{opacity:.6;transform:scale(1.2)}
  96%{opacity:0;transform:scale(1.4)}
}
@keyframes baelz-flash-b {
  0%,80%,100%{opacity:0;transform:scale(.8)}
  83%{opacity:.8;transform:scale(1)}
  88%{opacity:.4;transform:scale(1.3)}
  92%{opacity:0;transform:scale(1.5)}
}

/* ══════════════════════════════════════════════════════════════
   NEW THEMES v6.2: Cecilia, Gigi, Haachama, MapleStory Classic, MapleStory Modern
══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   CECILIA IMMERGREEN
   Ancient Automaton · Steampunk · Emerald green + antique gold/brass
   Gear motifs, musical staff, wind-up key, diamond lattice pattern
   Green dress, gold mechanisms, white blouse, red gem accents
═══════════════════════════════════════════════════════════ */

/* Faint diamond lattice body pattern (from her background art) */
#cecilia{
  background:
    repeating-linear-gradient(45deg, rgba(60,120,60,.055) 0px, transparent 1px, transparent 18px, rgba(60,120,60,.055) 19px),
    repeating-linear-gradient(-45deg, rgba(60,120,60,.055) 0px, transparent 1px, transparent 18px, rgba(60,120,60,.055) 19px),
    #0a1a0a;
}

/* Cards — gear-notched corners, green body, brass/gold top border */
[data-style="cec"] .player-card,
[data-style="cec"] .expanded-draft-card{
  background:#0c1c0c !important;
  border:1px solid rgba(155,125,55,.45) !important;
  border-top:3px solid rgba(195,160,70,.72) !important;
  /* Gear-tooth notch on corners via clip-path */
  clip-path:polygon(
    0 6px, 6px 0,
    calc(100% - 6px) 0, 100% 6px,
    100% calc(100% - 6px), calc(100% - 6px) 100%,
    6px 100%, 0 calc(100% - 6px)
  ) !important;
  box-shadow:inset 0 1px 0 rgba(200,165,75,.18) !important;
}
[data-style="cec"] .player-card.tier-elite,
[data-style="cec"] .expanded-draft-card.tier-elite{
  background-color:rgba(40,140,60,.10) !important;
  border-color:rgba(195,160,70,.70) !important;
  border-top-color:rgba(220,185,80,.90) !important;
  box-shadow:0 0 14px rgba(100,180,80,.16),inset 0 1px 0 rgba(210,175,80,.25) !important;
}
[data-style="cec"] .player-card.tier-great,
[data-style="cec"] .expanded-draft-card.tier-great{
  background-color:rgba(18,90,35,.08) !important;
  border-color:rgba(130,105,42,.48) !important;
  border-top-color:rgba(165,135,55,.65) !important;
}
[data-style="cec"] .player-card.tier-good,
[data-style="cec"] .expanded-draft-card.tier-good{
  background-color:rgba(10,55,20,.05) !important;
  border-color:rgba(90,75,30,.38) !important;
  border-top-color:rgba(115,92,38,.52) !important;
}
[data-style="cec"] .player-card.tier-average,
[data-style="cec"] .expanded-draft-card.tier-average {
  background-color:rgba(10,55,20,.05) !important;
  border-color:rgba(90,75,30,.38) !important;
  border-top-color:rgba(115,92,38,.52) !important;
}
/* Gear watermark */
[data-style="cec"] .player-card::after,
[data-style="cec"] .expanded-draft-card::after{
  content:'⚙';position:absolute;bottom:3px;left:7px;
  font-size:22px;color:rgba(180,145,55,.09);pointer-events:none;line-height:1;
}
/* Elite shimmer — slow warm gold, light catching a brass gear */
@keyframes shimmer-cec{0%{left:-130%}100%{left:210%}}
[data-style="cec"] .shimmer-overlay::before{
  content:'';position:absolute;top:0;left:-130%;height:100%;width:65%;pointer-events:none;
  background:linear-gradient(110deg,transparent 20%,rgba(210,175,80,.14) 45%,rgba(240,210,110,.09) 55%,transparent 80%);
  animation:shimmer-cec 5s ease-in-out infinite;
}

[data-style="cec"] .slot-box,
[data-style="cec"] .slot-filled{
  background:#0c1c0c !important;
  border:1px solid rgba(130,105,42,.40) !important;
  border-top:2px solid rgba(175,142,60,.62) !important;
  clip-path:polygon(0 5px,5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px)) !important;
}
[data-style="cec"] .slot-box.tier-elite,
[data-style="cec"] .slot-filled.tier-elite,
[data-style="cec"] .diamond-pos-card.tier-elite{
  background-color:rgba(40,140,60,.10) !important;
  border-color:rgba(185,150,65,.65) !important;
  border-top-color:rgba(215,180,78,.82) !important;
  box-shadow:0 0 8px rgba(100,180,80,.12) !important;
}
[data-style="cec"] .slot-box.tier-good,
[data-style="cec"] .slot-filled.tier-good,
[data-style="cec"] .diamond-pos-card.tier-good{
  border-color:rgba(80,65,25,.32) !important;
  border-top-color:rgba(100,82,32,.46) !important;
}
[data-style="cec"] .slot-box.tier-average,
[data-style="cec"] .slot-filled.tier-average,
[data-style="cec"] .diamond-pos-card.tier-average {
  border-color:rgba(80,65,25,.32) !important;
  border-top-color:rgba(100,82,32,.46) !important;
}

[data-style="cec"] .scoreboard,[data-style="cec"] .manager-card,[data-style="cec"] .modal-panel,[data-style="cec"] .highlight-card,[data-style="cec"] .postseason-game-tile,
[data-style="cec"] .postseason-mvp-tile,
[data-style="cec"] .achievement-card,[data-style="cec"] .lineup-card{
  background:rgba(12,28,12,.96) !important;
  border:1px solid rgba(125,102,40,.42) !important;
  border-top:2px solid rgba(185,152,62,.68) !important;
  clip-path:polygon(0 5px,5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px)) !important;
}
[data-style="cec"] .void-panel{
  background:rgba(12,28,12,.60) !important;
  border:1px solid rgba(110,88,35,.30) !important;
  border-left:3px solid rgba(180,148,60,.58) !important;
  clip-path:none !important;
}
[data-style="cec"] .slot-filled.tier-elite{
  border-color:rgba(175,142,58,.48) !important;
  border-left-color:rgba(218,182,75,.75) !important;
  background-color:rgba(40,140,60,.08) !important;
}
[data-style="cec"] .draft-action-btn{
  background:rgba(30,100,40,.18) !important;
  border:1px solid rgba(165,135,55,.52) !important;
  border-top:2px solid rgba(200,165,68,.72) !important;
  clip-path:polygon(0 5px,5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px)) !important;
}
[data-style="cec"] .settings-option{
  border:1px solid rgba(110,88,35,.35) !important;
  border-top:2px solid rgba(165,135,55,.52) !important;
  clip-path:polygon(0 4px,4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px)) !important;
  background:rgba(12,28,12,.82) !important;
}
[data-style="cec"] .settings-option.active{
  border-color:rgba(195,158,64,.68) !important;
  border-top-color:rgba(220,182,75,.85) !important;
  background:rgba(30,100,40,.12) !important;
  box-shadow:0 0 8px rgba(180,145,55,.14) !important;
}
/* HOF badge — red gem accent like her gemstones */
[data-style="cec"] .hof-badge{
  background:rgba(160,20,20,.18) !important;
  color:rgba(240,120,100,.95) !important;
  border:1px solid rgba(180,40,30,.40) !important;
  clip-path:polygon(0 3px,3px 0,calc(100% - 3px) 0,100% 3px,100% calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,0 calc(100% - 3px)) !important;
  font-family:'Cinzel',serif;border-radius:0 !important;
}
/* ACE badge — gold */
[data-style="cec"] .ace-badge,
[data-style="cec"] .clutch-badge,
[data-style="cec"] .ironman-badge{
  background:rgba(170,135,48,.18) !important;
  color:rgba(220,185,80,.95) !important;
  border:1px solid rgba(185,150,55,.38) !important;
  clip-path:polygon(0 3px,3px 0,calc(100% - 3px) 0,100% 3px,100% calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,0 calc(100% - 3px)) !important;
  font-family:'Cinzel',serif;border-radius:0 !important;
}

/* Cecilia text — green eyes, gold accents, Playfair for elegance */
[data-style="cec"] .player-pos,
[data-style="cec"] .slot-box-pos{color:rgba(175,142,60,.70);font-family:'Cinzel',serif;font-size:8px;letter-spacing:.12em}
[data-style="cec"] .player-year{color:rgba(140,112,45,.42);font-family:'Cinzel',serif}
[data-style="cec"] .player-name,
[data-style="cec"] .diamond-pos-name{color:#d8eec0;font-family:'Cinzel',serif;font-size:12px;letter-spacing:.03em}
[data-style="cec"] .player-plus{color:#c8e060;font-family:'Playfair Display',serif;font-style:italic}
[data-style="cec"] .player-stats{color:rgba(155,125,50,.60);font-family:'Cinzel',serif;font-size:7px;letter-spacing:.14em}
[data-style="cec"] .slot-box-pos{color:rgba(175,142,60,.72);font-family:'Cinzel',serif;font-size:8px;letter-spacing:.10em}
[data-style="cec"] .slot-box-name{color:#d8eec0;font-family:'Cinzel',serif;font-size:10px}
[data-style="cec"] .slot-box-stats{color:rgba(195,162,65,.78);font-family:'Playfair Display',serif;font-style:italic}
[data-style="cec"] .slot-box-plus{color:rgba(120,98,38,.30);font-family:'Cinzel',serif;letter-spacing:.08em}
[data-style="cec"] .record-banner{color:#c8e060;font-family:'Playfair Display',serif;font-style:italic}
[data-style="cec"] .record-banner-sub{color:rgba(150,120,48,.44);font-family:'Cinzel',serif}
[data-style="cec"] .mono-caps,[data-style="cec"] .lineup-card-label,
[data-style="cec"] .lineup-group-header,[data-style="cec"] .section-label,[data-style="cec"] .opp-header{
  color:rgba(160,130,50,.46);font-family:'Cinzel',serif;letter-spacing:.14em}
[data-style="cec"] .manager-name,[data-style="cec"] .modal-title,[data-style="cec"] .award-name{
  color:#d8eec0;font-family:'Cinzel',serif;letter-spacing:.04em}
[data-style="cec"] .manager-record,[data-style="cec"] .hc-description,
[data-style="cec"] .hc-situation,[data-style="cec"] .hc-player-meta,[data-style="cec"] .teammates-line{
  color:rgba(150,120,48,.52);font-family:'Cinzel',serif;font-size:9px}
[data-style="cec"] .postseason-round-label{color:#c8e060;font-family:'Playfair Display',serif;font-style:italic}
[data-style="cec"] .modal-header{border-bottom:1px solid rgba(100,160,75,.30)}
[data-style="cec"] .slot-box-pos{color:rgba(175,142,60,.72);font-family:'Cinzel',serif}
[data-style="cec"] .slot-box-name{color:#d8eec0;font-family:'Cinzel',serif;font-size:10px}
[data-style="cec"] .slot-box-stats{color:#c8e060;font-family:'Playfair Display',serif;font-style:italic}
[data-style="cec"] .brand{color:#d8eec0;font-family:'Cinzel',serif;letter-spacing:.08em}
[data-style="cec"] .lede{color:rgba(155,125,50,.50);font-family:'Cinzel',serif;letter-spacing:.12em}
[data-style="cec"] .settings-option-label{color:#d8eec0;font-family:'Cinzel',serif;font-size:10px;letter-spacing:.04em}
[data-style="cec"] .settings-option-desc{color:rgba(150,120,48,.46);font-family:'Cinzel',serif;font-size:9px}
[data-style="cec"] .draft-action-btn{color:rgba(210,178,70,.95);font-family:'Cinzel',serif;letter-spacing:.12em}

/* ═══════════════════════════════════════════════════════════
   GIGI MURIN
   Bright orange dominant (#ff9000), black/dark brown, yellow flash,
   hot pink accent, chunky gremlin energy, × eye motif, sharp teeth border
═══════════════════════════════════════════════════════════ */

/* Cards — bold solid orange border, notched corners for sharp-teeth energy */
[data-style="gigi"] .player-card,
[data-style="gigi"] .expanded-draft-card{
  background:#100804 !important;
  border:2px solid rgba(255,144,0,.52) !important;
  border-top:3px solid rgba(255,164,20,.72) !important;
  border-radius:3px !important;
  /* Notched bottom-right corner via clip-path */
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%) !important;
}
[data-style="gigi"] .player-card.tier-elite,
[data-style="gigi"] .expanded-draft-card.tier-elite{
  background-color:rgba(255,144,0,.12) !important;
  border-color:rgba(255,164,20,.78) !important;
  border-top-color:rgba(255,190,40,.92) !important;
  box-shadow:0 0 16px rgba(255,130,0,.22),inset 0 1px 0 rgba(255,164,20,.25) !important;
}
[data-style="gigi"] .player-card.tier-great,
[data-style="gigi"] .expanded-draft-card.tier-great{
  background-color:rgba(200,100,0,.08) !important;
  border-color:rgba(200,110,0,.55) !important;
  border-top-color:rgba(220,130,10,.72) !important;
}
[data-style="gigi"] .player-card.tier-good,
[data-style="gigi"] .expanded-draft-card.tier-good{
  background-color:rgba(80,40,0,.07) !important;
  border-color:rgba(120,70,10,.42) !important;
  border-top-color:rgba(140,85,15,.55) !important;
}
[data-style="gigi"] .player-card.tier-average,
[data-style="gigi"] .expanded-draft-card.tier-average {
  background-color:rgba(80,40,0,.07) !important;
  border-color:rgba(120,70,10,.42) !important;
  border-top-color:rgba(140,85,15,.55) !important;
}
/* × eye watermark */
[data-style="gigi"] .player-card::after,
[data-style="gigi"] .expanded-draft-card::after{
  content:'×';position:absolute;bottom:3px;left:7px;
  font-size:26px;font-weight:900;color:rgba(255,144,0,.10);
  pointer-events:none;font-family:'Nunito',sans-serif;line-height:1;
}
/* Elite shimmer — fast bright orange-yellow gauntlet flash */
@keyframes shimmer-gigi{0%{left:-130%}100%{left:210%}}
[data-style="gigi"] .shimmer-overlay::before{
  content:'';position:absolute;top:0;left:-130%;height:100%;width:50%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,190,40,.28),rgba(255,220,80,.16),transparent);
  animation:shimmer-gigi 2s ease-in-out infinite;
}

[data-style="gigi"] .slot-box,
[data-style="gigi"] .slot-filled{
  background:#100804 !important;
  border:2px solid rgba(200,110,0,.40) !important;
  border-top:3px solid rgba(225,130,10,.58) !important;
  border-radius:3px !important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%) !important;
}
[data-style="gigi"] .slot-box.tier-elite,
[data-style="gigi"] .slot-filled.tier-elite,
[data-style="gigi"] .diamond-pos-card.tier-elite{
  background-color:rgba(255,144,0,.10) !important;
  border-color:rgba(255,164,20,.68) !important;
  border-top-color:rgba(255,185,35,.85) !important;
  box-shadow:0 0 10px rgba(255,130,0,.18) !important;
}
[data-style="gigi"] .slot-box.tier-good,
[data-style="gigi"] .slot-filled.tier-good,
[data-style="gigi"] .diamond-pos-card.tier-good{border-color:rgba(100,58,5,.35) !important;border-top-color:rgba(120,72,8,.48) !important;}
[data-style="gigi"] .slot-box.tier-average,
[data-style="gigi"] .slot-filled.tier-average,
[data-style="gigi"] .diamond-pos-card.tier-average {border-color:rgba(100,58,5,.35) !important;border-top-color:rgba(120,72,8,.48) !important;}

[data-style="gigi"] .scoreboard,[data-style="gigi"] .manager-card,[data-style="gigi"] .modal-panel,[data-style="gigi"] .highlight-card,[data-style="gigi"] .postseason-game-tile,
[data-style="gigi"] .postseason-mvp-tile,
[data-style="gigi"] .achievement-card,[data-style="gigi"] .lineup-card{
  background:rgba(16,8,4,.96) !important;
  border:2px solid rgba(200,110,0,.38) !important;
  border-top:3px solid rgba(255,144,0,.60) !important;
  border-radius:3px !important;
}
[data-style="gigi"] .void-panel{
  background:rgba(16,8,4,.60) !important;
  border:1px solid rgba(180,95,0,.28) !important;
  border-left:3px solid rgba(255,144,0,.52) !important;
  border-radius:0 !important;
}
[data-style="gigi"] .slot-filled.tier-elite{
  border-color:rgba(255,164,20,.45) !important;
  border-left-color:rgba(255,190,40,.70) !important;
  background-color:rgba(255,144,0,.08) !important;
}
[data-style="gigi"] .draft-action-btn{
  background:rgba(255,130,0,.18) !important;
  border:2px solid rgba(255,144,0,.55) !important;
  border-top:3px solid rgba(255,175,30,.72) !important;
  border-radius:3px !important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%) !important;
}
[data-style="gigi"] .settings-option{
  border:2px solid rgba(180,95,0,.32) !important;
  border-top:2px solid rgba(225,125,8,.48) !important;
  border-radius:3px !important;
  background:rgba(16,8,4,.82) !important;
}
[data-style="gigi"] .settings-option.active{
  border-color:rgba(255,164,20,.65) !important;
  border-top-color:rgba(255,190,40,.80) !important;
  background:rgba(255,130,0,.10) !important;
  box-shadow:0 0 8px rgba(255,130,0,.14) !important;
}
[data-style="gigi"] .hof-badge{
  background:rgba(255,130,0,.18) !important;
  color:rgba(255,200,60,.95) !important;
  border:2px solid rgba(255,160,20,.45) !important;
  border-radius:0 !important;
  font-family:'Nunito',sans-serif;font-weight:900;
}
[data-style="gigi"] .ace-badge,
[data-style="gigi"] .clutch-badge,
[data-style="gigi"] .ironman-badge{
  background:rgba(255,60,130,.14) !important;
  color:rgba(255,120,180,.92) !important;
  border:2px solid rgba(255,80,150,.32) !important;
  border-radius:0 !important;
  font-family:'Nunito',sans-serif;font-weight:900;
}

/* Gigi text */
[data-style="gigi"] .player-pos,
[data-style="gigi"] .slot-box-pos{color:rgba(255,164,20,.68);font-family:'Nunito',sans-serif;font-weight:800;font-size:8px;letter-spacing:.12em}
[data-style="gigi"] .player-year{color:rgba(200,110,0,.42);font-family:'Nunito',sans-serif}
[data-style="gigi"] .player-name,
[data-style="gigi"] .diamond-pos-name{color:#ffe8b0;font-family:'Nunito',sans-serif;font-weight:900}
[data-style="gigi"] .player-plus{color:#ff9000;font-family:'Nunito',sans-serif;font-weight:900}
[data-style="gigi"] .player-stats{color:rgba(200,110,0,.58);font-family:'Nunito',sans-serif;font-weight:700}
[data-style="gigi"] .slot-box-pos{color:rgba(255,164,20,.70);font-family:'Nunito',sans-serif;font-weight:800;font-size:8px;letter-spacing:.12em}
[data-style="gigi"] .slot-box-name{color:#ffe8b0;font-family:'Nunito',sans-serif;font-weight:800}
[data-style="gigi"] .slot-box-stats{color:rgba(255,175,30,.78);font-family:'Nunito',sans-serif;font-weight:700}
[data-style="gigi"] .slot-box-plus{color:rgba(160,85,0,.28);font-family:'Nunito',sans-serif;font-weight:700}
[data-style="gigi"] .record-banner{color:#ff9000;font-family:'Nunito',sans-serif;font-weight:900}
[data-style="gigi"] .record-banner-sub{color:rgba(200,110,0,.44);font-family:'Nunito',sans-serif}
[data-style="gigi"] .mono-caps,[data-style="gigi"] .lineup-card-label,
[data-style="gigi"] .lineup-group-header,[data-style="gigi"] .section-label,[data-style="gigi"] .opp-header{
  color:rgba(200,110,0,.45);font-family:'Nunito',sans-serif;font-weight:700}
[data-style="gigi"] .manager-name,[data-style="gigi"] .modal-title,[data-style="gigi"] .award-name{
  color:#ffe8b0;font-family:'Nunito',sans-serif;font-weight:900}
[data-style="gigi"] .manager-record,[data-style="gigi"] .hc-description,
[data-style="gigi"] .hc-situation,[data-style="gigi"] .hc-player-meta,[data-style="gigi"] .teammates-line{
  color:rgba(200,110,0,.50);font-family:'Nunito',sans-serif;font-weight:700}
[data-style="gigi"] .postseason-round-label{color:#ff9000;font-family:'Nunito',sans-serif;font-weight:900}
[data-style="gigi"] .modal-header{border-bottom:1px solid rgba(255,144,0,.28)}
[data-style="gigi"] .slot-box-pos{color:rgba(255,164,20,.72);font-family:'Nunito',sans-serif;font-weight:800}
[data-style="gigi"] .slot-box-name{color:#ffe8b0;font-family:'Nunito',sans-serif;font-size:10px}
[data-style="gigi"] .slot-box-stats{color:#ff9000;font-family:'Nunito',sans-serif;font-weight:700}
[data-style="gigi"] .brand{color:#ffe8b0;font-family:'Nunito',sans-serif;font-weight:900}
[data-style="gigi"] .lede{color:rgba(200,110,0,.52);font-family:'Nunito',sans-serif;font-weight:700}
[data-style="gigi"] .settings-option-label{color:#ffe8b0;font-family:'Nunito',sans-serif;font-weight:800}
[data-style="gigi"] .settings-option-desc{color:rgba(200,110,0,.46);font-family:'Nunito',sans-serif;font-weight:700;font-size:9px}
[data-style="gigi"] .draft-action-btn{color:rgba(255,200,60,.95);font-family:'Nunito',sans-serif;font-weight:900}

/* ═══════════════════════════════════════════════════════════
   AKAI HAATO / HAACHAMA — DUAL IDENTITY
   Haato (great/good/plain): Blue border + cream text + RED stat + PINK badge + YELLOW pos
   Haachama (elite): Black gothic lolita + hard red border + gold top-bar gradient
   Red ❤ on Haato, ♥ on Haachama — same heart, different feeling
═══════════════════════════════════════════════════════════ */

/* ── HAATO BASE CARD — blue border, dark bg, cream/red/pink/yellow ── */
[data-style="hc"] .player-card,
[data-style="hc"] .expanded-draft-card{background:#0e0a0c !important;border:1px solid rgba(200,165,50,.38) !important;border-top:3px solid rgba(230,195,65,.60) !important;border-radius:8px !important}
[data-style="hc"] .player-card.tier-great,
[data-style="hc"] .expanded-draft-card.tier-great{background-color:rgba(50,100,210,.08) !important;border-color:rgba(220,40,185,.28) !important;border-top-color:rgba(95,165,255,.68) !important}
[data-style="hc"] .player-card.tier-good,
[data-style="hc"] .expanded-draft-card.tier-good{background-color:rgba(185,148,30,.05) !important;border-color:rgba(175,140,30,.32) !important;border-top-color:rgba(215,175,45,.52) !important}
[data-style="hc"] .player-card.tier-average,
[data-style="hc"] .expanded-draft-card.tier-average {background-color:rgba(185,148,30,.05) !important;border-color:rgba(175,140,30,.32) !important;border-top-color:rgba(215,175,45,.52) !important}
[data-style="hc"] .player-card::after,
[data-style="hc"] .expanded-draft-card::after{content:'❤';position:absolute;bottom:4px;left:8px;font-size:18px;color:rgba(210,40,55,.12);pointer-events:none}

/* ── HAACHAMA ELITE — black + hard red + gold top gradient ── */
[data-style="hc"] .player-card.tier-elite,
[data-style="hc"] .expanded-draft-card.tier-elite{background:#0a0206 !important;border:2px solid rgba(185,18,32,.65) !important;border-top:3px solid transparent !important;background-image:linear-gradient(#0a0206,#0a0206),linear-gradient(90deg,transparent,rgba(180,140,42,.72) 28%,rgba(218,175,55,.90) 50%,rgba(180,140,42,.72) 72%,transparent) !important;background-origin:border-box !important;background-clip:padding-box,border-box !important;border-radius:0 !important;box-shadow:0 0 14px rgba(160,12,22,.22) !important}
[data-style="hc"] .player-card.tier-elite::after,
[data-style="hc"] .expanded-draft-card.tier-elite::after{content:'🕷';font-size:16px;color:rgba(160,10,20,.22) !important;bottom:6px;left:6px}
@keyframes shimmer-hc{0%,63%{left:-130%;opacity:0}65%{opacity:1}70%{left:130%;opacity:.8}72%{left:-130%;opacity:0}74%{opacity:.5}78%{left:130%;opacity:0}100%{left:-130%;opacity:0}}
[data-style="hc"] .shimmer-overlay::before{content:'';position:absolute;top:0;left:-130%;height:100%;width:40%;pointer-events:none;background:linear-gradient(110deg,transparent,rgba(195,18,32,.22),transparent);animation:shimmer-hc 4.5s ease-in-out infinite}

/* ── SLOTS ── */
[data-style="hc"] .slot-box,
[data-style="hc"] .slot-filled{background:#0e0a0c !important;border:1px solid rgba(195,160,45,.32) !important;border-top:2px solid rgba(225,188,58,.54) !important;border-radius:8px !important}
[data-style="hc"] .slot-box.tier-great,
[data-style="hc"] .slot-filled.tier-great,
[data-style="hc"] .diamond-pos-card.tier-great{background-color:rgba(50,100,210,.08) !important;border-color:rgba(220,40,185,.28) !important;border-top-color:rgba(90,158,252,.62) !important}
[data-style="hc"] .slot-box.tier-good,
[data-style="hc"] .slot-filled.tier-good,
[data-style="hc"] .diamond-pos-card.tier-good{border-color:rgba(172,138,28,.26) !important;border-top-color:rgba(210,170,42,.48) !important}
[data-style="hc"] .slot-box.tier-average,
[data-style="hc"] .slot-filled.tier-average,
[data-style="hc"] .diamond-pos-card.tier-average {border-color:rgba(172,138,28,.26) !important;border-top-color:rgba(210,170,42,.48) !important}
[data-style="hc"] .draft-action-btn.tier-great-btn{background:rgba(220,20,175,.14) !important;border:2px solid rgba(240,40,195,.42) !important;border-radius:99px !important}
[data-style="hc"] .slot-box.tier-elite,
[data-style="hc"] .slot-filled.tier-elite,
[data-style="hc"] .diamond-pos-card.tier-elite{background:#0a0206 !important;border:2px solid rgba(180,16,30,.62) !important;border-top:3px solid transparent !important;background-image:linear-gradient(#0a0206,#0a0206),linear-gradient(90deg,transparent,rgba(180,140,42,.68) 32%,rgba(215,172,52,.86) 50%,rgba(180,140,42,.68) 68%,transparent) !important;background-origin:border-box !important;background-clip:padding-box,border-box !important;border-radius:0 !important}

/* ── PANELS ── */
[data-style="hc"] .scoreboard,[data-style="hc"] .manager-card,[data-style="hc"] .modal-panel,[data-style="hc"] .highlight-card,[data-style="hc"] .postseason-game-tile,
[data-style="hc"] .postseason-mvp-tile,
[data-style="hc"] .achievement-card,[data-style="hc"] .lineup-card{background:rgba(14,10,12,.96) !important;border:1px solid rgba(190,155,42,.25) !important;border-top:2px solid rgba(82,148,248,.48) !important;border-radius:8px !important}
[data-style="hc"] .void-panel{background:rgba(14,10,12,.62) !important;border:1px solid rgba(182,148,35,.20) !important;border-left:3px solid rgba(225,185,52,.55) !important;border-radius:4px !important}
[data-style="hc"] .slot-filled.tier-elite{background:#0a0206 !important;border:1px solid rgba(178,16,28,.52) !important;border-left:3px solid transparent !important;background-image:linear-gradient(#0a0206,#0a0206),linear-gradient(to right,rgba(178,138,40,.72),rgba(178,138,40,.72)) !important;background-origin:border-box !important;background-clip:padding-box,border-box !important;border-radius:0 !important}

/* ── BUTTONS / SETTINGS ── */
[data-style="hc"] .draft-action-btn{background:rgba(175,140,28,.14) !important;border:2px solid rgba(215,175,45,.42) !important;border-radius:99px !important}
[data-style="hc"] .settings-option{border:1px solid rgba(185,150,38,.26) !important;border-top:2px solid rgba(82,148,248,.44) !important;border-radius:8px !important;background:rgba(14,10,12,.82) !important}
[data-style="hc"] .settings-option.active{border-color:rgba(218,180,48,.55) !important;border-top-color:rgba(82,148,248,.72) !important;background:rgba(175,140,28,.08) !important}

/* ── BADGES ── */
[data-style="hc"] .hof-badge{background:rgba(158,14,22,.20) !important;color:rgba(238,72,82,.95) !important;border:1px solid rgba(172,18,28,.42) !important;border-radius:0 !important;font-family:'Nunito',sans-serif;font-weight:900}
[data-style="hc"] .ace-badge,
[data-style="hc"] .clutch-badge,
[data-style="hc"] .ironman-badge{background:rgba(255,20,180,.18) !important;color:rgba(255,80,210,.98) !important;border:2px solid rgba(255,40,190,.55) !important;border-radius:99px !important;font-family:'Nunito',sans-serif;font-weight:900}

/* ── HAATO TEXT — cream names, RED stats, YELLOW pos labels, BLUE sub-labels ── */
[data-style="hc"] .player-pos,
[data-style="hc"] .slot-box-pos{color:rgba(255,198,80,.88);font-family:'Nunito',sans-serif;font-weight:800;font-size:8px;letter-spacing:.10em}
[data-style="hc"] .player-year{color:rgba(110,162,242,.55);font-family:'Nunito',sans-serif}
[data-style="hc"] .player-name,
[data-style="hc"] .diamond-pos-name{color:#fff2e8;font-family:'Nunito',sans-serif;font-weight:900}
[data-style="hc"] .player-plus{color:#ff3d58;font-family:'Nunito',sans-serif;font-weight:900}
[data-style="hc"] .player-stats{color:rgba(255,80,210,.65);font-family:'Nunito',sans-serif;font-weight:700}
/* ── HAACHAMA ELITE TEXT OVERRIDES ── */
[data-style="hc"] .player-card.tier-elite .player-pos{color:rgba(185,148,42,.82) !important;letter-spacing:.14em}
[data-style="hc"] .player-card.tier-elite .player-year{color:rgba(155,118,35,.42) !important}
[data-style="hc"] .player-card.tier-elite .player-name{color:#f8eacc !important}
[data-style="hc"] .player-card.tier-elite .player-plus{color:#e01828 !important}
[data-style="hc"] .player-card.tier-elite .player-stats{color:rgba(185,148,42,.64) !important;letter-spacing:.14em}
/* ── SLOT TEXT ── */
[data-style="hc"] .slot-box-pos{color:rgba(255,198,80,.90);font-family:'Nunito',sans-serif;font-weight:800;font-size:8px}
[data-style="hc"] .slot-box-name{color:#fff2e8;font-family:'Nunito',sans-serif;font-weight:800}
[data-style="hc"] .slot-box-stats{color:rgba(255,75,98,.76);font-family:'Nunito',sans-serif;font-weight:700}
[data-style="hc"] .slot-box-plus{color:rgba(225,185,55,.55);font-family:'Nunito',sans-serif;font-weight:700}
[data-style="hc"] .slot-box.tier-elite .slot-box-pos{color:rgba(185,148,42,.84) !important}
[data-style="hc"] .slot-box.tier-elite .slot-box-name{color:#f8eacc !important}
[data-style="hc"] .slot-box.tier-elite .slot-box-stats{color:#e01828 !important}
/* ── PANEL TEXT ── */
[data-style="hc"] .record-banner{color:#ff3d58;font-family:'Nunito',sans-serif;font-weight:900}
[data-style="hc"] .record-banner-sub{color:rgba(105,162,248,.65);font-family:'Nunito',sans-serif}
[data-style="hc"] .mono-caps,[data-style="hc"] .lineup-card-label,
[data-style="hc"] .lineup-group-header,[data-style="hc"] .section-label,[data-style="hc"] .opp-header{color:rgba(255,195,75,.46);font-family:'Nunito',sans-serif;font-weight:700}
[data-style="hc"] .manager-name,[data-style="hc"] .modal-title,[data-style="hc"] .award-name{color:#fff2e8;font-family:'Nunito',sans-serif;font-weight:900}
[data-style="hc"] .manager-record,[data-style="hc"] .hc-description,
[data-style="hc"] .hc-situation,[data-style="hc"] .hc-player-meta,[data-style="hc"] .teammates-line{color:rgba(102,158,245,.50);font-family:'Nunito',sans-serif}
[data-style="hc"] .postseason-round-label{color:#ff3d58;font-family:'Nunito',sans-serif;font-weight:900}
[data-style="hc"] .modal-header{border-bottom:1px solid rgba(70,132,240,.25)}
[data-style="hc"] .slot-box-pos{color:rgba(255,198,80,.90);font-family:'Nunito',sans-serif;font-weight:800}
[data-style="hc"] .slot-box-name{color:#fff2e8;font-family:'Nunito',sans-serif;font-size:10px}
[data-style="hc"] .slot-box-stats{color:#ff3d58;font-family:'Nunito',sans-serif;font-weight:700}
[data-style="hc"] .brand{color:#fff2e8;font-family:'Nunito',sans-serif;font-weight:900}
[data-style="hc"] .lede{color:rgba(102,158,245,.72);font-family:'Nunito',sans-serif;font-weight:700}
[data-style="hc"] .settings-option-label{color:#fff2e8;font-family:'Nunito',sans-serif;font-weight:800}
[data-style="hc"] .settings-option-desc{color:rgba(102,158,245,.65);font-family:'Nunito',sans-serif;font-size:9px}
[data-style="hc"] .draft-action-btn{color:rgba(230,192,58,.95);font-family:'Nunito',sans-serif;font-weight:900}

/* ═══════════════════════════════════════════════════════════
   MAPLESTORY CLASSIC
   Dark navy, orange maple, Courier Prime, 2-tone pixel bevel
═══════════════════════════════════════════════════════════ */

[data-style="mcs"] .player-card,
[data-style="mcs"] .expanded-draft-card{background:#080c18 !important;border-style:solid !important;border-width:2px !important;border-radius:0 !important;border-top-color:rgba(255,138,48,.62) !important;border-left-color:rgba(228,112,32,.52) !important;border-bottom-color:rgba(72,24,3,.58) !important;border-right-color:rgba(72,24,3,.58) !important;box-shadow:inset 1px 1px 0 rgba(255,148,55,.12),2px 2px 0 rgba(0,0,0,.42) !important}
[data-style="mcs"] .player-card.tier-elite,
[data-style="mcs"] .expanded-draft-card.tier-elite{background-color:rgba(215,98,18,.10) !important;border-top-color:rgba(255,165,52,.82) !important;border-left-color:rgba(245,135,38,.68) !important;border-bottom-color:rgba(58,18,2,.65) !important;border-right-color:rgba(58,18,2,.65) !important;box-shadow:inset 1px 1px 0 rgba(255,165,60,.22),3px 3px 0 rgba(0,0,0,.52),0 0 10px rgba(255,120,20,.16) !important}
[data-style="mcs"] .player-card.tier-great,
[data-style="mcs"] .expanded-draft-card.tier-great{background-color:rgba(38,78,195,.07) !important;border-top-color:rgba(98,148,255,.52) !important;border-left-color:rgba(78,122,242,.42) !important;border-bottom-color:rgba(18,32,95,.48) !important;border-right-color:rgba(18,32,95,.48) !important}
[data-style="mcs"] .player-card.tier-good,
[data-style="mcs"] .expanded-draft-card.tier-good{background-color:rgba(18,135,58,.05) !important;border-top-color:rgba(68,188,98,.42) !important;border-left-color:rgba(52,162,78,.34) !important;border-bottom-color:rgba(8,55,22,.42) !important;border-right-color:rgba(8,55,22,.42) !important}
[data-style="mcs"] .player-card.tier-average,
[data-style="mcs"] .expanded-draft-card.tier-average {background-color:rgba(18,135,58,.05) !important;border-top-color:rgba(68,188,98,.42) !important;border-left-color:rgba(52,162,78,.34) !important;border-bottom-color:rgba(8,55,22,.42) !important;border-right-color:rgba(8,55,22,.42) !important}
[data-style="mcs"] .player-card::after,
[data-style="mcs"] .expanded-draft-card::after{content:'🍁';position:absolute;bottom:3px;left:7px;font-size:18px;opacity:.08;pointer-events:none}
@keyframes shimmer-mcs{0%{left:-130%}100%{left:210%}}
[data-style="mcs"] .shimmer-overlay::before{content:'';position:absolute;top:0;left:-130%;height:100%;width:58%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,160,50,.18),rgba(255,205,100,.12),transparent);animation:shimmer-mcs 3.2s ease-in-out infinite}

[data-style="mcs"] .slot-box,
[data-style="mcs"] .slot-filled{background:#080c18 !important;border-style:solid !important;border-width:2px !important;border-radius:0 !important;border-top-color:rgba(218,108,28,.48) !important;border-left-color:rgba(198,88,20,.40) !important;border-bottom-color:rgba(72,24,3,.44) !important;border-right-color:rgba(72,24,3,.44) !important;box-shadow:inset 1px 1px 0 rgba(255,130,40,.08),2px 2px 0 rgba(0,0,0,.35) !important}
[data-style="mcs"] .slot-box.tier-elite,
[data-style="mcs"] .slot-filled.tier-elite,
[data-style="mcs"] .diamond-pos-card.tier-elite{background-color:rgba(215,98,18,.10) !important;border-top-color:rgba(255,155,46,.72) !important;border-left-color:rgba(235,128,36,.58) !important;box-shadow:inset 1px 1px 0 rgba(255,155,50,.16),2px 2px 0 rgba(0,0,0,.44) !important}
[data-style="mcs"] .slot-box.tier-good,
[data-style="mcs"] .slot-filled.tier-good,
[data-style="mcs"] .diamond-pos-card.tier-good{border-top-color:rgba(65,182,92,.38) !important;border-left-color:rgba(48,155,72,.30) !important}
[data-style="mcs"] .slot-box.tier-average,
[data-style="mcs"] .slot-filled.tier-average,
[data-style="mcs"] .diamond-pos-card.tier-average {border-top-color:rgba(65,182,92,.38) !important;border-left-color:rgba(48,155,72,.30) !important}

[data-style="mcs"] .scoreboard,[data-style="mcs"] .manager-card,[data-style="mcs"] .modal-panel,[data-style="mcs"] .highlight-card,[data-style="mcs"] .postseason-game-tile,
[data-style="mcs"] .postseason-mvp-tile,
[data-style="mcs"] .achievement-card,[data-style="mcs"] .lineup-card{background:rgba(8,12,24,.96) !important;border-style:solid !important;border-width:2px !important;border-radius:0 !important;border-top-color:rgba(228,112,32,.55) !important;border-left-color:rgba(205,92,22,.46) !important;border-bottom-color:rgba(62,20,3,.48) !important;border-right-color:rgba(62,20,3,.48) !important;box-shadow:inset 1px 1px 0 rgba(255,128,40,.08),2px 2px 0 rgba(0,0,0,.38) !important}
[data-style="mcs"] .void-panel{background:rgba(8,12,24,.62) !important;border-style:solid !important;border-width:1px !important;border-radius:0 !important;border-top-color:rgba(215,105,28,.38) !important;border-left-color:rgba(195,85,18,.30) !important;border-bottom-color:rgba(58,18,2,.35) !important;border-right-color:rgba(58,18,2,.35) !important}
[data-style="mcs"] .slot-filled.tier-elite{border-top-color:rgba(255,150,44,.58) !important;border-left-color:rgba(232,125,35,.48) !important}
[data-style="mcs"] .draft-action-btn{background:rgba(175,68,14,.16) !important;border-style:solid !important;border-width:2px !important;border-radius:0 !important;border-top-color:rgba(248,142,50,.88) !important;border-left-color:rgba(225,115,32,.46) !important;border-bottom-color:rgba(68,24,3,.44) !important;border-right-color:rgba(68,24,3,.44) !important;box-shadow:2px 2px 0 rgba(0,0,0,.36) !important}
[data-style="mcs"] .settings-option{border-style:solid !important;border-width:2px !important;border-radius:0 !important;border-top-color:rgba(202,92,20,.40) !important;border-left-color:rgba(182,75,15,.32) !important;border-bottom-color:rgba(56,18,2,.34) !important;border-right-color:rgba(56,18,2,.34) !important;background:rgba(8,12,24,.82) !important;box-shadow:1px 1px 0 rgba(0,0,0,.28) !important}
[data-style="mcs"] .settings-option.active{border-top-color:rgba(252,148,52,.60) !important;border-left-color:rgba(232,122,36,.50) !important;background:rgba(175,68,14,.12) !important}
[data-style="mcs"] .hof-badge{background:rgba(215,98,18,.14) !important;color:rgba(255,145,52,.92) !important;border-style:solid !important;border-width:2px !important;border-top-color:rgba(255,148,54,.45) !important;border-left-color:rgba(232,125,35,.38) !important;border-bottom-color:rgba(68,24,3,.38) !important;border-right-color:rgba(68,24,3,.38) !important;border-radius:0 !important;box-shadow:1px 1px 0 rgba(0,0,0,.28) !important}
[data-style="mcs"] .ace-badge,
[data-style="mcs"] .clutch-badge,
[data-style="mcs"] .ironman-badge{background:rgba(38,78,195,.12) !important;color:rgba(98,155,255,.90) !important;border-style:solid !important;border-width:2px !important;border-top-color:rgba(98,152,252,.42) !important;border-left-color:rgba(78,128,238,.34) !important;border-bottom-color:rgba(18,32,98,.36) !important;border-right-color:rgba(18,32,98,.36) !important;border-radius:0 !important;box-shadow:1px 1px 0 rgba(0,0,0,.28) !important}

[data-style="mcs"] .player-pos,
[data-style="mcs"] .slot-box-pos{color:rgba(255,142,52,.62);font-family:'Courier Prime',monospace;font-size:8px;letter-spacing:.10em}
[data-style="mcs"] .player-year{color:rgba(205,102,22,.40);font-family:'Courier Prime',monospace}
[data-style="mcs"] .player-name,
[data-style="mcs"] .diamond-pos-name{color:#f8e0b0;font-family:'Courier Prime',monospace;font-weight:700}
[data-style="mcs"] .player-plus{color:#ff8020;font-family:'Courier Prime',monospace;font-weight:700}
[data-style="mcs"] .player-stats{color:rgba(222,122,42,.52);font-family:'Courier Prime',monospace}
[data-style="mcs"] .slot-box-pos{color:rgba(255,142,52,.66);font-family:'Courier Prime',monospace;font-size:8px;letter-spacing:.10em}
[data-style="mcs"] .slot-box-name{color:#f8e0b0;font-family:'Courier Prime',monospace}
[data-style="mcs"] .slot-box-stats{color:rgba(255,145,52,.74);font-family:'Courier Prime',monospace;font-weight:700}
[data-style="mcs"] .slot-box-plus{color:rgba(162,82,22,.28);font-family:'Courier Prime',monospace}
[data-style="mcs"] .record-banner{color:#ff8020;font-family:'Courier Prime',monospace;font-weight:700}
[data-style="mcs"] .record-banner-sub,[data-style="mcs"] .mono-caps,[data-style="mcs"] .lineup-card-label,
[data-style="mcs"] .lineup-group-header,[data-style="mcs"] .section-label,[data-style="mcs"] .opp-header{color:rgba(202,102,22,.42);font-family:'Courier Prime',monospace}
[data-style="mcs"] .manager-name,[data-style="mcs"] .modal-title,[data-style="mcs"] .award-name{color:#f8e0b0;font-family:'Courier Prime',monospace;font-weight:700}
[data-style="mcs"] .manager-record,[data-style="mcs"] .hc-description,
[data-style="mcs"] .hc-situation,[data-style="mcs"] .hc-player-meta,[data-style="mcs"] .teammates-line{color:rgba(202,102,22,.46);font-family:'Courier Prime',monospace}
[data-style="mcs"] .postseason-round-label{color:#ff8020;font-family:'Courier Prime',monospace;font-weight:700}
[data-style="mcs"] .modal-header{border-bottom:1px solid rgba(225,112,32,.28)}
[data-style="mcs"] .slot-box-pos{color:rgba(255,142,52,.66);font-family:'Courier Prime',monospace}
[data-style="mcs"] .slot-box-name{color:#f8e0b0;font-family:'Courier Prime',monospace;font-size:10px}
[data-style="mcs"] .slot-box-stats{color:#ff8020;font-family:'Courier Prime',monospace;font-weight:700}
[data-style="mcs"] .brand{color:#f8e0b0;font-family:'Courier Prime',monospace;font-weight:700;letter-spacing:.06em}
[data-style="mcs"] .lede{color:rgba(202,102,22,.50);font-family:'Courier Prime',monospace}
[data-style="mcs"] .settings-option-label{color:#f8e0b0;font-family:'Courier Prime',monospace;font-weight:700}
[data-style="mcs"] .settings-option-desc{color:rgba(202,102,22,.44);font-family:'Courier Prime',monospace;font-size:9px}
[data-style="mcs"] .draft-action-btn{color:rgba(255,145,52,.92);font-family:'Courier Prime',monospace;font-weight:700}

/* ═══════════════════════════════════════════════════════════
   MAPLESTORY MODERN
   Deep purple, gold accent, gradient top-border, rounded, Rajdhani
═══════════════════════════════════════════════════════════ */

[data-style="mmm"] .player-card,
[data-style="mmm"] .expanded-draft-card{border:1px solid rgba(142,72,222,.35) !important;border-radius:8px !important;border-top:3px solid transparent !important;background-image:linear-gradient(#0c0818,#0c0818),linear-gradient(90deg,transparent,rgba(222,162,80,.68) 30%,rgba(255,215,102,.88) 50%,rgba(222,162,80,.68) 70%,transparent) !important;background-origin:border-box !important;background-clip:padding-box,border-box !important}
[data-style="mmm"] .player-card.tier-elite,
[data-style="mmm"] .expanded-draft-card.tier-elite{border-color:rgba(202,122,255,.62) !important;border-top:3px solid transparent !important;background-image:linear-gradient(rgba(28,12,48,.90),rgba(28,12,48,.90)),linear-gradient(90deg,transparent,rgba(202,122,255,.62) 18%,rgba(255,222,102,.88) 50%,rgba(202,122,255,.62) 82%,transparent) !important;background-origin:border-box !important;background-clip:padding-box,border-box !important;box-shadow:0 0 16px rgba(162,82,255,.18),inset 0 0 14px rgba(122,42,205,.06) !important}
[data-style="mmm"] .player-card.tier-great,
[data-style="mmm"] .expanded-draft-card.tier-great{border-color:rgba(162,82,255,.42) !important;border-top:3px solid transparent !important;background-image:linear-gradient(rgba(16,8,34,.88),rgba(16,8,34,.88)),linear-gradient(90deg,transparent,rgba(162,82,255,.52) 35%,rgba(200,130,255,.70) 50%,rgba(162,82,255,.52) 65%,transparent) !important;background-origin:border-box !important;background-clip:padding-box,border-box !important}
[data-style="mmm"] .player-card.tier-good,
[data-style="mmm"] .expanded-draft-card.tier-good{border-color:rgba(62,142,255,.32) !important;border-top:3px solid transparent !important;background-image:linear-gradient(rgba(10,6,26,.86),rgba(10,6,26,.86)),linear-gradient(90deg,transparent,rgba(62,142,255,.45) 40%,rgba(100,175,255,.62) 50%,rgba(62,142,255,.45) 60%,transparent) !important;background-origin:border-box !important;background-clip:padding-box,border-box !important}
[data-style="mmm"] .player-card.tier-average,
[data-style="mmm"] .expanded-draft-card.tier-average {border-color:rgba(62,142,255,.32) !important;border-top:3px solid transparent !important;background-image:linear-gradient(rgba(10,6,26,.86),rgba(10,6,26,.86)),linear-gradient(90deg,transparent,rgba(62,142,255,.45) 40%,rgba(100,175,255,.62) 50%,rgba(62,142,255,.45) 60%,transparent) !important;background-origin:border-box !important;background-clip:padding-box,border-box !important}
[data-style="mmm"] .player-card::after,
[data-style="mmm"] .expanded-draft-card::after{content:'🍁';position:absolute;bottom:4px;left:8px;font-size:18px;opacity:.06;pointer-events:none;filter:hue-rotate(200deg)}
@keyframes shimmer-mmm{0%{left:-130%}100%{left:210%}}
[data-style="mmm"] .shimmer-overlay::before{content:'';position:absolute;top:0;left:-130%;height:100%;width:62%;pointer-events:none;
  background:linear-gradient(110deg,transparent 15%,rgba(182,82,255,.14) 35%,rgba(255,215,82,.12) 55%,rgba(182,82,255,.10) 72%,transparent 85%);
  animation:shimmer-mmm 3s ease-in-out infinite}

[data-style="mmm"] .slot-box,
[data-style="mmm"] .slot-filled{border:1px solid rgba(122,62,202,.28) !important;border-radius:8px !important;border-top:3px solid transparent !important;background-image:linear-gradient(#0c0818,#0c0818),linear-gradient(90deg,transparent,rgba(202,142,62,.55) 50%,transparent) !important;background-origin:border-box !important;background-clip:padding-box,border-box !important}
[data-style="mmm"] .slot-box.tier-elite,
[data-style="mmm"] .slot-filled.tier-elite,
[data-style="mmm"] .diamond-pos-card.tier-elite{border-color:rgba(182,102,255,.50) !important;background-image:linear-gradient(rgba(24,10,44,.90),rgba(24,10,44,.90)),linear-gradient(90deg,transparent,rgba(202,122,255,.58) 30%,rgba(255,208,80,.72) 50%,rgba(202,122,255,.58) 70%,transparent) !important;background-origin:border-box !important;background-clip:padding-box,border-box !important}
[data-style="mmm"] .slot-box.tier-good,
[data-style="mmm"] .slot-filled.tier-good,
[data-style="mmm"] .diamond-pos-card.tier-good{border-color:rgba(58,135,248,.25) !important;background-image:linear-gradient(#0c0818,#0c0818),linear-gradient(90deg,transparent,rgba(58,138,252,.42) 50%,transparent) !important;background-origin:border-box !important;background-clip:padding-box,border-box !important}
[data-style="mmm"] .slot-box.tier-average,
[data-style="mmm"] .slot-filled.tier-average,
[data-style="mmm"] .diamond-pos-card.tier-average {border-color:rgba(58,135,248,.25) !important;background-image:linear-gradient(#0c0818,#0c0818),linear-gradient(90deg,transparent,rgba(58,138,252,.42) 50%,transparent) !important;background-origin:border-box !important;background-clip:padding-box,border-box !important}

[data-style="mmm"] .scoreboard,[data-style="mmm"] .manager-card,[data-style="mmm"] .modal-panel,[data-style="mmm"] .highlight-card,[data-style="mmm"] .postseason-game-tile,
[data-style="mmm"] .postseason-mvp-tile,
[data-style="mmm"] .achievement-card,[data-style="mmm"] .lineup-card{background:rgba(12,8,24,.96) !important;border:1px solid rgba(142,72,222,.30) !important;border-top:3px solid transparent !important;border-radius:8px !important;background-image:linear-gradient(rgba(12,8,24,.96),rgba(12,8,24,.96)),linear-gradient(90deg,transparent,rgba(228,165,80,.60) 28%,rgba(255,215,100,.82) 50%,rgba(228,165,80,.60) 72%,transparent) !important;background-origin:border-box !important;background-clip:padding-box,border-box !important}
[data-style="mmm"] .void-panel{background:rgba(12,8,24,.62) !important;border:1px solid rgba(122,62,202,.22) !important;border-radius:5px !important;border-top:2px solid transparent !important;background-image:linear-gradient(rgba(12,8,24,.62),rgba(12,8,24,.62)),linear-gradient(90deg,transparent,rgba(202,142,62,.42) 50%,transparent) !important;background-origin:border-box !important;background-clip:padding-box,border-box !important}
[data-style="mmm"] .slot-filled.tier-elite{border-color:rgba(182,102,255,.40) !important;background-image:linear-gradient(rgba(22,10,40,.72),rgba(22,10,40,.72)),linear-gradient(90deg,transparent,rgba(202,122,255,.48) 35%,rgba(255,208,80,.62) 50%,rgba(202,122,255,.48) 65%,transparent) !important;background-origin:border-box !important;background-clip:padding-box,border-box !important}
[data-style="mmm"] .draft-action-btn{background:linear-gradient(135deg,rgba(162,82,255,.18),rgba(102,142,255,.14)) !important;border:2px solid rgba(182,102,255,.48) !important;border-radius:8px !important}
[data-style="mmm"] .settings-option{border:1px solid rgba(122,62,202,.26) !important;border-radius:8px !important;background:rgba(12,8,24,.82) !important}
[data-style="mmm"] .settings-option.active{border:2px solid rgba(182,102,255,.58) !important;background:rgba(142,72,222,.10) !important;box-shadow:0 0 8px rgba(162,82,255,.12) !important}
[data-style="mmm"] .hof-badge{background:linear-gradient(90deg,rgba(162,82,255,.18),rgba(222,162,82,.14)) !important;color:rgba(222,182,255,.92) !important;border:1px solid rgba(182,102,255,.36) !important;border-radius:99px !important}
[data-style="mmm"] .ace-badge,
[data-style="mmm"] .clutch-badge,
[data-style="mmm"] .ironman-badge{background:rgba(82,182,255,.12) !important;color:rgba(142,212,255,.90) !important;border:1px solid rgba(82,162,255,.30) !important;border-radius:99px !important}

[data-style="mmm"] .player-pos,
[data-style="mmm"] .slot-box-pos{color:rgba(182,122,255,.62);font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:.12em;font-size:8px}
[data-style="mmm"] .player-year{color:rgba(152,92,238,.40);font-family:'Rajdhani',sans-serif}
[data-style="mmm"] .player-name,
[data-style="mmm"] .diamond-pos-name{color:#e8d0ff;font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:.04em}
[data-style="mmm"] .player-plus{color:#c080ff;font-family:'Rajdhani',sans-serif;font-weight:700}
[data-style="mmm"] .player-stats{color:rgba(162,102,255,.52);font-family:'Rajdhani',sans-serif;font-weight:600;letter-spacing:.10em}
[data-style="mmm"] .slot-box-pos{color:rgba(182,122,255,.66);font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:.12em;font-size:8px}
[data-style="mmm"] .slot-box-name{color:#e8d0ff;font-family:'Rajdhani',sans-serif;font-weight:700}
[data-style="mmm"] .slot-box-stats{color:rgba(202,142,255,.75);font-family:'Rajdhani',sans-serif;font-weight:600}
[data-style="mmm"] .slot-box-plus{color:rgba(122,62,202,.28);font-family:'Rajdhani',sans-serif;font-weight:600}
[data-style="mmm"] .record-banner{color:#c080ff;font-family:'Rajdhani',sans-serif;font-weight:700}
[data-style="mmm"] .record-banner-sub,[data-style="mmm"] .mono-caps,[data-style="mmm"] .lineup-card-label,
[data-style="mmm"] .lineup-group-header,[data-style="mmm"] .section-label,[data-style="mmm"] .opp-header{color:rgba(152,82,242,.44);font-family:'Rajdhani',sans-serif;font-weight:700}
[data-style="mmm"] .manager-name,[data-style="mmm"] .modal-title,[data-style="mmm"] .award-name{color:#e8d0ff;font-family:'Rajdhani',sans-serif;font-weight:700}
[data-style="mmm"] .manager-record,[data-style="mmm"] .hc-description,
[data-style="mmm"] .hc-situation,[data-style="mmm"] .hc-player-meta,[data-style="mmm"] .teammates-line{color:rgba(152,82,242,.46);font-family:'Rajdhani',sans-serif}
[data-style="mmm"] .postseason-round-label{color:#c080ff;font-family:'Rajdhani',sans-serif;font-weight:700}
[data-style="mmm"] .modal-header{border-bottom:1px solid rgba(162,82,255,.24)}
[data-style="mmm"] .slot-box-pos{color:rgba(182,122,255,.66);font-family:'Rajdhani',sans-serif;font-weight:700}
[data-style="mmm"] .slot-box-name{color:#e8d0ff;font-family:'Rajdhani',sans-serif;font-size:10px}
[data-style="mmm"] .slot-box-stats{color:#c080ff;font-family:'Rajdhani',sans-serif;font-weight:700}
[data-style="mmm"] .brand{color:#e8d0ff;font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:.06em}
[data-style="mmm"] .lede{color:rgba(162,102,255,.50);font-family:'Rajdhani',sans-serif;font-weight:600;letter-spacing:.14em}
[data-style="mmm"] .settings-option-label{color:#e8d0ff;font-family:'Rajdhani',sans-serif;font-weight:700}

/* ── New theme swatches ── */
.swatch-cec-el  { background: rgba(160,230,100,.22); border: 1px solid rgba(160,230,100,.58); }
.swatch-cec-gr  { background: rgba(60,140,100,.17);  border: 1px solid rgba(60,140,100,.48); }
.swatch-cec-go  { background: rgba(175,142,55,.18);  border: 1px solid rgba(175,142,55,.52); }
.swatch-gigi-el { background: rgba(255,144,0,.24);   border: 1px solid rgba(255,164,20,.65); }
.swatch-gigi-gr { background: rgba(200,100,0,.18);   border: 1px solid rgba(200,110,0,.52); }
.swatch-gigi-go { background: rgba(120,60,5,.14);    border: 1px solid rgba(140,75,8,.40); }
.swatch-hc-el   { background: rgba(180,18,30,.22);   border: 1px solid rgba(185,18,32,.58); }
.swatch-hc-gr   { background: rgba(60,120,220,.18);  border: 1px solid rgba(80,148,248,.50); }
.swatch-hc-go   { background: rgba(200,165,45,.16);  border: 1px solid rgba(215,175,48,.48); }
.swatch-mcs-el  { background: rgba(255,138,48,.22);  border: 1px solid rgba(255,155,52,.58); }
.swatch-mcs-gr  { background: rgba(48,90,210,.18);   border: 1px solid rgba(68,128,248,.50); }
.swatch-mcs-go  { background: rgba(28,140,62,.14);   border: 1px solid rgba(42,165,78,.42); }
.swatch-mmm-el  { background: rgba(202,122,255,.22); border: 1px solid rgba(210,130,255,.58); }
.swatch-mmm-gr  { background: rgba(130,72,220,.18);  border: 1px solid rgba(155,88,245,.50); }
.swatch-mmm-go  { background: rgba(55,130,248,.16);  border: 1px solid rgba(72,148,255,.46); }

/* ── New theme body backgrounds ── */
[data-style="cec"] body {
  background-color: #0a1a0a;
  background-image:
    repeating-linear-gradient(45deg,  rgba(60,120,60,.048) 0px, transparent 1px, transparent 18px, rgba(60,120,60,.048) 19px),
    repeating-linear-gradient(-45deg, rgba(60,120,60,.048) 0px, transparent 1px, transparent 18px, rgba(60,120,60,.048) 19px);
}
[data-style="gigi"] body { background-color: #100804; background-image: none; }
[data-style="hc"]   body { background-color: #0c0a0d; background-image: none; }
[data-style="mcs"]  body { background-color: #050810; background-image: none; }
[data-style="mmm"]  body { background-color: #07050e; background-image: none; }

/* ── Typography blocks for new themes ── */

/* Cecilia — Cinzel + Playfair Display + IM Fell English throughout */
[data-style="cec"] .player-name,
[data-style="cec"] .diamond-pos-name,
[data-style="cec"] .manager-name,
[data-style="cec"] .brand,
[data-style="cec"] .modal-title,
[data-style="cec"] .section-label,
[data-style="cec"] .lineup-card-label,
[data-style="cec"] .lineup-group-name,
[data-style="cec"] .award-name,
[data-style="cec"] .hof-badge,
[data-style="cec"] .ace-badge,
[data-style="cec"] .clutch-badge,
[data-style="cec"] .ironman-badge,
[data-style="cec"] .draft-action-btn,
[data-style="cec"] .btn-primary,
[data-style="cec"] .btn-outline,
[data-style="cec"] .mono-caps,
[data-style="cec"] .postseason-round-label {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.05em;
}
[data-style="cec"] .record-banner,
[data-style="cec"] .player-plus,
[data-style="cec"] .stat-value {
  font-family: 'Playfair Display', serif;
  font-style: italic;
}
[data-style="cec"] .lede,
[data-style="cec"] .manager-record,
[data-style="cec"] .hc-description,
[data-style="cec"] .hc-situation,
[data-style="cec"] .teammates-line,
[data-style="cec"] .hc-player-meta,
[data-style="cec"] .opp-header,
[data-style="cec"] .player-stats,
[data-style="cec"] .player-year {
  font-family: 'IM Fell English', serif;
  font-style: italic;
}

/* Gigi (Fister) — Nunito throughout */
[data-style="gigi"] .player-name,
[data-style="gigi"] .diamond-pos-name,
[data-style="gigi"] .manager-name,
[data-style="gigi"] .brand,
[data-style="gigi"] .modal-title,
[data-style="gigi"] .section-label,
[data-style="gigi"] .lineup-card-label,
[data-style="gigi"] .lineup-group-name,
[data-style="gigi"] .award-name,
[data-style="gigi"] .hof-badge,
[data-style="gigi"] .ace-badge,
[data-style="gigi"] .clutch-badge,
[data-style="gigi"] .ironman-badge,
[data-style="gigi"] .draft-action-btn,
[data-style="gigi"] .btn-primary,
[data-style="gigi"] .btn-outline,
[data-style="gigi"] .mono-caps,
[data-style="gigi"] .record-banner,
[data-style="gigi"] .player-plus,
[data-style="gigi"] .stat-value,
[data-style="gigi"] .lede,
[data-style="gigi"] .manager-record,
[data-style="gigi"] .hc-description,
[data-style="gigi"] .hc-situation,
[data-style="gigi"] .teammates-line,
[data-style="gigi"] .hc-player-meta,
[data-style="gigi"] .opp-header,
[data-style="gigi"] .player-stats,
[data-style="gigi"] .player-year,
[data-style="gigi"] .postseason-round-label {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
}
[data-style="gigi"] .player-name,
[data-style="gigi"] .record-banner,
[data-style="gigi"] .player-plus { font-weight: 900; }

/* Haachama — Nunito throughout */
[data-style="hc"] .player-name,
[data-style="hc"] .diamond-pos-name,
[data-style="hc"] .manager-name,
[data-style="hc"] .brand,
[data-style="hc"] .modal-title,
[data-style="hc"] .section-label,
[data-style="hc"] .lineup-card-label,
[data-style="hc"] .lineup-group-name,
[data-style="hc"] .award-name,
[data-style="hc"] .hof-badge,
[data-style="hc"] .ace-badge,
[data-style="hc"] .clutch-badge,
[data-style="hc"] .ironman-badge,
[data-style="hc"] .draft-action-btn,
[data-style="hc"] .btn-primary,
[data-style="hc"] .btn-outline,
[data-style="hc"] .mono-caps,
[data-style="hc"] .record-banner,
[data-style="hc"] .player-plus,
[data-style="hc"] .stat-value,
[data-style="hc"] .lede,
[data-style="hc"] .manager-record,
[data-style="hc"] .hc-description,
[data-style="hc"] .hc-situation,
[data-style="hc"] .teammates-line,
[data-style="hc"] .hc-player-meta,
[data-style="hc"] .opp-header,
[data-style="hc"] .player-stats,
[data-style="hc"] .player-year,
[data-style="hc"] .postseason-round-label {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
}
[data-style="hc"] .player-name,
[data-style="hc"] .record-banner,
[data-style="hc"] .player-plus { font-weight: 900; }

/* MapleStory Classic — Courier Prime throughout */
[data-style="mcs"] .player-name,
[data-style="mcs"] .diamond-pos-name,
[data-style="mcs"] .manager-name,
[data-style="mcs"] .brand,
[data-style="mcs"] .modal-title,
[data-style="mcs"] .section-label,
[data-style="mcs"] .lineup-card-label,
[data-style="mcs"] .lineup-group-name,
[data-style="mcs"] .award-name,
[data-style="mcs"] .hof-badge,
[data-style="mcs"] .ace-badge,
[data-style="mcs"] .clutch-badge,
[data-style="mcs"] .ironman-badge,
[data-style="mcs"] .draft-action-btn,
[data-style="mcs"] .btn-primary,
[data-style="mcs"] .btn-outline,
[data-style="mcs"] .mono-caps,
[data-style="mcs"] .record-banner,
[data-style="mcs"] .player-plus,
[data-style="mcs"] .stat-value,
[data-style="mcs"] .lede,
[data-style="mcs"] .manager-record,
[data-style="mcs"] .hc-description,
[data-style="mcs"] .hc-situation,
[data-style="mcs"] .teammates-line,
[data-style="mcs"] .hc-player-meta,
[data-style="mcs"] .opp-header,
[data-style="mcs"] .player-stats,
[data-style="mcs"] .player-year,
[data-style="mcs"] .postseason-round-label {
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
}

/* MapleStory Modern — Rajdhani throughout */
[data-style="mmm"] .player-name,
[data-style="mmm"] .diamond-pos-name,
[data-style="mmm"] .manager-name,
[data-style="mmm"] .brand,
[data-style="mmm"] .modal-title,
[data-style="mmm"] .section-label,
[data-style="mmm"] .lineup-card-label,
[data-style="mmm"] .lineup-group-name,
[data-style="mmm"] .award-name,
[data-style="mmm"] .hof-badge,
[data-style="mmm"] .ace-badge,
[data-style="mmm"] .clutch-badge,
[data-style="mmm"] .ironman-badge,
[data-style="mmm"] .draft-action-btn,
[data-style="mmm"] .btn-primary,
[data-style="mmm"] .btn-outline,
[data-style="mmm"] .mono-caps,
[data-style="mmm"] .record-banner,
[data-style="mmm"] .player-plus,
[data-style="mmm"] .stat-value,
[data-style="mmm"] .lede,
[data-style="mmm"] .manager-record,
[data-style="mmm"] .hc-description,
[data-style="mmm"] .hc-situation,
[data-style="mmm"] .teammates-line,
[data-style="mmm"] .hc-player-meta,
[data-style="mmm"] .opp-header,
[data-style="mmm"] .player-stats,
[data-style="mmm"] .player-year,
[data-style="mmm"] .postseason-round-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}
[data-style="mmm"] .player-name,
[data-style="mmm"] .record-banner,
[data-style="mmm"] .player-plus { font-weight: 700; letter-spacing: 0.06em; }


/* ── Supplemental typography — new themes, remaining elements ──
   Covers: slot-box-tag, real-awards-line, expanded-draft-card-tag,
   hc-player-name, ps/roster section labels, postseason tile names,
   stat-cell-label, lineup-group-count, manager-rating-line,
   modal-section-label, position-section-header .pos-name,
   natural, roll-card, result-tab, player-search-input
── */

/* Cecilia supplemental — Cinzel for headings, IM Fell for body */
[data-style="cec"] .slot-box-tag,
[data-style="cec"] .real-awards-line,
[data-style="cec"] .expanded-draft-card-tag,
[data-style="cec"] .ps-stats-section-label,
[data-style="cec"] .roster-section-label,
[data-style="cec"] .postseason-mvp-tile-name,
[data-style="cec"] .stat-cell-label,
[data-style="cec"] .lineup-group-count,
[data-style="cec"] .modal-section-label,
[data-style="cec"] .position-section-header .pos-name,
[data-style="cec"] .natural,
[data-style="cec"] .roll-card,
[data-style="cec"] .result-tab {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.04em;
}
[data-style="cec"] .hc-player-name,
[data-style="cec"] .manager-rating-line,
[data-style="cec"] .manager-connections-line,
[data-style="cec"] .player-search-input { font-family: 'IM Fell English', serif; }

/* Gigi (Fister) supplemental — Nunito throughout */
[data-style="gigi"] .slot-box-tag,
[data-style="gigi"] .real-awards-line,
[data-style="gigi"] .expanded-draft-card-tag,
[data-style="gigi"] .hc-player-name,
[data-style="gigi"] .ps-stats-section-label,
[data-style="gigi"] .roster-section-label,
[data-style="gigi"] .postseason-mvp-tile-name,
[data-style="gigi"] .stat-cell-label,
[data-style="gigi"] .lineup-group-count,
[data-style="gigi"] .modal-section-label,
[data-style="gigi"] .manager-rating-line,
[data-style="gigi"] .manager-connections-line,
[data-style="gigi"] .position-section-header .pos-name,
[data-style="gigi"] .natural,
[data-style="gigi"] .roll-card,
[data-style="gigi"] .result-tab,
[data-style="gigi"] .player-search-input { font-family: 'Nunito', sans-serif; font-weight: 700; }

/* Coexist supplemental — Nunito throughout */
[data-style="hc"] .slot-box-tag,
[data-style="hc"] .real-awards-line,
[data-style="hc"] .expanded-draft-card-tag,
[data-style="hc"] .hc-player-name,
[data-style="hc"] .ps-stats-section-label,
[data-style="hc"] .roster-section-label,
[data-style="hc"] .postseason-mvp-tile-name,
[data-style="hc"] .stat-cell-label,
[data-style="hc"] .lineup-group-count,
[data-style="hc"] .modal-section-label,
[data-style="hc"] .manager-rating-line,
[data-style="hc"] .manager-connections-line,
[data-style="hc"] .position-section-header .pos-name,
[data-style="hc"] .natural,
[data-style="hc"] .roll-card,
[data-style="hc"] .result-tab,
[data-style="hc"] .player-search-input { font-family: 'Nunito', sans-serif; font-weight: 700; }

/* Maple Classic supplemental — Courier Prime throughout */
[data-style="mcs"] .slot-box-tag,
[data-style="mcs"] .real-awards-line,
[data-style="mcs"] .expanded-draft-card-tag,
[data-style="mcs"] .hc-player-name,
[data-style="mcs"] .ps-stats-section-label,
[data-style="mcs"] .roster-section-label,
[data-style="mcs"] .postseason-mvp-tile-name,
[data-style="mcs"] .stat-cell-label,
[data-style="mcs"] .lineup-group-count,
[data-style="mcs"] .modal-section-label,
[data-style="mcs"] .manager-rating-line,
[data-style="mcs"] .manager-connections-line,
[data-style="mcs"] .position-section-header .pos-name,
[data-style="mcs"] .natural,
[data-style="mcs"] .roll-card,
[data-style="mcs"] .result-tab,
[data-style="mcs"] .player-search-input { font-family: 'Courier Prime', monospace; font-weight: 700; }

/* Maple Modern supplemental — Rajdhani throughout */
[data-style="mmm"] .slot-box-tag,
[data-style="mmm"] .real-awards-line,
[data-style="mmm"] .expanded-draft-card-tag,
[data-style="mmm"] .hc-player-name,
[data-style="mmm"] .ps-stats-section-label,
[data-style="mmm"] .roster-section-label,
[data-style="mmm"] .postseason-mvp-tile-name,
[data-style="mmm"] .stat-cell-label,
[data-style="mmm"] .lineup-group-count,
[data-style="mmm"] .modal-section-label,
[data-style="mmm"] .manager-rating-line,
[data-style="mmm"] .manager-connections-line,
[data-style="mmm"] .position-section-header .pos-name,
[data-style="mmm"] .natural,
[data-style="mmm"] .roll-card,
[data-style="mmm"] .result-tab,
[data-style="mmm"] .player-search-input { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 0.04em; }


/* ══════════════════════════════════════════════════════════════
   BACKGROUND ELEMENTS — new themes v6.2
   body::before/after suppressed; custom injected elements handle bg
══════════════════════════════════════════════════════════════ */

[data-style="cec"] body::before,
[data-style="cec"] body::after,
[data-style="gigi"] body::before,
[data-style="gigi"] body::after,
[data-style="hc"] body::before,
[data-style="hc"] body::after,
[data-style="mcs"] body::before,
[data-style="mcs"] body::after,
[data-style="mmm"] body::before,
[data-style="mmm"] body::after { display: none; }

/* ── Cecilia — lattice + gears + staff lines + notes ── */
/* ═══════════════════════════
   CECILIA — diamond lattice + rotating gear + staff-line sweep
═══════════════════════════ */
#cecilia{background:#0a1a0a}

/* Diamond lattice — her official bg art */
.cec-lattice{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(45deg,  rgba(60,120,60,.055) 0px, transparent 1px, transparent 22px, rgba(60,120,60,.055) 23px),
    repeating-linear-gradient(-45deg, rgba(60,120,60,.055) 0px, transparent 1px, transparent 22px, rgba(60,120,60,.055) 23px);
}
/* Clover/diamond ornaments at lattice intersections — subtle */
.cec-lattice::after{
  content:'';position:fixed;inset:0;
  background:radial-gradient(ellipse 70% 50% at 50% 50%,rgba(60,120,60,.06) 0%,transparent 65%);
}

/* Rotating gear watermark — large, dead centre */
.cec-gear{position:fixed;
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:52vmin;color:rgba(120,180,80,.042);z-index:1;pointer-events:none;
  animation:cec-gear-spin 120s linear infinite;
  user-select:none;line-height:1;
}
@keyframes cec-gear-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Second smaller gear — offset, counter-rotating */
.cec-gear2{position:fixed;
  position:fixed;top:18%;right:8%;
  font-size:18vmin;color:rgba(100,160,65,.055);z-index:1;pointer-events:none;
  animation:cec-gear-spin2 80s linear infinite;user-select:none;line-height:1;
}
@keyframes cec-gear-spin2{to{transform:rotate(-360deg)}}

/* Wind-up key watermark — top right */
.cec-key{position:fixed;
  position:fixed;top:6%;right:5%;
  font-size:8vmin;color:rgba(180,145,55,.08);z-index:1;pointer-events:none;
  animation:cec-key-bob 8s ease-in-out infinite;user-select:none;
}
@keyframes cec-key-bob{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}

/* Staff lines — horizontal, very faint, slowly scrolling down */
.cec-staff{
  position:fixed;top:-100%;left:0;right:0;height:300%;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 22px,rgba(140,180,100,.032) 22px,rgba(140,180,100,.032) 23px);
  animation:cec-staff-scroll 60s linear infinite;
}
@keyframes cec-staff-scroll{0%{transform:translateY(0)}100%{transform:translateY(33.33%)}}

/* Corner vignette */
.cec-vign{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 85% 80% at 50% 50%,transparent 40%,rgba(4,10,4,.75) 100%)}

/* Musical notes drifting up */
.cec-note{position:fixed;
  position:fixed;z-index:1;pointer-events:none;
  font-size:16px;color:rgba(140,190,80,.10);user-select:none;
  animation:cec-note-drift linear infinite;
}
@keyframes cec-note-drift{
  0%{transform:translateY(0) rotate(-10deg);opacity:0}
  10%{opacity:1}
  90%{opacity:.5}
  100%{transform:translateY(-100vh) rotate(15deg);opacity:0}
}

/* ── Gigi — × symbols + orange glows + scan line ── */
/* ═══════════════════════════
   GIGI — × symbols drifting + orange pulse glows
═══════════════════════════ */
#gigi{background:#100804}

/* Large × watermark centre */
.gigi-x-centre{position:fixed;
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:55vmin;font-weight:900;color:rgba(255,130,0,.04);
  pointer-events:none;font-family:sans-serif;user-select:none;z-index:1;
  animation:gigi-x-pulse 6s ease-in-out infinite;
}
@keyframes gigi-x-pulse{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.98)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.02)}}

/* Scattered × symbols */
.gigi-x{position:fixed;
  position:fixed;font-weight:900;color:rgba(255,130,0,.10);
  pointer-events:none;font-family:sans-serif;user-select:none;z-index:1;
  animation:gigi-x-twinkle ease-in-out infinite;
}
@keyframes gigi-x-twinkle{0%,100%{opacity:.3;transform:scale(.9) rotate(0deg)}50%{opacity:1;transform:scale(1.1) rotate(10deg)}}

/* Orange corner glows */
.gigi-glow-tl,.gigi-glow-br{position:fixed;z-index:0;pointer-events:none;border-radius:50%}
.gigi-glow-tl{
  top:-15%;left:-10%;width:50%;height:50%;
  background:radial-gradient(ellipse,rgba(255,130,0,.07) 0%,transparent 65%);
  animation:gigi-glow-pulse 5s ease-in-out infinite;
}
.gigi-glow-br{
  bottom:-15%;right:-10%;width:45%;height:45%;
  background:radial-gradient(ellipse,rgba(200,80,0,.06) 0%,transparent 65%);
  animation:gigi-glow-pulse 7s ease-in-out infinite;animation-delay:-3s;
}
@keyframes gigi-glow-pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* Popo bird silhouette bottom right */
.gigi-popo{position:fixed;
  position:fixed;bottom:6%;right:5%;
  font-size:6vmin;opacity:.06;z-index:1;pointer-events:none;user-select:none;
  animation:gigi-popo-bob 4s ease-in-out infinite;
}
@keyframes gigi-popo-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Orange scan line sweep */
.gigi-scan{position:fixed;
  position:fixed;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,130,0,.14),transparent);
  z-index:1;pointer-events:none;
  animation:gigi-scan-sweep 8s ease-in-out infinite;
}
@keyframes gigi-scan-sweep{0%,100%{top:-2%;opacity:0}10%{opacity:1}85%{top:102%;opacity:.4}90%,100%{top:102%;opacity:0}}

/* Vignette */
.gigi-vign{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 80% 75% at 50% 50%,transparent 40%,rgba(6,3,0,.80) 100%)}

/* ── Coexist — mood oscillation + hearts↔spiders + spider watermark ── */
/* ═══════════════════════════
   COEXIST — slow mood oscillation Haato↔Haachama + corrupting hearts
   Haato: warm amber/cream + blue — her blonde hair, blue dress
   Haachama: deep crimson + gold — her black cape, red skirt, gold trim
   Shared thread: red (her ribbons AND her skirt)
═══════════════════════════ */
#haachama{background:#0c0a0d}

/* ── Mood oscillator — the background itself shifts between identities ── */
/* Haato phase: warm amber-blue calm */
.hc-mood-haato{position:fixed;
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%,  rgba(225,185,55,.10) 0%,transparent 55%),
    radial-gradient(ellipse 70% 50% at 20% 80%,  rgba(80,148,248,.07) 0%,transparent 55%),
    radial-gradient(ellipse 60% 40% at 80% 60%,  rgba(200,60,80,.05) 0%,transparent 50%);
  animation:hc-haato-phase 18s ease-in-out infinite;
}
@keyframes hc-haato-phase{
  0%,100%{opacity:1}   /* Haato dominant */
  45%,55%{opacity:0}   /* Haachama dominant — this layer fades out */
}

/* Haachama phase: crimson + gold glints */
.hc-mood-haachama{position:fixed;
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 70% at 50% 100%,rgba(185,18,32,.18) 0%,transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 20%,  rgba(185,145,42,.08) 0%,transparent 50%),
    radial-gradient(ellipse 50% 40% at 15% 30%,  rgba(185,18,32,.08) 0%,transparent 50%);
  animation:hc-haachama-phase 18s ease-in-out infinite;
}
@keyframes hc-haachama-phase{
  0%,100%{opacity:0}   /* Haato dominant — Haachama hidden */
  45%,55%{opacity:1}   /* Haachama dominant */
}

/* ── Scattered hearts — most stay, some corrupt to 🕷 ── */
.hc-symbol{position:fixed;
  position:fixed;z-index:1;pointer-events:none;user-select:none;
  animation:hc-symbol-breathe ease-in-out infinite;
}
@keyframes hc-symbol-breathe{
  0%,100%{transform:scale(1);opacity:.28}
  50%{transform:scale(1.12);opacity:.45}
}

/* Corrupt symbols — fade out as heart, fade back in as spider */
.hc-symbol.corrupt{
  animation:hc-corrupt-cycle 18s ease-in-out infinite;
}
@keyframes hc-corrupt-cycle{
  0%,36%{opacity:.28}    /* Heart, Haato phase */
  41%{opacity:0}          /* Gone — switching */
  44%,58%{opacity:0}      /* Still switching */
  62%{opacity:.35}        /* Spider appears */
  72%,85%{opacity:.50}    /* Spider fully visible */
  92%{opacity:0}          /* Fading back */
  96%,100%{opacity:.28}   /* Heart returns */
}

/* Large heart/spider watermark — slowly morphs role between phases */
.hc-big-heart{position:fixed;
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:48vmin;color:rgba(200,30,50,.05);z-index:1;pointer-events:none;user-select:none;
  animation:hc-big-pulse 18s ease-in-out infinite;
}
@keyframes hc-big-pulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);color:rgba(200,30,50,.06)}
  45%,55%{transform:translate(-50%,-50%) scale(1.04);color:rgba(185,18,32,.10)}
}

/* Large spider watermark — lurks bottom-right, emerges during Haachama phase */
.hc-spider-big{position:fixed;
  position:fixed;bottom:4%;right:4%;
  font-size:18vmin;z-index:1;pointer-events:none;user-select:none;
  opacity:0;
  animation:hc-spider-emerge 18s ease-in-out infinite;
}
@keyframes hc-spider-emerge{
  0%,35%{opacity:0;transform:scale(.8) rotate(-8deg)}
  50%,60%{opacity:.22;transform:scale(1) rotate(0deg)}
  80%,100%{opacity:0;transform:scale(.9) rotate(4deg)}
}

/* Gold trim flash — Haachama's cape detail */
.hc-gold-flash{position:fixed;
  position:fixed;top:0;left:0;right:0;height:3px;pointer-events:none;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(185,145,42,.55) 30%,rgba(220,175,55,.80) 50%,rgba(185,145,42,.55) 70%,transparent);
  opacity:0;
  animation:hc-gold-appear 18s ease-in-out infinite;
}
@keyframes hc-gold-appear{
  0%,40%{opacity:0}
  48%,60%{opacity:1}
  72%,100%{opacity:0}
}

/* Vignette */
.hc-vign{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 82% 78% at 50% 50%,transparent 30%,rgba(6,4,7,.80) 100%)}

/* ── MapleStory Classic — stars + leaves + trees + moon ── */
/* ═══════════════════════════
   MAPLE CLASSIC — night sky stars + maple leaves falling + tree silhouettes
═══════════════════════════ */
#maple-classic{background:#050810}

/* Star field */
.mc-stars{position:fixed;inset:0;z-index:0;pointer-events:none}
.mc-star{position:fixed;border-radius:50%;background:#fff;animation:mc-twinkle ease-in-out infinite}
@keyframes mc-twinkle{0%,100%{opacity:.3}50%{opacity:1}}

/* Tree silhouettes at bottom */
.mc-trees{
  position:fixed;bottom:0;left:0;right:0;height:160px;z-index:4;pointer-events:none;
}
.mc-trees svg{width:100%;height:100%;display:block;}

/* Maple leaves falling */
.mc-leaf{position:fixed;
  position:fixed;z-index:1;pointer-events:none;user-select:none;
  font-size:14px;
  animation:mc-leaf-fall linear infinite;
}
@keyframes mc-leaf-fall{
  0%{transform:translateY(-30px) rotate(0deg);opacity:0}
  5%{opacity:.25}
  90%{opacity:.12}
  100%{transform:translateY(100vh) rotate(360deg);opacity:0}
}

/* Orange moon glow top right */
.mc-moon{
  position:fixed;top:7%;right:9%;width:100px;height:100px;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse,rgba(255,140,50,.22) 0%,rgba(255,100,20,.08) 50%,transparent 72%);
  animation:mc-moon-glow 6s ease-in-out infinite;
}
@keyframes mc-moon-glow{0%,100%{opacity:.7}50%{opacity:1}}
.mc-moon-inner{
  position:absolute;top:15%;left:15%;width:70%;height:70%;border-radius:50%;
  background:rgba(255,160,60,.28);
  box-shadow:0 0 40px rgba(255,130,30,.35),0 0 80px rgba(255,100,20,.15);
}

/* Vignette */
.mc-vign{position:fixed;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse 90% 70% at 50% 40%,transparent 38%,rgba(2,4,12,.70) 90%)}

/* ── MapleStory Modern — aurora + particles + leaf watermark ── */
/* ═══════════════════════════
   MAPLE MODERN — aurora + floating particles
═══════════════════════════ */
#maple-modern{background:#07050e}

/* Rotating aurora cone */
.mm-aurora{position:fixed;
  position:fixed;top:50%;left:50%;
  width:160%;height:160%;transform:translate(-50%,-50%);
  z-index:0;pointer-events:none;
  background:conic-gradient(
    from 200deg at 30% 50%,
    transparent 0deg,rgba(120,40,200,.05) 20deg,transparent 40deg,
    transparent 120deg,rgba(200,80,255,.04) 140deg,transparent 160deg,
    transparent 240deg,rgba(80,140,255,.05) 255deg,transparent 270deg,
    transparent 360deg
  );
  animation:mm-aurora-spin 50s linear infinite;
}
@keyframes mm-aurora-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Second aurora layer, different speed/angle */
.mm-aurora2{position:fixed;
  position:fixed;top:50%;left:50%;
  width:140%;height:140%;transform:translate(-50%,-50%);
  z-index:0;pointer-events:none;
  background:conic-gradient(
    from 60deg at 65% 40%,
    transparent 0deg,rgba(220,160,60,.03) 15deg,transparent 30deg,
    transparent 150deg,rgba(160,80,255,.04) 168deg,transparent 185deg,
    transparent 300deg,rgba(60,180,255,.03) 312deg,transparent 325deg,
    transparent 360deg
  );
  animation:mm-aurora-spin 75s linear infinite reverse;
}

/* Floating arcane particles */
.mm-particle{position:fixed;
  position:fixed;border-radius:50%;z-index:1;pointer-events:none;
  animation:mm-particle-float ease-in-out infinite;
}
@keyframes mm-particle-float{
  0%{transform:translateY(0) scale(1);opacity:0}
  10%{opacity:1}
  50%{transform:translateY(-40px) scale(1.2)}
  90%{opacity:.4}
  100%{transform:translateY(-80px) scale(.8);opacity:0}
}

/* Large maple leaf watermark — faint, gently rotating */
.mm-leaf{position:fixed;
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:40vmin;opacity:.05;z-index:1;pointer-events:none;user-select:none;
  filter:hue-rotate(200deg);
  animation:mm-leaf-drift 18s ease-in-out infinite;
}
@keyframes mm-leaf-drift{0%,100%{transform:translate(-50%,-50%) rotate(-5deg)}50%{transform:translate(-50%,-50%) rotate(5deg)}}

/* Purple/gold radial glow mid */
.mm-glow{position:fixed;
  position:fixed;top:40%;left:50%;transform:translateX(-50%);
  width:60%;height:55%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse,rgba(140,60,220,.08) 0%,transparent 65%);
  animation:mm-glow-pulse 8s ease-in-out infinite;
}
@keyframes mm-glow-pulse{0%,100%{opacity:.5;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}

/* Gold shimmer top */
.mm-gold-top{position:fixed;
  position:fixed;top:0;left:0;right:0;height:25%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 100% at 50% 0%,rgba(220,160,55,.06) 0%,transparent 70%);
}

/* Vignette */
.mm-vign{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 80% 75% at 50% 50%,transparent 35%,rgba(4,2,8,.80) 100%)}


/* ── Settings group labels ── */
.settings-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 4px;
  color: rgba(201, 164, 85, .35);
  font-size: 8px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}
.settings-group-label::before,
.settings-group-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(201, 164, 85, .12);
}

/* ══════════════════════════════════════════════════════════════
   MINT — MintyCafe (mintytuber)
   Warm chocolate brown + mint teal, café corset drip border,
   cream interiors, acorn/coffee/clover watermarks. Nunito + DM Serif Display.
══════════════════════════════════════════════════════════════ */

[data-style="mint"] {
  --tier-elite:  rgba(61,214,160,1);
  --tier-great:  rgba(61,160,120,1);
  --tier-good:   rgba(180,155,110,1);
  --tier-average: #908571;
  --gold:        #3dd6a0;
  --gold-rgb:    61, 214, 160;
  --gold-bright: #6aefc0;
  --purple-rgb:  61, 160, 120;
  --green-rgb:   180, 155, 110;
  --font:        'Nunito', sans-serif;
  --void:        #1e0e08;
  --void-2:      #2a1510;
}

[data-style="mint"] body {
  background-color: #1e0e08;
  background-image: none;
}
[data-style="mint"] body::before,
[data-style="mint"] body::after { display: none; }

/* ── Base card ── */
[data-style="mint"] .player-card,
[data-style="mint"] .expanded-draft-card {
  border: 1px solid rgba(107,58,31,.40);
  border-top: 3px solid rgba(61,214,160,.55);
  background: linear-gradient(160deg,#2e1a0e 0%,#271309 100%);
  border-radius: 8px;
}

/* ── Watermarks ── */
/* Plain: nothing */
[data-style="mint"] .player-card::before,
[data-style="mint"] .expanded-draft-card::before {
  content: '';
  position: absolute; bottom: 4px; left: 6px;
  font-size: 20px; opacity: .10; pointer-events: none; line-height: 1;
}
/* Good: clover 🍀 */
[data-style="mint"] .player-card.tier-good::before,
[data-style="mint"] .expanded-draft-card.tier-good::before { content: '🍀'; }
/* Great: coffee ☕ */
[data-style="mint"] .player-card.tier-great::before,
[data-style="mint"] .expanded-draft-card.tier-great::before { content: '☕'; }
/* Elite: acorn 🌰 */
[data-style="mint"] .player-card.tier-elite::before,
[data-style="mint"] .expanded-draft-card.tier-elite::before {
  content: '🌰'; opacity: .14; font-size: 18px;
}

/* ── Elite card — chocolate drip border ── */
[data-style="mint"] .player-card.tier-elite,
[data-style="mint"] .expanded-draft-card.tier-elite {
  border: 1px solid rgba(107,58,31,.65);
  border-top: 3px solid transparent;
  background:
    linear-gradient(160deg,rgba(48,26,12,.98) 0%,rgba(38,18,8,.98) 100%),
    linear-gradient(90deg,
      rgba(61,214,160,.55) 0%,
      rgba(61,214,160,.80) 18%,
      rgba(90,50,20,.90) 32%,
      rgba(107,58,31,.95) 45%,
      rgba(107,58,31,.95) 55%,
      rgba(90,50,20,.90) 68%,
      rgba(61,214,160,.80) 82%,
      rgba(61,214,160,.55) 100%
    );
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  border-radius: 8px !important;
  animation: mint-pulse 4s ease-in-out infinite !important;
}
@keyframes mint-pulse {
  0%,100%  { box-shadow: 0 0 14px rgba(61,214,160,.08), 0 0 6px rgba(107,58,31,.18); }
  50%      { box-shadow: 0 0 28px rgba(61,214,160,.18), 0 0 14px rgba(107,58,31,.28), 0 0 40px rgba(61,214,160,.06); }
}

/* ── Great card ── */
[data-style="mint"] .player-card.tier-great,
[data-style="mint"] .expanded-draft-card.tier-great {
  border-color: rgba(80,44,20,.45);
  border-top-color: rgba(61,214,160,.42);
  background: linear-gradient(160deg,rgba(42,22,10,.96) 0%,rgba(34,16,8,.95) 100%);
  border-radius: 8px;
}

/* ── Good card ── */
[data-style="mint"] .player-card.tier-good,
[data-style="mint"] .expanded-draft-card.tier-good {
  border-color: rgba(180,155,110,.22);
  border-top-color: rgba(180,155,110,.40);
  background: linear-gradient(160deg,rgba(44,26,12,.94) 0%,rgba(34,18,8,.92) 100%);
  border-radius: 8px;
}
[data-style="mint"] .player-card.tier-average,
[data-style="mint"] .expanded-draft-card.tier-average {
  border-color: rgba(144,133,113,.22);
  border-top-color: rgba(144,133,113,.40);
  background: linear-gradient(160deg,rgba(44,26,12,.94) 0%,rgba(34,18,8,.92) 100%);
  border-radius: 8px;
}

/* ── Slots ── */
[data-style="mint"] .slot-box,
[data-style="mint"] .slot-filled,
[data-style="mint"] .diamond-pos-card {
  border: 1px solid rgba(107,58,31,.35);
  border-top: 2px solid rgba(61,214,160,.42);
  border-radius: 6px;
  background: #261208;
}
[data-style="mint"] .slot-box.tier-elite,
[data-style="mint"] .slot-filled.tier-elite,
[data-style="mint"] .diamond-pos-card.tier-elite {
  border: 1px solid rgba(107,58,31,.65) !important;
  border-top: 3px solid transparent !important;
  background:
    linear-gradient(160deg,rgba(48,26,12,.98) 0%,rgba(38,18,8,.98) 100%),
    linear-gradient(90deg,
      rgba(61,214,160,.55) 0%,
      rgba(61,214,160,.80) 18%,
      rgba(90,50,20,.90) 32%,
      rgba(107,58,31,.95) 45%,
      rgba(107,58,31,.95) 55%,
      rgba(90,50,20,.90) 68%,
      rgba(61,214,160,.80) 82%,
      rgba(61,214,160,.55) 100%
    ) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  border-radius: 6px !important;
  animation: mint-pulse 4s ease-in-out infinite !important;
}
[data-style="mint"] .slot-box.tier-great,
[data-style="mint"] .slot-filled.tier-great,
[data-style="mint"] .diamond-pos-card.tier-great {
  border-color: rgba(61,160,120,.30);
  border-top-color: rgba(61,160,120,.50);
  border-radius: 6px;
}
[data-style="mint"] .slot-box.tier-good,
[data-style="mint"] .slot-filled.tier-good,
[data-style="mint"] .diamond-pos-card.tier-good {
  border-color: rgba(180,155,110,.22);
  border-top-color: rgba(180,155,110,.38);
  border-radius: 6px;
}
[data-style="mint"] .slot-box.tier-average,
[data-style="mint"] .slot-filled.tier-average {
  border-color: rgba(144,133,113,.22);
  border-top-color: rgba(144,133,113,.38);
  border-radius: 6px;
}
[data-style="mint"] .diamond-pos-card.tier-average {
  border-color: rgba(144,133,113,.22);
  border-top-color: rgba(144,133,113,.38);
  border-radius: 6px;
}

/* ── Panels ── */
[data-style="mint"] .scoreboard,
[data-style="mint"] .manager-card,
[data-style="mint"] .modal-panel,
[data-style="mint"] .highlight-card,
[data-style="mint"] .postseason-game-tile,
[data-style="mint"] .postseason-mvp-tile,
[data-style="mint"] .achievement-card,
[data-style="mint"] .lineup-card {
  background: rgba(28,14,6,.95) !important;
  border: 1px solid rgba(107,58,31,.28) !important;
  border-top: 2px solid rgba(61,214,160,.38) !important;
  border-radius: 8px !important;
}

[data-style="mint"] .modal-header {
  border-bottom: 1px solid rgba(61,214,160,.18);
}

[data-style="mint"] .void-panel {
  background: rgba(26,12,5,.62) !important;
  border: 1px solid rgba(107,58,31,.18) !important;
  border-left: 3px solid rgba(61,214,160,.35) !important;
}

/* ── Buttons ── */
[data-style="mint"] .draft-action-btn {
  border: 2px solid rgba(150,90,45,.55);
  background: rgba(107,58,31,.22);
  color: rgba(225,185,130,.95);
  border-radius: 99px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
}
[data-style="mint"] .tier-elite .draft-action-btn {
  border-color: rgba(61,214,160,.50);
  background: rgba(61,214,160,.10);
  color: rgba(61,214,160,.95);
}
[data-style="mint"] .tier-great .draft-action-btn {
  border-color: rgba(61,160,120,.42);
  background: rgba(61,160,120,.10);
  color: rgba(61,214,160,.88);
}
[data-style="mint"] .btn-primary {
  background: rgba(107,58,31,.22);
  border-color: rgba(150,90,45,.45);
  color: rgba(225,185,130,.90);
  border-radius: 99px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
}
[data-style="mint"] .btn-outline {
  border-radius: 99px;
  font-family: 'Nunito', sans-serif;
}

/* ── Badges ── */
[data-style="mint"] .hof-badge {
  color: rgba(210,175,100,.88);
  border-color: rgba(180,145,90,.45);
  background: rgba(107,58,31,.18);
  border-radius: 4px;
  font-family: 'Nunito', sans-serif;
}
[data-style="mint"] .ace-badge,
[data-style="mint"] .clutch-badge,
[data-style="mint"] .ironman-badge {
  color: rgba(61,214,160,.92);
  border-color: rgba(61,214,160,.40);
  background: rgba(61,214,160,.08);
  border-radius: 99px;
  font-family: 'Nunito', sans-serif;
}

/* ── Settings option ── */
[data-style="mint"] .settings-option {
  border: 1px solid rgba(107,58,31,.28) !important;
  border-top: 2px solid rgba(61,214,160,.38) !important;
  border-radius: 8px !important;
  background: rgba(28,14,6,.88) !important;
}
[data-style="mint"] .settings-option.active {
  border-color: rgba(61,214,160,.55) !important;
  background: rgba(61,214,160,.06) !important;
}

/* ── Text colours ── */
[data-style="mint"] .player-name,
[data-style="mint"] .diamond-pos-name { color: #f8eedc; font-family: 'DM Serif Display', serif; }

[data-style="mint"] .player-stat,
[data-style="mint"] .stat-value { color: rgba(245,200,140,.90); font-family: 'DM Serif Display', serif; font-style: italic; }

[data-style="mint"] .player-card.tier-elite .player-stat,
[data-style="mint"] .player-card.tier-elite .stat-value,
[data-style="mint"] .expanded-draft-card.tier-elite .player-stat,
[data-style="mint"] .expanded-draft-card.tier-elite .stat-value { color: rgba(61,214,160,.95); }

[data-style="mint"] .player-card.tier-great .player-stat,
[data-style="mint"] .player-card.tier-great .stat-value,
[data-style="mint"] .expanded-draft-card.tier-great .player-stat,
[data-style="mint"] .expanded-draft-card.tier-great .stat-value { color: rgba(61,214,160,.88); }

[data-style="mint"] .player-card.tier-good .player-stat,
[data-style="mint"] .player-card.tier-good .stat-value,
[data-style="mint"] .expanded-draft-card.tier-good .player-stat,
[data-style="mint"] .expanded-draft-card.tier-good .stat-value { color: rgba(195,158,100,.88); }

[data-style="mint"] .player-plus { color: rgba(245,200,140,.90); font-family: 'DM Serif Display', serif; font-style: italic; }
[data-style="mint"] .player-card.tier-elite .player-plus { color: rgba(61,214,160,.95); }
[data-style="mint"] .player-card.tier-great .player-plus { color: rgba(61,214,160,.88); }
[data-style="mint"] .player-card.tier-good .player-plus  { color: rgba(195,158,100,.88); }

[data-style="mint"] .player-pos,
[data-style="mint"] .slot-box-pos {
  color: rgba(61,214,160,.80);
  border-color: rgba(61,214,160,.25);
  background: rgba(61,214,160,.06);
  border-radius: 4px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
}
[data-style="mint"] .player-year    { color: rgba(210,185,145,.52); font-family: 'Nunito', sans-serif; }
[data-style="mint"] .player-stats   { color: rgba(195,160,110,.60); font-family: 'Nunito', sans-serif; }

[data-style="mint"] .record-banner  { color: rgba(107,58,31,.90); font-family: 'DM Serif Display', serif; font-style: italic; }
[data-style="mint"] .lede           { color: rgba(61,214,160,.55); font-family: 'Nunito', sans-serif; font-weight: 700; }
[data-style="mint"] .brand          { font-family: 'DM Serif Display', serif; color: #f8eedc; }
[data-style="mint"] .manager-name   { font-family: 'DM Serif Display', serif; color: #f8eedc; }
[data-style="mint"] .manager-record { color: rgba(210,185,145,.55); font-family: 'Nunito', sans-serif; }
[data-style="mint"] .modal-title    { font-family: 'DM Serif Display', serif; color: #f8eedc; }
[data-style="mint"] .section-label,
[data-style="mint"] .mono-caps      { color: rgba(61,214,160,.45); font-family: 'Nunito', sans-serif; font-weight: 700; }
[data-style="mint"] .lineup-card-label,
[data-style="mint"] .lineup-group-header { color: rgba(210,185,145,.55); font-family: 'Nunito', sans-serif; font-weight: 700; }
[data-style="mint"] .award-name     { font-family: 'DM Serif Display', serif; color: #f8eedc; }
[data-style="mint"] .postseason-round-label { color: rgba(61,214,160,.80); font-family: 'Nunito', sans-serif; font-weight: 800; }
[data-style="mint"] .opp-header     { color: rgba(210,185,145,.50); font-family: 'Nunito', sans-serif; }
[data-style="mint"] .teammates-line { color: rgba(195,160,110,.55); font-family: 'Nunito', sans-serif; }
[data-style="mint"] .hc-description,
[data-style="mint"] .hc-situation   { color: rgba(210,185,145,.65); font-family: 'Nunito', sans-serif; }

[data-style="mint"] .slot-box-name   { color: #f8eedc; font-family: 'DM Serif Display', serif; }
[data-style="mint"] .slot-box-stats  { color: rgba(195,160,110,.65); font-family: 'Nunito', sans-serif; }
[data-style="mint"] .slot-box-tag    { color: rgba(195,160,110,.50); font-family: 'Nunito', sans-serif; }
[data-style="mint"] .slot-box-plus   { color: rgba(61,214,160,.35); font-family: 'Nunito', sans-serif; }

[data-style="mint"] .settings-option-label { color: #f8eedc; font-family: 'Nunito', sans-serif; font-weight: 800; }
[data-style="mint"] .settings-option-desc  { color: rgba(107,58,31,.65); font-family: 'Nunito', sans-serif; font-weight: 600; }
[data-style="mint"] .hc-player-name         { font-family: 'DM Serif Display', serif; color: #f8eedc; }
[data-style="mint"] .hc-player-meta         { color: rgba(195,160,110,.55); font-family: 'Nunito', sans-serif; }
[data-style="mint"] .ps-stats-section-label { color: rgba(61,214,160,.45); font-family: 'Nunito', sans-serif; font-weight: 700; }
[data-style="mint"] .roster-section-label   { color: rgba(61,214,160,.45); font-family: 'Nunito', sans-serif; font-weight: 700; }
[data-style="mint"] .postseason-mvp-tile-name { font-family: 'DM Serif Display', serif; color: #f8eedc; }
[data-style="mint"] .stat-cell-label        { color: rgba(195,160,110,.55); font-family: 'Nunito', sans-serif; }
[data-style="mint"] .lineup-group-count     { color: rgba(210,185,145,.50); font-family: 'Nunito', sans-serif; }
[data-style="mint"] .modal-section-label    { color: rgba(61,214,160,.45); font-family: 'Nunito', sans-serif; font-weight: 700; }
[data-style="mint"] .manager-rating-line,
[data-style="mint"] .manager-connections-line { color: rgba(210,185,145,.55); font-family: 'Nunito', sans-serif; }
[data-style="mint"] .position-section-header .pos-name { color: rgba(61,214,160,.70); font-family: 'Nunito', sans-serif; font-weight: 700; }
[data-style="mint"] .natural,
[data-style="mint"] .roll-card,
[data-style="mint"] .result-tab,
[data-style="mint"] .player-search-input    { font-family: 'Nunito', sans-serif; }
[data-style="mint"] .expanded-draft-card-tag { color: rgba(195,160,110,.55); font-family: 'Nunito', sans-serif; }
[data-style="mint"] .real-awards-line       { color: rgba(195,160,110,.60); font-family: 'Nunito', sans-serif; }
[data-style="mint"] .lineup-group-name      { font-family: 'Nunito', sans-serif; color: rgba(210,185,145,.55); font-weight: 700; }

/* ── Shimmer (none — replaced by glow pulse on elite) ── */
[data-style="mint"] .shimmer-overlay::before { display: none; }


/* ── Mint background elements ── */
/* ── 1. Body texture — subtle warm diamond crosshatch (corset reference) ── */
.mint-texture{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(45deg,  rgba(107,58,31,.028) 0px, transparent 1px, transparent 18px, rgba(107,58,31,.028) 19px),
    repeating-linear-gradient(-45deg, rgba(107,58,31,.028) 0px, transparent 1px, transparent 18px, rgba(107,58,31,.028) 19px);
}

/* ── 2. Warm café ambient glow — like interior light from above ── */
.mint-cafe-glow{
  position:fixed;top:0;left:0;right:0;height:45%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 80% 100% at 50% 0%,rgba(200,130,60,.07) 0%,transparent 70%);
}

/* ── 3. String lights — top of viewport ── */
.mint-lights{
  position:fixed;top:0;left:0;right:0;height:4px;pointer-events:none;z-index:0;
}
/* The string itself */
.mint-lights::before{
  content:'';position:absolute;top:8px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(180,140,60,.25) 10%,rgba(180,140,60,.25) 90%,transparent);
}
/* Individual bulbs — via multiple box-shadows on a tiny element */
.mint-lights::after{
  content:'';position:absolute;top:5px;left:5%;
  width:4px;height:4px;border-radius:50%;
  background:rgba(255,200,80,.70);
  box-shadow:
    /* warm amber bulbs */
    calc(7vw * 1)  0px 6px 3px rgba(255,200,80,.35),  calc(7vw * 1)  0 0 0 rgba(255,200,80,.70),
    calc(7vw * 2)  0px 5px 3px rgba(255,170,60,.30),   calc(7vw * 2)  0 0 0 rgba(255,170,60,.65),
    calc(7vw * 3)  0px 6px 3px rgba(255,200,80,.35),   calc(7vw * 3)  0 0 0 rgba(255,200,80,.70),
    calc(7vw * 4)  0px 5px 3px rgba(255,185,70,.32),   calc(7vw * 4)  0 0 0 rgba(255,185,70,.68),
    calc(7vw * 5)  0px 6px 3px rgba(61,214,160,.25),   calc(7vw * 5)  0 0 0 rgba(61,214,160,.55),  /* mint bulb */
    calc(7vw * 6)  0px 5px 3px rgba(255,200,80,.35),   calc(7vw * 6)  0 0 0 rgba(255,200,80,.70),
    calc(7vw * 7)  0px 6px 3px rgba(255,170,60,.30),   calc(7vw * 7)  0 0 0 rgba(255,170,60,.65),
    calc(7vw * 8)  0px 5px 3px rgba(255,200,80,.35),   calc(7vw * 8)  0 0 0 rgba(255,200,80,.70),
    calc(7vw * 9)  0px 6px 3px rgba(61,214,160,.25),   calc(7vw * 9)  0 0 0 rgba(61,214,160,.55),  /* mint bulb */
    calc(7vw * 10) 0px 5px 3px rgba(255,185,70,.32),   calc(7vw * 10) 0 0 0 rgba(255,185,70,.68),
    calc(7vw * 11) 0px 6px 3px rgba(255,200,80,.35),   calc(7vw * 11) 0 0 0 rgba(255,200,80,.70),
    calc(7vw * 12) 0px 5px 3px rgba(255,170,60,.30),   calc(7vw * 12) 0 0 0 rgba(255,170,60,.65);
  animation:mint-lights-flicker 8s ease-in-out infinite;
}
@keyframes mint-lights-flicker{
  0%,100%{opacity:1}
  15%{opacity:.85}
  16%{opacity:1}
  55%{opacity:.95}
  56%{opacity:.70}
  57%{opacity:1}
}

/* ── 4. Squirrel tail silhouette — large soft shape bottom-right ── */
.mint-tail{
  position:fixed;bottom:0;right:-12%;
  width:55vmin;height:55vmin;
  border-radius:50% 40% 60% 45%;
  background:radial-gradient(ellipse at 40% 40%,rgba(130,80,40,.09) 0%,rgba(107,58,31,.05) 45%,transparent 70%);
  z-index:0;pointer-events:none;
  filter:blur(30px);
  animation:mint-tail-sway 12s ease-in-out infinite;
}
@keyframes mint-tail-sway{
  0%,100%{transform:rotate(-4deg) scale(1)}
  50%{transform:rotate(4deg) scale(1.04)}
}

/* ── 5. Floating symbols — squirrel, café, baking, chocolate ── */
.mint-symbol{
  position:fixed;z-index:1;pointer-events:none;user-select:none;
  
  animation:mint-symbol-drift ease-in-out infinite;
}
@keyframes mint-symbol-drift{
  0%,100%{transform:translateY(0) rotate(-3deg);opacity:.12}
  50%{transform:translateY(-12px) rotate(3deg);opacity:.22}
}

/* ── 6. Acorn/clover scatter — small, very faint, static ── */
.mint-scatter{
  position:fixed;z-index:1;pointer-events:none;user-select:none;
  font-size:11px;opacity:.07;
}

/* ── 7. Crescent moons — schedule aesthetic ── */
.mint-moon{
  position:fixed;z-index:0;pointer-events:none;user-select:none;
  font-size:13px;opacity:.10;
  animation:mint-moon-pulse ease-in-out infinite;
}
@keyframes mint-moon-pulse{
  0%,100%{opacity:.08;transform:scale(1)}
  50%{opacity:.14;transform:scale(1.1)}
}

/* ── 8. Chocolate drip strip — very top edge ── */
.mint-choc-drip{
  position:fixed;top:0;left:0;right:0;height:3px;pointer-events:none;z-index:0;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(107,58,31,.40) 15%,
    rgba(61,214,160,.60) 30%,
    rgba(107,58,31,.70) 45%,
    rgba(107,58,31,.70) 55%,
    rgba(61,214,160,.60) 70%,
    rgba(107,58,31,.40) 85%,
    transparent 100%
  );
}

/* ── 9. Vignette ── */
.mint-vign{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 90% 65% at 50% 40%,transparent 40%,rgba(18,6,2,.68) 100%);
}

/* ── Card mock ── */
.card{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:10;
  background:linear-gradient(160deg,#2e1a0e,#271309);
  border:1px solid rgba(107,58,31,.65);
  border-top:3px solid transparent;
  background-image:
    linear-gradient(160deg,#2e1a0e,#271309),
    linear-gradient(90deg,rgba(61,214,160,.55) 0%,rgba(61,214,160,.80) 18%,rgba(107,58,31,.95) 45%,rgba(107,58,31,.95) 55%,rgba(61,214,160,.80) 82%,rgba(61,214,160,.55) 100%);
  background-origin:border-box;
  background-clip:padding-box,border-box;
  border-radius:8px;
  padding:20px 28px;
  text-align:center;
  max-width:320px;
  animation:mint-pulse 4s ease-in-out infinite;
}
@keyframes mint-pulse{
  0%,100%{box-shadow:0 0 14px rgba(61,214,160,.08),0 0 6px rgba(107,58,31,.18)}
  50%{box-shadow:0 0 28px rgba(61,214,160,.18),0 0 14px rgba(107,58,31,.28),0 0 40px rgba(61,214,160,.06)}
}
.card h2{font-size:22px;font-weight:700;color:#f8eedc;font-family:'Georgia',serif;font-style:italic;margin-bottom:6px}
.card p{font-size:10px;color:rgba(61,214,160,.55);letter-spacing:.16em;text-transform:uppercase}


/* ── Café storefront ── */
.mint-cafe{
  position:fixed;bottom:0;left:0;right:0;height:max(100px, 9vw);pointer-events:none;z-index:0;
}
.mint-cafe svg{width:100%;height:100%;display:block;}

/* Window glow animation */
@keyframes mint-candle-flicker{
  0%,100%{opacity:.85}
  25%{opacity:.95}
  50%{opacity:.78}
  75%{opacity:.90}
  87%{opacity:.72}
}
.cafe-window-glow{animation:mint-candle-flicker 4s ease-in-out infinite}
.cafe-window-glow-2{animation:mint-candle-flicker 5.5s ease-in-out infinite;animation-delay:-2s}
.cafe-window-glow-3{animation:mint-candle-flicker 3.8s ease-in-out infinite;animation-delay:-1s}

/* Coffee steam */
@keyframes mint-steam{
  0%{transform:translateY(0) scaleX(1);opacity:.55}
  50%{transform:translateY(-14px) scaleX(1.3);opacity:.30}
  100%{transform:translateY(-26px) scaleX(.8);opacity:0}
}
.cafe-steam-1{animation:mint-steam 2.8s ease-out infinite}
.cafe-steam-2{animation:mint-steam 2.8s ease-out infinite;animation-delay:-.9s}
.cafe-steam-3{animation:mint-steam 2.8s ease-out infinite;animation-delay:-1.8s}

/* ── Swatches ── */
.swatch-mint-el { background: rgba(107,58,31,.22);  border: 1px solid rgba(107,58,31,.62); }
.swatch-mint-gr { background: rgba(61,180,140,.18);  border: 1px solid rgba(61,180,140,.52); }
.swatch-mint-go { background: rgba(180,155,110,.14); border: 1px solid rgba(180,155,110,.42); }

/* ── Badge Legend Panel ───────────────────────────────────────── */
.badge-legend {
  margin-top: 18px;
  background: var(--void-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  overflow: hidden;
}
.badge-legend-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.badge-legend-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gray-dim);
}
.badge-legend-toggle {
  background: none;
  border: none;
  color: var(--gray-dim);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.badge-legend-toggle:hover { color: var(--accent); }
.badge-legend-body {
  padding: 14px 16px 10px;
}
.badge-legend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
@media (max-width: 700px) { .badge-legend-grid { grid-template-columns: 1fr; } }
.badge-legend-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.badge-legend-name {
  flex-shrink: 0;
  font-size: 0.65rem;
  white-space: nowrap;
}
.badge-legend-desc {
  font-size: 0.72rem;
  color: var(--gray-mid);
  line-height: 1.4;
}
/* Coming soon badges */
.groundball-badge, .shutdown-badge {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.12);
}
/* Proper groundball and shutdown badge styles */
.groundball-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--void); background: #7a9a50;
  border-radius: 2px; padding: 1px 5px; align-self: flex-start;
  border: none;
}
.shutdown-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--white); background: #9e2020;
  border-radius: 2px; padding: 1px 5px; align-self: flex-start;
  border: none;
}
.badge-legend-tagline {
  margin: 12px 0 4px;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--gray-dim);
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 10px;
}
/* Real Teammates / Battery Mates — use neutral color in legend */
.teammates-badge {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.battery-badge {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ── Settings Drawer ──────────────────────────────────────────── */
.settings-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.settings-drawer-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.settings-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 320px;
  max-width: 90vw;
  background: var(--void-2);
  border-left: 1px solid rgba(255,255,255,0.08);
  z-index: 901;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
}
.settings-drawer.open {
  transform: translateX(0);
}
.settings-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.settings-drawer-title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-primary);
}
.settings-drawer-close {
  background: none;
  border: none;
  color: var(--gray-dim);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.settings-drawer-close:hover { color: var(--text-primary); }
.settings-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
}
.settings-drawer-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gray-dim);
  padding: 0 20px 8px;
  text-transform: uppercase;
}
.settings-drawer-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 20px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.settings-drawer-item:hover { background: rgba(255,255,255,0.04); }
.settings-drawer-item-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.settings-drawer-item-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-drawer-item-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}
.settings-drawer-item-desc {
  font-size: 0.70rem;
  color: var(--gray-dim);
  line-height: 1.3;
}
.settings-drawer-item-arrow {
  color: var(--gray-dim);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.settings-drawer-item--soon {
  opacity: 0.45;
  cursor: default;
}
.settings-drawer-item--soon:hover { background: none; }
.settings-drawer-coming-soon {
  font-size: 0.60rem;
  font-weight: 600;
  color: var(--gray-dim);
  letter-spacing: 0.05em;
  margin-left: 6px;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ── How to Play Modal ────────────────────────────────────────── */
.modal-panel--wide {
  max-width: 680px;
}
.htp-section-label {
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--gray-dim);
  text-transform: uppercase;
  margin: 14px 0 6px;
}
.htp-tier-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 12px;
  border-radius: 5px;
  overflow: hidden;
}
.htp-tier-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
}
.htp-tier-elite { background: rgba(201,164,85,0.12); border-left: 3px solid var(--tier-elite); }
.htp-tier-great { background: rgba(160,127,209,0.12); border-left: 3px solid var(--tier-great); }
.htp-tier-good  { background: rgba(95,191,122,0.12);  border-left: 3px solid var(--tier-good); }
.htp-tier-none  { background: rgba(255,255,255,0.03); border-left: 3px solid rgba(255,255,255,0.12); }
.htp-tier-name {
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 80px;
  color: var(--text-primary);
}
.htp-tier-elite .htp-tier-name { color: var(--tier-elite); }
.htp-tier-great .htp-tier-name { color: var(--tier-great); }
.htp-tier-good  .htp-tier-name { color: var(--tier-good); }
.htp-tier-desc {
  font-size: 0.75rem;
  color: var(--gray-mid);
}

/* ── Reduce Motion Toggle ─────────────────────────────────────── */
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  gap: 16px;
}
.settings-toggle-text {
  flex: 1;
}
.settings-toggle-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.settings-toggle-desc {
  font-size: 0.70rem;
  color: var(--gray-dim);
}
.settings-toggle-btn {
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
  padding: 0;
}
.settings-toggle-btn.active {
  background: var(--accent);
  border-color: var(--accent);
}
.settings-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  display: block;
}
.settings-toggle-btn.active .settings-toggle-knob {
  transform: translateX(18px);
}

/* ── Reduce Motion — blanket animation/transition kill ────────── */
.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation: none !important;
  transition: none !important;
}
/* body::before and body::after host the spinning lines and star drift
   on the default theme. .reduce-motion * doesn't catch these since
   they're pseudo-elements of body itself (the reduce-motion element),
   not of its descendants. Must be targeted explicitly. */
body.reduce-motion::before,
body.reduce-motion::after {
  animation: none !important;
  transition: none !important;
}
/* Explicitly target theme background elements which are prepended
   directly to body and may not be caught by the descendant selector
   in some browser implementations */
.reduce-motion .theme-bg-el,
.reduce-motion .theme-bg-el::before,
.reduce-motion .theme-bg-el::after {
  animation: none !important;
  transition: none !important;
  opacity: 0 !important;
}

/* ── Standings ─────────────────────────────────────────────────────────────── */
.standings-division { margin-bottom: 20px; }
.standings-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
  table-layout: fixed;
}
.standings-table th {
  text-align: right; padding: 4px 8px;
  color: var(--gray); font-size: 10px; letter-spacing: 0.08em;
  border-bottom: 1px solid var(--panel-border);
}
.standings-table th.standings-team-header { text-align: left; }
.standings-table td { padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); text-align: right; color: var(--gray); }
.standings-table td.standings-team { text-align: left; color: var(--white); }
.standings-team-header { font-size: 11px; color: var(--gold); letter-spacing: 0.1em; width: 45%; }
.standings-table th:not(.standings-team-header) { width: 7%; }
.standings-team { color: var(--white); min-width: 200px; }
.standings-row-user .standings-team { color: var(--gold); font-weight: 600; }
.standings-you { font-size: 10px; color: var(--gray); font-weight: 400; }
.clinch-marker { font-size: 9px; color: var(--gray); margin-right: 4px; }
.clinch-y { color: #6BFF6B; }
.clinch-w { color: var(--gold); }
.clinch-z { color: #fff; }
.standings-diff-pos { color: #6BFF6B; }
.standings-diff-neg { color: var(--red); }
.standings-legend {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--panel-border);
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 10px; color: var(--gray);
}
.standings-legend-note { font-style: italic; }

/* ── Schedule / Game Log ───────────────────────────────────────────────────── */
.schedule-month-tabs {
  display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap;
}
.schedule-month-tab {
  padding: 5px 12px; font-size: 11px; letter-spacing: 0.06em;
  background: transparent; border: 1px solid var(--panel-border);
  color: var(--gray); cursor: pointer; border-radius: 2px;
  transition: border-color 0.15s, color 0.15s;
}
.schedule-month-tab:hover { border-color: var(--gold); color: var(--gold); }
.schedule-month-tab.active { border-color: var(--gold); color: var(--gold); background: rgba(201,164,85,0.08); }

.schedule-game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.schedule-game-card {
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 3px; padding: 8px 10px; font-size: 11px;
  display: flex; flex-direction: column; gap: 2px;
}
.schedule-game-card.game-win { border-left: 3px solid var(--gold); }
.schedule-game-card.game-loss { border-left: 3px solid var(--red); }
.sgc-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; }
.sgc-w { color: var(--gold); }
.sgc-l { color: var(--red); }
.sgc-score { font-size: 14px; font-weight: 600; color: var(--white); }
.sgc-opp { color: var(--white); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sgc-era { color: var(--gray); font-size: 10px; }
.sgc-pitchers { color: var(--gray); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sgc-num { color: var(--gray); font-size: 9px; margin-top: 2px; }

/* Bracket tree wrap — override lineup-card padding so 1312px bracket has room */
#postseason-bracket-tree-wrap { padding: 16px 0 20px 0; overflow: hidden; }
#postseason-bracket-tree-wrap .lineup-card-label { padding: 0 20px 12px; }
#postseason-bracket-tree { padding: 0 20px; overflow-x: auto; }
#postseason-bracket-tree .ps-bracket-scroll { overflow-x: auto; }
#postseason-bracket-footer { padding: 0 20px; }
#postseason-bracket-viewing-bar { padding: 0 20px; }
.ps-bracket-scroll { width: 100%; overflow-x: auto; }
.ps-bracket-inner { min-width: 1312px; width: 1312px; display: flex; flex-direction: column; gap: 8px; margin: 0 auto; }

.ps-rh { display: flex; width: 1312px; margin-bottom: 4px; justify-content: center; }
.ps-rhl { width: 160px; flex-shrink: 0; font-size: 9px; color: var(--gray); letter-spacing: 0.07em; text-align: center; }
.ps-rhl.active { color: var(--gold); font-weight: 600; }
.ps-rconn { width: 32px; flex-shrink: 0; }

.ps-body { display: flex; align-items: stretch; width: 1312px; justify-content: center; }
.ps-col { width: 160px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-around; gap: 14px; padding: 4px 0; }
.ps-col.ws-col { justify-content: center; }
.ps-cconn { width: 32px; flex-shrink: 0; position: relative; align-self: stretch; }
.ps-cconn svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Series boxes */
.ps-sbox { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 4px; overflow: hidden; }
.ps-sbox.ps-done { opacity: 0.65; }
.ps-sbox.ps-user { border-color: var(--gold); }
.ps-sbox.ps-viewing { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.ps-sstat { font-size: 9px; padding: 3px 8px 2px; color: var(--gray); letter-spacing: 0.03em; }
.ps-sstat.ps-live { color: var(--gold); font-weight: 600; }
.ps-sstat.ps-won { color: #6BFF6B; font-weight: 600; }
.ps-tbd { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 4px; overflow: hidden; }
.ps-tbd .ps-sstat { color: var(--gray); }

/* Team rows */
.ps-trow { display: flex; align-items: center; padding: 5px 8px; gap: 4px; cursor: pointer; transition: background 0.1s; }
.ps-trow:hover { background: var(--void-2); }
.ps-trow.ps-elim { opacity: 0.35; }
.ps-trow.ps-win .ps-tw { color: #6BFF6B; font-weight: 600; }
.ps-trow.ps-champ .ps-tn { color: var(--gold); font-weight: 700; }
.ps-trow.ps-champ .ps-tw { color: var(--gold); font-weight: 700; }
.ps-trow.ps-user-row .ps-tn { color: var(--gold); font-weight: 600; }
.ps-trow.ps-user-row .ps-tw { color: var(--gold); }
.ps-ts { font-size: 9px; color: var(--gray); width: 11px; flex-shrink: 0; }
.ps-tn { font-size: 11px; color: var(--white); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-tw { font-size: 11px; font-weight: 500; color: var(--gray); width: 14px; text-align: right; flex-shrink: 0; }
.ps-ta { font-size: 9px; color: var(--gray); width: 12px; text-align: center; flex-shrink: 0; visibility: hidden; }
.ps-ta.show { visibility: visible; }
.ps-bye { padding: 4px 8px; font-size: 9px; color: var(--gray); font-style: italic; }

/* Footer */
.ps-bracket-footer { display: flex; align-items: flex-start; justify-content: center; width: 1312px; margin: 0 auto; }
.ps-bracket-footer--mobile { display: none; }
.ps-viewing-bar--mobile { display: none; }
.ps-hidden { display: none !important; }
.ps-footer-left { display: none; }
.ps-champ-banner {
  width: 224px; flex-shrink: 0;
  border: 2px solid var(--gold); border-radius: 6px;
  padding: 14px 16px; text-align: center;
  background: rgba(201,164,85,0.07);
  overflow: hidden; position: relative;
}
.ps-champ-banner::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(201,164,85,0.2), transparent);
  animation: psShimmer 2.2s ease-in-out infinite;
}
@keyframes psShimmer { 0% { left: -100%; } 100% { left: 200%; } }
.ps-champ-icon { font-size: 20px; margin-bottom: 4px; }
.ps-champ-label { font-size: 8px; letter-spacing: 0.22em; color: var(--gold); margin-bottom: 6px; font-weight: 600; }
.ps-champ-team { font-size: 19px; font-weight: 700; color: var(--gold); line-height: 1.1; }
.ps-champ-record { font-size: 10px; color: var(--gray); margin-top: 5px; }

/* Viewing bar */
.ps-viewing-bar { width: 1312px; text-align: center; margin: 10px auto 0; }
.ps-viewing-bar span {
  font-size: 11px; color: var(--gray);
  padding: 5px 14px; background: var(--void-2);
  border: 1px solid var(--panel-border);
  border-radius: 3px; display: inline-block;
}
.ps-viewing-bar span strong { color: var(--gold); }

/* ── Setup V2 ─────────────────────────────────────────────────────────────
   All selectors scoped to .setup-v2 or .setup-v1-hidden.
   Zero bleed into existing styles.
──────────────────────────────────────────────────────────────────────── */

/* Hide the old V1 elements completely */
.setup-v1-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.setup-v2 {
  max-width: 880px;
  margin: 0 auto;
}

#screen-setup .void-panel {
  padding: 20px;
  margin-top: 16px;
}

/* Mode slider */
.sv2-mode-wrap {
  background: #1a1a1a;
  border-radius: 8px;
  padding: 3px;
  display: flex;
  position: relative;
  width: 100%;
  user-select: none;
  margin-bottom: 18px;
}
.sv2-mode-hl {
  position: absolute;
  top: 3px; bottom: 3px;
  background: #2e2e2e;
  border-radius: 6px;
  transition: left 0.18s ease, width 0.18s ease;
  pointer-events: none;
}
.sv2-mode-btn {
  flex: 1;
  padding: 9px 10px;
  color: var(--gray);
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color 0.15s;
  white-space: nowrap;
  text-align: center;
  border-radius: 6px;
  line-height: 1;
}
.sv2-mode-btn.active {
  color: var(--white);
  font-weight: 600;
}
.mode-label-short { display: none; }

/* Hero banner */
.sv2-hero {
  box-sizing: border-box;
  width: 100%;
  height: 160px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.sv2-hero-ph {
  color: var(--gray-dim);
  font-size: 10px;
  letter-spacing: 0.08em;
}
.sv2-hero-info {
  display: none;
  flex-direction: column;
}
.sv2-hero-info.show { display: flex; }
.sv2-hero-label {
  font-size: 20px;
  color: var(--gold);
  letter-spacing: 0.04em;
  line-height: 1;
}
.sv2-hero-meta {
  font-size: 10px;
  color: var(--gray);
  letter-spacing: 0.06em;
  margin-top: 5px;
}
/* Collage image zone — fades from right, transparent on left */
.sv2-hero-img {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: clamp(200px, 65%, 580px);
  background-size: auto 100%;
  background-position: right bottom;
  background-repeat: no-repeat;
  opacity: 0.25;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%);
  mask-image: linear-gradient(to right, transparent 0%, black 20%);
}
.sv2-hero-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}


/* Era card grid */
.sv2-era-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
  margin-bottom: 16px;
}
@media (max-width: 600px) { .sv2-era-grid { grid-template-columns: repeat(4, 1fr); } }

/* Franchise grid — same card format, 6 columns */
.sv2-franchise-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  margin-bottom: 16px;
}
@media (max-width: 600px) { .sv2-franchise-grid { grid-template-columns: repeat(4, 1fr); } }

/* Shared card style (era + franchise) */
.sv2-card {
  background: var(--void-2);
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s;
  position: relative;
  overflow: hidden;
  padding-bottom: 125%;
  height: 0;
}
.sv2-card:hover { border-color: rgba(201, 164, 85, 0.3); }
.sv2-card.sel   { border: 2px solid var(--gold); }
.sv2-card-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 4px 3px;
}
.sv2-card-bg    { position: absolute; inset: 0; }
.sv2-card-dbg   {
  position: absolute;
  top: 4px; left: 0; right: 0;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  color: rgba(201, 164, 85, 0.07);
  line-height: 1;
}
/* Collage image inside card */
.sv2-card-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  opacity: 0.38;
}
.sv2-card.sel .sv2-card-img { opacity: 0.7; }

.sv2-fc-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 45%;
  height: auto;
  opacity: 0.12;
  filter: grayscale(1) brightness(2);
  pointer-events: none;
  z-index: 1;
}
.sv2-card.sel .sv2-fc-logo { opacity: 0.18; }
.sv2-card-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}
.sv2-card.sel .sv2-card-label { color: var(--gold); }
.sv2-card-sub {
  font-size: 7px;
  color: var(--gray-dim);
  position: relative;
  z-index: 1;
  margin-top: 1px;
}

/* Controls */
.sv2-controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 14px;
  min-height: 67px;
}
@media (max-width: 600px) { .sv2-controls-grid { grid-template-columns: 1fr; } }

.sv2-sec-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 7px;
}

/* Difficulty chips */
.sv2-diff-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.sv2-diff-chip {
  background: var(--void-2);
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  padding: 9px 4px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s;
}
.sv2-diff-chip:hover { border-color: var(--panel-border-hover); }
.sv2-diff-label { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 2px; }
.sv2-diff-sub   { font-size: 8px; color: var(--gray-dim); }
.sv2-diff-chip.easy.sel  { border-color: var(--green); background: rgba(95,191,122,0.06); }
.sv2-diff-chip.easy  .sv2-diff-label { color: var(--green); }
.sv2-diff-chip.med.sel   { border-color: var(--gold);  background: rgba(201,164,85,0.06); }
.sv2-diff-chip.med   .sv2-diff-label { color: var(--gold); }
.sv2-diff-chip.hard.sel  { border-color: #d4914a; background: rgba(212,145,74,0.06); }
.sv2-diff-chip.hard  .sv2-diff-label { color: #d4914a; }
.sv2-diff-chip.brutal.sel { border-color: var(--red); background: rgba(192,82,74,0.06); }
.sv2-diff-chip.brutal .sv2-diff-label { color: var(--red); }

/* Draft pool chips */
.sv2-pool-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.sv2-pool-chip {
  background: var(--void-2);
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  padding: 0 12px;
  cursor: pointer;
  font-size: 10px;
  color: var(--gray);
  letter-spacing: 0.04em;
  transition: all 0.15s;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.sv2-pool-chip.sel { border-color: var(--gold); color: var(--gold); background: rgba(201,164,85,0.06); }
.sv2-pool-chip:hover:not(.sel) { border-color: var(--panel-border-hover); color: var(--white); }

/* Park chips */
.sv2-divider { border: none; border-top: 1px solid var(--panel-border); margin: 14px 0; }
.sv2-park-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-bottom: 10px;
}
@media (max-width: 600px) { .sv2-park-grid { grid-template-columns: repeat(3, 1fr); } }

.sv2-park-chip {
  background: var(--void-2);
  border: 1px solid var(--panel-border);
  border-radius: 2px;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.15s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.sv2-park-chip:hover { border-color: rgba(201, 164, 85, 0.3); }
.sv2-park-chip.sel   { border: 2px solid var(--gold); }
.sv2-park-name { font-size: 10px; color: var(--white); }
.sv2-park-chip.sel .sv2-park-name { color: var(--gold); }
.sv2-park-abbr { font-size: 9px; color: var(--gray-dim); letter-spacing: 0.04em; }
.sv2-park-chip.sel .sv2-park-abbr { color: rgba(201,164,85,0.6); }

/* Bottom row */
.sv2-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.sv2-nav-btns { display: flex; gap: 8px; }
.sv2-start-btn {
  padding: 11px 32px;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0.1em;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.15s;
}
.sv2-start-btn:hover  { background: rgba(201, 164, 85, 0.08); }
.sv2-start-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── Franchise hero banner ───────────────────────────────────────────────── */
/* Text layer */
.sv2-fc-hero-text {
  position: relative;
  z-index: 2;
  padding: 0 16px;
  display: flex;
  align-items: center;
  width: 100%;
}
.sv2-fc-hero-content {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Logo in hero */
.sv2-fc-hero-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  opacity: 0.9;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.8));
  flex-shrink: 0;
}
/* City name — small label above team name */
.sv2-fc-hero-city {
  font-size: 10px;
  color: var(--gray);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
/* Team name — large gold */
.sv2-fc-hero-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9);
}

/* ── Manager screen search (sandbox mode) ───────────────────────────────── */
.manager-search-field {
  position: relative;
  margin: 12px 0 4px;
}
.manager-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--void);
  border: 1px solid var(--panel-border);
  border-top: none;
  z-index: 20;
  max-height: 200px;
  overflow-y: auto;
}
.manager-search-option {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--white);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.manager-search-option:hover,
.manager-search-option.highlighted { background: var(--void); color: var(--gold); }
.manager-search-option-cat {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border-radius: 2px;
  flex-shrink: 0;
}
.manager-search-option-cat.over  { background: var(--gold); color: var(--void); }
.manager-search-option-cat.under { background: #c0392b;    color: #fff; }
.manager-search-option-cat.neutral { background: var(--panel-border); color: var(--gray); }
.manager-search-option-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.manager-search-option-name { font-size: 12px; color: var(--white); }
.manager-search-option-record { font-size: 10px; color: var(--gray); letter-spacing: 0.05em; }
.manager-search-option:hover .manager-search-option-name,
.manager-search-option.highlighted .manager-search-option-name { color: var(--gold); }