/* =========================================================
   BATTLE CITIES // SOLANA TOKEN SITE — STYLESHEET
   ========================================================= */

:root{
  --bg:#06090b;
  --bg-panel:#0d1216;
  --bg-panel-2:#162027;
  --neon:#ffb30f;
  --neon-dim:#a96a05;
  --neon-glow:rgba(255,179,15,.45);
  --white:#f5f2e8;
  --gray:#a3adb0;
  --line:#3a4952;
  --danger:#f04432;
  --blue:#1677ff;
  --blue-glow:rgba(112,183,255,.38);
  --supply:#47de17;
  --shop-button:#105b0c;
  --shop-button-edge:#4aa82d;
  --ember:#ff6a1a;
  --nav-h:70px;
  --hazard-h:38px;
  --bottom-nav-h:66px;
  --max-width:1360px;
}

/* Respect the user's OS-level reduced-motion preference: kill/limit all animations */
@media(prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .hazard-track{animation-duration:42s !important;animation-iteration-count:infinite !important;}
}

@media(max-width:640px){
  :root{ --nav-h:58px; --hazard-h:30px; }
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--white);
  font-family:'Chakra Petch',sans-serif;
  overflow-x:hidden;
  position:relative;
}
::selection{background:var(--neon);color:#000;}
svg[data-lucide], i[data-lucide], .lucide{ shape-rendering:crispEdges; }

/* Subtle CRT-style scanline overlay across the whole page */
body::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:overlay;
}

/* Background grid pattern, faded out via a radial mask so it's strongest near the top */
.grid-bg{
  position:fixed;inset:0;z-index:0;
  background-image:linear-gradient(var(--line) 1px, transparent 1px),linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 20%, #000 20%, transparent 75%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 20%, #000 20%, transparent 75%);
  opacity:.5;
}

a{color:inherit;text-decoration:none;}
.mono{font-family:'Share Tech Mono',monospace;}
.pixel{font-family:'Press Start 2P',monospace;}
.accent{color:var(--neon);}

/* Reusable glitch text effect (used on hero title + mobile Buy tab) */
.glitch{position:relative;display:inline-block;color:var(--neon);}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;
  color:var(--neon);background:var(--bg);clip-path:inset(0 0 0 0);
}
.glitch::before{left:2px;text-shadow:-2px 0 var(--danger);animation:glitchTop 4.5s infinite linear;}
.glitch::after{left:-2px;text-shadow:2px 0 #00fff0;animation:glitchBot 5.5s infinite linear;}
@keyframes glitchTop{0%,92%,100%{clip-path:inset(0 0 100% 0);opacity:0;}93%{clip-path:inset(10% 0 60% 0);opacity:1;}95%{clip-path:inset(60% 0 5% 0);opacity:1;}97%{clip-path:inset(0 0 100% 0);opacity:0;}}
@keyframes glitchBot{0%,90%,100%{clip-path:inset(0 0 100% 0);opacity:0;}91%{clip-path:inset(70% 0 5% 0);opacity:1;}94%{clip-path:inset(15% 0 70% 0);opacity:1;}96%{clip-path:inset(0 0 100% 0);opacity:0;}}

/* HUD-style corner-bracket frame */
.pixel-frame{
  --frame-accent: var(--neon);
  position:relative;
  background:var(--bg-panel);
  border:1px solid var(--line);
}
.pixel-frame-inner{ background:transparent; height:100%; position:relative; }
.pixel-frame::before,.pixel-frame::after,
.pixel-frame-inner::before,.pixel-frame-inner::after{
  content:"";position:absolute;width:12px;height:12px;pointer-events:none;
  border:2px solid var(--frame-accent);
  filter:drop-shadow(0 0 3px var(--neon-glow));
}
.pixel-frame::before{ top:-1px;left:-1px;border-right:none;border-bottom:none; }
.pixel-frame::after{ top:-1px;right:-1px;border-left:none;border-bottom:none; }
.pixel-frame-inner::before{ bottom:-1px;left:-1px;border-right:none;border-top:none; }
.pixel-frame-inner::after{ bottom:-1px;right:-1px;border-left:none;border-top:none; }
.pixel-frame.danger{ --frame-accent: var(--danger); border-color:var(--danger); }
.pixel-frame.danger::before,.pixel-frame.danger::after,
.pixel-frame.danger .pixel-frame-inner::before,.pixel-frame.danger .pixel-frame-inner::after{
  filter:drop-shadow(0 0 3px rgba(240,68,50,.55));
}
.pixel-frame{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.pixel-frame.hover-lift:hover{transform:translateY(-4px);border-color:var(--neon-dim);box-shadow:0 14px 34px rgba(0,0,0,.45);}

/* Keep focus states visible for keyboard users everywhere on the page */
a:focus-visible,button:focus-visible,input:focus-visible,.buy-tab:focus-visible,.quick-amt:focus-visible{
  outline:2px solid var(--neon);outline-offset:3px;
}

/* Scroll-reveal: elements fade/slide in once when they enter the viewport, then stay visible */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}

.icon{width:16px;height:16px;stroke-width:2.4;vertical-align:-3px;}
.icon-lg{width:22px;height:22px;stroke-width:2.2;}

/* ---------- NAVBAR (desktop/top) ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);box-sizing:border-box;
  background:rgba(6,9,11,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--max-width);margin:0 auto;height:100%;
  display:flex;align-items:center;position:relative;
  padding:0 5%;
}
.nav-inner>.navcta{margin-left:auto;}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:16px;}
.presence-hud{
  display:flex;align-items:center;gap:7px;
  min-height:32px;padding:0 10px;border:2px solid var(--shop-button-edge);
  background:var(--bg-panel);box-shadow:inset 0 0 0 1px #061006;
  color:var(--supply);font-family:'Share Tech Mono',monospace;font-size:11px;
  font-weight:700;letter-spacing:.65px;white-space:nowrap;
}
.presence-hud[hidden]{display:none!important;}
.presence-led{width:8px;height:8px;background:var(--supply);box-shadow:0 0 7px rgba(71,222,23,.7);}
.presence-round{color:var(--neon);}
.presence-divider{color:var(--shop-button-edge);}
.logo{display:flex;align-items:center;gap:12px;}
.main-brand{flex-shrink:0;}
.logo-box{width:38px;height:38px;}
.logo-box .pixel-frame-inner{display:flex;align-items:center;justify-content:center;}
.logo-box .coin-logo{display:block;width:100%;height:100%;object-fit:contain;}
.logo-box svg{color:var(--neon);}
.logo-text{font-family:'Press Start 2P',monospace;font-size:14px;letter-spacing:1px;}
.navlinks{display:flex;gap:34px;margin-left:40px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;align-items:center;}
.navlinks a{opacity:.7;transition:.2s;display:flex;align-items:center;gap:6px;}
.navlinks a:hover{opacity:1;color:var(--neon);}
.navcta{
  font-family:'Chakra Petch';font-weight:700;
  border:2px solid var(--shop-button-edge);background:var(--shop-button);color:var(--white);
  padding:10px 18px;font-size:12px;text-transform:uppercase;letter-spacing:1px;
  box-shadow:4px 4px 0 #000;transition:.15s;display:flex;align-items:center;gap:8px;
}
.navcta:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #000;}
@media(min-width:641px) and (max-width:1150px){
  .presence-hud{display:none;}
}
@media(max-width:900px){
  .navlinks{gap:14px;margin-left:24px;font-size:10px;}
  .main-brand{gap:8px;}
  .main-brand .logo-box{width:34px;height:34px;}
  .main-brand .logo-text{font-size:11px;}
  .navcta{padding:9px 12px;}
}

/* Hazard bar: sits at the seam between hero and tokenomics instead of
   between the fixed nav and hero (which used to push the hero content down
   on every load and compete with the hero for attention). Placed here it
   reads as a transition/warning gate into the token details + purchase flow,
   which is where the risk framing is actually relevant. */
.hazard-bar{
  box-sizing:border-box;
  width:100%;overflow:hidden;position:relative;z-index:2;
  background:repeating-linear-gradient(135deg,#000 0 18px, var(--neon) 18px 36px);
  border-top:2px solid #000;border-bottom:2px solid #000;
}
.hazard-track{
  display:flex;white-space:nowrap;align-items:center;
  height:calc(100% - 8px);margin:4px 0;
  width:max-content;
  animation:marquee 42s linear infinite;
  background:var(--bg);
  padding: 0.5rem;
}
.hazard-track span{
  font-family:'Press Start 2P',monospace;font-size:11px;
  color:white;letter-spacing:1px;display:inline-flex;align-items:center;gap:10px;
  padding:0 26px;text-transform:uppercase;
}
.hazard-track span svg{color:var(--danger);}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

section{position:relative;z-index:1;padding:70px 5% 90px;scroll-margin-top:var(--nav-h);}

/* ---------- HERO ---------- */
.hero{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--nav-h) + 40px);position:relative;
}

