.stop[data-id=cave] { --face-light: #b99159; --face-dark: #5b422c; }
.inside-cave { opacity: 0; }
#cave-cinema {
  width: min(1000px, calc(100% - 24px));
  padding: 0;
  background: #201c1a;
  color: #f2e1bc;
  border: 2px solid #86735a;
  border-radius: 12px;
  max-height: 94dvh;
}
#cave-cinema::backdrop { background: #101d24e6; backdrop-filter: blur(7px); }
.cave-header { position: sticky; top: 0; z-index: 3; padding: 18px 24px; background: linear-gradient(#302a24, #201c1a); }
.cave-header .eyebrow { color: #bda47c; font-size: 8px; margin: 0; }
.cave-header h2 { font-size: 25px; margin: 5px 0 0; }
#leave-cave { min-height: 44px; padding: 8px 14px; border: 1px solid #947e5e; border-radius: 6px; background: #302b24; color: #fff0d2; white-space: nowrap; }
.cave-room { position: relative; aspect-ratio: 3/2; background: #211b17 url('cave-room.webp') center top / 100% auto no-repeat; }
#cave-screen { position: absolute; left: 26.8%; top: 19.5%; width: 46.4%; height: 31%; background: #080909; overflow: hidden; border-radius: 2px; scroll-margin-top: 95px; }
#cave-screen iframe { width: 100%; height: 100%; border: 0; display: block; }
.screen-welcome { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #e5d8b8; background: radial-gradient(ellipse, #253032 0, #080909 75%); }
.screen-welcome span { font-size: clamp(20px, 4vw, 40px); color: #cfaf79; }
.screen-welcome p { margin: 0; font-size: 12px; }
.cave-programme { padding: 0 24px 24px; }
#cave-status { font-size: 13px; line-height: 1.6; color: #d2c6b4; margin-top: 0; }
#cave-youtube { display: inline-block; font-size: 12px; margin-bottom: 18px; color: #f8d48e; }
#cave-films { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#cave-films button { min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 12px; text-align: left; color: #efdfbf; border: 1px solid #655640; border-radius: 5px; background: linear-gradient(145deg, #3a3228, #2b2621); font-size: 12px; line-height: 1.5; }
#cave-films button>span:first-child { color: #bda278; font: 12px 'Space Grotesk', sans-serif; }
#cave-films button[aria-pressed=true] { border-color: #f1c278; background: #53412b; }
#cave-cinema button:focus-visible, #cave-cinema a:focus-visible { outline-color: #ffd58a; }
.water-effects { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.water-flow { fill: none; stroke: #f1ffff; stroke-linecap: round; stroke-width: 2.6; stroke-dasharray: 7 19 2 27; opacity: .48; animation: water-fall 2.6s linear infinite; }
.water-flow.fine { stroke-width: 1.2; stroke-dasharray: 3 13 2 19; opacity: .65; animation-name: water-fall-fine; animation-duration: 1.65s; }
.water-mist { transform-box: fill-box; transform-origin: center; animation: water-mist 4.2s ease-in-out infinite alternate; opacity: .3; }
.water-effects.paused * { animation-play-state: paused; }
@keyframes water-fall { to { stroke-dashoffset: -110; } }
@keyframes water-fall-fine { to { stroke-dashoffset: -74; } }
@keyframes water-mist { to { opacity: .5; transform: translateY(-4px) scale(1.12); } }
@media(max-width:600px) {
  #cave-cinema { width: calc(100% - 12px); }
  .cave-header { padding: 14px; gap: 8px; }
  .cave-header h2 { font-size: 21px; }
  #leave-cave { padding: 8px 10px; font-size: 12px; }
  .cave-room { aspect-ratio: 1; background-size: 200% auto; }
  #cave-screen { left: 3.6%; top: 26%; width: 92.8%; height: 41.3%; }
  .cave-room:has(iframe) #cave-screen { height: auto; aspect-ratio: 16/9; top: 24%; box-shadow: 0 0 0 5px #5c4129; }
  .cave-programme { padding: 0 14px 18px; }
  #cave-films { grid-template-columns: 1fr; }
}
@media(prefers-reduced-motion:reduce) { .water-effects * { animation: none !important; } }