:root {
  color-scheme: dark;
  --ink: #f4f1e9;
  --muted: #aeb8b2;
  --panel: rgba(10, 18, 18, .82);
  --panel-soft: rgba(19, 29, 28, .72);
  --line: rgba(255, 255, 255, .13);
  --mint: #9ad8b8;
  --mint-deep: #326e57;
  --amber: #efb45f;
  --red: #ef7e70;
  --shadow: 0 24px 60px rgba(0, 0, 0, .38);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; min-width: 320px; height: 100%; margin: 0; }
body { --font-scale: 1; overflow: hidden; color: var(--ink); background: #07100f; font-family: Inter, "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
button, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, textarea:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

.noise { position: fixed; z-index: 100; inset: 0; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); mix-blend-mode: screen; }

.runtime-warning { position: fixed; z-index: 900; top: max(var(--safe-top), 14px); left: 50%; display: flex; width: min(760px,calc(100vw - 24px)); padding: 13px 15px; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid rgba(255,190,101,.65); border-radius: 13px; color: #fff4df; background: rgba(53,34,12,.96); box-shadow: 0 18px 50px rgba(0,0,0,.48); transform: translateX(-50%); backdrop-filter: blur(18px); }
.runtime-warning strong, .runtime-warning p { display: block; margin: 0; }
.runtime-warning strong { font-size: 13px; }
.runtime-warning p { margin-top: 4px; color: #e1caa5; font-size: 10px; line-height: 1.5; }
.runtime-warning code { padding: 2px 5px; border-radius: 4px; color: #ffe8be; background: rgba(0,0,0,.25); }
.runtime-warning button { min-height: 38px; padding: 0 13px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; color: #2d1d0b; background: #efc778; font-size: 10px; font-weight: 900; cursor: pointer; }

.menu-view, .game-view { position: relative; width: 100vw; height: 100vh; min-height: 600px; overflow: hidden; }
.menu-bg, .room-photo, .menu-vignette, .room-grade { position: absolute; inset: 0; width: 100%; height: 100%; }
.menu-bg, .room-photo { object-fit: cover; object-position: center; }
.menu-bg { filter: saturate(.72) contrast(1.08); transform: scale(1.015); }
.menu-vignette { background: linear-gradient(90deg, rgba(5, 10, 10, .93) 0, rgba(5, 10, 10, .8) 39%, rgba(5, 10, 10, .16) 69%, rgba(5, 10, 10, .58) 100%), linear-gradient(0deg, rgba(4, 8, 8, .82), transparent 36%); }
.menu-header { position: absolute; z-index: 3; top: 0; right: 0; left: 0; display: flex; height: calc(92px + var(--safe-top)); padding: var(--safe-top) max(var(--safe-right), clamp(28px, 4vw, 72px)) 0 max(var(--safe-left), clamp(28px, 4vw, 72px)); align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.09); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.utility-button { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 99px; color: #aeb9b3; background: rgba(8,15,14,.56); font-size: calc(12px * var(--font-scale)); font-weight: 800; cursor: pointer; backdrop-filter: blur(14px); touch-action: manipulation; }
.utility-button:hover { color: var(--ink); border-color: rgba(154,216,184,.32); }
.wordmark { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 400; letter-spacing: .15em; }
.wordmark i { color: var(--amber); font-style: normal; font-weight: 900; }
.wordmark strong { font-weight: 900; }
.network-badge { display: flex; min-height: 34px; padding: 8px 13px; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 99px; color: #c6cfca; background: rgba(8,15,14,.62); font-size: 11px; font-weight: 700; letter-spacing: .04em; backdrop-filter: blur(14px); }
.network-badge i { width: 7px; height: 7px; border-radius: 50%; background: #d8a954; box-shadow: 0 0 0 5px rgba(216,169,84,.1); animation: pulse 1.6s infinite; }
.network-badge.online i { background: #70d3a2; box-shadow: 0 0 0 5px rgba(112,211,162,.11); }
.network-badge.local i { background: #9aa7a1; box-shadow: none; animation: none; }

.hero-copy { position: absolute; z-index: 3; top: 50%; left: clamp(28px, 7vw, 130px); width: min(600px, 48vw); transform: translateY(-47%); }
.kicker, .dialog-kicker { margin: 0 0 17px; color: var(--amber); font-size: 11px; font-weight: 900; letter-spacing: .24em; }
.hero-copy h1 { margin: 0; font-family: "Microsoft YaHei", sans-serif; font-size: clamp(50px, 5.5vw, 94px); font-weight: 900; line-height: 1.04; letter-spacing: -.045em; text-shadow: 0 12px 35px rgba(0,0,0,.38); }
.hero-copy h1 em { color: var(--mint); font-style: normal; }
.hero-description { max-width: 550px; margin: 26px 0 30px; color: #c6ceca; font-size: clamp(14px, 1.16vw, 18px); line-height: 1.8; }
.menu-actions { display: flex; align-items: stretch; gap: 12px; }
.primary-action, .secondary-action { border: 0; border-radius: 8px; cursor: pointer; transition: transform .18s, filter .18s, background .18s; }
.primary-action { display: flex; min-width: 270px; padding: 15px 22px; align-items: flex-start; flex-direction: column; color: #0e1b17; background: linear-gradient(135deg, #a9e2c4, #77bd99); box-shadow: 0 13px 32px rgba(84,159,120,.24); }
.primary-action span { font-size: 16px; font-weight: 900; }
.primary-action small { margin-top: 3px; color: rgba(9,28,20,.67); font-size: 10px; font-weight: 700; }
.primary-action:hover, .secondary-action:hover { transform: translateY(-2px); filter: brightness(1.06); }
.primary-action.compact { display: inline-flex; min-width: 0; padding: 13px 22px; align-items: center; font-weight: 900; }
.secondary-action { padding: 13px 18px; border: 1px solid var(--line); color: #e4e9e6; background: rgba(255,255,255,.06); font-size: 13px; font-weight: 800; backdrop-filter: blur(10px); }
.feature-line { display: flex; margin-top: 30px; gap: 25px; color: #929e98; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.feature-line b { margin-right: 6px; color: var(--mint); font-size: 9px; }

.mission-preview { position: absolute; z-index: 3; right: clamp(28px, 6vw, 110px); bottom: 10vh; width: min(320px, 27vw); padding: 25px; border: 1px solid rgba(255,255,255,.19); border-radius: 14px; background: linear-gradient(145deg, rgba(15,25,23,.86), rgba(9,16,15,.75)); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.preview-top { display: flex; align-items: center; justify-content: space-between; color: var(--mint); font-size: 11px; font-weight: 900; letter-spacing: .13em; }
.preview-top b { color: rgba(255,255,255,.12); font-size: 42px; line-height: 1; }
.mission-preview > p { margin: 14px 0 4px; color: #9ca8a2; font-size: 11px; }
.mission-preview h2 { margin: 0 0 19px; font-size: clamp(21px, 2vw, 29px); line-height: 1.3; }
.mission-preview ul { margin: 0; padding: 0; list-style: none; }
.mission-preview li { display: flex; padding: 9px 0; align-items: center; gap: 10px; border-top: 1px solid rgba(255,255,255,.08); color: #cbd2ce; font-size: 12px; }
.mission-preview li i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.preview-meta { display: flex; margin-top: 15px; gap: 8px; }
.preview-meta span { padding: 6px 8px; border-radius: 4px; color: #9da9a3; background: rgba(255,255,255,.05); font-size: 9px; font-weight: 800; }
.menu-footer { position: absolute; z-index: 3; right: max(var(--safe-right), clamp(28px,4vw,72px)); bottom: max(var(--safe-bottom), 24px); left: max(var(--safe-left), clamp(28px,4vw,72px)); display: flex; justify-content: space-between; color: rgba(255,255,255,.38); font-size: 9px; letter-spacing: .1em; }

.room-photo { z-index: -3; }
.room-grade { z-index: -2; background: linear-gradient(180deg, rgba(5,13,12,.68), transparent 22%), linear-gradient(0deg, rgba(5,11,10,.88), transparent 38%), linear-gradient(90deg, rgba(6,13,12,.34), transparent 24%, transparent 74%, rgba(6,13,12,.38)); }
.game-hud { position: absolute; z-index: 20; top: 0; right: 0; left: 0; display: grid; height: calc(72px + var(--safe-top)); padding: var(--safe-top) max(var(--safe-right), 22px) 0 max(var(--safe-left), 22px); grid-template-columns: 44px minmax(250px,1fr) auto auto; align-items: center; gap: 15px; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(5,12,11,.76); backdrop-filter: blur(18px); }
.icon-button, .finish-button { border: 1px solid var(--line); background: rgba(255,255,255,.055); cursor: pointer; }
.icon-button { width: 44px; height: 44px; border-radius: 8px; font-size: 21px; touch-action: manipulation; }
.lesson-heading { display: flex; min-width: 0; flex-direction: column; }
.lesson-heading span { color: var(--mint); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.lesson-heading strong { margin-top: 2px; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.turn-counter { display: flex; padding: 7px 14px; align-items: baseline; gap: 5px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.045); }
.turn-counter span { margin-right: 6px; color: #b1bcb6; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.turn-counter strong { color: var(--amber); font-size: 21px; }
.turn-counter i, .turn-counter b { color: #aeb9b3; font-size: 13px; font-style: normal; }
.finish-button { min-height: 44px; padding: 0 16px; border-radius: 7px; color: #d4dcd8; font-size: 12px; font-weight: 800; touch-action: manipulation; }

.metric-strip { position: absolute; z-index: 12; top: calc(84px + var(--safe-top)); left: max(var(--safe-left), 22px); display: grid; width: 168px; padding: 13px; gap: 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); box-shadow: 0 12px 30px rgba(0,0,0,.18); backdrop-filter: blur(14px); }
.metric { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px; }
.metric span { color: #c5cec9; font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.metric b { font-size: 14px; }
.metric > div { grid-column: 1 / -1; height: 3px; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.1); }
.metric > div i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4d9273, var(--mint)); transition: width .6s ease; }
.metric.mastery { padding-top: 8px; border-top: 1px solid var(--line); }
.metric.mastery b { color: var(--mint); }
.metric.mastery em { font-style: normal; font-size: 20px; }
.metric.mastery i { font-style: normal; }

.board { position: absolute; z-index: 3; top: 24.4%; left: 50%; width: min(620px, 46vw); min-height: 148px; padding: 13px 54px 12px; overflow: hidden; border: 1px dashed rgba(228,220,176,.16); border-radius: 8px; color: rgba(247,244,220,.96); background: radial-gradient(ellipse at center,rgba(255,255,255,.025),transparent 68%); text-align: center; text-shadow: 0 1px #000, 0 0 8px rgba(255,250,220,.12); transform: translateX(-50%) rotate(-.2deg); cursor: pointer; }
.board:hover { border-color: rgba(228,220,176,.34); background-color: rgba(255,255,255,.018); }
.board:focus-visible { outline: 2px solid rgba(154,216,184,.9); outline-offset: 4px; }
.board:disabled { cursor: wait; }
.board-page { position: absolute; z-index: 2; top: 7px; right: 10px; color: rgba(225,217,180,.62); font: 800 9px/1.2 system-ui,sans-serif; letter-spacing: .08em; }
.board-copy { position: relative; z-index: 1; display: grid; min-height: 120px; align-content: center; justify-items: center; gap: 5px; }
.board-title { display: block; color: #decf9f; font-family: KaiTi,STKaiti,serif; font-size: clamp(17px,1.55vw,23px); font-weight: 900; letter-spacing: .05em; }
.board strong { display: block; color: rgba(247,244,220,.9); font-family: KaiTi,STKaiti,serif; font-size: clamp(11px,.95vw,14px); }
.board-text { display: flex; max-width: 100%; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px 12px; color: #fffce2; font-family: KaiTi,STKaiti,serif; font-size: clamp(14px,1.2vw,18px); font-weight: 800; line-height: 1.35; }
.board-text > span { display: inline-block; }
.board[data-page-kind="explain"] .board-text { max-width: 94%; font-size: clamp(13px,1.05vw,16px); line-height: 1.5; }
.board[data-page-kind="check"] .board-text { align-items: flex-start; flex-direction: column; font-size: clamp(13px,1.08vw,16px); text-align: left; }
.board[data-page-kind="check"] .board-text > span::before { content: "？"; margin-right: 6px; color: #d9b977; }
.board small { display: block; color: rgba(214,205,164,.72); font-family: KaiTi,STKaiti,serif; font-size: clamp(9px,.8vw,12px); }
.board-wipe-effects { position: absolute; z-index: 4; inset: 7px 18px; overflow: hidden; opacity: 0; pointer-events: none; }
.board.is-wiping .board-wipe-effects { opacity: 1; }
.board-wipe-trail { position: absolute; right: 3%; left: 3%; height: 13px; border-radius: 50%; opacity: 0; background: repeating-linear-gradient(1deg,rgba(234,231,204,.1) 0 1px,rgba(215,215,191,.025) 1px 4px,transparent 4px 7px); filter: blur(.45px); }
.board-wipe-trail-1 { top: 14%; transform-origin: right center; }
.board-wipe-trail-2 { top: 31%; transform-origin: left center; }
.board-wipe-trail-3 { top: 48%; transform-origin: right center; }
.board-wipe-trail-4 { top: 65%; transform-origin: left center; }
.board-wipe-trail-5 { top: 80%; transform-origin: right center; }
.board.is-wiping .board-wipe-trail-1 { animation: boardWipeTrail .42s .02s ease-out both; }
.board.is-wiping .board-wipe-trail-2 { animation: boardWipeTrail .42s .56s ease-out both; }
.board.is-wiping .board-wipe-trail-3 { animation: boardWipeTrail .42s 1.1s ease-out both; }
.board.is-wiping .board-wipe-trail-4 { animation: boardWipeTrail .42s 1.64s ease-out both; }
.board.is-wiping .board-wipe-trail-5 { animation: boardWipeTrail .42s 2.18s ease-out both; }
.board-eraser { position: absolute; top: 14%; left: 94%; width: 30px; height: 10px; border-radius: 50%; background: radial-gradient(ellipse,rgba(241,236,203,.34),rgba(234,229,198,.08) 48%,transparent 72%); box-shadow: 0 0 9px rgba(240,235,204,.22); opacity: 0; transform: translate(-50%,-50%); }
.board-chalk-dust { position: absolute; top: 14%; left: 94%; width: 3px; height: 3px; border-radius: 50%; background: rgba(245,241,213,.8); box-shadow: -7px 5px rgba(239,235,205,.46),5px 8px rgba(239,235,205,.34),12px 2px rgba(239,235,205,.25),-13px -2px rgba(239,235,205,.22); opacity: 0; transform: translate(-50%,-50%); }
.board.is-wiping .board-eraser { animation: boardEraserSweep 2.8s linear both; }
.board.is-wiping .board-chalk-dust-a { animation: boardDustTravel 2.8s linear both; }
.board.is-wiping .board-chalk-dust-b { animation: boardDustTravel 2.8s .06s linear both; filter: blur(.7px); }
.board.is-wiping .board-title { animation: boardChalkEraseFromRight .4s .03s steps(9,end) both; }
.board.is-wiping .board-copy > strong { animation: boardChalkEraseFromLeft .4s .57s steps(9,end) both; }
.board.is-wiping .board-text > span { animation: boardChalkEraseFromRight .42s calc(1.11s + var(--chalk-line,0) * .08s) steps(10,end) both; }
.board.is-wiping .board-copy > small { animation: boardChalkEraseFromRight .42s 2.19s steps(10,end) both; }
.board.is-writing .board-title { animation: boardChalkWrite .38s ease-out both; }
.board.is-writing .board-copy > strong { animation: boardChalkWrite .38s .12s ease-out both; }
.board.is-writing .board-text > span { animation: boardChalkWrite .4s calc(.27s + var(--chalk-line,0) * .09s) ease-out both; }
.board.is-writing .board-copy > small { animation: boardChalkWrite .38s .55s ease-out both; }
.status-card { position: absolute; z-index: 11; top: calc(84px + var(--safe-top)); left: 50%; width: min(510px, 40vw); padding: 11px 20px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(10,19,18,.78); box-shadow: 0 12px 34px rgba(0,0,0,.2); text-align: center; transform: translateX(-50%); backdrop-filter: blur(16px); }
.status-card > span { color: var(--amber); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.status-card strong { display: block; margin-top: 3px; font-size: clamp(17px,1.45vw,21px); }
.status-card p { margin: 4px 0 0; color: #c1cbc6; font-size: 12px; }
.status-card[data-mode="thinking"] { border-color: rgba(239,180,95,.32); }
.status-card[data-mode="event"] { border-color: rgba(239,126,112,.48); box-shadow: 0 0 0 1px rgba(239,126,112,.12), 0 12px 34px rgba(0,0,0,.2); }
.status-card[data-mode="listening"] { border-color: rgba(154,216,184,.45); }

.objective-card { position: absolute; z-index: 12; top: calc(84px + var(--safe-top)); right: max(var(--safe-right), 22px); width: 224px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); box-shadow: 0 12px 30px rgba(0,0,0,.18); backdrop-filter: blur(14px); }
.panel-title { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 900; letter-spacing: .06em; }
.panel-title b { color: var(--mint); }
.objective-card ol { margin: 9px 0 0; padding: 0; list-style: none; }
.objective-card li { display: flex; padding: 7px 0; align-items: center; gap: 8px; color: #b7c1bc; font-size: 12px; line-height: 1.4; }
.objective-card li i { width: 12px; height: 12px; border: 1px solid #68756e; border-radius: 50%; flex: 0 0 auto; }
.objective-card li.passed { color: #d4ded9; }
.objective-card li.passed i { border-color: var(--mint); background: radial-gradient(circle, var(--mint) 0 40%, transparent 45%); }
.event-alert { margin-top: 10px; padding: 10px; border: 1px solid rgba(239,126,112,.35); border-radius: 7px; background: rgba(117,45,40,.24); animation: eventIn .35s ease; }
.event-alert span { color: var(--red); font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.event-alert strong { display: block; margin-top: 2px; font-size: 11px; }
.event-alert p { margin: 3px 0 0; color: #c9aaa6; font-size: 9px; line-height: 1.45; }

.student-stage { position: absolute; z-index: 5; inset: 15% 9% 12%; pointer-events: none; }
.scene-secrets { position: absolute; z-index: 7; inset: 0; overflow: hidden; pointer-events: none; }
.scene-secret { position: absolute; display: grid; width: 31px; aspect-ratio: 1; padding: 0; place-items: center; border: 0; border-radius: 50%; color: rgba(255,235,128,.76); background: radial-gradient(circle,rgba(255,238,143,.18),transparent 68%); filter: drop-shadow(0 0 5px rgba(255,219,94,.55)); opacity: .44; cursor: pointer; pointer-events: auto; touch-action: manipulation; transition: opacity .2s,transform .2s; }
.scene-secret:hover, .scene-secret:focus-visible, .scene-secret.found { opacity: 1; transform: scale(1.15); }
.scene-secret span { animation: secretHint 2.8s ease-in-out infinite; }
.scene-secret-plant { top: 50%; left: 3.2%; }
.scene-secret-globe { top: 50%; right: 8.2%; }
.scene-magic { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.scene-surprise-effect { position: absolute; inset: 0; pointer-events: none; }
.scene-surprise-effect i { position: absolute; color: #fff0a2; font-style: normal; text-shadow: 0 0 8px #fff3a9,0 0 14px rgba(255,212,72,.8); }
.scene-surprise-fireflies i { top: var(--secret-top); left: var(--secret-left); font-size: 9px; animation: fireflyDrift 2.55s var(--secret-delay) ease-in-out both; }
.scene-surprise-globe i { top: var(--secret-top); right: var(--secret-right); font-size: 13px; animation: globeOrbit 2.55s var(--secret-delay) ease-in-out both; }
.scene-surprise-class-star { z-index: 2; }
.scene-surprise-class-star i { top: var(--star-top); left: var(--star-left); font-size: 15px; animation: constellationPoint 3.2s var(--secret-delay) ease both; }
.scene-surprise-class-star b { position: absolute; top: 31%; left: 50%; color: #ffe776; font: 900 clamp(36px,4vw,62px)/1 Georgia,serif; text-shadow: 0 0 12px #fff4a5,0 0 30px rgba(255,207,64,.85),0 0 55px rgba(117,224,174,.55); transform: translate(-50%,-50%); animation: classroomStar 3.3s ease both; }
.student { position: absolute; bottom: 0; width: min(13vw, 190px); height: 52%; transform-origin: bottom center; transition: filter .35s, transform .35s; }
.student-an, .student-yu, .student-mei, .student-tao { bottom: 25%; z-index: 2; filter: brightness(.92) saturate(.94); transform: scale(.84); }
.student-feng, .student-chen, .student-lan, .student-bo { z-index: 5; }
.student-an { left: 0; }
.student-yu { left: 25%; }
.student-mei { left: 50%; }
.student-tao { left: 75%; }
.student-feng { left: 6%; }
.student-chen { left: 30%; }
.student-lan { left: 54%; }
.student-bo { left: 78%; }
.student-stage[data-class-size="2"] .student,
.student-stage[data-class-size="3"] .student,
.student-stage[data-class-size="4"] .student,
.student-stage[data-class-size="5"] .student,
.student-stage[data-class-size="6"] .student,
.student-stage[data-class-size="7"] .student { bottom: 0; z-index: 5; filter: none; transform: none; }
.student-stage[data-class-size="2"] .student { width: min(19vw,260px); height: 59%; }
.student-stage[data-class-size="2"] .student:nth-child(1) { left: 20%; }
.student-stage[data-class-size="2"] .student:nth-child(2) { left: 60%; }
.student-stage[data-class-size="3"] .student { width: min(17vw,230px); height: 56%; }
.student-stage[data-class-size="3"] .student:nth-child(1) { left: 12%; }
.student-stage[data-class-size="3"] .student:nth-child(2) { left: 41%; }
.student-stage[data-class-size="3"] .student:nth-child(3) { left: 70%; }
.student-stage[data-class-size="4"] .student { width: min(15vw,210px); height: 54%; }
.student-stage[data-class-size="4"] .student:nth-child(1) { left: 3%; }
.student-stage[data-class-size="4"] .student:nth-child(2) { left: 29%; }
.student-stage[data-class-size="4"] .student:nth-child(3) { left: 55%; }
.student-stage[data-class-size="4"] .student:nth-child(4) { left: 81%; }
.student-stage[data-class-size="5"] .student { width: min(15vw,210px); height: 54%; }
.student-stage[data-class-size="5"] .student:nth-child(-n+2) { bottom: 25%; z-index: 2; filter: brightness(.92) saturate(.94); transform: scale(.84); }
.student-stage[data-class-size="5"] .student:nth-child(1) { left: 21%; }
.student-stage[data-class-size="5"] .student:nth-child(2) { left: 62%; }
.student-stage[data-class-size="5"] .student:nth-child(3) { left: 10%; }
.student-stage[data-class-size="5"] .student:nth-child(4) { left: 41%; }
.student-stage[data-class-size="5"] .student:nth-child(5) { left: 72%; }
.student-stage[data-class-size="6"] .student { width: min(14vw,200px); height: 54%; }
.student-stage[data-class-size="6"] .student:nth-child(-n+3) { bottom: 25%; z-index: 2; filter: brightness(.92) saturate(.94); transform: scale(.84); }
.student-stage[data-class-size="6"] .student:nth-child(1) { left: 6%; }
.student-stage[data-class-size="6"] .student:nth-child(2) { left: 37%; }
.student-stage[data-class-size="6"] .student:nth-child(3) { left: 68%; }
.student-stage[data-class-size="6"] .student:nth-child(4) { left: 13%; }
.student-stage[data-class-size="6"] .student:nth-child(5) { left: 42%; }
.student-stage[data-class-size="6"] .student:nth-child(6) { left: 71%; }
.student-stage[data-class-size="7"] .student { width: min(13vw,190px); height: 53%; }
.student-stage[data-class-size="7"] .student:nth-child(-n+3) { bottom: 25%; z-index: 2; filter: brightness(.92) saturate(.94); transform: scale(.84); }
.student-stage[data-class-size="7"] .student:nth-child(1) { left: 7%; }
.student-stage[data-class-size="7"] .student:nth-child(2) { left: 38%; }
.student-stage[data-class-size="7"] .student:nth-child(3) { left: 69%; }
.student-stage[data-class-size="7"] .student:nth-child(4) { left: 3%; }
.student-stage[data-class-size="7"] .student:nth-child(5) { left: 29%; }
.student-stage[data-class-size="7"] .student:nth-child(6) { left: 55%; }
.student-stage[data-class-size="7"] .student:nth-child(7) { left: 81%; }
.student-image { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 18px 12px rgba(0,0,0,.34)); transition: opacity .18s, filter .25s; }
.student.active .student-image { filter: drop-shadow(0 18px 12px rgba(0,0,0,.34)) drop-shadow(0 0 16px rgba(154,216,184,.3)); }
.student.raised .student-image,
.student.standing .student-image { animation: none; }
.student.speaking .student-image { filter: drop-shadow(0 18px 12px rgba(0,0,0,.34)) drop-shadow(0 0 20px rgba(154,216,184,.46)); }
.student.eventful .student-image { animation: none; }
.student.performing .student-image { filter: drop-shadow(0 18px 12px rgba(0,0,0,.34)) drop-shadow(0 0 22px rgba(154,216,184,.5)); }
.student-image.pose-enter { animation: characterPoseIn .2s cubic-bezier(.2,.75,.25,1) both; }
.student[data-motion] .student-image { transform-origin: 50% 88%; will-change: transform,opacity; }
.student.motion-greeting .student-image { animation: studentGreeting 1.25s cubic-bezier(.2,.72,.28,1) both; }
.student.motion-volunteer .student-image { animation: studentVolunteer .92s cubic-bezier(.2,.75,.25,1) both; }
.student.motion-called .student-image { animation: studentCalled 1.15s cubic-bezier(.18,.72,.25,1) both; }
.student.motion-speaking .student-image { animation: studentSpeaking 1.45s cubic-bezier(.24,.68,.27,1) both; }
.student.motion-celebrate .student-image { animation: studentCelebrate 1.35s cubic-bezier(.18,.78,.24,1) both; }
.student.motion-relieved .student-image { animation: studentRelieved 1.45s ease-out both; }
.student.motion-thinking .student-image { animation: studentThinking 1.55s ease-in-out both; }
.student.motion-apologize .student-image { animation: studentApologize 1.55s ease-out both; }
.student.motion-nod .student-image { animation: studentNod 1.15s cubic-bezier(.24,.72,.3,1) both; }
.student.motion-look-board .student-image { animation: studentLookBoard 1.35s ease-in-out both; }
.student.motion-settle .student-image { animation: studentSettle 1.4s ease-in-out both; }
.student.motion-breathe .student-image { animation: studentBreathe 1.55s ease-in-out both; }
.student.distracted .student-image { filter: drop-shadow(0 18px 12px rgba(0,0,0,.34)) saturate(.72); }
.student-action { position: absolute; z-index: 9; right: auto; bottom: 4%; left: 50%; display: flex; min-width: 42px; min-height: 24px; padding: 4px 8px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.42); border-radius: 99px; color: #102019; background: rgba(244,241,233,.94); box-shadow: 0 6px 14px rgba(0,0,0,.22); font-size: 9px; font-weight: 900; letter-spacing: .06em; animation: badgeIn .22s ease; transform: translateX(-50%); }
.student-action[hidden] { display: none; }
.student.raised .student-action { color: #21190b; background: #efc778; }
.student.speaking .student-action { background: #9ad8b8; }
.student.eventful .student-action { color: #2b1110; background: #ef9a8f; }
.student-name-tag { position: absolute; z-index: 8; top: 79%; left: 50%; max-width: 58%; padding: 1px 4px 1px 8px; overflow: hidden; border: 1px solid rgba(114,80,29,.5); border-radius: 3px; color: #493718; background: linear-gradient(145deg,#fff8dd,#efdca5); box-shadow: 0 1px 3px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.7); font-size: clamp(6px,.5vw,8px); font-weight: 950; line-height: 1.1; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; transform: translate(-50%,-50%) rotate(-1deg); pointer-events: none; }
.student-name-tag::before { content: ""; position: absolute; top: 50%; left: 4px; width: 3px; height: 3px; border-radius: 50%; background: #d59d45; box-shadow: 0 0 0 1px rgba(85,55,18,.28); transform: translateY(-50%); }
.student-name-tag.mastered { color: #173f2d; border-color: rgba(56,128,91,.68); background: linear-gradient(145deg,#e9fff2,#aee4c5); }
.student-awards { position: absolute; z-index: 7; inset: 0; pointer-events: none; }
.student-awards[hidden] { display: none; }
.student-award { position: absolute; top: calc(78% + var(--award-row,0) * 9px); display: grid; width: clamp(12px,1vw,16px); aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,245,189,.88); border-radius: 50%; color: #fff8d0; background: radial-gradient(circle at 35% 30%,#ffdf6d,#d98219 64%,#8c470d); box-shadow: inset 0 1px rgba(255,255,255,.45),0 1px 1px rgba(42,23,7,.22); font: 950 clamp(7px,.62vw,10px)/1 Georgia,serif; opacity: .94; transform: translate(-50%,-50%); transition: opacity .2s,transform .25s; }
.student-award[data-side="left"] { left: 29%; }
.student-award[data-side="right"] { left: 71%; }
.student-award[data-award-type="flower"] { color: #fff2a8; border-color: #ffd0d5; background: radial-gradient(circle at 50% 48%,#ffd747 0 24%,#ed6476 27% 64%,#a52b49 68%); }
.student-award[data-award-type="courage"] { color: #fff5a3; background: radial-gradient(circle at 35% 30%,#ffdf63,#e96030 64%,#9b291b); }
.student-award[data-award-type="thinking"] { color: #fff9bf; background: radial-gradient(circle at 35% 30%,#ffe684,#6f9ee8 64%,#294f99); }
.student-award[data-award-type="speaking"] { color: #fff3b5; background: radial-gradient(circle at 35% 30%,#ffd96f,#9b6add 64%,#59318f); }
.student-award.is-pending { opacity: 0; transform: translate(-50%,-50%) scale(.1); }
.student-award.just-awarded { animation: studentAwardArrive .62s cubic-bezier(.15,.85,.22,1.35) both; }
.student.receiving-award .student-image { filter: drop-shadow(0 18px 12px rgba(0,0,0,.34)) drop-shadow(0 0 24px rgba(255,224,114,.85)); }

.teacher-console { position: absolute; z-index: 20; right: auto; bottom: max(var(--safe-bottom), 12px); left: 50%; display: block; width: max-content; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; transform: translateX(-50%); pointer-events: none; }
.transcript-wrap { display: none; }
.console-label { display: flex; height: 24px; align-items: center; justify-content: space-between; color: #a3afa9; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.console-label button { min-height: 32px; padding: 0 6px; border: 0; color: #a0aca6; background: none; font-size: 10px; cursor: pointer; }
.child-safety-report { min-height: 44px; margin-left: auto; padding: 8px 12px; border: 1px solid rgba(255,190,120,.55); border-radius: 999px; color: #ffe2bd; background: rgba(114,57,20,.55); font: inherit; font-weight: 800; cursor: pointer; }
.child-safety-report[hidden] { display: none; }
.transcript { height: 110px; overflow-y: auto; padding-right: 6px; scrollbar-color: #526059 transparent; scrollbar-width: thin; }
.transcript.collapsed { height: 0; }
.transcript p { display: grid; margin: 6px 0; grid-template-columns: 60px 1fr; gap: 8px; font-size: 11px; line-height: 1.5; }
.transcript b { color: var(--mint); font-weight: 900; text-align: right; }
.transcript span { color: #b7c0bb; }
.teacher-line b { color: var(--amber); }
.system-line b { color: #748079; }
.teacher-form { position: relative; display: flex; min-width: 0; align-items: center; justify-content: center; gap: 8px; pointer-events: auto; }
.input-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.voice-turn { display: grid; width: 52px; height: 52px; min-height: 52px; padding: 5px; place-items: center; border: 1px solid rgba(85,124,103,.42); border-radius: 50%; background: rgba(245,249,238,.94); box-shadow: 0 6px 18px rgba(0,0,0,.2); transition: border-color .2s, background .2s, transform .2s; }
.voice-turn > div { position: fixed; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.voice-turn strong, .voice-turn small { display: block; }
.voice-turn strong { color: #eef6f1; font-size: calc(14px * var(--font-scale)); }
.voice-turn small { margin-top: 4px; color: #b1bdb7; font-size: calc(11px * var(--font-scale)); }
.voice-orb { display: flex; width: 42px; height: 42px; padding: 9px; align-items: center; justify-content: center; gap: 3px; flex: 0 0 auto; border-radius: 50%; background: rgba(154,216,184,.14); box-shadow: inset 0 0 0 1px rgba(154,216,184,.25); }
.voice-orb i { width: 3px; height: 9px; border-radius: 3px; background: var(--mint); }
.voice-orb i:nth-child(2), .voice-orb i:nth-child(3) { height: 17px; }
.voice-turn[data-state="listening"], .voice-turn[data-state="hearing"] { border-color: rgba(154,216,184,.68); background: linear-gradient(135deg,rgba(86,177,131,.2),rgba(255,255,255,.045)); }
.voice-turn[data-state="listening"] .voice-orb, .voice-turn[data-state="hearing"] .voice-orb { box-shadow: 0 0 0 7px rgba(154,216,184,.08), inset 0 0 0 1px rgba(154,216,184,.45); }
.voice-turn[data-state="hearing"] .voice-orb i { animation: voiceWave .55s ease-in-out infinite alternate; }
.voice-turn[data-state="hearing"] .voice-orb i:nth-child(2) { animation-delay: -.25s; }
.voice-turn[data-state="hearing"] .voice-orb i:nth-child(3) { animation-delay: -.42s; }
.voice-turn[data-state="student-speaking"] { border-color: rgba(239,180,95,.55); background: rgba(239,180,95,.11); }
.voice-turn[data-state="student-speaking"] .voice-orb { background: rgba(239,180,95,.17); }
.voice-turn[data-state="student-speaking"] .voice-orb i { background: var(--amber); animation: voiceWave .65s ease-in-out infinite alternate; }
.voice-turn[data-state="processing"] .voice-orb { animation: pulse .75s ease-in-out infinite; }
.voice-turn[data-state="error"] { border-color: rgba(239,126,112,.48); background: rgba(239,126,112,.10); }
.keyboard-fallback { position: relative; margin: 0; }
.keyboard-fallback summary { display: flex; min-height: 38px; padding: 0 12px; align-items: center; border: 1px solid rgba(79,112,94,.35); border-radius: 999px; color: #263e33; background: rgba(247,249,239,.92); box-shadow: 0 5px 16px rgba(0,0,0,.17); font-size: calc(10px * var(--font-scale)); font-weight: 900; cursor: pointer; user-select: none; list-style: none; }
.keyboard-fallback summary::-webkit-details-marker { display: none; }
.keyboard-fallback[open] summary { color: #173f2d; background: #e8f5e9; }
.keyboard-fallback .input-row { position: fixed; bottom: max(calc(var(--safe-bottom) + 72px),84px); left: 50%; width: min(520px,calc(100vw - 24px)); padding: 9px; border: 1px solid rgba(89,119,103,.36); border-radius: 13px; background: rgba(247,248,239,.97); box-shadow: 0 14px 34px rgba(0,0,0,.28); transform: translateX(-50%); }
.teacher-form textarea { width: 100%; height: 44px; min-height: 44px; max-height: 80px; padding: 11px 12px; resize: none; border: 1px solid rgba(71,105,87,.28); border-radius: 8px; outline: 0; color: #183126; background: #fffef8; font-size: 12px; line-height: 1.5; }
.teacher-form textarea:focus { border-color: rgba(65,141,102,.62); background: #fff; box-shadow: 0 0 0 3px rgba(73,145,109,.12); }
.teacher-form textarea::placeholder { color: #6d7d74; }
.send-button { min-width: 110px; min-height: 44px; padding: 0 13px; border: 0; border-radius: 8px; color: #112019; background: linear-gradient(135deg,#a8dfc2,#70b994); font-size: 12px; font-weight: 900; cursor: pointer; touch-action: manipulation; }
.send-button kbd { margin-left: 6px; color: rgba(12,32,22,.5); font-family: inherit; font-size: 7px; }
.send-button:disabled { filter: grayscale(.8); opacity: .55; cursor: wait; }
.suggestions { display: none !important; }
.suggestions button { min-height: 44px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; color: #bcc6c1; background: rgba(255,255,255,.045); font-size: 11px; font-weight: 800; white-space: nowrap; cursor: pointer; touch-action: manipulation; }
.suggestions button:hover { color: #dbe2de; border-color: rgba(154,216,184,.28); }
.ai-indicator { position: fixed; bottom: max(var(--safe-bottom),18px); left: max(var(--safe-left),18px); display: block; pointer-events: none; }
.ai-indicator > i, .ai-indicator > span, .ai-indicator > b { display: none; }
.ai-indicator .child-safety-report:not([hidden]) { display: block; pointer-events: auto; }
.ai-indicator i { width: 6px; height: 6px; border-radius: 50%; background: #718078; }
.ai-indicator i.active { background: var(--mint); box-shadow: 0 0 0 5px rgba(154,216,184,.09); animation: pulse .8s infinite; }
.ai-indicator b { margin-left: auto; color: #849089; font-weight: 700; }

.game-dialog { width: min(800px, calc(100vw - 30px)); padding: 0; border: 1px solid rgba(255,255,255,.17); border-radius: 15px; color: var(--ink); background: linear-gradient(145deg,#14201e,#0a1211); box-shadow: 0 30px 90px rgba(0,0,0,.65); }
.game-dialog::backdrop { background: rgba(2,8,7,.78); backdrop-filter: blur(10px); }
.game-dialog form { padding: clamp(24px,4vw,45px); }
.game-dialog h2 { max-width: 650px; margin: 0; font-size: clamp(27px,3.2vw,44px); line-height: 1.2; letter-spacing: -.025em; }
.game-dialog form > p { max-width: 680px; margin: 13px 0 22px; color: #aeb8b2; font-size: 12px; line-height: 1.75; }
.student-brief { display: grid; margin: 18px 0; grid-template-columns: repeat(4,1fr); gap: 9px; }
.student-brief article { display: flex; min-width: 0; height: 80px; padding: 7px; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.035); }
.student-brief img { width: 48%; height: 100%; object-fit: contain; }
.student-brief div { display: flex; min-width: 0; flex-direction: column; }
.student-brief strong { font-size: 11px; }
.student-brief span { margin-top: 3px; color: #89958f; font-size: 7px; line-height: 1.4; }
.briefing-note { display: flex; margin: 18px 0; padding: 12px 14px; align-items: center; gap: 13px; border-left: 3px solid var(--amber); background: rgba(239,180,95,.08); }
.briefing-note b { color: var(--amber); font-size: 9px; letter-spacing: .1em; }
.briefing-note span { color: #bcc5c0; font-size: 10px; }
.report-hero { display: flex; margin: 18px 0; gap: 12px; }
.report-hero > div { display: flex; min-width: 150px; padding: 14px 18px; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.04); }
.report-hero span { color: #89958f; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.report-hero strong { color: var(--mint); font-size: 47px; line-height: 1; }
.report-hero b { margin-top: 4px; color: var(--amber); font-size: 30px; line-height: 1; }
.report-hero i { color: #7f8a84; font-size: 9px; font-style: normal; }
.report-objectives { display: grid; margin: 16px 0; grid-template-columns: repeat(3,1fr); gap: 7px; }
.report-objectives div { padding: 9px; border-radius: 7px; color: #b8c2bd; background: rgba(255,255,255,.045); font-size: 9px; }
.report-objectives .passed { color: var(--mint); }
.report-objectives .missed { color: #e8bd76; }
.report-students { display: grid; gap: 7px; }
.report-students > div { display: grid; grid-template-columns: 55px 1fr 56px; align-items: center; gap: 9px; }
.report-students strong, .report-students b { font-size: 9px; }
.report-students b { color: #a7b1ac; text-align: right; }
.report-students span { height: 4px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.09); }
.report-students i { display: block; height: 100%; background: linear-gradient(90deg,#4e9274,var(--mint)); }
.report-actions { display: flex; margin-top: 24px; justify-content: flex-end; gap: 9px; }

.class-buddy {
  position: fixed;
  top: auto;
  left: auto;
  right: max(var(--safe-right), 22px);
  bottom: max(var(--safe-bottom), 88px);
  z-index: 220;
  width: clamp(112px, 10.5vw, 150px);
  aspect-ratio: 2 / 3;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  color: #eef2ef;
  background: transparent;
  transition: opacity .2s ease;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  outline: none;
}

.class-buddy:focus-visible .buddy-avatar::after {
  content: "";
  position: absolute;
  inset: 9% 17% 4%;
  border: 2px solid rgba(154,216,184,.92);
  border-radius: 48% 48% 28% 28%;
  box-shadow: 0 0 0 4px rgba(8,18,15,.68);
}

.class-buddy.is-moving {
  transition: left var(--buddy-move-duration, 950ms) cubic-bezier(.32,.72,.25,1), top var(--buddy-move-duration, 950ms) cubic-bezier(.32,.72,.25,1), opacity .2s ease;
}

.class-buddy[data-state] .buddy-avatar { animation: none; }

.class-buddy.dragging,
.class-buddy:active { cursor: grabbing; }

.class-buddy.dragging {
  transition: none;
  opacity: .92;
}

.buddy-shell {
  position: relative;
  width: 100%;
  height: 100%;
}

.buddy-avatar {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: center bottom;
  will-change: transform;
}

.class-buddy[data-facing="right"] .buddy-avatar {
  scale: -1 1;
}

.buddy-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform: scale(1.04);
  transform-origin: center bottom;
  transition: transform .18s ease;
  will-change: transform;
  pointer-events: none;
  filter: drop-shadow(0 12px 9px rgba(0,0,0,.35)) drop-shadow(0 2px 1px rgba(255,255,255,.12));
}

.buddy-avatar img.pose-enter { animation: characterPoseIn .2s cubic-bezier(.2,.75,.25,1) both; }

.buddy-name {
  position: absolute;
  left: 50%;
  bottom: 0;
  min-width: max-content;
  padding: 5px 10px 5px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  color: #f5faf7;
  background: rgba(9,20,17,.84);
  box-shadow: 0 5px 14px rgba(0,0,0,.28);
  font-size: calc(10px * var(--font-scale));
  font-weight: 900;
  line-height: 1;
  letter-spacing: .05em;
  text-shadow: 0 1px rgba(0,0,0,.42);
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.character-voice-live {
  position: fixed;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}
.character-voice-live[hidden] { display: none; }

.class-buddy[data-state="walking"] .buddy-avatar {
  transform-origin: center bottom;
}

.class-buddy.is-wiping-board { pointer-events: none; }
.class-buddy.is-wiping-board .buddy-avatar { animation: buddyWipeBoard .84s ease-in-out infinite !important; }
.class-buddy.is-wiping-board .buddy-avatar img { filter: drop-shadow(0 12px 9px rgba(0,0,0,.35)) drop-shadow(0 0 10px rgba(242,235,198,.35)); }
.class-buddy.is-wiping-board .buddy-name { opacity: 0; }
.class-buddy.is-wiping-board.is-moving { transition-timing-function: cubic-bezier(.42,0,.58,1); }
.class-buddy.casting-award .buddy-avatar { animation: buddyMagicCast 1.05s cubic-bezier(.2,.75,.25,1) both !important; }
.class-buddy.casting-award .buddy-avatar img { filter: drop-shadow(0 12px 9px rgba(0,0,0,.35)) drop-shadow(0 0 17px rgba(255,222,97,.78)); }
.class-buddy.casting-award .buddy-avatar::before {
  content: "✦";
  position: absolute;
  z-index: 3;
  top: 16%;
  left: 12%;
  display: grid;
  width: 31px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255,249,187,.85);
  border-radius: 50%;
  color: #fff4a8;
  background: radial-gradient(circle,rgba(255,230,95,.82),rgba(255,193,55,.22) 58%,transparent 70%);
  box-shadow: 0 0 18px rgba(255,221,80,.88),0 0 38px rgba(133,235,185,.48);
  font-size: 20px;
  line-height: 1;
  animation: buddyMagicOrb .7s ease-in-out 2 alternate;
}

.class-buddy[data-classroom-active="true"] { width: clamp(90px,8vw,108px); }

.class-buddy[data-dialog-open="true"] {
  top: auto !important;
  right: max(var(--safe-right), 18px) !important;
  bottom: max(var(--safe-bottom), 18px) !important;
  left: auto !important;
  width: clamp(96px, 9vw, 118px);
}

@keyframes characterPoseIn {
  from { opacity: .35; }
  to { opacity: 1; }
}

@keyframes studentGreeting {
  0% { transform: translateY(2px) scaleY(.995); }
  32% { transform: translateY(-4px) scaleY(1.012); }
  68% { transform: translateY(-2px) scaleY(1.004); }
  100% { transform: translateY(0) scaleY(1); }
}

@keyframes studentVolunteer {
  0% { transform: translateY(1px) scale(.996); }
  38% { transform: translateY(-3px) scale(1.008); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes studentCalled {
  0% { transform: translateY(1px) scaleY(.99); }
  34% { transform: translateY(-5px) scaleY(1.012); }
  72% { transform: translateY(-1px) scaleY(1.004); }
  100% { transform: translateY(0) scaleY(1); }
}

@keyframes studentSpeaking {
  0% { transform: translateY(0) rotate(0); }
  28% { transform: translateY(-2px) rotate(-.35deg); }
  63% { transform: translateY(-1px) rotate(.28deg); }
  100% { transform: translateY(0) rotate(0); }
}

@keyframes studentCelebrate {
  0% { transform: translateY(0) scale(1); }
  28% { transform: translateY(-7px) scale(1.018); }
  52% { transform: translateY(-2px) scale(.998); }
  76% { transform: translateY(-4px) scale(1.008); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes studentRelieved {
  0% { transform: translateY(-2px) scaleY(1.01); }
  46% { transform: translateY(2px) scaleY(.992); }
  100% { transform: translateY(0) scaleY(1); }
}

@keyframes studentThinking {
  0% { transform: rotate(0) translateY(0); }
  38% { transform: rotate(-.75deg) translateY(1px); }
  72% { transform: rotate(-.35deg) translateY(0); }
  100% { transform: rotate(0) translateY(0); }
}

@keyframes studentApologize {
  0% { transform: translateY(0) scaleY(1); }
  42% { transform: translateY(3px) scaleY(.988); }
  76% { transform: translateY(1px) scaleY(.996); }
  100% { transform: translateY(0) scaleY(1); }
}

@keyframes studentNod {
  0%,100% { transform: translateY(0) scaleY(1); }
  28% { transform: translateY(2px) scaleY(.993); }
  50% { transform: translateY(-1px) scaleY(1.004); }
  72% { transform: translateY(1px) scaleY(.997); }
}

@keyframes studentLookBoard {
  0%,100% { transform: rotate(0) scaleX(1); }
  36%,68% { transform: rotate(-.65deg) scaleX(.996); }
}

@keyframes studentSettle {
  0%,100% { transform: translateY(0) scaleY(1); }
  32% { transform: translateY(2px) scaleY(.994); }
  66% { transform: translateY(-1px) scaleY(1.004); }
}

@keyframes studentBreathe {
  0%,100% { transform: scaleY(1); }
  48% { transform: scaleY(1.008); }
}

@keyframes buddyWipeBoard {
  0%,100% { transform: translateY(0) scaleY(1); }
  45% { transform: translateY(-2px) scaleY(1.006); }
  72% { transform: translateY(1px) scaleY(.997); }
}

@keyframes buddyMagicCast {
  0% { transform: translateY(0) rotate(0); }
  24% { transform: translateY(-8px) rotate(-5deg) scale(1.03); }
  52% { transform: translate(5px,-12px) rotate(7deg) scale(1.06); }
  78% { transform: translate(-2px,-5px) rotate(-2deg) scale(1.02); }
  100% { transform: translateY(0) rotate(0); }
}

@keyframes buddyMagicOrb {
  from { opacity: .45; transform: scale(.52) rotate(-35deg); }
  to { opacity: 1; transform: scale(1.28) rotate(45deg); }
}

@keyframes boardChalkEraseFromRight {
  0% { opacity: 1; clip-path: inset(0 0 0 0); }
  82% { opacity: .46; }
  100% { opacity: 0; clip-path: inset(0 100% 0 0); }
}

@keyframes boardChalkEraseFromLeft {
  0% { opacity: 1; clip-path: inset(0 0 0 0); }
  82% { opacity: .46; }
  100% { opacity: 0; clip-path: inset(0 0 0 100%); }
}

@keyframes boardWipeTrail {
  0% { opacity: 0; transform: scaleX(.04); }
  18% { opacity: .72; }
  100% { opacity: .3; transform: scaleX(1); }
}

@keyframes boardEraserSweep {
  0% { top: 14%; left: 94%; opacity: 0; }
  2%,15%,19%,34%,39%,54%,59%,74%,79%,94% { opacity: 1; }
  15% { top: 14%; left: 6%; }
  19% { top: 31%; left: 6%; }
  34% { top: 31%; left: 94%; }
  39% { top: 48%; left: 94%; }
  54% { top: 48%; left: 6%; }
  59% { top: 65%; left: 6%; }
  74% { top: 65%; left: 94%; }
  79% { top: 80%; left: 94%; }
  94% { top: 80%; left: 6%; opacity: 1; }
  100% { top: 82%; left: 6%; opacity: 0; }
}

@keyframes boardDustTravel {
  0% { top: 14%; left: 94%; opacity: 0; transform: translate(-50%,-50%) translateY(0); }
  3%,13%,20%,32%,40%,52%,60%,72%,80%,92% { opacity: .78; transform: translate(-50%,-50%) translateY(4px); }
  15% { top: 14%; left: 6%; opacity: .18; transform: translate(-50%,-50%) translateY(10px); }
  19% { top: 31%; left: 6%; opacity: .2; }
  34% { top: 31%; left: 94%; opacity: .18; transform: translate(-50%,-50%) translateY(10px); }
  39% { top: 48%; left: 94%; opacity: .2; }
  54% { top: 48%; left: 6%; opacity: .18; transform: translate(-50%,-50%) translateY(10px); }
  59% { top: 65%; left: 6%; opacity: .2; }
  74% { top: 65%; left: 94%; opacity: .18; transform: translate(-50%,-50%) translateY(10px); }
  79% { top: 80%; left: 94%; opacity: .2; }
  94% { top: 80%; left: 6%; opacity: .12; transform: translate(-50%,-50%) translateY(12px); }
  100% { top: 84%; left: 6%; opacity: 0; transform: translate(-50%,-50%) translateY(18px); }
}

@keyframes boardChalkWrite {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(1px); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}

.selection-dialog { width: min(920px, calc(100vw - 30px)); }
.selection-dialog form { max-height: min(90vh,900px); overflow: auto; }
.curriculum-picker { display: grid; margin: 14px 0 9px; grid-template-columns: repeat(3,1fr); gap: 8px; }
.curriculum-picker label { display: grid; padding: 9px 10px; gap: 5px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); }
.curriculum-picker span { color: #89968f; font-size: calc(8px * var(--font-scale)); font-weight: 900; letter-spacing: .08em; }
.curriculum-picker select { width: 100%; min-height: 34px; padding: 0 8px; border: 0; border-radius: 6px; color: var(--ink); background: #1a2523; font-size: calc(10px * var(--font-scale)); font-weight: 800; }
.classmate-picker { margin: 11px 0; padding: 12px; border: 1px solid rgba(154,216,184,.2); border-radius: 10px; background: rgba(154,216,184,.035); }
.classmate-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.classmate-picker-heading > div:first-child { display: grid; gap: 3px; }
.classmate-picker-heading strong { font-size: calc(13px * var(--font-scale)); }
.classmate-picker-heading span { color: var(--mint); font-size: calc(9px * var(--font-scale)); font-weight: 800; }
.classmate-presets { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.classmate-presets button { min-height: 34px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; color: #c4cec9; background: rgba(255,255,255,.04); font-size: calc(9px * var(--font-scale)); font-weight: 900; cursor: pointer; }
.classmate-presets button.active { color: #102019; border-color: transparent; background: var(--mint); }
.classmate-grid { display: grid; margin-top: 10px; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 7px; }
.classmate-card { position: relative; display: grid; min-width: 0; min-height: 90px; padding: 6px 4px 7px; place-items: center; gap: 3px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; color: #8d9993; background: rgba(255,255,255,.025); cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
.classmate-card:hover { transform: translateY(-2px); }
.classmate-card img { width: 100%; height: 58px; object-fit: contain; filter: grayscale(.78) brightness(.72); opacity: .66; }
.classmate-card span { overflow: hidden; max-width: 100%; font-size: calc(9px * var(--font-scale)); font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.classmate-card.active { color: var(--ink); border-color: rgba(154,216,184,.55); background: rgba(154,216,184,.11); box-shadow: 0 0 0 1px rgba(154,216,184,.1) inset; }
.classmate-card.active img { filter: none; opacity: 1; }
.classmate-card.active::after { content: "✓"; position: absolute; top: 5px; right: 5px; display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; color: #102019; background: var(--mint); font-size: 11px; font-weight: 900; }
.classmate-picker-hint { margin: 7px 0 0 !important; color: #8d9993 !important; font-size: calc(8px * var(--font-scale)) !important; line-height: 1.45 !important; }
.classmate-name-editor { margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.1); }
.classmate-name-editor summary { width: max-content; color: #cbd8d1; font-size: calc(9px * var(--font-scale)); font-weight: 900; cursor: pointer; }
.classmate-name-editor > p { margin: 7px 0 8px !important; color: #89968f !important; font-size: calc(8px * var(--font-scale)) !important; line-height: 1.5 !important; }
.classmate-name-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.classmate-name-grid label { display: grid; min-width: 0; padding: 7px; gap: 5px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.025); }
.classmate-name-grid label > span { overflow: hidden; color: #9aa7a0; font-size: calc(8px * var(--font-scale)); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.classmate-name-grid input { width: 100%; min-width: 0; height: 34px; padding: 0 8px; border: 1px solid rgba(255,255,255,.13); border-radius: 6px; outline: 0; color: #edf4f0; background: #15201d; font: 800 calc(10px * var(--font-scale))/1 system-ui,sans-serif; }
.classmate-name-grid input:focus { border-color: rgba(154,216,184,.65); box-shadow: 0 0 0 3px rgba(154,216,184,.08); }
.classmate-name-grid input.is-renamed { color: #aee7ca; border-color: rgba(154,216,184,.35); }
.classmate-name-actions { display: flex; min-height: 36px; margin-top: 7px; align-items: center; gap: 10px; }
.classmate-name-actions button { min-height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; color: #bdc8c2; background: rgba(255,255,255,.04); font-size: calc(8px * var(--font-scale)); font-weight: 800; cursor: pointer; }
.classmate-name-actions span { color: var(--mint); font-size: calc(8px * var(--font-scale)); }
.curriculum-source { margin: 0 0 11px; padding: 7px 10px; border-left: 2px solid var(--mint); color: #96a39c; background: rgba(154,216,184,.045); font-size: calc(8px * var(--font-scale)); line-height: 1.45; }
.lesson-search { margin: 0 0 11px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.025); }
.lesson-search label { display: grid; gap: 7px; }
.lesson-search span { color: #89968f; font-size: calc(8px * var(--font-scale)); font-weight: 900; letter-spacing: .08em; }
.lesson-search-row { display: grid; gap: 8px; grid-template-columns: minmax(0,1fr) auto auto auto; align-items: center; }
.lesson-search-row input { min-height: 42px; width: 100%; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #15201d; color: var(--ink); font: inherit; }
.lesson-search-row button { min-width: 84px; white-space: nowrap; }
.lesson-search-status { margin: 8px 0 0; min-height: 16px; color: #97a39d; font-size: calc(8px * var(--font-scale)); line-height: 1.45; }
.course-library-panel { display: grid; margin: 2px 0 11px; padding: 12px 13px; grid-template-columns: minmax(220px,1fr) auto; align-items: center; gap: 8px 18px; border: 1px solid rgba(239,180,95,.28); border-radius: 10px; background: rgba(239,180,95,.055); }
.course-library-panel strong { font-size: calc(12px * var(--font-scale)); }
.course-library-panel p { margin: 4px 0 0; color: #a6afa9; font-size: calc(8px * var(--font-scale)); line-height: 1.5; }
.course-library-actions { display: flex; justify-content: flex-end; gap: 7px; }
.course-library-actions button, .service-setup-guide button { min-height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; color: #dce5e0; background: rgba(255,255,255,.055); font-size: calc(9px * var(--font-scale)); font-weight: 800; cursor: pointer; }
.course-library-actions .secondary-action { padding: 0 11px; border-color: rgba(154,216,184,.33); }
.course-library-panel .course-import-status { grid-column: 1 / -1; margin-top: 2px; color: #d3b882; }
.slot-tabs { display: flex; margin: 0 0 14px; gap: 7px; }
.slot-tabs button { padding: 8px 13px; border: 1px solid var(--line); border-radius: 7px; color: #9aa69f; background: rgba(255,255,255,.035); font-size: calc(10px * var(--font-scale)); font-weight: 800; cursor: pointer; }
.slot-tabs button.active { color: #102019; border-color: transparent; background: var(--mint); }
.lesson-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 9px; }
.lesson-card { position: relative; display: flex; min-height: 190px; padding: 15px; align-items: flex-start; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: rgba(255,255,255,.035); text-align: left; cursor: pointer; transition: transform .18s, border-color .18s, background .18s; }
.lesson-card:hover:not(:disabled) { border-color: rgba(154,216,184,.38); background: rgba(154,216,184,.07); transform: translateY(-3px); }
.lesson-card > b { color: rgba(255,255,255,.12); font-size: 32px; line-height: 1; }
.lesson-card > span { margin-top: auto; color: var(--mint); font-size: calc(8px * var(--font-scale)); font-weight: 900; letter-spacing: .08em; }
.lesson-card > strong { margin-top: 8px; font-size: calc(13px * var(--font-scale)); line-height: 1.45; }
.lesson-card > .lesson-context { margin-bottom: 6px; border-left: 2px solid rgba(154,216,184,.55); padding-left: 7px; color: #b8e7d2; font-size: calc(7px * var(--font-scale)); letter-spacing: .08em; text-transform: uppercase; }
.lesson-card > em { display: -webkit-box; margin-top: 8px; overflow: hidden; color: #7f8e86; font-size: calc(7px * var(--font-scale)); font-style: normal; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.lesson-card > small { margin-top: 11px; color: #89958f; font-size: calc(8px * var(--font-scale)); }
.lesson-card[data-scope-target="true"] { border-color: rgba(154,216,184,.55); box-shadow: 0 0 0 2px rgba(154,216,184,.2) inset; }
.lesson-empty { grid-column: 1 / -1; margin: 0; padding: 30px; border: 1px dashed var(--line); border-radius: 10px; color: #89968f; text-align: center; }
.lesson-card.locked { filter: grayscale(.8); opacity: .48; cursor: not-allowed; }
.settings-grid { display: grid; margin: 22px 0 8px; gap: 3px; }
.settings-grid label { display: grid; min-height: 48px; padding: 10px 13px; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); font-size: calc(12px * var(--font-scale)); }
.settings-grid input[type="range"] { width: 180px; accent-color: var(--mint); }
.settings-grid input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--mint); }
.settings-grid b { min-width: 42px; color: var(--mint); font-size: calc(10px * var(--font-scale)); text-align: right; }
.settings-note { color: #87938c !important; font-size: calc(10px * var(--font-scale)) !important; }
.voice-studio { margin: 15px 0 2px; padding: 14px; border: 1px solid rgba(239,180,95,.22); border-radius: 10px; background: rgba(239,180,95,.035); }
.voice-studio-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.voice-studio-heading h3 { margin: 0; font-size: calc(14px * var(--font-scale)); }
.voice-studio-heading p { margin: 5px 0 0; color: #8e9b94; font-size: calc(9px * var(--font-scale)); }
.voice-studio-heading button { min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; color: #d5ded9; background: rgba(255,255,255,.045); font-size: calc(8px * var(--font-scale)); font-weight: 850; cursor: pointer; }
.character-voice-grid { display: grid; margin-top: 12px; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.character-voice-card { display: grid; min-width: 0; padding: 8px; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; background: rgba(255,255,255,.025); }
.character-voice-card img { width: 38px; height: 46px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.25)); }
.character-voice-controls { display: grid; min-width: 0; grid-template-columns: minmax(0,1fr) auto; gap: 5px; }
.character-voice-controls strong { grid-column: 1 / -1; overflow: hidden; color: #e3ebe7; font-size: calc(9px * var(--font-scale)); text-overflow: ellipsis; white-space: nowrap; }
.character-voice-controls select { min-width: 0; height: 30px; padding: 0 6px; border: 1px solid rgba(255,255,255,.13); border-radius: 6px; color: #dfe8e3; background: #15201d; font-size: calc(8px * var(--font-scale)); }
.character-voice-controls button { width: 42px; min-height: 30px; padding: 0; border: 1px solid rgba(154,216,184,.3); border-radius: 6px; color: var(--mint); background: rgba(154,216,184,.08); font-size: calc(8px * var(--font-scale)); font-weight: 900; cursor: pointer; }
.character-voice-controls button:disabled { opacity: .55; cursor: wait; }
.character-voice-status { margin: 9px 0 0; color: #8e9b94; font-size: calc(8px * var(--font-scale)); }
.settings-dialog .report-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 8px; }
.settings-dialog .report-actions button { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 9px 10px; line-height: 1.35; white-space: normal; }
.settings-dialog .report-actions .primary-action { grid-column: 1 / -1; }
.service-status-panel { margin: 16px 0 2px; padding: 14px; border: 1px solid rgba(154,216,184,.2); border-radius: 10px; background: rgba(154,216,184,.04); }
.service-status-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.service-status-heading h3 { margin: 0; font-size: calc(14px * var(--font-scale)); }
.service-status-heading span { padding: 4px 8px; border-radius: 999px; color: #9fb0a7; background: rgba(255,255,255,.06); font-size: calc(8px * var(--font-scale)); font-weight: 800; }
.service-status-panel > p { margin: 9px 0 0; color: #8e9b94; font-size: calc(9px * var(--font-scale)); line-height: 1.55; overflow-wrap: anywhere; }
.service-status-grid { display: grid; margin-top: 11px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.service-status-grid span { display: flex; min-height: 38px; padding: 8px 10px; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; color: #aab5af; background: rgba(255,255,255,.025); font-size: calc(9px * var(--font-scale)); }
.service-status-grid b { color: #d4ddd8; font-size: calc(9px * var(--font-scale)); text-align: right; }
.service-status-grid b.ready { color: var(--mint); }
.service-status-grid b.missing { color: var(--amber); }
.service-setup-guide { margin-top: 12px; padding: 12px; border-radius: 9px; background: rgba(0,0,0,.18); }
.service-setup-guide > strong { color: #e7eee9; font-size: calc(11px * var(--font-scale)); }
.service-setup-guide .ai-setup-location { margin: 9px 0 0; padding: 9px 11px; border: 1px solid rgba(239,180,95,.3); border-radius: 8px; color: #f0dfb2; background: rgba(239,180,95,.07); font-size: calc(10px * var(--font-scale)); line-height: 1.55; }
.service-setup-guide ol { margin: 8px 0 10px; padding-left: 22px; color: #aab6af; font-size: calc(9px * var(--font-scale)); line-height: 1.7; }
.service-setup-guide code { padding: 2px 5px; border-radius: 4px; color: #c8f0dc; background: rgba(154,216,184,.08); }
.service-setup-guide > div { display: flex; flex-wrap: wrap; gap: 7px; }
.service-setup-guide > p { margin: 8px 0 0; color: #7f8c85; font-size: calc(8px * var(--font-scale)); line-height: 1.45; }
.parent-dialog { width: min(760px, calc(100vw - 24px)); }
.parent-fields { display: grid; margin: 20px 0; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.parent-fields > label { display: grid; padding: 13px; gap: 7px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.03); color: #aeb8b2; font-size: calc(10px * var(--font-scale)); }
.parent-fields select { width: 100%; min-height: 39px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: #16211f; font: inherit; }
.parent-fields .consent-row { display: flex; grid-column: 1 / -1; align-items: flex-start; gap: 11px; }
.consent-row input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--mint); }
.consent-row strong, .consent-row small { display: block; }
.consent-row strong { color: var(--ink); font-size: calc(12px * var(--font-scale)); }
.consent-row small { margin-top: 4px; color: #8f9b95; line-height: 1.55; }
.parent-note { display: flex; padding: 12px 14px; align-items: center; gap: 12px; border-left: 3px solid var(--amber); background: rgba(239,180,95,.08); }
.parent-note strong { flex: 0 0 auto; color: var(--amber); font-size: calc(9px * var(--font-scale)); }
.parent-note span { color: #aeb8b2; font-size: calc(9px * var(--font-scale)); line-height: 1.5; }
.commerce-dialog { width: min(820px,calc(100vw - 24px)); }
.commerce-status { margin: 18px 0 12px; padding: 12px 14px; border: 1px solid rgba(154,216,184,.25); border-radius: 9px; color: var(--mint); background: rgba(154,216,184,.07); font-size: calc(11px * var(--font-scale)); }
.commerce-products { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.family-recovery { margin: 14px 0; padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.035); }
.family-recovery h3 { margin: 0 0 7px; font-size: calc(14px * var(--font-scale)); }
.family-recovery p { margin: 0 0 10px; color: var(--muted); line-height: 1.55; }
.family-recovery label { display: grid; grid-template-columns: auto minmax(180px,1fr); align-items: center; gap: 10px; margin: 10px 0; }
.family-recovery input { width: 100%; padding: 10px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(0,0,0,.2); color: var(--text); font: inherit; text-transform: uppercase; }
.family-recovery-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.family-recovery output { color: var(--gold); font: 700 calc(13px * var(--font-scale))/1.5 ui-monospace,Consolas,monospace; letter-spacing: .04em; overflow-wrap: anywhere; }
.parent-consent-center { margin: 14px 0; padding: 14px; border: 1px solid rgba(154,216,184,.18); border-radius: 10px; background: rgba(154,216,184,.035); }
.parent-consent-center h3 { margin: 0 0 7px; font-size: calc(14px * var(--font-scale)); }
.parent-consent-center > p { margin: 0 0 10px; color: var(--muted); line-height: 1.55; }
.parent-consent-center label { display: grid; grid-template-columns: auto minmax(180px,1fr); align-items: center; gap: 10px; margin: 10px 0; }
.parent-consent-center input { width: 100%; padding: 10px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(0,0,0,.2); color: var(--text); font: inherit; }
.parent-consent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.commerce-product { display: grid; min-height: 150px; padding: 16px; align-content: start; gap: 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.035); }
.commerce-product h3 { margin: 0; font-size: calc(16px * var(--font-scale)); }
.commerce-product p { min-height: 42px; margin: 0; color: #9faaa4; font-size: calc(10px * var(--font-scale)); line-height: 1.55; }
.commerce-product .commerce-price { color: #f1dfae; font-size: calc(12px * var(--font-scale)); line-height: 1.45; }
.commerce-product button { min-height: 44px; margin-top: auto; border: 0; border-radius: 8px; color: #102019; background: var(--mint); font-weight: 900; cursor: pointer; }
.commerce-product button:disabled { color: #748079; background: #26312e; cursor: wait; }
.commerce-terms { margin-top: 12px; padding: 11px 14px; border-left: 3px solid var(--amber); background: rgba(239,180,95,.06); }
.commerce-terms p { margin: 4px 0; color: #98a39d; font-size: calc(9px * var(--font-scale)); line-height: 1.55; }
.parent-gate-dialog { width: min(540px,calc(100vw - 24px)); }
.parent-challenge { display: grid; margin: 20px 0 8px; grid-template-columns: 1fr 140px; align-items: center; gap: 12px; }
.parent-challenge span { padding: 13px 16px; border-radius: 8px; color: var(--amber); background: rgba(239,180,95,.09); font-size: 22px; font-weight: 900; text-align: center; letter-spacing: .08em; }
.parent-challenge input { width: 100%; height: 52px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: rgba(255,255,255,.06); font-size: 22px; font-weight: 900; text-align: center; }
.gate-error { margin: 8px 0 !important; color: #ef9e94 !important; }
.danger-action { margin-right: auto; padding: 11px 15px; border: 1px solid rgba(239,126,112,.34); border-radius: 7px; color: #ef9e94; background: rgba(117,45,40,.2); font-size: calc(10px * var(--font-scale)); font-weight: 900; cursor: pointer; }
.privacy-copy { display: grid; margin-top: 18px; gap: 8px; }
.privacy-copy p { margin: 0; padding: 11px 13px; border-left: 2px solid rgba(154,216,184,.38); color: #adb8b2; background: rgba(255,255,255,.025); font-size: calc(11px * var(--font-scale)); line-height: 1.65; }
.privacy-copy strong { color: var(--mint); }
.processor-list { display: grid; gap: 8px; margin: 14px 0; padding: 0; list-style: none; }
.processor-list li { padding: 10px 12px; border: 1px solid rgba(154,216,184,.22); border-radius: 10px; background: rgba(255,255,255,.025); color: #d8e4dd; line-height: 1.45; }
.microphone-disclosure-dialog p { line-height: 1.65; }
.ai-report-preview { margin: 16px 0; padding: 14px 16px; border: 1px solid rgba(154,216,184,.35); border-radius: 10px; color: #e4eee9; background: rgba(154,216,184,.07); font-size: calc(12px * var(--font-scale)); line-height: 1.55; }
.ai-report-category { display: grid; gap: 7px; margin: 14px 0; color: #c7d1cc; font-size: calc(11px * var(--font-scale)); }
.ai-report-category select { min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: #e9f0ed; background: #17211d; font: inherit; }
.high-contrast { --ink: #fff; --muted: #e2e7e4; --line: rgba(255,255,255,.3); --mint: #b8ffd6; --amber: #ffd080; }
.high-contrast .panel, .high-contrast .metric-strip, .high-contrast .objective-card { background: rgba(0,0,0,.94); }
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
.status-card p { font-size: calc(10px * var(--font-scale)); }
.objective-card li { font-size: calc(12px * var(--font-scale)); }
.transcript p { font-size: calc(11px * var(--font-scale)); }
.teacher-form textarea { font-size: calc(11px * var(--font-scale)); }
.game-dialog form > p { font-size: calc(12px * var(--font-scale)); }
.toast { position: fixed; z-index: 200; right: max(var(--safe-right), 24px); bottom: max(var(--safe-bottom), 24px); max-width: 360px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.17); border-radius: 9px; color: #e7ece9; background: rgba(11,19,18,.94); box-shadow: var(--shadow); font-size: 11px; line-height: 1.5; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .2s, transform .2s; }
.toast.visible { opacity: 1; transform: translateY(0); }
.reward-layer { position: fixed; z-index: 260; inset: 0; overflow: hidden; pointer-events: none; }
.reward-particle { position: absolute; left: var(--x); top: var(--y); color: var(--mint); font-size: 18px; font-style: normal; text-shadow: 0 3px 12px rgba(0,0,0,.35); animation: rewardFly 1.35s cubic-bezier(.18,.68,.25,1) both; }
.reward-particle.tone-amber { color: var(--amber); }
.reward-particle.tone-rainbow:nth-child(3n+1) { color: #8ee5c0; }
.reward-particle.tone-rainbow:nth-child(3n+2) { color: #ffd36f; }
.reward-particle.tone-rainbow:nth-child(3n) { color: #ef91ad; }
.reward-badge { position: absolute; padding: 9px 15px; border: 1px solid rgba(255,255,255,.42); border-radius: 99px; color: #14211d; background: var(--mint); box-shadow: 0 15px 35px rgba(0,0,0,.35); font-size: 13px; transform: translate(-50%,-50%); animation: rewardBadge 1.5s ease both; }
.reward-badge.tone-amber { background: var(--amber); }
.reward-badge.tone-rainbow { background: linear-gradient(135deg,#8ee5c0,#ffd36f,#ef91ad); }
.award-magic-particle {
  position: absolute;
  z-index: 2;
  color: #fff4a8;
  font-size: clamp(14px,1.6vw,23px);
  font-style: normal;
  line-height: 1;
  text-shadow: 0 0 8px #fff2a0,0 0 18px rgba(255,196,58,.9),0 3px 8px rgba(0,0,0,.28);
  animation: awardMagicFlight .82s cubic-bezier(.25,.68,.28,1) both;
}
.award-magic-particle:nth-of-type(3n) { color: #9cf0c8; text-shadow: 0 0 10px #c9ffe8,0 0 20px rgba(89,220,166,.82); }
.award-magic-landing {
  position: absolute;
  z-index: 3;
  display: grid;
  width: 44px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid rgba(255,246,173,.78);
  border-radius: 50%;
  color: #fff5a8;
  background: radial-gradient(circle,rgba(255,209,70,.86),rgba(239,126,73,.38) 52%,transparent 70%);
  box-shadow: 0 0 20px rgba(255,224,92,.92),0 0 38px rgba(154,216,184,.6);
  font: 950 23px/1 Georgia,serif;
  animation: awardMagicLanding .85s .5s ease-out both;
}
.award-magic-label {
  position: absolute;
  z-index: 4;
  max-width: 130px;
  padding: 6px 11px;
  overflow: hidden;
  border: 1px solid rgba(155,105,29,.42);
  border-radius: 999px;
  color: #4b3515;
  background: linear-gradient(145deg,#fff9dc,#f3d87e);
  box-shadow: 0 8px 20px rgba(0,0,0,.26),0 0 14px rgba(255,222,96,.48);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  animation: awardMagicLabel 1s .62s ease both;
}

@keyframes pulse { 50% { opacity: .45; transform: scale(.82); } }
@keyframes eventIn { from { opacity: 0; transform: translateY(-5px); } }
@keyframes badgeIn { from { opacity: 0; transform: translate(-50%,5px) scale(.92); } }
@keyframes hintIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes voiceWave { to { height: 25px; transform: scaleX(1.14); } }
@keyframes rewardFly { 0% { opacity: 0; transform: translate(0,12px) scale(.4) rotate(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)) scale(1.2) rotate(var(--spin)); } }
@keyframes rewardBadge { 0% { opacity: 0; transform: translate(-50%,-25%) scale(.7); } 18%,70% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-85%) scale(.92); } }
@keyframes awardMagicFlight {
  0% { opacity: 0; transform: translate(0,0) scale(.2) rotate(0); }
  16%,72% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--magic-dx),var(--magic-dy)) scale(1.18) rotate(300deg); }
}
@keyframes awardMagicLanding {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(-35deg); }
  44% { opacity: 1; transform: translate(-50%,-50%) scale(1.45) rotate(10deg); }
  72% { opacity: 1; transform: translate(-50%,-50%) scale(.92) rotate(-4deg); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.18) rotate(0); }
}
@keyframes awardMagicLabel {
  0% { opacity: 0; transform: translate(-50%,6px) scale(.72); }
  20%,72% { opacity: 1; transform: translate(-50%,-42px) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-60px) scale(.96); }
}
@keyframes studentAwardArrive {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.15) rotate(-25deg); }
  58% { opacity: 1; transform: translate(-50%,-50%) scale(1.35) rotate(8deg); }
  78% { transform: translate(-50%,-50%) scale(.9) rotate(-3deg); }
  100% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); }
}
@keyframes secretHint { 0%,78%,100% { opacity: .42; transform: scale(.82) rotate(0); } 86% { opacity: 1; transform: scale(1.22) rotate(20deg); } }
@keyframes fireflyDrift { 0% { opacity: 0; transform: translate(0,12px) scale(.5); } 22%,68% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--secret-dx),var(--secret-dy)) scale(1.15); } }
@keyframes globeOrbit { 0% { opacity: 0; transform: translate(-20px,8px) rotate(0) scale(.5); } 25%,72% { opacity: 1; } 100% { opacity: 0; transform: translate(34px,-30px) rotate(260deg) scale(1.1); } }
@keyframes constellationPoint { 0%,100% { opacity: 0; transform: scale(.2); } 30%,72% { opacity: 1; transform: scale(1); } }
@keyframes classroomStar { 0%,100% { opacity: 0; transform: translate(-50%,-50%) scale(.25) rotate(-18deg); } 30%,72% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(5deg); } }

@media (max-width: 1050px) {
  .mission-preview { display: none; }
  .hero-copy { width: min(650px,78vw); }
  .objective-card { width: 190px; }
  .student-stage { right: 5%; left: 5%; }
  .student { width: 15vw; }
  .class-buddy[data-dialog-open="true"] { display: none; }
}

@media (max-width: 780px) {
  body { overflow: auto; }
  .menu-view, .game-view { min-height: 740px; }
  .menu-header { height: calc(70px + var(--safe-top)); padding: var(--safe-top) max(var(--safe-right), 18px) 0 max(var(--safe-left), 18px); }
  .wordmark { font-size: 13px; }
  .network-badge { display: none; }
  .utility-button { display: inline-flex; min-height: 32px; padding: 0 8px; align-items: center; font-size: 9px; }
  .hero-copy { top: 46%; left: 24px; width: calc(100% - 48px); }
  .hero-copy h1 { font-size: clamp(43px,13vw,70px); }
  .hero-description { font-size: 13px; }
  .feature-line { gap: 12px; }
  .menu-footer { display: none; }
  .game-hud { height: calc(62px + var(--safe-top)); padding: var(--safe-top) max(var(--safe-right), 10px) 0 max(var(--safe-left), 10px); grid-template-columns: 36px 1fr auto; }
  .finish-button { display: none; }
  .lesson-heading strong { font-size: 11px; }
  .turn-counter { padding: 6px 8px; }
  .turn-counter span { display: none; }
  .metric-strip { top: calc(69px + var(--safe-top)); left: max(var(--safe-left), 8px); width: 128px; padding: 9px; }
  .objective-card { top: calc(69px + var(--safe-top)); right: max(var(--safe-right), 8px); width: 154px; padding: 9px; }
  .status-card { top: calc(173px + var(--safe-top)); width: calc(100% - 24px); }
  .board { display: none; }
  .scene-secret-globe { display: none; }
  .scene-secret-plant { top: 58%; left: 2%; }
  .student-stage { inset: 27% 1% 12%; }
  .student { width: 22vw; height: 58%; }
  .student-an { left: 0; }
  .student-yu { left: 25%; }
  .student-mei { left: 50%; }
  .student-tao { left: 75%; }
  .student-feng { left: 1%; }
  .student-chen { left: 26%; }
  .student-lan { left: 51%; }
  .student-bo { left: 76%; }
  .student-name-tag { top: 80%; max-width: 64%; padding: 1px 4px 1px 8px; font-size: 6px; }
  .student-award { top: calc(79% + var(--award-row,0) * 8px); width: 12px; }
  .teacher-console { bottom: max(var(--safe-bottom), 8px); }
  .transcript-wrap { grid-row: auto; height: 60px; padding: 0; border: 0; }
  .transcript { height: 40px; }
  .input-row { grid-template-columns: 1fr 76px; }
  .send-button { min-width: 0; }
  .send-button kbd { display: none; }
  .student-brief { grid-template-columns: repeat(2,1fr); }
  .report-objectives { grid-template-columns: 1fr; }
  .lesson-grid { grid-template-columns: repeat(2,1fr); max-height: none; overflow: visible; }
  .course-library-panel { grid-template-columns: 1fr; }
  .course-library-actions { justify-content: flex-start; flex-wrap: wrap; }
  .lesson-card { min-height: 150px; }
  .settings-grid input[type="range"] { width: 110px; }
  .character-voice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .settings-dialog .report-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-status-grid { grid-template-columns: 1fr; }
  .curriculum-picker { grid-template-columns: 1fr; }
  .classmate-picker-heading { align-items: flex-start; flex-direction: column; }
  .classmate-presets { justify-content: flex-start; }
  .classmate-grid { grid-template-columns: repeat(4,1fr); }
  .classmate-card { min-height: 82px; }
  .classmate-name-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .student-stage[data-class-size="2"] .student { width: 30vw; }
  .student-stage[data-class-size="2"] .student:nth-child(1) { left: 17%; }
  .student-stage[data-class-size="2"] .student:nth-child(2) { left: 55%; }
  .student-stage[data-class-size="3"] .student { width: 24vw; }
  .student-stage[data-class-size="3"] .student:nth-child(1) { left: 8%; }
  .student-stage[data-class-size="3"] .student:nth-child(2) { left: 38%; }
  .student-stage[data-class-size="3"] .student:nth-child(3) { left: 68%; }
  .student-stage[data-class-size="4"] .student { width: 22vw; }
  .student-stage[data-class-size="4"] .student:nth-child(1) { left: 1%; }
  .student-stage[data-class-size="4"] .student:nth-child(2) { left: 26%; }
  .student-stage[data-class-size="4"] .student:nth-child(3) { left: 51%; }
  .student-stage[data-class-size="4"] .student:nth-child(4) { left: 76%; }
  .student-stage[data-class-size="5"] .student { width: 21vw; }
  .student-stage[data-class-size="5"] .student:nth-child(1) { left: 20%; }
  .student-stage[data-class-size="5"] .student:nth-child(2) { left: 59%; }
  .student-stage[data-class-size="5"] .student:nth-child(3) { left: 5%; }
  .student-stage[data-class-size="5"] .student:nth-child(4) { left: 38%; }
  .student-stage[data-class-size="5"] .student:nth-child(5) { left: 71%; }
  .student-stage[data-class-size="7"] .student { width: 20vw; }
  .student-stage[data-class-size="7"] .student:nth-child(1) { left: 8%; }
  .student-stage[data-class-size="7"] .student:nth-child(2) { left: 40%; }
  .student-stage[data-class-size="7"] .student:nth-child(3) { left: 72%; }
  .student-stage[data-class-size="7"] .student:nth-child(4) { left: 0; }
  .student-stage[data-class-size="7"] .student:nth-child(5) { left: 26%; }
  .student-stage[data-class-size="7"] .student:nth-child(6) { left: 52%; }
  .student-stage[data-class-size="7"] .student:nth-child(7) { left: 78%; }
  .lesson-search-row { grid-template-columns: 1fr; }
  .parent-fields { grid-template-columns: 1fr; }
  .parent-fields .consent-row { grid-column: auto; }
  .commerce-products { grid-template-columns: 1fr; }
  .class-buddy {
    left: auto;
    right: max(var(--safe-right), 8px);
    bottom: max(var(--safe-bottom), 18px);
    width: clamp(86px, 22vw, 108px);
  }
  .buddy-name { padding: 4px 8px; font-size: calc(9px * var(--font-scale)); }
}

@media (max-width: 520px) and (orientation: portrait) {
  .settings-dialog .report-actions { grid-template-columns: 1fr; }
  .voice-studio-heading { align-items: stretch; flex-direction: column; }
  .character-voice-grid { grid-template-columns: 1fr; }
  .menu-actions { display: grid; grid-template-columns: 1fr; }
  .menu-actions > .primary-action, .menu-actions > .secondary-action { width: 100%; min-width: 0; }
  .menu-actions > .secondary-action { min-height: 48px; }
  .status-card { top: calc(264px + var(--safe-top)); width: calc(100% - 20px); min-height: 44px; padding: 9px 12px; }
  .status-card > span, .status-card > p { display: none; }
  .status-card strong { font-size: calc(13px * var(--font-scale)); text-align: center; }
}

@media (max-width: 360px) and (orientation: portrait) {
  .menu-header { padding-right: max(var(--safe-right), 12px); padding-left: max(var(--safe-left), 12px); }
  .wordmark { gap: 5px; font-size: 11px; letter-spacing: .1em; }
  .header-actions { gap: 5px; }
  .utility-button { padding: 0 6px; font-size: 8px; }
  .hero-copy { left: 20px; width: calc(100% - 40px); }
  .kicker { font-size: 9px; line-height: 1.5; letter-spacing: .15em; }
  .hero-description { margin: 20px 0 22px; }
}

@media (max-height: 560px) and (min-width: 781px) {
  .menu-view, .game-view { min-height: 0; }
  .menu-header { height: calc(62px + var(--safe-top)); padding: var(--safe-top) max(var(--safe-right), 32px) 0 max(var(--safe-left), 32px); }
  .wordmark { font-size: 15px; }
  .hero-copy { top: 58%; width: min(680px,78vw); transform: translateY(-50%); }
  .kicker { margin-bottom: 8px; font-size: 9px; }
  .hero-copy h1 { font-size: clamp(40px,5vw,58px); }
  .hero-description { margin: 12px 0 14px; font-size: 12px; line-height: 1.5; }
  .primary-action { min-width: 240px; padding: 10px 18px; }
  .secondary-action { padding: 10px 16px; }
  .feature-line { margin-top: 12px; }
  .mission-preview, .menu-footer { display: none; }

  .game-hud { height: calc(54px + var(--safe-top)); padding: var(--safe-top) max(var(--safe-right), 12px) 0 max(var(--safe-left), 12px); }
  .icon-button { width: 34px; height: 34px; }
  .turn-counter { padding: 4px 10px; }
  .turn-counter strong { font-size: 18px; }
  .finish-button { min-height: 32px; }
  .metric-strip { top: calc(60px + var(--safe-top)); left: max(var(--safe-left), 8px); width: 132px; padding: 8px; gap: 5px; }
  .metric.mastery { padding-top: 4px; }
  .objective-card { top: calc(60px + var(--safe-top)); right: max(var(--safe-right), 8px); width: 184px; padding: 8px; }
  .objective-card ol { margin-top: 4px; }
  .objective-card li { padding: 3px 0; }
  .event-alert { margin-top: 5px; padding: 6px; }
  .status-card { top: calc(60px + var(--safe-top)); width: min(430px,42vw); padding: 6px 11px; }
  .status-card strong { font-size: 13px; }
  .status-card p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .board { display: none; }
  .student-stage { inset: 24% 8% 12%; }
  .student { height: 53%; }
  .student-an, .student-yu, .student-mei, .student-tao { bottom: 12%; transform: scale(.76); }
  .student-name-tag { top: 80%; padding: 1px 4px 1px 8px; font-size: 6px; }
  .student-award { top: calc(79% + var(--award-row,0) * 8px); width: 12px; }
  .teacher-console { bottom: max(var(--safe-bottom), 6px); }
  .transcript { height: 82px; }
  .suggestions { margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}