/*
 * Betbass components, built on tokens.css + base.css (the retro screen rules):
 * ten-colour palette only, 8px grid, notched corners instead of rounding,
 * pixel fonts, no gradients/opacity/blur, stepped (never eased) animation.
 * Always a black screen, so there is no separate dark theme.
 */
:root {
	color-scheme: dark;
	/* chart series, in order */
	--series-0: var(--c-cyan);
	--series-1: var(--c-yellow);
	--series-2: var(--c-pink);
	--series-3: var(--c-green);
	--series-4: var(--c-red);
	--series-5: var(--c-white);
	--frame: var(--px) solid var(--border);
	--rule: var(--px) solid var(--c-navy);
}

html { -webkit-text-size-adjust: 100%; }
::selection { background: var(--c-yellow); color: var(--c-black); }
p { margin: 0 0 var(--space-2); }
p:last-child { margin-bottom: 0; }
a { color: var(--c-cyan); text-decoration: none; }
a:hover { color: var(--c-yellow); text-decoration: underline; text-decoration-thickness: var(--px); }
a:focus-visible, button:focus-visible { outline: var(--px) solid var(--c-yellow); outline-offset: var(--px); }
h1, h2, h3 { margin-bottom: var(--space-2); }
h3 { color: var(--text-muted); margin-top: var(--space-3); }
code { background: var(--c-navy); padding: 0 var(--space-1); font-family: var(--font-body); word-break: break-all; }
blockquote { margin: 0 0 var(--space-2); padding-left: var(--space-2); border-left: var(--px) solid var(--c-pink); }
ul { margin: 0 0 var(--space-2); padding-left: var(--space-3); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-2); }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-body); }
.error { color: var(--danger); margin: 0; }
.pos { color: var(--c-green); }
.neg { color: var(--c-red); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.row { display: flex; gap: var(--space-1); flex-wrap: wrap; align-items: center; }
.row.tight { flex-wrap: nowrap; }
.stack { display: flex; flex-direction: column; gap: var(--space-2); }
[hidden] { display: none !important; }

@keyframes blink { 50% { visibility: hidden; } }

/* ---------- the lake (pixel-lake.js) sits behind everything ---------- */
.lake { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.topbar, main, .footer { position: relative; z-index: 1; }

/* ---------- top bar ---------- */
.topbar { background: var(--surface); border-bottom: var(--frame); position: sticky; top: 0; z-index: 10; }
.topbar-inner { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; flex-wrap: wrap; padding-top: var(--space-1); padding-bottom: var(--space-1); }
.brand { font-family: var(--font-display); font-size: var(--fs-label); line-height: 24px; color: var(--c-yellow); display: flex; align-items: center; gap: var(--space-1); text-transform: uppercase; }
.brand:hover { color: var(--c-yellow); text-decoration: none; }
.brand-mark { display: inline-grid; place-items: center; width: 32px; height: 32px; background: var(--c-yellow); color: var(--c-black); clip-path: var(--notch); }
.play-tag { font-family: var(--font-body); font-size: var(--fs-body); color: var(--c-pink); text-transform: uppercase; }
.play-tag::before { content: "["; }
.play-tag::after { content: "]"; }
.nav { display: flex; gap: var(--space-2); flex: 1; }
.nav a { color: var(--text); text-transform: uppercase; padding: 0 var(--space-1); white-space: nowrap; }
.nav a:hover { color: var(--c-yellow); text-decoration: none; }
.nav a.active { color: var(--c-yellow); }
.nav a.active::before { content: ">"; margin-right: var(--space-1); animation: blink 1s steps(1) infinite; }
.account { display: flex; align-items: center; gap: var(--space-2); }
.account form { margin: 0; }
.account a { text-transform: uppercase; }
.balance { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--c-yellow); font-variant-numeric: tabular-nums; }
.balance:hover { text-decoration: none; }
.coin { width: 16px; height: 16px; background: var(--c-yellow); box-shadow: inset 0 0 0 var(--px) var(--c-maroon); clip-path: var(--notch); }
.who { color: var(--text-muted); text-transform: uppercase; }

@media (max-width: 720px) {
	.nav { order: 3; flex-basis: 100%; overflow-x: auto; }
	.account { margin-left: auto; }
	.who { display: none; }
}
@media (max-width: 480px) { .play-tag { display: none; } }

/* ---------- buttons & inputs ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
	background: var(--accent); color: var(--accent-text); border: 0; clip-path: var(--notch);
	padding: var(--space-1) var(--space-2); font: inherit; text-transform: uppercase; cursor: pointer; white-space: nowrap;
}
.btn:hover, .btn:focus-visible { background: var(--c-white); color: var(--c-black); text-decoration: none; outline: none; }
.btn:active { transform: translateY(var(--px)); }
.btn-small { padding: 0 var(--space-2); }
.btn-block { width: 100%; }
.btn-secondary { background: var(--c-black); color: var(--text); box-shadow: inset 0 0 0 var(--px) var(--c-white); }
.btn-secondary:hover, .btn-secondary:focus-visible { background: var(--c-navy); color: var(--c-white); }
.btn-danger { background: var(--c-black); color: var(--danger); box-shadow: inset 0 0 0 var(--px) var(--danger); }
.btn-danger:hover, .btn-danger:focus-visible { background: var(--danger); color: var(--c-black); }
.btn .badge { background: var(--c-black); color: var(--c-yellow); }
.btn-link { background: none; border: 0; padding: 0; color: var(--c-cyan); font: inherit; text-transform: uppercase; cursor: pointer; }
.btn-link:hover { color: var(--c-yellow); text-decoration: underline; text-decoration-thickness: var(--px); }

input, select, textarea {
	font: inherit; color: var(--text); background: var(--c-black);
	border: var(--frame); clip-path: var(--notch); padding: var(--space-1) var(--space-2); width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--c-grey); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-yellow); }
input[type="radio"] {
	appearance: none; width: 24px; height: 24px; flex: none; margin: 0; padding: 0;
	border: var(--px) solid var(--c-white); clip-path: none; background: var(--c-black); cursor: pointer;
}
input[type="radio"]:checked { background: var(--c-yellow); box-shadow: inset 0 0 0 var(--px) var(--c-black); }
label { display: flex; flex-direction: column; gap: var(--space-1); }
label.inline { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-2); }
label.inline input { width: 136px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { color: var(--text-muted); text-transform: uppercase; margin-bottom: var(--space-1); padding: 0; }

/* ---------- layout pieces ---------- */
main.wrap { padding-top: var(--space-3); padding-bottom: var(--space-4); }
.card {
	background: var(--surface); border: var(--frame); clip-path: var(--notch);
	padding: var(--space-3); margin-bottom: var(--space-3); overflow-x: auto;
}
.card h2 { font-size: var(--fs-label); }
.page-head, .market-head {
	background: var(--surface); border: var(--frame); clip-path: var(--notch);
	padding: var(--space-3); margin-bottom: var(--space-3);
}
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-2); flex-wrap: wrap; }
.page-head h1 { margin-bottom: var(--space-1); }
.back { display: inline-block; background: var(--c-black); padding: 0 var(--space-1); margin-bottom: var(--space-2); text-transform: uppercase; }
.footer { padding-bottom: var(--space-4); }
.footer span { background: var(--c-black); color: var(--text-muted); padding: 0 var(--space-1); }
.empty { text-align: center; padding: var(--space-4) var(--space-3); }
.empty .btn { margin-top: var(--space-2); }
.flashes { margin-bottom: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.flash { padding: var(--space-1) var(--space-2); background: var(--c-black); border: var(--frame); clip-path: var(--notch); }
.flash-ok { border-color: var(--c-green); color: var(--c-green); }
.flash-error { border-color: var(--danger); color: var(--danger); }
.auth { max-width: 520px; margin: var(--space-4) auto; }
.auth .muted:last-child { margin-top: var(--space-2); }

.banner { padding: var(--space-1) var(--space-2); margin-bottom: var(--space-3); color: var(--c-black); clip-path: var(--notch); text-transform: uppercase; }
.banner-ok { background: var(--c-green); }
.banner-warn { background: var(--c-yellow); }
.banner-muted { background: var(--c-grey); }

.badge {
	display: inline-block; padding: 0 var(--space-1); line-height: 24px; text-transform: uppercase;
	background: var(--c-navy); color: var(--c-white); vertical-align: middle; white-space: nowrap; clip-path: var(--notch);
}
.badge-sportsbook { background: var(--c-green); color: var(--c-black); }
.badge-prediction { background: var(--c-cyan); color: var(--c-black); }
.status-open, .status-resolved, .status-won { background: var(--c-green); color: var(--c-black); }
.status-locked, .status-closed { background: var(--c-yellow); color: var(--c-black); }
.status-lost { background: var(--c-red); color: var(--c-black); }
.status-void { background: var(--c-grey); color: var(--c-black); }

.odds-pill {
	display: inline-block; min-width: 72px; text-align: center; font-variant-numeric: tabular-nums;
	background: var(--c-navy); color: var(--c-white); padding: 0 var(--space-1); clip-path: var(--notch);
}
.prob-track { display: inline-block; height: 8px; width: 72px; background: var(--c-navy); vertical-align: middle; }
.prob-track > span { display: block; height: 100%; background: var(--c-cyan); }
.prob-track.wide { display: block; width: 100%; max-width: 280px; margin-top: var(--space-1); }

/* ---------- filters ---------- */
.filters { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.seg { display: inline-flex; background: var(--c-black); border: var(--frame); clip-path: var(--notch); padding: var(--px); }
.seg a, .seg label { padding: 0 var(--space-2); color: var(--text); text-transform: uppercase; cursor: pointer; flex-direction: row; align-items: center; }
.seg a:hover { text-decoration: none; color: var(--c-yellow); }
.seg a.on, .seg label:has(input:checked) { background: var(--c-yellow); color: var(--c-black); }
.seg label { position: relative; }
.seg label input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); border: 0; }
.seg label:has(input:focus-visible) { outline: var(--px) solid var(--c-cyan); outline-offset: calc(-1 * var(--px)); }
.seg-full { display: flex; }
.seg-full label { flex: 1; justify-content: center; }

