:root{
  --bg:#0b0f1a; --card:#131a2a; --card2:#1a2338; --linea:#26314d;
  --testo:#e9eefb; --tenue:#8d99b8; --verde:#39ff9f; --giallo:#ffd23f;
  --rosso:#ff5470; --blu:#5aa9ff; --viola:#b48cff;
  --r:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{background:var(--bg);color:var(--testo);font:15px/1.45 Inter,system-ui,sans-serif}
body{padding-bottom:calc(76px + env(safe-area-inset-bottom));
  background:radial-gradient(900px 500px at 90% -10%,#12324a55,transparent),
             radial-gradient(700px 400px at -10% 20%,#1d4a3544,transparent),var(--bg);
  min-height:100vh}
h2{font:700 20px 'Space Grotesk',sans-serif;margin:18px 0 10px}
h3{font:700 16px 'Space Grotesk',sans-serif}
button{font:inherit;color:inherit;cursor:pointer}
input{font:inherit;color:var(--testo);background:var(--card2);border:1px solid var(--linea);
  border-radius:10px;padding:10px 12px;width:100%}
input:focus{outline:2px solid var(--verde);border-color:transparent}

.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;background:#0b0f1acc;backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.brand{font:700 19px 'Space Grotesk',sans-serif;display:flex;align-items:center;gap:8px}
.brand b{color:var(--verde)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--verde);box-shadow:0 0 12px var(--verde);
  animation:pulsa 2s infinite}
@keyframes pulsa{50%{opacity:.35}}
.agg{font-size:12px;color:var(--tenue);text-align:right}

main{padding:0 16px;max-width:720px;margin:0 auto}
.tab{display:none}.tab.attivo{display:block;animation:entra .25s ease}
@keyframes entra{from{opacity:0;transform:translateY(6px)}}

.barra{position:fixed;bottom:0;left:0;right:0;display:flex;background:#0e1422f2;backdrop-filter:blur(10px);
  border-top:1px solid var(--linea);padding-bottom:env(safe-area-inset-bottom);z-index:6}
.barra button{flex:1;background:none;border:0;padding:8px 0 10px;font-size:11px;color:var(--tenue);
  display:flex;flex-direction:column;align-items:center;gap:2px}
.barra button i{font-style:normal;font-size:20px;filter:grayscale(1);opacity:.7}
.barra button.attivo{color:var(--verde)}
.barra button.attivo i{filter:none;opacity:1}

.card{background:var(--card);border:1px solid var(--linea);border-radius:var(--r);padding:14px;margin-bottom:12px}
.fase{border-radius:var(--r);padding:18px;margin-top:16px;position:relative;overflow:hidden}
.fase.compra{background:linear-gradient(135deg,#0f3d2b,#123029);border:1px solid #1f6b4a}
.fase.vendi{background:linear-gradient(135deg,#4a1830,#301427);border:1px solid #7a2a4c}
.fase.fermo{background:linear-gradient(135deg,#232c45,#1a2033);border:1px solid var(--linea)}
.fase .etichetta{font:700 30px 'Space Grotesk',sans-serif;letter-spacing:1px}
.fase.compra .etichetta{color:var(--verde)} .fase.vendi .etichetta{color:var(--rosso)} .fase.fermo .etichetta{color:var(--tenue)}
.fase small{color:var(--tenue);text-transform:uppercase;font-size:11px;letter-spacing:1.5px}

.todo{list-style:none;counter-reset:n}
.todo li{counter-increment:n;padding:10px 0 10px 38px;position:relative;border-bottom:1px solid var(--linea)}
.todo li:last-child{border:0}
.todo li::before{content:counter(n);position:absolute;left:0;top:9px;width:26px;height:26px;border-radius:8px;
  background:var(--card2);color:var(--verde);font-weight:800;display:grid;place-items:center;font-size:13px}

.griglia{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.conto{background:var(--card);border:1px solid var(--linea);border-radius:var(--r);padding:12px}
.conto .n{font:700 22px 'Space Grotesk',sans-serif}
.conto .l{font-size:12px;color:var(--tenue)}

.chip{display:inline-block;font-size:11px;font-weight:700;padding:3px 8px;border-radius:99px;
  background:var(--card2);color:var(--tenue);border:1px solid var(--linea);white-space:nowrap}
.chip.fai,.chip.alta,.chip.ufficiale{background:#123d2c;color:var(--verde);border-color:#1f6b4a}
.chip.forse,.chip.media,.chip.stima{background:#3d3312;color:var(--giallo);border-color:#6b5a1f}
.chip.salta,.chip.bassa{background:#3d1220;color:var(--rosso);border-color:#6b1f33}
.chip.nuova{background:#12294a;color:var(--blu);border-color:#1f4a7a}

.filtri{display:flex;gap:6px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:none}
.filtri button{background:var(--card);border:1px solid var(--linea);border-radius:99px;padding:6px 12px;
  font-size:13px;white-space:nowrap;color:var(--tenue)}
.filtri button.attivo{background:var(--verde);color:#062015;border-color:var(--verde);font-weight:700}

.sbc{display:flex;gap:12px}
.sbc img{width:74px;height:auto;flex-shrink:0;align-self:flex-start}
.sbc .corpo{flex:1;min-width:0}
.riga{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.meta-riga{font-size:13px;color:var(--tenue);margin-top:4px}
.voto{font:700 26px 'Space Grotesk',sans-serif;line-height:1}
.voto small{font-size:12px;color:var(--tenue)}
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:10px 0;text-align:center}
.stats div{background:var(--card2);border-radius:8px;padding:4px 0;font-size:11px;color:var(--tenue)}
.stats b{display:block;font-size:15px;color:var(--testo)}
.ps{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.ps span{font-size:11px;padding:2px 7px;border-radius:6px;background:var(--card2);color:var(--tenue)}
.ps span.plus{background:#2a2250;color:var(--viola);font-weight:700}
.nota{margin-top:8px;font-size:13px;padding:8px 10px;border-left:3px solid var(--giallo);background:#ffd23f0d;border-radius:0 8px 8px 0}
a{color:var(--blu);text-decoration:none}

.tabella{width:100%;border-collapse:collapse;font-size:14px}
.tabella th{font-size:11px;color:var(--tenue);text-align:right;font-weight:600;padding:6px 4px}
.tabella th:first-child,.tabella td:first-child{text-align:left}
.tabella td{padding:8px 4px;text-align:right;border-top:1px solid var(--linea)}
.tabella tr.migliore td{color:var(--verde);font-weight:700}

.carta{border-left:4px solid var(--blu)}
.carta.scaduta{border-left-color:var(--rosso)}
.carta.venduta{opacity:.55;border-left-color:var(--verde)}
.prezzi{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0}
.prezzi button{background:var(--card2);border:1px solid var(--linea);border-radius:10px;padding:6px 2px;font-size:12px}
.prezzi button b{display:block;font-size:15px}
.prezzi button span{color:var(--verde);font-size:11px}
.timer{font:700 18px 'Space Grotesk',sans-serif}
.azioni{display:flex;gap:8px;margin-top:8px}
.btn{flex:1;border:0;border-radius:12px;padding:11px;font-weight:700;background:var(--card2);border:1px solid var(--linea)}
.btn.primario{background:var(--verde);color:#062015;border-color:var(--verde)}
.btn.rosso{background:#3d1220;color:var(--rosso);border-color:#6b1f33}
.form{display:grid;grid-template-columns:2fr 1fr 1.3fr;gap:8px}
.vuoto{color:var(--tenue);text-align:center;padding:24px 8px;font-size:14px}

.leak .fonti{font-size:12px;color:var(--tenue);margin-top:6px}
.leak .azione{margin-top:8px;font-weight:600;color:var(--giallo)}
.cal{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--linea)}
.cal:last-child{border:0}
.cal .data{width:56px;text-align:center;background:var(--card2);border-radius:10px;padding:6px 0;flex-shrink:0}
.cal .data b{display:block;font:700 20px 'Space Grotesk',sans-serif}
.cal .data span{font-size:11px;color:var(--tenue);text-transform:uppercase}
.regole li{margin:6px 0 6px 18px}

dialog{margin:auto;background:var(--card);color:var(--testo);border:1px solid var(--linea);border-radius:18px;
  padding:18px;width:min(92vw,420px)}
dialog::backdrop{background:#000a}

.qta{display:flex;align-items:center;background:var(--card2);border:1px solid var(--linea);border-radius:10px;overflow:hidden;flex-shrink:0}
.qta button{background:none;border:0;width:36px;height:38px;font-size:20px;color:var(--verde)}
.qta input{width:44px;border:0;border-radius:0;text-align:center;padding:8px 0;background:transparent;-moz-appearance:textfield}
.qta input::-webkit-inner-spin-button{-webkit-appearance:none}
.barra-qta{height:6px;background:var(--card2);border-radius:99px;margin:8px 0 2px;overflow:hidden}
.barra-qta div{height:100%;background:var(--verde);border-radius:99px}

.campo{position:relative;border-radius:var(--r);padding:34px 6px 12px;margin-bottom:12px;border:1px solid #1f6b4a;
  background:repeating-linear-gradient(180deg,#0f3a26 0 46px,#113f2a 46px 92px);overflow:hidden}
.campo::before{content:'';position:absolute;left:50%;top:-60px;width:120px;height:120px;margin-left:-60px;border:2px solid #ffffff22;border-radius:50%}
.modulo{position:absolute;top:8px;left:12px;font:700 13px 'Space Grotesk',sans-serif;color:var(--verde);letter-spacing:1px}
.linea{display:flex;justify-content:space-around;gap:4px;margin:8px 0}
.gioc{flex:1;max-width:25%;text-align:center;background:#0b0f1acc;border:1px solid #ffffff1a;border-radius:10px;padding:6px 2px}
.gioc b{display:block;font-size:11.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gioc span{display:block;font-size:10px;color:var(--giallo)}
.gioc i{display:block;font-style:normal;font-size:10px;color:var(--tenue)}

/* sfondo 3D + marchio Hype Hunter */
#campo3d{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main,.top,.barra{position:relative;z-index:1}
.top{position:sticky;z-index:5}.barra{position:fixed;z-index:6}
.card,.conto{background:rgba(19,26,42,.86)}
.mirino{width:24px;height:24px;color:var(--verde);filter:drop-shadow(0 0 6px var(--verde));animation:mira 6s linear infinite}
@keyframes mira{to{transform:rotate(360deg)}}
.brand{letter-spacing:.3px}