/* HERO LAYOUT — two columns on desktop/tablet (copy left, image right),
   collapses to a single centered column on mobile with the image first. */
.hero-inner{
  width:min(var(--max-width),100%);margin:0 auto;
}
.hero-main{display:flex;align-items:center;gap:56px;min-height:540px;}
.hero-copy{flex:1 1 0;min-width:0;}
.hero-media{flex:0 0 auto;width:min(45%,540px);}
.hero-media img{width:100%;height:auto;display:block;filter:drop-shadow(0 0 26px var(--blue-glow));animation:floatY 5.5s ease-in-out infinite;}
.hero-lower{margin-top:64px;}
.hero-details{display:grid;grid-template-columns:232px minmax(0,1fr);gap:12px;align-items:stretch;margin-top:18px;}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
@media(max-width:960px){
  .hero-main{gap:36px;min-height:480px;}
  .hero-media{width:42%;}
  .hero-details{grid-template-columns:190px minmax(0,1fr);}
}
@media(max-width:760px){
  .hero-main{flex-direction:column;text-align:center;min-height:0;}
  .hero-media{order:-1;width:min(70%,320px);margin-bottom:8px;}
  .hero-lower{margin-top:40px;}
  .hero-copy{width:100%;}
  .hero-sub{margin-left:auto;margin-right:auto;}
  .hero-actions,.hero-community-actions{justify-content:center;}
  .hero-dapp-store{margin-left:auto;margin-right:auto;}
  .hero-stats{margin-left:auto;margin-right:auto;}
  .eyebrow{margin-left:auto;margin-right:auto;}
}

.eyebrow{
  font-family:'Press Start 2P',monospace;color:var(--neon);font-size:10px;letter-spacing:2px;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;
  background:var(--bg-panel);border:2px solid var(--neon-dim);padding:10px 14px;width:fit-content;
}
.eyebrow .pulse{width:7px;height:7px;background:var(--neon);box-shadow:0 0 10px var(--neon-glow);animation:blink 1.2s infinite;}
@keyframes blink{50%{opacity:.15;}}

.hero-title-row{display:flex;align-items:center;margin-top:16px}
@media(max-width:760px){
  .hero-title-row{justify-content:center;text-align:left}
}

.hero h1{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(30px,6.4vw,74px);
  line-height:1.25;letter-spacing:1px;color:var(--white);
  text-shadow:0 0 6px var(--neon-glow), 0 0 22px rgba(255,179,15,.3);
}
.brand-name{white-space:nowrap;}
.brand-cities,.hero-cities,.footer-cities{color:var(--white);}

