/* Game Review tool. The shell comes from the TOOL PAGE TEMPLATE block in
   styles.css; only what is specific to this page lives here. Board squares,
   move-quality colors, and the arrow colors carry meaning and stay fixed,
   as the site rules allow. */

.gr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 16px;
  align-items: start;
}

.gr-grid .tool-input,
.gr-grid select.tool-input,
.gr-import-row .tool-input {
  font-size: 14px;
  padding: 7px 10px;
}

.gr-heading {
  margin: 18px 0 6px;
  font-size: 1rem;
}

.gr-drop {
  border: 2px dashed var(--site-control-border);
  border-radius: 8px;
  padding: 18px 16px;
  text-align: center;
  cursor: pointer;
  background: var(--bs-body-bg, #fff);
}

.gr-drop:hover,
.gr-drop:focus-visible,
.gr-drop.over {
  border-color: var(--site-accent);
  outline: none;
}

.gr-drop p { margin: 0; }
.gr-link { color: var(--site-accent); text-decoration: underline; }

.gr-more { margin-top: 10px; }
.gr-more > summary { cursor: pointer; font-size: 14px; color: var(--bs-secondary-color, #555); }

.gr-paste { font-family: var(--font-mono); font-size: 13px; }

.gr-import-row {
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr minmax(110px, auto) auto;
  gap: 8px;
  align-items: stretch;
  margin-top: 8px;
}

@media (max-width: 640px) {
  .gr-import-row { grid-template-columns: 1fr 1fr; }
}

.gr-games-list { max-height: 220px; overflow: auto; font-size: 13px; }
.gr-games-list li { display: flex; gap: 10px; align-items: baseline; }
.gr-games-list .gr-muted { color: var(--bs-secondary-color, #888); }

.gr-names { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 8px; }
.gr-names label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.gr-checks { display: flex; gap: 14px; padding-top: 8px; font-size: 14px; }
.gr-checks label { display: inline-flex; gap: 6px; align-items: center; }

.gr-estimate { margin: 8px 0 0; font-size: 14px; }

.gr-progress { margin-top: 10px; }
.gr-progress progress { width: 100%; height: 10px; accent-color: var(--site-accent); }

/* ---------- profile ---------- */

.gr-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 6px 0 4px;
}

.gr-tile {
  padding: 10px 12px;
  border: 1.5px solid var(--site-control-border);
  border-radius: 8px;
  background: var(--bs-body-bg, #fff);
}

.gr-tile .gr-tile-value { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.gr-tile .gr-tile-label { font-size: 12px; color: var(--bs-secondary-color, #666); }
.gr-tile .gr-tile-sub { font-size: 12px; color: var(--bs-secondary-color, #666); margin-top: 2px; }

.gr-table-wrap { max-width: 100%; overflow-x: auto; }

.gr-table {
  border-collapse: collapse;
  font-size: 14px;
  margin: 0;
  width: auto;
}

.gr-table th,
.gr-table td { padding: 5px 10px; border-bottom: 1px solid var(--site-control-border); text-align: left; white-space: nowrap; }
.gr-table td.num, .gr-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.gr-table td.wrap { white-space: normal; }

.gr-cards { display: grid; gap: 10px; margin: 6px 0; }

.gr-card {
  border: 1.5px solid var(--site-control-border);
  border-left: 4px solid var(--site-accent);
  border-radius: 8px;
  padding: 10px 14px;
  background: var(--bs-body-bg, #fff);
}

.gr-card.habit { border-left-color: var(--site-accent-muted); }
.gr-card h4 { margin: 0 0 4px; font-size: 15px; }
.gr-card .gr-card-sum { margin: 0 0 6px; font-size: 14px; }
.gr-card .gr-advice { margin: 4px 0; font-size: 13.5px; }
.gr-card .gr-advice b { font-weight: 600; }
.gr-evidence { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.gr-evidence button {
  font: inherit; font-size: 13px; padding: 3px 9px; cursor: pointer;
  border: 1.5px solid var(--site-control-border); border-radius: 999px;
  background: transparent; color: inherit;
}
.gr-evidence button:hover { border-color: var(--site-accent); color: var(--site-accent); }
/* Selected marks sit on a tinted fill with accent text rather than on a solid
   accent fill. Small text on the accent is the weak case: Darkly's accent is a
   light green whose --site-accent-contrast is white, which measures 2.4:1,
   while accent text on the tint measures above 5:1 in every theme. */
.gr-evidence button.on {
  background: transparent;
  border-color: var(--site-accent);
  color: var(--site-accent);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--site-accent);
}

.gr-trend { margin-top: 6px; }
.gr-trend svg { width: 100%; max-width: 640px; height: auto; display: block; }
.gr-trend .axis { stroke: var(--site-control-border); stroke-width: 1; }
.gr-trend .line { fill: none; stroke: var(--site-accent); stroke-width: 2; }
.gr-trend .line.alt { stroke: var(--site-accent-muted); stroke-dasharray: 4 3; }
.gr-trend .dot { fill: var(--site-accent); }
.gr-trend text { fill: var(--bs-secondary-color, #666); font-size: 11px; }

/* ---------- board ---------- */

.gr-board-layout {
  display: grid;
  /* The board takes the larger share of the row and grows with the window,
     while the side panel keeps a readable measure. */
  grid-template-columns: minmax(320px, 1.7fr) minmax(300px, 1fr);
  gap: 20px;
  align-items: start;
}

@media (max-width: 860px) {
  .gr-board-layout { grid-template-columns: 1fr; }
}

/* Capped by the viewport height rather than a fixed pixel width, so the whole
   board stays on screen on a laptop and fills the space on a large monitor. */
.gr-board {
  position: relative;
  width: 100%;
  max-width: min(78vh, 900px);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

@media (max-width: 860px) {
  .gr-board { max-width: min(96vw, 560px); margin: 0 auto; }
}
/* eight equal tracks each way inside a square box, so every cell is a
   square and the arrow overlay's 8 by 8 coordinates land on the cells */
.gr-board .gr-squares {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 0;
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}
.gr-sq { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; min-width: 0; min-height: 0; overflow: hidden; }
.gr-sq.light { background: #e7e1d4; }
.gr-sq.dark { background: #5c7d40; }
.gr-sq img { width: 88%; height: 88%; object-fit: contain; pointer-events: none; }
.gr-sq.last { box-shadow: inset 0 0 0 100px rgba(155, 199, 0, .28); }
.gr-sq.sel { outline: 3px solid #f6c144; outline-offset: -3px; }
.gr-sq.check { box-shadow: inset 0 0 0 100px rgba(204, 0, 0, .35); }
.gr-sq.mark-good { box-shadow: inset 0 0 0 100px rgba(39, 174, 96, .4); }
.gr-sq.mark-bad { box-shadow: inset 0 0 0 100px rgba(231, 76, 60, .4); }
.gr-sq.mark-hint { box-shadow: inset 0 0 0 100px rgba(44, 123, 229, .4); }
.gr-dot { position: absolute; width: 26%; height: 26%; border-radius: 50%; background: rgba(0, 0, 0, .18); }
.gr-dot.cap { width: 86%; height: 86%; background: transparent; border: 5px solid rgba(0, 0, 0, .18); box-sizing: border-box; }
.gr-coord { position: absolute; font-size: 10px; line-height: 1; color: rgba(0, 0, 0, .55); font-family: var(--font-sans); }
.gr-sq.dark .gr-coord { color: rgba(255, 255, 255, .7); }
.gr-coord.rank { top: 2px; left: 3px; }
.gr-coord.file { bottom: 2px; right: 3px; }
.gr-ghost { position: fixed; pointer-events: none; z-index: 999; opacity: .85; }
.gr-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gr-arrow line { stroke-linecap: round; }
.gr-arrow.best line { stroke: rgba(44, 123, 229, .8); } .gr-arrow.best polygon { fill: rgba(44, 123, 229, .8); }
.gr-arrow.played line { stroke: rgba(231, 76, 60, .8); } .gr-arrow.played polygon { fill: rgba(231, 76, 60, .8); }
.gr-arrow.threat line { stroke: rgba(230, 126, 34, .85); } .gr-arrow.threat polygon { fill: rgba(230, 126, 34, .85); }
.gr-promo {
  position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);
  display: flex; gap: 6px; padding: 8px; border-radius: 8px;
  background: var(--bs-body-bg, #fff); border: 2px solid var(--site-accent); z-index: 5;
}
.gr-promo-btn { width: 52px; height: 52px; padding: 4px; border: 1.5px solid var(--site-control-border); border-radius: 6px; background: transparent; cursor: pointer; }
.gr-promo-btn img { width: 100%; height: 100%; }
.gr-promo-btn:hover { border-color: var(--site-accent); }

.gr-board-bar { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.gr-board-bar .tool-button { padding: 4px 12px; font-size: 18px; line-height: 1; }
.gr-eval { font-family: var(--font-mono); font-size: 14px; margin-left: auto; }

.gr-board-title { font-weight: 600; margin: 0 0 4px; }
.gr-objective {
  margin: 0 0 6px;
  padding: 7px 10px;
  font-size: 13.5px;
  border-left: 3px solid var(--site-accent);
  background: var(--site-accent-soft);
  border-radius: 0 5px 5px 0;
}
.gr-drill-status { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.gr-drill-status .gr-step { color: var(--site-accent); }
.gr-recap {
  margin: 8px 0;
  padding: 10px 12px;
  border: 1.5px solid var(--site-control-border);
  border-left: 4px solid var(--site-accent);
  border-radius: 8px;
  font-size: 13.5px;
}
.gr-recap h4 { margin: 0 0 6px; font-size: 15px; }
.gr-quiz { display: grid; gap: 6px; margin: 4px 0 8px; }
.gr-quiz .tool-button { text-align: left; font-size: 13px; padding: 7px 10px; white-space: normal; }
.gr-quiz .tool-button.right { border-color: #27ae60; color: #27ae60; box-shadow: inset 0 0 0 1px #27ae60; }
.gr-quiz .tool-button.wrong { border-color: #e74c3c; color: #e74c3c; }
.gr-quiz .tool-button:disabled { opacity: 1; cursor: default; }
.gr-quiz-verdict { font-weight: 600; }
.gr-quiz-verdict.right { color: #27ae60; }
.gr-quiz-verdict.wrong { color: #e74c3c; }
.gr-recap p { margin: 0 0 5px; }
.gr-recap p:last-child { margin-bottom: 0; }
.gr-recap b { font-weight: 600; }
.gr-recap .gr-recap-next { color: var(--bs-secondary-color, #666); font-size: 12.5px; }
.gr-opponent-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 10px 0 4px; }
.gr-opponent-row .tool-label { margin: 0; }
.gr-opponent-row .tool-input { width: auto; font-size: 13px; padding: 5px 8px; }
.gr-opponent-row .tool-note { flex: 1 1 100%; margin: 0; }
.gr-board-note { margin: 0 0 8px; font-size: 14px; }
.gr-lines { font-size: 13.5px; display: grid; gap: 4px; margin-bottom: 8px; }
.gr-lines .gr-line-label { color: var(--bs-secondary-color, #666); margin-right: 6px; }
.gr-lines .gr-line-moves { font-family: var(--font-mono); }
.gr-moves { font-family: var(--font-mono); font-size: 13px; line-height: 1.7; max-height: 220px; overflow: auto; }
.gr-moves .gr-mv { cursor: pointer; padding: 0 3px; border-radius: 3px; }
.gr-moves .gr-mv:hover { background: var(--site-accent-soft); }
.gr-moves .gr-mv.cur {
  color: var(--site-accent);
  font-weight: 700;
  box-shadow: inset 0 0 0 1.5px var(--site-accent);
}
.gr-moves .gr-mv.inaccuracy { color: #c9990a; }
.gr-moves .gr-mv.mistake { color: #e67e22; }
.gr-moves .gr-mv.blunder { color: #e74c3c; font-weight: 700; }
.gr-moves .gr-num { color: var(--bs-secondary-color, #888); margin-left: 6px; }

/* ---------- drills ---------- */

.gr-drill-list { padding-left: 1.4em; font-size: 14px; display: grid; gap: 4px; }
.gr-drill-list li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gr-drill-list .gr-drill-label { flex: 1 1 200px; }
.gr-drill-list .gr-drill-meta { color: var(--bs-secondary-color, #888); font-size: 12.5px; }
.gr-drill-list .gr-score { font-variant-numeric: tabular-nums; min-width: 3.5em; text-align: right; }
.gr-drill-list .gr-score.pass { color: #27ae60; }
.gr-drill-list .gr-score.fail { color: #e74c3c; }
.gr-drill-list .tool-button { padding: 3px 10px; font-size: 13px; }
.gr-drill-list li.cur .gr-drill-label { font-weight: 600; }
.gr-drill-summary { margin-top: 10px; font-size: 14px; }

.gr-share-box {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1.5px solid var(--site-control-border);
  border-left: 4px solid var(--site-accent);
  border-radius: 8px;
}
.gr-share-box .gr-heading { margin-top: 0; }
.gr-share-link-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 0; }
.gr-share-link-row .tool-button { padding: 4px 12px; font-size: 13px; }
a.gr-share-link {
  flex: 1 1 260px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  overflow-wrap: anywhere;
  padding: 6px 10px;
  border: 1.5px solid var(--site-control-border);
  border-radius: 6px;
}
a.gr-share-link:hover { border-color: var(--site-accent); }
.gr-share-list { margin-top: 10px; font-size: 13.5px; }
.gr-share-list li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 4px 0; }
.gr-share-list .gr-share-title { flex: 1 1 200px; font-weight: 600; }
.gr-share-list .tool-button { padding: 3px 10px; font-size: 13px; }

.gr-credits { margin-top: 20px; }
.gr-muted { color: var(--bs-secondary-color, #888); }
.gr-good { color: #27ae60; }
.gr-bad { color: #e74c3c; }