/* Chess Coach Andre — Classroom. Colors and fonts follow chesscoachandre.com: cream, deep green, gold. */
/* The site's fonts, served from this site (see /fonts/LICENSE.txt), so visitors don't load anything from Google. */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/cinzel-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/cinzel-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/cinzel-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/nunito-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/nunito-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/nunito-sans-latin-700-normal.woff2) format('woff2'); }

: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: 500 .78rem var(--sans); letter-spacing: .03em; margin-left: 6px; }
.brand { display: inline-flex; align-items: center; }
.brand-logo { width: 30px; height: 30px; margin-right: 8px; flex: none; }
.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); }
button.peer.removable { border: 0; color: inherit; font-family: inherit; cursor: pointer; }
button.peer.removable:hover { background: rgba(255,255,255,.22); }

.new-password { margin: 0; text-align: center; }
.new-password code { font-size: 1.4rem; letter-spacing: .06em; padding: 8px 14px; background: #f4f3e8; border-radius: 8px; user-select: all; }

/* The classroom lock: who is waiting at the door (coach only). */
.door-bar { background: #e6efe3; border-bottom: 1px solid #b9cfb3; padding: 6px 20px; display: grid; gap: 6px; }
.door-bar[hidden] { display: none; }
.door-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: .92rem; }

.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; }
/* Long names show on up to two lines, then end in "…" (the whole name shows when the pointer rests on it). */
.chapter-open .ch-title { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: break-word; line-height: 1.3; }
.chapter:hover { background: #f3ecd9; }
.chapter.active { background: var(--green); }
.chapter.active .chapter-open, .chapter.active .chapter-open::before, .chapter.active .ch-tool { color: #fff; }
/* Rename/delete keep their place when hidden, so showing them never moves the name. */
.ch-tools { display: flex; visibility: hidden; gap: 0; padding-right: 4px; }
.chapter:hover .ch-tools, .chapter.active .ch-tools, .chapter:focus-within .ch-tools { visibility: visible; }
.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; }
/* Games played from a chapter, in a drop-down under it. */
.ch-games-toggle {
  flex: none; border: 0; background: #efe9d8; color: #5b5a45; font: 700 .7rem var(--sans); padding: 2px 7px;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.ch-games-toggle:hover { background: #e4dcc4; }
.chapter.active .ch-games-toggle { background: rgba(255,255,255,.2); color: #fff; }
.chapter-other { display: flex; align-items: center; gap: 6px; padding: 6px 8px 2px; font-size: .82rem; font-weight: 700; color: var(--muted); }
.chapter-other .ch-title { flex: 1; }
.game-group { list-style: none; }
.game-list { list-style: none; margin: 2px 0 6px 22px; padding: 0 0 0 8px; border-left: 2px solid #d9cfb4; display: flex; flex-direction: column; gap: 2px; }
.game-item { display: flex; align-items: center; border-radius: 6px; }
.game-item:hover { background: #f5f0e2; }
.game-item.active { background: #e3ecdf; }
.game-open {
  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; text-align: left; background: none; border: 0;
  padding: 5px 6px; font: 500 .82rem var(--sans); color: var(--ink); cursor: pointer;
}
.game-open:disabled { cursor: default; }
.game-players { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-players::before { content: '♟ '; color: var(--muted); }
.game-score { margin-left: auto; font-weight: 800; color: var(--forest); white-space: nowrap; }
.game-item .ch-tool { opacity: 0; }
.game-item:hover .ch-tool, .game-item.active .ch-tool { opacity: 1; }
/* 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 - 240px)); min-width: 260px; position: relative; }
/* Who is up material: a thin strip above and below the board (outside it) with the pieces one side has taken more
   of and "+N". The strips always keep their height, so nothing moves when a piece is taken. The board is 40px
   smaller than it was to make room for them. */
.material { height: 20px; display: flex; align-items: center; gap: 0; overflow: hidden; white-space: nowrap; }
.mat-piece { width: 18px; height: 18px; flex: none; margin-left: 2px; }
.mat-piece:first-child { margin-left: 0; }
.mat-piece.same { margin-left: -9px; } /* the same kind of piece stacks, like Lichess */
.mat-score { margin-left: 5px; font: 800 .9rem/1 var(--sans); color: var(--forest); font-variant-numeric: tabular-nums; }
.board-row:has(.with-material) > .evalbar { margin: 20px 0; }
.with-material > .board-flash { inset: 20px 0; }
/* The result of a "Play from here" game, shown over the board for a few seconds. */
.board-flash {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; border-radius: 4px;
  background: rgba(22, 32, 27, .45); animation: flash-in .35s ease-out;
}
.flash-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; max-width: 80%;
  background: var(--surface); border: 2px solid var(--gold); border-radius: 14px; padding: 18px 26px;
  box-shadow: 0 12px 34px rgba(0,0,0,.35); animation: flash-pop .45s cubic-bezier(.2,1.4,.4,1);
}
.flash-card strong { font: 700 1.8rem/1.1 var(--serif); color: var(--forest); }
.flash-card.won { border-color: var(--green); }
.flash-verdict { font-weight: 800; font-size: 1.05rem; }
.flash-note { color: var(--muted); font-size: .8rem; margin-top: 4px; }
@keyframes flash-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes flash-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .board-flash, .flash-card { animation: none; } }
.navbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px auto 0; width: min(100%, calc(100vh - 240px)); }
.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 - 190px), 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; }
#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 - 190px), 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); }
/* A premove (a move dropped while it's the other side's turn) waiting to be played. */
.hl-premove { fill: rgba(31, 79, 168, .42); }
.premove-ghost { opacity: .5; pointer-events: none; }
.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; }
.premoving .hint-move { fill: rgba(31, 79, 168, .45); }
.premoving .hint-capture { stroke: rgba(31, 79, 168, .5); }
.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 - 240px)); 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; }
/* The opening book, under the chapters. A steady height, so the page doesn't move as the number of moves changes. */
.openings-box { margin-top: 14px; padding: 12px; min-height: 340px; display: flex; flex-direction: column; font-size: .88rem; }
.openings-box.loading .book-moves { opacity: .55; }
.openings-box .book-moves { height: 252px; }
.chips.book-tabs { margin: 0 0 6px; flex-wrap: nowrap; }
.chips.book-tabs .chip { padding: 3px 9px; font-size: .78rem; white-space: nowrap; }
.openings-box:has(.book-tabs) .book-moves { height: 218px; } /* the tabs take the difference: the panel keeps its height */
.master-game { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 1px; column-gap: 8px; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 5px 6px; }
button.master-game { cursor: pointer; }
button.master-game:hover, button.master-game:focus-visible { background: var(--bg); }
.master-players { display: flex; flex-direction: column; font-weight: 700; font-size: .84rem; min-width: 0; }
.master-players > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.master-result { font-weight: 700; align-self: center; }
.master-event { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.master-next { text-align: right; white-space: nowrap; color: #8a6514; }
.opening-line { display: flex; align-items: center; gap: 2px; margin: 2px 0 4px; color: #6d5212; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.opening-line .icon-img { width: 16px; height: 16px; }
.opening-name { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.book-moves { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
/* Each move: the move, the variation it leads to and how many games, then how those games ended. */
.book-move { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 6px; row-gap: 3px; align-items: center; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-radius: 6px; padding: 4px 6px; }
button.book-move { cursor: pointer; }
button.book-move:hover { background: var(--bg); }
.book-san { font-weight: 700; white-space: nowrap; }
.book-line { font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-games { font-size: .75rem; color: var(--muted); text-align: right; white-space: nowrap; }
.result-bar { grid-column: 1 / -1; display: flex; height: 15px; border-radius: 4px; overflow: hidden; border: 1px solid #9a9688; font-size: .66rem; line-height: 13px; }
.result-bar.empty { border-style: dashed; border-color: var(--line); }
.result-bar > span { display: block; text-align: center; overflow: hidden; white-space: nowrap; }
.res-w { background: #fff; color: #222; }
.res-d { background: #a9a597; color: #fff; }
.res-b { background: #2b2b2b; color: #fff; }

/* --- 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); }
.pick.pick-lesson { flex-direction: row; align-items: center; gap: 12px; padding: 6px 12px; }
.pick-lesson .card-thumb { width: 64px; flex: none; padding: 0; border: 0; }
.pick-lesson > input[type=checkbox] { width: auto; flex: none; margin: 0; }
.pick-lesson-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.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;
}
/* The Outpost logo (knight in a graduation cap). */
.welcome-crest { width: 88px; height: 88px; margin: 0 auto 10px; background: url(/icons/logo-knight.svg) center / contain no-repeat; }
.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; }
/* Book a lesson (links to the scheduling page on chesscoachandre.com). */
.book-lesson { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; }
.book-lesson[hidden] { display: none; }
.welcome-card .book-label { margin: 0 0 8px; font-size: .95rem; font-weight: 700; color: var(--forest); }
.book-lesson .welcome-go { margin-top: 0; text-decoration: none; }
.btn.gold.welcome-go:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
/* 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; }
/* Front page: a short summary of the classroom for visitors, under the welcome card. */
.about-card { max-width: 560px; margin: 8px auto 48px; padding: 26px 32px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.about-card h2 { font: 700 1.45rem/1.2 var(--serif); color: var(--forest); text-align: center; margin: 0 0 8px; }
.about-lead { color: var(--muted); text-align: center; margin: 0 auto 18px; max-width: 440px; }
.about-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.about-list li { display: flex; gap: 14px; align-items: flex-start; }
.about-list b { display: block; color: var(--forest); }
.about-list div { color: #4a5048; font-size: .95rem; line-height: 1.45; }
.about-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--forest); color: #f4f3e8; font-size: 1.4rem; line-height: 1; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--gold); }
@media (max-width: 520px) { .about-card { margin: 4px 0 32px; padding: 22px 18px 18px; } .about-card h2 { font-size: 1.25rem; } }
/* Front page for visitors: about Coach Andre, lessons and prices, reviews, contact (index.html, .visitor). */
.site-hero { position: relative; max-width: 1040px; margin: 0 auto 8px; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); background: var(--forest); }
.site-hero img { display: block; width: 100%; height: 420px; object-fit: cover; opacity: .55; }
.site-hero-text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 24px; color: #fff; }
.site-hero-text .welcome-kicker { color: #f0d58c; }
.site-hero h1 { font-size: clamp(1.7rem, 4.5vw, 2.8rem); color: #fff; max-width: 720px; margin: 10px 0 12px; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.site-hero-text > p { max-width: 520px; margin: 0; font-size: 1.08rem; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.site-hero .btn { font-size: 1.05rem; padding: 12px 18px; text-decoration: none; }
.btn.white { background: #fff; color: var(--forest); border-color: #fff; }
.site-section { max-width: 1040px; margin: 0 auto 48px; }
.site-section h2 { font: 700 1.7rem/1.2 var(--serif); color: var(--forest); text-align: center; margin: 0 0 10px; }
.site-lead { color: var(--muted); text-align: center; max-width: 620px; margin: 0 auto 22px; }
.coach-intro { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 32px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 28px; box-shadow: var(--shadow); }
.coach-intro img { width: 100%; height: auto; border-radius: 14px; display: block; }
.coach-intro h2 { text-align: left; }
.coach-intro p { line-height: 1.6; color: #3d443c; }
.story summary { cursor: pointer; font-weight: 700; color: var(--gold-dark); margin-top: 6px; }
.story[open] summary { margin-bottom: 4px; }
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.price-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); }
.price-card h3 { color: var(--forest); font-size: 1.15rem; margin: 0 0 6px; }
.price-card .price { font: 700 2rem var(--serif); color: var(--forest); margin: 0 0 10px; }
.price-card .price span { font: 400 .95rem var(--sans); color: var(--muted); }
.price-card ul { margin: 0 0 16px; padding-left: 18px; color: #3d443c; line-height: 1.55; }
.price-card > p:not(.price) { color: #3d443c; margin: 0 0 16px; }
.price-card .btn { margin-top: auto; text-align: center; text-decoration: none; }
.site-note { text-align: center; color: var(--muted); font-size: .9rem; margin: 14px 0 22px; }
.gift-card { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; background: #f6efd9; border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.gift-card img { width: 100%; height: 200px; object-fit: cover; border-radius: 12px; display: block; }
.gift-card h3 { color: var(--forest); margin: 0 0 6px; }
.gift-card p { margin: 0 0 14px; color: #3d443c; line-height: 1.5; }
.gift-card .btn { text-decoration: none; }
.quote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.quote-grid blockquote { margin: 0; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow); }
.quote-grid blockquote p { margin: 0 0 10px; font-style: italic; color: #3d443c; line-height: 1.55; }
.quote-grid footer { font-weight: 700; color: var(--forest); font-size: .9rem; }
.site-wide-photo { display: block; width: 100%; height: 320px; object-fit: cover; border-radius: 18px; margin-top: 22px; }
.contact { text-align: center; }
.contact .btn { text-decoration: none; font-size: 1.05rem; padding: 12px 18px; }
@media (max-width: 860px) {
  .price-grid, .quote-grid { grid-template-columns: minmax(0, 1fr); }
  .coach-intro { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .coach-intro img { max-width: 320px; margin: 0 auto; }
  .coach-intro h2 { text-align: center; }
}
@media (max-width: 520px) {
  .site-hero img { height: 460px; }
  .gift-card { grid-template-columns: minmax(0, 1fr); }
  .site-wide-photo { height: 220px; }
  .site-section h2 { font-size: 1.4rem; }
}
@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. */
.account-drop > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font: 600 1.05rem var(--serif); color: var(--green); padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.account-drop > summary::-webkit-details-marker { display: none; }
.account-drop > summary::after { content: "▾"; transition: transform .15s; }
.account-drop[open] > summary::after { transform: rotate(180deg); }
.account-drop > summary:hover { border-color: var(--gold); }
.account-drop > .card { margin-top: 10px; }
.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; }

/* "This replay will be deleted in 5 days". */
.delete-warning { color: var(--red); font-weight: 600; }
p.delete-warning { margin: 4px 0 0; font-size: .85rem; }

.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 - 240px)); margin: 14px auto 0; }

/* "Play from here": a clock above and below the board, and a bar for resigning or the result.
   The board is a little smaller during a game so both clocks fit on the screen. */
.clock, .game-bar { width: min(100%, calc(100vh - 240px)); margin: 0 auto; }
.room.in-game .board-holder, .room.in-game .board-col > .navbar, .room.in-game .clock,
.room.in-game .game-bar, .room.in-game .board-col > .tools-panel { width: min(100%, calc(100vh - 340px)); }
.clock {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 12px; margin-top: 6px; margin-bottom: 6px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.clock-name { font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clock-time { font: 700 1.5rem/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.clock.running { background: var(--green); border-color: var(--green); color: #fff; }
/* Outside a game: a PGN's players in the same places, smaller. The side to move has a green edge. */
.clock.plate { padding: 3px 10px; margin-top: 4px; margin-bottom: 4px; box-shadow: none; }
.clock.plate .clock-time { font-size: 1.05rem; color: var(--muted, #666); }
.clock.plate.to-move { border-color: var(--green); box-shadow: inset 3px 0 0 var(--green); }
.clock.plate.to-move .clock-time { color: inherit; }
.plate-title { display: inline-block; margin-right: 5px; padding: 0 4px; border-radius: 4px; background: #b8892b; color: #fff; font-size: .72rem; vertical-align: 1px; }
.plate-elo { font-weight: 400; color: var(--muted, #666); }
/* The board keeps its full size when plates show (Andre's choice); the page may scroll a little.
   Without players the plates stay as invisible space, so nothing moves when names appear. */
.clock.plate.empty { visibility: hidden; }
.clock.running.low { background: var(--red); border-color: var(--red); }
.clock.low .clock-time { color: var(--red); }
.clock.running.low .clock-time { color: #fff; }
.game-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding: 8px 12px;
  background: #fffaf0; border: 1px solid #ecd48a; border-radius: 8px; font-size: .9rem;
}
.game-result { font: 700 1rem var(--serif); color: var(--forest); }
.game-result.won::before { content: '🏆 '; }
.draw-offer { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--forest); flex-wrap: wrap; }
.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.no-student-cam #coachTile { grid-column: 1 / -1; max-width: 360px; width: 100%; justify-self: center; }
  .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, .room.with-cams #openingsBox { 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; }
  /* A game's clocks sit just above and below the board, and its bar under the board's buttons. */
  .room.with-cams .board-col > .clock { order: 3; margin: 0; }
  .room.with-cams .board-col > .game-bar { order: 4; margin: 0; }
  .room.in-game .board-holder, .room.in-game .board-col > .navbar, .room.in-game .clock,
  .room.in-game .game-bar, .room.in-game .board-col > .tools-panel { width: 100%; }
}

/* Phones: no camera boxes in the page. Before the call there's only the Join button and a line saying who
   you're waiting for; in the call the cameras float over the page (below). */
.call-wait { margin: 8px 0 0; }
@media (min-width: 901px) { .call-wait { display: none; } }
@media (max-width: 900px) {
  .room.with-cams .tile:not(.floating) { display: none; }
}

/* Phones turned sideways: the board is no taller than the screen, in the middle. */
@media (max-width: 900px) and (orientation: landscape) {
  .room.with-cams .board-holder, .room.with-cams .board-col > .navbar, .room.with-cams .clock, .room.with-cams .game-bar,
  .room.in-game .board-holder, .room.in-game .board-col > .navbar, .room.in-game .clock, .room.in-game .game-bar {
    width: min(100%, calc(100vh - 64px), calc(100svh - 64px)); justify-self: center;
  }
}

/* A camera floating over the page in one corner, like FaceTime: drag it to another corner, tap it to resize. */
.tile.floating {
  position: fixed; z-index: 40; width: var(--pip-w); margin: 0;
  border: 2px solid rgba(255, 255, 255, .9); border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .38);
  touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
  transition: width .2s ease;
  --pip-w: 220px; --pip-gap: 14px;
}
.tile.floating.big { --pip-w: 340px; }
.tile.floating.dragging { cursor: grabbing; transition: none; opacity: .92; z-index: 41; }
.tile.floating video { pointer-events: none; }
.tile.floating .tile-off { font-size: .72rem; padding: 6px; }
.tile.floating[data-corner^="t"] { top: calc(var(--pip-gap) + env(safe-area-inset-top, 0px)); }
.tile.floating[data-corner^="b"] { bottom: calc(var(--pip-gap) + env(safe-area-inset-bottom, 0px)); }
.tile.floating[data-corner$="l"] { left: calc(var(--pip-gap) + env(safe-area-inset-left, 0px)); }
.tile.floating[data-corner$="r"] { right: calc(var(--pip-gap) + env(safe-area-inset-right, 0px)); }
@media (max-width: 900px) {
  .tile.floating { --pip-gap: 10px; }
  .tile.floating.pip-own { --pip-w: min(28vw, 130px); }
  .tile.floating.pip-own.big { --pip-w: min(44vw, 210px); }
  .tile.floating.pip-other { --pip-w: min(40vw, 180px); }
  .tile.floating.pip-other.big { --pip-w: min(62vw, 300px); }
  .tile.floating .tile-name { font-size: .62rem; left: 4px; bottom: 4px; }
}
@media (max-width: 900px) and (orientation: landscape) {
  .tile.floating.pip-own { --pip-w: min(18vw, 130px); }
  .tile.floating.pip-other { --pip-w: min(24vw, 180px); }
}

/* Phones: text boxes at 16px, so iPhone doesn't zoom the page in when you tap one. */
@media (max-width: 900px), (pointer: coarse) {
  input, textarea, select { font-size: 16px; }
}

/* Phones: a slim top bar in the classroom. The logo and your buttons on one line, the classroom's name and
   who's here on the next. */
@media (max-width: 600px) {
  .room-page .topbar { padding: 6px 12px; gap: 4px 8px; margin-bottom: 18px; }
  .room-page .topbar::after { height: 12px; background: linear-gradient(90deg, var(--forest) 50%, var(--bg) 50%) 0 0 / 24px 12px repeat-x; }
  .room-page .brand { font-size: .95rem; }
  .room-page .brand span { display: none; }
  .room-page .topbar-right { display: contents; }
  .room-page .acct-nav { order: 2; margin-left: auto; flex-wrap: nowrap; }
  .room-page .acct-nav .btn { padding: 7px 12px; font-size: .82rem; }
  .room-page .topbar-mid { order: 3; flex: 1 1 auto; font-size: .85rem; }
  .room-page .peers { order: 4; justify-content: flex-start; }
  .room-page .peer { font-size: .72rem; padding: 2px 8px; }
}

/* --- the student's first visit: a chat-style welcome in the bottom-right corner ------------------- */
.intro-chat {
  position: fixed; right: 20px; bottom: 20px; z-index: 50; width: min(340px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 14px 40px rgba(20, 30, 20, .28); overflow: hidden; animation: intro-in .35s ease-out;
}
@keyframes intro-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.intro-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--forest); color: #f6f1e4; }
.intro-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: #fff;
  display: grid; place-items: center; font-size: 1.2rem; flex: none;
}
.intro-from { display: flex; flex-direction: column; line-height: 1.2; flex: 1; }
.intro-from strong { font-family: var(--serif); font-size: .9rem; }
.intro-from span { font-size: .75rem; opacity: .8; }
.intro-close { background: none; border: 0; color: inherit; font-size: 1rem; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.intro-close:hover { background: rgba(255,255,255,.15); }
.intro-body { padding: 14px 14px 4px; display: flex; flex-direction: column; gap: 8px; }
.intro-bubble {
  margin: 0; padding: 9px 12px; background: #eef1e6; border-radius: 4px 14px 14px 14px;
  font-size: .9rem; line-height: 1.4; max-width: 92%;
}
.intro-foot { display: flex; justify-content: flex-end; padding: 10px 14px 14px; }
.student-rights { display: inline-flex; flex-direction: column; margin-right: 18px; }

/* Small drawn pictures in buttons and headings (the opening book, the bot fish). */
.icon-img { width: 1.35em; height: 1.35em; vertical-align: -0.35em; display: inline-block; }
.icon-img.big { width: 1.6em; height: 1.6em; }
.with-icon { display: inline-flex; align-items: center; gap: .4em; }
.chip .chip-bot { width: 26px; height: 26px; vertical-align: middle; margin: -4px 0; }
.clock-bot { width: 22px; height: 22px; vertical-align: -6px; }
.bot-pick { display: flex; align-items: center; gap: 12px; }
.bot-portrait { width: 72px; height: 72px; flex: none; }

/* The home-screen app: "you're offline" page and the iPhone tip for adding it to the home screen. */
.offline-page { max-width: 420px; margin: 15vh auto; padding: 0 16px; text-align: center; }
.offline-page img { border-radius: 22px; }
.install-tip {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50;
  max-width: 460px; margin: 0 auto; display: flex; align-items: center; gap: 12px;
  background: #fffdf7; color: #16201b; border: 1px solid #c09a3e; border-radius: 12px;
  padding: 10px 8px 10px 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .2);
}
.install-tip img { border-radius: 9px; flex: none; }
.install-tip p { margin: 0; font-size: 14px; line-height: 1.4; flex: 1; }
.install-tip svg { width: 17px; height: 17px; vertical-align: -3px; color: #2a6fdb; }
.install-tip-close { background: none; border: 0; font-size: 24px; line-height: 1; padding: 4px 8px; color: #555; cursor: pointer; }

/* --- Homework ------------------------------------------------------------------------------------------ */
/* The coach's dashboard: the Give homework form, and who has each lesson. */
.email-note { text-align: left; border: 1px solid #ecd48a; border-radius: 8px; margin: 0 0 12px; }
.give-hw h3 { margin: 6px 0 0; font-size: .95rem; }
.hw-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.hw-students { display: flex; flex-direction: column; gap: 2px; max-height: 30vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 4px 12px; background: #fff; }
.hw-students .toggle { margin: 4px 0; }
/* A side-line move the coach marked as a right answer too. */
.mv-correct { color: #22ac38; font-weight: 700; margin-left: 2px; }
/* Give homework: the library as a tick list, folder by folder. */
.hw-lessons { max-height: 40vh; }
.hw-folder summary { cursor: pointer; padding: 6px 0; display: flex; align-items: center; gap: 6px; }
.hw-folder summary input { margin: 0; width: auto; flex: none; accent-color: var(--green); }
.hw-folder-items { padding-left: 26px; display: flex; flex-direction: column; }
.hw-given { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--line); font-size: .82rem; display: flex; flex-direction: column; gap: 3px; }
.hw-given li.done, .hw-chip.done { color: var(--green); }
.pill.hw-new { background: #e3eefc; color: #1f4fa8; margin-left: 6px; vertical-align: middle; }
/* The student's My Dashboard. */
.hw-note { font-size: .85rem; font-style: italic; background: #f6f1e2; border-radius: 8px; padding: 6px 10px; margin: 6px 0; white-space: pre-wrap; }
.hw-result { font-size: .85rem; font-weight: 600; color: var(--muted); margin: 4px 0; }
.hw-result.done { color: var(--green); }
/* The lesson page: the homework box and guess the move. */
.hw-panel { margin-bottom: 14px; }
.hw-head, .guess-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hw-head h3, .guess-head h3 { margin: 0; }
.hw-status { margin: 6px 0 0; }
.guess-panel { margin-bottom: 14px; border-color: var(--green); }
.guess-bar { height: 6px; background: #ece5d2; border-radius: 99px; overflow: hidden; margin: 10px 0; }
#guessFill { height: 100%; width: 0; background: var(--green); transition: width .3s ease; }
.guess-msg { margin: 0; padding: 10px 12px; border-radius: 8px; background: #f6f1e2; font-weight: 600; min-height: 1.4em; }
.guess-msg.is-good { background: #e4f1e1; color: #1d5a24; }
.guess-msg.is-wrong { background: #fbe7e2; color: #9a2f22; animation: hw-shake .3s; }
.guess-msg.is-hint { background: #fff2cc; color: #7a5a00; animation: hw-shake .3s; }
.guess-msg.is-interesting { background: #fff2cc; color: #6b4f00; border: 1px solid #ecd48a; } /* a decent move, explained */
.guess-msg.is-reveal { background: #e3eefc; color: #1f4fa8; }
.guess-msg.is-done { background: var(--green); color: #fff; font-size: 1.05rem; }
.guess-prompt { display: block; margin-top: 4px; font-weight: 400; color: var(--ink); }
.guess-comment { margin: 8px 0 0; font-size: .9rem; padding: 8px 10px; border-left: 3px solid var(--gold); background: #fffaf0; white-space: pre-wrap; }
.guess-saved { align-self: center; }
@keyframes hw-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* The classroom: a drop-down under the chapters. */
.homework-panel { margin-top: 14px; padding: 0; }
.homework-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; cursor: pointer; font-weight: 700; list-style: none; }
.homework-panel > summary::-webkit-details-marker { display: none; }
.homework-panel > summary::after { content: '▸'; color: var(--muted); margin-left: auto; transition: transform .15s; }
.homework-panel[open] > summary::after { transform: rotate(90deg); }
.hw-summary-title { font-size: 1.05rem; }
.homework-list { list-style: none; margin: 0; padding: 0 12px 12px; display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; }
.hw-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.hw-item.done { background: #f3f7f1; }
.hw-item-main { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hw-item-title { font-size: .9rem; overflow-wrap: anywhere; }
.hw-item-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; }
.hw-ok { color: var(--green); font-weight: 600; }
.hw-new-text { color: #1f4fa8; font-weight: 600; }
.hw-empty { padding: 4px 2px; }
@media (max-width: 900px) {
  .room.with-cams .cam-col > .homework-panel { order: 7; }
}

/* The coach's library in folders (dashboard → Homework): a row per folder that opens to show its lessons. */
.lesson-library { display: flex; flex-direction: column; gap: 10px; }
.folder { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.folder-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 10px 6px 4px; }
.folder-toggle { flex: 1 1 260px; min-width: 0; display: flex; align-items: baseline; gap: 8px; background: none; border: 0; padding: 8px; font: inherit; color: var(--ink); cursor: pointer; text-align: left; border-radius: 8px; }
.folder-toggle:hover { background: #f3ecd9; }
.folder-arrow { color: var(--muted); transition: transform .15s; display: inline-block; }
.folder.open .folder-arrow { transform: rotate(90deg); }
.folder-icon { font-size: 1.15rem; }
.folder-name { font-size: 1.02rem; }
.folder-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.folder-body { padding: 4px 12px 14px; border-top: 1px dashed var(--line); padding-top: 12px; }

/* The call's Devices box: camera, microphone (with a level bar) and speaker. */
.devices .device-row { display: flex; flex-direction: column; gap: 6px; }
.device-line { display: flex; gap: 8px; align-items: center; }
.device-line select { flex: 1; min-width: 0; }
.mic-level { display: block; height: 8px; border-radius: 99px; background: #ece5d2; overflow: hidden; }
.mic-level-fill { display: block; height: 100%; width: 0; background: var(--green); transition: width .08s linear; }

/* Editing a lesson's moves: the PGN box on the dashboard, and the editing panel on the lesson page. */
.pgn-box { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
.edit-panel { margin-bottom: 14px; border-color: var(--gold); }
.edit-panel textarea { width: 100%; }
.edit-glyphs { margin: 6px 0; }
.glyph-btn { min-width: 38px; font-weight: 700; }
.glyph-btn.on { background: var(--green); color: #fff; border-color: var(--green); }

/* Questions about homework: the student's Ask Coach Andre box, and the coach's Messages tab. */
.ask-panel { margin-bottom: 14px; }
/* Homework pages: "Ask Coach Andre" in a column left of the board (below everything on phones). */
.room.with-ask { grid-template-columns: 280px minmax(0, 1fr) 340px; max-width: 1600px; gap: 20px; }
.ask-col { min-width: 0; }
@media (max-width: 1200px) and (min-width: 901px) { .room.with-ask { grid-template-columns: 230px minmax(0, 1fr) 290px; gap: 16px; } }
@media (max-width: 900px) { .room.with-ask { grid-template-columns: 1fr; } .room.with-ask .ask-col { order: 3; } }
.ask-panel h3 { margin: 0 0 8px; }
.ask-panel textarea { width: 100%; margin-top: 4px; }
.ask-thread { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; margin-bottom: 8px; }
.ask-thread:empty { display: none; }
.ask-msg { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: #f6f1e2; max-width: 92%; align-self: flex-end; }
.ask-msg.coach { background: #e4f1e1; align-self: flex-start; }
.ask-who { font-size: .75rem; color: var(--muted); font-weight: 600; }
.ask-text { white-space: pre-wrap; font-size: .9rem; }
.tab-count { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 99px; background: var(--red); color: #fff; font-size: .72rem; font-weight: 700; text-align: center; margin-left: 4px; }
.msg-item { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.msg-item.unread { border-color: var(--gold); background: #fffaf0; }
.msg-item .item-main { gap: 2px; }
.msg-thread { display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow-y: auto; padding-right: 4px; }
.msg { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.msg.coach { background: #f3f7f1; }
.msg .card-thumb { width: 170px; flex: none; }
@media (max-width: 600px) { .msg { flex-direction: column; } .msg .card-thumb { width: 100%; max-width: 260px; } }
.msg-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.msg-body p { margin: 0; white-space: pre-wrap; }

/* --- Minigames (chess variants) --------------------------------------------------------------------------------- */
/* Fog of war: the squares this player can't see. */
.fog-sq { fill: #6d7378; opacity: .92; }
.room.fog-board .material { visibility: hidden; }
.fog-note { margin: 4px 0; }
/* Atomic: a 💥 for a moment on each square that blew up. */
.boom {
  position: absolute; width: 12.5%; height: 12.5%; display: grid; place-items: center; pointer-events: none;
  font-size: clamp(18px, 6vw, 48px); animation: boom .9s ease-out forwards;
}
@keyframes boom { 0% { transform: scale(.3); opacity: 1; } 50% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
/* The rules of the minigame being played, under the game bar. */
.variant-rules {
  width: min(100%, calc(100vh - 240px)); margin: 8px auto 0; padding: 8px 12px; font-size: .9rem;
  background: #f4f8ef; border: 1px solid #b9d3a8; border-radius: 8px;
}
.room.in-game .variant-rules { width: min(100%, calc(100vh - 340px)); }
.variant-rules summary { cursor: pointer; }
.variant-rules ul, .variant-rule-list { margin: 6px 0 0; padding-left: 20px; }
.variant-rules li, .variant-rule-list li { margin: 2px 0; }
.variant-rules .icon-img, .game-variant { width: 18px; height: 18px; vertical-align: -3px; }
@media (max-width: 900px) {
  .room.with-cams .board-col > .variant-rules { order: 4; margin: 0; }
  .room.in-game .variant-rules { width: 100%; }
}