@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap";:root{color:#16111c;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--purple:#704da5;--purple-dark:#342253;--purple-shadow:#34225338;--purple-light:#fbf7ff;--golden:#f5c67b;--cream:#f7e9b0;--white:#fff;--green:#2e7d32;--green-dark:#1b5e20;background:#f5c67b;font-family:Nunito,ui-rounded,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body,#root{min-width:320px;height:100%;margin:0}body{margin:0;overflow:hidden}button,input,textarea{font:inherit;cursor:pointer;background:0 0;border:none}.game-header{z-index:20;background:var(--purple);box-shadow:0 4px 0 var(--purple-shadow);grid-template-columns:1fr auto auto;align-items:center;gap:20px;padding:12px 20px;display:grid;position:relative}.header-lesson h1{color:var(--white);margin:0;font-size:22px;font-weight:900;line-height:1.1}.header-lesson p{color:var(--purple-light);margin:4px 0 0;font-size:14px;line-height:1.3}.header-objective-label{text-underline-offset:2px;font-weight:700;text-decoration:underline}.header-center{align-items:center;gap:12px;display:flex}.activity-pill{height:36px;color:var(--white);white-space:nowrap;background:#ffffff1f;border:1.5px solid #fff3;border-radius:8px;align-items:center;gap:14px;padding:0 14px;font-size:14px;display:flex}.activity-pill strong{font-weight:700}.activity-pill span{opacity:.75;font-size:13px}.header-actions{align-items:center;gap:10px;display:flex}.tutorial-button{background:var(--white);color:#14101d;white-space:nowrap;border:2px solid #1a12232e;border-radius:8px;align-items:center;gap:8px;height:40px;padding:0 16px;font-size:14px;font-weight:600;transition:background .1s;display:inline-flex;box-shadow:0 2px #00000024}.tutorial-button:hover{background:#f0eaf8}.finish-button{background:var(--green);height:40px;color:var(--white);white-space:nowrap;border-radius:8px;align-items:center;gap:8px;padding:0 16px;font-size:14px;font-weight:700;transition:background .1s;display:inline-flex;box-shadow:0 2px #0003}.finish-button:hover{background:var(--green-dark)}.tool-object{cursor:pointer;-webkit-user-select:none;user-select:none;transform-origin:bottom;transition:transform .15s,filter .15s;position:absolute}.tool-object:hover{filter:drop-shadow(0 8px 18px #00000061);transform:scale(1.07)}[data-object=notes]{z-index:10}[data-object=computer]{z-index:9}[data-object=canvas]{z-index:4}.room-desk{pointer-events:none;-webkit-user-select:none;user-select:none;z-index:8;position:absolute}.character-sprite{cursor:pointer;-webkit-user-select:none;user-select:none;transform-origin:bottom;transition:transform .2s,opacity .2s,filter .2s;position:absolute}.character-sprite.is-active{z-index:7}.character-sprite.is-inactive{z-index:2;opacity:.82;filter:brightness(.88)saturate(.75)}.character-sprite:hover{transform:scale(1.04)}.character-fallback{opacity:.65;border-radius:50% 50% 38% 38%;width:70px;height:110px}.composer-area{z-index:15;pointer-events:none;width:min(560px,58%);position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.composer{pointer-events:auto;-webkit-backdrop-filter:blur(12px);background:#fffcf4d1;border-radius:14px;align-items:center;gap:10px;padding:8px 10px 8px 8px;display:flex;box-shadow:0 4px 24px #00000038,inset 0 1px #fff9}.composer-input{color:#2d1b0e;resize:none;field-sizing:content;background:#fffcf499;border:1.5px solid #b4966440;border-radius:9px;outline:none;flex:1;min-height:calc(1.4em + 24px);max-height:calc(2.8em + 24px);padding:12px 14px;font-family:Nunito,sans-serif;font-size:1rem;font-weight:600;line-height:1.4;transition:border-color .15s;overflow-y:auto}.composer-input:focus{background:#fffcf4eb;border-color:#b4823c80}.composer-input::placeholder{color:#64503273;font-weight:500}.send-button{color:#fff8dce6;cursor:pointer;background:#1e1237d1;border:none;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:1rem;transition:background .15s,transform .12s;display:flex}.send-button:hover:not(:disabled){background:#321e50e6;transform:scale(1.06)}.send-button:disabled{opacity:.35;cursor:default}.voice-toggle{color:#fff8dce6;cursor:pointer;background:#1e1237e0;border:none;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;transition:background .15s,transform .12s;display:flex}.voice-toggle:hover:not(:disabled){background:#321e50e6;transform:scale(1.06)}.voice-toggle:disabled{opacity:.35;cursor:default}.voice-toggle.is-voice{background:#b41e1ee0;animation:1.2s ease-in-out infinite mic-pulse}.composer-input.is-recording{background:#fff8f8b3;border-color:#b41e1e66}@keyframes mic-pulse{0%,to{box-shadow:0 0 #b41e1e73}50%{box-shadow:0 0 0 8px #b41e1e00}}.speech-bubble{pointer-events:none;color:#2d1b0e;background:#fffefaf5;border-radius:18px 18px 18px 4px;max-width:42%;padding:12px 18px;font-family:Nunito,sans-serif;font-size:.95rem;font-weight:600;line-height:1.5;animation:.22s bubble-in;position:absolute;box-shadow:0 4px 20px #0000002e}@keyframes bubble-in{0%{opacity:0;transform:scale(.88)translateY(8px)}to{opacity:1;transform:scale(1)translateY(0)}}.speech-bubble:after{content:"";border-top:12px solid #fffefaf5;border-left:10px solid #0000;border-right:6px solid #0000;width:0;height:0;position:absolute;bottom:-10px;left:20px}.speech-bubble.is-streaming .bubble-cursor{background:var(--purple);vertical-align:middle;width:2px;height:1em;margin-left:2px;animation:.8s step-end infinite blink;display:inline-block}@keyframes blink{50%{opacity:0}}.typing-dots{align-items:center;gap:5px;height:1em;display:inline-flex}.typing-dots span{background:#8a6a3a;border-radius:50%;width:7px;height:7px;animation:1.1s ease-in-out infinite dot-bounce;display:inline-block}.typing-dots span:nth-child(2){animation-delay:.18s}.typing-dots span:nth-child(3){animation-delay:.36s}@keyframes dot-bounce{0%,80%,to{opacity:.5;transform:translateY(0)}40%{opacity:1;transform:translateY(-6px)}}.tool-overlay{z-index:20;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0a051c99;justify-content:center;align-items:center;animation:.18s overlay-in;display:flex;position:absolute;inset:0}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.overlay-panel{background:linear-gradient(148deg,#fef8ec 0%,#f5e6c8 100%);border:3px solid #c49a3c;border-radius:28px;flex-direction:column;gap:14px;width:min(560px,88%);max-height:72%;padding:24px 32px 28px;animation:.22s panel-in;display:flex;overflow-y:auto;box-shadow:0 20px 60px #00000073,inset 0 1px #fffadccc}@keyframes panel-in{0%{opacity:0;transform:scale(.94)translateY(16px)}to{opacity:1;transform:scale(1)translateY(0)}}.overlay-back-button{color:#8a5c1a;cursor:pointer;background:#b482281f;border:1.5px solid #b4822859;border-radius:20px;align-self:flex-start;padding:5px 14px;font-family:Nunito,sans-serif;font-size:.82rem;font-weight:800;transition:background .15s,color .15s}.overlay-back-button:hover{color:#5a3c0a;background:#b4822838}.overlay-title{color:#4a2e0a;letter-spacing:-.01em;margin:0;font-family:Nunito,sans-serif;font-size:1.3rem;font-weight:900}.overlay-placeholder{color:#a07840;text-align:center;padding:40px 0;font-family:Nunito,sans-serif;font-size:.92rem;font-style:italic;font-weight:600}.notes-history{flex-direction:column;gap:14px;display:flex}.notes-turn{flex-direction:column;gap:3px;display:flex}.notes-label{text-transform:uppercase;letter-spacing:.07em;color:#a07840;font-family:Nunito,sans-serif;font-size:.72rem;font-weight:900}.notes-turn--student .notes-label{color:var(--purple)}.notes-text{color:#3a2510;background:#ffffff73;border-radius:10px;margin:0;padding:8px 12px;font-family:Nunito,sans-serif;font-size:.92rem;font-weight:600;line-height:1.5}.notes-turn--student .notes-text{background:#704da51a}.game-shell{background:var(--golden);grid-template-rows:auto 1fr;height:100svh;display:grid;overflow:hidden}.room-stage{background-image:url(/room/classroom-bg.png);background-position:top;background-size:cover;position:relative;overflow:hidden}.room-stage:after{content:"";pointer-events:none;z-index:14;background:linear-gradient(#0000 0%,#14083273 100%);height:100px;position:absolute;bottom:0;left:0;right:0}.loading-room{background:var(--cream);height:100svh;color:var(--purple);place-items:center;font-size:18px;font-weight:700;display:grid}.error-room{background:var(--cream);color:#c62828;text-align:center;place-items:center;height:100svh;padding:24px;font-size:16px;font-weight:600;display:grid}