/* Match review: geometry shared by every theme (PRD §14.3, §18.8). Themes colour and decorate; this file
   uses no colours. Loaded after touch.css. */

/* ===== Rail + detail grid ===== */
.review-grid {
  display: grid; grid-template-columns: clamp(220px, var(--review-rail-w, 248px), 280px) minmax(0, 1fr);
  gap: var(--review-gap, 20px); align-items: start;
}
.review-rail {
  position: sticky; top: var(--review-rail-top, 12px); max-height: calc(100vh - var(--review-rail-top, 12px) - 12px);
  overflow-y: auto; display: flex; flex-direction: column; min-width: 0;
}
.review-round { flex: 0 0 auto; width: 100%; text-align: left; cursor: pointer; }
.review-detail { min-width: 0; }
/* the selected round's results, under its rail entry */
.rail-scores { flex: 0 0 auto; display: grid; gap: 0; min-width: 0; }
.rail-score { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 1px; align-items: baseline; }
.rail-score .who { display: flex; align-items: center; gap: 7px; min-width: 0; }
.rail-score .who i { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.rail-score .pname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-score .res { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rail-score .det, .rail-score .attempts { grid-column: 1 / -1; }
.rail-score .attempts { display: flex; flex-wrap: wrap; gap: 3px 6px; }

/* bar + number; the theme sets the fill width on the inner element */
.hp-mini { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.hp-mini .bar { display: block; height: 6px; overflow: hidden; }
.hp-mini .bar i { display: block; height: 100%; }
.hp-mini .tmult-mini { font-size: .8em; font-weight: 400; opacity: .75; }

/* narrow: the rail becomes a horizontally scrollable strip of chips above the detail */
@media (max-width: 959px) {
  .review-grid { grid-template-columns: minmax(0, 1fr); }
  .review-rail {
    position: static; max-height: none; flex-direction: row; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  }
  .review-round { width: auto; min-width: 168px; scroll-snap-align: start; }
}

/* ===== Replay stage geometry (.rp-*, PRD §16.3, §18.8) =====
   The stage reproduces the recorded screen: --stage-w / --stage-h (px numbers), --mw (map width in percent of
   the stage) and --sv (Street View share of a touch split) are written by the logic. */
.rp { min-width: 0; }
/* two views of a round: the location (free Street View + everybody's guesses) and one player's replay */
.rp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.rp-tabs { display: flex; gap: 4px; }
.rp-tab { cursor: pointer; white-space: nowrap; }
.rp[data-view="location"] :is(.rp-stage, .rp-players, .rp-bar, .rp-activity, .rp-status) { display: none; }
/* the playback bar is exactly as wide as the (possibly letterboxed) stage above it */
.rp-bar, .rp-activity { width: 100%; max-width: calc(70vh * var(--stage-ratio, 1.7778)); margin-left: auto; margin-right: auto; box-sizing: border-box; }
.rp[data-view="replay"] .rp-location { display: none; }
.rp-location { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 70vh; overflow: hidden; }
.rp-loc-pano { position: absolute !important; inset: 0; isolation: isolate; z-index: 0; }
.rp-loc-map {
  position: absolute; right: 1.5%; bottom: 4%; width: 30%; height: 38%; z-index: 2; opacity: .85;
  transition: width .25s, height .25s, opacity .25s;
}
.rp-loc-map:hover { width: 58%; height: 72%; opacity: 1; }
.rp-loc-map > div { position: absolute; inset: 0; }
.rp-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 70vh; margin: 0 auto; overflow: hidden;
  /* when the height limit applies, the width follows the aspect ratio and the stage is centred */
  max-width: calc(70vh * var(--stage-ratio, 1.7778));
}
.rp-stage * { pointer-events: none; }
.rp-stage .rp-loading { pointer-events: auto; }
/* !important: the Maps API writes position: relative on its container */
.rp-pano { position: absolute !important; inset: 0; }
/* the API's own z-indexed layers must stay below the overlays */
.rp-pano, .rp-map { isolation: isolate; z-index: 0; }
.rp-divider { display: none; }
.rp-map-wrap {
  position: absolute; right: 1.5%; bottom: 3%; display: flex; flex-direction: column; opacity: .7;
  width: calc(var(--mw, 22) / 100 * var(--stage-w, 800) * 1px);
  height: min(calc(var(--mw, 22) * 0.75 / 100 * var(--stage-w, 800) * 1px), calc(0.88 * var(--stage-h, 450) * 1px));
  transition: width .3s, height .3s, opacity .3s;
}
.rp-map-wrap.expanded { opacity: 1; }
.rp-map-wrap .rp-map { position: relative; flex: 1 1 auto; min-height: 0; }
.rp-submit { flex: 0 0 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; }
.rp-timer { position: absolute; left: 1.5%; top: 3%; }
/* the live compass widget, scaled like the recorded screen */
.rp-compass { position: absolute; left: 50%; top: 3%; width: 320px; transform: translateX(-50%) scale(var(--hud-scale, 1)); transform-origin: top center; }
.rp-compass .compass-window { width: 320px; height: 28px; overflow: hidden; position: relative; }
.rp-compass .compass-strip { position: absolute; left: 50%; top: 0; height: 28px; display: flex; white-space: nowrap; }
.rp-compass .compass-strip span { width: 40px; flex: 0 0 40px; text-align: center; line-height: 28px; }
.rp-bigplay { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; z-index: 4; cursor: pointer; }
.rp-bigplay svg { width: 44px; height: 44px; margin-left: 4px; }
.rp-stage { cursor: pointer; }
.rp-badge { position: absolute; left: 1.5%; bottom: 3%; }
.rp-badge.rp-idle { bottom: calc(3% + 2.4em); }
.rp-note { position: absolute; right: 1.5%; top: 3%; }
.rp-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; z-index: 5; }
.rp [hidden] { display: none !important; }

/* touch recording: split panes like the live tablet layout */
.rp-stage.touch { display: flex; flex-direction: column; }
.rp-stage.touch.vertical { flex-direction: row; }
.rp-stage.touch .rp-pano { position: relative !important; inset: auto; flex: 0 0 var(--sv, 50%); min-width: 0; min-height: 0; }
.rp-stage.touch .rp-divider { display: block; flex: 0 0 4px; }
.rp-stage.touch .rp-map-wrap {
  position: relative; right: auto; bottom: auto; width: auto; height: auto; flex: 1 1 auto; min-width: 0; min-height: 0;
  opacity: 1; transition: none;
}

/* playback bar */
.rp-bar { display: flex; align-items: center; gap: 12px; }
.rp-icon { flex: 0 0 auto; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; cursor: pointer; }
.rp-icon svg { width: 24px; height: 24px; display: block; }
.rp-play svg { display: none; }
.rp-play[data-state="play"] .i-play, .rp-play[data-state="pause"] .i-pause, .rp-play[data-state="replay"] .i-replay { display: block; }
.rp-settings { position: relative; flex: 0 0 auto; }
.rp-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 20; display: grid; gap: 12px; padding: 12px 14px; min-width: 250px; }
.rp-menu-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.rp-speeds { flex-wrap: nowrap; }
.rp-players { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-who { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; max-width: 100%; }
.rp-who i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c, currentColor); }
.rp-who[aria-disabled="true"] { cursor: default; opacity: .45; }
.rp-progress { position: relative; flex: 1 1 auto; height: 20px; min-width: 0; cursor: pointer; touch-action: none; }
.rp-fill { position: absolute; left: 0; top: 50%; height: 6px; width: 0; transform: translateY(-50%); pointer-events: none; }
.rp-progress::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; transform: translateY(-50%); background: currentColor; opacity: .18; }
.rp-markers { position: absolute; inset: 0; }
.rp-marker { position: absolute; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); cursor: pointer; }
.rp-marker.pin { top: 50%; bottom: auto; width: 6px; height: 6px; border-radius: 50%; transform: translate(-50%, -50%); }
.rp-marker.guess { width: 14px; font-style: normal; font-size: 10px; line-height: 20px; text-align: center; }
.rp-marker.hidden-span { transform: none; top: 50%; bottom: auto; height: 6px; margin-top: -3px; cursor: default; pointer-events: none; }
.rp-knob { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.rp-time { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.rp-activity { position: relative; display: flex; height: 6px; gap: 0; }
.rp-activity i { flex: 1 1 0; min-width: 0; }
.rp-activity i.span { position: absolute; top: 0; bottom: 0; flex: none; }
.rp.disabled .rp-bar, .rp.disabled .rp-activity { opacity: .45; pointer-events: none; }
.rp.disabled .rp-stage { cursor: default; }

@media (max-width: 959px) {
  .rp-stage { max-height: 60vh; max-width: calc(60vh * var(--stage-ratio, 1.7778)); }
  .rp-bar, .rp-activity { max-width: calc(60vh * var(--stage-ratio, 1.7778)); }
  .rail-scores { flex: 0 0 auto; min-width: 220px; }
  .rp-location { max-height: 60vh; }
  .rp-loc-map { width: 42%; height: 42%; }
}