/* ==========================================================================
   PokéDebut — "Playful Collector's Dex" theme
   Design tokens synthesized from the ui-ux-pro-max + open-design toolkits
   (duolingo = tactile gamification, bento = modular grid). Poké-Blue + Electric
   Yellow brand, Pokémon type-color system, full light/dark support.
   Loaded AFTER Tailwind + styles.css so tokens win.
   ========================================================================== */

:root {
  /* ── Canvas & surface (light) ── */
  --pd-bg: #F5F7FC;
  --pd-surface: #FFFFFF;
  --pd-surface-2: #EDF1F9;
  --pd-fg: #14183A;
  --pd-fg-muted: #565E7E;
  --pd-border: #E2E7F2;
  --pd-border-strong: #C6CFE1;

  /* ── Brand / actions ── */
  --pd-primary: #2A75BB;          /* Poké Blue */
  --pd-primary-on: #FFFFFF;
  --pd-primary-hover: #1F5C93;
  --pd-primary-press: #17497A;
  --pd-primary-soft: #E7F0FA;     /* tinted chips/links backgrounds */
  --pd-primary-soft-fg: #1F5C93;
  --pd-accent: #FFCB05;           /* Electric Yellow */
  --pd-accent-on: #14183A;
  --pd-secondary: #7C4DD1;        /* community / purple */
  --pd-secondary-hover: #6A3DBE;

  /* ── Collection-state semantics ── */
  --pd-owned: #16A34A;
  --pd-owned-fill: #22C55E;
  --pd-pending: #2A75BB;
  --pd-pending-fill: #3B82F6;
  --pd-missing: #DC2626;
  --pd-warn: #D97706;
  --pd-warn-fill: #F59E0B;

  /* ── Shape / elevation / motion ── */
  --pd-radius-sm: 12px;
  --pd-radius-md: 16px;
  --pd-radius-lg: 24px;
  --pd-pill: 9999px;
  --pd-shadow-tactile: 0 4px 0 var(--pd-border-strong);
  --pd-shadow-card: 0 8px 24px rgba(16, 24, 40, .08);
  --pd-shadow-raise: 0 20px 52px rgba(16, 24, 40, .14);
  --pd-motion-fast: 160ms;
  --pd-motion-base: 300ms;
  --pd-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;

  /* ── 18 Pokémon type accents ── */
  --t-grass: #4E8234;  --t-fire: #E8622C;    --t-water: #3993D0;   --t-electric: #F3C625;
  --t-psychic: #E45B8C; --t-ice: #59C7C0;    --t-dragon: #5561B5;  --t-dark: #4A4A5E;
  --t-fairy: #E38FA8;  --t-normal: #9099A1;  --t-fighting: #C0392B; --t-flying: #8F9DDB;
  --t-poison: #9B5BA5; --t-ground: #D8A24A;  --t-rock: #B6A147;    --t-bug: #8AA62B;
  --t-ghost: #6A5A9A;  --t-steel: #6E8797;
}

