/* Tokens follow minefeud's palette. Dark is the default; light follows the system preference. */
:root {
    color-scheme: dark;
    --bg: #0f1115;
    --surface: #171a21;
    --surface-2: #1f232c;
    --surface-3: #2c3340;
    --border: #2a2f3a;
    --text: #e7e9ee;
    --muted: #8b93a3;
    --accent: #4f9dff;
    --accent-soft: #1d2c44;
    --on-accent: #06101f;
    --opponent: #ff8a5b;
    --positive: #3fbf6f;
    --warning: #e0a33a;
    --danger: #ff6b6b;
    --danger-soft: #5e2b2b;
    --cloud: #aab4c6;
    --radius: 10px;
}

@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --bg: #f1f4f9;
        --surface: #ffffff;
        --surface-2: #e3e9f2;
        --surface-3: #d3dbe8;
        --border: #c6cedb;
        --text: #1b2027;
        --muted: #5f6775;
        --accent: #2f7fe6;
        --accent-soft: #d8e6fb;
        --on-accent: #ffffff;
        --opponent: #d9603a;
        --positive: #2a9d5a;
        --warning: #bd821a;
        --danger: #d6453f;
        --danger-soft: #f3d3d0;
        --cloud: #7d8798;
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: 0.45; }
[hidden] { display: none !important; }

/* -- Gate -- */

.gate {
    min-height: 100%;
    display: grid;
    place-items: center;
    padding: 24px 16px;
}

.gate__card {
    width: min(380px, 100%);
    display: grid;
    gap: 12px;
    padding: 28px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.gate__logo { margin: 0; font-size: 32px; letter-spacing: 0.02em; }
.gate__tagline { margin: 0 0 8px; color: var(--muted); }
.gate__status { margin: 0; color: var(--muted); font-size: 13px; }

.gate__input, .share__input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
}

/* -- Buttons -- */

.primary-button {
    padding: 10px 16px;
    border: 0;
    border-radius: 8px;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}

.primary-button--wide { width: 100%; }

.board-button, .toggle-button {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
}

.board-button--danger { color: var(--danger); }

.toggle-button.is-active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.toggle-button--quiet { margin-left: auto; }

.text-button {
    padding: 4px 6px;
    border: 0;
    background: none;
    color: var(--accent);
}

/* -- Layout: two columns on desktop, a page stack on phones -- */

.app {
    height: 100%;
    display: grid;
    grid-template-columns: 320px 1fr;
}

.panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface);
}

.panel--lobby { border-right: 1px solid var(--border); }
.panel--board { background: var(--bg); }

.nav-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 48px;
    padding: 0 12px;
    border-bottom: 1px solid var(--border);
}

.nav-bar__title { font-weight: 600; text-align: center; }
.nav-bar__side { min-width: 0; }
.nav-bar__side:last-child { text-align: right; color: var(--muted); font-size: 13px; }
.nav-bar__side--mobile { display: none; }

@media (max-width: 760px) {
    .app { grid-template-columns: 1fr; }
    .panel { display: none; }
    body[data-active-panel="lobby"] .panel--lobby { display: flex; }
    body[data-active-panel="board"] .panel--board { display: flex; }
    .nav-bar__side--mobile { display: inline-block; justify-self: start; }
}

/* -- Lobby -- */

.list { flex: 1; overflow: auto; padding: 12px; display: grid; gap: 16px; align-content: start; }
.list__title { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.list__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.list__empty { margin: 0; color: var(--muted); font-size: 13px; }

.list__item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--surface-2);
    text-align: left;
}

.list__item.is-selected { border-color: var(--accent); }
.list__item.is-idle { color: var(--muted); }
.list__badge { font-size: 12px; color: var(--muted); white-space: nowrap; }
.list__badge--turn { color: var(--accent); font-weight: 600; }
.list__badge--result { color: var(--positive); }

.identity {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    font-size: 13px;
}

.identity__label { color: var(--muted); }
.identity__name { flex: 1; font-weight: 600; }

/* -- Board page -- */

.board-empty { flex: 1; display: grid; place-items: center; padding: 24px; color: var(--muted); text-align: center; }

