/* Ice Rink UI. Values come straight from the mockup: the palette, the ink outlines, the hard
   offset shadows (0 Npx 0) that give everything its moulded-plastic look, and the Baloo 2 /
   Nunito pairing.

   Everything is sized off --u, one design pixel, which tracks the viewport -- so the 1920x1080
   mockup holds its proportions on a laptop instead of overflowing.

   This replaces the 2016 stylesheet wholesale. That file styled a menu/lobby screen whose
   markup was dropped years ago (.modal, .queue, .partyborder, .createbutton and friends); the
   stripped-down index.html referenced none of it. The old Arial Black @font-face went with it. */

:root {
	--ink:      #12232e;
	--ink-deep: #0a2230;
	--red:      #ee2b2b;
	--blue:     #0b7fc4;
	--yellow:   #f5d900;
	--panel:    #eef3f7;
	--field:    #f4f7fa;
	--edge:     #dde6ec;

	/* One design pixel. min() keeps it from growing past 1:1 on a large monitor, and the vh
	   term is sized off the TALLEST state the card ever reaches -- the open lobby, about 900
	   design px including the wordmark and the footer. At 0.165vh that state overflowed a
	   laptop viewport and clipped the wordmark off the top. */
	--u: min(1px, 0.093vw, 0.115vh);
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
	background: #6b7178;
	font-family: Nunito, system-ui, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}

canvas { display: block; }

/* Full-screen pointer-lock click target. Everything else layers above it. */
#top {
	position: absolute;
	inset: 0;
	z-index: 1;
}

[hidden] { display: none !important; }

/* ---------------------------------------------------------------- shared bits */

.flabel {
	font-weight: 900;
	font-size: calc(13 * var(--u));
	letter-spacing: .18em;
	color: rgba(18, 35, 46, .45);
	line-height: 1;
}
.flabel.ink { color: var(--ink); letter-spacing: .16em; font-size: calc(15 * var(--u)); }

.link {
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	font-weight: 800;
	font-size: calc(14 * var(--u));
	color: var(--blue);
}
.link.muted { color: rgba(18, 35, 46, .45); font-size: calc(15 * var(--u)); }
.link:hover { color: var(--red); }

/* The signature button: flat fill over a hard shadow, and it presses down into it. */
.big {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(18 * var(--u));
	width: 100%;
	padding: calc(26 * var(--u));
	border: 0;
	border-radius: calc(22 * var(--u));
	background: var(--red);
	box-shadow: 0 calc(9 * var(--u)) 0 var(--ink);
	cursor: pointer;
	font-family: inherit;
	transition: transform .06s, box-shadow .06s;
}
.big:hover { filter: brightness(1.05); }
.big:active {
	transform: translateY(calc(6 * var(--u)));
	box-shadow: 0 calc(3 * var(--u)) 0 var(--ink);
}
.big[disabled] { opacity: .45; cursor: not-allowed; }
.biglabel {
	font-family: "Baloo 2", Nunito, cursive;
	font-weight: 800;
	font-size: calc(46 * var(--u));
	line-height: 1;
	color: #fff;
}
.badge {
	padding: calc(7 * var(--u)) calc(14 * var(--u));
	border-radius: 999px;
	background: rgba(0, 0, 0, .25);
	font-weight: 900;
	font-size: calc(14 * var(--u));
	line-height: 1;
	color: #fff;
	white-space: nowrap;
}

.soft, .btn-blue {
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-weight: 800;
	line-height: 1;
}
.soft {
	flex: 1;
	padding: calc(16 * var(--u));
	border-radius: calc(16 * var(--u));
	background: var(--panel);
	font-size: calc(20 * var(--u));
	color: var(--ink);
}
.soft:hover { background: var(--edge); }
/* Named btn-blue, not blue: as plain ".blue" this collided with the scorebug's
   <div class="side blue"> and put an 8px radius on all four of its corners, which is why
   the blue half of the bug looked rounded where it should butt flush against the centre. */
