:root {
	--ink: #eaffff;
	--muted: #90b8c8;
	--cyan: #1ffcff;
	--cyan-bright: #a9ffff;
	--violet: #a869ff;
	--magenta: #ff49d1;
	--lime: #b8ff43;
	--panel: rgba(5, 26, 47, 0.72);
	--line: rgba(94, 246, 255, 0.3);
	--display: "Plus Jakarta Sans", "Arial Narrow", Impact, sans-serif;
	--body: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif;
}

* {
	box-sizing: border-box;
}

html,
body {
	width: 100%;
	min-width: 320px;
	height: 100%;
	min-height: 100%;
	overflow: hidden;
	background: #03101f;
	color: var(--ink);
	font-family: var(--body);
	overscroll-behavior: none;
}

body {
	position: relative;
	background-image:
		linear-gradient(180deg, rgba(4, 22, 42, 0.28), rgba(2, 8, 19, 0.82)),
		url("assets/art/cyber-city-arena.webp");
	background-position: center;
	background-size: cover;
}

button,
a {
	-webkit-tap-highlight-color: transparent;
}

body::before {
	z-index: 0;
	background:
		radial-gradient(circle at 50% 34%, rgba(31, 252, 255, 0.2), transparent 31%),
		radial-gradient(circle at 19% 58%, rgba(168, 105, 255, 0.18), transparent 23%),
		linear-gradient(90deg, rgba(1, 10, 26, 0.76), transparent 28% 72%, rgba(1, 10, 26, 0.76));
}

body::after {
	z-index: 0;
	border: 0;
	box-shadow: none;
	opacity: 0.15;
	background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(141, 251, 255, 0.2) 4px);
	mix-blend-mode: soft-light;
}