:root[data-theme="dark"] {
  --pd-bg: #0E1122;
  --pd-surface: #171B30;
  --pd-surface-2: #1F2440;
  --pd-fg: #EAEDFA;
  --pd-fg-muted: #A3AAC9;
  --pd-border: #2A3052;
  --pd-border-strong: #3A4166;

  --pd-primary: #4C9BE8;
  --pd-primary-on: #06122A;
  --pd-primary-hover: #6BB0F0;
  --pd-primary-press: #2C6FB0;
  --pd-primary-soft: #17233E;
  --pd-primary-soft-fg: #9EC6F0;
  --pd-accent: #FFD23F;
  --pd-accent-on: #14183A;
  --pd-secondary: #A783E8;
  --pd-secondary-hover: #B89BEE;

  --pd-owned: #34D77A;  --pd-owned-fill: #34D77A;
  --pd-pending: #4C9BE8; --pd-pending-fill: #4C9BE8;
  --pd-missing: #F4515C; --pd-warn: #F59E0B; --pd-warn-fill: #F59E0B;

  --pd-shadow-tactile: 0 4px 0 rgba(0, 0, 0, .5);
  --pd-shadow-card: 0 8px 24px rgba(0, 0, 0, .35);
  --pd-shadow-raise: 0 20px 52px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* ── Base ────────────────────────────────────────────────────────────── */
body,
body.bg-gray-50 {
  background-color: var(--pd-bg) !important;
  color: var(--pd-fg);
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4,
.pd-display {
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* Tabular figures everywhere a count/percent/dex-number appears */
#stats [id],
.card-number-input,
#communityTableBody td,
#pokemonTableBody td {
  font-variant-numeric: tabular-nums;
}

/* ── Surfaces & text → tokens (drives dark mode across the Tailwind UI) ── */
.bg-white { background-color: var(--pd-surface) !important; }
.bg-gray-100 { background-color: var(--pd-surface-2) !important; }
#pokemonList > div .bg-gray-50,
.bg-gray-50:not(body) { background-color: var(--pd-surface-2) !important; }

/* Secondary gray buttons (List View, Close, Back, Mark Pending, …) — keep them
   readable in dark mode (they pair with text-gray-800, which we lighten). */
.bg-gray-200, .bg-gray-300 { background-color: var(--pd-surface-2) !important; }
.hover\:bg-gray-300:hover, .hover\:bg-gray-400:hover { background-color: var(--pd-border-strong) !important; }
/* The ownership toggle also uses bg-gray-300 for its OFF track — keep its track
   distinct from the white knob so the switch stays legible. */
.ownership-toggle.bg-gray-300 { background-color: var(--pd-border-strong) !important; }
.ownership-toggle > span.bg-white { background-color: #fff !important; }

.text-gray-800, .text-gray-900 { color: var(--pd-fg) !important; }
.text-gray-700, .text-gray-600 { color: var(--pd-fg-muted) !important; }
.text-gray-500, .text-gray-400 { color: var(--pd-fg-muted) !important; }

.border, .border-t, .border-b, .border-2,
.border-gray-200, .border-gray-300 { border-color: var(--pd-border) !important; }

.shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: var(--pd-shadow-card) !important; }

/* ── Inputs & selects ────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
select, textarea {
  background-color: var(--pd-surface) !important;
  color: var(--pd-fg) !important;
  border: 2px solid var(--pd-border) !important;
  border-radius: var(--pd-radius-sm) !important;
  transition: border-color var(--pd-motion-fast), box-shadow var(--pd-motion-fast);
}
/* Normalise the native search-field chrome so it matches the other inputs */
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
input::placeholder, textarea::placeholder { color: var(--pd-fg-muted); opacity: .8; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--pd-primary) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pd-primary) 22%, transparent) !important;
}
.bg-gray-100[readonly] { opacity: .75; }

/* ── Hero ────────────────────────────────────────────────────────────── */
.pd-hero {
  background:
    radial-gradient(1100px 380px at 50% -140px, color-mix(in srgb, var(--pd-accent) 26%, transparent), transparent 70%),
    linear-gradient(135deg, var(--pd-primary) 0%, #2360A6 46%, #1B3E86 100%) !important;
  position: relative;
  overflow: hidden;
}
.pd-hero::after { /* subtle pokéball watermark */
  content: "";
  position: absolute; right: -80px; top: -80px; width: 320px; height: 320px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, transparent 0 46px, rgba(255,255,255,.14) 46px 54px, transparent 54px),
    linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10));
  -webkit-mask: linear-gradient(#000, #000);
  opacity: .5; pointer-events: none;
}
.pd-hero h1 { text-shadow: 0 2px 0 rgba(0,0,0,.12); }

/* ── Navigation ──────────────────────────────────────────────────────── */
nav.sticky {
  background-color: color-mix(in srgb, var(--pd-surface) 88%, transparent) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--pd-border);
  box-shadow: 0 2px 14px rgba(16, 24, 40, .06) !important;
}

/* ── Stat tiles ──────────────────────────────────────────────────────── */
#stats .grid > div {
  background: var(--pd-surface);
  border: 2px solid var(--pd-border);
  border-radius: var(--pd-radius-md);
  padding: .75rem .5rem;
  transition: transform var(--pd-motion-fast), border-color var(--pd-motion-fast);
}
#stats .grid > div:hover { transform: translateY(-2px); border-color: var(--pd-border-strong); }

/* ── Buttons: tactile "press" affordance (Duolingo) ──────────────────── */
button, .btn { border-radius: var(--pd-radius-sm); font-weight: 700; }
#loginBtn, #loginBtn-mobile, #collectionsBtn, #collectionsBtn-mobile,
#accountSave, #cardViewBtn, #listViewBtn, .pending-delivery-toggle,
#backToCollectionBtn, #authSubmit, #validateCollectionBtn {
  border-radius: var(--pd-radius-sm) !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .18);
  transition: transform var(--pd-motion-fast), box-shadow var(--pd-motion-fast), background-color var(--pd-motion-fast);
}
#loginBtn:active, #loginBtn-mobile:active, #collectionsBtn:active, #collectionsBtn-mobile:active,
#accountSave:active, #cardViewBtn:active, #listViewBtn:active, .pending-delivery-toggle:active,
#backToCollectionBtn:active, #authSubmit:active, #validateCollectionBtn:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 rgba(0, 0, 0, .18);
}

