html, body {
    margin: 0;
    padding: 0;
    background: #000;
    color: #cfe0ea;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
    height: 100%;
}
/* The galaxy view fills the shared play area: below the HUD + resource strip,
   right of the button column, above the zoom buttons (see arcade-shell.css).
   Vector Space stacks a second HUD row (.economy-hud, below) under the
   canonical .hud, so --arcade-top (normally just --hud-zone-h) must reserve
   room for both fixed zones, same pattern Battlefield uses for its own
   --arcade-bottom override. */
body {
    --eco-hud-zone-h: clamp(2rem, min(9vw, 8vh), 3rem);
    --arcade-top: calc(var(--hud-zone-h) + var(--eco-hud-zone-h));
}
/* The zoom buttons are shown on every device here, not just touch ones -
   :has() rather than the JS-added .has-touch-controls class so this applies
   on the very first rendered frame instead of a moment after arcade-shell.js
   runs, which would otherwise show up as the GAME BUTTONS zone bouncing into
   place right as the game screen first appears. */
body:has(#touch-controls) {
    --arcade-bottom: calc(max(0.75rem, env(safe-area-inset-bottom)) + var(--touch-size) + 0.5rem);
}
/* (.app - the play-area box itself - comes from arcade-shell.css.) */
#stage {
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    cursor: grab;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
#stage.dragging { cursor: grabbing; }

.hud__item span {
    margin-left: 0.5rem;
    color: #fff;
}

/* Zoom in/out/freeze use the standard shared touch-btn styling and
   centred-bottom layout like every other game's action buttons - but unlike
   the touch-only clusters elsewhere, they're genuinely useful with a mouse
   too (there's no keyboard equivalent), so this overrides the shared
   default of only showing them on touch devices. */
.touch-controls {
    display: grid;
}
.touch-btn.active {
    background: rgba(80, 130, 180, 0.35);
    border-color: #a0c8e8;
    color: #f2f6f8;
}

.overlay {
    position: fixed;
    /* Clear of the left button column so the centred menu never sits under it. */
    inset: 0 var(--arcade-right) 0 var(--arcade-btn-col);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    background: rgba(2, 4, 10, 0.82);
    color: #d8f5ff;
    text-align: center;
    padding: 1rem;
    box-sizing: border-box;
    z-index: 50;
}

.overlay.hidden {
    display: none;
}

.overlay__title {
    color: #fff;
    font-size: clamp(2rem, 8vw, 4.5rem);
    letter-spacing: 0.35em;
    text-indent: 0.35em;
    text-shadow: 0 0 14px rgba(160, 200, 232, 0.8);
}

.overlay__hint {
    max-width: 34rem;
    color: #a8d0dc;
    font-size: 1.1rem;
    line-height: 1.6;
    letter-spacing: 0.08em;
}

.mode-select {
    display: grid;
    grid-template-columns: repeat(4, 4.6rem);
    justify-content: center;
    gap: 0.35rem;
    max-width: 100%;
    overflow-x: auto;
}

.mode-btn,
.btn {
    box-sizing: border-box;
    background: transparent;
    color: #d8f5ff;
    border: 2px solid rgba(216, 245, 255, 0.75);
    border-radius: 0;
    padding: 0.3rem 0.3rem;
    font: 400 0.82rem/1 "VT323", "Consolas", ui-monospace, monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    text-shadow: 0 0 6px rgba(216, 245, 255, 0.55);
    box-shadow: 0 0 10px rgba(216, 245, 255, 0.16);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.btn {
    padding: 0.6rem 1.5rem;
    font-size: 1.3rem;
    letter-spacing: 0.2em;
}

.mode-btn {
    width: 100%;
    color: #a8d0dc;
}

.mode-btn:hover,
.mode-btn.selected,
.btn:hover {
    color: #fff;
    background: rgba(216, 245, 255, 0.15);
    border-color: #d8f5ff;
}

.overlay__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Restart belongs on the initial start screen only - not next to "Resume" on
   the pause screen, where #btn-start is repurposed by arcade-shell.js and
   wiping the current (just-paused) save would be a dangerous, out-of-place
   affordance. Mirrors the shared .overlay.is-paused .mode-select hide rule
   in arcade-shell.css, which is global rather than per-game since it only
   needs to hide vectorspace's own restart button. */
.overlay.is-paused #btn-restart {
    display: none;
}

/* Restart wipes the current save, so it's styled with a warm/amber accent
   (rather than the default cyan) to visually flag it as the destructive
   choice next to Start. Only shown when a save actually exists to restart -
   see updateRestartVisibility() in vectorspace.js. */
