:root{
  --lime:#ccff00; --bg:#070a1c; --panel:#0a0f28; --line:#1a2350; --text:#dfe6ff;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#070a1c; } }
:root[data-theme="dark"]{ --bg:#070a1c; }
*{box-sizing:border-box;}
html{scroll-padding-top:env(safe-area-inset-top,0px); scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:'VT323', monospace; font-size:20px;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:34px 34px; overflow-x:hidden;
}
a{color:var(--lime); text-decoration:none;}
.lime{color:var(--lime);}
.wrap{max-width:1100px; margin:0 auto; padding:0 20px;}
nav{position:sticky; top:0; top:env(safe-area-inset-top,0px); z-index:50; background:rgba(7,10,28,0.9); backdrop-filter:blur(4px); border-bottom:2px solid var(--lime);}
nav .inner{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; max-width:1100px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px;}
.feather{width:26px; height:26px; background:var(--lime); clip-path:polygon(30% 0%,70% 0%,100% 40%,60% 100%,40% 100%,0% 40%);}
.brand span{font-family:'Press Start 2P'; font-size:13px; color:var(--lime); letter-spacing:1px;}
.navlinks{display:flex; gap:22px; font-size:18px;}
.navlinks a{color:var(--text);}
.navlinks a:hover{color:var(--lime);}
@media (max-width:640px){ .navlinks{display:none;} }
.hero{padding:70px 20px 50px; text-align:center; position:relative;}
.soontag{display:inline-block; border:2px dashed var(--lime); color:var(--lime); padding:6px 16px; font-family:'Press Start 2P'; font-size:13px; letter-spacing:2px;}
h1.title{font-family:'Press Start 2P'; color:var(--lime); font-size:clamp(28px,7vw,58px); line-height:1.35; margin:0 0 18px; text-shadow:3px 3px 0 #0c1a00, 0 0 24px rgba(204,255,0,0.25);}
.hero p.sub{font-size:22px; max-width:620px; margin:0 auto 30px; color:#c4cdf2;}
.stats{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:34px;}
.stat{border:2px solid var(--line); background:var(--panel); padding:10px 18px; font-family:'Press Start 2P'; font-size:11px; color:var(--text);}
.stat b{display:block; color:var(--lime); font-size:16px; margin-top:4px;}
.ctarow{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:34px;}
.btn{font-family:'Press Start 2P'; font-size:12px; padding:16px 22px; border:2px solid var(--lime); cursor:pointer; letter-spacing:0.5px; transition:transform .12s ease; display:inline-block; background:transparent; color:var(--lime);}
.btn:active{transform:translateY(2px);}
.btn.solid{background:var(--lime); color:#0c1400;}
.btn.solid:hover{background:#e2ff66;}
.btn.outline{background:transparent; color:var(--lime);}
.btn.outline:hover{background:rgba(204,255,0,0.08);}
.btn:disabled, .btn.disabled{opacity:0.35; cursor:not-allowed; pointer-events:none;}
.mascot{display:flex; justify-content:center; margin:10px 0 60px;}
.mascot img{image-rendering:pixelated; width:140px; height:140px; border:3px solid var(--lime);}
.sectiontitle{font-family:'Press Start 2P'; color:var(--lime); font-size:clamp(18px,4vw,26px); text-align:center; margin:0 0 10px;}
.sectionsub{text-align:center; color:#9fabd6; font-size:19px; margin:0 0 40px;}

/* ---- Collection (OpenSea) ---- */
.collection{padding:70px 0;}
.lookupbar{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:14px;}
.lookupbar input{
  background:#060915; border:2px solid var(--line); color:var(--text); font-family:'VT323',monospace;
  font-size:20px; padding:12px 14px; width:200px; max-width:60vw;
}
.lookupbar input:focus{border-color:var(--lime); outline:none;}
.lookupresult{display:flex; gap:20px; align-items:center; justify-content:center; flex-wrap:wrap; border:2px solid var(--line); background:var(--panel); padding:18px; margin:6px auto 30px; max-width:640px;}
.lookupresult.hidden{display:none;}
.lookupresult img{width:140px; height:140px; image-rendering:pixelated; border:2px solid var(--lime);}
.lookupmeta{min-width:200px;}
.lookupmeta h3{font-family:'Press Start 2P'; font-size:13px; color:var(--lime); margin:0 0 10px;}
.lookupmeta ul{list-style:none; margin:0 0 14px; padding:0; font-family:'VT323',monospace; font-size:18px; color:#c4cdf2;}
.lookupmeta ul li b{color:#8ea0e0; font-weight:normal;}
.lookuperr{text-align:center; font-family:'VT323',monospace; font-size:17px; color:#ff7676; margin:0 0 20px;}
.lookuperr.hidden{display:none;}
.traitbar{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:24px;}
.traitbar select{
  background:#060915; border:2px solid var(--line); color:var(--text); font-family:'VT323',monospace;
  font-size:17px; padding:8px 10px;
}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:900px; margin:0 auto;}
@media (max-width:700px){ .grid{grid-template-columns:repeat(2,1fr);} }
.card{border:2px solid var(--line); background:var(--panel); padding:8px; text-align:center;}
.card img{width:100%; aspect-ratio:1/1; object-fit:cover; image-rendering:pixelated; display:block; border:2px solid #131a3c; background:#060915;}
.card span{display:block; font-family:'Press Start 2P'; font-size:9px; margin-top:8px; color:#8ea0e0;}
.card a.viewlink{display:block; margin-top:6px; font-family:'VT323',monospace; font-size:15px;}
.collnote{text-align:center; color:#6f7bab; font-size:16px; margin-top:16px;}

.faq{padding:70px 0;}
.qa{max-width:800px; margin:0 auto; border-top:2px solid var(--line);}
.qa details{border-bottom:2px solid var(--line); padding:18px 4px;}
.qa summary{cursor:pointer; font-family:'Press Start 2P'; font-size:13px; color:var(--text); list-style:none; display:flex; justify-content:space-between; align-items:center;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::after{content:"+"; color:var(--lime); font-size:20px;}
.qa details[open] summary::after{content:"–";}
.qa .a{color:#b7c1ea; font-size:19px; margin-top:12px; line-height:1.5;}
footer{border-top:2px solid var(--lime); padding:40px 20px 30px; text-align:center; padding-bottom:calc(30px + env(safe-area-inset-bottom,0px));}
.socialrow{display:flex; gap:18px; justify-content:center; margin-bottom:22px; flex-wrap:wrap;}
.social{display:flex; align-items:center; gap:9px; border:2px solid var(--lime); color:var(--lime); padding:12px 20px; font-family:'Press Start 2P'; font-size:12px;}
.social:hover{background:rgba(204,255,0,0.08);}
.social svg{width:18px; height:18px; fill:var(--lime);}
footer .fine{color:#6f7bab; font-size:16px;}
footer .fine a{color:#9fabd6;}

/* ARROW DASH (embedded game) */
#arrowDash{padding:70px 0;}
#arrowDash .gamewrap{max-width:480px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:14px;}
#arrowDash .gh1{font-family:'Press Start 2P'; font-size:clamp(14px,4vw,20px); color:var(--lime); text-align:center; margin:0; text-shadow:2px 2px 0 #0c1a00;}
#arrowDash p.sub{font-family:'VT323', monospace; font-size:19px; color:#9fabd6; margin:0; text-align:center;}
#arrowDash .stage{
  position:relative; width:100%; aspect-ratio:16/9;
  border:3px solid var(--lime); background:#0c1230; overflow:hidden;
  box-shadow:0 0 24px rgba(204,255,0,0.15);
}
#arrowDash canvas{display:block; width:100%; height:100%; image-rendering:pixelated;}
#arrowDash .hud{
  position:absolute; top:8px; left:10px; right:10px; display:flex; justify-content:space-between;
  font-family:'Press Start 2P'; font-size:11px; color:var(--lime); text-shadow:2px 2px 0 #000; pointer-events:none;
}
#arrowDash .overlay{
  position:absolute; inset:0; background:rgba(4,6,18,0.86); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; text-align:center; padding:16px;
}
#arrowDash .overlay.hidden{display:none;}
#arrowDash .overlay h2{font-family:'Press Start 2P'; color:var(--lime); font-size:clamp(14px,4vw,20px); margin:0; text-shadow:2px 2px 0 #0c1a00;}
#arrowDash .overlay p{font-family:'VT323',monospace; font-size:18px; color:#c4cdf2; margin:0; max-width:340px;}
#arrowDash .controls{font-family:'VT323',monospace; font-size:17px; color:#8ea0e0; text-align:center; max-width:480px;}
#arrowDash .controls b{color:var(--lime);}

/* ---- X / Twitter login + leaderboard ---- */
.authbox{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:30px;}
.authbox .handle{font-family:'Press Start 2P'; font-size:13px; color:var(--lime);}
.leaderboard{max-width:480px; width:100%; margin:24px auto 0; border-top:2px solid var(--line); padding-top:24px;}
.lbtitle{font-family:'Press Start 2P'; font-size:15px; color:var(--lime); text-align:center;}
.lbsub{text-align:center; color:#6f7bab; font-size:16px; margin:6px 0 16px;}
.lblist{list-style:none; margin:0; padding:0; font-family:'VT323',monospace; font-size:19px;}
.lblist li{display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding:6px 4px;}
.lblist li b{color:#8ea0e0; font-weight:normal; width:34px;}
.lblist li.me{color:var(--lime);}
.lbempty{text-align:center; color:#6f7bab; font-size:17px; padding:14px 0;}