/* ============================================================
   Non-reel game engines: crash, mines, chicken, keno, plinko,
   scratch. Shared overlay base = .gx
   ============================================================ */

.gx {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  background: radial-gradient(circle at 50% 0%, #182052 0%, #070b22 60%, #04061a 100%);
  color: #eaf0ff; animation: gxIn .25s ease;
}
@keyframes gxIn { from { opacity: 0 } to { opacity: 1 } }

.gx__bar {
  display: flex; align-items: center; gap: 14px; padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(4,7,26,.5);
}
.gx__close { width: 36px; height: 36px; border-radius: 9px; border: none; cursor: pointer;
  background: rgba(255,255,255,.06); color: #fff; font-size: 15px; }
.gx__close:hover { background: rgba(255,255,255,.14); }
.gx__title { font-weight: 800; font-size: 17px; }
.gx__bal { margin-left: auto; text-align: right; line-height: 1.1; }
.gx__bal span { font-size: 11px; color: #97a1cc; display: block; }
.gx__bal strong { font-size: 16px; }
.gx__body { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 16px; gap: 14px; }

/* shared bet bar */
.betbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  background: rgba(4,7,26,.55); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 12px 16px; }
.betbar__label { font-size: 11px; color: #97a1cc; text-transform: uppercase; letter-spacing: .5px; }
.betbar__amt { min-width: 92px; text-align: center; font-weight: 800; font-size: 17px; }
.ibtn { border: 1px solid rgba(255,255,255,.1); background: #1b2350; color: #fff; cursor: pointer;
  border-radius: 9px; height: 38px; min-width: 38px; padding: 0 12px; font-weight: 800; font-size: 15px; }
.ibtn:hover { background: #232c63; }
.chip { border: 1px solid rgba(255,255,255,.1); background: #141a40; color: #cfe0ff; cursor: pointer;
  border-radius: 8px; height: 34px; padding: 0 12px; font-weight: 700; font-size: 13px; }
.chip:hover, .chip.is-on { background: var(--accent, #3a52ff); color: #fff; }
.actionbtn { border: none; cursor: pointer; border-radius: 12px; font-weight: 900; letter-spacing: .6px;
  font-size: 18px; padding: 14px 30px; color: #06210f; background: linear-gradient(180deg,#7af08a,#22b04a);
  box-shadow: 0 8px 22px rgba(34,176,74,.35); transition: transform .08s, filter .15s; }
.actionbtn:hover { filter: brightness(1.06); } .actionbtn:active { transform: translateY(1px); }
.actionbtn--cash { background: linear-gradient(180deg,#ffd35a,#f0922b); color: #3a1c00; box-shadow: 0 8px 22px rgba(240,146,43,.4); }
.actionbtn--danger { background: linear-gradient(180deg,#ff6b6b,#c0291e); color: #fff; }
.actionbtn[disabled] { filter: grayscale(.6) brightness(.7); cursor: not-allowed; }

/* ---------- CRASH ---------- */
.crash__hist { display: flex; gap: 6px; overflow: hidden; flex-wrap: wrap; max-height: 30px; }
.hchip { font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 20px; background: #141a40; }
.hchip--lo { color: #6ea8ff } .hchip--mid { color: #b98cff } .hchip--hi { color: #ff7ac0 } .hchip--xhi { color: #ffd35a }
.crash__stage { position: relative; flex: 1; min-height: 220px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(circle at 50% 120%, #1a2d5a 0%, #0a0f30 60%, #05071c 100%);
  border: 1px solid rgba(255,255,255,.08); }
.crash__graph { position: absolute; inset: 0; width: 100%; height: 100%; }
.crash__area { fill: rgba(240,146,43,.18); }
.crash__line { fill: none; stroke: #f0a92b; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.crash--crashed .crash__line { stroke: #ff5252 } .crash--crashed .crash__area { fill: rgba(255,82,82,.16) }
.crash__obj { position: absolute; width: 96px; transform: translate(-50%,-50%); transition: none; }
.crash__obj svg { width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.crash--balloon .crash__obj { width: 120px; } .crash--tower .crash__obj { width: 110px; }
.crash--crashed .crash__obj { animation: crashAway .6s ease forwards; }
@keyframes crashAway { to { transform: translate(60px,-120px) rotate(40deg); opacity: 0 } }
.crash__mult { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
  font-size: clamp(40px, 9vw, 86px); font-weight: 900; text-shadow: 0 4px 18px rgba(0,0,0,.6); }
.crash--crashed .crash__mult { color: #ff6b6b } .crash--flying .crash__mult { color: #fff }
.crash__status { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  font-weight: 800; font-size: 14px; color: #cfe0ff; background: rgba(0,0,0,.35); padding: 6px 16px; border-radius: 20px; }
.crash__fun { position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: 2px; font-weight: 800; color: #f0a92b; }

/* ---------- MINES ---------- */
.mines__wrap { flex: 1; display: grid; grid-template-columns: 260px 1fr; gap: 16px; min-height: 0; }
.mines__side { background: rgba(4,7,26,.55); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.mines__grid { align-self: center; display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; width: min(70vh,520px); aspect-ratio: 1; }
.mtile { border-radius: 12px; border: 1px solid rgba(255,255,255,.06); cursor: pointer; position: relative;
  background: linear-gradient(160deg,#1b2350,#10163a); display: grid; place-items: center; transition: transform .08s, filter .15s; }
.mtile:hover:not(.is-open) { filter: brightness(1.2); transform: translateY(-2px); }
.mtile.is-open { background: linear-gradient(160deg,#10301f,#0a2417); }
.mtile.is-bomb { background: linear-gradient(160deg,#3a1010,#240a0a); }
.mtile svg { width: 56%; height: 56%; opacity: 0; transition: opacity .2s, transform .2s; transform: scale(.6); }
.mtile.is-open svg, .mtile.is-bomb svg { opacity: 1; transform: scale(1); }
.label { font-size: 11px; color: #97a1cc; text-transform: uppercase; letter-spacing: .5px; }
.seg { display: flex; gap: 6px; } .seg .chip { flex: 1; text-align: center; }
.mines__stat { display: flex; justify-content: space-between; font-weight: 700; }
.mines__next { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

/* ---------- CHICKEN ---------- */
.chick__road { flex: 1; display: flex; min-height: 220px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg,#3a2a5a,#241738); position: relative; }
.chick--road .chick__road { background: linear-gradient(180deg,#2a3550,#161d34); }
.chick--train .chick__road { background: linear-gradient(180deg,#caa14a,#6b4a1a); }
.lane { flex: 1; border-left: 3px dashed rgba(255,255,255,.18); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.lane:first-child { border-left: none; }
.lane.is-curb { flex: 0 0 90px; background: rgba(0,0,0,.25); }
.lane__mult { font-weight: 800; color: #fff; background: rgba(0,0,0,.35); padding: 5px 10px; border-radius: 18px; font-size: 14px; }
.lane.is-passed .lane__mult { background: #1ea05a; }
.lane.is-current { background: rgba(255,255,255,.07); }
.lane.is-boom { background: rgba(192,41,30,.4); }
.chick__hen { position: absolute; bottom: 14px; width: 64px; transition: left .35s cubic-bezier(.5,1.6,.4,1); transform: translateX(-50%); z-index: 3; }
.chick__hen svg { width: 100%; }
.chick__token { font-weight: 800; color: #2a1c00; }

/* ---------- KENO ---------- */
.keno__wrap { flex: 1; display: grid; grid-template-columns: 260px 1fr; gap: 16px; min-height: 0; }
.keno__board { display: grid; gap: 8px; align-content: start; }
.knum { aspect-ratio: 1; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); cursor: pointer;
  background: #141a40; color: #cfe0ff; font-weight: 800; display: grid; place-items: center; font-size: clamp(11px,1.5vw,16px); transition: transform .08s; }
.knum:hover { background: #1b2350; } .knum.is-pick { background: var(--accent,#3a52ff); color: #fff; }
.knum.is-drawn { background: #3a4170; color: #fff; }
.knum.is-hit { background: #1ea05a; color: #fff; box-shadow: 0 0 0 2px #7af08a; }
.knum.is-miss-pick { background: #c0291e; color: #fff; }
.keno__pay { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.paypill { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 8px; background: #141a40; color: #cfe0ff; }
.paypill.is-on { background: #1ea05a; color: #fff; }

/* ---------- PLINKO ---------- */
.plinko__stage { flex: 1; position: relative; min-height: 240px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg,#10163a,#070b22); border: 1px solid rgba(255,255,255,.08); }
.plinko__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.peg { fill: #6f7cc0; }
.pball { fill: #ff9a3a; filter: drop-shadow(0 0 4px #ff9a3a); }
.plinko__buckets { display: flex; gap: 4px; padding: 8px; }
.bucket { flex: 1; text-align: center; padding: 8px 2px; border-radius: 8px; font-weight: 800; font-size: 13px;
  background: linear-gradient(180deg,#2a3360,#161d3e); color: #ffd35a; }
.bucket.is-hit { animation: bucketHit .5s ease; }
@keyframes bucketHit { 0%,100%{transform:none} 30%{transform:translateY(6px); filter:brightness(1.5)} }

/* ---------- SCRATCH ---------- */
.scratch__wrap { flex: 1; display: grid; grid-template-columns: 220px 1fr 220px; gap: 16px; align-items: center; }
.jackladder { display: flex; flex-direction: column; gap: 10px; }
.jrow { display: flex; justify-content: space-between; padding: 10px 14px; border-radius: 10px; font-weight: 800; }
.jrow--grand { background: linear-gradient(90deg,#caa14a,#7a5210); color: #fff }
.jrow--major { background: linear-gradient(90deg,#9b59b6,#5b2a7a); color: #fff }
.jrow--minor { background: linear-gradient(90deg,#3a6bff,#1a2f7a); color: #fff }
.jrow--mini  { background: linear-gradient(90deg,#1ea05a,#0a4b2a); color: #fff }
.scard { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; width: min(60vh,420px); aspect-ratio: 1; margin: 0 auto; }
.scell { border-radius: 12px; background: linear-gradient(160deg,#2a3360,#141a40); display: grid; place-items: center;
  cursor: pointer; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.07); }
.scell svg { width: 64%; height: 64%; opacity: 0; transform: scale(.6); transition: .2s; }
.scell.is-rev svg { opacity: 1; transform: scale(1); }
.scell.is-win { box-shadow: 0 0 0 3px #ffd35a; }
.scell__cover { position: absolute; inset: 0; background: repeating-linear-gradient(45deg,#3a4a8a,#3a4a8a 8px,#33437d 8px,#33437d 16px);
  display: grid; place-items: center; color: #cfe0ff; font-weight: 800; font-size: 12px; transition: opacity .2s; }
.scell.is-rev .scell__cover { opacity: 0; pointer-events: none; }

.winbanner { text-align: center; font-weight: 900; font-size: 22px; color: #ffd35a; min-height: 26px; }
.winbanner.pop { animation: wbpop .5s ease; } @keyframes wbpop { 0%,100%{transform:none} 40%{transform:scale(1.12)} }

@media (max-width: 820px) {
  .mines__wrap, .keno__wrap { grid-template-columns: 1fr; }
  .scratch__wrap { grid-template-columns: 1fr; }
  .mines__side { order: 2; }
}

/* ---------- ROULETTE ---------- */
.gx--roulette .gx__body { overflow: auto; }
.roul { flex: 1; display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
.roul__left { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.roul__wheelwrap { position: relative; width: 260px; height: 260px; }
.roul__pointer { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); z-index: 3;
  border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 16px solid #ffd35a; filter: drop-shadow(0 2px 2px #000); }
.roul__wheel, .wheelg__wheel { width: 100%; height: 100%; border-radius: 50%; position: relative;
  box-shadow: 0 0 0 8px #2a1c08, inset 0 0 30px rgba(0,0,0,.6); }
.roul__hub { position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(circle,#caa14a,#5b3a0a);
  box-shadow: inset 0 0 12px rgba(0,0,0,.6); }
.roul__result { position: absolute; inset: 38%; border-radius: 50%; display: grid; place-items: center;
  font-size: 30px; font-weight: 900; color: #fff; z-index: 2; background: rgba(0,0,0,.45); }
.roul__result.r-red { box-shadow: 0 0 0 3px #c0291e } .roul__result.r-black { box-shadow: 0 0 0 3px #181820 } .roul__result.r-green { box-shadow: 0 0 0 3px #1ea05a }
.roul__board { display: grid; grid-template-columns: 38px 1fr; gap: 6px; }
.rzero { grid-column: 1; grid-row: 1 / 4; border-radius: 8px; display: grid; place-items: center; font-weight: 800; color: #fff; cursor: pointer; position: relative; }
.rcols { grid-column: 2; grid-row: 1; display: flex; gap: 4px; }
.rcol { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.rdozens { grid-column: 2; grid-row: 2; display: flex; gap: 4px; }
.rrow { grid-column: 2; grid-row: 3; display: flex; gap: 4px; }
.rnum { aspect-ratio: 1; border-radius: 6px; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; cursor: pointer; position: relative; }
.rbet { flex: 1; padding: 10px 4px; border-radius: 8px; text-align: center; font-weight: 800; font-size: 13px; cursor: pointer; position: relative;
  background: #1b2350; color: #cfe0ff; border: 1px solid rgba(255,255,255,.08); }
.rbet:hover, .rnum:hover, .rzero:hover { filter: brightness(1.25); }
.r-red { background: #c0291e; } .r-black { background: #181820; } .r-green { background: #1ea05a; }
.rchip { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: none; place-items: center;
  width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle,#ffd35a,#b9881e); color: #3a1c00;
  font-size: 11px; font-weight: 900; box-shadow: 0 1px 3px rgba(0,0,0,.6); border: 2px dashed #fff8; }
.crash__hist .hchip.r-red { color: #ff7a6a } .crash__hist .hchip.r-black { color: #cfd3e0 } .crash__hist .hchip.r-green { color: #6ff0a0 }

/* ---------- DICE ---------- */
.dice__stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: rgba(4,7,26,.5); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 24px; }
.dice__roll { font-size: clamp(46px,10vw,96px); font-weight: 900; color: #cfe0ff; }
.dice__roll.is-win { color: #6ff0a0 } .dice__roll.is-lose { color: #ff6b6b }
.dice__track { position: relative; width: min(560px,90%); height: 16px; border-radius: 10px; background: linear-gradient(90deg,#1ea05a 0 0); }
.dice__track { background: #c0291e; }
.dice__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px; background: #1ea05a; }
.dice__marker { position: absolute; top: -6px; width: 6px; height: 28px; border-radius: 3px; background: #ffd35a; transform: translateX(-50%); transition: left .2s; box-shadow: 0 0 8px #ffd35a; }
.dice__stats { display: flex; gap: 26px; text-align: center; } .dice__stats strong { font-size: 18px; display: block; }
.dice__slider { width: min(560px,90%); accent-color: #f0a92b; }

/* ---------- WHEEL ---------- */
.wheelg { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; justify-content: center; }
.wheelg__wrap { position: relative; width: min(46vh,340px); height: min(46vh,340px); }
.wlabel { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start;
  padding-top: 12px; font-weight: 800; font-size: 14px; color: #fff; text-shadow: 0 1px 2px #000; }