Spaces:

Fu01978
/

Chess_Analyzer

Sleeping

App Files Files Community

Fu01978 commited on 27 days ago

Commit

a1949a6

verified ·

1 Parent(s): c588584

Delete templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +0 -1902

templates/index.html DELETED Viewed

@@ -1,1902 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-  <title>Chess Analyzer</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap" rel="stylesheet">
-  <style>
-    /* ── Root Variables ─────────────────────────────────────────────── */
-    :root {
-      --bg:           #0c0c0e;
-      --surface:      #141416;
-      --card:         #1c1c20;
-      --card2:        #222228;
-      --border:       #2e2e36;
-      --border-soft:  #252530;
-      --text:         #e4dfd6;
-      --text-dim:     #7a7068;
-      --text-muted:   #4a4848;
-      --gold:         #c8a84c;
-      --gold-dim:     #8a7030;
-      --sq-light:     #f0d9b5;
-      --sq-dark:      #b58863;
-      --sq-hi-light:  #cdd26a;
-      --sq-hi-dark:   #aaa23a;
-      --sq-hi-best:   rgba(0, 160, 80, 0.5);
-      --cl-brilliant: #00b5ad;
-      --cl-great:     #1a4fc4;
-      --cl-best:      #7ec820;
-      --cl-excellent: #7ec820;
-      --cl-good:      #4db896;
-      --cl-book:      #a0754a;
-      --cl-inaccuracy:#d4b030;
-      --cl-mistake:   #d07020;
-      --cl-blunder:   #c83030;
-      --cl-omission:  #e05050;
-      --board-size:   480px;
-      --sq-size:      60px;
-    }
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-    html, body {
-      height: 100%;
-      background: var(--bg);
-      color: var(--text);
-      font-family: 'Crimson Pro', Georgia, serif;
-      font-size: 16px;
-      line-height: 1.5;
-    }
-    /* ─────────────────────────────────────────────────────────────────
-       SCREENS
-    ───────────────────────────────────────────────────────────────── */
-    .screen { display: none; min-height: 100vh; flex-direction: column; }
-    .screen.active { display: flex; }
-    /* ── Header ──────────────────────────────────────────────────── */
-    header {
-      display: flex;
-      align-items: center;
-      gap: 14px;
-      padding: 18px 32px;
-      border-bottom: 1px solid var(--border);
-      background: var(--surface);
-      flex-shrink: 0;
-    }
-    .logo {
-      font-family: 'Cinzel', serif;
-      font-size: 1.3rem;
-      font-weight: 700;
-      color: var(--gold);
-      letter-spacing: 0.04em;
-    }
-    .logo-sub {
-      font-family: 'Cinzel', serif;
-      font-size: 0.7rem;
-      color: var(--text-dim);
-      letter-spacing: 0.12em;
-      text-transform: uppercase;
-    }
-    /* ── Upload Screen ────────────────────────────────────────────── */
-    #upload-screen {
-      align-items: center;
-      justify-content: center;
-      gap: 0;
-    }
-    .upload-box {
-      width: 560px;
-      max-width: 95vw;
-    }
-    .upload-title {
-      font-family: 'Cinzel', serif;
-      font-size: 2rem;
-      font-weight: 600;
-      color: var(--text);
-      margin-bottom: 6px;
-    }
-    .upload-sub {
-      color: var(--text-dim);
-      font-size: 1rem;
-      font-style: italic;
-      margin-bottom: 32px;
-    }
-    .drop-zone {
-      border: 1.5px dashed var(--border);
-      border-radius: 10px;
-      padding: 24px;
-      background: var(--card);
-      transition: border-color 0.2s, background 0.2s;
-      cursor: pointer;
-    }
-    .drop-zone:hover, .drop-zone.dragover {
-      border-color: var(--gold);
-      background: var(--card2);
-    }
-    .drop-zone-label {
-      font-size: 0.85rem;
-      color: var(--text-dim);
-      text-align: center;
-      margin-bottom: 12px;
-    }
-    .drop-zone-label span { color: var(--gold); cursor: pointer; }
-    #pgn-textarea {
-      width: 100%;
-      height: 180px;
-      background: var(--card2);
-      border: 1px solid var(--border-soft);
-      border-radius: 6px;
-      color: var(--text);
-      font-family: 'Crimson Pro', monospace;
-      font-size: 0.88rem;
-      padding: 12px;
-      resize: vertical;
-      outline: none;
-      transition: border-color 0.2s;
-    }
-    #pgn-textarea:focus { border-color: var(--gold-dim); }
-    #pgn-textarea::placeholder { color: var(--text-muted); }
-    .upload-row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-top: 16px;
-      gap: 12px;
-    }
-    .depth-row {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      font-size: 0.88rem;
-      color: var(--text-dim);
-    }
-    .depth-row input[type=range] {
-      width: 100px;
-      accent-color: var(--gold);
-    }
-    #depth-val { color: var(--text); font-weight: 600; }
-    .btn-primary {
-      background: var(--gold);
-      color: #1a1200;
-      font-family: 'Cinzel', serif;
-      font-size: 0.85rem;
-      font-weight: 700;
-      letter-spacing: 0.06em;
-      border: none;
-      border-radius: 6px;
-      padding: 10px 28px;
-      cursor: pointer;
-      transition: background 0.15s, transform 0.1s;
-    }
-    .btn-primary:hover { background: #dfc060; }
-    .btn-primary:active { transform: scale(0.97); }
-    #file-input { display: none; }
-    /* ── Loading Screen ───────────────────────────────────────────── */
-    #loading-screen {
-      align-items: center;
-      justify-content: center;
-      gap: 32px;
-    }
-    .loading-chess-icon {
-      font-size: 3.5rem;
-      animation: float 2s ease-in-out infinite;
-    }
-    @keyframes float {
-      0%, 100% { transform: translateY(0); }
-      50% { transform: translateY(-10px); }
-    }
-    .loading-title {
-      font-family: 'Cinzel', serif;
-      font-size: 1.1rem;
-      color: var(--gold);
-      letter-spacing: 0.08em;
-    }
-    .loading-info {
-      font-size: 0.95rem;
-      color: var(--text-dim);
-      font-style: italic;
-    }
-    .progress-wrap {
-      width: 360px;
-      background: var(--card);
-      border-radius: 100px;
-      height: 6px;
-      overflow: hidden;
-      border: 1px solid var(--border);
-    }
-    .progress-bar {
-      height: 100%;
-      background: linear-gradient(90deg, var(--gold-dim), var(--gold));
-      border-radius: 100px;
-      transition: width 0.3s ease;
-      width: 0%;
-    }
-    #loading-move-label {
-      font-size: 0.9rem;
-      color: var(--text-dim);
-      font-family: 'Cinzel', serif;
-      letter-spacing: 0.06em;
-      min-height: 1.4em;
-    }
-    /* ── Game Screen ──────────────────────────────────────────────── */
-    #game-screen {
-      flex: 1;
-    }
-    .game-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 14px 28px;
-      border-bottom: 1px solid var(--border);
-      background: var(--surface);
-    }
-    .game-players {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      font-family: 'Cinzel', serif;
-    }
-    .player-white { color: #e8e0d0; font-size: 1rem; font-weight: 600; }
-    .player-black { color: #888; font-size: 1rem; font-weight: 600; }
-    .vs-sep { color: var(--text-muted); font-size: 0.8rem; }
-    .game-meta { font-size: 0.82rem; color: var(--text-dim); font-style: italic; }
-    .btn-new-game {
-      background: transparent;
-      border: 1px solid var(--border);
-      color: var(--text-dim);
-      font-family: 'Crimson Pro', serif;
-      font-size: 0.85rem;
-      padding: 6px 16px;
-      border-radius: 5px;
-      cursor: pointer;
-      transition: border-color 0.2s, color 0.2s;
-    }
-    .btn-new-game:hover { border-color: var(--gold-dim); color: var(--gold); }
-    /* ── Main layout ─────────────────────────────────────────────── */
-    .game-body {
-      display: flex;
-      flex: 1;
-      gap: 0;
-      padding: 24px 24px 16px;
-      align-items: flex-start;
-      justify-content: center;
-      gap: 20px;
-    }
-    /* ── Eval bar ─────────────────────────────────────────────────── */
-    .eval-col {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 6px;
-      padding-top: 4px;
-    }
-    .eval-bar-wrap {
-      width: 16px;
-      height: var(--board-size);
-      background: #1a1010;
-      border-radius: 5px;
-      overflow: hidden;
-      position: relative;
-      border: 1px solid var(--border);
-    }
-    .eval-bar-white {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background: #ece8e0;
-      transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-      height: 50%;
-    }
-    .eval-label {
-      font-family: 'Cinzel', serif;
-      font-size: 0.72rem;
-      color: var(--text-dim);
-      letter-spacing: 0.04em;
-      text-align: center;
-      min-height: 1.2em;
-    }
-    /* ── Board col ────────────────────────────────────────────────── */
-    .board-col {
-      display: flex;
-      flex-direction: column;
-      gap: 0;
-    }
-    .board-outer {
-      display: flex;
-      align-items: flex-start;
-    }
-    /* rank labels */
-    .rank-labels {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-      width: 18px;
-      height: var(--board-size);
-      padding: 2px 0;
-    }
-    .rank-label {
-      font-size: 0.7rem;
-      color: var(--text-dim);
-      text-align: center;
-      height: var(--sq-size);
-      line-height: var(--sq-size);
-      font-family: 'Cinzel', serif;
-    }
-    /* file labels */
-    .file-labels {
-      display: flex;
-      width: var(--board-size);
-      margin-left: 18px;
-      padding-top: 4px;
-    }
-    .file-label {
-      width: var(--sq-size);
-      text-align: center;
-      font-size: 0.7rem;
-      color: var(--text-dim);
-      font-family: 'Cinzel', serif;
-    }
-    /* board grid */
-    #board {
-      display: grid;
-      grid-template-columns: repeat(8, var(--sq-size));
-      grid-template-rows: repeat(8, var(--sq-size));
-      width: var(--board-size);
-      height: var(--board-size);
-      position: relative;
-    }
-    .sq {
-      width: var(--sq-size);
-      height: var(--sq-size);
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: default;
-    }
-    .sq.light { background: var(--sq-light); }
-    .sq.dark  { background: var(--sq-dark);  }
-    .sq.hi-from.light { background: var(--sq-hi-light); }
-    .sq.hi-from.dark  { background: var(--sq-hi-dark);  }
-    .sq.hi-to.light   { background: var(--sq-hi-light); }
-    .sq.hi-to.dark    { background: var(--sq-hi-dark);  }
-    /* piece image */
-    .piece-img {
-      width: 54px;
-      height: 54px;
-      object-fit: contain;
-      user-select: none;
-      pointer-events: none;
-      display: block;
-    }
-    /* Unicode fallback */
-    .piece-uni {
-      font-size: 44px;
-      line-height: 1;
-      user-select: none;
-      pointer-events: none;
-    }
-    /* ── Classification badge ─────────────────────────────────────── */
-    .badge {
-      position: absolute;
-      top: 1px;
-      right: 1px;
-      width: 22px;
-      height: 22px;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 9px;
-      font-weight: 800;
-      font-family: Arial, sans-serif;
-      color: white;
-      z-index: 20;
-      border: 2px solid rgba(0,0,0,0.35);
-      box-shadow: 0 2px 6px rgba(0,0,0,0.6);
-      letter-spacing: -0.5px;
-      pointer-events: none;
-    }
-    .badge-BRILLIANT  { background: var(--cl-brilliant); }
-    .badge-GREAT      { background: var(--cl-great);     }
-    .badge-BEST       { background: var(--cl-best);      }
-    .badge-EXCELLENT  { background: var(--cl-excellent);  }
-    .badge-GOOD       { background: var(--cl-good);      }
-    .badge-BOOK       { background: var(--cl-book);      }
-    .badge-INACCURACY { background: var(--cl-inaccuracy);}
-    .badge-MISTAKE    { background: var(--cl-mistake);   }
-    .badge-BLUNDER    { background: var(--cl-blunder);   }
-    .badge-OMISSION   { background: var(--cl-omission);  }
-    /* ── Info panel below board ───────────────────────────────────── */
-    .board-info {
-      margin-top: 10px;
-      margin-left: 18px;
-      width: var(--board-size);
-      background: var(--card);
-      border: 1px solid var(--border-soft);
-      border-radius: 8px;
-      padding: 14px 18px;
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-    }
-    .move-label {
-      font-family: 'Cinzel', serif;
-      font-size: 1.05rem;
-      color: var(--text);
-      letter-spacing: 0.04em;
-    }
-    .move-class-row {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-    .move-class-dot {
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      flex-shrink: 0;
-    }
-    .move-class-text {
-      font-size: 1rem;
-      font-weight: 600;
-    }
-    .move-notes {
-      font-size: 0.88rem;
-      color: var(--text-dim);
-      font-style: italic;
-    }
-    .move-cp {
-      font-size: 0.82rem;
-      color: var(--text-muted);
-    }
-    /* ── Navigation ──────────────────────────────────────────────── */
-    .nav-row {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 10px;
-      margin-top: 12px;
-    }
-    .nav-btn {
-      background: var(--card);
-      border: 1px solid var(--border);
-      color: var(--text-dim);
-      width: 44px;
-      height: 44px;
-      border-radius: 8px;
-      font-size: 1.2rem;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: background 0.15s, border-color 0.15s, color 0.15s;
-      flex-shrink: 0;
-    }
-    .nav-btn:hover:not(:disabled) {
-      background: var(--card2);
-      border-color: var(--gold-dim);
-      color: var(--gold);
-    }
-    .nav-btn:disabled { opacity: 0.3; cursor: default; }
-    .nav-counter {
-      font-family: 'Cinzel', serif;
-      font-size: 0.78rem;
-      color: var(--text-muted);
-      letter-spacing: 0.06em;
-      min-width: 80px;
-      text-align: center;
-    }
-    /* ── Move list (right panel) ─────────────────────────────────── */
-    .move-list-panel {
-      width: 240px;
-      flex-shrink: 0;
-      background: var(--card);
-      border: 1px solid var(--border-soft);
-      border-radius: 10px;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      max-height: calc(var(--board-size) + 50px);
-    }
-    .move-list-header {
-      padding: 12px 14px;
-      font-family: 'Cinzel', serif;
-      font-size: 0.78rem;
-      letter-spacing: 0.1em;
-      color: var(--text-dim);
-      border-bottom: 1px solid var(--border-soft);
-      text-transform: uppercase;
-    }
-    .move-list-body {
-      overflow-y: auto;
-      flex: 1;
-      padding: 6px 0;
-      scrollbar-width: thin;
-      scrollbar-color: var(--border) transparent;
-    }
-    .move-pair {
-      display: flex;
-      align-items: stretch;
-    }
-    .move-num {
-      width: 32px;
-      text-align: right;
-      padding: 4px 6px;
-      font-size: 0.78rem;
-      color: var(--text-muted);
-      font-family: 'Cinzel', serif;
-      flex-shrink: 0;
-      line-height: 26px;
-    }
-    .move-cell {
-      flex: 1;
-      padding: 4px 6px;
-      font-size: 0.9rem;
-      cursor: pointer;
-      border-radius: 4px;
-      display: flex;
-      align-items: center;
-      gap: 5px;
-      transition: background 0.12s;
-      min-height: 28px;
-      margin: 1px 2px;
-    }
-    .move-cell:hover { background: var(--card2); }
-    .move-cell.current { background: var(--card2); outline: 1px solid var(--gold-dim); }
-    .move-cell .cl-dot {
-      width: 7px;
-      height: 7px;
-      border-radius: 50%;
-      flex-shrink: 0;
-    }
-    .move-cell .san-text {
-      font-family: 'Crimson Pro', serif;
-      font-size: 0.95rem;
-    }
-    /* ── Eval summary bars ───────────────────────────────────────── */
-    .eval-summary {
-      padding: 12px 14px;
-      border-top: 1px solid var(--border-soft);
-    }
-    .eval-summary-row {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-bottom: 4px;
-    }
-    .eval-summary-name {
-      font-size: 0.78rem;
-      color: var(--text-dim);
-      width: 36px;
-      font-family: 'Cinzel', serif;
-    }
-    .eval-summary-bar-wrap {
-      flex: 1;
-      height: 4px;
-      background: var(--bg);
-      border-radius: 2px;
-      overflow: hidden;
-    }
-    .eval-summary-bar { height: 100%; border-radius: 2px; }
-    .eval-accuracy {
-      font-size: 0.82rem;
-      color: var(--text-dim);
-      text-align: center;
-      font-style: italic;
-      margin-top: 6px;
-    }
-    /* ── Flip button ─────────────────────────────────────────────── */
-    .flip-btn {
-      background: transparent;
-      border: 1px solid var(--border);
-      color: var(--text-muted);
-      border-radius: 5px;
-      font-size: 0.75rem;
-      padding: 3px 10px;
-      cursor: pointer;
-      font-family: 'Crimson Pro', serif;
-      transition: border-color 0.15s, color 0.15s;
-    }
-    .flip-btn:hover { border-color: var(--gold-dim); color: var(--gold); }
-    /* ── Classification color helper ─────────────────────────────── */
-    .cl-BRILLIANT  { color: var(--cl-brilliant); }
-    .cl-GREAT      { color: var(--cl-great);     }
-    .cl-BEST       { color: var(--cl-best);      }
-    .cl-EXCELLENT  { color: var(--cl-excellent); }
-    .cl-GOOD       { color: var(--cl-good);      }
-    .cl-BOOK       { color: var(--cl-book);      }
-    .cl-INACCURACY { color: var(--cl-inaccuracy);}
-    .cl-MISTAKE    { color: var(--cl-mistake);   }
-    .cl-BLUNDER    { color: var(--cl-blunder);   }
-    .cl-OMISSION   { color: var(--cl-omission);  }
-    /* ── Scrollbar style ─────────────────────────────────────────── */
-    ::-webkit-scrollbar { width: 5px; }
-    ::-webkit-scrollbar-track { background: transparent; }
-    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-    /* ── Continuations ───────────────────────────────────────────── */
-    .continuations {
-      margin-top: 8px;
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-    }
-    .cont-block {
-      background: var(--bg);
-      border: 1px solid var(--border-soft);
-      border-radius: 6px;
-      padding: 8px 12px;
-    }
-    .cont-label {
-      font-size: 0.72rem;
-      font-family: 'Cinzel', serif;
-      letter-spacing: 0.08em;
-      color: var(--text-muted);
-      text-transform: uppercase;
-      margin-bottom: 4px;
-    }
-    .cont-moves {
-      font-family: 'Crimson Pro', serif;
-      font-size: 0.92rem;
-      color: var(--text-dim);
-      line-height: 1.5;
-      word-spacing: 4px;
-    }
-    .cont-moves .cont-best-move {
-      color: var(--cl-best);
-      font-weight: 600;
-    }
-    .cont-moves .cont-player-move {
-      color: var(--text);
-      font-weight: 600;
-    }
-    /* ══════════════════════════════════════════════════════════════
-       SUMMARY SCREEN
-    ══════════════════════════════════════════════════════════════ */
-    #summary-screen {
-      flex-direction: column;
-      overflow-y: auto;
-    }
-    .summary-body {
-      flex: 1;
-      padding: 28px 32px;
-      max-width: 900px;
-      margin: 0 auto;
-      width: 100%;
-    }
-    .summary-title {
-      font-family: 'Cinzel', serif;
-      font-size: 1.5rem;
-      font-weight: 700;
-      color: var(--gold);
-      margin-bottom: 4px;
-    }
-    .summary-meta {
-      font-size: 0.9rem;
-      color: var(--text-dim);
-      font-style: italic;
-      margin-bottom: 28px;
-    }
-    /* Eval graph */
-    .eval-graph-wrap {
-      background: var(--card);
-      border: 1px solid var(--border-soft);
-      border-radius: 10px;
-      padding: 16px 16px 10px;
-      margin-bottom: 24px;
-    }
-    .eval-graph-label {
-      font-family: 'Cinzel', serif;
-      font-size: 0.72rem;
-      letter-spacing: 0.1em;
-      color: var(--text-muted);
-      text-transform: uppercase;
-      margin-bottom: 10px;
-    }
-    #eval-graph-canvas {
-      width: 100%;
-      height: 130px;
-      display: block;
-      border-radius: 5px;
-    }
-    /* Player comparison table */
-    .summary-table-wrap {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 14px;
-      margin-bottom: 24px;
-    }
-    .summary-player-card {
-      background: var(--card);
-      border: 1px solid var(--border-soft);
-      border-radius: 10px;
-      overflow: hidden;
-    }
-    .summary-player-header {
-      padding: 10px 16px;
-      font-family: 'Cinzel', serif;
-      font-size: 0.95rem;
-      font-weight: 600;
-      background: var(--card2);
-      border-bottom: 1px solid var(--border-soft);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-    .summary-player-header .player-color-dot {
-      width: 9px;
-      height: 9px;
-      border-radius: 50%;
-      border: 1.5px solid var(--border);
-    }
-    .summary-row {
-      display: flex;
-      align-items: center;
-      padding: 7px 16px;
-      border-bottom: 1px solid var(--border-soft);
-      gap: 10px;
-    }
-    .summary-row:last-child { border-bottom: none; }
-    .summary-cl-dot {
-      width: 9px;
-      height: 9px;
-      border-radius: 50%;
-      flex-shrink: 0;
-    }
-    .summary-cl-name {
-      font-size: 0.9rem;
-      color: var(--text-dim);
-      flex: 1;
-    }
-    .summary-cl-count {
-      font-family: 'Cinzel', serif;
-      font-size: 0.95rem;
-      color: var(--text);
-      font-weight: 600;
-      min-width: 24px;
-      text-align: right;
-    }
-    .summary-cl-bar-wrap {
-      width: 70px;
-      height: 4px;
-      background: var(--bg);
-      border-radius: 2px;
-      overflow: hidden;
-    }
-    .summary-cl-bar { height: 100%; border-radius: 2px; }
-    /* Accuracy score */
-    .summary-accuracy {
-      text-align: center;
-      padding: 8px 0 4px;
-    }
-    .summary-accuracy-num {
-      font-family: 'Cinzel', serif;
-      font-size: 1.6rem;
-      font-weight: 700;
-    }
-    .summary-accuracy-label {
-      font-size: 0.72rem;
-      color: var(--text-muted);
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-    }
-    .summary-cta {
-      display: flex;
-      justify-content: center;
-      margin-top: 8px;
-    }
-    /* ══════════════════════════════════════════════════════════════
-       MOBILE RESPONSIVE
-    ══════════════════════════════════════════════════════════════ */
-    /* Fluid board: fill the viewport minus eval bar and padding */
-    @media (max-width: 700px) {
-      :root {
-        --board-size: min(92vw, 420px);
-        --sq-size:    calc(min(92vw, 420px) / 8);
-      }
-      .game-body {
-        flex-direction: column;
-        align-items: center;
-        padding: 10px 8px 8px;
-        gap: 10px;
-      }
-      /* Eval bar goes horizontal above the board on mobile */
-      .eval-col {
-        flex-direction: row;
-        align-items: center;
-        width: var(--board-size);
-        margin-left: 18px;    /* align with board (rank label width) */
-        gap: 6px;
-      }
-      .eval-bar-wrap {
-        width: 100%;
-        height: 10px;
-        flex: 1;
-      }
-      .eval-bar-white {
-        /* horizontal bar: width instead of height */
-        height: 100%;
-        width: 50%;
-        top: 0;
-        left: 0;
-        transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-      }
-      /* hide the W / B labels on mobile */
-      .eval-col > div:first-child,
-      .eval-col > div:last-child { display: none; }
-      .eval-label { font-size: 0.65rem; }
-      /* board info strip */
-      .board-info { margin-left: 18px; padding: 10px 12px; }
-      /* nav row tighter */
-      .nav-btn   { width: 38px; height: 38px; font-size: 1rem; }
-      .nav-row   { gap: 6px; }
-      /* Move list panel goes below the board, full width */
-      .move-list-panel {
-        width: var(--board-size);
-        max-height: 220px;
-        margin-left: 18px;
-      }
-      /* game header: stack players */
-      .game-header {
-        flex-wrap: wrap;
-        gap: 6px;
-        padding: 10px 14px;
-      }
-      .game-players { font-size: 0.9rem; }
-      .game-meta    { font-size: 0.72rem; }
-      .btn-new-game { padding: 5px 10px; font-size: 0.78rem; }
-      /* upload box full width */
-      .upload-box  { width: 95vw; }
-      .upload-title { font-size: 1.5rem; }
-      /* badge slightly smaller */
-      .badge { width: 18px; height: 18px; font-size: 8px; }
-      /* piece images */
-      .piece-img  { width: calc(var(--sq-size) * 0.9); height: calc(var(--sq-size) * 0.9); }
-      .piece-uni  { font-size: calc(var(--sq-size) * 0.75); }
-    }
-    @media (max-width: 400px) {
-      :root {
-        --board-size: 98vw;
-        --sq-size:    calc(98vw / 8);
-      }
-      .rank-labels { width: 14px; }
-      .rank-label  { font-size: 0.6rem; }
-      .file-label  { font-size: 0.6rem; }
-      .eval-col    { margin-left: 14px; }
-      .board-info,
-      .move-list-panel { margin-left: 14px; width: calc(98vw - 14px); }
-    }
-  </style>
-</head>
-<body>
-  <!-- ═══════════════════════════════════════════════════════════════
-       UPLOAD SCREEN
-  ════════════════════════════════════════════════════════════════ -->
-  <div id="upload-screen" class="screen active">
-    <header>
-      <div>
-        <div class="logo" style="text-align: center;">♟ ANALYSIS</div>
-        <div class="logo-sub" style="text-align: center;">Stockfish · Deep Engine</div>
-      </div>
-    </header>
-    <div style="flex:1; display:flex; align-items:center; justify-content:center; padding:40px 20px;">
-      <div class="upload-box">
-        <h1 class="upload-title">Analyse a Game</h1>
-        <p class="upload-sub">Paste PGN notation or drop a file below</p>
-        <div class="drop-zone" id="drop-zone">
-          <div class="drop-zone-label">
-            Drop a <span onclick="document.getElementById('file-input').click()">PGN file</span> here, or paste below
-          </div>
-          <textarea id="pgn-textarea"
-            placeholder='[Event "World Championship"]&#10;[White "Kasparov"]&#10;[Black "Karpov"]&#10;&#10;1. e4 e5 2. Nf3 Nc6 ...'></textarea>
-        </div>
-        <input type="file" id="file-input" accept=".pgn,.txt">
-        <div class="upload-row">
-          <div class="depth-row">
-            <select id="mode-select" onchange="updateModeLabel()"
-              style="background:var(--card2);border:1px solid var(--border);color:var(--text-dim);
-                     border-radius:4px;padding:3px 7px;font-family:'Crimson Pro',serif;font-size:0.88rem;outline:none;cursor:pointer;">
-              <option value="depth">Depth</option>
-              <option value="time">Time/move</option>
-            </select>
-            <input type="range" id="depth-slider" min="6" max="24" value="14"
-                   oninput="updateModeLabel()">
-            <span id="depth-val" style="min-width:44px;display:inline-block;">14</span>
-          </div>
-          <button class="btn-primary" onclick="startUpload()">Analyse →</button>
-        </div>
-        <div style="font-size:0.78rem;color:var(--text-muted);margin-top:8px;font-style:italic;" id="speed-hint">
-          Depth 14 ≈ fast · 18 ≈ balanced · 22+ ≈ slow
-        </div>
-        <div id="upload-error" style="color:var(--cl-blunder); font-size:0.85rem; margin-top:12px; display:none;"></div>
-      </div>
-    </div>
-  </div>
-  <!-- ═══════════════════════════════════════════════════════════════
-       LOADING SCREEN
-  ════════════════════════════════════════════════════════════════ -->
-  <div id="loading-screen" class="screen">
-    <header>
-      <div>
-        <div class="logo">♟ ANALYSIS</div>
-        <div class="logo-sub">Stockfish · Deep Engine</div>
-      </div>
-    </header>
-    <div style="flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;">
-      <div class="loading-chess-icon">♞</div>
-      <div class="loading-title">ANALYSING GAME</div>
-      <div class="progress-wrap">
-        <div class="progress-bar" id="progress-bar"></div>
-      </div>
-      <div id="loading-move-label">Preparing engine…</div>
-      <div class="loading-info" id="loading-info">Running Stockfish at depth <span id="loading-depth">—</span></div>
-    </div>
-  </div>
-  <!-- ═══════════════════════════════════════════════════════════════
-       SUMMARY SCREEN
-  ════════════════════════════════════════════════════════════════ -->
-  <div id="summary-screen" class="screen">
-    <header>
-      <div>
-        <div class="logo">♟ ANALYSIS</div>
-        <div class="logo-sub">Stockfish · Deep Engine</div>
-      </div>
-      <button class="btn-new-game" onclick="newGame()">← New Game</button>
-    </header>
-    <div class="summary-body">
-      <div class="summary-title" id="sum-title">Game Analysis</div>
-      <div class="summary-meta" id="sum-meta"></div>
-      <!-- Eval graph -->
-      <div class="eval-graph-wrap">
-        <div class="eval-graph-label">Evaluation across the game</div>
-        <canvas id="eval-graph-canvas"></canvas>
-      </div>
-      <!-- Player cards -->
-      <div class="summary-table-wrap">
-        <div class="summary-player-card" id="sum-white-card">
-          <div class="summary-player-header">
-            <span id="sum-white-name">White</span>
-            <div class="player-color-dot" style="background:#ece8e0;"></div>
-          </div>
-          <div class="summary-accuracy">
-            <div class="summary-accuracy-num" id="sum-white-acc" style="color:var(--cl-excellent);">—</div>
-            <div class="summary-accuracy-label">Accuracy</div>
-          </div>
-          <div id="sum-white-rows"></div>
-        </div>
-        <div class="summary-player-card" id="sum-black-card">
-          <div class="summary-player-header">
-            <span id="sum-black-name">Black</span>
-            <div class="player-color-dot" style="background:#444;"></div>
-          </div>
-          <div class="summary-accuracy">
-            <div class="summary-accuracy-num" id="sum-black-acc" style="color:var(--cl-excellent);">—</div>
-            <div class="summary-accuracy-label">Accuracy</div>
-          </div>
-          <div id="sum-black-rows"></div>
-        </div>
-      </div>
-      <div class="summary-cta">
-        <button class="btn-primary" onclick="enterGame()">Review Game →</button>
-      </div>
-    </div>
-  </div>
-  <!-- ═══════════════════════════════════════════════════════════════
-       GAME SCREEN
-  ════════════════════════════════════════════════════════════════ -->
-  <div id="game-screen" class="screen">
-    <header>
-      <div>
-        <div class="logo">♟ ANALYSIS</div>
-        <div class="logo-sub">Stockfish · Deep Engine</div>
-      </div>
-      <div style="display:flex; align-items:center; gap:24px; flex:1; justify-content:center;">
-        <div class="game-players">
-          <span class="player-white" id="hdr-white">White</span>
-          <span class="vs-sep">vs</span>
-          <span class="player-black" id="hdr-black">Black</span>
-        </div>
-        <div class="game-meta" id="hdr-meta"></div>
-      </div>
-      <button class="btn-new-game" onclick="newGame()">← New Game</button>
-    </header>
-    <div class="game-body">
-      <!-- Eval bar -->
-      <div class="eval-col">
-        <div style="font-size:0.7rem; color:var(--text-muted); font-family:'Cinzel',serif; margin-bottom:4px; letter-spacing:0.06em;">W</div>
-        <div class="eval-bar-wrap">
-          <div class="eval-bar-white" id="eval-bar-white"></div>
-        </div>
-        <div style="font-size:0.7rem; color:var(--text-muted); font-family:'Cinzel',serif; margin-top:4px; letter-spacing:0.06em;">B</div>
-      </div>
-      <!-- Board + info -->
-      <div class="board-col">
-        <div class="board-outer">
-          <!-- Rank labels -->
-          <div class="rank-labels" id="rank-labels">
-            <div class="rank-label">8</div>
-            <div class="rank-label">7</div>
-            <div class="rank-label">6</div>
-            <div class="rank-label">5</div>
-            <div class="rank-label">4</div>
-            <div class="rank-label">3</div>
-            <div class="rank-label">2</div>
-            <div class="rank-label">1</div>
-          </div>
-          <!-- Board -->
-          <div id="board"></div>
-        </div>
-        <!-- File labels -->
-        <div class="file-labels">
-          <div class="file-label">a</div>
-          <div class="file-label">b</div>
-          <div class="file-label">c</div>
-          <div class="file-label">d</div>
-          <div class="file-label">e</div>
-          <div class="file-label">f</div>
-          <div class="file-label">g</div>
-          <div class="file-label">h</div>
-        </div>
-        <!-- Navigation -->
-        <div class="nav-row">
-          <button type="button" class="nav-btn" id="btn-start" onclick="navigateTo(0)" title="Start (Home)">⇤</button>
-          <button type="button" class="nav-btn" id="btn-prev"  onclick="navigateTo(currentIdx - 1)" title="Previous (←)">‹</button>
-          <div class="nav-counter" id="nav-counter">— / —</div>
-          <button type="button" class="nav-btn" id="btn-next"  onclick="navigateTo(currentIdx + 1)" title="Next (→)">›</button>
-          <button type="button" class="nav-btn" id="btn-end"   onclick="navigateTo(gameData.positions.length - 1)" title="End (End)">⇥</button>
-          <button type="button" class="flip-btn" onclick="flipBoard()" title="Flip board">⇅ Flip</button>
-        </div>
-        <!-- Move info -->
-        <div class="board-info">
-          <div style="display:flex; align-items:center; justify-content:space-between;">
-            <div class="move-label" id="info-move-label">Starting Position</div>
-            <div class="eval-label" id="info-eval">0.00</div>
-          </div>
-          <div class="move-class-row" id="info-class-row" style="display:none;">
-            <div class="move-class-dot" id="info-class-dot"></div>
-            <div class="move-class-text" id="info-class-text"></div>
-            <div class="move-cp" id="info-cp"></div>
-          </div>
-          <div class="move-notes" id="info-notes"></div>
-          <!-- Continuations -->
-          <div class="continuations" id="continuations" style="display:none;">
-            <div class="cont-block" id="cont-player-block">
-              <div class="cont-label">Continuation after this move</div>
-              <div class="cont-moves" id="cont-player"></div>
-            </div>
-            <div class="cont-block" id="cont-best-block" style="display:none;">
-              <div class="cont-label">Best move was <span id="cont-best-move-name" class="cont-best-move"></span></div>
-              <div class="cont-label" style="margin-top:4px;">Continuation after best move</div>
-              <div class="cont-moves" id="cont-best"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- Move list panel -->
-      <div class="move-list-panel">
-        <div class="move-list-header">Move List</div>
-        <div class="move-list-body" id="move-list"></div>
-        <div class="eval-summary" id="eval-summary" style="display:none;">
-          <div class="eval-summary-row">
-            <div class="eval-summary-name">White</div>
-            <div class="eval-summary-bar-wrap">
-              <div class="eval-summary-bar" id="white-acc-bar" style="background:var(--cl-excellent);"></div>
-            </div>
-          </div>
-          <div class="eval-summary-row">
-            <div class="eval-summary-name">Black</div>
-            <div class="eval-summary-bar-wrap">
-              <div class="eval-summary-bar" id="black-acc-bar" style="background:var(--cl-excellent);"></div>
-            </div>
-          </div>
-          <div class="eval-accuracy" id="accuracy-text"></div>
-        </div>
-      </div>
-    </div><!-- /game-body -->
-  </div><!-- /game-screen -->
-  <!-- ═══════════════════════════════════════════════════════════════
-       JAVASCRIPT
-  ════════════════════════════════════════════════════════════════ -->
-  <script>
-    /* ── State ─────────────────────────────────────────────────── */
-    let gameData   = null;
-    let currentIdx = 0;
-    let flipped    = false;
-    let currentGameId = null;
-    let progressEvt   = null;
-    /* ── Classification config ��────────────────────────────────── */
-    const CL = {
-      BRILLIANT:  { color: '#00b5ad', badge: '!!', label: '!! Brilliant'     },
-      GREAT:      { color: '#1a4fc4', badge: '!',  label: '!  Great'         },
-      BEST:       { color: '#7ec820', badge: '★',  label: '★  Best'          },
-      EXCELLENT:  { color: '#7ec820', badge: '👍', label: '👍 Excellent'     },
-      GOOD:       { color: '#4db896', badge: '✓',  label: '✓  Good'          },
-      BOOK:       { color: '#a0754a', badge: '📖', label: '📖 Book'          },
-      INACCURACY: { color: '#d4b030', badge: '?!', label: '?! Inaccuracy'    },
-      MISTAKE:    { color: '#d07020', badge: '?',  label: '?  Mistake'       },
-      BLUNDER:    { color: '#c83030', badge: '??', label: '?? Blunder'       },
-      OMISSION:   { color: '#e05050', badge: '✖',  label: '✖  Missed Tactic' },
-    };
-    /* ── Piece maps ────────────────────────────────────────────── */
-    const PIECE_CODE = {
-      K:'wK', Q:'wQ', R:'wR', B:'wB', N:'wN', P:'wP',
-      k:'bK', q:'bQ', r:'bR', b:'bB', n:'bN', p:'bP',
-    };
-    const PIECE_UNI = {
-      K:'♔', Q:'♕', R:'♖', B:'♗', N:'♘', P:'♙',
-      k:'♚', q:'♛', r:'♜', b:'♝', n:'♞', p:'♟',
-    };
-    /* Track which piece images failed to load (use unicode instead) */
-    const imgFailed = {};
-    /* ── Screens ───────────────────────────────────────────────── */
-    function showScreen(id) {
-      document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
-      document.getElementById(id).classList.add('active');
-    }
-    /* ── Upload ────────────────────────────────────────────────── */
-    function updateModeLabel() {
-      const mode = document.getElementById('mode-select').value;
-      const val  = +document.getElementById('depth-slider').value;
-      const hint = document.getElementById('speed-hint');
-      if (mode === 'depth') {
-        document.getElementById('depth-val').textContent = val;
-        hint.textContent = `Depth ${val} ≈ ${val<=10?'very fast':val<=14?'fast':val<=18?'balanced':val<=21?'slow':'very slow'}`;
-      } else {
-        // remap slider 6-24 → 100ms-3000ms
-        const ms = Math.round(((val - 6) / 18) * 2900 + 100);
-        document.getElementById('depth-val').textContent = ms + ' ms';
-        hint.textContent = `${ms}ms per move ≈ ${ms<=300?'fast':ms<=800?'balanced':'thorough'}`;
-      }
-    }
-    updateModeLabel();
-    function startUpload() {
-      const pgn   = document.getElementById('pgn-textarea').value.trim();
-      const mode  = document.getElementById('mode-select').value;
-      const sliderVal = +document.getElementById('depth-slider').value;
-      const errEl = document.getElementById('upload-error');
-      if (!pgn) { errEl.textContent = 'Please paste a PGN first.'; errEl.style.display='block'; return; }
-      errEl.style.display = 'none';
-      const fd = new FormData();
-      fd.append('pgn_text', pgn);
-      if (mode === 'depth') {
-        fd.append('depth', sliderVal);
-      } else {
-        const ms = Math.round(((sliderVal - 6) / 18) * 2900 + 100);
-        fd.append('time_ms', ms);
-      }
-      fetch('/upload', { method: 'POST', body: fd })
-        .then(r => {
-          const ct = r.headers.get('content-type') || '';
-          if (!ct.includes('application/json')) {
-            throw new Error('Server returned non-JSON (status ' + r.status + '). ' +
-              'If using localtunnel, open the tunnel URL directly in a new tab and click Continue first.');
-          }
-          return r.json();
-        })
-        .then(d => {
-          if (d.error) { showError(d.error); return; }
-          currentGameId = d.game_id;
-          document.getElementById('loading-depth').textContent =
-            mode === 'depth' ? 'depth ' + sliderVal : Math.round(((sliderVal-6)/18)*2900+100) + 'ms/move';
-          showScreen('loading-screen');
-          pollProgress(d.game_id);
-        })
-        .catch(e => showError('Upload failed: ' + e.message));
-    }
-    function showError(msg) {
-      const el = document.getElementById('upload-error');
-      if (el) { el.textContent = msg; el.style.display = 'block'; }
-      else { alert(msg); }
-      showScreen('upload-screen');
-    }
-    function pollProgress(gameId) {
-      if (progressEvt) progressEvt.close();
-      const bar   = document.getElementById('progress-bar');
-      const label = document.getElementById('loading-move-label');
-      progressEvt = new EventSource(`/progress/${gameId}`);
-      progressEvt.onmessage = (e) => {
-        const p = JSON.parse(e.data);
-        if (p.error) {
-          progressEvt.close();
-          showError('Analysis error: ' + p.error);
-          return;
-        }
-        const pct = p.total > 0 ? Math.round((p.done / p.total) * 100) : 0;
-        bar.style.width = pct + '%';
-        label.textContent = p.done > 0
-          ? `Move ${p.done} of ${p.total} analysed`
-          : 'Initialising engine…';
-        if (p.complete && !p.error) {
-          progressEvt.close();
-          loadGame(gameId);
-        }
-      };
-    }
-    function loadGame(gameId) {
-      fetch(`/game/${gameId}`)
-        .then(r => r.json())
-        .then(d => {
-          if (d.error) { alert(d.error); showScreen('upload-screen'); return; }
-          gameData = d;
-          setupGameScreen();
-          buildSummary();
-          showScreen('summary-screen');
-        });
-    }
-    function enterGame() {
-      showScreen('game-screen');
-    }
-    /* ── Summary screen ────────────────────────────────────────── */
-    function buildSummary() {
-      const h   = gameData.headers;
-      const pos = gameData.positions;
-      document.getElementById('sum-white-name').textContent = h.White || 'White';
-      document.getElementById('sum-black-name').textContent = h.Black || 'Black';
-      document.getElementById('sum-title').textContent =
-        `${h.White || 'White'} vs ${h.Black || 'Black'}`;
-      document.getElementById('sum-meta').textContent =
-        [h.Event, h.Date, h.Result].filter(Boolean).join(' · ');
-      // ── Eval graph ─────────────────────────────────────────────
-      const canvas = document.getElementById('eval-graph-canvas');
-      const dpr    = window.devicePixelRatio || 1;
-      const W      = canvas.parentElement.clientWidth - 32;
-      const H      = 130;
-      canvas.width  = W * dpr;
-      canvas.height = H * dpr;
-      canvas.style.width  = W + 'px';
-      canvas.style.height = H + 'px';
-      const ctx = canvas.getContext('2d');
-      ctx.scale(dpr, dpr);
-      // Background
-      ctx.fillStyle = '#13131a';
-      ctx.fillRect(0, 0, W, H);
-      // Zero line
-      ctx.strokeStyle = '#333';
-      ctx.lineWidth = 1;
-      ctx.beginPath();
-      ctx.moveTo(0, H / 2);
-      ctx.lineTo(W, H / 2);
-      ctx.stroke();
-      // Eval to Y: clamp to ±5 (500cp), arctan squash for large values
-      const evalToY = (cpWhite) => {
-        const pct = 0.5 - 0.5 * (2 / Math.PI) * Math.atan(cpWhite / 400);
-        return pct * H;
-      };
-      // Fill white / black areas
-      const evals = pos.map(p => p.eval_white);
-      const xs    = evals.map((_, i) => (i / Math.max(evals.length - 1, 1)) * W);
-      ctx.beginPath();
-      ctx.moveTo(xs[0], H / 2);
-      for (let i = 0; i < evals.length; i++) {
-        ctx.lineTo(xs[i], evalToY(evals[i]));
-      }
-      ctx.lineTo(xs[xs.length - 1], H / 2);
-      ctx.closePath();
-      ctx.fillStyle = 'rgba(230,225,215,0.18)';
-      ctx.fill();
-      ctx.beginPath();
-      ctx.moveTo(xs[0], H / 2);
-      for (let i = 0; i < evals.length; i++) {
-        ctx.lineTo(xs[i], evalToY(evals[i]));
-      }
-      ctx.lineTo(xs[xs.length - 1], H);
-      ctx.lineTo(xs[0], H);
-      ctx.closePath();
-      ctx.fillStyle = 'rgba(60,60,70,0.4)';
-      ctx.fill();
-      // Line
-      ctx.beginPath();
-      ctx.moveTo(xs[0], evalToY(evals[0]));
-      for (let i = 1; i < evals.length; i++) ctx.lineTo(xs[i], evalToY(evals[i]));
-      ctx.strokeStyle = '#c8a84c';
-      ctx.lineWidth = 2;
-      ctx.stroke();
-      // Blunder/mistake dots
-      const DOT = { BLUNDER: '#c83030', MISTAKE: '#d07020', OMISSION: '#e05050' };
-      for (let i = 1; i < pos.length; i++) {
-        const cl = pos[i].classification;
-        if (DOT[cl]) {
-          ctx.beginPath();
-          ctx.arc(xs[i], evalToY(evals[i]), 3.5, 0, Math.PI * 2);
-          ctx.fillStyle = DOT[cl];
-          ctx.fill();
-        }
-      }
-      // ── Classification rows ────────────────────────────────────
-      const ORDER = ['BRILLIANT','GREAT','BEST','EXCELLENT','GOOD','BOOK',
-                     'INACCURACY','MISTAKE','BLUNDER','OMISSION'];
-      function buildRows(containerId, accId, colorIdx) {
-        const moves = pos.filter((_, i) => i > 0 && i % 2 === colorIdx);
-        const counts = {};
-        ORDER.forEach(k => counts[k] = 0);
-        moves.forEach(p => { if (p.classification) counts[p.classification] = (counts[p.classification]||0)+1; });
-        // Accuracy score
-        const weights = {BRILLIANT:100,GREAT:97,BEST:95,EXCELLENT:88,GOOD:78,
-                         BOOK:90,INACCURACY:50,MISTAKE:20,BLUNDER:0,OMISSION:10};
-        const acc = moves.length
-          ? Math.round(moves.reduce((s,p) => s + (weights[p.classification]||50), 0) / moves.length)
-          : 0;
-        const accEl = document.getElementById(accId);
-        accEl.textContent = acc + '%';
-        accEl.style.color = acc >= 90 ? 'var(--cl-best)' :
-                            acc >= 75 ? 'var(--cl-excellent)' :
-                            acc >= 60 ? 'var(--cl-inaccuracy)' : 'var(--cl-blunder)';
-        const max = Math.max(1, ...Object.values(counts));
-        const container = document.getElementById(containerId);
-        container.innerHTML = '';
-        ORDER.forEach(key => {
-          const cl = CL[key];
-          if (!cl) return;
-          const row = document.createElement('div');
-          row.className = 'summary-row';
-          row.innerHTML = `
-            <div class="summary-cl-dot" style="background:${cl.color}"></div>
-            <div class="summary-cl-name">${cl.label.trim()}</div>
-            <div class="summary-cl-bar-wrap">
-              <div class="summary-cl-bar" style="width:${(counts[key]/max*100).toFixed(0)}%;background:${cl.color}"></div>
-            </div>
-            <div class="summary-cl-count">${counts[key]}</div>
-          `;
-          container.appendChild(row);
-        });
-      }
-      buildRows('sum-white-rows', 'sum-white-acc', 1); // odd indices = white (move 1,3,5…)
-      buildRows('sum-black-rows', 'sum-black-acc', 0); // even indices = black (move 2,4,6…)
-    }
-    /* ── Game screen setup ─────────────────────────────────────── */
-    function setupGameScreen() {
-      const h = gameData.headers;
-      document.getElementById('hdr-white').textContent = h.White || 'White';
-      document.getElementById('hdr-black').textContent = h.Black || 'Black';
-      document.getElementById('hdr-meta').textContent  = [h.Event, h.Date, h.Result].filter(Boolean).join(' · ');
-      buildMoveList();
-      computeAccuracy();
-      navigateTo(0);
-    }
-    function newGame() {
-      gameData = null;
-      currentIdx = 0;
-      flipped = false;
-      document.getElementById('pgn-textarea').value = '';
-      showScreen('upload-screen');
-    }
-    /* ── FEN parser ────────────────────────────────────────────── */
-    function parseFEN(fen) {
-      const [placement] = fen.split(' ');
-      const ranks = placement.split('/');
-      const grid  = []; // grid[rank][file], rank 0 = rank 8
-      for (const row of ranks) {
-        const r = [];
-        for (const ch of row) {
-          if (/\d/.test(ch)) { for (let i=0; i<+ch; i++) r.push(null); }
-          else                { r.push(ch); }
-        }
-        grid.push(r);
-      }
-      return grid;
-    }
-    /* ── Board render ──────────────────────────────────────────── */
-    function renderBoard(pos) {
-      const grid   = parseFEN(pos.fen);
-      const fromSq = pos.from_sq;
-      const toSq   = pos.to_sq;
-      const board  = document.getElementById('board');
-      board.innerHTML = '';
-      // Update rank/file labels for flipped
-      const rankLabels = document.getElementById('rank-labels');
-      rankLabels.innerHTML = '';
-      for (let i=0; i<8; i++) {
-        const d = document.createElement('div');
-        d.className = 'rank-label';
-        d.textContent = flipped ? (i + 1) : (8 - i);
-        rankLabels.appendChild(d);
-      }
-      const fileLabels = document.querySelector('.file-labels');
-      fileLabels.innerHTML = '';
-      for (let i=0; i<8; i++) {
-        const d = document.createElement('div');
-        d.className = 'file-label';
-        d.textContent = flipped
-          ? String.fromCharCode(104 - i)  // h...a
-          : String.fromCharCode(97  + i); // a...h
-        fileLabels.appendChild(d);
-      }
-      for (let displayRank=0; displayRank<8; displayRank++) {
-        for (let displayFile=0; displayFile<8; displayFile++) {
-          const gridRank = flipped ? (7 - displayRank) : displayRank;
-          const gridFile = flipped ? (7 - displayFile) : displayFile;
-          const squareName = String.fromCharCode(97 + gridFile) + (8 - gridRank);
-          const piece      = grid[gridRank][gridFile];
-          const isLight    = (gridRank + gridFile) % 2 === 0;
-          const sq = document.createElement('div');
-          sq.className  = 'sq ' + (isLight ? 'light' : 'dark');
-          sq.dataset.sq = squareName;
-          if (squareName === fromSq) sq.classList.add('hi-from');
-          if (squareName === toSq)   sq.classList.add('hi-to');
-          if (piece) {
-            if (imgFailed[PIECE_CODE[piece]]) {
-              // unicode fallback
-              const span = document.createElement('span');
-              span.className   = 'piece-uni';
-              span.textContent = PIECE_UNI[piece];
-              sq.appendChild(span);
-            } else {
-              const img = document.createElement('img');
-              img.className = 'piece-img';
-              img.src       = `https://lichess1.org/assets/piece/cburnett/${PIECE_CODE[piece]}.svg`;
-              img.alt       = piece;
-              img.onerror   = function() {
-                imgFailed[PIECE_CODE[piece]] = true;
-                const span = document.createElement('span');
-                span.className   = 'piece-uni';
-                span.textContent = PIECE_UNI[piece];
-                this.parentNode.replaceChild(span, this);
-              };
-              sq.appendChild(img);
-            }
-          }
-          // Classification badge on the destination square
-          if (squareName === toSq && pos.classification && CL[pos.classification]) {
-            const cl  = CL[pos.classification];
-            const bdg = document.createElement('div');
-            bdg.className   = `badge badge-${pos.classification}`;
-            bdg.textContent = cl.badge;
-            sq.appendChild(bdg);
-          }
-          sq.addEventListener('click', () => { /* future: select piece */ });
-          board.appendChild(sq);
-        }
-      }
-    }
-    /* ── Eval bar ──────────────────────────────────────────────── */
-    function updateEvalBar(evalWhite) {
-      const pct = 50 + 50 * (2 / Math.PI) * Math.atan(evalWhite / 400);
-      const bar = document.getElementById('eval-bar-white');
-      const val = (flipped ? (100 - pct) : pct) + '%';
-      bar.style.height = val;
-      bar.style.width  = val;  // used by horizontal mobile bar
-    }
-    /* ── Move info panel ───────────────────────────────────────── */
-    function updateInfo(pos) {
-      const evalDisp = pos.eval_display;
-      document.getElementById('info-eval').textContent    = evalDisp;
-      document.getElementById('info-eval').className      = 'eval-label';
-      const clRow  = document.getElementById('info-class-row');
-      const clDot  = document.getElementById('info-class-dot');
-      const clText = document.getElementById('info-class-text');
-      const cpEl   = document.getElementById('info-cp');
-      const notes  = document.getElementById('info-notes');
-      const label  = document.getElementById('info-move-label');
-      if (!pos.san) {
-        label.textContent       = 'Starting Position';
-        clRow.style.display     = 'none';
-        notes.textContent       = '';
-      } else {
-        const colLabel = pos.color === 'white' ? 'White' : 'Black';
-        label.textContent = `${pos.move_number}${pos.color === 'white' ? '.' : '…'}  ${pos.san}  —  ${colLabel}`;
-        clRow.style.display = 'flex';
-        if (pos.classification && CL[pos.classification]) {
-          const cl = CL[pos.classification];
-          clDot.style.background  = cl.color;
-          clText.textContent      = cl.label;
-          clText.className        = `move-class-text cl-${pos.classification}`;
-          const eStr = pos.e_loss > 0.005
-            ? `(−${pos.e_loss.toFixed(3)} EP)`
-            : '';
-          cpEl.textContent = eStr;
-          notes.textContent       = pos.notes && pos.notes.length ? pos.notes.join(' · ') : '';
-        } else {
-          clRow.style.display = 'none';
-        }
-      }
-      // ── Continuations ────────────────────────────────────────────
-      const contSection   = document.getElementById('continuations');
-      const contPlayer    = document.getElementById('cont-player');
-      const contBest      = document.getElementById('cont-best');
-      const contBestBlock = document.getElementById('cont-best-block');
-      const contBestName  = document.getElementById('cont-best-move-name');
-      if (!pos.san) {
-        contSection.style.display = 'none';
-      } else {
-        contSection.style.display = 'flex';
-        // Player continuation
-        if (pos.player_pv && pos.player_pv.length) {
-          const pMoves = pos.player_pv.map((m, i) => {
-            const cls = i === 0 ? 'cont-player-move' : '';
-            return cls ? `<span class="${cls}">${m}</span>` : m;
-          });
-          contPlayer.innerHTML = pMoves.join(' ');
-        } else {
-          contPlayer.textContent = '—';
-        }
-        // Best move & continuation (only show when best != played move)
-        if (pos.best_san && pos.best_san !== pos.san) {
-          contBestBlock.style.display = 'block';
-          contBestName.textContent = pos.best_san;
-          if (pos.best_pv && pos.best_pv.length) {
-            const bMoves = pos.best_pv.map((m, i) => {
-              const cls = i === 0 ? 'cont-best-move' : '';
-              return cls ? `<span class="${cls}">${m}</span>` : m;
-            });
-            contBest.innerHTML = bMoves.join(' ');
-          } else {
-            contBest.textContent = '—';
-          }
-        } else {
-          contBestBlock.style.display = 'none';
-        }
-      }
-    }
-    /* ── Navigate ──────────────────────────────────────────────── */
-    function navigateTo(idx) {
-      if (!gameData) return;
-      idx = Math.max(0, Math.min(idx, gameData.positions.length - 1));
-      currentIdx = idx;
-      const pos = gameData.positions[idx];
-      renderBoard(pos);
-      updateEvalBar(pos.eval_white);
-      updateInfo(pos);
-      document.getElementById('btn-start').disabled = idx === 0;
-      document.getElementById('btn-prev').disabled  = idx === 0;
-      document.getElementById('btn-next').disabled  = idx === gameData.positions.length - 1;
-      document.getElementById('btn-end').disabled   = idx === gameData.positions.length - 1;
-      const total = gameData.positions.length - 1;
-      document.getElementById('nav-counter').textContent = idx === 0
-        ? `Start  /  ${total}`
-        : `${idx}  /  ${total}`;
-      // Highlight move list
-      document.querySelectorAll('.move-cell').forEach(c => c.classList.remove('current'));
-      if (idx > 0) {
-        const cell = document.querySelector(`[data-move-idx="${idx}"]`);
-        if (cell) {
-          cell.classList.add('current');
-          // Scroll the move-list container, not the whole page
-          const listBody = document.getElementById('move-list');
-          const cellTop    = cell.offsetTop;
-          const cellBottom = cellTop + cell.offsetHeight;
-          const bodyTop    = listBody.scrollTop;
-          const bodyBottom = bodyTop + listBody.clientHeight;
-          if (cellTop < bodyTop) {
-            listBody.scrollTop = cellTop - 8;
-          } else if (cellBottom > bodyBottom) {
-            listBody.scrollTop = cellBottom - listBody.clientHeight + 8;
-          }
-        }
-      }
-    }
-    function flipBoard() {
-      flipped = !flipped;
-      navigateTo(currentIdx);
-    }
-    /* ── Keyboard ──────────────────────────────────────────────── */
-    document.addEventListener('keydown', (e) => {
-      if (!gameData) return;
-      if (e.key === 'ArrowLeft'  || e.key === 'ArrowUp')   { e.preventDefault(); navigateTo(currentIdx - 1); }
-      if (e.key === 'ArrowRight' || e.key === 'ArrowDown')  { e.preventDefault(); navigateTo(currentIdx + 1); }
-      if (e.key === 'Home') { e.preventDefault(); navigateTo(0); }
-      if (e.key === 'End')  { e.preventDefault(); navigateTo(gameData.positions.length - 1); }
-    });
-    /* ── Move list ─────────────────────────────────────────────── */
-    function buildMoveList() {
-      const list = document.getElementById('move-list');
-      list.innerHTML = '';
-      const positions = gameData.positions;
-      // positions[0] = start, positions[1] = white's first move, positions[2] = black's...
-      let pairDiv = null;
-      for (let i = 1; i < positions.length; i++) {
-        const pos    = positions[i];
-        const isWhite = (i % 2 === 1);
-        if (isWhite) {
-          pairDiv = document.createElement('div');
-          pairDiv.className = 'move-pair';
-          const numEl = document.createElement('div');
-          numEl.className   = 'move-num';
-          numEl.textContent = pos.move_number + '.';
-          pairDiv.appendChild(numEl);
-          list.appendChild(pairDiv);
-        }
-        const cell = document.createElement('div');
-        cell.className       = 'move-cell';
-        cell.dataset.moveIdx = i;
-        const cl = pos.classification && CL[pos.classification] ? CL[pos.classification] : null;
-        if (cl) {
-          const dot = document.createElement('div');
-          dot.className    = 'cl-dot';
-          dot.style.background = cl.color;
-          cell.appendChild(dot);
-        } else {
-          // placeholder dot
-          const dot = document.createElement('div');
-          dot.className = 'cl-dot';
-          dot.style.background = 'transparent';
-          cell.appendChild(dot);
-        }
-        const san = document.createElement('span');
-        san.className   = 'san-text';
-        san.textContent = pos.san || '';
-        cell.appendChild(san);
-        cell.addEventListener('click', () => navigateTo(i));
-        if (pairDiv) pairDiv.appendChild(cell);
-      }
-    }
-    /* ── Accuracy summary ──────────────────────────────────────── */
-    function computeAccuracy() {
-      const positions = gameData.positions;
-      const WHITE_CL = []; const BLACK_CL = [];
-      for (let i = 1; i < positions.length; i++) {
-        const pos = positions[i];
-        const arr = pos.color === 'white' ? WHITE_CL : BLACK_CL;
-        arr.push(pos.classification);
-      }
-      function score(arr) {
-        const weights = {
-          BRILLIANT:  100, GREAT: 97, BEST: 95, EXCELLENT: 88, GOOD: 78,
-          BOOK: 90, INACCURACY: 50, MISTAKE: 20, BLUNDER: 0, OMISSION: 10,
-        };
-        if (!arr.length) return 0;
-        return arr.reduce((s, c) => s + (weights[c] || 50), 0) / arr.length;
-      }
-      const wScore = score(WHITE_CL);
-      const bScore = score(BLACK_CL);
-      document.getElementById('white-acc-bar').style.width = wScore + '%';
-      document.getElementById('black-acc-bar').style.width = bScore + '%';
-      document.getElementById('accuracy-text').textContent =
-        `White ${wScore.toFixed(0)}%  ·  Black ${bScore.toFixed(0)}%`;
-      document.getElementById('eval-summary').style.display = 'block';
-    }
-    /* ── Drag-and-drop ─────────────────────────────────────────── */
-    const dropZone = document.getElementById('drop-zone');
-    dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('dragover'); });
-    dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));
-    dropZone.addEventListener('drop', (e) => {
-      e.preventDefault();
-      dropZone.classList.remove('dragover');
-      const file = e.dataTransfer.files[0];
-      if (file) { const r = new FileReader(); r.onload = (ev) => { document.getElementById('pgn-textarea').value = ev.target.result; }; r.readAsText(file); }
-    });
-    document.getElementById('file-input').addEventListener('change', (e) => {
-      const file = e.target.files[0];
-      if (file) { const r = new FileReader(); r.onload = (ev) => { document.getElementById('pgn-textarea').value = ev.target.result; }; r.readAsText(file); }
-    });
-    /* ── Enter key on textarea ─────────────────────────────────── */
-    // Don't submit on Enter (user is typing PGN)
-  </script>
-</body>
-</html>