/* Zero Lives Left — "Night Ops" design system. Square corners everywhere. */
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: local('Barlow Regular'), local('Barlow-Regular'), url('/assets/fonts/Barlow-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: local('Barlow Medium'), local('Barlow-Medium'), url('/assets/fonts/Barlow-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: local('Barlow SemiBold'), local('Barlow-SemiBold'), url('/assets/fonts/Barlow-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: local('Barlow Condensed Bold'), local('BarlowCondensed-Bold'), url('/assets/fonts/BarlowCondensed-Bold.ttf') format('truetype'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400 500; font-display: swap; src: local('JetBrains Mono'), url('/assets/fonts/JetBrainsMono-Regular.woff') format('woff'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-display: swap; src: url('/assets/fonts/JetBrainsMono-Bold.woff') format('woff'); }

:root {
  --bg: #0c0a10; --bg-alt: #0f0c15; --bg-foot: #09080c;
  --panel: #15121b; --panel-2: #1c1824;
  --line: #2b2535; --line-soft: #221d2a; --line-hover: #3b3347; --line-accent: #3b2f55;
  --text: #f2eef7; --text-2: #c9c1d6; --muted: #a59cb3; --faint: #6f6680;
  --accent: #9d6bff; --accent-ink: #0c0a10; --link: #c4a8ff;
  --gold: #e8b04a; --green: #3ddc84; --red: #ff4d5e; --blue: #4aa3ff; --pink: #ff6fb5; --twitch: #9146ff; --discord: #5865f2;
  --alert-bg: #1d1630; --alert-line: #5b3fa8;
  --f-head: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --f-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --wrap: 1240px;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.5 var(--f-body); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
a { color: var(--link); text-decoration: none; }
a:hover { color: #fff; }
img { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 700; text-transform: uppercase; margin: 0; line-height: 1.05; letter-spacing: 0.02em; }
p { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
code { font-family: var(--f-mono); font-size: 0.9em; background: var(--panel-2); padding: 1px 5px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--accent-ink); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--f-mono); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.label { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.accent { color: var(--accent); }
.gold { color: var(--gold); }
.green { color: var(--green); }
.red { color: var(--red); }
.small { font-size: 14px; }
.tiny { font-size: 12px; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: var(--gap, 16px); }
.row { display: flex; flex-wrap: wrap; gap: var(--gap, 12px); align-items: center; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.row.top { align-items: flex-start; }
.row.base { align-items: baseline; }
.grow { flex: 1 1 auto; min-width: 0; }
.grid { display: grid; gap: var(--gap, 18px); grid-template-columns: repeat(auto-fill, minmax(var(--min, 260px), 1fr)); }
.grid.fit { grid-template-columns: repeat(auto-fit, minmax(var(--min, 260px), 1fr)); }

/* ---------------------------------------------------------------- header */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 30; }
.site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); flex-shrink: 0; }
.brand img { width: 46px; height: 40px; object-fit: contain; }
.brand span { font: 700 21px/1 var(--f-head); letter-spacing: 0.06em; text-transform: uppercase; }
.main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; flex: 1 1 auto; }
.main-nav a { padding: 10px 9px; color: var(--text-2); font-weight: 600; font-size: 15px; white-space: nowrap; }
.main-nav a:hover { color: var(--text); }
.main-nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); color: var(--text); padding: 9px 11px; cursor: pointer; }
.bell { position: relative; display: inline-flex; padding: 9px; border: 1px solid var(--line); color: var(--text-2); }
.bell:hover { color: var(--text); border-color: var(--line-hover); }
.bell .count { position: absolute; top: -7px; right: -7px; background: var(--red); color: var(--accent-ink); font: 500 11px/1 var(--f-mono); padding: 3px 5px; }
.me { background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border: 1px solid var(--line); color: var(--text); font-weight: 600; font-size: 14px; }
.me img { width: 30px; height: 30px; }
.me:hover { border-color: var(--line-hover); color: var(--text); }
.menu { position: relative; }
.menu-panel { display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--panel); border: 1px solid var(--line); padding: 6px 0; z-index: 40; }
.menu.open .menu-panel { display: block; }
.menu-panel a, .menu-panel button { display: block; width: 100%; text-align: left; padding: 10px 16px; color: var(--text-2); font: 600 14px var(--f-body); background: none; border: 0; cursor: pointer; }
.menu-panel a:hover, .menu-panel button:hover { background: var(--panel-2); color: var(--text); }
.menu-panel hr { margin: 6px 0; }

