/* Nordic/Scandinavian-inspired UI: calm neutrals, one warm accent, soft translucency,
   generous spacing, restrained typography. Resource colors below MUST match the
   zone colors painted onto the planet terrain in planet.js (RESOURCE_COLORS). */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
	--bg: #0b0e12;
	--panel: rgba(23, 28, 34, 0.86);
	--panel-solid: #171c22;
	--border: rgba(255, 255, 255, 0.09);
	--border-strong: rgba(255, 255, 255, 0.16);
	--text: #eef2f5;
	--text-muted: #8d99a6;
	--text-faint: #5f6b77;
	--accent: #d3a24c;
	--accent-strong: #e6b969;
	--accent-text: #1a1409;
	--danger: #d9776e;
	--good: #7fc99b;
	--materials: #a7b0b8;
	--gold: #dbad3d;
	--oil: #4a3a2e;
	--player: #5b8fd9;
	--cpu: #d9645b;
	--radius: 10px;
	--radius-sm: 6px;
}

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: var(--bg);
	overflow: hidden;
	font-family: 'Inter', 'Segoe UI', system-ui, Arial, sans-serif;
	color: var(--text);
	user-select: none;
	-webkit-font-smoothing: antialiased;
	/* Belt-and-suspenders against mobile browser chrome eating touch gestures the game
	   wants for itself (pinch-zoom, double-tap-zoom, pull-to-refresh, rubber-band scroll) -
	   the viewport meta tag and the touchstart/touchmove JS guards in main.js cover the
	   same ground for browsers that ignore one or the other. */
	touch-action: none;
	overscroll-behavior: none;
	-webkit-user-select: none;
	/* Long-press on iOS otherwise pops up a "copy/share/lookup" callout menu over game UI -
	   reads exactly like an unwanted system prompt interrupting gameplay taps. */
	-webkit-touch-callout: none;
}

#gfx, #hud {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	touch-action: none;
}

#hud {
	pointer-events: none;
}

.hidden {
	display: none !important;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 50;
	/* the overlay wrapper spans the full screen just to center .panel - it must not swallow
	   mouse/wheel input meant for the canvas beneath (camera rotate/zoom on the pre-match screen) */
	pointer-events: none;
}

.overlay.dim {
	background: rgba(6, 8, 10, 0.6);
}

.overlay .panel {
	pointer-events: auto;
}

.panel {
	background: var(--panel);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 32px 40px;
	max-width: 480px;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

/* Left-docked sliding panel: ONE shared shell (#planetGenScreen) serving both the pre-match
   Start Menu and the in-game "New Game" menu - identical open/close/drag/size/tab behavior,
   only its content state changes (see main.js's syncMenuGameState). Docked to the left edge
   (not a centered dimmed overlay like the other .overlay screens) so whatever is behind it
   (the generated planet pre-match, or the paused game world in-match) stays visible - see
   js/main.js's camera drag/zoom, which still works underneath since only the inner .genPanel
   card (not this wrapper) captures pointer events. Slides fully off-screen to the left via
   .slideOut/.collapsed instead of just snapping hidden (see ui.js's enterMatch and the menu
   tab wiring in main.js). */
.startPanel {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 380px;
	max-width: 92vw;
	z-index: 50;
	pointer-events: none;
	transform: translateX(0);
	transition: transform 0.45s ease;
}

.startPanel.slideOut,
.startPanel.collapsed {
	transform: translateX(-100%);
}

.startPanel.dragging {
	transition: none;
}

.startGenTab {
	left: min(380px, 92vw);
	top: 64px;
	border-radius: 0 8px 8px 0;
	border-left: none;
	border-right: 1px solid var(--border-strong);
	transition: left 0.2s ease, color 0.15s ease, background 0.15s ease;
	z-index: 52;
}

.startGenTab.collapsed-tab {
	left: 4px;
	border-radius: 8px;
	border-left: 1px solid var(--border-strong);
}

.startPanel .genPanel {
	pointer-events: auto;
	height: 100%;
	width: 100%;
	max-width: none;
	text-align: left;
	border-radius: 0 16px 16px 0;
	padding: 28px 26px;
	box-sizing: border-box;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	/* The browser owns VERTICAL panning (native panel scrolling); horizontal gestures reach
	   the JS slide-to-close drag with its own direction locking (see main.js). Without this,
	   the html/body touch-action:none chain could swallow panel scrolling on some browsers. */
	touch-action: pan-y;
}

/* "New Game" section title shown only while a match is running - the same shared panel
   flips between its Start Menu and New Game states (see main.js's syncMenuGameState). */
.newGameTitle {
	margin: 14px 0 0;
	color: var(--accent-strong);
	letter-spacing: 0.1em;
}

.startPanel .genButtons {
	justify-content: flex-start;
}

.eyebrow {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: 10px;
	font-weight: 600;
}

.panel h1 {
	margin: 0 0 6px 0;
	color: var(--text);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

#planetName {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	width: 100%;
}

#planetNameText {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.regenHelperText {
	margin-left: auto;
	color: var(--text-faint);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	flex: none;
}

