/* Colección Bingo: selector de ocho salones y temas visuales del juego.
   No interviene en la apuesta, el sorteo ni los pagos. */

/* ───────────────────────── Selector de salones ───────────────────────── */
.bingo-showcase {
  --showcase-gold: #e9bf63;
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  padding: clamp(24px, 4vw, 64px) clamp(14px, 4vw, 52px) 56px;
  overflow: hidden;
  color: #f8f3e9;
  background: #030405;
}

.bingo-showcase::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .34), #030405 82%),
    url("../images/cinematic/bingo/salon-dorado-desktop.webp") center top / cover no-repeat;
  filter: saturate(.78) contrast(1.08);
}

.bingo-showcase::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 8%, rgba(233, 191, 99, .2), transparent 30%),
    linear-gradient(90deg, rgba(0, 0, 0, .74), transparent 30% 70%, rgba(0, 0, 0, .74));
  pointer-events: none;
}

.bingo-showcase__hero,
.bingo-theme-grid,
.bingo-showcase__footer {
  width: min(1240px, 100%);
  margin-inline: auto;
}

.bingo-showcase__hero {
  padding: clamp(20px, 5vw, 68px) 0 clamp(26px, 4vw, 50px);
  text-align: center;
}

.bingo-showcase__back {
  position: absolute;
  top: 22px;
  left: clamp(14px, 4vw, 52px);
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: rgba(255, 255, 255, .7);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}

.bingo-showcase__eyebrow,
.bingo-theme-card__copy > p {
  margin: 0;
  color: var(--showcase-gold);
  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .23em;
  text-transform: uppercase;
}

.bingo-showcase h1 {
  margin: 12px 0 14px;
  color: #fffaf0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.7rem, 7vw, 6.4rem);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -.04em;
  text-shadow: 0 18px 50px rgba(0, 0, 0, .9);
}

.bingo-showcase__lead {
  max-width: 700px;
  margin: 0 auto;
  color: rgba(248, 243, 233, .76);
  font-size: clamp(.96rem, 1.4vw, 1.1rem);
  line-height: 1.65;
}

.bingo-showcase__rules {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 24px;
}

.bingo-showcase__rules span {
  padding: 9px 15px;
  border: 1px solid rgba(233, 191, 99, .28);
  border-radius: 999px;
  color: rgba(255, 255, 255, .72);
  background: rgba(0, 0, 0, .46);
  font-size: .78rem;
  backdrop-filter: blur(12px);
}

.bingo-showcase__rules b { color: #ffe6a2; }

.bingo-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 26px);
}

.bingo-theme-card {
  --theme-accent: #e9bf63;
  --theme-accent-soft: rgba(233, 191, 99, .2);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 38%, transparent);
  border-radius: 26px;
  background: rgba(3, 4, 6, .9);
  box-shadow: 0 25px 70px rgba(0, 0, 0, .55), inset 0 1px rgba(255, 255, 255, .06);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.bingo-theme-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--theme-accent) 72%, transparent);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .7), 0 0 36px var(--theme-accent-soft);
}

.bingo-theme-card__visual {
  position: relative;
  min-height: clamp(230px, 30vw, 380px);
  overflow: hidden;
  background-image:
    linear-gradient(180deg, transparent 48%, rgba(3, 4, 6, .94) 100%),
    var(--theme-card-bg);
  background-position: center;
  background-size: cover;
}

.bingo-theme-card__visual::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .28);
}

.bingo-theme-card__sphere {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(64%, 310px);
  aspect-ratio: 1;
  transform: translate(-50%, -48%);
  object-fit: contain;
  filter: drop-shadow(0 18px 25px rgba(0, 0, 0, .74));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), filter .5s ease;
}

.bingo-theme-card:hover .bingo-theme-card__sphere {
  transform: translate(-50%, -50%) scale(1.045) rotate(2deg);
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .82)) drop-shadow(0 0 15px var(--theme-accent-soft));
}

.bingo-theme-card__number,
.bingo-theme-card__material {
  position: absolute;
  z-index: 1;
  top: 24px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(0, 0, 0, .54);
  backdrop-filter: blur(12px);
}

.bingo-theme-card__number {
  left: 24px;
  color: var(--theme-accent);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
}

