/* ============ BLKBULL design system ============ */
:root{
  --bg:#0a0709;
  --bg2:#120c10;
  --panel:#151016;
  --line:#2a1f2b;
  --primary:#ff3b47;   /* crimson */
  --accent:#9b5cff;    /* arcane purple */
  --gold:#ffd23f;
  --ink:#f2efe8;
  --dim:#8a8496;
  --danger:#ff3b47;
  --ok:#5cff9b;
  --shadow-p:0 0 18px rgba(255,59,71,.35);
  --shadow-a:0 0 18px rgba(155,92,255,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Space Grotesk',system-ui,sans-serif;
  overflow-x:hidden;
  line-height:1.6;
}
::selection{background:var(--primary);color:var(--bg)}

/* fonts roles */
.px{font-family:'Press Start 2P',monospace}
.mono{font-family:'VT323',monospace}

/* canvas bg + CRT */
#bgfx{position:fixed;inset:0;z-index:-2;width:100%;height:100%}
.crt::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* marquee */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(21,16,22,.85);overflow:hidden;white-space:nowrap;
  padding:.55rem 0;position:relative;z-index:5;
}
.marquee-inner{display:inline-block;animation:mq 28s linear infinite;
  font-family:'VT323',monospace;font-size:1.15rem;color:var(--gold);letter-spacing:.12em}
