/* Sticker-book extras: the --sb-* tokens and the shared cartoon components, used app-wide.
   Base tokens (--bg, --ink, --accent, fonts, radii) live in style.css. Canvas art reads these
   with token() from js/ui.js, so the scenes and the UI share one palette.

   Look: a Saturday-morning cartoon. Flat bright fills, a navy ink outline (--sb-outline at
   --sb-outline-w), chunky "pressable" sticker shadows (--sb-pop), big radii, bouncy motion.
   Light is "sunny shallows", dark is "night dive". */

:root {
  /* the art palette: flat, saturated, friendly */
  --sb-sea: #19c3e0;
  --sb-sky: #8fe3f5;
  --sb-sun: #ffc93c;
  --sb-pink: #ff6fa5;
  --sb-kelp: #3bbf6b;
  --sb-grape: #8b6cf6;
  --sb-sand: #ffe3a3;
  --sb-orange: #ff8a3d;

  --sb-outline: #14213d;          /* the cartoon ink line */
  --sb-outline-w: 3px;
  --sb-pop: 0 4px 0 var(--sb-outline);   /* sticker shadow: a solid offset in ink */

  --sb-page: linear-gradient(180deg, #9be8f7 0%, #d6f6fb 42%, #fff4cf 100%);
  --sb-primary: #ffc93c;          /* the big call-to-action yellow */
  --sb-primary-hi: #ffe58a;
  --sb-primary-lo: #e09a00;
  --sb-primary-ink: #14213d;
  --sb-glow-color: #ffd24a;       /* streaks, caret, sparkles */
  --sb-danger: #ff4d6d;           /* mistakes, danger */
  --sb-gold: #ffc21a;             /* stars */
  --sb-gold-lo: #c97f00;
  --sb-card: #ffffff;             /* text you read or type */
  --sb-card-2: #f3fbff;
  --sb-card-ink: #14213d;
  --sb-card-muted: #475677;
  --sb-card-line: rgb(20 33 61 / 0.12);
  --sb-panel: #ffffff;
  --sb-chip: #ffffff;
  --sb-chip-ink: #14213d;
  --sb-deep: #0d5c8c;             /* deep water: still blue and friendly, never black */
  --sb-glow: 0 0 0 4px color-mix(in srgb, var(--sb-glow-color) 45%, transparent);
  --sb-shadow-lg: 0 4px 0 rgb(20 33 61 / 0.14), 0 14px 32px rgb(20 33 61 / 0.14);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --sb-sea: #22d3f0;
    --sb-sky: #3a5bb8;
    --sb-sun: #ffd23f;
    --sb-pink: #ff7eb6;
    --sb-kelp: #4fe38a;
    --sb-grape: #a48bff;
    --sb-sand: #e8c77a;
    --sb-orange: #ff9a52;
    --sb-outline: #050b1f;
    --sb-page: radial-gradient(120% 80% at 50% 0%, #1b3a8a 0%, #0f2259 45%, #081233 100%);
    --sb-primary: #ffd23f;
    --sb-primary-hi: #ffe98f;
    --sb-primary-lo: #d99a00;
    --sb-primary-ink: #14213d;
    --sb-glow-color: #ffe066;
    --sb-danger: #ff6b81;
    --sb-gold: #ffd23f;
    --sb-gold-lo: #d99a00;
    --sb-card: #16295a;
    --sb-card-2: #1b3168;
    --sb-card-ink: #f2f7ff;
    --sb-card-muted: #aab9de;
    --sb-card-line: rgb(255 255 255 / 0.12);
    --sb-panel: #13234d;
    --sb-chip: #1a2d5e;
    --sb-chip-ink: #f2f7ff;
    --sb-deep: #0e2f7a;
    --sb-shadow-lg: 0 4px 0 rgb(0 0 0 / 0.4), 0 14px 32px rgb(0 0 0 / 0.4);
  }
}
:root[data-theme="dark"] {
  --sb-sea: #22d3f0;
  --sb-sky: #3a5bb8;
  --sb-sun: #ffd23f;
  --sb-pink: #ff7eb6;
  --sb-kelp: #4fe38a;
  --sb-grape: #a48bff;
  --sb-sand: #e8c77a;
  --sb-orange: #ff9a52;
  --sb-outline: #050b1f;
  --sb-page: radial-gradient(120% 80% at 50% 0%, #1b3a8a 0%, #0f2259 45%, #081233 100%);
  --sb-primary: #ffd23f;
  --sb-primary-hi: #ffe98f;
  --sb-primary-lo: #d99a00;
  --sb-primary-ink: #14213d;
  --sb-glow-color: #ffe066;
  --sb-danger: #ff6b81;
  --sb-gold: #ffd23f;
  --sb-gold-lo: #d99a00;
  --sb-card: #16295a;
  --sb-card-2: #1b3168;
  --sb-card-ink: #f2f7ff;
  --sb-card-muted: #aab9de;
  --sb-card-line: rgb(255 255 255 / 0.12);
  --sb-panel: #13234d;
  --sb-chip: #1a2d5e;
  --sb-chip-ink: #f2f7ff;
  --sb-deep: #0e2f7a;
  --sb-shadow-lg: 0 4px 0 rgb(0 0 0 / 0.4), 0 14px 32px rgb(0 0 0 / 0.4);
}

/* The page gradient sits on a fixed layer, not background-attachment: fixed (iOS ignores that and
   long pages would show the gradient's hard end). Story screens and the title use it. */
body:has(> main:is([data-screen="campaign"], [data-screen="voyage"], [data-screen="title"]))::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--sb-page);
  pointer-events: none;
}

