:root {
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #4c543d; background: #548b70; font-synthesis: none;
  --ink: #4c543d; --green: #396c50; --cream: #fff8dc; --edge: #bc8c50;
  --dock-size: clamp(100px, 22dvh, 184px); --rail-size: clamp(64px, 8vw, 100px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
html, body, .app-shell { touch-action: pan-x pan-y; }
dialog { touch-action: pan-y; }
button, input, select { font: inherit; }
input, select, textarea { font-size: 16px; }
button { -webkit-appearance: none; appearance: none; border: 0; color: inherit; background: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .15s, background .15s; }
button:active { transform: translateY(3px) scale(.97); }
button:disabled { opacity: .55; cursor: wait; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #e77543; outline-offset: 3px; }
a { color: inherit; }
[hidden] { display: none !important; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; pointer-events: none; }
.app-shell {
  position: relative; isolation: isolate; width: 100%; height: 100dvh; overflow: hidden;
  display: grid; grid-template-rows: 64px minmax(0, 1fr) var(--dock-size); gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.app-shell::before, .rotate-screen::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #bce8d9 url('assets/8d28858def83fd66/garden-stage-v1.webp') center / cover no-repeat; }
.night .app-shell::before, .night .rotate-screen::before { background-image: url('assets/8d28858def83fd66/night-stage-v1.webp'); }
.game-hud { display: flex; align-items: center; gap: clamp(8px, 1.6vw, 24px); min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; margin: 0 auto 0 0; color: #fff9de; font-size: 23px; font-weight: 850; white-space: nowrap; text-shadow: 0 2px 0 #446b44, 1px 0 0 #446b44, -1px 0 0 #446b44; }
.brand small { display: block; font-size: 10px; letter-spacing: 5px; margin: 2px 0 0 3px; }
.brand-icon { display: grid; place-items: center; width: 48px; height: 48px; background: #fff4cc; color: #528358; font-size: 33px; border: 3px solid #d5aa65; border-radius: 17px; box-shadow: 0 4px 0 #875c37; transform: rotate(-8deg); text-shadow: none; }
.scene-picker { display: flex; gap: 3px; padding: 3px; background: #fff7dfed; border: 2px solid #bb945c; border-radius: 22px; box-shadow: 0 3px 0 #94623f; }
.scene-picker button { position: relative; display: grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: 16px; color: #9e875d; }
.scene-picker button[aria-pressed="true"] { background: #ffdf83; color: #695437; box-shadow: inset 0 -3px 0 #e8bd62; }
#night-lock { position: absolute; bottom: 0; right: 1px; font-size: 17px; line-height: 1; }
.hud-button { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border: 2px solid #bb945c; border-radius: 17px; background: #fff7dfed; box-shadow: 0 3px 0 #94623f; }
#display-button { font-size: 24px; gap: 0; padding: 2px; line-height: 1; }
#display-button small { font-size: 9px; line-height: 1.2; white-space: nowrap; }
.session-badge { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 92px; height: 42px; padding: 0 10px; background: #fff8e1e8; border: 2px solid #d2aa6e; border-radius: 22px; font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.session-badge > span:first-child { font-size: 22px; }
.volume { display: flex; align-items: center; gap: 5px; }
.volume button { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 48px; min-height: 52px; padding: 3px 0; border: 3px solid #d8bd89; border-radius: 15px; background: #fff8e5; color: #847d5e; box-shadow: 0 3px 0 #a8804d; }
.volume .volume-picture { width: 25px; height: 25px; }
.volume button > span:last-child { font-size: 9px; }
.volume button.is-selected, .volume button[aria-pressed="true"] { background: #ffe292; color: #315c42; border-color: #396c50; box-shadow: 0 3px 0 #396c50; }
.volume-check { position: absolute; right: -7px; top: -8px; width: 20px; height: 20px; line-height: 20px; border-radius: 50%; background: #396c50; color: white; font-size: 14px; font-weight: 800; opacity: 0; }
.is-selected .volume-check { opacity: 1; }
.music-room { min-height: 0; display: grid; grid-template-columns: var(--rail-size) minmax(0, 1fr) var(--rail-size); gap: 8px; }
.stage { position: relative; min-height: 0; min-width: 0; }
.child-actions { display: flex; flex-direction: column; align-self: center; gap: clamp(12px, 3dvh, 24px); padding-bottom: 14px; }
.child-button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 84px; padding: 2px 0 8px; border: 3px solid #c0975f; border-radius: 26px; background: #fff5d9f5; box-shadow: inset 0 3px 0 #fffdf4, 0 5px 0 #8d603d, 0 8px 12px #65492324; font-size: 12px; font-weight: 750; }
.child-button.play-button { border-color: #739b5c; background: #eff9d9; box-shadow: inset 0 3px 0 #fffdf4, 0 5px 0 #4a7146, 0 8px 12px #65492324; }
.child-button b { position: absolute; top: -7px; right: -5px; min-width: 25px; height: 25px; padding: 2px 5px; display: grid; place-items: center; border: 2px solid #fff4ce; border-radius: 50%; background: #8e7daf; color: white; font-size: 12px; }
.kawaii { display: block; flex: none; width: 68px; height: 68px; background: url('assets/8d28858def83fd66/controls-v1.webp') no-repeat; background-size: 300% 200%; pointer-events: none; }
.kawaii[data-icon="play"] { background-position: 0 0; }.kawaii[data-icon="pause"] { background-position: 50% 0; }.kawaii[data-icon="record"] { background-position: 100% 0; }
.kawaii[data-icon="library"] { background-position: 0 100%; }.kawaii[data-icon="help"] { background-position: 50% 100%; }.kawaii[data-icon="bye"] { background-position: 100% 100%; }
.guide-bar { display: flex; align-items: center; width: fit-content; max-width: 100%; margin: 7px auto 0; padding: 2px 5px; background: #fffbe9f2; border: 2px solid #e1c790; border-radius: 24px; box-shadow: 0 4px 0 #947c4933; }
.guide-bar p { margin: 0 4px; max-width: 350px; font-size: 12px; line-height: 1.55; }
#voice-replay, .demo-button { flex: none; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border-radius: 16px; }
.guide-bar .kawaii { width: 48px; height: 48px; }
.demo-button { gap: 3px; padding: 0 8px; margin-left: 6px; font-size: 10px; background: #f7e8ba; }
.demo-button > span:first-child { font-size: 24px; }
#voice-replay.speaking { background: #ffe391; }
.slots { position: absolute; left: 0; right: 0; bottom: 48px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: 2px; }
.slot { min-width: 0; text-align: center; position: relative; border-radius: 22px; }
.slot::before { content: ""; position: absolute; bottom: 15px; left: 7%; right: 7%; height: 24px; background: #aa6e3830; border: 2px solid #fff0b95c; border-radius: 50%; pointer-events: none; }
.slot.drop-target { background: #fff5b582; outline: 3px dashed #597f46; outline-offset: -3px; }
.stage-character { display: flex; align-items: center; justify-content: flex-end; flex-direction: column; position: relative; width: 100%; height: min(36dvh, 250px); padding: 0; border-radius: 22px; }
.sprite { display: block; background: url('assets/8d28858def83fd66/family-characters-v1.webp') no-repeat; background-size: 300% 200%; aspect-ratio: 1; width: 190px; max-width: 100%; flex: none; pointer-events: none; }
.sprite[data-id="kid"] { background-position: 0 0; }.sprite[data-id="dad"] { background-position: 50% 0; }.sprite[data-id="mom"] { background-position: 100% 0; }
.sprite[data-id="dog"] { background-position: 0 100%; }.sprite[data-id="friend"] { background-position: 50% 100%; }.sprite[data-id="robot"] { background-position: 100% 100%; }
/* Preserve the guest atlas proportions and its original transparent gutters. */
.sprite[data-id="gray"], .sprite[data-id="computer"], .sprite[data-id="vineria"] { background-image: url('assets/8d28858def83fd66/guest-characters-v1.webp'); background-size: 260% auto; background-position-y: 0; }
.sprite[data-id="gray"] { background-position-x: -4.1667%; }.sprite[data-id="computer"] { background-position-x: 50%; }.sprite[data-id="vineria"] { background-position-x: 104.1667%; }
.sprite:is([data-id="oren"], [data-id="pinki"], [data-id="sky"], [data-id="durple"], [data-id="simon"], [data-id="wenda"]) { background-image: url('assets/8d28858def83fd66/sprunki-friends-v1.webp'); }
.sprite[data-id="oren"] { background-position: 0 0; }.sprite[data-id="pinki"] { background-position: 50% 0; }.sprite[data-id="sky"] { background-position: 100% 0; }
.sprite[data-id="durple"] { background-position: 0 100%; }.sprite[data-id="simon"] { background-position: 50% 100%; }.sprite[data-id="wenda"] { background-position: 100% 100%; }
/* Fit the trio's generous transparent gutters to the existing cast's size and foot baseline. */
.sprite:is([data-id="raddy"], [data-id="clukr"], [data-id="garnold"]) { background-image: url('assets/8d28858def83fd66/sprunki-trio-v1.webp'); background-size: 250% 250%; }
.sprite[data-id="raddy"] { background-position: 9.375% 12%; }.sprite[data-id="clukr"] { background-position: 90.625% 12%; }.sprite[data-id="garnold"] { background-position: 9.375% 88.2%; }
.stage-character .sprite { width: min(135%, 33dvh, 240px); max-width: none; transform-origin: 50% 96%; will-change: transform; filter: drop-shadow(0 7px 3px #62492c23); }
.character-name { display: flex; align-items: center; gap: 5px; background: #fff8dfeb; border: 1px solid #d8ac6e; padding: 4px 10px; margin-top: -2px; border-radius: 20px; font-size: 12px; font-weight: 750; white-space: nowrap; z-index: 1; }
.character-name i { font-size: 11px; color: #6f9156; font-style: normal; }
.slot.muted .sprite { opacity: .5; }.slot.muted .character-name { background: #eee5d8; }
.stage-character { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.slot.solo .stage-character { border-radius: 32px; background: #fff3a977; box-shadow: 0 0 0 3px #f9ce68, 0 0 24px #ffe087; }
.slot.solo .sprite { opacity: 1; }.slot.solo .character-name { background: #ffeb9e; }
.slot.solo .character-name i { font-size: 0; }.slot.solo .character-name i::after { content: '👂'; font-size: 18px; }
.slot.solo-quiet { opacity: .4; }
.empty-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 75%; height: min(22dvh, 150px); margin-bottom: 12px; background: #fff2c54d; border: 3px dashed #b3955f9c; border-radius: 60px 60px 30px 30px; color: #8b824d; }
.empty-slot b { font-size: 38px; font-weight: 400; }.empty-slot > span { font-size: 25px; }
.stage-meter { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 12px; }
.on-air { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #7f633f; }
.on-air > span:first-child { width: 7px; height: 7px; background: #a98b61; border-radius: 50%; }.on-air.live > span:first-child { background: #679350; box-shadow: 0 0 0 3px #eff4c988; }
.beat-rail { display: flex; align-items: center; gap: 6px; height: 18px; }.beat-rail span { width: 6px; height: 6px; background: #ac895c77; border-radius: 50%; }.beat-rail span.active { background: #70934d; transform: scale(1.5); }
.crew-section { position: relative; min-height: 0; display: flex; flex-direction: column; border: 3px solid #b98b50; border-radius: 26px; padding: 18px 12px 9px; background: #fff0cbeF; box-shadow: inset 0 3px 0 #fff9e9, 0 5px 0 #805936; }
.crew-section h2 { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); margin: 0; padding: 4px 24px; background: #fce5a6; border: 2px solid #c69858; border-radius: 20px; box-shadow: 0 2px 0 #b38955; color: #86613d; font-size: 12px; white-space: nowrap; }
.crew-section h2 span { margin: 0 8px; }
.crew-picker { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 8px; height: 100%; min-height: 0; }
.crew-arrow { align-self: center; min-height: 48px; padding: 0; border: 2px solid #c69858; border-radius: 17px; background: #ffdf83; box-shadow: 0 3px 0 #a17a44; color: #785b37; font-size: 28px; }
#crew-pages { display: inline-flex; gap: 5px; margin: 0 0 0 6px; vertical-align: middle; }
#crew-pages i { width: 7px; height: 7px; border-radius: 50%; background: #bdab81; }
#crew-pages i.current { background: #477451; box-shadow: 0 0 0 2px #fff8dc; }
/* Native horizontal pan owns swipes; vertical pointer motion remains available for stage drops. */
.crew { display: flex; height: 100%; min-height: 0; min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x; }
.crew::-webkit-scrollbar { display: none; }.crew.swiping { scroll-snap-type: none; }
.crew-page { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: repeat(var(--crew-count, 6), minmax(0, 1fr)); gap: 8px; padding: 5px 3px 4px; scroll-snap-align: start; scroll-snap-stop: always; }
.crew-card { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; min-width: 0; min-height: 44px; padding: 2px 0 5px; border: 2px solid #ddc79b; border-radius: 18px; background: #fffbeb; box-shadow: 0 3px 0 #c6a572; touch-action: pan-x; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; container-type: inline-size; }
/* Explicit height avoids Safari collapsing an empty background span inside a flex button. */
.crew-card .sprite { width: min(calc(var(--dock-size) - 56px), 100cqw); height: min(calc(var(--dock-size) - 56px), 100cqw); }
.crew-card .name { font-size: 12px; font-weight: 750; white-space: nowrap; }
.crew-card .sound { display: none; }.card-mark { display: none; }
.card-status { position: absolute; top: -4px; right: -3px; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; font-size: 19px; border-radius: 50%; background: #e6ead0; color: #59804a; border: 2px solid #fff5d7; }
.card-status .icon { width: 15px; height: 15px; stroke-width: 3; }
.crew-card.on-stage { background: #e9f3cc; border-color: #7eaa5b; box-shadow: 0 3px 0 #65874d; }.on-stage .card-status { background: #6e9750; color: white; }
.crew-card.locked { border-style: dashed; background: #f3ebdf; }.locked .card-status { background: #ffe49b; }
.crew-card:hover { transform: translateY(-3px); }
.attention, .demo-target { outline: 3px dashed #e58b39; outline-offset: 3px; }
.guide-hand { position: fixed; z-index: 20; pointer-events: none; font-size: 43px; filter: drop-shadow(0 3px 2px #294d4233); }
.drag-ghost { position: fixed; width: 130px; height: 130px; pointer-events: none; z-index: 20; filter: drop-shadow(0 10px 8px #294d4233); opacity: .9; }.drag-ghost .sprite { width: 130px; }.dragging { cursor: grabbing; }
.sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; border-radius: 20px; }.sparkles i { position: absolute; left: 50%; top: 48%; font-style: normal; color: #f6ac29; font-size: 22px; opacity: 0; animation: star-pop 1s var(--delay) ease-out both; }.sparkles i:nth-child(2n) { color: #e58769; }.sparkles.ensemble i { font-size: 32px; }.sparkles.ensemble i:nth-child(n+7) { left: 28%; }.sparkles.ensemble i:nth-child(-n+6) { left: 72%; }
@keyframes star-pop { 0% { opacity: 0; transform: translate(0,0) scale(.2); } 20%,80% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x),var(--y)) rotate(30deg) scale(1.2); } }
.toast { position: fixed; bottom: calc(var(--dock-size) + 24px + env(safe-area-inset-bottom)); left: 50%; transform: translate(-50%, 15px); max-width: 80vw; padding: 10px 20px; background: #fff5d9; color: #5c6745; border: 2px solid #cca66b; border-radius: 20px; box-shadow: 0 4px 0 #89623766; font-size: 13px; text-align: center; z-index: 9; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }.toast.visible { opacity: 1; transform: translate(-50%, 0); }
/* Native dialogs keep their own scrolling; the playable stage never scrolls. */
dialog { border: 3px solid #bf9659; border-radius: 28px; padding: 62px 28px 24px; width: min(470px, calc(100vw - 28px)); max-height: calc(100dvh - 24px); color: var(--ink); background: #fff9e9; box-shadow: inset 0 3px 0 white, 0 8px 0 #745436, 0 25px 90px #20352f50; overflow: auto; overscroll-behavior: contain; }
dialog::backdrop { background: #203f3766; backdrop-filter: blur(5px); }
.modal-close, .modal-voice { position: absolute; top: 10px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 16px; background: #f4e6c5; }
.modal-close { right: 12px; }.modal-voice { left: 12px; }.modal-voice .kawaii { width: 46px; height: 46px; }
.modal-close, .modal-voice { z-index: 2; }
h2 { margin: 0 0 8px; font-size: 23px; }.modal-heading p, .dialog-copy { font-size: 13px; line-height: 1.7; color: #7f836b; }.modal-eyebrow { font-size: 11px; color: #a28a5f; letter-spacing: 1px; }.modal-heading h2 { margin: 8px 0; }.modal-center { text-align: center; }.dialog-art { width: 150px; margin: auto; }
.primary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 49px; padding: 12px 20px; background: var(--green); color: #fff9e5; border-radius: 14px; box-shadow: 0 3px 0 #294b34; font-size: 14px; font-weight: 650; }
.text-button { min-height: 44px; padding: 10px; font-size: 12px; color: #7c826a; text-decoration: underline; text-underline-offset: 4px; }.wide { width: 100%; margin-top: 15px; }
.field { display: block; margin: 16px 0 5px; font-size: 12px; font-weight: 650; }.field-input { width: 100%; min-height: 49px; padding: 12px; border: 2px solid #dbd6bd; border-radius: 12px; background: #fffdf5; color: var(--ink); }.form-note { font-size: 11px; color: #8a9284; line-height: 1.7; }.parent-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 15px; }.parent-actions button { min-height: 48px; background: #ecebd8; border-radius: 12px; padding: 10px 15px; font-size: 12px; }
.install-help { margin-top: 22px; border-top: 1px solid #dfd4b5; padding-top: 12px; font-size: 12px; line-height: 1.8; }.install-help summary { cursor: pointer; min-height: 52px; font-weight: 700; }.install-help img { vertical-align: middle; margin: 0 10px 0 3px; border-radius: 12px; }.install-help ol { padding-left: 22px; }.install-help li { margin: 7px 0; }[data-pwa-status] { padding: 10px 12px; border-radius: 12px; background: #e9f0d5; color: #476344; }
.word-button { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px auto; padding: 4px 20px; background: #eef0d8; border-radius: 18px; font-size: 24px; font-weight: 700; }.word-button .kawaii { width: 48px; height: 48px; }
.answers { display: flex; justify-content: center; gap: 15px; margin: 14px 0 8px; }.answer { width: 112px; height: 100px; font-size: 56px; border: 3px solid #e5cf98; border-radius: 22px; background: #fff1cc; box-shadow: 0 3px 0 #c8a871; }.answer.hint { border-color: #6a9257; background: #e7f1c9; }.task-status { min-height: 24px; margin: 8px 0 0; font-size: 12px; color: #7a8568; }
dialog[data-kind="album"] { width: min(640px, calc(100vw - 28px)); height: min(640px, calc(100dvh - 24px)); padding: 12px 18px 14px; overflow: hidden; }
dialog[data-kind="album"] #modal-content { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.album-heading { flex: none; padding: 0 42px; text-align: center; }.album-heading h2 { margin: 0 0 4px; font-size: 21px; }.album-heading p { margin: 0; font-size: 11px; }
.song-album { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 14px; margin-top: 12px; padding: 4px 3px 8px; overflow-y: auto; overscroll-behavior: contain; }
.album-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; flex: none; }
.song-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; min-height: 100px; padding: 10px 14px; background: #edf1d9; border: 3px solid #d6dcb9; border-radius: 18px; box-shadow: 0 3px #b8c4a2; }
.song-card.is-selected { border-color: #53856c; background: #e5f2d3; box-shadow: 0 3px #53856c; }
.song-faces { display: flex; flex: 1; min-width: 0; align-items: end; justify-content: center; }
.song-friend { flex: 0 1 16.66%; min-width: 0; max-width: 70px; }.song-friend .sprite { width: 100%; }.song-friend.muted { opacity: .45; }
.song-card.is-playing .song-friend:not(.muted) { animation: album-bounce .5s ease-out infinite; }
.song-play { display: flex; align-items: center; flex-direction: column; flex: none; }.song-play .kawaii { width: 48px; height: 48px; }.song-play small { font-size: 12px; font-weight: 700; }.song-state { margin-top: 2px; font-size: 10px; color: #597052; }
.song-use { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 150px; min-height: 48px; padding: 6px 16px; border: 2px solid #c6a16a; border-radius: 16px; background: #ffe4a2; box-shadow: 0 3px #b18b58; font-size: 14px; font-weight: 700; }
.song-use .icon { width: 26px; height: 26px; }.song-use[hidden] { display: none; }
.album-actions { flex: none; display: flex; gap: 10px; margin-top: 10px; }
.album-back { display: flex; align-items: center; justify-content: center; gap: 10px; flex: 1; min-height: 48px; border: 2px solid #b6c8ab; border-radius: 16px; background: #e4edda; font-weight: 700; }.album-back .icon { transform: rotate(180deg); }
#album-status { margin: 12px 0 0; font-size: 12px; line-height: 1.5; text-align: center; }#album-status:empty { display: none; }
.delete-song { min-width: 48px; min-height: 48px; border-radius: 12px; background: #eee6dc; }.empty-album { text-align: center; color: #8a927b; font-size: 13px; }.empty-album .kawaii { margin: auto; width: 95px; height: 95px; }
@keyframes album-bounce { 0%,100% { transform: translateY(0); } 25% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .song-card.is-playing .song-friend { animation: none; } }
.swap-guest { display: flex; justify-content: center; align-items: center; gap: 10px; }.swap-guest .sprite { width: 105px; }.swap-guest > span { font-size: 40px; color: #b69a62; }.swap-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }.swap-choices button { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 100px; padding: 5px 3px; border: 2px solid #d8dfb9; border-radius: 17px; background: #edf2db; }.swap-choices .sprite { width: 82px; }.swap-choices button > span:last-child { font-size: 11px; }
.family-photo { margin: 16px 0; padding: 12px; background: #e2efcd; border: 6px solid white; outline: 1px solid #e3d3b0; border-radius: 16px; box-shadow: 0 4px 0 #d7c8a6; }.photo-decoration { color: #b89654; letter-spacing: 18px; font-size: 22px; }.photo-lineup { display: flex; align-items: flex-end; justify-content: center; min-height: 90px; margin: 4px 0 12px; }.photo-lineup > div { flex: 0 1 16.66%; min-width: 0; }.photo-lineup .sprite { width: 100%; }.photo-lineup > div > span:last-child { font-size: 10px; white-space: nowrap; }.family-photo figcaption { font-size: 12px; color: #677b62; }.night .family-photo { background: #344f63; }.night .photo-lineup, .night .family-photo figcaption { color: #fff4cf; }
.offline-game { background: #f0ecd7; border-radius: 16px; padding: 15px; margin: 15px 0; font-size: 13px; line-height: 1.7; }.goodbye-button { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; width: 100%; background: #e9f0d5; border-radius: 18px; font-weight: 650; }.goodbye-button .kawaii { width: 58px; height: 58px; }
.rotate-screen { position: fixed; inset: 0; z-index: 30; isolation: isolate; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 24px; text-align: center; }
.rotate-card { width: min(420px, 100%); padding: 35px 15px 20px; background: #fff8e4ee; border: 3px solid #c9a169; border-radius: 35px; box-shadow: 0 7px 0 #96663f; }.rotate-card h2 { font-size: 23px; }.rotate-card p { font-size: 14px; color: #87936b; }.rotate-picture { position: relative; height: 210px; display: grid; place-items: center; }.rotate-device { width: 160px; height: 112px; display: flex; align-items: center; border: 8px solid #60886a; border-radius: 22px; background: #e4efce; animation: turn-device 3.6s ease-in-out infinite; }.rotate-device .sprite { width: 72px; height: 72px; }.rotate-arrow { position: absolute; top: -30px; right: 22%; font-size: 85px; color: #d5a654; }.rotate-card button { display: flex; align-items: center; justify-content: center; margin: 20px auto 0; padding: 0 22px 0 5px; border: 2px solid #d8c489; border-radius: 22px; background: #fff0bd; font-size: 14px; }
@keyframes turn-device { 0%,15% { transform: rotate(90deg); } 45%,85%,100% { transform: rotate(0); } }
@media (orientation: landscape) {
  dialog[data-kind="task"], dialog[data-kind="swap"], dialog[data-kind="farewell"] { width: min(760px, calc(100vw - 28px)); }
  .task-dialog { display: grid; grid-template-columns: 34% minmax(0, 1fr); align-items: center; gap: 20px; }.task-dialog .dialog-art { width: 200px; max-width: 100%; }.task-dialog .dialog-copy { display: none; }
  .swap-dialog { display: grid; grid-template-columns: 25% minmax(0, 1fr); gap: 15px; align-items: center; }.swap-dialog .swap-guest { grid-row: 1 / 3; flex-direction: column; }.swap-dialog .swap-guest .sprite { width: 160px; }.swap-dialog h2 { margin: 0; }.swap-dialog .swap-choices { margin: 0; }
  .farewell-dialog { display: grid; grid-template-columns: 58% minmax(0, 1fr); gap: 8px 20px; align-items: center; }.farewell-dialog > .modal-eyebrow, .farewell-dialog > h2 { grid-column: 1 / -1; }.farewell-dialog .family-photo { grid-row: 3 / 6; }.farewell-dialog .dialog-copy, .farewell-dialog .offline-game { margin: 0; }.farewell-dialog .offline-game { font-size: 12px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  :root { --dock-size: 94px; --rail-size: 60px; }
  .app-shell { grid-template-rows: 48px minmax(0, 1fr) var(--dock-size); gap: 6px; padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .game-hud { gap: 10px; }.brand { font-size: 17px; gap: 7px; }.brand small { font-size: 8px; letter-spacing: 3px; }.brand-icon { width: 40px; height: 40px; font-size: 28px; border-radius: 14px; }
  .scene-picker { padding: 0; border-radius: 16px; }.scene-picker button { border-radius: 13px; }.volume button { width: 44px; min-height: 44px; padding: 2px 0; border-radius: 13px; }.volume button > span:last-child { display: none; }.hud-button { width: 44px; height: 44px; }.session-badge { font-size: 12px; min-width: 80px; height: 38px; }
  .music-room { gap: 5px; }.child-actions { gap: 12px; padding-bottom: 0; }.child-button { min-height: 62px; padding-bottom: 5px; border-radius: 19px; font-size: 10px; }.child-button .kawaii { width: 47px; height: 47px; }.child-button b { min-width: 22px; height: 22px; font-size: 10px; }
  .guide-bar { margin-top: 0; padding: 0 3px; border-radius: 18px; }.guide-bar p { font-size: 10px; max-width: 310px; }.guide-bar .kawaii { width: 42px; height: 42px; }.demo-button { margin-left: 2px; padding: 0 5px; }.demo-button > span:last-child { display: none; }
  .slots { bottom: 22px; }.stage-character { height: min(37dvh, 160px); }.stage-character .sprite { width: min(120%, 31dvh); }.character-name { padding: 2px 6px; font-size: 10px; gap: 3px; }.character-name i { font-size: 9px; }.slot::before { bottom: 10px; height: 16px; }.empty-slot { height: 23dvh; border-width: 2px; gap: 0; }.empty-slot b { font-size: 28px; }.empty-slot > span { font-size: 18px; }
  .stage-meter { bottom: 0; }.on-air { display: none; }.beat-rail span { width: 5px; height: 5px; }
  .crew-section { padding: 10px 8px 6px; border-radius: 19px; border-width: 2px; }.crew-section h2 { font-size: 10px; padding: 2px 16px; top: -13px; }.crew-page { gap: 6px; padding-top: 4px; }.crew-card { border-radius: 13px; padding: 0 0 4px; }.crew-card .sprite { width: min(56px, 100cqw); height: min(56px, 100cqw); }.crew-card .name { font-size: 10px; }.card-status { width: 20px; height: 20px; font-size: 15px; top: -5px; }.card-status .icon { width: 12px; height: 12px; }
  .toast { bottom: calc(var(--dock-size) + 12px + env(safe-area-inset-bottom)); font-size: 11px; padding: 7px 14px; }
  dialog { max-height: calc(100dvh - 16px); padding: 48px 20px 16px; border-radius: 23px; }h2 { font-size: 21px; }.modal-close, .modal-voice { top: 6px; }.task-dialog { gap: 15px; }.task-dialog .dialog-art { width: 155px; }.task-dialog .modal-eyebrow { font-size: 10px; }.word-button { margin: 5px auto; font-size: 20px; padding: 0 12px; }.word-button .kawaii { width: 44px; height: 44px; }.answers { margin: 8px 0 4px; }.answer { width: 100px; height: 75px; font-size: 44px; }.task-status { font-size: 11px; margin: 5px 0 0; }.swap-choices { gap: 6px; }.swap-choices button { min-height: 82px; }.swap-choices .sprite { width: 62px; }.swap-dialog .swap-guest .sprite { width: 130px; }.family-photo { margin: 6px 0; padding: 8px; }.photo-decoration { font-size: 17px; }.photo-lineup { min-height: 70px; margin: 2px 0 8px; }.photo-lineup > div > span:last-child { font-size: 9px; }.offline-game { padding: 10px; }.goodbye-button { min-height: 54px; font-size: 12px; }.goodbye-button .kawaii { width: 48px; height: 48px; }
}
@media (max-width: 740px) and (orientation: landscape) {
  .brand > span:last-child { display: none; }.game-hud { gap: 8px; }.volume { gap: 3px; }.session-badge { min-width: 76px; padding: 0 7px; }.guide-bar p { max-width: 220px; }
  dialog[data-kind="task"], dialog[data-kind="swap"], dialog[data-kind="farewell"] { width: calc(100vw - 24px); }
  .task-dialog { display: grid; grid-template-columns: 28% minmax(0, 1fr); gap: 10px; align-items: center; }.task-dialog .dialog-copy { display: none; }.task-dialog .dialog-art { width: 130px; max-width: 100%; }
  .swap-dialog { display: grid; grid-template-columns: 22% minmax(0, 1fr); gap: 8px; align-items: center; }.swap-dialog .swap-guest { grid-row: 1 / 3; flex-direction: column; }.swap-dialog .swap-choices { margin-top: 0; }.swap-dialog h2 { margin: 0; }
}
@media (max-height: 340px) and (orientation: landscape) {
  :root { --dock-size: 80px; }.app-shell::before { background-position: center 65%; }.app-shell { gap: 4px; }.guide-bar p { max-width: 330px; }.guide-bar { transform: translateY(-3px); }.stage-character .sprite { width: min(115%, 28dvh); }.stage-character { height: 31dvh; }.slots { bottom: 14px; }.empty-slot { height: 21dvh; margin-bottom: 6px; }.empty-slot > span { display: none; }.stage-meter { bottom: -3px; }.child-actions { gap: 9px; }.child-button { min-height: 54px; padding-bottom: 3px; }.child-button .kawaii { width: 38px; height: 38px; }.crew-card .sprite { width: min(37px, 100cqw); height: min(37px, 100cqw); }.crew-card .name { font-size: 9px; }
  .task-dialog h2 { font-size: 18px; }.task-status { display: none; }.answer { height: 60px; }.swap-choices button { min-height: 68px; }.swap-choices .sprite { width: 48px; }
  .farewell-dialog > .modal-eyebrow, .farewell-dialog > .dialog-copy { display: none; }.farewell-dialog > h2 { grid-row: 1; margin: 0; }.farewell-dialog .family-photo { grid-row: 2 / 4; }.farewell-dialog .offline-game { grid-column: 2; grid-row: 2; font-size: 11px; padding: 8px; }.farewell-dialog .goodbye-button { grid-column: 2; grid-row: 3; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }.stage-character .sprite { transform: none !important; }.sparkles i { opacity: 1; transform: translate(var(--x), var(--y)); }.beat-rail span.active { transform: none; }
}

.install-dialog { width: min(640px, calc(100vw - 28px)); padding: 22px; }
.install-dialog h2 { margin-top: 8px; }
.install-dialog .install-help { border: 0; padding: 0; margin-top: 12px; }
.install-dialog .install-help summary { display: none; }
.install-steps { list-style: none; padding: 0 !important; display: grid; gap: 8px; }
.install-steps li { margin: 0; padding: 12px; border-radius: 16px; background: #f3e9c9; }
.install-steps b, .install-steps span { display: block; }.install-steps b { color: #476344; font-size: 14px; }
.install-steps .icon { display: inline-block; vertical-align: middle; }
@media (orientation: landscape) { .install-steps { grid-template-columns: repeat(3, 1fr); } }
#rotate-install { min-height: 44px; margin-top: 12px; padding: 8px 15px; font-size: 12px; }

.install-dialog[open] { display: flex; flex-direction: column; }
.install-dialog > :not(#install-instructions) { flex: none; }
#install-instructions { min-height: 0; overflow-y: auto; }
.install-actions { display: flex; gap: 12px; margin-top: 12px; align-items: center; }
.install-actions .wide { flex: 1; width: auto; margin: 0; }
#fullscreen-error { font-size: 12px; margin: 0; }
.browser-guide { inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: max(90px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: hidden; }
.browser-guide[open] { display: flex; align-items: center; justify-content: center; }
.browser-guide::backdrop { background: #153e37c9; backdrop-filter: blur(7px); }
.browser-card { width: min(100%, 540px); max-height: 100%; overflow-y: auto; padding: 24px; border: 3px solid #c39d60; border-radius: 30px; background: #fff9e8; box-shadow: inset 0 3px 0 #fffef8, 0 7px 0 #8d623d, 0 16px 40px #092a3740; }
.browser-heading { display: flex; align-items: center; gap: 14px; }
.browser-heading img { width: 66px; height: 66px; flex: none; border-radius: 22px; transform: rotate(-7deg); }
.browser-heading h2 { margin: 5px 0 0; font-size: clamp(21px, 4vw, 25px); }
.browser-card > p { font-size: 14px; line-height: 1.7; }
.browser-steps { list-style: none; padding: 0; display: grid; gap: 10px; margin: 18px 0; }
.browser-steps li { display: flex; align-items: center; gap: 12px; padding: 13px 15px; background: #edf0d8; border: 1px solid #d9dfb9; border-radius: 18px; }
.browser-steps li > b { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #52785b; color: #fffbe8; }
.browser-steps li > span { font-size: 13px; }
.browser-steps strong { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 19px; }
.browser-steps .browser-dots { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 32px; margin: 0 0 0 12px; border: 2px solid #93aa7b; border-radius: 12px; background: #fffdf2; font-size: 30px; line-height: 1; letter-spacing: 2px; }
.browser-steps small { display: block; margin-top: 5px; font-size: 11px; color: #69785c; }
.browser-card .browser-footnote { font-size: 12px; color: #778063; }
.browser-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.browser-actions button { min-height: 48px; flex: 1; white-space: nowrap; border-radius: 16px; font-size: 14px; }
.browser-actions .primary { box-shadow: 0 3px 0 #c1984d; }
.browser-card .browser-copy-status { margin: 10px 0 0; font-size: 12px; color: #396c50; }
.browser-copy-status:empty { display: none; }
.browser-arrow { position: absolute; top: max(9px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); width: 146px; height: 120px; color: #fff6cb; pointer-events: none; }
.browser-arrow span { position: absolute; top: 27px; right: 53px; white-space: nowrap; font-size: 15px; font-weight: 750; transform: rotate(-8deg); }
.browser-arrow svg { width: 100%; height: 100%; fill: none; stroke: #ffd16c; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 3px 0 #0d342d55); animation: browser-point 1s ease-in-out 3; }
.browser-arrow .arrow-outline { stroke: #fffbdf; stroke-width: 11; }
@keyframes browser-point { 50% { transform: translateY(-5px); } }
@media (max-height: 540px) and (orientation: landscape) {
  .browser-guide { padding-top: max(12px, env(safe-area-inset-top)); padding-right: max(130px, env(safe-area-inset-right)); }
  .browser-card { padding: 16px 20px; border-radius: 24px; }
  .browser-heading img { width: 48px; height: 48px; border-radius: 16px; }.browser-heading h2 { font-size: 21px; }
  .browser-card > p { margin: 8px 0; }.browser-steps { grid-template-columns: 1fr 1.3fr; margin: 10px 0; gap: 8px; }
  .browser-steps li { padding: 9px; gap: 8px; }.browser-steps strong { font-size: 16px; }.browser-steps .browser-dots { display: flex; margin: 3px 0 0; }
  .browser-arrow { width: 110px; }.browser-arrow span { top: 132px; right: 0; font-size: 12px; }
}
@media (max-height: 360px) and (orientation: landscape) {
  .browser-card { padding: 12px 16px; }.browser-heading img { width: 38px; height: 38px; }
  .browser-heading h2 { margin: 0; font-size: 18px; }.browser-heading .modal-eyebrow, .browser-footnote { display: none; }
  .browser-card > p { font-size: 12px; line-height: 1.4; margin: 6px 0; }
  .browser-steps { margin: 8px 0; }.browser-steps li { padding: 7px; }.browser-steps strong { font-size: 14px; }
  .browser-actions button { min-height: 44px; }.browser-card .browser-copy-status { font-size: 11px; margin-top: 6px; }
}
.learn-button { position: relative; display: flex; align-items: center; gap: 3px; flex: none; min-height: 52px; padding: 3px 12px; margin-left: 5px; border: 2px solid #bb945c; border-radius: 20px; background: #ffdf83; font-size: 13px; font-weight: 750; }
.stories-button { background: #e9e2fc; border-color: #b3a0c8; }
/* The opening is a finite show; the first musical command always belongs to the child. */
#modal[data-kind="opening"] { inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden; background: #142e35; }
#modal[data-kind="opening"] #modal-content { height: 100%; }
#modal[data-kind="opening"] > .modal-close { display: none; }
#modal[data-kind="opening"] > .modal-voice { z-index: 5; top: max(14px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); border: 1px solid #ffdfa678; background: #fff3ccdf; }
.opening-scene { position: relative; isolation: isolate; height: 100%; overflow: hidden; color: #fff9df; }
.opening-scene::before { content: ""; position: absolute; inset: -30px; background: url('assets/8d28858def83fd66/stories/captain-opening-v1.webp') center / cover; filter: blur(25px) brightness(.45); z-index: -1; }
.opening-world { position: absolute; inset: 0; overflow: hidden; }
.opening-poster, .opening-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.opening-poster { animation: captain-reveal 3s ease-out both; }
.opening-video { z-index: 1; }
.opening-cast { position: absolute; inset: 15% 5% 20%; display: flex; align-items: flex-end; justify-content: center; }
.opening-cast .sprite { width: 14%; height: auto; aspect-ratio: 1; }.opening-cast [data-id="kid"] { width: 20%; }
.opening-heading { position: absolute; z-index: 3; top: max(14px, env(safe-area-inset-top)); left: 80px; right: 108px; display: flex; justify-content: center; text-align: center; pointer-events: none; text-shadow: none; }
.opening-heading h2 { margin: 0; max-width: 100%; padding: 8px 22px; border: 1px solid #ffe29c66; border-radius: 28px; background: #193d3be8; color: #fff3d4; font-size: clamp(22px, 3vw, 34px); line-height: 1.25; letter-spacing: .03em; animation: captain-title .4s ease-out both; }
.opening-skip { position: absolute; z-index: 4; right: max(16px, env(safe-area-inset-right)); top: max(14px, env(safe-area-inset-top)); min-width: 80px; min-height: 44px; padding: 8px 14px; border: 1px solid #fff0c87a; border-radius: 24px; background: #17352cbf; color: #fff4d7; font-size: 13px; }
.opening-command { position: absolute; z-index: 3; bottom: max(18px, env(safe-area-inset-bottom)); left: 16px; right: 16px; display: flex; align-items: center; justify-content: center; gap: 18px; }
.opening-command p { max-width: 42%; padding: 9px 20px; margin: 0; border-radius: 28px; background: #193d3bd9; border: 1px solid #ffe29c66; color: #fff3d4; font-size: 16px; letter-spacing: 1px; }
.opening-drum { display: flex; align-items: center; gap: 10px; min-height: 80px; padding: 9px 25px 9px 12px; border: 3px solid #f2ce7f; border-radius: 28px; background: linear-gradient(140deg, #fff9d9, #ffdc89); color: #72502f; box-shadow: inset 0 3px 0 #fffdf4, 0 5px 0 #976435, 0 0 35px #ffd47366; animation: captain-invite 1.4s ease-in-out 3; }
.opening-drum svg { width: 76px; height: 64px; overflow: visible; }.opening-drum b { display: block; font-size: 21px; }.opening-drum small { display: block; font-size: 13px; margin-top: 5px; }
.opening-lights { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; opacity: .45; }
.opening-lights i { position: absolute; top: -12%; left: 22%; width: 14%; height: 100%; background: linear-gradient(#fff4a6b3, #ffe9a000); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); transform-origin: 50% 0; animation: captain-light 3s ease-in-out 2 alternate; }
.opening-lights i:nth-child(2) { left: 45%; animation-delay: -.9s; background: linear-gradient(#96ebdc88, #a0f5da00); }.opening-lights i:nth-child(3) { left: 70%; animation-delay: -1.7s; }
.opening-notes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.opening-notes i { position: absolute; left: calc(8% + var(--n) * 7.5%); top: 82%; color: #ffe09a; font-style: normal; font-size: clamp(14px, 3vw, 30px); text-shadow: 0 0 12px #ffcd59; opacity: 0; animation: captain-note 3.2s calc(var(--n) * .11s) ease-out 1; }
.opening-scene[data-phase="ready"] .opening-lights { opacity: .15; }
.opening-scene[data-phase="launch"] .opening-notes i { animation-name: captain-celebrate; animation-duration: .65s; animation-delay: 0s; }
.opening-scene[data-phase="launch"] .opening-drum { animation: captain-hit .45s ease-out; }
.opening-scene[data-phase="launch"] .opening-poster, .opening-scene[data-phase="launch"] .opening-video { animation: captain-jump .55s ease-out; }
@keyframes captain-reveal { from { opacity: .35; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
@keyframes captain-title { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes captain-light { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
@keyframes captain-note { 10% { opacity: .8; } 100% { opacity: 0; transform: translate(15px, -40dvh) rotate(30deg); } }
@keyframes captain-invite { 50% { transform: translateY(-5px); box-shadow: inset 0 3px 0 #fffdf4, 0 5px 0 #976435, 0 0 50px #ffe49c99; } }
@keyframes captain-hit { 25% { transform: scale(.92); } 65% { transform: scale(1.08); } }
@keyframes captain-jump { 45% { transform: translateY(-7px); } }
@keyframes captain-celebrate { 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-55dvh) rotate(65deg) scale(1.3); } }
@media (max-height: 420px) and (orientation: landscape) {
  .opening-heading { top: max(10px, env(safe-area-inset-top)); }.opening-heading h2 { font-size: 22px; padding: 7px 18px; }
  .opening-command { bottom: max(10px, env(safe-area-inset-bottom)); gap: 10px; }.opening-command p { font-size: 12px; padding: 7px 12px; }
  .opening-drum { min-height: 64px; padding: 4px 15px 4px 8px; border-radius: 22px; gap: 5px; }.opening-drum svg { width: 55px; height: 48px; }.opening-drum b { font-size: 17px; }.opening-drum small { font-size: 11px; margin-top: 2px; }
}
.learn-button > span:first-child { font-size: 32px; }.learn-button b { font-size: 11px; color: #477451; }
.task-actions { display: flex; justify-content: space-between; gap: 10px; }.task-actions button { display: flex; align-items: center; gap: 5px; }
.word-stickers { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 12px; font-size: 20px; }
.word-stickers span { opacity: .3; filter: grayscale(1); }.word-stickers .known { opacity: 1; filter: none; }
.word-collection { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }.word-collection > span { padding: 10px; background: #f3edda; border-radius: 12px; }.word-collection .known { background: #e2edca; }.word-collection small { display: block; font-size: 11px; margin-top: 5px; }
@media (max-height: 500px) and (orientation: landscape) {
  .learn-button { min-height: 44px; padding: 0 7px; font-size: 10px; }.learn-button > span:first-child { font-size: 28px; }.learn-button b { display: none; }
  .guide-bar p { max-width: 170px; }.word-stickers { font-size: 16px; margin-top: 5px; }.task-actions button { font-size: 11px; }
}
/* Activities share three layouts; pictures and recorded instructions carry the task. */
.lesson-invitation { position: absolute; z-index: 8; top: 62px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; min-height: 66px; padding: 6px 18px 6px 4px; border: 3px solid #bb985e; border-radius: 26px; background: #fff7d8; box-shadow: 0 5px 0 #95723d77; font-size: 14px; }
.lesson-invitation .sprite { width: 60px; flex: none; }.invitation-prop { font-size: 33px; }
.topic-choices { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.topic-choices button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 155px; border-radius: 24px; border: 3px solid #dac394; background: #fff0cc; }
.topic-choices .sprite { width: 96px; max-width: 100%; }.topic-choices b { font-size: 32px; }.topic-choices button > span:last-child { font-size: 13px; padding: 5px; }.topic-choices button:disabled { opacity: .45; }
dialog[data-kind="topics"] { width: min(760px, calc(100vw - 24px)); }
.count-scene { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px; border-radius: 24px; background: #edf2dc; min-height: 66px; }
.object-group { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; }.count-object { width: 48px; height: 48px; border: 2px solid #c9cfac; border-radius: 16px; background: #fff9e6; font-size: 29px; filter: saturate(.3); }
.count-object[aria-pressed="true"] { filter: none; background: #ffe588; border-color: #bb892f; box-shadow: 0 2px 0 #b8984b; }.count-result { height: 28px; font-size: 24px; font-weight: 800; }.join-plus { font-size: 22px; }
.combine-scene .object-group { animation: gather-stars 1.2s ease-out both; --start-x: -20px; }.combine-scene .object-group:last-child { --start-x: 20px; }.combine-scene .join-plus { opacity: 0; animation: show-plus 1.2s ease-out; }
@keyframes gather-stars { from { transform: translateX(var(--start-x)); opacity: .4; } to { transform: translateX(0); opacity: 1; } }
@keyframes show-plus { from { opacity: 1; } to { opacity: 0; } }
.answer { display: flex; flex-direction: column; align-items: center; justify-content: center; }.answer small { font-size: 15px; }.quantity { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 95px; }.quantity i { font-style: normal; font-size: 25px; }
.color-flower { color: var(--flower-color); font-size: 70px; line-height: 1; text-shadow: 0 2px 0 #6f695044; }.shape { display: inline-block; width: 55px; height: 55px; background: #8babd0; box-shadow: inset 0 3px 0 #ffffff55; }.shape-circle { border-radius: 50%; }.shape-triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); }.shape-square { border-radius: 5px; }.shape-rectangle { width: 75px; height: 42px; border-radius: 5px; }
.match-example { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 8px auto; }.match-example > span:last-child { font-size: 24px; }
.rest-screen { position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); background: #e8f1de; }
.rest-card { display: flex; align-items: center; gap: 28px; max-width: 720px; }.rest-art { width: min(28vw, 260px); flex: none; }.rest-art .sprite { width: 100%; }.rest-copy { text-align: center; }.rest-copy p { line-height: 1.7; font-size: 16px; max-width: 350px; }.rest-prop { font-size: 58px; }.rest-listen { min-width: 64px; min-height: 64px; border: 2px solid #bdcaac; background: #f8f7e4; border-radius: 22px; }.rest-listen .kawaii { width: 56px; height: 56px; }.restart-button { min-height: 48px; margin-top: 18px; padding: 10px 20px; border: 1px solid #9faa90; border-radius: 16px; color: #65745d; background: #f3f3e4; font-size: 13px; }
@media (max-height: 500px) and (orientation: landscape) {
  .topic-choices { margin-top: 10px; gap: 10px; }.topic-choices button { min-height: 130px; }.topic-choices .sprite { width: 70px; }
  .task-dialog .word-button { margin: 2px auto; }.count-scene { padding: 4px; gap: 5px; min-height: 56px; }.count-result { height: 23px; font-size: 20px; }.count-object { font-size: 26px; }.quantity i { font-size: 21px; }.answer small { font-size: 12px; }
  .lesson-invitation { top: 44px; min-height: 54px; font-size: 12px; }.lesson-invitation .sprite { width: 45px; }
  .rest-card { gap: 18px; }.rest-art { width: min(22vw, 180px); }.rest-prop { font-size: 38px; }.rest-copy p { font-size: 13px; margin: 7px 0; }.rest-listen { min-height: 48px; min-width: 48px; }.rest-listen .kawaii { width: 44px; height: 44px; }.restart-button { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .combine-scene .object-group { animation: none; } }

/* The activity is a small play scene, with one visible action and a quiet way back to music. */
dialog[data-kind="play-scene"] { width: min(830px, calc(100vw - 28px)); padding: 18px 18px 14px; }
.play-scene { text-align: center; }.play-scene h2 { margin: 4px 42px 0; font-size: 22px; }
.scene-top { display: flex; gap: 8px; align-items: center; justify-content: center; min-height: 54px; font-size: 14px; }
.scene-field { position: relative; display: flex; align-items: center; justify-content: space-around; gap: 12px; height: clamp(140px, 36dvh, 270px); padding: 12px; border: 2px solid #b8c798; border-radius: 28px; background: linear-gradient(#eef7cb, #d6e7a2); user-select: none; -webkit-user-select: none; }
.scene-buddy { position: relative; display: flex; align-items: end; justify-content: center; width: 29%; height: 100%; flex: none; container-type: size; }.scene-buddy .sprite { width: min(100%, 220px, 100cqh); height: auto; }
.scene-cheer { position: absolute; right: 0; top: 0; font-size: 50px; opacity: 0; }
.picnic-basket { position: relative; width: 28%; height: 95%; padding: 0; flex: none; }.picnic-basket svg { display: block; width: 100%; height: 100%; pointer-events: none; }
#basket-fruit { position: absolute; left: 50%; top: 15%; transform: translateX(-50%); font-size: clamp(42px, 8dvh, 68px); }
.picnic-tray { display: flex; gap: 14px; align-items: center; justify-content: center; flex: 1; }
.fruit-piece { min-width: 68px; min-height: 68px; width: clamp(68px, 9vw, 100px); height: clamp(68px, 9vw, 100px); border: 3px solid #d5b876; border-radius: 25px; background: #fff6d9; box-shadow: 0 4px #b0945d; font-size: clamp(42px, 6vw, 65px); touch-action: none; -webkit-touch-callout: none; }
.fruit-piece.hint { border-color: #568a56; box-shadow: 0 0 0 5px #fff8a0, 0 4px #7e9b62; }
.fruit-ghost { position: fixed; pointer-events: none; font-size: 65px; z-index: 30; filter: drop-shadow(0 5px 3px #775a4a55); }
.echo-player { position: relative; width: 48%; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: center; }
.echo-dots { display: flex; gap: 16px; font-size: 28px; color: #adbb95; line-height: 1.2; }.echo-dots .lit { color: #d66b46; text-shadow: 0 0 4px #fff4b0; }
.echo-drum { display: grid; place-items: center; min-width: 94px; min-height: 80px; width: min(21vw, 175px); height: min(22dvh, 165px); border: 4px solid #b57e44; border-radius: 35%; background: #fff0b6; box-shadow: 0 6px #936135; font-size: clamp(56px, 13dvh, 100px); touch-action: none; }
.echo-drum:disabled { opacity: .7; }.echo-hand { position: absolute; right: 6%; bottom: 8%; font-size: 36px; pointer-events: none; }.echo-player:has(.echo-drum:disabled) .echo-hand { visibility: hidden; }
.scene-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 16px; }
.scene-actions button { min-height: 48px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border-radius: 18px; background: #eee6c7; font-size: 13px; }.scene-actions #scene-done { background: #e6edc9; }.scene-actions .kawaii { width: 44px; height: 44px; }
.scene-success .scene-cheer { opacity: 1; animation: scene-cheer .6s ease-out 2; }
.scene-success .scene-field { border-color: #dfa947; background: #f5edb7; }
@keyframes scene-cheer { from { transform: scale(.4) rotate(-12deg); } to { transform: scale(1.1) rotate(12deg); } }
@media (max-height: 500px) and (orientation: landscape) {
  .topic-choices { gap: 8px; }.topic-choices button { min-height: 110px; border-radius: 18px; }.topic-choices .sprite { width: 58px; }.topic-choices b { font-size: 25px; }.topic-choices button > span:last-child { font-size: 11px; }
  dialog[data-kind="play-scene"] { padding: 12px 12px 8px; }.play-scene h2 { font-size: 19px; margin: 2px 48px 0; }
  .scene-top { min-height: 46px; font-size: 12px; }
  .scene-field { height: clamp(116px, 39dvh, 180px); padding: 6px 12px; border-radius: 22px; }.scene-buddy .sprite { width: min(100%, 160px, 100cqh); }
  .scene-actions { margin-top: 7px; }.scene-actions button { min-height: 44px; }.scene-actions .kawaii { width: 40px; height: 40px; }
  .echo-dots { font-size: 22px; }.echo-drum { min-height: 72px; height: 23dvh; font-size: 55px; }.scene-cheer { font-size: 35px; }
}
@media (prefers-reduced-motion: reduce) { .scene-success .scene-cheer { animation: none; } }

/* A finite storybook. Native scroll-snap and buttons keep touch, keyboard and Safari behavior together. */
.story-entry { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; margin: 12px 0; padding: 8px 18px; border: 2px solid #c7aa70; border-radius: 22px; background: linear-gradient(110deg, #efe5fa, #fff0bc); text-align: left; }
.story-entry .sprite { width: 52px; height: 52px; flex: none; }.story-entry b { display: block; font-size: 18px; }.story-entry small { display: block; margin-top: 4px; }.story-entry strong { margin-left: auto; font-size: 30px; }
dialog[data-kind="stories"], dialog[data-kind="story"] { width: min(1000px, calc(100vw - 24px)); padding: 16px; overflow: hidden; }
.story-library { text-align: center; }.story-library h2 { margin: 2px 50px 4px; }.story-library > p { margin: 8px 0 15px; font-size: 13px; color: #777e66; }
.story-shelf { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x; padding: 5px 0 10px; }
.story-shelf::-webkit-scrollbar { display: none; }
.story-card { flex: 0 0 calc((100% - 28px) / 3); scroll-snap-align: start; padding: 10px; min-height: 210px; border: 3px solid #bea075; border-radius: 24px; box-shadow: 0 4px #9a805d; background: #f0f4d7; }
.story-card-art { display: flex; align-items: end; justify-content: center; position: relative; height: clamp(85px, 22dvh, 170px); container-type: size; }
.story-card-art .sprite { width: min(50%, 100cqh); height: auto; }.story-card-art b { position: absolute; top: 0; right: 0; font-size: 30px; }
.story-card > strong { display: block; font-size: 16px; margin-top: 8px; }.story-card > small { display: block; margin-top: 7px; color: #607253; }
.story-shelf-nav { display: flex; align-items: center; justify-content: center; gap: 24px; font-size: 12px; }.story-shelf-nav button { min-width: 52px; min-height: 44px; background: #f0dfb1; border-radius: 14px; font-size: 24px; }
.theme-workshop { --story-tint: #d0c5ed; }.theme-forest, .theme-listen { --story-tint: #c5dec1; }.theme-rhythm { --story-tint: #f3c5ad; }.theme-river { --story-tint: #bcdfe8; }.theme-bridge { --story-tint: #e8d39e; }
.story-card { background: linear-gradient(var(--story-tint), #fff8e4); }
/* A fixed-ratio shot inside a responsive cinema. Never resize sprite-atlas axes independently. */
dialog[data-kind="story"] { width: min(1120px, calc(100vw - 2 * max(10px, env(safe-area-inset-left), env(safe-area-inset-right)))); height: calc(100dvh - 2 * max(10px, env(safe-area-inset-top), env(safe-area-inset-bottom))); padding: 10px 14px; background: #223c36; color: #fff7de; border-color: #bfa275; }
dialog[data-kind="story"] #modal-content { height: 100%; }
dialog[data-kind="story"] :is(.modal-close, .modal-voice) { color: #4c543d; }
.story-scene { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; text-align: center; }
.story-scene header { position: relative; padding: 0 55px; }.story-kicker { display: none; }.story-scene h2 { font-size: 18px; margin: 0; }
.story-steps { display: flex; justify-content: center; gap: 7px; margin: 5px 0 0; }.story-steps i { width: 22px; height: 4px; border-radius: 5px; background: #65776a; }.story-steps .lit { background: #ffe08c; }
.story-screen { grid-row: 2; min-width: 0; min-height: 0; display: grid; place-items: center; container-type: size; }
.story-world { position: relative; isolation: isolate; width: min(100cqw, calc(100cqh * 16 / 9)); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: var(--story-tint) url('assets/8d28858def83fd66/garden-stage-v1.webp') center / cover; }
.story-world:has(.story-poster) { background: var(--story-tint); }
.story-world:has(.story-poster) .story-mist { display: none; }
.story-shot { position: absolute; inset: 0; animation: story-camera 10s ease-in-out both; transform-origin: 55% 55%; }
.story-poster, .story-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }.story-poster { background: var(--story-poster) center / contain no-repeat; }
.story-video { z-index: 1; background: #223c36; }
.story-cast { position: absolute; inset: 10% 14% 4%; display: flex; justify-content: space-between; align-items: end; }.story-cast > div { width: 34%; animation: story-arrive 1.3s ease-out both; }.story-cast > div:last-child { animation-delay: .35s; }.story-cast .sprite { width: 100%; height: auto; }
.story-mist { position: absolute; pointer-events: none; inset: 45% -10% -5%; background: radial-gradient(ellipse at 30% 80%, #afa0dacc, transparent 58%), radial-gradient(ellipse at 80% 75%, #cfb8e5bb, transparent 60%); animation: story-mist 6s ease-in-out both; }
.phase-repair .story-mist { opacity: .3; }.phase-restored .story-mist, .phase-outro .story-mist { display: none; }
.story-prop { position: absolute; top: 26%; left: 42%; width: 16%; font-size: clamp(30px, 9dvh, 80px); filter: drop-shadow(0 3px 5px #54412c33); animation: story-deliver 3s ease-in-out both; }.story-world:has(.story-poster) .story-prop { display: none; }
.phase-restored .story-cast .sprite { animation: story-cheer .7s ease-out 2; }
.theme-rhythm .story-cast .sprite { animation: story-drum 1s ease-in-out 4; animation-delay: 1.5s; }.theme-rhythm .story-cast > div:last-child .sprite { animation-delay: 2s; }
.theme-river .story-prop { animation: story-sail 7s ease-in-out both; }.theme-bridge .story-prop { animation: story-fit 3s ease-out both; }.theme-listen.phase-restored .story-prop { animation: story-bird 5s ease-in-out both; }
.story-sparkles { position: absolute; top: 12%; width: 100%; color: #ffe891; text-shadow: 0 2px 3px #7d5839; font-size: 40px; animation: story-cheer 1s ease-out 2; }
.story-footer { grid-row: 3; display: flex; align-items: center; gap: 16px; min-width: 0; }
.story-caption { flex: 1; margin: 0; font-size: clamp(12px, 1.4vw, 17px); line-height: 1.5; text-align: left; text-wrap: pretty; }
.story-controls { display: flex; justify-content: center; gap: 8px; flex: none; }.story-controls button, .story-outings button { min-height: 48px; border: 2px solid #baa26b; border-radius: 16px; color: #4c543d; background: #fff0b9; box-shadow: 0 2px #b29b6b; padding: 4px 12px; font-weight: 700; }
#story-replay { font-size: 25px; min-width: 48px; padding: 4px; }#story-next b { font-size: 25px; margin-left: 4px; }
.story-outings { display: flex; justify-content: center; gap: 10px; }.story-outings button { display: flex; align-items: center; gap: 8px; background: #e7efcf; }.story-outings b { font-size: 30px; }.story-outings button:last-child { background: #f3ecd5; }
.story-departure { position: absolute; inset: 10% 15% 0; display: flex; justify-content: center; align-items: end; gap: 10px; padding: 10px; animation: story-depart 6s ease-in-out both; }.story-departure .sprite { width: 25%; height: auto; }.story-departure b { font-size: clamp(35px, 8dvh, 65px); align-self: center; }
.phase-outro .story-caption { flex: 1; }
.story-ribbon { text-align: center; font-size: 12px; color: #756742; background: #eee4c2; padding: 5px; border-radius: 12px; margin: 0 44px 8px; }.story-ribbon span { margin-left: 12px; color: #4b7655; }
.story-paused *, .story-paused *::before { animation-play-state: paused !important; }
@keyframes story-camera { from { transform: scale(1); } to { transform: scale(1.045); } }
@keyframes story-arrive { from { transform: translateX(-30%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes story-deliver { 0% { transform: translate(180%, -60%) rotate(20deg); opacity: 0; } 70% { transform: translate(-30%, 25%) rotate(-8deg); opacity: 1; } 100% { transform: none; } }
@keyframes story-drum { 0%, 65%, 100% { transform: none; } 30% { transform: translateY(-8%) rotate(-5deg); } }
@keyframes story-sail { 0% { transform: translateX(-180%) rotate(-6deg); } 45% { transform: translateX(0) rotate(6deg); } 100% { transform: translateX(170%) rotate(-4deg); } }
@keyframes story-fit { 0% { transform: translateY(-150%) rotate(90deg); } 70% { transform: translateY(65%) rotate(0); } 85% { transform: translateY(40%); } 100% { transform: translateY(55%); } }
@keyframes story-bird { 0%, 20% { transform: translate(-100%, 60%); } 55% { transform: translate(70%, -40%) rotate(-15deg); } 100% { transform: translate(150%, -80%); } }
@keyframes story-mist { to { transform: translateX(8%); } }
@keyframes story-cheer { 50% { transform: translateY(-12px); } }
@keyframes story-depart { 0%, 20% { transform: none; } 100% { transform: translate(20%, -18%) scale(.72); } }
@media (max-height: 500px) and (orientation: landscape) {
  .story-entry { margin: 5px 0; min-height: 48px; padding: 3px 12px; }.story-entry .sprite { height: 40px; width: 40px; }.story-entry b { font-size: 15px; }.story-entry small { font-size: 11px; margin-top: 2px; }
  dialog[data-kind="topics"] .topic-choices { margin-top: 5px; }.story-library > p { margin: 4px 0; }
  .story-card { min-height: 135px; padding: 6px; border-radius: 18px; }.story-card > strong { font-size: 13px; }.story-card > small { font-size: 11px; margin-top: 4px; }.story-card-art b { font-size: 24px; }
  dialog[data-kind="stories"] { padding: 9px 12px; }.story-kicker { display: none; }.story-scene h2 { font-size: 18px; margin: 2px 0; }.story-steps { margin: 4px 0 7px; }
  dialog[data-kind="story"] { padding: 7px 10px; }.story-scene { gap: 4px; }.story-scene h2 { font-size: 16px; }.story-steps { margin: 3px 0 0; }
  .story-footer { gap: 10px; }.story-controls button, .story-outings button { min-height: 44px; font-size: 12px; padding: 3px 8px; }.story-outings b { font-size: 24px; }.story-ribbon { font-size: 10px; margin-bottom: 4px; padding: 3px; }

}
@media (prefers-reduced-motion: reduce) { .story-scene *, .story-scene *::before { animation: none !important; transition: none !important; } }
@media (max-height: 360px) and (orientation: landscape) { .story-scene header { display: none; }.story-footer { padding: 0 3px; }.story-controls button { min-width: 44px; }#story-next span { display: none; } }

.farewell-dialog .photo-lineup .sprite { transform-origin: 50% 90%; animation: captain-bow 1.1s .2s ease-in-out 1; }
@keyframes captain-bow { 45% { transform: translateY(5px) rotate(9deg) scaleY(.94); } }

/* Radio pack: familiar illustrated friends around a responsive, tactile mixing desk. */
.radio-stage .app-shell::before, .radio-stage .rotate-screen::before { background-image: url('assets/8d28858def83fd66/radio-stage-v1.webp'); }
.radio-stage .crew-picker { background: #e5f6ecf2; border-color: #7aa98c; }
.radio-stage .guide-bar { background: #ddf7e8ef; }
.radio-stage .guide-bar > p, .radio-stage #demo-button { display: none; }
.radio-stage #radio-band-button { background: #b4efcf; border-color: #527e75; }
[data-scene="radio"] { font-size: 27px; }
.theme-radio { --story-tint: #b6e7d8; }
.theme-radio .story-world, .theme-king .story-world { background-image: url('assets/8d28858def83fd66/radio-stage-v1.webp'); }
.theme-radio .story-mist, .theme-king .story-mist { display: none; }
.theme-radio .story-prop { font-size: clamp(44px, 12dvh, 120px); left: 40%; width: 20%; }
.theme-radio.phase-mystery .story-prop { animation: radio-wobble .55s ease-in-out 4; }
.theme-radio.phase-restored .story-prop { filter: drop-shadow(0 0 14px #b2ffac); }
#modal[data-kind="radio-task"] { width: min(1000px, calc(100vw - 2 * max(12px, env(safe-area-inset-left), env(safe-area-inset-right)))); height: min(680px, calc(100dvh - 20px)); padding: 10px 14px; overflow: hidden; background: #e9efdc; border-color: #87ab88; }
#modal[data-kind="radio-task"] #modal-content { height: 100%; }
.radio-activity { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) 48px; gap: 6px; }
.in-story-lesson .radio-activity { height: calc(100% - 30px); }
.radio-activity header { text-align: center; padding: 0 56px; }
.radio-activity header > span { font-size: 11px; letter-spacing: .12em; color: #51786d; }
.radio-activity h2 { margin: 2px 0 4px; font-size: clamp(18px, 2.5vw, 25px); }
.radio-workbench { display: grid; grid-template-columns: 25% minmax(0, 1fr); align-items: center; min-height: 0; gap: 14px; padding: 4px 12px; border-radius: 26px; background: radial-gradient(ellipse at 60% 50%, #ecf3cc, #b9dcca); }
.radio-engineer { position: relative; height: 100%; min-height: 0; display: grid; align-items: end; justify-items: center; container-type: size; }
.radio-engineer .sprite { width: min(100cqw, 86cqh); height: auto; aspect-ratio: 1; }
.radio-bubble { position: absolute; top: 6%; left: 18%; padding: 6px 14px; border-radius: 18px 18px 18px 0; background: #fff9dc; color: #396c50; border: 2px solid #92ac79; font-size: clamp(18px, 4dvh, 28px); font-weight: 800; }
.radio-console { position: relative; height: 100%; min-height: 0; max-height: 390px; display: flex; flex-direction: column; justify-content: space-evenly; padding: 10px 16px; border: 4px solid #627d6d; border-radius: 24px; background: linear-gradient(145deg, #eff5df, #c2d5af); box-shadow: 0 5px #59694e, inset 0 3px #ffffe4; }
.radio-dial { display: flex; align-items: center; gap: 10px; height: 20px; flex: none; color: #487366; font-weight: 800; font-size: 11px; }
.radio-dial i { flex: 1; height: 13px; background: repeating-linear-gradient(90deg, #6b948466 0 2px, transparent 2px 12px); border-bottom: 2px solid #8baa7a; }
.radio-dial b { color: #bd8048; font-size: 19px; }
.radio-sockets, .radio-plugs { display: flex; justify-content: space-around; gap: 12px; }
.radio-sockets button, .radio-plugs button { position: relative; min-width: 56px; width: 23%; height: clamp(44px, 12dvh, 78px); border: 3px solid #618577; border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.radio-sockets button { background: #345e5b; box-shadow: inset 0 4px 0 #1b413b; }
.radio-plugs button { background: #fff0b8; box-shadow: 0 4px #a68c53; touch-action: none; }
.radio-plugs button[aria-pressed="true"] { border-color: #12695c; background: #ffe084; outline: 3px solid #f4ba44; outline-offset: 2px; }
.radio-shape { display: block; width: 28px; height: 28px; background: #badace; border: 3px solid #638d7c; flex: none; }
.radio-shape.circle { border-radius: 50%; }.radio-shape.triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); border: none; }.radio-shape.square { border-radius: 4px; }
.radio-plugs .radio-shape { background: #df9455; border-color: #a16b46; }.radio-plugs span { font-size: 17px; }
.socket-lamp { position: absolute; top: -7px; right: 7px; width: 12px; height: 12px; border: 2px solid #42675b; border-radius: 50%; background: #768d7c; }
.connected .socket-lamp { background: #bdff94; box-shadow: 0 0 9px #bbff9a; }
.radio-sockets .connected { background: #8ac69b; }.radio-plugs .connected { opacity: .6; transform: translateY(-3px); box-shadow: none; }
.radio-wires { display: flex; justify-content: space-around; height: clamp(10px, 3dvh, 20px); }
.radio-wires i { border-left: 4px dotted #53796488; }
.radio-signal { --signal: .15; display: flex; gap: 5px; align-items: end; justify-content: center; height: 14px; opacity: var(--signal); }
.radio-signal i { width: 9px; height: 50%; background: #3e826b; border-radius: 3px; }.radio-signal i:nth-child(2n) { height: 100%; }
.radio-lamps { display: flex; align-items: center; justify-content: center; gap: 20px; }
.radio-lamps button { min-width: 66px; height: clamp(44px, 14dvh, 100px); background: #375953; border: 3px solid #6b8c72; border-radius: 18px; font-size: clamp(28px, 8dvh, 56px); filter: grayscale(1); }
.radio-lamps button.lit { filter: none; background: #fff0a2; box-shadow: 0 0 18px #ffda7a; }
.radio-lamps > span { font-size: 24px; }
.radio-cell { min-height: 44px; align-self: center; background: #ffe7a0; border: 3px solid #a18e5e; box-shadow: 0 3px #8f8259; border-radius: 16px; padding: 4px 25px; font-size: 28px; }
.radio-count-choices { display: flex; justify-content: center; gap: 14px; }.radio-count-choices button { min-height: 44px; padding: 5px 14px; border: 3px solid #93a477; border-radius: 16px; background: #fff8dd; }.radio-count-choices span { font-size: 22px; }.radio-count-choices b { margin-left: 10px; font-size: 20px; }
.radio-loop { display: flex; justify-content: center; align-items: center; gap: 6px; }
.radio-loop > span { display: grid; place-items: center; width: 18%; max-width: 84px; aspect-ratio: 1; border-radius: 15px; border: 2px solid #7e9c80; background: #eef7e2; transition: background .15s; }
.radio-loop .sprite { width: 100%; height: auto; }.radio-loop .missing { border-style: dashed; font-size: 28px; background: #fff1b7; }.radio-loop .beat-now { background: #ffdc6f; outline: 3px solid #d6994e; }
.radio-performers { display: flex; justify-content: center; gap: 24px; }
.radio-performers button { min-width: 80px; min-height: 44px; display: flex; align-items: center; padding: 4px 10px; gap: 6px; border: 3px solid #97a67c; border-radius: 16px; background: #fff1cc; }
.radio-performers .sprite { width: clamp(42px, 10dvh, 75px); height: auto; }.radio-performers span:last-child { font-size: 13px; }
.radio-activity footer { display: flex; gap: 8px; align-items: center; }
.radio-activity footer p { flex: 1; margin: 0; color: #416958; font-size: 14px; font-weight: 700; }
.radio-activity footer button { min-width: 48px; min-height: 44px; border: 2px solid #a6aa7b; border-radius: 15px; background: #fff0b8; font-size: 25px; }
.radio-activity footer [data-radio-next] { background: #b9e5bb; min-width: 72px; }
.radio-hint { outline: 4px solid #eba747 !important; outline-offset: 2px; }
.radio-success .radio-bubble { background: #e4ffd1; }.radio-success .radio-signal { opacity: 1; }.radio-success .radio-console { border-color: #599b76; }
@keyframes radio-wobble { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@media (max-height: 420px) and (orientation: landscape) {
  .radio-activity header > span, #modal[data-kind="radio-task"] .story-ribbon { display: none; }
  .in-story-lesson .radio-activity { height: 100%; }
  .radio-activity h2 { font-size: 18px; }.radio-workbench { padding: 3px 10px; gap: 8px; }
  .radio-console { padding: 4px 10px; border-width: 3px; border-radius: 18px; }
  .radio-dial { height: 13px; }.radio-signal { height: 8px; }.radio-wires { height: 9px; }
  .radio-loop > span { width: min(17%, 16dvh); }
  .radio-performers .sprite { width: 38px; }.radio-activity footer p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .theme-radio .story-prop { animation: none; } }
.radio-cables { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.radio-cables path { fill:none; stroke:#488b75; stroke-width:5px; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.radio-sockets, .radio-plugs { position:relative; }
.radio-loop.playing .sprite { animation:story-drum .5s ease-in-out 16; }
@media (prefers-reduced-motion:reduce) { .radio-loop.playing .sprite { animation:none; } }

/* The stage is the primary surface; tools and the stable character shelf stay secondary. */
.volume-panel { position: relative; z-index: 6; flex: none; }
.volume-panel summary { display: grid; place-items: center; list-style: none; width: 48px; height: 48px; border: 2px solid #bb945c; border-radius: 17px; background: #fff7dfed; cursor: pointer; }
.volume-panel summary::-webkit-details-marker { display: none; }
.volume-panel .volume { position: absolute; top: calc(100% + 10px); right: 0; padding: 12px; border: 2px solid #c5b48d; border-radius: 20px; background: #fff9e9; box-shadow: 0 8px 22px #172f5740; }
.guide-bar { border-width: 1px; box-shadow: none; background: #fffbe9d9; gap: 4px; }
.guide-bar > p { display: none; }
.session-badge { --time-left: 1; min-width: 44px; width: 44px; height: 44px; flex: none; padding: 3px; border: 0; background: conic-gradient(#e7be65 calc(var(--time-left) * 1turn), #71917c55 0); }
.session-badge > span:first-child { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #f7f0d9; font-size: 20px; }
#time-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.empty-slot { width: 72%; height: 22px; min-height: 0; margin-bottom: 12px; border: 2px solid #e8e5bbaa; border-radius: 50%; background: #e9ffba26; box-shadow: 0 0 14px #dcf5c533; transform: perspective(120px) rotateX(15deg); }
.empty-slot > * { display: none; }
.slot::before { background: var(--actor-color); opacity: .25; box-shadow: 0 0 16px var(--actor-color); }
.slot:nth-child(2n) .stage-character { padding-bottom: 7px; }
.slot:has([data-id="computer"]) .stage-character .sprite { width: min(119%, 29dvh, 215px); }
.slot:has([data-id="gray"]) .stage-character .sprite { width: min(137%, 34dvh, 247px); }
.slot.solo .stage-character { background: radial-gradient(ellipse at bottom, #ffdc6b66, transparent 70%); box-shadow: none; }
.character-name { opacity: .8; font-size: 10px; }
.slot.solo .character-name, .slot.muted .character-name { opacity: 1; }
.crew-section { border-width: 1px; background: #f8f1d7dc; box-shadow: 0 3px 0 #6f604c66; }
.crew-card { border: 1px solid #b3ad8788; box-shadow: none; background: #fffbe999; }
.crew-card.on-stage { background: #c5ddac66; border-color: #82a46b88; box-shadow: inset 0 -3px #739e70; }
.radio-stage .crew-section { background: #163d42de; border-color: #82a693; box-shadow: 0 3px #16373c; }
.radio-stage .crew-picker { background: transparent; }
.radio-stage .crew-card { color: #f4e8c9; background: #97c4b511; border-color: #9cd8be33; }
.radio-stage .crew-card.on-stage { background: #a2e5c52a; box-shadow: inset 0 -3px #a4ddb7; }
.radio-stage .guide-bar { background: #224a4ade; border-color: #88b6a0; color: #f8eac9; }
.radio-stage .guide-bar button { color: #3d5543; }
.radio-stage .character-name { background: #183e45cf; color: #ffedbd; }
.radio-stage .beat-rail span { width: 14px; height: 5px; border-radius: 3px; background: #83a48c66; }
.radio-stage .beat-rail span.active { background: #ffda8a; box-shadow: 0 0 9px #ffca73; }
.sprite[data-pose] { background-image: url('assets/8d28858def83fd66/story-states-v1.webp'); background-size: 200% 200%; }
.sprite[data-pose="surprised"] { background-position: 0 0; }.sprite[data-pose="confused"] { background-position: 100% 0; }
.sprite[data-pose="king"] { background-position: 0 100%; }.sprite[data-pose="bow"] { background-position: 100% 100%; }
.theme-king { --story-tint: #d8b477; }
.theme-king .story-prop { display: none; }
.theme-king .story-cast { gap: 1%; inset: 12% 7% 4%; }
.theme-king .story-cast > div { position: relative; width: 28%; }
.theme-king.phase-mystery .story-cast { justify-content: center; }
.theme-king.phase-mystery .story-cast > div { width: 47%; }
.theme-radio .story-cast { inset: 12% 17% 4%; }
.theme-radio .story-cast > div { width: 45%; }
.theme-radio .story-prop { top: 14%; font-size: clamp(35px, 9dvh, 90px); }
.story-cast > .story-singing { filter: drop-shadow(0 0 12px #ffd971); }
.story-crown { position: absolute; top: -9%; left: 36%; font-size: clamp(24px, 6dvh, 50px); color: #ffcb49; transform: rotate(-9deg); text-shadow: 1px 2px #895e2a; }
.story-card-art { overflow: hidden; border-radius: 16px; }
.story-card.theme-radio .story-card-art, .story-card.theme-king .story-card-art { background: url('assets/8d28858def83fd66/radio-stage-v1.webp') center / cover; }
.story-card.theme-radio .story-card-art b { font-size: 48px; filter: drop-shadow(0 0 8px #ffc985); }
[data-cover="star-lamps"]::after { content: '✦　✦'; position: absolute; top: 5%; left: 20%; color: #fff487; font-size: 27px; text-shadow: 0 0 9px #e5af33; }
.radio-sockets button { flex-direction: column; gap: 1px; height: clamp(65px, 16dvh, 108px); }
.radio-sockets .sprite { width: clamp(40px, 10dvh, 67px); height: auto; }
.radio-sockets .radio-shape { width: 24px; height: 24px; }
.radio-lamps button.counted { outline: 3px solid #528956; outline-offset: 3px; }
.radio-count-choices { font-size: 22px; color: #3b765f; letter-spacing: 12px; }

#modal[data-kind="king-task"] { width: min(1040px, calc(100vw - 2 * max(12px, env(safe-area-inset-left), env(safe-area-inset-right)))); height: min(700px, calc(100dvh - 20px)); padding: 10px 14px; overflow: hidden; background: #243e42; color: #fff2cf; border-color: #b99663; }
#modal[data-kind="king-task"] #modal-content { height: 100%; }
#modal[data-kind="king-task"] .modal-close { color: #4c543d; }
.king-activity { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) 48px; gap: 7px; }
.in-story-lesson .king-activity { height: calc(100% - 30px); }
.king-activity header { text-align: center; padding: 0 54px; }
.king-activity header > span { font-size: 11px; color: #d3c498; }
.king-activity h2 { font-size: clamp(17px, 2.5vw, 25px); margin: 2px 0; }
.king-court { position: relative; min-height: 0; overflow: hidden; border-radius: 24px; background: url('assets/8d28858def83fd66/radio-stage-v1.webp') center / cover; container-type: size; }
.king-throne { position: absolute; left: 4%; bottom: 7%; width: 27%; }
.king-throne .sprite { width: 100%; }
.king-bubble { position: absolute; right: 0; top: 0; border-radius: 15px 15px 15px 0; background: #fff2ca; color: #72603e; padding: 3px 12px; font-size: 20px; }
.king-seats { position: absolute; right: 6%; top: 9%; width: 55%; height: 48%; display: flex; justify-content: center; gap: 12%; }
.king-seat { position: relative; width: min(40%, 36cqh); border-bottom: 8px solid #c59759; border-radius: 15px 15px 12px 12px; background: linear-gradient(transparent 15%, #c3996655 15% 85%, #dfb876bb 85%); display: flex; flex-direction: column; align-items: center; justify-content: end; }
.king-seat .sprite { width: 95%; height: auto; max-height: 100%; }
.king-seat > span:last-child { position: absolute; bottom: -25px; color: #ffe6a3; font-size: 16px; letter-spacing: 4px; }
.king-guests { position: absolute; bottom: 4%; right: 4%; width: 60%; height: 30%; display: flex; justify-content: center; gap: 8%; }
.king-guests button { display: flex; align-items: center; justify-content: center; min-height: 48px; min-width: 90px; width: 43%; border-radius: 20px; border: 2px solid #dec290; background: #e6eadad9; color: #38544b; touch-action: none; font-size: 13px; }
.king-guests .sprite { width: min(65%, 30cqh); height: auto; }.king-guests button:disabled { opacity: .35; }
.king-players { position: absolute; inset: 13% 8% 6%; display: flex; align-items: end; justify-content: space-around; gap: 5%; }
.king-players button { position: relative; width: 29%; min-height: 70%; display: flex; flex-direction: column; align-items: center; justify-content: end; color: #ffeac1; font-size: 13px; }
.king-players .sprite { width: min(100%, 68cqh); height: auto; }
.king-players [aria-disabled="true"] { cursor: default; }
.king-players:has(.singing) button:not(.singing) .sprite { opacity: .5; }
.passing-crown { position: absolute; top: -4%; left: 36%; opacity: .18; font-size: clamp(30px, 10cqh, 62px); color: #ffd369; transform: rotate(-7deg); }
.singing .passing-crown { opacity: 1; text-shadow: 0 0 16px #f1aa58; }
.king-footlight { display: block; width: 64%; height: 10px; border-radius: 50%; margin: 2px 0; background: #4e7975; }
[data-player][aria-pressed="true"] .king-footlight { background: #ffe191; box-shadow: 0 0 15px #fff0bc; }
.king-court .singing .sprite, .king-court.performing .sprite { animation: story-drum .5s ease-in-out infinite; }
.king-activity footer { display: flex; align-items: center; gap: 8px; }
.king-activity footer p { flex: 1; font-size: 13px; margin: 0; }
.king-activity footer button { min-width: 48px; min-height: 44px; border: 2px solid #bd9d6f; border-radius: 15px; background: #fff0b8; color: #42624c; font-size: 25px; }
.king-activity [data-king-next] { background: #c2e3b5; min-width: 72px; }
@media (max-height: 500px) and (orientation: landscape) {
  .volume-panel summary { width: 44px; height: 44px; border-radius: 14px; }
  .radio-sockets .radio-shape { width: 18px; height: 18px; }
  .radio-sockets .sprite { width: 40px; }.radio-sockets button { height: 62px; }
  .king-activity header > span, #modal[data-kind="king-task"] .story-ribbon { display: none; }
  .in-story-lesson .king-activity { height: 100%; }.king-activity { gap: 4px; }
  .king-guests button { font-size: 11px; }.king-activity footer p { font-size: 11px; }
  .king-players button { font-size: 11px; }.king-footlight { height: 6px; }
}
@media (prefers-reduced-motion: reduce) { .king-court .sprite { animation: none !important; } }