@media (max-width: 1180px) {
  .nav-toggle { display: inline-flex; }
  .main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--line); flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 4px 16px 20px; max-height: calc(100vh - 70px); overflow-y: auto; box-shadow: 0 24px 40px rgba(0,0,0,.5); z-index: 60; }
  .main-nav.open { display: flex; }
  .main-nav a, .nav-more .menu-panel a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 4px; border-bottom: 1px solid var(--line-soft); font: 600 16px/1.4 var(--f-body); text-align: left; }
  .main-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); padding-left: 12px; }
  .main-nav .nav-more, .main-nav .nav-more .menu-panel { width: 100%; }
  .site-header .wrap { justify-content: space-between; }
  .brand span { font-size: 18px; }
}
@media (max-width: 520px) {
  .wrap { padding: 0 16px; }
  .brand span { display: none; }
  .header-actions .btn-donate { display: none; }
}

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; min-height: 42px; border: 1px solid var(--line); background: transparent; color: var(--text); font: 600 14px/1.2 var(--f-body); cursor: pointer; text-align: center; white-space: nowrap; }
.btn:hover { border-color: var(--line-hover); color: var(--text); background: var(--panel-2); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #b089ff; border-color: #b089ff; color: var(--accent-ink); }
.btn-outline { border-color: var(--accent); }
.btn-discord { background: var(--discord); border-color: var(--discord); color: #fff; }
.btn-discord:hover { background: #4752c4; border-color: #4752c4; color: #fff; }
.btn-danger { border-color: var(--red); color: var(--red); }
.btn-danger:hover { background: var(--red); color: var(--accent-ink); }
.btn-big { padding: 15px 24px; font: 700 18px/1 var(--f-head); letter-spacing: 0.05em; text-transform: uppercase; }
.btn-sm { padding: 7px 11px; min-height: 34px; font-size: 13px; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn.disabled { opacity: 0.5; pointer-events: none; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--link); font: inherit; cursor: pointer; }
.linkbtn:hover { color: #fff; }
form.inline { display: inline; }

/* ---------------------------------------------------------------- chips / tags */
.chip { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); border: 1px solid var(--line); padding: 6px 10px; }
.chip.accent { color: var(--link); border-color: var(--line-accent); }
.tag { display: inline-flex; align-items: center; border: 1px solid var(--line); padding: 4px 10px; font-size: 13px; color: var(--text-2); }
.tag.game { border-color: var(--line-accent); color: var(--link); }
.badge { display: inline-block; font: 500 11px/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; background: var(--line); color: var(--text); }
.badge.green { background: var(--green); color: var(--accent-ink); }
.badge.gold { background: var(--gold); color: var(--accent-ink); }
.badge.red { background: var(--red); color: var(--accent-ink); }
.badge.blue { background: var(--blue); color: var(--accent-ink); }
.badge.accent { background: var(--accent); color: var(--accent-ink); }
.role-badge { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1.2 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; color: var(--accent-ink); }
.dot { display: inline-block; width: 10px; height: 10px; background: var(--green); }

/* ---------------------------------------------------------------- panels / sections */
.panel { background: var(--panel); border: 1px solid var(--line); }
.panel.pad { padding: 24px; }
.panel.pad-s { padding: 18px; }
.panel-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.panel-head h2, .panel-head h3 { font-size: 22px; }
.panel-body { padding: 22px; }
.panel.top-accent { border-top: 3px solid var(--tc, var(--accent)); }
.panel.left-gold { --tc: var(--gold); }
.panel.dashed { border-style: dashed; border-color: var(--line-hover); }
a.panel { color: var(--text); display: block; }
a.panel:hover { border-color: var(--line-hover); color: var(--text); }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.section-title h2 { font-size: 30px; letter-spacing: 0.03em; }
.section-title a { font-weight: 600; font-size: 14px; }
.band { border-top: 1px solid var(--line); }
.band.alt { background: var(--bg-alt); }
.band > .wrap { padding-top: 56px; padding-bottom: 56px; }
.page { padding-top: 44px; padding-bottom: 64px; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 28px; }
.page-head h1 { font-size: 56px; line-height: 1; }
.page-head p { color: var(--muted); margin-top: 8px; max-width: 680px; }
.cols { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.cols > .main { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.cols > .side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 640px) { .page-head h1 { font-size: 40px; } .section-title h2 { font-size: 26px; } }

.empty { padding: 16px 18px; border: 1px dashed var(--line-hover); border-left: 3px solid var(--line-hover); background: var(--panel); color: var(--text-2); }
.notice { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 16px 20px; background: var(--alert-bg); border: 1px solid var(--alert-line); }
.notice svg { flex-shrink: 0; color: var(--link); }
.notice .grow { flex: 1 1 280px; }
.notice.warn { background: #241c0f; border-color: #7a5a1e; }
.notice.danger { background: #2a1015; border-color: #8a2a36; }
.notice.ok { background: #0f2219; border-color: #1f6b45; }
.flashes { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.flash { padding: 12px 16px; border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--panel); }
.flash.success { border-left-color: var(--green); }
.flash.warning { border-left-color: var(--gold); }
.flash.danger, .flash.error { border-left-color: var(--red); }

/* ---------------------------------------------------------------- stats tiles + bars */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.tile { background: var(--panel); border: 1px solid var(--line); padding: 18px; }
.tile .num { font: 700 38px/1.1 var(--f-head); }
.tile .num small { font-size: 18px; color: var(--muted); }
.statbar { border-top: 1px solid var(--line); }
.statbar .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.statbar .cell { padding: 20px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.statbar .cell:first-child { border-left: 0; padding-left: 0; }
.statbar .val { font: 700 32px/1.2 var(--f-head); }
.statbar .val.sm { font-size: 22px; line-height: 1.35; }
@media (max-width: 700px) { .statbar .cell { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-soft); } }
.bar { height: 8px; background: var(--line); }
.bar > span { display: block; height: 100%; background: var(--accent); }
.bar.thick { height: 10px; }
.bar.gold > span { background: var(--gold); }
.bar.blue > span { background: var(--blue); }
.bar.green > span { background: var(--green); }

/* ---------------------------------------------------------------- hero */
.hero { border-bottom: 1px solid var(--line); background: var(--bg-alt); position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(800px 400px at 80% 40%, rgba(157, 107, 255, 0.10), transparent 70%); pointer-events: none; }
.hero > .wrap { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 48px; padding-top: 72px; padding-bottom: 56px; }
.hero .copy { flex: 999 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.hero h1 { font-size: clamp(54px, 8vw, 88px); line-height: 0.92; letter-spacing: 0.01em; }
.hero h1 span { color: var(--accent); }
.hero .lead { max-width: 560px; font-size: 18px; color: var(--text-2); }
.hero .art { flex: 1 1 320px; display: flex; justify-content: center; }
.hero .art img { width: 100%; max-width: 380px; height: auto; }

/* ---------------------------------------------------------------- cards */
.news-feature { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.news-feature:hover { border-color: var(--line-hover); color: var(--text); }
.cover { min-height: 240px; background: repeating-linear-gradient(135deg, #1c1824 0 14px, #18141f 14px 28px) center/cover; display: flex; align-items: center; justify-content: center; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-feature .body { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.news-feature h3 { font-size: 32px; }
.card { background: var(--panel); border: 1px solid var(--line); padding: 22px; display: flex; flex-direction: column; gap: 10px; color: var(--text); }
a.card:hover { border-color: var(--line-hover); color: var(--text); }
.card h3 { font-size: 24px; line-height: 1.1; }
.card .kicker { font: 500 12px/1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--link); }
.meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font: 500 12px/1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.game-card { border-top: 3px solid var(--accent); }
.game-card .name { font: 700 28px/1.05 var(--f-head); text-transform: uppercase; }

.event-row { display: flex; align-items: center; gap: 18px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); }
.datebox { width: 64px; flex-shrink: 0; text-align: center; border: 1px solid var(--line-accent); padding: 6px 0; }
.datebox .d { font: 700 28px/1 var(--f-head); }
.datebox .m { font: 500 11px/1.4 var(--f-mono); color: var(--link); text-transform: uppercase; }
.event-row .title { font-weight: 600; font-size: 17px; color: var(--text); }

.person { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); color: var(--text); }
a.person:hover { border-color: var(--line-hover); color: var(--text); }
.person img, .avatar { width: 44px; height: 44px; flex-shrink: 0; background: var(--line); object-fit: cover; }
.person .who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.person .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person .rank { font: 500 11px/1.4 var(--f-mono); color: var(--gold); text-transform: uppercase; }
.person .sub { font-size: 12px; color: var(--muted); }
.avatar.sm { width: 32px; height: 32px; }
.avatar.lg { width: 112px; height: 112px; border: 2px solid var(--accent); }
.group-head { display: flex; align-items: center; gap: 14px; }
.group-head .swatch { width: 4px; height: 26px; background: var(--accent); }
.group-head h2 { font-size: 26px; letter-spacing: 0.03em; }
.group-head .rule { flex: 1 1 auto; height: 1px; background: var(--line); }

.steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.steps li { display: flex; gap: 12px; }
.steps li > span:first-child { font-family: var(--f-mono); color: var(--link); }

.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { padding: 9px 14px; min-height: 40px; cursor: pointer; font: 600 14px var(--f-body); border: 1px solid var(--line); background: var(--panel); color: var(--text-2); display: inline-flex; align-items: center; }
.pill:hover { color: var(--text); border-color: var(--line-hover); }
.pill[aria-pressed="true"], .pill.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.list-rows > * { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); align-items: center; }
.list-rows > * > :first-child:not(.grow) { flex-shrink: 0; }
.list-rows > * > * { min-width: 0; }
.list-rows > * > .mono:first-child { align-self: flex-start; padding-top: 1px; }
.list-rows > *:last-child { border-bottom: 0; }
.kv { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 8px 16px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-word; }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 15px; }
table.t th { font: 500 11px/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 12px; white-space: nowrap; }
table.t td { padding: 12px; border-top: 1px solid var(--line); vertical-align: middle; }
table.t th:first-child, table.t td:first-child { padding-left: 20px; }
table.t th:last-child, table.t td:last-child { padding-right: 20px; }
table.t tr:hover td { background: rgba(255, 255, 255, 0.015); }
table.t .num { font-family: var(--f-mono); text-align: right; }
table.t.compact td { padding: 8px 10px; }

/* ---------------------------------------------------------------- forms */
.form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .field > .lbl { font-weight: 600; font-size: 14px; }
.field .help { font-size: 13px; color: var(--muted); }
.fields-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
input[type=text], input[type=url], input[type=number], input[type=email], input[type=search], input[type=datetime-local], input[type=date], input[type=month], input[type=time], input[type=week], input[type=tel], input[type=password], input[type=color], select, textarea {
  width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); padding: 11px 12px; font: 400 15px/1.4 var(--f-body); min-height: 44px;
}
input[type=color] { padding: 4px; width: 64px; }
textarea { min-height: 120px; resize: vertical; }
textarea.code { font-family: var(--f-mono); font-size: 13px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 15px; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); flex-shrink: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks .check { border: 1px solid var(--line); padding: 9px 12px; align-items: center; }
.checks .check:has(input:checked) { border-color: var(--accent); background: var(--alert-bg); }
.checks .check input { margin: 0; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.switch { position: relative; width: 48px; height: 26px; padding: 0; border: 0; cursor: pointer; background: var(--line-hover); flex-shrink: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: var(--text); transition: left 0.15s; }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { left: 25px; }
fieldset { border: 1px solid var(--line); padding: 16px 18px; margin: 0; }
legend { padding: 0 6px; font-weight: 600; }

/* ---------------------------------------------------------------- prose (markdown) */
.prose { color: var(--text-2); font-size: 17px; line-height: 1.65; max-width: 760px; }
.prose > * + * { margin-top: 1em; }
.prose h3, .prose h4, .prose h5 { color: var(--text); margin-top: 1.6em; }
.prose h3 { font-size: 30px; } .prose h4 { font-size: 24px; } .prose h5 { font-size: 20px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.35em; }
.prose blockquote { margin: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent); color: var(--text); }
.prose strong { color: var(--text); }
.prose img { display: block; margin: 1em 0; }

/* ---------------------------------------------------------------- charts */
.chart { margin: 0; }
.chart figcaption { font: 500 12px/1.3 var(--f-mono); text-transform: uppercase; color: var(--text-2); margin-bottom: 8px; display: flex; justify-content: space-between; gap: 10px; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 96px; border-bottom: 1px solid var(--line-hover); position: relative; }
.bars > div { flex: 1 1 0; min-width: 2px; background: var(--accent); position: relative; }
.bars.blue > div { background: var(--blue); }
.bars > div.zero { background: transparent; }
.bars > div:hover { filter: brightness(1.25); }
.chart .axis { display: flex; justify-content: space-between; font: 500 11px/1.3 var(--f-mono); color: var(--muted); margin-top: 6px; }
.tip { position: fixed; z-index: 99; pointer-events: none; background: var(--panel-2); border: 1px solid var(--line-hover); padding: 6px 9px; font: 500 12px/1.3 var(--f-mono); color: var(--text); white-space: nowrap; }

/* ---------------------------------------------------------------- rank insignia */
.insignia { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rank-card { display: flex; gap: 16px; align-items: center; }
/* Ranks ladder: two even columns of rows, read down then across, so nothing is left dangling */
.ladder { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(11, auto); }
.ladder .step { display: grid; grid-template-columns: 40px 1fr auto 84px; align-items: center; gap: 14px; padding: 10px 22px; min-height: 54px; border-bottom: 1px solid var(--line); }
.ladder .step:nth-child(11n) { border-bottom: 0; }
.ladder .step:nth-child(n+12) { border-left: 1px solid var(--line); }
.ladder .step .ins { display: flex; justify-content: center; }
.ladder .step .nm { font-weight: 600; }
.ladder .step .ct { text-align: right; }
.ladder .step.reserved .nm { color: var(--text-2); }
.ladder .step.current { background: rgba(240,180,41,.08); box-shadow: inset 3px 0 0 var(--gold); }
@media (max-width: 860px) { .ladder { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; } .ladder .step { grid-template-columns: 34px 1fr auto; row-gap: 2px; padding: 10px 16px; } .ladder .step .ins { grid-row: span 2; } .ladder .step .xp { grid-column: 2; } .ladder .step .ct { grid-column: 3; grid-row: 1 / span 2; } .ladder .step:nth-child(11n) { border-bottom: 1px solid var(--line); } .ladder .step:nth-child(n+12) { border-left: 0; } }
/* Home page rank strip: six even cards (6 / 3 / 2 across) */
.rank-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.rank-strip .step { padding: 18px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.rank-strip .step.reserved { border-style: dashed; border-color: var(--line-hover); }
@media (max-width: 1000px) { .rank-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .rank-strip { grid-template-columns: repeat(2, 1fr); } }
/* A sidebar that's shorter than the screen follows you down a long page (site.js adds .stick) */
.cols > .side.stick { position: sticky; top: 92px; }
/* Two panels side by side, always the same width and height */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.pair > .panel { height: 100%; margin: 0; }
@media (max-width: 860px) { .pair { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .top10 { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; } .top10 > div:nth-child(5n) { border-bottom: 1px solid var(--line); } }
.top10 { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto); column-gap: 24px; }
.top10 > div { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.top10 > div:nth-child(5n) { border-bottom: 0; }
.top10 > div > .mono.muted { width: 18px; }
.top10 a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- calendar */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.cal > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 104px; padding: 6px; font-size: 13px; background: var(--panel); }
.cal > .dow { min-height: 0; padding: 8px 6px; font: 500 11px var(--f-mono); text-transform: uppercase; color: var(--muted); background: var(--bg-alt); }
.cal > .out { background: var(--bg); color: var(--faint); }
.cal > .today { box-shadow: inset 0 0 0 1px var(--accent); }
.cal .n { font: 500 12px var(--f-mono); color: var(--muted); }
.cal a.ev { display: block; margin-top: 4px; padding: 3px 5px; background: var(--alert-bg); border-left: 2px solid var(--accent); color: var(--text); font-size: 12px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) { .cal > div { min-height: 64px; } .cal a.ev { font-size: 0; height: 6px; padding: 0; } }

/* ---------------------------------------------------------------- staff layout */
.staff { display: flex; flex-wrap: wrap; min-height: calc(100vh - 73px); }
.staff-nav { flex: 0 0 248px; background: var(--bg-alt); border-right: 1px solid var(--line); padding: 20px 0; display: flex; flex-direction: column; gap: 2px; }
.staff-nav .head { font: 500 11px var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); padding: 16px 22px 6px; }
.staff-nav a { padding: 10px 22px; color: var(--text-2); font-weight: 600; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.staff-nav a:hover { color: var(--text); background: var(--panel); }
.staff-nav a[aria-current="page"] { color: var(--text); background: var(--panel-2); box-shadow: inset 3px 0 0 var(--accent); }
.staff-main { flex: 999 1 640px; min-width: 0; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.staff-main h1 { font-size: 44px; line-height: 1; }
@media (max-width: 860px) {
  .staff-nav { flex: 1 1 100%; flex-direction: row; overflow-x: auto; padding: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .staff-nav .head { display: none; }
  .staff-nav a { white-space: nowrap; padding: 14px 16px; }
  .staff-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); }
  .staff-main { padding: 20px 16px; }
}

/* ---------------------------------------------------------------- footer */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-foot); margin-top: auto; }
.site-footer .wrap { padding-top: 40px; padding-bottom: 40px; display: flex; flex-wrap: wrap; gap: 24px 32px; justify-content: space-between; align-items: center; }
.site-footer img { width: 40px; height: 35px; object-fit: contain; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; }

/* ---------------------------------------------------------------- misc */
.offline { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; background: radial-gradient(700px 400px at 50% 30%, rgba(157, 107, 255, 0.12), transparent 70%), var(--bg-alt); }
.offline .box { max-width: 560px; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.offline img { width: 220px; }
.offline h1 { font-size: 56px; }
.offline h1 span { color: var(--accent); }
.error-page { text-align: center; padding: 80px 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.error-page img { width: 160px; opacity: 0.85; }
.error-page h1 { font-size: 64px; }
.live-dot { display: inline-block; width: 8px; height: 8px; background: var(--red); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--line); }
.tabs a { padding: 12px 16px; color: var(--text-2); font-weight: 600; }
.tabs a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.mask { font-family: var(--f-mono); }
details > summary { cursor: pointer; }
.swatch-inline { display: inline-block; width: 12px; height: 12px; vertical-align: middle; margin-right: 6px; }
.donate-amounts { display: flex; flex-wrap: wrap; gap: 8px; }
.donate-amounts label { border: 1px solid var(--line); padding: 10px 16px; cursor: pointer; font-weight: 600; }
.donate-amounts label:has(input:checked) { border-color: var(--accent); background: var(--alert-bg); }
.donate-amounts input { position: absolute; opacity: 0; pointer-events: none; }
.pos { font: 700 22px/1 var(--f-head); width: 34px; text-align: center; }
.pos.p1 { color: var(--gold); } .pos.p2 { color: #d5d3dc; } .pos.p3 { color: #cd8b52; }
.team-swatch { display: inline-block; width: 4px; height: 18px; vertical-align: middle; margin-right: 8px; }
.flag { width: 24px; height: 16px; object-fit: cover; vertical-align: middle; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
.circuit-svg { width: 100%; max-width: 520px; height: auto; display: block; }
.circuit-svg path.track { fill: none; stroke: var(--text-2); stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; }
.circuit-svg circle.car { stroke: var(--bg); stroke-width: 1.5; }

/* ---------------------------------------------------------------- live timing */
.lt-head { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.lt-stats { display: flex; flex-wrap: wrap; gap: 24px; }
.lt-stats b { display: block; font: 700 22px/1.2 var(--f-head); }
.lt-status { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.lt-status .dot { width: 10px; height: 10px; background: var(--faint); }
.lt-status.is-live { color: var(--red); }
.lt-status.is-live .dot { background: var(--red); animation: pulse 1.6s infinite; }
.lt-banner { margin-top: 12px; padding: 12px; text-align: center; font: 700 22px var(--f-head); letter-spacing: 0.1em; background: var(--gold); color: var(--accent-ink); }
.lt-banner.is-chequered { background: repeating-conic-gradient(#f2eef7 0 25%, #0c0a10 0 50%) 0 0/24px 24px; color: var(--accent-ink); text-shadow: 0 0 6px #fff; }
.lt-table td { padding: 8px 10px; white-space: nowrap; }
.lt-table tr { cursor: pointer; }
.lt-table tr.is-focus td { background: var(--alert-bg); }
.lt-table tr.is-out { opacity: 0.5; }
.lt-table tr.is-pit td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.lt-pos { font: 700 20px var(--f-head); width: 44px; }
.lt-move { font-style: normal; font-size: 10px; margin-left: 4px; }
tr.moved-up .lt-move { color: var(--green); } tr.moved-down .lt-move { color: var(--red); }
.lt-bar span { display: block; width: 4px; height: 22px; }
.lt-name { display: flex; align-items: center; gap: 8px; }
.lt-name img { width: 26px; height: 26px; }
.lt-name span { display: flex; flex-direction: column; line-height: 1.2; }
.lt-name small { font-size: 11px; color: var(--muted); }
.lt-tag { font: 500 10px var(--f-mono); font-style: normal; padding: 2px 5px; background: var(--line); }
.lt-tag--pit { background: var(--gold); color: var(--accent-ink); } .lt-tag--drs { background: var(--green); color: var(--accent-ink); } .lt-tag--pen, .lt-tag--out { background: var(--red); color: var(--accent-ink); }
.lt-int { font-family: var(--f-mono); }
.lt-muted { color: var(--muted); }
.lt-purple { color: var(--accent); font-weight: 600; }
.lt-tyre { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border: 2px solid var(--tc); font: 700 11px var(--f-mono); margin-right: 4px; }
.lt-ers { width: 60px; height: 6px; background: var(--line); } .lt-ers span { display: block; height: 100%; background: var(--gold); }
.lt-ring { width: 100%; height: auto; display: block; }
.lt-ring .lt-outline { fill: none; stroke: var(--line); stroke-width: 18; stroke-linejoin: round; }
.lt-ring .lt-trackpath { fill: none; stroke: var(--text-2); stroke-width: 6; stroke-linejoin: round; }
.lt-ring .lt-sf { fill: var(--accent); }
.lt-ring-track { fill: none; stroke: var(--line-hover); stroke-width: 8; }
.lt-ring-start { stroke: var(--accent); stroke-width: 3; }
.lt-ring-car { cursor: pointer; } .lt-ring-car circle { stroke: var(--bg); stroke-width: 2; }
.lt-ring-car text { fill: #0c0a10; font: 700 10px var(--f-mono); text-anchor: middle; pointer-events: none; }
.lt-ring-car.is-focus circle { stroke: #fff; stroke-width: 3; }
.lt-ring-sub { fill: var(--muted); font: 500 12px var(--f-mono); text-anchor: middle; }
.lt-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow: auto; font-size: 14px; }
.lt-feed small { font-family: var(--f-mono); color: var(--muted); }
.lt-gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.lt-gauge { background: var(--bg); border: 1px solid var(--line); padding: 8px; text-align: center; }
.lt-gauge b { display: block; font: 700 24px var(--f-head); } .lt-gauge span { font-size: 11px; color: var(--muted); }
.lt-pedal { display: grid; grid-template-columns: 70px 1fr; gap: 8px; align-items: center; font-size: 12px; margin: 4px 0; }
.lt-pedal div { height: 8px; background: var(--line); } .lt-pedal span { display: block; height: 100%; }
.lt-pedal .thr { background: var(--green); } .lt-pedal .brk { background: var(--red); } .lt-pedal .ers { background: var(--gold); }
.lt-kv { list-style: none; padding: 0; margin: 12px 0 0; font-size: 13px; } .lt-kv li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--line-soft); } .lt-kv span { color: var(--muted); }
@media (max-width: 1100px) { .hide-lg { display: none; } }
@media (max-width: 800px) { .hide-md { display: none; } }
@media (max-width: 560px) { .hide-sm { display: none; } }
@media (max-width: 700px) {
  .hero > .wrap { padding-top: 40px; padding-bottom: 36px; gap: 28px; }
  .hero .art { order: -1; justify-content: flex-start; flex-basis: auto; }
  .hero .art img { max-width: 140px; }
  .me span { display: none; }
  .me { padding: 5px; }
}

/* ---------------------------------------------------------------- news article */
.article-hero { position: relative; border-bottom: 1px solid var(--line); background: radial-gradient(700px 320px at 85% 30%, rgba(157, 107, 255, 0.14), transparent 70%), var(--bg-alt); overflow: hidden; }
.article-hero::after { content: ''; position: absolute; right: -40px; top: 50%; width: 420px; height: 420px; transform: translateY(-50%); background: url('/assets/img/emblem.png') center/contain no-repeat; opacity: 0.07; pointer-events: none; }
.article-hero.has-cover { background: linear-gradient(90deg, rgba(12, 10, 16, 0.96) 0%, rgba(12, 10, 16, 0.85) 55%, rgba(12, 10, 16, 0.55) 100%), var(--cover) center/cover, var(--bg-alt); }
.article-hero.has-cover::after { display: none; }
.article-hero .wrap { position: relative; z-index: 1; padding-top: 48px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 16px; }
.article-hero h1 { font-size: clamp(38px, 6vw, 64px); line-height: 1; max-width: 900px; }
.article-hero .lead { font-size: 19px; color: var(--text-2); max-width: 760px; }
.article-hero .byline { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.article-cover { width: 100%; border: 1px solid var(--line); display: block; }
.article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.article-nav .card { gap: 6px; }
.article-nav .card.right { text-align: right; }
@media (max-width: 640px) { .article-nav { grid-template-columns: 1fr; } .article-nav .card.right { text-align: left; } .article-hero::after { display: none; } }
.prose > :first-child { margin-top: 0; }

/* ---------------------------------------------------------------- game artwork */
.game-card.has-art { padding: 0; gap: 0; overflow: hidden; }
.game-art { display: block; aspect-ratio: 460 / 215; background: linear-gradient(135deg, color-mix(in srgb, var(--c, #9d6bff) 35%, #15121b), #15121b 70%); border-bottom: 1px solid var(--line); overflow: hidden; position: relative; }
.game-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.game-art > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 44px var(--f-head); letter-spacing: 0.04em; text-transform: uppercase; color: rgba(242, 238, 247, 0.85); }
a.game-card:hover .game-art img { transform: scale(1.04); }
.game-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.game-hero.has-art { background: linear-gradient(90deg, rgba(12, 10, 16, 0.95) 0%, rgba(12, 10, 16, 0.8) 50%, rgba(12, 10, 16, 0.45) 100%), var(--art) center/cover, var(--bg-alt); }
.game-hero.has-art::before { display: none; }
.hero .copy > .chip { align-self: flex-start; }

/* ---------------------------------------------------------------- hotlaps */
.hl-hero { border-top: 3px solid #ff4d5e; background: radial-gradient(ellipse at 85% 0%, rgba(255, 77, 94, 0.14), transparent 55%), var(--bg); }
.hl-card { padding: 0; gap: 0; border-top: 3px solid var(--accent); transition: border-color 0.2s; }
.hl-card:hover { border-color: var(--line-accent); border-top-color: #ff4d5e; }
.hl-card.empty-track { opacity: 0.6; border-top-color: var(--line); }
.hl-card.empty-track:hover { opacity: 1; }
.hl-map { display: flex; align-items: center; justify-content: center; height: 132px; padding: 16px; background: #100d15; border-bottom: 1px solid var(--line); }
.hl-map .circuit-svg { width: auto; max-width: 100%; height: 100%; }
.hl-card:hover .hl-map .circuit-svg path.track { stroke: var(--accent); }
.hl-meta { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.hl-meta .name { font: 700 22px/1.1 var(--f-head); text-transform: uppercase; }
.hl-time { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: 0.02em; }
.hl-holders { list-style: none; margin: 0; padding: 0; }
.hl-holders li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.hl-holders li:last-child { border-bottom: 0; }
.hl-holders .pos { font-size: 18px; width: 22px; }
.hl-table td { vertical-align: middle; }
.hl-table tr.me td { background: rgba(157, 107, 255, 0.08); }
.purple { color: #c86bff; font-weight: 700; }
ul.list-rows, ol.list-rows { list-style: none; padding: 0; margin: 0; }

/* ---------------------------------------------------------------- videos */
.vid { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); transition: border-color 0.2s; min-width: 0; }
.vid:hover { border-color: var(--line-accent); }
.vid-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--c, #9d6bff) 30%, #15121b), #0f0c14 70%); }
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s, filter 0.35s; filter: saturate(0.9) brightness(0.88); }
.vid-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(12, 10, 16, 0.75)); pointer-events: none; }
.vid-thumb:hover img { transform: scale(1.035); filter: none; }
.vid-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); background: rgba(12, 10, 16, 0.72); border: 2px solid var(--accent); z-index: 1; transition: background 0.2s, transform 0.2s; }
.vid-play::before { content: ''; position: absolute; left: 25px; top: 19px; border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.vid-thumb:hover .vid-play { background: var(--accent); transform: translate(-50%, -50%) scale(1.06); }
.vid-game { position: absolute; left: 10px; bottom: 10px; z-index: 1; font: 600 11px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(12, 10, 16, 0.8); border-left: 3px solid var(--c, var(--accent)); padding: 6px 8px; }
.vid-star { position: absolute; right: 10px; top: 10px; z-index: 1; color: var(--gold); background: rgba(12, 10, 16, 0.8); padding: 4px 7px; font-size: 13px; }
.vid-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.vid-title { font: 700 18px/1.2 var(--f-head); color: var(--text); text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vid-title:hover { color: var(--link); }
.vid-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; min-width: 0; }
.vid-meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vid-stage { background: #000; border: 1px solid var(--line); }
.vid-stage.vertical { max-width: 420px; margin: 0 auto; width: 100%; }
.vid-stage.vertical .vid-thumb, .vid-stage.vertical .vid-frame { aspect-ratio: 9 / 16; }
.vid-stage .vid-play { width: 88px; height: 88px; }
.vid-stage .vid-play::before { left: 34px; top: 26px; border-left-width: 24px; border-top-width: 16px; border-bottom-width: 16px; }
.vid-frame { aspect-ratio: 16 / 9; width: 100%; background: #000; }
.vid-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.vid-h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.05; }
.vid-viewer { position: fixed; inset: 0; z-index: 100; background: rgba(6, 5, 9, 0.92); display: flex; align-items: center; justify-content: center; padding: 24px; animation: vidIn 0.18s ease-out; }
.vid-viewer-inner { width: min(1100px, 100%, calc((100vh - 140px) * 16 / 9)); border: 1px solid var(--line-accent); background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.vid-viewer-bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--panel); border-top: 1px solid var(--line); }
.vid-viewer-title { flex: 1; min-width: 0; font: 700 18px/1.2 var(--f-head); text-transform: uppercase; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vid-viewer-close { background: transparent; border: 1px solid var(--line); color: var(--text); width: 36px; height: 36px; cursor: pointer; font-size: 16px; }
.vid-viewer-close:hover { border-color: var(--accent); color: var(--accent); }
body.no-scroll { overflow: hidden; }
@keyframes vidIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) { .vid-viewer { padding: 0; } .vid-viewer-inner { width: 100%; border: 0; } }

/* "More" group in the main nav */
.nav-more-btn { background: none; border: 0; padding: 10px 9px; color: var(--text-2); font: 600 15px/22.5px var(--f-body); height: 43px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.nav-more-btn:hover, .nav-more.open .nav-more-btn { color: var(--text); }
.nav-more-btn.active { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.nav-more .menu-panel { left: 0; right: auto; min-width: 180px; }
.nav-more .menu-panel a { box-shadow: none; }
@media (max-width: 1180px) {
  .nav-more-btn { display: none; }
  .nav-more .menu-panel { display: block; position: static; border: 0; padding: 0; background: none; min-width: 0; }
  .nav-more .menu-panel a { padding: 13px 4px; border-bottom: 1px solid var(--line-soft); font-size: 16px; }
  .nav-sec { display: block; padding: 18px 4px 6px; font: 600 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
}
.nav-account { display: none; }
@media (max-width: 1180px) { .nav-account { display: flex; flex-direction: column; } .nav-account a svg { color: var(--accent); } }
@media (min-width: 1181px) { .nav-more .nav-sec { display: none; } }

/* ---------------------------------------------------------------- medals */
.profile-badges { margin-top: 8px; }
.ribbon-rack { display: inline-flex; flex-direction: column-reverse; gap: 3px; padding: 6px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line-soft); }
.ribbon-rack:hover { border-color: var(--line-accent); }
.rack-row { display: flex; gap: 3px; justify-content: center; }
.rack-cell { position: relative; display: block; line-height: 0; }
.rack-n { position: absolute; right: -3px; top: -5px; font: 700 9px/1 var(--f-mono); color: #0c0a10; background: var(--gold); padding: 1px 3px; }
.ribbon-bar { display: block; }
.ribbon-big { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; }
.ribbon-big .ribbon-bar { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4); }
.medal-svg { display: block; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45)); }
.deco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.deco { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); }
.deco-art { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: 56px; }
.deco-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.honour { gap: 14px; }

/* ---------------------------------------------------------------- recruit checklist */
.cl-steps { list-style: none; margin: 0; padding: 0; }
.cl-steps li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.cl-steps li:last-child { border-bottom: 0; }
.cl-steps li .grow { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cl-tick { flex: 0 0 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); font: 700 13px var(--f-mono); color: var(--text-3, #8a8296); }
.cl-steps li.done .cl-tick { background: var(--green); border-color: var(--green); color: #0c0a10; }
.cl-steps li.done strong { color: var(--text-2); }
.cl-steps li.next .cl-tick { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px rgba(157, 107, 255, 0.15); }
.cl-steps li.next strong { color: var(--text); }
.cl-bar { display: block; max-width: 280px; margin-top: 4px; }
.vote-bar { height: 8px; background: rgba(255, 77, 94, 0.55); } .vote-bar span { display: block; height: 100%; background: var(--green); }
.steps li.done > span:first-child { color: var(--green); } .steps li.done > span:last-child { color: var(--text-2); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }
.btn svg { flex-shrink: 0; }

/* ---------------------------------------------------------------- home sidebar for members */
.vc-status { white-space: nowrap; font: 600 11px var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3, #8a8296); display: inline-flex; align-items: center; gap: 6px; }
.vc-status::before { content: ''; width: 8px; height: 8px; background: #5a5266; }
.vc-status.on { color: var(--green); }
.vc-status.on::before { background: var(--green); box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.18); animation: livePulse 2s infinite; }
@keyframes livePulse { 50% { box-shadow: 0 0 0 6px rgba(61, 220, 132, 0); } }
.vc-room { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.vc-room:last-child { border-bottom: 0; padding-bottom: 0; }
.vc-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vc-top .btn { margin-left: auto; flex: none; }
.vc-ico { color: var(--green); display: inline-flex; flex: none; }
.vc-count { font: 600 11px/1 var(--f-mono); color: var(--green); padding: 4px 6px; background: rgba(61, 220, 132, 0.1); flex: none; }
.vc-name { flex: 0 1 auto; min-width: 0; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-game { font: 600 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 6px; border-left: 3px solid var(--c, var(--accent)); background: var(--panel-2); }
.vc-people { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.lfg-open { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: rgba(157, 107, 255, 0.08); border: 1px solid var(--line-accent); font-size: 14px; }
.hub-medal { flex: 0 0 40px; display: flex; justify-content: center; }
.hub-medal .ribbon-big { width: 40px; height: 40px; }
.hub-medal .ribbon-big svg { width: 36px; height: 12px; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); align-items: flex-start; }
.feed li:last-child { border-bottom: 0; }
.feed-av { position: relative; flex: 0 0 32px; }
.feed-ic { position: absolute; right: -6px; bottom: -4px; font-size: 12px; line-height: 1; }

/* ---------------------------------------------------------------- health */
.health-banner { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; border: 1px solid var(--line); border-left: 4px solid var(--green); background: var(--panel); }
.health-banner strong { font: 700 24px var(--f-head); text-transform: uppercase; }
.health-banner.warn { border-left-color: var(--gold); }
.health-banner.bad { border-left-color: var(--red); background: rgba(255, 77, 94, 0.06); }
.donate-amt { border: 1px solid var(--line); padding: 10px 16px; font-weight: 600; color: var(--text); } .donate-amt:hover { border-color: var(--accent); background: var(--alert-bg); color: var(--text); }

/* ---------------------------------------------------------------- events page */
.ev-hero { position: relative; overflow: hidden; border: 1px solid var(--line); border-top: 3px solid var(--c, var(--accent)); background: radial-gradient(ellipse at 85% 0%, color-mix(in srgb, var(--c, #9d6bff) 22%, transparent), transparent 60%), var(--panel); margin-bottom: 22px; }
.ev-hero.has-art::before { content: ''; position: absolute; inset: 0; background-image: var(--art); background-size: cover; background-position: center; opacity: 0.32; }
.ev-hero.has-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 10, 16, 0.97) 0%, rgba(12, 10, 16, 0.85) 45%, rgba(12, 10, 16, 0.35) 100%); }
.ev-hero-in { position: relative; z-index: 1; padding: 34px 34px 30px; max-width: 760px; }
.ev-hero-title { font-size: clamp(32px, 5vw, 54px); line-height: 1; }
.ev-hero-title a { color: var(--text); }
.ev-hero-meta { color: var(--text-2); font-size: 16px; }
.countdown { display: flex; gap: 8px; }
.countdown span { display: flex; flex-direction: column; align-items: center; min-width: 66px; padding: 10px 6px 8px; background: rgba(12, 10, 16, 0.6); border: 1px solid var(--line); font: 500 10px var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.countdown b { font: 700 30px/1 var(--f-head); color: var(--text); letter-spacing: 0; margin-bottom: 4px; }
.faces { display: inline-flex; align-items: center; }
.faces a { margin-right: -6px; line-height: 0; }
.faces a img { border: 2px solid var(--panel); }
.faces-more { margin-left: 12px; font: 600 12px var(--f-mono); color: var(--muted); }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.fchip { padding: 8px 14px; border: 1px solid var(--line); border-left: 3px solid var(--c, var(--accent)); color: var(--text-2); font-weight: 600; font-size: 14px; }
.fchip:hover { color: var(--text); border-color: var(--line-accent); border-left-color: var(--c, var(--accent)); }
.fchip.on { color: var(--text); background: var(--panel-2); border-color: var(--line-accent); border-left-color: var(--c, var(--accent)); }
.day-head { display: flex; align-items: center; gap: 14px; font-size: 18px; letter-spacing: 0.04em; }
.day-head::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.ev-card { display: flex; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--c, var(--accent)); min-width: 0; transition: border-color 0.2s; }
.ev-card:hover { border-color: var(--line-accent); border-left-color: var(--c, var(--accent)); }
.ev-art { position: relative; flex: 0 0 200px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--c, #9d6bff) 32%, #15121b), #0f0c14 75%); color: rgba(242, 238, 247, 0.85); font: 700 30px var(--f-head); }
.ev-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: transform 0.3s, opacity 0.3s; }
.ev-card:hover .ev-art img { transform: scale(1.04); opacity: 1; }
.ev-time { position: absolute; left: 0; bottom: 0; z-index: 1; padding: 6px 10px; background: rgba(12, 10, 16, 0.85); font: 700 18px/1 var(--f-head); color: #fff; letter-spacing: 0.03em; }
.ev-body { flex: 1; min-width: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.ev-title { font: 700 22px/1.1 var(--f-head); text-transform: uppercase; color: var(--text); }
.ev-title:hover { color: var(--link); }
.ev-game { font: 600 11px var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c, var(--link)); }
.ev-tag { font: 500 10px var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: 2px 6px; }
.ev-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; flex-wrap: wrap; }
.ev-past { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--c, var(--accent)); color: var(--text); }
.ev-past:hover { border-color: var(--line-accent); border-top-color: var(--c, var(--accent)); }
@media (max-width: 640px) {
  .ev-card { flex-direction: column; }
  .ev-art { flex-basis: auto; aspect-ratio: 16 / 7; }
  .ev-hero-in { padding: 24px 18px; }
  .countdown span { min-width: 0; flex: 1; }
}
.cal a.ev { border-left: 3px solid var(--c, var(--accent)); }

/* ---------------------------------------------------------------- mini calendar (home sidebar) */
.mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.mc-grid > * { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; font: 500 13px var(--f-mono); color: var(--text-2); }
.mc-dow { aspect-ratio: auto !important; padding-bottom: 4px; font-size: 10px !important; color: var(--muted) !important; letter-spacing: 0.08em; }
.mc-past { color: var(--faint) !important; }
.mc-today { box-shadow: inset 0 0 0 1px var(--accent); color: var(--text) !important; }
a.mc-has { background: var(--panel-2); color: var(--text); font-weight: 700; }
a.mc-has:hover { background: var(--alert-bg); color: var(--text); }
.mc-dots { position: absolute; bottom: 3px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; }
.mc-dots i { width: 4px; height: 4px; }
.mc-next { display: flex; flex-direction: column; }
.mc-next a { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line-soft); color: var(--text); }
.mc-next a .grow { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.mc-next a strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-date { flex: 0 0 42px; display: flex; flex-direction: column; align-items: center; border-left: 3px solid var(--c, var(--accent)); font: 500 10px var(--f-mono); text-transform: uppercase; color: var(--link); }
.mc-date b { font: 700 20px/1 var(--f-head); color: var(--text); }

/* ---------------------------------------------------------------- header buttons + your own pages */
.hbtn { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--line); color: var(--text-2); font-weight: 600; font-size: 14px; }
.hbtn:hover, .hbtn.on { color: var(--text); border-color: var(--line-hover); }
.hbtn.on, .me.on { border-color: var(--accent); }
.hbtn .count { position: absolute; top: -7px; right: -7px; background: var(--red); color: var(--accent-ink); font: 500 11px/1 var(--f-mono); padding: 3px 5px; }
a.me { text-decoration: none; }
.self-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.self-nav .tabs a { padding-top: 10px; padding-bottom: 12px; }
@media (max-width: 760px) { .hbtn span:not(.count), .me span { display: none; } .hbtn { padding: 9px; } .me { padding: 4px; } }

/* ---------------------------------------------------------------- home hero with rotating game art */
.hero-home { isolation: isolate; }
.hero-slides { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-slide { position: absolute; inset: -2%; background-image: var(--img); background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s ease; transform: scale(1.04); }
.hero-slide.on { opacity: 1; animation: heroDrift 9s ease-out forwards; }
@keyframes heroDrift { from { transform: scale(1.08); } to { transform: scale(1.02); } }
.hero-slides::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 10, 16, 0.96) 0%, rgba(12, 10, 16, 0.86) 42%, rgba(12, 10, 16, 0.55) 70%, rgba(12, 10, 16, 0.75) 100%), linear-gradient(0deg, rgba(12, 10, 16, 0.9) 0%, transparent 35%); }
.hero-home > .wrap:first-of-type { padding-bottom: 28px; }
.hero-home .art img { filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.6)); }
.hero-now { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 22px; }
.hero-game { display: flex; flex-direction: column; color: var(--text); border-left: 3px solid var(--accent); padding-left: 10px; transition: border-color 0.6s; }
.hero-game strong { font: 700 20px/1.1 var(--f-head); text-transform: uppercase; letter-spacing: 0.03em; }
.hero-dots { display: flex; gap: 6px; }
.hero-dots button { width: 26px; height: 4px; padding: 0; border: 0; background: rgba(242, 238, 247, 0.25); cursor: pointer; }
.hero-dots button.on { background: var(--accent); }
.hero-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 640px; }
.hero-steps li { display: flex; gap: 10px; padding: 12px; background: rgba(12, 10, 16, 0.6); border: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.hero-steps b { font: 700 22px/1 var(--f-head); color: var(--accent); }
.hero-steps strong { display: block; color: var(--text); font-size: 14px; margin-bottom: 2px; }
@media (max-width: 700px) { .hero-steps { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .hero-slide.on { animation: none; } .hero-slide { transition: none; } }

/* ---------------------------------------------------------------- home control panel (logged in) */
.cp-band { border-bottom: 1px solid var(--line); background: var(--bg); }
.cp-band > .wrap { padding-top: 32px; padding-bottom: 32px; }
.cp { display: grid; grid-template-columns: 260px minmax(0, 1fr); border: 1px solid var(--line); background: var(--panel); }
.cp-nav { display: flex; flex-direction: column; border-right: 1px solid var(--line); padding: 14px 0; background: var(--bg-alt); }
.cp-nav > a { display: flex; align-items: center; gap: 12px; padding: 10px 20px; color: var(--text-2); font: 600 13px var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; border-left: 2px solid transparent; }
.cp-nav > a:hover { color: var(--text); background: var(--panel); border-left-color: var(--accent); }
.cp-nav > a.cp-who { text-transform: none; letter-spacing: 0; font: inherit; color: var(--text); padding: 6px 20px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.cp-who > span { display: flex; flex-direction: column; min-width: 0; }
.cp-who strong { font: 700 18px/1.1 var(--f-head); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-kicker { font: 600 11px var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--link); display: inline-flex; align-items: center; gap: 6px; }
.cp-sep { margin: 12px 20px 4px; font: 500 10px var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cp-dot { width: 6px; height: 6px; background: var(--line-hover); margin: 0 5px; }
.cp-main { padding: 26px 28px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.cp-head { display: flex; flex-direction: column; gap: 6px; }
.cp-head h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1; }
.cp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.cp-tile { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); background: var(--bg-alt); color: var(--text); }
a.cp-tile:hover { border-color: var(--line-accent); color: var(--text); }
.cp-tile strong { font: 700 20px/1.15 var(--f-head); text-transform: uppercase; }
.cp-staff { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
@media (max-width: 860px) { .cp { grid-template-columns: 1fr; } .cp-nav { border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; padding: 8px; } .cp-nav > a { padding: 8px 10px; border-left: 0; } .cp-nav > a.cp-who { width: 100%; border-bottom: 1px solid var(--line); } .cp-sep { width: 100%; margin: 6px 10px 0; } .cp-main { padding: 20px 18px; } }

/* ---------------------------------------------------------------- home panels (your area / staff panel) */
.hp { border: 1px solid var(--line); border-top: 3px solid var(--accent); background: var(--panel); }
#staff-panel { border-top-color: var(--gold); }
.hp-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 18px 22px; }
.hp-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hp-title h2 { font-size: 28px; line-height: 1.05; }
.hp-toggle svg { transition: transform 0.2s; }
.hp.collapsed .hp-toggle svg { transform: rotate(-90deg); }
.hp.collapsed .hp-head { padding-bottom: 18px; }
.hp-body { border-top: 1px solid var(--line); }
.hp-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); background: var(--bg-alt); padding: 0 10px; }
.hp-tabs button { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 12px 14px; color: var(--text-2); font: 600 13px var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.hp-tabs button:hover { color: var(--text); }
.hp-tabs button[aria-selected="true"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
#staff-panel .hp-tabs button[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--gold); }
.hp-pane { padding: 20px 22px; }
button.cp-tile { text-align: left; font: inherit; cursor: pointer; }
button.cp-tile:hover { border-color: var(--line-accent); }

/* ---------------------------------------------------------------- header buttons (v2): coloured, textured, square */
.header-actions { gap: 8px; }
.hbtn { --hc: var(--accent); position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 60%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.028) 0 2px, transparent 2px 7px), var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); color: var(--text); font: 600 12px var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.hbtn svg { color: var(--hc); }
.hbtn::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-right: 2px solid var(--hc); border-bottom: 2px solid var(--hc); opacity: 0.8; }
.hbtn:hover, .hbtn.on { color: #fff; border-color: var(--hc); background-color: color-mix(in srgb, var(--hc) 16%, var(--panel)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px -10px var(--hc); }
.hbtn:active { transform: translateY(1px); }
.hbtn .count { position: absolute; top: -8px; right: -8px; min-width: 18px; text-align: center; background: var(--red); color: #fff; font: 700 11px/1 var(--f-mono); letter-spacing: 0; padding: 3px 5px; box-shadow: 0 0 0 2px var(--bg); }
.hbtn-icon { padding: 0; width: 40px; justify-content: center; }
.bell { --hc: var(--link); }
.hbtn-donate { --hc: #ff6b9a; color: #ffd3e1; }
.hbtn-admin { --hc: var(--gold); color: #ffe7b8; }
.hbtn-me { --hc: var(--accent); padding-left: 5px; text-transform: none; letter-spacing: 0; font: 600 14px var(--f-body); }
.hbtn-me img { width: 28px; height: 28px; border: 1px solid var(--line-accent); }
.hbtn-apply { --hc: #c4a8ff; color: #fff; border-color: #b48cff; background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 7px), linear-gradient(135deg, #9d6bff, #6c3fe0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 22px -10px rgba(157, 107, 255, 0.9); }
.hbtn-apply svg { color: #fff; }
.hbtn-apply:hover { color: #fff; background-color: transparent; filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 26px -10px rgba(157, 107, 255, 1); }
.hbtn-discord { --hc: #aab2ff; color: #fff; border-color: #6d78f2; background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 55%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 7px), var(--discord); }
.hbtn-discord svg { color: #fff; }
.hbtn-discord:hover { color: #fff; background-color: transparent; filter: brightness(1.08); }
@media (max-width: 760px) { .hbtn span:not(.count) { display: none; } .hbtn { padding: 0; width: 40px; justify-content: center; } .hbtn-me { padding: 0; } }
@media (max-width: 420px) { .hbtn-donate { display: none; } }
video.hero-slide { width: 104%; height: 104%; object-fit: cover; background: #000; }
.hm-thumb { width: 160px; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); display: block; background: #000; }

/* join steps v2: one row across the header, lit up one after another, arrows showing the flow */
.hero-steps-row { position: relative; padding-bottom: 26px; }
.hero-steps { display: flex; align-items: stretch; gap: 0; max-width: none; grid-template-columns: none; }
.hero-steps .hs { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: rgba(12, 10, 16, 0.72); border: 1px solid var(--line); font-size: 14px; color: var(--text-2); white-space: nowrap;
  animation: hsLit 6s infinite; }
.hero-steps .hs:nth-of-type(1) { animation-delay: 0s; }
.hero-steps .hs:nth-of-type(3) { animation-delay: 2s; }
.hero-steps .hs:nth-of-type(5) { animation-delay: 4s; }
.hero-steps .hs b { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line-accent); font: 700 22px/1 var(--f-head); color: var(--accent); }
.hero-steps .hs span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hero-steps .hs strong { display: block; color: var(--text); font: 700 17px/1.15 var(--f-head); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 3px; }
.hero-steps .hs-arrow { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 44px; color: var(--accent); }
.hero-steps .hs-arrow:nth-of-type(2) svg { animation: hsArrow 6s infinite 1s; }
.hero-steps .hs-arrow:nth-of-type(4) svg { animation: hsArrow 6s infinite 3s; }
@keyframes hsLit {
  0%, 30% { border-color: var(--accent); background: rgba(52, 33, 92, 0.85); box-shadow: 0 0 0 1px var(--accent), 0 10px 30px -12px rgba(157, 107, 255, 0.9); color: var(--text); }
  36%, 100% { border-color: var(--line); background: rgba(12, 10, 16, 0.72); box-shadow: none; }
}
.hero-steps .hs b { animation: inherit; animation-name: hsNum; }
@keyframes hsNum { 0%, 30% { background: var(--accent); color: #0c0a10; border-color: var(--accent); } 36%, 100% { background: transparent; color: var(--accent); border-color: var(--line-accent); } }
@keyframes hsArrow { 0%, 30% { transform: translateX(4px); opacity: 1; } 36%, 100% { transform: translateX(0); opacity: 0.45; } }
@media (max-width: 900px) {
  .hero-steps { flex-direction: column; }
  .hero-steps .hs { white-space: normal; }
  .hero-steps .hs-arrow { width: auto; height: 26px; }
  .hero-steps .hs-arrow svg { transform: rotate(90deg); animation: none !important; }
}
@media (prefers-reduced-motion: reduce) { .hero-steps .hs, .hero-steps .hs b, .hero-steps .hs-arrow svg { animation: none !important; } }
.hero-steps-row .hero-steps { width: 100%; }
.hero-steps li.hs-arrow { background: none; border: 0; padding: 0; }

/* ---------------------------------------------------------------- game pages */
.game-about { border-top: 3px solid var(--c, var(--accent)); }
.game-about-img { display: block; width: 100%; aspect-ratio: 460 / 215; object-fit: cover; border-bottom: 1px solid var(--line); }
.mini-standings { list-style: none; margin: 0; padding: 0; }
.mini-standings li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.mini-standings li:last-child { border-bottom: 0; }
.mini-standings .pos { font-size: 17px; width: 22px; }
.mini-standings a { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.sched tr.next td { background: rgba(157, 107, 255, 0.08); }
table.sched tr.next td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.hm-none { display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); background: var(--bg-alt); }
/* YouTube header slides: cover the header like a background, no clicks */
.hero-slides { container-type: size; }
.hero-yt { animation: none !important; transform: none !important; inset: 0 !important; }
.hero-yt iframe { position: absolute; top: 50%; left: 50%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); transform: translate(-50%, -50%) scale(1.02); border: 0; pointer-events: none; }

/* Staff HQ: overview map of every section, grouped like the sidebar */
.hq-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 22px; }
.hq-group { background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--accent); padding: 12px 0 6px; display: flex; flex-direction: column; }
.hq-group .label { padding: 0 14px 6px; }
.hq-group a { display: flex; align-items: center; gap: 8px; padding: 7px 14px; color: var(--text-2); font-weight: 600; font-size: 14px; }
.hq-group a:hover { color: var(--text); background: var(--panel-2); }
.staff-nav .head { margin-top: 14px; }
.staff-nav .head:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- home header fills the first screen */
.hero-home { display: flex; flex-direction: column; min-height: calc(100svh - var(--hdr, 73px)); }
.hero-home > .wrap, .hero-home > .statbar { width: 100%; flex: none; }
.hero-home > .wrap.hero-main { flex: 1 0 auto; padding-top: 48px; padding-bottom: 32px; }
.hero-now { display: grid; grid-template-columns: 1fr auto 1fr; }
.hero-now > :last-child { justify-self: end; }
.hero-scroll { display: grid; place-items: center; width: 40px; height: 40px; color: var(--text-2); border: 1px solid var(--line); background: rgba(12, 10, 16, 0.5); animation: heroNudge 2.4s ease-in-out infinite; }
.hero-scroll:hover { color: var(--text); border-color: var(--accent); }
@keyframes heroNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
#home-content { scroll-margin-top: var(--hdr, 73px); }
@media (max-height: 560px), (max-width: 700px) { .hero-home { min-height: 0; } .hero-scroll { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-scroll { animation: none; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.hero-home > .wrap.hero-steps-row { padding-top: 0; padding-bottom: 22px; display: block; }
.hero-home > .wrap.hero-now { padding-top: 0; padding-bottom: 18px; gap: 16px; }
.hero-home > .wrap.hero-main { padding-top: clamp(24px, 5vh, 56px); padding-bottom: clamp(20px, 3vh, 32px); }
.hero-home .art img { max-height: min(380px, 38vh); width: auto; }
.hero-home h1 { font-size: clamp(48px, min(8vw, 9.5vh), 88px); }
@media (max-width: 700px) { .hero-home .art img { max-height: 140px; } }

/* ---------------------------------------------------------------- roster: cards flip over to show roles */
.person.flip { display: block; padding: 0; background: none; border: 0; perspective: 1000px; }
.flip-in { position: relative; display: grid; height: 100%; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.flip .face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--panel); border: 1px solid var(--line); }
.flip .front { display: flex; gap: 14px; align-items: center; padding: 14px 16px; position: relative; min-width: 0; }
.flip .back { transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 10px 14px; border-color: var(--accent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--panel)), var(--panel) 60%); }
.flip-hint { position: absolute; right: 10px; bottom: 6px; font-size: 13px; color: var(--faint, #5d5668); transition: color 0.2s; }
.person.flip:hover .flip-in, .person.flip:focus-visible .flip-in { transform: rotateY(180deg); }
.person.flip:hover .front { border-color: var(--accent); }
.pr-group { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: center; }
.pr-label { font: 500 9.5px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.pr-list { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.pr-chip { display: inline-flex; align-items: center; padding: 1px 6px 1px 5px; font-size: 11.5px; line-height: 1.45; color: var(--text); background: color-mix(in srgb, var(--c) 14%, var(--panel)); border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line)); border-left: 3px solid var(--c); white-space: nowrap; }
.pr-more { font: 500 11px/1.6 var(--f-mono); color: var(--muted); }
@media (hover: none) { .flip .back { display: none; } .flip-hint { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .flip-in { transition: none; transform: none !important; }
  .flip .back { transform: none; opacity: 0; transition: opacity 0.2s; }
  .person.flip:hover .back, .person.flip:focus-visible .back { opacity: 1; }
}

/* ---------------------------------------------------------------- bars above the header (preview, offline, inactive) */
.site-bar { --bc: var(--gold); --b1: #2e2306; --b2: #241b04; --tx: #ffe7b8; position: relative; z-index: 60; color: var(--tx); font-size: 14px; border-bottom: 1px solid var(--bc);
  background: linear-gradient(90deg, color-mix(in srgb, var(--bc) 22%, transparent), transparent 55%), repeating-linear-gradient(135deg, var(--b1) 0 12px, var(--b2) 12px 24px); }
.site-bar::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bc); }
.site-bar.red { --bc: #ff4d5e; --b1: #2c0c11; --b2: #22090d; --tx: #ffd9dd; }
.site-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; min-height: 48px; padding-top: 7px; padding-bottom: 7px; }
.site-bar .wrap > span:first-child { display: block; min-width: 0; }
.site-bar .wrap > span:first-child > svg { color: var(--bc); vertical-align: -3px; margin-right: 8px; }
.site-bar strong { color: #fff; }
.site-bar select { padding: 6px 10px; font-size: 13px; }
.site-bar .btn { border-color: color-mix(in srgb, var(--bc) 60%, transparent); background: rgba(0, 0, 0, 0.35); color: #fff; }
.site-bar .btn:hover { border-color: var(--bc); background: color-mix(in srgb, var(--bc) 20%, transparent); }
.btn-return { background: #ff4d5e !important; border-color: #ff4d5e !important; color: #fff !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; box-shadow: 0 0 0 0 rgba(255, 77, 94, 0.6); animation: returnPulse 2.2s ease-out infinite; }
.btn-return:hover { background: #ff6573 !important; }
@keyframes returnPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 94, 0.55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255, 77, 94, 0); } }

/* ---------------------------------------------------------------- pop-up messages */
.toasts { position: fixed; top: 84px; right: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { --tc: var(--accent); position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 14px 14px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--tc); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55); font-size: 14px; color: var(--text); pointer-events: auto; overflow: hidden; animation: toastIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.toast.success { --tc: var(--green); } .toast.warning { --tc: var(--gold); } .toast.danger, .toast.error { --tc: var(--red); }
.toast-ic { color: var(--tc); display: flex; padding-top: 2px; }
.toast-msg { flex: 1; min-width: 0; }
.toast-x { background: none; border: 0; padding: 2px; color: var(--muted); cursor: pointer; display: flex; }
.toast-x:hover { color: var(--text); }
.toast-timer { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--tc); opacity: 0.6; transform-origin: left; transform: scaleX(0); }
.toast.timed .toast-timer { animation: toastTimer var(--life, 6s) linear forwards; }
.toast.timed:hover .toast-timer { animation-play-state: paused; }
.toast.out { animation: toastOut 0.3s ease-in forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(24px); } }
@keyframes toastTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 700px) { .toasts { top: auto; bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .toast, .toast.out { animation-duration: 0.01s; } .btn-return { animation: none; } }

/* ---------------------------------------------------------------- racing: race tiles + next race */
.race-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 12px; }
.race-grid.one { grid-template-columns: 1fr; }
.race-tile { display: grid; grid-template-columns: 150px 1fr; background: var(--panel); border: 1px solid var(--line); color: var(--text); transition: border-color 0.2s, background 0.2s; }
.race-tile:hover { border-color: var(--line-accent); background: color-mix(in srgb, var(--accent) 5%, var(--panel)); color: var(--text); }
.race-tile.is-next { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.race-tile.s-finished .rt-map path.track { stroke: var(--muted); }
.race-tile.s-cancelled { opacity: 0.55; }
.rt-map { position: relative; display: flex; align-items: center; justify-content: center; padding: 18px 14px; background: radial-gradient(circle at 50% 55%, rgba(157, 107, 255, 0.12), transparent 70%), var(--bg-alt); border-right: 1px solid var(--line); }
.rt-map .circuit-svg { max-height: 110px; width: 100%; }
.rt-map .circuit-svg path.track { stroke-width: 9; transition: stroke 0.25s; }
.race-tile:hover .rt-map path.track, .race-tile.is-next .rt-map path.track { stroke: var(--accent); }
.rt-round { position: absolute; top: 8px; left: 10px; font: 700 15px/1 var(--f-head); color: var(--muted); letter-spacing: 0.04em; }
.rt-nomap { font-size: 34px; opacity: 0.5; }
.rt-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; min-width: 0; }
.rt-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rt-date { font: 500 11.5px/1.3 var(--f-mono); color: var(--link); text-transform: uppercase; letter-spacing: 0.05em; }
.rt-name { display: flex; align-items: center; gap: 8px; font: 700 21px/1.1 var(--f-head); text-transform: uppercase; letter-spacing: 0.01em; }
.rt-name span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-circuit { font-size: 13px; color: var(--muted); }
.rt-stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 4px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.rt-stat { display: flex; flex-direction: column; gap: 2px; padding: 0 14px; border-left: 1px solid var(--line-soft); }
.rt-stat:first-child { padding-left: 0; border-left: 0; }
.rt-stat b { font: 700 19px/1 var(--f-head); }
.rt-stat i { font: 500 10px/1.2 var(--f-mono); font-style: normal; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.rt-win { font-size: 13px; color: var(--gold); }
@media (max-width: 520px) { .race-tile { grid-template-columns: 96px 1fr; } .rt-map { padding: 10px; } .rt-stat { padding: 0 9px; } .rt-stat b { font-size: 16px; } }

.next-race { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); border: 1px solid var(--line); border-top: 3px solid var(--accent); background: radial-gradient(ellipse at 20% 50%, rgba(157, 107, 255, 0.16), transparent 60%), var(--panel); }
.nr-map { display: flex; align-items: center; justify-content: center; padding: 28px; border-right: 1px solid var(--line); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.012) 0 12px, transparent 12px 24px); }
.nr-map .circuit-svg { max-height: 300px; }
.nr-map .circuit-svg path.track { stroke: var(--accent); stroke-width: 8; filter: drop-shadow(0 0 10px rgba(157, 107, 255, 0.45)); }
.nr-body { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 30px 32px; min-width: 0; }
.nr-name { display: flex; align-items: center; gap: 12px; font-size: clamp(30px, 4vw, 46px); line-height: 1; }
.nr-name a { color: var(--text); }
.nr-name .flag { width: 36px; height: 24px; }
.nr-stats { display: flex; flex-wrap: wrap; gap: 10px 0; border-top: 1px solid var(--line); padding-top: 16px; }
.nr-stats .rt-stat { padding: 0 20px; }
.nr-stats .rt-stat:first-child { padding-left: 0; }
.nr-stats .rt-stat b { font-size: 28px; }
@media (max-width: 820px) { .next-race { grid-template-columns: 1fr; } .nr-map { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px; } .nr-map .circuit-svg { max-height: 200px; } .nr-body { padding: 22px 18px; } }
.rt-map .circuit-svg path { vector-effect: non-scaling-stroke; }
.rt-map .circuit-svg path.track { stroke-width: 3px; }
.rt-map .circuit-svg path:first-child { stroke-width: 7px; }
.nr-map .circuit-svg path { vector-effect: non-scaling-stroke; }
.nr-map .circuit-svg path.track { stroke-width: 4px; }
.nr-map .circuit-svg path:first-child { stroke-width: 12px; }
.rt-name { align-items: flex-start; }
.rt-name .flag { margin-top: 3px; flex-shrink: 0; }
.rt-name span { white-space: normal; overflow: visible; }
.rt-season { color: var(--muted); }
.rt-nomap { display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 1; font-size: inherit; }
.rt-nomap img { opacity: 0.22; filter: grayscale(1); }
.rt-nomap i { font: 500 9.5px/1.2 var(--f-mono); font-style: normal; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint, #5d5668); }

/* ---------------------------------------------------------------- match tracker */
.mt-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--panel); margin-bottom: 20px; }
.mt-tile { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; border-left: 1px solid var(--line); overflow: hidden; }
.mt-tile:first-child { border-left: 0; }
.mt-tile b { font: 700 clamp(44px, 6vw, 68px)/0.9 var(--f-head); color: var(--text); letter-spacing: -0.01em; }
.mt-tile span { font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.22em; color: var(--muted); writing-mode: vertical-rl; transform: rotate(180deg); }
.mt-tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c, transparent); }
.mt-tile.won { --c: var(--green); } .mt-tile.lost { --c: var(--red); } .mt-tile.drawn { --c: var(--gold); }
.mt-tile.total { background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 38%, var(--panel)), var(--panel) 75%); }
.mt-tile.total::before { background: var(--accent); }
@media (max-width: 760px) { .mt-tiles { grid-template-columns: repeat(2, 1fr); } .mt-tile:nth-child(3) { border-left: 0; } .mt-tile:nth-child(n+3) { border-top: 1px solid var(--line); } }

.mt-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
@media (max-width: 1000px) { .mt-cols { grid-template-columns: 1fr; } }
.mt-list { overflow: hidden; }
.mt-lhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--line); font: 500 13px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.14em; }
.mt-filters { display: flex; gap: 2px; }
.mt-filters a { padding: 8px 12px; color: var(--muted); border: 1px solid transparent; font: 500 12px/1 var(--f-mono); letter-spacing: 0.1em; }
.mt-filters a:hover { color: var(--text); }
.mt-filters a.on { color: var(--accent); border-color: var(--line-accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.mt-table td { padding-top: 16px; padding-bottom: 16px; vertical-align: middle; }
.mt-table tbody tr { cursor: pointer; transition: background 0.15s; }
.mt-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.mt-table tbody tr.on { background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.mt-opp { display: inline-flex; align-items: center; gap: 12px; font: 700 21px/1 var(--f-head); text-transform: uppercase; color: var(--text); letter-spacing: 0.01em; }
.mt-sub { display: block; margin: 4px 0 0 20px; font: 500 10.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint, #5d5668); }
.mt-dot { width: 8px; height: 8px; flex-shrink: 0; background: var(--muted); }
.mt-dot.won { background: var(--green); } .mt-dot.lost { background: var(--red); } .mt-dot.drawn { background: var(--gold); }
.mt-sc { font: 700 22px/1 var(--f-head); white-space: nowrap; }
.mt-sc.won { color: var(--green); } .mt-sc.lost { color: var(--red); } .mt-sc.drawn { color: var(--gold); }
.mt-pager { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 14px; border-top: 1px solid var(--line); background: var(--bg-alt); }
.mt-pager [aria-disabled] { opacity: 0.35; pointer-events: none; }

.mt-debrief { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 16px; padding: 22px; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--accent); scroll-margin-top: 90px; }
.mt-dhead { display: flex; justify-content: space-between; align-items: center; font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.mt-game { color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); padding: 4px 8px; letter-spacing: 0.08em; }
.mt-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 6px 0 16px; border-bottom: 1px solid var(--line); }
.mt-score span { font: 500 12px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-2); }
.mt-score span:last-child { text-align: right; }
.mt-score b { font: 700 56px/1 var(--f-head); color: var(--accent); }
.mt-score b.won { color: var(--green); } .mt-score b.lost { color: var(--red); } .mt-score b.drawn { color: var(--gold); }
.mt-score.big b { font-size: clamp(64px, 10vw, 110px); }
.mt-score.big span { font: 700 clamp(18px, 2.4vw, 28px)/1.1 var(--f-head); color: var(--text); }
.mt-dbody { display: flex; flex-direction: column; gap: 14px; }
.mt-result { align-self: flex-start; padding: 7px 12px; font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.16em; border: 1px solid currentColor; }
.mt-result.won { color: var(--green); } .mt-result.lost { color: var(--red); } .mt-result.drawn { color: var(--gold); }
.mt-facts { list-style: none; margin: 0; padding: 0 0 14px; display: flex; flex-direction: column; gap: 8px; color: var(--text-2); font-size: 14px; border-bottom: 1px solid var(--line); }
.mt-facts li { display: flex; align-items: center; gap: 10px; }
.mt-facts svg { color: var(--muted); }
.mt-label { font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 10px; }
.mt-lineup p { margin: 0 0 8px; font-size: 14px; color: var(--text-2); }
.mt-lineup strong { color: var(--text); }
.mt-report { justify-content: center; text-transform: uppercase; letter-spacing: 0.12em; font-size: 13px; padding: 14px; }

.mt-hero { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 36px 20px; margin: 16px 0 24px; border: 1px solid var(--line); border-top: 3px solid var(--c, var(--accent)); background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--c, #9d6bff) 16%, transparent), transparent 65%), var(--panel); }
.mt-hero.won { --c: var(--green); } .mt-hero.lost { --c: var(--red); } .mt-hero.drawn { --c: var(--gold); }
.mt-hero .mt-score { border: 0; padding: 0; width: min(100%, 760px); }
.mt-roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mt-roster li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mt-guest { width: 28px; height: 28px; background: var(--line); }

.mt-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px; max-height: 420px; overflow: auto; padding-right: 4px; }
.mt-pl { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--bg-alt); border: 1px solid var(--line); font-size: 14px; }
.mt-pl:has(input[name="played[]"]:checked) { border-color: var(--line-accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg-alt)); }
.mt-pl[hidden] { display: none; }
.mt-cb { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }

.mt-mini { display: flex; gap: 0; }
.mt-mini span { flex: 1; display: flex; flex-direction: column; align-items: center; font: 500 10px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); border-left: 1px solid var(--line-soft); }
.mt-mini span:first-child { border-left: 0; }
.mt-mini b { font: 700 24px/1.1 var(--f-head); color: var(--text); }
.mt-mini .won b { color: var(--green); } .mt-mini .lost b { color: var(--red); } .mt-mini .drawn b { color: var(--gold); }
.mt-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.mt-recent li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mt-recent a { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.mt-recent .mt-sc { font-size: 17px; }
.mt-hero .mt-result { align-self: center; }

/* ---------------------------------------------------------------- weekly digest */
.dg-list { list-style: none; margin: 0; padding: 0; }
.dg-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.dg-list li:last-child { border-bottom: 0; }
.dg-list .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tiles .num .small { font: 500 12px var(--f-mono); }

/* ---------------------------------------------------------------- member of the month */
.motm-cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.motm-cand { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--bg-alt); border: 1px solid var(--line); border-top: 2px solid var(--line); transition: border-color .2s; }
.motm-cand:hover { border-color: var(--line-hover); }
.motm-cand.voted { border-color: var(--accent); border-top-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--bg-alt)); }
.motm-cand form { margin-top: auto; }
.motm-cands.compact { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.motm-cands.compact .motm-cand { padding: 12px; gap: 10px; }
.motm-who { display: flex; align-items: center; gap: 12px; color: var(--text); min-width: 0; }
.motm-who:hover { color: var(--text); }
.motm-who:hover strong { color: var(--accent); }
.motm-cinfo { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.motm-cinfo strong { font: 700 18px/1.1 var(--f-head); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.motm-reason { margin: 0; font-size: 14px; color: var(--text-2); }
.motm-spot { border-top: 2px solid var(--gold); }
.motm-spot .panel-head h2 { display: flex; align-items: center; gap: 10px; }
.motm-spot .panel-head .label { color: var(--gold); }
.motm-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; padding: 20px 22px; }
.motm-medal { display: grid; place-items: center; padding: 6px 14px; border-right: 1px solid var(--line); }
.motm-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.motm-main .avatar { border: 1px solid var(--gold); }
.motm-quote { margin: 0; padding: 2px 0 2px 14px; border-left: 2px solid var(--gold); color: var(--text-2); font-size: 15px; }
.motm-spot.big .motm-body { padding: 30px; gap: 32px; }
.motm-spot.big .motm-medal { padding: 10px 30px 10px 8px; }
.motm-spot.big .motm-cinfo strong { font-size: clamp(30px, 4.4vw, 46px); }
.motm-spot.big .motm-quote { font-size: 17px; }
.motm-hall { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.motm-hof { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--gold); color: var(--text); }
.motm-hof:hover { border-color: var(--gold); color: var(--text); }
.motm-hof .label { color: var(--gold); }
.motm-hof strong { font: 700 17px/1.1 var(--f-head); text-transform: uppercase; }
.motm-row { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: 8px; }
.motm-bar { display: block; height: 6px; background: var(--line); }
.motm-bar span { display: block; height: 100%; background: var(--accent); }
@media (max-width: 600px) {
  .motm-row { grid-template-columns: 1fr; }
  .motm-body, .motm-spot.big .motm-body { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
  .motm-medal, .motm-spot.big .motm-medal { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 12px; justify-content: start; }
}

/* ---------------------------------------------------------------- anniversaries */
.anniv { border-top: 3px solid var(--gold); }
.anniv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.anniv-list li { display: flex; align-items: center; gap: 10px; }
.anniv-years { display: flex; flex-direction: column; align-items: center; min-width: 46px; padding: 4px 6px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); font: 500 9.5px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); }
.anniv-years b { font: 700 22px/1 var(--f-head); color: var(--text); }

/* ---------------------------------------------------------------- fixtures */
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 12px; }
.fx-card { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%), var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--c); }
.fx-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fx-when { font: 500 12px/1.2 var(--f-mono); color: var(--link); text-transform: uppercase; letter-spacing: 0.05em; text-align: right; }
.fx-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; color: var(--text); }
.fx-vs span { font: 700 22px/1.05 var(--f-head); text-transform: uppercase; }
.fx-vs span:last-child { text-align: right; }
.fx-vs b { font: 700 16px/1 var(--f-mono); color: var(--c); letter-spacing: 0.1em; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.fx-vs:hover span { color: var(--accent); }
.fx-mid { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 32px; }
.fx-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.mt-avail .btn.on-no { border-color: var(--red); color: var(--red); }
.fx-hero { --c: var(--accent); }
.fx-hero .mt-score b { color: var(--accent); font-size: clamp(40px, 6vw, 64px); font-family: var(--f-mono); letter-spacing: 0.08em; }
.fx-whos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.mt-label.green { color: var(--green); } .mt-label.gold { color: var(--gold); } .mt-label.red { color: var(--red); }

/* ---------------------------------------------------------------- squads */
.sq-tag { display: inline-block; padding: 1px 6px; font: 700 10.5px/1.5 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); vertical-align: middle; white-space: nowrap; }
a.sq-tag:hover { color: var(--text); background: color-mix(in srgb, var(--c) 28%, transparent); }
.sq-badge { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; width: var(--s); height: var(--s); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 85%, #000), color-mix(in srgb, var(--c) 45%, #000)); clip-path: polygon(50% 0, 100% 14%, 100% 64%, 50% 100%, 0 64%, 0 14%); }
.sq-badge::after { content: ''; position: absolute; inset: 3px; clip-path: inherit; border: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 4px, transparent 4px 8px); }
.sq-badge span { position: relative; z-index: 1; font: 700 calc(var(--s) * 0.24)/1 var(--f-head); letter-spacing: 0.02em; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); margin-top: -6%; }
.sq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.sq-card { display: flex; flex-direction: column; gap: 16px; padding: 20px; color: var(--text); background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%), var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--c); }
.sq-card:hover { color: var(--text); border-color: color-mix(in srgb, var(--c) 60%, var(--line)); }
.sq-head { display: flex; align-items: center; gap: 16px; }
.sq-name { font: 700 26px/1 var(--f-head); text-transform: uppercase; }
.sq-motto { font-size: 13.5px; color: var(--text-2); font-style: italic; }
.sq-lead { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.sq-lead > span { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.sq-lead i { display: block; font: 500 9.5px/1.2 var(--f-mono); font-style: normal; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c); }
.sq-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.sq-hero { border-bottom: 1px solid var(--line); border-top: 3px solid var(--c); background: radial-gradient(ellipse at 10% 50%, color-mix(in srgb, var(--c) 20%, transparent), transparent 55%), var(--bg-alt); }
.sq-hero .wrap { display: flex; align-items: center; gap: 28px; padding-top: 40px; padding-bottom: 36px; flex-wrap: wrap; }
.sq-hero h1 { font-size: clamp(40px, 6vw, 68px); line-height: 0.95; }
.sq-hero .kicker { color: var(--c); }
.sq-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.sq-mem { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg-alt); border: 1px solid var(--line); }
.sq-side { border-top: 3px solid var(--c); }
.person .name .sq-tag { margin-left: 4px; font-size: 9.5px; }
.sq-members { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.sq-mem .grow { min-width: 0; }
.sq-mem form .btn { padding: 4px 8px; font-size: 12px; }

/* ---------------------------------------------------------------- training */
.tr-card { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--c); flex-wrap: wrap; }
.tr-card .datebox { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.tr-card .kicker { color: var(--c); }
.tr-title { font: 700 21px/1.1 var(--f-head); text-transform: uppercase; color: var(--text); }
.tr-title:hover { color: var(--accent); }
.tr-hero { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 28px 30px; margin: 16px 0 22px; border: 1px solid var(--line); border-top: 3px solid var(--c); background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%), var(--panel); }
.tr-hero h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1; }
.tr-hero .kicker { color: var(--c); }

/* ---------------------------------------------------------------- Zero Laps Left */
.zll-joke s { color: var(--muted); text-decoration: none; position: relative; opacity: 0.55; }
.zll-joke s::after { content: ''; position: absolute; left: -4%; right: -4%; top: 52%; height: 0.09em; background: var(--red); transform: rotate(-6deg); }
.zll-laps { color: var(--accent); display: inline-block; transform: translateY(-0.38em) rotate(-4deg); font-size: 0.62em; margin-left: -0.15em; margin-right: 0.12em; vertical-align: top; }
.zll-chip { color: var(--accent); border-color: var(--line-accent); }

/* ---------------------------------------------------------------- football league */
.fm-crest { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; width: var(--s); height: calc(var(--s) * 1.12);
  background: linear-gradient(135deg, var(--a) 0 50%, var(--b) 50% 100%); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }
.fm-crest::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 45%); }
.fm-crest span { position: relative; font: 700 calc(var(--s) * 0.3)/1 var(--f-head); color: #fff; letter-spacing: 0.02em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 1px #000; margin-top: -12%; }
.fm-hero { border-bottom: 1px solid var(--line); border-top: 3px solid var(--green); background: radial-gradient(ellipse at 85% 0%, rgba(61, 220, 132, 0.13), transparent 55%), repeating-linear-gradient(90deg, rgba(61, 220, 132, 0.025) 0 60px, transparent 60px 120px), var(--bg-alt); }
.fm-hero .wrap:first-child { padding-top: 40px; padding-bottom: 22px; }
.fm-hero h1 { font-size: clamp(40px, 6vw, 68px); line-height: 0.95; }
.fm-table td, .fm-table th { white-space: nowrap; }
.fm-table tr.fm-top td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.fm-table tr.fm-bottom td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.fm-table tr.on { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.fm-club { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; }
.fm-club:hover span { color: var(--accent); }
.fm-form { display: inline-flex; gap: 3px; }
.fm-form i { display: inline-grid; place-items: center; width: 18px; height: 18px; font: 700 10px/1 var(--f-mono); font-style: normal; color: #0c0a10; }
.fm-form i.W { background: var(--green); } .fm-form i.D { background: var(--muted); } .fm-form i.L { background: var(--red); color: #fff; }
.fm-matches { display: flex; flex-direction: column; }
.fm-match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); }
.fm-matches > :last-child, .fm-matches > :last-child .fm-match { border-bottom: 0; }
.fm-side { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; min-width: 0; }
.fm-side span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-side.home { justify-content: flex-end; text-align: right; }
.fm-score { display: inline-flex; align-items: center; gap: 6px; min-width: 76px; justify-content: center; padding: 6px 10px; background: var(--bg-alt); border: 1px solid var(--line); }
.fm-score b { font: 700 22px/1 var(--f-head); }
.fm-score span { color: var(--muted); }
.fm-vs { font: 500 12px/1 var(--f-mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.fm-mdrow { display: grid; grid-template-columns: 46px 1fr; align-items: center; padding-left: 14px; border-bottom: 1px solid var(--line-soft); }
.fm-mdrow .fm-match { border-bottom: 0; }
.fm-res { display: inline-grid; place-items: center; width: 24px; height: 24px; font: 700 12px var(--f-mono); color: #0c0a10; }
.fm-res.W { background: var(--green); } .fm-res.D { background: var(--muted); } .fm-res.L { background: var(--red); color: #fff; }
.fm-mds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 14px; }
.fm-next { border-color: var(--accent); }
.fm-mine { display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--text); border: 1px solid var(--line); border-left: 4px solid var(--a); background: linear-gradient(90deg, color-mix(in srgb, var(--a) 16%, var(--panel)), var(--panel) 60%); }
.fm-mine strong { display: block; font: 700 24px/1 var(--f-head); text-transform: uppercase; }
.fm-pos { font: 500 12px var(--f-mono); color: var(--muted); }
.fm-pos b { font: 700 34px/1 var(--f-head); color: var(--text); }
.fm-session .countdown span { min-width: 54px; }
.fm-session .countdown b { font-size: 24px; }
.fm-ready { display: flex; flex-wrap: wrap; gap: 6px; }
.fm-ready > span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; font-size: 12px; color: var(--muted); background: var(--bg-alt); border: 1px solid var(--line); }
.fm-ready > span.on { color: var(--text); border-color: var(--green); background: color-mix(in srgb, var(--green) 10%, var(--bg-alt)); }
.fm-ready > span.on svg { color: var(--green); }
.fm-scorers, .fm-tr { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fm-scorers li, .fm-tr li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.fm-scorers b { font: 700 22px/1 var(--f-head); }
.fm-dir { flex-shrink: 0; padding: 2px 6px; font: 700 10px/1.5 var(--f-mono); letter-spacing: 0.06em; }
.fm-dir.in { color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 50%, transparent); }
.fm-dir.out { color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 50%, transparent); }
.fm-clubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.fm-ccard { display: flex; align-items: center; gap: 16px; padding: 16px 18px; color: var(--text); background: linear-gradient(120deg, color-mix(in srgb, var(--a) 14%, var(--panel)), var(--panel) 55%); border: 1px solid var(--line); border-top: 3px solid var(--a); }
.fm-ccard:hover { color: var(--text); border-color: var(--a); }
.fm-ccard strong { font: 700 20px/1.05 var(--f-head); text-transform: uppercase; }
.fm-ccard .fm-pos { margin-left: auto; }
.fm-club-hero { border-bottom: 1px solid var(--line); border-top: 4px solid var(--a); background: linear-gradient(110deg, color-mix(in srgb, var(--a) 26%, var(--bg-alt)) 0%, var(--bg-alt) 55%), var(--bg-alt); }
.fm-club-hero .wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding-top: 40px; padding-bottom: 36px; }
.fm-club-hero h1 { font-size: clamp(38px, 6vw, 66px); line-height: 0.95; }
.fm-clubstats { display: flex; margin-left: auto; border: 1px solid var(--line); background: rgba(12, 10, 16, 0.5); }
.fm-clubstats span { display: flex; flex-direction: column; align-items: center; padding: 12px 18px; border-left: 1px solid var(--line); font: 500 10px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.fm-clubstats span:first-child { border-left: 0; }
.fm-clubstats b { font: 700 28px/1 var(--f-head); color: var(--text); letter-spacing: 0; }
.fm-press { padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--a); }
.fm-press blockquote { margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: var(--text); font-style: italic; }
.fm-assign { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px; }
.fm-assign label { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--bg-alt); border: 1px solid var(--line); font-size: 14px; }
.fm-assign select { width: 170px; padding: 6px 8px; font-size: 13px; }
.fm-entry { display: grid; grid-template-columns: 1fr 64px 12px 64px 1fr; align-items: center; gap: 8px; font-size: 14px; }
.fm-entry input { text-align: center; padding: 6px; }
@media (max-width: 640px) { .fm-match { padding: 10px; gap: 8px; } .fm-side span { font-size: 13px; } .fm-clubstats { margin-left: 0; } }

