/* SPONSHOOD — arcade CABINET / character-select.
   Divergent from sibling kittenhood (paper/sticker sheet, Catboo bubbly, hard-offset).
   Gestalt here: a coin-op cabinet with a marquee, a status rail, and a two-panel
   SELECT SCREEN (viewport of the picked unit | scrollable roster). Not a centered
   hero-in-a-void. Palette: aquatic abyss + lime + clownfish red-orange (measured
   dominant char hue). Bitmap type: Upheaval display, Pixellari UI. CRT scanline + bloom.
   Background = live motion sprites drawn from the collection's OWN atlas. */

@font-face { font-family:"Upheaval"; src:url("fonts/upheaval.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Pixellari"; src:url("fonts/pixellari.woff2") format("woff2"); font-display:swap; }

:root{
  --abyss:#061019; --abyss-2:#0a1a2a; --tank:#0e2436;
  --lime:#ccff00; --lime-dp:#9fd400;
  --pop:#ff5a2c; --pop-2:#ff8a3d;
  --paper:#eef6ee; --muted:#6f8aa0;
  --line:rgba(204,255,0,.16); --line-2:rgba(255,90,44,.22);
  --glass:rgba(10,26,42,.72);
  --bezel:#04202e;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:"Pixellari",ui-monospace,monospace;
  background:radial-gradient(1300px 800px at 50% -10%, var(--tank), var(--abyss) 62%) fixed;
  color:var(--paper); min-height:100vh; overflow-x:hidden; line-height:1.5;
  -webkit-font-smoothing:none;
}
img{image-rendering:pixelated;}
.mono{font-family:"Pixellari",ui-monospace,monospace; letter-spacing:.04em;}

/* ---- bg canvas + CRT ---- */
#bg{position:fixed; inset:0; z-index:0; opacity:.85;}
/* ---- Bikini Bottom x Robinhood seabed decoration ---- */
.seabed{position:fixed; left:0; right:0; bottom:0; width:100%;
  height:clamp(150px,26vh,300px); z-index:0; pointer-events:none;
  opacity:.45; object-fit:cover; object-position:bottom center;
  image-rendering:pixelated;
  -webkit-mask-image:linear-gradient(to top, #000 55%, rgba(0,0,0,.4) 80%, transparent 100%);
  mask-image:linear-gradient(to top, #000 55%, rgba(0,0,0,.4) 80%, transparent 100%);}
@media (max-width:720px){ .seabed{opacity:.22; height:clamp(110px,18vh,190px);} }
@media (prefers-reduced-motion:reduce){ .seabed{opacity:.18;} }
.scanlines{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.15) 2px 4px);
  mix-blend-mode:multiply;}
.scanlines::after{content:""; position:absolute; inset:0;
  background:radial-gradient(130% 90% at 50% 42%, transparent 52%, rgba(3,8,13,.7) 100%);}

/* ============ CABINET ============ */
.cabinet{
  position:relative; z-index:2;
  max-width:1280px; margin:22px auto; padding:0 clamp(10px,2vw,20px);
}

/* ---- marquee (header) ---- */
.marquee{
  display:flex; align-items:stretch; gap:16px; flex-wrap:wrap;
  border:2px solid var(--line); border-radius:14px 14px 6px 6px;
  background:linear-gradient(180deg, rgba(14,36,54,.92), rgba(6,16,25,.86));
  box-shadow:0 0 0 2px var(--bezel), 0 0 40px rgba(204,255,0,.10), inset 0 0 50px rgba(204,255,0,.04);
  padding:16px clamp(14px,3vw,26px); margin-bottom:14px;
}
.marquee-glass{flex:1; min-width:260px; display:flex; flex-direction:column; justify-content:center;}
.wordmark{
  font-family:"Upheaval",sans-serif; font-weight:400;
  font-size:clamp(40px,8vw,92px); line-height:.82; letter-spacing:clamp(1px,.6vw,6px);
  color:var(--lime);
  text-shadow: 2px 0 var(--pop), -2px 0 #14b8c4, 0 0 18px rgba(204,255,0,.5);
}
.marquee-sub{color:var(--pop); letter-spacing:.24em; font-size:13px; margin-top:8px;}
.navlinks{display:flex; align-items:center; gap:20px;}
.navlinks a{color:var(--muted); text-decoration:none; font-size:15px; letter-spacing:.12em; transition:color .18s,text-shadow .18s;}
.navlinks a:hover{color:var(--lime); text-shadow:0 0 10px rgba(204,255,0,.6);}
/* social chips: OpenSea + X, boxed so they read as outbound, not section anchors */
.navlinks a.soc{display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:30px; padding:0 9px; border:1px solid var(--line);
  border-radius:4px; color:var(--paper); font-size:13px; letter-spacing:.06em;}
.navlinks a.soc:hover{color:var(--abyss); background:var(--lime);
  border-color:var(--lime); text-shadow:none;}

/* ---- buttons ---- */
.btn{font-family:"Pixellari",monospace; cursor:pointer; border:none; letter-spacing:.1em;
  transition:transform .12s,box-shadow .18s,background .18s,color .18s,border-color .18s; border-radius:4px; color:var(--abyss);}
.btn:active{transform:translateY(1px);}
.btn:disabled{cursor:not-allowed; opacity:.55; filter:grayscale(.4); box-shadow:none;}
.btn-primary:disabled{background:#2a3a20; color:#7f8f6a; box-shadow:inset 0 0 0 1px rgba(204,255,0,.2);}
.btn-sm{padding:7px 13px; font-size:13px;}
.btn-connect{background:transparent; color:var(--lime); border:1px solid var(--lime); padding:9px 18px; font-size:14px; letter-spacing:.12em;}
.btn-connect:hover{box-shadow:0 0 16px rgba(204,255,0,.4); background:rgba(204,255,0,.08);}
.btn-connect.connected{color:var(--pop); border-color:var(--pop);}
.btn-primary{background:var(--lime); color:#0a1a06; font-weight:700; padding:14px 26px; font-size:18px; letter-spacing:.12em;
  box-shadow:0 0 0 1px var(--lime-dp), 0 0 22px rgba(204,255,0,.32);}
.btn-primary:hover{background:#d8ff2e; box-shadow:0 0 0 1px var(--lime-dp), 0 0 34px rgba(204,255,0,.55);}
.btn-ghost{background:transparent; color:var(--paper); border:1px solid var(--muted); padding:10px 16px; font-size:14px; letter-spacing:.1em;}
.btn-ghost:hover{border-color:var(--pop); color:var(--pop);}

/* ---- status rail (weighted, not flat ticker) ---- */
.rail{
  display:grid; grid-template-columns:repeat(5,minmax(96px,1fr)) 1.4fr; gap:2px;
  background:var(--line); border:2px solid var(--line); border-radius:8px; overflow:hidden;
  margin-bottom:14px;
}
.rail-cell{background:linear-gradient(180deg,#0c1f30,#081521); padding:12px 16px; display:flex; flex-direction:column; gap:3px; justify-content:center;}
.rail-cell.wide{gap:8px; min-width:220px;}
.rail-k{font-size:11px; color:var(--muted); letter-spacing:.14em;}
.rail-cell b{font-family:"Upheaval",monospace; font-size:26px; color:var(--lime); line-height:1;}
.rail-cell.primary b{color:var(--lime);}
.chip{display:inline-block; font-size:13px; letter-spacing:.12em; padding:4px 11px; border-radius:3px; border:1px solid var(--muted); color:var(--muted); width:max-content;}
.chip.ok{color:var(--lime); border-color:var(--lime); box-shadow:0 0 14px rgba(204,255,0,.3);}
.chip.wait{color:var(--pop); border-color:var(--pop);}
.progress{height:12px; background:#08131d; border:1px solid var(--line); border-radius:3px; overflow:hidden;}
.bar{height:100%; width:0; background:repeating-linear-gradient(90deg,var(--lime) 0 8px,var(--lime-dp) 8px 12px);
  box-shadow:0 0 14px rgba(204,255,0,.6); transition:width .6s ease;}

/* ============ SELECT SCREEN ============ */
.screen{
  display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:14px;
  border:2px solid var(--line); border-radius:6px 6px 14px 14px;
  box-shadow:0 0 0 2px var(--bezel), 0 30px 90px rgba(0,0,0,.55);
  overflow:hidden;
}

/* left viewport */
.viewport{
  background:linear-gradient(180deg, rgba(14,36,54,.94), rgba(6,16,25,.96));
  padding:22px clamp(16px,2.4vw,26px); display:flex; flex-direction:column; gap:16px;
  border-right:2px solid var(--line);
}
.vp-frame{position:relative;}
.vp-stage{
  position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(204,255,0,.14), transparent 60%),
    repeating-linear-gradient(to bottom, #0a1c12 0 3px, #0c2416 3px 6px);
  border:1px solid var(--line-2); box-shadow:inset 0 0 40px rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
}
.vp-stage img{width:88%; height:88%; object-fit:contain; filter:drop-shadow(0 8px 0 rgba(0,0,0,.35)) drop-shadow(0 0 18px rgba(204,255,0,.25)); position:relative; z-index:1;}
.vp-glow{position:absolute; inset:0; z-index:0;
  background:radial-gradient(circle at 50% 60%, rgba(255,90,44,.16), transparent 55%); animation:breath 4s ease-in-out infinite;}
@keyframes breath{0%,100%{opacity:.5;} 50%{opacity:1;}}
.vp-id{position:absolute; top:10px; left:10px; background:rgba(6,16,25,.85); border:1px solid var(--lime);
  color:var(--lime); padding:4px 10px; border-radius:3px; font-size:16px; z-index:2; box-shadow:0 0 12px rgba(204,255,0,.3);}

.vp-traits{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
/* odd trait count would leave an orphan cell — let the last one span the row */
.vp-traits .trait:last-child:nth-child(odd){grid-column:1 / -1;}
.trait{background:#08151f; border:1px solid var(--line); border-radius:6px; padding:9px 11px; display:flex; flex-direction:column; gap:2px;}
.trait .tk{font-size:10.5px; color:var(--muted); letter-spacing:.12em;}
.trait b{font-size:14px; color:var(--paper);}
.trait.skeleton{opacity:.35;}

.vp-mint{display:flex; align-items:center; gap:14px;}
.qty{display:flex; align-items:center; gap:12px;}
.btn-step{width:44px; height:44px; font-size:22px; background:#08151f; color:var(--lime); border:1px solid var(--lime); border-radius:6px; line-height:1;}
.btn-step:hover{background:rgba(204,255,0,.1);}
.qty-num{font-size:30px; min-width:46px; text-align:center; color:var(--lime); font-family:"Pixellari",monospace; text-shadow:0 0 10px rgba(204,255,0,.4);}
.btn-mint{flex:1; padding:15px; font-size:19px;}
.walletline{font-size:12.5px; color:var(--muted); text-align:center;}
.quoteline{font-size:14px; color:var(--pop); text-align:center; min-height:18px;}
.fineprint{font-size:11px; color:#4c6478; text-align:center; letter-spacing:.03em;}

/* right roster */
.roster-wrap{background:linear-gradient(180deg, rgba(10,26,42,.92), rgba(5,12,20,.96)); padding:20px clamp(14px,2vw,22px); display:flex; flex-direction:column;}
.roster-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.panel-h{font-family:"Upheaval",sans-serif; font-weight:400; font-size:26px; color:var(--paper); letter-spacing:2px; text-shadow:2px 2px 0 var(--pop);}
.roster{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:10px;
  overflow-y:auto; flex:1; min-height:0; padding-right:6px; align-content:start;
}
.roster::-webkit-scrollbar{width:8px;}
.roster::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px;}
.cell{position:relative; background:#08151f; border:1px solid var(--line); border-radius:6px; overflow:hidden; cursor:pointer;
  transition:transform .14s,border-color .14s,box-shadow .14s;}
.cell img{width:100%; display:block; aspect-ratio:1; background:var(--lime);}
.cell .cid{position:absolute; bottom:0; left:0; right:0; font-size:10px; text-align:center; color:var(--muted);
  background:#061019; color:#9fb3c4; padding:3px 2px; letter-spacing:.04em; border-top:1px solid rgba(204,255,0,.12);}
.cell:hover{transform:translateY(-3px) scale(1.03); border-color:var(--lime); box-shadow:0 0 18px rgba(204,255,0,.3);}
.cell.active{border-color:var(--pop); box-shadow:0 0 20px rgba(255,90,44,.5);}
.cell.active .cid{color:var(--pop);}
.roster-note{margin-top:14px; font-size:12px; color:#4c6478; line-height:1.6;}

/* ---- sections below cabinet ---- */
.sect-h{font-family:"Upheaval",sans-serif; font-weight:400; font-size:clamp(30px,6vw,56px); text-align:center; color:var(--paper); letter-spacing:3px; margin-bottom:8px; text-shadow:3px 3px 0 var(--pop);}
.how{padding:64px clamp(16px,5vw,64px);}
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-top:34px; max-width:1120px; margin-inline:auto;}
.step{background:rgba(10,26,42,.6); border:1px solid var(--line); border-radius:8px; padding:22px; transition:transform .18s,border-color .18s;}
.step:hover{transform:translateY(-4px); border-color:var(--lime);}
.step-n{color:var(--pop); font-size:24px;}
.step h3{color:var(--lime); margin:8px 0 6px; font-size:19px;}
.step p{color:#b9cdda; font-size:14.5px;}

.faq{padding:20px clamp(16px,5vw,64px) 80px; max-width:860px; margin-inline:auto;}
.faq-grid{display:flex; flex-direction:column; gap:12px; margin-top:26px;}
details{background:rgba(10,26,42,.6); border:1px solid var(--line); border-radius:8px; padding:4px 18px;}
details[open]{border-color:var(--lime);}
summary{cursor:pointer; padding:14px 0; color:var(--paper); font-size:16px; list-style:none;}
summary::-webkit-details-marker{display:none;}
summary::before{content:"▸ "; color:var(--pop);}
details[open] summary::before{content:"▾ ";}
details p{padding:0 0 16px; color:#b9cdda; font-size:14.5px;}

.foot{border-top:1px solid var(--line); padding:30px clamp(16px,5vw,56px); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; position:relative; z-index:2;}
.brand.small{font-family:"Upheaval",sans-serif; font-size:22px; color:var(--lime); letter-spacing:2px; text-shadow:0 0 10px rgba(204,255,0,.4);}
.foot-meta{color:var(--muted); font-size:13px; display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
.foot-meta a{color:var(--paper); text-decoration:none; border-bottom:1px solid var(--line); transition:color .18s,border-color .18s;}
.foot-meta a:hover{color:var(--lime); border-color:var(--lime);}

.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(140%);
  background:#0a1a2a; border:1px solid var(--lime); color:var(--paper); padding:13px 22px; border-radius:6px; font-size:14px; z-index:40;
  max-width:90vw; transition:transform .3s ease; box-shadow:0 0 26px rgba(0,0,0,.6);}
.toast.show{transform:translateX(-50%) translateY(0);}
.toast.err{border-color:var(--pop); color:var(--pop-2);}
.toast.wait{border-color:var(--pop-2);}

@media (max-width:900px){
  .screen{grid-template-columns:1fr;}
  .viewport{border-right:none; border-bottom:2px solid var(--line);}
  .roster{max-height:420px;}
  .rail{grid-template-columns:1fr 1fr;}
  .rail-cell.wide{grid-column:1 / -1;}
}
@media (max-width:560px){
  .navlinks{gap:12px; font-size:13px; flex-wrap:wrap;}
  .vp-traits{grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion:reduce){ #bg{display:none;} .vp-glow{animation:none;} }
#statFree{color:var(--pop); text-shadow:0 0 10px rgba(255,90,44,.45);}