/* teaching overlay + info panel (scoped to .teach-* so it never touches normal play) */
.cb-teach{position:absolute;inset:0;z-index:4;pointer-events:none}
.teachcell{position:absolute;width:12.5%;height:12.5%;left:0;top:0;display:flex;align-items:center;justify-content:center}
.teachdot{width:62%;height:62%;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.35) inset;opacity:.9}
.teachcell.best .teachdot{box-shadow:0 0 0 3px #fff inset,0 0 10px rgba(0,0,0,.35)}
.teachcell.sel .teachdot{outline:3px solid #fff;outline-offset:-1px}
/* occupied squares (learner feedback on the moved piece, capture targets):
   a translucent full-square tint UNDER the piece instead of a covering dot */
.teachcell.under .teachdot{width:94%;height:94%;border-radius:16%;opacity:.5}
.teachcell.under.sel .teachdot{opacity:.62}

/* toolbar row shown above the board in teaching mode */
.teachbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.teachbar select{padding:5px 8px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit}
.teachbar .tswatch{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink3)}
.tgrad{width:70px;height:9px;border-radius:6px;background:linear-gradient(90deg,hsla(0,80%,45%,.62),hsla(65,80%,45%,.62),hsla(130,80%,45%,.62))}

/* the explanation panel */
.cb-teachpop{position:absolute;z-index:20;width:210px;max-width:60%;transform:translate(-50%,calc(-100% - 12px));pointer-events:auto;filter:drop-shadow(0 8px 22px rgba(0,0,0,.35))}
.cb-teachpop.below{transform:translate(-50%,12px)}
.cb-teachpop .tpbody{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
/* THE CARD'S POINTER. It was a --panel-filled wedge with one 1px shadow in
   --line: white on pale wood, invisible (reported). It is now built from two
   stacked triangles - an edge triangle behind, the panel fill 1.5px inside -
   so it carries the same outline the card body does, on every square colour.
   The edge colour flips with the theme, because a dark outline round a dark
   caret would vanish in dark mode exactly as the pale one did in light.
   One class, so every card that uses it moves together: teaching, learner
   feedback, puzzle hints, the failed-puzzle post-mortem and lessons. */
.cb-teachpop .tpcaret{
  --caretEdge:rgba(0,0,0,.5);
  position:absolute;left:var(--caret,50%);bottom:-13px;transform:translateX(-50%);
  width:26px;height:13px;pointer-events:none;
}
html[data-bg="dark"] .cb-teachpop .tpcaret{--caretEdge:rgba(255,255,255,.62)}
.cb-teachpop .tpcaret::before,
.cb-teachpop .tpcaret::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:0;height:0;border-style:solid;
}
/* pointing DOWN (card sits above the square) */
.cb-teachpop .tpcaret::before{top:0;border-width:13px 13px 0 13px;border-color:var(--caretEdge) transparent transparent transparent}
.cb-teachpop .tpcaret::after{top:0;border-width:11.5px 11.5px 0 11.5px;border-color:var(--panel) transparent transparent transparent}
/* pointing UP (card flipped below the square) */
.cb-teachpop.below .tpcaret{bottom:auto;top:-13px}
.cb-teachpop.below .tpcaret::before{top:auto;bottom:0;border-width:0 13px 13px 13px;border-color:transparent transparent var(--caretEdge) transparent}
.cb-teachpop.below .tpcaret::after{top:auto;bottom:0;border-width:0 11.5px 11.5px 11.5px;border-color:transparent transparent var(--panel) transparent}
.tphead{display:flex;align-items:center;gap:8px}
.tpbest{font-size:10.5px;color:var(--gold);font-weight:700;margin-top:2px;text-transform:uppercase;letter-spacing:.4px}
.tmove{font-family:var(--mono);font-size:16px;font-weight:700}
.tlabel{font-size:11px;font-weight:800;letter-spacing:.5px;padding:2px 8px;border-radius:99px;text-transform:uppercase}
.tlabel.great,.tlabel.mate{background:rgba(129,182,76,.22);color:var(--green2)}
.tlabel.good{background:rgba(129,182,76,.16);color:var(--green2)}
.tlabel.ok,.tlabel.meh{background:var(--elev);color:var(--ink2)}
.tlabel.weak,.tlabel.risky{background:rgba(240,170,40,.18);color:#e0a028}
.tlabel.blunder{background:rgba(224,40,40,.18);color:#ff7a6e}
.cb-teachpop .twhy{font-size:13px;color:var(--ink2);margin-top:6px;line-height:1.45}
.cb-teachpop .tplay{margin-top:9px;width:100%}


#teachToggleRow{display:none;margin-top:8px;align-items:center;gap:12px}
#teachToggleRow.on{display:flex}
#teachHint.inline{flex:1;margin:0;font-size:12.5px}
#btnTeach.on{background:var(--gold);color:#231c00;border-color:var(--gold)}
#teachWrap{display:none}
#teachWrap.on{display:block}

#teachHint .spinner{display:inline-block;width:12px;height:12px;border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:tspin .8s linear infinite;vertical-align:-2px;margin-right:5px}
@keyframes tspin{to{transform:rotate(360deg)}}
#btnTeach.busy{opacity:.75;pointer-events:none}