/* Doodle board watch page: phone-first. The board keeps the doc's shape (letterboxed); controls below it on tall screens,
 * overlaid (auto-hiding) on short ones and in full screen. */
:root {
  --bg: #16171c; --fg: #f1f1f4; --muted: #a3a6b3; --accent: #ffd43b; --accent2: #4dabf7; --card: #22242c; --line: #343743;
  --ar: 1.7778; --paper: #fafaf7;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 15px/1.4 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
body { overflow: hidden; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }

/* ------------------------------------------------ ask */
.ask { min-height: 100%; display: flex; align-items: flex-start; justify-content: center; padding: 16px; overflow-y: auto; height: 100%; }
.ask-card { width: 100%; max-width: 640px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 18px 18px; margin-top: 4vh; position: relative; }
.ask-back { position: absolute; left: 14px; top: 14px; color: var(--muted); text-decoration: none; font-size: 20px; }
.ask h1 { font: 700 34px/1.1 Caveat, cursive; margin: 6px 0 4px 30px; color: var(--accent); }
.ask-sub { color: var(--muted); margin: 0 0 16px; }
.ask-lbl { display: block; font-weight: 600; margin-bottom: 6px; }
.ask input, .ask select { width: 100%; min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: #15161b; color: var(--fg); padding: 8px 12px; font-size: 16px; }
.ask-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.ask-grid label { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
/* [gallery] Language, Explain, Hand (Shape moved to the pickers): one row of three on wide cards */
.ask-grid label:first-child { grid-column: 1 / -1; }
@media (min-width: 560px) { .ask-grid { grid-template-columns: 1fr 1fr 1fr; } .ask-grid label:first-child { grid-column: auto; } }
.ask-go { width: 100%; min-height: 48px; border: 0; border-radius: 12px; background: var(--accent); color: #1b1b1f; font-weight: 700; font-size: 17px; cursor: pointer; }
.ask-msg { margin-top: 10px; color: var(--muted); min-height: 1.4em; }

/* ------------------------------------------------ [gallery] optional pickers on the ask card (start-pickers.js) */
.pick { margin: 14px 0 4px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pick-sec { min-width: 0; }
.pick-lbl { font-weight: 600; margin-bottom: 6px; }
.pick-lbl small { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 4px; }
/* [rich] the Full board switch: a normal checkbox on one line with its label */
.ask .pick-rich input[type="checkbox"] { width: 20px; min-height: 20px; height: 20px; padding: 0; margin: 0 8px 0 0; flex: none; accent-color: #ffd43b; }
.pick-rich .pick-lbl { display: flex; align-items: center; flex-wrap: wrap; cursor: pointer; }
.pick-row { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 2px 2px 6px; margin: 0 -2px; height: 122px; scrollbar-width: thin; }
.pick-card { flex: 0 0 132px; width: 132px; height: 112px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border: 2px solid var(--line); border-radius: 12px; background: #15161b; cursor: pointer; overflow: hidden; text-align: left; position: relative; }
.pick-card img, .pick-card .pick-ph { display: block; width: 100%; height: 74px; flex: 0 0 74px; object-fit: cover; background: #2a2c35; }
.pick-card .pick-ph { display: flex; align-items: center; justify-content: center; font: 700 30px/1 Caveat, cursive; color: var(--accent); }
.pick-name { display: block; padding: 6px 8px 0; font-size: 13px; line-height: 1.2; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-card.on { border-color: var(--accent); }
.pick-card.on::after { content: "✓"; position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #1b1b1f; font: 700 13px/22px Inter, sans-serif; text-align: center; }
.pick-card:hover { border-color: #5a5e6e; }
.pick-card.on:hover { border-color: var(--accent); }
.pick-card:focus-visible, .pick-segb:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; }
.pick-desc { margin: 2px 0 0; color: var(--muted); font-size: 13px; line-height: 1.35; min-height: 2.7em; }
.pick-pair { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .pick-pair { grid-template-columns: 1fr 1fr; } }
.pick-seg { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #15161b; }
.pick-segb { flex: 1 1 0; min-width: 0; min-height: 44px; border: 0; background: none; color: var(--fg); cursor: pointer; font-size: 14px; font-weight: 600; padding: 4px 6px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.pick-segb + .pick-segb { border-left: 1px solid var(--line); }
.pick-segb.on { background: var(--accent); color: #1b1b1f; }
.pick-segb[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.pick-shape { display: inline-block; border: 2px solid currentColor; border-radius: 3px; flex: 0 0 auto; }
.pick-landscape { width: 18px; height: 11px; } .pick-vertical { width: 10px; height: 16px; } .pick-square { width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce) { .pick-row { scroll-behavior: auto; } }

/* ------------------------------------------------ watch */
.stage { position: fixed; inset: 0; display: flex; flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.top { flex: 0 0 auto; height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 8px; min-width: 0; }
.title { flex: 1 1 auto; min-width: 0; font: 600 22px/1.1 Caveat, cursive; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 14px; min-height: 36px; cursor: pointer; font-weight: 600; }
.icon-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; border-radius: 10px; cursor: pointer; text-decoration: none; color: var(--fg); font-size: 20px; }
.icon-btn:hover { background: rgba(255, 255, 255, .07); }
.icon-btn svg { width: 24px; height: 24px; fill: currentColor; }
.icon-btn.txt { font: 700 13px/1 Inter, sans-serif; letter-spacing: .5px; color: var(--muted); }
.icon-btn.txt.on { color: var(--fg); }
.icon-btn.txt.on::after { content: ""; position: absolute; }

.board-area { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; container-type: size; }
.board-box { position: relative; width: min(100cqw, calc((100cqh - var(--below, 0px)) * var(--bar, var(--ar)))); aspect-ratio: var(--bar, var(--ar)); background: var(--paper); overflow: hidden; container-type: inline-size; }
.board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; user-select: none; -webkit-user-select: none; }

/* captions */
.cap { text-align: center; pointer-events: none; }
.cap span { transition: none; }
.cap .w { color: inherit; }
.cap .w.on { color: var(--accent); }
.cap-over { position: absolute; left: 4%; right: 4%; bottom: 4.5%; display: flex; justify-content: center; }
.cap-over .line { background: rgba(20, 20, 26, .78); color: #fff; border-radius: .45em; padding: .18em .55em .24em; font: 600 clamp(13px, 2.9cqw, 40px)/1.3 Inter, "Noto Sans Devanagari", system-ui, sans-serif; max-width: 100%; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* 9:16: captions in the free bottom band of the frame (72-95% of its height, clear of Shorts/Reels UI) */
body.tall-frame .cap-over { bottom: auto; top: 74%; }
body.tall-frame .cap-over .line { font-size: clamp(13px, 6.6cqw, 54px); }
/* [rich] v1.6-rich doc.capPlace "auto": the bar goes to the top band when content fills the bottom one */
.cap-over.cap-top { bottom: auto; top: 3.5%; }
body.tall-frame .cap-over.cap-top { top: 3%; }
.cap-below { flex: 0 0 auto; height: var(--below, 0px); width: 100%; padding: 12px 16px 0; overflow: hidden; font: 600 clamp(17px, 4.6vw, 22px)/1.35 Inter, "Noto Sans Devanagari", system-ui, sans-serif; color: #e8e8ee; display: none; }
.cap-below .w.on { color: var(--accent); }
body.cap-below-mode { --below: 100px; }
body.cap-below-mode .cap-below { display: block; }
body.cap-below-mode .cap-over { display: none; }
body.cc-off .cap { visibility: hidden; }

/* big play / status */
.big-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; border: 0; background: rgba(22, 23, 28, .82); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 24px rgba(0, 0, 0, .3); }
.big-play svg { width: 38px; height: 38px; fill: currentColor; margin-left: 4px; }
.big-play:hover { background: rgba(22, 23, 28, .92); transform: scale(1.04); }
.status { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); background: rgba(22, 23, 28, .85); color: #fff; border-radius: 999px; padding: 6px 14px; font-size: 13px; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.status::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent; margin-right: 8px; vertical-align: -1px; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* controls */
.controls { flex: 0 0 auto; padding: 4px 8px 2px; }
.bar { position: relative; height: 28px; cursor: pointer; touch-action: none; margin: 0 6px; }
.track { position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.bar:hover .track, .bar.drag .track { top: 11px; height: 6px; }
.buffered { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, .14); width: 100%; }
.fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); width: 0; }
.ticks { position: absolute; left: 0; right: 0; top: 10px; height: 8px; pointer-events: none; }
.ticks i { position: absolute; top: 0; width: 2px; height: 8px; margin-left: -1px; background: rgba(22, 23, 28, .9); border-radius: 1px; }
.thumb { position: absolute; top: 7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--accent); left: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.row { display: flex; align-items: center; gap: 2px; min-width: 0; }
.clock { font: 500 13px/1 Inter, sans-serif; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 4px; white-space: nowrap; }
.spacer { flex: 1 1 auto; }
#playBtn .i-pause { display: none; }
body.playing #playBtn .i-pause { display: block; }
body.playing #playBtn .i-play { display: none; }

/* scene strip */
.strip { flex: 0 0 auto; display: flex; gap: 8px; overflow-x: auto; padding: 6px 12px 10px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.strip button { flex: 0 0 auto; width: clamp(64px, calc(63px * var(--ar)), 112px); border: 2px solid transparent; border-radius: 10px; padding: 0; background: var(--card); overflow: hidden; cursor: pointer; text-align: left; scroll-snap-align: start; position: relative; }
.strip button.on { border-color: var(--accent); }
.strip img, .strip .ph { display: block; width: 100%; height: 63px; object-fit: cover; background: var(--paper); }
.strip .ph { display: flex; align-items: center; justify-content: center; color: #555; font: 700 22px Caveat, cursive; }
.strip .ph-wk { font: 400 15px/1.1 KaTeX_Main, serif; color: #1d2b53; overflow: hidden; padding: 0 4px; }  /* [maths] v1.10: a worked-maths scene's answer */
.strip .ph-wk .katex { font-size: 15px; white-space: nowrap; }
.strip span { display: block; font-size: 11px; line-height: 1.25; padding: 4px 6px 5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip b { position: absolute; left: 4px; top: 4px; background: rgba(22, 23, 28, .8); color: #fff; font-size: 11px; border-radius: 6px; padding: 1px 6px; }
.strip button.pending { opacity: .45; }
.ask-lennote { margin: -4px 0 14px; }  /* [length] the Length menu's note */
@media (max-width: 559px) { .ask-grid label.ask-len { grid-column: 1 / -1; } }  /* [length] the menu's labels in full on a phone */
/* [length] the first scene of a chapter board: "Part k: name" (lessons made in chapters only) */
.ticks i.ch { top: -3px; height: 14px; width: 3px; background: #e8590c; }
.strip button.ch { border-left: 4px solid #e8590c; }
.strip button.ch::after { content: attr(data-ch); position: absolute; right: 4px; top: 4px; max-width: calc(100% - 34px); background: #e8590c; color: #fff; font-size: 10px; line-height: 1.3; border-radius: 6px; padding: 1px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* short screens (a phone on its side) and full screen: the board fills, controls float over it */
body.overlay .top { position: absolute; left: 0; right: 0; top: 0; z-index: 3; background: linear-gradient(rgba(10, 10, 14, .7), transparent); transition: opacity .25s; }
body.overlay .controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: linear-gradient(transparent, rgba(10, 10, 14, .8)); padding-top: 18px; transition: opacity .25s; }
body.overlay .strip { position: absolute; left: 0; right: 0; bottom: 84px; z-index: 3; background: rgba(10, 10, 14, .75); }
body.overlay.idle .top, body.overlay.idle .controls { opacity: 0; pointer-events: none; }
body.overlay.idle .stage { cursor: none; }
body.overlay .board-area { flex: 1 1 auto; }
body.strip-off .strip { display: none; }

/* ------------------------------------------------ capture mode (?video=1): the board only, the frame's exact size */
body.video { background: var(--paper); }
body.video .top, body.video .controls, body.video .strip, body.video .big-play, body.video .status, body.video .cap-below { display: none !important; }
body.video .stage { padding: 0; }
body.video .board-box { width: 100vw; height: 100vh; aspect-ratio: auto; }
body.video .cap-over { display: flex !important; }
body.video .cap-over .line { display: inline-block; text-align: center; font-size: 37px; line-height: 48px; background: #3a3a40; border-radius: 12px; }
body.video.tall-frame .cap-over .line { font-size: 48px; line-height: 62px; }