/* Local test page for the live class runtime. Board look follows Ritik's class mock: dark chalkboard, Kalam chalk
   hand, five pens; the player chrome follows the mock's final state (Shorts-style, board fills the screen). */
:root {
  --bg: #e9ede8; --panel: #ffffff; --ink: #17211b; --muted: #5b6a61; --line: #d3dbd3; --accent: #1f7a4c;
  --board-a: #1b1f1e; --board-b: #0b0d0c; --frame: #101413;
  --chalk: #f1efe6; --chalk-dim: #b9c1b8; --y: #f3d77c; --p: #f2a49f; --b: #9fcfee; --g: #a9dca8;
  --f-chalk: "Kalam", "Segoe Print", cursive; --f-ui: "Hind", system-ui, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-ui); }
.wrap { display: flex; gap: 24px; justify-content: center; align-items: flex-start; flex-wrap: wrap; padding: 20px 16px; }
.side { width: 380px; max-width: 100%; display: flex; flex-direction: column; gap: 12px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.card h1 { font-size: 20px; margin: 0 0 4px; }
.card p { margin: 0 0 10px; color: var(--muted); font-size: 13.5px; }
label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 10px 0 4px; font-weight: 600; }
select, button.go { width: 100%; font: inherit; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
button.go { background: var(--accent); color: #fff; border: 0; font-weight: 700; margin-top: 12px; cursor: pointer; }
button.go:disabled { opacity: .5; }
.row { display: flex; gap: 8px; align-items: center; }
.log { font-family: var(--f-mono); font-size: 11px; height: 340px; overflow: auto; white-space: pre-wrap; color: #34423a; background: #f7f8f5; border-radius: 10px; padding: 8px; }

/* phone */
.phone { width: 380px; max-width: 100%; background: var(--frame); border-radius: 44px; padding: 10px; box-shadow: 0 24px 50px -28px rgba(0,0,0,.6); }
.screen { position: relative; height: 780px; max-height: calc(100vh - 60px); border-radius: 34px; overflow: hidden; color: var(--chalk);
  background: radial-gradient(120% 90% at 30% 15%, var(--board-a), var(--board-b)); display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 8px; padding: 14px 12px 6px; position: relative; z-index: 5; }
.top .bk { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: var(--chalk); cursor: pointer; }
.top b { flex: 1; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip { border: 1px solid rgba(255,255,255,.35); background: transparent; color: var(--chalk); border-radius: 7px; font-size: 11px; padding: 3px 7px; cursor: pointer; }
.chip.on { background: var(--chalk); color: #111; }
.chap { margin: 0 12px; display: flex; gap: 3px; }
.chap i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.14); }
.chap i.done { background: var(--chalk-dim); } .chap i.cur { background: var(--y); }
.chaplab { font-size: 11px; color: var(--chalk-dim); margin: 4px 12px 0; }

/* board */
/* padding in px: cqw on the container itself resolves against the viewport, not the board */
.board { flex: 1; min-height: 0; overflow-y: auto; position: relative; container-type: inline-size; padding: 8px 14px 28px; scroll-behavior: smooth; cursor: pointer; }
.btitle { font-family: var(--f-chalk); font-weight: 700; font-size: 7.2cqw; line-height: 1.15; display: inline-block; border-bottom: 3px solid var(--b); margin-top: 1cqw; }
.bsub { font-family: var(--f-chalk); color: var(--chalk-dim); font-size: 4cqw; margin-top: 1.5cqw; }
.items { display: flex; flex-direction: column; gap: 4.5cqw; margin-top: 5cqw; }
.blk { position: relative; font-family: var(--f-chalk); font-size: 4.9cqw; line-height: 1.35; }
.bpage + .bpage { margin-top: 10cqw; padding-top: 6cqw; border-top: 2px dashed rgba(241,239,230,.16); }
.t-write ul { margin: 0; padding-left: 1.15em; } .t-write li { margin: .2em 0; } .t-write p { margin: .15em 0; }
.t-write b, .cardi b, .callout b, .tl b, .st b { color: var(--y); font-weight: 700; }
.w { opacity: 0; transition: opacity .18s; } .w.on { opacity: 1; }
.ink { opacity: 0; } .ink.drawn { opacity: 1; animation: write .7s ease-out; }
@keyframes write { from { clip-path: inset(-10% 100% -10% -2%); } to { clip-path: inset(-10% -2% -10% -2%); } }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6cqw; }
.cardi { border: 2px dashed rgba(241,239,230,.42); border-radius: 10px; padding: 2.6cqw; font-size: 4.2cqw; line-height: 1.28; min-width: 0; }
.cardi .lab { display: block; font-weight: 700; font-size: 4.7cqw; margin-bottom: .2em; }
.cardi small { display: block; color: var(--chalk-dim); font-size: 3.6cqw; margin-top: .4em; }
.pen-yellow { color: var(--y); } .pen-pink { color: var(--p); } .pen-blue { color: var(--b); } .pen-green { color: var(--g); } .pen-white { color: var(--chalk); }
.callout { border-radius: 10px; padding: 3cqw 3.4cqw; font-size: 4.5cqw; }
.callout.key { border: 2px solid var(--p); text-align: center; } .callout.key .lab { color: var(--p); font-weight: 700; }
.callout.trap { border: 2px solid var(--p); background: rgba(242,164,159,.08); }
.callout.trap .lab { display: inline-block; background: var(--p); color: #2a1210; font-weight: 700; padding: 0 .5em; border-radius: 4px; margin-right: .4em; font-size: .82em; }
.callout.note { background: var(--y); color: #2a2210; transform: rotate(-1deg); box-shadow: 0 8px 18px rgba(0,0,0,.35); }
.callout.note .lab { display: block; font-family: var(--f-ui); font-size: .62em; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.callout.tip { border: 2px dashed var(--g); } .callout.tip .lab { color: var(--g); font-weight: 700; }
table.ct { width: 100%; border-collapse: collapse; font-size: 4.1cqw; }
table.ct th { text-align: left; color: var(--b); padding: .3em .35em; border-bottom: 2px solid rgba(241,239,230,.4); }
table.ct td { padding: .35em; border-bottom: 1px dashed rgba(241,239,230,.22); vertical-align: top; }
table.ct td:first-child { color: var(--y); font-weight: 700; }
.tl { display: flex; flex-direction: column; gap: 1.8cqw; font-size: 4.4cqw; }
.tl > div { display: grid; grid-template-columns: auto 1fr; gap: .6em; align-items: baseline; }
.tl time { font-weight: 700; color: var(--y); white-space: nowrap; }
.flow { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.flow .st { border: 2px solid rgba(241,239,230,.6); border-radius: 10px; padding: 2cqw 3cqw; text-align: center; font-size: 4.4cqw; }
.flow .ar { text-align: center; color: var(--b); font-size: 5cqw; line-height: 1.1; }
/* chalk pictures fade out at the edges so they sit on the board instead of in a box */
.imgw img { width: 100%; display: block; -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%); }
.imgw .icap { font-size: 3.9cqw; color: var(--chalk-dim); margin-top: 1.2cqw; }
.mapw svg { width: 100%; height: auto; display: block; }
.stamp { position: absolute; right: -1cqw; top: -3cqw; font-family: var(--f-mono); font-size: 2.7cqw; font-weight: 600; color: var(--y); border: 2px solid var(--y);
  border-radius: 6px; padding: .2em .5em; transform: rotate(6deg); background: rgba(28,47,40,.95); white-space: nowrap; animation: stamp .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes stamp { from { transform: rotate(6deg) scale(2); opacity: 0; } to { transform: rotate(6deg) scale(1); opacity: 1; } }
.circ { position: absolute; inset: -8px -10px; pointer-events: none; overflow: visible; }
.circ ellipse, .circ path { fill: none; stroke: var(--y); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1000; animation: circ 1s ease-out; }
@keyframes circ { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

/* overlays */
.overlay { position: absolute; inset: 60px 10px auto 10px; z-index: 15; background: rgba(8,14,12,.95); border: 1px solid rgba(243,215,124,.4); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.overlay .qk { font-size: 10.5px; color: var(--b); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.overlay h5 { margin: 0; font-family: var(--f-chalk); font-size: 19px; color: var(--y); }
.opt { text-align: left; border: 1px solid rgba(241,239,230,.25); background: rgba(255,255,255,.04); border-radius: 10px; padding: 9px 11px; font: 16px var(--f-chalk); color: var(--chalk); cursor: pointer; }
.opt.right { border-color: var(--g); background: rgba(169,220,168,.14); } .opt.wrong { border-color: var(--p); background: rgba(242,164,159,.14); }
.overlay.done .opt { cursor: default; } .overlay .dk { font-size: 13px; color: var(--chalk-dim); }
.overlay.closing { animation: fadeout .5s ease-in forwards; } @keyframes fadeout { to { opacity: 0; transform: translateY(-6px); } }
.status { position: absolute; inset: 0; display: grid; place-items: center; z-index: 20; background: rgba(8,14,12,.82); font-size: 15px; color: var(--chalk); text-align: center; padding: 30px; }

/* bottom stack */
.stage { display: flex; align-items: flex-end; gap: 10px; padding: 6px 12px 0; }
.cam { position: relative; flex: none; width: 74px; height: 74px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.88); padding: 0; background: #222; cursor: pointer; transition: width .25s, height .25s, box-shadow .2s; }
.cam.big { width: 128px; height: 128px; }
.cam img, .cam video { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.cam [hidden] { display: none; }
.cam .tag { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 10px; font-weight: 600; padding: 0 6px; border-radius: 5px; line-height: 15px; }
.cam.speaking { box-shadow: 0 0 0 4px rgba(169,220,168,.35), 0 0 18px rgba(169,220,168,.5); }
.cap { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; max-height: 3.9em; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.cap .you { color: var(--b); }
.reacts { display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px 0; scrollbar-width: none; }
.reacts button { flex: none; border: 1px solid rgba(241,239,230,.3); background: transparent; color: var(--chalk); border-radius: 999px; font: 11.5px var(--f-ui); padding: 4px 10px; cursor: pointer; }
.ctl { display: flex; justify-content: center; gap: 10px; padding: 10px 12px 16px; }
.ctl button { height: 40px; min-width: 40px; border-radius: 999px; border: 0; background: rgba(255,255,255,.1); color: var(--chalk); font: 600 13px var(--f-ui); padding: 0 14px; cursor: pointer; }
.ctl button.on { background: var(--g); color: #0f1714; }
.ctl button.live { background: #e2554b; color: #fff; }
.paused { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 9; width: 64px; height: 64px; border-radius: 50%; background: rgba(0,0,0,.55); display: grid; place-items: center; font-size: 26px; }

/* preview page: everything fully drawn, no animation, so a screenshot shows the finished board */
.static .w, .static .ink, .static .md, .static .btitle { opacity: 1 !important; animation: none !important; transition: none !important; }
.static .mp { stroke-dashoffset: 0 !important; transition: none !important; }
.static .circ ellipse, .static .circ path, .static .stamp { animation: none !important; }
.hl { position: absolute; inset: -6px -8px; border: 3px solid var(--y); border-radius: 12px; pointer-events: none; box-shadow: 0 0 14px rgba(243,215,124,.35); animation: hl 2.4s ease-in-out forwards; }
@keyframes hl { 0% { opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
.hl.long { animation-duration: 4.8s; } /* the class went back to this item */
.static .hl { animation: none; }
.imgph { aspect-ratio: 4 / 3; border: 2px dashed rgba(241,239,230,.35); border-radius: 8px; display: grid; place-items: center; color: var(--chalk-dim); font-size: 4cqw; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.fadein { animation: fadein .6s ease-out; } @keyframes fadein { from { opacity: 0; } }

/* Ask Sir / Ma'am box, and the collapse button (hides chips, bottom row and the box) */
.askbox { display: flex; gap: 6px; padding: 8px 12px 0; }
.askbox[hidden] { display: none; }
.askbox input { flex: 1; min-width: 0; border-radius: 999px; border: 1px solid rgba(241,239,230,.3); background: rgba(255,255,255,.06); color: var(--chalk); font: 13px var(--f-ui); padding: 8px 12px; outline: none; }
.askbox button { border-radius: 999px; border: 0; background: #22a05a; color: #fff; font: 600 13px var(--f-ui); padding: 0 14px; cursor: pointer; }
.collapse { position: absolute; right: 10px; bottom: 14px; z-index: 6; width: 30px; height: 30px; border-radius: 999px; border: 0; background: rgba(255,255,255,.12); color: var(--chalk); font-size: 15px; cursor: pointer; }
body.collapsed .reacts, body.collapsed .ctl, body.collapsed .askbox { display: none; }
body.collapsed .collapse { bottom: 10px; }

/* embedded player (?t=): just the phone screen, filling the frame it is shown in */
body.embed { background: #0b0d0c; }
body.embed #stop { display: none; } /* the back arrow ends the class */
body.embed .side { display: none; }
body.embed .wrap { padding: 0; display: block; }
body.embed .phone { width: 100%; max-width: none; padding: 0; border-radius: 0; background: none; box-shadow: none; }
body.embed .screen { height: 100vh; max-height: none; border-radius: 0; }