/* ============ PUMPBOIS — single-theme 8-bit arcade (deliberately dark) ============ */
  :root{
    --crt:      #0b0b14;
    --panel:    #12121f;
    --panel-2:  #171728;
    --line:     #2a2a44;
    --phos:     #3bff6f;
    --phos-dim: #1e8f44;
    --pink:     #ff4fa3;
    --gold:     #ffd23f;
    --cyan:     #4fd8ff;
    --ink:      #e6f0e8;
    --ink-dim:  #8d97a6;
    --px: 4px; /* pixel unit */
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--crt);
    color:var(--ink);
    font-family:'VT323', 'Courier New', monospace;
    font-size:22px;
    line-height:1.45;
    overflow-x:hidden;
  }
  ::selection{ background:var(--phos); color:var(--crt); }

  h1,h2,h3,.btn,.chip,.tick{ font-family:'Press Start 2P', 'Courier New', monospace; }
  h1,h2,h3{ text-wrap:balance; }

  /* CRT scanlines + vignette */
  .crt::before{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:50;
    background:repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
    mix-blend-mode:multiply;
  }
  .crt::after{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:51;
    background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.5) 100%);
  }

  .pxbox{
    background:var(--panel);
    border:var(--px) solid var(--line);
    box-shadow: 0 var(--px) 0 0 #000, var(--px) 0 0 0 #000,
                calc(-1*var(--px)) 0 0 0 #000, 0 calc(-1*var(--px)) 0 0 #000;
  }

  .wrap{ max-width:1080px; margin:0 auto; padding:0 20px; }

  /* ---------- ticker ---------- */
  .tickerbar{
    position:relative; z-index:5; overflow:hidden; white-space:nowrap;
    background:var(--phos); color:var(--crt);
    border-bottom:var(--px) solid #000;
  }
  .tick{
    display:inline-block; padding:10px 0; font-size:11px; letter-spacing:1px;
    animation:marquee 22s linear infinite;
  }
  @keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

  /* ---------- hero ---------- */
  header{ position:relative; padding:72px 0 56px; text-align:center; }
  #stars{ position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; }
  .hero-inner{ position:relative; z-index:2; }
  .chip{
    display:inline-block; font-size:10px; letter-spacing:1px; padding:10px 14px;
    color:var(--gold); background:var(--panel); border:var(--px) solid var(--gold);
  }
  h1.logo{
    margin:34px 0 10px; font-size:clamp(38px, 8vw, 76px); line-height:1.05;
    color:var(--phos);
    text-shadow: 0 6px 0 var(--phos-dim), 0 12px 0 #063317, 6px 6px 0 rgba(0,0,0,.9);
  }
  h1.logo .accent{ color:var(--pink); text-shadow:0 6px 0 #8f1f57, 0 12px 0 #3d0d26, 6px 6px 0 rgba(0,0,0,.9); }
  .tagline{ font-size:26px; color:var(--ink-dim); margin:0 0 40px; }
  .tagline b{ color:var(--cyan); font-weight:normal; }

  .lcd{
    display:inline-block; padding:22px 26px; background:#0f1a10;
    border:var(--px) solid var(--phos-dim);
    box-shadow:0 0 0 var(--px) #000, 0 0 34px rgba(59,255,111,.18);
  }
  .lcd .label{ font-family:'Press Start 2P'; font-size:9px; color:var(--phos-dim); letter-spacing:2px; margin-bottom:14px; }
  .cd{ display:flex; gap:18px; justify-content:center; }
  .cd .cell{ text-align:center; }
  .cd .num{
    font-family:'Press Start 2P'; font-size:clamp(20px,4.5vw,34px); color:var(--phos);
    font-variant-numeric:tabular-nums; text-shadow:0 0 12px rgba(59,255,111,.55);
    min-width:2.2ch;
  }
  .cd .unit{ font-size:16px; color:var(--phos-dim); margin-top:8px; letter-spacing:2px; }
  .cd .sep{ font-family:'Press Start 2P'; font-size:26px; color:var(--phos-dim); align-self:center; }

  .press{ display:inline-block; margin:34px 0 26px; font-family:'Press Start 2P'; font-size:13px; color:var(--gold); letter-spacing:2px; animation:blink 1.1s steps(1) infinite; text-decoration:none; }
  @keyframes blink{ 50%{ opacity:0; } }

  .btnrow{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
  .btn{
    font-size:11px; letter-spacing:1px; text-decoration:none; cursor:pointer;
    padding:16px 22px; color:var(--crt); background:var(--phos);
    border:var(--px) solid #000; box-shadow:inset calc(-1*var(--px)) calc(-1*var(--px)) 0 0 var(--phos-dim), 0 var(--px) 0 0 #000;
  }
  .btn:hover{ transform:translateY(2px); box-shadow:inset calc(-1*var(--px)) calc(-1*var(--px)) 0 0 var(--phos-dim); }
  .btn:focus-visible{ outline:3px dashed var(--gold); outline-offset:3px; }
  .btn:disabled{ opacity:.55; cursor:not-allowed; }
  .btn.alt{ background:var(--panel); color:var(--pink); box-shadow:inset calc(-1*var(--px)) calc(-1*var(--px)) 0 0 #3d0d26, 0 var(--px) 0 0 #000; border-color:var(--pink); }
  .btn.gold{ background:var(--panel); color:var(--gold); box-shadow:inset calc(-1*var(--px)) calc(-1*var(--px)) 0 0 #5c4a0e, 0 var(--px) 0 0 #000; border-color:var(--gold); }
  .btn.cyan{ background:var(--panel); color:var(--cyan); box-shadow:inset calc(-1*var(--px)) calc(-1*var(--px)) 0 0 #14415c, 0 var(--px) 0 0 #000; border-color:var(--cyan); }

  /* ---------- CA panel ---------- */
  .ca{ margin:52px auto 0; max-width:720px; padding:20px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center; }
  .ca code{
    font-family:'VT323'; font-size:22px; color:var(--cyan); background:#0d1420;
    padding:10px 14px; border:var(--px) solid var(--line); word-break:break-all;
  }

  /* ---------- sections ---------- */
  section{ padding:74px 0; position:relative; z-index:2; }
  .eyebrow{ font-family:'Press Start 2P'; font-size:9px; letter-spacing:3px; color:var(--ink-dim); margin-bottom:14px; }
  h2{ font-size:clamp(18px,3.4vw,28px); margin:0 0 14px; color:var(--ink); }
  h2 .glyph{ color:var(--pink); }
  .lede{ max-width:62ch; color:var(--ink-dim); font-size:23px; margin:0 0 44px; }

  .grid3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; }
  .card{ padding:26px 24px; }
  .card h3{ font-size:13px; margin:18px 0 12px; }
  .card p{ margin:0; color:var(--ink-dim); font-size:21px; }
  .card .icon{
    width:56px; height:56px; display:grid; place-items:center;
    font-family:'Press Start 2P'; font-size:20px;
    border:var(--px) solid #000;
  }
  .icon.a{ background:var(--phos); color:var(--crt); }
  .icon.b{ background:var(--pink); color:var(--crt); }
  .icon.c{ background:var(--gold); color:var(--crt); }
  .card.a h3{ color:var(--phos); } .card.b h3{ color:var(--pink); } .card.c h3{ color:var(--gold); }

  /* ---------- arcade (agent runner) ---------- */
  .arcade{ padding:28px; }
  .arcade .quota{ font-family:'Press Start 2P'; font-size:9px; color:var(--cyan); letter-spacing:1px; margin-bottom:18px; }
  .runform{ display:flex; gap:14px; flex-wrap:wrap; }
  .runform input{
    flex:1; min-width:240px; font-family:'VT323'; font-size:23px;
    padding:14px 16px; color:var(--phos); background:#0d1420;
    border:var(--px) solid var(--line); outline:none;
  }
  .runform input:focus{ border-color:var(--phos-dim); }
  .runform input::placeholder{ color:#465166; }
  .runout{ margin-top:20px; }
  .runout pre{ margin:0; padding:20px 22px; font-family:'VT323'; font-size:21px; line-height:1.6; color:var(--phos); overflow-x:auto; white-space:pre-wrap; word-break:break-word; }
  .locked-note{ font-size:22px; color:var(--ink-dim); margin-top:18px; }
  .locked-note b{ color:var(--gold); font-weight:normal; }

  /* terminal feed */
  .term{ padding:0; overflow:hidden; }
  .term .bar{ display:flex; gap:8px; align-items:center; padding:12px 16px; background:var(--panel-2); border-bottom:var(--px) solid var(--line); font-family:'Press Start 2P'; font-size:9px; color:var(--ink-dim); letter-spacing:2px; }
  .term .dot{ width:12px; height:12px; background:var(--pink); }
  .term .dot.g{ background:var(--phos); } .term .dot.y{ background:var(--gold); }
  .term pre{ margin:0; padding:20px 22px; font-family:'VT323'; font-size:21px; line-height:1.6; color:var(--phos); overflow-x:auto; }
  .term .dim{ color:var(--ink-dim); } .term .p{ color:var(--pink); } .term .y{ color:var(--gold); } .term .cy{ color:var(--cyan); }

  /* world map roadmap */
  .world{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px; }
  .lvl{ padding:24px; }
  .lvl .tag{ font-family:'Press Start 2P'; font-size:10px; color:var(--cyan); }
  .lvl.boss .tag{ color:var(--pink); }
  .lvl h3{ font-size:12px; margin:14px 0 10px; color:var(--ink); }
  .lvl p{ margin:0; font-size:20px; color:var(--ink-dim); }
  .lvl .status{ display:inline-block; margin-top:16px; font-family:'Press Start 2P'; font-size:8px; letter-spacing:1px; padding:7px 10px; border:3px solid var(--line); color:var(--ink-dim); }
  .lvl .status.now{ border-color:var(--phos); color:var(--phos); }

  /* item shop tokenomics */
  .shop{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:22px; }
  .item{ padding:24px; text-align:center; }
  .item .val{ font-family:'Press Start 2P'; font-size:16px; color:var(--gold); font-variant-numeric:tabular-nums; }
  .item .key{ margin-top:12px; font-size:19px; color:var(--ink-dim); letter-spacing:1px; }

  footer{ padding:56px 0 72px; text-align:center; border-top:var(--px) solid var(--line); position:relative; z-index:2; }
  footer .heart{ color:var(--pink); }
  footer p{ color:var(--ink-dim); font-size:19px; max-width:70ch; margin:12px auto; }
  footer .links{ display:flex; gap:16px; justify-content:center; margin-bottom:22px; flex-wrap:wrap; }

  @media (prefers-reduced-motion: reduce){
    .tick, .press{ animation:none; }
    html{ scroll-behavior:auto; }
  }

/* ---------- mobile tuning ---------- */
@media (max-width: 560px){
  body{ font-size:20px; }
  header{ padding:52px 0 44px; }
  .lcd{ padding:16px 12px; }
  .cd{ gap:8px; }
  .cd .sep{ display:none; }
  .cd .num{ font-size:17px; }
  .cd .unit{ font-size:13px; letter-spacing:1px; }
  .tagline{ font-size:22px; }
  .lede{ font-size:21px; }
  section{ padding:56px 0; }
  .btn{ padding:14px 16px; font-size:10px; }
  .arcade{ padding:20px 16px; }
  .ca{ padding:16px; }
  .ca code{ font-size:19px; }
  .term pre, .runout pre{ font-size:19px; padding:16px; }
}