/* ══════════════════════════════════════════════════════════════════════════
   review-marks.css — move-quality marks of the game review (#screen-analysis).

   One icon per tier (game/move-marks.js draws it, game/move-quality.js defines
   the tiers) used everywhere in the review: the move pill, the score sheet, the
   legend, the report counts and the evaluation chart.

   The tier is told by shape first and by colour second, so the marks survive
   colour blindness and a greyscale screen:
     brilliant  star in a circle        masterful  diamond with "1"
     strong     triangle with chevron   precise    small plain dot
     miss       hollow ring with "!"    mistake    rounded square with "?"
     blunder    octagon with a cross
   and the three negative ones grow heavier: ring, then square, then octagon.

   Colours are theme tokens (--mk-*). Dark themes use bright fills with a dark
   glyph, the light theme deep fills with a white glyph. Measured contrast of a
   mark against the surfaces it sits on (surface, striped row, current move,
   hover, 16% pill tint) is >= 3.5:1 in all three themes, glyph against its fill
   >= 4.9:1, text tokens >= 4.5:1.

   These tokens are separate from --mq-*, which still colour the end-screen strip.
   Loaded after board-controls.css, which owns the rest of the review layout.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* steppe-night (default) */
    --mk-brilliant: #B79BF4;  --mk-brilliant-ink: #1b1917;
    --mk-masterful: #7DB8F2;  --mk-masterful-ink: #10161d;
    --mk-strong: #7FCB7B;     --mk-strong-ink: #11200f;
    --mk-precise: #A9A69C;
    --mk-miss: #E8BF4B;
    --mk-mistake: #F4903F;    --mk-mistake-ink: #2a1204;
    --mk-blunder: #FF5247;    --mk-blunder-ink: #1b1917;
    --mk-up: #6FCB7A;         --mk-up-ink: #11200f;   --mk-up-text: #7FD27A;
    --mk-down: #F2675B;       --mk-down-ink: #2a0d09; --mk-down-text: #FF8F83;
    --mk-tag: #E3B964;
}
html[data-theme="charcoal-gold"] {
    --mk-brilliant: #B79BF4;  --mk-brilliant-ink: #1a120b;
    --mk-masterful: #7DB8F2;  --mk-masterful-ink: #10161d;
    --mk-strong: #82CC72;     --mk-strong-ink: #101e0c;
    --mk-precise: #B5AA95;
    --mk-miss: #EDC04A;
    --mk-mistake: #F58B3A;    --mk-mistake-ink: #2a1204;
    --mk-blunder: #FF5247;    --mk-blunder-ink: #1a120b;
    --mk-up: #78CE70;         --mk-up-ink: #101e0c;   --mk-up-text: #86D47A;
    --mk-down: #F2675B;       --mk-down-ink: #2a0d09; --mk-down-text: #FF9488;
    --mk-tag: #E8BE5E;
}
html[data-theme="steppe-light"] {
    --mk-brilliant: #6A3FC4;  --mk-brilliant-ink: #ffffff;
    --mk-masterful: #1B5FA6;  --mk-masterful-ink: #ffffff;
    --mk-strong: #2B7A33;     --mk-strong-ink: #ffffff;
    --mk-precise: #6F6C63;
    --mk-miss: #9A5A00;
    --mk-mistake: #C24A0A;    --mk-mistake-ink: #ffffff;
    --mk-blunder: #C0282D;    --mk-blunder-ink: #ffffff;
    --mk-up: #2B7A33;         --mk-up-ink: #ffffff;   --mk-up-text: #1F6B27;
    --mk-down: #C0282D;       --mk-down-ink: #ffffff; --mk-down-text: #B3261E;
    --mk-tag: #8A5F00;
}

/* ── The mark ─────────────────────────────────────────────────────────────── */
:is(.mq-mark, .mq-pill, .rv-legend__item)[data-tier="brilliant"] { --mk-fill: var(--mk-brilliant); --mk-ink: var(--mk-brilliant-ink); }
:is(.mq-mark, .mq-pill, .rv-legend__item)[data-tier="masterful"] { --mk-fill: var(--mk-masterful); --mk-ink: var(--mk-masterful-ink); }
:is(.mq-mark, .mq-pill, .rv-legend__item)[data-tier="strong"] { --mk-fill: var(--mk-strong); --mk-ink: var(--mk-strong-ink); }
:is(.mq-mark, .mq-pill, .rv-legend__item)[data-tier="precise"] { --mk-fill: var(--mk-precise); --mk-ink: var(--tp-color-surface, #1b1917); }
:is(.mq-mark, .mq-pill, .rv-legend__item)[data-tier="miss"] { --mk-fill: var(--mk-miss); --mk-ink: var(--mk-miss); }
:is(.mq-mark, .mq-pill, .rv-legend__item)[data-tier="mistake"] { --mk-fill: var(--mk-mistake); --mk-ink: var(--mk-mistake-ink); }
:is(.mq-mark, .mq-pill, .rv-legend__item)[data-tier="blunder"] { --mk-fill: var(--mk-blunder); --mk-ink: var(--mk-blunder-ink); }

.mq-mark { display: block; flex: none; overflow: visible; }
.mq-mark__shape { fill: var(--mk-fill); stroke: var(--mk-fill); stroke-width: 1.4; stroke-linejoin: round; }
.mq-mark__ring { fill: none; stroke: var(--mk-fill); stroke-width: 2.5; }
.mq-mark__glyph { fill: none; stroke: var(--mk-ink); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.mq-mark__bold { stroke-width: 3; }
.mq-mark__solid { fill: var(--mk-ink); stroke: none; }
.mq-mark__glyph.mq-mark__own { stroke: var(--mk-fill); stroke-width: 2.6; }
.mq-mark__solid.mq-mark__own { fill: var(--mk-fill); }

/* ── Pills: the tier name and the move tags ───────────────────────────────── */
.mq-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 2px 13px 2px 4px;
    border: 1px solid color-mix(in srgb, var(--mk-fill) 60%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--mk-fill) 15%, var(--tp-color-surface, transparent));
    color: var(--tp-color-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
.mq-tagmark { flex: none; }
.mq-tagmark__ring { fill: none; stroke: var(--mk-tag); stroke-width: 1.9; }
.mq-tagmark__dot { fill: var(--mk-tag); }
html[data-theme] #screen-analysis .rv-coach__tier .mq-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow: visible;
    white-space: normal;
}
html[data-theme] #screen-analysis .rv-coach__tier .mq-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 2px 11px 2px 8px;
    overflow: visible;
    border: 1px solid color-mix(in srgb, var(--mk-tag) 50%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--mk-tag) 12%, var(--tp-color-surface, transparent));
    color: var(--tp-color-text);
    font-size: 13.5px;
    font-weight: 650;
}

