:root{
  --ink:#0a0d14; --card:#11151f; --card2:#171c28; --line:#222838;
  --blue:#2E72FF; --red:#E5283A; --green:#5FCF97; --gold:#F2A53C; --violet:#B05CE6;
  --text:#e8ebf0; --muted:#9aa0aa; --dim:#6b7280;
  --r-sm:10px; --r:14px; --r-lg:18px;
  --pad:16px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--ink); color:var(--text);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; padding-bottom:48px;
}
button{font-family:inherit; cursor:pointer; color:inherit}
.muted{color:var(--muted)} .small{font-size:13px} .accent{color:var(--blue)}
.dim{color:var(--dim)}

/* ---- top bar ---- */
.topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:14px;
  padding:12px 18px; background:rgba(10,13,20,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--text) }
.brand-icon{ height:30px; width:30px; display:block; border-radius:7px }
.brand-word{ height:20px; width:auto; display:block }
.tabs{ display:flex; gap:4px; margin-left:8px }
.tab{ background:none; border:0; color:var(--muted); font-weight:700; font-size:15px;
  padding:8px 12px; border-radius:var(--r-sm); }
.tab.is-active{ color:var(--text); background:var(--card2) }
.topbar-right{ margin-left:auto; display:flex; gap:8px; align-items:center }
.pill{ border:1px solid var(--line); background:var(--card2); color:var(--text);
  font-weight:700; font-size:13px; padding:8px 12px; border-radius:999px; }
.pill.ghost{ background:transparent }
#proBtn{ border-color:var(--gold); color:var(--gold); background:rgba(242,165,60,.12) }

/* ---- views ---- */
main{ max-width:760px; margin:0 auto; padding:18px }
.view{ display:none } .view.is-active{ display:block }
.view-title{ font-size:22px; font-weight:800; margin:.2em 0 .1em }

/* ---- setup ---- */
.hero{ font-size:30px; font-weight:900; letter-spacing:-.5px; margin:.3em 0 .15em; line-height:1.1 }
.hero-sub{ color:var(--muted); margin:0 0 22px }
.field-label{ display:block; font-size:12px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--muted); margin:18px 0 8px }
.topic-row{ display:flex; gap:8px }
.topic-input{
  width:100%; background:var(--card); border:1px solid var(--line); color:var(--text);
  border-radius:var(--r); padding:13px 14px; font-size:16px; outline:none;
}
.topic-input:focus{ border-color:var(--blue) }
.topic-input.area{ resize:vertical; line-height:1.45 }
.icon-btn{ flex:0 0 auto; width:48px; border:1px solid var(--line); background:var(--card);
  border-radius:var(--r); font-size:20px }
.topic-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px }
.chip{ background:var(--card2); border:1px solid var(--line); color:var(--muted);
  border-radius:999px; padding:6px 11px; font-size:13px; }
.chip:hover{ color:var(--text); border-color:var(--blue) }

.seg{ display:inline-flex; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:3px; gap:3px; flex-wrap:wrap }
.seg-btn{ border:0; background:none; color:var(--muted); font-weight:700; font-size:14px;
  padding:8px 13px; border-radius:11px; }
