/* ═══════════════════════════════════════════════════════════
   DOODLE LAGOON — storybook bath-toy design system
   ═══════════════════════════════════════════════════════════ */

:root {
  --ink: #1E3A5F;
  --paper: #FFFDF7;
  --lagoon-pale: #DFF6FB;
  --lagoon: #7FE3F2;
  --lagoon-deep: #2FB9DB;
  --sea-floor: #1583B5;
  --coral: #FF8A7A;
  --coral-deep: #F26B5E;
  --sun: #FFD93D;
  --leaf: #43D97B;
  --grape: #B07CFF;
  --sky-btn: #3EB8FF;

  --shadow-pop: 0 6px 0 rgba(30, 58, 95, .18);
  --shadow-float: 0 14px 34px rgba(14, 111, 166, .28);

  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);

  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  position: fixed;
  inset: 0;
  width: 100%;
  background: var(--lagoon-pale);
  color: var(--ink);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

button {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

.screen {
  position: fixed;
  inset: 0;
  overflow: hidden;
}
.screen[hidden] { display: none; }

/* ── wordmark ─────────────────────────────── */
.wordmark {
  font-weight: 900;
  letter-spacing: .5px;
  color: var(--paper);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 rgba(30,58,95,.25);
}

/* ── boot splash ──────────────────────────── */
#splash {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; align-content: center; gap: 18px;
  background: linear-gradient(180deg, #A9E7F6 0%, #5FD9EC 55%, #1583B5 100%);
  transition: opacity .45s ease, visibility .45s;
}
#splash.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-octo { width: min(42vw, 240px); }
#splash .wordmark { font-size: clamp(28px, 6vw, 52px); }
.octo-bob { animation: bob 2.6s ease-in-out infinite; transform-origin: center; }
.octo-eye { animation: blink 4.4s infinite; transform-origin: center; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
.splash-bubbles { position: absolute; inset: 0; pointer-events: none; }
.splash-bubbles i {
  position: absolute; bottom: -40px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.75);
  animation: rise 4s linear infinite;
}
.splash-bubbles i:nth-child(1) { left: 12%; width: 22px; height: 22px; animation-delay: 0s; }
.splash-bubbles i:nth-child(2) { left: 30%; width: 12px; height: 12px; animation-delay: 1.1s; }
.splash-bubbles i:nth-child(3) { left: 55%; width: 28px; height: 28px; animation-delay: .4s; }
.splash-bubbles i:nth-child(4) { left: 72%; width: 14px; height: 14px; animation-delay: 1.7s; }
.splash-bubbles i:nth-child(5) { left: 88%; width: 20px; height: 20px; animation-delay: .8s; }
@keyframes rise { to { transform: translateY(-115vh); opacity: 0; } }

/* ── island map ───────────────────────────── */
#scr-map { background: #A9E7F6; }
#mapArt { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-wordmark {
  position: absolute; top: calc(var(--sat) + 10px); left: 50%;
  transform: translateX(-50%);
  font-size: clamp(22px, 4.6vw, 40px);
  pointer-events: none;
}
.sun-rays { animation: sunspin 24s linear infinite; transform-origin: 0 0; }
@keyframes sunspin { to { transform: rotate(360deg); } }
.cloud-a { animation: drift 34s linear infinite; }
.cloud-b { animation: drift 46s linear infinite reverse; }
@keyframes drift { 0% { transform: translateX(-6%); } 50% { transform: translateX(6%); } 100% { transform: translateX(-6%); } }
.waveband path { animation: waveslide 7s ease-in-out infinite; }
.wave-2 path { animation-duration: 9s; animation-delay: -2s; }
.wave-3 path { animation-duration: 11s; animation-delay: -4s; }
@keyframes waveslide { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-60px); } }

