/* Photo Clash, the TV. Sized by the screen's height (vh) so it reads from the
   couch at any resolution, laid out for a 16:9 screen. No site nav here. */

main:has(.tv-app) {
	padding: 0;
	overflow: hidden;
}

.tv-app {
	position: relative;
	min-height: 100dvh;
	padding: 4vh 4vw;
	font-size: 2.2vh;
}

.tv-app [hidden] {
	display: none !important;
}

.tv-app .screen {
	display: none;
}

.tv-app[data-screen="lobby"] .screen-lobby,
.tv-app[data-screen="writing"] .screen-writing,
.tv-app[data-screen="voting"] .screen-voting,
.tv-app[data-screen="scores"] .screen-scores,
.tv-app[data-screen="final"] .screen-final,
.tv-app[data-screen="intro"] .screen-intro {
	display: flex;
	animation: screen-in 0.5s var(--ease-out);
}

/* live.css keeps lobbies showing on wide screens; only on this one's own screen here. */
.tv-app .screen-lobby {
	display: none !important;
}

.tv-app[data-screen="lobby"] .screen-lobby {
	display: flex !important;
}

.tv-app.is-idle {
	cursor: none;
}

.tv-big {
	font-size: 9vh;
	letter-spacing: -0.035em;
	text-align: center;
	text-wrap: balance;
}

/* ---------- Lobby ---------- */

.screen-lobby {
	gap: 5vw;
	align-items: stretch;
	min-height: 92dvh;
}

.tv-join {
	flex: 0 0 38%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5vh;
}

.tv-join .pc-logo {
	font-size: 14vh;
}

.tv-join-print {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 1.4vh;
	padding: 2.6vh 2.6vh 3.4vh;
	border: 2px solid var(--ink);
	border-radius: 4px;
	background: var(--surface);
	box-shadow: 0.8vh 0.8vh 0 var(--ink);
	transform: rotate(-2deg);
}

.tv-join-print .qr {
	width: 26vh;
	color: var(--ink);
}

.tv-join-at {
	font-size: 2.8vh;
	font-weight: 600;
}

.tv-code {
	display: flex;
	gap: 1.4vh;
	font-weight: 800;
	font-size: 10vh;
	line-height: 1;
}

.tv-side {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2.4vh;
	min-width: 0;
}

/* Players, pinned up as prints. */
.tv-players {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 2.2vh 2vh;
	min-height: 17vh;
	margin: 0;
	padding: 1vh 0 0;
	list-style: none;
}

.tv-players[data-empty="true"]::before {
	content: "";
	width: 11vh;
	height: 13vh;
	border: 2px dashed #0004;
	border-radius: 4px;
	animation: bob 2.4s ease-in-out infinite;
}

.tv-player {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 0.6vh;
	width: 12vh;
	transform: rotate(var(--tilt));
}

.tv-player.is-new {
	animation: print-in 0.7s var(--ease-spring) both;
}

@keyframes print-in {
	from {
		opacity: 0;
		transform: translateY(-8vh) rotate(calc(var(--tilt) * -4)) scale(1.4);
	}
}

.tv-player-print {
	position: relative;
	font-size: 5.4vh;
	box-shadow: 0.5vh 0.5vh 0 var(--ink);
}

.tv-player.is-away .tv-player-print {
	opacity: 0.4;
	filter: grayscale(1);
}

.tv-crown {
	position: absolute;
	top: -0.5em;
	left: 50%;
	width: 0.7em;
	transform: translateX(-50%) rotate(-8deg);
	animation: crown 0.5s var(--ease-spring);
}

@keyframes crown {
	from {
		transform: translate(-50%, -1em) rotate(-40deg) scale(0.4);
		opacity: 0;
	}
}

.tv-player-name {
	max-width: 100%;
	overflow: hidden;
	font-weight: 800;
	font-size: 2.3vh;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tv-player-tools {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 5;
	display: grid;
	gap: 0.5vh;
	padding: 0.8vh;
	border: 2px solid var(--ink);
	border-radius: 10px;
	background: var(--surface);
	box-shadow: var(--shadow);
	transform: translateX(-50%) rotate(calc(var(--tilt) * -1));
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s, visibility 0.15s;
}

/* Above the mode buttons and options below it. */
.tv-player:hover,
.tv-player:focus-within {
	z-index: 10;
}

.tv-player:hover .tv-player-tools,
.tv-player:focus-within .tv-player-tools {
	opacity: 1;
	visibility: visible;
}

.tv-player-tools .btn {
	white-space: nowrap;
}

.tv-player-tools .btn.is-armed {
	background: var(--coral);
	border-color: var(--ink);
}

/* Settings */
.tv-setup {
	display: grid;
	gap: 1.8vh;
	padding: 2.2vh;
}

.tv-modes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2vh;
}

.tv-modes .tv-mode {
	border-width: 2px;
	padding: 1.8vh 2.2vh;
	font-size: 3vh;
}

.tv-mode {
	display: flex;
	align-items: center;
	gap: 1.6vh;
	padding: 1.4vh 1.8vh;
	border: var(--border);
	border-radius: 14px;
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	font-weight: 800;
	font-size: 2.6vh;
	cursor: pointer;
	transition: transform 0.2s var(--ease-spring), background-color 0.2s, box-shadow 0.2s;
}

