:root{
  --bg:#0b0f1a; --bg2:#111827; --card:#0f172a; --line:#1f2937;
  --txt:#e5e7eb; --mut:#94a3b8;
  --green:#22c55e; --red:#ef4444; --amber:#f59e0b; --gold:#fbbf24;
  --blue:#3b82f6; --purple:#8b5cf6;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%, #16223b 0%, var(--bg) 55%);
  color:var(--txt); min-height:100vh; overflow-x:hidden;
}
.wrap{max-width:560px;margin:0 auto;padding:18px}
.screen-wrap{max-width:1200px;margin:0 auto;padding:24px}
h1,h2,h3{margin:.2em 0}
.muted{color:var(--mut)}
.center{text-align:center}
.hidden{display:none!important}

/* cards / botoes */
.card{background:linear-gradient(180deg,var(--bg2),var(--card));border:1px solid var(--line);
  border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.btn{border:0;border-radius:14px;padding:16px 18px;font-size:17px;font-weight:700;
  color:#fff;cursor:pointer;width:100%;transition:transform .08s ease, filter .2s}
.btn:active{transform:scale(.97)}
.btn-green{background:linear-gradient(135deg,#16a34a,#22c55e)}
.btn-red{background:linear-gradient(135deg,#b91c1c,#ef4444)}
.btn-amber{background:linear-gradient(135deg,#d97706,#f59e0b)}
.btn-blue{background:linear-gradient(135deg,#2563eb,#3b82f6)}
.btn-gold{background:linear-gradient(135deg,#b45309,#fbbf24);color:#1b1206}
.btn-ghost{background:#1f2937;border:1px solid var(--line)}
.btn:disabled{filter:grayscale(.6) brightness(.6);cursor:not-allowed}
.btn.sel{box-shadow:0 0 0 3px #fff, 0 6px 18px rgba(59,130,246,.45);filter:brightness(1.12);transform:translateY(-1px)}
.btn.sel::after{content:' ✓';font-weight:900}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input{width:100%;padding:15px;border-radius:12px;border:1px solid var(--line);
  background:#0b1220;color:var(--txt);font-size:17px}

/* saldo */
.saldo{font-size:44px;font-weight:900;letter-spacing:-1px}
.saldo.up{color:var(--green)} .saldo.down{color:var(--red)}
.pill{display:inline-block;padding:5px 12px;border-radius:999px;font-size:13px;
  font-weight:700;background:#1f2937;border:1px solid var(--line)}
.pill.fase-euforia{background:rgba(34,197,94,.15);color:#86efac;border-color:#166534}
.pill.fase-perseguicao{background:rgba(245,158,11,.15);color:#fcd34d;border-color:#92400e}
.pill.fase-final{background:rgba(239,68,68,.15);color:#fca5a5;border-color:#991b1b}

/* moeda girando */
.coin{width:120px;height:120px;margin:10px auto;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fde68a,#f59e0b 60%,#b45309);
  box-shadow:0 8px 24px rgba(245,158,11,.5),inset 0 0 12px rgba(0,0,0,.3);
  display:flex;align-items:center;justify-content:center;font-size:46px;font-weight:900;color:#7c2d12}
.coin.spin{animation:flip 1.6s ease-in-out}
@keyframes flip{0%{transform:rotateY(0)}100%{transform:rotateY(2520deg)}}

/* jackpot */
.jackpot-banner{background:linear-gradient(90deg,#7c2d12,#b45309,#fbbf24,#b45309,#7c2d12);
  background-size:200% 100%;animation:slidegold 2s linear infinite;
  color:#1b1206;font-weight:900;text-align:center;padding:10px;border-radius:12px;letter-spacing:1px}
@keyframes slidegold{to{background-position:200% 0}}

/* ranking */
.rank{list-style:none;padding:0;margin:0}
.rank li{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;
  border-bottom:1px solid var(--line);font-size:16px}
.rank li .pos{width:34px;color:var(--mut);font-weight:800}
.rank li .nm{flex:1;font-weight:600}
.rank li .vl{font-weight:800}
.rank li.me{background:rgba(59,130,246,.12);border-radius:10px}
.rank li.top1 .pos{color:var(--gold)} .rank li.top2 .pos{color:#cbd5e1} .rank li.top3 .pos{color:#d97706}

/* feed vitorias */
.feed{max-height:220px;overflow:hidden}
.feed .row{padding:8px 10px;border-radius:8px;margin-bottom:6px;background:rgba(34,197,94,.1);
  animation:slidein .4s ease}
@keyframes slidein{from{opacity:0;transform:translateY(8px)}to{opacity:1}}

/* telas de resultado */
.overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:24px;z-index:40}
.overlay.win{background:radial-gradient(circle,#052e16,#0b0f1a)}
.overlay.lose{background:radial-gradient(circle,#2a0a0a,#0b0f1a)}
.overlay .big{font-size:34px;font-weight:900}
.overlay .amt{font-size:52px;font-weight:900;margin:6px 0}
.nearmiss{color:var(--amber)}

/* confete */
.confetti{position:fixed;top:-10px;width:10px;height:16px;z-index:50;border-radius:2px;
  animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.9}}

/* barra progresso rodadas */
.progress{height:8px;background:#111827;border-radius:999px;overflow:hidden;margin:10px 0}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--purple))}

/* qr */
.qrbox{background:#fff;padding:14px;border-radius:16px;display:inline-block}
.qrbox img{display:block;width:100%;max-width:320px;height:auto}
.codigo{font-size:52px;font-weight:900;letter-spacing:8px;color:var(--gold)}

/* revelacao */
.reveal-num{font-size:64px;font-weight:900;line-height:1}
.stat{background:#0b1220;border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center}
.stat .n{font-size:34px;font-weight:900}
.bias{background:rgba(239,68,68,.08);border:1px solid #7f1d1d;border-radius:12px;padding:12px;margin:8px 0}
.bias b{color:#fca5a5}