html, body {
    margin: 0;
    height: 100%;
    background: #000;
    color: #d8f5ff;
    font-family: "VT323", "Consolas", ui-monospace, monospace;
    overflow: hidden;
}

/* .app is the play area (below the HUD, right of the button column, above the
   bottom edge) - see ../../arcade/arcade-shell.css. Here it's a flex column
   so the board (flex: 1) and the footer bar of phase buttons are laid out in
   a normal document-flow stack: the footer always takes exactly the space its
   content needs, stays visible above the browser toolbar, and the board
   fills whatever is left above it, so the two can never overlap. */
.app {
    display: flex;
    flex-direction: column;
}

#stage {
    display: block;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    background: #000;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}

/* Shared arcade control styles live in ../../arcade/arcade-shell.css */

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

/* The phase buttons are this game's bottom button row, so they sit exactly
   where every other arcade game's touch buttons do (same size, same
   distance from the bottom edge - see .touch-controls in arcade-shell.css). */
body {
    --arcade-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

.board-footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.875rem; /* same spacing as the other games' .touch-controls row */
    padding: 0.5rem 1rem 0;
    box-sizing: border-box;
    position: relative;
}

/* Battlefield has its own phase-button footer instead of the shared
   #touch-controls element, so the shared GAME BUTTONS debug outline
   (arcade-shell.css, gated on .has-touch-controls) never matches here -
   give this footer the same debug treatment directly. */
body.debug-zones .board-footer {
    background: rgba(124, 252, 0, 0.08) !important;
    outline: 1px dashed #7CFC00;
    outline-offset: -1px;
}
body.debug-zones .board-footer::before {
    content: "GAME BUTTONS";
    position: absolute;
    top: 0.2rem;
    left: 50%;
    transform: translateX(-50%);
    color: #7CFC00;
    font: 0.65rem/1 monospace;
    letter-spacing: 0.05em;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    z-index: 999;
}

.board-footer .arcade-btn {
    width: var(--touch-size);
    height: var(--touch-size);
}

.board-footer .arcade-btn svg {
    width: 60%;
    height: 60%;
}

/* On wider screens the play area is mirrored: as much room on the right as the
   button column takes on the left, so the map sits centred on the screen
   rather than pushed against the right edge. (Phones keep the full width.) */
@media (min-width: 40rem) {
    .app {
        right: var(--arcade-btn-col);
    }
    .hud {
        padding-right: var(--arcade-btn-col);
    }
}

/* Round icon buttons, matching the top-left arcade-actions cluster. Only
   one is enabled at a time, driven by the current turn phase. */
.btn-phase.hidden,
.btn-phase[hidden] {
    display: none;
}

.overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    background: rgba(0, 0, 0, 0.75);
    text-align: center;
    padding: 1rem;
    box-sizing: border-box;
}

.overlay.hidden {
    display: none;
}

/* Centred VICTORY / YOU LOSE banner, shown over the board the moment the
   game ends and before the high-score overlay above takes over - a sibling
   of .overlay, earlier in the markup, so .overlay always stacks on top of it
   once both are visible. */
.result-banner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.result-banner.hidden {
    display: none;
}

.result-banner__text {
    /* Same face as .overlay__title: VT323 (inherited from body), its
       letter-spacing, and plain white - only the glow colour marks win/lose. */
    font-size: clamp(3rem, 13vw, 6rem);
    letter-spacing: 0.35em;
    text-align: center;
    padding: 0 1rem;
    color: #fff;
}

.result-banner__text.win {
    text-shadow: 0 0 16px rgba(127, 255, 176, 0.85), 0 0 42px rgba(127, 255, 176, 0.5);
}

.result-banner__text.lose {
    text-shadow: 0 0 16px rgba(255, 107, 107, 0.85), 0 0 42px rgba(255, 107, 107, 0.5);
}

.overlay__title {
    font-size: clamp(2rem, 8vw, 4.5rem);
    letter-spacing: 0.35em;
    color: #fff;
    text-shadow: 0 0 12px rgba(216, 245, 255, 0.7);
}

.overlay__hint {
    max-width: 32rem;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #a8d0dc;
}

.overlay.is-game-over {
    background: rgba(0, 0, 0, 0.86);
    gap: 1rem;
}

.overlay.is-game-over .overlay__hint,
.overlay.is-game-over .mode-select,
.overlay.is-game-over .size-select {
    display: none;
}

.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 {
    box-sizing: border-box;
    width: 100%;
    background: transparent;
    color: #a8d0dc;
    border: 2px solid rgba(216, 245, 255, 0.55);
    border-radius: 0;
    padding: 0.3rem 0.3rem;
    font-family: inherit;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

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

/* Map-size selector: a connected "segmented bar" (overlapping borders, no
   gap, radius only on the two outer ends) - deliberately distinct from
   .mode-select's spaced button grid above, so the two controls read as
   different kinds of choice at a glance. */
.size-select {
    display: flex;
    justify-content: center;
    max-width: 100%;
    overflow-x: auto;
}

.size-btn {
    box-sizing: border-box;
    flex: 0 0 auto;
    margin-left: -2px;
    background: transparent;
    color: #a8d0dc;
    border: 2px solid rgba(216, 245, 255, 0.55);
    border-radius: 0;
    padding: 0.25rem 0.28rem;
    font-family: inherit;
    font-size: 0.6rem;
    letter-spacing: 0;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.size-btn:first-child {
    margin-left: 0;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.size-btn:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* Six segments (~23rem) don't fit the phone-portrait play area: two rows of
   three, squared off, rather than clipping Skirmish/Continent off the ends. */
@media (max-width: 30rem) {
    .size-select {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        max-width: 20rem;
    }
    .size-btn,
    .size-btn:first-child,
    .size-btn:last-child {
        margin: 0 0 -2px -2px;
        padding: 0.3rem 0.2rem;
        border-radius: 0;
    }
    .size-btn:nth-child(3n + 1) {
        margin-left: 0;
    }
    .size-btn:nth-child(n + 4) {
        margin-bottom: 0;
    }
}

.size-btn:hover,
.size-btn.selected {
    z-index: 1;
    color: #fff;
    background: rgba(216, 245, 255, 0.15);
    border-color: #d8f5ff;
    text-shadow: 0 0 6px rgba(216, 245, 255, 0.55);
}

.btn {
    background: transparent;
    color: #d8f5ff;
    border: 2px solid #d8f5ff;
    border-radius: 0;
    padding: 0.5rem 1.5rem;
    font-family: inherit;
    font-size: 1.3rem;
    letter-spacing: 0.2em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.btn:hover {
    background: rgba(216, 245, 255, 0.15);
}

#btn-start {
    min-width: 12rem;
    box-sizing: border-box;
    padding: 0.6rem 1.5rem;
    font-size: 1.3rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
}

.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 {
    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);
}