/* ---------- market grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-3); }
.market-card { display: flex; flex-direction: column; gap: var(--space-2); color: var(--text); margin: 0; }
.market-card:hover { text-decoration: none; color: var(--text); border-color: var(--c-yellow); }
.market-card h3 { color: var(--text); margin: 0; line-height: 24px; }
.market-card-head { display: flex; gap: var(--space-1); align-items: center; flex-wrap: wrap; }
.market-card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: var(--space-2); margin-top: auto; border-top: var(--rule); padding-top: var(--space-1); }
.market-card-foot span { white-space: nowrap; }
.mini-outcomes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.mini-outcomes li { display: flex; align-items: center; gap: var(--space-2); }
.mini-outcomes .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-outcomes .price { color: var(--c-yellow); min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.mini-outcomes li.winner .label { color: var(--c-green); }
.mini-outcomes li.winner .label::before { content: "> "; }

/* ---------- market page ---------- */
.market-head .badges { display: flex; gap: var(--space-1); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-2); }
.market-head h1 { font-size: var(--fs-title); }
.description { white-space: pre-line; color: var(--text-muted); max-width: 70ch; margin: 0; }
.market-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-3); align-items: start; }
.market-side { position: sticky; top: 88px; }
@media (max-width: 880px) {
	/* Single column: flatten so the bet slip sits right under the prices, above activity. */
	.market-layout { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
	.market-main { display: contents; }
	.market-side { position: static; order: 1; }
	.activity-card { order: 2; }
}
@media (max-width: 720px) {
	h1 { font-size: var(--fs-title); }
	.market-head h1 { font-size: var(--fs-label); line-height: 24px; }
	.card, .page-head, .market-head { padding: var(--space-2); }
	th { white-space: normal; }
	th, td { padding-left: var(--px); padding-right: var(--px); }
	.prob-track.wide { max-width: 72px; }
	.hide-sm { display: none; }
}

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 400; color: var(--text-muted); text-transform: uppercase; padding: 0 var(--space-1) var(--space-1); border-bottom: var(--frame); white-space: nowrap; }
td { padding: var(--space-1); border-bottom: var(--rule); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
th.num { text-align: right; }
table.compact td { padding: 0 var(--space-1); }
tr.pickable { cursor: pointer; }
tr.pickable:hover td { background: var(--c-navy); }
tr.winner td:first-child { color: var(--c-green); }
tr.me td { background: var(--c-navy); }

.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-1); padding: 0; }
.legend li { display: flex; align-items: center; gap: var(--space-1); }
.swatch { width: 16px; height: 16px; }
.chart { width: 100%; height: auto; display: block; shape-rendering: crispEdges; }
.chart .gridline { stroke: var(--c-navy); stroke-width: 2; }
.chart .axis-label { fill: var(--text-muted); font-family: var(--font-body); font-size: 16px; text-transform: uppercase; }
.chart .line { fill: none; stroke-width: 4; }
.series-0 { --c: var(--series-0); } .series-1 { --c: var(--series-1); } .series-2 { --c: var(--series-2); }
.series-3 { --c: var(--series-3); } .series-4 { --c: var(--series-4); } .series-5 { --c: var(--series-5); }
.chart .line { stroke: var(--c, var(--series-0)); }
.chart .dot { fill: var(--c, var(--series-0)); }
.swatch { background: var(--c, var(--series-0)); }