/* ---------------------------------------------------------------- promotions posts */
.promo-groups { display: flex; flex-direction: column; gap: 26px; margin: 26px 0; }
.promo-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.promo-head h2 { font-size: 26px; margin: 0; }
.promo-ic { display: grid; place-items: center; width: 42px; height: 42px; font-size: 22px; background: var(--panel); border: 1px solid var(--line-accent); }
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.promo-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 14px 18px; text-align: center; color: var(--text); overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--c); transition: transform 0.2s, border-color 0.2s; }
.promo-card:hover { color: var(--text); transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 60%, var(--line)); }
.promo-card .avatar { width: 72px; height: 72px; border: 2px solid var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.promo-card strong { font: 700 20px/1.1 var(--f-head); text-transform: uppercase; }
.promo-roles { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; font: 500 11px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.promo-roles .from { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.promo-roles .arrow { color: var(--c); }
.promo-roles .to { color: var(--c); padding: 2px 6px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); }
.promo-years { display: flex; flex-direction: column; align-items: center; font: 500 10px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); }
.promo-years b { font: 700 32px/1 var(--f-head); color: var(--text); }
.promo-note { font-size: 13px; color: var(--text-2); font-style: italic; }
.promo-pick { display: flex; flex-direction: column; gap: 6px; }
.promo-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--bg-alt); border: 1px solid var(--line); flex-wrap: wrap; }
.promo-row:has(input[type=checkbox]:checked) { border-color: var(--line-accent); background: color-mix(in srgb, var(--accent) 7%, var(--bg-alt)); }
.promo-row.done { opacity: 0.6; }
.promo-img { display: flex; flex-direction: column; gap: 10px; }
.promo-img img { vertical-align: middle; margin-left: 10px; border: 1px solid var(--line); }

