/* ==========================================================================
   Game Review page (public/js/views/review.js)
   The summary boxes, grade badges, grade table, tips and coach box live in learn.css.
   ========================================================================== */
.review-page {
  --rv-best: #1f9e7e;
  --rv-excellent: #4aa36a;
  --rv-good: #6f8f5a;
  --rv-book: #5b6b7a;
  --rv-inaccuracy: #c9a227;
  --rv-mistake: #d97a2b;
  --rv-blunder: #c8402f;
}

/* ------------------------------------------------------------ player bars --- */
.review-bar .rv-you { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--accent-hi); background: #2e3b2f; border-radius: 4px; padding: 1px 6px; }
.rv-hand { display: flex; gap: 3px; flex: none; max-width: 46%; overflow: hidden; }
.rv-mini { width: 25px; height: 35px; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.rv-mini svg { width: 100%; height: 100%; display: block; }
.review-acc {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center; flex: none;
  min-width: 92px; padding: 3px 12px; border-radius: 5px; background: var(--panel-2);
}
.review-acc b { font-family: var(--font-mono); font-size: 21px; font-weight: 600; line-height: 1.1; color: var(--text); }
.review-acc span { font-size: 10px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-3); }

/* the grade of the move shown, on the card that was played */
.pc .rv-badge { position: absolute; top: -9px; right: -9px; z-index: 60; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, .5); pointer-events: none; }

/* ------------------------------------------------------------------ panel --- */
.review-head { padding: 12px 16px 10px; border-bottom: 1px solid var(--line); flex: none; }
.review-title { display: flex; align-items: center; gap: 8px; }
.review-title .ico { width: 22px; height: 22px; color: var(--gold); }
.review-title h2 { font-size: 20px; font-weight: 800; }
.review-result { font-weight: 700; font-size: 14.5px; margin-top: 6px; }
.review-meta { font-size: 12.5px; font-weight: 600; color: var(--text-3); margin-top: 2px; }

/* grade badges: the book icon and the smaller size used in lists */
.grade .ico { width: 13px; height: 13px; }
.grade.rv-sm { min-width: 20px; height: 18px; font-size: 10.5px; flex: none; }
.rv-log .log-item .grade { margin-left: auto; }

