/* Dark is the default; ThemeSwitch.js sets data-theme. Grays are numbered from the page
   backdrop (1) up to body text (6), so each step keeps its role when the theme flips. */
:root {
    color-scheme: dark;

    --gray-1: #0f1115;
    --gray-2: #171a21;
    --gray-3: #1f232c;
    --gray-4: #2a2f3a;
    --gray-5: #8b93a3;
    --gray-6: #e7e9ee;
    --blue: #4f9dff;
    --red: #ff5d5d;
    --green: #3fbf6f;
    --amber: #ffbe3d;
    --slate: #4e5567;

    --text-small: 13px;
    --text-body: 15px;
    --text-display: 32px;

    --space-small: 4px;
    --space-medium: 8px;
    --space-large: 16px;

    --radius: 8px;

    --opacity-faint: 0.2;
    --opacity-dim: 0.35;
    --opacity-strong: 0.7;

    /* Board strokes, in cell units. */
    --stroke-thin: 0.03;
    --stroke-medium: 0.06;
    --stroke-wall: 0.1;

    --duration-fade: 0.35s;
    --duration-move: 0.6s;
}

:root[data-theme="light"] {
    color-scheme: light;

    --gray-1: #f1f4f9;
    --gray-2: #ffffff;
    --gray-3: #e3e9f2;
    --gray-4: #c6cedb;
    --gray-5: #5f6775;
    --gray-6: #1b2027;
    --blue: #2f7fe6;
    --red: #d63c3c;
    --green: #2a9d5a;
    --amber: #e39a0e;
    --slate: #7c8596;
}

* { box-sizing: border-box; }

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

button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: var(--opacity-dim); }
[hidden] { display: none !important; }

/* -- Gate -- */

.gate {
    min-height: 100%;
    display: grid;
    place-items: center;
    padding: var(--space-large) var(--space-large);
}

.gate__card {
    width: min(380px, 100%);
    display: grid;
    gap: var(--space-medium);
    padding: var(--space-large) var(--space-large);
    background: var(--gray-2);
    border: 1px solid var(--gray-4);
    border-radius: var(--radius);
}

.gate__logo { margin: 0; font-size: var(--text-display); letter-spacing: 0.02em; }
.gate__tagline { margin: 0 0 var(--space-medium); color: var(--gray-5); }
.gate__status { margin: 0; color: var(--gray-5); font-size: var(--text-small); }

.gate__input, .share__input {
    width: 100%;
    padding: var(--space-medium) var(--space-medium);
    border: 0;
    border-radius: var(--radius);
    background: var(--gray-3);
    color: var(--gray-6);
    font: inherit;
}

/* -- Buttons -- */

.primary-button {
    padding: var(--space-medium) var(--space-large);
    border: 0;
    border-radius: var(--radius);
    background: var(--blue);
    color: var(--gray-1);
    font-weight: 600;
}

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

.board-button, .toggle-button {
    padding: var(--space-medium) var(--space-medium);
    border: 0;
    border-radius: var(--radius);
    background: var(--gray-3);
}

.toggle-button.is-active {
    background: color-mix(in srgb, var(--amber) 18%, var(--gray-2));
    color: var(--amber);
}

.nav-bar__side--end { display: flex; justify-content: flex-end; }
.text-button--danger { color: var(--red); }

.text-button {
    padding: var(--space-small) var(--space-small);
    border: 0;
    background: none;
    color: var(--blue);
}

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

.app {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-template-rows: auto 1fr;
}

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

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

.nav-bar {
    grid-column: 1 / -1;
    padding-top: env(safe-area-inset-top);
    background: var(--gray-2);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: calc(48px + env(safe-area-inset-top));
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    border-bottom: 1px solid var(--gray-4);
}

.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(--gray-5); font-size: var(--text-small); }
.nav-bar__back { display: none; }
.nav-bar__theme { line-height: 1; }

@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; }
    body[data-active-panel="board"] .nav-bar__back { display: inline-block; }
    body[data-active-panel="board"] .nav-bar__theme { display: none; }
    body[data-active-panel="lobby"] .nav-bar__side--end > button { display: none; }
}

/* -- Lobby -- */

.list { flex: 1; overflow: auto; padding: var(--space-medium); display: grid; gap: var(--space-large); align-content: start; }
.list__title { margin: 0 0 var(--space-small); font-size: var(--text-small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-5); }
.list__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-small); }
.list__empty { margin: 0; color: var(--gray-5); font-size: var(--text-small); }

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

.list__item.is-selected { border-color: var(--blue); }
.list__item.is-idle { color: var(--gray-5); }
.list__badge { font-size: var(--text-small); color: var(--gray-5); white-space: nowrap; }
.list__badge--turn { color: var(--blue); font-weight: 600; }
.list__badge--result { color: var(--green); }

.identity {
    display: flex;
    align-items: center;
    gap: var(--space-medium);
    padding: var(--space-medium) var(--space-medium);
    border-top: 1px solid var(--gray-4);
    font-size: var(--text-small);
}

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

/* -- Board page -- */

.board-empty { flex: 1; display: grid; place-items: center; padding: var(--space-large); color: var(--gray-5); text-align: center; }

.board-view {
    flex: 1;
    overflow: auto;
    padding: var(--space-medium) var(--space-large) var(--space-large);
    display: flex;
}