.hero-sub{max-width:560px;margin-top:26px;color:var(--gray);font-size:16px;line-height:1.7;}
.hero-sub b{color:var(--white);font-weight:600;}
.hero-actions{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;}
.hero-community-actions{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap;}
.x-missions{max-width:none;border:1px solid var(--neon-dim);background:linear-gradient(135deg,rgba(13,18,22,.98),rgba(8,14,20,.96));box-shadow:5px 5px 0 rgba(0,0,0,.35);padding:30px 32px}
.x-missions__top{display:flex;justify-content:space-between;gap:24px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.x-missions__head{color:var(--neon);font:16px 'Press Start 2P',monospace;letter-spacing:.04em;line-height:1.4}.x-missions__head .pulse{display:inline-block;width:8px;height:8px;margin-right:7px;background:var(--neon);box-shadow:0 0 10px var(--neon-glow);animation:blink 1.2s infinite}
.x-missions__top p{margin-top:8px;color:var(--gray);font-size:14px;line-height:1.45}.x-missions__top p b{color:var(--supply)}
.x-missions__status{display:flex;gap:14px;align-items:center;min-width:265px;padding:12px 15px;border:1px solid #26384c;background:#050916}.x-missions__status>div{display:grid;gap:3px}.x-missions__status span{font:9px 'Share Tech Mono',monospace;color:var(--gray);letter-spacing:.08em}.x-missions__status strong{font:16px 'Press Start 2P',monospace;color:var(--neon);white-space:nowrap}.x-missions__status>div:last-child strong{color:var(--supply);font-size:11px}.x-missions__status i{width:1px;height:34px;background:var(--line);margin:0 1px}
.x-missions__body{display:grid;grid-template-columns:minmax(0,3fr) minmax(210px,1fr);gap:16px;padding-top:24px}.x-missions__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.x-mission{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;gap:8px;align-content:start;min-height:174px;padding:15px;border:1px solid #26384c;background:#060a16;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}.x-mission[hidden]{display:none!important}.x-mission__step{color:var(--neon);font:12px 'Press Start 2P',monospace;line-height:1.4}.x-mission__reward{padding:4px 6px;background:#201d08;color:var(--neon);font:9px 'Share Tech Mono',monospace;letter-spacing:.06em;white-space:nowrap}.x-mission__reward--community{background:#181124;color:#b886ff}.x-mission__body{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center}.x-mission__art{display:grid;width:64px;height:64px;place-items:center;overflow:hidden}.x-mission__art img{display:block;width:64px;height:64px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 0 8px rgba(255,179,15,.25))}.x-mission__copy{min-width:0}.x-mission b{display:block;color:var(--white);font:700 16px 'Chakra Petch',sans-serif;line-height:1.2}.x-mission small{display:block;color:var(--gray);font:12px 'Chakra Petch',sans-serif;margin-top:6px;line-height:1.35}.x-mission__result{min-height:16px;color:var(--blue);font:10px 'Share Tech Mono',monospace;letter-spacing:.05em;text-transform:uppercase}.x-mission>div{grid-column:1/-1}.x-mission__action{grid-column:1/-1;min-width:0;justify-content:center;font-size:10px;padding:9px 8px;margin-top:auto;border-color:var(--neon-dim);box-shadow:none}.x-mission--discord{border-color:#5d3882}.x-mission--discord .x-mission__action{border-color:#8d53ce;color:#d4a8ff}.x-mission.is-complete{border-color:var(--neon);background:linear-gradient(135deg,rgba(255,179,15,.34),rgba(169,106,5,.18));box-shadow:inset 0 0 28px rgba(255,179,15,.16),0 0 18px rgba(255,179,15,.14)}.x-mission.is-complete .x-mission__step,.x-mission.is-complete .x-mission__result,.x-mission.is-complete b{color:#fff7d4}.x-mission.is-complete .x-mission__reward{background:var(--neon);color:#171006}.x-mission.is-complete .x-mission__action{border-color:#fff1ad;color:#fff7d4}.x-mission.is-complete .x-mission__action[aria-disabled="true"]{opacity:1}.x-mission.is-locked{opacity:.62}.x-mission__action[aria-disabled="true"]{pointer-events:none;opacity:.55}
@media(max-width:900px){.x-missions{padding:24px}.x-missions__body{gap:10px}.x-missions__grid{gap:10px}.x-mission{min-height:156px;padding:12px}.x-mission__step{font-size:10px}.x-mission__body{grid-template-columns:52px minmax(0,1fr);gap:8px}.x-mission__art,.x-mission__art img{width:52px;height:52px}.x-mission b{font-size:14px}.x-mission small{font-size:11px}}
@media(max-width:640px){.x-missions{padding:20px 16px}.x-missions__top{display:block}.x-missions__status{margin-top:16px;width:100%;min-width:0;justify-content:center}.x-missions__body{grid-template-columns:1fr}.x-missions__grid{grid-template-columns:1fr}.x-mission{min-height:0}.x-mission__body{grid-template-columns:56px minmax(0,1fr);gap:12px}.x-mission__art,.x-mission__art img{width:56px;height:56px}.x-mission--discord{max-width:none}.x-mission__action{justify-self:stretch}}
@media(max-width:400px){.x-missions__head{font-size:12px}.x-missions__status{justify-content:space-between;gap:8px}.x-missions__status i{display:none}}
.hero-dapp-store{
  width:min(100%,232px);display:block;
  border:1px solid transparent;transition:transform .15s ease,border-color .15s ease,filter .15s ease;
}
.hero-dapp-store img{display:block;width:100%;height:auto;}
.hero-dapp-store:hover{transform:translateY(-2px);border-color:var(--neon);filter:drop-shadow(0 0 10px var(--neon-glow));}
.hero-dapp-store:focus-visible{outline:2px solid var(--neon);outline-offset:4px;}
.btn{
  font-family:'Chakra Petch',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;
  font-size:14px;padding:16px 30px;cursor:pointer;border:2px solid #000;transition:.15s;
  display:inline-flex;align-items:center;gap:10px;
}
.btn-play{background:var(--neon);border-color:var(--neon-dim);color:#04120a;box-shadow:5px 5px 0 #000;}
.btn-play:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 #000;}
.btn-play:active{transform:translate(5px,5px);box-shadow:0 0 0 #000;}
.btn-primary{background:var(--shop-button);border-color:var(--shop-button-edge);color:var(--white);box-shadow:5px 5px 0 #000;}
.btn-primary:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 #000;}
.btn-primary:active{transform:translate(5px,5px);box-shadow:0 0 0 #000;}
.btn-ghost{background:transparent;border:2px solid var(--gray);color:var(--white);box-shadow:5px 5px 0 rgba(0,0,0,.4);}
.btn-ghost:hover{border-color:var(--neon);color:var(--neon);transform:translate(3px,3px);box-shadow:2px 2px 0 rgba(0,0,0,.4);}
.btn-ghost:active{transform:translate(5px,5px);box-shadow:0 0 0 rgba(0,0,0,.4);}

/* HERO STATS — grid with a matched-height accent rule per card so the
   top border, icon, number and label all line up on every breakpoint
   instead of relying on side borders that clipped unevenly on 3-4 col
   layouts at in-between viewport widths. */
.hero-stats{
  margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  min-height:100%;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:linear-gradient(135deg,rgba(13,18,22,.98),rgba(6,9,11,.98));
}
.hero-stats>div{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:18px 12px;background:transparent;border-right:1px solid var(--line);}
.hero-stats>div:last-child{border-right:0;}

.hero-stats .num{
  font-family:'Press Start 2P',monospace;font-size:clamp(11px,1.35vw,16px);color:var(--neon);
  display:flex;align-items:center;gap:8px;white-space:nowrap;
}
.hero-stats .num .icon{color:var(--neon);width:18px;height:18px;}.hero-stats .lbl{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray);margin-top:12px;text-align:center;}
@media(min-width:761px) and (max-width:960px){.hero-dapp-store{width:100%;}}
@media(max-width:760px){
  .hero-details{grid-template-columns:1fr;}
  .hero-stats>div{text-align:left;}
}
@media(max-width:640px){
  .hero-dapp-store{margin-left:auto;margin-right:auto;}
  .hero-stats{grid-template-columns:repeat(2,1fr);}
  .hero-stats>div{padding:16px 10px;border-bottom:1px solid var(--line);}
  .hero-stats>div:nth-child(2n){border-right:0;}.hero-stats>div:nth-last-child(-n+2){border-bottom:0;}
}

/* ---------- GENERIC SECTION HEADER ---------- */
.sec-head{margin:0 auto 56px;max-width:var(--max-width);width:100%;}
.sec-tag{font-family:'Press Start 2P',monospace;color:var(--neon);font-size:10px;letter-spacing:2px;text-transform:uppercase;display:flex;align-items:center;gap:10px;}
.sec-tag.center{justify-content:center;}
.sec-head h2{font-family:'Press Start 2P',monospace;font-size:clamp(22px,3.2vw,34px);font-weight:400;margin-top:16px;color:var(--white);line-height:1.5;max-width:640px;}
.sec-head p{color:var(--gray);margin-top:16px;line-height:1.7;font-size:15px;max-width:640px;}

/* ---------- TOKENOMICS ---------- */
.tokenomics{background:linear-gradient(180deg,transparent,rgba(255,179,15,.03),transparent);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.tok-grid{display:grid;grid-template-columns:1fr;gap:60px;max-width:var(--max-width);margin:0 auto;}
@media(min-width:960px){.tok-grid{grid-template-columns:1fr 1fr;}}

.terminal-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:12px;color:var(--gray);letter-spacing:1px;font-family:'Share Tech Mono';}
.terminal-body{padding:26px;}
@media(max-width:480px){
  .terminal-body{padding:18px;}
  .info-row{font-size:12.5px;flex-wrap:wrap;gap:4px;}
}
.info-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px dashed var(--line);font-size:14px;font-family:'Share Tech Mono';}
.info-row:last-child{border-bottom:none;}
.info-row .k{color:var(--gray);display:flex;align-items:center;gap:8px;}
.info-row .v{color:var(--white);}
.info-row .v.accent{color:var(--neon);}

/* ALLOCATION BARS — segmented track (visually consistent with the presale
   progress bar) whose fill width equals the item's actual share of 100%,
   so the bar is readable/accurate rather than purely decorative. */
.alloc-list{display:flex;flex-direction:column;gap:20px;}
.alloc-top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:9px;}
.alloc-top .name{letter-spacing:1px;text-transform:uppercase;color:var(--white);font-weight:600;}
.alloc-top .pct{font-family:'Press Start 2P';color:var(--neon);font-size:11px;}
.alloc-track{height:12px;background:var(--bg-panel-2);border:1px solid var(--line);overflow:hidden;padding:2px;display:flex;}
.alloc-fill{height:100%;background:linear-gradient(90deg,var(--neon-dim),var(--neon));box-shadow:0 0 8px var(--neon-glow);transition:width .6s ease;}

.danger-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Press Start 2P';font-size:9px;letter-spacing:1px;
  color:#000;background:var(--neon);padding:10px;
  text-transform:uppercase;line-height:1.6;flex-wrap:wrap;max-width:100%;
}
.danger-badge.red{background:var(--danger);color:#0a0002;}
.danger-badge svg{flex-shrink:0;}
@media(max-width:640px){
  .danger-badge{font-size:8px;gap:6px;}
}

.risk-box{margin-top:30px;}
.risk-inner{padding:22px 24px;display:flex;gap:16px;align-items:flex-start;}
.risk-inner svg{color:var(--danger);flex-shrink:0;margin-top:2px;}
.risk-inner p{font-size:13px;color:var(--gray);line-height:1.7;}
.risk-inner p b{color:var(--white);}

/* ---------- TIMELINE ---------- */
/* Horizontal rail on desktop/tablet (order reads left-to-right the way a
   roadmap should), collapses to a vertical rail on mobile where horizontal
   space runs out. Same markup either way; only the axis of the connecting
   line + flex-direction flips. */
.timeline{border-bottom:1px solid var(--line);}
.timeline-list{display:flex;position:relative;padding-top:7px;max-width:var(--max-width);margin:0 auto;}
.timeline-list::before{content:"";position:absolute;top:14px;left:0;right:0;height:2px;background:var(--line);z-index:0;}
.tl-item{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 14px;position:relative;}
.tl-dot{width:14px;height:14px;border:2px solid var(--neon-dim);background:var(--bg-panel);margin-bottom:16px;position:relative;z-index:1;flex-shrink:0;}
.tl-marker{font-family:'Press Start 2P';font-size:10px;color:var(--gray);margin-bottom:10px;}
.tl-body h3{font-size:14px;letter-spacing:.5px;text-transform:uppercase;color:var(--white);display:flex;align-items:center;justify-content:center;gap:8px;}
.tl-body h3 svg{width:22px;height:22px;stroke-width:2.2;color:var(--neon);flex-shrink:0;}
.tl-body p{margin-top:8px;font-size:13px;color:var(--gray);line-height:1.6;}
.tl-item.done .tl-dot{background:var(--neon);border-color:var(--neon);box-shadow:0 0 8px var(--neon-glow);}
.tl-item.done .tl-marker{color:var(--neon);}
.tl-item.now .tl-dot{background:var(--white);border-color:var(--white);box-shadow:0 0 8px rgba(255,255,255,.5);}
.tl-item.now .tl-marker{color:var(--white);}
.tl-item.now .tl-body h3 svg{color:var(--danger);}
.tl-item.next .tl-marker,.tl-item.next .tl-body h3,.tl-item.next .tl-body h3 svg{color:var(--gray);}

@media(max-width:1080px){
  .timeline-list{flex-direction:column;padding-top:0;}
  .timeline-list::before{top:7px;bottom:7px;left:6px;right:auto;width:2px;height:auto;}
  .tl-item{flex-direction:row;align-items:flex-start;text-align:left;padding:0 0 28px 0;gap:18px;}
  .tl-item:last-child{padding-bottom:0;}
  .tl-dot{margin-bottom:0;margin-top:5px;}
}

/* ---------- PURCHASE / BUY FLOW ---------- */
.purchase-deadline{max-width:var(--max-width);margin:0 auto 50px;text-align:center;display:flex;flex-direction:column;align-items:center;}
.cds-title{font-family:'Press Start 2P',monospace;font-size:clamp(18px,3vw,28px);color:var(--white);margin:18px 0 36px;line-height:1.5;}
.cds-clock{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;}
.cds-clock .box{background:var(--bg-panel);border:2px solid var(--neon-dim);min-width:76px;padding:16px 14px;box-shadow:0 0 8px rgba(255,179,15,.18);transition:box-shadow .2s,border-color .2s;}
.cds-clock .box .n{font-family:'Press Start 2P';font-size:22px;color:var(--neon);text-shadow:0 0 8px var(--neon-glow);}
.cds-clock .box .u{font-size:9px;letter-spacing:1px;color:var(--gray);text-transform:uppercase;margin-top:6px;}
.cds-clock .box.highlight{border-color:var(--neon);box-shadow:0 0 14px var(--neon-glow);}
.cds-clock .box.highlight .n{color:var(--neon);}
.cds-colon{font-family:'Press Start 2P';color:var(--gray);font-size:20px;}
.cds-note{margin-top:28px;font-size:13px;color:var(--gray);display:flex;align-items:center;gap:8px;}
.cds-note svg{color:var(--danger);flex-shrink:0;}
@media(max-width:640px){
  .purchase-deadline{margin-bottom:38px;}
  .cds-clock{gap:6px;}
  .cds-clock .box{min-width:58px;padding:12px 8px;}
  .cds-clock .box .n{font-size:16px;}
  .cds-colon{font-size:14px;}
}

.purchase-wrap{display:grid;grid-template-columns:1fr;gap:50px;max-width:var(--max-width);margin:0 auto;}
@media(min-width:960px){
  .purchase-wrap{grid-template-columns:1.05fr .95fr;align-items:stretch;}
  .purchase-wrap>.pixel-frame,.purchase-wrap>div>.pixel-frame{height:100%;box-sizing:border-box;}
}

.progress-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px;}
.raised-summary{display:flex;align-items:center;gap:7px;}
.progress-top .raised{font-family:'Press Start 2P';font-size:20px;line-height:1;color:var(--neon);font-variant-numeric:tabular-nums;}
.raised-label,.progress-top .goal{font-family:'Share Tech Mono';font-size:13px;line-height:1;color:var(--gray);}
.progress-track{height:14px;background:var(--bg-panel-2);border:2px solid var(--line);overflow:hidden;display:flex;gap:2px;padding:2px;}
.progress-track .seg{flex:1;background:var(--line);}
.progress-track .seg.on{background:var(--neon);box-shadow:0 0 6px var(--neon-glow);}
.progress-meta{display:flex;justify-content:space-between;margin-top:10px;font-size:11px;letter-spacing:1px;color:var(--gray);text-transform:uppercase;font-family:'Share Tech Mono';}
.progress-meta .accent{color:var(--neon);}

.stage-list{margin-top:26px;display:flex;flex-direction:column;gap:0;}
.stage{display:grid;grid-template-columns:1.15fr 1.25fr .9fr .9fr;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-size:13px;gap:10px;}
.stage:last-child{border-bottom:none;}
.stage-head{padding:0 0 8px;color:var(--gray);font-family:'Share Tech Mono';font-size:10px;letter-spacing:1px;text-transform:uppercase;}
.stage-value{color:var(--white);font-family:'Share Tech Mono';font-size:13px;}
.stage-total{color:var(--neon);font-family:'Press Start 2P';font-size:10px;border-bottom:none;padding-top:16px;}
@media(max-width:480px){
  .stage{grid-template-columns:1.2fr .8fr 1fr .8fr;gap:6px;padding:12px 0;font-size:11px;}
  .stage-head{font-size:8px;}
  .stage-value{font-size:11px;}
}
.stage .tag{width:120px;box-sizing:border-box;font-family:'Share Tech Mono';font-size:10px;letter-spacing:1px;padding:3px 8px;border:1px solid var(--neon-dim);color:var(--neon);text-transform:uppercase;display:flex;align-items:center;gap:5px;}
.stage.active .tag{background:var(--neon);color:#000;border-color:var(--neon);}
.stage .price{color:var(--white);font-family:'Press Start 2P';font-size:9px;white-space:nowrap;line-height:1.3;}
.stage .status{color:var(--gray);font-size:11px;text-transform:uppercase;letter-spacing:1px;}
.stage .price,.stage-value,.stage-total{font-variant-numeric:tabular-nums;}
.stage.sold-out{opacity:.68;}
.stage.sold-out .tag{border-color:var(--supply);color:var(--supply);}

.buy-tabs{display:flex;border:2px solid var(--line);margin-bottom:24px;}
.buy-tab{flex:1;text-align:center;padding:13px;font-family:'Chakra Petch';font-weight:700;letter-spacing:1px;font-size:13px;text-transform:uppercase;color:var(--gray);cursor:pointer;transition:.2s;border:0;border-right:1px solid var(--line);background:transparent;display:flex;align-items:center;justify-content:center;gap:8px;}
.buy-tab:last-child{border-right:none;}
.buy-tab.active{background:var(--neon);color:#000;}
.buy-tab:not(.active):hover{color:var(--white);}
.buy-tab:disabled{cursor:not-allowed;opacity:.4;}

.field{margin-bottom:18px;}
.field label{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gray);margin-bottom:8px;}
.input-box{display:flex;align-items:center;background:var(--bg-panel-2);border:2px solid var(--line);padding:14px 16px;transition:border-color .2s;}
.input-box.pulse-in{border-color:var(--neon);}
.input-box input{flex:1;background:transparent;border:none;outline:none;color:var(--white);font-family:'Press Start 2P';font-size:15px;width:0;}
.input-box .unit{font-family:'Share Tech Mono';font-size:13px;color:var(--neon);letter-spacing:1px;padding-left:10px;border-left:1px solid var(--line);}
.quick-amounts{display:flex;gap:8px;margin-top:10px;}
.quick-amt{
  flex:1;text-align:center;padding:9px 6px;font-family:'Share Tech Mono',monospace;
  font-size:12px;letter-spacing:.5px;color:var(--neon);background:transparent;
  border:1px solid var(--neon-dim);cursor:pointer;transition:.15s;
}
.quick-amt:hover{background:rgba(255,179,15,.08);border-color:var(--neon);}
.quick-amt:active{transform:scale(.96);}
.buy-tab:active{transform:scale(.98);}
.quick-amt.active{background:var(--neon);color:#04120a;border-color:var(--neon);font-weight:700;}
.swap-icon{display:flex;justify-content:center;margin:-8px 0;position:relative;z-index:2;}
.swap-icon span{background:var(--bg-panel);border:2px solid var(--neon);color:var(--neon);width:32px;height:32px;display:flex;align-items:center;justify-content:center;}
.rate-line{font-family:'Share Tech Mono';font-size:12px;color:var(--gray);margin:16px 0;display:flex;justify-content:space-between;}
.rate-line span:last-child{color:var(--neon);}
.rate-line span:last-child,.input-box input{font-variant-numeric:tabular-nums;}
.buy-btn{width:100%;margin-top:6px;justify-content:center;}
.buy-btn:disabled{cursor:not-allowed;filter:grayscale(.7);opacity:.55;}
.buy-note{margin-top:16px;font-size:11.5px;color:var(--gray);line-height:1.6;display:flex;gap:8px;}
.buy-note svg{color:var(--neon);flex-shrink:0;}
.buy-note b{color:var(--neon);letter-spacing:1px;}
.wallet-line{display:flex;align-items:center;gap:8px;margin:12px 0;color:var(--gray);font-family:'Share Tech Mono';font-size:12px;}
.wallet-line[hidden]{display:none;}
.wallet-dot{width:8px;height:8px;background:var(--supply);box-shadow:0 0 7px rgba(71,222,23,.5);}
.wallet-line button{padding:6px 8px;border:1px solid var(--line);background:transparent;color:var(--gray);font:inherit;cursor:pointer;}
.wallet-line #copy-wallet{margin-left:auto;}
.wallet-line button:hover{border-color:var(--neon);color:var(--white);}
.purchase-status{min-height:18px;margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;font-family:'Share Tech Mono';font-size:11.5px;line-height:1.5;}
.purchase-status.is-info{color:var(--gray);}
.purchase-status.is-success{color:var(--supply);}
.purchase-status.is-warning{color:var(--neon);}
.purchase-status.is-error{color:var(--danger);}
.purchase-status a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;}
.purchase-progress{margin-top:12px;border:1px solid var(--line);font-family:'Share Tech Mono';font-size:11.5px;}
.purchase-progress[hidden]{display:none;}
.purchase-progress-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;color:var(--gray);}
.purchase-progress-row + .purchase-progress-row{border-top:1px solid var(--line);}
.purchase-progress-row.is-confirmed{color:var(--supply);}
.purchase-progress-row.is-pending{color:var(--neon);}
.purchase-progress-row.is-failed{color:var(--danger);}
.purchase-progress-row span:nth-child(2){display:grid;gap:2px;min-width:0;}
.purchase-progress-row b{color:var(--white);font-size:12px;letter-spacing:.5px;}
.purchase-progress-row small{font:inherit;color:inherit;white-space:normal;}
.purchase-progress-icon{display:grid;place-items:center;width:22px;height:22px;border:1px solid currentColor;}
.purchase-progress-row a,.purchase-progress-row button{color:var(--blue);font:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}
.purchase-progress-row button{min-height:40px;padding:0 8px;border:1px solid var(--blue);background:transparent;cursor:pointer;text-decoration:none;}
.purchase-progress-row a:focus-visible,.purchase-progress-row button:focus-visible{outline:2px solid var(--neon);outline-offset:3px;}
@media(max-width:520px){.purchase-progress-row{grid-template-columns:24px minmax(0,1fr)}.purchase-progress-row a,.purchase-progress-row button{grid-column:2;justify-self:start;}}

.purchase-dialog{
  width:min(92vw,560px);max-height:calc(100dvh - 32px);margin:auto;padding:0;
  border:0;background:transparent;color:var(--white);overflow:auto;
}
.purchase-dialog::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(3px);}
.purchase-dialog-card{margin:0;background:var(--bg-panel);box-shadow:12px 12px 0 rgba(0,0,0,.42);}
.purchase-dialog-card .pixel-frame-inner{padding:26px;}
.purchase-dialog-card h3{margin:16px 0 22px;font-family:'Press Start 2P';font-size:16px;line-height:1.45;}
.purchase-summary{display:grid;grid-template-columns:1fr 1px 1fr;border:1px solid var(--line);background:var(--bg);}
.purchase-summary-item{min-width:0;padding:16px;}
.purchase-summary-item span,.purchase-details-head{font-family:'Share Tech Mono';font-size:11px;letter-spacing:1px;text-transform:uppercase;}
.purchase-summary-item span{display:block;color:var(--gray);}
.purchase-summary-item strong{display:block;margin-top:9px;color:var(--white);font-family:'Press Start 2P';font-size:14px;line-height:1.45;overflow-wrap:anywhere;}
.purchase-summary-item.is-allocation{background:rgba(71,222,23,.07);}
.purchase-summary-item.is-allocation strong{color:var(--supply);}
.purchase-summary-divider{margin:12px 0;background:var(--line);}
.purchase-details-head{display:flex;justify-content:space-between;align-items:center;margin-top:22px;padding-bottom:9px;color:var(--gray);border-bottom:1px solid var(--line);}
.purchase-details-head span:last-child{color:var(--neon);}
.purchase-breakdown{margin:0;}
.purchase-breakdown>div{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 0;border-bottom:1px solid var(--line);}
.purchase-breakdown dt{color:var(--gray);font-family:'Share Tech Mono';font-size:12px;text-transform:uppercase;letter-spacing:1px;}
.purchase-breakdown dd{margin:0;color:var(--white);font-family:'Share Tech Mono';font-size:13px;font-variant-numeric:tabular-nums;text-align:right;}
.copy-address{min-height:32px;padding:4px 8px;border:1px solid var(--line);background:transparent;color:var(--white);cursor:pointer;}
.copy-address:hover{border-color:var(--neon);}
.copy-address:focus-visible{outline:2px solid var(--neon);outline-offset:2px;}
.dialog-note{margin:18px 0;color:var(--gray);font-size:12px;line-height:1.6;}
.dialog-error{margin:-6px 0 16px;padding:10px 12px;border:1px solid var(--danger);background:rgba(255,66,51,.08);color:var(--danger);font-family:'Share Tech Mono';font-size:12px;line-height:1.5;}
.dialog-error[hidden]{display:none;}
.dialog-actions{display:flex;justify-content:flex-end;gap:12px;}
.dialog-actions .btn{min-width:150px;justify-content:center;}
@media(max-width:520px){
  .purchase-dialog-card .pixel-frame-inner{padding:20px 18px;}
  .purchase-summary-item{padding:14px 12px;}
  .purchase-summary-item strong{font-size:11px;}
  .dialog-actions{flex-direction:column-reverse;}
  .dialog-actions .btn{width:100%;}
}

/* ---------- FAQ ACCORDION ---------- */
/* Native <details>/<summary> so it works with zero JS. Left accent bar
   (rather than a full pixel-frame) keeps it visually in the same family as
   the danger badges without competing with the bracket-framed cards above. */
.faq-list{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.faq-item{
  background:var(--bg-panel);border:1px solid var(--line);border-left:3px solid var(--neon-dim);
  transition:border-color .25s ease,background .25s ease;
}
.faq-item[open]{border-left-color:var(--neon);background:rgba(255,179,15,.035);}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 20px;font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:14.5px;color:var(--white);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::marker{content:"";}
.faq-q{display:flex;align-items:center;gap:14px;}
.faq-q svg{color:var(--neon);flex-shrink:0;}
.faq-item .chev{color:var(--neon);flex-shrink:0;transition:transform .25s ease;}
.faq-item[open] .chev{transform:rotate(180deg);}
.faq-answer{padding:0 20px 20px 50px;color:var(--gray);font-size:13.5px;line-height:1.75;}
@media(max-width:640px){
  .faq-item summary{padding:15px 16px;font-size:13.5px;gap:10px;}
  .faq-q{gap:10px;}
  .faq-answer{padding:0 16px 16px 40px;font-size:13px;}
}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line);padding:40px 5%;font-size:12px;color:var(--gray);position:relative;z-index:1;}
.footer-inner{max-width:var(--max-width);margin:0 auto;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;}
.footer-mark{display:block;width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.38));}
footer .logo-text{font-size:12px;}
.foot-links{display:flex;gap:22px;text-transform:uppercase;letter-spacing:1px;flex-wrap:wrap;}
.foot-links a{display:flex;align-items:center;gap:6px;}
.foot-links a:hover{color:var(--neon);}

