/* Tabula Zero in the browser. Plain CSS, no framework; light and dark follow the system. */

:root {
    color-scheme: light dark;
    --light-square: #eed9b6;
    --dark-square: #b58863;
    --last-light: #d6d77a;
    --last-dark: #aaa23a;
    --selected: #7fa650;
    --accent: #3a7bd5;
    --muted: color-mix(in srgb, CanvasText 55%, transparent);
    --line: color-mix(in srgb, CanvasText 18%, transparent);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

[hidden] { display: none !important; }

body { margin: 0; background: Canvas; color: CanvasText; }

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--line);
}

h1 { font-size: 1.2rem; margin: 0; letter-spacing: 0.02em; }
h2 { font-size: 1rem; margin: 0 0 0.6rem; }
h3 { font-size: 0.95rem; margin: 1.4rem 0 0.2rem; }

main { padding: 1rem; max-width: 1100px; margin: 0 auto; }

button {
    font: inherit;
    padding: 0.45rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: ButtonFace;
    color: ButtonText;
    cursor: pointer;
}
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: var(--accent); color: white; border-color: var(--accent); }

/* ---- signing in --------------------------------------------------------------------------- */
.gate { display: flex; flex-direction: column; gap: 0.8rem; max-width: 380px; margin: 3rem auto 1rem; }
.gate form, #confirm-panel { display: flex; flex-direction: column; gap: 0.5rem; }
.gate p { margin: 0; }
.intro { color: var(--muted); line-height: 1.45; }
input[type="email"], input[type="text"] {
    font: inherit;
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: Field;
    color: FieldText;
}
.gate-message { min-height: 1.2em; line-height: 1.45; }
.error { color: #c0392b; min-height: 1.2em; }
.legal { text-align: center; font-size: 0.85rem; color: var(--muted); margin: 2rem 0 1rem; }
.legal a { color: inherit; }
.who { color: var(--muted); font-size: 0.9rem; align-self: center; margin-left: 0.4rem; }

/* ---- notices above the table: watching a guest, a closed table ------------------------------ */
.notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 0.8rem;
    margin-bottom: 1rem;
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: 6px;
}

/* ---- people ------------------------------------------------------------------------------ */
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.8rem 0 0.4rem; }
.inline-form input { flex: 1 1 220px; max-width: 320px; }
.people-table td:first-child, .people-table th:first-child { text-align: left; }
.invite-created { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.4rem 0; }
.invite-created input { flex: 1 1 320px; font-family: ui-monospace, monospace; font-size: 0.85rem; }

