/* v173: afzonderlijke zoek- en kiescamera voor luisterbingo */
.underwater-bingo .underwater-stage{background:none}
.underwater-bingo .bingo-scene-bg{position:absolute;z-index:0;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;transition:opacity .55s ease,transform .75s cubic-bezier(.22,.72,.28,1);will-change:opacity,transform}
.underwater-bingo .bingo-search-bg{background-image:url('assets/bingo/underwater-reef-16-v173.webp');opacity:1;transform:scale(1)}
.underwater-bingo .bingo-match-bg{background-image:url('assets/bingo/underwater-bingo-bg-v151.webp');opacity:0;transform:scale(1.04)}
.underwater-bingo[data-bingo-view="match"] .bingo-search-bg{opacity:0;transform:scale(1.055)}
.underwater-bingo[data-bingo-view="match"] .bingo-match-bg{opacity:1;transform:scale(1)}

.underwater-bingo .reef-side{z-index:7;inset:0;transform-origin:40% 52%;transition:opacity .42s ease,transform .62s cubic-bezier(.22,.72,.28,1)}
.underwater-bingo[data-bingo-view="reef"] .reef-side{opacity:1;transform:none;pointer-events:auto}
.underwater-bingo[data-bingo-view="match"] .reef-side{opacity:0;transform:translateX(-10%) scale(.92);pointer-events:none}
.underwater-bingo[data-bingo-view="reef"] .reef-oyster{width:clamp(104px,9.8vw,174px);height:clamp(76px,7.4vw,130px)}
.underwater-bingo[data-bingo-view="reef"] .reef-oyster.open,
.underwater-bingo[data-bingo-view="reef"] .reef-oyster.done{width:clamp(114px,10.6vw,188px);height:clamp(84px,8vw,142px)}

.underwater-bingo .bubble-card{--bingo-board-size:min(56vw,calc(100vh - 90px));right:1%;top:50%;width:var(--bingo-board-size);height:var(--bingo-board-size);aspect-ratio:1/1;transform:translateY(-50%);transition:opacity .4s ease,transform .65s cubic-bezier(.22,.72,.28,1);transform-origin:78% 50%}
.underwater-bingo[data-bingo-view="reef"] .bubble-card{opacity:0;transform:translate(108%,-50%) scale(.92);pointer-events:none}
.underwater-bingo[data-bingo-view="match"] .bubble-card{opacity:1;transform:translateY(-50%);pointer-events:auto}

.underwater-bingo .word-pearl{left:22%;top:43%;transition:opacity .3s ease,transform .52s cubic-bezier(.2,.85,.25,1)}
.underwater-bingo[data-bingo-view="reef"] .word-pearl{opacity:0!important;transform:translate(-50%,-50%) scale(.58);pointer-events:none}
.underwater-bingo[data-bingo-view="match"] .word-pearl.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}

.underwater-bingo .bingo-instruction{z-index:22;left:50%;bottom:1.7%;transition:left .55s ease,transform .55s ease}
.underwater-bingo[data-bingo-view="match"] .bingo-instruction{left:22%;transform:translateX(-50%)}
.underwater-bingo[data-bingo-view="reef"] .game-treasure{
  left:9.5%;
  bottom:2.6%;
  z-index:5;
  width:clamp(155px,14vw,265px);
  opacity:1;
  transform:translateX(-50%);
  filter:drop-shadow(0 11px 8px rgba(0,24,37,.48));
  pointer-events:none;
}
.underwater-bingo[data-bingo-view="reef"] .game-treasure.hidden{opacity:0}
.underwater-bingo[data-bingo-view="reef"] .game-foreground-rock{opacity:0;pointer-events:none}

/* De parel gebruikt altijd het wiskundige middelpunt van de vierkante luchtbelcel. */
.underwater-bingo .bubble-cell .pearl-mark{
  inset:auto;
  left:50%;
  top:50%;
  width:76%;
  height:auto;
  aspect-ratio:1/1;
  margin:0;
  transform:translate(-50%,-50%);
  transform-origin:center;
}
.underwater-bingo .bubble-cell .pearl-mark strong{position:absolute;left:50%;top:50%;width:76%;max-width:76%;transform:translate(-50%,-50%)}

@media (orientation:landscape) and (max-height:820px){
  .underwater-bingo .bubble-card{--bingo-board-size:min(57vw,calc(100vh - 72px));right:.35%;top:50%}
  .underwater-bingo .word-pearl{left:21%;top:42%;width:clamp(132px,14vw,205px);height:clamp(132px,14vw,205px);min-width:clamp(132px,14vw,205px);min-height:clamp(132px,14vw,205px)}
  .underwater-bingo[data-bingo-view="match"] .bingo-instruction{left:21%}
}

@media(max-width:900px){
  .underwater-bingo[data-bingo-view="reef"] .reef-oyster{width:clamp(74px,10vw,112px);height:clamp(54px,7.5vw,84px)}
  .underwater-bingo[data-bingo-view="reef"] .reef-oyster.open,
  .underwater-bingo[data-bingo-view="reef"] .reef-oyster.done{width:clamp(82px,11vw,124px);height:clamp(61px,8.2vw,92px)}
}

@media(prefers-reduced-motion:reduce){.underwater-bingo .bingo-scene-bg,.underwater-bingo .reef-side,.underwater-bingo .bubble-card,.underwater-bingo .word-pearl{transition-duration:.12s}}