.tv-mode:hover {
	transform: translateY(-2px);
}

.tv-mode[aria-pressed="true"] {
	background: var(--pc);
	box-shadow: var(--shadow);
	transform: rotate(-1deg);
}

/* A tiny picture of the mode: a photo and its caption, one of them blank. */
.tv-mode-art {
	flex: none;
	display: grid;
	gap: 0.5vh;
	width: 6.5vh;
	padding: 0.6vh 0.6vh 0.9vh;
	border: 2px solid var(--ink);
	border-radius: 3px;
	background: var(--surface);
	transform: rotate(-4deg);
}

.tv-mode-pic {
	height: 3.6vh;
	background: linear-gradient(160deg, var(--yellow) 0 40%, var(--pink) 40% 70%, var(--mint) 70%);
	border: 1.5px solid var(--ink);
}

.tv-mode-lines {
	height: 1.4vh;
	background: repeating-linear-gradient(var(--ink) 0 2px, transparent 2px 5px);
}

.tv-mode-photo .tv-mode-pic {
	background: repeating-linear-gradient(-45deg, #0000 0 3px, #0002 3px 6px);
	border-style: dashed;
}

.tv-mode-caption .tv-mode-lines {
	background: repeating-linear-gradient(#0004 0 2px, transparent 2px 5px);
	border-bottom: 2px dashed var(--ink);
}

.tv-settings {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.8vh 3vh;
}

.tv-app .setting {
	display: grid;
	gap: 0.6vh;
	margin: 0;
}

.tv-app .setting-label {
	font-weight: 700;
	font-size: 1.9vh;
}

.tv-app .seg span {
	padding: 0.5vh 1.8vh;
	font-size: 2vh;
}

.tv-app .check {
	font-weight: 600;
	font-size: 2.1vh;
}

.tv-advanced summary {
	width: max-content;
	font-weight: 700;
	font-size: 2vh;
	cursor: pointer;
}

.tv-advanced[open] {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 1.4vh 4vh;
}

.tv-advanced[open] summary {
	flex-basis: 100%;
}

.tv-app .seg {
	justify-self: start;
}

.tv-themes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1vh 3vh;
	min-height: 4.2vh;
}

/* Photos for Caption Match: a stack you add to. */
.tv-photos {
	display: flex;
	align-items: center;
	gap: 2.4vh;
}

.tv-drop {
	display: flex;
	align-items: center;
	gap: 2vh;
	padding: 1.2vh 2.6vh 1.2vh 1.6vh;
	border: 2px dashed var(--ink);
	border-radius: 14px;
	background: #ffffff8c;
	color: var(--ink);
	font: inherit;
	font-weight: 800;
	font-size: 2.6vh;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.2s var(--ease-spring);
}

.tv-drop:hover,
.tv-app.is-dragging .tv-drop {
	background: var(--yellow);
	transform: rotate(-1deg) scale(1.03);
}

.tv-app.is-dragging .tv-drop {
	border-style: solid;
	box-shadow: var(--shadow-lg);
}

.tv-drop-stack {
	position: relative;
	width: 6vh;
	height: 6.6vh;
}

.tv-drop-stack span {
	position: absolute;
	inset: 0;
	border: 2px solid var(--ink);
	border-radius: 3px;
	background: linear-gradient(var(--pc), var(--pc)) 0.5vh 0.5vh / calc(100% - 1vh) 68% no-repeat, var(--surface);
	transition: transform 0.3s var(--ease-spring);
}

.tv-drop-stack span:nth-child(1) { transform: rotate(-12deg) translateX(-0.6vh); background-color: var(--surface); }
.tv-drop-stack span:nth-child(2) { transform: rotate(6deg) translateX(0.5vh); }
.tv-drop-stack span:nth-child(3) { transform: rotate(-2deg); }

.tv-drop:hover .tv-drop-stack span:nth-child(1) { transform: rotate(-20deg) translateX(-1.4vh); }
.tv-drop:hover .tv-drop-stack span:nth-child(2) { transform: rotate(14deg) translateX(1.2vh); }

.tv-drop.is-busy .tv-drop-stack span:nth-child(3) {
	animation: shuffle 0.6s ease-in-out infinite alternate;
}

@keyframes shuffle {
	to {
		transform: rotate(8deg) translateY(-1vh);
	}
}

.tv-drop-count {
	min-width: 2ch;
	font-size: 4.2vh;
	font-variant-numeric: tabular-nums;
}

.tv-photo-counts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8vh;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tv-photo-count {
	display: flex;
	gap: 0.8vh;
	padding: 0.3vh 1.3vh;
	border: 2px solid var(--ink);
	border-radius: 50px;
	background: var(--surface);
	font-weight: 600;
	font-size: 1.9vh;
}

.tv-start {
	display: flex;
	align-items: center;
	gap: 2.4vh;
	margin-top: auto;
}

.tv-start .btn.big {
	padding: 1.8vh 5vh;
	font-size: 3.4vh;
}

.tv-start-note {
	color: var(--muted);
	font-weight: 700;
	font-size: 2.4vh;
}

/* ---------- Shared bits of the game screens ---------- */

.screen-writing,
.screen-voting,
.screen-scores,
.screen-final {
	flex-direction: column;
	align-items: center;
	min-height: 92dvh;
}

.tv-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	align-self: stretch;
	min-height: 10vh;
}

