:root {
    --paper: #f4efe4;
    --ink: #1b2f2c;
    --panel: #fff9ee;
    --accent: #1f6c53;
    --accent-soft: #d9eee7;
    --error: #8f2020;
    --tile: #84a380;
    --tile-text: #10261a;
    --tile-text-negative: #8f2020;
    --grid-line: rgba(9, 23, 18, 0.08);
    --shadow: 0 20px 32px rgba(28, 53, 47, 0.15);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Alegreya Sans", "Segoe UI", Tahoma, sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 18% 6%, #fff8ee 0, #fff8ee 18%, rgba(255, 248, 238, 0) 60%),
        linear-gradient(140deg, #f2ead8 0%, #dde8dc 52%, #d3dfd4 100%);
    min-height: 100vh;
}

label {
    display: grid;
    gap: 5px;
    font-size: 0.94rem;
}

input {
    border: 1px solid #cbbfa8;
    background: #fffcf5;
    border-radius: 9px;
    padding: 8px 10px;
    color: var(--ink);
    font: inherit;
}

input:focus {
    border-color: var(--accent);
    outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

button {
    font: inherit;
    border: 1px solid #25624d;
    color: #f6fbf8;
    background: linear-gradient(180deg, #2f7d61 0%, #1f624b 100%);
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    transition: transform 120ms ease, filter 120ms ease;
}

button:hover:enabled {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

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

.landing {
    max-width: 640px;
    margin: 20vh auto 0 auto;
    padding: 0 20px;
    text-align: center;
}

/* Battle console (#183): the `/battle/:id` route's own layout. */

/* #336: the battle-view panel stretches to fill its grid cell (rather than
   shrinking to its content's natural height -- see the
   `.battle-console-region--main` flex rule below), so the canvas inside has
   real, non-zero space to grow into via `flex: 1`. The canvas's own CSS box
   (not its `width`/`height` attributes, which `app.rs`'s `ResizeObserver`
   sets to match) is what actually determines its backing-store size. */
.battle-view {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.battle-view canvas {
    display: block;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}

/* The phase/activation window, selection stat card, and hover stat card
   (#295) all anchor together, top-right over the canvas -- one flex column
   so each stacks directly under whatever's above it regardless of that
   panel's own height (a stat card's height varies with its unit's pip
   count), rather than each being independently `position: absolute` at a
   fixed offset. */
.phase-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
}

.activation-tracker {
    max-width: 220px;
    background: var(--panel);
    border: 1px solid #d9ccb2;
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 8px 10px;
    font-size: 0.82rem;
    line-height: 1.4;
}

.activation-tracker-turn {
    font-weight: 600;
}

.activation-tracker-grant,
.activation-tracker-suspended {
    margin-top: 4px;
}

.stat-card {
    background: var(--panel);
    border: 1px solid #d9ccb2;
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 4px;
    line-height: 0;
}

.stat-card svg {
    display: block;
}

.move-draft-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

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

.facing-picker button {
    min-width: 44px;
    min-height: 44px;
    padding: 6px;
}

.facing-picker button.active {
    background: linear-gradient(180deg, #164a39 0%, #0f3527 100%);
    box-shadow: inset 0 0 0 2px var(--accent-soft);
}

/* #325 panel shell: a fixed grid (sidebar / main / right / bottom) around
   today's `battle-console-panel` sections, with drag-resizable splitters
   between adjacent regions and a header-only collapse per panel (except
   the battle view, which stays exempt -- see ShellState's own doc). Column
   and row track sizes come from `app.rs`'s inline `style` on `.battle-console`
   itself (ShellState.sizes, dragged live); everything else here is static. */
.battle-console {
    display: grid;
    grid-template-areas:
        "sidebar splitter-sm main splitter-mr right"
        "bottom-splitter bottom-splitter bottom-splitter bottom-splitter bottom-splitter"
        "bottom-tabs bottom-tabs bottom-tabs bottom-tabs bottom-tabs"
        "bottom-content bottom-content bottom-content bottom-content bottom-content";
    width: min(98vw, 1800px);
    height: 92vh;
    margin: 16px auto;
    position: relative;
    z-index: 1;
}

.battle-console-region {
    min-width: 0;
    min-height: 0;
    overflow: auto;
}

/* #326: the sidebar and right regions each hold a stacked pair of panels
   (OOB/Contacts, Selection/Hover) with no splitter between them -- see
   `.battle-console-stack-item` below. */
.battle-console-region--sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
}

.battle-console-region--main {
    grid-area: main;
    display: flex;
    flex-direction: column;
}

.battle-console-region--right {
    grid-area: right;
    display: flex;
    flex-direction: column;
}

/* All three bottom-tab panels share this one grid area (only the active
   tab's is ever visible) -- see the tab-group primitive's own note in
   ADR 0009 D1. */
.battle-console-region--bottom-content {
    grid-area: bottom-content;
    display: none;
}

.battle-console-region--bottom-content.active {
    display: block;
}

/* #310: Narrative and Console each need part of their bottom-content region
   to scroll independently while the rest (Console's login/get-state buttons
   and its command input) stays put -- unlike a sidebar/right stack item,
   these hold more than one thing that needs bounded space, so the region's
   own `overflow: auto` isn't enough on its own. */
.battle-console-panel.narrative,
.battle-console-panel.console {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.battle-console-panel.narrative > h2,
.battle-console-panel.console > h2,
.battle-console-panel.console > h3,
.battle-console-panel.console > .repl-shortcuts,
.battle-console-panel.console > form {
    flex-shrink: 0;
}

.scrollback-pane {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
}

.scrollback-lines {
    margin: 0;
}

/* #326: each half of a sidebar/right stacked pair, sized evenly with no
   splitter between them (see #326's grilling on why not) and scrolling
   independently. */
.battle-console-stack-item {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
}

/* Header-only collapse (#325 Q7): hides the panel's own body, leaving
   whatever sits alongside it in the region wrapper -- the collapse-toggle
   button -- as the remaining "header-only strip." #326 moved this from the
   region itself to each `.battle-console-stack-item`, since the sidebar and
   right regions now hold two independently-collapsible panels apiece. */
.battle-console-stack-item.collapsed .battle-console-panel {
    display: none;
}

.battle-console-collapse-toggle {
    display: block;
    width: 100%;
    padding: 4px 8px;
    border: none;
    border-bottom: 1px solid var(--grid-line);
    background: var(--panel);
    color: var(--ink);
    font-size: 0.9rem;
    text-align: right;
    cursor: pointer;
}

.battle-console-splitter {
    background: var(--grid-line);
}

.battle-console-splitter--sidebar-main {
    grid-area: splitter-sm;
    cursor: col-resize;
}

.battle-console-splitter--main-right {
    grid-area: splitter-mr;
    cursor: col-resize;
}

.battle-console-splitter--main-bottom {
    grid-area: bottom-splitter;
    cursor: row-resize;
}

.battle-console-tabs {
    grid-area: bottom-tabs;
    display: flex;
    align-items: stretch;
    gap: 2px;
    background: var(--panel);
    border-bottom: 1px solid var(--grid-line);
}

.battle-console-tabs button {
    border: none;
    background: transparent;
    color: var(--ink);
    padding: 4px 12px;
    cursor: pointer;
}

.battle-console-tabs button.active {
    background: var(--accent-soft);
    font-weight: 600;
}

.battle-console-tabs .battle-console-collapse-toggle {
    width: auto;
    margin-left: auto;
    border-bottom: none;
}