/* ---------------------------------------------------------------- news cards (picture on top, never cropped badly) */
.news-feature { display: flex; flex-direction: column; border-top: 3px solid var(--cc, var(--accent)); }
.nf-cover { display: block; aspect-ratio: 16 / 7; overflow: hidden; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.nf-cover > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.news-feature:hover .nf-cover > img { transform: scale(1.02); }
.news-feature .body { padding: 22px 26px 24px; gap: 10px; }
.news-feature h3 { font-size: clamp(26px, 3vw, 34px); line-height: 1.05; }
.news-feature .body p { margin: 0; }
.nf-more { font-weight: 600; color: var(--link); }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.news-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--cc); color: var(--text); transition: border-color 0.2s, transform 0.2s; }
.news-card:hover { color: var(--text); border-color: color-mix(in srgb, var(--cc) 55%, var(--line)); transform: translateY(-2px); }
.nc-thumb { display: block; aspect-ratio: 16 / 7; overflow: hidden; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.nc-thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nc-fallback { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden;
  background: radial-gradient(ellipse at 30% 40%, color-mix(in srgb, var(--cc) 32%, transparent), transparent 70%), repeating-linear-gradient(135deg, color-mix(in srgb, var(--cc) 7%, #120f17) 0 12px, #0f0c14 12px 24px); }
.nc-fallback img { position: absolute; right: -6%; top: 50%; height: 150%; width: auto; transform: translateY(-50%); opacity: 0.16; filter: grayscale(0.3); }
.nc-fallback b { position: relative; font: 700 clamp(22px, 2.6vw, 30px)/1 var(--f-head); text-transform: uppercase; letter-spacing: 0.02em; color: var(--cc); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.nf-cover .nc-fallback b { font-size: clamp(40px, 6vw, 72px); }
.nc-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.nc-body .kicker { font: 500 11px/1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cc); }
.nc-body h3 { font-size: 22px; line-height: 1.08; margin: 0; }
.nc-ex { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nc-fallback img { height: 130%; opacity: 0.1; right: -4%; }
.nf-cover { max-height: 440px; }

/* news: back to the side-by-side lead story (picture fitted, not cropped) and slimmer card pictures */
.news-feature { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); flex-direction: initial; }
.nf-cover { position: relative; aspect-ratio: auto; min-height: 240px; max-height: none; border-bottom: 0; display: flex; align-items: center; justify-content: center; }
.nf-cover::before { content: ''; position: absolute; inset: -20px; background: var(--bg, none) center/cover; filter: blur(18px) brightness(0.45); }
.nf-cover > img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.news-feature:hover .nf-cover > img { transform: none; }
.nf-cover .nc-fallback { position: absolute; inset: 0; }
.nf-cover .nc-fallback b { font-size: clamp(30px, 3.4vw, 44px); }
.news-feature .body { padding: 28px; gap: 12px; }
.news-feature h3 { font-size: 32px; }
.nc-thumb { aspect-ratio: auto; height: 92px; }
.nc-fallback b { font-size: 20px; }

/* news: lead picture fills its box edge to edge (wide column so banners barely crop); cards always fill the row */
.news-feature { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.nf-cover { min-height: 210px; }
.nf-cover::before { display: none; }
.nf-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.news-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
@media (max-width: 760px) { .news-feature { grid-template-columns: 1fr; } .nf-cover { aspect-ratio: 16 / 7; min-height: 0; } }
.news-feature { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.nf-cover { aspect-ratio: 16 / 7; min-height: 0; height: 100%; }
.news-feature .body { padding: 20px 24px; gap: 8px; justify-content: center; }
.news-feature h3 { font-size: 27px; line-height: 1.05; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-feature .body p { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

/* ---------------------------------------------------------------- your own pages: tabs as a slim bar under the header */
.subbar { background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.subbar .self-nav { border-bottom: 0; margin-bottom: 0; min-height: 48px; }
.subbar .self-nav .tabs a { padding-top: 13px; padding-bottom: 13px; }
.subbar .self-nav .btn { padding: 5px 10px; }
.ribbon-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ribbon-row:hover .rr-cell { filter: brightness(1.12); }
.rr-cell { position: relative; display: block; line-height: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.rr-more { font: 500 11px var(--f-mono); color: var(--muted); padding-left: 2px; }

/* ---------------------------------------------------------------- racing panel on profiles */
.zr-tabs { display: flex; border-bottom: 1px solid var(--line); padding: 0 12px; }
.zr-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 10px 9px; font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); cursor: pointer; }
.zr-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.zr-num { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 6px; font: 700 24px/1 var(--f-head); background: var(--bg-alt); border: 1px solid var(--line-accent); color: var(--accent); }
.zr-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-soft); }
.zr-stat { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-left: 1px solid var(--line-soft); }
.zr-stat:first-child { border-left: 0; }
.zr-stat b { font: 700 22px/1 var(--f-head); }
.zr-stat i { font: 500 9.5px/1.4 var(--f-mono); font-style: normal; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.zr-next { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--bg-alt); border: 1px solid var(--line); border-left: 3px solid var(--accent); color: var(--text); }
.zr-next:hover { color: var(--text); border-color: var(--line-accent); }
.zr-next span:nth-child(2) { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.mini-standings li.me { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.zr-more { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }

/* join steps: subtle (glassy, thin lines, a soft accent edge instead of a glowing block) */
.hero-steps .hs { padding: 12px 16px; gap: 12px; background: rgba(12, 10, 16, 0.38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(242, 238, 247, 0.08); border-left: 2px solid rgba(242, 238, 247, 0.1); box-shadow: none; animation-name: hsSoft; }
.hero-steps .hs b { width: 30px; height: 30px; font-size: 17px; border-color: rgba(157, 107, 255, 0.35); animation-name: hsNumSoft; }
.hero-steps .hs strong { font-size: 15px; }
.hero-steps .hs span { font-size: 13px; }
.hero-steps .hs-arrow { width: 34px; color: rgba(157, 107, 255, 0.6); }
@keyframes hsSoft { 0%, 30% { border-left-color: var(--accent); background: rgba(157, 107, 255, 0.08); } 36%, 100% { border-left-color: rgba(242, 238, 247, 0.1); background: rgba(12, 10, 16, 0.38); } }
@keyframes hsNumSoft { 0%, 30% { color: var(--text); border-color: var(--accent); } 36%, 100% { color: var(--accent); border-color: rgba(157, 107, 255, 0.35); } }

/* ---------------------------------------------------------------- back link */
main#content { position: relative; }
.backbar { position: absolute; top: 12px; left: 0; right: 0; z-index: 5; pointer-events: none; }
.backlink { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 6px; font: 500 12px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); background: rgba(12, 10, 16, 0.55); border: 1px solid var(--line-soft); }
.backlink:hover { color: var(--text); border-color: var(--line-accent); }
.staff .backbar, body:has(.staff) .backbar { display: none; }
.backbar:has(+ .subbar), body:has(.subbar) .backbar { display: none; }
@media (max-width: 760px) { .nf-cover { height: auto; width: 100%; } }
@media (max-width: 640px) {
  .linked-t tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); }
  .linked-t td { display: block; border: 0; padding: 0; width: auto !important; }
  .linked-t td.right { flex: 1 1 100%; text-align: left; }
  .linked-t td.right .row { justify-content: flex-start; }
  .linked-t input[type=text] { max-width: none !important; flex: 1; }
}
@media (max-width: 760px) {
  .news-feature { grid-template-columns: 1fr; }
  .nf-cover { aspect-ratio: 16 / 7; height: auto; width: 100%; }
  .news-feature .body { padding: 16px 18px 18px; }
  .news-feature h3 { font-size: 24px; }
}
@media (max-width: 760px) { .nc-thumb { height: auto; aspect-ratio: 16 / 7; } }

/* Staff HQ admin tools */
.nav-edit td { vertical-align: middle; }
.nav-edit .nav-grip { white-space: nowrap; }
.nav-edit .nav-grip .btn { padding: 4px 8px; min-width: 0; }
.nav-edit input[type=text], .nav-edit select { width: 100%; min-width: 120px; }
.nav-edit td .faint { display: block; margin-top: 4px; }
.main-nav .ext { font-size: .75em; opacity: .6; }
.reset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px 24px; margin-top: 12px; }
.who-people { display: flex; flex-wrap: wrap; gap: 8px; }
.who-person { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); color: inherit; font-size: 14px; }
.who-person:hover { border-color: var(--accent); }
.who-caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 20px; margin-top: 10px; }
.who-caps ul { margin: 4px 0 0; padding-left: 18px; }
@media (max-width: 720px) {
  .nav-edit thead { display: none; }
  .nav-edit tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
  .nav-edit td { display: block; padding: 0; border: 0; }
  .nav-edit td:nth-child(2), .nav-edit td:nth-child(3) { grid-column: 1 / -1; }
}

/* Application: an open book. Left page = the essentials, right page = about you. */
.apply-book .book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); background: var(--panel); border: 1px solid var(--line); position: relative; box-shadow: 0 24px 60px -30px rgba(0,0,0,.7); }
.apply-book .book::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(100% * 1 / 2.15); width: 1px; background: var(--line); box-shadow: 0 0 22px 6px rgba(0,0,0,.35); pointer-events: none; }
.book-page { padding: 32px 34px; min-width: 0; }
.book-page.bp-left { background: linear-gradient(90deg, transparent 85%, rgba(0,0,0,.18)); }
.book-page.bp-right { background: linear-gradient(270deg, transparent 88%, rgba(0,0,0,.14)); }
.book-kicker { font: 600 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.rules-scroll { font-size: 14px; line-height: 1.55; max-height: 260px; overflow-y: auto; padding: 14px 16px; border: 1px solid var(--line); background: var(--bg); scrollbar-width: thin; }
.rules-scroll.prose h3 { font-size: 16px; margin: 14px 0 6px; }
.rules-scroll.prose h3:first-child { margin-top: 0; }
.tag-rule, .expect { padding: 14px 16px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.tag-rule code, .recruit-welcome code { font: 600 13px var(--f-mono); padding: 1px 6px; background: var(--bg); border: 1px solid var(--line); }
.expect ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.style-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.style-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); cursor: pointer; }
.style-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.style-opt span { display: flex; flex-direction: column; gap: 3px; }
.acc-box { border: 1px dashed var(--line); padding: 14px 16px; margin: 0; }
.acc-box legend { padding: 0 6px; }
.fields-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.book-actions { margin-top: 20px; }
.recruit-welcome ul { display: grid; gap: 8px; padding-left: 18px; margin: 0; }
.rv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.rv-row > a:first-child { flex: 1 1 220px; }
.rv-vote { display: flex; gap: 6px; flex-wrap: wrap; }
.rv-vote .btn.on { border-color: var(--accent); color: var(--accent); }
.officer-pick select { min-width: 130px; min-height: 32px; padding: 4px 8px; font-size: 13px; }
@media (max-width: 900px) {
  .apply-book .book { grid-template-columns: 1fr; }
  .apply-book .book::before { display: none; }
  .book-page { padding: 22px 18px; }
  .book-page.bp-left { border-bottom: 1px solid var(--line); background: none; }
  .book-page.bp-right { background: none; }
  .style-pick, .fields-3 { grid-template-columns: 1fr; }
}
.rules-scroll p, .rules-scroll li { font-size: 14px; }
.motm-who .avatar { width: 48px; height: 48px; flex: none; }
.motm-cands.compact .motm-who .avatar { width: 44px; height: 44px; }
.motm-cands:not(.compact) .motm-who .avatar { width: 56px; height: 56px; }
.motm-spot.big .motm-who .avatar { width: 84px; height: 84px; }
.motm-hof .motm-who .avatar { width: 40px; height: 40px; }
.motm-home, .motm-vote { border-top: 2px solid var(--gold); }
/* Application, simplified: page 1 is just 18+ and the rules. */
.check-lg { padding: 14px 16px; border: 1px solid var(--line); background: var(--bg); }
.check-lg:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.check-lg > span { display: flex; flex-direction: column; gap: 3px; }
.check-lg strong { font-size: 16px; }
.bp-left .rules-scroll { max-height: 440px; min-height: 300px; }
.style-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.style-opt { align-items: center; }
.book .rules-scroll h3 { font-size: 16px; margin: 18px 0 6px; } .book .rules-scroll h3:first-child { margin-top: 0; }
.book .rules-scroll :is(h3, h4, h5) { font-size: 15px; margin: 18px 0 6px; letter-spacing: .04em; } .book .rules-scroll :is(h3, h4, h5):first-child { margin-top: 0; }

