/* ══════════════════════════════════════════════════════════
   Gaanit Design System — design-system.css
   Import this FIRST on every page.
   ══════════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@700;800;900&display=swap');

/* ── Color Tokens ── */
:root {
  --gs-bg:         #F0EDFF;
  --gs-surface:    #FFFFFF;
  --gs-primary:    #6C5CE7;
  --gs-primary-dk: #4834D4;
  --gs-accent:     #00CEC9;
  --gs-warm:       #FDCB6E;
  --gs-warm-dk:    #E17055;
  --gs-text:       #2D3436;
  --gs-text-soft:  #636E72;
  --gs-border:     rgba(108,92,231,0.12);

  /* Per-game accent colors */
  --gs-gaanit:     #00CEC9;
  --gs-brain:      #6C5CE7;
  --gs-tracing:    #E17055;
  --gs-word:       #0984E3;

  /* ── Sky / Dark Starry Theme ── */
  --sky-bg:        #0a0a1a;
  --sky-surface:   #12122a;
  --sky-card:      #1a1a3e;
  --sky-border:    rgba(255,255,255,0.08);
  --sky-text:      #ffffff;
  --sky-text-soft: rgba(255,255,255,0.65);

  /* Per-game sky accents */
  --sky-gaanit:    #00CEC9;
  --sky-brain:     #a29bfe;
  --sky-trace:     #fd79a8;
  --sky-word:      #74b9ff;
}

/* ── Ensure main content is above space canvas ── */
#app, #auth-overlay, #screen-kid, header, nav, footer, main, .hub-header, .cards-wrap, .hub-footer {
  position: relative;
  z-index: 1;
}
/* Brain Kids screens are position:fixed — only set z-index */
.screen, #screen-home, #screen-countdown, #screen-game, #screen-result, #screen-scores {
  z-index: 1;
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── Base ── */
html, body {
  height: 100%;
  font-family: 'Nunito', sans-serif;
  background: var(--sky-bg, #0a0a1a); /* dark space — canvas renders on top */
  color: var(--gs-text);
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography ── */
.gs-heading {
  font-family: 'Fredoka One', cursive;
  color: var(--gs-text);
}

/* ══════════════════════════════════════════════════════════
   .gs-navbar — Top Nav Bar (shared across all 4 games)
   ══════════════════════════════════════════════════════════ */
.gs-navbar {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 16px;
  gap: 10px;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  position: relative;
  z-index: 10;
}

/* Per-game navbar backgrounds */
.gs-navbar--gaanit  { background: var(--gs-gaanit); }
.gs-navbar--brain   { background: var(--gs-brain); }
.gs-navbar--tracing { background: var(--gs-tracing); }
.gs-navbar--word    { background: var(--gs-word); }

.gs-navbar__title {
  font-family: 'Fredoka One', cursive;
  font-size: 18px;
  color: #fff;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gs-navbar__badge {
  background: rgba(255,255,255,0.92);
  border-radius: 50px;
  padding: 4px 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Colored badge text per game */
.gs-navbar--gaanit  .gs-navbar__badge { color: var(--gs-gaanit); }
.gs-navbar--brain   .gs-navbar__badge { color: var(--gs-brain); }
.gs-navbar--tracing .gs-navbar__badge { color: var(--gs-tracing); }
.gs-navbar--word    .gs-navbar__badge { color: var(--gs-word); }

/* ══════════════════════════════════════════════════════════
   .gs-coin-pill
   ══════════════════════════════════════════════════════════ */
.gs-coin-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--gs-warm);
  border-radius: 50px;
  padding: 4px 12px 4px 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 2px 6px rgba(253,203,110,0.5);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   .gs-card
   ══════════════════════════════════════════════════════════ */
.gs-card {
  background: var(--gs-surface);
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(108,92,231,0.10);
  border: 1px solid var(--gs-border);
}

/* ══════════════════════════════════════════════════════════
   .gs-btn — Primary Button (3D effect)
   ══════════════════════════════════════════════════════════ */
.gs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--gs-primary);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 14px 32px;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--gs-primary-dk);
  transition: transform 0.1s, box-shadow 0.1s;
  text-decoration: none;
}
.gs-btn:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--gs-primary-dk);
}

.gs-btn--secondary {
  background: #e8e4fa;
  color: var(--gs-primary);
  box-shadow: 0 4px 0 rgba(108,92,231,0.25);
}
.gs-btn--secondary:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 rgba(108,92,231,0.25);
}

/* ══════════════════════════════════════════════════════════
   .gs-owl-mascot — Fixed bottom-left owl
   ══════════════════════════════════════════════════════════ */
.gs-owl-mascot {
  position: fixed;
  bottom: 12px;
  left: 12px;
  font-size: 40px;
  line-height: 1;
  z-index: 20;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.12));
  animation: gs-owl-bob 2.4s ease-in-out infinite;
}
@keyframes gs-owl-bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* ══════════════════════════════════════════════════════════
   .gs-success-overlay — Shared reward/success card
   ══════════════════════════════════════════════════════════ */
