:root{
  --bg:#12071f;
  --panel:#1e0d38;
  --panel2:#2a1350;
  --gold:#ffcf3f;
  --gold-2:#ff9d1c;
  --violet:#a855f7;
  --violet-2:#7c3aed;
  --pink:#ff3d8b;
  --green:#25e08a;
  --yellow:#ffd23f;
  --red:#ff3b52;
  --txt:#f3e9ff;
  --muted:#b39bd6;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:'Rajdhani',system-ui,sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -10%, #37135f 0%, transparent 60%),
    radial-gradient(900px 500px at 50% 110%, #2a0a44 0%, transparent 60%),
    var(--bg);
  color:var(--txt);
  min-height:100vh;
  display:flex;justify-content:center;
  padding:12px;
}
.machine{
  width:100%;max-width:440px;
  background:linear-gradient(180deg,var(--panel),#170a2c);
  border:3px solid var(--gold);
  border-radius:22px;
  box-shadow:0 0 0 3px var(--violet-2), 0 0 40px rgba(168,85,247,.5), inset 0 0 30px rgba(0,0,0,.6);
  padding:16px 16px 20px;
  position:relative;overflow:hidden;
}
.machine::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.015) 22px 24px);
}

/* topbar */
.topbar{text-align:center;margin-bottom:12px}
.title{
  font-family:'Orbitron',sans-serif;font-weight:900;font-size:26px;letter-spacing:2px;
  color:var(--gold);text-shadow:0 0 12px var(--gold-2),0 2px 0 #7a4b00;
}
.title span{color:var(--pink);text-shadow:0 0 12px var(--pink)}
.stats{display:flex;gap:8px;margin-top:10px}
.stat{
  flex:1;background:var(--panel2);border:1px solid rgba(168,85,247,.5);border-radius:12px;
  padding:6px 4px;display:flex;flex-direction:column;align-items:center;
}
.stat .lbl{font-size:10px;letter-spacing:1px;color:var(--muted);font-weight:700}
.stat .val{font-family:'Orbitron',sans-serif;font-weight:700;font-size:20px}
.stat.balance{background:linear-gradient(180deg,#3a1a63,#2a1350);border-color:var(--gold)}
.stat.balance .val{color:var(--gold);text-shadow:0 0 10px var(--gold-2)}

/* reels a simboli (3 rulli) */
.reel-wrap{position:relative;margin:6px 0 14px}
.reels{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  background:#0c0518;border:2px solid var(--violet);border-radius:14px;
  padding:8px;box-shadow:inset 0 0 22px rgba(0,0,0,.9);
}
.reels.win{border-color:var(--green);box-shadow:inset 0 0 22px rgba(0,0,0,.9),0 0 20px rgba(37,224,138,.6)}
.reels.jackpot{border-color:var(--gold);box-shadow:inset 0 0 22px rgba(0,0,0,.9),0 0 26px var(--gold-2)}
.reels.bust{border-color:var(--red);box-shadow:inset 0 0 22px rgba(0,0,0,.9),0 0 20px rgba(255,59,82,.7)}
.reel3{
  height:84px;overflow:hidden;border-radius:10px;position:relative;
  background:radial-gradient(120% 120% at 50% 0%,#241041,#120726);
  border:1px solid rgba(168,85,247,.35);
}
.reel3::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,5,24,.92),transparent 32%,transparent 68%,rgba(12,5,24,.92));
}
.reel3.spinning{filter:blur(.4px)}
.reel3.landed{animation:pop .28s ease}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1)}}
.reel3-strip{display:flex;flex-direction:column;will-change:transform}
.sym{
  height:84px;display:flex;align-items:center;justify-content:center;
  font-size:44px;line-height:1;
}
.coin-badge{
  position:absolute;right:10px;bottom:-10px;
  background:linear-gradient(180deg,var(--gold),var(--gold-2));
  color:#3a2400;font-weight:700;border-radius:10px;padding:3px 10px;
  display:flex;flex-direction:column;align-items:flex-end;line-height:1.05;
  box-shadow:0 4px 12px rgba(0,0,0,.5);min-width:96px;text-align:right;
}
.coin-badge .coin-name{font-family:'Orbitron',sans-serif;font-size:14px}
.coin-badge .coin-vol{font-size:11px;opacity:.85}

