/* Accuracy Tracker web panel - tracker.gg-style dark theme. */
:root {
	--bg: #0a0c10;
	--bg-2: #0f1218;
	--panel: #14171f;
	--panel-2: #1a1e28;
	--panel-3: #20252f;
	--border: #252b37;
	--border-soft: #1d222c;
	--text: #e8eaef;
	--muted: #8b93a2;
	--muted-2: #626a78;
	--accent: #38bdf8;
	--accent-dim: #1f6f93;
	--hot: #ff7a3c;
	--good: #3ad29f;
	--mid: #e6c34a;
	--bad: #e6685a;
	--astartes: #e0b15a;
	--xenos: #e0564f;
	--shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Flex column so the footer sits at the bottom of the viewport (sticky-footer
   pattern): the main app grows to fill, pushing the footer down. */
body {
	background: radial-gradient(1200px 600px at 70% -10%, #131722 0%, var(--bg) 55%) fixed;
	color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased;
	display: flex; flex-direction: column;
}
a { color: inherit; }
.mono { font-family: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace; }

/* ---------- Topbar ---------- */
.topbar {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 0 24px; height: 60px; background: rgba(12, 14, 19, 0.85);
	backdrop-filter: blur(8px); border-bottom: 1px solid var(--border);
	position: sticky; top: 0; z-index: 30;
}
.nav { display: flex; gap: 6px; flex: none; }
/* Top-left HOME button: outlined, accent-tinted, links to the matches page. */
.nav-home {
	flex: none; padding: 8px 20px; border-radius: 9px; cursor: pointer; font-family: inherit;
	font-weight: 800; font-size: 14px; letter-spacing: 1.2px; color: var(--accent);
	background: transparent; border: 1.5px solid var(--accent-dim); transition: all 0.12s;
}
.nav-home:hover { border-color: var(--accent); background: rgba(56, 189, 248, 0.08); }
.nav-item {
	padding: 8px 16px; border-radius: 8px; color: var(--text); font-weight: 700; font-size: 14px;
	background: var(--panel-2); border: 1px solid var(--border); cursor: pointer; font-family: inherit;
	letter-spacing: 0.3px; transition: all 0.12s;
}
.nav-item:hover { border-color: var(--accent-dim); }
.nav-item.active { color: var(--accent); }
.nav-btn {
	padding: 7px 13px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13px;
	color: var(--muted); background: transparent; border: 1px solid var(--border);
	font-family: inherit; transition: all 0.12s;
}
.nav-btn:hover { color: var(--text); border-color: var(--accent-dim); }
.nav-btn.on { color: #06121a; background: var(--accent); border-color: var(--accent); }

/* Global topbar search. Absolutely centered on the topbar (= viewport width), so
   it stays at the screen center regardless of how wide the HOME / nav clusters
   are. HOME and the nav buttons sit at the edges via space-between. */
.topsearch {
	position: absolute; left: 50%; transform: translateX(-50%);
	width: min(520px, 44vw);
}
.topsearch .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted-2); pointer-events: none; }
.topsearch input {
	width: 100%; padding: 9px 14px 9px 36px; border-radius: 10px;
	background: var(--panel); border: 1px solid var(--border); color: var(--text);
	font-size: 14px; font-family: inherit; outline: none;
}
.topsearch input:focus { border-color: var(--accent-dim); }
.search-results {
	display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0;
	background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
	box-shadow: var(--shadow); overflow: hidden; max-height: 380px; overflow-y: auto;
}
.search-results.open { display: block; }
.sr-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; border-top: 1px solid var(--border-soft); }
.sr-row:first-child { border-top: none; }
.sr-row:hover { background: var(--panel-2); }
.sr-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #0a0c10; flex: none; }
.sr-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--muted-2); background: var(--panel-2); flex: none; }
.sr-text { display: flex; flex-direction: column; min-width: 0; }
.sr-name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-sub { font-size: 11px; color: var(--muted-2); }
.sr-action .sr-name { color: var(--accent); }
.sr-empty { padding: 12px; color: var(--muted); font-size: 13px; text-align: center; }
/* On narrow screens the absolute-centered bar would overlap the side clusters,
   so put it back in the flex flow between them. */
@media (max-width: 820px) {
	.topsearch { position: static; transform: none; flex: 1 1 auto; width: auto; min-width: 0; }
}

