:root{color-scheme:dark;--navy:#071d2a;--gold:#f3cf75;--copper:#dba06c;--accent:#e85b43;--text:#fff1d4}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#030d16;color:var(--text);font-family:system-ui,-apple-system,sans-serif}body{display:grid;place-items:center;background-image:radial-gradient(ellipse at center,#193d4e 0%,#030d16 80%)}button{font:inherit;cursor:pointer;touch-action:manipulation;color:inherit;border:1px solid #ba9455;background:#102b38;border-radius:10px}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:3px solid #fff;outline-offset:3px}[hidden]{display:none!important}.game{width:min(100vw,600px,calc(100dvh * .60));height:100dvh;max-height:100dvh;position:relative;overflow:hidden;display:flex;flex-direction:column;background:#092734;box-shadow:0 0 100px #000c;isolation:isolate;font-size:clamp(10px,1.8dvh,16px)}.topbar{height:4.1%;min-height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 3%;background:#061721}.brand{font-size:.8em;font-weight:750;letter-spacing:.15em;color:var(--copper)}.brand small{display:block;font-size:.55em;letter-spacing:.2em;color:#91b4c0}.icon-button{border:0;width:26px;height:26px;border-radius:50%;color:var(--gold)}.jackpot{height:7%;min-height:40px;background:linear-gradient(120deg,#704427,#1f1d27 48%,#3d2d19);border-top:1px solid #dba96a;border-bottom:2px solid #bd8c47;display:flex;gap:2%;justify-content:space-between;align-items:center;padding:0 4%;z-index:4}.jackpot>span:first-child{color:var(--gold);font-size:1em;font-weight:900;letter-spacing:.12em}.jackpot small{display:block;font-size:.48em;letter-spacing:.08em;opacity:.7}.jackpot strong{font-size:1.55em;white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:0 0 18px #f4c4697a}.jackpot>span:last-child{font-size:.7em;opacity:.8}.hero{height:17%;flex-shrink:0;position:relative;overflow:hidden;background:linear-gradient(90deg,#071d2ae6,#071d2a22),url('./assets/ocean-v1.webp') center/cover}.hero-copy{position:absolute;left:5%;top:22%;width:55%;z-index:2;text-shadow:0 2px 8px #000}.eyebrow{font-size:.61em;font-weight:800;letter-spacing:.14em;color:var(--gold)}.hero h1{font-size:2.25em;line-height:1.1;margin:.2em 0;letter-spacing:.02em;font-weight:950}.hero p{font-size:.67em;max-width:22em;color:#f5deb8;margin:.3em 0}.portrait{background-image:url('./assets/crew-v1.webp');background-size:500% 200%;background-repeat:no-repeat;aspect-ratio:1}.hero>.portrait{height:104%;position:absolute;right:0;bottom:-2%;filter:drop-shadow(0 0 14px var(--accent))}.hero-shimmer{position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,#fcd87417,transparent 65%);pointer-events:none}.crew{height:5%;min-height:30px;display:flex;justify-content:space-around;align-items:center;padding:0 4%;background:#061a23;border-top:1px solid #fff2}.crew button{height:82%;aspect-ratio:1;border-radius:50%;overflow:hidden;padding:0;position:relative;border-color:#927d52;opacity:.5}.crew button.active{opacity:1;border-color:var(--gold);box-shadow:0 0 8px var(--accent)}.crew button.completed{opacity:1;border-color:#72ebc3}.crew button.completed:after{content:'✓';position:absolute;right:0;bottom:0;background:#0e745d;color:#fff;font-size:.6em}.crew .portrait{width:100%;height:100%}.collection{height:7%;display:flex;justify-content:space-between;gap:2%;align-items:center;padding:0 4%;background:linear-gradient(#103746,#0b2631);border-top:1px solid #9b834b;border-bottom:1px solid #9b834b;z-index:3}.collection strong{display:block;font-size:.8em;margin-top:3px}.items{display:flex;gap:4px;width:48%;height:65%;align-items:center}.item{width:20%;aspect-ratio:1;border:1px solid #937447;border-radius:6px;background:#061a24}.item .sprite{width:100%;height:100%;opacity:0}.item.collected{border-color:#ffd98c;box-shadow:0 0 10px #f9cc6777}.item.collected .sprite{opacity:1}.item.just-collected{animation:collect-pulse .7s ease-out}.sprite{background-image:url('./assets/symbols-v1.webp');background-size:500% 300%;background-repeat:no-repeat;aspect-ratio:1}.reel-frame{height:39%;position:relative;margin:0 2%;border:5px solid #b5944c;border-top-width:8px;border-bottom-width:8px;border-radius:3px;background:linear-gradient(#0a3437,#061c28);box-shadow:inset 0 0 0 2px #f5d489,inset 0 0 50px #0006;overflow:hidden;flex-shrink:0}.reels{display:grid;grid-template-columns:repeat(3,1fr);height:100%;overflow:hidden;padding:1.5% 1.5%}.reel-column{height:100%;overflow:hidden;position:relative;border-right:2px solid #b89452;display:flex;flex-direction:column}.reel-column:last-child{border-right:0}.symbol{height:33.333%;flex-shrink:0;display:grid;place-items:center;position:relative}.symbol>.sprite,.symbol>.portrait{height:85%;max-width:90%;aspect-ratio:1}.symbol.wild:after{content:'WILD';position:absolute;bottom:8%;font-size:.5em;letter-spacing:.12em;background:#a57631;border:1px solid #f1d17b;border-radius:4px;padding:1px 6px;color:#fff}.symbol.winner{background:radial-gradient(ellipse,#e9ca6630,transparent 70%)}.symbol.winner>div{animation:win-glow .8s ease-in-out infinite alternate}.reel-track{height:200%;flex-shrink:0;display:flex;flex-direction:column;animation:roll .48s linear infinite}.reel-track .symbol{height:16.666%}.is-turbo .reel-track{animation-duration:.18s}.fast-stop .reel-track{animation-duration:.12s}.frame-top,.frame-bottom{position:absolute;left:0;right:0;height:5px;background:linear-gradient(90deg,#473719,#ffe4a7,#835e24);z-index:4;pointer-events:none}.frame-top{top:0}.frame-bottom{bottom:0}.is-free .reel-frame{border-color:#8cddfc;box-shadow:0 0 15px #63c4ff7a}.is-free .symbol>div{filter:drop-shadow(0 0 5px #57c9ff)}.is-mega .reel-frame{border-color:#ffea82;animation:rainbow-glow 4s linear infinite}.is-mega .symbol>div{filter:drop-shadow(0 0 9px #ffea8d);animation:treasure-colour 4s linear infinite}.collect-fly{position:absolute;inset:15% 20%;z-index:6;display:flex;align-items:center;flex-direction:column;justify-content:center;pointer-events:none;animation:collect-arrive 1.3s ease-in-out forwards}.collect-fly .sprite{width:50%;filter:drop-shadow(0 0 18px #ffdb83)}.collect-fly span{font-size:.9em;font-weight:900;letter-spacing:.12em;color:var(--gold);text-shadow:0 2px 4px #000}.message{height:4.5%;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--gold);font-size:.82em;font-weight:750;padding:0 2%;background:#0b2932}.hud{height:5.5%;min-height:34px;display:flex;align-items:center;justify-content:space-around;border-top:1px solid #ae914e;border-bottom:1px solid #ae914e;background:#06202a;flex-shrink:0}.hud small{display:block;font-size:.57em;opacity:.7;letter-spacing:.06em}.hud strong{display:block;font-size:1.28em;font-variant-numeric:tabular-nums}.free-block{display:none;text-align:center;width:100%}.free-block strong{display:inline-block;font-size:1.8em;margin-right:.3em}.free-block small{display:inline-block;margin-right:1em}.free-block span{font-size:.7em}.is-free .balance-block,.is-free .bet-block{display:none}.is-free .free-block{display:block}.controls{height:9%;display:flex;align-items:center;justify-content:center;gap:10%;position:relative;padding-top:0;background:radial-gradient(ellipse,#244837,#082a32 70%);flex-shrink:0}.round-button{width:10%;aspect-ratio:1;position:relative;border-radius:50%;font-size:1.8em;line-height:1;padding:0;background:#082a34;color:var(--gold);border:1px solid #bc9b54}.round-button small{display:block;position:absolute;bottom:-1.2em;left:0;right:0;font-size:.24em;font-weight:800;letter-spacing:.1em}.round-button[aria-pressed=true]{background:#b1863a;color:#071f29;box-shadow:0 0 12px #ffdb7066}.spin-area{height:92%;aspect-ratio:1;position:relative;display:grid;place-items:center}.spin-button{height:93%;aspect-ratio:1;border-radius:50%;border:3px solid #f5da93;background:radial-gradient(circle at 30% 30%,#53c1aa,#106653 45%,#082a32 70%);box-shadow:0 0 0 3px #8d682c,0 0 0 5px #d0ad61,inset 0 0 12px #a8f3b666;color:#ffdf8a;font-weight:900;font-size:3.2em;line-height:1;padding:0;position:relative}.spin-button:active{transform:scale(.97)}#spin-label{position:absolute;bottom:4%;font-size:.46em;letter-spacing:.14em;color:#fff4cb;pointer-events:none}.bets{position:absolute;right:3%;top:3%;display:flex;gap:3px}.bets button{font-size:.52em;padding:3px 5px;border-radius:5px}.bets button.active{background:#b2863d;color:#071f29}.bets button[data-cs="0.8"]{display:none}.is-free .bets{display:none}footer{height:3%;min-height:20px;display:flex;justify-content:space-between;align-items:center;padding:0 4%;background:#061923;font-size:.57em}footer button{background:none;border:none;padding:3px;font-size:inherit}footer span{font-size:.7em;color:#90a5ad;letter-spacing:.1em}dialog{margin:auto;border:2px solid #d5b366;padding:clamp(15px,3dvh,26px);background:linear-gradient(160deg,#0d3343,#061a24);color:var(--text);border-radius:20px;width:min(94vw,530px);max-height:90dvh;overflow:auto;box-shadow:0 18px 60px #000c}dialog::backdrop{background:#041320ce;backdrop-filter:blur(8px)}dialog h2{font-size:1.65em;margin:.3em 0 .4em}.sheet-heading{text-align:center}.sheet-heading p{font-size:.76em;color:#b4c6cc;line-height:1.45}.character-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}.character-card{padding:5px 3px 8px;border-color:#677373;background:linear-gradient(#1a3c4a,#082430);display:flex;flex-direction:column;align-items:center;min-width:0}.character-card .portrait{width:100%;margin-bottom:5px}.character-card strong{font-size:.68em}.character-card small{font-size:.46em;color:#d5c18b;min-height:2.5em;line-height:1.3;margin-top:4px}.character-card:disabled{opacity:.35}.character-card:not(:disabled):hover{border-color:var(--gold);background:#244950}.bonus-options{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:26px 0}.bonus-card{aspect-ratio:.68;background:linear-gradient(145deg,#374e59,#072031);border:2px solid #dab87a;padding:7px;box-shadow:inset 0 0 0 2px #061521;display:flex;flex-direction:column;justify-content:center;align-items:center}.bonus-card .sprite{width:100%}.bonus-card span{font-weight:900;color:var(--gold);margin-top:12px}.sheet-note{text-align:center;font-size:.68em;color:#a1b8c1}#prize{text-align:center}#prize-art{width:44%;margin:auto}#prize-value{font-size:2.5em;display:block;color:var(--gold);text-shadow:0 0 24px #f4bf6544;margin:.1em 0}#prize-description{font-size:.85em;color:#b4c9d0}.primary{background:linear-gradient(#f5d891,#ce9d49);color:#112832;font-weight:900;border-color:#ffefb9;padding:13px 24px;border-radius:30px}.close{float:right;border:0;font-size:1.5em;background:none}#info{font-size:14px;line-height:1.6}#info table{width:100%;border-collapse:collapse;font-size:.85em}#info td,#info th{text-align:left;padding:6px;border-bottom:1px solid #fff2}.overlay{position:absolute;inset:0;background:#071823;z-index:30;display:grid;place-items:center}.intro-logo{text-align:center}.intro-logo>span{display:block;font-size:.8em;letter-spacing:.3em;color:var(--copper);animation:intro-fade .6s both}.intro-logo strong{display:block;font-size:2.8em;font-weight:950;color:var(--gold);margin:.3em 0 .1em}.intro-logo small{letter-spacing:.22em;font-size:.6em;color:#a1bfcc}.intro-logo .sprite{display:block;width:40%;margin:2em auto 1em;animation:float 2s ease-in-out infinite}.intro-logo p{font-size:.7em;color:#93bac7}.recovery{position:absolute;inset:35% 6% auto;background:#061923f5;border:2px solid #e1bd75;border-radius:16px;padding:24px;z-index:20;text-align:center}.recovery p{font-size:.8em;line-height:1.5}.recovery button{padding:10px;margin-top:10px}.finale{position:absolute;inset:0;z-index:25;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:radial-gradient(ellipse,#4c423b,#071624 70%);overflow:hidden;padding:8%;}.finale h2{font-size:3.4em;line-height:1.05;letter-spacing:.04em;margin:.2em 0;color:#fff0a9;text-shadow:0 0 25px #ffc25985;z-index:2}.finale-treasure{width:48%;filter:drop-shadow(0 0 24px #ffe698);animation:float 2.5s ease-in-out infinite}.finale-crew{display:grid;grid-template-columns:repeat(3,1fr);width:100%;margin:15px 0;gap:0;z-index:2}.finale-crew .portrait{width:100%;filter:drop-shadow(0 0 10px #fdc969)}.finale strong{font-size:1em;color:var(--gold);z-index:2}.finale p{font-size:.75em;line-height:1.5;z-index:2}.finale button{z-index:2;margin-top:12px}.finale-rays{position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg,#fada7514 0deg 8deg,transparent 8deg 20deg);animation:rays 35s linear infinite;pointer-events:none}#preview-tools{position:absolute;left:5%;top:11%;z-index:8;font-size:.5em;background:#061923e8;padding:5px;border-radius:6px}#preview-tools span{display:block;color:#91a7af}#preview-tools button{font-size:inherit;padding:3px;margin:3px}
@keyframes roll{to{transform:translateY(-50%)}}@keyframes win-glow{to{filter:drop-shadow(0 0 8px #ffd76b);transform:scale(1.07)}}@keyframes collect-pulse{50%{transform:scale(1.3);box-shadow:0 0 20px gold}}@keyframes collect-arrive{0%{opacity:0;transform:translateY(20%) scale(.6)}20%,65%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-80%) scale(.3)}}@keyframes rainbow-glow{0%,100%{box-shadow:0 0 24px #ffc76a}33%{box-shadow:0 0 24px #e580ff}66%{box-shadow:0 0 24px #70e1e4}}@keyframes treasure-colour{0%,100%{filter:drop-shadow(0 0 8px #ffda66)}50%{filter:drop-shadow(0 0 9px #b988ff) hue-rotate(30deg)}}@keyframes float{50%{transform:translateY(-8px)}}@keyframes rays{to{transform:rotate(360deg)}}@keyframes intro-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}@media(max-width:380px){.game{font-size:11px}.jackpot strong{font-size:1.3em}.character-options{gap:4px}.character-card small{font-size:7px}.crew{padding:0 2%}.bets button{padding:2px 3px}}

.character-card strong{font-size:clamp(11px,1.55dvh,15px)}.character-card small{font-size:clamp(9px,1.25dvh,12px)}.is-mega .hero h1{font-size:1.65em;max-width:95%}.hero-copy{top:16%}.is-free .hero>.portrait{animation:float 2.2s ease-in-out infinite}#preview-tools{position:fixed;top:auto;bottom:12px;left:12px}@media(max-width:600px){#preview-tools{display:none}}

.overlay{background:#000}.studio-logo{width:150px;max-width:35vw;margin-bottom:1em;animation:intro-fade .7s both}.intro-logo>span{display:none}

/* Independent Grand Line stage: character, collection bridge, reels and dock. */
.game{background:#032e2b;width:min(100vw,600px,calc(100dvh * .60))}
.topbar{position:absolute;inset:0 0 auto;height:3%;min-height:0;z-index:7;background:linear-gradient(#0009,transparent)}
.brand{font-size:.65em}.brand small{display:none}.icon-button{width:20px;height:20px}
.jackpot{height:7%;min-height:0;padding-top:2%;background:linear-gradient(110deg,#08282d,#433018,#08282d);border:2px solid #bc954e;border-radius:0 0 18px 18px;padding-left:4%;padding-right:4%}
.jackpot strong{font-size:1.5em}.jackpot>span:first-child{font-size:.8em}
.hero{height:23%;overflow:hidden;background:url('./assets/ocean-v1.webp') center/cover}
.hero-copy{left:3%;top:24%;width:25%;z-index:3}.hero-copy .eyebrow{display:none}.hero h1{font-size:1em;color:#ffe0a0}.hero p{font-size:.52em;line-height:1.4}
.hero>.portrait{display:none}
.hero-actor{position:absolute;height:135%;aspect-ratio:1;left:50%;bottom:-16%;background-image:url('./assets/hero-poses-v2.webp');background-size:400% 600%;background-repeat:no-repeat;filter:drop-shadow(0 3px 8px #0005);transform-origin:50% 90%;animation:actor-breathe 3s ease-in-out infinite;pointer-events:none}
.hero-actor[data-pose=watch]{animation:actor-watch .8s ease-in-out infinite}
.hero-actor[data-pose=win]{animation:actor-win .65s ease-in-out infinite}
.hero-actor[data-pose=bonus]{animation:actor-dance 1.1s ease-in-out infinite}
.crew{position:absolute;top:10%;right:2%;height:17%;min-height:0;width:9%;flex-direction:column;background:transparent;border:0;padding:0;gap:3px;z-index:4}
.crew button{height:16%;min-height:0;flex-shrink:0;background:#062828}
.collection{position:absolute;top:27%;left:18%;width:64%;height:7%;border:2px solid #d4af60;border-radius:50px;padding:0 4%;background:linear-gradient(#073d36f5,#042823f5);flex-direction:column;justify-content:center;gap:3px;box-shadow:0 4px 12px #0005;z-index:8}
.collection>div:first-child{text-align:center}.collection .eyebrow{display:none}.collection strong{font-size:.72em;letter-spacing:.12em;margin:0;text-transform:uppercase}.items{width:70%;height:48%;gap:5px;justify-content:center}.item{width:auto;height:100%;border-color:#b78f41}
.reel-frame{height:43%;margin:0 1%;border-width:8px;border-top-width:12px;border-bottom-width:12px;border-radius:0;background:radial-gradient(ellipse,#064431,#012c22);box-shadow:inset 0 0 25px #001a16;overflow:hidden}
.reels{padding:0;height:100%;gap:8px}.reel-column{border-right:0;overflow:hidden}.reel-column:not(:last-child):after{content:'';position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(90deg,#70511d,#ffdc85,#8d682e,#ffe6a9,#65491e);z-index:5;pointer-events:none}
.reel-frame:after{content:'';position:absolute;inset:0;border:3px ridge #f3cf75;box-shadow:inset 0 0 0 2px #775821;pointer-events:none;z-index:7}
.symbol>.sprite,.symbol>.portrait{height:78%;max-width:87%}.frame-top,.frame-bottom{height:9px;background:linear-gradient(#ffebaa,#a57d30,#efc975,#5f451d);z-index:8}
.message{height:7%;margin:0 1%;border:3px solid #c9a954;background:linear-gradient(#074539,#012b24);font-size:1.1em;font-weight:850}
.hud{height:6%;min-height:0;margin:0 7%;border:3px ridge #ddb970;border-radius:28px;background:linear-gradient(#073b2d,#00271f);position:relative;z-index:3}
.hud strong{color:#ffe7a0;font-size:1.4em}.hud small{font-size:.58em}.balance-block,.bet-block{text-align:center;width:48%}.balance-block{border-right:1px solid #b6944d}
.controls{height:11%;gap:15%;padding-top:1%;background:radial-gradient(ellipse,#205d43,#032e26 75%);border-left:5px ridge #e4c070;border-right:5px ridge #e4c070}
.spin-area{height:112%;margin-top:-2%;z-index:4}.spin-button{border:5px ridge #ffe69d;box-shadow:0 0 0 3px #9b742d,0 0 0 6px #e9ca79,inset 0 0 16px #a8f3b699;background:radial-gradient(circle at 30% 30%,#72deb3,#008650 42%,#00462c 72%);font-size:3.7em}.spin-button:disabled{opacity:.7}#spin-label{bottom:9%;font-size:.42em}
.round-button{width:12%;border:2px solid #bca258;background:#00362c}.bets{top:3%;right:2%;z-index:6}.bets button{padding:2px 4px}.bets button[data-cs="3"]{display:none}
footer{height:3%;min-height:0;background:#002c23;border:3px ridge #d4b26b;border-top:0;padding:0 5%;font-size:.65em}footer span{font-size:.55em}
.is-free .hero-actor{filter:drop-shadow(0 0 12px #f9cb53)}.is-free .symbol>div{animation:win-glow 1.2s ease-in-out infinite alternate}.is-mega .hero-actor{filter:drop-shadow(0 0 15px #ffe57f)}
@keyframes actor-breathe{0%,100%{transform:translateX(-50%) rotate(-.4deg)}50%{transform:translateX(-50%) translateY(1.5%) rotate(.5deg)}}
@keyframes actor-watch{0%,100%{transform:translateX(-50%) translateY(1%)}50%{transform:translateX(-50%) translateY(3%) rotate(.5deg)}}
@keyframes actor-win{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}50%{transform:translateX(-50%) translateY(-3%) scale(1.025)}}
@keyframes actor-dance{0%,100%{transform:translateX(-50%) rotate(-3deg)}50%{transform:translateX(-50%) translateY(-2%) rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.hero-actor,.is-free .symbol>div{animation:none!important;transform:translateX(-50%)}.is-free .symbol>div{transform:none}}
.reel-column:not(:last-child){border-right:7px ridge #e8c375}.reel-column:not(:last-child):after{display:none}.reels{gap:0}

.hero-actor{height:112%;bottom:-8%}.reel-frame{isolation:isolate;z-index:1}.collection{z-index:9}.hero-copy{top:16%}

/* Nami bonus celebration: soft secondary torso motion on the same atlas pose. */
.hero-secondary-motion{display:none;position:absolute;inset:0;background-image:inherit;background-size:inherit;background-position:inherit;background-repeat:no-repeat;pointer-events:none;mask-image:radial-gradient(ellipse 26% 19% at 49% 69%,#000 48%,transparent 100%);transform-origin:50% 85%}
.hero-actor[data-character=nami][data-pose=bonus]{animation:nami-bonus-bounce .72s ease-in-out infinite}
.hero-actor[data-character=nami][data-pose=bonus] .hero-secondary-motion{display:block;animation:nami-secondary-bounce .36s ease-in-out infinite}
@keyframes nami-bonus-bounce{0%,100%{transform:translateX(-50%) rotate(-2deg)}25%{transform:translateX(-50%) translateY(-3%) rotate(1deg)}50%{transform:translateX(-50%) translateY(1%) rotate(2deg)}75%{transform:translateX(-50%) translateY(-2%) rotate(-1deg)}}
@keyframes nami-secondary-bounce{0%,100%{transform:translateY(.5%) scaleY(.99)}50%{transform:translateY(-1.8%) scaleY(1.035)}}
@media(prefers-reduced-motion:reduce){.hero-actor[data-character=nami][data-pose=bonus]{animation:none!important;transform:translateX(-50%)}.hero-secondary-motion{display:none!important}}

/* One foreground frame, with reels clipped independently underneath. */
.jackpot{height:9%;flex-shrink:0;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;justify-items:center;gap:0;padding:12px 8% 3px;position:relative;background:radial-gradient(ellipse at 50% 100%,#68451e,#0a2627 75%);border:2px solid #c7a05d;border-bottom-width:3px;border-radius:0 0 22px 22px;box-shadow:inset 0 0 14px #0009}
.jackpot>span:first-child{font-size:.66em;letter-spacing:.18em;line-height:1.1;text-align:center}.jackpot small{display:none}.jackpot strong{font-size:2.05em;line-height:1.1;letter-spacing:.02em;color:#ffe8ae;font-variant-numeric:tabular-nums;text-shadow:0 1px 1px #000,0 0 20px #e6ae5944}.jackpot>span:last-child{position:absolute;right:5%;bottom:14%;font-size:.65em;color:#e4c880}
.hero{height:21%}.crew{top:11%;height:16%}
.reel-frame{height:43%;margin:0 1%;padding:14px 15px;border:0;border-radius:16px;background:radial-gradient(ellipse,#064431,#012c22);box-shadow:none;overflow:hidden;isolation:isolate}
.reel-frame:after{display:none}.reel-trim{position:absolute;inset:0;background:url('./assets/reel-frame-v2.svg') center/100% 100% no-repeat;z-index:8;pointer-events:none}
.reels{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0;overflow:hidden;border-radius:8px}
.reel-column,.reel-column:not(:last-child){border:0;overflow:hidden;min-width:0;background:radial-gradient(ellipse,#063d2e,#012c22)}
.reels:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:7;background-image:linear-gradient(90deg,#634718,#fce4a3,#b58b3c,#ffebaa,#64491f),linear-gradient(90deg,#634718,#fce4a3,#b58b3c,#ffebaa,#64491f);background-size:8px 100%;background-position:33.333% 0,66.667% 0;background-repeat:no-repeat}
.is-free .reel-frame{border:0;box-shadow:none}.is-free .reel-trim{filter:drop-shadow(0 0 4px #89dcff)}.is-mega .reel-trim{filter:drop-shadow(0 0 5px #ffe28c)}
.collection{top:27%;left:17%;width:66%;height:7%;z-index:9}.symbol>.sprite,.symbol>.portrait{height:77%;max-width:84%}
@media(max-width:420px){.jackpot strong{font-size:2em}.reel-frame{padding:14px 14px}.jackpot>span:first-child{font-size:.65em}}

/* Warm map parchment and weathered timber throughout the pirate stage. */
body{background:#21130c url('./assets/parchment-v1.webp') center/cover fixed}
.game{background:#352316 url('./assets/parchment-v1.webp') center/100% 100%;--text:#fff1cf}
.hero{background:linear-gradient(#0001,#54351b12),url('./assets/parchment-v1.webp') center 26%/cover}
.hero-copy{text-shadow:0 1px 3px #24140c}.hero h1{color:#fff1c5}.hero p{color:#fff0cf}
.change-character{font-size:.57em;line-height:1.3;margin-top:6px;padding:5px 7px;border-color:#dfc281;background:linear-gradient(#754c2b,#382318);box-shadow:0 2px 5px #0004}
.crew{top:24%;left:22%;right:auto;width:56%;height:3.5%;flex-direction:row;gap:4px;z-index:5}
.crew button{height:100%;width:auto;min-height:0;aspect-ratio:1;opacity:.8;background:#563e26}.crew button.active{border-color:#ffe1a0;box-shadow:0 0 7px #c98634}
.collection{top:28%;height:7%;background:linear-gradient(#51391cf8,#251b11f8);border-color:#ddbf76}
.reel-frame{background:#a87d46 url('./assets/parchment-v1.webp') center 52%/cover}
.reel-column,.reel-column:not(:last-child){background:linear-gradient(#5d3f2522,#57381d15)}
.reels{background:linear-gradient(#ead7a144,#dfc99344);box-shadow:inset 0 0 25px #72532633}
.message{background:linear-gradient(#5c3b23e8,#322115ee);color:#ffe6a5;border-color:#c9a25c}
.hud{background:linear-gradient(#55361fe8,#27190fee)}
.controls{background:linear-gradient(#4f351edd,#2c1c12ed)}
.round-button{background:#342315}.spin-button{background:radial-gradient(circle at 30% 30%,#e0b864,#a6772d 42%,#493214 75%)}
footer{background:#291b12}.item{background:#2c2217}
.is-free .reel-trim{filter:drop-shadow(0 0 3px #ffe6a6)}
#character-back{display:block;margin:18px auto 0}#character-back[hidden]{display:none}
.jackpot{background:radial-gradient(ellipse at 50% 100%,#79542d,#302013 75%)}
dialog{background:linear-gradient(#503720f5,#24190ff8),url('./assets/parchment-v1.webp') center/cover;border-color:#dab56f}dialog::backdrop{background:#21150cce}
.character-card{background:linear-gradient(#705030,#332214);border-color:#a78349}.character-card:not(:disabled):hover{background:#6b4b2d}
.bonus-card{background:linear-gradient(#74512b,#332314);box-shadow:inset 0 0 0 2px #28190f}
.finale{background:radial-gradient(ellipse,#78532cee,#241810f5),url('./assets/parchment-v1.webp') center/cover}

/* Raised hero, substantial nautical frame, and stable vector spin control. */
.hero-actor{bottom:0;height:108%}
.crew button{position:relative;overflow:visible}.crew button.completed:after{content:'WON';position:absolute;top:-7px;left:50%;transform:translateX(-50%);font-size:6px;font-weight:900;line-height:1.3;padding:1px 3px;background:#f9dc84;color:#34200e;border:1px solid #7b5429;border-radius:3px;z-index:2}
.reel-frame{padding:20px 20px;border-radius:10px}.reel-trim{background-image:url('./assets/reel-frame-v3.svg')}.reels:after{background-size:10px 100%}
.spin-area{height:94%;margin-top:0;display:flex;align-items:center;justify-content:center;flex-shrink:0}.spin-button{display:grid;place-items:center;width:100%;height:100%;min-width:0;box-sizing:border-box;border:4px solid #fbe3a4;box-shadow:0 0 0 2px #684315,0 0 0 4px #c49a4a,inset 0 2px 4px #fff8,inset 0 -5px 12px #3d260a88;background:radial-gradient(circle at 35% 25%,#edcb82,#a57730 55%,#503314)}.spin-icon{width:64%;height:64%;display:block;filter:drop-shadow(0 2px 2px #573813)}#spin-label{font-size:.39em;bottom:1%;line-height:1;white-space:nowrap}.spinning .spin-icon{animation:spin-control 1.2s linear infinite}.fast-stop .spin-icon{animation-duration:.25s}
@keyframes spin-control{to{transform:rotate(360deg)}}
@media(max-width:420px){.reel-frame{padding:17px 17px}}
@media(prefers-reduced-motion:reduce){.spinning .spin-icon{animation:none}}

/* Pirate ship hull: broad grained timber, silver brackets and braided rope. */
.reel-frame{padding:6.7% 7%;border-radius:5px}.reel-trim{background-image:url('./assets/reel-frame-v4.svg')}
.reels{border-radius:2px;gap:12px}.reels:after{background-image:linear-gradient(90deg,#35200f,#a26a36 25%,#73431f 65%,#3e2511),linear-gradient(90deg,#35200f,#a26a36 25%,#73431f 65%,#3e2511);background-size:12px 100%;box-shadow:inset 0 0 12px #34200d88}
@media(max-width:420px){.reel-frame{padding:6.7% 7%}}

/* Textured ship timber asset with a genuinely transparent reel opening. */
.reel-frame{padding:14% 14.5% 18%;overflow:hidden;background:#94703f url('./assets/parchment-v1.webp') center/cover}
.reel-trim{background-image:url('./assets/reel-frame-rustic-v5.webp');filter:none}.is-free .reel-trim,.is-mega .reel-trim{filter:drop-shadow(0 0 2px #f9db91)}
.reels{gap:9px}.reels:after{background-size:9px 100%}
@media(max-width:420px){.reel-frame{padding:14% 14.5% 18%}}

/* Confirmed winnings: a centered illustrated treasure celebration. */
#prize{width:min(92vw,460px);padding:18px 20px 22px;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#8d6237,#302011 75%);border:3px solid #bd8b4b;box-shadow:0 20px 90px #000d,inset 0 0 0 3px #382310;max-height:94dvh}#prize .sheet-heading{position:relative;z-index:2}#prize h2{font-size:1.6em;margin:.25em 0}.prize-scene{position:relative;width:100%;height:clamp(180px,30dvh,310px);isolation:isolate}.prize-rays{position:absolute;inset:-20%;z-index:-1;background:repeating-conic-gradient(#ffd97d22 0deg 9deg,transparent 9deg 23deg);mask-image:radial-gradient(#000,transparent 65%);animation:rays 24s linear infinite}#prize-character{position:absolute;top:-8%;left:19%;width:62%;aspect-ratio:1;background:url('./assets/hero-poses-v2.webp') no-repeat;background-size:400% 600%;filter:drop-shadow(0 0 14px #ffdc7a66)}#prize-art{position:absolute;width:90%;height:77%;object-fit:contain;left:5%;bottom:-5%;margin:0;filter:drop-shadow(0 8px 8px #21120999);animation:treasure-enter .4s ease-out both}#prize-value{font-size:clamp(28px,5dvh,48px);line-height:1.15;margin:.2em 0;font-variant-numeric:tabular-nums}#prize-character-name{font-size:.72em;color:#efd097;font-weight:800;text-transform:uppercase;letter-spacing:.12em}#prize-description{font-size:.78em;margin:.8em auto 1em;max-width:28em}#prize[data-tier=big],#prize[data-tier=mega],#prize[data-tier=bonus]{border-color:#f3d087;box-shadow:0 0 40px #e9b75b66,0 20px 90px #000d}#prize[data-tier=mega] #prize-value{color:#fff4be;text-shadow:0 0 25px #ffe48a}#prize[data-tier=mega] .prize-rays{background:repeating-conic-gradient(#ffd97d44 0deg 9deg,transparent 9deg 23deg)}
@keyframes treasure-enter{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.prize-rays,#prize-art{animation:none}}

#prize-art{bottom:4%;height:72%}#prize-character-name{display:block;margin-top:4px}

/* Illustrated pirate furniture; artwork never intercepts control taps. */
#prize{border:0;border-radius:0;padding:40px 40px 42px;background:radial-gradient(ellipse at 50% 45%,#795430,#26190e 75%);box-shadow:0 20px 90px #000d;}
#prize:after{content:'';position:absolute;inset:0;background:url('./assets/win-frame-v1.webp') center/100% 100% no-repeat;pointer-events:none;z-index:4}
#prize-character{mask-image:linear-gradient(#000 0 85%,transparent 94%)}
#prize[data-tier=big],#prize[data-tier=mega],#prize[data-tier=bonus]{border:0}
.message,.hud{background:#302014 url('./assets/wood-plaque-v1.webp') center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;text-shadow:0 2px 2px #000;padding-left:8%;padding-right:8%}
.controls{background:#302014 url('./assets/control-deck-v1.webp') center/100% 100% no-repeat;border:0;gap:10%;padding:5px 0 9px}
.round-button,.spin-button{background:transparent url('./assets/control-button-v1.webp') center/100% 100% no-repeat;border:0;box-shadow:none;color:#ffe5a3;border-radius:50%;text-shadow:0 2px 2px #000}
.round-button{width:14%;font-size:1.8em;position:relative}
.round-button small{bottom:9%;font-size:.22em;letter-spacing:.05em;background:#21150ce0;color:#ffeac1;left:24%;right:24%;border-radius:3px;line-height:1.25}
.round-button[aria-pressed=true]{background:transparent url('./assets/control-button-v1.webp') center/100% 100% no-repeat;color:#fff3aa;filter:drop-shadow(0 0 5px #ffd15a);box-shadow:none}
.round-button[aria-pressed=true] small{background:#ecd183;color:#28190d}
.spin-icon{width:50%;height:50%}#spin-label{bottom:13%;font-size:.36em;text-shadow:0 1px 2px #000}
.bets{top:1%;right:3%}.bets button{background:#302014 url('./assets/wood-plaque-v1.webp') center/100% 100% no-repeat;border:0;border-radius:3px;padding:4px 7px;color:#ffebbf}.bets button.active{color:#fff8df;box-shadow:0 0 0 1px #e5c474}
footer{background:#21150f url('./assets/control-deck-v1.webp') center bottom/100% 300%;padding:0 6%;border:0}footer button{color:#ffe5b0}
#prize-continue{background:#302014 url('./assets/wood-plaque-v1.webp') center/100% 100% no-repeat;border:0;color:#ffe5a3;border-radius:0;padding:12px 26px;box-shadow:none;text-shadow:0 1px 2px #000}
@media(max-width:420px){#prize{padding:34px 32px 36px}.prize-scene{height:clamp(150px,26dvh,260px)}.round-button{width:15%}}

/* Native game surface: no text selection or artwork dragging. */
html,body,.game,.game *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.game img{-webkit-user-drag:none;user-drag:none}
.control-icon{display:block;position:absolute;width:54%;height:54%;left:23%;top:18%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 2px #000)}
.round-button[aria-pressed=true] .control-icon{filter:brightness(1.25) drop-shadow(0 0 3px #ffd46c)}

/* Dedicated illustrated controls and collection furniture. */
.hero-copy{width:30%}.hero-copy .crew{position:relative;top:auto;left:auto;right:auto;width:100%;height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:7px;padding:0;z-index:5}.hero-copy .crew button{width:100%;height:auto;aspect-ratio:1;max-width:29px;justify-self:center}.hero-copy .crew .portrait{width:100%;height:100%}
.collection{background:#302014 url('./assets/collection-frame-v1.webp') center/100% 100% no-repeat;border:0;border-radius:0;padding:7px 10%;box-shadow:none}
.jackpot{background:#302014 url('./assets/jackpot-frame-v1.webp') center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;padding:12px 12% 5px}.jackpot>span:last-child{right:10%;bottom:16%}.spin-icon{object-fit:contain;pointer-events:none;width:58%;height:58%}

/* Keep HUD titles above the timber rim; bet presets get their own clear row. */
.hud{position:relative;padding-top:12px;background-size:100% 70%;background-position:center bottom;align-items:flex-end;padding-bottom:3px}
.hud .balance-block,.hud .bet-block{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.hud .balance-block>small,.hud .bet-block>small{position:absolute;top:-10px;left:50%;transform:translateX(-50%);white-space:nowrap;line-height:1;background:#302014;padding:0 4px;color:#ffe4ae}
.controls{padding-top:19px;padding-bottom:3px}
.bets{top:2px;left:0;right:0;justify-content:center;gap:6px;height:17px;z-index:2}
.bets button{font-size:.55em;min-width:36px;padding:2px 8px;line-height:1}
.spin-area{height:94%}.round-button{max-height:100%}

/* Let the stage parchment show through behind the message and HUD plaques. */
.message,.hud{background-color:transparent}.hud .balance-block>small,.hud .bet-block>small{background:transparent;color:#332013;text-shadow:0 1px 0 #f4deae}

.collection>div:first-child{display:none}.collection{display:flex;align-items:center;justify-content:center;padding:10px 18%}.collection .items{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:5px}.collection .item{height:85%;width:auto;aspect-ratio:1;flex:0 0 auto;border-radius:4px}

#prize-continue{background-color:transparent}
#prize-character{filter:none;mask-image:linear-gradient(90deg,transparent,#000 8% 92%,transparent),linear-gradient(#000 0 80%,transparent 94%);mask-composite:intersect;-webkit-mask-composite:source-in}
.jackpot{background-color:transparent;background-size:100% 125%;background-position:center top}

/* More readable crew badges and a deeper balance plaque. */
.hero-copy{width:32%}.change-character{font-size:.68em;padding:6px 9px}.hero-copy .crew{gap:5px;margin-top:9px}.hero-copy .crew button{max-width:34px;overflow:visible}
.hero-copy .crew button.completed:after{content:'WON';position:absolute;top:-5px;bottom:auto;left:50%;right:auto;width:max-content;height:auto;min-height:0;transform:translateX(-50%);font-size:7px;line-height:1.2;padding:2px 4px;border-radius:4px;background:#f9dc84;color:#34200e;border:1px solid #7b5429;white-space:nowrap;writing-mode:horizontal-tb;box-shadow:0 1px 3px #0006}
.hud{background-size:100% 95%;background-position:center bottom;padding-top:14px;padding-bottom:5px}
.hud .balance-block>small,.hud .bet-block>small{top:-11px;font-size:.68em;font-weight:700;letter-spacing:.07em;text-shadow:0 1px 0 #ffe6b9}
.hud .balance-block>strong,.hud .bet-block>strong{font-size:1.55em;line-height:1.1;text-shadow:0 2px 2px #000}

/* Labels clear of timber, compact amounts, and crew directly below character details. */
.hud .balance-block>small,.hud .bet-block>small{top:-16px;font-size:.66em}
.hud .balance-block>strong,.hud .bet-block>strong{font-size:1.3em}
.hero-copy .crew{margin-top:8px}
.reel-settle{height:133.333333%;display:flex;flex-direction:column;will-change:transform}.reel-settle .symbol{height:25%}

/* Three independent HUD columns; free-spin heading sits above the plaque. */
.hud{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;padding:14px 8% 3px}
.hud .balance-block,.hud .bet-block{width:100%;height:auto;text-align:center;opacity:1;display:block;border:0}
.hud .balance-block>small,.hud .bet-block>small{top:-17px;left:50%;font-size:.59em;letter-spacing:.04em}
.is-free .hud{grid-template-columns:1fr 1fr 1.3fr;padding-left:8%;padding-right:8%}
.is-free .hud .balance-block,.is-free .hud .bet-block{display:block;opacity:1}
.is-free .hud .free-block{display:flex;position:relative;width:100%;height:auto;align-items:center;justify-content:center;text-align:center}
.is-free .hud .free-block small{position:absolute;top:-21px;left:0;width:100%;margin:0;font-size:.49em;line-height:1.1;color:#332013;font-weight:700;text-shadow:0 1px 0 #ffe6b9}
.is-free .hud .free-block strong{position:absolute;top:-12px;left:0;width:100%;font-size:.8em;line-height:1;margin:0;color:#332013;text-shadow:0 1px 0 #ffe6b9}
.is-free .hud .free-block span{font-size:.55em;line-height:1.2;color:#ffe5ac}
.is-free .hud .balance-block>strong,.is-free .hud .bet-block>strong{font-size:1.1em}
#prize-character-name{display:none}
#prize-character{top:-3%;left:13%;width:74%;mask-image:linear-gradient(90deg,transparent,#000 8% 92%,transparent),linear-gradient(#000 0 84%,transparent 96%)}
#prize-art{height:60%;bottom:0;width:84%;left:8%}.prize-scene{height:clamp(190px,34dvh,340px)}

/* Compact amounts centred in the illustrated plaque opening. */
.hud{padding:0 8%;align-items:center;background-size:100% 95%;background-position:center bottom}
.hud .balance-block,.hud .bet-block{transform:translateY(1px)}
.hud .balance-block>strong,.hud .bet-block>strong,.is-free .hud .balance-block>strong,.is-free .hud .bet-block>strong{font-size:1em;line-height:1;display:block}
.hud .balance-block>small,.hud .bet-block>small{top:-17px}
/* Restore the earlier celebration proportions only. */
#prize-character{top:-8%;left:19%;width:62%}
#prize-art{bottom:4%;height:72%;width:90%;left:5%}
.prize-scene{height:clamp(180px,30dvh,310px)}
@media(max-width:420px){.prize-scene{height:clamp(150px,26dvh,260px)}}

/* Smaller celebration character, with the chest below the face and shoulders. */
#prize-character{width:48%;left:26%;top:3%;aspect-ratio:1}
#prize-art{width:82%;left:9%;height:66%;bottom:-7%}
.prize-scene{margin-bottom:16px}

/* Collectibles render in front of the rustic reel trim for every character. */
.collect-fly{z-index:12}

/* Consistent, themed rules and history sheets. */
#info{color:#fff2cf;background:radial-gradient(ellipse at top,#194d48,#061f29 80%);border:2px solid #d8b76a;border-radius:20px;padding:26px 22px;max-width:min(92vw,620px);max-height:85dvh;box-shadow:0 24px 80px #000b;overflow:auto}#info::backdrop{background:#00171dc9;backdrop-filter:blur(5px)}#info h2{color:#ffe4a0;border-bottom:1px solid #d8b76a66;padding:0 32px 16px 0;margin-top:0;font-size:1.45rem}#info #close,#info .close{position:sticky;float:right;top:0;width:36px;height:36px;border-radius:50%;background:#153c3c;border:1px solid #d8b76a;color:#ffe4a0;font-size:24px}#info table{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}#info th{color:#e8cf8e;font-size:.8em;text-transform:uppercase;letter-spacing:.04em}#info td,#info th{padding:12px 8px;border-bottom:1px solid #d8b76a30}#info tr:nth-child(even){background:#ffffff06}#info td:not(:first-child),#info th:not(:first-child){text-align:right}#info p{line-height:1.65}#info button:focus-visible{outline:3px solid #fff0b8;outline-offset:3px}

#info{width:min(88vw,580px)}

/* Compact bonus totals and show each confirmed boosted award in the existing win cell. */
.is-free .hud #free-win{display:block;font-size:.43em;line-height:1.1;white-space:nowrap;margin-top:12px}
.is-free .message{font-size:.78em;line-height:1.08;padding-left:9%;padding-right:9%}
#info .bonus-breakdown{display:block;font-size:.74em;color:#dfc789;white-space:nowrap}
#prize-continue{border:0!important;outline:0!important;box-shadow:none!important}
#prize-continue:focus-visible{box-shadow:0 0 0 3px #e8c16d!important}