.regenPlanetBtn {
	width: 28px;
	height: 28px;
	flex: none;
}

.panel h1.victory { color: var(--good); }
.panel h1.defeat { color: var(--danger); }

.panel p {
	color: var(--text-muted);
	line-height: 1.5;
	font-size: 14px;
}

.genSub {
	color: var(--text-faint);
	font-size: 12px;
	margin-bottom: 22px;
	letter-spacing: 0.04em;
}

.genButtons {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 8px;
}

.genSliders {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 16px;
	text-align: left;
}

.sliderRow label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 12px;
	color: var(--text-muted);
	margin-bottom: 5px;
}

.sliderVal {
	color: var(--accent-strong);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.sliderRow input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	pointer-events: auto;
	cursor: pointer;
}

.sliderRow input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--accent);
	border: 2px solid var(--accent-strong);
	cursor: pointer;
	margin-top: -6px;
}

.sliderRow input[type="range"]::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--accent);
	border: 2px solid var(--accent-strong);
	cursor: pointer;
}

.sliderRow input[type="range"]::-moz-range-track {
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
}

/* Compact, easy-to-extend box for match/gameplay toggles - future settings just add another
   .settingRow inside this same box, no new structure needed. */
.genSettings {
	margin-top: 16px;
	text-align: left;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
}

.genSettings .menuTitle {
	margin-bottom: 8px;
}

.settingRow {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--text);
	cursor: pointer;
	pointer-events: auto;
}

/* Breathing room between stacked toggle rows - these used to sit flush against each other,
   reading as cramped and making the individual rows harder to read/tap accurately. */
.settingRow + .settingRow {
	margin-top: 12px;
}

/* A settingRow that isn't a single checkbox+label (e.g. the fog-of-war 3-state control below)
   stacks its label above its control instead of the usual single horizontal line, and isn't
   itself a click target (the segmentedControl buttons inside are). */
.settingRowStack {
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	cursor: default;
}

/* Segmented control (Normal / Stays open after seen / Off) - a grouped row of buttons that
   reads as one control with a single active state, same visual language as the rest of the
   UI's flat bordered buttons rather than a native <select> or radio group. */
.segmentedControl {
	display: flex;
	width: 100%;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.segmentedControl button {
	flex: 1;
	border: none;
	border-radius: 0;
	background: transparent;
	font-size: 11px;
	padding: 7px 6px;
	color: var(--text-muted);
}

.segmentedControl button + button {
	border-left: 1px solid var(--border);
}

.segmentedControl button.active {
	background: var(--accent);
	color: var(--accent-text);
	font-weight: 700;
}

/* Fully custom checkbox (not just accent-color on the native control) so it actually matches
   the rest of the UI's flat, rounded, bordered look instead of whatever shape/style each
   browser's own native checkbox happens to render - generic on [type=checkbox] so any future
   Settings toggle gets this for free without repeating the rule. */
input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 17px;
	height: 17px;
	margin: 0;
	flex: none;
	border-radius: 4px;
	border: 1.5px solid var(--border-strong);
	background: rgba(255, 255, 255, 0.04);
	cursor: pointer;
	pointer-events: auto;
	position: relative;
	transition: background 0.12s ease, border-color 0.12s ease;
}

