/* ============================================
   Game Report — Lumichess
   Complete CSS for the 3-panel game report page
   ============================================ */

/* -------------------------
   CSS Variables
   ------------------------- */
:root {
    --gr-bg: #0f0f0d;
    --gr-card: #141412;
    --gr-card-raised: #1a1a17;
    --gr-border: rgba(255, 255, 255, 0.06);
    --gr-border-strong: rgba(255, 255, 255, 0.1);
    --gr-text: rgba(255, 255, 255, 0.9);
    --gr-text-secondary: rgba(255, 255, 255, 0.75);
    --gr-text-dim: rgba(255, 255, 255, 0.35);
    --gr-text-dimmest: rgba(255, 255, 255, 0.22);

    /* Canonical SVG-badge hex values — keep in sync with
       src/classification/MoveClassifier.js. */
    --gr-brilliant:  #a358d0;
    --gr-great:      #3b87c8;
    --gr-best:       #5ba829;
    --gr-bestmove:   #5ba829;
    --gr-excellent:  #6eaf20;
    --gr-good:       #73a45a;
    --gr-book:       #c49a2a;
    --gr-bookmove:   #c49a2a;
    --gr-forced:     #73a491;
    --gr-inaccuracy: #e8ba02;
    --gr-mistake:    #e5820d;
    --gr-blunder:    #cf3120;
    --gr-missed:     #d45959;

    --gr-blue-accent: #5ba3cf;
    --gr-green-tint: rgba(129, 182, 76, 0.08);
    --gr-green-border: rgba(129, 182, 76, 0.4);

    --gr-eval-white: #e8e8e5;
    --gr-eval-black: #2a2a28;

    --gr-radius: 8px;
    --gr-radius-sm: 6px;
    --gr-radius-xs: 4px;
    --gr-radius-pill: 100px;

    /* Section Box System */
    --section-bg-primary: #1a1a17;
    --section-bg-default: #151513;
    --section-bg-context: #121210;
    --section-border: rgba(255, 255, 255, 0.05);
    --section-radius: 10px;
    --section-padding: 14px;
    --section-gap: 10px;
}

/* -------------------------
   Section Box Base
   ------------------------- */
.gr-section-header {
    font-size: 11px;
    font-weight: 600;
    color: var(--gr-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    user-select: none;
    margin: 0 0 12px 0;
    padding: 0;
}

/* -------------------------
   Layout
   ------------------------- */
.gr-layout {
    display: flex;
    gap: 16px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 8px 24px 8px 32px;
    height: calc(100vh - 48px);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.gr-layout.gr-layout--visible {
    opacity: 1;
}

.gr-left {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: var(--section-gap);
}

.gr-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    min-height: 0;
    justify-content: center;
    gap: 2px;
}

.gr-right {
    width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: var(--section-gap);
    padding: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

/* -------------------------
   Game Header (.gr-game)
   ------------------------- */
.gr-game {
    background: var(--section-bg-context);
    border: 1px solid var(--section-border);
    border-radius: var(--section-radius);
    padding: var(--section-padding);
}

.gr-game__result {
    margin-bottom: 8px;
}

.gr-game__badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--gr-radius-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(255, 255, 255, 0.08);
    color: var(--gr-text);
}

.gr-game__badge--white-win {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.gr-game__badge--black-win {
    background: rgba(255, 255, 255, 0.06);
    color: var(--gr-text-secondary);
}

.gr-game__badge--draw {
    background: rgba(255, 255, 255, 0.06);
    color: var(--gr-text-dim);
}

.gr-game__result-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--gr-text);
}

.gr-game__result--won { color: #81b64c; }
.gr-game__result--lost { color: #d03030; }
.gr-game__result--draw { color: var(--gr-text-dim); }

.gr-game__result-reason {
    font-size: 12px;
    color: var(--gr-text-dim);
    margin-left: 6px;
}

.gr-game__opening {
    font-size: 13px;
    color: var(--gr-text-secondary);
    margin-bottom: 10px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gr-game__players {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 8px;
}

.gr-game__player {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: var(--gr-text);
}

.gr-game__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gr-game__dot--white {
    background: #e8e8e5;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.gr-game__dot--black {
    background: #3a3a38;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.gr-game__name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gr-game__rating {
    color: var(--gr-text-dim);
    font-size: 13px;
    flex-shrink: 0;
}

.gr-game__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--gr-text-dimmest);
}

.gr-game__separator {
    font-size: 10px;
}

/* -------------------------
   Eval Graph
   ------------------------- */
.gr-eval-graph {
    width: 100%;
    background: var(--section-bg-default);
    border: 1px solid var(--section-border);
    border-radius: var(--section-radius);
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}

.gr-eval-graph .gr-section-header {
    padding: 12px 14px 0;
    margin-bottom: 8px;
}

.gr-eval-graph canvas {
    width: 100%;
    height: 130px;
    display: block;
}

/* -------------------------
   Move List
   ------------------------- */
.gr-moves {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--section-bg-default);
    border: 1px solid var(--section-border);
    border-radius: var(--section-radius);
}