.seg-btn.is-active{ background:var(--blue); color:#fff }

.rounds-row,.mode-row{ display:flex; flex-direction:column }
.rounds-row{ flex-direction:row; align-items:center; gap:12px; flex-wrap:wrap }
.rounds-row .field-label{ margin:18px 0 8px } .rounds-row .seg{ margin-top:0 }
.free-note{ color:var(--muted); font-size:13px; margin-left:auto }

/* ---- roster ---- */
.roster{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px }
.fighter-card{ position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:12px; text-align:left; display:flex; gap:10px; align-items:center;
  transition:border-color .15s, transform .1s; }
.fighter-card:active{ transform:scale(.98) }
.fighter-card.sel{ border-color:var(--pick); box-shadow:0 0 0 1px var(--pick) }
.fighter-card .seat-no{ position:absolute; top:-7px; right:-7px; width:22px; height:22px;
  border-radius:50%; color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center }
.avatar{ flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-weight:900; font-size:17px; border:2px solid }
.fighter-meta{ min-width:0 }
/* Cards are ~175px wide, so single-line names truncated ("The Firebr…"). Let the
   name wrap fully (it's short) and clamp the tagline to 2 lines instead of cutting
   mid-word. */
.fighter-name{ font-weight:800; font-size:15px; line-height:1.2; overflow-wrap:anywhere }
.fighter-tag{ color:var(--muted); font-size:12px; line-height:1.3; margin-top:2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.fighter-engine{ font-size:11px; color:var(--dim); margin-top:2px }

/* ---- fight button ---- */
.btn-fight{ width:100%; margin-top:24px; border:0; border-radius:var(--r);
  background:linear-gradient(90deg,var(--blue),var(--red)); color:#fff; font-weight:800;
  font-size:17px; padding:15px; letter-spacing:.2px; }
.btn-fight:disabled{ opacity:.4; filter:grayscale(.3) }
.btn-fight:active:not(:disabled){ transform:scale(.99) }

/* ---- stage / turns ---- */
.stage-head{ text-align:center; padding:8px 0 16px }
.matchup{ display:flex; align-items:flex-start; justify-content:center; gap:18px }
.mu-col{ flex:1; max-width:170px; text-align:center }
.mu-vs{ font-weight:900; color:#fff; background:var(--blue); border-radius:9px;
  padding:3px 9px; font-size:14px; margin-top:14px }
.mu-name{ font-weight:800; margin-top:6px } .mu-tag{ color:var(--dim); font-size:12px }
.stage-topic{ color:var(--muted); margin-top:12px; font-weight:600 }

.turns{ display:flex; flex-direction:column; gap:12px; margin-top:8px }
.turn{ background:var(--card); border:1px solid var(--line); border-left:3px solid var(--side);
  border-radius:var(--r); padding:13px 15px; animation:rise .3s ease both }
.turn.judge{ border-left-color:var(--green); background:rgba(95,207,151,.06) }
.turn.speaking{ box-shadow:0 0 0 1px var(--side) }
.turn-head{ display:flex; align-items:center; gap:9px; margin-bottom:7px }
.turn-head .avatar{ width:30px; height:30px; font-size:13px }
.turn-who{ font-weight:800; font-size:14px; color:var(--side) }
.turn-role{ color:var(--dim); font-size:12px; margin-left:auto }
.turn-body{ font-size:15.5px; line-height:1.6 }
.turn-body p{ margin:.4em 0 } .turn-body strong{ color:#fff }
.caret{ display:inline-block; width:7px; height:16px; background:var(--blue);
  vertical-align:-3px; margin-left:1px; animation:blink 1s step-end infinite }
.turn-body table{ border-collapse:collapse; width:100%; margin:.5em 0; font-size:14px }
.turn-body th,.turn-body td{ border:1px solid var(--line); padding:5px 9px; text-align:center }
.turn-body th{ background:var(--card2); color:var(--text) }

.stage-foot{ margin-top:18px }
.vote-row{ display:flex; flex-direction:column; gap:8px }
.vote-btn{ display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--vline);
  border-radius:var(--r); padding:11px 14px; font-weight:700; color:var(--text) }
.vote-btn .avatar{ width:26px; height:26px; font-size:12px }
.won-card{ background:var(--card); border:1px solid var(--wc); border-radius:var(--r-lg);
  padding:18px; text-align:center; animation:pop .3s ease both }
.won-trophy{ font-size:19px; font-weight:800 }
.elo-line{ margin-top:6px; font-weight:800 }
.stage-buttons{ display:flex; gap:10px; margin-top:14px }
.stage-buttons button{ flex:1; border:1px solid var(--line); background:var(--card2);
  border-radius:var(--r); padding:12px; font-weight:700; color:var(--text) }
.stage-buttons .primary{ border:0; background:linear-gradient(90deg,var(--blue),var(--red)); color:#fff }

/* ---- online + ranks ---- */
.online-head{ margin-bottom:14px }
.online-actions{ display:flex; gap:8px; margin:14px 0 }
.champion-bar{ }
.champion-card{ background:var(--card); border:1px solid var(--blue); border-radius:var(--r);
  padding:13px; display:flex; gap:11px; align-items:center }
.challengers,.rank-list{ display:flex; flex-direction:column; gap:9px; margin-top:6px }
.ch-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:12px; display:flex; gap:11px; align-items:center }
.ch-meta{ flex:1; min-width:0 }
.ch-name{ font-weight:800 } .ch-rec{ color:var(--muted); font-size:12px }
.ch-rating{ font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums }
.fight-btn{ border:0; background:linear-gradient(90deg,var(--blue),var(--red)); color:#fff;
  font-weight:800; border-radius:999px; padding:9px 16px }
.tier-pill{ font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px }

.podium{ display:flex; align-items:flex-end; justify-content:center; gap:10px; margin:18px 0 }
.podium-spot{ text-align:center; flex:1; max-width:120px }
.podium-bar{ border-radius:10px 10px 0 0; margin-top:8px; display:flex; align-items:flex-start;
  justify-content:center; padding-top:6px; font-weight:900; color:rgba(255,255,255,.85) }
.rank-row{ display:flex; align-items:center; gap:11px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); padding:10px 13px }
.rank-no{ width:24px; text-align:center; font-weight:800; color:var(--muted) }

/* ---- modals ---- */
.modal-backdrop{ position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.66);
  display:flex; align-items:center; justify-content:center; padding:18px; animation:fade .2s ease }