/* ---------------------------------------------------------------- Application (/apply): three short steps, one at a time */
.ap-page { max-width: 760px; }
.ap-page .page-head { margin-bottom: 28px; }
.ap-progress { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; counter-reset: ap; }
.ap-progress li { counter-increment: ap; position: relative; padding-top: 12px; color: var(--muted); font-size: 14px; font-weight: 600; }
.ap-progress li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--line); transition: background .25s; }
.ap-progress li span::before { content: counter(ap) "  "; color: var(--faint, var(--muted)); font-family: var(--f-head); margin-right: 4px; }
.ap-progress li.on { color: var(--text); }
.ap-progress li.on::before, .ap-progress li.done::before { background: var(--accent); }
.ap-progress li.done { color: var(--text-2); }
.ap-step { border: 1px solid var(--line); background: var(--panel); margin: 0 0 16px; padding: 0; min-width: 0; }
.ap-step-head { padding: 24px 28px 0; }
.ap-step-head h2 { font: 700 30px/1 var(--f-head); text-transform: uppercase; margin: 0; }
.ap-step-head p { margin: 8px 0 0; color: var(--text-2); }
.ap-step-body { padding: 22px 28px 6px; display: flex; flex-direction: column; gap: 20px; }
.ap-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 28px 24px; }
/* Without JavaScript every step shows, and only the last one has a button. */
.ap:not(.js) .ap-nav [data-ap-next], .ap:not(.js) .ap-nav [data-ap-back], .ap:not(.js) .ap-progress { display: none; }
.ap.js .ap-step:not(.on) { display: none; }
.ap.js .ap-step.on { animation: apIn .22s ease-out; }
@keyframes apIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ap.js .ap-step.on { animation: none; } }

