/* Landing page. Palette and type match the app (Theme.swift); Nunito is self-hosted (SIL OFL, fonts/Nunito-OFL.txt), no third-party font request.
   The legal pages keep style.css. */
@font-face { font-family:"Nunito"; font-style:normal; font-weight:400 900; font-display:swap; src:url(/fonts/nunito-latin.woff2) format("woff2"); }
:root {
  --cream:#F7F3E8; --ink:#1F2A22; --soft:#56625A; --green:#5C7A4A; --clay:#A0583A; --mauve:#7E6382; --focus:#3E5A30; --on-accent:#F7F3E8;
  --sage:#E4EBD8; --peach:#F6DFD2; --lilac:#EBE0EE; --sil:#D3CFC0; --rule:#E4DFCF; --hover:#F0ECE0;
  --surface:#ffffffcc; --surface-strong:#ffffffd9; --edge:#ffffff; --tile:#F3EFE2;
  --a1:#9DBE8690; --a2:#E0A98A80; --a3:#CDB6D280;
  --warn-bg:#fbf1e0; --warn-edge:#efdcb8; --warn-ink:#6a5a3c; --warn-icon:#B07A22;
  --tint-1:#ECEFF1; --ink-1:#5D6873; --tint-2:#DDF0EA; --ink-2:#1D7564; --tint-3:#E2F0F7; --ink-3:#23698C; --tint-4:#EDE9F7; --ink-4:#62509E;
  --font:"Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cream:#131A15; --ink:#EDF1E8; --soft:#AEB9AE; --green:#9DBE86; --clay:#D99577; --mauve:#BFA3C3; --focus:#9DBE86; --on-accent:#12200F;
    --sage:#1E2A1F; --peach:#2C201B; --lilac:#251F2A; --sil:#36423A; --rule:#2A352D; --hover:#232E26;
    --surface:#1d2a20cc; --surface-strong:#1b241ed9; --edge:#ffffff14; --tile:#1A241D;
    --a1:#4f7a4a60; --a2:#a0583a48; --a3:#7e638258;
    --warn-bg:#2A2418; --warn-edge:#4A3F25; --warn-ink:#CDBF9F; --warn-icon:#D9A24A;
    --tint-1:#263039; --ink-1:#B8C2CB; --tint-2:#173A33; --ink-2:#72CDB8; --tint-3:#17303F; --ink-3:#6BAED0; --tint-4:#2A2540; --ink-4:#C3B4EE;
    color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --cream:#131A15; --ink:#EDF1E8; --soft:#AEB9AE; --green:#9DBE86; --clay:#D99577; --mauve:#BFA3C3; --focus:#9DBE86; --on-accent:#12200F;
  --sage:#1E2A1F; --peach:#2C201B; --lilac:#251F2A; --sil:#36423A; --rule:#2A352D; --hover:#232E26;
  --surface:#1d2a20cc; --surface-strong:#1b241ed9; --edge:#ffffff14; --tile:#1A241D;
  --a1:#4f7a4a60; --a2:#a0583a48; --a3:#7e638258;
  --warn-bg:#2A2418; --warn-edge:#4A3F25; --warn-ink:#CDBF9F; --warn-icon:#D9A24A;
  --tint-1:#263039; --ink-1:#B8C2CB; --tint-2:#173A33; --ink-2:#72CDB8; --tint-3:#17303F; --ink-3:#6BAED0; --tint-4:#2A2540; --ink-4:#C3B4EE;
  color-scheme:dark;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--cream); color:var(--ink); font:400 17px/1.65 var(--font); position:relative; overflow-x:clip; }
a { color:inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline:3px solid var(--focus); outline-offset:4px; border-radius:10px; }
.wrap { width:min(1160px, calc(100% - 56px)); margin-inline:auto; }

.atmosphere { position:absolute; inset:0 0 auto 0; height:1400px; z-index:-1; overflow:hidden; pointer-events:none; opacity:.75; }
.atmosphere span { position:absolute; border-radius:50%; filter:blur(90px); width:46vw; height:40vw; max-height:640px; animation:drift 26s ease-in-out infinite alternate; }
.atmosphere span:nth-child(1) { background:radial-gradient(ellipse,var(--a1),transparent 68%); top:0; left:-18%; }
.atmosphere span:nth-child(2) { background:radial-gradient(ellipse,var(--a2),transparent 70%); top:18%; right:-20%; animation-delay:-9s; }
.atmosphere span:nth-child(3) { background:radial-gradient(ellipse,var(--a3),transparent 70%); top:62%; left:30%; animation-delay:-15s; }
@keyframes drift { to { transform:translate(7%,6%) scale(1.08); } }

