/* #region style sheet module */
/* - The look of Henry's Birthday Cup: a full-window pitch, with panels, a scoreboard, and touch controls floating over it.
   - Panels are dark glass with Liverpool red buttons and gold headings, like the birthday animation. */
/* #endregion */




/* #region The page */
html, body
{
	margin: 0;
	height: 100%;
	overflow: hidden;
	background: #2a7f37;
	color: #fff;
	font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
}

#pitch
{
	display: block;
	position: fixed;
	inset: 0;
}

[hidden]
{
	display: none !important;
}
/* #endregion */


/* #region Panels and buttons */
.panel
{
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(92vw, 420px);
	max-height: 92vh;
	overflow-y: auto;
	box-sizing: border-box;
	padding: 22px 22px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: rgba(12, 20, 14, 0.82);
	border: 2px solid rgba(246, 210, 90, 0.55);
	border-radius: 18px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(6px);
	text-align: center;
	user-select: text;
	-webkit-user-select: text;
}

.panel h1, .panel h2
{
	margin: 0;
	color: #f6d25a;
	font-family: Georgia, "Times New Roman", serif;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.panel h1
{
	font-size: clamp(26px, 7vw, 34px);
}

.tagline, .note
{
	margin: 0;
	opacity: 0.85;
}

.note:empty
{
	display: none;
}

button
{
	border: 2px solid #fff;
	border-radius: 999px;
	background: #c8102e;
	color: #fff;
	font: inherit;
	font-weight: 700;
	padding: 10px 18px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

button:active
{
	transform: scale(0.97);
}

button:disabled
{
	opacity: 0.45;
	cursor: default;
}

button.big
{
	font-size: 19px;
	padding: 13px 20px;
}

button.secondary
{
	background: rgba(255, 255, 255, 0.12);
}

button.quiet
{
	background: transparent;
	border-color: rgba(255, 255, 255, 0.4);
	box-shadow: none;
	font-weight: 600;
}

input
{
	font: inherit;
	padding: 10px 12px;
	border-radius: 10px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.92);
	color: #111;
	user-select: text;
	-webkit-user-select: text;
}

.field
{
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: left;
	font-weight: 600;
}

.joinRow
{
	display: flex;
	gap: 8px;
}

.joinRow input
{
	width: 6.5em;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	text-align: center;
	font-weight: 700;
}

.joinRow button
{
	flex: 1;
}

.backLink
{
	color: #f6d25a;
	font-size: 14px;
}
/* #endregion */


/* #region The lobby */
/* The invite: the room code with its buttons, and below them a QR code that friends in the same room can scan. */
#inviteRow
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.inviteLine
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 18px;
}

#inviteQr
{
	width: 132px;
	height: 132px;
	padding: 4px;
	border-radius: 10px;
	background: #ffffff;
}

#roomCode
{
	letter-spacing: 0.18em;
	color: #f6d25a;
	font-size: 24px;
}

#teams
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	text-align: left;
}

.team
{
	background: rgba(255, 255, 255, 0.07);
	border-radius: 12px;
	padding: 8px 10px;
}

