/* ============================================================
   WonderBrush — Magic Art Studio
   Agent D · style.css
   Candy toy-box design language (Toca Boca / Duolingo vibes)
   ============================================================ */

:root {
  /* Palette */
  --coral:     #FF6B6B;
  --sunshine:  #FFD93D;
  --mint:      #6BCB77;
  --sky:       #4D96FF;
  --grape:     #9B5DE5;
  --bubblegum: #F15BB5;
  --cream:     #FFF6E9;
  --ink:       #3A2E39;

  --ink-soft:  #5b4a58;
  --shadow:    rgba(58, 46, 57, 0.22);

  --chrome-bg: #FFF6E9;
  --chip-bg:   #FFFFFF;

  --font: 'Fredoka', 'Baloo 2', ui-rounded, 'Comic Sans MS', sans-serif;
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --rail-gap: 10px;
  --radius: 18px;
  --touch: 56px;
}

/* ---------- Reset / base ---------- */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  font-family: var(--font);
  color: var(--ink);
  background: linear-gradient(160deg, #FFF6E9 0%, #FDEBD3 55%, #F6E4FB 100%);
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
}

img { -webkit-user-drag: none; user-drag: none; }

/* ---------- App shell ---------- */
#app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

/* ============================================================
   TOP BAR
   ============================================================ */
#topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: var(--chrome-bg);
  box-shadow: 0 4px 0 rgba(58, 46, 57, 0.06), 0 8px 20px rgba(58, 46, 57, 0.10);
  z-index: 20;
  min-height: 74px;
}

/* Logo — per-letter bobbing spans built in JS */
#logo {
  display: flex;
  align-items: center;
  gap: 1px;
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 30px);
  white-space: nowrap;
  flex: 0 0 auto;
  letter-spacing: 0.5px;
  padding-right: 4px;
}
#logo .logo-letter {
  display: inline-block;
  animation: logoBob 2.2s ease-in-out infinite;
  will-change: transform;
}
#logo .logo-letter.logo-space { width: 0.35em; }
#logo .logo-img {
  height: clamp(34px, 5vw, 52px);
  width: auto;
  display: block;
  animation: logoBob 2.6s ease-in-out infinite;
  will-change: transform;
  -webkit-user-drag: none;
  pointer-events: none;
}
@keyframes logoBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(-2deg); }
}

/* Background scene picker chips */
#bg-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#bg-picker::-webkit-scrollbar { display: none; }

.chip-row { min-width: 0; }

.bg-chip {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border: none;
  border-radius: 14px;
  background: var(--chip-bg);
  box-shadow: 0 4px 0 rgba(58, 46, 57, 0.18);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s var(--bounce), box-shadow .18s var(--bounce), outline-color .15s;
  outline: 0 solid transparent;
  touch-action: manipulation;
  font-family: var(--font);
}
.bg-chip { overflow: hidden; padding: 0; }
.bg-chip .bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
  -webkit-user-drag: none;
}
.bg-chip:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(58,46,57,0.18); }
.bg-chip.selected {
  transform: scale(1.12);
  outline: 4px solid var(--ink);
  box-shadow: 0 5px 0 rgba(58, 46, 57, 0.25);
  z-index: 2;
}

/* Action buttons */
#actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.action-btn {
  width: var(--touch);
  height: var(--touch);
  min-width: var(--touch);
  border: none;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 5px 0 rgba(58, 46, 57, 0.20);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .16s var(--bounce), box-shadow .16s var(--bounce), background .2s;
  touch-action: manipulation;
  font-family: var(--font);
  color: var(--ink);
}
.action-btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 rgba(58, 46, 57, 0.20);
}
.action-btn img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Clear confirm state */
#btn-clear.confirm {
  background: #FFE0E0;
  animation: wiggle 0.4s var(--bounce) infinite;
}

