/* ---------- Koç modu and Maçı incele (board-coach.js, docs/specs/coach.md) ----------
   The coach sits in the arena footer, below the board, so it never covers a pit, hole or square. Verdicts carry an
   icon and a word as well as a colour; marks differ by line style (better solid, hint dashed, played dotted). */

#arenaFooter:has(> .board-coach) { align-items:center; justify-content:space-between; }
.board-footer__actions { display:flex; flex:none; gap:10px; }
.board-footer__actions:empty { display:none; }
.board-coach { display:flex; flex:1; align-items:center; gap:10px; min-width:0; }
.board-coach [hidden] { display:none !important; }
.board-coach__actions { display:flex; flex:none; align-items:center; gap:8px; }

/* The verdict chip: icon, label and reason, then who moved. */
.board-coach__chip { display:flex; flex:1; align-items:center; gap:10px; min-width:0; min-height:48px; margin:0; padding:6px 12px; color:var(--ink); background:var(--surface); border:2px solid var(--line-strong); border-radius:14px; font-size:15px; line-height:1.3; }
.board-coach__text { flex:1; min-width:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.board-coach__text strong { margin-right:4px; font-weight:850; }
.board-coach__better, .board-review__better { display:block; font-weight:750; }
.board-coach__meta { flex:none; font-size:12.5px; font-weight:700; color:var(--ink-2); white-space:nowrap; }
.board-coach__icon { display:grid; flex:none; place-items:center; width:30px; height:30px; font-size:17px; font-weight:900; line-height:1; color:var(--surface); background:var(--ink-2); border-radius:50%; }
[data-verdict] > .board-coach__icon { background:var(--verdict, var(--ink-2)); }
[data-verdict="idle"] > .board-coach__icon { color:var(--brand-ink); background:var(--brand-tint-2); }
[data-verdict="pending"] { background:var(--surface-soft); }
[data-verdict="pending"] > .board-coach__icon { color:var(--ink-2); background:var(--surface-3); }
[data-verdict="best"] { --verdict:var(--green-ink); color:var(--green-ink); background:var(--green-tint); border-color:currentColor; }
[data-verdict="good"] { --verdict:var(--sky-ink); color:var(--sky-ink); background:var(--sky-tint); border-color:currentColor; }
[data-verdict="missed"] { --verdict:var(--gold-ink); color:var(--gold-ink); background:var(--gold-tint); border-color:currentColor; }
[data-verdict="mistake"] { --verdict:var(--red-ink); color:var(--red-ink); background:var(--red-tint); border-color:currentColor; }
[data-verdict] .board-coach__meta { color:inherit; opacity:.85; }

.board-coach__count { display:inline-grid; place-items:center; min-width:22px; height:22px; margin-left:2px; padding:0 6px; font-size:13px; color:var(--on-brand); background:var(--brand); border-radius:999px; }
.board-coach__hint:disabled .board-coach__count { background:var(--ink-3); }
.board-coach__hint[aria-busy="true"] { cursor:progress; }
.board-coach__show[aria-pressed="true"] { color:var(--green-ink); border-color:currentColor; box-shadow:inset 0 0 0 1px currentColor; }
.board-coach__switch { position:relative; display:inline-block; width:34px; height:20px; margin-right:8px; vertical-align:-4px; background:var(--green-ink); border-radius:999px; }
.board-coach__switch::after { content:""; position:absolute; top:3px; left:17px; width:14px; height:14px; background:var(--surface); border-radius:50%; }
.board-coach__toggle[aria-pressed="false"] .board-coach__switch { background:var(--ink-3); }
.board-coach__toggle[aria-pressed="false"] .board-coach__switch::after { left:3px; }

/* Marks on the board: the better move (Göster), the best move (İpucu) and, in Maçı incele, the move played. */
#arenaDialog [data-coach-mark] { outline:4px solid var(--green-ink); outline-offset:3px; }
/* A marked element rises above its neighbours so they do not cover the outline. Zero specificity: a game's own
   position or z-index (Pentago lifts its turn buttons above the corner referee on phones) wins. */
:where(#arenaDialog [data-coach-mark]) { position:relative; z-index:2; }
#arenaDialog [data-coach-mark="hint"] { outline-style:dashed; outline-color:var(--focus); }
#arenaDialog [data-coach-mark="played"] { outline-style:dotted; outline-color:var(--ink); }
#arenaDialog .pentago-hole[data-coach-mark] { border-radius:50%; }
/* A marked turn button stays legible while the turn step is not yet open (it is still disabled). */
#arenaDialog .pentago-turn:disabled[data-coach-mark] { opacity:.8; filter:none; }
@media (prefers-reduced-motion: no-preference) {
  body:not(.reduced-motion) .board-coach__switch::after { transition:left var(--dur-fast, .15s) ease; }
  body:not(.reduced-motion) #arenaDialog .board-arena:not(.board-review__board) :is([data-coach-mark="better"], [data-coach-mark="hint"]) { animation:coach-mark 1.4s ease-in-out infinite; }
}
@keyframes coach-mark { 50% { outline-offset:7px; } }

/* Maçı incele: replaces the result screen until Sonuca dön or Esc. */
.board-review { display:flex; flex-direction:column; gap:14px; max-width:1180px; margin:0 auto; padding:2px 0 12px; color:var(--ink); }
.board-review:focus { outline:none; }
.board-review:focus-visible { outline:2px solid var(--focus); outline-offset:6px; border-radius:12px; }
.board-review__head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.board-review__head h3 { margin:0; font-size:24px; }
.board-review__head h3 small { margin-left:6px; font-size:14px; font-weight:700; color:var(--ink-2); }
.board-review__count { margin:2px 0 0; font-size:15px; font-weight:800; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.board-review__body { display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(280px, 1fr); gap:18px; align-items:start; }
.board-review__stage { display:flex; flex-direction:column; gap:8px; min-width:0; }
.board-review__board { flex:none; height:min(58vh, 470px); min-height:240px; padding:10px; background:var(--surface-soft); border:1px solid var(--line); border-radius:18px; }
/* The replayed board is a picture: the live game's step prompt and announcer line would only mislead here. */
.board-review__board :is(.pentago-phase, .pentago-live, .abluka-phase, .abluka-live) { visibility:hidden; }
.board-review__legend { display:flex; gap:16px; margin:0; font-size:13px; font-weight:700; color:var(--ink-2); }
.board-review__key::before { content:""; display:inline-block; width:14px; height:14px; margin-right:6px; vertical-align:-2px; border-radius:4px; }
.board-review__key--played::before { outline:3px dotted var(--ink); outline-offset:-3px; }
.board-review__key--better::before { outline:3px solid var(--green-ink); outline-offset:-3px; }
.board-review__side { display:flex; flex-direction:column; gap:12px; min-width:0; }
.board-review__move { margin:0; font-size:17px; font-weight:750; line-height:1.4; }
.board-review__verdict { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; background:var(--surface); border:2px solid var(--line-strong); border-radius:16px; }
.board-review__verdict p { margin:0; font-size:16px; line-height:1.4; }
.board-review__verdict strong { margin-right:4px; font-weight:850; }
.board-review__nav { display:flex; gap:10px; }
.board-review__nav .button { flex:1; min-height:48px; }
.board-review__keys { margin:0; font-size:13px; color:var(--ink-2); }
.board-review__critical { padding:12px 14px; background:var(--surface-soft); border:1px solid var(--line); border-radius:16px; }
.board-review__critical h4 { margin:0 0 8px; font-size:16px; }
.board-review__critical ol { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.board-review__critical li button { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:6px 10px; font:inherit; font-size:14.5px; text-align:left; border:2px solid currentColor; border-radius:12px; cursor:pointer; }
.board-review__critical li button[aria-current="step"] { box-shadow:0 0 0 3px var(--focus); }
.board-review__critical li button:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.board-review__critical .board-coach__icon { width:24px; height:24px; font-size:14px; }
.board-review__note { margin:6px 0 0; font-size:13.5px; color:var(--ink-2); }

@media (max-width: 680px), (max-height: 520px) {
  /* Phones: the chip takes a row of its own; the coach's buttons and the game's own share the rows below it. */
  #arenaFooter:has(> .board-coach) { flex-wrap:wrap; gap:6px; }
  #arenaFooter > .board-coach { flex:1 1 100%; flex-wrap:wrap; gap:6px; }
  #arenaFooter > .board-coach > .board-coach__actions, #arenaFooter > .board-footer__actions { flex:1 1 auto; flex-wrap:wrap; gap:6px; }
  .board-coach__chip { flex:1 1 100%; min-height:44px; padding:5px 10px; font-size:14px; }
  .board-coach__icon { width:26px; height:26px; font-size:15px; }
  .board-coach__meta { display:none; }
  .board-coach__text { -webkit-line-clamp:3; }
  #arenaFooter:has(> .board-coach) .button { flex:1 1 auto; min-height:44px; padding:6px 10px; font-size:14px; }
  .board-review__body { grid-template-columns:minmax(0, 1fr); gap:12px; }
  .board-review__head h3 { font-size:20px; }
  .board-review__board { height:min(40vh, 330px); min-height:200px; padding:6px; }
}
@media (max-height: 520px) {
  /* Landscape phones: a second footer row would take the board's height, so the chip shares one row with every
     button and keeps two lines of reason. */
  #arenaFooter:has(> .board-coach), #arenaFooter > .board-coach { flex-wrap:nowrap; }
  #arenaFooter > .board-coach { flex:1 1 auto; }
  #arenaFooter > .board-coach > .board-coach__actions, #arenaFooter > .board-footer__actions { flex:none; flex-wrap:nowrap; }
  .board-coach__chip { flex:1 1 auto; }
  .board-coach__text { -webkit-line-clamp:2; }
}
@media (orientation: landscape) and (min-width: 600px) and (max-height: 500px) {
  /* Short landscape phone: the reason wraps to three lines and scrolls inside the chip beyond that, never cut off;
     thin paddings keep the board's height (Mangala's pits stay 44 px wide). */
  #arenaDialog #arenaFooter:has(> .board-coach) { padding-block:4px; }
  .board-coach__chip { padding-block:2px; }
  .board-coach__text { display:block; -webkit-line-clamp:none; max-height:calc(3 * 1.3em); overflow-y:auto; overscroll-behavior:contain; }
}
@media (max-height: 520px) and (min-width: 681px) {
  .board-review__body { grid-template-columns:minmax(0, 1.3fr) minmax(240px, 1fr); }
  .board-review__board { height:min(62vh, 300px); }
}

body.high-contrast .board-coach__chip, body.high-contrast .board-review__verdict { border-width:3px; }
body.high-contrast #arenaDialog [data-coach-mark] { outline-width:5px; outline-color:#000; }