/* ---------- Sticker components (sb-) ---------- */

/* Icons from js/story/icons.js: inline SVG that inherits currentColor. */
.sb-icon { display: inline-block; width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }

/* Primary sticker button: the one big call to action on a screen. */
.sb-btn-primary {
  position: relative;
  color: var(--sb-primary-ink);
  background: var(--sb-primary);
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  box-shadow: inset 0 -4px 0 var(--sb-primary-lo), inset 0 3px 0 var(--sb-primary-hi), var(--sb-pop);
  transition: transform 0.15s var(--ease-spring), box-shadow 0.15s ease, filter 0.15s ease;
}
.sb-btn-primary:hover { filter: brightness(1.05); transform: translateY(-2px) rotate(-1deg); }
.sb-btn-primary:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--sb-primary-lo), inset 0 2px 0 var(--sb-primary-hi), 0 1px 0 var(--sb-outline); }
.sb-btn-primary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* Sticker panel: white (or night-blue) card with an ink outline and a solid drop. */
.sb-panel {
  background: var(--sb-panel);
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: var(--radius);
  box-shadow: var(--sb-pop);
}

/* Card: text you read or type. */
.sb-card {
  color: var(--sb-card-ink);
  background: var(--sb-card);
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: var(--radius);
  box-shadow: inset 0 -5px 0 var(--sb-card-2), var(--sb-pop);
}

/* Frame for the stage and pictures: a thick colored band with an ink line either side. */
.sb-frame {
  border: 6px solid var(--sb-sun);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 var(--sb-outline-w) var(--sb-outline), inset 0 0 0 var(--sb-outline-w) var(--sb-outline), 0 6px 0 var(--sb-outline);
  background-clip: padding-box;
}

/* HUD chip: icon + label + value. */
.sb-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: var(--sb-chip);
  color: var(--sb-chip-ink);
  border: var(--sb-outline-w) solid var(--sb-outline);
  box-shadow: 0 3px 0 var(--sb-outline);
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sb-chip .sb-icon { color: var(--accent); width: 1.3em; height: 1.3em; }

/* Pill label: chapter titles, counts. */
.sb-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  border-radius: 999px;
  border: 2px solid var(--sb-outline);
  background: var(--sb-sky);
  color: var(--sb-outline);
  font-family: var(--font-display);
  font-weight: 600;
}

/* Ribbon banner ("New postcard!"). */
.sb-ribbon {
  display: inline-block;
  padding: 4px 18px;
  color: var(--sb-outline);
  background: var(--sb-pink);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%);
}

/* Big outlined cartoon title text. */
.sb-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--sb-sun);
  text-shadow:
    -2px -2px 0 var(--sb-outline), 2px -2px 0 var(--sb-outline), -2px 2px 0 var(--sb-outline), 2px 2px 0 var(--sb-outline),
    0 -2px 0 var(--sb-outline), 0 2px 0 var(--sb-outline), -2px 0 0 var(--sb-outline), 2px 0 0 var(--sb-outline),
    0 6px 0 var(--sb-outline);
  letter-spacing: 0.01em;
}

@keyframes sb-pop { 0% { opacity: 0; transform: scale(0.6); } 70% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes sb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes sb-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes sb-sparkle { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-28px) scale(1.1); } }
@keyframes sb-squash { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.12, 0.88); } 60% { transform: scale(0.94, 1.06); } }
@keyframes sb-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }