/* ─────────────────────────────────────────────────────────────────────────
   AI vs Player — Foundations (v2: aligned with PlayPuzzle parent brand)

   The platform is PlayPuzzle.in. Its visual language is:
     • Purple as primary brand + CTA (#7C3AED family)
     • Fredoka (display) + Nunito (body) — chunky, rounded, friendly
     • White cards on a near-white page background
     • Orange peach pill tags
     • Soft drop-shadows, generous 16–22px corner radii

   AI vs Player sits INSIDE that skin as one card on the homepage and as
   its own /aivsplayer/ play surface. Inside the play surface it adds its
   own AI-vs-Human duality:
     • BLUE = AI / opponent
     • ORANGE = Player / you
     • PURPLE remains the platform CTA / navigation
   ───────────────────────────────────────────────────────────────────────── */

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

:root {
  /* ── PLAYPUZZLE PARENT BRAND ─────────────────────────────────────────── */
  /* Purple — the platform CTA + brand wordmark */
  --pp-purple:        #7C3AED;
  --pp-purple-hover:  #6D28D9;
  --pp-purple-press:  #5B21B6;
  --pp-purple-soft:   #EDE9FE;   /* tint for purple chip backgrounds */
  --pp-purple-text:   #6D28D9;   /* purple text on soft tint */

  /* Orange tag pills (category labels on cards) */
  --pp-orange:        #EA580C;
  --pp-orange-soft:   #FFEDD5;
  --pp-orange-text:   #C2410C;

  /* Puzzle-piece green from the parent wordmark */
  --pp-green:         #65A30D;
  --pp-green-soft:    #D9F99D;

  /* Page + card surfaces (parent + marketing) */
  --pp-page:          #F5F5F7;
  --pp-card:          #FFFFFF;
  --pp-card-2:        #FAFAFA;   /* hover */
  --pp-border:        rgba(15,23,42,0.08);
  --pp-border-strong: rgba(15,23,42,0.12);

  /* Hero / accent surfaces — vibrant purple gradient */
  --pp-hero-bg:       linear-gradient(135deg, #A855F7 0%, #7C3AED 60%, #6D28D9 100%);
  --pp-hero-text:     #FFFFFF;
  --pp-hero-muted:    rgba(255,255,255,0.85);

  /* Orange-on-purple CTA — used on hero / purple surfaces (high contrast) */
  --pp-orange-cta:        #F97316;
  --pp-orange-cta-hover:  #EA580C;
  --pp-orange-cta-press:  #C2410C;

  /* Pill chip bg (light gray feature pills inside cards — gray variant) */
  --pp-pill-bg:       #F4F4F5;
  --pp-pill-text:     #27272A;

  /* Text */
  --pp-text:          #18181B;
  --pp-muted:         #52525B;
  --pp-dim:           #71717A;
  --pp-on-purple:     #FFFFFF;

  /* ── AI vs PLAYER ACCENTS (dual identity, used INSIDE the play surface) */
  --ai-blue:          #2C82FF;   /* AI side — primary blue from the logo */
  --ai-blue-deep:     #1E5FCC;
  --ai-blue-soft:     #DBEAFE;

  --player-orange:    #FF7A1A;   /* Player side — primary orange from the logo */
  --player-orange-deep:#E5621A;
  --player-orange-soft:#FFEDD5;

  --ai-vs-yellow:     #FFD93F;   /* lightning bolt accent */
  --hoodie-purple:    #6B2BC9;   /* the kid's purple hoodie — used sparingly */

  /* In-game dark surfaces (dark navy from the sticker base) */
  --game-bg:          #0F1E3A;   /* deep navy game background */
  --game-bg-2:        #1A2649;   /* panel, modal */
  --game-surface:     #243160;   /* tile bg */
  --game-surface-2:   #2E3D75;   /* tile hover */
  --game-stroke:      rgba(255,255,255,0.12);

  /* Difficulty (kept) — but redrawn with parent palette */
  --diff-easy:        #16A34A;
  --diff-medium:      #F59E0B;
  --diff-hard:        #DC2626;

  /* Semantic */
  --error:            #DC2626;
  --success:          #16A34A;
  --warning:          #F59E0B;

  /* ── TYPOGRAPHY ──────────────────────────────────────────────────────── */
  --font-display: 'Fredoka', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Nunito',  system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-chunky:  'Lilita One', 'Fredoka', system-ui, sans-serif; /* for big puzzle-CTA energy */

  /* Type scale */
  --t-hero:       700 clamp(36px,4.4vw,56px)/1.05 var(--font-display);
  --t-h1:         700 clamp(28px,3.0vw,40px)/1.15 var(--font-display);
  --t-h2:         700 24px/1.2 var(--font-display);
  --t-h3:         700 20px/1.25 var(--font-display);
  --t-card-title: 800 22px/1.2 var(--font-display);
  --t-cta:        700 18px/1.0 var(--font-display);
  --t-button:     800 15px/1.0 var(--font-body);
  --t-body-lg:    500 17px/1.55 var(--font-body);
  --t-body:       500 15px/1.55 var(--font-body);
  --t-small:      500 14px/1.5  var(--font-body);
  --t-tag:        700 12px/1.0  var(--font-body);
  --t-meta:       500 13px/1.4  var(--font-body);

  /* ── SHAPE & ELEVATION ───────────────────────────────────────────────── */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   22px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* Sticker / chunky button shadow — inset bottom + drop shadow */
  --sh-card:    0 1px 2px rgba(15,23,42,0.04), 0 4px 16px rgba(15,23,42,0.06);
  --sh-card-h:  0 4px 8px rgba(15,23,42,0.06), 0 12px 32px rgba(15,23,42,0.08);
  --sh-cta:     0 4px 0 var(--pp-purple-press),  0 10px 24px rgba(124,58,237,0.30);
  --sh-cta-h:   0 2px 0 var(--pp-purple-press),  0 6px 16px rgba(124,58,237,0.35);
  --sh-cta-blue:0 4px 0 var(--ai-blue-deep),     0 10px 24px rgba(44,130,255,0.30);
  --sh-cta-org: 0 4px 0 var(--player-orange-deep), 0 10px 24px rgba(255,122,26,0.30);
  --sh-game-card: 0 6px 0 rgba(0,0,0,0.25), 0 18px 40px rgba(0,0,0,0.35);

  /* Borders */
  --b-thin:   1px solid var(--pp-border);
  --b-card:   1px solid var(--pp-border);

  /* Spacing scale */
  --s-1: 4px;  --s-2: 6px;  --s-3: 8px;  --s-4: 12px;
  --s-5: 16px; --s-6: 22px; --s-7: 32px; --s-8: 44px; --s-9: 64px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Semantic element classes (drop-in for both HTML mockups and React)
   ────────────────────────────────────────────────────────────────────────── */

.pp-hero   { font: var(--t-hero);  color: var(--pp-text); letter-spacing: -0.02em; margin: 0; }
.pp-h1     { font: var(--t-h1);    color: var(--pp-text); letter-spacing: -0.02em; margin: 0; }
.pp-h2     { font: var(--t-h2);    color: var(--pp-text); margin: 0; }
.pp-h3     { font: var(--t-h3);    color: var(--pp-text); margin: 0; }
.pp-body   { font: var(--t-body);  color: var(--pp-text); }
.pp-muted  { font: var(--t-body);  color: var(--pp-muted); }
.pp-meta   { font: var(--t-meta);  color: var(--pp-dim); }

/* The primary purple CTA — used everywhere */
.pp-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px;
  background: var(--pp-purple);
  color: var(--pp-on-purple);
  border: 0;
  border-radius: var(--r-pill);
  font: var(--t-cta);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--sh-cta);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
  text-decoration: none;
}
.pp-cta:hover  { transform: translateY(2px); box-shadow: var(--sh-cta-h); background: var(--pp-purple-hover); }
.pp-cta:active { transform: translateY(4px); box-shadow: 0 0 0 var(--pp-purple-press); }

