:root {
  --sky-1: #5dc7ff;
  --sky-2: #d9f6ff;
  --ocean-1: #1f82d9;
  --ocean-2: #125cae;
  --primary: #268cf4;
  --primary-dark: #1267c4;
  --green: #55c966;
  --green-dark: #279347;
  --gold: #ffd24a;
  --coral: #ff786f;
  --help: #9d78f5;
  --ink: #16304d;
  --surface: #fffdf3;
  --surface-2: #eef8ff;
  --shadow: 0 10px 0 rgba(20, 77, 128, .18), 0 18px 32px rgba(13, 57, 99, .16);
  --radius: 28px;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  color: var(--ink);
  background: var(--sky-1);
}

* { box-sizing: border-box; }
html, body, #app { margin: 0; min-height: 100%; width: 100%; }
body {
  min-height: 100dvh;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(var(--sky-1), var(--sky-2) 55%, #7fdaf8);
}

button { font: inherit; color: inherit; }

.app-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.topbar {
  min-height: 74px;
  padding: max(14px, env(safe-area-inset-top)) 18px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(22,48,77,.10);
  z-index: 20;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: clamp(18px, 3.5vw, 28px);
  letter-spacing: -.02em;
}

.brand-mark {
  width: 44px; height: 44px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #5bcf74, #2e9c4b);
  box-shadow: 0 5px 0 #1d7c39;
  color: #fff;
  font-size: 26px;
}

.progress-pips {
  display: flex;
  align-items: center;
  gap: 7px;
}

.pip {
  width: 16px; height: 16px; border-radius: 50%;
  background: #dbe6ef;
  box-shadow: inset 0 0 0 2px rgba(22,48,77,.10);
}
.pip.done { background: var(--gold); box-shadow: 0 3px 0 #d79d19; }
.pip.current { background: var(--primary); box-shadow: 0 3px 0 var(--primary-dark); transform: scale(1.15); }

.icon-button {
  width: 58px; height: 58px;
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 6px 0 rgba(19,71,120,.14);
  display: grid; place-items: center;
  font-size: 28px;
  cursor: pointer;
}
.icon-button:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(19,71,120,.14); }
.icon-button.help { background: #f1eaff; }
.icon-button.audio { background: #e5f5ff; }

.world {
  flex: 1;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 12%, rgba(255,255,255,.9) 0 24px, transparent 25px),
    radial-gradient(circle at 22% 11%, rgba(255,255,255,.88) 0 34px, transparent 35px),
    radial-gradient(circle at 83% 16%, rgba(255,255,255,.86) 0 28px, transparent 29px),
    linear-gradient(var(--sky-1) 0 58%, #38a7e5 58% 65%, #1e78c4 65%);
}

.world::after {
  content: "";
  position: absolute;
  inset: auto -10% -16% -10%;
  height: 42%;
  background:
    radial-gradient(ellipse at 50% 0%, #58be68 0 28%, #2c9152 29% 45%, #855839 46% 62%, #5d3b2d 63%);
  border-radius: 50% 50% 0 0;
  box-shadow: inset 0 14px 0 rgba(255,255,255,.15);
}

.map-route {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 18%;
  width: min(640px, 92vw);
  height: 58%;
  transform: translateX(-50%);
}

.route-line {
  position: absolute;
  inset: 10% 15%;
  border-left: 14px dotted rgba(255,240,177,.95);
  border-radius: 50%;
  transform: rotate(27deg);
  filter: drop-shadow(0 3px 0 rgba(80,57,31,.18));
}

.map-node {
  position: absolute;
  width: 88px; height: 88px;
  border-radius: 50%;
  border: 0;
  display: grid; place-items: center;
  font-size: 34px;
  box-shadow: 0 10px 0 rgba(21,74,105,.28), 0 18px 32px rgba(18,71,101,.22);
  cursor: pointer;
}
.map-node.active {
  background: linear-gradient(#5fe279, #35b65a);
  color: white;
  animation: nodePulse 1.7s ease-in-out infinite;
}
.map-node.done { background: linear-gradient(#ffd95e, #f7ac27); }
.map-node.locked { background: #d7e4ec; opacity: .75; filter: saturate(.3); }
.map-node:nth-of-type(1) { left: 12%; bottom: 6%; }
.map-node:nth-of-type(2) { left: 42%; bottom: 34%; }
.map-node:nth-of-type(3) { right: 8%; top: 4%; }

@keyframes nodePulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

.totem-map {
  position: absolute;
  z-index: 4;
  left: calc(12% + 14px);
  bottom: calc(6% + 86px);
  font-size: 66px;
  filter: drop-shadow(0 8px 8px rgba(0,0,0,.18));
  animation: floaty 2.2s ease-in-out infinite;
}
@keyframes floaty { 50% { transform: translateY(-7px) rotate(-2deg); } }

.mission-card {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  width: min(520px, 88vw);
  border-radius: 30px;
  padding: 18px 22px;
  background: rgba(255,255,255,.93);
  box-shadow: var(--shadow);
  text-align: center;
}
.mission-card .decorative-title {
  font-size: clamp(22px, 5vw, 34px);
  font-weight: 900;
}
.mission-card .tiny {
  margin-top: 4px;
  opacity: .62;
  font-size: 15px;
}

.stage {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 18px;
  position: relative;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.75) 0 45px, transparent 46px),
    linear-gradient(#7ad4ff, #d9f7ff 52%, #8ddf91 53%, #4eb66a);
}

.stage-panel {
  width: min(760px, 96vw);
  min-height: min(620px, calc(100dvh - 112px));
  border-radius: 36px;
  background: rgba(255,253,243,.95);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 4vw, 34px);
  gap: 22px;
  position: relative;
  overflow: hidden;
}

.stage-panel::before {
  content: "";
  position: absolute;
  width: 170px; height: 170px;
  background: rgba(88, 201, 104, .13);
  border-radius: 50%;
  right: -58px; bottom: -58px;
}

.prompt-area {
  min-height: 150px;
  display: grid;
  place-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
}

.speaker-main {
  width: 104px; height: 104px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(#4aaeff, #2387ee);
  color: white;
  box-shadow: 0 10px 0 #1767bc, 0 16px 30px rgba(22,103,188,.25);
  font-size: 48px;
  cursor: pointer;
}
.speaker-main.playing { animation: audioPulse .7s ease-in-out infinite; }
@keyframes audioPulse { 50% { transform: scale(1.08); box-shadow: 0 8px 0 #1767bc, 0 0 0 16px rgba(38,140,244,.15); } }

.answer-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(92px, 1fr));
  gap: clamp(14px, 3vw, 24px);
  position: relative;
  z-index: 2;
}

.answer-card, .tile {
  min-height: 118px;
  border: 3px solid #dceaf3;
  border-radius: 28px;
  background: white;
  box-shadow: 0 8px 0 #c6dae7, 0 14px 22px rgba(24,79,117,.10);
  display: grid;
  place-items: center;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(56px, 12vw, 96px);
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.answer-card:active, .tile:active { transform: translateY(4px); box-shadow: 0 4px 0 #c6dae7; }
.answer-card.correct, .tile.correct {
  border-color: var(--green);
  background: #ebffef;
  animation: correctBounce .55s ease;
}
.answer-card.retry, .tile.retry {
  border-color: var(--coral);
  background: #fff3f1;
  animation: softShake .32s ease;
}
@keyframes correctBounce { 45% { transform: scale(1.08) translateY(-5px); } }
@keyframes softShake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.hunt-field {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-content: center;
}
.hunt-item {
  min-height: 92px;
  border: 0;
  border-radius: 24px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 6px 0 rgba(26,100,142,.16);
  font-size: clamp(42px, 8vw, 72px);
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 800;
}
.hunt-item.found {
  background: #e9ffed;
  color: var(--green-dark);
  transform: scale(.9);
  opacity: .65;
}

.fusion-board {
  flex: 1;
  min-height: 260px;
  display: grid;
  grid-template-columns: 1fr minmax(90px, 130px) 1fr;
  align-items: center;
  gap: 18px;
  position: relative;
}
.fusion-tile, .fusion-drop {
  min-height: 148px;
  border-radius: 30px;
  display: grid;
  place-items: center;
  font-size: clamp(64px, 13vw, 108px);
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 900;
}
.fusion-tile {
  background: #e7f5ff;
  border: 4px solid #87c9f8;
  box-shadow: 0 9px 0 #68a9d8;
  touch-action: none;
  cursor: grab;
  z-index: 5;
}
.fusion-tile.dragging { opacity: .92; cursor: grabbing; position: relative; }
.fusion-drop {
  background: #fff7ce;
  border: 4px dashed #e8b638;
}
.fusion-arrow { font-size: 56px; text-align: center; color: var(--primary); }
.fusion-result {
  font-size: clamp(72px, 16vw, 124px);
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 900;
  color: var(--primary-dark);
  text-align: center;
  animation: correctBounce .55s ease;
}

.build-slots {
  display: flex;
  justify-content: center;
  gap: 18px;
  min-height: 130px;
}
.build-slot {
  width: 110px;
  border-radius: 26px;
  border: 4px dashed #91bedb;
  background: #eff9ff;
  display: grid;
  place-items: center;
  font-size: 72px;
  font-weight: 900;
  font-family: "Trebuchet MS", Arial, sans-serif;
}
.tile-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.tile {
  width: 106px;
  min-height: 106px;
  font-size: 64px;
}

.bottom-actions {
  margin-top: auto;
  min-height: 70px;
  display: grid;
  grid-template-columns: 70px 1fr 70px;
  align-items: end;
  position: relative;
  z-index: 4;
}
.totem {
  justify-self: center;
  font-size: 64px;
  filter: drop-shadow(0 7px 6px rgba(0,0,0,.14));
}
.totem.happy { animation: celebrate .7s ease; }
@keyframes celebrate { 35% { transform: translateY(-12px) rotate(-8deg) scale(1.08); } 70% { transform: rotate(7deg); } }

.intro-center, .reward-center {
  flex: 1;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 16px;
  position: relative;
  z-index: 3;
}
.hero-sound {
  width: 170px; height: 170px;
  border-radius: 42px;
  background: white;
  border: 5px solid #d9edf7;
  box-shadow: 0 12px 0 #bdd8e8;
  display: grid; place-items: center;
  font-size: 118px;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 900;
  color: var(--primary-dark);
}
.play-big {
  width: 108px; height: 108px;
  border: 0; border-radius: 50%;
  background: linear-gradient(#5ddd75, #31b458);
  color: white;
  box-shadow: 0 11px 0 #218a43;
  font-size: 48px;
}
.play-big:active { transform: translateY(5px); box-shadow: 0 6px 0 #218a43; }

.reward-stars { display: flex; gap: 14px; font-size: 58px; }
.reward-token {
  width: 178px; height: 178px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7a6 0 34%, #ffd24a 35% 58%, #ef9c1b 59%);
  display: grid; place-items: center;
  box-shadow: 0 12px 0 #c87c11, 0 18px 34px rgba(114,69,12,.20);
  font-size: 74px;
  animation: rewardPop .8s cubic-bezier(.2,.9,.3,1.25);
}
@keyframes rewardPop { 0% { transform: scale(.35) rotate(-30deg); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.continue-button {
  width: 92px; height: 92px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(#4aaeff, #258bf2);
  color: white;
  box-shadow: 0 9px 0 #1969bc;
  font-size: 44px;
}
.continue-button:active { transform: translateY(4px); box-shadow: 0 5px 0 #1969bc; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.status-chip {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  font-size: 13px;
  opacity: .7;
  z-index: 5;
}

@media (max-width: 620px) {
  .topbar { min-height: 66px; }
  .brand span:last-child { display: none; }
  .stage { padding: 10px; }
  .stage-panel { min-height: calc(100dvh - 86px); border-radius: 28px; padding: 16px; }
  .answer-grid { grid-template-columns: repeat(var(--cols, 2), 1fr); }
  .answer-card { min-height: 100px; }
  .hunt-field { grid-template-columns: repeat(3, 1fr); }
  .fusion-board { grid-template-columns: 1fr 50px 1fr; gap: 8px; }
  .fusion-tile, .fusion-drop { min-height: 120px; }
  .fusion-arrow { font-size: 38px; }
}

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


/* Map V0.1.1 — pre-reader hierarchy */
.reward-chip {
  min-width: 76px;
  min-height: 48px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 5px 0 rgba(19,71,120,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 23px;
  font-weight: 900;
}

.map-topbar {
  min-height: 66px;
  padding-left: 20px;
  padding-right: 20px;
}

.map-topbar .brand.compact {
  flex: 0 0 auto;
}

.map-topbar .brand-mark {
  width: 46px;
  height: 46px;
}

.map-world {
  background:
    radial-gradient(circle at 13% 12%, rgba(255,255,255,.94) 0 28px, transparent 29px),
    radial-gradient(circle at 20% 11%, rgba(255,255,255,.88) 0 41px, transparent 42px),
    radial-gradient(circle at 86% 13%, rgba(255,255,255,.88) 0 34px, transparent 35px),
    linear-gradient(#69cdfa 0 49%, #4db8ee 49% 57%, #2784cb 57% 100%);
}

.map-world::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: -9%;
  right: -9%;
  bottom: -17%;
  height: 43%;
  background:
    radial-gradient(ellipse at 50% 8%, #69d477 0 29%, #36a95d 30% 49%, #9a6745 50% 65%, #64402f 66%);
  border-radius: 52% 52% 0 0;
  box-shadow: inset 0 18px 0 rgba(255,255,255,.10);
}

.map-world::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 5%;
  right: 5%;
  bottom: 2%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(126,224,126,.55), rgba(50,169,91,.05) 70%);
  pointer-events: none;
}

.map-title-card {
  top: 6%;
  width: min(460px, 76vw);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 26px;
  box-shadow: 0 8px 0 rgba(31,103,151,.15), 0 16px 30px rgba(18,71,101,.11);
}

.map-title-card .world-emblem {
  font-size: 34px;
  line-height: 1;
}

.map-title-card .decorative-title {
  font-size: clamp(20px, 4vw, 30px);
}

.map-route {
  z-index: 6;
  bottom: 14%;
  width: min(700px, 94vw);
  height: 60%;
}

.route-line {
  inset: 10% 16% 5% 20%;
  border-left-width: 11px;
  border-left-color: rgba(255,238,164,.92);
  transform: rotate(31deg);
  filter: drop-shadow(0 3px 0 rgba(80,57,31,.12));
}

.map-node {
  z-index: 8;
  width: 82px;
  height: 82px;
  border: 5px solid rgba(255,255,255,.55);
  font-size: 30px;
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}

.map-node .node-symbol {
  display: grid;
  place-items: center;
  line-height: 1;
}

.map-node.node-1 { left: 10%; bottom: 3%; }
.map-node.node-2 { left: 46%; bottom: 37%; }
.map-node.node-3 { right: 7%; top: 2%; }

.map-node.active {
  width: 112px;
  height: 112px;
  margin-left: -15px;
  margin-bottom: -15px;
  border: 7px solid rgba(255,255,255,.85);
  background: linear-gradient(#72e887, #35b85d);
  box-shadow:
    0 10px 0 #248b48,
    0 20px 38px rgba(18,85,65,.28),
    0 0 0 12px rgba(255,255,255,.14);
  font-size: 42px;
}

.map-node.active::before,
.map-node.active::after {
  content: "";
  position: absolute;
  inset: -17px;
  border-radius: 50%;
  border: 5px solid rgba(255,255,255,.48);
  animation: activeRing 1.8s ease-out infinite;
  pointer-events: none;
}

.map-node.active::after {
  inset: -29px;
  border-width: 3px;
  animation-delay: .45s;
}

@keyframes activeRing {
  0% { transform: scale(.86); opacity: .8; }
  72%,100% { transform: scale(1.14); opacity: 0; }
}

.map-node.done {
  background: linear-gradient(#ffe16c, #f5b62e);
  color: #805b05;
  border-color: rgba(255,255,255,.72);
  box-shadow: 0 8px 0 #cf8d17, 0 15px 28px rgba(90,62,14,.18);
}

.map-node.locked {
  width: 70px;
  height: 70px;
  background: rgba(213,229,239,.78);
  color: rgba(46,82,108,.55);
  border-color: rgba(255,255,255,.42);
  box-shadow: 0 7px 0 rgba(58,101,128,.16);
  opacity: .68;
  filter: saturate(.2);
}

.tap-cue {
  position: absolute;
  z-index: 12;
  font-size: 32px;
  color: white;
  filter: drop-shadow(0 4px 2px rgba(24,76,107,.28));
  animation: cueBounce 1.1s ease-in-out infinite;
  pointer-events: none;
}

.tap-cue.cue-1 {
  left: calc(10% + 22px);
  bottom: calc(3% + 118px);
}

.tap-cue.cue-2 {
  left: calc(46% + 22px);
  bottom: calc(37% + 118px);
}

@keyframes cueBounce {
  0%,100% { transform: translateY(-4px); opacity: .72; }
  50% { transform: translateY(8px); opacity: 1; }
}

.totem-map {
  z-index: 11;
  width: 78px;
  height: 78px;
  font-size: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.86);
  box-shadow: 0 8px 0 rgba(27,90,121,.18), 0 16px 26px rgba(18,71,101,.16);
}

.totem-map .totem-bubble {
  font-size: 54px;
  line-height: 1;
  transform-origin: bottom center;
  animation: floaty 2.2s ease-in-out infinite;
}

.totem-map.at-node-1 {
  left: calc(10% - 78px);
  bottom: calc(3% + 2px);
}

.totem-map.at-node-2 {
  left: calc(46% - 78px);
  bottom: calc(37% + 2px);
}

.world-sparkle {
  position: absolute;
  z-index: 3;
  color: rgba(255,255,255,.78);
  text-shadow: 0 0 14px rgba(255,255,255,.8);
  animation: sparkle 2.4s ease-in-out infinite;
}
.sparkle-a { left: 18%; top: 31%; font-size: 24px; }
.sparkle-b { right: 16%; top: 35%; font-size: 18px; animation-delay: .8s; }
@keyframes sparkle { 50% { transform: scale(1.45) rotate(15deg); opacity: .35; } }

.floating-island {
  position: absolute;
  z-index: 2;
  width: 92px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(#62ca72 0 45%, #8d6547 46% 72%, #5e4134 73%);
  box-shadow: 0 10px 18px rgba(22,85,122,.18);
  opacity: .78;
}
.floating-island span {
  position: absolute;
  left: 32px;
  top: -28px;
  width: 28px;
  height: 36px;
  border-radius: 50% 50% 45% 45%;
  background: #3ea95d;
  box-shadow: -18px 8px 0 -3px #52bf68, 18px 7px 0 -4px #2e9251;
}
.island-a { left: 5%; top: 38%; transform: scale(.8); }
.island-b { right: 8%; top: 28%; transform: scale(.62); opacity: .58; }

@media (max-width: 620px) {
  .map-title-card { width: min(390px, 82vw); top: 5%; }
  .map-route { bottom: 12%; height: 61%; }
  .map-node.active { width: 104px; height: 104px; }
  .totem-map { width: 68px; height: 68px; }
  .totem-map .totem-bubble { font-size: 47px; }
  .totem-map.at-node-1 { left: calc(10% - 62px); }
  .totem-map.at-node-2 { left: calc(46% - 62px); }
}


/* Visual V0.2 — illustrated world */
.map-world {
  background: #67c9f3;
  isolation: isolate;
}
.map-world::before,
.map-world::after {
  display: none;
}
.world-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}
.map-world .floating-island {
  display: none;
}
.map-world .world-sparkle {
  z-index: 4;
}
.map-title-card {
  background: linear-gradient(180deg, rgba(255,248,217,.96), rgba(239,215,153,.95));
  border: 4px solid rgba(119,77,39,.28);
  color: #6b4328;
  box-shadow: 0 7px 0 rgba(106,69,39,.24), 0 18px 30px rgba(22,72,102,.18);
}
.map-title-card .world-emblem {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.65);
}
.map-route {
  z-index: 7;
}
.route-line {
  border-left-color: rgba(255,231,147,.94);
  filter: drop-shadow(0 4px 0 rgba(85,54,31,.22));
}
.map-node {
  backdrop-filter: blur(2px);
}
.map-node.active {
  background: linear-gradient(180deg, #8df26f, #46c458 58%, #2b9d46);
  box-shadow:
    0 10px 0 #247c3c,
    0 19px 36px rgba(15,74,64,.34),
    inset 0 4px 0 rgba(255,255,255,.38),
    0 0 0 12px rgba(255,255,255,.14);
}
.map-node.locked {
  background: linear-gradient(180deg, rgba(231,241,246,.9), rgba(165,188,202,.82));
}
.totem-map {
  overflow: visible;
  background: rgba(255,255,255,.9);
}
.totem-map .totem-image {
  width: 88px;
  height: 88px;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
  animation: floaty 2.2s ease-in-out infinite;
  filter: drop-shadow(0 5px 5px rgba(44,68,78,.18));
}
.totem .totem-image {
  width: 76px;
  height: 76px;
  display: block;
  object-fit: contain;
}
.intro-center .totem .totem-image,
.reward-center .totem .totem-image {
  width: 104px;
  height: 104px;
}


/* V0.3 asset-first screens */
.asset-shell {
  min-height: 100dvh;
  background: #70ccef;
}

.asset-screen {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: #70ccef;
}

.asset-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

.map-reward-overlay,
.reward-count-overlay {
  position: absolute;
  z-index: 8;
  top: max(16px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  min-width: 122px;
  min-height: 62px;
  padding: 10px 22px;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255,255,255,.97);
  color: #183653;
  box-shadow: 0 7px 0 rgba(42,78,98,.16), 0 14px 28px rgba(37,74,94,.12);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 900;
}

.asset-map-start {
  position: absolute;
  z-index: 9;
  left: 40.2%;
  top: 43.3%;
  width: 14.8%;
  height: 19.2%;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.asset-map-start::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 5px solid rgba(255,255,255,.36);
  animation: assetPulse 1.8s ease-out infinite;
}

@keyframes assetPulse {
  0% { transform: scale(.9); opacity: .8; }
  75%, 100% { transform: scale(1.13); opacity: 0; }
}

.ex003-asset-screen .asset-bg {
  object-position: center;
}

.asset-home-button,
.asset-help-button {
  position: absolute;
  z-index: 12;
  width: clamp(56px, 7vw, 82px);
  height: clamp(56px, 7vw, 82px);
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 7px 0 rgba(47,84,94,.18), 0 12px 22px rgba(38,70,78,.14);
  display: grid;
  place-items: center;
  font-size: clamp(25px, 3vw, 36px);
}

.asset-home-button {
  left: max(16px, env(safe-area-inset-left));
  top: max(18px, env(safe-area-inset-top));
}

.asset-help-button {
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  background: rgba(250,244,255,.96);
}

.asset-progress {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: max(22px, env(safe-area-inset-top));
  transform: translateX(-50%);
  min-width: 230px;
  height: 62px;
  padding: 0 22px;
  border-radius: 31px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 6px 0 rgba(47,84,94,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
}

.asset-pip {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #dfe7eb;
  box-shadow: inset 0 0 0 2px rgba(29,61,79,.10);
}
.asset-pip.done {
  background: #ffcf43;
  box-shadow: 0 3px 0 #d8a31c;
}
.asset-pip.current {
  background: #2f97ef;
  box-shadow: 0 3px 0 #176abc;
  transform: scale(1.12);
}

.ex003-asset-screen .speaker-main.asset-audio-hotspot {
  position: absolute;
  z-index: 10;
  left: 54.1%;
  top: 17.0%;
  width: 16.5%;
  height: 27.0%;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: transparent;
}

.ex003-asset-screen .speaker-main.asset-audio-hotspot.playing {
  animation: assetAudioPulse .68s ease-in-out infinite;
}

@keyframes assetAudioPulse {
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 0 16px rgba(255,255,255,.26);
  }
}

.asset-answer {
  position: absolute;
  z-index: 11;
  top: 45.0%;
  height: 25.0%;
  border: 0;
  border-radius: 18%;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: box-shadow .15s ease, transform .15s ease, background .15s ease;
}

.asset-answer-a { left: 36.0%; width: 18.0%; }
.asset-answer-i { left: 54.4%; width: 16.6%; }
.asset-answer-r { left: 72.0%; width: 17.2%; }

.asset-answer.correct {
  background: rgba(100,240,110,.12);
  box-shadow: inset 0 0 0 9px rgba(84,221,100,.98), 0 0 32px rgba(84,221,100,.78);
  animation: correctBounce .55s ease;
}

.asset-answer.retry {
  background: rgba(255,105,92,.10);
  box-shadow: inset 0 0 0 8px rgba(244,96,82,.85);
  animation: softShake .32s ease;
}

.asset-answer.hint {
  box-shadow: inset 0 0 0 8px rgba(157,120,245,.72), 0 0 34px rgba(157,120,245,.42);
  animation: hintPulse 1.1s ease-in-out infinite;
}

@keyframes hintPulse {
  50% { box-shadow: inset 0 0 0 10px rgba(157,120,245,.9), 0 0 42px rgba(157,120,245,.55); }
}

.reward-asset-screen .asset-bg {
  object-position: center;
}

.asset-continue-button {
  position: absolute;
  z-index: 12;
  right: max(34px, env(safe-area-inset-right));
  bottom: max(34px, env(safe-area-inset-bottom));
  width: clamp(84px, 10vw, 118px);
  height: clamp(84px, 10vw, 118px);
  border: 7px solid rgba(255,255,255,.92);
  border-radius: 50%;
  background: linear-gradient(#65e478, #2faf4f);
  color: #fff;
  box-shadow: 0 10px 0 #238941, 0 18px 30px rgba(27,88,49,.25);
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 900;
  display: grid;
  place-items: center;
  animation: continuePulse 1.8s ease-in-out infinite;
}

@keyframes continuePulse {
  50% { transform: scale(1.06); }
}

@media (max-width: 760px) {
  .map-reward-overlay,
  .reward-count-overlay {
    min-width: 92px;
    min-height: 50px;
    padding: 8px 15px;
  }
  .asset-progress {
    min-width: 184px;
    height: 52px;
  }
  .asset-pip {
    width: 18px;
    height: 18px;
  }
}


/* V0.4.1 — landscape-only responsive stage
   The illustrated V0.3 assets are 360x203 (~16:9).
   The whole scene scales/crops as one unit so interactive hotspots stay aligned. */
.asset-shell {
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #70ccef;
}

.asset-screen {
  flex: 0 0 auto;
  width: max(100vw, calc(100dvh * 16 / 9));
  height: max(100dvh, calc(100vw * 9 / 16));
  aspect-ratio: 16 / 9;
}

/* The bitmap is now 1:1 with the responsive scene.
   No independent object-fit crop that could desynchronise hotspots. */
.asset-bg {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* HUD controls belong to the viewport, not to the cropped illustration. */
.map-reward-overlay,
.reward-count-overlay,
.asset-home-button,
.asset-help-button,
.asset-progress,
.asset-continue-button {
  position: fixed;
}

/* Portrait is intentionally unsupported in the first child prototype.
   Use an icon-only rotation cue: no reading required. */
.orientation-lock {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(#75d1f2, #54bde7);
  place-items: center;
}

.orientation-cue {
  position: relative;
  width: 150px;
  height: 210px;
}

.orientation-phone {
  position: absolute;
  left: 39px;
  top: 30px;
  width: 72px;
  height: 130px;
  border: 9px solid rgba(255,255,255,.96);
  border-radius: 20px;
  box-shadow: 0 9px 0 rgba(25,84,116,.18);
  transform: rotate(-20deg);
  animation: rotateDevice 1.8s ease-in-out infinite;
}

.orientation-arrow {
  position: absolute;
  left: 25px;
  bottom: 5px;
  width: 100px;
  height: 70px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 72px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 5px 0 rgba(25,84,116,.18);
}

@keyframes rotateDevice {
  0%, 20% { transform: rotate(-20deg); }
  65%, 100% { transform: rotate(70deg); }
}

@media (orientation: portrait) {
  #app {
    visibility: hidden;
  }

  .orientation-lock {
    display: grid;
  }
}


/* ============================================================
   V0.5 — HYBRID VISUAL SYSTEM
   Rich illustrated worlds + coded responsive exercises
   ============================================================ */

.orientation-lock { display: none !important; }

/* WORLD / NAVIGATION ------------------------------------------------------ */
.world-shell-v05 {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: #74cef0;
  isolation: isolate;
}

.world-art-v05 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  filter: saturate(1.05) contrast(1.02);
}

.world-shell-v05.portrait .world-art-v05 {
  object-position: 50% 52%;
}

.world-colorwash-v05 {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(30,91,126,.02), rgba(18,70,101,.10)),
    radial-gradient(circle at 50% 45%, transparent 0 46%, rgba(9,48,70,.10) 100%);
}

.world-path-v05,
.world-nodes-v05 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.world-path-v05 {
  z-index: 3;
  overflow: visible;
  pointer-events: none;
}

.world-path-v05 path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.world-path-shadow {
  stroke: rgba(78,53,30,.28);
  stroke-width: 14;
}

.world-path-line {
  stroke: #ffe7a0;
  stroke-width: 8;
  stroke-dasharray: 3 12;
  filter: drop-shadow(0 2px 0 rgba(255,255,255,.35));
}

.world-nodes-v05 { z-index: 6; pointer-events: none; }

.world-node-v05 {
  position: absolute;
  left: var(--node-x);
  top: var(--node-y);
  transform: translate(-50%,-50%);
  width: clamp(68px, 10vmin, 112px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: clamp(4px, .7vmin, 7px) solid rgba(255,255,255,.92);
  display: grid;
  place-items: center;
  pointer-events: auto;
  font-size: clamp(28px, 5vmin, 54px);
  font-weight: 900;
  box-shadow: 0 10px 0 rgba(25,82,55,.24), 0 18px 38px rgba(17,59,78,.24);
}

.world-node-v05.active {
  color: white;
  background: linear-gradient(#6ce882,#2ab255);
  box-shadow:
    0 10px 0 #218b43,
    0 20px 38px rgba(14,71,50,.35),
    0 0 0 11px rgba(255,255,255,.14);
  animation: worldNodeBreathe 1.8s ease-in-out infinite;
}

.world-node-v05.active::after {
  content: "";
  position: absolute;
  inset: -18%;
  border: 4px solid rgba(255,255,255,.55);
  border-radius: 50%;
  animation: worldNodeRing 1.8s ease-out infinite;
}

.world-node-v05.locked {
  color: rgba(44,77,96,.52);
  background: rgba(219,235,242,.88);
  box-shadow: 0 8px 0 rgba(44,77,96,.18);
  filter: saturate(.2);
}

.world-node-v05:disabled { opacity: .86; }

.world-fox-v05 {
  position: absolute;
  left: var(--fox-x);
  top: var(--fox-y);
  transform: translate(-50%,-50%);
  z-index: 7;
  width: clamp(76px, 12vmin, 132px);
  filter: drop-shadow(0 10px 8px rgba(31,70,58,.24));
  animation: worldFoxFloat 2.2s ease-in-out infinite;
  pointer-events: none;
}

.world-reward-v05 {
  position: fixed;
  z-index: 20;
  top: max(14px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  min-width: 96px;
  min-height: 54px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 7px 0 rgba(36,76,99,.17), 0 13px 28px rgba(30,70,90,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 900;
}

@keyframes worldNodeBreathe { 50% { transform: translate(-50%,-50%) scale(1.05); } }
@keyframes worldNodeRing {
  0% { transform: scale(.78); opacity: .8; }
  75%,100% { transform: scale(1.3); opacity: 0; }
}
@keyframes worldFoxFloat { 50% { transform: translate(-50%, calc(-50% - 7px)); } }

/* Portrait is a separate composition, not a cropped interaction model. */
@media (orientation: portrait) {
  #app {
    visibility: visible !important;
  }

  .world-shell-v05 {
    min-height: 100dvh;
  }

  .world-node-v05 {
    width: clamp(72px, 19vw, 104px);
    font-size: clamp(30px, 10vw, 48px);
  }

  .world-fox-v05 {
    width: clamp(78px, 24vw, 126px);
  }

  .world-path-line { stroke-width: 7; }
  .world-path-shadow { stroke-width: 12; }
}

/* EXERCISES --------------------------------------------------------------- */
.hybrid-exercise-shell {
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding:
    max(74px, calc(env(safe-area-inset-top) + 58px))
    max(18px, env(safe-area-inset-right))
    max(22px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  background:
    linear-gradient(to bottom, #90dcf5 0 56%, #7fd57c 56% 100%);
}

.hybrid-scenery {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hybrid-scenery::before {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -24%;
  height: 53%;
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(ellipse at 50% 0%, #8fe27e 0 31%, #59c76e 32% 58%, #3cad62 59%);
  box-shadow: inset 0 18px 0 rgba(255,255,255,.12);
}

.hybrid-cloud {
  position: absolute;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  filter: blur(.2px);
}
.hybrid-cloud::before,
.hybrid-cloud::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: inherit;
}
.hybrid-cloud::before { width: 55%; height: 170%; left: 14%; bottom: 0; }
.hybrid-cloud::after { width: 45%; height: 140%; right: 8%; bottom: 0; }
.cloud-a { width: 120px; height: 38px; left: 8%; top: 16%; }
.cloud-b { width: 90px; height: 30px; right: 8%; top: 20%; opacity: .7; }

.hybrid-hill {
  position: absolute;
  border-radius: 50%;
  background: rgba(63,174,94,.38);
}
.hill-a { width: 36vw; height: 20vw; left: -7vw; bottom: 8vh; }
.hill-b { width: 34vw; height: 18vw; right: -6vw; bottom: 10vh; }

.hybrid-game-panel {
  position: relative;
  z-index: 4;
  width: min(820px, 72vw);
  min-height: min(650px, 72dvh);
  max-height: 78dvh;
  padding: clamp(38px, 6vh, 70px) clamp(28px, 5vw, 58px) clamp(90px, 10vh, 112px);
  border: clamp(7px, .8vw, 11px) solid #c58b47;
  border-radius: clamp(30px, 4vw, 48px);
  background:
    linear-gradient(rgba(255,252,224,.96), rgba(255,246,205,.98)),
    #fff4c5;
  box-shadow:
    inset 0 0 0 5px rgba(255,255,255,.48),
    0 12px 0 #8d5e32,
    0 28px 50px rgba(46,74,57,.28);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(24px, 4vh, 44px);
}

.hybrid-panel-trim {
  position: absolute;
  inset: 12px;
  border-radius: inherit;
  border: 3px solid rgba(132,86,41,.14);
  pointer-events: none;
}

.hybrid-home,
.hybrid-help {
  position: fixed;
  z-index: 20;
  width: clamp(58px, 7vmin, 78px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  box-shadow: 0 7px 0 rgba(39,77,94,.18), 0 13px 24px rgba(33,71,83,.14);
  display: grid;
  place-items: center;
  font-size: clamp(26px, 4vmin, 36px);
}
.hybrid-home {
  left: max(14px, env(safe-area-inset-left));
  top: max(14px, env(safe-area-inset-top));
}
.hybrid-help {
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  background: #f6efff;
}

.hybrid-progress {
  position: fixed;
  z-index: 20;
  left: 50%;
  top: max(15px, env(safe-area-inset-top));
  transform: translateX(-50%);
  min-height: 54px;
  padding: 9px 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 7px 0 rgba(39,77,94,.14);
  display: flex;
  align-items: center;
  gap: 10px;
}
.hybrid-pip {
  width: clamp(17px, 2.4vmin, 23px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #dfe9ec;
  box-shadow: inset 0 0 0 2px rgba(29,61,79,.10);
}
.hybrid-pip.done { background: #ffd24a; box-shadow: 0 3px 0 #d89a18; }
.hybrid-pip.current { background: #268cf4; box-shadow: 0 3px 0 #1267c4; transform: scale(1.12); }

.hybrid-fox {
  position: fixed;
  z-index: 8;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  width: clamp(100px, 14vw, 180px);
  filter: drop-shadow(0 12px 9px rgba(34,77,62,.24));
  pointer-events: none;
}

/* Existing exercise components get one shared visual language. */
.hybrid-game-panel .prompt-area {
  min-height: auto;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hybrid-game-panel .speaker-main {
  width: clamp(96px, 13vmin, 142px);
  height: clamp(96px, 13vmin, 142px);
  border-radius: 50%;
  border: 6px solid rgba(255,255,255,.88);
  background: linear-gradient(#52adff,#207bdd);
  color: white;
  box-shadow: 0 10px 0 #1760b1, 0 18px 28px rgba(28,87,139,.26);
  font-size: clamp(42px, 7vmin, 66px);
}

.hybrid-game-panel .answer-grid {
  width: 100%;
  gap: clamp(16px, 2.4vw, 28px);
}

.hybrid-game-panel .answer-card,
.hybrid-game-panel .hunt-item,
.hybrid-game-panel .tile,
.hybrid-game-panel .fusion-tile,
.hybrid-game-panel .fusion-drop,
.hybrid-game-panel .build-slot {
  background: linear-gradient(#fff,#fffdf7);
  border: 3px solid #dcecf4;
  border-radius: clamp(20px, 2.6vw, 30px);
  color: #16304d;
  box-shadow: 0 9px 0 #c7dbe4, 0 14px 22px rgba(43,76,91,.10);
}

.hybrid-game-panel .answer-card {
  min-height: clamp(118px, 17vh, 176px);
  font-size: clamp(60px, 9vw, 110px);
}

.hybrid-game-panel .hunt-field {
  width: 100%;
  gap: clamp(12px, 2vw, 22px);
}

.hybrid-game-panel .hunt-item {
  min-width: 0;
  min-height: clamp(80px, 12vh, 118px);
  font-size: clamp(44px, 7vw, 76px);
}

.hybrid-game-panel .hero-sound {
  color: #1267c4;
  background: rgba(255,255,255,.94);
  border: 5px solid #dcecf4;
  border-radius: 28px;
  box-shadow: 0 9px 0 #c7dbe4;
}

.hybrid-game-panel .bottom-actions { display: none; }

/* Phone portrait: same coded exercise, reorganised rather than raster-cropped. */
@media (orientation: portrait) {
  .hybrid-exercise-shell {
    padding:
      max(72px, calc(env(safe-area-inset-top) + 54px))
      max(14px, env(safe-area-inset-right))
      max(86px, calc(env(safe-area-inset-bottom) + 72px))
      max(14px, env(safe-area-inset-left));
  }

  .hybrid-game-panel {
    width: min(92vw, 620px);
    min-height: 64dvh;
    max-height: 73dvh;
    padding: 46px 20px 42px;
    border-width: 7px;
    border-radius: 32px;
  }

  .hybrid-fox {
    width: clamp(78px, 24vw, 128px);
    left: 50%;
    bottom: max(4px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
  }

  .hybrid-home,
  .hybrid-help {
    width: clamp(54px, 15vw, 68px);
  }

  .hybrid-progress {
    min-height: 48px;
    padding: 8px 15px;
    gap: 7px;
  }

  .hybrid-game-panel .answer-grid {
    grid-template-columns: repeat(var(--cols), minmax(0,1fr));
  }

  .hybrid-game-panel .answer-card {
    min-height: clamp(100px, 15vh, 142px);
    font-size: clamp(52px, 18vw, 84px);
  }

  .hybrid-game-panel .hunt-field {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .cloud-a { left: -8%; }
  .cloud-b { right: -12%; }
}

/* Tablet portrait gets a little more breathing room. */
@media (orientation: portrait) and (min-width: 700px) {
  .hybrid-game-panel {
    width: min(82vw, 720px);
    min-height: 66dvh;
  }
  .hybrid-game-panel .hunt-field {
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
}


/* ============================================================
   V0.6 — WORLD CAROUSEL PROTOTYPE
   ============================================================ */

.carousel-shell {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: #78d3f5;
  touch-action: pan-y;
}

.carousel-shell.portrait { touch-action: pan-x; }

.carousel-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}

.carousel-haze {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 35%, rgba(87,163,200,.08) 100%),
    linear-gradient(to bottom, rgba(255,255,255,.02), rgba(25,101,144,.07));
}

.carousel-track {
  position: absolute;
  inset: 0;
  z-index: 3;
  perspective: 1200px;
  pointer-events: none;
}

.carousel-world {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(52vw, 720px);
  height: min(70vh, 720px);
  transform:
    translate(
      calc(-50% + var(--delta) * 62vw),
      -50%
    )
    scale(calc(1 - min(var(--abs), 2) * .24));
  transform-origin: center center;
  opacity: calc(1 - min(var(--abs), 2) * .28);
  filter: saturate(calc(1 - min(var(--abs), 2) * .20));
  transition:
    transform .62s cubic-bezier(.2,.85,.25,1),
    opacity .45s ease,
    filter .45s ease;
  pointer-events: none;
}

.carousel-world.active {
  z-index: 8;
  pointer-events: auto;
}

.carousel-island {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 28px 26px rgba(30,88,109,.24));
  transition: transform .62s cubic-bezier(.2,.85,.25,1);
  pointer-events: none;
}

.carousel-world.active .carousel-island {
  transform: scale(1.035);
}

.world-copy {
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  min-width: min(88%, 500px);
  text-align: center;
  color: #fff;
  text-shadow:
    0 3px 0 #684220,
    0 5px 12px rgba(61,40,23,.38);
  z-index: 4;
  pointer-events: none;
}

.world-kicker {
  display: inline-block;
  margin-bottom: 4px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(105,65,29,.82);
  font-size: clamp(13px, 1.6vw, 20px);
  font-weight: 900;
}

.world-title {
  margin: 0 auto;
  width: fit-content;
  max-width: 100%;
  padding: 10px 24px;
  border-radius: 20px;
  background:
    linear-gradient(#9a6030,#74431f);
  border: 4px solid #5b351b;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.16),
    0 6px 0 rgba(72,41,20,.28);
  font-size: clamp(20px, 3vw, 38px);
  font-weight: 900;
  line-height: 1.05;
}

.carousel-world[data-world-id="0"] .world-title {
  background: linear-gradient(#b57a3b,#7f4c25);
}

.world-stars {
  position: absolute;
  left: 50%;
  bottom: 1%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,249,225,.92);
  box-shadow: 0 5px 0 rgba(83,59,30,.18);
  z-index: 5;
  color: #b8a78f;
  font-size: clamp(22px, 3vw, 34px);
  pointer-events: none;
}

.world-stars .earned { color: #ffc52d; text-shadow: 0 2px 0 #c78913; }

.world-cta {
  position: absolute;
  left: 50%;
  bottom: -9%;
  transform: translateX(-50%);
  width: clamp(82px, 10vw, 116px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 7px solid rgba(255,255,255,.92);
  background: linear-gradient(#7beb6d,#35b84d 60%,#269b3c);
  color: white;
  box-shadow:
    0 10px 0 #227d36,
    0 18px 28px rgba(28,91,53,.27),
    inset 0 4px 0 rgba(255,255,255,.32);
  display: grid;
  place-items: center;
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 900;
  z-index: 8;
  animation: worldCtaPulse 1.8s ease-in-out infinite;
}

.world-cta.locked {
  background: linear-gradient(#d9e3e7,#aabdc7);
  box-shadow: 0 9px 0 #8499a4;
  animation: none;
}

@keyframes worldCtaPulse {
  50% { transform: translateX(-50%) scale(1.07); }
}

.carousel-character {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: 10%;
  width: clamp(120px, 15vw, 220px);
  transform: translateX(-190%);
  filter: drop-shadow(0 14px 10px rgba(47,78,64,.23));
  pointer-events: none;
  animation: characterFloat 2.4s ease-in-out infinite;
}

@keyframes characterFloat {
  50% { transform: translate(-190%, -7px); }
}

.carousel-dots {
  position: fixed;
  z-index: 22;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(6px);
}

.carousel-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(45,91,117,.22);
}

.carousel-dots span.active {
  width: 24px;
  border-radius: 999px;
  background: #2f95f0;
}

.nav-tools {
  position: fixed;
  z-index: 30;
  top: max(10px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: flex;
  align-items: flex-start;
  gap: clamp(7px, 1vw, 12px);
}

.nav-tool {
  position: relative;
  width: clamp(62px, 7.2vw, 92px);
  aspect-ratio: 1;
  padding: 0;
  border: 4px solid rgba(255,255,255,.92);
  border-radius: 24%;
  overflow: hidden;
  background: linear-gradient(#52b8ff,#167bcf);
  box-shadow:
    0 6px 0 rgba(36,82,112,.25),
    0 11px 20px rgba(39,84,109,.18);
  display: grid;
  place-items: center;
}

.nav-tool img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.tool-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(28px, 4vw, 46px);
  z-index: -1;
}

.treasure-tool { background: linear-gradient(#fff7d9,#e9bd58); }

.prototype-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background: rgba(28,58,77,.43);
  backdrop-filter: blur(9px);
}

.overlay-card {
  width: min(560px, 86vw);
  min-height: min(500px, 68vh);
  padding: 34px;
  border: 8px solid #b47b3d;
  border-radius: 40px;
  background: linear-gradient(#fff9df,#f9edc4);
  box-shadow:
    inset 0 0 0 5px rgba(255,255,255,.55),
    0 12px 0 #805329,
    0 28px 55px rgba(31,50,61,.35);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 20px;
}

.overlay-close {
  position: fixed;
  z-index: 202;
  top: max(18px, env(safe-area-inset-top));
  left: max(18px, env(safe-area-inset-left));
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  background: white;
  box-shadow: 0 7px 0 rgba(42,74,90,.18);
  color: #294860;
  font-size: 40px;
  font-weight: 800;
}

.overlay-character,
.overlay-treasure {
  width: min(330px, 62vw);
  max-height: 42vh;
  object-fit: contain;
}

.overlay-title {
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 900;
  color: #65421f;
  text-align: center;
}

.future-slots {
  display: grid;
  grid-template-columns: repeat(7, 46px);
  gap: 8px;
}

.future-slots span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #dfe7e9;
  color: #8a9ca4;
  font-weight: 900;
}

.parent-gate-icon {
  font-size: 110px;
}

.parent-gate-demo {
  display: flex;
  gap: 22px;
}
.parent-gate-demo span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2f95f0;
  box-shadow: 0 5px 0 #1769ad;
}

/* Exercise visual coherence: same fantasy world, but interaction stays coded. */
.hybrid-exercise-shell {
  background:
    linear-gradient(to bottom, rgba(142,218,247,.75), rgba(91,194,118,.82));
}

.exercise-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .32;
  filter: saturate(.86) blur(1px);
  transform: scale(1.02);
}

.exercise-soften {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.10), rgba(244,250,225,.15)),
    radial-gradient(circle at 50% 45%, rgba(255,250,218,.10), rgba(58,136,102,.12));
}

.hybrid-game-panel {
  border-color: #ad7538;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.45), transparent 34%),
    linear-gradient(#fff8d8,#f8e8b2);
  box-shadow:
    inset 0 0 0 5px rgba(255,255,255,.50),
    0 12px 0 #76502b,
    0 28px 50px rgba(42,64,51,.28);
}

.hybrid-panel-trim {
  border-color: rgba(124,79,36,.20);
}

.hybrid-game-panel .speaker-main {
  border: 8px solid #f1c86e;
  background: linear-gradient(#49b7ff,#1679d7);
  box-shadow:
    0 9px 0 #145aa3,
    0 15px 28px rgba(25,87,139,.22),
    0 0 0 5px rgba(255,255,255,.62);
}

/* Exactly one primary speaker control per exercise prompt. */
.hybrid-game-panel .prompt-area > .speaker-main ~ .speaker-main {
  display: none !important;
}

.hybrid-game-panel .answer-card,
.hybrid-game-panel .hunt-item,
.hybrid-game-panel .tile,
.hybrid-game-panel .fusion-tile,
.hybrid-game-panel .fusion-drop,
.hybrid-game-panel .build-slot {
  border-color: #d9bd82;
  background:
    linear-gradient(#fffdf2,#fff6d8);
  box-shadow:
    0 8px 0 #c7a664,
    0 13px 19px rgba(79,66,43,.11);
}

.hybrid-game-panel .answer-card:active,
.hybrid-game-panel .hunt-item:active,
.hybrid-game-panel .tile:active {
  transform: translateY(4px);
  box-shadow: 0 4px 0 #c7a664;
}

.hybrid-home,
.hybrid-help,
.hybrid-progress {
  border: 3px solid rgba(184,137,70,.30);
  background: rgba(255,249,222,.96);
}

.reward-v06 {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #78d3f5;
}

.reward-v06-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .76;
}

.reward-v06-card {
  position: relative;
  z-index: 3;
  width: min(720px, 90vw);
  height: min(620px, 78vh);
  display: grid;
  place-items: center;
}

.reward-squirrel {
  position: absolute;
  left: 4%;
  bottom: 0;
  width: min(300px, 36vw);
  filter: drop-shadow(0 16px 12px rgba(52,76,62,.22));
}

.reward-star-big {
  font-size: clamp(120px, 24vw, 240px);
  color: #ffd33d;
  text-shadow: 0 10px 0 #d99216, 0 18px 35px rgba(117,75,12,.25);
  animation: rewardPop .75s cubic-bezier(.2,.9,.3,1.25);
}

.reward-total {
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255,249,222,.96);
  box-shadow: 0 7px 0 rgba(97,68,34,.20);
  font-size: clamp(28px, 5vw, 46px);
  font-weight: 900;
  color: #68441f;
}

.reward-next {
  width: 96px;
  aspect-ratio: 1;
  border: 7px solid white;
  border-radius: 50%;
  background: linear-gradient(#73e86f,#35b74c);
  color: white;
  box-shadow: 0 9px 0 #257f37;
  font-size: 48px;
  font-weight: 900;
}

/* Portrait carousel: progression from bottom to top. */
@media (orientation: portrait) {
  .nav-tools {
    top: max(12px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    flex-direction: column;
  }

  .nav-tool {
    width: clamp(58px, 16vw, 78px);
  }

  .carousel-world {
    width: min(90vw, 620px);
    height: min(52vh, 620px);
    transform:
      translate(
        -50%,
        calc(-50% + var(--delta) * -54vh)
      )
      scale(calc(1 - min(var(--abs), 2) * .24));
  }

  .carousel-character {
    left: 19%;
    bottom: 18%;
    width: clamp(105px, 30vw, 170px);
    transform: translateX(-50%);
  }

  @keyframes characterFloat {
    50% { transform: translate(-50%, -7px); }
  }

  .world-copy {
    bottom: 6%;
  }

  .world-title {
    font-size: clamp(20px, 6vw, 34px);
    padding: 8px 16px;
  }

  .world-stars {
    bottom: -2%;
  }

  .world-cta {
    bottom: -17%;
    width: clamp(76px, 21vw, 102px);
  }

  .carousel-dots {
    left: max(12px, env(safe-area-inset-left));
    right: auto;
    bottom: 50%;
    transform: translateY(50%);
    flex-direction: column;
  }

  .carousel-dots span.active {
    width: 10px;
    height: 24px;
  }

  .hybrid-exercise-shell {
    background:
      linear-gradient(to bottom, rgba(142,218,247,.78), rgba(91,194,118,.84));
  }

  .exercise-bg-img {
    content: url("/assets/navigation/backgrounds/nav-bg-portrait.webp");
  }

  .future-slots {
    grid-template-columns: repeat(4, 46px);
  }
}

@media (max-width: 700px) and (orientation: landscape) {
  .carousel-world {
    width: min(58vw, 560px);
    height: min(68vh, 520px);
  }
  .nav-tool {
    width: 58px;
  }
  .carousel-character {
    width: 110px;
  }
}


/* V0.6 carousel interaction refinements */
.carousel-world:not(.active) .world-cta {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(.76);
}

.carousel-world.active .world-cta {
  opacity: 1;
  pointer-events: auto;
  transition: opacity .28s ease .20s, transform .38s cubic-bezier(.2,.85,.25,1) .16s;
}

.carousel-character.departing {
  animation: characterDepartLandscape .76s cubic-bezier(.25,.8,.25,1);
}

@keyframes characterDepartLandscape {
  0% { transform: translateX(-190%) translateY(0) scale(1); }
  50% { transform: translateX(-150%) translateY(-18px) scale(.96); }
  100% { transform: translateX(-118%) translateY(-4px) scale(.92); }
}

@media (orientation: portrait) {
  .carousel-character.departing {
    animation: characterDepartPortrait .76s cubic-bezier(.25,.8,.25,1);
  }

  @keyframes characterDepartPortrait {
    0% { transform: translateX(-50%) translateY(0) scale(1); }
    50% { transform: translateX(-50%) translateY(-45px) scale(.96); }
    100% { transform: translateX(-50%) translateY(-88px) scale(.92); }
  }
}


/* ============================================================
   V0.6.2 — PROFILE RESUME + FRAME-RESPONSIVE EXERCISES
   ============================================================ */

* { box-sizing: border-box; }

/* --- Identity / profile chooser ---------------------------------------- */
.identity-shell {
  --wheel-radius: clamp(150px, 23vmin, 235px);
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #77cef1;
  isolation: isolate;
}

.identity-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.identity-haze {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 52%, rgba(255,255,255,.06) 0 34%, rgba(43,116,150,.13) 100%),
    linear-gradient(to bottom, rgba(255,255,255,.04), rgba(42,121,156,.08));
}

.identity-prompt {
  position: absolute;
  z-index: 12;
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 10px;
  border-radius: 999px;
  background: rgba(255,249,222,.96);
  border: 3px solid rgba(163,112,52,.25);
  box-shadow: 0 7px 0 rgba(75,72,48,.16), 0 16px 28px rgba(31,74,90,.14);
}

.identity-speaker {
  width: clamp(48px, 6vmin, 64px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(#4fb5ff,#1d7ad7);
  color: white;
  box-shadow: 0 5px 0 #155ea9;
  font-size: clamp(24px, 3vmin, 32px);
}

.identity-question {
  font-size: clamp(22px, 3.1vmin, 34px);
  line-height: 1;
  font-weight: 900;
  color: #65431f;
  white-space: nowrap;
}

.identity-stage {
  position: relative;
  z-index: 4;
  width: min(76vmin, 720px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.identity-island {
  position: absolute;
  width: 44%;
  height: 44%;
  object-fit: contain;
  filter: drop-shadow(0 20px 22px rgba(29,86,108,.23));
  pointer-events: none;
}

.identity-wheel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.identity-character {
  --angle: calc((360deg / var(--count)) * var(--i));
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(76px, 12vmin, 118px);
  aspect-ratio: 1;
  padding: 4px;
  border: 5px solid rgba(255,255,255,.92);
  border-radius: 50%;
  background: linear-gradient(#fff9e4,#f4d995);
  box-shadow:
    0 7px 0 rgba(111,76,38,.24),
    0 14px 24px rgba(42,79,92,.18);
  transform:
    translate(-50%,-50%)
    rotate(var(--angle))
    translateY(calc(var(--wheel-radius) * -1))
    rotate(calc(var(--angle) * -1));
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
}

.identity-character img {
  width: 112%;
  height: 112%;
  object-fit: contain;
  transform: translate(-6%, 2%);
}

.identity-character:active {
  box-shadow: 0 3px 0 rgba(111,76,38,.24);
}

.identity-close {
  position: fixed;
  z-index: 30;
  left: max(16px, env(safe-area-inset-left));
  top: max(16px, env(safe-area-inset-top));
  width: 60px;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  box-shadow: 0 6px 0 rgba(46,78,92,.16);
  font-size: 36px;
  color: #365469;
}

/* World 0 is a departure platform, not a full-size learning world. */
.carousel-world[data-world-id="0"] {
  width: min(34vw, 430px);
  height: min(48vh, 430px);
}

.carousel-world[data-world-id="0"] .world-copy {
  bottom: 4%;
}

.carousel-world[data-world-id="0"] .world-title {
  font-size: clamp(16px, 2.1vw, 25px);
  padding: 7px 15px;
}

/* --- Completed world reward: coins only ------------------------------- */
.world-coins {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(5px, .8vmin, 9px);
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255,249,222,.96);
  border: 3px solid rgba(182,130,54,.22);
  box-shadow: 0 5px 0 rgba(103,75,35,.17);
}

.coin-token {
  display: inline-block;
  width: clamp(22px, 3.2vmin, 32px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, #fff5a6 0 12%, #ffd64d 13% 45%, #eda31c 46% 73%, #bd7210 74%);
  border: 2px solid #f8d56a;
  box-shadow: inset 0 -3px 0 rgba(135,77,7,.20), 0 3px 0 rgba(110,75,25,.16);
}

/* Character sits with the active world and near the start control. */
.carousel-character {
  left: calc(50% - clamp(84px, 8vw, 132px));
  bottom: clamp(5%, 7vh, 9%);
  width: clamp(118px, 13vw, 190px);
  transform: translateX(-50%);
}

@keyframes characterFloat {
  50% { transform: translate(-50%, -7px); }
}

.carousel-character.departing {
  animation: characterDepartLandscape .76s cubic-bezier(.25,.8,.25,1);
}

@keyframes characterDepartLandscape {
  0% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-20%) translateY(-17px) scale(.96); }
  100% { transform: translateX(10%) translateY(-5px) scale(.92); }
}

/* --- Character switch overlay ----------------------------------------- */
.overlay-profile-grid {
  width: min(100%, 520px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(10px, 2vmin, 18px);
}

.overlay-profile {
  aspect-ratio: 1;
  border: 4px solid rgba(179,134,68,.28);
  border-radius: 28%;
  padding: 2px;
  overflow: hidden;
  background: linear-gradient(#fffdf1,#f4dfaa);
  box-shadow: 0 5px 0 rgba(109,79,43,.16);
}

.overlay-profile.selected {
  border-color: #52b76a;
  box-shadow: 0 5px 0 #2c8c47, 0 0 0 5px rgba(83,194,107,.14);
}

.overlay-profile img {
  width: 112%;
  height: 112%;
  object-fit: contain;
  transform: translate(-6%, 2%);
}

/* --- Exercise frame owns the layout ----------------------------------- */
.hybrid-exercise-shell {
  --hud-top: max(72px, calc(env(safe-area-inset-top) + 56px));
  --hud-bottom: max(20px, env(safe-area-inset-bottom));
  padding:
    var(--hud-top)
    max(16px, env(safe-area-inset-right))
    var(--hud-bottom)
    max(16px, env(safe-area-inset-left));
}

.hybrid-game-panel {
  container-type: size;
  width: min(860px, calc(100vw - max(32px, env(safe-area-inset-left)) - max(32px, env(safe-area-inset-right))));
  height: clamp(300px, 72dvh, 700px);
  min-height: 0;
  max-height: calc(100dvh - var(--hud-top) - var(--hud-bottom));
  overflow: hidden;
  padding: clamp(22px, 4.2vmin, 50px) clamp(20px, 4.2vmin, 52px) clamp(30px, 5vmin, 62px);
  gap: clamp(12px, 2.4vmin, 28px);
}

/* EX-005 — always contained by the frame. */
.hybrid-game-panel.exercise-hunt {
  justify-content: stretch;
  padding-top: clamp(18px, 3vmin, 30px);
  padding-bottom: clamp(22px, 3vmin, 36px);
}

.exercise-hunt .prompt-area {
  flex: 0 0 clamp(72px, 12vmin, 112px);
  min-height: 0;
}

.exercise-hunt .hero-sound {
  width: clamp(72px, 11vmin, 112px);
  height: clamp(72px, 11vmin, 112px);
  border-radius: clamp(18px, 2.6vmin, 28px);
  font-size: clamp(48px, 8vmin, 82px);
  box-shadow: 0 6px 0 #c7a664;
}

.exercise-hunt .hunt-field {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  grid-template-rows: repeat(2, minmax(0,1fr));
  gap: clamp(7px, 1.3vmin, 14px);
  align-content: stretch;
  overflow: hidden;
}

.exercise-hunt .hunt-item {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: clamp(15px, 2vmin, 24px);
  font-size: clamp(30px, 5.5vmin, 64px);
  line-height: 1;
}

/* Reward uses the same coin language as completed worlds. */
.reward-coins-earned {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 2vmin, 18px);
  min-height: 120px;
}

.reward-coins-earned .coin-token {
  width: clamp(64px, 10vmin, 104px);
  animation: rewardPop .75s cubic-bezier(.2,.9,.3,1.25);
}

.reward-coins-earned .coin-token:nth-child(2) { animation-delay: .10s; }
.reward-coins-earned .coin-token:nth-child(3) { animation-delay: .20s; }

/* Portrait: vertical journey, compact identity wheel and contained exercise. */
@media (orientation: portrait) {
  .identity-shell {
    --wheel-radius: clamp(128px, 34vw, 185px);
  }

  .identity-stage {
    width: min(92vw, 590px);
  }

  .identity-island {
    width: 40%;
    height: 40%;
  }

  .identity-character {
    width: clamp(64px, 19vw, 92px);
  }

  .identity-prompt {
    top: max(12px, env(safe-area-inset-top));
    padding: 8px 14px 8px 8px;
  }

  .carousel-world[data-world-id="0"] {
    width: min(66vw, 380px);
    height: min(36vh, 380px);
  }

  .carousel-character {
    left: 50%;
    bottom: 13%;
    width: clamp(92px, 25vw, 145px);
    transform: translateX(-105%);
  }

  @keyframes characterFloat {
    50% { transform: translate(-105%, -7px); }
  }

  @keyframes characterDepartPortrait {
    0% { transform: translateX(-105%) translateY(0) scale(1); }
    50% { transform: translateX(-105%) translateY(-44px) scale(.96); }
    100% { transform: translateX(-105%) translateY(-86px) scale(.92); }
  }

  .hybrid-game-panel {
    width: min(92vw, 660px);
    height: min(73dvh, 760px);
    max-height: calc(100dvh - 152px);
    padding: clamp(18px, 4vw, 34px);
  }

  .exercise-hunt .hunt-field {
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-template-rows: repeat(4, minmax(0,1fr));
  }

  .exercise-hunt .hunt-item {
    font-size: clamp(36px, 11vw, 64px);
  }

  .overlay-profile-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    max-width: 360px;
  }
}

@media (orientation: portrait) and (min-width: 700px) {
  .exercise-hunt .hunt-field {
    grid-template-columns: repeat(4, minmax(0,1fr));
    grid-template-rows: repeat(2, minmax(0,1fr));
  }
  .overlay-profile-grid {
    grid-template-columns: repeat(4, minmax(0,1fr));
    max-width: 560px;
  }
}

/* Short landscape phones: prioritize pedagogy over decoration. */
@media (orientation: landscape) and (max-height: 520px) {
  .hybrid-exercise-shell {
    --hud-top: 58px;
    --hud-bottom: 10px;
  }

  .hybrid-game-panel {
    height: calc(100dvh - 78px);
    max-height: none;
    width: min(780px, 76vw);
    padding: 14px 22px 18px;
    border-width: 6px;
    gap: 8px;
  }

  .exercise-hunt .prompt-area {
    flex-basis: 62px;
  }

  .exercise-hunt .hero-sound {
    width: 62px;
    height: 62px;
    font-size: 44px;
  }

  .exercise-hunt .hunt-field {
    gap: 6px;
  }

  .exercise-hunt .hunt-item {
    font-size: clamp(26px, 7vh, 42px);
  }

  .hybrid-fox {
    width: 86px;
  }
}


/* ============================================================
   V0.6.3 — identity invitation + portrait avatar geometry
   ============================================================ */

.identity-character {
  --avatar-size: clamp(76px, 12vmin, 118px);
  width: var(--avatar-size) !important;
  height: var(--avatar-size) !important;
  min-width: var(--avatar-size);
  min-height: var(--avatar-size);
  max-width: var(--avatar-size);
  max-height: var(--avatar-size);
  aspect-ratio: auto !important;
  border-radius: 50% !important;
  flex: 0 0 var(--avatar-size);
  animation: identityInvite 2.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 90ms);
}

.identity-character img {
  border-radius: 50%;
}

@keyframes identityInvite {
  0%, 72%, 100% {
    filter: brightness(1);
  }
  82% {
    filter: brightness(1.08);
  }
  88% {
    filter: brightness(1.12) drop-shadow(0 0 12px rgba(255,230,125,.55));
  }
}

.identity-select-cue {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 54%;
  width: clamp(68px, 10vmin, 104px);
  height: clamp(68px, 10vmin, 104px);
  transform: translate(-50%,-50%);
  display: grid;
  place-items: center;
  pointer-events: none;
}

.identity-cue-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: clamp(4px, .6vmin, 7px) solid rgba(255,255,255,.92);
  background: rgba(255,248,212,.28);
  box-shadow:
    0 0 0 10px rgba(255,231,124,.13),
    0 8px 22px rgba(89,64,33,.15);
  animation: identityCuePulse 1.6s ease-out infinite;
}

.identity-tap-hand {
  position: relative;
  z-index: 2;
  font-size: clamp(34px, 5.4vmin, 56px);
  filter: drop-shadow(0 4px 2px rgba(81,57,29,.18));
  animation: identityTap 1.35s ease-in-out infinite;
}

@keyframes identityCuePulse {
  0%   { transform: scale(.82); opacity: .94; }
  72%  { transform: scale(1.16); opacity: .18; }
  100% { transform: scale(1.22); opacity: 0; }
}

@keyframes identityTap {
  0%,100% { transform: translateY(2px) scale(.96); }
  50%     { transform: translateY(-8px) scale(1.04); }
}

@media (orientation: portrait) {
  .identity-character {
    --avatar-size: clamp(64px, 19vw, 92px);
    width: var(--avatar-size) !important;
    height: var(--avatar-size) !important;
    min-width: var(--avatar-size);
    min-height: var(--avatar-size);
    max-width: var(--avatar-size);
    max-height: var(--avatar-size);
    border-radius: 50% !important;
  }

  .identity-stage {
    aspect-ratio: 1 / 1;
  }

  .identity-select-cue {
    top: 52%;
    width: clamp(58px, 17vw, 82px);
    height: clamp(58px, 17vw, 82px);
  }

  .identity-tap-hand {
    font-size: clamp(30px, 10vw, 44px);
  }
}