input[type="checkbox"]:hover:not(:disabled) {
	border-color: rgba(255, 255, 255, 0.32);
}

input[type="checkbox"]:checked {
	background: var(--accent);
	border-color: var(--accent-strong);
}

input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid var(--accent-text);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--accent-strong);
	outline-offset: 2px;
}

.genHint {
	margin-top: 18px;
	font-size: 12px;
	color: var(--text-faint);
}

#loadingOverlay {
	z-index: 90;
	pointer-events: auto;
	background: rgba(6, 8, 10, 0.6);
}

/* Reusable modal shell (see ui.js's showModal/hideModal) - unlike the pre-match screen's own
   click-through overlay (camera rotation needs to reach the canvas behind it), a modal blocks
   interaction with everything underneath while it's open, same spirit as #loadingOverlay. */
#modalOverlay {
	z-index: 95;
	pointer-events: auto;
	background: rgba(6, 8, 10, 0.65);
}

.modalPanel {
	min-width: 320px;
	max-width: 420px;
}

.textInput {
	width: 100%;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-family: inherit;
	font-size: 14px;
	padding: 10px 12px;
	pointer-events: auto;
	margin-top: 6px;
}

.textInput:focus {
	outline: none;
	border-color: var(--accent);
}

.loadingPanel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.loadingPanel h1 {
	font-size: 16px;
	margin: 0;
}

.spinner {
	width: 32px;
	height: 32px;
	border: 3px solid rgba(255, 255, 255, 0.15);
	border-top-color: var(--accent-strong);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

button {
	font-family: inherit;
	background: rgba(255, 255, 255, 0.05);
	color: var(--text);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	pointer-events: auto;
	transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}

button:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.10);
	border-color: rgba(255, 255, 255, 0.28);
}

button.primary {
	background: var(--accent);
	border-color: var(--accent-strong);
	color: var(--accent-text);
	font-weight: 600;
}

button.primary:hover:not(:disabled) {
	background: var(--accent-strong);
}

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

#gameUI {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 10;
}

#topBar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 46px;
	background: var(--panel);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	padding: 0 18px;
	gap: 22px;
	pointer-events: auto;
}

#resourceBar {
	display: flex;
	align-items: center;
	gap: 22px;
}

.resource {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

#headerRight {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 22px;
}

/* On tablet in landscape (coarse pointer, wide-but-not-desktop viewport) the resource bar
   used to sit flush against the left edge, reading lopsided in a wide, mostly-empty header -
   centering it reads more balanced. #headerRight is pulled out of #topBar's normal flex flow
   via its own absolute positioning here specifically so centering #resourceBar can never
   overlap it, the planet label, or the fullscreen button - it's simply not part of the flex
   distribution #topBar centers. Desktop and phone layouts are untouched (this block only
   matches the tablet-landscape range). */
@media (pointer: coarse) and (orientation: landscape) and (min-width: 700px) and (max-width: 1366px) {
	#topBar {
		justify-content: center;
	}
	#headerRight {
		position: absolute;
		right: 18px;
		top: 0;
		bottom: 0;
		margin-left: 0;
	}
}

.icon {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	display: inline-block;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.matIcon { background: var(--materials); }
.goldIcon { background: var(--gold); }
.oilIcon { background: var(--oil); }

#planetLabel {
	color: var(--text-faint);
	font-size: 12px;
	letter-spacing: 0.03em;
	display: flex;
	align-items: center;
	gap: 6px;
}

.planetIcon {
	width: 14px;
	height: 14px;
	flex: none;
	color: var(--text-faint);
}

#planetName .planetIcon {
	width: 22px;
	height: 22px;
	color: var(--accent);
	vertical-align: -4px;
	margin-right: 4px;
}

.iconBtn {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	color: var(--text-muted);
}

.iconBtn:hover:not(:disabled) {
	color: var(--text);
}

.iconBtn svg {
	width: 16px;
	height: 16px;
}