/* The `display:flex` above (author origin) outranks the UA `[hidden]{display:none}`
   rule, so without this the `hidden` attribute can't dismiss a modal — it stays
   stuck open (e.g. the publish modal freezing on "Published!"). Higher specificity
   re-asserts hidden. */
.modal-backdrop[hidden]{ display:none }
.modal{ position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:24px; max-width:380px; width:100%; text-align:center; animation:pop .25s ease both }
.modal-wide{ max-width:440px; text-align:left }
.modal-match{ max-width:500px; text-align:left; max-height:88vh; overflow-y:auto }
.modal-x{ position:absolute; top:10px; right:14px; background:none; border:0; font-size:24px; color:var(--muted) }
/* Online match result: full debate transcript (mirrors the iOS MatchResultView). */
.mt-head{ font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase;
  letter-spacing:.05em; margin:14px 0 8px }
.match-transcript{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px }
.mt-turn{ background:var(--card2); border:1px solid var(--line); border-left:3px solid var(--line);
  border-radius:10px; padding:9px 11px }
.mt-who{ font-weight:800; font-size:13px; margin-bottom:3px }
.mt-body{ font-size:13px; line-height:1.5; color:var(--text) }
.mt-body p{ margin:.25em 0 } .mt-body p:first-child{ margin-top:0 } .mt-body p:last-child{ margin-bottom:0 }
.modal h3{ margin:.2em 0 .4em; font-size:20px }
.paywall-badge,.tier-pill.pro{ display:inline-block; background:linear-gradient(90deg,var(--blue),var(--red));
  color:#fff; font-weight:900; font-size:12px; letter-spacing:1px; padding:4px 12px; border-radius:999px; margin-bottom:10px }
.link-btn{ background:none; border:0; color:var(--blue); font-weight:700; margin-top:12px; display:block; width:100%; }
.restore-msg{ font-size:14px; margin-top:10px; min-height:18px }
.restore-msg.err{ color:var(--red) } .restore-msg.ok{ color:var(--green) }

/* ---- toast ---- */
.toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:60;
  background:var(--card2); border:1px solid var(--line); color:var(--text);
  padding:11px 18px; border-radius:999px; font-weight:600; box-shadow:0 8px 30px rgba(0,0,0,.4); animation:rise .25s ease }

/* ---- confetti ---- */
.confetti{ position:fixed; inset:0; pointer-events:none; z-index:55; overflow:hidden }
.confetti i{ position:absolute; top:-16px; width:8px; height:13px; border-radius:2px; animation:fall linear forwards }

