/* ==========================================================
   Casino atmosphere around the game tables:
   a blurred casino room behind every table, neon game sign,
   colored glow under the table, chasing marquee lights,
   and a betting console instead of a plain panel.
   ========================================================== */

/* ---- the room behind the table (card rooms vs. casino floor) ---- */
body[data-screen="game"] .bg-glow {
  background:
    radial-gradient(ellipse 85% 70% at 50% 45%, rgba(10, 2, 16, .05), rgba(10, 2, 16, .55) 100%),
    linear-gradient(180deg, rgba(20, 4, 20, .12), rgba(10, 2, 14, .45)),
    url(../assets/rooms/floor.webp) center / cover no-repeat,
    #12051a;
}
body[data-screen="game"][data-game="blackjack"] .bg-glow,
body[data-screen="game"][data-game="poker"] .bg-glow,
body[data-screen="game"][data-game="baccarat"] .bg-glow,
body[data-screen="game"][data-game="videopoker"] .bg-glow,
body[data-screen="game"][data-game="hilo"] .bg-glow {
  background:
    radial-gradient(ellipse 85% 70% at 50% 45%, rgba(10, 2, 16, .04), rgba(10, 2, 16, .5) 100%),
    linear-gradient(180deg, rgba(20, 4, 20, .1), rgba(10, 2, 14, .42)),
    url(../assets/rooms/vip.webp) center / cover no-repeat,
    #12051a;
}
/* floating light orbs drifting slowly over the room */
body[data-screen="game"] .bg-glow::after {
  content: ''; position: absolute; inset: -20%; pointer-events: none; opacity: .55;
  background:
    radial-gradient(circle at 12% 30%, rgba(255, 196, 80, .35) 0 6px, transparent 40px),
    radial-gradient(circle at 85% 22%, rgba(255, 60, 140, .35) 0 8px, transparent 50px),
    radial-gradient(circle at 70% 78%, rgba(160, 90, 255, .3) 0 6px, transparent 46px),
    radial-gradient(circle at 25% 80%, rgba(255, 120, 40, .3) 0 5px, transparent 38px),
    radial-gradient(circle at 50% 10%, rgba(255, 230, 150, .3) 0 4px, transparent 34px);
  animation: orbs 18s ease-in-out infinite alternate;
}
@keyframes orbs { to { transform: translate(3%, -4%) scale(1.05); } }

/* ---- colored glow under the table ---- */
.game-screen { position: relative; isolation: isolate; }
.game-screen::before {
  content: ''; position: absolute; z-index: -1; left: 4%; right: 4%; top: 70px; height: 62%;
  border-radius: 50%; pointer-events: none; filter: blur(46px);
  background: radial-gradient(ellipse at center, rgba(255, 45, 110, .45), rgba(140, 60, 255, .35) 45%, rgba(255, 170, 40, .15) 70%, transparent 75%);
  animation: tableglow 6s ease-in-out infinite alternate;
}
@keyframes tableglow { to { opacity: .7; transform: scale(1.04); } }

/* ---- neon game sign with twinkling bulbs ---- */
.game-head h1 {
  flex: 0 1 auto; margin: 0 auto; padding: 6px 30px 8px; border-radius: 999px; position: relative;
  background: linear-gradient(180deg, #4a0c24, #1c0510);
  box-shadow: 0 0 0 2px #f0b429, 0 0 0 5px rgba(60, 10, 30, .9), 0 0 26px rgba(255, 170, 40, .55), inset 0 0 18px rgba(255, 60, 120, .35);
  outline: 3px dotted #ffe9a8; outline-offset: 5px; animation: bulbs 1.2s steps(2) infinite;
}
.game-head h1 { color: transparent; background-clip: padding-box; }
.game-head h1::after {
  content: attr(data-title); position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  background: linear-gradient(180deg, #fff6c8, #ffc21a 55%, #f08a0c); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 8px rgba(255, 190, 40, .8));
}
@keyframes bulbs { 50% { outline-color: #ff6aa8; } }

/* ---- chasing marquee lights along both sides (wide screens) ---- */
@media (min-width: 1300px) {
  body[data-screen="game"]::before, body[data-screen="game"]::after {
    content: ''; position: fixed; top: 70px; bottom: 16px; width: 14px; z-index: 1; pointer-events: none; border-radius: 10px;
    background: radial-gradient(circle, #fff3b0 0 3px, #ffb21a 4px, transparent 6px) 0 0 / 14px 22px repeat-y, linear-gradient(#3a0a1e, #1a0510);
    box-shadow: 0 0 0 2px #b8860b, 0 0 24px rgba(255, 170, 40, .45);
    animation: chase 1s linear infinite;
  }
  body[data-screen="game"]::before { left: 18px; }
  body[data-screen="game"]::after { right: 18px; animation-direction: reverse; }
}
@keyframes chase { to { background-position: 0 22px, 0 0; } }

/* ---- betting console ---- */
.game-screen .controls {
  background:
    radial-gradient(ellipse 60% 120% at 50% 0%, rgba(255, 45, 110, .22), transparent 70%),
    linear-gradient(180deg, rgba(62, 10, 32, .96), rgba(20, 4, 14, .97));
  border: 0;
  box-shadow: 0 0 0 2px rgba(240, 180, 41, .75), 0 0 0 5px rgba(40, 6, 20, .9), 0 0 34px rgba(255, 170, 40, .28), 0 20px 40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.game-screen .stack-pill { background: linear-gradient(180deg, rgba(255, 215, 120, .18), rgba(255, 215, 120, .06)); border: 1px solid rgba(255, 215, 120, .35); }
.game-screen .toggle { background: rgba(0, 0, 0, .3); border-color: rgba(255, 215, 120, .3); }
.game-screen .btn-ghost { background: rgba(0, 0, 0, .28); border-color: rgba(255, 215, 120, .3); }
.game-screen .back-btn { background: linear-gradient(180deg, rgba(74, 12, 36, .9), rgba(28, 5, 16, .9)); border-color: rgba(240, 180, 41, .6); }

/* the tables themselves get a touch more shine */
.felt { box-shadow:
  inset 0 0 0 2px rgba(255, 220, 140, .55), inset 0 0 0 6px rgba(0, 0, 0, .25), inset 0 12px 40px rgba(0, 0, 0, .45),
  0 0 0 1px #2a1306, 0 30px 60px rgba(0, 0, 0, .7), 0 0 0 4px rgba(255, 200, 120, .12), 0 0 60px rgba(255, 60, 130, .25); }
.pk-table { box-shadow: inset 0 0 0 2px rgba(255, 220, 140, .5), inset 0 14px 40px rgba(0, 0, 0, .5), 0 0 0 4px #1a0d05, 0 0 0 9px #5a2d0c, 0 30px 70px rgba(0, 0, 0, .7), 0 0 80px rgba(255, 60, 130, .3), 0 0 140px rgba(140, 60, 255, .25); }

@media (max-width: 680px) {
  .game-head h1 { padding: 4px 18px 6px; outline-width: 2px; outline-offset: 3px; }
  .game-screen::before { top: 50px; filter: blur(30px); }
}
@media (prefers-reduced-motion: reduce) {
  .game-head h1, body[data-screen="game"]::before, body[data-screen="game"]::after, body[data-screen="game"] .bg-glow::after, .game-screen::before { animation: none !important; }
}
html.a11y-still .game-head h1, html.a11y-still body[data-screen="game"]::before, html.a11y-still body[data-screen="game"]::after { animation: none !important; }
html.a11y-contrast body[data-screen="game"] .bg-glow { background: #000 !important; }