/* Chess Coach Andre — Classroom. Colors and fonts follow chesscoachandre.com: cream, deep green, gold. */
:root {
  --bg: #f4f3e8;
  --checker: rgba(46, 74, 46, .045); /* the faint green squares in the page background */
  --forest: #2e4a2e;
  --surface: #fffdf7;
  --ink: #1d2320;
  --muted: #6b6f68;
  --line: #e2d9c3;
  --green: #2f5240;
  --green-dark: #213b2e;
  --gold: #c09a3e;
  --gold-dark: #9c7a26;
  --red: #b23b3b;
  --sq-light: #efe6cf;
  --sq-dark: #7f9b6c;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 16px rgba(40,35,20,.07);
  --serif: 'Cinzel', Georgia, serif;
  --sans: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  /* A faint checkerboard of 40px squares, like the main site. */
  background:
    conic-gradient(var(--checker) 0 25%, transparent 0 50%, var(--checker) 0 75%, transparent 0) 0 0 / 80px 80px,
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
h1, h2 { letter-spacing: .01em; }
h3 { font-family: var(--sans); font-weight: 700; }
h1 { font-size: 2rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
a { color: var(--green); }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.row { display: flex; align-items: center; flex-wrap: wrap; }
.gap { gap: 8px; }
.spacer { flex: 1; }
.stack { display: flex; flex-direction: column; gap: 10px; }

input, textarea, select {
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  width: 100%;
}
textarea { resize: vertical; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

.btn {
  font: 500 .9rem var(--sans);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: var(--gold); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.small { padding: 6px 10px; font-size: .82rem; }
.btn.icon { width: 40px; padding: 7px 0; }
.btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--green-dark); border-color: var(--green-dark); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn.danger { color: var(--red); }
.btn.on { background: var(--green); color: #fff; border-color: var(--green); }

/* --- top bar ---------------------------------------------------------- */
.topbar {
  position: relative;
  background: #16201b;
  color: #f6f1e4;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  margin-bottom: 28px;
}
/* Two rows of small green and cream squares under the top bar, like the main site's section edges. */
.topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 28px;
  background:
    linear-gradient(90deg, var(--forest) 50%, var(--bg) 50%) 0 0 / 28px 14px repeat-x,
    linear-gradient(90deg, var(--bg) 50%, var(--forest) 50%) 0 14px / 28px 14px repeat-x;
  pointer-events: none;
}
.brand { color: #f6f1e4; text-decoration: none; font: 700 1.1rem var(--serif); white-space: nowrap; letter-spacing: .02em; }
.brand span { color: var(--gold); font-weight: 500; margin-left: 4px; }
.topbar-mid { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-mid #roomTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar .btn:not(.gold) { background: transparent; color: #f6f1e4; border-color: rgba(246,241,228,.3); }
.rec-badge { color: #ff8b8b; font-size: .82rem; font-weight: 600; animation: pulse 1.6s infinite; white-space: nowrap; }
@keyframes pulse { 50% { opacity: .45; } }
.peers { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.peer { font-size: .78rem; padding: 3px 9px; border-radius: 99px; background: rgba(255,255,255,.1); white-space: nowrap; }
.peer::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #5fd17a; margin-right: 6px; vertical-align: 1px; }
.peer.coach { background: rgba(192,154,62,.25); }

.banner { background: #fff4d6; border-bottom: 1px solid #ecd48a; padding: 8px 20px; text-align: center; font-size: .9rem; }
.banner.fatal { background: #fde3e3; border-color: #f0b4b4; }
main.disabled { opacity: .4; pointer-events: none; }

/* --- classroom layout ------------------------------------------------- */
.room {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  padding: 20px;
  max-width: 1280px;
  margin: 0 auto;
}
/* With cameras: student on the left of the board, coach on the right. */
.room.with-cams { grid-template-columns: 310px minmax(0, 1fr) 340px; gap: 20px; max-width: 1700px; }
.cam-col { min-width: 0; }

/* Chapters list under the student's camera. */
.chapters-panel { margin-top: 14px; padding: 12px; }
.chapters-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.chapters-head h3 { margin: 0; }
.chapter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow-y: auto; counter-reset: chapter; }
.chapter { display: flex; align-items: center; gap: 6px; border-radius: 8px; border: 1px solid transparent; }
.chapter-open { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; text-align: left; background: none; border: 0; padding: 7px 8px; font: 500 .88rem var(--sans); color: var(--ink); cursor: pointer; border-radius: 8px; }
.chapter-open:disabled { cursor: default; }
.chapter-open::before { counter-increment: chapter; content: counter(chapter) "."; color: var(--muted); font-size: .8rem; min-width: 1.4em; }
.chapter-open .ch-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chapter:hover { background: #f3ecd9; }
.chapter.active { background: var(--green); }
.chapter.active .chapter-open, .chapter.active .chapter-open::before, .chapter.active .ch-tool { color: #fff; }
.ch-tools { display: none; gap: 0; padding-right: 4px; }
.chapter:hover .ch-tools, .chapter.active .ch-tools { display: flex; }
.ch-tool { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: .8rem; padding: 3px 4px; border-radius: 4px; }
.ch-tool:hover { background: rgba(0,0,0,.08); }
.chapter-empty { color: var(--muted); font-size: .85rem; padding: 4px 2px; }
/* Dragging to reorder (coach only). */
.chapter-list.draggable .chapter { touch-action: none; user-select: none; -webkit-user-select: none; }
.ch-grip { color: var(--muted); font-size: .85rem; padding-left: 6px; cursor: grab; opacity: .5; }
.chapter:hover .ch-grip { opacity: 1; }
.chapter.active .ch-grip { color: #fff; }
.chapter.dragging { position: relative; z-index: 2; background: var(--surface); box-shadow: 0 6px 18px rgba(0,0,0,.18); cursor: grabbing; opacity: .95; }
.chapter.dragging.active { background: var(--green); }
.chapter-list.reordering .chapter:not(.dragging) { transition: box-shadow .1s; }
.chapter.drop-before { box-shadow: inset 0 3px 0 var(--gold); }
.chapter.drop-after { box-shadow: inset 0 -3px 0 var(--gold); }
.chapter-list.reordering { cursor: grabbing; }
.board-col { min-width: 0; }
.board-row { display: flex; gap: 8px; justify-content: center; }
.board-holder { width: min(100%, calc(100vh - 200px)); min-width: 260px; }
.navbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px auto 0; width: min(100%, calc(100vh - 200px)); }
.hint { font-size: .78rem; color: var(--muted); text-align: center; margin: 8px 0 0; }
.side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.status-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 6px; }
.pill { font-size: .72rem; font-weight: 600; background: #f3ead2; color: var(--gold-dark); border-radius: 99px; padding: 2px 9px; white-space: nowrap; }

.movelist { max-height: 260px; overflow-y: auto; margin: 8px 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 4px; }
.mrow { display: grid; grid-template-columns: 38px 1fr 1fr; align-items: center; }
.mrow:nth-child(odd) { background: #faf7ee; }
.mno { color: var(--muted); font-size: .82rem; padding-left: 6px; }
.mv { font: 500 .9rem var(--sans); text-align: left; background: none; border: 0; padding: 4px 8px; border-radius: 6px; color: var(--ink); cursor: pointer; }
.mv:disabled { cursor: default; color: var(--ink); }
.mv:hover:not(:disabled) { background: #f0e8d2; }
.mv.active, .mv.active:hover:not(:disabled) { background: var(--green); color: #fff; }
.mv.empty { color: var(--muted); cursor: default; }

/* Book-style notation: move symbols (colours like Lichess), position symbols, comments. */
.glyph { font-weight: 700; margin-left: 1px; }
.g-good { color: #22ac38; }
.g-brilliant { color: #168226; }
.g-mistake { color: #e69f00; }
.g-blunder { color: #df5353; }
.g-interesting { color: #ea45d8; }
.g-dubious { color: #56b4e9; }
.eval-glyph { margin-left: 5px; font-weight: 600; color: var(--muted); }
.mv.active .glyph, .mv.active .eval-glyph { color: #fff; }
.mcomment { font-style: italic; font-size: .85rem; color: #4a5048; padding: 3px 10px 6px 38px; line-height: 1.4; white-space: pre-wrap; }
.mcomment.clickable { cursor: pointer; }
.mcomment.clickable:hover { color: var(--ink); }
/* Right-click menu on a move (coach). */
.ctx-menu {
  position: fixed; z-index: 1000; min-width: 220px; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(20, 30, 20, .22);
}
.ctx-head { display: flex; align-items: center; gap: 6px; font: 700 .8rem var(--sans); color: var(--muted); padding: 4px 8px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.ctx-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  font: 600 .9rem var(--sans); color: var(--ink); background: none; border: 0; border-radius: 6px; padding: 8px 10px; cursor: pointer;
}
.ctx-item:hover:not(:disabled) { background: #f3eedf; }
.ctx-item:disabled { color: #b3b1a6; cursor: default; }
.ctx-item.on { background: #e9f0e6; }
.ctx-item.danger { color: var(--red); border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; margin-top: 4px; }
.ctx-glyph { display: inline-block; min-width: 22px; text-align: center; font-weight: 800; }
.ctx-back { border: 0; background: none; font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--ink); padding: 0 4px; border-radius: 4px; }
.ctx-back:hover { background: #f3eedf; }

/* Side variations: indented under the move they branch from, written out like a book. */
.mvar {
  margin: 2px 4px 4px 22px; padding: 3px 8px; border-left: 2px solid #d9cfb4;
  font-size: .84rem; line-height: 1.7; color: #4a5048; background: #fcfaf3; border-radius: 0 6px 6px 0;
}
.mvar .mv { font-size: .84rem; padding: 1px 4px; color: #3b4339; }
.mvar .mv.active { color: #fff; }
.vno { color: var(--muted); font-size: .78rem; margin-left: 3px; }
.vcomment { font-style: italic; color: #6b6f68; margin: 0 4px; }
.vnest { color: var(--muted); }
.vnest .mv { color: #5b6358; }

/* Coach's annotation toolbar under the move list. */
.annotate-bar { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin: 0 0 10px; background: #fbf8ef; }
.annotate-bar .ann-label { font-size: .78rem; color: var(--muted); margin-bottom: 6px; }
.annotate-bar .ann-label strong { color: var(--ink); }
.ann-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.ann-btn { min-width: 30px; padding: 3px 6px; font: 700 .85rem var(--sans); background: #fff; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; color: var(--ink); }
.ann-btn:hover { border-color: var(--gold); }
.ann-btn.on { background: var(--green); border-color: var(--green); color: #fff; }
.ann-btn.wide { font-weight: 600; font-size: .78rem; }

.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
/* The coach's record button, next to Start call. */
.btn.rec-btn { color: var(--red); border-color: #efc9c9; background: #fff; }
.btn.rec-btn:hover:not(:disabled) { background: #fdf1f1; }
.btn.rec-btn.on { background: var(--red); color: #fff; border-color: var(--red); }
.toggle { display: flex; align-items: center; gap: 8px; font-size: .88rem; margin: 6px 0; cursor: pointer; }
.toggle input { width: auto; accent-color: var(--green); }
/* Sign-up: who the account is for, and the agreements. */
.who-for { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.who-for legend { margin-bottom: 6px; padding: 0; }
.who-choice { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 10px; cursor: pointer; background: #fff; }
.who-choice:has(input:checked) { border-color: var(--green); background: #f3f7f1; }
.who-choice input { width: auto; margin-top: 3px; accent-color: var(--green); }
.who-choice > span { display: flex; flex-direction: column; gap: 2px; }
.consents { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: #faf7ee; border: 1px solid var(--line); border-radius: 10px; }
.consents .toggle { align-items: flex-start; line-height: 1.4; }
.consents .toggle input { margin-top: 3px; flex: none; }
@media (max-width: 420px) { .who-for { grid-template-columns: 1fr; } }
.panel .row.gap { margin-top: 8px; }

.call-panel { padding: 12px; }
/* A camera picture: the student's sits left of the board, the coach's right of it. */
.tile { position: relative; aspect-ratio: 4 / 3; background: #16201b; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }
.tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile video.mirror { transform: scaleX(-1); }
.tile-off { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; color: #e9e2cf; font-size: .8rem; background: #16201b; }
.tile-off:empty { display: none; }
.tile-name { position: absolute; left: 6px; bottom: 6px; font-size: .72rem; font-weight: 600; color: #fff; background: rgba(0,0,0,.55); border-radius: 4px; padding: 1px 6px; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-name:empty { display: none; }
.call-controls { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.call-status { margin: 8px 0 0; }
.rec-notice { margin: 8px 0 0; padding: 8px 10px; background: #fdf1f1; border: 1px solid #f0cccc; border-radius: 8px; font-size: .85rem; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--green); text-decoration: underline; cursor: pointer; }
.rec-status { margin: -4px 0 10px; }
.btn.pulse { animation: glow 1.4s infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 5px rgba(192,154,62,.45); } }

.replay-video { margin-bottom: 0; }
.replay-video video { width: 100%; display: block; border-radius: 8px; background: #16201b; cursor: pointer; }
.replay-video-box { position: relative; }
.replay-video-box.audio-only .big-play { position: static; transform: none; width: 100%; }
.big-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font: 700 1.05rem var(--sans); color: #fff; background: rgba(46, 74, 46, .92);
  border: 2px solid var(--gold); border-radius: 99px; padding: 12px 22px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.big-play:hover { background: var(--forest); }
.board-col > .replay-video { margin-bottom: 14px; }

/* Replays: the board in the middle of the screen, as big as the window allows, with the student's camera
   (if any) on the left and the coach, moves and chat on the right. */
.room.replay-room {
  --replay-board: min(calc(100vh - 150px), calc(100vw - 760px));
  grid-template-columns: minmax(240px, 1fr) auto minmax(320px, 1fr);
  max-width: none;
  gap: 20px;
  align-items: start;
}
.replay-room .board-col { width: var(--replay-board); min-width: 360px; }
.replay-room .board-holder, .replay-room .navbar { width: 100%; }
.replay-room .board-holder { min-width: 0; }
.replay-room .side { max-width: 400px; }
.replay-room .cam-col { justify-self: end; width: 100%; max-width: 360px; }
.replay-controls { flex-wrap: nowrap; }
.replay-controls #scrub { flex: 1; min-width: 60px; }
.replay-controls .time { font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--muted); }
#skipIdleRow { margin-top: 4px; }
.replay-room #studentTile[hidden] + .chapters-panel { margin-top: 0; } /* no student camera: chapters at the top */
/* Narrower windows: board and side panel only; the student's camera (if any) goes above them. */
@media (max-width: 1250px) {
  .room.replay-room { --replay-board: min(calc(100vh - 150px), calc(100vw - 420px)); grid-template-columns: auto minmax(300px, 1fr); }
  .replay-room .cam-col { grid-column: 1 / -1; justify-self: center; }
  .replay-room .cam-col:not(:has(.tile:not([hidden]), .chapters-panel:not([hidden]))) { display: none; }
}
@media (max-width: 900px) {
  .room.replay-room { grid-template-columns: 1fr; }
  .replay-room .board-col { width: 100%; min-width: 0; }
  .replay-room .side { max-width: none; }
  .replay-controls { flex-wrap: wrap; }
}

.chat-log { height: 180px; overflow-y: auto; font-size: .88rem; display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.chat-msg .who { font-weight: 600; }
.chat-msg.coach .who { color: var(--gold-dark); }
.chat-form { display: flex; gap: 6px; }

/* --- board -------------------------------------------------------------- */
.board-wrap { position: relative; width: 100%; aspect-ratio: 1; border-radius: 4px; overflow: hidden; box-shadow: 0 6px 24px rgba(30,30,10,.22); user-select: none; -webkit-user-select: none; touch-action: none; }
svg.board { display: block; width: 100%; height: 100%; cursor: pointer; }
svg.board.dragging { cursor: grabbing; }
.sq-light { fill: var(--sq-light); }
.sq-dark { fill: var(--sq-dark); }
.coord { font: 600 .19px var(--sans); pointer-events: none; }
.coord.on-light { fill: var(--sq-dark); }
.coord.on-dark { fill: var(--sq-light); }
.hl-last { fill: rgba(205, 210, 106, .55); }
.hl-selected { fill: rgba(20, 85, 30, .45); }
.hl-check { fill: rgba(220, 30, 30, .55); }
.hint-move { fill: rgba(20, 85, 30, .45); pointer-events: none; }
.hint-capture { fill: none; stroke: rgba(20, 85, 30, .5); stroke-width: .08; pointer-events: none; }
.layer-arrows, .layer-ghost, .layer-coords { pointer-events: none; }
.glyph-badge { filter: drop-shadow(0 .02px .05px rgba(0,0,0,.45)); }
.glyph-badge-text { font: 800 .24px var(--sans); fill: #fff; letter-spacing: -.01px; }
.glyph-badge-text.two { font-size: .19px; } /* !! ?? !? ?! */
.layer-pieces use { pointer-events: none; }

.promo { position: absolute; width: 12.5%; display: flex; z-index: 5; box-shadow: 0 4px 18px rgba(0,0,0,.4); }
.promo button { aspect-ratio: 1; width: 100%; border: 0; background: #fff; cursor: pointer; padding: 4%; }
.promo button:hover { background: #f3ead2; }
.promo img { width: 100%; height: 100%; display: block; }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.choice { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; background: #fff; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font: 500 .85rem var(--sans); color: var(--ink); }
.choice:hover { border-color: var(--gold); }
.choice.active { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); background: #eef4ec; }
.choice-pieces { display: flex; }
.choice-pieces img { width: 38px; height: 38px; }
.swatch { width: 44px; height: 44px; border-radius: 4px; background: conic-gradient(var(--d) 0 25%, var(--l) 0 50%, var(--d) 0 75%, var(--l) 0); background-size: 50% 50%; }

.evalbar { position: relative; width: 22px; flex: none; background: #3b3b3b; border-radius: 4px; overflow: hidden; }
.evalfill { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: #f4f4f4; transition: height .4s ease; }
.evalbar.flipped .evalfill { bottom: auto; top: 0; }
.evalnum { position: absolute; left: 0; right: 0; top: 50%; text-align: center; font-size: .6rem; font-weight: 600; color: #888; mix-blend-mode: difference; transform: translateY(-50%); writing-mode: vertical-rl; }
.engine-box { margin: 10px auto 0; width: min(100%, calc(100vh - 200px)); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: .88rem; }
.eval-head { display: flex; gap: 10px; align-items: baseline; }
.pv { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; margin-top: 2px; }

/* --- modal ------------------------------------------------------------ */
dialog.modal { border: 0; border-radius: 14px; padding: 22px; width: min(460px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
dialog.modal.wide { width: min(760px, calc(100vw - 32px)); }
dialog.modal::backdrop { background: rgba(20,25,20,.5); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.pick { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; }
.pick:hover { border-color: var(--gold); }

.editor { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 18px; align-items: start; }
.editor-board { width: 100%; }
.palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.pal { aspect-ratio: 1; padding: 2px; border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer; font-size: 1.1rem; color: var(--red); }
.pal img { width: 100%; height: 100%; display: block; }
.pal.active { border-color: var(--green); background: #e5efe5; box-shadow: inset 0 0 0 1px var(--green); }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: #16201b; color: #fff; padding: 10px 18px; border-radius: 10px; font-size: .9rem; opacity: 0; pointer-events: none; transition: .2s; z-index: 100; max-width: calc(100vw - 32px); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.error { background: var(--red); }

/* --- simple pages (home, login, dashboard, lesson, replay) ------------- */
.page { max-width: 1080px; margin: 0 auto; padding: 32px 20px 60px; }
.hero { text-align: center; padding: 56px 20px 24px; }
.hero p { color: var(--muted); max-width: 520px; margin: 0 auto 24px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; box-shadow: var(--shadow); }
.narrow { max-width: 420px; margin: 0 auto; }
.join-form { display: flex; gap: 8px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { font: 600 .95rem var(--sans); background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; cursor: pointer; color: var(--muted); white-space: nowrap; }
.tab.active { color: var(--green); border-bottom-color: var(--gold); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.label { font-size: .8rem; font-weight: 600; color: var(--muted); display: block; margin-bottom: 4px; }

.list { display: flex; flex-direction: column; gap: 8px; }
.item { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; flex-wrap: wrap; }
.item-main { flex: 1; min-width: 200px; }
.item-main strong { display: block; }
.item-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dot-live { color: #2e9a4b; font-weight: 600; }
.empty-state { text-align: center; padding: 36px 16px; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; }
.mini-board { width: 64px; flex: none; }
.mini-board .board-wrap { box-shadow: none; border-radius: 3px; }
.mini-board .coord { display: none; }

.viewer { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
.notes { white-space: pre-wrap; }
.timeline { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.timeline input[type=range] { padding: 0; accent-color: var(--green); }
.time { font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--muted); white-space: nowrap; }
.speed { width: auto; padding: 5px 8px; }

/* --- accounts, library and store -------------------------------------- */
.acct-nav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.topbar .btn.on { background: rgba(192,154,62,.25); border-color: var(--gold); }
/* The student's welcome card: joining a lesson (classroom link and home page). */
dialog.welcome {
  border: 0; padding: 0; background: transparent; max-width: min(560px, calc(100vw - 32px)); width: 100%; overflow: visible;
}
dialog.welcome::backdrop { background: rgba(26, 40, 26, .55); backdrop-filter: blur(3px); }
.welcome-card {
  position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 58px 40px 30px; box-shadow: 0 18px 50px rgba(20, 30, 20, .25); overflow: hidden;
}
/* The site's green-and-cream checkered strip along the top. */
.welcome-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 20px;
  background:
    linear-gradient(90deg, var(--forest) 50%, var(--bg) 50%) 0 0 / 20px 10px repeat-x,
    linear-gradient(90deg, var(--bg) 50%, var(--forest) 50%) 0 10px / 20px 10px repeat-x;
}
.welcome-crest {
  width: 78px; height: 78px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center;
  background: var(--forest); color: #f4f3e8; font-size: 2.9rem; line-height: 1;
  box-shadow: 0 0 0 5px var(--surface), 0 0 0 7px var(--gold);
}
.welcome-kicker { margin: 4px 0 0; font: 700 .78rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dark); }
.welcome-card h1 { font: 700 2.1rem/1.15 var(--serif); color: var(--forest); margin: 6px 0 8px; }
.welcome-lead { color: var(--muted); margin: 0 auto 22px; max-width: 380px; font-size: 1.02rem; }
.welcome-card input { font-size: 1.2rem; padding: 14px 16px; text-align: center; border-radius: 12px; border-width: 2px; }
.welcome-card input:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 4px rgba(47, 82, 64, .15); }
.welcome-card input.invalid { border-color: var(--red); box-shadow: 0 0 0 4px rgba(178, 59, 59, .12); }
.welcome-card .welcome-error { margin: 10px auto 0; color: var(--red); font-weight: 700; font-size: .95rem; }
.welcome-go { margin-top: 12px; font-size: 1.12rem; padding: 14px 18px; border-radius: 12px; white-space: pre; }
.welcome-points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 6px; font-size: .9rem; color: #4a5048; }
.welcome-signin { margin: 18px 0 0; font-size: .85rem; color: var(--muted); }
.join-card, .home-card { max-width: 560px; margin: 0 auto; }
/* Front page: the big buttons (sign in / create account, or my classroom / my library). */
.home-actions { display: grid; gap: 10px; }
.home-actions .welcome-go { margin-top: 0; text-decoration: none; }
.btn.welcome-go.white { background: #fff; color: var(--forest); border: 2px solid var(--forest); }
.btn.welcome-go.white:hover { background: #f4f1e6; }
/* The classroom code: smaller, underneath. */
.code-form { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.welcome-card .code-label { margin: 0 0 8px; font-size: .88rem; font-weight: 700; color: var(--muted); }
.code-row { display: flex; gap: 8px; }
.welcome-card .code-row input { flex: 1; min-width: 0; font-size: 1rem; padding: 10px 12px; border-width: 1px; }
.code-row .btn { padding: 0 18px; }
@media (max-width: 520px) {
  .welcome-card { padding: 48px 20px 24px; }
  .welcome-card h1 { font-size: 1.7rem; }
}

/* Library cards: white cards in a grid, each with a picture of the lesson's position. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 16px; }
.card-grid > .empty-state { grid-column: 1 / -1; background: rgba(255, 253, 247, .7); }
/* Recorded lessons: one under another, newest first; the whole card opens the recording. */
.card-list { display: flex; flex-direction: column; gap: 12px; }
.card-list > .empty-state { background: rgba(255, 253, 247, .7); }
.card-list .lib-card { align-items: center; }
.card-list .card-thumb { width: 96px; }
.card-list .card-title { font-size: 1.15rem; }
a.lib-card.clickable { color: inherit; text-decoration: none; cursor: pointer; }
a.lib-card.clickable::after { content: '▶'; margin-left: auto; align-self: center; color: var(--green); font-size: 1.1rem; padding-right: 8px; }
a.lib-card.clickable:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.lib-card {
  display: flex; gap: 16px; align-items: stretch;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px;
  box-shadow: var(--shadow); transition: box-shadow .15s, transform .15s;
}
.lib-card:hover { box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 10px 26px rgba(40,35,20,.12); transform: translateY(-1px); }
.card-thumb { position: relative; flex: none; width: 132px; align-self: flex-start; display: block; border-radius: 6px; overflow: hidden; }
.card-board .board-wrap { box-shadow: none; border-radius: 6px; }
.card-board .coord { display: none; }
.card-thumb:hover .card-board { filter: brightness(1.05); }
.card-badge {
  position: absolute; left: 6px; bottom: 6px; background: rgba(22, 32, 27, .82); color: #fff;
  font: 700 .72rem var(--sans); padding: 2px 7px; border-radius: 999px; pointer-events: none;
}
.card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.card-title { font: 700 1.02rem/1.25 var(--serif); margin: 2px 0 0; color: var(--forest); letter-spacing: .01em; overflow-wrap: anywhere; }
.card-meta { margin: 0; font-size: .82rem; color: var(--muted); }
.card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.tag { font-size: .72rem; font-weight: 600; background: #f1ecdc; color: #5b5a45; padding: 1px 8px; border-radius: 999px; }
.card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }
@media (max-width: 520px) {
  .lib-card { gap: 12px; padding: 12px; }
  .card-thumb { width: 96px; }
}

/* The student's way into their classroom, at the top of their library. */
.classroom-banners { display: grid; gap: 12px; margin-top: 18px; }
.classroom-banners:empty { display: none; }
.classroom-banner {
  position: relative; display: flex; align-items: center; gap: 18px; overflow: hidden;
  padding: 30px 26px 22px; border-radius: 16px; text-decoration: none; color: #f4f3e8;
  background: linear-gradient(135deg, #2e4a2e, #3c6146);
  box-shadow: 0 8px 24px rgba(30, 50, 30, .28); transition: transform .15s, box-shadow .15s;
}
/* The checkered strip along the top, like the rest of the site. */
.classroom-banner::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px;
  background:
    linear-gradient(90deg, #f4f3e8 50%, transparent 50%) 0 0 / 12px 6px repeat-x,
    linear-gradient(90deg, transparent 50%, #f4f3e8 50%) 0 6px / 12px 6px repeat-x;
  opacity: .9;
}
.classroom-banner:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(30, 50, 30, .34); }
.classroom-banner:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.banner-crest {
  flex: none; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: #f4f3e8; color: var(--forest); font-size: 2.2rem; box-shadow: 0 0 0 3px var(--gold);
}
.banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.banner-text strong { font: 700 1.5rem/1.15 var(--serif); letter-spacing: .02em; }
.banner-text span { font-size: .92rem; opacity: .85; }
.banner-go {
  flex: none; background: var(--gold); color: #1d2320; font-weight: 800; padding: 12px 20px;
  border-radius: 999px; white-space: pre; box-shadow: 0 2px 0 rgba(0,0,0,.15);
}
.classroom-banner:hover .banner-go { background: #d4ad4c; }
@media (max-width: 560px) {
  .classroom-banner { flex-wrap: wrap; padding: 26px 18px 18px; }
  .banner-go { width: 100%; text-align: center; }
}

/* Privacy Policy and Terms of Use. */
.legal-card { max-width: 820px; margin: 0 auto; padding: 32px 36px; line-height: 1.6; }
.legal-card h1 { margin: 0; }
.legal-card h2 { font-size: 1.15rem; margin: 28px 0 8px; }
.legal-card ul { padding-left: 1.3em; }
.legal-card li { margin: 4px 0; }
.legal-date { color: var(--muted); font-size: .9rem; margin: 4px 0 20px; }
@media (max-width: 600px) { .legal-card { padding: 22px 18px; } }

/* Account and privacy, at the bottom of the library. */
.privacy-card h3 { margin: 20px 0 4px; }
.privacy-card select { max-width: 360px; }
.privacy-list { display: flex; flex-direction: column; gap: 6px; }
.privacy-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; background: #faf7ee; border: 1px solid var(--line); border-radius: 8px; }

.lib-section { margin-top: 32px; }
.lib-section h2 { margin-bottom: 10px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 18px; }
.chip { font: 500 .85rem var(--sans); padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.chip:hover { border-color: var(--gold); }
.chip.active { background: var(--green); border-color: var(--green); color: #fff; }
span.chip { cursor: default; font-size: .8rem; padding: 4px 10px; }
.chip-x { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 1rem; line-height: 1; padding: 0 0 0 6px; }
.chip-x:hover { color: var(--red); }
.pick:disabled { opacity: .5; cursor: default; }
.hero-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.store-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.store-thumb { background: #16201b; padding: 14px; display: flex; justify-content: center; min-height: 60px; }
.store-thumb .board-wrap { width: 150px; box-shadow: none; }
.store-thumb .coord { display: none; }
.store-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.store-body h3 { margin: 4px 0 0; font-size: 1.1rem; }
.store-desc { margin: 0; font-size: .9rem; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.store-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; }
.price { font-size: 1.15rem; }
.pill.level { background: #e5efe5; color: var(--green); }
.sell-badge { font-size: .72rem; font-weight: 600; color: #fff; background: var(--gold); border-radius: 99px; padding: 2px 8px; margin-left: 6px; vertical-align: 1px; }

/* --- footer, matching chesscoachandre.com ------------------------------- */
body { display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; } /* fill the window, not just what's inside (for the board) */
.site-footer {
  position: relative;
  margin-top: 56px;
  background: #e6dcc8;
  color: #212e21;
  padding: 50px 24px 20px;
}
/* The same two rows of green and cream squares along the top. */
.site-footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 28px;
  background:
    linear-gradient(90deg, var(--forest) 50%, var(--bg) 50%) 0 0 / 28px 14px repeat-x,
    linear-gradient(90deg, var(--bg) 50%, var(--forest) 50%) 0 14px / 28px 14px repeat-x;
}
.footer-inner { max-width: 1200px; margin: 16px auto 0; display: grid; grid-template-columns: 1.2fr auto 1.2fr; gap: 32px; align-items: start; }
.site-footer a { color: inherit; }
.f-left h3 { font: 700 2.1rem/1.1 var(--serif); margin: 0 0 18px; }
.f-left p { margin: 0 0 12px; }
.f-serving { font-size: .92rem; max-width: 360px; }
.f-mid { display: flex; gap: 14px; justify-content: center; padding-top: 8px; }
.f-icon { display: inline-flex; width: 26px; height: 26px; }
.f-icon svg { width: 100%; height: 100%; }
.f-icon:hover { color: var(--gold-dark); }
.f-right { text-align: right; }
.f-right h4 { font: 700 1.05rem var(--serif); margin: 6px 0 22px; letter-spacing: .02em; }
.f-right p { margin: 0 0 14px; }
.f-right p a { text-decoration: underline; text-underline-offset: 3px; }
.f-credits { max-width: 1200px; margin: 26px auto 0; padding-top: 14px; border-top: 1px solid rgba(33,46,33,.15); font-size: .74rem; color: #5a6457; text-align: center; }
/* The classroom fills the screen; its footer sits below, reached by scrolling. */
.room-page .site-footer { margin-top: 32px; }

/* The chat sits under the student's camera. */
/* The chat, under the chapters: kept small. */
.cam-col .chat { margin-top: 14px; padding: 10px 12px; }
.cam-col .chat h3 { margin: 0 0 6px; }
.cam-col .chat-log { height: 96px; margin-bottom: 6px; }
/* The coach tools sit under the board, as wide as the board. */
.board-col > .tools-panel { width: min(100%, calc(100vh - 200px)); margin: 14px auto 0; }
.tools-panel .tool-grid { grid-template-columns: repeat(3, 1fr); }
.tools-panel .toggle { display: inline-flex; margin-right: 18px; }
@media (max-width: 1200px) and (min-width: 901px) {
  .room.with-cams { grid-template-columns: 200px minmax(0, 1fr) 300px; gap: 16px; }
}

@media (max-width: 900px) {
  .room, .viewer, .room.with-cams { grid-template-columns: 1fr; padding: 12px; gap: 14px; }
  .board-col > .tools-panel { width: 100%; }
  .tools-panel .tool-grid { grid-template-columns: 1fr 1fr; }
  .cam-col .chat { grid-column: 1 / -1; order: 4; margin-top: 0; }
  /* Phones: both cameras side by side above the board (student left, coach right). */
  .cam-col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cam-col > :only-child { grid-column: 1 / -1; max-width: 360px; width: 100%; margin: 0 auto; }
  .cam-col .chapters-panel { grid-column: 1 / -1; order: 3; margin-top: 0; }
  .ch-tools { display: flex; }
  .cam-col .replay-video-box .tile { height: 100%; }
  .board-holder, .navbar, .engine-box { width: 100%; }
  .topbar { flex-wrap: wrap; padding: 8px 14px; gap: 8px; }
  .topbar-mid { order: 3; flex-basis: 100%; }
  .editor { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .page { padding: 20px 16px 48px; }
  .footer-inner { grid-template-columns: 1fr; text-align: center; gap: 18px; }
  .f-right { text-align: center; }
  .f-serving { margin-left: auto !important; margin-right: auto !important; }
  .f-left h3 { font-size: 1.7rem; }
}

/* The classroom on phones, top to bottom: both cameras side by side, the call buttons, the board, the chat,
   the chapters, the moves, then the coach tools. The three columns let their panels join one grid so they can
   be put in that order. */
@media (max-width: 900px) {
  .room.with-cams { grid-template-columns: 1fr 1fr; column-gap: 8px; row-gap: 12px; }
  .room.with-cams > .cam-col, .room.with-cams > .board-col, .room.with-cams > .side { display: contents; }
  .room.with-cams > * > * { grid-column: 1 / -1; margin-top: 0; }
  .room.with-cams #studentTile { grid-column: 1; order: 1; }
  .room.with-cams #coachTile { grid-column: 2; order: 1; }
  .room.with-cams .call-panel { order: 2; padding: 10px 12px; }
  .room.with-cams .board-row { order: 3; }
  .room.with-cams .board-col > .navbar { order: 4; margin-top: -4px; }
  .room.with-cams #engineBox { order: 5; }
  .room.with-cams .cam-col > .chat { order: 6; }
  .room.with-cams .cam-col > .chapters-panel { order: 7; }
  .room.with-cams .side > .moves-panel { order: 8; }
  .room.with-cams .board-col > .tools-panel { order: 9; }
}