/* Cellshire — UI styling.
   Quarry-map panels use warm parchment, CKB cobalt, and restrained ore accents.
   All shapes are CSS only; in-game art is the generated pack. */

:root {
    --cream: #f4ede0;
    --cream-2: #ede4d2;
    --paper: #fbf6ec;
    --ink: #2b2a26;
    --ink-soft: #51504a;
    --muted: #8a8678;
    --line: #d9d0bd;
    --shadow: 0 8px 24px rgba(60, 50, 30, 0.10), 0 2px 6px rgba(60, 50, 30, 0.06);
    --shadow-lg: 0 18px 48px rgba(60, 50, 30, 0.16), 0 4px 12px rgba(60, 50, 30, 0.08);
    --cobalt: #1b5ba8;
    --cobalt-2: #2e6fbc;
    --cobalt-light: #d6e6f6;
    --terracotta: #c4622e;
    --leaf: #3d7355;
    --bougainvillea: #d85b8e;
    --sand: #e8d4a8;
    --water: #6ec8e0;
    --coal: #2f2b27;
    --ore-gold: #d9a92f;
    --radius: 14px;
    --radius-sm: 10px;
    --radius-lg: 22px;
    --edge-gap: 16px;
    --left-rail-width: 72px;
    --brand-font: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
    /* Title card height (roughly): 12px padding + 52px logo + 12px padding ≈ 76px.
       Toolbar anchors directly under this with a single edge-gap so the title
       and toolbar read as one connected left rail rather than two floating cards. */
    --title-card-height: 76px;
}

* { box-sizing: border-box; }

/* Play vs build mode. The placement toolbar + asset palette are hidden in
   the public mine and become visible in dev/property editing surfaces. */
body.mode-play #toolbar,
body.mode-play #palette,
body.mode-visit #toolbar,
body.mode-visit #palette {
    display: none !important;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: 'Inter', 'SF Pro Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--ink);
    background: linear-gradient(180deg, #f6efe1 0%, #ebe1cc 100%);
    /* iOS Safari sometimes "rubber-band" scrolls the page even when
       overflow is hidden — this disables it so swipe gestures stay
       inside the canvas where they belong. */
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    /* Use the dynamic viewport unit when available — on mobile Safari
       100vh includes the URL bar's hidden area, leaving the bottom of
       the canvas chopped off. 100dvh follows the actual visible area. */
    height: 100dvh;
}

#app.hidden { display: none; }

#game-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: block;
    background:
        radial-gradient(ellipse at 50% 30%, #fbf6ec 0%, #f0e7d2 60%, #e3d6ba 100%);
    cursor: crosshair;
    /* Stop the browser from interpreting touch gestures (scroll, pinch
       zoom, double-tap zoom, swipe-back nav). The InputManager handles
       all of them in JS now. */
    touch-action: none;
}

/* ── Economy HUD ──────────────────────────────────────────────── */

#economy-hud {
    position: fixed;
    right: 12px;
    bottom: 12px;
    width: min(420px, calc(100vw - 24px));
    z-index: 19;
    padding: 10px 12px;
    color: var(--ink);
    background: rgba(251, 246, 236, 0.94);
    border: 1px solid rgba(217, 208, 189, 0.9);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    font: 12px/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif;
    pointer-events: auto;
    user-select: none;
}

.economy-hud__header,
.economy-hud__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.economy-hud__header {
    margin-bottom: 2px;
}

.economy-hud__title {
    color: var(--cobalt);
    font-weight: 700;
    letter-spacing: 0;
}
.economy-hud__title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.economy-hud__source {
    border: 1px solid rgba(31, 42, 55, 0.14);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.62);
    color: var(--ink-soft);
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 6px;
    cursor: pointer;
    white-space: nowrap;
}
.economy-hud__source:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--ink);
}

.economy-hud__total {
    color: var(--coal);
    font-weight: 700;
}

.economy-hud__empty,
.economy-hud__detail {
    color: var(--muted);
    font-size: 11px;
}

.economy-hud__snapshot {
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 11px;
}

.economy-hud__snapshot summary {
    width: fit-content;
    cursor: pointer;
    list-style-position: outside;
}

.economy-hud__snapshot-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 8px;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid rgba(217, 208, 189, 0.55);
}

.economy-hud__snapshot-key {
    color: var(--ink-soft);
}

.economy-hud__snapshot-value {
    min-width: 0;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.economy-hud__row {
    min-height: 28px;
    padding: 4px 0;
    border-top: 1px solid rgba(217, 208, 189, 0.55);
}

.economy-hud__asset,
.economy-hud__label,
.economy-hud__balance {
    min-width: 0;
}

.economy-hud__asset {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.economy-hud__mark {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 252, 244, 0.86);
    border: 1px solid rgba(217, 208, 189, 0.7);
    color: var(--cobalt);
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    overflow: hidden;
}

.economy-hud__mark img {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.economy-hud__mark--fallback {
    font-size: 7px;
}

.economy-hud__symbol,
.economy-hud__amount {
    color: var(--ink);
    font-weight: 700;
}

.economy-hud__name,
.economy-hud__usd {
    color: var(--muted);
    font-size: 11px;
}

.economy-hud__balance {
    text-align: right;
}

.economy-hud__detail {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(217, 208, 189, 0.7);
    white-space: normal;
}

/* -- Resource inventory ----------------------------------------- */

#resource-hud {
    position: fixed;
    left: 16px;
    top: calc(16px + var(--title-card-height) + 112px);
    z-index: 18;
    width: min(190px, calc(100vw - 32px));
    padding: 9px 10px;
    border-radius: 8px;
    background: rgba(255, 252, 244, 0.94);
    border: 1px solid rgba(31, 42, 55, 0.12);
    box-shadow: var(--shadow);
    color: var(--ink);
    font: 12px/1.25 system-ui, -apple-system, 'Segoe UI', sans-serif;
    pointer-events: none;
    user-select: none;
    backdrop-filter: blur(8px);
}

.resource-hud__header,
.resource-hud__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
}

.resource-hud__header {
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 5px;
}

.resource-hud__title {
    color: var(--leaf);
    font-weight: 800;
    letter-spacing: 0;
}

.resource-hud__count {
    min-width: 18px;
    padding: 2px 5px;
    border-radius: 999px;
    background: rgba(61, 115, 85, 0.12);
    color: var(--leaf);
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}

.resource-hud__row {
    min-height: 24px;
    padding: 3px 0;
    border-top: 1px solid rgba(217, 208, 189, 0.55);
}

.resource-hud__mark {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(47, 43, 39, 0.16);
    background: var(--line);
}

