/* Tropical art direction; independent of reel mathematics and character powers. */
body{background:linear-gradient(#023c3899,#012c2dcc),url('./assets/tropical-lagoon-v1-q92.webp') center/cover fixed}
.game{background:#0a5148;--gold:#ffe19a;--text:#fff8de;box-shadow:0 0 80px #002923bb}
.topbar{background:linear-gradient(#00392fe6,transparent)}
.brand{color:#fff0b1}
.jackpot{background:linear-gradient(110deg,#064d45,#167e69,#064d45);border-color:#e3c67e;box-shadow:inset 0 -5px 18px #002e3544}
.hero{background:linear-gradient(90deg,#023a4070,transparent 60%),url('./assets/tropical-lagoon-v1-q92.webp') center 53%/cover}
.hero-copy{background:#053f399c;border-radius:12px;padding:5px;left:2%;width:29%;top:12%;text-shadow:0 1px 3px #002f29}
.hero h1{color:#fff1be}.hero p{color:#f2ffe9}
.change-character{background:#087664;border-color:#d6cd89}
.crew button{background:#168371}.crew button.active{box-shadow:0 0 0 2px #ffe49b,0 2px 12px #002b29}
.collection{background:linear-gradient(#187d65,#075744);border-color:#f0d696;box-shadow:0 3px 10px #002f3477}
.reel-frame{padding:10% 10%;background:linear-gradient(#0d735bbf,#075541e6),url('./assets/tropical-lagoon-v1-q92.webp') center/cover;border-radius:12px}
.reel-trim{background-image:url('./assets/tropical-frame-v1-q92.webp');background-size:100% 100%}
.reels{background:#0f624e;border-radius:8px;gap:6px;box-shadow:inset 0 0 20px #003e32}
.reel-column,.reel-column:not(:last-child){background:linear-gradient(#12694f,#208166 50%,#105b48)}
.reels:after{background-image:linear-gradient(90deg,#527342,#e3d29b,#597a43),linear-gradient(90deg,#527342,#e3d29b,#597a43);background-size:6px 100%;box-shadow:inset 0 0 12px #004a34}
.symbol>.sprite,.symbol>.portrait{height:74%;max-width:82%}
.message{background:linear-gradient(90deg,#086857,#138974,#086857);border:1px solid #d9ca86;border-radius:10px;color:#fff1b9;margin:0 2%;font-size:.95em}
.hud{background:linear-gradient(#08705c,#064f45);border:1px solid #ddce91;box-shadow:inset 0 1px 0 #fff2;margin-top:2px}
.controls{background:linear-gradient(#0a6554,#05473d);border:0}
.spin-button{background:radial-gradient(circle at 35% 25%,#ffdd84,#ec9c3c 55%,#aa6024);color:#fff8d0;border-color:#fff0b1;box-shadow:0 0 0 2px #8c692a,0 0 0 4px #d8c179,inset 0 2px 4px #fff8,inset 0 -5px 12px #7a471c88}
.round-button{background:#0a7460;border-color:#dacb8c}.round-button[aria-pressed=true]{background:#ffc974;color:#104b3a}
.bets button{background:#065b4c;border-color:#b8c28c}.bets button.active{background:#f1c576;color:#164b3b}
footer{background:#06473e;border:0;color:#eff6d7}footer span{color:#b7d9c9}
dialog{background:linear-gradient(#06483bea,#073d33f7),url('./assets/tropical-lagoon-v1-q92.webp') center/cover;border-color:#ebd598;box-shadow:0 15px 70px #002923c9}
dialog::backdrop{background:#012f36b8}
.sheet-heading p,.sheet-note,#prize-description{color:#d0e8d8}
.character-card{background:linear-gradient(#278c6b,#0d5444);border-color:#a8c08b}.character-card:not(:disabled):hover{background:#20896e;border-color:#ffe19a}
.bonus-pearl{background:radial-gradient(circle at 35% 25%,#b3ecd3,#278d7b 60%,#075346);border-color:#eddfa9}
#win-toast{background:radial-gradient(ellipse at top,#269e77,#064f43);border-color:#ffe4a1;box-shadow:0 8px 35px #002e35ba,0 0 25px #ffe29633}
.overlay{background:linear-gradient(#064c4066,#003b39e8),url('./assets/tropical-lagoon-v1-q92.webp') center/cover}
.intro-logo strong{color:#fff1b3;text-shadow:0 3px 0 #195b42,0 6px 12px #003d32}.intro-logo small,.intro-logo p{color:#e8f7d9}
@media(max-width:420px){.reel-frame{padding:10% 10%}}

/* Illustrated tropical dock and independent toggle state. */
.controls{background:#064c3d url('./assets/tropical-dock-v1-q92.webp') center/100% 100% no-repeat;gap:13%;padding:0 0 8px}
#turbo,#auto{width:auto;height:72%;max-height:none;flex-shrink:0;aspect-ratio:1;border:0;border-radius:50%;padding:0;background-color:transparent;background-image:url('./assets/tropical-controls-v1-q92.webp');background-size:200% 100%;background-repeat:no-repeat;font-size:0;box-shadow:none;filter:drop-shadow(0 2px 3px #00281c);transition:filter .15s,transform .15s}
#turbo{background-position:0% 50%}#auto{background-position:100% 50%}
#turbo small,#auto small{font-size:clamp(8px,1.1dvh,11px);bottom:-11px;color:#fff0be;letter-spacing:.06em;line-height:1.2;text-shadow:0 1px 3px #002b1c}
#turbo[aria-pressed=true],#auto[aria-pressed=true]{filter:brightness(1.22) drop-shadow(0 0 5px #ffe478)}
#turbo[aria-pressed=true]:after,#auto[aria-pressed=true]:after{content:'';position:absolute;right:3%;top:3%;width:13%;height:13%;border-radius:50%;background:#fff2a3;border:1px solid #2f5b29;box-shadow:0 0 6px #ffdf68}
#turbo:active,#auto:active{transform:scale(.94)}
.controls .spin-area{height:82%}.controls .bets{top:3%;right:3%}.controls .bets button{font-size:.57em;padding:2px 5px;background:#073d30e8}
footer{border-bottom:2px solid #b99d55;background:#033e32}
@media(prefers-reduced-motion:reduce){#turbo,#auto{transition:none}}
.controls .bets button.active{background:#f1c576;color:#164b3b}

/* Integrate the studio mark with the tropical backdrop. */
.intro-logo .studio-logo{mix-blend-mode:screen;filter:brightness(1.08);object-fit:contain}

/* Show the tropical scenery through the reel windows. */
#game .reel-frame{background:url('./assets/tropical-lagoon-v1-q92.webp') center 62%/cover no-repeat}
#game .reels,#game .reel-column,#game .reel-column:not(:last-child){background:transparent;box-shadow:none}
#game .reels:after{box-shadow:none}
.intro-logo .studio-logo{mix-blend-mode:normal;filter:none}

/* Open backdrop and expanded character scene, without the last-win banner. */
#game.game{background:transparent;box-shadow:none}
#game>.jackpot{display:none}
#game>.hero{height:30%}

/* 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}

#game .collection{background:transparent url('./assets/collection-panel-v2.webp') center/100% 100% no-repeat;border:0;box-shadow:none;border-radius:0;padding:7px 14%;left:10%;width:80%}
#choose .character-options button{background:transparent url('./assets/choice-card-v2.webp') center/100% 100% no-repeat;border:0;border-radius:0;padding:5% 6%;box-shadow:none}
#choose .character-options button:focus-visible{outline:2px solid #fff0a8;outline-offset:2px}

#intro.overlay{background:#000}#intro .studio-logo{width:150px;max-width:35vw;height:auto;object-fit:contain}#intro .intro-logo{width:100%;text-align:center}#intro strong{font-size:clamp(24px,5vw,40px)}
#choose .character-options{display:grid;grid-template-columns:1fr;gap:10px}#choose .character-options .character-card{display:grid;grid-template-columns:23% 1fr;grid-template-rows:1fr 1fr;align-items:center;min-height:110px;padding:12px 8%;column-gap:8%;text-align:center;aspect-ratio:4/1}#choose .character-card .portrait{grid-column:1;grid-row:1/3;width:100%;height:auto;max-height:100%;object-fit:contain}#choose .character-card strong{grid-column:2;grid-row:1;font-size:1.2em;align-self:end}#choose .character-card small{grid-column:2;grid-row:2;font-size:.82em;align-self:start;margin-top:5px}#choose{max-height:92dvh;overflow:auto}

/* Keep the hero and reels on one lagoon backdrop, with the mascot at the frame. */
#game.game{background:#073c30 url('./assets/tropical-lagoon-v1-q92.webp') center top/auto 100% no-repeat}
#game>.hero,#game .reel-frame{background:transparent}
#game>.hero{overflow:visible;z-index:4}
#game .hero-actor{bottom:-7%;clip-path:none}
#game .reel-frame{z-index:3}
#game .reels,#game .reel-column,#game .reel-column:not(:last-child){background:transparent}
/* The portrait sits at the visual centre of the round opening in the card art. */
#choose .character-options .character-card{position:relative;grid-template-columns:27% 1fr}
#choose .character-options .character-card .portrait{position:absolute;left:2.6%;top:50%;transform:translateY(-50%);width:22%;height:auto;max-height:none;aspect-ratio:1;grid-column:auto;grid-row:auto}
#choose .character-options .character-card strong,#choose .character-options .character-card small{grid-column:2}
#game>.hero,#game .reel-frame{background-image:none!important}

/* Match Fortune's spin art size; keep winning lines above the decorative trim. */
#game .controls .spin-area{height:clamp(68px,12dvh,92px);z-index:4}
#game .controls .spin-button{width:100%;height:100%}
#game .reel-frame .winning-lines{z-index:10!important}