@font-face{font-family:'Chakra Petch';src:url('../assets/fonts/ChakraPetch-Bold.ttf');font-weight:700;font-display:block}
@font-face{font-family:'Chakra Petch';src:url('../assets/fonts/ChakraPetch-SemiBold.ttf');font-weight:600;font-display:block}
@font-face{font-family:Oswald;src:url('../assets/fonts/ChakraPetch-Bold.ttf');font-weight:100 900;font-display:block} /* alias : SharedFX.slam demande « Oswald » */
@font-face{font-family:'Exo 2';src:url('../assets/fonts/Exo2.ttf');font-weight:100 900;font-display:block}
:root{--vio:#9b5cff;--vio2:#5a2bd6;--cy:#3fe8ff;--or:#ff9a2e;--or2:#ffd08a;--ink:#070314;--glass:rgba(16,8,42,.88);--dockh:96px;--cs:90px;--strip:38px;--gw:96px;
 --cut:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--ink);overflow:hidden;font-family:'Exo 2',sans-serif;color:#eaf4ff;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.hidden{display:none!important}
#stage{position:fixed;inset:0;z-index:0}#stage canvas{display:block}
#flash{position:fixed;inset:0;z-index:9;background:#f0e6ff;opacity:0;pointer-events:none}
/* loader */
#loader{position:fixed;inset:0;z-index:60;background:radial-gradient(ellipse at 50% 35%,#2a0f5c 0%,#0a0322 60%,#05010f 100%);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
#stars{position:absolute;inset:0;width:100%;height:100%}
.loaderInner{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px}
.orbit{position:relative;width:86px;height:86px;border-radius:50%;border:2px solid rgba(63,232,255,.35);animation:rot 9s linear infinite}
.orbit i{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd08a,#ff7a1a 60%,#7a2a00);box-shadow:0 0 22px rgba(255,140,40,.8)}
.orbit b{position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--cy);box-shadow:0 0 14px var(--cy)}
@keyframes rot{to{transform:rotate(360deg)}}
#loaderTitle{font-family:'Chakra Petch',sans-serif;font-weight:700;line-height:.95;display:flex;flex-direction:column;font-size:clamp(50px,11vw,112px);letter-spacing:.14em;margin-right:-.14em;background:linear-gradient(180deg,#fff 10%,#ffd08a 40%,#ff8a2a 62%,#b45cff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(155,92,255,.7))}
.bar{width:min(340px,70vw);height:6px;background:#1a0f3a;border-radius:4px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--vio),var(--cy));box-shadow:0 0 12px var(--cy)}
#loadTxt{font-size:14px;letter-spacing:.26em;color:#b9a8ff}
.cta{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:22px;letter-spacing:.2em;color:#1b0a00;padding:13px 40px;background:linear-gradient(180deg,#ffe0a8,#ff9a2e 55%,#d8610a);clip-path:var(--cut);box-shadow:0 0 30px rgba(255,154,46,.6);transition:transform .15s,filter .15s}
.cta:hover{transform:scale(1.05);filter:brightness(1.1)}
.disclaimer{font-size:13px;letter-spacing:.14em;opacity:.75;margin-top:8px}
.copyL{display:flex;align-items:center;gap:10px;font-size:12px;opacity:.6}.copyL img{height:24px}
/* title */
#titleBar{position:fixed;left:0;right:0;top:0;height:54px;z-index:14;display:flex;align-items:center;justify-content:center;pointer-events:none;background:linear-gradient(180deg,rgba(7,3,20,.88),rgba(7,3,20,0))}
#titleBar h1{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:30px;letter-spacing:.3em;margin-right:-.3em;line-height:1;background:linear-gradient(90deg,#8fe9ff,#fff 35%,#ffb866 70%,#ff8a2a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 12px rgba(155,92,255,.7))}
#titleBar h1 em{font-style:normal}
#studioBadge{position:absolute;left:14px;top:10px;height:32px;opacity:.9}
#topTools{position:fixed;right:12px;top:8px;z-index:16;display:flex;gap:8px}
.ico{width:38px;height:38px;color:var(--cy);background:linear-gradient(180deg,#1d1050,#0d0628);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1.5px rgba(63,232,255,.6),0 0 12px rgba(155,92,255,.4)}
.ico svg{width:21px;height:21px}.ico:hover{color:#fff}
#btnMute.off .waves{display:none}#btnMute:not(.off) .slash{display:none}
/* strip */
#msg{position:fixed;z-index:14;display:flex;align-items:center;justify-content:center;text-align:center;font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:clamp(13px,calc(var(--strip)*.4),19px);letter-spacing:.06em;color:#e9e0ff;opacity:0;transition:opacity .25s;pointer-events:none;padding:0 10px;text-shadow:0 1px 6px #000;line-height:1.1;overflow:hidden}
#msg.on{opacity:1}#msg b{color:var(--or2)}
#fsHud{position:fixed;z-index:14;display:flex;gap:6px;pointer-events:none}
.hp{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,#2a1070,#140834);border-radius:10px;box-shadow:inset 0 0 0 1.5px rgba(255,154,46,.75);padding:0 6px}
.hp label{font-size:calc(var(--strip)*.26);letter-spacing:.14em;color:#c9b8ff;white-space:nowrap;line-height:1}
.hp b{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:calc(var(--strip)*.5);color:#fff;line-height:1.05;white-space:nowrap}
.hp.hot b{color:var(--or2);text-shadow:0 0 12px rgba(255,154,46,.8)}
/* planet gauges (right of the grid, one per row) */
#gauges{position:fixed;z-index:13;width:var(--gw);pointer-events:none}
.gg{position:absolute;left:0;width:100%;height:var(--cs);display:flex;align-items:center;justify-content:center;gap:5px;border-radius:12px;background:linear-gradient(90deg,rgba(40,16,100,.85),rgba(14,6,40,.92));box-shadow:inset 0 0 0 1.5px rgba(155,92,255,.7);transition:box-shadow .25s,filter .25s}
.gg img{width:calc(var(--cs)*.62);height:calc(var(--cs)*.62);max-width:48px;max-height:48px;object-fit:contain;flex:none;transition:transform .35s cubic-bezier(.2,1.6,.4,1)}
.gg b{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:clamp(13px,calc(var(--cs)*.27),26px);line-height:1;color:#fff;white-space:nowrap}
.gg i{position:absolute;left:8%;right:8%;bottom:5px;height:3px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.gg i::after{content:'';display:block;height:100%;width:calc(var(--p,0)*100%);background:linear-gradient(90deg,var(--cy),var(--or));transition:width .4s}
.gg.lv3{box-shadow:inset 0 0 0 1.5px var(--cy),0 0 10px rgba(63,232,255,.4)}
.gg.lv5{box-shadow:inset 0 0 0 2px var(--or),0 0 14px rgba(255,154,46,.6)}.gg.lv5 b{color:var(--or2)}
.gg.lv8{box-shadow:inset 0 0 0 2px #fff,0 0 20px rgba(255,200,120,.95)}.gg.lv8 b{color:#fff;text-shadow:0 0 10px var(--or)}
.gg.pop{animation:ggpop .5s cubic-bezier(.2,1.6,.4,1)}.gg.pop img{transform:scale(1.35)}
.gg.hit{filter:brightness(1.6)}
@keyframes ggpop{0%{transform:scale(1)}35%{transform:scale(1.14)}100%{transform:scale(1)}}
/* dock */
#dock{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(18,8,48,.9),rgba(6,2,18,.98));border-top:1.5px solid rgba(155,92,255,.65);box-shadow:0 -8px 30px rgba(90,43,214,.35)}
.pl{position:relative;min-width:120px;padding:6px 16px 7px;text-align:center;border-radius:12px;background:linear-gradient(180deg,#22104f,#10062c);box-shadow:inset 0 0 0 1.5px rgba(155,92,255,.6);display:flex;flex-direction:column;justify-content:center}
.pl label{display:block;font-size:11px;font-weight:700;letter-spacing:.22em;color:#b9a8ff;line-height:1.1}
.pl b{display:block;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:24px;line-height:1.15;color:#fff;white-space:nowrap}
.balance{min-width:150px}.winp{min-width:170px}.winp b{color:var(--or2);text-shadow:0 0 14px rgba(255,154,46,.6)}
.betp{min-width:180px}.stp{display:flex;align-items:center;justify-content:space-between;gap:6px}.stp b{font-size:22px;flex:1}
.stp button{width:32px;height:32px;font-size:22px;font-weight:700;border-radius:50%;color:var(--cy);background:#1a0c44;box-shadow:inset 0 0 0 1.5px rgba(63,232,255,.7);line-height:1}
.stp button:hover{background:#2a1670;color:#fff}.stp button:disabled{opacity:.35}
#btnSpin{position:relative;width:92px;height:92px;flex:none;border-radius:50%;color:#2a0c00;background:radial-gradient(circle at 50% 30%,#ffe9bd,#ff9a2e 55%,#d8560a);box-shadow:0 0 0 4px #2b0f66,0 0 0 6px var(--cy),0 0 28px rgba(255,140,40,.7),inset 0 -6px 12px rgba(120,30,0,.4);transition:transform .15s}
#btnSpin svg{position:absolute;inset:22px;width:48px;height:48px}
#btnSpin .ring{position:absolute;inset:-13px;border-radius:50%;border:2px dashed rgba(155,92,255,.8);animation:rot 12s linear infinite;pointer-events:none}
#btnSpin .ring::after{content:'';position:absolute;left:50%;top:-5px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--cy);box-shadow:0 0 10px var(--cy)}
#btnSpin:hover{transform:scale(1.05)}#btnSpin:active{transform:scale(.95)}#btnSpin:disabled{filter:grayscale(.7) brightness(.7);cursor:default}
#btnSpin.busy svg{animation:rot 1s linear infinite}
#autoCount{position:absolute;left:0;right:0;bottom:7px;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:14px;text-align:center}
.tools{flex-direction:row;gap:6px;min-width:0;padding:6px 8px}
.pill{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:14px;letter-spacing:.1em;padding:9px 12px;border-radius:9px;color:var(--cy);background:#1a0c44;box-shadow:inset 0 0 0 1.5px rgba(63,232,255,.65)}
.pill.on{background:linear-gradient(180deg,#ffb258,#e0700d);color:#2a0c00;box-shadow:none}
.pill.buy{color:#2a0c00;background:linear-gradient(180deg,#ffd9a0,#ff9a2e);box-shadow:none}
.pill:hover{filter:brightness(1.2)}.pill:disabled{opacity:.4}
/* popups & modals */
.pop{position:fixed;z-index:30;left:50%;bottom:calc(var(--dockh) + 14px);transform:translateX(-50%);background:var(--glass);border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--vio),0 0 30px rgba(90,43,214,.5);padding:2px}
.popTitle{font-family:'Chakra Petch',sans-serif;font-weight:700;letter-spacing:.14em;text-align:center;padding:14px 22px 6px}
.autoBtns{display:flex;gap:8px;padding:6px 18px}.autoBtns button{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:19px;padding:8px 14px;background:#1a0c44;color:var(--cy);border-radius:9px;box-shadow:inset 0 0 0 1.5px rgba(63,232,255,.65)}
.chk{display:flex;gap:8px;align-items:center;padding:8px 18px 14px;font-size:15px}
.modal{position:fixed;inset:0;z-index:40;background:rgba(4,1,14,.86);display:flex;align-items:center;justify-content:center;padding:14px}
.modal .card{position:relative;max-width:520px;width:100%;max-height:92vh;overflow:auto;padding:26px 24px;background:linear-gradient(180deg,#1a0c44,#0a0426);border-radius:18px;box-shadow:inset 0 0 0 2px var(--vio),0 0 50px rgba(90,43,214,.5);text-align:center}
.modal .card.wide{max-width:980px;text-align:left}
.modal h2{font-family:'Chakra Petch',sans-serif;font-weight:700;letter-spacing:.16em;font-size:25px;color:var(--or2);text-align:center;margin-bottom:14px}
.modal .h2b{margin-top:22px}.modal .sub{text-align:center;opacity:.85;font-size:15px;margin-bottom:12px;line-height:1.35}
.close{position:sticky;float:right;top:0;font-size:32px;line-height:1;color:var(--cy);z-index:3;width:38px;height:38px}
.buyOpt{width:100%;padding:14px 10px;background:linear-gradient(180deg,#2a1270,#14083a);border-radius:12px;box-shadow:inset 0 0 0 2px var(--or);display:flex;flex-direction:column;gap:6px;align-items:center}
.buyOpt b{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:22px;letter-spacing:.1em;color:var(--or2)}.buyOpt span{font-size:15px;opacity:.9}
.buyOpt em{font-style:normal;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:26px;color:var(--cy)}.buyOpt:hover{filter:brightness(1.2)}.buyOpt:disabled{opacity:.4}
.row{display:flex;gap:12px;justify-content:center;margin-top:16px}.ghost{font-family:'Chakra Petch',sans-serif;font-weight:700;letter-spacing:.12em;padding:10px 26px;color:var(--cy);border-radius:10px;box-shadow:inset 0 0 0 1.5px var(--cy)}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.hw{display:flex;gap:12px;align-items:flex-start;background:rgba(60,28,140,.35);padding:12px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(155,92,255,.55)}
.hw img{width:58px;height:58px;object-fit:contain;flex:none}.hw b{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:17px;color:var(--or2);display:block;margin-bottom:2px}.hw p{font-size:15px;line-height:1.3}
.payGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.pc{display:flex;gap:10px;align-items:center;background:rgba(60,28,140,.35);padding:8px 10px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(155,92,255,.45)}
.pc img{width:54px;height:54px;object-fit:contain;flex:none}.pc div{font-size:14px;line-height:1.35;white-space:nowrap}.pc div b{font-family:'Chakra Petch',sans-serif;color:#fff;font-size:15px}.pc div em{font-style:normal;color:#b9a8ff}
.rules p{font-size:15px;line-height:1.45;opacity:.92}.rules h3{font-family:'Chakra Petch',sans-serif;color:var(--or2);letter-spacing:.12em;margin:16px 0 4px}
.copy{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:20px;opacity:.65;font-size:13px}.copy img{height:26px}
/* overlays over the grid only */
#ovl{position:fixed;z-index:25;display:flex;align-items:center;justify-content:center;padding:6px;background:radial-gradient(ellipse at 50% 50%,rgba(6,2,20,.8),rgba(6,2,20,.45) 75%,rgba(6,2,20,.2));border-radius:14px;overflow:hidden}
#ovl.click{cursor:pointer}
.bcard{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:100%;animation:popin .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes popin{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.bk{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:clamp(17px,3.6vw,36px);letter-spacing:.14em;background:linear-gradient(180deg,#fff,#ffd08a 50%,#ff8a2a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 8px rgba(0,0,0,.8))}
.bbig{display:flex;align-items:baseline;gap:10px;font-family:'Chakra Petch',sans-serif;font-weight:700}.bbig b{font-size:clamp(50px,11vw,120px);line-height:1;color:#fff;text-shadow:0 0 24px var(--vio),0 4px 0 #2a1070}.bbig span{font-size:clamp(14px,2.6vw,26px);letter-spacing:.14em;color:var(--or2)}
.bcard p{font-size:clamp(13px,1.9vw,18px);line-height:1.35;max-width:520px;text-shadow:0 2px 4px #000}
.bamt{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:clamp(34px,8vw,92px);line-height:1;color:#fff;text-shadow:0 0 26px var(--or),0 4px 0 #2a1070;white-space:nowrap}
.btier{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:clamp(24px,6vw,70px);letter-spacing:.1em;line-height:1;background:linear-gradient(180deg,#fff,#b9f3ff 45%,#6a5cff 55%,#e7f6ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 10px rgba(0,0,0,.8))}
.btier.t-mega{background-image:linear-gradient(180deg,#fff,#ffd08a 45%,#ff7a1a 55%,#fff0d0)}.btier.t-super{background-image:linear-gradient(180deg,#fff,#ffb6ff 45%,#9b5cff 55%,#f0dcff)}
.bsub{font-size:clamp(12px,1.8vw,17px);letter-spacing:.14em;color:#c9b8ff;min-height:1.2em}
.bhint{font-size:12px;letter-spacing:.14em;opacity:.7;margin-top:2px}
.bgo{margin-top:6px}
.bportrait{height:clamp(90px,26vh,220px);width:auto;filter:drop-shadow(0 0 16px rgba(155,92,255,.7));margin-bottom:-4px}
/* portrait phones */
body.portrait #titleBar{height:44px}body.portrait #titleBar h1{font-size:21px;letter-spacing:.22em}body.portrait #studioBadge{height:24px;top:10px;left:8px}
body.portrait .ico{width:32px;height:32px}body.portrait .ico svg{width:18px;height:18px}body.portrait #topTools{top:6px;right:8px;gap:6px}
body.portrait #dock{display:grid;grid-template-columns:1fr 84px 1fr;grid-template-areas:"bal spin win" "bet spin win" "tools tools tools";gap:6px 8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));align-items:stretch}
body.portrait .balance{grid-area:bal}body.portrait .winp{grid-area:win}body.portrait .betp{grid-area:bet}body.portrait .tools{grid-area:tools}body.portrait #btnSpin{grid-area:spin;align-self:center;justify-self:center;width:76px;height:76px}
body.portrait #btnSpin svg{inset:19px;width:38px;height:38px}
body.portrait .pl{min-width:0;padding:3px 8px 4px}body.portrait .pl label{font-size:10px;letter-spacing:.16em}body.portrait .pl b{font-size:17px}
body.portrait .winp{justify-content:center}body.portrait .winp b{font-size:20px}
body.portrait .stp{gap:4px}body.portrait .stp button{position:relative;width:34px;height:34px;font-size:20px;flex:none}body.portrait .stp button::after{content:'';position:absolute;inset:-4px}body.portrait .stp b{font-size:16px}
body.portrait .tools{gap:8px;padding:0;background:none;box-shadow:none;justify-content:stretch}
body.portrait .pill{font-size:15px;letter-spacing:.06em;padding:0 4px;flex:1;min-width:0;min-height:44px;height:44px;border-radius:10px}
body.portrait #autoCount{font-size:11px;bottom:5px}
body.portrait .gg{border-radius:8px;gap:2px;flex-direction:column;justify-content:center}body.portrait .gg img{width:calc(var(--cs)*.5);height:calc(var(--cs)*.5)}body.portrait .gg i{bottom:2px;left:10%;right:10%}
body.portrait .modal h2{font-size:19px}body.portrait .close{font-size:28px}
body.portrait .pop{bottom:calc(var(--dockh) + 10px)}
body.short #titleBar{height:34px}body.short #titleBar h1{font-size:20px}body.short #studioBadge{height:22px;top:6px}body.short .ico{width:28px;height:28px}
body.short #dock{padding:5px 10px;gap:8px}body.short #btnSpin{width:62px;height:62px}body.short #btnSpin svg{inset:15px;width:32px;height:32px}body.short .pl{padding:3px 10px}body.short .pl b{font-size:18px}body.short .pl label{font-size:9px}
/* cartes de bonus compactes : jamais plus hautes que la grille */
#ovl.c1 .bportrait{display:none}
#ovl.c2 .bportrait,#ovl.c2 .bcard p{display:none}
#ovl.c1 .bcard,#ovl.c2 .bcard{gap:4px}#ovl.c2 .bbig b{font-size:clamp(34px,9vw,64px)}#ovl.c2 .cta,#ovl.c1 .cta{padding:8px 26px;font-size:18px}
#ovl.c1 .bcard p{font-size:12px;line-height:1.25}
#ovl.c1 .bbig b{font-size:clamp(40px,10vw,70px)}