/* Undo spin on press */
.action-btn.spin { animation: spinOnce 0.5s var(--bounce); }
@keyframes spinOnce {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* TA-DA button — animated rainbow gradient border */
#btn-tada {
  position: relative;
  height: var(--touch);
  min-height: var(--touch);
  padding: 0 22px;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  background: var(--sunshine);
  box-shadow: 0 6px 0 #d9a800, 0 8px 18px rgba(217, 168, 0, 0.35);
  white-space: nowrap;
  touch-action: manipulation;
  transition: transform .16s var(--bounce), box-shadow .16s var(--bounce);
  z-index: 0;
  flex: 0 0 auto;
}
#btn-tada::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 22px;
  z-index: -1;
  background: linear-gradient(90deg,
    var(--coral), var(--sunshine), var(--mint),
    var(--sky), var(--grape), var(--bubblegum), var(--coral));
  background-size: 300% 100%;
  animation: rainbowShift 3s linear infinite;
}
#btn-tada:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 #d9a800;
}
#btn-tada {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
#btn-tada .tada-star {
  width: 26px;
  height: 26px;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
  animation: spinSlow 5s linear infinite;
}
@keyframes rainbowShift {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}

/* ============================================================
   WORKSPACE (rails + stage)
   ============================================================ */
#workspace {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px;
  min-height: 0;
  overflow: hidden;
}

nav#left-rail, aside#right-rail {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--rail-gap);
  padding: 12px 10px;
  background: var(--chrome-bg);
  border-radius: var(--radius);
  box-shadow: 0 6px 0 rgba(58, 46, 57, 0.06), 0 10px 24px rgba(58, 46, 57, 0.10);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
}
nav#left-rail::-webkit-scrollbar,
aside#right-rail::-webkit-scrollbar { display: none; }

/* Fade cue: content visibly fades at the scrollable edge so kids know there's more */
aside#right-rail {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 34px), transparent 100%);
}

#left-rail  { width: 132px; overflow: hidden; padding-top: 10px; }
#right-rail { width: 140px; gap: 6px; }

/* ---------- Category tabs (left rail) ---------- */
#tab-bar {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.cat-tab {
  width: 100%;
  min-height: 56px;
  border: none;
  border-radius: 15px;
  background: #FFFFFF;
  box-shadow: 0 5px 0 rgba(58, 46, 57, 0.16);
  cursor: pointer;
  font-family: var(--font);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink-soft);
  transition: transform .16s var(--bounce), box-shadow .16s var(--bounce), background .2s, color .2s;
  touch-action: manipulation;
}
.cat-tab:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(58, 46, 57, 0.16); }
.cat-tab.selected {
  background: var(--sunshine);
  color: var(--ink);
  box-shadow: 0 6px 0 #d9a800;
  transform: scale(1.03);
}

#tab-panels {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  width: 100%;
  margin-top: 10px;
}
.tab-panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 30px), transparent 100%);
}
.tab-panel[hidden] { display: none; }
.tab-panel::-webkit-scrollbar { display: none; }

/* Scenes panel: chips wrap into a tidy grid rather than a scroll strip */
#panel-scenes #bg-picker {
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  overflow: visible;
  width: 100%;
  padding: 2px 0 8px;
}
#panel-scenes .bg-chip { width: 50px; height: 50px; min-width: 50px; }

/* ---------- Right-rail group labels ---------- */
.rail-label {
  flex: 0 0 auto;
  align-self: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}
.rail-label--magic { color: var(--grape); }

.tool-group {
  display: flex;
  flex-direction: column;
  gap: var(--rail-gap);
  align-items: center;
}

.rail-divider {
  flex: 0 0 auto;
  height: 4px;
  width: 60%;
  align-self: center;
  border-radius: 4px;
  background: rgba(58, 46, 57, 0.14);
  margin: 4px 0;
}

/* ---------- Brush / stamp tiles ---------- */
.tool-btn {
  width: 92px;
  min-height: 60px;
  border: none;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 5px 0 rgba(58, 46, 57, 0.16);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  font-family: var(--font);
  color: var(--ink-soft);
  transition: transform .18s var(--bounce), box-shadow .18s var(--bounce), outline-color .15s;
  outline: 0 solid transparent;
  touch-action: manipulation;
}
.tool-btn .tb-emoji { font-size: 28px; line-height: 1; }
.tool-btn .tb-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}
.tool-btn .tb-name  {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(58, 46, 57, 0.16); }
.tool-btn.selected {
  transform: scale(1.12);
  outline: 4px solid var(--ink);
  box-shadow: 0 6px 0 rgba(58, 46, 57, 0.24);
  color: var(--ink);
  z-index: 2;
  animation: wiggle 0.5s var(--bounce);
}

