/* ═══════════════════════════════════════════════
   ROOT & RESET
═══════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  /* Core palette */
  --void:       #0A0E14;
  --deep:       #0F1923;
  --surface:    #16212D;
  --raise:      #1C2B38;
  --lift:       #243444;

  /* Red accent */
  --red:        #FF4655;
  --red2:       #D93444;
  --red-glow:   rgba(255,70,85,.22);
  --red-dim:    rgba(255,70,85,.12);
  --red-border: rgba(255,70,85,.38);

  /* Teal accent (correct) */
  --teal:       #00C8B4;
  --teal-glow:  rgba(0,200,180,.2);
  --teal-dim:   rgba(0,200,180,.1);
  --teal-border:rgba(0,200,180,.35);

  /* Amber (present) */
  --amber:      #E8A020;
  --amber-dim:  rgba(232,160,32,.12);

  /* Text */
  --cream:      #ECE8E1;
  --muted:      rgba(236,232,225,.45);
  --faint:      rgba(236,232,225,.18);

  /* Gold */
  --gold:       #F0C030;
  --silver:     #A8B8C4;
  --bronze:     #B87840;

  /* Geometry */
  --cut: 14px;   /* standard corner cut */
  --cut-sm: 8px;
  --cut-lg: 20px;
}

html, body {
  width: 100%;
  height: 100%;
  background: var(--void);
  font-family: 'Barlow Condensed', sans-serif;
  color: var(--cream);
  overflow: hidden;
}

/* ── Angled corner helper ── */
/* Use clip-path for the "Valorant cut corner" look */
.cut-tl  { clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); }
.cut-tr  { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.cut-bl  { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.cut-br  { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.cut-all { clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut)); }
.cut-tr-bl { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }

/* ═══════════════════════════════════════════════
   SCENE
═══════════════════════════════════════════════ */
.scene {
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  user-select: none;
  display: flex;
  flex-direction: column;
  position: relative;
  transform-origin: top left;
}

/* ═══════════════════════════════════════════════
   STANDBY SCREEN
═══════════════════════════════════════════════ */
.standby {
  background: var(--deep);
  border: 1px solid var(--red-border);
  padding: 22px 60px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  position: relative;
}
.standby::before {
  content: ''; position: absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
}
.standby::after {
  content: ''; position: absolute; bottom:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--red-border), transparent);
}
.standby.hidden { display: none; }

.sb-logo {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 88px; letter-spacing: .08em; line-height: 1;
  text-transform: uppercase;
}
.sb-logo em { color: var(--red); font-style: normal; }

.sb-divider {
  width: 500px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--red-border), transparent);
}

.sb-label {
  font-weight: 700; font-size: 18px; letter-spacing: .3em;
  color: var(--muted); text-transform: uppercase; text-align: center;
}

.sb-cmd {
  font-weight: 800; font-size: 34px; letter-spacing: .2em;
  color: var(--red); background: var(--red-dim);
  border: 1px solid var(--red-border);
  padding: 12px 40px;
}

/* ── Setup screen info cards ── */
.sb-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px;
  width: 100%;
}
.sb-cards-3col { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.sb-card {
  background: var(--surface);
  border: 1px solid var(--faint);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  padding: 16px 20px 14px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.sb-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,70,85,.04) 0%, transparent 60%);
  pointer-events: none;
}
.sb-card-shield { border-color: rgba(88,112,216,.3); }
.sb-card-shield::before { background: linear-gradient(135deg, rgba(88,112,216,.07) 0%, transparent 60%); }
.sb-card-shield .sb-card-title { color: #7090E8; }
.sb-card-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--faint);
}
.sb-card-icon {
  font-size: 22px; line-height: 1;
}
.sb-card-title {
  font-size: 12px; font-weight: 900; letter-spacing: .5em;
  color: var(--red); text-transform: uppercase;
}
.sb-card-rows {
  display: flex; flex-direction: column; gap: 7px;
}
.sb-card-row {
  display: flex; align-items: center; gap: 10px;
}
.sb-card-row-icon {
  font-size: 16px; width: 22px; text-align: center; flex-shrink: 0;
}
.sb-ico { display: inline-flex; align-items: center; justify-content: center; }
.sb-card-icon.sb-ico svg { width: 22px; height: 22px; color: var(--red); }
.sb-card-row-icon.sb-ico { font-size: 0; }
.sb-card-row-icon.sb-ico svg { width: 15px; height: 15px; color: var(--muted); }
.sb-card-row-text {
  font-size: 15px; font-weight: 700; letter-spacing: .04em;
  color: var(--muted); line-height: 1.3;
}
.sb-card-row-text em  { font-style: normal; color: var(--cream); font-weight: 800; }
.sb-card-row-text .hi-gold  { color: var(--gold);  font-weight: 900; }
.sb-card-row-text .hi-teal  { color: var(--teal);  font-weight: 900; }
.sb-card-row-text .hi-red   { color: var(--red);   font-weight: 900; }
.sb-card-row-text .hi-cyan  { color: #40C8C0;       font-weight: 900; }

/* ═══════════════════════════════════════════════
   MAIN ROW
═══════════════════════════════════════════════ */
.main-row { display: flex; gap: 10px; align-items: stretch; flex: 1; min-height: 0; }

/* ═══════════════════════════════════════════════
   GAME PANEL
═══════════════════════════════════════════════ */
.game-panel {
  flex: 1; min-width: 0; position: relative;
  background: var(--deep);
  border: 1px solid var(--red-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.game-panel::before {
  content: ''; position: absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--red) 40%, transparent);
  z-index: 1;
}

/* ── Top bar ── */
.g-topbar {
  display: flex; align-items: stretch;
  background: var(--void);
  border-bottom: 1px solid var(--faint);
  position: relative;
}
.g-topbar-logo {
  padding: 16px 32px;
  border-right: 1px solid var(--faint);
  display: flex; align-items: center;
  background: var(--red-dim);
}
.g-topbar-logo .wordmark {
  font-weight: 900; font-size: 38px; letter-spacing: .12em; text-transform: uppercase; line-height: 1;
}
.g-topbar-logo .wordmark em { color: var(--red); font-style: normal; }

.g-topbar-title {
  flex: 1; display: flex; align-items: center; padding: 0 28px;
  font-weight: 700; font-size: 22px; letter-spacing: .28em;
  color: var(--muted); text-transform: uppercase;
}
.g-topbar-title span { color: var(--cream); }

.g-topbar-stats {
  display: flex; align-items: stretch; border-left: 1px solid var(--faint);
}
.g-stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 24px; border-left: 1px solid var(--faint);
  min-width: 90px;
}
.g-stat-lbl { font-size: 13px; font-weight: 800; letter-spacing: .3em; color: var(--muted); text-transform: uppercase; }
.g-stat-val { font-size: 36px; font-weight: 900; color: var(--red); line-height: 1; }

