/* ───────────────────────────────────────────────────────────────────────────
   BrowserGotchi website — builds on the shared GOTCHI UI
   (/game/css/fonts.css, tokens.css, components.css, icons.css, sprite.css)
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --container: 1080px;
  --gutter: clamp(16px, 4vw, 32px);
  /* Day sky: four hard bands + dithered seams (see .sky) */
  --sky-a: var(--sky-600);
  --sky-b: var(--sky-400);
  --sky-c: var(--sky-200);
  --sky-d: var(--paper-100);
  --cloud-filter: none;
  --sun-opacity: 1;
  --star-opacity: 0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sky-a: var(--ink-900); --sky-b: var(--ink-700); --sky-c: var(--grape-800); --sky-d: var(--berry-800);
    --cloud-filter: brightness(0.38) saturate(0.5); --sun-opacity: 0; --star-opacity: 1;
  }
}
:root[data-theme="dark"] {
  --sky-a: var(--ink-900); --sky-b: var(--ink-700); --sky-c: var(--grape-800); --sky-d: var(--berry-800);
  --cloud-filter: brightness(0.38) saturate(0.5); --sun-opacity: 0; --star-opacity: 1;
}

html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body.site { position: relative; min-height: 100vh; overflow-x: hidden; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: var(--s-3); top: -100px; z-index: 100; }
.skip:focus { top: var(--s-3); }

/* ── Sky backdrop ─────────────────────────────────────────────────────────── */
.skyband { position: relative; isolation: isolate; overflow: hidden; }
.sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: linear-gradient(to bottom, var(--sky-a) 0 25%, var(--sky-b) 25% 50%, var(--sky-c) 50% 75%, var(--sky-d) 75% 100%); }
.sky__d { position: absolute; left: 0; right: 0; height: 12px; --a: var(--sky-a); --b: var(--sky-b);
  background: conic-gradient(var(--a) 25%, var(--b) 0 50%, var(--a) 0 75%, var(--b) 0) 0 0 / 4px 4px; transform: translateY(-6px); }
.sky__d:nth-of-type(1) { top: 25%; }
.sky__d:nth-of-type(2) { top: 50%; --a: var(--sky-b); --b: var(--sky-c); }
.sky__d:nth-of-type(3) { top: 75%; --a: var(--sky-c); --b: var(--sky-d); }
.sky__sun { position: absolute; top: 72px; right: 12%; --icon: 96px; color: var(--gold-400); opacity: var(--sun-opacity); }
.sky__moon { position: absolute; top: 72px; right: 12%; --icon: 96px; color: var(--paper-100); opacity: calc(1 - var(--sun-opacity)); }
.sky__stars { position: absolute; inset: 0; background: url(../img/stars.svg) 0 0 / 256px 256px; image-rendering: pixelated; opacity: var(--star-opacity); animation: twinkle 3s steps(2, end) infinite; }
@keyframes twinkle { 50% { opacity: calc(var(--star-opacity) * 0.55); } }
.cloud { position: absolute; left: -200px; image-rendering: pixelated; filter: var(--cloud-filter); animation: drift var(--dur, 90s) linear infinite; animation-delay: var(--delay, 0s); }
.cloud--a { width: 192px; height: 64px; background: url(../img/cloud-a.svg) 0 0 / 100% 100% no-repeat; }
.cloud--b { width: 128px; height: 48px; background: url(../img/cloud-b.svg) 0 0 / 100% 100% no-repeat; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 400px)); } }
.sky__ground { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: url(../img/grass.svg) 0 0 / 64px 48px repeat-x; image-rendering: pixelated; }

/* ── Navigation ───────────────────────────────────────────────────────────── */
.site-nav { position: sticky; top: 0; z-index: var(--z-nav); background: var(--c-chrome); color: var(--c-chrome-text);
  border-bottom: var(--px) solid var(--c-line); box-shadow: 0 calc(var(--px) * 2) 0 0 var(--c-shadow); }
.site-nav__bar { display: flex; align-items: center; gap: var(--s-4); min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-chrome-text); text-decoration: none; font: 400 8px/1.4 var(--font-display); text-transform: uppercase; }
.brand__logo { width: 36px; height: 36px; background: url(../img/logo.svg) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
.brand em { font-style: normal; color: var(--c-accent); }
.site-nav__links { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
.site-nav__links a { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 40px; padding: 0 var(--s-3); color: var(--c-chrome-dim); text-decoration: none; font: 400 8px/1 var(--font-display); text-transform: uppercase; }
.site-nav__links a:hover, .site-nav__links a[aria-current="page"] { color: var(--c-accent); }
.site-nav__links a[aria-current="page"] { box-shadow: inset 0 calc(var(--px) * -2) 0 0 var(--c-accent); }
.site-nav__tools { display: flex; align-items: center; gap: var(--s-2); }
.site-nav .px-select { width: auto; min-height: 32px; padding: var(--s-1) var(--s-6) var(--s-1) var(--s-2); font: 400 8px/1 var(--font-display); background-color: var(--ink-700); color: var(--paper-100); }
.site-nav__burger { display: none; }
@media (max-width: 880px) {
  .site-nav__burger { display: inline-flex; margin-left: auto; }
  .site-nav__links { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; margin: 0; padding: var(--s-2) var(--gutter) var(--s-4); background: var(--c-chrome); border-bottom: var(--px) solid var(--c-line); display: none; }
  .site-nav.is-open .site-nav__links { display: flex; }
  .site-nav__links a { min-height: 48px; }
  .site-nav__tools { padding-top: var(--s-2); }
}

/* ── Buttons on the site get a larger scale ───────────────────────────────── */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn-store { min-height: 48px; padding: var(--s-3) var(--s-4); font-size: 8px; }
.btn-store .px-icon { --icon: 24px; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: var(--s-7) 0 calc(var(--s-7) + 24px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-6); align-items: center; }
.hero__tag { display: inline-flex; margin-bottom: var(--s-4); }
.hero h1 { font: 400 clamp(20px, 3.4vw, 32px)/1.5 var(--font-display); color: var(--ink-900); text-shadow: var(--px) var(--px) 0 rgb(255 246 220 / 0.55); margin: 0 0 var(--s-4); }
.hero__lead { font-size: var(--fs-lead); line-height: 1.45; max-width: 34ch; margin: 0 0 var(--s-5); color: var(--ink-900); }
.hero__note { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--ink-700); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero h1 { color: var(--paper-100); text-shadow: var(--px) var(--px) 0 var(--ink-900); } :root:not([data-theme="light"]) .hero__lead, :root:not([data-theme="light"]) .hero__note { color: var(--paper-100); } }
:root[data-theme="dark"] .hero h1 { color: var(--paper-100); text-shadow: var(--px) var(--px) 0 var(--ink-900); }
:root[data-theme="dark"] .hero__lead, :root[data-theme="dark"] .hero__note { color: var(--paper-100); }
@media (max-width: 880px) { .hero__grid { grid-template-columns: 1fr; } .hero__lead { max-width: none; } .sky__sun, .sky__moon { --icon: 48px; top: 12px; right: 12px; } }

/* ── Handheld device (interactive hero demo) ─────────────────────────────── */
.device { --shell: var(--grape-400); position: relative; width: min(100%, 420px); margin: var(--s-2) auto; padding: var(--s-4) var(--s-4) var(--s-5); background: var(--shell); color: var(--ink-900);
  --hi-c: var(--grape-200); --lo-c: var(--grape-600); --drop-c: var(--grape-800); }
.device__brand { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-3); font: 400 8px/1 var(--font-display); color: var(--grape-200); text-transform: uppercase; }
.device__led { width: 8px; height: 8px; background: var(--mint-400); box-shadow: 0 0 0 var(--px) var(--ink-900); animation: twinkle 2s steps(2, end) infinite; }
.device__screen { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sky-400); box-shadow: 0 0 0 calc(var(--px) * 2) var(--ink-900), inset 0 0 0 var(--px) rgb(0 0 0 / 0.25);
  background-image: linear-gradient(to bottom, var(--sky-400) 0 45%, var(--sky-200) 45% 100%); }
.device__screen::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 3px, rgb(0 0 0 / 0.06) 3px 4px); } /* scanlines */
.device__hud { position: absolute; top: var(--s-2); left: var(--s-2); right: var(--s-2); z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--s-2); }
.device__hud .px-meter { min-height: 14px; gap: var(--s-1); }
.device__hud .px-meter__track { height: 10px; }
.device__hud .px-icon { --icon: 12px; color: var(--ink-900); }
.device__hud .px-meter__num { display: none; }
.device__ground { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: url(../img/grass.svg) 0 0 / 64px 48px repeat-x, var(--gold-800); image-rendering: pixelated; z-index: 1; }
.device__pet { position: absolute; left: 50%; bottom: 17%; z-index: 2; transform: translateX(-50%); }
.device__say { position: absolute; left: 50%; bottom: calc(17% + 112px); z-index: 3; transform: translateX(-50%); width: max-content; max-width: 86%; }
.device__fx { position: absolute; left: 50%; bottom: calc(17% + 80px); z-index: 3; pointer-events: none; }
.fx-heart { position: absolute; --icon: 24px; color: var(--berry-400); animation: float-up 1s steps(8, end) forwards; }
@keyframes float-up { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(var(--dx, 0), -48px); opacity: 0; } }
.device__cloud { position: absolute; top: 22%; z-index: 1; left: -64px; width: 64px; height: 24px; background: url(../img/cloud-b.svg) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; animation: drift 24s linear infinite; }
.device__pick { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1); margin-top: var(--s-4); }
.device__pick button { padding: 0; width: 40px; height: 40px; overflow: hidden; border: 0; background: var(--grape-600); cursor: pointer; margin: var(--px); box-shadow: 0 0 0 var(--px) var(--ink-900); }
.device__pick button[aria-pressed="true"] { background: var(--gold-400); }
.device__pick .px-sprite { --S: 64px; margin: -12px 0 0 -12px; }
.device__actions { display: flex; justify-content: center; gap: var(--s-3); margin-top: var(--s-4); }

/* ── Sections ─────────────────────────────────────────────────────────────── */
.ground-edge { height: 48px; background: url(../img/grass.svg) 0 0 / 64px 48px repeat-x; image-rendering: pixelated; margin-top: -48px; position: relative; z-index: 1; }
.section { position: relative; padding: var(--s-7) 0; background: var(--c-bg); }
.section--alt { background: var(--c-inset); }
.section--dark { background: var(--c-chrome); color: var(--c-chrome-text); }
.section--dark .px-label, .section--dark .px-dim { color: var(--c-chrome-dim); }
.section--dark::before { content: ""; position: absolute; inset: 0; background: url(../img/stars.svg) 0 0 / 256px 256px; opacity: 0.45; image-rendering: pixelated; pointer-events: none; }
.section--dark > .container { position: relative; }
.section__head { text-align: center; max-width: 680px; margin: 0 auto var(--s-6); }
.section__head .px-label { display: block; margin-bottom: var(--s-2); color: var(--c-accent-lo); }
.section--dark .section__head .px-label { color: var(--c-accent); }
.section__head h2 { font: 400 clamp(16px, 2.6vw, 24px)/1.5 var(--font-display); margin: 0 0 var(--s-3); }
.section__head p { margin: 0; font-size: var(--fs-lead); color: var(--c-text-dim); }
.section--dark .section__head p { color: var(--c-chrome-dim); }

/* ── Care loop / feature cartridges ──────────────────────────────────────── */
.cart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); }
.cart { display: flex; flex-direction: column; gap: var(--s-2); padding: 0; overflow: hidden; }
.cart__label { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--cart-c, var(--gold-400)); color: var(--ink-900); font: 400 8px/1.5 var(--font-display); text-transform: uppercase; }
.cart__body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-4); }
.cart__body p { margin: 0; color: var(--c-text-dim); }
.cart__icon { --icon: 48px; color: var(--cart-c, var(--gold-600)); }
.cart--mint { --cart-c: var(--mint-400); } .cart--sky { --cart-c: var(--sky-400); } .cart--berry { --cart-c: var(--berry-400); }
.cart--grape { --cart-c: var(--grape-400); } .cart--coral { --cart-c: var(--coral-400); } .cart--gold { --cart-c: var(--gold-400); }

