/* NBCheckmate — a chess book, not a dashboard.
   Paper, ink and one red pencil. Black and white like the panda. Serif for
   the words, typewriter figures for the numbers (moves, par, fuel), hairline
   rules instead of glowing cards. The marked corners are the one colour on
   the board that is not wood or paper: they are the lesson. */

:root {
  --paper: #f4f0e6;
  --paper-2: #ebe5d6;       /* sunken: tracks, pressed states */
  --card: #fbf9f3;          /* raised: the daily box, the certificate */
  --ink: #1b1a17;
  --ink-2: #4a463e;
  --muted: #857e6f;
  --rule: #d8d0bd;
  --red: #b3261e;           /* the correction pencil: marked corners, warnings, the NB */
  --red-soft: rgba(179, 38, 30, 0.12);
  --radius: 4px;
  --serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* kept for the certificate and older selectors */
  --display: var(--serif);
  --body: var(--serif);
  --gold: var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.45 var(--serif);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
button svg:not(.star) { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
a { color: inherit; }

.view { display: none; }
body[data-view="home"] #home, body[data-view="drill"] #drill { display: block; }

.icon-btn {
  width: 44px; height: 44px; border-radius: var(--radius); border: 1px solid var(--rule);
  background: transparent; display: grid; place-items: center; flex: none;
}
.icon-btn:active { background: var(--paper-2); }
.chip { font: 500 13px var(--mono); padding: 4px 0; }
.chip.xp { color: var(--ink-2); }

/* ---------------- home ---------------- */
#home { max-width: 620px; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 20px 48px; }
.home-bar { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 2px solid var(--ink); }
.brand { position: relative; flex: none; }
.brand-logo { height: 58px; width: auto; display: block; }
.belt-stripe { position: absolute; left: 4px; right: 4px; bottom: -6px; height: 4px; background: var(--belt, transparent); }
.belt-stripe[style*="transparent"] { display: none; }
.brand-text { flex: 1; min-width: 0; }
.brand-text h1 { font: 700 28px/1.05 var(--serif); margin: 0; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.brand-text h1 em { font-weight: 400; color: var(--red); }   /* the "vs." in red pencil */
.brand-text .byline { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; font-style: italic; }
.eyebrow { margin: 0 0 3px !important; font: 400 italic 14px var(--serif) !important; color: var(--muted) !important; }
@media (min-width: 700px) { .brand-logo { height: 76px; } .brand-text h1 { font-size: 38px; } }

/* section heads: italic serif with a hairline running to the edge */
.section {
  display: flex; align-items: center; gap: 12px;
  font: 500 italic 19px var(--serif); color: var(--ink); margin: 34px 0 6px;
}
.section::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

/* mastery: six belt bars and the counts, set like a book's front matter */
.mastery { margin: 22px 0 0; }
.m-top { display: flex; justify-content: space-between; align-items: baseline; }
.m-label { font: 500 italic 19px var(--serif); }
.m-count { font: 400 13px var(--mono); color: var(--muted); }
.m-count b { color: var(--ink); font-weight: 500; }
.m-belts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 10px 0 8px; }
.m-belts i { height: 6px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule); }
.m-belts i.on { background: var(--belt); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.m-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 400 13px var(--mono); color: var(--muted); }
.m-foot .star { width: 12px; height: 12px; vertical-align: -1px; }
.m-next { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--serif); font-style: italic; font-size: 15px; }
.m-cert { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 5px 12px; font: 500 14px var(--serif); }

/* the daily position: a boxed newspaper chess column */
.daily {
  margin: 26px 0 0; width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 14px 16px; border-radius: 0; background: var(--card);
  border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 3px;
}
.daily-mark { width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink); flex: none; border-right: 1px solid var(--rule); padding-right: 12px; box-sizing: content-box; }
.daily.done .daily-mark { color: var(--muted); }
.daily-body { flex: 1; display: flex; flex-direction: column; }
.daily-title { font: 600 20px var(--serif); }
.daily-sub { color: var(--ink-2); font-size: 15px; font-style: italic; }
.chev { color: var(--muted); }
.coach svg, .daily svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the path: a table of contents */
.chapters { display: flex; flex-direction: column; }
.chapter {
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  padding: 14px 2px; background: none; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
}
.chapter:active { background: var(--paper-2); }
.chapter.locked { color: var(--muted); }
.chapter.locked .ch-num { color: var(--muted); }
.ch-num { width: 30px; flex: none; text-align: right; font: 400 italic 30px/1 var(--serif); color: var(--ink); position: relative; }
.ch-num::after { content: ''; position: absolute; right: -8px; top: 3px; bottom: 3px; width: 3px; background: var(--belt); }
.chapter.passed .ch-num { color: var(--ink); }
.ch-body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-left: 8px; }
.ch-title { font: 600 19px/1.2 var(--serif); }
.ch-tag { color: var(--ink-2); font-size: 15px; font-style: italic; }
.chapter.locked .ch-tag { color: var(--muted); }
.ch-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rooms { display: flex; gap: 3px; }
.rooms i { width: 7px; height: 7px; border: 1px solid var(--muted); }
.rooms i.on { background: var(--ink); border-color: var(--ink); }
.stars { display: flex; gap: 1px; }
.star { width: 13px; height: 13px; fill: var(--rule); stroke: none; }
.star.on { fill: var(--ink); }
.caption .star { width: 16px; height: 16px; vertical-align: -2px; }