/* A cleared review hides the panel with the hidden attribute, but a phone rule gives
   the panel display:grid, so the old review stayed on screen (after a language switch,
   or while another game was loading). The attribute wins again. */
html[data-theme] body:not(.game-active) #screen-analysis .tp-move-panel[hidden] { display: none !important; }

/* ── Header of the move panel ─────────────────────────────────────────────── */
html[data-theme] #screen-analysis .rv-coach { min-height: 0; gap: 8px; }
html[data-theme] #screen-analysis .rv-coach__head { gap: 8px 10px; }
html[data-theme] #screen-analysis .rv-coach__head > strong { font-size: 18px; }
html[data-theme] #screen-analysis .rv-coach__tier { flex-wrap: wrap; gap: 6px 8px; order: 0; }

.rv-sum {
    --lead: var(--tp-color-text-muted);
    --lead-text: var(--tp-color-text-muted);
    --lead-ink: var(--tp-color-surface, #1b1917);
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--lead) 45%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--lead) 11%, var(--tp-color-surface, transparent));
}
.rv-sum[data-lead="white"] { --lead: var(--mk-up); --lead-text: var(--mk-up-text); --lead-ink: var(--mk-up-ink); }
.rv-sum[data-lead="black"] { --lead: var(--mk-down); --lead-text: var(--mk-down-text); --lead-ink: var(--mk-down-ink); }
.rv-sum[hidden] { display: none; }
.rv-sum__badge { display: grid; place-items: center; flex: none; }
.rv-lead { display: block; }
.rv-lead__disc { fill: var(--lead); }
.rv-lead__glyph { fill: none; stroke: var(--lead-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rv-sum__head { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; margin: 0; }
.rv-sum__row { display: flex; align-items: center; gap: 10px; }
.rv-coach__better { display: grid; gap: 4px; }
.rv-coach__better-line { display: flex; align-items: center; gap: 6px; margin: 0; }
.rv-coach__better-why { margin: 0; font-size: 14px; line-height: 1.4; color: var(--tp-color-text); }
.rv-sum__row > .rv-coach__why { flex: 1 1 0; min-width: 0; }
.rv-sum__art { flex: none; }
html[data-theme] #screen-analysis .rv-sum .rv-coach__eval {
    order: 0;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--tp-color-text);
}
.rv-sum__value {
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--lead-text);
}
html[data-theme] #screen-analysis .rv-sum .rv-coach__why {
    order: 0;
    color: var(--tp-color-text);
    font-size: 14px;
    line-height: 1.4;
}
.rv-sum__art:empty { display: none; }
.rv-sum__row[hidden] { display: none; }
.rv-sum__art { align-self: center; }
.rv-art { display: block; }
.rv-art__pit { fill: color-mix(in srgb, var(--lead) 24%, var(--tp-color-surface, transparent)); stroke: var(--lead); stroke-width: 1.8; }
.rv-art__num { fill: var(--tp-color-text); font: 700 13px/1 system-ui, sans-serif; }
.rv-art__arrow { fill: none; stroke: var(--tp-color-text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rv-art__kazan { fill: color-mix(in srgb, var(--tp-color-text) 9%, var(--tp-color-surface, transparent)); stroke: var(--tp-color-text-muted); stroke-width: 1.8; stroke-linejoin: round; }
.rv-art__count { fill: var(--tp-color-text); font: 800 12.5px/1 system-ui, sans-serif; }
.rv-art__label { fill: var(--tp-color-text-muted); font: 600 9.5px/1 system-ui, sans-serif; }

/* ── Score sheet: White | Black, mark, pit, change, bar ───────────────────── */
html[data-theme] #screen-analysis .rv-moves__head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-block: 2px;
    border-bottom: 1px solid var(--tp-color-border, transparent);
    border-radius: 0;
    background: var(--tp-color-surface, var(--surface-1));
}
html[data-theme] #screen-analysis .rv-moves__head > span {
    padding: 4px 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tp-color-text-muted, var(--text-secondary));
}
html[data-theme] #screen-analysis .rv-moves .rv-cell {
    display: grid;
    grid-template-columns: 22px minmax(0, auto) 40px minmax(16px, 1fr);
    align-items: center;
    column-gap: 6px;
    min-height: 36px;
    padding: 0 8px 0 6px;
    width: 100%;
    min-width: 0;
}
.rv-cell__pit { min-width: 1ch; font-size: 15px; font-weight: 700; }
.rv-cell__delta {
    font-size: 12.5px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--tp-color-text-muted);
}
.rv-cell__delta[data-sign="up"] { color: var(--mk-up-text); }
.rv-cell__delta[data-sign="down"] { color: var(--mk-down-text); }
.rv-cell__bar {
    position: relative;
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: color-mix(in srgb, var(--tp-color-text) 10%, transparent);
}
.rv-cell__bar::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: color-mix(in srgb, var(--tp-color-text) 40%, transparent);
}
.rv-cell__bar > i { position: absolute; top: 0; bottom: 0; min-width: 2px; }
.rv-cell__bar > i[data-sign="up"] { left: 50%; border-radius: 0 3px 3px 0; background: var(--mk-up); }
.rv-cell__bar > i[data-sign="down"] { right: 50%; border-radius: 3px 0 0 3px; background: var(--mk-down); }
.rv-cell__bar > i[data-sign="flat"] { display: none; }

/* ── Legend under the score sheet ─────────────────────────────────────────── */
.tp-move-panel__legend:empty { display: none; }
html[data-theme] #screen-analysis .tp-move-panel__legend[hidden] { display: none !important; }
.rv-legend { display: grid; gap: 6px; padding: 2px 2px 0; }
.rv-legend__items { display: flex; flex-wrap: wrap; gap: 5px 6px; margin: 0; padding: 0; list-style: none; }
.rv-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 2px 11px 2px 5px;
    border: 1px solid var(--tp-color-border-strong, var(--tp-color-border));
    border-radius: 999px;
    background: transparent;
    color: var(--tp-color-text);
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.2;
    cursor: pointer;
}
.rv-legend__item:hover { background: color-mix(in srgb, var(--mk-fill) 10%, transparent); }
.rv-legend__item[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--mk-fill) 70%, transparent);
    background: color-mix(in srgb, var(--mk-fill) 16%, var(--tp-color-surface, transparent));
}
.rv-legend__item:focus-visible { outline: 2px solid var(--tp-color-primary, var(--accent)); outline-offset: 2px; }
.rv-legend__hint {
    min-height: 3.9em;
    margin: 0 2px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--tp-color-text-muted);
}

