@font-face {
  font-family: "Pixel";
  src: url("/assets/pixel.woff2") format("woff2");
  font-display: swap;
}

:root {
  --paper: #f5f2e8;
  --forest: #304d38;
  --muted: #5c6857;
  --sage: #e0e8d6;
  --gold: #b58c4d;
  --rule: rgb(48 77 56 / .14);
  --hero: #1d4a2b;
  --hero-deep: #123420;
  --ivory: #f5f2e8;
  --stage: #0e1a16;
  --serif: "New York", ui-serif, "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --pixel: "Pixel", var(--mono);
  color-scheme: light;
}

:root[data-theme="night"] {
  --paper: #111612;
  --forest: #e3ebd6;
  --muted: #a6b5a0;
  --sage: #2b3a2e;
  --gold: #d1ad6e;
  --rule: rgb(227 235 214 / .12);
  --hero: #12301d;
  --hero-deep: #0a1d11;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) {
    --paper: #111612;
    --forest: #e3ebd6;
    --muted: #a6b5a0;
    --sage: #2b3a2e;
    --gold: #d1ad6e;
    --rule: rgb(227 235 214 / .12);
    --hero: #12301d;
    --hero-deep: #0a1d11;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--forest);
  font: 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  transition: background .4s, color .4s;
}
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.02em; line-height: 1.08; margin: 0; }
.defs { position: absolute; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wordmark { font: 400 34px/1 var(--serif); letter-spacing: -.055em; text-decoration: none; }

/* Header */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 20;
  display: flex; align-items: center; gap: 28px;
  padding: 16px clamp(20px, 4vw, 48px);
  color: var(--ivory);
  transition: background .3s, color .3s, box-shadow .3s;
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  color: var(--forest);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 var(--rule);
}
.site-header nav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; font-weight: 500; }
.site-header nav a { text-decoration: none; opacity: .82; }
.site-header nav a:hover { opacity: 1; }
.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid currentColor; background: transparent; opacity: .8;
  display: grid; place-items: center;
}
.theme-toggle .sun { width: 14px; height: 14px; border-radius: 50%; background: currentColor; box-shadow: inset -5px -3px 0 0 transparent; transition: box-shadow .3s, background .3s; }
:root[data-night] .theme-toggle .sun { background: transparent; box-shadow: inset -5px -3px 0 0 currentColor; }