.resource-hud__mark--wood { background: #7b5734; }
.resource-hud__mark--stone { background: #8c8f8e; }
.resource-hud__mark--gold { background: var(--ore-gold); }
.resource-hud__mark--crop { background: var(--leaf); }
.resource-hud__mark--herb { background: #62a56c; }

.resource-hud__label,
.resource-hud__amount {
    min-width: 0;
    font-weight: 700;
}

.resource-hud__label {
    overflow: hidden;
    color: var(--ink-soft);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resource-hud__amount {
    color: var(--coal);
    text-align: right;
}

.resource-hud__empty,
.resource-hud__detail {
    color: var(--muted);
    font-size: 11px;
}

.resource-hud__detail {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid rgba(217, 208, 189, 0.55);
}

/* -- Trader ------------------------------------------------------ */

#trader-hud {
    position: fixed;
    right: 12px;
    bottom: 230px;
    z-index: 20;
    width: min(360px, calc(100vw - 24px));
    color: var(--ink);
    font: 12px/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.trader-hud__toggle {
    display: block;
    margin-left: auto;
    border: 0;
    border-radius: 7px;
    background: var(--cobalt);
    color: #fff;
    font-weight: 800;
    padding: 8px 11px;
    box-shadow: var(--shadow);
    cursor: pointer;
}

.trader-hud__panel {
    display: none;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(217, 208, 189, 0.95);
    border-radius: var(--radius-sm);
    background: rgba(255, 252, 244, 0.97);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(8px);
}

#trader-hud[data-open="1"] .trader-hud__panel {
    display: grid;
    gap: 8px;
}

.trader-hud__title {
    color: var(--cobalt);
    font-weight: 800;
}

.trader-hud__field {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
}

.trader-hud__field--amount {
    grid-template-columns: 62px minmax(0, 1fr) auto;
}

.trader-hud__field select,
.trader-hud__field input {
    min-width: 0;
    width: 100%;
    border: 1px solid rgba(217, 208, 189, 0.95);
    border-radius: 6px;
    background: #fffaf0;
    color: var(--ink);
    font: 12px/1.25 system-ui, -apple-system, 'Segoe UI', sans-serif;
    padding: 7px 8px;
}

.trader-hud__secondary,
.trader-hud__submit {
    border: 0;
    border-radius: 6px;
    font-weight: 800;
    cursor: pointer;
}

.trader-hud__secondary {
    padding: 7px 9px;
    background: var(--cobalt-light);
    color: var(--cobalt);
}

.trader-hud__submit {
    padding: 9px 10px;
    background: var(--leaf);
    color: #fff;
}

.trader-hud__submit:disabled {
    cursor: default;
    opacity: 0.45;
    filter: saturate(0.5);
}

.trader-hud__quote {
    color: var(--ink);
    font-weight: 700;
}

.trader-hud__rate {
    color: var(--muted);
    font-size: 11px;
}

/* -- General Store ----------------------------------------------- */

#general-store-hud {
    position: fixed;
    left: 12px;
    bottom: 230px;
    z-index: 20;
    width: min(390px, calc(100vw - 24px));
    color: var(--ink);
    font: 12px/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.general-store__toggle {
    display: block;
    border: 0;
    border-radius: 7px;
    background: var(--leaf);
    color: #fff;
    font-weight: 800;
    padding: 8px 11px;
    box-shadow: var(--shadow);
    cursor: pointer;
}

.general-store__panel {
    display: none;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(217, 208, 189, 0.95);
    border-radius: var(--radius-sm);
    background: rgba(255, 252, 244, 0.97);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(8px);
}

#general-store-hud[data-open="1"] .general-store__panel {
    display: grid;
    gap: 8px;
}

.general-store__title {
    color: var(--leaf);
    font-weight: 800;
}

.general-store__balance {
    color: var(--muted);
    font-size: 11px;
}

.general-store__list {
    display: grid;
    gap: 7px;
    max-height: min(52vh, 420px);
    overflow-y: auto;
    padding-right: 2px;
}

.general-store__item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 7px;
    border: 1px solid rgba(217, 208, 189, 0.72);
    border-radius: 7px;
    background: #fffaf0;
}

.general-store__item[data-rarity="uncommon"] {
    border-color: rgba(27, 91, 168, 0.28);
}

.general-store__item[data-rarity="rare"] {
    border-color: rgba(174, 128, 29, 0.42);
}

.general-store__thumb {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: rgba(238, 230, 211, 0.72);
}

.general-store__thumb canvas {
    display: block;
}

.general-store__body {
    min-width: 0;
}

.general-store__name {
    color: var(--ink);
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.general-store__meta,
.general-store__price {
    color: var(--muted);
    font-size: 11px;
}

.general-store__price {
    color: var(--ink-soft);
    font-weight: 700;
}

.general-store__buy {
    border: 0;
    border-radius: 6px;
    background: var(--cobalt);
    color: #fff;
    font-weight: 800;
    padding: 8px 10px;
    cursor: pointer;
}

.general-store__buy:disabled {
    cursor: default;
    opacity: 0.45;
    filter: saturate(0.5);
}

/* -- Player Marketplace ----------------------------------------- */

#marketplace-hud {
    position: fixed;
    left: 12px;
    bottom: 282px;
    z-index: 21;
    width: min(410px, calc(100vw - 24px));
    color: var(--ink);
    font: 12px/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.marketplace__toggle {
    display: block;
    border: 0;
    border-radius: 7px;
    background: #7a4f9a;
    color: #fff;
    font-weight: 800;
    padding: 8px 11px;
    box-shadow: var(--shadow);
    cursor: pointer;
}

.marketplace__panel {
    display: none;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(217, 208, 189, 0.95);
    border-radius: var(--radius-sm);
    background: rgba(255, 252, 244, 0.97);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(8px);
}

#marketplace-hud[data-open="1"] .marketplace__panel {
    display: grid;
    gap: 8px;
}

.marketplace__title {
    color: #6d3f8f;
    font-weight: 800;
}

.marketplace__status {
    color: var(--muted);
    font-size: 11px;
}

.marketplace__list-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px auto;
    align-items: center;
    gap: 7px;
    padding: 7px;
    border: 1px solid rgba(217, 208, 189, 0.72);
    border-radius: 7px;
    background: #fffaf0;
}

.marketplace__form-label {
    grid-column: 1 / -1;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 800;
}

.marketplace__list-form select,
.marketplace__list-form input {
    min-width: 0;
    width: 100%;
    border: 1px solid rgba(217, 208, 189, 0.95);
    border-radius: 6px;
    background: #fffaf0;
    color: var(--ink);
    font: 12px/1.25 system-ui, -apple-system, 'Segoe UI', sans-serif;
    padding: 7px 8px;
}

.marketplace__list-button,
.marketplace__action {
    border: 0;
    border-radius: 6px;
    background: var(--cobalt);
    color: #fff;
    font-weight: 800;
    padding: 8px 10px;
    cursor: pointer;
}

