/* Curio — live session flow (Kahoot-pattern) · uses curio.css tokens + platform/teacher components */
.ss-dashgrid{display:grid;grid-template-columns:1.5fr .9fr;gap:16px;flex:1;min-height:0;align-content:start}
.ss-games{display:flex;flex-direction:column;gap:14px;min-height:0}
.ss-feat{display:flex;flex-direction:row;gap:22px;align-items:center;padding:24px 26px}
.ss-feat .fmasc{width:96px;flex:none;filter:drop-shadow(0 10px 14px rgba(122,40,12,.3))}
.ss-feat h2{font-family:'Fredoka',sans-serif;font-weight:700;font-size:26px;margin:0 0 4px}
.ss-feat p{margin:8px 0 14px;font-weight:600;color:var(--ink-soft);font-size:15px;max-width:52ch}
.ss-tags{display:flex;gap:7px;flex-wrap:wrap}
.ss-tag{font-family:'Fredoka',sans-serif;font-weight:600;font-size:12.5px;padding:5px 11px;border-radius:999px;background:var(--tint-2);color:var(--orange-deep)}
.ss-tag.std{background:#fff;box-shadow:inset 0 0 0 2px var(--tint);color:var(--ink-soft)}
.ss-gamerow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ss-game{display:flex;flex-direction:column;gap:9px;padding:16px 18px}
.ss-game b{font-family:'Fredoka',sans-serif;font-weight:600;font-size:16.5px}
.ss-tryrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.ss-tryrow .tbtn{flex:1 1 auto}
.ss-tryhint{margin:2px 2px 0}
.ss-past{display:flex;flex-direction:column}
.ss-pastrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:2px solid var(--tint-2)}
.ss-pastrow:last-child{border-bottom:none}
.ss-pastrow .in{flex:1;min-width:0}
.ss-pastrow b{font-family:'Fredoka',sans-serif;font-weight:600;font-size:14.5px;display:block}
.ss-pastrow em{font-style:normal;font-weight:600;font-size:12.5px;color:var(--ink-faint)}
.ss-acc{font-family:'Fredoka',sans-serif;font-weight:700;font-size:15px;color:var(--orange-deep)}
/* projector lobby */
.ss-proj{flex-direction:column;background:linear-gradient(170deg,var(--orange),var(--orange-deep));color:#fff;align-items:center;padding:30px 44px;gap:20px}
.ss-projtop{display:flex;align-items:center;justify-content:space-between;width:100%}
.ss-live{display:inline-flex;align-items:center;gap:10px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:20px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px rgba(255,255,255,.28);border-radius:999px;padding:10px 20px}
.ss-url{font-family:'Fredoka',sans-serif;font-weight:500;font-size:30px;color:rgba(255,255,255,.9)}
.ss-url b{font-weight:700;color:#fff;background:rgba(255,255,255,.16);padding:2px 16px;border-radius:14px}
.ss-bigcode{display:flex;gap:14px}
.ss-cbx{width:118px;height:138px;border-radius:26px;display:grid;place-items:center;font-family:'Fredoka',sans-serif;font-weight:700;font-size:84px;background:#fff;color:var(--orange-deep);box-shadow:0 8px 0 rgba(122,20,0,.35),0 26px 40px -20px rgba(60,15,0,.5)}
.ss-names{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;width:min(980px,100%)}
.ss-name{display:inline-flex;align-items:center;gap:8px;justify-content:center;font-family:'Fredoka',sans-serif;font-weight:600;font-size:16.5px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);border-radius:999px;padding:9px 14px;white-space:nowrap;animation:ss-pop .5s var(--ease-pop) backwards}
.ss-name img{width:22px;height:auto}
.ss-name.wait{background:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);border-style:none;color:rgba(255,255,255,.65);animation:ss-breathe 2s ease-in-out infinite}
@keyframes ss-pop{from{transform:scale(.3);opacity:0}}
@keyframes ss-breathe{0%,100%{opacity:.5}50%{opacity:.95}}
.ss-ends{font-weight:700;font-size:13px;color:#9C8576;white-space:nowrap}
.ss-ends b{font-family:'Fredoka',sans-serif;font-weight:600;font-size:16px;color:var(--orange-deep,#C8431A);font-variant-numeric:tabular-nums}
.ss-who{white-space:nowrap;align-self:center}
.ss-projfoot{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:auto}
.ss-expire{font-weight:700;font-size:14px;color:rgba(255,255,255,.75)}
/* student join */
.cb.xl{width:86px;height:102px;font-size:52px;border-radius:20px}
.cb.cur{position:relative}
.cb.cur::after{content:'';width:3px;height:52px;border-radius:2px;background:var(--orange);animation:ss-caret 1.1s steps(1) infinite}
@keyframes ss-caret{50%{opacity:0}}
/* nickname assignment */
.ss-steps{display:flex;gap:22px;align-items:stretch}
.ss-step{width:430px;display:flex;flex-direction:column;align-items:center;gap:14px;padding:32px 34px;text-align:center}
.ss-step.dim{opacity:.62;transform:scale(.96)}
.ss-nick{font-family:'Fredoka',sans-serif;font-weight:700;font-size:34px;letter-spacing:-.01em;color:var(--orange-deep)}
.ss-avring{width:130px;height:130px;border-radius:50%;background:linear-gradient(160deg,#fff,var(--tint-2));box-shadow:0 6px 0 var(--tint),inset 0 0 0 3px #fff;display:grid;place-items:center}
.ss-avring img{width:70%}
.ss-bob{animation:ss-bob 4.2s ease-in-out infinite}
@keyframes ss-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* gameplay */
.ss-play{flex-direction:column;padding:20px 30px;gap:18px}
.ss-playtop{display:flex;align-items:center;gap:16px}
.ss-progwrap{flex:1;display:flex;align-items:center;gap:12px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;color:var(--ink-soft)}
.ss-progbar{flex:1;max-width:360px;height:14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 2px var(--tint);overflow:hidden}
.ss-progbar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--yellow),var(--orange))}
.ss-qcard{width:min(880px,100%);margin:0 auto;display:flex;flex-direction:column;gap:22px;flex:1;justify-content:center}
.ss-q{font-family:'Fredoka',sans-serif;font-weight:600;font-size:32px;line-height:1.2;text-align:center;margin:0}
.ss-ans{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ss-a{min-height:104px;border-radius:22px;display:grid;place-items:center;font-family:'Fredoka',sans-serif;font-weight:700;font-size:34px;background:#fff;color:var(--ink);box-shadow:0 6px 0 var(--tint),inset 0 0 0 2px var(--tint-2);cursor:pointer;transition:transform .12s var(--ease-pop)}
.ss-a:hover{transform:translateY(2px)}
.ss-a.pick{background:var(--orange);color:#fff;background-image:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 55%);box-shadow:0 6px 0 var(--orange-dark),0 16px 24px -12px rgba(200,67,26,.5)}
.ss-dots{display:flex;gap:9px;justify-content:center}
.ss-dot{width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--tint)}
.ss-dot.done{background:var(--yellow);box-shadow:inset 0 -2px 0 rgba(122,75,0,.3)}
.ss-dot.cur{background:var(--orange);box-shadow:0 0 0 4px var(--tint)}
.ss-peek{position:absolute;right:26px;bottom:-6px;width:88px;transform:rotate(-6deg);filter:drop-shadow(0 8px 10px rgba(122,40,12,.3))}
/* report */
.ss-repgrid{display:grid;grid-template-columns:1.35fr .95fr;gap:16px;flex:1;min-height:0;align-content:start}
.ss-qrow{display:flex;align-items:center;gap:12px;padding:7.5px 0}
.ss-qrow .qn{width:34px;flex:none;font-family:'Fredoka',sans-serif;font-weight:700;font-size:14px;color:var(--ink-soft)}
.ss-qrow .qt{width:230px;flex:none;font-weight:700;font-size:13.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-qbar{flex:1;height:16px;border-radius:999px;background:var(--tint-2);box-shadow:inset 0 0 0 2px var(--tint);overflow:hidden}
.ss-qbar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--orange-bright),var(--orange))}
.ss-qrow.hard .ss-qbar i{background:linear-gradient(90deg,#F2A08C,#D95B3A)}
.ss-qrow .pc{width:44px;flex:none;text-align:right;font-family:'Fredoka',sans-serif;font-weight:700;font-size:14.5px;color:var(--orange-deep)}
.ss-stdrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:2px solid var(--tint-2)}
.ss-stdrow:last-child{border-bottom:none}
.ss-stdrow .in{flex:1}
.ss-stdrow b{font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;display:block}
.ss-stdrow em{font-style:normal;font-weight:600;font-size:12.5px;color:var(--ink-faint)}
.ss-sumrow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ss-sum{background:linear-gradient(180deg,#fff,var(--tint-2));border-radius:16px;padding:14px 16px;text-align:center}
.ss-sum b{font-family:'Fredoka',sans-serif;font-weight:700;font-size:30px;color:var(--orange-deep);display:block;line-height:1.05}
.ss-sum em{font-style:normal;font-weight:700;font-size:12.5px;color:var(--ink-soft)}
.ss-trust{display:flex;align-items:center;justify-content:center;gap:10px;background:#E7F8EE;color:#1A9D5E;border-radius:999px;padding:11px 22px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:14px;align-self:center}
/* live tutor + game + certificate (class-code flow: game -> check-in -> tutor -> cert) */
.lt-game{flex-direction:column;min-height:100vh;background:#0E0A07}
.lt-gamebar{display:flex;align-items:center;gap:14px;padding:10px 16px;background:var(--cream)}
.lt-gametitle{flex:1;font-family:'Fredoka',sans-serif;font-weight:600;font-size:16px;color:var(--ink-soft);text-align:center}
/* the teacher's way out of a try-out: present in every view, never loud enough
   to compete with what the student-facing screen is asking them to do */
.lt-exit{font-size:14px;padding:8px 16px;white-space:nowrap}
.lt-gframe{flex:1;width:100%;border:none;min-height:0}
/* The tutor is a fixed-height column: header, scrolling transcript, then the
   question and the input pinned in view. It used to be min-height:100vh, so
   the page grew with the conversation instead — .lt-chat never became a
   scroll box (scrollTop had nothing to move) and each new answer pushed the
   options further below the fold. dvh so a phone's address bar can't hide the
   input; vh first for browsers without dvh. */
.lt-wrap{flex-direction:column;height:100vh;height:100dvh;overflow:hidden;padding:20px 26px;gap:15px;align-items:center}
.lt-topic{flex:1;text-align:center;font-family:'Fredoka',sans-serif;font-weight:600;font-size:16.5px;color:var(--ink-soft)}
.lt-topic b{color:var(--orange-deep)}
.lt-chat{width:min(880px,100%);flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px;padding:6px 2px}
.lt-msg{display:flex;gap:11px;align-items:flex-end}
.lt-msg.me{justify-content:flex-end}
.lt-av{width:44px;height:44px;flex:none;border-radius:50%;background:linear-gradient(160deg,#fff,var(--tint-2));box-shadow:inset 0 0 0 2px var(--tint);display:grid;place-items:center}
.lt-av img{width:70%}
.lt-bub{max-width:52ch;background:#fff;border-radius:20px 20px 20px 6px;padding:14px 18px;font-weight:600;font-size:17.5px;line-height:1.45;box-shadow:0 4px 0 var(--tint)}
.lt-msg.me .lt-bub{background:var(--orange);color:#fff;border-radius:18px 18px 6px 18px;box-shadow:0 4px 0 var(--orange-dark)}
/* ---- motion: transform + opacity only (school Chromebooks), and every one of
   these degrades to nothing under prefers-reduced-motion, at the end of this
   file. A child who just missed a question is the audience: encouraging and
   calm, never a carnival. ---- */

/* a message ARRIVES: Curio's leans in from its avatar, the student's own
   settles back from the right, so the thread reads as two people */
.lt-arrive{animation:lt-in .34s cubic-bezier(.22,1,.36,1) both}
.lt-arrive.me{animation-name:lt-in-me}
@keyframes lt-in{from{opacity:0;transform:translate3d(-10px,8px,0) scale(.985)}}
@keyframes lt-in-me{from{opacity:0;transform:translate3d(10px,8px,0) scale(.985)}}

/* waiting has a face: the mascot drifts, the dots rise rather than blink */
.lt-bob{animation:lt-bob 2.8s ease-in-out infinite}
@keyframes lt-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.lt-think{display:flex;align-items:center;gap:8px;background:var(--tint-2);color:var(--ink-soft);box-shadow:0 4px 0 var(--tint)}
.lt-think em{font-style:normal;font-weight:600;font-size:12.5px;color:var(--ink-faint)}
.lt-dots{display:inline-flex;gap:4px}
.lt-dots i{width:6px;height:6px;border-radius:50%;background:var(--orange);animation:lt-rise 1.2s infinite}
.lt-dots i:nth-child(2){animation-delay:.16s}.lt-dots i:nth-child(3){animation-delay:.32s}
@keyframes lt-rise{0%,100%{opacity:.28;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* the question arrives with the same beat as a message */
.lt-cardin{animation:lt-in .34s cubic-bezier(.22,1,.36,1) both}

/* answering reads instantly: your pick lifts, the rest step back, then the
   verdict lands on the buttons themselves */
.lt-opt{transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease,background-color .2s ease}
.lt-opt.dim{opacity:.4}
.lt-opt.pick{background:var(--orange);color:#fff;box-shadow:0 5px 0 var(--orange-dark),inset 0 0 0 2px var(--orange-deep)}
.lt-opt.right{background:#E7F8EE;color:#136B41;box-shadow:0 5px 0 #1A9D5E,inset 0 0 0 2px #1A9D5E;opacity:1;
  animation:lt-yes .42s cubic-bezier(.22,1,.36,1) both}
.lt-opt.nudge{background:#FFF3D6;color:#7A4B00;box-shadow:0 5px 0 #EBCB8B,inset 0 0 0 2px #EBCB8B;
  animation:lt-nudge .5s ease both}
@keyframes lt-yes{0%{transform:scale(1)}45%{transform:scale(1.04)}100%{transform:scale(1)}}
/* a lean, not a shake — being wrong here is fine */
@keyframes lt-nudge{0%,100%{transform:translateX(0)}30%{transform:translateX(-3px)}65%{transform:translateX(2px)}}

/* phase changes stop being hard cuts */
.lt-enter{animation:lt-fade .28s ease both}
@keyframes lt-fade{from{opacity:0;transform:translateY(6px)}}

/* the last thing they see: the seal stamps, the words follow */
.lt-finish>*{animation:lt-in .4s cubic-bezier(.22,1,.36,1) both}
.lt-finish>*:nth-child(2){animation:lt-stamp .5s cubic-bezier(.22,1,.36,1) both .1s}
.lt-finish>*:nth-child(3){animation-delay:.26s}
.lt-finish>*:nth-child(4){animation-delay:.36s}
.lt-finish>*:nth-child(5){animation-delay:.46s}
@keyframes lt-stamp{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.08)}100%{transform:scale(1)}}
.lt-varwrap{width:min(880px,100%);flex:none;display:flex;flex-direction:column;gap:11px}
.lt-varq{font-family:'Fredoka',sans-serif;font-weight:600;font-size:21.5px;text-align:center}
.lt-hint{align-self:center;background:#FFF3D6;color:#7A4B00;border-radius:999px;padding:9px 20px;font-weight:700;font-size:14.5px;box-shadow:inset 0 0 0 2px #FFE08A}
.lt-opts{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.lt-opt{min-height:68px;border:none;border-radius:18px;background:#fff;font-family:'Fredoka',sans-serif;font-weight:600;font-size:18.5px;color:var(--ink);box-shadow:0 5px 0 var(--tint),inset 0 0 0 2px var(--tint-2);cursor:pointer;padding:12px 16px}
.lt-opt:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--tint),inset 0 0 0 2px var(--tint-2)}
.lt-inrow{width:min(880px,100%);display:flex;gap:11px}
.lt-inrow input{flex:1;min-height:58px;border:none;border-radius:999px;padding:0 24px;font-family:'Nunito',sans-serif;font-weight:600;font-size:17.5px;background:#fff;box-shadow:inset 0 0 0 2px var(--tint);color:var(--ink)}
.lt-inrow input:focus{outline:none;box-shadow:inset 0 0 0 2.5px var(--orange)}
.lt-seal{width:110px;height:110px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#FFE9A8,var(--yellow) 60%,#D99B00);box-shadow:0 6px 0 #B87E00,0 14px 24px -10px rgba(122,75,0,.5)}
.lt-seal svg{width:56px;height:56px;fill:none;stroke:#7A4B00;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* short join link on the projector + the teacher's roster/door controls (Phase 1 lobby model) */
.ss-url{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.ss-joinurl{letter-spacing:.02em;font-size:34px}
.ss-urlalt{width:100%;font-size:15px;font-weight:600;color:rgba(255,255,255,.7)}
.tbtn.sm{min-height:30px;padding:0 12px;font-size:12.5px}
.ss-roster{display:flex;flex-wrap:wrap;gap:8px}
.ss-rost{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 4px;border-radius:999px;background:var(--tint,#FFF1E6);font-weight:700;font-size:13px}
.ss-rost img{width:22px;height:22px;border-radius:50%}
.ss-rost em{font-style:normal;font-weight:600;font-size:11px;color:#9C8576}
.ss-kick{border:none;background:transparent;color:#C0392B;font-size:16px;line-height:1;cursor:pointer;padding:0 4px}
/* safety card (Layer-3 detector): calm by default, warm when something's off */
.ss-abuse .tcard-h h2{display:flex;align-items:center;gap:8px}
.ab-ok{background:#E7F8EE;color:#1A9D5E}.ab-mid{background:#FFF1D6;color:#B9741A}.ab-high{background:#FDE3E3;color:#C0392B}
.ab-msg{margin:0 0 8px;font-weight:700;color:#715845;font-size:14px}
.ab-list{margin:0 0 8px;padding-left:20px;color:#715845;font-size:14px;line-height:1.5}
.ss-abrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
/* class label (teacher console): input on the library, banner on the projector, reason under flagged questions */
.ss-label{display:flex;align-items:center;gap:10px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:14px;color:var(--ink-faint)}
.ss-label input{flex:1;min-width:0;font:inherit;font-family:'Nunito',sans-serif;font-weight:700;font-size:14.5px;padding:10px 14px;border:2px solid var(--tint-2);border-radius:14px;background:#fff;color:var(--ink)}
.ss-label input:focus{outline:none;border-color:var(--orange)}
.ss-classlbl{font-family:'Fredoka',sans-serif;font-weight:600;font-size:22px;color:#fff;opacity:.9;letter-spacing:.02em}
.ss-why{display:block;font-style:normal;font-weight:700;font-size:12px;color:var(--orange-deep);margin-top:2px}

/* teacher brief: decision first, evidence second */
.ss-linkbtn{appearance:none;border:0;background:transparent;font:inherit;cursor:pointer;padding:3px}
.ss-pastrow .in small{display:block;margin-top:3px;font-weight:700;font-size:12px;color:var(--orange-deep)}
.ss-pastrow .ss-acc{display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.ss-pastrow .ss-acc b{font-size:19px}.ss-pastrow .ss-acc em{font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin-top:4px}
.ss-active{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:#E7F8EE;box-shadow:inset 0 0 0 2px #C8EDD8;overflow-x:auto}
.ss-active>div{display:flex;flex-direction:column;gap:5px;min-width:130px}.ss-active>div>b{font-family:'Fredoka',sans-serif;color:#176B43}
.ss-activebtn{min-width:250px;display:flex;align-items:center;justify-content:space-between;gap:14px;border:2px solid #C8EDD8;background:#fff;border-radius:14px;padding:10px 12px;color:var(--ink);cursor:pointer;text-align:left}
.ss-activebtn span{min-width:0}.ss-activebtn b,.ss-activebtn em{display:block}.ss-activebtn b{font-family:'Fredoka',sans-serif}.ss-activebtn em{font-style:normal;font-size:12px;color:var(--ink-faint)}
.ss-activebtn strong{font-family:'Fredoka',sans-serif;color:#176B43;letter-spacing:.08em}
.ss-outcome{gap:12px;background:linear-gradient(135deg,#fff 55%,#FFF8F1);box-shadow:0 5px 0 #F4DCC9,0 18px 30px -24px rgba(122,40,12,.35)}
.ss-mastery{box-shadow:inset 0 0 0 2px currentColor}.ss-mastery.low{background:var(--tint-2);color:var(--orange-700)}.ss-mastery.mid{background:#FFF0B8;color:#765000}.ss-mastery.high{background:var(--teal);color:var(--ink);box-shadow:inset 0 0 0 2px #0B8075}
.ss-flow{display:flex;align-items:stretch;gap:8px}.ss-flow>span{flex:1;border-radius:14px;padding:12px 9px;text-align:center;box-shadow:inset 0 0 0 2px transparent}
.ss-flow>span.joined{background:var(--cream);box-shadow:inset 0 0 0 2px var(--line)}.ss-flow>span.joined b{color:var(--ink-soft)}
.ss-flow>span.played{background:var(--tint-2);box-shadow:inset 0 0 0 2px var(--tint)}.ss-flow>span.played b{color:var(--orange-700)}
.ss-flow>span.checked{background:var(--tint);box-shadow:inset 0 0 0 2px #F7C9A6}.ss-flow>span.checked b{color:var(--orange-dark)}
.ss-flow>span.independent{background:var(--teal);box-shadow:inset 0 0 0 2px #0B8075}.ss-flow>span.independent b,.ss-flow>span.independent em{color:var(--ink)}
.ss-flow>span.supported{background:var(--yellow);box-shadow:inset 0 0 0 2px var(--yellow-dk)}.ss-flow>span.supported b,.ss-flow>span.supported em{color:var(--ink)}
.ss-flow b,.ss-flow em{display:block}.ss-flow b{font-family:'Fredoka',sans-serif;font-size:24px}.ss-flow em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--ink-soft);line-height:1.2;margin-top:3px}.ss-flow>i{align-self:center;font-style:normal;color:var(--ink-faint);font-weight:900}
.ss-report-card{position:relative;overflow:hidden}.ss-report-card::before{content:"";position:absolute;inset:0 auto 0 0;width:5px}.ss-learning-card::before{background:var(--orange)}.ss-game-card::before{background:var(--yellow)}.ss-quality-card::before{background:var(--teal)}
.ss-questiongroups{display:flex;flex-direction:column;gap:13px}.ss-topicgroup{border-radius:15px;overflow:hidden;box-shadow:inset 0 0 0 2px var(--tint-2)}
.ss-topicgroup h3{margin:0;padding:8px 13px;font-family:'Fredoka',sans-serif;font-size:13px;font-weight:700;letter-spacing:.015em}.ss-topicgroup>div{padding:2px 13px 5px;background:#fff}
.ss-topicgroup.tone-0 h3{background:var(--tint-2);color:var(--orange-700)}.ss-topicgroup.tone-1 h3{background:var(--tint);color:var(--orange-dark)}.ss-topicgroup.tone-2 h3{background:#FFF0B8;color:#765000}.ss-topicgroup.tone-3 h3{background:var(--orange-dark);color:#fff}
.ss-topicgroup .ss-qrow+.ss-qrow{border-top:1px solid var(--tint-2)}.ss-topicgroup .ss-qrow .qn{width:30px}.ss-topicgroup .ss-qrow .qt{flex:1;width:auto;min-width:180px}
.ss-stdrow.low .ss-topicpc{color:var(--orange-dark)}.ss-stdrow.low .ss-qbar i{background:linear-gradient(90deg,var(--orange-bright),var(--orange-dark))}
.ss-stdrow.mid .ss-topicpc{color:#8A5B00}.ss-stdrow.mid .ss-qbar i{background:linear-gradient(90deg,var(--yellow),var(--yellow-dk))}
.ss-stdrow.high .ss-topicpc{color:#0B8075}.ss-stdrow.high .ss-qbar i{background:linear-gradient(90deg,#58D2C6,var(--teal))}
.ss-stdrow.muted{opacity:.68}
.ss-sum.low{background:var(--tint-2)}.ss-sum.low b{color:var(--orange-dark)}.ss-sum.mid{background:#FFF0B8}.ss-sum.mid b{color:#765000}.ss-sum.high{background:rgba(25,182,166,.13)}.ss-sum.high b{color:#0B8075}.ss-sum.responses{background:var(--tint)}.ss-sum.responses b{color:var(--orange-deep)}
.ss-topicpc{font-family:'Fredoka',sans-serif;font-weight:700;color:var(--orange-deep);min-width:42px;text-align:right}
.ss-qrow .qt{width:min(330px,42%);white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
.ss-linkbtn:focus-visible,.ss-activebtn:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
@media (max-width:1000px){.ss-dashgrid,.ss-repgrid{grid-template-columns:1fr}.ss-gamerow{grid-template-columns:1fr 1fr}.ss-flow{flex-wrap:wrap}.ss-flow>span{min-width:120px}.ss-flow>i{display:none}}
@media (max-width:680px){.ss-feat{align-items:flex-start}.ss-feat .fmasc{display:none}.ss-gamerow{grid-template-columns:1fr}.ss-qrow{align-items:flex-start;flex-wrap:wrap}.ss-qrow .qt{width:calc(100% - 48px)}.ss-topicgroup .ss-qrow .qt{flex:1 1 calc(100% - 44px);width:calc(100% - 44px);min-width:0}.ss-qrow .ss-qbar{margin-left:46px}.ss-flow>span{min-width:calc(50% - 8px)}}

/* live session strip: the code and the door, where the teacher looks first */
.ss-joinstrip{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:space-between}
.ss-joinleft{display:flex;flex-direction:column;gap:6px;min-width:210px}
.ss-joinright{display:flex;flex-direction:column;gap:6px;align-items:flex-end;min-width:150px}
.ss-bigcode.sm{font-size:34px;gap:8px;margin:0}
.ss-bigcode.sm .ss-cbx{padding:6px 12px;min-width:38px}
/* presence: a quiet screen is a kid who needs a nudge */
.ss-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-left:6px;flex:none}
.ss-dot.active{background:#3ddc84}
.ss-dot.done{background:#7d9bff}
.ss-dot.idle{background:#ffb454}
.ss-dot.dropped{background:#b9b1a8}
.ss-dropnote{display:block;margin-top:10px;font-weight:700;font-size:13px;color:#C64A1F}


/* ---- the game stage: clock, no way out, offline pause ---- */
.lt-clock{font-family:'Fredoka',sans-serif;font-weight:700;font-size:16px;color:var(--ink);background:#fff;border-radius:999px;padding:9px 16px;box-shadow:inset 0 0 0 2px var(--tint);white-space:nowrap;font-variant-numeric:tabular-nums}
.lt-clock.warn{color:#fff;background:var(--orange);box-shadow:0 3px 0 var(--orange-dark);animation:lt-pulse 1s ease-in-out infinite}
@keyframes lt-pulse{50%{transform:scale(1.06)}}
.lt-stay{font-weight:700;font-size:13.5px;color:var(--ink-faint);white-space:nowrap}
.lt-game{position:relative}
/* out of the viewport, not just invisible: that is what stops an embedded page's
   animation loop (measured in Chromium: visibility:hidden alone keeps 60 fps,
   this drops it to 0, and the same document picks up again on return) */
.lt-gframe.lt-frozen{visibility:hidden;transform:translateX(-300vw)}
.lt-offline{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:rgba(46,27,16,.86);padding:20px}
.lt-offcard{width:min(440px,92vw);background:#fff;border-radius:var(--r-lg);padding:30px 28px;text-align:center;display:grid;justify-items:center;gap:10px;box-shadow:var(--shadow-card)}
.lt-offcard img{height:96px;width:auto}
.lt-offcard h2{font-family:'Fredoka',sans-serif;font-weight:700;font-size:28px;margin:4px 0 0;color:var(--orange-deep)}
.lt-offcard p{margin:0;font-weight:700;font-size:16px;color:var(--ink-soft);line-height:1.45}
.lt-net{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:60;background:var(--ink);color:#fff;font-family:'Fredoka',sans-serif;font-weight:600;font-size:14px;border-radius:999px;padding:9px 18px;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}

/* ---- "You finished the game!" — docked under the game, never over its end screen ---- */
.lt-fin{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:15;display:flex;align-items:center;gap:14px;max-width:min(760px,94vw);background:#fff;border-radius:24px;padding:12px 16px 12px 12px;box-shadow:0 6px 0 var(--tint),0 24px 50px -18px rgba(46,27,16,.55)}
.lt-fin img{height:64px;width:auto;clip-path:inset(2%)}
.lt-fintxt{display:grid;gap:1px;min-width:0}
.lt-fintxt b{font-family:'Fredoka',sans-serif;font-weight:700;font-size:19px;color:var(--orange-deep)}
.lt-fintxt span{font-weight:700;font-size:14.5px;color:var(--ink-soft)}
.lt-fin .pbtn{min-height:46px;font-size:16px;padding:0 20px}
.lt-fin .pbtn:disabled{opacity:.6;cursor:default}
.lt-fin.min{left:auto;right:18px;transform:none;padding:8px}
.lt-fin.min img,.lt-fin.min .lt-fintxt,.lt-fin.min #lt-fin-stay{display:none}
@media (max-width:640px){.lt-fin{flex-wrap:wrap;justify-content:center;text-align:center}.lt-fin img{display:none}}

/* ---- one-tap rating between the game and the quiz ---- */
.lt-rate{gap:18px}
.lt-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}
.lt-thumb{display:grid;justify-items:center;gap:10px;min-height:150px;padding:18px 8px 14px;border:none;border-radius:24px;background:#fff;cursor:pointer;font-family:'Fredoka',sans-serif;font-weight:600;font-size:17px;color:var(--ink);box-shadow:0 6px 0 var(--tint),inset 0 0 0 2px var(--tint);transition:transform .12s ease,box-shadow .12s ease}
.lt-thumb:hover{transform:translateY(2px);box-shadow:0 4px 0 var(--tint),inset 0 0 0 2px var(--tint)}
.lt-thumbic{display:flex;align-items:center;justify-content:center;height:74px;color:var(--orange)}
.lt-thumbsvg{width:64px;height:64px;fill:currentColor}
.lt-thumb.down .lt-thumbic{color:var(--ink-faint)}
.lt-thumb.down .lt-thumbsvg{transform:scaleY(-1)}
.lt-thumb.love .lt-thumbic{color:var(--teal)}
.lt-thumbic.two .lt-thumbsvg{width:54px;height:54px}
.lt-thumbic.two .lt-thumbsvg+.lt-thumbsvg{margin-left:-14px;transform:translateY(-8px) rotate(8deg)}
.lt-thumb.pick{box-shadow:0 6px 0 var(--orange-dark),inset 0 0 0 3px var(--orange);animation:lt-yes .4s ease}
.lt-thumb.dim{opacity:.4}
.lt-thumb:disabled{cursor:default}

/* ---- the complete screen: the Curio alien throws its arms up ---- */
.lt-done{position:relative;overflow:hidden}
.lt-complete{position:relative;gap:14px}
.lt-complete>*{animation:lt-in .45s cubic-bezier(.22,1,.36,1) both}
.lt-complete>*:nth-child(3){animation-delay:.5s}
.lt-complete>*:nth-child(4){animation-delay:.62s}
.lt-complete>*:nth-child(5){animation-delay:.74s}
.lt-complete>*:nth-child(6){animation-delay:.86s}
.lt-hero{position:relative;width:230px;height:230px;display:grid;place-items:center;animation:none !important}
.lt-burst{position:absolute;inset:-6px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#FFE9A8 0 12deg,#FFF6DC 12deg 24deg);-webkit-mask:radial-gradient(circle,#000 38%,transparent 71%);mask:radial-gradient(circle,#000 38%,transparent 71%);animation:lt-spin 16s linear infinite,lt-burstin .7s cubic-bezier(.22,1,.36,1) both}
/* the pose art has a faint semi-transparent rim left by its background removal;
   trim it rather than ship a square ghost around the alien */
.lt-cele{position:relative;height:210px;width:auto;clip-path:inset(2%);transform-origin:50% 100%;animation:lt-landing .85s cubic-bezier(.34,1.56,.64,1) both,lt-jump 1.5s ease-in-out .9s infinite}
@keyframes lt-spin{to{transform:rotate(360deg)}}
@keyframes lt-burstin{from{opacity:0;transform:scale(.3)}}
@keyframes lt-landing{0%{opacity:0;transform:translateY(60px) scale(.35)}55%{opacity:1;transform:translateY(-22px) scale(1.08,.96)}78%{transform:translateY(0) scale(.96,1.05)}100%{transform:translateY(0) scale(1)}}
@keyframes lt-jump{0%,100%{transform:translateY(0) scale(1.03,.97)}12%{transform:translateY(0) scale(1.06,.93)}45%{transform:translateY(-26px) scale(.97,1.04) rotate(-2deg)}60%{transform:translateY(-26px) scale(.97,1.04) rotate(2deg)}88%{transform:translateY(0) scale(1.05,.95)}}
.lt-score{font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;color:#1A9D5E;background:#E7F8EE;border-radius:999px;padding:8px 18px}
.lt-score b{font-size:18px}
.lt-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lt-confetti i{position:absolute;top:-24px;border-radius:2px;opacity:0;animation-name:lt-fall;animation-timing-function:cubic-bezier(.3,.1,.6,1);animation-iteration-count:2;animation-fill-mode:both}
@keyframes lt-fall{0%{opacity:0;transform:translate3d(0,-10vh,0) rotate(0)}8%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate3d(var(--drift,0),108vh,0) rotate(var(--spin,540deg))}}
@media (max-width:520px){.lt-thumb{min-height:128px;font-size:15px}.lt-thumbsvg{width:50px;height:50px}.lt-stay{display:none}.lt-hero{width:190px;height:190px}.lt-cele{height:172px}}


/* Motion is decoration here — the thread, the verdict and the way out all read
   identically without it. */
@media (prefers-reduced-motion: reduce){
  .lt-arrive,.lt-cardin,.lt-enter,.lt-bob,.lt-dots i,
  .lt-opt.right,.lt-opt.nudge,.lt-finish>*,.lt-complete>*,.lt-cele,.lt-burst,
  .lt-clock.warn,.lt-thumb.pick,.lt-confetti i{animation:none !important}
  .lt-confetti{display:none}
  .lt-opt,.lt-thumb{transition:none}
  .lt-dots i{opacity:.6}
}
.no-motion .lt-arrive,.no-motion .lt-cardin,.no-motion .lt-enter,.no-motion .lt-bob,
.no-motion .lt-dots i,.no-motion .lt-finish>*,.no-motion .lt-complete>*,.no-motion .lt-cele,
.no-motion .lt-burst,.no-motion .lt-clock.warn,.no-motion .lt-confetti i{animation:none !important}
.no-motion .lt-confetti{display:none}