:root {
	--ink: #1d1b19;
	--cream: #f6f1e6;
	--paper: #fffdf9;
	--line: #e4dccd;
	--muted: #77716a;
	--gray: #aaa49c;
	--red: #c5050c;
	--blue: #5f97d6;
	--green: #5fa36a;
	--gold: #e8a923;
	--display: 'Baloo 2', ui-rounded, system-ui, sans-serif;
	--body: 'Figtree', system-ui, sans-serif;
	color-scheme: light;
}

* {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
	min-height: 100%;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--body);
	-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
.display {
	font-family: var(--display);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.05;
	margin: 0;
}
button,
input,
textarea {
	font: inherit;
	color: inherit;
}
button {
	cursor: pointer;
}
[hidden] {
	display: none !important;
}

.btn {
	border: 3px solid var(--ink);
	background: var(--ink);
	color: var(--paper);
	border-radius: 999px;
	padding: 12px 24px;
	font-family: var(--display);
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	transition: transform 0.08s;
}
.btn:active {
	transform: translateY(2px);
}
.btn.ghost {
	background: transparent;
	color: var(--ink);
}
.btn:disabled {
	opacity: 0.35;
	cursor: default;
}
.pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 2px solid var(--ink);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 14px;
	font-weight: 700;
	background: var(--paper);
}

/* ---- characters */

.char {
	display: block;
	overflow: visible;
}
.char .c-all {
	transform-origin: 100px 190px;
}
.char .c-happy,
.char.happy .c-rest {
	display: none;
}
.char.happy .c-happy {
	display: inline;
}
.char .c-foot {
	transform-box: fill-box;
	transform-origin: center;
}

.char.idle .c-all {
	animation: idle 2.6s ease-in-out infinite;
}
@keyframes idle {
	50% {
		transform: translateY(-5px) scale(0.99, 1.02);
	}
}

/* the floss: arms swing together, hips the other way */
.dance-0 .c-all {
	animation: floss-body 0.42s ease-in-out infinite alternate;
}
.dance-0 .c-arm {
	animation: floss-arms 0.42s ease-in-out infinite alternate;
}
@keyframes floss-body {
	from {
		transform: translateX(-12px) rotate(-5deg);
	}
	to {
		transform: translateX(12px) rotate(5deg);
	}
}
@keyframes floss-arms {
	from {
		transform: rotate(-55deg);
	}
	to {
		transform: rotate(55deg);
	}
}

/* the default: alternate arm pumps, bouncing */
.dance-1 .c-all {
	animation: bob 0.3s ease-in-out infinite alternate;
}
.dance-1 .c-arm-l {
	animation: pump-l 0.6s ease-in-out infinite;
}
.dance-1 .c-arm-r {
	animation: pump-r 0.6s ease-in-out infinite;
}
.dance-1 .c-foot-l,
.dance-5 .c-foot-l {
	animation: step 0.3s ease-in-out infinite alternate;
}
.dance-1 .c-foot-r,
.dance-5 .c-foot-r {
	animation: step 0.3s ease-in-out infinite alternate-reverse;
}
@keyframes bob {
	to {
		transform: translateY(-12px);
	}
}
@keyframes pump-l {
	50% {
		transform: rotate(140deg);
	}
}
@keyframes pump-r {
	0%,
	100% {
		transform: rotate(-140deg);
	}
	50% {
		transform: none;
	}
}
@keyframes step {
	to {
		transform: translateY(-8px);
	}
}

/* the dab, both ways */
.dance-2 .c-all {
	animation: dab-body 1.3s infinite;
}
.dance-2 .c-arm-l {
	animation: dab-l 1.3s infinite;
}
.dance-2 .c-arm-r {
	animation: dab-r 1.3s infinite;
}
@keyframes dab-body {
	0%,
	8%,
	50%,
	58% {
		transform: none;
	}
	14%,
	44% {
		transform: translateX(-10px) rotate(-14deg);
	}
	64%,
	94% {
		transform: translateX(10px) rotate(14deg);
	}
}
@keyframes dab-l {
	0%,
	8%,
	50%,
	58% {
		transform: none;
	}
	14%,
	44% {
		transform: rotate(105deg);
	}
	64%,
	94% {
		transform: rotate(-40deg);
	}
}
@keyframes dab-r {
	0%,
	8%,
	50%,
	58% {
		transform: none;
	}
	14%,
	44% {
		transform: rotate(40deg);
	}
	64%,
	94% {
		transform: rotate(-105deg);
	}
}