/* ── Evolution (dark band) ───────────────────────────────────────────────── */
.stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); align-items: end; }
.stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-2); text-align: center; background: var(--ink-700); color: var(--paper-100); --ring-c: var(--ink-900); --hi-c: var(--ink-500); --lo-c: var(--ink-900); --drop-c: #0b0814; }
.stage__art { display: grid; place-items: end center; height: 128px; width: 100%; background: var(--ink-900); background-image: linear-gradient(to bottom, transparent 0 78%, var(--mint-800) 78% 82%, var(--gold-800) 82% 100%); }
.stage__name { font: 400 8px/1.4 var(--font-display); text-transform: uppercase; }
.stage__lv { font-size: var(--fs-small); color: var(--paper-400); }
.stage--legend { background: var(--gold-800); --ring-c: var(--gold-400); }
.stage:not(:last-child)::after { content: ""; position: absolute; right: calc(var(--s-3) * -1 - 4px); top: 46%; width: 12px; height: 12px; z-index: 2; background: var(--c-accent); -webkit-mask: var(--glyph) center / 100% 100% no-repeat; mask: var(--glyph) center / 100% 100% no-repeat; --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M2 1h2v1h1v1h1v1h1v1h1v2h-1v1h-1v1h-1v1h-1v1h-2z'/%3E%3C/svg%3E"); }
.pet-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-6); }
.pet-pick button { position: relative; width: 56px; height: 56px; padding: 0; overflow: hidden; background: var(--ink-700); border: 0; cursor: pointer; margin: var(--px); box-shadow: 0 0 0 var(--px) var(--ink-900); }
.pet-pick button[aria-pressed="true"] { background: var(--gold-400); }
.pet-pick .px-sprite { --S: 96px; margin: -20px 0 0 -20px; }
@media (max-width: 760px) { .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stage::after { display: none; } .stage--legend { grid-column: 1 / -1; } }

/* ── Roster ───────────────────────────────────────────────────────────────── */
.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--s-4); }
.roster .px-card { cursor: default; }
.roster .px-card__art { aspect-ratio: 1; background: var(--c-inset); background-image: linear-gradient(to bottom, transparent 0 80%, var(--mint-600) 80% 84%, var(--gold-800) 84% 100%); place-items: end center; }
.roster .px-card__art .px-sprite { --S: 96px; }

/* ── Worlds ───────────────────────────────────────────────────────────────── */
.worlds { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-4); }
.world { position: relative; aspect-ratio: 4 / 3; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s-2); color: var(--ink-900); font: 400 8px/1.4 var(--font-display); text-transform: uppercase; }
.world .px-badge { align-self: flex-start; position: relative; z-index: 2; }
.world__name { position: relative; z-index: 2; margin-top: var(--s-1); }
.world::before { content: ""; position: absolute; inset: 0; background: var(--w-sky); }
.world::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32%; background: var(--w-ground); box-shadow: inset 0 var(--s-1) 0 0 var(--w-edge); }
.world--meadow { --w-sky: linear-gradient(var(--sky-400) 0 55%, var(--sky-200) 55%); --w-ground: var(--mint-600); --w-edge: var(--mint-400); }
.world--desert { --w-sky: linear-gradient(var(--coral-400) 0 35%, var(--gold-400) 35% 70%, var(--gold-200) 70%); --w-ground: var(--gold-600); --w-edge: var(--gold-400); }
.world--snow { --w-sky: linear-gradient(var(--sky-600) 0 40%, var(--sky-200) 40% 75%, var(--paper-100) 75%); --w-ground: var(--paper-100); --w-edge: var(--sky-200); }
.world--city { --w-sky: linear-gradient(var(--ink-700) 0 50%, var(--grape-600) 50%); --w-ground: var(--ink-500); --w-edge: var(--ink-300); }
.world--space { --w-sky: linear-gradient(var(--ink-900) 0 60%, var(--grape-800) 60%); --w-ground: var(--ink-500); --w-edge: var(--grape-400); }
.world--europe { --w-sky: linear-gradient(var(--sky-600) 0 40%, var(--sky-200) 40%); --w-ground: var(--paper-300); --w-edge: var(--paper-100); }
.world--usa { --w-sky: linear-gradient(var(--sky-600) 0 30%, var(--coral-200) 30% 70%, var(--gold-200) 70%); --w-ground: var(--coral-600); --w-edge: var(--coral-400); }

