:root{
  --lime:#E5FE00;--purple:#8559E3;--cyan:#12AAFF;--mint:#99FF80;--red:#FE5C32;
  --silver:#DAD9D9;--graphite:#252525;--jet:#111;--deep:#0B0B0B;--card:#161616;--line:#2a2a2a;
}
*{box-sizing:border-box;margin:0}
body{background:var(--deep);color:var(--silver);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;min-height:100vh}
.wrap{max-width:1280px;margin:0 auto;padding:28px 22px 60px}

header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:14px}
.logo{display:flex;align-items:center;gap:12px}
.logoimg{height:36px;width:auto;display:block}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;z-index:60}
.modal.show{display:flex}
.modal-card{background:var(--jet,#14181d);border:1px solid #2a323b;border-radius:12px;padding:22px;min-width:300px;max-width:92vw}
.modal-card h4{margin:0 0 14px;color:#fff;letter-spacing:2px;font-size:13px}
.choice{display:block;width:100%;text-align:left;margin-bottom:10px;padding:13px 15px;font-size:14px}
.choice small{display:block;font-weight:400;font-size:11px;color:#8a939e;margin-top:3px;letter-spacing:.5px}
.drop{width:38px;height:38px;border-radius:50%;background:var(--jet);border:2.5px solid var(--lime);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.drop span{color:var(--lime);font-size:19px;font-weight:700}
.logo b{color:#fff;font-size:20px;letter-spacing:2px}
.logo small{color:var(--purple);letter-spacing:3px;font-size:10px;display:block;margin-top:2px}
.badge{border:1px solid var(--purple);color:#b9a1f2;border-radius:20px;padding:5px 14px;font-size:10px;letter-spacing:2px}

button{background:var(--lime);color:#111;border:none;border-radius:8px;padding:11px 22px;font-size:13px;font-weight:700;cursor:pointer;letter-spacing:.5px}
button:hover{opacity:.88}
button:disabled{opacity:.4;cursor:not-allowed}
button.secondary{background:var(--graphite);color:var(--silver)}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--silver)}

.banner{border-radius:12px;padding:12px 16px;font-size:12.5px;margin-bottom:16px;letter-spacing:.5px;display:none}
.banner.show{display:block}
.banner.warn{background:#2a2000;border:1px solid var(--lime);color:var(--lime)}
.banner.err{background:#2a0f08;border:1px solid var(--red);color:var(--red)}
.banner.info{background:#0a1a26;border:1px solid var(--cyan);color:var(--cyan)}

.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
@media(max-width:1000px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.stat .t{font-size:10px;color:#8a939e;letter-spacing:1.5px;margin-bottom:7px}
.stat .v{font-size:19px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;word-break:break-all}
.stat.lime .v{color:var(--lime)}.stat.purple .v{color:var(--purple)}
.stat.cyan .v{color:var(--cyan)}.stat.mint .v{color:var(--mint)}.stat.red .v{color:var(--red)}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:900px){.cols{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.panel h3{color:#fff;font-size:13px;letter-spacing:1.5px;margin-bottom:14px}
.panel h3 em{color:#8a939e;font-style:normal;font-weight:400;font-size:11px;margin-left:8px}

.field{margin-bottom:12px}
.field label{font-size:10.5px;color:#8a939e;letter-spacing:1px;display:block;margin-bottom:6px}
.field input,.field select{background:var(--jet);border:1px solid var(--line);color:var(--lime);font-size:17px;font-weight:700;border-radius:8px;padding:9px 12px;width:100%;font-variant-numeric:tabular-nums}
.field select{color:var(--silver);font-size:13px;font-weight:400}
.hint{font-size:11px;color:#8a939e;margin-top:5px;line-height:1.5;font-variant-numeric:tabular-nums}
.hint b{color:var(--silver)}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.kv{display:flex;justify-content:space-between;font-size:12px;padding:6px 0;border-bottom:1px solid #1d1d1d;font-variant-numeric:tabular-nums}
.kv span:first-child{color:#8a939e}
.kv span:last-child{color:var(--silver);font-weight:600}
.kv .good{color:var(--mint)}.kv .bad{color:var(--red)}

table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
th{color:var(--lime);text-align:left;font-size:10px;letter-spacing:1px;padding:7px 8px;border-bottom:1px solid var(--line)}
td{padding:7px 8px;border-bottom:1px solid #1d1d1d;color:var(--silver)}
td:last-child,th:last-child{text-align:right}
.tag{display:inline-block;border-radius:12px;padding:2px 10px;font-size:10px;letter-spacing:1px;font-weight:700}
.tag.open{background:#0a1a26;color:var(--cyan)}
.tag.win{background:#0e2210;color:var(--mint)}
.tag.loss{background:#241412;color:var(--red)}
.tag.void{background:#20182e;color:#b9a1f2}
.mini{padding:5px 12px;font-size:11px}

.feed{max-height:260px;overflow-y:auto;font-size:11.5px;line-height:1.5}
.feed div{padding:5px 8px;border-bottom:1px solid #1d1d1d;font-variant-numeric:tabular-nums}
.feed .win{color:var(--mint)}.feed .lose{color:var(--red)}.feed .sys{color:var(--cyan)}

.toast{position:fixed;bottom:20px;right:20px;max-width:360px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--lime);border-radius:10px;padding:12px 16px;font-size:12.5px;color:var(--silver);box-shadow:0 8px 30px rgba(0,0,0,.6);z-index:99;display:none}
.toast.show{display:block}
.toast.err{border-left-color:var(--red)}
.toast.ok{border-left-color:var(--mint)}

/* wallet bar */
.walletbar{display:flex;gap:18px;align-items:center;flex-wrap:wrap;background:linear-gradient(90deg,#161616,#101a10);border:1px solid var(--line);border-left:4px solid var(--lime);border-radius:14px;padding:14px 20px;margin-bottom:16px}
.wb-item .wb-t{font-size:10px;color:#8a939e;letter-spacing:1.5px;margin-bottom:4px}
.wb-item .wb-v{font-size:16px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.wb-item .wb-v.big{font-size:24px;color:var(--lime)}
.wb-status{margin-left:auto;font-size:12px;color:var(--cyan);letter-spacing:.5px;max-width:340px;text-align:right}

/* result modal */
.result-card{text-align:center;min-width:340px;border-width:2px}
.result-card.win{border-color:var(--mint);box-shadow:0 0 60px rgba(153,255,128,.25)}
.result-card.lose{border-color:var(--red);box-shadow:0 0 60px rgba(254,92,50,.25)}
.result-emoji{font-size:52px;margin-bottom:8px}
.result-card h2{letter-spacing:3px;margin-bottom:10px}
.result-card.win h2{color:var(--mint)}
.result-card.lose h2{color:var(--red)}
.result-amount{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;margin-bottom:8px}
.result-card.win .result-amount{color:var(--mint)}
.result-card.lose .result-amount{color:var(--red)}
.result-detail{font-size:13px;color:#8a939e;margin-bottom:6px}
.result-balance{font-size:13px;color:var(--silver)}

.foot{text-align:center;color:#5a6572;font-size:10.5px;margin-top:26px;letter-spacing:1px}
.addr{color:var(--cyan);font-variant-numeric:tabular-nums}

/* ============ v1.5.0 — fullscreen FX overlay (win / lose / rolling / progress) ============ */
.fx-overlay{position:fixed;inset:0;background:rgba(5,8,5,.92);display:none;align-items:center;justify-content:center;z-index:120;text-align:center;padding:20px;cursor:pointer}
.fx-overlay.show{display:flex}
.fx-inner{max-width:480px;width:100%}
.fx-emoji{font-size:84px;line-height:1;margin-bottom:14px;display:inline-block}
.fx-title{font-size:34px;font-weight:800;letter-spacing:3px;color:#fff;margin-bottom:12px}
.fx-amount{font-size:44px;font-weight:800;font-variant-numeric:tabular-nums;margin-bottom:10px;color:#fff}
.fx-sub{font-size:14px;color:#8a939e;margin-bottom:10px;line-height:1.6}
.fx-hint{font-size:10.5px;color:#5a6572;margin-top:18px;letter-spacing:1.5px}
.fx-overlay.win{background:radial-gradient(circle at 50% 40%,rgba(153,255,128,.16),rgba(4,10,4,.96) 70%)}
.fx-overlay.win .fx-title,.fx-overlay.win .fx-amount{color:var(--mint);text-shadow:0 0 30px rgba(153,255,128,.5)}
.fx-overlay.win .fx-inner{animation:fxPulse 1.1s ease-in-out infinite alternate}
.fx-overlay.lose{background:radial-gradient(circle at 50% 40%,rgba(254,92,50,.12),rgba(10,4,4,.97) 70%)}
.fx-overlay.lose .fx-title,.fx-overlay.lose .fx-amount{color:var(--red)}
.fx-overlay.lose .fx-inner{animation:fxShake .65s ease}
@keyframes fxPulse{from{transform:scale(1)}to{transform:scale(1.045)}}
@keyframes fxShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-11px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.fx-overlay.rolling{background:rgba(5,8,10,.9)}
.fx-dice{font-size:72px;display:inline-block;animation:fxSpin 1.1s linear infinite;margin-bottom:14px}
@keyframes fxSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.fx-dots::after{content:"…"}
.fx-steps{text-align:left;margin:16px auto 0;max-width:320px;font-size:13.5px}
.fx-step{padding:10px 14px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;color:#8a939e;background:var(--card);letter-spacing:.5px}
.fx-step.active{border-color:var(--lime);color:var(--lime)}
.fx-step.done{border-color:var(--mint);color:var(--mint)}
.fx-inner a{color:var(--cyan);font-size:12px;letter-spacing:1px;text-decoration:none}
.confetti{position:fixed;top:-14px;width:9px;height:14px;z-index:130;pointer-events:none;border-radius:2px;animation:confFall linear forwards}
@keyframes confFall{to{transform:translateY(105vh) rotate(720deg);opacity:.85}}

/* ============ v1.5.0 — mobile responsiveness ============ */
@media(max-width:640px){
  .wrap{padding:16px 12px 44px}
  header{flex-direction:column;align-items:stretch}
  header>div:last-child{justify-content:flex-start}
  button{min-height:44px}
  button.mini,.mini{min-height:40px}
  .walletbar{gap:12px;padding:12px 14px}
  .wb-status{margin-left:0;text-align:left;max-width:none;width:100%}
  .stats{grid-template-columns:1fr 1fr}
  .cols{grid-template-columns:1fr}
  .actions button{flex:1 1 auto}
  .field input,.field select{font-size:16px;min-height:44px}
  /* positions table → stacked cards */
  table thead{display:none}
  table,tbody,tr,td{display:block;width:100%}
  tr{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:8px 10px;background:var(--jet)}
  td{border-bottom:none;padding:4px 2px;text-align:left!important;display:flex;justify-content:space-between;align-items:center;gap:10px}
  td::before{content:attr(data-l);color:#8a939e;font-size:10px;letter-spacing:1px;flex-shrink:0}
  td:empty{display:none}
  .fx-title{font-size:26px}.fx-amount{font-size:34px}.fx-emoji{font-size:64px}.fx-dice{font-size:56px}
  .result-card{min-width:0;width:92vw}
  .modal-card{padding:16px}
}

/* compact tx pill (v1.6.1) — non-blocking bottom-center progress indicator */
.tx-pill{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(80px);z-index:110;display:flex;align-items:center;gap:10px;background:rgba(10,14,10,.94);border:1px solid rgba(153,255,128,.35);border-radius:999px;padding:10px 18px;font-size:13px;font-weight:600;letter-spacing:.5px;color:#d7e2d7;box-shadow:0 8px 30px rgba(0,0,0,.5),0 0 20px rgba(153,255,128,.08);opacity:0;pointer-events:none;transition:transform .3s ease,opacity .3s ease;max-width:92vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-pill.show{opacity:1;transform:translateX(-50%) translateY(0)}
.tx-pill.rolling{border-color:rgba(229,254,0,.5);box-shadow:0 8px 30px rgba(0,0,0,.5),0 0 24px rgba(229,254,0,.15)}
.tx-spin{width:14px;height:14px;flex:none;border:2px solid rgba(153,255,128,.25);border-top-color:#99FF80;border-radius:50%;animation:txspin .7s linear infinite}
@keyframes txspin{to{transform:rotate(360deg)}}
.tx-pill-text{overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.tx-pill{left:10px;right:10px;bottom:12px;transform:translateY(80px);border-radius:14px;justify-content:center;white-space:normal;text-align:center}.tx-pill.show{transform:translateY(0)}}