.bingo-theme-card__material {
  right: 24px;
  color: rgba(255, 255, 255, .78);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bingo-theme-card__copy {
  position: relative;
  padding: 22px 24px 25px;
}

.bingo-theme-card__copy h2 {
  margin: 8px 0 8px;
  color: #fffaf0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 3vw, 2.45rem);
  font-weight: 600;
  line-height: 1;
}

.bingo-theme-card__copy > span {
  display: block;
  min-height: 3em;
  color: rgba(248, 243, 233, .68);
  font-size: .9rem;
  line-height: 1.5;
}

.bingo-theme-card__copy a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--theme-accent);
  color: var(--theme-accent);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}

.bingo-theme-card__copy a b { transition: transform .2s ease; }
.bingo-theme-card__copy a:hover b { transform: translateX(4px); }

.bingo-theme-card--palacio-jade { --theme-accent: #72d9ac; --theme-accent-soft: rgba(62, 198, 144, .2); }
.bingo-theme-card--opera-rubi { --theme-accent: #ff8a91; --theme-accent-soft: rgba(224, 48, 69, .22); }
.bingo-theme-card--eclipse-lunar { --theme-accent: #b5a7ff; --theme-accent-soft: rgba(137, 105, 255, .22); }
.bingo-theme-card--camara-zafiro { --theme-accent: #7dc5ff; --theme-accent-soft: rgba(49, 132, 255, .22); }
.bingo-theme-card--forja-obsidiana { --theme-accent: #ff9b55; --theme-accent-soft: rgba(255, 105, 35, .2); }
.bingo-theme-card--aurora-boreal { --theme-accent: #8affec; --theme-accent-soft: rgba(66, 224, 205, .2); }
.bingo-theme-card--neon-imperial { --theme-accent: #68e9ff; --theme-accent-soft: rgba(124, 80, 255, .25); }

.bingo-showcase__footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-top: 34px;
  padding: 18px 2px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .56);
  font-size: .8rem;
}

.bingo-showcase__footer p { margin: 0; }
.bingo-showcase__footer a { color: #f4d890; }

/* ───────────────────────── Juego compartido ───────────────────────── */
body.bingo-theme {
  --bingo-accent: #e8bf63;
  --bingo-accent-bright: #ffe6a2;
  --bingo-accent-2: #9f7627;
  --bingo-glow: rgba(232, 191, 99, .24);
  --bingo-panel: rgba(5, 5, 6, .9);
  --bingo-panel-soft: rgba(13, 11, 8, .74);
  --bingo-ball-fill: #fff8df;
  --bingo-ball-shade: #caa557;
  --bingo-ball-stroke: #f0c967;
  --bingo-ball-shadow: rgba(0, 0, 0, .46);
  --bingo-ball-text: #251705;
  --bingo-ball-highlight: #ffe269;
  --bingo-ball-highlight-stroke: #fff2b3;
  --bingo-confetti-1: #f5d97a;
  --bingo-confetti-2: #ffffff;
  --bingo-confetti-3: #b7872d;
  --cin-accent: var(--bingo-accent);
  --cin-accent-bright: var(--bingo-accent-bright);
  --cin-accent-soft: var(--bingo-glow);
  --cin-line: color-mix(in srgb, var(--bingo-accent) 38%, transparent);
  --cin-panel: var(--bingo-panel);
}

body.bingo-theme::before {
  filter: saturate(1.02) contrast(1.08) brightness(.72);
}

body.bingo-theme::after {
  background:
    radial-gradient(circle at 42% 44%, transparent 0 24%, rgba(0, 0, 0, .13) 50%, rgba(0, 0, 0, .62) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .36));
}

.bingo-theme .game-layout {
  grid-template-columns: minmax(0, 1fr) minmax(350px, 410px);
}

.bingo-theme .stage {
  isolation: isolate;
  background: transparent;
}

.cinematic-game.bingo-gala .stage::before {
  background: radial-gradient(circle at 50% 47%, var(--bingo-glow), transparent 50%);
}

.bingo-theme .stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 49%, var(--bingo-glow), transparent 43%),
    linear-gradient(0deg, rgba(0, 0, 0, .38), transparent 45%);
  pointer-events: none;
}

.bingo-theme .panel {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .065), transparent 24%),
    linear-gradient(180deg, var(--bingo-panel), var(--bingo-panel-soft));
}

.bingo-theme .panel__header::before { display: none; }

.bingo-theme-name {
  margin: 0 0 8px;
  color: var(--bingo-accent);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .23em;
  text-transform: uppercase;
}

.bingo-theme .panel__title span {
  color: var(--bingo-accent-bright);
  font-size: .7em;
  white-space: nowrap;
}

.bingo-theme .picker-grid {
  gap: 9px;
  margin: 0;
}

.bingo-theme .picker__btn {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--bingo-accent) 18%, rgba(255, 255, 255, .1));
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .04), transparent 55%),
    rgba(0, 0, 0, .68);
}