/* ── Games ────────────────────────────────────────────────────────────────── */
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-4); }
.game { display: flex; flex-direction: column; gap: var(--s-2); padding: 0; overflow: hidden; }
.game__screen { display: grid; place-items: center; height: 112px; background: var(--ink-900); color: var(--game-c, var(--gold-400)); position: relative; }
.game__screen::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0 3px, rgb(255 255 255 / 0.05) 3px 4px); }
.game__screen .px-icon { --icon: 48px; }
.game__body { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-2) var(--s-3) var(--s-3); }
.game__body .px-badge { align-self: flex-start; }
.game__body h3 { margin: 0; font: 400 8px/1.5 var(--font-display); text-transform: uppercase; }
.game__body p { margin: 0; font-size: var(--fs-small); color: var(--c-text-dim); }
.game:nth-child(3n+1) { --game-c: var(--gold-400); } .game:nth-child(3n+2) { --game-c: var(--mint-400); } .game:nth-child(3n) { --game-c: var(--berry-400); }

/* ── Pricing ──────────────────────────────────────────────────────────────── */
.pricing { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--s-5); align-items: start; }
.bundle { text-align: center; padding: var(--s-5); }
.bundle__price { font: 400 32px/1.2 var(--font-display); margin: var(--s-3) 0; }
.bundle ul { list-style: none; padding: 0; margin: var(--s-3) 0 var(--s-4); display: grid; gap: var(--s-1); text-align: left; }
.bundle li::before { content: "★ "; color: var(--c-accent-lo); }
.price-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-2); }
.price-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--c-surface); font-size: var(--fs-small); }
.price-row b { font: 400 8px/1 var(--font-display); color: var(--c-ok-text); white-space: nowrap; }
@media (max-width: 880px) { .pricing { grid-template-columns: 1fr; } }

/* ── Community preview / gallery ─────────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); }
.gallery__item { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-2); text-align: center; }
.gallery__art { aspect-ratio: 1; display: grid; place-items: center; background: var(--c-inset); overflow: hidden; }
.gallery__art img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.gallery__name { font: 400 8px/1.4 var(--font-display); text-transform: uppercase; overflow-wrap: anywhere; }
.gallery__meta { font-size: var(--fs-small); color: var(--c-text-dim); }
.supporters { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.supporters .px-chip { text-decoration: none; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: var(--s-2); }
.faq details { background: var(--c-surface); --hi-c: var(--c-hi); --lo-c: var(--c-lo); margin: var(--px); box-shadow: 0 calc(var(--px) * -1) 0 0 var(--c-line), 0 var(--px) 0 0 var(--c-line), calc(var(--px) * -1) 0 0 0 var(--c-line), var(--px) 0 0 0 var(--c-line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); cursor: pointer; list-style: none; font: 400 8px/1.7 var(--font-display); text-transform: uppercase; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 16px/1 var(--font-display); color: var(--c-accent-lo); }
.faq details[open] summary::after { content: "–"; }
.faq details[open] summary { background: var(--c-inset); }
.faq .faq__a { padding: var(--s-3) var(--s-4) var(--s-4); }
.faq .faq__a p { margin: 0; color: var(--c-text-dim); }
.faq a { color: var(--c-link); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer { position: relative; background: var(--c-chrome); color: var(--c-chrome-text); margin-top: 0; padding: var(--s-7) 0 var(--s-5); border-top: calc(var(--px) * 2) solid var(--c-line); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-5); }
.site-footer h3 { margin: 0 0 var(--s-3); font: 400 8px/1.5 var(--font-display); color: var(--c-accent); text-transform: uppercase; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.site-footer a { color: var(--c-chrome-dim); text-decoration: none; }
.site-footer a:hover { color: var(--c-accent); }
.site-footer__brand p { color: var(--c-chrome-dim); max-width: 36ch; }
.site-footer__legal { margin-top: var(--s-6); padding-top: var(--s-3); border-top: var(--px) dashed var(--ink-500); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-small); color: var(--c-chrome-dim); }
@media (max-width: 880px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }

/* ── Inner pages ──────────────────────────────────────────────────────────── */
.page-hero { position: relative; padding: var(--s-6) 0 calc(var(--s-6) + 24px); }
.page-hero h1 { font: 400 clamp(18px, 3vw, 24px)/1.5 var(--font-display); margin: 0 0 var(--s-2); }
.page-hero p { margin: 0; font-size: var(--fs-lead); max-width: 56ch; }
/* Title plaque: solid so drifting clouds never hurt legibility */
.page-hero h1 { display: inline-block; padding: var(--s-2) var(--s-3); background: var(--c-surface); color: var(--c-text); text-shadow: none; margin: 0 0 var(--s-3); box-shadow: 0 calc(var(--px) * -1) 0 0 var(--c-line), 0 var(--px) 0 0 var(--c-line), calc(var(--px) * -1) 0 0 0 var(--c-line), var(--px) 0 0 0 var(--c-line), 0 calc(var(--px) * 3) 0 0 var(--c-shadow); }
.page-hero p { display: inline-block; padding: var(--px) var(--s-2); background: color-mix(in srgb, var(--c-surface) 86%, transparent); color: var(--c-text); text-shadow: none; }
.page-body { background: var(--c-bg); padding: var(--s-6) 0 var(--s-7); min-height: 50vh; }
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font: 400 16px/1.6 var(--font-display); margin: var(--s-6) 0 var(--s-3); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--c-text); }
.prose p { margin: 0 0 var(--s-3); }
.prose a { color: var(--c-link); }
.prose .px-panel { margin-bottom: var(--s-4); }
.center-card { max-width: 520px; margin: 0 auto; }
.center-card .px-panel { padding: var(--s-5); }
.stack { display: flex; flex-direction: column; gap: var(--s-3); }