/* ── Report tab: counts per tier use the same marks ───────────────────────── */
.mq-summary__symbol { display: grid; place-items: center; }

/* ── Evaluation chart under the board ─────────────────────────────────────── */
html[data-theme] #screen-analysis .tp-analysis-board-graph { padding: 8px 10px 8px 8px; }
.rv-chart {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}
.rv-chart__plot {
    position: relative;
    height: 96px;
    cursor: pointer;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.rv-chart__inner { position: absolute; inset: 8px 0; }
.rv-chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rv-chart__grid { stroke: color-mix(in srgb, var(--tp-color-text) 18%, transparent); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.rv-chart__zero { stroke: color-mix(in srgb, var(--tp-color-text) 50%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rv-chart__line { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rv-chart__line.is-up { stroke: var(--mk-up); }
.rv-chart__line.is-down { stroke: var(--mk-down); }
.rv-chart__area { stroke: none; fill-opacity: .17; }
.rv-chart__area.is-up { fill: var(--mk-up); }
.rv-chart__area.is-down { fill: var(--mk-down); }
.rv-chart__marks { position: absolute; inset: 0; pointer-events: none; }
.rv-chart__mark {
    position: absolute;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 1.5px var(--tp-color-surface)) drop-shadow(0 0 1px var(--tp-color-surface));
}
.rv-chart__mark[hidden] { display: none; }
.rv-chart__mark.is-current { z-index: 2; transform: translate(-50%, -50%) scale(1.5); filter: drop-shadow(0 0 2px var(--tp-color-surface)) drop-shadow(0 0 1px var(--tp-color-text)); }
.rv-chart__dot[hidden] { display: none; }
.rv-chart__mark > .mq-mark { width: 100%; height: 100%; }
.rv-chart__guide {
    position: absolute;
    top: -6px;
    bottom: -6px;
    width: 1px;
    margin-left: -.5px;
    background: color-mix(in srgb, var(--tp-color-primary, var(--accent)) 75%, transparent);
    pointer-events: none;
}
.rv-chart__dot {
    position: absolute;
    box-sizing: border-box;
    width: 13px;
    height: 13px;
    margin: -6.5px 0 0 -6.5px;
    border: 2.5px solid var(--tp-color-surface);
    border-radius: 50%;
    background: var(--tp-color-text);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--tp-color-text) 55%, transparent);
    pointer-events: none;
}
.rv-chart__dot[data-lead="up"] { background: var(--mk-up); }
.rv-chart__dot[data-lead="down"] { background: var(--mk-down); }
.rv-chart__bubble {
    position: absolute;
    padding: 2px 8px;
    border-radius: 8px;
    background: var(--tp-color-text);
    color: var(--tp-color-surface);
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 10px));
}
.rv-chart__bubble.is-below { transform: translate(-50%, 10px); }
.rv-chart__key {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--tp-color-text-muted);
}
.rv-chart__key > span::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 3px;
    margin-right: 6px;
    border-radius: 2px;
    vertical-align: middle;
    background: var(--swatch);
}
.rv-chart__key > [data-lead="up"] { --swatch: var(--mk-up); }
.rv-chart__key > [data-lead="down"] { --swatch: var(--mk-down); }

@media (max-width: 349px) {
    .rv-sum__art { display: none; }
    html[data-theme] #screen-analysis .rv-moves .rv-cell { column-gap: 4px; padding: 0 5px 0 4px; grid-template-columns: 22px minmax(0, auto) 36px minmax(14px, 1fr); }
    .rv-cell__delta { font-size: 12px; }
}
@media (min-width: 1100px) {
    /* The chart is taller than the old sparkline: the board gives that back. */
    html[data-theme] body:not(.game-active) #screen-analysis[data-analysis-state="completed"] { --an-board-h: calc(100vh - 300px); }
    .rv-chart__plot { height: 84px; }
    /* One screen, no scrolling: the side panel is tighter so the score sheet keeps its rows. */
    html[data-theme] #screen-analysis .rv-coach { padding: 8px 10px; gap: 6px; }
    .rv-sum { gap: 4px; padding: 7px 10px; }
    html[data-theme] #screen-analysis .rv-sum .rv-coach__why { font-size: 13px; line-height: 1.35; }
    .mq-pill { min-height: 28px; font-size: 14px; }
    html[data-theme] #screen-analysis .rv-moves .rv-cell { min-height: 30px; }
    .rv-legend { gap: 4px; }
    .rv-legend__items { gap: 4px 5px; }
    .rv-legend__item { min-height: 26px; padding: 1px 9px 1px 4px; font-size: 12px; }
    .rv-legend__hint { min-height: 2.8em; font-size: 12px; }
}
@media (min-width: 1100px) and (max-height: 680px) {
    .rv-chart__plot { height: 64px; }
    .rv-chart__key { display: none; }
    html[data-theme] #screen-analysis .rv-coach__head > strong { font-size: 16px; }
}
@media (prefers-contrast: more) {
    .mq-pill, .rv-legend__item, .rv-sum { border-width: 2px; }
    .rv-chart__grid { stroke: color-mix(in srgb, var(--tp-color-text) 45%, transparent); }
}

/* ══════════════════════════════════════════════════════════════════════════
   Review flow (ui/review-flow.js): summary first, then the step-through report.
   Its own screen (#screen-review): the analysis board is a separate one.
   Colours: theme tokens only, plus two fixed side colours (the stones).
   ══════════════════════════════════════════════════════════════════════════ */
