@font-face{font-family:'Lilita One';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/lilita.woff2) format('woff2')}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{width:100%;height:100%;overflow:hidden;background:#8fd0f5;font-family:'Lilita One','Arial Rounded MT Bold',system-ui,sans-serif;color:#fff;touch-action:none}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block}
button{font-family:inherit;color:inherit;border:none;cursor:pointer;background:none}
.hidden{display:none!important}
.screen{position:fixed;inset:0;pointer-events:none;z-index:5}
.screen button,.screen .panel{pointer-events:auto}
.panel{background:rgba(38,42,50,.9);border:2px solid rgba(0,0,0,.45);border-radius:14px;box-shadow:0 4px 0 rgba(0,0,0,.25)}
#loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;background:#8fd0f5;z-index:100;text-shadow:0 3px 0 #1d4f91}
/* MENU */
#menu{display:flex;flex-direction:column;align-items:center;padding:max(10px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}
.topbar{width:100%;max-width:560px;display:flex;justify-content:space-between;gap:10px}
.profile{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;min-width:0;flex:0 1 250px;cursor:pointer}
.avatar{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#62b4ff,#1f6fd6);border:3px solid #dfe8f2;position:relative;flex:none;box-shadow:inset 0 -4px 0 rgba(0,0,0,.15)}
.avatar i{position:absolute;width:7px;height:9px;background:#111;border-radius:50%;top:44%}
.avatar i:first-child{left:33%}.avatar i:last-child{right:33%}
.avatar.big{width:96px;height:96px;margin:6px auto}
.avatar.big i{width:11px;height:14px}
.pinfo{min-width:0;flex:1}
.pname{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plevel{font-size:14px;color:#cfd8e3}
.xpbar{height:12px;border-radius:7px;background:#11151b;overflow:hidden;margin:3px 0;width:130px;max-width:100%}
.xpbar.wide{width:80%;margin:8px auto}
.xpbar div{height:100%;width:0;background:linear-gradient(#7ee05b,#3fae2a);border-radius:7px}
.xptext{font-size:11px;color:#aab4c0}
.currencies{display:flex;flex-direction:column;gap:8px}
.pill{display:flex;align-items:center;gap:8px;padding:5px 6px 5px 8px;min-width:140px;justify-content:space-between}
.pill b{font-size:20px;flex:1;text-align:center}
.coin{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffe57a,#f2b100);border:3px solid #c98a00;display:inline-block;flex:none;position:relative}
.coin:after{content:'★';position:absolute;inset:0;font-size:14px;line-height:24px;text-align:center;color:#c98a00}
.gem{width:28px;height:28px;flex:none;background:linear-gradient(135deg,#e7a6ff,#9b3cf0 55%,#6b1fb8);clip-path:polygon(50% 100%,0 35%,22% 5%,78% 5%,100% 35%)}
.plus{width:30px;height:30px;border-radius:8px;background:linear-gradient(#6fd65a,#36a52a);font-size:24px;line-height:28px;box-shadow:0 2px 0 #1e6d17}
.logo{margin-top:4vh;position:relative;text-align:center;line-height:.86;transform:rotate(-3deg)}
.logo .l1,.logo .l2{font-size:min(17vw,84px,9vh);letter-spacing:1px;paint-order:stroke fill;-webkit-text-stroke:10px #12305e;filter:drop-shadow(0 6px 0 #0c2142)}
.logo .l1{color:#fff}
.logo .l2{color:#ffd23f;-webkit-text-stroke:10px #12305e;font-size:min(19vw,96px,10.5vh)}
.logo .l2{color:#ffc928}
.logo .star{position:absolute;color:#ffd23f;font-size:44px;-webkit-text-stroke:3px #c47a00}
.logo .s1{left:-34px;bottom:10px;transform:rotate(-20deg)}.logo .s2{right:-34px;bottom:30px;transform:rotate(15deg)}
.logo .spark{position:absolute;left:48%;top:-26px;width:26px;height:26px;background:radial-gradient(circle,#fff6a0 20%,#ff9d00 55%,transparent 70%);border-radius:50%;animation:spark .25s infinite alternate}
@keyframes spark{to{transform:scale(1.35)}}
.bottom{margin-top:auto;width:100%;max-width:560px;display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:10px;align-items:stretch}
.sq{width:24%;aspect-ratio:1;max-width:120px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:20px;position:relative;pointer-events:auto;border:3px solid rgba(0,0,0,.5);box-shadow:0 5px 0 rgba(0,0,0,.35)}
.sq svg{width:56%;height:auto}
.sq.blue{background:linear-gradient(#3d5a80,#24364f)}
.sq.brown{background:linear-gradient(#a8743a,#7a4f22)}
.sq:active,.play:active,.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.dot{position:absolute;top:-10px;right:-10px;width:30px;height:30px;border-radius:50%;background:#e8262b;border:3px solid #fff;font-style:normal;font-size:18px;line-height:24px;text-align:center}
.play{flex:1;border-radius:18px;background:linear-gradient(#ffe066,#f5b915);color:#3b2a0e;font-size:min(12vw,58px);border:3px solid #a8730a;box-shadow:0 6px 0 #a8730a,inset 0 4px 0 rgba(255,255,255,.5);pointer-events:auto}
.profilebar{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;font-size:20px;gap:4px;width:100%;color:#fff}
.profilebar .pic{width:52px;height:52px;border-radius:50%;background:linear-gradient(#3f8be6,#1f5fb8);border:3px solid #dfe8f2;display:flex;align-items:center;justify-content:center}
.profilebar svg{width:70%}
/* HUD */
.side{display:flex;align-items:center;gap:6px}
.skull{display:inline-block;width:26px;height:26px;border-radius:6px;text-align:center;line-height:26px;font-size:18px}
.skull.blue{background:#2f80ed}.skull.red{background:#e0393e}
.blueT{color:#5aa9ff}.redT{color:#ff5b5f}
#bombBtns{position:absolute;right:10px;bottom:calc(max(20px,env(safe-area-inset-bottom)) + 40px);display:flex;gap:10px;align-items:flex-end}
.bomb{width:70px;height:70px;border-radius:50%;position:relative;border:5px solid;pointer-events:auto;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.bomb svg{width:62%}
.bomb span{position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);font-size:17px;white-space:nowrap;text-shadow:0 2px 0 #000}
.bomb.P{background:#163454;border-color:#4aa8ff}
.bomb.M{background:#3d3210;border-color:#f5b700}
.bomb.G{background:#2b1745;border-color:#a35cff;width:80px;height:80px}
.bomb.sel{outline:4px solid #fff;outline-offset:2px}
.bomb.empty{filter:grayscale(1) brightness(.6)}
.bomb .rc{position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(rgba(0,0,0,.55) var(--p,0%),transparent 0);pointer-events:none}
.hint{position:absolute;left:50%;top:38%;transform:translateX(-50%);background:rgba(0,0,0,.55);padding:10px 16px;border-radius:12px;font-size:17px;text-align:center;width:max-content;max-width:90vw;transition:opacity .5s}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
#labels{position:fixed;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.dmg{position:absolute;font-size:24px;color:#ffdf3a;-webkit-text-stroke:2px #5a1b00;paint-order:stroke fill;transform:translate(-50%,-50%);white-space:nowrap}
/* MODALS */
.modal{position:fixed;inset:0;z-index:20;background:rgba(10,20,40,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.card{position:relative;background:linear-gradient(#34405a,#232b3c);border:3px solid #0d1320;border-radius:22px;padding:20px 18px;width:100%;max-width:420px;text-align:center;box-shadow:0 8px 0 rgba(0,0,0,.35);max-height:94vh;overflow:auto}
.card h1{font-size:48px;-webkit-text-stroke:3px #0d1320;paint-order:stroke fill}
.card h2{font-size:32px;margin-bottom:10px;color:#ffd23f;-webkit-text-stroke:2px #3b2a0e;paint-order:stroke fill}
.close{position:absolute;right:10px;top:10px;width:40px;height:40px;border-radius:10px;background:#e0393e;font-size:22px;box-shadow:0 3px 0 #8a1c1f}
.btn{padding:12px 18px;border-radius:14px;font-size:22px;border:3px solid rgba(0,0,0,.4)}
.btn.sm{padding:6px 12px;font-size:16px}
.btn.yellow{background:linear-gradient(#ffe066,#f5b915);color:#3b2a0e;box-shadow:0 4px 0 #a8730a}
.btn.dark{background:#3a4458;box-shadow:0 4px 0 #1a2030}
.btn:disabled{filter:grayscale(1);opacity:.6}
.btnrow{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.endscore{font-size:40px;margin:6px 0}
.rewards{display:flex;flex-direction:column;gap:6px;font-size:20px;background:rgba(0,0,0,.25);border-radius:12px;padding:10px}
.wallet{display:flex;align-items:center;justify-content:center;gap:8px;font-size:24px;margin-bottom:10px}
.chestrow{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.25);border-radius:12px;padding:10px;text-align:left;margin-bottom:10px}
.chestrow small{display:block;color:#aab4c0;font-family:system-ui;font-size:12px}
.chestrow>div:nth-child(2){flex:1}
.chestico{width:44px;height:36px;border-radius:8px 8px 4px 4px;background:linear-gradient(#f2b33d 40%,#c98a2b 40%);border:3px solid #5b3510}
.items{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.item{background:rgba(0,0,0,.25);border-radius:14px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px}
.item .ico{width:56px;height:56px;border-radius:50%;border:5px solid;display:flex;align-items:center;justify-content:center;background:#222}
.item .ico i{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#666,#111);display:block}
.item small{color:#cfd8e3;font-family:system-ui;font-size:12px}
.item .own{font-size:14px;color:#aab4c0}
.note{margin-top:12px;font-size:13px;color:#aab4c0;font-family:system-ui}
.chestinfo{font-size:18px;margin-bottom:10px}
#pName{width:80%;font-family:inherit;font-size:22px;text-align:center;padding:8px;border-radius:10px;border:3px solid #0d1320;margin:6px 0;user-select:text;-webkit-user-select:text}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.stats div{background:rgba(0,0,0,.25);border-radius:10px;padding:8px;font-size:14px;color:#cfd8e3}
.stats b{display:block;font-size:24px;color:#fff}
#toast{position:fixed;left:50%;bottom:22%;transform:translateX(-50%);background:rgba(0,0,0,.75);padding:10px 16px;border-radius:12px;font-size:18px;z-index:50;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}
@media (min-aspect-ratio:1/1){.logo{position:absolute;left:5vw;top:24vh;margin:0}.logo .l1,.logo .l2{font-size:min(9vw,11vh)}}
/* ===== v2 ===== */
.trophy{font-size:12px;color:#ffd23f;margin-top:2px}
.sidebtns{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 150px);display:flex;flex-direction:column;gap:8px}
.sidebtns.left{left:10px}
.side{position:relative;width:64px;padding:6px 2px;border-radius:12px;background:rgba(38,42,50,.88);border:2px solid rgba(0,0,0,.45);font-size:11px;display:flex;flex-direction:column;align-items:center;gap:1px;pointer-events:auto;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.side span{font-size:24px}
.side .dot{width:22px;height:22px;font-size:13px;line-height:17px;top:-7px;right:-7px;border-width:2px}
.row2{display:flex;gap:10px}.row2 .profilebar{flex:1;flex-direction:row;gap:10px;padding:8px}
.pic.bag{background:linear-gradient(#ffb15e,#e07a1f);font-size:26px;line-height:46px;text-align:center}
.bico{position:relative;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.5),transparent 35%),var(--b);border:4px solid var(--c);display:inline-flex;align-items:center;justify-content:center;flex:none}
.bico i{position:absolute;top:-7px;right:6px;width:4px;height:9px;background:#c8a46a;transform:rotate(25deg)}
.bico em{font-style:normal;font-size:16px;color:#fff;text-shadow:0 2px 0 #000}
#zoneWarn{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px 30px rgba(140,60,255,.6);opacity:0;transition:opacity .3s;display:flex;align-items:flex-start;justify-content:center;padding-top:38vh;font-size:24px;color:#e6d3ff;text-shadow:0 2px 0 #000}
canvas#c.slow{filter:saturate(1.35) contrast(1.05)}
#replayTag{position:fixed;left:0;right:0;top:max(14px,env(safe-area-inset-top));z-index:15;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
#replayTag .rt{background:rgba(224,57,62,.92);padding:8px 16px;border-radius:12px;font-size:18px;animation:pulse 1s infinite alternate}
#replayTag button{pointer-events:auto}
@keyframes pulse{to{transform:scale(1.06)}}
#end{align-items:flex-end;background:linear-gradient(transparent 40%,rgba(10,20,40,.6))}
.modal{align-items:flex-end}
.modal .card{max-height:72vh}
#end .card{max-height:55vh}
.sub{font-family:system-ui;font-size:13px;color:#cfd8e3;margin:-4px 0 10px}
.tabs{display:flex;gap:8px;margin-bottom:10px}.tabs button{flex:1;padding:8px;border-radius:10px;background:#3a4458;font-size:16px}.tabs button.on{background:#ffd23f;color:#3b2a0e}
.items .item.eq{outline:3px solid #7ee05b}
.sw{width:52px;height:52px;border-radius:50%;border:3px solid rgba(0,0,0,.4)}
.sw.em{background:#2a3244;font-size:30px;line-height:46px}
.skinsec h3{text-align:left;margin:10px 0 6px;color:#ffd23f}
.coin.mini{width:18px;height:18px;border-width:2px;vertical-align:middle}
.coin.mini:after{font-size:9px;line-height:14px}
.note.wide{grid-column:1/3}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.slot{position:relative;background:rgba(0,0,0,.3);border:3px solid transparent;border-radius:14px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font-size:14px}
.slot.sel{border-color:#ffd23f}.slot small{font-family:system-ui;color:#aab4c0;font-size:11px}
.slot .x{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;background:#e0393e;font-size:12px}
.emptyslot{width:44px;height:44px;border-radius:50%;border:3px dashed #6b7790;font-size:24px;line-height:38px;color:#6b7790}
.mlist{display:flex;flex-direction:column;gap:8px}
.mrow{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.25);border-radius:12px;padding:8px;text-align:left}
.mrow.locked{opacity:.5}.minfo{flex:1;min-width:0}.minfo small{display:block;font-family:system-ui;font-size:12px;color:#aab4c0}
.mrow .cnt{font-size:18px;color:#ffd23f}.inslot{font-size:12px;background:#36a52a;border-radius:8px;padding:4px 6px}
.tag{font-size:10px;background:#a35cff;border-radius:6px;padding:1px 5px;vertical-align:middle}
.mission{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.25);border-radius:12px;padding:10px;margin-bottom:8px;text-align:left}
.mission .mtxt{flex:1}.mission small{font-family:system-ui;color:#aab4c0;font-size:12px}.mission.claimed{opacity:.55}.mission .ok{font-size:26px;color:#7ee05b}
.days{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.day{background:rgba(0,0,0,.25);border-radius:10px;padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:2px;border:3px solid transparent}
.day span{font-size:24px}.day b{font-size:10px;font-family:system-ui;line-height:1.1}.day small{font-size:11px;color:#aab4c0}
.day.cur{border-color:#ffd23f}.day.got{opacity:.5}.day:last-child{grid-column:span 2}
.league{display:inline-block;padding:6px 14px;border-radius:12px;background:rgba(0,0,0,.3);border:3px solid var(--lc);color:var(--lc);font-size:22px;margin-bottom:4px}
#rankLeague small{display:block;font-family:system-ui;color:#cfd8e3;margin-bottom:8px}
.rrow{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;background:rgba(0,0,0,.2);margin-bottom:5px;text-align:left;font-size:15px}
.rrow.me{background:rgba(47,128,237,.45);outline:2px solid #6fb6ff}.rrow .pos{width:24px;color:#ffd23f}.rrow b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rrow .lg{font-size:12px}.rrow .tro{font-size:14px}
@media (min-aspect-ratio:1/1){.sidebtns{top:auto;bottom:24px}}
.mrow .lock{font-size:13px;background:#3a4252;color:#ffd23f;border-radius:8px;padding:5px 7px;white-space:nowrap}

.clist{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto}
.crow{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.25);border-radius:12px;padding:8px;border:2px solid transparent}.crow.eq{border-color:#ffd23f}.crow.locked{opacity:.6}
.crow .cface{width:46px;height:46px;border-radius:50%;flex:none;border:3px solid rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;font-size:22px}
.crow .cinfo{flex:1;min-width:0}.crow .cinfo small{display:block;font-family:system-ui;font-size:12px;color:#c9d2de}
.crow .lock{font-size:12px;background:#3a4252;color:#ffd23f;border-radius:8px;padding:5px 7px;white-space:nowrap}
.qrow{display:flex;align-items:center;gap:8px;justify-content:center;margin:8px 0;flex-wrap:wrap}.qrow small{font-family:system-ui;font-size:11px;color:#aab4c0;width:100%;text-align:center}
.sw.orig{background:conic-gradient(#4a9cf5,#ff8fcf,#f2f4f8,#ffd23f,#5fd36b,#4a9cf5)!important}
.btn.green{background:linear-gradient(#7ee05b,#3fae2a);color:#fff;text-align:center}

/* ===== v3 CLEAN HUD ===== */
:root{--st:max(10px,env(safe-area-inset-top));--sb:max(14px,env(safe-area-inset-bottom));--sl:max(12px,env(safe-area-inset-left));--sr:max(12px,env(safe-area-inset-right))}
.hudtop{position:absolute;left:var(--sl);right:var(--sr);top:var(--st);display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.hbtn{pointer-events:auto;width:38px;height:38px;border-radius:50%;background:rgba(20,26,38,.45);border:2px solid rgba(255,255,255,.25);font-size:18px;color:#fff;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.hbtn.off,.side.off{opacity:.55}.hbtn.off:after{content:'';position:absolute}
.toppill{pointer-events:none;display:flex;align-items:center;gap:10px;background:rgba(20,26,38,.55);border:2px solid rgba(255,255,255,.18);border-radius:999px;padding:3px 6px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.toppill .sc{display:flex;align-items:center;gap:5px;font-size:22px;min-width:44px}
.toppill .sc.foe{justify-content:flex-end}
.toppill .sc i{width:12px;height:12px;border-radius:50%;border:2px solid #fff}
.toppill .you i{background:#2f80ed}.toppill .foe i{background:#e0393e}
.toppill .you b{color:#7fbaff}.toppill .foe b{color:#ff7d80}
#timer{font-size:17px;background:rgba(0,0,0,.35);border-radius:999px;padding:2px 10px;min-width:58px;text-align:center}
#timer.warn{color:#ff6b6b;animation:pulse .5s infinite alternate}
#myhp{position:absolute;left:var(--sl);top:calc(var(--st) + 46px);display:flex;align-items:center;gap:6px;pointer-events:none}
#myhp b{font-size:15px;min-width:28px;text-shadow:0 1px 2px #000}
#myhp .bar{position:relative;width:min(34vw,150px);height:10px;border-radius:6px;background:rgba(0,0,0,.45);border:1.5px solid rgba(255,255,255,.35);overflow:hidden}
#myhpFill,#myhpLag{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:6px}
#myhpFill{background:linear-gradient(#8ef06a,#3fae2a);transition:width .12s}
#myhpLag{background:#ffdd66}
#myhp.low #myhpFill{background:linear-gradient(#ff7b6b,#d62f34)}
#myhp.low b{color:#ff8a80;animation:pulse .4s infinite alternate}
#ffaBoard{position:absolute;left:var(--sl);top:calc(var(--st) + 66px);font-size:12px;background:rgba(20,26,38,.4);border-radius:10px;padding:4px 7px;pointer-events:none;min-width:110px}
#ffaBoard div{display:flex;gap:5px;line-height:17px}#ffaBoard span{color:#aab4c0;width:18px}#ffaBoard b{flex:1;font-weight:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}#ffaBoard i{font-style:normal;color:#ffd23f}
#ffaBoard .me b{color:#7fbaff}
#minimap{position:absolute;right:var(--sr);top:calc(var(--st) + 46px);width:84px;height:84px;border-radius:50%;border:2.5px solid rgba(255,255,255,.55);background:#1a5a8a;opacity:.9;box-shadow:0 2px 8px rgba(0,0,0,.25)}
@media (min-width:700px){#minimap{width:120px;height:120px}}
#joy{position:absolute;left:calc(var(--sl) + 14px);bottom:calc(var(--sb) + 26px);width:124px;height:124px;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.3);pointer-events:none}
#joyKnob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:0 2px 6px rgba(0,0,0,.25)}
/* thumb cluster (bottom-right): big LANÇAR, MIRAR left of it, ability + bomb arc above */
#actBtns{position:absolute;right:var(--sr);bottom:var(--sb);width:230px;height:230px;pointer-events:none}
.act{position:absolute;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:auto;touch-action:none;color:#fff;font-size:11px;padding:0;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:transform .08s}
.act:active{transform:scale(.93)}
.act svg{width:42%}.act span{text-shadow:0 1px 2px rgba(0,0,0,.6)}
.act.throw{right:8px;bottom:14px;width:98px;height:98px;background:radial-gradient(circle at 50% 35%,rgba(255,170,90,.92),rgba(226,89,31,.85));border:3px solid rgba(255,230,190,.85);box-shadow:0 4px 12px rgba(0,0,0,.3);font-size:13px}
.act.throw.empty{filter:grayscale(.7) brightness(.8)}
.act.aim{right:118px;bottom:8px;width:68px;height:68px;background:rgba(30,79,138,.6);border:2.5px solid rgba(160,205,255,.8)}
.act.aim.on{background:rgba(47,128,237,.85);box-shadow:0 0 0 4px rgba(111,182,255,.45)}
.act.skill,.act.bombsel{--p:100%;--rc:#7fd6ff}
.act.skill{right:112px;bottom:92px;width:60px;height:60px;background:rgba(40,150,220,.6);border:none}
.act.bombsel{right:30px;bottom:124px;width:60px;height:60px;background:rgba(20,26,38,.55);border:none}
.act.skill:before,.act.bombsel:before{content:'';position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(var(--rc) var(--p),rgba(255,255,255,.15) 0);-webkit-mask:radial-gradient(circle,transparent 62%,#000 63%);mask:radial-gradient(circle,transparent 62%,#000 63%)}
.act.skill i{font-style:normal;font-size:26px;line-height:1}
.act.skill.cd i,.act.bombsel.empty .bico{opacity:.45}
.act .cdn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;text-shadow:0 2px 3px #000}
.act.bombsel .bico{width:40px;height:40px;border-width:3px}
.act.bombsel .pips{position:absolute;bottom:-12px;display:flex;gap:3px}
.act.bombsel .pips i{width:9px;height:9px;border-radius:50%;background:rgba(0,0,0,.5);border:1.5px solid rgba(255,255,255,.6)}
.act.bombsel .pips i.on{background:#ffd23f}
.act.bombsel .swap{position:absolute;left:-6px;top:-6px;background:#2f80ed;border-radius:50%;width:22px;height:22px;line-height:19px;font-size:13px;border:2px solid #fff}
@media (max-height:520px){#actBtns{transform:scale(.82);transform-origin:right bottom}#joy{transform:scale(.85);transform-origin:left bottom}}
.hpb{position:absolute;transform:translate(-50%,-100%);background:rgba(0,0,0,.55);border:1.5px solid rgba(0,0,0,.6);border-radius:5px;width:50px;height:8px}
.hpb div{height:100%;border-radius:4px;transition:width .15s}
.hpb b{display:none}
.hpb .nm{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);font-size:11px;white-space:nowrap;text-shadow:0 1px 2px #000;color:#ffd0d0}
#killfeed{position:absolute;left:50%;top:23%;transform:translateX(-50%);font-size:26px;text-shadow:0 2px 0 #000,0 0 8px rgba(0,0,0,.4);white-space:nowrap;pointer-events:none}
#feed2{position:absolute;right:var(--sr);top:calc(var(--st) + 138px);font-size:12px;background:rgba(20,26,38,.45);padding:3px 8px;border-radius:8px;opacity:0;transition:opacity .3s;pointer-events:none}
#hurtV{position:absolute;inset:0;pointer-events:none;opacity:0;box-shadow:inset 0 0 70px 18px rgba(230,30,30,.75)}
#hitmk{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px;opacity:0;pointer-events:none;transition:opacity .1s}
#hitmk i{position:absolute;width:12px;height:3px;background:#fff;box-shadow:0 0 3px #000;top:15px}
#hitmk i:nth-child(1){left:-2px;transform:rotate(45deg) translateX(-4px)}#hitmk i:nth-child(2){right:-2px;transform:rotate(-45deg) translateX(4px)}
#hitmk i:nth-child(3){left:-2px;transform:rotate(-45deg) translateX(-4px)}#hitmk i:nth-child(4){right:-2px;transform:rotate(45deg) translateX(4px)}
#hitmk i:nth-child(1),#hitmk i:nth-child(2){top:8px}#hitmk i:nth-child(3),#hitmk i:nth-child(4){top:23px}
#hitmk.kill i{background:#ff4d4d;width:15px}
#dmgDir{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0;pointer-events:none}
#dmgDir i{position:absolute;left:-60px;top:-150px;width:120px;height:40px;border-radius:50% 50% 0 0/100% 100% 0 0;border-top:7px solid rgba(255,50,50,.9);filter:drop-shadow(0 0 6px rgba(255,0,0,.7))}
#tutBox{position:absolute;left:50%;top:calc(var(--st) + 50px);transform:translateX(-50%);width:min(88vw,380px);background:rgba(20,26,38,.82);border:2px solid #ffd23f;border-radius:14px;padding:8px 12px 10px;text-align:center;pointer-events:auto;z-index:3}
#tutBox .tstep{font-size:12px;color:#ffd23f}#tutBox .ttxt{font-size:17px;margin:2px 0 6px;font-family:system-ui;font-weight:600}#tutBox .ttxt b{color:#ffd23f}
#tutBox .tbar{height:6px;border-radius:4px;background:rgba(255,255,255,.15);overflow:hidden}#tutBar{height:100%;width:0;background:#ffd23f;transition:width .3s}
#btnTutSkip{position:absolute;right:6px;top:4px;font-size:11px;color:#aab4c0;pointer-events:auto}
.tuthi{animation:tuthi .7s infinite alternate!important;z-index:2}
@keyframes tuthi{from{box-shadow:0 0 0 0 rgba(255,210,63,.9)}to{box-shadow:0 0 0 12px rgba(255,210,63,0)}}
#joy.tuthi{border-color:#ffd23f}
#flashUI{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:60}
/* end screen board (FFA) */
.eboard{display:flex;flex-direction:column;gap:4px;font-size:18px;max-width:260px;margin:0 auto}
.eboard div{display:flex;gap:8px;background:rgba(0,0,0,.25);border-radius:8px;padding:3px 10px}.eboard span{color:#ffd23f;width:28px}.eboard b{flex:1;text-align:left;font-weight:normal}.eboard i{font-style:normal}
.eboard .me{background:rgba(47,128,237,.5)}
/* ===== MENU: mode + chest slots ===== */
.moderow{display:flex;gap:8px;justify-content:center}
.mpill{pointer-events:auto;padding:6px 12px;font-size:15px;border-radius:999px;color:#fff}
.cslots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;pointer-events:auto}
.cslot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:84px;border-radius:14px;background:rgba(20,26,38,.7);border:2px solid rgba(0,0,0,.4);padding:2px 2px 4px;color:#fff;pointer-events:auto;overflow:visible}
.cslot.empty{background:rgba(20,26,38,.35);border:2px dashed rgba(255,255,255,.25);justify-content:center}
.cslot .cl{font-size:13px;line-height:1.1;text-shadow:0 1px 2px #000;z-index:2}
.cslot small{font-size:9px;font-family:system-ui;color:#c9d2de;z-index:2}
.cslot.empty small{color:#7d889a}
.cslot.unl{border-color:#ffd23f}.cslot.unl .cl{color:#ffd23f}
.cslot.ready{border-color:#7ee05b;animation:pulse .6s infinite alternate}.cslot.ready .cl{color:#7ee05b;font-size:15px}
.cslot.r-comum{background:linear-gradient(rgba(154,163,173,.35),rgba(20,26,38,.8))}.cslot.r-incomum{background:linear-gradient(rgba(63,191,85,.35),rgba(20,26,38,.8))}.cslot.r-raro{background:linear-gradient(rgba(47,134,240,.4),rgba(20,26,38,.8))}.cslot.r-epico{background:linear-gradient(rgba(157,77,255,.45),rgba(20,26,38,.8))}.cslot.r-lendario{background:linear-gradient(rgba(255,191,31,.55),rgba(60,30,0,.85))}
.chestbox{position:relative;width:62px;height:54px;flex:none}
.chestbox svg{position:relative;width:100%;height:100%;display:block;z-index:1;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.chestbox.big{width:170px;height:148px;margin:0 auto}
.chestbox .glow{position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(circle,rgba(255,220,90,.75),rgba(255,180,0,.25) 45%,transparent 70%);animation:cglow 1.4s ease-in-out infinite alternate}
.chestbox.epico .glow{background:radial-gradient(circle,rgba(190,110,255,.6),transparent 65%)}
@keyframes cglow{from{transform:scale(.85);opacity:.7}to{transform:scale(1.1);opacity:1}}
.chestbox.lendario svg{animation:cbob 1.6s ease-in-out infinite}
@keyframes cbob{50%{transform:translateY(-3px) rotate(-2deg)}}
.chestbox .spk{position:absolute;width:6px;height:6px;background:#fff;border-radius:50%;box-shadow:0 0 6px 2px #ffe680,0 0 10px 3px #7ff3ff;z-index:2;animation:spk 1.8s linear infinite;opacity:0}
.chestbox .spk:nth-of-type(1){left:10%;top:20%;animation-delay:0s}.chestbox .spk:nth-of-type(2){left:85%;top:15%;animation-delay:.3s}.chestbox .spk:nth-of-type(3){left:50%;top:-8%;animation-delay:.6s}.chestbox .spk:nth-of-type(4){left:95%;top:60%;animation-delay:.9s}
.chestbox .spk:nth-of-type(5){left:0;top:65%;animation-delay:1.2s}.chestbox .spk:nth-of-type(6){left:30%;top:5%;animation-delay:1.5s}.chestbox .spk:nth-of-type(7){left:70%;top:85%;animation-delay:.45s}.chestbox .spk:nth-of-type(8){left:20%;top:90%;animation-delay:1.05s}
@keyframes spk{0%{opacity:0;transform:translateY(4px) scale(.3)}30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-14px) scale(.2)}}
.cslot .chestbox{width:56px;height:48px;margin-bottom:auto;margin-top:2px}
.cslot.sm{height:78px}.cslot.sm .chestbox{width:46px;height:40px}.cslot.sel{outline:3px solid #ffd23f}
.cslots.inmodal{margin-top:14px}
.cbig{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cbig .cname{font-size:26px;margin-top:6px;-webkit-text-stroke:1.5px #0d1320;paint-order:stroke fill}.cbig .cmat{font-family:system-ui;color:#c9d2de;font-size:12px}
.cempty{font-size:20px;padding:30px 0}.cempty small{font-family:system-ui;font-size:13px;color:#aab4c0}
.odds{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:8px}
.odds span{font-size:12px;font-family:system-ui;background:rgba(0,0,0,.3);border-radius:8px;padding:3px 7px;display:flex;align-items:center;gap:4px}.odds i{width:9px;height:9px;border-radius:2px;background:var(--rc)}
.btn.purple{background:linear-gradient(#b884ff,#7a3fe0);box-shadow:0 4px 0 #4a1d8a}
.gem.mini{width:16px;height:16px;display:inline-block;vertical-align:middle}
/* reel */
.reelwrap{position:relative;height:150px;overflow:hidden;border-radius:14px;background:linear-gradient(#141a26,#1f2738);border:3px solid #0d1320;margin:6px 0 10px;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.reel{position:absolute;left:0;top:13px;display:flex;will-change:transform}
.rcard{flex:none;width:102px;height:122px;margin-right:6px;border-radius:12px;background:linear-gradient(rgba(255,255,255,.08),rgba(0,0,0,.25)),#2a3245;border:2px solid rgba(0,0,0,.5);border-bottom:8px solid var(--rc);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;box-shadow:inset 0 -24px 30px -20px var(--rc)}
.rcard .ri{height:52px;display:flex;align-items:center;justify-content:center}
.rcard .bico{width:46px;height:46px}.rcard .coin{width:40px;height:40px}.rcard .coin:after{line-height:34px;font-size:18px}
.rcard b{font-size:14px;line-height:1}.rcard small{font-family:system-ui;font-size:10px;color:var(--rc);font-weight:700;text-transform:uppercase}
.rcard.r-lendario{background:linear-gradient(rgba(255,215,90,.25),rgba(0,0,0,.2)),#3a2c10}
.hface{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;border:3px solid rgba(0,0,0,.35)}
.rcard.won{transform:scale(1.08);box-shadow:0 0 0 3px #fff,0 0 26px 8px var(--rc);transition:transform .25s,box-shadow .25s}
.reelmark{position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:#ffd23f;box-shadow:0 0 8px #ffd23f;z-index:2}
.reelmark:before,.reelmark:after{content:'';position:absolute;left:50%;transform:translateX(-50%);border:10px solid transparent}
.reelmark:before{top:0;border-top-color:#ffd23f}.reelmark:after{bottom:0;border-bottom-color:#ffd23f}
.reelburst{position:absolute;left:50%;top:50%;z-index:3;pointer-events:none}
.reelburst i{position:absolute;width:8px;height:8px;border-radius:2px;background:var(--c);animation:burst .9s ease-out forwards}
@keyframes burst{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.3) rotate(240deg);opacity:0}}
.reelmsg{min-height:46px;font-size:18px;margin-bottom:6px}.reelmsg small{font-family:system-ui;font-size:12px;color:#aab4c0}
#ffaBoard{font-size:11px;min-width:0;padding:3px 7px;background:rgba(20,26,38,.32)}#ffaBoard div{line-height:15px}#ffaBoard b{max-width:84px}
/* cluster v3b: arc around LANÇAR (center ~ right 69 / bottom 63) */
#actBtns{width:250px;height:230px}
.act.throw{right:20px;bottom:14px}
.act.aim{right:145px;bottom:29px}
.act.jump{right:121px;bottom:93px;width:58px;height:58px;background:rgba(80,200,120,.55);border:2.5px solid rgba(200,255,215,.8);font-size:10px}
.act.jump svg{width:40%}
.act.skill{right:73px;bottom:137px;width:58px;height:58px}
.act.bombsel{right:9px;bottom:131px;width:54px;height:54px}
.act.bombsel .bico{width:36px;height:36px}
/* ===== v4: pass, achievements, modes, pickups, clip ===== */
.sidebtns.right{right:10px;left:auto}
.mbadges{font-size:12px;color:#ffd23f}
.moderow{flex-wrap:wrap}.mpill{font-size:13px;padding:5px 10px}
#hillTag{position:absolute;left:50%;top:calc(var(--st) + 46px);transform:translateX(-50%);font-size:14px;background:rgba(20,26,38,.55);padding:3px 10px;border-radius:999px;pointer-events:none;white-space:nowrap}
#hillTag.mine{color:#7fbaff;background:rgba(47,128,237,.45)}#hillTag.foe{color:#ffb0b0;background:rgba(224,57,62,.4)}
#recTag{position:fixed;left:50%;top:calc(max(10px,env(safe-area-inset-top)) + 70px);transform:translateX(-50%);z-index:16;color:#fff;background:rgba(224,57,62,.9);padding:5px 12px;border-radius:999px;font-size:14px;animation:pulse .6s infinite alternate}
#clipBox{margin-top:10px;background:rgba(0,0,0,.25);border-radius:12px;padding:8px}#clipBox .btnrow{margin-top:8px}#clipBox a{text-decoration:none;color:#3b2a0e}
.emeta{font-size:13px;color:#cfd8e3;margin-bottom:4px}
.ptrack{display:flex;gap:8px;overflow-x:auto;padding:8px 2px 10px;scroll-snap-type:x mandatory;margin-top:8px}
.pcell{flex:none;width:104px;scroll-snap-align:center;background:rgba(0,0,0,.28);border-radius:12px;padding:6px;display:flex;flex-direction:column;align-items:center;gap:4px;border:2px solid transparent}
.pcell small{font-size:11px;color:#aab4c0}.pcell.open{border-color:#ffd23f}.pcell.got{opacity:.6}
.prw{height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:13px}.prw .chestbox{width:56px;height:48px}.prw .coin{width:36px;height:36px}
.pcell .ok{color:#7ee05b;font-size:20px}.pcell .lockd{font-size:16px;opacity:.7}
.achlist{display:flex;flex-direction:column;gap:7px;max-height:56vh;overflow:auto}
.ach{display:flex;gap:10px;align-items:center;background:rgba(0,0,0,.25);border-radius:12px;padding:8px;text-align:left;opacity:.75}.ach.got{opacity:1;outline:2px solid #ffd23f}
.ach div{flex:1;min-width:0}.ach small{display:block;font-family:system-ui;font-size:12px;color:#aab4c0}
.bdg{width:44px;height:44px;flex:none;border-radius:50%;background:radial-gradient(circle at 40% 35%,#4a5570,#232b3c);border:3px solid #6b7790;display:inline-flex;align-items:center;justify-content:center;font-size:22px;filter:grayscale(1)}
.ach.got .bdg,.pbadges .bdg{filter:none;border-color:#ffd23f;background:radial-gradient(circle at 40% 35%,#ffe066,#c98a00)}
.bdg.sm{width:32px;height:32px;font-size:16px;border-width:2px}
.pbadges{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:6px 0}.nob{font-family:system-ui;color:#7d889a}
#achToast{position:fixed;left:50%;top:-120px;transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:10px;background:linear-gradient(#34405a,#232b3c);border:3px solid #ffd23f;border-radius:16px;padding:8px 16px;transition:top .4s;pointer-events:none}
#achToast.on{top:calc(max(10px,env(safe-area-inset-top)) + 10px)}#achToast span{font-size:34px}#achToast small{display:block;font-size:10px;color:#ffd23f}#achToast b{display:block;font-size:18px}#achToast i{font-style:normal;font-size:12px;color:#cfd8e3}
#pass h2,#ach h2{font-size:24px}