/* ==========================================================================
   TinyCrayonz Play — Coloring Studio
   Kid-facing app styles. Design tokens per project spec.
   ========================================================================== */

:root {
  --paper: #FFF9EE;
  --ink: #333340;
  --soft-ink: #6B6B7A;

  --c-red: #FF5D5D;
  --c-orange: #FF9440;
  --c-yellow: #FFC531;
  --c-leaf: #8BC34A;
  --c-green: #2F9E57;
  --c-blue: #3FA9F5;
  --c-purple: #7A5CC6;
  --c-pink: #FF7BAC;
  --c-brown: #A9713F;
  --c-black: #333340;

  --action: #2E9BE6;

  --card-radius: 22px;
  --border-w: 4px;
  --shadow-card: 0 6px 0 rgba(51, 51, 64, 0.14);
  --shadow-card-big: 0 8px 0 rgba(51, 51, 64, 0.16);
  --font-head: "Fredoka", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(circle, rgba(51, 51, 64, 0.07) 1.6px, transparent 1.6px);
  background-size: 26px 26px;
  touch-action: manipulation;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

#app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

button {
  font-family: inherit;
  color: inherit;
  -webkit-touch-callout: none;
  user-select: none;
}

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 3px;
  border-radius: 12px;
}

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

/* --------------------------------------------------------------------------
   Shared bits
   -------------------------------------------------------------------------- */

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px clamp(12px, 3vw, 28px) 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  min-width: 54px;
  padding: 10px 22px;
  border: var(--border-w) solid var(--ink);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--ink);
  transform: translateY(0);
  transition: transform 90ms ease, box-shadow 90ms ease, background-color 120ms ease;
}
.btn:active,
.btn.is-pressed {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--ink);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
  transform: none;
  box-shadow: 0 5px 0 var(--ink);
}
.btn--action { background: var(--action); color: #fff; }
.btn--go     { background: var(--c-green); color: #fff; }
.btn--ghost  { background: transparent; border-color: transparent; box-shadow: none; color: var(--soft-ink); font-family: var(--font-body); font-weight: 700; }
.btn--ghost:active { transform: none; }

.btn svg { flex: 0 0 auto; }

.top-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0 14px;
}
.top-bar h1 {
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 3.4vw, 1.9rem);
  font-weight: 600;
  margin: 0;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.back-btn { padding: 10px 18px; font-size: 1rem; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Library
   -------------------------------------------------------------------------- */

.lib-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 2px 0 0;
}
.store-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 7px 16px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--c-orange);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform 90ms ease, box-shadow 90ms ease;
}
.store-chip:hover { transform: translateY(-1px); }
.store-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.store-chip svg { display: block; }

.signin-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 7px 16px;
  border: 2.5px solid rgba(51, 51, 64, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--soft-ink);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.signin-chip:hover { background: #fff; border-color: var(--ink); color: var(--ink); }
.signin-chip svg { width: 18px; height: 18px; }

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 0 10px;
}
.brand .logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand h1 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.7rem, 5.5vw, 2.6rem);
  margin: 0;
  letter-spacing: 0.5px;
}
.brand h1 .hue-a { color: var(--c-red); }
.brand h1 .hue-b { color: var(--c-orange); }
.brand h1 .hue-c { color: var(--c-green); }
.brand h1 .hue-d { color: var(--c-blue); }
.brand h1 .hue-e { color: var(--c-purple); }
.brand p {
  margin: 6px 0 0;
  color: var(--soft-ink);
  font-weight: 700;
  font-size: clamp(1rem, 2.6vw, 1.15rem);
}

.store-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 720px;
  margin: 6px auto 18px;
  padding: 16px 22px;
  background: #FFF3E2;
  border: 3px dashed var(--c-orange);
  border-radius: 18px;
  text-align: center;
}
.store-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--ink);
}
.store-banner p {
  margin: 0;
  flex: 1 1 320px;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: left;
}
.store-banner p strong { font-family: var(--font-head); }
.store-banner-btn {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 8px 20px;
  font-size: 0.95rem;
  text-decoration: none;
}

.lib-search-row {
  display: flex;
  justify-content: center;
  padding: 4px 4px 0;
}
.lib-search-wrap {
  position: relative;
  width: 100%;
  max-width: 420px;
  display: flex;
  align-items: center;
}
.lib-search-wrap svg {
  position: absolute;
  left: 18px;
  color: var(--soft-ink);
  pointer-events: none;
}
.lib-search {
  width: 100%;
  min-height: 54px;
  padding: 10px 18px 10px 48px;
  border: var(--border-w) solid var(--ink);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
.lib-search::placeholder { color: var(--soft-ink); font-weight: 700; }
.lib-search:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; }
.lib-search::-webkit-search-cancel-button { -webkit-appearance: none; }

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 24px;
  padding: 22px 4px;
}

