:root {
  color-scheme: light;
  font-family: "Arial Rounded MT Bold", "PingFang SC", ui-rounded, system-ui, sans-serif;
  --blue: #45c7ff;
  --blue-dark: #159fe6;
  --blue-deep: #0875c9;
  --sky: #f8fdff;
  --sun: #ffd45c;
  --coral: #ff7a6f;
  --mint: #79dca9;
  --ink: #15334a;
  --glass-border: rgba(255,255,255,.88);
  --control-gradient: linear-gradient(145deg, #7cddff 0%, var(--blue) 55%, #1fb2f0 100%);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; min-width: 320px; min-height: 100%; }
body { margin: 0; min-height: 100vh; overflow: hidden; color: var(--ink); background: var(--sky); user-select: none; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
button:focus, button:focus-visible { outline: none; }
button:focus-visible, [tabindex]:focus-visible { outline: 4px solid rgba(24,150,226,.42); outline-offset: 3px; }

.lesson-shell { position: fixed; inset: 0; width: 100vw; height: 100vh; overflow: hidden; background: var(--sky); }
.lesson-header {
  position: absolute; inset: 0 0 auto; z-index: 30; height: 108px; display: flex; align-items: center;
  padding: max(14px,calc(env(safe-area-inset-top,0px) + 12px)) max(clamp(50px,5vw,88px),calc(env(safe-area-inset-right,0px) + 34px)) 10px max(clamp(50px,5vw,88px),calc(env(safe-area-inset-left,0px) + 34px));
  pointer-events: none;
}
.lesson-title { display: grid; gap: 2px; margin-right: 16px; line-height: 1.04; color: var(--blue); }
#course-code { font-size: clamp(25px,2.35vw,34px); letter-spacing: .02em; text-shadow: 0 2px 3px rgba(2,85,140,.14); }
.lesson-title span { color: var(--blue); font-size: clamp(15px,1.35vw,21px); font-weight: 900; letter-spacing: .04em; }
.header-actions { margin-left: auto; display: flex; gap: 18px; }
.lesson-header button { pointer-events: auto; }
.round-button, .header-back-button {
  border: 1px solid var(--glass-border); border-radius: 50%; color: white; background: var(--control-gradient);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -3px 0 rgba(20,148,220,.22), 0 8px 0 rgba(14,137,202,.23), 0 15px 28px rgba(3,111,183,.24);
  backdrop-filter: blur(20px) saturate(180%); cursor: pointer; transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.round-button { width: 76px; height: 76px; padding: 0; font-size: 26px; font-weight: 950; letter-spacing: 1px; }
.round-button svg { width: 40px; height: 40px; display: block; margin: auto; fill: currentColor; filter: drop-shadow(0 2px 3px rgba(2,85,140,.3)); }
.header-back-button { width: 66px; height: 66px; flex: 0 0 auto; margin-right: 15px; padding: 0; }
.header-back-button span { display: block; width: 30px; height: 26px; margin: auto; background: currentColor; clip-path: polygon(0 50%,55% 8%,55% 34%,100% 34%,100% 66%,55% 66%,55% 92%); font-size: 0; }
.round-button:hover, .header-back-button:hover { transform: translateY(-2px) scale(1.025); filter: brightness(1.06) saturate(1.1); }
.round-button:active, .header-back-button:active { transform: translateY(5px) scale(.98); box-shadow: inset 0 1px 0 white, 0 4px 0 rgba(14,137,202,.2), 0 8px 18px rgba(3,111,183,.18); }
.audio-button { position: relative; }
.sound-bars { display: none; position: absolute; left: 50%; top: 50%; align-items: end; gap: 5px; height: 26px; transform: translate(-50%,-50%); }
.audio-button.playing .replay-icon { display: none; }
.audio-button.playing .sound-bars { display: flex; }
.sound-bars i { display: block; width: 5px; height: 35%; border-radius: 5px; background: white; animation: bars .55s infinite alternate; }
.sound-bars i:nth-child(2) { height: 90%; animation-delay: .16s; }
.sound-bars i:nth-child(3) { height: 58%; animation-delay: .32s; }

.lesson-scene {
  position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(circle at 12% 18%,rgba(183,236,255,.58),transparent 28%), radial-gradient(circle at 91% 78%,rgba(203,245,255,.62),transparent 31%), #f8fdff;
}
.sky-shape { position: absolute; border-radius: 50%; filter: blur(1px); opacity: .48; }
.sky-one { width: 32vw; height: 32vw; left: -13vw; top: -13vw; background: #c8f1ff; }
.sky-two { width: 26vw; height: 26vw; right: -10vw; bottom: -11vw; background: #d9f7ff; }

.game-shell {
  --caption-height: 104px;
  --caption-nav-size: 108px;
  --caption-nav-gap: clamp(14px,2vw,28px);
  --caption-side-margin: clamp(44px,5vw,84px);
  /* The game bounds align with the outer edges of the header controls. */
  --bound-left: clamp(50px,5vw,88px);
  --bound-right: clamp(50px,5vw,88px);
  --bound-top: 128px;
  --caption-gap: 10px;
  --caption-bottom: 0px;
  --card-width: clamp(56px,8vw,144px);
  --card-inset: clamp(10px,2vw,36px);
  position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%;
}
.play-layout {
  position:absolute; left:var(--bound-left); right:var(--bound-right); top:var(--bound-top);
  bottom:calc(var(--caption-bottom) + var(--caption-height) + var(--caption-gap));
  display:block; min-width:0; min-height:0; container-type:size;
}
.mission-ticket {
  position: relative; justify-self: center; width: min(700px,88%); height: 72px; padding: 9px 70px 9px 82px; display: flex; align-items: center;
  border: 1px solid rgba(255,255,255,.94); border-radius: 25px; background: linear-gradient(145deg,rgba(255,255,255,.88),rgba(225,247,255,.68));
  box-shadow: 0 10px 30px rgba(5,103,164,.12),inset 0 1px 0 white; backdrop-filter: blur(20px); overflow: hidden;
}
.mission-ticket::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 66px; background: linear-gradient(145deg,#88e0ff,var(--blue)); }
.ticket-icon { position: absolute; left: 17px; top: 50%; z-index: 1; transform: translateY(-50%); font-size: 35px; filter: drop-shadow(0 2px 1px rgba(0,0,0,.08)); }
.ticket-copy { min-width: 0; display: grid; gap: 1px; }
.ticket-copy small { color: var(--blue-deep); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.ticket-copy strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #15334a; font-size: clamp(18px,2vw,27px); line-height: 1.05; }
.step-lights { position: absolute; right: 20px; top: 50%; display: flex; gap: 7px; transform: translateY(-50%); }
.step-lights i { width: 17px; height: 17px; border: 3px solid white; border-radius: 50%; background: #cedce3; box-shadow: 0 2px 5px rgba(5,88,136,.15); }
.step-lights i.active { background: #ffd04f; }
.step-lights i.done { background: var(--blue); }
.mission-ticket.success { animation: ticketPop .55s ease; }

.room-stage {
  position: absolute; left:50%; top:50%; width:min(100cqw,177.7778cqh); height:min(100cqh,56.25cqw); min-width:0; min-height:0; overflow: hidden; display: grid; grid-template-columns: 1fr; align-items: end; padding: 0; transform:translate(-50%,-50%);
  border: 1px solid rgba(255,255,255,.92); border-radius: 36px; background: url("./assets/living-room-bg.webp") center center / cover no-repeat;
  box-shadow: inset 0 1px 0 white,0 18px 42px rgba(7,93,146,.14); isolation: isolate;
}
.room-stage::before,.room-stage::after { display:none; }
.action-video { position:absolute; z-index:9; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; background:transparent; opacity:0; pointer-events:none; }
.action-video[hidden] { display:none; }
.room-stage.video-active .action-video { opacity:1; }
.room-stage.video-active .leo-zone,.room-stage.video-active .laundry-basket,.room-stage.video-active .basket-guide { visibility:hidden; }
.room-stage.video-active .choice-lane { visibility:hidden; }
.window-view { position: absolute; z-index: -1; left: 50%; top: 15px; width: min(62%,520px); height: 42%; transform: translateX(-50%); overflow: hidden; border: 10px solid white; border-radius: 30px; background: linear-gradient(#82d7ff,#e8f8ff); box-shadow: 0 8px 0 #b6dff0,0 16px 26px rgba(21,112,162,.1); }
.window-view::before, .window-view::after { content: ""; position: absolute; z-index: 2; background: white; }
.window-view::before { left: 50%; top: 0; width: 8px; height: 100%; transform: translateX(-50%); }
.window-view::after { left: 0; top: 53%; width: 100%; height: 8px; }
.sun { position: absolute; right: 10%; top: 10%; width: 48px; height: 48px; border-radius: 50%; background: #ffdc61; box-shadow: 0 0 0 11px rgba(255,220,97,.22); }
.cloud { position: absolute; width: 74px; height: 25px; border-radius: 22px; background: white; opacity: .85; }
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 35px; height: 35px; left: 12px; top: -16px; }
.cloud::after { width: 27px; height: 27px; right: 9px; top: -11px; }
.cloud-a { left: 9%; top: 32%; }
.cloud-b { right: 27%; top: 19%; transform: scale(.7); }

.action-pod { position: relative; align-self: end; height: min(42%,180px); min-height: 112px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.88); border-radius: 30px 30px 24px 24px; box-shadow: inset 0 1px 0 white,0 12px 28px rgba(7,93,146,.14); transition: .25s ease; }
.breakfast-pod { background: linear-gradient(155deg,#ddf7c7,#86d480); }
.action-pod.correct-pulse { animation: podPulse .65s ease; }
.pod-icon { position: absolute; top: -22px; left: 50%; width: 48px; height: 48px; display: grid; place-items: center; transform: translateX(-50%); border: 4px solid white; border-radius: 50%; color: white; background: var(--blue); box-shadow: 0 6px 14px rgba(7,93,146,.2); font-size: 25px; }
.breakfast-pod .pod-icon { background: #75c65c; }
.closet-art { width: 70%; height: 64%; display: flex; align-items: end; justify-content: space-evenly; padding: 16% 9% 9%; border: 5px solid rgba(255,255,255,.9); border-radius: 18px 18px 11px 11px; background: rgba(36,118,178,.56); box-shadow: inset 0 0 0 3px rgba(5,81,137,.15); }
.closet-art::before { content: ""; position: absolute; width: 46%; top: 32%; height: 5px; border-radius: 5px; background: white; }
.closet-art i { width: 24%; height: 55%; border: 3px solid white; border-top: 0; transform: skew(-5deg); opacity: .9; }
.tray-art { position: relative; width: 74%; height: 55%; border-bottom: 16px solid rgba(255,255,255,.92); border-radius: 0 0 50% 50%; }
.tray-art span { position: absolute; left: 8%; bottom: 6px; width: 53%; height: 45%; border: 7px solid white; border-radius: 50%; background: #ffe59b; }
.tray-art i { position: absolute; right: 7%; bottom: 9px; width: 25%; height: 52%; border: 6px solid white; border-radius: 4px 4px 12px 12px; background: #9be1f3; }
.tray-art b { position: absolute; right: 3%; bottom: 53%; width: 32%; height: 6px; border-radius: 5px; background: white; transform: rotate(-70deg); transform-origin: right; }
.collection-badges, .energy-orbs { position: absolute; left: 50%; bottom: 8px; display: flex; gap: 4px; transform: translateX(-50%); }
.collection-badges i, .energy-orbs i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.44); border: 1px solid rgba(255,255,255,.9); }
.collection-badges i.on { background: #fff08b; }
.energy-orbs i.on { background: #fff05d; box-shadow: 0 0 8px #fff05d; }

.leo-zone { position:absolute; left:50%; bottom:0; width:48%; height:100%; min-height:0; justify-self:center; align-self:end; display:grid; place-items:end center; transform:translateX(-50%); }
.leo-glow { position: absolute; left: 50%; bottom: 3%; width: 76%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle,rgba(255,243,168,.7),rgba(255,255,255,0) 68%); }
#leo-image { position: relative; z-index: 2; width: 100%; height: 100%; min-width:0; min-height:0; max-width:100%; max-height:100%; scale:var(--leo-scale,1.28); translate:var(--leo-translate-x,0%) var(--leo-translate-y,0%); transform-origin:center bottom; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 12px 11px rgba(42,81,102,.14)); transition: opacity .14s ease,transform .25s ease,translate .25s ease; -webkit-user-drag: none; }
#leo-image.celebrate { animation: leoHop .65s ease; }
.laundry-basket { --basket-width:14%; position:absolute; z-index:12; left:18%; bottom:3%; width:var(--basket-width); aspect-ratio:1.08; display:grid; place-items:end center; pointer-events:none; filter:drop-shadow(0 13px 11px rgba(71,62,48,.2)); transform-origin:center bottom; }
.laundry-basket > img:first-child { position:relative; z-index:3; display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; pointer-events:none; -webkit-user-drag:none; }
.laundry-basket .basket-clothing { display:none !important; }
.laundry-basket.ready { animation:basketReady .9s ease-in-out infinite alternate; }
.worn-clothing-handle { position:absolute; z-index:8; left:50%; top:58%; width:48%; height:72%; padding:0; transform:translate(-50%,-50%); border:0; border-radius:44% 44% 30% 30%; background:transparent; box-shadow:none; cursor:grab; touch-action:none; }
.worn-clothing-handle::after { content:none; }
.worn-clothing-handle img { width:1px; height:1px; opacity:0; pointer-events:none; -webkit-user-drag:none; }
.worn-clothing-handle.drag-source { cursor:grabbing; }
.basket-guide { position:absolute; z-index:13; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; animation:basketArrowPulse 1s ease-in-out infinite; }
.basket-guide path { fill:none; stroke:#ffd04f; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 2px 2px rgba(73,86,57,.34)); vector-effect:non-scaling-stroke; }
.basket-guide .basket-guide-head { fill:none; stroke:#ffd04f; stroke-width:3; }
.basket-guide[hidden] { display:none; }

.feedback-burst { display:none; pointer-events:none; }

.choice-lane { position:absolute; z-index:11; top:2%; bottom:2%; width:var(--card-width); min-height:0; }
.choice-lane--clothes { left:var(--card-inset); }
.choice-lane--food { right:var(--card-inset); }
.choice-rack { height:100%; min-height:0; display:grid; grid-template-rows:repeat(4,minmax(0,1fr)); gap:clamp(4px,.65vw,10px); padding:0; }
.choice-card {
  position: relative; min-width: 0; min-height:0; height: 100%; overflow: hidden; display: grid; place-items: center; padding: 5px;
  border: 3px solid rgba(255,255,255,.96); border-radius: clamp(14px,1.35vw,26px); background: rgba(255,255,255,.86); box-shadow: 0 9px 0 rgba(101,181,217,.16),0 15px 25px rgba(4,105,164,.13),inset 0 1px 0 white;
  cursor: grab; touch-action: none; transition: transform .18s ease,box-shadow .18s ease,filter .18s ease,border-color .18s ease,opacity .18s ease;
}
.choice-card::after { content: none; }
.choice-card img { position:absolute; left:12%; top:12%; width:76%; height:76%; object-fit:contain; object-position:center; filter:drop-shadow(0 6px 5px rgba(24,73,97,.12)); pointer-events:none; -webkit-user-drag:none; }
.choice-lane--clothes .choice-card img { left:5%; top:5%; width:90%; height:90%; }
.choice-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 12px 0 rgba(101,181,217,.16),0 19px 31px rgba(4,105,164,.16); }
.choice-card:active { transform: translateY(3px) scale(.98); }
.choice-card.drag-source { opacity: 0 !important; cursor: grabbing; box-shadow:none; animation:none; transition:none; }
.choice-card.wrong { animation: wrong .46s ease; border-color: #ff9389; }
.choice-card.correct { animation: cardFly .72s ease forwards; border-color: #7bd69c; pointer-events: none; }
.choice-card.hint { animation: hintGlow .9s ease infinite alternate; border-color: #ffd04f; }
.choice-card.used { opacity: 0; visibility:hidden; box-shadow:none; pointer-events: none; transition:none; }
.choice-rack.locked .choice-card { pointer-events: none; }

.drag-ghost {
  position: fixed; z-index: 120; width: clamp(78px,10vw,138px); height: clamp(78px,10vw,138px); display: grid; place-items: center;
  transform: translate(-50%,-50%) scale(1.06); pointer-events: none; filter: drop-shadow(0 16px 14px rgba(10,67,99,.28)); will-change: left,top,transform,opacity;
}
.drag-ghost img { width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.drag-ghost.arriving { filter: drop-shadow(0 12px 10px rgba(10,67,99,.24)); }
.drag-demo-ghost { z-index:122; opacity:0; }
.drag-demo-hand { position:fixed; z-index:123; width:clamp(64px,8vw,108px); height:auto; pointer-events:none; opacity:0; transform:translate(-53.5%,-88.7%) rotate(90deg); transform-origin:53.5% 88.7%; filter:drop-shadow(0 7px 8px rgba(55,71,84,.22)); user-select:none; -webkit-user-drag:none; }
.leo-zone.meal-action #leo-image { width:auto; max-width:100%; filter:drop-shadow(0 14px 12px rgba(42,81,102,.18)); transform-origin:50% 72%; }
.leo-zone.action-eat #leo-image.action-frame { animation:actionReveal .24s ease both,actionBite .48s .35s ease-in-out 3; }
.leo-zone.action-drink #leo-image.action-frame { animation:actionReveal .24s ease both,actionSip 1.2s .32s ease-in-out 1; }
#leo-image.action-exit { opacity:0; transform:scale(.97); }

.caption-pill { position: absolute; z-index: 18; left:50%; bottom:var(--caption-bottom); width: min(calc(100vw - ((var(--caption-side-margin) + var(--caption-nav-size) + var(--caption-nav-gap)) * 2)),calc(100vw - (env(safe-area-inset-left,0px) + env(safe-area-inset-right,0px) + ((22px + var(--caption-nav-size) + var(--caption-nav-gap)) * 2)))); height: var(--caption-height); min-height: var(--caption-height); padding: 4px 24px; transform:translateX(-50%); display: grid; place-items: center; align-content: center; overflow: hidden; border: 1px solid rgba(255,255,255,.38); border-radius: calc(var(--caption-height) / 2); background: linear-gradient(145deg,rgba(255,255,255,.12),rgba(67,190,244,.045)); box-shadow: inset 0 1px 0 rgba(255,255,255,.48),0 5px 16px rgba(3,111,183,.055); backdrop-filter: blur(1px) saturate(108%); -webkit-backdrop-filter: blur(1px) saturate(108%); transition: opacity .22s ease,transform .22s ease; pointer-events: none; }
.caption-pill strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #171717; font-size: clamp(24px,2.5vw,34px); line-height: 1; text-align: center; text-shadow: 0 1px 2px rgba(255,255,255,.98),0 0 8px rgba(255,255,255,.9); }
.caption-pill.hide-copy { opacity: 0; visibility: hidden; transform: translate(-50%,8px) scale(.97); }

.completion-popup { position:absolute; z-index:10030; inset:0; display:grid; place-items:center; padding:max(13px,2.5vw); background:rgba(3,73,119,.28); backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%); }
.completion-card { width:min(520px,66vh,86vw); padding:min(2.8vh,24px) min(4.2vh,36px); display:grid; justify-items:center; align-content:center; gap:min(1.2vh,10px); border:1px solid rgba(255,255,255,.9); border-radius:min(4.4vh,40px); text-align:center; background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(205,242,255,.82)); box-shadow:inset 0 1px 0 white,0 25px 70px rgba(2,83,139,.32); animation:completionPop .42s cubic-bezier(.2,.9,.25,1.18) both; }
.completion-sun { color:#ffc329; font-size:clamp(27px,7vh,58px); line-height:1; letter-spacing:.12em; }
.completion-card h2 { margin:min(.8vh,6px) 0; color:var(--blue-deep); font-size:clamp(24px,6.1vh,50px); line-height:1; }
.completion-card p { margin:min(1.2vh,10px) 0; font-size:clamp(11px,2.4vh,20px); line-height:1.25; }
.completion-audio-retry { width:100%; min-height:44px; padding:4px 7px; border:1px solid rgba(8,117,201,.3); border-radius:12px; color:var(--blue-deep); background:rgba(236,250,255,.8); font-size:12px; line-height:1.3; cursor:pointer; }
.completion-home-button { min-width:190px; height:54px; padding:0 24px; border:1px solid rgba(255,255,255,.94); border-radius:28px; color:white; background:var(--control-gradient); box-shadow:inset 0 1px 0 white,0 7px 0 #169edb,0 13px 24px rgba(3,111,183,.2); font-size:18px; font-weight:950; cursor:pointer; transition:transform .16s ease,filter .16s ease,box-shadow .16s ease; }
.completion-home-button:hover { transform:translateY(-2px); filter:brightness(1.05); }
.completion-home-button:active { transform:translateY(5px); box-shadow:inset 0 1px 0 white,0 2px 0 #169edb,0 7px 14px rgba(3,111,183,.18); }

.menu-scrim { position:absolute; z-index:29; inset:0; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:default; }
.course-menu {
  position: absolute; z-index: 30; inset: 0 0 0 auto; width: min(360px, 58vw); padding: 46px 26px 24px; overflow-y: auto; color: var(--blue-deep);
  background: linear-gradient(180deg, rgba(222,247,255,.82), rgba(151,222,252,.68)); border-left: 1px solid rgba(255,255,255,.86);
  box-shadow: -100vw 0 0 rgba(2,45,75,.34), -12px 0 34px rgba(2,98,163,.22);
  backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
}
.menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.menu-head strong { font-size: 26px; }
.menu-head button { width: 44px; height: 44px; border: 1px solid var(--glass-border); border-radius: 50%; color: var(--blue-deep); background: linear-gradient(145deg, rgba(220,246,255,.86), rgba(92,204,250,.34)); box-shadow: inset 0 1px 0 white, 0 7px 0 rgba(14,137,202,.12), 0 12px 20px rgba(3,111,183,.14); backdrop-filter: blur(18px); font-size: 28px; cursor: pointer; }
.menu-section-title { margin: 4px 0 10px; font-size: 18px; }
.chapter-panel, .settings-panel { border: 1px solid rgba(255,255,255,.78); border-radius: 22px; background: rgba(255,255,255,.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter: blur(18px); }
.chapter-panel { padding: 15px; margin-bottom: 12px; }
.chapter-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.chapter-grid button { width: min(48px, 100%); aspect-ratio: 1; min-height: 0; justify-self: center; display: grid; place-items: center; border: 1px solid var(--glass-border); border-radius: 50%; color: var(--blue-deep); background: linear-gradient(145deg, rgba(220,246,255,.9), rgba(92,204,250,.42)); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 7px 20px rgba(3,111,183,.14); backdrop-filter: blur(18px) saturate(170%); cursor: pointer; }
.chapter-grid button:hover, .chapter-grid button.active { background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 2px rgba(54,183,241,.66), inset 0 1px 0 white, 0 9px 24px rgba(3,111,183,.17); }
.chapter-grid button:disabled { opacity: .58; cursor: default; filter: saturate(.4); }
.chapter-grid b { display: grid; place-items: center; color: var(--blue-deep); font-size: 23px; line-height: 1; }
.settings-panel { padding: 4px 12px; }
.setting-row { margin: 0; padding: 10px 2px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.setting-row + .setting-row { border-top: 1px solid rgba(255,255,255,.7); }
.setting-row span { display: grid; gap: 2px; }
.setting-row b { font-size: 14px; }
.setting-row small { color: #5d8faa; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch i { display: block; width: 44px; height: 25px; padding: 3px; border: 1px solid rgba(255,255,255,.72); border-radius: 999px; background: rgba(124,172,195,.4); box-shadow: inset 0 1px 4px rgba(8,77,119,.14); cursor: pointer; transition: .2s; }
.switch i::after { content: ""; display: block; width: 19px; height: 19px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(0,0,0,.16); transition: .2s; }
.switch input:checked + i { background: rgba(38,177,242,.82); }
.switch input:checked + i::after { transform: translateX(19px); }
.menu-actions { display: grid; gap: 14px; margin-top: 16px; }
.restart-button { width: 100%; height: 58px; margin: 0 auto; border: 1px solid var(--glass-border); border-radius: 29px; color: var(--blue-deep); background: linear-gradient(145deg, rgba(220,246,255,.86), rgba(92,204,250,.4)); box-shadow: inset 0 1px 0 white, 0 7px 0 rgba(14,137,202,.12), 0 12px 22px rgba(3,111,183,.16); backdrop-filter: blur(20px) saturate(170%); font-weight: 900; cursor: pointer; }

@keyframes bars { to { height: 100%; } }
@keyframes float { 50% { transform: translateY(-12px) rotate(4deg); } }
@keyframes ticketPop { 45% { transform: scale(1.025); } }
@keyframes podPulse { 50% { transform: scale(1.07); filter: brightness(1.12); } }
@keyframes leoHop { 45% { transform: translateY(-15px) rotate(2deg); } }
@keyframes actionReveal { from { opacity:0; transform:scale(.94) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes actionBite { 0%,100% { transform:scale(1) rotate(0); } 48% { transform:scale(1.025,.985) rotate(-1deg); } 72% { transform:scale(.995,1.012) rotate(1deg); } }
@keyframes actionSip { 0%,100% { transform:translateY(0) rotate(0); } 42%,70% { transform:translateY(-4px) rotate(-1.5deg); } }
@keyframes feedback { 0% { opacity:0; transform:translate(-50%,-50%) scale(.5); } 35% { opacity:1; transform:translate(-50%,-66%) scale(1.12); } 75% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-95%) scale(.95); } }
@keyframes wrong { 20%,60% { transform:translateX(-11px) rotate(-2deg); } 40%,80% { transform:translateX(11px) rotate(2deg); } }
@keyframes cardFly { 35% { transform:translateY(-12px) scale(1.08); filter:brightness(1.1); } 100% { transform:translateY(-48px) scale(.72); opacity:0; } }
@keyframes hintGlow { to { box-shadow:0 0 0 8px rgba(255,208,79,.25),0 14px 28px rgba(255,171,33,.22); transform:translateY(-4px); } }
@keyframes basketReady { to { filter:drop-shadow(0 0 7px rgba(255,208,79,.5)) drop-shadow(0 14px 12px rgba(71,62,48,.22)); } }
@keyframes basketArrowPulse { 0%,100% { opacity:.72; } 50% { opacity:1; } }
@keyframes completionPop { from { opacity:0; transform:translateY(16px) scale(.84); } to { opacity:1; transform:translateY(0) scale(1); } }

@media (max-height: 720px) {
  .lesson-header { height: 72px; padding-top: 5px; padding-bottom: 5px; }
  .header-back-button { width: 50px; height: 50px; margin-right: 9px; }
  .header-back-button span { width: 24px; height: 22px; }
  .round-button { width: 56px; height: 56px; font-size: 20px; }
  .round-button svg { width: 30px; height: 30px; }
  #course-code { font-size: 21px; }.lesson-title span { font-size: 13px; }
  .game-shell { --bound-top:82px; --card-width:clamp(52px,7vw,84px); --card-inset:10px; --caption-gap:8px; }
  .mission-ticket { height:56px; border-radius:20px; padding-left:70px; }.mission-ticket::before { width:56px; }.ticket-icon { left:14px; font-size:28px; }.ticket-copy small { font-size:9px; }.ticket-copy strong { font-size:18px; }
  .room-stage { border-radius:20px; }
  .choice-rack { gap:5px; }.choice-card { border-width:2px; border-radius:16px; padding:3px; }
  .caption-pill { padding:4px 10px; }.caption-pill strong { font-size:clamp(16px,2.6vw,22px); }
}

@media (max-width: 720px) {
  .lesson-header { height: 64px; padding-left:max(22px,calc(env(safe-area-inset-left,0px) + 16px)); padding-right:max(22px,calc(env(safe-area-inset-right,0px) + 16px)); }
  .lesson-title { margin-right:6px; }.header-actions { gap:7px; }.header-back-button { width:44px; height:44px; margin-right:7px; }.round-button { width:48px; height:48px; }.round-button svg { width:26px; height:26px; }
  #course-code { font-size:18px; }.lesson-title span { font-size:11px; }
  .game-shell { --bound-left:max(22px,calc(env(safe-area-inset-left,0px) + 16px)); --bound-right:max(22px,calc(env(safe-area-inset-right,0px) + 16px)); --bound-top:80px; --caption-height:64px; --caption-nav-size:66px; --caption-nav-gap:8px; --caption-side-margin:34px; --card-width:56px; --card-inset:8px; --caption-gap:7px; }
  .mission-ticket { width:84%; height:51px; padding:6px 56px 6px 58px; border-radius:17px; }.mission-ticket::before { width:48px; }.ticket-icon { left:12px; font-size:23px; }.ticket-copy small { font-size:7px; }.ticket-copy strong { font-size:15px; }.step-lights { right:12px; gap:4px; }.step-lights i { width:12px; height:12px; border-width:2px; }
  .room-stage { grid-template-columns:1fr; padding:0; border-radius:22px; }
  .choice-rack { gap:4px; }.choice-card { border-width:2px; border-radius:13px; padding:3px; }
  .caption-pill { padding:4px 10px; }.caption-pill strong { font-size:clamp(16px,4vw,20px); }
  .course-menu { padding-top: 28px; }
}

@media (max-height:720px) and (orientation:landscape) {
  .room-stage { border-radius:20px; }
  .leo-zone { width:48%; height:100%; transform:translateX(-50%); }
  .choice-rack { grid-template-columns:1fr; grid-template-rows:repeat(4,minmax(0,1fr)); gap:5px; padding:0; }
  .choice-card { border-width:2px; border-radius:16px; padding:3px; }
  .caption-pill { padding:4px 10px; }
  .caption-pill strong { font-size:clamp(16px,2.6vw,22px); }
}

/* Phone landscape: fill the usable rectangle bounded by the header controls
   and the fixed bottom caption, while keeping every card inside the control edges. */
@media (orientation:landscape) and (max-height:720px) and (min-aspect-ratio:5/3) {
  .game-shell {
    --bound-top:82px;
    --card-width:clamp(52px,7vw,84px);
    --card-inset:10px;
    --caption-gap:8px;
  }
}

@media (orientation:landscape) and (min-width:721px) and (max-width:1600px) and (min-height:650px) and (max-aspect-ratio:8/5) {
  .game-shell { --caption-nav-size:90px; }
}

@media (max-height:600px) {
  .game-shell { --bound-top:70px; --caption-height:56px; --caption-nav-size:58px; --caption-nav-gap:8px; --caption-side-margin:36px; --caption-gap:6px; }
  .course-menu { width: min(320px, 52vw); padding: 8px 14px; }
  .menu-head { margin-bottom: 2px; }
  .menu-head strong { font-size: 20px; }
  .menu-head button { width: 32px; height: 32px; font-size: 21px; }
  .menu-section-title { margin: 0 0 5px; font-size: 15px; }
  .chapter-panel { padding: 7px 8px; margin-bottom: 7px; border-radius: 16px; }
  .chapter-grid { gap: 4px; }
  .chapter-grid button { width: 38px; }
  .chapter-grid b { font-size: 18px; }
  .settings-panel { padding: 2px 10px; border-radius: 16px; }
  .setting-row { padding: 5px 0; }
  .setting-row b { font-size: 12px; }
  .setting-row small { display: block; font-size: 9px; line-height: 1.05; }
  .menu-actions { gap: 10px; margin-top: 10px; }
  .restart-button { height: 44px; border-radius: 22px; font-size: 14px; }
}

@media (orientation: portrait) {
  .lesson-shell {
    inset:auto; top:0; left:100vw; left:100dvw; width:100vh; width:100dvh; height:100vw; height:100dvw;
    min-height:100vw !important; min-height:100dvw !important; height:100vw !important; height:100dvw !important;
    transform:rotate(90deg); transform-origin:top left;
  }
  .drag-demo-hand { transform:translate(-53.5%,-88.7%) rotate(180deg); }
  .drag-ghost img { transform:rotate(90deg); }
  .course-menu { width: min(320px, 52vw); padding: 8px 14px; }
  .menu-head { margin-bottom: 2px; }
  .menu-head strong { font-size: 20px; }
  .menu-head button { width: 32px; height: 32px; font-size: 21px; }
  .menu-section-title { margin: 0 0 5px; font-size: 15px; }
  .chapter-panel { padding: 7px 8px; margin-bottom: 7px; border-radius: 16px; }
  .chapter-grid { gap: 4px; }
  .chapter-grid button { width: 38px; }
  .chapter-grid b { font-size: 18px; }
  .settings-panel { padding: 2px 10px; border-radius: 16px; }
  .setting-row { padding: 5px 0; }
  .setting-row b { font-size: 12px; }
  .setting-row small { display: block; font-size: 9px; line-height: 1.05; }
  .menu-actions { gap: 10px; margin-top: 10px; }
  .restart-button { height: 44px; border-radius: 22px; font-size: 14px; }
}

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