/* SERUST ARENA+ styles (own art, colourful) */
#apStrip{margin:6px 0 10px;display:flex;flex-direction:column;gap:8px}
.apTwist{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:16px;
 background:linear-gradient(120deg,var(--a),var(--b));color:#111;box-shadow:0 6px 22px -6px var(--a),inset 0 0 0 2px rgba(255,255,255,.35);position:relative;overflow:hidden}
.apTwist::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-100%);animation:apShine 3.2s infinite}
@keyframes apShine{60%,100%{transform:translateX(100%)}}
.apTI{font-size:30px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.apTT{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.apTT small{font:800 10px/1.2 system-ui,sans-serif;letter-spacing:.12em;opacity:.8}
.apTT b{font:900 19px/1.1 system-ui,sans-serif;letter-spacing:.02em}
.apTT i{font:600 12px/1.25 system-ui,sans-serif;font-style:normal;opacity:.85}
.apTD{font-size:22px}
.apTiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:720px){.apTiles{grid-template-columns:repeat(2,1fr)}}
.apTile{all:unset;box-sizing:border-box;cursor:pointer;padding:10px 12px;border-radius:14px;color:#fff;display:flex;flex-direction:column;gap:3px;
 box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),0 4px 14px -6px rgba(0,0,0,.6);transition:transform .12s}