.ambient-grid {
	position: fixed;
	z-index: 0;
	right: -20%;
	bottom: -19%;
	left: -20%;
	height: 50%;
	opacity: 0.28;
	transform: perspective(360px) rotateX(63deg);
	transform-origin: center bottom;
	background-image:
		linear-gradient(rgba(54, 235, 255, 0.25) 1px, transparent 1px),
		linear-gradient(90deg, rgba(54, 235, 255, 0.25) 1px, transparent 1px);
	background-size: 52px 42px;
	mask-image: linear-gradient(transparent, #000 28%);
	pointer-events: none;
}

.game-shell {
	position: relative;
	z-index: 4;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	width: 100%;
	height: 100%;
	min-height: 0;
	padding: max(12px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
	pointer-events: none;
}

.shell-header {
	display: grid;
	grid-template-columns: minmax(132px, 1fr) auto minmax(132px, 1fr);
	align-items: center;
	width: min(1500px, 100%);
	margin: 0 auto 8px;
}

.arcade-brand {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	width: clamp(108px, 10vw, 160px);
	opacity: 0.92;
	pointer-events: auto;
	transition: opacity 160ms ease, filter 160ms ease;
}

.arcade-brand:hover {
	opacity: 1;
	filter: drop-shadow(0 0 10px rgba(31, 252, 255, 0.7));
}

.arcade-brand img {
	display: block;
	width: 100%;
	height: auto;
	filter: brightness(0) invert(1);
}

.title-lockup {
	text-align: center;
	filter: drop-shadow(0 0 14px rgba(31, 252, 255, 0.35));
}

.title-kicker {
	display: block;
	margin-bottom: -1px;
	color: var(--cyan-bright);
	font: 800 clamp(7px, 0.62vw, 10px)/1 var(--display);
	letter-spacing: 0.31em;
}

.title-lockup h1 {
	margin: 0;
	color: #fff;
	font: 800 clamp(22px, 2.05vw, 35px)/1 var(--display);
	letter-spacing: 0.055em;
	text-shadow: 0 0 7px rgba(255, 255, 255, 0.7), 0 0 18px rgba(168, 105, 255, 0.9);
}

.title-lockup h1 span {
	color: var(--cyan);
	text-shadow: 0 0 9px rgba(31, 252, 255, 0.95), 0 0 24px rgba(31, 252, 255, 0.64);
}

.icon-button {
	display: grid;
	width: 84px;
	height: 84px;
	place-items: center;
	justify-self: end;
	border: 1px solid rgba(90, 246, 255, 0.46);
	border-radius: 20px;
	background: linear-gradient(145deg, rgba(20, 65, 88, 0.68), rgba(3, 17, 35, 0.86));
	box-shadow: inset 0 0 16px rgba(31, 252, 255, 0.08), 0 0 18px rgba(31, 252, 255, 0.08);
	color: var(--cyan-bright);
	cursor: pointer;
	pointer-events: auto;
}

.icon-button:hover,
.icon-button:focus-visible {
	border-color: var(--cyan);
	box-shadow: inset 0 0 18px rgba(31, 252, 255, 0.16), 0 0 22px rgba(31, 252, 255, 0.3);
	outline: none;
}

.icon-button svg {
	width: 42px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: square;
	stroke-linejoin: miter;
	stroke-width: 1.8;
}

.fullscreen-exit,
:fullscreen .fullscreen-enter {
	display: none;
}

:fullscreen .fullscreen-exit {
	display: block;
}

.play-layout {
	position: relative;
	display: grid;
	grid-template-columns: minmax(154px, 244px) minmax(280px, auto) minmax(154px, 244px);
	gap: clamp(12px, 2vw, 34px);
	align-items: center;
	justify-content: center;
	width: min(1480px, 100%);
	min-height: 0;
	margin: 0 auto;
}

.hud-column {
	display: grid;
	gap: clamp(12px, 2vh, 24px);
	align-content: center;
}

.hud-card {
	position: relative;
	overflow: hidden;
	padding: clamp(15px, 1.5vw, 22px);
	border: 1px solid var(--line);
	border-radius: 14px 3px 14px 3px;
	background:
		linear-gradient(145deg, rgba(39, 89, 112, 0.2), transparent 48%),
		var(--panel);
	box-shadow:
		inset 0 1px rgba(210, 255, 255, 0.13),
		inset 0 0 26px rgba(31, 252, 255, 0.045),
		0 14px 35px rgba(0, 5, 18, 0.28);
	backdrop-filter: blur(13px) saturate(125%);
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.hud-card::before,
.hud-card::after {
	position: absolute;
	content: "";
	pointer-events: none;
}

.hud-card::before {
	top: 0;
	left: 14px;
	width: 38%;
	height: 1px;
	background: var(--cyan);
	box-shadow: 0 0 9px var(--cyan);
}

.hud-card::after {
	right: -18px;
	bottom: -28px;
	width: 75px;
	height: 75px;
	border: 1px solid rgba(168, 105, 255, 0.13);
	transform: rotate(45deg);
}

.hud-label {
	color: var(--muted);
	font: 800 clamp(9px, 0.68vw, 11px)/1.15 var(--display);
	letter-spacing: 0.15em;
}

.hud-value-row {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 9px 0 6px;
}

.hud-value-row img {
	width: clamp(27px, 2.25vw, 38px);
	height: clamp(27px, 2.25vw, 38px);
	filter: drop-shadow(0 0 10px rgba(31, 252, 255, 0.55));
}

.hud-value {
	color: #fff;
	font: 800 clamp(26px, 2.3vw, 40px)/1 var(--display);
	letter-spacing: 0.02em;
	text-shadow: 0 0 13px rgba(31, 252, 255, 0.45);
}

.hud-note {
	color: rgba(143, 189, 202, 0.6);
	font-size: 9px;
	letter-spacing: 0.2em;
}

.run-meter {
	overflow: hidden;
	height: 3px;
	margin-top: 13px;
	background: rgba(131, 201, 214, 0.12);
}

.run-meter span {
	display: block;
	width: 0%;
	height: 100%;
	background: linear-gradient(90deg, var(--violet), var(--cyan));
	box-shadow: 0 0 10px var(--cyan);
	transition: width 300ms ease;
}

.hud-card--metric {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	min-height: 94px;
}

.metric-value {
	color: var(--cyan-bright);
	font: 800 clamp(24px, 2.35vw, 40px)/0.88 var(--display);
	text-shadow: 0 0 15px rgba(31, 252, 255, 0.52);
}

.metric-value--status {
	font-size: clamp(16px, 1.55vw, 25px);
	letter-spacing: 0.04em;
}

.score-disclosure {
	border-color: rgba(168, 105, 255, 0.36);
}

.score-value {
	display: block;
	margin: 9px 0;
	color: #e7d6ff;
	font: 800 clamp(22px, 2vw, 34px)/1 var(--display);
	letter-spacing: 0.08em;
	text-shadow: 0 0 14px rgba(168, 105, 255, 0.5);
}

.score-disclosure p {
	margin: 0;
	color: rgba(176, 206, 215, 0.68);
	font-size: clamp(9px, 0.72vw, 11px);
	line-height: 1.45;
}

.game-frame {
	position: relative;
	/* Reserve the complete header, footer, safe-area padding and frame chrome. */
	width: min(calc((100dvh - 160px) * 0.5625), 720px, 48vw);
	min-width: 280px;
	padding: 6px;
	border: 1px solid rgba(99, 247, 255, 0.5);
	border-radius: 20px 5px 20px 5px;
	background: linear-gradient(145deg, rgba(108, 247, 255, 0.16), rgba(5, 18, 39, 0.88) 16%, rgba(5, 13, 30, 0.94) 82%, rgba(168, 105, 255, 0.18));
	box-shadow:
		0 0 0 1px rgba(0, 7, 18, 0.9),
		0 0 22px rgba(31, 252, 255, 0.24),
		0 0 72px rgba(113, 68, 255, 0.16),
		0 24px 56px rgba(0, 5, 17, 0.66);
	pointer-events: auto;
}

.frame-glow {
	position: absolute;
	z-index: -1;
	inset: -12px;
	border: 1px solid rgba(31, 252, 255, 0.13);
	border-radius: 26px 8px 26px 8px;
	pointer-events: none;
	animation: frame-breathe 3.8s ease-in-out infinite alternate;
}

.effects-layer {
	position: fixed;
	z-index: 120;
	inset: 0;
	overflow: visible;
	pointer-events: none;
}

.game-viewport {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 9 / 16;
	border: 1px solid rgba(173, 255, 255, 0.22);
	border-radius: 14px 2px 14px 2px;
	background: #020913;
	isolation: isolate;
	touch-action: none;
}

#pakg-game {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	background: #020913;
	touch-action: none;
}

.frame-caption {
	display: flex;
	gap: 9px;
	align-items: center;
	justify-content: center;
	height: 22px;
	color: rgba(128, 232, 243, 0.46);
	font: 800 7px/1 var(--display);
	letter-spacing: 0.22em;
}

.frame-caption i {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--lime);
	box-shadow: 0 0 6px var(--lime);
}

.shell-footer {
	display: flex;
	gap: 22px;
	align-items: center;
	justify-content: center;
	width: min(1100px, 100%);
	min-height: 24px;
	margin: 7px auto 0;
}

.system-status {
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
	align-items: center;
	padding: 7px 11px;
	border: 1px solid rgba(184, 255, 67, 0.21);
	border-radius: 99px;
	background: rgba(1, 15, 29, 0.7);
	color: #caff7c;
	font: 800 9px/1 var(--display);
	letter-spacing: 0.1em;
}

.status-light {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--lime);
	box-shadow: 0 0 9px var(--lime);
}

