/* =========================================================================
   Cricket VLR — design system
   Light, dense, monospace numerals. Everything is driven by the tokens
   below; change a token, not a rule.
   ========================================================================= */

:root {
	/* Surfaces and ink */
	--bg:            #F8F9FA;
	--surface:       #FFFFFF;
	--surface-alt:   #FCFCFD;
	--line:          #E2E8F0;
	--line-strong:   #CBD5E1;
	--ink:           #1E293B;
	--ink-soft:      #475569;
	--muted:         #64748B;

	/* Signal colours — used sparingly, only where they carry meaning */
	--live:          #C8102E;  /* the seam on a cricket ball */
	--live-soft:     #FDEBEE;
	--win:           #15803D;
	--loss:          #B91C1C;
	--four:          #0369A1;
	--six:           #6D28D9;
	--extra:         #B45309;

	/* Type */
	--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--fs-xs:  11px;
	--fs-sm:  12px;
	--fs-md:  13px;
	--fs-lg:  15px;
	--fs-xl:  19px;
	--fs-2xl: 26px;

	/* Rhythm — tight by design */
	--sp-1: 4px;
	--sp-2: 6px;
	--sp-3: 10px;
	--sp-4: 14px;
	--sp-5: 20px;

	--radius: 4px;
	--shadow: 0 1px 2px rgba(15, 23, 42, .05);

	--shell: 1440px;
	--rail-l: 292px;
	--rail-r: 300px;
	--header-h: 46px;
}

/* ---------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
	font-size: var(--fs-md);
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--live); }

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
p { margin: 0 0 var(--sp-3); }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }

.num {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

:focus-visible {
	outline: 2px solid var(--live);
	outline-offset: 2px;
	border-radius: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ink);
	color: #fff;
	padding: var(--sp-2) var(--sp-3);
	z-index: 200;
}
.skip-link:focus { left: var(--sp-3); }

/* --------------------------------------------------------------- header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--header-h);
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

.header-in {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 0 var(--sp-3);
	height: 100%;
	display: flex;
	align-items: center;
	gap: var(--sp-4);
}

.brand {
	display: flex;
	align-items: baseline;
	gap: 5px;
	font-weight: 800;
	font-size: var(--fs-lg);
	letter-spacing: -.03em;
	white-space: nowrap;
}
.brand-mark { color: var(--live); }

.nav ul {
	display: flex;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav a {
	display: block;
	padding: 6px 9px;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--ink-soft);
	border-radius: var(--radius);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.nav a:hover { background: var(--bg); color: var(--ink); }
.nav .current-menu-item > a { color: var(--live); }

.header-tools { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

.search-mini {
	display: flex;
	align-items: center;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 3px 8px;
}
.search-mini input {
	border: 0;
	background: transparent;
	font-size: var(--fs-sm);
	width: 148px;
	outline: none;
	color: var(--ink);
}
.search-mini input::placeholder { color: var(--muted); }

.btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	font-size: var(--fs-sm);
	font-weight: 600;
	border: 1px solid var(--line);
	background: var(--surface);
	border-radius: var(--radius);
	cursor: pointer;
}
.btn:hover { border-color: var(--line-strong); }
.btn--primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--primary:hover { background: #0f172a; color: #fff; }

/* --------------------------------------------------------------- ticker */

.ticker {
	position: sticky;
	top: var(--header-h);
	z-index: 90;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	overflow: hidden;
}
.ticker-track {
	max-width: var(--shell);
	margin: 0 auto;
	display: flex;
	gap: 0;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
}
.ticker-track::-webkit-scrollbar { display: none; }

.tick {
	flex: 0 0 auto;
	min-width: 158px;
	padding: 6px var(--sp-3);
	border-right: 1px solid var(--line);
	scroll-snap-align: start;
}
.tick:hover { background: var(--bg); }

.tick-meta {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: var(--fs-xs);
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tick-live { color: var(--live); font-style: normal; }

.tick-row {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-3);
	font-size: var(--fs-sm);
	line-height: 1.5;
}
.tick-row em { font-style: normal; font-weight: 600; }
.tick-when { font-size: var(--fs-xs); color: var(--muted); }

/* ----------------------------------------------------------------- grid */

.shell {
	max-width: var(--shell);
	margin: 0 auto;
	padding: var(--sp-3);
	display: grid;
	grid-template-columns: var(--rail-l) minmax(0, 1fr) var(--rail-r);
	gap: var(--sp-3);
	align-items: start;
}
.shell--wide { grid-template-columns: minmax(0, 1fr); }
.shell--two { grid-template-columns: minmax(0, 1fr) var(--rail-r); }

