:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --bg: #0b1220;
  --panel: #172538;
  --panel-raised: #22344c;
  --line: #40546d;
  --line-soft: #303a46;
  --text: #e0e5eb;
  --muted: #abb6c4;
  --accent: #abc8ed;
  --surface-hover: #263c57;
  --success: #81e6ab;
  --danger: #ffa6a4;
  --gold: #f2d18f;
  --blue: #abc8ed;
  --red: #ffa6a4;
  --side: 232px;
  --radius: 7px;
  --portrait-radius: 4px;
  --font-reading: 16px;
  --font-navigation: 17px;
  --font-secondary: 15px;
  --font-caption: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-size: 18px; line-height: 1.65; }
button, input, select, textarea { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: -60px; left: 16px; padding: 10px 14px; border-radius: 6px; background: var(--accent); color: #102b25; }
.skip-link:focus { top: 10px; }

.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; display: flex; width: var(--side); flex-direction: column; padding: 28px 18px 18px; border-right: 1px solid var(--line); background: #11161d; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 12px; font-size: 24px; font-weight: 800; letter-spacing: 2px; line-height: 1.2; }
.brand img { flex: 0 0 auto; }
.brand-sub { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: 1.1px; }
.season-label { display: flex; align-items: center; gap: 8px; padding: 28px 9px 22px; color: #cbd5df; font-size: 15px; }
.live-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px #75e2c13b; }
.primary-nav { display: grid; gap: 4px; }
.nav-item { position: relative; display: flex; min-height: 46px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: #abb5c3; font-size: 16px; }
.nav-item:hover { background: #1a222c; color: var(--text); }
.nav-item.active { background: #75e2c111; color: var(--accent); }
.nav-item.active::before { position: absolute; inset: 12px auto 12px 0; width: 3px; border-radius: 2px; background: var(--accent); content: ""; }
.nav-icon { width: 20px; color: currentColor; font-size: 20px; line-height: 1; text-align: center; }
.nav-tag { margin-left: auto; color: #8e9aaa; font-size: 13px; white-space: nowrap; }
.legacy-tag { color: #718073; }
.nav-disabled { cursor: default; opacity: .57; }
.nav-soon .nav-tag { color: #8995a5; }
.sidebar-bottom { margin-top: auto; padding-top: 24px; }
.utility-link { display: flex; justify-content: space-between; padding: 10px 12px; color: var(--muted); font-size: 15px; }
.utility-link:hover { color: var(--text); }
.sidebar-note { margin: 18px 8px 0; padding: 17px 3px 0; border-top: 1px solid var(--line); color: #b7c1ce; font-size: 15px; }
.sidebar-note .live-dot { width: 6px; height: 6px; margin-right: 5px; }
.sidebar-note > span:last-child { padding-left: 12px; color: var(--muted); font-size: 13px; }

.app-shell { min-height: 100vh; margin-left: var(--side); }
.topbar { position: relative; z-index: 20; display: flex; height: 72px; align-items: center; gap: 24px; padding: 0 36px; border-bottom: 1px solid var(--line); background: #0f141a; }
.breadcrumb { flex: 1 1 auto; min-width: 0; overflow: hidden; color: #cdd5df; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumb span { margin: 0 9px; color: #556273; }
.account-link { display: inline-flex; flex: 0 1 auto; min-width: 0; align-items: center; gap: 8px; margin-left: auto; color: #d7dee7; font-size: 15px; white-space: nowrap; }
.account-link:hover { color: var(--accent); }
.account-mark { flex: 0 0 auto; color: var(--accent); font-size: 19px; }
.account-name { display: inline-block; min-width: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-logout { flex: 0 0 auto; white-space: nowrap; }
#community-panel, #friendly-panel { scroll-margin-top: 82px; }

main { width: 100%; max-width: 1512px; min-height: calc(100vh - 150px); margin: 0 auto; padding: 28px 36px 40px; outline: none; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.eyebrow { margin-bottom: 7px; color: var(--accent); font-size: 14px; font-weight: 650; letter-spacing: 2.2px; }
.page-heading h1 { font-size: 34px; letter-spacing: -.7px; line-height: 1.3; }
.page-heading p { margin-top: 6px; color: var(--muted); font-size: 15px; }
.date-pill { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; color: var(--muted); font-size: 15px; white-space: nowrap; }

.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 294px; align-items: start; gap: 22px; }
.primary-column, .aside-column { display: grid; min-width: 0; gap: 19px; }
.hero { position: relative; min-height: 300px; overflow: hidden; border: 1px solid #31493e; border-radius: var(--radius); background: linear-gradient(110deg, #192c28 0%, #172521 48%, #15211f 100%); }
.hero::after { position: absolute; inset: auto 0 0; height: 1px; background: #a9decd20; content: ""; }
.hero-art { position: absolute; top: -42px; right: -20px; width: 55%; height: 340px; object-fit: contain; opacity: .88; pointer-events: none; }
.hero-copy { position: relative; z-index: 1; width: 67%; padding: 29px 30px 23px; }
.hero-kicker { display: flex; align-items: center; gap: 8px; color: var(--gold); font-size: 14px; letter-spacing: 1.7px; text-transform: uppercase; }
.hero-kicker .live-dot { width: 6px; height: 6px; }
.hero h2 { max-width: 560px; margin: 17px 0 10px; font-size: clamp(25px, 2.5vw, 34px); letter-spacing: -1px; line-height: 1.26; }
.hero-description { max-width: 420px; min-height: 42px; color: #abc2b8; font-size: 15px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 21px; }
.btn { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 9px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 7px; background: #202a35; color: var(--text); font-size: 15px; font-weight: 650; }
.btn:hover { filter: brightness(1.13); }
.btn.primary { border-color: var(--accent); background: var(--accent); color: #113229; }
.btn.outline { border-color: #53635e; background: #14221f88; color: #d3e1da; }
.hero-meta { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; display: flex; min-height: 56px; align-items: center; gap: 24px; padding: 10px 30px; background: #0b161769; color: #bdcfc9; font-size: 15px; }
.hero-meta span { display: inline-flex; align-items: baseline; gap: 5px; }
.hero-meta strong { color: #e3eee8; font-size: 15px; font-weight: 650; }

.card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 19px 21px 15px; }
.card-heading h2 { font-size: 20px; letter-spacing: -.2px; }
.card-heading p { margin-top: 3px; color: var(--muted); font-size: 14px; }
.text-link { color: var(--accent); font-size: 15px; white-space: nowrap; }
.text-link:hover { text-decoration: underline; }
.match-list { border-top: 1px solid var(--line); }
.match-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 54px minmax(0, 1fr) 72px; min-height: 70px; align-items: center; gap: 11px; padding: 10px 20px; border-bottom: 1px solid var(--line); }
.match-row:last-child { border-bottom: 0; }
.match-date { color: #e2e7ed; font-size: 15px; font-variant-numeric: tabular-nums; }
.match-date small { display: block; color: var(--muted); font-size: 14px; }
.match-team { display: flex; min-width: 0; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.match-team.away { justify-content: flex-end; text-align: right; }
.team-crest { display: inline-flex; width: 29px; height: 29px; flex: 0 0 auto; align-items: center; justify-content: center; border: 1px solid #486575; border-radius: 8px; background: linear-gradient(135deg, #345464, #22303c); color: #d5ecee; font-size: 14px; }
.match-team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-score { color: #c9d2dc; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-align: center; white-space: nowrap; }
.match-score.pending { color: #788697; font-size: 14px; font-weight: 500; letter-spacing: 0; }
.match-status { justify-self: end; padding: 4px 8px; border: 1px solid #75e2c122; border-radius: 5px; background: #75e2c110; color: var(--accent); font-size: 12px; white-space: nowrap; }
.match-status.finished { border-color: #344050; background: #222c38; color: #b5bfcc; }
.loading-row, .empty-row { padding: 20px; color: var(--muted); font-size: 14px; text-align: center; }
.error-row { color: var(--red); }

.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.feature-card { display: flex; min-height: 82px; align-items: center; gap: 12px; padding: 14px 15px; transition: border-color .15s, transform .15s; }
.feature-card:hover { transform: translateY(-1px); border-color: #496359; }
.feature-symbol { display: inline-flex; width: 35px; height: 35px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 10px; font-size: 18px; }
.friendly-symbol { background: #75e2c115; color: var(--accent); }
.community-symbol { background: #e8c47c15; color: var(--gold); }
.fantasy-symbol { background: #d3b5ff18; color: #d3b5ff; }
.feature-copy { display: grid; min-width: 0; gap: 2px; }
.feature-copy strong { font-size: 14px; }
.feature-copy small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.feature-arrow { margin-left: auto; color: #7e8b9a; font-size: 14px; }

.account-card { padding: 21px; background: linear-gradient(140deg, #1b2630, #151b23); }
.account-card .eyebrow { margin-bottom: 8px; }
.account-card h2 { font-size: 18px; }
.account-card > p { margin-top: 7px; color: var(--muted); font-size: 14px; }
.account-summary { display: flex; align-items: center; gap: 11px; min-width: 0; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.account-summary > div { min-width: 0; }
.account-summary strong { display: block; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.account-summary p { color: var(--muted); font-size: 13px; line-height: 1.45; }
.account-avatar { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-raised); color: var(--accent); font-size: 19px; font-weight: 700; }
.account-balance-label { margin-top: 18px; color: var(--muted); font-size: 14px; }
.account-balance { margin: 10px 0 2px; color: var(--gold); font-size: 38px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.account-balance small { margin-left: 7px; color: var(--muted); font-size: 13px; font-weight: 400; }
.account-card .account-balance-note { margin-top: 3px; color: var(--muted); font-size: 12px; }
.account-cta { width: 100%; margin-top: 17px; border-color: var(--gold); background: var(--gold); color: #2a2418; }
.account-cta:hover { color: #2a2418; }
.account-cta span { margin-left: auto; }
.account-quick-link { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; min-height: 47px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; font-size: 14px; text-align: left; }
.account-quick-link:last-child { border-bottom: 0; padding-bottom: 0; }
.account-quick-link span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.account-quick-link:hover, .account-quick-link:hover span { color: var(--accent); }

.standings-card { background: #151b23; }
.standings-heading { min-height: 69px; }
.group-select { max-width: 92px; padding: 6px 20px 6px 8px; border: 1px solid #35404e; border-radius: 5px; background: #1b232e; color: #d5dde6; font-size: 13px; }
.standings-table-wrap { min-height: 100px; border-top: 1px solid var(--line); }
.standings-table { width: 100%; border-collapse: collapse; text-align: left; }
.standings-table th { padding: 10px 9px; color: #8793a2; font-size: 12px; font-weight: 500; }
.standings-table td { padding: 10px 9px; border-top: 1px solid #232c37; font-size: 13px; }
.standings-table th:first-child, .standings-table td:first-child { width: 39px; padding-left: 16px; }
.standings-table th:last-child, .standings-table td:last-child { padding-right: 16px; text-align: right; }
.standings-rank { color: #8793a2; font-variant-numeric: tabular-nums; }
.standings-rank.top { color: var(--gold); font-weight: 700; }
.standings-name { overflow: hidden; max-width: 146px; text-overflow: ellipsis; white-space: nowrap; }
.standings-points { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.standings-record { color: #aab5c3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.standings-footer { display: flex; justify-content: space-between; gap: 8px; padding: 11px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.standings-footer a { color: var(--accent); white-space: nowrap; }
.standings-footer a:hover { text-decoration: underline; }
.notice-card { display: flex; gap: 11px; padding: 14px; border: 1px solid #65444a; border-radius: 10px; background: #301e25; }
.notice-icon { display: flex; width: 21px; height: 21px; flex: 0 0 auto; align-items: center; justify-content: center; border: 1px solid #aa6974; border-radius: 50%; color: #ffb5ba; font-size: 13px; }
.notice-card strong { color: #ffd0d3; font-size: 14px; }
.notice-card p { margin-top: 3px; color: #d4aeb3; font-size: 13px; }
.notice-card button { margin-top: 8px; padding: 0; border: 0; background: none; color: #ffb5ba; font-size: 13px; text-decoration: underline; }

.footer { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 36px; border-top: 1px solid #202833; color: #c2ccd8; font-size: 13px; letter-spacing: .6px; }
.footer span span { color: var(--muted); font-weight: 400; letter-spacing: 0; }
.footer a { color: var(--muted); letter-spacing: 0; }
.footer a:hover { color: var(--accent); }
.mobile-nav { display: none; }

/* Tournament center */
.tournament-heading { align-items: center; }
.tournament-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.tournament-overview-card { display: flex; min-height: 104px; align-items: center; gap: 13px; padding: 17px 19px; }
.tournament-overview-icon { display: inline-flex; width: 40px; height: 40px; flex: 0 0 auto; align-items: center; justify-content: center; border: 1px solid #99baff2b; border-radius: 11px; background: #99baff10; color: var(--blue); font-size: 20px; }
.tournament-overview-card > div { display: grid; gap: 3px; min-width: 0; }
.tournament-overview-card > div > span { color: var(--muted); font-size: 15px; }
.tournament-overview-card strong { color: var(--text); font-size: 27px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.tournament-overview-card.is-live .tournament-overview-icon { border-color: #75e2c13b; background: #75e2c111; color: var(--accent); }
.tournament-overview-card.is-live strong { color: var(--accent); }
.tournament-overview-card.is-upcoming .tournament-overview-icon { border-color: #e8c47c3b; background: #e8c47c11; color: var(--gold); }
.tournament-overview-card.is-upcoming strong { color: var(--gold); }
.tournament-overview-card.is-ended .tournament-overview-icon { border-color: #6571843b; background: #65718411; color: #aeb8c6; }
.tournament-overview-card.is-ended strong { color: #c2cbd6; }
.tournament-panel { overflow: hidden; }
.tournament-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 21px 23px 16px; }
.tournament-panel-heading h2 { font-size: 22px; }
.tournament-panel-heading p { margin-top: 4px; color: var(--muted); font-size: 15px; }
.tournament-retry { min-height: 36px; padding: 6px 13px; font-size: 14px; }
.tournament-filters { display: flex; gap: 5px; overflow-x: auto; padding: 0 23px 15px; border-bottom: 1px solid var(--line); }
.tournament-filter { display: inline-flex; min-height: 36px; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); font-size: 15px; white-space: nowrap; }
.tournament-filter span { display: inline-flex; min-width: 21px; height: 21px; align-items: center; justify-content: center; padding: 0 5px; border-radius: 10px; background: #293440; color: #b6c0cd; font-size: 12px; font-variant-numeric: tabular-nums; }
.tournament-filter:hover { color: var(--text); }
.tournament-filter.active { border-color: #75e2c13b; background: #75e2c111; color: var(--accent); font-weight: 650; }
.tournament-filter.active span { background: #75e2c126; color: var(--accent); }
.tournament-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; padding: 20px 23px 23px; }
.tournament-card { display: flex; min-width: 0; min-height: 250px; flex-direction: column; padding: 18px; border-color: #303b48; background: linear-gradient(150deg, #19242c, #111820 70%); transition: border-color .16s, transform .16s, box-shadow .16s; }
.tournament-card:hover { transform: translateY(-2px); border-color: #55766e; box-shadow: 0 10px 26px #0003; }
.tournament-card.status-upcoming { background: linear-gradient(150deg, #28251d, #111820 70%); }
.tournament-card.status-ended { background: linear-gradient(150deg, #1b2028, #111820 70%); }
.tournament-card-top { display: flex; align-items: center; justify-content: flex-end; }
.tournament-status { padding: 4px 8px; border: 1px solid #75e2c13b; border-radius: 5px; background: #75e2c10d; color: var(--accent); font-size: 12px; white-space: nowrap; }
.status-upcoming .tournament-status { border-color: #e8c47c3b; background: #e8c47c0d; color: var(--gold); }
.status-ended .tournament-status { border-color: #6571843b; background: #6571840d; color: #aeb8c6; }
.tournament-card-body { display: flex; flex: 1; align-items: flex-end; min-width: 0; padding: 24px 1px 16px; }
.tournament-card h3 { margin: 0; color: var(--text); font-size: 22px; line-height: 1.35; overflow-wrap: anywhere; }
.tournament-card-meta { padding-top: 12px; border-top: 1px solid #303b48; color: #abb6c4; font-size: 14px; }
.tournament-empty { display: flex; min-height: 250px; grid-column: 1 / -1; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 28px; color: var(--muted); text-align: center; }
.tournament-empty > span { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid #405048; border-radius: 50%; color: var(--accent); font-size: 20px; }
.tournament-empty strong { color: var(--text); font-size: 17px; font-weight: 600; }
.tournament-empty p { font-size: 14px; }
.tournament-empty.is-error > span { border-color: #75454b; color: var(--red); }

/* Tournament detail */
.event-detail-hero { position: relative; min-height: 278px; overflow: hidden; border-color: #31493e; background: linear-gradient(112deg, #192c28, #172521 55%, #131d20); }
.event-detail-hero::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: #a9decd27; content: ""; }
.event-detail-hero-copy { position: relative; z-index: 1; max-width: 720px; padding: 31px 34px 34px; }
.event-detail-hero-copy h1 { max-width: 720px; margin: 13px 0 9px; font-size: clamp(30px, 4vw, 45px); letter-spacing: -1px; line-height: 1.2; }
.event-detail-hero-copy p { max-width: 610px; color: #b4c9bf; font-size: 16px; line-height: 1.75; }
.event-detail-kicker { display: flex; align-items: center; gap: 8px; color: var(--gold); font-size: 15px; letter-spacing: .7px; }
.event-detail-kicker .live-dot { width: 6px; height: 6px; }
.event-detail-hero-art { position: absolute; top: -57px; right: -29px; width: 46%; height: 350px; opacity: .77; pointer-events: none; }
.event-detail-hero-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.event-detail-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.event-detail-actions .live-button { border-color: #8bb9c1; background: #173339; color: #bfe9e6; }
.event-detail-actions .live-button:hover { border-color: #bfe9e6; background: #20444b; }
.event-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-top: 17px; }
.event-stat { display: grid; min-height: 112px; gap: 4px; padding: 17px 18px; }
.event-stat-label { color: var(--muted); font-size: 14px; }
.event-stat strong { overflow: hidden; color: var(--text); font-size: 25px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.event-stat small { overflow: hidden; color: #7f8d9e; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.event-stat:nth-child(1) strong { color: var(--accent); }
.event-stat:nth-child(2) strong { color: var(--blue); }
.event-stat:nth-child(3) strong { color: var(--gold); }
.event-stat:nth-child(4) strong { color: #d3b5ff; }
.event-detail-tabs { display: flex; gap: 5px; margin: 22px 0 17px; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--line); scrollbar-width: none; touch-action: pan-x; overscroll-behavior-x: contain; }
.event-detail-tabs::-webkit-scrollbar, .event-stage-filters::-webkit-scrollbar { display: none; }
.event-detail-tab { flex: 0 0 auto; min-height: 43px; padding: 8px 14px 11px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--muted); font-size: 16px; }
.event-detail-tab:hover, .event-detail-tab.active { border-bottom-color: var(--accent); color: var(--accent); }
.event-detail-tab.active { font-weight: 650; }
.event-detail-panel[hidden] { display: none; }
.event-detail-panel { display: grid; gap: 17px; }
.event-detail-notice { margin-bottom: 17px; padding: 11px 15px; border: 1px solid #79504d; border-radius: 9px; background: #8e4e4417; color: #ffb0a9; font-size: 14px; }
.event-overview-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 17px; }
.event-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 21px 23px 16px; }
.event-section-heading .eyebrow { margin-bottom: 4px; font-size: 11px; letter-spacing: 1.7px; }
.event-section-heading h2 { font-size: 22px; line-height: 1.3; }
.event-section-heading p { margin-top: 4px; color: var(--muted); font-size: 14px; }
.event-live-badge { flex: 0 0 auto; padding: 4px 9px; border: 1px solid #75e2c14a; border-radius: 6px; background: #75e2c111; color: var(--accent); font-size: 13px; white-space: nowrap; }
.event-live-badge.is-finished { border-color: #68778c55; background: #68778c14; color: #adb9c8; }
.event-live-badge.is-upcoming { border-color: #e8c47c55; background: #e8c47c12; color: var(--gold); }
.event-next-content { padding: 0 23px 21px; }
.event-next-match-meta { display: flex; flex-wrap: wrap; gap: 8px 17px; color: var(--muted); font-size: 14px; }
.event-next-match-meta span + span { position: relative; }
.event-next-match-meta span + span::before { position: absolute; top: 50%; left: -10px; width: 3px; height: 3px; border-radius: 50%; background: #536172; content: ""; transform: translateY(-50%); }
.event-next-match-teams { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: center; gap: 13px; margin-top: 22px; }
.event-next-match-teams > div { display: grid; min-width: 0; justify-items: center; gap: 5px; text-align: center; }
.event-next-match-teams > b { color: #697688; font-size: 15px; text-align: center; }
.event-team-crest { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border: 1px solid #75e2c16b; border-radius: 14px; background: #75e2c114; color: var(--accent); font-size: 21px; font-weight: 700; }
.event-team-crest.is-away { border-color: #99baff65; background: #99baff12; color: var(--blue); }
.event-next-match-teams strong { max-width: 230px; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.event-next-match-teams small { max-width: 230px; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.event-next-match-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 21px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.event-rules-content { padding: 0 23px 21px; }
.event-rule-row { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid #29323e; }
.event-rule-row:first-child { border-top: 0; }
.event-rule-row span { color: var(--muted); font-size: 13px; }
.event-rule-row strong { color: #d7e0ea; font-size: 14px; font-weight: 500; line-height: 1.55; }
.event-recent-card, .event-preview-card, .event-schedule-panel, .event-bracket-panel, .event-standings-panel, .event-teams-panel { overflow: hidden; }
.event-jump-button { padding: 0; border: 0; background: transparent; font-size: 13px; }
.event-schedule-list { display: grid; gap: 6px; padding: 0 23px 18px; }
.event-match-card { display: grid; grid-template-columns: minmax(115px, .7fr) minmax(0, 2fr) auto; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid #303b48; border-left: 3px solid #59697b; border-radius: 9px; background: #111820; }
.event-match-card.is-live { border-left-color: var(--accent); background: #14231e; }
.event-match-card.is-upcoming { border-left-color: var(--gold); }
.event-match-card-top { display: flex; min-width: 0; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.event-match-round { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-match-bo { flex: 0 0 auto; padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--muted); font-size: 13px; }
.event-match-versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); min-width: 0; align-items: center; gap: 8px; }
.event-match-team { min-width: 0; color: #c9d2dc; font-size: 14px; }
.event-match-team.is-home { text-align: right; }
.event-match-team.is-away { text-align: left; }
.event-match-team span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-match-team.is-winner span { color: var(--success); font-weight: 700; }
.event-match-score { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 14px; white-space: nowrap; }
.event-match-score strong { min-width: 1ch; color: #c9d2dc; font-size: 17px; font-variant-numeric: tabular-nums; text-align: center; }
.event-match-score strong.is-winner { color: var(--success); }
.event-match-card-meta { display: flex; min-width: 0; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.event-match-card-meta > span:first-child { white-space: nowrap; }
.event-match-status.is-live { color: var(--accent); }
.event-match-status.is-upcoming { color: var(--gold); }
.event-match-status.is-finished { color: #93a0b0; }
.event-match-card.is-compact { padding: 7px 10px; }
.event-match-card.is-compact .event-match-team { font-size: 13px; }
.event-match-card-meta > .event-series-button { width: 26px; height: 26px; flex-basis: 26px; }
.event-overview-group-tabs, .event-group-filters, .event-stage-filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.event-overview-group-tabs { padding: 0 23px 13px; }
.event-overview-group, .event-group-filter, .event-stage-filter { min-height: 32px; padding: 5px 11px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); font-size: 14px; white-space: nowrap; }
.event-overview-group:hover, .event-group-filter:hover, .event-stage-filter:hover, .event-overview-group.active, .event-group-filter.active, .event-stage-filter.active { border-color: #75e2c13b; background: #75e2c111; color: var(--accent); }
.event-overview-standings { padding-bottom: 7px; }
.event-table-wrap { overflow-x: auto; }
.event-standings-table { width: 100%; border-collapse: collapse; color: #c7d0dc; font-size: 14px; text-align: left; }
.event-standings-table th { padding: 10px 13px; color: #8491a1; font-size: 13px; font-weight: 500; white-space: nowrap; }
.event-standings-table td { padding: 11px 13px; border-top: 1px solid #29323e; white-space: nowrap; }
.event-standings-table th:first-child, .event-standings-table td:first-child { padding-left: 23px; }
.event-standings-table th:last-child, .event-standings-table td:last-child { padding-right: 23px; }
.event-standings-table tr.is-qualified { background: #75e2c107; }
.event-rank { color: #8491a1; font-variant-numeric: tabular-nums; }
.event-rank.is-top { color: var(--gold); font-weight: 700; }
.event-standings-name { min-width: 150px; color: var(--text); font-weight: 600; }
.event-standings-name small { display: block; margin-top: 1px; color: var(--accent); font-size: 11px; font-weight: 400; }
.event-points { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.event-stats-panel { overflow: hidden; }
.event-stats-toolbar { display: flex; min-height: 64px; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 10px 23px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.event-stats-subtabs { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: #111e2e; }
.event-stats-subtab { min-height: 34px; padding: 5px 13px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 14px; }
.event-stats-subtab:hover { color: var(--text); }
.event-stats-subtab.active { background: #28466b; color: #d1e3ff; font-weight: 650; }
.event-stats-min-games { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; white-space: nowrap; }
.event-stats-min-games input { width: 67px; height: 34px; padding: 4px 7px; border: 1px solid #6482a5; border-radius: 5px; background: #101b2b; color: var(--text); font-size: 14px; }
.event-stats-count { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
.event-stats-message { padding: 28px 23px; color: var(--muted); font-size: 14px; }
.event-stats-message button { margin-left: 8px; border: 0; background: transparent; }
.event-stats-table-wrap { max-width: 100%; max-height: min(70dvh, 760px); overflow: auto; scrollbar-width: thin; scrollbar-color: #60758e #172538; scrollbar-gutter: stable; }
.event-stats-table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.event-stats-table thead { position: sticky; top: 0; z-index: 3; }
.event-stats-table .event-stats-groups th { padding: 8px 12px; border-right: 1px solid var(--line); background: var(--panel-raised); color: var(--accent); text-align: center; font-weight: 600; }
.event-stats-table .event-stats-groups th:first-child { background: var(--panel-raised); }
.event-stats-table .event-stats-group-start { border-left: 1px solid var(--line); }
.event-stats-table { width: 100%; min-width: 1500px; border-collapse: separate; border-spacing: 0; color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; }
.event-stats-table.is-hero { min-width: 720px; }
.event-stats-table th, .event-stats-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.event-stats-table th { background: #101b2b; color: #d4e2f1; font-size: 13px; font-weight: 500; }
.event-stats-table th:first-child, .event-stats-table td:first-child { position: sticky; left: 0; z-index: 1; min-width: 155px; text-align: left; }
.event-stats-table.is-hero th:first-child, .event-stats-table.is-hero td:first-child { width: 96px; min-width: 96px; max-width: 96px; text-align: center; }
.event-stats-table th:first-child { z-index: 2; }
.event-stats-table td:first-child { background: var(--panel); }
.event-stats-table tbody tr:hover, .event-stats-table tbody tr:hover td:first-child { background: #263c57; }
.event-stats-table th.event-stats-highlight-k, .event-stats-table td.event-stats-highlight-k,
.event-stats-table th.event-stats-highlight-k .event-stats-sort:is(:hover,.active) { color: #c9f7dc; }
.event-stats-table th.event-stats-highlight-gold, .event-stats-table td.event-stats-highlight-gold,
.event-stats-table th.event-stats-highlight-gold .event-stats-sort:is(:hover,.active) { color: #ffebba; }
.event-stats-sort { display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; }
.event-stats-sort:hover, .event-stats-sort.active { color: var(--accent); }
.event-stats-sort span { color: #8fa9c7; font-size: 12px; }
.event-stats-player-name { color: var(--text); font-weight: 650; }
.event-stats-player-identity { min-width: 190px; }
.event-stats-player-identity.friendly-player-button small { color: var(--muted); font-variant-numeric: tabular-nums; }
.event-stats-rate { color: var(--success); font-weight: 650; }
.event-stats-rate small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.event-stats-hero, .event-stats-top-heroes { display: inline-flex; align-items: center; gap: 7px; }
.event-stats-hero { vertical-align: middle; }
.event-stats-hero img { display: block; width: 72px; height: 42px; border: 1px solid var(--line); border-radius: 4px; object-fit: cover; object-position: center top; }
.event-stats-top-heroes > span { display: inline-grid; justify-items: center; gap: 2px; }
.event-stats-top-heroes img { width: 25px; height: 25px; border-radius: 4px; object-fit: cover; }
.event-stats-top-heroes small { color: var(--muted); font-size: 10px; }
.event-hero-complements { display: grid; min-width: 0; gap: 14px; padding: 20px 23px 23px; }
.event-hero-complements-note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.event-hero-complement { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.event-hero-complement h3 { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin: 0; padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--panel-raised); color: var(--text); font-size: 17px; font-weight: 650; line-height: 1.5; }
.event-hero-complement h3 span { flex: 0 0 auto; min-width: 42px; padding: 2px 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--accent); font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; text-align: center; }
.event-hero-complement-icons { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 18px; }
.event-hero-complement-icons img { display: block; flex: 0 0 auto; width: 72px; height: 42px; object-fit: cover; object-position: center top; border-radius: 4px; background: var(--panel-raised); border: 1px solid var(--line); }
@media (max-width: 600px) {
  .event-hero-complements { gap: 12px; padding: 16px 15px; }
  .event-hero-complement h3 { gap: 8px; padding: 12px; font-size: 16px; }
  .event-hero-complement-icons { gap: 7px; padding: 12px; }
  .event-hero-complement-icons img { width: 64px; height: 37px; }
}
.event-registration-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 0 23px 14px; }
.event-registration-toolbar label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 14px; }
.event-registration-toolbar select { min-width: 132px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; background: #142336; color: var(--text); font: inherit; }
.event-registration-toolbar > span { margin-left: auto; color: var(--muted); font-size: 13px; }
.event-registration-summary { display: flex; flex-wrap: wrap; gap: 6px 17px; padding: 0 23px 16px; color: var(--muted); font-size: 13px; }
.event-registration-summary strong { color: var(--text); font-variant-numeric: tabular-nums; }
.event-registration-table-wrap { max-width: 100%; overflow-x: auto; border-top: 1px solid var(--line); }
.event-registration-table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 14px; }
.event-registration-table th, .event-registration-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.event-registration-table th { background: #101b2b; color: #d4e2f1; white-space: nowrap; }
.event-registration-table th button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.event-registration-table th button:hover, .event-registration-table th[aria-sort]:not([aria-sort="none"]) button { color: var(--accent); }
.event-registration-table td:first-child strong, .event-registration-table td:first-child small { display: block; }
.event-registration-table td:first-child small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.event-registration-table td:first-child a { color: #a9cfff; }
.event-registration-table tbody tr:last-child td { border-bottom: 0; }
.event-registration-table tbody tr:hover { background: #9bc5f313; }
.event-registration-table .skill-tyrannosaurus { border-color: #dc7777; background: #75353588; color: #ffd4ce; }
.event-registration-table .skill-siege_lion { border-color: #d6a367; background: #704c2f88; color: #ffe1b4; }
.event-registration-table .skill-swift_leopard { border-color: #b4a4df; background: #57467388; color: #e7ddff; }
.event-registration-table .skill-dire_hound { border-color: #7eb6d6; background: #30597688; color: #d2edff; }
.event-registration-table .skill-white_rabbit { border-color: #80b7a1; background: #305c4988; color: #d7f5e8; }
.event-stage-filters { padding: 0 23px 15px; border-bottom: 1px solid var(--line); }
/* Full schedule uses the same surfaces and status palette as the statistics cards. */
.event-schedule-panel .event-stage-filters { width: fit-content; max-width: calc(100% - 46px); gap: 4px; margin: 0 23px 18px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.event-schedule-panel .event-stage-filter { min-height: 36px; padding: 5px 18px; border-radius: 4px; font-size: 15px; }
.event-schedule-panel .event-stage-filter.active { border-color: var(--accent); background: var(--panel-raised); color: var(--accent); font-weight: 650; }
.event-schedule-panel .event-schedule-list { gap: 8px; }
.event-schedule-panel .event-match-card { grid-template-columns: minmax(100px, .55fr) minmax(0, 2fr) auto; gap: 12px; padding: 10px 12px; border-color: var(--line); border-left: 3px solid var(--line); border-radius: var(--radius); background: var(--panel-raised); }
.event-schedule-panel .event-match-card.is-live { border-left-color: var(--success); }
.event-schedule-panel .event-match-card.is-upcoming { border-left-color: var(--gold); }
.event-schedule-panel .event-match-card-top { color: var(--muted); font-size: 13px; }
.event-schedule-panel .event-match-bo { background: var(--panel); color: var(--muted); font-size: 13px; }
.event-schedule-panel .event-match-team { color: var(--text); font-size: 15px; }
.event-schedule-panel .event-match-score { gap: 7px; padding: 2px 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); }
.event-schedule-panel .event-match-score strong { color: var(--text); }
.event-schedule-panel .event-match-score strong.is-winner { color: var(--success); }
.event-schedule-panel .event-match-card-meta { justify-content: flex-end; font-size: 13px; }
.event-schedule-panel .event-match-status { padding: 2px 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); font-size: 12px; }
.event-schedule-panel .event-match-status.is-live { border-color: #81e6ab66; background: #81e6ab16; color: var(--success); }
.event-schedule-panel .event-match-status.is-upcoming { border-color: #f2d18f66; background: #f2d18f16; color: var(--gold); }
.event-schedule-panel .event-match-status.is-finished { color: var(--muted); }
@media (max-width: 1200px) {
  .event-schedule-panel .event-match-card { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .event-schedule-panel .event-match-card-top { grid-column: 1; grid-row: 1; }
  .event-schedule-panel .event-match-card-meta { grid-column: 2; grid-row: 1; }
  .event-schedule-panel .event-match-versus { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 760px) {
  .event-schedule-panel .event-stage-filters { max-width: calc(100% - 30px); margin-right: 15px; margin-left: 15px; padding: 4px; }
  .event-schedule-panel .event-match-card { gap: 8px; padding: 9px 10px; }
  .event-schedule-panel .event-match-card-top { flex-wrap: wrap; gap: 4px; font-size: 12px; }
  .event-schedule-panel .event-match-round { white-space: normal; overflow-wrap: anywhere; }
  .event-schedule-panel .event-match-card-meta { flex-wrap: wrap; gap: 5px; font-size: 12px; }
  .event-schedule-panel .event-match-team { font-size: 14px; }
  .event-schedule-panel .event-match-score { gap: 5px; padding: 2px 6px; }
}
@media (max-width: 420px) {
  .event-schedule-panel .event-match-card-meta { max-width: 158px; }
}
.event-stage-filter { min-height: 35px; font-size: 14px; }
.event-bracket { padding: 0 23px 23px; }
.event-bracket-scroll { display: flex; align-items: flex-start; gap: 13px; overflow-x: auto; padding-bottom: 5px; }
.event-bracket-track { display: grid; min-width: 315px; gap: 13px; }
.event-bracket-track > h3 { padding-bottom: 1px; color: #d8e2eb; font-size: 15px; }
.event-bracket-column { display: grid; gap: 7px; padding: 12px; border: 1px solid #303b48; border-radius: 10px; background: #111820; }
.event-bracket-column h3 { color: var(--muted); font-size: 12px; font-weight: 500; }
.event-bracket-match { padding: 8px; border: 1px solid #344251; border-radius: 7px; background: #151d26; }
.event-bracket-match-top, .event-bracket-date { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #8190a1; font-size: 10px; }
.event-bracket-match-top small { color: #aab8c7; }
.event-bracket-team { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0 4px; border-bottom: 1px solid #28333f; color: #bac5d0; font-size: 12px; }
.event-bracket-team:last-of-type { border-bottom: 0; }
.event-bracket-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-bracket-team b { color: #8b98a7; font-variant-numeric: tabular-nums; }
.event-bracket-team.is-winner span, .event-bracket-team.is-winner b { color: var(--accent); }
.event-bracket-date { justify-content: flex-start; margin-top: 4px; }
.event-original-bracket { display: flex; flex-direction: column; gap: 0; }
.event-original-section-label { display: inline-block; align-self: flex-start; margin: 15px 23px 4px; padding: 6px 10px; border-left: 3px solid; border-radius: 4px; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.event-original-section-label.is-upper { border-color: #75e2c1; background: #75e2c112; color: #75e2c1; }
.event-original-section-label.is-lower { border-color: var(--gold); background: #e8c47c12; color: var(--gold); }
.event-original-bracket-row { display: flex; gap: 16px; overflow-x: auto; padding: 8px 23px 18px; scrollbar-width: thin; }
.event-original-bracket-column { display: flex; min-width: 220px; flex: 0 0 220px; flex-direction: column; }
.event-original-bracket-header { margin-bottom: 6px; padding: 4px 8px; border-radius: 6px; background: #99baff12; color: var(--blue); font-size: 13px; font-weight: 650; text-align: center; white-space: nowrap; }
.event-original-bracket-header.is-final { background: #e8c47c12; color: var(--gold); }
.event-original-bracket-slot { display: flex; min-height: 124px; flex-direction: column; justify-content: center; padding: 4px 2px; }
.event-original-bracket-match { position: relative; min-width: 200px; overflow: visible; border: 1px solid #303b48; border-radius: 8px; background: #16213e; }
.event-original-bracket-team { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 11px; border-bottom: 1px solid #2a2a4a; color: #c8d2dd; font-size: 14px; }
.event-original-bracket-team:last-of-type { border-bottom: 0; }
.event-original-bracket-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-original-bracket-team strong { min-width: 20px; color: #a9b6c5; font-size: 15px; text-align: center; }
.event-original-bracket-team.is-winner { background: #75e2c10f; }
.event-original-bracket-team.is-winner span, .event-original-bracket-team.is-winner strong { color: var(--accent); font-weight: 700; }
.event-original-bracket-team.is-loser span { color: #6f7b89; }
.event-original-bracket-label { padding: 3px 6px; background: #0000002b; color: #69788a; font-size: 11px; text-align: center; }
.event-original-bracket-label span { color: #b0c4ff; }
.event-original-champion { padding: 4px 6px 3px; color: var(--gold); font-size: 13px; font-weight: 700; text-align: center; text-shadow: 0 0 8px #e8c47c66; }
.event-group-filters { padding: 0 23px 15px; border-bottom: 1px solid var(--line); }
.event-full-standings { padding-bottom: 8px; }
.event-club-groups { display: grid; gap: 20px; padding: 0 23px 23px; }
.event-club-group-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.event-club-group-heading h3 { font-size: 19px; }
.event-club-group-heading span { color: var(--muted); font-size: 12px; }
.event-club-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.event-club-card { min-width: 0; padding: 14px; border: 1px solid #303b48; border-radius: 10px; background: #111820; }
.event-club-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.event-club-label { color: var(--accent); font-size: 12px; }
.event-club-card h4 { margin-top: 3px; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.event-club-owner { max-width: 110px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.event-squad-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.event-squad { min-width: 0; padding: 9px; border: 1px solid #293542; border-radius: 7px; background: #151d26; }
.event-squad > strong { display: block; overflow: hidden; margin-bottom: 7px; color: #cbd5df; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.event-squad > div { display: flex; flex-wrap: wrap; gap: 5px; }
.event-player-chip { display: inline-flex; max-width: 100%; align-items: center; gap: 4px; padding: 3px 6px; border: 1px solid #3d5a54; border-radius: 4px; background: #75e2c10d; color: #cbded7; font-size: 12px; }
.event-player-chip b { color: var(--accent); font-size: 10px; font-weight: 500; }
.event-player-chip.is-support { border-color: #455273; background: #99baff0e; color: #c6d1e6; }
.event-player-chip.is-support b { color: var(--blue); }
.event-empty-chip { color: #778697; font-size: 12px; }
.event-empty { display: grid; min-height: 90px; place-items: center; padding: 22px; color: var(--muted); font-size: 13px; }

/* Fantasy challenge */
.event-fantasy-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 320px); align-items: start; gap: 17px; }
.event-fantasy-sidebar { display: grid; min-width: 0; align-content: start; gap: 17px; }
.event-fantasy-player-board { min-width: 0; overflow: hidden; }
.event-fantasy-player-board-list { max-height: 370px; overflow-y: auto; padding: 0 23px 18px; scrollbar-width: thin; }
.event-fantasy-player-board-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 52px; border-top: 1px solid var(--line); }
.event-fantasy-player-board-row:first-child { border-top: 0; }
.event-fantasy-player-board-row > b { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.event-fantasy-player-board-row > b.is-top { color: var(--gold); }
.event-fantasy-player-board-name { display: grid; min-width: 0; gap: 2px; }
.event-fantasy-player-board-name strong, .event-fantasy-player-board-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-fantasy-player-board-name strong { color: var(--text); font-size: 14px; }
.event-fantasy-player-board-name small { color: var(--muted); font-size: 12px; }
.event-fantasy-player-board-row > em { color: var(--accent); font-size: 14px; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.event-fantasy-main { min-width: 0; overflow: hidden; }
.event-fantasy-status { flex: 0 0 auto; padding: 5px 9px; border: 1px solid #6d6874; border-radius: 4px; color: #b7aeca; font-size: 13px; white-space: nowrap; }
.event-fantasy-status.is-open { border-color: #8cad79; background: #9ecba714; color: #c6e4b4; }
.event-fantasy-status.is-closed { color: #b6b2a6; }
.event-fantasy-notice { margin: 0 23px 15px; padding: 10px 12px; border: 1px solid #8b7953; background: #dcc18c12; color: #e9d5a4; font-size: 14px; }
.event-fantasy-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 0 23px 18px; }
.event-fantasy-rules > div { display: grid; gap: 5px; padding: 12px; border: 1px solid #4a5046; border-radius: 5px; background: #181e1f; }
.event-fantasy-rules strong { color: var(--gold); font-size: 14px; }
.event-fantasy-rules span { color: var(--muted); font-size: 13px; line-height: 1.55; }
.event-fantasy-bracket { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; max-width: 100%; gap: 17px; padding: 0 23px 20px; }
.event-fantasy-bracket .event-original-bracket { min-width: 0; max-width: 100%; }
.event-fantasy-bracket .event-original-bracket-row { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
.event-fantasy-bracket section { display: grid; gap: 9px; }
.event-fantasy-bracket h3 { color: #d8d1b5; font-size: 16px; }
.event-fantasy-match-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.event-fantasy-match { min-width: 0; padding: 10px; border: 1px solid #4a5046; border-radius: 5px; background: #181e1f; }
.event-fantasy-match-heading { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: var(--muted); font-size: 13px; }
.event-fantasy-match-heading small { color: #a6a18f; font-size: 11px; }
.event-fantasy-team { display: flex; width: 100%; min-height: 35px; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 0; border-bottom: 1px solid #3b443c; background: transparent; color: #d1d5c8; font: inherit; font-size: 14px; text-align: left; }
.event-fantasy-team:last-of-type { border-bottom: 0; }
.event-fantasy-team.is-selectable { cursor: pointer; }
.event-fantasy-team.is-selectable:hover { background: #29312b; color: #f0dfb8; }
.event-fantasy-team.is-picked { border-left: 3px solid var(--gold); background: #dcc18c18; color: #f0dfb8; }
.event-fantasy-team.is-winner { color: var(--accent); font-weight: 650; }
.event-fantasy-team.is-predicted span { color: #e9d5a4; }
.event-fantasy-team .is-tbd { color: #788697; font-style: italic; }
.event-fantasy-team b { min-width: 18px; color: var(--gold); text-align: right; }
.event-fantasy-match-note { padding-top: 5px; color: #8a9389; font-size: 12px; }
.event-fantasy-player-picks { margin: 0 23px 23px; padding-top: 16px; border-top: 1px solid #4a5046; }
.event-fantasy-subheading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.event-fantasy-subheading h3 { color: #eeeae1; font-size: 18px; }
.event-fantasy-subheading span { color: var(--muted); font-size: 12px; }
.event-fantasy-selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.event-fantasy-selects label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.event-fantasy-submit { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; color: var(--muted); font-size: 13px; }
.event-fantasy-login { padding: 12px; border: 1px solid #4a5046; background: #181e1f; color: var(--muted); font-size: 14px; line-height: 1.7; }
.event-fantasy-login a { color: var(--gold); text-decoration: underline; }
.event-fantasy-leaderboard { min-width: 0; overflow: hidden; }
.event-fantasy-leader-list { padding: 0 23px 18px; }
.event-fantasy-leader-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 43px; border-top: 1px solid #3b443c; color: #d1d5c8; font-size: 14px; }
.event-fantasy-leader-row:first-child { border-top: 0; }
.event-fantasy-leader-row > b { color: var(--gold); font-variant-numeric: tabular-nums; }
.event-fantasy-leader-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-fantasy-leader-row strong { color: var(--accent); font-size: 13px; white-space: nowrap; }

/* Personal dashboard */
.my-stack { display: grid; min-width: 0; gap: 20px; }
.my-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.my-identity { display: flex; align-items: center; gap: 18px; padding: 24px; margin-bottom: 22px; flex-wrap: wrap; }
.my-identity p, .my-row p, .my-balance p, .my-welcome p, .my-note { color: var(--muted); font-size: 15px; }
.my-avatar { position: relative; display: grid; place-items: center; width: 64px; height: 64px; flex: 0 0 64px; overflow: hidden; background: #233b37; color: var(--accent); border: 1px solid var(--accent); border-radius: 8px; font-size: 28px; }
.my-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.my-binding { margin-left: auto; color: var(--accent); font-size: 14px; }
.my-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; border-top: 1px solid var(--line); }
.my-row > div { min-width: 0; overflow-wrap: anywhere; }
.my-row > a, .my-row > strong { flex-shrink: 0; }
.my-points { color: var(--accent); white-space: nowrap; }
.my-points.is-negative { color: var(--red); }
.my-records { max-height: 440px; overflow-y: auto; }
.my-note { padding: 0 22px 15px; }
.my-balance, .my-welcome { padding: 24px; }
.my-balance > strong { display: block; color: var(--gold); font-size: 38px; margin: 12px 0; }
.my-balance small { font-size: 16px; }
.my-balance p, .my-welcome p { margin: 10px 0 16px; }
@media (max-width: 960px) { .my-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .my-row { flex-wrap: wrap; padding: 15px; } .my-binding { margin-left: 0; } .my-identity { padding: 18px; } }

/* Administrator workbench */
.admin-heading { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.tournament-admin-heading { flex-wrap: wrap; }
.tournament-admin-heading-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.admin-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 23px; border-bottom: 1px solid var(--line); }
.admin-tabs { display: flex; gap: 9px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.admin-tabs button { flex: 0 0 auto; min-height: 50px; padding: 9px 18px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font-size: 17px; font-weight: 650; }
.admin-tabs button:hover { color: var(--text); }
.admin-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--text); }
.admin-section { min-height: 320px; margin-bottom: 35px; }
.admin-section-title { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.admin-section-title h2 { font-size: 25px; }
.admin-section-title .eyebrow { margin-bottom: 2px; }
.admin-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; margin-bottom: 20px; }
.admin-metric { display: flex; min-height: 130px; flex-direction: column; padding: 17px 19px; border-top: 3px solid var(--accent); }
.admin-metric.attention { border-top-color: var(--gold); }
.admin-metric.error { border-top-color: var(--danger); }
.admin-metric span { color: var(--muted); font-size: 14px; }
.admin-metric strong { margin: 5px 0 1px; font-size: 32px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.admin-metric small { margin-top: auto; color: var(--muted); font-size: 13px; }
.admin-metrics.admin-metrics-tournaments { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 660px; }
.admin-overview-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 20px; margin-bottom: 20px; }
.admin-row-meta { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap; }
.admin-context { padding: 23px; }
.admin-context h2 { margin-bottom: 10px; font-size: 20px; }
.admin-context p { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.admin-context .btn { margin-top: 3px; }
.admin-row-meta { color: var(--muted); font-size: 14px; text-align: right; }
.admin-row-meta b { color: var(--text); font-variant-numeric: tabular-nums; }
.admin-row-meta .text-link { font-size: 14px; }
.admin-tournament-row > div:first-child, .admin-reward-row > div:first-child { flex: 1; }
.admin-badge { padding: 2px 8px; border: 1px solid var(--line); border-radius: 5px; }
.admin-badge.is-live { border-color: #81e6ab77; color: var(--success); }
.admin-context .admin-state { color: var(--muted); font-size: 19px; font-weight: 700; }
.admin-context .admin-state.is-live { color: var(--success); }
.admin-context .admin-reward-total { color: var(--gold); font-size: 30px; font-weight: 750; }
.admin-reward-total small { color: var(--muted); font-size: 15px; font-weight: 400; }
.admin-rewards { margin-top: 20px; }
.admin-feedback { margin: 0 0 18px; padding: 12px 16px; border: 1px solid #54765f; border-radius: var(--radius); background: #203a2b; color: #d8f8de; font-size: 15px; }
.admin-feedback.is-error, .admin-form-error { border-color: #a55e60; background: #42272b; color: #ffd5d5; }
.admin-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.admin-setting-row > div { min-width: 0; }
.admin-setting-row p { margin-bottom: 6px; }
.admin-switch { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 7px; background: #283746; font-size: 14px; font-weight: 650; }
.admin-switch > span { position: relative; display: inline-block; width: 35px; height: 20px; border-radius: 12px; background: #64748b; }
.admin-switch > span::after { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; content: ''; transition: transform .15s; }
.admin-switch[aria-checked="true"] > span { background: #448e65; }
.admin-switch[aria-checked="true"] > span::after { transform: translateX(15px); }
.admin-switch:disabled { opacity: .6; cursor: wait; }
.admin-context .admin-warning { margin: 13px 0 0; padding: 10px 12px; border-left: 3px solid var(--gold); background: #3a3428; color: #ffe2a8; font-size: 14px; }
.admin-league-form { margin: 12px 0; }
.admin-league-details { align-self: start; }
.admin-league-details summary { display: flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; font-size: 18px; font-weight: 650; }
.admin-league-details summary::-webkit-details-marker { display: none; }
.admin-league-details summary strong { color: var(--gold); font-variant-numeric: tabular-nums; }
.admin-points-details summary strong { color: var(--muted); }
.admin-points-details summary strong.is-live { color: var(--success); }
.admin-league-details summary::after { margin-left: auto; color: var(--muted); content: '▾'; }
.admin-league-details[open] summary::after { transform: rotate(180deg); }
.admin-league-details[open] summary { padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.admin-league-body { padding-top: 8px; }
.admin-league-body p { margin-bottom: 0; }
.admin-league-form > label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 14px; }
.admin-form-inline { display: flex; gap: 10px; align-items: center; }
.admin-form-inline input, .admin-field input, .admin-field textarea { width: 100%; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; background: #0e1a26; color: var(--text); }
.admin-form-inline input { max-width: 210px; }
.admin-form-inline .btn { flex: 0 0 auto; margin: 0; }
.admin-cache-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px; }
.admin-cache-card h2 { margin-bottom: 5px; font-size: 20px; }
.admin-cache-card p { color: var(--muted); font-size: 15px; }
.admin-cache-card p strong { color: var(--text); }
.admin-cache-card .btn { flex: 0 0 auto; }
.admin-cache-list-card { margin-top: 20px; }
.admin-hidden-player-row { gap: 12px; }
.admin-hidden-player-row .btn { flex: 0 0 auto; }
.admin-cache-search { display: flex; align-items: center; gap: 9px; padding: 0 21px 16px; }
.admin-cache-search label { flex: 0 0 auto; color: var(--muted); font-size: 14px; }
.admin-cache-search input { width: min(260px, 100%); min-width: 0; padding: 8px 11px; border: 1px solid var(--line); border-radius: 7px; background: #0e1a26; color: var(--text); font-size: 14px; }
.admin-cache-search input[type="date"] { width: 170px; color-scheme: dark; }
.admin-cache-search .btn { min-height: 36px; padding: 5px 11px; font-size: 13px; white-space: nowrap; }
.admin-cache-table-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
.admin-cache-table { width: 100%; min-width: 1000px; border-collapse: collapse; font-size: 14px; }
.admin-cache-table th, .admin-cache-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.admin-cache-table th { color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.admin-cache-table tbody tr:last-child td { border-bottom: 0; }
.admin-cache-id { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-cache-id a { color: var(--gold); text-decoration: none; }
.admin-cache-id a:hover { text-decoration: underline; }
.admin-cache-status { color: var(--muted); white-space: nowrap; }
.admin-cache-status.is-ok { color: var(--success); }
.admin-cache-status.is-error { color: var(--danger); }
.admin-cache-table td small { display: block; max-width: 220px; overflow: hidden; color: var(--danger); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.admin-cache-actions { display: flex; gap: 7px; white-space: nowrap; }
.admin-cache-actions .btn { min-height: 33px; padding: 4px 9px; font-size: 12px; }
.friendly-profile-pagination { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:16px 0 4px; border-top:1px solid var(--line); color:var(--muted); font-size:15px; }
.friendly-profile-pagination > div { display:flex; gap:8px; }
.friendly-profile-pagination .btn { min-height:40px; padding:8px 12px; font-size:15px; }
.friendly-profile-pagination .btn:disabled { opacity:.45; cursor:default; }
.admin-cache-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.admin-cache-pagination > div { display: flex; gap: 8px; }
.admin-cache-pagination .btn { min-height: 34px; padding: 4px 10px; font-size: 12px; }
.admin-users-card { overflow: hidden; }
.admin-users-tools { display: flex; align-items: center; gap: 10px; padding: 0 21px 17px; color: var(--muted); font-size: 14px; }
.admin-users-tools input { width: min(360px, 100%); min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; background: #0e1a26; color: var(--text); font: inherit; }
.admin-users-table { min-width: 1020px; }
.admin-users-table th button { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; }
.admin-users-table th button:hover { color: var(--accent); }
.admin-users-openid { display: block; max-width: 175px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-users-action { white-space: nowrap; }
.admin-users-action .btn { min-height: 33px; padding: 4px 9px; font-size: 12px; }
.admin-users-protected { color: var(--muted); font-size: 12px; }
.admin-cache-detail-note { margin-bottom: 14px; color: var(--muted); font-size: 14px; }
.admin-reward-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 17px; padding: 15px 21px; border-top: 1px solid var(--line); }
.admin-reward-image { display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #0e1a26; color: var(--gold); font-size: 29px; }
.admin-reward-image img { width: 100%; height: 100%; object-fit: cover; }
.admin-reward-info { min-width: 0; overflow-wrap: anywhere; }
.admin-reward-info > strong { display: block; font-size: 17px; }
.admin-reward-info p { margin: 3px 0 7px; color: var(--muted); font-size: 14px; }
.admin-reward-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.admin-reward-actions { display: flex; gap: 8px; }
.admin-reward-actions .btn { min-height: 35px; padding: 5px 11px; font-size: 13px; }
.admin-danger-button { color: var(--danger) !important; border-color: #a55e60 !important; }
.admin-dialog { width: min(530px, calc(100vw - 28px)); max-height: 90dvh; margin: auto; padding: 25px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); }
.tournament-admin-card { margin-bottom: 16px; padding: 22px; }
.tournament-admin-card .card-heading { margin-bottom: 14px; }
.tournament-admin-card .card-heading p { color: var(--muted); }
.tournament-admin-form { max-width: 780px; }
.tournament-admin-form .admin-field { margin-top: 0; }
.tournament-admin-form .admin-field input, .tournament-admin-form .admin-field textarea, .tournament-admin-form .admin-field select,
.admin-dialog .admin-field select, .tournament-registration-tools input, .tournament-registration-tools select { width: 100%; min-width: 0; margin-top: 6px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; background: #0e1a26; color: var(--text); font: inherit; }
.tournament-admin-actions, .tournament-admin-row-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tournament-admin-actions { margin-top: 18px; }
.tournament-fantasy-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tournament-fantasy-summary > div { display: grid; gap: 5px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-raised); }
.tournament-fantasy-summary span { color: var(--muted); font-size: 13px; }
.tournament-fantasy-summary strong { color: var(--text); font-size: 18px; font-variant-numeric: tabular-nums; }
.tournament-fantasy-summary strong.is-open { color: var(--success); }
.tournament-fantasy-summary strong.is-closed { color: var(--muted); }
.tournament-admin-hint { margin: 8px 0 16px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.tournament-admin-row { gap: 14px; }
.tournament-admin-row > div:first-child { flex: 1; min-width: 0; }
.tournament-admin-row p { overflow-wrap: anywhere; }
.tournament-admin-row-actions .btn { min-height: 34px; padding: 5px 10px; font-size: 13px; }
.tournament-image-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.tournament-image-row img, .tournament-image-empty { width: min(280px, 100%); height: 158px; object-fit: cover; border: 1px solid var(--line); border-radius: 5px; }
.tournament-image-empty { display: grid; place-items: center; color: var(--muted); }
.tournament-image-row .admin-danger-button { margin-top: 10px; }
.tournament-registration-tools { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-bottom: 12px; }
.tournament-registration-tools label { color: var(--muted); }
.tournament-registration-tools select { width: 150px; }
.tournament-registration-tools input { width: min(300px, 100%); }
.tournament-club-row { padding: 17px 0; border-top: 1px solid var(--line); }
.tournament-club-header { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.tournament-club-header strong { font-size: 18px; }
.tournament-club-header p, .tournament-club-squads p { color: var(--muted); }
.tournament-club-squads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.tournament-club-squads > div { padding: 12px; border: 1px solid var(--line); border-radius: 6px; }
.tournament-club-squads p { margin: 7px 0 0; line-height: 1.5; }
.tournament-member-list { max-height: 42vh; overflow-y: auto; display: grid; gap: 8px; padding: 8px 0; }
.tournament-member-list label, .tournament-checks label { display: flex; gap: 8px; align-items: center; }
.tournament-checks { display: flex; gap: 9px 15px; flex-wrap: wrap; margin-top: 7px; }
@media (max-width: 700px) { .tournament-club-squads { grid-template-columns: 1fr; } .tournament-admin-card { padding: 16px; } }
.admin-dialog::backdrop { background: #05080dcc; }
.admin-dialog h2 { margin-bottom: 9px; font-size: 23px; }
.admin-dialog > p { margin: 0 0 17px; color: var(--muted); font-size: 15px; }
.admin-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.admin-field { display: block; margin: 14px 0; color: var(--text); font-size: 15px; }
.admin-field input, .admin-field textarea { display: block; margin-top: 6px; font-size: 15px; }
.admin-field textarea { resize: vertical; }
.admin-field small { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; }
.admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.admin-check { display: flex; align-items: center; gap: 9px; margin-top: 15px; font-size: 15px; }
.admin-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.admin-form-error { margin-top: 15px; padding: 10px; border: 1px solid; border-radius: 6px; font-size: 14px; }
.admin-dialog button:disabled, .admin-section button:disabled { opacity: .55; cursor: not-allowed; }
.admin-data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.admin-data-card { padding: 23px; }
.admin-data-card span { color: var(--muted); }
.admin-data-card strong { display: block; margin: 5px 0; color: var(--danger); font-size: 32px; font-variant-numeric: tabular-nums; }
.admin-data-card p { color: var(--muted); font-size: 14px; }
.admin-data-explainer { margin-top: 18px; padding: 17px 21px; border-left: 3px solid var(--gold); }
.admin-data-explainer strong { color: var(--gold); font-size: 16px; }
.admin-data-explainer p { margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.admin-failure-section { margin-top: 20px; }
.admin-failure-section .card-heading h3 { font-size: 19px; }
.admin-failure-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 21px; border-top: 1px solid var(--line); }
.admin-failure-main { min-width: 0; }
.admin-failure-row strong { font-size: 15px; }
.admin-failure-row strong a { color: var(--gold); text-decoration: none; }
.admin-failure-row strong a:hover { text-decoration: underline; }
.admin-failure-row p { margin: 5px 0; color: var(--danger); font-size: 14px; overflow-wrap: anywhere; }
.admin-failure-row small { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; }
.admin-failure-id { color: var(--muted); font-weight: 500; }
.admin-failure-row .btn { flex: 0 0 auto; min-height: 34px; padding: 5px 10px; font-size: 13px; }
.admin-task-list-heading { align-items: flex-start; }
.admin-task-list-heading label { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; color: var(--muted); font-size: 13px; }
.admin-task-list-heading select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: #0e1a26; color: var(--text); font-size: 13px; }
.admin-task-row { padding: 16px 21px; border-top: 1px solid var(--line); }
.admin-task-row-main { min-width: 0; }
.admin-task-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 5px; }
.admin-task-title strong { font-size: 16px; }
.admin-task-state { padding: 2px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font-size: 12px; }
.admin-task-state.is-succeeded { border-color: #81e6ab77; color: var(--success); }
.admin-task-state.is-failed { border-color: #a55e60; color: var(--danger); }
.admin-task-state.is-running, .admin-task-state.is-queued { border-color: #ba9b5877; color: var(--gold); }
.admin-task-row small { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; }
.admin-task-scope { margin: 7px 0 0; color: var(--text); font-size: 14px; overflow-wrap: anywhere; }
.admin-task-scope a, .admin-task-match a { color: var(--gold); text-decoration: none; }
.admin-task-scope a:hover, .admin-task-match a:hover { text-decoration: underline; }
.admin-task-error { margin: 7px 0 0; color: var(--danger); font-size: 13px; overflow-wrap: anywhere; }
.admin-task-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.admin-task-actions .btn { min-height: 33px; padding: 4px 10px; font-size: 12px; }
.admin-task-target-panel { margin-top: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #111c27; }
.admin-task-target-panel[hidden] { display: none; }
.admin-task-match { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.admin-task-match:last-child { border-bottom: 0; }
.admin-task-match small { grid-column: 1 / -1; }
.admin-task-match .btn { min-height: 30px; padding: 3px 8px; font-size: 12px; }
.admin-panel-note { margin-top: 17px; color: var(--muted); font-size: 14px; }
.admin-access { max-width: 600px; padding: 27px; }
.admin-access h2 { margin-bottom: 8px; }
.admin-access p { margin-bottom: 20px; color: var(--muted); }
@media (max-width: 1170px) { .admin-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .admin-overview-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .admin-toolbar { gap: 8px; }
  .admin-tabs { gap: 0; }
  .admin-tabs button { min-height: 46px; padding: 8px 11px; font-size: 14px; }
  .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .admin-metric { min-height: 120px; padding: 14px; }
  .admin-metric strong { font-size: 27px; }
  .admin-data-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .admin-failure-row { align-items: flex-start; flex-direction: column; gap: 10px; padding: 14px; }
  .admin-task-list-heading { flex-wrap: wrap; }
  .admin-task-row { padding: 14px; }
  .admin-task-match { grid-template-columns: minmax(0, 1fr); }
  .admin-row-meta { width: 100%; justify-content: space-between; text-align: left; }
  .admin-section-title h2 { font-size: 22px; }
  .admin-cache-card { align-items: stretch; flex-direction: column; padding: 17px; }
  .admin-cache-search { flex-wrap: wrap; padding: 0 14px 14px; }
  .admin-cache-search label { width: 100%; }
  .admin-cache-search input { flex: 1 1 130px; }
  .admin-cache-search input[type="date"] { width: 100%; flex: 1 1 160px; }
  .admin-cache-pagination { flex-wrap: wrap; padding: 11px 14px; }
  .admin-setting-row { align-items: flex-start; flex-direction: column; }
  .admin-reward-row { grid-template-columns: 54px minmax(0, 1fr); gap: 11px; padding: 14px; }
  .admin-reward-image { width: 54px; height: 54px; }
  .admin-reward-actions { grid-column: 2; }
  .admin-dialog { padding: 19px; }
  .mobile-nav.has-admin-nav a { min-width: 0; font-size: 11px; }
  .mobile-nav.has-admin-nav a > span { font-size: 18px; }
}

.reward-wallet { display:flex; justify-content:space-between; gap:24px; align-items:center; padding:26px; flex-wrap:wrap; }
.reward-wallet strong { display:block; font-size:38px; color:var(--gold); margin-top:12px; }
.reward-wallet small { font-size:16px; }
.reward-wallet p, .reward-card p, .reward-notice, .reward-dialog p { color:var(--muted); }
.reward-toolbar { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:26px 0 18px; }
.reward-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.reward-card { padding:22px; display:flex; flex-direction:column; gap:16px; overflow-wrap:anywhere; }
.reward-card p { white-space:pre-wrap; flex:1; }
.reward-image { display:grid; place-items:center; background:#111923; border-radius:10px; min-height:164px; }
.reward-image img { object-fit:contain; border-radius:8px; }
.reward-image span { font-size:58px; color:var(--gold); }
.reward-meta, .reward-cost { display:flex; justify-content:space-between; gap:12px; }
.reward-meta strong { color:var(--gold); }
.reward-notice { padding:20px; margin-top:18px; }
.reward-dialog { width:min(460px,calc(100% - 32px)); max-height:90dvh; overflow:auto; margin:auto; padding:26px; color:var(--text); background:#151b23; border:1px solid var(--line); border-radius:14px; }
.reward-dialog::backdrop { background:#05080dcc; }
.reward-dialog h3, .reward-dialog p, .reward-cost { margin-top:18px; overflow-wrap:anywhere; }
.reward-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:24px; }
.reward-card button:disabled, .reward-dialog button:disabled { opacity:.5; cursor:not-allowed; }
@media(max-width:1100px) { .reward-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .reward-grid { grid-template-columns:minmax(0,1fr); } }

.login-card { max-width:560px; margin:24px auto; padding:32px; text-align:center; }
.login-card h1 { margin:12px 0; }
.login-card p { color:var(--muted); margin:14px 0; line-height:1.8; }
.login-qr { width:248px; height:248px; padding:12px; margin:24px auto 16px; background:white; border-radius:12px; }
.login-qr img { width:224px; height:224px; }
.login-guide { text-align:left; margin:24px 0; padding-top:20px; border-top:1px solid var(--line); }
.login-guide h2 { font-size:18px; }
#login-status { min-height:54px; }
@media(max-width:600px) { .login-card { padding:20px 16px; } }

.event-knockout-roster { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.event-knockout-roster > strong { display:block; margin-bottom:10px; color:var(--gold); font-size:15px; }
.event-squad-substitutes { grid-column:1 / -1; }
.event-original-bracket-team:is(button) { width:100%; font:inherit; text-align:left; cursor:pointer; }
.event-original-bracket-team:is(button):hover { background:#314339; }
.event-original-bracket-team.is-picked { box-shadow:inset 4px 0 var(--gold); background:#dcc18c23; }
.event-original-bracket-team.is-picked span, .event-original-bracket-team.is-picked strong { color:var(--gold); }
.event-series-button { display: inline-flex; width: 30px; height: 30px; flex: 0 0 30px; align-items: center; justify-content: center; padding: 0; border: 1px solid #6482a5; border-radius: 5px; background: #243b57; color: #d9eaff; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.event-series-button svg { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.event-series-button:hover { border-color: var(--accent); background: #345579; color: #fff; }
.event-original-bracket-label .event-series-button { width: 20px; height: 20px; margin-left: 4px; border-color: transparent; background: #2a415e; vertical-align: middle; }
.event-original-bracket-label .event-series-button svg { width: 12px; height: 12px; }
.event-original-bracket-label .event-series-button:hover { background: #42648b; color: #fff; }
.event-series-tabs { display:flex; gap:6px; overflow-x:auto; padding:2px 0 14px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.event-series-tabs button { flex:0 0 auto; padding:8px 15px; color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:6px; cursor:pointer; }
.event-series-tabs button.active { color:var(--gold); border-color:var(--gold); background:#dcc18c16; }
.event-fantasy-bracket .event-original-bracket-column { min-width:205px; flex-basis:205px; }
.event-fantasy-bracket .event-original-bracket-row { padding:8px 0 16px; }

/* Community and help page */
.community-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.community-option { display: grid; min-height: 156px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 17px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); text-align: left; transition: border-color .16s, background .16s, transform .16s; }
.community-option:hover { transform: translateY(-2px); border-color: #496359; }
.community-option[aria-pressed="true"] { border-color: #75e2c17a; background: linear-gradient(140deg, #1b2b29, #151b23 70%); box-shadow: inset 0 0 0 1px #75e2c11b; }
.community-option-icon { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border: 1px solid #e8c47c2e; border-radius: 13px; background: #e8c47c12; color: var(--gold); font-size: 25px; }
.community-option[aria-pressed="true"] .community-option-icon { border-color: #75e2c13b; background: #75e2c115; color: var(--accent); }
.community-option-copy { display: grid; gap: 8px; }
.community-option-copy strong { font-size: 20px; line-height: 1.4; }
.community-option-copy span { color: var(--muted); font-size: 16px; line-height: 1.65; }
.community-option-arrow { align-self: center; color: #7e8b9a; font-size: 24px; transition: transform .16s, color .16s; }
.community-option[aria-pressed="true"] .community-option-arrow { transform: translateX(3px); color: var(--accent); }
.community-panel { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.community-panel-heading { padding: 25px 28px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(110deg, #192923, #151b23 66%); }
.community-panel-heading .eyebrow { margin-bottom: 6px; }
.community-panel-heading h2 { font-size: 24px; line-height: 1.4; }
.community-panel-heading p { max-width: 760px; margin-top: 7px; color: var(--muted); font-size: 16px; }
.community-panel-body { padding: 26px 28px 30px; }
.community-socials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.community-social { display: flex; min-height: 90px; align-items: center; gap: 16px; padding: 17px 19px; border: 1px solid #303b48; border-radius: 11px; background: #111820; }
.community-social-icon { display: inline-flex; width: 48px; height: 48px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 12px; color: #fff; }
.community-social-icon.douyin { background: linear-gradient(135deg, #31343b, #16191e); }
.community-social-icon.bilibili { background: #2e79ba; }
.community-social-copy { display: grid; gap: 3px; min-width: 0; }
.community-social-copy small { color: var(--muted); font-size: 14px; }
.community-social-copy strong { overflow-wrap: anywhere; font-size: 18px; font-weight: 650; }
.community-brand-art { display: block; width: min(100%, 900px); height: auto; margin: 0 auto; border: 1px solid #303b48; border-radius: 12px; background: #fff; }
.community-image-note { margin-top: 12px; color: var(--muted); font-size: 14px; text-align: center; }
.friendly-guide { display: grid; gap: 14px; }
.friendly-step { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 15px; align-items: start; padding: 17px 18px; border: 1px solid #303b48; border-radius: 11px; background: #111820; }
.friendly-step-number { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid #75e2c13b; border-radius: 50%; background: #75e2c111; color: var(--accent); font-size: 17px; font-weight: 700; }
.friendly-step h3 { font-size: 18px; line-height: 1.45; }
.friendly-step p { margin-top: 5px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.friendly-points-note { margin-top: 17px; padding: 15px 17px; border: 1px solid #6c5b37; border-radius: 10px; background: #e8c47c0b; color: #e3d3ae; font-size: 15px; line-height: 1.7; }
.community-panel-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 21px; }
.community-panel-actions .btn { font-size: 15px; }
.utility-link[aria-current="page"] { color: var(--accent); }
.friendly-inline-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Friendly page */
.friendly-heading { align-items: center; }
.friendly-league-badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid #75e2c126; border-radius: 7px; background: #75e2c10b; color: #c7e9dc; font-size: 15px; white-space: nowrap; }
.friendly-league-badge .live-dot { width: 6px; height: 6px; }
.friendly-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.friendly-metric { display: flex; min-height: 116px; align-items: center; gap: 15px; padding: 18px; }
.friendly-metric-icon { display: inline-flex; width: 42px; height: 42px; flex: 0 0 auto; align-items: center; justify-content: center; border: 1px solid #99baff2b; border-radius: 12px; background: #99baff10; color: var(--blue); font-size: 22px; }
.friendly-metric-icon.accent { border-color: #75e2c12b; background: #75e2c111; color: var(--accent); }
.friendly-metric-icon.gold { border-color: #e8c47c2b; background: #e8c47c11; color: var(--gold); }
.friendly-metric > div { display: grid; min-width: 0; }
.friendly-metric-label { color: var(--muted); font-size: 15px; }
.friendly-metric strong { margin-top: 2px; font-size: 28px; font-variant-numeric: tabular-nums; line-height: 1.25; }
.friendly-metric small { overflow: hidden; margin-top: 4px; color: #7f8b9b; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.friendly-tabs { display: flex; gap: 5px; margin: 0 0 14px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: #11161d; width: fit-content; }
.friendly-tab { min-width: 104px; padding: 8px 16px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 15px; }
.friendly-tab:hover { color: var(--text); }
.friendly-tab.active { background: #75e2c119; color: var(--accent); font-weight: 650; }
.friendly-panel { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.friendly-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px 15px; }
.friendly-panel-heading h2 { font-size: 20px; }
.friendly-panel-heading p { margin-top: 4px; color: var(--muted); font-size: 15px; }
.friendly-result-count { color: var(--muted); font-size: 14px; white-space: nowrap; }
.friendly-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 22px 15px; }
.friendly-player-filter { display: flex; width: min(320px, 100%); min-height: 39px; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid #35404e; border-radius: 7px; background: #101720; color: var(--muted); }
.friendly-player-filter > span { font-size: 20px; line-height: 1; }
.friendly-player-filter input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; }
.friendly-player-filter input::placeholder { color: #8290a2; }
.friendly-filter-note { color: #788697; font-size: 14px; }
.friendly-table-wrap { width: 100%; min-height: 170px; overflow-x: auto; border-top: 1px solid var(--line); }
.friendly-table { width: 100%; min-width: 980px; border-collapse: collapse; text-align: left; font-size: 15px; font-variant-numeric: tabular-nums; }
.friendly-table thead { background: #111821; }
.friendly-table th { height: 43px; padding: 8px 11px; color: #8793a2; font-size: 13px; font-weight: 500; white-space: nowrap; }
.friendly-table th:first-child, .friendly-table td:first-child { width: 46px; padding-left: 20px; }
.friendly-table td { padding: 11px; border-top: 1px solid #232c37; vertical-align: middle; }
.friendly-table tbody tr:hover { background: #1b242e; }
.friendly-sort { display: inline-flex; align-items: center; gap: 6px; padding: 3px 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; }
.friendly-sort:hover, .friendly-sort.selected { color: var(--accent); }
.friendly-sort span { color: #647285; font-size: 14px; }
.friendly-sort.selected span { color: var(--accent); }
.friendly-rank { color: #8491a1; }
.friendly-rank.is-top { color: var(--gold); font-weight: 700; }
.friendly-player-button { display: inline-flex; min-width: 155px; align-items: center; gap: 9px; padding: 0; border: 0; background: transparent; color: var(--text); text-align: left; }
button.friendly-player-button { cursor: pointer; }
.friendly-player-button:hover strong { color: var(--accent); }
.friendly-avatar { display: inline-flex; width: 32px; height: 32px; flex: 0 0 auto; align-items: center; justify-content: center; border: 1px solid #486575; border-radius: 10px; background: linear-gradient(135deg, #345464, #22303c); color: #d5ecee; font-weight: 700; }
.friendly-avatar { position: relative; overflow: hidden; }
.friendly-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.friendly-player-button > span:last-child { display: grid; gap: 2px; }
.friendly-player-button strong { max-width: 150px; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.friendly-player-button small { color: #778496; font-size: 12px; }
.friendly-winrate { color: var(--text); font-weight: 650; }
.friendly-winrate.is-win { color: #75e2c1; }
.friendly-winrate.is-loss { color: #ff969e; }
.friendly-winbar { display: block; width: 58px; height: 3px; overflow: hidden; margin-top: 5px; border-radius: 3px; background: #303a46; }
.friendly-winbar i { display: block; height: 100%; border-radius: inherit; background: var(--muted); }
.friendly-winbar.is-win i { background: #75e2c1; }
.friendly-winbar.is-loss i { background: #ff969e; }
.friendly-stat-wins { color: #75e2c1; font-weight: 650; }
.friendly-stat-losses { color: #ff969e; font-weight: 650; }
.friendly-kda { color: #dce5ee; font-weight: 650; }
.friendly-heroes { display: flex; max-width: 235px; flex-wrap: wrap; gap: 4px; }
.friendly-hero { display: inline-flex; max-width: 104px; align-items: center; gap: 4px; padding: 3px 5px; border: 1px solid #34404d; border-radius: 4px; background: #19212b; color: #bdc8d5; font-size: 12px; white-space: nowrap; }
.friendly-hero img { width: 17px; height: 17px; object-fit: cover; border-radius: 3px; }
.friendly-hero span { overflow: hidden; text-overflow: ellipsis; }
.friendly-points { color: var(--gold); font-weight: 700; }
.friendly-empty { display: flex; min-height: 170px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; color: var(--muted); text-align: center; }
.friendly-empty > span { display: inline-flex; width: 33px; height: 33px; align-items: center; justify-content: center; border: 1px solid #405048; border-radius: 50%; color: var(--accent); }
.friendly-empty strong { font-size: 14px; font-weight: 500; }
.friendly-empty.is-error > span { border-color: #75454b; color: var(--red); }
.friendly-match-list { display: grid; gap: 10px; padding: 0 18px 18px; }
.friendly-match-card { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(200px, 1fr) auto; align-items: center; gap: 16px; padding: 15px 17px; border: 1px solid #303b48; border-radius: 10px; background: #111820; }
.friendly-match-main { display: flex; min-width: 0; align-items: center; gap: 12px; }
.friendly-match-mark { display: inline-flex; width: 37px; height: 37px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 10px; background: #75e2c112; color: var(--accent); font-size: 19px; }
.friendly-match-title { font-size: 15px; font-weight: 650; }
.friendly-match-title span { margin-left: 5px; color: #8290a2; font-size: 12px; font-weight: 400; }
.friendly-match-meta { margin-top: 4px; color: var(--muted); font-size: 13px; }
.friendly-match-meta span { margin: 0 4px; color: #536071; }
.friendly-match-outcome { display: grid; justify-items: start; gap: 5px; color: var(--muted); font-size: 12px; }
.friendly-side-badge { padding: 3px 8px; border: 1px solid #3b4a40; border-radius: 5px; background: #75e2c10d; color: var(--accent); }
.friendly-side-badge.dire { border-color: #68424a; background: #ff969e0d; color: #ffadb3; }
.friendly-side-badge.unknown { border-color: #3a4653; background: #9aa6b60d; color: #aab5c3; }
.friendly-match-open { white-space: nowrap; }
.friendly-score-note { display: flex; align-items: flex-start; gap: 13px; margin-top: 17px; padding: 16px 18px; border: 1px solid #6c5b373d; border-radius: 10px; background: #e8c47c0b; color: #d7c79f; }
.friendly-score-symbol { display: inline-flex; width: 30px; height: 30px; flex: 0 0 auto; align-items: center; justify-content: center; border: 1px solid #e8c47c3b; border-radius: 9px; color: var(--gold); }
.friendly-score-note strong { color: #f0d99f; font-size: 14px; }
.friendly-score-note p { margin-top: 3px; color: #b4a785; font-size: 13px; line-height: 1.65; }
.friendly-score-state { flex: 0 0 auto; margin-left: auto; padding: 4px 8px; border: 1px solid #645743; border-radius: 5px; color: #c4b38b; font-size: 12px; white-space: nowrap; }
.friendly-score-state.is-enabled { border-color: #75e2c137; color: var(--accent); }
.friendly-dialog { width: min(760px, calc(100% - 28px)); max-width: 760px; max-height: min(84vh, 820px); padding: 0; overflow: auto; scrollbar-width: none; border: 1px solid #3b4654; border-radius: 14px; background: #151b23; color: var(--text); box-shadow: 0 25px 80px #0009; }
.friendly-dialog::-webkit-scrollbar, .friendly-profile-tabs::-webkit-scrollbar { display: none; }
.friendly-dialog:not(.is-drawer) { width: min(1180px, calc(100% - 28px)); max-width: 1180px; max-height: min(94dvh, 1000px); }
.home-profile-dialog .friendly-dialog-body > .btn { margin-top: 15px; }
#event-series-dialog { width: min(1440px, calc(100vw - 24px)); max-width: 1440px; max-height: calc(100dvh - 20px); }
.friendly-dialog.is-drawer { position: fixed; inset: 0 0 0 auto; width: min(580px, 100vw); max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; border-right: 0; border-radius: 16px 0 0 16px; }
.friendly-dialog::backdrop { background: #05080dcc; backdrop-filter: blur(3px); }
.friendly-dialog-shell { min-height: 140px; }
.friendly-dialog-heading { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: #151b23; }
.friendly-dialog-heading h2 { font-size: 18px; }
.friendly-dialog-close { width: 32px; height: 32px; border: 1px solid #35404e; border-radius: 7px; background: #202a35; color: #dce5ee; font-size: 22px; line-height: 1; }
.friendly-dialog-body { padding: 18px 20px 22px; }
.friendly-profile-summary { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid #34414e; border-radius: 10px; background: #111820; }
.friendly-avatar.large { width: 48px; height: 48px; border-radius: 13px; font-size: 19px; }
.friendly-profile-summary h3 { font-size: 17px; }
.friendly-profile-summary p { margin-top: 3px; color: var(--muted); font-size: 12px; }
.friendly-profile-balance { display: grid; gap: 2px; margin-left: auto; text-align: right; }
.friendly-profile-balance small { color: var(--muted); font-size: 12px; }
.friendly-profile-balance strong { color: var(--gold); font-size: 21px; font-variant-numeric: tabular-nums; }
.friendly-detail-section { margin-top: 19px; }
.friendly-detail-section h3 { margin-bottom: 8px; font-size: 14px; }
.friendly-detail-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, auto) 70px; align-items: center; gap: 12px; padding: 9px 10px; border-top: 1px solid #29323e; color: #c7d0da; font-size: 13px; }
.friendly-detail-row > :last-child { text-align: right; }
.friendly-detail-row strong { font-variant-numeric: tabular-nums; }
.friendly-detail-empty { padding: 12px 10px; border-top: 1px solid #29323e; color: var(--muted); font-size: 13px; }
.friendly-positive { color: var(--accent); }
.friendly-negative { color: #ff9fa8; }
.friendly-profile-identity { min-width: 0; }
.friendly-profile-delete { flex: 0 0 auto; margin-left: auto; border-color: #a66565; color: #ffb8b8; }
.friendly-profile-delete:hover { background: #513033; color: #fff; }
.friendly-profile-error { margin: 0 0 12px; padding: 9px 12px; border: 1px solid #a66565; border-radius: 7px; color: #ffb8b8; }
.friendly-profile-identity h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friendly-profile-identity a { color: var(--accent); text-decoration: none; }
.friendly-profile-identity a:hover { text-decoration: underline; }
.friendly-profile-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 20px; }
.friendly-profile-metric { display: grid; min-width: 0; gap: 4px; padding: 13px 14px; border: 1px solid #303b48; border-radius: 9px; background: #111820; }
.friendly-profile-metric > span { color: var(--muted); font-size: 12px; }
.friendly-profile-metric strong { overflow: hidden; color: #e7edf4; font-size: 21px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
.friendly-profile-metric.is-accent strong { color: var(--accent); }
.friendly-profile-metric.is-gold strong { color: var(--gold); }
.friendly-profile-tabs { display: flex; gap: 20px; margin: 0 0 18px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; border-bottom: 1px solid var(--line); }
.friendly-profile-tabs button { flex: 0 0 auto; padding: 9px 2px 10px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }
.friendly-profile-tabs button:hover, .friendly-profile-tabs button.active { border-bottom-color: var(--accent); color: var(--accent); }
.friendly-profile-panel[hidden] { display: none; }
.friendly-profile-panel.active { display: block; }
.friendly-profile-panel h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 10px; font-size: 14px; }
.friendly-profile-panel h3 > span, .friendly-profile-panel h3 small { color: var(--muted); font-size: 12px; font-weight: 400; }
.friendly-profile-hero-list, .friendly-profile-ledger, .friendly-profile-match-list { overflow: hidden; border: 1px solid #29323e; border-radius: 9px; background: #111820; }
.friendly-profile-hero-row { display: grid; grid-template-columns: 25px 29px minmax(0, 1fr) 48px 39px 39px 47px; align-items: center; gap: 7px; min-height: 43px; padding: 5px 9px; border-bottom: 1px solid #29323e; color: #c9d2dd; font-size: 12px; }
.friendly-profile-hero-row:last-child, .friendly-relation-row:last-child, .friendly-profile-match-row:last-child { border-bottom: 0; }
.friendly-profile-hero-rank { color: #7f8c9c; font-variant-numeric: tabular-nums; }
.friendly-profile-hero-row img, .friendly-profile-match-row img { width: 29px; height: 29px; border-radius: 5px; object-fit: cover; }
.friendly-profile-hero-row strong, .friendly-profile-match-copy strong { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.friendly-profile-hero-row b { color: var(--accent); text-align: right; }
.friendly-profile-relations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.friendly-relation-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 34px; align-items: center; gap: 5px; min-height: 34px; padding: 5px 7px; border-top: 1px solid #29323e; color: var(--muted); font-size: 11px; }
.friendly-relation-row strong { overflow: hidden; color: #dce5ee; text-overflow: ellipsis; white-space: nowrap; }
.friendly-relation-row b { color: var(--accent); text-align: right; }
.friendly-profile-list-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 2px 0 10px; color: var(--muted); font-size: 12px; }
.friendly-profile-list-heading h3 { margin: 0; color: var(--text); font-size: 14px; }
.friendly-profile-list-heading strong { color: var(--gold); font-size: 17px; }
.friendly-profile-list-heading strong small { color: var(--muted); font-size: 11px; font-weight: 400; }
.friendly-profile-match-row { display: flex; width: 100%; align-items: center; gap: 9px; padding: 10px; border: 0; border-bottom: 1px solid #29323e; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.friendly-profile-match-row:hover { background: #1b242e; }
.friendly-profile-match-result { display: inline-flex; width: 24px; height: 24px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 6px; font-size: 12px; }
.friendly-profile-match-result.is-win { background: #75e2c116; color: var(--accent); }
.friendly-profile-match-result.is-loss { background: #ff969e16; color: #ffadb3; }
.friendly-profile-match-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.friendly-profile-match-copy strong { font-size: 12px; }
.friendly-profile-match-copy small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.friendly-profile-match-arrow { color: #708094; }
.friendly-profile-ledger .friendly-detail-row { grid-template-columns: minmax(0, 1fr) auto 44px; gap: 8px; padding: 10px; font-size: 12px; }
.friendly-match-detail-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-bottom: 16px; color: var(--muted); font-size: 14px; }
.friendly-match-detail-meta strong { color: var(--text); }
.friendly-match-team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.friendly-match-team { min-width: 0; overflow: hidden; padding: 11px; border: 1px solid #345543; border-radius: 10px; background: #14231c; }
.friendly-match-team.team-dire { border-color: #59383e; background: #25191d; }
.friendly-match-team > h3 { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 10px; color: #8de0b6; font-size: 15px; }
.friendly-match-team.team-dire > h3 { color: #ffa5ac; }
.friendly-match-team > h3 span:last-child { font-size: 13px; }
.friendly-match-team-players { display: grid; gap: 8px; }
.friendly-match-player-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto 90px; align-items: center; gap: 8px; min-height: 68px; padding: 8px; border: 1px solid #ffffff12; border-left: 3px solid #3a9a4a; border-radius: 7px; background: linear-gradient(135deg, #161b26f5, #0c101bf5); font-size: 13px; line-height: 1.5; }
.friendly-match-player-row.team-dire { border-left-color: #aa5050; }
.friendly-match-hero-wrap { position: relative; width: 54px; height: 31px; flex: 0 0 auto; }
.friendly-match-hero, .friendly-match-hero-fallback { display: block; width: 54px; height: 31px; border-radius: 4px; background: #2a2a4a; object-fit: cover; object-position: center top; }
.friendly-match-hero-fallback { display: grid; place-items: center; color: var(--muted); }
.friendly-match-level { position: absolute; bottom: 2px; left: 2px; min-width: 16px; padding: 0 4px; border-radius: 3px; background: #000b; color: #f5c518; font-size: 11px; font-weight: 700; line-height: 15px; text-align: center; }
.friendly-match-player-main { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.friendly-match-player-name { display: flex; min-width: 0; align-items: center; }
.friendly-match-player-name strong, .friendly-match-player-trigger { overflow: hidden; color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.friendly-match-player-trigger { padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.friendly-match-player-trigger:hover { color: var(--accent); }
.friendly-player-statline { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 10px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.friendly-player-statline b { color: #ddd; font-weight: 600; }
.friendly-player-stat-side { display: inline-flex; min-width: 0; flex: 0 1 auto; flex-wrap: wrap; align-items: center; gap: 3px 9px; white-space: nowrap; }
.friendly-player-stat-side-right { justify-content: flex-end; margin-left: auto; }
.friendly-detail-kda { color: #aaa; font-weight: 700; white-space: nowrap; }
.friendly-detail-kda b { color: #81d88d; }
.friendly-detail-kda i { color: #f08080; font-style: normal; }
.friendly-detail-kda em { color: #80bfff; font-style: normal; }
.friendly-player-extra { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.friendly-aghs-icon { display: block; width: 20px; height: 20px; object-fit: contain; filter: drop-shadow(0 1px 2px #0006); }
.friendly-neutral-slot, .friendly-detail-item-slot { width: 28px; height: 20px; overflow: hidden; border: 1px solid #ffffff12; border-radius: 3px; background: #ffffff0b; }
.friendly-neutral-slot { width: 20px; height: 20px; border-radius: 50%; }
.friendly-neutral-slot img, .friendly-detail-item-slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.friendly-match-inventories { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.friendly-detail-items { display: grid; grid-template-columns: repeat(3, 28px); grid-auto-rows: 20px; gap: 2px; }
.friendly-detail-item-slot.is-empty { border-style: dashed; opacity: .35; }
.friendly-player-bear { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; border-top: 1px solid #c9a25540; }
.friendly-player-bear > span:first-child { color: var(--gold); font-size: 12px; font-weight: 600; line-height: 1.5; }
.friendly-analysis-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(230px, .75fr); gap: 12px; margin-top: 13px; }
.friendly-analysis-panel { min-width: 0; overflow: hidden; padding: 11px; border: 1px solid #303b48; border-radius: 10px; background: #111820; }
.friendly-analysis-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.friendly-analysis-heading h3 { font-size: 14px; }
.friendly-analysis-empty { display: grid; min-height: 130px; place-items: center; color: var(--muted); font-size: 12px; }
.friendly-ward-controls { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.friendly-ward-controls > label:first-child { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
.friendly-ward-controls select { max-width: 165px; min-height: 27px; padding: 3px 6px; border: 1px solid #35404e; border-radius: 5px; background: #101720; color: var(--text); font: inherit; font-size: 11px; }
.friendly-sentry-toggle { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.friendly-sentry-toggle input { width: 13px; height: 13px; margin: 0; accent-color: var(--accent); }
.friendly-ward-map { position: relative; width: min(100%, 320px); margin: 0 auto; overflow: hidden; border: 1px solid #303a45; border-radius: 7px; background: #0b1016; aspect-ratio: 1; }
.friendly-ward-map > img, .friendly-ward-map-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.friendly-ward-map > img { display: block; object-fit: fill; }
.friendly-ward-map-layer { pointer-events: none; }
.friendly-ward-marker { position: absolute; display: grid; width: 16px; height: 16px; place-items: center; border: 1px solid #e7fff2; border-radius: 50%; background: #54c97b; box-shadow: 0 1px 5px #000b; color: #10271b; font-size: 11px; font-weight: 700; transform: translate(-50%, -50%); }
.friendly-ward-marker.is-sentry { border-color: #fff2f2; background: #ef767d; color: #381015; }
.friendly-ward-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #c6ced7; font-size: 11px; text-shadow: 0 1px 3px #000; }
.friendly-gold-chart { position: relative; width: 100%; min-width: 0; }
.friendly-gold-chart svg { display: block; width: 100%; height: 320px; overflow: visible; }
.friendly-gold-chart svg text { fill: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.friendly-gold-grid { stroke: #36414d; stroke-width: 1; stroke-dasharray: 2 4; }
.friendly-gold-axis { stroke: #667384; stroke-width: 1; }
.friendly-gold-crosshair { stroke: #e9edf1aa; stroke-width: 1; stroke-dasharray: 4 3; }
.friendly-gold-tooltip { position: absolute; top: 50%; z-index: 3; width: fit-content; min-width: 0; max-width: calc(100% - 16px); overflow: visible; padding: 1px; border: 2px solid #050607; border-radius: 0; background: #111516; box-shadow: 0 5px 14px #0006; pointer-events: none; transform: translateY(-50%); }
.friendly-gold-tooltip-title { display: block; padding: 2px 6px; background: #111516; color: #f0c45c; font-size: 12px; line-height: 1.4; font-weight: 600; font-variant-numeric: tabular-nums; }
.friendly-gold-tooltip-row { display: flex; min-width: 0; height: 28px; align-items: center; gap: 4px; padding: 1px 5px 1px 4px; border-bottom: 1px solid #090b0c; border-left: 2px solid var(--curve-color, #f0c45c); background: #2d604b; color: #fff; }
.friendly-gold-tooltip-row.side-radiant { background: #2d604b; }
.friendly-gold-tooltip-row.side-dire { background: #805158; }
.friendly-gold-tooltip-row:last-child { border-bottom: 0; }
.friendly-gold-hero { display: flex; width: 24px; height: 24px; flex: 0 0 24px; align-items: center; justify-content: center; }
.friendly-gold-hero img { display: block; width: 24px; height: 24px; object-fit: contain; }
.friendly-gold-hero i { display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid #ffffffb3; border-radius: 50%; color: white; font-size: 10px; font-style: normal; font-weight: 700; }
.friendly-gold-coins { position: relative; display: block; width: 23px; height: 16px; flex: 0 0 23px; }
.friendly-gold-coins i { position: absolute; display: block; width: 16px; height: 7px; border: 1px solid #fff6a1; border-radius: 50%; background: linear-gradient(#fff56b 0%, #ffd600 52%, #f2a900 100%); box-shadow: 0 1px 0 #a86f00; }
.friendly-gold-coins i:nth-child(1) { top: 6px; left: 0; }
.friendly-gold-coins i:nth-child(2) { top: 3px; left: 3px; }
.friendly-gold-coins i:nth-child(3) { top: 1px; left: 6px; }
.friendly-gold-tooltip-row b { color: #fff500; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0; text-shadow: 1px 1px 0 #6c6200, 0 0 2px #ffef0066; white-space: nowrap; }

@media (max-width: 1150px) {
  .home-grid { grid-template-columns: minmax(0, 1fr) 270px; gap: 16px; }
  main { padding-right: 24px; padding-left: 24px; }
  .topbar { padding-right: 24px; padding-left: 24px; }
  .hero-copy { width: 72%; }
  .match-row { grid-template-columns: 64px minmax(0, 1fr) 45px minmax(0, 1fr) 62px; gap: 8px; padding-right: 14px; padding-left: 14px; }
}
@media (max-width: 960px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .aside-column { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .standings-card { grid-row: span 2; }
  .notice-card { grid-column: 1 / -1; }
  .community-option { min-height: 0; }
  .tournament-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tournament-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :root { --side: 0px; }
  .sidebar { display: none; }
  .topbar { position: sticky; top: 0; height: 58px; gap: 12px; padding: 0 16px; }
  .breadcrumb { margin-right: auto; font-size: 15px; }
  .breadcrumb span { margin: 0 5px; }
  .account-link { gap: 5px; font-size: 13px; }
  .account-name { max-width: 90px; }
  .account-mark { font-size: 22px; }
  main { min-height: 70vh; padding: 22px 16px 26px; }
  .page-heading { align-items: flex-start; margin-bottom: 17px; }
  .page-heading h1 { font-size: 30px; }
  .page-heading p { max-width: 280px; font-size: 15px; }
  .date-pill { display: none; }
  .eyebrow { margin-bottom: 5px; font-size: 13px; letter-spacing: 1.7px; }
  .home-grid, .primary-column, .aside-column { gap: 14px; }
  .hero { min-height: 300px; }
  .hero-art { top: -5px; right: -27px; width: 61%; height: 260px; opacity: .42; }
  .hero-copy { width: 100%; padding: 22px 20px 74px; }
  .hero-kicker { font-size: 13px; letter-spacing: 1.2px; }
  .hero h2 { max-width: 330px; margin: 16px 0 9px; font-size: 29px; }
  .hero-description { max-width: 270px; min-height: 38px; font-size: 15px; }
  .hero-actions { margin-top: 16px; }
  .btn { min-height: 40px; padding: 8px 12px; font-size: 14px; }
  .hero-meta { min-height: 48px; gap: 14px; padding: 8px 18px; font-size: 13px; }
  .hero-meta strong { font-size: 14px; }
  .card-heading { padding: 16px 15px 13px; }
  .card-heading h2 { font-size: 18px; }
  .card-heading p { font-size: 13px; }
  .text-link { font-size: 14px; }
  .match-row { grid-template-columns: 48px minmax(0, 1fr) 40px minmax(0, 1fr); min-height: 76px; gap: 6px; padding: 9px 10px; }
  .match-date { font-size: 14px; }
  .match-date small { font-size: 12px; }
  .match-team { flex-direction: column; gap: 4px; font-size: 13px; text-align: center; }
  .match-team.away { flex-direction: column-reverse; text-align: center; }
  .team-crest { width: 25px; height: 25px; font-size: 12px; }
  .match-team-name { max-width: 100%; }
  .match-score { font-size: 14px; }
  .match-score.pending { font-size: 12px; }
  .match-status { display: none; }
  .feature-grid { grid-template-columns: 1fr; gap: 9px; }
  .feature-card { min-height: 74px; gap: 10px; padding: 12px; }
  .feature-symbol { width: 29px; height: 29px; font-size: 15px; }
  .feature-copy strong { font-size: 14px; }
  .feature-copy small { font-size: 12px; }
  .feature-arrow { font-size: 13px; }
  .aside-column { grid-template-columns: minmax(0, 1fr); }
  .standings-card { grid-row: auto; }
  .account-card { padding: 18px; }
  .account-card h2 { font-size: 18px; }
  .standings-table th { padding: 9px 9px; font-size: 12px; }
  .standings-table td { padding: 9px 9px; font-size: 13px; }
  .standings-table th:first-child, .standings-table td:first-child { padding-left: 13px; }
  .standings-table th:last-child, .standings-table td:last-child { padding-right: 13px; }
  .footer { min-height: 60px; flex-wrap: wrap; margin-bottom: 64px; padding: 14px 16px; font-size: 12px; }
  .mobile-nav { position: fixed; z-index: 40; right: 0; bottom: 0; left: 0; display: flex; height: calc(62px + env(safe-area-inset-bottom)); justify-content: space-around; padding: 6px 5px max(8px, env(safe-area-inset-bottom)); border-top: 1px solid #354153; background: #121a24f5; backdrop-filter: blur(14px); }
  .mobile-nav a { display: flex; min-width: 52px; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--muted); font-size: 12px; }
  .mobile-nav a > span { font-size: 20px; line-height: 1.2; }
  .mobile-nav a.active { color: var(--accent); }
  .community-options { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 14px; }
  .community-option { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 13px; padding: 17px; }
  .community-option-icon { width: 40px; height: 40px; border-radius: 11px; font-size: 22px; }
  .community-option-copy { gap: 4px; }
  .community-option-copy strong { font-size: 18px; }
  .community-option-copy span { font-size: 15px; }
  .community-option-arrow { font-size: 21px; }
  .community-panel-heading { padding: 21px 19px 17px; }
  .community-panel-heading h2 { font-size: 21px; }
  .community-panel-heading p { font-size: 15px; }
  .community-panel-body { padding: 19px; }
  .community-socials { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 16px; }
  .community-social { min-height: 76px; gap: 13px; padding: 13px; }
  .community-social-icon { width: 42px; height: 42px; }
  .community-social-copy small { font-size: 14px; }
  .community-social-copy strong { font-size: 16px; }
  .friendly-guide { gap: 10px; }
  .friendly-step { grid-template-columns: 34px minmax(0, 1fr); gap: 11px; padding: 14px; }
  .friendly-step-number { width: 31px; height: 31px; font-size: 15px; }
  .friendly-step h3 { font-size: 17px; }
  .friendly-step p { font-size: 15px; }
  .friendly-points-note { font-size: 14px; }
  .tournament-heading { align-items: flex-start; }
  .tournament-overview { gap: 9px; margin-bottom: 15px; }
  .tournament-overview-card { min-height: 88px; gap: 10px; padding: 13px; }
  .tournament-overview-icon { width: 34px; height: 34px; font-size: 17px; }
  .tournament-overview-card > div > span { font-size: 13px; }
  .tournament-overview-card strong { font-size: 23px; }
  .tournament-panel-heading { align-items: flex-start; padding: 17px 15px 13px; }
  .tournament-panel-heading h2 { font-size: 19px; }
  .tournament-panel-heading p { font-size: 13px; }
  .tournament-filters { padding-right: 15px; padding-left: 15px; }
  .tournament-filter { font-size: 14px; }
  .tournament-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 15px 16px; }
  .tournament-card { min-height: 225px; padding: 15px; }
  .tournament-card h3 { font-size: 20px; }
}
@media (max-width: 390px) {
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 63px; }
  .hero h2 { font-size: 25px; }
  .match-row { grid-template-columns: 42px minmax(0, 1fr) 32px minmax(0, 1fr); gap: 4px; padding-right: 8px; padding-left: 8px; }
  .match-date { font-size: 12px; }
  .match-team { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

@media (max-width: 960px) {
  .friendly-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .friendly-match-card { grid-template-columns: minmax(0, 1fr) auto; }
  .friendly-match-outcome { grid-column: 1; grid-row: 2; }
  .friendly-match-open { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 760px) {
  .friendly-heading { align-items: flex-start; }
  .friendly-league-badge { margin-top: 2px; padding: 6px 8px; font-size: 12px; }
  .friendly-metrics { gap: 9px; margin-bottom: 15px; }
  .friendly-metric { min-height: 94px; gap: 10px; padding: 12px; }
  .friendly-metric-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 18px; }
  .friendly-metric-label { font-size: 12px; }
  .friendly-metric strong { font-size: 22px; }
  .friendly-metric small { font-size: 11px; }
  .friendly-tabs { margin-bottom: 11px; }
  .friendly-tab { min-width: 92px; padding: 7px 11px; font-size: 14px; }
  .friendly-panel-heading { padding: 16px 15px 13px; }
  .friendly-panel-heading h2 { font-size: 16px; }
  .friendly-panel-heading p { font-size: 12px; }
  .friendly-toolbar { align-items: flex-start; padding: 0 15px 12px; }
  .friendly-filter-note { display: none; }
  .friendly-table { min-width: 940px; }
  .friendly-table th { padding-right: 9px; padding-left: 9px; }
  .friendly-table td { padding: 9px; }
  .friendly-match-list { gap: 8px; padding: 0 12px 13px; }
  .friendly-match-card { gap: 9px; padding: 12px; }
  .friendly-match-mark { width: 32px; height: 32px; }
  .friendly-match-title { font-size: 13px; }
  .friendly-match-meta { font-size: 11px; }
  .friendly-score-note { flex-wrap: wrap; gap: 9px; padding: 13px; }
  .friendly-score-note > div { flex: 1 1 calc(100% - 42px); }
  .friendly-score-state { margin-left: 39px; }
  .friendly-dialog-heading { padding: 13px 15px; }
  .friendly-dialog-body { padding: 14px 15px 18px; }
  .friendly-profile-summary { flex-wrap: wrap; padding: 11px; }
  .friendly-profile-balance { flex-basis: 100%; grid-template-columns: auto 1fr; align-items: center; text-align: left; }
  .friendly-profile-balance strong { justify-self: end; }
  .friendly-match-team-grid { grid-template-columns: minmax(0, 1fr); }
  .friendly-ward-map { width: min(100%, 320px); margin: 0 auto; }
}
@media (max-width: 520px) {
  .friendly-analysis-grid { grid-template-columns: minmax(0, 1fr); }
  .friendly-league-badge { max-width: 132px; overflow: hidden; text-overflow: ellipsis; }
  .friendly-match-card { grid-template-columns: minmax(0, 1fr); }
  .friendly-match-outcome, .friendly-match-open { grid-column: 1; grid-row: auto; }
  .friendly-match-open { justify-self: start; }
  .friendly-dialog:not(.is-drawer) { width: 100vw; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  #event-series-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: 100dvh; }
  .friendly-dialog.is-drawer { width: 100vw; border-radius: 0; }
  .friendly-profile-metrics { gap: 6px; }
  .friendly-profile-metric { padding: 10px 8px; }
  .friendly-profile-metric strong { font-size: 17px; }
  .friendly-profile-tabs { gap: 17px; }
  .friendly-profile-hero-row { grid-template-columns: 19px 25px minmax(0, 1fr) 35px 31px 31px 38px; gap: 4px; padding: 5px 6px; font-size: 11px; }
  .friendly-profile-hero-row img { width: 25px; height: 25px; }
  .friendly-profile-relations { grid-template-columns: minmax(0, 1fr); }
  .friendly-match-detail-meta { justify-content: flex-start; }
  .friendly-match-player-row { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 8px; }
  .friendly-match-player-row > .friendly-match-hero-wrap { grid-column: 1; grid-row: 1; }
  .friendly-match-player-row > .friendly-match-player-main { grid-column: 2; grid-row: 1; }
  .friendly-match-player-row > .friendly-player-extra { grid-column: 1; grid-row: 2; flex-direction: row; gap: 3px; align-self: start; }
  .friendly-match-player-row > .friendly-match-inventories { grid-column: 2; grid-row: 2; }
  .friendly-match-hero-wrap, .friendly-match-hero, .friendly-match-hero-fallback { width: 44px; height: 26px; }
  .friendly-player-statline { gap: 4px 8px; font-size: 12px; }
  .friendly-player-stat-side { gap: 5px; }
  .friendly-detail-items { grid-template-columns: repeat(6, 26px); grid-auto-rows: 18px; gap: 3px; }
  .friendly-detail-item-slot { width: 26px; height: 18px; }
  .friendly-neutral-slot { width: 18px; height: 18px; }
  .friendly-gold-tooltip-row b { font-size: 12px; }
  .friendly-analysis-heading { align-items: flex-start; flex-direction: column; }
  .friendly-ward-controls { width: 100%; justify-content: flex-start; }
  .friendly-ward-controls select { max-width: min(190px, 55vw); }
  .friendly-detail-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .friendly-detail-row > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .friendly-detail-row > :last-child { grid-column: 2; grid-row: 1 / span 2; }
}

@media (max-width: 960px) {
  .event-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-overview-grid { grid-template-columns: minmax(0, 1fr); }
  .event-club-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .event-detail-hero { min-height: 330px; }
  .event-detail-hero-copy { padding: 23px 20px 82px; }
  .event-detail-hero-copy h1 { max-width: 320px; font-size: 31px; }
  .event-detail-hero-copy p { max-width: 285px; font-size: 15px; }
  .event-detail-hero-art { top: 47px; right: -42px; width: 72%; height: 245px; opacity: .38; }
  .event-detail-actions { margin-top: 17px; }
  .event-detail-actions .live-button { order: 3; }
  .event-stat-grid { gap: 9px; margin-top: 13px; }
  .event-stat { min-height: 91px; padding: 12px 13px; }
  .event-stat-label { font-size: 13px; }
  .event-stat strong { font-size: 20px; }
  .event-stat small { font-size: 12px; }
  .event-detail-tabs { margin-top: 17px; }
  .event-detail-tab { min-height: 40px; padding: 7px 12px 9px; font-size: 15px; }
  .event-section-heading { padding: 17px 15px 13px; }
  .event-section-heading h2 { font-size: 19px; }
  .event-section-heading p { font-size: 13px; }
  .event-next-content, .event-rules-content { padding-right: 15px; padding-left: 15px; }
  .event-next-match-teams { gap: 5px; }
  .event-next-match-teams strong { max-width: 120px; font-size: 14px; }
  .event-next-match-teams small { max-width: 120px; font-size: 12px; }
  .event-team-crest { width: 39px; height: 39px; border-radius: 11px; font-size: 18px; }
  .event-next-match-footer { align-items: flex-start; flex-direction: column; }
  .event-schedule-list { padding: 0 15px 16px; }
  .event-match-card, .event-match-card.is-compact { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 5px 8px; padding: 8px 10px; }
  .event-match-card-top { grid-column: 1; grid-row: 1; }
  .event-match-card-meta { grid-column: 2; grid-row: 1; gap: 5px; font-size: 11px; }
  .event-match-versus { grid-column: 1 / -1; grid-row: 2; gap: 5px; }
  .event-match-team { font-size: 13px; }
  .event-stage-filters, .event-group-filters { padding-right: 15px; padding-left: 15px; }
  .event-bracket { padding-right: 15px; padding-left: 15px; }
  .event-bracket-track { min-width: 275px; }
  .event-club-groups { padding-right: 15px; padding-left: 15px; }
  .event-squad-grid { grid-template-columns: minmax(0, 1fr); }
  .event-club-card-heading { margin-bottom: 10px; }
  .event-overview-group-tabs { padding-right: 15px; padding-left: 15px; }
  .event-standings-table { min-width: 600px; }
  .event-standings-table th:first-child, .event-standings-table td:first-child { padding-left: 15px; }
  .event-standings-table th:last-child, .event-standings-table td:last-child { padding-right: 15px; }
  .event-stats-toolbar { padding-right: 15px; padding-left: 15px; }
  .event-registration-toolbar, .event-registration-summary { padding-right: 15px; padding-left: 15px; }
  .event-registration-toolbar > span { width: 100%; margin-left: 0; }
  .event-stats-subtabs { width: 100%; }
  .event-stats-subtab { flex: 1; }
  .event-stats-count { margin-left: auto; }
  .event-original-section-label { margin-right: 15px; margin-left: 15px; }
  .event-original-bracket-row { gap: 12px; padding-right: 15px; padding-left: 15px; }
  .event-original-bracket-column { min-width: 200px; flex-basis: 200px; }
  .event-original-bracket-match { min-width: 190px; }
  .event-fantasy-columns { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .event-fantasy-rules { grid-template-columns: minmax(0, 1fr); padding-right: 15px; padding-left: 15px; }
  .event-fantasy-bracket { padding-right: 15px; padding-left: 15px; }
  .event-fantasy-match-grid { grid-template-columns: minmax(0, 1fr); }
  .event-fantasy-player-picks { margin-right: 15px; margin-left: 15px; }
  .event-fantasy-selects { grid-template-columns: minmax(0, 1fr); }
  .event-fantasy-leader-list { padding-right: 15px; padding-left: 15px; }
  .event-fantasy-player-board-list { padding-right: 15px; padding-left: 15px; }
}

/* Dota 2 visual system: ancient battlefield, stone panels and brass accents. */
.sidebar { background: #111923; border-right-color: var(--line); }
.brand { color: #e9d7b0; }
.brand-sub { color: #bcbcb0; }
.season-label { color: #d7d6c5; }
.nav-item { border-radius: 3px; }
.nav-item:hover { background: #29312b; }
.nav-item.active { background: linear-gradient(90deg, #9ecba721, transparent); box-shadow: inset 0 1px #e9d7b015, inset 0 -1px #e9d7b015; }
.nav-item.active::before { background: var(--gold); border-radius: 0; }
.nav-icon { color: #c8c0a0; }
.nav-item.active .nav-icon { color: var(--accent); }
.topbar { background: #111923; border-bottom-color: var(--line); }
.breadcrumb, .account-link { color: #deddd1; }
.eyebrow { color: var(--gold); }
.btn { border-radius: 3px; border-color: #60685d; }
.btn.primary { background: var(--accent); color: #10251c; border-color: var(--accent); box-shadow: none; }
.btn.outline { background: #18212d; color: var(--text); border-color: #64778e; }
.card { border-color: var(--line); border-radius: 7px; background: var(--panel); box-shadow: none; }
.card-heading { border-bottom-color: #77715636; }
.card-heading h2, .tournament-panel-heading h2, .event-section-heading h2, .friendly-panel-heading h2 { display: flex; align-items: center; gap: 10px; }
.card-heading h2::before, .tournament-panel-heading h2::before, .event-section-heading h2::before, .friendly-panel-heading h2::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border: 1px solid var(--gold); transform: rotate(45deg); }
.hero { isolation: isolate; border-color: #83714e; border-radius: 7px; background: linear-gradient(90deg, #131c19 0%, #131c19f2 30%, #131c1940 70%), url("./assets/ancient-battlefield.svg") right center / cover no-repeat; box-shadow: inset 0 1px #f4deb033, 0 14px 40px #0004; }
.hero::before { position: absolute; inset: 9px; z-index: -1; border: 1px solid #dec68e26; content: ""; pointer-events: none; }
.hero-art { display: none; }
.hero-copy { width: 72%; padding: 32px 30px; }
.hero h2 { max-width: 720px; font-family: "Noto Serif SC", "Songti SC", SimSun, serif; font-size: clamp(30px, 3.2vw, 42px); font-weight: 700; line-height: 1.35; letter-spacing: 1px; color: #f5ead4; text-shadow: 0 2px 12px #0008; }
.hero-description { max-width: 430px; color: #cad5c9; font-size: 16px; }
.hero-kicker { color: #e2cda7; font-size: 13px; }
.hero-meta { position: relative; right: auto; bottom: auto; left: auto; background: #101616e6; border-top: 1px solid #bda27142; color: #c7c8b8; font-size: 14px; flex-wrap: wrap; }
.hero-meta strong { color: #f0dfb8; }
.match-list { background: #181e1f; }
.match-row { background: #171d1d; min-height: 82px; }
.match-row:hover { background: #29312b; }
.match-team { font-size: 15px; }
.match-score { color: #f1dfaf; font-size: 18px; font-variant-numeric: tabular-nums; }
.match-date { font-size: 15px; }
.match-status { border-color: #9ecba740; background: #9ecba712; }
.team-crest, .event-team-crest, .friendly-avatar { border-radius: var(--portrait-radius); border-color: #c8c1a566; box-shadow: inset 0 2px #ffffff18; }
.feature-card:hover { border-color: #8a7954; }
.friendly-symbol { background: #9ecba718; color: var(--accent); }
.community-symbol { background: #dcc18c18; color: var(--gold); }
.account-card { background: linear-gradient(140deg, #28322e, #191f1f); border-color: #586149; }
.standings-card { background: #1a2020; }
.standings-table-wrap, .standings-table td { border-color: #36403b; }
.standings-table { background: #181e1f; }
.standings-table th { color: #b8c1ba; background: #131a19; }
.standings-rank.top, .standings-points { color: var(--gold); }
.notice-card { border-color: #80534a; background: #302321; }
.footer { border-top-color: #4e493b; color: #c9c5b6; }

/* Tournament center and detail. */
.tournament-overview-card, .tournament-card { border-color: #4a5046; }
.tournament-overview-icon { border-color: #8b7953; background: #dcc18c14; color: var(--gold); border-radius: 5px; }
.tournament-overview-card.is-live .tournament-overview-icon { border-color: #9ecba766; background: #9ecba718; color: var(--accent); }
.tournament-status { border-color: #9ecba740; background: #9ecba712; }
.tournament-card { background: linear-gradient(155deg, #252c2b, #191e1f 72%); border-radius: 7px; }
.tournament-card.status-upcoming { background: linear-gradient(155deg, #302c21, #191e1f 72%); }
.tournament-card.status-ended { background: linear-gradient(155deg, #202526, #191e1f 72%); }
.tournament-card:hover { border-color: #9e895b; box-shadow: 0 10px 26px #0005; }
.tournament-card-meta { border-top-color: #60604b; color: #c6c8b9; }
.event-detail-hero { border-color: #83714e; border-radius: 7px; background: linear-gradient(90deg, #17201eee, #17201eca), url("./assets/ancient-battlefield.svg") center / cover; box-shadow: inset 0 1px #f4deb033, 0 14px 40px #0004; }
.event-detail-hero::before { position: absolute; inset: 10px; border: 1px solid #dec68e26; content: ""; pointer-events: none; }
.event-detail-hero-art { display: none; }
.event-detail-hero-copy h1 { font-family: "Noto Serif SC", "Songti SC", SimSun, serif; color: #f5ead4; text-shadow: 0 2px 12px #0008; }
.event-detail-kicker { color: #e2cda7; }
.event-detail-tab:hover, .event-detail-tab.active { border-bottom-color: var(--gold); color: #e9d5a4; }
.event-section-heading h2 { color: #eeeae1; }
.event-live-badge, .event-stage-filter.active, .event-group-filter.active { border-color: #9ecba766; background: #9ecba718; color: var(--accent); }
.event-match-card { border-color: #4a5046; border-radius: 5px; background: #181e1f; }
.event-match-card.is-live { border-left-color: var(--accent); background: #1a2821; }
.event-match-card.is-upcoming { border-left-color: var(--gold); }
.event-match-team.is-winner span, .event-match-score strong.is-winner, .event-points { color: var(--gold); }
.event-original-section-label.is-upper { border-color: #9ecba7; background: #9ecba718; color: #b7dbbb; }
.event-original-section-label.is-lower { border-color: #d48c63; background: #d48c6318; color: #e4ae82; }
.event-original-bracket-header { border-radius: 3px; background: #9ecba714; color: #b7dbbb; }
.event-original-bracket-header.is-final { background: #dcc18c1c; color: #e9d5a4; }
.event-original-bracket-match { border-color: #60604b; border-radius: 4px; background: #1b2423; box-shadow: inset 3px 0 #9ecba73d; }
.event-original-bracket-team { border-bottom-color: #3b443c; }
.event-original-bracket-team.is-winner { background: #9ecba714; }
.event-original-bracket-team.is-winner span, .event-original-bracket-team.is-winner strong { color: var(--gold); }
.event-original-champion { color: #f0d99f; text-shadow: 0 0 8px #e8c47c55; }
.event-club-card { border-color: #4a5046; border-radius: 6px; background: #181e1f; }
.event-squad { border-color: #4a5046; border-radius: 4px; background: #202725; }
.event-player-chip { border-color: #526f59; background: #9ecba712; }
.event-player-chip.is-support { border-color: #6c5d4d; background: #dcc18c12; }

/* Friendly, community and dialog surfaces. */
.friendly-league-badge { border-color: #9ecba766; background: #9ecba712; color: #c7e9cc; }
.friendly-metric { border-color: #4a5046; background: linear-gradient(155deg, #252c2b, #191e1f 72%); }
.friendly-metric-icon { border-color: #8b7953; background: #dcc18c14; color: var(--gold); border-radius: 5px; }
.friendly-metric-icon.accent { border-color: #9ecba766; background: #9ecba718; color: var(--accent); }
.friendly-metric-icon.gold { border-color: #8b7953; background: #dcc18c14; color: var(--gold); }
.friendly-tab.active { background: #9ecba718; color: var(--accent); }
.friendly-panel { border-color: #4a5046; border-radius: 7px; background: #1a2020; }
.friendly-table { background: #181e1f; }
.friendly-table thead { background: #131a19; }
.friendly-table th, .friendly-table td { border-color: #36403b; }
.friendly-table tbody tr:hover { background: #29312b; }
.friendly-player-button:hover strong { color: var(--gold); }
.friendly-avatar.large { border-color: #8b7953; }
.friendly-hero { border-color: #526057; background: #202725; }
.friendly-points { color: var(--gold); }
.friendly-match-card { border-color: #4a5046; border-radius: 5px; background: #181e1f; }
.friendly-match-mark { background: #9ecba718; color: var(--accent); }
.friendly-score-note { border-color: #806c4a; background: #dcc18c0d; }
.friendly-dialog { border-color: #777053; border-radius: 7px; background: #1a2221; }
.friendly-dialog-heading { border-color: #615840; background: #1a2221; }
.community-option, .community-panel, .community-social { border-color: #4a5046; border-radius: 7px; background: #1a2020; }
.community-option:hover { border-color: #8a7954; }
.community-option[aria-pressed="true"] { border-color: #9ecba766; background: linear-gradient(140deg, #25352d, #1a2020 70%); }
.community-option-icon { border-color: #8b7953; background: #dcc18c12; border-radius: 6px; }
.community-panel-heading { background: linear-gradient(110deg, #24352c, #1a2020 66%); border-bottom-color: #60583f; }
.community-social { background: #181e1f; }
dialog { border-color: #777053; border-radius: 7px; background: #1a2221; }
dialog .dialog-header { border-bottom-color: #615840; }
.mobile-nav { background: #141c19f5; border-top-color: #71654b; }

/* Reading surfaces: neutral backgrounds, clear type and restrained faction accents. */
.account-card, .standings-card, .tournament-card,
.tournament-card.status-upcoming, .tournament-card.status-ended,
.friendly-metric, .friendly-panel, .community-panel, .community-option,
.event-club-card, .event-fantasy-match, .event-fantasy-rules > div {
  background: var(--panel);
  border-color: var(--line);
}
.match-list, .match-row, .standings-table, .friendly-table,
.event-match-card, .friendly-match-card, .community-social,
.event-original-bracket-match, .event-fantasy-login {
  background: #131c27;
  border-color: var(--line);
}
.event-squad, .friendly-hero, .community-panel-heading,
.friendly-dialog-heading, .friendly-dialog, dialog {
  background: var(--panel-raised);
  border-color: var(--line);
}
.standings-table th, .friendly-table thead, .event-standings-table th {
  background: #101923;
  color: #c5d1df;
}
.standings-table td, .friendly-table th, .friendly-table td,
.event-standings-table td, .event-original-bracket-team,
.event-fantasy-team, .event-fantasy-leader-row {
  border-color: #344357;
}
.match-row:hover, .friendly-table tbody tr:hover, .nav-item:hover {
  background: #263649;
}
.nav-item.active, .friendly-tab.active, .event-detail-tab.active {
  background: #233b37;
  color: #a4efd0;
  box-shadow: none;
}
.event-detail-tab.active { border-bottom-color: var(--accent); }
.nav-item { color: #c2cddd; }
.nav-icon, .breadcrumb, .account-link { color: var(--text); }
.hero, .event-detail-hero {
  background: linear-gradient(90deg, #101923 0%, #101923ed 40%, #10192366 100%), url("./assets/ancient-battlefield.svg") right center / cover no-repeat;
  border-color: #87734d;
  box-shadow: none;
}
.hero::before, .event-detail-hero::before { display: none; }
.hero h2, .event-detail-hero-copy h1 { color: #f3e6cc; text-shadow: none; }
.hero-description, .event-detail-hero-copy p { color: #d0dbe7; }
.hero-meta { background: #101923; color: #c5d1df; border-top-color: #475262; }
.event-section-heading h2, .event-fantasy-subheading h3 { color: var(--text); }
.account-footnote, .feature-arrow, .match-score.pending,
.event-stat small, .event-match-status.is-finished,
.event-original-bracket-label, .event-original-bracket-team.is-loser span,
.event-empty-chip, .event-fantasy-team .is-tbd, .event-fantasy-match-note,
.friendly-metric small, .standings-rank, .event-rank {
  color: var(--muted);
}
.event-original-bracket-label { background: #101923; }
.event-original-champion { text-shadow: none; }
.event-fantasy-selects select {
  width: 100%; min-width: 0; padding: 10px 12px;
  color: var(--text); background: #101923; border: 1px solid #64778e; border-radius: 4px;
}
.mobile-nav { background: #111923; border-top-color: #64778e; backdrop-filter: none; }
.footer { border-top-color: var(--line); color: var(--muted); }
@media (max-width: 760px) {
  .hero .hero-copy { background: transparent; }
}

@media (max-width: 1200px) {
  .hero-copy { width: 85%; }
  .hero h2 { font-size: 34px; }
}

@media (max-width: 760px) {
  .hero { background-position: 65% center; }
  .hero-copy { width: 100%; padding: 25px 22px; background: transparent; }
  .hero h2 { font-size: 30px; }
  .hero-description { font-size: 15px; }
  .hero-meta { font-size: 13px; gap: 12px; }
  .match-team, .match-date { font-size: 13px; }
  .match-date small { font-size: 11px; }
  .event-detail-hero-copy h1 { font-size: 31px; }
  .friendly-table { min-width: 980px; }
}

/* Unified site palette: blue for interaction, green/red for results, gold for points. */
.sidebar { background: #101b2a; }
.topbar { background: #111e2e; }
.card, .friendly-panel, .event-club-card, .community-panel, .community-option { background: var(--panel); border-color: var(--line); }
.btn { background: #253750; border-color: #5a7390; color: var(--text); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #111c2d; }
.btn.outline { background: #1b2d43; border-color: #6482a5; color: #e3efff; }
.btn:disabled { opacity: .58; }
.text-link, .account-link:hover, .utility-link:hover { color: var(--accent); }
.nav-item { color: #d4e0ed; }
.nav-item:hover, .match-row:hover, .friendly-table tbody tr:hover { background: #263c57; }
.nav-item.active, .friendly-tab.active, .event-detail-tab.active { background: #263d60; color: #c5dbff; }
.nav-item.active::before { background: var(--accent); }
.nav-item.active .nav-icon { color: #c5dbff; }
.event-detail-tab:hover, .event-detail-tab.active { border-bottom-color: var(--accent); color: #d1e2ff; }
.friendly-tab.active, .event-stage-filter.active, .event-group-filter.active, .tournament-filter.active { border-color: #789fdb; background: #28466b; color: #d1e3ff; }
.friendly-tab:hover, .event-stage-filter:hover, .event-group-filter:hover { color: var(--text); }
.live-dot { background: var(--success); box-shadow: 0 0 9px #81e6ab55; }
.skip-link { color: #111c2d; }
.hero, .event-detail-hero { border-color: #8b794f; background: linear-gradient(90deg, #101b2beb 0%, #101b2bdc 48%, #101b2b7a 100%), url("./assets/ancient-battlefield.svg") right center / cover no-repeat; }
.hero-description, .event-detail-hero-copy p { color: #d7e3f1; }
.hero-meta { background: #101b2bdf; color: #d8e4f0; }
.tournament-card, .account-card, .standings-card, .friendly-metric { background: var(--panel); border-color: var(--line); }
.tournament-card.status-upcoming, .tournament-card.status-ended { background: var(--panel); }
.tournament-card:hover, .community-option:hover { border-color: #91b9f3; }
.match-list, .standings-table, .friendly-table { background: var(--panel); }
.match-row, .friendly-match-card, .event-match-card, .event-original-bracket-match { background: #101d2e; border-color: var(--line); }
.match-status, .event-live-badge, .tournament-status, .friendly-score-state.is-enabled { border-color: #81e6ab77; background: #81e6ab18; color: var(--success); }
.event-live-badge.is-finished, .match-status.finished { border-color: #526780; background: #23344b; color: #cfdaea; }
.event-live-badge.is-upcoming { border-color: #f2d18f77; background: #f2d18f18; color: var(--gold); }
.event-match-card.is-live { background: #18332f; border-left-color: var(--success); }
.event-match-status.is-live, .tournament-overview-card.is-live strong { color: var(--success); }
.tournament-overview-card.is-live .tournament-overview-icon { border-color: #81e6ab77; background: #81e6ab18; color: var(--success); }
.tournament-overview-card.is-upcoming strong { color: var(--gold); }
.event-squad, .friendly-hero, .friendly-dialog, .friendly-dialog-heading, dialog { background: var(--panel-raised); border-color: var(--line); }
.friendly-table thead, .standings-table th, .event-standings-table th { background: #101b2b; color: #d4e2f1; }
.friendly-table td, .friendly-table th, .event-standings-table td, .standings-table td { border-color: var(--line); }
.event-match-team.is-winner span, .event-match-score strong.is-winner, .event-bracket-team.is-winner span, .event-bracket-team.is-winner b { color: var(--success); }
.event-original-bracket-team.is-winner { background: #174635; box-shadow: inset 4px 0 var(--success); }
.event-original-bracket-team.is-winner span, .event-original-bracket-team.is-winner strong { color: #d6ffe5; }
.event-original-bracket-team.is-loser span { color: #a5b7c9; }
.event-original-bracket-label { background: #101b2b; color: var(--muted); }
.event-original-bracket-label span { color: var(--accent); }
.event-original-bracket-match { box-shadow: none; }
.event-fantasy-leader-row, .event-fantasy-player-board-row { border-color: var(--line); }
.friendly-positive, .friendly-profile-match-result.is-win, .friendly-side-badge.radiant { color: var(--success); }
.friendly-negative, .friendly-profile-match-result.is-loss, .friendly-side-badge.dire { color: var(--danger); }
.friendly-profile-match-result.is-win, .friendly-side-badge.radiant { border-color: #81e6ab66; background: #81e6ab16; }
.friendly-profile-match-result.is-loss, .friendly-side-badge.dire { border-color: #ffa6a466; background: #ffa6a416; }
.friendly-match-team.team-radiant > h3 { color: var(--success); }
.friendly-match-team.team-dire > h3 { color: var(--danger); }
.match-status.finished, .event-match-status.is-finished { color: #c4d3e4; }
.event-points, .friendly-points, .standings-points { color: var(--gold); }
.account-card, .community-option[aria-pressed="true"], .community-panel-heading { background: linear-gradient(145deg, #263b56, var(--panel) 72%); border-color: var(--line); }
.community-social, .friendly-profile-section, .friendly-detail-section { background: var(--panel); border-color: var(--line); }
.event-original-section-label.is-upper, .event-original-bracket-header { border-color: #77a3db; background: #274361; color: #c8ddff; }
.event-original-section-label.is-lower { border-color: #c7996f; background: #493527; color: #ffcf9f; }
.event-original-bracket-header.is-final { background: #564527; color: var(--gold); }
.event-original-bracket-team { border-bottom-color: var(--line); }
.event-original-bracket-team.is-eliminated { background: #392832; box-shadow: inset 4px 0 var(--danger); }
.event-original-bracket-team.is-eliminated span { color: #d2bfc5; text-decoration: line-through; text-decoration-color: #e49aa3; }
.event-original-bracket-team.is-eliminated strong { color: #d2bfc5; }
.event-eliminated-tag { flex: 0 0 auto; padding: 1px 3px; border: 1px solid #b97684; border-radius: 3px; color: #ffd0d7; font-size: 10px; line-height: 1.3; white-space: nowrap; }
.event-club-card, .event-squad, .event-player-chip, .friendly-league-badge, .friendly-metric-icon.accent { border-color: var(--line); background: var(--panel-raised); }
.mobile-nav { background: #111e2e; border-top-color: var(--line); }

/* Fantasy bracket: the text labels remain meaningful without color. */
.event-fantasy-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 0 23px 7px; color: var(--text); font-size: 13px; }
.event-fantasy-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.event-fantasy-legend i { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--line); border-radius: 2px; background: #263448; }
.event-fantasy-legend i.is-picked { border-color: var(--accent); background: #385c8a; }
.event-fantasy-legend i.is-correct { border-color: var(--success); background: #20513b; }
.event-fantasy-legend i.is-wrong { border-color: var(--danger); background: #623538; }
.event-fantasy-legend i.is-actual-winner { border-color: var(--success); background: #1b3540; }
.event-fantasy-legend i.is-tbd { border-color: #8297b0; background: #263448; }
.event-fantasy-legend-note { padding: 0 23px 3px; color: var(--muted); font-size: 12px; }
.event-fantasy-bracket .event-original-bracket-column { min-width: 238px; flex-basis: 238px; }
.event-fantasy-bracket .event-original-bracket-match { background: #101d2e; border-color: #536b87; }
.event-fantasy-bracket .event-original-bracket-team { min-height: 39px; border-color: #43566e; color: var(--text); }
.event-fantasy-bracket .event-original-bracket-team strong { min-width: 0; flex: 0 0 auto; color: inherit; font-size: 12px; white-space: nowrap; }
.event-fantasy-bracket .event-original-bracket-team.is-picked { background: #29476d; box-shadow: inset 4px 0 var(--accent); }
.event-fantasy-bracket .event-original-bracket-team.is-picked span, .event-fantasy-bracket .event-original-bracket-team.is-picked strong { color: #edf5ff; }
.event-fantasy-bracket .event-original-bracket-team.is-correct { background: #20513b; box-shadow: inset 4px 0 var(--success); }
.event-fantasy-bracket .event-original-bracket-team.is-correct span, .event-fantasy-bracket .event-original-bracket-team.is-correct strong { color: #e4ffed; }
.event-fantasy-bracket .event-original-bracket-team.is-wrong { background: #63373b; box-shadow: inset 4px 0 var(--danger); }
.event-fantasy-bracket .event-original-bracket-team.is-wrong span, .event-fantasy-bracket .event-original-bracket-team.is-wrong strong { color: #ffe9e8; }
.event-fantasy-bracket .event-original-bracket-team.is-actual-winner { background: #1b3540; box-shadow: inset 4px 0 var(--success); }
.event-fantasy-bracket .event-original-bracket-team.is-actual-winner span, .event-fantasy-bracket .event-original-bracket-team.is-actual-winner strong { color: #bdf7d5; }
.event-fantasy-bracket .event-original-bracket-team.is-tbd span, .event-fantasy-bracket .event-original-bracket-team.is-tbd strong { color: #a7b9cb; }
.event-fantasy-bracket .event-original-bracket-team.is-loser span { color: #c0cede; }
.event-fantasy-bracket .event-original-bracket-team.is-projected { outline: 1px dashed #93a8c3; outline-offset: -3px; }
.event-projected-tag { flex: 0 0 auto; padding: 1px 4px; border: 1px solid #7389a7; border-radius: 3px; color: #c2d4e8; font-size: 10px; line-height: 1.3; }
.event-fantasy-match-state { float: right; padding: 0 3px; border-radius: 3px; font-weight: 650; }
.event-fantasy-match-state.is-pending { color: #d0dded; }
.event-fantasy-match-state.is-finished { color: var(--success); }
.event-fantasy-bracket .event-original-bracket-team:is(button):hover { background: #38577b; }
.event-fantasy-bracket .event-original-bracket-team.is-correct:is(button):hover { background: #2b654a; }
.event-fantasy-bracket .event-original-bracket-team.is-wrong:is(button):hover { background: #79474a; }
.event-original-champion.is-predicted { color: var(--accent); }
@media (max-width: 760px) {
  .event-fantasy-legend { padding-right: 15px; padding-left: 15px; }
  .event-fantasy-legend-note { padding-right: 15px; padding-left: 15px; }
}

/* Uploaded event artwork remains unobscured; only text gets a local backdrop. */
.tournament-card.has-card-image { position: relative; isolation: isolate; }
.tournament-card.has-card-image .tournament-card-image { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #101b2a; pointer-events: none; }
.tournament-card.has-card-image .tournament-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tournament-card.has-card-image > :not(.tournament-card-image) { position: relative; z-index: 2; }
.tournament-card.has-card-image h3 { width: fit-content; max-width: 100%; padding: 6px 10px; border-radius: 4px; background: #0c192ae6; color: #fff; }
.tournament-card.has-card-image .tournament-card-meta { align-self: flex-start; padding: 6px 10px; border: 0; border-radius: 4px; background: #0c192ae6; color: #e0eaf6; }
.tournament-card.has-card-image .tournament-status { background-color: #0c192ad9; }
.hero.has-card-image { background: var(--panel); }
.hero-card-image { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero.has-card-image .hero-copy { box-sizing: border-box; width: calc(100% - 200px); max-width: 720px; margin: 20px; padding: 22px 25px; border: 1px solid #ffffff3b; border-radius: 7px; background: #0c192a96; box-shadow: 0 8px 28px #0007; }
.event-detail-hero.has-card-image { background: var(--panel); }
.event-detail-hero-image { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.event-detail-hero-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.event-detail-hero.has-card-image .event-detail-hero-copy { box-sizing: border-box; width: calc(100% - 40px); max-width: 720px; margin: 20px; padding: 22px 25px; border: 1px solid #ffffff3b; border-radius: 7px; background: #0c192a96; box-shadow: 0 8px 28px #0007; }
@media (max-width: 760px) {
  .hero.has-card-image .hero-copy { width: calc(100% - 24px); margin: 12px; padding: 19px 18px; }
  .event-detail-hero.has-card-image .event-detail-hero-copy { width: calc(100% - 24px); margin: 12px; padding: 19px 18px; }
}

/* V2 tournament administration: dense lists and the original Dota rank language. */
.v2-rank-icon { position: relative; display: inline-block; width: var(--rank-size); height: var(--rank-size); flex: 0 0 var(--rank-size); vertical-align: middle; }
.v2-rank-icon > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.v2-rank-icon > .v2-rank-pip { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.v2-immortal-number { position: absolute; right: 10%; bottom: 9%; left: 10%; color: #fff6cf; font-size: calc(var(--rank-size) * .22); font-weight: 800; line-height: 1; text-align: center; text-shadow: 0 1px 2px #000, 0 0 2px #000; font-variant-numeric: tabular-nums; pointer-events: none; }
.v2-rank-badge, .tournament-player-name { display: inline-flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; }
.v2-rank-badge > span:last-child { color: var(--text); white-space: nowrap; }
.v2-rank-unset, .tournament-admin-muted { color: var(--muted); }
.tournament-rank-error { color: var(--danger); }
.tournament-registration-summary { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 9px 0 16px; color: var(--muted); font-size: 14px; }
.tournament-registration-summary strong { color: var(--text); font-variant-numeric: tabular-nums; }
.tournament-registration-tools { align-items: end; }
.tournament-registration-tools label { display: grid; gap: 2px; font-size: 13px; }
.tournament-registration-tools input { width: min(290px, 100%); }
.tournament-registration-tools .tournament-admin-hint { margin: 0 0 8px auto; }
.tournament-table-scroll { max-width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 6px; scrollbar-width: thin; }
.tournament-registration-table { min-width: 1330px; }
.tournament-registration-table th:nth-child(1) { min-width: 150px; }
.tournament-registration-table th:nth-child(2) { min-width: 100px; }
.tournament-registration-table th:nth-child(7) { min-width: 150px; }
#registration-list .tournament-table-scroll { max-height: min(70vh, 780px); }
.tournament-admin-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 1.45; }
.tournament-admin-table th, .tournament-admin-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.tournament-admin-table thead th { position: sticky; top: 0; z-index: 1; background: #223147; color: #dfebf8; font-size: 14px; white-space: nowrap; }
.tournament-admin-table tbody tr:nth-child(even) { background: #ffffff08; }
.tournament-admin-table tbody tr:hover { background: #9bc5f313; }
.tournament-admin-table tbody tr:last-child td { border-bottom: 0; }
.tournament-admin-table a { color: #a9cfff; }
.tournament-registration-identity strong { display: block; font-size: 14px; }
.tournament-registration-identity small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.tournament-rank-cell { display: flex; align-items: center; gap: 7px; }
.tournament-text-button { padding: 2px 4px; border: 0; background: transparent; color: #a9cfff; font-size: 12px; cursor: pointer; }
.tournament-text-button:hover { text-decoration: underline; }
.tournament-registration-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tournament-registration-tag { display: inline-flex; align-items: center; padding: 2px 6px; border: 1px solid #6482a555; border-radius: 4px; background: #34506a55; color: #e7f2ff; font-size: 12px; white-space: nowrap; }
.tournament-registration-tag.position-1 { border-color: #daa86388; background: #5f452a99; color: #ffe0ab; }
.tournament-registration-tag.position-2 { border-color: #d7867d88; background: #60363199; color: #ffd1c9; }
.tournament-registration-tag.position-3 { border-color: #bd9de088; background: #47375f99; color: #e9d7ff; }
.tournament-registration-tag.position-4 { border-color: #76bfc388; background: #244e5799; color: #c7f3f4; }
.tournament-registration-tag.position-5 { border-color: #82a6df88; background: #2b426699; color: #d3e4ff; }
.tournament-registration-tag.strength-hero_pool { border-color: #a78cd688; background: #44345e99; color: #e5d8ff; }
.tournament-registration-tag.strength-laning { border-color: #d88c7a88; background: #5b3b3399; color: #ffdad0; }
.tournament-registration-tag.strength-shotcalling { border-color: #7dc2b088; background: #29534899; color: #cdf6e9; }
.tournament-registration-tag.strength-push { border-color: #d5b67988; background: #5a4a2e99; color: #ffebba; }
.tournament-registration-tag.strength-draft { border-color: #84aee088; background: #2a466799; color: #d3e9ff; }
.tournament-registration-tag.intent-main, .tournament-roster-role.assigned { border-color: #81e6ab66; background: #20513b66; color: #c9f7dc; }
.tournament-registration-tag.intent-sub { border-color: #d7ac6177; background: #57462666; color: #ffdda2; }
.tournament-registration-tag.intent-organizer { border-color: #ad96de77; background: #4e3c7166; color: #e1d2ff; }
.tournament-registration-note { max-width: 210px; color: var(--muted); overflow-wrap: anywhere; }
.tournament-registration-date { white-space: nowrap; color: var(--muted); }
.tournament-table-select, .tournament-knockout-picker select { min-width: 102px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; background: #142336; color: var(--text); font: inherit; }
.tournament-admin-table .tournament-admin-row-actions { flex-wrap: nowrap; }
.tournament-matchup-tools { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tournament-matchup-tools label { color: var(--muted); font-size: 14px; }
.tournament-matchup-tools select { display: block; min-width: 155px; margin-top: 5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-raised); color: var(--text); }
.tournament-matchup-scroll { max-height: min(68vh, 720px); }
.tournament-matchup-table { min-width: 980px; }
.tournament-matchup-table td:first-child { min-width: 150px; }
.tournament-matchup-table td:first-child strong { display: block; font-size: 14px; }
.tournament-matchup-phase { display: block; color: var(--muted); font-size: 12px; }
.tournament-matchup-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tournament-matchup-team { min-width: 145px; font-weight: 600; }
.tournament-matchup-team.is-winner { color: var(--success); }
.tournament-matchup-score { color: var(--gold); font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tournament-matchup-table td:nth-child(7) { min-width: 115px; font-size: 12px; line-height: 1.65; }
.tournament-matchup-table td:last-child { min-width: 135px; }
.tournament-matchup-manual { margin: 16px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; }
.tournament-matchup-manual summary { cursor: pointer; font-weight: 650; }
.tournament-matchup-manual-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tournament-matchup-manual-grid .admin-field { margin: 8px 0; }
@media (max-width: 640px) { .tournament-matchup-manual-grid { grid-template-columns: 1fr; } }
.tournament-empty-cell { padding: 22px !important; color: var(--muted); text-align: center !important; }
.tournament-club-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 8px; margin: 8px 0 22px; }
.tournament-club-picker button { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px; background: #142235; color: var(--text); text-align: left; cursor: pointer; }
.tournament-club-picker button[aria-selected="true"] { border-color: var(--accent); background: #234769; box-shadow: inset 3px 0 var(--accent); }
.tournament-club-picker strong, .tournament-club-picker small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tournament-club-picker strong { font-size: 14px; }
.tournament-club-picker small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.tournament-selected-club { border-top: 1px solid var(--line); }
.tournament-selected-club .tournament-club-header { padding: 20px 0; align-items: center; }
.tournament-club-header h3 { font-size: 22px; }
.tournament-club-group { display: inline-block; margin-left: 5px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 13px; vertical-align: middle; }
.tournament-club-header p { margin: 5px 0 0; }
.tournament-club-section { padding: 18px 0; border-top: 1px solid var(--line); }
.tournament-club-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 13px; }
.tournament-club-section-heading h4 { font-size: 18px; }
.tournament-club-section-heading p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.tournament-member-table { min-width: 710px; }
.tournament-member-table th:nth-child(2) { min-width: 150px; }
.tournament-roster-role { display: inline-flex; padding: 3px 7px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); white-space: nowrap; }
.tournament-squad-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tournament-squad-card { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: #121e2d; }
.tournament-squad-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.tournament-squad-title strong { font-size: 16px; }
.tournament-squad-title span { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.tournament-lineup-block { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 5px; background: #1a2a3d; }
.tournament-lineup-block + .tournament-lineup-block { margin-top: 8px; }
.tournament-lineup-block.core { border-left: 3px solid #d6b46a; }
.tournament-lineup-block.support { border-left: 3px solid #80b0ef; }
.tournament-lineup-block.substitute { border-left: 3px solid #bf9eea; }
.tournament-lineup-title { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; }
.tournament-lineup-players { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: 9px; }
.tournament-lineup-players .tournament-player-name { font-size: 14px; }
.tournament-knockout-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.tournament-knockout-grid .tournament-lineup-block + .tournament-lineup-block { margin-top: 0; }
.tournament-admin-empty { padding: 18px; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); text-align: center; }
.admin-dialog.tournament-wide-editor { width: min(810px, calc(100vw - 28px)); }
.tournament-knockout-counts { padding: 9px 12px; border: 1px solid var(--line); border-radius: 5px; background: #1d334a; color: #e3f1ff; font-weight: 700; }
.tournament-knockout-picker { margin-top: 13px; }
.tournament-knockout-picker h3 { margin-bottom: 8px; font-size: 16px; }
.tournament-knockout-picker-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 9px; border-bottom: 1px solid var(--line); }
.tournament-knockout-picker-row:nth-child(even) { background: #ffffff08; }
.tournament-knockout-picker-row small { display: block; margin: 3px 0 0 34px; color: var(--muted); }
.tournament-knockout-picker-row[hidden] { display: none; }
.tournament-knockout-pool { margin-top: 18px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 6px; }
.tournament-knockout-pool summary { color: #b6d5ff; cursor: pointer; font-weight: 700; }
.tournament-knockout-pool input { width: 100%; margin-top: 5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; background: #142336; color: var(--text); }
@media (max-width: 800px) {
  .tournament-squad-grid, .tournament-knockout-grid { grid-template-columns: 1fr; }
  .tournament-club-picker { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .tournament-registration-table { min-width: 1270px; }
  .tournament-knockout-picker-row { grid-template-columns: minmax(0, 1fr) 112px; }
}

/* Registration editor: compact rows and horizontal choices, with scrolling only on short viewports. */
.admin-dialog.tournament-registration-editor { box-sizing: border-box; width: min(790px, calc(100vw - 28px)); max-height: calc(100dvh - 24px); padding: 20px 23px; }
.tournament-registration-editor h2 { margin-bottom: 14px; }
.tournament-registration-editor-layout { display: grid; gap: 11px; }
.tournament-registration-input-row { display: grid; gap: 11px; min-width: 0; }
.tournament-registration-input-row.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tournament-registration-input-row.is-three { grid-template-columns: minmax(0, 1.5fr) minmax(90px, .55fr) minmax(0, 1fr); }
.tournament-registration-editor .admin-field { min-width: 0; margin: 0; font-size: 14px; }
.tournament-registration-editor .admin-field input,
.tournament-registration-editor .admin-field select,
.tournament-registration-editor .admin-field textarea { box-sizing: border-box; width: 100%; margin-top: 5px; padding: 7px 10px; font: inherit; }
.tournament-registration-editor .admin-field input,
.tournament-registration-editor .admin-field select { min-height: 36px; }
.tournament-registration-editor .admin-field textarea { min-height: 54px; resize: vertical; }
.tournament-registration-editor .tournament-registration-note { max-width: none; }
.tournament-registration-choice { min-width: 0; margin: 0; padding: 0; border: 0; }
.tournament-registration-choice legend { margin-bottom: 6px; padding: 0; font-size: 14px; color: var(--text); }
.tournament-registration-choice legend span { color: var(--danger); }
.tournament-registration-editor .tournament-checks { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.tournament-registration-editor .tournament-check-pill { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; min-height: 33px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 5px; background: #142336; font-size: 13px; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.tournament-registration-editor .tournament-check-pill:has(input:checked) { border-color: var(--accent); background: #234769; }
.tournament-registration-editor .tournament-check-pill input[type="checkbox"] { box-sizing: border-box; flex: 0 0 16px; width: 16px; min-width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--accent); }
.tournament-registration-editor .admin-dialog-actions { margin-top: 14px; }
@media (max-width: 620px) {
  .admin-dialog.tournament-registration-editor { padding: 16px; }
  .tournament-registration-input-row.is-three { grid-template-columns: minmax(0, 1fr) 90px; }
  .tournament-registration-input-row.is-three > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 440px) {
  .tournament-registration-input-row.is-two { grid-template-columns: 1fr; }
}

/* One scroll plane keeps advancement paths aligned with both bracket halves. */
.event-bracket-flow-scroll { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; overscroll-behavior-x: contain; }
.event-bracket-flow-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.event-original-bracket-flow { position: relative; display: inline-block; width: max-content; min-width: 100%; vertical-align: top; }
.event-original-bracket-flow .event-original-bracket { position: relative; z-index: 1; width: max-content; min-width: 100%; max-width: none; }
.event-original-bracket-flow .event-original-bracket-row { box-sizing: border-box; width: max-content; min-width: 100%; max-width: none; gap: 28px; overflow: visible; }
.event-original-bracket-flow .event-original-section-label.is-lower { margin-top: 38px; }
.event-original-bracket-lines { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.event-bracket-path { fill: none; stroke: var(--success); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .9; vector-effect: non-scaling-stroke; }
.event-fantasy-bracket .event-original-bracket-flow .event-original-bracket { width: max-content; max-width: none; }
.event-fantasy-bracket .event-original-bracket-flow .event-original-bracket-row { width: max-content; max-width: none; gap: 28px; overflow: visible; }
@media (max-width: 760px) {
  .event-original-bracket-flow .event-original-bracket-row,
  .event-fantasy-bracket .event-original-bracket-flow .event-original-bracket-row { gap: 24px; }
}

/* Reading comfort: readable typography with the existing layered backgrounds.
   Keep victory, elimination and prediction states above intact. */
.event-hero-complement-icons img, .event-stats-hero img { border-color: var(--line-soft); }
.event-stats-table tbody tr:hover, .event-stats-table tbody tr:hover td:first-child,
.friendly-table tbody tr:hover, .match-row:hover { background: var(--surface-hover); }
.friendly-table, .event-stats-table, .event-standings-table,
.event-registration-table, .tournament-admin-table { font-size: 15px; line-height: 1.65; }
.friendly-table th, .event-stats-table th, .event-standings-table th,
.event-registration-table th, .tournament-admin-table thead th { font-size: 14px; }
.friendly-table th { color: var(--muted); }
.friendly-table td, .event-stats-table td, .event-standings-table td,
.event-registration-table td { padding-top: 12px; padding-bottom: 12px; border-color: var(--line-soft); }
.friendly-player-button strong { font-size: 16px; font-weight: 600; }
.friendly-player-button small, .event-stats-player-identity.friendly-player-button small,
.event-stats-rate small, .event-stats-top-heroes small { font-size: 13px; color: var(--muted); }
.event-detail-tab, .friendly-tab, .friendly-profile-tabs button { font-size: 16px; }
.event-section-heading p, .card-heading p, .friendly-panel-heading p,
.event-rule-row span, .event-next-match-meta, .event-next-match-footer,
.event-stats-count, .event-registration-summary { font-size: 14px; color: var(--muted); }
.event-section-heading .eyebrow { font-size: 13px; letter-spacing: 1px; }
.event-rule-row strong { font-size: 15px; line-height: 1.7; color: var(--text); }
.event-schedule-list { gap: 9px; }
.event-match-card { padding-top: 10px; padding-bottom: 10px; }
.event-match-team, .event-match-card.is-compact .event-match-team,
.event-schedule-panel .event-match-team, .match-team { font-size: 15px; }
.event-match-card-top, .event-match-card-meta, .event-match-status,
.event-schedule-panel .event-match-card-top, .event-schedule-panel .event-match-card-meta,
.event-schedule-panel .event-match-status, .match-date small { font-size: 13px; }
.event-original-bracket-team, .event-fantasy-bracket .event-original-bracket-team { font-size: 15px; line-height: 1.5; }
.event-fantasy-bracket .event-original-bracket-team strong { font-size: 15px; }
.event-original-bracket-label, .event-fantasy-legend-note { font-size: 13px; }
.event-player-chip { font-size: 14px; }
.event-player-chip b { font-size: 12px; }
.friendly-profile-summary p, .friendly-profile-metric > span,
.friendly-profile-balance small, .friendly-profile-panel h3 > span,
.friendly-profile-panel h3 small { font-size: 13px; color: var(--muted); }
.friendly-profile-panel h3 { font-size: 15px; }
.friendly-profile-hero-row { font-size: 13px; }
.friendly-profile-hero-rank, .friendly-rank { color: var(--muted); }
.tournament-registration-identity strong { font-size: 15px; }
.tournament-registration-identity small, .tournament-matchup-phase { font-size: 13px; }
@media (max-width: 760px) {
  .event-match-card-meta { flex-wrap: wrap; }
  .event-match-card-top { flex-wrap: wrap; }
  .event-next-match-teams strong { font-size: 15px; }
  .event-hero-complement h3 { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .feature-card, .community-option, .event-series-button { transition: none; }
}

[data-reading-name] { cursor: help; }
[data-reading-name]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.reading-name-tip { position: fixed; inset: auto; z-index: 10000; width: max-content; max-width: min(300px, calc(100vw - 24px)); margin: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-raised); color: var(--text); box-shadow: 0 4px 16px #0005; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; pointer-events: none; }
.reading-name-tip::backdrop { background: transparent; pointer-events: none; }
.friendly-dialog.reading-has-overflow { padding-bottom: 32px; }
.reading-scroll-hint { position: fixed; z-index: 5; transform: translateX(-50%); padding: 3px 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-raised); color: var(--muted); box-shadow: 0 2px 8px #0003; font-size: 13px; line-height: 1.6; white-space: nowrap; pointer-events: none; }

/* Player profile: readable overview, history and ledger in both shared drawers. */
.friendly-profile-summary h3 { font-size: 20px; }
.friendly-profile-summary p, .friendly-profile-metric > span,
.friendly-profile-balance small, .friendly-profile-panel h3 > span,
.friendly-profile-panel h3 small, .friendly-profile-list-heading,
.friendly-profile-list-heading strong small { font-size: 14px; line-height: 1.6; }
.friendly-profile-metric strong { font-size: 24px; }
.friendly-profile-panel h3, .friendly-profile-list-heading h3 { font-size: 17px; }
.friendly-profile-hero-row { grid-template-columns: 24px 72px minmax(0, 1fr); gap: 8px; padding: 10px; font-size: 15px; line-height: 1.6; }
.friendly-profile-hero-row img, .friendly-profile-hero-placeholder { width: 72px; height: 42px; }
.friendly-profile-hero-placeholder { display: grid; place-items: center; border-radius: 5px; background: var(--panel-raised); color: var(--muted); }
.friendly-profile-hero-stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 10px; font-size: 14px; font-variant-numeric: tabular-nums; }
.friendly-profile-hero-stats > * { white-space: nowrap; }
.friendly-profile-relations { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.friendly-relation-row { grid-template-columns: 22px minmax(0, 1fr) auto 55px; min-height: 44px; gap: 10px; padding: 9px 10px; font-size: 15px; line-height: 1.6; }
.friendly-profile-match-row { padding: 12px 10px; }
.friendly-profile-match-copy strong { font-size: 16px; }
.friendly-profile-match-copy small { font-size: 14px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
.friendly-profile-match-result { width: 28px; height: 28px; font-size: 14px; }
.friendly-profile-ledger .friendly-detail-row { grid-template-columns: minmax(0, 1fr) auto minmax(55px, auto); padding: 12px 10px; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.friendly-profile-panel .friendly-detail-empty { font-size: 14px; }
@media (max-width: 600px) {
  .friendly-profile-hero-row { grid-template-columns: 22px 72px minmax(0, 1fr); gap: 6px 8px; }
  .friendly-profile-hero-stats { grid-column: 3; }
  .friendly-profile-metric { padding: 10px 8px; }
  .friendly-profile-metric strong { font-size: 20px; }
  .friendly-profile-ledger .friendly-detail-row { grid-template-columns: minmax(0, 1fr) auto; }
  .friendly-profile-ledger .friendly-detail-row > :nth-child(2) { grid-column: 1; grid-row: 2; color: var(--muted); font-size: 14px; }
  .friendly-profile-ledger .friendly-detail-row > :last-child { grid-column: 2; grid-row: 1 / 3; }
}

/* Site-wide reading scale. Keep chart labels, compact gold tooltips, map markers,
   icon glyphs and fixed bracket geometry independent of the text scale. */
.nav-item, .event-detail-tab, .friendly-tab, .friendly-profile-tabs button,
.admin-tabs button { font-size: var(--font-navigation); }
.breadcrumb, .account-link, .utility-link, .text-link, .btn,
.page-heading p, .hero-description, .hero-meta, .hero-meta strong,
.account-quick-link, .my-identity p, .my-row p, .my-balance p,
.my-welcome p, .my-note, .admin-context p, .admin-cache-card p,
.event-rule-row strong, .event-fantasy-notice, .event-fantasy-login,
.event-fantasy-leader-row, .event-fantasy-player-board-name strong,
.event-fantasy-player-board-row > em { font-size: var(--font-reading); }
.friendly-table, .event-stats-table, .event-standings-table,
.event-registration-table, .tournament-admin-table, .admin-cache-table,
.standings-table td { font-size: var(--font-reading); }
.friendly-table th, .event-stats-table th, .event-standings-table th,
.event-registration-table th, .tournament-admin-table thead th,
.admin-cache-table th, .standings-table th { font-size: var(--font-secondary); }
.friendly-player-button strong, .tournament-registration-identity strong { font-size: var(--font-navigation); }
.event-match-team, .event-match-card.is-compact .event-match-team,
.event-schedule-panel .event-match-team, .match-team, .event-next-match-teams strong,
.event-original-bracket-team, .event-fantasy-bracket .event-original-bracket-team,
.event-fantasy-bracket .event-original-bracket-team strong { font-size: var(--font-reading); }
.card-heading p, .event-section-heading p, .friendly-panel-heading p,
.tournament-panel-heading p, .event-rule-row span, .event-stats-count,
.event-registration-summary, .event-next-match-meta, .event-next-match-footer,
.event-player-chip, .event-squad > strong, .event-fantasy-rules strong,
.event-fantasy-rules span, .event-fantasy-selects label, .event-fantasy-submit,
.event-fantasy-leader-row strong, .event-fantasy-legend,
.friendly-metric-label, .friendly-score-note p, .friendly-match-title,
.tournament-admin-hint, .tournament-club-section-heading p,
.tournament-squad-title span, .tournament-lineup-title,
.admin-league-form > label, .admin-cache-search label, .admin-reward-info p,
.admin-task-match { font-size: var(--font-secondary); }
.friendly-player-button small, .event-stats-player-identity.friendly-player-button small,
.event-stats-rate small, .event-stats-top-heroes small,
.event-match-card-top, .event-match-card-meta, .event-match-status,
.event-schedule-panel .event-match-card-top, .event-schedule-panel .event-match-card-meta,
.event-schedule-panel .event-match-status, .event-schedule-panel .event-match-bo,
.match-date, .match-date small, .friendly-match-title span, .friendly-match-meta,
.friendly-match-outcome, .friendly-metric small, .friendly-score-state,
.event-original-bracket-label, .event-original-bracket-header,
.event-original-section-label, .event-fantasy-legend-note,
.event-fantasy-player-board-name small, .event-fantasy-subheading span,
.event-club-owner, .event-club-label, .event-club-group-heading span,
.event-player-chip b, .event-empty-chip, .event-empty,
.event-registration-table td:first-child small, .tournament-registration-identity small,
.tournament-registration-tag, .tournament-matchup-phase, .tournament-club-picker small,
.account-card .account-balance-note, .account-quick-link span,
.account-balance small, .feature-copy small, .notice-card p, .standings-footer,
.admin-metric small, .admin-task-row small, .admin-failure-row small,
.admin-task-state, .admin-task-error, .admin-task-list-heading label,
.admin-cache-table td small, .admin-cache-pagination, .admin-reward-meta,
.tournament-fantasy-summary span, .footer { font-size: var(--font-caption); }
.friendly-profile-hero-row, .friendly-profile-hero-stats, .friendly-relation-row,
.friendly-profile-ledger .friendly-detail-row, .friendly-profile-match-copy strong { font-size: var(--font-reading); }
.friendly-profile-summary p, .friendly-profile-metric > span,
.friendly-profile-panel h3 > span, .friendly-profile-panel h3 small,
.friendly-profile-list-heading, .friendly-profile-list-heading strong small,
.friendly-profile-match-copy small { font-size: var(--font-secondary); }
.friendly-ward-controls > label:first-child, .friendly-sentry-toggle,
.friendly-analysis-empty, .friendly-ward-empty { font-size: var(--font-caption); }
.friendly-ward-controls { flex-wrap: wrap; }
.friendly-ward-controls select { min-height: 34px; font-size: var(--font-caption); }
.admin-cache-actions .btn, .admin-cache-pagination .btn, .admin-users-action .btn,
.admin-reward-actions .btn, .admin-task-actions .btn, .admin-task-match .btn,
.admin-failure-row .btn, .admin-cache-search .btn, .tournament-admin-row-actions .btn,
.tournament-text-button { font-size: var(--font-caption); }
.admin-cache-search input, .admin-task-list-heading select,
.event-fantasy-selects select { font-size: var(--font-reading); }
@media (max-width: 760px) {
  .mobile-nav a, .mobile-nav.has-admin-nav a { min-width: 0; font-size: 13px; }
  .account-link { font-size: var(--font-secondary); }
  .account-logout { padding-inline: 8px; }
  .friendly-profile-tabs button { padding-inline: 10px; }
  .event-fantasy-submit { flex-wrap: wrap; }
}

/* One frame shape across portraits; keep each image's existing aspect ratio. */
.account-avatar, .my-avatar, .friendly-avatar, .friendly-avatar.large,
.team-crest, .event-team-crest,
.event-stats-hero img, .event-stats-top-heroes img,
.event-hero-complement-icons img, .friendly-hero img,
.friendly-profile-hero-row img, .friendly-profile-hero-placeholder,
.friendly-profile-match-row img, .friendly-match-hero,
.friendly-match-hero-fallback, .friendly-gold-hero img, .friendly-gold-hero i {
  border-radius: var(--portrait-radius);
}
.account-avatar, .my-avatar, .friendly-avatar, .friendly-avatar.large { overflow: hidden; }
.account-avatar img, .my-avatar img, .friendly-avatar img { border-radius: inherit; }