.apTile:hover{transform:translateY(-2px)}.apTile:active{transform:scale(.97)}
.apTile b{font:900 14px/1.15 system-ui,sans-serif}.apTile span{font:600 11px/1.25 system-ui,sans-serif;opacity:.9}
.apTile.t1{background:linear-gradient(135deg,#ff3d6e,#ff9a1f)}.apTile.t2{background:linear-gradient(135deg,#3d7bff,#3dc8ff)}
.apTile.t3{background:linear-gradient(135deg,#2ee59d,#0aa37a)}.apTile.t4{background:linear-gradient(135deg,#a13dff,#ff3df2)}
#apStreakB{margin-top:4px}
.apStreak{display:inline-block;padding:3px 10px;border-radius:999px;font:900 12px/1.4 system-ui,sans-serif;color:#2a1200;background:linear-gradient(90deg,#ffb31a,#ff6a1a);box-shadow:0 0 14px #ff6a1a88;margin-inline-end:6px}
.apStreak.t2{background:linear-gradient(90deg,#c9d3df,#7fe7ff)}.apStreak.t3{background:linear-gradient(90deg,#ffd23a,#fff3a0);box-shadow:0 0 18px #ffd23a}
.apStreak.t4{background:linear-gradient(90deg,#ff3d3d,#ffe11f,#3dff6a,#3dc8ff,#a13dff);color:#111;animation:apPulse 1.2s infinite}
@keyframes apPulse{50%{box-shadow:0 0 26px #fff}}
#apChips{position:fixed;top:calc(env(safe-area-inset-top,0px) + 46px);left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:30;pointer-events:none}
#hud[hidden]~#apChips,body:not(:has(#hud:not([hidden]))) #apChips{display:none}
.apChip{padding:3px 10px;border-radius:999px;font:900 12px/1.4 system-ui,sans-serif;color:#111;background:#ffd23a;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.apChip.st{background:linear-gradient(90deg,#ffb31a,#ff6a1a)}.apChip.st.t4{background:linear-gradient(90deg,#ff3d3d,#ffe11f,#3dff6a,#3dc8ff,#a13dff)}
.apChip.lad{background:linear-gradient(90deg,#ff7a18,#ffd23a)}.apChip.tw{background:linear-gradient(90deg,#3dc8ff,#b5fffb)}
#apToast{position:fixed;top:18%;left:50%;transform:translate(-50%,-10px) scale(.9);opacity:0;z-index:80;padding:10px 18px;border-radius:14px;background:#141a24ee;color:#fff;
 font:800 15px/1.3 system-ui,sans-serif;box-shadow:0 0 0 2px var(--c),0 0 24px var(--c);pointer-events:none;transition:all .25s}
#apToast.on{opacity:1;transform:translate(-50%,0) scale(1)}
#apFx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:25}
/* charm on gun */
#apCharm{position:fixed;right:24%;bottom:17%;width:44px;height:78px;z-index:6;pointer-events:none;transform-origin:50% 0;will-change:transform}
#apCharm .apStr{position:absolute;left:50%;top:0;width:2px;height:34px;background:linear-gradient(#999,#ddd);transform:translateX(-50%)}
#apCharm .apCh{position:absolute;left:2px;top:32px;width:40px;height:40px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
#apCharm svg,.apCA svg{width:100%;height:100%}
@media (pointer:coarse){#apCharm{right:30%;bottom:22%;width:34px;height:60px}#apCharm .apCh{width:30px;height:30px;top:26px}#apCharm .apStr{height:28px}}
/* gun card */
#apCard{position:fixed;left:18px;bottom:110px;z-index:26;pointer-events:none;opacity:0;transform:translateX(-20px);transition:all .25s}
#apCard.on{opacity:1;transform:none}
@media (pointer:coarse){#apCard{left:50%;top:70px;bottom:auto;transform:translate(-50%,-10px)}#apCard.on{transform:translate(-50%,0)}}
.apCardIn{width:250px;padding:12px;border-radius:16px;background:linear-gradient(160deg,#1b2333f2,#0d1119f2);color:#fff;box-shadow:0 0 0 2px var(--mc),0 0 26px -6px var(--mc);font:600 12px/1.3 system-ui,sans-serif}
.apCardIn.big{width:auto}
.apCH{display:flex;justify-content:space-between;align-items:center;gap:8px}.apCH b{font:900 16px/1.1 system-ui,sans-serif;letter-spacing:.03em}
.apMB{padding:2px 8px;border-radius:999px;color:#111;font:900 10px/1.5 system-ui,sans-serif;white-space:nowrap}
.apBar{height:7px;border-radius:9px;background:#ffffff1f;margin:8px 0 4px;overflow:hidden}.apBar i{display:block;height:100%;border-radius:9px;background:#7dff3a}
.apCS{opacity:.75;font-size:11px}
.apCG{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:8px;text-align:center}
.apCG b{display:block;font:900 14px/1.2 system-ui,sans-serif}.apCG i{font-style:normal;font-size:9.5px;opacity:.7}
/* touch inspect button */
#inspectBtn[data-ap]{background:radial-gradient(circle at 30% 30%,#3dc8ff,#7a3dff)!important;color:#fff!important;border:2px solid #ffffffaa!important;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
#inspectBtn .apIn{font-size:18px}#inspectBtn small{font:900 8px/1 system-ui,sans-serif;letter-spacing:.06em;margin-top:2px}
/* overlays */
.apOv{position:fixed;inset:0;z-index:2147480000;background:rgba(5,8,14,.72);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:12px}
.apBox{width:min(560px,100%);max-height:92vh;overflow:auto;border-radius:20px;background:linear-gradient(160deg,#18202f,#0c1018);color:#fff;padding:14px;box-shadow:0 0 0 2px #3dc8ff55,0 20px 60px #000}
.apBox.wide{width:min(900px,100%)}
.apHead{display:flex;justify-content:space-between;align-items:center;font:900 18px/1.2 system-ui,sans-serif;letter-spacing:.06em;
 background:linear-gradient(90deg,#ffd23a,#ff3df2,#3dc8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.apX{all:unset;cursor:pointer;color:#fff;font:900 18px system-ui;width:32px;height:32px;text-align:center;border-radius:10px;background:#ffffff14;-webkit-text-fill-color:#fff}
.apSub{opacity:.75;font:600 12px/1.4 system-ui,sans-serif;margin:6px 0 10px}
.apSec{font:900 13px/1.3 system-ui,sans-serif;margin:12px 0 6px;color:#ffd23a}
.apCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.apIts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.apIt{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px;border-radius:14px;background:#ffffff0d;box-shadow:inset 0 0 0 2px #ffffff1a;text-align:center}
.apIt b{font:900 13px/1.2 system-ui,sans-serif}.apIt span{font:600 10.5px/1.3 system-ui,sans-serif;opacity:.75;min-height:2.6em}
.apIt em{font:900 10px/1.4 system-ui,sans-serif;font-style:normal;padding:2px 8px;border-radius:999px;background:#7dff3a;color:#111}
.apIt em.g{background:#3dc8ff}.apIt em.l{background:#ffffff22;color:#fff}
.apIt.on{box-shadow:inset 0 0 0 3px #7dff3a,0 0 18px -4px #7dff3a}.apIt.lock{opacity:.6;cursor:default}.apIt .apBar{width:100%;margin:2px 0}
.apFA{width:46px;height:46px;border-radius:50%;box-shadow:0 0 16px #fff6}.apCA{width:46px;height:46px;font-size:32px;line-height:46px}
.apPrev{position:relative;margin-top:12px;height:120px;border-radius:14px;background:radial-gradient(circle,#26324a,#0c1018);display:flex;align-items:flex-end;justify-content:center;padding:8px;font:600 11px system-ui;opacity:.9}
.apPrev canvas{position:absolute;inset:0;width:100%;height:100%}
.apKG{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}@media (max-width:560px){.apKG{grid-template-columns:1fr}}
.apKR{display:flex;justify-content:space-between;align-items:center;gap:8px;font:700 13px system-ui,sans-serif}
.apKey{all:unset;cursor:pointer;min-width:70px;text-align:center;padding:6px 10px;border-radius:10px;background:#ffffff14;box-shadow:inset 0 -3px 0 #0006,inset 0 0 0 1px #ffffff33;font:900 12px system-ui,sans-serif}
.apKey.changed{background:linear-gradient(135deg,#a13dff,#3dc8ff)}.apKey.wait{background:#ffd23a;color:#111;animation:apPulse .8s infinite}
.apFoot{margin-top:12px;display:flex;justify-content:flex-end}
.apBtn{all:unset;box-sizing:border-box;cursor:pointer;padding:7px 12px;border-radius:11px;font:900 12px/1.2 system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#3d7bff,#3dc8ff);box-shadow:0 3px 0 #0005}
.apBtn.hot{background:linear-gradient(135deg,#ff3d6e,#ff9a1f)}.apBtn.sm{padding:5px 9px;font-size:11px;background:#ffffff18}
.apBtn.ban{background:linear-gradient(135deg,#ff3d3d,#a10a2a);text-decoration:line-through}.apBtn[disabled]{opacity:.45;cursor:default}
/* range */
#apRange{position:fixed;inset:0;pointer-events:none;z-index:28}
#apDps{pointer-events:auto;position:absolute;top:calc(env(safe-area-inset-top,0px) + 60px);right:12px;width:210px;padding:10px;border-radius:16px;
 background:linear-gradient(160deg,#1b2333ee,#0d1119ee);color:#fff;box-shadow:0 0 0 2px #ff9a1f,0 0 24px -6px #ff9a1f;font:600 11px/1.3 system-ui,sans-serif}
.apDT{font:900 11px/1.2 system-ui,sans-serif;letter-spacing:.08em;color:#ffd23a}.apDT span{color:#fff;opacity:.8;margin-inline-start:4px}
.apDBig{display:flex;align-items:baseline;gap:6px;margin:4px 0}.apDBig b{font:900 36px/1 system-ui,sans-serif;background:linear-gradient(90deg,#ff3d6e,#ffd23a);-webkit-background-clip:text;background-clip:text;color:transparent}
.apDG{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px}.apDG div{display:flex;justify-content:space-between}.apDG i{font-style:normal;opacity:.7}
.apDB{display:flex;gap:5px;margin-top:8px}.apDB .apBtn{flex:1;text-align:center;padding:7px 4px;font-size:11px}
#apRack{pointer-events:auto;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,94vw);max-height:80vh;overflow:auto;padding:12px;border-radius:18px;background:#0d1119f4;color:#fff;box-shadow:0 0 0 2px #3dc8ff}
.apRT{font:900 16px system-ui,sans-serif;color:#3dc8ff}.apRT small{display:block;font:600 11px system-ui;color:#fff;opacity:.75;margin-top:2px}
.apRG{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;margin-top:10px}
.apGun{all:unset;cursor:pointer;padding:8px;border-radius:12px;background:#ffffff12;display:flex;flex-direction:column;gap:2px}
.apGun b{font:900 12px system-ui,sans-serif}.apGun span{font:600 10px system-ui;opacity:.6}.apGun.on{background:linear-gradient(135deg,#ff3d6e,#ff9a1f)}
@media (pointer:coarse){#apDps{top:auto;bottom:auto;top:calc(env(safe-area-inset-top,0px) + 8px);right:auto;left:50%;transform:translateX(-50%);width:250px}.apDBig b{font-size:26px}}
/* ranked bans */
#apBan{margin:8px 0;padding:10px;border-radius:14px;background:#ffffff0c;box-shadow:inset 0 0 0 2px #ff3d6e66}
.apBT{font:900 14px system-ui,sans-serif;color:#ff6a8e}.apBT small{display:block;font:600 11px system-ui;color:#fff;opacity:.75}
.apBR{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:7px;font:700 11px system-ui,sans-serif}.apBR>span{min-width:110px;opacity:.8}
.apBR.bot b{padding:3px 8px;border-radius:9px;background:#ff3d3d33;text-decoration:line-through}.apBR.ok{color:#7dff3a}
#apBan #apBanGo{margin-top:8px}
/* done screen */
#apDoneX{margin:6px 0 2px;text-align:center}.apDL{font:900 16px system-ui,sans-serif;color:#ffd23a}.apDL2{font:600 11px system-ui;opacity:.7}
#apRematch{background:linear-gradient(135deg,#ff3d6e,#a13dff)!important;color:#fff!important}
/* scope crosshair styles */
#scope[data-xh] .sh,#scope[data-xh] .sv{background:var(--apScope,#ff3355)}
#scope[data-xh=dot] .sh,#scope[data-xh=dot] .sv,#scope[data-xh=circle] .sh,#scope[data-xh=circle] .sv,#scope[data-xh=chevron] .sh,#scope[data-xh=chevron] .sv{display:none}
#scope[data-xh=dot]::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--apScope);box-shadow:0 0 6px var(--apScope)}
#scope[data-xh=circle]::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:2px solid var(--apScope)}
#scope[data-xh=chevron]::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-2px 0 0 -7px;border-left:3px solid var(--apScope);border-top:3px solid var(--apScope);transform:rotate(45deg)}
#scope[data-xh=cross] .sh{clip-path:polygon(0 0,46% 0,46% 100%,0 100%,0 0,54% 0,100% 0,100% 100%,54% 100%,54% 0)}
#scope[data-xh=cross] .sv{clip-path:polygon(0 0,100% 0,100% 46%,0 46%,0 0,0 54%,100% 54%,100% 100%,0 100%,0 54%)}
[dir=rtl] .apTT,[dir=rtl].apOv{text-align:right}

/* squad room */
.apRoomGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media (max-width:560px){.apRoomGrid{grid-template-columns:1fr}}
.apRoomCard{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;background:#ffffff0c;box-shadow:inset 0 0 0 2px #3dc8ff44}
.apRoomCard b{font:900 15px system-ui,sans-serif}
.apRoomCard input{all:unset;box-sizing:border-box;padding:10px;border-radius:12px;background:#000a;color:#fff;font:900 24px/1 ui-monospace,monospace;letter-spacing:.3em;text-align:center;text-transform:uppercase;box-shadow:inset 0 0 0 2px #ffffff33}
.apModes{display:flex;flex-wrap:wrap;gap:5px}.apBtn.on{background:linear-gradient(135deg,#2ee59d,#0aa37a)}.apBtn.big{width:100%;text-align:center;padding:12px;font-size:15px;margin-top:10px}
.apCode{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:14px;background:linear-gradient(120deg,#3d7bff33,#a13dff33);box-shadow:inset 0 0 0 2px #a13dff88}
.apCode small{font:900 10px system-ui;letter-spacing:.12em;opacity:.8}.apCode b{font:900 28px/1 ui-monospace,monospace;letter-spacing:.25em;color:#ffd23a}
.apMode{margin-inline-start:auto;font:900 12px system-ui;padding:3px 9px;border-radius:999px;background:#ffffff1f}
.apTeams{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}.apTeam{padding:8px;border-radius:12px;display:flex;flex-direction:column;gap:5px}
.apTeam i{font:900 11px system-ui;font-style:normal;letter-spacing:.08em}.apTeam.bl{background:#3d7bff22;box-shadow:inset 0 0 0 2px #3d7bff}.apTeam.or{background:#ff9a1f22;box-shadow:inset 0 0 0 2px #ff9a1f}
.apTeam.ffa{grid-column:1/-1;background:#ffffff0c}
.apMem{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:10px;background:#0006;font:800 13px system-ui}.apMem span{margin-inline-start:auto}.apMem.off{opacity:.5}.apMem.rdy{box-shadow:inset 0 0 0 2px #7dff3a}
.apSw{all:unset;cursor:pointer;padding:2px 7px;border-radius:8px;background:#ffffff22;font:900 12px system-ui}
.apBot{font:600 11px system-ui;opacity:.65;padding:4px 8px}
.apRow{display:flex;gap:6px;flex-wrap:wrap}.apRoomMsg{padding:10px;border-radius:12px;background:#ffffff0c;font:700 13px/1.4 system-ui;margin-top:8px}
.apChat{margin-top:6px;max-height:90px;overflow:auto;font:600 12px/1.4 system-ui;opacity:.9}

.apOv{padding-top:max(12px,env(safe-area-inset-top))}