.island { cursor: pointer; animation: islandbob 5s ease-in-out infinite; }
#isl-color  { animation-delay: -1.2s; }
#isl-trace  { animation-delay: -2.4s; }
#isl-stick  { animation-delay: -3.1s; }
#isl-museum { animation-delay: -4.2s; }
@keyframes islandbob {
  0%,100% { transform: translate(var(--tx), var(--ty)) scale(var(--ts, 1)); }
  50% { transform: translate(var(--tx), calc(var(--ty) - 10px)) scale(var(--ts, 1)); }
}
.island.pressed { animation: islandsquash .5s ease; }
@keyframes islandsquash {
  30% { transform: translate(var(--tx), calc(var(--ty) + 8px)) scale(calc(var(--ts, 1) * 1.06), calc(var(--ts, 1) * .9)); }
  65% { transform: translate(var(--tx), calc(var(--ty) - 6px)) scale(calc(var(--ts, 1) * .96), calc(var(--ts, 1) * 1.05)); }
  100% { transform: translate(var(--tx), var(--ty)) scale(var(--ts, 1)); }
}
.inky { cursor: pointer; }
.inky .octo-bob { animation-duration: 3.2s; }
.inky.wave .octo-bob { animation: octowave .8s ease; }
@keyframes octowave { 30% { transform: rotate(-14deg) translateY(-8px); } 70% { transform: rotate(10deg); } }

/* ── round bubble buttons ─────────────────── */
.bub-btn {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--paper);
  border: 5px solid var(--ink);
  box-shadow: var(--shadow-pop);
  display: grid; place-items: center;
  transition: transform .12s ease;
  position: relative;
}
.bub-btn:active { transform: scale(.86); }
.bub-btn svg { width: 66%; height: 66%; }
.bub-btn.small { width: 54px; height: 54px; }
.corner-tl { position: absolute; top: calc(var(--sat) + 12px); left: calc(var(--sal) + 12px); z-index: 20; }
.corner-tr { position: absolute; top: calc(var(--sat) + 12px); right: calc(var(--sar) + 12px); z-index: 20; }
.corner-bl { position: absolute; bottom: calc(var(--sab) + 12px); left: calc(var(--sal) + 12px); z-index: 20; }

.btn-back::before {
  content: "";
  width: 55%; height: 55%;
  background: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M24 8 L10 20 l14 12" fill="none" stroke="%231E3A5F" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

#btnSound { background: var(--sun); }
#btnSound::before {
  content: "";
  width: 60%; height: 60%;
  background: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M6 16 h7 l9 -8 v24 l-9 -8 H6 z" fill="%231E3A5F"/><path d="M27 14 q5 6 0 12 M31 10 q8 10 0 20" fill="none" stroke="%231E3A5F" stroke-width="4" stroke-linecap="round"/></svg>');
}
#btnSound.muted::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M6 16 h7 l9 -8 v24 l-9 -8 H6 z" fill="%231E3A5F"/><path d="M27 14 l8 12 m0 -12 l-8 12" fill="none" stroke="%231E3A5F" stroke-width="4" stroke-linecap="round"/></svg>');
}

.shell-btn {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--paper); border: 5px solid var(--ink);
  box-shadow: var(--shadow-pop); opacity: .82;
}
.shell-btn::before {
  content: "";
  position: absolute; inset: 18%;
  background: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M7 26 a13 13 0 0 1 26 0 z" fill="%23C99DF2" stroke="%231E3A5F" stroke-width="4" stroke-linejoin="round"/><path d="M13.5 25 a6.5 15 0 0 1 13 0 M20 13 v12" fill="none" stroke="%231E3A5F" stroke-width="3.4" stroke-linecap="round"/></svg>');
}

.done-btn {
  min-width: 84px; height: 62px; border-radius: 34px;
  background: var(--leaf); border: 5px solid var(--ink);
  box-shadow: var(--shadow-pop);
  color: var(--paper); font-size: 34px; font-weight: 900;
  -webkit-text-stroke: 1.5px var(--ink);
  transition: transform .12s ease;
}
.done-btn:active { transform: scale(.9); }