.marquee-inner b{color:var(--primary)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* nav */
nav{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1rem;
  padding:.8rem 1.2rem;background:rgba(10,7,9,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.logo{font-family:'Press Start 2P',monospace;font-size:.85rem;color:var(--ink);text-decoration:none}
.logo span{color:var(--primary)}
.navlinks{display:flex;gap:1.1rem;margin-left:auto;align-items:center;flex-wrap:wrap}
.navlinks a{color:var(--dim);text-decoration:none;font-family:'VT323',monospace;font-size:1.1rem;letter-spacing:.06em}
.navlinks a:hover,.navlinks a:focus-visible{color:var(--gold)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* pixel button */
.btn{
  display:inline-block;font-family:'Press Start 2P',monospace;font-size:.7rem;
  padding:.85rem 1.2rem;color:var(--bg);background:var(--primary);
  text-decoration:none;border:none;cursor:pointer;
  box-shadow:0 4px 0 #8d1620, var(--shadow-p);
  transition:transform .06s,box-shadow .06s;user-select:none;
}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 #8d1620}
.btn.alt{background:var(--accent);box-shadow:0 4px 0 #4b2b85, var(--shadow-a)}
.btn.alt:active{box-shadow:0 0 0 #4b2b85}
.btn.ghost{background:transparent;color:var(--gold);box-shadow:inset 0 0 0 2px var(--gold)}
.btn.ghost:active{transform:translateY(2px)}

/* section frame */
section{position:relative;max-width:1100px;margin:0 auto;padding:4.5rem 1.4rem}
.brackets::before,.brackets::after{
  content:"";position:absolute;width:26px;height:26px;pointer-events:none;
}
.brackets::before{top:18px;left:6px;border-top:3px solid var(--primary);border-left:3px solid var(--primary)}
.brackets::after{bottom:18px;right:6px;border-bottom:3px solid var(--accent);border-right:3px solid var(--accent)}
.eyebrow{font-family:'VT323',monospace;color:var(--accent);letter-spacing:.25em;font-size:1.05rem;text-transform:uppercase}
h1,h2,h3{font-family:'Press Start 2P',monospace;line-height:1.5}
h2{font-size:clamp(1rem,2.6vw,1.5rem);margin:.6rem 0 1.4rem;color:var(--ink)}
h2 .hl{color:var(--primary)}
p.lead{color:var(--dim);max-width:640px}

/* hero */
.hero{min-height:88vh;display:flex;flex-direction:column;justify-content:center;text-align:center;align-items:center;padding-top:3rem}
.hero h1{font-size:clamp(1.6rem,6vw,3.4rem);color:var(--ink);text-shadow:0 0 24px rgba(255,59,71,.45)}
.hero h1 span{color:var(--primary)}
.hero .tag{font-family:'VT323',monospace;font-size:clamp(1.2rem,2.6vw,1.6rem);color:var(--gold);margin:.9rem 0 1.4rem;letter-spacing:.08em}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin:1.2rem 0}
.bull-sprite{image-rendering:pixelated;width:min(190px,40vw);margin-bottom:1.2rem;filter:drop-shadow(0 0 22px rgba(255,59,71,.4));animation:bob 3.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* countdown */
.count{display:flex;gap:.9rem;justify-content:center;margin:1.4rem 0;flex-wrap:wrap}
.count .cell{background:var(--panel);border:1px solid var(--line);padding:.8rem 1rem;min-width:86px}
.count .num{font-family:'Press Start 2P',monospace;font-size:1.3rem;color:var(--gold)}
.count .lbl{font-family:'VT323',monospace;color:var(--dim);letter-spacing:.2em;font-size:1rem;margin-top:.35rem}

/* CA box */
.ca-box{
  display:flex;align-items:center;gap:.8rem;background:var(--panel);
  border:1px solid var(--line);padding:.8rem 1rem;margin:.6rem auto 0;
  max-width:640px;flex-wrap:wrap;justify-content:center;
}
.ca-box .lbl{font-family:'Press Start 2P',monospace;font-size:.6rem;color:var(--accent)}
.ca-text{font-family:'VT323',monospace;font-size:1.25rem;color:var(--ink);word-break:break-all}
.copy-btn{font-family:'VT323',monospace;font-size:1.05rem;background:transparent;color:var(--gold);
  border:1px solid var(--gold);padding:.3rem .8rem;cursor:pointer;letter-spacing:.08em}
.copy-btn:hover{background:var(--gold);color:var(--bg)}

/* cards / grids */
.grid{display:grid;gap:1.1rem}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{
  background:var(--panel);border:1px solid var(--line);padding:1.4rem;position:relative;
  transition:transform .12s,border-color .12s;
}
.card:hover{transform:translateY(-4px);border-color:var(--primary)}
.card h3{font-size:.75rem;color:var(--gold);margin-bottom:.7rem}
.card p{color:var(--dim);font-size:.95rem}
.card .ic{font-size:1.6rem;display:block;margin-bottom:.7rem}

/* dungeon map (signature) */
.dmap{display:flex;flex-direction:column;align-items:center;gap:0;margin-top:2rem}
.dnode{
  width:min(560px,100%);background:var(--panel);border:1px solid var(--line);
  padding:1.1rem 1.3rem;display:flex;gap:1rem;align-items:center;position:relative;
}
.dnode:hover{border-color:var(--accent)}
.dnode .rom{font-family:'Press Start 2P',monospace;color:var(--primary);font-size:.85rem;min-width:56px}
.dnode .nm{font-family:'Press Start 2P',monospace;font-size:.7rem;color:var(--ink)}
.dnode .ds{font-family:'VT323',monospace;color:var(--dim);font-size:1.05rem;margin-top:.25rem}
.dlink{width:3px;height:34px;background:linear-gradient(var(--primary),var(--accent))}
.dnode .go{margin-left:auto;font-family:'VT323',monospace;color:var(--gold);text-decoration:none;white-space:nowrap;font-size:1.05rem}
.dnode .go:hover{text-decoration:underline}

/* tokenomics */
.tok{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1.6rem}
.tok .t{background:var(--panel);border:1px solid var(--line);padding:1.1rem;text-align:center}
.tok .v{font-family:'Press Start 2P',monospace;color:var(--primary);font-size:.95rem}
.tok .k{font-family:'VT323',monospace;color:var(--dim);margin-top:.4rem;letter-spacing:.1em}

/* waitlist */
.wl{display:flex;gap:.7rem;max-width:520px;margin:1.4rem auto 0;flex-wrap:wrap;justify-content:center}
.wl input{
  flex:1;min-width:220px;background:var(--bg2);border:1px solid var(--line);color:var(--ink);
  font-family:'VT323',monospace;font-size:1.2rem;padding:.75rem .9rem;
}
.wl input:focus{outline:2px solid var(--accent)}
.wl-msg{font-family:'VT323',monospace;color:var(--ok);margin-top:.6rem;min-height:1.4em}

/* footer */
footer{border-top:1px solid var(--line);padding:2.4rem 1.4rem;text-align:center;background:var(--bg2)}
footer .soc{display:flex;gap:1.4rem;justify-content:center;margin-bottom:1rem}
footer .soc a{color:var(--gold);font-family:'VT323',monospace;font-size:1.15rem;text-decoration:none;letter-spacing:.08em}
footer .soc a:hover{color:var(--primary)}
.disclaimer{color:var(--dim);font-size:.8rem;max-width:720px;margin:0 auto;font-family:'VT323',monospace;font-size:1.02rem;line-height:1.5}

/* ============ playground ============ */
.pg-wrap{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:start}
@media(max-width:880px){.pg-wrap{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line)}
.panel .ph{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.panel .ph h3{font-size:.65rem;color:var(--gold)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.dot.off{background:var(--dim);box-shadow:none}
.chat-log{height:420px;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.8rem}
.msg{max-width:88%;padding:.65rem .85rem;font-family:'VT323',monospace;font-size:1.15rem;line-height:1.45;white-space:pre-wrap}
.msg.user{align-self:flex-end;background:#241a2a;border:1px solid var(--accent);color:var(--ink)}
.msg.bull{align-self:flex-start;background:#1d1216;border:1px solid var(--primary);color:var(--ink)}
.msg.bull::before{content:"BLACKBULL ⚔";display:block;font-size:.85rem;color:var(--primary);letter-spacing:.15em;margin-bottom:.25rem}
.chat-in{display:flex;gap:.6rem;padding:.8rem;border-top:1px solid var(--line)}
.chat-in input{flex:1;background:var(--bg2);border:1px solid var(--line);color:var(--ink);font-family:'VT323',monospace;font-size:1.15rem;padding:.6rem .8rem}
.quest-card{padding:1.1rem;font-family:'VT323',monospace;font-size:1.12rem}
.quest-card .qrow{margin-bottom:.7rem}
.quest-card .qk{color:var(--accent);letter-spacing:.18em;font-size:.95rem}
.quest-card .qv{color:var(--ink)}
.tier{display:inline-block;padding:.1rem .55rem;font-family:'Press Start 2P',monospace;font-size:.55rem}
.tier.BRONZE{background:#7a4a20;color:#ffd9ad}
.tier.SILVER{background:#5b6470;color:#e8edf4}
.tier.GOLD{background:var(--gold);color:#4a3800}
.tier.BOSS{background:var(--primary);color:#fff}
.xp-strip{display:flex;align-items:center;gap:.9rem;background:var(--panel);border:1px solid var(--line);padding:.7rem 1rem;margin-bottom:1.2rem;flex-wrap:wrap}
.xp-strip .lv{font-family:'Press Start 2P',monospace;font-size:.65rem;color:var(--gold)}
.xpbar{flex:1;min-width:140px;height:12px;background:var(--bg2);border:1px solid var(--line);position:relative}
.xpbar i{position:absolute;inset:0;width:0%;background:linear-gradient(90deg,var(--primary),var(--accent));transition:width .4s}
.xp-strip .xpn{font-family:'VT323',monospace;color:var(--dim);font-size:1.05rem}

/* ============ dungeon hall ============ */
.hall-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.9rem;margin-bottom:1.4rem}
.cab{background:var(--panel);border:1px solid var(--line);padding:1rem;cursor:pointer;text-align:center;transition:border-color .12s,transform .12s}
.cab:hover{border-color:var(--gold);transform:translateY(-3px)}
.cab.active{border-color:var(--primary);box-shadow:var(--shadow-p)}
.cab .ic{font-size:1.7rem}
.cab .nm{font-family:'Press Start 2P',monospace;font-size:.55rem;color:var(--ink);margin:.6rem 0 .35rem}
.cab .hi{font-family:'VT323',monospace;color:var(--gold);font-size:1rem}
.playbox{background:#000;border:1px solid var(--line);position:relative}
#game-canvas{display:block;width:100%;height:auto;image-rendering:pixelated;background:#000}
.ctrl-strip{display:flex;gap:.6rem;justify-content:center;padding:.7rem;border-top:1px solid var(--line);flex-wrap:wrap}
.ctrl-strip button{
  font-family:'Press Start 2P',monospace;font-size:.6rem;padding:.7rem 1rem;background:var(--bg2);
  color:var(--ink);border:1px solid var(--line);cursor:pointer;touch-action:manipulation;
}
.ctrl-strip button:active{background:var(--primary);color:var(--bg)}
.board-tabs{display:flex;gap:.5rem;margin:1.6rem 0 .8rem;flex-wrap:wrap}
.board-tabs button{font-family:'VT323',monospace;font-size:1.05rem;letter-spacing:.08em;padding:.4rem .9rem;background:var(--panel);color:var(--dim);border:1px solid var(--line);cursor:pointer}
.board-tabs button.on{color:var(--gold);border-color:var(--gold)}
table.board{width:100%;border-collapse:collapse;font-family:'VT323',monospace;font-size:1.15rem}
table.board th{color:var(--accent);letter-spacing:.15em;text-align:left;padding:.5rem .7rem;border-bottom:1px solid var(--line);font-weight:400}
table.board td{padding:.5rem .7rem;border-bottom:1px solid var(--line);color:var(--ink)}
table.board tr.you td{color:var(--gold);background:rgba(255,210,63,.06)}
.tag-edit{display:flex;gap:.5rem;align-items:center}
.tag-edit input{width:150px;background:var(--bg2);border:1px solid var(--line);color:var(--gold);font-family:'VT323',monospace;font-size:1.1rem;padding:.35rem .6rem;text-transform:uppercase}
.mute-btn{background:transparent;border:1px solid var(--line);color:var(--dim);font-size:1rem;padding:.35rem .6rem;cursor:pointer}

/* whitepaper */
.wp{max-width:820px}
.wp h2{margin-top:2.6rem}
.wp h3{font-size:.7rem;color:var(--accent);margin:1.8rem 0 .7rem}
.wp p,.wp li{color:#c9c4cf;font-size:1rem;margin-bottom:.9rem}
.wp ul{padding-left:1.3rem}
.wp table{width:100%;border-collapse:collapse;font-family:'VT323',monospace;font-size:1.1rem;margin:1rem 0}
.wp th,.wp td{border:1px solid var(--line);padding:.5rem .7rem;text-align:left}
.wp th{color:var(--gold);font-weight:400;letter-spacing:.1em}

@media(max-width:640px){
  section{padding:3rem 1rem}
  .hero{min-height:76vh}
  .navlinks{gap:.7rem}
}