.ap-rules { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: rule; }
.ap-rules li { counter-increment: rule; border-bottom: 1px solid var(--line); }
.ap-rules summary, .ap-rule { display: flex; align-items: baseline; gap: 14px; padding: 13px 4px; font-weight: 600; cursor: pointer; list-style: none; }
.ap-rule { cursor: default; }
.ap-rules summary::-webkit-details-marker { display: none; }
.ap-rules summary::before, .ap-rule::before { content: counter(rule); font: 700 18px/1 var(--f-head); color: var(--accent); min-width: 18px; }
.ap-rules summary::after { content: "+"; margin-left: auto; color: var(--muted); font-weight: 400; }
.ap-rules details[open] summary::after { content: "–"; }
.ap-rules summary:hover { color: var(--accent); }
.ap-rules details p { margin: -4px 0 14px 36px; color: var(--text-2); font-size: 14.5px; max-width: 60ch; }
.ap-rules li:first-child summary { color: var(--text); }

.ap-agree { display: grid; gap: 10px; }
.ap-tick, .ap-chip { position: relative; cursor: pointer; }
.ap-tick input, .ap-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ap-tick > span { display: grid; grid-template-columns: 24px 1fr; column-gap: 14px; row-gap: 2px; padding: 15px 16px; border: 1px solid var(--line); background: var(--bg); transition: border-color .15s, background .15s; }
.ap-tick > span::before { content: ""; grid-row: 1 / span 2; width: 22px; height: 22px; border: 2px solid var(--line-hover); align-self: center; background: center / 14px no-repeat; }
.ap-tick strong { font-size: 16px; }
.ap-tick small { color: var(--text-2); font-size: 13.5px; }
.ap-tick input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.ap-tick input:checked + span::before, .ap-chip input:checked + span::before { background-color: var(--accent); border-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%230c0a10' stroke-width='2.4'/%3E%3C/svg%3E"); }
.ap-tick input:focus-visible + span, .ap-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ap-tick.bad > span { border-color: var(--red); }

.ap-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-chip > span { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); background: var(--bg); font-weight: 600; transition: border-color .15s, background .15s; }
.ap-chip > span::before { content: ""; width: 16px; height: 16px; flex: none; border: 2px solid var(--line-hover); background: center / 11px no-repeat; }
.ap-chip small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; margin-left: 6px; }
.ap-chip:hover > span { border-color: var(--line-hover); }
.ap-chip input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.ap-chips.bad .ap-chip > span { border-color: var(--red); }
.ap-err { color: var(--red); font-size: 14px; margin: -8px 0 0; }
@media (max-width: 600px) {
  .ap-step-head { padding: 20px 18px 0; } .ap-step-body { padding: 18px 18px 4px; } .ap-nav { padding: 16px 18px 20px; }
  .ap-step-head h2 { font-size: 26px; }
  .ap-progress li { font-size: 12.5px; }
  .ap-nav .btn-big { flex: 1; }
}
.ap { scroll-margin-top: 92px; }