.bingo-theme .picker__btn::after {
  content: "";
  position: absolute;
  inset: auto 18% 0;
  height: 1px;
  background: var(--bingo-accent);
  opacity: .28;
}

.bingo-theme .picker__btn.is-selected,
.bingo-theme .picker__btn[aria-pressed="true"] {
  border-color: var(--bingo-accent-bright);
  background: linear-gradient(145deg, var(--bingo-accent-2), rgba(4, 5, 7, .88));
  color: #fff;
  box-shadow: 0 0 0 1px var(--bingo-accent) inset, 0 9px 25px var(--bingo-glow);
}

.bingo-theme.has-bingo-matches .picker__btn.is-selected:not(.is-bingo-match) {
  opacity: .42;
  filter: grayscale(.65) brightness(.66);
  transform: scale(.92);
}

.bingo-theme .picker__btn.is-bingo-match {
  z-index: 3;
  border-color: var(--bingo-accent-bright);
  color: #fff;
  background: radial-gradient(circle, var(--bingo-accent), var(--bingo-accent-2));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--bingo-accent-bright) 64%, transparent) inset,
    0 0 18px var(--bingo-accent),
    0 0 38px var(--bingo-glow);
  animation: bingo-number-match 1.08s cubic-bezier(.22, .8, .28, 1) infinite;
}

.bingo-theme .panel-apuesta {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--bingo-accent) 8%, transparent), transparent 52%),
    rgba(0, 0, 0, .5);
}

.bingo-theme .stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

.bingo-theme .stats span {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  font-size: .78rem;
}

.bingo-theme .stats__result { grid-column: 1 / -1; }

.bingo-theme .btn--primary {
  border: 1px solid color-mix(in srgb, var(--bingo-accent-bright) 55%, transparent);
  background: linear-gradient(135deg, var(--bingo-accent-2), var(--bingo-accent-bright) 52%, var(--bingo-accent-2));
  color: #100e0a;
  box-shadow: 0 13px 32px var(--bingo-glow), inset 0 1px rgba(255, 255, 255, .55);
}

.bingo-theme .btn--secondary {
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 255, 255, .78);
}

.bingo-stage__halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(76vw, 820px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--bingo-accent) 42%, transparent);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 53%, var(--bingo-glow) 72%, transparent 74%);
  box-shadow: 0 0 90px var(--bingo-glow), inset 0 0 70px rgba(0, 0, 0, .42);
}

.bingo-theme .sphere {
  z-index: 2;
}

.bingo-theme .sphere__canvas,
.bingo-theme .sphere__img {
  width: min(720px, 68vw);
  max-width: 82vmin;
  filter: drop-shadow(0 28px 42px rgba(0, 0, 0, .7)) drop-shadow(0 0 17px var(--bingo-glow));
}

.sphere__orbit {
  position: absolute;
  z-index: 0;
  width: min(760px, 72vw);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--bingo-accent) 36%, transparent);
  border-radius: 50%;
  opacity: .5;
  pointer-events: none;
}

.sphere__orbit--one { transform: rotate(18deg) scaleY(.42); }
.sphere__orbit--two { transform: rotate(-32deg) scaleY(.62); opacity: .24; }

.bingo-theme .sphere__img--spinning + .sphere__orbit,
.bingo-theme .sphere:has(.sphere__img--spinning) .sphere__orbit--one {
  animation: bingo-orbit-spin 5s linear infinite;
}

.bingo-theme .sphere:has(.sphere__img--spinning) .sphere__orbit--two {
  animation: bingo-orbit-spin-reverse 7s linear infinite;
}

.bingo-stage__plinth {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 5.5%;
  width: min(620px, 68vw);
  height: 80px;
  transform: translateX(-50%) perspective(380px) rotateX(66deg);
  border: 1px solid color-mix(in srgb, var(--bingo-accent) 50%, transparent);
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--bingo-glow), rgba(0, 0, 0, .55) 65%);
  box-shadow: 0 0 50px var(--bingo-glow);
}

.bingo-theme .tray {
  z-index: 5;
  min-width: 185px;
  justify-content: center;
  border-color: color-mix(in srgb, var(--bingo-accent) 42%, transparent);
  background: color-mix(in srgb, var(--bingo-panel) 88%, transparent);
}