@keyframes rise{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
@keyframes pop{ from{opacity:0; transform:scale(.95)} to{opacity:1; transform:none} }
@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes blink{ 50%{opacity:0} }
@keyframes fall{ to{ transform:translateY(110vh) rotate(var(--spin)); opacity:.9 } }

@media(max-width:560px){
  .hero{ font-size:25px } main{ padding:14px }
  .topbar{ gap:7px; padding:10px 12px }
  .brand-word{ display:none }            /* compact: app-icon tile only on phones */
  .brand-icon{ height:28px; width:28px; border-radius:6px }
  .tabs{ gap:2px; margin-left:2px }
  .tabs .tab{ padding:7px 8px; font-size:13.5px }
  .topbar-right{ gap:6px }
  .season-chip{ display:none }       /* season is surfaced on the Ranks screen instead */
  .icon-toggle{ width:32px; height:32px; font-size:14px }
  #getAppBtn{ display:none }
}

/* ===================================================================
   v2 — surfacing the full arena + juice (tournaments, feed, h2h,
   season, daily, fighter editor/profiles, VS intro, KO, sound, etc.)
   =================================================================== */

/* topbar additions */
.season-chip{ border:1px solid var(--violet); color:var(--violet); background:rgba(176,92,230,.12);
  font-weight:800; font-size:12px; padding:7px 11px; border-radius:999px; letter-spacing:.3px }
.icon-toggle{ width:36px; height:36px; border:1px solid var(--line); background:var(--card2);
  border-radius:999px; font-size:15px; display:inline-flex; align-items:center; justify-content:center }
.icon-toggle.off{ opacity:.5 }

/* daily challenge card */
.daily-card{ display:flex; align-items:center; gap:12px; background:linear-gradient(100deg,rgba(46,114,255,.14),rgba(176,92,230,.12));
  border:1px solid var(--line); border-radius:var(--r); padding:13px 15px; margin:0 0 18px }
.daily-card .dc-bolt{ font-size:20px }
.daily-card .dc-meta{ flex:1; min-width:0 }
.daily-card .dc-kicker{ font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--blue) }
.daily-card .dc-topic{ font-weight:800; font-size:15px; margin-top:1px; overflow-wrap:anywhere }
.daily-card .dc-go{ flex:0 0 auto; border:0; background:linear-gradient(90deg,var(--blue),var(--violet)); color:#fff;
  font-weight:800; border-radius:999px; padding:9px 14px; font-size:13px }

/* secondary actions row under hero */
.quick-row{ display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 4px }
.ghost-btn{ border:1px solid var(--line); background:var(--card2); color:var(--text);
  font-weight:700; font-size:13px; padding:9px 13px; border-radius:999px }
.ghost-btn:active{ transform:scale(.98) }

/* topic packs */
.pack-row{ display:flex; gap:7px; flex-wrap:wrap; margin-top:4px }
.pack-chip{ background:transparent; border:1px solid var(--line); color:var(--muted);
  border-radius:999px; padding:5px 10px; font-size:12px; font-weight:700 }