.marketplace__list-button:disabled,
.marketplace__action:disabled {
    cursor: default;
    opacity: 0.45;
    filter: saturate(0.5);
}

.marketplace__list {
    display: grid;
    gap: 7px;
    max-height: min(46vh, 390px);
    overflow-y: auto;
    padding-right: 2px;
}

.marketplace__item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 7px;
    border: 1px solid rgba(217, 208, 189, 0.72);
    border-radius: 7px;
    background: #fffaf0;
}

.marketplace__item[data-rarity="player"] {
    border-color: rgba(61, 115, 85, 0.34);
}

.marketplace__item[data-rarity="rare"] {
    border-color: rgba(122, 79, 154, 0.42);
}

.marketplace__thumb {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: rgba(238, 230, 211, 0.72);
}

.marketplace__thumb canvas {
    display: block;
}

.marketplace__body {
    min-width: 0;
}

.marketplace__name {
    color: var(--ink);
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marketplace__meta,
.marketplace__price {
    color: var(--muted);
    font-size: 11px;
}

.marketplace__price {
    color: var(--ink-soft);
    font-weight: 700;
}

/* -- Township building interiors -------------------------------- */

.building-window {
    position: fixed;
    inset: 0;
    z-index: 960;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    color: var(--ink);
    font: 12px/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.building-window[data-open="1"] {
    display: flex;
}

.building-window__scrim {
    position: absolute;
    inset: 0;
    background: rgba(20, 24, 28, 0.58);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.building-window__panel {
    position: relative;
    width: min(560px, calc(100vw - 28px));
    max-height: min(680px, calc(100vh - 32px));
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(47, 43, 39, 0.16);
    border-radius: var(--radius-sm);
    background: rgba(255, 252, 244, 0.98);
    box-shadow: 0 24px 64px rgba(16, 22, 28, 0.38);
}

.building-window__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.building-window__title {
    color: var(--cobalt);
    font-weight: 900;
    font-size: 14px;
}

.building-window__close {
    border: 0;
    border-radius: 6px;
    background: rgba(47, 43, 39, 0.08);
    color: var(--ink-soft);
    font-weight: 800;
    padding: 7px 9px;
    cursor: pointer;
}

.building-window__scene {
    position: relative;
    min-height: 250px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid rgba(47, 43, 39, 0.12);
    border-radius: 7px;
    background-color: #eadbc0;
    background-position: center;
    background-size: cover;
}

.building-window__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(13, 20, 24, 0.02) 0%, rgba(13, 20, 24, 0.18) 100%),
        radial-gradient(circle at 50% 82%, rgba(255, 246, 220, 0.18), rgba(35, 28, 23, 0.08) 58%, rgba(35, 28, 23, 0.22));
    pointer-events: none;
}

.building-window__npc {
    position: absolute;
    right: clamp(18px, 8%, 54px);
    bottom: 6%;
    width: clamp(70px, 17%, 116px);
    max-height: 74%;
    object-fit: contain;
    filter: drop-shadow(0 10px 12px rgba(18, 20, 22, 0.32));
    transform-origin: 50% 100%;
}

.building-window[data-scene="bank"] .building-window__npc,
.building-window[data-scene="gallery"] .building-window__npc {
    right: auto;
    left: clamp(18px, 8%, 54px);
}

.building-window[data-scene="market"] .building-window__npc {
    right: clamp(12px, 5%, 38px);
    width: clamp(78px, 18%, 126px);
}

.building-window__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.building-window__action {
    border: 0;
    border-radius: 6px;
    background: var(--cobalt);
    color: #fff;
    font-weight: 900;
    padding: 9px 11px;
    cursor: pointer;
}

.building-window__status {
    min-height: 16px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.building-window__treasury {
    display: grid;
    gap: 5px;
    padding: 8px;
    border: 1px solid rgba(217, 208, 189, 0.84);
    border-radius: 7px;
    background: #fffaf0;
}

.building-window__treasury-total {
    color: var(--ink);
    font-weight: 900;
}

.building-window__treasury-row {
    color: var(--muted);
    font-size: 11px;
}

.building-window__loans {
    display: grid;
    gap: 7px;
    padding: 8px;
    border: 1px solid rgba(217, 208, 189, 0.84);
    border-radius: 7px;
    background: #fffaf0;
}

.building-window__loan-title {
    color: var(--ink);
    font-weight: 900;
}

.building-window__loan-offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.building-window__loan-row {
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.building-window__loan-action {
    border: 0;
    border-radius: 6px;
    background: var(--leaf);
    color: #fff;
    font-weight: 900;
    padding: 7px 9px;
    cursor: pointer;
}

.building-window__loan-action:disabled {
    cursor: default;
    opacity: 0.45;
    filter: saturate(0.5);
}

/* The touch-controls cheatsheet variant is a no-op on mouse devices —
   a media query below swaps it in on coarse-pointer devices. */
.ins-grid--touch { display: none; }

/* ── Loading screen ─────────────────────────────────────────────── */

#loading-screen {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background:
        linear-gradient(180deg, rgba(43, 42, 38, 0) 40%, rgba(43, 42, 38, 0.32) 100%),
        url('assets/boot/boot_screen.png?v=boot-1') center / cover no-repeat,
        linear-gradient(180deg, #f6efe1, #e8dcc1);
    z-index: 999;
}
#loading-screen.hidden { display: none; }

.loading-card {
    background: var(--paper);
    border-radius: var(--radius-lg);
    padding: 36px 48px;
    box-shadow: var(--shadow-lg);
    text-align: center;
    width: 360px;
}
.loading-logo {
    width: 86px;
    height: 86px;
    margin: -8px auto 18px;
    display: grid;
    place-items: center;
    background: transparent;
    filter: drop-shadow(0 10px 18px rgba(43, 42, 38, 0.18));
}
.brand-mark {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}
.loading-logo::after {
    display: none;
}
.loading-title {
    font-family: var(--brand-font);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--cobalt);
}
.loading-sub   { color: var(--muted); margin-top: 4px; font-size: 13px; }

.loading-bar {
    margin-top: 20px;
    height: 6px;
    width: 100%;
    background: var(--cream-2);
    border-radius: 999px;
    overflow: hidden;
}
.loading-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--cobalt), var(--cobalt-2));
    transition: width 0.18s ease;
}
.loading-status {
    margin-top: 10px;
    font-size: 12px;
    color: var(--muted);
    font-style: italic;
}

/* ── Title card ────────────────────────────────────────────────── */