.team h3
{
	margin: 0 0 4px;
	font-size: 16px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.team ol
{
	margin: 0;
	padding-left: 20px;
	font-size: 14px;
	line-height: 1.5;
}

.team li.bot
{
	opacity: 0.55;
}

.team li.me
{
	color: #f6d25a;
	font-weight: 700;
}

.chip
{
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid #fff;
	flex: none;
}

.controlsHelp
{
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	opacity: 0.85;
}

#settings
{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.setting
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-weight: 600;
}

.choices
{
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.choices button
{
	padding: 6px 12px;
	font-size: 14px;
	background: rgba(255, 255, 255, 0.1);
	box-shadow: none;
}

.choices button.chosen
{
	background: #c8102e;
}
/* #endregion */


/* #region The match */
#scoreboard
{
	position: fixed;
	top: max(8px, env(safe-area-inset-top));
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 16px;
	background: rgba(12, 20, 14, 0.8);
	border-radius: 999px;
	font-weight: 700;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

#scoreboard .teamName
{
	display: flex;
	align-items: center;
	gap: 6px;
}

#score
{
	font-size: 20px;
	color: #f6d25a;
}

/* On a narrow screen the scoreboard shows team colors without names, leaving room for the music button beside it. */
@media (max-width: 480px)
{
	#scoreboard .teamName span
	{
		display: none;
	}
}

#clock
{
	font-variant-numeric: tabular-nums;
	opacity: 0.9;
	padding-left: 6px;
	border-left: 1px solid rgba(255, 255, 255, 0.3);
}

#goalBanner
{
	position: fixed;
	left: 50%;
	top: 38%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	pointer-events: none;
	animation: goalPop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1);
}

#goalBanner strong
{
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(54px, 14vw, 120px);
	color: #f6d25a;
	-webkit-text-stroke: 2px #3b2200;
	text-shadow: 0 6px 18px rgba(0, 0, 0, 0.7);
}

#goalScorer
{
	font-size: clamp(18px, 4vw, 28px);
	font-weight: 700;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

@keyframes goalPop
{
	from {transform: translate(-50%, -50%) scale(0.3); opacity: 0;}
	to {transform: translate(-50%, -50%) scale(1); opacity: 1;}
}

#countdown
{
	position: fixed;
	left: 50%;
	top: 42%;
	transform: translate(-50%, -50%);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(70px, 18vw, 150px);
	font-weight: 700;
	color: #f6d25a;
	-webkit-text-stroke: 2px #3b2200;
	text-shadow: 0 6px 18px rgba(0, 0, 0, 0.7);
	pointer-events: none;
	animation: countdownPop 0.9s ease-out;
}

@keyframes countdownPop
{
	from {transform: translate(-50%, -50%) scale(1.8); opacity: 0;}
	30% {transform: translate(-50%, -50%) scale(1); opacity: 1;}
	to {transform: translate(-50%, -50%) scale(0.9); opacity: 0.85;}
}

#statsTable
{
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

#statsTable td
{
	padding: 4px 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#statsTable td:first-child, #statsTable td:last-child
{
	width: 28%;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

#statsTable td:nth-child(2)
{
	opacity: 0.8;
}

.finalScore
{
	margin: 0;
	font-size: 30px;
	font-weight: 800;
}

#scorerList
{
	list-style: none;
	margin: 0;
	padding: 0;
	opacity: 0.9;
	line-height: 1.6;
}

#connectionNote
{
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	background: rgba(12, 20, 14, 0.9);
	border-radius: 14px;
	font-weight: 700;
	text-align: center;
}
/* - The stamina bar sits just under the scoreboard: gold when full, red when low, and flashing while winded. */
#staminaBar
{
	position: fixed;
	top: calc(max(8px, env(safe-area-inset-top)) + 46px);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	background: rgba(12, 20, 14, 0.7);
	border-radius: 999px;
	pointer-events: none;
}

.staminaIcon
{
	font-size: 14px;
}

.staminaTrack
{
	width: min(42vw, 180px);
	height: 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	overflow: hidden;
}

#staminaFill
{
	display: block;
	height: 100%;
	width: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #f6d25a, #fff3b0);
	box-shadow: 0 0 8px rgba(246, 210, 90, 0.8);
	transform-origin: left center;
}

#staminaBar.low #staminaFill
{
	background: linear-gradient(90deg, #c8102e, #ff7a59);
	box-shadow: 0 0 8px rgba(255, 90, 60, 0.8);
}

#staminaBar.winded
{
	animation: windedFlash 0.5s ease-in-out infinite alternate;
}

#staminaBar.sprinting .staminaIcon
{
	animation: sprintJolt 0.25s ease-in-out infinite alternate;
}

@keyframes windedFlash
{
	from {opacity: 1;}
	to {opacity: 0.45;}
}

@keyframes sprintJolt
{
	from {transform: scale(1) rotate(-8deg);}
	to {transform: scale(1.3) rotate(8deg);}
}
/* #endregion */


/* #region The pause menu */
#pauseButton
{
	position: fixed;
	right: max(12px, env(safe-area-inset-right));
	top: max(10px, env(safe-area-inset-top));
	width: 42px;
	height: 42px;
	padding: 0;
	font-size: 18px;
}

.pauseChoices
{
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#controlsTable
{
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	font-size: 14px;
	margin-bottom: 10px;
}

#controlsTable th, #controlsTable td
{
	padding: 6px 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	vertical-align: top;
}

#controlsTable th
{
	color: #f6d25a;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

#controlsTable td:first-child
{
	font-weight: 700;
	white-space: nowrap;
}

#controlsTable .thisDevice
{
	color: #ffffff;
}

#controlsTable .otherDevice
{
	opacity: 0.6;
}
/* #endregion */


/* #region Touch controls */
#touchControls
{
	position: fixed;
	inset: 0;
	touch-action: none;
}

#stickBase
{
	position: fixed;
	width: 110px;
	height: 110px;
	margin: -55px 0 0 -55px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	border: 2px solid rgba(255, 255, 255, 0.45);
	pointer-events: none;
}

/* - Pushed to its edge, the joystick supercharges: a pulsing gold glow, a spinning ring of light, and a blazing knob. */
#stickBase.supercharged
{
	border-color: #f6d25a;
	box-shadow: 0 0 22px 8px rgba(246, 210, 90, 0.7), inset 0 0 16px rgba(255, 240, 170, 0.6);
	animation: superchargePulse 0.4s ease-in-out infinite alternate;
}

#stickBase.supercharged::before
{
	content: '';
	position: absolute;
	inset: -12px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, transparent, rgba(255, 230, 120, 0.95), transparent 25%, rgba(255, 230, 120, 0.95) 50%, transparent 75%, rgba(255, 230, 120, 0.95));
	-webkit-mask: radial-gradient(circle, transparent 60%, #000 62%);
	mask: radial-gradient(circle, transparent 60%, #000 62%);
	animation: superchargeSpin 0.55s linear infinite;
}

#stickBase.supercharged #stickKnob
{
	background: radial-gradient(circle, #ffffff, #f6d25a 55%, #e08a00);
	box-shadow: 0 0 18px 6px rgba(255, 210, 80, 0.9);
}

@keyframes superchargePulse
{
	from {scale: 1;}
	to {scale: 1.09;}
}

@keyframes superchargeSpin
{
	to {transform: rotate(360deg);}
}

#stickKnob
{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 50px;
	height: 50px;
	margin: -25px 0 0 -25px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.8);
}

.touchButton
{
	position: fixed;
	width: 78px;
	height: 78px;
	padding: 0;
	border-radius: 50%;
	font-size: 16px;
	opacity: 0.88;
	touch-action: none;
}

#passButton
{
	right: max(112px, calc(env(safe-area-inset-right) + 100px));
	bottom: max(26px, env(safe-area-inset-bottom));
	background: #1d6fb8;
}

#shootButton
{
	right: max(20px, env(safe-area-inset-right));
	bottom: max(72px, calc(env(safe-area-inset-bottom) + 46px));
}

/* Without the ball the Shoot button reads Tackle, and it glows red and pulses while a slide could reach the ball. */
#shootButton.tackleReady
{
	background: #d8432f;
	box-shadow: 0 0 0 5px rgba(255, 120, 90, 0.45), 0 0 18px 4px rgba(255, 90, 60, 0.6);
	opacity: 1;
	animation: tacklePulse 0.35s ease-in-out infinite alternate;
}

@keyframes tacklePulse
{
	from {scale: 1;}
	to {scale: 1.1;}
}

#musicButton
{
	position: fixed;
	left: max(12px, env(safe-area-inset-left));
	top: max(10px, env(safe-area-inset-top));
	width: 42px;
	height: 42px;
	padding: 0;
	font-size: 18px;
}
/* #endregion */


/* #region The TV room */
/* The TV hosts the room without playing, so its lobby leaves out the name box, team switching, and the controls guide. */
body.tvRoom #lobby .field,
body.tvRoom #switchTeamButton,
body.tvRoom #controlsHelp
{
	display: none;
}

/* The TV's match looks like a live broadcast: no controls, no stamina, no buttons, only a small score bug in the corner. */
body.broadcast #staminaBar,
body.broadcast #touchControls,
body.broadcast #pauseButton,
body.broadcast #musicButton
{
	display: none !important;
}

body.broadcast #scoreboard
{
	top: max(24px, env(safe-area-inset-top));
	left: max(28px, env(safe-area-inset-left));
	transform: none;
	gap: 10px;
	padding: 5px 14px;
	border-radius: 6px;
	background: linear-gradient(180deg, rgba(20, 24, 34, 0.92), rgba(8, 10, 16, 0.92));
	font-size: 15px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}

body.broadcast #score
{
	padding: 0 8px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.12);
	font-size: 17px;
	color: #ffffff;
}

body.broadcast #clock
{
	color: #f6d25a;
}
/* #endregion */