.btn-blue {
	padding: 0 calc(22 * var(--u));
	border-radius: calc(16 * var(--u));
	background: var(--blue);
	color: #fff;
	font-size: calc(19 * var(--u));
	box-shadow: 0 calc(5 * var(--u)) 0 rgba(0, 0, 0, .22);
}
.btn-blue:hover { filter: brightness(1.08); }
.btn-blue:active {
	transform: translateY(calc(3 * var(--u)));
	box-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, .22);
}

/* ---------------------------------------------------------------- home screen */

#home {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
}
#home .scrim {
	position: absolute;
	inset: 0;
	background: rgba(6, 24, 35, .82);
}
.home-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(26 * var(--u));
	padding: calc(24 * var(--u));
}

.brand { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.puck {
	width: calc(28 * var(--u));
	height: calc(28 * var(--u));
	border-radius: 50%;
	background: #fff;
}
.wordmark {
	font-family: "Baloo 2", Nunito, cursive;
	font-weight: 800;
	font-size: calc(66 * var(--u));
	line-height: 1;
	color: #fff;
}
.wordmark span { color: var(--yellow); }

.online {
	padding: calc(7 * var(--u)) calc(16 * var(--u));
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	font-weight: 800;
	font-size: calc(15 * var(--u));
	line-height: 1;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .8);
}

.card {
	width: calc(900 * var(--u));
	max-width: 96vw;
	padding: calc(32 * var(--u));
	border-radius: calc(30 * var(--u));
	background: #fff;
	box-shadow: 0 calc(14 * var(--u)) 0 rgba(0, 0, 0, .3),
	            0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, .4);
	display: flex;
	flex-direction: column;
	gap: calc(24 * var(--u));
}

.card-top { display: flex; gap: calc(26 * var(--u)); }

.preview {
	width: calc(230 * var(--u));
	height: calc(268 * var(--u));
	flex: none;
	border-radius: calc(20 * var(--u));
	background: var(--panel);
	border: calc(4 * var(--u)) solid var(--edge);
	overflow: hidden;
}
.preview canvas { width: 100%; height: 100%; display: block; }

.fields { flex: 1; display: flex; flex-direction: column; gap: calc(16 * var(--u)); min-width: 0; }
.field { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }

.namebox {
	display: flex;
	align-items: center;
	gap: calc(12 * var(--u));
	padding: calc(14 * var(--u)) calc(18 * var(--u));
	border-radius: calc(14 * var(--u));
	background: var(--field);
	border: calc(4 * var(--u)) solid var(--ink);
}
.namebox input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	outline: none;
	font-family: inherit;
	font-weight: 800;
	font-size: calc(26 * var(--u));
	line-height: 1;
	color: var(--ink);
}

.swatches { display: flex; gap: calc(9 * var(--u)); flex-wrap: wrap; }
.swatch {
	width: calc(42 * var(--u));
	height: calc(42 * var(--u));
	border-radius: calc(13 * var(--u));
	border: calc(4 * var(--u)) solid transparent;
	cursor: pointer;
	padding: 0;
}
.swatch[aria-pressed="true"] { border-color: var(--ink); }