.app { width: 100%; max-width: 1320px; margin: 0 auto; padding: 24px 24px 60px; flex: 1 0 auto; }
.footer { flex: none; text-align: center; color: var(--muted-2); font-size: 12px; padding: 18px; border-top: 1px solid var(--border-soft); }

.page-title { font-size: 22px; font-weight: 800; letter-spacing: 0.3px; margin: 2px 0 16px; text-align: center; }
.crumbs { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.crumbs a { color: var(--accent); cursor: pointer; text-decoration: none; font-weight: 600; }
.crumbs .sep { color: var(--muted-2); }

/* ---------- Matches page: sidebar + content ---------- */
/* Symmetric grid (filters | match column | balancing spacer): the centre column
   sits in the middle of the page, and because the left and right tracks are equal
   the match column is centered ON THE SCREEN while the filters sit off to the
   left. The "Matches" title (in .app) is centered to match. */
.matches-layout {
	display: grid;
	grid-template-columns: minmax(220px, 1fr) minmax(0, 780px) minmax(220px, 1fr);
	gap: 24px; align-items: start;
}
.matches-layout .sidebar { grid-column: 1; justify-self: start; }
.matches-layout .content { grid-column: 2; width: 100%; min-width: 0; }
@media (max-width: 900px) {
	.matches-layout { grid-template-columns: 1fr; }
	.matches-layout .sidebar, .matches-layout .content { grid-column: 1; justify-self: stretch; width: auto; }
}

.sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 18px; width: 220px; }
.filter-group { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 14px 12px; }
.filter-group h4 { margin: 0 0 10px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted-2); }
.f-opt { display: flex; align-items: center; gap: 9px; padding: 5px 0; cursor: pointer; font-size: 13px; color: var(--text); }
.f-opt input { display: none; }
.f-box {
	width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--border);
	display: grid; place-items: center; flex: none; transition: all 0.12s;
}
.f-opt input:checked + .f-box { background: var(--accent); border-color: var(--accent); }
.f-box::after { content: "✓"; font-size: 11px; color: #06121a; opacity: 0; font-weight: 800; }
.f-opt input:checked + .f-box::after { opacity: 1; }
/* Single-select radio indicator (Result / Type filters) */
.f-radio {
	width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border);
	display: grid; place-items: center; flex: none; transition: all 0.12s;
}
.f-opt input:checked + .f-radio { border-color: var(--accent); }
.f-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity 0.12s; }
.f-opt input:checked + .f-radio::after { opacity: 1; }
.f-clear { background: none; border: none; color: var(--accent); font-size: 12px; cursor: pointer; padding: 2px 0; font-weight: 600; }