#hoverHelper {
	position: absolute;
	z-index: 40;
	background: var(--panel);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 8px 11px;
	font-size: 12px;
	max-width: 220px;
	pointer-events: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.hoverTitle {
	font-weight: 600;
	color: var(--text);
	margin-bottom: 2px;
}

.hoverLine {
	color: var(--text-muted);
	font-size: 11px;
	line-height: 1.4;
}

#selectionPanel {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 360px;
	min-height: 120px;
	max-height: 46vh;
	overflow-y: auto;
	background: var(--panel);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: 1px solid var(--border);
	border-right: 1px solid var(--border);
	border-top-right-radius: var(--radius);
	padding: 14px 16px;
	pointer-events: auto;
	font-size: 13px;
}

#selHeader {
	font-weight: 600;
	color: var(--text);
	margin-bottom: 10px;
	font-size: 13px;
}

#selBody {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.actionRow {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.selUnitChip {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 5px 9px;
	font-size: 11px;
	color: var(--text-muted);
	align-self: flex-start;
}

.actionBtn {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	padding: 8px 10px;
	font-size: 12px;
	text-align: left;
	cursor: pointer;
	pointer-events: auto;
	min-width: 96px;
	flex: 1 1 auto;
}

.actionBtn:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.09);
}

.actionBtn .name {
	display: block;
	font-weight: 600;
	color: var(--text);
}

.actionBtn .cost {
	display: block;
	font-size: 10px;
	color: var(--good);
	margin-top: 3px;
	font-variant-numeric: tabular-nums;
}

/* Resource-type indicator used in place of M/G/O letter prefixes - a small colored dot
   right before the number, same color family as the topbar's own resource icons. */
.resDot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	margin-right: 3px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
	vertical-align: middle;
	position: relative;
	top: -1px;
}

.costSep {
	color: var(--text-faint);
}

.actionBtn:disabled,
.actionBtn.unaffordable {
	opacity: 0.38;
	filter: grayscale(0.4);
}

/* The build option currently being placed - clicking it again cancels placement mode. */
.actionBtn.placingActive {
	border-color: var(--accent);
	background: rgba(211, 162, 76, 0.16);
}

/* Group-selection type chips are buttons now (click = narrow selection to that type). */
.selUnitChipBtn {
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease;
}

.selUnitChipBtn:hover {
	border-color: var(--accent);
	background: rgba(211, 162, 76, 0.12);
	color: var(--text);
}

/* Transport cargo rows can carry up to 20 point-cells - wrap into tidy rows instead of
   crushing 20 slots onto one line. */
.cargoRow {
	flex-wrap: wrap;
}

.cargoRow .queueSlot {
	flex: 1 1 16%;
	min-width: 52px;
	max-width: 25%;
	height: 34px;
}

.actionBtn.unaffordable:hover {
	background: rgba(255, 255, 255, 0.04);
}

.upgradeBtn {
	align-self: flex-start;
}

.repairBtn {
	align-self: flex-start;
}

.repairBtn .cost {
	color: var(--materials);
}

.sellBtn {
	align-self: flex-start;
	border-color: rgba(217, 119, 110, 0.32);
}

.cancelBtn {
	align-self: flex-start;
}

