:root {
  --font: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: #102033;
  --muted: #536b7f;
  --deep: #06283f;
  --water: #0ea5e9;
  --reef: #0f766e;
  --sand: #f4c27a;
  --coral: #f97316;
  --gold: #facc15;
  --rose: #fb7185;
  --progress: 0;
}

* {
  box-sizing: border-box;
  letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #06283f;
  color: var(--ink);
  font-family: var(--font);
}

button {
  font: inherit;
  touch-action: manipulation;
}

.ocean-app {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.78), transparent 14%),
    linear-gradient(180deg, #9ee7ff 0%, #0ea5e9 32%, #07617f 68%, #07314c 100%);
  isolation: isolate;
  user-select: none;
}

.asset-loader,
.game-overlay {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(6,40,63,.36), rgba(6,40,63,.72)),
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.36), transparent 36%);
  backdrop-filter: blur(10px);
}

.ocean-app.is-loading .asset-loader,
.game-overlay.is-visible {
  display: flex;
}

.asset-loader {
  z-index: 90;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.92), transparent 18%),
    radial-gradient(circle at 78% 24%, rgba(250,204,21,.4), transparent 24%),
    linear-gradient(135deg, #06283f 0%, #0ea5e9 46%, #f97316 100%);
}

.loader-card,
.overlay-card {
  width: min(720px, 100%);
  border: 1px solid rgba(255,255,255,.66);
  border-radius: 8px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 28px 86px rgba(4,20,32,.34);
  padding: clamp(20px, 5vw, 34px);
  text-align: center;
}

.brand-loader {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(236,253,245,.94));
}

.brand-loader::before {
  content: "";
  position: absolute;
  inset: -45% -18% auto;
  height: 140px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.82), transparent);
  transform: rotate(-8deg) translateX(-55%);
  animation: loaderSweep 2.2s ease-in-out infinite;
  pointer-events: none;
}

.loader-eyebrow,
.overlay-kicker,
.game-kicker,
.hud-item span,
.guide-label,
.meter-label {
  color: #0f766e;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.2;
  text-transform: uppercase;
}

.loader-eyebrow {
  margin: 0 0 12px;
}

.loader-brand {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow: visible;
  white-space: nowrap;
  font-size: clamp(28px, 10vw, 58px);
  font-weight: 950;
  line-height: 1.04;
}

.loader-brand span {
  flex: 0 0 auto;
  display: inline-block;
  background: linear-gradient(135deg, #102033 0%, #0f766e 52%, #f97316 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transform: translateX(-28px) translateY(8px) rotate(-5deg);
  animation: brandLetterIn .68s cubic-bezier(.18,.86,.25,1.18) forwards;
  animation-delay: calc(var(--i) * .075s);
}

.loader-card p,
.overlay-card p {
  margin: 12px 0 0;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.55;
}

.loader-bar {
  height: 10px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: #dff7ff;
}

.loader-bar span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f766e, #0ea5e9, #facc15, #f97316);
  transition: width .25s ease;
}

.rotate-overlay {
  position: absolute;
  inset: 0;
  z-index: 85;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.86), transparent 22%),
    linear-gradient(145deg, rgba(6,40,63,.94), rgba(14,165,233,.9) 50%, rgba(15,118,110,.92));
  backdrop-filter: blur(12px);
}

.rotate-card {
  width: min(430px, 100%);
  padding: 24px 22px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 8px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 28px 76px rgba(4,20,32,.34);
  text-align: center;
}

.rotate-card::before {
  content: "";
  width: 82px;
  height: 54px;
  display: block;
  margin: 0 auto 14px;
  border: 8px solid var(--reef);
  border-radius: 16px;
  background:
    radial-gradient(circle at 74% 50%, var(--gold) 0 7px, transparent 8px),
    linear-gradient(90deg, #ecfeff, #bae6fd);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.72), 0 14px 28px rgba(15,118,110,.18);
  transform: rotate(90deg);
  animation: rotateCue 1.45s ease-in-out infinite;
}

.rotate-card strong {
  display: block;
  font-size: clamp(24px, 8vw, 36px);
  line-height: 1.05;
}

.rotate-card p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
}

.game-topbar {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  z-index: 24;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 8px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 14px 40px rgba(4,20,32,.18);
  backdrop-filter: blur(14px);
}

.game-title {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.game-title strong {
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(16px, 2.8vw, 23px);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud {
  display: flex;
  gap: 8px;
}

.hud-item {
  min-width: 66px;
  padding: 7px 9px;
  border: 1px solid rgba(16,32,51,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.76);
  text-align: center;
}

.hud-item strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.05;
}

.stage-wrap {
  position: absolute;
  inset: 0 0 116px;
  padding: 100px 18px 12px;
}

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 40%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.26), transparent 18%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.28),
    0 20px 52px rgba(4,20,32,.2);
}