/* Filters / toolbars */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; margin-bottom: var(--s-4); }
.toolbar .px-seg { min-width: 260px; }

/* Play (web build in a console frame) */
.console { max-width: 520px; margin: 0 auto; }
.console .device__screen { aspect-ratio: auto; height: min(78vh, 700px); background: var(--c-bg); }
.console iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--c-bg); }
.auth { max-width: 440px; margin: 0 auto; }
.auth__tabs { margin-bottom: var(--s-4); }
.play-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-top: var(--s-3); font-size: var(--fs-small); }

/* Profiles */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4); }
.trainer { display: flex; gap: var(--s-3); text-decoration: none; color: inherit; padding: var(--s-3); }
.trainer__art { flex: none; width: 96px; height: 96px; background: var(--c-inset); background-image: linear-gradient(to bottom, transparent 0 82%, var(--mint-600) 82%); display: grid; place-items: end center; overflow: hidden; }
.trainer__info { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.trainer__name { font: 400 8px/1.5 var(--font-display); text-transform: uppercase; overflow-wrap: anywhere; }
.trainer__bio { font-size: var(--fs-small); color: var(--c-text-dim); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-big { max-width: 560px; margin: 0 auto; }
.card-big__art { display: grid; place-items: end center; height: 224px; background: var(--sky-200); background-image: linear-gradient(to bottom, var(--sky-400) 0 55%, var(--sky-200) 55%); position: relative; margin: calc(var(--s-3) * -1) calc(var(--s-3) * -1) var(--s-3); }
.card-big__art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: url(../img/grass.svg) 0 0 / 64px 48px repeat-x, var(--gold-800); image-rendering: pixelated; }
.card-big__art .px-sprite { position: relative; z-index: 1; margin-bottom: 20px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin: var(--s-3) 0; }
.stat { text-align: center; padding: var(--s-2); background: var(--c-inset); }
.stat b { display: block; font: 400 16px/1.3 var(--font-display); }
.stat span { font-size: var(--fs-small); color: var(--c-text-dim); }
.badges { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Checkout & transactional */
.pay-product { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3); background: var(--c-inset); margin-bottom: var(--s-3); }
.pay-product b { font: 400 16px/1 var(--font-display); color: var(--c-ok-text); }
.keybox { padding: var(--s-3); background: var(--ink-900); color: var(--gold-400); font: 400 16px/1.4 var(--font-body); word-break: break-all; text-align: center; letter-spacing: 1px; user-select: all; }
.status-line { display: flex; align-items: center; gap: var(--s-2); }

@media (prefers-reduced-motion: reduce) { .cloud, .device__cloud, .sky__stars, .device__led { animation: none; } .cloud { left: 12%; } }