/* PUMPLINE site — one shared shell for every page (landing, shop, legal,
   profiles). Mirrors the in-app design language: dark grid, sheet cards
   with soft-cyan borders and 18–24px radii, Chakra Petch display, Plex
   Mono labels, cyan brand / amber commerce accents. Keep the tokens in
   sync with resources/ui/theme.tres + scripts/ui/ui_kit.gd. */

:root {
  --bg:#0a0e17; --bg2:#0b1220; --ghost:rgba(16,22,35,.7);
  --stroke:#1c2536; --stroke-cy:rgba(0,229,255,.45);
  --stroke-cy-soft:rgba(0,229,255,.16);
  --hi:#e8f0f8; --mid:#8fa0b8; --dim:#52627a;
  --cyan:#00e5ff; --amber:#ffb800; --green:#00ff88; --red:#ff2e63;
  --r-card:18px; --r-sheet:24px; --r-btn:14px; --r-chip:12px;
}
* { box-sizing:border-box; margin:0; }
body {
  background:var(--bg); color:var(--hi);
  font:17px/1.6 'Barlow', system-ui, sans-serif;
  background-image:
    linear-gradient(var(--stroke) 1px, transparent 1px),
    linear-gradient(90deg, var(--stroke) 1px, transparent 1px);
  background-size:80px 80px;
  min-height:100vh; display:flex; flex-direction:column;
}
.wrap { max-width:880px; margin:0 auto; padding:0 24px 56px; width:100%; flex:1; }

/* --- nav ---------------------------------------------------------------- */
nav {
  display:flex; align-items:baseline; gap:26px; flex-wrap:wrap;
  padding:26px 0 22px; margin-bottom:34px;
  border-bottom:1px solid var(--stroke);
}
nav .logo {
  font:700 22px 'Chakra Petch', sans-serif; color:var(--cyan);
  letter-spacing:.04em; text-decoration:none; margin-right:auto;
}
nav a { color:var(--mid); text-decoration:none;
        font:600 13px 'IBM Plex Mono', monospace; letter-spacing:.14em; }
nav a:hover { color:var(--hi); }
nav a.active { color:var(--cyan); }

/* --- type --------------------------------------------------------------- */
.ticker { font:600 12px/1 'IBM Plex Mono', monospace; letter-spacing:.22em;
          color:var(--cyan); text-transform:uppercase; margin-bottom:18px; }
h1 { font:700 clamp(40px,9vw,72px)/1.05 'Chakra Petch', sans-serif;
     color:var(--cyan); letter-spacing:.02em; }
h1.mega { font-size:clamp(56px,12vw,104px); }
.tag { font:400 16px 'IBM Plex Mono', monospace; color:var(--mid);
       margin:12px 0 36px; }
h2 { font:700 15px 'IBM Plex Mono', monospace; letter-spacing:.14em;
     color:var(--dim); text-transform:uppercase; margin:34px 0 12px; }
.prose h2 { color:var(--cyan); }
.prose p, .prose li { color:var(--mid); font-size:16px; }
.prose ul { padding-left:22px; margin:10px 0; }
.prose li { margin-bottom:8px; }
.prose b { color:var(--hi); font-weight:600; }
.prose a { color:var(--cyan); text-decoration:none; }
.updated { font:400 13px 'IBM Plex Mono', monospace; color:var(--dim); }

/* --- components ---------------------------------------------------------- */
a { color:var(--cyan); }
/* Sheet panel — the app's bottom-sheet skin: darker fill, soft cyan border,
   big radius. Used for anything that frames a task (auth, dialogs, CTAs). */
.panel { background:rgba(11,18,32,.94); border:1px solid var(--stroke-cy);
         border-radius:var(--r-sheet); padding:26px; margin-bottom:20px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
        gap:14px; }
/* Cards — quiet by default (app ghost fill), cyan-tinted edge on hover so
   the grid feels alive without shouting. */