.content { min-width: 0; }
.searchbar { position: relative; margin-bottom: 16px; }
.searchbar input {
	width: 100%; padding: 12px 14px 12px 38px; border-radius: 11px;
	background: var(--panel); border: 1px solid var(--border); color: var(--text);
	font-size: 14px; font-family: inherit; outline: none;
}
.searchbar input:focus { border-color: var(--accent-dim); }
.searchbar .ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted-2); }
.player-hits { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.player-hits .lbl { color: var(--muted-2); font-size: 12px; align-self: center; }
.pchip {
	display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border-radius: 20px;
	background: var(--panel-2); border: 1px solid var(--border); cursor: pointer; font-size: 13px; font-weight: 600;
}
.pchip:hover { border-color: var(--accent-dim); }
.pchip .av { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #0a0c10; }

/* ---------- Match list ---------- */
.match-list { display: flex; flex-direction: column; gap: 12px; }
.match-card {
	display: grid; grid-template-columns: 6px 1fr auto auto auto; gap: 16px; align-items: center;
	min-height: 78px;
	background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
	border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px 14px 0;
	cursor: pointer; transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s; overflow: hidden;
}
.match-card:hover { border-color: var(--accent-dim); transform: translateY(-1px); box-shadow: var(--shadow); }
.result-strip { width: 6px; align-self: stretch; }
.result-strip.win { background: var(--good); }
.result-strip.loss { background: var(--bad); }
.result-strip.draw { background: var(--muted-2); }
.result-strip.astartes { background: var(--astartes); }
.result-strip.xenos { background: var(--xenos); }
.mc-when { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mc-top { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.mc-result { font-weight: 800; font-size: 14px; white-space: nowrap; flex: none; }
.mc-result.win { color: var(--good); }
.mc-result.loss { color: var(--bad); }
.mc-result.draw { color: var(--muted); }
.mc-result.astartes { color: var(--astartes); }
.mc-result.xenos { color: var(--xenos); }
.badge {
	font-size: 10px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
	padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border);
	white-space: nowrap; flex: none;
}
.badge.type { color: var(--accent); border-color: var(--accent-dim); }
.badge.map { color: var(--muted); }
.mc-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-meta { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 76px; }
.mc-meta .label { font-size: 10px; letter-spacing: 1px; color: var(--muted-2); text-transform: uppercase; }
.mc-meta .value { font-weight: 700; font-size: 14px; }
/* Grid (number | dash | number) so the dash is always centered and lines up
   across every match card / the detail header. */
.score-pill { display: inline-grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 9px; font-weight: 800; font-size: 19px; min-width: 86px; }
.score-pill .a { color: var(--astartes); text-align: right; }
.score-pill .b { color: var(--xenos); text-align: left; }
.score-pill .dash { color: var(--muted-2); font-weight: 600; text-align: center; }
.chev { color: var(--muted-2); font-size: 20px; padding-right: 4px; }
.empty { color: var(--muted); padding: 30px; text-align: center; background: var(--panel); border: 1px dashed var(--border); border-radius: 12px; }

/* ---------- Match detail ---------- */
.detail-head {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px;
	background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
	border: 1px solid var(--border); border-radius: 16px; padding: 20px 26px; margin-bottom: 18px;
}
.detail-head .dh-date { font-size: 18px; font-weight: 800; }
.detail-head .dh-sub { color: var(--muted); font-size: 13px; margin-top: 5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.detail-head .center { text-align: center; }
.detail-head .center .score-pill { font-size: 32px; justify-content: center; }
.detail-head .center .res { font-weight: 800; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; }
.detail-head .right { text-align: right; }
.detail-head .right .label { font-size: 10px; letter-spacing: 1px; color: var(--muted-2); text-transform: uppercase; }
.detail-head .right .value { font-weight: 700; font-size: 18px; }

.teams { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .teams { grid-template-columns: 1fr; } }
.team-col { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--panel); }
.team-head { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.team-head.Astartes { background: linear-gradient(90deg, rgba(224,177,90,0.16), transparent); }
.team-head.Xenos { background: linear-gradient(90deg, rgba(224,86,79,0.16), transparent); }
.team-title { display: flex; align-items: baseline; gap: 10px; }
.team-title .faction-big { font-size: 19px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; }
.team-title.Astartes .faction-big { color: var(--astartes); }
.team-title.Xenos .faction-big { color: var(--xenos); }
.team-title .team-small { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted-2); }
.team-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.tt { text-align: center; }
.tt .l { font-size: 9px; letter-spacing: 1px; color: var(--muted-2); text-transform: uppercase; }
.tt .v { font-weight: 800; font-size: 15px; }

/* Shared grid template so header cells sit exactly above the value cells. The
   numeric columns are fixed-width and center-aligned in BOTH the header and the
   rows, so the headers are centered over their stats and everything lines up. */
.col-head, .prow {
	display: grid; grid-template-columns: 18px minmax(0, 1fr) 46px 60px 54px 46px 56px 64px;
	gap: 8px; align-items: center; padding: 0 14px;
}
.col-head { height: 30px; background: var(--panel-2); color: var(--muted-2); font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; font-weight: 700; }
.col-head .num, .prow .num { text-align: center; }
.prow { min-height: 46px; border-top: 1px solid var(--border-soft); cursor: pointer; transition: background 0.12s; }
.prow:hover { background: var(--panel-2); }
.prow.open { background: var(--panel-2); }
.pr-toggle { color: var(--muted-2); font-size: 11px; transition: transform 0.18s; }
.prow.open .pr-toggle { transform: rotate(90deg); color: var(--accent); }
.pr-id { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pr-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; flex: none; cursor: pointer; }
.pr-name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-name a { text-decoration: none; }
.pr-name a:hover { color: var(--accent); text-decoration: underline; }
.left-tag { font-size: 9px; font-weight: 800; letter-spacing: 0.5px; color: var(--bad); border: 1px solid var(--bad); border-radius: 5px; padding: 1px 4px; margin-left: 6px; vertical-align: middle; }
.num { font-weight: 700; font-size: 13px; }
.pr-time { color: var(--muted); }
.acc-badge { justify-self: center; padding: 3px 7px; border-radius: 7px; font-weight: 800; font-size: 12px; min-width: 50px; text-align: center; }

/* ---------- Left-during-match section ---------- */
.left-section { margin-top: 18px; }
.left-table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--panel); }
.left-head, .left-row {
	display: grid; grid-template-columns: minmax(0, 1fr) 46px 60px 54px 46px 56px 64px;
	gap: 8px; align-items: center; padding: 0 14px;
}
.left-head { height: 28px; background: var(--panel-2); color: var(--muted-2); font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; font-weight: 700; }
.left-head .num, .left-row .num { text-align: center; }
.left-row { min-height: 42px; border-top: 1px solid var(--border-soft); cursor: pointer; transition: background 0.12s; }
.left-row:hover { background: var(--panel-2); }
.left-row.open { background: var(--panel-2); }
.lr-toggle { color: var(--muted-2); font-size: 11px; flex: none; transition: transform 0.18s; }
.left-row.open .lr-toggle { transform: rotate(90deg); color: var(--accent); }
.lr-id { display: flex; align-items: center; gap: 9px; min-width: 0; font-weight: 700; font-size: 13px; }
.lr-id a { text-decoration: none; }
.lr-id a:hover { color: var(--accent); text-decoration: underline; }
.lr-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 11px; flex: none; }
.lr-team { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.lr-team.Astartes { color: var(--astartes); }
.lr-team.Xenos { color: var(--xenos); }

/* ---------- Expanded player ---------- */
.expand { background: var(--bg-2); border-top: 1px solid var(--border); }
.expand-inner { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 18px 18px; }
.expand-inner.two { grid-template-columns: 260px 1fr; }
@media (max-width: 980px) { .expand-inner.two { grid-template-columns: 1fr; } }
.body-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.body-wrap canvas { width: 230px; height: 240px; }
.heat-legend { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.heat-grad { width: 110px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #2a2f3a, var(--hot), #ffd166, #fff); }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-content: start; }
.stat-box { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.stat-box .label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted-2); }
.stat-box .value { font-size: 22px; font-weight: 800; margin-top: 3px; }
.stat-box.accent .value { color: var(--accent); }
.stat-box.wide { grid-column: 1 / -1; }
.shotline { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin-top: 5px; }
.part-table { width: 100%; margin-top: 4px; border-collapse: collapse; }
.part-table td { padding: 4px 0; font-size: 12px; border-top: 1px solid var(--border-soft); }
.part-table td.p-name { color: var(--muted); }
.part-table td.p-bar { width: 55%; }
.part-table td.p-pct { text-align: right; font-weight: 700; }
.bar { height: 7px; border-radius: 4px; background: var(--panel-3); overflow: hidden; }
.bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); }