/* The board sits at the centre of the panel; the status hangs just above it and the controls
   just below, in the two flexible rows either side. On a short window the rows collapse and the
   column scrolls. */
.board-column {
    margin: 0 auto;
    width: min(100%, 560px);
    min-height: 100%;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    gap: var(--space-medium);
}
.board-above { align-self: end; }
.board-below { align-self: start; display: grid; gap: var(--space-medium); }

.participants { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-medium); }
.participant__state:empty { display: none; }
.participant { display: grid; gap: var(--space-small); }
.participant--them { text-align: right; }
.participant__name { font-weight: 600; }
.participant--you .participant__name { color: var(--blue); }
.participant--them .participant__name { color: var(--red); }
.participant__state { font-size: var(--text-small); color: var(--gray-5); }
.participant.is-ready .participant__state { color: var(--green); }
.participant.is-win .participant__state { color: var(--green); font-weight: 600; }
.participant.is-loss .participant__state { color: var(--red); font-weight: 600; }

.board-stage { width: 100%; border-radius: var(--radius); overflow: hidden; }

.board-svg {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.action-panel, .share { width: 100%; }
.button-row { display: flex; gap: var(--space-medium); }
.button-row--single > button { flex: 1 1 0; min-width: 0; padding-left: var(--space-medium); padding-right: var(--space-medium); white-space: nowrap; }

.share { display: grid; gap: var(--space-small); padding: var(--space-medium); border: 1px dashed var(--gray-4); border-radius: var(--radius); }
.share__hint { margin: 0; color: var(--gray-5); font-size: var(--text-small); }
.share__row { display: flex; gap: var(--space-medium); }

/* -- SVG board -- */

#board-svg { -webkit-tap-highlight-color: transparent; }
.cell { fill: var(--gray-3); }
.cell--remembered { fill: var(--gray-2); }
.cell--unseen { fill: var(--gray-1); }
.cell.is-markable { cursor: pointer; }
.home { fill: none; stroke-width: var(--stroke-medium); pointer-events: none; }
.home--own { stroke: var(--blue); }
.home--enemy { stroke: var(--red); }
.home--neutral { stroke: var(--gray-5); }

.wall { stroke: var(--gray-6); stroke-width: var(--stroke-wall); stroke-linecap: square; pointer-events: none; }
.wall--remembered { stroke: var(--gray-5); opacity: var(--opacity-strong); }
.wall--changed { stroke: var(--amber); }
.wall--blocked { stroke: var(--red); }
.wall--border { fill: none; stroke: var(--gray-6); stroke-width: var(--stroke-wall); pointer-events: none; }
.wall-mover { transition: transform var(--duration-move) ease-in-out; }

.stale { font-size: 0.26px; fill: var(--gray-5); text-anchor: end; pointer-events: none; }

.piece { pointer-events: none; }
.piece--own { fill: var(--blue); }
.piece--enemy { fill: var(--red); }
.piece-mover { transition: transform var(--duration-move) ease-in-out; }
.ghost { fill: none; stroke: var(--red); stroke-width: var(--stroke-medium); stroke-dasharray: 0.1 0.08; opacity: var(--opacity-strong); pointer-events: none; }
.ghost__label { font-size: 0.26px; fill: var(--red); text-anchor: middle; stroke: none; }

.stop { cursor: pointer; }
.stop__area { fill: transparent; }
.stop__dot { fill: var(--slate); pointer-events: none; }
@media (hover: hover) {
    .stop:hover .stop__area { fill: var(--blue); opacity: var(--opacity-faint); }
}
.stop--push .stop__dot { fill: var(--blue); }
.stop__arrow { fill: var(--blue); stroke: var(--gray-1); stroke-width: var(--stroke-thin); stroke-linejoin: round; pointer-events: none; }
.stop--illegal { cursor: not-allowed; }
.stop--illegal .stop__dot, .stop--illegal .stop__arrow { fill: var(--gray-5); opacity: var(--opacity-dim); }

.preview { pointer-events: none; }
.preview__path { fill: none; stroke: var(--blue); stroke-width: var(--stroke-medium); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.12 0.1; }
.preview__end { fill: none; stroke: var(--blue); stroke-width: var(--stroke-medium); }
.preview__wall { stroke: var(--blue); stroke-width: var(--stroke-wall); stroke-dasharray: 0.12 0.1; stroke-linecap: square; }
.preview__gone { stroke: var(--gray-1); stroke-width: var(--stroke-wall); stroke-dasharray: 0.12 0.1; stroke-linecap: square; }
.preview--pending { opacity: var(--opacity-strong); }

.marker { pointer-events: none; }
.marker--cell { fill: var(--amber); }
.marker--edge { stroke: var(--amber); stroke-width: var(--stroke-medium); stroke-dasharray: 0.08 0.08; stroke-linecap: butt; }
.edge-hit { fill: transparent; cursor: pointer; }

.reveal { transition: opacity var(--duration-fade) ease-out; }
.reveal.is-hidden { opacity: 0; }

.route { fill: none; stroke-width: var(--stroke-medium); stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.route--own { stroke: var(--blue); }
.route--enemy { stroke: var(--red); }
.route--enemy { stroke-dasharray: 0.16 0.1; }
.push-mark { fill: none; stroke-width: var(--stroke-medium); stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.push-mark--own { stroke: var(--blue); }
.push-mark--enemy { stroke: var(--red); }
.push-mark--blocked { opacity: var(--opacity-dim); }