.bingo-theme .tray__label { color: rgba(255, 255, 255, .64); }

.bingo-theme .picker-overlay__card {
  border-color: color-mix(in srgb, var(--bingo-accent) 42%, transparent);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--bingo-accent) 9%, transparent), transparent 50%),
    color-mix(in srgb, var(--bingo-panel) 92%, transparent);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .72), 0 0 28px var(--bingo-glow);
  backdrop-filter: blur(18px) saturate(125%);
}

.bingo-theme .picker-overlay__title { color: var(--bingo-accent-bright); }

/* Paletas y materiales de las ocho salas. */
.bingo-theme--palacio-jade {
  --bingo-accent: #55d69e; --bingo-accent-bright: #d8ffca; --bingo-accent-2: #196348;
  --bingo-glow: rgba(58, 211, 151, .24); --bingo-panel: rgba(2, 12, 10, .92); --bingo-panel-soft: rgba(7, 29, 22, .78);
  --bingo-ball-fill: #e9ffdc; --bingo-ball-shade: #75b995; --bingo-ball-stroke: #d8bc70; --bingo-ball-text: #09271e;
  --bingo-ball-highlight: #b8ffcf; --bingo-ball-highlight-stroke: #f1d892;
  --bingo-confetti-1: #55d69e; --bingo-confetti-2: #d8ffca; --bingo-confetti-3: #d8bc70;
}

.bingo-theme--opera-rubi {
  --bingo-accent: #f45c70; --bingo-accent-bright: #ffd0c8; --bingo-accent-2: #8c172b;
  --bingo-glow: rgba(238, 54, 79, .26); --bingo-panel: rgba(18, 3, 7, .93); --bingo-panel-soft: rgba(48, 7, 15, .78);
  --bingo-ball-fill: #fff0e6; --bingo-ball-shade: #d88983; --bingo-ball-stroke: #f7bd69; --bingo-ball-text: #3c0711;
  --bingo-ball-highlight: #ff7184; --bingo-ball-highlight-stroke: #ffd087;
  --bingo-confetti-1: #f45c70; --bingo-confetti-2: #ffd087; --bingo-confetti-3: #fff0e6;
}

.bingo-theme--eclipse-lunar {
  --bingo-accent: #9381ff; --bingo-accent-bright: #eee7ff; --bingo-accent-2: #46308d;
  --bingo-glow: rgba(137, 105, 255, .28); --bingo-panel: rgba(5, 5, 20, .93); --bingo-panel-soft: rgba(18, 12, 47, .8);
  --bingo-ball-fill: #f1efff; --bingo-ball-shade: #9d93cf; --bingo-ball-stroke: #c6b9ff; --bingo-ball-text: #17112f;
  --bingo-ball-highlight: #c8a8ff; --bingo-ball-highlight-stroke: #ffffff;
  --bingo-confetti-1: #9381ff; --bingo-confetti-2: #eee7ff; --bingo-confetti-3: #c86bff;
}

.bingo-theme--camara-zafiro {
  --bingo-accent: #378eff; --bingo-accent-bright: #d8efff; --bingo-accent-2: #17499e;
  --bingo-glow: rgba(42, 125, 255, .29); --bingo-panel: rgba(2, 7, 22, .94); --bingo-panel-soft: rgba(6, 28, 66, .8);
  --bingo-ball-fill: #edf7ff; --bingo-ball-shade: #7ea8d3; --bingo-ball-stroke: #6eb6ff; --bingo-ball-text: #071a36;
  --bingo-ball-highlight: #5ba3ff; --bingo-ball-highlight-stroke: #f5fbff;
  --bingo-confetti-1: #378eff; --bingo-confetti-2: #d8efff; --bingo-confetti-3: #7bceff;
}

.bingo-theme--forja-obsidiana {
  --bingo-accent: #e66e28; --bingo-accent-bright: #ffd0a0; --bingo-accent-2: #773016;
  --bingo-glow: rgba(255, 102, 26, .29); --bingo-panel: rgba(11, 5, 3, .94); --bingo-panel-soft: rgba(35, 13, 6, .82);
  --bingo-ball-fill: #ffe4c7; --bingo-ball-shade: #bb6c41; --bingo-ball-stroke: #ff8a3e; --bingo-ball-text: #321208;
  --bingo-ball-highlight: #ff9b4a; --bingo-ball-highlight-stroke: #ffe0ae;
  --bingo-confetti-1: #e66e28; --bingo-confetti-2: #ffd0a0; --bingo-confetti-3: #5c2d20;
}

