/* ============================================================================
   STADIUM THUNDER ("the roar") — stadium-thunder.css  (v1.1)
   Drop-in stylesheet. Everything is scoped under .st so it won't collide
   with your site. Theme by overriding the CSS variables in the .st block.
   Button + composer styling is also applied inline by the JS for resilience;
   the classes below mirror it so the look is documented and overridable.
   ========================================================================== */

.st {
  /* ---- Theme tokens (override to rebrand) ---- */
  --st-page:   #0C0D11;
  --st-elev:   #181B22;
  --st-eline:  #2b2f3a;
  --st-home:   #FFB81C;   /* home / roar / accent */
  --st-away:   #3E97E8;   /* away / boo */
  --st-away2:  #6fb0ef;
  --st-red:    #E24B4A;
  --st-ink:    #ffffff;
  --st-muted:  #8A8F99;
  --st-faint:  #5a6470;
  --st-radius: 34px;
  --st-font:   'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  position: relative;
  width: 330px;
  height: 632px;
  max-width: 100%;
  background: var(--st-page);
  border: 7px solid #000;
  border-radius: var(--st-radius);
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  color: var(--st-ink);
  font-family: var(--st-font);
  box-shadow: 0 32px 70px -20px rgba(20,24,32,.55), 0 0 0 1px rgba(0,0,0,.06);
}
.st *, .st *::before, .st *::after { box-sizing: border-box; }

.st-rlayer { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:4; }

