/* =========================================================================
   base.css — design tokens, reset, typography, layout primitives
   The Seed Is Planted · GSMG 5 BTC interactive game
   ========================================================================= */

:root{
  /* surfaces */
  --void:#070a11; --void2:#0c1019; --panel:#11161f; --panel2:#161c27; --panel3:#1c2433;
  --line:rgba(255,255,255,.075); --line2:rgba(255,255,255,.14); --line3:rgba(255,255,255,.22);

  /* ink */
  --paper:#e9ecf5; --muted:#8c95ab; --faint:#5b6479;

  /* accents */
  --blue:#5f8cff; --blue-deep:#27407e; --blue-glow:rgba(95,140,255,.18);
  --gold:#f2c14a; --gold-deep:#7d6320; --gold-glow:rgba(242,193,74,.16);
  --rust:#e76a4f; --rust-deep:#6b2c20; --rust-glow:rgba(231,106,79,.14);
  --teal:#37d6a8; --teal-deep:#155f4a;
  --violet:#b388ff; --pink:#ff7ab0; --lime:#9ed64a; --cyan:#4fd0e0;
  --good:#37d6a8; --bad:#e76a4f; --warn:#f2c14a;

  /* type */
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;

  /* metrics */
  --maxw:1140px;
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px;
  --shadow:0 18px 50px -22px rgba(0,0,0,.75);
  --shadow-sm:0 8px 24px -14px rgba(0,0,0,.7);
  --t:.18s cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--paper);
  font-family:var(--body);font-size:16px;line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;min-height:100vh;
  background-image:
    radial-gradient(1100px 620px at 82% -8%,var(--blue-glow),transparent 60%),
    radial-gradient(960px 560px at 8% 4%,var(--gold-glow),transparent 62%),
    radial-gradient(800px 700px at 50% 120%,var(--teal-deep),transparent 70%);
  background-attachment:fixed;
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms !important;transition-duration:.001ms !important} }

a{color:var(--blue);text-decoration:none;transition:color var(--t)}
a:hover{text-decoration:underline}
h1,h2,h3,h4,h5{font-family:var(--disp);font-weight:700;line-height:1.14;letter-spacing:-.01em;margin:0 0 .4em}
code,kbd,pre,.mono{font-family:var(--mono)}
p{margin:0 0 14px}
img{max-width:100%}
::selection{background:rgba(95,140,255,.32)}
hr{border:none;border-top:1px solid var(--line);margin:28px 0}

/* scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
*::-webkit-scrollbar{height:9px;width:9px}
*::-webkit-scrollbar-thumb{background:var(--line2);border-radius:9px}
*::-webkit-scrollbar-track{background:transparent}

/* layout primitives */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;width:100%}
.section{padding:54px 0;border-top:1px solid var(--line);position:relative}
.section:first-of-type{border-top:none}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--faint);margin:0 0 10px}
.grid{display:grid;gap:18px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:880px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

/* helpers */
.muted{color:var(--muted)} .faint{color:var(--faint)}
.gold{color:var(--gold)} .blue{color:var(--blue)} .teal{color:var(--teal)} .rust{color:var(--rust)} .violet{color:var(--violet)}
.mono{font-family:var(--mono)}
.center{text-align:center}
.nowrap{white-space:nowrap}
.break{word-break:break-all;overflow-wrap:anywhere}
.hidden{display:none !important}
.stack>*+*{margin-top:14px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* fade-in for routed views */
.view-enter{animation:viewIn .34s ease both}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}