.lids { display: flex; gap: calc(9 * var(--u)); }
.lid {
	padding: calc(11 * var(--u)) calc(15 * var(--u));
	border: 0;
	border-radius: calc(12 * var(--u));
	background: var(--panel);
	font-family: inherit;
	font-weight: 800;
	font-size: calc(16 * var(--u));
	line-height: 1;
	color: var(--ink);
	cursor: pointer;
}
.lid[aria-pressed="true"] { background: var(--ink); color: #fff; }

#stateActions { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.two { display: flex; gap: calc(12 * var(--u)); }

/* ---------------------------------------------------------------- lobby state */

#stateLobby, #stateCode { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.rule { height: calc(4 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--panel); }
.lhead { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.grow { flex: 1; }
.hostbadge {
	padding: calc(5 * var(--u)) calc(11 * var(--u));
	border-radius: 999px;
	background: var(--yellow);
	font-weight: 900;
	font-size: calc(12 * var(--u));
	line-height: 1;
	color: var(--ink);
}

.coderow { display: flex; gap: calc(14 * var(--u)); align-items: stretch; }
.codebox {
	flex: 1;
	display: flex;
	align-items: center;
	gap: calc(14 * var(--u));
	padding: calc(14 * var(--u)) calc(18 * var(--u));
	border-radius: calc(16 * var(--u));
	background: var(--field);
	border: calc(3 * var(--u)) dashed rgba(18, 35, 46, .28);
}
.code, .codeinput {
	flex: 1;
	min-width: 0;
	font-family: "Baloo 2", Nunito, cursive;
	font-weight: 800;
	font-size: calc(34 * var(--u));
	line-height: 1;
	letter-spacing: .2em;
	color: var(--ink);
}
.codeinput {
	padding: calc(14 * var(--u)) calc(18 * var(--u));
	border-radius: calc(16 * var(--u));
	background: var(--field);
	border: calc(3 * var(--u)) dashed rgba(18, 35, 46, .28);
	outline: none;
	text-transform: uppercase;
}
.codeinput::placeholder { color: rgba(18, 35, 46, .25); }

.roster { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); }
.seat {
	flex: 1 1 calc(45%);
	display: flex;
	align-items: center;
	gap: calc(11 * var(--u));
	padding: calc(11 * var(--u)) calc(14 * var(--u));
	border-radius: calc(13 * var(--u));
	background: var(--field);
	min-width: 0;
}
.seat .dot {
	width: calc(24 * var(--u));
	height: calc(24 * var(--u));
	border-radius: 50%;
	flex: none;
}
.seat .who {
	flex: 1;
	font-weight: 800;
	font-size: calc(17 * var(--u));
	line-height: 1;
	color: var(--ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.seat .tag { font-weight: 800; font-size: calc(13 * var(--u)); color: rgba(18, 35, 46, .4); }
.seat .tag.you { color: var(--blue); }
.seat.empty {
	background: none;
	border: calc(3 * var(--u)) dashed rgba(18, 35, 46, .18);
	font-weight: 800;
	font-size: calc(16 * var(--u));
	color: rgba(18, 35, 46, .4);
	justify-content: center;
}

.waiting {
	text-align: center;
	font-weight: 800;
	font-size: calc(17 * var(--u));
	color: rgba(18, 35, 46, .45);
}

.err {
	padding: calc(12 * var(--u)) calc(16 * var(--u));
	border-radius: calc(12 * var(--u));
	background: rgba(238, 43, 43, .12);
	color: var(--red);
	font-weight: 800;
	font-size: calc(16 * var(--u));
	text-align: center;
}

.foot {
	display: flex;
	align-items: center;
	gap: calc(22 * var(--u));
	font-weight: 700;
	font-size: calc(16 * var(--u));
	color: rgba(255, 255, 255, .5);
}
.foot i {
	width: calc(5 * var(--u));
	height: calc(5 * var(--u));
	border-radius: 50%;
	background: rgba(255, 255, 255, .3);
}

/* ---------------------------------------------------------------- in-game HUD */

/* Nothing in the HUD may swallow a click: #top underneath is the pointer-lock target, and
   anything painted over it that takes clicks stops you entering the game at all. The one
   button you can actually press opts back in. */
#hud {
	position: absolute;
	inset: 0;
	z-index: 10;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

#scorebug {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: stretch;
	background: var(--ink-deep);
	border: calc(5 * var(--u)) solid #fff;
	border-top: 0;
	border-radius: 0 0 calc(22 * var(--u)) calc(22 * var(--u));
	box-shadow: 0 calc(10 * var(--u)) 0 rgba(0, 0, 0, .18),
	            0 calc(18 * var(--u)) calc(34 * var(--u)) rgba(0, 0, 0, .3);
	overflow: hidden;
}
#scorebug .side {
	border-radius: 0;
	box-shadow: none;
	display: flex;
	align-items: center;
	gap: calc(16 * var(--u));
	padding: calc(16 * var(--u)) calc(26 * var(--u)) calc(18 * var(--u));
}
#scorebug .red  { background: var(--red); }
#scorebug .blue { background: var(--blue); }
#scorebug .crest {
	width: calc(44 * var(--u));
	height: calc(44 * var(--u));
	border-radius: 50%;
	border: calc(4 * var(--u)) solid #fff;
	box-shadow: inset 0 calc(-3 * var(--u)) 0 rgba(0, 0, 0, .25);
}
#scorebug .red .crest  { background: var(--red); }
#scorebug .blue .crest { background: var(--blue); }
#scorebug .tname {
	font-weight: 800;
	font-size: calc(26 * var(--u));
	line-height: 1;
	letter-spacing: .06em;
	color: #fff;
}
#scorebug .tscore {
	min-width: calc(44 * var(--u));
	text-align: center;
	font-family: "Baloo 2", Nunito, cursive;
	font-weight: 800;
	font-size: calc(54 * var(--u));
	line-height: 1;
	color: #fff;
	text-shadow: 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, .25);
}
#scorebug .mid {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: calc(10 * var(--u)) calc(30 * var(--u)) calc(14 * var(--u));
	background: var(--ink-deep);
	min-width: calc(190 * var(--u));
}
.mlabel {
	font-weight: 800;
	font-size: calc(15 * var(--u));
	line-height: 1;
	letter-spacing: .18em;
	color: var(--yellow);
	white-space: nowrap;
}
.mclock {
	font-family: "Baloo 2", Nunito, cursive;
	font-weight: 800;
	font-size: calc(46 * var(--u));
	line-height: 1.05;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

#board {
	position: absolute;
	top: calc(30 * var(--u));
	right: calc(30 * var(--u));
	width: calc(300 * var(--u));
	display: flex;
	flex-direction: column;
	gap: calc(5 * var(--u));
}
/* A dark backing rather than the mockup's bare white text: the mockup sat over dark ice, but
   this rink has white boards and pale stands behind the rail, and white-on-white vanished. */