.card, .prod { background:var(--ghost); border:1px solid var(--stroke);
        border-radius:var(--r-card); padding:20px;
        transition:border-color .18s ease; }
.card:hover, .prod:hover { border-color:var(--stroke-cy-soft); }
.card h3, .prod h3 { font:700 17px 'Chakra Petch', sans-serif; color:var(--hi);
                     margin-bottom:8px; }
.card h3 span { color:var(--cyan); }
.prod h3 span { color:var(--amber); }
.card p, .prod p { font-size:14px; color:var(--mid); }
.prod { display:flex; flex-direction:column; gap:8px; }
.prod p { flex:1; }
.row { display:flex; gap:14px; flex-wrap:wrap; }
.badge { border:1px solid var(--stroke); background:var(--ghost); color:var(--mid);
         padding:14px 22px; border-radius:var(--r-btn);
         font:600 14px 'IBM Plex Mono', monospace; letter-spacing:.1em; }
.badge.cta { background:var(--cyan); color:#041018; border:0; }
.btn { display:inline-block; border:1px solid var(--stroke); background:var(--ghost);
       color:var(--hi); padding:13px 22px; border-radius:var(--r-btn); cursor:pointer;
       font:600 14px 'IBM Plex Mono', monospace; letter-spacing:.08em;
       text-decoration:none; }
.btn:hover { border-color:var(--stroke-cy-soft); }
.btn.cta { background:var(--cyan); color:#041018; border:0; }
.btn.cta:hover { filter:brightness(1.08); }
.btn.amber { background:var(--amber); color:#241a04; border:0; }
.btn.amber:hover { filter:brightness(1.08); }
.btn.ghost { color:var(--mid); }
.btn[disabled] { opacity:.45; cursor:default; }
.price { font:600 15px 'IBM Plex Mono', monospace; color:var(--hi); }
.owned { font:600 13px 'IBM Plex Mono', monospace; color:var(--green);
         letter-spacing:.1em; }
.err { color:var(--red); font:400 13px 'IBM Plex Mono', monospace; margin-top:10px; }
.note { font:400 13px 'IBM Plex Mono', monospace; color:var(--dim); margin-top:24px; }
.note a { color:var(--mid); }
.shot { width:100%; max-width:420px; border:1px solid var(--stroke);
        border-radius:var(--r-card); display:block; margin:0 auto 56px; }
.hidden { display:none; }

/* --- official store badges ---------------------------------------------- */
.stores { display:flex; gap:14px; align-items:stretch; flex-wrap:wrap; }
.stores .store { display:inline-block; line-height:0; }
.stores .store img { height:52px; width:auto; display:block; }
/* Any button riding in the badge row matches the badges' 52px box. */
.stores .btn { display:inline-flex; align-items:center; height:52px;
               padding-top:0; padding-bottom:0; }
/* Pre-launch: badges render dimmed and inert with a SOON tag under them. */
.stores .store.soon { position:relative; opacity:.55; filter:saturate(.4);
                      pointer-events:none; }
.stores .store.soon::after {
  content:"SOON"; position:absolute; left:50%; bottom:-16px;
  transform:translateX(-50%);
  font:600 10px 'IBM Plex Mono', monospace; letter-spacing:.3em;
  color:var(--dim); line-height:1;
}
.stores.pad-soon { margin-bottom:16px; }

/* --- footer --------------------------------------------------------------- */
footer {
  font:400 13px 'IBM Plex Mono', monospace; color:var(--dim);
  border-top:1px solid var(--stroke); padding:24px;
  display:flex; gap:18px; flex-wrap:wrap; justify-content:center;
}
footer a { color:var(--mid); text-decoration:none; }
footer a:hover { color:var(--hi); }

/* --- ambient arcade background ------------------------------------------ */
#arcade-bg { position:fixed; inset:0; z-index:0; pointer-events:none; }
.wrap, footer, nav { position:relative; z-index:1; }