/* free play: three plain columns, like a table */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ink); }
.tiers button { padding: 14px 6px; background: none; border: 0; border-radius: 0; font: 600 18px var(--serif); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tiers button + button { border-left: 1px solid var(--rule); }
.tiers button:active { background: var(--paper-2); }
.tiers small { font: 400 12px var(--mono); color: var(--muted); }

/* the coach: an author's note at the foot of the page */
.coach {
  margin-top: 40px; display: flex; align-items: center; gap: 14px; padding: 16px 0 0;
  border-top: 2px solid var(--ink); color: inherit; text-decoration: none;
}
.coach img { width: 38px; height: 38px; flex: none; }
.coach-body { flex: 1; display: flex; flex-direction: column; }
.coach-title { font: 600 17px var(--serif); }
.coach-sub { color: var(--ink-2); font-size: 14px; font-style: italic; }
.foot { color: var(--muted); font: 400 12px/1.6 var(--mono); text-align: left; margin-top: 22px; }

/* ---------------- drill ---------------- */
#drill { padding: max(8px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom)); min-height: 100dvh; }
.drill-bar { display: flex; align-items: center; gap: 10px; max-width: 1100px; margin: 0 auto; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.drill-head { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
#drill-title { font: 600 19px var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rooms-tabs { display: flex; gap: 0; border: 1px solid var(--ink); }
.rooms-tabs:empty { display: none; }
.rooms-tabs a { font: 500 12px var(--mono); color: var(--ink-2); text-decoration: none; padding: 3px 10px; }
.rooms-tabs a + a { border-left: 1px solid var(--ink); }
.rooms-tabs a.on::before { content: '✓'; margin-right: 4px; }
.rooms-tabs a.cur { color: var(--paper); background: var(--ink); }

.stage { max-width: 1100px; margin: 8px auto 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.board-col { width: 100%; display: flex; flex-direction: column; align-items: center; }
.meta { width: min(100%, var(--board-w)); display: flex; justify-content: space-between; align-items: center; min-height: 24px; font: 400 13px var(--mono); color: var(--ink-2); padding: 0 4px; }
.dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.dots i { width: 9px; height: 9px; border: 1px solid var(--muted); }
.dots i.cur { border: 2px solid var(--ink); }
.dots i.won { background: var(--ink); border-color: var(--ink); }
.dots i.lost { background: var(--red); border-color: var(--red); }
.att { margin-left: 10px; }

:root { --board-w: min(100vw - 24px, 100dvh - 290px, 680px); }
.board-slot { width: var(--board-w); }
.nb-board.pb-root { --pb-size: 100%; --pb-gutter: 1rem; --pb-frame: var(--ink); --pb-label: var(--muted); }
.nb-board .pb-files, .nb-board .pb-ranks { font-family: var(--mono); font-weight: 400; }
.nb-board .pb-surface { border: 2px solid var(--ink); border-radius: 0; box-shadow: none; touch-action: none; }
.nb-board .pb-sq { position: relative; }
/* the marked corners: red pencil hatching on the two corners where mate is forced */
.nb-corner {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 0 3px var(--red);
  background: repeating-linear-gradient(135deg, rgba(179,38,30,.28) 0 2px, transparent 2px 7px);
}
.nb-last { position: absolute; inset: 0; background: rgba(27,26,23,.13); pointer-events: none; }
.nb-sel { position: absolute; inset: 0; background: rgba(27,26,23,.24); pointer-events: none; }
.nb-dot { position: absolute; left: 50%; top: 50%; width: 26%; height: 26%; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(27,26,23,.32); pointer-events: none; z-index: 5; }
.nb-glow { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 4px var(--ink); animation: glow 1.4s ease-in-out infinite alternate; }
@keyframes glow { from { opacity: .2; } to { opacity: .9; } }
.nb-flash { position: absolute; inset: 0; pointer-events: none; animation: flash .9s ease-out forwards; z-index: 6; }
.nb-flash-bad { background: rgba(179,38,30,.55); }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
.nb-ghost { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 50; filter: drop-shadow(0 6px 6px rgba(0,0,0,.35)); }

/* move fuel: the fifty-move rule as a ruler that empties */
.fuel { width: min(100%, var(--board-w)); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; margin-top: 10px; font: 400 12px var(--mono); color: var(--ink-2); }
.fuel[hidden] { display: none; }
.fuel-track {
  grid-column: 1 / -1; height: 8px; background: var(--paper-2); border: 1px solid var(--ink); overflow: hidden;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--rule) calc(10% - 1px) 10%);
}
.fuel-fill { height: 100%; width: var(--pct, 100%); background: var(--ink); transition: width .4s ease, background .4s; }
.fuel[data-level="amber"] .fuel-fill { background: var(--ink-2); }
.fuel[data-level="red"] .fuel-fill { background: var(--red); animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: .65; } to { opacity: 1; } }
.fuel-name { margin-top: 4px; font-family: var(--serif); font-style: italic; font-size: 14px; }
#fuel-label { margin-top: 4px; text-align: right; }
.fuel[data-level="red"] #fuel-label { color: var(--red); }

.talk-col { width: min(100%, var(--board-w)); display: flex; flex-direction: column; gap: 10px; }
.caption { margin: 0; min-height: 3.1em; font-size: 19px; line-height: 1.4; padding: 6px 0 6px 14px; border-left: 3px solid var(--rule); }
.caption.good { border-left-color: var(--ink); }
.caption.warn { border-left-color: var(--red); }
.caption b { color: var(--ink); font-weight: 700; }
.caption.warn b { color: var(--red); }
.controls { display: flex; gap: 8px; }
.ctl { flex: 1; min-height: 50px; border-radius: var(--radius); border: 1px solid var(--ink); background: transparent; display: flex; align-items: center; justify-content: center; gap: 6px; font: 500 17px var(--serif); padding: 0 8px; }
.ctl:active { background: var(--paper-2); }
.ctl.primary { background: var(--ink); color: var(--paper); flex: 1.6; }
.ctl.primary:active { background: var(--ink-2); }
.ctl:disabled { opacity: .3; }
.ctl span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Wide screens: board left, words right. */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  :root { --board-w: min(100dvh - 130px, 760px); }
  .stage { flex-direction: row; align-items: flex-start; justify-content: center; gap: 32px; }
  .board-col { width: auto; }
  .talk-col { width: 340px; margin-top: 30px; flex: none; }
}