header { display:flex; align-items:center; justify-content:space-between; padding-top:28px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:34px; font-weight:900; letter-spacing:-2px; line-height:1; text-decoration:none; }
.brand i { width:21px; height:21px; border-radius:50%; background:conic-gradient(from 200deg,#6E8A60,#A0583A,#7E6382,#6E8A60); }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:13px 26px; border:0; border-radius:100px; font:800 15px/1 var(--font); cursor:pointer; text-decoration:none; background:var(--green); color:var(--on-accent); box-shadow:0 8px 24px #5c7a4a40; transition:transform .2s, box-shadow .2s; }
.btn:hover { transform:translateY(-2px); box-shadow:0 12px 30px #5c7a4a50; }
.btn.small { min-height:44px; padding:10px 20px; font-size:14px; }

section { padding:0 0 84px; }
.hero { display:grid; grid-template-columns:1.02fr .98fr; gap:64px; align-items:center; padding:48px 0 88px; }
h1 { font-size:clamp(42px, 5.8vw, 78px); line-height:1.02; letter-spacing:-.055em; font-weight:800; margin:0 0 22px; text-wrap:balance; }
h1 em { font-style:normal; color:var(--green); display:block; }
.tag-line { font-size:1.2rem; font-weight:800; letter-spacing:-.02em; margin:0 0 8px; }
.lede { font-size:1.12rem; line-height:1.7; color:var(--soft); max-width:33rem; margin:0 0 28px; text-wrap:pretty; }
.access { display:flex; gap:6px; max-width:33rem; padding:6px; background:var(--surface); border:1px solid var(--edge); border-radius:100px; box-shadow:0 6px 28px #4a3a2a14; }
.access input[type=email] { flex:1 1 auto; min-width:0; font:inherit; font-size:16px; color:var(--ink); background:transparent; border:0; padding:12px 18px; }
.access input:focus-visible { outline:none; }
.access:focus-within { box-shadow:0 0 0 3px #9dbe8666, 0 6px 28px #4a3a2a14; }
.access .hp { position:absolute; left:-9999px; }
.status { min-height:1.5em; margin:10px 8px 0; font-weight:800; color:var(--green); }
.status.err { color:var(--ink); }
.btn:disabled { opacity:.6; cursor:default; transform:none; box-shadow:none; }
.why { margin:14px 8px 0; font-size:.95rem; color:var(--ink); max-width:32rem; }
.note { margin:4px 8px 0; font-size:.88rem; color:var(--soft); max-width:32rem; }
.note a { text-decoration:underline; text-underline-offset:3px; }

/* the Collection illustration */
.dex { background:var(--surface-strong); border:1px solid var(--edge); border-radius:36px; padding:20px; box-shadow:0 30px 70px -30px #4a3a2a40; backdrop-filter:blur(8px); margin:0; }
.dex-head { display:flex; align-items:center; justify-content:space-between; padding:2px 8px 14px; }
.dex-head h2 { font-size:1.15rem; font-weight:800; letter-spacing:-.02em; margin:0; }
.pause { min-width:44px; height:44px; border:0; border-radius:99px; background:transparent; color:var(--soft); cursor:pointer; font:700 .8rem var(--font); padding:0 12px; }
.pause:hover { background:var(--hover); }
.grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.tile { position:relative; aspect-ratio:1; border-radius:22px; overflow:hidden; background:color-mix(in srgb, var(--k) 8%, var(--tile)); border:1px solid color-mix(in srgb, var(--k) 14%, var(--rule)); isolation:isolate; }
.tile .sil { position:absolute; inset:17%; background:var(--sil); -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat; transition:opacity .5s .2s; }
.tile .ph { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; clip-path:circle(0% at 50% 50%); transition:clip-path .9s cubic-bezier(.2,.8,.2,1); }
.tile .shade { position:absolute; inset:0; background:linear-gradient(transparent 55%, #101a1299); opacity:0; transition:opacity .5s .4s; }
.tile .nm { position:absolute; left:10px; right:8px; bottom:8px; z-index:2; color:#fff; font-weight:800; font-size:clamp(.66rem, 1.4vw, .82rem); line-height:1.15; text-shadow:0 1px 6px #0008; opacity:0; transition:opacity .4s .5s; }
.chip { display:inline-flex; gap:4px; align-items:center; font-weight:900; font-size:.68rem; line-height:1; padding:5px 8px; border-radius:99px; background:#fffffff0; color:var(--c); }
.tile .chip { position:absolute; left:8px; top:8px; z-index:2; opacity:0; transform:translateY(-6px) scale(.9); transition:all .4s .45s; }
.tile .pulse { position:absolute; inset:0; z-index:3; border-radius:22px; border:3px solid var(--k); opacity:0; pointer-events:none; }
.tile.on .ph { clip-path:circle(80% at 50% 50%); }
.tile.on .sil { opacity:0; }
.tile.on .shade, .tile.on .nm { opacity:1; }
.tile.on .chip { opacity:1; transform:none; }
.tile.flash .pulse { animation:pulse .9s ease-out; }
@keyframes pulse { 0% { opacity:.9; transform:scale(.96); } 100% { opacity:0; transform:scale(1.06); } }
.k-p { --k:var(--green); } .k-b { --k:var(--clay); } .k-m { --k:var(--mauve); }
.dex-cap { margin:14px 8px 4px; font-size:.84rem; color:var(--soft); }
.dex-cap b { color:var(--ink); }

/* sections */
.sec-head { max-width:40rem; margin:0 0 30px; }
h2.big { font-size:clamp(30px, 4.2vw, 48px); line-height:1.06; letter-spacing:-.045em; font-weight:800; margin:0 0 12px; text-wrap:balance; }
.sec-head p { margin:0; color:var(--soft); font-size:1.05rem; }
.sec-head.center { margin-inline:auto; text-align:center; }
.video { width:min(340px, 100%); margin:0 auto; }
.video iframe { display:block; width:100%; aspect-ratio:9/19; border:0; background:transparent; color-scheme:normal; }
.video-note { margin:12px 0 0; text-align:center; font-size:.84rem; color:var(--soft); }


/* rarity: one row of chips, no photos */
.tiers { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin:0; padding:0; list-style:none; }
.tiers li { padding:20px 22px 22px; background:var(--surface); border:1px solid var(--edge); border-radius:26px; }
.rtag { display:inline-flex; gap:6px; align-items:center; font-weight:900; font-size:.85rem; padding:7px 13px; border-radius:99px; background:var(--t); color:var(--c); }
.tiers p { margin:12px 2px 0; font-size:.95rem; color:var(--soft); }
.secret { margin-top:14px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:24px 22px; background:var(--surface); border:1px solid var(--edge); border-radius:26px; }
.secret p { margin:0; max-width:34rem; font-size:.95rem; color:var(--soft); }
.holo { flex:none; display:inline-flex; gap:6px; font-weight:900; font-size:.85rem; padding:7px 13px; border-radius:99px; color:#2d2250; background:linear-gradient(100deg,#d3bcf7,#a8d4f2,#98e5cf,#f7bcd9,#d3bcf7); background-size:220% 100%; animation:holo 6s linear infinite; }
@keyframes holo { to { background-position:220% 0; } }

/* kingdoms: silhouette cards, no photos */
.cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.kcard { border-radius:32px; padding:30px 30px 34px; background:var(--bg); }
.kcard.p { --bg:var(--sage); --k:var(--green); } .kcard.b { --bg:var(--peach); --k:var(--clay); } .kcard.m { --bg:var(--lilac); --k:var(--mauve); }
.kcard .ic { width:64px; height:64px; margin-bottom:18px; background:var(--k); -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat; }
.kcard h3 { font-size:1.7rem; letter-spacing:-.04em; font-weight:800; margin:0 0 8px; color:var(--k); }
.kcard p { margin:0; color:var(--soft); font-size:1rem; }

.safety { display:flex; gap:16px; align-items:flex-start; max-width:46rem; padding:22px 26px; border-radius:26px; background:var(--warn-bg); border:1px solid var(--warn-edge); margin-bottom:72px; }
.safety svg { flex:none; width:24px; height:24px; margin-top:3px; stroke:var(--warn-icon); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.safety p { margin:0; font-size:.97rem; color:var(--warn-ink); }
.safety b { color:var(--ink); }

footer { display:flex; justify-content:space-between; gap:14px 28px; flex-wrap:wrap; padding:34px 0 52px; font-size:.85rem; color:var(--soft); border-top:1px solid var(--rule); }
footer nav { display:flex; gap:22px; flex-wrap:wrap; }
footer a:hover, footer .theme:hover { text-decoration:underline; text-underline-offset:4px; }
footer .theme { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }

@media (max-width:920px) {
  .hero { grid-template-columns:1fr; gap:44px; padding-top:20px; }
  .cards { grid-template-columns:1fr; max-width:520px; }
  .tiers { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:520px) { .wrap { width:calc(100% - 36px); } .grid { gap:7px; } .tiers { gap:10px; } .access { flex-wrap:wrap; border-radius:28px; } .access .btn { width:100%; } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation:none !important; transition:none !important; } }