/* Browser-speelachtergrond: rustige, klassieke kaartclubsfeer zonder beeldbestand. */
html:has(body.game-active) {
  background: #06100b !important;
}

body.game-active {
  background-color: #06100b !important;
  background-image:
    repeating-linear-gradient(118deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, rgba(0,0,0,.012) 1px, rgba(0,0,0,.012) 3px),
    radial-gradient(ellipse at 50% 43%, transparent 34%, rgba(0,0,0,.12) 66%, rgba(0,0,0,.48) 100%),
    radial-gradient(ellipse at 50% 42%, rgba(101,91,58,.22) 0%, rgba(48,66,39,.25) 30%, rgba(20,43,29,.32) 52%, rgba(7,18,12,.82) 78%, rgba(5,12,8,.98) 100%),
    linear-gradient(180deg, #0d2116 0%, #08150e 58%, #06100b 100%) !important;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat !important;
  background-position: center !important;
  background-size: 5px 5px, cover, cover, cover !important;
  background-attachment: fixed !important;
}

body.game-active[data-game-background="amsterdam-cafe"] {
  background-image:
    radial-gradient(ellipse at 50% 44%, transparent 38%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.54) 100%),
    linear-gradient(180deg, rgba(4,12,8,.16), rgba(4,12,8,.28)),
    url("./assets/speelachtergrond-amsterdam-cafe.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

body.game-active[data-game-background="modern-cafe"] {
  background-image:
    radial-gradient(ellipse at 50% 44%, transparent 38%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.54) 100%),
    linear-gradient(180deg, rgba(4,12,8,.14), rgba(4,12,8,.25)),
    url("./assets/speelachtergrond-modern-cafe.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

body.game-active[data-game-background="classic-cafe"] {
  background-image:
    radial-gradient(ellipse at 50% 44%, transparent 38%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.54) 100%),
    linear-gradient(180deg, rgba(4,12,8,.12), rgba(4,12,8,.24)),
    url("./assets/speelachtergrond-klassiek-cafe.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

body.game-active[data-game-background="kitchen"] {
  background-image: radial-gradient(ellipse at 50% 44%, transparent 38%, rgba(0,0,0,.16) 72%, rgba(0,0,0,.5) 100%), linear-gradient(180deg, rgba(4,12,8,.08), rgba(4,12,8,.2)), url("./assets/speelachtergrond-keuken.png") !important;
  background-repeat: no-repeat !important; background-position: center !important; background-size: cover !important;
}

body.game-active[data-game-background="terrace"] {
  background-image: radial-gradient(ellipse at 50% 44%, transparent 38%, rgba(0,0,0,.16) 72%, rgba(0,0,0,.5) 100%), linear-gradient(180deg, rgba(4,12,8,.08), rgba(4,12,8,.2)), url("./assets/speelachtergrond-terras.png") !important;
  background-repeat: no-repeat !important; background-position: center !important; background-size: cover !important;
}

body.game-active[data-game-background="construction-hut"] {
  background-image: radial-gradient(ellipse at 50% 44%, transparent 38%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.52) 100%), linear-gradient(180deg, rgba(4,12,8,.1), rgba(4,12,8,.22)), url("./assets/speelachtergrond-bouwkeet.png") !important;
  background-repeat: no-repeat !important; background-position: center !important; background-size: cover !important;
}

body.game-active[data-game-background="company-canteen"] {
  background-image: radial-gradient(ellipse at 50% 44%, transparent 38%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.5) 100%), linear-gradient(180deg, rgba(4,12,8,.1), rgba(4,12,8,.22)), url("./assets/speelachtergrond-bedrijfskantine.png") !important;
  background-repeat: no-repeat !important; background-position: center !important; background-size: cover !important;
}

body.game-active[data-game-background="school-canteen"] {
  background-image: radial-gradient(ellipse at 50% 44%, transparent 38%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.5) 100%), linear-gradient(180deg, rgba(4,12,8,.1), rgba(4,12,8,.22)), url("./assets/speelachtergrond-schoolkantine.png") !important;
  background-repeat: no-repeat !important; background-position: center !important; background-size: cover !important;
}

body.game-active[data-game-background="sports-canteen"] {
  background-image: radial-gradient(ellipse at 50% 44%, transparent 38%, rgba(0,0,0,.16) 72%, rgba(0,0,0,.48) 100%), linear-gradient(180deg, rgba(4,12,8,.08), rgba(4,12,8,.18)), url("./assets/speelachtergrond-sportkantine.png") !important;
  background-repeat: no-repeat !important; background-position: center !important; background-size: cover !important;
}

body.game-active[data-game-background="amsterdam-neon"] {
  background-image: radial-gradient(ellipse at 50% 44%, transparent 38%, rgba(0,0,0,.14) 72%, rgba(0,0,0,.44) 100%), linear-gradient(180deg, rgba(5,3,16,.05), rgba(5,3,16,.16)), url("./assets/speelachtergrond-amsterdam-neon.png") !important;
  background-repeat: no-repeat !important; background-position: center !important; background-size: cover !important;
}

body.game-active[data-game-background="rotterdam-neon"] {
  background-image: radial-gradient(ellipse at 50% 44%, transparent 38%, rgba(0,0,0,.14) 72%, rgba(0,0,0,.44) 100%), linear-gradient(180deg, rgba(5,3,16,.05), rgba(5,3,16,.16)), url("./assets/speelachtergrond-rotterdam-neon.png") !important;
  background-repeat: no-repeat !important; background-position: center !important; background-size: cover !important;
}

body.game-active .table {
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.08),
    inset 0 0 46px rgba(98,24,18,.16),
    0 24px 58px rgba(0,0,0,.5),
    0 0 46px rgba(190,145,45,.075),
    0 0 90px rgba(41,77,47,.12) !important;
}

body.game-active :is(.score-board, .table-chat) {
  box-shadow: 0 16px 40px rgba(0,0,0,.3), 0 0 34px rgba(36,77,48,.09) !important;
}

body.game-active .hand-panel {
  box-shadow:
    inset 0 0 0 2px rgba(255,214,106,.64),
    0 14px 38px rgba(0,0,0,.3),
    0 0 34px rgba(55,91,56,.12) !important;
}

@media (max-width: 768px), (max-height: 600px) {
  body.game-active[data-game-background="atmosphere"] {
    background-attachment: scroll !important;
    background-image:
      repeating-linear-gradient(118deg, rgba(255,255,255,.01) 0, rgba(255,255,255,.01) 1px, rgba(0,0,0,.01) 1px, rgba(0,0,0,.01) 3px),
      radial-gradient(ellipse at 50% 44%, transparent 30%, rgba(0,0,0,.13) 68%, rgba(0,0,0,.46) 100%),
      radial-gradient(ellipse at 50% 43%, rgba(101,91,58,.18) 0%, rgba(42,66,40,.22) 32%, rgba(16,39,26,.34) 58%, rgba(5,12,8,.96) 100%),
      linear-gradient(180deg, #0d2116 0%, #08150e 58%, #06100b 100%) !important;
  }

  body.game-active { background-attachment: scroll !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.game-active { background-attachment: scroll !important; }
}