/* Fortune tropical presentation; no changes to game mathematics. */
.hero{position:relative;overflow:hidden;background:url('./assets/tropical-lagoon-v1-q92.webp') center 53%/cover}
.title{z-index:2;text-shadow:0 2px 4px #002d27,0 0 14px #002d27}.title h1{font-size:clamp(17px,3dvh,26px)}.title em{font-size:clamp(22px,3.8dvh,32px)}
.hero-label{z-index:2;text-shadow:0 1px 4px #002b24}
.capy-actor{position:absolute;left:58%;bottom:-7%;height:113%;aspect-ratio:.75;background:url('./assets/fortune-poses-v1-q92.webp') 0% 50%/400% 100% no-repeat;transform-origin:50% 85%;animation:capy-breathe 3s ease-in-out infinite;filter:drop-shadow(0 3px 5px #043d2755);pointer-events:none}
.spinning .capy-actor{background-position:33.333% 50%;animation:capy-watch .7s ease-in-out infinite}
#game:has(#prize:not([hidden])) .capy-actor{background-position:66.667% 50%;animation:capy-celebrate .6s ease-in-out infinite}
.board{padding:9% 10%;background:#115a43;border-radius:10px}.bamboo-frame{background-image:url('./assets/tropical-frame-v1-q92.webp')}
#reels{border-radius:8px}.column{border-right:3px solid #c4c07a}.sprite{width:76%}
.controls{background:#054835 url('./assets/tropical-dock-v1-q92.webp') center/100% 100% no-repeat;padding:7px 8% 6px}
.round{border:0;background-color:transparent;background-image:url('./assets/tropical-controls-v1-q92.webp');background-repeat:no-repeat;background-size:200% 100%;font-size:0;height:78%;box-shadow:none;position:relative}
#turbo{background-position:0% 50%}#auto{background-position:100% 50%}
.round[aria-pressed=true]{background-color:transparent;color:transparent;box-shadow:none;filter:brightness(1.22) drop-shadow(0 0 5px #ffe478)}
.round[aria-pressed=true]:after{content:'';position:absolute;top:3%;right:3%;width:13%;height:13%;border-radius:50%;background:#fff2a3;border:1px solid #2f5b29;box-shadow:0 0 6px #ffdf68}
#spin{background:radial-gradient(circle at 35% 25%,#ffdd84,#ec9c3c 55%,#aa6024);border-color:#fff0b1;box-shadow:0 0 0 3px #ad8a48,inset 0 2px 4px #fff8;color:#fff5c3}#spin small{display:none}
.bets button{background:#07503deb;border-color:#bcb776}.bets button.active{background:#edcc84;color:#164b3b}
.links button{color:#fff0be;text-shadow:0 1px 3px #002b1c}
@keyframes capy-breathe{0%,100%{transform:translateX(-50%) rotate(-1deg)}50%{transform:translateX(-50%) translateY(1.5%) rotate(1deg)}}
@keyframes capy-watch{0%,100%{transform:translateX(-50%) translateY(1%)}50%{transform:translateX(-50%) translateY(3%) rotate(1deg)}}
@keyframes capy-celebrate{0%,100%{transform:translateX(-50%) rotate(-3deg)}50%{transform:translateX(-50%) translateY(-3%) rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.capy-actor,.spinning .capy-actor,#game:has(#prize:not([hidden])) .capy-actor{animation:none;transform:translateX(-50%)}}

#game:has(#prize:not([hidden])):has(#free:not(:empty)) .capy-actor{background-position:100% 50%}

/* Continue the same river scene beneath the mascot and reel frame. */
.hero-label{display:none}.board{background: url("./assets/tropical-lagoon-v1-q92.webp") center 70%/cover;border-radius:0;margin-top:0}.hero{margin-bottom:0}#game header #sound{font-size:12px;min-width:90px;white-space:nowrap}

/* Shared illustrated controls with live labels kept accessible. */
#game #spin{background:transparent url('./assets/spin-tropical-v2.webp') center/contain no-repeat!important;border:0!important;box-shadow:none!important;color:transparent}
#game #spin>*{visibility:hidden}#spin-label{display:none!important}
.capy-actor{bottom:-13%}

/* One continuous river scene sits behind both the mascot and reel windows. */
#game{background:#07382c url('./assets/tropical-lagoon-v1-q92.webp') center top/auto 100% no-repeat}
#game .hero,#game .board{background:transparent}
#game .hero{overflow:visible;z-index:auto}
#game .board{z-index:3}
#game .capy-actor{bottom:-22%;height:118%;z-index:1}
/* The frame covers the body. A masked copy places only the paws in front of its top rail. */
#game .capy-paws{position:absolute;left:58%;bottom:-22%;height:118%;aspect-ratio:.75;z-index:5;pointer-events:none;background:url('./assets/fortune-poses-v1-q92.webp') 0% 50%/400% 100% no-repeat;animation:capy-breathe 3s ease-in-out infinite;mask-image:radial-gradient(ellipse 16% 9% at 30% 79%,#000 75%,transparent 100%),radial-gradient(ellipse 17% 9% at 70% 79%,#000 75%,transparent 100%)}
#game.spinning .capy-paws{background-position:33.333% 50%;animation:capy-watch .7s ease-in-out infinite;mask-image:radial-gradient(ellipse 19% 10% at 24% 66%,#000 75%,transparent 100%),radial-gradient(ellipse 19% 10% at 73% 73%,#000 75%,transparent 100%)}
#game.spinning .capy-actor,#game.spinning .capy-paws{bottom:-25%}
#game:has(#prize:not([hidden])) .capy-paws{display:none}
@media(prefers-reduced-motion:reduce){#game .capy-paws,#game.spinning .capy-paws{animation:none;transform:translateX(-50%)}}

/* Winning lines stay on the reels, behind the credited-win announcement. */
#game .board #prize{z-index:10}
/* The shared lagoon is painted only once, on the game stage. */
#game .hero,#game .board{background-image:none!important}
#game #turbo[aria-pressed=true],#game #auto[aria-pressed=true]{background-image:url('./assets/tropical-controls-v1-q92.webp');background-size:200% 100%;background-repeat:no-repeat}
#game #turbo[aria-pressed=true]{background-position:0 50%}
#game #auto[aria-pressed=true]{background-position:100% 50%}
@media(max-width:420px){#game header>a{display:none}}
