/* =========================================================================
   WonderCanvas Kids — style.css
   Playful, child-friendly art studio UI.
   ========================================================================= */

:root {
  /* Brand palette */
  --pink:      #FF79B8;
  --yellow:    #FFD166;
  --sky:       #70D6FF;
  --mint:      #8CECC7;
  --lavender:  #B8A1FF;
  --tangerine: #FF9F68;
  --purple:    #5B3FA3;
  --white:     #FFFDF8;
  --charcoal:  #39334D;

  /* Semantic tokens */
  --bg:         #FFFDF8;
  --bg-soft:    #FFF2FA;
  --panel:      #FFFFFF;
  --panel-2:    #FBF4FF;
  --ink:        #39334D;
  --ink-soft:   #6A6480;
  --line:       #EADFF2;
  --accent:     #FF79B8;
  --accent-2:   #70D6FF;
  --danger:     #FF7A8A;
  --danger-ink: #B23A48;
  --shadow:     0 8px 24px rgba(91, 63, 163, 0.14);
  --shadow-sm:  0 3px 10px rgba(91, 63, 163, 0.12);
  --radius:     22px;
  --radius-sm:  14px;
  --rainbow: linear-gradient(90deg,#FF79B8,#FF9F68,#FFD166,#8CECC7,#70D6FF,#B8A1FF);

  --header-h: 68px;
  --bottom-h: 68px;

  --font: "Baloo 2", "Comic Sans MS", "Trebuchet MS", "Segoe UI Rounded",
          system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Dark scheme respect (kept gentle & bright) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #211C33; --bg-soft:#2A2340; --panel:#2E2746; --panel-2:#352C52;
    --ink:#F6F0FF; --ink-soft:#C3B8DE; --line:#453A66;
    --shadow:0 8px 24px rgba(0,0,0,.4);
    --danger-ink:#FFC2C9;   /* legible red on dark danger buttons */
  }
}

/* High contrast mode */
body.high-contrast {
  --bg:#ffffff; --bg-soft:#ffffff; --panel:#ffffff; --panel-2:#f2f2f2;
  --ink:#000000; --ink-soft:#1a1a1a; --line:#000000; --accent:#c2007a; --accent-2:#005a8c;
  --shadow:0 0 0 2px #000; --shadow-sm:0 0 0 2px #000;
}
body.high-contrast .mini-btn,
body.high-contrast .bar-btn,
body.high-contrast .nav-btn { border:2px solid #000; }

* { box-sizing: border-box; }
html, body { height: 100%; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,121,184,.10), transparent 40%),
    radial-gradient(circle at 88% 12%, rgba(112,214,255,.12), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(184,161,255,.12), transparent 50%);
  overflow-x: hidden;
  overscroll-behavior: contain;      /* stop pull-to-refresh / bounce while drawing */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.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;
}