/* ── paint-style screens ──────────────────── */
.paintlike { background: var(--lagoon-pale); }
.paintlike::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(30,58,95,.05) 0 8px, transparent 9px),
    radial-gradient(circle at 82% 14%, rgba(30,58,95,.05) 0 6px, transparent 7px),
    radial-gradient(circle at 8% 76%, rgba(30,58,95,.05) 0 7px, transparent 8px),
    radial-gradient(circle at 90% 82%, rgba(30,58,95,.05) 0 9px, transparent 10px),
    radial-gradient(circle at 55% 92%, rgba(30,58,95,.04) 0 6px, transparent 7px),
    radial-gradient(circle at 45% 6%, rgba(30,58,95,.04) 0 5px, transparent 6px);
  background-color: var(--lagoon-pale);
}

.canvas-stage {
  position: absolute;
  inset: calc(var(--sat) + 10px) calc(var(--sar) + 96px) calc(var(--sab) + 118px) calc(var(--sal) + 88px);
  display: grid; place-items: center;
}
.canvas-card {
  position: relative;
  width: 100%; height: 100%;
  background: var(--paper);
  border-radius: 22px;
  border: 5px solid var(--ink);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.canvas-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#paintInk { touch-action: none; }

.undo-dock {
  position: absolute;
  left: calc(var(--sal) + 12px); bottom: calc(var(--sab) + 14px);
  display: flex; gap: 10px; z-index: 20;
}
.undo-dock .bub-btn[disabled] { opacity: .35; }

.magic-btn {
  position: absolute;
  right: calc(var(--sar) + 14px); bottom: calc(var(--sab) + 14px);
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--grape); border: 5px solid var(--ink);
  box-shadow: var(--shadow-pop); z-index: 20;
  display: grid; place-items: center;
  animation: magicpulse 2.8s ease-in-out infinite;
}
.magic-btn svg { width: 74%; height: 74%; }
.magic-btn:active { transform: scale(.88); }
@keyframes magicpulse { 0%,100% { box-shadow: var(--shadow-pop), 0 0 0 0 rgba(176,124,255,.5); } 55% { box-shadow: var(--shadow-pop), 0 0 0 16px rgba(176,124,255,0); } }

/* size slider */
.size-slider {
  position: absolute;
  left: calc(var(--sal) + 12px); top: 50%;
  transform: translateY(-58%);
  width: 60px; height: 240px; z-index: 20;
  touch-action: none;
}
.size-track { width: 100%; height: 100%; filter: drop-shadow(0 5px 0 rgba(30,58,95,.15)); }
.size-knob {
  position: absolute; left: 50%; top: 30%;
  width: 42px; height: 42px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--sky-btn);
  border: 5px solid var(--ink);
  box-shadow: var(--shadow-pop);
  transition: width .15s, height .15s;
  pointer-events: none;
}

/* tool shelf */
.tool-shelf {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: clamp(2px, 1vw, 14px);
  height: calc(96px + var(--sab));
  padding: 0 90px;
  z-index: 15;
  pointer-events: none;
}
.tool {
  pointer-events: auto;
  width: clamp(54px, 8.5vw, 76px);
  height: 150px;
  margin-bottom: calc(-58px);
  transform: translateY(0);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
  filter: drop-shadow(0 4px 0 rgba(30,58,95,.18));
}
.tool svg { width: 100%; height: 100%; }
.tool.on { transform: translateY(-44px); }
.tool:active { transform: translateY(-50px) scale(1.04); }