/* ---------- Color palette ---------- */
#color-palette-wrap {
  width: 100%;
  position: relative;
  transition: opacity .2s ease;
}
/* Contextual dim: when the active brush/tool ignores color, fade the whole
   palette and block taps, and reveal the "uses its own colors" hint. */
#color-palette-wrap.palette-off #color-palette {
  opacity: 0.32;
  pointer-events: none;
  filter: grayscale(0.35);
}
.palette-hint {
  display: none;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 6px;
  line-height: 1.2;
}
#color-palette-wrap.palette-off .palette-hint { display: block; }

#color-palette {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
  transition: opacity .2s ease, filter .2s ease;
}
.color-swatch {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border: 3px solid rgba(58, 46, 57, 0.15);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 4px 0 rgba(58, 46, 57, 0.18);
  transition: transform .18s var(--bounce), box-shadow .18s var(--bounce), border-color .15s;
  touch-action: manipulation;
}
.color-swatch:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(58,46,57,0.18); }
.color-swatch.selected {
  transform: scale(1.18);
  border-color: var(--ink);
  box-shadow: 0 5px 0 rgba(58, 46, 57, 0.28);
  z-index: 2;
  animation: wiggle 0.5s var(--bounce);
}

/* Custom-color picker: rainbow ring, filled with the chosen color in the
   center. Wraps a native <input type="color"> that opens the OS color wheel. */
.color-swatch--custom {
  --picked: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at center,
      var(--picked) 0 46%,
      #FFFFFF 47% 52%,
      transparent 53%),
    conic-gradient(from 0deg,
      #FF6B6B, #FF9F45, #FFD93D, #6BCB77,
      #4D96FF, #9B5DE5, #F15BB5, #FF6B6B);
}
.color-swatch--custom::after {
  content: "＋";
  position: absolute;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  pointer-events: none;
  opacity: .55;
}
.color-swatch--custom[data-color]::after { content: ""; } /* hide + once a color is picked */
.color-swatch--custom .color-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ---------- Size picker (S/M/L dots) ---------- */
#size-picker { flex-direction: row; gap: 8px; justify-content: center; width: 100%; }
.size-dot {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border: none;
  border-radius: 50%;
  background: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 0 rgba(58, 46, 57, 0.16);
  transition: transform .18s var(--bounce), box-shadow .18s var(--bounce), outline-color .15s;
  outline: 0 solid transparent;
  touch-action: manipulation;
  overflow: hidden;
}
.size-dot .dot-core {
  border-radius: 50%;
  background: var(--ink);
  width: 14px;
  height: 14px;
}
/* Stamp-mode: hide the thickness core, show a mini of the current stamp. */
.size-dot .dot-stamp {
  display: none;
  width: 24px;
  height: 24px;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}
#size-picker.stamp-mode .dot-core { display: none; }
#size-picker.stamp-mode .dot-stamp { display: block; }
.size-dot:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(58,46,57,0.16); }
.size-dot.selected {
  transform: scale(1.12);
  outline: 4px solid var(--ink);
  box-shadow: 0 6px 0 rgba(58, 46, 57, 0.24);
  z-index: 2;
}

