/* Bioluminescence. All rules scoped under .bl-* */
.bl-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bl-cap { font-size: 13px; color: var(--dim); text-align: center; max-width: 320px; }
.bl-photo { width: 100%; display: grid; place-items: center; }
.bl-photo img { width: 100%; max-width: 380px; max-height: 36vh; object-fit: contain; border-radius: 16px; display: block; }

/* the water */
.bl-sea { position: relative; width: 100%; height: 300px; border-radius: 16px; overflow: hidden; touch-action: none; }
.bl-sea canvas { width: 100%; height: 100%; display: block; cursor: pointer; }
.bl-hint { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 13px; font-weight: 700; color: rgba(200,220,245,.55); pointer-events: none; transition: opacity .4s; }
.bl-sea.go .bl-hint { opacity: 0; }

/* two glasses */
.bl-glasses svg { width: 100%; max-width: 340px; display: block; margin: 0 auto; }
.bl-cup { fill: none; stroke: rgba(234,227,215,.55); stroke-width: 2.5; }
.bl-liq { fill: #2A3345; transition: fill .5s, filter .5s; }
.bl-glass.lit .bl-liq { fill: #7FE6FF; filter: drop-shadow(0 0 10px rgba(90,210,255,.9)); }
.bl-glass.b .bl-liq { transition: transform .7s ease-in, opacity .7s; transform-box: fill-box; transform-origin: 50% 100%; }
.bl-glasses.pour .bl-glass.b .bl-liq { transform: scaleY(0); opacity: 0; }
.bl-glasses text { fill: var(--text); font: 700 14px var(--sans); }

/* seen from below */
.bl-below { position: relative; width: 100%; }
.bl-below svg { width: 100%; max-width: 380px; display: block; margin: 0 auto; border-radius: 16px; }
.bl-rays path { stroke: rgba(255,255,255,.05); stroke-width: 18; }
.bl-seen { position: absolute; top: 10px; right: calc(50% - min(50%, 190px) + 10px); padding: 4px 10px; border-radius: 99px; font-size: 13px; font-weight: 800; background: rgba(10,14,26,.7); }
.bl-seen.ok { color: var(--mint); }
.bl-seen.mid { color: var(--gold); }
.bl-seen.no { color: var(--red); }

/* anglerfish */
.bl-angler svg { width: 100%; max-width: 360px; display: block; margin: 0 auto; border-radius: 16px; background: #050A14; }
.bl-af { fill: #3A2E2A; stroke: #5A4A42; stroke-width: 1.5; }
.bl-stalk { fill: none; stroke: #5A4A42; stroke-width: 2.5; }
.bl-lure { fill: #BFF3FF; filter: drop-shadow(0 0 8px rgba(120,230,255,.95)); animation: blPulse 1.2s ease-in-out 3 alternate; }
.bl-tooth { fill: none; stroke: #E9E2D2; stroke-width: 1.5; }
.bl-prey { fill: #8FA5B8; }
@keyframes blPulse { from { opacity: .45; } to { opacity: 1; } }

/* burglar alarm */
.bl-alarm svg { width: 100%; max-width: 380px; display: block; margin: 0 auto; border-radius: 16px; }
.bl-big { fill: #8FA5B8; transition: transform 1.1s cubic-bezier(.5,0,.3,1) .4s; }
.bl-alarm.go .bl-big { transform: translate(-130px, 76px); }
.bl-cope { fill: #C9B79A; stroke: #C9B79A; stroke-width: 1.5; transition: fill .3s; }
.bl-alarm.go .bl-cope { fill: #9FF0FF; filter: drop-shadow(0 0 8px rgba(90,210,255,.9)); }
.bl-dots circle { fill: #2D4A66; }
.bl-alarm.go .bl-dots circle:nth-child(-n+3) { fill: #9FF0FF; filter: drop-shadow(0 0 5px rgba(90,210,255,.9)); }
.bl-alarm text { fill: var(--dim); font: 700 15px var(--sans); }

/* 94 */
.bl-n { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bl-n b { font: 800 44px/1 var(--sans); color: #8FE3FF; }
.bl-n span { font-size: 14px; color: var(--dim); }
.bl-dots94 { width: 100%; max-width: 250px; display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.bl-dots94 i { aspect-ratio: 1; border-radius: 50%; background: var(--raised); transition: background .2s, box-shadow .2s; }
.bl-dots94 i.on { background: #6FD8FF; box-shadow: 0 0 6px rgba(90,210,255,.8); }
.bl-dots94 i.on:nth-child(5n+2) { background: #C8F56A; box-shadow: 0 0 6px rgba(190,240,90,.7); }
.bl-dots94 i.on:nth-child(7n+3) { background: #5A8CFF; box-shadow: 0 0 6px rgba(90,140,255,.8); }

/* depth */
.bl-depth { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 12px; }
.bl-sw { display: flex; align-items: center; gap: 12px; }
.bl-sw i { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 24px rgba(255,255,255,.12); flex: none; }
.bl-sw span { font: 800 22px var(--sans); color: var(--text); }
.bl-bars { display: flex; flex-direction: column; gap: 8px; }
.bl-bar { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text); }
.bl-bar div { height: 14px; border-radius: 7px; background: var(--raised); overflow: hidden; }
.bl-bar i { display: block; height: 100%; border-radius: 7px; }
.bl-bar.r i { background: #E5534B; }
.bl-bar.g i { background: #58C46A; }
.bl-bar.b i { background: #4C8DFF; }

@media (max-height: 700px) {
  .bl-photo img { max-height: 28vh; }
  .bl-sea { height: 240px; }
}