.system-status[data-state="playing"] {
	color: var(--cyan-bright);
	border-color: rgba(31, 252, 255, 0.3);
}

.system-status[data-state="playing"] .status-light {
	background: var(--cyan);
	box-shadow: 0 0 9px var(--cyan);
}

.system-status[data-state="paused"] {
	color: #ffe687;
	border-color: rgba(255, 218, 79, 0.28);
}

.system-status[data-state="paused"] .status-light {
	background: #ffd84f;
	box-shadow: 0 0 9px #ffd84f;
}

.fair-play-note {
	margin: 0;
	color: rgba(167, 203, 214, 0.58);
	font-size: 9px;
	line-height: 1.35;
}

.fair-play-note span {
	color: rgba(138, 244, 255, 0.76);
	font-weight: 800;
	letter-spacing: 0.1em;
}

.hud-card.is-awarded {
	animation: hud-award 380ms ease-out;
}

#pakg-total-token.is-rewarded {
	animation: token-reward 420ms cubic-bezier(.2, .8, .25, 1);
}

.reward-shockwave {
	position: absolute;
	width: 22px;
	height: 22px;
	border: 2px solid rgba(255, 226, 74, 0.78);
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0.4);
	box-shadow: 0 0 10px rgba(255, 215, 50, 0.72), inset 0 0 8px rgba(31, 252, 255, 0.4);
	animation: reward-shock 280ms ease-out forwards;
}