/* Orange CTA — used on purple backgrounds (the hero "Play Kids Games Free" button) */
.pp-cta--orange {
  background: var(--pp-orange-cta);
  box-shadow: 0 4px 0 var(--pp-orange-cta-press), 0 10px 24px rgba(249,115,22,0.30);
}
.pp-cta--orange:hover {
  background: var(--pp-orange-cta-hover);
  box-shadow: 0 2px 0 var(--pp-orange-cta-press), 0 6px 16px rgba(249,115,22,0.35);
}

/* Outlined CTA — used as the secondary on a purple hero (Browse All Games) */
.pp-cta--outline-on-dark {
  background: transparent;
  color: #FFFFFF;
  border: 2px solid rgba(255,255,255,0.50);
  box-shadow: none;
}
.pp-cta--outline-on-dark:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.85);
  transform: translateY(-1px);
  box-shadow: none;
}

/* Outlined CTA — used as a CTA on light backgrounds (Visit Kids Zone) */
.pp-cta--outline {
  background: transparent;
  color: var(--pp-purple);
  border: 2px solid var(--pp-purple);
  box-shadow: none;
}
.pp-cta--outline:hover {
  background: var(--pp-purple-soft);
  transform: translateY(-1px);
  box-shadow: none;
}

/* Outlined secondary */
.pp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px;
  background: var(--pp-card);
  color: var(--pp-text);
  border: 1px solid var(--pp-border-strong);
  border-radius: var(--r-pill);
  font: var(--t-cta);
  white-space: nowrap;
  cursor: pointer;
  transition: all 120ms ease;
  text-decoration: none;
}
.pp-btn:hover { background: var(--pp-card-2); transform: translateY(-1px); }

/* Tag pills (orange peach — category) */
.pp-tag {
  display: inline-flex; align-items: center;
  padding: 4px 12px;
  background: var(--pp-orange-soft);
  color: var(--pp-orange-text);
  border-radius: var(--r-pill);
  font: var(--t-tag);
  white-space: nowrap;
}

/* Tag pills (purple — alt variant used on Kids Puzzle Games cards) */
.pp-tag--purple {
  background: var(--pp-purple-soft);
  color: var(--pp-purple-text);
}

/* Feature pill (gray, with emoji) */
.pp-feature {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--pp-pill-bg);
  color: var(--pp-pill-text);
  border-radius: var(--r-pill);
  font: var(--t-small);
  white-space: nowrap;
}

/* The signature game card */
.pp-card {
  background: var(--pp-card);
  border: 1px solid var(--pp-border);
  border-radius: var(--r-xl);
  padding: 22px;
  box-shadow: var(--sh-card);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.pp-card:hover { transform: translateY(-3px); box-shadow: var(--sh-card-h); }