/* the jiggle */
.dance-3 .c-all {
	animation: jiggle 0.16s ease-in-out infinite alternate;
}
.dance-3 .c-arm-l {
	animation: flap-l 0.16s ease-in-out infinite alternate;
}
.dance-3 .c-arm-r {
	animation: flap-r 0.16s ease-in-out infinite alternate;
}
@keyframes jiggle {
	from {
		transform: rotate(-8deg) scale(1.04, 0.96);
	}
	to {
		transform: rotate(8deg) scale(0.96, 1.04);
	}
}
@keyframes flap-l {
	from {
		transform: rotate(20deg);
	}
	to {
		transform: rotate(90deg);
	}
}
@keyframes flap-r {
	from {
		transform: rotate(-20deg);
	}
	to {
		transform: rotate(-90deg);
	}
}

/* the helicopter: arms out, jump, spin */
.dance-4 .c-all {
	transform-origin: 100px 115px;
	animation: heli 1.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.dance-4 .c-arm-l {
	transform: rotate(70deg);
}
.dance-4 .c-arm-r {
	transform: rotate(-70deg);
}
@keyframes heli {
	0%,
	100% {
		transform: none;
	}
	20% {
		transform: translateY(-34px);
	}
	70% {
		transform: translateY(-34px) rotate(360deg);
	}
	85% {
		transform: rotate(360deg) scale(1.08, 0.9);
	}
}

/* the boogie: squash and stretch, disco point */
.dance-5 .c-all {
	animation: boogie 0.6s ease-in-out infinite;
}
.dance-5 .c-arm-l {
	animation: disco-l 0.6s ease-in-out infinite;
}
.dance-5 .c-arm-r {
	animation: disco-r 1.2s ease-in-out infinite;
}
@keyframes boogie {
	0%,
	100% {
		transform: scale(1.08, 0.9);
	}
	50% {
		transform: translateY(-10px) scale(0.95, 1.08);
	}
}
@keyframes disco-l {
	50% {
		transform: rotate(60deg);
	}
}
@keyframes disco-r {
	0%,
	100% {
		transform: rotate(-150deg);
	}
	50% {
		transform: rotate(-35deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.char *,
	.char {
		animation-duration: 2s !important;
	}
}

/* ---- shared bits */

.eyebrow {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}
.lede {
	margin: 0;
	font-size: 18px;
	line-height: 1.45;
	color: var(--muted);
}
.hint {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--muted);
}
.field {
	width: 100%;
	border: 3px solid var(--ink);
	border-radius: 18px;
	padding: 14px 16px;
	font-size: 20px;
	background: var(--paper);
	outline: none;
}
.field:focus {
	box-shadow: 0 0 0 4px rgb(95 151 214 / 0.35);
}
.meter {
	height: 10px;
	border-radius: 999px;
	background: var(--line);
	overflow: hidden;
}
.meter i {
	display: block;
	height: 100%;
	background: var(--ink);
	border-radius: inherit;
}
.duo {
	display: flex;
	justify-content: center;
}
.duo .char {
	width: 96px;
}
.c0 {
	background: var(--red);
	color: #fff;
}
.c1 {
	background: var(--blue);
	color: #fff;
}
.c2 {
	background: var(--gold);
	color: var(--ink);
}
.c3 {
	background: var(--green);
	color: #fff;
}
.toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 50;
	background: var(--ink);
	color: var(--paper);
	padding: 12px 20px;
	border-radius: 999px;
	font-weight: 600;
	max-width: calc(100vw - 32px);
	animation: rise 0.2s ease-out;
}
@keyframes rise {
	from {
		transform: translate(-50%, 12px);
		opacity: 0;
	}
}
.confetti {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 40;
}
body.offline::after {
	content: 'Reconnecting…';
	position: fixed;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--red);
	color: #fff;
	padding: 6px 14px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
	z-index: 60;
}

/* ---- phone */

