@font-face{font-family:"KidsPretendard";src:url("/assets/PR.ttf");font-weight:400;font-display:swap}
@font-face{font-family:"KidsPretendard";src:url("/assets/PB.ttf");font-weight:700 900;font-display:swap}
:root{--canvas:#FFF8ED;--ink:#23314F;--teal:#10B8C5;--lav:#7561D8;--yel:#FFD74B;--coral:#EF6558;--ink2:#5b6785;--card:#fff;--line:#e9dfcd;--good:#2fa36b;--radius:28px;
  --font:"KidsPretendard",ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,"Noto Sans CJK KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--canvas);color:var(--ink);font-family:var(--font);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:4px solid var(--lav);outline-offset:3px}
.sr{position:absolute;left:-9999px}
/* ---------- stage ---------- */
.stage-root{position:relative;overflow:hidden;background:#fcecd4;width:100%;height:100%}
.stage-scale{position:absolute;left:0;top:0;transform-origin:0 0}
.stage{position:relative;overflow:hidden;user-select:none}
.stage .bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stage .actor,.stage .item,.stage .pt{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}
.stage .actor .rig,.stage .actor .pose{pointer-events:none}
.stage .pt{transform-origin:center}
.stage .fx,.stage .fx-back,.stage .items,.stage .actors{position:absolute;inset:0;pointer-events:none}
.stage .fx svg{position:absolute}
.stage .item img{filter:drop-shadow(0 14px 10px rgba(80,50,20,.22))}
.caption{position:absolute;left:50%;top:44px;transform:translate(-50%,-20px);opacity:0;transition:.25s;background:#fff;border:5px solid var(--ink);border-radius:60px;padding:14px 40px;font-size:50px;font-weight:800;box-shadow:0 8px 0 rgba(35,49,79,.18);white-space:nowrap}
.caption.on{opacity:1;transform:translate(-50%,0)}
/* ---------- child play screen ---------- */
.play{position:fixed;inset:0;display:flex;flex-direction:column;background:#fcecd4}
.play .stagebox{position:relative;flex:1;min-height:0}
.hud{position:absolute;left:12px;right:12px;top:10px;display:flex;justify-content:space-between;align-items:flex-start;z-index:5;pointer-events:none}
.chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:6px 14px;font-weight:800;font-size:15px;box-shadow:0 4px 0 rgba(35,49,79,.15)}
.chip .led{width:11px;height:11px;border-radius:50%;background:#aaa}
.chip.live .led{background:var(--good)} .chip.reconnecting .led,.chip.polling .led{background:var(--yel);animation:blink 1s infinite} .chip.offline .led{background:var(--coral)}
@keyframes blink{50%{opacity:.3}}
.overlay{position:absolute;inset:0;z-index:4;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.prompt{margin-top:clamp(50px,9vh,90px);display:flex;align-items:center;gap:14px;background:#fff;border:4px solid var(--ink);border-radius:60px;padding:8px 26px 8px 12px;box-shadow:0 7px 0 rgba(35,49,79,.16);animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
.prompt .picon{width:clamp(38px,7vh,62px);height:clamp(38px,7vh,62px);display:block}.prompt .picon svg{width:100%;height:100%}
.prompt b{display:block;font-size:clamp(20px,4vh,34px);line-height:1.1}.prompt small{display:block;font-size:clamp(12px,2.2vh,17px);color:var(--ink2);font-weight:700}
/* Keep the short instruction above the larger opt-in 3D characters. */
.has-3d-scene>.overlay>.prompt{margin-top:12px}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.wordcard{margin-top:clamp(46px,8vh,84px);display:flex;align-items:center;gap:clamp(14px,3vw,40px);background:#fff;border:5px solid var(--ink);border-radius:36px;padding:clamp(12px,2vh,26px) clamp(18px,3vw,44px);box-shadow:0 10px 0 rgba(35,49,79,.16);animation:pop .4s cubic-bezier(.3,1.6,.5,1);max-width:92%}
.wordcard img{height:clamp(110px,26vh,260px);max-width:34vw;object-fit:contain}
.wc-side .spell{font-size:clamp(46px,12vh,120px);font-weight:900;line-height:1;letter-spacing:.02em}
.wc-side .ko{font-size:clamp(16px,3vh,28px);font-weight:800;color:var(--ink2);margin-top:4px}
.wc-side .bigsay{font-size:clamp(34px,8vh,80px);font-weight:900;color:var(--lav);line-height:1}
.wc-side .mouth{display:flex;gap:10px;align-items:center;margin-top:10px;font-size:clamp(13px,2.2vh,19px);font-weight:700;color:var(--ink2);max-width:22em}.wc-side .mouth svg{width:44px;flex:none}
.spellflag{margin-top:clamp(50px,9vh,90px);background:var(--yel);border:5px solid var(--ink);border-radius:26px;padding:4px 30px;font-size:clamp(40px,9vh,90px);font-weight:900;box-shadow:0 8px 0 rgba(35,49,79,.16)}
.progress{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.dot{display:inline-flex;align-items:center;gap:8px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:5px 16px 5px 6px;font-weight:800;font-size:clamp(14px,2.6vh,22px)}
.dot i{width:1.6em;height:1.6em;border-radius:50%;background:#e7e2d6;display:grid;place-items:center;color:#fff}.dot.done i{background:var(--good)}.dot i svg{width:70%}.dot.off{opacity:.45}
.tray{position:relative;flex:none;display:flex;justify-content:center;align-items:center;gap:clamp(10px,2.4vw,30px);padding:10px 12px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(#f3d9ad,#efc78a);border-top:5px solid #d59c56;min-height:clamp(120px,26vh,260px)}
.tray.hidden{display:none}
.tile{position:relative;flex:1 1 0;max-width:clamp(120px,24vw,300px);height:clamp(104px,22vh,230px);border:5px solid var(--ink);border-radius:var(--radius);background:#fff;box-shadow:0 8px 0 rgba(35,49,79,.2);display:grid;place-items:center;padding:10px;transition:transform .12s,box-shadow .12s,opacity .2s,border-color .2s;min-width:96px}
.tile img{position:absolute;left:10px;top:10px;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:contain;pointer-events:none}
.tile:active:not(:disabled){transform:translateY(5px);box-shadow:0 3px 0 rgba(35,49,79,.2)}
.tile:disabled{cursor:default}
.tile.dim{opacity:.55;filter:saturate(.6)}
.tile.chosen{border-color:var(--teal);box-shadow:0 0 0 6px rgba(16,184,197,.35),0 8px 0 rgba(35,49,79,.2);transform:translateY(-8px) scale(1.04);opacity:1;filter:none}
.tile .badge{position:absolute;right:-10px;top:-14px;width:46px;height:46px;border-radius:50%;background:var(--teal);border:4px solid #fff;color:#fff;display:none;place-items:center;box-shadow:0 3px 0 rgba(35,49,79,.25)}
.tile.chosen .badge{display:grid;animation:pop .3s cubic-bezier(.3,1.8,.5,1)}.tile .badge svg{width:22px}
.tile.cue{animation:cue 1s ease-in-out infinite}
@keyframes cue{50%{transform:translateY(-10px) scale(1.06);box-shadow:0 0 0 8px rgba(117,97,216,.35),0 8px 0 rgba(35,49,79,.2)}}
.tile.listening::after{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(135deg,rgba(255,255,255,.0) 0 12px,rgba(255,255,255,.35) 12px 24px);pointer-events:none}
.trayhint{position:absolute;left:0;right:0;bottom:calc(100% + 2px);text-align:center;font-weight:800;font-size:15px}
.join{position:fixed;inset:0;display:grid;place-items:center;background:var(--canvas);padding:20px}
.joincard{width:min(460px,100%);background:#fff;border:5px solid var(--ink);border-radius:34px;padding:30px;box-shadow:0 10px 0 rgba(35,49,79,.16);text-align:center}
.joincard h1{margin:0 0 4px;font-size:34px}.joincard p{margin:0 0 18px;color:var(--ink2);font-weight:700}
.joincard input{width:100%;font:inherit;font-size:24px;font-weight:800;padding:14px 18px;border:4px solid var(--ink);border-radius:20px;margin-bottom:14px;text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:4px solid var(--ink);background:var(--yel);border-radius:22px;padding:12px 22px;min-height:52px;font-weight:900;font-size:19px;box-shadow:0 6px 0 rgba(35,49,79,.2);transition:transform .1s,box-shadow .1s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(35,49,79,.2)}
.btn.teal{background:var(--teal);color:#fff}.btn.lav{background:var(--lav);color:#fff}.btn.coral{background:var(--coral);color:#fff}.btn.ghost{background:#fff}.btn:disabled{opacity:.45;cursor:default}
.btn.big{width:100%;font-size:24px;min-height:64px}
.err{color:var(--coral);font-weight:800;min-height:1.4em}
.toast{position:fixed;left:50%;bottom:calc(30vh + 10px);transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:999px;padding:10px 22px;font-weight:800;z-index:20;animation:pop .25s}
.finale{position:absolute;inset:0;z-index:3;background:radial-gradient(ellipse at center,rgba(58,58,102,.72),rgba(28,28,60,.88));display:grid;place-items:center;animation:fadein 1s}
.finale .fin-art{width:min(72%,calc(78vh * 1.28));max-height:78%;object-fit:contain;animation:breathe 4s ease-in-out infinite;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35))}
.finale .zz{position:absolute;width:clamp(28px,6vw,70px);opacity:0;animation:zz 3.6s ease-out infinite}
.finale .z1{left:60%;top:26%;animation-delay:0s}.finale .z2{left:66%;top:20%;animation-delay:1.1s}.finale .z3{left:72%;top:14%;animation-delay:2.2s}
@keyframes zz{0%{opacity:0;transform:translateY(24px) scale(.5)}30%{opacity:1}100%{opacity:0;transform:translateY(-70px) scale(1.2)}}
@keyframes breathe{50%{transform:scale(1.018)}}
.prompt{position:relative;z-index:6}
.kid .spoke{font-size:16px}
.panel.now{border-color:var(--teal);box-shadow:0 5px 0 rgba(16,184,197,.3)}
details.panel summary{list-style:none}
@keyframes fadein{from{opacity:0}}
@media (prefers-reduced-motion:reduce){html:not(.kids-full-motion) *{animation-duration:.001ms!important;transition-duration:.001ms!important}}
/* ---------- teacher room ---------- */
.room{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,.9fr);grid-template-rows:auto 1fr;height:100vh;gap:14px;padding:12px 16px;background:var(--canvas)}
.room header{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.room h1{margin:0;font-size:24px}.roomcode{font-size:30px;font-weight:900;letter-spacing:.12em;background:var(--ink);color:#fff;border-radius:16px;padding:2px 16px}
.left{display:flex;flex-direction:column;gap:12px;min-height:0}
.stagewrap{flex:0 1 auto;width:min(100%,calc((100vh - 190px) * 1.768));aspect-ratio:1920/1086;min-height:200px;border:5px solid var(--ink);border-radius:24px;overflow:hidden;box-shadow:0 8px 0 rgba(35,49,79,.16);position:relative;background:#fcecd4}
.stagewrap .overlay{z-index:4}
.right{display:flex;flex-direction:column;gap:12px;overflow:auto;padding:2px 6px 30px 2px;min-height:0}
.panel{background:#fff;border:4px solid var(--ink);border-radius:22px;padding:12px 14px;box-shadow:0 5px 0 rgba(35,49,79,.12)}
.panel h2{margin:0 0 8px;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);display:flex;justify-content:space-between;align-items:center}
.row{display:flex;flex-wrap:wrap;gap:8px}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.flow .btn{font-size:16px;padding:10px 6px;min-height:50px}
.btn.next{background:var(--teal);color:#fff;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{box-shadow:0 6px 0 rgba(35,49,79,.2),0 0 0 6px rgba(16,184,197,.3)}}
.kid{display:flex;align-items:center;gap:10px;border:3px solid var(--line);border-radius:16px;padding:6px 10px;background:#fff;text-align:left;width:100%}
.kid.sel{border-color:var(--lav);background:#f0ecff}.kid .led{width:12px;height:12px;border-radius:50%;background:#bbb;flex:none}.kid.on .led{background:var(--good)}
.kid .nm{font-weight:900;flex:1}.kid .st{font-size:13px;color:var(--ink2);font-weight:700}
.kid img{height:32px;width:44px;object-fit:contain}
.tag{display:inline-block;font-size:11px;font-weight:900;border-radius:999px;padding:2px 9px;background:#ffe9a8;border:2px solid #d9a800;color:#7a5a00}
.tag.prop{background:#efe9ff;border-color:var(--lav);color:#4a3aa8}
.help{font-size:13px;color:var(--ink2);font-weight:600;margin:6px 0 0}
.seg{display:flex;gap:6px;flex-wrap:wrap}.seg .btn{font-size:15px;padding:8px 14px;min-height:44px}.seg .btn.on{background:var(--lav);color:#fff}
.gal{display:grid;grid-template-columns:1fr;gap:6px}.gal button{display:flex;justify-content:space-between;gap:8px;text-align:left;border:3px solid var(--line);border-radius:14px;background:#fff;padding:8px 12px;font-weight:700;font-size:14px}
.gal button:hover{border-color:var(--teal)}
kbd{background:#eee;border:2px solid #ccc;border-radius:6px;padding:0 6px;font-size:12px}
.warnbar{background:#fff2c9;border:3px solid #e7b400;border-radius:14px;padding:8px 12px;font-weight:700;font-size:14px}
.classview{position:fixed;inset:0}
@media (max-width:980px){.room{grid-template-columns:1fr;height:auto}.stagewrap{min-height:300px}}

.btn.next kbd{background:rgba(255,255,255,.28);color:#fff;border-color:rgba(255,255,255,.55)}
/* ---------- guardian pages ---------- */
.hub{max-width:640px;margin:0 auto;padding:16px 16px 40px}
.hubhead{display:flex;justify-content:space-between;align-items:center;gap:10px}.hubhead h1{margin:0;font-size:28px}
.hubsub{font-size:20px;font-weight:800;margin:14px 2px}
.kidlist{display:flex;flex-direction:column;gap:14px}
.kidcard{background:#fff;border:4px solid var(--line);border-radius:26px;padding:10px;box-shadow:0 5px 0 rgba(35,49,79,.10)}
.kidcard.sel{border-color:var(--teal);box-shadow:0 5px 0 rgba(16,184,197,.3)}
.kidpick{display:grid;grid-template-columns:84px 1fr auto;grid-template-areas:"img n c" "img s s";align-items:center;column-gap:14px;width:100%;background:none;border:0;text-align:left;padding:4px;min-height:84px}
.kidpick img{grid-area:img;width:84px;height:84px;object-fit:contain}.kidpick .kn{grid-area:n;font-size:26px;font-weight:900}.kidpick .kc{grid-area:c;font-weight:900;font-size:20px}.kidpick .ks{grid-area:s;display:flex;gap:2px}
.acts{display:flex;flex-direction:column;gap:10px;margin-top:10px}.acts .btn{text-decoration:none;text-align:center}
/* Parent home: one clear next action, quieter saved work. Existing play palette. */
.parent-hub{max-width:640px;padding:28px 24px 44px}.parent-hub .hubhead{margin-bottom:26px}.parent-hub .hubhead h1{font-size:24px;letter-spacing:-.6px}.parent-hub .hubhead h1 span{color:var(--lav);font-size:21px}
.parent-signed{font-size:13px;font-weight:700;color:var(--ink2);display:flex;gap:6px;align-items:center}.parent-signed .led{height:7px;width:7px;border-radius:50%;background:var(--good)}
.parent-picker{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}.parent-profile{display:flex;align-items:center;gap:7px;background:#fff;border:2px solid var(--line);border-radius:999px;padding:6px 14px 6px 7px;min-height:52px;font-weight:800;font-size:16px}.parent-profile img{width:36px;height:36px;object-fit:contain}.parent-profile.selected{border-color:var(--lav);background:#f1edff;color:var(--ink)}
.parent-today{display:grid;grid-template-columns:minmax(0,1fr) 38%;align-items:center;background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:28px 24px 24px;box-shadow:0 8px 0 rgba(35,49,79,.05);overflow:hidden}.parent-eyebrow{display:inline-flex;background:var(--yel);color:var(--ink);font-size:12px;font-weight:800;padding:5px 11px;border-radius:999px}.parent-copy h2{font-size:clamp(25px,5vw,34px);line-height:1.3;letter-spacing:-1px;margin:14px 0 10px;overflow-wrap:anywhere}.parent-copy p{font-size:15px;line-height:1.55;color:var(--ink2);margin:0}.parent-buddy{width:100%;height:200px;object-fit:contain;filter:drop-shadow(0 6px 0 rgba(117,97,216,.1))}
.parent-main{grid-column:1/-1;margin-top:24px;text-decoration:none;justify-content:space-between;padding:16px 24px;font-size:21px!important;min-height:64px;border-width:3px;box-shadow:0 5px 0 rgba(35,49,79,.16);color:var(--ink)!important}.parent-main span{font-size:26px}.parent-wait{grid-column:1/-1;margin:22px 0 0;padding:14px 16px;background:var(--canvas);color:var(--ink2);border-radius:16px;font-size:15px;line-height:1.5}
.parent-menu{margin-top:26px}.parent-menu a{color:var(--ink);text-decoration:none}.parent-practice{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}.parent-practice>span:last-child{margin-left:auto}.parent-menu b{display:block;font-size:17px}.parent-menu small{display:block;font-size:13px;color:var(--ink2);line-height:1.5;margin-top:4px}.menu-icon{height:44px;width:44px;flex:none;display:grid;place-items:center;border-radius:15px;background:#e4f6f8;color:var(--ink);font-size:19px}.sticker-icon{background:#fff0be;color:var(--ink);font-size:26px}.report-icon{background:#eeebfb;color:var(--lav);font-size:25px}.parent-saved{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:20px}.parent-saved a{display:flex;gap:10px;align-items:center;min-height:64px}.parent-select-note{padding:24px 0}.parent-select-note h2{font-size:25px}.parent-select-note p{color:var(--ink2)}
.parent-help{margin-top:32px;border-top:1px solid var(--line);padding-top:20px;font-size:14px;color:var(--ink2);line-height:1.6}.parent-help summary{cursor:pointer;font-weight:700;padding:8px 0;min-height:44px}.parent-help .btn{font-size:15px;border-width:2px;box-shadow:none;min-height:48px}.entry-brand{font-size:15px!important;color:var(--lav)!important}
.learning-report{padding-top:26px}.learning-report .card{border-width:2px;padding:22px;margin:18px 0;box-shadow:none}.report-brand{color:var(--lav);font-size:15px;font-weight:800}.report-heading{padding:18px 0 12px}.report-heading h1{font-size:clamp(30px,7vw,42px);line-height:1.22;letter-spacing:-1.2px;margin:18px 0 12px;overflow-wrap:anywhere}.report-heading p{color:var(--ink2);font-size:16px;line-height:1.5}.report-metrics{display:grid;grid-template-columns:repeat(3,1fr);background:var(--ink);color:#fff;border-radius:24px;gap:14px;padding:22px 18px}.report-metrics strong{font-size:35px;color:var(--yel);display:block}.report-metrics strong small{font-size:17px;color:#ddd}.report-metrics span{font-size:12px;line-height:1.5;display:block}.report-explain{line-height:1.7;margin:12px 4px 22px}.learning-report .nextbox{border-width:2px;padding:22px;margin:22px 0}.learning-report .nextbox h2{font-size:22px;line-height:1.5;margin:16px 0 8px}.learning-report .nextbox .btn{font-size:17px;min-height:52px;text-decoration:none;border-width:3px;margin-top:14px;color:var(--ink)}.report-words>h2{font-size:22px;margin:30px 0 16px}.report-word-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.report-word-head img{width:60px;height:60px;object-fit:contain}.report-word-head h3{font-size:25px;margin:0;flex:1}.report-word-head h3 small{font-size:14px;color:var(--ink2);display:block;margin-top:3px}.report-word-head .pill{font-size:11px}.report-fact{font-size:17px;font-weight:700;line-height:1.7;margin:16px 0}.report-next{font-size:14px;line-height:1.7;color:var(--ink2);margin:10px 0 16px}.report-next b{color:var(--lav);display:block;margin-bottom:4px}.report-word details{border-top:1px solid var(--line);padding-top:10px}.report-word summary,.report-details summary{font-weight:700;font-size:15px;min-height:44px;padding:12px 0;cursor:pointer}.decision-row,.speech-row{padding:12px 0;border-bottom:1px solid var(--line)}.decision-row>small,.speech-row>small{color:var(--ink2);font-size:12px}.speech-row p{line-height:1.7;font-size:15px}.choice-sequence{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}.choice-result{border-radius:12px;padding:8px 12px;background:#f8eee3;font-size:14px}.choice-result.right{background:#e4f5ee}.choice-result b{font-size:11px;border-radius:50%;background:#fff;padding:3px 6px;margin-right:4px}.choice-result small{display:block;font-size:11px;color:var(--ink2);margin-top:4px}.choice-arrow{color:var(--ink2)}.report-comparison{padding:12px 0;border-bottom:1px solid var(--line)}.report-comparison p{font-size:13px;color:var(--ink2);line-height:1.9}.report-comparison span{color:var(--ink);font-weight:700;margin-left:6px}.teacher-feedback{border-color:var(--lav)!important}.teacher-feedback p{font-size:17px;line-height:1.8;white-space:pre-wrap}.teacher-feedback small{color:var(--ink2)}#teacher-note label{font-size:14px;color:var(--ink2);line-height:1.5}#teacher-note textarea{width:100%;display:block;margin:12px 0;font:inherit;line-height:1.6;padding:12px;border:2px solid var(--line);border-radius:12px;resize:vertical}.upload-consent{border-width:2px;font-size:14px;line-height:1.5;text-align:left;box-shadow:none;border-radius:14px;cursor:pointer}.learning-report .empty{font-size:14px;line-height:1.7}
@media(max-width:420px){.parent-hub{padding:20px 18px 36px}.parent-today{padding:24px 18px 20px;grid-template-columns:minmax(0,1fr) 34%}.parent-copy h2{font-size:27px}.parent-copy p{font-size:14px}.parent-buddy{height:160px}.parent-saved{gap:8px}.parent-menu b{font-size:16px}.parent-menu small{font-size:11px}.menu-icon{height:36px;width:36px;border-radius:12px}.parent-signed{font-size:11px}}
.pg{max-width:720px;margin:0 auto;padding:14px 16px 60px}
.pgtop{display:flex;align-items:center;gap:12px;margin-bottom:10px}.pgtop a{color:var(--ink);font-weight:900;text-decoration:none;border:3px solid var(--ink);border-radius:999px;padding:6px 14px;background:#fff}
.card{background:#fff;border:4px solid var(--line);border-radius:22px;padding:14px 16px;margin:12px 0;box-shadow:0 4px 0 rgba(35,49,79,.08)}
.card h2{margin:0 0 6px;font-size:18px}.card .sub{color:var(--ink2);font-size:14px;font-weight:700;margin:0 0 8px}
.tbl{width:100%;border-collapse:collapse;font-size:15px}.tbl td,.tbl th{padding:6px 4px;border-bottom:2px solid var(--line);text-align:left;vertical-align:top}
.pill{display:inline-block;border-radius:999px;padding:2px 10px;font-weight:800;font-size:13px;background:#eef;border:2px solid var(--lav);color:#3f318f}.pill.ok{background:#e6f7ee;border-color:var(--good);color:#1b6b45}.pill.no{background:#fff2c9;border-color:#e7b400;color:#7a5a00}
.empty{color:var(--ink2);font-weight:700;padding:6px 0}
.nextbox{background:#eaf9fb;border:4px solid var(--teal);border-radius:22px;padding:14px 16px;margin:12px 0}.nextbox b{font-size:18px}
.hwbar{flex:none;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;background:#fffaf0;border-bottom:3px solid var(--line)}.hwbar .chip{text-decoration:none;color:var(--ink);font-size:14px;padding:5px 12px;cursor:pointer;min-height:40px}.hwdots{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}.hd{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--line);font-weight:900;font-size:13px}.hd.cur{border-color:var(--teal)}.hd.done{background:var(--good);border-color:var(--good);color:#fff}
.mnote{position:absolute;left:12px;right:12px;bottom:10px;z-index:6;background:#fff2c9;border:3px solid #e7b400;border-radius:14px;padding:6px 10px;font-weight:700;font-size:14px;text-align:center}
.hwcardtray{align-items:stretch}
.hwcard{display:flex;gap:clamp(12px,3vw,32px);align-items:center;background:#fff;border:5px solid var(--ink);border-radius:30px;padding:12px clamp(14px,3vw,30px);box-shadow:0 8px 0 rgba(35,49,79,.16);max-width:min(900px,100%)}
.hwcard .bigpic{height:clamp(90px,22vh,200px);max-width:36vw;object-fit:contain}.hwtxt .bigsay{font-size:clamp(26px,5vh,48px);font-weight:900;color:var(--lav);line-height:1.1}.hwtxt .ko{font-size:clamp(14px,2.4vh,20px);font-weight:800;color:var(--ink2)}.hwtxt .gu{font-size:15px;color:var(--ink2);font-weight:700;margin:6px 0}
.gupanel{position:fixed;left:12px;right:12px;top:60px;z-index:30;background:#fff;border:4px solid var(--lav);border-radius:22px;padding:12px 16px;box-shadow:0 8px 0 rgba(35,49,79,.2);max-width:520px;margin:0 auto}.gupanel p{margin:6px 0}.gupanel .warn{background:#fff2c9;border:3px solid #e7b400;border-radius:12px;padding:8px 10px;font-weight:700}
@media (max-width:640px){.hwcard{flex-direction:column;text-align:center}.hwcard .bigpic{max-width:60vw}}
.lnk{background:none;border:0;color:var(--lav);font-weight:800;text-decoration:underline;cursor:pointer;padding:0}
.corner{position:relative;border:5px solid var(--ink);border-radius:26px;overflow:hidden;aspect-ratio:1920/1086;background:#fcecd4;box-shadow:0 8px 0 rgba(35,49,79,.16)}.corner .croom{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.corner .cbuddy{position:absolute;left:38%;bottom:6%;height:52%}
.citems img{position:absolute;bottom:8%;height:22%;filter:drop-shadow(0 8px 6px rgba(80,50,20,.25))}
.shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.shopitem{display:flex;flex-direction:column;align-items:center;gap:4px;border:3px solid var(--line);border-radius:18px;padding:10px}.shopitem img{height:70px;object-fit:contain}
.tlobby{max-width:1100px;margin:0 auto;padding:16px}.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.tgrid .wide{grid-column:1/-1}@media(max-width:820px){.tgrid{grid-template-columns:1fr}}
.invf{display:grid;grid-template-columns:1.1fr 1.4fr auto auto;gap:8px;margin:8px 0}.invf input,.invf select{font:inherit;padding:10px 12px;border:3px solid var(--line);border-radius:14px}@media(max-width:820px){.invf{grid-template-columns:1fr}}
.fam{border:3px solid var(--line);border-radius:16px;padding:8px 12px;margin:8px 0}.famh{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.famk{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-top:2px dashed var(--line);margin-top:4px;font-weight:700}.famk a{color:var(--lav);font-weight:900}
.linkrow{display:flex;gap:8px;align-items:center;margin:6px 0}.linkrow code,#lk{background:#f4efe3;border-radius:8px;padding:2px 8px;word-break:break-all;font-size:13px}
.tbl tr.now td{background:#eaf9fb;font-weight:900}
/* phone safety: prompt never wider than the screen; Korean wraps at word breaks */
.prompt{max-width:calc(100% - 16px)}.prompt .ptxt{min-width:0}.btn,.chip,.prompt,.hwtxt,.gupanel{word-break:keep-all;overflow-wrap:anywhere}
@media (max-width:520px){.prompt b{font-size:clamp(18px,5.4vw,26px)}}

/* Entry links stay visible and selectable on local HTTP and in-app browsers. */
.student-entry{display:inline-flex;margin-top:18px;text-decoration:none}
.copylink{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:12px 0;padding:12px;background:#f5f8fa;border-radius:14px}
.copylink label{min-width:0;font-size:14px;font-weight:800}
.linkvalue{display:block;width:100%;min-width:0;margin-top:6px;padding:12px;border:2px solid var(--line);border-radius:10px;font:inherit;font-size:16px;background:#fff;color:var(--ink);user-select:text}
.copylink .btn{font-size:15px;align-self:end;min-height:46px;padding:8px 14px}
.copy-status{grid-column:1/-1;margin:0;min-height:20px}
.invite-dialog{width:min(760px,calc(100% - 24px));max-height:90dvh;padding:20px;border:4px solid var(--ink);border-radius:24px;color:var(--ink);background:var(--canvas)}
.invite-dialog::backdrop{background:rgba(35,49,79,.55)}
.invite-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.invite-head h2{margin:0;font-size:24px}
.invite-head .btn{font-size:16px;min-height:44px;padding:6px 16px}
.already-signed{margin-top:24px}.already-signed summary{cursor:pointer;font-weight:800}
.teacher-mouth{padding:8px;background:#f5f8fa;border-radius:8px}
.class-stage{position:absolute;inset:0}
.class-mobile-entry{display:none}
.join{overflow:auto}.joincard{margin:auto 0}
@media (max-width:600px){
  .copylink{grid-template-columns:minmax(0,1fr)}.copylink .btn{justify-self:start}.copy-status{grid-column:1}
  .invite-dialog{padding:14px}.invite-dialog .famk{flex-wrap:wrap}
  .join{padding:16px}.joincard{padding:24px 18px}.joincard h1{font-size:28px}.joincard input{font-size:20px}
  .room{padding:10px;gap:12px}.room header{gap:8px}.room h1{font-size:20px}.roomcode{font-size:24px}
  .room .stagewrap{min-height:0;width:100%}.room .right{overflow:visible;padding:0 0 24px}
  .room .flow{grid-template-columns:repeat(2,minmax(0,1fr))}.room .panel{padding:12px}
  .room .stagewrap .wordcard{margin-top:12px;padding:10px 16px;gap:14px;border-width:3px;border-radius:20px}
  .room .stagewrap .wordcard img{height:70px;max-width:90px}.room .stagewrap .spell{font-size:42px}.room .stagewrap .ko{font-size:14px}
  .room .stagewrap .prompt{margin-top:12px;padding:6px 12px;border-width:3px}.room .stagewrap .picon{width:28px;height:28px}
  .room .stagewrap .prompt b{font-size:18px}.room .stagewrap .prompt small{font-size:12px}
  .class-mobile-entry{position:relative;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;background:#fff;font-size:13px;font-weight:800;border-bottom:2px solid var(--line);min-height:44px}
  .class-mobile-entry a{color:var(--ink);text-decoration:underline}.class-stage{top:46px}
  .play{height:100dvh}.play .hud{left:8px;right:8px;top:8px;gap:6px}
  .play .chip{font-size:13px;padding:6px 10px;border-width:2px}
  .play .wordcard,.class-stage .wordcard{margin-top:64px;padding:14px 18px;gap:18px;border-width:3px;border-radius:24px;max-width:calc(100% - 32px)}
  .play .wordcard img,.class-stage .wordcard img{height:clamp(72px,22vw,125px);max-width:30vw}
  .play .wc-side .spell,.class-stage .wc-side .spell{font-size:clamp(40px,12vw,68px)}
  .play .wc-side .ko,.class-stage .wc-side .ko{font-size:18px}.play .wc-side .bigsay{font-size:30px}
  .play .tray{gap:8px;padding:12px 10px calc(16px + env(safe-area-inset-bottom));min-height:140px}
  .play .tile{min-width:0;height:clamp(105px,29vw,160px);max-width:32%;border-width:3px;border-radius:20px;padding:8px}
  .play .tile.chosen{transform:translateY(-4px);box-shadow:0 0 0 3px rgba(16,184,197,.35),0 5px 0 rgba(35,49,79,.2)}
  .play .tile .badge{width:30px;height:30px;right:-3px;top:-8px;border-width:2px}.play .tile .badge svg{width:17px}
  .play .prompt,.class-stage .prompt{margin-top:60px;padding:8px 14px;gap:8px;border-width:3px}
  .play .prompt .picon,.class-stage .prompt .picon{width:36px;height:36px}
  .play .spellflag{font-size:52px;margin-top:60px;border-width:3px}
}
@media (max-height:500px) and (orientation:landscape){
  .play .tray{min-height:100px;padding:6px 12px}.play .tile{height:90px;max-width:160px}
  .play .wordcard{margin-top:48px;padding:8px 16px}.play .wordcard img{height:70px}.play .wc-side .spell{font-size:48px}
  .play .prompt{margin-top:44px;padding:6px 16px}.play .prompt b{font-size:20px}.play .prompt .picon{width:30px;height:30px}
}

/* Visual candidate: original playroom artwork, independent animated dogs and props. */
.stage-root{background:#29cbe2}
.stage-root.portrait{background:#29cbe2 url('/kids/assets/room/room_bright_candidate_20261001.png') center center/cover no-repeat}
.stage-root.portrait .bg{opacity:0}
.stage-root.gpt-stage{background:#4dcedd}
.stage-root.gpt-stage.portrait{background:#4dcedd url('/kids/assets/gpt-image/2026-10-02/classroom-3d-style-CANDIDATE.png') center center/cover no-repeat}
.gpt-body{will-change:transform;pointer-events:none}.gpt-pose{position:absolute;inset:0;transform-origin:50% 96.5%;will-change:transform}
.gpt-art-image{display:block;width:100%;height:100%;object-fit:contain;clip-path:inset(1.3% 0 2.3% 0);filter:drop-shadow(0 9px 5px #44335e25)}
.gpt-art-views{position:absolute;top:0;bottom:-5%;left:4.7%;width:90.6%;background-size:400% 100%;background-repeat:no-repeat;transform-origin:50% 95%;filter:drop-shadow(0 9px 5px #44335e25)}
.gpt-ground-shadow{position:absolute;left:0;top:0;border-radius:50%;pointer-events:none;will-change:transform,opacity;background:radial-gradient(ellipse,#33294665 0,#33294635 38%,#33294600 74%);z-index:0}
.gpt-actor{z-index:1}.gpt-actor.blanca{z-index:2}
.play{background:#ffdc48}
.play .tray{background:#ffdc48;border-top:0;border-radius:28px 28px 0 0;box-shadow:0 -8px 0 rgba(255,255,255,.25)}
.play .tile{border-color:#8a65d9;background:#fffefa;box-shadow:0 8px 0 #b39ce7}
.play .tile:nth-child(3n+1){border-color:#25afca;box-shadow:0 8px 0 #98dce9}
.play .tile:nth-child(3n){border-color:#e567a1;box-shadow:0 8px 0 #f4afd0}
.play .tile.chosen{border-color:var(--ink);box-shadow:0 0 0 5px #fff,0 9px 0 rgba(35,49,79,.25)}
.play .tile:active:not(:disabled){box-shadow:0 3px 0 rgba(35,49,79,.2)}
.play .prompt,.class-stage .prompt{border-color:#7953c5;box-shadow:0 6px 0 rgba(95,57,175,.2)}
.play .wordcard,.class-stage .wordcard{border-color:#7953c5;box-shadow:0 8px 0 rgba(95,57,175,.2)}
.lobby-primary{display:flex;justify-content:center;align-items:center;text-decoration:none;text-align:center}
.teacher-tools,.family-tools{margin-top:18px;border-top:2px solid var(--line);padding-top:12px}
.teacher-tools summary,.family-tools summary{cursor:pointer;font-weight:800;color:var(--ink2)}
.teacher-tools .btn{display:block;width:100%;margin-top:10px;text-align:center;text-decoration:none;font-size:16px;min-height:44px;padding:8px 12px}
.family-tools .btn{margin-top:10px;font-size:15px;min-height:44px;padding:8px 14px}
.tlobby .fam .copylink{margin:14px 0 8px}
.tlobby .fam .famk{margin-top:14px}
/* A single current task, with breathing room for the teacher and the stage. */
#hwhelp{line-height:1.6;margin-bottom:18px}#hwrow{padding-bottom:8px}
.lesson-flow{display:flex;gap:8px;margin-bottom:20px;font-size:13px;font-weight:800}
.lesson-flow span{padding:8px 9px;border-radius:12px;background:#f2f1f8;color:var(--ink2)}
.lesson-flow .current{background:#d3f2f3;color:#196476}
.panel h2.phase-title{font-size:23px;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 10px}
.phase-help{font-size:15px;line-height:1.6;margin:0 0 12px;color:var(--ink2)}
.lesson-utilities{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.lesson-utilities .btn{font-size:14px;border-width:2px;padding:8px 12px;min-height:42px;box-shadow:0 3px 0 #e0dbe9}
.heard-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.heard-actions .btn{font-size:16px}
.student-turns{display:grid;gap:12px}.student-turn .kid{min-height:56px;padding:12px}.student-turn .kid b{flex:1}
.student-turn .kid:disabled{opacity:.5;cursor:default}
.answer-replay{border:0;background:#f3f0ff;color:#614bb4;padding:10px 14px;border-radius:12px;margin-top:8px;font-size:13px;font-weight:800}
.word-nav .btn{min-height:44px;font-size:17px;padding:8px 16px;border-width:2px;box-shadow:0 3px 0 #e6dff3}
.mouth-hint{position:absolute;top:25%;left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;background:#fff5bd;border:3px solid #7953c5;border-radius:18px;padding:10px 18px;z-index:8;font-size:16px}
.mouth-hint svg{width:40px;flex:none}
.mouth-hint{top:14%;padding:16px 24px;width:min(340px,70%);background:#fff7ce;box-shadow:0 10px 0 #23314f1f;justify-content:center}
.mouth-demo{display:flex;flex-direction:column;align-items:center;width:100%;gap:4px;text-align:center}
.mouth-demo b{font-size:clamp(18px,2.6vw,25px);color:var(--ink)}
.mouth-hint svg.pronunciation-mouth{width:100%;max-width:290px;height:auto}
.mouth-demo span{font-size:14px;color:var(--ink2)}
.mouth-opening{transform-origin:160px 102px;animation:pronounce-e 2.7s ease-in-out infinite}
.mouth-closed{transform-origin:160px 102px;transform:scaleX(.56);animation:closed-e 2.7s ease-in-out infinite}
@keyframes pronounce-e{0%,15%,100%{transform:scale(.56,.06)}35%,74%{transform:scale(1,.55)}}
@keyframes closed-e{0%,15%,100%{opacity:1}35%,74%{opacity:0}}
.sound-start{position:absolute;z-index:30;bottom:16px;left:50%;transform:translateX(-50%);background:var(--yellow,#ffd74b);font-size:19px;min-height:54px;padding:10px 22px;white-space:nowrap}
.sound-start.sound-ready{left:auto;right:12px;bottom:12px;transform:none;font-size:13px;min-height:36px;padding:6px 12px;background:#fff8df;border-width:2px;box-shadow:0 3px 0 #23314f20}
.motion-preference{cursor:pointer;pointer-events:auto;white-space:nowrap}
.motion-preference input{accent-color:#7953c5;width:18px;height:18px;vertical-align:middle}
.motion-toggle{position:absolute;z-index:30;left:12px;bottom:12px;min-height:42px;padding:7px 12px;font-size:13px;border-width:2px;background:#fff8df;box-shadow:0 3px 0 #23314f20}
.motion-toggle[aria-pressed="false"]{background:#ebf7ee}
.voice-menu,.character-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.voice-menu .btn,.character-menu .btn{font-size:15px;min-height:48px;padding:9px 12px;border-width:2px;white-space:normal}
.praise-voice{background:#fff4ba}.retry-voice{background:#f0eaff}.retry-menu{padding-top:16px;border-top:1px solid #e5dced}
.voice-menu .praise-voice{background:#d9f5e7;border-color:#25845e}.voice-menu .retry-voice{background:#ffe6d9;border-color:#bc6240}
.overlay.outcome-playing>.prompt,.overlay.character-playing>.prompt,.overlay.feedback-playing>.prompt{visibility:hidden}
/* The scaled caption sits below the transparent UI overlay. Dock the word card
   away from it during reactions so both remain visible without covering faces. */
:is(.stagewrap,.stagebox,.class-stage):has(>.overlay:is(.outcome-playing,.character-playing,.feedback-playing)) .caption{top:225px;max-width:1320px;white-space:normal;text-align:center;text-wrap:balance;line-height:1.12;overflow-wrap:anywhere}
:is(.stagewrap,.stagebox,.class-stage):has(>.stage-root:not(.portrait)):has(>.overlay:is(.outcome-playing,.character-playing,.feedback-playing))>.overlay>.wordcard{position:absolute;left:12px;top:8px;margin:0;max-width:none;transform:scale(.58);transform-origin:top left;animation:none}
.play .stagebox:has(>.stage-root:not(.portrait)):has(>.overlay:is(.outcome-playing,.character-playing,.feedback-playing))>.overlay>.wordcard,
.class-stage:has(>.stage-root:not(.portrait)):has(>.overlay:is(.outcome-playing,.character-playing,.feedback-playing))>.overlay>.wordcard{top:56px}
:is(.stagewrap,.stagebox,.class-stage):has(>.stage-root.portrait):has(>.overlay:is(.outcome-playing,.character-playing,.feedback-playing)) .caption{top:138px;max-width:790px}
/* Teacher-triggered encouragement gets a stage-sized title while the current
   word remains docked in its own corner. Long phrases may wrap cleanly. */
:is(.stagewrap,.stagebox,.class-stage):has(>.overlay.feedback-playing) .caption{font-size:72px;font-weight:900;max-width:1440px;padding:20px 52px;border-width:8px;background:linear-gradient(135deg,#fffef7,#fff1bc);box-shadow:0 13px 0 rgba(35,49,79,.2),0 28px 56px rgba(35,49,79,.2)}
:is(.stagewrap,.stagebox,.class-stage):has(>.overlay.feedback-playing) .caption.on{animation:feedback-title .55s cubic-bezier(.2,1.5,.4,1) both}
@keyframes feedback-title{0%{opacity:0;transform:translate(-50%,22px) scale(.75)}65%{opacity:1;transform:translate(-50%,-8px) scale(1.07)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
:is(.stagewrap,.stagebox,.class-stage):has(>.stage-root.portrait):has(>.overlay.feedback-playing) .caption{top:138px;max-width:760px;font-size:58px;padding:16px 28px}
.right details.panel{border-width:2px;padding:16px 18px}.right details.panel>summary{font-weight:800;min-height:44px;display:list-item;cursor:pointer;line-height:1.6}
.voice-menu,.character-menu{gap:10px;margin-top:14px}.voice-menu .btn,.character-menu .btn{min-height:50px;border-width:2px;box-shadow:0 3px 0 #d6dbe5;padding:10px 12px}
.teacher-choice{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:5px 0 10px;border-radius:14px;background:#e9f9f4;font-size:14px}.teacher-choice.retry{background:#fff0e7}.teacher-choice img{width:42px;height:42px;object-fit:contain}.teacher-choice b{margin-left:auto}
.peer-choices{gap:8px;flex-wrap:wrap}.peer-choices .dot{height:auto;min-height:60px;display:flex;gap:6px;border-width:2px;align-items:center;padding:8px 12px}.peer-choices img{width:48px;height:44px;object-fit:contain}.peer-choices small{font-size:15px}
.homework-settings{display:grid;gap:20px;margin:22px 0}.homework-settings label{display:flex;gap:12px;align-items:center}.homework-word{padding:24px 0;border-bottom:1px solid #e8e2d6}.homework-word-title{font-size:24px;display:flex;gap:12px;align-items:center}.homework-word textarea,[data-tool=support] textarea{display:block;width:100%;box-sizing:border-box;min-height:82px;padding:12px;border:1px solid #d9dce5;border-radius:12px;font:inherit;margin:10px 0}.homework-preview{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:16px 0}.preview-options{display:flex;gap:10px;background:#f4f9fb;border-radius:16px;padding:10px}.preview-options figure{flex:1;margin:0;text-align:center}.preview-options img{width:100%;height:90px;object-fit:contain}.preview-options figcaption{font-size:12px}.editor-save{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:20px 0}.support-detail{font-size:13px;color:#52637b;background:#f4f7fa;padding:10px;border-radius:10px}
@media(max-width:600px){.homework-preview{grid-template-columns:1fr}.peer-choices .dot{min-height:40px;padding:4px 8px}.peer-choices img{width:30px;height:30px}.peer-choices b,.peer-choices small{font-size:12px}.teacher-choice{flex-wrap:wrap}.preview-options img{height:70px}}
#reset-scene{min-height:42px;font-size:15px;padding:6px 14px;border-width:2px}
.room header{flex-wrap:wrap;gap:10px}
@media(max-height:500px) and (orientation:landscape){.mouth-hint{top:16%;padding:7px 14px;width:220px}.mouth-hint svg.pronunciation-mouth{max-width:165px}.mouth-demo b{font-size:18px}.mouth-demo span{font-size:11px}}
/* The lip movement teaches the sound. Reduced motion shows it once, then
   holds the open shape; decorative movement remains disabled. */
@keyframes pronounce-e-once{from{transform:scale(.56,.06)}to{transform:scale(1,.55)}}
@keyframes closed-e-once{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){
 html:not(.kids-full-motion) .mouth-opening{animation:pronounce-e-once .9s ease-out 1 both;animation-duration:.9s!important}
 html:not(.kids-full-motion) .mouth-closed{animation:closed-e-once .9s ease-out 1 both;animation-duration:.9s!important}
}
.play .wordcard,.class-stage .wordcard{margin-top:64px;padding:10px 20px;gap:20px;max-width:calc(100% - 32px);border-width:3px;border-radius:24px}
.play .wordcard img,.class-stage .wordcard img{height:clamp(65px,14vh,135px);max-width:120px}
.play .wc-side .spell,.class-stage .wc-side .spell{font-size:clamp(40px,8vh,76px)}
.play .wc-side .ko,.class-stage .wc-side .ko{font-size:18px}.play .wc-side .bigsay,.class-stage .wc-side .bigsay{font-size:32px}
.stickerbook h1{font-size:32px}.sticker-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px;margin:28px 0}
.attendance-sticker{display:flex;flex-direction:column;align-items:center;background:#fff1a4;border:4px solid #fff;border-radius:48% 48% 34% 34%;padding:18px;filter:drop-shadow(0 6px 0 #e5bf5d);transform:rotate(-4deg)}
.attendance-sticker img{height:155px;max-width:100%;object-fit:contain}.attendance-sticker b{margin:6px 0;color:#63411b}.attendance-sticker small{font-weight:800}
.sticker-empty{border:3px dashed #dbcfae;border-radius:30px;min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#928568}.sticker-empty span{font-size:70px}
@media(max-height:500px) and (orientation:landscape){
 .play .wordcard,.class-stage .wordcard{margin-top:45px;padding:6px 16px;gap:12px}
 .play .wordcard img,.class-stage .wordcard img{height:54px;max-width:70px}
 .play .wc-side .spell,.class-stage .wc-side .spell{font-size:40px}
 .play .wc-side .ko,.class-stage .wc-side .ko{font-size:13px}
 .play .prompt,.class-stage .prompt{margin-top:42px;padding:4px 12px}.play .prompt b,.class-stage .prompt b{font-size:18px}
 .play .prompt .picon,.class-stage .prompt .picon{width:26px;height:26px}
}
@media (max-width:600px){
  .play .tray{padding-top:16px}
  .play .tile{border-width:4px;background:#fffefa}
}

/* Keep the teacher preview useful, and give browser help one quiet place. */
.room .stagewrap .wordcard{margin-top:24px;padding:12px 18px;border-width:3px;border-radius:24px;gap:18px}
.room .stagewrap .wordcard img{height:95px;max-width:130px}.room .stagewrap .spell{font-size:56px}.room .stagewrap .ko{font-size:17px}
.browser-help{margin:28px auto 0;max-width:580px;font-size:14px;line-height:1.6}.browser-help summary{cursor:pointer;font-weight:800}
.room .btn.teal{color:var(--ink)}
.audio-status{font-size:12px;color:var(--ink2);padding:8px 12px;min-height:30px;line-height:1.4}
.play .mnote{position:absolute;left:12px;bottom:10px;font-size:11px;background:#ffffffe6;padding:6px 10px;border-radius:10px;pointer-events:none;z-index:8}
@media(max-width:600px){
 .hwcard{width:100%;gap:8px;padding:12px 16px;border-width:3px;border-radius:24px}
 .hwcard .bigpic{height:100px;max-width:130px}.hwcard .bigsay{display:none}
 .hwcard .ko{font-size:15px}.hwcard .gu{font-size:13px;margin:6px 0}
 .hwcard .row{justify-content:center;gap:8px}.hwcard .btn{min-height:44px;padding:8px 12px;font-size:15px;border-width:2px}
}
@media(max-width:600px){.room .stagewrap .wordcard{margin-top:12px}.room .stagewrap .wordcard img{height:65px;max-width:85px}.room .stagewrap .spell{font-size:40px}}

/* Keep sound beside the connection status, outside instructions and friends. */
.play .sound-start.sound-ready{top:8px;right:100px;bottom:auto}
.play .motion-toggle{top:62px;left:12px;bottom:auto}
.play .stagebox:has(>.overlay>.wordcard)>.motion-toggle{top:auto;bottom:12px}
.play .hud #who{max-width:calc(100% - 208px);overflow:hidden}
.play #whotxt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.support-context{background:#f0ecff;color:#51438b;border-radius:12px;padding:10px 12px;font-size:14px;margin:12px 0}
.support-actions{display:grid;grid-template-columns:1fr;gap:9px}.support-actions .btn{text-align:left;font-size:15px;min-height:46px;border-width:2px;box-shadow:0 3px 0 #d6dbe5}
.support-saved{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}.support-saved li{padding:9px 12px;background:#e9f9f4;border-radius:11px;color:#23634e;font-size:14px}
#support-status{min-height:22px;color:#23634e;font-size:14px}.mirror-label{background:#f0ecff;color:#51438b;padding:10px 12px;border-radius:12px;font-size:14px}
@media(max-width:600px){
 .play .peer-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:calc(100% - 32px);max-width:340px;gap:6px;margin-inline:auto}
 .play .peer-choices .dot{width:auto;min-width:0;justify-content:center;border-radius:18px}
 .play .peer-choices b,.play .peer-choices small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:600px){
 .has-3d-scene>.overlay>.prompt{margin-top:3px;padding:2px 9px 2px 5px;gap:5px;border-width:3px}
 .has-3d-scene>.overlay>.prompt .picon{width:26px;height:26px}
 .has-3d-scene>.overlay>.prompt b{font-size:16px}
 .has-3d-scene>.overlay>.prompt small{font-size:9px}
}

/* Once a word's reaction starts, keep its card in the corner until the
   teacher changes words. The teacher's Delete/Appear control affects only
   this card, and the same room state is shown to student browsers. */
.character-card-toggle{display:block;width:100%;min-height:48px;margin-top:14px;border-width:2px}
:is(.stagewrap,.stagebox,.class-stage)>.overlay.word-docked>.wordcard{position:absolute;left:12px;top:8px;margin:0;max-width:none;transform:scale(.58);transform-origin:top left;animation:none}
.play .stagebox>.overlay.word-docked>.wordcard,
.class-stage>.overlay.word-docked>.wordcard{top:56px}
:is(.stagewrap,.stagebox,.class-stage):has(>.stage-root.portrait)>.overlay.word-docked>.wordcard{top:72px}