.lib-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 6px 4px 26px;
}
.lib-pager-btn { padding: 10px 18px; font-size: 0.98rem; }
.lib-pager-info {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--soft-ink);
  min-width: 110px;
  text-align: center;
}

.book-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border: var(--border-w) solid var(--ink);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card-big);
  cursor: pointer;
  text-align: left;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.book-card:hover { transform: translateY(-3px); box-shadow: 0 11px 0 rgba(51, 51, 64, 0.16); }
.book-card:active { transform: translateY(2px); box-shadow: 0 4px 0 rgba(51, 51, 64, 0.16); }

.book-cover {
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 3px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
}
.book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.book-cover .cover-fallback {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 4rem;
  color: var(--c-orange);
}

.book-card h2 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0;
  line-height: 1.2;
}
.book-card .subtitle { color: var(--soft-ink); font-weight: 700; margin: 0; font-size: 0.95rem; }
.book-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 2.5px solid var(--ink);
  font-weight: 800;
  font-size: 0.85rem;
  background: var(--c-yellow);
}
.badge--stars { background: #FFE9A8; }
.badge svg { display: block; }

/* -------------------------------------------------------------------------
   Ads — off unless admin/ads.php has them turned on. .ad-slot is a plain
   block placement (home screen, paint screen); .page-grid-ad is the same
   content sized to sit inline in the book screen's page grid.
   -------------------------------------------------------------------------- */
.ad-slot {
  margin: 10px auto 0;
  max-width: 600px;
  text-align: center;
}
.ad-label {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soft-ink);
  opacity: 0.7;
}
.page-grid-ad {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 180px;
  padding: 12px;
  background: #fff;
  border: 3px dashed rgba(51, 51, 64, 0.35);
  border-radius: var(--card-radius);
}
.page-grid-ad .ad-label { margin: 0 0 8px; }

/* ============================================================================
   TEMP AD PLACEMENT PREVIEW — added 2026-08-15 at the owner's request to show
   where real ads will sit, since there's no real ad account wired up yet and
   Google has no universal public "test ad" for AdSense (unlike AdMob).
   Pure CSS, touches nothing else — delete this whole block to remove.
   ============================================================================ */
.ad-slot ins.adsbygoogle,
.page-grid-ad ins.adsbygoogle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  padding: 18px;
  background: linear-gradient(135deg, #FFE29A, #FFB88C);
  border: 3px dashed var(--ink);
  border-radius: 14px;
  box-sizing: border-box;
}
.ad-slot ins.adsbygoogle::before,
.page-grid-ad ins.adsbygoogle::before {
  content: "\1F4E2 Sample ad goes here \2014 real ad once AdSense is live";
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  text-align: center;
}
/* ========================================================= /TEMP AD PREVIEW */

.grownups-row {
  margin-top: auto;
  padding-top: 34px;
  display: flex;
  justify-content: center;
}
.grownups-btn {
  position: relative;
  overflow: hidden;
  min-height: 44px;
  padding: 8px 20px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--soft-ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}
.grownups-btn .hold-progress {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: rgba(46, 155, 230, 0.22);
  border-radius: 999px;
  pointer-events: none;
}
.grownups-btn.holding .hold-progress {
  transform: scaleX(1);
  transition: transform 3s linear;
}
.grownups-btn .label { position: relative; }

/* --------------------------------------------------------------------------
   Book (page picker)
   -------------------------------------------------------------------------- */

.page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px;
  padding: 8px 2px 20px;
}

.page-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #fff;
  border: var(--border-w) solid var(--ink);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  text-align: center;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.page-card:hover { transform: translateY(-3px); }
.page-card:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(51, 51, 64, 0.14); }

/* Pages with art: .page-card becomes a plain (non-button) wrapper around two
   independent, non-nested controls — the paint-launch button, which inherits
   the same flex/gap layout so its chips+thumb+word stack exactly as before,
   and the download-page link (a small circular chip pinned to the
   bottom-right corner). Placeholder ("coming soon") cards skip this wrapper
   and stay a single <button class="page-card">, unaffected. */