.bhead {
	display: flex;
	justify-content: space-between;
	align-self: flex-start;
	padding: calc(4 * var(--u)) calc(11 * var(--u)) calc(5 * var(--u));
	margin-bottom: calc(2 * var(--u));
	border-radius: 999px;
	background: rgba(10, 34, 48, .6);
	gap: calc(12 * var(--u));
	font-weight: 900;
	font-size: calc(13 * var(--u));
	letter-spacing: .16em;
	color: #fff;
	text-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .45);
}
.bhead span:last-child { opacity: .7; }
.brow {
	display: flex;
	align-items: center;
	gap: calc(10 * var(--u));
	padding: calc(9 * var(--u)) calc(12 * var(--u));
	border-radius: calc(11 * var(--u));
	background: rgba(255, 255, 255, .72);
}
.brow.lead { background: rgba(255, 255, 255, .94); }
.brow.me {
	background: #fff;
	border: calc(3 * var(--u)) solid var(--ink-deep);
	box-shadow: 0 calc(3 * var(--u)) 0 rgba(10, 34, 48, .35);
}
.brow .bar {
	width: calc(7 * var(--u));
	height: calc(26 * var(--u));
	border-radius: calc(4 * var(--u));
	flex: none;
}
.brow .who {
	flex: 1;
	font-weight: 800;
	font-size: calc(17 * var(--u));
	line-height: 1;
	color: var(--ink-deep);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.brow .num {
	font-family: "Baloo 2", Nunito, cursive;
	font-weight: 900;
	font-size: calc(18 * var(--u));
	line-height: 1;
	color: var(--ink-deep);
}
.brow.me .num { color: var(--red); }

#hudbtns {
	position: absolute;
	top: calc(30 * var(--u));
	left: calc(30 * var(--u));
	display: flex;
	gap: calc(12 * var(--u));
	pointer-events: auto;
}
#hudbtns button {
	width: calc(64 * var(--u));
	height: calc(64 * var(--u));
	border-radius: calc(18 * var(--u));
	background: rgba(10, 34, 48, .9);
	border: calc(4 * var(--u)) solid #fff;
	box-shadow: 0 calc(6 * var(--u)) 0 rgba(0, 0, 0, .2);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(6 * var(--u));
	cursor: pointer;
}
#hudbtns button:active {
	transform: translateY(calc(4 * var(--u)));
	box-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, .2);
}
#hudbtns .bar {
	width: calc(8 * var(--u));
	height: calc(26 * var(--u));
	border-radius: calc(3 * var(--u));
	background: #fff;
}