.gr-moves .gr-section-header {
    padding: 12px 14px 0;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.gr-moves__list {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 4px;
    mask-image: linear-gradient(to bottom, transparent, black 6px, black calc(100% - 6px), transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 6px, black calc(100% - 6px), transparent);
}

/* Custom thin scrollbar */
.gr-moves__list::-webkit-scrollbar {
    width: 4px;
}

.gr-moves__list::-webkit-scrollbar-track {
    background: transparent;
}

.gr-moves__list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
}

.gr-moves__list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Move row */
.gr-move-row {
    display: grid;
    grid-template-columns: 32px 1fr 1fr;
    align-items: center;
    height: 32px;
    font-size: 13px;
    cursor: pointer;
    border-left: 2px solid transparent;
    padding: 0 6px 0 4px;
    border-radius: 0 var(--gr-radius-xs) var(--gr-radius-xs) 0;
    transition: background 0.1s ease;
}

.gr-move-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.gr-move-row.gr-move-row--selected {
    background: var(--gr-green-tint);
    border-left-color: var(--gr-green-border);
}

.gr-move-row__num {
    color: var(--gr-text-dimmest);
    font-size: 12px;
    text-align: center;
    user-select: none;
}

.gr-move-row__white,
.gr-move-row__black {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: var(--gr-radius-xs);
    color: var(--gr-text);
    transition: background 0.1s ease;
}

.gr-move-row__white:hover,
.gr-move-row__black:hover {
    background: rgba(255, 255, 255, 0.04);
}

.gr-move-row__white.gr-move--selected,
.gr-move-row__black.gr-move--selected {
    background: var(--gr-green-tint);
}

.gr-move-row__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.gr-move-row__icon img {
    width: 100%;
    height: 100%;
}

/* Move cells generated by JS */
.gr-move {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--gr-text);
    cursor: pointer;
    transition: background 0.1s ease;
    font-size: 13px;
}

.gr-move:hover {
    background: rgba(255, 255, 255, 0.04);
}

.gr-move--active {
    background: var(--gr-green-tint) !important;
}

.gr-move--active.gr-move--blunder { background: rgba(208, 48, 48, 0.1) !important; }
.gr-move--active.gr-move--mistake { background: rgba(232, 112, 64, 0.1) !important; }
.gr-move--active.gr-move--inaccuracy { background: rgba(240, 160, 48, 0.1) !important; }
.gr-move--active.gr-move--brilliant { background: rgba(163, 88, 208, 0.1) !important; }

.gr-move__num {
    color: var(--gr-text-dimmest);
    font-size: 12px;
    text-align: center;
    user-select: none;
    min-width: 28px;
}

.gr-move__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Classification color tinting for moves */
.gr-move--inaccuracy { color: var(--gr-inaccuracy); }
.gr-move--mistake { color: var(--gr-mistake); }
.gr-move--blunder { color: var(--gr-blunder); }
.gr-move--brilliant { color: var(--gr-brilliant); }

/* -------------------------
   Board Area
   ------------------------- */
.gr-board-wrapper {
    display: flex;
    align-items: stretch;
    gap: 2px;
    position: relative;
    max-width: 100%;
    width: 100%;
    flex: 1;
    min-height: 0;
}

.gr-board {
    aspect-ratio: 1;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    position: relative;
    background: #161614;
    border-radius: var(--gr-radius-sm);
    overflow: hidden;
}

.gr-board #game-board {
    width: 100%;
    height: 100%;
}

/* -------------------------
   Eval Bar
   ------------------------- */
.gr-eval-bar {
    width: 28px;
    flex-shrink: 0;
    border-radius: 3px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-right: 0;
    background: var(--gr-eval-black);
}

.gr-eval-bar--flipped {
    flex-direction: column-reverse;
}