.page-card-btn {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

.dl-chip {
  position: absolute;
  bottom: -12px;
  right: -10px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--action);
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 3px 0 rgba(51, 51, 64, 0.3);
  text-decoration: none;
  transition: transform 120ms ease;
}
.dl-chip:hover { transform: scale(1.08); }
.dl-chip:active { transform: scale(0.92); }

.page-thumb {
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 3px solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.page-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.page-card .page-word {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.15;
}
.label-chip {
  position: absolute;
  top: -12px;
  left: -10px;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-yellow);
  border: 3px solid var(--ink);
  border-radius: 14px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.2rem;
}
.star-chip {
  position: absolute;
  top: -12px;
  right: -10px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 50%;
}
.lock-chip {
  position: absolute;
  top: -12px;
  right: -10px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF3D6;
  border: 3px solid var(--ink);
  border-radius: 50%;
}

.page-card--placeholder {
  border-style: dashed;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: none;
  cursor: default;
}
.page-card--placeholder:hover { transform: none; }
.page-card--placeholder .big-label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 3.4rem;
  color: var(--soft-ink);
  opacity: 0.75;
}
.page-card--placeholder .soon {
  color: var(--soft-ink);
  font-weight: 800;
  font-size: 0.88rem;
}
.page-card--placeholder.shake { animation: cardShake 500ms ease; }

@keyframes cardShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-6px) rotate(-2deg); }
  40% { transform: translateX(6px) rotate(2deg); }
  60% { transform: translateX(-4px) rotate(-1.2deg); }
  80% { transform: translateX(4px) rotate(1.2deg); }
}

/* --------------------------------------------------------------------------
   Paint screen
   -------------------------------------------------------------------------- */

.paint-screen {
  height: 100vh;
  height: 100dvh;
  max-width: 1180px;
  padding-bottom: 12px;
}

.paint-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.canvas-wrap {
  position: relative;
  background: #fff;
  border: var(--border-w) solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  touch-action: none;
  cursor: crosshair;
}
.canvas-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.canvas-wrap .line-layer {
  mix-blend-mode: multiply;
  pointer-events: none;
}
.stage-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--soft-ink);
  font-weight: 800;
  font-size: 1.05rem;
  padding: 30px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 0 0;
}

.swatch {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3.5px solid var(--ink);
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  box-shadow: 0 3px 0 rgba(51, 51, 64, 0.35);
  transition: transform 100ms ease, box-shadow 100ms ease;
}
.swatch:active { transform: translateY(2px) scale(0.97); box-shadow: 0 1px 0 rgba(51, 51, 64, 0.35); }
.swatch[aria-pressed="true"] {
  transform: scale(1.12);
  box-shadow: 0 0 0 4px #fff, 0 0 0 7.5px var(--ink);
}

/* rainbow "More colors" opener */
.swatch--more {
  background:
    radial-gradient(circle at center, #fff 0 26%, transparent 27%),
    conic-gradient(#FF5D5D, #FF9440, #FFC531, #8BC34A, #2F9E57, #3FA9F5, #7A5CC6, #FF7BAC, #FF5D5D);
  position: relative;
}
.swatch--more::after {
  content: '+';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
}

/* current-color chip ("My color") */
.current-chip { min-width: 76px; }
.current-chip .cc-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  display: block;
  background: var(--c-red);
  box-shadow: inset 0 -4px 0 rgba(51, 51, 64, 0.14);
}

/* color range picker overlay */
.overlay-panel--picker { gap: 10px; }
.picker-grid {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
  width: 100%;
}
.picker-row { display: flex; gap: 7px; }
.swatch-mini {
  width: clamp(36px, 11vw, 50px);
  height: clamp(36px, 11vw, 50px);
  border-radius: 12px;
  border: 3px solid var(--ink);
  padding: 0;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(51, 51, 64, 0.3);
  transition: transform 90ms ease;
}
.swatch-mini:active { transform: scale(0.94); }
.swatch-mini[aria-pressed="true"] {
  transform: scale(1.1);
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink);
}

.tool-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 60px;
  min-height: 60px;
  padding: 6px 10px;
  background: #fff;
  border: 3.5px solid var(--ink);
  border-radius: 16px;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.72rem;
  box-shadow: 0 4px 0 rgba(51, 51, 64, 0.3);
  transition: transform 100ms ease, box-shadow 100ms ease, background-color 120ms ease;
}
.tool-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(51, 51, 64, 0.3); }
.tool-btn[aria-pressed="true"] {
  background: #E4F2FD;
  border-color: var(--action);
  box-shadow: 0 4px 0 var(--action);
}
.tool-btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.tool-btn svg { display: block; }