.reward-burst-label {
	position: absolute;
	z-index: 4;
	transform: translate(-50%, -50%);
	color: #fff3a6;
	font: 800 clamp(13px, 2.5vw, 20px)/1 var(--display);
	letter-spacing: 0.06em;
	text-shadow: 0 0 7px rgba(255, 218, 66, 0.92), 0 0 16px rgba(31, 252, 255, 0.5);
	white-space: nowrap;
	animation: reward-label 440ms cubic-bezier(.18, .72, .24, 1) forwards;
}

.reward-coin {
	position: absolute;
	z-index: 3;
	width: clamp(34px, 4vw, 52px);
	height: clamp(34px, 4vw, 52px);
	transform: translate(-50%, -50%);
	object-fit: contain;
	filter: drop-shadow(0 0 5px #fff1a2) drop-shadow(0 0 12px rgba(255, 204, 25, 0.84));
	will-change: transform, opacity;
}

.reward-coin.is-css-flight {
	animation: reward-flight var(--flight-duration, 420ms) cubic-bezier(.18, .72, .24, 1) var(--flight-delay, 0ms) forwards;
}

@keyframes frame-breathe {
	to { border-color: rgba(31, 252, 255, 0.28); box-shadow: 0 0 26px rgba(31, 252, 255, 0.12); }
}

@keyframes reward-shock {
	55% { opacity: 0.56; }
	to { opacity: 0; transform: translate(-50%, -50%) scale(3.4); }
}

@keyframes reward-label {
	0% { opacity: 0; transform: translate(-50%, -30%) scale(0.88); }
	16% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
	66% { opacity: 0.94; transform: translate(-50%, -78%) scale(0.98); }
	100% { opacity: 0; transform: translate(-50%, -120%) scale(0.92); }
}

@keyframes reward-flight {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(0.66) rotate(-10deg); }
	10% { opacity: 1; }
	82% { opacity: 0.96; }
	100% { opacity: 0; transform: translate(calc(-50% + var(--flight-x)), calc(-50% + var(--flight-y))) scale(0.46) rotate(16deg); }
}