.gr-eval-bar__black {
    background: var(--gr-eval-black);
    transition: flex-grow 0.4s ease;
    flex: 1 1 0%;
    border-radius: 3px 3px 0 0;
}

.gr-eval-bar__white {
    background: var(--gr-eval-white);
    transition: flex-grow 0.4s ease;
    flex: 1 1 0%;
    border-radius: 0 0 3px 3px;
}

.gr-eval-bar__label {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: 700;
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
    padding: 2px 4px;
    border-radius: 3px;
    line-height: 1;
    transition: top 0.4s ease;
    background: rgba(30, 30, 28, 0.85);
    color: rgba(255, 255, 255, 0.9);
}

/* -------------------------
   Player Bars
   ------------------------- */
.gr-player-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    flex-shrink: 0;
    width: 100%;
    padding: 0 0 0 30px; /* offset past eval bar (28px) + gap (2px) */
}

.gr-player-bar__info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.gr-player-bar__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gr-player-bar__dot--white {
    background: #e8e8e5;
}

.gr-player-bar__dot--black {
    background: #3a3a38;
}

.gr-player-bar__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--gr-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gr-player-bar__accuracy {
    font-size: 12px;
    color: var(--gr-text-dim);
    padding: 2px 8px;
    border-radius: var(--gr-radius-pill);
    background: rgba(255, 255, 255, 0.04);
}

.gr-player-bar__clock {
    font-size: 14px;
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    color: var(--gr-text-secondary);
    background: rgba(255, 255, 255, 0.04);
    padding: 4px 10px;
    border-radius: var(--gr-radius-xs);
    letter-spacing: 0.03em;
}

.gr-player-bar__material {
    display: flex;
    align-items: center;
    gap: 1px;
    margin-left: auto;
    margin-right: 8px;
}

.gr-player-bar__material img {
    opacity: 0.7;
}

.gr-player-bar__material-diff {
    font-size: 11px;
    color: var(--gr-text-dim);
    margin-left: 3px;
}

/* ── Analysis Progress (inline) ────────────── */

.gr-analysis-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0 6px 30px;
    flex-shrink: 0;
}

.gr-analysis-progress__bar {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.gr-analysis-progress__bar::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--progress, 0%);
    background: var(--gr-accent, #FFBF00);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.gr-analysis-progress__text {
    font-size: 11px;
    color: var(--gr-text-dim);
    white-space: nowrap;
}

.gr-analysis-progress--done {
    opacity: 0.5;
    transition: opacity 0.5s ease;
}

/* -------------------------
   Nav Controls
   ------------------------- */
.gr-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 4px 0;
    height: 44px;
    flex-shrink: 0;
}

.gr-nav__group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.gr-nav__btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gr-border-strong);
    border-radius: var(--gr-radius-sm);
    background: transparent;
    color: var(--gr-text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    padding: 0;
}

.gr-nav__btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--gr-text);
    border-color: rgba(255, 255, 255, 0.15);
}

.gr-nav__btn:active {
    background: rgba(255, 255, 255, 0.1);
}

.gr-nav__btn.gr-btn--active {
    background: rgba(129, 182, 76, 0.12);
    border-color: rgba(129, 182, 76, 0.3);
    color: #81b64c;
}

.gr-nav__btn--play {
    width: 40px;
    height: 40px;
}

.gr-nav__btn--flip {
    margin-left: 8px;
}

.gr-nav__btn:disabled,
.gr-nav__btn[disabled] {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* -------------------------
   Insight Card
   ------------------------- */
.gr-insight {
    background: var(--section-bg-primary);
    border: 1px solid var(--section-border);
    border-radius: var(--section-radius);
    padding: 16px;
    min-height: 140px;
    flex-shrink: 0;
    transition: border-color 0.2s ease;
}

.gr-insight__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.gr-insight__badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--gr-radius-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background: var(--gr-best);
}

.gr-insight__badge--best { background: var(--gr-best); }
.gr-insight__badge--excellent { background: var(--gr-excellent); }
.gr-insight__badge--good { background: var(--gr-good); }
.gr-insight__badge--book { background: var(--gr-book); }
.gr-insight__badge--inaccuracy { background: var(--gr-inaccuracy); }
.gr-insight__badge--mistake { background: var(--gr-mistake); }
.gr-insight__badge--blunder { background: var(--gr-blunder); }
.gr-insight__badge--brilliant { background: var(--gr-brilliant); }
.gr-insight__badge--forced { background: var(--gr-forced); }

