/* ═══════════════════════════════════════════════════════════════════════
   Pokebot design system — shared by every page
   Palette: Gengar night (deep violet), plasma glow, ghost-pink, foil gold
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --bg0:#06030d; --bg1:#0c0718; --bg2:#130c24; --bg3:#1b1233; --bg4:#241a44;
  --line:rgba(178,140,255,.13); --line-2:rgba(178,140,255,.3);
  --violet:#a878ff; --violet-2:#7c3aed; --violet-3:#5b21b6;
  --pink:#ff5ea2; --gold:#ffc94d; --cyan:#3ee0d0; --green:#5effa6; --red:#ff5d5d;
  --text:#f2ecff; --muted:#a99bcf; --dim:#6f639a;
  --font-d:'Unbounded', 'Space Grotesk', system-ui, sans-serif;
  --font-b:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-m:ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --shadow:0 20px 60px rgba(0,0,0,.55);
  --ease:cubic-bezier(.2,.7,.2,1);
  --c-common:#8b93a7; --c-uncommon:#4f8cff; --c-rare:#ff5d5d; --c-holo:#22d3ee;
  --c-promo:#fb923c; --c-ultra:#e879f9; --c-sir:#c084fc; --c-mythical:#fbbf24;
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-b); background:var(--bg0); color:var(--text);
  min-height:100vh; line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a { color:inherit; }
img { max-width:100%; display:block; }
button { font:inherit; color:inherit; }
::selection { background:var(--violet); color:#0c0718; }
:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px; }

/* ── Ambient background: aurora blobs + stars + grid + grain ──────────── */
.bg { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg .blob { position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; will-change:transform; }
.bg .b1 { width:60vw; height:60vw; left:-15vw; top:-25vw; background:radial-gradient(circle, rgba(124,58,237,.7), transparent 65%); animation:blob1 26s ease-in-out infinite alternate; }
.bg .b2 { width:50vw; height:50vw; right:-18vw; top:-10vw; background:radial-gradient(circle, rgba(255,94,162,.42), transparent 65%); animation:blob2 32s ease-in-out infinite alternate; }
.bg .b3 { width:55vw; height:55vw; left:25vw; bottom:-30vw; background:radial-gradient(circle, rgba(62,224,208,.32), transparent 65%); animation:blob3 38s ease-in-out infinite alternate; }
@keyframes blob1 { to { transform:translate(12vw, 8vw) scale(1.15); } }
@keyframes blob2 { to { transform:translate(-10vw, 14vw) scale(.9); } }
@keyframes blob3 { to { transform:translate(-14vw, -8vw) scale(1.1); } }
.bg .grid {
  position:absolute; inset:0; opacity:.35;
  background-image:linear-gradient(rgba(178,140,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(178,140,255,.07) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 0%, #000 20%, transparent 100%);
          mask-image:radial-gradient(70% 60% at 50% 0%, #000 20%, transparent 100%);
}
.bg .stars {
  position:absolute; inset:-40%; opacity:.6;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 32% 44%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 58% 20%, rgba(255,255,255,.8), transparent), radial-gradient(1px 1px at 74% 66%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 88% 12%, #fff, transparent), radial-gradient(1px 1px at 20% 84%, rgba(255,255,255,.55), transparent),
    radial-gradient(2px 2px at 64% 90%, rgba(192,160,255,.7), transparent), radial-gradient(1px 1px at 44% 70%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 6% 56%, rgba(62,224,208,.8), transparent), radial-gradient(1px 1px at 92% 44%, rgba(255,94,162,.8), transparent);
  background-size:900px 900px; animation:drift 120s linear infinite;
}
@keyframes drift { from { transform:translate(0,0); } to { transform:translate(-6%, -5%); } }
.bg .grain {
  position:absolute; inset:0; opacity:.06; mix-blend-mode:overlay;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, header, footer, .page { position:relative; z-index:1; }
.wrap { width:min(1180px, 100% - 48px); margin-inline:auto; }

/* ── Navigation ───────────────────────────────────────────────────────── */
.nav { position:sticky; top:0; z-index:100; padding:12px 0; transition:background .3s, box-shadow .3s; }
.nav.scrolled { background:rgba(6,3,13,.72); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); box-shadow:0 1px 0 var(--line); }
.nav .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--font-d); font-weight:700; font-size:1rem; letter-spacing:-.01em; }
.brand img { width:36px; height:36px; border-radius:11px; box-shadow:0 0 0 1px var(--line-2), 0 6px 18px rgba(124,58,237,.5); }
.brand b { color:var(--violet); }
.links { display:flex; align-items:center; gap:4px; }
.links a { padding:8px 14px; border-radius:10px; font-size:.88rem; font-weight:600; color:var(--muted); text-decoration:none; transition:.18s; white-space:nowrap; }
.links a:hover, .links a.active { color:var(--text); background:rgba(255,255,255,.06); }
.links .btn { margin-left:8px; color:#fff; }
.pill { display:inline-flex; align-items:center; gap:8px; padding:4px 12px 4px 4px; border-radius:24px; background:var(--bg2); border:1px solid var(--line-2); font-size:.85rem; font-weight:600; text-decoration:none; color:var(--text) !important; }
.pill img { width:26px; height:26px; border-radius:50%; }
.menu-btn { display:none; width:42px; height:42px; border-radius:11px; border:1px solid var(--line-2); background:rgba(255,255,255,.03); cursor:pointer; place-items:center; }
.menu-btn span { display:block; width:18px; height:2px; background:var(--text); border-radius:2px; box-shadow:0 -6px 0 var(--text), 0 6px 0 var(--text); }

/* ── Buttons & chips ──────────────────────────────────────────────────── */
.btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 24px; border-radius:13px; font-weight:700; font-size:.95rem; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .2s var(--ease), box-shadow .2s, filter .2s, border-color .2s, background .2s; white-space:nowrap; }
.btn:active { transform:scale(.97); }
.btn-primary { color:#fff; background:linear-gradient(135deg, var(--violet) 0%, var(--violet-2) 55%, #5b21b6 100%); box-shadow:0 10px 30px rgba(124,58,237,.45), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-primary:hover { transform:translateY(-2px); filter:brightness(1.1); box-shadow:0 14px 40px rgba(124,58,237,.6), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-ghost { color:var(--text); background:rgba(255,255,255,.03); border-color:var(--line-2); }
.btn-ghost:hover { transform:translateY(-2px); border-color:var(--violet); background:rgba(168,120,255,.08); }
.btn-pink { color:#fff; background:linear-gradient(135deg, #ff6fae, #e0367e); box-shadow:0 10px 30px rgba(255,94,162,.35); }
.btn-pink:hover { transform:translateY(-2px); filter:brightness(1.08); }
.btn-sm { padding:9px 16px; font-size:.85rem; border-radius:10px; }
.btn .ico { width:18px; height:18px; }
.chip { display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:24px; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:rgba(168,120,255,.12); border:1px solid rgba(168,120,255,.4); color:#d9c4ff; }
.chip .dot { width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.4; transform:scale(.8); } }
.kbd, code.cmd { font-family:var(--font-m); font-size:.84em; padding:2px 8px; border-radius:7px; background:rgba(255,255,255,.06); border:1px solid var(--line-2); color:#d9c4ff; white-space:nowrap; }

/* ── Panels ───────────────────────────────────────────────────────────── */
.panel { position:relative; background:linear-gradient(180deg, rgba(27,18,51,.7), rgba(12,7,24,.85)); border:1px solid var(--line); border-radius:var(--r-lg); transition:transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.panel::before { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%); }
.panel.lift:hover { transform:translateY(-4px); border-color:var(--line-2); box-shadow:0 18px 44px rgba(124,58,237,.22); }

/* ── Typography helpers ───────────────────────────────────────────────── */
.eyebrow { font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--violet); }
.h-section { font-family:var(--font-d); font-weight:700; font-size:clamp(1.5rem, 3vw, 2.2rem); letter-spacing:-.02em; line-height:1.15; margin:8px 0 12px; }
.grad { background:linear-gradient(100deg, var(--violet) 0%, var(--pink) 50%, var(--gold) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lead { color:var(--muted); font-size:1.05rem; max-width:56ch; }
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:28px; }
.sec-head p { color:var(--muted); max-width:52ch; }
section.blk { padding:72px 0; }

/* ── Rarity accents ───────────────────────────────────────────────────── */
.rar-common { --rc:var(--c-common); } .rar-uncommon { --rc:var(--c-uncommon); } .rar-rare { --rc:var(--c-rare); }
.rar-holo { --rc:var(--c-holo); } .rar-promo { --rc:var(--c-promo); } .rar-ultra { --rc:var(--c-ultra); } .rar-sir { --rc:var(--c-sir); } .rar-mythical { --rc:var(--c-mythical); }
.rdot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--rc, var(--muted)); box-shadow:0 0 8px var(--rc, transparent); flex:none; }
.rtag { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:8px; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--rc, var(--muted)); background:color-mix(in srgb, var(--rc, #888) 14%, transparent); border:1px solid color-mix(in srgb, var(--rc, #888) 45%, transparent); }

/* ── Holographic card (shared by hero, dashboard grid + modal) ────────── */
.holo-card { position:relative; aspect-ratio:600/825; border-radius:4.5% / 3.3%; transform-style:preserve-3d; overflow:hidden; background:linear-gradient(160deg, #241640, #120a24); box-shadow:0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); transition:transform .35s var(--ease), box-shadow .35s; will-change:transform; --rx:0deg; --ry:0deg; --mx:50%; --my:50%; transform:rotateX(var(--rx)) rotateY(var(--ry)); }
.holo-card.tilting { transition:transform .06s linear, box-shadow .35s; }
.holo-card img { width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s; }
.holo-card img.loaded { opacity:1; }
.holo-card .glare { position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light; opacity:0; transition:opacity .35s; background:radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255,255,255,.9) 0%, rgba(255,255,255,.35) 25%, rgba(0,0,0,.4) 90%); }
.holo-card .foil { position:absolute; inset:0; pointer-events:none; mix-blend-mode:color-dodge; opacity:0; transition:opacity .35s; background:
  linear-gradient(115deg, transparent 20%, rgba(255,94,162,.55) 36%, rgba(255,201,77,.55) 44%, rgba(94,255,166,.55) 52%, rgba(62,224,208,.55) 60%, rgba(168,120,255,.55) 68%, transparent 84%);
  background-size:300% 300%; background-position:calc(var(--mx) * 1.2) calc(var(--my) * 1.2); filter:brightness(.7) contrast(1.4) saturate(1.2); }
.holo-card.is-holo .foil { opacity:.35; animation:foilidle 7s ease-in-out infinite alternate; }
.holo-card.active .glare { opacity:.75; } .holo-card.active .foil { opacity:.8; animation:none; }
@keyframes foilidle { from { background-position:0% 0%; } to { background-position:100% 100%; } }
.holo-card .sk { position:absolute; inset:0; background:linear-gradient(160deg, #2b1c4d, #140b28); }
.holo-card .sk::after { content:''; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); animation:shimmer 1.6s infinite; }
.holo-card img.loaded ~ .sk { display:none; }

/* ── Scroll reveal (content visible by default; JS opts in) ───────────── */
.js .reveal { opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in { opacity:1; transform:none; }
.js .reveal[data-delay="1"] { transition-delay:.08s; } .js .reveal[data-delay="2"] { transition-delay:.16s; } .js .reveal[data-delay="3"] { transition-delay:.24s; }

/* ── Skeletons ────────────────────────────────────────────────────────── */
.skel { position:relative; overflow:hidden; background:rgba(255,255,255,.05); border-radius:10px; }
.skel::after { content:''; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); animation:shimmer 1.4s infinite; }
@keyframes shimmer { to { transform:translateX(100%); } }

/* ── Footer ───────────────────────────────────────────────────────────── */
footer { margin-top:80px; border-top:1px solid var(--line); background:linear-gradient(180deg, transparent, rgba(12,7,24,.8)); }
.foot { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px; padding:44px 0 28px; }
.foot h4 { font-family:var(--font-d); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.foot a { display:block; color:var(--muted); text-decoration:none; font-size:.9rem; padding:4px 0; transition:.15s; }
.foot a:hover { color:var(--violet); transform:translateX(3px); }
.foot .about p { color:var(--muted); font-size:.9rem; max-width:34ch; margin-top:10px; }
.foot-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:18px 0 26px; border-top:1px solid var(--line); font-size:.8rem; color:var(--dim); }
.foot-bottom b { color:var(--muted); font-weight:600; }

/* ── Toast + back to top ──────────────────────────────────────────────── */
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%, 20px); opacity:0; z-index:500; padding:10px 18px; border-radius:12px; background:var(--bg3); border:1px solid var(--line-2); box-shadow:var(--shadow); font-size:.88rem; font-weight:600; transition:.25s var(--ease); pointer-events:none; }
.toast.show { opacity:1; transform:translate(-50%, 0); }
.totop { position:fixed; right:22px; bottom:22px; z-index:90; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); background:rgba(19,12,36,.85); backdrop-filter:blur(8px); color:var(--text); cursor:pointer; display:grid; place-items:center; opacity:0; transform:translateY(12px); pointer-events:none; transition:.25s var(--ease); }
.totop.show { opacity:1; transform:none; pointer-events:auto; }
.totop:hover { border-color:var(--violet); color:var(--violet); }

/* ── Legal / long-form pages ──────────────────────────────────────────── */
.legal { display:grid; grid-template-columns:240px 1fr; gap:48px; padding:56px 0 40px; align-items:start; }
.legal .toc { position:sticky; top:84px; }
.legal .toc h4 { font-family:var(--font-d); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.legal .toc a { display:block; padding:6px 10px; border-left:2px solid var(--line); color:var(--muted); text-decoration:none; font-size:.84rem; transition:.15s; }
.legal .toc a:hover, .legal .toc a.active { color:var(--text); border-color:var(--violet); background:rgba(168,120,255,.06); }
.legal article h1 { font-family:var(--font-d); font-size:clamp(1.8rem, 4vw, 2.6rem); letter-spacing:-.02em; margin-bottom:6px; }
.legal article .meta { color:var(--muted); font-size:.9rem; margin-bottom:28px; }
.legal article h2 { font-family:var(--font-d); font-size:1.15rem; margin:36px 0 12px; padding-top:8px; scroll-margin-top:90px; }
.legal article p, .legal article li { color:#cfc3ea; font-size:.98rem; }
.legal article p { margin-bottom:14px; }
.legal article ul { margin:0 0 16px 20px; }
.legal article li { margin:6px 0; }
.legal article a { color:var(--violet); }
.legal article .callout { padding:16px 18px; border-radius:14px; background:rgba(168,120,255,.08); border:1px solid rgba(168,120,255,.3); margin:8px 0 20px; }
.page-hero { padding:64px 0 24px; }
.page-hero h1 { font-family:var(--font-d); font-size:clamp(2rem, 5vw, 3.2rem); letter-spacing:-.03em; line-height:1.05; margin:10px 0 12px; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width:960px) { .foot { grid-template-columns:1fr 1fr; } .legal { grid-template-columns:1fr; gap:24px; } .legal .toc { position:static; display:flex; flex-wrap:wrap; gap:6px; } .legal .toc h4 { width:100%; } .legal .toc a { border:1px solid var(--line); border-radius:8px; } }
@media (max-width:720px) {
  .wrap { width:min(1180px, 100% - 32px); }
  .menu-btn { display:grid; }
  .links { position:fixed; top:66px; left:16px; right:16px; flex-direction:column; align-items:stretch; gap:4px; padding:10px; border-radius:16px; background:rgba(13,8,25,.97); border:1px solid var(--line-2); box-shadow:var(--shadow); opacity:0; pointer-events:none; transform:translateY(-8px) scale(.98); transition:.2s var(--ease); }
  .links.open { opacity:1; pointer-events:auto; transform:none; }
  .links a { padding:12px 14px; }
  .links .btn { margin:6px 0 0; }
  .foot { grid-template-columns:1fr; gap:20px; }
  section.blk { padding:52px 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
  .js .reveal { opacity:1; transform:none; }
}