.btn--restart {
    font-size: 1rem;
    padding: 0.5rem 1.1rem;
    color: #e0c07a;
    border-color: rgba(224, 192, 122, 0.65);
    text-shadow: 0 0 6px rgba(224, 192, 122, 0.5);
}
.btn--restart:hover {
    color: #fff;
    background: rgba(224, 192, 122, 0.15);
    border-color: #e0c07a;
}

/* Standard arcade high-score table (matches the shared shell markup). */
.highscore-panel {
    width: min(92vw, 46rem);
    max-height: min(54vh, 30rem);
    border: 2px solid rgba(216, 245, 255, 0.72);
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 18px rgba(216, 245, 255, 0.22), inset 0 0 0 1px rgba(216, 245, 255, 0.12);
    padding: 0.9rem;
    box-sizing: border-box;
}

.highscore-panel.hidden,
.highscore-panel[hidden] {
    display: none;
}

.highscore-status {
    color: #fff;
    font-size: 1.1rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    text-shadow: 0 0 6px rgba(216, 245, 255, 0.55);
}

.highscore-table-wrap {
    max-height: min(42vh, 23rem);
    overflow: auto;
}

.highscore-table {
    width: 100%;
    border-collapse: collapse;
    color: #d8f5ff;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.highscore-table th,
.highscore-table td {
    border-bottom: 1px solid rgba(216, 245, 255, 0.24);
    padding: 0.35rem 0.45rem;
    text-align: left;
}

.highscore-table th:first-child,
.highscore-table td:first-child {
    width: 3.5rem;
    text-align: right;
}

.highscore-table th:last-child,
.highscore-table td:last-child {
    text-align: right;
}

.highscore-table tr.achieved {
    color: #fff;
    text-shadow: 0 0 8px rgba(216, 245, 255, 0.85);
    background: rgba(216, 245, 255, 0.12);
}

/* ------------------- Economy sim UI ------------------- */

/* Mirrors .arcade-actions (top-left) on the opposite corner. Kept as its own
   cluster rather than joining .arcade-actions, which is the shared
   Menu/Mute/Pause/Quit contract every ARCADE GAME uses. Holds only the
   simulation speed control - it's relevant in both the galaxy view and the
   planet-management overlay, so it lives at the top level rather than inside
   .planet-modal (which has its own Build/Tech/Exit action bar). Hidden by
   default (matches the "hidden" attribute already on the element in
   index.html); shown for the whole "playing" phase via economy-ui.js. */
.vs-actions {
    display: none;
    position: fixed;
    top: max(1.4rem, env(safe-area-inset-top));
    right: max(0.6rem, env(safe-area-inset-right));
    gap: 0.6rem;
    z-index: 100;
}
.vs-actions:not([hidden]) {
    display: grid;
}
.vs-speed-btn {
    font: 700 0.85rem/1 "VT323", "Consolas", ui-monospace, monospace;
    letter-spacing: 0.05em;
}

/* Resource strip: sits just under the canonical .hud score line, in its own
   fixed --eco-hud-zone-h rectangle (see --arcade-top above). Same
   "hidden by default, shown while playing" pattern as .vs-actions - but
   unlike .vs-actions, this one must ALWAYS be laid out (display: flex) and
   only ever toggle visibility, not display: none - the zone height is
   static either way, but display: none would also collapse its flex-layout
   side effects (e.g. centring) at the moment a game starts or ends. */
.economy-hud {
    display: flex;
    visibility: hidden;
    position: fixed;
    top: var(--hud-zone-h);
    height: var(--eco-hud-zone-h);
    left: 0;
    right: 0;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
    overflow: hidden;
    /* Same centring as .hud: over the play area, clear of the button column
       on the left and the speed button on the right. */
    padding: 0 calc(var(--arcade-right) + 2.75rem + 0.6rem) 0 var(--arcade-btn-col);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 90;
}
.economy-hud:not([hidden]) {
    visibility: visible;
}
.eco-res {
    display: flex;
    gap: 0.35rem;
    font: 400 0.9rem/1 "VT323", "Consolas", ui-monospace, monospace;
    letter-spacing: 0.06em;
    color: #a8d0dc;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}
.eco-res__value {
    color: #d8f5ff;
}
.eco-res--warn .eco-res__value {
    color: #ffcf8a;
}

/* Build menu / tech tree / tile info: bordered dropdown-style panels in the
   same visual language as .highscore-panel, positioned so they don't
   collide with the top corner button clusters or the bottom touch controls. */
.eco-panel {
    position: fixed;
    /* Clear the 3-button .planet-modal__actions column above it (which
       itself starts at 5rem, below .vs-actions - see that rule's comment -
       so this needs 5rem + 3 * button height + 2 gaps ~= 14.45rem) so the
       two never overlap. */
    top: 15rem;
    right: max(0.6rem, env(safe-area-inset-right));
    width: min(88vw, 22rem);
    max-height: min(64vh, 32rem);
    display: flex;
    flex-direction: column;
    border: 2px solid rgba(216, 245, 255, 0.72);
    background: rgba(2, 4, 10, 0.9);
    box-shadow: 0 0 18px rgba(216, 245, 255, 0.22), inset 0 0 0 1px rgba(216, 245, 255, 0.12);
    box-sizing: border-box;
    z-index: 110;
}
.eco-panel.hidden,
.eco-panel[hidden] {
    display: none;
}
.eco-panel__footer {
    padding: 0.6rem 0.7rem;
    border-top: 1px solid rgba(216, 245, 255, 0.3);
}
.eco-panel__action {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 1rem;
    font-size: 1rem;
}

/* Home-planet summary popup: same panel styling, but shown over the galaxy
   view where the only other top-right control is the single speed button, so
   it only needs to clear that (not the modal's 3-button action bar). */
.home-summary-panel {
    top: 5rem;
}
.home-summary-panel p {
    margin: 0.3rem 0;
}

/* Planet-management overlay: the tile-grid canvas + its own Build/Tech/Exit
   action bar, layered on top of the (still-animating) galaxy view. Positioned
   like .overlay's dim background so pausing correctly dims this too. */
.planet-modal {
    position: fixed;
    inset: 0;
    background: rgba(2, 4, 10, 0.97);
    z-index: 40;
}
.planet-modal.hidden,
.planet-modal[hidden] {
    display: none;
}
.planet-modal__actions {
    position: fixed;
    /* .vs-actions (the persistent speed control, shown throughout "playing"
       including while this modal is open) occupies the same top-right
       corner at a higher z-index - without this offset its single button
       sits directly on top of (and steals clicks from) the Build button
       here. Clear it: 1.4rem top + one button (2.75rem) + a gap (~0.6rem). */
    top: 5rem;
    right: max(0.6rem, env(safe-area-inset-right));
    display: grid;
    gap: 0.6rem;
    z-index: 45;
}
/* Same play-area rule as the galaxy view, plus clearance on the right for the
   Build / Tech / Back button column (2.75rem wide, 0.6rem from the edge). */
.planet-area {
    position: absolute;
    top: var(--arcade-top);
    bottom: var(--arcade-bottom);
    left: var(--arcade-btn-col);
    right: calc(max(0.6rem, env(safe-area-inset-right)) + 2.75rem + 0.6rem);
}
#planet-stage {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
#planet-stage.dragging {
    cursor: grabbing;
}
.eco-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid rgba(216, 245, 255, 0.3);
    color: #fff;
    font: 400 1.1rem/1 "VT323", "Consolas", ui-monospace, monospace;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: 0 0 6px rgba(216, 245, 255, 0.55);
}
.eco-panel__close {
    background: transparent;
    border: none;
    color: #d8f5ff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.1rem 0.3rem;
}
.eco-panel__body {
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.eco-tech-branch {
    margin-top: 0.4rem;
    color: #fff;
    font: 400 0.95rem/1 "VT323", "Consolas", ui-monospace, monospace;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.8;
}
.eco-tech-branch:first-child {
    margin-top: 0;
}

.eco-list-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid rgba(216, 245, 255, 0.35);
    color: #d8f5ff;
    padding: 0.4rem 0.55rem;
    font: 400 0.85rem/1.3 "VT323", "Consolas", ui-monospace, monospace;
    letter-spacing: 0.04em;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.eco-list-item:hover:not(:disabled) {
    background: rgba(216, 245, 255, 0.12);
    border-color: #d8f5ff;
}
.eco-list-item:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.eco-list-item.selected {
    border-color: #ffe082;
    background: rgba(255, 224, 130, 0.14);
}
.eco-list-item.queued {
    border-color: #a0c8e8;
    background: rgba(160, 200, 232, 0.12);
}
.eco-list-item.researched {
    border-color: rgba(140, 230, 170, 0.6);
    color: rgba(216, 245, 255, 0.55);
}
.eco-list-item__name {
    font-size: 0.95rem;
}
.eco-list-item__meta {
    font-size: 0.78rem;
    color: #a8d0dc;
}

/* Transient feedback toast (e.g. "Not enough Metals"). */
.eco-toast {
    position: fixed;
    left: 50%;
    bottom: 6.5rem;
    transform: translateX(-50%) translateY(6px);
    background: rgba(0, 0, 0, 0.82);
    border: 1px solid rgba(216, 245, 255, 0.5);
    color: #d8f5ff;
    padding: 0.45rem 0.9rem;
    font: 400 0.9rem/1 "VT323", "Consolas", ui-monospace, monospace;
    letter-spacing: 0.06em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 120;
}
.eco-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 30rem) {
    .eco-panel {
        top: auto;
        bottom: 5.5rem;
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
    }
}