/* ---------- BOTTOM NAV (mobile app-style) ---------- */
/* Hidden by default; only shown at the <=640px breakpoint below */
.bottom-nav{
  display:none;
}

.text-white{color: white;}

/* Battlefield handoff copied from the BattleCities website: mechanical doors
   close, reveal the deployment readout, then reopen before navigation. */
.deployment-overlay{position:fixed;z-index:10000;inset:0;visibility:hidden;pointer-events:none;overflow:hidden;}
.deployment-overlay.is-active{visibility:visible;animation:1.08s steps(5,end) both deploymentFade;}
.deployment-overlay.is-departing,.deployment-arrival .deployment-overlay{visibility:visible;pointer-events:auto;cursor:wait;background:rgba(2,3,5,.92);}
.deployment-door{z-index:1;width:52%;position:absolute;top:0;bottom:0;background:repeating-linear-gradient(90deg,#0a0c10 0 58px,#15171b 58px 62px,#08090d 62px 120px);border-color:#423a33;will-change:transform;}
.deployment-door::before{content:"";position:absolute;inset:74px 28px 42px;border:3px solid #302a25;background:linear-gradient(transparent 49.5%,#3c332c 49.5% 50.5%,transparent 50.5%),repeating-linear-gradient(0deg,transparent 0 92px,rgba(255,179,15,.16) 92px 95px);}
.deployment-door i{position:absolute;top:0;bottom:0;width:8px;background:repeating-linear-gradient(135deg,var(--neon) 0 12px,#07090b 12px 24px);}
.deployment-door-left{left:-52%;border-right:5px solid #4a4038;}
.deployment-door-left i{right:12px;}
.deployment-door-right{right:-52%;border-left:5px solid #4a4038;}
.deployment-door-right i{left:12px;}
.deployment-overlay.is-active .deployment-door-left{animation:1.08s steps(7,end) both deploymentDoorLeft;}
.deployment-overlay.is-active .deployment-door-right{animation:1.08s steps(7,end) both deploymentDoorRight;}
.deployment-overlay.is-departing .deployment-door-left{animation:.48s steps(6,end) both deploymentDepartLeft;}
.deployment-overlay.is-departing .deployment-door-right{animation:.48s steps(6,end) both deploymentDepartRight;}
.deployment-arrival .deployment-door-left{transform:translateX(100%);}
.deployment-arrival .deployment-door-right{transform:translateX(-100%);}
.deployment-overlay.is-arriving .deployment-door-left{animation:.48s steps(6,end) both deploymentArriveLeft;}
.deployment-overlay.is-arriving .deployment-door-right{animation:.48s steps(6,end) both deploymentArriveRight;}
.deployment-readout{z-index:2;width:min(86vw,720px);position:absolute;top:50%;left:50%;display:flex;flex-direction:column;align-items:center;padding:34px;color:var(--white);text-align:center;background:#050609;border:4px solid #54463a;opacity:0;transform:translate(-50%,-50%);box-shadow:14px 14px #000,inset 0 0 0 5px #15110e;}
.deployment-overlay.is-active .deployment-readout{animation:1.08s steps(6,end) both deploymentReadoutFlash;}
.deployment-overlay.is-departing .deployment-readout{animation:.48s steps(4,end) both deploymentDepartReadout;}
.deployment-arrival .deployment-readout{opacity:1;}
.deployment-overlay.is-arriving .deployment-readout{animation:.48s steps(4,end) both deploymentArriveReadout;}
.deployment-readout small{color:var(--neon);font-family:'Share Tech Mono',monospace;font-size:10px;font-weight:700;letter-spacing:3px;}
.deployment-readout b{margin-top:17px;font-family:'Press Start 2P',monospace;font-size:clamp(18px,3.2vw,32px);line-height:1.35;letter-spacing:-.04em;text-shadow:6px 6px #182006;}
.deployment-readout strong{margin-top:17px;color:var(--ember);font-family:'Press Start 2P',monospace;font-size:clamp(22px,4vw,46px);line-height:1;}
.deployment-readout>i{width:min(100%,470px);height:17px;margin:27px 0 16px;padding:3px;background:#12100e;border:2px solid #3e352e;}
.deployment-readout>i em{display:block;height:100%;background:repeating-linear-gradient(135deg,var(--supply) 0 9px,#2c8c18 9px 18px);}
.deployment-overlay.is-active .deployment-readout>i em{animation:.7s steps(8,end) both deploymentProgress;}
.deployment-readout span{color:#8d8175;font-family:'Share Tech Mono',monospace;font-size:10px;font-weight:700;letter-spacing:2px;}
@keyframes deploymentFade{0%,100%{background:transparent;}20%,80%{background:rgba(2,3,5,.78);}}
@keyframes deploymentDoorLeft{0%,100%{transform:translateX(0);}30%,72%{transform:translateX(100%);}}
@keyframes deploymentDoorRight{0%,100%{transform:translateX(0);}30%,72%{transform:translateX(-100%);}}
@keyframes deploymentReadoutFlash{0%,18%,90%,100%{opacity:0;}30%,78%{opacity:1;}}
@keyframes deploymentProgress{from{width:0;}to{width:100%;}}
@keyframes deploymentDepartLeft{from{transform:translateX(0);}to{transform:translateX(100%);}}
@keyframes deploymentDepartRight{from{transform:translateX(0);}to{transform:translateX(-100%);}}
@keyframes deploymentArriveLeft{from{transform:translateX(100%);}to{transform:translateX(0);}}
@keyframes deploymentArriveRight{from{transform:translateX(-100%);}to{transform:translateX(0);}}
@keyframes deploymentDepartReadout{0%,55%{opacity:0;}100%{opacity:1;}}
@keyframes deploymentArriveReadout{0%,45%{opacity:1;}100%{opacity:0;}}

@media(max-width:640px){
  .nav-inner{padding:0 14px;gap:8px;}
  .main-brand{display:grid;place-items:center;min-width:40px;min-height:40px;}
  .main-brand .logo-box{width:34px;height:34px;}
  .navlinks{display:none;}
  .nav-actions{margin-left:auto;gap:8px;min-width:0;}
  .presence-hud{display:flex;min-height:32px;padding:0 6px;gap:4px;font-size:8px;letter-spacing:.35px;}
  .presence-led{width:7px;height:7px;}
  .nav-actions .navcta{display:flex;align-items:center;justify-content:center;min-height:40px;padding:7px 9px;font-size:10px;letter-spacing:.7px;white-space:nowrap;}
  .nav-actions .navcta .icon{width:14px;height:14px;}
  section{padding:56px 6% 60px;}
  .hero{padding-top:calc(var(--nav-h) + 20px);}
  body{padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));}

  .bottom-nav{
    display:flex;
    position:fixed;left:0;right:0;bottom:0;
    top:auto;
    z-index:200;
    background:rgba(6,9,11,.97);backdrop-filter:blur(10px);
    border-top:2px solid var(--neon-dim);
    box-shadow:0 -6px 24px rgba(0,0,0,.5);
    padding:8px 4px calc(8px + env(safe-area-inset-bottom));
  }
  .bn-item{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:9.5px;
    letter-spacing:.5px;text-transform:uppercase;color:var(--gray);
    padding:6px 2px;transition:.2s;
  }
  .bn-item svg{width:19px;height:19px;stroke-width:2.2;transition:.2s;}
  .bn-item.active{color:var(--neon);}
  .bn-item.active svg{filter:drop-shadow(0 0 6px var(--neon-glow));transform:translateY(-1px);}

}
@media(prefers-reduced-motion: reduce){
  .deployment-overlay,.deployment-door,.deployment-readout,.deployment-readout>i em{animation:none !important;}
  .deployment-arrival .deployment-overlay{visibility:hidden;}
}

/* Cherry chat launcher. The embedded panel derives its palette from the same
   yellow and ground tokens; the host only supplies the accessible launcher. */
.cherry-chat-controls{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:2147483647;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  pointer-events:none;
}
.cherry-chat-launcher,
.cherry-chat-close,
.cherry-chat-status{
  pointer-events:auto;
}
.cherry-chat-launcher[hidden],
.cherry-chat-close[hidden]{display:none;}
.cherry-chat-launcher{
  min-width:172px;
  min-height:52px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:2px solid var(--neon);
  background:var(--bg-panel);
  color:var(--white);
  box-shadow:5px 5px 0 #000,0 0 18px var(--neon-glow);
  font-family:'Press Start 2P',monospace;
  font-size:9px;
  line-height:1;
  letter-spacing:.04em;
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease;
}
.cherry-chat-launcher svg{width:20px;height:20px;color:var(--neon);stroke-width:2.4;}
.cherry-chat-launcher:hover:not(:disabled){
  transform:translate(2px,2px);
  background:var(--bg-panel-2);
  box-shadow:3px 3px 0 #000,0 0 22px var(--neon-glow);
}
.cherry-chat-launcher:focus-visible,
.cherry-chat-close:focus-visible,
.cherry-chat-status button:focus-visible{
  outline:3px solid var(--white);
  outline-offset:3px;
}
.cherry-chat-launcher:disabled{cursor:wait;opacity:.72;}
.cherry-chat-led{
  width:8px;
  height:8px;
  flex:0 0 auto;
  background:var(--gray);
  box-shadow:0 0 0 2px #000;
}
.cherry-chat-launcher.is-ready .cherry-chat-led{
  background:var(--supply);
  box-shadow:0 0 0 2px #000,0 0 8px var(--supply);
}
.cherry-chat-launcher.is-authenticated .cherry-chat-led{background:var(--neon);box-shadow:0 0 0 2px #000,0 0 9px var(--neon);}
.cherry-chat-close{
  width:48px;
  height:48px;
  align-items:center;
  justify-content:center;
  border:2px solid var(--neon);
  border-radius:50%;
  background:var(--bg-panel);
  color:var(--white);
  box-shadow:4px 4px 0 #000,0 0 16px var(--neon-glow);
  cursor:pointer;
}
.cherry-chat-close:not([hidden]){display:flex;}
.cherry-chat-close svg{width:24px;height:24px;stroke-width:2.5;}
.cherry-chat-close span{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.cherry-chat-close:hover{background:var(--bg-panel-2);color:var(--neon);}
.cherry-chat-controls.is-open{
  bottom:min(548px,calc(100vh - 72px));
}
.cherry-chat-status{
  max-width:300px;
  padding:10px 12px;
  border:1px solid var(--line);
  background:rgba(13,18,22,.98);
  color:var(--white);
  box-shadow:4px 4px 0 #000;
  font-family:'Share Tech Mono',monospace;
  font-size:12px;
  line-height:1.45;
}
.cherry-chat-status.is-error{border-color:var(--danger);}
.cherry-chat-status button{
  min-height:40px;
  margin-left:10px;
  padding:0 10px;
  border:1px solid var(--neon);
  background:transparent;
  color:var(--neon);
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

@media(max-width:640px){
  .cherry-chat-controls{
    right:12px;
    bottom:calc(var(--bottom-nav-h) + 16px + env(safe-area-inset-bottom));
  }
  .cherry-chat-launcher{min-width:52px;width:52px;padding:0;}
  .cherry-chat-launcher span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
}

@media(prefers-reduced-motion: reduce){
  .cherry-chat-launcher,.cherry-chat-close{transition:none;}
}

.mission-wallet{position:relative;flex-shrink:0;}
.mission-wallet .navcta{min-height:44px;cursor:pointer;white-space:nowrap;}
.mission-wallet .navcta:focus-visible{outline:2px solid var(--white);outline-offset:4px;}
.mission-wallet .navcta:disabled{opacity:.65;cursor:wait;}
#mission-wallet-status:not(:empty){position:absolute;top:calc(100% + 10px);right:0;width:min(300px,calc(100vw - 28px));padding:12px;background:var(--bg-panel);border:1px solid var(--shop-button-edge);color:var(--white);font-size:13px;line-height:1.5;box-shadow:4px 4px 0 #000;}

/* Extra small phones */
@media(max-width:380px){
  .hero h1{font-size:24px;}
  .eyebrow{font-size:8.5px;padding:8px 10px;}
  .hazard-track span{font-size:8px;padding:0 12px;gap:5px;}
  .hazard-track span svg{width:11px;height:11px;}
  .btn{padding:14px 20px;font-size:12px;}
  .bn-item{font-size:8.5px;}
}