.phone main {
	max-width: 480px;
	margin: 0 auto;
	min-height: 100dvh;
	padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.phone h1 {
	font-size: 34px;
}
.bar {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--paper);
	border-radius: 999px;
	padding: 4px 18px 4px 4px;
}
.bar .char {
	width: 46px;
	height: 46px;
}
.bar b {
	font-family: var(--display);
	font-size: 24px;
}
.bar span {
	margin-left: auto;
	font-weight: 700;
}
.center {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 12px;
}
.char.hero {
	width: min(56vw, 220px);
}
.team {
	font-size: 56px !important;
}
.join {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 8px;
}
.names {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 6px;
}
.picked {
	margin: 0;
	font-weight: 700;
	font-size: 18px;
}
.name {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 2px solid var(--line);
	background: var(--paper);
	color: var(--ink);
	border-radius: 14px;
	padding: 12px 16px;
	font: 600 18px var(--body);
	text-align: left;
}
.name[hidden] {
	display: none;
}
.name.on {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper);
}
.name:disabled {
	color: var(--gray);
}
.name small {
	font-size: 13px;
}
.join .btn,
.answer .btn {
	padding: 16px;
	font-size: 22px;
}
.prompt {
	font-size: 28px;
}
.timer {
	position: relative;
	height: 12px;
	border-radius: 999px;
	background: var(--line);
	overflow: hidden;
}
.timer i {
	display: block;
	height: 100%;
	width: calc(var(--left, 1) * 100%);
	background: var(--ink);
	border-radius: inherit;
}
.timer .ready {
	display: none;
}
.timer.waiting {
	height: auto;
	overflow: visible;
	background: none;
}
.timer.waiting i {
	display: none;
}
.timer.waiting .ready {
	display: block;
	font-weight: 700;
	color: var(--muted);
}
.answering {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.timer.waiting ~ .answering {
	opacity: 0.4;
	pointer-events: none;
}
.timesup {
	display: none;
	text-align: center;
	font-family: var(--display);
	font-size: 28px;
	margin: 0;
}
.timer.over ~ .answering {
	display: none;
}
.timer.over ~ .timesup {
	display: block;
}
.answer {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.answer textarea {
	resize: none;
}
.num {
	display: flex;
	align-items: center;
	gap: 10px;
}
.num .unit {
	font-weight: 700;
	font-size: 20px;
}
.scales {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}
.scales button {
	border: 2px solid var(--ink);
	background: var(--paper);
	color: var(--ink);
	border-radius: 999px;
	padding: 10px 0;
	font: 700 15px var(--body);
}
.scales button.on {
	background: var(--ink);
	color: var(--paper);
}
.answer.sending {
	opacity: 0.5;
	pointer-events: none;
}
.choices {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.choice {
	min-height: 104px;
	border: 3px solid var(--ink);
	border-radius: 20px;
	padding: 12px 14px;
	text-align: left;
	font-size: 18px;
	font-weight: 700;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.choice span {
	font-family: var(--display);
	font-size: 24px;
	line-height: 1;
}
.choice.picked {
	outline: 4px solid var(--ink);
	outline-offset: 3px;
}
.locked,
.callout,
.card {
	background: var(--paper);
	border-radius: 24px;
	padding: 20px;
	text-align: center;
	margin: 0;
}
.callout {
	font-size: 20px;
	font-weight: 600;
}
.locked p,
.card p {
	margin: 4px 0;
}
.value {
	font-family: var(--display);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
	overflow-wrap: anywhere;
}
.value.ref {
	font-size: 19px;
}
.card .meter {
	margin: 12px 0 8px;
}
.big-points {
	font-family: var(--display);
	font-weight: 800;
	font-size: 44px;
	line-height: 1;
	margin-top: 12px !important;
}
.small {
	text-align: center;
	font-size: 16px;
}
.standing {
	text-align: center;
	font-family: var(--display);
	font-size: 30px;
	font-weight: 800;
	margin: 0;
}

/* ---- main screen (projected) */

.main {
	--pad: clamp(20px, 3vw, 56px);
	height: 100vh;
	overflow: hidden;
}
.main #screen {
	height: 100vh;
	padding: var(--pad) var(--pad) calc(var(--pad) + 64px);
}
.main #screen > section {
	height: 100%;
}
.main h1 {
	font-size: clamp(32px, 4vw, 72px);
}
.controls {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 8px;
}
.controls #actions {
	display: flex;
	gap: 8px;
}
.controls .btn {
	font-size: 18px;
	padding: 10px 20px;
}
.btn.icon {
	width: 44px;
	height: 44px;
	padding: 0 !important;
	font-size: 20px;
}
.judge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--muted);
	margin-right: 4px;
}
.judge i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--gray);
}
.judge i.on {
	background: var(--green);
}

.keygate {
	position: fixed;
	inset: 0;
	z-index: 70;
	background: var(--cream);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 24px;
}
.keygate > * {
	width: min(100%, 420px);
	text-align: center;
}
.keygate a.btn {
	display: block;
	text-decoration: none;
}

.lobby {
	display: flex;
	flex-direction: column;
	gap: var(--pad);
}
.join-card {
	background: var(--paper);
	border-radius: 36px;
	padding: clamp(16px, 3vh, 40px) var(--pad);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}