.sellConfirmRow {
	background: rgba(217, 119, 110, 0.08);
	border: 1px solid rgba(217, 119, 110, 0.35);
	border-radius: var(--radius-sm);
	padding: 8px 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sellConfirmLabel {
	font-size: 12px;
	font-weight: 600;
	color: var(--text);
}

.sellConfirmYes {
	border-color: rgba(217, 119, 110, 0.5);
}

.sellConfirmYes:hover:not(:disabled) {
	background: rgba(217, 119, 110, 0.18);
}

/* Fixed 2-column grid instead of a wrapping flex row - every trade button ends up the same
   size regardless of its own label/cost text length, so buy/sell-style pairs read as a
   balanced, evenly-weighted set instead of an uneven, cramped wrap. */
.marketGrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

.marketBtn {
	min-width: 0;
	text-align: center;
}

.marketBtn .cost {
	color: var(--text-muted);
}

/* Research Lab selection panel: Special Units (reuses the generic trains block above, just
   labeled), Special Abilities (placeholder), Super Powers (purchasable/toggleable cards). */
.researchSectionTitle {
	margin-top: 14px;
}

.researchSectionTitle:first-child {
	margin-top: 0;
}

.researchPlaceholder {
	font-size: 11px;
	color: var(--text-faint);
	font-style: italic;
	padding: 4px 2px 2px;
}

.researchPowerGrid {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.researchPowerCard {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 10px;
}

.researchPowerCard.owned {
	border-color: rgba(211, 162, 76, 0.35);
}

.researchPowerCard.active {
	border-color: var(--accent);
	background: rgba(211, 162, 76, 0.1);
}

.researchPowerName {
	font-weight: 600;
	font-size: 12px;
	color: var(--text);
}

.researchPowerDesc {
	font-size: 11px;
	color: var(--text-muted);
	margin-top: 2px;
}

.researchPowerFooter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 8px;
	gap: 8px;
}

.researchPowerBtn {
	min-width: 76px;
	text-align: center;
	flex: none;
}

.researchPowerCard.active .researchPowerBtn {
	background: var(--accent);
	border-color: var(--accent-strong);
	color: var(--accent-text);
	font-weight: 600;
}

.queueRow {
	display: flex;
	gap: 5px;
	margin-top: 2px;
}

.queueSlot {
	position: relative;
	flex: 1 1 0;
	height: 40px;
	border-radius: var(--radius-sm);
	border: 1px dashed var(--border-strong);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	color: var(--text-faint);
	overflow: hidden;
	padding: 2px;
	text-align: center;
}

.queueSlot.filled {
	border-style: solid;
	background: rgba(255, 255, 255, 0.05);
	color: var(--text-muted);
}

.queueSlot.active {
	border-color: var(--accent);
	background: rgba(211, 162, 76, 0.14);
	color: var(--text);
}

.qName {
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.qPct {
	font-size: 9px;
	color: var(--accent-strong);
}

.qEmpty {
	color: var(--text-faint);
}

.qCancel {
	position: absolute;
	top: 1px;
	right: 2px;
	background: none;
	border: none;
	color: var(--text-faint);
	font-size: 12px;
	line-height: 1;
	padding: 2px 4px;
	cursor: pointer;
	pointer-events: auto;
}

.qCancel:hover {
	color: var(--danger);
	background: none;
	border: none;
}

/* Anchors #buildMenu and #minimapWrap to the bottom-right corner (0x0 box, same corner
   #gameUI itself resolves to). The two are independent cards now, each with its own tab
   button and its own .collapsed slide-away state, instead of a single shared #panelSlide
   that used to hide the minimap along with the build panel any time either was toggled -
   see .buildTab/.minimapTab and #buildMenu.collapsed/#minimapWrap.collapsed below. */
#bottomRightPanel {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 0;
	height: 0;
}

.panelTab {
	position: absolute;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--panel);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--border-strong);
	border-right: none;
	border-radius: 8px 0 0 8px;
	color: var(--text-muted);
	line-height: 1;
	cursor: pointer;
	padding: 0;
	pointer-events: auto;
	transition: right 0.2s ease, color 0.15s ease, background 0.15s ease;
}

.panelTab svg {
	width: 17px;
	height: 17px;
}

/* Active (panel currently expanded) vs inactive (collapsed) - a tab reads as "this is the
   handle for that panel", not just a generic floating icon button. */
.panelTab.active {
	color: var(--accent-strong);
	background: var(--panel-solid);
}

.buildTab {
	right: 300px;
	bottom: 64px;
	z-index: 3;
}

/* Collapsed = detached at the screen edge, not flush against a panel anymore - needs its
   right border back (the default rule above deliberately omits it so the tab reads as
   "attached" to its panel's left edge the rest of the time) and full corner rounding. */
#bottomRightPanel .buildTab.collapsed-tab,
#bottomRightPanel .minimapTab.collapsed-tab {
	right: 4px;
	border-radius: 8px;
	border-right: 1px solid var(--border-strong);
}