/* ---------------- menu, toast, sticker ---------------- */
.menu { position: fixed; inset: 0; background: rgba(27,26,23,.35); z-index: 100; display: flex; justify-content: flex-end; }
.menu[hidden] { display: none; }
.menu-sheet { width: min(320px, 86vw); height: 100%; overflow-y: auto; background: var(--paper); border-left: 2px solid var(--ink); padding: max(18px, env(safe-area-inset-top)) 14px 18px; display: flex; flex-direction: column; gap: 0; }
.menu-sheet > button { text-align: left; padding: 13px 6px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent; font: 500 18px var(--serif); display: flex; justify-content: space-between; }
.menu-sheet > button:active { background: var(--paper-2); }
.menu-sheet .val { font: 400 13px var(--mono); color: var(--muted); align-self: center; }
.menu-sheet hr { border: 0; border-top: 2px solid var(--ink); width: 100%; margin: 14px 0 4px; }

/* other Panda mate apps, at the foot of the menu */
.menu-more hr { border: 0; border-top: 2px solid var(--ink); margin: 14px 0 4px; }
.mm-title { margin: 8px 6px 2px; font: 500 italic 16px var(--serif); color: var(--ink-2); }
.mm { display: flex; align-items: center; gap: 10px; padding: 9px 6px; color: inherit; text-decoration: none; font: 500 17px var(--serif); border-bottom: 1px solid var(--rule); }
.mm.soon { color: var(--muted); }
.mm-pieces { display: flex; width: 44px; }
.mm-pieces img { width: 26px; height: 26px; margin-right: -8px; }
.mm.soon .mm-pieces { opacity: .6; }
.mm-name { flex: 1; }