#screen-review {
    --rv-white: #f1ebdd;
    --rv-white-ink: #241d14;
    --rv-black: #26221d;
    --rv-black-ink: #f1ebdd;
}
html[data-theme] body:not(.game-active) #screen-review .tp-review-layout {
    display: block !important;
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
}
html[data-theme] body:not(.game-active) #screen-review > .tp-phase-header {
    min-height: 0;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    gap: 8px;
}
html[data-theme] body:not(.game-active) #screen-review > .tp-phase-header h1 { margin: 0; font-size: 20px !important; line-height: 1.2; }
html[data-theme] body:not(.game-active) #screen-review > .tp-phase-header .tp-phase-icon-button { width: 40px; height: 40px; min-width: 40px; border-color: transparent; background: none; }
html[data-theme] body:not(.game-active) #screen-review[data-rv-view="report"] > .tp-phase-header { display: none; }
.rv-flow, .rv-view { display: grid; gap: 12px; min-width: 0; }
.rv-flow[hidden], .rv-view[hidden], .rv-flow [hidden] { display: none !important; }
.rv-flow { padding-bottom: 8px; }

:is(.rv-explain, .rv-tier)[data-tier="brilliant"] { --mk-fill: var(--mk-brilliant); }
:is(.rv-explain, .rv-tier)[data-tier="masterful"] { --mk-fill: var(--mk-masterful); }
:is(.rv-explain, .rv-tier)[data-tier="strong"] { --mk-fill: var(--mk-strong); }
:is(.rv-explain, .rv-tier)[data-tier="precise"] { --mk-fill: var(--mk-precise); }
:is(.rv-explain, .rv-tier)[data-tier="miss"] { --mk-fill: var(--mk-miss); }
:is(.rv-explain, .rv-tier)[data-tier="mistake"] { --mk-fill: var(--mk-mistake); }
:is(.rv-explain, .rv-tier)[data-tier="blunder"] { --mk-fill: var(--mk-blunder); }
/* Tier colour used as text: pulled toward the text colour so it stays readable on every surface. */
.rv-tier, .rv-explain { --mk-text: color-mix(in srgb, var(--mk-fill, var(--tp-color-text)) 70%, var(--tp-color-text)); }

.rv-card {
    padding: 12px;
    border: 1px solid var(--tp-color-border);
    border-radius: 16px;
    background: var(--tp-color-surface);
    color: var(--tp-color-text);
    min-width: 0;
}
.rv-card--chart { padding: 10px 10px 8px 6px; }
.rv-view--summary { width: 100%; max-width: 600px; margin-inline: auto; }