/* right: 288px = #minimapWrap's own 16px right-inset + its 272px width, i.e. exactly
   minimapWrap's left edge - previously this only accounted for the width (272px), leaving
   the tab floating 16px short of the card's actual edge instead of flush against it. */
.minimapTab {
	right: 288px;
	bottom: 292px;
	z-index: 2;
}

#buildMenu {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 300px;
	background: var(--panel);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: 1px solid var(--border);
	border-left: 1px solid var(--border);
	border-top-left-radius: var(--radius);
	padding: 14px 16px;
	max-height: min(360px, 46vh);
	overflow-y: auto;
	pointer-events: auto;
	transition: transform 0.2s ease;
	z-index: 3;
}

#buildMenu.collapsed {
	transform: translateX(340px);
}

.menuTitle {
	font-weight: 600;
	color: var(--text-muted);
	margin-bottom: 10px;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

#buildButtons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* bottom: 232px (was 220px) - a few px more clearance above the build panel's own top
   button row than before. */
#minimapWrap {
	position: absolute;
	bottom: calc(min(360px, 46vh) + 16px);
	right: 16px;
	width: 272px;
	height: 152px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: #060a0d;
	pointer-events: auto;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
	transition: transform 0.2s ease;
	z-index: 2;
}

#minimapWrap.collapsed {
	transform: translateX(312px);
}

#minimap {
	width: 100%;
	height: 100%;
	display: block;
}

.minimapTab.attackPulse {
	color: #ff8d86;
	border-color: rgba(217, 119, 110, 0.75);
	animation: minimapAttackPulse 1s ease-in-out infinite;
}

@keyframes minimapAttackPulse {
	0%, 100% { background: rgba(23, 28, 34, 0.9); box-shadow: none; }
	50% { background: rgba(120, 32, 28, 0.86); box-shadow: 0 0 18px rgba(217, 119, 110, 0.42); }
}

#cmdFeedback {
	position: absolute;
	top: 62px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--panel);
	backdrop-filter: blur(10px);
	color: var(--text);
	font-size: 12px;
	font-weight: 500;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--border);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

#cmdFeedback.warning {
	color: var(--danger);
	border-color: rgba(217, 119, 110, 0.4);
}

/* Debug panel: top-left, just below #topBar (46px tall). Mirrors #bottomRightPanel's own
   anchor-box + independent-tab pattern (see .buildTab/.minimapTab above), mirrored to the left
   edge instead of the right - the tab is attached to the panel's RIGHT edge while expanded
   (so it omits the border touching the panel there instead of the right border the other two
   tabs omit) and detaches to the screen's left edge, fully rounded, when collapsed. */
#debugPanelWrap {
	position: absolute;
	top: 46px;
	left: 0;
	width: 0;
	height: 0;
}

#gameMenuTabWrap {
	position: absolute;
	top: 46px;
	left: 0;
	width: 0;
	height: 0;
}

.debugTab {
	left: 260px;
	top: 54px;
	border-radius: 0 8px 8px 0;
	border-left: none;
	border-right: 1px solid var(--border-strong);
	transition: left 0.2s ease, color 0.15s ease, background 0.15s ease;
	z-index: 3;
}

#debugPanelWrap .debugTab.collapsed-tab {
	left: 4px;
	border-radius: 8px;
	border-left: 1px solid var(--border-strong);
}

/* In-game pause menu tab: shares #debugPanelWrap's own top-left anchor box (both are
   positioned relative to the viewport, not any panel) but sits 40px higher, so it always
   reads as "above the debug tab" regardless of which one is open. Reuses .panelTab and the
   same open/collapsed convention as the debug tab (attached to its panel's right edge while
   open, detached to the screen edge while collapsed) even though the panel itself reuses the
   .startPanel look (see ui.js's in-game menu wiring), not the debug panel's own card style. */
.gameMenuTab {
	left: 380px;
	top: 14px;
	border-radius: 0 8px 8px 0;
	border-left: none;
	border-right: 1px solid var(--border-strong);
	transition: left 0.2s ease, color 0.15s ease, background 0.15s ease;
	z-index: 51;
}

