/* Ensure game root is always visible */
#app, .hud, .gameLayout {
	min-width: 600px;
	min-height: 400px;
	width: 100%;
	height: auto;
	display: block;
}
.gameCanvas {
	/* Render at native pixel size when possible to avoid blur from CSS upscaling. */
	width: auto;
	max-width: 100%;
	background: #222;
	border: 2px solid #a88;
	box-sizing: border-box;
}
/* Next Map button */
.btnNextMap {
	background: #222;
	color: #ffe066;
	border: 1px solid #444;
	border-radius: 4px;
	padding: 2px 10px;
	margin: 0 2px;
	font-size: 1em;
	cursor: pointer;
	transition: background 0.15s;
}
.btnNextMap:disabled {
	background: #333;
	color: #888;
	cursor: not-allowed;
}
.btnNextMap:hover:not(:disabled) {
	background: #333;
}
/* Coin-to-XP and +1 Level buttons (XP bar) */
.btnCoinsToXp, .btnPlusOneLevel {
	background: #222;
	color: #ffe066;
	border: 1px solid #444;
	border-radius: 4px;
	padding: 2px 8px;
	margin: 0 2px;
	font-size: 1em;
	cursor: pointer;
	transition: background 0.15s;
}
.btnCoinsToXp:hover, .btnPlusOneLevel:hover {
	background: #333;
}
.plusOneLevelCost {
	margin-left: 4px;
	color: #bfa;
	font-size: 0.95em;
}
:root {
	color-scheme: light;
	--ui-font: 'RuneScape UF', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	--bg: #ffffff;
	--fg: rgba(0, 0, 0, 0.88);
	--muted: rgba(0, 0, 0, 0.62);
	--panel: rgba(255, 255, 255, 0.92);
	--border: rgba(0, 0, 0, 0.14);
	--accent: rgba(70, 120, 200, 0.95);
	--accent-contrast: #ffffff;
	--gold: rgba(185, 140, 25, 0.98);
	--success: rgba(70, 140, 70, 0.92);
	--danger: rgba(170, 60, 60, 0.92);
	--info: rgba(85, 160, 230, 0.92);
}

@font-face {
	font-family: 'RuneScape UF';
	src: local('RuneScape UF');
	font-display: swap;
}

body[data-theme="dark"] {
	color-scheme: dark;
	--bg: #0e1116;
	--fg: rgba(255, 255, 255, 0.90);
	--muted: rgba(255, 255, 255, 0.66);
	--panel: rgba(20, 24, 33, 0.90);
	--border: rgba(255, 255, 255, 0.14);
	--accent: rgba(120, 170, 255, 0.95);
	--accent-contrast: #0b0e10;
	--gold: rgba(235, 200, 90, 0.98);
	--success: rgba(90, 175, 90, 0.92);
	--danger: rgba(210, 85, 85, 0.92);
	--info: rgba(120, 185, 255, 0.92);
}

html, body {
	height: 100%;
}

*, *::before, *::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 16px;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	line-height: 1.4;
	background: radial-gradient(1200px 600px at 20% 0%, rgba(70, 120, 200, 0.08), transparent 60%),
		linear-gradient(var(--bg), var(--bg));
	color: var(--fg);
}

#app {
	max-width: 1200px;
	margin: 0 auto;
}

.gameLayout {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 12px;
	align-items: start;
}

.leftCol {
	display: grid;
	gap: 12px;
}

.belowGame {
	display: grid;
	gap: 10px;
}

.belowRow {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.startWaveWrap {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.autoStartInline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.04);
	color: var(--muted);
	font-weight: 800;
	user-select: none;
}

body[data-theme="dark"] .autoStartInline {
	background: rgba(255, 255, 255, 0.06);
}

.autoStartCb {
	width: 16px;
	height: 16px;
}

.saveNameInput {
	flex: 1;
	min-width: 0;
	padding: 6px 8px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--panel);
	color: var(--fg);
}

.savesList {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.resourceBar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.statPill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: rgba(0, 0, 0, 0.04);
	font-weight: 900;
	letter-spacing: 0.2px;
}

body[data-theme="dark"] .statPill {
	background: rgba(255, 255, 255, 0.06);
}

.statPill svg {
	flex: 0 0 auto;
	color: var(--stat-icon, var(--accent));
}

.statLabel {
	font-weight: 800;
	color: var(--muted);
}

.statValue {
	color: var(--gold);
}

.statPill--coins {
	--stat-icon: var(--gold);
	background: color-mix(in srgb, var(--gold) 14%, transparent);
	border-color: color-mix(in srgb, var(--gold) 40%, var(--border));
}