/* summary */
.review-summary .acc-box { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; border-top: 3px solid var(--line); }
.review-summary .acc-box.rv-me { border-top-color: var(--accent); }
.review-summary .acc-box.rv-opp { border-top-color: var(--red-soft); }
.review-summary .acc-box .acc-name { max-width: 100%; }
.review-summary .acc-box .acc-num { line-height: 1.1; }
.grade-table th { padding: 6px 14px 4px; font-size: 11.5px; font-weight: 800; color: var(--text-3); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; }
.rv-glabel { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text-2); }
.rv-row-best td + td { color: var(--rv-best); }
.rv-row-excellent td + td { color: var(--rv-excellent); }
.rv-row-good td + td { color: #8fb57a; }
.rv-row-book td + td { color: #8d9cab; }
.rv-row-inaccuracy td + td { color: var(--rv-inaccuracy); }
.rv-row-mistake td + td { color: var(--rv-mistake); }
.rv-row-blunder td + td { color: #e2604f; }

/* winning chances graph */
.rv-graph { position: relative; height: 70px; margin: 4px 14px 10px; background: var(--panel-2); border-radius: 8px; overflow: hidden; cursor: pointer; }
.rv-graph svg { display: block; }
.rv-graph-me { fill: color-mix(in srgb, var(--accent) 55%, transparent); }
.rv-graph-opp { fill: color-mix(in srgb, var(--red-soft) 45%, transparent); }
.rv-graph-mid { stroke: #ffffff30; stroke-width: 1; }
.rv-graph-line { fill: none; stroke: #ecebe5; stroke-width: 1.5; stroke-linejoin: round; }
.rv-graph-cursor { stroke: var(--gold); stroke-width: 2; }
.rv-graph circle { stroke: #1d1b19; stroke-width: 1.2; }
.rv-dot-mistake { fill: var(--rv-mistake); }
.rv-dot-blunder { fill: var(--rv-blunder); }

/* key moments */
.rv-moments { display: flex; flex-direction: column; gap: 6px; padding: 0 14px 6px; }
.rv-moment {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--panel-3); border: 1px solid transparent; border-radius: 8px; padding: 9px 11px;
  color: var(--text-2); font: inherit;
}
.rv-moment:hover { background: var(--hover); }
.rv-moment.on { border-color: var(--gold); }
.rv-moment-top { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.rv-moment-top b { color: var(--text); font-family: var(--font-head); font-size: 14.5px; font-weight: 800; }
.rv-moment-ply { font-size: 12px; font-weight: 600; color: var(--text-3); }
.rv-moment-text { font-size: 13px; line-height: 1.45; margin-top: 4px; }
.rv-legend { font-size: 12px; line-height: 1.45; color: var(--text-3); padding: 6px 16px 0; margin: 0; }
.rv-left { font-size: 12.5px; color: var(--gold); padding: 6px 16px 14px; margin: 0; font-weight: 600; }

/* waiting, sign up and limit panels */
.rv-wait { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 20px; text-align: center; }
.rv-wait .muted { font-size: 13px; max-width: 270px; }
.rv-gate { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 22px; text-align: center; }
.rv-gate-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--panel-3); color: var(--accent-hi); display: flex; align-items: center; justify-content: center; }
.rv-gate-ico.gold { color: var(--gold); }
.rv-gate-ico .ico { width: 30px; height: 30px; }
.rv-gate h3 { font-size: 19px; }
.rv-gate p { margin: 0; font-size: 14px; max-width: 310px; color: var(--text-2); }
.rv-gate-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.rv-gate .rv-gate-small { font-size: 12.5px; color: var(--text-3); margin-top: 4px; }
.rv-empty-h { margin: 6px 0 10px; color: var(--text); font-size: 18px; }
.rv-spin { margin: 0 auto 12px; }

/* coach box for the move shown, above the step buttons */
.rv-coach { margin: 0; border-left: 4px solid var(--line); background: var(--panel-3); }
.rv-coach.rv-c-best { border-left-color: var(--rv-best); }
.rv-coach.rv-c-excellent { border-left-color: var(--rv-excellent); }
.rv-coach.rv-c-good { border-left-color: var(--rv-good); }
.rv-coach.rv-c-book { border-left-color: var(--rv-book); }
.rv-coach.rv-c-inaccuracy { border-left-color: var(--rv-inaccuracy); }
.rv-coach.rv-c-mistake { border-left-color: var(--rv-mistake); }
.rv-coach.rv-c-blunder { border-left-color: var(--rv-blunder); }
.rv-coach .coach-h { flex-wrap: wrap; font-family: var(--font-head); font-size: 15px; }
.rv-coach .coach-h > .ico { width: 18px; height: 18px; color: var(--text-3); }
.rv-coach-ply { color: var(--text-3); font-size: 12.5px; font-weight: 700; }
.rv-gt-best { color: #3cc39f; }
.rv-gt-excellent { color: #6cc48a; }
.rv-gt-good { color: #9cc083; }
.rv-gt-book { color: #9fb0c0; }
.rv-gt-inaccuracy { color: var(--rv-inaccuracy); }
.rv-gt-mistake { color: var(--rv-mistake); }
.rv-gt-blunder { color: #e2604f; }
.rv-coach-move { font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.rv-fx { display: block; font-size: 12.5px; color: var(--text-3); }
.rv-coach-tip { display: flex; gap: 8px; margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.rv-coach-tip .ico { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 1px; }
.rv-coach .better { display: flex; align-items: center; gap: 10px; justify-content: space-between; border-top: 1px solid #ffffff10; padding-top: 8px; margin-top: 8px; line-height: 1.4; }
.rv-coach .better b { color: var(--text); }
.rv-show { flex: none; white-space: nowrap; }
.rv-show .ico { width: 16px; height: 16px; }
.rv-show.on { box-shadow: inset 0 0 0 2px var(--gold); }

@media (max-width: 860px) {
  .review-acc { min-width: 74px; padding: 3px 9px; }
  .review-acc b { font-size: 18px; }
  .rv-hand { max-width: 40%; }
  .rv-mini { width: 20px; height: 28px; }
}
@media (max-width: 480px) {
  /* the hand drops to its own line under the name */
  .review-bar { flex-wrap: wrap; row-gap: 6px; }
  .review-bar .pinfo { flex-basis: 0; }
  .rv-hand { order: 5; flex-basis: 100%; max-width: none; padding-left: 50px; }
  .review-bar .pmeta { flex-wrap: wrap; gap: 0 8px; }
}

/* the better move shown on the table */
.review-page .table-area { position: relative; }
.review-page .table-area.rv-previewing .table { outline: 3px solid var(--gold); outline-offset: 2px; }
.review-page .table-area.rv-previewing::after {
  content: attr(data-label); position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); z-index: 95;
  background: var(--gold); color: #2c1f02; font-weight: 800; font-size: 12.5px; padding: 3px 12px; border-radius: 999px;
  white-space: nowrap; pointer-events: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}