/* PokéEmerald: the cartridge became a world.
   Original game pixels sit inside graphite, extruded hardware surfaces. */
:root {
  --deep: #101214;
  --page: #111315;
  --panel: #202427;
  --ink: #eff4ea;
  --muted: #adbab2;
  --line: #44544b;
  --mint: #86efac;
  --yellow: #d6e9a7;
  --shadow: #070d09;
  --surface-top: #303639;
  --surface-edge: #101713;
  --depth-ease: cubic-bezier(.2,.75,.25,1);
}

body {
  background-color: var(--page);
  background-image: linear-gradient(#a7c2b404 1px, transparent 1px),
    linear-gradient(90deg, #a7c2b404 1px, transparent 1px);
  background-size: 32px 32px;
}
::selection { background: var(--mint); color: #101713; }
p { color: var(--muted); }
h1, h2, h3 { text-wrap: balance; }
h1 { line-height: 1.55; }
h1 span, h2 span { color: var(--mint); }
.eyebrow { color: var(--mint); letter-spacing: .05em; }
.section { padding-block: 120px; }
.section-heading { margin-bottom: 54px; }
.section-intro { line-height: 1.8; }
.tiny-code { letter-spacing: .02em; }
.section-note, .benefit-note, .demo-disclosure, .dialog-note { color: #9caea2; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 6px;
}
.skip-link { color: #101713; background: var(--mint); }

/* An edge is solid material, not a diffuse neon glow. */
.pixel-frame {
  position: relative;
  background: var(--panel);
  border: 2px solid #536458;
  border-top-color: #69796c;
  border-left-color: #5f7064;
  outline: 2px solid #0a100c;
  box-shadow: 0 3px 0 #2f3c32, 0 10px 0 #0a100c,
    0 12px 0 #364338, 0 26px 32px -20px #000c;
}
[data-depth] {
  transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 200ms var(--depth-ease);
}
.window-top {
  min-height: 48px;
  color: #d3ded2;
  background: linear-gradient(180deg, #303637, #252b2c);
  border-bottom: 2px solid #0a100c;
  box-shadow: inset 0 1px #7e8f7726, 0 1px #5f705733;
}
.window-top > span:first-child { display: flex; align-items: center; gap: 11px; }
.window-top > span:first-child::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  background: var(--mint);
  box-shadow: 2px 2px 0 #102319;
}
.window-top .tiny-code { color: #a4b4a7; }

.button, .menu-button, .close-dialog, .pokedex-bottom button {
  border: 2px solid #506153;
  border-top-color: #829482;
  background: #29352d;
  box-shadow: inset 0 1px 0 #aec0a62b, 0 4px 0 #111b14, 0 5px 0 #58634e;
  transition: transform 180ms var(--depth-ease), background-color 150ms, box-shadow 180ms;
}
.button { position: relative; min-height: 58px; padding-inline: 24px; font-size: 9px; }
.button > span[aria-hidden] { font-size: 9px; }
.primary {
  color: #102b1b;
  background: var(--mint);
  border-color: #83ffc0 #3ba463 #3ba463 #83ffc0;
  box-shadow: inset 0 2px #bcffd333, 0 5px 0 #2a7949, 0 7px 0 #0a130e,
    0 12px 16px -12px #000;
}
.primary:hover { background: #a4ffc6; transform: translateY(-3px); }
.button:active, .primary:active {
  transform: translateY(4px);
  box-shadow: inset 0 2px #bcffd333, 0 1px 0 #2a7949, 0 2px 0 #0a130e;
}
.button > span:last-child, .header-cta > span, .mode-action > span:last-child {
  transition: transform 180ms var(--depth-ease);
}
.button:hover > span:last-child, .mode-action:hover > span:last-child { transform: translateX(3px); }

.site-header {
  background: #15181b;
  border-block: 1px solid #455449;
  box-shadow: 0 3px 0 #090e0b, 0 12px 24px -20px #000;
}
.header-inner { height: 82px; }
.brand { font-size: 14px; letter-spacing: -.03em; }
.brand img { filter: drop-shadow(0 3px 0 #0008); }
.desktop-nav a {
  color: #bdc7be;
  position: relative;
  font-size: 7px;
  transition: color 150ms;
}
.desktop-nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 1px;
  height: 2px;
  background: var(--mint);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms var(--depth-ease);
}
.desktop-nav a:hover, .desktop-nav a:focus-visible { color: var(--ink); }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { transform: scaleX(1); }
.header-cta {
  color: var(--mint);
  border-left: 1px solid #3d4e42;
  padding-left: 25px;
  font-size: 7px;
}
.header-cta:hover > span { transform: translateX(3px); }
.menu-button { color: var(--ink); font-size: 7px; }

.intro { gap: 100px; }
.intro-copy h1 { text-shadow: 0 5px 0 #080e0a; }
.intro-copy .lead { color: #e1e9df; font-size: 23px; }
.intro-copy > p:not(.eyebrow):not(.lead) { line-height: 1.85; }
.intro-party { gap: 22px; }
.intro-party > div { gap: 2px; }
.intro-party img { filter: drop-shadow(0 5px 0 #03090580); }
.intro-party > span { color: #a2b1a5; }
.map-window { padding: 6px; background: #2b3331; }
.map-window > .window-top { border: 1px solid #17221a; }
.scene-stage {
  width: 100%;
  border: 2px solid #111d15;
  box-shadow: inset 0 0 0 1px #6a947157;
}
.world-map { filter: saturate(.93); }
.map-trainer { filter: drop-shadow(2px 3px 0 #17220f70); }
.found-pokemon {
  background: #e8eedb;
  color: #233729;
  border: 2px solid #324a34;
  box-shadow: inset 0 2px #fff9, inset 0 -3px #b4c3a9, 0 5px 0 #172616,
    0 7px 0 #b3c7a740;
  transform: translateZ(22px);
}
.found-pokemon > img { filter: drop-shadow(0 4px 0 #677a4540); }
.found-pokemon .tiny-code { color: #476442; }
.found-pokemon strong { color: #223a29; }
.hero-trade-card {
  color: #e5efd8;
  background: #22382a;
  border-color: #92bf88;
  box-shadow: inset 0 0 0 2px #15251a, 5px 7px 0 #0c1d11,
    8px 11px 0 #07140c75;
  transform: perspective(600px) rotateY(-7deg) rotateZ(4deg) translateZ(24px);
}
.hero-trade-card > img { filter: drop-shadow(0 9px 0 #08190d60); }
.scene-controls { background: #232c29; min-height: 80px; padding: 16px 12px 12px; }
.scene-controls > .tiny-code { color: #bbc8b8; }
.segmented { padding: 3px; gap: 3px; background: #121b15; border: 1px solid #435445; }
.segmented button, .filter-row button {
  color: #bac8bc;
  background: #1c2820;
  border: 1px solid #45594a;
  box-shadow: inset 0 1px #60766326, 0 2px #0a140e;
  transition: color 140ms, background-color 140ms, transform 150ms;
}
.segmented button.selected, .filter-row button.selected {
  background: #a9d8b6;
  color: #162d1e;
  border-color: #d0ecd1;
  box-shadow: inset 0 -2px #75a480, 0 2px #0a140e;
}
.segmented button:hover, .filter-row button:hover { color: var(--ink); background: #3a5040; }
.segmented button.selected:hover, .filter-row button.selected:hover { color: #162d1e; background: #bde9c6; }

.chapter-strip {
  position: relative;
  background: #171c1b;
  border-block: 1px solid #3b4b40;
  box-shadow: inset 0 4px #090f0b, inset 0 -4px #090f0b;
  padding-block: 25px;
}
.chapter-strip span { color: #becdbd; font-size: 9px; letter-spacing: .06em; }
.chapter-strip span[aria-hidden] { color: #5b7863; }
.chapter-strip img { filter: drop-shadow(0 4px 0 #060b0780); }

.mode-grid { gap: 36px; }
.mode-card { background: #202527; }
.mode-card .window-top { color: #cbd7c8; }
.mode-copy { padding: 34px 34px 38px; }
.mode-copy .tiny-code { color: #9bbba2; font-size: 7px; letter-spacing: .07em; }
.mode-copy h3 { font-size: 21px; line-height: 1.8; }
.mode-copy > p:last-child { color: #b3c0b4; line-height: 1.8; }
.adventure-art, .trading-art {
  border-top: 2px solid #111c14;
  border-bottom: 2px solid #0a110d;
}
.route-map { filter: saturate(.88); }
.route-name {
  background: #e2e9d7;
  color: #29452e;
  border: 2px solid #456045;
  box-shadow: inset 0 1px #fff9, 0 4px 0 #18331b;
}
.route-player { filter: drop-shadow(2px 3px 0 #14210c66); }
.party-line {
  color: #d6e3d0;
  background: #1b2c20;
  border: 1px solid #7e9477;
  box-shadow: inset 0 1px #a4c39330, 0 4px 0 #101c12, 0 7px 12px #09130d50;
}
.party-line img { filter: drop-shadow(0 3px 0 #0d190e90); }
.party-slot { color: #6b8d70; border-color: #55745b; }
.trading-art {
  perspective: 800px;
  background-color: #17261d;
  background-image: linear-gradient(#6b927712 1px, transparent 1px),
    linear-gradient(90deg, #6b927712 1px, transparent 1px);
  background-size: 22px 22px;
}
.small-collectible {
  background: #c2d2ae;
  color: #253e29;
  border: 5px double #4f6d46;
  outline: 1px solid #d8e7bd;
  box-shadow: 2px 2px 0 #8ba072, 4px 4px 0 #71875b, 6px 6px 0 #0c1a10,
    10px 18px 14px -12px #000c;
  transform: rotateY(12deg) rotateZ(-8deg) translateY(-5px);
  transition: transform 420ms var(--depth-ease);
}
.small-collectible img { filter: drop-shadow(0 6px 0 #4f6e3b55); }
.collectible-purple {
  color: #373547;
  background: #c6c5d5;
  border-color: #6d687d;
  outline-color: #e7e0f0;
  box-shadow: 2px 2px 0 #9d98b4, 4px 4px 0 #76718d, 6px 6px 0 #14121c,
    10px 18px 14px -12px #000c;
  transform: rotateY(-12deg) rotateZ(8deg) translateY(5px);
}
.exchange-symbol { z-index: 1; color: var(--mint); font-size: 34px; text-shadow: 0 3px #07180b; }
.art-note { color: #a1b4a6; }
.mode-action {
  background: #18241b;
  border-top: 1px solid #415845;
  color: var(--mint);
  min-height: 76px;
  box-shadow: inset 0 -3px #111a14;
  transition: background-color 180ms, color 180ms, transform 150ms;
}
.mode-action > span:last-child {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  background: #2a4631;
  border: 1px solid #436c4c;
  box-shadow: 0 2px #0d1710;
  font-size: 8px;
}
.mode-action:hover { background: #253d2d; color: #bcffd1; }
.mode-action:active { transform: translateY(2px); }

.encounter-section {
  background-color: #0d1112;
  background-image: linear-gradient(90deg, #849c8705 1px, transparent 1px);
  background-size: 64px 100%;
  border-block: 1px solid #3c4f41;
}
.demo-badge {
  color: #b6d1b4;
  background: #1f3025;
  border: 1px solid #526e55;
  font-size: 7px;
  box-shadow: 3px 3px 0 #080f0b;
}
.battle-window { padding: 5px; background: #2b3431; }
.battle-window > .window-top { font-size: 7px; }
.battle-field {
  perspective: 800px;
  background-color: #9bba8d;
  background-image: linear-gradient(transparent 50%, #6f956c10 50%);
  background-size: 4px 4px;
}
.battle-field::before, .battle-field::after {
  height: 64px;
  background: #60876a;
  border-top: 5px solid #c1d39b;
  border-bottom: 7px solid #3d6248;
  box-shadow: 0 5px 0 #537351;
  transform: rotateX(34deg) rotateZ(-8deg) skewX(-12deg);
}
.battle-info {
  color: #24382a;
  background: #e3ead7;
  border: 2px solid #496546;
  box-shadow: inset 0 2px #fff9, inset 0 -2px #b1c49f, 0 4px 0 #36543a,
    3px 7px 0 #244b2b55;
}
.battle-info > span:first-child { color: #496047; }
.hp-bar { border-color: #344f3a; background: #8fae83; height: 9px; }
.hp-bar i { background: #3a9a60; box-shadow: inset 0 1px #89c579; }
.value-label { font-variant-numeric: tabular-nums; }
.battle-card {
  border-color: #506f45;
  color: #2c4028;
  background: #c5d6ac;
  box-shadow: 2px 2px 0 #8ba872, 4px 4px 0 #668052, 6px 6px 0 #273f29,
    14px 18px 12px -10px #14341c88;
}
.battle-card > img { filter: drop-shadow(0 6px 0 #38502940); }
.your-card { transform: rotateY(9deg) rotateZ(-7deg); }
.opponent-card {
  border-color: #6b667b;
  background: #cfcbdd;
  color: #3a3548;
  box-shadow: 2px 2px 0 #aba2be, 4px 4px 0 #80768f, 6px 6px 0 #393344,
    14px 18px 12px -10px #14341c88;
  transform: rotateY(-9deg) rotateZ(7deg);
}
.battle-vs { color: #f0f3d9; text-shadow: 2px 2px 0 #35533d, 4px 4px 0 #35533d; }
.battle-tree { filter: saturate(.8) drop-shadow(5px 8px 0 #54774c70); }
.battle-dialogue {
  background: #dfe8d5;
  border: 4px double #4b6246;
  box-shadow: inset 0 2px #fff8;
}
.battle-dialogue p { color: #263a2a; }
.next-encounter { color: #325640; }
.next-encounter:hover { color: #0c743d; }
.agent-panel {
  border-top: 1px solid #4e6854;
  padding: 28px 0 0;
}
.agent-heading { align-items: center; }
.agent-avatar { filter: drop-shadow(3px 5px 0 #050c0780); }
.agent-heading h3 { font-size: 14px; }
.agent-heading .tiny-code { color: #93c5a2; font-size: 6px; }
.agent-intro { font-size: 16px; line-height: 1.8; }
.analysis-item { border-left: 1px solid #395641; padding: 2px 0 2px 16px; gap: 15px; }
.analysis-icon { background: #203a29; border: 1px solid #527b5b; box-shadow: 2px 2px 0 #060f09; }
.caution .analysis-icon { color: #d5d9ae; border-color: #6e7655; background: #333b29; }
.analysis-item h4 { font-size: 17px; font-weight: 600; }
.analysis-item p { color: #aebdad; }
.agent-conclusion {
  padding: 20px;
  background: #203025;
  border: 1px solid #415c47;
  box-shadow: inset 0 1px #91ae7c16, 0 3px #0a130d;
}
.agent-conclusion > .tiny-code { color: #9ad0aa; }
.demo-disclosure { font-size: 12px; line-height: 1.8; }
.integration-line { border-top: 1px solid #3f5445; margin-top: 56px; padding-top: 32px; }
.integration-name { font-size: 18px; color: #dfebdb; }
.integration-name > span { color: var(--mint); }
.integration-name small { color: #9fb09f; font-size: 6px; letter-spacing: .07em; }

.collection-benefits > div { gap: 20px; }
.collection-benefits > div > span {
  display: grid;
  place-items: center;
  align-self: start;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 8px;
  color: #afd5b6;
  background: #233329;
  border: 1px solid #4a6251;
  box-shadow: 3px 3px 0 #0d1711;
}
.pokedex-display {
  padding: 7px;
  background: #303e31;
  border-color: #738165 #485b43 #485b43 #738165;
  box-shadow: 0 3px 0 #1e2b20, 0 11px 0 #0b140d,
    0 13px 0 #4b5b42, 0 28px 36px -22px #000c;
}
.pokedex-top {
  background: #26352a;
  color: #d4e6cc;
  border: 1px solid #50624b;
  border-bottom: 3px solid #0f1b12;
  box-shadow: inset 0 2px #75936c20;
  padding: 20px 16px;
}
.lens {
  width: 19px;
  height: 19px;
  background: #8efbb6;
  border: 3px solid #31583b;
  outline: 1px solid #a2b28b;
  box-shadow: inset 3px 3px #d6ffe0, 2px 3px 0 #0e2014;
}
.pokedex-top .tiny-code { color: #a8b9a0; }
.pokedex-heading { background: #253729; padding: 28px 20px; color: #e6efda; }
.pokedex-heading .tiny-code { color: #a2b99c; }
.pokedex-heading > img { filter: drop-shadow(2px 3px 0 #0f1b1190); }
.pokedex-grid {
  background: #253729;
  gap: 9px;
  padding-inline: 16px;
  padding-bottom: 10px;
}
.dex-tile {
  color: #e0ebd7;
  background: #364b36;
  border: 1px solid #6c8360;
  border-bottom-color: #142919;
  box-shadow: inset 0 1px #adc18c22, 0 3px 0 #122319;
  transition: transform 200ms var(--depth-ease), background-color 200ms, border-color 200ms;
}
.dex-number { color: #a6b89b; }
.dex-tile img { filter: drop-shadow(0 5px 0 #0e201340); transition: transform 200ms var(--depth-ease); }
.dex-tile strong { color: #e4efdb; }
.dex-type { color: #bdcdb3; }
.pokedex-bottom {
  padding: 18px 16px 12px;
  background: #253729;
  border-top: 1px solid #486045;
}
.pokedex-bottom > span { color: #a9bda0; }
.pokedex-bottom button { color: var(--mint); }

.questions { border-top: 1px solid #405246; }
.faq-pokemon { filter: drop-shadow(8px 12px 0 #09150d70); }
.faq-list details, .faq-list details:first-child { border-width: 1px; border-color: #43584a; }
.faq-list summary { font-size: 17px; padding: 24px 0; color: #e0eadd; }
.faq-list summary > span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  font-size: 12px;
  background: #263e2e;
  border: 1px solid #4a6a52;
  transition: transform 180ms, background-color 180ms;
}
.faq-list details[open] summary > span { color: #d2ffe0; }
.faq-list summary:hover { color: var(--mint); }
.faq-list p { line-height: 1.85; }
.closing {
  background-color: #1d3427;
  background-image: linear-gradient(#88b89406 1px, transparent 1px),
    linear-gradient(90deg, #88b89406 1px, transparent 1px);
  background-size: 24px 24px;
  border-block: 1px solid #54715a;
  box-shadow: inset 0 7px #102219, inset 0 -7px #102219;
}
.closing h2 span { color: var(--mint); }
.closing h2 { text-shadow: 0 4px #0c1c13; }
.closing-inner { padding-block: 90px 135px; }
.closing-party { bottom: 7px; }
.closing-party img, .closing-tree { filter: saturate(.8) drop-shadow(7px 9px 0 #0c261280); }
.site-footer { background: #0d1011; border-top: 1px solid #09100b; }
.footer-top p { color: #a6b8a6; }
.footer-bottom { border-color: #354c3d; }
.footer-bottom p, .footer-bottom > span { color: #92a58f; }

dialog {
  background: #202d24;
  border: 2px solid #697f64;
  border-top-color: #8fa382;
  border-left-color: #8fa382;
  box-shadow: inset 0 2px #9eae9120, 0 7px 0 #111c14, 0 9px 0 #4e614a, 0 22px 70px #0009;
  color: var(--ink);
}
dialog::backdrop { background: #080e0be6; }
.dialog-header { border-bottom: 1px solid #4b614b; padding-bottom: 23px; }
.dialog-header .eyebrow { color: #a3d0ad; }
.close-dialog { color: #c5d9c0; background: #344a36; }
.close-dialog:hover { background: #49634a; color: var(--ink); }
.search-label { color: #c9d7c3; }
input[type=search] {
  background: #0e1a12;
  color: #eef5e7;
  border: 1px solid #7c9171;
  border-top-color: #16291b;
  box-shadow: inset 0 3px #09120d;
  padding-block: 16px;
}
input[type=search]::placeholder { color: #92a88f; opacity: 1; }
.filter-row button { padding-inline: 14px; }
.collection-count { color: #a8bea2; }
.dialog-pokedex-grid { gap: 11px; }
.dialog-pokedex-grid .dex-tile { background: #2c402f; }
.preview-map { border: 2px solid #63845d; box-shadow: 0 4px #0b1a10; }
.starter-choice button {
  background: #2e4232;
  border: 1px solid #65825d;
  color: #d7e8cc;
  box-shadow: inset 0 1px #a3c18922, 0 4px #0e2014;
  transition: transform 180ms var(--depth-ease), background-color 180ms;
}
.starter-choice button[aria-pressed=true] {
  color: #183321;
  background: #a9ddb5;
  border-color: #b4e1b1;
  box-shadow: inset 0 -3px #719b70, 0 4px #0e2014;
}
.starter-choice button img { filter: drop-shadow(0 5px 0 #152e1b40); }
.starter-feedback { color: #9ce1ad; }
.menu-dialog nav a { border-color: #4a6350; }
.menu-dialog nav a > span { color: var(--mint); }

@media (hover: hover) and (pointer: fine) {
  .mode-card:hover .small-collectible { transform: rotateY(9deg) rotateZ(-5deg) translateY(-10px); }
  .mode-card:hover .collectible-purple { transform: rotateY(-9deg) rotateZ(5deg) translateY(0); }
  .dex-tile:hover { background: #425e40; border-color: #8ca379; }
  .starter-choice button:hover { transform: translateY(-3px); background: #49654a; }
  .starter-choice button[aria-pressed=true]:hover { background: #b8ecc1; }
}

@media (min-width: 1600px) {
  .intro { gap: 120px; }
  .mode-copy { padding: 38px 38px 42px; }
  .encounter-grid { gap: 64px; }
}
@media (max-width: 1100px) {
  .intro { gap: 50px; }
  .desktop-nav { gap: 20px; }
  .desktop-nav a { font-size: 6px; }
  .header-cta { padding-left: 18px; font-size: 6px; }
  .mode-copy { padding: 28px 24px; }
  .mode-copy h3 { font-size: 17px; }
  .agent-heading h3 { font-size: 13px; }
  .battle-window > .window-top { font-size: 6px; }
  .integration-name { font-size: 16px; }
}
@media (max-width: 900px) {
  .section { padding-block: 88px; }
  .intro { gap: 34px; }
  .intro-copy .lead { font-size: 19px; }
  .mode-grid { gap: 26px; }
  .mode-copy h3 { font-size: 15px; }
  .agent-panel { padding-top: 28px; }
  .agent-heading h3 { font-size: 17px; }
  .collection-benefits > div > span { display: grid; }
  .integration-name { font-size: 14px; }
  .pokedex-display { max-width: 610px; }
  .dex-tile img { width: 110px; height: 110px; }
}
@media (max-width: 600px) {
  .section { padding-block: 70px; }
  .section-heading { margin-bottom: 36px; }
  .header-inner { height: 68px; }
  .brand { font-size: 12px; }
  .intro { gap: 46px; }
  .intro h1 { font-size: 32px; }
  .intro-copy .lead { font-size: 21px; }
  .intro-party { gap: 20px; }
  .map-window { padding: 4px; }
  .window-top > span:first-child { gap: 7px; }
  .window-top > span:first-child::before { width: 4px; height: 4px; flex-basis: 4px; }
  .window-top { font-size: 6px; }
  .scene-controls { padding: 12px 8px 9px; min-height: 74px; gap: 8px; }
  .scene-controls > .tiny-code { font-size: 5px; max-width: 70px; }
  .segmented { gap: 2px; padding: 2px; }
  .segmented button { font-size: 5px; padding-inline: 7px; }
  .found-pokemon { left: 9px; right: 9px; bottom: 12px; }
  .found-pokemon .tiny-code { font-size: 5px; }
  .chapter-strip { padding-block: 24px; }
  .chapter-strip span { font-size: 8px; }
  .mode-grid { gap: 34px; }
  .mode-copy { padding: 28px 22px 32px; }
  .mode-copy h3 { font-size: 18px; }
  .mode-action { min-height: 70px; padding: 18px 20px; font-size: 7px; }
  .mode-action > span:last-child { width: 28px; height: 28px; flex-basis: 28px; }
  .small-collectible { width: 120px; }
  .small-collectible img { height: 104px; }
  .trading-art { gap: 18px; }
  .exchange-symbol { font-size: 26px; }
  .battle-window { padding: 4px; }
  .battle-window > .window-top { font-size: 5px; padding-inline: 8px; }
  .battle-window > .window-top .tiny-code { font-size: 5px; }
  .battle-field { height: 390px; }
  .battle-card { width: 121px; }
  .battle-card > img { height: 106px; }
  .your-card { left: 17px; bottom: 32px; }
  .opponent-card { right: 17px; top: 32px; }
  .battle-info { width: 143px; }
  .agent-heading h3 { font-size: 13px; }
  .agent-heading .tiny-code { font-size: 5px; }
  .analysis-item { padding-left: 12px; gap: 12px; }
  .analysis-item p { font-size: 16px; }
  .agent-conclusion { padding: 18px; }
  .integration-name { font-size: 16px; }
  .pokedex-display { padding: 5px; }
  .pokedex-top { padding: 16px 11px; gap: 12px; }
  .pokedex-heading { padding: 26px 11px; }
  .pokedex-heading .tiny-code { font-size: 4px; }
  .pokedex-grid { padding: 0 8px 10px; gap: 7px; }
  .dex-tile img { width: 80px; height: 80px; }
  .dex-tile strong { font-size: 6px; }
  .dex-number { font-size: 5px; }
  .pokedex-bottom { padding: 14px 9px 8px; }
  .faq-list summary { font-size: 16px; padding-block: 22px; }
  .faq-list summary > span { width: 24px; height: 24px; flex-basis: 24px; font-size: 11px; }
  .closing-inner { padding-block: 68px 120px; }
  .closing h2 { font-size: 18px; }
  dialog { padding: 22px 16px; }
  .dialog-header { padding-bottom: 20px; }
  .dialog-pokedex-grid { gap: 8px; }
  .dialog-pokedex-grid .dex-tile img { width: 71px; height: 71px; }
  .filter-row button { padding-inline: 8px; }
  .starter-choice button { font-size: 6px; }
}
@media (max-width: 370px) {
  .intro h1 { font-size: 30px; }
  .scene-controls > .tiny-code { max-width: 60px; font-size: 4px; }
  .segmented button { padding-inline: 6px; }
  .trading-art { gap: 13px; }
  .small-collectible { width: 110px; }
  .battle-card { width: 114px; }
  .battle-card > img { height: 102px; }
  .battle-info { width: 133px; }
  .battle-info strong { font-size: 9px; }
  .pokedex-top .pixel-label { font-size: 12px; }
  .pokedex-top > .tiny-code { font-size: 4px; max-width: 56px; }
  .pokedex-heading h3 { font-size: 11px; }
  .dex-tile img { width: 73px; height: 73px; }
  .dex-tile strong { font-size: 5px; }
  .agent-heading h3 { font-size: 12px; }
  .closing h2 { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-depth] { transform: none !important; }
  .small-collectible, .battle-card, .hero-trade-card { transform: none !important; }
  .dex-tile:hover, .dex-tile:hover img, .starter-choice button:hover { transform: none; }
  *, *::before, *::after { transition-duration: 0s !important; }
}

/* Spatial pass: stronger perspective, suspended artwork, soft contact shadows. */
[data-depth],.mode-card:hover .small-collectible,.mode-card:hover .collectible-purple{
  transform:perspective(var(--depth-perspective,1000px)) translate3d(0,var(--lift,0px),var(--rest-depth,0px)) rotateX(calc(var(--rest-x,0deg) + var(--tilt-x,0deg))) rotateY(calc(var(--rest-y,0deg) + var(--tilt-y,0deg))) rotateZ(var(--rest-z,0deg));
  transform-style:preserve-3d;
  transition:border-color 200ms;
}
[data-depth][data-tilting=true]{transition-duration:120ms;z-index:4}
[data-depth=card]{--depth-perspective:900px;--rest-depth:72px}
[data-depth=tile]{--depth-perspective:650px}
.small-collectible{position:relative;--rest-y:12deg;--rest-z:-8deg}
.collectible-purple{--rest-y:-12deg;--rest-z:8deg}
.your-card{--rest-y:9deg;--rest-z:-7deg}
.opponent-card{--rest-y:-9deg;--rest-z:7deg}
.hero-trade-card{--rest-y:-7deg;--rest-z:4deg}
.mode-copy,.map-window>.window-top,.pokedex-heading{transform:translateZ(12px)}
.mode-action,.scene-controls,.pokedex-top,.pokedex-bottom{transform:translateZ(18px)}
.trading-art{overflow:visible;transform-style:preserve-3d}
.small-collectible img,.battle-card>img,.hero-trade-card>img,[data-depth].dex-tile img{
  transform:translateZ(34px);transition:transform 240ms cubic-bezier(.19,1,.22,1);
}
[data-depth][data-tilting=true]>img{transform:translateZ(calc(34px + 15px * var(--proximity,1))) translateY(calc(-4px * var(--proximity,1)))}
.small-collectible>span,.battle-card-title,.card-bottom{transform:translateZ(10px)}
.small-collectible::after,.battle-card::after,.hero-trade-card::after,.dex-tile::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:linear-gradient(112deg,transparent 25%,#ffffff29 44%,#bcffd827 51%,transparent 72%);
  background-size:220% 100%;background-position:var(--light-x,50%) 50%;
  opacity:0;transition:opacity 220ms;transform:translateZ(1px);
}
.dex-tile{position:relative}
[data-depth][data-tilting=true]::after{opacity:calc(.85 * var(--proximity,1))}
[data-depth=panel][data-tilting=true]{border-top-color:color-mix(in srgb,#b3d5b6 calc(var(--proximity,1) * 100%),#69796c);border-left-color:color-mix(in srgb,#8eaf94 calc(var(--proximity,1) * 100%),#5f7064)}
.analysis-item{background:#19231edb;border:1px solid #3f5747;padding:18px;box-shadow:0 8px 18px -9px #0008}
.caution.analysis-item{background:#292b23db;border-color:#505541}
.agent-conclusion{background:#24332bea}

.pixel-frame,.pokedex-display{box-shadow:0 5px 12px -5px #000b,0 24px 48px -12px #0009,0 2px 5px #8db89608}
.button,.menu-button,.close-dialog,.pokedex-bottom button{box-shadow:0 4px 8px -3px #0009,0 12px 24px -8px #0008}
.primary,.primary:hover{box-shadow:inset 0 1px 2px #d0ffdc40,0 4px 8px -3px #173e28a0,0 14px 24px -9px #0009}
.button:active,.primary:active{box-shadow:inset 0 2px 4px #1e5f3540,0 2px 5px #0005}
.site-header{box-shadow:0 5px 20px #0005}
.window-top{box-shadow:inset 0 1px 2px #c3efca10}
.window-top>span:first-child::before{box-shadow:0 1px 5px #86efac18}
.found-pokemon,.battle-info{box-shadow:inset 0 1px 3px #fff8,0 6px 12px -4px #142a1b80,0 15px 24px -10px #0a2315a0}
.hero-trade-card{box-shadow:0 5px 11px #04180f70,0 22px 35px -12px #031509b0}
.route-name,.party-line{box-shadow:0 4px 10px #0c211b55,0 12px 20px -10px #0c211b90}
.small-collectible,.collectible-purple{box-shadow:inset 0 1px 2px #fff5,0 5px 9px -3px #0008,0 19px 25px -9px #000b}
.battle-card,.opponent-card{box-shadow:inset 0 1px 2px #fff5,0 5px 9px -3px #18341f80,0 22px 28px -9px #14341ca0}
.battle-field::before,.battle-field::after{box-shadow:0 6px 13px #24492b55}
.segmented button,.filter-row button,.segmented button.selected,.filter-row button.selected{box-shadow:inset 0 1px 2px #bed2b91a,0 2px 4px #0006}
.mode-action{box-shadow:inset 0 -2px 6px #090f1340}
.mode-action>span:last-child,.demo-badge,.analysis-icon,.collection-benefits>div>span{box-shadow:0 4px 10px #0005}
.agent-conclusion{box-shadow:0 8px 18px -7px #0006}
.pokedex-top{box-shadow:inset 0 1px 3px #a0ca9c12}
.lens{box-shadow:inset 2px 2px 3px #d6ffe0,0 3px 7px #07180c90}
.dex-tile,.dialog-pokedex-grid .dex-tile{box-shadow:inset 0 1px 2px #bbd4aa16,0 5px 12px -3px #07160c80}
.chapter-strip,.closing{box-shadow:inset 0 6px 16px #07110d50,inset 0 -6px 16px #07110d50}
.dialog-header{box-shadow:none}
dialog{box-shadow:0 8px 20px #0006,0 28px 75px -12px #000a}
input[type=search]{box-shadow:inset 0 3px 7px #060e08a0}
.starter-choice button,.starter-choice button[aria-pressed=true]{box-shadow:inset 0 1px 3px #c2e3b622,0 6px 12px -4px #06130b90}
.preview-map{box-shadow:0 5px 12px #05160d50}
.battle-dialogue,.scene-stage{box-shadow:inset 0 2px 4px #12281c18}
.intro-copy h1,.closing h2,.exchange-symbol,.battle-vs{ text-shadow:none }
.brand img,.intro-party img,.map-trainer,.found-pokemon>img,.hero-trade-card>img,.route-player,.party-line img,.small-collectible img,.battle-card>img,.agent-avatar,.pokedex-heading>img,.dex-tile img,.starter-choice button img,.chapter-strip img{filter:drop-shadow(0 6px 5px #061a0d50)}
.battle-tree,.closing-party img,.closing-tree,.faq-pokemon{filter:drop-shadow(5px 12px 8px #07180e50)}

@media(max-width:900px){
  .small-collectible{--rest-depth:40px;--rest-y:6deg;--rest-z:-5deg}
  .collectible-purple{--rest-y:-6deg;--rest-z:5deg}
}
@media(max-width:600px){
  .analysis-item{padding:15px 12px}
  .trading-art{overflow:hidden}
  [data-depth=card]{--rest-depth:30px}
  .small-collectible{--rest-depth:30px}
  .small-collectible{--rest-y:4deg;--rest-z:-5deg}
  .collectible-purple{--rest-y:-4deg;--rest-z:5deg}
}
@media(prefers-reduced-motion:reduce){
  [data-depth],.mode-card:hover .small-collectible,.mode-card:hover .collectible-purple{transform:none!important}
  .mode-copy,.map-window>.window-top,.pokedex-heading,.mode-action,.scene-controls,.pokedex-top,.pokedex-bottom{transform:none}
  .small-collectible img,.battle-card>img,.hero-trade-card>img,[data-depth].dex-tile img,.dex-tile:hover img{transform:none!important}
}

#worlds { scroll-margin-top: 88px; padding-top: 40px; }
.mode-card > .mode-copy h3 { margin-bottom: 14px; }
#worlds .section-heading { margin-bottom: 32px; }