@keyframes token-reward {
	42% { transform: scale(1.28); filter: drop-shadow(0 0 8px #fff3aa) drop-shadow(0 0 18px #ffd329); }
}

@keyframes hud-award {
	35% {
		border-color: rgba(31, 252, 255, 0.74);
		box-shadow: inset 0 0 18px rgba(31, 252, 255, 0.1), 0 0 14px rgba(31, 252, 255, 0.2);
	}
}

@media (max-width: 1020px) {
	.play-layout {
		grid-template-columns: minmax(128px, 180px) minmax(280px, auto) minmax(128px, 180px);
		gap: 12px;
	}

	.game-frame {
		width: min(calc((100dvh - 160px) * 0.5625), 54vw);
	}

	.hud-card {
		padding: 13px;
	}

	.hud-card--metric {
		display: block;
		min-height: 0;
	}

	.metric-value {
		display: block;
		margin-top: 8px;
	}
}

@media (max-width: 720px) {
	body {
		background-image:
			linear-gradient(180deg, rgba(3, 19, 36, 0.22), rgba(1, 8, 18, 0.72)),
			url("assets/art/cyber-city-arena-mobile.webp");
		background-position: center bottom;
	}

	.game-shell {
		padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
	}

	.shell-header {
		grid-template-columns: 76px 1fr 74px;
		margin-bottom: 4px;
	}

	.arcade-brand {
		width: 74px;
	}

	.title-kicker {
		display: none;
	}

	.title-lockup h1 {
		font-size: clamp(16px, 5vw, 24px);
	}

	.icon-button {
		width: 72px;
		height: 72px;
		border-radius: 18px;
	}

	.icon-button svg {
		width: 36px;
	}

	.play-layout {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(0, 1fr) auto;
		gap: 4px;
		place-items: center;
		width: 100%;
		min-height: 0;
	}

	.game-frame {
		grid-row: 2;
		width: min(calc((100dvh - 224px) * 0.5625), calc(100vw - 34px));
		min-width: 0;
		padding: 4px;
		border-radius: 15px 4px;
	}

	.frame-caption {
		height: 14px;
		font-size: 6px;
	}

	.hud-column {
		position: static;
		display: grid;
		width: min(100%, 390px);
		transform: none;
		pointer-events: none;
	}

	.hud-column--left {
		grid-row: 1;
		grid-template-columns: 1fr 1fr;
		gap: 5px;
	}

	.hud-column--right {
		grid-row: 3;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 5px;
	}

	.hud-card {
		min-height: 0;
		padding: 7px 9px;
		border-radius: 9px 2px;
		background: rgba(3, 20, 37, 0.82);
		backdrop-filter: blur(9px);
	}

	.hud-label {
		font-size: 6px;
		letter-spacing: 0.1em;
	}

	.hud-value-row {
		gap: 5px;
		margin: 4px 0 0;
	}

	.hud-value-row img {
		width: 18px;
		height: 18px;
	}

	.reward-coin {
		width: 38px;
		height: 38px;
	}

	.hud-value,
	.metric-value,
	.score-value {
		font-size: clamp(15px, 4.8vw, 21px);
	}

	.metric-value {
		display: block;
		margin-top: 5px;
	}

	.metric-value--status {
		font-size: clamp(9px, 2.8vw, 13px);
	}

	.score-value {
		margin: 5px 0 0;
		letter-spacing: 0.03em;
	}

	.hud-note,
	.run-meter,
	.score-disclosure p {
		display: none;
	}

	.shell-footer {
		gap: 7px;
		min-height: 25px;
		margin-top: 3px;
	}

	.system-status {
		padding: 6px 8px;
		font-size: 7px;
	}

	.fair-play-note {
		display: none;
	}
}

@media (max-height: 600px) and (orientation: landscape) {
	.game-shell {
		--landscape-game-width: min(calc((100vh - 22px) * 0.5625), 42vw);
		display: block;
		padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
	}

	.shell-header {
		position: fixed;
		z-index: 30;
		top: max(4px, env(safe-area-inset-top));
		right: max(4px, env(safe-area-inset-right));
		left: auto;
		display: block;
		width: 64px;
		height: 64px;
		margin: 0;
	}

	.arcade-brand,
	.title-lockup {
		display: none;
	}

	.icon-button {
		width: 64px;
		height: 64px;
		border-radius: 16px;
	}

	.icon-button svg {
		width: 32px;
	}

	.play-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--landscape-game-width) minmax(0, 1fr);
		grid-template-rows: 1fr;
		gap: clamp(4px, 1.4vw, 12px);
		align-items: center;
		width: 100%;
		height: 100%;
	}

	.game-frame {
		grid-row: 1;
		grid-column: 2;
		width: var(--landscape-game-width);
		padding: 3px;
	}

	.hud-column {
		position: static;
		display: grid;
		width: min(100%, 220px);
		transform: none;
	}

	.hud-column--left {
		grid-row: 1;
		grid-column: 1;
		grid-template-columns: 1fr;
		justify-self: end;
	}

	.hud-column--right {
		grid-row: 1;
		grid-column: 3;
		grid-template-columns: 1fr;
		justify-self: start;
	}

	.hud-card {
		padding: 6px 7px;
	}

	.shell-footer {
		position: fixed;
		z-index: 30;
		bottom: max(4px, env(safe-area-inset-bottom));
		left: max(4px, env(safe-area-inset-left));
		display: flex;
		justify-content: flex-start;
		width: min(calc((100vw - var(--landscape-game-width)) / 2 - 12px), 220px);
		min-height: 0;
		margin: 0;
	}

	.shell-footer .fair-play-note {
		display: none;
	}

	.frame-caption {
		height: 10px;
		font-size: 5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}
}