/* Typer 1.7 — shared black theme with accents for scores and bonuses. Load last. */
:root {
  color-scheme: dark;
  --bg: #000;
  --bg2: #000;
  --card: #060606;
  --line: #26292c;
  --text: #e7e9ea;
  --muted: #92979b;
  --accent: #0053cb;
  --gold: #e7e9ea;
  --green: #54d69f;
  --orange: #b0b5b9;
  --red: #ff808a;
  --surface-hover: #0c0c0c;
  --surface-selected: #141414;
  --link: #71a9ff;
  --radius: 12px;
}

html, body, .game-main, .game-sidebar {
  background: var(--bg);
  color: var(--text);
}
html { scroll-padding-top: 88px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
button, input, select, textarea { font-family: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
input, select, textarea { accent-color: var(--accent); }
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
}
:is(.game-shell, .ar-dialog, .typer-admin) :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
* { scrollbar-color: #333639 #000; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: #000; }
::-webkit-scrollbar-thumb { background: #333639; border-color: #000; }
::-webkit-scrollbar-thumb:hover { background: #50555a; }
::selection { background: #234878; color: #fff; }

/* Navigation and the page header. */
.manager-brand { padding-bottom: 22px; }
.manager-brand-mark, .screen-mark {
  background: transparent;
  color: var(--text);
  border-radius: 50%;
}
.manager-brand-mark { font-size: 27px; }
.manager-brand-copy b { font-size: 15px; font-weight: 700; }
.manager-brand-copy span {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.nav-label { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .04em; }
.sidebar-profile { background: transparent; border: 0; padding: 12px 8px; gap: 10px; }
.sidebar-profile img { border-radius: 50%; background: #161616; }
.sidebar-profile b { font-size: 13px; }
.sidebar-profile small { font-size: 12px; color: var(--muted); }
.admin-link { color: var(--link); font-size: 12px; font-weight: 500; }
.screen-head { background: #000; border-color: var(--line); backdrop-filter: none; }
.screen-head h1 { font-size: 21px; line-height: 1.25; letter-spacing: -.4px; font-weight: 700; }
.screen-head p { color: var(--muted); font-size: 13px; line-height: 1.4; }
.screen-user { color: var(--text); font-size: 13px; font-weight: 600; }
.screen-user img { border-color: var(--line); background: #161616; }
.game-sidebar .tab, .game-sidebar .tab .tab-icon { color: var(--muted); }
.game-sidebar .tab:hover { background: var(--surface-hover); color: var(--text); }
.game-sidebar .tab.active { background: var(--surface-hover); color: var(--text); font-weight: 700; }
.game-sidebar .tab.active .tab-icon { color: var(--text); }
.game-sidebar .tab.active::after { display: none; }
.ar-unread { background: var(--accent); color: #fff; font-size: 11px; min-width: 18px; height: 18px; }

/* Secondary navigation: compact filters above the content. */
.command-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.command-rail {
  position: static;
  min-width: 0;
  padding: 0 0 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.command-rail-title { padding: 0 0 10px; border: 0; }
.command-rail-title span { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.command-rail-title b, .command-rail-note { display: none; }
.command-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; overflow: visible; }
.command-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
}
.command-link:hover { border-color: #50555a; background: var(--surface-hover); color: var(--text); }
.command-link.active { border-color: #e7e9ea; background: #e7e9ea; color: #0f1419; box-shadow: none; }
.command-link>i, .command-link>img, .command-link.active>i, .command-link.active>img {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 14px;
}
.command-link b { font-size: 13px; font-weight: 600; white-space: nowrap; }
.command-link small, .command-link em { display: none; }
.command-badge { background: #26292c; color: var(--text); font-weight: 600; }
.view-heading { margin-bottom: 18px; padding: 0; }
.view-heading h2, .ar-top h2 { font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.view-heading p, .ar-top p { font-size: 13px; color: var(--muted); }
.view-heading-icon { background: transparent; color: var(--muted); border-radius: 0; width: 28px; height: 28px; font-size: 18px; }
.typed-match-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 18px; }
.typed-match-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: #000; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.typed-match-toggle:hover { background: #060606; border-color: #50555a; }
.typed-match-toggle[aria-pressed="true"] { border-color: #0053cb; color: #6da9ff; background: #050c16; }
.typed-match-filter-note { flex: 1 1 220px; color: var(--muted); font-size: 11px; line-height: 1.5; }
#term-body :is(.bm,.match,.fx,.fx-detail,.roundhdr,.typed-filter-empty)[hidden] { display: none !important; }

/* Flat, shared surfaces. */
.match, .match.wc2026, .panel, .rank-ctrl, .mb-wrap, .boot,
.ar-panel, .ar-duel, .rules-card, .wel-inline {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: none;
}
.match, .match.wc2026 { margin-bottom: 16px; }
.match.finished { opacity: 1; }
.match.wc2026::before { display: none; }
.comp, .match.wc2026 .comp { background: transparent; border-bottom-color: var(--line); padding: 12px 16px; }
.comp { font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 500; gap: 10px; flex-wrap: wrap; }
.comp .cb, .lvc-top .cb { background: transparent; color: var(--text); padding: 0; border-radius: 0; font-weight: 600; text-transform: none; letter-spacing: 0; }
.wc-flair { background: transparent; color: var(--muted); border-color: var(--line); font-weight: 500; letter-spacing: 0; text-transform: none; }
.wc-flair .cup, .wc-flair .host { color: var(--muted); }
.teams { padding: 24px 16px 12px; }
.team .tn, .team .tn.real, .bm-club .bm-name, .bm-club .bm-name.real, .mb-real { color: var(--text); font-weight: 600; }
.countdown { font-size: 12px; padding-bottom: 16px; }
.countdown b { color: var(--text); font-weight: 500; }
.roundhdr { margin: 24px 0 12px; color: var(--muted); font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.roundhdr::after { background: var(--line); }
.roundhdr img { padding: 0; border: 0; border-radius: 0; background: transparent; width: 20px; height: 20px; }
.roundhdr .fa-futbol { color: var(--muted) !important; }
.markets { background: transparent; padding: 8px 16px 16px; gap: 18px; }
.mlabel { color: var(--muted); font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.mlabel .pts { background: var(--surface-selected); color: var(--muted); font-size: 11px; font-weight: 500; }
.mki.ck, .mki.of, .mki.et, .mki.pn { color: var(--muted); }
.mlabel .mki.yc { color: #dfbe66; }
.mlabel .mki.rc { color: var(--red); }

/* Inputs and actions use the same sizes and state colors. */
.scorebox input, .statbox input, select.scorer, .rank-search, .rank-sort,
.h2h-selects select, .ar-month, .ar-field input[type=search], .ar-field select {
  background-color: #000;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  box-shadow: none;
}
.ar-month, .ar-field input[type=search], .ar-field select { min-height: 44px; }
.scorebox input, .statbox input { font-variant-numeric: tabular-nums; font-weight: 600; }
.opt, .scorer-chip { background: transparent; border-color: var(--line); color: var(--text); font-weight: 500; }
.opt { min-height: 42px; display: flex; align-items: center; justify-content: center; }
.opt:hover, .scorer-chip:hover { background: var(--surface-hover); border-color: #50555a; }
.opt.sel, .opt.sel.no, .opt.sel.under, .scorer-chip.sel {
  background: var(--surface-selected);
  border-color: var(--link);
  color: #fff;
}
.sb { background: transparent; border-color: var(--line); color: var(--text); border-radius: 6px; }
.sb:hover { border-color: var(--link); color: var(--text); }
.bankerbtn, .bonusbox { border: 1px solid; border-left-width: 3px; color: var(--text); border-radius: 10px; font-weight: 600; padding: 13px 12px; }
.bonusbox { border-color: #705320; border-left-color: #f0b547; background: #100d05; }
.bonusbox.on { border-color: #f0b547; background: #261b07; }
.bonusbox .bn-star { width: 32px; height: 32px; background: #2a200c; color: #f0b547; }
.bonusbox.on .bn-star { background: #f0b547; color: #171005; }
.bonusbox .bn-title { flex-wrap: wrap; color: #e5c47e; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; margin-bottom: 5px; }
.bonusbox .bn-desc { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.bonusbox .bn-pts { background: #f0b547; color: #171005; padding: 2px 8px; font-size: 14px; font-weight: 800; }
.bonusbox .bn-toggle { flex-shrink: 0; color: #bba16a; font-size: 25px; }
.bonusbox.on .bn-toggle { color: #f0b547; }
.bankerbtn { align-items: stretch; gap: 8px; border-color: #27466a; border-left-color: #71a9ff; background: #060d16; }
.bankerbtn.on { border-color: #71a9ff; background: #0c1d32; }
.bankerbtn-main { flex-wrap: wrap; justify-content: flex-start; gap: 8px; font-size: 15px; }
.bankerbtn-main>i { color: #71a9ff; font-size: 18px; }
.banker-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.banker-multiplier { padding: 1px 8px; border: 1px solid #416d9e; border-radius: 999px; background: #11243e; color: #a4cbff; font-size: 16px; font-weight: 800; }
.bankerbtn.on .banker-multiplier { background: #71a9ff; border-color: #71a9ff; color: #071525; }
.banker-limit { margin-left: auto; color: #a4cbff; font-size: 12px; font-weight: 500; }
.banker-note { font-size: 12px; line-height: 1.5; color: var(--muted); }
@media (hover: hover) {
  .bonusbox:not([data-ro]):hover { border-color: #f0b547; }
  .bankerbtn:hover { border-color: #71a9ff; }
}
.ar-btn, .bm-btn, .submit, .wel-btn, .watch-btn, .h2h-btn {
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: none;
  transition: background-color .15s, border-color .15s;
}
.ar-btn, .bm-btn.edit, .h2h-btn, .watch-btn { background: transparent; border-color: #42474b; color: var(--text); }
.ar-btn:hover, .bm-btn.edit:hover, .h2h-btn:hover, .watch-btn:hover { background: var(--surface-hover); border-color: #6b7075; filter: none; }
.ar-btn.primary, .bm-btn, .submit, .wel-btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.ar-btn.primary:hover, .bm-btn:not(.edit):hover, .submit:not(:disabled):hover, .wel-btn:hover { background: #1263d8; border-color: #1263d8; filter: none; }
.ar-btn.small { min-height: 34px; padding: 6px 12px; font-size: 13px; }
.ar-surface .ar-btn, .ar-dialog .ar-btn { font-size: 14px; font-weight: 600; line-height: 1.35; }
.ar-surface .ar-btn.small, .ar-dialog .ar-btn.small { font-size: 13px; }
.ar-btn.danger { color: var(--red); }
.submit { margin-top: 4px; min-height: 44px; }
.submit.saved { background: var(--surface-selected); border-color: #42474b; color: var(--text); }
.ar-btn:disabled, .submit:disabled { cursor: not-allowed; }
.bm { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: #000; margin: 0; }
.bm:hover, .bm.has-bet:hover { background: #060606; border-color: var(--line); }
.bm.has-bet { border-color: var(--line); background: #000; }
.bm.has-bet::before { display: none; }
.bm-main { padding: 18px 4px; grid-template-columns: 64px minmax(0,1fr) auto; gap: 18px; min-height: 112px; }
.bm-when { background: transparent; border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 6px 12px 6px 0; font-size: 11px; color: var(--muted); }
.bm-when b { font-size: 17px; font-weight: 600; }
.bm-when small { color: var(--muted); font-size: 12px; font-weight: 500; }
.bm-vs { background: transparent; border: 0; color: var(--muted); font-size: 11px; font-weight: 500; }
.bm-prediction { background: var(--surface-hover); border-color: var(--line); border-radius: 8px; }
.bm-prediction span { color: var(--muted); font-size: 9px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.bm-prediction b { font-size: 17px; font-weight: 600; }
.bm-saved { color: var(--muted); font-size: 11px; font-weight: 500; }
.bm-saved i { color: var(--green); }
.bm-lock { background: transparent; border-color: var(--line); color: var(--muted); border-radius: 999px; }
.rb-label, .mb-title, .mb-gtitle, .mb-rtitle, .bd-title, .rk-st, .pi-l {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.rb-score { background: transparent; color: var(--text); }
.rb-chip { background: transparent; }
.mb-item, .mb-ghead, .mb-rhead, .mb-gbody, .mb-rbody, .fx, .fx-detail { background: #000; border-color: var(--line); }
.mb-head:hover, .mb-ghead:hover, .mb-rhead:hover { background: var(--surface-hover); border-color: #50555a; }
.mb-item { margin-bottom: 0; }
.mb-wrap { margin-bottom: 16px; }
.mb-pick, .mb-count, .mb-gcount, .mb-rcount { background: transparent; border-color: var(--line); font-weight: 600; }
.fx { padding: 16px 12px; }
.fx-bet { background: transparent; color: var(--link); font-weight: 600; }
.fx-bet i { margin-right: 4px; }
.ptsbadge { background: transparent; border: 1px solid var(--line); font-weight: 600; }
.p-mid { color: var(--text); }

/* Ranking, archives and profile: calm rows and readable figures. */
th, .ar-table th { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
td, .ar-table td { font-size: 14px; border-bottom-color: var(--line); }
.rank-ctrl { padding: 12px; margin-bottom: 16px; gap: 10px; }
.rank-search-wrap, .rank-ctrl-row { padding: 0; }
.rank-search { min-height: 44px; font-size: 14px; }
.rank-ctrl-row { gap: 8px; }
.rank-filters { margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.rank-filters>summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 14px; border-radius: inherit; color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.rank-filters>summary::-webkit-details-marker { display: none; }
.rank-filters>summary:hover { background: var(--surface-hover); }
.rank-filters>summary>i { color: var(--muted); }
.rank-filters-chevron { margin-left: auto; font-size: 12px; transition: transform .15s; }
.rank-filters[open] .rank-filters-chevron { transform: rotate(180deg); }
.rank-filters-body { padding: 12px; border-top: 1px solid var(--line); }
.rank-filters:not([open])>.rank-filters-body { display: none; }
.rank-filters .rank-ctrl { padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; }
.rank-filters .h2h-wrap { margin: 12px 0 0; }
.rank-sort { min-width: 0; font-size: 13px; font-weight: 500; }
.rank-view { border: 1px solid var(--line); border-radius: 8px; }
.rvbtn { background: transparent; font-size: 13px; font-weight: 500; }
.rvbtn.on, .h2h-btn.on { background: var(--surface-selected); color: var(--text); border-color: #50555a; }
.rfchip, .lgchip, .rndchip { font-weight: 500; color: var(--muted); }
.rfchip.on, .rfchip.rm.on, .lgchip.on, .rndchip.on { color: var(--text); border-bottom-color: var(--accent); }
.rk-main.rk-podium-1, .rk-detail.rk-podium-1 {
  --podium: #f2c35b;
  --podium-bg: #151107;
  --podium-hover: #211a09;
  --podium-line: #54441f;
}
.rk-main.rk-podium-2, .rk-detail.rk-podium-2 {
  --podium: #c2d0df;
  --podium-bg: #101317;
  --podium-hover: #171d24;
  --podium-line: #38414b;
}
.rk-main.rk-podium-3, .rk-detail.rk-podium-3 {
  --podium: #d9915f;
  --podium-bg: #170f0a;
  --podium-hover: #24170f;
  --podium-line: #573921;
}
.rk-main.mine, .ar-table .mine { background: var(--surface-hover); }
.rk-main.rk-podium, .rk-main.rk-podium.mine { background: var(--podium-bg); }
.rk-main.rk-podium:hover, .rk-main.rk-podium.mine:hover { background: var(--podium-hover); }
.rk-main.rk-podium .rank-name { color: var(--podium); }
.rk-main.rk-podium>td:first-child, .rk-main.rk-podium .uname img, .rk-detail.rk-podium>td { box-shadow: none; }
.rk-podium-badge { border: 0; background: transparent; padding: 0; min-width: 30px; font-weight: 600; }
.rk.g1, .rk.g1 i { color: #f2c35b !important; }
.rk.g2, .rk.g2 i { color: #c2d0df !important; }
.rk.g3, .rk.g3 i { color: #d9915f !important; }
.uname.me { color: var(--text); }
.uname.me::after { content: "Ty"; color: var(--muted); font-size: 11px; font-weight: 400; }
.tp { font-variant-numeric: tabular-nums; font-weight: 700; }
.fdot { width: 23px; height: 23px; border: 0; padding: 0; border-radius: 5px; font-family: inherit; font-size: .86em; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
#view-ranking .rank-tbl { table-layout: fixed; width: 100%; }
#view-ranking .rank-tbl th, #view-ranking .rank-tbl td { padding: 14px 10px; }
#view-ranking .rk-col-place { width: 48px; }
#view-ranking .rk-col-form { width: 151px; }
#view-ranking .rk-col-points { width: 84px; }
#view-ranking .rank-tbl .rk { width: auto; }
#view-ranking .rank-tbl .uname { min-width: 0; }
#view-ranking .uname.me::after { content: none; }
.rank-identity { display: block; min-width: 0; flex: 1; }
.rank-name { display: block; white-space: normal; overflow-wrap: anywhere; }
.rank-name>.uname-link { display: inline; }
.rank-identity .ar-mini-badges { margin: 4px 0 0; }
.rank-identity .ar-mini-badges:empty { display: none; }
.rank-you { display: inline-block; margin-left: 5px; color: var(--muted); font-size: 11px; font-weight: 400; }
.rank-form-dots { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.rank-form-dots .fdot { flex: 0 0 23px; margin: 0; }
#view-ranking .rk-total { display: block; font-size: 17px; line-height: 1.3; white-space: nowrap; }
#view-ranking .tp .last-pts { display: block; margin: 4px 0 0; font-size: 12px; line-height: 1.2; }
#view-ranking .rk-exp { display: inline-block; margin: 4px 0 0; }
#view-ranking .rk-delta { display: block; margin: 4px 0 0; }
#view-ranking .rk-podium-badge { min-width: 0; gap: 2px; }
#view-ranking .rk-detail>td { padding: 4px 12px 16px; }
.fdot.f-level-1 { background: #b91c1c; color: #fff; }
.fdot.f-level-2 { background: #dc2626; color: #fff; }
.fdot.f-level-3 { background: #ea580c; color: #07120b; }
.fdot.f-level-4 { background: #f97316; color: #07120b; }
.fdot.f-level-5 { background: #f59e0b; color: #07120b; }
.fdot.f-level-6 { background: #eab308; color: #07120b; }
.fdot.f-level-7 { background: #a3bd24; color: #07120b; }
.fdot.f-level-8 { background: #65b83c; color: #07120b; }
.fdot.f-level-9 { background: #16a34a; color: #07120b; }
.fdot.f-level-10 { background: #059669; color: #07120b; }
.fdot.f-zero { background: #25282b; color: #b6bbc0; }
.fdot.f-negative { background: #7f1d1d; color: #fff; }
.form-legend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; color: var(--muted); font-size: 12px; }
.form-scale { display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); gap: 4px; width: min(100%,276px); }
.form-scale .fdot { width: 100%; height: 24px; margin: 0; font-size: 12px; cursor: default; }
.form-scale .fdot:hover { outline: none; }
.bd-bar, .ar-meter-track { background: #1e2022; }
.bd-bar>span, .ar-meter-fill { background: var(--accent); }
.h2h-wrap { background: transparent; }
.h2h-card, .h2h-h2h { border-top-style: solid; }
.champ-banner { background: transparent; border-bottom: 1px solid var(--line); padding: 18px 16px; }
.champ-cup { color: var(--text); font-size: 24px; }
.champ-label { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.champ-pts { color: var(--text); }
.fmcard .fm-comp { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 500; }
.profile-inline { gap: 0; padding: 0; margin-bottom: 24px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.profile-inline .pi-item {
  min-width: 0;
  padding: 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  white-space: normal;
}
.pi-item:not(:first-child)::before { display: none; }
.profile-inline .pi-item:nth-child(n+4) { border-top: 1px solid var(--line) !important; }
.profile-inline .pi-item:not(:nth-child(3n)) { border-right: 1px solid var(--line) !important; }
.pi-n { font-size: 26px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.pi-l { color: var(--muted); }

/* Arena and statistics follow the same type scale and surfaces. */
.ar-surface { font-size: 15px; color: var(--text); }
.ar-top { margin-bottom: 20px; }
.ar-arena-top h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ar-arena-top p { margin: 0; font-size: 14px; }
.ar-user-actions { margin-top: 0; }
.ar-layout { grid-template-columns: minmax(0,1fr) 260px; gap: 24px; }
.ar-panel, .ar-duel { padding: 20px; }
.ar-panel h3, .rules-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.ar-side { gap: 0; border-left: 1px solid var(--line); padding-left: 20px; }
.ar-side .ar-panel { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 0 20px; margin: 0 0 20px; }
.ar-side .ar-panel:last-child { border-bottom: 0; margin-bottom: 0; }
.ar-rule { border-color: var(--line); }
.ar-kpis { gap: 0; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 24px; overflow: hidden; }
.ar-kpi { border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; padding: 18px; }
.ar-kpi:last-child { border-right: 0; }
.ar-kpi strong { font-size: 28px; font-weight: 700; letter-spacing: -.5px; }
.ar-kpi span { font-size: 12px; color: var(--muted); }
.ar-subtabs { gap: 0; margin-bottom: 0; border-color: var(--line); }
.ar-subtab { min-height: 46px; font-size: 13px; font-weight: 500; color: var(--muted); padding: 12px; cursor: pointer; }
.ar-surface .ar-subtab { font-size: 13px; font-weight: 500; }
.ar-subtab:hover { background: var(--surface-hover); color: var(--text); }
.ar-subtab.active { border-bottom-color: var(--accent); color: var(--text); font-weight: 600; }
.ar-list { gap: 0; }
.ar-list>.ar-duel { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 22px 0; }
.ar-main>.ar-panel { margin-top: 18px; }
.ar-tag, .ar-tag.blue { border-color: var(--line); background: transparent; color: var(--muted); border-radius: 999px; padding: 3px 9px; font-size: 11px; }
.ar-tag.green { background: transparent; border-color: var(--line); color: var(--green); }
.ar-score strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.ar-player b { font-weight: 600; }
.ar-fixture, .ar-duel-footer, .ar-detail-match { border-color: var(--line); }
.ar-details summary { color: var(--muted); padding: 8px 0; }
.ar-details summary:hover { color: var(--text); }
.ar-pick { background: transparent; border-color: var(--line); }
.ar-note, .ar-muted, .ar-legend, .ar-details summary, .ar-weekly { color: var(--muted); }
.ar-empty, .empty { border: 0; background: transparent; padding: 40px 20px; font-size: 14px; color: var(--muted); }
.ar-empty strong { font-size: 20px; font-weight: 700; letter-spacing: -.3px; margin-bottom: 8px; }
.ar-table .ar-btn[data-ar-action=stats] { background: transparent; border: 0; padding: 4px 0; text-align: left; justify-content: flex-start; border-radius: 4px; }
.ar-table .ar-btn[data-ar-action=stats]:hover { text-decoration: underline; }
.ar-table th, .ar-table td { border-color: var(--line); }
.ar-place { color: var(--muted); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ar-champion em { color: var(--muted); font-size: 14px; min-width: 18px; }
.ar-stat-grid { gap: 16px; }
.ar-chart .line { stroke: var(--link); }
.ar-chart circle { fill: var(--link); }
.ar-chart .grid { stroke: var(--line); }
.ar-chart text { fill: var(--muted); }
.ar-meter-track, .ar-meter-fill { border-radius: 3px; }
.ar-badge { border-color: var(--line); border-radius: 8px; background: transparent; padding: 16px; }
.ar-badge-icon { font-size: 20px; color: var(--text); }
.ar-badge.locked { opacity: 1; }
.ar-badge.locked .ar-badge-icon, .ar-badge.locked b { color: var(--muted); }
.ar-badge small { color: var(--muted); }
.ar-badge-state { color: var(--text) !important; }
.ar-mini-badges { color: var(--muted); font-size: 12px; gap: 6px; }
.ar-community { border-color: var(--line); border-radius: 8px; background: transparent; }
.ar-community-grid { gap: 0; }
.ar-community-cell { border: 0; border-right: 1px solid var(--line); border-radius: 0; }
.ar-community-cell:last-child { border-right: 0; }
.ar-community-exact { color: var(--text); }

/* Composer. */
.ar-dialog { background: #000; border-color: #42474b; border-radius: 16px; }
.ar-dialog::backdrop { background: rgba(55,65,75,.45); }
.ar-dialog-head, .ar-dialog-foot { background: #000; border-color: var(--line); }
.ar-dialog-head h2 { font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.ar-dialog-head .ar-btn { width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; }
.ar-dialog-body { padding-top: 22px; padding-bottom: 22px; }
.ar-field>label { font-size: 13px; font-weight: 500; color: var(--muted); }
.ar-choice-list, .ar-search-list { border-radius: 8px; border-color: var(--line); }
.ar-choice, .ar-user-option, .ar-user-option:last-child { background: #000; border-color: var(--line); }
.ar-choice:has(input:checked), .ar-user-option.selected { background: var(--surface-selected); border-color: var(--line); }
.ar-user-option.selected { box-shadow: inset 3px 0 var(--accent); }
.ar-user-option:hover { background: var(--surface-hover); }
.ar-random-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; color: var(--muted); }
.ar-choice-copy small, .ar-user-option small { color: var(--muted); }

/* Help, welcome, live status and mobile menu. */
.more-grid { gap: 0; border-top: 1px solid var(--line); }
.more-link { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; min-height: 80px; padding: 14px 10px; }
.more-link:hover { background: var(--surface-hover); border-color: var(--line); }
.more-link>i { background: transparent; color: var(--text); border-radius: 0; }
.more-link b { font-size: 15px; font-weight: 600; }
.more-link small { font-size: 12px; }
.rules-card { padding: 20px; }
.rules-row { border-color: var(--line); color: var(--muted); font-size: 14px; padding: 10px 0; }
.rules-row b { font-weight: 600; }
.rules-note, .prize-bar { border: 1px solid var(--line); background: transparent; border-radius: var(--radius); color: var(--muted); font-size: 13px; }
.prize-bar { padding: 12px 16px; }
.prize-bar:hover { background: var(--surface-hover); border-color: #50555a; }
.prize-bar b, .prize-bar .pb-arr, .wel-lead b, .rules-card h3 i { color: var(--text); }
.wel-inline { padding: 20px; margin-bottom: 24px; }
.wel-title { font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.wel-lead, .wel-prize span { color: var(--muted); }
.wel-prize { background: transparent; border-color: var(--line); border-radius: 8px; }
.wel-emoji, .wp-ic { color: var(--text); font-size: 21px; }
.wel-inline .wel-x { background: transparent; border: 0; border-radius: 50%; }
.lvc { background: #000; border: 1px solid var(--line); border-radius: var(--radius); }
.lvc-foot { border-color: var(--line); border-top-style: solid; }
.lvc-live { background: transparent; color: var(--green); border-color: var(--line); }
.lv-pulse, .lvc-live .lv-pulse { animation: none; box-shadow: none; }
.lvc-pts, .lvc-pts.p-hi, .lvc-pts.p-mid { background: transparent; border-color: var(--line); }
.lvc-pts.p-hi, .lvc-pts.p-hi b { color: var(--green); }
.lvc-pts.p-mid, .lvc-pts.p-mid b { color: var(--text); }
.lv-empty>i { color: var(--muted); opacity: 1; }
.lv-note i, .fp-live-note i { color: var(--muted); }
.arch-summary { gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.arch-stat { border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; text-transform: none; letter-spacing: 0; font-weight: 500; }
.arch-stat:last-child { border-right: 0; }
.toast, .msg { background: #000; border-radius: 10px; box-shadow: none; font-weight: 500; }

/* Dismissible release notes, matching the existing black dialogs. */
.updates-trigger { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 7px; margin-left: auto; padding: 8px 12px; min-height: 36px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 500; cursor: pointer; }
.updates-trigger:hover { color: var(--text); background: var(--surface-hover); }
.updates-trigger+.screen-user, .prizes-trigger+.screen-user { margin-left: 0; }
.prizes-trigger { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--text); font-size: 15px; cursor: pointer; }
.prizes-trigger:hover { background: var(--surface-hover); border-color: #50555a; }
.prizes-trigger[aria-expanded="true"] { background: #050c16; border-color: var(--accent); color: var(--link); }
.screen-head>div:nth-child(2) { min-width: 0; }
body.updates-open { overflow: hidden; }
.updates-dialog { width: min(560px,calc(100vw - 28px)); max-height: min(840px,92dvh); }
.updates-dialog .ar-dialog-head { gap: 14px; }
.updates-dialog .ar-dialog-head .ar-btn { flex: 0 0 36px; }
.updates-version { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.updates-intro { font-size: 14px; color: var(--muted); margin: 0 0 20px; }
.updates-list { margin: 0; padding: 0; list-style: none; }
.updates-list li { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.updates-list li:first-child { padding-top: 0; }
.updates-list li:last-child { padding-bottom: 0; border: 0; }
.updates-list li>i { color: var(--text); font-size: 18px; margin-top: 3px; text-align: center; }
.updates-list h3 { margin: 0 0 5px; font-size: 15px; font-weight: 600; }
.updates-list p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.updates-list .form-scale { margin-top: 12px; }
.updates-dialog .ar-dialog-foot { display: block; }
.updates-preference { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; font-size: 13px; color: var(--text); cursor: pointer; }
.updates-preference input { width: 17px; height: 17px; flex: 0 0 17px; margin: 2px 0 0; accent-color: var(--accent); }
.updates-dialog .updates-done { width: 100%; min-height: 42px; }
.updates-footnote { margin: 10px 0 0; color: var(--muted); text-align: center; font-size: 12px; }
.updates-storage-note { margin-bottom: 12px; color: var(--muted); font-size: 12px; }
.updates-storage-note[hidden] { display: none; }
@media (max-width: 799px) {
  .updates-trigger { width: 36px; padding: 0; }
  .updates-trigger span { display: none; }
}
@media (max-width: 600px) {
  .updates-dialog { width: calc(100vw - 16px); max-height: 94dvh; }
  .updates-dialog .ar-dialog-head h2 { font-size: 18px; }
  .updates-list li { grid-template-columns: 20px minmax(0,1fr); gap: 10px; }
  .updates-list .form-scale { gap: 3px; }
  .updates-list .form-scale .fdot { font-size: 11px; }
}

/* The existing admin pages share the same theme. */
.typer-admin { background: #000; padding: 24px 16px 60px; }
.typer-admin .container { max-width: 960px; }
.typer-admin .card, .typer-admin .card.accent { background: #000; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; padding: 20px; }
.typer-admin h2, .typer-admin .card.accent>h2, .typer-admin .card.accent>h2 .card-arrow { color: var(--text); font-size: 17px; font-weight: 600; }
.typer-admin label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; }
.typer-admin input, .typer-admin select { border-color: var(--line); border-radius: 8px; background-color: #000; font-size: 14px; }
.typer-admin .btn { background: var(--accent); border: 1px solid var(--accent); border-radius: 999px; min-height: 40px; padding: 9px 16px; font-size: 13px; font-weight: 600; }
.typer-admin .btn.ghost, .typer-admin .btn.green, .typer-admin .btn.warn, .typer-admin .btn.red {
  background: transparent; border-color: #42474b; color: var(--text);
}
.typer-admin .btn.red { color: var(--red); }
.typer-admin .btn:hover { filter: brightness(1.15); }
.typer-admin .chip { background: transparent; border: 1px solid var(--line); font-size: 11px; text-transform: none; font-weight: 500; }
.typer-admin .market-picker, .typer-admin [class$="-picker"], .typer-admin .agrp, .typer-admin .mlist .mi { background: #000; border-color: var(--line); border-radius: 8px; }
.typer-admin .mks label, .typer-admin [class$="-option"] { background: #000; border-color: var(--line); font-weight: 500; }
.typer-admin .mks label:has(input:checked), .typer-admin [class$="-option"].on { background: var(--surface-selected); border-color: var(--link); box-shadow: none; }
.typer-admin .modebtn.on { background: var(--surface-selected); border-color: var(--link); color: var(--text); }
.typer-admin .admin-club-search:focus { border-color: var(--link); box-shadow: none; }
.typer-admin [class$="-options"]::-webkit-scrollbar-thumb { background: #333639; border-color: #000; }
.typer-admin [class$="-options"]::-webkit-scrollbar-track { background: #000; border: 0; }
.typer-admin .resultbox { border-top-style: solid; }

@media (min-width: 800px) {
  .app.game-shell { grid-template-columns: 224px minmax(0,1fr); max-width: 1320px; }
  .game-sidebar { padding: 22px 12px 12px; }
  .game-sidebar .tab { min-height: 45px; padding: 11px 12px; gap: 12px; border-radius: 999px; font-size: 15px; font-weight: 500; }
  .game-sidebar .tab .tab-icon { width: 22px; font-size: 19px; }
  .game-main { padding: 0 24px 60px; border-right: 1px solid var(--line); }
  .screen-head { min-height: 76px; padding: 12px 24px; margin: 0 -24px 24px; background: #000; }
}
@media (max-width: 1100px) {
  .ar-layout { grid-template-columns: minmax(0,1fr); }
  .ar-side { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; border: 0; border-top: 1px solid var(--line); padding: 20px 0 0; }
  .ar-side .ar-panel { margin-bottom: 0; }
  .ar-side .ar-panel:last-child { grid-column: 1/-1; }
}
@media (min-width: 800px) and (max-width: 1000px) {
  .ar-stat-grid { grid-template-columns: minmax(0,1fr); }
  .ar-stat-grid>.wide { grid-column: auto; }
}
@media (max-width: 799px) {
  html { scroll-padding-top: 12px; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .game-main { padding: 0 8px 24px; }
  .screen-head { min-height: 74px; padding: 14px 8px; margin: 0 -8px 20px; border-bottom: 1px solid var(--line); }
  .screen-head h1 { font-size: 20px; }
  .screen-head p { font-size: 12px; }
  .screen-head .screen-mark { display: none; }
  .game-sidebar .tabs-wrap { background: #000; box-shadow: none; border-top-color: var(--line); }
  .game-sidebar .tab { color: var(--muted); font-size: 10px; font-weight: 500; }
  .game-sidebar .tab .tab-icon { font-size: 21px; }
  .game-sidebar .tab.active { background: #060606; }
  .command-layout { gap: 18px; }
  .command-rail { overflow: hidden; padding-bottom: 14px; }
  .command-links { flex-wrap: nowrap; overflow-x: auto; padding: 3px 3px 6px; scroll-snap-type: x proximity; }
  .command-link { flex: 0 0 auto; min-height: 38px; padding: 8px 13px; }
  .command-link b { font-size: 12px; }
  .command-link>i, .command-link>img { width: 17px; height: 17px; }
  .view-heading h2 { font-size: 19px; }
  .bm-main { grid-template-columns: minmax(58px,max-content) minmax(0,1fr); gap: 12px; padding: 18px 0; min-height: 0; }
  .bm-club .bm-name { font-size: 13px; white-space: normal; overflow-wrap: anywhere; }
  .bm-fixture { gap: 8px; }
  .bm-club, .bm-club.away { display: flex; flex-direction: column; gap: 6px; text-align: center; }
  .bm-club.away img { order: 0; }
  .bm-club img { width: 30px; height: 30px; }
  .bm-actions { grid-column: 2; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
  .bm-actions .bm-btn, .bm-actions .bm-lock { width: auto; flex: 1 1 auto; min-height: 38px; padding: 8px 12px; font-size: 13px; }
  .bm-saved { width: 100%; justify-content: flex-end; }
  .bm-when { padding: 6px 8px 6px 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .profile-inline { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .profile-inline .pi-item { padding: 14px 10px !important; }
  .pi-n { font-size: 23px; }
  .pi-l { font-size: 11px; }
  .rank-ctrl-row { padding-bottom: 0; }
  .markets { padding: 8px 10px 12px; }
  .comp { padding-left: 10px; padding-right: 10px; }
  #view-ranking .rank-tbl th, #view-ranking .rank-tbl td { padding: 12px 4px; }
  #view-ranking .rk-col-place { width: 32px; }
  #view-ranking .rk-col-form { width: 138px; }
  #view-ranking .rk-col-points { width: 58px; }
  #view-ranking .rank-tbl .uname { gap: 6px; font-size: 14px; }
  #view-ranking .rk-total { font-size: 16px; }
  #view-ranking .rank-tbl th.tp { font-size: 11px; }
  #view-ranking .rk-exp { font-size: 9px; }
  #view-ranking .rk-detail>td { padding: 4px 8px 14px; }
  .rank-form-dots { gap: 2px; }
  .rank-form-dots .fdot { width: 24px; height: 26px; flex-basis: 24px; font-size: 13px; }
  .ar-top, .view-heading { gap: 12px; }
  .ar-panel, .ar-duel, .rules-card { padding: 16px; }
  .ar-top .ar-actions { width: 100%; }
  .ar-arena-top .ar-btn.primary { flex: 1; }
  .more-grid, .rules-grid { grid-template-columns: minmax(0,1fr); }
  .wel-inline { padding: 18px 16px; }
  .wel-top { gap: 10px; }
  .toast { bottom: calc(82px + env(safe-area-inset-bottom)); }
  .ar-field input[type=search], .ar-field select, .ar-month, .rank-search, .rank-sort, select.scorer, .h2h-selects select,
  .typer-admin input, .typer-admin select { font-size: 16px; }
}
@media (max-width: 600px) {
  .ar-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; }
  .ar-kpi { padding: 16px; }
  .ar-kpi:nth-child(2n) { border-right: 0; }
  .ar-kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ar-kpi strong { font-size: 26px; }
  .ar-side, .ar-stat-grid { grid-template-columns: minmax(0,1fr); }
  .ar-side .ar-panel:last-child { grid-column: auto; }
  .ar-dialog { width: calc(100vw - 16px); max-height: 94dvh; }
  .ar-dialog-head, .ar-dialog-body, .ar-dialog-foot { padding: 16px; }
  .ar-dialog-foot { padding-bottom: max(16px,env(safe-area-inset-bottom)); }
  .ar-stats-controls { align-items: stretch; flex-direction: column; }
  .ar-stats-controls select { width: 100%; }
  .ar-stats-controls .ar-btn { align-self: flex-start; }
  .ar-badge { padding: 12px; }
  .ar-table td, .ar-table th { font-size: 12px; }
  .ar-table td .ar-btn[data-ar-action=stats] { white-space: normal; overflow-wrap: anywhere; font-size: 12px; }
  .ar-table .ar-mini-badges { display: none; }
  .ar-community-cell { padding: 8px 4px; }
  .typer-admin { padding: 16px 10px 40px; }
  .typer-admin .card, .typer-admin .card.accent { padding: 16px; }
}
@media (max-width: 380px) {
  .game-main { padding-left: 6px; padding-right: 6px; }
  .screen-head { margin-left: -6px; margin-right: -6px; padding-left: 6px; padding-right: 6px; }
  .ar-subtab { padding-left: 9px; padding-right: 9px; font-size: 12px; }
  .ar-player b { font-size: 13px; }
  .ar-score strong { font-size: 24px; }
  .profile-inline .pi-item { padding: 12px 8px !important; }
}
@media (max-width: 359px) {
  #view-ranking .rk-col-place { width: 30px; }
  #view-ranking .rk-col-form { width: 128px; }
  #view-ranking .rk-col-points { width: 52px; }
  #view-ranking .rank-tbl .uname { gap: 5px; font-size: 13px; }
  #view-ranking .rank-tbl .uname img { width: 24px; height: 24px; flex-basis: 24px; }
  #view-ranking .rk-total { font-size: 15px; }
  .rank-form-dots .fdot { width: 22px; flex-basis: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Red card: explicit, optional risk. Native checkbox supports keyboard and touch. */
.red-risk { display: flex; align-items: center; gap: 12px; position: relative; padding: 16px; margin: 14px 0; border: 1px solid #733041; border-radius: 10px; background: #10080b; cursor: pointer; }
.red-risk:hover { border-color: #db536d; }
.red-risk.on { background: #210b12; border-color: #f05a76; }
.red-risk:focus-within { outline: 2px solid #ff8ca2; outline-offset: 3px; }
.red-risk .f-red-risk { width: 22px; height: 22px; min-width: 22px; margin: 0; accent-color: #df3658; cursor: pointer; }
.red-risk-icon { color: #ff637b; font-size: 24px; flex: 0 0 auto; }
.red-risk-copy { min-width: 0; flex: 1; display: grid; gap: 5px; text-align: left; }
.red-risk-kicker { color: #ff98ab; font-size: 10px; letter-spacing: .07em; font-weight: 600; }
.red-risk-copy>strong { font-size: 14px; line-height: 1.4; color: #f1f3f5; font-weight: 600; }
.red-risk-rewards { display: flex; gap: 7px 14px; flex-wrap: wrap; font-size: 12px; }
.red-risk-rewards>b { color: #50d7a0; font-weight: 600; }
.red-risk-rewards>em { color: #ff8ca2; font-style: normal; font-weight: 600; }
.red-risk-copy>small { font-size: 11px; line-height: 1.5; color: #abb0b7; }
.red-legacy-note { display: block; margin-top: 4px; color: #8b939d; font-size: 10px; font-weight: 400; line-height: 1.3; }
.red-risk-rules { border-color: #733041; }
.red-risk-rules>b>i { color: #ff637b; }
.match-h2h { margin: 12px 16px; border: 1px solid #4d2b66; border-radius: 10px; overflow: hidden; background: #000; box-shadow: inset 3px 0 0 #7c3aed; }
.match-h2h[open] { border-color: #70419a; box-shadow: inset 3px 0 0 #9b5de5, 0 0 20px rgba(91,33,182,.09); }
.match-h2h>summary { display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 9px 13px; cursor: pointer; list-style: none; background: linear-gradient(90deg,rgba(91,33,182,.18) 0%,rgba(58,24,91,.08) 46%,rgba(0,0,0,0) 100%); }
.match-h2h>summary:hover { background: linear-gradient(90deg,rgba(109,40,217,.24) 0%,rgba(58,24,91,.1) 50%,rgba(0,0,0,0) 100%); }
.match-h2h>summary::-webkit-details-marker { display: none; }
.match-h2h>summary>i:first-child { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border: 1px solid rgba(183,148,244,.34); border-radius: 9px; background: rgba(91,33,182,.22); color: #c4a1ff; font-size: 15px; }
.mh-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 9px; min-width: 0; }
.mh-heading>b { font-size: 13px; color: #f2eaff; font-weight: 700; }
.mh-heading>span { font-size: 12px; color: #a98fbc; }
.mh-chevron { margin-left: auto; color: #9874b5; font-size: 11px; }
.match-h2h[open]>summary .mh-chevron { transform: rotate(180deg); }
.match-h2h[open]>summary { border-bottom: 1px solid rgba(139,92,246,.2); }
.mh-body { padding: 0 13px 13px; }
.mh-note, .mh-caption, .mh-footnote { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 6px 0 10px; }
.mh-note>i { margin-right: 6px; color: var(--link); }
.mh-balance { display: grid; grid-template-columns: minmax(0,1fr) minmax(55px,.65fr) minmax(0,1fr); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; background: #050b13; }
.mh-balance>div { min-width: 0; display: grid; align-content: start; gap: 3px; text-align: center; padding: 10px 5px; }
.mh-balance>div+div { border-left: 1px solid var(--line); }
.mh-balance b { color: var(--link); font-size: 20px; line-height: 1.2; font-weight: 600; }
.mh-balance span { color: var(--muted); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.mh-results { padding: 0; margin: 0; list-style: none; }
.mh-event { padding: 10px 0; border-top: 1px solid var(--line); }
.mh-meta { display: flex; gap: 8px; align-items: baseline; color: var(--muted); font-size: 10px; line-height: 1.4; margin-bottom: 5px; }
.mh-meta time { flex: 0 0 auto; }
.mh-meta>span { min-width: 0; overflow-wrap: anywhere; }
.mh-score-row { display: grid; grid-template-columns: minmax(0,1fr) 52px minmax(0,1fr); align-items: center; gap: 8px; font-size: 12px; line-height: 1.4; }
.mh-home, .mh-away { min-width: 0; overflow-wrap: anywhere; }
.mh-away { text-align: right; }
.mh-score { padding: 4px; text-align: center; border-radius: 6px; background: #101419; color: var(--text); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mh-winner { color: var(--link); font-weight: 600; }
.mh-footnote { margin: 6px 0 0; font-size: 10px; }
.mh-retry { border: 1px solid var(--line); border-radius: 999px; min-height: 36px; padding: 7px 12px; color: var(--link); background: transparent; font-size: 12px; font-weight: 600; cursor: pointer; }
.mh-retry:hover { background: var(--surface-hover); }

/* Kursy 1X2 — osobny panel, pobierany dopiero po rozwinięciu. */
.match-odds { margin: 12px 16px; border: 1px solid #623714; border-radius: 10px; overflow: hidden; background: #000; box-shadow: inset 3px 0 0 #f97316; }
.match-odds[open] { border-color: #9a4d12; box-shadow: inset 3px 0 0 #fb923c, 0 0 20px rgba(249,115,22,.08); }
.match-odds>summary { display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 9px 13px; cursor: pointer; list-style: none; background: linear-gradient(90deg,rgba(194,65,12,.2) 0%,rgba(92,39,13,.08) 46%,rgba(0,0,0,0) 100%); }
.match-odds>summary:hover { background: linear-gradient(90deg,rgba(234,88,12,.25) 0%,rgba(92,39,13,.1) 50%,rgba(0,0,0,0) 100%); }
.match-odds>summary::-webkit-details-marker, .mo-books>summary::-webkit-details-marker { display: none; }
.match-odds>summary>i:first-child { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border: 1px solid rgba(251,146,60,.38); border-radius: 9px; background: rgba(194,65,12,.23); color: #fb923c; font-size: 15px; }
.mo-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 9px; min-width: 0; }
.mo-heading>b { font-size: 13px; color: #fff1e7; font-weight: 700; }
.mo-heading>span { font-size: 12px; color: #bb9175; }
.mo-chevron { margin-left: auto; color: #b8794f; font-size: 11px; }
.match-odds[open]>summary .mo-chevron { transform: rotate(180deg); }
.match-odds[open]>summary { border-bottom: 1px solid rgba(249,115,22,.18); }
.mo-body { padding: 0 13px 13px; }
.mo-note, .mo-caption, .mo-footnote { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 6px 0 10px; }
.mo-note>i { margin-right: 6px; color: var(--link); }
.mo-best, .mo-chances { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid #25292d; border-radius: 9px; overflow: hidden; background: #080a0d; }
.mo-pick, .mo-chances>div { min-width: 0; display: grid; justify-items: center; align-content: start; gap: 3px; text-align: center; padding: 11px 5px; }
.mo-pick+.mo-pick, .mo-chances>div+div { border-left: 1px solid var(--line); }
.mo-pick>span { color: var(--muted); font-size: 11px; font-weight: 700; }
.mo-pick>b { color: var(--link); font-size: 21px; line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; }
.mo-pick>small, .mo-chances small { min-width: 0; color: var(--muted); font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
.mo-chances-title { margin: 13px 0 6px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.mo-chances { background: #000; }
.mo-chances>div { grid-template-columns: auto auto; column-gap: 5px; padding: 8px 4px; }
.mo-chances span { color: var(--muted); font-size: 10px; font-weight: 700; }
.mo-chances b { color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }
.mo-chances small { grid-column: 1/-1; }
.mo-books { margin-top: 14px; border: 1px solid #292d31; border-radius: 10px; overflow: hidden; background: #030303; }
.mo-books>summary { min-height: 42px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; background: #0b0d0f; color: #f1f3f4; font-size: 11px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.mo-books>summary small { margin-left: auto; color: #71767b; font-size: 9px; font-weight: 700; letter-spacing: .03em; }
.mo-books>summary i { color: #71767b; font-size: 10px; }
.mo-books[open]>summary i { transform: rotate(180deg); }
.mo-book-head, .mo-book { display: grid; grid-template-columns: minmax(110px,1fr) repeat(3,minmax(62px,.62fr)); align-items: center; gap: 8px; min-width: 0; }
.mo-book-head { min-height: 32px; padding: 6px 9px; background: #111417; color: #b6bdc3; font-size: 9px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.mo-book-head span:not(:first-child) { text-align: center; }
.mo-book-head small { color: #626970; font-size: 7px; }
.mo-book-list { background: #030303; }
.mo-book { min-height: 57px; padding: 9px; border-bottom: 1px solid #24282c; font-size: 11px; }
.mo-book:last-child { border-bottom: 0; }
.mo-brand { min-width: 0; display: flex; align-items: center; }
.mo-brand.has-logo { width: 76px; height: 32px; max-width: 100%; padding: 5px 7px; justify-content: center; border-radius: 8px; overflow: hidden; }
.mo-brand-165 { background: #0765c7; }
.mo-brand-163 { background: #ffdc24; }
.mo-brand-591 { background: #f20718; }
.mo-brand-539 { background: #e20b19; }
.mo-brand-572 { background: #006858; }
.mo-brand-1095 { background: #fff; }
.mo-brand-502 { background: #292b2d; }
.mo-brand img { display: block; width: 100%; height: auto; max-width: 62px; max-height: 22px; object-fit: contain; }
.mo-brand img[hidden], .mo-brand b[hidden] { display: none !important; }
.mo-brand b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f2f6f7; font-size: 11px; font-weight: 700; }
.mo-odd { min-width: 0; min-height: 34px; padding: 5px 6px; border: 1px solid #252b31; border-radius: 8px; display: grid; grid-template-columns: 16px minmax(0,1fr); align-items: center; column-gap: 3px; background: #090b0e; color: #eff7fa; font-variant-numeric: tabular-nums; }
.mo-odd.is-best { border-color: #1769aa; background: #0b3158; box-shadow: inset 0 0 0 1px rgba(29,155,240,.1); }
.mo-odd strong { justify-self: center; color: #f5f9fb; font-size: 12px; font-weight: 800; }
.mo-up, .mo-down, .mo-same { font-size: 18px; line-height: 1; font-weight: 500; }
.mo-up { color: #00d887; }.mo-down { color: #ff334b; }.mo-same { visibility: hidden; color: #66808a; }
.mo-footnote { margin: 10px 0 0; font-size: 10px; }
.mo-retry { border: 1px solid var(--line); border-radius: 999px; min-height: 36px; padding: 7px 12px; color: var(--link); background: transparent; font-size: 12px; font-weight: 600; cursor: pointer; }
.mo-retry:hover { background: var(--surface-hover); }
@media (max-width: 799px) {
  .match-odds { margin: 10px; }
  .match-odds>summary { padding: 10px; }
  .mo-body { padding: 0 10px 10px; }
  .mo-books { margin-left: -2px; margin-right: -2px; }
  .mo-book-head, .mo-book { grid-template-columns: minmax(68px,1fr) repeat(3,minmax(51px,.62fr)); gap: 4px; padding-left: 6px; padding-right: 6px; }
  .mo-brand.has-logo { width: 72px; height: 30px; padding: 5px 6px; }
  .mo-brand img { max-width: 60px; max-height: 20px; }
  .mo-odd { min-height: 32px; padding: 4px 3px; grid-template-columns: 13px minmax(0,1fr); column-gap: 1px; }
  .mo-odd strong { font-size: 11px; }
  .mo-up, .mo-down, .mo-same { font-size: 15px; }
  .match-h2h { margin: 10px; }
  .match-h2h>summary { padding: 10px; }
  .mh-body { padding: 0 10px 10px; }
  .red-risk { padding: 13px 10px; gap: 9px; }
  .red-risk-icon { font-size: 17px; }
}