.pack-chip.is-active{ color:#fff; background:var(--blue); border-color:var(--blue) }

/* round-table role inputs */
.role-list{ display:flex; flex-direction:column; gap:8px; margin-top:10px }
.role-item{ display:flex; align-items:center; gap:9px }
.role-item .avatar{ width:28px; height:28px; font-size:12px }
.role-item input{ flex:1; background:var(--card); border:1px solid var(--line); color:var(--text);
  border-radius:var(--r-sm); padding:9px 11px; font-size:14px; outline:none }
.role-item input:focus{ border-color:var(--blue) }

/* ability + tuning chips on fighter cards */
.card-extra{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:6px }
.abil-chip{ font-size:10px; font-weight:800; letter-spacing:.2px; padding:2px 7px; border-radius:999px;
  background:var(--card2); border:1px solid var(--line); color:var(--muted) }
.rec-chip{ font-size:11px; font-weight:800; color:var(--muted); font-variant-numeric:tabular-nums }
.rate-chip{ font-size:12px; font-weight:900; color:var(--gold); font-variant-numeric:tabular-nums; margin-left:auto }

/* fighter editor */
.editor-section{ margin-top:16px }
.swatch-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px }
.swatch{ width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer; position:relative }
.swatch.on{ box-shadow:0 0 0 2px var(--ink), 0 0 0 4px #fff }
.voice-select{ width:100%; background:var(--card); border:1px solid var(--line); color:var(--text);
  border-radius:var(--r); padding:11px 12px; font-size:15px; margin-top:8px }
.abil-pick{ display:flex; gap:7px; flex-wrap:wrap; margin-top:8px }
.abil-pick button{ border:1px solid var(--line); background:var(--card2); color:var(--muted);
  font-weight:700; font-size:12px; padding:7px 11px; border-radius:999px; text-align:left }
.abil-pick button.on{ color:#fff; background:var(--violet); border-color:var(--violet) }
.slider-row{ display:flex; align-items:center; gap:12px; margin-top:12px }
.slider-row label{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
  color:var(--muted); width:78px; flex:0 0 auto }
.slider-row input[type=range]{ flex:1; accent-color:var(--blue); height:22px }
.slider-row .val{ width:42px; text-align:right; font-weight:800; font-variant-numeric:tabular-nums; font-size:13px }

/* skeletons */
.skel{ display:flex; flex-direction:column; gap:9px }
.skel-row{ height:60px; border-radius:var(--r); background:linear-gradient(90deg,var(--card) 25%,var(--card2) 37%,var(--card) 63%);
  background-size:400% 100%; animation:shimmer 1.3s ease infinite }
@keyframes shimmer{ from{background-position:100% 0} to{background-position:0 0} }

/* recent-bouts feed */
.feed-strip{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px }
.feed-head{ display:flex; align-items:center; gap:8px; margin-bottom:2px }
.feed-head .live-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(95,207,151,.6); animation:pulse 1.8s infinite }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(95,207,151,.5)} 70%{box-shadow:0 0 0 7px rgba(95,207,151,0)} 100%{box-shadow:0 0 0 0 rgba(95,207,151,0)} }
.feed-row{ display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:10px 13px; text-align:left; width:100% }
.feed-row .fr-body{ flex:1; min-width:0 }
.feed-row .fr-line{ font-weight:700; font-size:13.5px; overflow:hidden; text-overflow:ellipsis }
.feed-row .fr-topic{ color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.feed-row .fr-score{ font-weight:900; font-variant-numeric:tabular-nums; color:var(--muted); font-size:13px }
.fr-vs{ color:var(--dim); font-weight:700 }

/* tournaments */
.t-picker{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-top:8px;
  max-height:280px; overflow:auto; padding:2px }
.t-pick{ display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:9px; text-align:left }
.t-pick.on{ border-color:var(--blue); box-shadow:0 0 0 1px var(--blue) }
.t-pick .avatar{ width:30px; height:30px; font-size:13px }
.t-pick .tp-name{ font-weight:700; font-size:13px; overflow-wrap:anywhere }
.t-pick .tp-seat{ margin-left:auto; font-weight:900; color:var(--blue) }
.bracket-head{ text-align:center; margin:6px 0 14px }
.bracket-wrap{ overflow-x:auto; padding-bottom:6px }
.bracket{ display:flex; gap:18px; min-width:max-content; align-items:stretch }
.bracket-col{ display:flex; flex-direction:column; justify-content:space-around; gap:10px; min-width:150px }
.round-label{ text-align:center; font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  color:var(--muted); margin-bottom:2px }
.bx{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px;
  display:flex; flex-direction:column; gap:4px; min-width:140px }
.bx .bx-f{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--dim) }
.bx .bx-f .dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto }
.bx .bx-f.win{ color:var(--text) }
.bx .bx-f .sc{ margin-left:auto; font-variant-numeric:tabular-nums; font-weight:800 }
.bx.next{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) }
.bx.next::after{ content:"ON DECK"; font-size:9px; font-weight:900; letter-spacing:.6px; color:var(--gold) }
.bx.wait{ opacity:.55 }
.tourn-champion{ text-align:center; background:var(--card); border:1px solid var(--gold);
  border-radius:var(--r-lg); padding:18px; margin-top:14px }
.tourn-champion .tc-crown{ font-size:30px } .tourn-champion .tc-name{ font-weight:900; font-size:20px; margin-top:4px }
.tlist-row{ display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:10px 13px; text-align:left; width:100% }
.tlist-row .tl-meta{ flex:1; min-width:0 } .tlist-row .tl-name{ font-weight:800; font-size:14px }
.tlist-row .tl-sub{ color:var(--muted); font-size:12px }
.status-pill{ font-size:10px; font-weight:900; padding:2px 8px; border-radius:999px; letter-spacing:.4px }
.status-pill.live{ background:rgba(95,207,151,.16); color:var(--green) }
.status-pill.done{ background:var(--card2); color:var(--muted) }

/* fighter profile modal */
.profile-top{ display:flex; align-items:center; gap:12px }
.profile-top .pt-name{ font-weight:900; font-size:19px }
.profile-stats{ display:flex; gap:10px; margin:14px 0 }
.pstat{ flex:1; background:var(--card2); border-radius:var(--r-sm); padding:10px; text-align:center }
.pstat .ps-num{ font-weight:900; font-size:19px; font-variant-numeric:tabular-nums }
.pstat .ps-lab{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-top:2px }
.profile-badges{ display:flex; gap:7px; flex-wrap:wrap; margin:6px 0 }
.badge{ font-size:11px; font-weight:800; padding:4px 9px; border-radius:999px;
  background:rgba(242,165,60,.14); color:var(--gold); border:1px solid rgba(242,165,60,.3) }
