:root{
  --bg:#0b0d14; --bg2:#121627; --line:#2a3350;
  --green:#39ff88; --green-d:#1faa57; --amber:#ffc447; --red:#ff5c6c;
  --txt:#c9d4ee; --muted:#6c7a9c; --pix:'Press Start 2P',monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt);
  font-family:var(--pix); font-size:12px; line-height:1.9;
  image-rendering:pixelated; overflow-x:hidden;
}
.hidden{display:none!important}
.muted{color:var(--muted)}
.small{font-size:9px}

.scanlines{
  position:fixed; inset:0; z-index:999; pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;
}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px; border-bottom:3px solid var(--line);
  background:var(--bg2); position:sticky; top:0; z-index:50;
}
.logo{color:var(--green); font-size:13px; letter-spacing:2px; text-shadow:0 0 8px rgba(57,255,136,.5)}
.blink{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.topbar-right{display:flex; align-items:center; gap:8px}
.net-badge{
  font-size:8px; padding:4px 8px; border:2px solid var(--amber);
  color:var(--amber);
}

/* ---------- hero ---------- */
.hero{
  min-height:340px; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:40px 16px;
  background:
    linear-gradient(180deg,rgba(11,13,20,.55),rgba(11,13,20,.95)),
    url('../img/hero.png') center/cover no-repeat;
  border-bottom:3px solid var(--line);
}
.pixel-title{
  font-size:clamp(18px,5vw,38px); margin:0 0 16px; color:#fff;
  text-shadow:4px 4px 0 #000, 0 0 24px rgba(57,255,136,.6);
  letter-spacing:3px;
}
.hero-sub{color:var(--txt); font-size:clamp(9px,2vw,12px); margin:0 0 24px}

/* ---------- layout ---------- */
.wrap{max-width:920px; margin:0 auto; padding:20px 14px 60px; display:grid; gap:18px}
.panel{
  background:var(--bg2); border:3px solid var(--line); padding:16px;
  box-shadow:6px 6px 0 rgba(0,0,0,.5);
}
.panel-title{
  margin:0 0 14px; font-size:11px; color:var(--green);
  border-bottom:2px dashed var(--line); padding-bottom:10px;
}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--pix); font-size:10px; cursor:pointer;
  background:var(--line); color:var(--txt);
  border:3px solid #3d4a70; border-bottom-width:6px; border-right-width:6px;
  padding:12px 14px; text-transform:uppercase; transition:none;
  letter-spacing:1px;
}
.btn:hover:not(:disabled){background:#38446a; color:#fff}
.btn:active:not(:disabled){border-bottom-width:3px; border-right-width:3px; transform:translate(3px,3px)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn-sm{font-size:8px; padding:8px 10px}
.btn-big{font-size:12px; padding:16px 22px}
.btn-primary{background:var(--green-d); border-color:var(--green); color:#04140a}
.btn-primary:hover:not(:disabled){background:var(--green); color:#04140a}
.btn-warn{background:#8a6a12; border-color:var(--amber); color:#ffe9b0}
.btn-warn:hover:not(:disabled){background:var(--amber); color:#201500}
.ghost{background:transparent}

/* ---------- forms ---------- */
.hire-row{display:grid; gap:12px; margin-bottom:14px}
.field{display:block}
.lbl{display:block; font-size:8px; color:var(--muted); margin-bottom:6px}
input[type=number],input[type=text]{
  width:100%; font-family:var(--pix); font-size:13px; padding:12px;
  background:#070910; color:var(--green); border:3px solid var(--line);
}
input:focus{outline:none; border-color:var(--green)}
.hire-meta{font-size:9px; color:var(--txt); display:grid; gap:4px}
.hire-meta b{color:var(--amber)}

.btn-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}

.ticker{
  margin-top:12px; padding:10px; font-size:9px; text-align:center;
  background:#070910; border:2px solid var(--line); color:var(--muted);
  overflow:hidden; white-space:nowrap;
}
.ticker.live{color:var(--green); border-color:var(--green-d)}

/* ---------- stats ---------- */
.stats{display:grid; gap:10px}
.stat{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:#070910; border-left:4px solid var(--green-d); padding:10px 12px;
}
.stat .k{font-size:8px; color:var(--muted)}
.stat .v{font-size:11px; color:var(--green); text-align:right; word-break:break-all}

.progress-wrap{height:14px; background:#070910; border:2px solid var(--line); margin-top:14px}
.progress{height:100%; width:0; background:repeating-linear-gradient(90deg,var(--green-d) 0 6px,var(--green) 6px 12px); transition:width .4s}

/* ---------- referral ---------- */
.ref-row{display:flex; gap:8px}
.ref-row input{font-size:9px; color:var(--amber)}
.levels{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:6px}
.levels li{
  display:flex; justify-content:space-between; font-size:9px;
  background:#070910; padding:8px 12px; border-left:4px solid var(--amber);
}
.levels b{color:var(--amber)}

.foot{
  text-align:center; padding:24px 14px 40px; font-size:8px;
  color:var(--muted); border-top:3px solid var(--line); display:grid; gap:8px;
}

/* ---------- desktop ---------- */
@media(min-width:760px){
  body{font-size:13px}
  .hire-row{grid-template-columns:200px 1fr auto; align-items:end}
  .stats{grid-template-columns:repeat(2,1fr)}
  .btn-grid{grid-template-columns:repeat(2,1fr)}
  .levels{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:1000px){
  .wrap{grid-template-columns:1fr 1fr}
  #panelRig{grid-column:1/-1}
  #panelGlobal{grid-column:1/-1}
  .stats{grid-template-columns:repeat(3,1fr)}
}
/* ===== dashboard layout patch ===== */
.stats{grid-template-columns:1fr}
.stat{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.stat .k{white-space:nowrap;line-height:1.6}
.stat .v{white-space:nowrap;word-break:normal;text-align:left;max-width:100%;font-size:10px;line-height:1.5;letter-spacing:0}
.ticker{text-overflow:ellipsis}
.ref-row{min-width:0}
.ref-row input{flex:1 1 auto;min-width:0;font-size:8px}
.ref-row .btn{flex:0 0 auto}
.levels li{white-space:nowrap}
@media(min-width:560px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:760px){.stat .v{font-size:11px}}
@media(min-width:1000px){
  .stats{grid-template-columns:repeat(2,1fr)}
  #panelGlobal .stats{grid-template-columns:repeat(3,1fr)}
}

/* ===== manual wallet ===== */
#panelWallet .ref-row{margin-top:10px}
#walletNote{margin-top:8px;color:var(--amber);min-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== connected wallet chip ===== */
.wallet-chip{
  display:flex; align-items:center; gap:8px; font-size:8px;
  background:#070910; border:2px solid var(--green-d); padding:5px 8px;
  white-space:nowrap; max-width:100%;
}
.wallet-chip .mode{color:var(--green); font-size:7px; letter-spacing:1px}
.wallet-chip .addr{color:var(--txt)}
.wallet-chip .bal{color:var(--amber); border-left:2px solid var(--line); padding-left:8px}
@media(max-width:560px){
  .wallet-chip .mode{display:none}
  .wallet-chip{gap:6px; padding:4px 6px}
}

/* ===== referral panel fix ===== */
#refLink{
  flex:1 1 auto; min-width:0;
  background:#070910 !important; color:var(--amber) !important;
  border:3px solid var(--line); font-size:9px; padding:10px;
  text-overflow:ellipsis;
}
.levels li{
  flex-direction:column; align-items:flex-start; gap:2px;
  white-space:nowrap; font-size:8px; line-height:1.6;
}
.levels li span{color:var(--muted)}
.levels li b{font-size:11px}

/* ===== topbar overflow ===== */
.topbar{flex-wrap:wrap; gap:10px}
.topbar-right{flex-wrap:wrap; justify-content:flex-end}
.logo{flex:0 0 auto}
.btn-sm{padding:7px 9px}

#contractInfo a{color:var(--amber);text-decoration:none}


/* ===== withdraw buttons ===== */
.btn-block{display:block;width:100%;margin-top:14px;padding:14px;text-align:center}
#btnWithdrawComm{font-size:9px;letter-spacing:1px}
#btnWithdraw:disabled,#btnWithdrawComm:disabled{opacity:1;background:#3a3116;border-color:#5c4d1f;color:#8a7c4a}

/* ===== topbar fit ===== */
.topbar{overflow-x:hidden}
.topbar-right{flex:1 1 auto; justify-content:flex-end; min-width:0}
.wallet-chip{flex:0 1 auto; overflow:hidden}
.btn-sm{font-size:7px;padding:6px 8px}

/* ===== modal ===== */
.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.78);padding:16px}
.modal-box{background:var(--bg2);border:3px solid var(--green);box-shadow:0 0 0 3px #000,8px 8px 0 rgba(0,0,0,.6);padding:20px;max-width:340px;width:100%}
.modal-box h3{margin:0 0 12px;font-size:10px;color:var(--green);letter-spacing:1px;line-height:1.8}
.modal-box p{margin:0 0 18px;font-size:9px;color:var(--txt);line-height:2}
.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.modal-actions.single{grid-template-columns:1fr}

/* ===== scene retune ===== */
.mine-scene{background:#23273a;height:220px}
.miner{height:100%;width:auto;margin-bottom:0;object-fit:contain;transform-origin:50% 88%}
.mine-rock{display:none}
.sparks{right:auto;left:26%;bottom:48%;width:40px;height:40px}
.sparks i:nth-child(1){--dx:-26px;--dy:-26px}
.sparks i:nth-child(2){--dx:-34px;--dy:-6px;background:var(--green)}
.sparks i:nth-child(3){--dx:-18px;--dy:-34px}
.sparks i:nth-child(4){--dx:-38px;--dy:-16px;background:var(--green)}
@media(max-width:560px){.mine-scene{height:170px}}

/* ===== scene centered ===== */
.mine-scene{
  max-width:300px; margin:0 auto 16px; height:200px;
  background:#262b3d; border:3px solid var(--line);
  display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden; position:relative;
}
.mine-scene .miner{
  height:100%; width:auto; margin:0 auto; display:block;
  object-fit:contain; image-rendering:pixelated;
  transform-origin:50% 88%;
}
.mine-scene .mine-rock{position:absolute;display:none}
.mine-scene .sparks{position:absolute;right:auto;left:24%;bottom:50%}
@media(max-width:560px){
  .mine-scene{max-width:100%;height:170px}
}

/* ===== video miner ===== */
.mine-scene video.miner{animation:none;object-fit:contain}
.mine-scene:not(.mining) video.miner{filter:brightness(.72) saturate(.8)}
.mine-scene video.miner{transition:filter .25s}
.mine-scene::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 40px rgba(0,0,0,.55)}

/* ===== scene square + hero fit ===== */
.mine-scene{aspect-ratio:1/1;height:auto;max-width:280px;padding:0}
.mine-scene video.miner{width:100%;height:100%;object-fit:cover;object-position:center bottom}
@media(max-width:560px){.mine-scene{max-width:100%}}

.hero{min-height:380px;background:linear-gradient(180deg,rgba(11,13,20,.15),rgba(11,13,20,.92)),url('../img/hero.png') center 35%/cover no-repeat}
.hero .pixel-title{display:none}
.hero-sub{background:rgba(11,13,20,.65);border:2px solid var(--line);padding:8px 14px;font-size:11px}

/* ===== mobile buttons ===== */
@media(max-width:560px){
  .btn-grid{grid-template-columns:1fr}
  .btn-grid .btn{white-space:nowrap;font-size:9px;padding:13px 10px}
  .hire-row{gap:10px}
  .ticker{font-size:8px}
}

/* ===== extra scene fx ===== */
.coins{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.coins b{position:absolute;width:9px;height:9px;border-radius:50%;background:#ffc447;box-shadow:inset -2px -2px 0 #b8860b,0 0 6px rgba(255,196,71,.8);opacity:0}
.coins b::after{content:"";position:absolute;left:2px;top:3px;width:5px;height:1px;background:#b8860b;box-shadow:0 2px 0 #b8860b,0 4px 0 #b8860b}
.coins b:nth-child(1){left:12%;bottom:22%;animation:coinFloat 3.2s steps(8,end) infinite}
.coins b:nth-child(2){left:80%;bottom:30%;animation:coinFloat 4.1s steps(8,end) .6s infinite}
.coins b:nth-child(3){left:28%;bottom:12%;animation:coinFloat 3.7s steps(8,end) 1.2s infinite}
.coins b:nth-child(4){left:66%;bottom:14%;animation:coinFloat 4.6s steps(8,end) 1.8s infinite}
.coins b:nth-child(5){left:46%;bottom:8%;animation:coinFloat 3.4s steps(8,end) 2.4s infinite}
@keyframes coinFloat{0%{opacity:0;transform:translateY(0) scale(.6)}25%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translateY(-46px) scale(1)}}

.glow{position:absolute;left:50%;bottom:34%;width:120px;height:120px;margin-left:-60px;border-radius:50%;background:radial-gradient(circle,rgba(255,196,71,.22),transparent 70%);pointer-events:none;animation:glowPulse 2.4s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:.9;transform:scale(1.08)}}
.mine-scene:not(.mining) .coins b,.mine-scene:not(.mining) .glow{animation-play-state:paused}

/* ===== social ===== */
.tg{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin:0 auto;color:var(--amber);border:3px solid var(--line);background:#070910}
.tg:hover{color:#04140a;background:var(--amber);border-color:var(--amber)}

/* ================= NEON THEME ================= */
:root{
  --bg:#05060a; --bg2:#0d0a18; --line:#2f2050;
  --green:#2ef2ff; --green-d:#0f8fa8; --amber:#ffc447; --red:#ff2fd0;
  --txt:#d8d4ec; --muted:#7a6fa0;
  --pink:#ff2fd0; --violet:#7a3cff;
}

body{
  background:
    radial-gradient(900px 380px at 50% -8%, rgba(122,60,255,.30), transparent 70%),
    radial-gradient(700px 300px at 12% 30%, rgba(255,47,208,.10), transparent 70%),
    radial-gradient(700px 300px at 88% 30%, rgba(46,242,255,.10), transparent 70%),
    #05060a;
  color:var(--txt);
}
.scanlines{background:repeating-linear-gradient(180deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px)}

.topbar{background:rgba(5,6,10,.92);border-bottom:2px solid var(--line);box-shadow:0 0 18px rgba(46,242,255,.14)}
.logo{color:var(--green);text-shadow:0 0 10px rgba(46,242,255,.9),0 0 22px rgba(255,47,208,.5)}
.net-badge{color:var(--green);border-color:var(--green);box-shadow:0 0 10px rgba(46,242,255,.45)}

.hero{
  border-bottom:2px solid var(--line);
  background:linear-gradient(180deg,rgba(5,6,10,.10) 0%,rgba(5,6,10,.35) 55%,rgba(5,6,10,.96) 100%),url('../img/hero.png') center/cover no-repeat;
  box-shadow:inset 0 0 90px rgba(122,60,255,.35);
}
.pixel-title{color:#fff;text-shadow:0 0 10px #2ef2ff,0 0 26px #ff2fd0,4px 4px 0 #000}
.hero-sub{background:rgba(5,6,10,.72);border:2px solid var(--line);padding:9px 16px;color:#e8e4ff;box-shadow:0 0 14px rgba(46,242,255,.25)}

.panel{
  background:linear-gradient(180deg,#100c1e,#0a0814);
  border:2px solid var(--line);
  box-shadow:0 0 0 1px rgba(46,242,255,.10),0 0 22px rgba(122,60,255,.22),6px 6px 0 rgba(0,0,0,.65);
}
.panel-title{color:var(--green);border-bottom:2px dashed var(--line);text-shadow:0 0 8px rgba(46,242,255,.6)}

.btn{
  background:#150f28;color:var(--txt);
  border:2px solid #3d2a68;border-bottom-width:5px;border-right-width:5px;
  text-shadow:0 0 6px rgba(216,212,236,.4);
}
.btn:hover:not(:disabled){background:#1e1640;color:#fff;border-color:var(--green);box-shadow:0 0 14px rgba(46,242,255,.5)}
.btn-primary{background:linear-gradient(180deg,#ff2fd0,#a3179a);border-color:#ff8ee6;color:#fff;text-shadow:0 0 8px rgba(0,0,0,.5)}
.btn-primary:hover:not(:disabled){background:linear-gradient(180deg,#ff5fdd,#c31ab0);border-color:#fff;box-shadow:0 0 18px rgba(255,47,208,.8)}
.btn-warn{background:#2a1c05;border-color:var(--amber);color:var(--amber)}
.btn-warn:hover:not(:disabled){background:var(--amber);color:#1a1100;box-shadow:0 0 18px rgba(255,196,71,.7)}
.btn:disabled{background:#0f0b1c;border-color:#241a3d;color:#5a5178;opacity:1}

input[type=number],input[type=text]{
  background:#07050e;color:var(--green);border:2px solid var(--line);
  box-shadow:inset 0 0 12px rgba(46,242,255,.10);
}
input:focus{border-color:var(--green);box-shadow:0 0 14px rgba(46,242,255,.45),inset 0 0 12px rgba(46,242,255,.15)}
.lbl{color:var(--muted)}

.ticker{background:#07050e;border:2px solid var(--line);color:var(--muted)}
.ticker.live{color:var(--green);border-color:var(--green);box-shadow:0 0 14px rgba(46,242,255,.35)}

.stat{background:#0a0714;border-left:3px solid var(--pink);box-shadow:inset 0 0 14px rgba(255,47,208,.08)}
.stat .v{color:var(--green);text-shadow:0 0 8px rgba(46,242,255,.55)}
.stat .k{color:var(--muted)}

.progress-wrap{background:#07050e;border:2px solid var(--line)}
.progress{background:repeating-linear-gradient(90deg,#0f8fa8 0 6px,#2ef2ff 6px 12px);box-shadow:0 0 12px rgba(46,242,255,.6)}

.wallet-chip{background:#07050e;border:2px solid var(--green);box-shadow:0 0 12px rgba(46,242,255,.4)}
.wallet-chip .bal{color:var(--amber);border-left:2px solid var(--line)}

#refLink{background:#07050e !important;color:var(--amber) !important;border:2px solid var(--line) !important}
.levels li{background:#0a0714;border-left:3px solid var(--violet)}
.levels b{color:var(--amber)}

.modal{background:rgba(3,3,8,.88)}
.modal-box{background:linear-gradient(180deg,#140f26,#0a0814);border:2px solid var(--green);box-shadow:0 0 0 2px #000,0 0 34px rgba(46,242,255,.45),8px 8px 0 rgba(0,0,0,.7)}
.modal-box h3{color:var(--green);text-shadow:0 0 10px rgba(46,242,255,.8)}

.foot{border-top:2px solid var(--line);color:var(--muted)}
#contractInfo a{color:var(--amber)}
.tg{color:var(--green);border:2px solid var(--line);background:#07050e}
.tg:hover{color:#04140a;background:var(--green);border-color:var(--green);box-shadow:0 0 16px rgba(46,242,255,.7)}

.mine-scene{border:2px solid var(--line);box-shadow:0 0 20px rgba(122,60,255,.35),inset 0 0 30px rgba(0,0,0,.7)}

/* ===== launch marquee ===== */
.marquee{overflow:hidden;padding:7px 0;border-bottom:2px solid #000;
  background:linear-gradient(90deg,#ff2fd0,#7a3cff,#2ef2ff,#7a3cff,#ff2fd0);
  box-shadow:0 0 18px rgba(255,47,208,.45)}
.marquee-track{display:flex;width:max-content;animation:marquee 26s linear infinite}
.marquee span{font-family:var(--pix);font-size:8px;color:#05060a;letter-spacing:2px;white-space:nowrap;padding-right:20px}
@keyframes marquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

.marquee-track{animation-duration:14s}

