/* The page around the game: loading screen, the one tap that lets sound and fullscreen start, errors, and the spinner
   shown while a scene is built. The look is the game's own: ink black, bone paper, blood red, sodium amber, Bangers. */
:root {
	--ink: #0c0a0b;
	--bone: #ede3cc;
	--blood: #b80f12;
	--amber: #ffad4d;
	--ash: #8c8780;
	--comic: "Bangers", Impact, "Arial Narrow Bold", "Haettenschweiler", sans-serif;
	--text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@font-face {
	font-family: "Bangers";
	src: url("bangers.ttf") format("truetype");
	font-display: swap;
}

html, body {
	margin: 0;
	padding: 0;
	border: 0;
	height: 100%;
	background: #000;
	color: var(--bone);
	overflow: hidden;
	overscroll-behavior: none;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}

#canvas {
	display: block;
	outline: none;
}

/* --- the loading screen ------------------------------------------------------------------------------------------ */
#shell {
	position: fixed;
	inset: 0;
	z-index: 5;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 2.4vmin, 18px);
	padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
	background: radial-gradient(ellipse at 50% 42%, #1a1214 0%, #0c0a0b 55%, #000 100%);
	text-align: center;
	opacity: 1;
	transition: opacity 0.7s ease, visibility 0s linear 0s;
}
#shell.gone {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}

.lockup {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(2px, 1vmin, 8px);
}
.studio {
	margin: 0;
	font: 700 clamp(10px, 2.3vmin, 17px) / 1 var(--text);
	letter-spacing: 0.34em;
	text-indent: 0.34em;
	color: var(--amber);
}
h1 {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: var(--comic);
	font-weight: 400;
	color: var(--bone);
	-webkit-text-stroke: 0.05em var(--ink);
	paint-order: stroke fill;
	text-shadow: 0.04em 0.06em 0 rgba(0, 0, 0, 0.85);
}
h1 .top {
	font-size: clamp(30px, 9vmin, 78px);
	line-height: 0.95;
}
h1 .big {
	font-size: clamp(52px, 19vmin, 160px);
	line-height: 0.82;
	letter-spacing: 0.01em;
}
.slash {
	display: block;
	width: min(72vw, 460px);
	height: clamp(6px, 1.6vmin, 12px);
	margin-top: clamp(4px, 1.2vmin, 10px);
	background: var(--blood);
}

.meter {
	position: relative;
	width: min(60vw, 420px);
	height: 6px;
	border-radius: 3px;
	background: rgba(237, 227, 204, 0.12);
	overflow: hidden;
}
#meter-fill {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--blood);
	transform-origin: 0 50%;
	transform: scaleX(var(--p, 0));
	transition: transform 0.25s ease-out;
}
.meter.indeterminate #meter-fill {
	width: 36%;
	transform: translateX(-100%);
	transition: none;
	animation: slide 1.5s ease-in-out infinite;
}
@keyframes slide {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(280%); }
}

.status {
	margin: 0;
	min-height: 1.2em;
	font: 700 clamp(11px, 2.4vmin, 15px) / 1.2 var(--text);
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	color: var(--ash);
}
.note {
	margin: 0;
	max-width: min(86vw, 520px);
	min-height: 1.3em;
	font: 500 clamp(11px, 2.4vmin, 14px) / 1.35 var(--text);
	letter-spacing: 0.04em;
	color: var(--ash);
}

/* --- buttons: bone paper face, thick ink border, hard shadow, blood red when focused (the game's own buttons) --- */
button, a.btn {
	font-family: var(--comic);
	font-weight: 400;
	font-size: clamp(22px, 6vmin, 38px);
	letter-spacing: 0.04em;
	color: var(--ink);
	background: var(--bone);
	border: 4px solid var(--ink);
	border-radius: 4px;
	box-shadow: 0.16em 0.16em 0 var(--ink);
	padding: 0.35em 1.5em 0.4em;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
}
button:hover, button:focus, a.btn:hover, a.btn:focus {
	background: var(--blood);
	color: var(--bone);
	outline: 3px solid var(--amber);
	outline-offset: 2px;
}
button:active, a.btn:active {
	transform: translate(0.08em, 0.08em);
	box-shadow: 0.08em 0.08em 0 var(--ink);
}
a.btn {
	display: inline-block;
	text-decoration: none;
}
button:disabled {
	opacity: 0.55;
	cursor: default;
}
button[hidden], .error[hidden], #busy[hidden] {
	display: none;
}
#play {
	margin-top: clamp(4px, 1.6vmin, 14px);
	animation: breathe 2.4s ease-in-out infinite;
}
@keyframes breathe {
	0%, 100% { box-shadow: 0.16em 0.16em 0 var(--ink), 0 0 0 rgba(184, 15, 18, 0); }
	50% { box-shadow: 0.16em 0.16em 0 var(--ink), 0 0 30px rgba(184, 15, 18, 0.65); }
}

/* --- states: loading (bar fills) -> ready (the tap) -> starting (bar sweeps while the first scene builds) -> gone --- */
#shell[data-state="loading"] #play,
#shell[data-state="error"] #play,
#shell[data-state="error"] .meter,
#shell[data-state="error"] .status,
#shell[data-state="error"] .note { display: none; }
#shell[data-state="ready"] .meter,
#shell[data-state="ready"] .status { display: none; }
#shell[data-state="starting"] #play { display: none; }

.error {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	max-width: min(88vw, 560px);
	padding: 16px 20px;
	border: 2px solid var(--blood);
	border-radius: 6px;
	background: rgba(12, 10, 11, 0.9);
}
.error .what {
	margin: 0;
	font: 800 clamp(14px, 3.2vmin, 20px) / 1.25 var(--text);
	letter-spacing: 0.04em;
	color: var(--bone);
}
.error .why {
	margin: 0;
	font: 500 clamp(11px, 2.4vmin, 14px) / 1.4 var(--text);
	color: var(--ash);
	white-space: pre-line;
}

/* A phone held upright: the game plays sideways. */
.turn {
	display: none;
	margin: 0;
	font: 700 clamp(12px, 3.6vmin, 18px) / 1.2 var(--text);
	letter-spacing: 0.22em;
	color: var(--amber);
}
@media (orientation: portrait) and (pointer: coarse) {
	.turn { display: block; }
}

/* --- a scene is being built: the game stands still, the page keeps turning --------------------------------------- */
#busy {
	position: fixed;
	inset: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	pointer-events: none;
}
.spin {
	width: clamp(22px, 5vmin, 34px);
	height: clamp(22px, 5vmin, 34px);
	border-radius: 50%;
	border: 3px solid rgba(237, 227, 204, 0.18);
	border-top-color: var(--blood);
	animation: turn 0.9s linear infinite;
}
@keyframes turn {
	to { transform: rotate(360deg); }
}
.busy-text {
	font: 700 clamp(11px, 2.4vmin, 15px) / 1 var(--text);
	letter-spacing: 0.3em;
	color: var(--ash);
}

.noscript {
	position: fixed;
	inset: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	background: var(--ink);
	font: 600 16px var(--text);
}

@media (prefers-reduced-motion: reduce) {
	#play { animation: none; }
	.spin { animation-duration: 2.4s; }
	.meter.indeterminate #meter-fill { animation-duration: 3s; }
	#shell, #shell.gone { transition-duration: 0.01s; }
}