/* Directly beneath the scorebug. The bug is 5px-bordered and ~86 design px tall, so 96 sits
   it just clear of the bottom edge. */
#toast {
	position: absolute;
	top: calc(96 * var(--u));
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: calc(14 * var(--u));
	padding: calc(14 * var(--u)) calc(28 * var(--u));
	background: var(--red);
	border: calc(5 * var(--u)) solid #fff;
	border-radius: 999px;
	box-shadow: 0 calc(8 * var(--u)) 0 rgba(0, 0, 0, .22);
	font-family: "Baloo 2", Nunito, cursive;
	font-weight: 800;
	font-size: calc(26 * var(--u));
	line-height: 1;
	letter-spacing: .04em;
	color: #fff;
	white-space: nowrap;
}
#toast .puck {
	width: calc(26 * var(--u));
	height: calc(26 * var(--u));
	background: var(--ink-deep);
	border: calc(3 * var(--u)) solid #fff;
}

#bigCount {
	position: absolute;
	top: 44%;
	left: 0;
	width: 100%;
	text-align: center;
	font-family: "Baloo 2", Nunito, cursive;
	font-weight: 800;
	font-size: calc(240 * var(--u));
	line-height: 1;
	color: #fff;
	text-shadow: 0 calc(8 * var(--u)) 0 rgba(10, 34, 48, .45),
	             0 calc(14 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, .5);
	transform: translateY(-50%);
	pointer-events: none;
}

#keys {
	position: absolute;
	bottom: calc(36 * var(--u));
	left: calc(36 * var(--u));
	display: flex;
	flex-direction: column;
	gap: calc(8 * var(--u));
}
/* Same reason: these sit directly on white ice for most of the rink. */
#keys div {
	display: flex;
	align-items: center;
	align-self: flex-start;
	gap: calc(10 * var(--u));
	padding: calc(5 * var(--u)) calc(13 * var(--u)) calc(5 * var(--u)) calc(6 * var(--u));
	border-radius: 999px;
	background: rgba(10, 34, 48, .55);
	font-weight: 800;
	font-size: calc(15 * var(--u));
	color: #fff;
}
.key {
	padding: calc(5 * var(--u)) calc(9 * var(--u));
	border-radius: calc(7 * var(--u));
	background: rgba(255, 255, 255, .9);
	color: var(--ink-deep);
}

/* Name tags float over the canvas, positioned per frame from app.js. */
#tags {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	overflow: hidden;
}
.tag3d {
	position: absolute;
	top: 0;
	left: 0;
	will-change: transform;
	transform: translate(-50%, -100%);
	font-weight: 800;
	font-size: calc(15 * var(--u));
	line-height: 1;
	color: #fff;
	text-shadow: 0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .75);
	white-space: nowrap;
}

/* On a phone the card is the whole screen and the rink is only backdrop. */
@media (max-width: 760px) {
	:root { --u: min(1px, 0.26vw); }
	.card-top { flex-direction: column; align-items: center; }
	.preview { width: calc(200 * var(--u)); height: calc(200 * var(--u)); }
	.two { flex-direction: column; }
	#board { display: none; }
	#keys { display: none; }
}