*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;font-family:Georgia,"Times New Roman",serif;background:#02110b;color:#fff}
body{overflow:hidden}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.game{position:relative;width:100%;height:100dvh;min-height:620px;overflow:hidden;background:#061a13 url("assets/waterfall_day_hd.png") center/cover no-repeat}
.game:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,20,12,.04),rgba(0,8,5,.25));pointer-events:none}
.game:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 90px rgba(0,0,0,.3);pointer-events:none}
.topbar{position:relative;z-index:5;width:min(1420px,94vw);height:270px;margin:0 auto;display:grid;grid-template-columns:440px minmax(0,1fr);gap:30px;align-items:start}
.logo{width:440px;height:155px;margin-top:5px;object-fit:contain;filter:drop-shadow(0 7px 5px rgba(0,0,0,.78))}
.jackpots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:58px}
.jackpot{height:78px;min-width:0;padding:7px 11px;display:flex;align-items:center;justify-content:space-between;gap:8px;overflow:hidden;background:url("assets/leafy_wood_panel.png") center/100% 100% no-repeat;filter:drop-shadow(0 5px 4px rgba(0,0,0,.72))}
.jackpot span,.jackpot b{white-space:nowrap;text-shadow:0 2px 2px #000;font-weight:900;line-height:1}
.jackpot span{font-size:clamp(16px,1.55vw,25px);padding:7px 9px;border-radius:12px}
.jackpot b{font-size:clamp(18px,1.6vw,27px);color:#fff7bd}
.grand span{background:linear-gradient(#e85a1c,#8d1908)}
.major span{background:linear-gradient(#9c36c8,#4b0870)}
.minor span{background:linear-gradient(#1bc7ee,#05709e)}
.mini span{background:linear-gradient(#86e61d,#257400)}
.cabinet{position:relative;z-index:2;width:min(1180px,82vw);height:min(540px,calc(100dvh - 500px));min-height:450px;margin:0 auto;display:grid;grid-template-columns:88px minmax(0,1fr) 88px;align-items:start}
.reel-area{min-width:0}
.strip{position:absolute;left:0;right:0;top:0;will-change:transform;display:flex;flex-direction:column}
.symbol.win{animation:win .42s infinite alternate}
.symbol.win:after{content:"";position:absolute;inset:6px;border:3px solid #ffe552;border-radius:10px;box-shadow:0 0 18px #ffd000}
.line-overlay{position:absolute;inset:10px;z-index:4;pointer-events:none;opacity:0;transition:opacity .15s}.line-overlay.preview{opacity:.88}
.payline{fill:none;stroke:#ffe44f;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px #ff8d00);opacity:.8}.payline.preview-line{stroke:#7fffe0;stroke-width:1.45;opacity:.8}.payline.winning-line{stroke:#ffe44f;stroke-width:3.2;opacity:1}
.effects{position:absolute;inset:0;z-index:10;pointer-events:none;overflow:hidden}
.spark{position:absolute;width:8px;height:8px;border-radius:50%;background:#ffe46a;box-shadow:0 0 12px #fff36a;animation:spark .8s ease-out forwards}
.win-banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.7);padding:13px 25px;border:4px solid #ffe269;border-radius:20px;background:linear-gradient(#f8c52d,#bd3d08);box-shadow:0 0 0 4px #662605,0 15px 35px #000;animation:pop .7s forwards;display:flex;gap:12px;align-items:center;white-space:nowrap}
.win-banner img{width:70px;height:70px;object-fit:contain}
.win-banner b{font:900 44px Georgia,serif;text-shadow:0 3px #641e00}
.lines{height:calc(100% - 46px);display:flex;align-items:center;justify-content:center}
.lines:before{content:"";position:absolute;width:90px;height:170px;background:url("assets/leafy_wood_panel.png") center/100% 100% no-repeat;opacity:.55;filter:drop-shadow(0 6px 5px rgba(0,0,0,.7));z-index:-1}
.lines img{width:70px;height:auto;filter:drop-shadow(0 7px 5px rgba(0,0,0,.8))}
.under{height:46px;position:relative;display:flex;justify-content:center;align-items:center}
.monkey{position:absolute;left:-35px;bottom:-17px;width:92px;height:auto;filter:drop-shadow(0 6px 4px rgba(0,0,0,.8))}
.status-wrap{display:flex;align-items:center;gap:7px;position:relative}.line-picker{position:absolute;z-index:30;left:50%;top:calc(100% + 8px);transform:translateX(-50%);width:260px;padding:12px;border:2px solid #e7bd54;border-radius:14px;background:linear-gradient(#174b2d,#071e13);box-shadow:0 12px 28px #000b;color:#fff1b0;text-align:center}.line-picker[hidden]{display:none}.line-picker>span{display:block;font-weight:900;font-size:12px;margin-bottom:8px}.line-picker-options{display:flex;gap:6px;justify-content:center}.line-picker-options button{min-width:38px;padding:8px 6px;border:1px solid #f4d46c;border-radius:8px;background:#704019;color:#fff4b0;font-weight:900;cursor:pointer}.line-picker-options button.active{background:#e9bd35;color:#241303;box-shadow:0 0 0 2px #fff2a0}.line-picker small{display:block;font-size:10px;margin-top:8px;opacity:.85}
.status{min-width:245px;height:40px;padding:7px 20px;border:3px solid transparent;border-image:url("assets/wood_panel_small.png") 30 stretch;background:#07351d;color:#f9e99b;text-align:center;font-weight:900;font-size:17px;text-shadow:0 2px #000;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.risk-chip{display:none;border:2px solid #ffe28a;border-radius:10px;background:linear-gradient(#b77b1c,#5d260b);color:#fff4b5;font-weight:900;padding:7px 10px;text-shadow:0 2px #000}
.risk-chip.visible{display:block}
.controls{position:absolute;z-index:6;left:50%;bottom:10px;transform:translateX(-50%);width:min(1180px,82vw);height:132px;display:grid;grid-template-columns:68px 280px minmax(330px,420px) 175px 175px;align-items:center;justify-content:center;gap:10px;padding:7px 16px;background:url("assets/leafy_wood_banner.png") center/100% 100% no-repeat;filter:drop-shadow(0 8px 7px rgba(0,0,0,.8))}
.utility{display:flex;align-items:center;justify-content:center}
.utility-btn{width:60px;height:60px;border:0;background:none;padding:0}
.utility-btn img{width:100%;height:100%;object-fit:contain}
.panel{height:82px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:url("assets/wood_panel_small.png") center/100% 100% no-repeat;text-shadow:0 2px #000;overflow:hidden}
.panel span{font-weight:900;font-size:18px;color:#ffe89a;line-height:1}
.panel b{font-weight:900;font-size:29px;white-space:nowrap;line-height:1.05}
.bet-control{height:92px;display:grid;grid-template-columns:70px minmax(0,1fr) 70px;align-items:center;gap:4px}
.round-btn{width:70px;height:70px;border:0;background:none;padding:0}
.round-btn img{width:100%;height:100%;object-fit:contain}
.bet-panel{height:82px}
.action{border:0;background:none;padding:0;display:flex;align-items:center;justify-content:center}
.action img{width:100%;height:auto;object-fit:contain}
.auto img{max-width:175px}
.spin img{max-width:175px}
.mobile-balances,.mobile-controls{display:none}
.modal{position:fixed;inset:0;z-index:50;display:none;place-items:center;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);padding:20px}
.modal.open{display:grid}
.modal-card,.bonus-card,.risk-card{position:relative;width:min(760px,96vw);max-height:90dvh;overflow:auto;padding:26px 28px 24px;background:linear-gradient(180deg,#1a4b2b,#092318);border:2px solid #d6b45a;
  outline:1px solid rgba(255,232,154,.55);outline-offset:-7px;
  box-shadow:0 0 0 4px #173d22,0 0 0 6px #9a742c,0 24px 70px #000;
  border-radius:22px;
  background-image:radial-gradient(ellipse at 8px 8px,rgba(255,225,124,.95) 0 2px,transparent 3px),
    radial-gradient(ellipse at calc(100% - 8px) 8px,rgba(255,225,124,.95) 0 2px,transparent 3px),
    radial-gradient(ellipse at 8px calc(100% - 8px),rgba(255,225,124,.95) 0 2px,transparent 3px),
    radial-gradient(ellipse at calc(100% - 8px) calc(100% - 8px),rgba(255,225,124,.95) 0 2px,transparent 3px),
    linear-gradient(180deg,#174b2b,#092318)}
.modal-card h2,.bonus-card h2,.risk-card h2{text-align:center;margin:0;color:#ffe99b;font-size:32px;text-shadow:0 3px #000}
.modal-sub{text-align:center;margin:5px 0 18px;color:#d9efc0}
.modal-close{position:absolute;right:14px;top:14px;width:42px;height:42px;border:2px solid #ffe49a;border-radius:50%;background:linear-gradient(#a54b19,#54200b);color:#fff;font-size:30px;line-height:1;z-index:60;box-shadow:0 2px 8px #0008}
#infoModal .modal-card{padding-top:68px}
#infoModal .modal-close{top:12px;right:12px}
#infoModal .modal-card h2{padding-right:42px}
#phoenix-shell-controls{z-index:45!important}
.paytable{display:grid;gap:5px}
.pay-row{display:grid;grid-template-columns:minmax(170px,1fr) repeat(3,70px);gap:6px;align-items:center;padding:4px 8px;background:rgba(0,0,0,.28);border-radius:8px}
.pay-row span{display:flex;align-items:center;gap:8px;font-weight:900}
.pay-row img{width:40px;height:40px;object-fit:contain}
.pay-head{color:#ffe89a;background:rgba(125,75,18,.5)}
.pay-row b{text-align:center}
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.rules-grid>div{display:grid;grid-template-columns:55px 1fr;column-gap:8px;align-items:center;padding:8px;background:rgba(0,0,0,.24);border-radius:10px}
.rules-grid img{width:52px;height:52px;object-fit:contain;grid-row:span 2}
.rules-grid strong{color:#ffe89a}
.rules-grid small{color:#d7e8cf}
.modal-note{text-align:center;color:#d7e8cf;font-size:13px;margin:15px 0 0}
.bonus-card{text-align:center;width:min(680px,94vw);background:radial-gradient(circle at 50% 0,#3c6e31,#092318 70%)}
.bonus-monkey{width:100px;filter:drop-shadow(0 8px 4px #000);margin-top:-20px}
.bonus-card p{color:#e9f4d2;margin:6px 0 15px}
.coconut-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:500px;margin:0 auto}
.coconut-choice{height:145px;border:4px solid #6d3a13;border-radius:16px;background:linear-gradient(#5c3b16,#281508);box-shadow:inset 0 0 18px #000,0 6px 10px #0006;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#ffe99b;font-weight:900}
.coconut-choice img{width:90px;height:90px;object-fit:contain;filter:drop-shadow(0 5px 3px #000)}
.coconut-choice span{font-size:14px}
.coconut-choice.opened{background:linear-gradient(#24572b,#0b2516);border-color:#d3a844}
.bonus-total{margin-top:15px;font-size:22px;color:#ffe99b}
.bonus-total b{font-size:28px}
.risk-card{width:min(620px,94vw);text-align:center}
.risk-card p{color:#e8f3d6}
.risk-section{margin-top:14px;padding:12px;background:#0004;border-radius:12px}
.risk-section>strong{display:block;color:#ffe99b;margin-bottom:8px}
.risk-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.risk-actions button{min-height:52px;border:2px solid #c9953d;border-radius:10px;background:linear-gradient(#73451b,#3a1d0c);color:#fff5c7;font-weight:900}
.risk-actions.suits{grid-template-columns:repeat(4,1fr)}
@keyframes win{
  from{filter:brightness(1)}
  to{filter:brightness(1.5) drop-shadow(0 0 8px #ffe84a)}
}
@keyframes spark{
  0%{opacity:0;transform:scale(.2)}
  25%{opacity:1}
  100%{opacity:0;transform:scale(1.8) rotate(180deg)}
}
@keyframes pop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  55%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@media (max-width:1300px) and (min-width:901px){
  .topbar,.cabinet,.controls{width:96vw}
  .topbar{grid-template-columns:370px minmax(0,1fr);gap:20px}
  .logo{width:370px}
  .jackpot{padding:6px}
  .jackpot span{font-size:17px}
  .jackpot b{font-size:18px}
  .cabinet{grid-template-columns:76px minmax(0,1fr) 76px}
  .controls{grid-template-columns:60px 250px minmax(300px,1fr) 150px 165px}
  .panel b{font-size:25px}
}
@media (max-width:900px){
  body{overflow:hidden}
  .game{height:100dvh;min-height:0;background-position:center center;background-size:cover}
  .topbar{width:100%;height:150px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 7px}
  .logo{width:min(320px,76vw);height:84px;margin:0}
  .jackpots{width:100%;height:52px;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
  .jackpot{height:52px;padding:3px 4px;justify-content:center;gap:3px}
  .jackpot span{font-size:clamp(9px,2.5vw,14px);padding:4px 4px}
  .jackpot b{font-size:clamp(10px,2.7vw,15px);letter-spacing:-.3px}
  .cabinet{width:100%;height:calc(100dvh - 330px);min-height:390px;max-height:860px;grid-template-columns:48px minmax(0,1fr) 48px}
  .lines{height:calc(100% - 40px)}
  .lines:before{width:56px;height:155px;opacity:.7}
  .lines img{width:43px}
  .line-overlay{inset:5px}
  .under{height:40px}
  .monkey{left:-26px;bottom:-16px;width:76px}
  .status-wrap{gap:4px}
  .status{min-width:145px;max-width:55vw;font-size:11px;height:32px;padding:5px 10px}
  .risk-chip{font-size:9px;padding:5px 6px}
  .controls{display:none}
  .mobile-balances{position:absolute;z-index:7;bottom:78px;left:7px;width:calc(100% - 14px);height:55px;display:grid;grid-template-columns:1fr 1fr;gap:5px}
  .mobile-balances .panel{height:55px}
  .mobile-balances .panel span{font-size:10px}
  .mobile-balances .panel b{font-size:17px}
  .mobile-controls{position:absolute;z-index:8;bottom:2px;left:3px;width:calc(100% - 6px);height:78px;display:grid;grid-template-columns:55px minmax(90px,1fr) 92px 55px 38px;align-items:center;gap:3px;background:url("assets/leafy_wood_banner.png") center/100% 100% no-repeat}
  .mobile-controls button{border:0;background:none;padding:0;display:flex;justify-content:center;align-items:center}
  .mobile-controls img{max-width:100%;height:60px;object-fit:contain}
  .mobile-controls #mspin img{height:75px}
  .mobile-controls #mauto img{height:58px}
  .mobile-info{position:absolute!important;left:0;top:-39px;width:36px;height:36px}
  .mobile-info img{width:100%;height:100%!important}
  .risk-chip.visible{display:block}
  .coconut-grid{gap:7px}
  .coconut-choice{height:110px}
  .coconut-choice img{width:68px;height:68px}
}
@media (max-width:520px){
  .topbar{height:148px}
  .logo{width:275px;height:77px}
  .jackpots{height:49px}
  .jackpot{height:49px;padding:2px}
  .jackpot span{font-size:8px;padding:3px 3px}
  .jackpot b{font-size:10px}
  .cabinet{height:calc(100dvh - 326px);min-height:380px;grid-template-columns:40px minmax(0,1fr) 40px}
  .lines{height:calc(100% - 38px)}
  .lines:before{width:49px;height:145px}
  .lines img{width:36px}
  .mobile-balances{bottom:79px}
  .mobile-balances .panel b{font-size:16px}
  .mobile-controls{height:77px;grid-template-columns:52px minmax(80px,1fr) 88px 52px 36px}
  .mobile-controls img{height:58px}
  .mobile-controls #mspin img{height:72px}
  .mobile-info{top:-38px}
  .bonus-card{padding:20px 12px}
  .coconut-choice{height:100px}
  .coconut-choice img{width:60px;height:60px}
}
@media (max-width:380px){
  .topbar{height:145px}
  .logo{width:245px;height:70px}
  .jackpots{height:47px}
  .jackpot{height:47px;flex-direction:column;justify-content:center;gap:1px}
  .jackpot span{font-size:8px}
  .jackpot b{font-size:9px}
  .cabinet{height:calc(100dvh - 320px);min-height:355px}
  .mobile-balances{bottom:77px}
  .mobile-controls{height:75px}
  .mobile-balances .panel b{font-size:14px}
}
.bonus-info{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.bonus-info>div{padding:10px;background:rgba(0,0,0,.24);border:1px solid rgba(255,220,120,.2);border-radius:10px}
.bonus-info strong{display:block;color:#ffe89a;margin-bottom:4px}
.bonus-info small{display:block;color:#d7e8cf;line-height:1.3}
@media (max-width:900px){
  .bonus-info{grid-template-columns:1fr}
  .modal-card{padding:20px 14px}
  .pay-row{grid-template-columns:minmax(140px,1fr) repeat(3,48px);font-size:12px}
  .pay-row img{width:34px;height:34px}
}
.bonus-card .modal-close{display:none}
/* ---------- final layout polish ---------- */
@media (min-width:901px){
  .topbar{height:292px;grid-template-columns:450px minmax(0,1fr);gap:28px;align-items:start}
  .logo{width:450px;height:160px;margin-top:4px}
  .jackpots{margin-top:142px;gap:9px;grid-template-columns:repeat(4,minmax(0,1fr))}
  .jackpot{height:78px;padding:7px 12px;justify-content:flex-start;gap:7px}
  .jackpot span{flex:0 0 auto;font-size:clamp(15px,1.35vw,23px);padding:6px 8px}
  .jackpot b{flex:1 1 auto;min-width:0;text-align:center;font-size:clamp(17px,1.4vw,25px);letter-spacing:-.2px}
  .cabinet{margin-top:8px}
  .lines{position:relative;overflow:visible}
  .lines:before{display:none}
  .side-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 8px 7px rgba(0,0,0,.65));z-index:0}
  .lines-badge{position:relative;z-index:2;width:70px;height:auto;filter:drop-shadow(0 7px 5px rgba(0,0,0,.8))}
  .sound-toggle{position:absolute;right:12px;top:10px;width:58px;height:58px;border:0;background:none;padding:0;z-index:12;filter:drop-shadow(0 4px 4px rgba(0,0,0,.7))}
  .sound-toggle img{width:100%;height:100%;object-fit:contain}
}
@media (max-width:1300px) and (min-width:901px){
  .topbar{height:292px;grid-template-columns:380px minmax(0,1fr);gap:20px}
  .logo{width:380px;height:145px}
  .jackpots{margin-top:137px;gap:5px}
  .jackpot{padding:5px 7px;gap:4px}
  .jackpot span{font-size:15px;padding:5px 6px}
  .jackpot b{font-size:17px;letter-spacing:-.45px}
  .cabinet{grid-template-columns:86px minmax(0,1fr) 86px}
  .lines-badge{width:64px}
}
@media (max-width:900px){
  .topbar{height:150px}
  .cabinet{height:calc(100dvh - 318px);min-height:405px;max-height:880px}
  .lines{position:relative;overflow:visible}
  .lines:before{display:none}
  .side-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 5px 4px rgba(0,0,0,.7));z-index:0}
  .lines-badge{position:relative;z-index:2;width:43px;height:auto;filter:drop-shadow(0 5px 4px rgba(0,0,0,.85))}
  .mobile-sound{position:absolute!important;right:0;top:-39px;width:36px;height:36px;border:0;background:none;padding:0;z-index:3}
  .mobile-sound img{width:100%;height:100%!important;object-fit:contain}
  .mobile-info{left:0;top:-39px}
  .modal{padding:8px}
  .modal-card,.bonus-card,.risk-card{width:min(96vw,560px);max-height:92dvh;padding:16px 12px 14px;border-width:6px;border-radius:14px;box-shadow:0 16px 45px #000}
  .modal-card h2,.bonus-card h2,.risk-card h2{font-size:23px;padding-right:28px}
  .modal-sub{font-size:12px;margin:3px 0 10px}
  .modal-close{right:5px;top:5px;width:34px;height:34px;font-size:24px}
  .paytable{gap:3px}
  .pay-row{grid-template-columns:minmax(120px,1fr) repeat(3,40px);gap:3px;padding:3px 5px;font-size:10px}
  .pay-row img{width:28px;height:28px}
  .pay-row span{gap:4px}
  .rules-grid{gap:6px;margin-top:8px}
  .rules-grid>div{grid-template-columns:38px 1fr;column-gap:5px;padding:6px}
  .rules-grid img{width:36px;height:36px}
  .rules-grid strong{font-size:11px}
  .rules-grid small,.bonus-info small{font-size:9px;line-height:1.2}
  .bonus-info{gap:6px;margin-top:8px}
  .bonus-info>div{padding:7px}
  .bonus-info strong{font-size:10px;margin-bottom:2px}
  .modal-note{font-size:9px;margin:8px 0 0}
  .bonus-card .bonus-monkey{width:70px;margin-top:-10px}
  .bonus-card p{font-size:11px;margin:4px 0 8px}
  .coconut-grid{gap:5px;max-width:340px}
  .coconut-choice{height:84px;border-width:3px;border-radius:11px}
  .coconut-choice img{width:52px;height:52px}
  .coconut-choice span{font-size:10px}
  .bonus-total{margin-top:8px;font-size:17px}
  .bonus-total b{font-size:21px}
  .risk-card p{font-size:11px;margin:6px 0}
  .risk-section{margin-top:8px;padding:8px}
  .risk-actions button{min-height:42px;font-size:11px}
}
@media (max-width:520px){
  .jackpot span{font-size:7.5px;padding:3px 2px}
  .jackpot b{font-size:9.5px;letter-spacing:-.55px}
  .cabinet{height:calc(100dvh - 312px);min-height:390px;grid-template-columns:40px minmax(0,1fr) 40px}
  .lines-badge{width:36px}
  .side-art{width:100%;height:100%}
}
@media (max-width:380px){
  .jackpot span{font-size:7px}
  .jackpot b{font-size:8.5px}
  .cabinet{height:calc(100dvh - 306px);min-height:365px}
  .lines-badge{width:32px}
  .mobile-sound,.mobile-info{width:33px;height:33px;top:-36px}
}
.lines-badge{display:none}
@media (min-width:901px){
  .cabinet{grid-template-columns:100px minmax(0,1fr) 100px}
  .side-art{width:100%;height:100%;object-fit:fill}
  .reel-area{min-width:0}
}
@media (max-width:1300px) and (min-width:901px){
  .cabinet{grid-template-columns:90px minmax(0,1fr) 90px}
}
@media (min-width:901px){
  .topbar{width:min(1180px,94vw);height:245px;display:flex;flex-direction:column;align-items:center;gap:4px;margin:0 auto}
  .logo{width:430px;height:140px;margin:0;object-fit:contain}
  .jackpots{width:min(940px,92vw);height:78px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .jackpot{height:78px;padding:8px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;overflow:hidden}
  .jackpot span{font-size:clamp(17px,1.35vw,23px);padding:4px 10px;line-height:1}
  .jackpot b{font-size:clamp(18px,1.45vw,25px);line-height:1;flex:none;min-width:0;text-align:center;letter-spacing:0}
  .cabinet{width:min(1220px,92vw);height:min(500px,calc(100dvh - 405px));min-height:420px;margin:6px auto 0;grid-template-columns:96px minmax(0,1fr) 96px}
  .cabinet .lines{height:calc(100% - 46px)}
  .side-art{position:absolute;left:50%;top:0;width:auto !important;height:100% !important;max-width:none;transform:translateX(-50%);object-fit:contain !important;z-index:0}
  .lines-badge{display:none}
  .controls{width:min(1220px,92vw);height:118px;grid-template-columns:62px 250px minmax(300px,390px) 155px 175px;gap:8px;padding:6px 14px;bottom:6px}
  .panel{height:76px}
  .panel span{font-size:17px}
  .panel b{font-size:28px}
  .bet-control{height:82px;grid-template-columns:62px minmax(0,1fr) 62px}
  .round-btn{width:62px;height:62px}
  .bet-panel{height:76px}
  .auto img{max-width:155px}
  .spin img{max-width:175px}
  .sound-toggle{top:10px;right:12px}
}
@media (max-width:1300px) and (min-width:901px){
  .topbar{height:232px}
  .logo{width:390px;height:128px}
  .jackpots{width:min(850px,92vw);height:72px;gap:7px}
  .jackpot{height:72px}
  .jackpot span{font-size:15px}
  .jackpot b{font-size:17px}
  .cabinet{width:96vw;grid-template-columns:84px minmax(0,1fr) 84px;height:min(480px,calc(100dvh - 385px))}
  .controls{width:96vw;grid-template-columns:56px 220px minmax(280px,1fr) 140px 160px}
  .panel b{font-size:25px}
}
@media (max-width:900px){
  .topbar{height:150px}
  .cabinet{height:calc(100dvh - 320px);min-height:390px;grid-template-columns:42px minmax(0,1fr) 42px}
  .side-art{position:absolute;left:50%;top:0;width:auto !important;height:100% !important;max-width:none;transform:translateX(-50%);object-fit:contain !important;z-index:0}
  .lines-badge{display:none}
  .mobile-balances{bottom:79px}
}
@media (max-width:520px){
  .cabinet{height:calc(100dvh - 314px);min-height:380px;grid-template-columns:36px minmax(0,1fr) 36px}
}
@media (max-width:380px){
  .cabinet{height:calc(100dvh - 306px);min-height:355px}
}
/* Mobile dialogs: compact, centered and fully contained inside the viewport. */
@media (max-width:900px){
  .modal{padding:7px;align-items:center}
  .modal-card,.bonus-card,.risk-card{width:calc(100vw - 18px);max-width:500px;max-height:calc(100dvh - 18px);padding:14px 10px 12px;border-width:5px;border-radius:12px;overflow:auto}
  .modal-card h2,.bonus-card h2,.risk-card h2{font-size:21px;line-height:1.05;margin:0 26px 4px}
  .modal-sub{font-size:10px;margin:2px 0 7px}
  .modal-close{width:31px;height:31px;right:4px;top:4px;font-size:22px}
  .pay-row{grid-template-columns:minmax(0,1fr) repeat(3,38px);font-size:9px;padding:2px 4px;gap:2px}
  .pay-row img{width:25px;height:25px}
  .pay-row span{gap:3px}
  .rules-grid{grid-template-columns:1fr;gap:4px;margin-top:6px}
  .rules-grid>div{grid-template-columns:34px 1fr;column-gap:4px;padding:5px}
  .rules-grid img{width:32px;height:32px}
  .rules-grid strong{font-size:10px}
  .rules-grid small,.bonus-info small{font-size:8.5px}
  .bonus-info{grid-template-columns:1fr;gap:4px;margin-top:6px}
  .bonus-info>div{padding:6px}
  .bonus-info strong{font-size:9px}
  .modal-note{font-size:8px;margin:6px 0 0}
  .bonus-card .bonus-monkey{width:58px;margin-top:-8px}
  .bonus-card p{font-size:10px;margin:3px 0 6px}
  .coconut-grid{grid-template-columns:repeat(3,1fr);gap:4px;max-width:310px}
  .coconut-choice{height:72px;border-width:2px;border-radius:9px}
  .coconut-choice img{width:46px;height:46px}
  .coconut-choice span{font-size:9px}
  .bonus-total{margin-top:6px;font-size:15px}
  .bonus-total b{font-size:19px}
  .risk-card p{font-size:10px;margin:4px 0}
  .risk-section{margin-top:6px;padding:6px}
  .risk-actions{gap:5px}
  .risk-actions button{min-height:38px;font-size:10px}
  .risk-actions.suits{grid-template-columns:repeat(4,1fr)}
}
.reel-area{position:relative}
.side-art{display:none !important}
.lines{position:relative;overflow:visible;z-index:4}
.side-rail{display:none !important}
.lines-left .side-rail{background-image:url("assets/reel_side_left_clean.png")}
.lines-right .side-rail{background-image:url("assets/reel_side_right_clean.png")}
.lines-badge{display:block !important;position:relative;z-index:5;width:62px;height:auto;filter:drop-shadow(0 6px 5px rgba(0,0,0,.85))}
/* Desktop sound control stays in the upper-right corner. */
.sound-toggle{position:absolute;right:18px;top:16px;width:58px;height:58px;border:0;background:none;padding:0;z-index:20;filter:drop-shadow(0 4px 4px rgba(0,0,0,.7))}
.sound-toggle img{width:100%;height:100%;object-fit:contain}
.mobile-sound{display:none}
@media (min-width:901px){
  .topbar{width:min(1180px,94vw);height:230px;display:flex;flex-direction:column;align-items:center;gap:4px;margin:0 auto}
  .logo{width:430px;height:136px;margin:0;object-fit:contain}
  .jackpots{width:min(940px,92vw);height:78px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .jackpot{height:78px;min-width:0;padding:7px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;overflow:visible}
  .jackpot span,.jackpot b{display:block;max-width:100%;overflow:visible}
  .jackpot span{font-size:clamp(17px,1.35vw,23px);padding:4px 10px;line-height:1}
  .jackpot b{font-size:clamp(18px,1.45vw,25px);line-height:1;white-space:nowrap;min-width:max-content;text-align:center;letter-spacing:0}
  .cabinet{width:min(1220px,92vw);height:calc(100dvh - 230px - 132px - 24px);min-height:390px;max-height:700px;margin:6px auto 0;grid-template-columns:82px minmax(0,1fr) 82px}
  .cabinet .lines{height:calc(100% - 40px)}
  .reel-area{min-width:0;height:100%}
  .controls{width:min(1220px,92vw);height:118px;grid-template-columns:62px 250px minmax(300px,390px) 155px 175px;gap:8px;padding:6px 14px;bottom:6px}
  .panel{height:76px}
  .panel span{font-size:17px}
  .panel b{font-size:28px}
  .bet-control{height:82px;grid-template-columns:62px minmax(0,1fr) 62px}
  .round-btn{width:62px;height:62px}
  .bet-panel{height:76px}
  .auto img{max-width:155px}
  .spin img{max-width:175px}
}
@media (min-width:901px) and (min-height:850px){
  .cabinet{height:calc(100dvh - 230px - 132px - 24px);max-height:700px}
}
@media (max-width:1300px) and (min-width:901px){
  .topbar{height:224px}
  .logo{width:390px;height:126px}
  .jackpots{width:min(860px,92vw);height:72px;gap:7px}
  .jackpot{height:72px;padding:5px 7px}
  .jackpot span{font-size:15px}
  .jackpot b{font-size:17px}
  .cabinet{width:96vw;grid-template-columns:72px minmax(0,1fr) 72px;height:calc(100dvh - 224px - 128px - 22px);min-height:380px;max-height:640px}
  .controls{width:96vw;grid-template-columns:56px 220px minmax(280px,1fr) 140px 160px}
  .panel b{font-size:25px}
  .lines-badge{width:56px}
}
@media (max-width:900px){
  .sound-toggle{display:none}
  .mobile-sound{display:flex !important;position:absolute!important;right:0;top:-39px;width:36px;height:36px;border:0;background:none;padding:0;z-index:12}
  .mobile-sound img{width:100%;height:100%!important;object-fit:contain}
  .cabinet{grid-template-columns:38px minmax(0,1fr) 38px;height:calc(100dvh - 314px);min-height:380px;max-height:820px}
  .cabinet .lines{height:calc(100% - 40px)}
  .side-rail{top:6%;bottom:6%;width:30px}
  .lines-badge{width:32px}
}
@media (max-width:520px){
  .cabinet{grid-template-columns:32px minmax(0,1fr) 32px;height:calc(100dvh - 310px);min-height:370px}
  .side-rail{width:26px;top:7%;bottom:7%}
  .lines-badge{width:29px}
}
@media (max-width:380px){
  .cabinet{grid-template-columns:29px minmax(0,1fr) 29px;height:calc(100dvh - 304px);min-height:355px}
  .side-rail{width:24px}
  .lines-badge{width:27px}
  .mobile-sound{width:33px;height:33px;top:-36px}
}
/* Mobile dialogs: compact, centered and fully contained inside the viewport. */
@media (max-width:900px){
  .modal{padding:7px;align-items:center}
  .modal-card,.bonus-card,.risk-card{width:calc(100vw - 18px);max-width:500px;max-height:calc(100dvh - 18px);padding:14px 10px 12px;border-width:5px;border-radius:12px;overflow:auto}
  .modal-card h2,.bonus-card h2,.risk-card h2{font-size:21px;line-height:1.05;margin:0 26px 4px}
  .modal-sub{font-size:10px;margin:2px 0 7px}
  .modal-close{width:31px;height:31px;right:4px;top:4px;font-size:22px}
  .pay-row{grid-template-columns:minmax(0,1fr) repeat(3,38px);font-size:9px;padding:2px 4px;gap:2px}
  .pay-row img{width:25px;height:25px}
  .pay-row span{gap:3px}
  .rules-grid{grid-template-columns:1fr;gap:4px;margin-top:6px}
  .rules-grid>div{grid-template-columns:34px 1fr;column-gap:4px;padding:5px}
  .rules-grid img{width:32px;height:32px}
  .rules-grid strong{font-size:10px}
  .rules-grid small,.bonus-info small{font-size:8.5px}
  .bonus-info{grid-template-columns:1fr;gap:4px;margin-top:6px}
  .bonus-info>div{padding:6px}
  .bonus-info strong{font-size:9px}
  .modal-note{font-size:8px;margin:6px 0 0}
  .bonus-card .bonus-monkey{width:58px;margin-top:-8px}
  .bonus-card p{font-size:10px;margin:3px 0 6px}
  .coconut-grid{grid-template-columns:repeat(3,1fr);gap:4px;max-width:310px}
  .coconut-choice{height:72px;border-width:2px;border-radius:9px}
  .coconut-choice img{width:46px;height:46px}
  .coconut-choice span{font-size:9px}
  .bonus-total{margin-top:6px;font-size:15px}
  .bonus-total b{font-size:19px}
  .risk-card p{font-size:10px;margin:4px 0}
  .risk-section{margin-top:6px;padding:6px}
  .risk-actions{gap:5px}
  .risk-actions button{min-height:38px;font-size:10px}
  .risk-actions.suits{grid-template-columns:repeat(4,1fr)}
}
/* The transparent source assets have asymmetric padding. Crop it at render
   time by using a slightly wider, centered texture box instead of allowing
   the artwork to spill into the page margins. */
/* Desktop / tablet */
/* Phone */
/* Keep the four decorative pieces crisp, without the heavy black halo. */
/* Slightly stronger wood body on very narrow phones. */
/* Bonus: five ropes + two-box super bonus */
.rope-grid{grid-template-columns:repeat(5,1fr);max-width:720px}
.rope-choice{height:150px;
  position:relative;
  overflow:hidden;
  border:2px solid #b57a26;
  border-radius:15px;
  background:
    radial-gradient(circle at 50% 10%,rgba(255,225,128,.15),transparent 42%),
    linear-gradient(180deg,#563615,#1c1007);
  box-shadow:inset 0 0 22px #000,0 7px 14px rgba(0,0,0,.55);
  transition:transform .16s ease,filter .16s ease,border-color .16s ease;}
.rope-choice:not(.opened):hover{transform:translateY(-3px);filter:brightness(1.15);border-color:#f3d06d}
.rope-choice .rope{font-size:55px;line-height:1;text-shadow:0 5px 4px #000}
.rope-choice strong{font-size:15px;color:#ffe99b;text-shadow:0 2px #000}
.rope-choice small{font-size:10px;color:#d8c28b;margin-top:3px}
.rope-choice.opened{background:linear-gradient(180deg,#173e25,#08180e);border-color:#d3a844}
.rope-choice img{width:62px;height:62px;object-fit:contain;filter:drop-shadow(0 5px 3px #000)}
.super-card{width:min(560px,94vw)}
.super-boxes{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:420px;margin:20px auto}
.super-box{min-height:180px;border:4px solid #b77a25;border-radius:18px;
  background:
    radial-gradient(circle at 50% 25%,rgba(255,227,128,.18),transparent 42%),
    linear-gradient(145deg,#6c451c,#281507 65%,#140b04);
  color:#ffe99b;font-size:64px;font-weight:900;
  box-shadow:inset 0 0 24px #000,0 10px 20px rgba(0,0,0,.55);
  transition:transform .16s ease,filter .16s ease;}
.super-box:not(:disabled):hover{transform:translateY(-4px);filter:brightness(1.15)}
.super-box.opened{background:linear-gradient(180deg,#275d31,#0c2314);border-color:#e0bb55}
.super-box span{filter:drop-shadow(0 4px 3px #000)}
/* Classic dealer-vs-player risk layout */
.classic-risk-card{width:min(700px,94vw)}
.risk-table{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center;margin:18px 0}
.dealer-wrap,.pick-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.dealer-wrap>span,.pick-wrap>span{font-weight:900;color:#ffe99b;font-size:12px;text-align:center}
.card-face,.risk-card-btn{width:92px;height:126px;border-radius:12px;
  border:3px solid #d5a545;
  background:linear-gradient(145deg,#fff,#d7d7d7);
  color:#17110b;font-size:34px;font-weight:900;
  box-shadow:0 8px 16px rgba(0,0,0,.55);}
.card-face.red,.risk-card-btn.red{color:#b51616}
.card-face.black,.risk-card-btn.black{color:#111}
.risk-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}
.risk-card-btn{width:100%;height:108px;font-size:30px;cursor:pointer}
.risk-card-btn:not(:disabled):hover{transform:translateY(-3px);filter:brightness(1.05)}
.risk-card-btn:disabled{cursor:default}
@media (max-width:900px){
  .rope-grid{grid-template-columns:repeat(5,1fr);gap:5px}
  .rope-choice{height:105px;border-radius:10px}
  .rope-choice .rope{font-size:36px}
  .rope-choice strong{font-size:10px}
  .rope-choice small{font-size:7px}
  .rope-choice img{width:43px;height:43px}
  .super-box{min-height:135px;font-size:50px}
  .risk-table{grid-template-columns:1fr;gap:10px}
  .dealer-wrap{order:0}
  .pick-wrap{order:1}
  .card-face{width:72px;height:94px;font-size:27px}
  .risk-card-btn{height:90px;font-size:24px}
}
@media (max-width:520px){
  .rope-choice{height:92px}
  .rope-choice .rope{font-size:29px}
  .rope-choice strong{font-size:8px}
  .rope-choice small{font-size:6px}
  .rope-choice img{width:36px;height:36px}
  .super-boxes{gap:10px;margin:12px auto}
  .super-box{min-height:120px}
  .classic-risk-card{padding:14px 10px}
}

/* ============================================================
   CLEAN REEL FRAME / 5x3 REELS
   The supplied reel-frame.png is the only reel-frame artwork.
   The reel window itself remains fully transparent.
   ============================================================ */

.frame{
  position:relative !important;
  box-sizing:border-box !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:16 / 9 !important;

  margin:0 !important;
  padding:16% 10.5% !important;
  border:0 !important;
  border-radius:0 !important;

  background-color:transparent !important;
  background-image:url('assets/reel-frame.png') !important;
  background-size:100% 100% !important;
  background-repeat:no-repeat !important;
  background-position:center !important;

  box-shadow:none !important;
  overflow:hidden !important;
  isolation:isolate !important;
  z-index:1 !important;
}

.frame .reels{
  position:relative !important;
  z-index:2 !important;

  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;

  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
  grid-template-rows:repeat(3, minmax(0, 1fr)) !important;

  gap:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

/* Each JS-created reel is one full-height column with three symbol cells. */
.frame .reel{
  grid-row:1 / -1 !important;
  position:relative !important;
  z-index:2 !important;

  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

.frame .strip{
  position:absolute !important;
  z-index:2 !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;

  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;

  background:transparent !important;
}

.frame .symbol{
  box-sizing:border-box !important;
  position:relative !important;
  z-index:3 !important;

  width:100% !important;
  height:var(--cell-h) !important;
  min-height:var(--cell-h) !important;
  flex:0 0 var(--cell-h) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
}

.frame .symbol img{
  position:relative !important;
  z-index:4 !important;

  display:block !important;
  width:88% !important;
  height:88% !important;
  max-width:100% !important;
  max-height:100% !important;

  object-fit:contain !important;
  user-select:none !important;
  -webkit-user-drag:none !important;
  filter:drop-shadow(0 5px 4px rgba(0,0,0,.65)) !important;
}

.frame .reel.spinning .symbol img{
  filter:blur(1.3px) drop-shadow(0 5px 4px rgba(0,0,0,.65)) !important;
}

/* Effects and paylines are confined to the illustrated reel opening. */
.frame > #lineOverlay,
.frame > #effects{
  position:absolute !important;
  z-index:20 !important;
  left:10.5% !important;
  right:10.5% !important;
  top:16% !important;
  bottom:16% !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}

/* Mobile keeps exactly the same 5x3 reel structure. */
@media(max-width:900px){
  .frame{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:16 / 9 !important;
    padding:16% 10.5% !important;
  }

  .frame .reels{
    display:grid !important;
    grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows:repeat(3, minmax(0, 1fr)) !important;
  }

  .frame .reel{
    display:block !important;
    grid-row:1 / -1 !important;
    width:100% !important;
    height:100% !important;
  }

  .frame .symbol img{
    width:88% !important;
    height:88% !important;
  }
}


/* ============================================================
   FINAL 5x3 SYMBOL ALIGNMENT — asset-accurate reel window
   The supplied reel-frame.png has a real inner opening that is
   not 16% from the top/bottom.  The previous padding shifted the
   top row down and squeezed the row centers toward the separators.
   This maps the DOM reel window to the actual transparent opening
   of the frame so every symbol is centered in its own cell.
   ============================================================ */
.frame{
  padding:0 !important;
  aspect-ratio:1536 / 865 !important;
  overflow:hidden !important;
}
.frame .reels{
  position:absolute !important;
  left:8.33% !important;
  top:12.25% !important;
  width:83.34% !important;
  height:70.87% !important;
  margin:0 !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  grid-template-rows:1fr !important;
  gap:0 !important;
  overflow:hidden !important;
}
.frame .reel{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}
.frame .strip{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
}
.frame .symbol{
  width:100% !important;
  height:var(--cell-h) !important;
  min-height:var(--cell-h) !important;
  flex:0 0 var(--cell-h) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:0 !important;
}
.frame .symbol img{
  width:82% !important;
  height:82% !important;
  max-width:82% !important;
  max-height:82% !important;
  object-fit:contain !important;
  display:block !important;
  margin:0 !important;
  transform:none !important;
}
.frame > #lineOverlay,
.frame > #effects{
  left:8.33% !important;
  right:8.33% !important;
  top:12.25% !important;
  bottom:16.88% !important;
  width:auto !important;
  height:auto !important;
}
@media(max-width:900px){
  .frame .reels{
    left:8.33% !important;
    top:12.25% !important;
    width:83.34% !important;
    height:70.87% !important;
  }
  .frame .symbol img{
    width:82% !important;
    height:82% !important;
    max-width:82% !important;
    max-height:82% !important;
  }
}
.panel.bet-panel small,.mobile-balances .panel small{display:block;font-size:.62em;opacity:.8;line-height:1.1}.status-wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.risk-chip{font:inherit;cursor:pointer}.mobile-info{font-size:16px}

/* Release polish: classic casino-gold paylines and a dedicated mobile status row. */
.payline{stroke:#ffd45a;stroke-width:2.15;opacity:.94;filter:drop-shadow(0 0 2px #5c2b00) drop-shadow(0 0 5px rgba(255,190,40,.7))}
.payline.preview-line{stroke:#e8b84b;stroke-width:1.7;stroke-dasharray:3 2;opacity:.88;filter:drop-shadow(0 0 2px #4b2500)}
.payline.winning-line{stroke:#fff0a0;stroke-width:3.4;opacity:1;filter:drop-shadow(0 0 2px #8c3c00) drop-shadow(0 0 7px #ffc52e)}
@media(max-width:900px){
  .cabinet{height:calc(100dvh - 342px);min-height:340px}
  .under{height:72px;align-items:flex-start;padding-top:5px}
  .status-wrap{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:34px 30px;gap:5px 6px;padding:0 3px;align-items:center}
  .status{grid-column:1 / -1;grid-row:1;min-width:0;width:100%;max-width:none;height:32px;padding:4px 8px;font-size:clamp(11px,3.1vw,15px);border-width:2px}
  #risk{grid-column:1;grid-row:2;justify-self:end;padding:4px 8px;font-size:11px}
  #linesControl{grid-column:2;grid-row:2;justify-self:start;padding:4px 10px;font-size:12px}
  .line-picker{top:calc(100% + 4px);width:min(260px,90vw)}
  .monkey{bottom:-6px;width:62px;left:-20px;z-index:1}
  .frame > #lineOverlay{z-index:8}
}
@media(max-width:520px){
  .cabinet{height:calc(100dvh - 336px);min-height:330px;grid-template-columns:30px minmax(0,1fr) 30px}
  .under{height:72px}
  .status-wrap{gap:4px}
  .status{font-size:11px}
}
@media(max-width:380px){
  .cabinet{height:calc(100dvh - 330px);min-height:315px}
}


/* Final paylines fix: overlay uses exactly the same rectangle as the 5x3 reel grid.
   The SVG coordinates therefore land on cell centres at every viewport size. */
.frame > #lineOverlay {
  position: absolute !important;
  left: 8.33% !important;
  top: 12.25% !important;
  right: auto !important;
  bottom: auto !important;
  width: 83.34% !important;
  height: 70.87% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  z-index: 5 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transform: none !important;
}
.frame > #lineOverlay svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
.frame > #lineOverlay.preview { opacity: 1 !important; }
.frame > #lineOverlay .payline {
  fill: none !important;
  stroke: #e8b84b !important;
  stroke-width: 1.25 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: .92 !important;
  filter: drop-shadow(0 0 1px #281500) drop-shadow(0 0 2px rgba(255,190,50,.55)) !important;
  vector-effect: non-scaling-stroke;
}
.frame > #lineOverlay .preview-line {
  stroke: #ffd86b !important;
  stroke-width: 1.55 !important;
  stroke-dasharray: 2.5 2 !important;
  opacity: .94 !important;
}
.frame > #lineOverlay .winning-line {
  stroke: #fff0a0 !important;
  stroke-width: 2.6 !important;
  stroke-dasharray: none !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 1px #512600) drop-shadow(0 0 4px #ffbd32) !important;
}


/* Static active-payline preview: all selected paths remain visible until spin. */
.frame > #lineOverlay .preview-line {
  stroke: #f4c75b !important;
  stroke-width: 1.15 !important;
  stroke-dasharray: none !important;
  opacity: .68 !important;
  filter: drop-shadow(0 0 1px #211000) drop-shadow(0 0 2px rgba(255,190,50,.42)) !important;
}
.frame > #lineOverlay .winning-line {
  stroke: #fff0a0 !important;
  stroke-width: 2.6 !important;
  stroke-dasharray: none !important;
  opacity: 1 !important;
}

/* Compact, legible counter for the single currently-previewed payline. */
.frame > #lineOverlay .line-counter rect {
  fill: rgba(3, 22, 14, .94) !important;
  stroke: #f7d46b !important;
  stroke-width: .6 !important;
}
.frame > #lineOverlay .line-counter text {
  fill: #fff1ad !important;
  font: 900 4.4px Arial, sans-serif !important;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, .75);
  stroke-width: .22px;
}


/* V16.5: quick one-shot, colour-coded payline reveal. No endless cycling. */
.frame > #lineOverlay .preview-line {
  stroke: var(--line-color, #ffd45a) !important;
  stroke-width: 1.45 !important;
  stroke-dasharray: none !important;
  stroke-dashoffset: 0;
  opacity: .82 !important;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.96)) drop-shadow(0 0 2px var(--line-color, #ffd45a)) !important;
}
.frame > #lineOverlay .preview-line.line-reveal {
  stroke-dasharray: 100 !important;
  stroke-dashoffset: 100;
  animation: cm-payline-reveal .24s cubic-bezier(.2,.7,.2,1) var(--line-delay, 0ms) both;
}
@keyframes cm-payline-reveal {
  0% { stroke-dashoffset: 100; opacity: .25; }
  72% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: .82; }
}
@media (prefers-reduced-motion: reduce) {
  .frame > #lineOverlay .preview-line.line-reveal { animation: none; stroke-dasharray: none !important; stroke-dashoffset: 0; }
}


/* Win-line polish: crisp core, dark separator, controlled glow and soft pulse.
   The paths stay visible after the win banner disappears, until the next spin. */
.frame > #lineOverlay .winning-halo {
  fill: none !important;
  stroke: rgba(20, 9, 0, .92) !important;
  stroke-width: 5.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: .96 !important;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.95)) !important;
}
.frame > #lineOverlay .winning-line {
  fill: none !important;
  stroke: #fff7bd !important;
  stroke-width: 2.35 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 2px #ff9d16) drop-shadow(0 0 5px rgba(255,205,57,.98)) !important;
  animation: cm-winning-line-glow 1.35s ease-in-out infinite alternate;
  vector-effect: non-scaling-stroke;
}
.frame > #lineOverlay .winning-node {
  fill: #fffde7 !important;
  stroke: #a64b00 !important;
  stroke-width: .65 !important;
  filter: drop-shadow(0 0 2px #ffbc35) !important;
  vector-effect: non-scaling-stroke;
}
@keyframes cm-winning-line-glow {
  from { opacity: .88; filter: drop-shadow(0 0 1px #ff9d16) drop-shadow(0 0 3px rgba(255,205,57,.8)); }
  to { opacity: 1; filter: drop-shadow(0 0 2px #ff9d16) drop-shadow(0 0 7px rgba(255,225,100,1)); }
}
.win-banner { z-index: 2; pointer-events: none; animation-duration: 1.25s !important; }
.spark { animation-duration: 1.1s !important; }
@media (prefers-reduced-motion: reduce) {
  .frame > #lineOverlay .winning-line { animation: none !important; }
}


/* V16.6 — readable one-shot preview and an unobstructed win path. */
.frame > #lineOverlay {
  z-index: 25 !important;
}
.frame > #effects {
  z-index: 6 !important;
}
.frame > #lineOverlay .preview-line {
  stroke: var(--line-color, #ffd45a) !important;
  stroke-width: 1.45px !important;
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  opacity: .94 !important;
  filter: drop-shadow(0 0 1.5px rgba(0,0,0,.98)) drop-shadow(0 0 2.5px var(--line-color, #ffd45a)) !important;
  animation: none !important;
  vector-effect: non-scaling-stroke;
}
.frame > #lineOverlay .winning-line {
  stroke-width: 2.55px !important;
  animation: cm-winning-line-glow 1.35s ease-in-out infinite alternate !important;
}
@media (prefers-reduced-motion: reduce) {
  .frame > #lineOverlay .winning-line { animation: none !important; }
}


/* V16.7 — clear payline help: no overlapping preview is painted on the reels. */
.line-picker-help{
  display:block;width:100%;margin:9px 0 0;padding:7px 9px;
  border:1px solid rgba(255,224,133,.62);border-radius:8px;
  background:rgba(4,30,17,.8);color:#ffe9a0;font:800 11px/1.25 Arial,sans-serif;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.line-picker-help:active{transform:translateY(1px)}
.payline-guide{
  margin:14px 0 18px;padding:14px 12px 12px;border:1px solid rgba(240,197,74,.62);
  border-radius:12px;background:linear-gradient(180deg,rgba(4,29,17,.92),rgba(8,39,23,.86));
  box-shadow:inset 0 0 0 1px rgba(255,235,163,.07),0 8px 20px rgba(0,0,0,.2);scroll-margin-top:10px;
}
.payline-guide h3{margin:0 0 8px;text-align:center;color:#ffe99b;font-size:clamp(16px,2.5vw,22px);letter-spacing:.06em;text-shadow:0 2px 2px #000}
.payline-guide-intro,.payline-rules p{margin:6px 0;color:#f0f4de;font-size:13px;line-height:1.45}
.active-line-summary{margin:8px 0 11px;padding:7px 9px;border-radius:7px;background:rgba(238,190,51,.12);border:1px solid rgba(240,197,74,.3);color:#ffdc79;font-size:12px;font-weight:800;text-align:center}
.payline-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.payline-card{min-width:0;padding:7px 5px 5px;border:1px solid rgba(220,204,146,.34);border-radius:9px;background:rgba(1,13,8,.48);opacity:.45;filter:saturate(.55);transition:opacity .12s,border-color .12s,box-shadow .12s}
.payline-card.is-active{border-color:#f1cb4e;opacity:1;filter:none;box-shadow:inset 0 0 0 1px rgba(255,223,105,.12),0 0 9px rgba(237,184,42,.12)}
.payline-card-title{margin:0 0 4px;color:#ffeab0;text-align:center;font-size:11px;font-weight:900;letter-spacing:.04em}
.payline-card svg{display:block;width:100%;height:auto;max-height:72px;overflow:visible}
.payline-guide-tile{fill:#fff0bd;stroke:#d1b76d;stroke-width:.65}
.payline-guide-tile.is-on-path{fill:#f4c52f;stroke:#fff0a0;stroke-width:.8}
.payline-guide-route{fill:none;stroke:#533007;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:.95;vector-effect:non-scaling-stroke}
.payline-rules{margin-top:11px;padding-top:7px;border-top:1px solid rgba(244,211,101,.28)}
.payline-rules p{font-size:12px;margin:5px 0}
.payline-rules strong{color:#ffe18a}
@media(max-width:560px){
  .payline-guide{margin:9px 0 12px;padding:11px 8px 9px}
  .payline-legend{gap:5px}
  .payline-card{padding:5px 3px 4px;border-radius:7px}
  .payline-card-title{font-size:9px;letter-spacing:0}
  .payline-guide-intro{font-size:12px}
  .active-line-summary{font-size:11px;margin-bottom:8px}
  .payline-rules p{font-size:11px}
  .line-picker-help{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.payline-card{transition:none}.line-picker-help:active{transform:none}}

/* V16.8 responsive rules modal polish */
.modal{padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom))}
.modal-card,.bonus-card,.risk-card{max-height:calc(100dvh - 24px);overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b9913f #092318}
#infoModal .modal-card{width:min(820px,96vw);padding-bottom:26px}
#infoModal .modal-close{position:absolute}
@media(max-width:900px){
  #phoenix-shell-controls{top:max(8px,env(safe-area-inset-top));padding:0 10px}
  #phoenix-shell-controls button{width:38px;height:38px}
  #infoModal .modal-card{width:min(760px,96vw);max-height:calc(100dvh - 20px);padding:62px 14px 20px}
  #infoModal .modal-close{top:12px;right:12px}
  .modal-card h2,.bonus-card h2,.risk-card h2{font-size:clamp(22px,6vw,32px)}
  .pay-row{grid-template-columns:minmax(0,1fr) repeat(3,minmax(38px,54px));gap:3px;padding:4px 5px}
  .pay-row img{width:34px;height:34px}
  .pay-row span{gap:5px;font-size:clamp(11px,3.2vw,15px)}
  .pay-row b{font-size:clamp(11px,3vw,14px)}
  .payline-guide{border-radius:18px}
  .modal-note{line-height:1.45}
}
@media(max-width:380px){
  #infoModal .modal-card{padding-left:10px;padding-right:10px}
  .pay-row{grid-template-columns:minmax(0,1fr) repeat(3,minmax(32px,44px))}
  .pay-row img{width:29px;height:29px}
}


/* V16.9 — jungle ambience, audio controls and reel-speed settings */
.settings-toggle,.mobile-settings{display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,224,133,.75);color:#ffe9a0;background:linear-gradient(145deg,rgba(18,71,43,.96),rgba(4,24,15,.96));box-shadow:0 3px 12px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,245,190,.08);font-weight:900;cursor:pointer}
.settings-toggle{position:absolute;right:78px;top:22px;width:44px;height:44px;border-radius:13px;font-size:27px;z-index:21}
.settings-toggle:active,.mobile-settings:active{transform:scale(.95)}
.mobile-settings{display:none}
.settings-modal{z-index:2147483100}
.settings-card{position:relative;width:min(520px,94vw);max-height:calc(100dvh - 24px);overflow:auto;padding:28px 24px 22px;border:2px solid #d4ae4b;border-radius:20px;color:#f7f1d4;background:radial-gradient(ellipse at top,rgba(35,105,58,.98),rgba(5,29,18,.99) 72%);box-shadow:0 22px 65px rgba(0,0,0,.75),inset 0 0 0 4px rgba(255,221,123,.08);scrollbar-width:thin;scrollbar-color:#bd9842 #092318}
.settings-card:before{content:"";position:absolute;inset:7px;border:1px solid rgba(255,224,133,.24);border-radius:13px;pointer-events:none}
.settings-card h2{margin:0 40px 6px 0;color:#ffe69a;text-align:center;font-size:clamp(22px,4vw,29px);text-shadow:0 2px 3px #000}
.settings-intro{margin:0 0 17px;text-align:center;color:#d4e3ca;font-size:13px;line-height:1.45}
.setting-group{position:relative;margin:10px 0;padding:13px 14px;border:1px solid rgba(231,202,108,.3);border-radius:13px;background:rgba(0,0,0,.19)}
.setting-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#ffebae;font-weight:900;font-size:14px}
.setting-group p{margin:6px 0 11px;color:#c7d8c2;font-size:12px;line-height:1.45}
.range-label{display:flex;justify-content:space-between;gap:10px;margin:12px 0 6px;color:#edf3db;font-size:12px;font-weight:700}
.range-label b{color:#ffdf72}
.setting-range{display:block;width:100%;height:7px;margin:8px 0 2px;accent-color:#e6bd4e;cursor:pointer}
.setting-switch{position:relative;display:inline-flex;flex:0 0 auto;cursor:pointer}
.setting-switch input{position:absolute;width:1px;height:1px;opacity:0}
.switch-track{width:43px;height:24px;border-radius:30px;background:#47574b;border:1px solid rgba(255,255,255,.2);transition:background .18s}
.switch-track:after{content:"";display:block;width:18px;height:18px;margin:2px;border-radius:50%;background:#f1f0d9;box-shadow:0 1px 3px #000;transition:transform .18s}
.setting-switch input:checked+.switch-track{background:#3c9b57;border-color:#8bd69a}
.setting-switch input:checked+.switch-track:after{transform:translateX(19px);background:#fff2b4}
.setting-switch input:focus-visible+.switch-track{outline:2px solid #ffe48b;outline-offset:3px}
.speed-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:11px}
.speed-options button{min-height:43px;padding:7px 5px;border:1px solid rgba(255,223,127,.42);border-radius:9px;background:rgba(2,17,10,.7);color:#e9e8cc;font-size:12px;font-weight:900;cursor:pointer}
.speed-options button.selected{border-color:#ffe083;background:linear-gradient(180deg,#a67b27,#63471a);color:#fff4be;box-shadow:0 0 0 1px rgba(255,227,137,.2),0 0 12px rgba(255,196,57,.17)}
.setting-group .setting-hint{margin:9px 0 0;font-size:11px}
.settings-done{position:relative;display:block;width:100%;margin-top:15px;padding:12px;border:1px solid #ffdf7c;border-radius:11px;background:linear-gradient(180deg,#e8c35b,#9d7021);color:#201605;font-weight:1000;letter-spacing:.09em;cursor:pointer;box-shadow:0 4px 0 #604516}
.settings-done:active{transform:translateY(2px);box-shadow:0 2px 0 #604516}
@media(max-width:900px){
 .settings-toggle{display:none}
 .mobile-settings{display:flex!important;position:absolute!important;right:40px;top:-39px;width:32px;height:32px;border-radius:10px;font-size:21px;z-index:13;padding:0}
 .settings-card{padding:25px 14px 17px;border-radius:16px}
 .setting-group{padding:11px 10px;margin:8px 0}
 .speed-options{gap:5px}
 .speed-options button{font-size:11px;min-height:41px}
}
@media(max-width:380px){.mobile-settings{right:37px;width:30px;height:30px;top:-36px;font-size:19px}.settings-card{padding:22px 10px 14px}.setting-heading{font-size:13px}}


/* V16.9 — jungle ambience, audio controls and reel-speed settings */
.settings-toggle,.mobile-settings{display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,224,133,.75);color:#ffe9a0;background:linear-gradient(145deg,rgba(18,71,43,.96),rgba(4,24,15,.96));box-shadow:0 3px 12px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,245,190,.08);font-weight:900;cursor:pointer}
.settings-toggle{position:absolute;right:78px;top:22px;width:44px;height:44px;border-radius:13px;font-size:27px;z-index:21}
.settings-toggle:active,.mobile-settings:active{transform:scale(.95)}
.mobile-settings{display:none}
.settings-modal{z-index:2147483100}
.settings-card{position:relative;width:min(520px,94vw);max-height:calc(100dvh - 24px);overflow:auto;padding:28px 24px 22px;border:2px solid #d4ae4b;border-radius:20px;color:#f7f1d4;background:radial-gradient(ellipse at top,rgba(35,105,58,.98),rgba(5,29,18,.99) 72%);box-shadow:0 22px 65px rgba(0,0,0,.75),inset 0 0 0 4px rgba(255,221,123,.08);scrollbar-width:thin;scrollbar-color:#bd9842 #092318}
.settings-card:before{content:"";position:absolute;inset:7px;border:1px solid rgba(255,224,133,.24);border-radius:13px;pointer-events:none}
.settings-card h2{margin:0 40px 6px 0;color:#ffe69a;text-align:center;font-size:clamp(22px,4vw,29px);text-shadow:0 2px 3px #000}
.settings-intro{margin:0 0 17px;text-align:center;color:#d4e3ca;font-size:13px;line-height:1.45}
.setting-group{position:relative;margin:10px 0;padding:13px 14px;border:1px solid rgba(231,202,108,.3);border-radius:13px;background:rgba(0,0,0,.19)}
.setting-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#ffebae;font-weight:900;font-size:14px}
.setting-group p{margin:6px 0 11px;color:#c7d8c2;font-size:12px;line-height:1.45}
.range-label{display:flex;justify-content:space-between;gap:10px;margin:12px 0 6px;color:#edf3db;font-size:12px;font-weight:700}
.range-label b{color:#ffdf72}
.setting-range{display:block;width:100%;height:7px;margin:8px 0 2px;accent-color:#e6bd4e;cursor:pointer}
.setting-switch{position:relative;display:inline-flex;flex:0 0 auto;cursor:pointer}
.setting-switch input{position:absolute;width:1px;height:1px;opacity:0}
.switch-track{width:43px;height:24px;border-radius:30px;background:#47574b;border:1px solid rgba(255,255,255,.2);transition:background .18s}
.switch-track:after{content:"";display:block;width:18px;height:18px;margin:2px;border-radius:50%;background:#f1f0d9;box-shadow:0 1px 3px #000;transition:transform .18s}
.setting-switch input:checked+.switch-track{background:#3c9b57;border-color:#8bd69a}
.setting-switch input:checked+.switch-track:after{transform:translateX(19px);background:#fff2b4}
.setting-switch input:focus-visible+.switch-track{outline:2px solid #ffe48b;outline-offset:3px}
.speed-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:11px}
.speed-options button{min-height:43px;padding:7px 5px;border:1px solid rgba(255,223,127,.42);border-radius:9px;background:rgba(2,17,10,.7);color:#e9e8cc;font-size:12px;font-weight:900;cursor:pointer}
.speed-options button.selected{border-color:#ffe083;background:linear-gradient(180deg,#a67b27,#63471a);color:#fff4be;box-shadow:0 0 0 1px rgba(255,227,137,.2),0 0 12px rgba(255,196,57,.17)}
.setting-group .setting-hint{margin:9px 0 0;font-size:11px}
.settings-done{position:relative;display:block;width:100%;margin-top:15px;padding:12px;border:1px solid #ffdf7c;border-radius:11px;background:linear-gradient(180deg,#e8c35b,#9d7021);color:#201605;font-weight:1000;letter-spacing:.09em;cursor:pointer;box-shadow:0 4px 0 #604516}
.settings-done:active{transform:translateY(2px);box-shadow:0 2px 0 #604516}
@media(max-width:900px){.settings-toggle{display:none}.mobile-settings{display:flex!important;position:absolute!important;right:40px;top:-39px;width:32px;height:32px;border-radius:10px;font-size:21px;z-index:13;padding:0}.settings-card{padding:25px 14px 17px;border-radius:16px}.setting-group{padding:11px 10px;margin:8px 0}.speed-options{gap:5px}.speed-options button{font-size:11px;min-height:41px}}
@media(max-width:380px){.mobile-settings{right:37px;width:30px;height:30px;top:-36px;font-size:19px}.settings-card{padding:22px 10px 14px}.setting-heading{font-size:13px}}


/* V16.10 — settings controls moved into clear, predictable corners. */
@media (min-width:901px){
  .settings-toggle{right:18px!important;top:82px!important;width:48px;height:48px;border-radius:14px;}
  .sound-toggle{right:13px!important;top:18px!important;width:52px;height:52px;}
}
@media (max-width:900px){
  .mobile-info{left:0!important;top:-40px!important;width:32px;height:32px;}
  .mobile-settings{left:40px!important;right:auto!important;top:-40px!important;width:32px;height:32px;border-radius:10px;font-size:20px;z-index:13;}
  .mobile-sound{right:0!important;top:-40px!important;width:32px;height:32px;z-index:13;}
}
@media (max-width:380px){
  .mobile-info{left:0!important;top:-37px!important;width:29px;height:29px;}
  .mobile-settings{left:35px!important;top:-37px!important;width:29px;height:29px;font-size:18px;}
  .mobile-sound{right:0!important;top:-37px!important;width:29px;height:29px;}
}


/* V16.11 — mobile settings moved off the wooden balance panel; richer, less repetitive jungle ambience. */
.mobile-settings{display:none}
@media(max-width:900px){
  .mobile-settings{display:flex!important;position:absolute!important;left:auto!important;right:14px!important;top:auto!important;bottom:clamp(245px,27vh,330px)!important;width:43px;height:43px;border-radius:14px;font-size:24px;z-index:14;padding:0;opacity:.96;background:linear-gradient(145deg,rgba(24,91,52,.96),rgba(5,35,22,.97));border:2px solid rgba(255,222,125,.9);box-shadow:0 4px 12px #0009,inset 0 0 0 2px #ffffff12}
  .mobile-settings:after{content:"";position:absolute;inset:3px;border:1px solid #ffdf7b55;border-radius:9px;pointer-events:none}
}
@media(max-width:380px){.mobile-settings{right:10px!important;bottom:clamp(225px,26vh,295px)!important;width:39px;height:39px;font-size:21px}}