/* 8Legs 8-bit design system — P3
   Self-hosted fonts, 21-colour palette, pixel components */

/* ── Fonts ── */
@font-face{font-family:'Press Start 2P';src:url('/assets/fonts/press-start-2p.woff2') format('woff2');font-display:swap;font-weight:400;font-style:normal}
@font-face{font-family:'VT323';src:url('/assets/fonts/vt323.woff2') format('woff2');font-display:swap;font-weight:400;font-style:normal}

/* ── Palette ── */
:root{
  --void:#07070d;--deep:#0f1b2d;--sea:#16324a;--sea2:#1f5070;--sea3:#2f7fa0;
  --foam:#7ee6ff;--white:#f4f0e6;--gray:#8b8f80;--lime:#c6ff3d;--weed:#3dbb4a;
  --mint:#3dff8a;--magenta:#ff3dbb;--violet:#9b7bff;--coral:#ff5a5f;
  --coral2:#b8233f;--coral3:#5a0f2a;--gold:#ffc93d;--orange:#ff8a3d;
  --sand2:#3a2a1c;--sand:#6b5233;--blush:#ffb3a8;
  --pxb-border:var(--sea3);
}

/* ── Reset ── */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--void);color:var(--white);font-family:'VT323',monospace;font-size:24px;line-height:1.15}

/* ── Pixel box (.pxb) ── */
.pxb{
  --b:var(--pxb-border);
  background:var(--deep);
  box-shadow:
    0 -4px 0 0 var(--b),
    0 4px 0 0 var(--b),
    -4px 0 0 0 var(--b),
    4px 0 0 0 var(--b),
    0 8px 0 0 var(--void);
}