.join-card .eyebrow {
	font-size: clamp(14px, 1.4vw, 24px);
}
.url {
	font-size: clamp(40px, 6.5vw, 128px) !important;
	overflow-wrap: anywhere;
}
.waiting {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	color: var(--muted);
}
.waiting .char {
	width: clamp(80px, 10vw, 160px);
}
@keyframes pop {
	from {
		transform: scale(0.6);
		opacity: 0;
	}
}

.gcards {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
	gap: 16px;
}
.gcard {
	container-type: size;
	background: var(--paper);
	border-radius: 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	animation: pop 0.4s ease-out backwards;
}
.gcard {
	position: relative;
}
.gcard .kick {
	position: absolute;
	top: 8px;
	right: 12px;
	border: 0;
	background: none;
	color: var(--muted);
	font-size: 26px;
	opacity: 0;
}
.gcard:hover .kick {
	opacity: 1;
}
.gcard .char {
	height: min(48cqh, 70cqw);
}
.gcard h2 {
	font-size: clamp(20px, min(14cqh, 16cqw), 72px);
}
.gcard p {
	margin: 0 12px;
	color: var(--muted);
	font-weight: 600;
	font-size: clamp(13px, min(8.5cqh, 6.5cqw), 30px);
}

.ask {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 3vh, 40px);
}
.ask-head {
	display: flex;
	align-items: center;
	gap: 10px;
}
.ask-head .pill {
	font-size: clamp(14px, 1.2vw, 20px);
	padding: 6px 16px;
}
.clock {
	margin-left: auto;
	position: relative;
	width: clamp(80px, 9vw, 150px);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
}
.clock svg {
	position: absolute;
	inset: 0;
	transform: rotate(-90deg);
}
.clock circle {
	fill: var(--paper);
	stroke: var(--line);
	stroke-width: 9;
}
.clock .arc {
	fill: none;
	stroke: var(--ink);
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: calc(100 - var(--left, 1) * 100);
}
.clock b {
	position: relative;
	font-family: var(--display);
	font-size: clamp(32px, 3.6vw, 64px);
}
.clock.waiting .arc {
	stroke: var(--gold);
}
.clock.over .arc {
	stroke: var(--red);
}
.prompt-xl {
	font-size: clamp(36px, 4.6vw, 92px) !important;
	max-width: 22ch;
	text-wrap: balance;
}
.sub {
	margin: 0;
	font-size: clamp(18px, 1.6vw, 30px);
	color: var(--muted);
	font-weight: 600;
}
.tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.tile {
	border: 4px solid var(--ink);
	border-radius: 28px;
	padding: clamp(16px, 2vh, 28px) 28px;
	font-size: clamp(22px, 2.2vw, 42px);
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 20px;
}
.tile span {
	font-family: var(--display);
	font-size: 1.3em;
}
.answered {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.answered p {
	margin: 0;
	font-weight: 700;
	color: var(--muted);
	font-size: clamp(16px, 1.3vw, 24px);
}
.faces {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
}
.face {
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 0.35;
	filter: grayscale(1);
	transition:
		opacity 0.2s,
		filter 0.2s;
}
.face .char {
	width: clamp(44px, 4.6vw, 80px);
}
.face span {
	font-size: 13px;
	font-weight: 700;
}
.face.in {
	opacity: 1;
	filter: none;
	animation: hop 0.4s ease-out;
}
@keyframes hop {
	40% {
		transform: translateY(-14px);
	}
}
.awards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(clamp(250px, 21vw, 340px), 1fr));
	gap: 12px;
}
.award {
	background: var(--paper);
	border-radius: 22px;
	padding: 12px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 4px 10px;
}
.award .char {
	width: 64px;
	grid-row: span 2;
}
.award b {
	font-family: var(--display);
	font-size: 22px;
}
.award .pts {
	font-family: var(--display);
	font-weight: 800;
	font-size: 22px;
}
.steps {
	grid-column: 2 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.awards .steps button {
	font-size: 15px;
	padding: 4px 11px;
}
.steps button,
.fix button {
	border: 2px solid var(--ink);
	background: var(--paper);
	border-radius: 999px;
	padding: 3px 8px;
	font-size: 13px;
	font-weight: 700;
}

.reveal {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: var(--pad);
}
.stage {
	background: var(--paper);
	border-radius: 36px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--pad);
	gap: 8px;
}
.dancers {
	display: flex;
	justify-content: center;
	width: 100%;
}
.dancers .char {
	width: min(100%, 52vh);
}
.dancers.n2 .char {
	width: min(50%, 34vh);
}
.dancers.n3 .char {
	width: min(33%, 26vh);
}
.stage h1 {
	text-wrap: balance;
}
.emote {
	margin: 0;
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(20px, 2vw, 36px);
	color: var(--red);
}
.results {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 0;
}
.answer {
	font-size: clamp(28px, 3vw, 56px);
	margin-bottom: 12px;
}
.rows {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	overflow: auto;
	min-height: 0;
}
.rows li {
	position: relative;
	display: grid;
	grid-template-columns: clamp(40px, 3.4vw, 60px) minmax(0, 1fr) clamp(120px, 12vw, 220px) 5ch;
	align-items: center;
	gap: 14px;
	background: var(--paper);
	border-radius: 18px;
	padding: 6px 18px 6px 8px;
	animation: pop 0.35s ease-out backwards;
}
.rows li:nth-child(2) {
	animation-delay: 0.05s;
}
.rows li:nth-child(3) {
	animation-delay: 0.1s;
}
.rows li:nth-child(n + 4) {
	animation-delay: 0.15s;
}
.rows li.win {
	box-shadow: inset 0 0 0 3px var(--ink);
}
.who {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.who b {
	font-family: var(--display);
	font-size: clamp(18px, 1.5vw, 28px);
	line-height: 1.1;
}
.said {
	font-weight: 600;
	font-size: clamp(14px, 1.15vw, 22px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.said.none,
.why {
	color: var(--muted);
}
.why {
	font-size: clamp(12px, 0.95vw, 17px);
}
.acc {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
}
.acc .meter {
	flex: 1;
}
.pts {
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(20px, 1.8vw, 32px);
	text-align: right;
}
.fix {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: none;
	gap: 4px;
	background: var(--paper);
	padding: 4px;
	border-radius: 999px;
}
.rows li:hover .fix {
	display: flex;
}

.board {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.ranks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
	min-height: 0;
	overflow: hidden;
	grid-auto-rows: min-content;
}
.ranks.two {
	grid-template-columns: 1fr 1fr;
	column-gap: 24px;
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--rows, 10), min-content);
}
.ranks li {
	display: grid;
	grid-template-columns: 2.2ch clamp(40px, 4vw, 72px) minmax(0, 1fr) minmax(0, 1fr) 6ch;
	align-items: center;
	gap: 14px;
	background: var(--paper);
	border-radius: 20px;
	padding: 6px 18px;
}
.place {
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(20px, 2vw, 36px);
}
.ranks .who span {
	color: var(--muted);
	font-size: clamp(12px, 0.95vw, 17px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.track {
	height: 14px;
	border-radius: 999px;
	background: var(--line);
	overflow: hidden;
}
.track i {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--ink);
	animation: grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
	transform-origin: left;
}
.ranks li:first-child .track i {
	background: var(--red);
}
@keyframes grow {
	from {
		transform: scaleX(0);
	}
}
.score {
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(20px, 2vw, 34px);
	text-align: right;
}

.final {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.podium {
	flex: 1;
	min-height: 0;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: end;
	gap: var(--pad);
}
.spot {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.spot .char {
	width: min(100%, 30vh);
}
.p1 .char {
	width: min(100%, 38vh);
}
.block {
	width: 100%;
	background: var(--paper);
	border-radius: 28px 28px 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 16px;
	gap: 2px;
}
.p1 .block {
	min-height: 26vh;
	background: var(--ink);
	color: var(--paper);
}
.p2 .block {
	min-height: 18vh;
}
.p3 .block {
	min-height: 12vh;
}
.block .place {
	font-size: clamp(36px, 4vw, 72px);
	line-height: 1;
}
.block b {
	font-family: var(--display);
	font-size: clamp(24px, 2.4vw, 44px);
}
.block small {
	opacity: 0.7;
}
.rest {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding: 0 0 0 1.5em;
	font-size: clamp(14px, 1.2vw, 22px);
	justify-content: center;
}

.settings {
	width: min(720px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	border: 0;
	border-radius: 28px;
	padding: 24px;
	background: var(--paper);
	color: var(--ink);
}
.settings::backdrop {
	background: rgb(29 27 25 / 0.4);
}
.settings-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}
.settings section {
	padding: 16px 0;
	border-top: 2px solid var(--line);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.settings h3 {
	font-size: 22px;
}
.settings p {
	margin: 0;
}
.settings .row {
	display: flex;
	gap: 8px;
	align-items: center;
}
.settings .field {
	font-size: 16px;
	padding: 10px 14px;
	border-radius: 14px;
}
.settings .btn {
	font-size: 16px;
	padding: 10px 18px;
	white-space: nowrap;
}
.field.code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px !important;
	line-height: 1.45;
}
.btn.danger {
	border-color: var(--red);
	color: var(--red);
}
code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
	background: var(--cream);
	padding: 1px 5px;
	border-radius: 6px;
}