.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--radius); z-index: 120; font-size: 16px; }
.toast[hidden] { display: none; }

.sticker { position: fixed; inset: 0; z-index: 110; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: rgba(244,240,230,.92); }
.sticker[hidden] { display: none; }
.sticker img { width: 150px; background: #fff; padding: 12px; border: 2px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 4px; }
.sticker p { font: 700 30px var(--serif); margin: 0; text-align: center; padding: 0 20px; }
.sticker.pop img { animation: pop .55s cubic-bezier(.2,1.4,.4,1) both; }
.sticker.pop p { animation: rise .5s .12s ease-out both; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

.boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--paper); color: var(--muted); z-index: 200; font: 400 italic 18px var(--serif); }

/* Settings drawer: the home-screen icon picker */
.icon-pick { padding: 8px 4px; }
.ip-title { font-weight: 600; margin-bottom: 8px; }
.ip-row { display: flex; gap: 8px; }
.ip { padding: 0; border: 2px solid transparent; border-radius: 12px; background: none; }
.ip.on { border-color: var(--ink); }
.ip img { width: 56px; height: 56px; border-radius: 10px; display: block; }
.ip-note { font-size: 12px; opacity: .7; margin-top: 6px; }

/* ---------------- teacher view & lecture mode ---------------- */
body.teacher #xp, body.teacher .belt-stripe, body.teacher .stars { display: none; }
body.teacher .mastery, body.lecture .mastery { display: none; }

/* Lecture mode: for the projector. Big board, big words, no game chrome, silent. */
body.lecture { --board-w: min(100vw - 24px, 100dvh - 250px); }
body.lecture #xp, body.lecture .belt-stripe, body.lecture .stars, body.lecture #score, body.lecture .rooms-tabs { display: none; }
body.lecture .caption { font-size: 48px; line-height: 1.15; padding: 10px 0 10px 22px; border-left-width: 6px; }
body.lecture .caption .star { display: none; }
body.lecture #drill-title { font-size: 30px; }
body.lecture .ctl { min-height: 76px; font-size: 26px; }
body.lecture .ctl svg { width: 30px; height: 30px; }
body.lecture .fuel { font-size: 18px; }
body.lecture .fuel-track { height: 14px; }
body.lecture .fuel-name { font-size: 20px; }
body.lecture .meta { font-size: 22px; color: var(--ink); }
body.lecture .nb-board.pb-root { --pb-gutter: 1.6rem; --pb-label: var(--ink-2); }
body.lecture .nb-board .pb-files, body.lecture .nb-board .pb-ranks { font-size: 1.3rem; }
body.lecture .nb-corner { box-shadow: inset 0 0 0 6px var(--red); }
@media (min-aspect-ratio: 5/4) {
  body.lecture { --board-w: min(100dvh - 175px, 60vw); }
  body.lecture .stage { flex-direction: row; align-items: flex-start; justify-content: center; gap: 28px; }
  body.lecture .board-col { width: auto; }
  body.lecture .talk-col { width: min(34vw, 600px); margin-top: 30px; flex: none; }
}

