.board>svg{width:100%;aspect-ratio:var(--board-ratio,860/790);height:auto}.board{overflow:hidden}.cinema[hidden]{display:none}.cinema{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:18px;background:#183d28bc;backdrop-filter:blur(5px)}.cinema-card{width:min(570px,100%);overflow:hidden;background:linear-gradient(120deg,#fff1c8,#e9c18b);border:8px solid #b78348;border-top-color:#edbd75;border-radius:28px;box-shadow:0 8px #68472a,0 25px 90px #102b2999;text-align:center;color:#604120}.cinema-card h2{font-size:clamp(21px,4vw,29px);margin:17px 10px 4px;font-weight:900}.cinema-card p{margin:5px 12px 15px;font-weight:800}.cinema-card button{margin:10px 0 15px;padding:8px 20px;border-radius:12px;border:2px solid #f6dfab;background:#8eb84e;color:#244b23;font:inherit;font-weight:800;cursor:pointer}.scene{height:clamp(220px,45vw,340px);position:relative;overflow:hidden;background:#c2df87;isolation:isolate}.scene-back{position:absolute;inset:0;background:linear-gradient(#d7f3ff88,transparent 55%),url('assets/park.webp') center/cover;animation:scene-pan 4s ease-out both}.scene:after{content:'';position:absolute;inset:0;box-shadow:inset 0 -15px 30px #345d2922;pointer-events:none}.scene-illustration{position:absolute;width:75%;height:110%;left:13%;top:0;filter:drop-shadow(0 5px 4px #3b512b44);opacity:.9}.scene-actor{position:absolute;width:43%;height:85%;left:5%;top:15%;filter:drop-shadow(0 7px 3px #263d2855);transform-origin:50% 85%;animation:actor-walk 4s both}.scene-actor svg{width:100%;height:100%}.scene-water{display:none;position:absolute;left:0;right:0;bottom:-5%;height:39%;background:repeating-radial-gradient(ellipse at 50% 0,#75d7e7dd 0 12px,#40a7cddd 14px 22px);border-radius:48% 40% 0 0;z-index:2}.scene-water:after{content:'';position:absolute;inset:15% 10%;border-top:3px solid #d0faff;border-radius:50%;animation:ripple 1s infinite}.scene-water~.scene-prop{position:absolute;font-size:55px;right:18%;top:23%;animation:prop-pop 4s both}.scene-water~.scene-spray{position:absolute;inset:0;z-index:3;pointer-events:none}.scene-spray i{position:absolute;left:54%;top:65%;width:12px;height:23px;background:#b4f8ff;border:2px solid #4ab5d4;border-radius:60% 40% 60% 40%;opacity:0}.scene-water+.scene-prop:empty{display:none}.scene-water .scene-prop{display:none}.scene-water~.scene-spray i:nth-child(2){--dx:-110px;--dy:-80px}.scene-water~.scene-spray i:nth-child(3){--dx:90px;--dy:-100px}.scene-water~.scene-spray i:nth-child(4){--dx:-55px;--dy:-130px}.scene-water~.scene-spray i:nth-child(5){--dx:135px;--dy:-45px}.scene-water~.scene-spray i:first-child{--dx:30px;--dy:-160px}.scene-water{animation:water-sway 1.4s ease-in-out infinite alternate;border-top:3px solid #d1fbff}.scene-water~.scene-prop{z-index:4;line-height:1}.scene-water~.scene-spray{overflow:hidden}
.scene.scene-splash .scene-water{display:block}.scene.scene-splash .scene-actor{animation:actor-splash 4s both}.scene.scene-splash .scene-spray i{animation:drop 4s both}.scene-mud .scene-water{display:block;background:radial-gradient(ellipse,#795234,#4b3725);border-color:#9e774b;height:26%;bottom:0}.scene-mud .scene-water:after{border-color:#b58e68}.scene-mud .scene-actor{animation:actor-mud 4s both}.scene-coffee .scene-actor{animation:actor-coffee 4s both}.scene-tools .scene-actor{animation:actor-tools 4s both}.scene-hedge .scene-actor{animation:actor-hedge 4s both}.scene-bridge .scene-actor{animation:actor-bridge 4s both}.scene-hedge .scene-back{filter:saturate(1.3)}.scene-progress{height:5px;background:#7ca941;transform-origin:left;animation:progress 4s linear both}
@keyframes scene-pan{from{transform:scale(1.12)}to{transform:scale(1.03)}}@keyframes actor-walk{to{left:48%}}@keyframes actor-splash{0%{transform:translate(0,0)}20%{transform:translate(85px,-12px) rotate(12deg)}35%{transform:translate(145px,90px) rotate(65deg)}48%{transform:translate(145px,180px) rotate(30deg)}64%{transform:translate(145px,90px) rotate(-8deg)}100%{transform:translate(145px,90px) rotate(0)}}@keyframes drop{0%,25%,65%,100%{opacity:0;transform:translate(0,0) scale(.4)}35%{opacity:1}55%{opacity:.8;transform:translate(var(--dx),var(--dy)) rotate(40deg) scale(1.2)}}@keyframes ripple{to{transform:scaleX(1.15);opacity:.3}}@keyframes water-sway{to{transform:translateY(4px)}}@keyframes actor-bridge{0%{left:0;transform:rotate(-5deg)}45%{left:30%;transform:translateY(-35px) rotate(5deg)}100%{left:60%;transform:translateY(0)}}@keyframes actor-coffee{0%{transform:translateX(0)}30%,65%{transform:translateX(90px) rotate(-8deg)}80%{transform:translateX(90px) rotate(5deg)}100%{transform:translateX(90px)}}@keyframes actor-mud{0%{transform:translateX(0)}30%{transform:translate(110px,45px)}45%,65%,85%{transform:translate(110px,30px) rotate(-8deg)}55%,75%,100%{transform:translate(110px,45px) rotate(8deg)}}@keyframes actor-hedge{0%{left:0}30%{left:45%;transform:scaleX(1)}45%{left:45%;transform:scaleX(-1)}75%{left:10%;transform:scaleX(-1)}100%{left:10%;transform:scaleX(1)}}@keyframes actor-tools{0%{transform:translateX(0)}30%{transform:translateX(90px) rotate(-15deg)}40%{transform:translateX(90px) rotate(15deg)}50%,80%{transform:translateX(90px) rotate(-5deg)}100%{transform:translateX(90px)}}@keyframes prop-pop{0%,30%{opacity:0;transform:scale(.3)}45%,100%{opacity:1;transform:scale(1)}}@keyframes progress{to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.scene *,.scene-progress{animation:none!important}.scene-actor{left:30%}.scene.scene-splash .scene-actor{transform:translateY(80px)}}
.scene>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:8;opacity:0;background:#d3e999}.scene.has-video>video{opacity:1}.scene.has-video>:not(video){visibility:hidden}.cinema-card button+button{margin-left:10px}.cinema-card{max-height:calc(100dvh - 36px);overflow:auto}
.scene>video{object-fit:contain}
.scene-rosarium .scene-back{background:url("assets/rosarium-poster.png") center/cover;animation:none}.scene-portrait .scene-illustration,.scene-portrait .scene-actor{display:none}
.cinema-card:has(.scene-portrait){width:min(390px,100%)}.scene-portrait{height:min(61dvh,560px);background:#173d2c}.scene-portrait>video{object-fit:contain}
.cinema:has(.scene-portrait){padding:0;background:#071c13}.cinema-card:has(.scene-portrait){position:relative;width:min(100%,calc(100dvh * 9 / 16));height:100dvh;max-height:100dvh;border:0;border-radius:0;overflow:hidden;background:#071c13}.scene-portrait{position:absolute;inset:0;height:100%;background:#071c13}.scene-portrait>video{object-fit:contain}.cinema-card:has(.scene-portrait)>h2{position:absolute;z-index:10;top:max(9px,env(safe-area-inset-top));left:0;right:0;margin:0;padding:12px 8px;color:#fff7df;font-size:19px;text-shadow:0 2px 5px #000;background:linear-gradient(#071c13dd,transparent)}.cinema-card:has(.scene-portrait)>p{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.cinema-card:has(.scene-portrait)>.scene-progress{position:absolute;z-index:10;bottom:69px;left:12px;right:12px;width:calc(100% - 24px)}.cinema-card:has(.scene-portrait)>button{position:absolute;z-index:10;bottom:max(12px,env(safe-area-inset-bottom));left:12px;margin:0;padding:10px 15px;font-size:14px}.cinema-card:has(.scene-portrait)>button:last-child{left:auto;right:12px;margin:0}