.tv-round {
	padding: 0.4vh 2vh;
	border: var(--border);
	border-radius: 50px;
	background: var(--surface);
	font-weight: 800;
	font-size: 2.6vh;
}

/* The clock: a ring that empties. */
.tv-clock {
	--left: 1;
	position: relative;
	display: grid;
	place-items: center;
	width: 11vh;
	height: 11vh;
	margin-left: auto;
}

.tv-clock svg {
	position: absolute;
	inset: 0;
	transform: rotate(-90deg);
}

.tv-clock circle {
	fill: var(--surface);
	stroke: var(--ink);
	stroke-width: 4;
}

.tv-clock .tv-clock-left {
	fill: none;
	stroke: var(--mint);
	stroke-width: 9;
	stroke-dasharray: 100;
	stroke-dashoffset: calc((1 - var(--left)) * 100);
}

.tv-clock.is-low .tv-clock-left {
	stroke: var(--coral);
}

.tv-clock.is-low {
	animation: throb 0.5s ease-in-out infinite alternate;
}

.tv-clock span {
	position: relative;
	font-weight: 800;
	font-size: 4.4vh;
	font-variant-numeric: tabular-nums;
}

/* ---------- Writing ---------- */

.screen-writing .tv-big {
	margin: 3vh 0 7vh;
}

.tv-writers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5vh 4.5vh;
	max-width: 150vh;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tv-writer {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 1vh;
	transform: rotate(var(--tilt));
	animation: bob 2.6s ease-in-out infinite;
	animation-delay: calc(var(--i) * -0.4s);
}

@keyframes bob {
	50% {
		translate: 0 -1vh;
	}
}

.tv-writer.is-done {
	animation: none;
}

.tv-writer-print {
	font-size: 8.5vh;
	box-shadow: 0.6vh 0.6vh 0 var(--ink);
	filter: saturate(0.25);
	opacity: 0.7;
	transition: filter 0.4s, opacity 0.4s;
}

.tv-writer.is-done .tv-writer-print {
	filter: none;
	opacity: 1;
}

.tv-writer-name {
	font-weight: 800;
	font-size: 2.8vh;
}

.tv-done {
	position: absolute;
	top: 32%;
	left: 50%;
	padding: 0.2vh 1.4vh;
	border: 0.5vh solid var(--mint-strong);
	border-radius: 8px;
	background: #ffffffd9;
	color: var(--mint-strong);
	font-weight: 800;
	font-size: 3.4vh;
	transform: translateX(-50%) rotate(-12deg);
}

.tv-writer.just-done .tv-done {
	animation: stamp 0.45s var(--ease-spring) both;
}

.tv-writer.just-done .tv-writer-print {
	animation: thump 0.45s ease-out;
}

@keyframes stamp {
	from {
		opacity: 0;
		transform: translateX(-50%) rotate(-30deg) scale(3);
	}
}

@keyframes thump {
	30% {
		transform: scale(0.92);
	}
}

/* ---------- Voting ---------- */

.tv-pips {
	display: flex;
	gap: 1.2vh;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tv-pips li {
	width: 2.2vh;
	height: 2.2vh;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--surface);
}

.tv-pips .is-done {
	background: var(--ink);
}

.tv-pips .is-now {
	background: var(--yellow);
	transform: scale(1.35);
	transition: transform 0.3s var(--ease-spring);
}

.tv-arena {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	justify-items: center;
	gap: 2vw;
	width: 100%;
	font-size: 1.85vh;
}

.tv-fighter {
	--w: 58vh;
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(var(--w), 40vw);
	transform: rotate(-2deg);
	transition:
		transform 0.6s var(--ease-spring) var(--delay, 0ms),
		filter 0.6s var(--delay, 0ms),
		opacity 0.6s var(--delay, 0ms);
}

.tv-fighter-1 {
	transform: rotate(2deg);
}

.tv-arena[data-theme="social"] .tv-fighter { --w: 50vh; }
.tv-arena[data-theme="review"] .tv-fighter { --w: 72vh; font-size: 2.1vh; }

.tv-fighter.is-winner {
	z-index: 2;
	transform: rotate(-1deg) scale(1.05);
}

.tv-fighter-1.is-winner {
	transform: rotate(1deg) scale(1.05);
}

.tv-fighter.is-loser {
	filter: saturate(0.45);
	transform: rotate(-4deg) scale(0.9) translateY(2vh);
	opacity: 0.85;
}

.tv-fighter-1.is-loser {
	transform: rotate(4deg) scale(0.9) translateY(2vh);
}

.tv-none {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	border: 3px dashed var(--ink);
	border-radius: 14px;
	background: #ffffff80;
	color: var(--muted);
	font-weight: 800;
	font-size: 4vh;
}