/* ── Pokémon card tiles (bento modular) ──────────────────────────────── */
#pokemonList { gap: 1.25rem; }
#pokemonList > div {
  background: var(--pd-surface) !important;
  border: 2px solid var(--pd-border);
  border-radius: var(--pd-radius-lg) !important;
  box-shadow: var(--pd-shadow-card) !important;
  transition: transform var(--pd-motion-base) var(--pd-ease-spring), box-shadow var(--pd-motion-base), border-color var(--pd-motion-base);
}
#pokemonList > div:hover {
  transform: translateY(-4px);
  box-shadow: var(--pd-shadow-raise) !important;
  border-color: var(--pd-border-strong);
}
#pokemonList > div.is-owned { border-color: var(--pd-owned-fill); box-shadow: 0 0 0 2px var(--pd-owned-fill), var(--pd-shadow-card) !important; }
#pokemonList > div.is-pending { border-color: var(--pd-pending-fill); box-shadow: 0 0 0 2px var(--pd-pending-fill), var(--pd-shadow-card) !important; }
#pokemonList > div .card-image { background: var(--pd-surface-2) !important; overflow: visible; perspective: 750px; }

/* ── Holographic card (grid) ─────────────────────────────────────────────
   The .pd-holo wrapper shrinks to the card image (natural ratio, rounded), then
   tilts toward the pointer with a rainbow foil + glare that track the cursor —
   driven by CSS vars set in js/holo.js. */
#pokemonList .card-image .pd-holo {
  --px: 50%; --py: 50%; --holo: 0;
  position: relative;
  display: inline-flex;
  height: 100%;
  border-radius: 4.6% / 3.3%;
  transform-style: preserve-3d;
  transition: transform .5s var(--pd-ease-spring);   /* JS sets the tilt transform */
  will-change: transform;
}
#pokemonList .card-image .pd-holo.is-holo-active { transition: transform .05s ease-out; }
#pokemonList .card-image .pd-holo img.carousel-image {
  display: block;
  width: auto !important;
  height: 100% !important;
  max-width: 100%;
  aspect-ratio: auto 600 / 825;   /* each card's own ratio; 600/825 is pre-load fallback */
  object-fit: contain;
  border-radius: 4.6% / 3.3%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .30);
}
/* Soft rainbow sheen that follows the pointer (no lines, no auto-motion) */
#pokemonList .card-image .pd-holo::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(70% 70% at var(--px) var(--py),
    rgba(255,150,205,.45), rgba(150,225,255,.36) 42%, rgba(200,160,255,.28) 68%, transparent 84%);
  mix-blend-mode: screen;
  opacity: calc(var(--holo) * .8);
  transition: opacity .3s;
}
/* Glare highlight that follows the pointer */
#pokemonList .card-image .pd-holo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--px) var(--py), rgba(255,255,255,.6), rgba(255,255,255,0) 45%);
  mix-blend-mode: overlay;
  opacity: var(--holo);
  transition: opacity .3s;
}
/* Lightbox: make the wrapper card-shaped so the enlarged card fills it with no
   letterbox — then the rounded corners land on the card, not the empty box.
   Width is the smaller of 92vw and the card's width at ~84vh tall. */
#lightbox .lightbox-image-wrapper {
  width: min(92vw, 61vh) !important;
  height: auto !important;
  max-width: 620px !important;
  max-height: none !important;
  aspect-ratio: 600 / 825;   /* pre-load fallback; JS sets the shown card's real ratio */
}
#lightbox .lightbox-image,
#lightbox .lightbox-card-back { border-radius: 4.6% / 3.3%; }
/* Subtle holographic sheen on the FRONT face only (backface-visibility hides it
   when the card flips). No `filter` here — a filter flattens transform-style:
   preserve-3d and would hide the card back. The sheen's angle tracks the spin
   (--spin set in js/ui.js) so it glides gently as the card rotates. */