/* ---------------- certificate ---------------- */
/* Earned with the black belt; opened by the student, never pushed. */
.cert { position: fixed; inset: 0; z-index: 130; background: rgba(27,26,23,.55); overflow-y: auto; display: flex; justify-content: center; padding: max(16px, env(safe-area-inset-top)) 16px 24px; }
.cert[hidden] { display: none; }
.cert-wrap { width: min(100%, 720px); margin: auto 0; display: flex; flex-direction: column; gap: 12px; }
.cert-sheet { background: #fdfbf5; color: var(--ink); padding: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.35); display: flex; }
@media (min-width: 640px) { .cert-sheet { aspect-ratio: 11 / 8.5; } }
.cert-border {
  flex: 1; border: 2px solid var(--ink); outline: 1px solid var(--ink); outline-offset: -8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 22px 7%; gap: 6px; container-type: inline-size;
}
.cert-logo { width: 9cqw; min-width: 44px; }
.cert-eyebrow { margin: 0; font: 400 italic max(12px, 2.2cqw) var(--serif); color: var(--ink-2); }
.cert-title { margin: 0; font: 700 max(24px, 6cqw)/1.05 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.cert-line { margin: 0; font-size: max(13px, 2.3cqw); color: var(--ink-2); max-width: 46em; }
.cert-line b { color: var(--ink); }
.cert-name {
  width: 80%; text-align: center; border: 0; border-bottom: 1px solid var(--ink); background: transparent;
  font: 400 max(28px, 6.4cqw)/1.2 'Pinyon Script', cursive; color: var(--ink); padding: 0 0 2px; outline: none;
}
.cert-name::placeholder { color: var(--rule); }
.cert-name.bad { border-bottom-color: var(--red); }
.cert-belts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 4px; font: 400 max(10px, 1.6cqw) var(--mono); color: var(--ink-2); }
.cb { display: inline-flex; align-items: center; gap: 5px; }
.cb i { width: max(14px, 2.6cqw); height: 5px; background: var(--belt); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.cert-stats { margin: 0; font: 400 max(10px, 1.6cqw) var(--mono); color: var(--muted); }
.cert-sign { display: flex; flex-direction: column; align-items: center; margin-top: 8px; }
.cert-sig { font: 400 max(24px, 4.8cqw)/1 'Pinyon Script', cursive; color: var(--ink); }
.cert-rule { width: 34cqw; height: 1px; background: var(--ink); margin: 2px 0 4px; }
.cert-who { font: 600 max(11px, 1.8cqw) var(--serif); color: var(--ink-2); }
.cert-judge { margin: 2px 0 0; font-size: max(10px, 1.5cqw); color: var(--muted); font-style: italic; }
.cert-actions { display: flex; gap: 8px; }
.cert-actions .ctl { background: var(--paper); }
.cert-actions .ctl.primary { background: var(--ink); color: var(--paper); }

@media print {
  @page { size: letter landscape; margin: 0.4in; }
  body { background: #fff !important; }
  body.cert-open > *:not(#cert) { display: none !important; }
  body.cert-open #cert { position: static; background: none; padding: 0; display: block; overflow: visible; }
  body.cert-open .cert-wrap { width: 100%; }
  body.cert-open .cert-sheet { box-shadow: none; padding: 0; height: 7.6in; aspect-ratio: auto; }
  body.cert-open .cert-actions { display: none; }
  body.cert-open .cert-name { border-bottom-color: transparent; }
  body.cert-open .cert-name::placeholder { color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* fixes after the first look (2026-11-09) */
.pk-drawer:not(.pk-open) { box-shadow: none !important; }   /* the closed settings drawer cast a shadow along the right edge */
.home-bar #xp { display: none; }                              /* XP is shown in the mastery line instead */
.ch-num::after { box-shadow: 0 0 0 1px rgba(0,0,0,.28); }     /* the white belt mark needs an edge on paper */
.menu-sheet hr, .menu-more hr { margin-top: -1px; }           /* one rule, not two */
.fuel-track { height: 6px; }

/* foreword: the author's story, in his own voice */
.foreword[hidden] { display: none; }
#foreword-text p { margin: 0 0 12px; font-size: 18px; line-height: 1.55; color: var(--ink); }
#foreword-text p:first-child::first-letter { float: left; font: 600 52px/0.85 var(--serif); margin: 6px 8px 0 0; color: var(--red); }
#foreword-text p:nth-child(2) { font-style: italic; color: var(--ink-2); padding-left: 14px; border-left: 3px solid var(--rule); }
.fw-sig { margin: 4px 0 0; display: flex; flex-direction: column; align-items: flex-end; }
.fw-name { font: 400 34px/1 'Pinyon Script', cursive; }
.fw-who { font: 400 12px var(--mono); color: var(--muted); margin-top: 2px; }
body.lecture .foreword { display: none; }
.byline span, .m-foot > span:first-child { white-space: nowrap; }
.m-next { min-width: 0; }

/* =====================================================================
   Coach Jeff's motto, the level, the mini games and the cards (2026-11-09)
   ===================================================================== */
.motto { margin: 20px 0 0; padding: 0 0 0 16px; border-left: 3px solid var(--red); }
.motto p { margin: 0; font: 500 italic 18px/1.45 var(--serif); color: var(--ink); }
.motto cite { display: block; margin-top: 4px; font: 400 12px var(--mono); color: var(--muted); font-style: normal; }
.motto cite::before { content: '— '; }

.m-label b.m-level { font: 700 normal 30px/1 var(--serif); margin-left: 4px; }
.m-of { font: 400 13px var(--mono); color: var(--muted); font-style: normal; margin-left: 4px; }

/* mini games: three columns, like the old free-play table */
.games { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ink); }
.games button { padding: 14px 6px; background: none; border: 0; border-radius: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.games button + button { border-left: 1px solid var(--rule); }
.games button:active { background: var(--paper-2); }
.g-title { font: 600 18px var(--serif); }
.games small { font: 400 italic 13px/1.25 var(--serif); color: var(--ink-2); }
.binder { margin-top: 10px; width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 4px; background: none; border: 0; border-bottom: 1px solid var(--rule); text-align: left; }
.b-title { font: 600 18px var(--serif); }
.b-count { flex: 1; font: 400 13px var(--mono); color: var(--muted); }

/* best move: the three choices carry the colour of their arrow */
.ctl .sw { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.ctl span { font-family: var(--mono); }
.ctl.primary span, .ctl span:only-child { font-family: var(--serif); }

/* the cards view */
body[data-view="cards"] #cards { display: block; }
#cards { padding: max(8px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)); min-height: 100dvh; }
.cards-sub { font: 400 italic 13px var(--serif); color: var(--muted); text-align: center; }
.cards-body { max-width: 560px; margin: 12px auto 0; }
.fc-count { margin: 0 0 8px; text-align: center; font: 400 13px var(--mono); color: var(--muted); }
.done-note { text-align: center; padding: 8px 0 18px; }
.done-note .big { font: 700 26px var(--serif); margin: 0 0 6px; }
.done-note p { margin: 0 0 12px; color: var(--ink-2); }

/* a card: the board, a title strip, a rarity frame */
.card { background: var(--card); padding: 5px; border: 1px solid var(--ink); display: flex; flex-direction: column; gap: 4px; }
.card-board { display: block; width: 100%; height: auto; }
.card-text { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; padding: 0 2px 1px; }
.card-title { font: 600 12px/1.15 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-rarity { font: 400 9px var(--mono); color: var(--muted); white-space: nowrap; }
.r-rare { outline: 1px solid var(--ink); outline-offset: 2px; }
.r-rare .card-rarity { color: var(--ink); }
.r-limited { border-color: var(--red); outline: 1px solid var(--red); outline-offset: 2px; }
.r-limited .card-rarity { color: var(--red); }
.r-legendary { background: var(--ink); border-color: var(--ink); color: var(--paper); position: relative; overflow: hidden; }
.r-legendary .card-rarity { color: #e9c46a; }
.r-legendary .card-board { box-shadow: 0 0 0 1px var(--red); }
.r-legendary::after { /* a slow foil sweep, the one shiny thing in the app */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  background-size: 250% 100%; animation: foil 3.2s ease-in-out infinite;
}
@keyframes foil { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* flashcards flip */
.flash { display: block; width: 100%; max-width: 420px; margin: 0 auto; padding: 0; border: 0; background: none; perspective: 1400px; }
.flash-inner { display: grid; transition: transform .5s cubic-bezier(.3,.7,.3,1); transform-style: preserve-3d; }
.flash.flipped .flash-inner { transform: rotateY(180deg); }
.flash-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--card); border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 3px; text-align: left; }
.flash-face.back { transform: rotateY(180deg); }
.flash-face.back.r-legendary { background: var(--ink); color: var(--paper); }
.fc-q { font: 500 18px var(--serif); }
.fc-tap { font: 400 12px var(--mono); color: var(--muted); }
.fc-a { font: 400 18px var(--serif); margin: 0; }
.fc-a b { font-family: var(--mono); font-weight: 500; }
.fc-note { font: 400 italic 16px/1.4 var(--serif); color: inherit; opacity: .85; margin: 0; }
.fc-rate { margin: 14px auto 0; max-width: 420px; }
.fc-rate[hidden] { display: none; }

/* match */
.match-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 640px) { .match-grid { grid-template-columns: repeat(4, 1fr); } }
.tile { padding: 0; border: 0; background: none; perspective: 900px; }
.tile-inner { display: grid; transition: transform .38s ease; transform-style: preserve-3d; }
.tile.up .tile-inner { transform: rotateY(180deg); }
.tile-back, .tile-front { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tile-back { display: grid; place-items: center; background: var(--ink); border: 1px solid var(--ink); aspect-ratio: 5 / 6;
  background-image: repeating-linear-gradient(45deg, rgba(244,240,230,.07) 0 6px, transparent 6px 12px); }
.tile-back img { width: 46%; filter: invert(1); opacity: .85; }
.tile-front { transform: rotateY(180deg); }
.tile.done .card { box-shadow: 0 0 0 2px var(--ink); }
.tile.done.up .tile-inner { animation: got .5s ease; }
@keyframes got { 50% { transform: rotateY(180deg) scale(1.06); } }

/* the collection */
.rar-tabs { display: flex; flex-wrap: wrap; border: 1px solid var(--ink); margin-bottom: 14px; }
.rar-tabs button { flex: 1; padding: 8px 4px; border: 0; background: none; font: 500 14px var(--serif); }
.rar-tabs button + button { border-left: 1px solid var(--rule); }
.rar-tabs button span { font: 400 11px var(--mono); color: var(--muted); }
.rar-tabs button.cur { background: var(--ink); color: var(--paper); }
.rar-tabs button.cur span { color: var(--paper); }
.deck-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 640px) { .deck-grid { grid-template-columns: repeat(3, 1fr); } }
.slot { position: relative; padding: 0; border: 0; background: none; text-align: left; }
.slot .card-title { font-size: 14px; }
.slot .card-rarity { font-size: 10px; }
.dup { position: absolute; top: 8px; right: 8px; font: 500 11px var(--mono); background: var(--ink); color: var(--paper); padding: 1px 5px; }
.card-zoom { position: fixed; inset: 0; z-index: 125; background: rgba(27,26,23,.6); display: grid; place-items: center; padding: 20px; }
.card-zoom[hidden] { display: none; }
.zoom-card { width: min(100%, 420px); background: var(--card); padding: 12px; border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 4px; display: flex; flex-direction: column; gap: 8px; }
.zoom-card.r-legendary { background: var(--ink); color: var(--paper); }
.zoom-meta { margin: 0; font: 400 12px var(--mono); opacity: .7; }

/* card sizing: the board picture fills its card; grid columns share the width evenly */
.match-grid, .deck-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.deck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .match-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .deck-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile, .slot { display: block; width: 100%; min-width: 0; }
.tile-inner { width: 100%; }
.tile-back { aspect-ratio: auto; min-height: 100%; }
.card { width: 100%; min-width: 0; }
.card-board { width: 100%; aspect-ratio: 1 / 1; }
.flash-face .card-board, .zoom-card .card-board { width: 100%; }

/* Match tiles: a flat flip (squeeze and open) instead of 3D, so tiles never
   overlap their neighbours or steal each other's taps. Both faces share one
   shape, so the grid never jumps. */
.tile { perspective: none; }
.tile-inner { display: block; transform: none !important; transition: none; }
.tile-back, .tile-front { display: block; width: 100%; aspect-ratio: 5 / 6; transform: none; backface-visibility: visible; -webkit-backface-visibility: visible; }
.tile-back { display: grid; place-items: center; }
.tile-front { display: none; }
.tile.up .tile-back { display: none; }
.tile.up .tile-front { display: block; animation: flipin .22s ease-out; }
.tile-front .card { height: 100%; justify-content: space-between; }
.tile.done .tile-front { animation: flipin .22s ease-out, got .45s .22s ease; }
@keyframes flipin { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes got { 50% { transform: scale(1.05); } }

/* Card boards live inside buttons; undo the icon rule (20px, outlined) for them. */
button svg.card-board, svg.card-board { width: 100%; height: auto; stroke: none; fill: initial; display: block; }
.tile .card-rarity { display: none; }          /* the frame shows the rarity on small tiles */
.tile .card-title { font-size: 11px; }

/* homework banner, teacher's homework links */
.hw-banner { margin: 18px 0 0; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card); border: 1px solid var(--ink); border-left: 4px solid var(--red); }
.hw-banner[hidden] { display: none; }
.hw-tag { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--red); writing-mode: vertical-rl; transform: rotate(180deg); }
.hw-body { flex: 1; display: flex; flex-direction: column; }
.hw-title { font: 600 18px var(--serif); }
.hw-sub { font: 400 italic 14px var(--serif); color: var(--ink-2); }
.hw-go { flex: none; padding: 8px 14px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 500 15px var(--serif); text-decoration: none; border-radius: var(--radius); }
.hw-links[hidden] { display: none; }
.section-sub { margin: -2px 0 10px; color: var(--muted); font: 400 italic 14px var(--serif); }
.hl { width: 100%; display: flex; justify-content: space-between; gap: 10px; padding: 10px 2px; background: none; border: 0; border-bottom: 1px solid var(--rule); text-align: left; font: 500 16px var(--serif); }
.hl-copy { font: 400 12px var(--mono); color: var(--muted); }

/* =====================================================================
   Cards as square casino plaques (European high-roller style)
   The edge is an inlay of stripes (a conic gradient from the centre, so it
   reads as the spots on a chip's edge); the face sits inside it with a
   metal rule; the board is the plaque's window.
   ===================================================================== */
.plaque {
  --face: #efe7d4; --edge: #1b1a17; --edge2: #efe7d4; --metal: #a9aeb3; --on: #1b1a17; --value: #5f6368;
  aspect-ratio: 1 / 1; width: 100%; padding: 5%; border-radius: 9%;
  background: repeating-conic-gradient(from 7.5deg, var(--edge) 0 7.5deg, var(--edge2) 7.5deg 15deg);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 6px 14px rgba(27,26,23,.28), 0 1px 2px rgba(27,26,23,.4);
  position: relative; overflow: hidden;
}
.pl-face {
  height: 100%; border-radius: 6.5%; color: var(--on); container-type: inline-size;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 3.5%; padding: 6% 7% 5%;
  background:
    linear-gradient(155deg, rgba(255,255,255,.32), rgba(255,255,255,0) 38%),
    radial-gradient(120% 90% at 50% 110%, rgba(0,0,0,.18), rgba(0,0,0,0) 60%),
    var(--face);
  box-shadow: inset 0 0 0 1.5px var(--metal), inset 0 0 0 4px var(--face), inset 0 0 0 5px var(--metal), inset 0 2px 6px rgba(0,0,0,.25);
}
.pl-top { display: flex; justify-content: space-between; gap: 6px; font: 500 max(8px, 5.2cqw) var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--value); white-space: nowrap; overflow: hidden; }
.pl-window { display: flex; justify-content: center; align-items: center; min-height: 0; }
.pl-window svg.card-board { width: auto; height: 100%; max-width: 100%; aspect-ratio: 1 / 1; box-shadow: 0 0 0 1.5px var(--metal), 0 3px 8px rgba(0,0,0,.35); }
.pl-bottom { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.pl-title { font: 600 max(9px, 7cqw) var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .01em; }
.pl-value { font: 700 max(10px, 8.5cqw)/1 var(--serif); color: var(--value); font-variant-numeric: lining-nums; white-space: nowrap; }

/* the four houses */
.plaque.r-rare      { --face: #1f4a63; --edge: #1f4a63; --edge2: #e9e1cc; --metal: #c4a052; --on: #f4efe3; --value: #e3c475; }
.plaque.r-limited   { --face: #7a1f26; --edge: #7a1f26; --edge2: #f0e6cf; --metal: #c4a052; --on: #f6eee0; --value: #ecd08a; }
.plaque.r-legendary { --face: #111112; --edge: #111112; --edge2: #c4a052; --metal: #dcbb62; --on: #f3e7c4; --value: #e8c96f; }
.plaque.r-legendary::after { /* the foil: one slow sweep of light */
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 38%, rgba(255,236,170,.30) 50%, transparent 62%);
  background-size: 260% 100%; animation: foil 3.4s ease-in-out infinite;
}
.plaque.r-common .pl-value { color: var(--on); }

/* the back: ink with a guilloché of rings and the panda seal */
.plaque.pl-back { --face: #1b1a17; --edge: #1b1a17; --edge2: #b3261e; --metal: #c4a052; }
.pl-back .pl-face { display: grid; place-items: center; grid-template-rows: 1fr;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(196,160,82,.16) 0 1px, transparent 1px 7px),
    linear-gradient(155deg, rgba(255,255,255,.12), rgba(255,255,255,0) 40%), var(--face); }
.pl-seal { width: 46%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #f4efe3; box-shadow: 0 0 0 2px var(--metal), 0 0 0 5px var(--face), 0 0 0 6px var(--metal); }
.pl-seal img { width: 72%; }

/* where plaques live */
.tile-back, .tile-front { aspect-ratio: 1 / 1; }
.tile-back { background: none; border: 0; background-image: none; display: block; }
.tile-front .plaque, .tile-back .plaque { height: 100%; }
.tile.done .plaque { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink), 0 6px 14px rgba(27,26,23,.28); }
.slot .plaque { margin-bottom: 0; }
.zoom-card { width: min(100%, 420px); background: var(--card); padding: 16px; border: 1px solid var(--ink); outline: 0; display: flex; flex-direction: column; gap: 10px; color: var(--ink); }
.zoom-card .plaque { width: 100%; }
.zoom-card.r-legendary { background: var(--card); color: var(--ink); }

/* Small plaques (Match tiles): the board and the name only; the frame shows the house. */
.tile .pl-top, .tile .pl-value { display: none; }
.tile .pl-face { grid-template-rows: minmax(0, 1fr) auto; padding: 8% 8% 6%; gap: 4%; }
.tile .pl-bottom { justify-content: center; }
.tile .pl-title { font-size: max(8px, 9.5cqw); }
.tile .pl-window svg.card-board { width: auto; height: 100%; max-width: 100%; }