.profile-actions{ display:flex; gap:9px; margin-top:14px }
.profile-actions button{ flex:1; border:1px solid var(--line); background:var(--card2); color:var(--text);
  font-weight:700; border-radius:var(--r); padding:11px }
.profile-actions .danger{ color:var(--red); border-color:rgba(229,40,58,.4) }
.mini-match{ display:flex; align-items:center; gap:9px; padding:8px 0; border-top:1px solid var(--line) }
.mini-match .mm-res{ font-weight:900; font-size:12px; width:18px; text-align:center }
.mini-match .mm-topic{ flex:1; min-width:0; font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mini-match .mm-sc{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums }

/* listen (web speech) controls on a finished debate */
.listen-row{ display:flex; align-items:center; gap:8px; margin-top:10px }
.listen-btn{ border:1px solid var(--line); background:var(--card2); color:var(--text);
  font-weight:700; border-radius:999px; padding:9px 14px; font-size:13px }
.listen-btn.playing{ border-color:var(--green); color:var(--green) }

/* VS intro overlay */
.vs-intro{ position:fixed; inset:0; z-index:80; background:rgba(6,8,13,.92); backdrop-filter:blur(4px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer }
.vs-kicker{ font-size:12px; font-weight:900; letter-spacing:3px; color:var(--muted); text-transform:uppercase;
  animation:rise .3s ease both }
.vs-stage{ display:flex; align-items:center; gap:8px; margin-top:4px }
.vs-side{ text-align:center; width:140px }
.vs-side .avatar{ width:74px; height:74px; font-size:30px }
.vs-side .vs-name{ font-weight:900; font-size:17px; margin-top:8px; line-height:1.15 }
.vs-side .vs-tag{ font-size:12px; color:var(--dim); margin-top:2px }
.vs-side.left{ animation:slideL .5s cubic-bezier(.2,.8,.2,1) both }
.vs-side.right{ animation:slideR .5s cubic-bezier(.2,.8,.2,1) both }
.vs-clash{ font-size:34px; font-weight:900; color:#fff; background:linear-gradient(90deg,var(--blue),var(--red));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:clash .45s ease both .15s }
.vs-topic{ color:var(--muted); font-weight:700; margin-top:10px; max-width:320px; text-align:center; padding:0 18px;
  animation:rise .3s ease both .25s }
.vs-skip{ font-size:11px; color:var(--dim); margin-top:16px }
@keyframes slideL{ from{opacity:0; transform:translateX(-60px)} to{opacity:1; transform:none} }
@keyframes slideR{ from{opacity:0; transform:translateX(60px)} to{opacity:1; transform:none} }
@keyframes clash{ 0%{opacity:0; transform:scale(.4)} 60%{transform:scale(1.25)} 100%{opacity:1; transform:scale(1)} }

/* KO flash + screen shake */
.ko-flash{ position:fixed; inset:0; z-index:70; pointer-events:none; display:flex; align-items:center; justify-content:center }
.ko-flash span{ font-size:46px; font-weight:900; letter-spacing:2px; color:#fff; padding:10px 26px; border-radius:14px;
  animation:koPop .9s ease both }
@keyframes koPop{ 0%{opacity:0; transform:scale(.5)} 25%{opacity:1; transform:scale(1.1)} 75%{opacity:1; transform:scale(1)} 100%{opacity:0; transform:scale(1)} }
@keyframes shake{ 0%,100%{transform:none} 20%{transform:translate(-5px,2px)} 40%{transform:translate(5px,-2px)} 60%{transform:translate(-4px,-1px)} 80%{transform:translate(4px,1px)} }
.shake{ animation:shake .45s ease }

/* accessibility */
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:6px }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

@media(min-width:1100px){ main{ max-width:880px } }
@media(max-width:560px){
  .vs-side{ width:120px } .vs-side .avatar{ width:62px; height:62px; font-size:26px }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important }
  .skel-row{ animation:none } .live-dot,.feed-head .live-dot{ animation:none }
}