.col-left, .col-right { position: sticky; top: calc(var(--header-h) + 58px); }
.col-left { max-height: calc(100vh - var(--header-h) - 70px); overflow-y: auto; scrollbar-width: thin; }

/* --------------------------------------------------------------- panels */

.panel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin-bottom: var(--sp-3);
	overflow: hidden;
}

.panel-h {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sp-2) var(--sp-3);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--ink-soft);
	background: var(--surface-alt);
	border-bottom: 1px solid var(--line);
}
.panel-h a { font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; }

.panel-group-h {
	padding: 4px var(--sp-3);
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--muted);
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	text-transform: uppercase;
	letter-spacing: .05em;
}

.panel-body { padding: var(--sp-3); }
.panel-foot {
	padding: var(--sp-2) var(--sp-3);
	border-top: 1px solid var(--line);
	font-size: var(--fs-sm);
	background: var(--surface-alt);
}

.empty {
	padding: var(--sp-4);
	color: var(--muted);
	font-size: var(--fs-sm);
	text-align: center;
}

/* ------------------------------------------------------------------ tags */

.tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 5px;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 3px;
	color: var(--ink-soft);
	white-space: nowrap;
}
.tag--ghost { background: transparent; color: var(--muted); }
.tag--live { background: var(--live-soft); border-color: #F7C9D2; color: var(--live); }
.tag--auto { background: #EEF2FF; border-color: #DBE1FE; color: #4338CA; }

.pulse {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--live);
	animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .35; transform: scale(.8); }
}

/* ------------------------------------------------------------ match card */

.mcard { border-bottom: 1px solid var(--line); }
.mcard:last-child { border-bottom: 0; }
.mcard-link { display: block; padding: var(--sp-2) var(--sp-3); }
.mcard:hover { background: var(--surface-alt); }

.mcard-top {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 5px;
}
.mcard-when { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }

.mcard-teams { display: grid; gap: 2px; }
.mcard-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
}
.mcard-team { font-weight: 600; font-size: var(--fs-md); }
.mcard-score { font-size: var(--fs-md); font-weight: 600; }

.mcard-rail { margin-top: 6px; }
.mcard-foot {
	margin-top: 5px;
	font-size: var(--fs-xs);
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mcard--feed { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: var(--sp-2); }
.mcard--feed .mcard-link { padding: var(--sp-3); }

/* --------------------------------------------- the over rail (signature) */

.rail {
	display: flex;
	gap: 3px;
	align-items: center;
	flex-wrap: nowrap;
	overflow: hidden;
}
.rail-b {
	flex: 0 0 auto;
	min-width: 17px;
	height: 17px;
	display: grid;
	place-items: center;
	font-family: var(--mono);
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--ink-soft);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 3px;
}
.rail-b.is-dot   { color: var(--muted); }
.rail-b.is-four  { color: #fff; background: var(--four);  border-color: var(--four); }
.rail-b.is-six   { color: #fff; background: var(--six);   border-color: var(--six); }
.rail-b.is-wkt   { color: #fff; background: var(--live);  border-color: var(--live); }
.rail-b.is-extra { color: var(--extra); background: #FEF6E7; border-color: #F6E2BD; }
.rail-b.is-new   { animation: pop .35s ease-out; }

@keyframes pop {
	from { transform: scale(.6); opacity: 0; }
	to   { transform: scale(1);  opacity: 1; }
}

/* ------------------------------------------------------------ match head */

.mhead {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin-bottom: var(--sp-3);
	overflow: hidden;
}
.mhead-top {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: var(--sp-2) var(--sp-3);
	background: var(--surface-alt);
	border-bottom: 1px solid var(--line);
	font-size: var(--fs-xs);
	color: var(--muted);
}
.mhead-body {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-3);
}
.mhead-side { display: flex; flex-direction: column; gap: 2px; }
.mhead-side--b { text-align: right; }
.mhead-team { font-size: var(--fs-lg); font-weight: 700; }
.mhead-score { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; }
.mhead-mid { text-align: center; font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.mhead-note {
	padding: var(--sp-2) var(--sp-3);
	border-top: 1px solid var(--line);
	font-size: var(--fs-sm);
	color: var(--ink-soft);
	background: var(--surface-alt);
}

/* ------------------------------------------------------- win probability */

.wp { padding: var(--sp-3); }
.wp-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--fs-sm);
	margin-bottom: 5px;
}
.wp-label { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.wp-bar {
	height: 7px;
	background: var(--line);
	border-radius: 99px;
	overflow: hidden;
}
.wp-fill {
	display: block;
	height: 100%;
	background: var(--ink);
	border-radius: 99px;
	transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

/* ------------------------------------------------------------------ tabs */

.tabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--line);
	background: var(--surface);
	overflow-x: auto;
	scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
	padding: 8px var(--sp-3);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--muted);
	border-bottom: 2px solid transparent;
	background: none;
	border-top: 0; border-left: 0; border-right: 0;
	cursor: pointer;
	white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.is-on { color: var(--ink); border-bottom-color: var(--live); }

.tabpane { display: none; }
.tabpane.is-on { display: block; }

/* ---------------------------------------------------------------- tables */

.tablewrap { overflow-x: auto; }

.stat {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}
.stat th, .stat td {
	padding: 5px var(--sp-3);
	border-bottom: 1px solid var(--line);
	text-align: right;
	white-space: nowrap;
}
.stat th {
	position: sticky;
	top: 0;
	background: var(--surface-alt);
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .05em;
	cursor: pointer;
	z-index: 1;
}
.stat th:hover { color: var(--ink); }
.stat th[aria-sort="ascending"]::after  { content: " ▲"; font-size: 8px; }
.stat th[aria-sort="descending"]::after { content: " ▼"; font-size: 8px; }
.stat .col-name { text-align: left; }
.stat td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.stat tbody tr:hover { background: var(--surface-alt); }
.stat tbody tr:last-child td { border-bottom: 0; }
.stat .is-out { color: var(--muted); }
.stat .is-live-bat { font-weight: 700; }
.stat .pos { color: var(--muted); margin-right: 6px; }

.stat--standings tbody tr:nth-child(-n+4) .col-name { box-shadow: inset 2px 0 0 var(--win); }

/* ----------------------------------------------------------------- charts */

.chartbox {
	position: relative;
	height: 220px;
	padding: var(--sp-3);
}
.chartbox--tall { height: 300px; }

.wagon {
	display: block;
	margin: 0 auto;
	max-width: 320px;
}

.legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	padding: 0 var(--sp-3) var(--sp-3);
	font-size: var(--fs-xs);
	color: var(--muted);
}
.legend span { display: inline-flex; align-items: center; gap: 4px; }
.legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* ------------------------------------------------------------------ news */

.news {
	display: flex;
	gap: var(--sp-3);
	padding: var(--sp-3);
	border-bottom: 1px solid var(--line);
}
.news:last-child { border-bottom: 0; }
.news:hover { background: var(--surface-alt); }
.news-thumb { flex: 0 0 116px; }
.news-thumb img { border-radius: 3px; }
.news-title { font-size: var(--fs-lg); line-height: 1.3; margin-bottom: 3px; }
.news-dek { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: 5px; }
.news-meta { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--muted); }

/* --------------------------------------------------------------- threads */

.thread {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: 6px var(--sp-3);
	border-bottom: 1px solid var(--line);
	font-size: var(--fs-sm);
}
.thread:last-child { border-bottom: 0; }
.thread:hover { background: var(--surface-alt); }
.thread-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.thread-count { color: var(--muted); font-size: var(--fs-xs); }

.vote { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.vote-btn {
	border: 0;
	background: none;
	color: var(--line-strong);
	cursor: pointer;
	line-height: 1;
	font-size: 10px;
	padding: 1px 3px;
}
.vote-btn:hover { color: var(--ink-soft); }
.vote-btn.is-on { color: var(--live); }
.vote-score { font-size: var(--fs-xs); font-weight: 700; }

.cmt { list-style: none; margin: 0; padding: 0; }
.cmt-inner { display: flex; gap: var(--sp-3); padding: var(--sp-3); border-bottom: 1px solid var(--line); }
.cmt .children { list-style: none; margin: 0 0 0 var(--sp-5); padding: 0; border-left: 1px solid var(--line); }
.cmt-head { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 3px; }
.cmt-author { color: var(--ink); font-size: var(--fs-sm); }
.cmt-text { font-size: var(--fs-sm); }
.cmt-actions { margin-top: 4px; font-size: var(--fs-xs); }
.cmt-actions a { color: var(--muted); font-weight: 600; }

.flair {
	padding: 0 4px;
	border-radius: 2px;
	background: var(--bg);
	border: 1px solid var(--line);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: .04em;
}

/* ------------------------------------------------------------- live chat */

.chat { display: flex; flex-direction: column; height: 380px; }
.chat-log {
	flex: 1;
	overflow-y: auto;
	padding: var(--sp-2) var(--sp-3);
	display: flex;
	flex-direction: column;
	gap: 4px;
	scrollbar-width: thin;
}
.chat-msg { font-size: var(--fs-sm); }
.chat-msg b { font-weight: 700; }
.chat-msg .chat-t { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-right: 5px; }
.chat-form { display: flex; gap: var(--sp-2); padding: var(--sp-2); border-top: 1px solid var(--line); }
.chat-form input {
	flex: 1;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 5px 8px;
	font-size: var(--fs-sm);
	outline: none;
}
.chat-form input:focus { border-color: var(--line-strong); }
.chat-note { padding: var(--sp-3); font-size: var(--fs-sm); color: var(--muted); text-align: center; }

/* ---------------------------------------------------------- player cards */

.pcard {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--sp-3);
	margin-bottom: var(--sp-3);
}
.pcard-id { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.pcard-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.pcard-name { font-size: var(--fs-lg); font-weight: 700; }
.pcard-sub { font-size: var(--fs-xs); color: var(--muted); }
.pcard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.pcard-stat {
	display: grid;
	grid-template-columns: auto auto;
	gap: 1px var(--sp-2);
	padding: var(--sp-2);
	background: var(--bg);
	border-radius: 3px;
	font-size: var(--fs-sm);
}
.pcard-fmt { grid-column: 1 / -1; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.pcard-lbl { font-size: 10px; color: var(--muted); align-self: center; }

.phero {
	display: flex;
	gap: var(--sp-4);
	align-items: center;
	padding: var(--sp-4);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin-bottom: var(--sp-3);
}
.phero img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.phero h1 { font-size: var(--fs-2xl); }
.phero-meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: var(--sp-3); }
.kpi { background: var(--surface); padding: var(--sp-3); }
.kpi-v { font-family: var(--mono); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; }
.kpi-l { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }

/* ------------------------------------------------------------- article */

.article {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--sp-5);
}
.article h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
.article-meta { font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--sp-4); display: flex; gap: var(--sp-3); }
.article-body { font-size: 15px; line-height: 1.65; max-width: 68ch; }
.article-body h2 { font-size: var(--fs-xl); margin: var(--sp-5) 0 var(--sp-2); }
.article-body ul { padding-left: var(--sp-5); }

/* ------------------------------------------------------------- footer */

.site-footer {
	border-top: 1px solid var(--line);
	background: var(--surface);
	margin-top: var(--sp-5);
	padding: var(--sp-5) var(--sp-3) 72px;
}
.footer-in {
	max-width: var(--shell);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	justify-content: space-between;
	font-size: var(--fs-sm);
	color: var(--muted);
}
.site-footer ul { display: flex; gap: var(--sp-4); list-style: none; margin: 0; padding: 0; }

/* --------------------------------------------------------- mobile nav */

.tabbar { display: none; }

@media (max-width: 1180px) {
	:root { --rail-l: 260px; }
	.shell { grid-template-columns: var(--rail-l) minmax(0, 1fr); }
	.col-right { display: none; }
}

@media (max-width: 860px) {
	.shell { grid-template-columns: minmax(0, 1fr); padding: var(--sp-2); }
	.col-left { position: static; max-height: none; overflow: visible; order: 2; }
	.col-mid { order: 1; }
	.nav { display: none; }
	.search-mini input { width: 108px; }

	/* Swipeable cards on the small screen: the rail becomes a carousel. */
	.panel-group {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.panel-group::-webkit-scrollbar { display: none; }
	.panel-group .mcard {
		flex: 0 0 82%;
		scroll-snap-align: start;
		border-right: 1px solid var(--line);
		border-bottom: 0;
	}

	.mhead-body { grid-template-columns: 1fr auto 1fr; padding: var(--sp-3) var(--sp-2); gap: var(--sp-2); }
	.mhead-score { font-size: var(--fs-xl); }
	.news-thumb { flex-basis: 84px; }

	.tabbar {
		display: flex;
		position: fixed;
		bottom: 0; left: 0; right: 0;
		z-index: 120;
		background: var(--surface);
		border-top: 1px solid var(--line);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.tabbar a {
		flex: 1;
		padding: 8px 0 9px;
		text-align: center;
		font-size: 10px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .05em;
		color: var(--muted);
	}
	.tabbar a.is-on { color: var(--live); }
	.tabbar-ico { display: block; font-size: 15px; line-height: 1.2; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* Print: the scorecard, nothing else. */
@media print {
	.site-header, .ticker, .col-left, .col-right, .tabbar, .site-footer { display: none; }
	.shell { display: block; }
	.panel { border-color: #999; }
}