#title-card {
    position: fixed;
    top: 16px;
    left: 16px;
    min-height: var(--title-card-height);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 12px;
    background: rgba(251, 246, 236, 0.96);
    border: 1px solid rgba(47, 43, 39, 0.10);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    z-index: 10;
    user-select: none;
}
.title-logo {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    align-self: center;
    display: grid;
    place-items: center;
    margin-block: auto;
    background: transparent;
    filter: drop-shadow(0 4px 8px rgba(43, 42, 38, 0.16));
}
.title-logo::before {
    display: none;
}
.title-logo::after {
    display: none;
}
.title-text {
    min-height: 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.title-text h1 {
    margin: 0;
    font-family: var(--brand-font);
    font-size: 23px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    color: var(--cobalt);
}
.title-text p {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--muted);
}

/* ── Toolbar ───────────────────────────────────────────────────── */

#toolbar {
    position: fixed;
    /* Anchored under the title card to form a single left rail.
       Vertically centering this used to leave it floating in the dead
       middle of the canvas, disconnected from the title above and the
       help below. Top-anchoring fixes the imbalance. */
    top: calc(var(--edge-gap) + var(--title-card-height) + 12px);
    left: var(--edge-gap);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 8px;
    background: var(--paper);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 10;
}
.tool {
    width: 60px;
    padding: 10px 6px 8px;
    border: 0;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--ink-soft);
    transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
    font: inherit;
}
.tool:hover { background: var(--cream-2); }
.tool:active { transform: scale(0.97); }
.tool.active {
    background: var(--cobalt-light);
    color: var(--cobalt);
}
.tool .ti {
    /* Icons are drawn on a 44×44 logical canvas. We display them at 36px
       (was 22px) so the glyph reads at a glance, sized to roughly fill
       the toolbar button without crowding the label below. */
    width: 36px;
    height: 36px;
    display: block;
}
.tool span.label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ── Palette ──────────────────────────────────────────────────── */

#palette {
    position: fixed;
    right: 12px;
    top: 12px;
    bottom: 92px;
    width: 168px;
    background: var(--paper);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    z-index: 10;
    padding: 6px 6px 6px;
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

#palette-tabs {
    display: flex;
    gap: 2px;
    padding: 0 2px 4px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
}
#palette-tabs::-webkit-scrollbar { display: none; }
.tab {
    border: 0;
    background: transparent;
    padding: 4px 6px;
    border-radius: 6px 6px 0 0;
    font: inherit;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--muted);
    cursor: pointer;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}
.tab:hover { color: var(--ink-soft); background: var(--cream-2); }
.tab.active {
    color: var(--cobalt);
    border-bottom: 2px solid var(--cobalt);
    margin-bottom: -1px;
}

#palette-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 2px 4px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    flex: 1 1 auto;
    align-content: start;
}
#palette-grid::-webkit-scrollbar { width: 4px; }
#palette-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

.swatch {
    background: var(--cream);
    border-radius: 8px;
    padding: 4px 3px 3px;
    border: 2px solid transparent;
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: transform 0.05s ease, border-color 0.15s ease, background 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.swatch:hover { background: #f6ecd5; transform: translateY(-1px); }
.swatch.selected {
    border-color: var(--cobalt);
    background: var(--cobalt-light);
}
.swatch canvas, .swatch img {
    width: 38px;
    height: 38px;
    image-rendering: pixelated;
    object-fit: contain;
    pointer-events: none;
}
.swatch .name {
    font-size: 9px;
    font-weight: 600;
    color: var(--ink-soft);
    line-height: 1.1;
    height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

/* ── HUD (desktop top-right controls) ─────────────────────────── */

#hud {
    position: fixed;
    right: 12px;
    top: calc(12px + env(safe-area-inset-top));
    width: 280px;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    background: rgba(251, 246, 236, 0.96);
    border: 1px solid rgba(47, 43, 39, 0.10);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 8px 10px;
    z-index: 10;
    font-size: 11px;
}
.hud-row { display: flex; align-items: center; gap: 5px; }
.hud-clock {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    font-size: 12px;
    color: var(--ink);
}
.sun-icon {
    width: 12px; height: 12px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, #ffc24a 0 35%, #f0a623 36% 60%, transparent 61%);
    box-shadow: 0 0 5px rgba(240, 166, 35, 0.5);
    position: relative;
}

.hud-toggles {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 8px;
    width: auto;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
}
.toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--ink-soft);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.toggle input { display: none; }
.toggle .switch {
    width: 22px;
    height: 12px;
    background: #d8d2c4;
    border-radius: 999px;
    position: relative;
    transition: background 0.15s ease;
    flex-shrink: 0;
}
.toggle .switch::after {
    content: '';
    position: absolute;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #fff;
    top: 2px; left: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: transform 0.15s ease;
}
.toggle input:checked + .switch { background: #6ec07a; }
.toggle input:checked + .switch::after { transform: translateX(10px); }

.hud-layers {
    display: none;
}

/* -- Epoch status -------------------------------------------------- */

#epoch-hud {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 18;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 1px 8px;
    max-width: min(320px, calc(100vw - 24px));
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 252, 244, 0.94);
    border: 1px solid rgba(31, 42, 55, 0.12);
    box-shadow: var(--shadow);
    color: var(--ink);
    backdrop-filter: blur(8px);
    pointer-events: auto;
}
#epoch-hud::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    grid-row: 1 / span 2;
    align-self: center;
    background: #3fb950;
    box-shadow: 0 0 0 3px rgba(63, 185, 80, 0.16);
}
#epoch-hud[data-tone="cached"]::before {
    background: #d99a24;
    box-shadow: 0 0 0 3px rgba(217, 154, 36, 0.18);
}
#epoch-hud[data-tone="warning"]::before {
    background: #c95050;
    box-shadow: 0 0 0 3px rgba(201, 80, 80, 0.18);
}
#epoch-hud[data-tone="high-value"] {
    border-color: rgba(168, 122, 26, 0.35);
    background: rgba(255, 248, 219, 0.96);
}
#epoch-hud[data-tone="high-value"]::before {
    background: #e0b43c;
    box-shadow: 0 0 0 3px rgba(224, 180, 60, 0.2);
}
.epoch-hud__title {
    font-size: 12px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 0;
}
.epoch-hud__detail {
    font-size: 10px;
    line-height: 1.2;
    color: var(--ink-soft);
    white-space: nowrap;
}
.epoch-hud__reload {
    grid-row: 1 / span 2;
    grid-column: 3;
    border: 0;
    border-radius: 6px;
    background: var(--cobalt);
    color: #fff;
    font-weight: 800;
    font-size: 10px;
    padding: 7px 9px;
    cursor: pointer;
}
.epoch-hud__reload[hidden] { display: none; }
.epoch-hud__reload:hover { filter: brightness(1.05); }

/* -- Property travel ---------------------------------------------- */