.gs-success-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 900;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.gs-success-overlay.show { display: flex; }

.gs-success-card {
  background: var(--gs-surface);
  border-radius: 24px;
  padding: 36px 28px 28px;
  width: 100%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
  animation: gs-card-pop 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  position: relative;
}

.gs-success-card__emoji {
  font-size: 60px;
  margin-bottom: 10px;
  display: block;
}

.gs-success-card__title {
  font-family: 'Fredoka One', cursive;
  font-size: 32px;
  color: var(--gs-primary);
  margin-bottom: 6px;
}

.gs-success-card__stars {
  font-size: 28px;
  letter-spacing: 4px;
  margin-bottom: 10px;
}

.gs-success-card__coins {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--gs-warm);
  color: #fff;
  border-radius: 50px;
  padding: 5px 16px;
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 14px;
  box-shadow: 0 2px 6px rgba(253,203,110,0.5);
}

.gs-success-card__fact {
  background: #EDE7F6;
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gs-primary);
  text-align: left;
  line-height: 1.4;
}

.gs-success-card__fact-label {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  opacity: 0.7;
}

.gs-success-card__nav {
  display: flex;
  gap: 10px;
}
.gs-success-card__nav .gs-btn { flex: 1; }

/* ══════════════════════════════════════════════════════════
   .gs-confetti-canvas
   ══════════════════════════════════════════════════════════ */
.gs-confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

/* ══════════════════════════════════════════════════════════
   Confetti particle
   ══════════════════════════════════════════════════════════ */
.gs-cp {
  position: fixed;
  width: 9px;
  height: 12px;
  top: -20px;
  border-radius: 2px;
  animation: gs-fall linear forwards;
  z-index: 9999;
  pointer-events: none;
}
@keyframes gs-fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════
   Shared Animations
   ══════════════════════════════════════════════════════════ */
@keyframes gs-card-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

@keyframes gs-fade-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes gs-slide-up {
  from { transform: translateY(50px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes gs-logo-pop {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0);      opacity: 1; }
}

/* ── Scrollbar hide utility ── */
.gs-no-scrollbar { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gs-no-scrollbar::-webkit-scrollbar { display: none; }

/* ── Home button in navbar ── */
.gs-navbar__home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 1.5px solid rgba(255,255,255,0.35);
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s;
}
.gs-navbar__home:hover { background: rgba(255,255,255,0.3); }

/* ══════════════════════════════════════════════════════════
   Space canvas background
   ══════════════════════════════════════════════════════════ */
#space-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   .gs-game-header — Unified sticky game header
   ══════════════════════════════════════════════════════════ */
.gs-game-header {
  position: sticky; top: 0; z-index: 100;
  width: 100%;
  height: 56px;
  background: rgba(10,10,26,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sky-border);
  display: flex; align-items: center;
  padding: 0 16px; gap: 12px;
}
.gs-header-left  { display: flex; align-items: center; gap: 10px; }
.gs-header-right { display: flex; align-items: center; gap: 8px; }
.gs-home-btn {
  background: rgba(255,255,255,0.1); border: none;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 16px; cursor: pointer; color: white;
  transition: background 0.2s;
}
.gs-home-btn:hover { background: rgba(255,255,255,0.2); }
.gs-coin-pill {
  background: linear-gradient(135deg, #f6d365, #fda085);
  border-radius: 50px; padding: 4px 12px;
  font-weight: 800; font-size: 14px; color: #2d3436;
  display: flex; align-items: center; gap: 4px;
}
.gs-header-title {
  flex: 1; text-align: center;
  font-family: 'Fredoka One', cursive;
  font-size: 18px; color: white;
}
.gs-badge {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50px; padding: 4px 12px;
  font-size: 12px; font-weight: 800; color: white;
}

/* ══════════════════════════════════════════════════════════
   .gs-game-footer — Unified fixed game footer
   ══════════════════════════════════════════════════════════ */
.gs-game-footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  height: 60px;
  background: rgba(10,10,26,0.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--sky-border);
  display: flex; align-items: center;
  padding: 0 8px;
}
.gs-footer-btn {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  background: none; border: none; cursor: pointer;
  color: var(--sky-text-soft); font-size: 9px; font-weight: 700;
  font-family: 'Nunito', sans-serif;
  padding: 8px 4px; border-radius: 12px;
  transition: all 0.2s;
}
.gs-footer-btn span:first-child { font-size: 20px; }
.gs-footer-btn:hover, .gs-footer-btn.active {
  color: white;
  background: rgba(255,255,255,0.08);
}
/* Add 60px bottom padding to game content so footer doesn't overlap */
.gs-game-content { padding-bottom: 68px; }