.gr-insight__move-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--gr-text);
}

.gr-insight__eval-delta {
    font-size: 13px;
    color: var(--gr-text-dim);
    margin-bottom: 10px;
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
}

.gr-insight__text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--gr-text-secondary);
    margin: 0 0 12px 0;
}

.gr-insight__best-move {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--gr-border);
}

.gr-insight__best-label {
    font-size: 12px;
    color: var(--gr-text-dim);
}

.gr-insight__best-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--gr-blue-accent);
}

/* Insight card classification border glow */
.gr-insight--inaccuracy { border-color: rgba(240, 160, 48, 0.3); }
.gr-insight--mistake { border-color: rgba(232, 112, 64, 0.3); }
.gr-insight--blunder { border-color: rgba(208, 48, 48, 0.3); }
.gr-insight--brilliant { border-color: rgba(163, 88, 208, 0.3); }
.gr-insight--great { border-color: rgba(56, 165, 255, 0.25); }
.gr-insight--best { border-color: rgba(129, 182, 76, 0.2); }
.gr-insight--excellent { border-color: rgba(129, 182, 76, 0.15); }
.gr-insight--good { border-color: rgba(107, 170, 189, 0.2); }

/* Insight swap transition */
.gr-insight--entering {
    animation: grInsightIn 0.2s ease forwards;
}

@keyframes grInsightIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* -------------------------
   Engine Lines
   ------------------------- */
.gr-engine {
    background: var(--section-bg-default);
    border: 1px solid var(--section-border);
    border-radius: var(--section-radius);
    padding: 0;
    flex-shrink: 0;
}

.gr-engine__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.gr-engine__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--gr-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.gr-engine__depth {
    font-size: 11px;
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    color: var(--gr-text-dimmest);
}

.gr-engine__lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gr-engine__line {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 28px;
}

.gr-engine__eval {
    font-size: 12px;
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    font-weight: 600;
    color: var(--gr-text);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: var(--gr-radius-xs);
    min-width: 48px;
    text-align: center;
    flex-shrink: 0;
}

.gr-engine__pv {
    font-size: 12px;
    color: var(--gr-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* -------------------------
   Report Section
   ------------------------- */
.gr-report {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    min-height: 0;
}

.gr-report__heading {
    display: none; /* replaced by section headers in HTML */
}

/* -------------------------
   Summary (Accuracy)
   ------------------------- */
.gr-summary {
    background: var(--section-bg-primary);
    border: 1px solid var(--section-border);
    border-radius: var(--section-radius);
    padding: 0;
    overflow: hidden;
}

.gr-summary__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.gr-summary__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.gr-summary__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.gr-summary__dot--white {
    background: #e8e8e5;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.gr-summary__dot--black {
    background: #3a3a38;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.gr-summary__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--gr-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
}

.gr-summary__accuracy-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--gr-text);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.gr-summary__accuracy-label {
    font-size: 11px;
    color: var(--gr-text-dimmest);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

.gr-summary__classifications {
    width: 100%;
}

/* Classification row */
.gr-class-row {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 4px;
    border-radius: var(--gr-radius-xs);
    transition: background 0.1s ease;
}

.gr-class-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.gr-class-row__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.gr-class-row__icon img {
    width: 100%;
    height: 100%;
}

.gr-class-row__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gr-class-row__dot--best { background: var(--gr-best); }
.gr-class-row__dot--excellent { background: var(--gr-excellent); }
.gr-class-row__dot--good { background: var(--gr-good); }
.gr-class-row__dot--book { background: var(--gr-book); }
.gr-class-row__dot--inaccuracy { background: var(--gr-inaccuracy); }
.gr-class-row__dot--mistake { background: var(--gr-mistake); }
.gr-class-row__dot--blunder { background: var(--gr-blunder); }
.gr-class-row__dot--brilliant { background: var(--gr-brilliant); }
.gr-class-row__dot--forced { background: var(--gr-forced); }

.gr-class-row__label {
    font-size: 12px;
    color: var(--gr-text-secondary);
    flex: 1;
    min-width: 0;
}

.gr-class-row__count {
    font-size: 13px;
    font-weight: 600;
    color: var(--gr-text);
    min-width: 16px;
    text-align: right;
}

/* -------------------------
   Key Moments
   ------------------------- */
.gr-moments {
    background: var(--section-bg-primary);
    border: 1px solid var(--section-border);
    border-radius: var(--section-radius);
    padding: 0;
    overflow: hidden;
}

.gr-moments__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gr-moment-card {
    background: var(--gr-card-raised);
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius-sm);
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.gr-moment-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--gr-border-strong);
}

