/*
 * Visual budget — what may be loud, and what it means. Everything not on this list is ink or grey.
 *   red     = happening right now (正在打), nothing else
 *   green   = a time that is set (已约) and good states (出线, 众望所归)
 *   amber   = needs someone's attention (待约, 爆冷, 抽签)
 *   accent  = the brand and the things you can tap: buttons, links, progress
 *   bold    = the answer on a line: the winner, the time of the next game, the one thing to do
 *   faction colour = a small dot before the name, never a filled box
 * One bold and one coloured tag per match row; a decided match keeps only its winner in bold.
 * Emoji only where it invites an action (🔮 on an open match), not as decoration on every row.
 */
:root { --bg:#f6f4ef; --card:#fff; --ink:#1f2328; --muted:#6b7280; --line:#e5e1d8; --accent:#8b5a2b; --ok:#2f7d4f; --warn:#b45309;
  --head:#2b2118; --head-ink:#f3e9d8; --code:#f0ece4; --tag:#eee; --ok-bg:#dcefe3; --warn-bg:#fdecd4; --sim-bg:#fffaf2; --err:#b91c1c; --lift:0%; color-scheme: light; }
:root[data-theme="dark"] { --bg:#15171b; --card:#1e2127; --ink:#e6e3dc; --muted:#9aa0a6; --line:#2e3239; --accent:#c9955a; --ok:#5fbf7f; --warn:#e0a24a;
  --head:#0f1114; --head-ink:#e6e3dc; --code:#2a2e36; --tag:#2e3239; --ok-bg:#1f3a2a; --warn-bg:#40301a; --sim-bg:#23201a; --err:#f08080; --lift:35%; color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#15171b; --card:#1e2127; --ink:#e6e3dc; --muted:#9aa0a6; --line:#2e3239; --accent:#c9955a; --ok:#5fbf7f; --warn:#e0a24a;
    --head:#0f1114; --head-ink:#e6e3dc; --code:#2a2e36; --tag:#2e3239; --ok-bg:#1f3a2a; --warn-bg:#40301a; --sim-bg:#23201a; --err:#f08080; --lift:35%; color-scheme: dark; }
}
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--ink); background:var(--bg); }
header { background:var(--head); background:linear-gradient(180deg, var(--head) 0%, var(--head) 70%, color-mix(in srgb, var(--head) 85%, var(--accent)) 100%); color:var(--head-ink); padding:10px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; border-bottom:1px solid var(--line); border-bottom-color:color-mix(in srgb, var(--accent) 35%, transparent); position:sticky; top:0; z-index:10; }
header h1 { font-size:17px; margin:0; display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:.02em; }
.brand { display:inline-flex; align-items:center; gap:9px; color:var(--head-ink); text-decoration:none; margin:0; }
.logo { width:30px; height:30px; flex:none; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.brand:hover .logo { transform:rotate(60deg); } /* an astrolabe turns */
/* the mark: an astrolabe in the header's gold — read the stars, guess the winner; the white dot on its rim is 白星 */
:root { --gold:#c9955a; }
.wordmark { display:flex; flex-direction:column; font-weight:800; letter-spacing:.1em; font-size:17px; line-height:1; }
.wordmark small { font-size:8px; font-weight:500; letter-spacing:.2em; opacity:.6; margin-top:3px; }
.subtitle { font-size:13px; opacity:.7; font-weight:400; letter-spacing:0; margin-left:4px; }
header a { color:var(--head-ink); opacity:.85; margin-left:14px; font-size:14px; }
header .muted { color:var(--head-ink); opacity:.75; }
.theme-btn { background:transparent; color:var(--head-ink); border:1px solid rgba(255,255,255,.25); padding:2px 8px; }
main { max-width:1100px; margin:0 auto; padding:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:14px; }
.card.sim { border-color:var(--warn); background:var(--sim-bg); }
h2 { font-size:16px; margin:0 0 10px; }
h3 { font-size:14px; margin:12px 0 6px; color:var(--muted); }
button, input, textarea, select { font:inherit; }
button { border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:8px; padding:6px 12px; cursor:pointer; }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.small { padding:2px 8px; font-size:13px; }
button:disabled { opacity:.5; cursor:default; }
input, textarea, select { border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:8px; padding:6px 10px; width:100%; }
textarea { min-height:120px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; }
table { border-collapse:collapse; width:100%; font-size:14px; }
th, td { text-align:left; padding:4px 6px; border-bottom:1px solid var(--line); white-space:nowrap; }
.muted { color:var(--muted); font-size:13px; }
.tag { display:inline-block; font-size:12px; padding:0 6px; border-radius:6px; background:var(--tag); margin-left:4px; }
.tag.ok { background:var(--ok-bg); color:var(--ok); }
.tag.warn { background:var(--warn-bg); color:var(--warn); }
.match { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.match .vs { flex:1; min-width:160px; }
.match .win { font-weight:600; }
code { background:var(--code); padding:1px 5px; border-radius:4px; }
a { color:var(--accent); }
.error { color:var(--err); }
.hidden { display:none !important; }
.tabs { display:flex; gap:4px; margin-bottom:12px; border-bottom:1px solid var(--line); }
.tabs button { border:none; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--muted); padding:8px 14px; font-weight:600; }
.tabs button.on { color:var(--ink); border-bottom-color:var(--accent); }
/* faction: a coloured dot before the name — the hue is enough to tell them apart, and six boxes per screen were
   louder than the status tags (待约/已约), which must stay the loudest thing in a row */
.fchip { --c:#666; display:inline-flex; align-items:center; gap:4px; color:color-mix(in srgb, var(--ink) 85%, var(--muted)); font-size:12.5px; line-height:18px; white-space:nowrap; }
.fchip::before { content:''; width:8px; height:8px; border-radius:50%; background:color-mix(in srgb, var(--c), white var(--lift)); /* lifted on dark, where navy and purple would sink */ flex:none; box-shadow:0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
.fsel { width:auto; padding:2px 4px; font-size:13px; }
.fsel.mine { border-color:var(--accent); }
.match.mine { background:var(--sim-bg); margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:6px; }
.mycard { border-color:var(--accent); }
.tasks { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.tasks li { display:flex; align-items:center; gap:8px; font-size:14px; }
.tasks li .text { flex:1; min-width:0; }
.tasks li .dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--muted); }
.tasks li.warn .dot { background:var(--warn); }
.tasks li.ok .dot { background:var(--ok); }
.tasks li.soft { color:var(--muted); }
.tasks li.soft .dot { background:var(--line); }
.tasks li button { flex:none; }
.me-strip { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px; font-size:13px; padding:6px 8px; border:1px dashed var(--line); border-radius:8px; }
/* the spectator's line under it: nickname + record once they have guessed, one grey sentence before */
.audline { margin-top:8px; font-size:13px; }
.audline .mebar { display:inline-block; vertical-align:middle; }
.audline a { color:var(--muted); text-decoration:underline dotted; }
.audline a:hover { color:var(--ink); }
.upnext .poster { margin-left:auto; color:var(--muted); font-size:12px; }
/* 预言家榜: players and spectators side by side, stacked on a phone */
.boards { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:4px 20px; }
.boards h3 { margin-top:8px; }
.admin-board { border-color:var(--line); }
.mycard .ranklink { color:var(--muted); text-decoration:none; font-size:13px; }
.mycard .ranklink::after { content:' ›'; }
.mycard .ranklink:hover { color:var(--ink); }
.mycard .guess { margin-top:4px; }
.mycard .guess a { color:var(--muted); text-decoration:none; font-weight:400; }
.mycard .guess a:hover { color:var(--ink); }
.mycard .idle { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; font-size:13px; }
/* 🔮 prediction toy */
.match .poll { width:100%; display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding-left:40px; font-size:13px; }
.match .orb { font-size:12px; white-space:nowrap; }
.match button.orb { color:var(--muted); }
.match button.orb:hover { color:var(--ink); }
.match .poll.done { opacity:.85; }
.pbtn { border-radius:999px; padding:2px 10px; transition:transform .15s var(--ease), background-color .2s, border-color .2s; }
.pbtn:hover { transform:translateY(-1px); }
.pbtn.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.pbar { display:inline-block; width:70px; height:6px; border-radius:3px; background:var(--tag); overflow:hidden; }
.pbar i { display:block; height:100%; background:var(--accent); border-radius:3px; transition:width .6s var(--ease); }
.who { position:relative; display:inline-flex; align-items:center; }
.who input { width:9.5em; padding:3px 8px; font-size:13px; }
.mebar { display:inline-flex; align-items:center; }
.mebar.named input { font-weight:600; }
.mebar .x { border:0; background:none; color:var(--muted); padding:0 6px; font-size:15px; line-height:1; cursor:pointer; }
.melist { position:absolute; top:calc(100% + 4px); left:0; z-index:30; min-width:240px; max-height:280px; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:0 10px 30px -12px rgba(0,0,0,.35); font-size:13px; font-weight:400; }
.melist .row { display:flex; justify-content:space-between; gap:14px; padding:7px 10px; cursor:pointer; white-space:nowrap; }
.melist .row.sel, .melist .row[data-i]:hover { background:color-mix(in srgb, var(--accent) 10%, var(--card)); }
.melist .row.muted { cursor:default; }
.card.lifted { position:relative; z-index:40; }
.summary .head { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.summary .head h2 { margin:0; }
.summary .progress { margin-top:4px; }
details.rules { margin-top:8px; font-size:13px; }
details.rules summary { cursor:pointer; color:var(--muted); font-size:12px; user-select:none; }
details.rules > div { margin-top:6px; }
.tabs .cnt { font-weight:400; font-size:11px; color:var(--muted); margin-left:4px; }
.tabs button { white-space:nowrap; }
.tabs { overflow-x:auto; }
footer { text-align:center; padding:18px 16px 28px; font-size:12px; }
footer a { color:var(--muted); }
.progress { display:flex; align-items:center; gap:10px; margin-top:8px; font-size:13px; color:var(--muted); flex-wrap:wrap; }
.progress .bar { flex:0 0 140px; height:6px; border-radius:3px; background:var(--tag); overflow:hidden; }
.progress .bar span { display:block; height:100%; background:var(--accent); border-radius:3px; transition:width .6s var(--ease); }
.timebox { border-left:2px solid var(--accent); padding-left:8px !important; margin-top:4px; }
.timebox input[type=datetime-local] { padding:2px 6px; font-size:13px; }
.match .mid { width:34px; }
.match .games { width:100%; display:flex; flex-direction:column; gap:2px; padding-left:40px; font-size:13px; }
.match .game { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.match .game .gwin { font-weight:600; margin-left:auto; }
.match .rec { width:100%; display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding-left:40px; }
.match .videos { width:100%; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-left:40px; font-size:13px; }
.match .status { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13px; }
/* the room code is an identifier for the two players, not a state: plain monospace, no box */
.match .status code { background:none; padding:0; color:var(--muted); font-size:12px; letter-spacing:.03em; }
.match .status a { text-decoration:none; }
.match .rowend { margin-left:auto; }
.away { margin:6px 0 2px; }
/* writing down the agreed time: tap a slot */
.match .game.chips { gap:4px 10px; }
.match .game.chips .dayset { display:inline-flex; align-items:center; gap:4px; }
.match .game.chips .chip { border-color:color-mix(in srgb, var(--accent) 60%, var(--line)); color:var(--accent); padding:1px 7px; font-size:12.5px; font-variant-numeric:tabular-nums; border-radius:999px; }
.match .game.chips .chip:hover { background:var(--accent); color:var(--card); }
/* another time: folded to two words until needed */
.match details.other { display:inline-block; }
.match details.other > summary { cursor:pointer; list-style:none; text-decoration:underline dotted; }
.match details.other > summary::-webkit-details-marker { display:none; }
.match details.other[open] > summary { margin-right:6px; }
.match details.other .row { display:inline-flex; gap:6px; vertical-align:middle; }
.match .timebox { gap:6px; margin-top:4px; }
/* a match being played right now */
.tag.live { background:color-mix(in srgb, #e5484d 18%, transparent); color:#e5484d; font-weight:600; margin-left:0; white-space:nowrap; }
.livedot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#e5484d; margin-right:5px; vertical-align:1px; animation:livepulse 1.4s ease-in-out infinite; }
@keyframes livepulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(.8); } }
@media (prefers-reduced-motion: reduce) { .livedot { animation:none; } }
.livetext { color:#e5484d; font-weight:600; }
.livenow { display:flex; flex-direction:column; gap:6px; margin-top:10px; padding:8px 10px; border:1px solid color-mix(in srgb, #e5484d 45%, transparent); border-radius:8px; background:color-mix(in srgb, #e5484d 7%, transparent); }
.livenow > div { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.livenow .who { color:var(--ink); font-weight:600; text-decoration:none; }
.livenow .watch, .match .watch { font-weight:600; white-space:nowrap; }
.match.live { border-left:2px solid #e5484d; padding-left:8px; }
.tabs .cnt.live { color:#e5484d; }
.match .livelink { flex:1; min-width:150px; width:auto; padding:4px 8px; font-size:13px; }
/* matches with a time, soonest first */
.upnext { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; font-size:13px; margin-top:8px; }
.upnext a { color:var(--ink); text-decoration:none; white-space:nowrap; }
.upnext a b { font-weight:600; margin-right:2px; }
.upnext a:hover { text-decoration:underline; }
/* 夺冠概率: the top three on the first screen, the table on the 排名 tab */
.oddsline { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; font-size:13px; margin-top:8px; }
.oddsline a { color:var(--ink); text-decoration:none; white-space:nowrap; }
.oddsline a.me b { color:var(--accent); }
.oddsline a:hover { text-decoration:underline; }
.move { font-size:11px; margin-left:4px; font-weight:600; }
.move.warn { color:var(--warn); }
.bar.odds { width:72px; }
.bar.odds i { background:var(--accent); }
.oddst td b { font-variant-numeric:tabular-nums; }
.spark { display:block; overflow:visible; }
.spark polyline { fill:none; stroke:var(--accent); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.spark circle { fill:var(--accent); }
/* the open matches: the pair on one line, the two bets on the next (or beside it when wide) */
.calls .call { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 16px; padding:6px 0; border-bottom:1px solid var(--line); font-size:14px; }
.calls .call:last-child { border-bottom:none; }
.calls .pair { flex:1 1 260px; min-width:0; }
.calls .bets { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 14px; font-size:13px; }
.calls .plink { color:var(--ink); text-decoration:none; }
.calls .plink:hover { text-decoration:underline; }
.calls .tag { margin-left:0; }
.tally { margin-top:8px; }
/* an undecided place: never looks like a player's name */
.slot { display:inline-flex; align-items:center; border:1px dashed var(--muted); border-radius:6px; font-size:12px; font-weight:400; color:var(--muted); vertical-align:1px; line-height:1.5; white-space:nowrap; max-width:100%; overflow:hidden; }
.slot i { font-style:normal; font-size:11px; background:var(--tag); padding:0 5px; letter-spacing:1px; flex:none; white-space:nowrap; }
.slot span { padding:0 6px; border-left:1px dashed var(--muted); overflow:hidden; text-overflow:ellipsis; }
.slot.long { white-space:normal; align-items:stretch; }
/* 晋级图: the SVG scales to the card; a wider bracket (32 players) scrolls sideways */
.bracket-wrap { overflow-x:auto; margin-top:8px; }
.bracket.wide { display:none !important; }
@media (min-width:900px) { .bracket.narrow { display:none !important; } .bracket.wide { display:block !important; } } /* the halves face each other: one screen */
.route { margin-bottom:4px; line-height:1.7; }
.route b { color:var(--ink); }
.slot.long i { display:flex; align-items:center; }
.match.held { background:repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--muted) 4.5%, transparent) 8px 16px); }
.match.held .vs { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.match .tools { width:100%; display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding-left:40px; font-size:13px; }
.match .score { padding:0 6px; }
.match .wintag { font-size:11px; color:var(--muted); margin-left:4px; border:1px solid color-mix(in srgb, var(--muted) 45%, transparent); border-radius:4px; padding:0 3px; vertical-align:1px; font-weight:500; }
.match.done .vs { color:var(--muted); }
.match.done .vs .win { color:var(--ink); }
.sub { font-size:12px; margin:10px 0 2px; }
.nowrap { white-space:nowrap; }
.loading { text-align:center; padding:28px 12px; }
.loading .spin { display:inline-block; width:14px; height:14px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; margin-right:8px; vertical-align:-2px; animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
/* ---------- stats ---------- */
.small { font-size:12px; margin-bottom:8px; }
.picker { float:right; font-weight:normal; font-size:13px; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:8px; margin:4px 0 10px; }
.kpi { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 10px; display:flex; flex-direction:column; gap:2px; min-width:0; overflow-wrap:anywhere; }
.kpi b { font-size:18px; line-height:1.2; }
.kpi span { font-size:12px; color:var(--muted); }
table.stats td, table.stats th { padding:5px 6px; }
table.stats tr.thin td { color:var(--muted); }
table.stats tr.thin .fchip { opacity:.7; }
.barcell { min-width:120px; }
.bar { display:inline-block; width:56px; height:8px; border-radius:4px; background:var(--tag); vertical-align:middle; margin-right:6px; overflow:hidden; }
.bar i { display:block; height:100%; background:color-mix(in srgb, var(--muted) 55%, transparent); border-radius:4px; transition:width .6s var(--ease); }
.bar.wr i { background:var(--ok); }
.ci { font-size:11px; margin-left:5px; }
.matrix td, .matrix th { text-align:center; }
.matrix th:first-child { text-align:left; }
.matrix td.up { color:var(--ok); font-weight:600; }
.matrix td.down { color:var(--muted); } /* the mirrored cell already says it in green */
.rank tr.grp td { background:var(--bg); font-size:12px; color:var(--muted); padding:6px 6px 3px; border-bottom:none; }
.rank tr.cut td { border-bottom:2px dashed var(--accent); font-size:11px; color:var(--accent); text-align:center; padding:2px; }
.rank tr.me td { background:var(--sim-bg); }
.rank tr.me td:nth-child(2) { font-weight:700; }
abbr { text-decoration:underline dotted; cursor:help; }
.feed .ev { display:flex; gap:10px; padding:5px 0; border-bottom:1px solid var(--line); font-size:14px; line-height:1.45; }
.feed .ev .clock { flex:0 0 42px; font-variant-numeric:tabular-nums; font-size:13px; padding-top:1px; }
.feed .ev.mine { background:var(--sim-bg); margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:6px; }
.feed .ev .fchip { line-height:16px; font-size:11px; }
.pf { display:inline-flex; align-items:center; gap:3px; margin-right:6px; font-size:12px; }
.pf .ok { color:var(--ok); }
.ok { color:var(--ok); }
.match .vid { display:inline-flex; align-items:center; gap:4px; }
.vlink { color:var(--accent); text-decoration:none; }
.vlink:hover { text-decoration:underline; }
button.ghost { background:transparent; border-color:transparent; color:var(--muted); padding:0 4px; }
button.ghost:hover { color:var(--fg); border-color:var(--border); }
@media (max-width:600px) {
  body { font-size:14px; }
  main { padding:8px; }
  .card { padding:10px 12px; margin-bottom:10px; border-radius:8px; }
  header { padding:8px 12px; }
  header h1 { font-size:16px; }
  h2 { font-size:15px; margin-bottom:8px; }
  h3 { margin:10px 0 4px; }
  th, td { padding:3px 5px; font-size:13px; }
  .match { padding:4px 0; gap:6px; font-size:14px; }
  .match .vs { min-width:130px; }
  .match .mid { display:none; }
  .match .games, .match .rec, .match .tools, .match .videos, .match .poll { padding-left:0; }
  button.small { padding:2px 7px; font-size:12px; }
  .grid { grid-template-columns:1fr; }
  .tabs button { padding:8px 9px; }
}


/* ---------- motion ---------- */
:root { --ease:cubic-bezier(.2,.8,.2,1); }
.card { animation:rise .45s var(--ease) both; transition:border-color .25s, box-shadow .25s, background-color .3s; }
.card:nth-child(2) { animation-delay:.05s } .card:nth-child(3) { animation-delay:.1s } .card:nth-child(4) { animation-delay:.15s } .card:nth-child(n+5) { animation-delay:.2s }
@keyframes rise { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }
#view.fade { animation:fade .25s var(--ease) both; }
@keyframes fade { from { opacity:0; transform:translateY(4px) } to { opacity:1; transform:none } }
button { transition:transform .12s var(--ease), background-color .2s, border-color .2s, box-shadow .2s, opacity .2s; }
button:not(:disabled):hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.12); }
button:not(:disabled):active { transform:translateY(0) scale(.97); box-shadow:none; }
button.primary:not(:disabled):hover { filter:brightness(1.08); }
.tabs button { transition:color .2s, border-color .2s; }
.tabs button.on { animation:none; }
.tag, .fchip, .chip { transition:transform .15s var(--ease); }
.match { transition:background-color .6s var(--ease); }
.match.changed { animation:flash 1.6s var(--ease) both; }
@keyframes flash { 0% { background-color:color-mix(in srgb, var(--accent) 35%, transparent) } 100% { background-color:transparent } }
.match.mine.changed { animation:flashmine 1.6s var(--ease) both; }
@keyframes flashmine { 0% { background-color:color-mix(in srgb, var(--accent) 45%, transparent) } 100% { background-color:var(--sim-bg) } }
/* the header's "this page updates itself" note: a breathing dot, not a tag competing with the title */
.livebadge { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--head-ink); opacity:.7; }
.livebadge::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--ok); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.45 } }
.theme-btn { transition:transform .4s var(--ease), background-color .2s; }
.theme-btn:hover { transform:rotate(180deg); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(201,149,90,.25); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); transition:box-shadow .15s, border-color .15s; }
a { transition:opacity .15s; } a:hover { opacity:.8; }
.win { position:relative; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; } }
.moment { padding:6px 0; border-bottom:1px solid var(--line); font-size:14px; line-height:1.6; }
.moment:last-child { border-bottom:none; }
.stats tr.me td { background:var(--sim-bg); }
.mycard .now { display:flex; align-items:center; gap:8px; margin-top:8px; font-size:15px; }
.mycard .now .text { flex:1; min-width:0; }
.mycard .now .dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--muted); }
.mycard .now.warn .dot { background:var(--warn); }
.mycard .now.ok .dot { background:var(--ok); }
.mycard .now.idle .dot { background:var(--line); }
.mycard .now button { flex:none; }
.mycard .sub2 { margin:2px 0 0 16px; }
.mycard .opt { margin:6px 0 0 16px; }
.mycard .opt a, .mycard .guess a { color:var(--muted); text-decoration:underline dotted; font-weight:400; }
.mycard .opt a:hover, .mycard .guess a:hover { color:var(--ink); }
.mycard .guess { margin:4px 0 0 16px; }
/* 审计 tab: the same tables as 统计, note rows like the feed */
.audit-t { font-size:13px; }
.audit-t td { vertical-align:top; }
.audit-t a { color:inherit; }
.card .ev { display:flex; gap:10px; padding:5px 0; border-bottom:1px solid var(--line); font-size:14px; line-height:1.45; }
.card .ev .clock { flex:0 0 42px; font-variant-numeric:tabular-nums; font-size:13px; padding-top:1px; }
.card .ev:last-of-type { border-bottom:none; }
/* 选手卡 and the links to it */
/* a name opens the player's card, but a dotted line under every name on the page was texture, not a signal */
a.plink { color:inherit; text-decoration:none; }
a.plink:hover { text-decoration:underline; text-decoration-color:var(--muted); }
.mycard a.small { font-weight:400; margin-left:4px; }
.pcard .kpi b .fchip { font-size:12px; }
/* 选手卡: head with avatar, badges, screenshot moments */
.phead { display:flex; gap:12px; align-items:flex-start; margin-bottom:8px; }
.avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; flex:none; border:1px solid var(--line); background:var(--bg); }
.avatar.ph { display:flex; align-items:center; justify-content:center; font-weight:700; font-size:22px; color:var(--muted); }
.pwho { flex:1; min-width:0; }
.motto { margin-top:4px; font-size:14px; }
.badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.badge { font-size:12px; padding:2px 8px; border-radius:999px; background:var(--bg); border:1px solid var(--line); }
.edit { margin:4px 0 8px; }
/* the disc without a picture: the first character inside a ring in the player's faction colour — the faction dot grown
   into a frame, not a filled box (the budget); no faction known, a grey ring */