/* ---------- Player profile ---------- */
.profile-head {
	display: flex; align-items: center; gap: 18px; background: linear-gradient(180deg, var(--panel), var(--bg-2));
	border: 1px solid var(--border); border-radius: 16px; padding: 22px 26px; margin-bottom: 18px;
}
.profile-head .big-av { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; font-weight: 800; }
.profile-head .nm-row { display: flex; align-items: center; gap: 12px; }
.profile-head .nm { font-size: 24px; font-weight: 800; }
.roblox-btn {
	display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
	background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
	cursor: pointer; text-decoration: none; transition: all 0.12s;
}
.roblox-btn:hover { border-color: var(--accent-dim); color: var(--accent); transform: translateY(-1px); }
.profile-head .sub { color: var(--muted); font-size: 13px; margin-top: 5px; }
.profile-grid { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .profile-grid { grid-template-columns: 1fr; } }
.section-title { font-size: 13px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted-2); margin: 4px 0 10px; }
.life-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hist-row {
	display: grid; grid-template-columns: 6px 1fr auto auto; gap: 14px; align-items: center;
	background: var(--panel); border: 1px solid var(--border); border-radius: 11px; padding: 10px 14px 10px 0;
	cursor: pointer; margin-bottom: 8px; transition: border-color 0.12s;
}
.hist-row:hover { border-color: var(--accent-dim); }
.hist-when { display: flex; flex-direction: column; gap: 3px; }
.hist-stats { display: flex; gap: 14px; color: var(--muted); font-size: 12px; }
.hist-stats b { color: var(--text); }