/* BreakLobby game realms — distinct worlds, one visual language. */

.game-screen {
  background:
    linear-gradient(90deg, rgba(2, 10, 11, 0.9), rgba(2, 10, 11, 0.58) 22%, rgba(2, 10, 11, 0.54) 78%, rgba(2, 10, 11, 0.9)),
    linear-gradient(180deg, rgba(2, 8, 10, 0.52), rgba(2, 7, 9, 0.22) 42%, rgba(2, 6, 8, 0.82)),
    url("assets/visual/realm-backgammon-emerald-caravan.webp") center / cover no-repeat,
    #03090a;
}

.hybrid-screen {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(2, 8, 8, 0.4), rgba(1, 5, 7, 0.84) 68%),
    linear-gradient(90deg, rgba(1, 5, 6, 0.76), rgba(1, 5, 6, 0.22) 23%, rgba(1, 5, 6, 0.2) 77%, rgba(1, 5, 6, 0.76)),
    url("assets/visual/realm-chess-astral-citadel.webp") center / cover no-repeat,
    #020707;
}

.chess-screen {
  background:
    radial-gradient(ellipse at 48% 48%, rgba(4, 15, 13, 0.3), rgba(1, 5, 7, 0.86) 72%),
    linear-gradient(90deg, rgba(1, 5, 6, 0.78), rgba(1, 5, 6, 0.18) 25%, rgba(1, 5, 6, 0.2) 75%, rgba(1, 5, 6, 0.8)),
    url("assets/visual/realm-chess-astral-citadel.webp") center / cover no-repeat,
    #020707;
}

.hybrid-screen.is-standalone-poker,
.hybrid-screen.is-poker-stage {
  background:
    radial-gradient(ellipse at 50% 52%, rgba(11, 4, 7, 0.3), rgba(4, 2, 5, 0.82) 70%),
    linear-gradient(90deg, rgba(8, 2, 5, 0.78), rgba(8, 2, 5, 0.18) 25%, rgba(8, 2, 5, 0.18) 75%, rgba(8, 2, 5, 0.78)),
    url("assets/visual/realm-poker-nebula-vault.webp") center / cover no-repeat,
    #080205;
}

.trix-host-screen {
  background:
    radial-gradient(ellipse at 50% 52%, rgba(3, 13, 15, 0.26), rgba(3, 10, 13, 0.8) 76%),
    linear-gradient(90deg, rgba(3, 10, 13, 0.74), rgba(3, 10, 13, 0.12) 26%, rgba(3, 10, 13, 0.12) 74%, rgba(3, 10, 13, 0.74)),
    url("assets/visual/realm-trix-sky-palace.webp") center / cover no-repeat,
    #031013;
}

.backgammon-library-card,
#backgammonModesModal {
  background-image:
    linear-gradient(180deg, rgba(3, 12, 13, 0.05), rgba(3, 9, 10, 0.9)),
    url("assets/visual/realm-backgammon-emerald-caravan.webp");
}

.gate-library-card,
#chessModesModal {
  background-image:
    linear-gradient(180deg, rgba(2, 9, 8, 0.06), rgba(2, 7, 7, 0.91)),
    url("assets/visual/realm-chess-astral-citadel.webp");
}

.other-games-library-card,
#standalonePokerModesModal {
  background-image:
    linear-gradient(180deg, rgba(12, 3, 7, 0.04), rgba(10, 3, 7, 0.92)),
    url("assets/visual/realm-poker-nebula-vault.webp");
}

.backgammon-library-card,
.gate-library-card,
.other-games-library-card,
#backgammonModesModal,
#chessModesModal,
#standalonePokerModesModal {
  background-position: center;
  background-size: cover;
}

/* A restrained foil edge lets the cards feel bespoke without reducing rank clarity. */
.bl-trix .bl-trix-card,
.hybrid-poker-card {
  background-blend-mode: screen, normal, normal, normal;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.38),
    0 0 0 1px color-mix(in srgb, var(--card-metal, var(--poker-card-metal, #b99046)) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -10px 18px rgba(77, 44, 9, 0.09);
}

.bl-trix .bl-trix-card.is-legal,
button.hybrid-poker-card:not(:disabled):focus-visible {
  filter: saturate(1.06) brightness(1.04);
}

@media (max-width: 700px) {
  .game-screen,
  .chess-screen,
  .hybrid-screen,
  .hybrid-screen.is-standalone-poker,
  .hybrid-screen.is-poker-stage,
  .trix-host-screen {
    background-position: center top;
  }
}

@media (prefers-reduced-data: reduce) {
  .game-screen,
  .chess-screen,
  .hybrid-screen,
  .hybrid-screen.is-standalone-poker,
  .hybrid-screen.is-poker-stage,
  .trix-host-screen {
    background-image: none;
  }
}