#property-hud {
    position: fixed;
    top: calc(66px + env(safe-area-inset-top));
    right: calc(12px + env(safe-area-inset-right));
    z-index: 18;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto auto;
    align-items: center;
    gap: 1px 8px;
    width: min(680px, calc(100vw - 24px));
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 252, 244, 0.94);
    border: 1px solid rgba(31, 42, 55, 0.12);
    box-shadow: var(--shadow);
    color: var(--ink);
    backdrop-filter: blur(8px);
}
.property-hud__label {
    font-size: 12px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 0;
}
.property-hud__detail {
    grid-column: 1;
    font-size: 10px;
    line-height: 1.2;
    color: var(--ink-soft);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.property-hud__action {
    grid-row: 1 / span 2;
    grid-column: 2;
    border: 0;
    border-radius: 6px;
    background: var(--leaf);
    color: #fff;
    font-weight: 800;
    font-size: 10px;
    padding: 7px 9px;
    cursor: pointer;
}
.property-hud__action:hover { filter: brightness(1.05); }
.property-hud__unlock {
    grid-row: 1 / span 2;
    grid-column: 3;
    border: 0;
    border-radius: 6px;
    background: var(--cobalt);
    color: #fff;
    font-weight: 800;
    font-size: 10px;
    padding: 7px 9px;
    cursor: pointer;
    white-space: nowrap;
}
.property-hud__share {
    grid-row: 1 / span 2;
    grid-column: 6;
    border: 0;
    border-radius: 6px;
    background: rgba(31, 42, 55, 0.88);
    color: #fff;
    font-weight: 800;
    font-size: 10px;
    padding: 7px 9px;
    cursor: pointer;
    white-space: nowrap;
}
.property-hud__share:hover { filter: brightness(1.05); }
.property-hud__unlock:hover { filter: brightness(1.05); }
.property-hud__farm {
    grid-row: 1 / span 2;
    grid-column: 4;
    border: 0;
    border-radius: 6px;
    background: rgba(123, 87, 52, 0.9);
    color: #fff;
    font-weight: 800;
    font-size: 10px;
    padding: 7px 9px;
    cursor: pointer;
    white-space: nowrap;
}
.property-hud__farm:hover { filter: brightness(1.05); }
.property-hud__buildings {
    grid-row: 1 / span 2;
    grid-column: 5;
    border: 0;
    border-radius: 6px;
    background: rgba(155, 113, 62, 0.95);
    color: #fff;
    font-weight: 800;
    font-size: 10px;
    padding: 7px 9px;
    cursor: pointer;
    white-space: nowrap;
}
.property-hud__buildings:hover { filter: brightness(1.05); }
.property-hud__unlock:disabled {
    cursor: default;
    opacity: 0.48;
    filter: saturate(0.5);
}
.property-hud__farm:disabled {
    cursor: default;
    opacity: 0.48;
    filter: saturate(0.5);
}
.property-hud__unlock[hidden] { display: none; }
.property-hud__farm[hidden] { display: none; }
.property-hud__buildings[hidden] { display: none; }
.property-hud__building-panel {
    grid-column: 1 / -1;
    display: grid;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(31, 42, 55, 0.12);
}
.property-hud__building-panel[hidden] { display: none; }
.property-hud__building-title {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.property-hud__building-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}
.property-hud__craft-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding-left: 10px;
    border-left: 2px solid rgba(155, 113, 62, 0.24);
}
.property-hud__tool-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
}
.property-hud__tool-icon {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255, 252, 244, 0.72);
    border: 1px solid rgba(155, 113, 62, 0.18);
}
.property-hud__building-name {
    font-size: 11px;
    font-weight: 850;
    line-height: 1.2;
}
.property-hud__building-cost {
    font-size: 10px;
    line-height: 1.25;
    color: var(--ink-soft);
}
.property-hud__building-action {
    min-width: 86px;
    border: 0;
    border-radius: 6px;
    background: var(--cobalt);
    color: #fff;
    font-weight: 850;
    font-size: 10px;
    padding: 7px 8px;
    cursor: pointer;
    white-space: nowrap;
}
.property-hud__building-action:disabled {
    cursor: default;
    opacity: 0.48;
    filter: saturate(0.5);
}
.property-hud__craft-action {
    min-width: 74px;
    border: 0;
    border-radius: 6px;
    background: rgba(123, 87, 52, 0.92);
    color: #fff;
    font-weight: 850;
    font-size: 10px;
    padding: 7px 8px;
    cursor: pointer;
    white-space: nowrap;
}
.property-hud__craft-action:disabled {
    cursor: default;
    opacity: 0.48;
    filter: saturate(0.5);
}
body.mode-property #property-hud {
    border-color: rgba(61, 115, 85, 0.28);
    background: rgba(244, 251, 237, 0.96);
}
body.mode-visit #property-hud {
    border-color: rgba(34, 86, 151, 0.24);
    background: rgba(239, 247, 255, 0.96);
}

#inventory-hud {
    top: auto !important;
    right: 12px !important;
    bottom: 12px !important;
    left: auto !important;
}

#ore-debug-hud {
    position: fixed;
    left: 16px;
    top: calc(16px + var(--title-card-height) + 206px);
    z-index: 9;
    width: min(420px, calc(100vw - 32px));
    max-height: min(42vh, 420px);
    padding: 8px 10px;
    overflow: auto;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.68);
    color: #e8f5ff;
    font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

#ore-debug-hud summary {
    cursor: pointer;
    font-weight: 700;
}

.ore-debug-hud__rows {
    display: grid;
    gap: 2px;
    margin-top: 8px;
}

.ore-debug-hud__row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 48px minmax(104px, auto) 40px;
    gap: 8px;
    align-items: baseline;
    border-top: 1px solid rgba(232, 245, 255, 0.12);
    padding-top: 2px;
}

.ore-debug-hud__name,
.ore-debug-hud__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ore-debug-hud__cell,
.ore-debug-hud__capacity,
.ore-debug-hud__empty {
    color: rgba(232, 245, 255, 0.68);
}

#perf-hud {
    top: calc(16px + var(--title-card-height) + 28px) !important;
    left: 16px !important;
    right: auto !important;
    bottom: auto !important;
}

/* -- Wallet identity ---------------------------------------------- */