/* Players: either side of the score */
.rv-player { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.rv-av {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border: 2px solid var(--tp-color-border-strong, var(--tp-color-border));
    border-radius: 50%;
    background: var(--tp-color-surface-raised, var(--tp-color-surface));
    color: var(--tp-color-text);
    font-size: 19px;
    font-weight: 800;
}
.rv-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rv-player__line { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-width: 0; }
.rv-player__name { overflow: hidden; font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.rv-player__stone { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--tp-color-border-strong, currentColor); }
:is(.rv-player, .rv-plate)[data-side="white"] .rv-player__stone { background: var(--rv-white); }
:is(.rv-player, .rv-plate)[data-side="black"] .rv-player__stone { background: var(--rv-black); }

/* Name plates above and below the board */
.rv-boardcol { display: grid; gap: 6px; min-width: 0; }
.rv-plate { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 32px; }
.rv-plate .rv-av { flex: none; width: 30px; height: 30px; border-width: 1px; border-radius: 8px; font-size: 13px; font-weight: 700; }
.rv-plate__name { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.rv-plate__rating { color: var(--tp-color-text-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.rv-plate .rv-player__stone { width: 11px; height: 11px; }

/* Accuracy: one row, the label between the two numbers */
.rv-acc { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; margin-top: 4px; }
.rv-acc__title { margin: 0; color: var(--tp-color-text-muted); font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.rv-acc__box {
    display: grid;
    place-items: center;
    min-height: 44px;
    border: 1px solid var(--tp-color-border-strong, var(--tp-color-border));
    border-radius: 10px;
    font-size: 24px;
    font-weight: 750;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.rv-acc__box[data-side="white"] { background: var(--rv-white); color: var(--rv-white-ink); }
.rv-acc__box[data-side="black"] { background: var(--rv-black); color: var(--rv-black-ink); }
.rv-acc__note { margin: 8px 0 0; text-align: center; font-size: 12.5px; line-height: 1.35; color: var(--tp-color-text-muted); }

/* Tier table: label | white | mark | black */
.rv-tiers { display: grid; margin: 0; padding: 0; list-style: none; }
.rv-tier {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px 34px 64px;
    align-items: center;
    min-height: 46px;
    border-bottom: 1px solid color-mix(in srgb, var(--tp-color-border) 70%, transparent);
}
.rv-tier:last-child { border-bottom: 0; }
.rv-tiers[data-open="false"] .rv-tier[data-extra] { display: none; }
.rv-tier__name { min-width: 0; font-size: 16px; font-weight: 700; color: var(--mk-text); overflow-wrap: anywhere; }
.rv-tier__n { text-align: center; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--mk-text); }
.rv-tier__n[data-zero] { color: var(--tp-color-text-muted); font-weight: 600; }
.rv-tier__icon { display: grid; place-items: center; }
.rv-tier[data-zero] .rv-tier__name { color: var(--tp-color-text-muted); font-weight: 600; }
.rv-tier[data-zero] .rv-tier__icon { opacity: .55; }

/* Buttons and links */
.rv-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    background: none;
    color: var(--tp-color-text-muted);
    font: inherit;
    font-size: 14.5px;
    font-weight: 650;
    cursor: pointer;
}
.rv-link:hover { color: var(--tp-color-text); }
.rv-link--toggle { width: 100%; margin-top: 4px; border-top: 1px solid color-mix(in srgb, var(--tp-color-border) 70%, transparent); border-radius: 0; }
.rv-link--toggle[aria-expanded="true"] .rv-ico { transform: rotate(180deg); }
.rv-ico { flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rv-actions { display: flex; align-items: stretch; gap: 8px; }
.rv-actions--summary { flex-direction: column; align-items: stretch; text-align: center; }
.rv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 48px;
    min-height: 52px;
    padding: 0 18px;
    border: 1px solid var(--tp-color-border-strong, var(--tp-color-border));
    border-radius: 14px;
    background: var(--tp-color-surface);
    color: var(--tp-color-text);
    font: inherit;
    font-size: 16px;
    font-weight: 750;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.rv-btn:hover { background: var(--tp-color-surface-raised, var(--tp-color-surface)); }
.rv-btn--primary { border-color: var(--tp-color-primary); background: var(--tp-color-primary); color: var(--tp-color-primary-ink); font-size: 17px; }
.rv-btn--primary:hover { background: var(--tp-color-primary-hover, var(--tp-color-primary)); }
.rv-btn--wide { width: 100%; min-height: 56px; }
.rv-btn--next { flex: 1 1 0; min-width: 0; }
.rv-btn--icon { padding: 0; width: 52px; }
.rv-btn.is-on { border-color: var(--mk-strong); background: color-mix(in srgb, var(--mk-strong) 16%, var(--tp-color-surface)); }
.rv-btn:focus-visible, .rv-link:focus-visible, .rv-back:focus-visible, .rv-arrow:focus-visible, .rv-chip:focus-visible {
    outline: 2px solid var(--tp-color-focus, var(--tp-color-primary));
    outline-offset: 2px;
}

/* Report: top row, evaluation bar, explanation */
.rv-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rv-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 0 12px 0 6px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--tp-color-text);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.rv-back:hover { background: color-mix(in srgb, var(--tp-color-text) 8%, transparent); }
.rv-counter { white-space: nowrap; padding-right: 6px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tp-color-text-muted); }
.rv-evalbar {
    position: relative;
    height: 30px;
    overflow: hidden;
    /* The white share is the page's own colour: a dark edge keeps it a bar. */
    border: 1px solid var(--rv-black);
    border-radius: 9px;
    background: var(--rv-black);
}
html[data-theme]:not([data-theme="steppe-light"]) .rv-evalbar { border-color: color-mix(in srgb, var(--rv-white) 55%, transparent); }
.rv-evalbar__value {
    position: absolute;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.rv-evalbar[data-lead="white"] .rv-evalbar__value { left: 7px; color: var(--rv-white-ink); }
.rv-evalbar[data-lead="black"] .rv-evalbar__value { right: 7px; color: var(--rv-black-ink); }
.rv-evalbar__white {
    position: absolute;
    inset: 0;
    background: var(--rv-white);
    transform: scaleX(var(--rv-share, 0.5));
    transform-origin: left center;
    transition: transform .34s cubic-bezier(.2, .8, .2, 1);
}
.rv-explain {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-height: 74px;
    padding: 12px 14px;
    border: 1px solid var(--tp-color-border);
    border-left: 4px solid var(--mk-fill, var(--tp-color-border-strong, var(--tp-color-border)));
    border-radius: 14px;
    background: color-mix(in srgb, var(--mk-fill, transparent) 9%, var(--tp-color-surface));
    color: var(--tp-color-text);
}
.rv-explain__mark { display: grid; place-items: center; padding-top: 2px; }
.rv-explain__title { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.25; color: var(--mk-text, var(--tp-color-text)); }
.rv-explain:not([data-tier]) { grid-template-columns: minmax(0, 1fr); }
.rv-explain:not([data-tier]) .rv-explain__title { color: var(--tp-color-text); }

/* Board and the emblem on the played pit */
.rv-board-wrap { position: relative; min-width: 0; }
#screen-review .rv-board .board-layout {
    width: min(100%, calc((100dvh - 330px) * 1.7847), 760px) !important;
    margin-inline: auto;
}
#screen-review .rv-board .pit :is(.pit-number, .pit-value) { width: 20px !important; height: 20px !important; min-width: 0 !important; font-size: 11px !important; }
/* The otau number is a plain corner digit, as on the game board (board-counts.css):
   two 20px plaques side by side do not fit a 36px phone pit and lay one number
   over the other. The stone count keeps its plaque. */
#screen-review .rv-board .pit .pit-number {
    top: 4px !important;
    left: 4px !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: rgba(74, 49, 24, 0.62) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}
#screen-review .rv-board .pit .pit-value { right: 3px !important; left: auto !important; }
.rv-badge {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}
/* Sized to sit in the gap between a pit's number and its stone count. */
.rv-badge { width: 22px; height: 22px; }
.rv-badge .mq-mark { width: 100%; height: 100%; }
.rv-badge .mq-mark__shape, .rv-badge .mq-mark__ring { stroke: #fff; stroke-width: 1.6; paint-order: stroke; }
/* The best move: its pit is outlined rather than covered. */
#screen-review .rv-board .pit.rv-best-pit {
    outline: 3px solid var(--mk-strong);
    outline-offset: -1px;
    box-shadow: 0 0 14px color-mix(in srgb, var(--mk-strong) 60%, transparent);
}

/* Move strip */
.rv-striprow { display: flex; align-items: center; gap: 4px; min-width: 0; }
.rv-arrow {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 52px;
    border: 1px solid var(--tp-color-border);
    border-radius: 12px;
    background: var(--tp-color-surface);
    color: var(--tp-color-text);
    cursor: pointer;
}
.rv-arrow:disabled { opacity: .35; cursor: default; }
.rv-strip {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    padding: 4px 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.rv-strip::-webkit-scrollbar { display: none; }
.rv-strip__group { display: inline-flex; flex: none; align-items: center; gap: 4px; }
.rv-strip__num { min-width: 26px; text-align: right; font-size: 13px; font-weight: 700; color: var(--tp-color-text-muted); }
.rv-strip__gap { width: 54px; }
.rv-chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 54px;
    min-height: 44px;
    padding: 0 8px;
    border: 1px solid var(--tp-color-border);
    border-radius: 12px;
    background: var(--tp-color-surface);
    color: var(--tp-color-text);
    font: inherit;
    font-size: 16px;
    font-weight: 750;
    cursor: pointer;
}
.rv-chip.is-current {
    border-color: var(--tp-color-primary);
    background: color-mix(in srgb, var(--tp-color-primary) 22%, var(--tp-color-surface));
    box-shadow: 0 0 0 1px var(--tp-color-primary);
}

/* Small tools in the report's top row: analyse from here, flip the board. */
.rv-tools { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.rv-top .rv-counter { margin-left: auto; }
.rv-tool {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: none;
    color: var(--tp-color-text-muted);
    cursor: pointer;
}
.rv-tool:hover { border-color: var(--tp-color-border); color: var(--tp-color-text); }
.rv-tool:focus-visible { outline: 2px solid var(--tp-color-focus, var(--tp-color-primary)); outline-offset: 2px; }

/* ── Stage and side ─────────────────────────────────────────────────────────
   Each view is a stage (board) and a side panel (ui/review-flow.js). On a phone
   both dissolve into one column in reading order: counter, bar, explanation,
   board, moves, buttons. The summary needs no board there: the chart is it. */
.rv-stage, .rv-side { display: contents; }
.rv-view--report .rv-top { order: 1; }
.rv-view--report .rv-evalbar { order: 2; }
.rv-view--report .rv-boardcol { order: 3; }
.rv-view--report .rv-explain { order: 4; }
.rv-view--report .rv-striprow { order: 5; }
.rv-view--report .rv-actions { order: 6; }
.rv-view--report .rv-card--chart { order: 7; }
.rv-view--summary .rv-verdict { order: 1; }
.rv-view--summary .rv-card--moments { order: 2; }
.rv-view--summary .rv-card--chart { order: 3; }
.rv-view--summary .rv-card--tiers { order: 4; }
.rv-view--summary .rv-actions { order: 5; }
.rv-strip { position: relative; }

/* Phone: board first, then what happened, with the buttons always under the thumb. */
@media (max-width: 999px) {
    html[data-theme] body:not(.game-active) #screen-review[data-rv-view="report"] { padding-top: 4px; }
    .rv-view--summary .rv-boardcol, .rv-view--report .rv-card--chart { display: none; }
    .rv-view--report { gap: 6px; }
    .rv-view--report .rv-evalbar { height: 22px; border-radius: 6px; }
    /* Nothing follows the buttons, and they already clear the iPhone's home bar. */
    html[data-theme] body:not(.game-active) .tp-shell-main > #screen-review#screen-review.screen.active { padding-bottom: 0 !important; }
    html[data-theme] body:not(.game-active) #screen-review .rv-flow { padding-bottom: 0; }
    .rv-view--report .rv-explain { min-height: 0; padding: 10px 12px; }
    .rv-view--report .rv-explain__mark .mq-mark { width: 30px; height: 30px; }
    .rv-view--report .rv-actions, .rv-actions--summary {
        position: sticky;
        bottom: 0;
        z-index: 4;
        padding: 8px 0 max(8px, env(safe-area-inset-bottom));
        background: var(--tp-color-bg, var(--tp-color-surface));
    }
    .rv-view--report .rv-btn { min-height: 48px; }
    .rv-actions--summary { gap: 2px; }
    .rv-btn--deeper { min-height: 36px; border-color: transparent; background: none; color: var(--tp-color-text-muted); font-size: 13.5px; font-weight: 650; }
    .rv-btn--deeper:hover { background: none; }
    .rv-view--report .rv-chip { min-height: 40px; }
    /* The widest row, the buttons, must not stretch the column past a narrow phone. */
    .rv-view { grid-template-columns: minmax(0, 1fr); }
    .rv-view--report .rv-actions .rv-btn { min-width: 0; padding-inline: 8px; }
    .rv-view--report .rv-actions .rv-btn:not(.rv-btn--icon) { flex: 1 1 0; }
}
/* A short phone keeps the words of the explanation above the buttons. */
@media (max-width: 999px) and (max-height: 720px) {
    .rv-view--report .rv-plate { display: none; }
}

/* Desktop: board on the left, the panel on the right, as on the chess sites.
   The board always takes its whole column: fitting the page into a laptop window
   left it under half that width. The page scrolls instead, and the panel, one
   calm surface divided by hairlines, stays in view beside the board. */
@media (min-width: 1000px) {
    html[data-theme] body:not(.game-active) #screen-review {
        height: auto !important;
        max-height: none !important;
        /* The shell scrolls this page; a scroll box of its own would hold the panel back. */
        overflow: clip !important;
    }
    /* The shell's main area now reserves the bar's real height itself (home-redesign.css), so no local override is needed. */
    html[data-theme] body:not(.game-active) #screen-review .tp-review-layout { max-width: 1320px; }
    #screen-review {
        /* Room the panel may take: the window minus the top bar, the page title and a margin. */
        --rv-side-max: calc(100dvh - var(--tp-header-height, 65px) - 96px);
        --rv-line: color-mix(in srgb, var(--tp-color-border) 75%, transparent);
    }
    /* The report has no page title, so the panel gets that height back. */
    html[data-theme] body:not(.game-active) #screen-review[data-rv-view="report"] { --rv-side-max: calc(100dvh - var(--tp-header-height, 65px) - 56px); }
    .rv-view--report .rv-side { height: var(--rv-side-max); }
    .rv-side { position: sticky; top: calc(var(--tp-header-height, 65px) + 12px); }
    .rv-flow { padding-bottom: 0; }
    .rv-view--summary { max-width: none; }
    .rv-view {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 368px);
        gap: 20px;
        align-items: start;
    }
    .rv-stage, .rv-stage--summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 10px;
        min-width: 0;
    }
    /* The bar hugs the board's left edge, so the board starts there too. */
    .rv-view--report .rv-stage { grid-template-columns: 34px minmax(0, 1fr); }
    .rv-view--report .rv-stage .rv-card--chart { grid-column: 2; }
    .rv-view--report .rv-stage .rv-evalbar { height: var(--rv-bar-h, auto); }
    .rv-stage .rv-board-wrap { min-width: 0; }
    .rv-stage .rv-card--chart { padding: 8px 12px; border-radius: 12px; }
    /* The summary names both players in its panel. */
    .rv-view--summary .rv-plate { display: none; }
    .rv-stage .rv-section-title { margin-bottom: 2px; }
    #screen-review .rv-stage .rv-board .board-layout { margin-inline: 0 auto; }
    /* Beside the panel the board takes its whole column (the 760px cap below is for one column). */
    #screen-review .rv-stage .rv-board .board-layout { width: 100% !important; }

    /* One surface. */
    .rv-side {
        display: flex;
        flex-direction: column;
        min-width: 0;
        min-height: 0;
        max-height: var(--rv-side-max);
        border: 1px solid var(--tp-color-border);
        border-radius: 14px;
        background: var(--tp-color-surface);
        color: var(--tp-color-text);
    }
    .rv-side > * { flex: none; min-width: 0; }
    .rv-side > .rv-card {
        padding: 12px 14px;
        border: 0;
        border-radius: 0;
        background: none;
    }
    .rv-side > * + * { border-top: 1px solid var(--rv-line); }

    .rv-card--chart .rv-chart__plot { height: 120px; }
    .rv-card--chart .rv-chart__key { font-size: 11px; }

    /* Summary: tier table. The one part that may scroll inside the panel. */
    .rv-side > .rv-card--tiers {
        flex: 0 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding-block: 4px 0;
        scrollbar-width: thin;
    }
    .rv-tier { grid-template-columns: minmax(0, 1fr) 48px 26px 48px; min-height: 32px; }
    .rv-tier__name { font-size: 14px; font-weight: 600; }
    .rv-tier__n { font-size: 14px; font-weight: 700; }
    .rv-tier__n[data-zero] { font-weight: 500; }
    .rv-tier__icon .mq-mark { width: 20px; height: 20px; }
    .rv-tier[data-zero] .rv-tier__name { font-weight: 500; }
    .rv-link { min-height: 36px; font-size: 13px; }
    html[data-theme] #screen-review .rv-side .rv-link--toggle { margin-top: 0; border-radius: 0; }
    .rv-link--toggle .rv-ico { width: 16px; height: 16px; }

    /* Buttons: one size for the whole panel. */
    .rv-side > .rv-actions { padding: 12px 14px; gap: 8px; }
    .rv-btn { min-height: 44px; padding: 0 14px; border-radius: 10px; font-size: 14.5px; font-weight: 650; }
    .rv-btn--primary { font-size: 15px; font-weight: 700; }
    .rv-btn--wide { min-height: 44px; }
    .rv-btn--deeper { min-height: 40px; border-color: transparent; background: none; color: var(--tp-color-text-muted); font-size: 13.5px; }
    .rv-btn--deeper:hover { color: var(--tp-color-text); background: color-mix(in srgb, var(--tp-color-text) 6%, transparent); }
    .rv-btn--icon { width: 44px; }
    .rv-actions--summary { gap: 4px; }

    /* Report: header row */
    .rv-side > .rv-top { padding: 4px 6px 4px 4px; gap: 4px; }
    .rv-back { min-height: 36px; padding: 0 10px 0 4px; border-radius: 8px; font-size: 14px; font-weight: 650; }
    .rv-back .rv-ico { width: 18px; height: 18px; }
    .rv-counter { font-size: 13px; font-weight: 600; }
    .rv-tool { width: 36px; height: 36px; border-radius: 8px; }
    .rv-tool .rv-ico { width: 18px; height: 18px; }

    /* Report: the explanation, an inset tinted note. */
    .rv-side > .rv-explain {
        gap: 10px;
        min-height: 0;
        margin: 10px 10px 0;
        padding: 10px 12px;
        border: 1px solid var(--tp-color-border);
        border-left: 3px solid var(--mk-fill, var(--tp-color-border-strong, var(--tp-color-border)));
        border-radius: 10px;
    }
    .rv-side > .rv-explain + * { margin-top: 10px; }
    .rv-explain__mark { padding-top: 1px; }
    .rv-explain__mark .mq-mark { width: 28px; height: 28px; }
    .rv-explain__title { font-size: 15px; font-weight: 700; line-height: 1.3; }

    /* The evaluation bar stands beside the board; White's share grows from White's side. */
    .rv-view--report .rv-evalbar { flex: none; width: 34px; height: auto; border-radius: 6px; }
    .rv-view--report .rv-evalbar .rv-evalbar__value { top: auto; left: 0; right: 0; transform: none; text-align: center; font-size: 11.5px; }
    .rv-view--report .rv-evalbar[data-lead="white"] .rv-evalbar__value { bottom: 7px; }
    .rv-view--report .rv-evalbar[data-lead="black"] .rv-evalbar__value { top: 7px; }
    .rv-view--report .rv-evalbar[data-flip="true"][data-lead="white"] .rv-evalbar__value { top: 7px; bottom: auto; }
    .rv-view--report .rv-evalbar[data-flip="true"][data-lead="black"] .rv-evalbar__value { top: auto; bottom: 7px; }
    .rv-view--report .rv-evalbar__white { transform: scaleY(var(--rv-share, 0.5)); transform-origin: center bottom; }
    .rv-view--report .rv-evalbar[data-flip="true"] .rv-evalbar__white { transform-origin: center top; }

    /* The move strip becomes a score sheet that takes the panel's remaining height. */
    .rv-side > .rv-striprow {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: stretch;
        min-height: 96px;
        padding: 6px 8px;
    }
    .rv-strip {
        flex: 1 1 auto;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        min-height: 0;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: thin;
    }
    .rv-strip__group { display: grid; grid-template-columns: 30px 1fr 1fr; gap: 4px; }
    .rv-strip__num { min-width: 0; font-size: 12px; font-weight: 600; }
    .rv-strip__gap { width: auto; }
    .rv-strip__group:nth-child(even) { border-radius: 8px; background: color-mix(in srgb, var(--tp-color-text) 3.5%, transparent); }
    .rv-chip { min-width: 0; min-height: 30px; justify-content: flex-start; padding: 0 10px; border-color: transparent; border-radius: 8px; background: none; font-size: 14px; font-weight: 650; }
    .rv-chip:not(.is-current):hover { background: color-mix(in srgb, var(--tp-color-text) 7%, transparent); }
    .rv-chip.is-current { box-shadow: none; }
}
/* Wide windows: the extra width goes to the board, the panel keeps its size. */
@media (min-width: 1600px) {
    html[data-theme] body:not(.game-active) #screen-review .tp-review-layout { max-width: 1560px; }
}
/* Short desktop windows (720-820px): the same panel, a little denser, so the tier table stays whole. */
@media (min-width: 1000px) and (max-height: 820px) {
    .rv-acc__box { min-height: 40px; font-size: 22px; }
    .rv-tier { min-height: 30px; }
    .rv-link { min-height: 32px; }
    .rv-side > .rv-actions { padding-block: 10px; }
    .rv-btn--deeper { min-height: 34px; }
}