.board-view {
    flex: 1;
    overflow: auto;
    padding: 12px 16px 24px;
    display: grid;
    gap: 12px;
    align-content: start;
    justify-items: center;
}

.board-status { margin: 0; width: min(100%, 520px); font-weight: 600; min-height: 1.4em; }
.board-status.is-win { color: var(--positive); }
.board-status.is-loss { color: var(--danger); }

.board-stage { width: min(100%, 520px); }

.board-svg {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.order-panel, .share, .history { width: min(100%, 520px); }
.order-panel { display: grid; gap: 8px; }
.order-summary { margin: 0; min-height: 1.4em; color: var(--muted); font-size: 14px; }
.order-summary.is-warning { color: var(--warning); }
.button-row { display: flex; gap: 8px; flex-wrap: wrap; }

.share { display: grid; gap: 6px; padding: 12px; border: 1px dashed var(--border); border-radius: var(--radius); }
.share__hint { margin: 0; color: var(--muted); font-size: 13px; }
.share__row { display: flex; gap: 8px; }

.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.history__turn {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
}
.history__turn.is-shown { border-color: var(--accent); }
.history__title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.history__line { margin: 2px 0 0; font-size: 14px; }
.history__line--enemy { color: var(--opponent); }

/* -- SVG board -- */

.tile { fill: var(--surface-2); stroke: var(--border); stroke-width: 0.03; }
.tile--marked { fill: var(--surface-3); }
.cloud { fill: var(--cloud); opacity: 0.45; pointer-events: none; }
.base { stroke-width: 0.06; pointer-events: none; }
.base--own { fill: var(--accent-soft); stroke: var(--accent); }
.base--enemy { fill: var(--danger-soft); stroke: var(--opponent); }
.marker { font-size: 0.6px; fill: var(--warning); pointer-events: none; }
.label { font-size: 0.3px; fill: var(--muted); pointer-events: none; }

.plane { pointer-events: none; }
.plane--own { fill: var(--accent); }
.plane--own.is-down { fill: var(--danger); }
.plane__body { stroke-width: 0.04; }
.plane--preview .plane__body { fill: none; stroke: var(--accent); stroke-dasharray: 0.08 0.06; }
.plane--ghost .plane__body { fill: none; stroke: var(--opponent); stroke-dasharray: 0.08 0.06; }
.plane--final .plane__body { fill: var(--opponent); }
.plane-mover { transition: transform 0.6s ease-in-out; }

.own-path { fill: none; stroke: var(--accent); stroke-width: 0.06; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; pointer-events: none; }
.path-preview { fill: var(--accent); opacity: 0.18; pointer-events: none; }
.fire-preview { fill: var(--danger); opacity: 0.25; pointer-events: none; }
.ping-preview { fill: none; stroke: var(--accent); stroke-width: 0.05; stroke-dasharray: 0.1 0.1; pointer-events: none; }

.streak { stroke: var(--opponent); stroke-width: 0.14; stroke-linecap: round; opacity: 0.75; pointer-events: none; }
.ping-ring { fill: none; stroke: var(--opponent); stroke-width: 0.06; pointer-events: none; }
.ping-ring--inner { stroke-width: 0.04; opacity: 0.6; }
.bomb-mark { font-size: 0.7px; fill: var(--opponent); pointer-events: none; }
.reveal { transition: opacity 0.35s ease-out; }
.reveal--old { opacity: 0.4; }
.reveal.is-hidden { opacity: 0; }

.picker-ghost { cursor: pointer; }
.picker-ghost__dot { fill: var(--surface-3); stroke: var(--accent); stroke-width: 0.04; }
.picker-ghost__speed { font-size: 0.42px; font-weight: 600; fill: var(--text); text-anchor: middle; pointer-events: none; }
.picker-ghost--edge .picker-ghost__dot { stroke: var(--warning); stroke-dasharray: 0.08 0.06; }
.picker-ghost--selected .picker-ghost__dot { fill: var(--accent); }
.picker-ghost--selected .picker-ghost__speed { fill: var(--on-accent); }
.picker-ghost:hover .picker-ghost__dot { fill: var(--accent-soft); }