@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700;800&display=swap');
:root{font-family:'Nunito',sans-serif;color:#603c26;background:#30291f;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}button:focus-visible,input:focus-visible{outline:3px solid #5591bd;outline-offset:2px}#app{width:min(100%,480px);height:100svh;max-height:1000px;display:flex;flex-direction:column;position:relative;overflow:hidden;background:#f6d59a;box-shadow:0 0 70px #0005}.classroom{position:relative;flex:1;min-height:0;background:#efbe7d url('assets/classroom.jpg') center center/100% 100% no-repeat;isolation:isolate}.class-sign{position:absolute;top:2.1%;left:17%;right:13%;text-align:center;color:#693617}.class-sign h1{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:clamp(18px,5.5vw,28px);line-height:1.15;margin:0;text-shadow:0 1px #fff5d7}.class-sign p{margin:3px 0 0;font-size:clamp(9px,2.5vw,12px);font-weight:800}#mode-label{color:#8e5c39}.blackboard{position:absolute;top:13.7%;left:21%;right:26%;height:24.2%;text-align:center;color:#fff6c7;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 0}.question-meta{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:8px;letter-spacing:.6px}#timer{width:34px;height:34px;flex:none;border:3px solid #a4db8b;border-radius:50%;display:grid;place-items:center;font-size:15px;font-weight:800;background:#174b36;letter-spacing:0}#timer.urgent{border-color:#ffb07d;color:#ffe2a0}#hanzi{font-size:clamp(30px,10vw,52px);line-height:1.1;font-weight:700;letter-spacing:4px;margin-top:1px}#pinyin{font-size:clamp(12px,3.6vw,17px);color:#e8e5b1;margin-top:3px}#question-prompt{font-size:clamp(10px,2.8vw,13px);margin:5px 0 2px;font-weight:700}#question-status{font-size:9px;color:#d5e8bc;min-height:13px;max-width:100%}.leaderboard{position:absolute;z-index:5;top:14%;right:1.3%;width:25%;padding:7px 5px;background:#fff5d9;border:2px solid #b97d3f;border-radius:8px;box-shadow:0 3px 0 #72432244;transform:rotate(1deg)}.leaderboard h2{font-family:'Baloo 2',sans-serif;font-size:clamp(12px,3.4vw,16px);margin:0;text-align:center}.leaderboard>p{font-size:8px;text-align:center;color:#9c7955;margin:0 0 3px}.leaderboard ol{list-style:none;padding:0;margin:0}.leaderboard li{display:grid;grid-template-columns:13px minmax(0,1fr) 21px;align-items:center;gap:1px;min-height:18px;border-bottom:1px solid #ecd8af;font-size:9px}.leaderboard li:last-child{border:0}.leaderboard li span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard li b{text-align:right}.leaderboard li:nth-child(-n+3){font-weight:800;min-height:23px}.leaderboard li:nth-child(-n+3) .rank,.leaderboard li:nth-child(-n+3) b{font-size:14px}.leaderboard li:nth-child(1){color:#a96c08;background:#ffe29a;border-radius:4px}.leaderboard li:nth-child(2){color:#647786;background:#e5e9e8;border-radius:4px}.leaderboard li:nth-child(3){color:#a55c32;background:#f5d4af;border-radius:4px}.leaderboard .empty{display:block;text-align:center;color:#98734f;padding:8px 0}.seats{position:absolute;left:4%;right:3%;top:47%;bottom:5%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));column-gap:3px;row-gap:0}.seat{position:relative;min-width:0;display:flex;align-items:center;flex-direction:column;justify-content:flex-end}.pupil{position:absolute;width:84%;height:94%;bottom:10%;left:8%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;z-index:2}.pupil img{height:calc(100% - 14px);width:100%;object-fit:contain;object-position:bottom;filter:var(--tint,none);user-select:none}.name-tag{position:relative;background:#fff5d7;border:1px solid #d4a86b;color:#6e4528;padding:1px 4px;border-radius:12px;max-width:125%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:8px;font-weight:800;line-height:1.2;flex-shrink:0;z-index:4}.seat.mine .name-tag{background:#e3f0ba;border-color:#6e9a4e}.seat.mine .name-tag:before{content:'★ ';color:#5c832e}.desk{position:absolute;bottom:5%;width:106%;height:22%;background:linear-gradient(#f1c27b 0 24%,#935529 26% 34%,#ba7a3a 36% 70%,#945326 72% 82%,#b97a3d 84%);border:1px solid #77401f;border-radius:2px;box-shadow:0 2px 1px #65391d4d;z-index:3}.desk:after{content:'';position:absolute;left:3px;right:3px;top:100%;height:9px;border-left:3px solid #8f5429;border-right:3px solid #8f5429}.seat.empty .desk{opacity:.72}.correct-mark{position:absolute;right:0;top:25%;border:1px solid #d4edb5;background:#599d5c;color:white;width:14px;height:14px;border-radius:50%;font-size:10px;z-index:5;text-align:center}.reward{position:absolute;top:10%;left:50%;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:27px;color:#fff6a0;text-shadow:2px 2px #ae690b,-1px -1px #ae690b,0 0 10px #ffe65f;z-index:10;white-space:nowrap;animation:float-up 1.9s ease-out forwards;pointer-events:none}.notice{position:absolute;bottom:1%;left:4%;right:3%;text-align:center;background:#fff0d8d9;border-radius:12px;color:#80512f;padding:4px 5px;font-size:10px;font-weight:700;z-index:6}.answer-panel{position:relative;z-index:7;background:#fff4dc;border-top:3px solid #b17b43;padding:9px 12px max(9px,env(safe-area-inset-bottom));box-shadow:0 -4px 15px #75411f26;flex-shrink:0}.my-info{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:12px;margin-bottom:7px}.text-button{background:none;border:0;color:#815c3a;padding:5px;font-size:11px}.my-info .text-button{padding:5px 3px}#my-points{color:#a8751c}#answer-form{display:flex;gap:7px}#answer{min-width:0;flex:1;background:#fffdf5;border:1.5px solid #d7bc8c;border-radius:24px;padding:10px 13px;font-size:16px;color:#6c482c;box-shadow:inset 0 2px 3px #d9c39622}#send-button{border:2px solid #8abd52;background:linear-gradient(#83b94d,#538c35);box-shadow:0 2px 0 #39702a;color:white;border-radius:23px;padding:8px 17px;font-weight:800;font-size:16px}.answer-status{display:flex;justify-content:space-between;font-size:9px;color:#947248;margin-top:6px;gap:8px}dialog{width:min(92vw,390px);border:2px solid #c29257;border-radius:23px;padding:24px;background:#fff6e3;color:#65432d;box-shadow:0 20px 70px #29180d66;max-height:90svh;overflow:auto}dialog::backdrop{background:#37251480;backdrop-filter:blur(4px)}dialog h2{font-family:'Baloo 2',sans-serif;font-size:23px;line-height:1.25;margin:6px 0 10px}dialog p{font-size:13px;line-height:1.55}dialog label{display:block;font-weight:800;font-size:12px;margin-bottom:5px}dialog input{width:100%;padding:11px 13px;background:#fffcf4;border:1px solid #d4bb93;border-radius:11px;color:#65432d;font-size:16px}.eyebrow{font-size:10px;letter-spacing:2px;color:#9c753f;font-weight:800}.avatar-preview{display:flex;gap:15px;align-items:center;justify-content:center;padding:8px 0;color:#a17b50;font-size:12px}.avatar-preview img{height:100px;width:70px;object-fit:contain}.primary,.secondary{width:100%;border-radius:12px;padding:12px;font-weight:800;margin:5px 0}.primary{background:#5e8f42;color:#fffbea;border:1px solid #457131}.secondary{background:#f5e3bc;color:#80582c;border:1px solid #d5b680}.muted{font-size:11px!important;color:#9a7955}.error{color:#a13a29;font-size:12px;min-height:0}.dialog-heading{display:flex;justify-content:space-between;align-items:center}.room-share{padding:10px;background:#f5e7c9;border-radius:12px;font-size:13px}.room-share button{padding:7px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}#arrival{position:absolute;z-index:8;pointer-events:none;width:11%;height:13%;display:none}#arrival img{width:100%;height:100%;object-fit:contain}#arrival.walk{display:block;animation:arrive 1.6s ease-in-out forwards}@keyframes float-up{0%{opacity:0;transform:translate(-50%,0) scale(.7)}20%{opacity:1;transform:translate(-50%,-12px) scale(1.15)}65%{opacity:1}100%{opacity:0;transform:translate(-50%,-65px) scale(1)}}@keyframes arrive{0%{left:0;top:38%;opacity:0}10%{opacity:1}50%{transform:translateY(-3px) rotate(-3deg)}100%{left:var(--target-left);top:var(--target-top);opacity:1;transform:none}}@media(min-width:700px){#app{border-left:5px solid #70482e;border-right:5px solid #70482e}}@media(max-height:650px){.answer-panel{padding-top:5px;padding-bottom:5px}.my-info{margin-bottom:3px}.leaderboard li{min-height:14px}.leaderboard li:nth-child(-n+3){min-height:18px}.leaderboard{padding:3px 4px}#hanzi{font-size:28px}.blackboard{top:13%;height:26%}#timer{height:25px;width:25px;font-size:11px}#question-status{font-size:8px}.name-tag{font-size:7px}.class-sign h1{font-size:20px}}@media(prefers-reduced-motion:reduce){#arrival.walk{animation-duration:.01s}.reward{animation-duration:.01s}}

/* Bàn gỗ minh họa ghép thành từng cặp chỗ ngồi. */
.pupil{height:110%;bottom:20%}
.desk{width:208%;height:85%;bottom:-3%;left:0;background:transparent url('assets/desk.png') center bottom/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none}
.desk:after{display:none}
.seat:nth-child(2n) .desk{display:none}
.seat.empty .desk{opacity:1}
.blackboard{left:33%;right:27%;top:12%;height:23%}
.question-meta{font-size:7px;letter-spacing:0}
#hanzi{font-size:clamp(29px,9vw,44px)}
#question-status{font-size:8px}
#question-prompt{font-size:clamp(10px,2.6vw,12px)}
@media(max-height:650px){.blackboard{top:12%;height:24%}#hanzi{font-size:27px}.pupil{height:104%;bottom:18%}}
/* Tách mặt bàn và lưng ghế để học viên ngồi lọt giữa hai lớp. */
.pupil{z-index:auto}
.pupil img{position:relative;z-index:2}
.name-tag{z-index:5}
.desk{z-index:1}
.desk.desk-front{z-index:3;clip-path:inset(40% 0 0 0)}
.leaderboard{padding:5px 4px}
.leaderboard li{min-height:16px}
.leaderboard li:nth-child(-n+3){min-height:20px}
@media(max-height:680px){.seats{top:52%}.leaderboard li{min-height:13px;font-size:8px}.leaderboard li:nth-child(-n+3){min-height:16px}.leaderboard li:nth-child(-n+3) .rank,.leaderboard li:nth-child(-n+3) b{font-size:12px}.leaderboard>p{font-size:7px}.leaderboard h2{font-size:12px}}
.avatar-picker{border:0;padding:0;margin:15px 0;display:flex;gap:12px}
.avatar-picker legend{font-size:12px;font-weight:800;margin-bottom:8px}
.avatar-picker label{position:relative;flex:1;margin:0;padding:8px;border:2px solid #e4cda6;border-radius:14px;text-align:center;background:#fffaf0;cursor:pointer;display:flex;flex-direction:column;align-items:center}
.avatar-picker label:has(input:checked){border-color:#699549;background:#eef4d6;box-shadow:0 0 0 1px #699549}
.avatar-picker input{width:16px;height:16px;position:absolute;left:8px;top:8px;accent-color:#60883f}
.avatar-picker img{height:100px;width:80px;object-fit:contain;margin-bottom:4px}
.avatar-picker span{font-size:13px}
#arrival .walking-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#arrival.walk .step-0{animation:walk-frame-a .42s steps(1,end) infinite}
#arrival.walk .step-1{animation:walk-frame-b .42s steps(1,end) infinite}
@keyframes walk-frame-a{0%,100%{opacity:1}50%{opacity:0}}
@keyframes walk-frame-b{0%,100%{opacity:0}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){#arrival.walk .step-0{animation:none;opacity:1}#arrival.walk .step-1{animation:none;opacity:0}}
/* Bản 2: cô giáo tách khỏi nền, có tư thế hỏi / giải đáp / tuyên dương. */
.classroom{background-image:url('assets/classroom-v2.jpg')}
.teacher-character{position:absolute;left:10%;top:17.5%;width:33%;height:29%;z-index:5;pointer-events:none;transform-origin:50% 95%}
.teacher-character img{display:block;width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 3px 2px #68401533)}
.teacher-character[data-pose="question"]{animation:teacher-question 2.8s ease-in-out infinite}
.teacher-character[data-pose="answer"]{animation:teacher-explain 1.6s ease-in-out infinite}
.teacher-character[data-pose="celebrate"]{animation:teacher-cheer .5s ease-in-out 6}
.teacher-speech{position:absolute;top:37%;left:31%;right:3%;z-index:6;background:#fff8e9;color:#785033;border:1.5px solid #d4a665;border-radius:12px 12px 12px 2px;padding:7px 9px;font-size:10px;font-weight:800;line-height:1.4;box-shadow:0 2px 5px #75452c22;overflow-wrap:anywhere}
.teacher-speech:before{content:'CÔ TIỂU AN';display:block;font-size:8px;letter-spacing:1px;color:#a26d48;margin-bottom:2px}
@keyframes teacher-question{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-3px) rotate(.5deg)}}
@keyframes teacher-explain{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
@keyframes teacher-cheer{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.035)}}
@media(prefers-reduced-motion:reduce){.teacher-character[data-pose]{animation:none}}
@media(max-height:680px){.teacher-speech{top:38%;font-size:9px;padding:5px 7px}.teacher-speech:before{font-size:7px}}
.seats{top:49%}
@media(max-height:680px){.seats{top:54%}}