/* Launch checklist */
.launch-score { display: grid; gap: 10px; border-top: 3px solid var(--gold); }
.launch-score.ok { border-top-color: var(--green); } .launch-score.bad { border-top-color: var(--red); }
.launch-score strong { font: 700 34px/1 var(--f-head); }
.launch-score p { margin: 0; }
.launch-bar { height: 8px; background: var(--line); }
.launch-bar span { display: block; height: 100%; background: var(--green); }
.launch-list { list-style: none; margin: 0; padding: 0; }
.launch-list li { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--line-soft); }
.launch-list li:last-child { border-bottom: 0; }
.ll-mark { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 1px solid currentColor; }
.ll-ok .ll-mark { color: var(--green); } .ll-warn .ll-mark { color: var(--gold); } .ll-bad .ll-mark { color: var(--red); }
.ll-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bday-panel { border-top: 2px solid #ff6fae; }

/* Polls */
.poll { border-top: 2px solid var(--accent); }
.poll-body { display: grid; gap: 8px; padding: 18px 22px 6px; }
.poll-opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; font: inherit; font-weight: 600; color: var(--text); background: var(--bg); border: 1px solid var(--line); cursor: pointer; overflow: hidden; }
.poll-opt:not(:disabled):hover { border-color: var(--line-hover); }
.poll-opt:disabled { cursor: default; }
.poll-opt.mine { border-color: var(--accent); }
.poll-opt.won { border-color: var(--gold); }
.poll-fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 16%, transparent); pointer-events: none; }
.poll-opt.won .poll-fill { background: color-mix(in srgb, var(--gold) 16%, transparent); }
.poll-label, .poll-n { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.poll-label svg { color: var(--accent); }
.poll-n { font: 700 18px var(--f-head); white-space: nowrap; }
.poll-n small { font: 500 12px var(--f-mono); color: var(--muted); }
.poll-foot { margin: 0; padding: 4px 22px 18px; }
.poll.compact .poll-body { padding-top: 14px; }
.poll-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 600px) { .poll-answers { grid-template-columns: 1fr; } .poll-body { padding: 14px 16px 4px; } .poll-foot { padding: 4px 16px 16px; } }
.staff-notes { border-top: 2px solid var(--blue); }
.note-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.note-list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 14px; background: var(--bg); border-left: 2px solid var(--line-hover); }
.note-list p { margin: 0; white-space: pre-wrap; grid-column: 1; }
.note-list .tiny { grid-column: 1; }
.note-list form { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* Game servers */
.srv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.srv { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--gc); min-width: 0; }
.srv.compact { padding: 12px 14px; gap: 8px; background: var(--bg); border-top-width: 1px; border-left: 2px solid var(--gc); }
.srv-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.srv-dot { width: 10px; height: 10px; flex: none; background: var(--faint); }
.srv-up .srv-dot { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }
.srv-full .srv-dot { background: var(--gold); }
.srv-down .srv-dot { background: var(--red); }
.srv-name { font: 700 19px/1.15 var(--f-head); text-transform: uppercase; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.srv.compact .srv-name { font-size: 16px; }
.srv-state { font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.srv-up .srv-state { color: var(--green); } .srv-down .srv-state { color: var(--red); } .srv-full .srv-state { color: var(--gold); }
.srv-pop { display: flex; align-items: center; gap: 12px; }
.srv-count { font: 500 14px var(--f-mono); color: var(--muted); white-space: nowrap; }
.srv-count b { font: 700 22px var(--f-head); color: var(--text); }
.srv.compact .srv-count b { font-size: 17px; }
.srv-bar { flex: 1; height: 6px; background: var(--line); }
.srv-bar span { display: block; height: 100%; background: var(--gc); }
.srv-map { font-size: 14px; color: var(--text-2); }
.srv-desc { margin: 0; font-size: 14px; color: var(--text-2); }
.srv-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 12px var(--f-mono); color: var(--muted); }
.srv-meta:empty { display: none; }
.srv-meta span { display: inline-flex; align-items: center; gap: 5px; }
.srv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.srv-addr { font-family: var(--f-mono); font-weight: 500; }
.srv-copy { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--link); font: 500 12.5px var(--f-mono); cursor: pointer; }
.srv-copy:hover { text-decoration: underline; }
.srv.compact { border-top-color: var(--line); } .srv.compact .srv-name { white-space: normal; overflow: visible; }

/* Staff HQ search */
.staff-search { padding: 0 16px 14px; }
.staff-search input { width: 100%; min-height: 38px; padding: 8px 12px; font-size: 14px; }
.staff-nav a.ss-hide, .staff-nav .head.ss-hide { display: none; }
.search-hits { display: grid; gap: 2px; padding-top: 8px; padding-bottom: 8px; }
.search-hits > a { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; color: var(--text); border-left: 2px solid transparent; }
.search-hits > a:hover { background: var(--bg); border-left-color: var(--accent); color: var(--text); }
.set-anchor { scroll-margin-top: 100px; }
.set-anchor:target { outline: 2px solid var(--accent); outline-offset: 8px; animation: setFlash 1.6s ease-out; }
@keyframes setFlash { from { background: color-mix(in srgb, var(--accent) 18%, transparent); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .set-anchor:target { animation: none; } }
.inv-list { display: grid; gap: 8px; }
.inv { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 14px; background: var(--bg); border-left: 2px solid var(--accent); }
.inv:not(.inv-ready) { border-left-color: var(--line-hover); opacity: .75; }
.inv-main { display: flex; flex-direction: column; gap: 3px; flex: 1 1 220px; min-width: 0; }
.inv-url { font-family: var(--f-mono); font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Streamers */
.stream-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.stream-live { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.stream-live:hover { border-color: #9146ff; color: var(--text); }
.sl-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--bg); overflow: hidden; }
.sl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-badge { position: absolute; top: 8px; left: 8px; padding: 2px 7px; background: var(--red); color: #fff; font: 700 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.sl-viewers { position: absolute; bottom: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; background: rgba(0,0,0,.72); font: 600 12px var(--f-mono); }
.sl-info { display: flex; gap: 12px; padding: 12px 14px; align-items: flex-start; }
.sl-info strong { font: 700 17px/1.1 var(--f-head); text-transform: uppercase; }
.sl-title { font-size: 14px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stream-live.compact .sl-info { padding: 10px 12px; }
.stream-live.compact .sl-title { font-size: 13px; }
.stream-panel { border-top: 2px solid #9146ff; }
.streamer-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.streamer { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-left: 2px solid #9146ff; color: var(--text); min-width: 0; }
.streamer:hover { border-color: #9146ff; color: var(--text); }
.streamer strong { font: 700 17px/1.1 var(--f-head); text-transform: uppercase; }
.streamer .role-badge { margin-left: auto; }
.sb-chan { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sb-chan .grow { display: flex; flex-direction: column; min-width: 0; }
.sb-chan strong { overflow: hidden; text-overflow: ellipsis; }
.sb-ic { width: 40px; height: 40px; display: grid; place-items: center; background: var(--twitch); color: #fff; flex: none; }
.streamer-box .btn { width: 100%; justify-content: center; }

/* Staff team page */
.team-page { max-width: 1000px; }
.team-roles { display: grid; gap: 14px; }
.team-role { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 6px 32px; padding: 24px 26px; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--rc); }
.team-role header { grid-row: span 2; display: flex; flex-direction: column; gap: 8px; }
.team-role h2 { font: 700 30px/1 var(--f-head); text-transform: uppercase; margin: 0; color: var(--rc); }
.team-role header p { margin: 0; font-size: 16px; color: var(--text); font-weight: 600; }
.team-job { font-size: 15px; }
.team-job ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.team-people { display: flex; flex-wrap: wrap; gap: 8px; align-self: end; padding-top: 10px; }
.team-people a { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border: 1px solid var(--line); color: var(--text); font-size: 14px; font-weight: 600; }
.team-people a:hover { border-color: var(--rc); color: var(--text); }
.team-people .avatar { width: 30px; height: 30px; }
.team-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: 28px; padding: 26px 28px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.team-cta h2 { font: 700 28px/1 var(--f-head); text-transform: uppercase; margin: 0 0 6px; }
.team-cta p { margin: 0; color: var(--text-2); max-width: 60ch; }
@media (max-width: 760px) { .team-role { grid-template-columns: 1fr; padding: 20px 18px; } .team-role header { grid-row: auto; } }

/* Feedback */
.fb-item { display: grid; gap: 6px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.fb-item p { margin: 0; white-space: pre-wrap; }
.fb-planned { border-left-color: var(--blue); } .fb-done { border-left-color: var(--green); } .fb-declined { border-left-color: var(--faint); }
.fb-status { font: 600 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fb-reply { padding: 8px 12px; background: var(--bg); font-size: 14px; color: var(--text-2); }

/* ---------------------------------------------------------------- Roster (cards by tier) */
.roster-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 14px 16px; margin-bottom: 30px; background: var(--panel); border: 1px solid var(--line); position: sticky; top: 72px; z-index: 5; }
.rf { display: flex; flex-direction: column; gap: 5px; flex: 1 1 140px; min-width: 0; }
.rf .lbl { font: 600 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rf select, .rf input { min-height: 38px; padding: 6px 10px; font-size: 14px; width: 100%; }
.rf-search { flex: 2 1 200px; }
.rf-lfp { flex: 0 0 auto; padding-bottom: 8px; white-space: nowrap; }
.rc-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tier-command .rc-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.tier-new .rc-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.rc { --ac: var(--accent); position: relative; display: block; color: var(--text); min-width: 0; }
.rc:hover { color: var(--text); }
.rc:not(.flip), .rc.flip .face { background: var(--panel); border: 1px solid var(--line); }
.rc.flip { perspective: 1000px; }
.rc.flip .flip-in { position: relative; display: grid; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.rc.flip .face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; min-width: 0; }
.rc.flip .back { transform: rotateY(180deg); justify-content: center; gap: 6px; padding: 12px 16px; border-color: var(--ac); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .rc.flip:hover .flip-in, .rc.flip:focus-visible .flip-in { transform: rotateY(180deg); } }
.rc .face.front, .rc:not(.flip) { border-top: 2px solid var(--ac); }
.rc-banner { display: block; height: 54px; background: linear-gradient(120deg, color-mix(in srgb, var(--ac) 38%, var(--bg)), var(--bg) 70%) center / cover; position: relative; }
.rc-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, var(--panel)); }
.tier-command .rc-banner { height: 78px; }
.rc-body { display: flex; align-items: center; gap: 14px; padding: 0 16px 12px; min-width: 0; }
.rc-banner + .rc-body { margin-top: -26px; position: relative; }
.tier-command .rc-banner + .rc-body { margin-top: -34px; }
.rc-body .avatar { flex: none; border: 2px solid var(--ac); background: var(--bg); }
.tier-command .rc-body .avatar { width: 64px; height: 64px; }
.tier-members .rc-body .avatar { width: 52px; height: 52px; }
.tier-new .rc-body .avatar { width: 40px; height: 40px; border-width: 1px; }
.tier-new .rc-body { padding: 10px 12px; }
.rc-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 22px; }
.tier-new .rc-who { padding-top: 0; }
.rc-name { font: 700 19px/1.1 var(--f-head); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tier-command .rc-name { font-size: 23px; }
.tier-new .rc-name { font-size: 16px; }
.rc-rank { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.rc-rank svg { flex: none; }
.rc-status { font: 600 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rc-status.lfp { color: var(--green); }
.rc-status.lfp::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent); vertical-align: 1px; }
.rc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px 14px; border-top: 1px solid var(--line-soft); margin-top: auto; }
.rc-games { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.rc-game { padding: 2px 7px; font: 600 11px var(--f-mono); letter-spacing: .04em; text-transform: uppercase; border-left: 2px solid var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); white-space: nowrap; }
.rc-more { font: 600 11px var(--f-mono); color: var(--muted); align-self: center; }
.rc-ribbons { display: flex; gap: 3px; flex: none; }
.rc-ribbons svg { display: block; }
.group-head h2 { color: var(--rc); }
@media (max-width: 700px) { .roster-filters { position: static; } .rf { flex: 1 1 45%; } .rf-search { flex: 1 1 100%; } }

/* Personal colour and banner pickers (Settings) */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch-pick input, .banner-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch-pick span { display: grid; place-items: center; width: 40px; height: 40px; background: var(--c); border: 2px solid var(--line); font: 700 10px var(--f-mono); color: var(--accent-ink); cursor: pointer; }
.swatch-pick input:checked + span { outline: 2px solid var(--text); outline-offset: 2px; }
.swatch-pick input:focus-visible + span, .banner-pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.banner-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.banner-pick span { position: relative; display: flex; align-items: flex-end; height: 64px; padding: 6px 8px; background: var(--bg) center / cover; border: 2px solid var(--line); cursor: pointer; }
.banner-pick span b { position: relative; font: 600 11px var(--f-mono); text-transform: uppercase; text-shadow: 0 1px 3px #000; }
.banner-pick span::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.7)); }
.banner-pick .bp-none { align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.banner-pick .bp-none::before { display: none; }
.banner-pick input:checked + span { border-color: var(--accent); }

/* Up for a game */
.ufg-panel { border-top: 2px solid var(--green); }
.ufg-list { display: grid; gap: 8px; }
.ufg { display: flex; align-items: center; gap: 10px; color: var(--text); }
.ufg:hover { color: var(--text); }
.ufg .avatar { width: 32px; height: 32px; border: 1px solid var(--green); }
.ufg-form { display: flex; flex-wrap: wrap; gap: 6px; }
.ufg-form select { flex: 1 1 110px; min-height: 34px; padding: 4px 8px; font-size: 13px; }
.ufg-form .btn { flex: 1 1 100%; }
.profile-hero { position: relative; background: var(--bg-alt); border-top: 3px solid var(--ac); }
.profile-hero::before { content: ""; position: absolute; inset: 0; background: var(--pb, none) center / cover; opacity: .22; pointer-events: none; }
.profile-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg-alt) 25%, transparent), linear-gradient(0deg, var(--bg-alt), transparent 60%); pointer-events: none; }
.profile-hero > .wrap { position: relative; z-index: 1; }
.profile-hero .avatar.lg { border: 3px solid var(--ac); }
.rc.flip .face.front { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 0; }
.rc.flip .face.back { background: linear-gradient(135deg, color-mix(in srgb, var(--ac) 12%, var(--panel)), var(--panel) 60%); }
.rc:not(.flip) { display: flex; flex-direction: column; }
.rc-banner::after { background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 30%, transparent), var(--panel) 92%); }
.rc-banner[style] { filter: saturate(.85); }
.tier-new .rc-body { align-items: center; }

/* Roster v2: one-tap filters, more compact cards */
.roster-filters { display: grid; gap: 10px; position: static; padding: 14px 16px; margin-bottom: 26px; }
.rf-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rf-top input[type=search] { flex: 1 1 220px; min-height: 36px; padding: 6px 12px; font-size: 14px; }
.rf-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rf-row .lbl { flex: 0 0 74px; font: 600 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rf-row .pills { margin: 0; }
.rf-pair { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.roster-filters .pill { padding: 5px 11px; font-size: 13px; cursor: pointer; font-family: inherit; }
.pill-lfp[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--accent-ink); }
.rf-sort { margin-left: auto; }
.rc-grid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.tier-command .rc-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.tier-new .rc-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.rc-banner { height: 34px; }
.tier-command .rc-banner { height: 46px; }
.rc-body { gap: 11px; padding: 0 12px 9px; }
.rc-banner + .rc-body { margin-top: -18px; }
.tier-command .rc-banner + .rc-body { margin-top: -22px; }
.tier-command .rc-body .avatar { width: 50px; height: 50px; }
.tier-members .rc-body .avatar { width: 42px; height: 42px; }
.tier-new .rc-body .avatar { width: 34px; height: 34px; }
.tier-new .rc-body { padding: 8px 10px; }
.rc-who { padding-top: 16px; gap: 2px; }
.rc-name { font-size: 17px; }
.tier-command .rc-name { font-size: 19px; }
.tier-new .rc-name { font-size: 15px; }
.rc-rank { font-size: 12.5px; }
.rc-status { font-size: 10.5px; }
.rc-foot { padding: 7px 12px 9px; gap: 8px; }
.rc-game { padding: 1px 6px; font-size: 10.5px; }
.roster .group-head h2 { font-size: 26px; }
@media (max-width: 700px) { .rf-row { flex-wrap: wrap; } .rf-row .lbl { flex-basis: 100%; } .rf-sort { margin-left: 0; } .roster .rc-grid { grid-template-columns: 1fr 1fr; } .roster .tier-command .rc-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .roster .rc-grid { grid-template-columns: 1fr; } }
.rc-games { flex-wrap: nowrap; overflow: hidden; }
.rc-ribbons svg { width: 26px; height: 9px; }
/* Roster cards: banner only when the member picked one; name and rank centred on the picture. */
.rc-body, .tier-command .rc-body, .tier-new .rc-body { align-items: center; padding: 12px 12px 10px; margin-top: 0; }
.rc-banner + .rc-body, .tier-command .rc-banner + .rc-body { margin-top: 0; }
.rc-who, .tier-new .rc-who { padding-top: 0; justify-content: center; }
.rc-banner, .tier-command .rc-banner { height: 40px; }
.rc-banner::after { background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 25%, transparent), color-mix(in srgb, var(--panel) 70%, transparent)); }
.rc .face.front, .rc:not(.flip) { background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 7%, var(--panel)), var(--panel) 55%); }
.rc-grid { align-items: start; } .rc-foot { margin-top: 0; }