@media (max-width: 389px) {
    .rv-tier { grid-template-columns: minmax(0, 1fr) 52px 30px 52px; }
    .rv-btn { padding: 0 12px; }
}
@media (min-width: 900px) {
    #screen-review .rv-board .board-layout { width: min(100%, calc((100dvh - 360px) * 1.7847), 760px) !important; }
    .rv-badge { width: 26px; height: 26px; }
    /* Wide desktop pits have room for a readable otau number. */
    #screen-review .rv-board .pit .pit-number {
        top: 6px !important;
        left: 8px !important;
        color: rgba(74, 49, 24, 0.78) !important;
        font-size: 13px !important;
    }
}
@media (prefers-reduced-motion: reduce) { .rv-evalbar__white { transition: none; } }
@media (prefers-contrast: more) { .rv-card, .rv-explain, .rv-chip { border-width: 2px; } }

/* ── Facts of the review: verdict, key moments, the explanation of a move ────── */
.tp-review-status {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 56px 16px;
    color: var(--tp-color-text-muted);
    text-align: center;
}
.tp-review-status[hidden] { display: none; }
.tp-review-status p { margin: 0; max-width: 42ch; line-height: 1.45; }
.tp-review-status[data-state="loading"] button { display: none; }
.tp-review-status:not([data-state="loading"]) .tp-loading-dots { display: none; }