.activity { list-style: none; margin: 0; padding: 0; }
.activity li { padding: var(--space-1) 0; border-bottom: var(--rule); }
.activity li:last-child { border-bottom: 0; }
.activity strong { color: var(--c-yellow); font-weight: 400; }

/* bet slip */
.slip { border-color: var(--c-yellow); }
.slip h2 { color: var(--c-yellow); }
.pick-list { display: flex; flex-direction: column; gap: var(--space-1); }
.pick { flex-direction: row; align-items: center; gap: var(--space-2); border: var(--frame); clip-path: var(--notch); padding: 0 var(--space-2); min-height: 48px; cursor: pointer; }
.pick .label { flex: 1; min-width: 0; }
.pick .price { color: var(--c-yellow); font-variant-numeric: tabular-nums; }
.pick:has(input:checked) { border-color: var(--c-yellow); background: var(--c-navy); }
.pick.dim { color: var(--c-grey); border-color: var(--c-grey); }
.pick.dim .price { color: var(--c-grey); }
.quick { display: flex; gap: var(--space-1); }
.quick button {
	flex: 1; font: inherit; text-transform: uppercase; padding: 0; cursor: pointer;
	border: var(--frame); clip-path: var(--notch); background: var(--c-black); color: var(--text);
}
.quick button:hover { border-color: var(--c-yellow); color: var(--c-yellow); }
.readout { margin: 0; background: var(--c-navy); clip-path: var(--notch); padding: var(--space-1) var(--space-2); display: flex; flex-direction: column; }
.readout div { display: flex; justify-content: space-between; gap: var(--space-2); }
.readout dt { color: var(--c-pink); text-transform: uppercase; }
.readout dd { margin: 0; color: var(--c-yellow); font-variant-numeric: tabular-nums; }