/* Phones: long names, links and paths wrap instead of pushing the page sideways */
h1, h2 { overflow-wrap: break-word; }
.row > h1, .row > div > h1 { min-width: 0; }
.list-rows .grow { min-width: 0; overflow-wrap: anywhere; }
.inv-url { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; }
@media (max-width: 600px) {
  .list-rows > div { flex-wrap: wrap; }
  h1 { overflow-wrap: anywhere; }
}
[inert] input, [inert] select { opacity: .55; cursor: not-allowed; }
.new-recruits a { color: var(--text); display: flex; align-items: center; gap: 12px; min-width: 0; }
.new-recruits a:hover { color: var(--text); }
.new-recruits a:hover strong { color: var(--link); }
.new-recruits .grow { min-width: 0; display: flex; flex-direction: column; }
.new-recruits strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
/* Separate tiles */
.wa-tiles { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.wa-tiles a { padding: 10px 12px; background: var(--panel-2); border-left: 3px solid var(--accent); }
.wa-tiles a.k-member { border-left-color: var(--green); }
.wa-tiles a.k-back { border-left-color: var(--gold); }
.wa-tiles a:hover { background: var(--line-soft); }
/* Divided rows */
.wa-rows a { padding: 12px 22px; border-bottom: 1px solid var(--line); }
.wa-rows a:last-child { border-bottom: 0; }
.wa-rows a:hover { background: var(--panel-2); }
.wa-rows .badge { flex: none; }
/* Grouped */
.wa-groups > div { padding: 14px 22px 10px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.wa-groups > div:last-child { border-bottom: 0; }
.wa-groups .label { margin-bottom: 4px; }
.wa-groups a { padding: 5px 0; }
.wa-groups a .tiny { flex: none; }
/* Folding sections on big module settings pages */
.set-section { border: 1px solid var(--line); background: var(--panel); }
.set-section + .set-section { margin-top: 10px; }
.set-section > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto 20px; align-items: center; gap: 14px; padding: 14px 18px; font-family: var(--font-display, inherit); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.set-section > summary::-webkit-details-marker { display: none; }
.set-section > summary::after { content: '+'; font-size: 20px; line-height: 1; color: var(--text-2); text-align: right; }
.set-section[open] > summary::after { content: '−'; }
.set-section[open] > summary { border-bottom: 1px solid var(--line); }
.set-section-body { padding: 18px; }
/* Home: this week on Discord */
.wk-stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.wk-stats > div { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wk-stats > div + div { border-left: 1px solid var(--line); }
.wk-stats strong { font: 700 34px/1.05 var(--f-head); }
.wk-chg { font-size: 13px; color: var(--text-2); }
.wk-chg.up { color: var(--green); }
.wk-chg.down { color: var(--text-2); }
.wk-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.wk-chart { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.wk-chart figcaption { font-size: 13px; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; }
.wk-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 130px; }
.wk-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; cursor: default; }
.wk-track { flex: 1; display: flex; align-items: flex-end; border-bottom: 1px solid var(--line-hover); }
.wk-bar { width: 100%; background: var(--accent); opacity: .55; }
.wk-col.today .wk-bar { opacity: 1; }
.wk-col:hover .wk-bar { opacity: 1; filter: brightness(1.15); }
.wk-day { font-size: 11px; text-align: center; color: var(--text-2); height: 14px; line-height: 14px; }
.wk-col.today .wk-day { color: var(--text); font-weight: 700; }
@media (max-width: 700px) {
  .wk-stats { grid-template-columns: 1fr; } .wk-stats > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .wk-stats > div { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
  .wk-stats .label { flex-basis: 100%; }
  .wk-stats strong { font-size: 28px; }
  .wk-charts { grid-template-columns: 1fr; }
}
/* Footer: who's on the website */
.site-footer .wrap.footer-extra { padding-top: 0; padding-bottom: 22px; margin-top: -18px; }
.web-online { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.web-online .dot { width: 7px; height: 7px; background: var(--green); flex: none; }
.web-online-av { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.web-online-av .avatar, .web-online-av img { width: 20px; height: 20px; min-width: 20px; display: block; }
.web-online-av a { opacity: .85; } .web-online-av a:hover { opacity: 1; }
/* Sidebar: Who's on now / This week tabs */
.side-tabs > .panel-head { padding-top: 0; padding-bottom: 0; }
.st-tabs { display: flex; gap: 0; align-self: stretch; }
.st-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-2); font: 700 15px/1 var(--f-head); text-transform: uppercase; letter-spacing: .03em; padding: 18px 0 14px; margin-right: 20px; cursor: pointer; }
.st-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.st-tabs button:hover { color: var(--text); }
.wk-side { display: flex; flex-direction: column; gap: 16px; }
.wk-rows > div { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.wk-rows > div:first-child { padding-top: 0; }
.wk-rows strong { font: 700 20px/1 var(--f-head); }
.wk-rows .wk-chg { font-size: 12px; min-width: 44px; text-align: right; }
.wk-side .wk-bars { height: 90px; gap: 4px; }
.wk-side .wk-day { font-size: 10px; }
/* Home news row: as many equal columns as there are posts (max 3), so there's never a gap at the end */
.news-grid.news-row { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
@media (max-width: 760px) { .news-grid.news-row { grid-template-columns: 1fr; } }
/* Staff HQ → Modules */
.mod-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; }
.mod-tools input[type=search] { flex: 1 1 260px; max-width: 420px; }
.mod-group { margin-bottom: 22px; }
.mod-group > h2.label { margin: 0 0 8px; font-size: 12px; }
.mod-row { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--line-soft); }
.mod-row:last-child { border-bottom: 0; }
.mod-row.off strong { color: var(--text-2); }
@media (max-width: 600px) { .mod-row { flex-wrap: wrap; } .mod-row .grow { flex-basis: 100%; } }

/* Home sidebar boxes: a coloured top edge per kind of box, like the news posts */
/* Every titled box, and every sidebar box, across the site: a coloured top edge and a faint wash behind the title.
   The colour is --tc (set by the page or widget, e.g. blue for events), purple by default. */
/* every box: tables, forms and plain boxes too */
.panel { border-top: 3px solid var(--tc, var(--accent)); }
.panel .panel { border-top-width: 1px; border-top-color: var(--line); }
.panel > .panel-head { background: linear-gradient(180deg, color-mix(in srgb, var(--tc, var(--accent)) 9%, transparent), transparent); }
.cols > .side .panel:not(:has(> .panel-head)) { background-image: linear-gradient(180deg, color-mix(in srgb, var(--tc, var(--accent)) 6%, transparent), transparent 90px); }
/* News editor: banner picker */
.nb-pick { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.nb-pick legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.bp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; max-height: 470px; overflow-y: auto; padding-right: 4px; }
.bp-opt { position: relative; display: flex; flex-direction: column; gap: 6px; cursor: pointer; border: 2px solid var(--line); background: var(--panel-2); padding: 6px; font-size: 13px; color: var(--text-2); }
.bp-opt input { position: absolute; opacity: 0; pointer-events: none; }
.bp-opt img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block; }
.bp-opt[hidden] { display: none; }
.bp-opt .bp-auto small { font-size: 11px; color: var(--muted); }
.bp-opt .bp-auto { flex: 1; display: grid; place-items: center; text-align: center; aspect-ratio: 16 / 7; border: 1px dashed var(--line-hover); color: var(--text-2); padding: 6px; }
.bp-opt:hover { border-color: var(--line-hover); }
.bp-opt:has(input:checked) { border-color: var(--accent); color: var(--text); }
.bp-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) { .bp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A deliberate, quiet "nothing here yet" note */
.empty-note { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 24px; border: 1px dashed var(--line-hover); background: var(--panel); max-width: 640px; }
.empty-note .btn { margin-top: 8px; }
.quiet-empty { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; padding: 12px 16px; border-left: 3px solid var(--line-hover); background: var(--panel); color: var(--text-2); font-size: 14px; }
.wk-note { margin: -6px 0 0; }
.deco-more { border-top: 1px solid var(--line); }
.deco-more > summary { cursor: pointer; padding: 12px 20px; color: var(--link); font-weight: 600; list-style: none; }
.deco-more > summary::-webkit-details-marker { display: none; }
.deco-more > summary::after { content: ' +'; }
.deco-more[open] > summary::after { content: ' −'; }
.card.honour { display: flex; flex-direction: column; gap: 12px; }
.card.honour .deco-art { width: 80px; display: grid; place-items: center; flex: none; }
.svc-day details > summary { cursor: pointer; list-style: none; }
.svc-day details > summary::-webkit-details-marker { display: none; }
.svc-day details > summary .faint::after { content: ' ▾'; }
.svc-day details[open] > summary .faint::after { content: ' ▴'; }
.svc-steps { margin: 6px 0 0; padding-left: 18px; color: var(--text-2); display: flex; flex-direction: column; gap: 2px; }
.card.honour > .row { align-items: flex-start !important; }
@media (max-width: 420px) { .btn-big { white-space: normal; text-align: center; max-width: 100%; } .row > h2, .row > div > h2 { min-width: 0; overflow-wrap: anywhere; } }
/* Profile: dates on their own line; decorations line up (same width for every insignia) */
.pf-dates { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--text); }
.deco-art { width: 72px; min-width: 72px; }

/* Boxes whose title sits straight inside the padding get the same title bar as .panel-head boxes,
   so every box on the site has one look: coloured top edge, title bar with a faint wash, then content. */
.panel.pad > h2:first-child, .panel.pad > h3:first-child,
.panel.pad > input[type="hidden"]:first-child + h2,
.panel.pad > .row.between:first-child:has(> h2:first-child) {
  margin: -24px -24px 4px; padding: 18px 24px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc, var(--accent)) 9%, transparent), transparent);
}
.panel.pad > h2:first-child, .panel.pad > h3:first-child, .panel.pad > input[type="hidden"]:first-child + h2, .panel.pad > .row.between:first-child > h2 { font-size: 22px !important; line-height: 1.15; }
.panel.pad:has(> h2:first-child, > h3:first-child, > input[type="hidden"]:first-child + h2, > .row.between:first-child > h2:first-child) { border-top: 3px solid var(--tc, var(--accent)); }
.cols > .side .panel.pad:has(> h2:first-child) { background-image: none; }

/* A row of cards that always fills its width (columns set by fillCols on the server) */
.fill-grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .fill-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
@media (max-width: 560px) { .fill-grid { grid-template-columns: 1fr; } }
/* One look for "nothing here yet" everywhere */
.empty-note, .quiet-empty { border: 1px dashed var(--line-hover); border-left: 3px solid var(--line-hover); background: var(--panel); }
/* Events: month title between the arrows on every screen size */
.cal-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-bottom: 12px; }
.cal-nav h2 { font-size: 26px; text-align: center; margin: 0; }
@media (max-width: 560px) { .cal-nav h2 { font-size: 19px; } .cal-nav .btn { padding-left: 10px; padding-right: 10px; } }
/* Home stats on phones: 2 × 2 instead of four tall rows */
@media (max-width: 700px) {
  .statbar .wrap { grid-template-columns: 1fr 1fr; }
  .statbar .cell { padding: 14px 12px 14px 0; }
  .statbar .cell:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--line-soft); }
  .statbar .val { font-size: 24px; } .statbar .val.sm { font-size: 16px; }
}
/* Apply / Legacy / Appeal steps use the same box look */
.ap-step { border-top: 3px solid var(--tc, var(--accent)); }
.ap-step-head { background: linear-gradient(180deg, color-mix(in srgb, var(--tc, var(--accent)) 9%, transparent), transparent); padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.ap-step-head + * { margin-top: 0; }
/* Honours: two even columns of rows, like the ranks ladder */
.hn-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: -8px 0 0; color: var(--text-2); }
.hn-key > span { display: inline-flex; align-items: center; gap: 8px; }
.hn-list { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(var(--rows), auto); }
.hn-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 22px; border-bottom: 1px solid var(--line); min-height: 86px; }
.hn-row.c2 { border-left: 1px solid var(--line); }
.hn-row.last { border-bottom: 0; }
.hn-row.mine { background: rgba(232, 176, 74, .06); box-shadow: inset 3px 0 0 var(--gold); }
.hn-art { display: grid; place-items: center; width: 64px; }
.hn-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hn-text strong { font-size: 16px; }
.hn-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.hn-holders { display: flex; align-items: center; gap: 4px; }
.hn-holders img { width: 22px; height: 22px; display: block; }
@media (max-width: 860px) {
  .hn-list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .hn-row { grid-template-columns: 52px minmax(0, 1fr); padding: 12px 16px; }
  .hn-row.c2 { border-left: 0; } .hn-row.last { border-bottom: 1px solid var(--line); } .hn-list > .hn-row:last-child { border-bottom: 0; }
  .hn-meta { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
}
.cal-wrap > .cal-nav { margin-bottom: 12px; }
/* Phones: the Profile / Settings / Dashboard / Notifications bar stays one swipeable row */
@media (max-width: 700px) {
  .self-nav { flex-wrap: nowrap; gap: 8px; }
  .self-nav .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1 1 auto; }
  .self-nav .tabs::-webkit-scrollbar { display: none; }
  .self-nav .tabs a { white-space: nowrap; }
  .self-nav form .btn span { display: none; }
  .conduct-toc { display: none; }
}
.nav-logout { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 4px; background: none; border: 0; border-bottom: 1px solid var(--line-soft); color: var(--text-2); font: 600 16px/1.4 var(--f-body); cursor: pointer; text-align: left; }
.nav-logout svg { color: var(--accent); }
/* Staff HQ → Settings: site status choices */
.mode-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mode-opt { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; }
.mode-opt > span { display: flex; flex-direction: column; gap: 4px; }
.mode-opt.on { border-color: var(--accent); }
.mode-opt.locked { opacity: .55; cursor: not-allowed; }
@media (max-width: 760px) { .mode-opts { grid-template-columns: 1fr; } }

/* Roster: every card in a group the same size. Recruits use the same grid and card as Members; cards stretch to
   the tallest in their row, and long rank names stay on one line. */
.roster .rc-grid, .roster .tier-new .rc-grid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; align-items: stretch; }
.roster .tier-command .rc-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.rc, .rc.flip { display: flex; flex-direction: column; }
.rc.flip .flip-in { flex: 1; }
.rc-who { min-width: 0; flex: 1; }
.rc-rank { min-width: 0; max-width: 100%; }
.rc-rank > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tier-new .rc-body .avatar, .tier-members .rc-body .avatar { width: 42px; height: 42px; border-width: 2px; }
.tier-new .rc-name { font-size: 17px; }
.tier-new .rc-body { padding: 12px 12px 10px; }

/* Roster cards are all one shape: a banner picture sits faintly behind the card instead of adding height, and the
   middle has a fixed height with the name, rank and status centred in it. */
.roster .rc { overflow: hidden; }
.roster .rc .face.front, .roster .rc:not(.flip) { position: relative; }
.roster .rc-banner, .roster .tier-command .rc-banner { position: absolute; inset: 0; height: auto; opacity: .28; pointer-events: none; }
.roster .rc-banner::after { background: linear-gradient(90deg, var(--panel) 15%, transparent 70%); }
.roster .rc-body, .roster .tier-command .rc-body, .roster .tier-new .rc-body { position: relative; min-height: 84px; padding: 12px 14px; margin-top: 0; align-items: center; }
.roster .tier-command .rc-body { min-height: 96px; }
.roster .rc-foot { position: relative; min-height: 38px; }
.roster .rc-banner, .roster .tier-command .rc-banner { opacity: .22; -webkit-mask-image: linear-gradient(90deg, transparent 45%, #000 85%); mask-image: linear-gradient(90deg, transparent 45%, #000 85%); }
.roster .rc-banner::after { background: none; }
/* The back of a flip card never makes the card taller: it fills whatever the front takes. */
.roster .rc.flip .face.back { position: absolute; inset: 0; overflow: hidden; }