/* ---------- Symmetry picker (magic mirror) ---------- */
#symmetry-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(155,93,229,0.12), rgba(241,91,181,0.12));
  width: 100%;
}
.sym-chip {
  width: 100%;
  height: 52px;
  min-width: 0;
  border: none;
  border-radius: 15px;
  background: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  box-shadow: 0 5px 0 rgba(58, 46, 57, 0.16);
  transition: transform .18s var(--bounce), box-shadow .18s var(--bounce), outline-color .15s;
  outline: 0 solid transparent;
  touch-action: manipulation;
}
.sym-chip .sym-emoji { font-size: 22px; line-height: 1; }
.sym-chip .sym-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}
.sym-chip:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(58,46,57,0.16); }
.sym-chip.selected {
  outline: 4px solid var(--grape);
  box-shadow: 0 6px 0 rgba(155, 93, 229, 0.35);
  transform: scale(1.08);
  z-index: 2;
}
.sym-chip.selected .sym-emoji,
.sym-chip.selected .sym-img {
  animation: spinSlow 4s linear infinite;
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ============================================================
   STAGE (canvas card)
   ============================================================ */
#stage-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#stage {
  position: relative;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  border: 6px solid var(--ink);
  border-radius: 26px;
  box-shadow: 10px 12px 0 rgba(58, 46, 57, 0.18), 0 18px 40px rgba(58, 46, 57, 0.15);
  overflow: hidden;
  touch-action: none;
}

#stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}
#bg-canvas    { z-index: 1; pointer-events: none; }
#paint-canvas { z-index: 2; pointer-events: none; }
/* fx-canvas is the topmost layer and receives all drawing input (engine binds
   its pointer listeners here). It MUST stay interactive. */
#fx-canvas    { z-index: 3; pointer-events: auto; }

/* ============================================================
   SAVE MODAL
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(58, 46, 57, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: modalFade 0.25s ease;
}
.modal.hidden { display: none; }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  background: var(--cream);
  border: 6px solid var(--ink);
  border-radius: 26px;
  padding: 20px;
  max-width: min(92vw, 620px);
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 8px 10px 0 rgba(58, 46, 57, 0.25);
  animation: modalPop 0.35s var(--bounce);
  overflow: auto;
  scrollbar-width: none;
}
.modal-card::-webkit-scrollbar { display: none; }
@keyframes modalPop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.modal-title {
  font-weight: 700;
  font-size: 24px;
  color: var(--ink);
  text-align: center;
}
#save-image {
  max-width: 100%;
  max-height: 56dvh;
  border-radius: 16px;
  border: 4px solid var(--ink);
  background: #fff;
  object-fit: contain;
}
.modal-buttons {
  display: flex;
  align-items: center;
  gap: 14px;
}
#btn-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--touch);
  padding: 0 22px;
  border-radius: 16px;
  background: var(--mint);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 5px 0 #4a9c56;
  transition: transform .16s var(--bounce), box-shadow .16s var(--bounce);
  touch-action: manipulation;
}
#btn-download:active { transform: translateY(4px); box-shadow: 0 1px 0 #4a9c56; }
#btn-download img { width: 24px; height: 24px; object-fit: contain; -webkit-user-drag: none; pointer-events: none; }
#btn-close-modal img { width: 26px; height: 26px; object-fit: contain; -webkit-user-drag: none; pointer-events: none; }
#btn-close-modal {
  width: var(--touch);
  height: var(--touch);
  min-width: var(--touch);
  border: none;
  border-radius: 16px;
  background: #FFFFFF;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(58, 46, 57, 0.2);
  transition: transform .16s var(--bounce), box-shadow .16s var(--bounce);
  touch-action: manipulation;
  font-family: var(--font);
}
#btn-close-modal:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(58,46,57,0.2); }
.modal-hint {
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
  font-weight: 500;
}

/* ============================================================
   CELEBRATE LAYER (confetti + banner)
   ============================================================ */
#celebrate-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  overflow: hidden;
}