.avatar.ph, .pav.ph { color:var(--ink); background:var(--bg); border:2px solid color-mix(in srgb, var(--c, var(--line)) 100%, white var(--lift)); }
.avatar.ph[style*="transparent"], .pav.ph[style*="transparent"] { color:var(--muted); border-color:var(--line); }
/* 一句话: the words in quotes are the one bold thing on the card; who said it stays grey */
.headline { margin-top:6px; }
.quote { font-weight:600; font-size:17px; line-height:1.4; }
.quote.small { font-weight:500; font-size:13.5px; }
.quote.empty { font-weight:400; color:var(--muted); font-style:normal; }
.qby { color:var(--muted); font-size:12.5px; margin-left:6px; white-space:nowrap; }
.qby .ups { font-variant-numeric:tabular-nums; }
.linelist .line { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px solid var(--line); }
.linelist .line .text { flex:1; min-width:0; }
.linelist .line .text .quote { font-weight:500; font-size:15px; }
.linelist .line .acts { display:inline-flex; gap:4px; flex:none; align-items:center; }
/* the +1: a pill a thumb can hit, with the count inside; filled once this browser has pressed it */
.up { font-variant-numeric:tabular-nums; white-space:nowrap; font-size:13px; }
button.up { padding:5px 11px; border-radius:999px; border:1px solid var(--accent); color:var(--accent); background:transparent; font-weight:600; }
button.up.on { background:var(--accent); color:#fff; }
.up.count { color:var(--muted); padding:5px 6px; }
.writebox { margin-top:10px; }
/* 选手 tab: one small card per player, the disc, name and record, and the line people agreed with most */
.pgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:8px; }
@media (max-width:480px) { .pgrid { grid-template-columns:1fr; } }
.pc { display:flex; gap:10px; align-items:flex-start; padding:10px; border:1px solid var(--line); border-radius:10px; color:inherit; text-decoration:none; background:var(--card); min-width:0; }
.pc:hover { border-color:color-mix(in srgb, var(--accent) 50%, var(--line)); }
.pc.out { opacity:.55; }
.pav { width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; border:1px solid var(--line); background:var(--bg); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:17px; }
.pbody { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.pname { font-weight:600; }
.pmeta { color:var(--muted); }
.pmeta b { color:var(--ink); font-weight:600; }
.pbody .quote { display:block; margin-top:2px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.pbody .qby { display:block; margin-left:0; margin-top:1px; }
.pc.bare { padding:7px 10px; align-items:center; }
.pc.bare .pav { width:32px; height:32px; font-size:14px; }
/* six tabs on a phone: the counts go, the live one stays */
@media (max-width:480px) { .tabs .cnt:not(.live) { display:none; } }
/* 群里接龙: a folded card; the preview reads like the feed */
details.chain summary { cursor:pointer; }
.chainprev { margin-top:8px; }
.chainprev .ev.skip { opacity:.8; }
.moments { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px; }
.moment { margin:0; }
.moment img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px; border:1px solid var(--line); background:var(--bg); display:block; }
.moment figcaption { font-size:13px; margin-top:4px; line-height:1.35; }
/* sponsors: first-screen line, audit rows, room-page banner */
.sponsorline { margin-top:8px; }
.sponsorline a { color:inherit; }
.splogo { height:16px; width:auto; vertical-align:-3px; margin-right:4px; border-radius:3px; }
.splogo.big { height:36px; margin-right:8px; }
/* 赞助白星杯: three offer blocks; the main one carries the accent, the rest stay quiet */
.tiers { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:12px; margin:12px 0 10px; }
.tier { border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, var(--accent)) 0%, var(--card) 45%); display:flex; flex-direction:column; gap:8px; }
.tier.main { border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow:0 8px 24px -14px color-mix(in srgb, var(--accent) 70%, transparent); }
.tier .thead { display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; }
.tier .tname { font-weight:700; font-size:15px; }
.tier .tname .muted { font-weight:400; }
.tier .ico { color:var(--accent); margin-right:4px; }
.tier .tstate { font-size:12.5px; color:var(--muted); }
.tier .price { font-size:26px; font-weight:800; line-height:1.15; letter-spacing:-.01em; }
.tier .price small { font-size:13px; font-weight:400; color:var(--muted); margin-left:6px; letter-spacing:0; }
.tier .hook { font-weight:600; margin-top:2px; }
.tier .perks { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; font-size:13px; color:color-mix(in srgb, var(--ink) 80%, var(--muted)); flex:1; }
.tier .perks li { padding-left:16px; position:relative; }
.tier .perks li::before { content:'✓'; position:absolute; left:0; color:var(--ok); font-weight:700; }
.tier .treach { font-size:12.5px; color:var(--muted); border-top:1px dashed var(--line); padding-top:6px; }
.tier > button { align-self:flex-start; }
.tier .adm { border-top:1px dashed var(--line); padding-top:6px; }
.leadform { display:flex; flex-direction:column; gap:6px; }
/* /sponsor: the page sent to a sponsor */
.hero { background:linear-gradient(160deg, color-mix(in srgb, var(--card) 90%, var(--accent)) 0%, var(--card) 55%); border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); padding:20px 20px 16px; }
.hero .eyebrow { font-size:12px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }
.hero h2.big { font-size:28px; margin:4px 0 6px; letter-spacing:-.01em; }
.hero .lead { font-size:15.5px; max-width:640px; margin-bottom:12px; }
.hero .kpis { grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); margin-bottom:14px; }
.hero .kpi b { font-size:22px; }
.hero .now { display:flex; align-items:center; gap:8px; }
.hero .now .dot, #contact .now .dot { width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none; }
#contact .now { display:flex; align-items:center; gap:8px; }
.where { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; margin-top:10px; }
.mock { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--bg); display:flex; flex-direction:column; font-size:13px; }
.mock .mhead { background:var(--head); color:var(--head-ink); padding:6px 10px; display:flex; align-items:center; gap:8px; font-size:12px; }
.mock .mhead .muted, .mock .mhead span { color:var(--head-ink); opacity:.8; }
.mock .mhead .tag { opacity:1; color:var(--warn); }
.mock .mbody { padding:10px; flex:1; display:flex; flex-direction:column; gap:6px; }
.mock .mline { padding:4px 0; }
.mock .mcap { padding:6px 10px; font-size:12px; color:var(--muted); border-top:1px solid var(--line); background:var(--card); }
.mock .mlogo { display:inline-block; width:16px; height:16px; border-radius:4px; background:color-mix(in srgb, var(--accent) 35%, transparent); border:1px dashed var(--accent); }
.mock .mbar { display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--accent); border-radius:8px; background:var(--card); }
.mock .mbar small { color:var(--muted); }
.mock .mfac { display:flex; gap:6px; }
.mock .mfac span { width:30px; height:22px; border-radius:5px; background:color-mix(in srgb, var(--c) 30%, transparent); border:1px solid color-mix(in srgb, var(--c) 60%, transparent); position:relative; }
.mock .mfac span.ban::after { content:'✕'; position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:13px; }
.mock .mrank div { padding:2px 0; }
.you { background:color-mix(in srgb, var(--accent) 16%, transparent); border:1px dashed var(--accent); border-radius:6px; padding:0 6px; font-weight:700; white-space:nowrap; }
.why { margin:0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.why li { padding-left:14px; position:relative; }
.why li::before { content:''; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.sprow { padding:8px 0; border-bottom:1px solid var(--line); }
.sprow:last-of-type { border-bottom:none; }
.sphead { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:2px; }
.sponsors { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.sponsors .sp { display:flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:inherit; text-decoration:none; }
.sponsors .sp.main { border-color:var(--accent); }
.sponsors .sp img { height:28px; width:auto; border-radius:4px; }
.sponsors .sp small { color:var(--muted); }

/* ---- 投名状 / the proposal: the chain, the bars, the timeline, the roadmap, the ask ---- */
.pitch p { margin:6px 0 10px; max-width:720px; }
.pitch .estimate { margin-top:10px; padding:6px 10px; border-left:3px solid var(--warn); color:var(--muted); }
.chain { display:flex; align-items:stretch; gap:6px; flex-wrap:wrap; margin:6px 0 4px; }
.chain .node { flex:1 1 180px; min-width:0; border:1px solid var(--line); border-radius:10px; padding:8px 12px; background:var(--bg); display:flex; flex-direction:column; gap:2px; }
.chain .node b { font-size:14px; }
.chain .node span { font-size:12.5px; color:var(--muted); }
.chain .node.here { border-color:var(--accent); background:linear-gradient(180deg, color-mix(in srgb, var(--card) 90%, var(--accent)) 0%, var(--card) 60%); }
.chain .arrow { align-self:center; color:var(--accent); font-size:22px; line-height:1; flex:none; }
@media (max-width:640px) { .chain { flex-direction:column; } .chain .node { flex:none; } .chain .arrow { transform:rotate(90deg); } }
.pbars { margin:8px 0 4px; }
.pbars rect { fill:color-mix(in srgb, var(--accent) 55%, var(--line)); }
.pbars rect.hi { fill:var(--accent); }
.pbars text { font-size:10.5px; fill:var(--muted); }
.pbars .v { fill:var(--ink); font-weight:600; }
.tl { list-style:none; margin:6px 0 0; padding:0 0 0 14px; border-left:2px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.tl li { position:relative; padding-left:6px; }
.tl li::before { content:''; position:absolute; left:-19px; top:.45em; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.tl li.soft { color:var(--muted); }
.tl li.soft::before { background:var(--card); border:2px dashed var(--muted); left:-20px; width:6px; height:6px; }
.tl li.hi { font-weight:700; }
.tl li.hi::before { background:var(--gold); }
.tl .d { display:inline-block; min-width:52px; color:var(--muted); font-size:12.5px; }
.road { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; margin:8px 0; }
.road .step { border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--bg); }
.road .step.now { border-color:var(--accent); }
.road .when { font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.road .step b { display:block; font-size:15px; margin:2px 0 4px; }
.road ul { margin:0; padding-left:16px; font-size:13px; display:flex; flex-direction:column; gap:2px; }
.card.tools { border-style:dashed; }
.card.audit h3 { margin-top:16px; }
.card.audit h3 .muted { font-weight:400; }
.card.audit .why li { padding-left:14px; }
.newgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:2px 10px; margin:6px 0 8px; }
.newgrid label { display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.newgrid input { width:auto; margin:0; }
.askbar { display:flex; gap:4px; margin:8px 0 4px; }
.askbar .seg { border-radius:8px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.askbar .seg b { font-size:22px; line-height:1.1; }
.askbar .seg span { font-size:13px; }
.askbar .seg small { display:block; color:var(--muted); font-size:12px; }
.askbar .prize { background:color-mix(in srgb, var(--gold) 28%, var(--card)); border:1px solid var(--gold); }
.askbar .ops { background:var(--bg); border:1px solid var(--line); }

/* ---------- 赛程: the scoreboard ----------
   A match is read the way a scoreboard is: two names meeting at the score in the middle, and everything about the
   match centred under it, so a list of matches is one column of scores the eye runs down. The rows breathe (10 px,
   a hairline), history folds (a finished round is one line until tapped; the Swiss rounds are one card line once
   the bracket is out) and a decided match is three cells, not six lines. The player's own box and the admin's
   tools are forms and stay left-aligned at full width. */
.match.fx { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:11px 0 10px; border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.match.fx:last-child { border-bottom:none; }
.match.fx .mid { position:absolute; left:0; top:12px; width:auto; font-size:11px; letter-spacing:.02em; }
.match.fx .vs { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:10px; width:100%; max-width:680px; min-width:0; font-size:15px; }
.match.fx .vs .sd { min-width:0; overflow-wrap:anywhere; line-height:1.35; }
.match.fx .vs .sd.a { text-align:right; justify-self:end; }
.match.fx .vs .sd.b { text-align:left; justify-self:start; }
.match.fx .vs .sd.win { font-weight:700; }
.match.fx.done .vs .sd:not(.win) { color:var(--muted); }
.match.fx .vs .score { font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; padding:0 2px; letter-spacing:.02em; line-height:1.2; }
.match.fx .vs .score i { font-style:normal; color:var(--muted); font-weight:400; padding:0 3px; }
.match.fx .vs .score.vsw { font-size:12px; font-weight:400; color:var(--muted); letter-spacing:.06em; }
.match.fx .vs .wintag { vertical-align:2px; }
.match.fx .vs .slot { vertical-align:middle; }
/* the second line under a name: main faction · record before the bracket · how they came through the last round */
.match.fx .vs .byl { display:flex; flex-wrap:wrap; align-items:center; gap:1px 5px; margin-top:2px; font-size:11.5px; font-weight:400; color:var(--muted); line-height:1.3; }
.match.fx .vs .sd.a .byl { justify-content:flex-end; }
.match.fx .vs .byl .sep { opacity:.6; }
.match.fx .vs .byl .fchip { font-size:11.5px; color:var(--muted); }
.match.fx.done .vs .sd.win .byl { color:var(--muted); }
/* the model's call: two percentages and a split bar, the favoured side's number in ink */
.match.fx .oddbar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:8px; width:100%; max-width:360px; color:var(--muted); font-size:11.5px; font-variant-numeric:tabular-nums; text-decoration:none; margin-top:-1px; }
.match.fx .oddbar .pct { justify-self:end; }
.match.fx .oddbar .obar + .pct { justify-self:start; }
.match.fx .oddbar .pct.fav { color:var(--ink); font-weight:600; }
.match.fx .oddbar .obar { width:160px; height:3px; border-radius:2px; background:color-mix(in srgb, var(--accent) 22%, var(--line)); overflow:hidden; }
.match.fx .oddbar .obar i { display:block; height:100%; background:var(--accent); border-radius:2px; }
.match.fx .oddbar:hover .pct { color:var(--ink); }
.match.fx .h2h { font-size:12px; text-align:center; max-width:100%; }
.match.fx .meta { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2px 10px; font-size:13px; max-width:100%; }
.match.fx .meta .status { justify-content:center; }
.match.fx .rowend { margin-left:0; display:inline-flex; gap:6px; align-items:center; }
.match.fx .games, .match.fx .videos, .match.fx .poll, .match.fx .rec, .match.fx .tools { padding-left:0; }
.match.fx .videos, .match.fx .poll { justify-content:center; width:auto; max-width:100%; font-size:12.5px; }
/* the strip: one cell per game, the winning side's faction in bold (the budget's one bold), the other quiet */
.match.fx .games.strip { flex-direction:row; flex-wrap:wrap; justify-content:center; gap:4px 16px; width:auto; max-width:100%; margin-top:1px; }
.match.fx .games.strip .g { display:inline-flex; align-items:center; gap:5px; }
.match.fx .games.strip .g .muted { font-size:11px; }
.match.fx .games.strip .g .fchip { color:var(--muted); }
.match.fx .games.strip .g .fw .fchip { color:var(--ink); font-weight:700; }
.match.fx .games:not(.strip) .game { justify-content:flex-start; }
.match.fx .games.timebox { align-self:stretch; width:auto; margin-top:6px; }
.match.fx .tools, .match.fx .rec { justify-content:center; }
.match.fx.mine { margin:2px -8px; padding-left:8px; padding-right:8px; }
.match.fx.mine .mid { left:8px; }
.match.fx.live { border-left:none; padding-left:0; box-shadow:inset 3px 0 0 #e5484d; }
.match.fx.held .vs { display:grid; }
.match.fx.held .vs .sd .slot { max-width:100%; }
/* decided matches: two abreast where there is room; the rule between the columns is the one between rows */
@media (min-width:900px) {
  .closed { display:grid; grid-template-columns:1fr 1fr; column-gap:36px; }
  .closed .match.fx:nth-last-child(2):nth-child(odd) { border-bottom:none; }
  .closed .match.fx.mine { margin:2px -8px; }
}
.sub.muted { text-align:center; margin:14px 0 0; letter-spacing:.04em; }
/* a finished round, folded: the heading with a chevron, the rows behind it */
details.round > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px; margin:12px 0 4px; user-select:none; }
details.round > summary::-webkit-details-marker { display:none; }
details.round > summary::before { content:'›'; color:var(--muted); font-size:16px; line-height:1; transition:transform .2s var(--ease); display:inline-block; width:10px; }
details.round[open] > summary::before { transform:rotate(90deg); }
details.round > summary h3 { margin:0; }
details.round > summary:hover h3 { color:var(--ink); }
/* the results of a round still being played, once the event has moved on: a centred line that opens them */
details.round.sub { margin-top:6px; }
details.round.sub > summary { justify-content:center; margin:8px 0 0; font-size:12px; letter-spacing:.04em; }
details.round.sub > summary::before { font-size:14px; width:auto; }
details.round.sub[open] > summary { margin-bottom:2px; }
/* a card that is history: one line until tapped */
details.card.fold > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; user-select:none; }
details.card.fold > summary::-webkit-details-marker { display:none; }
details.card.fold > summary::before { content:'›'; color:var(--muted); font-size:18px; line-height:1; transition:transform .2s var(--ease); display:inline-block; width:10px; }
details.card.fold[open] > summary::before { transform:rotate(90deg); }
details.card.fold > summary h2 { margin:0; flex:1; }
details.card.fold:not([open]) > summary h2 { font-weight:600; }
details.card.fold[open] > summary { margin-bottom:6px; }
@media (max-width:600px) {
  .match.fx { padding:9px 0 8px; gap:3px; }
  .match.fx .vs { font-size:14px; column-gap:8px; }
  .match.fx .vs .score { font-size:17px; }
  .match.fx .vs .byl .prev, .match.fx .vs .byl .sep:has(+ .prev) { display:none; } /* faction and record only: one line under a name */
  .match.fx.mine { margin:2px -6px; padding-left:6px; padding-right:6px; }
}