.statPill--tokens {
	--stat-icon: var(--accent);
	background: color-mix(in srgb, var(--accent) 14%, transparent);
	border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.statPill--towers {
	--stat-icon: var(--muted);
}

.statPill--next {
	--stat-icon: var(--accent);
	background: color-mix(in srgb, var(--info) 14%, transparent);
	border-color: color-mix(in srgb, var(--info) 40%, var(--border));
}

.panelHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.coinsInline {
	font-weight: 900;
	letter-spacing: 0.2px;
}

.sidebar {
	display: grid;
	gap: 10px;
}

.gameCanvas {
	width: 100%;
	height: auto;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.02);
}

.hud {
	display: grid;
	gap: 12px;
	align-items: start;
	font-family: var(--ui-font);
}

.hudTopBar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.hudTopLeft {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.playerLevel {
	font-weight: 900;
	letter-spacing: 0.2px;
	color: var(--fg);
	white-space: nowrap;
}

.xpBar {
	width: 240px;
	max-width: min(42vw, 320px);
	height: 12px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: color-mix(in srgb, var(--accent) 12%, var(--panel));
	overflow: hidden;
}

.xpBar__fill {
	height: 100%;
	width: 0%;
	background: var(--accent);
	transition: width 120ms linear;
}

/* Legacy row container is no longer used, but keep it harmless */
.hud__row {
	display: none;
}

.hudTopRow {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.settingsBtn {
	position: static;
	padding: 8px 10px;
	border-radius: 10px;
	line-height: 1;
	z-index: 40;
	background: linear-gradient(var(--bg), var(--bg));
	background-color: var(--bg);
}

.fullscreenBtn {
	padding: 8px 10px;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: linear-gradient(var(--bg), var(--bg));
	color: var(--fg);
	font-weight: 800;
	cursor: pointer;
}

.fullscreenBtn:hover {
	background: color-mix(in srgb, var(--bg) 70%, var(--accent) 30%);
}

body.isFullscreen {
	padding: 0;
}

body.isFullscreen #app {
	max-width: none;
	margin: 0;
}

.panel.settingsPanel {
	position: fixed;
	top: 52px;
	left: auto;
	right: 16px;
	width: 260px;
	max-width: calc(100vw - 32px);
	display: grid;
	gap: 10px;
	justify-items: stretch;
	z-index: 39;
	background: var(--panel);
	backdrop-filter: none;
	overflow: hidden;
}

.panel.settingsPanel[hidden] {
	display: none;
}

.settingsCloseBtn {
	padding: 6px 10px;
	border-radius: 10px;
	line-height: 1;
	font-size: 18px;
}

.settingRow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.settingRow input[type="checkbox"] {
	width: 16px;
	height: 16px;
}

.volumeSlider {
	width: 140px;
	max-width: 100%;
}

.towerPopup {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 280px;
	max-width: calc(100% - 20px);
	z-index: 20;
}

.logPre {
	max-height: 160px;
}

.playerInfo {
	max-height: 120px;
}

.playerArmorRow {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.playerArmorLabel {
	color: var(--muted);
	font-weight: 800;
}

.playerArmorSlots {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.playerArmorSlot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: rgba(0, 0, 0, 0.04);
}

body[data-theme="dark"] .playerArmorSlot {
	background: rgba(255, 255, 255, 0.06);
}

.playerArmorSlot--empty {
	color: var(--muted);
	font-weight: 900;
	user-select: none;
}

.equipIcon {
	width: 24px;
	height: 24px;
	border: 0;
	border-radius: 0;
	background: transparent;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

.helpfulGuide {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.helpfulGuide[hidden] {
	display: none;
}

.helpfulGuideText {
	min-width: 0;
}

.helpfulGuideClose {
	padding: 6px 10px;
	border-radius: 10px;
	line-height: 1;
	font-size: 18px;
}

.upgradeTree {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scroll-padding: 14px;
	scroll-behavior: smooth;
}

.upgradeCol {
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 10px;
	background: rgba(0, 0, 0, 0.02);
	flex: 0 0 280px;
	scroll-snap-align: center;
}

body[data-theme="dark"] .upgradeCol {
	background: rgba(255, 255, 255, 0.04);
}

/* Upgrade-specific tints (use theme tokens only) */
.upgradeCol--kind-health {
	background: color-mix(in srgb, var(--success) 18%, var(--panel));
	border-color: color-mix(in srgb, var(--success) 40%, var(--border));
}

.upgradeCol--kind-damage {
	background: color-mix(in srgb, var(--danger) 18%, var(--panel));
	border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
}

.upgradeCol--kind-range {
	background: color-mix(in srgb, var(--info) 18%, var(--panel));
	border-color: color-mix(in srgb, var(--info) 40%, var(--border));
}

.upgradeCol--kind-speed {
	background: color-mix(in srgb, var(--accent) 18%, var(--panel));
	border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.upgradeCol--kind-economy {
	background: color-mix(in srgb, var(--gold) 16%, var(--panel));
	border-color: color-mix(in srgb, var(--gold) 40%, var(--border));
}

.upgradeCol--kind-defense {
	background: color-mix(in srgb, var(--muted) 14%, var(--panel));
	border-color: color-mix(in srgb, var(--muted) 50%, var(--border));
}

.upgradeColTitle {
	font-weight: 900;
}

.upgradeColDesc {
	color: var(--muted);
	font-size: 12px;
	margin-bottom: 8px;
}

.upgradeNodes {
	display: grid;
	gap: 8px;
}

.upgradeNode {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: var(--panel);
}

.upgradeNode--locked {
	opacity: 0.55;
}

.upgradeNode--bought {
	opacity: 0.9;
}

.upgradeNodeLabel {
	min-width: 0;
}

.upgradeNodeName {
	font-weight: 900;
}

.upgradeNodeMeta {
	color: var(--muted);
	font-size: 12px;
}

.coinsBadge {
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: rgba(0, 0, 0, 0.04);
	font-weight: 800;
	letter-spacing: 0.2px;
}

body[data-theme="dark"] .coinsBadge {
	background: rgba(255, 255, 255, 0.06);
}

.panel {
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 10px;
	flex: 1;
	min-width: 0;
	background: var(--panel);
	backdrop-filter: blur(6px);
}

.panel > div[style*="font-weight"] {
	letter-spacing: 0.2px;
}

.tabBar {
	display: flex;
	gap: 8px;
	align-items: center;
}

.shopPageTabs {
	margin: 6px 0 10px;
	flex-wrap: wrap;
}

.tabBtn {
	padding: 8px 10px;
	border-radius: 999px;
	line-height: 1;
}

.tabBtn--active {
	border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
	background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.itemRow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid var(--border);
}

.itemRow:last-child {
	border-bottom: none;
}

.itemRow--locked {
	opacity: 0.92;
}

.itemLeft {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.itemIcon {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: rgba(0, 0, 0, 0.03);
}

body[data-theme="dark"] .itemIcon {
	background: rgba(255, 255, 255, 0.05);
}

.itemLabel {
	min-width: 0;
}

.itemName {
	font-weight: 800;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.itemRow--inventory .itemName {
	white-space: normal;
	overflow: visible;
	text-overflow: initial;
}

.itemRow--stackActions {
	flex-wrap: wrap;
	align-items: flex-start;
}

.itemRow--stackActions .itemRight {
	margin-left: auto;
	flex-basis: 100%;
	justify-content: flex-end;
}

.itemMeta {
	color: var(--muted);
	font-size: 12px;
}

.itemRight {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.badge {
	padding: 4px 8px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: rgba(0, 0, 0, 0.04);
	font-weight: 800;
}

.badge--icon {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--gold);
}

.badge--icon svg {
	flex: 0 0 auto;
	color: var(--stat-icon, var(--accent));
}

.badge--coins {
	--stat-icon: var(--gold);
}

.badge--tokens {
	--stat-icon: var(--accent);
}

.badge--cost {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.badge--cost::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--accent);
	opacity: 0.9;
}

body[data-theme="dark"] .badge {
	background: rgba(255, 255, 255, 0.06);
}

/**
 * Ensures equipped weapon icons are rendered pixelated for crisp retro look.
 * Apply this class to <img> elements showing equipped weapon icons.
 */
.weapon-icon {
	image-rendering: pixelated;
	image-rendering: crisp-edges; /* fallback for some browsers */
}

@media (max-width: 980px) {
	.gameLayout {
		grid-template-columns: 1fr;
	}
}

.panel pre {
	font-family: var(--ui-font);
}

.muted {
	color: var(--muted);
}

button {
	appearance: none;
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.06);
	color: var(--fg);
	border-radius: 10px;
	padding: 10px 12px;
	font-weight: 700;
	cursor: pointer;
}

.btnBuy {
	background: color-mix(in srgb, var(--success) 22%, transparent);
	border-color: color-mix(in srgb, var(--success) 60%, var(--border));
}

.btnBuy:hover {
	border-color: color-mix(in srgb, var(--success) 85%, var(--border));
}

.btnSell {
	background: color-mix(in srgb, var(--danger) 22%, transparent);
	border-color: color-mix(in srgb, var(--danger) 60%, var(--border));
}

.btnSell:hover {
	border-color: color-mix(in srgb, var(--danger) 85%, var(--border));
}

.btnStartWave {
	background: color-mix(in srgb, var(--info) 24%, transparent);
	border-color: color-mix(in srgb, var(--info) 60%, var(--border));
}

.btnStartWave:hover {
	border-color: color-mix(in srgb, var(--info) 85%, var(--border));
}

button:hover {
	border-color: rgba(120, 170, 255, 0.45);
}

button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.upgrade-buy-btn {
	cursor: pointer;
}

.upgrade-buy-btn:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

pre {
	margin: 0;
	overflow: auto;
	white-space: pre-wrap;
	word-break: break-word;
}