/* ---- Scoreboard ---- */
.st-scoreboard { display:flex; align-items:center; justify-content:space-between; background:var(--st-elev); border:.5px solid var(--st-eline); border-radius:14px; padding:9px 12px; }
.st-team { display:flex; align-items:center; gap:8px; }
.st-badge { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:12px; letter-spacing:.01em; }
.st-badge--home { background:var(--st-home); color:var(--st-page); }
.st-badge--away { background:var(--st-page); border:1px solid var(--st-away); color:var(--st-away2); }
.st-score { font-size:26px; font-weight:500; }
.st-score--home { color:var(--st-home); }
.st-score--away { color:var(--st-away2); }
.st-status { text-align:center; line-height:1.25; }
.st-live { display:flex; align-items:center; gap:5px; justify-content:center; }
.st-live-dot { width:6px; height:6px; border-radius:50%; background:var(--st-red); }
.st-live-txt { font-size:11px; color:#f3a3a3; }
.st-clock { font-size:11px; color:var(--st-muted); }
.st-note { font-size:10px; color:var(--st-home); margin-top:1px; }

/* ---- Chat feed ---- */
.st-feed { flex:1; min-height:0; overflow-y:auto; margin:11px 0; display:flex; flex-direction:column; gap:11px; padding:0 2px; scrollbar-width:none; -ms-overflow-style:none; }
.st-feed::-webkit-scrollbar { width:0; height:0; display:none; }
.st-msg { display:flex; gap:9px; align-items:flex-start; }
.st-msg-av { width:28px; height:28px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:500; }
.st-msg-body { flex:1; min-width:0; }
.st-msg-head { font-size:11px; display:flex; gap:6px; align-items:center; }
.st-msg-seat { color:var(--st-faint); display:inline-flex; align-items:center; gap:2px; font-size:11px; }
.st-msg-text { font-size:14px; color:var(--st-ink); line-height:1.4; margin-top:1px; }
.st-msg-acts { display:flex; gap:16px; margin-top:5px; font-size:11px; color:var(--st-faint); }
.st-msg-acts span { cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
.st-msg-acts b { font-weight:400; }

/* result cards */
.st-card { align-self:center; display:flex; align-items:center; gap:12px; border-radius:14px; padding:11px 16px; max-width:96%; transition:transform .2s; transform:scale(.9); }
.st-card-n { font-size:22px; font-weight:500; line-height:1; }
.st-card-sub { font-size:11px; margin-top:2px; }
.st-card-replay { border-radius:20px; padding:7px 11px; font-size:12px; display:inline-flex; align-items:center; gap:5px; cursor:pointer; white-space:nowrap; transition:transform .1s; font-family:inherit; }

/* ---- Roar / Boo meter ---- */
.st-zone { position:relative; z-index:5; background:var(--st-elev); border:.5px solid var(--st-eline); border-radius:14px; padding:9px 11px 11px; }
.st-zone-head { display:flex; justify-content:space-between; align-items:center; font-size:10px; margin-bottom:5px; }
.st-zone-head .roar { color:var(--st-home); }
.st-zone-head .boo  { color:var(--st-away2); }
.st-roarnum { color:var(--st-muted); }

.st-waverow { display:flex; align-items:center; gap:9px; }
.st-mute { width:30px; height:30px; flex:none; border-radius:50%; border:1px solid var(--st-home); background:transparent; color:var(--st-home); display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer; font-family:inherit; padding:0; }
.st-mute:focus-visible { outline:2px solid var(--st-home); outline-offset:2px; }
.st-wave { flex:1; display:flex; align-items:center; height:82px; position:relative; gap:1px; }
.st-wave-col { position:relative; z-index:1; flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1px; }
.st-bar { width:3px; border-radius:2px; height:2px; transition:height .07s linear; }
.st-divider { position:absolute; top:-2px; bottom:-2px; left:50%; width:2px; background:#4a5160; z-index:2; transition:left .12s linear; }

/* ---- "Hold to roar" full takeover (sits over the chat area, above the controls) ---- */
.st-roarbig { position:absolute; left:12px; right:12px; z-index:7; pointer-events:none; display:none; flex-direction:column; align-items:center; justify-content:center; gap:11px; background:linear-gradient(180deg,rgba(8,9,12,.97),rgba(30,18,4,.97)); border:1px solid #5a4a1a; border-radius:18px; padding:16px; text-align:center; }
.st-roarbig.is-on { display:flex; }                 /* top + height are set by JS so it never covers the controls */
.st-rb-mic { font-size:38px; color:var(--st-home); display:inline-flex; }
.st-rb-word { font-size:28px; font-weight:700; letter-spacing:.04em; color:#fff; line-height:1; }
.st-rb-col { position:relative; width:52px; height:100px; background:#15171d; border-radius:14px; overflow:hidden; border:1px solid #2b2f3a; }
.st-rb-fill { position:absolute; left:0; right:0; bottom:0; height:8%; background:linear-gradient(180deg,#FF4D3D,#FF8A1E 45%,var(--st-home)); transition:height .09s linear; }
.st-rb-tgt { position:absolute; left:6px; right:6px; top:16%; height:2px; background:rgba(255,255,255,.55); border-radius:2px; }
.st-rb-coach { font-size:13px; font-weight:600; color:#FFD98A; }
.st-rb-rec { display:flex; align-items:center; gap:7px; font-size:12px; color:#ffb3b3; }
.st-rb-dot { width:9px; height:9px; border-radius:50%; background:var(--st-red); display:inline-block; }

/* ---- Controls (sit above the takeover) ---- */
.st-controls { display:flex; gap:9px; margin-top:11px; position:relative; z-index:8; }
.st-btn { border-radius:14px; padding:13px 0; font-size:13px; display:flex; align-items:center; justify-content:center; gap:6px; transition:transform .1s; cursor:pointer; font-family:inherit; }
.st-btn:active { transform:scale(.95); }
.st-btn:focus-visible { outline:2px solid var(--st-home); outline-offset:2px; }
.st-cheer { flex:1;   background:var(--st-page); border:1px solid var(--st-home); color:var(--st-home); }   /* orange outline + text */
.st-roar  { flex:1.7; background:var(--st-home); border:none; color:var(--st-page); font-weight:500; gap:7px; } /* orange fill */
.st-boo   { flex:1;   background:var(--st-page); border:1px solid var(--st-away); color:var(--st-away2); }   /* blue outline + text */
.st-ico { display:inline-flex; }

/* ---- Composer: [input] [send] ---- */
.st-composer { display:flex; gap:8px; align-items:center; margin-top:11px; position:relative; z-index:5; }
.st-circle { width:40px; height:40px; flex:none; background:var(--st-elev); border:.5px solid var(--st-eline); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-family:inherit; }
.st-send { color:var(--st-muted); }
.st-input { flex:1; background:var(--st-elev); border:.5px solid var(--st-eline); border-radius:22px; padding:10px 15px; color:var(--st-faint); font-size:13px; }


.st-footer { font-size:11px; color:var(--st-faint); text-align:center; margin-top:9px; }
.st-footer b { color:var(--st-home); font-weight:600; }

.st svg { display:inline-block; vertical-align:-0.125em; }

@media (prefers-reduced-motion:reduce){ .st-live-dot{ animation:none !important; } }