.tv-vs {
	display: grid;
	place-items: center;
	width: 15vh;
	height: 15vh;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 111 111' preserveAspectRatio='none'%3E%3Cpolygon points='50,0 61,18 82,7 80,30 100,36 85,52 98,70 76,72 73,95 55,82 38,99 31,76 8,84 15,62 0,45 18,35 10,12 33,18' transform='translate%285 5%29' fill='%23000'/%3E%3Cpolygon points='50,0 61,18 82,7 80,30 100,36 85,52 98,70 76,72 73,95 55,82 38,99 31,76 8,84 15,62 0,45 18,35 10,12 33,18' fill='%23ffe066' stroke='%23000' stroke-width='3' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	font-weight: 800;
	font-size: 5.6vh;
	font-stretch: 75%;
	letter-spacing: -0.04em;
	transform: rotate(-6deg);
	transition: transform 0.4s var(--ease-out), opacity 0.4s;
}

.tv-arena.is-revealed .tv-vs {
	opacity: 0;
	transform: scale(0.4) rotate(-40deg);
}

/* The author's name, dropped on top of their card once the votes are in. */
.tv-byline {
	position: absolute;
	top: -3.4vh;
	left: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 1.2vh;
	padding: 0.7vh 1.2vh 0.7vh 0.9vh;
	border: 2px solid var(--ink);
	border-radius: 12px;
	background: var(--av, var(--surface));
	box-shadow: 0.5vh 0.5vh 0 var(--ink);
	font-size: 2.8vh;
	white-space: nowrap;
	transform: translateX(-50%) rotate(-3deg);
	visibility: hidden;
}

.tv-fighter-1 .tv-byline {
	transform: translateX(-50%) rotate(3deg);
}

.tv-arena.is-revealed .tv-byline {
	visibility: visible;
	animation: byline-in 0.6s var(--ease-spring) var(--delay, 0ms) both;
}

@keyframes byline-in {
	from {
		opacity: 0;
		translate: 0 -6vh;
		scale: 1.5;
	}
}

.tv-byline-name {
	font-weight: 800;
}