.bets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.bet { display: flex; flex-direction: column; padding-bottom: var(--space-1); border-bottom: var(--rule); }
.bet:last-child { border-bottom: 0; padding-bottom: 0; }

.admin-panel { border-color: var(--c-pink); }
.admin-panel h2 { color: var(--c-pink); }
.admin-panel h3:first-of-type { margin-top: 0; }
.admin-panel form + form { margin-top: var(--space-1); }

/* ---------- portfolio ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(192px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-1); }
.stat { display: flex; flex-direction: column; padding: var(--space-2); }
.stat strong { font-size: 48px; line-height: 48px; font-weight: 400; color: var(--c-yellow); font-variant-numeric: tabular-nums; }
.stat strong.pos { color: var(--c-green); }
.stat strong.neg { color: var(--c-red); }

/* ---------- new market ---------- */
.new-market { display: flex; flex-direction: column; gap: var(--space-3); max-width: 760px; }
.kind-picker { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@media (max-width: 600px) { .kind-picker { grid-template-columns: 1fr; } }
.kind-picker legend { grid-column: 1 / -1; }
.kind-option { flex-direction: row; align-items: flex-start; gap: var(--space-2); border: var(--frame); clip-path: var(--notch); padding: var(--space-2); cursor: pointer; }
.kind-option:has(input:checked) { border-color: var(--c-yellow); background: var(--c-navy); }
.kind-option input { margin-top: var(--space-1); }
.kind-body { display: flex; flex-direction: column; }
.kind-body strong { font-family: var(--font-display); font-size: var(--fs-label); font-weight: 400; line-height: 32px; text-transform: uppercase; color: var(--c-yellow); }
.outcome-head, .outcome-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px 40px; gap: var(--space-1); align-items: center; }
.outcome-head { text-transform: uppercase; }
#outcome-rows { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-2); }
.remove-row { color: var(--c-red); }

@media (prefers-reduced-motion: reduce) {
	.nav a.active::before { animation: none; }
	.btn:active { transform: none; }
}