/* ── Pixel buttons ── */
.btn{font:12px 'Press Start 2P';padding:14px 18px;display:inline-block;cursor:pointer;border:none;text-decoration:none;text-transform:uppercase;letter-spacing:1px;image-rendering:pixelated}
.btn.p{
  background:var(--lime);color:var(--void);
  box-shadow:0 -4px 0 0 var(--void),0 4px 0 0 var(--void),-4px 0 0 0 var(--void),4px 0 0 0 var(--void),
    inset -4px -4px 0 0 #7fb81f,0 8px 0 0 #3d5a0e;
}
.btn.p:hover{background:#d4ff66}
.btn.p:active{box-shadow:0 -4px 0 0 var(--void),0 4px 0 0 var(--void),-4px 0 0 0 var(--void),4px 0 0 0 var(--void),inset 4px 4px 0 0 #7fb81f,0 4px 0 0 #3d5a0e;transform:translateY(4px)}
.btn.s{
  background:var(--deep);color:var(--white);
  box-shadow:0 -4px 0 0 var(--foam),0 4px 0 0 var(--foam),-4px 0 0 0 var(--foam),4px 0 0 0 var(--foam),0 8px 0 0 var(--void);
}
.btn.s:hover{background:var(--sea)}
.btn.r{
  background:var(--coral3);color:var(--coral);
  box-shadow:0 -4px 0 0 var(--coral),0 4px 0 0 var(--coral),-4px 0 0 0 var(--coral),4px 0 0 0 var(--coral),0 8px 0 0 var(--void);
}

/* ── Pixel inputs ── */
.px-input{
  font:14px 'Press Start 2P';background:var(--void);color:var(--white);border:none;padding:12px 16px;
  box-shadow:0 -4px 0 0 var(--sea3),0 4px 0 0 var(--sea3),-4px 0 0 0 var(--sea3),4px 0 0 0 var(--sea3);
  outline:none;width:100%;
}
.px-input:focus{box-shadow:0 -4px 0 0 var(--lime),0 4px 0 0 var(--lime),-4px 0 0 0 var(--lime),4px 0 0 0 var(--lime)}
.px-select{
  font:12px 'Press Start 2P';background:var(--void);color:var(--white);border:none;padding:12px 16px;
  box-shadow:0 -4px 0 0 var(--sea3),0 4px 0 0 var(--sea3),-4px 0 0 0 var(--sea3),4px 0 0 0 var(--sea3);
  outline:none;width:100%;appearance:none;cursor:pointer;
}

/* ── Pixel tables ── */
.px-table{width:100%;border-collapse:separate;border-spacing:0;font:12px 'Press Start 2P'}
.px-table th{color:var(--gray);font-size:8px;text-align:left;padding:8px;border-bottom:4px solid var(--sea);text-transform:uppercase;letter-spacing:2px}
.px-table td{padding:8px;border-bottom:4px solid var(--sea);color:var(--white);font-size:10px}
.px-table tr:hover td{background:var(--deep)}

/* ── Pixel toast ── */
.px-toast{
  position:fixed;top:20px;right:20px;z-index:100;
  font:10px 'Press Start 2P';padding:12px 16px;
  opacity:0;transform:translateY(-8px);
  transition:opacity .3s steps(4),transform .3s steps(4);
}
.px-toast.show{opacity:1;transform:translateY(0)}

/* ── Pixel progress bar ── */
.px-bar{height:12px;background:var(--sea);position:relative;overflow:hidden}
.px-bar i{display:block;height:100%;background:var(--lime);transition:width .5s steps(10)}

/* ── Section header ── */
.sec-hdr{font:12px 'Press Start 2P';color:var(--magenta);letter-spacing:2px;text-transform:uppercase;margin-bottom:12px}
.sec-hdr::before{content:'> '}

/* ── Scanline overlay ── */
.scan{position:absolute;inset:0;pointer-events:none;z-index:2;background:repeating-linear-gradient(to bottom,transparent 0 6px,rgba(0,0,0,.16) 6px 8px)}

/* ── Nav ── */
.px-nav{display:flex;align-items:center;gap:28px;padding:0 48px;height:72px;border-bottom:4px solid var(--sea);background:var(--void);position:relative;z-index:10}
.px-nav .lg{display:flex;align-items:center;gap:12px;font:16px 'Press Start 2P';color:var(--white);text-decoration:none}
.px-nav .lg b{color:var(--lime);font-weight:normal}
.px-nav a{color:var(--gray);text-decoration:none;font:10px 'Press Start 2P'}
.px-nav a:hover{color:var(--lime)}
.px-nav .sp{flex:1}
.px-nav .ca{font:9px 'Press Start 2P';color:var(--lime);padding:8px 12px}

/* ── Blink animation ── */
@keyframes bl{50%{opacity:.35}}
.blink{animation:bl 1s steps(2) infinite}

/* ── Card flash ── */
@keyframes fl{50%{background:var(--c,var(--lime))}}

/* ── Ticker ── */
.px-ticker{position:absolute;left:0;right:0;bottom:0;height:44px;background:var(--void);border-top:4px solid var(--sea);z-index:3;overflow:hidden}
.px-ticker .rail{position:absolute;top:13px;white-space:nowrap;font:12px 'Press Start 2P';color:#c2c8d0}
.px-ticker .rail i{font-style:normal;margin:0 26px}
.px-ticker .k{color:var(--coral)}.px-ticker .g{color:var(--lime)}.px-ticker .y{color:var(--gold)}.px-ticker .c{color:var(--foam)}

/* ── Helpers ── */
.sp{flex:1}
.hidden{display:none!important}
.g{color:var(--mint)}.r{color:var(--coral)}.a{color:var(--gold)}.m{color:var(--gray)}

/* ── Footer ── */
.px-foot{padding:24px 48px;color:var(--gray);font:10px 'Press Start 2P';text-align:center;border-top:4px solid var(--sea)}
.px-foot .ca-warn{color:var(--gold);margin-bottom:8px;display:block}

/* ── Mobile 390px ── */
@media(max-width:480px){
  .px-nav{padding:0 16px;height:56px;gap:12px}
  .px-nav .lg{font-size:12px;gap:8px}
  .px-nav a{font-size:8px}
  .px-nav .ca{display:none}
  .px-foot{padding:16px;font-size:8px}
  .btn{font-size:10px;padding:10px 12px;white-space:normal;max-width:100%}
  .px-nav > a:not(.lg){display:none}
  .px-nav .btn{font-size:8px;padding:8px 10px}
}

/* ── Tabs (assets/nav.js) ── */
.px-tabs{display:flex;align-items:center;gap:6px}
.px-tabs .tab{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;font:9px 'Press Start 2P';color:var(--gray);
  text-decoration:none;background:transparent;border:none;cursor:pointer;position:relative;white-space:nowrap}
.px-tabs .tab .ti{flex:none}
.px-tabs .tab:hover{color:var(--white);background:var(--deep)}
.px-tabs .tab.on{color:var(--void);background:var(--lime);box-shadow:0 4px 0 0 var(--weed)}
.px-tabs .tab.snd{color:var(--foam)}.px-tabs .tab.snd.muted{color:var(--gray)}
.px-tabs .tab[hidden]{display:none}
@media(max-width:760px){
  .px-tabs{position:fixed;left:0;right:0;bottom:0;z-index:60;justify-content:space-around;gap:0;padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    background:var(--void);border-top:4px solid var(--sea)}
  .px-tabs .tab{flex-direction:column;gap:5px;padding:7px 4px;font-size:7px;flex:1;justify-content:center}
  .px-tabs .tab .ti{width:18px;height:18px}
  .px-tabs .tab.on{box-shadow:none}
  body.has-tabs{padding-bottom:76px}
}

/* ── Copy-CA chips (assets/nav.js caTools) ── */
.ca-tools{display:inline-flex;gap:4px;margin-left:8px;vertical-align:middle}
.ca-btn{font:7px 'Press Start 2P';color:var(--foam);background:var(--sea);border:none;padding:4px 5px;cursor:pointer;text-decoration:none;line-height:1}
.ca-btn:hover{background:var(--sea2);color:var(--white)}.ca-btn.copied{background:var(--lime);color:var(--void)}