.gr-moment-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.gr-moment-card__badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--gr-radius-pill);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

.gr-moment-card__move-num {
    font-size: 12px;
    color: var(--gr-text-dim);
}

.gr-moment-card__desc {
    font-size: 13px;
    color: var(--gr-text-secondary);
    line-height: 1.45;
}

/* -------------------------
   Phase Accuracy
   ------------------------- */
.gr-phases {
    background: var(--section-bg-default);
    border: 1px solid var(--section-border);
    border-radius: var(--section-radius);
    padding: 0;
    overflow: hidden;
}

.gr-phases__chart {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

.gr-phase-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gr-phase-row__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gr-phase-row__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gr-text-secondary);
}

.gr-phase-row__values {
    display: flex;
    gap: 12px;
    font-size: 12px;
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
}

.gr-phase-row__val {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--gr-text-secondary);
}

.gr-phase-row__val-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.gr-phase-row__val-dot--white {
    background: #e8e8e5;
}

.gr-phase-row__val-dot--black {
    background: #555;
}

.gr-phase-row__bars {
    display: flex;
    gap: 4px;
    height: 8px;
}

.gr-phase-row__bar {
    flex: 1;
    height: 100%;
    border-radius: 4px;
    background: var(--gr-eval-black);
    overflow: hidden;
    position: relative;
}

.gr-phase-row__bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.gr-phase-row__bar--white .gr-phase-row__bar-fill {
    background: #e8e8e5;
}

.gr-phase-row__bar--black .gr-phase-row__bar-fill {
    background: #888;
}

/* -------------------------
   Loading State
   ------------------------- */
.gr-loading {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gr-bg);
    z-index: 100;
    transition: opacity 0.3s ease;
}

.gr-loading--hidden {
    opacity: 0;
    pointer-events: none;
}

.gr-loading__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.gr-loading__icon {
    color: var(--gr-text-dim);
    animation: grLoadingSpin 2s linear infinite;
}

@keyframes grLoadingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.gr-loading__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--gr-text);
    margin: 0;
}

.gr-loading__progress {
    width: 240px;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.gr-loading__bar {
    width: 0%;
    height: 100%;
    background: var(--gr-best);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.gr-loading__counter {
    font-size: 13px;
    color: var(--gr-text-dimmest);
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
}

/* -------------------------
   Error State
   ------------------------- */
.gr-error {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gr-bg);
    z-index: 100;
}

.gr-error__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    max-width: 360px;
}

.gr-error__icon {
    color: var(--gr-blunder);
    margin-bottom: 4px;
}

.gr-error__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--gr-text);
    margin: 0;
}

.gr-error__message {
    font-size: 14px;
    color: var(--gr-text-secondary);
    line-height: 1.5;
    margin: 0;
}

.gr-error__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--gr-border-strong);
    border-radius: var(--gr-radius-sm);
    color: var(--gr-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
    margin-top: 8px;
}

.gr-error__btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Classification row zero state */
.gr-class-row--zero {
    opacity: 0.3;
}

/* Right panel scrollbar */
.gr-right::-webkit-scrollbar {
    width: 5px;
}

.gr-right::-webkit-scrollbar-track {
    background: transparent;
}

.gr-right::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

/* -------------------------
   Panel In Animation
   ------------------------- */
@keyframes grPanelIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gr-layout--visible .gr-left {
    animation: grPanelIn 0.3s ease 0.05s both;
}

.gr-layout--visible .gr-center {
    animation: grPanelIn 0.3s ease 0.1s both;
}

.gr-layout--visible .gr-right {
    animation: grPanelIn 0.3s ease 0.15s both;
}

/* -------------------------
   Responsive: 1200–1400px
   ------------------------- */
@media (max-width: 1400px) {
    .gr-left {
        width: 260px;
    }

    .gr-right {
        width: 320px;
    }

    .gr-layout {
        padding: 12px 16px;
        gap: 12px;
    }
}

/* -------------------------
   Responsive: 900–1200px (2-panel)
   ------------------------- */