/* Hero */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(100svh, 920px);
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 40px;
  padding: 120px clamp(20px, 6vw, 88px) 80px;
  background:
    radial-gradient(ellipse 80% 70% at 20% 30%, color-mix(in srgb, var(--hero) 70%, #3c6a42), transparent 70%),
    linear-gradient(160deg, var(--hero), var(--hero-deep));
  color: var(--ivory);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.holo-arc {
  position: absolute; z-index: -1; pointer-events: none;
  width: 1200px; aspect-ratio: 1; right: -640px; top: -560px; border-radius: 50%;
  background: linear-gradient(var(--arc, 200deg), #ffe9a8 30%, #ffd36e 40%, #8affc1 50%, #63c8ff 58%, #b996ff 66%, #ff6fb1 74%, #ffd36e 84%);
  -webkit-mask: radial-gradient(circle, transparent 63%, #000 65.5%, #000 66.5%, transparent 69%);
  mask: radial-gradient(circle, transparent 63%, #000 65.5%, #000 66.5%, transparent 69%);
  filter: blur(9px); opacity: .7;
  animation: arc 18s ease-in-out infinite alternate;
}
@property --arc { syntax: "<angle>"; inherits: false; initial-value: 200deg; }
@keyframes arc { to { --arc: 250deg; } }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; opacity: .85; margin: 0 0 22px; }
.ball { width: 18px; height: 18px; color: #1b1b1b; }
.hero h1 { font-size: clamp(44px, 6.4vw, 86px); font-weight: 400; letter-spacing: -.035em; max-width: 11ch; }
.lede { font-size: clamp(17px, 1.5vw, 20px); max-width: 34em; opacity: .86; margin: 26px 0 34px; }

.textbox {
  position: relative; max-width: 440px;
  background: #fbfbf4; color: #1e1e1e;
  border: 4px solid #1e1e1e; border-radius: 10px;
  box-shadow: inset 0 0 0 3px #fbfbf4, inset 0 0 0 6px #6d7b8f, 0 14px 30px rgb(0 0 0 / .28);
  padding: 20px 26px 22px;
}
.textbox p { margin: 0; min-height: 1.9em; }
.pixel { font: 13px/1.9 var(--pixel); letter-spacing: .02em; text-transform: uppercase; }
.caret {
  position: absolute; right: 18px; bottom: 12px; width: 0; height: 0;
  border: 6px solid transparent; border-top: 8px solid #1e1e1e; border-bottom: 0;
  animation: blink 1s steps(2, jump-none) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.fan { position: relative; height: clamp(360px, 46vw, 560px); perspective: 1400px; --rx: 0deg; --ry: 0deg; }
.fan-inner { position: absolute; inset: 0; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .25s ease-out; }
.fan .tcg {
  position: absolute; left: 50%; top: 50%;
  width: clamp(170px, 18vw, 250px);
  transform: translate(-50%, -50%) translateX(calc(var(--i) * 46%)) translateY(calc(var(--i) * var(--i) * 4%)) rotate(calc(var(--i) * 8deg));
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .4s;
  z-index: calc(10 - var(--i) * var(--i));
  box-shadow: 0 30px 60px rgb(0 0 0 / .4);
}
/* Keep overlap and hit areas stable while the shared fan tilts. */

/* Trading-card surfaces */
.tcg {
  --a: #6aa84f; --b: #2f6a2a; --mx: 50%; --my: 50%; --o: 0;
  position: relative; aspect-ratio: 63 / 88; border-radius: 4.6% / 3.3%;
  background: #f2cc38; padding: 5.2%;
  container-type: inline-size; overflow: hidden; isolation: isolate;
  font-family: var(--sans); color: #1d1d1a;
}
.tcg[data-type="fire"] { --a: #ee7a43; --b: #9c2f1d; }
.tcg[data-type="water"] { --a: #5aa6e0; --b: #1d4f8a; }
.tcg[data-type="lightning"] { --a: #f5d652; --b: #b98a12; }
.tcg[data-type="psychic"] { --a: #b57fc4; --b: #5b2d68; }
.tcg[data-type="grass"] { --a: #79b85c; --b: #2f6a2a; }
.tcg.holo { background: linear-gradient(135deg, #e6e6ea, #a9adb8 40%, #f4f4f6 60%, #9ea3ae); }
.tcg-inner {
  height: 100%; border-radius: 3%; display: flex; flex-direction: column; gap: 3.4cqw;
  padding: 4cqw 4.5cqw;
  background: linear-gradient(170deg, color-mix(in srgb, var(--a) 55%, #fff), color-mix(in srgb, var(--a) 80%, #fff8));
}
.tcg-top { display: flex; align-items: center; gap: 3cqw; font-size: 7.2cqw; font-weight: 700; }
.tcg-top b { font-family: var(--serif); font-weight: 600; font-size: 8.4cqw; letter-spacing: -.02em; }
.tcg-top span { margin-left: auto; font-size: 5.6cqw; color: #b3261e; display: flex; align-items: center; gap: 1.6cqw; }
.tcg-top svg { width: 8.5cqw; height: 8.5cqw; }
.tcg-art {
  position: relative; flex: 0 0 auto; aspect-ratio: 1.36; overflow: hidden;
  border: 1.6cqw solid; border-color: #d8c27a #a5893c #a5893c #d8c27a;
  background:
    radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--a) 40%, #fff) 0 14%, transparent 15%),
    radial-gradient(ellipse 120% 70% at 50% 110%, var(--b), transparent 70%),
    linear-gradient(160deg, var(--a), var(--b));
  display: grid; place-items: center;
}
.tcg-art svg { width: 46cqw; height: 46cqw; filter: drop-shadow(0 2cqw 3cqw rgb(0 0 0 / .3)); }
.tcg-art::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgb(255 255 255 / .05) 3px 4px);
}
.tcg-band { font-size: 4.2cqw; font-style: italic; text-align: center; background: linear-gradient(90deg, #d8c27a, #f3e6b0, #d8c27a); padding: .6cqw 0; margin-top: -1.4cqw; }
.tcg-lines { display: grid; gap: 3cqw; padding-top: 1cqw; }
.tcg-lines i { display: flex; align-items: center; gap: 3cqw; font-style: normal; font-size: 6cqw; font-weight: 700; }
.tcg-lines i::before { content: ""; width: 7cqw; height: 7cqw; border-radius: 50%; background: var(--b); flex: none; }
.tcg-lines i em { margin-left: auto; font-style: normal; font-family: var(--serif); font-size: 7cqw; }
.tcg-lines s { display: block; height: 1.3cqw; background: rgb(0 0 0 / .14); border-radius: 1cqw; text-decoration: none; }
.tcg-lines s:nth-child(odd) { width: 80%; }
.tcg-foot { margin-top: auto; display: flex; justify-content: space-between; font-size: 4cqw; opacity: .75; }
.tcg-foot b { font-family: var(--serif); font-weight: 600; }

.tcg .foil, .tcg .glare { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.tcg .foil {
  z-index: 2; opacity: calc(.18 + var(--o) * .5); mix-blend-mode: color-dodge;
  background:
    repeating-linear-gradient(115deg, #ff7ab8 0%, #ffe37a 7%, #8affc1 14%, #6fd0ff 21%, #c09cff 28%, #ff7ab8 35%);
  background-size: 300% 300%;
  background-position: var(--mx) var(--my);
  transition: opacity .3s;
}
.tcg.vintage .foil { opacity: calc(var(--o) * .35); }
.tcg .glare {
  z-index: 3; mix-blend-mode: overlay; opacity: calc(.25 + var(--o) * .6);
  background: radial-gradient(circle at var(--mx) var(--my), rgb(255 255 255 / .85), transparent 45%);
}

/* The cards themselves are the artwork. Keep the full printing visible. */
.tcg, .tcg.holo { padding: 0; background: transparent; }
.tcg > img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.tcg .foil { opacity: calc(.04 + var(--o) * .22); }
.tcg .glare { opacity: calc(.10 + var(--o) * .33); transition: opacity .3s; }

/* Stats */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 1180px; margin: 0 auto; padding: 46px clamp(20px, 4vw, 48px);
  border-bottom: 1px solid var(--rule);
}
.stats div { padding: 0 20px; border-left: 1px solid var(--rule); }
.stats div:first-child { border-left: 0; padding-left: 0; }
.stats strong { display: block; font: 500 clamp(26px, 3vw, 38px)/1.1 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stats span { font-size: 13px; color: var(--muted); }

/* Sections */
.section-copy { max-width: 520px; }
.kicker { font: 600 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 16px; }
.section-copy h2 { font-size: clamp(36px, 4.6vw, 60px); margin-bottom: 20px; }
.section-copy p { color: var(--muted); margin: 0 0 16px; }
.section-copy em { font-style: normal; color: var(--forest); font-weight: 600; }

.mosaic-section {
  display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 90px); align-items: center;
  max-width: 1280px; margin: 0 auto; padding: clamp(80px, 11vw, 150px) clamp(20px, 4vw, 48px);
}
.mosaic { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.mosaic .tile {
  aspect-ratio: 63 / 88; border-radius: 7px; position: relative; overflow: hidden;
  background: #f2cc38; padding: 6%;
  box-shadow: 0 6px 14px rgb(0 0 0 / .14);
  transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .5s;
}
.mosaic .tile:nth-child(3n) { background: linear-gradient(135deg, #e6e6ea, #a9adb8 40%, #f4f4f6 60%, #9ea3ae); }
.mosaic .tile::before {
  content: ""; position: absolute; inset: 6%; border-radius: 4px;
  background:
    radial-gradient(ellipse 90% 60% at 50% 110%, var(--b), transparent 70%),
    linear-gradient(170deg, var(--a), color-mix(in srgb, var(--a) 60%, var(--b)));
}
.mosaic .tile svg {
  position: absolute; left: 50%; top: 40%; width: 46%; height: auto; aspect-ratio: 1;
  transform: translate(-50%, -50%); filter: drop-shadow(0 3px 4px rgb(0 0 0 / .25));
}
.mosaic .tile::after {
  content: ""; position: absolute; inset: 0; mix-blend-mode: color-dodge; opacity: .25;
  background: linear-gradient(115deg, transparent 30%, #ff7ab8, #ffe37a, #8affc1, #6fd0ff, transparent 70%);
  background-size: 250% 100%; animation: sheen 7s ease-in-out infinite; animation-delay: var(--d, 0s);
}
.mosaic .tile.owned { outline: 2px solid var(--gold); outline-offset: 2px; }
.mosaic .tile.suggested { opacity: .55; }
.mosaic .tile.swap { transform: scale(.86) rotate(-3deg); opacity: .2; }
.mosaic .tile, .mosaic .tile:nth-child(3n) { padding: 0; background: transparent; }
.mosaic .tile::before { display: none; }
.mosaic .tile img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mosaic .tile::after { opacity: .10; }
.mosaic .tile.suggested { opacity: .88; }
.tile-badge { position: absolute; z-index: 2; left: 3px; right: 3px; bottom: 3px; background: #f6f1e5; color: #34533b; border-radius: 2px; text-align: center; font: 600 9px/1.8 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
@keyframes sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

/* Pokédex */
.dex-section {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center;
  max-width: 1280px; margin: 0 auto; padding: clamp(60px, 9vw, 130px) clamp(20px, 4vw, 48px);
  border-top: 1px solid var(--rule);
}
.dex {
  --shell: #b80b1a; --shell-deep: #66020c; --lcd: #c9dbb5; --top: var(--shell);
  justify-self: center; width: min(380px, 100%);
  border-radius: 26px 26px 30px 30px; padding: 22px 22px 26px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--shell) 80%, #fff) 0%, var(--shell) 9%, var(--shell) 85%, var(--shell-deep));
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .25), inset 0 -6px 12px rgb(0 0 0 / .25), 0 30px 60px rgb(60 0 0 / .3);
  transform-origin: left center; transition: transform .45s cubic-bezier(.6, 0, .4, 1), background .3s;
}
.dex.flip { transform: perspective(1200px) rotateY(-88deg); }
.dex[data-region="johto"] { --shell: #b84f47; --shell-deep: #5e211c; --lcd: #dbde7c; --top: #2b2b30; }
.dex[data-region="hoenn"] { --shell: #c9061f; --shell-deep: #6c0210; --lcd: #c3dcc8; }
.dex-top {
  display: flex; align-items: flex-start; gap: 9px; margin: -6px -6px 18px; padding: 6px;
  border-radius: 18px; background: var(--top);
}
.lens {
  width: 62px; height: 62px; border-radius: 50%; margin-right: 10px;
  background: radial-gradient(circle at 30% 30%, #9fe7ff, #1572c4 45%, #062a5e 80%);
  box-shadow: 0 0 0 5px #e9e9ee, 0 0 0 7px rgb(0 0 0 / .3), inset -4px -6px 10px rgb(0 0 0 / .35);
}
.dex[data-region="hoenn"] .lens { border-radius: 50%; width: 52px; height: 52px; background: radial-gradient(circle at 35% 35%, #7fd9ff, #0f5fb0 55%, #04224e); box-shadow: 0 0 0 6px #c9ccd3, 0 0 0 8px rgb(0 0 0 / .3); }
.led { width: 11px; height: 11px; border-radius: 50%; margin-top: 4px; box-shadow: inset -2px -2px 3px rgb(0 0 0 / .35), 0 0 0 1px rgb(0 0 0 / .4); }
.led.r { background: #ff4a4a; } .led.y { background: #ffd23d; } .led.g { background: #4bd36b; }
.dex-screen {
  border-radius: 14px; padding: 12px; background: #d9d9de;
  box-shadow: inset 0 2px 8px rgb(0 0 0 / .35);
}
.lcd-head, .lcd-grid { background: var(--lcd); color: #10261a; transition: background .3s; }
.lcd-head {
  display: flex; justify-content: space-between; align-items: center;
  font: 600 13px var(--mono); letter-spacing: .14em; padding: 12px 14px; border-radius: 8px 8px 0 0;
  border-bottom: 1px solid rgb(16 38 26 / .15);
}
.ball.small { width: 18px; height: 18px; color: #10261a; }
.lcd-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding: 8px; border-radius: 0 0 8px 8px; }
.entry { display: grid; justify-items: center; gap: 6px; padding: 12px 4px; font: 12px var(--mono); color: #10261a; }
.entry svg { width: 40px; height: 40px; color: #10261a; }
.entry.unseen svg { opacity: .22; filter: grayscale(1); }
.entry.unseen span { opacity: .55; }
.entry.caught span::after { content: " ✓"; font-weight: 700; }
.dex-bottom { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.dex-btn { width: 34px; height: 34px; border-radius: 50%; background: #1d3325; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .4); }
.counter { padding: 5px 14px; border-radius: 5px; background: #82ba6b; color: #10261a; font: 600 14px var(--mono); box-shadow: inset 0 1px 3px rgb(0 0 0 / .35); }
.dpad { position: relative; width: 60px; height: 60px; margin-left: auto; }
.dpad i { position: absolute; background: #1d2a22; border-radius: 5px; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .4); }
.dpad i:first-child { inset: 20px 0; } .dpad i:last-child { inset: 0 20px; }
.regions { display: inline-flex; padding: 4px; border-radius: 99px; background: var(--sage); margin-top: 10px; }
.regions button { border: 0; background: transparent; padding: 10px 20px; border-radius: 99px; font-size: 15px; font-weight: 600; color: var(--muted); transition: background .25s, color .25s; }
.regions button[aria-pressed="true"] { background: var(--paper); color: var(--forest); box-shadow: 0 2px 8px rgb(0 0 0 / .1); }

/* Device silhouettes follow the three designs used by the iPhone app. */
.dex { position: relative; border-radius: 14px; }
.dex-flap, .dex-reader { display: none; }
.entry small { font: 10px var(--mono); letter-spacing: -.035em; }
.dex[data-region="johto"], .dex[data-region="hoenn"] { padding-top: 14px; }
.dex[data-region="johto"] { border-radius: 23px; }
.dex[data-region="johto"] .dex-top,
.dex[data-region="hoenn"] .dex-top { display: none; }
.dex[data-region="johto"] .dex-flap,
.dex[data-region="hoenn"] .dex-flap {
  display: block; position: relative; height: 78px; margin: -22px 0 18px;
  border: 2px solid rgb(0 0 0 / .45); border-radius: 14px 14px 5px 5px;
  background: linear-gradient(145deg, var(--shell), var(--shell-deep));
  transform: perspective(600px) rotateX(-18deg); transform-origin: bottom;
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .25);
}
.dex-flap::after {
  content: ""; position: absolute; bottom: -9px; left: -3px; right: -3px; height: 12px;
  border-radius: 8px; background: linear-gradient(#aaa, #444 45%, #d1c2b9 52%, #555);
}
.dex[data-region="johto"] .dex-flap span {
  position: absolute; inset: 17px 26px; background: #24272b; border: 4px solid #17191c;
  border-radius: 5px; box-shadow: inset 0 2px 6px #000;
}
.dex[data-region="johto"] .dex-screen { background: #393b3f; border-radius: 8px; }
.dex[data-region="johto"] .dpad { order: -1; margin: 0 auto 0 0; }
.dex[data-region="johto"] .dex-btn { width: 25px; height: 25px; }
.dex[data-region="hoenn"] { border-radius: 36px; }
.dex[data-region="hoenn"] .dex-flap { border-radius: 38px 38px 8px 8px; height: 90px; }
.dex[data-region="hoenn"] .dex-flap span {
  position: absolute; width: 72px; height: 35px; left: calc(50% - 36px); top: -2px;
  background: var(--paper); border: 2px solid #6c0210; border-top: 0; border-radius: 0 0 50px 50px;
}
.dex[data-region="hoenn"] .dex-flap::before {
  content: ""; position: absolute; width: 23px; height: 14px; bottom: 17px; left: calc(50% - 12px);
  border: 3px solid #18331b; border-radius: 50%; background: linear-gradient(#a7dd78, #438544);
}
.dex[data-region="hoenn"] .dex-screen { border-radius: 23px; padding: 14px; background: #303438; }
.dex[data-region="hoenn"] .dex-reader {
  display: block; flex: 0 0 52px; height: 52px; border-radius: 50%; border: 4px solid #222;
  background: radial-gradient(circle, #7fd9ff 0 14%, #175b93 15% 28%, transparent 29%),
    linear-gradient(transparent 44%, #222 45% 55%, transparent 56%), linear-gradient(#eee, #b5b9bb);
  box-shadow: 0 2px 3px rgb(0 0 0 / .3);
}
.dex[data-region="hoenn"] .dex-btn { width: 22px; height: 22px; background: #66a94c; border: 3px solid #253129; }
.dex[data-region="hoenn"] .dpad { display: none; }
.dex[data-region="hoenn"] .counter { margin-left: auto; padding: 7px 9px; background: #d7ded6; }

/* Showcase */
.showcase {
  --tint: #96632e;
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 40px;
  padding: clamp(80px, 10vw, 140px) clamp(20px, 6vw, 88px);
  background: var(--stage); color: var(--ivory);
}
.showcase .section-copy p { color: #b5bdae; }
.atmosphere {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 60% at 65% 45%, color-mix(in srgb, var(--tint) 45%, transparent), transparent 70%),
    radial-gradient(ellipse 40% 50% at 10% 90%, #163d3655, transparent 70%);
  transition: background 1s;
}
.stage { position: relative; height: clamp(380px, 42vw, 540px); perspective: 1200px; }
.slot {
  position: absolute; left: 50%; top: 50%; width: clamp(170px, 19vw, 250px);
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .7s, filter .7s;
}
.slot[data-pos="0"] { transform: translate(-50%, -50%); z-index: 3; }
.slot[data-pos="-1"] { transform: translate(-125%, -50%) scale(.78) rotateY(22deg); opacity: .55; filter: blur(1px) brightness(.7); z-index: 1; }
.slot[data-pos="1"] { transform: translate(25%, -50%) scale(.78) rotateY(-22deg); opacity: .55; filter: blur(1px) brightness(.7); z-index: 1; }
.slot > * { animation: drift 8s ease-in-out infinite; box-shadow: 10px 30px 50px rgb(0 0 0 / .5); }
.slot:nth-child(2) > * { animation-delay: -3s; } .slot:nth-child(3) > * { animation-delay: -5s; }
@keyframes drift { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(6px); } }
.slab {
  padding: 10px; border-radius: 16px;
  background: linear-gradient(125deg, rgb(255 255 255 / .22), rgb(255 255 255 / .05));
  border: 1px solid rgb(255 255 255 / .45);
  backdrop-filter: blur(2px);
}
.slab-label {
  display: flex; align-items: center; gap: 6px; margin-bottom: 9px; padding: 7px 9px;
  background: #f7f5ef; color: #232520; border: 2px solid #ad4240; border-radius: 4px;
  font: 700 9px/1.25 var(--sans); letter-spacing: .04em;
}
.slab-label small { font-weight: 500; letter-spacing: 0; }
.slab-label b { margin-left: auto; text-align: center; font-size: 11px; white-space: nowrap; }
.stage-nav { position: absolute; right: clamp(20px, 6vw, 88px); bottom: 36px; display: flex; gap: 10px; }
.stage-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .2); background: rgb(255 255 255 / .05); font-size: 24px; line-height: 1; }
.stage-nav button:hover { background: rgb(255 255 255 / .12); }

/* Big card features */
.moves-section { padding: clamp(80px, 11vw, 150px) clamp(16px, 4vw, 48px); }
.big-card {
  --mx: 50%; --my: 50%;
  position: relative; max-width: 820px; margin: 0 auto; overflow: hidden;
  border-radius: 30px; padding: clamp(14px, 2.4vw, 26px);
  background: #f2cc38; color: #1d1d1a;
  box-shadow: 0 40px 80px rgb(30 40 20 / .22), 0 2px 0 rgb(255 255 255 / .5) inset;
}
.big-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .22;
  background: radial-gradient(circle at var(--mx) var(--my), #fff6, transparent 40%),
    repeating-linear-gradient(115deg, #ff7ab8 0%, #ffe37a 6%, #8affc1 12%, #6fd0ff 18%, #c09cff 24%, #ff7ab8 30%);
  background-size: 100% 100%, 400% 400%;
  background-position: 0 0, var(--mx) var(--my);
}
.big-card > * { position: relative; }
.big-card-head, .dex-entry, .moves, .big-card-foot { background: linear-gradient(175deg, #f4f0e2, #e5dfca); }
.big-card-head { display: flex; align-items: center; gap: 14px; padding: 18px 26px 10px; border-radius: 16px 16px 0 0; }
.stage-tag { font: italic 600 13px var(--sans); background: linear-gradient(90deg, #c9ccd3, #f2f3f6); padding: 3px 12px; border-radius: 99px; border: 1px solid #9ea3ae; }
.big-card-head h2 { font: 400 clamp(40px, 6vw, 60px)/1 var(--serif); letter-spacing: -.05em; }
.hp { margin-left: auto; font-size: 14px; font-weight: 700; color: #b3261e; }
.hp b { font: 600 30px var(--serif); }
.big-card-head .energy { width: 40px; height: 40px; }
.dex-entry {
  margin: 0; padding: 10px 26px 14px; font-size: 14px; font-style: italic; color: #4c4a3f;
  border-bottom: 1px solid rgb(0 0 0 / .12);
}
.moves { list-style: none; margin: 0; padding: 6px 26px; }
.moves li { display: grid; grid-template-columns: 90px 1fr auto; gap: 18px; align-items: center; padding: 22px 0; border-bottom: 1px solid rgb(0 0 0 / .12); }
.moves li:last-child { border-bottom: 0; }
.cost { display: flex; gap: 4px; }
.cost svg { width: 32px; height: 32px; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .3)); }
.moves h3 { font-size: 26px; font-weight: 600; margin-bottom: 4px; }
.moves p { margin: 0; font-size: 15px; color: #4c4a3f; }
.dmg { font: 500 30px var(--serif); min-width: 60px; text-align: right; }
.big-card-foot {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 14px 26px 20px; border-radius: 0 0 16px 16px; border-top: 2px solid rgb(0 0 0 / .18);
}
.big-card-foot span { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6c6a5d; }
.big-card-foot b { font: 500 16px var(--serif); }

/* Principles */
.principles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px);
  max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px) clamp(80px, 10vw, 130px);
}
.principles h3 { font-size: 24px; margin-bottom: 10px; }
.principles p { margin: 0; color: var(--muted); font-size: 16px; }
.principles div { border-top: 1px solid var(--rule); padding-top: 22px; }

/* Beta band — vintage icon colors */
.beta { padding: 0 clamp(16px, 4vw, 48px) clamp(60px, 8vw, 100px); }
.beta-inner {
  max-width: 1180px; margin: 0 auto; border-radius: 26px; border: clamp(10px, 1.4vw, 16px) solid #f6c82f;
  background: #1c3fae; color: #fbf1c9;
  display: flex; align-items: center; gap: clamp(24px, 5vw, 70px);
  padding: clamp(36px, 6vw, 70px) clamp(28px, 6vw, 80px);
  box-shadow: 0 30px 60px rgb(28 63 174 / .25);
}
.wordmark.big { font-size: clamp(70px, 11vw, 150px); letter-spacing: -.06em; flex: none; }
.beta.evolving .wordmark.big { animation: evolve 2.4s ease-in-out 1; }
@keyframes evolve {
  0%, 100% { filter: none; }
  10%, 30%, 50%, 70% { filter: brightness(6) saturate(0); }
  20%, 40%, 60% { filter: none; }
}
.beta h2 { font: 15px/1.9 var(--pixel); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 16px; }
.beta p { margin: 0; font-size: clamp(18px, 2vw, 24px); font-family: var(--serif); }

/* Footer */
.site-footer {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  max-width: 1180px; margin: 0 auto; padding: 30px clamp(20px, 4vw, 48px) 50px;
  border-top: 1px solid var(--rule); color: var(--muted);
}
.site-footer .wordmark { color: var(--forest); font-size: 28px; }
.site-footer p { margin: 0; font-family: var(--serif); }
.site-footer small { margin-left: auto; max-width: 380px; font-size: 12px; line-height: 1.5; }

/* Responsive */
@media (max-width: 900px) {
  .site-header nav { display: none; }
  .theme-toggle { margin-left: auto; }
  .hero, .mosaic-section, .dex-section, .showcase { grid-template-columns: 1fr; }
  .hero { padding-top: 110px; text-align: left; }
  .fan { height: 340px; margin-top: 10px; }
  .fan .tcg { width: 160px; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .stats div:nth-child(3) { border-left: 0; padding-left: 0; }
  .mosaic { grid-template-columns: repeat(4, 1fr); }
  .dex-section .dex { order: 2; }
  .stage { height: 380px; }
  .stage-nav { position: static; justify-content: center; }
  .principles { grid-template-columns: 1fr; }
  .beta-inner { flex-direction: column; align-items: flex-start; }
  .site-footer small { margin-left: 0; }
}
@media (max-width: 560px) {
  .hero { padding-top: 96px; }
  .hero .textbox { display: none; }
  .fan { height: 285px; margin-top: -8px; }
  .moves li { grid-template-columns: 1fr auto; }
  .moves .cost { grid-column: 1 / -1; }
  .big-card-head { padding: 16px 18px 8px; gap: 10px; }
  .big-card-head .energy { display: none; }
  .dex-entry, .moves, .big-card-foot { padding-left: 18px; padding-right: 18px; }
  .big-card-foot { grid-template-columns: 1fr; }
  .textbox .pixel { font-size: 11px; }
  .fan .tcg { width: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* A small, usable taste of Folio. */
.text-link { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding: 6px 0; }
.hero-link { color: var(--ivory); margin-top: 12px; }
.holo-arc { opacity: .24; animation: none; }
.hero::before { opacity: .1; }
.stats { grid-template-columns: repeat(3, 1fr); }
.stats strong { font: 500 clamp(19px, 2vw, 26px) var(--serif); }
.demo-note { font-size: 13px; line-height: 1.6; color: var(--muted); }
.mosaic-demo { min-width: 0; }
.demo-controls, .demo-sorts, .app-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.demo-controls { background: var(--sage); padding: 5px; border-radius: 16px; }
.demo-controls button { flex: 1; }
.demo-controls button, .demo-sorts button, .app-tabs button { border: 0; border-radius: 11px; padding: 11px 14px; background: transparent; color: var(--muted); font-size: 14px; min-height: 44px; }
.demo-controls button[aria-pressed="true"] { background: var(--paper); color: var(--forest); box-shadow: 0 2px 8px #0001; }
.demo-sorts { margin-top: 12px; }
.demo-sorts button[aria-pressed="true"], .app-tabs button[aria-pressed="true"] { background: var(--forest); color: var(--paper); }
.mosaic { grid-template-columns: repeat(4, 1fr); gap: 12px; min-height: 320px; align-content: start; }
.mosaic .tile { border: 0; transition: none; width: 100%; }
.mosaic .tile:first-child { grid-column: span 2; grid-row: span 2; }
.mosaic .tile::after { display: none; }
.mosaic .tile img { height: 100%; object-fit: contain; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
#card-detail { border: 1px solid var(--rule); border-radius: 24px; padding: 28px; width: min(760px, 92vw); max-height: 90dvh; overflow: auto; background: var(--paper); color: var(--forest); }
#card-detail[open] { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 30px; }
#card-detail::backdrop { background: #07170fbc; backdrop-filter: blur(8px); }
#detail-art { width: 100%; height: auto; max-height: 70dvh; object-fit: contain; border-radius: 12px; }
#detail-name { font: 400 36px/1.1 var(--serif); }
#detail-meta { color: var(--muted); font-size: 15px; }
.dialog-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--sage); }
.app-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 8vw, 100px); max-width: 1120px; padding: 70px 28px 110px; margin: auto; }
.phone-frame { max-width: 300px; margin: auto; border: 7px solid #25332b; border-radius: 40px; overflow: hidden; background: var(--paper); box-shadow: 0 30px 60px #18302120; }
.phone-frame img { width: 100%; height: auto; display: block; }
.app-tabs { margin: 24px 0; }
.showcase .text-link { color: var(--ivory); font-size: 15px; margin-left: 15px; }
.beta h2 { font: 400 clamp(32px, 4vw, 48px)/1.1 var(--serif); text-transform: none; }
.beta::before, .beta::after { animation: none; }
@media(max-width:700px) {
 .stats { grid-template-columns: 1fr; gap: 22px; text-align: left; }
 .stats div { padding: 0; }
 .mosaic-section { grid-template-columns: 1fr; padding-top: 65px; padding-bottom: 65px; }
 .mosaic { gap: 8px; }
 .mosaic .tile-badge { font-size: 7px; letter-spacing: 0; }
 .app-section { grid-template-columns: 1fr; gap: 30px; padding: 40px 24px 70px; }
 .app-section .section-copy { grid-row: 1; }
 .phone-frame { max-width: 270px; }
 .demo-sorts { gap: 0; }
 .demo-sorts button { padding: 10px 12px; }
 #card-detail[open] { grid-template-columns: 1fr; gap: 20px; padding: 45px 22px 24px; }
 #detail-art { max-height: 48dvh; }
 #detail-name { font-size: 28px; margin-bottom: 10px; }
 .stage-nav { flex-wrap: wrap; }
}
.practical-details { width: 100%; max-width: 1100px; padding: clamp(24px,5vw,64px); background: var(--sage); border: 0; border-radius: 24px; box-shadow: none; color: var(--forest); }
.practical-details::before, .practical-details::after { display: none; }
.practical-details h2 { font: 400 clamp(32px,4vw,52px)/1.08 var(--serif); margin: 0 0 40px; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 55px; }
.feature-grid h3 { font: 500 23px var(--serif); margin: 0 0 10px; }
.feature-grid p { color: var(--muted); font: 15px/1.7 var(--sans); margin: 0; }
@media(max-width:700px) { .stats div { border: 0; } .feature-grid { grid-template-columns: 1fr; gap: 26px; } }

/* Mobile finishing: useful targets, readable art, and stable surfaces. */
section[id] { scroll-margin-top: 82px; }
.mobile-nav { display: none; }
.app-device { min-width: 0; text-align: center; }
.app-device .app-tabs { justify-content: center; margin: 18px 0 12px; }
.app-device #app-caption { max-width: 340px; min-height: 3.5em; margin: auto; font-size: 14px; color: var(--muted); }
#card-detail { overscroll-behavior: contain; }
.stage, .shared-card { touch-action: pan-y pinch-zoom; }
@media(max-width:900px) {
 .mobile-nav { display: block; margin-left: auto; position: relative; }
 .mobile-nav summary { list-style: none; min-height: 44px; padding: 10px 8px; font-size: 14px; cursor: pointer; }
 .mobile-nav summary::-webkit-details-marker { display:none; }
 .mobile-nav nav { position: absolute; right: -42px; top: 50px; display: flex; flex-direction: column; gap: 2px; width: 185px; padding: 10px; border: 1px solid var(--rule); border-radius: 18px; background: var(--paper); color: var(--forest); box-shadow: 0 14px 40px #0002; }
 .mobile-nav:not([open]) nav { display: none; }
 .mobile-nav nav a { min-height: 44px; padding: 10px 14px; opacity: 1; }
 .theme-toggle { margin-left: 8px; width: 44px; height: 44px; }
 .site-header { padding-top: max(12px, env(safe-area-inset-top)); }
 .mosaic-section { align-items: start; }
}
@media(max-width:700px) {
 .hero { min-height: 0; padding: 100px 24px 32px; gap: 12px; }
 .hero h1 { font-size: clamp(38px, 10.6vw, 46px); line-height: 1.04; max-width: 360px; margin-bottom: 20px; text-wrap: balance; }
 .hero .lede { font-size: 16px; line-height: 1.65; }
 .hero-link { margin-top: 0; min-height: 44px; }
 .fan { height: 250px; margin-top: 4px; }
 .fan .tcg { width: 125px; }
 .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
 .mosaic .tile-badge { font-size: 9px; line-height: 2; }
 .demo-controls button { padding: 10px 6px; }
 .demo-sorts { flex-wrap: nowrap; gap: 2px; }
 .demo-sorts button { flex: 1; padding: 10px 7px; font-size: 13px; }
 .mosaic-section { gap: 22px; }
 .mosaic-section .section-copy h2 { font-size: 34px; margin-bottom: 16px; }
 .mosaic-section .section-copy p { font-size: 15px; margin-bottom: 12px; }
 .mosaic-section .section-copy .demo-note { margin-bottom: 0; font-size: 12px; }
 .app-section .section-copy { grid-row: 1; }
 .app-device { grid-row: 2; }
 .app-device .app-tabs button { padding: 10px 12px; }
 .stage-nav .text-link { flex-basis: 100%; justify-content: center; margin: 10px 0 0; min-height: 44px; }
 .showcase { padding: 60px 24px; gap: 20px; }
 .stage { height: 330px; }
 .slot { width: min(48vw, 210px); }
}