/* color rail */
.color-rail {
  position: absolute;
  right: calc(var(--sar) + 12px); top: 50%;
  transform: translateY(-50%);
  display: grid; grid-auto-flow: row; gap: 10px;
  z-index: 20;
  max-height: 86vh;
}
.swatch {
  width: clamp(44px, 6.4vh, 56px); height: clamp(44px, 6.4vh, 56px);
  border-radius: 50%;
  border: 4px solid var(--ink);
  box-shadow: 0 4px 0 rgba(30,58,95,.18);
  transition: transform .16s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
.swatch.on { transform: scale(1.22); }
.swatch.on::after {
  content: ""; position: absolute; inset: -11px;
  border: 4px solid var(--paper); border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(30,58,95,.35);
}
.swatch.rainbow {
  background: conic-gradient(#FF5A5F, #FFB020, #FFE14D, #43D97B, #3EB8FF, #B07CFF, #FF5A5F);
  animation: spinwheel 5s linear infinite;
}
@keyframes spinwheel { to { rotate: 360deg; } }
.swatch.white-swatch { background: #FFFFFF; }
.swatch.fancy { overflow: hidden; background: #FFFFFF; }
.swatch.fancy svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  pointer-events: none;
}

/* the coloring rail holds 21 fills → two columns */
#colorRail2 { grid-template-columns: repeat(2, auto); justify-items: center; }
#scr-coloring .canvas-stage { right: calc(var(--sar) + 148px); }

/* magic sheet */
.magic-sheet {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(14, 90, 138, .45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center;
}
.magic-sheet[hidden] { display: none; }
.magic-cards { display: flex; gap: clamp(10px, 3vw, 26px); }
.magic-card {
  width: clamp(84px, 17vw, 150px);
  aspect-ratio: 3/4;
  border-radius: 24px;
  background: var(--paper);
  border: 5px solid var(--ink);
  box-shadow: var(--shadow-float);
  display: grid; place-items: center;
  animation: cardpop .5s cubic-bezier(.34,1.56,.64,1) backwards;
}
.magic-card:nth-child(2) { animation-delay: .06s; }
.magic-card:nth-child(3) { animation-delay: .12s; }
.magic-card:nth-child(4) { animation-delay: .18s; }
@keyframes cardpop { from { transform: scale(.4) rotate(-6deg); opacity: 0; } }
.magic-card:active { transform: scale(.92); }
.mc-art { width: 72%; aspect-ratio: 1; border-radius: 18px; border: 4px solid var(--ink); display: block; }
.mc-neon { background: radial-gradient(circle at 50% 50%, #16E7FF 0 30%, #0A1030 70%); box-shadow: inset 0 0 18px #16E7FF; }
.mc-pixel { background: conic-gradient(#FF6B6B 0 25%, #FFD93D 0 50%, #43D97B 0 75%, #3EB8FF 0); image-rendering: pixelated; border-radius: 8px; }
.mc-wiggle {
  background:
    repeating-radial-gradient(circle at 30% 30%, #FFB020 0 6px, #FF8A7A 6px 12px, #FFB020 12px 18px);
  border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%;
}
.mc-glitter { background: #B07CFF; position: relative; overflow: hidden; }
.mc-glitter::before, .mc-glitter::after {
  content: "✦ ✧ ✦"; position: absolute; color: #FFE14D; font-size: 18px;
  left: 6px;
}
.mc-glitter::before { top: 8px; }
.mc-glitter::after { bottom: 8px; right: 6px; left: auto; color: #fff; }

/* ── picker screens (coloring) ────────────── */
.picker-screen {
  background: linear-gradient(180deg, #CDEFFB, #8FE0F0);
}
.picker-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 22vw, 220px), 1fr));
  gap: clamp(12px, 2.4vw, 26px);
  padding: calc(var(--sat) + 88px) calc(var(--sar) + 22px) calc(var(--sab) + 24px) calc(var(--sal) + 22px);
  width: 100%; height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  align-content: start;
}
.page-card {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--paper);
  border: 5px solid var(--ink);
  border-radius: 26px;
  box-shadow: var(--shadow-float);
  display: grid; place-items: center;
  padding: 12px;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
  animation: cardpop .5s cubic-bezier(.34,1.56,.64,1) backwards;
}
.page-card:nth-child(2) { animation-delay: .06s; }
.page-card:nth-child(3) { animation-delay: .12s; }
.page-card:nth-child(4) { animation-delay: .18s; }
.page-card:nth-child(5) { animation-delay: .24s; }
.page-card:active { transform: scale(.93) rotate(-1.5deg); }
.page-card svg { width: 100%; height: 100%; }

#coloringHolder { display: grid; place-items: center; padding: 8px; }
#coloringHolder svg { width: 100%; height: 100%; touch-action: none; }
#coloringHolder .region { transition: fill .12s; cursor: pointer; }
#coloringHolder .region.popped { animation: regionpop .3s ease; transform-box: fill-box; transform-origin: center; }
@keyframes regionpop { 40% { transform: scale(1.06); } }

/* ── tracing ──────────────────────────────── */
.tracing-screen { background: linear-gradient(180deg, #0E6FA6, #1583B5 55%, #0E5A86); }
.trace-stage { position: absolute; inset: calc(var(--sat) + 8px) 8px calc(var(--sab) + 84px) 8px; }
#traceSvg, #traceGlow { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.trace-guide {
  fill: none; stroke: rgba(255,255,255,.5); stroke-width: 26;
  stroke-linecap: round; stroke-linejoin: round;
}
.trace-dash {
  fill: none; stroke: #FFFDF7; stroke-width: 7;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 2 26;
  animation: dashmarch 1.6s linear infinite;
}
@keyframes dashmarch { to { stroke-dashoffset: -56; } }
.trace-start {
  fill: var(--sun); stroke: var(--ink); stroke-width: 6;
  animation: startpulse 1.2s ease-in-out infinite;
  transform-box: fill-box; transform-origin: center;
}
@keyframes startpulse { 50% { transform: scale(1.35); } }
.trace-dots {
  position: absolute; bottom: calc(var(--sab) + 18px); left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 14px; z-index: 20;
}
.tdot {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.4); border: 4px solid var(--paper);
}
.tdot.done { background: var(--sun); }
.tdot.now { background: var(--coral); transform: scale(1.25); }

/* ── stickers ─────────────────────────────── */
.sticker-screen { background: #0E6FA6; }
#stickerScene { position: absolute; inset: 0 0 calc(var(--sab) + 104px) 0; overflow: hidden; }
.reef-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kelp { transform-origin: bottom center; animation: sway 5s ease-in-out infinite; }
.k2 { animation-delay: -1.6s; } .k3 { animation-delay: -3s; }
@keyframes sway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.rb { animation: rbrise 6s linear infinite; }
.rb2 { animation-delay: -2s; } .rb3 { animation-delay: -4s; }
@keyframes rbrise { to { transform: translateY(-560px); opacity: 0; } }
#stickerLayer { position: absolute; inset: 0; }
.sticker {
  position: absolute;
  font-size: 84px; line-height: 1;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 6px rgba(4, 40, 66, .4));
  touch-action: none;
  animation: stickerland .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes stickerland { from { transform: translate(-50%, -50%) scale(.2) rotate(-20deg); } }
.sticker.dragging { filter: drop-shadow(0 14px 14px rgba(4,40,66,.5)); z-index: 5; }
.sticker-tray {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(104px + var(--sab));
  padding: 10px calc(var(--sal) + 88px) var(--sab) calc(var(--sal) + 88px);
  display: flex; gap: 8px; align-items: center;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  background: var(--paper);
  border-top: 5px solid var(--ink);
  z-index: 15;
}
.tray-sticker {
  flex: 0 0 auto;
  width: 72px; height: 72px;
  font-size: 52px; line-height: 72px; text-align: center;
  background: var(--lagoon-pale);
  border: 4px solid var(--ink); border-radius: 20px;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}
.tray-sticker:active { transform: scale(.85) rotate(-6deg); }
.whirl-bin {
  position: absolute;
  right: calc(var(--sar) + 14px); bottom: calc(var(--sab) + 118px);
  width: 66px; height: 66px; border-radius: 50%;
  background: rgba(9, 62, 96, .55);
  border: 4px dashed rgba(255,253,247,.8);
  display: grid; place-items: center;
  z-index: 14;
  transition: transform .15s;
}
.whirl-bin svg { width: 62%; height: 62%; animation: spinwheel 3s linear infinite; }
.whirl-bin.hot { transform: scale(1.25); background: rgba(242,107,94,.8); }

/* ── museum ───────────────────────────────── */
.museum-screen { background: #F6E7C8; }
.museum-hall { position: absolute; inset: 0; display: flex; flex-direction: column; }
.museum-banner { display: grid; place-items: center; padding-top: calc(var(--sat) + 6px); }
.museum-banner svg { width: 92px; }
.museum-wall {
  flex: 1;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(14px, 3vw, 30px);
  padding: 18px calc(var(--sar) + 24px) 26px calc(var(--sal) + 88px);
  align-content: start;
  background:
    repeating-linear-gradient(90deg, transparent 0 88px, rgba(30,58,95,.045) 88px 96px),
    linear-gradient(180deg, #FBF3DE, #F1DDB4);
}
.museum-floor {
  height: calc(56px + var(--sab));
  background: linear-gradient(180deg, #C89B62, #A87B44);
  border-top: 6px solid var(--ink);
}
.frame {
  aspect-ratio: 4/3;
  background: var(--paper);
  border: 10px solid #B07C4F;
  outline: 5px solid var(--ink);
  border-radius: 6px;
  box-shadow: 0 10px 22px rgba(90, 60, 20, .3);
  overflow: hidden;
  padding: 0;
  animation: cardpop .5s cubic-bezier(.34,1.56,.64,1) backwards;
  transform: rotate(var(--tilt, 0deg));
}
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.frame.empty {
  display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, #FFFDF7 0 14px, #F3EEDD 14px 28px);
}
.frame.empty svg { width: 55%; opacity: .8; }

.lightbox {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(20, 32, 54, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center; align-content: center; gap: 22px;
}
.lightbox[hidden] { display: none; }
.lightbox-frame {
  max-width: min(86vw, 900px); max-height: 66vh;
  border: 14px solid #B07C4F; outline: 6px solid var(--ink);
  border-radius: 8px; background: var(--paper);
  box-shadow: 0 30px 60px rgba(0,0,0,.4);
  animation: cardpop .4s cubic-bezier(.34,1.56,.64,1);
}
.lightbox-frame img { display: block; max-width: 100%; max-height: calc(66vh - 40px); }
.lightbox-actions { display: flex; gap: 20px; justify-content: center; }
.hold-btn { overflow: visible; }
.hold-ring {
  position: absolute; inset: -6px; border-radius: 50%;
  background: conic-gradient(var(--coral-deep) calc(var(--held, 0) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  pointer-events: none;
}

/* ── parent sheet ─────────────────────────── */
.parent-sheet {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 32, 54, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center;
}
.parent-sheet[hidden] { display: none; }
.parent-card {
  width: min(88vw, 460px);
  max-height: 80vh; overflow-y: auto;
  background: var(--paper);
  border: 5px solid var(--ink); border-radius: 26px;
  box-shadow: var(--shadow-float);
  padding: 26px;
  font-size: 15px; line-height: 1.55;
  touch-action: pan-y;
}
.parent-card h2 { margin-bottom: 10px; font-size: 22px; }
.parent-card ul { margin: 12px 0 18px 18px; }
.parent-card li { margin-bottom: 8px; }
.parent-toggle {
  width: 100%; padding: 12px; margin-bottom: 14px;
  border-radius: 16px; border: 4px solid var(--ink);
  font-weight: 800; font-size: 15px;
  background: var(--lagoon-pale);
}
.parent-actions { display: flex; gap: 12px; justify-content: flex-end; }
.parent-actions button {
  padding: 12px 20px; border-radius: 16px;
  border: 4px solid var(--ink); font-weight: 800; font-size: 15px;
}
.parent-danger { background: #FFD7D2; }
.parent-ok { background: var(--leaf); color: var(--paper); }

/* ── shared fx ────────────────────────────── */
.wipe {
  position: fixed; z-index: 80;
  left: var(--wx, 50%); top: var(--wy, 50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #CFF6FC 0 55%, #7FE3F2 78%, #2FB9DB 100%);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}
.wipe.go { animation: wipego .55s ease-in forwards; }
@keyframes wipego { to { transform: translate(-50%, -50%) scale(300); } }

#confettiFx {
  position: fixed; inset: 0; z-index: 70;
  width: 100%; height: 100%;
  pointer-events: none;
}

.toast {
  position: fixed; left: 50%; bottom: calc(var(--sab) + 130px);
  transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  font-weight: 800; font-size: 17px;
  padding: 14px 26px; border-radius: 40px;
  border: 4px solid var(--paper);
  box-shadow: var(--shadow-float);
  z-index: 75; pointer-events: none;
  animation: toastpop 2s ease forwards;
}
@keyframes toastpop {
  0% { transform: translateX(-50%) translateY(30px) scale(.7); opacity: 0; }
  12%, 82% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
  100% { transform: translateX(-50%) translateY(-14px) scale(.9); opacity: 0; }
}

/* ── portrait phones: tighten chrome ──────── */
@media (max-width: 520px) and (orientation: portrait) {
  .canvas-stage { inset: calc(var(--sat) + 76px) calc(var(--sar) + 62px) calc(var(--sab) + 108px) calc(var(--sal) + 58px); }
  .size-slider { height: 170px; width: 46px; left: calc(var(--sal) + 6px); }
  .tool-shelf { padding: 0 6px; gap: 0; }
  .tool { width: 48px; height: 118px; margin-bottom: -48px; }
  .tool.on { transform: translateY(-30px); }
  .undo-dock { bottom: calc(var(--sab) + 108px); }
  .magic-btn { width: 58px; height: 58px; bottom: calc(var(--sab) + 108px); }
  .color-rail { right: calc(var(--sar) + 6px); gap: 6px; }
  .swatch { width: 32px; height: 32px; }
  .swatch.on::after { inset: -8px; border-width: 3px; }
  #scr-coloring .canvas-stage { right: calc(var(--sar) + 92px); }
  .bub-btn { width: 52px; height: 52px; }
  .done-btn { height: 52px; min-width: 68px; font-size: 26px; }
  .sticker { font-size: 64px; }
}

/* ── landscape phones: tighten chrome ─────── */
@media (max-height: 480px) {
  .canvas-stage { inset: calc(var(--sat) + 8px) calc(var(--sar) + 78px) calc(var(--sab) + 92px) calc(var(--sal) + 74px); }
  .size-slider { height: 180px; width: 52px; }
  .tool { height: 126px; margin-bottom: -52px; width: clamp(46px, 8vw, 62px); }
  .tool.on { transform: translateY(-34px); }
  .tool-shelf { height: calc(78px + var(--sab)); padding: 0 78px; }
  .color-rail { grid-template-columns: 1fr 1fr; gap: 8px; right: calc(var(--sar) + 8px); }
  #colorRail2 { grid-template-columns: repeat(3, auto); }
  #scr-coloring .canvas-stage { right: calc(var(--sar) + 168px); }
  .swatch { width: 40px; height: 40px; }
  .bub-btn { width: 52px; height: 52px; }
  .done-btn { height: 52px; min-width: 70px; font-size: 26px; }
  .magic-btn { width: 58px; height: 58px; }
  .map-wordmark { font-size: 18px; }
}