.ws-pill {
  display: flex; align-items: center; gap: 8px; padding: 0 20px;
  border-left: 1px solid var(--faint);
  font-size: 14px; font-weight: 700; letter-spacing: .2em; color: var(--muted);
}
.ws-dot { width: 10px; height: 10px; border-radius:50%; background:#333; transition: background .3s; }
.ws-dot.connected { background: var(--teal); box-shadow: 0 0 10px var(--teal); }
.ws-dot.error     { background: var(--red);  box-shadow: 0 0 10px var(--red); }

.g-mute-btn {
  display: flex; align-items: center; justify-content: center;
  width: 54px;
  border-left: 1px solid var(--faint);
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s;
  user-select: none;
}
.g-mute-btn:hover { background: var(--red-dim); color: var(--cream); }

/* ── Scrambled tiles section ── */
.tiles-section {
  background: linear-gradient(180deg, var(--void) 0%, var(--surface) 100%);
  border-bottom: 1px solid var(--faint);
  padding: 28px 40px 22px;
}
.tiles-label {
  font-size: 16px; font-weight: 800; letter-spacing: .4em; color: var(--muted);
  text-transform: uppercase; margin-bottom: 18px; text-align: center;
}
.tiles-row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.tile-chevrons {
  display: flex; gap: 5px; opacity: .2; flex-shrink: 0;
}
.tile-chevron {
  width: 0; height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}
.tile-chevron.left  { border-right: 18px solid #fff; }
.tile-chevron.right { border-left:  18px solid #fff; }

/* Chevron blink — white pulse, no color change */
@keyframes chevBlink {
  0%,49% { opacity: 1; }
  50%,100%{ opacity: .12; }
}
.tile-chevrons.blinking .tile-chevron {
  animation: chevBlink var(--chev-speed, 1.4s) ease infinite;
  border-right-color: #fff;
  border-left-color:  #fff;
}

/* LEFT side — pulse flows RIGHT → LEFT (child 3 first, child 1 last) */
.tile-chevrons-left.blinking .tile-chevron:nth-child(1) { animation-delay: calc(var(--chev-speed, 1.4s) * .30); }
.tile-chevrons-left.blinking .tile-chevron:nth-child(2) { animation-delay: calc(var(--chev-speed, 1.4s) * .15); }
.tile-chevrons-left.blinking .tile-chevron:nth-child(3) { animation-delay: 0s; }

/* RIGHT side — pulse flows LEFT → RIGHT (child 1 first, child 3 last) */
.tile-chevrons-right.blinking .tile-chevron:nth-child(1) { animation-delay: 0s; }
.tile-chevrons-right.blinking .tile-chevron:nth-child(2) { animation-delay: calc(var(--chev-speed, 1.4s) * .15); }
.tile-chevrons-right.blinking .tile-chevron:nth-child(3) { animation-delay: calc(var(--chev-speed, 1.4s) * .30); }

.scrambled-tiles { display: flex; gap: 8px; justify-content: center; }

/* Valorant-style letter tile */
.s-tile {
  background: linear-gradient(150deg, var(--lift) 0%, var(--raise) 100%);
  border: 1px solid rgba(255,255,255,.14);
  border-bottom: 5px solid rgba(0,0,0,.6);
  position: relative; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; color: var(--cream); letter-spacing: .02em;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  animation: sTileIn .35s cubic-bezier(.2,.8,.3,1.2) backwards;
  box-shadow: 0 6px 22px rgba(0,0,0,.5);
}
@keyframes sTileIn {
  from { transform: translateY(-24px) scale(.7); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.s-tile::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, transparent 100%);
}
.s-val {
  position: absolute; bottom: 5px; right: 8px;
  font-size: 18px; font-weight: 700;
  color: rgba(255,255,255,.38); font-family: 'Barlow', sans-serif;
}

/* ── Ghost / Fake tiles — revealed at 3/4 of timer ── */
@keyframes ghostReveal {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.12) rotate(-3deg); }
  60%  { transform: scale(.95) rotate(2deg); }
  100% { transform: scale(1); }
}
@keyframes ghostPulse {
  0%,100% { box-shadow: 0 0 0 rgba(255,50,50,0), 0 6px 22px rgba(0,0,0,.5); border-color: rgba(255,70,85,.5); }
  50%     { box-shadow: 0 0 18px rgba(255,50,50,.55), 0 6px 22px rgba(0,0,0,.5); border-color: rgba(255,70,85,.9); }
}
.s-tile.ghost-revealed {
  background: linear-gradient(150deg, rgba(100,10,20,.85) 0%, rgba(60,10,15,.9) 100%);
  border-color: rgba(255,70,85,.7);
  color: var(--red);
  animation: ghostReveal .5s cubic-bezier(.2,.8,.3,1.1) forwards, ghostPulse 1.8s ease-in-out 0.5s infinite;
}
.s-tile.ghost-revealed .s-val { color: rgba(255,70,85,.45); }
.s-tile.ghost-revealed::after { background: linear-gradient(180deg, rgba(255,70,85,.12) 0%, transparent 100%); }

/* Daily Challenge — gold tiles */
.s-tile.daily-tile {
  color: var(--gold);
  border-color: rgba(240,192,48,.6);
  background: linear-gradient(150deg, rgba(40,32,8,.95) 0%, rgba(28,22,5,.98) 100%);
  box-shadow: 0 0 12px rgba(240,192,48,.15);
}
.s-tile.daily-tile::after { background: linear-gradient(180deg, rgba(240,192,48,.1) 0%, transparent 100%); }
.s-tile.daily-tile .s-val { color: rgba(240,192,48,.5); }
/* Skull icon badge on ghost tiles */
.s-tile.ghost-revealed::before {
  content: '✕';
  position: absolute; top: 3px; left: 5px;
  font-size: 14px; font-weight: 900; color: rgba(255,70,85,.6);
  line-height: 1; z-index: 2;
}

/* ── Timer section ── */
.timer-section {
  display: flex; align-items: center; gap: 20px;
  padding: 12px 40px;
  background: var(--surface);
  border-bottom: 1px solid var(--faint);
}
.timer-label {
  font-size: 16px; font-weight: 800; letter-spacing: .35em;
  color: var(--muted); text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
}
.timer-track {
  flex: 1; height: 14px; background: var(--void);
  border: 1px solid var(--faint); overflow: hidden; position: relative;
}
.timer-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--red2), var(--red));
  position: relative;
}
.timer-fill::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 6px;
  background: rgba(255,255,255,.6);
}
.timer-fill.green  { background: linear-gradient(90deg, var(--teal), #30E8C0); }
.timer-fill.yellow { background: linear-gradient(90deg, #C08000, var(--amber)); }
.timer-fill.red    { background: linear-gradient(90deg, #AA0010, var(--red)); }

.timer-num {
  font-size: 40px; font-weight: 900; color: var(--cream);
  min-width: 56px; text-align: center; flex-shrink: 0;
  font-variant-numeric: tabular-nums; line-height: 1;
  transition: color .3s;
}
.timer-num.red { color: var(--red); }

@keyframes syncPulse {
  0%, 100% { opacity: .4; letter-spacing: .45em; }
  50%       { opacity: 1;  letter-spacing: .6em;  }
}
.timer-sync {
  font-size: 13px; font-weight: 900; letter-spacing: .45em;
  color: var(--gold); text-transform: uppercase; margin-top: 4px;
  animation: syncPulse .9s ease-in-out infinite;
}

/* ── Hint section ── */
.hint-section {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 12px 40px;
  border-bottom: 1px solid var(--faint);
  flex-wrap: wrap;
}
.hint-label {
  font-size: 15px; font-weight: 800; letter-spacing: .4em; color: var(--muted);
  text-transform: uppercase; flex-shrink: 0;
}
.hint-content { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Category badge */
.hint-cat {
  font-size: 17px; font-weight: 800; letter-spacing: .3em;
  text-transform: uppercase; padding: 7px 22px;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  opacity: 0; transition: opacity .3s;
}
.hint-cat.show {
  opacity: 1;
  animation: hReveal .45s cubic-bezier(.2,.8,.3,1.2);
}
.hint-cat.CAT-AGENT    { background: rgba(255,70,85,.15);  border: 1px solid rgba(255,70,85,.4);   color: var(--red); }
.hint-cat.CAT-MAP      { background: rgba(0,200,180,.12);  border: 1px solid rgba(0,200,180,.35);  color: var(--teal); }
.hint-cat.CAT-WEAPON   { background: rgba(232,160,32,.12); border: 1px solid rgba(232,160,32,.4);  color: var(--amber); }
.hint-cat.CAT-ABILITY  { background: rgba(180,100,255,.12);border: 1px solid rgba(180,100,255,.4); color: #C080FF; }
.hint-cat.CAT-SKIN     { background: rgba(240,192,48,.1);  border: 1px solid rgba(240,192,48,.35); color: var(--gold); }
.hint-cat.CAT-RANK     { background: rgba(168,184,196,.08);border: 1px solid rgba(168,184,196,.3); color: var(--silver); }
.hint-cat.CAT-CALLOUT  { background: rgba(0,200,180,.08);  border: 1px solid rgba(0,200,180,.25);  color: #60D8C8; }
.hint-cat.CAT-TEAM     { background: rgba(255,140,60,.12); border: 1px solid rgba(255,140,60,.4);  color: #FF9040; }
.hint-cat.CAT-TERMS    { background: rgba(255,70,85,.08);  border: 1px solid rgba(255,70,85,.25);  color: var(--muted); }
.hint-cat.CAT-ROLE     { background: rgba(120,80,255,.12); border: 1px solid rgba(120,80,255,.4);  color: #A080FF; }
.hint-cat.CAT-EVENT    { background: rgba(255,34,68,.12);  border: 1px solid rgba(255,34,68,.4);   color: #FF4466; }
.hint-cat.CAT-VALORANT { background: rgba(255,70,85,.08);  border: 1px solid rgba(255,70,85,.25);  color: var(--muted); }

.hint-sep { width: 2px; height: 36px; background: var(--faint); flex-shrink: 0; }
.hint-tiles { display: flex; gap: 6px; }
.h-tile {
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; flex-shrink: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  border: 1px dashed rgba(255,255,255,.35);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.55);
  transition: none;
}
.h-tile.revealed {
  background: var(--teal);
  border: 1px solid var(--teal);
  color: var(--void);
  box-shadow: 0 0 20px var(--teal-glow);
  animation: hReveal .45s cubic-bezier(.2,.8,.3,1.2);
}
@keyframes hReveal {
  from { transform: scale(.5) rotateX(90deg); opacity: 0; }
  to   { transform: scale(1) rotateX(0); opacity: 1; }
}
.h-tile.win-reveal {
  background: var(--red); border-color: var(--red); color: white;
  box-shadow: 0 0 20px var(--red-glow);
  animation: hReveal .35s ease;
}

/* ── Wordle grid section ── */
.grid-section {
  padding: 10px 40px 8px;
  display: flex; justify-content: center; align-items: center;
  flex: 1; min-height: 0; overflow: hidden;
}
.wordle-grid { display: flex; flex-direction: column; gap: 6px; }
.w-row  { display: flex; gap: 6px; align-items: center; }
.row-num {
  width: 26px; text-align: right; font-size: 16px; font-weight: 700;
  color: var(--faint); flex-shrink: 0; margin-right: 4px;
}
.w-tile {
  background: var(--surface);
  border: 1px solid var(--faint);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; color: var(--cream);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  flex-shrink: 0; transition: border-color .15s;
}
.w-tile.active-row { border-color: var(--red-border); }
.w-tile.flip { animation: wFlip .44s ease forwards; }
@keyframes wFlip {
  0%   { transform: rotateX(0); }
  49%  { transform: rotateX(90deg); opacity: .35; }
  100% { transform: rotateX(0); }
}
.w-tile.correct {
  background: var(--teal); border-color: var(--teal); color: var(--void);
  box-shadow: 0 0 16px var(--teal-glow);
}
.w-tile.present {
  background: var(--amber); border-color: var(--amber); color: var(--void);
}
.w-tile.absent {
  background: var(--void); border-color: rgba(255,255,255,.06); color: var(--muted);
}
.w-row.shake { animation: rowShake .38s ease; }
@keyframes rowShake {
  0%,100%{ transform:translateX(0) }
  20%    { transform:translateX(-14px) }
  60%    { transform:translateX(14px) }
  80%    { transform:translateX(-7px) }
}

/* ── Divider ── */
.g-div { height: 1px; background: var(--faint); margin: 0 40px; flex-shrink: 0; }

/* ── Chat feed ── */
.chat-section {
  margin: 8px 40px 10px;
  border: 1px solid var(--faint);
  background: rgba(0,0,0,.3); overflow: hidden;
  flex-shrink: 0;
}
.chat-hdr {
  padding: 5px 18px;
  background: var(--void);
  font-size: 13px; font-weight: 800; letter-spacing: .4em; color: var(--muted);
  text-transform: uppercase; border-bottom: 1px solid var(--faint);
  display: flex; align-items: center; gap: 10px;
}
.chat-hdr::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 10px var(--red);
  animation: liveblink 1.6s ease infinite;
}
@keyframes liveblink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* Single ticker row */
.chat-entries {
  padding: 0 12px;
  height: 38px;
  display: flex; align-items: center;
  overflow: hidden; position: relative;
}
.chat-ticker {
  display: flex; align-items: center; gap: 0;
  white-space: nowrap;
  transition: transform .35s ease;
}
.chat-entry {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 16px 0 0;
  font-size: 19px; font-weight: 700;
}
.chat-entry + .chat-entry::before {
  content: '·';
  color: var(--faint); margin-right: 16px;
  font-size: 22px; line-height: 1;
}
.c-word { color: var(--cream); letter-spacing: .1em; font-weight: 900; }
.c-user { color: var(--red); font-weight: 800; font-size: 16px; opacity: .85; }

.cmd-hint {
  padding: 6px 40px 0; text-align: center;
  font-size: 18px; font-weight: 700; letter-spacing: .2em; color: var(--muted); text-transform: uppercase;
}
.cmd-hint .cmd { color: var(--red); }

/* ── Last Chance banner ── */
@keyframes lcPulse { 0%,100%{opacity:.7;letter-spacing:.45em} 50%{opacity:1;letter-spacing:.55em} }
.last-chance-banner {
  display: none; align-items: center; justify-content: center; gap: 14px;
  padding: 6px 0; background: rgba(255,70,85,.07); border-top: 1px solid var(--red-border); border-bottom: 1px solid var(--red-border);
  font-size: 14px; font-weight: 900; letter-spacing: .45em; color: var(--red);
  text-transform: uppercase; flex-shrink: 0;
  animation: lcPulse 1s ease-in-out infinite;
}
.last-chance-banner.show { display: flex; }
.last-chance-banner .lc-pts { color: var(--gold); font-size: 18px; }

/* ── Round-end overlay ── */
.g-overlay {
  position: absolute; inset: 0;
  background: rgba(8,12,18,.94);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; opacity: 0; pointer-events: none; transition: opacity .35s; z-index: 30;
}
.g-overlay.show { opacity: 1; pointer-events: all; }

.ov-badge {
  font-size: 17px; font-weight: 800; letter-spacing: .45em;
  padding: 7px 28px; text-transform: uppercase;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.ov-badge.win  { background: var(--teal-dim); border: 1px solid var(--teal-border); color: var(--teal); }
.ov-badge.lose { background: var(--red-dim);  border: 1px solid var(--red-border);  color: var(--red); }

.ov-title {
  font-size: 96px; font-weight: 900; letter-spacing: .12em; line-height: 1;
  text-transform: uppercase;
}
.ov-title.win  { color: var(--teal); text-shadow: 0 0 60px var(--teal-glow); }
.ov-title.lose { color: var(--red);  text-shadow: 0 0 60px var(--red-glow); }

.ov-word {
  font-size: 56px; font-weight: 900; letter-spacing: .35em;
  color: var(--cream); padding: 14px 44px;
  border-top: 1px solid var(--faint);
  border-bottom: 1px solid var(--faint);
}

.ov-winner {
  font-size: 32px; font-weight: 800; letter-spacing: .15em; color: var(--gold);
  display: flex; align-items: center; gap: 14px;
  text-transform: uppercase;
}
/* ── Overlay winner/pts tags ── */
.ov-tags {
  display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap;
}
.ov-tag {
  font-size: 14px; font-weight: 900; letter-spacing: .38em;
  padding: 5px 20px; text-transform: uppercase;
  clip-path: polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
.ov-tag.ace      { background: rgba(255,215,0,.10); border: 1px solid rgba(255,215,0,.45); color: #FFD700; }
.ov-tag.combo    { background: rgba(255,70,85,.10); border: 1px solid rgba(255,70,85,.45);  color: #FF6060; }
.ov-tag.boss-win {
  background: rgba(199,61,61,.18); border: 1px solid rgba(255,70,85,.65); color: #FF4655;
  animation: clutchPulse 1.1s ease-in-out 3;
  font-weight: 900; letter-spacing: .2em;
}
.ov-tag.partial  {
  background: rgba(100,180,255,.08); border: 1px solid rgba(100,180,255,.3); color: #80B8F0;
  font-size: 13px; padding: 3px 10px;
}
.ov-tag.clutch {
  background: rgba(64,200,192,.10); border: 1px solid rgba(64,200,192,.55); color: #40C8C0;
  animation: clutchPulse 1.2s ease-in-out 3;
}
@keyframes clutchPulse {
  0%,100% { box-shadow: none; }
  50%     { box-shadow: 0 0 18px rgba(64,200,192,.5); }
}
/* Roman numeral badge in killfeed */
.kf-roman {
  padding: 0 7px;
  font-size: 12px; font-weight: 900; letter-spacing: .05em;
  color: #FFD700; opacity: .9;
  white-space: nowrap;
  border-right: 1px solid rgba(255,215,0,.15);
  display: flex; align-items: center;
  background: rgba(255,215,0,.05);
}
.ov-pts {
  font-size: 22px; font-weight: 800; letter-spacing: .3em; color: var(--teal);
  background: var(--teal-dim); border: 1px solid var(--teal-border);
  padding: 7px 28px;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.ov-sub { font-size: 18px; font-weight: 700; letter-spacing: .3em; color: var(--muted); text-transform: uppercase; }
.ov-countdown {
  font-size: 120px; font-weight: 900; letter-spacing: .05em; color: var(--red);
  text-transform: uppercase; line-height: 1;
  text-shadow: 0 0 60px var(--red-glow);
  animation: cdPop .5s cubic-bezier(.2,.8,.3,1.2);
}
@keyframes cdPop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
/* Post-round next/restart info bar */
.ov-next {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 4px;
}
.ov-next-timer {
  font-size: 15px; font-weight: 700; letter-spacing: .35em;
  color: var(--muted); text-transform: uppercase;
}
.ov-next-timer span { color: var(--cream); font-weight: 900; }
.ov-next-cmd {
  font-size: 13px; font-weight: 700; letter-spacing: .25em;
  color: rgba(255,255,255,.25); text-transform: uppercase;
}
.ov-next-cmd em { color: var(--red); font-style: normal; font-weight: 800; }

/* Win glow on panel */
.game-panel.win-glow { border-color: var(--teal-border); }
.game-panel.win-glow::before { background: linear-gradient(90deg, transparent, var(--teal) 40%, transparent); }

/* Danger blink — fires when ≤6s remain */
@keyframes dangerBlink {
  0%,100% { border-color: var(--red-border); box-shadow: none; }
  50%     { border-color: var(--red); box-shadow: 0 0 24px var(--red-glow), inset 0 0 20px rgba(255,70,85,.06); }
}
.game-panel.danger { animation: dangerBlink .7s ease infinite; }

/* ── Pause banner ── */
.pause-banner {
  position: absolute; inset: 0; z-index: 25;
  background: rgba(8,12,18,.82);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; opacity: 0; pointer-events: none; transition: opacity .3s;
}
.pause-banner.show { opacity: 1; pointer-events: all; }
.pause-title {
  font-size: 90px; font-weight: 900; letter-spacing: .18em;
  color: var(--amber); text-shadow: 0 0 50px rgba(232,160,32,.4);
  text-transform: uppercase;
}
.pause-sub { font-size: 20px; font-weight: 800; letter-spacing: .35em; color: var(--muted); text-transform: uppercase; }

/* AFK auto-pause banner */
.afk-banner {
  position: absolute; inset: 0; z-index: 26;
  background: rgba(4,6,10,.88);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; opacity: 0; pointer-events: none; transition: opacity .4s;
}
.afk-banner.show { opacity: 1; pointer-events: all; }
.afk-title {
  font-size: 110px; font-weight: 900; letter-spacing: .25em;
  color: var(--muted);
  animation: afkPulse 2.5s ease-in-out infinite;
  text-transform: uppercase;
}
@keyframes afkPulse {
  0%,100% { opacity: .35; }
  50%      { opacity: .75; }
}
.afk-sub {
  font-size: 18px; font-weight: 700; letter-spacing: .3em;
  color: rgba(236,232,225,.25); text-transform: uppercase;
}

/* Stop banner — subtle amber bar at bottom of game panel */
.stop-banner {
  position: absolute; bottom: 48px; left: 0; right: 0; z-index: 24;
  background: rgba(232,160,32,.10);
  border-top: 1px solid rgba(232,160,32,.3);
  border-bottom: 1px solid rgba(232,160,32,.3);
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 7px 0;
  opacity: 0; pointer-events: none;
  transition: opacity .4s;
}
.stop-banner.show { opacity: 1; }
.stop-title {
  font-size: 13px; font-weight: 900; letter-spacing: .55em;
  color: var(--amber); text-transform: uppercase;
}
.stop-sub {
  font-size: 12px; font-weight: 700; letter-spacing: .25em;
  color: var(--muted); text-transform: uppercase;
}

/* Setup screen start row + button */
.sb-start-row {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  margin-top: 8px;
}
.sb-start-btn {
  background: var(--red); color: white;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 20px; letter-spacing: .22em;
  padding: 12px 40px; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: background .15s, box-shadow .15s;
  text-transform: uppercase;
}
.sb-start-btn:hover {
  background: #ff2d3f;
  box-shadow: 0 0 24px rgba(255,70,85,.45);
}

/* ── Score pop ── */
.score-pop {
  position: absolute; right: 28px; top: 90px;
  font-size: 54px; font-weight: 900; color: var(--gold);
  pointer-events: none; z-index: 40; letter-spacing: .08em;
  text-shadow: 0 0 30px rgba(240,192,48,.7);
  animation: sPop 1.4s ease forwards;
}
@keyframes sPop {
  0%  { opacity:0; transform:translateY(0) scale(.7); }
  18% { opacity:1; transform:translateY(-20px) scale(1.15); }
  65% { opacity:1; transform:translateY(-50px) scale(1); }
  100%{ opacity:0; transform:translateY(-80px) scale(.88); }
}

/* ═══════════════════════════════════════════════
   LEADERBOARD PANEL
═══════════════════════════════════════════════ */
.lb-panel {
  width: 360px; flex-shrink: 0;
  background: var(--deep);
  border: 1px solid var(--red-border);
  display: flex; flex-direction: column;
  position: relative;
}
.lb-panel::before {
  content: ''; position: absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
}

.lb-hdr {
  padding: 16px 24px;
  background: var(--void);
  border-bottom: 1px solid var(--faint);
  font-size: 19px; font-weight: 800; letter-spacing: .38em;
  color: var(--muted); text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.lb-hdr::before {
  content: ''; width: 14px; height: 14px;
  background: var(--red); flex-shrink: 0;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* Difficulty badge */
.diff-box {
  margin: 0 12px 10px;
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--red-border);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.diff-lbl { font-size: 13px; font-weight: 800; letter-spacing: .35em; color: var(--muted); text-transform: uppercase; }
.diff-name { font-size: 32px; font-weight: 900; letter-spacing: .12em; line-height: 1.1; }
.diff-name.vct-active {
  font-size: 36px;
  font-weight: 950;
  letter-spacing: .18em;
  text-shadow: 0 0 18px rgba(240,208,96,.6), 0 0 40px rgba(240,208,96,.25);
  -webkit-text-stroke: 0.5px rgba(240,208,96,.4);
}
.diff-streak { font-size: 18px; font-weight: 700; letter-spacing: .1em; color: var(--gold); margin-top: 4px; }

.diff-peak { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--muted); margin-top: 3px; }
.diff-peak-label { opacity: .7; text-transform: uppercase; }
.diff-peak-name { font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

/* Shield indicator in diff-box */
.diff-shield {
  display: none; align-items: center; gap: 6px;
  margin-top: 8px; padding: 5px 10px;
  background: rgba(88,112,216,.12); border: 1px solid rgba(88,112,216,.35);
  clip-path: polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}
.diff-shield.active { display: flex; }
.diff-shield-icon { font-size: 18px; }
.diff-shield-text { font-size: 13px; font-weight: 800; letter-spacing: .25em; color: #7090E8; text-transform: uppercase; }

/* Shield-break / shield-block overlay tag */
@keyframes shieldBreak {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.18); filter: brightness(1.6); }
  60%  { transform: scale(.95); }
  100% { transform: scale(1); }
}
.ov-tag.shield-used {
  background: rgba(88,112,216,.14); border: 1px solid rgba(88,112,216,.5); color: #7090E8;
  animation: shieldBreak .55s ease forwards;
}

.lb-entries { padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.lb-entry {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px;
  background: var(--surface); border: 1px solid var(--faint);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  opacity: 0; animation: cFadeUp .3s ease forwards;
}
@keyframes cFadeUp { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
.lb-entry.rank-1 { background: rgba(240,192,48,.09); border-color: rgba(240,192,48,.28); }
.lb-entry.rank-2 { background: rgba(168,184,196,.06); border-color: rgba(168,184,196,.2); }
.lb-entry.rank-3 { background: rgba(184,120,64,.07); border-color: rgba(184,120,64,.2); }
.lb-rank { font-size: 26px; font-weight: 900; width: 38px; text-align: center; flex-shrink: 0; }
.rank-1 .lb-rank { color: var(--gold); }
.rank-2 .lb-rank { color: var(--silver); }
.rank-3 .lb-rank { color: var(--bronze); }
.rank-other .lb-rank { color: var(--muted); font-size: 20px; }
.lb-name  { font-size: 22px; font-weight: 800; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cream); }
.lb-right { display: flex; flex-direction: column; align-items: flex-end; }
.lb-score { font-size: 26px; font-weight: 900; color: var(--gold); line-height: 1; }
.lb-delta { font-size: 16px; font-weight: 800; color: var(--teal); line-height: 1; }
.lb-empty { padding: 30px 14px; text-align: center; font-size: 18px; font-weight: 700; letter-spacing: .2em; color: var(--faint); text-transform: uppercase; }

/* Pts table */
/* ── Mini Season Leaderboard (replaces pts-table in lb-panel) ── */
.mini-lb { margin: 0 12px 16px; border: 1px solid var(--faint); transition: border-color .4s; }
.mini-lb.mini-lb-past { border-color: rgba(88,112,216,.35); }
.mini-lb-hdr {
  padding: 5px 14px; background: var(--void);
  font-size: 11px; font-weight: 800; letter-spacing: .35em; color: var(--muted);
  text-transform: uppercase; border-bottom: 1px solid var(--faint);
  display: flex; justify-content: space-between; align-items: center;
  transition: opacity .3s;
}
.mini-lb-title { color: var(--gold); transition: color .3s; }
.mini-lb.mini-lb-past .mini-lb-hdr { border-bottom-color: rgba(88,112,216,.2); }
.mini-lb.mini-lb-past .mini-lb-title { color: #7090E8; }
.mini-lb-rows { padding: 6px 12px; display: flex; flex-direction: column; gap: 4px; transition: opacity .3s; }
.mini-lb-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 17px; font-weight: 800;
  animation: cFadeUp .35s ease backwards;
}
.mini-lb-pos { font-size: 13px; font-weight: 900; width: 20px; text-align: center; flex-shrink: 0; }
.mini-lb-row.p1 .mini-lb-pos { color: var(--gold); }
.mini-lb-row.p2 .mini-lb-pos { color: var(--silver); }
.mini-lb-row.p3 .mini-lb-pos { color: var(--bronze); }
.mini-lb-row .mini-lb-name  { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cream); }
.mini-lb-row .mini-lb-score { font-size: 19px; font-weight: 900; color: var(--gold); }
.mini-lb-row.p1 .mini-lb-name { color: var(--gold); }
/* Past season rows — muted gold → blue-grey palette */
.mini-lb-row.past .mini-lb-name  { color: rgba(180,195,220,.8); }
.mini-lb-row.past.p1 .mini-lb-name { color: #A0B0D8; }
.mini-lb-row.past .mini-lb-score { color: #7090E8; font-size: 17px; }
.mini-lb-empty { padding: 12px 14px; font-size: 14px; font-weight: 700; letter-spacing: .2em; color: var(--faint); text-align: center; }

/* ── Killfeed ── */
.killfeed-box {
  margin: 0;
  padding: 10px 12px 8px;
  display: flex; flex-direction: column; gap: 5px;
  background: var(--void);
  border-bottom: 1px solid var(--faint);
}
.killfeed-hdr {
  font-size: 11px; font-weight: 800; letter-spacing: .4em;
  color: var(--muted); text-transform: uppercase;
  padding-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.killfeed-hdr::before {
  content: ''; width: 7px; height: 7px; flex-shrink: 0;
  background: #4DFFB4; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.kf-entry {
  display: flex; align-items: stretch;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.07);
  border-left: 3px solid #4DFFB4;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  overflow: hidden;
  animation: kfSlideIn .32s cubic-bezier(.2,.8,.3,1.1) forwards;
}
@keyframes kfSlideIn {
  from { transform: translateX(28px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.kf-user {
  padding: 7px 11px;
  font-size: 16px; font-weight: 900; color: #4DFFB4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 120px;
  background: rgba(77,255,180,.06);
  border-right: 1px solid rgba(77,255,180,.15);
  display: flex; align-items: center;
}
.kf-knife {
  padding: 7px 9px;
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
  flex-shrink: 0;
}
.kf-knife svg {
  width: 20px; height: 20px;
  fill: #ECE8E1; opacity: .7;
}
.kf-word {
  padding: 7px 12px;
  font-size: 17px; font-weight: 900; letter-spacing: .13em; color: var(--gold);
  display: flex; align-items: center;
  flex: 1;
}
/* Empty slot placeholder */
.kf-empty {
  height: 36px;
  border: 1px dashed rgba(255,255,255,.07);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  opacity: .3;
}

/* ── Intro animation ── */
.intro-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: #050810;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; pointer-events: none;
}
.intro-overlay.done { display: none; }
@keyframes introLogoIn {
  0%   { transform: translateY(40px) scaleX(.6); opacity: 0; }
  55%  { transform: translateY(-6px) scaleX(1.03); opacity: 1; }
  75%  { transform: translateY(0) scaleX(1); }
  88%  { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-20px); opacity: 0; }
}
@keyframes introLineIn {
  0%,30% { width: 0; opacity: 0; }
  55%    { width: 100%; opacity: 1; }
  88%    { opacity: 1; }
  100%   { opacity: 0; }
}
@keyframes introSubIn {
  0%,40% { opacity: 0; letter-spacing: .8em; }
  65%    { opacity: 1; letter-spacing: .5em; }
  88%    { opacity: 1; }
  100%   { opacity: 0; }
}
.intro-logo {
  font-size: 140px; font-weight: 900; letter-spacing: .18em;
  color: var(--cream);
  text-shadow: 0 0 80px rgba(255,70,85,.5);
  animation: introLogoIn 2.4s cubic-bezier(.2,.8,.3,1) forwards;
}
.intro-logo em { color: var(--red); font-style: normal; }
.intro-line {
  height: 2px; background: linear-gradient(90deg, transparent, var(--red), transparent);
  animation: introLineIn 2.4s ease forwards;
}
.intro-sub {
  font-size: 18px; font-weight: 800; color: var(--muted); margin-top: 18px;
  letter-spacing: .35em; text-align: center;
  animation: introSubIn 2.4s ease forwards;
}

/* ── Session / Rank-Up overlay ── */
.session-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(5,8,16,.96);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; opacity: 0; pointer-events: none; transition: opacity .5s;
  overflow: hidden;
}
/* Animated rising arrows */
.sess-arrows {
  position: absolute; inset: 0; pointer-events: none;
}
@keyframes arrowRise {
  0%   { transform: translateY(0)   scaleY(1);   opacity: 0; }
  15%  { opacity: .7; }
  80%  { opacity: .5; }
  100% { transform: translateY(-110vh) scaleY(.8); opacity: 0; }
}
.sess-arrow {
  position: absolute; bottom: -60px;
  font-size: 36px; color: var(--red);
  animation: arrowRise linear infinite;
  opacity: 0;
  filter: drop-shadow(0 0 8px currentColor);
}
.session-overlay.show { opacity: 1; pointer-events: all; }
.sess-eyebrow {
  font-size: 13px; font-weight: 800; letter-spacing: .55em; color: var(--muted);
  text-transform: uppercase;
}
.sess-rankname {
  font-size: 100px; font-weight: 900; letter-spacing: .14em; line-height: 1;
  text-transform: uppercase;
}
.sess-divider {
  width: 520px; height: 1px; background: linear-gradient(90deg, transparent, var(--red-border), transparent);
}
.sess-grid {
  display: grid; grid-template-columns: repeat(3, 160px); gap: 10px;
}
.sess-card {
  background: var(--surface); border: 1px solid var(--faint);
  clip-path: polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  padding: 12px 16px; text-align: center;
}
.sess-card-val { font-size: 40px; font-weight: 900; color: var(--gold); line-height: 1; }
.sess-card-lbl { font-size: 11px; font-weight: 800; letter-spacing: .3em; color: var(--muted); text-transform: uppercase; margin-top: 4px; }
.sess-podium { display: flex; gap: 8px; align-items: stretch; }
.sess-pod {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--surface); border: 1px solid var(--faint); padding: 10px 16px;
  clip-path: polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  min-width: 110px;
}
.sess-pod-rank { font-size: 22px; font-weight: 900; }
.sess-pod-rank.gold   { color: var(--gold); }
.sess-pod-rank.silver { color: var(--silver); }
.sess-pod-rank.bronze { color: var(--bronze); }
.sess-pod-name  { font-size: 16px; font-weight: 800; color: var(--cream); letter-spacing: .06em; }
.sess-pod-score { font-size: 20px; font-weight: 900; color: var(--teal); }
.sess-next {
  font-size: 13px; font-weight: 700; letter-spacing: .4em; color: var(--muted);
  text-transform: uppercase; margin-top: 4px;
}
.sess-next span { color: var(--cream); font-weight: 900; }
.footer-bar {
  height: 44px;
  flex-shrink: 0;
  background: var(--deep);
  border-top: 1px solid var(--red-border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 36px;
  position: relative;
  overflow: hidden;
}
.footer-bar::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--red-border), transparent);
}
.footer-cmd {
  font-size: 16px; font-weight: 700; letter-spacing: .14em; color: var(--muted); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
}
.footer-cmd .cmd { color: var(--red); }
.footer-copy {
  font-size: 16px; font-weight: 800; letter-spacing: .2em; color: var(--muted); text-transform: uppercase;
  white-space: nowrap; flex-shrink: 0; margin-left: 20px;
}
.footer-copy em { color: var(--red); font-style: normal; }
#debugPanel {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.95);
  border-top: 2px solid var(--red);
  padding: 8px 14px;
  z-index: 999;
  font-family: monospace; font-size: 13px; color: #80FF80;
  max-height: 220px; overflow: hidden;
}
#dbgLog div { padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
#dbgTitle { font-size: 12px; letter-spacing: .2em; color: var(--red); margin-bottom: 5px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; }
#dbgInput { width: 100%; background: #111; border: 1px solid var(--red-border); color: #80FF80; font-family: monospace; font-size: 13px; padding: 4px 8px; margin-top: 6px; outline: none; }

/* ══════════════════════════════════════════════
   SEASON — LB header badge + crown + champion overlay
   ══════════════════════════════════════════════ */

/* Season badge in LB header */
.lb-season-badge {
  margin-left: auto;
  font-size: 10px; font-weight: 900; letter-spacing: .35em;
  color: var(--gold); opacity: .7;
  text-transform: uppercase; white-space: nowrap;
}

/* Crown icon on season leader */
.lb-crown {
  font-size: 14px; margin-left: 5px;
  vertical-align: middle; line-height: 1;
  filter: drop-shadow(0 0 4px rgba(240,192,48,.6));
}

/* ── Season Champion full-screen overlay ── */
@keyframes scFadeIn  { from { opacity:0 } to { opacity:1 } }
@keyframes scSlideUp { from { transform: translateY(40px) scale(.95); opacity:0 } to { transform: translateY(0) scale(1); opacity:1 } }
@keyframes scCrownBounce {
  0%,100% { transform: scale(1) rotate(-5deg); }
  50%     { transform: scale(1.18) rotate(5deg); }
}
@keyframes scBarGrow { from { width:0 } to { width:100% } }
@keyframes scGlitter {
  0%,100% { text-shadow: 0 0 20px rgba(240,192,48,.4); }
  50%     { text-shadow: 0 0 60px rgba(240,192,48,.9), 0 0 120px rgba(240,192,48,.4); }
}

.season-champ-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0; transition: opacity .5s;
}
.season-champ-overlay.show { opacity: 1; }

.sc-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(240,192,48,.18) 0%, rgba(10,12,18,.97) 65%);
  animation: scFadeIn .8s ease forwards;
}
.sc-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255,255,255,.012) 2px,
    rgba(255,255,255,.012) 4px
  );
}

.sc-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 0;
  animation: scSlideUp .7s cubic-bezier(.2,.8,.3,1.1) .3s both;
}

.sc-pre {
  font-size: 13px; font-weight: 900; letter-spacing: .7em;
  color: var(--gold); opacity: .7; text-transform: uppercase;
  margin-bottom: 12px;
}

.sc-crown {
  font-size: 88px; line-height: 1;
  animation: scCrownBounce 2.2s ease-in-out 0.5s infinite;
  filter: drop-shadow(0 0 28px rgba(240,192,48,.7));
  margin-bottom: 8px;
}

.sc-name {
  font-size: 96px; font-weight: 900; letter-spacing: .04em;
  color: var(--cream);
  line-height: 1;
  animation: scGlitter 2.5s ease-in-out 0.8s infinite;
  text-shadow: 0 0 40px rgba(240,192,48,.5);
  max-width: 900px; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sc-season {
  font-size: 18px; font-weight: 900; letter-spacing: .55em;
  color: var(--muted); margin-top: 10px;
}

.sc-score {
  font-size: 48px; font-weight: 900; letter-spacing: .12em;
  color: var(--gold); margin-top: 6px;
  text-shadow: 0 0 30px rgba(240,192,48,.5);
}

.sc-date {
  font-size: 13px; font-weight: 700; letter-spacing: .3em;
  color: var(--muted); opacity: .55; margin-top: 8px;
}

.sc-bar {
  height: 3px; background: var(--gold);
  width: 0; margin-top: 28px;
  box-shadow: 0 0 14px rgba(240,192,48,.6);
  animation: scBarGrow 1.2s cubic-bezier(.4,0,.2,1) 1s forwards;
}

.sc-next {
  font-size: 12px; font-weight: 900; letter-spacing: .6em;
  color: var(--teal); opacity: .8; margin-top: 18px;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════
   BOSS ROUND
   ═══════════════════════════════════════════════ */

/* Timer fill — deep blood-red to hot red */
.timer-fill.boss {
  background: linear-gradient(90deg, #4A0000, #8B0000, #C73D3D, #FF4655);
  box-shadow: 0 0 18px rgba(199,61,61,.9), 0 0 4px rgba(255,70,85,.5);
  animation: bossTimerPulse 1.2s ease-in-out infinite;
}
@keyframes bossTimerPulse {
  0%,100% { box-shadow: 0 0 14px rgba(199,61,61,.7); }
  50%      { box-shadow: 0 0 28px rgba(255,70,85,.95), 0 0 6px #FF4655; }
}

/* Game panel — intense crimson frame that breathes */
@keyframes bossGlow {
  0%,100% {
    box-shadow:
      0 0 0 2px #7A0000,
      0 0 40px rgba(199,0,0,.55),
      0 0 80px rgba(139,0,0,.25),
      inset 0 0 60px rgba(100,0,0,.18);
    border-color: #7A0000;
  }
  50% {
    box-shadow:
      0 0 0 3px #FF2233,
      0 0 70px rgba(255,34,51,.75),
      0 0 130px rgba(199,0,0,.35),
      inset 0 0 90px rgba(160,0,0,.28);
    border-color: #FF2233;
  }
}
.game-panel.boss-mode {
  border-color: #7A0000 !important;
  animation: bossGlow 1.6s ease-in-out infinite;
  position: relative;
  background: linear-gradient(180deg,
    rgba(30,0,0,.55) 0%,
    rgba(14,4,4,.35) 40%,
    rgba(8,2,2,.25) 100%) !important;
}

/* Blood-red vignette overlay */
.game-panel.boss-mode::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 50% 0%,   rgba(180,0,0,.22) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(120,0,0,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 0%   50%, rgba(100,0,0,.12) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 50%, rgba(100,0,0,.12) 0%, transparent 50%);
  pointer-events: none;
}

/* Scanline texture overlay */
.game-panel.boss-mode::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.07) 2px,
    rgba(0,0,0,.07) 3px
  );
  pointer-events: none;
}

/* BOSS FIGHT category badge */
.hint-cat.CAT-BOSS {
  background: rgba(160,0,0,.28) !important;
  border-color: rgba(255,34,51,.75) !important;
  color: #FF2233 !important;
  font-size: 22px !important;
  letter-spacing: .45em !important;
  font-weight: 900 !important;
  text-shadow: 0 0 28px rgba(255,34,51,.9), 0 0 8px rgba(255,0,0,.5);
  animation: bossBadgePulse 1.3s ease-in-out infinite;
  padding: 8px 22px !important;
}
@keyframes bossBadgePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,34,51,0); }
  50%      { box-shadow: 0 0 0 5px rgba(255,34,51,.3), 0 0 20px rgba(255,0,0,.2); }
}

/* Scrambled tiles — red-tinted in boss mode */
.game-panel.boss-mode .scrambled-tiles .tile {
  background: rgba(60,0,0,.55) !important;
  border-color: rgba(199,34,51,.5) !important;
  color: #FF9090 !important;
  box-shadow: 0 0 8px rgba(180,0,0,.25);
}

/* Boss attempt counter */
.boss-attempt-counter {
  font-size: 11px; font-weight: 900; letter-spacing: .45em;
  color: #FF4655; text-align: center;
  padding: 3px 0 5px;
  text-transform: uppercase;
  display: none;
  text-shadow: 0 0 12px rgba(255,70,85,.5);
}

/* Boss grid — scrollable for unlimited rows */
.boss-grid {
  overflow-y: auto;
  max-height: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(199,0,0,.5) transparent;
}
.boss-grid::-webkit-scrollbar { width: 4px; }
.boss-grid::-webkit-scrollbar-track { background: transparent; }
.boss-grid::-webkit-scrollbar-thumb { background: rgba(199,0,0,.5); border-radius: 2px; }

/* Boss intro overlay — full-screen dramatic countdown */
.boss-intro-overlay {
  position: absolute; inset: 0; z-index: 300;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(4,0,0,.94);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.boss-intro-overlay.show {
  opacity: 1; pointer-events: all;
}

/* Animated red scanlines on intro */
.boss-intro-overlay::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(199,0,0,.06) 2px, rgba(199,0,0,.06) 4px
  );
  animation: bossScanMove 8s linear infinite;
  pointer-events: none;
}
@keyframes bossScanMove {
  0%   { background-position: 0 0; }
  100% { background-position: 0 40px; }
}

/* Red glow border on intro */
.boss-intro-overlay::after {
  content: '';
  position: absolute; inset: 0;
  box-shadow: inset 0 0 60px rgba(255,20,30,.35), inset 0 0 120px rgba(180,0,0,.2);
  animation: bossGlowPulse 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bossGlowPulse {
  0%,100% { box-shadow: inset 0 0 60px rgba(200,0,0,.3), inset 0 0 120px rgba(150,0,0,.15); }
  50%      { box-shadow: inset 0 0 80px rgba(255,30,40,.55), inset 0 0 160px rgba(200,0,0,.3); }
}

.boss-intro-eyebrow {
  font-size: 13px; font-weight: 900; letter-spacing: .7em;
  color: rgba(255,50,70,.8); text-transform: uppercase;
  margin-bottom: 18px;
  text-shadow: 0 0 20px rgba(255,0,0,.5);
}
.boss-intro-title {
  font-size: 18px; font-weight: 900; letter-spacing: .4em;
  color: var(--muted); text-transform: uppercase;
  margin-bottom: 10px;
}
.boss-intro-rank {
  font-size: 72px; font-weight: 900; letter-spacing: .12em;
  line-height: 1; text-transform: uppercase; margin-bottom: 22px;
  text-shadow: 0 0 50px currentColor, 0 0 120px rgba(200,0,0,.4);
  animation: bossRankReveal .4s cubic-bezier(.2,0,.0,1) both;
}
@keyframes bossRankReveal {
  from { opacity:0; transform: scaleX(1.2) translateY(12px); filter: blur(4px); }
  to   { opacity:1; transform: scaleX(1)   translateY(0);    filter: none; }
}
.boss-intro-desc {
  font-size: 13px; font-weight: 700; letter-spacing: .3em;
  color: var(--muted); opacity: .65; text-transform: uppercase;
  margin-bottom: 44px;
}
.boss-intro-count {
  font-size: 96px; font-weight: 900; color: #FF2233;
  line-height: 1;
  text-shadow: 0 0 40px rgba(255,34,51,.9), 0 0 100px rgba(200,0,0,.5);
  animation: bossCntPop .3s cubic-bezier(.3,1.5,.5,1) both;
  min-width: 130px; text-align: center;
}
@keyframes bossCntPop {
  from { transform: scale(1.5); opacity:0; filter: blur(6px); }
  to   { transform: scale(1);   opacity:1; filter: none; }
}

/* Diff box boss indicator */
.game-panel.boss-mode .diff-lbl::after {
  content: ' · ⚔ BOSS';
  color: #FF2233;
  font-size: 10px; letter-spacing: .3em;
  text-shadow: 0 0 10px rgba(255,0,0,.5);
}

/* ═══════════════════════════════════════════════
   GAME SUMMARY OVERLAY
═══════════════════════════════════════════════ */
.gs-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,14,20,.88);
  backdrop-filter: blur(6px);
  z-index: 300;
  opacity: 0; pointer-events: none;
  transition: opacity .4s;
}
.gs-overlay.show { opacity: 1; pointer-events: all; }

.gs-inner {
  width: 1100px;
  background: var(--deep);
  border: 1px solid var(--red-border);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
  display: flex; flex-direction: column;
  overflow: hidden;
}

.gs-header {
  background: var(--red-dim);
  border-bottom: 1px solid var(--red-border);
  padding: 28px 48px 22px;
}
.gs-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .45em;
  color: var(--red); text-transform: uppercase; margin-bottom: 4px;
}
.gs-title {
  font-size: 42px; font-weight: 900; letter-spacing: .18em;
  color: var(--cream); text-transform: uppercase; line-height: 1;
}

.gs-body {
  display: flex; flex-direction: row;
  padding: 36px 48px;
  gap: 0;
  flex: 1;
}

.gs-left { flex: 1; padding-right: 40px; }
.gs-divider {
  width: 1px; background: var(--faint); margin: 0 0 0 0;
  align-self: stretch;
}
.gs-right { flex: 1; padding-left: 40px; }

.gs-section-label {
  font-size: 11px; font-weight: 800; letter-spacing: .4em;
  color: var(--muted); text-transform: uppercase; margin-bottom: 18px;
}

/* Podium */
.gs-podium { display: flex; flex-direction: column; gap: 12px; }
.gs-podium-row {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface);
  padding: 14px 20px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.gs-medal { font-size: 26px; line-height: 1; }
.gs-pname { flex: 1; font-size: 22px; font-weight: 800; letter-spacing: .1em; color: var(--cream); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-ppts { font-size: 18px; font-weight: 900; letter-spacing: .1em; color: var(--gold); }
.gs-empty { color: var(--muted); font-size: 16px; }

/* MVP Card */
.gs-mvp-card {
  margin-top: 14px;
  background: linear-gradient(135deg, rgba(240,192,48,.12) 0%, rgba(240,192,48,.04) 100%);
  border: 1px solid rgba(240,192,48,.35);
  padding: 14px 20px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  display: flex; align-items: center; gap: 16px;
}
.gs-mvp-label {
  font-size: 11px; font-weight: 900; letter-spacing: .45em;
  color: var(--gold); text-transform: uppercase;
  background: rgba(240,192,48,.15); padding: 4px 10px;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
  flex-shrink: 0;
}
.gs-mvp-name {
  flex: 1; font-size: 22px; font-weight: 900; letter-spacing: .1em;
  color: var(--gold); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gs-mvp-wins {
  font-size: 14px; font-weight: 800; letter-spacing: .15em;
  color: var(--muted); white-space: nowrap;
}

/* Highest rank */
.gs-high-rank {
  font-size: 48px; font-weight: 900; letter-spacing: .14em;
  line-height: 1; margin-bottom: 28px;
}

/* Stats grid */
.gs-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gs-stat {
  background: var(--surface);
  padding: 14px 18px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.gs-stat-val { font-size: 30px; font-weight: 900; color: var(--cream); letter-spacing: .08em; line-height: 1; }
.gs-stat-lbl { font-size: 11px; font-weight: 800; letter-spacing: .3em; color: var(--muted); text-transform: uppercase; margin-top: 4px; }
.gs-stat-ace  .gs-stat-val { color: var(--gold); }
.gs-stat-clutch .gs-stat-val { color: var(--teal); }
.gs-stat-shield { grid-column: span 2; }
.gs-stat-shield .gs-stat-val { color: #8888cc; }

/* Footer */
.gs-footer {
  border-top: 1px solid var(--faint);
  padding: 16px 48px;
  display: flex; align-items: center; gap: 24px;
}
.gs-footer-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-left: auto;
}
.gs-chat-copy {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--faint);
  padding: 10px 18px; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  transition: border-color .15s, background .15s;
  flex: 1; min-width: 0;
}
.gs-chat-copy:hover { border-color: var(--teal-border); background: var(--teal-dim); }
.gs-chat-copy-lbl {
  font-size: 11px; font-weight: 800; letter-spacing: .3em; color: var(--teal);
  white-space: nowrap; text-transform: uppercase;
}
.gs-chat-copy-msg {
  font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--cream);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gs-next-hint {
  font-size: 16px; font-weight: 700; letter-spacing: .15em; color: var(--muted);
}
.gs-cmd { color: var(--red); font-weight: 900; letter-spacing: .2em; }
.gs-countdown-row {
  font-size: 14px; font-weight: 700; letter-spacing: .2em; color: var(--muted);
}
.gs-countdown { color: var(--cream); font-weight: 900; }

/* ── Daily / Weekly Challenge Badge ── */
.challenge-badge {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 28px;
  background: linear-gradient(90deg, rgba(240,192,48,.12) 0%, rgba(240,192,48,.04) 100%);
  border-bottom: 1px solid rgba(240,192,48,.25);
  animation: challengePulse 3s ease-in-out infinite;
}
@keyframes challengePulse {
  0%,100% { border-bottom-color: rgba(240,192,48,.25); }
  50%     { border-bottom-color: rgba(240,192,48,.55); }
}
.ch-label {
  font-size: 11px; font-weight: 800; letter-spacing: .4em;
  color: var(--gold); text-transform: uppercase;
}
.ch-bonus {
  font-size: 15px; font-weight: 900; letter-spacing: .15em; color: var(--gold);
  background: rgba(240,192,48,.15); padding: 3px 12px;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

/* ═══════════════════════════════════════════════
   TEAM MODE
═══════════════════════════════════════════════ */
.team-panel {
  width: 220px; flex-shrink: 0;
  background: var(--deep);
  border: 1px solid var(--faint);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.team-panel-hdr {
  padding: 14px 18px;
  font-size: 22px; font-weight: 900; letter-spacing: .35em;
  text-transform: uppercase; text-align: center;
  border-bottom: 1px solid var(--faint);
}
.team-alpha-hdr { color: #00C8B4; background: rgba(0,200,180,.08); border-bottom-color: rgba(0,200,180,.25); }
.team-omega-hdr { color: #FF4655; background: rgba(255,70,85,.08);  border-bottom-color: rgba(255,70,85,.25); }
.team-alpha { border-color: rgba(0,200,180,.3); }
.team-omega { border-color: rgba(255,70,85,.3); }

.team-panel-scores { padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.tp-total { font-size: 30px; font-weight: 900; letter-spacing: .08em; color: var(--cream); padding: 6px 10px 10px; border-bottom: 1px solid var(--faint); margin-bottom: 4px; }
.tp-total-lbl { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .2em; }
.tp-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--surface); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); }
.tp-pos  { font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: .1em; min-width: 16px; }
.tp-name { flex: 1; font-size: 14px; font-weight: 800; letter-spacing: .06em; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-pts  { font-size: 14px; font-weight: 900; color: var(--gold); }

/* Team badge in round overlay */
.ov-team-badge {
  font-size: 16px; font-weight: 900; letter-spacing: .35em;
  text-transform: uppercase; margin-top: 4px;
  padding: 4px 16px;
  background: rgba(255,255,255,.06);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

/* Setup screen team button */
.sb-team-btn {
  background: var(--surface);
  border: 1px solid var(--teal-border);
  color: var(--teal) !important;
}
.sb-team-btn:hover {
  background: var(--teal-dim) !important;
  box-shadow: 0 0 24px rgba(0,200,180,.3) !important;
}

/* Game Summary — team winner */
.gs-team-winner { padding: 14px 0 0; }
.gs-team-winner-banner {
  font-size: 38px; font-weight: 900; letter-spacing: .2em;
  text-transform: uppercase; line-height: 1;
}
.gs-team-scores-row {
  display: flex; align-items: center; gap: 20px;
  margin-top: 8px; font-size: 16px; font-weight: 800; letter-spacing: .15em;
}
.gs-team-score.alpha { color: #00C8B4; }
.gs-team-score.omega { color: #FF4655; }
.gs-team-vs { color: var(--muted); font-size: 13px; }
.gs-podium-team-hdr {
  font-size: 13px; font-weight: 900; letter-spacing: .35em;
  text-transform: uppercase; padding: 8px 0 4px;
}

/* ═══════════════════════════════════════════════
   TEAM SEEDING OVERLAY
═══════════════════════════════════════════════ */
.seeding-overlay {
  position: absolute; inset: 0; z-index: 250;
  background: rgba(10,14,20,.95);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .4s;
}
.seeding-overlay.show { opacity: 1; pointer-events: all; }

.seed-inner {
  width: 1200px;
  display: flex; flex-direction: column; gap: 0;
  background: var(--deep);
  border: 1px solid var(--red-border);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
  overflow: hidden;
}

.seed-header {
  padding: 28px 56px 22px;
  background: var(--red-dim);
  border-bottom: 1px solid var(--red-border);
}
.seed-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: .5em;
  color: var(--red); text-transform: uppercase; margin-bottom: 4px;
}
.seed-title {
  font-size: 48px; font-weight: 900; letter-spacing: .18em; color: var(--cream); line-height: 1;
}
.seed-sub {
  font-size: 16px; font-weight: 700; letter-spacing: .15em;
  color: var(--muted); margin-top: 6px;
}

.seed-teams {
  display: flex; align-items: stretch; padding: 32px 56px; gap: 24px;
}
.seed-team {
  flex: 1; display: flex; flex-direction: column; gap: 12px;
  background: var(--surface);
  padding: 24px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.seed-team-alpha { border-left: 3px solid #00C8B4; }
.seed-team-omega { border-left: 3px solid #FF4655; }

.seed-team-name {
  font-size: 36px; font-weight: 900; letter-spacing: .25em;
  text-transform: uppercase; line-height: 1;
}
.seed-team-name.alpha { color: #00C8B4; }
.seed-team-name.omega { color: #FF4655; }

.seed-team-cmd {
  font-size: 20px; font-weight: 900; letter-spacing: .15em;
  padding: 8px 16px; display: inline-block;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.seed-team-cmd.alpha { background: rgba(0,200,180,.15); color: #00C8B4; }
.seed-team-cmd.omega { background: rgba(255,70,85,.15);  color: #FF4655; }

.seed-count-row {
  display: flex; align-items: baseline; gap: 10px;
  padding-top: 8px; border-top: 1px solid var(--faint);
}
.seed-count-lbl { font-size: 11px; font-weight: 800; letter-spacing: .3em; color: var(--muted); }
.seed-count { font-size: 26px; font-weight: 900; color: var(--cream); }

.seed-list {
  display: flex; flex-direction: column; gap: 5px;
  max-height: 260px; overflow-y: auto;
}
.seed-empty { font-size: 14px; font-weight: 700; color: var(--muted); font-style: italic; }
.seed-member {
  font-size: 15px; font-weight: 800; letter-spacing: .06em; color: var(--cream);
  padding: 5px 10px; background: var(--raise);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}

.seed-vs {
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 900; letter-spacing: .2em; color: var(--muted);
  padding: 0 8px; flex-shrink: 0;
}

.seed-balance-notice {
  margin: 0 56px 16px;
  padding: 12px 18px;
  background: rgba(240,192,48,.1);
  border: 1px solid rgba(240,192,48,.35);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.seed-moved {
  font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--gold);
}

.seed-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 56px;
  border-top: 1px solid var(--faint);
}
.seed-countdown-row {
  font-size: 16px; font-weight: 700; letter-spacing: .18em; color: var(--muted);
}
.seed-countdown {
  font-size: 24px; font-weight: 900; color: var(--cream);
}
.seed-start-btn {
  background: var(--red); color: white;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 18px; letter-spacing: .22em;
  padding: 10px 36px; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: background .15s;
}
.seed-start-btn:hover { background: #ff2d3f; }

/* ═══════════════════════════════════════════════
   COLORBLIND MODE
═══════════════════════════════════════════════ */
body.colorblind .w-tile.correct {
  background: #0072B2; border-color: #0072B2; color: #fff;
}
body.colorblind .w-tile.correct::after {
  content: '✓';
  position: absolute; bottom: 3px; right: 5px;
  font-size: 13px; opacity: .7; font-style: normal;
}
body.colorblind .w-tile.present {
  background: #E69F00; border-color: #E69F00; color: #000;
}
body.colorblind .w-tile.present::after {
  content: '◆';
  position: absolute; bottom: 3px; right: 5px;
  font-size: 11px; opacity: .7;
}
body.colorblind .w-tile.absent {
  background: var(--void); border-color: rgba(255,255,255,.06); color: var(--muted);
}

/* CB toggle button in setup */
.sb-cb-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  background: var(--surface); border: 1px solid var(--faint);
  color: var(--muted); cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 15px; letter-spacing: .18em;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: background .15s, color .15s, border-color .15s;
}
.sb-cb-toggle:hover { background: var(--raise); color: var(--cream); }
.sb-cb-toggle.active {
  background: rgba(0,114,178,.2); border-color: rgba(0,114,178,.5); color: #0072B2;
}

/* ═══════════════════════════════════════════════
   HOT STREAK BADGE
═══════════════════════════════════════════════ */
.lb-fire {
  margin-left: 4px; font-size: 15px; line-height: 1;
  animation: firePulse 1.2s ease-in-out infinite;
}
@keyframes firePulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}

/* ═══════════════════════════════════════════════
   ALL-TIME LEADERBOARD
═══════════════════════════════════════════════ */
.alltime-lb {
  border-top: 1px solid var(--faint);
  padding-top: 0;
  flex-shrink: 0;
}
.alltime-lb-hdr {
  padding: 10px 24px 8px;
  font-size: 11px; font-weight: 900; letter-spacing: .45em;
  color: var(--gold); text-transform: uppercase;
  border-bottom: 1px solid rgba(240,192,48,.2);
  background: rgba(240,192,48,.05);
}
.alltime-lb-rows { padding: 6px 12px; overflow: hidden; }

/* ═══════════════════════════════════════════════
   RIVALRY TAG
═══════════════════════════════════════════════ */
.lb-rival {
  display: inline-block;
  font-size: 10px; font-weight: 900; letter-spacing: .15em;
  text-transform: uppercase; color: var(--red);
  background: var(--red-dim); border: 1px solid var(--red-border);
  padding: 1px 6px; margin-left: 6px;
  vertical-align: middle;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

/* ═══════════════════════════════════════════════
   REVERSE ROUND BADGE
═══════════════════════════════════════════════ */
.reverse-badge {
  display: inline-block;
  font-size: 11px; font-weight: 900; letter-spacing: .3em;
  color: #5870D8; background: rgba(88,112,216,.15);
  border: 1px solid rgba(88,112,216,.45);
  padding: 2px 10px; margin-left: 10px; vertical-align: middle;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  animation: reversePulse 2s ease-in-out infinite;
}
@keyframes reversePulse {
  0%,100% { opacity: 1; }
  50%     { opacity: .6; }
}

/* ═══════════════════════════════════════════════
   DYNAMIC RANK BACKGROUND
═══════════════════════════════════════════════ */
.scene {
  --rank-glow: transparent;
  --rank-glow-strong: transparent;
}
.scene.rank-glow-active::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%,   var(--rank-glow-strong) 0%, transparent 70%),
    radial-gradient(ellipse 60% 30% at 50% 100%,  var(--rank-glow) 0%, transparent 70%);
  transition: background 2s ease;
}

/* ═══════════════════════════════════════════════
   CLUTCH-CAM
═══════════════════════════════════════════════ */
.scene.clutch-cam-active {
  animation: clutchFreeze .1s ease forwards;
}
@keyframes clutchFreeze {
  0%   { filter: none; }
  100% { filter: brightness(1.15) contrast(1.1); }
}

.clutch-flash {
  position: absolute; inset: 0; z-index: 400;
  background: rgba(255,255,255,.55);
  opacity: 1;
  transition: opacity .6s ease;
  pointer-events: none;
}

.clutch-cam-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.6);
  z-index: 401;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 160px; font-weight: 900; letter-spacing: .25em;
  color: var(--teal);
  text-shadow: 0 0 60px rgba(0,200,180,.8), 0 0 120px rgba(0,200,180,.4);
  animation: clutchLabel .9s cubic-bezier(.2,1.4,.3,1) forwards;
  pointer-events: none;
}
@keyframes clutchLabel {
  0%   { transform: translate(-50%, -50%) scale(.6); opacity: 0; }
  30%  { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
  70%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0; }
}

/* ── Season Summary Overlay ── */
.sso-champ-block {
  margin-top: 18px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.sso-champ-label {
  font-size: 11px; font-weight: 900; letter-spacing: .45em;
  color: var(--gold); text-transform: uppercase;
}
.sso-champ-name {
  font-size: 64px; font-weight: 900; letter-spacing: .12em;
  color: var(--gold); text-transform: uppercase; line-height: 1;
  text-shadow: 0 0 40px rgba(240,192,48,.4);
}
.sso-champ-score {
  font-size: 22px; font-weight: 800; letter-spacing: .2em;
  color: var(--muted); text-transform: uppercase;
}

/* ── New start-row buttons ── */
.sb-team-btn {
  background: var(--surface) !important;
  border: 1px solid rgba(0,200,180,.4) !important;
  color: #00C8B4 !important;
}
.sb-team-btn:hover { background: rgba(0,200,180,.1) !important; }
.sb-cb-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  background: var(--surface); border: 1px solid var(--faint);
  color: var(--muted); cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 15px; letter-spacing: .18em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.sb-cb-toggle:hover { background: var(--raise); color: var(--cream); }
.sb-cb-toggle.active { background: rgba(0,114,178,.2); border-color: rgba(0,114,178,.5); color: #0072B2; }