@font-face { font-family: "Inter"; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #0a0d13; --side: #0d1119; --surface: #121722; --surface2: #181e2b; --surface3: #1f2635;
  --line: #1e2636; --line2: #2b3549;
  --text: #e9edf5; --text2: #b6bfd0; --muted: #7e889d; --dim: #566178;
  --accent: #f6c744; --accent-ink: #171200; --accent-soft: rgba(246, 199, 68, .12);
  --ok: #3fd38f; --warn: #f3a63b; --bad: #f4585d; --info: #5fa8f5;
  --radius: 12px; --shadow: 0 1px 0 rgba(255, 255, 255, .035) inset, 0 10px 30px rgba(0, 0, 0, .28);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 380px; pointer-events: none; z-index: 0;
  background: radial-gradient(900px 260px at 78% -40px, rgba(246, 199, 68, .07), transparent 70%), radial-gradient(700px 240px at 20% -60px, rgba(95, 168, 245, .06), transparent 70%); }
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 24px; letter-spacing: -.02em; }
h2 { font-size: 14px; color: var(--text); }
h3 { font-size: 13px; margin: 20px 0 8px; color: var(--muted); font-weight: 600; }
.mono { font-family: var(--mono); font-size: 12px; }
.muted { color: var(--muted); }
.bad { color: var(--bad); }
.n { text-align: right; font-variant-numeric: tabular-nums; }
.center { text-align: center; }
[hidden] { display: none !important; }
::selection { background: rgba(246, 199, 68, .3); }
* { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
svg.i.sm { width: 15px; height: 15px; }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; position: relative; z-index: 1; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 18px 12px 14px; background: var(--side); border-right: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 11px; padding: 4px 10px 18px; color: var(--text); font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.logo:hover { text-decoration: none; }
.logo .mark { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--accent-ink);
  background: linear-gradient(145deg, #ffe08a, var(--accent) 55%, #d9a421); box-shadow: 0 4px 14px rgba(246, 199, 68, .25); }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a { position: relative; display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 12px; border-radius: 9px; color: var(--muted); font-weight: 550; transition: background .15s, color .15s; }
.menu a:hover { background: var(--surface2); color: var(--text); text-decoration: none; }
.menu a.on { background: var(--surface3); color: var(--text); }
.menu a.on::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.menu a.on svg { color: var(--accent); }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.pulse { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.pulse .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: none; }
.pulse.live .dot { background: var(--ok); box-shadow: 0 0 0 0 rgba(63, 211, 143, .6); animation: ping 2s infinite; }
.pulse.down .dot { background: var(--bad); }
@keyframes ping { 70% { box-shadow: 0 0 0 7px rgba(63, 211, 143, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 211, 143, 0); } }
.pulse .p-name { font-size: 12px; font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse .p-sub { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.me { display: flex; align-items: center; gap: 10px; padding: 4px 6px 0; }
.me .avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface3); color: var(--text2); font-weight: 700; font-size: 12px; text-transform: uppercase; flex: none; }
.me .who { min-width: 0; flex: 1; line-height: 1.25; }
.me .who a { color: var(--text); font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; }
.me .who span { font-size: 11px; color: var(--muted); }
.me form { margin: 0; }
.iconbtn { width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0; border-radius: 8px; background: transparent; border: 1px solid transparent; color: var(--muted); cursor: pointer; }
.iconbtn:hover { background: var(--surface2); color: var(--text); border-color: var(--line); text-decoration: none; }
a.lang { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px; }
a.lang:hover { color: var(--text); border-color: var(--line2); text-decoration: none; }
.content { min-width: 0; display: flex; flex-direction: column; }
main { width: 100%; max-width: 1520px; margin: 0 auto; padding: 28px 32px 20px; flex: 1; }
main.bare { max-width: 480px; }
footer { color: var(--dim); font-size: 12px; padding: 14px 32px 26px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head p { margin: 4px 0 0; color: var(--muted); }

/* ---------- surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow); }
.card > h2:first-child, .card-h { margin-bottom: 14px; }
.card.narrow { max-width: 460px; }
.card.head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.card.head h1 { font-size: 22px; }
.grid { display: grid; gap: 14px; }
.grid.cards { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 16px; }
.grid.cards .card { margin: 0; }
.grid.form3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 16px; margin-bottom: 16px; }
.cols .card { margin: 0; }
.top-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: stretch; }
.top-grid > .card { display: flex; flex-direction: column; }
.top-grid .card { margin-bottom: 16px; }
.stat .k { color: var(--muted); font-size: 12px; font-weight: 550; }
.stat .v { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; letter-spacing: -.02em; margin-top: 2px; }
.stat .v.small { font-size: 17px; letter-spacing: -.01em; margin: 6px 0 2px; word-break: break-word; }
.stat .sub { color: var(--muted); font-size: 12px; }
.row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.row.between { justify-content: space-between; align-items: center; }
.row.end { justify-content: flex-end; margin-top: 18px; }
.row.mid { align-items: center; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: 12px; white-space: nowrap; background: var(--surface); }
th.n { text-align: right; }
th.sortable { cursor: pointer; user-select: none; transition: color .15s; }
th.sortable:hover { color: var(--text); }
th.sorted { color: var(--accent); }
tbody tr { transition: background .12s; }
tbody tr:hover { background: rgba(255, 255, 255, .025); }
tbody tr:last-child td { border-bottom: 0; }
.scroll { overflow-x: auto; }
.tablewrap { overflow: auto; max-height: calc(100vh - 330px); min-height: 280px; border: 1px solid var(--line); border-radius: 10px; }
.tablewrap thead th { position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 var(--line); }
.tablewrap tbody tr:last-child td { border-bottom: 0; }

/* ---------- controls ---------- */
input, select, textarea { height: 38px; background: var(--surface2); color: var(--text); border: 1px solid var(--line); border-radius: 9px; padding: 0 12px; font: inherit; min-width: 0; transition: border-color .15s, box-shadow .15s; }
textarea { height: auto; padding: 9px 12px; }
select { appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237e889d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
select option { background: var(--surface2); }
input[type=search] { appearance: none; }
input::placeholder, textarea::placeholder { color: var(--dim); }
input:hover, select:hover { border-color: var(--line2); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type=checkbox] { width: 16px; height: 16px; padding: 0; accent-color: var(--accent); }
label { display: flex; flex-direction: column; gap: 6px; }
label > span { color: var(--muted); font-size: 12px; font-weight: 550; }
label.inline { flex-direction: row; align-items: center; gap: 8px; color: var(--text2); }
.row > input:not([type=checkbox]) { flex: 1; min-width: 160px; }
button, .btn { height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 15px; border-radius: 9px; border: 1px solid var(--line2); background: var(--surface2); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, transform .05s; }
button:hover, .btn:hover { background: var(--surface3); text-decoration: none; }
button:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, a:focus-visible, .iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.primary, .login button, .card.narrow button, form button:not([class]):not(.link):not([type=button]) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.primary:hover, .login button:hover, .card.narrow button:hover, form button:not([class]):not(.link):not([type=button]):hover { background: #ffd35e; }
button.ghost { background: transparent; border-color: var(--line); color: var(--text2); }
button.ghost:hover { background: var(--surface2); color: var(--text); }
button.warn { background: rgba(243, 166, 59, .1); border-color: rgba(243, 166, 59, .35); color: var(--warn); }
button.warn:hover { background: rgba(243, 166, 59, .18); }
button.danger { background: rgba(244, 88, 93, .1); border-color: rgba(244, 88, 93, .35); color: var(--bad); }
button.danger:hover { background: rgba(244, 88, 93, .18); }
button.solid-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
button.solid-danger:hover { background: #ff6a6f; }
button.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
button.link { height: auto; padding: 0; background: none; border: 0; color: var(--muted); }
button.link:hover { background: none; color: var(--text); }
td button, .acts button { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 7px; }

.flash { padding: 11px 14px; border-radius: 10px; margin-bottom: 14px; border: 1px solid var(--line2); background: var(--surface2); }
.flash.error { border-color: rgba(244, 88, 93, .4); background: rgba(244, 88, 93, .08); color: #ff9a9d; }
.flash.ok { border-color: rgba(63, 211, 143, .4); background: rgba(63, 211, 143, .08); color: var(--ok); }
.tag { display: inline-flex; align-items: center; height: 19px; font-size: 11px; font-weight: 650; padding: 0 7px; border-radius: 6px; background: var(--surface3); color: var(--text2); margin-left: 7px; vertical-align: middle; }
.tag.hs { background: rgba(255, 138, 76, .14); color: #ff9a64; }
.tag.tk { background: rgba(244, 88, 93, .14); color: var(--bad); }
.tag.on { background: rgba(63, 211, 143, .14); color: var(--ok); }
.tag.new { background: rgba(95, 168, 245, .15); color: var(--info); }
.tag.flag { background: var(--accent-soft); color: var(--accent); }
.tag.warnn { background: rgba(243, 166, 59, .15); color: var(--warn); }
.chip { display: inline-block; background: var(--surface2); border: 1px solid var(--line); border-radius: 8px; padding: 3px 11px; margin: 0 6px 6px 0; }

/* ---------- console ---------- */
.announce { display: flex; gap: 10px; align-items: center; padding: 12px 14px; }
.announce select { min-width: 112px; font-weight: 600; }
.announce input { flex: 1; }
.announce button { padding: 0 24px; height: 38px; }
.factions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; flex: 1; }
.faction { display: flex; flex-direction: column; justify-content: space-between; position: relative; border-radius: 12px; padding: 14px 16px 16px; background: var(--surface2); border: 1px solid var(--line); overflow: hidden; transition: background .3s, border-color .3s; }
.faction.lead { border-color: color-mix(in srgb, var(--fc) 45%, var(--line)); background: color-mix(in srgb, var(--fc) 8%, var(--surface2)); }
.faction .fname { font-size: 12px; font-weight: 650; display: flex; align-items: center; gap: 7px; color: var(--text2); }
.faction .fname::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fc); box-shadow: 0 0 10px var(--fc); }
.faction .fscore { font-size: 46px; font-weight: 750; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.03em; margin: 8px 0 12px; }
.faction .meter { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.faction .meter i { display: block; height: 100%; border-radius: 3px; background: var(--fc); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.match-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.match-head h2, .top-grid h2 { margin: 0; }
.top-grid > .card > h2:first-child { margin-bottom: 14px; }
.match-head .ctrl { display: flex; gap: 8px; flex-wrap: nowrap; }
.match-head .ctrl select { width: 168px; }
.match-head .ctrl select#sel-actions { width: 118px; }
.match-head select { height: 34px; font-size: 13px; }
.match-head button { height: 34px; }
.match-body { display: grid; grid-template-columns: auto 1fr 1fr; gap: 14px; align-items: stretch; flex: 1; }
.clockbox { display: flex; flex-direction: column; justify-content: center; padding-right: 8px; }
.clockbox .k { color: var(--muted); font-size: 12px; font-weight: 550; }
.clock { font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.1; }
.maptile { border-radius: 11px; min-height: 96px; padding: 12px 14px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(135deg, hsl(var(--h) 38% 22%), hsl(calc(var(--h) + 45) 36% 11%)); }
.maptile.art { background: var(--img) center / cover no-repeat, linear-gradient(135deg, hsl(var(--h) 38% 22%), hsl(calc(var(--h) + 45) 36% 11%)); min-height: 120px; }
.maptile.art::before { display: none; }
.maptile.art::after { background: linear-gradient(0deg, rgba(5, 8, 14, .82), rgba(5, 8, 14, .1) 65%); }
.maptile.art .badge { background: rgba(5, 8, 14, .55); padding: 2px 8px; border-radius: 999px; }
.maptile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(180px 90px at 85% 0, rgba(255, 255, 255, .12), transparent 70%); }
.maptile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 8, 14, .6), transparent 70%); }
.maptile > * { position: relative; z-index: 1; }
.maptile .badge { position: absolute; top: 10px; left: 12px; font-size: 11px; font-weight: 700; color: var(--accent); }
.maptile .mt { font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.maptile .ms { font-size: 12px; color: #c4cee4; }
.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 28px; }
.meta-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.meta-item .k { font-size: 11px; color: var(--muted); font-weight: 550; }
.meta-item .v { font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.meta-item .v.mono { font-size: 12px; font-weight: 550; color: var(--text2); }
.meta-item.wide { grid-column: span 2; }
.board-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.board-head h2 { margin: 0; }
.board-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pills { display: inline-flex; gap: 3px; padding: 3px; background: var(--surface2); border: 1px solid var(--line); border-radius: 10px; }
.pill { height: 28px; padding: 0 12px; border-radius: 7px; border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; }
.pill:hover { background: var(--surface3); color: var(--text); }
.pill.on { background: var(--surface3); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
#board-search { width: 230px; padding-left: 36px; background-repeat: no-repeat; background-position: 12px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237e889d' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }
table.board td { padding: 8px 12px; height: 54px; }
.pl .pcell { display: flex; align-items: center; gap: 11px; }
.fdot { width: 9px; height: 9px; border-radius: 50%; background: var(--fc, var(--dim)); flex: none; box-shadow: 0 0 8px color-mix(in srgb, var(--fc, transparent) 60%, transparent); }
.pl .pname { font-weight: 650; line-height: 1.3; }
.pl .pname a { color: var(--text); }
.pl .pname a:hover { color: var(--accent); text-decoration: none; }
.pl.flagged .pname a { color: var(--bad); }
.pl .psid { color: var(--dim); font-size: 11px; font-family: var(--mono); line-height: 1.3; }
.pl .num { font-variant-numeric: tabular-nums; }
.pl .num.dim { color: var(--muted); }
.pl .num.hot { color: var(--warn); font-weight: 650; }
.pl .num.streak { color: var(--accent); font-weight: 700; }
.rowtools { display: flex; gap: 4px; justify-content: flex-end; }
.rowtools .iconbtn { width: 30px; height: 30px; border-color: var(--line); }
.rowtools .iconbtn.warnc:hover { color: var(--warn); border-color: rgba(243, 166, 59, .5); }
.skeleton { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--surface2), var(--surface3), var(--surface2)); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* popover menu */
.pop { position: fixed; z-index: 40; min-width: 200px; padding: 6px; background: var(--surface2); border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); animation: pop .12s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.pop .head { padding: 8px 10px 6px; font-size: 12px; color: var(--muted); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop button { width: 100%; height: 34px; justify-content: flex-start; gap: 10px; border: 0; background: transparent; font-weight: 550; border-radius: 8px; padding: 0 10px; color: var(--text2); }
.pop button:hover { background: var(--surface3); color: var(--text); }
.pop button.danger { color: var(--bad); }
.pop button.danger:hover { background: rgba(244, 88, 93, .14); }
.pop hr { border: 0; border-top: 1px solid var(--line); margin: 5px 4px; }

/* ---------- feed / lists ---------- */
.feed { list-style: none; margin: 0; padding: 0; max-height: 540px; overflow-y: auto; }
.feed li { padding: 9px 4px; border-bottom: 1px solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.feed li:last-child { border-bottom: 0; }
.feed .t { color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.feed .arrow { color: var(--dim); }
.feed .w { color: var(--muted); font-size: 12px; }
.feed a { color: var(--text); font-weight: 550; }
.feed a:hover { color: var(--accent); text-decoration: none; }
.feed a.tk { color: var(--bad); }
.feed li.in { background: linear-gradient(90deg, rgba(244, 88, 93, .1), transparent); }
.feed li.out { background: linear-gradient(90deg, rgba(63, 211, 143, .1), transparent); }
.bars .bar { display: grid; grid-template-columns: 74px 1fr 40px; gap: 10px; align-items: center; margin: 7px 0; }
.bars .lb { color: var(--text2); font-size: 12px; }
.bars .fill { background: var(--surface3); border-radius: 4px; height: 8px; overflow: hidden; }
.bars .fill i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--info), #7cc0ff); }
.bars .num { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; height: 96px; align-items: end; }
.hours div { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.hours i { display: block; width: 100%; background: linear-gradient(0deg, var(--info), #7cc0ff); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .85; }
.hours div:hover i { opacity: 1; }
.hours span { font-size: 10px; color: var(--dim); height: 16px; }

/* ---------- kill feed ---------- */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 10px; margin: 4px 0 16px; }
.kf-total { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.kf-total b { color: var(--text); font-size: 18px; font-weight: 700; margin-right: 4px; font-variant-numeric: tabular-nums; }
table.kf td { vertical-align: top; padding: 12px; }
table.kf .time { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 550; }
table.kf .time .sub { display: block; }
table.kf .sub { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
table.kf .person { font-weight: 650; cursor: pointer; }
table.kf .person:hover { text-decoration: underline; }
table.kf .sid { font-family: var(--mono); font-size: 11px; color: var(--dim); }
table.kf .sid a { color: inherit; }
table.kf .sid a:hover { color: var(--info); text-decoration: none; }
table.kf .srv { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); font-size: 12px; }
table.kf td.n { white-space: nowrap; }
table.kf tr.hot td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
table.kf tr.hot { background: linear-gradient(90deg, rgba(244, 88, 93, .12), rgba(244, 88, 93, .03)); }
.hits { display: flex; gap: 5px; flex-wrap: wrap; }
.hit { height: 20px; padding: 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border-radius: 6px; border: 0; background: var(--surface3); color: var(--text2); }
.hit:hover { background: var(--line2); color: var(--text); }
.hit.hs { background: rgba(255, 138, 76, .15); color: #ff9a64; }
.hit.wb { background: rgba(244, 88, 93, .18); color: #ff7b80; }
.weapon { cursor: pointer; font-weight: 600; }
.weapon:hover { text-decoration: underline; }

/* ---------- login / users / dialog ---------- */
.login { margin: 12vh auto 0; padding: 30px; }
.login .brandline { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.login .brandline .mark { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; color: var(--accent-ink); background: linear-gradient(145deg, #ffe08a, var(--accent) 55%, #d9a421); }
.login h1 { font-size: 22px; }
.login form, .card.narrow form { display: flex; flex-direction: column; gap: 14px; }
.login button { height: 40px; margin-top: 6px; }
.userbox { border: 1px solid var(--line); border-radius: 11px; padding: 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 12px; background: var(--surface2); }
.perms { display: flex; gap: 8px 20px; flex-wrap: wrap; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.actions button { height: 34px; }
dialog { background: var(--surface); color: var(--text); border: 1px solid var(--line2); border-radius: 16px; padding: 22px; width: min(460px, 92vw); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
dialog::backdrop { background: rgba(4, 6, 10, .72); backdrop-filter: blur(3px); }
dialog[open] { animation: dlg .16s ease-out; }
@keyframes dlg { from { opacity: 0; transform: translateY(8px) scale(.98); } }
dialog label { margin-top: 12px; }
dialog input, dialog select, dialog textarea { width: 100%; }
dialog h3 { color: var(--text); font-size: 17px; margin: 0 0 6px; font-weight: 650; }
dialog p { margin: 0; font-size: 13px; }
#toast { position: fixed; right: 20px; bottom: 20px; padding: 12px 16px; border-radius: 11px; background: var(--surface3); border: 1px solid var(--line2); box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateY(10px); transition: .22s; pointer-events: none; max-width: min(420px, 86vw); z-index: 60; font-weight: 550; }
#toast.show { opacity: 1; transform: none; }
#toast.ok { border-left: 3px solid var(--ok); } #toast.err { border-left: 3px solid var(--bad); color: #ffb0b3; }

/* ---------- responsive ---------- */
.mbar, .mobile-only { display: none; }
@media (max-width: 1100px) { .match-head .ctrl { flex-wrap: wrap; } .top-grid { grid-template-columns: 1fr; } .cols { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.userbox > button { align-self: flex-start; }

/* brand logo image */
.logo img.mark, .login img.mark { width: 34px; height: 34px; border-radius: 0; background: none; box-shadow: none; object-fit: contain; display: block; filter: drop-shadow(0 2px 10px rgba(255, 255, 255, .12)); }
.login img.mark { width: 44px; height: 44px; }
.logo { padding-left: 8px; gap: 12px; }
.login .brandline img.mark { width: 44px; height: 44px; background: none; border-radius: 0; box-shadow: none; display: block; }

/* ---------- phones & small tablets ---------- */
@media (max-width: 860px) {
  .mobile-only { display: inline-flex; }
  select.mobile-only { display: block; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .app { display: block; }
  .mbar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30; padding: 9px 14px; background: rgba(13, 17, 25, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  .mbar .logo { padding: 0; gap: 9px; font-size: 15px; }
  .mbar .grow { flex: 1; }
  .mbar form { margin: 0; }
  .mbar .live { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .mbar .live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
  .mbar .live.on .dot { background: var(--ok); box-shadow: 0 0 8px rgba(63, 211, 143, .6); }
  .mbar .live.down .dot { background: var(--bad); }
  .mbar a.lang { padding: 6px 10px; }
  .avatar-link { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface3); color: var(--text2); font-weight: 700; font-size: 13px; text-transform: uppercase; }
  .avatar-link:hover { text-decoration: none; color: var(--text); }

  .side { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: auto; z-index: 35; flex-direction: row; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); gap: 0;
    border-right: 0; border-top: 1px solid var(--line); background: rgba(13, 17, 25, .96); backdrop-filter: blur(12px); overflow: visible; }
  .side .logo, .side .side-foot { display: none; }
  .menu { flex: 1; flex-direction: row; justify-content: space-around; gap: 0; }
  .menu a { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 3px; height: 54px; padding: 0 2px; font-size: 10.5px; border-radius: 10px; }
  .menu a span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu a.on::before { display: none; }
  .menu a svg { width: 22px; height: 22px; }

  main { padding: 16px 14px 6px; }
  footer { padding: 6px 14px 14px; }
  h1 { font-size: 22px; }
  .page-head { margin-bottom: 14px; }
  .card { padding: 14px; border-radius: 14px; margin-bottom: 12px; overflow-x: auto; }
  .card table:not(.board):not(.kf) { min-width: 460px; }
  .cols, .top-grid { gap: 12px; }
  .grid.cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat .v { font-size: 24px; }

  /* form controls: 16px stops iOS from zooming on focus; 44px is a comfortable touch height */
  input, select, textarea { font-size: 16px; height: 44px; }
  button, .btn { height: 42px; }
  td button { height: 34px; }
  .row > input:not([type=checkbox]) { flex: 1 1 100%; min-width: 0; }
  .announce { flex-wrap: wrap; padding: 12px; }
  .announce select { order: 1; flex: 0 0 124px; }
  .announce button { order: 2; flex: 1; }
  .announce select#ann-target { order: 3; flex: 1 1 100%; }
  .announce input { order: 4; flex: 1 1 100%; }

  .factions { gap: 8px; }
  .faction { padding: 12px; }
  .faction .fscore { font-size: 34px; margin: 6px 0 10px; }
  .match-head { flex-direction: column; align-items: stretch; }
  .match-head .ctrl { flex-wrap: wrap; }
  .match-head .ctrl select, .match-head .ctrl select#sel-actions { width: auto; flex: 1 1 140px; height: 42px; }
  .match-head .ctrl button { flex: 1 1 100%; height: 44px; }
  .match-body { grid-template-columns: 1fr 1fr; }
  .clockbox { grid-column: 1 / -1; }
  .clock { font-size: 36px; }
  .meta { grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  .meta-item.wide { grid-column: 1 / -1; }

  /* scoreboard -> player cards */
  .board-head { flex-direction: column; align-items: stretch; }
  .board-tools { flex-direction: column; align-items: stretch; }
  #board-search { width: 100%; }
  .pills { width: 100%; overflow-x: auto; }
  .pill { flex: 1 0 auto; height: 34px; }
  .tablewrap { max-height: none; border: 0; overflow: visible; min-height: 0; }
  table.board, table.board tbody { display: block; }
  table.board thead { display: none; }
  table.board tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
  table.board tr:last-child { border-bottom: 0; }
  table.board td { display: block; height: auto; padding: 0; border: 0; text-align: left; }
  table.board td:first-child { grid-column: 1 / 3; grid-row: 1; min-width: 0; }
  table.board td:last-child { grid-column: 3; grid-row: 1; justify-self: end; }
  table.board td.num { font-weight: 650; font-size: 15px; }
  table.board td.num::before { content: attr(data-label); display: block; font-size: 10.5px; font-weight: 500; color: var(--dim); margin-bottom: 1px; }
  table.board td.cash { display: none; }
  .rowtools .iconbtn { width: 38px; height: 38px; }
  .pl .pname { word-break: break-word; }

  /* kill feed -> cards */
  .filters { grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 10px; }
  .filters .adv { display: none; grid-column: 1 / -1; }
  .filters.open .adv { display: block; }
  .filters.open button.adv { display: inline-flex; }
  .kf-total b { font-size: 20px; }
  table.kf, table.kf tbody { display: block; }
  table.kf thead { display: none; }
  table.kf tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
  table.kf td { display: block; padding: 0; border: 0; min-width: 0; }
  table.kf td.time { grid-column: 1 / -1; display: flex; gap: 8px; align-items: baseline; }
  table.kf td.time .sub { display: inline; }
  table.kf td.matchc, table.kf td.srv { display: none; }
  table.kf td.killer::before, table.kf td.victim::before { content: attr(data-label); display: block; font-size: 10.5px; color: var(--dim); }
  table.kf td.hitsc { grid-column: 1 / -1; }
  table.kf td.hitsc.empty { display: none; }
  table.kf td.weaponc { grid-column: 1; }
  table.kf td.dist { grid-column: 2; text-align: right; }
  table.kf tr.hot td:first-child { box-shadow: none; }
  table.kf tr.hot { box-shadow: inset 3px 0 0 var(--bad); padding-left: 10px; }

  .card.head { flex-direction: column; }
  .actions button { flex: 1 1 auto; height: 40px; }
  .perms { gap: 10px 16px; }
  .userbox > button { align-self: stretch; }

  dialog { margin: auto 0 0; width: 100%; max-width: none; border-radius: 18px 18px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); }
  .pop button { height: 44px; }
  #toast { bottom: calc(80px + env(safe-area-inset-bottom)); right: 12px; left: 12px; max-width: none; }
}

@media (max-width: 860px) {
  .board-head, .board-tools, .board-head > *, .board-tools > * { min-width: 0; max-width: 100%; }
  .pills { display: flex; max-width: 100%; }
  .pill { flex: 0 0 auto; }
  #board-search, #board-sort { width: 100%; }
}

/* ---------- insights ---------- */
input[type=date] { color-scheme: dark; height: 36px; }
.range-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.range-dates { display: flex; gap: 8px; align-items: center; }
.range-note { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 12px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.tile .k { color: var(--muted); font-size: 12px; font-weight: 550; }
.tile .v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 3px 0 2px; }
.tile .sub { font-size: 11.5px; color: var(--dim); min-height: 16px; }
.ins-grid.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.ins-grid .card { margin: 0; min-width: 0; }
.card-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-title h2 { margin: 0; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; }
.lg { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text2); }
.lg i { width: 16px; height: 3px; border-radius: 2px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
svg text.ax { fill: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.tip { position: fixed; z-index: 70; pointer-events: none; min-width: 130px; padding: 9px 12px; background: var(--surface3); border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 12px 34px rgba(0, 0, 0, .5); }
.tip-title { font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.tip-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.6; }
.tip-row i { width: 10px; height: 3px; border-radius: 2px; flex: none; }
.tip-row b { font-variant-numeric: tabular-nums; }
.tip-row span { color: var(--muted); }
.heat { display: grid; grid-template-columns: 40px repeat(24, minmax(0, 1fr)); gap: 2px; }
.heat .hh { font-size: 10px; color: var(--dim); height: 14px; font-variant-numeric: tabular-nums; }
.heat .hd { font-size: 11px; color: var(--muted); align-self: center; }
.hc { height: 26px; border-radius: 3px; display: block; }
.hc.none { background: var(--surface2); }
.hc:hover, .hc:focus-visible { outline: 2px solid var(--text); outline-offset: -1px; }
.heat-scale { display: flex; align-items: center; gap: 3px; margin-top: 12px; justify-content: flex-end; font-size: 11px; color: var(--dim); }
.heat-scale i { width: 22px; height: 8px; border-radius: 2px; }
.heat-scale span { margin: 0 4px; font-variant-numeric: tabular-nums; }
.hbar { display: grid; grid-template-columns: minmax(80px, 34%) 1fr 64px; align-items: center; gap: 10px; padding: 5px 4px; border-radius: 6px; }
.hbar:hover, .hbar:focus-visible { background: rgba(255, 255, 255, .035); outline: none; }
.hb-label { color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-track { height: 10px; background: rgba(57, 135, 229, .1); border-radius: 0 4px 4px 0; }
.hb-track i { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.hb-val { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.chart-sm { display: flex; gap: 10px; align-items: stretch; height: 210px; }
.col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; border-radius: 6px; }
.col:hover, .col:focus-visible { background: rgba(255, 255, 255, .035); outline: none; }
.col-bar { width: 100%; max-width: 24px; flex: 1; display: flex; align-items: flex-end; }
.col-bar i { display: block; width: 100%; border-radius: 4px 4px 0 0; }
.col-val { font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 600; }
.col-lbl { font-size: 10.5px; color: var(--dim); white-space: nowrap; }
.stack { display: flex; gap: 2px; height: 14px; margin: 4px 0 14px; }
.stack .seg { display: block; height: 100%; border-radius: 3px; min-width: 2px; }
table.mini th, table.mini td { padding: 7px 8px; }
table.mini .key, td .key { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; }
.tbl-tools { display: flex; gap: 10px; margin-bottom: 12px; }
.tbl-tools input[type=search] { flex: 1; min-width: 0; }
.tbl-tools input[type=number] { width: 130px; }
.tablewrap.short { max-height: 430px; min-height: 0; }
.tablewrap table td .tag { margin-left: 8px; }
details.tv { margin-top: 12px; }
details.tv summary { cursor: pointer; color: var(--muted); font-size: 12px; width: fit-content; }
details.tv summary:hover { color: var(--text); }
details.tv .scroll { max-height: 260px; overflow: auto; margin-top: 8px; }
.ins-loading { opacity: .55; transition: opacity .15s; }
@media (max-width: 1100px) { .ins-grid.two { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tile { padding: 12px 14px; } .tile .v { font-size: 22px; }
  .range-note { margin-left: 0; width: 100%; }
  .range-dates { width: 100%; } .range-dates input[type=date] { flex: 1; min-width: 0; height: 44px; }
  .heat { grid-template-columns: 30px repeat(24, minmax(0, 1fr)); gap: 1px; } .hc { height: 20px; }
  .hbar { grid-template-columns: minmax(70px, 40%) 1fr 56px; }
  .tbl-tools input[type=number] { width: 104px; }
  .tablewrap.short { max-height: 380px; overflow: auto; border: 1px solid var(--line); }
  .tablewrap.short table { min-width: 520px; }
  .chart-sm { height: 190px; gap: 6px; } .col-lbl { font-size: 9.5px; }
}
.tile .v.sm { font-size: 19px; line-height: 1.5; margin: 6px 0 3px; }
@media (max-width: 860px) { .range-dates { flex-wrap: wrap; } .range-dates input[type=date] { min-width: 150px; } }

.kpis.small { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-bottom: 18px; }
.kpis.small .tile { box-shadow: none; background: var(--surface2); }
.kpis.small .tile .v { font-size: 22px; }
.ins-grid.inner { margin-bottom: 0; }
.ins-grid.inner h3 { margin-top: 0; }
.card .ins-grid.inner > div > h3:not(:first-child) { margin-top: 20px; }
table.cohort td.cell { font-variant-numeric: tabular-nums; font-weight: 600; text-align: center; }
table.cohort td.cell.none { color: var(--dim); background: transparent; font-weight: 400; }
table.cohort th.n { text-align: center; }
table.cohort td, table.cohort th { padding: 8px 10px; }
p.note { margin: 14px 0 0; font-size: 12px; }

/* ---------- design pass: command-centre look ---------- */
body::before { height: 520px;
  background:
    radial-gradient(900px 300px at 78% -60px, rgba(246, 199, 68, .09), transparent 70%),
    radial-gradient(760px 280px at 15% -80px, rgba(95, 168, 245, .08), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); }
.card { background: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, 0) 46%), var(--surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 12px 32px rgba(0, 0, 0, .3); }
.card > h2:first-child, .board-head h2 { display: flex; align-items: center; gap: 9px; font-size: 14px; letter-spacing: .01em; }
.card > h2:first-child::before, .board-head h2::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px rgba(246, 199, 68, .55); flex: none; }
.card > h2 .muted { font-weight: 500; font-size: 12px; }
.menu a.on { background: linear-gradient(90deg, rgba(246, 199, 68, .13), rgba(255, 255, 255, .02)); box-shadow: 0 0 0 1px rgba(246, 199, 68, .14) inset; }
.menu a.on::before { box-shadow: 0 0 12px rgba(246, 199, 68, .7); }
button.primary, .login button, .card.narrow button, form button:not([class]):not(.link):not([type=button]) {
  background: linear-gradient(180deg, #ffd964, var(--accent)); box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 6px 18px rgba(246, 199, 68, .22); }
button.primary:hover, .login button:hover, .card.narrow button:hover, form button:not([class]):not(.link):not([type=button]):hover { background: linear-gradient(180deg, #ffe27d, #f9cf55); }
.stat, .tile { position: relative; overflow: hidden; transition: transform .18s, border-color .18s; }
.stat::after, .tile::after { content: ""; position: absolute; left: 0; top: 0; width: 46px; height: 2px; background: var(--accent); box-shadow: 0 0 12px rgba(246, 199, 68, .7); }
.stat:hover, .tile:hover { transform: translateY(-2px); border-color: var(--line2); }
.stat .v, .tile .v { background: linear-gradient(180deg, #fff, #c9d3e8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .v.bad { background: none; color: var(--bad); }
.tile { background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 60%), var(--surface); }

/* hero banner */
.hero { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--line2); margin-bottom: 16px; min-height: 250px; isolation: isolate;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 18px 50px rgba(0, 0, 0, .4); }
.hero-bg { position: absolute; inset: 0; z-index: -2; transform: scale(1.04); transition: opacity .4s;
  background: linear-gradient(135deg, hsl(var(--h, 215) 38% 22%), hsl(calc(var(--h, 215) + 45) 36% 9%)); }
.hero.art .hero-bg { background: var(--img) center 42% / cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(7, 10, 16, .92) 0%, rgba(7, 10, 16, .6) 48%, rgba(7, 10, 16, .25) 100%), linear-gradient(0deg, rgba(7, 10, 16, .75), transparent 55%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(transparent 50%, rgba(0, 0, 0, .14) 50%) 0 0 / 100% 3px; opacity: .35; }
.hero-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main ctrl" "stats stats"; gap: 22px 18px; padding: 24px 26px 22px; min-height: 250px; align-content: space-between; }
.hero-main { grid-area: main; min-width: 0; }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; color: var(--accent); text-transform: uppercase; }
.kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(63, 211, 143, .6); animation: ping 2s infinite; }
.hero-map { font-size: 44px; font-weight: 780; letter-spacing: -.03em; line-height: 1.08; margin-top: 6px; text-shadow: 0 2px 24px rgba(0, 0, 0, .6); }
.hero-sub { color: #cdd6e8; margin-top: 4px; font-size: 13.5px; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.hero .ctrl { grid-area: ctrl; display: flex; gap: 8px; align-self: start; flex-wrap: wrap; justify-content: flex-end; }
.hero .ctrl select { width: 168px; height: 34px; font-size: 13px; background-color: rgba(10, 14, 22, .6); border-color: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); }
.hero .ctrl select#sel-actions { width: 118px; }
.hero .ctrl button { height: 34px; }
.hero-stats { grid-area: stats; display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.hstat { min-width: 150px; padding: 11px 16px; border-radius: 12px; background: rgba(10, 14, 22, .55); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(10px); display: flex; flex-direction: column; justify-content: center; }
.hstat .k { color: #aab5cc; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; }
.hstat .clock { font-size: 34px; }
.hstat .hv { font-size: 30px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.hstat .hv span { font-size: 15px; font-weight: 600; color: var(--muted); }
.hmeter { height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; margin-top: 7px; }
.hmeter i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--ok), #7be8b9); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.hero-next { margin-left: auto; width: 250px; display: flex; }
.hero-next .maptile { flex: 1; min-height: 96px; padding-top: 30px; border-color: rgba(255, 255, 255, .16); border-radius: 12px; }

/* faction score cards */
.scorecard { padding-bottom: 20px; }
.factions { gap: 14px; }
.faction { padding: 16px 18px 18px; border-radius: 14px; border-color: color-mix(in srgb, var(--fc) 22%, var(--line));
  background: radial-gradient(260px 120px at 100% 0, color-mix(in srgb, var(--fc) 20%, transparent), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .025), transparent), var(--surface2); }
.faction::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--fc); box-shadow: 0 0 16px var(--fc); }
.faction.lead { border-color: color-mix(in srgb, var(--fc) 60%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fc) 30%, transparent), 0 8px 30px color-mix(in srgb, var(--fc) 16%, transparent); }
.faction .ftop { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.faction .fname { font-size: 13px; letter-spacing: .02em; }
.faction .fcount { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.faction .fscore { font-size: 58px; margin: 10px 0 14px; text-shadow: 0 0 28px color-mix(in srgb, var(--fc) 35%, transparent); }
.faction .meter { height: 6px; }
.faction .meter i { box-shadow: 0 0 12px var(--fc); }

/* scoreboard */
table.board tbody tr.pl td:first-child { box-shadow: inset 3px 0 0 var(--fc, transparent); }
table.board td.kills { font-weight: 700; color: var(--text); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fc, var(--info)) 20%, transparent) var(--p, 0%), transparent calc(var(--p, 0%) + .1%)) no-repeat; background-position: right; background-size: 100% 70%; }
table.board tbody tr:nth-child(-n+3) td.kills { color: var(--accent); }
.tablewrap { background: rgba(0, 0, 0, .12); }

@media (max-width: 1100px) { .hero-next { margin-left: 0; } }
@media (max-width: 860px) {
  .hero, .hero-body { min-height: 0; }
  .hero-body { grid-template-columns: 1fr; grid-template-areas: "main" "ctrl" "stats"; padding: 18px 16px; }
  .hero-map { font-size: 32px; }
  .hero .ctrl { justify-content: flex-start; }
  .hero .ctrl select { flex: 1; min-width: 0; width: auto; }
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-next { grid-column: 1 / -1; width: auto; }
  .hstat .clock { font-size: 28px; }
  .faction .fscore { font-size: 44px; }
}
@media (max-width: 860px) {
  .faction .fcount { display: none; }
  .faction { padding: 14px 12px 14px 14px; }
  table.board td.kills { background: none; }
}
svg path.ln { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }