/* Build Cup: arcade fighter-select screen. Yellow is reserved for the visitor's own picks and the lock-in action. */

@font-face {
	font-family: "Big Shoulders";
	src: url(fonts/big-shoulders.woff2) format("woff2");
	font-weight: 600 900;
	font-display: swap;
}
@font-face {
	font-family: "Silkscreen";
	src: url(fonts/silkscreen.woff2) format("woff2");
	font-display: swap;
}

:root {
	--arena: #0b0b14;
	--arena-2: #14142a;
	--line: #2a2a4a;
	--ink: #f4f4fb;
	--ink-2: #b4b4d0;
	--ink-3: #8a8aac;
	--p1: #ff2e63;
	--p2: #08d9d6;
	--pick: #ffe600;
	--pick-ink: #14120a;
	--warn: #ff8a3d;
	--display: "Big Shoulders", "Arial Narrow", sans-serif;
	--pixel: "Silkscreen", ui-monospace, monospace;
	--body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--gutter: clamp(16px, 4vw, 48px);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--hud-h: 64px;
	color-scheme: dark;
	accent-color: var(--pick);
}

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

html { scrollbar-color: var(--line) var(--arena); scroll-padding-top: calc(var(--hud-h) + 16px); }

body {
	margin: 0;
	overflow-x: clip;
	min-height: 100vh;
	background: var(--arena);
	color: var(--ink);
	font: 400 17px/1.5 var(--body);
	-webkit-font-smoothing: antialiased;
	caret-color: var(--pick);
}
body:has(.lockbar) { padding-bottom: 150px; }

/* CRT scanlines over everything, never intercepting clicks */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 50;
	background: repeating-linear-gradient(to bottom, rgb(0 0 0 / .18) 0 1px, transparent 1px 3px);
	mix-blend-mode: multiply;
}

::selection { background: var(--pick); color: var(--pick-ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
img { display: block; max-width: 100%; }
strong { color: var(--ink); font-weight: 650; }

.sr {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- HUD */

.hud {
	position: sticky;
	top: 0;
	z-index: 40;
	height: var(--hud-h);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
	padding: 0 var(--gutter);
	background: rgb(11 11 20 / .92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}

.hud__brand {
	justify-self: start;
	font: italic 900 30px/1 var(--display);
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
}
.hud__brand span { color: var(--p1); margin-left: .12em; }

.hud__label {
	display: block;
	font: 400 10px/1 var(--pixel);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--ink-2);
}

.hud__round {
	display: grid;
	justify-items: center;
	gap: 3px;
	padding: 6px 14px 5px;
	border: 2px solid var(--ink);
	transform: skewX(-8deg);
}
.hud__round > * { transform: skewX(8deg); }
.hud__num { font: italic 900 24px/.9 var(--display); text-transform: uppercase; }
.hud__round--timer .hud__num { font-variant-numeric: tabular-nums; min-width: 7.2ch; text-align: center; }
.hud__round.is-blink .hud__num { animation: blink 1.2s steps(2, jump-none) infinite; }

.hud__picks { justify-self: end; display: grid; justify-items: end; gap: 6px; }
.hud__pips { display: flex; gap: 5px; }
.hud__pips i {
	width: clamp(18px, 4vw, 30px);
	height: 12px;
	background: var(--line);
	transform: skewX(-20deg);
	transition: background .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.hud__pips i.is-on { background: var(--pick); box-shadow: 0 2px 10px rgb(255 230 0 / .45); }

/* ---------------------------------------------------------------- notices */

.notice {
	display: grid;
	gap: 2px;
	max-width: 70ch;
	margin: 24px var(--gutter) 0;
	padding: 14px 18px;
	background: var(--arena-2);
	border: 1px solid var(--line);
	border-top: 3px solid var(--p2);
}
.notice strong { font: italic 800 24px/1.1 var(--display); text-transform: uppercase; }
.notice span { color: var(--ink-2); }
.notice--warn { border-top-color: var(--warn); }

/* ---------------------------------------------------------------- intro */

.intro {
	display: grid;
	gap: 12px 48px;
	padding: clamp(28px, 5vw, 56px) var(--gutter) clamp(20px, 3vw, 32px);
}
@media (min-width: 960px) {
	.intro { grid-template-columns: auto minmax(0, 1fr); align-items: end; }
	.intro__facts { grid-column: 2; grid-row: 1 / span 2; }
}

.intro__title {
	margin: 0;
	font: italic 900 clamp(56px, 11vw, 96px)/.85 var(--display);
	text-transform: uppercase;
	text-shadow: -3px 0 6px rgb(255 46 99 / .55), 3px 0 6px rgb(8 217 214 / .55);
}
.intro__lede { margin: 0; max-width: 48ch; font-size: 19px; }

.intro__facts {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
	max-width: 62ch;
	color: var(--ink-2);
	font-size: 15px;
}
.intro__facts li { position: relative; padding-left: 22px; }
.intro__facts li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 10px;
	height: 10px;
	background: var(--p2);
	transform: skewX(-20deg);
}
.server { font-family: var(--pixel); font-weight: 400; font-size: .92em; color: var(--p2); }

/* ---------------------------------------------------------------- fighter select */

.ballot { padding: 0 var(--gutter); }

.roster {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: 12px;
}

.fighter {
	position: relative;
	display: block;
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 16 / 9;
	background: var(--arena-2);
	isolation: isolate;
}
.fighter__input { position: absolute; opacity: 0; pointer-events: none; }

.shot {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ease-out), filter .35s var(--ease-out);
}
.shot--empty { display: block; background: var(--arena-2); }

/* Bottom scrim so the name reads over bright sky and grass */
.fighter::after {
	content: "";
	position: absolute;
	inset: 45% 0 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to top, rgb(11 11 20 / .92), rgb(11 11 20 / 0));
}

.fighter__name {
	position: absolute;
	z-index: 2;
	left: 16px;
	right: 16px;
	bottom: 12px;
	font: italic 900 clamp(30px, 3.4vw, 44px)/.9 var(--display);
	text-transform: uppercase;
	text-wrap: balance;
	text-shadow: 0 2px 12px rgb(0 0 0 / .6);
}
/* Health bar under each name */
.fighter__name::after {
	content: "";
	display: block;
	width: min(240px, 80%);
	height: 7px;
	margin-top: 8px;
	background: var(--p2);
	transform: skewX(-20deg) scaleX(.6);
	transform-origin: left;
	transition: transform .35s var(--ease-out), background .25s;
}

.fighter__tag {
	position: absolute;
	z-index: 3;
	top: 24px;
	left: 24px;
	padding: 7px 10px 6px;
	font: 400 12px/1 var(--pixel);
	text-transform: uppercase;
	background: var(--pick);
	color: var(--pick-ink);
	opacity: 0;
	transform: skewX(-12deg) scale(.6);
	transition: transform .4s var(--ease-out), opacity .2s;
}

/* Cursor frame: four yellow corner brackets */
.fighter::before {
	content: "";
	position: absolute;
	inset: 10px;
	z-index: 3;
	pointer-events: none;
	--c: var(--pick);
	--l: 30px;
	--t: 5px;
	background:
		linear-gradient(var(--c) 0 0) top left / var(--l) var(--t),
		linear-gradient(var(--c) 0 0) top left / var(--t) var(--l),
		linear-gradient(var(--c) 0 0) top right / var(--l) var(--t),
		linear-gradient(var(--c) 0 0) top right / var(--t) var(--l),
		linear-gradient(var(--c) 0 0) bottom left / var(--l) var(--t),
		linear-gradient(var(--c) 0 0) bottom left / var(--t) var(--l),
		linear-gradient(var(--c) 0 0) bottom right / var(--l) var(--t),
		linear-gradient(var(--c) 0 0) bottom right / var(--t) var(--l);
	background-repeat: no-repeat;
	opacity: 0;
	transform: scale(1.12);
	transition: transform .45s var(--ease-out), opacity .2s;
}

@media (hover: hover) {
	.fighter:not(.is-locked):hover .shot { transform: scale(1.04); }
	.fighter:not(.is-locked):hover .fighter__name::after { transform: skewX(-20deg) scaleX(1); }
}
.fighter:has(:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Picked */
.fighter:has(:checked)::before { opacity: 1; transform: scale(1); }
.fighter:has(:checked) .fighter__tag { opacity: 1; transform: skewX(-12deg) scale(1); }
.fighter:has(:checked) .fighter__name::after { background: var(--pick); transform: skewX(-20deg) scaleX(1); }

/* Three already picked: the rest step back until one is untapped */
.fighter.is-locked { cursor: not-allowed; }
.fighter.is-locked .shot { filter: grayscale(.85) brightness(.45); }
.fighter.is-locked .fighter__name { color: var(--ink-2); }

/* ---------------------------------------------------------------- lock bar */

.lockbar {
	position: fixed;
	z-index: 45;
	left: 0;
	right: 0;
	bottom: 0;
	display: grid;
	gap: 8px;
	padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
	background: rgb(11 11 20 / .94);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--line);
	box-shadow: 0 -8px 32px rgb(0 0 0 / .5);
}
@media (min-width: 760px) {
	.lockbar { grid-template-columns: 1fr auto; align-items: center; gap: 24px; }
}
.lockbar__status { margin: 0; font: 500 15px/1.35 var(--body); color: var(--ink-2); }
.lockbar.is-ready .lockbar__status { color: var(--pick); }
.lockbar__row { display: flex; gap: 8px; min-width: 0; }

.lockbar__email {
	flex: 1 1 auto;
	min-width: 0;
	width: min(340px, 100%);
	height: 52px;
	padding: 0 14px;
	font: 500 17px/1 var(--body);
	color: var(--ink);
	background: var(--arena-2);
	border: 2px solid var(--line);
	border-radius: 0;
	transition: border-color .2s;
}
.lockbar__email::placeholder { color: var(--ink-3); }
.lockbar__email:focus { outline: none; border-color: var(--ink); }
.lockbar__email:user-invalid { border-color: var(--warn); }

.btn {
	flex: none;
	height: 52px;
	padding: 0 28px;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	white-space: nowrap;
	font: italic 900 26px/1 var(--display);
	text-transform: uppercase;
	letter-spacing: .02em;
	clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
	transition: transform .2s var(--ease-out), background .2s;
}
.btn--go { background: var(--pick); color: var(--pick-ink); }
.btn--go:hover { background: #fff27a; }
.btn--go:active { transform: scale(.96); }
.js .lockbar:not(.is-ready) .btn--go { background: #4a4620; color: #d9d2a0; }

/* ---------------------------------------------------------------- splash states */

.splash {
	min-height: calc(100vh - var(--hud-h) - 120px);
	display: grid;
	align-content: center;
	justify-items: start;
	gap: 16px;
	padding: 48px var(--gutter);
	max-width: 900px;
}
.splash__title {
	margin: 0;
	font: italic 900 clamp(64px, 13vw, 96px)/.85 var(--display);
	text-transform: uppercase;
	text-shadow: -4px 0 8px rgb(255 46 99 / .6), 4px 0 8px rgb(8 217 214 / .6);
}
.splash__text { margin: 0; max-width: 52ch; font-size: 19px; color: var(--ink-2); }
.splash form { margin-top: 12px; }
@keyframes blink { 50% { opacity: .25; } }

/* ---------------------------------------------------------------- winner */

.champion { position: relative; min-height: min(80vh, 760px); display: grid; align-items: end; overflow: hidden; }
.champion__shot { position: absolute; inset: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.champion__shot .shot { height: 100%; }
.champion::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(11 11 20 / .95) 10%, rgb(11 11 20 / 0) 60%); }
.champion__copy { position: relative; z-index: 1; padding: 48px var(--gutter); }
.champion__name { margin: 0; text-wrap: balance; font: italic 900 clamp(72px, 14vw, 96px)/.82 var(--display); text-transform: uppercase; text-shadow: 0 4px 30px rgb(0 0 0 / .7); }
.champion__by { margin: 16px 0 0; font-size: 22px; color: var(--ink-2); }

/* ---------------------------------------------------------------- tally */

.tally { padding: clamp(32px, 5vw, 64px) var(--gutter) 0; max-width: 1040px; }
.tally__title {
	margin: 0 0 10px;
	font: italic 900 clamp(48px, 9vw, 88px)/.85 var(--display);
	text-transform: uppercase;
	text-shadow: -3px 0 6px rgb(255 46 99 / .55), 3px 0 6px rgb(8 217 214 / .55);
}
.tally__text { margin: 0 0 24px; max-width: 62ch; color: var(--ink-2); }
.tally__text--after { margin: 24px 0 0; }

.board { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; background: var(--line); border: 1px solid var(--line); }
.board__row {
	display: grid;
	grid-template-columns: 48px 96px minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	padding: 8px 18px 8px 0;
	background: var(--arena-2);
}
.board__row .shot { width: 96px; height: 54px; }
.board__rank { justify-self: center; font: italic 900 28px/1 var(--display); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.board__main { display: grid; gap: 8px; min-width: 0; }
.board__name { font: italic 800 26px/1 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.board__name small { font: 400 14px/1 var(--body); text-transform: none; color: var(--ink-2); }

.board__bar { display: block; height: 14px; background: var(--arena); outline: 1px solid var(--line); transform: skewX(-20deg); }
.board__bar i {
	display: block;
	height: 100%;
	background: var(--p2);
	transform: scaleX(var(--share));
	transform-origin: left;
	animation: fill .9s var(--ease-out) both;
}
@keyframes fill { from { transform: scaleX(0); } }

.board__votes { width: 64px; display: grid; justify-items: end; font: italic 900 34px/1 var(--display); font-variant-numeric: tabular-nums; }
.board__votes small { font: 400 10px/1 var(--pixel); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin-top: 4px; }

.board__row.is-top .board__rank { color: var(--p1); }
.board__row.is-top .board__bar i { background: var(--p1); }

@media (max-width: 520px) {
	.board__row { grid-template-columns: 36px 64px minmax(0, 1fr) auto; gap: 12px; padding-right: 12px; }
	.board__row .shot { width: 64px; height: 36px; }
	.board__name { font-size: 22px; }
	.board__votes { width: 52px; font-size: 28px; }
}

.foot { padding: 32px var(--gutter); font: 400 11px/1 var(--pixel); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation: none !important; scroll-behavior: auto !important; }
}

.notice a { color: var(--p2); text-underline-offset: 3px; }