:root{
  --bg:#0a0d12; --panel:#111621; --accent:#f6c85f; --text:#e7eaf1; --muted:#9aa4b2;
  --good:#77d17d; --bad:#f07a7a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(1200px 800px at 50% 10%,#121826,#0a0d12 60%);
  color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;
  display:flex; flex-direction:column; align-items:center; gap:10px; padding:14px;
}
.header{
  width:960px; max-width:98vw; display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; background:linear-gradient(180deg,#0f1421,#0a0e17); border:1px solid #212a3a; border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 40px rgba(246,200,95,.05);
}
.header .jackpots{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.jp{
  min-width: 150px;
  background:#0c1524; border:1px solid #2a3550; border-radius:12px; padding:8px 10px;
  text-align:center;
}
.jp h4{margin:0; font-size:12px; color:#f6d78f; letter-spacing:.08em}
.jp .amt{font-weight:800; font-size:20px; color:#ffd36d; text-shadow:0 0 16px rgba(255,210,100,.35)}
.jp.grand .amt{color:#ffeb9b}
.jp.major .amt{color:#ffd36d}
.jp.minor .amt{color:#a8e0ff}
.jp.mini .amt{color:#c7ffd1}
.controls{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
select,button{
  background:#0e1626; border:1px solid #27334d; color:var(--text); padding:8px 10px; border-radius:10px; font-weight:600;
}
button.primary{background:linear-gradient(180deg,#27334d,#182136); border-color:#2f3d5a}
button:disabled{opacity:.55}
#status{color:var(--muted); font-size:13px}
#game{
  width:960px; max-width:98vw; aspect-ratio: 960 / 620; background:#0b111c; border:1px solid #1b2538;
  border-radius:16px; position:relative; overflow:hidden; box-shadow:0 10px 60px rgba(0,0,0,.45), inset 0 0 120px rgba(255,200,64,.04);
}
.reels{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:880px; height:420px; display:grid; grid-template-columns: repeat(5,1fr); grid-template-rows: repeat(3,1fr);
  gap:10px; padding:10px; background:linear-gradient(180deg,#0e1421,#0a0f18); border:1px solid #161f31; border-radius:16px;
}
.cell{
  position:relative; border-radius:12px; background:#09111c; border:1px solid #142033; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.cell img{width:100%; height:100%; object-fit:cover; filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
.cell .label{
  position:absolute; bottom:6px; right:6px; font-size:12px; background:rgba(0,0,0,.6); padding:2px 6px; border-radius:8px;
  border:1px solid rgba(255,255,255,.1)
}
#overlay{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55);
}
#overlay .panel{
  background:#0c1220; border:1px solid #25314b; padding:16px; border-radius:12px; width: min(92vw, 560px);
}
.paytable{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.paytable .tile{background:#0b1322; border:1px solid #1b2741; padding:8px; border-radius:10px}
.paytable b{color:#ffd36d}
#toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.12); padding:10px 14px; border-radius:10px; display:none;
}
.orbTag{position:absolute; top:8px; left:8px; background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.12); color:#ffd36d; font-weight:800; padding:2px 6px; border-radius:8px; font-size:12px}
.winFlash{animation:flash .8s ease-out 0s 1}
@keyframes flash{0%{box-shadow:0 0 0 rgba(255,220,120,0)}40%{box-shadow:0 0 24px rgba(255,220,120,.9)}100%{box-shadow:0 0 0 rgba(255,220,120,0)}}
.hold-grid{display:grid; grid-template-columns: repeat(5,1fr); grid-template-rows: repeat(3,1fr); gap:10px; width:880px; height:420px; padding:10px}
.hold-cell{background:#0a121e; border:1px dashed #223150; border-radius:12px; position:relative; display:flex; align-items:center; justify-content:center;}
.hold-cell .value{font-weight:900; color:#ffd36d; text-shadow:0 0 16px rgba(255,200,80,.4); font-size:20px}
.hold-cell .badge{position:absolute; top:6px; left:6px; font-size:12px; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.12); padding:2px 6px; border-radius:8px}
.respinCounter{position:absolute; top:8px; right:8px; background:#08111e; border:1px solid #25314b; color:#9ac6ff; padding:6px 10px; font-weight:800; border-radius:10px}
.balanceBox{display:flex; align-items:center; gap:8px}
.balanceBox .amt{font-weight:900; color:#cfe7ff}
.balanceBox .currency{color:#9aa4b2; font-weight:600}
.small{font-size:12px; color:#9aa4b2}
.modalHead{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.modalHead h3{margin:0}
.closeBtn{cursor:pointer; font-weight:900}