.confetti {
  position: absolute;
  top: -30px;
  width: 14px;
  height: 22px;
  border-radius: 3px;
  will-change: transform, opacity;
  animation-name: confettiFall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
@keyframes confettiFall {
  0%   { transform: translateY(-30px) rotate(0deg); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(105dvh) rotate(720deg); opacity: 0.9; }
}

.celebrate-banner {
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(34px, 8vw, 74px);
  color: var(--ink);
  background: var(--cream);
  border: 6px solid var(--ink);
  border-radius: 28px;
  padding: 18px 40px;
  box-shadow: 8px 10px 0 rgba(58, 46, 57, 0.25);
  white-space: nowrap;
  animation: bannerPop 2.2s var(--bounce) forwards;
}
@keyframes bannerPop {
  0%   { transform: translate(-50%, -50%) scale(0) rotate(-8deg); opacity: 0; }
  18%  { transform: translate(-50%, -50%) scale(1.15) rotate(3deg); opacity: 1; }
  30%  { transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
  80%  { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.4) rotate(6deg); opacity: 0; }
}

/* ============================================================
   CREATIVE SPARKS  (spark bar inside #stage-wrap)
   Wrapper ignores pointer events so kids draw beneath it; only the
   buttons opt back in. Never blocks the canvas.
   ============================================================ */
.spark-bar {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(88%, 620px);
  padding: 8px 10px 8px 12px;
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 6px 0 rgba(58,46,57,0.18), 0 10px 24px rgba(58,46,57,0.14);
  pointer-events: none; /* draw-through: only buttons re-enable taps */
  transition: opacity .2s ease, transform .25s var(--bounce);
}
.spark-bar.is-hidden { display: none; }

.spark-bar .spark-star {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex: 0 0 auto;
  pointer-events: none;
  -webkit-user-drag: none;
  animation: spinSlow 6s linear infinite;
}
.spark-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.spark-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--grape);
}
.spark-text {
  font-size: clamp(14px, 1.7vw, 17px);
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.spark-acts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.spark-btn {
  pointer-events: auto; /* interactive island inside a draw-through card */
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 700;
  color: var(--ink);
  background: #FFFFFF;
  box-shadow: 0 4px 0 rgba(58,46,57,0.18);
  transition: transform .16s var(--bounce), box-shadow .16s var(--bounce), background .2s;
  touch-action: manipulation;
}
.spark-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(58,46,57,0.18); }
.spark-new {
  height: 38px;
  padding: 0 14px;
  border-radius: 13px;
  font-size: 14px;
  background: var(--sunshine);
  box-shadow: 0 4px 0 #d9a800;
}
.spark-new:active { box-shadow: 0 1px 0 #d9a800; }
.spark-hide {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-soft);
}

/* Re-open pill (shown when the spark bar is hidden) */
.spark-reopen {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  display: none;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px 0 10px;
  border: 3px solid var(--ink);
  border-radius: 20px;
  background: var(--cream);
  cursor: pointer;
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  box-shadow: 0 5px 0 rgba(58,46,57,0.18);
  transition: transform .16s var(--bounce), box-shadow .16s var(--bounce);
  touch-action: manipulation;
}
.spark-reopen.is-visible { display: inline-flex; }
.spark-reopen:active { transform: translateX(-50%) translateY(3px); box-shadow: 0 1px 0 rgba(58,46,57,0.18); }
.spark-reopen .spark-reopen-star {
  width: 24px;
  height: 24px;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* "Added to your sticker book!" gentle note */
.keep-note {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translate(-50%, 10px) scale(0.94);
  z-index: 55;
  padding: 10px 20px;
  background: var(--mint);
  color: var(--ink);
  font-weight: 700;
  font-size: clamp(14px, 1.7vw, 18px);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 5px 0 rgba(58,46,57,0.2), 0 10px 22px rgba(107,203,119,0.35);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s ease, transform .28s var(--bounce);
}
.keep-note.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ============================================================
   GALLERY toolbar glyph + sticker-book modal
   ============================================================ */
#btn-gallery .gallery-glyph { width: 28px; height: 28px; pointer-events: none; }
#btn-gallery .gallery-glyph rect { fill: none; stroke: var(--ink); stroke-width: 2; }

.gallery-card {
  width: min(92vw, 720px);
  max-width: min(92vw, 720px);
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
  width: 100%;
  padding: 4px 2px;
}
.gallery-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.gallery-frame {
  position: relative;
  width: 100%;
  border: 4px solid var(--ink);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 5px 0 rgba(58,46,57,0.18);
}
.gallery-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  -webkit-user-drag: none;
}
.gallery-del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(58,46,57,0.28);
  transition: transform .16s var(--bounce), box-shadow .16s var(--bounce);
  touch-action: manipulation;
}
.gallery-del:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(58,46,57,0.28); }
.gallery-cap {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
}
.gallery-dl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--mint);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 0 #4a9c56;
  transition: transform .16s var(--bounce), box-shadow .16s var(--bounce);
  touch-action: manipulation;
}
.gallery-dl:active { transform: translateY(3px); box-shadow: 0 1px 0 #4a9c56; }
.gallery-empty {
  padding: 30px 20px;
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.4;
}
.gallery-close {
  width: var(--touch);
  height: var(--touch);
  min-width: var(--touch);
  border: none;
  border-radius: 16px;
  background: #FFFFFF;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(58,46,57,0.2);
  transition: transform .16s var(--bounce), box-shadow .16s var(--bounce);
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gallery-close:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(58,46,57,0.2); }
.gallery-close img { width: 26px; height: 26px; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }

/* ============================================================
   Shared keyframes
   ============================================================ */
@keyframes wiggle {
  0%, 100% { rotate: 0deg; }
  25%      { rotate: -6deg; }
  75%      { rotate: 6deg; }
}

/* ============================================================
   NEW-PICTURE button (labelled, no emoji)
   ============================================================ */
.action-btn--label {
  width: auto;
  min-width: var(--touch);
  padding: 0 16px;
  font-weight: 700;
  font-size: 18px;
}
.action-btn--label.pressed { animation: pressPop 0.32s var(--bounce); }
@keyframes pressPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.86) translateY(3px); }
  100% { transform: scale(1); }
}

