/* Pokémon theme: warm paper over painted landscapes, bright type colours,
   rounded friendly shapes. Carries over the learnpokemon.fun look. */
:root {
  --bg: #fff8f2;
  --bg2: #ffe9d6;
  --ink: #2b1548;
  --muted: #6b5684;
  --surface: rgba(255, 250, 242, 0.84);
  --toggle-bg: rgba(255, 250, 242, 0.7);
  --surface-solid: #fffaf2;
  --edge: rgba(255, 255, 255, 0.78);
  --line: rgba(43, 21, 72, 0.1);
  --accent: #ff3d78;
  --accent-2: #2f6bff;
  --accent-ink: #fff;
  --display: "Source Serif 4", Georgia, serif;
  --sans: "Outfit", system-ui, sans-serif;
  --shadow: 0 18px 44px rgba(43, 21, 72, 0.18);
  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 8px 22px rgba(43, 21, 72, 0.1);
  --veil: linear-gradient(180deg, rgba(255, 248, 242, 0.1) 0%, rgba(255, 248, 242, 0.35) 55%, rgba(255, 248, 242, 0.82) 100%);
  --card-back: radial-gradient(circle at 50% 50%, #fff 0 9%, #222 10% 13%, transparent 14%), linear-gradient(#e3350d 0 48%, #222 48% 52%, #f4f4f4 52%);
  color-scheme: light;
}
h1, h2, h3 { font-weight: 560; letter-spacing: -0.03em; }
h1 { line-height: 0.98; }
.kicker, .focus-kicker, .meta-row dt { color: #b13a62; }
.scene { background: radial-gradient(880px 520px at -8% -12%, #ffe14a 0%, transparent 56%), radial-gradient(820px 500px at 110% -8%, #7ec4ff 0%, transparent 54%), radial-gradient(720px 460px at 96% 108%, #ff7a45 0%, transparent 52%), radial-gradient(560px 380px at 4% 100%, #6dffb0 0%, transparent 50%), #fff8f2; }
.scene::after { content: ""; position: absolute; inset: 0; opacity: 0.1; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>"); }
.brand-game { background: linear-gradient(#ee1515 0 50%, #fff 50%); color: #2b1548; box-shadow: inset 0 0 0 2px #2b1548; text-shadow: 0 1px 0 #fff; }
.btn-primary { background: linear-gradient(135deg, #ff3d78, #ff7a45); }
.topnav a[aria-current] { box-shadow: inset 0 -3px 0 #ff3d78; }
.tl-headline { color: #2b1548; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.6); }
/* Same Cinzel capitals as the Magic timeline headline; Japanese keeps the default face. */
.tl-headline:not(:lang(ja)) { font-family: "Cinzel", "Times New Roman", serif; font-weight: 700; letter-spacing: 0.02em; line-height: 1.08; }
.tl-sub:not(:lang(ja)) { font-family: "EB Garamond", Georgia, serif; font-size: 18.5px; letter-spacing: 0.005em; color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 248, 242, 0.9); }

/* Timeline packs and zodiac chapters */
.carousel-slot.is-center .pack-art img { filter: drop-shadow(0 22px 20px rgba(20, 8, 30, 0.42)); }
.pack-plaque { background: linear-gradient(160deg, #fffaf2, #ffe9d6); border: 3px solid #fff; }
.chapter-card { background: rgba(255, 252, 248, 0.9); }
.chapter-card img { width: 116px; height: 99px; }
.chapter-card em:last-child { font-family: var(--jp); font-size: 1.1rem; color: #3a2410; }
.k-media .pack-art img { border-radius: 12px; height: auto; max-height: 320px; object-fit: cover; aspect-ratio: 2 / 3; }

/* Set pages take each set's own palette (written by the build) */
.set-page { --accent: var(--pv-accent, #ff3d78); color: var(--pv-ink, var(--ink)); }
.set-page .set-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--pv-bg, #fff) 88%, transparent), color-mix(in srgb, var(--pv-bg2, #ffe) 80%, transparent)); }
.set-page .kicker, .set-page .meta-row dt { color: var(--pv-accent2, #b13a62); }
.set-page .lede { color: var(--pv-muted, var(--muted)); }
.set-page .tabs button[aria-selected="true"], .set-page .btn-primary { background: var(--pv-accent); color: #fff; }
.set-page .battle { background: radial-gradient(120% 90% at 50% 120%, color-mix(in srgb, var(--pv-accent3) 45%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--pv-bg2) 70%, transparent), color-mix(in srgb, var(--pv-bg) 70%, transparent)); }
.texture-dots .set-hero { background-image: radial-gradient(color-mix(in srgb, var(--pv-accent) 14%, transparent) 1.4px, transparent 1.6px), linear-gradient(135deg, color-mix(in srgb, var(--pv-bg) 88%, transparent), color-mix(in srgb, var(--pv-bg2) 80%, transparent)); background-size: 16px 16px, auto; }
.texture-diag .set-hero { background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--pv-accent) 8%, transparent) 0 6px, transparent 6px 16px), linear-gradient(135deg, color-mix(in srgb, var(--pv-bg) 88%, transparent), color-mix(in srgb, var(--pv-bg2) 80%, transparent)); }
.texture-waves .set-hero { background-image: radial-gradient(circle at 50% 120%, transparent 30%, color-mix(in srgb, var(--pv-accent) 9%, transparent) 31% 34%, transparent 35%), linear-gradient(135deg, color-mix(in srgb, var(--pv-bg) 88%, transparent), color-mix(in srgb, var(--pv-bg2) 80%, transparent)); background-size: 40px 20px, auto; }
.texture-grid .set-hero { background-image: linear-gradient(color-mix(in srgb, var(--pv-accent) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--pv-accent) 8%, transparent) 1px, transparent 1px), linear-gradient(135deg, color-mix(in srgb, var(--pv-bg) 88%, transparent), color-mix(in srgb, var(--pv-bg2) 80%, transparent)); background-size: 22px 22px, 22px 22px, auto; }
.texture-rings .set-hero { background-image: repeating-radial-gradient(circle at 85% 20%, transparent 0 14px, color-mix(in srgb, var(--pv-accent) 9%, transparent) 15px 17px), linear-gradient(135deg, color-mix(in srgb, var(--pv-bg) 88%, transparent), color-mix(in srgb, var(--pv-bg2) 80%, transparent)); }
.texture-confetti .set-hero { background-image: radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--pv-accent3) 25%, transparent) 2px, transparent 3px), radial-gradient(circle at 70% 60%, color-mix(in srgb, var(--pv-accent) 22%, transparent) 2.5px, transparent 3.5px), linear-gradient(135deg, color-mix(in srgb, var(--pv-bg) 88%, transparent), color-mix(in srgb, var(--pv-bg2) 80%, transparent)); background-size: 34px 34px, 46px 46px, auto; }

/* Cards: warm paper tiles */
.card-tile { background: rgba(255, 252, 248, 0.92); border-color: rgba(255, 255, 255, 0.9); box-shadow: var(--shadow-soft); }
.card-modal { background: #fffaf2; }
.cm-stage { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--tc) 45%, transparent), transparent 70%), linear-gradient(180deg, #fff3e6, #ffe9d6); }
.card-modal::backdrop { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tc, #000) 35%, rgba(43, 21, 72, 0.45)), rgba(43, 21, 72, 0.78)); }
.rank { background: #2b1548; }
.footer { background: rgba(255, 250, 242, 0.92); }

/* Loading: a spinning Poké Ball */
.skel-pack { border-radius: 50%; width: 64px; height: 64px; background: linear-gradient(#ee1515 0 46%, #2b1548 46% 54%, #fff 54%); animation: pokespin 1s linear infinite; box-shadow: inset 0 0 0 3px #2b1548; }
.skel-rail { gap: 18px; }
@keyframes pokespin { to { transform: rotate(360deg); } }

/* How to play: Pokémon card back for the board */
.htp-board .zone { border-color: rgba(43, 21, 72, 0.25); }
.lore-page .prose-block, .world-page .prose-block { background: rgba(255, 252, 248, 0.88); }
.topbar { background: rgba(255, 250, 242, 0.55); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
.topnav a { color: #4a3466; }
.brand-name b { color: #e8285f; }

/* Detail view: the species section (stats, matchups, evolution) */
.species h4 { margin: 18px 0 6px; font-size: 0.95rem; }
.species h4 small { font-weight: 600; margin-left: 6px; }
.species-row img { width: 140px; height: 140px; }
.species .badge { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; background: linear-gradient(90deg, #f6d365, #fda085); color: #2a1a05; }
.matchups dd { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.matchups small { font-weight: 700; margin: 0 4px 0 -2px; }
.evo-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.evo-stage { display: flex; flex-direction: column; gap: 4px; }
.evo-mon { display: grid; justify-items: center; gap: 2px; padding: 6px 8px; border-radius: 14px; border: 1px solid var(--line); color: inherit; text-decoration: none; font-size: 0.8rem; font-weight: 600; transition: transform 0.2s; }
.evo-mon:hover { transform: translateY(-2px); }
.evo-mon.is-here { border-color: var(--tc, var(--accent)); box-shadow: 0 0 0 1px var(--tc, var(--accent)); }
.evo-mon img { width: 64px; height: 64px; object-fit: contain; }
.evo-arrow { font-size: 1.2rem; color: var(--muted); }