#lightbox .lightbox-image-wrapper::after {
  content: ""; position: absolute; inset: 0; border-radius: 4.6% / 3.3%;
  transform: translateZ(1px); backface-visibility: hidden; pointer-events: none;
  background: linear-gradient(100deg,
    transparent 34%,
    rgba(255,150,205,.22) 44%,
    rgba(150,225,255,.20) 50%,
    rgba(200,160,255,.20) 56%,
    transparent 66%);
  background-size: 260% 100%;
  background-position: calc(50% + var(--spin, 0) * 0.35%) 0;
  mix-blend-mode: screen;
  opacity: .8;
}

/* State badges → pill + icon */
#pokemonList .rounded-full { border-radius: var(--pd-pill) !important; }

/* ── Regional progress bars (see also regional-progress.css) ─────────── */
.regional-progress-bar, .progress-bar-track, .progress-track {
  background: var(--pd-surface-2) !important;
  border-radius: var(--pd-pill) !important;
  overflow: hidden;
}
.progress-bar-fill, .progress-fill {
  background: linear-gradient(90deg, var(--pd-primary), color-mix(in srgb, var(--pd-primary) 60%, var(--pd-owned-fill))) !important;
  border-radius: var(--pd-pill) !important;
  transition: width var(--pd-motion-base) var(--pd-ease-spring) !important;
}

/* ── Modals ──────────────────────────────────────────────────────────── */
#authModal > div, #accountModal > div, #validationResultsModal > div {
  border-radius: var(--pd-radius-lg) !important;
  box-shadow: var(--pd-shadow-raise) !important;
  border: 1px solid var(--pd-border);
}

/* ── Dark-mode toggle button ─────────────────────────────────────────── */
.pd-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--pd-pill);
  background: var(--pd-surface-2); color: var(--pd-fg);
  border: 2px solid var(--pd-border); cursor: pointer;
  transition: transform var(--pd-motion-fast), background-color var(--pd-motion-fast);
}
.pd-theme-toggle:hover { transform: translateY(-1px) rotate(-8deg); background: var(--pd-surface); }
.pd-theme-toggle .pd-sun { display: none; }
.pd-theme-toggle .pd-moon { display: block; }
:root[data-theme="dark"] .pd-theme-toggle .pd-sun { display: block; }
:root[data-theme="dark"] .pd-theme-toggle .pd-moon { display: none; }

/* ── Regional progress (circles) — retheme with tokens for light + dark ── */
.regional-progress-container {
  background: var(--pd-surface) !important;
  border-bottom: 1px solid var(--pd-border) !important;
  box-shadow: none !important;
}
.regional-arrow {
  background-color: var(--pd-surface-2) !important;
  border: 1px solid var(--pd-border) !important;
  color: var(--pd-fg-muted) !important;
}
.regional-arrow:hover:not(:disabled) {
  background-color: var(--pd-primary-soft) !important;
  border-color: var(--pd-primary) !important;
  color: var(--pd-primary) !important;
}
.regional-name { color: var(--pd-fg) !important; }
.regional-stats { color: var(--pd-fg-muted) !important; }
.regional-item.active { background-color: var(--pd-primary-soft) !important; }
.regional-item.active .regional-name,
.regional-item.active .regional-stats { color: var(--pd-primary-soft-fg) !important; }
.progress-circle-bg { stroke: var(--pd-surface-2) !important; }
.progress-circle-fill { stroke: var(--pd-primary) !important; }

/* ── Scroll-to-top ───────────────────────────────────────────────────── */
#scrollToTop { border-radius: var(--pd-pill) !important; box-shadow: var(--pd-shadow-raise) !important; }

/* ── Ad slots (manual, deliberate, non-intrusive) ────────────────────── */
.pd-ad {
  max-width: 728px;
  margin: 1.75rem auto;
  padding: 0 1rem;
  text-align: center;
  min-height: 110px;            /* reserve space so ad load doesn't shift layout (CLS) */
  overflow: hidden;             /* never let an ad push the page sideways */
}
.pd-ad-label {
  display: block;
  font-size: .62rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--pd-fg-muted);
  opacity: .7;
  margin-bottom: .3rem;
}
.pd-ad ins { display: block; min-height: 90px; }
/* If AdSense returns no ad for a slot, collapse the whole block — no empty
   "Advertisement" band. (Falls back to the reserved space on older browsers.) */
.pd-ad:has(ins[data-ad-status="unfilled"]) { display: none; }

/* ── Accessibility: honor reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  #pokemonList > div:hover { transform: none; }
}