/* ===========================================================
   Sirisora v3 — "Playground Modern"
   Confident, premium, characterful. Less generic kids-app.
   =========================================================== */

:root {
  /* ── Surfaces ─────────────────────────────────────────── */
  --paper:        #FBF6EB;   /* warm ivory — main bg */
  --paper-2:      #FFFFFF;
  --paper-soft:   #F5EFE0;   /* slightly deeper for inset areas */
  --dusk:         #1F1A3D;   /* deep aubergine for hero panels */
  --dusk-2:       #2D2557;
  --dusk-3:       #443A7A;

  /* ── Ink ──────────────────────────────────────────────── */
  --ink:          #1F1A3D;
  --ink-soft:     #5C507A;
  --ink-faint:    #9C92B5;
  --rule:         #ECE2CC;
  --rule-strong:  #D9CCAE;

  /* ── Brand palette — punchier, not pastel ─────────────── */
  --mango:        #FF6B2C;   /* primary action */
  --mango-deep:   #E04F12;
  --mint:         #00C896;
  --mint-deep:    #00A176;
  --periwinkle:   #6979F8;
  --periwinkle-deep: #4E5DD8;
  --blush:        #FFB7C8;
  --butter:       #FFD23F;
  --berry:        #C73E8B;
  --sky-ice:      #B3DCFB;

  /* Soft tints — used for surfaces */
  --mango-soft:      #FFE3D3;
  --mint-soft:       #C2F0E3;
  --periwinkle-soft: #DAE0FE;
  --blush-soft:      #FFE0E8;
  --butter-soft:     #FFF1B8;
  --berry-soft:      #F8D2E7;

  /* ── Status ───────────────────────────────────────────── */
  --success:      #00A176;
  --alert:        #E94B58;
  --warn:         #E89930;

  /* ── Type stack ───────────────────────────────────────── */
  --font-display:  'Bricolage Grotesque', system-ui, sans-serif;
  --font-chunky:   'Lilita One', 'Bricolage Grotesque', sans-serif; /* big stats only */
  --font-body:     'DM Sans', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;

  /* ── Shape ────────────────────────────────────────────── */
  --r-xs: 8px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* ── Elevation — softer, no chunky drop-shadows ───────── */
  --shadow-1: 0 1px 2px rgba(31, 26, 61, 0.06), 0 6px 18px -8px rgba(31, 26, 61, 0.12);
  --shadow-2: 0 2px 4px rgba(31, 26, 61, 0.06), 0 20px 40px -16px rgba(31, 26, 61, 0.18);
  --shadow-3: 0 4px 8px rgba(31, 26, 61, 0.08), 0 40px 80px -20px rgba(31, 26, 61, 0.28);
  --inset:    inset 0 0 0 1px rgba(31, 26, 61, 0.06);

  /* ── Spacing ──────────────────────────────────────────── */
  --pad: 32px;
  --gap: 22px;

  /* ── Aliases for compatibility with legacy screens ───── */
  --brand:        var(--mango);
  --brand-deep:   var(--mango-deep);
  --brand-soft:   var(--mango-soft);
  --cream:        var(--paper);
  --cream-deep:   var(--paper-soft);
  --coral-soft:   var(--blush-soft);
  --shadow-card:  var(--shadow-1);
  --shadow-inset: var(--inset);
  --shadow-pop:   var(--shadow-3);
}

[data-density="compact"] { --pad: 22px; --gap: 14px; }
[data-density="roomy"]   { --pad: 42px; --gap: 32px; }

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

/* ===========================================================
   App shell
   =========================================================== */
.app { min-height: 100vh; background: var(--paper); }

.screen-switcher {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 246, 235, 0.85);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--rule);
  padding: 18px 40px;
  display: flex; align-items: center; gap: 24px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: 'wdth' 110;
  letter-spacing: -0.025em;
  font-size: 24px;
  color: var(--ink);
}
.brand-mark {
  width: 36px; height: 36px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 30%, #FFC56A 0%, var(--mango) 60%, var(--berry) 100%);
  display: grid; place-items: center;
  color: white;
  font-family: var(--font-chunky);
  font-size: 20px;
  transform: rotate(-6deg);
  position: relative;
  box-shadow: 0 6px 14px -4px rgba(255,107,44,0.55);
}
.brand-mark::after {
  content: '';
  position: absolute; top: 4px; left: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.6);
}

.screen-tabs {
  display: flex; gap: 2px;
  background: rgba(31, 26, 61, 0.06);
  padding: 4px;
  border-radius: var(--r-pill);
}
.screen-tab {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  transition: all 200ms cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
}
.screen-tab:hover { color: var(--ink); }
.screen-tab.active {
  background: var(--ink);
  color: var(--paper);
}

.screen-meta { margin-left: auto; font-size: 13px; color: var(--ink-faint); display: flex; align-items: center; gap: 10px; }
.screen-meta .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }

.screen {
  padding: 56px 64px 120px;
  max-width: 1480px;
  margin: 0 auto;
}

/* ===========================================================
   Typography
   =========================================================== */
