/* ── Fonts ──
   Fistalle is declared HERE as well as in webpage.css, because engine.html loads only this
   stylesheet — the game page had no @font-face for it at all, which meant the score popups could
   not use it and gameStateManager's `document.fonts.load('1em Fistalle')` was resolving against
   nothing (it tracks a "Fonts" item in the loading registry that could never really load).
   Same file, same family name, so the two declarations describe one font rather than competing. */
@font-face {
    font-family: 'Fistalle';
    src: url('assets/fonts/Fistalle.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IoskeleyMono';
    src: url('assets/fonts/IoskeleyMono-Light.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html {
	overflow: hidden;
	height: 100%;
}

body {
	margin: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-color: #000;
	color: #fff;
	font-family: Monospace;
	font-size: 13px;
	line-height: 24px;
	overscroll-behavior: none;
}



#container {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
}

#container canvas {
	display: block;
	width: 100%;
	height: 100%;
}

a {
	color: #ff0;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

button {
	cursor: pointer;
	text-transform: uppercase;
}

#info {
	position: absolute;
	top: 0px;
	width: 100%;
	padding: 0;
	box-sizing: border-box;
	text-align: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 1; /* TODO Solve this in HTML */
}

a, button, input, select {
	pointer-events: auto;
}

.lil-gui {
	z-index: 2 !important; /* TODO Solve this in HTML */
}

@media all and ( max-width: 640px ) {
	.lil-gui.root { 
		right: auto;
		top: auto;
		max-height: 50%;
		max-width: 80%;
		bottom: 0;
		left: 0;
	}
}

#overlay {
	position: absolute;
	font-size: 16px;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: rgba(0,0,0,0.7);
}

	#overlay button {
		background: transparent;
		border: 0;
		border: 1px solid rgb(255, 255, 255);
		border-radius: 4px;
		color: #ffffff;
		padding: 12px 18px;
		text-transform: uppercase;
		cursor: pointer;
	}

#notSupported {
	width: 50%;
	margin: auto;
	background-color: #f00;
	margin-top: 20px;
	padding: 10px;
}

/* Dynamic mobile joystick styles */
#dynamicJoystick {
	position: fixed;
	width: 120px;
	height: 120px;
	background: rgba(255,255,255,0.15);
	border: 3px solid rgba(255,255,255,0.4);
	border-radius: 50%;
	touch-action: none;
	box-shadow: 0 0 20px rgba(255,255,255,0.2);
	display: none;
	z-index: 2000;
	pointer-events: none;
}

#dynamicJoystickKnob {
	position: absolute;
	width: 40px;
	height: 40px;
	background: rgba(255,255,255,0.9);
	border: 2px solid rgba(255,255,255,1);
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	touch-action: none;
	box-shadow: 0 0 15px rgba(255,255,255,0.5);
	transition: box-shadow 0.15s ease;
}

#dynamicJoystickKnob.sprinting {
	box-shadow: 0 0 30px 10px rgba(255, 220, 40, 0.8), 0 0 80px 0px rgba(255, 200, 0, 0.5);
}

/* Immunity pulsating white glow on screen edges */
#immunityGlow {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 999;
	opacity: 0;
	box-shadow: inset 0 0 80px 30px rgba(255, 255, 255, 0.7);
	transition: opacity 0.4s ease-out;
}

#immunityGlow.active {
	opacity: 1;
	animation: immunityPulse 1.2s ease-in-out infinite;
}

@keyframes immunityPulse {
	0%, 100% { box-shadow: inset 0 0 60px 20px rgba(255, 255, 255, 0.4); }
	50% { box-shadow: inset 0 0 100px 40px rgba(255, 255, 255, 0.8); }
}

/* ── Location title card ─────────────────────────────────────────────────────
   The location's name across the middle of the screen when you first arrive.
   Driven by GSM: a trigger volume declared on the location fires it once per
   visit (see `titleCard` in gsmConfig).

   mix-blend-mode: exclusion means it has no colour of its own — it inverts
   whatever is behind it, so it reads as light type over dark water and dark type
   over bright sand, and can never sink into the scene the way a fixed white
   would. The element must therefore paint its glyphs in WHITE: exclusion against
   white is a full inversion, which is the effect; against black it is a no-op.

   No background and pointer-events: none — it is type floating on the world, not
   a panel, and it must never eat a click while it is up. */
#locationTitle {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	/* Over the scene and the HUD, under nothing — it is a moment, not furniture. */
	z-index: 1000;
	opacity: 0;
	font-family: 'Fistalle', sans-serif;
	/* vw-based so the name spans the same share of the screen at any resolution;
	   the clamp stops it shrinking to nothing on a phone or filling a wide monitor. */
	font-size: clamp(2rem, 7vw, 7rem);
	letter-spacing: 0.18em;
	/* The tracking above adds a trailing gap after the last letter, which throws the
	   centring off by half a space. Pull it back. */
	text-indent: 0.18em;
	line-height: 1;
	color: #ffffff;
	mix-blend-mode: exclusion;
	text-align: center;
	padding: 0 5vw;
	box-sizing: border-box;
}

/* One shot: in, hold, out. `forwards` leaves it at the final keyframe (opacity 0)
   rather than snapping back to the CSS value, so nothing flashes at the end.
   GSM removes the class and re-adds it to replay. */
#locationTitle.show {
	animation: locationTitleCard 4.6s ease-in-out forwards;
}

@keyframes locationTitleCard {
	0%   { opacity: 0; letter-spacing: 0.30em; }
	22%  { opacity: 1; }
	70%  { opacity: 1; }
	/* The letters keep drifting apart the whole time, so the card is never quite
	   static — it settles as it arrives and keeps breathing as it leaves. */
	100% { opacity: 0; letter-spacing: 0.42em; }
}

/* Damage red flash overlay */
#damageFlash {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 998;
	opacity: 0;
	background: rgb(255, 80, 80);
	mix-blend-mode: multiply;
}

#damageFlash.active {
	animation: damageFlashAnim 0.6s ease-out forwards;
}

@keyframes damageFlashAnim {
	0% { opacity: 0.75; }
	100% { opacity: 0; }
}

/* Container and interaction cursor (centered via CSS) */

#crosshair {
	position: fixed;
	left: 50%;
	top: 50%;
	width: 20px;
	height: 20px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 10000;
	mix-blend-mode: difference;
}

#crosshair::before,
#crosshair::after {
	content: '';
	position: absolute;
	background-color: rgb(255, 255, 255);
}

#crosshair::before {
	width: 12px;
	height: 1px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

}

#crosshair::after {
	width: 1px;
	height: 12px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

#interactionCursor {
	position: fixed;
	left: 50%;
	top: 50%;
	width: 16px;
	height: 16px;
	transform: translate(-50%,-50%);
	pointer-events: none;
	display: none;
	z-index: 10001;
}

#interactionCursor img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	margin: 0;
	padding: 0;
}

/* ── In-game HUD status bars (build/jsm/ui.js) ──────────────────────────────────
   A column of vertical gauges pinned to the LEFT edge, vertically centred. Each bar is
   its own column and they lay out left-to-right, so a second status bar sits beside the
   first without disturbing it.

   Everything visual is here. The only thing JS writes is --fill (0-100%), so the bar can
   be restyled — size, colour, border, direction — without touching ui.js.

   WIDTH is deliberately minimal: --bar-w is the whole interior, and nothing else in the
   bar is allowed to widen it. The label is set in VERTICAL writing mode and sits beside
   the track, so a long word like FLESH adds height rather than forcing the column out to
   its own text width — which is what made the bar read as wide before.
   Tune --bar-w / --bar-h below; they're the only size knobs. */
.ui-bars {
	--bar-w: 0rem;           /* interior width of the gauge — the bevel sits outside this */
	--bar-h: 32rem;
	--bar-bevel: .2rem;

	position: fixed;
	left: 2rem;                 /* margin from the left edge */
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: row;        /* each bar is a column; more bars sit alongside */
	align-items: center;
	gap: 0.75rem;
	z-index: 999;               /* over the scene, under #damageFlash (998 covers the screen) */
	pointer-events: none;       /* never eat a click meant for the game */
	user-select: none;
}

/* Track + label side by side, so the label contributes only its (small) vertical-text
   width instead of setting the column width. */
.ui-bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.3rem;
}

/* The bevel is the same raised-edge logic as .bevel-box in webpage.css — light
   top/left, dark bottom/right — retinted red. This is the depth; the fill stays flat so
   the border is the only thing shaping it. */
.ui-bar-track {
	position: relative;
	width: var(--bar-w);
	height: var(--bar-h);
	flex: none;                 /* never stretch to fill the row */
	background: rgba(18, 0, 0, 0.82);
	border-top:    var(--bar-bevel) solid #e89a9a;
	border-left:   var(--bar-bevel) solid #f2b4b4;
	border-bottom: var(--bar-bevel) solid #4a1414;
	border-right:  var(--bar-bevel) solid #4a1414;
	box-sizing: content-box;    /* --bar-w is the INTERIOR; the bevel adds to it rather than
	                               eating into it, so thinning the bar can't swallow the border */
	overflow: hidden;
}

/* Anchored to the BOTTOM and sized by --fill, so the gauge drains downward. */
.ui-bar-fill {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--fill, 100%);
	background: #c62828;
	transition: height 0.18s ease-out;   /* damage reads as a drop, not a teleport */
}

/* Vertical text, reading bottom-to-top up the side of the gauge. */
.ui-bar-label {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
	white-space: nowrap;
}