@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');

:root { --bg:#302e2c; --surface:#262522; --surface-2:#3b3a39; --text:#f1f1ef; --muted:#aaa9a5; --green:#81b64c; --green-dark:#779556; --cream:#eeeed2; --line:#4b4a48; --accent:#f5c451; }
* { box-sizing:border-box; } body { margin:0; color:var(--text); background:var(--bg); font-family:Manrope,system-ui,sans-serif; }
.app-shell { max-width:1400px; margin:auto; padding:26px 28px 56px; }.hero { display:flex; align-items:end; justify-content:space-between; gap:28px; border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:25px; }.eyebrow,.label { margin:0 0 7px; font:500 10px/1.2 "DM Mono",monospace; letter-spacing:.11em; color:#aaa9a5; }.hero h1,.pgn-section h2,.import-section h2,.review-title h2 { margin:0; font-size:26px; letter-spacing:-.04em; }.hero h1 em { color:var(--green); font-style:normal; }.lede { max-width:475px; margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.workspace { display:grid; grid-template-columns:minmax(400px,730px) minmax(330px,1fr); gap:25px; align-items:start; }.board-area { min-width:0; }.game-clocks { display:flex; justify-content:flex-end; margin-bottom:10px; }.white-clock-bar { margin-top:10px; margin-bottom:0; }.board-area.flipped { display:flex; flex-direction:column; }.board-area.flipped #gameClocks { order:3; margin-top:10px; margin-bottom:0; }.board-area.flipped .board-with-eval { order:2; }.board-area.flipped #whiteClockBar { order:1; margin-top:0; margin-bottom:10px; }.board-area.flipped .board-tools { order:4; }.player-clock { display:flex; align-items:center; justify-content:space-between; gap:16px; min-width:155px; padding:8px 12px; border-radius:3px; background:var(--surface); border:1px solid var(--line); color:var(--muted); font:500 11px "DM Mono",monospace; }.clock-player { display:flex; align-items:center; gap:7px; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.clock-icon { font-size:17px; line-height:1; }.player-clock strong { color:var(--text); font-size:16px; letter-spacing:.02em; }.captured-pieces { max-width:120px; overflow:hidden; color:#aaa; font-size:16px; letter-spacing:-.12em; white-space:nowrap; }.material-advantage { color:var(--accent); font-weight:700; white-space:nowrap; }.black-clock { background:#20201e; }.white-clock { background:#e8e8df; color:#4b4a48; }.white-clock strong { color:#262522; }.white-clock .captured-pieces { color:#555; }.white-clock .material-advantage { color:#779556; }.board-with-eval { display:grid; grid-template-columns:minmax(0,1fr) 28px; gap:9px; align-items:stretch; position:relative; }.board { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr)); position:relative; width:100%; max-width:730px; aspect-ratio:1 / 1; overflow:hidden; background:var(--green-dark); box-shadow:0 14px 35px #0008; border-radius:3px; }.eval-rail { position:relative; min-height:0; overflow:hidden; background:#161615; box-shadow:0 14px 35px #0008; border-radius:3px; }.eval-fill { position:absolute; inset:auto 0 0; width:100%; height:50%; background:#f5f5f3; transition:height .25s; }.eval-rail-score { position:absolute; inset:50% 0 auto; transform:translateY(-50%) rotate(-90deg); color:#aaa; font:700 10px "DM Mono",monospace; text-align:center; white-space:nowrap; }.analysis-overlay { position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:#161615d9; color:var(--text); text-align:center; pointer-events:none; }.analysis-overlay[hidden] { display:none; }.analysis-overlay strong { font-size:clamp(17px,2.4vw,26px); letter-spacing:-.03em; }.analysis-overlay small { color:var(--muted); font:500 11px "DM Mono",monospace; }.analysis-spinner { width:34px; height:34px; border:3px solid #ffffff33; border-top-color:var(--green); border-radius:50%; animation:analysis-spin .8s linear infinite; }.analysis-dots::after { content:""; display:inline-block; width:1.2em; text-align:left; animation:analysis-dots 1.2s steps(4,end) infinite; }.square { min-width:0; min-height:0; border:0; position:relative; display:grid; place-items:center; cursor:pointer; padding:0; line-height:1; }.square.light { background:var(--cream); }.square.dark { background:var(--green-dark); }.square.last-move { background:#c7d64b; }.square.selected { outline:4px solid var(--accent); outline-offset:-4px; z-index:4; }.square.target::after { content:""; width:21%; aspect-ratio:1; border-radius:50%; background:#35613d99; position:absolute; }.piece { width:90%; height:90%; min-width:0; min-height:0; object-fit:contain; position:relative; z-index:2; filter:drop-shadow(0 3px 1px #0004); user-select:none; }.square .badge { position:absolute; top:4%; right:4%; z-index:6; width:34%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; color:#fff; font:800 clamp(10px,1.6vw,19px)/1 Manrope,sans-serif; box-shadow:0 2px 5px #0007; pointer-events:none; }.badge svg { width:60%; height:60%; }.badge.best{background:#81b64c}.badge.excellent{background:#6fa83f}.badge.good{background:#96bc4b}.badge.okay{background:#b9b74a}.badge.book{background:#a88865}.badge.inaccuracy{background:#f0b640}.badge.mistake{background:#e58f2a}.badge.miss{background:#ee6b5b}.badge.blunder{background:#ca3431}.square[data-rank]::before,.square[data-file]::after { position:absolute; z-index:5; font:700 clamp(11px,1.3vw,18px)/1 Manrope,sans-serif; }.square[data-rank]::before { content:attr(data-rank); top:5px; left:6px; color:var(--green-dark); }.square.dark[data-rank]::before,.square.last-move[data-rank]::before { color:var(--cream); }.square[data-file]::after { content:attr(data-file); right:6px; bottom:4px; color:var(--green-dark); }.square.dark[data-file]::after,.square.last-move[data-file]::after { color:var(--cream); }.best-arrow { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }.board-tools { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:13px; }.move-nav-button { padding:12px 16px; border:0; border-radius:2px; background:#5f9136; color:#fff; cursor:pointer; font:700 12px Manrope,sans-serif; }.move-nav-button:hover:not(:disabled) { filter:brightness(1.08); }.move-nav-button:disabled { opacity:.62; cursor:not-allowed; }
.review-panel { min-height:610px; background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:24px; }.panel-heading { display:flex; justify-content:space-between; }.panel-heading h2 { margin:0; font-size:25px; }.engine-dot { width:10px; height:10px; border-radius:50%; background:#696966; }.engine-dot.ready { background:#81b64c; box-shadow:0 0 0 5px #81b64c22; }.evaluation { display:flex; gap:16px; align-items:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:24px 0; padding:19px 0; }.evaluation strong { font-size:32px; letter-spacing:-.06em; }.evaluation span { color:var(--muted); font-size:13px; }.best-line { min-height:72px; }.best-line p:last-child { margin:0; color:#ddd; font:12px/1.6 "DM Mono",monospace; word-break:break-word; }.move-insight { border-top:1px solid var(--line); margin-top:16px; padding-top:15px; }.move-insight p { color:#c7c6c2; font-size:12px; line-height:1.5; margin:8px 0; }.book-move-icon { display:inline-grid; place-items:center; width:25px; height:25px; margin-left:7px; vertical-align:middle; color:#b9d98d; background:#3d542c; border-radius:4px; }.book-move-icon svg { width:17px; height:17px; }.label-legend { border-top:1px solid var(--line); margin-top:16px; padding-top:15px; }.label-legend .label { margin-bottom:9px; }.label-legend-items { display:flex; flex-wrap:wrap; gap:6px; }.move-label { display:inline-block; color:#1f261c; background:#d7d7cf; font:700 10px "DM Mono",monospace; letter-spacing:.08em; padding:4px 7px; border-radius:2px; }.move-label.neutral,.move-label.pending { background:#777670; color:#fff; }.move-label.best,.move-label.brilliant,.move-label.great { background:#81b64c; color:#172114; }.move-label.book { background:#81b64c; color:#172114; }.move-label.excellent { background:#a3c95c; color:#172114; }.move-label.good { background:#c9cc62; }.move-label.okay { background:#dcd86a; }.move-label.inaccuracy { background:#f0c655; }.move-label.miss { background:#e59a4b; color:#351712; }.move-label.mistake,.move-label.blunder { background:#e5755e; color:#351712; }
.board-with-eval.flipped .eval-fill { inset:0 0 auto; }
.board-with-eval.flipped .eval-rail-score { inset:50% 0 auto; transform:translateY(-50%) rotate(90deg); }
@keyframes analysis-spin { to { transform:rotate(360deg); } }
@keyframes analysis-dots { 0%,20% { content:""; } 40% { content:"."; } 60% { content:".."; } 80%,100% { content:"..."; } }
.actions { margin-top:24px; }.primary,.secondary { border:0; font:700 12px Manrope,sans-serif; cursor:pointer; border-radius:2px; }.primary { width:100%; padding:14px 15px; background:var(--green); color:#182115; text-align:left; display:flex; justify-content:space-between; }.primary:hover,.secondary:hover { filter:brightness(1.08); }.primary span { opacity:.65; }.primary.compact { width:auto; display:inline-block; }.secondary { padding:12px 16px; background:#5f9136; color:#fff; }.depth-control { display:flex; align-items:center; gap:9px; margin-top:16px; font:11px "DM Mono",monospace; color:var(--muted); }.depth-control input { accent-color:var(--green); flex:1; }.depth-control output { color:var(--green); }.status { min-height:17px; margin:13px 0 0; color:#aaa9a5; font-size:12px; }.text-button { padding:0; border:0; color:#bfc6b6; background:transparent; cursor:pointer; font:500 11px "DM Mono",monospace; }.text-button:hover { color:#fff; }.text-button:disabled { opacity:.38; cursor:not-allowed; }.text-button:disabled:hover { color:#bfc6b6; }
.pgn-section,.import-section,.move-review { margin-top:38px; padding-top:27px; border-top:1px solid var(--line); }.pgn-section,.import-section { display:grid; grid-template-columns:.7fr 1fr; gap:48px; }.pgn-section p:not(.label),.import-section p:not(.label),.review-explainer { color:var(--muted); font-size:13px; line-height:1.6; }.pgn-controls textarea { width:100%; min-height:106px; padding:13px; resize:vertical; background:#252421; border:1px solid var(--line); color:#e7e7e2; font:12px/1.55 "DM Mono",monospace; }.pgn-controls textarea:focus,.username-row input:focus { outline:2px solid #81b64c; border-color:#81b64c; }.pgn-controls > div { display:flex; align-items:center; gap:15px; margin-top:11px; }.username-row { display:flex; }.username-row input { flex:1; min-width:0; padding:12px; border:1px solid var(--line); background:#252421; color:#e7e7e2; font:12px "DM Mono",monospace; }.username-row .secondary { border-radius:0 2px 2px 0; }.remote-games { display:grid; gap:7px; margin-top:12px; }.remote-game { text-align:left; padding:10px; border:1px solid var(--line); background:var(--surface); color:#d8d8d3; font:11px/1.4 "DM Mono",monospace; cursor:pointer; }.remote-game:hover { border-color:var(--green); background:#333431; }
.review-title { display:flex; justify-content:space-between; align-items:center; gap:20px; }.review-explainer code { color:#d9edc9; }.review-list { list-style:none; padding:0; margin:18px 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }.review-row { display:grid; grid-template-columns:39px 1fr auto; align-items:center; gap:9px; padding:11px; border:1px solid var(--line); background:var(--surface); cursor:pointer; }.review-row:hover,.review-row.active { border-color:var(--green); background:#333431; }.review-row .ply,.review-row small { font:11px "DM Mono",monospace; color:var(--muted); }.review-row strong { font-size:13px; }.review-row small { display:block; margin-top:3px; }
@media(max-width:820px) { .app-shell { padding:18px; }.hero { display:block; }.lede { margin-top:12px; }.workspace,.pgn-section,.import-section { grid-template-columns:1fr; gap:22px; }.review-panel { min-height:auto; }.review-list { grid-template-columns:1fr; } }

/* ---- Brilliant / Great, summary card, review filter ---- */
.badge.brilliant,.badge-static.brilliant { background:#26c2a3; }
.badge.great,.badge-static.great { background:#749bbf; }
.badge.best,.badge-static.best { background:#81b64c; }
.badge.excellent,.badge-static.excellent { background:#6fa83f; }
.badge.good,.badge-static.good { background:#96af8b; }
.badge.okay,.badge-static.okay { background:#b9b74a; font-size:.8em; }
.badge.book,.badge-static.book { background:#a88865; }
.badge.inaccuracy,.badge-static.inaccuracy { background:#f0b640; }
.badge.mistake,.badge-static.mistake { background:#e58f2a; }
.badge.miss,.badge-static.miss { background:#ee6b5b; }
.badge.blunder,.badge-static.blunder { background:#ca3431; }
.move-label.brilliant { background:#26c2a3; color:#06231d; }
.move-label.great { background:#749bbf; color:#0f1d2b; }
.move-label.book { background:#a88865; color:#241a10; }

.game-summary { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.game-summary > summary { cursor:pointer; list-style:none; margin-bottom:10px; font:500 10px/1.2 "DM Mono",monospace; letter-spacing:.11em; color:#aaa9a5; }
.game-summary > summary::-webkit-details-marker { display:none; }
.game-summary > summary::after { content:" ▾"; }
.game-summary:not([open]) > summary::after { content:" ▸"; }
.sum-head,.sum-row { display:grid; grid-template-columns:1fr 64px 34px 64px; align-items:center; gap:8px; }
.sum-head { margin-bottom:8px; }
.sum-head strong { text-align:center; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sum-row { padding:6px 0; }
.sum-label { font-weight:700; font-size:14px; }
.acc { text-align:center; padding:8px 0; border-radius:6px; font:800 19px Manrope,sans-serif; }
.acc.white { background:#fff; color:#262522; }
.acc.black { background:#4b4a48; color:#fff; }
.sum-acc { padding-bottom:12px; margin-bottom:6px; border-bottom:1px solid var(--line); }
.badge-static { justify-self:center; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:#fff; font:800 12px/1 Manrope,sans-serif; box-shadow:0 1px 3px #0006; }
.badge-static svg { width:60%; height:60%; }
.count { padding:2px 0; border:0; border-radius:5px; background:transparent; font:800 18px Manrope,sans-serif; text-align:center; cursor:pointer; color:#aaa9a5; }
.count:disabled { cursor:default; opacity:.5; }
.count:not(:disabled):hover { background:#ffffff14; }
.count.active { outline:2px solid currentColor; }
.count.c-brilliant { color:#26c2a3; } .count.c-great { color:#749bbf; } .count.c-book { color:#c9a47c; }
.count.c-best { color:#81b64c; } .count.c-excellent { color:#96bc4b; } .count.c-good { color:#96af8b; }
.count.c-okay { color:#d4d06a; } .count.c-inaccuracy { color:#f0c655; } .count.c-mistake { color:#e58f2a; }
.count.c-miss { color:#ee7b6b; } .count.c-blunder { color:#e8463f; }
.review-row[hidden] { display:none; }
.filter-note { margin:0; color:var(--muted); font-size:12px; }
.filter-note .text-button { margin-left:6px; text-decoration:underline; }

/* Desktop finishing touches: clearer control grouping and steadier review context. */
.board-tool-divider { width:1px; height:22px; background:var(--line); }
.board-tools .text-button { padding:8px 7px; border-radius:3px; }
.board-tools .text-button:hover:not(:disabled) { background:#ffffff0d; }
.resume-review { color:#b9d98d; }
.resume-review:hover:not(:disabled) { color:#e0f0cf; }
button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

@media (min-width:821px) {
  .workspace { gap:30px; }
  .review-panel { position:sticky; top:22px; box-shadow:0 16px 36px #0003; }
  .move-nav-button { min-height:42px; }
}

/* Phone layout: keep the board touchable and make controls easy to tap. */
@media (max-width:560px) {
  .app-shell { padding:16px 14px 40px; }
  .hero { padding-bottom:18px; margin-bottom:20px; }
  .hero h1 { font-size:25px; }

  .board-with-eval { display:grid; grid-template-columns:minmax(0,1fr) 22px; gap:6px; }
  .board { max-width:none; }
  .eval-rail {
    position:relative;
    width:auto;
    height:auto;
    min-height:0;
    transform:none;
    box-shadow:0 3px 10px #0008;
  }
  .eval-rail-score { font-size:9px; }

  .game-clocks { margin-bottom:8px; }
  .white-clock-bar { margin-top:8px; }
  .player-clock { min-width:154px; min-height:42px; }

  .board-tools { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
  .move-nav-button { min-height:46px; padding:12px 8px; font-size:12px; }
  .board-tool-divider { display:none; }
  .text-button { min-height:40px; padding:8px 4px; border:1px solid var(--line); border-radius:3px; font-size:11px; }
  .text-button:disabled { border-color:transparent; }

  .review-panel { padding:18px; }
  .panel-heading h2 { font-size:23px; }
  .best-line { min-height:0; }
  .primary { min-height:46px; padding:14px 15px; }
  .primary span { display:none; }
  .secondary { min-height:44px; }
  .username-row input { min-height:44px; font-size:13px; }

  .pgn-section,.import-section,.move-review { margin-top:30px; padding-top:22px; }
  .review-title { display:block; }
  .filter-note { margin-top:10px; }
}

@media (max-width:420px) {
  .username-row { display:grid; grid-template-columns:1fr; gap:8px; }
  .username-row .secondary { border-radius:2px; }
  .pgn-controls > div { display:block; }
  .pgn-controls .secondary { width:100%; }
}