/* ---- the table: board and side panel ---------------------------------------------------- */
.table { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.board-wrap { position: relative; width: min(94vw, 540px); }
#board { display: block; width: 100%; height: auto; user-select: none; touch-action: manipulation; }

.square.light { fill: var(--light-square); }
.square.dark { fill: var(--dark-square); }
.square.light.last { fill: var(--last-light); }
.square.dark.last { fill: var(--last-dark); }
.square.selected { fill: var(--selected); }

.target { fill: rgba(20, 85, 30, 0.45); }
.target.capture { fill: none; stroke: rgba(20, 85, 30, 0.55); stroke-width: 5; }

.piece {
    font-family: "DejaVu Sans", "Noto Sans Symbols 2", "Segoe UI Symbol", serif;
    font-size: 50px;
    text-anchor: middle;
    dominant-baseline: central;
    cursor: pointer;
}
.piece.white { fill: #fbfbfb; stroke: #1d1d1d; stroke-width: 1.2px; }
.piece.black { fill: #1d1d1d; stroke: #fbfbfb; stroke-width: 0.5px; }
.coordinate { font-size: 11px; font-weight: 600; pointer-events: none; }
.coordinate.on-light { fill: var(--dark-square); }
.coordinate.on-dark { fill: var(--light-square); }

.promotion {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.45);
}
.promotion button { font-size: 2.4rem; width: 3.6rem; height: 3.6rem; line-height: 1; }

.side { flex: 1 1 260px; min-width: 240px; }
.status { font-size: 1.1rem; font-weight: 600; min-height: 1.5em; margin-top: 0; }
.status.flash { color: #c0392b; }
.network-line { color: var(--muted); margin: -0.4rem 0 0.8rem; font-size: 0.9rem; min-height: 1.2em; }
.network-line.fresh { color: #27ae60; font-weight: 600; }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem; }
.moves {
    padding-left: 2.6rem;
    margin: 0;
    max-height: 320px;
    overflow-y: auto;
    font-variant-numeric: tabular-nums;
}
.moves li { break-inside: avoid; }

/* ---- what the engine thinks ------------------------------------------------------------ */
.thinking { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.evaluation { display: flex; align-items: center; gap: 0.8rem; }
.eval-bar {
    flex: 0 1 540px;
    height: 14px;
    border-radius: 7px;
    background: #2b2b2b;
    overflow: hidden;
    border: 1px solid var(--line);
}
.eval-fill { height: 100%; width: 50%; background: #f3f3f3; transition: width 0.2s ease; }
.search-line, .pv { color: var(--muted); margin: 0.4rem 0; font-variant-numeric: tabular-nums; }
.pv { color: CanvasText; }

.root-moves { border-collapse: collapse; font-variant-numeric: tabular-nums; margin-top: 0.4rem; }
.root-moves th, .root-moves td { padding: 0.22rem 0.7rem; text-align: right; border-bottom: 1px solid var(--line); }
.root-moves th:first-child, .root-moves td:first-child { text-align: left; }
.root-moves tr.best td { font-weight: 600; }
.visits-bar {
    display: inline-block;
    height: 0.6em;
    margin-right: 0.45em;
    border-radius: 2px;
    background: var(--accent);
    vertical-align: middle;
}
.explain { color: var(--muted); max-width: 60ch; font-size: 0.9rem; }

/* ---- tabs, training, archive ---------------------------------------------------------- */
nav { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tab.active { background: var(--accent); color: white; border-color: var(--accent); }

.summary { color: var(--muted); }

/* ---- the training buttons ---------------------------------------------------------------- */
.coach { margin-bottom: 1.5rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--line); }
.coach-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0; }
.run-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin: 0.4rem 0; }
.progress {
    flex: 0 1 320px;
    height: 12px;
    border-radius: 6px;
    border: 1px solid var(--line);
    overflow: hidden;
    background: color-mix(in srgb, CanvasText 6%, transparent);
}
.progress-fill { height: 100%; width: 0; background: var(--accent); transition: width 0.3s ease; }
.run-last { min-height: 1.2em; margin: 0.4rem 0; }
.run-last.failed { color: #c0392b; }
.charts { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.charts figure { margin: 0; flex: 1 1 420px; max-width: 560px; }
.charts figcaption { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.3rem; }
.charts svg { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; }
.axis { stroke: var(--muted); stroke-width: 1; }
.grid { stroke: var(--line); stroke-width: 1; }
.tick { font-size: 11px; fill: var(--muted); }
.series { fill: none; stroke-width: 2.2; }
.series.loss { stroke: var(--accent); }
.series.policy { stroke: #e67e22; }
.series.value { stroke: #27ae60; }
.series.elo { stroke: #8e44ad; }
.band { fill: color-mix(in srgb, #8e44ad 20%, transparent); stroke: none; }
.point { stroke: none; }
.point.loss { fill: var(--accent); } .point.policy { fill: #e67e22; } .point.value { fill: #27ae60; }
.point.elo { fill: #8e44ad; }
.promotion-mark { fill: #f1c40f; stroke: #7d6608; stroke-width: 1; }
.legend { font-size: 12px; }
.legend.loss { fill: var(--accent); } .legend.policy { fill: #e67e22; } .legend.value { fill: #27ae60; }

.data-table { border-collapse: collapse; font-variant-numeric: tabular-nums; margin-top: 1rem; }
.data-table th, .data-table td { padding: 0.25rem 0.6rem; border-bottom: 1px solid var(--line); text-align: right; }
.data-table tbody tr.clickable { cursor: pointer; }
.data-table tbody tr.clickable:hover, .data-table tbody tr.current { background: color-mix(in srgb, var(--accent) 15%, transparent); }

.archive-files { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.file.active { background: var(--accent); color: white; border-color: var(--accent); }
.archive { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.archive-list { flex: 1 1 320px; }
.pager { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.6rem; }
.archive-game { flex: 1 1 380px; max-width: 480px; }
#replay-board { width: 100%; height: auto; display: block; }
.replay-controls { display: flex; align-items: center; gap: 0.4rem; margin: 0.5rem 0; }
.replay-controls span { min-width: 7em; text-align: center; font-variant-numeric: tabular-nums; }
.replay-move { cursor: pointer; }
.replay-move.current { font-weight: 700; text-decoration: underline; }