.rv-section-title {
    margin: 0 0 6px;
    color: var(--tp-color-text-muted);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.rv-verdict { display: grid; justify-items: center; gap: 10px; text-align: center; }
.rv-verdict__title { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -.01em; line-height: 1.2; }
.rv-face { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; }
.rv-verdict__score { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.rv-verdict__kazan { color: var(--tp-color-text-muted); font-size: 30px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.1; }
.rv-verdict__kazan[data-won] { color: var(--tp-color-text); }
.rv-verdict__dash { color: var(--tp-color-text-muted); font-size: 24px; }
.rv-verdict__lead { margin: 0; color: var(--tp-color-text-muted); font-size: 14px; line-height: 1.4; }

.rv-moments { display: grid; gap: 2px; margin: 0 -6px; padding: 0; list-style: none; }
.rv-moment {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 7px 8px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.rv-moment:hover { background: color-mix(in srgb, var(--tp-color-text) 6%, transparent); }
.rv-moment:focus-visible { outline: 2px solid var(--tp-color-primary, currentColor); outline-offset: -2px; }
.rv-moment__sign { display: grid; place-items: center; color: var(--mk-tag); }
.rv-moment__sign .rv-ico path { fill: currentColor; stroke: none; }
.rv-moment__text { display: grid; gap: 1px; min-width: 0; font-size: 14.5px; line-height: 1.35; }
.rv-moment__move { color: var(--tp-color-text-muted); font-size: 12px; font-weight: 650; }

.rv-fold {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}
.rv-fold::-webkit-details-marker { display: none; }
.rv-fold .rv-ico { transition: transform .18s ease; }
details[open] > .rv-fold .rv-ico { transform: rotate(180deg); }

.rv-explain__move { margin: 2px 0 0; color: var(--tp-color-text-muted); font-size: 13px; line-height: 1.3; }
.rv-explain__why { display: grid; gap: 4px; margin-top: 8px; }
.rv-explain__line { margin: 0; font-size: 15px; line-height: 1.4; }
.rv-explain__line[data-kind="move"] { font-weight: 650; }
.rv-explain__line[data-kind="better"] { color: var(--mk-text, inherit); font-weight: 600; }
.rv-explain__score { margin: 8px 0 0; color: var(--tp-color-text-muted); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.rv-explain__score:empty { display: none; }

@media (min-width: 1000px) {
    /* The summary now has more to read than the window holds: the panel scrolls, the button stays. */
    .rv-view--summary .rv-side { overflow-y: auto; scrollbar-width: thin; }
    .rv-side > .rv-card--tiers { flex: none; overflow: visible; padding-block: 2px; }
    .rv-side > .rv-verdict { padding-block: 14px 12px; }
    .rv-side .rv-moment { min-height: 40px; padding-block: 4px; }
    .rv-actions--summary { position: sticky; bottom: 0; z-index: 1; background: var(--tp-color-surface); }
}

/* ── Feel ─────────────────────────────────────────────────────────────────────
   After Apple's fluid-interface talks. A control answers on press, not on release;
   chrome is a translucent layer the page passes under; the card is the finger's. */

:is(.rv-btn, .rv-chip, .rv-moment, .rv-tool, .rv-back, .rv-fold) {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
:is(.rv-btn, .rv-chip, .rv-tool, .rv-back) {
    transition: transform .18s cubic-bezier(.2, .8, .2, 1), background-color .16s ease, border-color .16s ease;
}
:is(.rv-btn, .rv-chip, .rv-tool, .rv-back):active:not(:disabled) { transform: scale(.96); transition-duration: 50ms; }
.rv-moment { transition: background-color .16s ease; }
.rv-moment:active { background: color-mix(in srgb, var(--tp-color-text) 7%, transparent); transition-duration: 50ms; }

.rv-explain { touch-action: pan-y; will-change: transform; }
.rv-chart__plot { touch-action: pan-y; }

.rv-verdict__title { letter-spacing: -0.02em; line-height: 1.15; }
.rv-verdict__score, .rv-verdict__kazan { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.rv-explain__title { letter-spacing: -0.01em; }
:is(.rv-counter, .rv-acc__box, .rv-chip__pit, .rv-explain__score) { font-variant-numeric: tabular-nums; }

.rv-deeper { display: grid; }
.rv-view--summary .rv-deeper { order: 5; }
.rv-view--summary .rv-actions { order: 6; }

@media (min-width: 1000px) {
    .rv-side > .rv-deeper { padding: 4px 14px; }
    .rv-side > .rv-deeper + .rv-actions { border-top: 0; }
}

@media (max-width: 999px) {
    /* The strip above the board and the buttons below it float: the page passes under. */
    .rv-top,
    .rv-view--report .rv-actions,
    .rv-actions--summary {
        margin-inline: -8px;
        padding-inline: 8px;
        background: color-mix(in srgb, var(--tp-color-bg, var(--tp-color-surface)) 74%, transparent);
        -webkit-backdrop-filter: blur(20px) saturate(170%);
        backdrop-filter: blur(20px) saturate(170%);
    }
    /* It reaches up under the iPhone's clock, so the page never shows through there. */
    .rv-top {
        position: sticky;
        top: 0;
        z-index: 4;
        margin-top: calc(-1 * env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);
    }
    /* The page fades into the bar instead of being cut by a line. */
    .rv-view--report .rv-actions::before,
    .rv-actions--summary::before {
        content: "";
        position: absolute;
        inset: -14px 0 100% 0;
        background: linear-gradient(to top, color-mix(in srgb, var(--tp-color-bg, var(--tp-color-surface)) 60%, transparent), transparent);
        pointer-events: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.rv-btn, .rv-chip, .rv-tool, .rv-back):active:not(:disabled) { transform: none; }
    .rv-evalbar__white { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .rv-top,
    .rv-view--report .rv-actions,
    .rv-actions--summary {
        background: var(--tp-color-bg, var(--tp-color-surface));
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
@media (prefers-contrast: more) {
    .rv-top,
    .rv-view--report .rv-actions,
    .rv-actions--summary {
        background: var(--tp-color-bg, var(--tp-color-surface));
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}