/* ============================================================
   USA LAHTISED — jagatud stiilid (kõik kuus mängu + admin)
   Tume sportsbook-teema: peaaegu must taust, kuldsed koefid,
   rohelised aktsendid. US Open sinine/kollane lubatud päistes.
   ============================================================ */
:root {
  --bg0:#07080d; --bg1:#10131d; --panel:rgba(19,22,36,.74);
  --gold:#ffd54f; --green:#00e676; --red:#ff5c6c;
  --usoBlue:#2478cc; --usoDeep:#001854; --usoYellow:#ffd400;
  --ink:#f1f2f7; --inkSoft:#9aa0b6; --line:rgba(160,180,255,.16);
}
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body {
  background:radial-gradient(120% 90% at 50% 0%,#131b30 0%,var(--bg1) 45%,var(--bg0) 100%);
  font-family:'Nunito',sans-serif; color:var(--ink); min-height:100vh;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2 { font-family:'Fraunces',serif; font-weight:600; }
.deco { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.deco span { position:absolute; font-size:30px; opacity:.07; }
@keyframes float0 { 0%,100%{transform:translateY(0) rotate(-6deg)} 50%{transform:translateY(-18px) rotate(6deg)} }
@keyframes float1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-24px) rotate(-8deg)} }
@keyframes float2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
#confetti { position:fixed; inset:0; pointer-events:none; z-index:60; }

.wrap { max-width:480px; margin:0 auto; padding:0 12px 40px; position:relative; z-index:2; }
.wrap.shake { animation:megashake .7s cubic-bezier(.36,.07,.19,.97); }
@keyframes megashake {
  10%,90%{transform:translate(-2px,1px)} 20%,80%{transform:translate(3px,-2px)}
  30%,50%,70%{transform:translate(-5px,2px)} 40%,60%{transform:translate(5px,-1px)}
}
.topbar { display:flex; align-items:center; justify-content:space-between; padding:12px 2px 4px; }
.back { font-size:12px; font-weight:800; color:var(--inkSoft); text-decoration:none; letter-spacing:1px; }
.iconbtns { display:flex; gap:6px; }
.icobtn {
  width:36px; height:36px; border-radius:12px; border:1px solid var(--line);
  background:rgba(14,16,28,.6); color:var(--ink); font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:transform .12s;
}
.icobtn:active { transform:scale(.92); }
.icobtn.off { opacity:.35; }