#wallet-hud {
    position: fixed;
    top: calc(120px + env(safe-area-inset-top));
    right: calc(12px + env(safe-area-inset-right));
    z-index: 18;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 2px 8px;
    width: min(380px, calc(100vw - 24px));
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 252, 244, 0.94);
    border: 1px solid rgba(31, 42, 55, 0.12);
    box-shadow: var(--shadow);
    color: var(--ink);
    backdrop-filter: blur(8px);
    pointer-events: auto;
}
#wallet-hud::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    grid-row: 1 / span 2;
    background: #a8a29a;
    box-shadow: 0 0 0 3px rgba(168, 162, 154, 0.16);
}
#wallet-hud[data-state="connected"]::before {
    background: #3fb950;
    box-shadow: 0 0 0 3px rgba(63, 185, 80, 0.16);
}
#wallet-hud[data-state="connecting"]::before {
    background: #d99a24;
    box-shadow: 0 0 0 3px rgba(217, 154, 36, 0.18);
}
#wallet-hud[data-state="failed"]::before {
    background: #c95050;
    box-shadow: 0 0 0 3px rgba(201, 80, 80, 0.18);
}
.wallet-hud__label {
    grid-column: 2;
    font-size: 12px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wallet-hud__detail {
    grid-column: 2;
    font-size: 10px;
    line-height: 1.2;
    color: var(--ink-soft);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wallet-hud__action {
    grid-row: 1 / span 2;
    grid-column: 4;
    border: 0;
    border-radius: 6px;
    background: var(--cobalt);
    color: #fff;
    font-weight: 800;
    font-size: 10px;
    padding: 7px 9px;
    cursor: pointer;
    white-space: nowrap;
}
.wallet-hud__action:disabled {
    opacity: 0.62;
    cursor: wait;
}
.wallet-hud__action:not(:disabled):hover { filter: brightness(1.05); }
.wallet-hud__property {
    grid-row: 1 / span 2;
    grid-column: 3;
    border: 0;
    border-radius: 6px;
    background: rgba(31, 42, 55, 0.88);
    color: #fff;
    font-weight: 800;
    font-size: 10px;
    padding: 7px 9px;
    cursor: pointer;
    white-space: nowrap;
}
.wallet-hud__property[hidden] { display: none; }
.wallet-hud__property:disabled {
    opacity: 0.62;
    cursor: wait;
}
.wallet-hud__property:not(:disabled):hover { filter: brightness(1.05); }

/* ── Instructions panel ────────────────────────────────────────── */

/* The controls help is a collapsible disclosure (native <details>):
   - Closed: a small "?" badge in the bottom-left, easy to ignore.
   - Open: the full keyboard cheatsheet expands above the badge.
   Defaulting to closed reclaims a big chunk of bottom-left canvas
   space and removes the visual competition with the right-side palette. */
#instructions {
    position: fixed;
    left: var(--edge-gap);
    bottom: var(--edge-gap);
    z-index: 30;
    background: rgba(251, 246, 236, 0.94);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    color: var(--ink-soft);
    font-size: 11px;
    overflow: hidden;
    max-width: 280px;
    transition: box-shadow 0.18s ease;
}
#instructions[open] {
    box-shadow: var(--shadow-lg);
}

.ins-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 8px;
    color: var(--cobalt);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.02em;
    transition: background 0.15s ease;
}
.ins-summary:hover { background: rgba(214, 230, 246, 0.45); }
.ins-summary::-webkit-details-marker { display: none; }
.ins-summary::marker { display: none; content: ''; }

.ins-badge {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--cobalt);
    color: var(--paper);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.10);
}
.ins-summary-label { color: var(--cobalt); }
.ins-summary-hint {
    margin-left: 4px;
    font-size: 10px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0;
    text-transform: none;
}
#instructions[open] .ins-summary-hint { display: none; }
#instructions[open] .ins-summary {
    border-bottom: 1px solid var(--line);
}

.ins-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    align-items: center;
    line-height: 1.2;
    padding: 9px 12px 11px;
}
.key {
    min-width: 60px;
    padding: 2px 6px;
    border: 1px solid rgba(27, 91, 168, 0.18);
    border-radius: 5px;
    background: rgba(214, 230, 246, 0.65);
    color: var(--cobalt);
    font-weight: 800;
    font-size: 9.5px;
    text-align: center;
    white-space: nowrap;
}

/* ── Toast ────────────────────────────────────────────────────── */

#toast {
    position: fixed;
    left: 50%;
    top: 16px;
    transform: translate(-50%, -20px);
    padding: 8px 16px;
    background: var(--ink);
    color: var(--paper);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
}
#toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ── Responsive: tablet (≤900px) ──────────────────────────────── */

@media (max-width: 900px) {
    #palette {
        width: calc(100vw - 32px);
        right: 16px;
        top: auto;
        bottom: calc(16px + env(safe-area-inset-bottom));
        height: 180px;
    }
    #palette-grid {
        grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    }
    /* HUD is duplicate info on small screens — palette dominates the
       bottom edge already. The compact controls badge stays so the
       cheatsheet is still discoverable on touch / portrait layouts;
       it lifts up to clear the bottom palette. */
    #hud { display: none; }
    #instructions {
        bottom: calc(180px + 24px + env(safe-area-inset-bottom));
    }
    /* Open state on narrow screens: cap the height so the cheatsheet
       can scroll instead of pushing offscreen. */
    #instructions[open] .ins-grid {
        max-height: 50vh;
        overflow-y: auto;
    }
}

/* ── Responsive: phone portrait (≤640px) ──────────────────────── */

/* Below 640px we're almost certainly on a phone in portrait. The
   redesign here optimises for the realities of one-thumb operation
   on a small screen:
     • The title card collapses to logo + short name to reclaim space.
     • The toolbar shrinks to icon-only and tucks against the safe-area
       inset on the left.
     • The palette becomes a full-width bottom sheet with bigger swatches.
     • The controls badge uses a 44px touch target and floats above the
       palette out of thumb-reach so it isn't tapped accidentally. */

