
/* BSC Poker X v15.3.1 — Keno Live Draw Arena */
body.keno-live-page{
  --keno-accent:#f6cf4b;
  --keno-glow:rgba(246,207,75,.36);
  --keno-bg-a:#071c29;
  --keno-bg-b:#020b12;
  --keno-cloud:rgba(3,22,33,.88);
  transition:background .35s ease;
}
body.keno-live-page[data-env="casino"]{
  --keno-accent:#f7d14d;--keno-glow:rgba(247,209,77,.42);
  background:
    radial-gradient(circle at 82% 12%,rgba(250,190,35,.17),transparent 28%),
    radial-gradient(circle at 12% 32%,rgba(179,30,45,.18),transparent 30%),
    linear-gradient(135deg,#160a0d 0,#071722 48%,#02080e 100%);
}
body.keno-live-page[data-env="neon"]{
  --keno-accent:#55e9ff;--keno-glow:rgba(85,233,255,.45);
  background:
    radial-gradient(circle at 18% 12%,rgba(168,61,255,.24),transparent 30%),
    radial-gradient(circle at 85% 30%,rgba(0,231,255,.20),transparent 32%),
    linear-gradient(135deg,#070820,#06192a 55%,#02050e 100%);
}
body.keno-live-page[data-env="space"]{
  --keno-accent:#b7a7ff;--keno-glow:rgba(183,167,255,.45);
  background:
    radial-gradient(circle at 18% 18%,rgba(102,95,255,.26),transparent 26%),
    radial-gradient(circle at 80% 25%,rgba(0,191,255,.16),transparent 29%),
    radial-gradient(circle at 48% 80%,rgba(184,55,255,.12),transparent 25%),
    linear-gradient(160deg,#02030b,#071023 58%,#010207);
}
body.keno-live-page[data-env="felt"]{
  --keno-accent:#7effbd;--keno-glow:rgba(126,255,189,.36);
  background:
    radial-gradient(circle at 50% -10%,rgba(57,197,135,.22),transparent 38%),
    linear-gradient(135deg,#05251e,#073a2d 48%,#02130f);
}
.keno-live-page .gamehub-btn.primary{
  background:linear-gradient(135deg,var(--keno-accent),#df9d21);
  border-color:color-mix(in srgb,var(--keno-accent) 80%,white);
}
.keno-arena-hero{
  position:relative;overflow:hidden;
  background:
    linear-gradient(120deg,rgba(2,17,27,.95),rgba(6,42,59,.84)),
    radial-gradient(circle at 75% 30%,var(--keno-glow),transparent 38%);
}
.keno-arena-hero::after{
  content:"";position:absolute;inset:auto -10% -60% 30%;height:340px;border-radius:50%;
  background:radial-gradient(circle,var(--keno-glow),transparent 62%);filter:blur(25px);pointer-events:none;
}
.keno-live-toolbar{
  display:grid;grid-template-columns:minmax(210px,1fr) minmax(180px,.75fr) auto;
  gap:10px;align-items:end;margin-bottom:15px;
}
.keno-live-toolbar label{display:grid;gap:7px;color:#b8ceda;font-size:13px;font-weight:800}
.keno-live-toolbar .voice-toggle{min-height:46px}
.keno-stage{
  margin-top:18px;border:1px solid color-mix(in srgb,var(--keno-accent) 42%,#214e65);
  border-radius:28px;background:var(--keno-cloud);box-shadow:0 24px 70px rgba(0,0,0,.38),inset 0 0 55px rgba(255,255,255,.02);
  overflow:hidden;
}
.keno-stage-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:15px 18px;border-bottom:1px solid rgba(255,255,255,.08)
}
.keno-stage-head strong{font-size:18px}
.keno-stage-head span{color:#a9c1d0}
.keno-live-cloud{
  min-height:390px;padding:22px;display:grid;grid-template-columns:minmax(170px,.42fr) minmax(0,1.58fr);
  gap:22px;align-items:center;
  background:
    radial-gradient(circle at 25% 50%,var(--keno-glow),transparent 24%),
    radial-gradient(circle at 72% 50%,rgba(60,206,255,.07),transparent 30%);
}
.keno-current-wrap{display:grid;place-items:center;text-align:center;gap:10px}
.keno-current-label{font-size:12px;font-weight:900;letter-spacing:.18em;color:#a9c1d0}
.keno-current-ball{
  width:clamp(130px,18vw,210px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  font-size:clamp(58px,9vw,104px);font-weight:1000;color:#06131a;
  background:radial-gradient(circle at 34% 27%,#fffbd0 0,var(--keno-accent) 35%,#d08a12 74%,#815008 100%);
  border:6px solid rgba(255,255,255,.5);
  box-shadow:0 0 0 10px rgba(255,255,255,.04),0 0 56px var(--keno-glow),0 24px 45px rgba(0,0,0,.4);
  transform:scale(.92);opacity:.5;transition:transform .28s ease,opacity .28s ease,filter .28s ease;
}
.keno-current-ball.live{transform:scale(1);opacity:1;animation:kenoBallIn .42s cubic-bezier(.2,.9,.25,1.25)}
.keno-current-ball.hit{filter:saturate(1.35) brightness(1.08);box-shadow:0 0 0 10px rgba(91,255,188,.12),0 0 70px rgba(67,221,176,.78),0 24px 45px rgba(0,0,0,.4)}
@keyframes kenoBallIn{0%{transform:translateY(-22px) scale(.55) rotate(-12deg);opacity:0}100%{transform:none;opacity:1}}
.keno-bot-line{min-height:44px;color:#d8edf7;font-size:15px;line-height:1.45;max-width:240px}
.keno-ball-cloud{
  display:grid;grid-template-columns:repeat(10,minmax(42px,1fr));gap:9px;align-content:center;
}
.keno-drawn-ball{
  aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-weight:900;
  color:#dff3fb;background:linear-gradient(145deg,#0b3348,#061b28);border:1px solid #2c6177;
  box-shadow:inset 0 0 18px rgba(255,255,255,.03);opacity:.26;transform:scale(.82);transition:.28s ease;
}
.keno-drawn-ball.revealed{opacity:1;transform:scale(1);border-color:color-mix(in srgb,var(--keno-accent) 58%,#36738b)}
.keno-drawn-ball.hit{
  color:#062015;background:radial-gradient(circle at 35% 28%,#e7fff5,#62e4b4 42%,#199d72);
  border-color:#9effdc;box-shadow:0 0 24px rgba(67,221,176,.48)
}
.keno-scoreboard{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding:15px;background:rgba(0,0,0,.18);border-top:1px solid rgba(255,255,255,.08)
}
.keno-score{padding:13px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}
.keno-score span{display:block;font-size:11px;letter-spacing:.08em;color:#9cb7c5;text-transform:uppercase}.keno-score strong{display:block;font-size:22px;margin-top:4px}
.keno-score.hit-score strong{color:#72f0c4}.keno-score.win-score strong{color:var(--keno-accent)}
.keno-progress-track{height:7px;border-radius:999px;background:#03131d;overflow:hidden;margin:0 15px 15px}
.keno-progress-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--keno-accent),#59efbc);transition:width .25s ease}
.keno-round-board{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;
}
.keno-round-card{
  border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.035);padding:12px;
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
}
.keno-round-card.active{border-color:var(--keno-accent);box-shadow:0 0 22px var(--keno-glow)}
.keno-round-card.won{border-color:#50dfac;background:rgba(45,185,132,.09)}
.keno-round-card small{color:#9db7c5}.keno-round-card b:last-child{justify-self:end}
.keno-pick-board .keno-num{
  min-height:54px;aspect-ratio:auto;border-radius:14px;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.keno-pick-board .keno-num:hover{transform:translateY(-2px)}
.keno-pick-board .keno-num.selected{box-shadow:0 0 20px var(--keno-glow);background:var(--keno-accent)}
.keno-lock-note{font-size:12px;color:#98afbc;margin-top:8px}
body.keno-drawing .keno-pick-board,body.keno-drawing .keno-controls,body.keno-drawing #quick,body.keno-drawing #clear{pointer-events:none;opacity:.66}
@media(max-width:900px){
  .keno-live-toolbar{grid-template-columns:1fr 1fr}.keno-live-toolbar .voice-toggle{grid-column:1/-1}
  .keno-live-cloud{grid-template-columns:1fr;min-height:0}.keno-ball-cloud{grid-template-columns:repeat(10,minmax(34px,1fr))}
  .keno-scoreboard{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
  .keno-live-toolbar{grid-template-columns:1fr}.keno-live-toolbar .voice-toggle{grid-column:auto}
  .keno-live-cloud{padding:16px}.keno-ball-cloud{grid-template-columns:repeat(5,minmax(42px,1fr));gap:7px}
  .keno-scoreboard{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px}
  .keno-current-ball{width:145px}.keno-round-board{grid-template-columns:1fr}
}
