/*
  Birthday Quest — Theme Override
  Loaded after the main Tailwind CSS to shift the palette
  warmer, more vibrant, more birthday-feels.
*/

/* ─── Color token overrides ─────────────────────────── */
:root {
  --bg-deep: #160c2c;          /* warmer deep purple (was near-black) */
  --bg-card: #1f1240;          /* richer purple card */
  --bg-card-hover: #2a1858;    /* hover card */
  --coral: #ff6baa;            /* birthday pink instead of flat red */
  --cyan: #2dd4f0;             /* punchier cyan */
  --gold: #ffd04d;             /* brighter gold */
  --purple-soft: #c084fc;      /* lifted purple */
  --purple-deep: #8b5cf6;      /* richer deep purple */
  --text-primary: #f2eaff;     /* slightly cooler white */
  --text-secondary: #a78bca;   /* warmer secondary */
  --text-muted: #7a6898;       /* visible but soft */
}

/* ─── Global mobile overflow fixes ──────────────────── */
html, body, #root {
  overflow-x: hidden;
  max-width: 100vw;
}

* {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Clamp oversized hero text on small screens */
@media (max-width: 390px) {
  .text-5xl { font-size: 2rem !important; line-height: 1.2 !important; }
  .text-4xl { font-size: 1.75rem !important; line-height: 1.2 !important; }
  .text-3xl { font-size: 1.5rem !important; line-height: 1.25 !important; }
  .text-2xl { font-size: 1.25rem !important; line-height: 1.3 !important; }
}

/* ─── Fix content hidden under tab bar ──────────────── */
/* Ensure scrollable areas clear the bottom nav */
.pb-28 { padding-bottom: 8rem !important; }
.pb-24 { padding-bottom: 7rem !important; }

/* ─── Pixel font tweaks for readability on mobile ───── */
.font-pixel,
[style*="Press Start 2P"],
[class*="font-pixel"] {
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
}

/* On small screens, soften the pixel font size */
@media (max-width: 390px) {
  .font-pixel { font-size: 0.65rem !important; }
  .text-\[11px\] { font-size: 10px !important; }
  .text-\[10px\] { font-size: 9px !important; }
}

/* ─── Drive / Car tab game-card icons ───────────────── */
/*
  The letter-icon circles use:
  w-7 h-7 rounded-full flex items-center justify-center font-pixel text-[11px]
  We can't inject emojis via CSS but we can make them much more striking.
*/
.w-7.h-7.rounded-full {
  width: 2.25rem !important;
  height: 2.25rem !important;
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--coral) 70%, var(--purple-deep)),
    var(--purple-deep)
  ) !important;
  border: 1.5px solid color-mix(in oklab, var(--coral) 35%, transparent) !important;
  color: #fff !important;
  flex-shrink: 0;
}

/* Slightly tighter but still readable pixel text inside */
.w-7.h-7.rounded-full .font-pixel,
.w-7.h-7.rounded-full [class*="text-\[11"] {
  font-size: 9px !important;
}

/* ─── Quest / chapter card improvements ─────────────── */
/* Make completed items more visually distinct */
.line-through {
  opacity: 0.45 !important;
  text-decoration-color: var(--text-muted) !important;
}

/* ─── Tracking phase pulse ring ─────────────────────── */
.animate-ping {
  background: color-mix(in oklab, var(--coral) 30%, transparent) !important;
}

/* ─── Progress / XP bar ─────────────────────────────── */
.xp-bar {
  background: linear-gradient(90deg, var(--coral), var(--gold)) !important;
}

/* ─── Packing list item checkbox area ───────────────── */
/* Slightly larger tap target on mobile */
.w-6.h-6.rounded-full {
  width: 1.75rem !important;
  height: 1.75rem !important;
}

/* ─── Tab bar improvements ───────────────────────────── */
/* Ensure tab icons don't clip */
.flex.justify-around.items-center.h-12 {
  height: 3.5rem !important;
  padding-bottom: env(safe-area-inset-bottom, 0) !important;
}

/* ─── Phase screen transitions ───────────────────────── */
.phase-screen {
  background-attachment: fixed;
}

/* Warm ambient glow behind the whole app */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 20%, rgba(139, 92, 246, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 80%, rgba(255, 107, 170, 0.07) 0%, transparent 60%);
}

/* Keep app content above the pseudo glow */
#root {
  position: relative;
  z-index: 1;
}

/* ─── Admin panel tap target polish ──────────────────── */
button, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* ─── Scavenger hunt grid ────────────────────────────── */
/* Prevent cards squishing too narrow on small phones */
@media (max-width: 360px) {
  .grid-cols-2 { grid-template-columns: 1fr !important; }
}