/* ==========================================================================
   Game Review page (public/js/views/review.js)
   ========================================================================== */
.review-page {
  --rv-brilliant: #1fb3a9;
  --rv-best: #5fae57;
  --rv-good: #9ccd6c;
  --rv-inaccuracy: #f2c94c;
  --rv-mistake: #f0913a;
  --rv-blunder: #e2483d;
  --rv-arrow: rgba(112, 200, 120, .88);
}

/* ---------------------------------------------------------------- board --- */
.review-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.review-overlay svg { position: absolute; left: 0; top: 0; overflow: visible; }
.review-arrow line { stroke: var(--rv-arrow); }
.review-arrow polygon { fill: var(--rv-arrow); }
.review-arrow { filter: drop-shadow(0 1px 2px #0007); }
.review-badge circle { stroke: #fff; stroke-width: 1.6; }
.review-badge { filter: drop-shadow(0 1px 2px #0009); }
.review-badge text { fill: #fff; font-family: var(--font-head); font-weight: 900; letter-spacing: -.5px; }
.review-badge.rb-good text, .review-badge.rb-inaccuracy text { fill: #1f2a12; }

.rb-brilliant { fill: var(--rv-brilliant); }
.rb-best { fill: var(--rv-best); }
.rb-good { fill: var(--rv-good); }
.rb-inaccuracy { fill: var(--rv-inaccuracy); }
.rb-mistake { fill: var(--rv-mistake); }
.rb-blunder { fill: var(--rv-blunder); }

/* accuracy chip in the player bars, where the game page shows the clock */
.review-acc {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  min-width: 96px; padding: 3px 12px; border-radius: 5px; background: #232527;
}
.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); }
.review-acc.red { box-shadow: inset 3px 0 0 var(--red-army); }
.review-acc.blue { box-shadow: inset 3px 0 0 var(--blue-army); }

/* ---------------------------------------------------------------- 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(--green); }
.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; }
.review-left { color: var(--gold); }

/* evaluation graph */
.review-graph { position: relative; height: 84px; flex: none; background: var(--panel-2); border-bottom: 1px solid var(--line); cursor: pointer; overflow: hidden; }
.review-graph svg { display: block; }
.review-graph-red { fill: color-mix(in srgb, var(--red-army) 58%, transparent); }
.review-graph-blue { fill: color-mix(in srgb, var(--blue-army) 58%, transparent); }
.review-graph-mid { stroke: #ffffff2e; stroke-width: 1; }
.review-graph-line { fill: none; stroke: #ecece6; stroke-width: 1.5; stroke-linejoin: round; }
.review-graph-cursor { stroke: var(--gold); stroke-width: 2; }
.review-graph circle { stroke: #1d1f21; stroke-width: 1.2; }
.review-graph-tip {
  position: absolute; top: 4px; pointer-events: none; white-space: pre;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  background: #111c; color: var(--text); padding: 2px 7px; border-radius: 4px;
}

/* classification badge */
.review-cls {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px;
  font-family: var(--font-head); font-size: 11.5px; font-weight: 900; line-height: 1; letter-spacing: -.3px;
  color: #fff; text-shadow: 0 1px 0 #0003;
}
.rc-brilliant { background: var(--rv-brilliant); }
.rc-best { background: var(--rv-best); }
.rc-good { background: var(--rv-good); color: #1f2a12; text-shadow: none; }
.rc-inaccuracy { background: var(--rv-inaccuracy); color: #3a2c00; text-shadow: none; }
.rc-mistake { background: var(--rv-mistake); }
.rc-blunder { background: var(--rv-blunder); }
.review-moves .move-cell .review-cls { margin-left: auto; min-width: 18px; height: 18px; font-size: 10.5px; }

/* report: accuracy cards */
.review-players { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 12px 4px; }
.review-player {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0;
  background: var(--panel-3); border-radius: 8px; padding: 12px 10px 10px; border-top: 3px solid var(--line);
}
.review-player.red { border-top-color: var(--red-army); }
.review-player.blue { border-top-color: var(--blue-army); }
.review-player-name { font-weight: 800; font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.review-player-acc { font-family: var(--font-mono); font-size: 28px; font-weight: 600; line-height: 1.1; }
.review-player-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-3); }

/* report: grade counts, Red on the left and Blue on the right */
.review-counts { margin: 8px 12px 2px; background: var(--panel-2); border-radius: 8px; padding: 3px 0; }
.review-count-row { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; padding: 5px 8px; font-size: 14px; }
.review-count-row + .review-count-row { border-top: 1px solid #ffffff08; }
.review-count-n { font-family: var(--font-mono); font-weight: 600; text-align: center; color: var(--text); }
.review-count-lbl { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-head); font-weight: 700; color: var(--text-2); }
.rc-row-brilliant .review-count-n { color: var(--rv-brilliant); }
.rc-row-best .review-count-n { color: var(--rv-best); }
.rc-row-good .review-count-n { color: var(--rv-good); }
.rc-row-inaccuracy .review-count-n { color: var(--rv-inaccuracy); }
.rc-row-mistake .review-count-n { color: var(--rv-mistake); }
.rc-row-blunder .review-count-n { color: var(--rv-blunder); }

/* report: key moments */
.review-moments { display: flex; flex-direction: column; gap: 6px; padding: 0 12px; }
.review-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;
}
.review-moment:hover { background: var(--hover); }
.review-moment.on { border-color: var(--gold); }
.review-moment-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.review-moment-top b { color: var(--text); font-family: var(--font-head); font-size: 14.5px; font-weight: 800; }
.review-moment-ply { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.review-moment-text { font-size: 13px; line-height: 1.45; margin-top: 4px; }

/* report: tips */
.review-tips { margin: 0 12px 10px; }
.review-tips-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 800; font-size: 14px; margin: 2px 2px 6px; }
.review-page .army { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }
.review-page .army.red { background: var(--red-army); }
.review-page .army.blue { background: var(--blue-army); }
.review-tip { display: flex; gap: 10px; background: #3a3424; color: #f3e3b3; border-radius: 8px; padding: 9px 11px; font-size: 13.5px; line-height: 1.45; margin-bottom: 6px; }
.review-tip .ico { color: var(--gold); width: 18px; height: 18px; margin-top: 1px; }
.review-legend { font-size: 12px; line-height: 1.45; color: var(--text-3); padding: 6px 16px 16px; }

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

/* footer: comment on the current move */
.review-comment { background: var(--panel-3); border-radius: 8px; padding: 10px 12px; border-left: 4px solid var(--line); }
.review-comment.rcm-brilliant { border-left-color: var(--rv-brilliant); }
.review-comment.rcm-best { border-left-color: var(--rv-best); }
.review-comment.rcm-good { border-left-color: var(--rv-good); }
.review-comment.rcm-inaccuracy { border-left-color: var(--rv-inaccuracy); }
.review-comment.rcm-mistake { border-left-color: var(--rv-mistake); }
.review-comment.rcm-blunder { border-left-color: var(--rv-blunder); }
.review-comment-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 15px; min-width: 0; }
.review-comment-head .ico { width: 18px; height: 18px; color: var(--text-3); }
.review-comment-ply { color: var(--text-3); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.review-eval { margin-left: auto; font-family: var(--font-mono); font-size: 12px; font-weight: 600; white-space: nowrap; background: #1c1e1f; color: var(--text-2); padding: 2px 7px; border-radius: 4px; }
.review-comment p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.rt-brilliant { color: var(--rv-brilliant); }
.rt-best { color: var(--rv-best); }
.rt-good { color: var(--rv-good); }
.rt-inaccuracy { color: var(--rv-inaccuracy); }
.rt-mistake { color: var(--rv-mistake); }
.rt-blunder { color: var(--rv-blunder); }
.review-alt-hint { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); margin-top: 6px; }
.review-alt-swatch { width: 18px; height: 4px; border-radius: 2px; background: var(--rv-arrow); display: inline-block; }

@media (max-width: 860px) {
  .review-acc { min-width: 80px; padding: 3px 9px; }
  .review-acc b { font-size: 18px; }
}

/* drawing on the board */
.annot-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.annot-row .btn.on { background: var(--green); }
.annot-hint { font-size: 12px; flex: 1; min-width: 180px; }
.annot-colours { display: flex; gap: 6px; }
.annot-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.annot-dot.on { border-color: #fff; }
.annot-dot.red { background: #e0483c; }
.annot-dot.green { background: #3fae49; }
.annot-dot.blue { background: #3a7fd9; }
.annot-dot.yellow { background: #f2c230; }