/* ============================================================
   Plus Path — Design Tokens v2.2
   Cartoon / playful / merge-puzzle edition
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

@font-face {
  font-family: 'Youre Gone';
  src: url('fonts/Youre_Gone.otf') format('opentype');
  font-weight: 400 900;
  font-display: swap;
}

:root {
  /* ---------- Brand colors ---------- */
  --pp-orange:        #FFA823;   /* sun-gold, number glyphs, CTA fill */
  --pp-orange-deep:  #E67E0F;    /* rim of tiles, darker button edge */
  --pp-orange-soft:  #FFD38A;    /* hover / highlight */
  --pp-yellow-bg:    #FAE5A5;    /* screen wash */
  --pp-yellow-bg-2:  #FFF2C8;    /* lighter wash */
  --pp-cream:        #FFF6DE;    /* card surface on yellow */

  --pp-purple:       #7B2ECD;    /* caption band, primary CTA alt */
  --pp-purple-deep:  #56189A;    /* purple shadow */
  --pp-purple-soft:  #B07BE6;    /* path lines, arrows */
  --pp-lilac:        #E8D2FF;    /* purple tint bg */

  --pp-teal:         #4ED0C4;    /* gem color */
  --pp-teal-deep:    #2AA090;
  --pp-pink:         #F68FB5;    /* leaderboard #1 card */
  --pp-red:          #E04A4A;    /* hearts / danger */
  --pp-green:        #6FC94F;    /* success / bonus */
  --pp-blue:         #4F9BF0;    /* cool counterpoint */

  /* ---------- Tile (number cell) ---------- */
  --pp-tile-core:    #2A1810;    /* dark chocolate core */
  --pp-tile-core-2:  #1A0F0A;    /* darkest center */
  --pp-tile-rim:     var(--pp-orange);
  --pp-tile-rim-deep:var(--pp-orange-deep);
  --pp-tile-glyph:   var(--pp-orange);
  --pp-tile-glyph-hi:#FFE39A;    /* inner glyph highlight */

  /* ---------- Surfaces ---------- */
  --pp-bg:           var(--pp-yellow-bg);
  --pp-surface:      #FFFFFF;
  --pp-surface-dark: #2A2030;    /* powers/leaderboard dark mode */
  --pp-ink:          #3A2317;    /* primary text on light */
  --pp-ink-2:        #6B4B35;    /* secondary on light */
  --pp-ink-mute:     #A38566;    /* meta on light */

  --pp-on-dark:      #FFFFFF;
  --pp-on-dark-2:    #D6C9E0;
  --pp-on-dark-mute: #8E7F9C;

  /* ---------- Semantic ---------- */
  --pp-success:      var(--pp-green);
  --pp-danger:       var(--pp-red);
  --pp-warning:      #F4B500;
  --pp-info:         var(--pp-blue);

  /* ---------- Type ---------- */
  --pp-font-display: 'Youre Gone', 'Fredoka', system-ui, sans-serif; /* hammered stamp — titles, captions, score */
  --pp-font-ui:      'Fredoka', 'Youre Gone', system-ui, sans-serif; /* buttons, HUD, tabs */
  --pp-font-body:    'Nunito', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;

  /* ---------- Radii ---------- */
  --pp-r-xs: 6px;
  --pp-r-sm: 10px;
  --pp-r-md: 16px;
  --pp-r-lg: 22px;
  --pp-r-xl: 32px;
  --pp-r-pill: 999px;

  /* ---------- Spacing (4pt) ---------- */
  --pp-s-1: 4px;
  --pp-s-2: 8px;
  --pp-s-3: 12px;
  --pp-s-4: 16px;
  --pp-s-5: 24px;
  --pp-s-6: 32px;
  --pp-s-7: 48px;
  --pp-s-8: 64px;

  /* ---------- Shadows — chunky cartoon bevel ---------- */
  --pp-pop:   0 4px 0 rgba(0,0,0,.18), 0 10px 22px rgba(102,58,8,.18);
  --pp-pop-lg:0 6px 0 rgba(0,0,0,.22), 0 16px 32px rgba(102,58,8,.22);
  --pp-press: 0 2px 0 rgba(0,0,0,.22);
  --pp-inner: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.12);
  --pp-glow-orange: 0 0 22px rgba(255,168,35,.55);
  --pp-glow-purple: 0 0 22px rgba(123,46,205,.55);
}

/* ============================================================
   Typography utilities
   ============================================================ */

.pp-display { font-family: var(--pp-font-display); font-weight: 800; letter-spacing: .01em; line-height: 1; }
.pp-ui      { font-family: var(--pp-font-ui);      font-weight: 700; letter-spacing: .01em; }
.pp-body    { font-family: var(--pp-font-body);    font-weight: 400; line-height: 1.55; }

.pp-h1 { font-family: var(--pp-font-display); font-weight: 800; font-size: 56px; line-height: .95; color: var(--pp-purple); }
.pp-h2 { font-family: var(--pp-font-display); font-weight: 800; font-size: 40px; line-height: 1.0;  color: var(--pp-ink); }
.pp-h3 { font-family: var(--pp-font-display); font-weight: 700; font-size: 28px; line-height: 1.05; color: var(--pp-ink); }
.pp-eyebrow { font-family: var(--pp-font-ui); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--pp-purple); }