.hdr { text-align:center; padding:2px 0 10px; }
.hdr h1 {
  font-size:32px; letter-spacing:-1px;
  background:linear-gradient(90deg,var(--usoBlue),var(--usoYellow) 60%,#fff6d8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 14px rgba(36,120,204,.35));
}
.hdr p { font-size:10px; letter-spacing:4px; text-transform:uppercase; color:var(--inkSoft); font-weight:800; margin-top:2px; }

/* ---------- paneelid ja nupud ---------- */
.setup, .card {
  background:var(--panel); border:1px solid var(--line); border-radius:20px;
  padding:16px; margin-top:10px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.optlbl { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--inkSoft); font-weight:800; margin:14px 0 6px; }
.optlbl:first-child { margin-top:0; }
.optrow { display:flex; gap:8px; }
.optbtn {
  flex:1; padding:16px 2px; border-radius:14px; border:1px solid var(--line);
  background:rgba(14,16,28,.7); color:var(--ink); font-family:'Nunito',sans-serif;
  font-size:20px; font-weight:900; cursor:pointer; transition:all .12s; text-align:center;
}
.optbtn:active { transform:scale(.95); }
.optbtn.on { border-color:var(--gold); color:var(--gold); background:rgba(60,48,10,.4); box-shadow:0 0 12px rgba(255,213,79,.3); }
.spinbtn {
  width:100%; margin-top:18px; height:66px; border:none; border-radius:20px; cursor:pointer;
  font-family:'Nunito',sans-serif; font-size:21px; font-weight:900; letter-spacing:2px; color:#03140a;
  background:linear-gradient(135deg,var(--green),#00b357);
  box-shadow:0 8px 26px rgba(0,230,118,.35), inset 0 -3px 0 rgba(0,0,0,.25);
  transition:transform .12s, filter .2s;
}
.spinbtn:active { transform:scale(.96); }
.spinbtn:disabled { filter:grayscale(.8) brightness(.55); }
.mainbtn {
  width:100%; margin-top:12px; height:56px; border:none; border-radius:18px; cursor:pointer;
  font-family:'Nunito',sans-serif; font-size:17px; font-weight:900; letter-spacing:1.5px; color:#03140a;
  background:linear-gradient(135deg,var(--green),#00b357);
  box-shadow:0 8px 22px rgba(0,230,118,.3), inset 0 -3px 0 rgba(0,0,0,.25);
  transition:transform .12s;
}
.mainbtn:active { transform:scale(.96); }
.mainbtn:disabled { filter:grayscale(.8) brightness(.55); }
.goldbtn {
  width:100%; margin-top:10px; height:52px; border:none; border-radius:16px; cursor:pointer;
  font-family:'Nunito',sans-serif; font-size:15px; font-weight:900; letter-spacing:1px; color:#241a02;
  background:linear-gradient(135deg,var(--gold),#f5a623);
  box-shadow:0 8px 22px rgba(255,213,79,.3), inset 0 -3px 0 rgba(0,0,0,.2);
  transition:transform .12s;
}
.goldbtn:active { transform:scale(.96); }
.goldbtn:disabled { filter:grayscale(.8) brightness(.6); }
.ghostbtn {
  width:100%; margin-top:8px; height:48px; border-radius:16px; cursor:pointer;
  font-family:'Nunito',sans-serif; font-size:14px; font-weight:800; color:var(--inkSoft);
  background:transparent; border:1px solid var(--line); transition:transform .12s;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
}
.ghostbtn:active { transform:scale(.96); }
.hint { text-align:center; font-size:11px; color:var(--inkSoft); font-weight:700; margin-top:8px; }

/* ---------- nimevärav ---------- */
.namegate { text-align:center; }
.namegate h2 { font-size:20px; margin-bottom:4px; }
.namegate p { font-size:12px; color:var(--inkSoft); font-weight:700; margin-bottom:12px; }
.nameinput {
  width:100%; padding:14px; border-radius:14px; border:1px solid var(--line);
  background:rgba(14,16,28,.8); color:var(--ink); font-family:'Nunito',sans-serif;
  font-size:16px; font-weight:800; text-align:center; outline:none;
}
.nameinput:focus { border-color:var(--usoBlue); }

/* ---------- keerutus-slotid ---------- */
.spintitle { text-align:center; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--inkSoft); font-weight:800; margin:12px 0 10px; }
.slot {
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:12px; margin-bottom:8px; min-height:64px;
  display:flex; flex-direction:column; justify-content:center; gap:3px;
  position:relative; overflow:hidden;
}
.slot.empty { border-style:dashed; opacity:.4; align-items:center; }
.slot.cycling { border-color:rgba(255,213,79,.5); }
.slot.cycling .cycrow { filter:blur(.6px); animation:cycflick .07s linear infinite; }
@keyframes cycflick { 0%{opacity:.75} 50%{opacity:1} 100%{opacity:.75} }
.slot.locked { animation:snapIn .38s cubic-bezier(.2,1.6,.4,1) both; border-color:rgba(0,230,118,.45); }
@keyframes snapIn {
  0% { transform:scale(1.14); filter:brightness(2.2); box-shadow:0 0 30px rgba(0,230,118,.8); }
  55% { transform:scale(.965); }
  100% { transform:scale(1); filter:brightness(1); box-shadow:0 0 12px rgba(0,230,118,.18); }
}
@keyframes riseIn { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
.rise { animation:riseIn .35s ease both; }

/* ---------- mängijakiibid / matširead ---------- */
.chip {
  display:inline-block; padding:2px 9px; border-radius:8px; font-size:12.5px; font-weight:900;
  line-height:1.4; white-space:nowrap; box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.fixline { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13px; font-weight:800; }
.fixline .vs { color:var(--inkSoft); font-weight:700; font-size:11px; }
.kotime { font-size:10px; color:var(--inkSoft); font-weight:700; }
.odds { margin-left:auto; font-size:15px; font-weight:900; color:var(--gold); text-shadow:0 0 8px rgba(255,213,79,.4); }
.tourtag {
  display:inline-block; padding:1px 7px; border-radius:6px; font-size:9.5px; font-weight:900;
  letter-spacing:1px; border:1px solid var(--line); color:var(--inkSoft);
}
.tiertag { display:inline-block; padding:1px 8px; border-radius:999px; font-size:10px; font-weight:900; letter-spacing:.5px; }
.tiertag.favorite { background:rgba(0,230,118,.12); border:1px solid rgba(0,230,118,.5); color:var(--green); }
.tiertag.mid { background:rgba(36,120,204,.15); border:1px solid rgba(36,120,204,.55); color:#6db4f0; }
.tiertag.longshot { background:rgba(255,92,108,.12); border:1px solid rgba(255,92,108,.5); color:var(--red); }

/* ---------- kviitung ---------- */
.receipt {
  background:linear-gradient(180deg,rgba(26,28,42,.92),rgba(18,20,32,.92));
  border:1px solid var(--line); border-radius:18px; margin-top:12px; overflow:hidden;
  animation:riseIn .4s ease both; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.rc-head { text-align:center; padding:14px 14px 10px; border-bottom:1px dashed rgba(160,180,255,.25); }
.rc-head h2 { font-size:20px; letter-spacing:.5px; }
.rc-head p { font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--inkSoft); font-weight:800; margin-top:3px; }
.rc-leg { padding:10px 14px; border-bottom:1px dashed rgba(160,180,255,.18); }
.rc-foot { padding:12px 14px 14px; background:rgba(10,12,22,.5); }
.rc-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; }
.rc-row:first-child { margin-top:0; }
.rc-lbl { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--inkSoft); font-weight:800; }
.raw-odds { font-size:17px; font-weight:900; color:var(--gold); }
.raw-odds.cut { text-decoration:line-through; color:var(--inkSoft); text-shadow:none; font-size:14px; }
.boostbadge {
  display:inline-block; padding:3px 10px; border-radius:999px; font-size:13px; font-weight:900;
  background:rgba(0,230,118,.15); border:1px solid var(--green); color:var(--green);
  animation:badgepulse 1.1s ease infinite alternate;
}
@keyframes badgepulse {
  from { box-shadow:0 0 4px rgba(0,230,118,.3); transform:scale(1); }
  to { box-shadow:0 0 16px rgba(0,230,118,.7); transform:scale(1.07); }
}
.boosted-odds { font-size:22px; font-weight:900; color:var(--gold); text-shadow:0 0 12px rgba(255,213,79,.5); }
.potwin { font-size:26px; font-weight:900; color:var(--green); text-shadow:0 0 14px rgba(0,230,118,.5); }
.savestate { text-align:center; font-size:10.5px; font-weight:800; color:var(--inkSoft); padding:6px 14px 10px; }
.savestate.err { color:var(--red); }

/* ---------- piletid + edetabel ---------- */
.seclbl { font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--inkSoft); font-weight:800; margin:22px 4px 8px; }
.tk-row {
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:10px 12px; margin-bottom:8px;
}
.tk-top { display:flex; align-items:center; gap:8px; }
.tk-title { flex:1; font-size:13px; font-weight:800; overflow:hidden; text-overflow:ellipsis; }
.tk-sub { font-size:11px; color:var(--inkSoft); font-weight:700; margin-top:3px; }
.tk-amt { font-weight:900; color:var(--gold); flex-shrink:0; }
.status { flex-shrink:0; padding:2px 9px; border-radius:999px; font-size:10px; font-weight:900; letter-spacing:.5px; }
.status.pending { background:rgba(255,213,79,.12); border:1px solid rgba(255,213,79,.5); color:var(--gold); }
.status.won { background:rgba(0,230,118,.12); border:1px solid rgba(0,230,118,.55); color:var(--green); }
.status.lost { background:rgba(255,92,108,.12); border:1px solid rgba(255,92,108,.5); color:var(--red); }
.board-row {
  display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:12px;
  background:rgba(14,16,28,.6); margin-bottom:6px; font-size:13px;
}
.board-rank { width:30px; flex-shrink:0; font-weight:900; text-align:center; }
.board-name { flex:1; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board-meta { font-size:10.5px; color:var(--inkSoft); font-weight:800; flex-shrink:0; }
.board-amt { font-weight:900; color:var(--gold); flex-shrink:0; min-width:64px; text-align:right; }
.board-empty { text-align:center; color:var(--inkSoft); font-size:13px; padding:18px 6px; font-weight:700; }
.db-error { text-align:center; color:var(--red); font-size:12.5px; padding:12px 6px; font-weight:700; }

/* ---------- overlay ---------- */
.ovl {
  position:fixed; inset:0; z-index:50; background:rgba(4,5,10,.86);
  display:flex; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.panel {
  width:100%; max-width:420px; max-height:82vh; overflow-y:auto;
  background:linear-gradient(180deg,#181a2a,#101322); border:1px solid var(--line);
  border-radius:22px; padding:20px 16px;
}
.jackpot-ovl {
  position:fixed; inset:0; z-index:80; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:24px;
  background:radial-gradient(80% 60% at 50% 40%,rgba(90,60,0,.92),rgba(4,5,10,.97));
  animation:riseIn .3s ease both;
}
.jackpot-ovl h1 {
  font-size:54px; letter-spacing:2px;
  background:linear-gradient(180deg,#fff6d8,var(--gold) 55%,#f5a623);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 24px rgba(255,213,79,.8));
  animation:jpPulse .7s ease infinite alternate;
}
@keyframes jpPulse { from{transform:scale(1)} to{transform:scale(1.08)} }
.jackpot-ovl p { font-size:15px; font-weight:800; color:#ffe9a8; margin-top:10px; }

.toast {
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:70;
  background:#181a2a; border:1px solid var(--line); color:var(--ink);
  padding:10px 18px; border-radius:999px; font-size:13px; font-weight:800;
  box-shadow:0 10px 30px rgba(0,0,0,.5); animation:riseIn .25s ease both; white-space:nowrap;
}