@media (max-width: 640px) {
    :root {
        --edge-gap: 10px;
        --title-card-height: 52px;
    }

    /* Compact title card: logo + just the headline, subtitle hidden
       (it's prose, not a tool). Anchor with safe-area inset so the
       iPhone notch doesn't sit on top of the title text. */
    #title-card {
        top: calc(10px + env(safe-area-inset-top));
        left: calc(10px + env(safe-area-inset-left));
        padding: 8px 12px 8px 8px;
        gap: 8px;
        border-radius: var(--radius-sm);
    }
    .title-logo {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }
    .title-text { min-height: 38px; }
    .title-text h1 { font-size: 18px; line-height: 1; }
    .title-text p  { display: none; }

    /* Toolbar: drop the labels (icons are already self-evident at this
       size) and tighten everything so it doesn't crowd the canvas.
       Each tool is still ≥44×44 touch target — Apple/Material guideline
       minimum — and the icon now visually fills the button instead of
       hiding in the middle of it. */
    #toolbar {
        top: calc(10px + env(safe-area-inset-top) + var(--title-card-height) + 8px);
        left: calc(8px + env(safe-area-inset-left));
        padding: 6px 5px;
        gap: 4px;
        border-radius: var(--radius-sm);
    }
    .tool {
        width: 50px;
        padding: 7px 4px;
        gap: 2px;
    }
    .tool .ti { width: 32px; height: 32px; }
    .tool span.label { display: none; }

    /* Palette: full-width bottom sheet, taller, larger swatches sized
       for fingertips. Sits above the iOS home indicator. */
    #palette {
        left: calc(8px + env(safe-area-inset-left));
        right: calc(8px + env(safe-area-inset-right));
        width: auto;
        bottom: calc(8px + env(safe-area-inset-bottom));
        height: 200px;
        padding: 4px 6px 6px;
    }
    #palette-tabs {
        gap: 4px;
        padding: 2px 2px 4px;
    }
    .tab {
        font-size: 11px;
        padding: 6px 10px;
        min-height: 32px;
    }
    #palette-grid {
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
        gap: 6px;
    }
    .swatch { padding: 6px 4px 4px; min-height: 78px; }
    .swatch canvas, .swatch img { width: 44px; height: 44px; }
    .swatch .name { font-size: 10px; height: 22px; }

    /* Controls badge: bigger target, lifted above the palette sheet,
       and with the open panel scrollable so a long cheatsheet doesn't
       spill off the top of the screen. */
    #instructions {
        left: calc(8px + env(safe-area-inset-left));
        bottom: calc(200px + 16px + env(safe-area-inset-bottom));
        max-width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
    }
    #economy-hud {
        right: calc(8px + env(safe-area-inset-right));
        bottom: calc(200px + 16px + env(safe-area-inset-bottom));
        width: min(280px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    }
    #resource-hud {
        left: calc(8px + env(safe-area-inset-left));
        top: calc(108px + env(safe-area-inset-top));
        width: min(180px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    }
    #general-store-hud,
    #marketplace-hud,
    #trader-hud {
        bottom: calc(200px + 16px + env(safe-area-inset-bottom));
        width: min(280px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    }
    #general-store-hud { left: calc(8px + env(safe-area-inset-left)); }
    #marketplace-hud { left: calc(82px + env(safe-area-inset-left)); }
    #trader-hud { right: calc(8px + env(safe-area-inset-right)); }
    .general-store__list { max-height: 38vh; }
    .marketplace__list { max-height: 34vh; }
    .marketplace__list-form {
        grid-template-columns: minmax(0, 1fr) 72px auto;
    }
    .ins-summary {
        padding: 10px 14px 10px 10px;
        min-height: 44px;
    }
    .ins-badge { width: 26px; height: 26px; font-size: 14px; }
    .ins-summary-hint { display: none; }
    #instructions[open] .ins-grid {
        max-height: 40vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Toast clears the safe-area + title-card on phones. */
    #toast {
        top: calc(env(safe-area-inset-top) + 8px);
        font-size: 12px;
        padding: 7px 14px;
    }
}

/* ── Responsive: very small phones (≤380px) ───────────────────── */

/* On a 360-class device the bottom palette + toolbar would otherwise
   eat the canvas. Tighten further: 5-tool grid that wraps, smaller
   palette swatches. */
@media (max-width: 380px) {
    .tool { width: 46px; padding: 6px 3px; }
    .tool .ti { width: 28px; height: 28px; }
    #palette { height: 184px; }
    #palette-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
    .swatch canvas, .swatch img { width: 38px; height: 38px; }
    #instructions { bottom: calc(184px + 14px + env(safe-area-inset-bottom)); }
    #economy-hud { bottom: calc(184px + 14px + env(safe-area-inset-bottom)); }
    #resource-hud { top: calc(96px + env(safe-area-inset-top)); }
    #general-store-hud,
    #marketplace-hud,
    #trader-hud { bottom: calc(184px + 14px + env(safe-area-inset-bottom)); }
}

/* ── Responsive: phone landscape ──────────────────────────────── */

/* Landscape on a phone (short height, wide layout): bring the palette
   back to the right side as a slim column instead of eating the bottom
   third of the screen, and shrink the title back even further. */
@media (max-height: 480px) and (orientation: landscape) {
    #title-card {
        padding: 6px 10px 6px 6px;
    }
    .title-logo { width: 34px; height: 34px; flex-basis: 34px; }
    .title-text h1 { font-size: 16px; }
    .title-text p  { display: none; }

    #toolbar {
        top: calc(8px + env(safe-area-inset-top));
        left: calc(8px + env(safe-area-inset-left));
        padding: 5px 4px;
        gap: 3px;
    }
    .tool { width: 44px; padding: 6px 3px; }
    .tool .ti { width: 26px; height: 26px; }
    .tool span.label { display: none; }

    #palette {
        top: calc(8px + env(safe-area-inset-top));
        right: calc(8px + env(safe-area-inset-right));
        bottom: calc(8px + env(safe-area-inset-bottom));
        left: auto;
        width: 200px;
        height: auto;
    }
    #palette-grid { grid-template-columns: repeat(2, 1fr); }
    #instructions {
        bottom: calc(8px + env(safe-area-inset-bottom));
        left: calc(8px + env(safe-area-inset-left));
    }
}

/* ── Unified HUD Menu ─────────────────────────────────────────────
   Later gameplay slices added enough panels that the old scattered HUD
   started competing with the canvas. These overrides keep the existing HUD
   modules intact but mount them inside one collapsible right rail. */

#side-menu {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 35;
    width: min(330px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    pointer-events: none;
    transition: transform 0.18s ease;
}

#side-menu[data-open="0"] {
    bottom: auto;
    width: 46px;
    transform: none;
}

#side-menu[data-open="0"] #side-menu-toggle {
    justify-self: start;
}

#side-menu-toggle {
    justify-self: end;
    min-width: 46px;
    min-height: 36px;
    border: 0;
    border-radius: 8px;
    background: rgba(31, 42, 55, 0.92);
    color: #fff;
    box-shadow: var(--shadow);
    font: 800 12px/1 system-ui, -apple-system, 'Segoe UI', sans-serif;
    cursor: pointer;
    pointer-events: auto;
}

#side-menu-body {
    min-height: 0;
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(47, 43, 39, 0.12);
    border-radius: var(--radius-sm);
    background: rgba(251, 246, 236, 0.94);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
    pointer-events: auto;
    scrollbar-width: thin;
}

#side-menu[data-open="0"] #side-menu-body {
    display: none;
    visibility: hidden;
}

.side-menu__section {
    display: grid;
    gap: 8px;
    min-width: 0;
}

#side-menu #hud,
#side-menu #epoch-hud,
#side-menu #property-hud,
#side-menu #wallet-hud,
#side-menu #economy-hud,
#side-menu #resource-hud,
#side-menu #trader-hud,
#side-menu #general-store-hud,
#side-menu #marketplace-hud {
    position: static;
    inset: auto;
    transform: none;
    width: 100%;
    max-width: none;
    z-index: auto;
    margin: 0;
    pointer-events: auto;
}

#side-menu #hud,
#side-menu #epoch-hud,
#side-menu #property-hud,
#side-menu #wallet-hud,
#side-menu #economy-hud,
#side-menu #resource-hud {
    box-shadow: none;
    border-radius: 8px;
}