/* display */
.display{
  background:#0c0518;border:2px solid rgba(168,85,247,.55);border-radius:14px;
  padding:10px 12px;margin-bottom:10px;text-align:center;
}
.price-row{display:flex;justify-content:space-between;font-weight:700;font-size:13px}
.dir{padding:2px 8px;border-radius:8px;background:#2a1350;color:var(--muted)}
.dir.up{background:rgba(37,224,138,.18);color:var(--green)}
.dir.down{background:rgba(255,59,82,.18);color:var(--red)}
.lev{color:var(--gold);font-family:'Orbitron',sans-serif;text-shadow:0 0 8px var(--gold-2)}
.price{font-family:'Orbitron',sans-serif;font-weight:700;font-size:30px;margin:4px 0 2px;letter-spacing:1px}
.pct{font-family:'Orbitron',sans-serif;font-weight:700;font-size:22px;color:var(--muted)}
.pct.up{color:var(--green);text-shadow:0 0 12px rgba(37,224,138,.7)}
.pct.down{color:var(--red);text-shadow:0 0 12px rgba(255,59,82,.7)}
.levels{margin-top:4px;font-size:11px;color:var(--muted);letter-spacing:.3px}
.levels b{color:var(--txt);font-weight:700}
.levels .liqp{color:var(--red)}

/* liquidation bar */
.liq{margin-bottom:10px}
.liq-label{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:3px;letter-spacing:1px}
.liq-bar{height:14px;border-radius:8px;background:#0c0518;border:1px solid rgba(168,85,247,.5);overflow:hidden}
.liq-fill{height:100%;width:0%;border-radius:8px;transition:width .12s linear, background .2s;
  background:linear-gradient(90deg,var(--green),var(--yellow))}

/* result banner */
.result{min-height:30px;text-align:center;font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:22px;margin:2px 0 8px;letter-spacing:1px;opacity:0;transition:opacity .2s}
.result.win{color:var(--green);text-shadow:0 0 16px rgba(37,224,138,.8);opacity:1}
.result.lose{color:var(--red);text-shadow:0 0 16px rgba(255,59,82,.8);opacity:1}
.result.bust{color:var(--red);opacity:1}

/* bets */
.bets{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.bet-lbl{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:1px}
.bet-btns{display:flex;gap:8px;flex:1}
.bet{
  flex:1;padding:10px 0;border:2px solid var(--violet);border-radius:12px;
  background:var(--panel2);color:var(--txt);font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:18px;cursor:pointer;transition:.12s;
}
.bet.active{background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#3a2400;border-color:var(--gold);box-shadow:0 0 14px var(--gold-2)}
.bet:disabled{opacity:.4;cursor:not-allowed}

/* durata (rischio/premio) */
.bets.dur{margin-bottom:4px}
.dur-btn{display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 0;line-height:1}
.dur-btn b{font-size:17px}
.dur-btn small{font-size:10px;font-weight:600;font-family:'Rajdhani',sans-serif;letter-spacing:.3px;opacity:.8}
.dur-btn[data-sec="3"].active{background:linear-gradient(180deg,#25e08a,#12b56a);border-color:var(--green);box-shadow:0 0 14px rgba(37,224,138,.5);color:#062a18}
.dur-btn[data-sec="6"].active{background:linear-gradient(180deg,var(--gold),var(--gold-2));border-color:var(--gold);box-shadow:0 0 14px var(--gold-2);color:#3a2400}
.dur-btn[data-sec="10"].active{background:linear-gradient(180deg,#ff6b6b,#ff3b52);border-color:var(--red);box-shadow:0 0 14px rgba(255,59,82,.5);color:#2a0206}
.dur-hint{margin:0 0 12px;font-size:11px;color:var(--muted);text-align:center;opacity:.85}

/* leggenda simboli */
.legend{margin-top:14px;background:#0c0518;border:1px solid rgba(168,85,247,.4);border-radius:12px;padding:2px 10px 8px}
.legend summary{cursor:pointer;list-style:none;padding:8px 0;font-size:12px;font-weight:700;color:var(--gold);letter-spacing:.5px}
.legend summary::-webkit-details-marker{display:none}
.legend summary::after{content:"▾";float:right;transition:transform .2s}
.legend[open] summary::after{transform:rotate(180deg)}
.lg-row{display:flex;align-items:center;gap:10px;padding:6px 2px;border-top:1px solid rgba(168,85,247,.12)}
.lg-syms{font-size:24px;min-width:96px;letter-spacing:2px}
.lg-txt{display:flex;flex-direction:column;line-height:1.15}
.lg-txt b{font-size:13px}
.lg-txt small{font-size:11px;color:var(--muted)}
.lg-jackpot .lg-txt b{color:var(--gold)}
.lg-big .lg-txt b{color:#a3e635}
.lg-small .lg-txt b{color:var(--green)}
.lg-bust .lg-txt b{color:var(--red)}

/* spin */
.spin{
  width:100%;padding:18px 0;border:none;border-radius:16px;cursor:pointer;
  background:linear-gradient(180deg,var(--gold) 0%,var(--gold-2) 100%);
  color:#3a2400;font-family:'Orbitron',sans-serif;font-weight:900;font-size:26px;letter-spacing:3px;
  box-shadow:0 6px 0 #a35c00, 0 8px 22px rgba(255,157,28,.5);
  transition:transform .08s, box-shadow .08s;
}
.spin:active{transform:translateY(4px);box-shadow:0 2px 0 #a35c00,0 4px 12px rgba(255,157,28,.5)}
.spin:disabled{filter:grayscale(.5) brightness(.8);cursor:not-allowed;box-shadow:0 6px 0 #6b3d00}
.links{display:flex;gap:8px;margin-top:8px}
.reset,.loglink{
  flex:1;padding:9px 0;border:1px solid rgba(179,155,214,.4);border-radius:10px;
  background:transparent;color:var(--muted);font-family:'Rajdhani';font-weight:600;font-size:13px;
  cursor:pointer;text-align:center;text-decoration:none;display:flex;align-items:center;justify-content:center;
}
.loglink{border-color:rgba(255,207,63,.5);color:var(--gold)}
.loglink:active,.reset:active{opacity:.7}

/* history */
.history{margin-top:14px;background:#0c0518;border:1px solid rgba(168,85,247,.4);border-radius:12px;padding:8px 10px}
.history-title{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:1px;margin-bottom:6px}
#historyList{list-style:none;margin:0;padding:0;max-height:190px;overflow:auto}
#historyList li{display:flex;justify-content:space-between;align-items:center;font-size:14px;
  padding:5px 4px;border-bottom:1px solid rgba(168,85,247,.12)}
#historyList li:last-child{border-bottom:none}
#historyList li.empty{justify-content:center;color:var(--muted);opacity:.7;border:none}
.h-coin{font-weight:700}
.h-coin .h-dir{font-size:11px;opacity:.8;margin-left:4px}
.h-delta{font-family:'Orbitron',sans-serif;font-weight:700;font-size:14px}
.h-delta.pos{color:var(--green)}
.h-delta.neg{color:var(--red)}

/* disclaimer */
.disclaimer{margin-top:14px;font-size:11px;line-height:1.5;color:var(--muted);text-align:center;opacity:.85}
.disclaimer b{color:var(--gold)}

/* animations */
@keyframes pulse{0%{transform:scale(1)}30%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
.machine.win{animation:pulse .6s ease}
.machine.bust{animation:shake .55s ease}

@media(max-width:360px){
  .title{font-size:22px}
  .price{font-size:26px}
  .stat .val{font-size:17px}
}

/* ===== pagina /log ======================================================= */
.logpage{max-width:620px}
.log-sub{margin:8px 0 0;font-size:12px;color:var(--muted);text-align:center}
.log-sub b{color:var(--gold)}
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.stat-tile{
  background:linear-gradient(180deg,#3a1a63,#2a1350);border:1px solid rgba(168,85,247,.5);
  border-radius:12px;padding:9px 8px;display:flex;flex-direction:column;align-items:center;text-align:center;
}
.stat-tile .st-lbl{font-size:10px;letter-spacing:.5px;color:var(--muted);font-weight:700;text-transform:uppercase}
.stat-tile .st-val{font-family:'Orbitron',sans-serif;font-weight:700;font-size:20px;color:var(--gold);text-shadow:0 0 10px var(--gold-2);margin:2px 0}
.stat-tile .st-sub{font-size:10px;color:var(--muted);opacity:.85}
.skeleton{grid-column:1/-1;text-align:center;color:var(--muted);padding:16px;font-size:13px}

.logtable{max-height:none}
.logtable #playsList{max-height:70vh;overflow:auto}
.play{border-bottom:1px solid rgba(168,85,247,.15);padding:9px 4px}
.play:last-child{border-bottom:none}
.play-top{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.p-coin{font-family:'Orbitron',sans-serif;font-weight:700;font-size:15px;color:var(--txt)}
.p-when{margin-left:auto;font-size:11px;color:var(--muted);opacity:.8}
.ob{font-size:10px;font-weight:700;letter-spacing:.5px;padding:2px 7px;border-radius:7px}
.ob.win{background:rgba(37,224,138,.18);color:var(--green)}
.ob.loss{background:rgba(179,155,214,.18);color:var(--muted)}
.ob.bust{background:rgba(255,59,82,.2);color:var(--red)}
.play-narr{font-size:13px;line-height:1.5;color:var(--txt)}
.play-narr b{color:var(--gold);font-weight:700}
.play-narr .pos{color:var(--green)}
.play-narr .neg{color:var(--red)}
.play-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11px;color:var(--muted);margin-top:4px}
.play-meta .pos{color:var(--green)}
.play-meta .neg{color:var(--red)}
.play-meta .p-anon{margin-left:auto}

@media(max-width:420px){
  .statgrid{grid-template-columns:repeat(2,1fr)}
  .stat-tile .st-val{font-size:18px}
}