.gameMenuTab.collapsed-tab {
	left: 4px;
	border-radius: 8px;
	border-left: 1px solid var(--border-strong);
}

/* Thin native scrollbars everywhere the UI scrolls. Firefox uses scrollbar-*; Chromium/WebKit
   use the pseudo-elements below. Touch scrolling remains native. */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--border-strong) transparent;
}

*::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}

*::-webkit-scrollbar-track {
	background: transparent;
}

*::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.18);
	border: 2px solid transparent;
	border-radius: 999px;
	background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
	background: var(--accent);
	background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
	background: transparent;
}

#debugPanel {
	position: absolute;
	top: 0;
	left: 0;
	width: 260px;
	max-height: min(600px, calc(100vh - 46px - 16px));
	overflow-y: auto;
	background: var(--panel);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--border);
	border-right: 1px solid var(--border);
	border-bottom-right-radius: var(--radius);
	padding: 14px 16px;
	pointer-events: auto;
	transition: transform 0.2s ease;
	z-index: 2;
}

/* Collapsed = slid fully off-screen (not just visually hidden), same technique
   #buildMenu.collapsed/#minimapWrap.collapsed already use - guarantees the collapsed panel can
   never intercept a click meant for the 3D view underneath it. */
#debugPanel.collapsed {
	transform: translateX(-300px);
}

.debugSection {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.debugRow {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 11px;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

.debugRow span:last-child {
	color: var(--text);
	font-weight: 600;
}

.debugSettings {
	margin-top: 12px;
}

.debugSettings .settingRow {
	margin-bottom: 8px;
}

.debugAddRes {
	width: 100%;
	text-align: center;
	margin-top: 2px;
}

#endOverlay .panel {
	min-width: 320px;
}

@media (pointer: coarse), (max-width: 820px) {
	.startGenTab {
		left: min(338px, calc(92vw - 42px));
		top: max(18px, calc(env(safe-area-inset-top) + 8px));
		border: 1px solid var(--border-strong);
		border-radius: 8px;
	}
	.startGenTab.collapsed-tab {
		left: max(4px, env(safe-area-inset-left));
		top: max(54px, calc(env(safe-area-inset-top) + 10px));
		border: 1px solid var(--border-strong);
		border-radius: 8px;
	}
	#topBar {
		height: 42px;
		padding: 0 8px;
		gap: 8px;
	}
	#resourceBar {
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}
	.resource {
		font-size: 11px;
		gap: 5px;
	}
	.icon {
		width: 9px;
		height: 9px;
	}
	#headerRight {
		gap: 8px;
		min-width: 0;
		flex: 0 1 auto;
	}
	#planetLabel {
		max-width: 34vw;
		min-width: 0;
		overflow: hidden;
		font-size: 10px;
	}
	#planetLabelText {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	#fullscreenBtn {
		width: 32px;
		height: 32px;
		flex: none;
	}
	#selectionPanel {
		z-index: 8;
		width: min(360px, 92vw);
		max-height: 36vh;
	}
	#buildMenu {
		width: min(300px, 86vw);
		max-height: min(330px, 44vh);
	}
	#buildButtons {
		max-height: 250px;
		overflow-y: auto;
		padding-right: 2px;
		scrollbar-width: thin;
	}
	#bottomRightPanel .buildTab.collapsed-tab {
		right: 4px;
		bottom: 64px;
	}
	.minimapTab,
	#bottomRightPanel .minimapTab.collapsed-tab {
		position: fixed;
		left: 4px;
		right: auto;
		bottom: 64px;
		border-radius: 8px;
		border: 1px solid var(--border-strong);
		z-index: 4;
	}
	#minimapWrap {
		position: fixed;
		left: 12px;
		right: auto;
		bottom: 108px;
		width: min(272px, 72vw);
		height: 152px;
		transform: translateX(0);
		z-index: 3;
	}
	#minimapWrap.collapsed {
		transform: translateX(calc(-100% - 24px));
	}
	#cmdFeedback {
		top: 50px;
		max-width: 82vw;
		text-align: center;
	}
}