#side-menu #hud {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 8px;
    padding: 8px;
    background: rgba(255, 252, 244, 0.72);
}

#side-menu .hud-toggles {
    justify-content: end;
}

#side-menu #epoch-hud {
    max-width: none;
    padding: 8px;
}

#side-menu #property-hud {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding: 8px;
}

#side-menu .property-hud__detail,
#side-menu .property-hud__building-panel {
    grid-column: 1 / -1;
}

#side-menu .property-hud__action,
#side-menu .property-hud__unlock,
#side-menu .property-hud__farm,
#side-menu .property-hud__buildings,
#side-menu .property-hud__share {
    grid-row: auto;
    grid-column: auto;
    min-width: 0;
}

#side-menu .property-hud__unlock,
#side-menu .property-hud__farm,
#side-menu .property-hud__buildings,
#side-menu .property-hud__share {
    grid-column: span 1;
}

#side-menu .property-hud__building-row,
#side-menu .property-hud__craft-row {
    grid-template-columns: minmax(0, 1fr);
}

#side-menu .property-hud__building-action,
#side-menu .property-hud__craft-action {
    width: 100%;
}

#side-menu #wallet-hud {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 5px 8px;
    padding: 8px;
}

#side-menu .wallet-hud__label,
#side-menu .wallet-hud__detail {
    grid-column: 2;
}

#side-menu .wallet-hud__property,
#side-menu .wallet-hud__action {
    grid-row: auto;
    grid-column: auto;
}

#side-menu .wallet-hud__property {
    grid-column: 1 / span 2;
}

#side-menu .wallet-hud__action {
    grid-column: 1 / span 2;
}

#side-menu #economy-hud,
#side-menu #resource-hud {
    padding: 9px 10px;
}

#side-menu #resource-hud {
    pointer-events: auto;
}

#side-menu .side-menu__section--actions {
    grid-template-columns: 1fr;
}

#side-menu .trader-hud__toggle,
#side-menu .general-store__toggle,
#side-menu .marketplace__toggle {
    width: 100%;
    margin: 0;
    text-align: left;
}

#side-menu .trader-hud__panel,
#side-menu .general-store__panel,
#side-menu .marketplace__panel {
    margin-top: 6px;
    box-shadow: none;
}

#side-menu .general-store__list,
#side-menu .marketplace__list {
    max-height: 320px;
}

@media (min-width: 901px) {
    body.mode-build #toolbar,
    body.mode-property #toolbar {
        top: auto;
        left: var(--edge-gap);
        right: calc(360px + env(safe-area-inset-right));
        bottom: calc(202px + env(safe-area-inset-bottom));
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
    }

    body.mode-build #palette,
    body.mode-property #palette {
        top: auto;
        left: var(--edge-gap);
        right: calc(360px + env(safe-area-inset-right));
        bottom: var(--edge-gap);
        width: auto;
        height: 176px;
        min-height: 0;
    }

    body.mode-build #palette-grid,
    body.mode-property #palette-grid {
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    }
}

@media (max-width: 900px) {
    #side-menu {
        width: min(310px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));
        top: calc(8px + env(safe-area-inset-top));
        right: calc(8px + env(safe-area-inset-right));
        bottom: calc(8px + env(safe-area-inset-bottom));
    }

    #side-menu #hud {
        display: grid;
    }
}

/* ── Coarse-pointer (touch device) cheatsheet swap ────────────── */

/* On any pointer-coarse device (phones, tablets, touch laptops in
   tablet mode) the keyboard shortcuts are useless — swap to the
   touch-gesture cheatsheet. Pure CSS, no JS detection needed. */
@media (pointer: coarse) {
    .ins-grid--mouse { display: none; }
    .ins-grid--touch { display: grid; }
    /* Touch devices often have a crosshair-incompatible cursor. */
    #game-canvas { cursor: default; }
}

/* ── Character picker ───────────────────────────────────────────── */

.char-picker {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 300ms ease;
}

.char-picker--leaving {
    opacity: 0;
    pointer-events: none;
}

.char-picker__scrim {
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 20, 0.7);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.char-picker__panel {
    position: relative;
    width: min(720px, 92vw);
    padding: 32px 36px 28px;
    background: #1a2030;
    border: 1px solid #2c3550;
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    color: #f5e9c8;
    text-align: center;
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.char-picker__panel h1 {
    margin: 0 0 4px;
    font-family: var(--brand-font);
    font-size: 1.6rem;
    letter-spacing: 0;
    color: #f5e9c8;
}

.char-picker__subtitle {
    margin: 0 0 24px;
    font-size: 0.95rem;
    color: #9aa4bf;
    letter-spacing: 0.04em;
}

.char-picker__cards {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    gap: 16px;
    justify-content: center;
}

.char-picker__cards > li { display: contents; }

.char-card {
    position: relative;
    flex: 1 1 0;
    max-width: 200px;
    min-height: 260px;
    padding: 20px 12px 16px;
    background: #232a3d;
    border: 2px solid transparent;
    border-radius: 10px;
    color: inherit;
    font: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: transform 200ms ease, border-color 200ms ease,
                box-shadow 200ms ease, background 200ms ease;
}

.char-card:hover {
    transform: translateY(-4px);
    background: #29314a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.char-card[aria-checked="true"] {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent),
                0 8px 24px rgba(0, 0, 0, 0.4);
}

.char-card__preview {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.char-card__preview img {
    max-width: 100%;
    max-height: 100%;
    image-rendering: pixelated;
}

/* Tinted-cube fallback when the PNG is missing. */
.char-card__cube {
    width: 56px;
    height: 56px;
    background: var(--accent);
    transform: rotateX(55deg) rotateZ(45deg);
    box-shadow:
        4px 4px 0 color-mix(in srgb, var(--accent) 70%, #000 30%),
        8px 8px 0 color-mix(in srgb, var(--accent) 50%, #000 50%);
}

.char-card__name {
    margin: 0;
    font-size: 1.05rem;
    color: #f5e9c8;
}

.char-card__tagline {
    margin: 0;
    font-size: 0.8rem;
    color: #9aa4bf;
    letter-spacing: 0.02em;
}

.char-card__key {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 0.75rem;
    color: #6b7592;
    border: 1px solid #3a4361;
    border-radius: 4px;
    padding: 1px 6px;
    font-family: ui-monospace, monospace;
}

.char-picker__confirm {
    appearance: none;
    background: #f5b340;
    border: none;
    color: #1a2030;
    padding: 12px 28px;
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 150ms ease, transform 150ms ease;
}

.char-picker__confirm:disabled {
    background: #3a4361;
    color: #6b7592;
    cursor: not-allowed;
}

.char-picker__confirm:not(:disabled):hover {
    background: #f7c25c;
    transform: translateY(-1px);
}