/* ClankerGames — the visual system.
   Tokens are lifted verbatim from design/src/tokens.css. Nothing new is introduced
   here: same six accents, same three families, same grid-and-scanline stage. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500&display=swap');

:root{
  --bg-0:#05070d; --bg-1:#0a0e1a; --bg-2:#10162a; --bg-3:#1a2240;
  --line:rgba(124,92,255,.18); --line-strong:rgba(124,92,255,.4);
  --ink-0:#f4f4ff; --ink-1:#c8c8e0; --ink-2:#8a8aae; --ink-3:#50506e;
  --teal:#00ffd1; --pink:#ff2bd6; --yellow:#ffe600; --purple:#7c5cff; --red:#ff3355; --green:#3eff8b;
  --mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;
  --display:'Space Grotesk','Inter',ui-sans-serif,sans-serif;
  --sans:'Inter',ui-sans-serif,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--bg-0); color:var(--ink-0); font-family:var(--sans);
  font-size:14px; line-height:1.5; min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%} [hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--teal);color:var(--bg-0)}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-1)}
::-webkit-scrollbar-thumb{background:var(--bg-3)}
::-webkit-scrollbar-thumb:hover{background:var(--purple)}

/* the animated grid + scanline stage, exactly as the prototype */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(rgba(124,92,255,.07) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,rgba(124,92,255,.07) 1px,transparent 1px) 0 0/48px 48px,
    radial-gradient(ellipse at top,rgba(124,92,255,.18),transparent 60%),
    radial-gradient(ellipse at bottom right,rgba(255,43,214,.1),transparent 60%);
  animation:gridShift 40s linear infinite;
}
@keyframes gridShift{
  0%{background-position:0 0,0 0,center top,bottom right}
  100%{background-position:48px 48px,48px -48px,center top,bottom right}
}
body::after{
  content:''; position:fixed; inset:0; z-index:100; pointer-events:none; mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(0,255,209,.025) 2px,rgba(0,255,209,.025) 3px);
}
.page{position:relative;z-index:1}

.mono{font-family:var(--mono)}
.display{font-family:var(--display);letter-spacing:-.02em}

.chip{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 10px; border:1px solid var(--line-strong); background:rgba(124,92,255,.08);
  display:inline-flex; align-items:center; gap:6px;
}
.chip-live{border-color:var(--red);background:rgba(255,51,85,.12);color:var(--red)}
.chip-live::before{
  content:''; width:6px; height:6px; background:var(--red); border-radius:50%;
  box-shadow:0 0 8px var(--red); animation:pulse 1.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

.btn{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:12px 22px; border:1px solid var(--line-strong); background:var(--bg-2); color:var(--ink-0);
  cursor:pointer; transition:all .15s;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.btn:hover{background:var(--purple);border-color:var(--purple);box-shadow:0 0 16px rgba(124,92,255,.5)}
.btn-primary{background:var(--teal);border-color:var(--teal);color:var(--bg-0);font-weight:700}
.btn-primary:hover{background:var(--pink);border-color:var(--pink);color:var(--bg-0);box-shadow:0 0 24px rgba(255,43,214,.6)}
.btn-ghost{background:transparent}

.panel{background:rgba(10,14,26,.7);backdrop-filter:blur(8px);border:1px solid var(--line);position:relative}
.panel::before,.panel::after{content:'';position:absolute;width:12px;height:12px;border:1px solid var(--teal)}
.panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

.glow-teal{text-shadow:0 0 12px rgba(0,255,209,.7),0 0 24px rgba(0,255,209,.3)}
.glow-pink{text-shadow:0 0 12px rgba(255,43,214,.7),0 0 24px rgba(255,43,214,.3)}
.glow-yellow{text-shadow:0 0 12px rgba(255,230,0,.7),0 0 24px rgba(255,230,0,.3)}

/* ---- site chrome -------------------------------------------------- */
.nav{
  display:flex; align-items:center; gap:16px; padding:14px 22px;
  border-bottom:1px solid var(--line); background:rgba(5,7,13,.72); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:40; flex-wrap:wrap;
}
.nav .wordmark{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.03em}
.nav .wordmark b{color:var(--teal)}
.nav .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink-3)}
.nav .sp{margin-left:auto}
.nav a.lnk{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink-2);text-transform:uppercase}
.nav a.lnk:hover{color:var(--teal)}

.wrap{max-width:1400px;margin:0 auto;padding:0 22px}
.foot{
  max-width:1400px;margin:44px auto 40px;padding:22px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;color:var(--ink-3);line-height:2;
}
.foot b{color:var(--ink-2);font-weight:400}
.foot a{color:var(--ink-2);border-bottom:1px solid var(--line-strong)}

@media (prefers-reduced-motion:reduce){
  body::before{animation:none}
  .chip-live::before{animation:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}