/* A mission for a child who cannot read yet (quest-art-room.js): pictures to press, each at least sixty four pixels, "hear it again" always there. */
.studio-mission .beat-acts { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-top: 22px; }
.studio-big { min-width: 120px; min-height: 76px; padding: 10px 22px; border-radius: 22px; flex-direction: column; justify-content: center; gap: 2px; text-align: center; box-shadow: 0 5px 0 color-mix(in srgb, var(--ink) 70%, #000); }
.studio-big:active { transform: translateY(3px); box-shadow: 0 2px 0 color-mix(in srgb, var(--ink) 70%, #000); }
.studio-icon { display: block; width: 44px; height: 44px; }
.studio-icon svg { display: block; width: 100%; height: 100%; }
.studio-word { font: 600 13px/1.2 var(--sans); letter-spacing: .02em; }
.studio-hear { background: #fff; color: var(--ink); }
.studio-go { margin-left: auto; }
.studio-aloud { display: flex; flex-wrap: wrap; gap: 16px; margin: 16px 0 4px; padding: 0; list-style: none; }
.studio-chip { position: relative; width: 112px; min-height: 112px; padding: 8px; border: 3px solid var(--ink); border-radius: 50%; background: var(--chip, #f9e4b8); color: var(--ink); display: grid; place-items: center; align-content: center; gap: 2px; box-shadow: 0 5px 0 var(--ink); cursor: pointer; }
.studio-chip:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.studio-chip img { width: 52px; height: 52px; object-fit: contain; }
.studio-chip-ear { width: 40px; height: 40px; }
.studio-chip-ear svg { width: 100%; height: 100%; }
.studio-chip-word { font: 600 italic 17px/1.1 var(--serif); }
.studio-chip[data-heard="true"]::after { content: ""; position: absolute; right: 2px; top: 2px; width: 26px; height: 26px; border-radius: 50%; background: #bfd9a8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M6 13l5 5 9-10' fill='none' stroke='%23173A32' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; border: 2px solid var(--ink); }
/* On a phone the page stacks in a column and a stage with no width of its own shrinks to the frame's default three hundred pixels: Luz's sim takes the whole width. */
.studio-mission .quest-stage { align-self: stretch; width: 100%; }
/* The little text controls a reader would use are out of the way: the picture of the place is the map. */
.studio-mission .world-hotspots, .studio-mission .world-zoom { display: none; }
.studio-mission .guide-line { font-size: clamp(22px, 5.4vw, 30px); }
.studio-mission .track-finish { display: grid; gap: 12px; justify-items: start; }
.studio-mission .track-finish .studio-big { max-width: 100%; }
.studio-mission .track-finish .studio-word { font-size: 14px; }
.studio-mission .track-finish .btn, .studio-mission #backToDesk { min-height: 72px; border-radius: 22px; padding: 14px 26px; font-size: 20px; }
@media (max-width: 640px) { .studio-big { flex: 1 1 42%; } .studio-go { margin-left: 0; } .studio-chip { width: 104px; min-height: 104px; } }
@media (prefers-reduced-motion: reduce) { .studio-big, .studio-chip { transition: none; } }

/* The line under the sim says what Luz has already said; it only pushed the arrow down the page (the review of 2026-10-01: 66 pixels). */
.studio-mission #questBeat[data-kind="sim"] .guide-line { display: none; }
/* The sim already owns its guide and controls. Give it the entire workspace,
   and keep the parent's continuation below it, never an empty second column.
   This is layout only: the live iframe is not moved or recreated. */
.studio-mission.world-mode .quest-main:has(#questBeat[data-kind="sim"]) { grid-template-columns: minmax(0, 1fr); }
.studio-mission.world-mode .quest-main:has(#questBeat[data-kind="sim"]) .quest-stage { grid-column: 1 / -1; margin-top: 8px; }
.studio-mission.world-mode .quest-main:has(#questBeat[data-kind="sim"]) .quest-conversation { grid-column: 1 / -1; grid-row: 6; margin: 12px 0 0; }
.studio-mission.world-mode .quest-main:has(#questBeat[data-kind="sim"]) .sim-frame { border: 0; border-radius: 0; background: transparent; }
/* The arrow that is the way on pulses once it appears, so a child who cannot read sees where to go. */
.studio-nudge { animation: studio-pulse 1.1s ease-in-out infinite; }
@keyframes studio-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .studio-nudge { animation: none; outline: 4px dashed var(--oxblood, #782d3b); outline-offset: 4px; } }
/* Her own pictures, framed under the close: what she painted, small, held in this page's memory and shown nowhere else. */
.studio-keepsakes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin: 18px 0 8px; padding: 0; list-style: none; }
.studio-frame { margin: 0; padding: 5px; border: 3px solid var(--ink); border-radius: 10px; background: #fffcf3; box-shadow: 0 5px 0 var(--ink); transform: rotate(-1.2deg); }
.studio-keepsakes li:nth-child(even) .studio-frame { transform: rotate(1.4deg); }
.studio-frame img { display: block; width: 100%; height: auto; border-radius: 4px; }
/* The picture card on the story lines is the page's star on this road. Since 2026-10-08 it is inside the room's own frame
   (everything in one screen): it fills the frame when it comes, then rests pinned in the corner, larger than on other
   roads, for a child who reads pictures first. */
.studio-mission .story-card img { aspect-ratio: 16 / 10; }
.studio-mission .story-world .world-stage .story-card:not(.is-full) { width: min(42%, 320px); }
/* On a desktop the room is the mission's painting and fills most of the window's height, not a strip at the top. */
@media (min-width: 1101px) {
  .studio-mission .world-stage { height: min(70vh, 680px); }
}
/* One column for a phone and for a tablet: between 681 and 900 pixels the world grid kept two, and the painting page got half a screen with the lower half empty
   (the review of 2026-10-01, at 820 by 1180). The order is the phone's own (quest-world.css). Wide desktops keep two columns. */
@media (max-width: 1100px) {
  .studio-mission.world-mode .quest-main { display: flex; flex-direction: column; padding-bottom: 24px; }
  .studio-mission.world-mode #questEye { order: 0; margin-top: 16px; }
  .studio-mission.world-mode #questTitle { order: 1; font-size: 36px; margin-top: 6px; }
  .studio-mission.world-mode #questFixes { order: 2; font-size: 15px; margin-bottom: 8px; }
  .studio-mission.world-mode #questKept { order: 3; }
  .studio-mission.world-mode .quest-world { position: relative; top: 0; order: 4; margin-top: 14px; width: 100%; }
  .studio-mission.world-mode .quest-stage { order: 4; position: static; margin-top: 12px; width: 100%; }
  .studio-mission.world-mode .quest-conversation { order: 5; margin-top: 18px; }
  .studio-mission.world-mode #questWhere { order: 5; align-self: start; margin: 18px 0 4px; }
  .studio-mission.world-mode .class-link-row { order: 6; }
  .studio-mission.world-mode .quest-beat { order: 7; margin-top: 4px; padding: 0; }
  .studio-mission.world-mode #questProblem { order: 8; }
  .studio-mission.world-mode .world-stage { height: min(44vh, 420px); min-height: 250px; }
}
.studio-mission .study-world .world-hotspots { display: block; }
.studio-mission .study-world .world-spot { min-width: 64px; min-height: 64px; max-width: 144px; font-size: 18px; white-space: normal; }
.studio-mission .study-world .world-spot:not([data-specimen]) { display: none; }
.studio-mission .study-world .story-card img { object-fit: contain; }
.studio-mission .study-world .world-spot[data-specimen]::after { display: none; }
/* Listening off (voice-fallback-view.js): the colour she heard is tapped on a button as big as the colour buttons, for a child who cannot read. */
.studio-mission .fallback-option { min-width: 112px; min-height: 96px; border-width: 3px; border-radius: 24px; box-shadow: 0 5px 0 var(--ink); }
.studio-mission .fallback-hear { min-width: 96px; min-height: 64px; }