:root {
    --bg: #14171c;
    --bg2: #1c2128;
    --panel: #232a33;
    --border: #2f3742;
    --text: #d7dde5;
    --muted: #8a96a6;
    --accent: #6db5ff;
    --good: #5fd07a;
    --bad: #e07070;
    --warn: #f5c560;
    --gold: #f0b048;
  }

  * {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13px;
  }

  a {
    color: var(--accent);
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  code,
  pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
  }

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

  #sidebar {
    background: var(--bg2);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 14px;
  }

  #main {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  h1 {
    font-size: 16px;
    margin: 0 0 4px;
    color: var(--gold);
  }

  h2 {
    font-size: 11px;
    margin: 18px 0 6px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
  }

  .stats {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 12px;
    line-height: 1.6;
  }

  .stats b {
    color: var(--text);
  }

  .filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
  }

  .filter label {
    font-size: 11px;
    color: var(--muted);
  }

  .filter input,
  .filter select {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 5px 8px;
    border-radius: 4px;
    font: inherit;
    width: 100%;
  }

  .toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .toggle,
  .chip {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 3px 8px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 11px;
    user-select: none;
  }

  .toggle.on {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
  }

  .toggle.no {
    background: var(--bad);
    color: white;
    border-color: var(--bad);
  }

  .chip {
    color: var(--text);
  }

  .chip .cnt {
    color: var(--muted);
    font-size: 10px;
    margin-left: 4px;
  }

  .chip.on {
    background: var(--gold);
    color: #000;
    border-color: var(--gold);
  }

  .chip.on .cnt {
    color: rgba(0, 0, 0, .55);
  }

  .chip.no {
    background: var(--bad);
    color: #fff;
    border-color: var(--bad);
    text-decoration: line-through;
  }

  .chip.no .cnt {
    color: rgba(255, 255, 255, .7);
  }

  button.btn {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
  }

  button.btn:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  button.btn.primary {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
  }

  #toolbar {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg2);
    flex-wrap: wrap;
  }

  #toolbar .count {
    color: var(--muted);
    font-size: 12px;
  }

  #toolbar select,
  #toolbar input {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 5px 8px;
    border-radius: 4px;
    font: inherit;
  }

  #search {
    flex: 1;
    max-width: 320px;
  }

  .seg {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
  }

  .seg button {
    background: var(--panel);
    border: 0;
    color: var(--muted);
    padding: 5px 10px;
    cursor: pointer;
    font: inherit;
  }

  .seg button.on {
    background: var(--accent);
    color: var(--bg);
  }

  #list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
  }

  .game {
    border-bottom: 1px solid var(--border);
    padding: 10px 14px;
    display: grid;
    grid-template-columns: 22px 90px 32px 380px 124px auto auto;
    gap: 10px;
    align-items: center;
    cursor: pointer;
  }

  .game .thumb {
    width: 180%;
    height: 88%;
    display: block;
  }

  .game .thumb.empty {
    opacity: 0.25;
  }

  .game:hover,
  .game.open,
  .moment:hover {
    background: var(--bg2);
  }

  .star {
    color: var(--muted);
    cursor: pointer;
    user-select: none;
    font-size: 16px;
    line-height: 1;
  }

  .star.on {
    color: var(--gold);
  }

  .game .date,
  .moment .when {
    color: var(--muted);
    font-size: 11px;
  }

  .game .res {
    font-weight: 700;
    text-align: center;
    padding: 2px 0;
    border-radius: 4px;
  }

  .game .res.win {
    color: var(--good);
  }

  .game .res.loss {
    color: var(--bad);
  }

  .game .res.draw {
    color: var(--warn);
  }

  .game .opp {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .game .opp small {
    color: var(--muted);
    font-weight: 400;
    margin-left: 6px;
    font-size: 11px;
  }

  .game .tags {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    max-width: 653px;
    justify-content: flex-end;
  }

  .game .score,
  .moment .score {
    color: var(--gold);
    font-weight: 700;
    min-width: 50px;
    text-align: right;
    font-size: 13px;
  }

  .score.s2 {
    color: #cdd1da;
  }

  .score.s3 {
    color: #b18445;
  }

  .moment {
    border-bottom: 1px solid var(--border);
    padding: 8px 14px;
    display: grid;
    grid-template-columns: 22px 100px 150px 1fr 70px;
    gap: 10px;
    align-items: center;
    cursor: pointer;
  }

  .moment .desc {
    font-size: 12px;
  }

  .moment .desc small {
    color: var(--muted);
    margin-left: 6px;
  }

  /* tag colors per kind */
  .k-queen_sac_mate,
  .k-queen_sac {
    background: #4a2c70;
    color: #d6b8ff;
    border-color: #6c52a0;
  }

  .k-piece_sac_to_mate,
  .k-piece_sac {
    background: #4a3870;
    color: #c5b8ff;
    border-color: #5e4c8c;
  }

  .k-king_hunt {
    background: #5c2c2c;
    color: #ffb8b8;
    border-color: #7a3f3f;
  }

  .k-windmill {
    background: #4a4a2c;
    color: #ffe5b8;
    border-color: #6e6740;
  }

  .k-mate_by_promoted,
  .k-under_promotion {
    background: #6b4a1c;
    color: #ffd28a;
    border-color: #a87a3a;
    font-weight: 600;
  }

  .k-double_check {
    background: #4a3070;
    color: #d3b8ff;
    border-color: #6c52a0;
    font-weight: 700;
  }

  .k-discovered_check {
    background: #2c4a5c;
    color: #b8d6ff;
    border-color: #3f6280;
  }

  .k-greek_gift {
    background: #2c4a37;
    color: #b8e6c5;
    border-color: #44734f;
  }

  .k-en_passant {
    background: #2c3a4a;
    color: #b8c8e6;
    border-color: #455570;
  }

  .k-quiet_killer {
    background: #1f2a30;
    color: #97e2ff;
    border-color: #3a5060;
    font-style: italic;
  }

  .k-piece_dance {
    background: #4a2c4a;
    color: #ffb8e6;
    border-color: #6e3f6e;
  }

  .k-trade_chain {
    background: #2a3a3a;
    color: #a8d8d8;
    border-color: #3f5a5a;
  }

  .k-trapped_queen {
    background: #3a2c4a;
    color: #d3b8ff;
    border-color: #5e4068;
  }

  .k-back_rank_minimal {
    background: #2c3a4a;
    color: #b8c8e6;
    border-color: #3f5670;
  }

  .k-forcing_mate {
    background: #5a1d1d;
    color: #ffb0b0;
    border-color: #a04040;
    font-weight: 600;
  }

  .k-bishop_fork,
  .k-rook_fork,
  .k-queen_fork,
  .k-knight_fork {
    background: #2c4a37;
    color: #b8e6c5;
    border-color: #44734f;
  }

  .detail {
    padding: 14px 28px 18px;
    background: #0e1116;
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .detail h3 {
    margin: 0 0 6px;
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .detail .pgn {
    background: var(--panel);
    padding: 10px;
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 240px;
    overflow: auto;
    grid-column: 1 / -1;
    font-size: 11px;
  }

  .detail dl {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 10px;
  }

  .detail dt {
    color: var(--muted);
  }

  .detail dd {
    margin: 0;
  }

  .detail .links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
  }

  .moments-list {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
  }

  .moment-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .moment-card .head {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .moment-card .head .ply {
    color: var(--muted);
    font-size: 10px;
  }

  .moment-card .body {
    font-size: 12px;
  }

  .moment-card .body small {
    color: var(--muted);
  }

  .mb {
    display: grid;
    grid-template-columns: repeat(8, 22px);
    grid-template-rows: repeat(8, 22px);
    border: 1px solid var(--border);
    width: max-content;
  }

  .mb .sq {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .mb .sq.l {
    background: #ebecd0;
  }

  .mb .sq.d {
    background: #739552;
  }

  .mb .sq.h {
    box-shadow: inset 0 0 0 2px var(--gold);
  }

  .mb .sq.lm.l {
    background: #f6f669;
  }

  .mb .sq.lm.d {
    background: #baca2b;
  }

  .mb .sq img {
    width: 18px;
    height: 18px;
    pointer-events: none;
  }

  .moment-card {
    cursor: pointer;
  }

  .moment-card:hover {
    border-color: var(--accent);
  }

  .moment-card .mb {
    margin: 0 auto;
  }

  /* viewer modal */
  #viewer {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  #viewer.on {
    display: flex;
  }

  #viewer .vbox {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
    max-width: 1100px;
    width: 100%;
    max-height: 95vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr;
  }

  #viewer .vboard {
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: #0e1116;
    border-right: 1px solid var(--border);
  }

  #viewer .vinfo {
    padding: 16px;
    overflow-y: auto;
    max-height: 95vh;
    min-width: 300px;
    max-width: 380px;
  }

  #viewer .vclose {
    position: absolute;
    top: 18px;
    right: 24px;
    color: var(--muted);
    font-size: 28px;
    cursor: pointer;
    user-select: none;
    line-height: 1;
  }

  #viewer .vclose:hover {
    color: var(--text);
  }

  #viewer h2 {
    color: var(--gold);
    margin: 0 0 6px;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
  }

  #viewer .vmeta {
    color: var(--muted);
    font-size: 11px;
    margin-bottom: 12px;
  }

  /* eval graph (horizontal, under the board) */
  .vchart-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 4px;
    margin-top: 4px;
  }

  .vchart-row .vchart-head {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
  }

  .vchart-row .vchart-cur {
    font-weight: 700;
    color: var(--gold);
    font-family: ui-monospace, monospace;
    text-transform: none;
  }

  #vchart {
    width: 100%;
    height: 90px;
    background: #1a1d22;
    border: 1px solid var(--border);
    cursor: crosshair;
    display: block;
  }

  .vchart-row .vchart-status {
    font-size: 10px;
    color: var(--muted);
    text-align: right;
  }

  /* big board — square size controlled by --sq (settable via the size slider) */
  .bigboard {
    --sq: 60px;
    display: grid;
    grid-template-columns: repeat(8, var(--sq));
    grid-template-rows: repeat(8, var(--sq));
    border: 2px solid #000;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .5);
    position: relative;
  }

  .bigboard .sq {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .bigboard .sq.l {
    background: #ebecd0;
  }

  .bigboard .sq.d {
    background: #739552;
  }

  .bigboard .sq.from.l,
  .bigboard .sq.to.l {
    background: #f2f594;
  }

  .bigboard .sq.from.d,
  .bigboard .sq.to.d {
    background: #aab839;
  }

  .bigboard .sq.hl {
    box-shadow: inset 0 0 0 4px var(--gold);
  }

  .bigboard .sq.check {
    background: radial-gradient(circle, rgba(255, 80, 80, .95) 0%, rgba(255, 80, 80, .6) 40%, transparent 75%);
    animation: pulse 1s ease-out;
  }

  @keyframes pulse {
    from {
      box-shadow: inset 0 0 0 0 rgba(255, 80, 80, .8);
    }

    to {
      box-shadow: inset 0 0 0 0 rgba(255, 80, 80, 0);
    }
  }

  .bigboard .sq img {
    pointer-events: none;
  }

  .bigboard .sq img.piece-other {
    width: calc(var(--sq) * 0.83);
    height: calc(var(--sq) * 0.83);
  }

  .bigboard .sq img.piece-pawn {
    width: calc(var(--sq) * 0.72);
    height: calc(var(--sq) * 0.72);
  }

  .bigboard .filerank {
    position: absolute;
    font-size: 10px;
    font-weight: 700;
    pointer-events: none;
    padding: 1px 3px;
  }

  .bigboard .sq.l .filerank {
    color: #739552;
  }

  .bigboard .sq.d .filerank {
    color: #ebecd0;
  }

  .vctrl {
    display: flex;
    gap: 6px;
    align-items: center;
  }

  .vctrl button {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    min-width: 38px;
  }

  .vctrl button:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  .vctrl button:disabled {
    opacity: .3;
    cursor: not-allowed;
  }

  .vctrl button.on {
    background: var(--gold);
    color: #000;
    border-color: var(--gold);
  }

  .vctrl button.on:hover {
    color: #000;
  }

  .vctrl input[type="number"] {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 5px 6px;
    border-radius: 4px;
    font: inherit;
    width: 42px;
  }

  .vctrl .pos {
    color: var(--muted);
    font-size: 11px;
    min-width: 80px;
    text-align: center;
  }

  .bigboard svg.arrows {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
  }

  .bigboard svg.moment-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
  }

  .vmove {
    font-size: 14px;
    color: var(--text);
    font-family: ui-monospace, monospace;
    min-height: 22px;
    text-align: center;
  }

  .vmove .last {
    color: var(--gold);
    font-weight: 700;
  }

  .vmove .next {
    color: var(--muted);
    margin-left: 8px;
  }

  .vmoments {
    margin-top: 12px;
  }

  .vmoments .vm-item {
    display: flex;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    align-items: center;
    font-size: 11px;
  }

  .vmoments .vm-item:hover {
    background: var(--panel);
  }

  .vmoments .vm-item.active {
    background: var(--panel);
    border-left: 3px solid var(--gold);
  }

  .vmoments .vm-item .vm-ply {
    color: var(--muted);
    min-width: 36px;
  }

  .vmoves-list {
    font-size: 11px;
    font-family: ui-monospace, monospace;
    line-height: 1.7;
    max-height: 180px;
    overflow-y: auto;
    background: #0e1116;
    padding: 6px 8px;
    border-radius: 4px;
    margin-top: 8px;
  }

  .vmoves-list .mv {
    padding: 1px 4px;
    border-radius: 3px;
    cursor: pointer;
  }

  .vmoves-list .mv:hover {
    background: var(--panel);
  }

  .vmoves-list .mv.cur {
    background: var(--gold);
    color: #000;
  }

  .vmoves-list .mvno {
    color: var(--muted);
    margin: 0 4px 0 8px;
  }

  /* ── Openings view ── */
  .op-view {
    padding: 14px;
  }

  .op-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }

  .op-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--muted);
  }

  .op-filters label {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .op-filters input[type=number] {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--fg);
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 11px;
    width: 52px;
  }

  .op-preset {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 11px;
    cursor: pointer;
  }

  .op-preset.on {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--panel);
  }

  .op-preset:hover:not(.on) {
    border-color: var(--fg);
    color: var(--fg);
  }

  .op-presets {
    display: flex;
    gap: 2px;
    align-items: center;
  }

  .op-filters input[type=date] {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--fg);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 11px;
    width: 100px;
  }

  .op-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }

  .op-table th {
    text-align: left;
    padding: 6px 10px;
    background: var(--bg2);
    border-bottom: 2px solid var(--border);
    color: var(--muted);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .op-table th.num,
  .op-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .op-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border);
  }

  .op-fam {
    cursor: pointer;
  }

  .op-fam:hover {
    background: var(--bg2);
  }

  .op-fam.open {
    background: var(--bg2);
    border-left: 2px solid var(--accent);
  }

  .op-fam td:first-child::before {
    content: '▸ ';
    color: var(--muted);
    font-size: 10px;
  }

  .op-eco-badge {
    display: inline-block;
    margin-left: 5px;
    padding: 0 4px;
    background: rgba(255,255,255,0.07);
    color: var(--muted);
    font-size: 9px;
    font-family: monospace;
    border-radius: 3px;
    vertical-align: middle;
    letter-spacing: 0.02em;
  }

  .op-eval-tip {
    position: absolute;
    pointer-events: none;
    background: var(--panel, #1e2128);
    color: var(--fg, #c9d1d9);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 20;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }

  .op-fam.open td:first-child::before {
    content: '▾ ';
    color: var(--accent);
  }

  .op-detail>td {
    padding: 0 !important;
  }

  .op-detail-inner {
    display: grid;
    grid-template-columns: 55% 6px 1fr;
  }

  .op-resize-handle {
    cursor: col-resize;
    background: var(--border);
    transition: background 0.15s;
    position: relative;
    z-index: 2;
  }

  .op-resize-handle:hover,
  .op-resize-handle.dragging {
    background: var(--accent);
  }

  .op-lines td {
    padding: 5px 10px 5px 24px;
  }

  .op-line {
    cursor: pointer;
  }

  .op-line:hover {
    background: var(--panel);
  }

  .op-line:active {
    background: var(--panel);
  }

  .op-breadcrumb {
    font-size: 11px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--bg2);
  }

  .op-crumb {
    cursor: pointer;
    color: var(--accent);
  }

  .op-crumb:hover {
    text-decoration: underline;
  }

  .op-crumb-cur {
    color: var(--fg);
  }

  .op-crumb-sep {
    color: var(--muted);
    font-size: 10px;
  }

  .op-lines-wrap {
    overflow-x: auto;
  }

  .op-chart-wrap {
    padding: 12px 14px;
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .op-chart-label {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
  }

  .op-chart-moves {
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text);
    line-height: 1.6;
    margin: 6px 0 0;
    word-break: break-word;
  }

  .op-chart-moves:empty {
    display: none;
  }

  .op-chart-empty {
    font-size: 11px;
    color: var(--muted);
    padding: 16px 0;
  }

  .op-clr-bad {
    color: var(--bad);
  }

  .op-clr-good {
    color: var(--good);
  }

  .op-fam.selected {
    border-left: 2px solid var(--gold) !important;
  }

  .op-line.selected {
    background: #1e2b3a;
  }

  .op-line.selected td:first-child {
    color: var(--accent);
  }

  .op-chart-board {
    margin-top: 8px;
    width: 100%;
  }

  .op-chart-board .mb {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: unset;
    width: 100%;
  }

  .op-chart-board .mb .sq {
    aspect-ratio: 1;
  }

  .op-chart-board .mb .sq img {
    width: 81%;
    height: 81%;
  }

  .op-game-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow-y: auto;
    max-height: 425px;
    padding: 4px 0;
  }

  .op-game-card {
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px;
    background: var(--bg);
    flex-shrink: 0;
    width: 150px;
  }

  .op-game-card:hover {
    border-color: var(--accent);
  }

  .op-game-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: var(--muted);
    margin-bottom: 4px;
    gap: 6px;
    white-space: nowrap;
  }

  .op-game-card-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
  }

  @media (max-width: 900px) {
    .op-detail-inner {
      grid-template-columns: 1fr;
    }

    .op-resize-handle {
      display: none;
    }

    .op-chart-wrap {
      border-left: none;
      border-top: 1px solid var(--border);
    }
  }

  #status {
    padding: 14px;
    color: var(--muted);
    font-size: 12px;
    white-space: pre-wrap;
  }

  #status.error {
    color: var(--bad);
  }

  #sql-panel {
    border-top: 1px solid var(--border);
    background: var(--bg2);
    padding: 10px 14px;
    max-height: 40vh;
    overflow: auto;
  }

  #sql-panel textarea {
    width: 100%;
    min-height: 80px;
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 4px;
    font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
    padding: 8px;
  }

  #sql-result {
    margin-top: 8px;
    max-height: 30vh;
    overflow: auto;
  }

  #sql-result table {
    border-collapse: collapse;
    font-size: 11px;
  }

  #sql-result th,
  #sql-result td {
    border: 1px solid var(--border);
    padding: 3px 8px;
    text-align: left;
    white-space: nowrap;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #sql-result th {
    background: var(--panel);
    position: sticky;
    top: 0;
  }

  #player-picker {
    position: fixed;
    inset: 0;
    background: var(--bg);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 999;
    display: none;
    padding-bottom: 10vh;
  }

  #player-picker.visible {
    display: flex;
  }

  #picker-invite {
    margin-top: auto;
  }

  .player-card {
    padding: 20px 48px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    color: var(--text);
    transition: border-color 0.15s;
  }

  .player-card:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  /* ── help button ── */
  @keyframes help-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240, 176, 72, 0); border-color: var(--muted); color: var(--muted); }
    50%       { box-shadow: 0 0 8px 3px rgba(240, 176, 72, 0.6); border-color: var(--gold); color: var(--gold); }
  }

  .help-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--muted);
    background: transparent;
    color: var(--muted);
    font: 600 13px/1 ui-sans-serif, system-ui, sans-serif;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    transition: border-color 0.15s, color 0.15s;
  }

  .help-btn.pulsing {
    animation: help-pulse 2s ease-in-out infinite;
  }

  .help-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  /* ── help overlay & dialog ── */
  #help-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 200;
  }

  #help-overlay.on {
    display: block;
  }

  #help-dialog {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 201;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px 28px 20px;
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }

  #help-dialog.on {
    display: block;
  }

  #help-dialog h3 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin: 16px 0 6px;
  }

  #help-dialog h3:first-of-type {
    margin-top: 0;
  }

  #help-dialog dl {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 14px;
  }

  #help-dialog dt {
    font-weight: 600;
    color: var(--text);
    padding-top: 2px;
    white-space: nowrap;
  }

  #help-dialog dd {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
  }

  #help-dialog kbd {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    font: 11px ui-monospace, monospace;
    color: var(--text);
  }

  #help-dialog code {
    color: var(--accent);
  }

  .help-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
  }

  .help-close:hover {
    color: var(--text);
  }

  /* ── sidebar toggle button (desktop: hidden) ── */
  #sidebar-toggle {
    display: none;
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    white-space: nowrap;
  }

  #sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 199;
  }

  /* ── MOBILE (≤768px) ── */
  @media (max-width: 768px) {
    #app {
      grid-template-columns: 1fr;
    }

    #sidebar {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: auto;
      width: min(320px, 85vw);
      z-index: 200;
      overflow-y: auto;
      padding-bottom: 60px;
    }

    #sidebar.open {
      display: block;
    }

    #sidebar-overlay.open {
      display: block;
    }

    #sidebar-toggle {
      display: inline-flex;
      align-items: center;
    }

    #sort-label {
      display: none;
    }

    #sort {
      flex: 1;
    }

    #search {
      flex: 1;
      max-width: none;
    }

    /* game row → compact 2-line card */
    .game {
      grid-template-columns: 20px 26px 1fr auto;
      grid-template-rows: auto auto auto;
      gap: 2px 8px;
      padding: 10px;
    }

    .game>svg {
      display: none;
    }

    .game .star {
      grid-column: 1;
      grid-row: 1 / 4;
      align-self: center;
    }

    .game .res {
      grid-column: 2;
      grid-row: 1 / 4;
      align-self: center;
      font-size: 16px;
    }

    .game .opp {
      grid-column: 3;
      grid-row: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .game .date {
      grid-column: 3;
      grid-row: 2;
    }

    .game .tags {
      grid-column: 3 / 5;
      grid-row: 3;
      justify-content: flex-start;
    }

    .game .score {
      grid-column: 4;
      grid-row: 1 / 3;
      align-self: center;
      text-align: right;
    }

    /* moment row → compact 2-line */
    .moment {
      grid-template-columns: 20px 1fr auto;
      grid-template-rows: auto auto;
      gap: 3px 8px;
      padding: 8px 10px;
    }

    .moment .star {
      grid-column: 1;
      grid-row: 1 / 3;
      align-self: center;
    }

    .moment .when {
      display: none;
    }

    .moment>div:nth-child(3) {
      grid-column: 2;
      grid-row: 1;
    }

    .moment .desc {
      grid-column: 2;
      grid-row: 2;
    }

    .moment .score {
      grid-column: 3;
      grid-row: 1 / 3;
      align-self: center;
      text-align: right;
    }

    /* viewer → vertical stack */
    #viewer {
      padding: 0;
      align-items: flex-start;
    }

    #viewer .vbox {
      grid-template-columns: 1fr;
      max-height: 100dvh;
      border-radius: 0;
      overflow-y: auto;
      max-width: 100vw;
    }

    #viewer .vboard {
      border-right: none;
      border-bottom: 1px solid var(--border);
      padding: 12px;
      overflow-x: auto;
    }

    #viewer .vinfo {
      max-width: 100%;
      min-width: 0;
      max-height: none;
    }

    #viewer .vclose {
      position: fixed;
      top: 10px;
      right: 14px;
      z-index: 101;
    }

    .vctrl {
      flex-wrap: wrap;
      gap: 4px;
    }

    #vboard-size {
      display: none;
    }

    /* bigger touch targets */
    .toggle,
    .chip {
      padding: 5px 10px;
    }
  }