/* Undo disabled (nothing to undo) */
#btn-undo.disabled {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(0.5);
}

/* ============================================================
   Hint bubbles (Clear "tap again")
   ============================================================ */
#clear-wrap, #undo-wrap { position: relative; display: inline-flex; }
.hint-bubble {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 6px) scale(0.9);
  background: var(--coral);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 12px;
  box-shadow: 0 4px 0 rgba(58,46,57,0.22);
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease, transform .18s var(--bounce);
  z-index: 40;
}
.hint-bubble::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom-color: var(--coral);
}
.hint-bubble.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* ============================================================
   Symmetry first-time coach (near canvas)
   ============================================================ */
.coach {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translate(-50%, -6px) scale(0.9);
  background: var(--grape);
  color: #fff;
  font-weight: 700;
  font-size: clamp(15px, 1.8vw, 20px);
  padding: 12px 22px;
  border-radius: 18px;
  box-shadow: 0 6px 0 rgba(58,46,57,0.22), 0 10px 24px rgba(155,93,229,0.35);
  white-space: nowrap;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transition: opacity .25s ease, transform .25s var(--bounce);
}
.coach.hidden { display: none; }
.coach.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  animation: coachBob 1.4s var(--bounce) infinite;
}
@keyframes coachBob {
  0%, 100% { transform: translate(-50%, 0) scale(1); }
  50%      { transform: translate(-50%, -5px) scale(1.02); }
}

/* ============================================================
   REDUCED MOTION — disable looping/decorative animation, keep feedback
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  #logo .logo-img,
  #logo .logo-letter { animation: none !important; }
  #btn-tada::before { animation: none !important; }
  #btn-tada .tada-star { animation: none !important; }
  .sym-chip.selected .sym-emoji,
  .sym-chip.selected .sym-img { animation: none !important; }
  .coach.show { animation: none !important; }
  .spark-bar .spark-star { animation: none !important; }
  /* Confetti: no falling motion — a brief static celebration instead. */
  .confetti { animation: none !important; opacity: 1; }
  .celebrate-banner { animation: bannerStatic 1.6s ease forwards !important; }
  @keyframes bannerStatic {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 0; }
    12%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
  }
}

/* ============================================================
   RESPONSIVE — <900px landscape or portrait → rail strips
   ============================================================ */
@media (max-width: 900px), (orientation: portrait) {
  #topbar {
    gap: 8px;
    padding: 8px 10px;
    min-height: 64px;
    flex-wrap: nowrap;
  }
  #logo { font-size: clamp(16px, 4.5vw, 24px); }

  .action-btn, #btn-close-modal { width: 50px; height: 50px; min-width: 50px; font-size: 22px; }
  #btn-tada { height: 50px; min-height: 50px; padding: 0 14px; font-size: 16px; }
  .bg-chip { width: 48px; height: 48px; min-width: 48px; font-size: 22px; }

  #workspace {
    flex-direction: column;
    gap: 8px;
    padding: 8px;
  }

  /* Right rail becomes a horizontal scroll strip above the canvas */
  aside#right-rail {
    width: 100%;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 34px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 34px), transparent 100%);
  }

  /* Left rail keeps a column: a row of tabs on top, the active grid as a
     horizontal scroll strip below — so no group hides off-screen. */
  nav#left-rail {
    width: 100%;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px;
    overflow: hidden;
  }
  #tab-bar { flex-direction: row; gap: 8px; }
  .cat-tab { min-height: 48px; font-size: 15px; flex: 1 1 0; }
  #tab-panels { margin-top: 6px; height: 92px; }
  .tab-panel {
    position: static;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 30px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 30px), transparent 100%);
  }
  #panel-scenes #bg-picker { flex-wrap: nowrap; }

  nav#left-rail  { order: 3; }   /* brushes/stamps below canvas */
  #stage-wrap    { order: 2; }
  aside#right-rail { order: 1; } /* colors/size/symmetry above canvas */

  .tool-group {
    flex-direction: row;
    gap: 8px;
    flex: 0 0 auto;
    height: 100%;
  }
  #color-palette-wrap { flex: 0 0 auto; width: auto; display: flex; align-items: center; }
  #color-palette { flex-wrap: nowrap; width: auto; }
  .palette-hint { display: none !important; }
  .rail-label { font-size: 11px; margin: 0 2px; white-space: nowrap; }

  .rail-divider {
    height: 60%;
    width: 4px;
    margin: 0 4px;
    align-self: center;
    flex: 0 0 auto;
  }

  .tool-btn { width: 74px; min-height: 56px; }
  .tool-btn .tb-emoji { font-size: 24px; }
  .tool-btn .tb-name { font-size: 10px; }

  .color-swatch { width: 44px; height: 44px; min-width: 44px; }
  .size-dot { width: 48px; height: 48px; min-width: 48px; }
  .sym-chip { width: 64px; height: 48px; min-width: 64px; }

  #symmetry-picker { display: flex; flex-direction: row; width: auto; }
  #size-picker { flex-direction: row; width: auto; }
}

/* Spark bar + gallery: compact for small screens / portrait */
@media (max-width: 900px), (orientation: portrait) {
  .spark-bar {
    top: 10px;
    max-width: 92%;
    padding: 6px 8px 6px 10px;
    gap: 8px;
    border-width: 3px;
  }
  .spark-bar .spark-star { width: 26px; height: 26px; }
  .spark-new { height: 34px; padding: 0 12px; font-size: 13px; }
  .spark-hide { width: 32px; height: 32px; min-width: 32px; }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
}

/* Very short landscape phones — keep everything reachable */
@media (max-height: 480px) and (orientation: landscape) {
  #topbar { min-height: 58px; }
  #left-rail, #right-rail { width: 100px; }
  .tool-btn { width: 84px; }
}

/* ============================================================
   Grown-Ups' Corner link — discreet teacher/parent affordance
   ============================================================ */
#grownups-link {
  position: fixed;
  left: 8px;
  bottom: 6px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.82);
  border: 1.5px solid rgba(58, 46, 57, 0.14);
  border-radius: 999px;
  padding: 5px 10px;
  text-decoration: none;
  opacity: 0.68;
  box-shadow: 0 2px 0 rgba(58, 46, 57, 0.10);
  transition: opacity .15s ease, transform .15s var(--bounce);
  -webkit-tap-highlight-color: transparent;
}
#grownups-link:hover,
#grownups-link:focus-visible { opacity: 1; transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  #grownups-link { transition: opacity .15s ease; }
  #grownups-link:hover, #grownups-link:focus-visible { transform: none; }
}