/* The purple caption band seen on all app-store screenshots */
.pp-caption-band {
  background: var(--pp-purple);
  color: var(--pp-orange);
  font-family: var(--pp-font-display);
  font-weight: 800;
  text-align: center;
  padding: 16px 10px 22px;
  font-size: 28px;
  line-height: 1.0;
  white-space: nowrap;
  box-shadow: inset 0 4px 0 rgba(255,255,255,.10), inset 0 -4px 0 rgba(0,0,0,.15);
}

/* The cartoon-bevel number glyph: yellow with an inner highlight and a warm drop */
.pp-num-glyph {
  font-family: var(--pp-font-display);
  font-weight: 800;
  color: var(--pp-tile-glyph);
  text-shadow:
    0 1px 0 rgba(255,255,255,.25),
    0 -1px 0 rgba(0,0,0,.35),
    2px 2px 0 rgba(0,0,0,.25);
  -webkit-text-stroke: 1px rgba(0,0,0,.25);
}

/* ============================================================
   Reusable primitives
   ============================================================ */

/* Number tile — dark chocolate core, thick orange rim */
.pp-tile {
  width: 64px; height: 64px;
  border-radius: 14px;
  background: radial-gradient(120% 120% at 50% 0%, #3A2316 0%, var(--pp-tile-core) 55%, var(--pp-tile-core-2) 100%);
  box-shadow:
    inset 0 0 0 4px var(--pp-tile-rim),
    inset 0 0 0 5px rgba(0,0,0,.4),
    inset 0 3px 0 rgba(255,255,255,.12),
    inset 0 -4px 0 rgba(0,0,0,.45),
    0 4px 0 var(--pp-tile-rim-deep),
    0 8px 14px rgba(0,0,0,.2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pp-font-display);
  font-weight: 800;
  font-size: 36px;
  color: var(--pp-orange);
  text-shadow: 0 -1px 0 rgba(0,0,0,.5), 0 2px 0 rgba(0,0,0,.3);
  position: relative;
  user-select: none;
}

/* Little orange chip (as in the 3-slot equation: ▯ + ▯ + ▯ = 4) */
.pp-chip {
  min-width: 40px; height: 40px; padding: 0 10px;
  border-radius: 10px;
  background: var(--pp-orange);
  color: #FFFFFF;
  font-family: var(--pp-font-display);
  font-weight: 800;
  font-size: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 -3px 0 var(--pp-orange-deep), 0 3px 0 rgba(0,0,0,.15);
  text-shadow: 0 1px 0 var(--pp-orange-deep);
}

/* Pill used for HUD (coin counter, timer, level badge) */
.pp-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--pp-r-pill);
  background: rgba(255,255,255,.55);
  color: var(--pp-ink);
  font-family: var(--pp-font-display);
  font-weight: 800;
  font-size: 14px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08), 0 2px 0 rgba(0,0,0,.06);
}
.pp-pill.dark {
  background: #2A2030;
  color: var(--pp-on-dark);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.4), 0 2px 0 rgba(0,0,0,.2);
}

/* Cartoon buttons */
.pp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  border: 0; cursor: pointer;
  font-family: var(--pp-font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .02em;
  border-radius: var(--pp-r-md);
  transition: transform .12s, filter .15s;
}
.pp-btn:active { transform: translateY(2px); }

.pp-btn--primary {
  background: linear-gradient(180deg, #FFD38A 0%, var(--pp-orange) 40%, var(--pp-orange-deep) 100%);
  color: #FFF;
  text-shadow: 0 2px 0 var(--pp-orange-deep);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -4px 0 var(--pp-orange-deep), 0 5px 0 #7A3E00, 0 10px 22px rgba(255,168,35,.45);
}
.pp-btn--purple {
  background: linear-gradient(180deg, #B07BE6 0%, var(--pp-purple) 40%, var(--pp-purple-deep) 100%);
  color: #FFD38A;
  text-shadow: 0 2px 0 var(--pp-purple-deep);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -4px 0 var(--pp-purple-deep), 0 5px 0 #35077E, 0 10px 22px rgba(123,46,205,.45);
}
.pp-btn--ghost {
  background: #FFF; color: var(--pp-ink);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.1), 0 3px 0 rgba(0,0,0,.08);
}

/* Purple caption band / header chip */
.pp-card {
  background: var(--pp-cream);
  border-radius: var(--pp-r-lg);
  box-shadow: 0 4px 0 rgba(0,0,0,.08), 0 12px 24px rgba(102,58,8,.12);
  padding: 20px;
}

/* Scene backgrounds */
.pp-scene-yellow {
  background:
    radial-gradient(60% 40% at 50% 55%, #FFEFBF 0%, transparent 70%),
    linear-gradient(180deg, var(--pp-yellow-bg-2) 0%, var(--pp-yellow-bg) 60%, #F0C178 100%);
}
.pp-scene-sunset {
  background:
    radial-gradient(60% 35% at 50% 80%, #FFCB6A 0%, transparent 70%),
    linear-gradient(180deg, #FFD9A5 0%, #F9AFBF 40%, #C48AC7 70%, #6E5093 100%);
}
.pp-scene-mountain {
  background:
    radial-gradient(80% 50% at 50% 10%, rgba(90,60,120,.7) 0%, transparent 70%),
    linear-gradient(180deg, #4A2F5F 0%, #3A2152 45%, #28173E 85%, #1A0E2A 100%);
}
.pp-scene-dark {
  background: linear-gradient(180deg, #3B2C4A 0%, #20182F 100%);
  color: var(--pp-on-dark);
}