.size-dot { border-radius: 50%; background: var(--ink); display: block; margin: 0 auto; }

.toolbar .divider {
  width: 3px;
  align-self: stretch;
  margin: 6px 4px;
  border-radius: 3px;
  background: rgba(51, 51, 64, 0.15);
}

.done-btn {
  min-height: 60px;
  font-size: 1.1rem;
  padding: 10px 26px;
}

.tool-hint {
  text-align: center;
  color: var(--soft-ink);
  font-weight: 800;
  font-size: 0.98rem;
  min-height: 1.6em;
  margin: 8px 0 0;
}
.tool-hint.attention { color: var(--c-red); animation: hintPulse 450ms ease 2; }

/* Sits below .paint-screen (a separate sibling, not inside it — see
   renderPaint()'s comment for why) so it never shrinks the canvas. The page
   simply grows past 100dvh and scrolls when this is present. */
.paint-ad-below { margin: 28px auto 40px; }
@keyframes hintPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* --------------------------------------------------------------------------
   Overlays (celebration, parent info)
   -------------------------------------------------------------------------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(255, 176, 59, 0.38);
  backdrop-filter: blur(2px);
}
.overlay--info { background: rgba(51, 51, 64, 0.45); }

.overlay-panel {
  position: relative;
  z-index: 2;
  width: min(430px, 94vw);
  max-height: 90dvh;
  overflow: auto;
  background: #fff;
  border: var(--border-w) solid var(--ink);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card-big);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  animation: panelPop 260ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes panelPop {
  from { transform: scale(0.75); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.overlay-panel h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.7rem;
  margin: 0;
}
.overlay-panel p { margin: 0; color: var(--soft-ink); font-weight: 700; }
.overlay-panel .btn { width: 100%; }
.overlay--info .overlay-panel { text-align: left; align-items: stretch; }
.overlay--info h2 { text-align: center; }
.overlay--info p { font-weight: 600; line-height: 1.5; font-size: 0.98rem; }

.big-star { animation: starSpin 700ms cubic-bezier(0.34, 1.5, 0.64, 1); }
@keyframes starSpin {
  from { transform: rotate(-160deg) scale(0.2); }
  to { transform: rotate(0) scale(1); }
}

.confetti-box {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.confetti-box i {
  position: absolute;
  top: -4vh;
  width: 12px;
  height: 18px;
  border-radius: 3px;
  opacity: 0.95;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(115vh) rotate(var(--spin, 540deg)); }
}

/* --------------------------------------------------------------------------
   Empty / error state
   -------------------------------------------------------------------------- */

.empty-card {
  margin: 40px auto;
  max-width: 420px;
  background: #fff;
  border: var(--border-w) solid var(--ink);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card-big);
  padding: 34px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.empty-card h2 { font-family: var(--font-head); font-weight: 600; margin: 0; font-size: 1.4rem; }
.empty-card p { margin: 0; color: var(--soft-ink); font-weight: 700; }

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  .page-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 14px; }
  .book-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
}

/* --------------------------------------------------------------------------
   Phones: artwork goes big and the page scrolls; controls get compact.
   Tablets/desktop (>700px) keep the fit-everything layout.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .paint-screen {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: 26px;
  }
  .paint-stage { flex: none; padding: 0 0 6px; }

  .toolbar { gap: 6px; }
  .toolbar .divider { display: none; }

  .swatch { width: 46px; height: 46px; border-width: 3px; }
  .swatch[aria-pressed="true"] {
    transform: scale(1.08);
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink);
  }
  .swatch--more::after { font-size: 1.25rem; }

  .tool-btn { min-width: 48px; min-height: 50px; padding: 3px 6px; font-size: 0.6rem; border-width: 3px; gap: 1px; }
  .tool-btn svg { width: 22px; height: 22px; }
  .current-chip { min-width: 62px; }
  .current-chip .cc-dot { width: 24px; height: 24px; }
  .size-dot { transform: scale(0.85); }

  .done-btn { min-height: 52px; font-size: 0.95rem; padding: 8px 16px; border-width: 3px; }
  .back-btn { min-height: 48px; min-width: 48px; padding: 8px 14px; }
  .top-bar { padding-bottom: 8px; gap: 10px; }
  .tool-hint { font-size: 0.88rem; margin-top: 6px; }
}