.bingo-theme--aurora-boreal {
  --bingo-accent: #42dbc8; --bingo-accent-bright: #e4ffff; --bingo-accent-2: #167b83;
  --bingo-glow: rgba(58, 224, 207, .27); --bingo-panel: rgba(2, 13, 18, .93); --bingo-panel-soft: rgba(5, 39, 46, .78);
  --bingo-ball-fill: #f0ffff; --bingo-ball-shade: #79c9ca; --bingo-ball-stroke: #68f2e2; --bingo-ball-text: #062628;
  --bingo-ball-highlight: #84ffe9; --bingo-ball-highlight-stroke: #ffffff;
  --bingo-confetti-1: #42dbc8; --bingo-confetti-2: #e4ffff; --bingo-confetti-3: #55b9ff;
}

.bingo-theme--neon-imperial {
  --bingo-accent: #36e7ff; --bingo-accent-bright: #e8faff; --bingo-accent-2: #7139cc;
  --bingo-glow: rgba(82, 96, 255, .32); --bingo-panel: rgba(3, 3, 15, .94); --bingo-panel-soft: rgba(18, 7, 47, .82);
  --bingo-ball-fill: #dffbff; --bingo-ball-shade: #6c82db; --bingo-ball-stroke: #43efff; --bingo-ball-text: #0a1234;
  --bingo-ball-highlight: #df71ff; --bingo-ball-highlight-stroke: #7bf6ff;
  --bingo-confetti-1: #36e7ff; --bingo-confetti-2: #bd5cff; --bingo-confetti-3: #ff56d8;
}

@keyframes bingo-orbit-spin {
  to { transform: rotate(378deg) scaleY(.42); }
}

@keyframes bingo-orbit-spin-reverse {
  to { transform: rotate(-392deg) scaleY(.62); }
}

@keyframes bingo-number-match {
  0%, 100% { transform: translateY(-1px) scale(1.03); }
  48% { transform: translateY(-4px) scale(1.14); }
}

@media (max-width: 820px) {
  .bingo-showcase::before {
    background-image:
      linear-gradient(180deg, rgba(0, 0, 0, .3), #030405 72%),
      url("../images/cinematic/bingo/salon-dorado-mobile.webp");
  }

  .bingo-theme-grid { grid-template-columns: 1fr; }

  .bingo-theme-card__visual { min-height: min(58vw, 390px); }

  .bingo-showcase__footer {
    display: grid;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .bingo-theme .game-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(420px, 54dvh) auto;
    grid-template-areas: "stage" "panel";
  }

  .bingo-theme .stage { min-height: 420px; }

  .bingo-theme .sphere__canvas,
  .bingo-theme .sphere__img {
    width: min(540px, 93vw);
    max-width: 93vw;
  }

  .sphere__orbit { width: min(565px, 96vw); }

  .bingo-stage__halo { width: min(590px, 98vw); }

  .bingo-stage__plinth {
    bottom: 6%;
    width: min(500px, 84vw);
  }

  .bingo-theme .tray { bottom: 12px; }

  .bingo-theme .panel {
    min-height: auto;
    display: grid;
    grid-template-rows: auto auto auto;
  }

  .bingo-theme .picker-overlay {
    top: max(10px, env(safe-area-inset-top));
  }
}

@media (max-width: 520px) {
  .bingo-showcase { padding-inline: 11px; }
  .bingo-showcase__hero { padding-top: 58px; }
  .bingo-showcase__back { left: 14px; }
  .bingo-showcase__rules { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  .bingo-showcase__rules span { padding-inline: 8px; font-size: .69rem; }
  .bingo-theme-card { border-radius: 21px; }
  .bingo-theme-card__visual { min-height: 64vw; }
  .bingo-theme-card__copy { padding: 19px 18px 22px; }
  .bingo-theme-card__material { display: none; }
  .bingo-theme .stats { grid-template-columns: 1fr; }
  .bingo-theme .stats__result { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .bingo-theme-card,
  .bingo-theme-card__sphere,
  .bingo-theme-card__copy a b,
  .sphere__orbit {
    transition: none !important;
    animation: none !important;
  }

  .bingo-theme .picker__btn.is-bingo-match {
    animation: none !important;
    transform: translateY(-2px) scale(1.08);
  }
}