.h-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: 'wdth' 110, 'opsz' 96;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--ink);
  margin: 0;
}
.h1 { font-size: 76px; font-weight: 700; font-variation-settings: 'wdth' 95, 'opsz' 96; }
.h2 { font-size: 52px; font-weight: 700; font-variation-settings: 'wdth' 100, 'opsz' 96; }
.h3 { font-size: 32px; font-weight: 600; }

.h-chunky {
  font-family: var(--font-chunky);
  letter-spacing: -0.015em;
  line-height: 0.92;
  color: var(--ink);
}

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
}

.lede { font-size: 20px; line-height: 1.45; color: var(--ink-soft); max-width: 56ch; font-weight: 400; }

/* ===========================================================
   Cards + surfaces
   =========================================================== */
.card {
  background: var(--paper-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: var(--pad);
  border: 1px solid rgba(31, 26, 61, 0.04);
}
.card-dusk {
  background: var(--dusk);
  color: var(--paper);
  border-radius: var(--r-lg);
  padding: var(--pad);
  position: relative;
  overflow: hidden;
}

/* ===========================================================
   Buttons — flat with subtle depth, no chunky drop-shadows
   =========================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  transition: transform 140ms cubic-bezier(.4,1.4,.5,1), background 180ms ease, box-shadow 200ms ease;
  position: relative;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--mango);
  color: white;
  box-shadow: 0 6px 16px -4px rgba(255,107,44,0.45);
}
.btn-primary:hover { background: #FF7E47; box-shadow: 0 10px 22px -6px rgba(255,107,44,0.55); transform: translateY(-1px); }

.btn-dark {
  background: var(--ink);
  color: var(--paper);
}
.btn-dark:hover { background: var(--dusk-2); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid rgba(31, 26, 61, 0.18);
}
.btn-ghost:hover { background: rgba(31, 26, 61, 0.06); }

.btn-google {
  background: var(--paper-2);
  color: var(--ink);
  border: 1.5px solid var(--rule-strong);
  padding: 16px 24px;
  font-size: 16px;
  border-radius: 18px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-1);
}
.btn-google:hover { background: white; transform: translateY(-1px); box-shadow: var(--shadow-2); }

/* Chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  background: rgba(31, 26, 61, 0.06);
  color: var(--ink);
  letter-spacing: -0.005em;
}
.chip.pos { background: var(--mint-soft); color: var(--mint-deep); }
.chip.neg { background: var(--blush-soft); color: var(--berry); }
.chip.warm { background: var(--mango-soft); color: var(--mango-deep); }
.chip.cool { background: var(--periwinkle-soft); color: var(--periwinkle-deep); }
.chip-lg { padding: 8px 16px; font-size: 14px; }

/* Family name — chunky Lilita One in solid mango orange. Matches the
   brand mark's orange + white palette. */
.family-sticker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 2px 6px 4px;
  cursor: default;
  flex-shrink: 1;
  min-width: 0;
  overflow: visible;
}
.family-sticker-emoji {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--mango);
  line-height: 1;
}
.family-sticker-text {
  font-family: var(--font-chunky);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mango);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: visible;
}
.family-sticker-emoji { animation: family-heart 2.4s ease-in-out infinite; }
@keyframes family-heart {
  0%, 100% { transform: scale(1)    rotate(-4deg); }
  50%      { transform: scale(1.18) rotate( 8deg); }
}

/* Field */
.field { display: grid; gap: 8px; }
.field label {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.field input, .field textarea, .field select {
  background: var(--paper-2);
  border: 1.5px solid var(--rule-strong);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 16px;
  font-family: var(--font-body);
  color: var(--ink);
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--mango);
  box-shadow: 0 0 0 4px var(--mango-soft);
}

/* Kid avatar — cleaner, less chunky */
.kid-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: 22px;
  background-size: cover;
  background-position: center;
  flex: none;
  position: relative;
  box-shadow: 0 0 0 3px var(--paper);
}
.kid-avatar::before {
  content: '';
  position: absolute; inset: -7px;
  border-radius: 50%;
  background: inherit;
  filter: blur(8px);
  opacity: 0.5;
  z-index: -1;
}
.kid-avatar.lg { width: 96px; height: 96px; font-size: 38px; box-shadow: 0 0 0 5px var(--paper); }
.kid-avatar.xl { width: 140px; height: 140px; font-size: 56px; box-shadow: 0 0 0 6px var(--paper); }

/* Step indicator */
.steps { display: flex; align-items: center; gap: 8px; }
.step-dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 2px solid var(--rule-strong);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-faint);
  transition: all 280ms cubic-bezier(.4,1.4,.5,1);
}
.step-dot.done { background: var(--mint); color: white; border-color: var(--mint); }
.step-dot.active {
  background: var(--mango); color: white; border-color: var(--mango);
  transform: scale(1.2); box-shadow: 0 0 0 6px var(--mango-soft);
}
.step-bar { height: 2px; flex: 1; background: var(--rule-strong); border-radius: 2px; }
.step-bar.done { background: var(--mint); }

