/* Shared illustrated-game shell, with Rocket Launch presentation. */
body:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) { --rocket-ink: #112747; background: #fff9ee; color: var(--rocket-ink); }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .game-shell {
  width: min(1440px, 100%); padding: max(18px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 24px max(22px, env(safe-area-inset-left));
  grid-template-columns: minmax(0, 2.65fr) minmax(250px, 1fr);
  grid-template-rows: auto auto minmax(380px, 1fr) 78px auto auto auto;
  grid-template-areas: "header header" "scene prompt" "scene phrases" "scene action" "agency agency" "progress progress" "levels levels";
  gap: 14px 22px;
}
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .top-bar { min-height: 74px; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .eyebrow { color: #277e91; letter-spacing: .02em; font-size: .9rem; margin: 0 0 4px; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) h1 { color: var(--rocket-ink); letter-spacing: -.04em; font-size: clamp(1.9rem, 3.2vw, 2.8rem); }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .top-controls { gap: 8px; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) #allDoneButton, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) #repeatGuardToggle { display: none; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .control-button { border: 1px solid #ddd5c8; background: #fffdf8; font-size: .8rem; border-radius: 14px; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .control-button[aria-pressed="true"] { background: #d9ede4; border-color: #b4d9c8; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .stage { height: 100%; min-height: 520px; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .scene-art.space { height: 100%; min-height: 520px; border-radius: 24px; isolation: isolate; overflow: hidden; background: #122f4b; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .rocket-world { position: absolute; inset: 0; background: url('../assets/rocket/moon-launch-world.webp') center center / cover no-repeat; transition: transform 2.5s ease-in-out; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .scene-art .illustrated-rocket { width: 42%; height: 70%; bottom: 18%; left: 50%; transform: translateX(-50%); padding: 0; border: 0; background: transparent; box-shadow: none; animation: none; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .illustrated-rocket > img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; pointer-events: none; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .rocket-tap-cue { bottom: 6%; font-size: .78rem; padding: 7px 14px; background: #fff9ec; border: 0; box-shadow: 0 2px 8px #10284220; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .engine-trail { position: absolute; top: 82%; height: 22%; width: 13%; left: 43.5%; border-radius: 50% 50% 60% 60%; background: linear-gradient(#fff7cc, #ffc976 52%, #e9843d00); opacity: 0; transform-origin: top; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .pad-lights { position: absolute; display: flex; justify-content: center; gap: 10px; left: 50%; bottom: 17%; transform: translateX(-50%); }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .pad-lights i { width: 21px; height: 21px; border: 3px solid #665f5b; border-radius: 50%; background: #d8d1bf; box-shadow: inset 0 1px 4px #0005; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar)[data-power="1"] .pad-lights i:first-child,
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar)[data-power="2"] .pad-lights i:nth-child(-n+2),
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar)[data-power="3"] .pad-lights i { background: #ffe8a1; box-shadow: 0 0 8px #ffd3798a, inset 0 0 2px #fff; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .phrase-bubble { top: 5%; font-size: clamp(1.2rem, 2.1vw, 1.9rem); line-height: 1.15; font-weight: 750; color: #152b46; background: #fff9eb; padding: 13px 23px; border-radius: 23px 23px 23px 5px; max-width: 88%; box-shadow: 0 6px 16px #08213a21; z-index: 5; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .phrase-panel { display: contents; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .prompt { grid-area: prompt; font-size: .86rem; min-height: 2.5em; margin: 0; line-height: 1.3; align-self: end; color: #546775; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .phrase-grid { grid-area: phrases; height: 100%; grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 12px; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .phrase-grid .phrase-button { position: relative; min-height: 120px; padding: 10px 20px; border-radius: 22px; border: 1px solid #ffffff90; box-shadow: 0 3px 0 #22364712; font-size: clamp(1.1rem, 1.7vw, 1.55rem); display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 12px; color: #132b48; text-align: left; transition: transform .15s ease, box-shadow .15s ease; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .phrase-grid .phrase-button:hover { transform: translateY(-2px); }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .phrase-grid .phrase-button:active { transform: translateY(2px); box-shadow: none; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .tone-coral { background: #fce0ce; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .tone-mint { background: #dcecdf; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .tone-blue { background: #cce7f2; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .phrase-grid .phrase-icon { height: 100%; min-height: 82px; width: 90px; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .rocket-card-art { display: block; position: relative; height: 100%; width: 100%; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .rocket-card-art .phrase-picture { height: 100%; width: 100%; max-height: 120px; object-fit: contain; transform: rotate(18deg); }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .pose-lift .phrase-picture { transform: rotate(35deg) translate(5px,-2px); }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .pose-fast .phrase-picture { transform: rotate(60deg) translate(3px,-5px); }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .card-trail { position: absolute; left: 12%; bottom: 14%; width: 14%; height: 40%; background: #eaa456; transform: rotate(35deg); border-radius: 100%; opacity: 0; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .pose-lift .card-trail, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .pose-fast .card-trail { opacity: 1; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .pose-fast .card-trail { height: 55%; transform: rotate(60deg); background: #f7b35d; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .phrase-repeat-cue { position: absolute; right: 12px; top: 8px; font-size: .65rem; background: #ffffff9c; padding: 2px 7px; border-radius: 12px; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .phrase-grid .is-last-used { outline: 2px solid #9274594d; outline-offset: -3px; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .action-row { grid-area: action; grid-template-columns: repeat(2, minmax(0, 1fr)); height: 78px; gap: 8px; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .launch-button { grid-column: 1 / -1; background: #f5c775; color: #172e48; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .launch-button, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .again-button, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .next-button { min-height: 64px; height: 100%; border-radius: 18px; font-size: 1.15rem; padding: 12px; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .again-button { background: #dcecdf; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .next-button { background: #e8e3da; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .regulation-row { grid-area: agency; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 2px 0 0; border-top: 1px solid #e0d8c8; border-bottom: 1px solid #e0d8c8; padding: 12px 0; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .regulation-button { min-height: 72px; background: transparent; border-radius: 0; border-right: 1px solid #e1d8c8; flex-wrap: nowrap; gap: 13px; padding: 7px 10px; font-size: clamp(.9rem, 1.8vw, 1.3rem); }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .regulation-button:last-child { border-right: 0; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .regulation-button .phrase-icon { width: 52px; height: 52px; min-width: 52px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #307caa; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .regulation-button.tone-soft-coral .phrase-icon { background: #d95948; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .regulation-button.tone-soft-mint .phrase-icon { background: #3d947c; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .regulation-button .phrase-picture { width: 30px; height: 30px; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .progress-strip { opacity: .8; margin-top: 12px; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar).first-session-mode .progress-strip { display: none; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .remix-strip { grid-column: 1 / -1; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .purchase-panel { position: fixed; z-index: 30; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; border-radius: 20px; box-shadow: 0 0 0 100vmax #102a4260, 0 16px 50px #102a4240; background: #fffaf0; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .arrival-note { display: none; position: absolute; bottom: 7%; left: 50%; transform: translateX(-50%); color: #fff5de; font-weight: 700; font-size: 1.3rem; white-space: nowrap; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .arrival-orbit { position: absolute; inset: 45% 15% 8%; border: 1px solid #eee7c740; border-radius: 50%; transform: rotate(-15deg); opacity: 0; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) [data-rocket-phase="ready"] .engine-trail { opacity: .85; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) [data-rocket-phase="flying"] .illustrated-rocket { animation: rocket-journey var(--rocket-flight-duration, 2600ms) cubic-bezier(.3,.6,.3,1) both; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) [data-rocket-phase="flying"] .engine-trail { opacity: 1; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) [data-rocket-phase="arrived"] .illustrated-rocket { transform: translate(-50%, -16%) rotate(12deg) scale(.72); }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) [data-rocket-phase="arrived"] .rocket-world { transform: scale(1.12) translateY(12%); }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) [data-rocket-phase="arrived"] .arrival-orbit { opacity: 1; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) [data-rocket-phase="arrived"] .arrival-note { display: block; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) [data-rocket-phase="flying"] .pad-lights, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) [data-rocket-phase="arrived"] .pad-lights { opacity: 0; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .rocket-response[data-response="ready"] .illustrated-rocket { animation: rocket-ready .65s ease; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .rocket-response[data-response="lift"] .illustrated-rocket { animation: rocket-lift .8s ease; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .rocket-response[data-response="fast"] .illustrated-rocket { animation: rocket-boost .75s ease; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .rocket-response[data-response="lift"] .engine-trail, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .rocket-response[data-response="fast"] .engine-trail { opacity: .9; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .power-burst { display: none; }
@keyframes rocket-ready { 50% { transform: translateX(-50%) rotate(-4deg); } }
@keyframes rocket-lift { 50% { transform: translate(-50%, -8%); } }
@keyframes rocket-boost { 50% { transform: translate(-46%, -15%) rotate(9deg); } }
@keyframes rocket-journey { 0% { transform: translateX(-50%); } 20% { transform: translate(-50%, 2%) scale(.98); } 65% { transform: translate(-45%, -85%) rotate(9deg) scale(.55); opacity: .75; } 100% { transform: translate(-50%, -16%) rotate(12deg) scale(.72); opacity: 1; } }
@media (max-width: 760px) {
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .game-shell { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 18px max(12px, env(safe-area-inset-left)); grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto 108px 62px auto auto auto; grid-template-areas: "header" "scene" "prompt" "phrases" "action" "agency" "progress" "levels"; gap: 10px; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .top-bar { flex-direction: row; flex-wrap: wrap; gap: 10px; min-height: 0; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) h1 { font-size: 1.6rem; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .eyebrow { font-size: .7rem; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .top-controls { width: 100%; gap: 6px; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .control-button { min-height: 38px; padding: 7px 10px; font-size: .72rem; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .stage, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .scene-art.space { height: clamp(260px, 38svh, 360px); min-height: 0; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .scene-art.space { border-radius: 20px; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .scene-art .illustrated-rocket { width: 42%; height: 72%; bottom: 16%; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .phrase-bubble { top: 5%; font-size: 1.1rem; padding: 9px 17px; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .rocket-tap-cue { font-size: .62rem; padding: 5px 9px; bottom: 4%; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .pad-lights { gap: 6px; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .pad-lights i { width: 15px; height: 15px; border-width: 2px; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .prompt { font-size: .77rem; min-height: 1.3em; text-align: center; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .phrase-grid { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: 1fr; gap: 8px; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .phrase-grid .phrase-button { display: flex; flex-direction: column; min-height: 0; height: 108px; gap: 2px; padding: 5px 4px 9px; border-radius: 15px; font-size: .88rem; text-align: center; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .phrase-grid .phrase-icon { width: 60px; height: 63px; min-height: 0; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .phrase-grid .phrase-label { min-height: 2.4em; line-height: 1.14; display: grid; align-items: center; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .phrase-repeat-cue { top: 4px; right: 4px; font-size: .5rem; padding: 1px 4px; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .action-row { height: 62px; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .launch-button, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .again-button, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .next-button { min-height: 56px; font-size: 1rem; padding: 8px; border-radius: 14px; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .regulation-row { padding: 7px 0; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .regulation-button { min-height: 64px; flex-direction: column; gap: 5px; padding: 3px; font-size: .73rem; line-height: 1.1; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .regulation-button .phrase-icon { width: 35px; height: 35px; min-width: 35px; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .regulation-button .phrase-picture { width: 24px; height: 24px; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .arrival-note { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .illustrated-rocket, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .rocket-world, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .phrase-bubble { animation: none !important; transition: none !important; }
}
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar).quiet-mode .illustrated-rocket, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar).quiet-mode .rocket-world, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar).quiet-mode .phrase-bubble { animation: none !important; transition: none !important; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar).quiet-mode .engine-trail { opacity: 0; }
/* Explicit dimensions beat the legacy compact-rocket rule on phones. */
body.game-page:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .scene-art.space .illustrated-rocket { width: 42%; height: 70%; bottom: 18%; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .phrase-grid .phrase-label { font-weight: 750; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .regulation-row .regulation-button { background: transparent; }
@media (max-width: 760px) {
  body.game-page:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .scene-art.space .illustrated-rocket { width: 48%; height: 76%; bottom: 15%; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .phrase-grid .phrase-icon { height: 59px; flex: 0 0 59px; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .rocket-card-art, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .rocket-card-art .phrase-picture { height: 59px; max-height: 59px; }
}
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .launch-button:disabled { background: #eae4d8; color: #65727c; box-shadow: none; cursor: default; opacity: 1; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar).quiet-mode .rocket-response[data-response="lift"] .illustrated-rocket { transform: translate(-50%, -6%); }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar).quiet-mode .rocket-response[data-response="fast"] .illustrated-rocket { transform: translate(-48%, -8%) rotate(8deg); }
@media (prefers-reduced-motion: reduce) {
 :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .rocket-response[data-response="lift"] .illustrated-rocket { transform: translate(-50%, -6%); }
 :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .rocket-response[data-response="fast"] .illustrated-rocket { transform: translate(-48%, -8%) rotate(8deg); }
}
@media (max-width: 760px) {
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .stage, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .scene-art.space { height: clamp(120px, calc(100svh - 380px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), 360px); }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .game-shell { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .pose-fast::before, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .pose-fast::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: #3187a7; border-radius: 4px; transform: rotate(-22deg); }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .pose-fast::before { top: 20px; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .pose-fast::after { top: 29px; left: -4px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .game-shell { gap: 7px; grid-template-rows: auto auto auto 96px 48px auto auto auto; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .top-bar { gap: 7px; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) h1 { font-size: 1.4rem; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .control-button { min-height: 34px; padding: 5px 8px; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .phrase-grid .phrase-button { height: 96px; font-size: .8rem; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .phrase-grid .phrase-icon, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .rocket-card-art, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .rocket-card-art .phrase-picture { height: 52px; max-height: 52px; flex-basis: 52px; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .action-row { height: 48px; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .launch-button, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .again-button, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .next-button { min-height: 44px; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .regulation-row { padding: 5px 0; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .regulation-button { min-height: 56px; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .phrase-bubble { font-size: .88rem; padding: 6px 12px; }
}
@media (min-width: 761px) {
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .game-shell { grid-template-rows: auto 32px minmax(240px, min(420px, calc(100svh - 380px))) 64px auto auto auto; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .stage, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .scene-art.space { min-height: 0; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .action-row { height: 64px; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .phrase-grid .phrase-button { min-height: 0; }
}
@media (min-width: 761px) and (max-height: 800px) {
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .phrase-grid .phrase-icon, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .rocket-card-art, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .rocket-card-art .phrase-picture { height: 70px; min-height: 0; max-height: 70px; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .phrase-grid .phrase-button { padding: 8px 14px; font-size: 1.1rem; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .regulation-row { padding: 7px 0; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .regulation-button { min-height: 58px; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .regulation-button .phrase-icon { width: 44px; height: 44px; min-width: 44px; }
}
@media (max-width: 760px) {
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .prompt { height: 2.6em; min-height: 2.6em; display: grid; align-items: center; }
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .stage, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .scene-art.space { height: clamp(120px, calc(100svh - 430px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), 360px); }
}
@media (max-width: 760px) and (max-height: 700px) {
  :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .stage, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .scene-art.space { height: clamp(120px, calc(100svh - 400px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), 360px); }
}
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .again-button, :is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .next-button { color: #17324d; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .arrival-note { padding: 7px 15px; background: #17324deb; border-radius: 20px; color: #fff8e8; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .remix-strip .rocket-card-art { width: 50px; height: 62px; }
:is(.rocket-exemplar, .stars-exemplar, .moon-exemplar, .snack-exemplar, .cookie-exemplar, .juice-exemplar, .train-exemplar) .remix-strip .rocket-card-art .phrase-picture { width: 50px; height: 62px; object-fit: contain; }
.action-icon { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.15em; }

/* Account for a persistent scrollbar on narrow displays without wrapping the header. */
@media(max-width:360px){:is(.rocket-exemplar,.stars-exemplar,.moon-exemplar,.snack-exemplar,.cookie-exemplar,.juice-exemplar,.train-exemplar) .control-button {padding-inline:6px;}}