:root {
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
  color: #39235f;
  background: #c9f4ff;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  height: 100dvh;
  padding: 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 20% 10%, #fff7a8, transparent 28%), linear-gradient(#a8e8ff, #f8c6ff);
}

button { font: inherit; }

.game-shell {
  width: min(100%, 1500px);
  height: calc(100dvh - 28px);
  min-height: 0;
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  background: #fffdf7;
  border: 5px solid #fff;
  border-radius: 30px;
  box-shadow: 0 16px 0 #7352b9, 0 22px 35px #573c7666;
  overflow: hidden;
}

.control-rail {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, auto) auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-right: 4px solid #d7c0f1;
  background: #fffdf7;
}

.play-area {
  min-height: 0;
  min-width: 0;
  display: block;
  overflow: hidden;
}

.game-header, footer {
  min-height: 62px;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(90deg, #ff64a8, #ff9d45, #ffe65a, #6de2a0, #62c6ff, #9875ff);
}

.journey { min-width: 0; min-height: 0; padding: 9px 10px 10px; background: #f5ecff; border-bottom: 3px solid #d7c0f1; overflow: hidden; }
.journey-heading, .journey-heading > div { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.journey-heading h2 { margin: 0; font-size: 15px; }
.map-pin { font-size: 22px; }
.purple { color: #7c4d9e; }
.stars-total { margin: 0; padding: 5px 10px; border-radius: 999px; color: #6a438a; background: #fff; font-size: 13px; font-weight: 900; }
.level-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 8px; padding: 2px 2px 5px; }
.level-button { min-width: 70px; min-height: 50px; border: 3px solid #ccb5df; border-radius: 14px; padding: 3px 4px; cursor: pointer; color: #64407d; background: #fff; font-size: 12px; font-weight: 900; line-height: 1; box-shadow: 0 3px 0 #c4a8d8; }
.level-button .level-icon { display: block; font-size: 21px; }
.level-button small { display: block; margin-top: 2px; font-size: 10px; }
.level-button.active { border-color: #ffbf3f; color: #4c315f; background: #fff8c9; box-shadow: 0 4px 0 #e59a2b; }
.level-button.locked { color: #a296aa; background: #e9e4ec; box-shadow: 0 4px 0 #cbc2cf; }
.level-button:focus-visible { outline: 4px solid #36aee8; outline-offset: 2px; }
.difficulty-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 7px 0 0; padding: 0; border: 0; }
.difficulty-picker legend { grid-column: 1 / -1; margin-bottom: 1px; color: #74558b; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
.difficulty-picker button { min-width: 0; min-height: 36px; padding: 4px 3px; cursor: pointer; border: 3px solid #cfb8df; border-radius: 14px; color: #65407c; background: #fff; box-shadow: 0 3px #c3a6d5; font-size: 12px; font-weight: 900; }
.difficulty-picker button small { display: block; margin-top: 1px; font-size: 9px; }
.difficulty-picker button small { opacity: .75; }
.difficulty-picker button.active { border-color: #f3a92e; background: #fff2a9; box-shadow: 0 3px #dc8e23; }
.difficulty-picker button:disabled { cursor: not-allowed; opacity: .65; }
.difficulty-picker button:focus-visible { outline: 4px solid #36aee8; outline-offset: 2px; }

.stats-bar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; padding: 5px 8px; color: #51376b; background: #fff; border-bottom: 2px solid #eadff3; }
.stat { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 5px 3px; border-right: 2px dashed #e1d2ea; border-bottom: 2px dashed #e1d2ea; }
.stat:nth-child(2n) { border-right: 0; }
.stat:nth-last-child(-n + 2) { border-bottom: 0; }
.stat > span { font-size: 20px; }
.stat small, .stat strong { display: block; line-height: 1.1; }
.stat small { font-size: 9px; letter-spacing: 1px; }
.stat strong { margin-top: 2px; font-size: 15px; }

.eyebrow { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: 2px; color: #fff; }
h1 { margin: -3px 0 0; font-size: clamp(28px, 4vw, 38px); line-height: 1; color: white; text-shadow: 0 4px #7b43a6; }

.round-button, .new-game-button, .play-button {
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  font-weight: 900;
  color: #fff;
  background: #673ab7;
  box-shadow: 0 5px 0 #43237b;
}

.round-button { width: 48px; height: 48px; font-size: 22px; }
.header-actions { display: flex; gap: 10px; }
.book-button { background: #ed3b86; box-shadow: 0 5px 0 #a91e58; }
.round-button:active, .new-game-button:active, .play-button:active { transform: translateY(3px); box-shadow: 0 2px 0 #43237b; }

.clue-card {
  min-height: 0;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #fff8d7;
  border-bottom: 4px solid #f2cf5b;
}

.clue-card p { margin: 0; font-size: clamp(18px, 3vw, 25px); font-weight: 900; text-align: center; }
.clue-star { font-size: 32px; animation: twinkle 1.2s ease-in-out infinite alternate; }
.play-button { padding: 10px 24px; font-size: 20px; background: #ed3b86; box-shadow: 0 5px 0 #a91e58; }

.game-scene {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
}

.game-scene[hidden] { display: none; }

.castle-scene {
  background:
    linear-gradient(90deg, transparent 49%, #ffffff24 50%, transparent 51%) 0 0 / 100px 100px,
    linear-gradient(#ffd9ef 70%, #c989e7 70%);
}

.castle-scene::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 30%;
  background: repeating-linear-gradient(90deg, #b66fd5 0 80px, #a75ec9 80px 84px);
  z-index: -2;
}

.window {
  position: absolute;
  top: 8%;
  width: 19%;
  height: 28%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 10px solid #9b61c5;
  border-radius: 90px 90px 8px 8px;
  background: linear-gradient(#65cfff, #dff8ff);
  font-size: clamp(32px, 7vw, 70px);
}
.window-left { left: 6%; }
.window-right { right: 6%; }

.banner { position: absolute; top: 0; width: 10%; height: 23%; display: grid; place-items: center; color: #fff; font-size: 30px; background: #ef477f; clip-path: polygon(0 0,100% 0,100% 82%,50% 100%,0 82%); }
.banner-left { left: 29%; }
.banner-right { right: 29%; background: #5b8fea; }

.throne {
  position: absolute;
  left: 38%;
  bottom: 15%;
  width: 24%;
  height: 48%;
  display: grid;
  place-items: center;
  border: 8px solid #ffd64a;
  border-radius: 48% 48% 12px 12px;
  color: #ffd64a;
  background: linear-gradient(90deg, #a93a9d, #e15dba, #a93a9d);
  box-shadow: inset 0 0 0 7px #7b2578, 0 10px #7a4a8f;
  font-size: clamp(45px, 8vw, 80px);
}

.rug { position: absolute; left: 16%; right: 16%; bottom: -7%; height: 25%; border: 7px solid #ffd64a; border-radius: 50%; background: repeating-radial-gradient(ellipse, #ff6b89 0 20px, #ff9d45 21px 40px, #ffe55e 41px 58px, #57d39b 59px 76px, #5db8ff 77px 94px, #a76dea 95px 112px); z-index: -1; }

.spy-object {
  position: absolute;
  width: clamp(62px, 10vw, 100px);
  height: clamp(62px, 10vw, 100px);
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: clamp(42px, 7vw, 74px);
  filter: drop-shadow(0 5px 2px #4a286644);
  transition: transform 160ms ease, opacity 200ms ease;
}
.spy-object:hover, .spy-object:focus-visible { transform: scale(1.15) rotate(-4deg); outline: 5px solid #fff; background: #fff6; }
.spy-object.found { animation: found 700ms ease both; pointer-events: none; }
.spy-object.wrong { animation: wobble 350ms ease; }
.castle-scene .spy-object img { width: 118%; height: 118%; object-fit: contain; pointer-events: none; }
.castle-scene .spy-object.decoy { width: clamp(46px, 7.5vw, 76px); height: clamp(46px, 7.5vw, 76px); z-index: 2; }

.crown { left: 45%; top: 7%; }
.jewels { left: 8%; bottom: 9%; }
.hairbrush { right: 9%; bottom: 9%; transform: rotate(-25deg); }
.unicorn { left: 23%; bottom: 18%; }
.narwhal { right: 23%; top: 28%; }
.jellyfish { right: 5%; top: 35%; }
.octopus { left: 5%; top: 36%; }
.golden-key { left: 31%; top: 20%; transform: rotate(18deg); }
.teacup { right: 34%; bottom: 4%; }
.starfish { left: 17%; top: 43%; transform: rotate(-12deg); }
.treasure-chest { right: 15%; bottom: 26%; }
.seashell { right: 2%; top: 13%; transform: rotate(12deg); }

.celebration { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti { position: absolute; top: -30px; font-size: 28px; animation: fall 1.8s ease-in forwards; }

footer { min-height: 58px; padding: 8px 10px; background: #fff; }
.parent-links { display: flex; gap: 8px; font-size: 11px; font-weight: 800; }
.parent-links a { color: #705583; }
.progress { display: flex; gap: 7px; }
.progress-dot { width: 18px; height: 18px; border: 3px solid #9e87bd; border-radius: 50%; background: #eee5fa; }
.progress-dot.done { background: #ffe14d; border-color: #f09d23; }
.new-game-button { min-height: 40px; padding: 7px 15px; background: #39a974; box-shadow: 0 4px 0 #1d704b; }

.level-complete { width: min(90%, 440px); padding: 28px; border: 5px solid #fff; border-radius: 30px; color: #51346e; background: #fff9df; box-shadow: 0 12px 0 #7245a3; text-align: center; }
.level-complete::backdrop { background: #31164dbb; backdrop-filter: blur(4px); }
.level-complete .trophy { margin-top: -5px; font-size: 70px; animation: twinkle .7s ease-in-out infinite alternate; }
.level-complete h2 { margin: 5px 0; font-size: 32px; }
.earned-stars { margin: 12px; font-size: 44px; letter-spacing: 7px; }
.complete-actions { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
.complete-actions button { padding: 12px 20px; }
.secondary-button { cursor: pointer; border: 3px solid #8150aa; border-radius: 999px; color: #684184; background: #fff; font-weight: 900; }

.sticker-dialog { width: min(94%, 760px); padding: 26px; border: 5px solid #fff; border-radius: 30px; color: #51346e; background: #fffaf0; box-shadow: 0 12px 0 #7245a3; text-align: center; }
.sticker-dialog::backdrop { background: #31164dcc; backdrop-filter: blur(5px); }
.sticker-dialog h2 { margin: 4px 0; font-size: clamp(26px, 5vw, 38px); }
.dialog-close { position: absolute; right: 14px; top: 12px; width: 42px; height: 42px; cursor: pointer; border: 0; border-radius: 50%; color: #694584; background: #eadff2; font-size: 27px; font-weight: 900; }
.sticker-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.sticker-choice { min-height: 150px; padding: 8px; cursor: pointer; border: 4px solid #e1caed; border-radius: 24px; color: #5d3b73; background: linear-gradient(#fff,#f4ebfa); box-shadow: 0 6px #c8a9dc; transition: transform .15s ease, border-color .15s ease; }
.sticker-choice:hover, .sticker-choice:focus-visible { transform: translateY(-4px) rotate(-1deg); border-color: #ffbc3e; outline: 0; }
.sticker-choice img { width: 105px; height: 105px; object-fit: contain; filter: drop-shadow(0 5px 3px #40255240); }
.sticker-choice .fallback { display: block; font-size: 70px; }
.sticker-name { display: block; margin-top: -3px; font-weight: 900; text-transform: capitalize; }

.sticker-book-dialog { width: min(96%, 900px); padding-bottom: 20px; }
.book-heading { display: flex; align-items: end; justify-content: space-between; padding-right: 40px; text-align: left; }
.book-heading h2 { margin: 0; }
.book-tabs { display: flex; gap: 8px; margin: 16px 0 8px; overflow-x: auto; padding: 4px 4px 8px; }
.book-tab { position: relative; min-width: 65px; min-height: 55px; cursor: pointer; border: 3px solid #d2bfdf; border-radius: 16px; background: #fff; box-shadow: 0 4px #c3a7d4; font-size: 27px; }
.book-tab.active { border-color: #ffbb39; background: #fff3b1; box-shadow: 0 4px #e29a25; }
.book-tab small { position: absolute; right: 4px; top: 3px; min-width: 18px; padding: 2px; border-radius: 10px; color: #fff; background: #7e51a1; font-size: 10px; font-weight: 900; }
.book-instructions { margin: 4px 0 9px; color: #74568a; font-size: 13px; font-weight: 800; }
.sticker-page { position: relative; height: min(54vh, 470px); min-height: 330px; overflow: hidden; touch-action: none; cursor: crosshair; border: 10px solid #fff; border-radius: 22px; box-shadow: inset 0 0 35px #31204933, 0 5px 15px #4b2f6633; }
.page-decoration { position: absolute; inset: 0; pointer-events: none; opacity: .8; }
.book-castle { background: linear-gradient(#99dffc 0 55%,#e9add4 55% 78%,#a574c5 78%); }.book-castle .page-decoration { background: linear-gradient(90deg,transparent 47%,#ffffff25 48% 52%,transparent 53%) 0 0/90px 90px; }
.book-arcade { background: radial-gradient(circle,#ff4fa3 0 3px,transparent 4px) 0 0/48px 48px,linear-gradient(#171138 0 72%,#38255c 72%); }.book-arcade .page-decoration { top:72%; background:repeating-linear-gradient(45deg,transparent 0 29px,#4de4eb44 30px 32px),repeating-linear-gradient(-45deg,transparent 0 29px,#f64fa444 30px 32px); }
.book-ocean { background: linear-gradient(#2ac9e2,#087fb6 72%,#f4d486 72%); }.book-ocean .page-decoration { background: radial-gradient(circle at 10% 20%,transparent 0 9px,#d5fbff88 10px 12px,transparent 13px),radial-gradient(circle at 85% 40%,transparent 0 14px,#d5fbff66 15px 17px,transparent 18px); }
.book-jungle { background: linear-gradient(#5acbd1,#388d60 48%,#175039); }.book-jungle .page-decoration { background: radial-gradient(ellipse at 5% 0,#154d36 0 28%,transparent 29%),radial-gradient(ellipse at 80% 0,#28764a 0 34%,transparent 35%); }
.book-zoo { background: linear-gradient(#8bdff0 0 52%,#8ac568 52% 78%,#e7c58a 78%); }.book-zoo .page-decoration { background: linear-gradient(100deg,transparent 44%,#ffe9bd 45% 55%,transparent 56%); }
.book-moon { background: radial-gradient(circle,#fff 0 2px,transparent 3px) 0 0/58px 58px,linear-gradient(#10163c 0 70%,#aeb8c9 70%); }.book-moon .page-decoration { background: radial-gradient(ellipse at 20% 90%,#7f899b 0 8%,transparent 9%),radial-gradient(ellipse at 76% 86%,#8993a5 0 12%,transparent 13%); }
.book-sticker { position: absolute; left: var(--sx); top: var(--sy); width: clamp(72px, 12vw, 120px); height: clamp(72px, 12vw, 120px); padding: 0; cursor: grab; border: 0; border-radius: 50%; background: transparent; transform: translate(-50%,-50%) rotate(var(--sr)); filter: drop-shadow(0 6px 3px #24173e55); touch-action: none; }
.book-sticker:active { cursor: grabbing; }
.book-sticker.selected { outline: 5px dashed #fff56d; outline-offset: 3px; filter: drop-shadow(0 0 10px #fff) drop-shadow(0 6px 3px #24173e55); animation: stickerReady .8s ease-in-out infinite alternate; }
.book-sticker img { width: 116%; height: 116%; object-fit: contain; pointer-events: none; user-select: none; }
.book-sticker .fallback { font-size: clamp(48px, 8vw, 82px); pointer-events: none; }
.book-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.book-footer button { padding: 11px 22px; }

@keyframes stickerReady { to { transform: translate(-50%,-50%) rotate(var(--sr)) scale(1.07); } }

@keyframes twinkle { to { transform: scale(1.25) rotate(15deg); } }
@keyframes found { 45% { transform: scale(1.45) rotate(12deg); opacity: 1; } 100% { transform: scale(.2); opacity: .2; } }
@keyframes wobble { 25% { transform: translateX(-10px); } 50% { transform: translateX(10px); } 75% { transform: translateX(-6px); } }
@keyframes fall { to { transform: translateY(650px) rotate(500deg); opacity: 0; } }

.arcade-scene {
  color: #fff;
  background:
    radial-gradient(circle at 10% 15%, #fc4e9d 0 4px, transparent 5px),
    radial-gradient(circle at 88% 12%, #4ee9ff 0 5px, transparent 6px),
    linear-gradient(#170d38 0 68%, #38275f 68%);
  background-size: 42px 42px, 55px 55px, auto;
}

.arcade-scene::after { content: ""; position: absolute; inset: 68% 0 0; z-index: -2; background: repeating-linear-gradient(135deg, transparent 0 32px, #ec44a933 33px 35px), repeating-linear-gradient(45deg, #332154 0 34px, #19cce944 35px 37px); perspective: 200px; }
.arcade-sign { position: absolute; top: 3%; left: 31%; width: 38%; padding: 7px; border: 4px solid #ffe545; border-radius: 12px; color: #fff; background: #e63b8d; box-shadow: 0 0 12px #ff4aa8, inset 0 0 8px #fff; text-align: center; font-size: clamp(20px, 4vw, 38px); font-weight: 900; letter-spacing: 3px; text-shadow: 2px 3px #572269; }
.neon-line { position: absolute; top: 20%; left: 4%; right: 4%; height: 7px; border-radius: 8px; background: linear-gradient(90deg, #ff4f9c, #ffe54c, #42e8b4, #4acfff, #bd68ff); box-shadow: 0 0 12px #fff; }

.machine { position: absolute; bottom: 19%; width: 20%; height: 48%; padding: 13px 8px 5px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; border: 7px solid #402c68; border-radius: 18px 18px 5px 5px; text-align: center; font-size: clamp(10px, 2vw, 18px); font-style: normal; box-shadow: inset 0 0 0 4px #fff5, 5px 8px #10092288; }
.machine b { line-height: 1; letter-spacing: 1px; text-shadow: 0 2px #3c1858; }
.machine span { width: 80%; padding: 8px 0; border: 4px solid #231747; background: #130d30; font-size: clamp(26px, 5vw, 50px); }
.machine i { font-style: normal; letter-spacing: 5px; }
.machine-one { left: 3%; background: linear-gradient(#694dce, #3bd2d0); }
.machine-two { left: 26%; background: linear-gradient(#ff4e86, #ff9d36); }
.machine-three { right: 3%; background: linear-gradient(#9258e7, #ec49ad); }
.hoop { position: absolute; right: 25%; top: 27%; width: 17%; height: 35%; border: 6px solid #32cdf0; background: repeating-linear-gradient(45deg, transparent 0 12px, #fff2 13px 15px); }
.hoop::before { content: ""; position: absolute; left: 12%; right: 12%; top: 18%; height: 15%; border: 8px solid #f7524f; border-top: 0; border-radius: 50%; }
.hoop span { position: absolute; left: 25%; top: 32%; width: 50%; height: 35%; background: repeating-linear-gradient(55deg, transparent 0 9px, #eee 10px 12px); clip-path: polygon(0 0,100% 0,75% 100%,25% 100%); }
.ball-pit { position: absolute; right: 17%; bottom: 6%; width: 29%; height: 13%; overflow: hidden; border: 5px solid #efcc3e; border-radius: 10px 10px 35px 35px; background: #7747af; font-size: clamp(15px, 3vw, 28px); line-height: 1.3; }
.party-table { position: absolute; left: 3%; top: 24%; width: 19%; height: 14%; display: flex; align-items: center; justify-content: space-around; border-bottom: 10px solid #ffda4b; font-size: clamp(20px, 4vw, 38px); }
.tickets { position: absolute; right: 4%; top: 22%; color: #fdf26d; text-align: center; transform: rotate(4deg); font-size: clamp(10px, 2vw, 17px); font-weight: 900; }
.floor-stars { position: absolute; left: 0; right: 0; bottom: 2%; color: #ffc941; opacity: .75; overflow: hidden; white-space: nowrap; word-spacing: 20px; font-size: clamp(17px, 4vw, 40px); }

.arcade-scene .spy-object { width: clamp(48px, 7.5vw, 74px); height: clamp(48px, 7.5vw, 74px); font-size: clamp(32px, 5.5vw, 55px); z-index: 3; }
.mouse { left: 18%; top: 43%; }
.cheese { right: 8%; top: 38%; transform: rotate(12deg); }
.pizza { left: 8%; top: 24%; transform: rotate(-10deg); }
.coin { left: 49%; bottom: 8%; transform: scale(.72); }
.basketball { right: 30%; top: 39%; }
.hot-wheel { left: 34%; top: 47%; transform: scale(.78) rotate(-8deg); }
.bowling-pin { right: 18%; bottom: 7%; transform: rotate(8deg); }

@media (max-width: 560px) {
  body { padding: 5px; }
  .game-shell { height: calc(100dvh - 10px); }
  .game-shell { border-radius: 20px; border-width: 3px; box-shadow: 0 8px 0 #7352b9; }
  .game-header { min-height: 52px; padding: 5px 10px; }
  .game-header .eyebrow { font-size: 9px; letter-spacing: 1.2px; }
  h1 { font-size: 28px; }
  .round-button { width: 42px; height: 42px; font-size: 20px; }
  .clue-card { padding: 6px 8px; }
  footer { padding: 6px 10px; }
  .journey { padding: 5px 7px 6px; }
  .journey-heading { display: none; }
  .difficulty-picker { overflow-x: auto; padding-bottom: 4px; }
  .difficulty-picker legend { display: none; }
  .difficulty-picker button { flex: 1 0 auto; min-height: 32px; padding: 3px 8px; font-size: 12px; }
  .difficulty-picker button small { display: none; }
  .level-picker { grid-auto-columns: 62px; gap: 5px; margin-top: 3px; padding-bottom: 4px; }
  .level-button { min-width: 62px; min-height: 46px; padding-block: 2px; font-size: 11px; }
  .level-button .level-icon { font-size: 19px; }
  .level-button small { display: none; }
  .stats-bar { padding: 3px 4px; gap: 2px; }
  .stat { gap: 3px; }
  .stat > span { font-size: 16px; }
  .stat small { font-size: 8px; }
  .stat strong { font-size: 13px; }
  .complete-actions { flex-direction: column-reverse; }
  .header-actions { gap: 5px; }.book-button { width: 42px; height: 42px; }
  .sticker-dialog { padding: 22px 12px 16px; }
  .sticker-choices { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sticker-choice { min-height: 125px; }.sticker-choice img { width: 83px; height: 83px; }
  .sticker-page { height: 50vh; min-height: 350px; border-width: 6px; }
  .book-heading { padding-inline: 8px 40px; }.book-heading .stars-total { font-size: 12px; }
}

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

/* Storybook scene system */
.clue-card { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; justify-content: stretch; text-align: left; }
.robot-face { position: relative; width: 52px; height: 46px; display: grid; place-items: center; border: 4px solid #68458d; border-radius: 16px; color: #5a3978; background: linear-gradient(145deg, #fff, #c9f5ff); box-shadow: inset 0 -4px #90d8ea, 0 3px #d0b1e3; font-weight: 900; }
.robot-face::before, .robot-face::after { content: ""; position: absolute; width: 8px; height: 15px; border-radius: 5px; background: #f8cd4d; }
.robot-face::before { margin-left: -56px; } .robot-face::after { margin-right: -56px; }
.robot-face.talking span { animation: robotTalk .25s ease-in-out 3; }
.robot-words { min-width: 0; }
.robot-words small { color: #8855a9; font-size: 10px; font-weight: 900; letter-spacing: 1.4px; }
.robot-words p { text-align: left; }
.target-preview { width: 56px; height: 56px; display: grid; place-items: center; border: 4px solid #ffbd35; border-radius: 16px; background: #fff; box-shadow: 0 4px #dc8d22; font-size: 31px; }
.target-preview img { width: 51px; height: 51px; object-fit: contain; filter: drop-shadow(0 3px 2px #3f275944); }
.target-preview .fallback { font-size: 38px; }
.target-preview.ready { animation: targetPop .55s cubic-bezier(.2,1.6,.4,1); }
.hint-button { min-height: 42px; padding: 7px 14px; cursor: pointer; border: 3px solid #e5a82d; border-radius: 999px; color: #674414; background: #fff3a5; box-shadow: 0 4px #d59225; font-weight: 900; }
.hint-button:active { transform: translateY(3px); box-shadow: 0 1px #d59225; }
.footer-progress small { display: block; margin-top: 5px; color: #705583; font-weight: 800; }

.game-scene { height: auto; min-height: 0; background: var(--scene-bg); background-position: center; box-shadow: inset 0 0 45px #24123844; }
.game-scene::after { content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none; border: 7px solid #ffffff26; background: linear-gradient(90deg, #160d2c1f, transparent 11% 89%, #160d2c1f), linear-gradient(0deg, #160d2c26, transparent 18% 82%, #ffffff14); box-shadow: inset 0 0 38px #1d123640; }
.scene-back, .scene-atmosphere { position: absolute; inset: 0; pointer-events: none; }
.scene-back { z-index: 1; }
.scene-atmosphere { z-index: 4; overflow: hidden; background: radial-gradient(ellipse at 50% 105%, #160d2b35 0, transparent 44%), linear-gradient(115deg, #ffffff24 0 8%, transparent 24% 76%, #3421511f 92%); mix-blend-mode: soft-light; }
.scene-atmosphere::before,
.scene-atmosphere::after { content: ""; position: absolute; pointer-events: none; }
.scene-atmosphere::before { inset: 4% 3% 12%; opacity: .42; background: radial-gradient(circle at 8% 70%, #fff 0 2px, transparent 3px), radial-gradient(circle at 28% 24%, #fff 0 1px, transparent 2px), radial-gradient(circle at 62% 62%, #fff 0 2px, transparent 3px), radial-gradient(circle at 84% 29%, #fff 0 1px, transparent 2px), radial-gradient(circle at 93% 76%, #fff 0 2px, transparent 3px); }
.scene-atmosphere::after { left: -5%; right: -5%; bottom: -15%; height: 32%; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at 8% 70%, #1e17334d 0 12%, transparent 13%), radial-gradient(ellipse at 32% 88%, #251a3c45 0 16%, transparent 17%), radial-gradient(ellipse at 70% 83%, #1e173345 0 18%, transparent 19%), radial-gradient(ellipse at 95% 68%, #251a3c4d 0 14%, transparent 15%); filter: blur(1px); }
.scene-canvas { transition: transform 220ms ease-out; will-change: transform; }
.is-zoomed .scene-canvas { cursor: grab; }
.is-panning .scene-canvas { cursor: grabbing; transition: none; }
.scene-decoy {
  position: absolute;
  left: var(--dx);
  top: var(--dy);
  z-index: 6;
  pointer-events: none;
  opacity: var(--do);
  font-size: clamp(22px, 3.6vw, 38px);
  line-height: 1;
  filter: saturate(.84) contrast(.92) drop-shadow(0 2px 1px #1b143b44);
  transform: translate(-50%, -50%) scale(var(--ds)) rotate(var(--dr));
  user-select: none;
}
.decoy-depth-0 { z-index: 5; filter: saturate(.7) brightness(.88); }
.decoy-depth-1 { z-index: 7; }
.decoy-depth-2 { z-index: 10; filter: saturate(.95) drop-shadow(0 4px 2px #1b143b55); }
.decoy-depth-3 { z-index: 12; filter: saturate(1.04) contrast(1.04) drop-shadow(0 5px 3px #1b143b55); }
.semantic-decoy { opacity: .86; }
.difficulty-hard .round-decoy img, .difficulty-hard .semantic-decoy img { filter: saturate(.72) contrast(.9) brightness(.94) drop-shadow(0 2px 1px #24345b3d); }
.object-occluder { display: none; }
.partially-hidden .object-occluder {
  position: absolute;
  left: 12%;
  right: 7%;
  bottom: 8%;
  z-index: 2;
  display: block;
  height: 34%;
  pointer-events: none;
  border-radius: 60% 44% 42% 56%;
  background: var(--occluder, #73508d);
  background: linear-gradient(155deg, color-mix(in srgb, var(--occluder, #73508d) 72%, white), var(--occluder, #73508d));
  box-shadow: inset 0 3px #ffffff2e, 0 -2px 4px #2b173840;
  transform: rotate(-7deg);
}
.scene-castle { --occluder: #8b5ba5; }
.scene-arcade { --occluder: #241a4d; }
.scene-ocean { --occluder: #167b83; }
.scene-jungle, .scene-zoo, .scene-farm { --occluder: #397444; }
.scene-moon { --occluder: #788296; }
.scene-dino { --occluder: #8d6848; }
.scene-firehouse, .scene-city { --occluder: #6c7180; }
.scene-lab { --occluder: #7564a2; }
.scene-music { --occluder: #713b74; }

.scene-controls {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 6px;
  border: 2px solid #ffffffc9;
  border-radius: 18px;
  background: #342254dc;
  box-shadow: 0 5px 15px #1f143b66;
  backdrop-filter: blur(8px);
}
.scene-zoom-controls, .scene-pan-controls { display: flex; align-items: center; gap: 4px; }
.scene-pan-controls { display: none; padding-top: 5px; border-top: 1px solid #ffffff52; }
.is-zoomed .scene-pan-controls { display: flex; }
.scene-control-button {
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  border: 2px solid #ffffffb8;
  border-radius: 13px;
  color: #fff;
  background: #7d57b8;
  box-shadow: 0 3px #24143f;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}
.scene-control-button:hover, .scene-control-button:focus-visible { border-color: #fff06f; outline: 3px solid #fff; outline-offset: 1px; background: #9d6cdb; }
.scene-control-button:active { transform: translateY(2px); box-shadow: 0 1px #24143f; }
.scene-control-button:disabled { cursor: default; opacity: .42; filter: grayscale(.35); }
.scene-zoom-readout { min-width: 43px; color: #fff; font-size: 12px; font-weight: 900; text-align: center; }
.scene-back > *, .foreground, .landmark { position: absolute; }
.spy-object { left: var(--x) !important; top: var(--y) !important; z-index: 8; width: clamp(70px, 10vw, 112px); height: clamp(70px, 10vw, 112px); transform: translate(-50%, -50%); animation: itemFloat 3.4s ease-in-out infinite; animation-delay: var(--delay); }
.spy-object::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 7%; height: 12%; z-index: -1; border-radius: 50%; background: #1a173644; filter: blur(5px); }
.spy-object img { width: 118%; height: 118%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 5px 3px #24345b55); }
.spy-object .fallback { font-size: clamp(45px, 7vw, 75px); filter: drop-shadow(0 4px 1px #1c183766); }
.difficulty-medium .spy-object img, .difficulty-medium .spy-object .fallback { transform: scale(.82); }
.difficulty-hard .spy-object img, .difficulty-hard .spy-object .fallback { transform: scale(.68); }
.difficulty-medium .spy-object { animation-duration: 4.8s; }
.difficulty-hard .spy-object { animation: none; filter: none; }
.difficulty-hard .spy-object::after { opacity: .18; filter: blur(3px); }
.difficulty-hard .spy-object img { opacity: .94; filter: saturate(.82) contrast(.92) brightness(.96) drop-shadow(0 2px 1px #24345b45); }
.difficulty-hard .spy-object .fallback { opacity: .9; filter: saturate(.78) drop-shadow(0 1px 1px #1c183744); text-shadow: none; }
.spy-object:hover, .spy-object:focus-visible { transform: translate(-50%, -50%) scale(1.1) rotate(-3deg); z-index: 15; }
.spy-object.found { animation: foundNew .7s ease both; }
.depth-0 { z-index: 7; } .depth-1 { z-index: 9; } .depth-2 { z-index: 11; }
.game-scene:not(.difficulty-hard) .depth-0 img, .game-scene:not(.difficulty-hard) .depth-0 .fallback { filter: saturate(.88) brightness(.93) drop-shadow(0 3px 2px #24345b44); }
.game-scene:not(.difficulty-hard) .depth-2 img, .game-scene:not(.difficulty-hard) .depth-2 .fallback { filter: saturate(1.08) contrast(1.03) drop-shadow(0 6px 3px #24345b55); }
.hint-zone { position: absolute; z-index: 6; pointer-events: none; opacity: 0; border: 6px solid #fff28f; border-radius: 40%; box-shadow: 0 0 0 12px #fff28f33, 0 0 35px #fff; }
.hint-zone.show { opacity: 1; animation: hintPulse 1.2s ease-in-out 2; }
.find-burst { position: absolute; z-index: 30; padding: 8px 13px; pointer-events: none; border: 4px solid #fff; border-radius: 999px; color: #63367e; background: #fff37b; box-shadow: 0 6px #e49b29; font-size: clamp(16px,3vw,24px); font-weight: 900; white-space: nowrap; transform: translate(-50%,-50%); animation: findBurst 1.15s ease-out forwards; }
.zone-top { left: 10%; top: 6%; width: 80%; height: 34%; }.zone-bottom { left: 8%; bottom: 4%; width: 84%; height: 35%; }
.zone-left { left: 5%; top: 18%; width: 43%; height: 65%; }.zone-right { right: 5%; top: 18%; width: 43%; height: 65%; }

.scene-castle { --scene-bg: linear-gradient(#8ddcff 0 40%, #edb3d4 40% 72%, #9f6fc2 72%); }
.scene-castle .sky-window { top: 8%; width: 20%; height: 31%; border: 10px solid #8055a4; border-radius: 90px 90px 9px 9px; background: linear-gradient(#73d8ff, #fff5c7); box-shadow: inset 0 0 0 5px #dca5de; }
.scene-castle .sky-window.left { left: 6%; }.scene-castle .sky-window.right { right: 6%; }
.banner-shape { top: 0; width: 11%; height: 24%; background: #e94e8f; clip-path: polygon(0 0,100% 0,100% 80%,50% 100%,0 80%); }
.banner-shape.one { left: 29%; }.banner-shape.two { right: 29%; background: #5f8ce1; }
.throne-shape { left: 39%; bottom: 13%; width: 22%; height: 51%; display: grid; place-items: center; border: 9px solid #ffd65b; border-radius: 50% 50% 12px 12px; color: #ffd65b; background: linear-gradient(90deg,#8b2b86,#e45cb7,#8b2b86); font-size: 75px; box-shadow: inset 0 0 0 7px #792572, 0 12px #73497e; }
.rug-shape { left: 12%; right: 12%; bottom: -8%; height: 28%; border: 7px solid #ffd65b; border-radius: 50%; background: repeating-radial-gradient(ellipse,#f26496 0 22px,#ffad4e 23px 44px,#fbe16d 45px 65px,#63cda3 66px 85px); }

.scene-arcade { --scene-bg: radial-gradient(circle at 15% 15%,#ff4fa3 0 3px,transparent 4px) 0 0/42px 42px,linear-gradient(#171138 0 70%,#38255c 70%); }
.neon-title { left: 32%; top: 4%; width: 36%; padding: 9px; border: 4px solid #ffe052; border-radius: 13px; color: #fff; background: #e5358b; box-shadow: 0 0 18px #ff4fa3,inset 0 0 8px #fff; text-align: center; font-size: clamp(22px,4vw,38px); font-weight: 900; letter-spacing: 3px; }
.machine-row { position: absolute; left: 4%; right: 4%; bottom: 15%; height: 52%; display: flex; gap: 5%; align-items: end; }
.machine-row i { flex: 1; height: 82%; border: 7px solid #31224f; border-radius: 20px 20px 5px 5px; background: linear-gradient(#4bd7e4 0 22%,#14102f 22% 57%,#6d4bd0 57%); box-shadow: inset 0 0 0 4px #ffffff45,5px 9px #0b071c99; }
.machine-row i:nth-child(2) { height: 95%; background: linear-gradient(#ff557f 0 22%,#18102f 22% 57%,#f29e38 57%); }.machine-row i:nth-child(3){background:linear-gradient(#c768f1 0 22%,#15102e 22% 57%,#ed4ca6 57%)}
.arcade-grid { inset: 70% 0 0; background: repeating-linear-gradient(45deg,transparent 0 28px,#4de4eb55 29px 31px),repeating-linear-gradient(-45deg,transparent 0 28px,#f64fa455 29px 31px); }
.prize-booth { right: 4%; top: 24%; padding: 10px; border: 4px solid #ffe359; color: #ffe359; background: #7d3ec0; font-weight: 900; transform: rotate(4deg); }

.scene-ocean { --scene-bg: linear-gradient(#18b8dd,#087fb6 67%,#086393); }
.sun-rays { inset: 0; opacity: .25; background: repeating-conic-gradient(from 190deg at 50% -30%,#fff 0 5deg,transparent 6deg 15deg); }
.bubbles { left: 8%; right: 8%; top: 8%; color: #d8fbff88; font-size: 45px; word-spacing: 100px; }
.reef { bottom: 9%; width: 28%; height: 38%; background: radial-gradient(ellipse at 50% 100%,#f47878 0 10%,transparent 11%),radial-gradient(ellipse at 30% 100%,#f6b04d 0 12%,transparent 13%),radial-gradient(ellipse at 70% 100%,#8d66c6 0 15%,transparent 16%); }
.reef-left { left: -4%; }.reef-right { right: -4%; transform: scaleX(-1); }
.shipwreck { left: 36%; bottom: 12%; width: 30%; height: 29%; border: 9px solid #754636; border-radius: 4px 4px 45% 45%; color: #d9b16a; background: repeating-linear-gradient(#8f573c 0 18px,#75412f 19px 22px); font-size: 55px; text-align: center; transform: rotate(-7deg); }
.sand-bed { left: 0; right: 0; bottom: 0; height: 17%; background: linear-gradient(#ffe398,#d7aa62); clip-path: ellipse(72% 55% at 50% 62%); }

.scene-jungle { --scene-bg: linear-gradient(#53cbd4 0 25%,#368c60 65%,#1d5a3e); }
.canopy { inset: 0 0 auto; height: 34%; background: radial-gradient(ellipse at 10% 0,#165039 0 34%,transparent 35%),radial-gradient(ellipse at 42% 0,#26764a 0 42%,transparent 43%),radial-gradient(ellipse at 82% 0,#174f38 0 38%,transparent 39%); }
.waterfall { left: 42%; top: 18%; width: 18%; height: 65%; border-radius: 45% 45% 20% 20%; background: linear-gradient(90deg,#a3f3ff,#47bad0,#d8fbff); box-shadow: 0 0 20px #c8f8ff; }
.ruin { left: 31%; bottom: 12%; width: 42%; height: 47%; display: grid; place-items: center; border: 16px solid #8b9462; border-bottom: 0; border-radius: 45% 45% 0 0; color: #b8c181; font-size: 70px; box-shadow: inset 0 0 0 6px #596f45; }
.vine { top: 0; width: 7px; height: 42%; background: #1c5b3b; }.vine::after { content:""; position:absolute; left:-22px; top:45%; width:50px; height:26px; border-radius:50%; background:#3b9b52; transform:rotate(-28deg); }
.vine-one { left: 21%; }.vine-two { right: 17%; height: 54%; }
.jungle-floor { left: 0; right: 0; bottom: 0; height: 20%; background: radial-gradient(ellipse at 5% 80%,#52a64d 0 18%,transparent 19%),radial-gradient(ellipse at 90% 80%,#65b957 0 22%,transparent 23%),linear-gradient(#3e7c42,#194c36); }

.scene-zoo { --scene-bg: linear-gradient(#86ddf0 0 48%,#8bc765 48% 76%,#e9c688 76%); }
.zoo-sun { right: 9%; top: 8%; width: 90px; height: 90px; border-radius: 50%; background: #fff29b; box-shadow: 0 0 45px #fff7bd; }
.habitat { bottom: 19%; width: 36%; height: 44%; border: 10px solid #fff2d4; border-radius: 50% 50% 8px 8px; box-shadow: inset 0 0 0 5px #375e5c66; }
.habitat-one { left: 4%; background: linear-gradient(#b8edff 52%,#d9a96a 52%); }.habitat-two { right: 4%; background: linear-gradient(#b9e8ff 52%,#8bc172 52%); }
.zoo-gate { left: 32%; top: 15%; width: 36%; padding: 16px 8px; border: 8px solid #fff1d4; border-radius: 50% 50% 10px 10px; color: #fff; background: #e17d5d; box-shadow: 0 7px #315b60; text-align: center; font-size: clamp(20px,4vw,35px); font-weight: 900; }
.zoo-path { left: 25%; right: 25%; bottom: -2%; height: 32%; background: #ffe6ba; clip-path: polygon(35% 0,65% 0,100% 100%,0 100%); }

.scene-moon { --scene-bg: radial-gradient(circle at 15% 20%,#fff 0 2px,transparent 3px) 0 0/55px 55px,linear-gradient(#10173f,#39356d 70%,#aab4c7 70%); }
.earth { left: 8%; top: 8%; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(ellipse at 40% 30%,#78cd75 0 20%,transparent 21%),radial-gradient(ellipse at 70% 60%,#70c778 0 15%,transparent 16%),#52a9df; box-shadow: inset -15px -12px #2d62a8,0 0 35px #8fdcff88; }
.star-field { left: 28%; right: 5%; top: 8%; color: #f7f2b9; font-size: 34px; letter-spacing: 22px; }
.moon-base { left: 28%; right: 23%; bottom: 20%; height: 36%; display: flex; align-items: center; justify-content: center; gap: 4%; border: 9px solid #d9e7f1; border-radius: 50% 50% 8px 8px; background: linear-gradient(#8e9bb4,#5d6984); box-shadow: inset 0 0 0 5px #ffffff3d; }
.moon-base i { width: 18%; height: 35%; border: 5px solid #d6edf7; border-radius: 50%; background: #ffd978; box-shadow: 0 0 15px #ffd978; }
.crater { left: 8%; bottom: 7%; width: 25%; height: 14%; border-radius: 50%; background: #7b8496; box-shadow: inset 0 8px #656e81,0 4px #d1d8e4; }
.moon-ground { left: 0; right: 0; bottom: 0; height: 30%; background: radial-gradient(ellipse at 20% 60%,#828b9e 0 8%,transparent 9%),radial-gradient(ellipse at 75% 55%,#8992a6 0 12%,transparent 13%),linear-gradient(#b7c0d0,#8e98aa); }

.scene-dino { --scene-bg: url("assets/levels/dino/background.png") center / cover no-repeat; }
.scene-farm { --scene-bg: url("assets/levels/farm/background.png") center / cover no-repeat; }
.scene-firehouse { --scene-bg: url("assets/levels/firehouse/background.png") center / cover no-repeat; }
.scene-lab { --scene-bg: url("assets/levels/lab/background.png") center / cover no-repeat; }
.scene-music { --scene-bg: url("assets/levels/music/background.png") center / cover no-repeat; }
.scene-city { --scene-bg: url("assets/levels/city/background-v2.png") center / cover no-repeat; }
.scene-dino .spy-object, .scene-farm .spy-object, .scene-firehouse .spy-object, .scene-lab .spy-object, .scene-music .spy-object, .scene-city .spy-object { text-shadow: 0 3px 0 #fff, 0 0 8px #fff; }
.difficulty-hard.scene-dino .spy-object, .difficulty-hard.scene-farm .spy-object, .difficulty-hard.scene-firehouse .spy-object, .difficulty-hard.scene-lab .spy-object, .difficulty-hard.scene-music .spy-object, .difficulty-hard.scene-city .spy-object { text-shadow: none; }

.book-dino { background: linear-gradient(#f6b363 0 46%,#ca724e 46% 70%,#e9c078 70%); }
.book-farm { background: linear-gradient(#86dfff 0 48%,#7cbd5a 48% 74%,#d9ad60 74%); }
.book-firehouse { background: linear-gradient(#bfeaff 0 30%,#e65353 30% 74%,#d7d3c9 74%); }
.book-lab { background: linear-gradient(135deg,#b8f0dc,#a28be0 72%,#eaf4f1); }
.book-music { background: radial-gradient(circle at 50% 0,#ffe789,#ac4f9c 45%,#38225f 85%); }
.book-city { background: linear-gradient(#8cddff 0 42%,#f2a264 42% 72%,#777d8d 72%); }

@keyframes itemFloat { 50% { transform: translate(-50%, calc(-50% - 7px)); } }
@keyframes foundNew { 45% { transform: translate(-50%,-50%) scale(1.45) rotate(10deg); opacity:1 } 100% { transform: translate(-50%,-50%) scale(.2); opacity:0 } }
@keyframes hintPulse { 50% { transform: scale(1.04); opacity:.35; } }
@keyframes robotTalk { 50% { transform: scaleY(.6); } }
@keyframes targetPop { 45% { transform: scale(1.2) rotate(-5deg); } }
@keyframes findBurst { 55% { transform: translate(-50%,-110%) scale(1.12) rotate(-2deg); opacity:1; } 100% { transform: translate(-50%,-155%) scale(.9); opacity:0; } }

@media (max-width: 560px) {
  .clue-card { min-height: 64px; grid-template-columns: auto minmax(0,1fr) auto; gap: 7px; }
  .robot-face { display: none; }
  .clue-card .play-button, .clue-card .hint-button { grid-column: auto; width: auto; min-width: 72px; padding: 7px 10px; font-size: 15px; white-space: nowrap; }
  .robot-words small { font-size: 8px; letter-spacing: 1px; }
  .robot-words p { font-size: clamp(15px, 4.4vw, 19px); line-height: 1.05; }
  .target-preview { width: 50px; height: 50px; border-width: 3px; }
  .target-preview img { width: 45px; height: 45px; }
  .game-scene { height: auto; min-height: 0; }
  .spy-object { width: 76px; height: 76px; }
  .footer-progress small { display: none; }
  .level-picker { scroll-snap-type: x mandatory; }
  .level-button { scroll-snap-align: start; }
}

@media (max-height: 700px) and (orientation: landscape) {
  .journey { padding-block: 4px; }.journey-heading { display:none; }.game-scene { height: auto; min-height: 0; }
  .level-picker { margin-top: 3px; }
}

/* Desktop play layout: keep every control in a compact left rail so the scene
   receives the full available viewport height. */
@media (min-width: 821px) {
  .control-rail .game-header {
    min-height: 74px;
    padding: 8px 12px;
  }

  .control-rail .round-button {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .control-rail .header-actions { gap: 6px; }

  .control-rail .clue-card {
    align-content: center;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-areas:
      "face preview"
      "words words"
      "hint play";
    gap: 10px;
    border-bottom: 3px solid #f2cf5b;
  }

  .control-rail .robot-face { grid-area: face; }
  .control-rail .target-preview { grid-area: preview; justify-self: start; }
  .control-rail .robot-words { grid-area: words; }
  .control-rail .robot-words p {
    margin-top: 3px;
    font-size: clamp(17px, 1.45vw, 22px);
    line-height: 1.08;
    text-align: left;
  }
  .control-rail .hint-button { grid-area: hint; width: 100%; padding-inline: 8px; }
  .control-rail .play-button { grid-area: play; width: 100%; padding: 9px 10px; font-size: 18px; white-space: nowrap; }
  .control-rail .clue-card:has(.hint-button[hidden]) .play-button { grid-column: 1 / -1; }

  .control-rail footer {
    flex-wrap: wrap;
    gap: 8px;
  }

  .control-rail .footer-progress { flex: 1 1 155px; min-width: 0; }
  .control-rail .footer-progress small { font-size: 11px; line-height: 1.1; }
  .control-rail .progress { gap: 4px; }
  .control-rail .progress-dot { width: 16px; height: 16px; }
  .control-rail .new-game-button { margin-left: auto; }

  .play-area .game-scene {
    height: 100%;
    min-height: 0;
  }
}

@media (min-width: 821px) and (max-height: 820px) {
  .control-rail { grid-template-rows: auto auto auto auto auto; }
  .control-rail .journey-heading { display: none; }
  .control-rail .journey { padding-block: 5px 7px; }
  .control-rail .difficulty-picker { margin-top: 0; }
  .control-rail .level-picker { gap: 5px; margin-top: 5px; }
  .control-rail .level-button { min-height: 43px; }
  .control-rail .level-button .level-icon { font-size: 18px; }
  .control-rail .level-button small { display: none; }
  .control-rail .clue-card {
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-areas:
      "preview words"
      "hint play";
    padding-block: 7px;
    gap: 7px;
  }
  .control-rail .robot-face { display: none; }
  .control-rail .target-preview { width: 43px; height: 43px; border-width: 3px; }
  .control-rail .target-preview img { width: 38px; height: 38px; }
  .control-rail .robot-words p { font-size: 17px; }
  .control-rail .robot-words small { font-size: 8px; letter-spacing: 1px; }
}

/* Narrow screens retain the familiar stacked control order. */
@media (max-width: 820px) {
  body { padding: 5px; }

  .game-shell {
    width: min(100%, 980px);
    height: calc(100dvh - 10px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "header"
      "journey"
      "stats"
      "clue"
      "scene"
      "footer";
  }

  .control-rail { display: contents; }
  .game-header { grid-area: header; }
  .journey { grid-area: journey; overflow: hidden; }
  .stats-bar { grid-area: stats; grid-template-columns: repeat(4, 1fr); }
  .stat { border-right: 2px dashed #e1d2ea; border-bottom: 0; }
  .stat:nth-child(2) { border-right: 2px dashed #e1d2ea; }
  .stat:last-child { border-right: 0; }
  .clue-card { grid-area: clue; }
  .play-area { grid-area: scene; min-height: 0; }
  footer { grid-area: footer; }

  .difficulty-picker {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
  }
  .difficulty-picker legend {
    display: block;
    margin-right: 4px;
  }
  .difficulty-picker button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
  }
  .difficulty-picker button small { display: inline; font-size: 10px; }
  .level-picker {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(70px, 1fr);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-color: #ad8bc8 transparent;
  }
  .play-area .game-scene { height: 100%; }
}