*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: #2e271a; color: #f2efea; min-height: 100vh; }

/* ── Screens ── */
.screen { display: none; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.screen.active { display: flex; }

/* ── Home ── */
#screen-home h1 { font-size: 3rem; color: #7bed9f; margin-bottom: 6px; letter-spacing: 2px; }
#screen-home .subtitle { color: #948b7c; margin-bottom: 40px; }
.app-version { position: fixed; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); font-size: 0.72rem; color: #70695c; letter-spacing: 0.3px; pointer-events: none; user-select: text; z-index: 5; }

/* ── Home Card ── */
.home-card { width: 320px; background: #3a3122; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }

/* ── Home Tabs ── */
.home-tabs { display: flex; background: #443c2d; }
.home-tab { flex: 1; padding: 12px 0; background: transparent; color: #948b7c; border: none; border-bottom: 3px solid transparent; cursor: pointer; font-size: 0.9rem; font-weight: 600; transition: color 0.15s, border-color 0.15s; }
.home-tab:hover { color: #cabfac; }
.home-tab.active { color: #7bed9f; border-bottom-color: #7bed9f; background: #3a3122; }

/* ── Home Form ── */
.home-form { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.home-form input { padding: 12px 16px; font-size: 1rem; border: 2px solid #52493a; border-radius: 8px; background: #2e271a; color: #f2efea; outline: none; transition: border-color 0.15s; }
.home-form input:focus { border-color: #7bed9f; }
.btn-block { width: 100%; }

/* ── Lobby ── */
#screen-lobby { justify-content: flex-start; padding-top: 40px; }
.lobby-header { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 820px; margin-bottom: 20px; }
.lobby-header h2 { color: #7bed9f; }
.lobby-header-btns { display: flex; gap: 10px; }
table { width: 100%; max-width: 820px; border-collapse: collapse; }

/* ── Lobby Layout ── */
.lobby-body { display: flex; gap: 20px; width: 100%; max-width: 1060px; }
.lobby-main { flex: 1; min-width: 0; }
.lobby-main table { max-width: 100%; }
.lobby-sidebar { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.lobby-leftbar { width: 200px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.lobby-adminbar { width: 240px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
#lobby-admin-panel { background: #443c2d; border-radius: 10px; padding: 14px; }
.admin-heading { display: flex; align-items: center; justify-content: space-between; }
.admin-heading .btn { min-height: 0; padding: 1px 7px; font-size: 0.75rem; line-height: 1.3; }
.admin-list { max-height: 320px; overflow-y: auto; margin-bottom: 4px; }
.admin-online { color: #7bed9f; }
#lobby-power-panel { background: #443c2d; border-radius: 10px; padding: 14px; }
.power-row { display: grid; grid-template-columns: 14px 20px 1fr auto; grid-template-rows: auto 3px; align-items: center; column-gap: 6px; row-gap: 3px; padding: 4px 0; font-size: 0.84rem; color: #d7cfc1; }
.power-rank { color: #b3aca2; font-size: 0.72rem; text-align: right; }
.power-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.power-pct { color: #7bed9f; font-weight: 600; }
.power-bar { grid-column: 3 / 5; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.08); overflow: hidden; }
.power-bar span { display: block; height: 100%; background: #7bed9f; opacity: 0.7; }
.sidebar-heading { font-size: 0.9rem; color: #7bed9f; font-weight: 600; margin-bottom: 8px; }
#lobby-stats-panel, #lobby-friends-panel { background: #443c2d; border-radius: 10px; padding: 14px; }
.stat-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.88rem; color: #d7cfc1; }
.stat-row span:last-child { color: #7bed9f; font-weight: 600; }
.btn-xs { padding: 3px 8px; font-size: 0.75rem; border-radius: 5px; }
.friend-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 0.85rem; }
.friend-row.pending { color: #b3aca2; font-style: italic; }
.friend-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.friend-status.online { background: #7bed9f; }
.friend-status.offline { background: #5e574d; }
.friend-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-remove-btn { opacity: 0.4; padding: 1px 5px; font-size: 0.7rem; }
.friend-row:hover .friend-remove-btn { opacity: 1; }
.friend-empty { color: #5e574d; font-size: 0.82rem; padding: 6px 0; }
.friend-pending-label { color: #b3aca2; font-size: 0.78rem; margin-top: 8px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.friend-add-row { display: flex; gap: 4px; margin-top: 8px; }
.friend-add-row input { flex: 1; padding: 5px 8px; font-size: 0.82rem; background: #2e271a; border: 1px solid #4b463d; border-radius: 5px; color: #f2efea; }
.online-players-list { max-height: 260px; overflow-y: auto; }
.friend-status.online.room { background: #f6c453; }
.friend-status.online.game { background: #e8845a; }
.online-tag { font-size: 0.7rem; color: #b3aca2; white-space: nowrap; }
.online-tag.friend { color: #7bed9f; }
.online-add-btn { padding: 1px 6px; font-size: 0.7rem; white-space: nowrap; }
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid #3e372a; }
th { background: #443c2d; color: #7bed9f; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }
tr:hover td { background: #3a3122; }
.empty-row td { text-align: center; color: #5e574d; padding: 40px; }

/* ── Modal ── */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 100; align-items: center; justify-content: center; }
.modal-overlay.open { display: flex; }
.modal { background: #443c2d; border-radius: 14px; padding: 32px; width: 360px; }
.modal h2 { color: #7bed9f; margin-bottom: 22px; }
.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 6px; color: #b3aca2; font-size: 0.88rem; }
.field input, .field select { width: 100%; padding: 10px 12px; background: #2e271a; border: 1px solid #4b463d; border-radius: 7px; color: #f2efea; font-size: 0.95rem; }
.modal-btns { display: flex; gap: 10px; margin-top: 22px; }

/* ── Waiting room ── */
#screen-waiting { justify-content: flex-start; padding-top: 40px; }
.waiting-wrap { width: 100%; max-width: 680px; }
.waiting-wrap h2 { color: #7bed9f; margin-bottom: 4px; }
.room-meta { color: #837a6b; font-size: 0.88rem; margin-bottom: 22px; }
.panel { background: #443c2d; border-radius: 10px; padding: 18px; margin-bottom: 18px; }
.panel h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: #837a6b; margin-bottom: 14px; }
.player-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #38342e; }
.player-row:last-child { border-bottom: none; }
.ready-dot { width: 11px; height: 11px; border-radius: 50%; background: #c0392b; flex-shrink: 0; }
.ready-dot.ready { background: #2ecc71; }
.host-badge { font-size: 0.72rem; background: #f39c12; color: #000; border-radius: 4px; padding: 2px 6px; font-weight: 700; }
.faction-badge { font-size: 0.72rem; background: #50432c; color: #e7e2d9; border-radius: 4px; padding: 2px 6px; margin-left: 4px; }
.faction-emblem-lg { width: 64px; height: 64px; flex-shrink: 0; image-rendering: pixelated; }
.faction-emblem-sm { width: 20px; height: 20px; flex-shrink: 0; image-rendering: pixelated; }
.faction-select-row { display: flex; align-items: flex-start; gap: 12px; margin-top: 8px; }
.team-badge { font-size: 0.68rem; color: #fff; border-radius: 3px; padding: 1px 5px; margin-left: 4px; font-weight: 700; }
.faction-passives { margin-top: 6px; }
.faction-passive { font-size: 0.82rem; color: #8be48b; padding: 2px 0; }
.faction-ability { font-size: 0.82rem; color: #e8e8f0; padding: 4px 0 2px; }
.faction-ability-stage { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-left: 4px; }
.faction-ability-desc { font-size: 0.74rem; color: #b0a89a; padding-left: 1.4em; }
.ml-auto { margin-left: auto; }
.waiting-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.color-swatches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.color-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); cursor: pointer; padding: 0; transition: transform 0.1s, border-color 0.1s; }
.color-swatch:hover:not(:disabled) { transform: scale(1.12); border-color: #fff; }
.color-swatch.selected { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.35); }
.color-swatch:disabled { opacity: 0.25; cursor: not-allowed; }
.color-swatch.auto { width: auto; border-radius: 14px; padding: 0 10px; background: #40382a; color: #d7cfc1; font-size: 0.75rem; }
.player-row .color-pip { border: 1px dashed rgba(255,255,255,0.25); }

/* ── Game ── */
#screen-game { justify-content: flex-start; align-items: flex-start; padding: 0; background: #18140e; overflow: hidden; }
:root { --faction-color: #52493a; }
.hud { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; background: linear-gradient(to bottom, color-mix(in srgb, var(--stage-color, #ece6d6) 16%, #2e271a), #2e271a); border-bottom: 3px solid var(--faction-color); box-shadow: inset 0 2px 0 var(--stage-color, #ece6d6); transition: background 1.5s, box-shadow 1.5s; }
.hud-players { display: flex; gap: 18px; }
.hud-player { display: flex; align-items: center; gap: 7px; font-size: 0.88rem; }
.color-pip { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
#game-canvas { display: block; cursor: crosshair; }
.hud-nectar { font-size: 0.95rem; font-weight: 700; color: #f1c40f; letter-spacing: 0.5px; }
.hud-wood   { font-size: 0.95rem; font-weight: 700; color: #c9a06c; letter-spacing: 0.5px; }
.hud-pollen { font-size: 0.95rem; font-weight: 700; color: #f48fb1; letter-spacing: 0.5px; }
.hud-stone  { font-size: 0.95rem; font-weight: 700; color: #b3aca2; letter-spacing: 0.5px; }
.hud-res-workers { font-size: 0.75rem; color: #948b7c; margin-left: 4px; }

/* ── Worker / Idle counts ── */
.hud-workers { font-size: 0.95rem; font-weight: 700; color: #d7cfc1; letter-spacing: 0.5px; }
.hud-idle-btn { font-size: 0.82rem; font-weight: 700; color: #e67e22; background: #443c2d; border: 1px solid rgba(230,126,34,0.4); border-radius: 5px; padding: 2px 8px; cursor: pointer; letter-spacing: 0.5px; transition: background 0.15s; }
.hud-idle-btn:hover { background: #554b3a; }
.hud-idle-btn .idle-zero { color: #948b7c; }

/* ── HUD Tiers ── */
.hud-tiers { display: flex; gap: 6px; align-items: center; }
.tier-item { display: inline-flex; align-items: stretch; }
.tier-badge { font: inherit; font-size: 0.72rem; font-weight: 700; padding: 3px 8px; border-radius: 5px; letter-spacing: 0.5px; background: #443c2d; border: 1px solid #4b463d; cursor: pointer; white-space: nowrap; transition: background .12s, box-shadow .12s, opacity .12s; }
.tier-badge:hover:not(:disabled) { background: #554b3a; }
.tier-badge.ready { box-shadow: 0 0 6px currentColor; }
.tier-badge.unaffordable { opacity: 0.6; }
.tier-badge.max { cursor: default; }
.tier-badge.researching { background: linear-gradient(90deg, rgba(123,237,159,0.35) var(--pct, 0%), #443c2d var(--pct, 0%)); cursor: default; }
.tier-item:has(.tier-cancel:not([hidden])) .tier-badge { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tier-cancel { font: inherit; font-size: 0.62rem; padding: 0 6px; background: #5a2a2a; color: #f88; border: 1px solid #833; border-left: none; border-radius: 0 5px 5px 0; cursor: pointer; }
.tier-cancel:hover { background: #833; color: #fff; }
.tier-badge.tier-eco { color: #f1c40f; border-color: rgba(241,196,15,0.35); }
.tier-badge.tier-mil { color: #e74c3c; border-color: rgba(231,76,60,0.35); }
.tier-badge.tier-def { color: #3498db; border-color: rgba(52,152,219,0.35); }
.stage-badge { font-size: 0.72rem; font-weight: 800; padding: 3px 9px; border-radius: 5px; letter-spacing: 0.8px; text-transform: uppercase; color: #2e271a; background: var(--stage-color, #ece6d6); box-shadow: 0 0 8px color-mix(in srgb, var(--stage-color, #ece6d6) 55%, transparent); cursor: help; transition: background 1.5s, box-shadow 1.5s; }

/* ── Build Grid ── */
#uip-build-section { flex-direction: column; gap: 6px; margin-top: 6px; }
#uip-build-buttons { display: grid; grid-template-rows: repeat(3, auto); grid-auto-flow: column; grid-auto-columns: 60px; gap: 5px; }
.build-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 13px 3px 5px; background: #42392a; border: 1px solid #52493a; border-radius: 7px; cursor: pointer; transition: border-color 0.12s, background 0.12s; position: relative; min-width: 0; }
.build-card:hover:not(:disabled) { border-color: #7bed9f; background: #3a3122; }
.build-card:disabled { opacity: 0.38; cursor: not-allowed; }
.build-card-icon { width: 32px; height: 32px; image-rendering: pixelated; background-repeat: no-repeat; background-position: 0 0; flex-shrink: 0; overflow: hidden; }
.build-card-name { font-size: 0.6rem; color: #d7cfc1; text-align: center; line-height: 1.2; min-height: 2.4em; width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.build-card-cost { font-size: 0.56rem; color: #b3aca2; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; margin-top: auto; }
.build-card-cost span { white-space: nowrap; }
.build-card-hotkey { position: absolute; top: 2px; right: 3px; font-size: 0.5rem; color: #948b7c; background: rgba(0,0,0,0.45); border-radius: 3px; padding: 0 3px; line-height: 1.4; pointer-events: none; }
/* Locked build cards: the card content fades, the badge (🔒 later tier, red ✖ not for your faction) stays bright */
.build-card.build-tier-locked, .build-card.build-faction-locked { opacity: 1; }
.build-card.build-tier-locked > :not(.build-card-badge), .build-card.build-faction-locked > :not(.build-card-badge) { opacity: 0.3; }
.build-card-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.4rem; line-height: 1; color: #fff; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8)); }
.build-faction-locked .build-card-badge { color: #e8402a; font-size: 1.6rem; text-shadow: 0 0 2px #1a0d06, 0 0 2px #1a0d06; }
.build-page-arrow { grid-row: 3; justify-content: center; background: #3a3122; border-color: #7a684a; }
.build-page-arrow-icon { font-size: 1.3rem; line-height: 32px; height: 32px; color: #7bed9f; }

/* ── Building Jump Panel (Tab menu) ── */
#building-jump-panel { position: fixed; bottom: 24px; left: 24px; background: #30291e; border: 2px solid var(--stage-color, var(--faction-color)); transition: border-color 1.5s; border-radius: 10px; padding: 10px 12px; z-index: 53; box-shadow: 0 4px 18px rgba(0,0,0,0.55); min-width: 160px; }
#jump-buttons { display: grid; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 5px; }
.jump-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; background: #42392a; border: 1px solid #52493a; border-radius: 7px; cursor: pointer; transition: border-color 0.12s, background 0.12s; position: relative; min-width: 62px; }
.jump-card:hover { border-color: #7bed9f; background: #3a3122; }
.jump-card.jump-empty { opacity: 0.25; cursor: default; }
.jump-card-icon { width: 32px; height: 32px; image-rendering: pixelated; background-repeat: no-repeat; background-position: 0 0; flex-shrink: 0; overflow: hidden; }
.jump-card-name { font-size: 0.62rem; color: #d7cfc1; text-align: center; line-height: 1.2; }
.jump-card-count { font-size: 0.62rem; color: #7bed9f; font-weight: 700; text-align: center; }
.jump-card-hotkey { position: absolute; top: 2px; right: 3px; font-size: 0.5rem; color: #948b7c; background: rgba(0,0,0,0.45); border-radius: 3px; padding: 0 3px; line-height: 1.4; pointer-events: none; }

/* ── Unit Info Panel ── */
#unit-info-panel { position: fixed; bottom: 24px; left: 258px; background: #30291e; border: 2px solid var(--stage-color, var(--faction-color)); transition: border-color 1.5s; border-radius: 10px; padding: 12px 16px; z-index: 50; display: flex; gap: 12px; align-items: flex-start; box-shadow: 0 4px 18px rgba(0,0,0,0.55); pointer-events: none; max-width: 340px; }
#unit-info-panel button { pointer-events: auto; }

/* ── Unit Command Panel (bottom-left, military units) ── */
#unit-command-panel { position: fixed; bottom: 24px; left: 24px; background: #30291e; border: 2px solid var(--stage-color, var(--faction-color)); transition: border-color 1.5s; border-radius: 10px; padding: 12px 14px; z-index: 51; display: flex; gap: 14px; align-items: flex-start; box-shadow: 0 4px 18px rgba(0,0,0,0.55); }
.ucp-left { display: flex; gap: 10px; align-items: flex-start; }
#ucp-sprite { width: 48px; height: 48px; image-rendering: pixelated; background-repeat: no-repeat; background-position: 0 0; flex-shrink: 0; }
.ucp-stats { display: flex; flex-direction: column; gap: 1px; }
.ucp-name { font-size: 0.75rem; font-weight: 700; color: #7bed9f; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }
.ucp-stat { font-size: 0.72rem; color: #d7cfc1; line-height: 1.5; }
.ucp-right { display: flex; flex-direction: column; gap: 6px; border-left: 1px solid #443c2e; padding-left: 12px; }
.ucp-label { font-size: 0.6rem; color: #948b7c; text-transform: uppercase; letter-spacing: 1px; }
.ucp-btn-row { display: flex; gap: 4px; }
.ucp-btn { width: 36px; height: 36px; font-size: 1.1rem; background: #42392a; border: 2px solid #62594a; border-radius: 6px; color: #d7cfc1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, background 0.15s; }
.ucp-btn:hover { background: #52493a; border-color: #7bed9f; }
.ucp-btn.active { background: #1a3a2a; border-color: #7bed9f; color: #7bed9f; }
.ucp-btn.cmd-active { background: #3a2a1a; border-color: #f0a040; color: #f0a040; }
.ucp-btn { position: relative; }
.ucp-key { position: absolute; right: 2px; bottom: 0; font-size: 0.55rem; line-height: 1; color: #9aa; pointer-events: none; }
.ucp-no-hotkeys .ucp-key { display: none; }
#unit-action-panel { position: fixed; bottom: 24px; left: 24px; background: #30291e; border: 2px solid var(--stage-color, var(--faction-color)); transition: border-color 1.5s; border-radius: 10px; padding: 10px 12px; z-index: 52; box-shadow: 0 4px 18px rgba(0,0,0,0.55); min-width: 160px; max-width: calc(100vw - 48px); }
#uip-sprite { width: 64px; height: 64px; image-rendering: pixelated; background-repeat: no-repeat; background-position: 0 0; flex-shrink: 0; }
.uip-name { font-size: 0.8rem; font-weight: 700; color: #7bed9f; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; }
.uip-stat { font-size: 0.8rem; color: #d7cfc1; line-height: 1.7; }
.uip-counter-strong, .uip-counter-weak { font-size: 0.72rem; line-height: 1.45; margin: 2px 0; }
#uip-bonus-row, #uip-counters-row, #uip-countered-row,
#ucp-bonus-row, #ucp-counters-row, #ucp-countered-row { line-height: 1.4; padding-left: 1.4em; text-indent: -1.4em; overflow-wrap: anywhere; }
.ucp-stats { max-width: 230px; }
.temp-gauge-row { display: flex; align-items: flex-start; gap: 3px; padding: 3px 0 2px; }
.bp-info-row.temp-gauge-row { justify-content: flex-start; }
.tg-icon { line-height: 1; }
.tg-gauge { position: relative; flex: 1; min-width: 160px; max-width: 200px; margin: 0 10px 0 6px; }
.tg-bar { position: relative; display: block; height: 8px; margin-top: 3px; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.45); }
.tg-band { position: absolute; top: 0; bottom: 0; }
.tg-freeze { background: linear-gradient(90deg, #1d2f7a, #3155c4); }
.tg-cold   { background: linear-gradient(90deg, #4f8fe0, #8cc8f5); }
.tg-ok     { background: linear-gradient(90deg, #6fc86a, #9ad65a, #6fc86a); }
.tg-hot    { background: linear-gradient(90deg, #f2c14a, #f08a32); }
.tg-burn   { background: linear-gradient(90deg, #d8452a, #7a1a12); }
.tg-now { position: absolute; top: -1px; bottom: -1px; width: 3px; margin-left: -1.5px; background: #fff; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0,0,0,0.7); }
.tg-now-bad { background: #ff5a4a; animation: tg-pulse 0.9s ease-in-out infinite alternate; }
@keyframes tg-pulse { from { opacity: 1; } to { opacity: 0.35; } }
.tg-nums { position: relative; display: block; height: 11px; margin-top: 1px; }
.tg-num { position: absolute; top: 0; transform: translateX(-50%); font-size: 0.6rem; line-height: 1; font-weight: 600; white-space: nowrap; color: #fff; }
.tg-num.tg-num-l { transform: translateX(-100%); padding-right: 1px; }
.tg-num.tg-num-r { transform: none; padding-left: 1px; }
.stat-row-more { pointer-events: auto; margin-left: 4px; padding: 0 5px; font: inherit; font-size: 0.66rem; line-height: 1.35; text-indent: 0; color: #bbaf99; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; cursor: pointer; white-space: nowrap; }
.stat-row-more:hover { color: #fff; border-color: rgba(255,255,255,0.35); }
.uip-counter-strong span { color: #2ecc71; }
.uip-counter-weak span { color: #e74c3c; }
#building-panel { position: fixed; bottom: 24px; left: 358px; background: #30291e; border: 2px solid var(--stage-color, var(--faction-color)); transition: border-color 1.5s; border-radius: 10px; padding: 14px 18px; min-width: 220px; max-width: 260px; max-height: 82vh; overflow-y: auto; z-index: 50; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 4px 18px rgba(0,0,0,0.55); }
#building-action-panel { position: fixed; bottom: 24px; left: 24px; background: #30291e; border: 2px solid var(--stage-color, var(--faction-color)); transition: border-color 1.5s; border-radius: 10px; padding: 12px 14px; max-width: 320px; max-height: 82vh; overflow-y: auto; z-index: 50; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 4px 18px rgba(0,0,0,0.55); }
#resource-panel { position: fixed; bottom: 24px; left: 24px; background: #30291e; border: 2px solid var(--stage-color, var(--faction-color)); transition: border-color 1.5s; border-radius: 10px; padding: 14px 18px; min-width: 180px; z-index: 50; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 4px 18px rgba(0,0,0,0.55); }
.bp-header { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: #7bed9f; font-weight: 700; }
#bp-info { display: flex; flex-direction: column; gap: 3px; border-top: 1px solid #443c2e; padding-top: 8px; }
.bp-info-row { display: flex; justify-content: space-between; font-size: 0.78rem; color: #d7cfc1; }
.bp-info-label { color: #948b7c; margin-right: 8px; }
.bp-progress-track { height: 8px; background: #3e372a; border-radius: 4px; overflow: hidden; margin-bottom: 2px; }
.bp-progress-fill { height: 100%; width: 0%; background: #2ecc71; border-radius: 4px; transition: width 0.25s linear; }
.bp-progress-label { font-size: 0.75rem; color: #948b7c; }
#bp-queue-strip { display: flex; gap: 3px; margin-top: 4px; flex-wrap: wrap; }
.bp-queue-icon { width: 28px; height: 28px; border-radius: 4px; background: #42392a; border: 1px solid #72695a; background-repeat: no-repeat; background-position: 0 0; image-rendering: pixelated; flex-shrink: 0; overflow: hidden; }
.bp-queue-icon.bp-active { border-color: #7bed9f; }
.bp-queue-icon:hover { border-color: #e74c3c; background-color: #3a1a1a; }
#bp-research-wrap { margin-top: 6px; }
#bp-research-queue-strip { display: flex; gap: 3px; margin-top: 4px; flex-wrap: wrap; }
.bp-research-icon { font-size: 14px; line-height: 28px; text-align: center; }
.bp-research-icon.bp-active { border-color: #74b9ff; }

/* ── Panel section labels ── */
.panel-section-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1px; color: var(--icon-tile); border-top: 1px solid var(--icon-tile-rim); padding-top: 7px; margin-bottom: 4px; }

/* ── Train Grid (building panel) ── */
.train-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.autoqueue-control { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; margin-bottom: 8px; cursor: pointer; }
.autoqueue-control input { accent-color: #7bed9f; width: 16px; height: 16px; flex-shrink: 0; }
#bp-autoqueue-status { margin-left: auto; font-size: 0.62rem; color: #b9c5bd; overflow-wrap: anywhere; text-align: right; }
.train-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; background: #42392a; border: 1px solid #52493a; border-radius: 7px; user-select: none; transition: border-color .12s, background .12s; }
.train-card:not(:disabled):hover { border-color: #7bed9f; background: #1e2e28; cursor: pointer; }
.train-card { font: inherit; color: inherit; min-width: 0; }
.train-card:disabled { cursor: not-allowed; }
.train-card:focus-visible, .tt-tab:focus-visible, .tt-close-btn:focus-visible, .tt-card:focus-visible { outline: 2px solid #7bed9f; outline-offset: 2px; }
.train-locked { opacity: 0.45; border-style: dashed !important; }
.train-unaffordable { opacity: 0.65; }
.train-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#bp-train-buttons { align-items: start; }
.train-upgrade-strip { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 2px 4px; font: inherit; font-size: 0.55rem; font-weight: 700; color: #f2efea; background: #3a3122; border: 1px solid #2ecc71; border-radius: 4px; cursor: pointer; transition: background .12s; }
.train-upgrade-strip .tus-arrow { color: #2ecc71; font-size: 0.6rem; line-height: 1; }
.train-upgrade-strip .tus-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.train-upgrade-strip:not(:disabled):hover { background: #1e2e28; border-color: #7bed9f; }
.train-upgrade-strip:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.7); }
.train-upgrade-strip:focus-visible { outline: 2px solid #7bed9f; outline-offset: 1px; }
.train-card-icon { width: 32px; height: 32px; image-rendering: pixelated; background-repeat: no-repeat; background-position: 0 0; flex-shrink: 0; overflow: hidden; }
.train-card-name { font-size: 0.6rem; color: #e4dfd6; text-align: center; font-weight: 700; line-height: 1.2; }
.train-card-stats { font-size: 0.52rem; color: #948b7c; text-align: center; line-height: 1.3; }
.cost-unaffordable { color: #e74c3c; }
.train-lock-label { font-size: 0.55rem; color: #f39c12; text-align: center; }

/* ── Tech Grid (building panel) ── */
.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.tech-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; background: #42392a; border: 1px solid #52493a; border-radius: 7px; position: relative; padding-top: 12px; font: inherit; color: inherit; min-width: 0; user-select: none; transition: border-color .12s, background .12s; }
#bp-tech-buttons .tech-card:not(:disabled):hover { border-color: #7bed9f; background: #1e2e28; cursor: pointer; }
#bp-tech-buttons .tech-card:disabled { cursor: not-allowed; }
#bp-tech-buttons .tech-card:focus-visible { outline: 2px solid #7bed9f; outline-offset: 2px; }
.tech-researched { border-color: rgba(46,204,113,0.5) !important; background: #182820 !important; }
.tech-tier-locked { border-style: dashed !important; background: #342d22 !important; }
.tech-tier-locked > :not(.card-lock) { opacity: 0.4; }
.card-lock { position: absolute; top: 1px; left: 3px; font-size: 0.65rem; line-height: 1.4; pointer-events: none; filter: drop-shadow(0 0 1px #000); }
.tech-card-icon { width: 32px; height: 32px; image-rendering: pixelated; background-repeat: no-repeat; background-position: 0 0; flex-shrink: 0; overflow: hidden; }
.tech-card-name { font-size: 0.6rem; color: #e4dfd6; text-align: center; font-weight: 700; }

/* ── Multi-select bar ── */
#multi-select-bar { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; background: rgba(38,31,20,0.88); border: 1px solid #52493a; border-radius: 10px; padding: 6px 10px; z-index: 50; box-shadow: 0 4px 18px rgba(0,0,0,0.55); }
.msb-portrait { width: 40px; height: 40px; border-radius: 6px; background: #42392a; border: 2px solid #72695a; overflow: hidden; flex-shrink: 0; background-repeat: no-repeat; background-position: 0 0; image-rendering: pixelated; cursor: pointer; }
.msb-portrait:hover { border-color: #ffffff; }

/* Light sand tile behind sprite icons so dark sprites stand out from the navy panels.
   box-shadow extends the tile without padding, which would expose the next sprite-sheet frame. */
:root { --icon-tile: #b9ab8b; --icon-tile-rim: #6f6450; }
.build-card-icon, .jump-card-icon, .train-card-icon, .tech-card-icon, .tt-card-icon, .ug-card-icon, .ug-d-icon, #ucp-sprite, #uip-sprite {
  background-color: var(--icon-tile); border-radius: 3px; margin: 4px;
  box-shadow: 0 0 0 3px var(--icon-tile), 0 0 0 4px var(--icon-tile-rim);
}
.msb-portrait, .bp-queue-icon { background-color: var(--icon-tile); }
.bp-research-icon { background-color: #42392a; }

/* ── Control group bar ── */
#control-group-bar { position: fixed; top: 10px; left: 10px; display: flex; gap: 4px; z-index: 49; }
.cg-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 32px; padding: 3px 6px; background: rgba(38,31,20,0.85); border: 1px solid #52493a; border-radius: 6px; cursor: pointer; user-select: none; }
.cg-slot:hover { border-color: #948b7c; }
.cg-slot.cg-active { border-color: rgba(123,237,159,0.6); background: rgba(40,35,26,0.9); }
.cg-key { font-size: 0.7rem; font-weight: 700; color: #d7cfc1; line-height: 1; }
.cg-count { font-size: 0.55rem; color: #948b7c; line-height: 1; }

/* ── Faction ability bar (F1/F2), left of the minimap ── */
#ability-bar { position: fixed; bottom: 24px; right: 236px; display: flex; gap: 6px; z-index: 50; }
.ability-btn { position: relative; width: 64px; height: 64px; padding: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #30291e; border: 2px solid var(--faction-color); border-radius: 10px; color: #f2efea; cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,0.55); }
.ability-btn:hover { filter: brightness(1.2); }
.ability-btn.cooling { cursor: default; }
.ability-btn.active { border-color: #ffe28a; box-shadow: 0 0 12px rgba(255,226,138,0.7); }
.ability-btn.locked { cursor: not-allowed; filter: grayscale(1) brightness(0.6); }
.ability-btn.locked:hover { filter: grayscale(1) brightness(0.7); }
.ability-icon { font-size: 1.5rem; line-height: 1; }
.ability-key { position: absolute; top: 2px; left: 4px; font-size: 0.6rem; font-weight: 700; color: #cabfac; }
.ability-name { font-size: 0.55rem; line-height: 1.1; margin-top: 3px; text-align: center; padding: 0 2px; }
.ability-sweep { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(0,0,0,0.6); pointer-events: none; }
.ability-time { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 700; text-shadow: 0 1px 3px #000; pointer-events: none; }
.chat-line.system .chat-text { color: #ffe28a; font-style: italic; }

/* ── Minimap ── */
#minimap-wrap { position: fixed; bottom: 24px; right: 24px; z-index: 50; display: none; flex-direction: column; align-items: flex-end; gap: 4px; }
#minimap-wrap.visible { display: flex; }
html:not(.in-game) #minimap-wrap { display: none !important; }
#minimap-canvas { border: 1px solid #52493a; border-radius: 6px; box-shadow: 0 4px 18px rgba(0,0,0,0.55); cursor: crosshair; display: block; }
#minimap-scores { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.minimap-score { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.5px; display: flex; align-items: center; gap: 5px; background: rgba(24,20,14,0.6); border-radius: 4px; padding: 1px 6px; }
.minimap-score .faction-emblem-sm { width: 14px; height: 14px; }
.minimap-score .score-name { color: #c8c8d8; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minimap-score .score-name em { color: #837a6b; font-style: normal; }
.minimap-score.me .score-name { color: #fff; }
.minimap-score .team-badge { margin-left: 0; padding: 0 5px; font-size: 0.62rem; }
.minimap-score .score-pip { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.minimap-score .score-val { color: #d7cfc1; min-width: 2.5em; text-align: right; }
#minimap-label { font-size: 0.65rem; color: #5e574d; letter-spacing: 1px; text-transform: uppercase; }
#minimap-flare { font: inherit; letter-spacing: 0; text-transform: none; color: #d8cbb0; background: rgba(30,24,16,0.85); border: 1px solid #52493a; border-radius: 4px; padding: 1px 6px; margin-right: 6px; cursor: pointer; }
#minimap-flare:hover { border-color: #f2b632; }
#minimap-flare.armed { background: #f2b632; color: #1e1810; border-color: #f2b632; }
canvas.flare-cursor { cursor: crosshair !important; }

/* ── Game overlay ── */
#game-overlay { display: none; position: fixed; top: 60px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.75); z-index: 200; align-items: center; justify-content: center; flex-direction: column; gap: 10px; padding: 18px 40px; border-radius: 10px; pointer-events: auto; }
#game-overlay.show { display: flex; }
#overlay-title { font-size: 3rem; font-weight: 700; }
#overlay-sub { color: #837a6b; }
#overlay-lobby-btn { padding: 8px 24px; font-size: 1rem; font-weight: 600; cursor: pointer; border: none; border-radius: 6px; background: #4b463d; color: #fff; }
#overlay-lobby-btn:hover { background: #70695c; }
#overlay-stats-btn { padding: 8px 24px; font-size: 1rem; font-weight: 600; cursor: pointer; border: none; border-radius: 6px; background: #50432c; color: #fff; }
#overlay-stats-btn:hover { background: #6e5c3d; }

/* ── Post-Game Statistics ── */
#stats-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.82); z-index: 210; align-items: center; justify-content: center; }
#stats-overlay.open { display: flex; }
#stats-panel { background: #2e271a; border: 2px solid #52493a; border-radius: 12px; width: min(97vw, 1320px); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,0.7); }
#stats-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid #443c2e; background: #30291e; flex-shrink: 0; }
#stats-title { font-size: 1.35rem; font-weight: 700; color: #e4dfd6; letter-spacing: 0.5px; }
#stats-close-btn { background: none; border: none; color: #948b7c; font-size: 1.6rem; cursor: pointer; padding: 0 6px; line-height: 1; }
#stats-close-btn:hover { color: #fff; }
#stats-body { padding: 20px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; }
#stats-duration { background: #3a3122; border-radius: 8px; padding: 12px 20px; display: flex; align-items: center; gap: 16px; }
#stats-duration .sd-label { font-size: 0.75rem; color: #948b7c; text-transform: uppercase; letter-spacing: 1px; }
#stats-duration .sd-value { font-size: 1.6rem; font-weight: 700; color: #f2efea; font-variant-numeric: tabular-nums; }
#stats-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.stats-summary-card { background: #3a3122; border-radius: 8px; padding: 14px 18px; }
.stats-summary-card .ssc-name { font-size: 0.95rem; font-weight: 700; margin-bottom: 10px; }
.stats-summary-card .ssc-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px 12px; }
.stats-summary-card .ssc-stat { display: flex; flex-direction: column; }
.stats-summary-card .ssc-stat-label { font-size: 0.65rem; color: #837a6b; text-transform: uppercase; letter-spacing: 0.5px; }
.stats-summary-card .ssc-stat-val { font-size: 1.1rem; font-weight: 600; color: #e4dfd6; font-variant-numeric: tabular-nums; }
.stats-chart-row { display: flex; gap: 18px; flex-wrap: wrap; }
.stats-chart-wrap { flex: 1; min-width: 380px; background: #3a3122; border-radius: 8px; padding: 14px; }
.stats-chart-label { font-size: 0.8rem; color: #a39c8f; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; text-align: center; font-weight: 600; }
.stats-chart-wrap canvas { width: 100%; height: 300px; display: block; }
#stats-units-table { background: #3a3122; border-radius: 8px; padding: 14px 18px; }
#stats-units-table .sut-title { font-size: 0.8rem; color: #a39c8f; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; font-weight: 600; }
#stats-units-table table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
#stats-units-table th { text-align: left; color: #a39c8f; font-weight: 600; padding: 6px 10px; border-bottom: 1px solid #38342e; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; }
#stats-units-table td { padding: 6px 10px; color: #e4dfd6; border-bottom: 1px solid #3e372a; font-variant-numeric: tabular-nums; }
#stats-units-table tr:hover td { background: #443a2a; }

/* ── Tech Tree Overlay ── */
#tech-tree-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 180; align-items: center; justify-content: center; }
#tech-tree-overlay.open { display: flex; }
#tech-tree-panel { background: #2e271a; border: 2px solid var(--faction-color); border-radius: 12px; width: min(96vw, 1100px); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,0.7); }
#tech-tree-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #443c2e; background: #30291e; flex-shrink: 0; }
#tech-tree-title { font-size: 1rem; font-weight: 700; color: #7bed9f; text-transform: uppercase; letter-spacing: 1px; flex-shrink: 0; }
#tt-faction-select { padding: 4px 8px; border-radius: 6px; border: 1px solid #4b463d; background: #42392a; color: #d7cfc1; font-size: 0.82rem; cursor: pointer; flex-shrink: 0; }
#tt-faction-select:focus { outline: none; border-color: #7bed9f; }
#tech-tree-tabs { display: flex; gap: 6px; flex: 1; }
.tt-tab { padding: 5px 14px; border-radius: 6px; border: 1px solid #4b463d; background: #42392a; color: #b3aca2; font-size: 0.82rem; cursor: pointer; transition: background .12s, color .12s; font-weight: 600; }
.tt-tab:hover { background: #5a4e3a; color: #f2efea; }
.tt-tab.tt-tab-active { background: #7bed9f; color: #2e271a; border-color: #7bed9f; }
.tt-close-btn { background: none; border: none; color: #837a6b; font-size: 1.2rem; cursor: pointer; flex-shrink: 0; padding: 4px 8px; border-radius: 6px; }
.tt-close-btn:hover { color: #e74c3c; background: rgba(231,76,60,0.12); }
#tech-tree-body { padding: 18px 20px; overflow-y: auto; min-height: 0; flex: 1; }

/* ── Tech Tree tier rows ── */
.tt-tier-row { margin-bottom: 22px; }
.tt-tier-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--icon-tile); margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px solid var(--icon-tile-rim); }
.tt-cards-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 8px; }
.tt-line { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: start; margin-bottom: 8px; }
.tt-line-name { font-size: 0.78rem; font-weight: 700; color: #ddd3bd; padding-top: 10px; }
.tt-line-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 8px; }
/* Techs tab: one grid, a row per tech line × a column per tier level */
.tt-grid { display: grid; grid-template-columns: 130px repeat(4, minmax(0, 1fr)); gap: 8px 10px; align-items: start; }
.tt-grid-head { position: sticky; top: -18px; z-index: 1; background: #1c1810; padding: 6px 0 5px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #ddd3bd; text-align: center; border-bottom: 1px solid var(--icon-tile-rim); }
.tt-grid-section { grid-column: 1 / -1; margin: 14px 0 0; }
.tt-grid > .tt-line-name { align-self: stretch; }
.tt-cell { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 100%; border-radius: 8px; }
.tt-cell:empty { background: rgba(255,255,255,0.025); border: 1px dashed rgba(255,255,255,0.06); min-height: 46px; }

/* ── Tech Tree cards ── */
.tt-card { background: #3a3122; border: 1px solid #52493a; border-radius: 8px; padding: 10px 12px; min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 5px; }
.tt-card.tt-mine { border-color: rgba(123,237,159,0.45); background: #28231a; }
.tt-card.tt-queued { border-color: rgba(255,200,80,0.5); background: #2a2516; }
.tt-card.tt-done { opacity: 0.6; border-color: rgba(123,237,159,0.2); }
/* Tech cards: border colour = tier track the tech needs. Status shows via background/glow. */
.tt-card.tt-track-economy { border-color: rgba(110,210,120,0.65); }
.tt-card.tt-track-military { border-color: rgba(225,95,85,0.7); }
.tt-card.tt-track-defense { border-color: rgba(95,150,235,0.7); }
.tt-card[class*="tt-track-"].tt-mine { box-shadow: 0 0 6px rgba(123,237,159,0.35); }
.tt-card[class*="tt-track-"].tt-queued { box-shadow: 0 0 0 1px rgba(255,200,80,0.6); }
.tt-card.tt-faction-locked { opacity: 0.35; border-color: #5e574d; border-style: dashed; }
.tt-card-header { display: flex; align-items: center; gap: 8px; }
.tt-card-icon { width: 28px; height: 28px; image-rendering: pixelated; background-repeat: no-repeat; background-position: 0 0; flex-shrink: 0; overflow: hidden; }
.tt-card-name { font-size: 0.75rem; font-weight: 700; color: #f2efea; }
.tt-card-sub { font-size: 0.62rem; color: #7bed9f; text-transform: uppercase; letter-spacing: 0.5px; }
.tt-card-stats { font-size: 0.62rem; color: #b3aca2; line-height: 1.5; }
.tt-card-stat-line { display: flex; gap: 4px; }
.tt-card-cost { font-size: 0.62rem; color: #948b7c; border-top: 1px solid #3e372a; padding-top: 5px; margin-top: 2px; }
.tt-card-bonus { font-size: 0.62rem; color: #f39c12; }
.tt-card-counters { font-size: 0.6rem; line-height: 1.4; }
.tt-card-requirements { font-size: 0.65rem; line-height: 1.5; color: #bdc7cf; }

@media (max-width: 650px) {
	.screen { padding: 16px; }
	.home-card { max-width: 100%; }
	.lobby-header { flex-wrap: wrap; gap: 12px; }
	.lobby-header-btns { flex-wrap: wrap; width: 100%; }
	.lobby-body { flex-direction: column; }
	.lobby-sidebar { width: 100%; }
	.lobby-leftbar { width: 100%; order: 2; }
	.lobby-sidebar { order: 3; }
	.lobby-adminbar { width: 100%; order: 4; }
	.lobby-main th, .lobby-main td { padding: 8px; overflow-wrap: anywhere; }
	.modal { width: min(360px, calc(100vw - 24px)); max-height: 90vh; overflow-y: auto; padding: 20px; }
	.player-row { flex-wrap: wrap; }
	.faction-select-row > div { min-width: 0; }
	.hud { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
	.hud-players { flex-basis: 100%; flex-wrap: wrap; }
	#minimap-wrap { top: calc(var(--game-hud-height, 120px) + 8px); right: 12px; bottom: auto; }
	#minimap-canvas { width: 110px; height: 82px; }
	#tech-tree-header { flex-wrap: wrap; gap: 8px; padding: 12px; }
	#tech-tree-title { order: 0; letter-spacing: 0; }
	#tech-tree-header .tt-close-btn { order: 1; margin-left: auto; }
	#tt-faction-select { order: 2; max-width: 100%; flex-basis: 100%; }
	#tech-tree-tabs { order: 3; flex-basis: 100%; }
	.tt-tab { flex: 1; padding: 8px; }
	#tech-tree-body { padding: 12px; }
	#building-action-panel { left: 12px !important; bottom: 12px; max-width: calc(100vw - 24px); max-height: 45vh; }
	#building-panel { left: 12px !important; bottom: calc(45vh + 24px); max-width: calc(100vw - 24px); max-height: 35vh; overflow-y: auto; }
}

/* ── Hover Tooltip ── */
#card-tooltip { position: fixed; z-index: 9999; pointer-events: none; display: none; background: #2e271a; border: 2px solid #7bed9f; border-radius: 10px; padding: 12px 16px; max-width: 320px; min-width: 200px; box-shadow: 0 6px 28px rgba(0,0,0,0.75); color: #f2efea; font-size: 0.72rem; line-height: 1.5; }
#card-tooltip.visible { display: block; }
.ctt-name { font-size: 0.85rem; font-weight: 700; color: #7bed9f; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.ctt-class { font-size: 0.65rem; color: #948b7c; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.ctt-divider { border: none; border-top: 1px solid #443c2e; margin: 6px 0; }
.ctt-section { font-size: 0.62rem; color: var(--icon-tile); text-transform: uppercase; letter-spacing: 1px; margin-top: 6px; margin-bottom: 2px; font-weight: 700; }
.ctt-row { display: flex; justify-content: space-between; gap: 8px; font-size: 0.7rem; color: #d7cfc1; }
.ctt-row span:first-child { color: #948b7c; }
.ctt-bonus { font-size: 0.68rem; color: #f39c12; margin-top: 4px; }
.ctt-desc { font-size: 0.68rem; color: #e4dfd6; font-style: italic; margin-top: 4px; }
.ctt-counter { font-size: 0.68rem; margin-top: 3px; }
.ctt-counter-strong { color: #2ecc71; }
.ctt-counter-weak { color: #e74c3c; }
.ctt-cost { font-size: 0.7rem; color: #d7cfc1; margin-top: 4px; }
.ctt-time { font-size: 0.65rem; color: #948b7c; }
.ctt-tier-req { font-size: 0.65rem; color: #f39c12; margin-top: 4px; }
.ctt-cost.cost-unaffordable { color: #e74c3c; }
.ctt-status { font-size: 0.65rem; color: #f39c12; margin-top: 4px; font-weight: 700; }

/* ── Buttons ── */
.btn { padding: 10px 22px; border: none; border-radius: 8px; cursor: pointer; font-size: 0.95rem; font-weight: 600; transition: filter 0.12s; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn:hover:not(:disabled) { filter: brightness(1.12); }
.btn-primary   { background: #7bed9f; color: #2e271a; }
.btn-secondary { background: #52493a; color: #d7cfc1; }
.btn-danger    { background: #e74c3c; color: #fff; }
.btn-sm { padding: 6px 14px; font-size: 0.82rem; }

/* ── Toast ── */
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #c0392b; color: #fff; padding: 10px 26px; border-radius: 8px; font-size: 0.92rem; display: none; z-index: 999; pointer-events: none; }
#toast.show { display: block; }

/* AI resignation offer prompt (one per open offer) */
.resign-offer { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); background: rgba(24,30,20,0.95); color: #edf0df; border: 1px solid #efbd62; border-radius: 8px; padding: 12px 18px; z-index: 950; box-shadow: 0 6px 20px rgba(0,0,0,0.6); text-align: center; }
.resign-offer + .resign-offer { top: 160px; }
.resign-offer-text { margin-bottom: 10px; }
.resign-offer-btns { display: flex; gap: 10px; justify-content: center; }

/* Pre-game countdown: dims the map, lets the camera move (no pointer capture) */
#countdown-overlay { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: radial-gradient(ellipse at center, rgba(10,16,10,0.35) 0%, rgba(10,16,10,0.75) 100%); z-index: 900; pointer-events: none; }
#countdown-overlay.show { display: flex; }
#countdown-overlay .countdown-label { font-size: 1.3rem; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: #edf0df; text-shadow: 0 2px 6px rgba(0,0,0,0.8); }
#countdown-overlay .countdown-number { font-size: 9rem; font-weight: 900; line-height: 1; color: #efbd62; text-shadow: 0 4px 0 #6b4a12, 0 8px 24px rgba(0,0,0,0.7); }
#countdown-overlay.go .countdown-label { visibility: hidden; }
#countdown-overlay.go .countdown-number { color: #b8dc82; text-shadow: 0 4px 0 #3e5a1c, 0 8px 24px rgba(0,0,0,0.7); }
#countdown-overlay .countdown-number.pop { animation: countdown-pop 0.9s ease-out; }
@keyframes countdown-pop { 0% { transform: scale(1.8); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.92); opacity: 0.9; } }

/* ── Unit Guide Overlay ── */
#unit-guide-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.82); z-index: 190; align-items: center; justify-content: center; }
#unit-guide-overlay.open { display: flex; }
#unit-guide-panel { background: #2e271a; border: 1px solid #52493a; border-radius: 12px; width: min(96vw, 1200px); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,0.7); }
#unit-guide-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #443c2e; background: #30291e; flex-shrink: 0; }
#unit-guide-title { font-size: 1rem; font-weight: 700; color: #7bed9f; text-transform: uppercase; letter-spacing: 1px; }
#unit-guide-body { display: flex; flex: 1; overflow: hidden; min-height: 0; }

/* ── Unit Guide grid column ── */
.ug-grid-col { width: 340px; min-width: 280px; overflow-y: auto; padding: 14px; border-right: 1px solid #443c2e; flex-shrink: 0; }
.ug-group-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #5e574d; margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 1px solid #3e372a; }
.ug-group-label:first-child { margin-top: 0; }
.ug-cards-row { display: flex; flex-wrap: wrap; gap: 5px; }
.ug-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 5px; background: #3a3122; border: 1px solid #52493a; border-radius: 7px; cursor: pointer; transition: border-color .12s, background .12s; width: 72px; }
.ug-card:hover { border-color: #7bed9f; background: #1e2e28; }
.ug-card-selected { border-color: #7bed9f !important; background: #28231a !important; box-shadow: 0 0 8px rgba(123,237,159,0.25); }
.ug-card-icon { width: 32px; height: 32px; image-rendering: pixelated; background-repeat: no-repeat; flex-shrink: 0; }
.ug-card-name { font-size: 0.55rem; color: #e4dfd6; text-align: center; font-weight: 700; line-height: 1.2; }
.ug-card-class { font-size: 0.48rem; color: #948b7c; text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Unit Guide detail column ── */
.ug-detail-col { flex: 1; overflow-y: auto; padding: 18px 22px; min-width: 0; }
.ug-detail-placeholder { color: #5e574d; font-size: 0.92rem; text-align: center; margin-top: 80px; }
.ug-d-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ug-d-icon { width: 56px; height: 56px; image-rendering: pixelated; background-repeat: no-repeat; flex-shrink: 0; }
.ug-d-name { font-size: 1.15rem; font-weight: 700; color: #7bed9f; }
.ug-d-class { font-size: 0.78rem; color: #948b7c; text-transform: uppercase; letter-spacing: 0.5px; }
.ug-d-section { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: #5e574d; margin: 18px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #3e372a; }
.ug-d-section:first-of-type { margin-top: 0; }

/* ── Stat Table ── */
.ug-stat-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.ug-stat-table td { padding: 3px 8px; font-size: 0.82rem; }
.ug-stat-table td:first-child { color: #948b7c; width: 55%; }
.ug-stat-table td:last-child { color: #f2efea; font-weight: 600; }
.ug-stat-table tr:nth-child(even) td { background: rgba(255,255,255,0.02); }

/* ── Counter lists ── */
.ug-counter-list { display: flex; flex-direction: column; gap: 5px; }
.ug-counter-item { padding: 6px 10px; border-radius: 6px; border: 1px solid #38342e; }
.ug-role-desc { font-size: 0.8rem; color: #e4dfd6; line-height: 1.5; }
.ug-role-path { font-size: 0.7rem; color: #948b7c; margin-top: 4px; }
.ug-counter-item.ug-strong { background: rgba(46,204,113,0.08); border-color: rgba(46,204,113,0.25); }
.ug-counter-item.ug-weak { background: rgba(231,76,60,0.08); border-color: rgba(231,76,60,0.25); }
.ug-counter-item.ug-upgrade { background: rgba(52,152,219,0.08); border-color: rgba(52,152,219,0.25); }
.ug-counter-tag { font-size: 0.82rem; font-weight: 700; color: #f2efea; display: block; }
.ug-strong .ug-counter-tag { color: #2ecc71; }
.ug-weak .ug-counter-tag { color: #e74c3c; }
.ug-upgrade .ug-counter-tag { color: #3498db; }
.ug-counter-detail { font-size: 0.72rem; color: #948b7c; display: block; margin-top: 2px; }
.ug-counter-empty { font-size: 0.82rem; color: #5e574d; font-style: italic; }

/* ── Faction chips ── */
.ug-faction-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ug-faction-chip { font-size: 0.72rem; padding: 4px 10px; border-radius: 5px; font-weight: 600; }
.ug-faction-yes { background: rgba(46,204,113,0.15); color: #2ecc71; border: 1px solid rgba(46,204,113,0.3); }
.ug-faction-no { background: rgba(231,76,60,0.1); color: #e74c3c; border: 1px solid rgba(231,76,60,0.2); opacity: 0.6; }

/* -- Chat -- */
.chat-box { margin-top: 18px; }
.chat-log { height: 160px; overflow-y: auto; background: #30291e; border-radius: 6px; padding: 6px 10px; font-size: 0.85rem; line-height: 1.45; margin-bottom: 8px; word-wrap: break-word; }
.chat-input { width: 100%; padding: 7px 10px; border-radius: 6px; border: 1px solid #52493a; background: #2e271a; color: #f2efea; font-size: 0.85rem; }
.chat-line { color: #e4dfd6; }
.chat-line.team .chat-text { color: #9ad0ff; }
.chat-from { font-weight: 600; }
.chat-tag { color: #9ad0ff; font-weight: 600; }
.panel.chat-box .chat-log { background: #3a3224; }
#game-chat { position: fixed; top: 96px; left: 16px; width: 420px; z-index: 60; pointer-events: none; display: none; }
#screen-game.active #game-chat { display: block; }
#game-chat-log .chat-line { background: rgba(20,16,11,0.55); padding: 2px 8px; border-radius: 4px; margin-bottom: 2px; width: fit-content; max-width: 100%; text-shadow: 0 1px 2px #000; animation: chat-fade 12s forwards; }
#game-chat.open #game-chat-log .chat-line { animation: none; opacity: 1; }
@keyframes chat-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.game-chat-row { display: none; align-items: center; gap: 6px; margin-top: 4px; background: rgba(20,16,11,0.85); border: 1px solid #52493a; border-radius: 6px; padding: 4px 8px; pointer-events: auto; }
#game-chat.open .game-chat-row { display: flex; }
#game-chat-scope { font-size: 0.8rem; font-weight: 700; color: #e4dfd6; }
#game-chat-scope.team { color: #9ad0ff; }
#game-chat-input { flex: 1; background: transparent; border: none; outline: none; color: #f2efea; font-size: 0.85rem; }

/* -- Ranked / leaderboard -- */
.ranked-note { font-size: 0.78rem; color: #948b7c; margin-top: 6px; }
.ranked-toggle { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; text-transform: none; letter-spacing: 0; }
.field .ranked-toggle { display: flex; margin: 0; min-height: 44px; color: var(--menu-paper, #f2efea); }
.field .ranked-toggle input { flex: none; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: #7bed9f; cursor: pointer; }
.ranked-toggle input:disabled { cursor: not-allowed; }
.rating-badge { font-size: 0.72rem; font-weight: 700; color: #f2b632; background: rgba(0,0,0,0.3); border: 1px solid rgba(242,182,50,0.35); border-radius: 4px; padding: 0 5px; }
.ranked-note.ok { color: #7bed9f; }
.ranked-note.warn { color: #f39c12; }
.map-picker { display: flex; gap: 10px; align-items: flex-start; }
.map-preview { width: 120px; height: 120px; flex: 0 0 120px; border: 1px solid #52493a; border-radius: 6px; background: #2e271a; image-rendering: pixelated; }
.map-picker-controls { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.map-info { font-size: 0.78rem; color: #b3aca2; }
.map-info .map-fit-warn { color: #f39c12; }
.leaderboard-modal { width: 640px; max-width: 94vw; max-height: 86vh; display: flex; flex-direction: column; }
.lb-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lb-header h2 { margin-bottom: 0; }
.lb-tabs { display: flex; gap: 6px; }
.lb-tab { background: #30291e; color: #b3aca2; border: 1px solid #52493a; }
.lb-tab.active { background: #7bed9f; color: #2e271a; border-color: #7bed9f; }
.lb-me { margin: 14px 0 10px; color: #d7cfc1; font-size: 0.9rem; }
.lb-body { overflow-y: auto; flex: 1; min-height: 160px; }
.lb-table { max-width: none; font-size: 0.88rem; }
.lb-table th, .lb-table td { padding: 7px 10px; }
.lb-empty { color: #837a6b; text-align: center; padding: 40px 0; }
.credits-modal { width: 640px; max-width: 94vw; max-height: 86vh; display: flex; flex-direction: column; }
.credits-body { overflow-y: auto; flex: 1; padding-right: 6px; }
.credits-intro { color: #d7cfc1; font-size: 0.9rem; margin: 6px 0 4px; }
.credits-body h3 { color: #7bed9f; font-size: 0.95rem; margin: 16px 0 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.credits-list { list-style: none; margin: 0; padding: 0; }
.credits-list li { padding: 6px 0; border-bottom: 1px solid #3a3226; color: #d7cfc1; font-size: 0.88rem; }
.credits-work a { color: #f6c453; }
.credits-meta { color: #9b9282; font-size: 0.78rem; margin-top: 2px; }
.credits-meta a { color: #b3aca2; }
.home-credits-link { display: block; margin: 18px auto 0; text-align: center; color: #9b9282; font-size: 0.85rem; }
.home-credits-link a { color: inherit; }
.home-credits-link a:hover { color: #d7cfc1; }
.home-legal-note { margin: 0; font-size: 0.75rem; color: #9b9282; text-align: center; }
.home-legal-note a { color: #b8b2a4; }
.btn-danger-text { color: #e8907c !important; }
.delete-account-warn { color: #e8c8bc; font-size: 0.88rem; line-height: 1.45; margin: 0 0 12px; }
.lb-note { color: #837a6b; font-size: 0.75rem; margin-top: 10px; }
.lb-up { color: #7bed9f; }
.lb-down { color: #e74c3c; }
.lb-unrated { color: #837a6b; font-size: 0.8rem; }
.lb-match { background: #30291e; border-left: 4px solid #5e574d; border-radius: 6px; padding: 8px 12px; margin-bottom: 8px; font-size: 0.85rem; }
.lb-match.won { border-left-color: #7bed9f; }
.lb-match.lost { border-left-color: #e74c3c; }
.lb-match-top { display: flex; gap: 6px; align-items: baseline; color: #d7cfc1; }
.lb-match-rating { margin-left: auto; }
.lb-match-players { margin-top: 4px; color: #b3aca2; }
.lb-player.won { color: #7bed9f; font-weight: 600; }
.lb-match-date { color: #70695c; font-size: 0.75rem; margin-top: 2px; }
#overlay-rating { color: #e4dfd6; font-size: 1.05rem; }
#mobile-command-dock, #mobile-command-hint { display: none; }

@media (max-width: 760px), (pointer: coarse) {
	:root { --mobile-dock-height: 68px; }
	html, body { width: 100%; min-height: 100%; overflow-x: hidden; overscroll-behavior: none; }
	body { min-height: 100dvh; }
	button, input, select { touch-action: manipulation; }
	button { min-height: 42px; }
	input, select { min-height: 44px; font-size: 16px !important; }
	.screen { min-height: 100dvh; padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); }

	#screen-home h1 { font-size: 2.2rem; }
	#screen-home .subtitle { margin-bottom: 24px; text-align: center; }
	.home-card { width: min(100%, 420px); }
	.home-form { padding: 18px; }

	#screen-lobby { display: none; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
	#screen-lobby.active { display: flex; }
	.lobby-header { align-items: flex-start; margin-bottom: 12px; }
	.lobby-header h2 { font-size: 1.2rem; }
	.lobby-header-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
	.lobby-header-btns .btn { min-width: 0; min-height: 42px; padding: 8px; font-size: 0.75rem; }
	.lobby-body { flex: 1; min-height: 0; overflow-y: auto; gap: 12px; }
	.lobby-main { width: 100%; }
	.lobby-main table { display: block; overflow-x: auto; white-space: nowrap; }
	.lobby-main th, .lobby-main td { padding: 9px 8px; font-size: 0.78rem; }
	.lobby-sidebar { width: 100%; }
	.lobby-leftbar { width: 100%; }
	.lobby-adminbar { width: 100%; }
	.lobby-chat .chat-log { height: min(22dvh, 180px); }

	.waiting-wrap { max-width: none; }
	#screen-waiting { padding: max(12px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)); }
	.player-row { gap: 6px; font-size: 0.84rem; }
	.panel { padding: 14px; margin-bottom: 12px; }
	.waiting-actions { position: sticky; bottom: env(safe-area-inset-bottom); z-index: 10; padding: 8px; background: rgba(46,39,26,0.96); border-radius: 10px; }
	.waiting-actions .btn { flex: 1; min-height: 46px; }

	.modal-overlay { padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); align-items: flex-end; }
	.modal { width: 100%; max-width: 520px; max-height: 92dvh; overflow-y: auto; padding: 20px; border-radius: 16px 16px 10px 10px; }
	.modal-btns .btn { flex: 1; min-height: 46px; }
	.leaderboard-modal { max-height: 92dvh; }
	.lb-header { align-items: flex-start; flex-direction: column; }
	.lb-tabs { width: 100%; }
	.lb-tabs .btn { flex: 1; }
	.lb-table { min-width: 460px; }

	#tech-tree-overlay, #unit-guide-overlay, #stats-overlay { padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
	#tech-tree-panel, #unit-guide-panel, #stats-panel { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
	#tech-tree-header { padding: 10px 12px; gap: 6px; }
	#tech-tree-tabs { overflow-x: auto; }
	.tt-tab { min-width: 72px; }
	#tech-tree-body, #stats-body { padding: 12px; }
	.tt-cards-row { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
	.tt-line { grid-template-columns: 1fr; gap: 4px; }
	.tt-line-name { padding-top: 0; }
	.tt-line-cards { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
	#tech-tree-body { overflow-x: auto; }
	.tt-grid { grid-template-columns: 96px repeat(4, 150px); gap: 6px; }
	.tt-grid-head { top: -12px; }
	#unit-guide-body { flex-direction: column; overflow-y: auto; }
	.ug-grid-col { width: 100%; min-width: 0; max-height: 32dvh; overflow-y: auto; border-right: 0; border-bottom: 1px solid #443c2e; }
	.ug-detail-col { min-height: 0; padding: 14px; }
	.ug-card { width: 68px; }
	.stats-chart-row { flex-direction: column; gap: 10px; }
	.stats-chart-wrap { min-width: 0; width: 100%; }
	#stats-units-table { overflow-x: auto; }
	#stats-units-table table { min-width: 560px; }

	#screen-game, #screen-game.active {
		position: fixed;
		inset: 0;
		width: 100vw;
		height: 100dvh;
		min-height: 0;
		overflow: hidden;
		padding: 0;
	}
	#screen-game .hud {
		position: fixed;
		z-index: 80;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 4px;
		padding: calc(4px + env(safe-area-inset-top)) 8px 6px;
		background: rgba(37,31,20,0.96);
		border-bottom-width: 2px;
	}
	.hud-players { grid-column: 1 / -1; min-width: 0; overflow-x: auto; gap: 12px; scrollbar-width: none; }
	.hud-players::-webkit-scrollbar { display: none; }
	.hud-player { flex: 0 0 auto; gap: 5px; font-size: 0.72rem; }
	.color-pip { width: 8px; height: 8px; }
	.hud-nectar, .hud-wood, .hud-pollen, .hud-pop, .hud-workers { min-width: 0; font-size: 0.72rem; letter-spacing: 0; text-align: center; white-space: nowrap; }
	.hud-res-workers { display: none; }
	.hud-idle-btn { min-height: 32px; padding: 2px 4px; font-size: 0.68rem; }
	.hud-tiers { grid-column: span 3; min-width: 0; gap: 3px; }
	.tier-item { flex: 1; min-width: 0; }
	.tier-badge { padding: 3px 4px; font-size: 0.58rem; letter-spacing: 0; text-align: center; flex: 1; min-width: 0; }
	#screen-game .hud > .btn { min-height: 32px; padding: 4px 6px; font-size: 0.68rem; white-space: nowrap; }
	#screen-game .hud > .btn-secondary { margin-left: 0 !important; }
	#game-canvas {
		position: fixed;
		z-index: 1;
		left: 0;
		top: var(--game-hud-height, 82px);
		width: 100vw;
		height: calc(100dvh - var(--game-hud-height, 82px) - var(--mobile-dock-height, 68px));
		touch-action: none;
		cursor: grab;
	}
	#mobile-command-dock {
		position: fixed;
		z-index: 110;
		left: 0;
		right: 0;
		bottom: 0;
		min-height: calc(var(--mobile-dock-height, 68px) + env(safe-area-inset-bottom));
		display: grid;
		display: grid;
		grid-template-columns: repeat(7, minmax(42px, 1fr));
		gap: 3px;
		padding: 5px 5px calc(5px + env(safe-area-inset-bottom));
		overflow-x: auto;
		background: rgba(37,31,20,0.98);
		border-top: 1px solid #52493a;
		scrollbar-width: none;
	}
	#mobile-command-dock::-webkit-scrollbar { display: none; }
	#mobile-command-dock button {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		min-width: 42px;
		min-height: 54px;
		padding: 4px 2px;
		border: 1px solid #52493a;
		border-radius: 8px;
		color: #c9d1d9;
		background: #3a3224;
		font: inherit;
		touch-action: manipulation;
	}
	#mobile-command-dock button span { font-size: 1.05rem; line-height: 1; }
	#mobile-command-dock button small { font-size: 0.58rem; line-height: 1.1; }
	#mobile-command-dock button[aria-pressed="true"] { color: #7bed9f; background: #1a3326; border-color: #7bed9f; }
	#mobile-command-hint {
		display: none;
		position: fixed;
		z-index: 109;
		left: 50%;
		bottom: calc(var(--mobile-dock-height, 68px) + 10px);
		transform: translateX(-50%);
		max-width: calc(100vw - 24px);
		padding: 8px 12px;
		border: 1px solid rgba(123,237,159,0.45);
		border-radius: 8px;
		color: #edf7ef;
		background: rgba(28,24,18,0.94);
		font-size: 0.78rem;
		text-align: center;
		pointer-events: none;
	}
	#mobile-command-hint.visible { display: block; }
	#minimap-wrap {
		top: calc(var(--game-hud-height, 82px) + 8px);
		right: 8px;
		bottom: auto;
		transform: translateX(calc(100% + 12px));
		transition: transform 0.18s ease-out;
	}
	html.mobile-map-open #minimap-wrap.visible { transform: translateX(0); }
	#minimap-canvas { width: min(38vw, 150px); height: auto; aspect-ratio: 4 / 3; touch-action: manipulation; }
	#minimap-scores { max-height: 18dvh; overflow-y: auto; }
	#building-panel, #building-action-panel, #unit-info-panel, #unit-command-panel, #unit-action-panel, #resource-panel {
		position: fixed !important;
		left: 8px !important;
		right: 8px !important;
		width: auto;
		max-width: none;
		max-height: 34dvh;
		overflow-y: auto;
		border-radius: 12px;
		padding: 10px 12px;
		z-index: 90;
		box-shadow: 0 8px 28px rgba(0,0,0,0.72);
	}
	#building-panel, #unit-info-panel, #unit-command-panel, #resource-panel {
		bottom: calc(var(--mobile-dock-height, 68px) + 8px) !important;
	}
	#building-action-panel, #unit-action-panel {
		bottom: calc(var(--mobile-dock-height, 68px) + 8px) !important;
		max-height: 32dvh;
	}
	#building-panel, #building-action-panel, #unit-info-panel, #unit-command-panel, #unit-action-panel, #resource-panel {
		transition: transform 0.18s ease-out;
		pointer-events: auto;
	}
	html:not(.mobile-panels-open) #building-panel,
	html:not(.mobile-panels-open) #building-action-panel,
	html:not(.mobile-panels-open) #unit-info-panel,
	html:not(.mobile-panels-open) #unit-command-panel,
	html:not(.mobile-panels-open) #unit-action-panel,
	html:not(.mobile-panels-open) #resource-panel {
		transform: translateY(calc(100% + 24px));
		pointer-events: none;
	}
	html.mobile-panels-open #building-panel,
	html.mobile-panels-open #building-action-panel,
	html.mobile-panels-open #unit-info-panel,
	html.mobile-panels-open #unit-command-panel,
	html.mobile-panels-open #unit-action-panel,
	html.mobile-panels-open #resource-panel { transform: translateY(0); }
	#unit-command-panel { flex-wrap: wrap; gap: 8px; }
	.ucp-stat { font-size: 0.68rem; }
	.ucp-btn { width: 44px; height: 44px; }
	#unit-action-panel #uip-build-buttons { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto; grid-auto-flow: row; }
	#unit-action-panel #uip-build-buttons .build-page-arrow { grid-row: auto; }
	.build-card, .train-card, .tech-card { min-height: 54px; }
	#building-action-panel { gap: 6px; }
	.train-grid, .tech-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	#multi-select-bar { bottom: calc(var(--mobile-dock-height, 68px) + 8px); max-width: calc(100vw - 16px); overflow-x: auto; }
	#control-group-bar { top: calc(var(--game-hud-height, 82px) + 4px); left: 8px; max-width: 55vw; overflow-x: auto; }
	.cg-slot { min-width: 38px; min-height: 40px; }
	#ability-bar { bottom: auto; top: calc(var(--game-hud-height, 82px) + 4px); right: 8px; }
	.ability-btn { width: 52px; height: 52px; }
	.ability-name { display: none; }
	#game-chat { top: auto; bottom: calc(var(--mobile-dock-height, 68px) + 8px); left: 8px; width: min(360px, calc(100vw - 16px)); }
	#game-chat-log { max-height: 24dvh; overflow-y: auto; }
	#game-chat.open { z-index: 120; }
	#game-chat.open .game-chat-row { min-height: 46px; }
	#game-chat-input { min-width: 0; font-size: 16px; }
	#toast { bottom: calc(var(--mobile-dock-height, 68px) + 12px); max-width: calc(100vw - 24px); text-align: center; }
	#game-overlay { top: 50%; left: 12px; right: 12px; transform: translateY(-50%); padding: 18px; }
	#overlay-title { font-size: 2.2rem; }
}

@media (max-width: 420px) {
	.hud-player { font-size: 0.66rem; }
	.tier-badge { font-size: 0.54rem; padding: 3px 2px; }
	#mobile-command-dock { grid-template-columns: repeat(7, minmax(40px, 1fr)); padding-left: 3px; padding-right: 3px; gap: 2px; }
	#mobile-command-dock button small { font-size: 0.54rem; }
	#bp-info { gap: 1px; }
	.bp-info-row { font-size: 0.7rem; }
}

@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
	:root { --mobile-dock-height: 58px; }
	#screen-game .hud { grid-template-columns: auto repeat(9, minmax(0, 1fr)); padding-top: env(safe-area-inset-top); }
	.hud-players { grid-column: auto; max-width: 26vw; }
	#mobile-command-dock { grid-template-columns: repeat(7, minmax(48px, 1fr)); left: auto; width: min(52vw, 430px); min-height: calc(54px + env(safe-area-inset-bottom)); }
	#mobile-command-dock button { min-height: 46px; }
	#game-canvas { width: 100vw; }
	#building-panel, #building-action-panel, #unit-info-panel, #unit-command-panel, #unit-action-panel, #resource-panel { max-height: 52dvh; }
}

/* -- AI players -- */
.add-bot-row { display: flex; gap: 8px; align-items: center; margin: -8px 0 18px; }
.add-bot-row select { background: #30291e; color: #e4dfd6; border: 1px solid #52493a; border-radius: 6px; padding: 4px 6px; font-size: 0.8rem; }
.bot-select { background: #30291e; color: #e4dfd6; border: 1px solid #52493a; border-radius: 5px; padding: 2px 4px; font-size: 0.75rem; max-width: 130px; }

/* ── Menu design system ── */
:root {
	--menu-ink: #15110b;
	--menu-surface: #231d14;
	--menu-raised: #2d261a;
	--menu-line: #4a4234;
	--menu-paper: #edf0df;
	--menu-muted: #b2aca2;
	--menu-leaf: #b8dc82;
	--menu-coral: #ee9872;
}

body { background: var(--menu-ink); color: var(--menu-paper); font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; }
.screen:not(#screen-game) { color: var(--menu-paper); }

/* Home */
#screen-home {
	position: relative;
	isolation: isolate;
	display: none;
	grid-template-columns: minmax(0, 1fr) minmax(340px, 410px);
	grid-template-rows: auto auto auto;
	align-content: center;
	align-items: center;
	justify-content: center;
	column-gap: clamp(40px, 8vw, 128px);
	row-gap: 8px;
	width: min(1180px, 100%);
	min-height: 100dvh;
	margin: 0 auto;
	padding: 56px 44px;
	background-color: var(--menu-ink);
	background-image: repeating-linear-gradient(135deg, transparent 0 42px, rgba(194,223,151,0.018) 42px 43px);
}
#screen-home.active { display: grid; }
/* Decorative insects wandering behind the home/lobby content (screens/homeCritters.js) */
.home-critters { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }
#screen-home::before {
	content: '';
	position: absolute;
	z-index: -1;
	left: 3%;
	top: 50%;
	width: min(38vw, 460px);
	aspect-ratio: 1;
	transform: translateY(-50%);
	background: url('../assets/sprites/emblems/formicidae.png') center / contain no-repeat;
	opacity: 0.24;
	filter: saturate(0.8);
}
#screen-home h1 {
	grid-column: 1;
	grid-row: 1;
	align-self: end;
	color: var(--menu-paper);
	font-family: 'Trebuchet MS', 'Arial Rounded MT Bold', sans-serif;
	font-size: 3rem;
	font-weight: 900;
	letter-spacing: 0;
	color: #eff7dc;
	text-shadow: 0 3px 24px rgba(0,0,0,0.5);
}
.home-emblem { width: 52px; height: 52px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.35)); }
#screen-home .subtitle {
	grid-column: 1;
	grid-row: 2;
	align-self: start;
	margin: 4px 0 0;
	color: #b4c4ac;
	font-size: 1rem;
}
.home-card {
	grid-column: 2;
	grid-row: 1 / span 3;
	width: 100%;
	overflow: hidden;
	border: 1px solid rgba(195,219,167,0.28);
	border-top: 3px solid var(--menu-coral);
	border-radius: 10px;
	background: rgba(31,26,17,0.94);
	box-shadow: 0 22px 70px rgba(0,0,0,0.42);
	backdrop-filter: blur(12px);
}
.home-tabs { padding: 6px; gap: 4px; background: #1a160e; border-bottom: 1px solid var(--menu-line); }
.home-tab { min-height: 44px; padding: 10px 8px; border: 0; border-radius: 6px; color: #a69f94; font-size: 0.84rem; letter-spacing: 0; }
.home-tab:hover { color: var(--menu-paper); background: rgba(255,255,255,0.04); }
.home-tab.active { color: var(--menu-leaf); border: 1px solid rgba(184,220,130,0.24); background: var(--menu-raised); }
.home-form { gap: 14px; padding: 24px; }
.home-form input { min-height: 48px; padding: 12px 14px; border: 1px solid #534c40; border-radius: 6px; background: #17130c; color: var(--menu-paper); }
.home-form input:focus { border-color: var(--menu-leaf); box-shadow: 0 0 0 3px rgba(184,220,130,0.12); }
.home-forgot { align-self: center; font-size: 0.85rem; color: #b8b2a4; }
.home-forgot:hover { color: var(--menu-leaf); }
.home-reset-title { font-weight: 600; color: var(--menu-paper); }
.home-changelog {
	grid-column: 1;
	grid-row: 3;
	align-self: start;
	max-width: 520px;
	max-height: 38vh;
	overflow-y: auto;
	margin-top: 18px;
	padding: 12px 16px;
	border: 1px solid rgba(195,219,167,0.18);
	border-radius: 8px;
	background: rgba(31,26,17,0.72);
}
.home-changelog h2 { margin: 0 0 6px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--menu-leaf); }
.home-changelog details + details { margin-top: 6px; border-top: 1px solid rgba(195,219,167,0.12); padding-top: 6px; }
.home-changelog summary { display: flex; justify-content: space-between; gap: 10px; cursor: pointer; color: #eff7dc; font-weight: 700; font-size: 0.92rem; }
.home-changelog .cl-date { color: #8f9a86; font-weight: 400; font-size: 0.78rem; white-space: nowrap; }
.home-changelog ul { margin: 6px 0 2px; padding-left: 18px; color: #c9d4bf; font-size: 0.84rem; line-height: 1.45; }
.home-changelog li + li { margin-top: 3px; }

/* Shared menu controls */
#screen-home .btn, #screen-lobby .btn, #screen-waiting .btn, .modal-overlay .btn {
	min-height: 42px;
	border: 1px solid transparent;
	border-radius: 6px;
	font-family: inherit;
	font-weight: 700;
	letter-spacing: 0;
}
#screen-home .btn-primary, #screen-lobby .btn-primary, #screen-waiting .btn-primary, .modal-overlay .btn-primary {
	color: #201b12;
	background: var(--menu-leaf);
	box-shadow: inset 0 -2px rgba(28,57,26,0.18);
}
#screen-home .btn-primary:hover, #screen-lobby .btn-primary:hover, #screen-waiting .btn-primary:hover, .modal-overlay .btn-primary:hover { filter: brightness(1.06); }
#screen-home .btn-secondary, #screen-lobby .btn-secondary, #screen-waiting .btn-secondary, .modal-overlay .btn-secondary {
	color: #d5dfd0;
	border-color: var(--menu-line);
	background: #2a241a;
}
#screen-home .btn-danger, #screen-lobby .btn-danger, #screen-waiting .btn-danger, .modal-overlay .btn-danger {
	color: #fff5ef;
	background: #aa543e;
}
#screen-home .btn, #screen-lobby .btn, #screen-waiting .btn, .modal-overlay .btn { transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.14s ease; }
#screen-home .btn-primary:hover, #screen-lobby .btn-primary:hover, #screen-waiting .btn-primary:hover, .modal-overlay .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(184,220,130,0.18); }

/* Lobby */
#screen-lobby {
	display: none;
	align-items: stretch;
	min-height: 100dvh;
	padding: 0;
	background: var(--menu-ink);
	background-image: repeating-linear-gradient(135deg, transparent 0 48px, rgba(194,223,151,0.014) 48px 49px);
}
#screen-lobby.active { display: flex; }
.lobby-header {
	flex-wrap: wrap;
	gap: 14px 24px;
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 20px max(24px, calc((100vw - 1180px) / 2));
	border-bottom: 1px solid var(--menu-line);
	background: linear-gradient(90deg, #221c13, #292318 62%, #2c261c);
}
.lobby-header h2 { color: var(--menu-paper); font-family: 'Trebuchet MS', 'Arial Rounded MT Bold', sans-serif; font-size: 1.55rem; font-weight: 900; letter-spacing: 0; }
.lobby-header > span { color: var(--menu-leaf) !important; font-variant-numeric: tabular-nums; }
.lobby-header-btns { flex-wrap: wrap; gap: 7px; margin-left: auto; }
.lobby-header-btns .btn-sm { padding: 7px 11px; font-size: 0.76rem; }
.lobby-rooms-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.lobby-rooms-bar h3 { margin: 0 auto 0 0; color: var(--menu-paper); font-size: 1.05rem; font-weight: 800; }
.lobby-body { flex: 1; align-items: flex-start; gap: 24px; width: min(1400px, calc(100% - 48px)); max-width: none; margin: 26px auto 40px; }
.lobby-main { min-width: 0; }
.lobby-main table, table { max-width: none; }
.lobby-main table { border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--menu-line); border-radius: 8px; background: #1d1911; }
.lobby-main th { padding: 12px 14px; color: #c8d3bf; border-bottom: 1px solid var(--menu-line); background: #2b251b; font-size: 0.68rem; letter-spacing: 0.8px; }
.lobby-main td { padding: 13px 14px; color: #dce4d8; border-bottom: 1px solid rgba(101,92,76,0.34); }
.lobby-main tr:last-child td { border-bottom: 0; }
.lobby-main tr:hover td { background: rgba(184,220,130,0.045); }
.empty-row td { height: 130px; color: var(--menu-muted); text-align: center; }
.empty-row td { padding-top: 66px; background-image: url('../assets/sprites/units/worker_ant/idle/frame_000.png'); background-repeat: no-repeat; background-position: center 18px; background-size: 34px 34px; image-rendering: pixelated; color: #c6d4b7; font-weight: 700; }
.ready-dot { border: 2px solid rgba(255,255,255,0.18); }
.host-badge { background: #e9a449; border-radius: 999px; }
.faction-badge { color: #e3edda; border: 1px solid rgba(184,220,130,0.24); border-radius: 999px; background: #342d20; }
.team-badge { border-radius: 999px; padding: 3px 8px; }
.lobby-sidebar { width: 260px; gap: 12px; }
.lobby-leftbar { width: 210px; gap: 12px; }
.lobby-adminbar { width: 250px; gap: 12px; }
#lobby-stats-panel, #lobby-friends-panel, #lobby-power-panel, #lobby-admin-panel { padding: 16px; border: 1px solid var(--menu-line); border-radius: 8px; background: var(--menu-surface); }
.sidebar-heading { color: var(--menu-leaf); font-size: 0.76rem; letter-spacing: 0.6px; }
.stat-row { color: #c0cabe; }
.stat-row span:last-child { color: var(--menu-paper); font-variant-numeric: tabular-nums; }
.lobby-chat { margin-top: 22px; padding: 14px 0 0; border-top: 1px solid var(--menu-line); background: transparent; }
.lobby-chat .chat-log { height: 210px; border: 1px solid rgba(91,83,68,0.55); border-radius: 7px; background: #19150e; }
.lobby-chat .chat-input { min-height: 44px; border-color: var(--menu-line); background: #1d1911; }
.panel.chat-box .chat-log { border: 1px solid rgba(91,83,68,0.55); background: #19150e; }
.chat-input { border-color: var(--menu-line); background: #1d1911; color: var(--menu-paper); }
.add-bot-row select, .bot-select { border: 1px solid var(--menu-line); border-radius: 6px; background: #1b1710; color: var(--menu-paper); }
.ready-dot { box-shadow: 0 0 0 3px rgba(238,152,114,0.12); }
.ready-dot.ready { box-shadow: 0 0 0 3px rgba(184,220,130,0.12); }

/* Waiting room and dialogs */
#screen-waiting { align-items: stretch; min-height: 100dvh; padding: 28px 22px; background: var(--menu-ink); }
.waiting-wrap { max-width: 1060px; margin: 0 auto; }
.waiting-wrap h2 { color: var(--menu-paper); font-family: Georgia, 'Palatino Linotype', serif; font-size: 1.7rem; }
.room-meta { color: var(--menu-muted); }
.panel { border: 1px solid rgba(101,92,76,0.62); border-radius: 8px; background: var(--menu-surface); }
.panel h3 { color: var(--menu-leaf); letter-spacing: 0.8px; }
.waiting-wrap h2 { color: #eff7dc; }
.field label { color: #b4c1b0; }
.field input, .field select { min-height: 44px; border-color: var(--menu-line); border-radius: 6px; background: #19150e; color: var(--menu-paper); }
.modal-overlay { background: rgba(4,10,6,0.78); backdrop-filter: blur(5px); }
.modal { border: 1px solid var(--menu-line); border-top: 3px solid var(--menu-coral); border-radius: 9px; background: #231e15; box-shadow: 0 24px 70px rgba(0,0,0,0.55); }
.modal h2 { color: var(--menu-paper); font-family: Georgia, 'Palatino Linotype', serif; }
.leaderboard-modal, #tech-tree-panel, #unit-guide-panel, #stats-panel { border-color: var(--menu-line); background: #1c1810; }
.lb-match, .lb-tab, #tech-tree-header, #unit-guide-header, #stats-header { background: var(--menu-surface); }

/* Natural menu backdrop: dark wooden planks seen from above, with leaves, ferns,
   twigs and moss lying in each corner (home/lobby/waiting).
   Textures live in assets/ui/*.svg (wood.svg, floor-{tl,tr,bl,br}.svg). */
body:has(#screen-home.active), body:has(#screen-lobby.active), body:has(#screen-waiting.active) {
	background-color: #2a1d12;
	background-image:
		url('../assets/ui/floor-tl.svg'),
		url('../assets/ui/floor-tr.svg'),
		url('../assets/ui/floor-bl.svg'),
		url('../assets/ui/floor-br.svg'),
		radial-gradient(ellipse 110% 90% at 50% 45%, rgba(10,6,3,0.2) 35%, rgba(8,5,2,0.75) 100%),
		url('../assets/ui/wood.svg');
	background-size: clamp(240px, 32vw, 520px), clamp(240px, 32vw, 520px), clamp(240px, 32vw, 520px), clamp(240px, 32vw, 520px), auto, 640px 480px;
	background-position: left top, right top, left bottom, right bottom, center, 0 0;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
	background-attachment: fixed;
}
#screen-home, #screen-lobby, #screen-waiting { background: transparent; }
#screen-home::before { opacity: 0.16; filter: saturate(0.7) sepia(0.25); }

.home-card, .home-changelog, #lobby-stats-panel, #lobby-friends-panel, #lobby-online-panel, #lobby-power-panel, #lobby-admin-panel, .lobby-main table,
.lobby-chat .chat-log, .panel, .modal {
	background-image: url('../assets/ui/fibre.svg');
	background-size: 240px 240px;
}
.home-card { background-color: rgba(34,28,17,0.93); border-color: rgba(176,200,130,0.26); }
.home-tabs { background: #1a150c url('../assets/ui/fibre.svg') 0 0 / 240px 240px; }
.lobby-header {
	border-bottom: 2px solid #34401f;
	background:
		url('../assets/ui/fibre.svg') 0 0 / 240px 240px,
		repeating-linear-gradient(178deg, rgba(0,0,0,0.16) 0 2px, transparent 2px 6px, rgba(255,235,190,0.025) 6px 7px, transparent 7px 11px),
		linear-gradient(90deg, #241c12, #2b2316 62%, #2e2619);
	box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

@media (max-width: 760px), (pointer: coarse) {
	#screen-home {
		width: 100%;
		min-height: 100dvh;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto auto;
		align-content: center;
		gap: 8px;
		padding: max(26px, env(safe-area-inset-top)) 20px max(26px, env(safe-area-inset-bottom));
	}
	#screen-home::before { left: auto; right: -12%; top: 3%; width: 58vw; transform: none; opacity: 0.14; }
	#screen-home h1 { grid-column: 1; grid-row: 1; align-self: end; gap: 10px; font-size: 2.15rem; }
	.home-emblem { width: 42px; height: 42px; }
	#screen-home .subtitle { grid-column: 1; grid-row: 2; margin: 0 0 16px; font-size: 0.9rem; }
	.home-card { grid-column: 1; grid-row: 3; width: 100%; max-width: 460px; justify-self: center; }
	.home-changelog { grid-column: 1; grid-row: 4; width: 100%; max-width: 460px; justify-self: center; max-height: none; margin-top: 10px; }
	.home-form { padding: 18px; }

	#screen-lobby { padding: 0; }
	.lobby-header { padding: max(14px, env(safe-area-inset-top)) 14px 14px; gap: 10px; }
	.lobby-header h2 { font-size: 1.28rem; }
	.lobby-header-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin: 0; gap: 5px; }
	.lobby-header-btns .btn-sm { min-width: 0; min-height: 44px; padding: 5px 4px; font-size: 0.67rem; white-space: normal; line-height: 1.15; }
	.lobby-header-btns { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.lobby-rooms-bar .btn-sm { min-height: 44px; }
	.lobby-body { flex-direction: column; gap: 16px; width: calc(100% - 28px); margin: 16px auto max(24px, env(safe-area-inset-bottom)); overflow: visible; }
	.lobby-sidebar { width: 100%; }
	.lobby-leftbar { width: 100%; order: 2; }
	.lobby-sidebar { order: 3; }
	.lobby-adminbar { width: 100%; order: 4; }
	.lobby-main table { display: table; width: 100%; table-layout: fixed; white-space: normal; }
	.lobby-main th, .lobby-main td { padding: 9px 6px; font-size: 0.72rem; overflow-wrap: anywhere; }
	.lobby-main th { font-size: 0.59rem; letter-spacing: 0.3px; }
	.lobby-main th:first-child, .lobby-main td:first-child { width: 38%; }
	.lobby-main th:last-child, .lobby-main td:last-child { width: 66px; }
	.empty-row td { height: 92px; }
	.lobby-chat .chat-log { height: 160px; }

	#screen-waiting { padding: max(14px, env(safe-area-inset-top)) 14px max(20px, env(safe-area-inset-bottom)); }
	.waiting-wrap { width: 100%; }
	.waiting-wrap h2 { font-size: 1.42rem; }
	.waiting-actions { bottom: 0; border: 1px solid var(--menu-line); }
}

/* Hotkey hints */
.train-card { position: relative; padding-top: 12px; }
.key-hint { display: inline-block; font-size: 0.6rem; font-weight: 700; color: #cabfac; background: rgba(0,0,0,0.45); border: 1px solid #5e574d; border-radius: 3px; padding: 0 4px; line-height: 1.4; vertical-align: middle; margin-left: 4px; letter-spacing: 0; }
.queue-key-hint { align-self: center; font-size: 0.6rem; color: #948b7c; margin-left: 4px; }
#hotkey-help { display: none; position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 120; background: #30291e; border: 2px solid var(--stage-color, var(--faction-color)); border-radius: 10px; padding: 12px 16px; box-shadow: 0 4px 18px rgba(0,0,0,0.55); cursor: pointer; }
#hotkey-help.open { display: block; }
#hotkey-help dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 8px 0 0; font-size: 0.78rem; }
#hotkey-help dt { font-weight: 700; color: #ffd36b; white-space: nowrap; }
#hotkey-help dd { margin: 0; color: #e4dfd6; }
#volume-panel { display: none; position: fixed; top: 60px; right: 16px; z-index: 130; width: 220px; background: #30291e; color: #e4dfd6; border: 2px solid var(--stage-color, var(--faction-color, #ece6d6)); border-radius: 10px; padding: 12px 16px; box-shadow: 0 4px 18px rgba(0,0,0,0.55); font-size: 0.8rem; }
#volume-panel.open { display: block; }
#volume-panel label { display: flex; justify-content: space-between; margin-top: 8px; }
#volume-panel input[type=range] { width: 100%; }
#game-menu { display: none; position: fixed; top: 52px; right: 16px; z-index: 130; flex-direction: column; gap: 6px; min-width: 160px; background: #30291e; border: 2px solid var(--stage-color, var(--faction-color, #ece6d6)); border-radius: 10px; padding: 10px; box-shadow: 0 4px 18px rgba(0,0,0,0.55); }
#game-menu.open { display: flex; }
#game-menu .btn { width: 100%; text-align: left; }
#settings-panel { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 140; width: 320px; max-width: calc(100vw - 32px); background: #30291e; color: #e4dfd6; border: 2px solid var(--stage-color, var(--faction-color, #ece6d6)); border-radius: 10px; padding: 14px 18px; box-shadow: 0 4px 24px rgba(0,0,0,0.65); font-size: 0.85rem; }
#settings-panel.open { display: block; }
#settings-panel .settings-group { margin-top: 12px; font-weight: 700; color: #ffd36b; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
#settings-panel label { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
#settings-panel label.settings-check { justify-content: flex-start; cursor: pointer; }
#settings-panel input[type=range] { width: 100%; }
#settings-panel .settings-actions { display: flex; justify-content: flex-end; margin-top: 14px; }

/* ── Developer sandbox panel (client/js/screens/sandbox.js) ── */
#sandbox-panel { position: fixed; top: calc(var(--game-hud-height, 120px) + 8px); right: 12px; z-index: 60; width: 250px; background: rgba(40,34,24,0.94); border: 1px solid #c79a3a; border-radius: 10px; color: #f2efea; font-size: 0.75rem; box-shadow: 0 4px 18px rgba(0,0,0,0.55); }
#sandbox-panel .sb-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; font-weight: bold; color: #f0c060; border-bottom: 1px solid #52493a; cursor: move; user-select: none; }
#sandbox-panel.collapsed .sb-body { display: none; }
#sandbox-panel.collapsed .sb-head { border-bottom: none; }
#sandbox-panel .sb-body { padding: 6px 10px 8px; display: flex; flex-direction: column; gap: 4px; max-height: calc(100vh - var(--game-hud-height, 120px) - 40px); overflow-y: auto; }
#sandbox-panel .sb-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
#sandbox-panel .sb-label { margin-top: 4px; color: var(--icon-tile); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; }
#sandbox-panel .sb-hint { color: #b8ad9a; font-size: 0.68rem; }
#sandbox-panel select { flex: 1; min-width: 0; background: #1e1a12; color: #f2efea; border: 1px solid #52493a; border-radius: 4px; padding: 2px; font-size: 0.75rem; }
#sandbox-panel input[type=number] { width: 44px; background: #1e1a12; color: #f2efea; border: 1px solid #52493a; border-radius: 4px; padding: 2px; }
#sandbox-panel button { background: #443b2c; color: #f2efea; border: 1px solid #6a5e4a; border-radius: 4px; padding: 3px 7px; font-size: 0.72rem; cursor: pointer; }
#sandbox-panel button:hover { background: #5a4e3a; }
#sandbox-panel .sb-toggles button.on { background: #3d6b2e; border-color: #7bed9f; }
#sandbox-panel .sb-owner label { display: flex; align-items: center; gap: 3px; margin-right: 8px; cursor: pointer; }
#game-canvas.sb-armed { cursor: crosshair; }