/* ===================== FLOATING DECORATIONS ===================== */
.floaties { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.floaty {
  position: absolute; font-size: 2rem; opacity: .35;
  animation: float 9s ease-in-out infinite;
}
.floaty--star   { top: 15%; left: 6%;  color: var(--yellow); }
.floaty--cloud  { top: 30%; right: 8%; color: var(--sky); font-size: 3rem; animation-duration: 12s; }
.floaty--heart  { bottom: 18%; left: 10%; color: var(--pink); animation-duration: 10s; }
.floaty--star2  { bottom: 28%; right: 12%; color: var(--lavender); animation-duration: 11s; }
.floaty--flower { top: 60%; left: 50%; color: var(--tangerine); animation-duration: 13s; }
@keyframes float { 0%,100%{ transform: translateY(0) rotate(0); } 50%{ transform: translateY(-22px) rotate(10deg); } }

/* ===================== HEADER ===================== */
.app-header {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px;
  background: var(--panel);
  border-bottom: 3px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.logo { display:flex; align-items:center; gap:10px; background:none; border:0; cursor:pointer; padding:4px 6px; border-radius:var(--radius-sm); }
.logo:hover .logo__mark { transform: rotate(-12deg) scale(1.1); }
.logo__mark { font-size: 2rem; transition: transform .25s; filter: drop-shadow(0 3px 0 rgba(0,0,0,.08)); }
.logo__text { display:flex; flex-direction:column; text-align:left; line-height:1; }
.logo__title { font-weight:800; font-size: 1.15rem; color: var(--purple); }
.logo__title b { color: var(--pink); }
.logo__tag { font-size:.68rem; color: var(--ink-soft); font-weight:600; }

.main-nav { display:flex; gap:6px; margin-left:8px; flex-wrap:wrap; }
.nav-btn {
  border:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:.92rem;
  padding:9px 13px; border-radius:999px; background:var(--panel-2); color:var(--ink);
  transition: transform .15s, background .2s; white-space:nowrap;
}
.nav-btn:hover { transform: translateY(-2px); background: var(--mint); }
.nav-btn.is-active { background: var(--rainbow); color:#fff; }

.header-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.progress-chip {
  display:flex; align-items:center; gap:4px; font-weight:800; color:var(--purple);
  background:var(--yellow); padding:6px 12px; border-radius:999px; font-size:.95rem;
  border:0; cursor:pointer; font-family:inherit; transition: transform .15s var(--spring);
}
.progress-chip:hover { transform: scale(1.06); }
.progress-chip:active { transform: scale(.94); }
.icon-btn {
  width:42px; height:42px; border:0; cursor:pointer; border-radius:50%;
  background:var(--panel-2); font-size:1.25rem; transition: transform .15s, background .2s;
}
.icon-btn:hover { transform: rotate(20deg) scale(1.05); background: var(--sky); }
.menu-toggle { display:none; }

/* ===================== SCREENS ===================== */
#screens { position: relative; z-index: 1; min-height: calc(100vh - var(--header-h)); }
.screen { display:none; animation: screenIn .4s ease; }
.screen.is-active { display:block; }
/* @keyframes screenIn is defined once in the premium layer below (last-wins) */

.section-head { font-size:1.9rem; color:var(--purple); margin:0 0 14px; text-align:center; }

/* ===================== HOME ===================== */
.home-hero { text-align:center; padding: 26px 16px 8px; }
.mascots-row { display:flex; justify-content:center; gap:30px; margin-bottom:6px; }
.mascots-row svg { width:120px; height:140px; }
.hero-title { font-size: clamp(1.8rem, 5vw, 3rem); margin:.2em 0; color:var(--purple);
  background: var(--rainbow); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-sub { font-size: clamp(1rem,2.5vw,1.4rem); color:var(--ink-soft); margin:0 0 10px; font-weight:600; }

.activity-grid {
  display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr));
  gap:20px; padding: 10px clamp(16px,4vw,48px) 60px; max-width:1200px; margin:0 auto;
}
.activity-card {
  position:relative; border:0; cursor:pointer; text-align:left; font-family:inherit;
  background: var(--panel); border-radius: var(--radius); padding:22px; box-shadow: var(--shadow);
  overflow:hidden; transition: transform .2s, box-shadow .2s; animation: cardIn .5s both;
}
.activity-card:hover, .activity-card:focus-visible { transform: translateY(-6px) scale(1.02); box-shadow: 0 16px 36px rgba(91,63,163,.22); }
.activity-card::before { content:""; position:absolute; inset:0 0 auto; height:8px; background: var(--rainbow); }
.activity-card__emoji { font-size:3rem; display:block; margin-bottom:8px; transition: transform .3s; }
.activity-card:hover .activity-card__emoji { transform: scale(1.18) rotate(-8deg); }
.activity-card__title { font-size:1.35rem; font-weight:800; color:var(--purple); margin:0 0 4px; }
.activity-card__desc { font-size:.95rem; color:var(--ink-soft); margin:0; font-weight:600; }
@keyframes cardIn { from{ opacity:0; transform: translateY(24px);} to{ opacity:1; transform:none;} }

/* ===================== STUDIO LAYOUT ===================== */
.studio {
  display:grid; grid-template-columns: 220px 1fr 280px;
  gap:12px; padding:12px; height: calc(100vh - var(--header-h) - var(--bottom-h));
}
.tool-palette, .color-panel {
  background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding:12px; overflow-y:auto;
}
/* Each labelled group sits in its own soft card so the panel reads as
   clear, separate sections instead of one long busy list. */
.panel-section { background: var(--panel-2); border-radius: var(--radius-sm);
  padding:10px 10px 12px; margin-bottom:10px; }
.panel-section:last-child { margin-bottom:0; }
.panel-title { font-weight:800; color:var(--purple); font-size:.95rem;
  letter-spacing:.01em; margin:0 0 8px; display:flex; align-items:center; gap:6px; }

.tool-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:8px; }
.tool-grid--shapes { grid-template-columns: repeat(4,1fr); }
.tool-btn {
  border:2px solid transparent; cursor:pointer; font-family:inherit; background:var(--panel);
  border-radius: 14px; padding:9px 4px 7px; display:flex; flex-direction:column; align-items:center; gap:3px;
  min-height:58px; justify-content:center;
  transition: transform .15s, background .2s, border-color .2s; font-size:.68rem; font-weight:700; color:var(--ink-soft);
}
.tool-btn span.ico { font-size:1.55rem; line-height:1; }
.tool-btn:hover { transform: translateY(-2px); background: var(--mint); color:var(--purple); }
.tool-btn.is-active { border-color: var(--pink); background: #fff; color:var(--purple);
  box-shadow: 0 0 0 3px rgba(255,121,184,.3); transform: translateY(-1px); }
.tool-grid--shapes .tool-btn { min-height:50px; }

/* Brush size / strength rows: a readable name + slider + value chip */
.brush-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.brush-row:last-of-type { margin-bottom:10px; }
.brush-row__label { font-weight:800; color:var(--ink-soft); font-size:.78rem; min-width:62px; }
.brush-row input[type=range] { flex:1; accent-color: var(--pink); height:26px; }
.brush-row output { font-weight:800; color:var(--purple); min-width:46px; text-align:right; font-size:.85rem; }
.slider-row { display:flex; align-items:center; gap:8px; }
.slider-row input[type=range] { flex:1; accent-color: var(--pink); height:26px; }
.slider-row output { font-weight:800; color:var(--purple); min-width:38px; text-align:right; font-size:.85rem; }

.brush-preview { width:100%; height:46px; background:
  repeating-conic-gradient(#f0f0f0 0 25%, #fff 0 50%) 0 0/16px 16px; border-radius:12px; border:2px solid var(--line); }

/* Canvas stage */
.canvas-stage { position:relative; display:flex; align-items:center; justify-content:center;
  background: var(--panel-2); border-radius: var(--radius); box-shadow: inset 0 0 0 3px var(--line); overflow:hidden; }
.canvas-wrap { position:relative; box-shadow: var(--shadow); border-radius:10px; overflow:hidden;
  transition: transform .15s; background:#fff; }
#bgCanvas, #mainCanvas { display:block; }
#bgCanvas { position:absolute; inset:0; z-index:0; }
#mainCanvas { position:relative; z-index:1; touch-action:none; cursor: crosshair; background:transparent; }
.canvas-wrap.grid-on::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(91,63,163,.12) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(91,63,163,.12) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Color panel */
.panel-tabs { display:flex; gap:4px; margin-bottom:10px; }
.panel-tab { flex:1; border:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:.78rem;
  padding:8px 4px; border-radius:10px; background:var(--panel-2); color:var(--ink-soft); }
.panel-tab.is-active { background: var(--sky); color:#fff; }
.tab-body { display:none; }
.tab-body.is-active { display:block; }

.current-color-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.current-swatch { width:48px; height:48px; border-radius:14px; border:3px solid #fff;
  box-shadow: var(--shadow-sm); flex-shrink:0; }
.current-color-name { font-weight:800; color:var(--purple); }
.current-color-hex { font-size:.8rem; color:var(--ink-soft); font-family:monospace; }

.color-family-tabs { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
.fam-chip { border:0; cursor:pointer; font-family:inherit; font-size:.72rem; font-weight:700;
  padding:5px 9px; border-radius:999px; background:var(--panel-2); color:var(--ink-soft); }
.fam-chip.is-active { background: var(--lavender); color:#fff; }

.swatch-grid { display:grid; grid-template-columns: repeat(6,1fr); gap:6px; }
.swatch-grid--fav, .swatch-grid--lab { grid-template-columns: repeat(8,1fr); }
.swatch {
  position:relative; aspect-ratio:1; border-radius:10px; border:3px solid #fff; cursor:pointer;
  box-shadow: var(--shadow-sm); transition: transform .12s;
}
.swatch:hover { transform: scale(1.14); z-index:2; }
.swatch.is-selected { border-color: var(--charcoal); transform: scale(1.1); }
.swatch.is-selected::after { content:"✓"; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; color:#fff; font-weight:900; text-shadow:0 1px 2px rgba(0,0,0,.5); font-size:.9rem; }
.swatch--empty { background: var(--panel-2); box-shadow:none; border:2px dashed var(--line); cursor:default; }

/* "More colours" tile — opens the device colour picker */
.swatch--more {
  background: conic-gradient(from 0deg, #FF4D4D, #FFD166, #1FB84D, #70D6FF, #9B30FF, #FF79B8, #FF4D4D);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.swatch--more .more-ico {
  font-weight:900; font-size:1.15rem; line-height:1; color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.45); pointer-events:none;
}
.swatch--more.is-picked .more-ico { opacity:0; }   /* reveal the chosen colour */

/* "No colour" tile — nothing gets coloured while it's chosen */
.swatch--none { background:#fff; display:flex; align-items:center; justify-content:center; }
.swatch--none .more-ico { font-size:1.1rem; line-height:1; pointer-events:none; }
.swatch--none.is-selected { border-color: var(--charcoal); transform: scale(1.1); }
.swatch--none.is-selected::after { content:none; }   /* keep the 🚫 showing, no ✓ over it */
.current-swatch.is-none {
  background: repeating-linear-gradient(45deg,#fff,#fff 7px,#f0eef6 7px,#f0eef6 14px) !important;
  display:flex; align-items:center; justify-content:center;
}
.current-swatch.is-none::after { content:"🚫"; font-size:1.3rem; }
.coloring-colors .current-swatch.is-none::after { content:"🚫 No colour"; font-size:.82rem; font-weight:800; color:var(--ink-soft); }
.swatch--more .more-color-input {
  position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0;
  border:none; opacity:0; cursor:pointer;
}

.mini-select { width:100%; font-family:inherit; font-weight:700; padding:8px; border-radius:10px;
  border:2px solid var(--line); background:var(--panel-2); color:var(--ink); margin-bottom:6px; }
.btn-row { display:flex; gap:6px; margin:6px 0; flex-wrap:wrap; }
.mini-btn { flex:1; border:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:.82rem;
  padding:9px 10px; border-radius:12px; background:var(--panel-2); color:var(--ink);
  transition: transform .15s, background .2s; white-space:nowrap; }
.mini-btn:hover { transform: translateY(-2px); background: var(--sky); }
.mini-btn--go { background: var(--rainbow); color:#fff; }
.mini-btn--warn { background: #ffe1e8; color: var(--danger-ink); }
.mini-btn--warn:hover { background: #ffc9d6; }
.mini-btn--save { background: var(--mint); color: var(--purple); }
.mini-btn.is-on { background: var(--purple); color:#fff; }
.mini-btn:disabled { opacity:.4; cursor:default; transform:none; }

/* Floating install chip (shown only when installable) */
.install-chip {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60; border: 0; cursor: pointer;
  padding: 11px 16px; border-radius: 999px; font-weight: 800; font-size: .95rem;
  color: #fff; background: var(--rainbow); background-size: 180% 100%;
  box-shadow: 0 8px 22px rgba(0,0,0,.22); animation: rainbowShift 6s linear infinite;
  white-space: nowrap;
}
.install-chip:hover { transform: translateY(-2px); }
body.reduced-motion .install-chip { animation: none; }

/* Picker */
.sv-area { position:relative; border-radius:12px; overflow:hidden; margin-bottom:10px; border:3px solid #fff; box-shadow:var(--shadow-sm); }
#svCanvas { display:block; width:100%; height:160px; cursor:crosshair; }
.sv-cursor { position:absolute; width:16px; height:16px; border:3px solid #fff; border-radius:50%;
  transform: translate(-50%,-50%); box-shadow:0 0 0 1px rgba(0,0,0,.4); pointer-events:none; }
.hue-slider, .alpha-slider { -webkit-appearance:none; appearance:none; height:22px; border-radius:999px;
  border:2px solid #fff; box-shadow: var(--shadow-sm); cursor:pointer; }
.hue-slider { background: linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
.alpha-slider {
  /* transparency control: a transparent→colour gradient over a checkerboard */
  background:
    linear-gradient(90deg, rgba(255,121,184,0), var(--accent)),
    repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0 / 14px 14px;
}
.hue-slider::-webkit-slider-thumb, .alpha-slider::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%;
  background:#fff; border:3px solid var(--purple); box-shadow:0 2px 6px rgba(0,0,0,.35); cursor:pointer; }
.hue-slider::-moz-range-thumb, .alpha-slider::-moz-range-thumb {
  width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--purple);
  box-shadow:0 2px 6px rgba(0,0,0,.35); cursor:pointer; }
.hue-slider::-moz-range-track, .alpha-slider::-moz-range-track { background:transparent; border:none; }
.picker-readout { margin:6px 0; font-weight:700; font-size:.85rem; }
.picker-readout input { font-family:monospace; font-weight:700; padding:6px; border-radius:8px;
  border:2px solid var(--line); background:var(--panel-2); color:var(--ink); }
#hexInput { width:100px; }
.rgb-readout { display:flex; gap:6px; }
.rgb-readout label { flex:1; display:flex; flex-direction:column; font-size:.72rem; }
.rgb-readout input { width:100%; }
.native-fallback { display:block; margin-top:8px; font-weight:700; font-size:.85rem; }
.native-fallback input { vertical-align:middle; }

/* Extras: backgrounds / patterns / stickers */
.bg-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:6px; }
.bg-swatch { aspect-ratio:1; border-radius:10px; border:3px solid #fff; cursor:pointer;
  box-shadow:var(--shadow-sm); transition: transform .12s; }
.bg-swatch:hover { transform: scale(1.1); }
.bg-swatch.is-selected { border-color: var(--charcoal); }
.sticker-grid { display:grid; grid-template-columns: repeat(5,1fr); gap:6px; }
.sticker-pick { font-size:1.5rem; aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  background:var(--panel-2); border:0; border-radius:10px; cursor:pointer; transition: transform .12s; }
.sticker-pick:hover { transform: scale(1.18); }

/* Placed stickers overlay */
.sticker-item { position:absolute; user-select:none; touch-action:none; z-index:5;
  display:flex; align-items:center; justify-content:center; }
.sticker-glyph { display:block; line-height:1; cursor:grab; touch-action:none;
  will-change:transform; transform-origin:center; }
.sticker-glyph:active { cursor:grabbing; }
.sticker-item.is-selected { outline:2px dashed var(--pink); outline-offset:4px; border-radius:8px; }
/* handles only show on the selected sticker (and don't rotate with the glyph) */
.sticker-handle { position:absolute; width:26px; height:26px; border-radius:50%; background:#fff;
  border:2px solid var(--pink); display:none; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:var(--purple); cursor:pointer; padding:0; z-index:6;
  box-shadow:var(--shadow-sm); }
.sticker-item.is-selected .sticker-handle { display:flex; }
.sticker-handle--resize { right:-13px; bottom:-13px; cursor:nwse-resize; }
.sticker-handle--rotate { right:-13px; top:-13px; cursor:grab; }
.sticker-handle--delete { left:-13px; top:-13px; background:var(--pink); color:#fff; }
.sticker-handle:hover { transform:scale(1.12); }

/* ===================== BOTTOM BAR ===================== */
.bottom-bar {
  height: var(--bottom-h); display:flex; gap:8px; align-items:center; justify-content:center;
  padding:0 12px; background:var(--panel); border-top:3px solid var(--line); overflow-x:auto;
}
.bar-group { display:flex; gap:6px; align-items:center; }
.bar-sep { flex:0 0 auto; width:2px; height:34px; border-radius:2px; background:var(--line); }
.bar-btn { border:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:.74rem;
  padding:8px 12px; border-radius:14px; background:var(--panel-2); color:var(--ink);
  display:flex; flex-direction:column; align-items:center; gap:1px; min-width:54px; min-height:48px;
  justify-content:center;
  transition: transform .15s, background .2s; }
.bar-btn:hover:not(:disabled) { transform: translateY(-2px); background: var(--mint); }
.bar-btn:disabled { opacity:.35; cursor:default; }
.bar-btn--save { background: var(--yellow); }
.bar-btn--danger { background: #FFE0E4;   /* fallback if color-mix unsupported */
  background: color-mix(in srgb, var(--danger) 26%, var(--panel-2)); color: var(--danger-ink); }
.bar-btn--danger:hover:not(:disabled) { background: var(--danger); color:#fff; }
.bar-btn.is-active { background: var(--sky); color:#fff; }

/* ===================== COLORING BOOK ===================== */
.coloring-layout { padding: 18px clamp(12px,3vw,40px); }
.chip-row { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:16px; }
.cat-chip { border:0; cursor:pointer; font-family:inherit; font-weight:700; padding:8px 16px;
  border-radius:999px; background:var(--panel); color:var(--ink-soft); box-shadow:var(--shadow-sm); }
.cat-chip.is-active { background: var(--rainbow); color:#fff; }
.template-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap:16px;
  max-width:1100px; margin:0 auto; }
.template-card { border:0; cursor:pointer; background:var(--panel); border-radius:var(--radius);
  padding:12px; box-shadow:var(--shadow-sm); transition: transform .2s; }
.template-card:hover { transform: translateY(-5px); box-shadow:var(--shadow); }
.template-card svg { width:100%; height:120px; display:block; }
.template-card__name { font-weight:800; color:var(--purple); margin-top:8px; }
.template-card__diff { font-size:.72rem; color:var(--ink-soft); font-weight:700; }

.coloring-toolbar { display:flex; align-items:center; gap:8px; padding:12px clamp(12px,3vw,40px); flex-wrap:wrap; }
.coloring-toolbar .spacer { flex:1; }
.coloring-title { font-weight:800; color:var(--purple); font-size:1.2rem; }
.coloring-main { display:flex; gap:16px; padding:0 clamp(12px,3vw,40px) 30px; flex-wrap:wrap; justify-content:center; }
.coloring-svg-wrap { flex:1; min-width:280px; max-width:640px; background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px; }
.coloring-svg-wrap svg { width:100%; height:auto; display:block; }
.coloring-svg-wrap [data-region] { cursor:pointer; transition: fill .15s; }
.coloring-svg-wrap [data-region]:hover { opacity:.85; }
.coloring-colors { width:220px; flex-shrink:0; }
.coloring-colors .current-swatch { width:100%; height:44px; margin-bottom:10px; }
/* real-image pictures: hide the SVG texture-style card, show Fill/Brush tools */
.coloring-colors.is-img #coloringStyleTitle,
.coloring-colors.is-img #coloringStyles { display:none; }
#imgTools { display:none; margin-top:12px; }
.coloring-colors.is-img #imgTools { display:block; }
.img-tool-row, .img-size-row { display:flex; gap:8px; margin:6px 0 2px; flex-wrap:wrap; }
.tool-chip { flex:1; min-width:84px; border:2px solid var(--mint); background:var(--panel); cursor:pointer;
  border-radius:14px; padding:10px 8px; font-weight:800; color:var(--purple); display:flex;
  align-items:center; justify-content:center; gap:6px; transition: transform .15s; }
.tool-chip:hover { transform: translateY(-2px); }
.tool-chip.is-active { background:var(--purple); color:#fff; border-color:var(--purple); }
.tool-chip__ico { font-size:1.2rem; }
/* Lesson tool rows: Brush/Fill/Eraser/Shapes/Stickers + a compact shapes sub-row */
.tool-chip-row { display:flex; gap:6px; margin:4px 0 8px; flex-wrap:wrap; }
.tool-chip-row .tool-chip { min-width:64px; padding:9px 7px; font-size:.8rem; }
#lessonShapeRow .tool-chip { min-width:0; flex:1 1 42px; padding:8px 6px; }
#lessonStickerRow { margin:4px 0 8px; }
.size-chip { width:42px; height:42px; border:2px solid var(--mint); background:var(--panel); cursor:pointer;
  border-radius:12px; font-weight:800; color:var(--purple); }
.size-chip.is-active { background:var(--mint); color:var(--purple); border-color:var(--purple); }

/* ---- Add-your-own picture bar + flood-fill canvas pictures ---- */
.coloring-addbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin:4px 0 14px; }
.add-pic-btn { border:0; cursor:pointer; background:var(--purple); color:#fff; font-weight:800;
  font-size:1rem; padding:11px 18px; border-radius:999px; box-shadow:var(--shadow-sm);
  transition: transform .18s; }
.add-pic-btn:hover { transform: translateY(-2px); }
.add-pic-btn:active { transform: scale(.97); }
.add-pic-tip { font-size:.84rem; color:var(--ink-soft); font-weight:700; max-width:360px; }

.template-card--add { display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:3px dashed var(--mint); background:var(--panel); min-height:168px; }
.add-card__plus { font-size:2.6rem; line-height:1; margin-bottom:6px; }
.template-card { position:relative; }
.template-card .pic-thumb { width:100%; height:120px; object-fit:contain; display:block; background:#fff; border-radius:12px; }
.template-card .pic-del { position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%;
  background:rgba(0,0,0,.5); color:#fff; font-weight:800; font-size:.8rem; display:flex;
  align-items:center; justify-content:center; cursor:pointer; }
.template-card .pic-del:hover { background:var(--coral,#FF4D4D); }
.grid-empty { grid-column:1/-1; text-align:center; color:var(--ink-soft); font-weight:700; padding:30px; }

.coloring-canvas { width:100%; height:auto; display:block; cursor:pointer; border-radius:12px;
  touch-action:none; -webkit-user-select:none; user-select:none; }

/* ===================== LESSONS ===================== */
.lessons-gallery { padding:18px clamp(12px,3vw,40px); }
.lesson-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:16px; max-width:1100px; margin:0 auto; }
.lesson-card { border:0; cursor:pointer; background:var(--panel); border-radius:var(--radius);
  padding:14px; box-shadow:var(--shadow-sm); transition: transform .2s; text-align:center; }
.lesson-card:hover { transform: translateY(-5px); box-shadow:var(--shadow); }
.lesson-card__emoji { font-size:2.6rem; }
.lesson-card__name { font-weight:800; color:var(--purple); margin-top:6px; }
.lesson-card__steps { font-size:.72rem; color:var(--ink-soft); font-weight:700; }

.lesson-head { display:flex; align-items:center; gap:12px; padding:12px clamp(12px,3vw,40px); }
.lesson-name { font-weight:800; color:var(--purple); font-size:1.3rem; }
.lesson-body { display:flex; gap:16px; padding:0 clamp(12px,3vw,40px) 30px; flex-wrap:wrap; justify-content:center; }
.lesson-canvas-wrap { position:relative; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; flex:1; min-width:300px; max-width:560px; }
.lesson-ghost { position:absolute; inset:0; z-index:0; background:#fff; pointer-events:none; }
.lesson-ghost svg { width:100%; height:100%; display:block; }
#lessonCanvas { position:relative; z-index:1; display:block; touch-action:none; cursor:crosshair; width:100%; background:transparent; }
.lesson-side { width:290px; flex-shrink:0; }
.lesson-preview-box, .lesson-step-box, .lesson-tools {
  background:var(--panel); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:14px; margin-bottom:12px; }
/* the Step card is the star — bold and prominent */
.lesson-step-box { background:linear-gradient(180deg,#fff, var(--panel-2)); border:2px solid var(--line); }
.step-indicator { display:inline-block; background:var(--yellow); color:var(--purple); font-weight:800;
  padding:5px 16px; border-radius:999px; margin-bottom:10px; font-size:1rem; }
.step-text { font-size:1.22rem; font-weight:700; color:var(--ink); margin:0 0 12px; line-height:1.35; min-height:2.4em; }
.lesson-step-box .btn-row { gap:10px; }
.lesson-step-box .mini-btn--go { flex:1; padding:12px 10px; font-size:1.02rem; }
.lesson-tools { margin-top:0; }
/* finished-picture peek — collapsed by default to save vertical space */
.lesson-preview-box { padding:10px 14px; }
.lesson-preview-box > summary { cursor:pointer; list-style:none; margin:0; user-select:none; }
.lesson-preview-box > summary::-webkit-details-marker { display:none; }
.lesson-preview-box > summary::after { content:" ▸"; color:var(--ink-soft); }
.lesson-preview-box[open] > summary::after { content:" ▾"; }
.lesson-preview { background:var(--panel-2); border-radius:12px; padding:8px; margin-top:8px; }
.lesson-preview svg { width:100%; height:120px; }

/* ===================== COLOR LAB ===================== */
.lab-wrap { padding:18px clamp(12px,4vw,40px) 60px; max-width:720px; margin:0 auto; text-align:center; }
.lab-sub { color:var(--ink-soft); font-weight:600; margin-top:-8px; }
.lab-stage { display:flex; flex-direction:column; align-items:center; gap:18px; margin:16px 0 8px; min-height:250px; justify-content:flex-end; }
.lab-scene { position:relative; width:270px; height:210px; display:flex; align-items:flex-end; justify-content:center; }

/* beaker + liquid */
.lab-beaker { position:relative; width:152px; height:152px; border-radius:16px 16px 44px 44px;
  background:rgba(255,255,255,.5); border:5px solid var(--lavender); border-top-width:3px;
  overflow:hidden; box-shadow:var(--shadow), inset 0 -10px 18px rgba(91,63,163,.08); }
.lab-beaker__shine { position:absolute; top:12px; left:16px; width:14px; height:58%; border-radius:999px;
  background:linear-gradient(#fff,transparent); opacity:.6; pointer-events:none; }
.lab-liquid { position:absolute; inset:auto 0 0; height:0%; background:#ddd;
  transition:height .6s cubic-bezier(.3,1.2,.5,1), background .6s; }
.lab-liquid .lab-wave { position:absolute; top:-7px; left:0; right:0; height:14px; background:inherit;
  border-radius:50%; filter:brightness(1.07); }
.lab-liquid.mixing { animation: labSwirl 1.3s ease; }
@keyframes labSwirl { 0%,100%{ transform:none;} 25%{ transform:skewX(-7deg) scaleX(1.05);} 75%{ transform:skewX(7deg) scaleX(1.05);} }

/* pouring bottle (held by a hand) */
.lab-bottle { position:absolute; top:-8px; left:30px; width:56px; height:94px; opacity:0;
  transform-origin:70% 90%; pointer-events:none; z-index:3; }
.lab-bottle__svg { width:100%; height:100%; display:block; overflow:visible; }
.lab-bottle__glass { fill:rgba(255,255,255,.4); stroke:var(--lavender); stroke-width:3; }
.lab-bottle__fill { fill:var(--pour,#ccc); stroke:none; }
.lab-bottle__cap { fill:var(--lavender); stroke:none; }
.lab-hand { position:absolute; right:-16px; bottom:2px; font-size:1.7rem; transform:rotate(18deg); }
.lab-bottle.pouring { animation: labPour 1.05s ease forwards; }
@keyframes labPour {
  0%{ opacity:0; transform:translateY(-12px) rotate(0); }
  18%{ opacity:1; transform:translateY(0) rotate(0); }
  38%,72%{ opacity:1; transform:translate(46px,-4px) rotate(112deg); }
  100%{ opacity:0; transform:translate(46px,-4px) rotate(112deg); }
}

/* pouring stream */
.lab-stream { position:absolute; top:44px; left:50%; width:7px; height:74px; transform:translateX(-50%) scaleY(0);
  background:var(--pour,#ccc);
  background:linear-gradient(var(--pour,#ccc), color-mix(in srgb, var(--pour,#ccc) 65%, #fff));
  border-radius:4px; opacity:0; transform-origin:top; z-index:2; }
.lab-stream.flowing { animation: labStream .72s ease .34s; }
@keyframes labStream { 0%{ opacity:0; transform:translateX(-50%) scaleY(0);} 32%{ opacity:.92; transform:translateX(-50%) scaleY(1);} 80%{ opacity:.92; transform:translateX(-50%) scaleY(1);} 100%{ opacity:0; transform:translateX(-50%) scaleY(1);} }

/* stir stick */
.lab-stir { position:absolute; top:-22px; left:50%; width:7px; height:128px; margin-left:-3px;
  background:linear-gradient(#d8b483,#a07c4e); border-radius:4px; transform-origin:top center;
  opacity:0; box-shadow:2px 0 3px rgba(0,0,0,.15); z-index:2; }
.lab-stir.stirring { opacity:1; animation: labStir .5s ease-in-out infinite; }
@keyframes labStir { 0%,100%{ transform:rotate(-17deg);} 50%{ transform:rotate(17deg);} }

/* rising bubbles + splash ripple */
.lab-bubbles { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.lab-bubble { position:absolute; bottom:10px; border-radius:50%; background:rgba(255,255,255,.7); animation: labBubble 1.6s ease-in forwards; }
@keyframes labBubble { 0%{ transform:translateY(0) scale(.4); opacity:0;} 20%{ opacity:.9;} 100%{ transform:translateY(-120px) scale(1); opacity:0;} }
.lab-splash { position:absolute; left:50%; bottom:12%; width:14px; height:14px; margin-left:-7px;
  border-radius:50%; border:3px solid var(--pour,#fff); opacity:0; }
.lab-splash.go { animation: labSplash .55s ease-out; }
@keyframes labSplash { 0%{ transform:scale(.3); opacity:.9;} 100%{ transform:scale(3.4); opacity:0;} }

body.reduced-motion .lab-bottle, body.reduced-motion .lab-stream,
body.reduced-motion .lab-stir, body.low-effects .lab-bottle, body.low-effects .lab-stream { animation:none !important; }
.lab-result { display:flex; align-items:center; gap:12px; }
.lab-result-swatch { width:60px; height:60px; border-radius:16px; border:4px solid #fff; box-shadow:var(--shadow-sm); background:#ddd; }
.lab-result-text { font-weight:700; color:var(--purple); font-size:1.05rem; max-width:340px; }
.lab-controls { background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:16px; }
.lab-selected { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; min-height:34px; margin:10px 0; }
.lab-chip { width:30px; height:30px; border-radius:50%; border:3px solid #fff; box-shadow:var(--shadow-sm); position:relative; cursor:pointer; }
.lab-chip::after { content:"✕"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.7rem; opacity:0; text-shadow:0 1px 2px #000; }
.lab-chip:hover::after { opacity:1; }

/* ===================== CHALLENGES ===================== */
.challenge-wrap { padding:30px clamp(12px,4vw,40px) 60px; max-width:620px; margin:0 auto; }
.challenge-card { background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:30px; text-align:center; position:relative; overflow:hidden; }
.challenge-card::before { content:""; position:absolute; inset:0 0 auto; height:8px; background:var(--rainbow); }
.challenge-icon { font-size:4rem; }
.challenge-prompt { font-size:1.6rem; color:var(--purple); margin:10px 0; }
.challenge-hint { color:var(--ink-soft); font-weight:600; font-size:1.05rem; }
.challenge-btns { margin-top:16px; }

/* ===================== GALLERY ===================== */
.gallery-wrap { padding:18px clamp(12px,3vw,40px) 60px; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; max-width:1100px; margin:0 auto; }
.gallery-item { background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
.gallery-item__thumb { width:100%; aspect-ratio:4/3; object-fit:cover; background:#fff; display:block; border-bottom:3px solid var(--line); }
.gallery-item__body { padding:10px; }
.gallery-item__title { font-weight:800; color:var(--purple); margin:0 0 2px; font-size:1rem; }
.gallery-item__date { font-size:.72rem; color:var(--ink-soft); }
.gallery-item__tag { display:inline-block; font-size:.66rem; font-weight:800; padding:2px 8px; border-radius:999px;
  background:var(--mint); color:var(--purple); margin-top:4px; }
.gallery-item__btns { display:flex; gap:4px; margin-top:8px; }
.gallery-empty { text-align:center; padding:60px 20px; color:var(--ink-soft); font-weight:600; font-size:1.2rem; }
.gallery-empty__art { font-size:4rem; margin-bottom:10px; }

/* ===================== DRAWERS & DIALOGS ===================== */
.drawer-scrim, .dialog-scrim { position:fixed; inset:0; background:rgba(57,51,77,.45); z-index:50; }
.dialog-scrim { display:flex; align-items:center; justify-content:center; padding:20px; z-index:60; }
.settings-drawer {
  position:fixed; top:0; right:0; z-index:55; width:min(340px,90vw); height:100%;
  background:var(--panel); box-shadow:-8px 0 30px rgba(0,0,0,.2); padding:18px; overflow-y:auto;
  animation: drawerIn .3s ease;
}
@keyframes drawerIn { from{ transform: translateX(100%);} to{ transform:none;} }
.drawer-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.drawer-head h2 { margin:0; color:var(--purple); }
.setting-row { display:flex; align-items:center; justify-content:space-between; padding:14px 0;
  border-bottom:2px solid var(--line); font-weight:700; cursor:pointer; }
.setting-row input { width:24px; height:24px; accent-color:var(--pink); }
.setting-note { font-size:.82rem; color:var(--ink-soft); background:var(--panel-2); padding:12px;
  border-radius:12px; margin-top:16px; font-weight:600; }

.dialog { background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px;
  max-width:380px; width:100%; text-align:center; animation: pop .35s cubic-bezier(.2,1.5,.5,1); }
@keyframes pop { from{ transform: scale(.7); opacity:0;} to{ transform:none; opacity:1;} }
.dialog__mascot svg { width:70px; height:80px; }
.dialog__title { color:var(--purple); margin:4px 0 8px; font-size:1.4rem; }
.dialog__text { color:var(--ink-soft); font-weight:600; margin:0 0 16px; }
.dialog__input { width:100%; font-family:inherit; font-weight:700; font-size:1rem; padding:10px;
  border-radius:12px; border:2px solid var(--line); margin-bottom:14px; text-align:center; }
.dialog__btns { display:flex; gap:10px; }

/* ===================== TOAST & CONFETTI & SPEECH ===================== */
.toast { position:fixed; bottom:84px; left:50%; transform:translateX(-50%); z-index:70;
  background:var(--purple); color:#fff; font-weight:800; padding:12px 22px; border-radius:999px;
  box-shadow:var(--shadow); animation: toastIn .4s ease; max-width:90vw; text-align:center; }
@keyframes toastIn { from{ transform: translate(-50%,20px); opacity:0;} to{ transform: translateX(-50%); opacity:1;} }

.confetti-layer { position:fixed; inset:0; pointer-events:none; z-index:65; overflow:hidden; }
.confetti-piece { position:absolute; width:12px; height:12px; top:-20px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); opacity:.9; } }

.speech-bubble { position:fixed; z-index:45; background:#fff; color:var(--ink); font-weight:700;
  padding:12px 16px; border-radius:18px; box-shadow:var(--shadow); max-width:240px; font-size:.95rem;
  border:3px solid var(--mint); animation: pop .35s ease; }
.speech-bubble::after { content:""; position:absolute; bottom:-14px; left:30px; border:8px solid transparent;
  border-top-color:var(--mint); }

/* Mascot helpers in corners */
.mascot-helper { position:absolute; bottom:8px; right:8px; width:90px; z-index:3; pointer-events:none; }
.mascot-helper svg { width:100%; height:auto; }
.mascot-helper--lesson { width:70px; }

/* Mascot animations — .m-idle / .m-eye / .m-dance are defined once in the
   premium layer below (mIdle / mDance / blink); only wave + blink keyframes live here */
.m-wave .m-arm { transform-origin: 60% 60%; animation: wave 1s ease-in-out 3; }
@keyframes wave { 0%,100%{ transform: rotate(0);} 50%{ transform: rotate(-24deg);} }
@keyframes blink { 0%,94%,100%{ transform: scaleY(1);} 97%{ transform: scaleY(.1);} }

/* =====================================================================
   RESPONSIVE — three device tiers, each with its own arrangement
     • Desktop (> 960px): Tools | Canvas | Colours  (3 columns, default)
     • Tablet  (601–960): big Canvas on top, Tools + Colours side-by-side
     • Phone   (≤ 600px): single column, Canvas first, compact strips
   ===================================================================== */

/* Tablet & phone share the collapsible top navigation */
@media (max-width: 960px) {
  .main-nav { display:none; position:absolute; top:var(--header-h); left:0; right:0; background:var(--panel);
    flex-direction:column; padding:12px; box-shadow:var(--shadow); z-index:39; }
  .main-nav.open { display:flex; }
  .menu-toggle { display:inline-block; }
  .logo__tag { display:none; }
  .bottom-bar { position: sticky; bottom:0; z-index:20; }   /* always reachable */
  .nav-btn { padding:12px 16px; font-size:1rem; }           /* bigger tap targets */
}

/* ---- TABLET: canvas across the top, Tools + Colours in two columns below ---- */
@media (min-width: 601px) and (max-width: 960px) {
  .studio { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(46vh,1fr) auto;
    gap:10px; padding:10px; height: calc(100vh - var(--header-h) - var(--bottom-h)); }
  .canvas-stage  { grid-column: 1 / -1; grid-row: 1; }
  .tool-palette  { grid-column: 1; grid-row: 2; max-height: 36vh; overflow-y:auto; }
  .color-panel   { grid-column: 2; grid-row: 2; max-height: 36vh; overflow-y:auto; }
  .tool-grid { grid-template-columns: repeat(4,1fr); }
}

/* ---- PHONE: everything stacked, canvas first, controls flow below ---- */
@media (max-width: 600px) {
  .studio { grid-template-columns: 1fr; grid-template-rows: auto auto auto;
    height:auto; gap:8px; padding:8px; }
  .canvas-stage { order:1; min-height:46vh; }
  .tool-palette { order:2; }
  .color-panel  { order:3; }
  .panel-section { padding:8px; margin-bottom:8px; }
  .tool-grid { grid-template-columns: repeat(5,1fr); }
  .tool-grid--shapes { grid-template-columns: repeat(8,1fr); }
  .swatch-grid { grid-template-columns: repeat(7,1fr); gap:5px; }
  .swatch { border-width:2px; }
  #brushPreview { display:none; }                           /* save vertical space */
  /* keep bottom-bar labels (the bar scrolls) so every action stays self-explanatory */
  .bar-btn span { font-size:.58rem; }
  .bar-btn { min-width:46px; min-height:46px; padding:6px 8px; font-size:1rem; }
  .bar-sep { height:30px; }
  .activity-grid { grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .mascots-row svg { width:80px; height:94px; }
  .trace-side, .lesson-side, .coloring-colors { width:100%; }
  .header-right .progress-chip { display:none; }
  .section-head { font-size:1.5rem; }
}

/* Safe areas for notched devices */
@supports(padding: max(0px)) {
  .app-header { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .bottom-bar { padding-bottom: env(safe-area-inset-bottom); height: calc(var(--bottom-h) + env(safe-area-inset-bottom)); }
}

/* ===================== MOTION & EFFECTS PREFERENCES ===================== */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body.reduced-motion * { animation: none !important; transition: none !important; }
body.reduced-motion .floaties { display:none; }
body.low-effects .floaties { display:none; }
body.low-effects .confetti-layer { display:none; }

/* Focus visibility */
:focus-visible { outline:3px solid var(--accent-2); outline-offset:2px; border-radius:6px; }

/* =========================================================================
   POLISH: fun animations, shortcuts, mobile, Trace & Practice
   ========================================================================= */

/* --- Animated rainbow wordmark & hero (theme flavor) --- */
.logo__title, .hero-title {
  background: var(--rainbow); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
}
.hero-title { -webkit-text-fill-color: transparent; animation: rainbowShift 8s linear infinite; }
.logo__title b { -webkit-text-fill-color: initial; }
@keyframes rainbowShift { to { background-position: 220% 0; } }

/* Home activity emojis gently float */
.activity-card__emoji { animation: cardFloat 4s ease-in-out infinite; }
.activity-card:nth-child(even) .activity-card__emoji { animation-delay: .8s; }
@keyframes cardFloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }

/* Pop feedback when a tool is picked (@keyframes toolPop defined once below, last-wins) */
.tool-btn.just-picked { animation: toolPop .32s cubic-bezier(.3,1.6,.5,1); }

/* Particle burst (color pick, fills, celebrations) */
.fx-dot { position: absolute; width: 11px; height: 11px; border-radius: 50%;
  transform: translate(-50%,-50%); animation: fxPop .62s ease-out forwards; will-change: transform, opacity; }
@keyframes fxPop {
  0%   { opacity: 1; transform: translate(-50%,-50%) scale(.3); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1); }
}

/* Paint-splash transition when opening a picture / lesson / letter */
.splash-fx { position: fixed; z-index: 66; pointer-events: none; width: 24px; height: 24px;
  border-radius: 50%; transform: translate(-50%,-50%) scale(0); animation: splashGrow .55s ease-out forwards; }
@keyframes splashGrow { 0%{ transform: translate(-50%,-50%) scale(0); opacity:.85; }
  100%{ transform: translate(-50%,-50%) scale(60); opacity:0; } }

/* Satisfying ripple ring on color swatch select */
.swatch.rippled::before { content:""; position:absolute; inset:-6px; border-radius:14px;
  border:3px solid currentColor; animation: ripple .5s ease-out forwards; }
@keyframes ripple { from{ transform: scale(.7); opacity:.8; } to{ transform: scale(1.5); opacity:0; } }

/* --- Keyboard shortcut list in settings --- */
.shortcut-list { list-style:none; margin:10px 0 0; padding:0; font-size:.82rem; }
.shortcut-list li { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed var(--line); font-weight:600; }
.shortcut-list kbd { background:var(--panel-2); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:6px; padding:1px 7px; font-family:monospace; font-weight:700; color:var(--purple); }

/* =========================== TRACE & PRACTICE =========================== */
.trace-gallery { padding:18px clamp(12px,3vw,40px); }
.trace-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:14px; max-width:1000px; margin:0 auto; }
.trace-card { border:0; cursor:pointer; background:var(--panel); border-radius:var(--radius);
  padding:10px; box-shadow:var(--shadow-sm); transition: transform .2s; }
.trace-card:hover { transform: translateY(-5px); box-shadow:var(--shadow); }
.trace-card svg { width:100%; height:86px; display:block; }
.trace-card__name { font-weight:800; color:var(--purple); margin-top:4px; font-size:.82rem; }

.trace-head { display:flex; align-items:center; gap:12px; padding:12px clamp(12px,3vw,40px); flex-wrap:wrap; }
.trace-name { font-weight:800; color:var(--purple); font-size:1.3rem; }
.trace-body { display:flex; gap:16px; padding:0 clamp(12px,3vw,40px) 30px; flex-wrap:wrap; justify-content:center; }
/* image flanked by big, kid-friendly Prev / Next arrows */
.trace-canvas-row { display:flex; align-items:center; justify-content:center; gap:clamp(6px,2vw,18px);
  flex:1; min-width:280px; max-width:600px; }
.trace-arrow { flex-shrink:0; width:clamp(48px,9vw,64px); height:clamp(48px,9vw,64px); border-radius:50%;
  border:0; cursor:pointer; font-family:inherit; background:var(--panel-2); color:var(--purple);
  font-size:clamp(26px,5.5vw,38px); font-weight:800; line-height:1; display:grid; place-items:center;
  box-shadow:var(--shadow-sm); touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:transform .15s, background .2s, color .2s; padding-bottom:4px; }
.trace-arrow:hover { transform:translateY(-2px); background:var(--sky); color:#fff; }
.trace-arrow:disabled { opacity:.4; cursor:default; transform:none; }
.trace-canvas-wrap { position:relative; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; flex:1; min-width:0; max-width:460px; aspect-ratio:1; }
.trace-ghost { position:absolute; inset:0; z-index:0; pointer-events:none; }
.trace-ghost svg { width:100%; height:100%; display:block; }
#traceCanvas { position:relative; z-index:1; display:block; width:100%; height:100%; touch-action:none; cursor:crosshair; background:transparent; }
/* trace mini-game: a hungry creature crawls each stroke & eats a fruit at the end of every line */
.trace-bug, .trace-fruit { position:absolute; z-index:2; pointer-events:none; font-size:34px;
  line-height:1; transform:translate(-50%,-50%); filter: drop-shadow(0 3px 4px rgba(0,0,0,.15)); }
.trace-bug { z-index:3; font-size:38px; transition: left .12s linear, top .12s linear; animation: bugIdle 1s ease-in-out infinite; }
@keyframes bugIdle { 0%,100%{ rotate:-6deg; } 50%{ rotate:6deg; } }
.trace-bug.crawling { animation: bugCrawl .3s ease-in-out infinite; }
@keyframes bugCrawl { 0%,100%{ transform:translate(-50%,-50%) scale(1,1);} 50%{ transform:translate(-50%,-55%) scale(1.1,.9);} }
.trace-bug.chomp { animation: bugChomp .5s ease; }
@keyframes bugChomp { 0%,100%{ transform:translate(-50%,-50%) scale(1);} 30%{ transform:translate(-50%,-50%) scale(1.4);} 60%{ transform:translate(-50%,-50%) scale(.9);} }
/* idle "come drag me!" mannerism */
.trace-bug.nudge { animation: bugNudge .7s ease 3; }
@keyframes bugNudge {
  0%,100% { transform:translate(-50%,-50%) scale(1) rotate(0); }
  25% { transform:translate(-50%,-82%) scale(1.22) rotate(-9deg); }
  55% { transform:translate(-50%,-50%) scale(1) rotate(9deg); }
  78% { transform:translate(-50%,-72%) scale(1.14) rotate(0); }
}
.trace-bug.nudge::after { content:""; position:absolute; inset:-9px; border-radius:50%;
  border:3px solid var(--pink); animation: nudgeRing .7s ease-out 3; }
@keyframes nudgeRing { from{ transform:scale(.55); opacity:.8; } to{ transform:scale(1.9); opacity:0; } }
body.reduced-motion .trace-bug, body.reduced-motion .trace-fruit { animation: none !important; }
/* each line's fruit: faded until it's the bug's current target */
.trace-fruit { opacity:.35; transition: opacity .3s; }
.trace-fruit.active { opacity:1; animation: foodBob 1.1s ease-in-out infinite; }
@keyframes foodBob { 0%,100%{ transform:translate(-50%,-50%) scale(1);} 50%{ transform:translate(-50%,-58%) scale(1.12);} }
.trace-fruit.eaten { animation: foodEaten .5s ease forwards; }
@keyframes foodEaten { 0%{ transform:translate(-50%,-50%) scale(1.1); opacity:1;} 40%{ transform:translate(-50%,-50%) scale(1.4) rotate(-10deg);} 100%{ transform:translate(-50%,-50%) scale(0) rotate(30deg); opacity:0;} }

.trace-side { width:230px; flex-shrink:0; }
.trace-side .box { background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:14px; }
.trace-hint { font-weight:700; color:var(--ink-soft); font-size:.95rem; margin:0 0 10px; }

/* =========================== MOBILE IMPROVEMENTS =========================== */
/* motion-off safety for new effects */
body.reduced-motion .fx-dot, body.reduced-motion .splash-fx,
body.low-effects .fx-dot, body.low-effects .splash-fx { display:none !important; }
body.reduced-motion .hero-title, body.reduced-motion .activity-card__emoji { animation: none !important; }

/* --- Celebration overlay --- */
.celebrate { position: fixed; inset: 0; z-index: 75; display: flex; align-items: center; justify-content: center;
  background: rgba(57,51,77,.35); padding: 20px; animation: fadeIn .25s ease; }
@keyframes fadeIn { from{ opacity:0; } to{ opacity:1; } }
.celebrate__card { background: var(--panel); border-radius: 30px; box-shadow: var(--shadow);
  padding: 20px 28px 24px; text-align: center; max-width: 460px; width: 100%;
  animation: pop .45s cubic-bezier(.2,1.6,.4,1); border: 4px solid var(--yellow); }
.celebrate__mascots { display: flex; justify-content: center; gap: 6px; margin-bottom: 6px; }
.celebrate__mascots svg { width: 96px; height: 116px; }
.celebrate__msg { font-size: 1.5rem; font-weight: 800; color: var(--purple); margin: 4px 0 16px; line-height: 1.2; }
body.reduced-motion .celebrate__card { animation: none; }

/* speech bubble gets a tiny character avatar */
.speech-bubble { display: flex; align-items: center; gap: 8px; }
.speech-bubble__face { width: 34px; height: 40px; flex-shrink: 0; }
.speech-bubble__face svg { width: 100%; height: 100%; }

.trace-done { margin-top: 8px; font-size: 1.05rem; padding: 12px; }

/* =========================================================================
   JUICY PREMIUM ANIMATION LAYER  (squash & stretch, springy, lively)
   ========================================================================= */
:root { --spring: cubic-bezier(.34,1.56,.64,1); --spring-soft: cubic-bezier(.2,1.2,.4,1); }

/* --- Lively mascots: bounce with squash & stretch + gentle sway --- */
.m-idle { animation: mIdle 2.6s var(--spring-soft) infinite; transform-origin: 50% 92%; }
@keyframes mIdle {
  0%,100% { transform: translateY(0)    scale(1,1); }
  22%     { transform: translateY(-15px) scale(.94,1.08); }   /* stretch up */
  42%     { transform: translateY(0)    scale(1.1,.9); }      /* squash land */
  58%     { transform: translateY(-5px) scale(.98,1.03); }    /* little rebound */
  74%     { transform: translateY(0)    scale(1.02,.98); }
}
.mascots-row svg:nth-child(2) { animation-delay: .25s; }
.mascots-row svg:nth-child(3) { animation-delay: .5s; }
.mascots-row svg:nth-child(4) { animation-delay: .75s; }
.mascots-row svg:nth-child(5) { animation-delay: 1s; }

.m-eye { animation: blink 3.6s infinite; transform-origin: center; transform-box: fill-box; }

.m-dance { animation: mDance .62s var(--spring) infinite; transform-origin: 50% 92%; }
@keyframes mDance {
  0%,100% { transform: translateY(0)    rotate(-7deg) scale(1,1); }
  25%     { transform: translateY(-26px) rotate(0deg) scale(.9,1.12); }
  50%     { transform: translateY(0)    rotate(7deg) scale(1.12,.88); }
  75%     { transform: translateY(-12px) rotate(0deg) scale(.98,1.04); }
}
.m-wiggle { animation: mDance .62s var(--spring) infinite; animation-delay: .18s; transform-origin: 50% 92%; }

/* mascots feel pokeable */
.mascots-row svg, .mascot-helper svg { cursor: pointer; }
.mascots-row svg:hover { animation: mHop .5s var(--spring); }
@keyframes mHop { 0%{transform:translateY(0) scale(1,1);} 40%{transform:translateY(-18px) scale(.9,1.12);}
  70%{transform:translateY(0) scale(1.1,.9);} 100%{transform:translateY(0) scale(1,1);} }

/* --- Juicy buttons & cards: springy hover + squash on press --- */
.activity-card { transition: transform .3s var(--spring), box-shadow .3s; }
.activity-card:hover, .activity-card:focus-visible { transform: translateY(-9px) scale(1.045) rotate(-.6deg); }
.activity-card:active { transform: translateY(-2px) scale(.97); transition-duration: .09s; }

.nav-btn, .mini-btn, .bar-btn, .cat-chip, .fam-chip, .template-card, .lesson-card, .trace-card {
  transition: transform .22s var(--spring), background .2s, box-shadow .22s; }
.nav-btn:active, .mini-btn:active, .bar-btn:active:not(:disabled), .cat-chip:active, .fam-chip:active, .trace-arrow:active:not(:disabled) { transform: scale(.9); transition-duration: .08s; }
.template-card:hover, .lesson-card:hover, .trace-card:hover { transform: translateY(-7px) scale(1.03) rotate(-.5deg); }
.template-card:active, .lesson-card:active, .trace-card:active { transform: scale(.97); transition-duration: .08s; }
.mini-btn--go { background-size: 180% 100%; animation: rainbowShift 6s linear infinite; }

.tool-btn { transition: transform .18s var(--spring), background .2s, border-color .2s, box-shadow .2s; }
.tool-btn:active { transform: scale(.88); transition-duration: .07s; }
.tool-btn.just-picked { animation: toolPop .42s var(--spring); }
@keyframes toolPop { 0%{ transform: scale(.8);} 45%{ transform: scale(1.22) rotate(-4deg);} 70%{ transform: scale(.95);} 100%{ transform: scale(1);} }

.swatch { transition: transform .18s var(--spring), box-shadow .15s; }
.swatch:hover { transform: scale(1.22) rotate(-5deg); z-index: 2; }
.swatch:active { transform: scale(.85); transition-duration: .07s; }

/* icon buttons spin a touch more playfully */
.icon-btn:active { transform: scale(.85) rotate(30deg); }

/* springy screen entrance */
@keyframes screenIn { 0%{ opacity:0; transform: translateY(20px) scale(.985);} 60%{ opacity:1; transform: translateY(-3px) scale(1.004);} 100%{ transform:none;} }
.screen.is-active { animation: screenIn .5s var(--spring-soft); }

/* --- Premium celebration: rotating sunburst + bouncy message --- */
.celebrate__card { position: relative; overflow: hidden; }
.celebrate__card::before {
  content: ""; position: absolute; inset: -60%; z-index: 0;
  background: repeating-conic-gradient(from 0deg,
    rgba(255,209,102,.22) 0 9deg, transparent 9deg 22deg,
    rgba(112,214,255,.16) 22deg 31deg, transparent 31deg 44deg);
  animation: spinRays 14s linear infinite;
}
@keyframes spinRays { to { transform: rotate(360deg); } }
.celebrate__card > * { position: relative; z-index: 1; }
.celebrate__msg { animation: msgPop .6s var(--spring) both; }
@keyframes msgPop { 0%{ transform: scale(.4) rotate(-6deg); opacity:0;} 60%{ transform: scale(1.12) rotate(2deg); opacity:1;} 100%{ transform: scale(1) rotate(0);} }
#celebrateClose { animation: pulseBtn 1.1s ease-in-out infinite; }
@keyframes pulseBtn { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.08);} }

/* bigger, bouncier confetti pieces */
.confetti-piece { box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.confetti-emoji { position: absolute; top: -24px; font-size: 22px; animation: fall linear forwards; pointer-events: none; }

/* motion-off: strip the juicy stuff too */
body.reduced-motion .m-idle, body.reduced-motion .m-dance, body.reduced-motion .m-wiggle,
body.reduced-motion .mini-btn--go, body.reduced-motion .celebrate__card::before,
body.reduced-motion #celebrateClose, body.reduced-motion .celebrate__msg { animation: none !important; }
body.reduced-motion .screen.is-active { animation: none !important; }

/* ===================== iOS "Add to Home Screen" guide ===================== */
.ios-a2hs {
  position: fixed; left:12px; right:12px; bottom:14px; z-index:90;
  max-width:520px; margin:0 auto;
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-radius:18px; background:var(--panel); color:var(--ink);
  border:2px solid var(--line); box-shadow:var(--shadow);
  font-weight:600; font-size:.92rem; line-height:1.3;
  transform: translateY(150%); opacity:0;
  transition: transform .4s var(--spring), opacity .3s;
}
.ios-a2hs.show { transform: translateY(0); opacity:1; }
.ios-a2hs__ico { font-size:1.7rem; flex-shrink:0; }
.ios-a2hs__txt { flex:1; }
.ios-a2hs__share { display:inline-block; }
.ios-a2hs__x {
  flex-shrink:0; border:0; cursor:pointer; width:32px; height:32px; border-radius:50%;
  background:var(--panel-2); color:var(--ink-soft); font-weight:800; font-size:1rem;
}
.ios-a2hs__x:hover { background:var(--line); }
@supports(padding: max(0px)) {
  .ios-a2hs { bottom: max(14px, env(safe-area-inset-bottom)); }
}

/* ===================== REWARDS ===================== */
.rewards-wrap { padding:18px clamp(12px,3vw,40px) 60px; max-width:1100px; margin:0 auto; }
.rewards-progress { text-align:center; font-weight:800; color:var(--purple); margin:0 0 18px; font-size:1.05rem; }
.rewards-note { text-align:center; color:var(--ink-soft); font-weight:600; margin:22px auto 0; max-width:560px; }
.rewards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:14px; }
.reward-card {
  display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  background:var(--panel); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm);
  padding:16px 8px; border:3px solid transparent; transition: transform .15s var(--spring);
}
.reward-card.is-unlocked { border-color:var(--mint); }
.reward-card.is-unlocked:hover { transform: translateY(-4px) scale(1.03); }
.reward-card.is-locked { opacity:.72; background:var(--panel-2); }
.reward-card__emoji { font-size:2.6rem; line-height:1; }
.reward-card.is-locked .reward-card__emoji { filter:grayscale(1); opacity:.6; }
.reward-card__name { font-weight:800; color:var(--purple); font-size:.9rem; }
.reward-card__badge {
  font-size:.66rem; font-weight:800; padding:2px 10px; border-radius:999px;
  background:var(--panel-2); color:var(--ink-soft);
}
.reward-card.is-unlocked .reward-card__badge { background:var(--mint); color:var(--purple); }

/* ===================== FIRST-RUN TOUR ===================== */
.tour-scrim {
  position:fixed; inset:0; z-index:95; display:flex; align-items:center; justify-content:center;
  background:rgba(57,51,77,.55); backdrop-filter:blur(3px); padding:20px;
  opacity:0; transition:opacity .3s;
}
.tour-scrim.show { opacity:1; }
.tour-card {
  background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow);
  max-width:360px; width:100%; padding:22px 22px 18px; text-align:center;
  transform:translateY(16px) scale(.96); transition:transform .35s var(--spring);
}
.tour-scrim.show .tour-card { transform:none; }
.tour-mascot { width:120px; height:140px; margin:0 auto 6px; }
.tour-mascot svg { width:100%; height:100%; }
.tour-text { font-size:1.15rem; font-weight:700; color:var(--ink); margin:6px 0 14px; line-height:1.35; min-height:3em; }
.tour-dots { display:flex; gap:7px; justify-content:center; margin-bottom:14px; }
.tour-dot { width:9px; height:9px; border-radius:50%; background:var(--line); transition:background .2s, transform .2s; }
.tour-dot.on { background:var(--pink); transform:scale(1.25); }
.tour-btns { display:flex; gap:10px; justify-content:center; }
.tour-btns .mini-btn { min-width:90px; }

/* ===================== COLORING "COMES ALIVE" ===================== */
.coloring-svg-wrap.alive { animation: aliveBounce .9s var(--spring); }
@keyframes aliveBounce {
  0%{ transform:scale(1); } 20%{ transform:scale(1.04) rotate(-1deg); }
  45%{ transform:scale(.98) rotate(1deg); } 70%{ transform:scale(1.02); } 100%{ transform:scale(1); }
}
.alive-emoji {
  position:fixed; z-index:80; pointer-events:none; will-change:transform,opacity;
  animation: aliveRise 2.2s ease-out forwards;
}
@keyframes aliveRise {
  0%{ transform:translateY(0) scale(.6) rotate(0); opacity:0; }
  15%{ opacity:1; }
  100%{ transform:translateY(-140px) scale(1.1) rotate(25deg); opacity:0; }
}
body.reduced-motion .tour-card, body.low-effects .tour-card { transition:none; }

/* ===================== GALLERY LIGHTBOX ===================== */
.gallery-item__thumb { cursor:zoom-in; }
.lightbox {
  position:fixed; inset:0; z-index:96; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; padding:24px;
  background:rgba(57,51,77,.8); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .25s;
}
.lightbox.show { opacity:1; }
.lightbox__img {
  max-width:min(92vw,900px); max-height:76vh; border-radius:16px;
  background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.5);
  transform:scale(.94); transition:transform .3s var(--spring);
}
.lightbox.show .lightbox__img { transform:scale(1); }
.lightbox__cap { color:#fff; font-weight:800; font-size:1.1rem; text-align:center; }
.lightbox__x {
  position:absolute; top:16px; right:18px; width:46px; height:46px; border-radius:50%;
  border:0; cursor:pointer; background:#fff; color:var(--purple); font-weight:900; font-size:1.3rem;
  box-shadow:var(--shadow);
}

/* ===================== AGE MODE ===================== */
.setting-row--col { flex-direction:column; align-items:stretch; gap:8px; }
.age-chips { display:flex; gap:8px; }
.age-chip {
  flex:1; border:2px solid var(--line); background:var(--panel-2); color:var(--ink-soft);
  font-family:inherit; font-weight:800; font-size:.9rem; padding:10px 6px; border-radius:12px; cursor:pointer;
  transition: transform .12s var(--spring), background .2s, border-color .2s, color .2s;
}
.age-chip:hover { transform:translateY(-2px); }
.age-chip.is-active { background:var(--lavender); color:#fff; border-color:var(--lavender); }
/* youngest: larger, friendlier controls */
body.age-young .tool-btn { font-size:.76rem; min-height:64px; }
body.age-young .tool-btn span.ico { font-size:1.75rem; }
body.age-young .nav-btn { font-size:1.08rem; }
body.age-young .bar-btn span { font-size:.8rem; }
body.age-young .activity-card__title { font-size:1.3rem; }
body.age-young .panel-title { font-size:1.05rem; }

/* ===================== GALLERY CONTROLS ===================== */
.gallery-controls {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  max-width:1100px; margin:0 auto 16px; justify-content:center;
}
.gallery-controls .chip-row { flex-wrap:wrap; justify-content:center; }
.gallery-controls #gallerySort { flex-shrink:0; }

/* ===================== IDEA SPINNER (Challenges) ===================== */
.challenge-wrap { text-align:center; }
.challenge-sub { color:var(--ink-soft); font-weight:700; margin:-6px 0 18px; font-size:1.05rem; }
.spinner { display:flex; gap:12px; justify-content:center; margin:0 auto 18px; max-width:560px; }
.reel {
  flex:1; min-width:0; background:linear-gradient(180deg,#fff,var(--panel-2));
  border:3px solid var(--line); border-radius:18px; box-shadow:var(--shadow-sm);
  padding:18px 8px; display:flex; flex-direction:column; align-items:center; gap:6px; overflow:hidden;
}
.reel__emoji { font-size:2.8rem; line-height:1; }
.reel__label { font-weight:800; color:var(--purple); font-size:.92rem; }
.reel.is-spinning { animation: reelSpin .12s linear infinite; border-color:var(--pink); }
.reel.is-spinning .reel__emoji { filter:blur(1px); }
.reel.landed { animation: reelLand .42s var(--spring); border-color:var(--mint); }
@keyframes reelSpin { 0%{ transform:translateY(-3px);} 50%{ transform:translateY(3px);} 100%{ transform:translateY(-3px);} }
@keyframes reelLand { 0%{ transform:scale(.82);} 55%{ transform:scale(1.12);} 100%{ transform:scale(1);} }
.challenge-note { color:var(--ink-soft); font-weight:700; font-size:.92rem; margin-top:14px; }
#challengeDraw:disabled { opacity:.45; cursor:default; }
body.reduced-motion .reel.is-spinning, body.low-effects .reel.is-spinning { animation:none; }
body.reduced-motion .reel.is-spinning .reel__emoji { filter:none; }
@media (max-width:480px){ .reel__emoji{ font-size:2.1rem; } .reel__label{ font-size:.78rem; } .reel{ padding:12px 4px; } }

/* ===================== SCENE BUILDER PICKER ===================== */
.scene-scrim {
  position:fixed; inset:0; z-index:95; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(57,51,77,.55); backdrop-filter:blur(3px); opacity:0; transition:opacity .25s;
}
.scene-scrim.show { opacity:1; }
.scene-card {
  position:relative; background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow);
  max-width:540px; width:100%; padding:24px; text-align:center;
  transform:translateY(16px) scale(.96); transition:transform .3s var(--spring);
}
.scene-scrim.show .scene-card { transform:none; }
.scene-title { color:var(--purple); margin:0 0 4px; font-size:1.6rem; }
.scene-sub { color:var(--ink-soft); font-weight:600; margin:0 0 18px; }
.scene-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.scene-opt {
  border:3px solid #fff; border-radius:16px; cursor:pointer; padding:0; overflow:hidden;
  box-shadow:var(--shadow-sm); background:var(--scene-bg,#fff); aspect-ratio:4/3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  transition:transform .15s var(--spring), box-shadow .2s;
}
.scene-opt:hover { transform:translateY(-4px) scale(1.04); box-shadow:var(--shadow); }
.scene-opt__emoji { font-size:2.4rem; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.scene-opt__name { font-weight:800; color:#2c2444; background:rgba(255,255,255,.75); padding:1px 10px; border-radius:999px; font-size:.82rem; }
.scene-x {
  position:absolute; top:12px; right:14px; width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  background:var(--panel-2); color:var(--ink-soft); font-weight:800; font-size:1.1rem;
}
@media (max-width:420px){ .scene-grid{ grid-template-columns:repeat(2,1fr); } }

/* ===================== MY ART WALL (gallery reframe) ===================== */
.screen--gallery { background:
  linear-gradient(180deg, rgba(184,161,255,.10), transparent 220px); }
.gallery-grid { padding-top:6px; }
.gallery-item {
  border:6px solid #fff; box-shadow:0 10px 22px rgba(91,63,163,.18), inset 0 0 0 2px var(--line);
  position:relative; background:var(--panel);
}
.gallery-item::before {   /* a little "hanging" dot, like a framed picture on a wall */
  content:""; position:absolute; top:-11px; left:50%; width:10px; height:10px; border-radius:50%;
  background:var(--lavender); box-shadow:0 0 0 3px #fff; transform:translateX(-50%); z-index:2;
}
.gallery-item__thumb { border-bottom:3px solid var(--line); }

/* ===================== COLOURING STYLE CHIPS + FILL POP ===================== */
.style-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.style-chip {
  flex:1; min-width:52px; border:2px solid var(--line); background:var(--panel-2); color:var(--ink-soft);
  border-radius:12px; cursor:pointer; font-family:inherit; font-weight:800; font-size:.66rem;
  padding:7px 4px; display:flex; flex-direction:column; align-items:center; gap:2px;
  transition:transform .12s var(--spring), background .2s, border-color .2s, color .2s;
}
.style-chip:hover { transform:translateY(-2px); }
.style-chip.is-active { background:#fff; border-color:var(--pink); color:var(--purple);
  box-shadow:0 0 0 3px rgba(255,121,184,.25); }
.style-chip__ico { font-size:1.15rem; line-height:1; }
[data-region].just-filled { animation: regionPop .45s var(--spring); transform-box:fill-box; transform-origin:center; }
@keyframes regionPop { 0%{ transform:scale(.72);} 55%{ transform:scale(1.08);} 100%{ transform:scale(1);} }
body.reduced-motion [data-region].just-filled, body.low-effects [data-region].just-filled { animation:none; }

/* ===================== STUDIO GOAL / REFERENCE CARD ===================== */
.studio-goal {
  position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:6;
  display:flex; align-items:center; gap:8px; max-width:92%;
  background:var(--panel); border:2px solid var(--pink); border-radius:999px;
  box-shadow:var(--shadow-sm); padding:7px 12px; font-size:.92rem; font-weight:600; color:var(--ink);
}
.studio-goal__emoji { font-size:1.25rem; flex-shrink:0; }
.studio-goal__text { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.studio-goal__text b { color:var(--purple); }
.studio-goal__x { border:0; background:var(--panel-2); color:var(--ink-soft); width:24px; height:24px;
  border-radius:50%; cursor:pointer; font-weight:800; flex-shrink:0; line-height:1; }
.studio-goal__x:hover { background:var(--line); }
@media (max-width:600px){ .studio-goal{ top:6px; font-size:.8rem; padding:5px 10px; max-width:94%; } }

/* ===================== CHALLENGE GUIDE: ghost outline + colour hints ===================== */
.studio-ghost { position:absolute; inset:0; z-index:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center; }
.studio-ghost svg { width:94%; height:94%; opacity:.55; }
.studio-goal__colors { display:flex; align-items:center; gap:4px; }
.studio-goal__try { font-size:.8rem; color:var(--ink-soft); font-weight:700; margin-left:2px; }
.studio-goal__dot { width:22px; height:22px; border-radius:50%; border:2px solid #fff;
  box-shadow:var(--shadow-sm); cursor:pointer; padding:0; flex-shrink:0; }
.studio-goal__dot:hover { transform:scale(1.12); }
@media (max-width:600px){ .studio-goal__dot{ width:18px; height:18px; } }

/* ===================== DAILY CHALLENGE + STREAK ===================== */
.daily-idea { background:linear-gradient(135deg,#FFF1C2,#FFE2CF); border:2px solid var(--yellow);
  border-radius:var(--radius); padding:14px 18px; margin:6px auto 14px; max-width:520px; box-shadow:var(--shadow-sm); text-align:left; }
.daily-idea:empty { display:none; }
.daily-idea__head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.daily-idea__label { font-weight:800; color:var(--purple); }
.daily-idea__streak { font-weight:800; color:var(--danger-ink); background:#fff; padding:2px 10px; border-radius:999px; font-size:.85rem; }
.daily-idea__text { font-size:1.12rem; color:var(--ink); margin:8px 0 12px; }
.daily-idea .mini-btn { width:100%; }

/* ===================== STUDIO GOAL: step "Next part" button ===================== */
.studio-goal { flex-wrap:wrap; justify-content:center; }
.studio-goal__next { border:0; background:var(--mint); color:var(--purple); font-weight:800;
  font-size:.82rem; padding:5px 12px; border-radius:999px; cursor:pointer; flex-shrink:0; white-space:nowrap; }
.studio-goal__next:hover { filter:brightness(1.04); transform:translateY(-1px); }
.studio-goal__text { white-space:normal; }
@media (max-width:600px){ .studio-goal{ gap:6px; } .studio-goal__next{ font-size:.74rem; padding:4px 10px; } }

/* ===================== COLORING TARGET (coloured reference in corner) ===================== */
.coloring-svg-wrap { position:relative; }
.coloring-target {
  position:absolute; top:10px; right:10px; width:86px; z-index:4;
  background:#fff; border:3px solid var(--mint); border-radius:14px; box-shadow:var(--shadow-sm);
  padding:4px; text-align:center;
}
.coloring-target svg, .coloring-target__img { width:100%; height:auto; display:block; border-radius:8px; }
.coloring-target__label { display:block; font-size:.6rem; font-weight:800; color:var(--purple); margin-bottom:2px; }
@media (max-width:600px){ .coloring-target{ width:64px; top:6px; right:6px; } .coloring-target__label{ font-size:.54rem; } }

/* Tappable target → big colour reference */
.coloring-target { cursor:zoom-in; transition: transform .15s; }
/* only on real hover devices — avoids the iOS "tap once to hover, tap again to click" trap */
@media (hover: hover) { .coloring-target:hover { transform: scale(1.05); } }
.coloring-target:active { transform: scale(.96); }
.coloring-target:focus-visible { outline:3px solid var(--purple); outline-offset:2px; }
.target-zoom {
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(40,20,60,.6); backdrop-filter:blur(3px);
  padding:16px; padding-top:max(16px, env(safe-area-inset-top));
}
.target-zoom[hidden]{ display:none; }
.target-zoom__card {
  position:relative; background:#fff; border-radius:20px; box-shadow:var(--shadow);
  padding:18px 16px 16px; max-width:min(92vw, 520px); max-height:90vh; overflow:auto; text-align:center;
  animation: popIn .22s ease;
}
@keyframes popIn { from { transform: scale(.9); opacity:0; } to { transform: scale(1); opacity:1; } }
.target-zoom__label { font-weight:800; color:var(--purple); margin-bottom:10px; font-size:1.05rem; }
.target-zoom__art svg, .target-zoom__art .target-zoom__img {
  width:100%; height:auto; max-height:72vh; object-fit:contain; border-radius:12px; display:block; margin:0 auto;
}
.target-zoom__close {
  position:absolute; top:8px; right:8px; width:40px; height:40px; border:0; border-radius:50%;
  background:var(--panel-2); color:var(--ink); font-size:1.05rem; font-weight:800; cursor:pointer; line-height:1;
}
.target-zoom__close:hover { background:var(--danger); color:#fff; }

/* 📸 Big camera trigger button */
.cam-btn { background: linear-gradient(135deg, var(--pink), var(--purple)) !important; color:#fff !important; }
.cam-btn:hover { filter:brightness(1.06); }
.cam-ico { font-size:1.5rem; line-height:1; vertical-align:middle; display:inline-block; }
.cam-btn:active .cam-ico { transform: scale(.88); }
.coloring-toolbar .cam-btn { min-width:54px; padding-left:12px; padding-right:12px; }

/* full-screen camera flash + the picture "snap" shrink */
.cam-flash { position:fixed; inset:0; z-index:300; background:#fff; opacity:0; pointer-events:none; }
.cam-flash.go { animation: camFlash .45s ease; }
@keyframes camFlash { 0%{ opacity:.95; } 100%{ opacity:0; } }
.snap-go { animation: snapShot .4s ease; }
@keyframes snapShot { 0%{ transform:scale(1); } 34%{ transform:scale(.93); } 100%{ transform:scale(1); } }

/* 📸 Camera capture overlay */
.photo-shot {
  position:fixed; inset:0; z-index:220; display:flex; align-items:center; justify-content:center;
  background:rgba(30,15,45,.78); backdrop-filter:blur(5px);
  padding:16px; padding-top:max(16px, env(safe-area-inset-top));
}
.photo-shot[hidden]{ display:none; }
.photo-flash { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }
.photo-flash.flash-go { animation: photoFlash .5s ease; }
@keyframes photoFlash { 0%{ opacity:.92; } 100%{ opacity:0; } }
.photo-shot__card {
  position:relative; background:#fff; border-radius:20px; box-shadow:var(--shadow);
  padding:16px; max-width:min(92vw, 460px); max-height:92vh; overflow:auto; text-align:center;
  animation: popIn .25s ease;
}
.photo-shot__label { font-weight:800; color:var(--purple); font-size:1.1rem; margin-bottom:10px; }
.photo-shot__img {
  width:100%; height:auto; max-height:60vh; object-fit:contain;
  border-radius:12px; border:3px solid var(--line); display:block; margin:0 auto;
}
.photo-shot__hint { font-size:.84rem; color:var(--ink-soft); margin:10px 4px 12px; line-height:1.45; }
.photo-shot__btns { display:flex; gap:8px; }
.photo-shot__btns .mini-btn { flex:1; padding:12px 10px; font-size:.95rem; }

/* Coloring sticker palette + placed stickers */
.coloring-sticker-title { margin-top:12px; }
.coloring-sticker-grid { grid-template-columns: repeat(4, 1fr); }
/* the big palettes scroll within a tidy area instead of stretching the panel */
#coloringStickerRow, #lessonStickerRow, #traceStickerRow {
  max-height: 176px; overflow-y: auto; padding-right: 2px;
}
.coloring-sticker {
  position:absolute; transform:translate(-50%,-50%); z-index:5; line-height:1;
  cursor:grab; user-select:none; -webkit-user-select:none; touch-action:none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.28));
}
.coloring-sticker:active { cursor:grabbing; }

/* ===================== PHONE: BOTTOM BAR WRAP =====================
   On phones the action bar used to scroll sideways, hiding "Save" off the
   right edge. Let it wrap instead so every action stays visible and reachable.
   Placed last so it wins over the earlier scroll styling and the @supports
   height rule. */
@media (max-width: 600px) {
  .bottom-bar {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    height: auto;
    row-gap: 6px;
    padding: 7px 8px;
    padding-bottom: max(7px, env(safe-area-inset-bottom));
  }
  .bar-sep { display: none; }           /* dividers don't make sense once wrapped */
  .studio { padding-bottom: 116px; }    /* clear the taller sticky bar so nothing hides behind it */
}

/* ---------- Landscape phones: wide but SHORT ----------
   At ~700–900px wide the 601–960px tablet rules apply, which stack the canvas
   over the tool/colour panels — fine on a tall tablet, but on a short landscape
   phone (~390px tall) that squeezes the canvas to a sliver. Restore the desktop
   three-column row (tools | canvas | colours) with narrow side rails so the
   canvas gets the full height between the header and the action bar. Placed last
   so it overrides the earlier breakpoints. */
@media (orientation: landscape) and (max-height: 560px) {
  .studio {
    grid-template-columns: 150px 1fr 172px;
    grid-template-rows: 1fr;
    gap: 8px;
    padding: 8px;
    padding-bottom: 8px;   /* no wrapped bottom-bar clearance needed in this layout */
  }
  .canvas-stage { grid-column: 2; grid-row: 1; min-height: 0; }
  .tool-palette { grid-column: 1; grid-row: 1; max-height: none; }
  .color-panel  { grid-column: 3; grid-row: 1; max-height: none; }
  /* narrow rails: fewer columns so tool tiles and swatches aren't clipped */
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .tool-grid--shapes { grid-template-columns: repeat(3, 1fr); }

  /* ----- Colour (coloring) view -----
     The picture + colour palette stack vertically by default, so on a short
     landscape viewport the canvas spills below the fold. Constrain the stage to
     the viewport height and scale the picture to fit, palette beside it. */
  .coloring-layout { padding: 8px clamp(10px, 2vw, 20px); }
  .coloring-stage { display: flex; flex-direction: column;
    height: calc(100dvh - var(--header-h) - 16px); min-height: 0; }
  .coloring-toolbar { flex: 0 0 auto; padding: 6px 0; }
  .coloring-main { flex: 1 1 auto; min-height: 0; flex-wrap: nowrap;
    align-items: stretch; padding: 0; gap: 10px; }
  .coloring-svg-wrap { min-width: 0; max-width: none; height: 100%;
    display: flex; align-items: center; justify-content: center; }
  .coloring-svg-wrap svg, .coloring-canvas { width: auto; height: 100%;
    max-width: 100%; max-height: 100%; margin: 0 auto; }
  .coloring-colors { width: 196px; flex-shrink: 0; height: 100%; overflow-y: auto; }

  /* ----- Trace view ----- same idea: fit the letter to the height, panel beside it */
  .trace-stage { display: flex; flex-direction: column;
    height: calc(100dvh - var(--header-h) - 12px); min-height: 0; }
  .trace-head { flex: 0 0 auto; padding: 6px clamp(10px, 2vw, 20px); }
  .trace-body { flex: 1 1 auto; min-height: 0; flex-wrap: nowrap;
    align-items: stretch; padding: 0 clamp(10px, 2vw, 20px) 8px; gap: 10px; }
  .trace-canvas-row { max-width: none; min-width: 0; height: 100%; flex: 1 1 auto; }
  .trace-canvas-wrap { max-width: none; height: 100%; max-height: 100%;
    width: auto; flex: 0 1 auto; }
  .trace-side { width: 208px; flex-shrink: 0; max-height: 100%;
    overflow-y: auto; align-self: stretch; }

  /* ----- Magic Colour Lab ----- bowl and controls stack vertically by default;
     put them side by side so both fit without scrolling. */
  .lab-wrap { display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr; column-gap: 16px; row-gap: 2px;
    height: calc(100dvh - var(--header-h) - 12px);
    padding: 6px clamp(10px, 2vw, 20px) 8px; align-content: start; }
  .lab-wrap .section-head { grid-column: 1 / -1; grid-row: 1; margin: 0; font-size: 1.15rem; }
  .lab-sub { grid-column: 1 / -1; grid-row: 2; margin: 0 0 2px; font-size: .76rem; }
  .lab-stage { grid-column: 1; grid-row: 3; min-height: 0; max-height: 100%;
    align-self: stretch; margin: 0; }
  .lab-controls { grid-column: 2; grid-row: 3; min-height: 0; max-height: 100%;
    overflow-y: auto; align-self: stretch; margin: 0; }
}

/* ---------- Landscape phones: the hamburger menu must fit a SHORT viewport ----------
   The collapsible nav drops down as a vertical list anchored under the header. On a
   ~390px-tall landscape screen a 7-item column runs off the bottom, so "Color Lab"
   and "Gallery" become unreachable. Lay the items out in a grid that fits, and let
   it scroll as a last resort. */
@media (orientation: landscape) and (max-height: 560px) {
  .main-nav.open {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    max-height: calc(100dvh - var(--header-h) - 8px);
    overflow-y: auto;
  }
  .main-nav.open .nav-btn { padding: 10px 8px; }
}