.ocean-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ocean-backdrop span {
  position: absolute;
  pointer-events: none;
}

.sunbeam {
  top: -8%;
  width: 18%;
  height: 76%;
  background: linear-gradient(180deg, rgba(255,255,255,.36), transparent 78%);
  clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%);
  opacity: .48;
  transform-origin: top;
}

.sunbeam-one {
  left: 14%;
  transform: rotate(12deg);
}

.sunbeam-two {
  right: 17%;
  transform: rotate(-16deg);
}

.bubble {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255,255,255,.54);
  border-radius: 50%;
  box-shadow: inset 6px 7px 0 rgba(255,255,255,.2);
  animation: bubbleRise 7s ease-in-out infinite;
}

.bubble-one {
  left: 17%;
  bottom: 14%;
}

.bubble-two {
  left: 77%;
  bottom: 20%;
  width: 26px;
  height: 26px;
  animation-delay: -2.1s;
}

.bubble-three {
  left: 54%;
  bottom: 11%;
  width: 18px;
  height: 18px;
  animation-delay: -4.2s;
}

.sand {
  left: -4%;
  right: -4%;
  bottom: -9%;
  height: 29%;
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(circle at 22% 38%, rgba(124,45,18,.18) 0 8px, transparent 9px),
    radial-gradient(circle at 66% 30%, rgba(124,45,18,.14) 0 7px, transparent 8px),
    linear-gradient(180deg, #f7d795, #c47d3d);
}

.kelp {
  bottom: 15%;
  width: 28px;
  height: 160px;
  border-radius: 999px 999px 0 0;
  background:
    radial-gradient(circle at 50% 18%, #34d399 0 14px, transparent 15px),
    linear-gradient(90deg, transparent 0 30%, #0f766e 31% 64%, transparent 65%);
  filter: drop-shadow(0 12px 10px rgba(4,20,32,.16));
  animation: sway 3.6s ease-in-out infinite;
}

.kelp::before,
.kelp::after {
  content: "";
  position: absolute;
  width: 72px;
  height: 22px;
  border-radius: 999px;
  background: #16a34a;
  transform: rotate(-34deg);
}

.kelp::before {
  top: 36%;
  right: 6px;
}

.kelp::after {
  top: 58%;
  left: 5px;
  transform: rotate(30deg);
}

.kelp-one {
  left: 5%;
}

.kelp-two {
  right: 7%;
  height: 128px;
  animation-delay: -1.2s;
}

.coral {
  bottom: 13%;
  width: 92px;
  height: 84px;
  background:
    radial-gradient(circle at 35% 36%, #fb7185 0 14px, transparent 15px),
    radial-gradient(circle at 61% 28%, #f97316 0 13px, transparent 14px),
    radial-gradient(circle at 60% 60%, #fb7185 0 14px, transparent 15px),
    linear-gradient(180deg, transparent 0 34%, #f97316 35% 100%);
  clip-path: polygon(43% 100%, 43% 60%, 16% 40%, 32% 30%, 50% 48%, 57% 16%, 74% 22%, 67% 50%, 92% 58%, 83% 75%, 61% 66%, 61% 100%);
  opacity: .96;
}

.coral-one {
  left: 18%;
}

.coral-two {
  right: 20%;
  transform: scale(.8) rotate(8deg);
}

.treasure-meter {
  position: absolute;
  left: max(8px, env(safe-area-inset-left));
  top: 12px;
  bottom: 14px;
  z-index: 22;
  width: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 10px 18px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 16px;
  background: rgba(255,255,255,.28);
  box-shadow: 0 22px 52px rgba(4,20,32,.18);
  backdrop-filter: blur(16px);
}

.meter-label {
  color: #fff;
  text-shadow: 0 2px 8px rgba(4,20,32,.34);
}

.meter-track {
  position: relative;
  width: 20px;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.36);
}

.meter-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--progress) * 1%);
  border-radius: inherit;
  background: linear-gradient(0deg, #f97316, #facc15, #ecfeff);
  box-shadow: 0 0 18px rgba(255,255,255,.42);
  transition: height .45s ease;
}

.meter-pearl {
  position: absolute;
  left: 50%;
  bottom: calc((var(--progress) * 1%) - 4px);
  width: 34px;
  height: 34px;
  border: 3px solid rgba(16,32,51,.42);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, #fff 0 8px, transparent 9px),
    linear-gradient(135deg, #fff, #dbeafe 60%, #bae6fd);
  transform: translate(-50%, 50%);
  transition: bottom .45s ease;
}

.treasure-meter strong {
  color: #fff;
  font-size: 13px;
  text-shadow: 0 2px 8px rgba(4,20,32,.34);
}

.heart-bar {
  position: absolute;
  top: 12px;
  right: max(12px, env(safe-area-inset-right));
  z-index: 25;
  display: flex;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 26px rgba(4,20,32,.14);
  backdrop-filter: blur(12px);
}

.heart {
  color: #f43f5e;
  font-size: 18px;
  line-height: 1;
  transition: opacity .25s ease, transform .25s ease;
}

.heart.is-lost {
  opacity: .24;
  transform: scale(.72);
  filter: grayscale(1);
}

.play-layout {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(145px, .64fr) minmax(300px, 1.36fr);
  align-items: center;
  gap: clamp(12px, 3vw, 28px);
  padding: 22px 22px 58px 98px;
}

.scene-side {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.sea-scene {
  position: relative;
  width: min(360px, 100%);
  height: clamp(264px, 36vw, 380px);
}

.turtle-guide {
  position: absolute;
  left: 5%;
  top: 8%;
  width: clamp(138px, 17vw, 204px);
  height: clamp(96px, 12vw, 142px);
  filter: drop-shadow(0 18px 18px rgba(4,20,32,.2));
  animation: turtleFloat 3.2s ease-in-out infinite;
}

.turtle-shell {
  position: absolute;
  left: 34%;
  top: 24%;
  width: 54%;
  height: 62%;
  border: 7px solid #064e3b;
  border-radius: 50% 46% 48% 52%;
  background:
    radial-gradient(circle at 32% 36%, rgba(255,255,255,.3), transparent 18%),
    linear-gradient(135deg, #16a34a, #0f766e);
}

.turtle-shell::before,
.turtle-shell::after {
  content: "";
  position: absolute;
  inset: 18% 24%;
  border: 3px solid rgba(6,78,59,.55);
  border-radius: 50%;
}

.turtle-shell::after {
  inset: 30% 9%;
  border-left: 0;
  border-right: 0;
}

.turtle-head {
  position: absolute;
  left: 2%;
  top: 26%;
  width: 46%;
  height: 48%;
  border: 6px solid #064e3b;
  border-radius: 50%;
  background: linear-gradient(180deg, #bbf7d0, #22c55e);
}

.turtle-head i {
  position: absolute;
  top: 32%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #102033;
}

.turtle-head i:first-child {
  left: 31%;
}

.turtle-head i:nth-child(2) {
  right: 24%;
}

.turtle-head b {
  position: absolute;
  left: 36%;
  bottom: 23%;
  width: 28%;
  height: 13px;
  border-bottom: 4px solid #102033;
  border-radius: 0 0 999px 999px;
}

.turtle-flipper,
.turtle-tail {
  position: absolute;
  background: linear-gradient(180deg, #86efac, #16a34a);
  border: 5px solid #064e3b;
}

.turtle-flipper {
  width: 42px;
  height: 30px;
  border-radius: 50%;
}

.flipper-left {
  left: 44%;
  top: 4%;
  transform: rotate(-28deg);
}

.flipper-right {
  left: 55%;
  bottom: 2%;
  transform: rotate(28deg);
}

.turtle-tail {
  right: 0;
  top: 48%;
  width: 24px;
  height: 20px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.submarine {
  position: absolute;
  right: 0;
  top: 36%;
  width: clamp(116px, 15vw, 166px);
  height: clamp(70px, 9vw, 98px);
  border: 6px solid #7c2d12;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 38%, rgba(255,255,255,.5), transparent 17%),
    linear-gradient(180deg, #fef08a, #facc15 60%, #f97316);
  box-shadow: inset 0 -10px 0 rgba(124,45,18,.14), 0 16px 22px rgba(4,20,32,.18);
  transform: translateX(0);
  transition: transform .45s ease;
}

.submarine::before,
.submarine::after {
  content: "";
  position: absolute;
  background: #f97316;
  border: 5px solid #7c2d12;
}

.submarine::before {
  left: 44%;
  top: -31px;
  width: 34px;
  height: 30px;
  border-radius: 12px 12px 0 0;
}

.submarine::after {
  right: -26px;
  top: 22%;
  width: 34px;
  height: 38px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.sub-window {
  position: absolute;
  left: 22%;
  top: 29%;
  width: 38px;
  height: 38px;
  border: 5px solid #7c2d12;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 31%, #fff 0 6px, transparent 7px),
    linear-gradient(135deg, #dff7ff, #0ea5e9);
}

.sub-light {
  position: absolute;
  left: -48px;
  top: 44%;
  width: 58px;
  height: 30px;
  background: linear-gradient(90deg, rgba(255,255,255,.78), transparent);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  opacity: .58;
}

.treasure-chest {
  position: absolute;
  left: 18%;
  bottom: 5%;
  width: clamp(138px, 18vw, 204px);
  height: clamp(98px, 12vw, 142px);
  filter: drop-shadow(0 18px 18px rgba(4,20,32,.22));
}

.chest-lid,
.chest-body,
.chest-coins {
  position: absolute;
  left: 0;
  right: 0;
}

.chest-lid {
  top: 0;
  height: 48%;
  border: 7px solid #7c2d12;
  border-radius: 28px 28px 8px 8px;
  background:
    linear-gradient(90deg, transparent 45%, rgba(255,255,255,.2) 46% 54%, transparent 55%),
    linear-gradient(180deg, #b45309, #78350f);
  transform-origin: 10% 100%;
  transition: transform .45s ease;
}

.chest-body {
  bottom: 0;
  height: 62%;
  border: 7px solid #7c2d12;
  border-radius: 8px 8px 18px 18px;
  background:
    linear-gradient(90deg, transparent 44%, rgba(255,255,255,.22) 45% 55%, transparent 56%),
    linear-gradient(180deg, #d97706, #92400e);
}

.chest-body::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 22%;
  width: 22px;
  height: 24px;
  border-radius: 6px;
  background: #facc15;
  box-shadow: inset 0 0 0 3px rgba(124,45,18,.3);
  transform: translateX(-50%);
}

.chest-coins {
  left: 14%;
  right: 14%;
  top: 37%;
  height: calc(var(--progress) * .62px);
  max-height: 42px;
  border-radius: 999px 999px 10px 10px;
  background:
    radial-gradient(circle at 20% 54%, #fef08a 0 9px, transparent 10px),
    radial-gradient(circle at 48% 38%, #facc15 0 10px, transparent 11px),
    radial-gradient(circle at 75% 58%, #fef08a 0 9px, transparent 10px),
    linear-gradient(180deg, #fde68a, #f59e0b);
  opacity: .35;
  transition: height .45s ease, opacity .45s ease;
}

.ocean-app[data-progress-ready="true"] .chest-lid {
  transform: rotate(-10deg);
}

.ocean-app[data-progress-ready="true"] .chest-coins {
  opacity: 1;
}

.sticker-bubble {
  position: absolute;
  right: 8%;
  bottom: 7%;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border: 5px solid rgba(255,255,255,.82);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 27%, #fff 0 12px, transparent 13px),
    linear-gradient(135deg, rgba(236,254,255,.92), rgba(186,230,253,.78));
  color: #0f766e;
  font-size: 20px;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(4,20,32,.16);
  transform: scale(.8);
  opacity: .74;
}

.ocean-app.is-sticker-unlocked .sticker-bubble {
  animation: stickerPop .7s ease forwards;
}

.turtle-guide.is-happy {
  animation: turtleHappy .72s ease;
}

.turtle-guide.is-wrong {
  animation: turtleWrong .42s ease;
}

.treasure-chest.is-shine {
  animation: chestShine .85s ease;
}

.play-layout {
  pointer-events: none;
}

.challenge-card,
.scene-side {
  pointer-events: auto;
}

.challenge-card {
  min-width: 0;
  max-width: 780px;
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: clamp(12px, 2.6vw, 18px);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 8px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 26px 70px rgba(4,20,32,.22);
  text-align: center;
}

.speech-bubble {
  position: relative;
  width: min(590px, 100%);
  padding: 9px 12px;
  border: 3px solid rgba(16,32,51,.12);
  border-radius: 16px;
  background: #ecfeff;
}

.speech-bubble strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: clamp(18px, 3.2vw, 28px);
  line-height: 1.12;
}

.visual-zone {
  width: 100%;
  min-height: clamp(138px, 28svh, 194px);
  display: grid;
  place-items: center;
}

.decimal-card,
.place-card,
.coin-compare,
.convert-card {
  width: min(620px, 100%);
  display: grid;
  justify-items: center;
  gap: 10px;
}

.decimal-display {
  min-width: min(340px, 100%);
  padding: 13px 18px;
  border: 6px solid rgba(6,40,63,.16);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.7), transparent 16%),
    linear-gradient(180deg, #ffffff, #dff7ff);
  color: var(--ink);
  box-shadow: inset 0 -6px 0 rgba(14,165,233,.12), 0 18px 26px rgba(4,20,32,.12);
  font-size: clamp(36px, 7vw, 58px);
  font-weight: 950;
  line-height: 1;
}

.decimal-display small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.amount-model {
  width: min(500px, 100%);
  display: grid;
  justify-items: center;
  gap: 10px;
}

.whole-pearls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.model-pearl {
  width: clamp(34px, 6vw, 54px);
  aspect-ratio: 1;
  border: 4px solid rgba(16,32,51,.18);
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 26%, #fff 0 11px, transparent 12px),
    linear-gradient(135deg, #fff, #dbeafe 60%, #bae6fd);
  box-shadow: 0 10px 18px rgba(4,20,32,.12);
}

.model-grid {
  width: min(440px, 100%);
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.36)),
    rgba(6,40,63,.16);
  box-shadow: inset 0 0 0 1px rgba(16,32,51,.08);
}

.model-grid.is-tenths {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.model-grid.is-hundredths {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  width: min(360px, 100%);
  gap: 3px;
}

.model-grid span {
  aspect-ratio: 1.1;
  border: 2px solid rgba(146,64,14,.52);
  border-radius: 50% 50% 10px 10px;
  background: rgba(255,255,255,.64);
}

.model-grid span.is-filled {
  background:
    repeating-radial-gradient(circle at 50% 88%, rgba(255,255,255,.26) 0 3px, transparent 4px 7px),
    linear-gradient(180deg, #fef3c7, #fb923c);
}

.model-grid.is-hundredths span {
  height: 10px;
  aspect-ratio: auto;
  border-width: 1px;
  border-radius: 4px;
}

.amount-model p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.chest-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mini-chest,
.answer-button.chest-answer {
  position: relative;
  min-height: 78px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #fef3c7 0 26%, #b45309 27% 100%);
  color: #fff7ed;
  box-shadow: inset 0 0 0 4px rgba(124,45,18,.42), 0 10px 0 rgba(124,45,18,.28);
  font-size: clamp(18px, 3.8vw, 30px);
  font-weight: 950;
  cursor: pointer;
}

.mini-chest::before,
.answer-button.chest-answer::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 18%;
  height: 6px;
  border-radius: 999px;
  background: rgba(124,45,18,.52);
}

.place-number {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #102033;
  box-shadow: 0 16px 28px rgba(4,20,32,.18);
  color: #fff;
}

.place-digit,
.decimal-point {
  display: grid;
  place-items: center;
  min-width: clamp(34px, 7vw, 52px);
  min-height: clamp(42px, 8vw, 62px);
  border-radius: 8px;
  background: rgba(255,255,255,.12);
  font-size: clamp(30px, 6vw, 48px);
  font-weight: 950;
  line-height: 1;
}

.decimal-point {
  min-width: 18px;
  background: transparent;
  color: #facc15;
}

.place-card p,
.convert-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.coin-row {
  width: min(560px, 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.coin-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.78);
  box-shadow: inset 0 0 0 1px rgba(16,32,51,.1);
}

.coin {
  width: clamp(92px, 16vw, 136px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 8px solid #b45309;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.62), transparent 16%),
    radial-gradient(circle, #fef08a 0 47%, #facc15 48% 68%, #d97706 69%);
  color: #78350f;
  box-shadow: inset 0 -9px 0 rgba(124,45,18,.16), 0 16px 24px rgba(4,20,32,.14);
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 950;
}

.coin-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.shell-tray {
  width: min(520px, 100%);
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
  padding: 12px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.64), rgba(255,255,255,.3)),
    rgba(6,40,63,.16);
}

.shell {
  aspect-ratio: 1.1;
  border: 3px solid #92400e;
  border-radius: 50% 50% 12px 12px;
  background:
    repeating-radial-gradient(circle at 50% 88%, rgba(255,255,255,.28) 0 4px, transparent 5px 9px),
    linear-gradient(180deg, #fef3c7, #fb923c);
}

.shell-bundle {
  min-height: 58px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  padding: 6px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.38)),
    rgba(14,165,233,.12);
  box-shadow: inset 0 0 0 1px rgba(16,32,51,.08);
}

.shell-bundle i {
  aspect-ratio: 1.1;
  border: 1px solid #92400e;
  border-radius: 50% 50% 6px 6px;
  background:
    repeating-radial-gradient(circle at 50% 88%, rgba(255,255,255,.28) 0 2px, transparent 3px 5px),
    linear-gradient(180deg, #fef3c7, #fb923c);
}

.pearl-large {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 6px solid rgba(16,32,51,.16);
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 26%, #fff 0 15px, transparent 16px),
    linear-gradient(135deg, #fff, #dbeafe 60%, #bae6fd);
  color: #0f766e;
  font-weight: 950;
  box-shadow: 0 14px 24px rgba(4,20,32,.14);
}

#promptText {
  margin: 0;
  color: var(--ink);
  font-size: clamp(19px, 3.3vw, 30px);
  line-height: 1.08;
}

#detailText {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(12px, 1.8vw, 15px);
  font-weight: 800;
  line-height: 1.3;
}

.answer-dock {
  position: absolute;
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 32;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.66);
  border-radius: 8px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 18px 44px rgba(4,20,32,.22);
  backdrop-filter: blur(14px);
}

.answer-dock.is-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.answer-button,
.ocean-action {
  min-height: 58px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #ecfeff);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(16,32,51,.1), 0 8px 0 rgba(16,32,51,.16);
  font-size: clamp(17px, 3.5vw, 28px);
  font-weight: 950;
  line-height: 1.08;
  padding: 8px 10px;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.answer-button small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.answer-button:active,
.ocean-action:active {
  transform: translateY(4px);
}

.answer-button.correct,
.ocean-action.primary {
  background: linear-gradient(180deg, #dcfce7, #86efac);
}

.answer-button.wrong {
  background: linear-gradient(180deg, #fee2e2, #fca5a5);
}

.ocean-action.primary {
  color: #064e3b;
}

.ocean-action.secondary {
  background: linear-gradient(180deg, #fff, #e0f2fe);
}

.feedback {
  position: absolute;
  left: 50%;
  top: 18%;
  z-index: 40;
  min-width: 150px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(16,32,51,.9);
  color: #fff;
  box-shadow: 0 18px 44px rgba(4,20,32,.22);
  font-size: clamp(19px, 4vw, 32px);
  font-weight: 950;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px) scale(.9);
}

.feedback.show {
  animation: feedback .85s ease;
}

.overlay-card h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(28px, 6vw, 48px);
  line-height: 1.05;
}

.ocean-mark {
  width: 78px;
  height: 78px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--water), var(--reef));
  box-shadow: 0 14px 30px rgba(4,20,32,.16);
}

.ocean-mark span {
  width: 54px;
  height: 44px;
  border: 5px solid #064e3b;
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 44%, #dff7ff 0 7px, transparent 8px),
    linear-gradient(180deg, #fef08a, #f97316);
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.mode-card {
  min-height: 146px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #ecfeff);
  color: var(--ink);
  box-shadow: inset 0 -5px 0 rgba(16,32,51,.08), 0 14px 26px rgba(4,20,32,.12);
  cursor: pointer;
}

.mode-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--water), var(--reef));
  color: #fff;
  font-size: 18px;
  font-weight: 950;
}

.mode-card strong {
  font-size: 16px;
  line-height: 1.1;
}

.mode-card span:last-child {
  width: min(150px, 100%);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.28;
}

.overlay-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.action-button {
  min-width: 132px;
  min-height: 52px;
  border: 0;
  border-radius: 8px;
  background: var(--reef);
  color: #fff;
  font-size: 16px;
  font-weight: 950;
  cursor: pointer;
}

.action-button.secondary {
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(16,32,51,.13);
}

.sticker-reward {
  width: min(260px, 100%);
  min-height: 84px;
  display: grid;
  place-items: center;
  margin: 18px auto 0;
  border: 4px solid #0f766e;
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 24%, rgba(255,255,255,.7), transparent 18%),
    linear-gradient(135deg, #ecfeff, #fef3c7);
  color: #0f766e;
  font-size: 28px;
  font-weight: 950;
  box-shadow: 0 16px 28px rgba(4,20,32,.12);
}

@keyframes brandLetterIn {
  0% { opacity: 0; transform: translateX(-28px) translateY(8px) rotate(-5deg); }
  68% { opacity: 1; transform: translateX(3px) translateY(0) rotate(1deg); }
  100% { opacity: 1; transform: translateX(0) translateY(0) rotate(0); }
}

@keyframes loaderSweep {
  0%, 18% { transform: rotate(-8deg) translateX(-62%); }
  62%, 100% { transform: rotate(-8deg) translateX(62%); }
}

@keyframes rotateCue {
  0%, 100% { transform: rotate(90deg); }
  48% { transform: rotate(0deg); }
}

@keyframes bubbleRise {
  0%, 100% { transform: translateY(0) scale(.88); opacity: .45; }
  50% { transform: translateY(-64px) scale(1.08); opacity: .9; }
}

@keyframes sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(5deg); }
}

@keyframes turtleFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

@keyframes turtleHappy {
  0%, 100% { transform: translateY(0) rotate(0); }
  44% { transform: translateY(-18px) rotate(-5deg); }
  72% { transform: translateY(-6px) rotate(4deg); }
}

@keyframes turtleWrong {
  20% { transform: translateX(-8px) rotate(-4deg); }
  50% { transform: translateX(8px) rotate(4deg); }
  75% { transform: translateX(-4px) rotate(-2deg); }
}

@keyframes chestShine {
  0%, 100% { filter: drop-shadow(0 18px 18px rgba(4,20,32,.22)); }
  45% { filter: drop-shadow(0 18px 18px rgba(4,20,32,.22)) drop-shadow(0 0 20px rgba(250,204,21,.78)); }
}

@keyframes stickerPop {
  0% { transform: scale(.8); opacity: .74; }
  60% { transform: scale(1.16); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes feedback {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(.9); }
  18%, 72% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -14px) scale(.95); }
}

@media (max-width: 940px) {
  .mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .ocean-app {
    min-height: 0;
  }

  .stage-wrap {
    inset-bottom: 116px;
    padding: 88px 10px 8px;
  }

  .play-layout {
    grid-template-columns: minmax(112px, .58fr) minmax(246px, 1.42fr);
    gap: 8px;
    padding: 10px 8px 54px 64px;
  }

  .sea-scene {
    width: min(250px, 100%);
    height: 236px;
    transform: scale(.82);
    transform-origin: center bottom;
  }

  .challenge-card {
    gap: 6px;
    padding: 10px 8px;
  }

  .speech-bubble {
    padding: 7px 9px;
  }

  .speech-bubble strong {
    font-size: clamp(16px, 3vw, 22px);
  }

  .visual-zone {
    min-height: 136px;
  }

  .decimal-display {
    min-width: 220px;
    padding: 10px 12px;
    font-size: clamp(30px, 6vw, 42px);
  }

  .amount-model {
    gap: 7px;
  }

  .model-grid {
    width: min(330px, 100%);
    gap: 3px;
    padding: 8px;
  }

  .model-grid.is-hundredths {
    width: min(300px, 100%);
  }

  .model-grid.is-hundredths span {
    height: 8px;
  }

  .amount-model p {
    font-size: 12px;
  }

  .coin {
    width: clamp(82px, 14vw, 108px);
  }

  .shell-tray {
    gap: 4px;
    padding: 8px;
  }

  .treasure-meter {
    top: 8px;
    bottom: 76px;
    width: 52px;
    padding: 8px 5px 12px;
  }

  .meter-label {
    font-size: 9px;
  }

  .meter-track {
    width: 15px;
  }

  .meter-pearl {
    width: 28px;
    height: 28px;
    border-width: 2px;
  }

  .heart-bar {
    top: 8px;
    right: 8px;
    padding: 5px 7px;
  }

  .heart {
    font-size: 15px;
  }

  .answer-dock,
  .answer-dock.is-three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 9px;
  }

  .answer-button,
  .ocean-action {
    min-height: 52px;
    font-size: clamp(16px, 3.2vw, 22px);
  }
}

@media (max-width: 760px) and (orientation: portrait) {
  .ocean-app:not(.is-loading) .rotate-overlay {
    display: flex;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .ocean-app {
    min-height: 0;
  }

  .game-topbar {
    top: max(8px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    min-height: 50px;
    padding: 6px 8px;
  }

  .game-kicker {
    display: none;
  }

  .hud-item {
    min-width: 54px;
    padding: 5px 6px;
  }

  .hud-item span {
    font-size: 9px;
  }

  .hud-item strong {
    font-size: 14px;
  }

  .stage-wrap {
    inset: 0 0 82px;
    padding: 64px 8px 6px;
  }

  .play-layout {
    grid-template-columns: minmax(84px, .48fr) minmax(222px, 1.52fr);
    gap: 7px;
    padding: 8px 8px 42px 52px;
  }

  .sea-scene {
    width: min(250px, 100%);
    height: 220px;
    transform: scale(.68);
    transform-origin: center bottom;
  }

  .challenge-card {
    gap: 5px;
    padding: 8px;
  }

  .speech-bubble {
    padding: 6px 8px;
  }

  .speech-bubble strong {
    font-size: clamp(16px, 2.5vw, 20px);
  }

  .visual-zone {
    min-height: 106px;
  }

  .decimal-display {
    min-width: 188px;
    padding: 8px 10px;
    font-size: clamp(27px, 4vw, 36px);
  }

  .amount-model {
    gap: 5px;
  }

  .model-pearl {
    width: 32px;
  }

  .model-grid {
    width: min(286px, 100%);
    gap: 2px;
    padding: 6px;
  }

  .model-grid span {
    border-width: 1px;
  }

  .model-grid.is-hundredths {
    width: min(240px, 100%);
  }

  .model-grid.is-hundredths span {
    height: 6px;
  }

  .amount-model p {
    display: none;
  }

  .chest-row {
    gap: 6px;
  }

  .mini-chest,
  .answer-button.chest-answer {
    min-height: 54px;
  }

  .place-number {
    padding: 7px 10px;
  }

  .place-digit,
  .decimal-point {
    min-width: 30px;
    min-height: 38px;
    font-size: 27px;
  }

  .coin-row {
    gap: 8px;
  }

  .coin-card {
    padding: 7px;
  }

  .coin {
    width: min(90px, 15vw, 28svh);
  }

  .shell-tray {
    gap: 3px;
    padding: 7px;
  }

  .pearl-large {
    width: 54px;
    height: 54px;
  }

  #promptText {
    font-size: clamp(16px, 2.5vw, 20px);
  }

  #detailText {
    display: none;
  }

  .treasure-meter {
    top: 6px;
    bottom: 58px;
    width: 46px;
    padding: 7px 4px 10px;
  }

  .meter-label {
    display: none;
  }

  .heart-bar {
    top: 6px;
    right: 6px;
  }

  .answer-dock,
  .answer-dock.is-three {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
  }

  .answer-button,
  .ocean-action {
    min-height: 44px;
    padding: 6px 8px;
    font-size: clamp(15px, 2.6vw, 20px);
  }
}

@media (max-width: 430px) and (orientation: portrait) {
  .loader-card,
  .overlay-card {
    padding-inline: 12px;
  }

  .loader-brand {
    font-size: clamp(24px, 9.6vw, 34px);
  }

  .game-topbar {
    min-height: 62px;
    gap: 7px;
  }

  .hud {
    gap: 5px;
  }

  .hud-item {
    min-width: 52px;
    padding: 6px;
  }

  .hud-item span {
    font-size: 9px;
  }

  .hud-item strong {
    font-size: 14px;
  }

  .mode-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-height: 520px) and (orientation: landscape) {
  .game-overlay {
    align-items: stretch !important;
    justify-content: center !important;
    padding: 2px max(42px, env(safe-area-inset-right)) 2px max(2px, env(safe-area-inset-left)) !important;
    overflow: hidden !important;
  }

  .game-overlay.is-visible {
    display: flex !important;
  }

  .overlay-card {
    align-self: stretch !important;
    width: min(760px, calc(100vw - 48px)) !important;
    max-height: calc(100dvh - 4px) !important;
    overflow-y: auto !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
  }

  .menu-card {
    display: grid !important;
    align-content: start !important;
    gap: 8px !important;
  }

  .overlay-kicker {
    margin: 0 0 2px !important;
    font-size: 9px !important;
  }

  .overlay-card h2 {
    margin: 0 !important;
    font-size: clamp(26px, 9vh, 42px) !important;
    line-height: .95 !important;
  }

  .menu-card > p {
    display: none !important;
  }

  .mode-grid,
  .mode-grid.two-col {
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)) !important;
    gap: 6px !important;
  }

  .mode-card,
  .big-card {
    min-height: 86px !important;
    padding: 7px 6px !important;
    border-radius: 10px !important;
  }

  .mode-icon {
    width: 40px !important;
    height: 40px !important;
    margin: 0 auto 4px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
  }

  .mode-card strong {
    font-size: clamp(13px, 3.8vh, 17px) !important;
    line-height: 1.08 !important;
  }

  .mode-card span:last-child {
    margin-top: 2px !important;
    font-size: 10px !important;
    line-height: 1.12 !important;
  }

  .overlay-actions {
    margin-top: 8px !important;
    gap: 8px !important;
  }

  .action-button,
  .ocean-action {
    min-height: 36px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
  }

  .sticker-reward {
    margin-top: 8px !important;
    padding: 8px 10px !important;
    font-size: 15px !important;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .challenge-card {
    grid-template-rows: auto minmax(82px, 1fr) auto;
    align-content: stretch;
    gap: 4px !important;
    padding: 7px !important;
  }

  .speech-bubble {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding: 7px 9px !important;
    border-width: 2px !important;
    border-radius: 12px !important;
  }

  .speech-bubble .guide-label {
    display: none !important;
  }

  .speech-bubble strong,
  #orderText {
    margin: 0 !important;
    display: block !important;
    overflow: visible !important;
    font-size: clamp(14px, 3.2vh, 18px) !important;
    line-height: 1.28 !important;
    overflow-wrap: anywhere;
  }

  .visual-zone {
    min-height: 88px !important;
  }

  #promptText {
    font-size: clamp(14px, 3vh, 18px) !important;
    line-height: 1.18 !important;
  }
}