.tv-share {
	padding: 0 0.8vh;
	border-left: 2px solid var(--ink);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.tv-share:empty {
	display: none;
}

.tv-points {
	padding: 0.2vh 1vh;
	border: 2px solid var(--ink);
	border-radius: 8px;
	background: var(--surface);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* Who voted for it, pinned along the bottom. */
.tv-side-voters {
	position: absolute;
	bottom: -3vh;
	left: 0;
	right: 0;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.8vh;
	margin: 0;
	padding: 0;
	font-size: 3.4vh;
	list-style: none;
}

.tv-side-voters li {
	animation: voter-in 0.5s var(--ease-spring) var(--d) both;
}

@keyframes voter-in {
	from {
		opacity: 0;
		transform: translateY(12vh) rotate(30deg) scale(0.5);
	}
}

.tv-clash {
	position: absolute;
	top: 42%;
	left: 50%;
	z-index: 4;
	padding: 0.4vh 2.4vh 0.8vh;
	border: 0.9vh solid var(--coral);
	border-radius: 14px;
	background: #fffffff0;
	color: var(--coral);
	font-weight: 800;
	font-size: 11vh;
	font-stretch: 75%;
	letter-spacing: -0.04em;
	line-height: 1;
	box-shadow: 0 0 0 0.4vh var(--surface);
	transform: translate(-50%, -50%) rotate(-12deg);
	animation: clash 0.5s var(--ease-spring) var(--delay, 0ms) both;
}

@keyframes clash {
	from {
		opacity: 0;
		transform: translate(-50%, -50%) rotate(-40deg) scale(4);
	}
}

/* Who's voted so far (not for which side). */
.tv-voted {
	display: flex;
	justify-content: center;
	gap: 1vh;
	min-height: 6vh;
	margin: 3vh 0 0;
	padding: 0;
	font-size: 3.4vh;
	list-style: none;
}

.tv-voted .is-new {
	animation: voter-in 0.5s var(--ease-spring) both;
}

/* ---------- Scores ---------- */

.screen-scores .tv-big,
.screen-final .tv-big {
	margin: 4vh 0 5vh;
}

.tv-board {
	display: grid;
	gap: 1.4vh;
	width: min(120vh, 90vw);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tv-row {
	display: grid;
	grid-template-columns: 5vh auto minmax(0, 14vw) 1fr 9vh 10vh;
	align-items: center;
	gap: 2vh;
	padding: 1.1vh 2.4vh 1.1vh 1.4vh;
	border: var(--border);
	border-radius: 14px;
	background: var(--surface);
	box-shadow: var(--shadow);
	font-size: 3vh;
}

.tv-row.is-top {
	background: var(--yellow);
}

.tv-row .pc-avatar {
	font-size: 2.6vh;
}

.tv-row-rank {
	font-weight: 800;
	text-align: center;
}

.tv-row-name {
	overflow: hidden;
	font-weight: 800;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tv-row-bar {
	--share: 0;
	height: 2.2vh;
	border: 2px solid var(--ink);
	border-radius: 50px;
	background: linear-gradient(90deg, var(--av) calc(var(--share) * 100%), var(--surface) 0);
	transition: background 0.9s var(--ease-out);
}

.tv-row-plus {
	justify-self: center;
	padding: 0.1vh 1.2vh;
	border: 2px solid var(--ink);
	border-radius: 8px;
	background: var(--mint);
	font-weight: 800;
	font-size: 2.4vh;
	animation: plus-in 0.5s var(--ease-spring) 0.5s both;
}

@keyframes plus-in {
	from {
		opacity: 0;
		transform: scale(2.4) rotate(-12deg);
	}
}

.tv-row-score {
	font-weight: 800;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* ---------- Final ---------- */

.tv-final-title {
	font-size: 11vh;
}

.tv-podium {
	display: flex;
	align-items: flex-end;
	gap: 3vh;
	margin: 0 0 4vh;
	padding: 0;
	list-style: none;
}

.tv-step {
	display: grid;
	justify-items: center;
	gap: 1vh;
	width: 24vh;
	animation: podium-in 0.7s var(--ease-spring) both;
}

.tv-step-1 { animation-delay: 1.2s; }
.tv-step-2 { animation-delay: 0.6s; }
.tv-step-3 { animation-delay: 0.2s; }

@keyframes podium-in {
	from {
		opacity: 0;
		transform: translateY(20vh);
	}
}

.tv-step-print {
	font-size: 9vh;
	box-shadow: 0.6vh 0.6vh 0 var(--ink);
	transform: rotate(-4deg);
}

.tv-step-1 .tv-step-print {
	font-size: 12vh;
	transform: rotate(3deg);
}

.tv-step-name {
	font-weight: 800;
	font-size: 3.2vh;
}

.tv-step-score {
	font-weight: 700;
	font-size: 2.6vh;
	font-variant-numeric: tabular-nums;
}

.tv-step-block {
	display: grid;
	place-items: center;
	width: 100%;
	border: var(--border);
	border-bottom: 0;
	border-radius: 14px 14px 0 0;
	background: var(--av);
	font-weight: 800;
	font-size: 6vh;
}

.tv-step-1 .tv-step-block { height: 22vh; }
.tv-step-2 .tv-step-block { height: 15vh; }
.tv-step-3 .tv-step-block { height: 10vh; }

.tv-final-rest .tv-row {
	font-size: 2.4vh;
}

/* ---------- Tools and notes ---------- */

.tv-tools {
	position: fixed;
	right: 2vh;
	bottom: 2vh;
	z-index: 30;
	display: flex;
	gap: 1vh;
	transition: opacity 0.4s;
}

.tv-tools .btn.is-armed {
	background: var(--coral);
}

.tv-app.is-idle .tv-tools {
	opacity: 0;
	pointer-events: none;
}

.tv-note {
	position: fixed;
	left: 50%;
	bottom: 3vh;
	padding: 0.8vh 2.2vh;
	border-radius: 50px;
	background: var(--ink);
	color: #fff;
	font-weight: 700;
	font-size: max(16px, 2vh);
	transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
	.tv-app *,
	.tv-app *::before {
		animation-duration: 0.01ms !important;
		animation-delay: 0ms !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
	}
}

/* ---------- Folds: options and photos tuck away once they're set ---------- */

.tv-fold-head {
	display: flex;
	align-items: center;
	gap: 1.4vh;
	width: max-content;
	max-width: 100%;
	padding: 0.4vh 1.8vh 0.4vh 1.2vh;
	border: 2px solid var(--ink);
	border-radius: 50px;
	background: var(--surface);
	font-weight: 800;
	font-size: 2.2vh;
	list-style: none;
	cursor: pointer;
}

.tv-fold-head::-webkit-details-marker {
	display: none;
}

.tv-fold-head::before {
	content: "";
	width: 0.6em;
	height: 0.6em;
	border-right: 0.16em solid var(--ink);
	border-bottom: 0.16em solid var(--ink);
	transform: rotate(-45deg);
	transition: transform 0.25s var(--ease-spring);
}

.tv-fold[open] > .tv-fold-head::before {
	transform: rotate(45deg) translate(-0.1em, -0.1em);
}

.tv-fold-summary {
	color: var(--muted);
	font-weight: 600;
}

.tv-fold[open] .tv-fold-summary {
	display: none;
}

.tv-setup-fold[open] > .tv-setup {
	margin-top: 1.4vh;
	animation: unfold 0.35s var(--ease-out);
}

@keyframes unfold {
	from {
		opacity: 0;
		transform: translateY(-1.5vh);
	}
}

.tv-photos {
	flex-direction: column;
	align-items: stretch;
	gap: 1.4vh;
}

.tv-photos-row {
	display: flex;
	align-items: center;
	gap: 2.4vh;
}

.tv-pile {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6vh;
	max-height: 26vh;
	margin: 1.4vh 0 0;
	padding: 1vh 1vh 1vh 0.4vh;
	overflow-y: auto;
	list-style: none;
	animation: unfold 0.35s var(--ease-out);
}

.tv-pile-print {
	position: relative;
	width: 11vh;
	padding: 0.6vh 0.6vh 1.6vh;
	border: 2px solid var(--ink);
	border-radius: 3px;
	background: var(--surface);
	box-shadow: 0.4vh 0.4vh 0 var(--ink);
	transform: rotate(var(--tilt));
}

.tv-pile-print.is-new {
	animation: print-drop 0.55s var(--ease-spring) both;
}

.tv-pile-print img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.tv-pile-x {
	position: absolute;
	top: -1vh;
	right: -1vh;
	display: grid;
	place-items: center;
	width: 3.2vh;
	height: 3.2vh;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--surface);
	font: inherit;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s;
}

.tv-pile-print:hover .tv-pile-x,
.tv-pile-x:focus-visible,
.tv-pile-x.is-armed {
	opacity: 1;
}

.tv-pile-x.is-armed {
	background: var(--coral);
}

/* The winning post gets the like. */
.tv-fighter.is-winner .sn-heart {
	fill: var(--coral);
	animation: like 0.5s var(--ease-spring) var(--delay, 0ms) both;
}

@keyframes like {
	from {
		transform: scale(0.3);
	}
}

.tv-mode-text {
	display: grid;
	gap: 0.3vh;
	text-align: left;
}

.tv-mode-about {
	font-weight: 600;
	font-size: 1.9vh;
	color: var(--muted);
}

.tv-mode[aria-pressed="true"] .tv-mode-about {
	color: var(--ink);
}

.tv-needed {
	padding: 0.4vh 1.6vh;
	border: 2px dashed var(--ink);
	border-radius: 50px;
	background: #ffe06673;
	font-weight: 700;
	font-size: 2.2vh;
}

.tv-tip {
	color: var(--muted);
	font-size: 2vh;
	font-weight: 600;
}

.tv-pile-print .pc-used {
	font-size: 1.5vh;
	bottom: -0.2vh;
}

.tv-photo-count.is-used {
	border-style: dashed;
	color: var(--muted);
}

/* ---------- Set pieces between phases ---------- */

/* The camera iris that closes on the lobby when a game starts. */
.tv-iris {
	position: fixed;
	inset: 0;
	z-index: 90;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.tv-iris polygon {
	stroke: var(--ink);
	stroke-width: 0.6;
	stroke-linejoin: round;
}

.screen-intro {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 92dvh;
}

.screen-intro [data-intro-part] {
	display: none;
}

.tv-app[data-intro="rules"] [data-intro-part="rules"],
.tv-app[data-intro="go"] [data-intro-part="go"],
.tv-app[data-intro="voting"] [data-intro-part="voting"] {
	display: flex;
}

/* How to play: the rules pinned up like prints, and a bar that fills until it's time. */
.tv-rules {
	flex-direction: column;
	align-items: center;
	gap: 7vh;
	width: 100%;
}

.tv-rules-title {
	animation: print-drop 0.7s var(--ease-spring) both;
}

.tv-rules-list {
	display: flex;
	justify-content: center;
	gap: 4vh;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: rule;
}

.tv-rules-list li {
	--tilt: -2deg;
	position: relative;
	flex: 1 1 0;
	max-width: 52vh;
	padding: 6vh 3.4vh 4vh;
	border: 2px solid var(--ink);
	border-radius: 6px;
	background: var(--surface);
	box-shadow: 0.8vh 0.8vh 0 var(--ink);
	font-weight: 700;
	font-size: 3.4vh;
	line-height: 1.3;
	transform: rotate(var(--tilt));
	counter-increment: rule;
	animation: print-in 0.7s var(--ease-spring) both;
	animation-delay: calc(0.35s + var(--n, 0) * 0.18s);
}

.tv-rules-list li:nth-child(2) { --tilt: 1.5deg; --n: 1; }
.tv-rules-list li:nth-child(3) { --tilt: -1deg; --n: 2; }
.tv-rules-list li:nth-child(4) { --tilt: 2deg; --n: 3; }

/* The step's number, on a colored sticker at the top. */
.tv-rules-list li::before {
	content: counter(rule);
	position: absolute;
	top: -3.6vh;
	left: 50%;
	display: grid;
	place-items: center;
	width: 7vh;
	height: 7vh;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--sticker, var(--yellow));
	box-shadow: 0.4vh 0.4vh 0 var(--ink);
	font-weight: 800;
	font-size: 4vh;
	transform: translateX(-50%) rotate(calc(var(--tilt) * -2));
}

.tv-rules-list li:nth-child(2)::before { --sticker: var(--pink); }
.tv-rules-list li:nth-child(3)::before { --sticker: var(--mint); }
.tv-rules-list li:nth-child(4)::before { --sticker: var(--lilac); }

.tv-rules-bar {
	--p: 0;
	position: relative;
	width: min(110vh, 80vw);
	height: 2.6vh;
	border: 2px solid var(--ink);
	border-radius: 50px;
	background: var(--surface);
	box-shadow: 0.4vh 0.4vh 0 var(--ink);
}

.tv-rules-fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: calc(var(--p) * 100%);
	border-radius: inherit;
	background: repeating-linear-gradient(-45deg, var(--cyan) 0 1.2vh, #5fd6d6 1.2vh 2.4vh);
}

/* A little camera riding the end of the bar. */
.tv-rules-cam {
	position: absolute;
	top: 50%;
	left: calc(var(--p) * 100%);
	width: 7vh;
	height: 5.5vh;
	translate: -50% -58%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 25'%3E%3Cpath d='M3 7h6l2.5-4h9L23 7h6a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z' fill='%23ffb3d1' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='16' cy='14.5' r='5.5' fill='%2381ecec' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='26' cy='10.5' r='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
	animation: bob 0.6s ease-in-out infinite;
}

/* Before a round: the round, a film-leader 3-2-1, then "Let's go!". */
.tv-go {
	position: relative;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 84vh;
}

.tv-go-round {
	position: absolute;
	top: 50%;
	z-index: 1;
	margin: 0;
	padding: 1vh 5vh 1.4vh;
	border: 2px solid var(--ink);
	border-radius: 50px;
	background: var(--surface);
	box-shadow: 0.8vh 0.8vh 0 var(--ink);
	font-weight: 800;
	font-size: 11vh;
	letter-spacing: -0.03em;
	white-space: nowrap;
	transform: translateY(-50%) rotate(-3deg);
	transition: top 0.5s var(--ease-spring), font-size 0.5s var(--ease-spring), transform 0.5s var(--ease-spring);
}

.tv-app[data-go-step="round"] .tv-go-round {
	animation: slam 0.55s var(--ease-spring) both;
}

.tv-app[data-go-step="count"] .tv-go-round,
.tv-app[data-go-step="go"] .tv-go-round {
	top: 0;
	font-size: 5vh;
	transform: translateY(0) rotate(-3deg);
}

@keyframes slam {
	from {
		opacity: 0;
		transform: translateY(-50%) scale(2.4) rotate(-14deg);
	}
}

/* The countdown at the head of a reel of film: rings, crosshairs, and a sweep. */
.tv-leader {
	--sweep: 0;
	position: relative;
	display: grid;
	place-items: center;
	width: 60vh;
	height: 60vh;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background:
		linear-gradient(var(--ink), var(--ink)) center / 100% 0.35vh no-repeat,
		linear-gradient(var(--ink), var(--ink)) center / 0.35vh 100% no-repeat,
		var(--surface);
	box-shadow:
		inset 0 0 0 4vh var(--surface),
		inset 0 0 0 calc(4vh + 2px) var(--ink),
		1vh 1vh 0 var(--ink);
	opacity: 0;
	transform: scale(0.4) rotate(-30deg);
	transition: opacity 0.3s, transform 0.5s var(--ease-spring);
}

.tv-app[data-go-step="count"] .tv-leader {
	opacity: 1;
	transform: none;
}

.tv-app[data-go-step="go"] .tv-leader {
	opacity: 0;
	transform: scale(2.2) rotate(40deg);
	transition: opacity 0.35s, transform 0.45s ease-in;
}

.tv-leader-sweep {
	position: absolute;
	inset: calc(4vh + 2px);
	border-radius: 50%;
	background: conic-gradient(#ffe066 calc(var(--sweep) * 360deg), transparent 0);
	mix-blend-mode: multiply;
}

.tv-leader-n {
	position: relative;
	font-weight: 800;
	font-size: 34vh;
	font-stretch: 75%;
	line-height: 1;
	color: var(--surface);
	-webkit-text-stroke: 0.5vh var(--ink);
	paint-order: stroke fill;
	text-shadow: 1vh 1vh 0 var(--ink);
}

.tv-go-text {
	position: absolute;
	top: 50%;
	z-index: 0;
	margin: 0;
	padding: 2vh 7vh 3vh;
	font-weight: 800;
	font-size: 17vh;
	font-stretch: 75%;
	letter-spacing: -0.04em;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(-50%) rotate(-5deg) scale(0.3);
	text-shadow: 0.6vh 0.6vh 0 var(--surface);
}

/* On the same burst as the logo's "Clash". */
.tv-go-text::before {
	content: "";
	position: absolute;
	inset: -3vh -4vh;
	z-index: -1;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 110 110' preserveAspectRatio='none'%3E%3Cpolygon points='0,18 9,10 6,0 20,7 32,0 40,8 54,1 61,9 76,2 82,11 97,6 94,20 100,34 93,46 100,60 94,72 99,88 85,87 80,100 66,91 52,99 42,90 27,98 20,88 4,93 7,78 0,64 6,50 0,36' transform='translate%284 4%29' fill='%23000'/%3E%3Cpolygon points='0,18 9,10 6,0 20,7 32,0 40,8 54,1 61,9 76,2 82,11 97,6 94,20 100,34 93,46 100,60 94,72 99,88 85,87 80,100 66,91 52,99 42,90 27,98 20,88 4,93 7,78 0,64 6,50 0,36' fill='%23ffe066' stroke='%23000' stroke-width='3' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	animation: burst-pulse 0.9s ease-in-out infinite alternate;
}

.tv-app[data-go-step="go"] .tv-go-text {
	opacity: 1;
	transform: translateY(-50%) rotate(-5deg);
	transition: opacity 0.15s, transform 0.5s cubic-bezier(0.34, 1.8, 0.64, 1);
}

@keyframes burst-pulse {
	to {
		transform: rotate(4deg) scale(1.05);
	}
}

/* Before the first matchup: VOTING in prints, over spinning rays. */
.tv-vote-intro {
	position: relative;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 84vh;
}

.tv-vote-intro::before {
	content: "";
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: -1;
	width: 250vmax;
	height: 250vmax;
	background: repeating-conic-gradient(from 0deg, var(--yellow) 0 7.5deg, var(--bg) 7.5deg 15deg);
	-webkit-mask: radial-gradient(circle, #0000 4vh, #000 40vh);
	mask: radial-gradient(circle, #0000 4vh, #000 40vh);
	transform: translate(-50%, -50%);
	animation: rays 14s linear infinite, rays-in 0.6s ease-out both;
}

@keyframes rays {
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

@keyframes rays-in {
	from {
		opacity: 0;
	}
}

.tv-vote-tiles {
	display: flex;
	gap: 1.6vh;
	margin: 0;
	font-weight: 800;
	font-size: 24vh;
	line-height: 1;
}

.tv-vote-tile {
	display: inline-grid;
	place-items: center;
	width: 0.9em;
	padding: 0.06em 0 0.24em;
	border: 0.025em solid var(--ink);
	border-radius: 0.04em;
	background: linear-gradient(var(--tile), var(--tile)) 0.06em 0.06em / calc(100% - 0.12em) 72% no-repeat, var(--surface);
	box-shadow: 0.04em 0.04em 0 var(--ink);
	transform: rotate(var(--tilt));
	animation:
		tile-in 0.6s var(--ease-spring) both,
		tile-wiggle 0.9s ease-in-out infinite alternate,
		tile-out 0.45s ease-in forwards;
	animation-delay: calc(var(--i) * 110ms), calc(0.9s + var(--i) * 80ms), calc(3.2s + var(--i) * 40ms);
}

@keyframes tile-in {
	from {
		opacity: 0;
		transform: translateY(-80vh) rotate(calc(var(--tilt) * -5));
	}
}

@keyframes tile-wiggle {
	to {
		translate: 0 -1.5vh;
	}
}

@keyframes tile-out {
	to {
		opacity: 0;
		transform: translateY(-20vh) scale(1.8) rotate(calc(var(--tilt) * 4));
	}
}

/* ---------- The last ten seconds of writing ---------- */

.screen-writing {
	position: relative;
}

.tv-crunch {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: none;
	place-items: center;
	pointer-events: none;
}

.tv-app.is-crunch .tv-crunch {
	display: grid;
}

.tv-app.is-crunch .screen-writing .tv-big,
.tv-app.is-crunch .tv-writers {
	opacity: 0.35;
	transition: opacity 0.4s;
}

/* Players still writing get nervous. */
.tv-app.is-crunch .tv-writer:not(.is-done) {
	animation: nervous 0.18s linear infinite alternate;
}

@keyframes nervous {
	from {
		translate: -0.3vh 0;
	}
	to {
		translate: 0.3vh -0.2vh;
	}
}

/* A red glow pulsing in from the edges. */
.tv-app.is-crunch::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	box-shadow: inset 0 0 18vh #ff7a5980;
	animation: crunch-glow 1s ease-in-out infinite;
}

@keyframes crunch-glow {
	50% {
		box-shadow: inset 0 0 8vh #ff7a5933;
	}
}

.tv-crunch-burst {
	--burst: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0 58,16 74,6 74,24 93,22 85,39 100,50 85,61 93,78 74,76 74,94 58,84 50,100 42,84 26,94 26,76 7,78 15,61 0,50 15,39 7,22 26,24 26,6 42,16'/%3E%3C/svg%3E");
	position: absolute;
	width: 62vh;
	height: 62vh;
	filter: drop-shadow(1vh 1vh 0 var(--ink));
	animation: spin 12s linear infinite;
}

/* The burst, with an ink outline: a black one under a slightly smaller colored one. */
.tv-crunch-burst::before,
.tv-crunch-burst::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ink);
	-webkit-mask: var(--burst) center / contain no-repeat;
	mask: var(--burst) center / contain no-repeat;
}

.tv-crunch-burst::after {
	inset: 0.8vh;
	background: var(--yellow);
	transition: background-color 0.3s;
}

.tv-crunch.is-hot .tv-crunch-burst::after {
	background: var(--coral);
}

.tv-crunch.is-hot .tv-crunch-burst {
	animation-duration: 3s;
}

@keyframes spin {
	to {
		rotate: 360deg;
	}
}

.tv-crunch-ring {
	position: absolute;
	width: 44vh;
	height: 44vh;
	border: 1vh solid var(--ink);
	border-radius: 50%;
}

.tv-crunch-n {
	position: relative;
	font-weight: 800;
	font-size: 34vh;
	font-stretch: 75%;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--surface);
	-webkit-text-stroke: 0.6vh var(--ink);
	paint-order: stroke fill;
	text-shadow: 1.2vh 1.2vh 0 var(--ink);
	white-space: nowrap;
}

.tv-crunch.is-up .tv-crunch-n {
	font-size: 16vh;
}

@media (prefers-reduced-motion: reduce) {
	.tv-vote-intro::before,
	.tv-crunch-burst,
	.tv-rules-cam,
	.tv-go-text::before,
	.tv-vote-tile,
	.tv-app.is-crunch .tv-writer:not(.is-done),
	.tv-app.is-crunch::after {
		animation: none;
	}
}