/* Progress bar — sleeker */
.prog {
  background: rgba(31, 26, 61, 0.06);
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.prog-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 700ms cubic-bezier(.4,1.4,.5,1);
  position: relative;
  overflow: hidden;
}
.prog-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: shimmer 2.4s linear infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ===========================================================
   Animations
   =========================================================== */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(2deg); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pop-in {
  0%   { transform: scale(0.85) translateY(8px); opacity: 0; }
  60%  { transform: scale(1.02) translateY(0);   opacity: 1; }
  100% { transform: scale(1) translateY(0);       opacity: 1; }
}
@keyframes fade-up {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes coin-in {
  from { transform: scale(0) rotate(-180deg); opacity: 0; }
  60%  { transform: scale(1.3) rotate(15deg); }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

.pop-in { animation: pop-in 420ms cubic-bezier(.4,1.4,.5,1) both; }
.fade-up { animation: fade-up 500ms cubic-bezier(.4,0,.2,1) both; }
.mascot-idle { animation: float 4.2s ease-in-out infinite; transform-origin: center bottom; }
.suri-dancing {
  animation: suri-travel-dance 7s cubic-bezier(.45,0,.55,1);
  transform-origin: center center;
  position: relative;
  z-index: 999;
  will-change: transform;
  pointer-events: none;
}
@keyframes suri-travel-dance {
  /* Slow travel down to the pile (0–28%) */
  0%   { transform: translate(0, 0)                                                        rotate(0deg)   scale(1);    }
  14%  { transform: translate(calc(var(--tx, -300px) * 0.35), calc(var(--ty, 200px) * 0.25)) rotate(-15deg) scale(0.96); }
  28%  { transform: translate(var(--tx, -300px), var(--ty, 200px))                            rotate(8deg)   scale(0.94); }

  /* Hover & dance on top of pile (28–80% ≈ 3.5s) */
  36%  { transform: translate(calc(var(--tx, -300px) + 10px), calc(var(--ty, 200px) - 14px)) rotate(-12deg) scale(0.97); }
  46%  { transform: translate(calc(var(--tx, -300px) - 14px), calc(var(--ty, 200px) - 4px))  rotate(14deg)  scale(0.94); }
  56%  { transform: translate(calc(var(--tx, -300px) + 8px),  calc(var(--ty, 200px) - 18px)) rotate(-16deg) scale(0.98); }
  66%  { transform: translate(calc(var(--tx, -300px) - 10px), calc(var(--ty, 200px) + 2px))  rotate(12deg)  scale(0.95); }
  74%  { transform: translate(calc(var(--tx, -300px) + 4px),  calc(var(--ty, 200px) - 10px)) rotate(-8deg)  scale(0.96); }
  80%  { transform: translate(var(--tx, -300px), var(--ty, 200px))                            rotate(0deg)   scale(0.95); }

  /* Slow travel back (80–100%) */
  92%  { transform: translate(calc(var(--tx, -300px) * 0.35), calc(var(--ty, 200px) * 0.4))  rotate(-8deg)  scale(0.98); }
  100% { transform: translate(0, 0)                                                          rotate(0deg)   scale(1);    }
}

/* Limb animations during dance */
.suri-dancing .suri-wing-l { animation: wing-flap-l 0.45s ease-in-out infinite; }
.suri-dancing .suri-wing-r { animation: wing-flap-r 0.45s ease-in-out infinite; }
@keyframes wing-flap-l {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-26deg); }
}
@keyframes wing-flap-r {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(26deg); }
}
.suri-dancing .suri-foot-l { animation: foot-tap-l 0.4s ease-in-out infinite; }
.suri-dancing .suri-foot-r { animation: foot-tap-r 0.4s ease-in-out infinite 0.2s; }
@keyframes foot-tap-l { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px) rotate(-8deg); } }
@keyframes foot-tap-r { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px) rotate(8deg); } }

/* Mascot extras — kiss heart, music notes, sweat */
@keyframes kiss-heart-fly {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(40px, -50px) scale(1.4); opacity: 0; }
}
@keyframes note-float {
  0%, 100% { transform: translateY(0) rotate(-6deg); opacity: 0.5; }
  50%      { transform: translateY(-8px) rotate(6deg); opacity: 1; }
}
@keyframes sweat-drip {
  0%   { transform: translateY(0) scale(1); opacity: 0.5; }
  60%  { transform: translateY(16px) scale(1.1); opacity: 1; }
  100% { transform: translateY(28px) scale(0.6); opacity: 0; }
}

/* Sprinkle stars */
.sprinkle-star {
  position: fixed;
  top: -40px;
  pointer-events: none;
  z-index: 9999;
  animation: sprinkle-fall ease-in forwards;
  filter: drop-shadow(0 2px 4px rgba(31, 26, 61, 0.15));
}
@keyframes sprinkle-fall {
  0%   { transform: translate(0, -40px) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate(var(--drift, 0), calc(100vh + 40px)) rotate(var(--spin, 360deg)); opacity: 0; }
}

/* Responsive */
@media (max-width: 900px) {
  .screen { padding: 32px 22px 80px; }
  .h1 { font-size: 44px; }
  .h2 { font-size: 34px; }
  .screen-switcher { padding: 14px 18px; flex-wrap: wrap; }
  .screen-meta { display: none; }
}