:root {
		--panel-face: #5a3d28;
		--panel-hi: #8a6344;
		--panel-lo: #2a1810;
		--panel-edge: #c49a62;
		--panel-ink: #f0d9a8;
		--panel-dim: #a88860;
		--crt-plastic: #c9bba0;
		--crt-plastic-hi: #ddd0b6;
		--crt-plastic-lo: #a89878;
		--crt-plastic-edge: #8f8068;
		/* Shell HUD / lobby / chat — one face for RU+EN */
		--ui-font: "Exo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
		--ui-ink: #f2e6c8;
		--ui-ink-dim: #b8a888;
		--ui-accent: #e8c98a;
		--ui-accent-hi: #f5e6c0;
		--ui-good: #8dff9a;
		--ui-danger: #ff8a7a;
		--ui-glass: rgba(14, 12, 10, 0.88);
		--ui-glass-border: rgba(232, 201, 138, 0.28);
		--ui-radius: 10px;
	}

	.svg-sprite-hidden {
		position: absolute;
		width: 0;
		height: 0;
	}

	.net-room--empty {
		cursor: default;
		opacity: 0.6;
	}

	html, body {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: #000;
		color: #ccc;
		font-family: var(--ui-font);
		touch-action: none;
		overscroll-behavior: none;
		-webkit-user-select: none;
		user-select: none;
	}

	/* Physical screen clip. Inner #orient-root is the logical landscape surface. */
	#orient-shell {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: #000;
		touch-action: none;
	}

	/* Logical landscape viewport. In portrait we size to (vh×vw) and rotate
	 * inside #orient-shell so html/body overflow cannot clip pre-transform. */
	#orient-root {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: #000;
		transform-origin: top left;
		transition: none !important;
	}

	#orient-root[data-forced="portrait"] {
		max-width: none;
		max-height: none;
		transform-origin: left top;
	}

	#stage {
		position: absolute;
		inset: 0;
		background: #000;
		overflow: hidden;
		touch-action: none;
		overscroll-behavior: none;
	}

	#canvas {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		border: 0;
		outline: none;
		background: #000;
		image-rendering: pixelated;
		image-rendering: crisp-edges;
		pointer-events: auto;
		touch-action: none;
	}

	.crt-screen {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		pointer-events: auto;
	}

	.crt-scanlines,
	.crt-glass {
		display: none;
		pointer-events: none;
		position: absolute;
		inset: 0;
		z-index: 2;
	}

	/* —— Scan: full-bleed 8:5 with neutral scanlines only —— */
	#stage.scan-mode .crt-scanlines {
		display: block;
		z-index: 3;
		mix-blend-mode: multiply;
		opacity: 0.88;
	}

	/* —— CRT: black stage, beige chassis with visible side bezels, 4:3 screen —— */
	#stage.crt-mode {
		background: #000;
	}

	.crt-chassis {
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background: transparent;
	}

	#stage.crt-mode .crt-chassis {
		pointer-events: none;
		border-radius: 1% / 1.2%;
		overflow: visible;
		background-color: var(--crt-plastic);
		background-image:
			radial-gradient(ellipse 120% 80% at 50% -10%, rgba(255, 250, 235, 0.45), transparent 55%),
			radial-gradient(ellipse 90% 70% at 50% 110%, rgba(90, 75, 55, 0.28), transparent 50%),
			linear-gradient(165deg, var(--crt-plastic-hi) 0%, var(--crt-plastic) 42%, var(--crt-plastic-lo) 100%);
		box-shadow:
			/* outer case edge + side rounding */
			0 0 0 1px rgba(30, 24, 16, 0.65),
			0 1px 0 rgba(255, 245, 220, 0.28),
			0 16px 40px rgba(0, 0, 0, 0.55),
			inset 0 0 0 1px rgba(255, 245, 220, 0.12),
			inset 18px 0 28px rgba(0, 0, 0, 0.14),
			inset -18px 0 28px rgba(0, 0, 0, 0.14),
			inset 0 14px 22px rgba(255, 245, 220, 0.08),
			inset 0 -18px 26px rgba(40, 30, 20, 0.18);
	}

	/* ABS plastic grain on chassis only */
	#stage.crt-mode .crt-chassis::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		border-radius: inherit;
		opacity: 0.4;
		background-image:
			repeating-linear-gradient(
				0deg,
				transparent 0,
				transparent 1px,
				rgba(60, 45, 30, 0.035) 1px,
				rgba(60, 45, 30, 0.035) 2px
			),
			repeating-linear-gradient(
				90deg,
				transparent 0,
				transparent 1px,
				rgba(60, 45, 30, 0.028) 1px,
				rgba(60, 45, 30, 0.028) 2px
			),
			url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
		background-size: auto, auto, 180px 180px;
		mix-blend-mode: multiply;
	}

	.crt-badge-samsung,
	.crt-badge-model,
	.crt-well {
		display: none;
	}

	/* Concave plastic lip around the CRT glass */
	#stage.crt-mode .crt-well {
		display: block;
		position: absolute;
		z-index: 1;
		pointer-events: none;
		border-radius: 3.8% / 4.8%;
		background:
			radial-gradient(
				ellipse 94% 92% at 50% 48%,
				#3a342c 0%,
				var(--crt-plastic-lo) 55%,
				var(--crt-plastic) 100%
			);
		box-shadow:
			inset 0 4px 7px rgba(0, 0, 0, 0.28),
			inset 0 -2px 4px rgba(255, 240, 210, 0.08),
			inset 5px 0 8px rgba(0, 0, 0, 0.18),
			inset -5px 0 8px rgba(0, 0, 0, 0.18),
			inset 0 0 0 1px rgba(0, 0, 0, 0.25);
	}

	/* Photo layout: Samsung oval left, SyncMaster 3 + Low Radiation right */
	#stage.crt-mode .crt-badge-samsung {
		display: block;
		position: absolute;
		z-index: 2;
		pointer-events: none;
		/* height set in JS from chassis size */
		width: auto;
		filter: drop-shadow(0 1px 0 rgba(255, 245, 220, 0.15));
	}

	#stage.crt-mode .crt-badge-model {
		display: flex;
		position: absolute;
		z-index: 2;
		pointer-events: none;
		flex-direction: column;
		align-items: flex-start;
		line-height: 1.05;
		color: #2a2e32;
		text-shadow: 0 1px 0 rgba(255, 245, 220, 0.2);
		font-family: Helvetica, Arial, "Liberation Sans", sans-serif;
		white-space: nowrap;
		/* font sizes set in JS from chassis size */
	}

	#stage.crt-mode .crt-badge-model-name {
		font-weight: 700;
		letter-spacing: 0.01em;
	}

	#stage.crt-mode .crt-badge-model-sub {
		font-weight: 400;
		letter-spacing: 0.04em;
		margin-top: 0.22em;
		opacity: 0.85;
	}

	/* Always-on controls: fullscreen / screen mode / mute — top-right column.
	 * Above #touch-controls (z=15) so HUD taps are not contested on iPhone. */
	#tyr-controls {
		display: flex;
		flex-direction: column;
		position: absolute;
		z-index: 20;
		right: max(12px, env(safe-area-inset-right));
		top: max(12px, env(safe-area-inset-top));
		align-items: center;
		gap: 10px;
		pointer-events: auto;
		font-family: var(--ui-font);
		touch-action: manipulation;
	}

	#tyr-controls .crt-ctrl-btn {
		appearance: none;
		border: 1px solid rgba(232, 201, 138, 0.28);
		cursor: pointer;
		position: relative;
		width: clamp(44px, 5vw, 52px);
		height: clamp(44px, 5vw, 52px);
		padding: 0;
		border-radius: 10px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: var(--ui-ink);
		background: rgba(18, 16, 14, 0.72);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
		transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
		user-select: none;
		-webkit-user-select: none;
	}

	/* Expand hit target beyond the visible chrome (Apple HIG ~44pt). */
	#tyr-controls .crt-ctrl-btn::before {
		content: "";
		position: absolute;
		inset: -8px;
	}

	#tyr-controls .crt-ctrl-btn:hover {
		background: rgba(40, 34, 28, 0.88);
		border-color: rgba(232, 201, 138, 0.45);
	}

	#tyr-controls .crt-ctrl-btn:active {
		transform: scale(0.96);
		background: rgba(28, 24, 20, 0.92);
	}

	#tyr-controls .crt-ctrl-btn.active {
		color: var(--ui-good);
		border-color: rgba(125, 255, 154, 0.45);
		background: rgba(28, 48, 32, 0.75);
	}

	#tyr-controls .crt-ctrl-btn:focus-visible {
		outline: 2px solid var(--ui-accent);
		outline-offset: 2px;
	}

	#tyr-controls .crt-ctrl-btn svg {
		width: 54%;
		height: 54%;
		display: block;
		pointer-events: none;
	}

	#tyr-controls .crt-ctrl-btn svg.icon use {
		pointer-events: none;
	}

	#tyr-controls .crt-ctrl-btn .icon-sound-off[hidden],
	#tyr-controls .crt-ctrl-btn .icon-sound-on[hidden],
	#tyr-controls .crt-ctrl-btn .icon-mode[hidden],
	#tyr-controls .crt-ctrl-btn .icon-fs-enter[hidden],
	#tyr-controls .crt-ctrl-btn .icon-fs-exit[hidden] {
		display: none !important;
	}

	#tyr-controls #btn-mute.is-muted {
		color: var(--ui-danger);
		border-color: rgba(255, 138, 122, 0.4);
	}

	#stage:not(.crt-mode) #tyr-controls #btn-mute.is-muted {
		color: var(--ui-danger);
	}

	/* Hide fullscreen only in installed touch/PWA shell — never on desktop
	 * (hover:fine). html.pwa-display alone must not kill the desktop button.
	 * iPad keeps the FS button (opt-in); only the start gate is suppressed. */
	html.pwa-display #btn-fullscreen {
		display: none !important;
	}

	html.pwa-display #mobile-gate,
	html.ios-touch #mobile-gate {
		display: none !important;
	}

	@media (display-mode: standalone),
		(display-mode: minimal-ui) {
		#btn-fullscreen {
			display: none !important;
		}
		#mobile-gate {
			display: none !important;
		}
	}

	/* Desktop / mouse UI: always keep the fullscreen control visible. */
	@media (hover: hover) and (pointer: fine) {
		#btn-fullscreen {
			display: inline-flex !important;
		}
		html.pwa-display #btn-fullscreen {
			display: inline-flex !important;
		}
	}

	#stage:not(.crt-mode) #tyr-controls .crt-ctrl-btn {
		background: rgba(18, 16, 14, 0.72);
		color: var(--ui-ink);
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
	}

	#stage:not(.crt-mode) #tyr-controls .crt-ctrl-btn.active {
		color: var(--ui-good);
	}

	#tyr-chat-btn[hidden],
	#tyr-mic-btn[hidden] {
		display: none !important;
	}

	#tyr-controls #tyr-mic-btn.active {
		color: var(--ui-good);
		border-color: rgba(125, 255, 154, 0.5);
		background: rgba(28, 48, 32, 0.8);
	}

	#net-chat {
		position: absolute;
		z-index: 13;
		right: calc(max(12px, env(safe-area-inset-right)) + clamp(44px, 5vw, 52px) + 14px);
		top: max(12px, env(safe-area-inset-top));
		width: min(300px, calc(100vw - 24px));
		max-height: min(560px, 84vh);
		display: none;
		flex-direction: column;
		background: var(--ui-glass);
		border: 1px solid var(--ui-glass-border);
		border-radius: var(--ui-radius);
		box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		overflow: hidden;
		pointer-events: auto;
		font-family: var(--ui-font);
		font-size: 13px;
		font-weight: 500;
		color: var(--ui-ink);
	}

	#net-chat.open {
		display: flex;
	}

	#net-chat-log {
		flex: 1 1 auto;
		overflow-y: auto;
		padding: 10px 12px;
		min-height: 144px;
		max-height: 360px;
	}

	#net-chat-log .chat-line {
		margin: 0 0 6px;
		line-height: 1.4;
		word-break: break-word;
	}

	#net-chat-log .chat-line .chat-name {
		color: var(--ui-accent);
		font-weight: 600;
	}

	#net-chat-log .chat-line.mine .chat-name {
		color: var(--ui-good);
	}

	#net-chat-form {
		display: flex;
		gap: 6px;
		padding: 8px;
		border-top: 1px solid rgba(232, 201, 138, 0.14);
	}

	#net-chat-input {
		flex: 1 1 auto;
		min-width: 0;
		background: rgba(0, 0, 0, 0.45);
		border: 1px solid rgba(232, 201, 138, 0.22);
		border-radius: 8px;
		color: var(--ui-ink);
		padding: 7px 10px;
		font: inherit;
		outline: none;
	}

	#net-chat-input:focus {
		border-color: rgba(232, 201, 138, 0.5);
	}

	#net-chat-send {
		appearance: none;
		border: 1px solid rgba(232, 201, 138, 0.35);
		border-radius: 8px;
		padding: 7px 12px;
		cursor: pointer;
		background: rgba(90, 70, 40, 0.85);
		color: var(--ui-ink);
		font: inherit;
		font-weight: 600;
	}

	#net-chat-send:active {
		filter: brightness(1.08);
	}

	#net-chat-toasts {
		position: absolute;
		z-index: 14;
		left: max(12px, env(safe-area-inset-left));
		bottom: max(48px, calc(env(safe-area-inset-bottom) + 40px));
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-end;
		gap: 0.15em;
		width: min(28rem, calc(100% - 24px));
		max-height: calc(4 * 1.35em + 0.5em);
		overflow: hidden;
		pointer-events: none;
		/* Phone ≈13px; desktop scales up with viewport. */
		font-size: clamp(13px, 0.55vw + 11.5px, 20px);
	}

	#net-chat-toasts .net-chat-toast {
		max-width: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		color: var(--ui-ink);
		font-family: var(--ui-font);
		font-size: 1em;
		font-weight: 500;
		line-height: 1.35;
		text-align: left;
		word-break: break-word;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 0.5em rgba(0, 0, 0, 0.55);
		opacity: 0;
		transform: translateY(0.6em);
		transition: transform 0.28s ease, opacity 0.28s ease;
	}

	#net-chat-toasts .net-chat-toast.show {
		opacity: 1;
		transform: translateY(0);
	}

	#net-chat-toasts .net-chat-toast .toast-name {
		color: var(--ui-accent-hi);
		font-weight: 600;
	}

	#net-ptt-local,
	#net-ptt-remote {
		position: absolute;
		z-index: 13;
		left: max(12px, env(safe-area-inset-left));
		pointer-events: none;
		padding: 6px 10px;
		border-radius: 8px;
		background: var(--ui-glass);
		border: 1px solid var(--ui-glass-border);
		color: var(--ui-ink);
		font-family: var(--ui-font);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.02em;
	}

	#net-ptt-local {
		bottom: max(12px, env(safe-area-inset-bottom));
	}

	#net-ptt-remote {
		bottom: calc(max(12px, env(safe-area-inset-bottom)) + 36px);
	}

	#net-ptt-local[hidden],
	#net-ptt-remote[hidden] {
		display: none !important;
	}

	#stage.mobile-touch.mobile-immersive {
		width: 100%;
		height: 100%;
	}

	/* Only use dvh when not inside CSS-rotated logical landscape. */
	#orient-root:not([data-forced]) #stage.mobile-touch.mobile-immersive,
	#orient-root[data-forced="landscape"] #stage.mobile-touch.mobile-immersive {
		height: 100dvh;
		max-height: -webkit-fill-available;
	}

	#orient-root[data-forced="portrait"] #stage {
		max-height: none !important;
		max-width: none !important;
	}

	#stage.mobile-touch:not(.crt-mode) #tyr-chassis {
		/* 8:5 box is positioned by layoutCrt(); keep black bars on stage. */
		background: #000;
	}

	#mobile-gate {
		display: none;
		position: absolute;
		inset: 0;
		z-index: 30;
		align-items: center;
		justify-content: center;
		background: #000;
		pointer-events: auto;
		touch-action: manipulation;
	}

	#stage.mobile-touch #mobile-gate.open {
		display: flex;
	}

	#stage.mobile-suspended #tyr-chassis {
		visibility: hidden;
		pointer-events: none;
	}

	#mobile-gate-btn[hidden] {
		display: none !important;
	}

	/* HUD / CRT controls only after landscape play is active */
	#stage.mobile-touch:not(.mobile-landscape) #tyr-controls,
	#stage.mobile-touch:not(.mobile-landscape) #touch-controls {
		display: none !important;
	}

	#stage.mobile-touch.mobile-gate-open #tyr-controls,
	#stage.mobile-touch.mobile-gate-open #touch-controls {
		display: none !important;
	}

	#mobile-gate-btn {
		appearance: none;
		border: 2px solid rgba(232, 201, 138, 0.85);
		border-radius: 12px;
		min-width: min(70vw, 280px);
		min-height: 64px;
		padding: 16px 28px;
		cursor: pointer;
		color: #f0e6c8;
		background: rgba(24, 20, 16, 0.92);
		box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
		font-family: var(--ui-font);
		font-size: clamp(1.15rem, 4.5vw, 1.5rem);
		font-weight: 600;
		letter-spacing: 0.04em;
		-webkit-tap-highlight-color: transparent;
		user-select: none;
		touch-action: manipulation;
	}

	#mobile-gate-btn:active {
		filter: brightness(1.15);
	}

	#touch-controls {
		display: none;
		position: absolute;
		z-index: 15;
		inset: 0;
		pointer-events: none;
	}

	#stage.mobile-touch #touch-controls {
		display: block;
	}

	/* No browser arrow / I-beam over the game on phones/tablets. */
	#stage.mobile-touch #canvas,
	#stage.mobile-touch .crt-screen {
		cursor: none !important;
	}

	#touch-controls[hidden] {
		display: none !important;
	}

	#touch-esc {
		position: absolute;
		top: max(10px, env(safe-area-inset-top));
		left: max(10px, env(safe-area-inset-left));
		appearance: none;
		border: 1px solid rgba(230, 220, 190, 0.4);
		border-radius: 12px;
		width: clamp(44px, 12vw, 56px);
		height: clamp(44px, 12vw, 56px);
		padding: 0;
		cursor: pointer;
		pointer-events: auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: #f0e6c8;
		background: rgba(18, 16, 14, 0.55);
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
		-webkit-tap-highlight-color: transparent;
		user-select: none;
		touch-action: manipulation;
	}

	#touch-esc svg {
		width: 52%;
		height: 52%;
		display: block;
		pointer-events: none;
	}

	#touch-actions {
		/* Vertically centered column, inset from left toward center. */
		position: absolute;
		left: max(28px, calc(env(safe-area-inset-left) + 56px));
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		display: none;
		flex-direction: column;
		align-items: center;
		gap: 14px;
		width: auto;
		height: auto;
		pointer-events: none;
		opacity: 0.5;
	}

	#stage.gameplay-hud #touch-actions {
		display: flex;
	}

	#touch-actions .touch-round {
		position: relative;
		pointer-events: auto;
	}

	/* Visual-only stick: vertically centered, shifted left from the edge. */
	#touch-stick {
		position: absolute;
		right: max(48px, calc(env(safe-area-inset-right) + 14vw));
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		width: clamp(112px, 28vw, 148px);
		height: clamp(112px, 28vw, 148px);
		border-radius: 50%;
		border: 1px solid rgba(255, 255, 255, 0.22);
		background: rgba(12, 12, 14, 0.38);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
		pointer-events: none;
		opacity: 0.72;
		transition: opacity 0.12s ease;
		display: none;
	}

	#stage.gameplay-hud #touch-stick {
		display: block;
	}

	#touch-stick-knob {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 42%;
		height: 42%;
		margin: 0;
		border-radius: 50%;
		border: 1px solid rgba(255, 255, 255, 0.28);
		background: rgba(245, 236, 214, 0.32);
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
		transform: translate(-50%, -50%);
		pointer-events: none;
	}

	/* Finger down → dim stick only. */
	#touch-stick.is-active {
		opacity: 0.3;
		background: rgba(12, 12, 14, 0.2);
		border-color: rgba(255, 255, 255, 0.12);
	}

	#touch-controls .touch-round {
		appearance: none;
		border: 1px solid rgba(255, 255, 255, 0.22);
		border-radius: 50%;
		width: clamp(60px, 16vw, 74px);
		height: clamp(60px, 16vw, 74px);
		padding: 0;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: rgba(245, 236, 214, 0.95);
		background: rgba(12, 12, 14, 0.38);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
		-webkit-tap-highlight-color: transparent;
		user-select: none;
		touch-action: manipulation;
	}

	#touch-controls .touch-round svg {
		width: 48%;
		height: 48%;
		display: block;
		pointer-events: none;
	}

	#touch-esc:active,
	#touch-esc.is-down,
	#touch-controls .touch-round:active,
	#touch-controls .touch-round.is-down {
		background: rgba(70, 110, 55, 0.55);
		border-color: rgba(160, 220, 120, 0.65);
		color: #f5ffe8;
	}

	/* Autofire toggle: lit when on (default). */
	#touch-fire.is-on {
		background: rgba(70, 110, 55, 0.42);
		border-color: rgba(160, 220, 120, 0.55);
		color: #f5ffe8;
	}

	#stage.crt-mode .crt-screen {
		/* left/top/width/height set in JS to exact 4:3 */
		z-index: 2;
		border-radius: 3.2% / 4.2%;
		overflow: hidden;
		isolation: isolate;
		box-shadow:
			inset 0 0 0 1px rgba(255, 255, 255, 0.06),
			inset 0 0 28px rgba(0, 0, 0, 0.35),
			0 0 0 2px #0c0a08,
			0 0 0 3px rgba(255, 245, 220, 0.08);
	}

	#stage.crt-mode #canvas {
		border-radius: inherit;
		/* Do not use SVG/CSS filter on the WebGL canvas — it blanks output in Safari/WebKit. */
	}

	#stage.crt-mode .crt-scanlines {
		display: block;
		z-index: 3;
		border-radius: inherit;
		mix-blend-mode: multiply;
		/* dark lines with slight green CRT glass tint */
		opacity: 0.92;
	}

	/* soft phosphor bloom / black-level glow */
	#stage.crt-mode .crt-phosphor {
		display: block;
		pointer-events: none;
		position: absolute;
		inset: 0;
		z-index: 2;
		border-radius: inherit;
		background:
			radial-gradient(
				ellipse 90% 88% at 50% 50%,
				rgba(255, 220, 160, 0.035) 0%,
				transparent 62%
			),
			linear-gradient(
				180deg,
				rgba(36, 72, 48, 0.045) 0%,
				rgba(20, 28, 24, 0.025) 40%,
				rgba(48, 32, 20, 0.035) 100%
			);
		mix-blend-mode: soft-light;
	}

	#stage.crt-mode .crt-glass {
		display: block;
		z-index: 4;
		border-radius: inherit;
		background:
			linear-gradient(
				165deg,
				rgba(255, 240, 220, 0.22) 0%,
				rgba(255, 230, 200, 0.06) 7%,
				rgba(220, 235, 230, 0.02) 16%,
				transparent 34%
			),
			radial-gradient(
				115% 65% at 30% -5%,
				rgba(255, 245, 225, 0.12) 0%,
				rgba(255, 230, 200, 0.03) 30%,
				transparent 58%
			),
			radial-gradient(
				ellipse 96% 94% at 50% 50%,
				transparent 48%,
				rgba(8, 16, 14, 0.14) 76%,
				rgba(4, 10, 8, 0.38) 100%
			);
		box-shadow:
			inset 0 1px 0 rgba(255, 240, 220, 0.30),
			inset 0 0 0 1px rgba(255, 230, 200, 0.10),
			inset 0 -1px 0 rgba(0, 0, 0, 0.28),
			inset 0 0 56px rgba(12, 24, 20, 0.12);
	}

	#stage.crt-mode .crt-glass::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		padding: 1.5px;
		background: linear-gradient(
			145deg,
			rgba(255, 245, 230, 0.48) 0%,
			rgba(255, 230, 200, 0.10) 30%,
			rgba(200, 220, 215, 0.03) 55%,
			rgba(255, 235, 210, 0.16) 100%
		);
		-webkit-mask:
			linear-gradient(#000 0 0) content-box,
			linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		mask:
			linear-gradient(#000 0 0) content-box,
			linear-gradient(#000 0 0);
		mask-composite: exclude;
	}

	#stage.crt-mode .crt-glass::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		/* corner falloff + light warm CRT cast */
		background:
			radial-gradient(
				ellipse 86% 84% at 50% 48%,
				transparent 58%,
				rgba(8, 14, 12, 0.28) 100%
			),
			radial-gradient(
				ellipse 70% 60% at 50% 55%,
				rgba(255, 190, 110, 0.02) 0%,
				transparent 70%
			);
		mix-blend-mode: multiply;
	}

	.crt-phosphor {
		display: none;
	}

	#net-lobby input,
	#net-chat-input {
		-webkit-user-select: text;
		user-select: text;
		touch-action: manipulation;
	}

	#status {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;
		z-index: 35;
		font-family: var(--ui-font);
		font-weight: 500;
		color: var(--ui-accent);
		background: #000;
	}

	#status.hidden {
		display: none;
	}

	/* 8:5 plate relative to logical #orient-root (not physical dvw/dvh). */
	#status-frame {
		width: min(100%, 160vh);
		max-width: 100%;
		aspect-ratio: 8 / 5;
		height: auto;
		max-height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}

	#load-bar-track {
		width: min(70%, 320px);
		height: 10px;
		border-radius: 6px;
		background: rgba(232, 201, 138, 0.18);
		border: 1px solid rgba(232, 201, 138, 0.35);
		overflow: hidden;
	}

	#load-bar-fill {
		height: 100%;
		width: 0%;
		border-radius: 5px;
		background: linear-gradient(90deg, #c4a15a 0%, #e8c98a 55%, #f5e6c0 100%);
		transition: width 0.15s ease-out;
	}

	#status.indeterminate #load-bar-fill {
		width: 35%;
		animation: load-indeterminate 1.1s ease-in-out infinite;
	}

	@keyframes load-indeterminate {
		0% { transform: translateX(-120%); }
		100% { transform: translateX(320%); }
	}

	#net-lobby {
		--net-gap: 10px;
		--net-ctrl-h: 40px;
		--net-radius: 8px;
		--net-input-bg: #1a1612;
		--net-input-fg: #f2e6c8;
		display: none;
		position: absolute;
		inset: 0;
		z-index: 40;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
		background: rgba(0, 0, 0, 0.78);
		font-family: var(--ui-font);
		color: var(--ui-ink);
		color-scheme: dark;
	}

	#net-lobby.open {
		display: flex;
	}

	#net-lobby .net-panel {
		display: flex;
		flex-direction: column;
		gap: 0;
		width: min(480px, 100%);
		max-height: 100%;
		max-height: min(100%, 100dvh);
		min-height: 0;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0;
		background: linear-gradient(165deg, rgba(42, 36, 28, 0.97) 0%, rgba(16, 14, 12, 0.98) 100%);
		border: 1px solid var(--ui-glass-border);
		border-radius: 14px;
		box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
	}

	#net-lobby .net-panel-head {
		flex: 0 0 auto;
		padding: 16px 18px 12px;
		border-bottom: 1px solid rgba(232, 201, 138, 0.14);
		background: linear-gradient(180deg, rgba(48, 40, 30, 0.98) 0%, rgba(32, 28, 22, 0.96) 100%);
	}

	#net-lobby .net-panel-body {
		display: flex;
		flex-direction: column;
		gap: var(--net-gap);
		flex: 1 1 auto;
		min-height: 0;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding: 12px 18px 16px;
		box-sizing: border-box;
	}

	#net-lobby h2 {
		margin: 0;
		font-size: 1.35rem;
		font-weight: 600;
		letter-spacing: 0.03em;
		line-height: 1.2;
		color: var(--ui-accent-hi);
		flex: 0 0 auto;
	}

	#net-lobby .net-field {
		display: flex;
		flex-direction: column;
		gap: 6px;
		flex: 0 0 auto;
		min-width: 0;
	}

	#net-lobby .net-field > label,
	#net-lobby label:not(.net-switch) {
		display: block;
		margin: 0;
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--ui-ink-dim);
		line-height: 1;
		opacity: 1;
	}

	#net-lobby input[type="text"],
	#net-lobby .net-text-input {
		display: block;
		appearance: none;
		-webkit-appearance: none;
		width: 100%;
		height: var(--net-ctrl-h);
		min-height: var(--net-ctrl-h);
		box-sizing: border-box;
		margin: 0;
		padding: 0 12px;
		font-family: var(--ui-font);
		font-size: 0.95rem;
		font-weight: 500;
		line-height: normal;
		color: var(--net-input-fg);
		-webkit-text-fill-color: var(--net-input-fg);
		caret-color: var(--net-input-fg);
		background-color: var(--net-input-bg);
		background-image: none;
		border: 1px solid rgba(232, 201, 138, 0.22);
		border-radius: var(--net-radius);
		outline: none;
		flex: 0 0 auto;
		box-shadow: none;
	}

	#net-lobby input[type="text"]:focus,
	#net-lobby .net-text-input:focus {
		border-color: rgba(232, 201, 138, 0.5);
	}

	#net-lobby input[type="text"]:-webkit-autofill,
	#net-lobby input[type="text"]:-webkit-autofill:hover,
	#net-lobby input[type="text"]:-webkit-autofill:focus,
	#net-lobby .net-text-input:-webkit-autofill,
	#net-lobby .net-text-input:-webkit-autofill:hover,
	#net-lobby .net-text-input:-webkit-autofill:focus {
		-webkit-text-fill-color: var(--net-input-fg);
		caret-color: var(--net-input-fg);
		box-shadow: 0 0 0 1000px var(--net-input-bg) inset;
		transition: background-color 99999s ease-out;
	}

	#net-lobby #net-join-code {
		text-transform: uppercase;
		letter-spacing: 0.12em;
	}

	#net-lobby .net-row {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: var(--net-gap);
		margin: 0;
		flex: 0 0 auto;
		min-width: 0;
	}

	#net-lobby .net-row-actions {
		flex-wrap: wrap;
	}

	#net-lobby .net-row-actions > button {
		flex: 1 1 0;
		min-width: 0;
	}

	#net-lobby .net-row-join > input {
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
	}

	#net-lobby .net-row-join > button {
		flex: 0 0 auto;
	}

	#net-lobby .net-row-footer {
		margin-top: 2px;
		padding-top: var(--net-gap);
		border-top: 1px solid rgba(232, 201, 138, 0.14);
	}

	#net-lobby .net-row-footer > button {
		flex: 1 1 0;
	}

	#net-lobby button {
		appearance: none;
		cursor: pointer;
		box-sizing: border-box;
		height: var(--net-ctrl-h);
		min-height: var(--net-ctrl-h);
		margin: 0;
		padding: 0 12px;
		font: inherit;
		font-size: 0.9rem;
		font-weight: 600;
		line-height: 1;
		border-radius: var(--net-radius);
		color: #1a1610;
		background: linear-gradient(180deg, var(--ui-accent-hi) 0%, var(--ui-accent) 100%);
		border: 1px solid rgba(180, 140, 70, 0.55);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
		transition: filter 0.12s ease, transform 0.1s ease;
	}

	#net-lobby button:disabled {
		opacity: 0.4;
		cursor: default;
		transform: none;
		filter: none;
	}

	#net-lobby button.secondary {
		color: var(--ui-ink);
		background: rgba(40, 34, 28, 0.9);
		border-color: rgba(232, 201, 138, 0.25);
	}

	#net-lobby .net-switch {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: var(--net-ctrl-h);
		margin: 0;
		padding: 0 2px 0 0;
		cursor: pointer;
		user-select: none;
		-webkit-tap-highlight-color: transparent;
		flex: 0 0 auto;
		font-size: 0.9rem;
		font-weight: 600;
		letter-spacing: 0;
		text-transform: none;
		color: var(--ui-ink);
		opacity: 1;
	}

	#net-lobby .net-switch input {
		position: absolute;
		opacity: 0;
		width: 1px;
		height: 1px;
		margin: 0;
		pointer-events: none;
	}

	#net-lobby .net-switch-track {
		position: relative;
		width: 40px;
		height: 22px;
		flex: 0 0 auto;
		border-radius: 11px;
		background: rgba(0, 0, 0, 0.45);
		border: 1px solid rgba(232, 201, 138, 0.22);
		box-sizing: border-box;
		transition: background 0.15s ease, border-color 0.15s ease;
	}

	#net-lobby .net-switch-track::after {
		content: "";
		position: absolute;
		top: 2px;
		left: 2px;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: var(--ui-ink-dim);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
		transition: transform 0.15s ease, background 0.15s ease;
	}

	#net-lobby .net-switch input:checked + .net-switch-track {
		background: rgba(232, 201, 138, 0.32);
		border-color: rgba(232, 201, 138, 0.55);
	}

	#net-lobby .net-switch input:checked + .net-switch-track::after {
		transform: translateX(18px);
		background: var(--ui-accent-hi);
	}

	#net-lobby .net-switch input:focus-visible + .net-switch-track {
		outline: 2px solid var(--ui-accent);
		outline-offset: 2px;
	}

	#net-lobby .net-switch-text {
		line-height: 1;
		white-space: nowrap;
	}

	#net-lobby .net-status {
		min-height: 1.25em;
		margin: 0;
		font-size: 0.84rem;
		font-weight: 500;
		line-height: 1.35;
		color: var(--ui-ink-dim);
		flex: 0 0 auto;
	}

	#net-lobby .net-rooms {
		margin: 0;
		border: 1px solid rgba(232, 201, 138, 0.16);
		border-radius: var(--net-radius);
		max-height: calc(8 * var(--net-ctrl-h));
		overflow: auto;
		flex: 0 0 auto;
		min-height: 0;
		background: rgba(0, 0, 0, 0.25);
	}

	#net-lobby .net-rooms-pager {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		flex: 0 0 auto;
		min-height: var(--net-ctrl-h);
	}

	#net-lobby .net-rooms-pager[hidden] {
		display: none !important;
	}

	#net-lobby .net-rooms-pager > button {
		width: var(--net-ctrl-h);
		padding: 0;
		flex: 0 0 auto;
		font-size: 1.25rem;
		line-height: 1;
	}

	#net-lobby .net-rooms-page-label {
		min-width: 4.5em;
		text-align: center;
		font-size: 0.88rem;
		font-weight: 600;
		color: var(--ui-ink-dim);
		letter-spacing: 0.04em;
	}

	#net-lobby .net-room {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--net-gap);
		height: var(--net-ctrl-h);
		min-height: var(--net-ctrl-h);
		padding: 0 12px;
		box-sizing: border-box;
		cursor: pointer;
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
		font-size: 0.9rem;
		font-weight: 500;
	}

	#net-lobby .net-room:hover {
		background: rgba(232, 201, 138, 0.08);
	}

	#net-lobby .net-room:last-child {
		border-bottom: 0;
	}

	#net-lobby .net-code {
		font-family: var(--ui-font);
		font-size: clamp(1.6rem, 5vw, 2.1rem);
		font-weight: 700;
		letter-spacing: 0.22em;
		line-height: 1.2;
		text-align: center;
		margin: 0;
		color: var(--ui-accent-hi);
		flex: 0 0 auto;
	}

	#net-away-overlay {
		position: absolute;
		inset: 0;
		z-index: 40;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.55);
		color: var(--ui-ink);
		font-family: var(--ui-font);
		font-size: clamp(14px, 2.2vw, 20px);
		font-weight: 600;
		text-align: center;
		padding: 1.5rem;
		pointer-events: none;
	}

	#net-away-overlay[hidden] {
		display: none !important;
	}

	#net-wait-overlay {
		position: absolute;
		inset: 0;
		z-index: 39;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.4);
		color: var(--ui-ink);
		font-family: var(--ui-font);
		font-size: clamp(14px, 2.2vw, 18px);
		font-weight: 600;
		text-align: center;
		padding: 1.5rem;
		pointer-events: none;
	}

	#net-wait-overlay[hidden] {
		display: none !important;
	}

	#net-stats {
		position: absolute;
		z-index: 35;
		top: max(8px, env(safe-area-inset-top));
		right: max(8px, env(safe-area-inset-right));
		padding: 4px 8px;
		border-radius: 6px;
		background: rgba(0, 0, 0, 0.55);
		border: 1px solid var(--ui-glass-border);
		color: var(--ui-ink);
		font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
		font-size: 11px;
		line-height: 1.3;
		letter-spacing: 0.02em;
		pointer-events: none;
		opacity: 0.85;
	}

	#net-stats[hidden] {
		display: none !important;
	}

	#site-stats {
		position: absolute;
		z-index: 36;
		left: 50%;
		bottom: max(10px, env(safe-area-inset-bottom));
		transform: translateX(-50%);
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px;
		max-width: min(96vw, 960px);
		pointer-events: none;
	}

	#site-stats[hidden] {
		display: none !important;
	}

	#site-stats .site-stat {
		display: inline-flex;
		align-items: baseline;
		gap: 0.35em;
		padding: 5px 10px;
		border-radius: 8px;
		background: rgba(0, 0, 0, 0.6);
		border: 1px solid var(--ui-glass-border);
		color: var(--ui-ink);
		font-family: var(--ui-font);
		font-size: clamp(11px, 1.6vw, 13px);
		font-weight: 500;
		letter-spacing: 0.02em;
		white-space: nowrap;
		opacity: 0.92;
	}

	#site-stats .site-stat-label {
		opacity: 0.75;
		font-weight: 500;
	}

	#site-stats .site-stat-value {
		font-variant-numeric: tabular-nums;
		font-weight: 700;
	}