@media (max-width: 1200px) {
    .gr-left {
        display: none;
    }

    .gr-layout {
        gap: 12px;
        padding: 12px 16px;
    }

    .gr-right {
        width: 320px;
    }

    /* Tabs for right panel content switching */
    .gr-right-tabs {
        display: flex;
        gap: 2px;
        background: rgba(255, 255, 255, 0.04);
        border-radius: var(--gr-radius-sm);
        padding: 2px;
        margin-bottom: 8px;
    }

    .gr-right-tab {
        flex: 1;
        padding: 6px 12px;
        font-size: 12px;
        font-weight: 600;
        color: var(--gr-text-dim);
        text-align: center;
        border: none;
        background: transparent;
        border-radius: var(--gr-radius-xs);
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .gr-right-tab:hover {
        color: var(--gr-text-secondary);
    }

    .gr-right-tab.gr-right-tab--active {
        background: rgba(255, 255, 255, 0.08);
        color: var(--gr-text);
    }
}

/* -------------------------
   Responsive: <900px (stacked)
   ------------------------- */
@media (max-width: 900px) {
    .gr-layout {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 48px);
        padding: 12px;
        gap: 12px;
    }

    .gr-left {
        display: flex;
        width: 100%;
        flex-shrink: 0;
        padding-bottom: 0;
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
    }

    .gr-left .gr-game {
        min-width: 200px;
        flex-shrink: 0;
    }

    .gr-left .gr-eval-graph {
        min-width: 200px;
        flex-shrink: 0;
    }

    .gr-left .gr-eval-graph canvas {
        height: 80px;
    }

    .gr-left .gr-moves {
        display: none;
    }

    .gr-center {
        width: 100%;
    }

    .gr-board-wrapper {
        max-width: 480px;
        margin: 0 auto;
    }

    .gr-board {
        max-width: 100%;
    }

    .gr-player-bar {
        max-width: 510px;
    }

    .gr-right {
        width: 100%;
        padding-top: 4px;
    }

    .gr-summary__accuracy-value {
        font-size: 26px;
    }
}

/* -------------------------
   Responsive: <600px
   ------------------------- */
@media (max-width: 600px) {
    .gr-layout {
        padding: 8px;
        gap: 8px;
    }

    .gr-left {
        flex-direction: column;
    }

    .gr-left .gr-eval-graph {
        width: 100%;
        min-width: unset;
    }

    .gr-insight {
        padding: 16px;
        min-height: 120px;
    }

    .gr-engine {
        padding: 10px 12px;
    }

    .gr-nav__btn {
        width: 32px;
        height: 32px;
    }

    .gr-nav__btn--play {
        width: 36px;
        height: 36px;
    }

    .gr-player-bar {
        height: 34px;
    }

    .gr-player-bar__name {
        font-size: 13px;
    }

    .gr-player-bar__clock {
        font-size: 12px;
        padding: 3px 8px;
    }
}

/* -------------------------
   Utility: scrollbar for Firefox
   ------------------------- */
.gr-moves__list,
.gr-report {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

/* -------------------------
   Selection / Focus
   ------------------------- */
.gr-nav__btn:focus-visible {
    outline: 2px solid var(--gr-blue-accent);
    outline-offset: 2px;
}

.gr-moment-card:focus-visible {
    outline: 2px solid var(--gr-blue-accent);
    outline-offset: 2px;
}

.gr-move-row__white:focus-visible,
.gr-move-row__black:focus-visible {
    outline: 2px solid var(--gr-blue-accent);
    outline-offset: -2px;
    border-radius: var(--gr-radius-xs);
}

/* ─── Game Narrative paragraph (Phase A2) ─────────────────── */
.gr-narrative {
    padding: 14px 16px;
    margin: 0 0 16px;
    background: rgba(255, 191, 0, 0.04);
    border-left: 3px solid var(--gr-amber, #FFBF00);
    border-radius: 0 6px 6px 0;
    font-family: 'Satoshi', system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(240, 235, 224, 0.85);
    letter-spacing: -0.005em;
}

/* ─── Coach emotion indicator (Phase A3) ─────────────────── */
.generic-commentary[data-emotion]::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: 1px;
}
.review-detail-row[data-emotion="impressed"]::before    { background: #3b87c8; }
.review-detail-row[data-emotion="celebratory"]::before  { background: #a358d0; }
.review-detail-row[data-emotion="concerned"]::before    { background: #e8ba02; }
.review-detail-row[data-emotion="alarmed"]::before      { background: #cf3120; }
.review-detail-row[data-emotion="curious"]::before      { background: #73a491; }
.review-detail-row[data-emotion="thinking"]::before     { background: #6b6b66; }