:root{
  --bg:#12151c;
  --bg2:#171b24;
  --panel:#222b36;
  --panel2:#2b3540;
  --edge:#3a4754;
  --green:#39e36a;
  --green-d:#1f9e45;
  --amber:#f4a93c;
  --red:#e8554f;
  --blue:#59c2e8;
  --purple:#c07ef0;
  --txt:#cdd8e0;
  --dim:#7d8b98;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--txt);font-family:'Press Start 2P',monospace;-webkit-font-smoothing:none}
body{font-size:11px;line-height:1.7}
button{font-family:inherit;cursor:pointer}

.topbar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px 16px;background:var(--bg2);
  border-bottom:3px solid var(--edge);
  position:sticky;top:0;z-index:50;
}
.logo{font-size:18px;color:var(--green);text-shadow:0 3px 0 #0a3318;letter-spacing:1px}
.blink{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.top-stats{display:flex;gap:14px;flex-wrap:wrap;margin-left:auto}
.stat{display:flex;flex-direction:column;align-items:flex-end}
.stat .lbl{font-size:7px;color:var(--dim)}
.stat .val{font-size:12px}
.val.cash{color:var(--green)} .val.crude{color:#9aa7b4}
.val.fuel{color:var(--amber)} .val.plasma{color:var(--purple)}
.val.power{color:var(--blue)} .val.power.over{color:var(--red)}

.btn{
  background:var(--panel2);color:var(--txt);
  border:0;padding:10px 14px;font-size:10px;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.08), 0 0 0 2px #10141a;
  image-rendering:pixelated;
}
.btn:active{transform:translateY(2px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.45),0 0 0 2px #10141a}
.btn.green{background:var(--green-d);color:#eafff0}
.btn.amber{background:#b4731e;color:#fff2dc}
.btn.red{background:#8e332f;color:#ffe3e1}
.btn:disabled{opacity:.45;cursor:not-allowed}
.wallet-btn{color:var(--green)}
.wallet-btn.connected{color:var(--txt)}

main{max-width:1200px;margin:0 auto;padding:14px}

.game-wrap{position:relative;background:var(--bg2);border:3px solid var(--edge);overflow:hidden}
#game{display:block;width:100%;height:62vh;min-height:420px;touch-action:manipulation;image-rendering:pixelated}

.corner-btns{position:absolute;top:10px;left:10px;display:flex;gap:8px;flex-wrap:wrap}

.toast-zone{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;z-index:30}
.toast{background:var(--panel);border:2px solid var(--edge);padding:8px 12px;font-size:9px;color:var(--green);animation:toastIn .25s steps(4), toastOut .5s steps(4) 3.5s forwards}
.toast.warn{color:var(--amber)} .toast.bad{color:var(--red)}
@keyframes toastIn{from{transform:translateX(30px);opacity:0}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px)}}

.panel{
  position:absolute;background:var(--panel);
  border:3px solid var(--edge);box-shadow:0 8px 0 rgba(0,0,0,.35);
  z-index:40;
}
.hidden{display:none!important}
.sel-panel{right:10px;bottom:10px;width:280px}
.sel-head{display:flex;justify-content:space-between;align-items:center;background:var(--panel2);padding:8px 10px;font-size:10px;color:var(--green)}
.sel-head .x{background:none;border:0;color:var(--dim);font-size:14px}
.sel-body{padding:10px;display:flex;flex-direction:column;gap:8px}
.sel-info{font-size:9px;color:var(--txt)}
.sel-info b{color:var(--amber)}
.sel-info .row{display:flex;justify-content:space-between;margin:3px 0}

.lb-panel{left:50%;top:8%;transform:translateX(-50%);width:min(420px,94%);max-height:84%;overflow:auto;z-index:50}
.lb-tabs{display:flex;gap:6px;padding:10px 10px 0}
.lb-tab{flex:1;font-size:9px;padding:7px 4px;opacity:.55}
.lb-tab.on{opacity:1;border-color:var(--green);color:var(--green)}
.lb-sub{font-size:7px;color:var(--dim);padding:8px 10px 4px}
.lb-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid #1b222b;font-size:9px}
.lb-row .rk{width:28px;color:var(--dim)}
.lb-row:nth-child(1) .rk{color:var(--amber)}
.lb-row:nth-child(2) .rk,.lb-row:nth-child(3) .rk{color:var(--txt)}
.lb-row .w{flex:1;color:var(--txt)}
.lb-row .v{color:var(--green)}
.lb-row.me{background:var(--panel2)}
.lb-row.me .w{color:var(--amber)}
.ms-panel{left:50%;top:8%;transform:translateX(-50%);width:min(480px,94%);max-height:84%;overflow:auto}
.ms-list{padding:10px;display:flex;flex-direction:column;gap:10px}
.ms{border:2px solid var(--edge);padding:10px;background:var(--bg2)}
.ms .t{display:flex;justify-content:space-between;font-size:10px;margin-bottom:6px}
.ms .t .name{color:var(--txt)} .ms.done .t .name{color:var(--green)}
.ms .tier{color:var(--amber);font-size:8px}
.ms .desc{font-size:8px;color:var(--dim);margin-bottom:6px}
.ms .barwrap{background:#0d1117;height:12px;border:2px solid var(--edge);position:relative}
.ms .bar{height:100%;background:var(--green-d)}
.ms.done .bar{background:var(--green)}
.ms .claimrow{margin-top:8px;display:flex;align-items:center;gap:8px}
.ms .claimed{color:var(--green);font-size:9px}
.ms-note{padding:10px;font-size:8px;color:var(--dim);border-top:2px solid var(--edge)}

.buildbar{display:flex;gap:10px;overflow-x:auto;padding:12px 2px;background:var(--bg)}
.bcard{
  min-width:150px;background:var(--panel);border:3px solid var(--edge);
  padding:8px;display:flex;flex-direction:column;gap:5px;cursor:pointer;flex:0 0 auto;
}
.bcard:hover{border-color:var(--green-d)}
.bcard.active{border-color:var(--green);background:var(--panel2)}
.bcard.cant{opacity:.5}
.bcard .bimg{height:56px;display:flex;align-items:center;justify-content:center}
.bcard .bimg img{max-height:56px;image-rendering:pixelated}
.bcard .bname{font-size:9px;color:var(--txt)}
.bcard .bdesc{font-size:7px;color:var(--dim)}
.bcard .bcost{font-size:9px;color:var(--green)}

.info{margin-top:18px}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.card{background:var(--panel);border:3px solid var(--edge);padding:14px}
.card h3{font-size:11px;color:var(--green);margin-bottom:8px}
.card p{font-size:9px;color:var(--dim)}
.card b{color:var(--amber)}
.foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:16px 0 30px;font-size:8px;color:var(--dim)}
.ca{color:var(--amber);word-break:break-all}

@media(max-width:760px){
  body{font-size:10px}
  .logo{font-size:14px}
  .top-stats{gap:9px;width:100%;order:3;justify-content:space-between}
  .stat .val{font-size:10px}
  #game{height:52vh;min-height:340px}
  .sel-panel{left:10px;right:10px;width:auto}
}

/* ---- themed scrollbars ---- */
*{scrollbar-width:thin;scrollbar-color:var(--green-d) var(--bg2)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg2);border-left:2px solid var(--edge)}
::-webkit-scrollbar-thumb{background:var(--green-d);border:2px solid var(--bg2)}
::-webkit-scrollbar-thumb:hover{background:var(--green)}

/* ---- milestone banner ---- */
.banner-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,13,18,.72);z-index:60}
.banner{background:var(--panel);border:3px solid var(--green);box-shadow:0 10px 0 rgba(0,0,0,.4);padding:22px 26px;text-align:center;animation:bnIn .3s steps(5)}
@keyframes bnIn{from{transform:scale(.6);opacity:0}}
.bn-title{font-size:10px;color:var(--amber);margin-bottom:10px}
.bn-name{font-size:16px;color:var(--green);margin-bottom:8px;text-shadow:0 3px 0 #0a3318}
.bn-reward{font-size:9px;color:var(--txt);margin-bottom:16px}
.bn-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---- misc ---- */
.ms-note .req{color:var(--amber)}
.bcard .bimg img{max-height:56px;max-width:120px;image-rendering:pixelated;object-fit:contain}

/* ---- airdrop transparency panel ---- */
.drops{
  position:absolute;left:10px;top:60px;width:250px;z-index:35;
  background:var(--panel);border:3px solid var(--edge);
  box-shadow:0 6px 0 rgba(0,0,0,.35);
}
.drops-head{display:flex;justify-content:space-between;align-items:center;background:var(--panel2);padding:7px 10px;font-size:9px;color:var(--amber)}
.drops-head .x{background:none;border:0;color:var(--dim);font-size:14px}
.drops-body.collapsed{display:none}
.drops-rate{padding:9px 10px;border-bottom:2px solid var(--edge);background:var(--bg2)}
.dr-lbl{font-size:7px;color:var(--dim)}
.dr-val{font-size:13px;color:var(--green);margin:6px 0 4px;display:flex;align-items:center;gap:5px}
.dr-val small{font-size:7px;color:var(--dim)}
.dr-sub{font-size:7px;color:var(--amber);margin-top:6px}
.dr-lbl .live{color:var(--bg);background:var(--green);padding:2px 4px;margin-left:4px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}
.dr-note{font-size:7px;color:var(--dim);line-height:1.7;margin-top:6px}
.drops-total{padding:8px 10px;border-bottom:2px solid var(--edge)}
.dt-row{display:flex;justify-content:space-between;margin:3px 0}
.dt-row .lbl{font-size:7px;color:var(--dim)}
.dt-row .val{font-size:10px;color:var(--green)}
.drops-list{max-height:230px;overflow:auto}
.drops-empty{padding:10px;font-size:8px;color:var(--dim);line-height:1.8}
.drop-row{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid #1b222b;font-size:8px}
.drop-row .w{color:var(--txt)}
.drop-row .amt{color:var(--green)}
.drop-row a{color:var(--blue);text-decoration:none;font-size:8px;white-space:nowrap}
.drop-row a:hover{color:var(--green)}
.drops-nav{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-top:2px solid var(--edge)}
.drops-nav .btn{padding:4px 10px;font-size:10px}
.drops-nav span{font-size:8px;color:var(--dim)}
@media(max-width:900px){
  .drops{position:static;width:auto;margin:0;border-top:0}
  .game-wrap{display:flex;flex-direction:column}
  .drops{order:2}
}

/* ---- intro + paid notification + sol icon ---- */
.solico{width:20px;height:20px;image-rendering:pixelated;vertical-align:-5px;margin-right:5px}
.dr-val .solico{width:26px;height:26px}
.banner.intro{max-width:440px;text-align:left}
.banner.intro .bn-name{text-align:center}
.intro-txt{font-size:9px;line-height:2.1;color:var(--txt);margin:14px 0 16px}
.intro-txt b{color:var(--amber)}
.banner.paid{border-color:var(--purple)}
.paid-ico{width:48px;height:48px;image-rendering:pixelated;margin-bottom:8px}
.banner.paid .bn-name{color:var(--purple);text-shadow:0 3px 0 #2a1440}
.btn.surge{background:#b4731e;animation:surgePulse .5s steps(2) infinite}
@keyframes surgePulse{50%{box-shadow:inset 0 -4px 0 rgba(0,0,0,.45),0 0 0 2px #f4a93c}}
a.btn{text-decoration:none;display:inline-block}