/* I45 original unified deck: the game remains a portrait canvas on all screens. */
.game{--dark:#082427;--accent:#14b9b0;--edge:#8f693d;background:#061c22}
.scene{background:radial-gradient(ellipse at 50% 26%,#17464a,#051c25 78%)}
.stage{height:53cqw;flex:none;background:transparent;overflow:visible;z-index:2}
.stage img,.stage video{width:100%;height:56cqw;left:0;top:0;object-fit:cover;object-position:center;mask-image:linear-gradient(#000 75%,transparent 100%)}
.stageShade{background:linear-gradient(0deg,#06252c 0,transparent 35%),linear-gradient(90deg,#08353d65,transparent 52%)}
.game.caribbean .stageShade{display:none}
.gameTitle{left:3.5cqw;top:12cqw;width:37cqw;transform:rotate(-5deg)}
@media (prefers-reduced-motion: no-preference){#heroVideo.active~.gameTitle{opacity:0}#heroSpin.active~.gameTitle{opacity:0}#heroVideo.active[src="assets/caribbean/captain-celebration-v1.mp4"]~.lootDock .lootCache,#heroVideo.active[src="assets/caribbean/celebration-tier2-v2.mp4"]~.lootDock .lootCache,#heroSpin.active~.lootDock .lootCache{opacity:0}}
.gameTitle span{font-size:7.4cqw}.gameTitle strong{font-size:8.6cqw}.gameTitle:after{font-size:1.65cqw;margin-top:1.6cqw}
.stageCue{left:40%;right:3%;bottom:1.2cqw;font-family:Inter,Arial,sans-serif;font-size:2.6cqw;line-height:1.2;text-align:right}
.featureBar{height:6.8cqw;min-height:26px;flex:none;margin:-1cqw 4cqw 0;gap:3cqw;align-items:center;z-index:4;opacity:.92}
.collection,.boost{border:0;border-radius:0;background:none!important;box-shadow:none;width:auto;padding:0;flex:1;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:1cqw}
.meterTitle{font-size:max(8px,1.85cqw);letter-spacing:.035em;text-align:left;color:#c8c9ae}.collection .marks{display:none}.collectionValue{font-size:max(9px,2.1cqw)}
.boost>.meterTitle{font-size:max(8px,1.6cqw);max-width:13cqw;line-height:1.1}#boostValues{flex:1;gap:1.2cqw;font-size:2.7cqw;margin:0;color:#819998}#boostValues span.active{color:#fff0bd;filter:drop-shadow(0 0 6px #ffbf38)}
.reelCabinet{margin:0 2.8cqw;padding:2cqw;border:0;border-radius:4cqw;background:linear-gradient(135deg,#b68743,#ffe49a 13%,#654322 28%,#dbb061 48%,#6d4829 71%,#e4c077 91%,#765432);box-shadow:0 3px #031115,0 5px 16px #0009,inset 0 0 0 .5cqw #4a3824;min-height:62cqw;max-height:91cqw;height:91cqw;flex:1 1 91cqw;z-index:3}
.reelCabinet:before,.reelCabinet:after{content:'';width:4cqw;height:4cqw;border:1px solid #f4d690;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe8a1,#7c542a 55%,#20170e 90%);top:.1cqw}
.reelCabinet:before{left:.3cqw}.reelCabinet:after{right:.3cqw}
.reels{gap:.6cqw;background:#081d22;border-radius:2.1cqw;box-shadow:inset 0 0 14px #000}
.cell,.stripTile,.cellWindow,.reelWindow{background:radial-gradient(ellipse at 50% 30%,#204b50,#0c2d35 69%,#061d25)}
.cell{box-shadow:inset 0 1px #68b7aa18,inset 0 -2px 4px #0005;overflow:hidden}
.cell .symbol{background-blend-mode:normal;filter:drop-shadow(0 2px 2px #0009);transform:scale(.88)}
.stripTile .symbol{transform:scale(.88);filter:drop-shadow(0 2px 2px #0008)}
.cell.winner{outline:1px solid #ffe69d;outline-offset:-2px;background:radial-gradient(ellipse at 50% 40%,#6b6333,#183936 70%);box-shadow:inset 0 0 24px #edbf442e}
.cell.winner .symbol{animation:treasureWin .54s ease-in-out 2 alternate}
.cell.landing .symbol{animation:treasureLand .2s cubic-bezier(.15,.65,.3,1)}
.cell.ordinaryLand .symbol{animation:treasureLandOrdinary .18s cubic-bezier(.45,0,.55,1) forwards}
.cell.ordinaryLand .symbol{animation-fill-mode:forwards}
.cell.empty,.stripTile.empty{background:radial-gradient(ellipse,#112d35,#061a23)}
.cell.locked{box-shadow:inset 0 0 0 1px #c2a767,inset 0 0 15px #c7a35f18}.cell.locked:after{content:'◆';font-size:2.5cqw;color:#eacb86;right:3%;top:2%}
.badge{bottom:2%}.badge strong{font-size:5cqw;background:linear-gradient(#8d6129,#3f2b14);border-radius:1.4cqw;border-color:#e6bd69;padding:.2cqw 1.5cqw}.badge small{font-size:1.75cqw;margin-top:0;background:#302414}
.cell.power .badge strong{background:linear-gradient(#198783,#084943)}
.cell.multiplier .badge strong{background:linear-gradient(#1c639d,#0a2f59)}
#winLines path{stroke:#fff0b6;stroke-width:2.2;filter:drop-shadow(0 0 3px #e5a637)}
.featureMerge,.mergePiece{background:radial-gradient(ellipse,#204b50,#08252f)}
.messageArea{height:max(14.5cqw,65px);padding:1cqw 4cqw;gap:.45cqw;background:radial-gradient(ellipse at 50% 0%,#18424466,transparent 70%)}
#message{font-family:Inter,Arial,sans-serif;font-size:max(14px,3.9cqw);font-weight:900;letter-spacing:.025em;line-height:1.13;color:#ffe8a3}
#detail{font-size:max(11px,2.6cqw);color:#c6d8cd;line-height:1.2}
.controls{height:24cqw;padding:0 3.6cqw;gap:2cqw}.balanceBox,.betBox{background:linear-gradient(#163941b8,#071d2ca6);border-color:#78958d44;box-shadow:none;border-radius:2cqw}
#spinButton{width:23cqw;height:23cqw;border:.7cqw solid #e7c070;box-shadow:0 0 0 .7cqw #312e21,0 0 0 1cqw #ac864a,inset 0 1cqw 2cqw #ffffff44,inset 0 -1cqw 2cqw #00342c,0 2cqw 5cqw #0009;background:radial-gradient(circle at 40% 30%,#33e5b7,#0aab91 60%,#05796d)}
#spinButton svg{filter:drop-shadow(0 2px 1px #05594e)}
.secondaryControls{height:10.5cqw;padding:1cqw 3.6cqw;gap:2cqw}.secondaryControls button{background:linear-gradient(#173540,#08212b);border-color:#9d92624d;border-radius:1.5cqw}
footer{height:calc(max(8cqw,31px) + env(safe-area-inset-bottom));color:#94b1b3;letter-spacing:0;font-size:max(8px,1.7cqw)}
.lootDock{position:absolute;left:36cqw;bottom:0;width:29cqw;height:18cqw;display:flex;align-items:flex-end;pointer-events:none;z-index:5;filter:drop-shadow(0 2px 3px #001018)}
.lootCache{position:absolute;left:0;bottom:7.5cqw;width:16cqw;height:16cqw;transform-origin:50% 80%}
.lootCache>i,.lootTraveler>i{display:block;width:100%;height:100%;background-repeat:no-repeat}
.lootReadout{position:absolute;bottom:-.2cqw;left:-33cqw;min-width:22cqw;display:grid;justify-items:center;gap:.15cqw;padding:1cqw 1.4cqw .6cqw;border-radius:2cqw;background:linear-gradient(#093439ee,#05252cdd);border:1px solid #c6a86577;box-shadow:0 1px 7px #00151b}
.lootReadout span{font-size:max(8px,2cqw);letter-spacing:.03em;color:#e0dfc8;font-weight:800}.lootReadout strong{font-size:4.8cqw;line-height:1;color:#e2e6da;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.lootDock.earned .lootReadout strong{color:#ffe397}.lootDock.receiving .lootReadout{border-color:#ffe7a6}
.lootTraveler{position:absolute;width:9cqw;height:9cqw;z-index:18;pointer-events:none;filter:drop-shadow(0 0 5px #f4c75380)}

.rulesTreasure{display:inline-block;width:38px;height:38px;vertical-align:middle;margin-right:7px;background-size:300% 300%;background-repeat:no-repeat}
.featureMode .reelCabinet{margin-top:4.5cqw}#featureTitle{top:-3.7cqw;border-radius:2cqw;background:linear-gradient(#275352,#0b343c);border-color:#c1a360;font-family:Inter,Arial,sans-serif;font-weight:900;font-size:max(11px,3.1cqw);padding:.55cqw}
@keyframes treasureLand{0%{transform:translateY(-6%) scale(.88)}55%{transform:translateY(2.5%) scale(.91,.86)}100%{transform:translateY(0) scale(.88)}}
@keyframes treasureLandOrdinary{0%{transform:translateY(0) scale(.88,.88)}30%{transform:translateY(0) scale(.90,.86)}100%{transform:translateY(0) scale(.88,.88)}}
@keyframes treasureWin{0%{transform:scale(.88);filter:drop-shadow(0 2px 2px #0009)}100%{transform:scale(.96);filter:drop-shadow(0 0 6px #ffd56966)}}
@media(max-height:720px) and (max-width:600px){.stage{height:53cqw;background:transparent}.stage img,.stage video{width:100%;left:0;height:56cqw;object-fit:cover;mask-image:linear-gradient(#000 75%,transparent)}.gameTitle{top:10cqw;width:34cqw}.gameTitle span{font-size:6.8cqw}.gameTitle strong{font-size:8cqw}.featureBar{height:6cqw;min-height:23px}.reelCabinet{min-height:57cqw;max-height:82cqw;flex-basis:82cqw}.messageArea{height:60px}.controls{height:24cqw}.secondaryControls{height:12.5cqw}footer{height:31px}}
@media(prefers-reduced-motion:reduce){.cell.winner .symbol,.cell.landing .symbol{animation:none;transform:scale(.88)}.cell.ordinaryLand .symbol{animation:none;transform:scale(.88)}}

/* Keep both feature facts readable over a quiet surface, including the 320px view. */
.featureBar{height:max(8cqw,29px);min-height:29px;margin:0 4cqw;gap:2cqw;background:#092930;position:relative}
.collection{flex:0 0 35%;min-width:0}.collection>.meterTitle{display:grid;grid-template-columns:auto auto;column-gap:3px;font-size:8px}.collectionValue{grid-column:1 / 3;font-size:10px;line-height:1.1}
.boost{flex:1;min-width:0;gap:2cqw}.boost>.meterTitle{max-width:none;font-size:8px;white-space:nowrap;color:#d7ddc8}#boostValues{font-size:max(10px,2.6cqw);gap:1.1cqw;color:#c4d1c2}
.stageCue{left:67%;font-size:max(9px,2.35cqw);bottom:3cqw}.lootDock{filter:drop-shadow(0 2px 3px #001018)}

/* Short screens retain the same portrait proportions and give the treasure board more height. */
@media(max-height:720px) and (max-width:600px){
 .game{width:min(100vw,calc(100svh * .46));height:100svh}
 .messageArea{height:52px}.secondaryControls{height:max(10.5cqw,32px)}
 .reelCabinet{min-height:74cqw;max-height:91cqw;flex-basis:91cqw}
}

/* I56: acquired reward tiers retain a composition of original tangible treasures. */
#game:has(#celebration:not([hidden])) .lootReadout,
#game:has(#celebration:not([hidden])) #featureTitle{visibility:hidden}
.rewardTreasure{position:absolute;left:50%;bottom:calc(100% - 12cqw);width:80cqw;height:44cqw;transform:translateX(-50%);pointer-events:none;isolation:isolate;z-index:3}
.treasureGround{position:absolute;left:4%;right:4%;bottom:-1cqw;height:12cqw;background:radial-gradient(ellipse,#e8c47938 0,#b5893422 27%,#0c38343b 49%,transparent 73%);opacity:.2;transform-origin:center;z-index:0}
.rewardTreasure:not([data-tier="0"]) .treasureGround{opacity:1}
.treasurePiece{position:absolute;display:block;aspect-ratio:1;height:auto;background-repeat:no-repeat;filter:drop-shadow(0 2cqw 1.2cqw #020a0ac7);transform-origin:50% 87%;opacity:1}
.treasure-chest{width:42cqw;left:19cqw;bottom:0;z-index:4}
.treasure-cup{width:26cqw;left:1cqw;bottom:5cqw;z-index:1}
.treasure-emerald{width:31cqw;right:0;bottom:1cqw;z-index:3}
.treasure-crown{width:26cqw;left:51cqw;top:-1cqw;z-index:2}
.treasure-bag{width:26cqw;left:8cqw;bottom:-1.5cqw;z-index:5}
.treasureArrive{animation:treasureArrive .46s cubic-bezier(.16,.62,.3,1) both}
.treasureContact .treasureGround{animation:treasureContact .48s ease-out}
@keyframes treasureArrive{0%{opacity:0;transform:translateY(-5cqw) scale(.88);filter:drop-shadow(0 3cqw 2cqw #020a0a99) brightness(1.35)}28%{opacity:1}65%{transform:translateY(1cqw) scale(1.035);filter:drop-shadow(0 .6cqw .8cqw #020a0ac7) brightness(1.16)}100%{opacity:1;transform:translateY(0) scale(1);filter:drop-shadow(0 2cqw 1.2cqw #020a0ac7) brightness(1)}}
@keyframes treasureContact{0%{transform:scale(.68);filter:brightness(1.8)}62%{transform:scale(1.06);filter:brightness(1.2)}100%{transform:scale(1);filter:brightness(1)}}
/* The crown replaces the old overlapping compass decoration, not the numerical tier ranks. */
#celebration .rewardCrest,#celebration .rewardPennants{display:none}
@media(prefers-reduced-motion:reduce){.treasurePiece,.treasureGround{animation:none!important;transition:none!important}}

/* I79 settled sparse feature state, Caribbean only */
.game.caribbean.settledFeature .reelCabinet{box-shadow:0 0 20px #14b9b0,inset 0 0 0 1cqw #082427;}
.game.caribbean.settledFeature .cell.empty{background:radial-gradient(ellipse at 50% 40%,#1e4247,#09252b);}
.game.caribbean.settledFeature .cell.normal{outline:2px solid #ffe69d;outline-offset:-2px;box-shadow:inset 0 0 18px #edbf442e;}
.game.caribbean.settledFeature .messageArea{position:relative;}
.game.caribbean.settledFeature .settledBanner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2cqw;background:radial-gradient(ellipse at 50% 0%,#184244ee,transparent 70%);z-index:5;}
.game.caribbean.settledFeature .settledBanner small{font-family:Inter,Arial,sans-serif;font-size:max(10px,2.2cqw);font-weight:700;color:#14b9b0;letter-spacing:.05em;}
.game.caribbean.settledFeature .settledBanner strong{font-family:Inter,Arial,sans-serif;font-size:max(18px,4.5cqw);font-weight:900;color:#ffe8a3;line-height:1.1;}
.game.caribbean.settledFeature .settledBanner span{font-size:max(11px,2.6cqw);color:#c6d8cd;}
.game.caribbean.settledFeature #message,.game.caribbean.settledFeature #detail{visibility:hidden;}
@media(max-height:720px) and (max-width:600px){
 .game.caribbean.settledFeature .settledBanner strong{font-size:max(16px,4cqw);}
 .game.caribbean.settledFeature .settledBanner span{font-size:max(10px,2.4cqw);}
}