/* Shared offline stage, controls and responsive layout. No external assets. */
:root {
  --ink: #263b57;
  --muted: #607184;
  --cream: #fff9e9;
  --mint: #4ed9cc;
  --purple: #7056b5;
  --yellow: #ffd66f;
  --coral: #f38a87;
  --shadow: 0 7px 0 #293b5720, 0 15px 30px #293b5710;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--cream);
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; border: 0; touch-action: manipulation; }
button:disabled { opacity: .4; cursor: default; }
button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 4px solid #b753db; outline-offset: 4px; }
button { transition: transform .15s, box-shadow .15s, background .15s; }
button:hover:not(:disabled) { transform: translateY(-2px); }
button:active:not(:disabled) { transform: translateY(2px); }
[hidden] { display: none !important; }
.app { position: relative; max-width: 1920px; min-height: 700px; height: 100dvh; margin: auto; padding: 0 3.2vw; display: flex; flex-direction: column; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 85% 30%, #ddf4e9 0, transparent 48%), var(--cream); }
.sky-decor { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sky-decor i { position: absolute; font-size: 80px; color: #86c7ba; opacity: .17; font-style: normal; animation: float 6s ease-in-out infinite; }
.sky-decor i:nth-child(1) { top: 16%; left: -1%; transform: rotate(-15deg); }
.sky-decor i:nth-child(2) { right: 4%; top: 7%; animation-delay: -2s; }
.sky-decor i:nth-child(3) { right: 43%; bottom: 10%; }
.sky-decor i:nth-child(4) { left: 16%; bottom: 8%; animation-delay: -4s; }
.topbar { height: 68px; display: flex; align-items: center; gap: 24px; flex-shrink: 0; border-bottom: 1px solid #263b5715; }
.brand { font-size: 18px; font-weight: 900; background: transparent; padding: 8px 0; }
.brand span { color: #cf8742; margin-right: 6px; }
#stage-label { color: var(--muted); font-size: 14px; margin-left: auto; }
.small-button { background: #ffffffc7; padding: 10px 15px; border-radius: 14px; font-size: 14px; font-weight: bold; border: 1px solid #263b5715; }
.screen { flex: 1; min-height: 0; display: none; flex-direction: column; padding: 20px 0 18px; gap: 16px; }
.screen.active { display: flex; animation: scene-in .35s ease-out; }
.screen.welcome-screen.active { display: grid; grid-template-columns: 1.03fr 1fr; grid-template-rows: minmax(0, 1fr); align-items: center; gap: 30px; }
.eyebrow { letter-spacing: .16em; font-size: 12px; font-weight: 900; color: #6b7890; margin: 0 0 20px; }
.school-signature { display: block; margin: 0; font-size: 15px; line-height: 1.4; letter-spacing: .04em; font-weight: bold; color: #50766f; }
.eyebrow .school-signature { margin-top: 8px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(44px, 4.8vw, 84px); line-height: 1.03; letter-spacing: -.04em; position: relative; margin-bottom: 24px; }
h1 span { color: var(--purple); }
h1 i { font-style: normal; color: #d99841; display: inline-block; transform: rotate(14deg); margin-left: 20px; }
.opening-help { font-size: clamp(18px, 1.7vw, 27px); line-height: 1.5; color: var(--muted); margin-bottom: 24px; }
.button { padding: 15px 24px; font-weight: 900; font-size: clamp(16px, 1.3vw, 22px); border-radius: 20px; box-shadow: var(--shadow); min-height: 54px; }
.primary { background: var(--purple); color: white; border-bottom: 4px solid #4c388b; }
.secondary { background: #fffdf4; border: 2px solid #dce4df; }
.start-actions { display: flex; align-items: flex-start; flex-direction: column; gap: 16px; }
.start-actions > .primary { font-size: clamp(19px, 1.8vw, 28px); padding: 20px 30px; }
.inline-actions, .action-row { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.adult-note { font-size: 13px; color: var(--muted); margin: 20px 0 0; min-height: 18px; }
.hero-scene { position: relative; height: 100%; min-height: 0; max-height: 720px; display: flex; align-items: center; justify-content: center; }
.hero-scene::before { content: ""; position: absolute; width: 92%; aspect-ratio: 1; border-radius: 48% 52% 48% 43%; background: #bbe9dd; border: 12px solid #e0f4e6; transform: rotate(-8deg); z-index: -1; }
.hero-robot { width: 82%; height: 92%; max-width: 560px; margin-top: 20px; z-index: 1; }
.hero-platform { position: absolute; bottom: 8%; left: 10%; width: 80%; height: 14%; border-radius: 50%; background: #a2d6c5; box-shadow: 0 12px 0 #81bcaf; }
.hero-bubble { position: absolute; z-index: 2; top: 3%; right: 1%; background: white; border-radius: 24px 24px 24px 5px; padding: 15px 23px; font-weight: 900; font-size: 22px; transform: rotate(3deg); box-shadow: var(--shadow); }
.hero-bubble span { display: block; font-size: 14px; margin-top: 4px; color: var(--muted); font-weight: normal; }
.scene-caption { position: absolute; bottom: 0; font-size: 10px; letter-spacing: .15em; font-weight: 900; color: #508576; }
.scene-star { position: absolute; font-size: 62px; z-index: 2; color: #c7983b; animation: float 5s ease-in-out infinite; }
.star-one { top: 20%; left: 0; }.star-two { top: 53%; right: 0; animation-delay: -2s; }
.activity-title { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.title-sticker { display: grid; place-items: center; width: 51px; height: 51px; border-radius: 18px; background: var(--yellow); box-shadow: 0 4px 0 #d7ae54; font-size: 26px; font-weight: 900; transform: rotate(-5deg); }
.activity-title p { font-size: 14px; margin: 0 0 5px; color: var(--muted); }
.activity-title h2 { font-size: clamp(24px, 2.25vw, 41px); letter-spacing: -.03em; margin: 0; }
.robot-playground { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; border-radius: 45% 45% 20px 20px; background: radial-gradient(ellipse at 50% 60%, #d5f0df, transparent 60%); }
.play-robot { height: 96%; width: auto; aspect-ratio: 260 / 310; min-height: 0; }
.speech-bubble { position: absolute; top: 13%; right: 2%; max-width: 29%; background: white; border-radius: 28px 28px 28px 0; padding: 22px; box-shadow: var(--shadow); font-size: clamp(20px, 2vw, 32px); font-weight: 900; }
.command-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 0 5%; }
.command { display: flex; align-items: center; justify-content: center; gap: 24px; font-size: 28px; font-weight: 900; padding: 14px; border-radius: 24px; background: var(--yellow); box-shadow: var(--shadow); }
.command:nth-child(2) { background: #b8a4e8; }.command:nth-child(3) { background: #88dacb; }.command.danger { background: #ffb2a8; }
.command i { font-size: 48px; font-style: normal; line-height: 1; }
.mode-switch { margin-left: auto; display: flex; gap: 6px; background: #e5eae3; padding: 5px; border-radius: 18px; }
.mode-switch button { background: transparent; padding: 12px 18px; border-radius: 14px; font-weight: bold; }
.mode-switch [aria-pressed=true] { color: white; background: var(--purple); }
.sound-machine { flex: 1; min-height: 0; background: #92cbbf; border: 7px solid #6ca99d; border-radius: 32px; padding: 14px 25px 22px; box-shadow: 0 9px 0 #568d84; display: flex; flex-direction: column; }
.machine-lights { display: flex; justify-content: center; gap: 13px; height: 20px; }
.machine-lights i { width: 9px; height: 9px; background: #ffe69c; border-radius: 50%; }
.sound-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.sound-card { min-height: 0; border-radius: 23px; background: #fff9e8; border: 4px solid #ffffff80; font-weight: 900; font-size: 25px; display: flex; align-items: center; justify-content: center; gap: 20px; box-shadow: 0 6px 0 #426b6b35; }
.sound-card .sound-instrument-icon { display: block; width: 54px; height: 62px; flex: 0 0 auto; }
.sound-card:nth-child(2), .sound-card:nth-child(6) { background: #ffe0a4; }
.sound-card:nth-child(3), .sound-card:nth-child(4) { background: #e1d6fa; }
.sound-icon { font-size: clamp(52px, 6vw, 100px); }
.sound-card.active, .sound-card.answer { border-color: #614297; box-shadow: 0 0 0 5px #fff0a0; }
.sound-card.try-again { border-style: dashed; border-color: #916893; }
.guess-controls { display: flex; align-items: center; gap: 14px; }
.guess-controls p { margin: 0 auto 0 0; font-size: 18px; max-width: 44%; }
.rhythm-card { display: flex; flex: 1; min-height: 0; align-items: center; justify-content: center; gap: 45px; background: #e4d8f4; border-radius: 40px; border: 6px solid white; position: relative; }
#rhythm-icon { font-size: clamp(110px, 14vw, 240px); }
.rhythm-card h3 { font-size: clamp(32px, 4vw, 66px); margin-bottom: 14px; }
.rhythm-card p { font-size: 23px; }
.rhythm-robot { width: 19%; align-self: end; }
.rhythm-buttons, .maestro-controls { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; }
.rhythm-buttons button, .maestro-controls button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: white; box-shadow: 0 5px 0 #d6ddd4; border-radius: 19px; padding: 10px 6px; font-size: 40px; font-weight: 900; }
.rhythm-buttons span, .maestro-controls span { font-size: 17px; }
.builder-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 255px 1fr; gap: 24px; }
.band-cards { display: grid; grid-template-rows: repeat(5, 1fr); gap: 12px; min-height: 0; }
.band-card { display: flex; align-items: center; text-align: left; border-radius: 20px; background: white; padding: 3px 12px; border: 3px solid #dddcca; font-size: 17px; font-weight: 900; min-height: 0; gap: 10px; }
.band-card .character { height: 100%; aspect-ratio: 1; max-width: 86px; flex-shrink: 0; }
.band-card small { display: block; font-size: 13px; color: var(--muted); margin-top: 5px; }
.band-card[aria-pressed=true] { background: #d5f4e5; border-color: #58a990; }
.band-card.pending { border-style: dashed; }
.magic-stage { background: radial-gradient(ellipse at 50% 90%, #486e91, #283f66 75%); border-radius: 35px; border: 7px solid #d0a064; box-shadow: 0 6px 0 #a77e52; color: #fff3d2; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.magic-stage::before, .magic-stage::after { content: ""; pointer-events: none; position: absolute; top: -14px; width: 12%; height: 70%; border-radius: 0 0 95% 10%; background: repeating-linear-gradient(90deg, #ad687f 0 18px, #925972 20px 38px); z-index: 0; opacity: .8; }
.magic-stage::before { left: 0; }.magic-stage::after { right: 0; transform: scaleX(-1); }
.stage-stars { text-align: center; font-size: 28px; letter-spacing: 20px; color: #ffe4aa; padding: 25px 0 0; }
.stage-members { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; align-items: end; justify-content: center; padding: 0 3% 20px; gap: 1%; }
.musician { width: 25%; max-width: 300px; height: 100%; display: flex; align-items: center; justify-content: end; flex-direction: column; min-height: 0; }
.musician .character { width: 100%; max-height: calc(100% - 44px); aspect-ratio: 260 / 310; }
.musician b { font-size: 17px; margin-top: 0; }
.musician small { font-size: 12px; margin-top: 4px; opacity: .8; }
#builder-message { font-size: 17px; text-align: center; margin: 0; padding: 12px 15px; background: #152d4a60; position: relative; }
.maestro-stage { flex: 1; min-height: 260px; }
.maestro-speech { position: relative; z-index: 1; padding: 13px 12%; text-align: center; font-size: clamp(17px, 1.6vw, 26px); font-weight: 900; min-height: 56px; }
.maestro-stage .stage-members { padding-bottom: 5px; }
.pulse-board { display: flex; gap: 20px; align-items: center; justify-content: center; padding: 8px; background: #152d4a70; z-index: 1; font-size: 14px; height: 46px; }
#maestro-pulse { display: flex; gap: 9px; }
#maestro-pulse i { width: 13px; height: 13px; border-radius: 50%; background: #7a90a9; }
#maestro-pulse i.lit { background: #ffe49f; box-shadow: 0 0 8px #ffe49f70; }
#maestro-baton { display: inline-block; font-size: 26px; }
.maestro-controls { grid-template-columns: 1.4fr repeat(6,1fr); }
.maestro-controls button { font-size: 32px; padding: 9px 5px; }
.maestro-controls i { font-style: normal; }
.maestro-controls button:first-child { background: #afdfcb; }
#maestro-quiet, #maestro-stop { background: #ffded1; }
.educator-moment { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 38px; }
#leader-card-copy { font-size: 12px; max-width: 320px; }
.educator-sequence { position: absolute; inset: 0; z-index: 3; background: radial-gradient(ellipse at center, #435787, #263958); display: flex; flex-direction: column; align-items: stretch; padding: 15px 20px 10px; }
.educator-copy { text-align: center; font-size: clamp(19px, 1.75vw, 29px); font-weight: bold; margin: 0 auto; max-width: 94%; min-height: 50px; }
.honour-scene { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; }
.educator-to { position: relative; z-index: 2; height: 100%; width: auto; aspect-ratio: 260 / 310; }
.leader-hearts { position: absolute; inset: 0 6%; display: flex; justify-content: space-between; align-items: center; }
.leader-heart { display: flex; flex-direction: column; text-align: center; width: 28%; position: relative; padding: 5px; border-radius: 22px; }
.leader-heart > span { color: var(--leader); font-size: clamp(40px, 5vw, 78px); line-height: 1; }
.leader-heart b { font-size: clamp(24px, 2.5vw, 40px); color: var(--leader); }
.leader-heart small { font-size: 13px; margin-top: 3px; }
.leader-heart.selected { outline: 3px solid #ffdf87; background: #ffffff12; }
.gift-baton { width: 75px; height: 6px; background: #fff9d9; border-right: 20px solid #bc9359; border-radius: 5px; position: absolute; top: 30%; left: calc(50% - 38px); transform: translateY(20px) rotate(-25deg); opacity: 0; }
.gifted .gift-baton { opacity: 1; transform: translateY(0) rotate(-25deg); transition: transform .8s, opacity .8s; }
.handoff .selected .gift-baton { animation: baton-pass 1s ease-out; }
.idea-bulb { position: absolute; left: 55%; top: 0; font-size: 44px; z-index: 4; animation: bulb .7s ease-out; }
.sequence-actions { display: flex; gap: 14px; justify-content: center; align-items: center; }
.director-choices { display: flex; gap: 12px; justify-content: center; }
.director-choices .button { font-size: 16px; padding: 12px 16px; min-height: 48px; }
.sequence-actions > .small-button { font-size: 12px; padding: 10px; }
.maestrina-surprise { position: absolute; bottom: 14px; left: 25%; right: 25%; z-index: 5; text-align: center; background: #ffe1e9; color: #61395c; padding: 12px; border-radius: 20px; font-weight: 900; pointer-events: none; }
.celebrate::after, .final-screen::before { content: "♪　♥　✦　♫　♥　✦　♪"; position: absolute; inset: 30% 5% auto; color: #ffe1a6; font-size: 36px; letter-spacing: 10px; pointer-events: none; animation: confetti 3s ease-in-out infinite; }
.concert-stage { flex: 1; min-height: 0; }
.concert-command { display: flex; align-items: center; justify-content: center; gap: 25px; padding: 20px 0 6px; z-index: 1; }
.concert-command > b { font-size: 65px; }
.concert-command h3 { font-size: clamp(25px, 2.7vw, 44px); margin-bottom: 5px; }
.concert-command p { font-size: 18px; margin: 0; }
.progress-track { height: 12px; border-radius: 8px; background: #d8e0d4; overflow: hidden; }
#concert-progress { width: 0; height: 100%; background: #8c6bc4; }
.final-screen { text-align: center; align-items: center; justify-content: center; gap: 8px; position: relative; }
.final-screen .eyebrow { margin-bottom: 5px; }
.final-screen h2 { font-size: clamp(38px, 4.1vw, 68px); line-height: 1.05; margin: 0; }
.final-screen h2 span { color: var(--purple); }
.final-friends { display: flex; justify-content: center; width: 70%; flex: 1; max-height: 290px; min-height: 0; gap: 20px; }
.final-friends .musician b, .final-friends .musician small { display: none; }
.final-friends .musician .character { max-height: 100%; }
#event-title { font-size: clamp(23px, 2.3vw, 36px); margin: 0; color: #765c9d; }
#dedication { font-size: 19px; margin: 0 0 8px; }
.adult-controls { display: flex; align-items: center; justify-content: center; gap: 10px; flex-shrink: 0; min-height: 64px; border-top: 1px solid #263b571a; }
.adult-controls button { background: #eeeee4; border-radius: 11px; padding: 10px 13px; font-size: 13px; font-weight: bold; min-height: 38px; }
.adult-controls .stop-all { background: #ffe0d5; color: #813b41; border: 1px solid #c99589; }
.volume-control { font-size: 12px; display: flex; gap: 7px; align-items: center; }
input[type=range] { width: 95px; accent-color: #7056b5; }
dialog { border: 3px solid #c5d7c8; border-radius: 24px; width: min(700px, 90vw); max-height: 85vh; padding: 30px; color: var(--ink); background: var(--cream); box-shadow: 0 20px 80px #17233b50; }
dialog::backdrop { background: #21334a99; }
dialog h2 { margin-bottom: 15px; }
dialog p { line-height: 1.6; font-size: 15px; }
dialog label { display: block; font-weight: bold; margin: 15px 0; }
dialog select { max-width: 100%; padding: 8px; background: white; border: 1px solid #becdc5; border-radius: 8px; }
dialog details { border: 1px solid #c9d7c7; padding: 15px; border-radius: 12px; margin: 20px 0; }
dialog summary { cursor: pointer; font-weight: bold; }
.toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 20; background: #243b57; color: white; padding: 16px 24px; border-radius: 18px; max-width: 90%; box-shadow: var(--shadow); }
.screen, .character { user-select: none; -webkit-user-select: none; }
.is-stopped *, .is-stopped *::after, .is-stopped *::before { animation-play-state: paused !important; }
.reduced-motion *, .reduced-motion *::after, .reduced-motion *::before { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (min-width: 1600px) {
  .topbar { height: 82px; }.adult-controls { min-height: 76px; }.screen { gap: 24px; padding: 28px 0; }
  .builder-layout { grid-template-columns: 310px 1fr; }.band-card { font-size: 21px; }
  .command-row { padding: 0 9%; }.command { padding: 24px; font-size: 34px; }
  .maestro-controls button { padding: 16px; }.maestro-controls span { font-size: 22px; }
  .musician b { font-size: 23px; }.musician small { font-size: 16px; }
  .musician .character { max-height: calc(100% - 55px); }
  .maestro-speech { min-height: 75px; }.pulse-board { height: 56px; font-size: 19px; }
  .educator-copy { min-height: 75px; }.leader-heart small { font-size: 20px; }
}
@media (max-width: 1000px) {
  .app { height: auto; min-height: 100dvh; padding: 0 20px; overflow: visible; }.screen { min-height: 600px; }
  .screen.welcome-screen.active { grid-template-columns: 1fr 1fr; }.hero-scene { min-height: 450px; }
  .topbar { gap: 12px; }#stage-label { display: none; }#reduce-motion { margin-left: auto; }
  .adult-controls { flex-wrap: wrap; padding: 12px 0; }.builder-layout { grid-template-columns: 190px 1fr; min-height: 400px; }
  .speech-bubble { font-size: 18px; padding: 12px; }.play-robot { height: 350px; }
  .maestro-stage { min-height: 370px; }.maestro-controls { gap: 6px; }.maestro-controls span { font-size: 13px; }
  .educator-moment { flex-wrap: wrap; }.musician b { font-size: 14px; }.musician small { font-size: 11px; }
  .guess-controls { flex-wrap: wrap; }.guess-controls p { max-width: none; width: 100%; }
  .concert-stage { min-height: 400px; }.final-friends { min-height: 200px; }
}
@media (max-width: 650px) {
  .screen.welcome-screen.active { display: flex; }.hero-scene { width: 100%; min-height: 430px; }
  h1 { font-size: 48px; }.welcome-copy { width: 100%; }.brand { font-size: 15px; }
  .screen { min-height: 600px; }.activity-title { flex-wrap: wrap; }.activity-title h2 { font-size: 23px; }
  .mode-switch { margin-left: 0; }.sound-grid { grid-template-columns: repeat(2,1fr); }.sound-card { padding: 15px; font-size: 17px; gap: 5px; }.sound-icon { font-size: 43px; }
  .command-row { padding: 0; gap: 8px; }.command { flex-direction: column; gap: 4px; font-size: 18px; }
  .builder-layout { display: flex; flex-direction: column; }.band-cards { grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(3,75px); }.magic-stage { min-height: 340px; }
  .rhythm-card { gap: 10px; min-height: 300px; }#rhythm-icon { font-size: 90px; }.rhythm-card h3 { font-size: 25px; }.rhythm-card p { font-size: 17px; }.rhythm-robot { display: none; }
  .rhythm-buttons { grid-template-columns: repeat(3,1fr); }.maestro-controls { grid-template-columns: repeat(4,1fr); }
  .sequence-actions { flex-wrap: wrap; gap: 5px; }.director-choices { gap: 5px; }.director-choices .button { font-size: 12px; padding: 8px; }
  .leader-hearts { inset: 0; }.leader-heart b { font-size: 19px; }.leader-heart small { font-size: 9px; }.educator-copy { font-size: 17px; }
  .maestrina-surprise { left: 5%; right: 5%; bottom: 80px; }.educator-to { max-width: 42%; }.speech-bubble { max-width: 40%; top: 0; }
}
@keyframes scene-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes float { 0%,100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes confetti { 0%,100% { transform: translateY(-18px) rotate(-3deg); opacity: .2; } 50% { transform: translateY(15px) rotate(3deg); opacity: .8; } }
@keyframes bulb { from { transform: scale(.2) rotate(-20deg); } to { transform: scale(1); } }
@keyframes baton-pass { from { transform: translateX(-90px) rotate(-50deg); opacity: 0; } to { transform: rotate(-25deg); opacity: 1; } }