*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#07080d;color:#f6efe0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Arabic",Tahoma,sans-serif;overflow-x:hidden}
body{background:radial-gradient(120% 70% at 50% 0%,#3a1d10 0%,#14101c 45%,#06070b 100%) fixed}
#app{max-width:560px;margin:0 auto;min-height:100%;padding:max(14px,env(safe-area-inset-top)) 14px max(16px,env(safe-area-inset-bottom));position:relative}
.screen{display:none;min-height:calc(100dvh - 30px);flex-direction:column;align-items:stretch}
.screen.on{display:flex}
button{font:inherit;cursor:pointer;border:0}
.lang{align-self:flex-end;background:rgba(255,255,255,.07);color:#f3d27a;border:1px solid rgba(243,210,122,.35);padding:8px 14px;border-radius:999px;font-size:14px}
.hero{text-align:center;margin:12px 0 14px}
.heroPic{position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.6),0 0 0 2px rgba(243,210,122,.35);background:linear-gradient(160deg,#ff9a3c,#c2185b 50%,#2a1460)}
.heroPic img{width:100%;height:100%;object-fit:cover;display:block}
h1{font-size:clamp(32px,9.5vw,46px);margin:12px 0 2px;letter-spacing:.5px;line-height:1.05}
.crown{background:linear-gradient(180deg,#fff3c4,#e5b84a 55%,#9c6f17);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}
.tag{margin:4px 0 0;color:#ffd27a;font-size:20px;font-weight:800;letter-spacing:.5px}
.big{display:block;width:100%;min-height:68px;border-radius:20px;font-size:26px;font-weight:900;letter-spacing:1px;color:#2a1a00;background:linear-gradient(180deg,#ffe58f 0%,#f2c23e 45%,#c98b12 100%);box-shadow:0 10px 26px rgba(242,194,62,.35),inset 0 2px 0 rgba(255,255,255,.7),inset 0 -4px 0 rgba(0,0,0,.18);margin:8px 0;transition:transform .12s;text-align:center}
.big:active{transform:scale(.97)}
.second{display:block;width:100%;min-height:56px;border-radius:18px;font-size:20px;font-weight:800;color:#f6efe0;background:rgba(255,255,255,.06);border:2px solid rgba(243,210,122,.55);margin:8px 0;text-align:center}
.linkBtn{line-height:52px;text-decoration:none}
.plain{display:block;width:100%;background:none;color:#e9d9ae;text-decoration:underline;font-size:16px;padding:12px;margin-top:4px;text-align:center}
.stats{text-align:center;color:#d8cbaa;margin:4px 0;font-size:15px;min-height:1em}
.more{margin-top:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:4px 14px}
.more summary{padding:12px 0;color:#d8cbaa;font-size:16px;cursor:pointer}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;flex-wrap:wrap}
.seg{display:flex;background:rgba(0,0,0,.35);border-radius:12px;padding:3px}
.seg button{background:none;color:#cfc4a8;padding:9px 12px;border-radius:9px;font-size:15px}
.seg button.on{background:#f2c23e;color:#2a1a00;font-weight:800}
input[type=checkbox]{width:24px;height:24px;accent-color:#f2c23e}
.note{color:#a69d88;font-size:14px;line-height:1.45}
.note a{color:#f3d27a}
.waitCard{margin:auto 0;text-align:center;background:rgba(255,255,255,.05);border:1px solid rgba(243,210,122,.3);border-radius:24px;padding:26px 18px}
.spinner{width:56px;height:56px;margin:0 auto 10px;border-radius:50%;border:5px solid rgba(242,194,62,.2);border-top-color:#f2c23e;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.count{font-size:72px;font-weight:900;color:#f2c23e;line-height:1}
#shareLink{width:100%;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.35);color:#fff;font-size:15px;text-align:center;direction:ltr}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:40;padding:16px;backdrop-filter:blur(3px)}
.overlay[hidden]{display:none}
.card{width:min(380px,100%);max-height:100%;overflow:auto;background:linear-gradient(180deg,#24180e,#121018);border:1px solid rgba(243,210,122,.45);border-radius:24px;padding:20px 16px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.7);animation:pop .3s cubic-bezier(.3,1.4,.5,1)}
@keyframes pop{from{transform:scale(.85);opacity:0}}
.card h2{margin:2px 0 6px;font-size:28px}
.trophy{font-size:56px;line-height:1.1}
#endTable{margin:8px 0;font-size:16px;text-align:start}
#endTable div{display:flex;justify-content:space-between;padding:6px 10px;border-radius:10px}
#endTable div.me{background:rgba(242,194,62,.2);color:#ffe08a;font-weight:800}
#toast{position:fixed;left:50%;bottom:30%;transform:translateX(-50%);background:rgba(10,10,16,.92);border:1px solid rgba(243,210,122,.5);color:#fff;padding:12px 18px;border-radius:14px;font-size:16px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:80;max-width:90vw;text-align:center}
#toast.on{opacity:1}
/* ---------- game ---------- */
#game.screen{position:fixed;inset:0;min-height:0;z-index:5;background:#000;touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.hudTop{position:absolute;left:0;right:0;top:0;display:flex;justify-content:center;padding:max(10px,env(safe-area-inset-top)) 128px 0 62px;pointer-events:none}
.stat{display:flex;gap:12px;align-items:center;background:rgba(10,12,20,.6);border:1px solid rgba(243,210,122,.35);border-radius:14px;padding:7px 12px;font-size:16px;backdrop-filter:blur(4px);white-space:nowrap}
.stat b{color:#ffe08a;font-size:18px}
#tRank{color:#9fe3a8;font-weight:800}
#radar{position:absolute;top:max(8px,env(safe-area-inset-top));inset-inline-end:8px;width:112px;height:112px;border-radius:50%;box-shadow:0 0 0 2px rgba(243,210,122,.6),0 6px 16px rgba(0,0,0,.5);pointer-events:none}
.sideCol{position:absolute;top:calc(max(8px,env(safe-area-inset-top)) + 120px);inset-inline-end:10px;display:flex;flex-direction:column;gap:8px}
.hb{width:44px;height:44px;border-radius:14px;background:rgba(10,12,20,.55);color:#f3d27a;border:1px solid rgba(243,210,122,.35);font-size:20px;display:flex;align-items:center;justify-content:center;padding:0;flex:none;backdrop-filter:blur(4px)}
.hpBox{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 52px);inset-inline-start:10px;width:150px;height:22px;border-radius:11px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.3);overflow:hidden;pointer-events:none}
.hpBox i{position:absolute;inset:0;width:100%;background:linear-gradient(180deg,#7dff8f,#1fb64a);transform-origin:left;transition:transform .15s}
[dir=rtl] .hpBox i{transform-origin:right}
.hpBox b{position:absolute;inset:0;text-align:center;font-size:14px;line-height:21px;text-shadow:0 1px 2px #000}
#feed{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 80px);inset-inline-start:10px;display:flex;flex-direction:column;gap:4px;pointer-events:none;max-width:60vw}
#feed div{background:rgba(10,12,20,.62);border-radius:10px;padding:4px 10px;font-size:14px;animation:pop .25s}
#feed .me{color:#ffe08a;font-weight:800}
#center{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-size:clamp(22px,6vw,34px);font-weight:900;text-align:center;text-shadow:0 3px 10px #000,0 0 2px #000;pointer-events:none;white-space:pre-line;width:92vw}
#cross{position:absolute;left:50%;top:44%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.5);pointer-events:none;opacity:.8}
#lock{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px;border:3px solid #ff3b3b;border-radius:50%;box-shadow:0 0 10px #ff3b3b;pointer-events:none;display:none}
#lock.on{display:block}
#hurt{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(255,0,0,0) 45%,rgba(220,0,0,.6) 100%);opacity:0;transition:opacity .2s}
#tags{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.nt{position:absolute;left:0;top:0;transform-origin:50% 100%;text-align:center;white-space:nowrap;will-change:transform}
.nt b{display:block;font-size:13px;font-weight:800;color:#fff;text-shadow:0 1px 3px #000,0 0 2px #000;margin-bottom:2px}
.nt.foe b{color:#ff8a80}.nt.me b{color:#ffe08a}.nt.pal b{color:#8fd3ff}
.nt i{display:block;width:58px;height:7px;margin:0 auto;background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.55);border-radius:4px;overflow:hidden}
.nt u{display:block;height:100%;background:#4cff6a;transform-origin:left}
#joy{position:absolute;left:0;bottom:0;width:46%;height:58%;pointer-events:none}
#joyBase{position:absolute;width:132px;height:132px;margin:-66px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),rgba(255,255,255,.18));border:2px solid rgba(255,255,255,.35);left:96px;bottom:auto;top:0;opacity:.6}
#joyKnob{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7d0,#f2c23e 60%,#b07a0e);box-shadow:0 4px 12px rgba(0,0,0,.5)}
.btns{position:absolute;right:max(10px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));width:210px;height:210px}
.gb{position:absolute;border-radius:50%;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;border:2px solid rgba(255,255,255,.55);box-shadow:0 6px 16px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.35);backdrop-filter:blur(3px)}
.gb span{font-size:26px;line-height:1}.gb small{font-size:11px;font-weight:800;margin-top:2px;letter-spacing:.5px}
.gb:active,.gb.on{transform:scale(.93);filter:brightness(1.25)}
.gFire{right:0;bottom:0;width:104px;height:104px;background:radial-gradient(circle at 35% 30%,#ff8a70,#e5322b 60%,#8e1410)}
.gFire span{font-size:38px}
.gJump{right:118px;bottom:0;width:70px;height:70px;background:radial-gradient(circle at 35% 30%,#8fd3ff,#2a7fd4 60%,#123f78)}
.gNade{right:0;bottom:118px;width:62px;height:62px;background:radial-gradient(circle at 35% 30%,#d3e58a,#6f8a22 60%,#38470c)}
.gWeap{right:84px;bottom:92px;width:62px;height:62px;background:radial-gradient(circle at 35% 30%,#ffe58f,#c98b12 60%,#6b4708)}
.gWeap span{font-size:22px}
.act{position:absolute;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);min-width:150px;height:58px;border-radius:18px;font-size:22px;font-weight:900;color:#2a1a00;background:linear-gradient(180deg,#ffe58f,#f2c23e 45%,#c98b12);box-shadow:0 8px 20px rgba(0,0,0,.5);padding:0 18px;z-index:6}
.act[hidden]{display:none}
#loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,#2a1a10,#07080d);z-index:30;font-size:18px}
#loading[hidden]{display:none}
.lbar{width:220px;height:10px;border-radius:5px;background:rgba(255,255,255,.12);overflow:hidden}
.lbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffe58f,#f2c23e);transition:width .2s}
@media (orientation:landscape) and (max-height:500px){
 .btns{width:190px;height:190px}
 .gFire{width:92px;height:92px}.gJump{right:104px;width:62px;height:62px}.gNade{bottom:104px;width:56px;height:56px}.gWeap{right:74px;bottom:82px;width:56px;height:56px}
 #joy{height:75%}
 #radar{width:96px;height:96px}.sideCol{top:calc(max(8px,env(safe-area-inset-top)) + 102px)}
 .hpBox{top:max(10px,env(safe-area-inset-top));inset-inline-start:62px;width:130px}
 #feed{top:calc(max(10px,env(safe-area-inset-top)) + 40px)}
 .hudTop{padding-left:200px;padding-right:110px}
}