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

    :root {
      --bg: #101010;
      --surface: #202020;
      --border: #303030;
      --accent: #40ff40;
      --accent-dim: #40ff40;
      --danger: #ff4040;
      --muted: #808080;
      --text: #ffffff;
      --text-dim: #808080;
      --cyan: #00e5ff;
      --magenta: #ff00cc;
      --yellow: #ffe600;
      --sidebar-w: 240px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Space Grotesk', sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 0 32px;
    }

    header { text-align: center; margin-bottom: 0; margin-top: 0; }
    header h1 {
      font-family: 'Space Mono', monospace;
      font-size: 2.6rem; font-weight: 700;
      letter-spacing: 4px; color: var(--accent);
    }
    header p { color: var(--text-dim); margin-top: 6px; font-size: 0.88rem; font-weight: 300; }

    /* ── Layout: game col + sidebar ── */
    .layout {
      width: 100%;
      max-width: 800px;
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }

    .game-col {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* ── Sidebar ── */
    .sidebar {
      width: var(--sidebar-w);
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
      transition: width 0.3s ease;
    }

    .sidebar.collapsed { width: 36px; }

    .sidebar-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: row-reverse;
      padding: 10px 12px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px 10px 0 0;
      cursor: pointer;
      font-size: 0.7rem;
      letter-spacing: 0.05em;
      color: var(--text);
      user-select: none;
      white-space: nowrap;
      overflow: hidden;
    }

    .sidebar-toggle:hover { color: var(--text); }

    .sidebar-arrow {
      font-size: 0.8rem;
      transition: transform 0.3s;
      flex-shrink: 0;
    }

    /* expanded: ▶ on left; collapsed: ◀ on left */
    .sidebar.collapsed .sidebar-arrow { transform: none; }

    .sidebar-body {
      background: var(--surface);
      border: 1px solid var(--border);
      border-top: none;
      border-radius: 0 0 10px 10px;
      overflow: hidden;
      transition: max-height 0.3s ease, opacity 0.25s ease;
      max-height: 600px;
      opacity: 1;
    }

    .sidebar.collapsed .sidebar-body { max-height: 0; opacity: 0; }
    .sidebar.collapsed .sidebar-toggle { border-radius: 10px; }
    .sidebar.collapsed #sidebar-toggle-label { display: none; }
    .sidebar.collapsed #deuce-sidebar-toggle-label { display: none; }
    .sidebar.collapsed #copy-history-solo { display: none; }
    .sidebar.collapsed #copy-history-deuce { display: none; }

    .sidebar-title {
      padding: 10px 12px 6px;
      font-size: 0.7rem;
      letter-spacing: 0.05em;
      color: var(--text-dim);
      border-bottom: 1px solid var(--border);
    }

    .history-list {
      max-height: 480px;
      overflow-y: auto;
    }

    .history-row {
      display: flex;
      flex-direction: column;
      padding: 8px 12px;
      border-bottom: 1px solid var(--border);
      gap: 3px;
    }
    .history-row:last-child { border-bottom: none; }

    .history-eq {
      font-family: 'Space Mono', monospace;
      font-size: 0.82rem;
      color: var(--text);
    }

    .history-meta {
      display: flex;
      justify-content: space-between;
      font-size: 0.7rem;
      color: var(--text-dim);
    }

    .history-step-label { font-family: 'Space Mono', monospace; }

    .feedback-tag {
      font-size: 0.68rem;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 4px;
      letter-spacing: 0.04em;
    }

    .fb-best      { background: rgba(128,255,64,0.1);  color: #80ff40; }
    .fb-inaccuracy{ background: rgba(255,255,64,0.1);  color: #ffff40; }
    .fb-mistake   { background: rgba(255,128,64,0.1);  color: #ff8040; }
    .fb-blunder   { background: rgba(255,0,64,0.1);    color: #ff0040; }
    .fb-omegapunt { background: rgba(128,0,128,0.1);   color: #800080; }

    /* ── Top bar ── */
    .top-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .top-stats { display: flex; gap: 16px; align-items: center; }

    .stat-pill { display: flex; flex-direction: column; gap: 2px; }
    .stat-pill .label {
      font-size: 0.65rem; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--text-dim);
    }
    .stat-pill .value {
      font-family: 'Space Mono', monospace;
      font-size: 1.1rem; font-weight: 700; color: var(--text);
    }
    .stat-pill .value.accent { color: var(--accent); }

    .top-buttons { display: flex; gap: 8px; align-items: center; }

    .icon-btn {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 7px 12px;
      font-size: 0.78rem; color: var(--text-dim);
      cursor: pointer; font-family: 'Space Grotesk', sans-serif;
      transition: all 0.15s;
    }
    .icon-btn:hover { border-color: var(--muted); color: var(--text); }

    /* ── Mode switcher ── */
    .mode-switcher {
      display: flex;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .mode-btn {
      flex: 1;
      padding: 7px 10px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.75rem; font-weight: 600;
      color: var(--text-dim);
      background: transparent; border: none;
      cursor: pointer; transition: all 0.15s;
      border-right: 1px solid var(--border);
      white-space: nowrap;
    }
    .mode-btn:last-child { border-right: none; }
    .mode-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); }
    .mode-btn.active { color: #000; background: var(--accent); font-weight: 700; }

    /* ── Main game area ── */
    .game-area {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 24px;
      overflow-x: hidden;
    }

    .col-headers {
      display: grid;
      grid-template-columns: 100px 56px 100px 56px 100px;
      margin-bottom: 6px;
      padding: 0 2px;
    }

    .col-hdr {
      font-size: 0.65rem; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--text-dim);
    }

    .strip-viewport { overflow: hidden; position: relative; height: 80px; }

    .strip-track {
      display: flex;
      align-items: center;
      height: 80px;
      position: absolute; top: 0; left: 0;
      will-change: transform;
    }

    .strip-cell {
      display: flex; align-items: center; height: 80px;
      font-family: 'Space Mono', monospace; font-weight: 700; flex-shrink: 0;
    }

    .cell-n      { width:100px; font-size:3.2rem; color:var(--text); justify-content:flex-start; }
    .cell-op     { width:56px;  font-size:2.6rem; justify-content:center; opacity:0; transition:opacity 0.2s; }
    .cell-op.show{ opacity:1; }
    .cell-k      { width:100px; font-size:3.2rem; color:var(--text); justify-content:center; }
    .cell-eq     { width:56px;  font-size:2.6rem; color:var(--text-dim); justify-content:center; opacity:0; transition:opacity 0.2s 0.05s; }
    .cell-eq.show{ opacity:1; }
    .cell-result { width:100px; font-size:3.2rem; color:var(--accent); justify-content:flex-start; opacity:0; transition:opacity 0.2s 0.1s; }
    .cell-result.show { opacity:1; }
    .cell-result.bust { color: var(--danger) !important; }

    .cell-op.add-color { color: var(--cyan); }
    .cell-op.mul-color { color: var(--magenta); }
    .cell-op.div-color { color: var(--yellow); }

    /* ── Op buttons ── */
    .ops-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 12px; margin-top: 20px;
    }

    .op-btn {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      height: 88px; border: none; border-radius: 14px;
      cursor: pointer;
      font-family: 'Space Mono', monospace;
      font-size: 2.4rem; font-weight: 700;
      transition: transform 0.1s ease, filter 0.15s ease, opacity 0.2s, background 0.2s;
      color: #000; position: relative;
    }

    .op-btn:active:not(:disabled) { transform: scale(0.94); }
    .op-btn.add-btn { background: var(--cyan); }
    .op-btn.mul-btn { background: var(--magenta); }
    .op-btn.div-btn { background: var(--yellow); }
    .op-btn.div-btn.unavailable { background: #3a3a44; color: #888; }
    .op-btn.add-btn.unavailable { background: #3a3a44; color: #888; }
    .op-btn.mul-btn.unavailable { background: #3a3a44; color: #888; }

    .op-btn:disabled { opacity: 0.3; cursor: not-allowed; filter: grayscale(0.4); }
    .op-btn:not(:disabled):hover { filter: brightness(1.12); transform: translateY(-2px); }

    /* keep symbol vertically centered regardless of prob badge presence */
    .op-symbol {
      display: flex; align-items: center; justify-content: center;
      font-size: 2.4rem; font-weight: 700; line-height: 1;
      height: 44px;
    }

    .op-prob {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.65rem; font-weight: 600;
      margin-top: 4px;
      background: rgba(0,0,0,0.18);
      border-radius: 999px; padding: 1px 7px; color: #000;
    }

    .op-prob.zero { background: rgba(0,0,0,0.2); color: #000; }

    /* hotkey hint */
    .op-hint {
      position: absolute; bottom: 7px; right: 9px;
      font-family: 'Space Mono', monospace;
      font-size: 0.6rem; color: rgba(0,0,0,0.4);
    }

    /* ── Feedback banner ── */
    .feedback-banner {
      min-height: 32px;
      border-radius: 8px;
      padding: 7px 14px;
      font-size: 0.82rem;
      line-height: 1.4;
      display: none;
    }

    .feedback-banner.show { display: block; }
    .feedback-banner.fb-best-bg       { background: rgba(128,255,64,0.1);  border: 1px solid rgba(128,255,64,0.1);  color: #80ff40; }
    .feedback-banner.fb-inaccuracy-bg { background: rgba(255,255,64,0.1);  border: 1px solid rgba(255,255,64,0.1);  color: #ffff40; }
    .feedback-banner.fb-mistake-bg    { background: rgba(255,128,64,0.1);  border: 1px solid rgba(255,128,64,0.1);  color: #ff8040; }
    .feedback-banner.fb-blunder-bg    { background: rgba(255,0,64,0.1);    border: 1px solid rgba(255,0,64,0.1);    color: #ff0040; }
    .feedback-banner.fb-omegapunt-bg  { background: rgba(128,0,128,0.1);   border: 1px solid rgba(128,0,128,0.1);   color: #800080; }

    /* ── Overlay ── */
    .overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.75); z-index: 100;
      align-items: center; justify-content: center;
    }
    .overlay.show { display: flex; }

    .overlay-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 20px; padding: 40px 36px;
      text-align: center; max-width: 360px; width: 90%;
    }

    .overlay-emoji { font-size: 2.8rem; margin-bottom: 14px; }
    .overlay-title { font-family: 'Space Mono', monospace; font-size: 1.7rem; font-weight: 700; margin-bottom: 10px; }
    .overlay-title.win  { color: var(--accent); }
    .overlay-title.loss { color: var(--danger); }
    .overlay-sub { color: var(--text-dim); font-size: 0.88rem; margin-bottom: 26px; line-height: 1.6; }

    .play-again-btn {
      background: var(--accent); color: #000; border: none; border-radius: 10px;
      padding: 13px 30px; font-family: 'Space Grotesk', sans-serif;
      font-size: 1rem; font-weight: 700; cursor: pointer; transition: opacity 0.15s;
    }
    .play-again-btn:hover { opacity: 0.85; }

    /* ── Start screen ── */
    #start-screen { text-align: center; padding: 0; max-width: 520px; width: 100%; margin-top: 46px; }

    .rules-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; padding: 22px; text-align: left; margin-bottom: 24px;
    }
    .rules-card h3 {
      font-family: 'Space Mono', monospace; font-size: 0.75rem;
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px;
    }
    
    .rules-card ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .rules-card li { display: flex; gap: 10px; font-size: 0.88rem; line-height: 1.5; color: var(--text); align-items: baseline; }
    .rules-card li::before { content: '→'; color: var(--accent); font-family: 'Space Mono', monospace; flex-shrink: 0; }

    .start-btn {
      background: var(--accent); color: #000; border: none; border-radius: 10px;
      padding: 15px 44px; font-family: 'Space Grotesk', sans-serif;
      font-size: 1.05rem; font-weight: 700; cursor: pointer; transition: opacity 0.15s;
    }
    .start-btn:hover { opacity: 0.85; }

    #game-screen { display: none; width: 100%; max-width: 800px; margin-top: 14px; }

    /* ── Rules modal ── */
    .rules-modal {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.75); z-index: 200;
      align-items: center; justify-content: center;
    }
    .rules-modal.show { display: flex; }

    .modal-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 20px; padding: 24px; max-width: 560px; width: 92%;
      max-height: 90vh; overflow-y: auto;
    }

    .modal-card h2 {
      font-family: 'Space Mono', monospace; font-size: 1.2rem;
      color: var(--accent); margin-bottom: 18px;
    }
    

    .rules-modal-card h2 {
      font-family: 'Space Mono', monospace; font-size: 1rem;
      letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px;
    }
    .modal-card ul { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 0; }
    .modal-card li { display: flex; gap: 10px; font-size: 0.88rem; line-height: 1.55; color: var(--text); align-items: baseline; }
    .modal-card li::before { content: '→'; color: var(--accent); font-family: 'Space Mono', monospace; flex-shrink: 0; }


    .roll-label-text { transition: color 0.2s; }

    /* ── Toggle switch ── */
    .toggle-switch {
      width: 32px; height: 18px;
      background: var(--border);
      border-radius: 999px;
      position: relative;
      transition: background 0.2s;
      flex-shrink: 0;
    }
    .toggle-switch.on { background: var(--accent); }
    .toggle-knob {
      width: 12px; height: 12px;
      background: #fff;
      border-radius: 50%;
      position: absolute;
      top: 3px; left: 3px;
      transition: left 0.2s;
    }
    .toggle-switch.on .toggle-knob { left: 17px; }


    /* ── Tab navigation ── */
    .tab-nav-bar {
      width: calc(100% + 40px);
      margin-left: -20px;
      margin-right: -20px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: center;
      margin-bottom: 32px;
      position: sticky;
      top: 0;
      z-index: 50;
    }

    .tab-nav {
      display: flex;
      gap: 0;
    }

    .tab-btn {
      width: 120px;
      padding: 12px 0;
      text-align: center;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.9rem; font-weight: 600;
      color: var(--text-dim);
      background: transparent; border: none;
      border-bottom: 3px solid transparent;
      cursor: pointer; transition: all 0.15s;
      letter-spacing: 0.05em;
      margin-bottom: -1px;
    }

    .tab-btn:hover { color: var(--text); }
    .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

    /* 700px–999px: tabs left-aligned */
    @media (min-width: 700px) and (max-width: 999px) {
      .tab-nav-bar { justify-content: flex-start; }
    }

    /* ≥1000px: tabs centered (default) */
    @media (min-width: 1000px) {
      .tab-nav-bar { justify-content: center; }
    }

    /* ── Study tab ── */
    #study-screen {
      display: none;
      width: 100%;
      max-width: 1000px;
    }

    .study-controls {
      display: flex;
      gap: 12px;
      align-items: flex-end;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    .study-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .study-field label {
      font-size: 0.7rem;
      letter-spacing: 0.05em;
      color: var(--text-dim);
    }

    .study-field-row {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .study-select {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.9rem;
      padding: 7px 10px;
      cursor: pointer;
      width: 80px;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888899'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 8px center;
      padding-right: 24px;
    }

    .study-select:focus { outline: 1px solid var(--accent); }

    .clear-btn {
      background: var(--border);
      border: none;
      border-radius: 6px;
      color: var(--text-dim);
      font-size: 0.75rem;
      padding: 4px 8px;
      cursor: pointer;
      font-family: 'Space Grotesk', sans-serif;
      transition: all 0.15s;
    }

    .clear-btn:hover { background: var(--muted); color: var(--text); }

    .study-error {
      color: var(--danger);
      font-size: 0.85rem;
      margin-bottom: 12px;
    }

    /* Study table */
    .study-table-outer {
      overflow-x: auto;
      max-width: 100%;
      border-left: 1px solid var(--border);
    }

    .study-table-wrap {
      display: inline-block;
      min-width: 0;
    }

    .study-table {
      border-collapse: separate;
      border-spacing: 0;
      font-family: 'Space Mono', monospace;
      font-size: 0.75rem;
      width: auto;
      table-layout: fixed;
      border-top: 1px solid var(--border);
    }

    .study-table td, .study-table th { min-width: 100px; width: 100px; }
    .study-table th.row-header, .study-table td.row-header { min-width: 32px; width: 32px; }
    .study-table .label-col { min-width: 90px; width: 90px; }


    .study-table th {
      background: var(--surface);
      color: #ffffff;
      font-size: 0.65rem;
      letter-spacing: 0.06em;
      padding: 0 10px;
      text-align: center;
      border-bottom: 1px solid var(--border);
      border-right: 1px solid var(--border);
      white-space: nowrap;
      position: sticky;
      top: 0;
      z-index: 1;
      height: 32px;
      line-height: 32px;
      box-sizing: border-box;
    }

    .study-table th.row-header {
      text-align: left;
      position: sticky;
      left: 0;
      top: 0;
      z-index: 3;
      background: var(--surface);
    }

    .study-table th.diag-header {
      position: sticky;
      left: 0;
      top: 0;
      z-index: 3;
      background: var(--surface);
    }

    .study-table td {
      padding: 0 8px;
      text-align: center;
      border-bottom: 1px solid var(--border);
      border-right: 1px solid var(--border);
      white-space: nowrap;
      height: 32px;
      line-height: 32px;
      box-sizing: border-box;
    }

    .study-table td.row-header {
      text-align: left;
      color: var(--text-dim);
      background: var(--surface);
      position: sticky;
      left: 0;
      font-size: 0.7rem;
    }

    .study-table td.best-move {
      font-weight: 700;
      color: var(--text);
    }

    .study-table td.not-best {
      color: var(--text-dim);
    }

    .study-table td.na {
      color: var(--border);
    }

    .study-pre-roll {
      margin-bottom: 16px;
      font-size: 0.9rem;
      color: var(--text-dim);
    }

    .study-pre-roll strong {
      color: var(--accent);
      font-family: 'Space Mono', monospace;
    }
    @media (max-width: 699px) {
      .sidebar { display: none !important; }
      .top-buttons { gap: 5px; }
      .mode-btn { padding: 6px 7px; font-size: 0.7rem; }
      .icon-btn { padding: 5px 8px; font-size: 0.85rem; }
      .study-field label { font-size: 0.6rem; }
      .study-select { width: 48px; font-size: 0.75rem; padding: 5px 16px 5px 5px; }
      .study-controls { gap: 6px; }
      .clear-btn { padding: 3px 6px; font-size: 0.7rem; }
      .tab-nav-bar { flex-direction: column !important; align-items: center; }
      .auth-bar {
        position: static !important;
        transform: none !important;
        padding: 6px 0 8px;
        justify-content: center;
        border-top: 1px solid var(--border);
        width: 100%;
      }
    }

    .bottom-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .auth-bar {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      gap: 8px;
      padding-right: 16px;
    }

    .auth-btn {
      background: none;
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-dim);
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.78rem;
      padding: 5px 12px;
      cursor: pointer;
      transition: all 0.15s;
      white-space: nowrap;
    }
    .auth-btn:hover { color: var(--text); border-color: var(--text-dim); }
    .auth-btn.accent { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 600; }
    .auth-btn.accent:hover { opacity: 0.85; }

    .username-pill {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.78rem;
      color: var(--accent);
      font-weight: 600;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
    }
    .username-pill:hover { opacity: 0.8; }

    /* ── Auth / Profile / Leaderboard modals ── */
    .auth-modal-inner {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 20px;
    }

    .auth-input {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.9rem;
      padding: 9px 12px;
      width: 100%;
      box-sizing: border-box;
    }
    .auth-input:focus { outline: 1px solid var(--accent); }

    .auth-error {
      color: var(--danger);
      font-size: 0.8rem;
      min-height: 1.1em;
    }

    .auth-submit-btn {
      background: var(--accent);
      border: none;
      border-radius: 8px;
      color: #000;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.9rem;
      font-weight: 700;
      padding: 10px;
      cursor: pointer;
      width: 100%;
      transition: opacity 0.15s;
    }
    .auth-submit-btn:hover { opacity: 0.85; }

    .auth-switch {
      text-align: center;
      font-size: 0.8rem;
      color: var(--text-dim);
      margin-top: 4px;
    }
    .auth-switch a {
      color: var(--accent);
      cursor: pointer;
      text-decoration: none;
    }
    .auth-switch a:hover { opacity: 0.8; }

    /* Profile stats grid */
    .profile-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 20px;
    }
    .profile-stat {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 14px;
    }
    .profile-stat-label {
      font-size: 0.68rem;
      color: var(--text-dim);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .profile-stat-value {
      font-family: 'Space Mono', monospace;
      font-size: 1rem;
      color: var(--text);
      font-weight: 700;
    }

    /* Leaderboard table */
    .lb-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.82rem;
    }
    .lb-table th {
      text-align: left;
      color: var(--text-dim);
      font-size: 0.68rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 6px 10px;
      border-bottom: 1px solid var(--border);
    }
    .lb-table td {
      padding: 8px 10px;
      border-bottom: 1px solid var(--border);
      color: var(--text);
      font-family: 'Space Mono', monospace;
    }
    .lb-table tr.me td { color: var(--accent); }
    .lb-table td:first-child { font-family: 'Space Grotesk', sans-serif; }

    /* Rating change on overlay */
    .overlay-rating {
      font-size: 0.82rem;
      color: var(--text-dim);
      margin-bottom: 24px;
      font-family: 'Space Mono', monospace;
    }
    .overlay-wp-loss {
      font-size: 0.82rem;
      color: var(--text-dim);
      margin-bottom: 24px;
      font-family: 'Space Mono', monospace;
    }
    .fb-tag { display:inline-block; font-weight:700; }