:root{--navy:#04081c;--navy2:#0b1a3e;--panel:#0a1228;--gold:#ffe27a;--gold2:#f6b52a;--gold3:#c07a08;--line:#6b5320;--ink:#e9e4d0;--mute:#bcb69a;--r:#FF5A6E;--g:#37D97E;--b:#3AA0FF;--y:#FFCB3A}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{margin:0;height:100%;overflow:hidden;position:fixed;inset:0;touch-action:manipulation;overscroll-behavior:none;-webkit-touch-callout:none;background:var(--navy);color:var(--ink);font:14px/1.3 -apple-system,"Segoe UI",Roboto,sans-serif}
.screen{position:fixed;inset:0;display:none}.screen.on{display:block}
/* ---------- L0 sky ---------- */
#sky{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 0%,#132a66 0%,var(--navy2) 35%,#02040c 100%)}
#sky:before{content:"";position:absolute;inset:0;background-image:radial-gradient(1px 1px at 12% 18%,#fff8 50%,transparent 60%),radial-gradient(1px 1px at 68% 8%,#fff6 50%,transparent 60%),radial-gradient(1.5px 1.5px at 40% 30%,#ffe27a88 50%,transparent 60%),radial-gradient(1px 1px at 85% 40%,#fff5 50%,transparent 60%),radial-gradient(1px 1px at 22% 70%,#fff4 50%,transparent 60%),radial-gradient(1.5px 1.5px at 76% 82%,#ffe27a66 50%,transparent 60%);animation:drift 40s linear infinite}
@keyframes drift{to{transform:translateY(-8px)}}
/* ---------- L1 room ---------- */
#room{position:absolute;left:0;display:block;pointer-events:none;transform:translateZ(0)}
/* ---------- L2 ambient · L3 board · L5 tokens ---------- */
#board{position:absolute;z-index:5;transform:translateZ(0);contain:paint;box-shadow:0 0 0 2px #6b5320,0 18px 50px #000c,inset 0 0 40px #0006;background:#f3efe4}
#board svg{display:block}
#tokens{position:absolute;pointer-events:none;z-index:6;transform:translateZ(0);contain:layout style}
.tok{position:absolute;left:0;top:0;pointer-events:none;cursor:pointer;will-change:transform}
.tok.legal{pointer-events:auto;z-index:950!important}
.tok i{position:absolute;inset:0;border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 38% 28%,#fff9 0,#fff2 18%,transparent 40%),radial-gradient(circle at 50% 60%,var(--c) 0,color-mix(in srgb,var(--c) 60%,#000) 100%);box-shadow:0 0 0 2px #6b5320,0 0 0 4px #ffe27a,0 6px 10px #000a}
.tok i:after{content:"";position:absolute;left:22%;right:22%;bottom:-6%;height:22%;border-radius:50%;background:#0008;filter:blur(3px);z-index:-1}
.tok.legal i{animation:pulse .8s ease-in-out infinite;box-shadow:0 0 0 2px #6b5320,0 0 0 4px #ffe27a,0 0 18px 6px #ffe27a}
.tok.hit i{animation:shake .35s ease-in-out}
@keyframes pulse{50%{transform:scale(1.12)}}@keyframes shake{25%{transform:translateX(-4px) rotate(-8deg)}75%{transform:translateX(4px) rotate(8deg)}}
/* ---------- L7 pods ---------- */
.pod{position:absolute;pointer-events:none}
.pod img{position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 8px 14px #000a)}
.pod .glow{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,#ffe27a55 0,#f6b52a33 30%,transparent 62%);opacity:0;transition:opacity .3s}
.pod.active .glow{opacity:1;animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.08);opacity:.75}}
.pod .hole{position:absolute;border-radius:50%;overflow:visible}
.pod .avatar{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle at 40% 30%,#1a2c62,#050a20);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:clamp(14px,4.5vw,28px);color:var(--gold);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 70%,#000),inset 0 0 22px #000}
.pod .ring{position:absolute;inset:-8%;background:url(assets/ring_gold.webp) center/100% 100% no-repeat;opacity:0;pointer-events:none}
.pod .ring.track{opacity:.22}
.pod.active .ring.fill{opacity:1;-webkit-mask:conic-gradient(#000 var(--p,100%),transparent 0);mask:conic-gradient(#000 var(--p,100%),transparent 0)}
.pod.urgent .ring.fill{background-image:url(assets/ring_red.webp)}
.pod .tnum{position:absolute;right:-6%;bottom:-2%;min-width:26%;padding:2px 5px;border-radius:12px;background:linear-gradient(#ffe27a,#c07a08);color:#2a1c04;font-weight:800;font-size:clamp(10px,3vw,14px);text-align:center;border:1px solid #6b5320;opacity:0}
.pod.active .tnum{opacity:1}
.pod .pname{position:absolute;left:8%;right:8%;bottom:6%;text-align:center;color:var(--gold);font-weight:700;font-size:clamp(9px,2.8vw,13px);text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ---------- L8 dock + dice ---------- */
#dock{position:absolute;cursor:pointer;--sz:44px;z-index:20;left:calc(12px + env(safe-area-inset-left));}
#dock img{width:100%;display:block;filter:drop-shadow(0 8px 14px #000a)}
#dock.mine{animation:ready 1.2s ease-in-out infinite}
@keyframes ready{50%{filter:brightness(1.18)}}
#hint{position:absolute;left:0;right:0;bottom:2%;text-align:center;color:var(--gold);font-weight:700;font-size:clamp(9px,2.8vw,12px);letter-spacing:.4px;text-shadow:0 1px 2px #000}
.scene{position:absolute;left:50%;top:40%;width:var(--sz);height:var(--sz);transform:translate(-50%,-50%);perspective:900px}
#diceWrap{position:absolute;inset:0;transform-style:preserve-3d}
#dice{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
#dice.rolling{animation:roll .62s linear}
@keyframes roll{to{transform:rotateX(1080deg) rotateY(720deg)}}
.face{position:absolute;inset:0;border-radius:7%;background:linear-gradient(150deg,#ffe27a,#f6b52a 55%,#c07a08);box-shadow:inset 0 0 0 2px #6b5320,inset 0 -6px 10px #0004,inset 0 6px 10px #fff4;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:16%;backface-visibility:hidden}
.face b{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a2a08,#0d0904);align-self:center;justify-self:center;transform:scale(.72)}
.f1{transform:translateZ(calc(var(--sz)/2))}.f6{transform:rotateX(180deg) translateZ(calc(var(--sz)/2))}.f2{transform:rotateY(90deg) translateZ(calc(var(--sz)/2))}.f5{transform:rotateY(-90deg) translateZ(calc(var(--sz)/2))}.f3{transform:rotateX(90deg) translateZ(calc(var(--sz)/2))}.f4{transform:rotateX(-90deg) translateZ(calc(var(--sz)/2))}
#emote{position:absolute;padding:8px 12px;border-radius:20px;background:linear-gradient(#ffe27a,#c07a08);color:#2a1c04;font-weight:800;font-size:clamp(10px,3vw,12px);border:1px solid #6b5320;box-shadow:0 4px 10px #0008}
/* ---------- L9 HUD ---------- */
#hudTop,#hudBot{position:absolute;pointer-events:none;z-index:15}
#hudTop .slotBtn,#hudBot .em,#hudBot .chat{pointer-events:auto}
#game.compact #hudBot{display:none}
#emote{z-index:21;cursor:pointer}
.pod{z-index:10}
#hudTop img,#hudBot img{width:100%;display:block;filter:drop-shadow(0 6px 12px #000a)}
#hudTop .ov{position:absolute;inset:0}
#modeLbl{position:absolute;left:22%;right:22%;top:0;bottom:0;display:flex;align-items:center;justify-content:center;color:var(--gold);font-weight:800;font-size:clamp(11px,3.4vw,15px);letter-spacing:.3px;text-shadow:0 1px 2px #000}
.slotBtn{position:absolute;top:0;bottom:0;width:15%;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:clamp(14px,4.5vw,20px);cursor:pointer}
#backBtn{left:1%}#gear{right:1%}
#hudBot .ov{position:absolute;inset:0}
#hudBot .em{position:absolute;top:0;bottom:0;width:9.6%;display:flex;align-items:center;justify-content:center;font-size:clamp(14px,4.6vw,22px)}
#hudBot .chat{position:absolute;left:60%;right:8%;top:0;bottom:0;display:flex;align-items:center;justify-content:center;color:var(--gold);font-weight:700;font-size:clamp(10px,3vw,13px)}
/* ---------- L10 toast / result ---------- */
#toast{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.9);padding:10px 18px;border-radius:14px;background:linear-gradient(#101a36,#0a1228);border:1px solid var(--gold2);color:var(--gold);font-weight:800;font-size:clamp(14px,4.5vw,20px);opacity:0;transition:.2s;pointer-events:none;box-shadow:0 10px 30px #000c;white-space:nowrap}
#toast.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#result{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#02040ccc;z-index:50}
#result.on{display:flex}
.plaque{width:78%;padding:28px 18px 22px;border-radius:22px;background:linear-gradient(#101a36,#0a1228);border:2px solid var(--gold2);box-shadow:0 0 0 6px #0a1228,0 0 0 8px #6b5320,0 30px 60px #000;text-align:center}
#resTitle{font-size:clamp(28px,9vw,40px);font-weight:900;letter-spacing:2px;background:linear-gradient(#ffe27a,#f6b52a 55%,#c07a08);-webkit-background-clip:text;background-clip:text;color:transparent}
#result.lose #resTitle{background:linear-gradient(#d9d2bf,#8a8474);-webkit-background-clip:text;background-clip:text}
#resSub{color:var(--mute);margin:6px 0 18px}
.gbtn{display:inline-block;padding:12px 26px;border-radius:26px;background:linear-gradient(#ffe27a,#f6b52a 55%,#c07a08);color:#2a1c04;font-weight:900;font-size:16px;border:1px solid #6b5320;box-shadow:0 6px 14px #0009,inset 0 2px 0 #fff6;cursor:pointer}
/* ---------- lobby ---------- */
#lobby{background:radial-gradient(120% 70% at 50% 0%,#132a66 0%,var(--navy2) 35%,#02040c 100%);padding:max(44px,env(safe-area-inset-top)) 16px 24px;overflow:auto}
#lobby h1{margin:8px 0 2px;font-size:26px;letter-spacing:1px;background:linear-gradient(#ffe27a,#f6b52a 55%,#c07a08);-webkit-background-clip:text;background-clip:text;color:transparent}
#lobby .sub{color:var(--mute);font-size:12px;margin-bottom:16px}
.modes{display:flex;gap:12px;margin:10px 0 18px}.modes .gbtn{flex:1;text-align:center}
#lobby h3{color:var(--gold2);font-size:13px;margin:12px 0 8px;text-transform:uppercase;letter-spacing:1px}
#roomGrid{content-visibility:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rthumb{aspect-ratio:9/16;border-radius:12px;background:#0a1228 center/cover no-repeat;border:2px solid #2a2410;position:relative;overflow:hidden}
.rthumb.sel{border-color:var(--gold);box-shadow:0 0 0 2px #ffe27a66,0 0 16px #f6b52a88}
.rthumb span{position:absolute;left:0;right:0;bottom:0;padding:4px;font-size:9px;color:var(--gold);background:linear-gradient(transparent,#000c);text-align:center}
.note{margin-top:14px;font-size:11px;color:var(--mute);border:1px dashed var(--line);border-radius:10px;padding:8px}
/* ---------- dev ---------- */
#dev{position:absolute;right:8px;top:80px;display:none;flex-direction:column;gap:6px;background:#0a1228ee;border:1px solid var(--line);border-radius:10px;padding:8px;z-index:50}
#dev.on{display:flex}#dev button{background:#101a36;color:var(--gold);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:11px}
#devInfo{font-size:9px;color:var(--mute);max-width:150px;word-break:break-all}

/* product art */
#boardImg{position:absolute;inset:0;width:100%;height:100%;display:none}
.tok.art img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 4px 6px #000b)}
.tok.art.legal img{animation:pulse .8s ease-in-out infinite;filter:drop-shadow(0 0 10px #ffe27a) drop-shadow(0 4px 6px #000b)}
#dock #diceArt{position:absolute;left:50%;top:50%;width:var(--box)!important;height:var(--box)!important;max-width:none;transform:translate(-50%,-50%);filter:drop-shadow(0 8px 10px #000b);display:none;will-change:transform;transform-origin:50% 50%}
#dock.mine #diceArt{animation:idle 1.8s ease-in-out infinite}
@keyframes idle{50%{transform:translate(-50%,-58%) rotate(4deg)}}
@keyframes droll{0%{transform:none}18%{transform:translateY(-60%) rotate(-40deg) scale(1.22)}40%{transform:translateY(-30%) rotate(260deg) scale(1.15)}62%{transform:translateY(-4%) rotate(520deg) scale(1.02)}76%{transform:translateY(-14%) rotate(650deg) scale(1.06)}88%{transform:translateY(0) rotate(712deg)}100%{transform:rotate(720deg)}}
#dock #diceArt.roll{filter:drop-shadow(0 0 14px #ffe27a) drop-shadow(0 8px 10px #000b)}
#diceValX{border-radius:16%;background:linear-gradient(150deg,#ffe27a,#f6b52a 55%,#c07a08);box-shadow:inset 0 0 0 2px #6b5320,0 4px 10px #000a;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:10%;opacity:0;transform:scale(.4);transition:.25s cubic-bezier(.3,1.4,.5,1)}
#diceVal.on{opacity:1;transform:scale(1)}
#diceVal b{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a2a08,#0d0904);transform:scale(.7)}
#boardGrid{content-visibility:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:46vh;overflow:auto;padding-bottom:4px}
.bthumb{aspect-ratio:1;border-radius:10px;background:#0a1228 center/cover no-repeat;border:2px solid #2a2410;position:relative;overflow:hidden}
.bthumb.sel{border-color:var(--gold);box-shadow:0 0 0 2px #ffe27a66,0 0 14px #f6b52a88}
.bthumb span{position:absolute;left:0;right:0;bottom:12px;padding:2px 4px;font-size:8px;color:#fff;background:#000a;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bthumb em{position:absolute;left:0;right:0;bottom:0;font-style:normal;font-size:7px;text-align:center;padding:1px;background:#000c;color:var(--gold)}
.bthumb em.r-epic{color:#c9a3ff}.bthumb em.r-legendary{color:#ffb14a}.bthumb em.r-mythic{color:#ff5a6e}
.row{display:flex;gap:8px;overflow-x:auto;padding:4px 0 8px}
.pick{flex:0 0 auto;width:64px;height:64px;border-radius:12px;background:#0a1228;border:2px solid #2a2410;display:flex;align-items:center;justify-content:center;padding:4px}
.pick img{width:100%;height:100%;object-fit:contain}.pick.tok4{width:96px;display:grid;grid-template-columns:1fr 1fr;gap:0}.pick.tok4 img{width:100%;height:100%}
.pick.sel{border-color:var(--gold);box-shadow:0 0 12px #f6b52a88}

/* dice v2: hero art + palette cube */
#dice{transform-style:preserve-3d;transition:none}
#dice.hide{opacity:0;pointer-events:none}
#dice{transition:opacity .25s}
#diceArt{transition:opacity .22s,transform .22s}
#diceArt.gone{opacity:0;transform:translate(-50%,-90%) scale(1.2)}
.face{background:var(--dface,linear-gradient(150deg,#ffe27a,#f6b52a 55%,#c07a08));box-shadow:inset 0 0 0 1.5px var(--drim,#6b5320),inset 0 0 0 3px #fff3,inset 0 -5px 8px #0006,inset 0 5px 8px #fff4;backface-visibility:hidden}
#dice:before,.pcube:before{content:"";position:absolute;inset:6%;background:var(--drim,#3a2a08);transform:translateZ(0);border-radius:6%}
#dice.spin .face{filter:blur(.6px)}
.face b{background:var(--dpip,radial-gradient(circle at 35% 30%,#3a2a08,#0d0904));box-shadow:inset 0 -2px 3px #0007,0 1px 2px #0006;position:relative}
.face b:after{content:"";position:absolute;left:24%;top:16%;width:30%;height:22%;border-radius:50%;background:#fff;opacity:.55;filter:blur(.5px)}
#diceWrap.bounce{animation:scb .98s cubic-bezier(.3,.8,.3,1)}
@keyframes scb{20%{transform:translateY(-55%)}45%{transform:translateY(-5%)}62%{transform:translateY(-22%)}80%{transform:translateY(0)}90%{transform:translateY(-6%)}100%{transform:none}}
/* HUD exact slots */
#hudTop .slotBtn,#hudBot .em,#hudBot .chat,#modeLbl{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
#hudBot .em img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 2px 3px #000a)}
#hudBot .em{cursor:pointer}#hudBot .em:active img{transform:scale(.9)}
#hudBot .chat{cursor:pointer;color:var(--gold);font-weight:700;font-size:clamp(10px,3vw,13px)}
#hudBot.flash{animation:flash .7s}
@keyframes flash{50%{filter:brightness(1.5) drop-shadow(0 0 12px #ffe27a)}}
#game.compact #hudBot.pop{display:block;z-index:40;top:auto}
#errDot{position:absolute;right:18%;top:18%;width:7px;height:7px;border-radius:50%;background:#ff5a6e;display:none}
/* bubbles */
.pod .bubble{position:absolute;left:50%;bottom:98%;transform:translate(-50%,10px) scale(.6);opacity:0;transition:.22s cubic-bezier(.3,1.4,.5,1);z-index:30;pointer-events:none}
.pod .bubble.on{opacity:1;transform:translate(-50%,0) scale(1)}
.pod .bubble img{width:clamp(44px,15vw,64px);height:auto;filter:drop-shadow(0 6px 10px #000b)}
.pod .bubble span{display:inline-block;white-space:nowrap;padding:6px 10px;border-radius:14px;background:linear-gradient(#101a36,#0a1228);border:1px solid var(--gold2);color:var(--gold);font-weight:700;font-size:clamp(11px,3.4vw,14px);box-shadow:0 6px 14px #000a}
.pod .bubble span:after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:#0a1228;border-right:1px solid var(--gold2);border-bottom:1px solid var(--gold2);transform:translateX(-50%) rotate(45deg)}
/* quick chat */
#chatPop{position:absolute;left:50%;bottom:22%;transform:translate(-50%,10px);width:78%;max-width:340px;display:none;grid-template-columns:1fr 1fr;gap:6px;padding:8px;border-radius:14px;background:#0a1228f2;border:1px solid var(--gold2);box-shadow:0 12px 30px #000c;z-index:45}
#chatPop.on{display:grid}
#chatPop .ph{padding:9px 8px;border-radius:10px;background:#101a36;border:1px solid var(--line);color:var(--ink);font-size:12px;text-align:center;cursor:pointer}
#chatPop .ph:active{background:#1a2a5a}

/* iso cube shading + number flash */

#diceNum{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.3);font-weight:900;font-size:calc(var(--box)*.9);line-height:1;color:#fff;-webkit-text-stroke:2px #6b5320;text-shadow:0 0 18px #ffe27a,0 4px 10px #000;opacity:0;pointer-events:none;transition:.28s cubic-bezier(.3,1.5,.5,1);z-index:5;background:linear-gradient(#ffe27a,#f6b52a 55%,#c07a08);-webkit-background-clip:text;background-clip:text;color:transparent}
#diceNum.on{opacity:1;transform:translate(-50%,-60%) scale(1)}

/* per-pod dice */
.pod .pdice{position:absolute;pointer-events:none;z-index:12}
.pod .pscene{position:absolute;left:50%;top:50%;width:var(--psz);height:var(--psz);transform:translate(-50%,-50%);perspective:700px}
.pod .pwrap{position:absolute;inset:0;transform-style:preserve-3d}
.pod .pcube{position:absolute;inset:0;transform-style:preserve-3d;opacity:0;transition:opacity .2s}
.pod .pcube.on{opacity:1}
.pod .pcube .face{--sz:var(--psz)}
.pod .part{position:absolute;left:50%;top:50%;width:calc(var(--psz)*1.9);height:calc(var(--psz)*1.9);transform:translate(-50%,-50%);filter:drop-shadow(0 4px 6px #000b);transition:opacity .2s,transform .2s}
.pod .part.gone{opacity:0;transform:translate(-50%,-80%) scale(1.15)}
.pod .pwrap.bounce{animation:scb .9s cubic-bezier(.3,.8,.3,1)}
.pod.active .pdice{filter:drop-shadow(0 0 10px #ffe27a)}
#dock.wait{opacity:.55;filter:saturate(.6)}
#banner{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.7);padding:10px 28px;border-radius:30px;background:linear-gradient(#ffe27a,#f6b52a 55%,#c07a08);color:#2a1c04;font-weight:900;letter-spacing:2px;font-size:clamp(18px,6vw,26px);border:2px solid #6b5320;box-shadow:0 0 0 4px #0a1228,0 0 0 6px #6b5320,0 14px 30px #000c;opacity:0;pointer-events:none;z-index:35;transition:.25s cubic-bezier(.3,1.5,.5,1);white-space:nowrap}
#banner.on{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* roll chips */
#chips{position:absolute;display:none;gap:6px;z-index:22;justify-content:center;align-items:center}
.chip{width:34px;height:34px;border-radius:8px;background:linear-gradient(150deg,#ffe27a,#f6b52a 55%,#c07a08);box-shadow:inset 0 0 0 1.5px #6b5320,0 4px 8px #000a;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:5px;cursor:pointer;transition:.15s}
.chip b{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a2a08,#0d0904);transform:scale(.8)}
.chip.sel{transform:translateY(-5px) scale(1.12);box-shadow:inset 0 0 0 1.5px #6b5320,0 0 14px #ffe27a,0 6px 10px #000a}
.chip.dead{opacity:.35;filter:saturate(.4)}
.chip.ghost{opacity:.55;transform:scale(.9);outline:1px dashed #ffe27a88}
/* art-face cube */
#dice.artfaces .face,.pcube.artfaces .face{background-size:100% 100%!important;background-position:center!important;box-shadow:inset 0 0 0 1px #00000055;border-radius:9%}
#dice.artfaces .face b,.pcube.artfaces .face b{display:none}
#dice.artfaces:before,.pcube.artfaces:before{inset:3%}

.panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%) scale(.92);opacity:0;pointer-events:none;width:82%;max-width:360px;background:linear-gradient(#101a36,#0a1228);border:2px solid var(--gold2);border-radius:20px;box-shadow:0 0 0 5px #0a1228,0 0 0 7px #6b5320,0 24px 60px #000d;padding:16px;z-index:60;transition:.22s cubic-bezier(.3,1.3,.5,1)}
.panel.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.stitle{font-weight:900;letter-spacing:1px;color:var(--gold);text-align:center;font-size:17px;margin-bottom:10px}
.srow{display:flex;justify-content:space-between;align-items:center;padding:11px 6px;border-bottom:1px solid #ffffff12;font-size:14px;cursor:pointer}
.srow b{color:var(--gold2)}
.tgl{width:44px;height:24px;border-radius:14px;background:#1a2344;border:1px solid var(--line);position:relative;transition:.2s}
.tgl:after{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:linear-gradient(#d9d2bf,#8a8474);transition:.2s}
.tgl.on{background:linear-gradient(#f6b52a,#c07a08)}
.tgl.on:after{left:22px;background:linear-gradient(#fff,#ffe27a)}
.sclose{display:block;text-align:center;margin-top:12px}
.rlist{font-size:12.5px;line-height:1.75;color:var(--ink)}
.rlist b{color:var(--gold)}
.rlist .mut{color:var(--mute);font-size:11px}

.gbtn:active,.chip:active,.pick:active,.slotBtn:active,.em:active,#emote:active,.rthumb:active,.bthumb:active{transform:scale(.95);transition:transform .08s}

/* ---------- P2 home ---------- */
.hsky{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 0%,#132a66 0%,var(--navy2) 35%,#02040c 100%)}
.screen.center{display:none;align-items:center;justify-content:center}.screen.center.on{display:flex}
#home{padding:max(14px,env(safe-area-inset-top)) 14px calc(86px + env(safe-area-inset-bottom))}
#home>*{position:relative}
#hTop{display:flex;align-items:center;gap:8px;margin-bottom:12px}
#hAv{position:relative;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#1a2c62,#050a20);border:2px solid var(--gold2);box-shadow:0 0 0 2px #6b5320;display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--gold);font-size:20px}
#hAv img{position:absolute;right:-9px;bottom:-9px;width:26px}
#hInfo{flex:1;min-width:0}
#hName{font-weight:800;color:var(--ink);font-size:15px}
#hLvlRow{display:flex;align-items:center;gap:6px;margin-top:2px}
#hLvl{font-size:10px;font-weight:800;color:#2a1c04;background:linear-gradient(#ffe27a,#c07a08);padding:1px 7px;border-radius:9px;border:1px solid #6b5320}
#hXpB{flex:1;height:7px;border-radius:5px;background:#0a1228;border:1px solid var(--line);overflow:hidden}
#hXp{display:block;height:100%;background:linear-gradient(90deg,#f6b52a,#ffe27a)}
.mut{color:var(--mute);font-size:11px}.mut.sm{font-size:9.5px}
#hXpT{font-size:9px;margin-top:1px}
.cur{display:flex;align-items:center;gap:4px;background:#0a1228;border:1px solid var(--line);border-radius:14px;padding:4px 9px 4px 5px}
.cur img{width:20px}.cur b{color:var(--gold);font-size:12px}
.hbtn{width:36px;height:36px;border-radius:50%;background:linear-gradient(#ffe27a,#c07a08);color:#2a1c04;display:flex;align-items:center;justify-content:center;font-size:17px;border:1px solid #6b5320}
.tile{position:relative;display:flex;gap:10px;align-items:center;background:linear-gradient(#101a36,#0a1228);border:1.5px solid #3a3category010;border:1.5px solid #3a3010;border-radius:16px;padding:12px;margin-bottom:10px;box-shadow:0 6px 16px #0008,inset 0 1px 0 #ffffff14}
.tile .tr{width:46px;flex:0 0 auto;filter:drop-shadow(0 3px 5px #000a)}
.tile .tr.big2{width:56px}
.tt{font-weight:900;color:var(--gold);letter-spacing:.5px;font-size:14px}.tt.sm{font-size:11px;margin-bottom:4px}
.mbar{height:8px;border-radius:5px;background:#060b1e;border:1px solid var(--line);overflow:hidden;margin-top:6px}
.mbar i{display:block;height:100%;background:linear-gradient(90deg,#f6b52a,#ffe27a)}
.mbar.big{height:10px}
.hrow{display:flex;gap:10px}.tile.half{flex:1;margin-bottom:10px}.halfcol{flex:1;display:flex;flex-direction:column}
.tile.ev{border-color:#7a4bd633;background:linear-gradient(#1a1036,#0d0a22)}
.mrow{display:flex;align-items:center;gap:6px;margin-bottom:7px}
.mtxt{flex:1;font-size:10.5px;color:var(--ink)}
.mrw{display:flex;align-items:center;gap:3px;font-size:10px;color:var(--gold)}.mrw img{width:15px}
.claim{background:linear-gradient(#37D97E,#1d8f4e);color:#04240f;font-weight:900;padding:2px 7px;border-radius:9px;font-size:9px}
.dots{display:flex;gap:5px;margin-top:4px}.dots i{width:14px;height:14px;border-radius:50%;background:#0a1228;border:1px solid var(--line)}.dots i.on{background:linear-gradient(#ffe27a,#c07a08);border-color:#6b5320}
#hPlay{display:flex;flex-direction:column;gap:10px;margin:4px 0 10px}
.gbtn.big{text-align:center;font-size:19px;padding:15px;letter-spacing:1px}
#hNav{position:fixed;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));display:flex;background:linear-gradient(#101a36,#0a1228);border:1.5px solid #3a3010;border-radius:20px;padding:7px 4px;box-shadow:0 -6px 20px #000a;z-index:5}
.nv{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:9px;color:var(--mute);cursor:pointer}
.nv img{width:26px;filter:grayscale(.6) brightness(.8)}
.nv.on{color:var(--gold)}.nv.on img{filter:none;transform:scale(1.18) translateY(-2px)}
#htoast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#0a1228f0;border:1px solid var(--gold2);color:var(--gold);padding:8px 14px;border-radius:12px;font-size:12px;opacity:0;transition:.2s;pointer-events:none;white-space:nowrap;z-index:9}
#htoast.on{opacity:1}
/* match / vs / count */
.mbox{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.ringspin{width:110px;height:110px;background:url(assets/ring_gold.webp) center/contain no-repeat;animation:spin 1.4s linear infinite;filter:drop-shadow(0 0 14px #f6b52a88)}
@keyframes spin{to{transform:rotate(360deg)}}
#vsRow{position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;padding:0 12px}
#vsRow em{font-style:normal;font-weight:900;font-size:34px;background:linear-gradient(#ffe27a,#c07a08);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.vsP{display:flex;flex-direction:column;align-items:center;gap:6px;animation:slam .45s cubic-bezier(.2,1.4,.4,1)}
.vsP b{width:76px;height:76px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#1a2c62,#050a20);border:3px solid var(--c);box-shadow:0 0 18px var(--c),0 0 0 3px #6b5320;display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--gold)}
.vsP span{font-size:12px;color:var(--ink);font-weight:700}
@keyframes slam{0%{transform:scale(1.8);opacity:0}}
#count{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.4);font-size:110px;font-weight:900;background:linear-gradient(#ffe27a,#f6b52a 55%,#c07a08);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;z-index:36;pointer-events:none;text-shadow:none;-webkit-text-stroke:3px #6b5320}
#count.on{animation:cpop .7s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes cpop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
#resRew{display:flex;gap:14px;justify-content:center;margin:4px 0 14px}
.rw{display:flex;align-items:center;gap:5px;background:#060b1e;border:1px solid var(--line);border-radius:12px;padding:5px 11px;color:var(--gold);font-weight:800;font-size:14px}
.rw img{width:22px}

#hMisT{flex-direction:column;align-items:stretch;gap:2px}
#hStreakT{flex-direction:column;align-items:flex-start;gap:2px}
.dots i{width:12px;height:12px}
#hChest{align-items:center}

/* ---------- P3 store ---------- */
.store{padding:max(12px,env(safe-area-inset-top)) 12px 20px;overflow-y:auto}
.shead{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.curs{display:flex;gap:6px}
.stabs{position:relative;display:flex;gap:6px;margin-bottom:10px}
.stab{flex:1;text-align:center;padding:8px 0;border-radius:12px;background:#0a1228;border:1px solid var(--line);color:var(--mute);font-size:12px;font-weight:800;cursor:pointer}
.stab.on{background:linear-gradient(#f6b52a,#c07a08);color:#2a1c04;border-color:#6b5320}
.sgrid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.scard{min-width:0;background:linear-gradient(#101a36,#0a1228);border:1.5px solid #3a3010;border-radius:14px;padding:6px;display:flex;flex-direction:column;gap:4px;content-visibility:auto;contain-intrinsic-size:150px;cursor:pointer}
.scard.lk{filter:saturate(.55) brightness(.8)}
.sthumb{border-radius:10px;overflow:hidden;aspect-ratio:1;background:#060b1e;display:flex;align-items:center;justify-content:center}
.sthumb img{width:100%;height:100%;object-fit:cover}
.sthumb.dice img,.sthumb.tokens img{object-fit:contain;padding:8%}
.snm{font-size:9.5px;color:var(--ink);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srar{font-size:8px;font-weight:900;color:var(--tc);letter-spacing:.5px}
.buyb{display:flex;align-items:center;justify-content:center;gap:4px;background:linear-gradient(#ffe27a,#c07a08);border:1px solid #6b5320;border-radius:9px;padding:4px 0;color:#2a1c04;font-weight:900;font-size:10px}
.buyb img{width:14px}
.own{display:block;text-align:center;background:#0a1228;border:1px solid var(--line);border-radius:9px;padding:4px 0;color:#37D97E;font-weight:900;font-size:9.5px}
.own.eqp{color:var(--gold);border-color:#6b5320}
.lockb{display:block;text-align:center;background:#0a1228;border:1px solid var(--line);border-radius:9px;padding:4px 0;color:var(--mute);font-weight:800;font-size:9.5px}
.pcardX{position:relative;display:flex;align-items:center;gap:12px;background:linear-gradient(#101a36,#0a1228);border:1.5px solid #3a3010;border-radius:16px;padding:14px;margin-bottom:10px}
#pAv{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#1a2c62,#050a20);border:2.5px solid var(--gold2);box-shadow:0 0 0 2px #6b5320;display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--gold);font-size:26px}
#pName{font-weight:900;color:var(--ink);font-size:17px}
#pRankImg{width:54px;margin-left:auto}
.prow{display:flex;justify-content:space-between;padding:8px 4px;border-bottom:1px solid #ffffff10;font-size:13px}
.prow b{color:var(--gold)}
.rankroad{position:relative;display:flex;gap:6px;flex-wrap:wrap}
.rankroad img{width:44px}
.rankroad img.dim{filter:grayscale(1) brightness(.5)}
#htoast2{position:fixed;left:50%;bottom:24px;transform:translateX(-50%)}

.done{color:#37D97E;font-weight:900;font-size:9px}
.gbtn.sm{padding:8px 14px;font-size:12px;border-radius:12px}
.tile.ev2{border-color:#f6b52a55}
.ic{width:14px;vertical-align:-2px}
.lbrow{display:flex;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid #ffffff10;font-size:12.5px}
.lbrow b{width:16px;color:var(--mute)}
.lbrow img{width:26px}
.lbrow span{flex:1;color:var(--ink);font-weight:700}
.lbrow em{font-style:normal;color:var(--gold);font-weight:800;display:flex;align-items:center;gap:3px}
.lbrow.me{background:#f6b52a14;border-radius:8px}
#chestModal.big{text-align:center}
#cmBox{width:130px;margin:6px auto;display:block;filter:drop-shadow(0 8px 16px #000b);transition:.2s;cursor:pointer}
#cmBox.shake{animation:cshake .7s ease}
#cmBox.opened{transform:scale(1.12) translateY(-6px);filter:drop-shadow(0 0 24px #ffe27a) drop-shadow(0 8px 16px #000b)}
@keyframes cshake{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg) scale(1.04)}40%{transform:rotate(6deg)}60%{transform:rotate(-5deg) scale(1.06)}80%{transform:rotate(4deg)}}
#cmRew{display:flex;gap:12px;justify-content:center;margin:8px 0;min-height:34px}

/* ---------- P5a visual harmony ---------- */
#ambient{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 70% at 50% 0%,#132a66 0%,var(--navy2) 38%,#02040c 100%)}
#fogc{position:absolute;inset:0;width:100%;height:100%}
.screen{z-index:1}
.hsky{background:transparent}
.screen.enter{animation:scrIn .26s cubic-bezier(.2,.9,.3,1)}
@keyframes scrIn{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
/* 5-state components */
@media(hover:hover){ .gbtn:hover,.stab:hover,.buyb:hover,.nv:hover img,.pick:hover,.chip:hover{filter:brightness(1.12) drop-shadow(0 0 8px #f6b52a66)} }
.gbtn:active,.stab:active,.buyb:active{transform:scale(.95)}
.disabled,[disabled]{filter:grayscale(.8) brightness(.6)!important;opacity:.55;pointer-events:none}
.glow-active{box-shadow:0 0 0 2px #6b5320,0 0 18px #f6b52a88!important}
.loading{position:relative;color:transparent!important;pointer-events:none}
.loading::after{content:'';position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px;border:2.5px solid #ffe27a44;border-top-color:#ffe27a;border-radius:50%;animation:spin .7s linear infinite}
h1,.tt,.stitle{background:linear-gradient(#ffe9a0,#f6b52a 60%,#c07a08);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 2px 6px #00000066}

#splash{z-index:50;display:none;align-items:center;justify-content:center;background:radial-gradient(120% 80% at 50% 18%,#16307a 0%,var(--navy2) 45%,#02040c 100%)}
#splash.on{display:flex}
.spWrap{display:flex;flex-direction:column;align-items:center;gap:14px;transform:translateY(-4vh)}
#spLogo{width:132px;height:132px;border-radius:30px;box-shadow:0 0 0 3px #6b5320,0 0 34px #f6b52a99,0 18px 40px #000c;animation:spIn .9s cubic-bezier(.2,1.1,.3,1) both, spPulse 2.6s ease-in-out 1s infinite}
@keyframes spIn{0%{opacity:0;transform:scale(.5) translateY(24px)}100%{opacity:1;transform:none}}
@keyframes spPulse{0%,100%{box-shadow:0 0 0 3px #6b5320,0 0 30px #f6b52a80,0 18px 40px #000c}50%{box-shadow:0 0 0 3px #8a6a2a,0 0 52px #f6b52ac9,0 18px 40px #000c}}
.spTitle{font-size:27px;font-weight:900;letter-spacing:1.5px;animation:spIn .9s .18s both}
.spSub{font-size:11.5px;letter-spacing:6px;color:#c9b06a;font-weight:800;animation:spIn .9s .3s both}
.spBarWrap{width:210px;height:8px;border-radius:6px;background:#0a1230;box-shadow:inset 0 0 0 1.5px #6b5320;overflow:hidden;margin-top:16px}
.spBar{height:100%;width:0%;border-radius:6px;background:linear-gradient(90deg,#c07a08,#ffe27a,#f6b52a);transition:width .24s}
.spTap{margin-top:10px;font-size:14px;font-weight:900;letter-spacing:2.5px;color:#ffe27a;opacity:0;pointer-events:none}
.spTap.rdy{opacity:1;pointer-events:auto;animation:tapPulse 1.5s ease-in-out infinite}
@keyframes tapPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
#splash.leave{animation:spLeave .55s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes spLeave{to{opacity:0;transform:scale(1.12)}}

.stubWrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:2}
.stubCrest{font-size:52px;filter:drop-shadow(0 4px 14px #f6b52a88)}
.stubChip{font-size:11px;letter-spacing:2px;font-weight:800;color:#c9b06a;background:#0a1230;border:1.5px solid #6b5320;border-radius:20px;padding:7px 16px}
.stubBack{padding:12px 26px;font-size:14px}

/* ---------- A-BUILD PORT BRIDGE ---------- */
.scr{position:fixed;inset:0;display:none}
.scr.on{display:flex}
.scr.art{align-items:stretch;justify-content:center;background:#02040c}
.scr.art>img.bg,.scr.art img[class*=bg]{width:100%;height:100%;object-fit:contain}
.hs{position:absolute;background:transparent}
.hs:active{background:rgba(255,201,40,.16);}
.hs{outline:1.5px dashed var(--cyan);background:rgba(0,229,255,.07);}
.hs{position:absolute;background:transparent;border-radius:10px;}
.scr.art .hint{display:none!important}
.scr.art button.ovl.show:not(.gact):not(#gback){display:none!important}
.scr.art.land .panel{width:min(100vw,1000px);}
.scr.art.land:not(#s_game):not(#s_spec):not(#s_ent) .panel>img{border-radius:18px;box-shadow:0 20px 60px #000c}
.scr.art.land:not(#s_game):not(#s_spec):not(#s_ent) .panel{align-items:center}
.scr.art:not(#s_game):not(#s_spec):not(#s_ent) .panel>img{width:100%!important;height:auto!important;max-height:100%;object-fit:contain;border-radius:0 0 22px 22px}
.scr.art:not(#s_game):not(#s_spec):not(#s_ent) .panel{position:absolute!important;left:0;right:0;top:56px;bottom:0;display:flex;align-items:flex-start;justify-content:center;overflow:hidden}
.scr.art{background:radial-gradient(120% 60% at 50% -10%,#1d2a55 0%,#0d1326 45%,#070a14 100%)!important}
.scr.art{overflow-y:auto;background:radial-gradient(120% 80% at 50% 0%,#171040,var(--bgDeepest) 65%);}
.scr.on{display:block;}
.scr{position:absolute;inset:0;display:none;}
/* panel bridge for ported A screens */
.scr.art .panel{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.scr.art .panel>img,.scr.art>img{width:100%;height:auto;max-height:100%;object-fit:contain;display:block}
.scr.art{z-index:5}

/* ---------- ROYAL POPUP ---------- */
#popOv{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(2,4,12,.72);backdrop-filter:blur(3px)}
#popOv.on{display:flex}
#popCard{width:min(84vw,340px);background:linear-gradient(#101d4a,#0a1330);border-radius:22px;padding:22px 18px 18px;text-align:center;box-shadow:0 0 0 2px #6b5320,0 0 0 5px #0b1a3e,0 0 34px #f6b52a55,0 24px 60px #000d;transform:scale(.7);opacity:0;transition:transform .26s cubic-bezier(.2,1.4,.3,1),opacity .2s}
#popOv.in #popCard{transform:scale(1);opacity:1}
#popIcon{font-size:44px;filter:drop-shadow(0 4px 10px #f6b52a66)}
#popTitle{font-size:18px;font-weight:900;letter-spacing:1px;margin:6px 0 2px;background:linear-gradient(#ffe9a0,#f6b52a 60%,#c07a08);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
#popBody{font-size:12.5px;color:#cfc9ad;margin-bottom:10px}
#popRw{display:flex;gap:10px;justify-content:center;margin:6px 0 14px}
.popR{background:#0a1230;border-radius:12px;padding:8px 14px;box-shadow:inset 0 0 0 1.5px #6b5320;font-size:15px}
.popR b{color:#ffe27a;margin-left:6px}
#popBtn{width:100%;font-size:15px}


/* ═══ AX · FULL_EXACT skin screens (W1 match-flow) ═══ */
.screen.ax{display:none;position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;background:#02040C}
.screen.ax.on{display:block}
.screen.ax .axwrap{position:relative;width:100%;margin:0 auto}
.screen.ax .axart{width:100%;display:block;user-select:none;-webkit-user-drag:none;
  filter:contrast(1.06) saturate(1.12) brightness(1.01)}           /* FULL_EXACT contract */
.screen.axland{overflow:hidden;display:flex;align-items:center;justify-content:center}
.screen.axland .axwrap{position:relative;width:min(145vw,1268px);flex:none}
.screen.axland .axart{width:100%;height:auto}
.axhs{position:absolute;background:transparent;border:none;border-radius:10px;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.axhs:active{background:rgba(255,226,122,.10)}
.axov{position:absolute;inset:0;pointer-events:none}

/* mm — live search overlay (sits under the art's SEARCHING headline) */
.axsearch{position:absolute;left:0;right:0;top:27.5%;text-align:center;
  font:600 12px/1 Poppins,system-ui;color:#FFE27A;text-shadow:0 1px 6px #000}
.axsearch .axdots{display:block;font-size:14px;letter-spacing:6px;min-height:16px}
.axsearch .axeta{display:block;margin-top:4px;color:#C5CDDC;font-weight:500}

/* found — card slam */
@keyframes axslam{0%{transform:scale(1.18);opacity:0}55%{transform:scale(.97);opacity:1}
  75%{transform:scale(1.02)}100%{transform:scale(1)}}
.screen.ax .axwrap.axslam{animation:axslam .5s cubic-bezier(.2,.9,.3,1.2)}
.screen.axland .axwrap.axslam{animation:none}

/* ent — native 3-2-1 patched over baked plate (art digit @ ~49.7% / 78.5%) */
.axcount{position:absolute;left:46.4%;top:73.6%;width:7%;height:11.5%;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:radial-gradient(ellipse at center,#0B1A3E 62%,rgba(11,26,62,0) 75%);
  color:#FFE27A;font:700 clamp(28px,4.2vh,44px)/1 'Bebas Neue',Poppins,sans-serif;
  text-shadow:0 0 14px rgba(255,201,40,.55),0 2px 4px #000}
.axcount.on{animation:axcpop .5s ease}
@keyframes axcpop{0%{transform:scale(1.6);opacity:.2}100%{transform:scale(1);opacity:1}}

/* victory/defeat — live reward strip over art's reward zone */
.axrew{position:absolute;border-radius:14px;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(11,26,62,.92),rgba(2,4,12,.92));
  border:1px solid rgba(255,201,40,.55);color:#FFE27A;
  font:700 clamp(14px,2vh,20px)/1.1 Poppins,sans-serif;text-shadow:0 1px 4px #000}
.axrew i{font-style:normal;color:#C5CDDC;font-weight:500}

/* summary — live stats block over art rows */
.axsum{position:absolute;left:50%;top:30%;transform:translateX(-50%);text-align:center;
  padding:14px 26px;border-radius:16px;
  background:linear-gradient(180deg,rgba(11,26,62,.9),rgba(2,4,12,.9));
  border:1px solid rgba(255,201,40,.5);color:#fff;font-family:Poppins,sans-serif}
.axsum b{display:block;font:700 26px/1 'Bebas Neue',Poppins;letter-spacing:2px;color:#FFE27A}
.axsum span{display:block;margin-top:6px;font:600 13px/1.2 Poppins;color:#C5CDDC}
.axsum em{display:block;margin-top:4px;font:500 11px/1.2 Poppins;font-style:normal;color:#8390A8}

/* ═══ AX·W2 — store-hub wave ═══ */
@keyframes axshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px) rotate(-1deg)}40%{transform:translateX(8px) rotate(1deg)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.screen.ax .axwrap.axshake{animation:axshake .55s ease}
.axctimer{position:absolute;left:50%;top:86.5%;transform:translateX(-50%);
  padding:6px 16px;border-radius:12px;white-space:nowrap;
  background:linear-gradient(180deg,rgba(11,26,62,.92),rgba(2,4,12,.92));
  border:1px solid rgba(255,201,40,.55);color:#FFE27A;
  font:700 clamp(12px,1.8vh,17px)/1 Poppins,sans-serif;text-shadow:0 1px 4px #000;pointer-events:none}
.axctimer.ready{color:#00E88A;border-color:rgba(0,232,138,.6);animation:axcpop .6s ease infinite alternate}
.axcpatch{position:absolute;text-align:center;pointer-events:none;
  font:700 clamp(16px,2.6vh,26px)/1 'Bebas Neue',Poppins;letter-spacing:1px;
  text-shadow:0 0 12px rgba(0,0,0,.9),0 2px 4px #000;
  background:rgba(2,4,12,.55);border-radius:10px;padding:3px 0}
.axcpatch.gold{color:#FFE27A}.axcpatch.cyan{color:#00E5FF}.axcpatch.purp{color:#A855F7;font-size:clamp(11px,1.7vh,15px)}
.axdcell{position:absolute;pointer-events:none;border-radius:14px;display:flex;align-items:flex-start;justify-content:flex-end;
  font:700 20px/1 Poppins;color:#00E88A;padding:6px;text-shadow:0 1px 4px #000}
.axdcell.done{background:rgba(0,232,138,.10);border:1.5px solid rgba(0,232,138,.55)}
.axdcell.today{border:2px solid rgba(255,201,40,.85);box-shadow:0 0 18px rgba(255,201,40,.35) inset;animation:axcpop 1s ease infinite alternate}
.axdstreak{position:absolute;left:50%;top:14.8%;transform:translateX(-50%);pointer-events:none;
  color:#FFE27A;font:700 clamp(11px,1.6vh,14px)/1 Poppins;text-shadow:0 1px 4px #000}

/* ═══ AX·W2b — purchase-confirm patches ═══ */
.axpc{position:absolute;pointer-events:none;background:#0C1024;border-radius:10px;
  display:flex;align-items:center;justify-content:center;gap:6px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,201,40,.18) inset}
.axpc.img img{width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.axpc.txt{font:700 clamp(13px,2vh,20px)/1 Poppins,sans-serif;color:#fff;text-shadow:0 1px 3px #000;white-space:nowrap}
.axpc.txt img{width:1.1em;height:1.1em}
.axpc.name{color:#FFE27A;letter-spacing:.5px;font-family:'Bebas Neue',Poppins;font-size:clamp(16px,2.6vh,26px)}
.axpc.price{color:#00E5FF}
.axpc.bal{color:#C5CDDC;font-weight:600}
.axpc.bal.after{color:#00E88A}
.axcpatch{display:flex;align-items:center;justify-content:center;background:rgba(6,9,24,.94)}
.axpc.col{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2.5%;padding:0 5%;text-align:left}
.axpc.col b{color:#FFE27A;font:700 clamp(15px,2.4vh,24px)/1.1 'Bebas Neue',Poppins;letter-spacing:.5px}
.axpc.col i{font:700 clamp(12px,1.8vh,17px)/1 Poppins;color:#C5CDDC;font-style:normal;display:flex;align-items:center;gap:5px}
.axpc.col i.pr{color:#00E5FF}
.axpc.col i.af{color:#00E88A}
.axpc.col s{font:600 clamp(9px,1.3vh,12px)/1 Poppins;color:#8390A8;text-decoration:none;letter-spacing:1px;margin-top:2%}
.axpc.col img{width:1.15em;height:1.15em}
.axpc,.axpc *{box-sizing:border-box}
.axsum.band{left:auto;right:auto;transform:none;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.axsum.band b{font-size:clamp(15px,2.2vh,22px)}
.axsum.band span{margin-top:0;font-size:clamp(11px,1.6vh,14px)}
.axsum.band.tot span{color:#FFE27A;font-weight:700;font-size:clamp(12px,1.8vh,16px)}
.axdcell.lock{background:rgba(2,4,12,.72);border:1.5px solid rgba(131,144,168,.35);display:flex;align-items:center;justify-content:center}
.axdcell.lock u{text-decoration:none;color:#8390A8;font:700 11px/1 Poppins;letter-spacing:1px}

/* ═══ AX·W2c — art shops ═══ */
.axsh{position:absolute;box-sizing:border-box}
.axsh.cell,.axsh.cellv{background:linear-gradient(180deg,#0D1330,#070B1E);border-radius:14px;
  box-shadow:0 0 0 1.5px rgba(255,201,40,.28) inset;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;padding:4% 3%;overflow:hidden;pointer-events:none}
.axsh.cell.eq{box-shadow:0 0 0 2px #00E88A inset,0 0 14px rgba(0,232,138,.3)}
.axsh.cell img{width:74%;height:62%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.axsh.cell b{font:700 clamp(9px,1.4vh,12px)/1.1 Poppins;color:#fff;text-align:center;margin-top:3%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:96%}
.axsh.cell u{text-decoration:none;font:600 clamp(7px,1.1vh,10px)/1 Poppins;letter-spacing:.5px;margin-top:2%}
.axsh.cell .lk{position:absolute;top:6%;right:6%;background:rgba(2,4,12,.85);border:1px solid #8390A8;
  border-radius:8px;padding:2px 6px;font:700 9px/1 Poppins;color:#C5CDDC}
.r-common{color:#C5CDDC}.r-rare{color:#4FC3F7}.r-epic{color:#A855F7}.r-legendary{color:#FFC928}.r-mythic{color:#FF6B9D}
.axsh.pricev{background:linear-gradient(180deg,#2B2413,#141007);border-radius:10px;
  box-shadow:0 0 0 1.5px rgba(255,201,40,.5) inset;display:flex;align-items:center;justify-content:center;
  font:700 clamp(10px,1.5vh,13px)/1 Poppins;color:#FFE27A;pointer-events:none}
.axsh.pricev:empty{opacity:.25}
.axsh.pager{left:30%;width:40%;top:82.5%;height:3.6%;display:flex;align-items:center;justify-content:center;gap:14px;
  background:rgba(6,9,24,.9);border:1px solid rgba(255,201,40,.4);border-radius:12px}
.axsh.pager em{font:700 18px/1 Poppins;color:#FFE27A;font-style:normal;cursor:pointer;padding:0 10px}
.axsh.pager span{font:700 11px/1 Poppins;color:#C5CDDC}
.axsh.cover{left:2.5%;width:95%;top:75.8%;height:17.4%;border-radius:14px;
  background:linear-gradient(180deg,rgba(4,7,18,.97),rgba(2,4,12,1));
  box-shadow:0 0 0 1px rgba(255,201,40,.15) inset}
.axsh.pricev img{width:1.15em;height:1.15em;vertical-align:-2px}

/* ═══ AX·W2d — house shop ═══ */
.axsh.cell.room img{width:92%;height:70%;object-fit:cover;border-radius:8px}
.axsh.cell.room b{font-size:clamp(7px,1.1vh,10px)}
.axsh.cell.room.sel{box-shadow:0 0 0 2px #00E5FF inset,0 0 12px rgba(0,229,255,.35)}
.axsh.cell.room .ownd{color:#00E88A;font-size:clamp(6px,1vh,9px);margin-top:1%}
.axsh.hprev{border-radius:16px;overflow:hidden;box-shadow:0 0 0 2px rgba(255,201,40,.4) inset;pointer-events:none}
.axsh.hprev img{width:100%;height:100%;object-fit:cover}
.axsh.hprev span{position:absolute;left:4%;bottom:5%;background:rgba(2,4,12,.8);border:1px solid rgba(255,201,40,.5);
  border-radius:10px;padding:4px 12px;font:700 clamp(11px,1.7vh,15px)/1 Poppins;color:#FFE27A}
.axsh.pricev.alt{background:linear-gradient(180deg,#0D1B3A,#081127);box-shadow:0 0 0 1.5px rgba(0,229,255,.5) inset;color:#00E5FF}
.axsh.cover.hcov{top:81.0%;height:10.8%}
.axsh.pager.hpg{top:84%;}

/* ═══ AX·W2e ═══ */
.axhr{position:absolute;border-radius:18px;overflow:hidden;box-shadow:0 0 0 2px rgba(255,201,40,.45) inset;pointer-events:none}
.axhr img{width:100%;height:100%;object-fit:cover}
.axhr span{position:absolute;left:4%;bottom:4%;background:rgba(2,4,12,.8);border:1px solid rgba(255,201,40,.5);border-radius:10px;padding:4px 12px;font:700 clamp(11px,1.7vh,15px)/1 Poppins;color:#FFE27A}
.axht{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:none;background:rgba(6,9,24,.9);border-radius:12px;box-shadow:0 0 0 1px rgba(255,201,40,.35) inset;color:#FFE27A;font:700 clamp(12px,1.9vh,17px)/1 'Bebas Neue',Poppins;letter-spacing:1px}
.axsh.cell.cb b{font-size:clamp(7px,1.05vh,10px)}
.axsh.cell.dim{opacity:.55;filter:saturate(.4)}
.axsh.cell .lk{position:absolute;top:5%;right:6%;font-size:12px}
.axcb{position:absolute;background:linear-gradient(180deg,#0D1330,#070B1E);border-radius:14px;box-shadow:0 0 0 1.5px rgba(255,201,40,.3) inset;pointer-events:none;box-sizing:border-box}
.axcb.feat{display:flex;align-items:center;gap:4%;padding:2% 4%}
.axcb.feat img{height:82%;object-fit:contain}
.axcb.feat b{display:block;font:700 clamp(12px,1.9vh,17px)/1.1 Poppins;color:#fff}
.axcb.feat u{display:block;text-decoration:none;font:600 clamp(9px,1.3vh,12px)/1 Poppins;margin-top:3px}
.axcb.feat s{display:block;text-decoration:none;font:700 clamp(9px,1.3vh,12px)/1 Poppins;color:#00E88A;margin-top:3px}
.axcb.prog{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:2%}
.axcb.prog b{font:700 clamp(13px,2vh,19px)/1 'Bebas Neue',Poppins;color:#FFE27A}
.axcb.prog s{text-decoration:none;font:600 clamp(7px,1.1vh,9px)/1 Poppins;color:#8390A8;letter-spacing:1px}
.axcb.prog i{display:block;height:5px;background:linear-gradient(90deg,#FFC928,#FFE27A);border-radius:3px;align-self:flex-start;margin:2px 8% 0}
.axdi{position:absolute;background:linear-gradient(180deg,#0D1330,#070B1E);border-radius:14px;box-shadow:0 0 0 1.5px rgba(255,201,40,.3) inset;box-sizing:border-box;pointer-events:none}
.axdi.stage{display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 50% 65%,#16204a 0%,#070B1E 70%)}
.axdi.stage img.face{width:62%;transform:rotateX(8deg) rotateZ(-4deg);filter:drop-shadow(0 14px 22px rgba(0,0,0,.7));transition:transform .18s}
.axdi.stage.zoom img.face{width:86%}
.axdi.stage em{position:absolute;bottom:4%;font:700 clamp(9px,1.4vh,12px)/1 Poppins;color:#C5CDDC;font-style:normal;background:rgba(2,4,12,.7);border-radius:8px;padding:3px 10px}
.axdi.info{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:4% 6%;gap:4px}
.axdi.info b{font:700 clamp(11px,1.7vh,15px)/1.1 'Bebas Neue',Poppins;color:#FFE27A;letter-spacing:.5px}
.axdi.info u{text-decoration:none;font:600 clamp(8px,1.2vh,11px)/1 Poppins}
.axdi.info s{text-decoration:none;font:600 clamp(8px,1.2vh,11px)/1 Poppins;color:#8390A8}
.axdi.info.st{gap:6px}
.axdi.info.st i{font:600 clamp(7px,1.1vh,10px)/1.2 Poppins;color:#8390A8;font-style:normal;letter-spacing:.5px}
.axdi.info.st i b{color:#fff;font-size:inherit;letter-spacing:0;display:inline;margin-left:4px}
.axdi.tz{display:flex;align-items:center;justify-content:center;font:700 clamp(10px,1.5vh,13px)/1 Poppins;color:#00E5FF}
.axsh.cell.di img{width:80%;height:80%;object-fit:contain;margin-top:8%}
.axdi.rr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.axdi.rr s{text-decoration:none;font:600 clamp(7px,1vh,9px)/1 Poppins;color:#8390A8;letter-spacing:1px}
.axdi.rr b{font:700 clamp(18px,3vh,30px)/1 'Bebas Neue',Poppins;color:#FFE27A}

/* ═══ AX·W4 ═══ */
.axms{position:absolute;background:linear-gradient(180deg,#0D1330,#070B1E);border-radius:14px;
  box-shadow:0 0 0 1.5px rgba(255,201,40,.3) inset;box-sizing:border-box;pointer-events:none;
  display:flex;flex-direction:column;justify-content:center;padding:1.2% 2%;gap:4px}
.axms.row b{font:700 clamp(11px,1.9vh,16px)/1 Poppins;color:#fff}
.axms.row s{text-decoration:none;font:600 clamp(9px,1.4vh,12px)/1 Poppins;color:#C5CDDC}
.axms .bar{height:7px;background:#0A0F26;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,201,40,.25) inset}
.axms .bar.big{height:10px}
.axms .bar i{display:block;height:100%;background:linear-gradient(90deg,#FFC928,#FFE27A)}
.axms.chest{align-items:center;text-align:center}
.axms.chest b{font:700 clamp(12px,2vh,18px)/1 'Bebas Neue',Poppins;letter-spacing:1px;color:#FFE27A}
.axms.chest s{text-decoration:none;font:600 clamp(9px,1.4vh,12px)/1.2 Poppins;color:#C5CDDC}
.axms.chest em{font:700 clamp(10px,1.6vh,13px)/1 Poppins;color:#00E5FF;font-style:normal}
.axms.chest.ready{box-shadow:0 0 0 2px #00E88A inset,0 0 16px rgba(0,232,138,.35)}
.axsea.slot{position:absolute;background:rgba(7,11,30,.92);border-radius:12px;box-shadow:0 0 0 1.5px rgba(131,144,168,.35) inset;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;pointer-events:none;box-sizing:border-box}
.axsea.slot.gold{box-shadow:0 0 0 1.5px rgba(255,201,40,.45) inset}
.axsea.slot s{text-decoration:none;font:700 clamp(7px,1.2vh,10px)/1 Poppins;color:#8390A8;letter-spacing:.5px}
.axsea.slot.gold s{color:#FFE27A}
.axsea.slot b{font-size:clamp(12px,2vh,18px)}
.axscrim{position:absolute;background:rgba(3,5,14,.55);border-radius:18px;pointer-events:none;backdrop-filter:blur(1px)}

/* ═══ AX·GIFTS ═══ */
.axgt{position:absolute;right:2%;bottom:12%;width:150px;z-index:60;display:none;flex-direction:column;gap:6px;
  background:linear-gradient(180deg,rgba(11,26,62,.96),rgba(2,4,12,.97));border:1px solid rgba(255,201,40,.5);
  border-radius:14px;padding:10px}
.axgt.on{display:flex}
.axgt b{font:700 10px/1.2 Poppins;color:#FFE27A;letter-spacing:.5px}
.axgt b s{display:block;text-decoration:none;color:#8390A8;font-weight:500;font-size:8px}
.axgt .gitem{display:flex;align-items:center;gap:7px;background:rgba(13,19,48,.9);border:1px solid rgba(255,201,40,.25);
  border-radius:10px;padding:6px 8px;cursor:pointer}
.axgt .gitem:active{background:rgba(255,201,40,.12)}
.axgt .gitem em{font-style:normal;font-size:16px}
.axgt .gitem span{flex:1;font:600 9.5px/1.1 Poppins;color:#fff}
.axgt .gitem u{text-decoration:none;font:700 9px/1 Poppins;color:#00E5FF}
@keyframes axgfly{0%{transform:translateY(0) scale(.7);opacity:0}12%{opacity:1}
  100%{transform:translateY(-58vh) scale(1.5) rotate(14deg);opacity:0}}
.axgfly{position:absolute;bottom:16%;font-size:30px;z-index:59;pointer-events:none;animation:axgfly 2.4s ease-out forwards}
.axgt .gvault{margin-top:4px;text-align:center;background:linear-gradient(180deg,#2B2413,#141007);
  border:1px solid rgba(255,201,40,.5);border-radius:10px;padding:7px;font:700 10px/1 Poppins;color:#FFE27A;cursor:pointer}
.axgv{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(86vw,340px);max-height:70vh;z-index:120;
  background:linear-gradient(180deg,rgba(11,26,62,.98),rgba(2,4,12,.99));border:1.5px solid rgba(255,201,40,.55);
  border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px}
.axgv b{font:700 13px/1.2 'Bebas Neue',Poppins;letter-spacing:1px;color:#FFE27A}
.axgv b s{display:block;text-decoration:none;font:500 9px/1 Poppins;color:#8390A8;letter-spacing:0;margin-top:3px}
.axgv .gvl{overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.axgv .gvrow{display:flex;align-items:center;gap:8px;background:rgba(13,19,48,.9);border:1px solid rgba(255,201,40,.22);border-radius:10px;padding:7px 9px}
.axgv .gvrow em{font-style:normal;font-size:17px}
.axgv .gvrow span{flex:1;font:600 10px/1.1 Poppins;color:#fff}
.axgv .gvrow u{text-decoration:none;font:700 9.5px/1.2 Poppins;color:#00E88A;white-space:nowrap}
.axgv .gvrow i.cv{font:700 9px/1 Poppins;font-style:normal;color:#02040C;background:linear-gradient(180deg,#FFE27A,#FFC928);border-radius:8px;padding:5px 8px;cursor:pointer}
.axgv .gvrow i.hold{font:600 8.5px/1 Poppins;font-style:normal;color:#8390A8}
.axgv .gvempty{font:500 10px/1.4 Poppins;color:#8390A8;text-align:center;padding:14px}
.axgv .gvx{text-align:center;font:700 10px/1 Poppins;color:#C5CDDC;border:1px solid rgba(197,205,220,.3);border-radius:10px;padding:7px;cursor:pointer}

/* ═══ AX·S1a ═══ */
.axgs{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;pointer-events:none;
  font-family:Poppins,sans-serif;text-shadow:0 1px 3px #000}
.axgs.title{font:700 clamp(15px,2.4vh,24px)/1 'Bebas Neue',Poppins;letter-spacing:2px;color:#FFE27A}
.axgs.bal{font:700 clamp(10px,1.6vh,14px)/1 Poppins;color:#C5CDDC}
.axgs.top{font:700 clamp(10px,1.6vh,14px)/1 Poppins;color:#fff;background:rgba(2,4,12,.55);border-radius:8px}
.axgs.top.best{color:#FFE27A}
.axgs.pillt{font:800 clamp(10px,1.6vh,14px)/1 Poppins;color:#3A2A00;cursor:pointer}
.axgs.pillt.lk{color:#8390A8;background:rgba(2,4,12,.5);border-radius:8px;font-size:clamp(8px,1.3vh,11px)}
.axgs.pillt.lk.gold{color:#FFE27A}
.axgs.pillt.best{background:linear-gradient(180deg,#FFE27A,#FFC928);border-radius:12px;color:#3A2A00}
.axgs.off{font:800 clamp(9px,1.4vh,12px)/1 Poppins;color:#fff}
.axgs.scrimtop{left:0;top:0;width:100%;height:4.6%;background:#02040C}

/* ═══ AX·W5a — Arena Select (native Royal-DNA) ═══ */
.arScr{background:radial-gradient(120% 80% at 50% 0%,#0B1A3E 0%,#02040C 70%)}
.arWrap{position:absolute;inset:0;display:flex;flex-direction:column;padding:12px 12px calc(12px + env(safe-area-inset-bottom))}
.arHead{display:flex;align-items:center;gap:10px;padding:6px 4px 12px}
.arHead b{flex:1;font:700 clamp(18px,3vh,26px)/1 'Bebas Neue',Poppins;letter-spacing:2px;color:#FFE27A;text-shadow:0 2px 8px rgba(255,201,40,.35)}
.arHead .arBack{font-size:18px;color:#C5CDDC;padding:6px 10px;border:1px solid rgba(197,205,220,.3);border-radius:10px;cursor:pointer}
.arHead i{font:700 clamp(10px,1.6vh,13px)/1 Poppins;color:#C5CDDC;font-style:normal}
.arList{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-bottom:8px}
.arCard{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;cursor:pointer;
  background:linear-gradient(180deg,rgba(13,19,48,.95),rgba(7,11,30,.95));
  box-shadow:0 0 0 1.5px rgba(255,201,40,.35) inset,0 6px 14px rgba(0,0,0,.4)}
.arCard em{font-style:normal;font-size:26px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.arCard .arMid{flex:1;min-width:0}
.arCard b{display:block;font:700 clamp(13px,2vh,17px)/1.1 Poppins;color:#fff}
.arCard s{display:block;text-decoration:none;font:600 clamp(9px,1.4vh,12px)/1.3 Poppins;color:#8390A8;margin-top:3px}
.arCard s i{font-style:normal;color:#FFE27A}
.arCard u{text-decoration:none;font:800 clamp(9px,1.4vh,12px)/1.2 Poppins;white-space:nowrap;text-align:center;
  padding:8px 10px;border-radius:10px}
.arCard u.go{color:#3A2A00;background:linear-gradient(180deg,#FFE27A,#FFC928)}
.arCard u.lk{color:#8390A8;background:rgba(2,4,12,.6);border:1px solid rgba(131,144,168,.35)}
.arCard.lk{opacity:.75}
.arCard.sel{box-shadow:0 0 0 2px #00E5FF inset,0 0 18px rgba(0,229,255,.3)}
.arFoot{font:500 clamp(8px,1.2vh,10px)/1.4 Poppins;color:#5A6478;text-align:center;padding-top:8px}

/* ═══ AX·W3 — Social shell ═══ */
.soTabs{display:flex;gap:8px;padding:2px 2px 12px}
.soTabs span{flex:1;text-align:center;padding:9px 4px;border-radius:12px;cursor:pointer;
  font:700 clamp(10px,1.5vh,13px)/1 Poppins;color:#8390A8;background:rgba(13,19,48,.7);
  box-shadow:0 0 0 1px rgba(131,144,168,.25) inset}
.soTabs span.on{color:#FFE27A;background:linear-gradient(180deg,rgba(255,201,40,.16),rgba(13,19,48,.9));
  box-shadow:0 0 0 1.5px rgba(255,201,40,.55) inset}
.soTabs span em{font-style:normal;color:#00E5FF}
.soBody{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-bottom:8px}
.soAdd{display:flex;gap:8px}
.soAdd input{flex:1;background:rgba(7,11,30,.9);border:1.5px solid rgba(255,201,40,.35);border-radius:12px;
  padding:11px 13px;color:#fff;font:600 13px/1 Poppins;outline:none}
.soAdd input::placeholder{color:#5A6478}
.soBtn{background:linear-gradient(180deg,#FFE27A,#FFC928);color:#3A2A00;border-radius:12px;
  font:800 clamp(10px,1.5vh,13px)/1 Poppins;padding:11px 16px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.soBtn.sm{padding:8px 11px;font-size:clamp(9px,1.3vh,11px)}
.soBtn.big{width:100%;padding:13px;margin-top:10px;box-sizing:border-box}
.soBtn.ghost{background:rgba(2,4,12,.6);color:#8390A8;box-shadow:0 0 0 1px rgba(131,144,168,.35) inset}
.soRow{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;
  background:linear-gradient(180deg,rgba(13,19,48,.95),rgba(7,11,30,.95));
  box-shadow:0 0 0 1.5px rgba(255,201,40,.28) inset}
.soRow .av{font-style:normal;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#1a2a5e,#0A0F26);box-shadow:0 0 0 1.5px rgba(255,201,40,.5);
  font:700 15px/1 Poppins;color:#FFE27A}
.soRow .mid{flex:1;min-width:0}
.soRow b{display:block;font:700 clamp(11px,1.7vh,14px)/1.1 Poppins;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.soRow s{display:block;text-decoration:none;font:600 clamp(9px,1.3vh,11px)/1.3 Poppins;color:#8390A8;margin-top:2px}
.soRow s i.on{font-style:normal;color:#00E88A}
.soRow i.rw{display:block;font:700 clamp(9px,1.4vh,12px)/1 Poppins;color:#FFE27A;font-style:normal;margin-top:3px}
.soRow.mail.rd{opacity:.6}
.soCard{padding:14px;border-radius:16px;background:linear-gradient(180deg,rgba(13,19,48,.95),rgba(7,11,30,.95));
  box-shadow:0 0 0 1.5px rgba(255,201,40,.35) inset}
.soCard>b{display:block;font:700 clamp(13px,2vh,17px)/1 Poppins;color:#FFE27A}
.soCard>s{display:block;text-decoration:none;font:600 clamp(9px,1.4vh,12px)/1.3 Poppins;color:#8390A8;margin-top:4px}
.soCode{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:12px;
  background:rgba(2,4,12,.7);box-shadow:0 0 0 1px rgba(0,229,255,.4) inset;
  font:600 11px/1 Poppins;color:#8390A8}
.soCode b{font:800 17px/1 'Bebas Neue',Poppins;letter-spacing:4px;color:#00E5FF;flex:1}
.soEmpty{text-align:center;padding:28px 10px;font:600 12px/1.5 Poppins;color:#5A6478}
.soNote{text-align:center;font:500 clamp(8px,1.2vh,10px)/1.4 Poppins;color:#5A6478;padding-top:4px}
.axms.row.brk b i{font-style:normal;color:#00E5FF;font-weight:700}
.axms.chest.htc s{font-size:clamp(8px,1.25vh,11px);line-height:1.35;padding:0 6%}
.axms.chest.htc em{font-style:normal}
.axms.chest.lgc{flex-direction:row;gap:12px;justify-content:flex-start;padding-left:6%}
.axms.chest.lgc b{font-size:clamp(15px,2.4vh,21px)}
.axms.chest.lgc em{font-style:normal}
@keyframes axin{0%{opacity:.3;transform:translateY(14px) scale(.985)}100%{opacity:1;transform:none}}
.screen.ax.axin{animation:axin .32s cubic-bezier(.2,.8,.3,1)}
.screen.axland.axin{animation:none}

/* ═══ AX·S1b ═══ */
.arArt{display:block!important;overflow-y:auto}
.arArt .arBg{position:absolute;left:0;top:0;width:100%;z-index:0}
.arArt .arWrap{position:relative;z-index:1;padding:0}
.arArt .arHead{position:absolute;left:3%;right:3%;top:2%;z-index:2}
.arArt .arHead b{text-align:center}
.arArt .arList.artAlign{position:absolute;left:0;top:0;width:100%;height:0;overflow:visible}
.arRow{position:absolute;left:5.5%;width:89%;height:8.2%;display:flex;align-items:center;gap:3%;
  padding:0 3%;box-sizing:border-box;cursor:pointer;border-radius:14px}
.arRow em{font-style:normal;font-size:clamp(18px,3vh,26px);width:11%;text-align:center}
.arRow .arMid{flex:1;min-width:0}
.arRow b{display:block;font:700 clamp(11px,1.7vh,15px)/1.1 Poppins;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arRow s{display:block;text-decoration:none;font:600 clamp(8px,1.3vh,11px)/1.2 Poppins;color:#8390A8}
.arRow s i{font-style:normal;color:#FFE27A}
.arRow u{text-decoration:none;width:22%;text-align:center;font:800 clamp(8px,1.3vh,11px)/1.2 Poppins;color:#3A2A00}
.arRow.lk u{color:#8390A8}
.arRow.lk{opacity:.8}
.arRow.sel{box-shadow:0 0 0 2px #00E5FF inset,0 0 16px rgba(0,229,255,.35);background:rgba(0,229,255,.06)}
.arArt .arFoot{position:absolute;left:0;right:0;bottom:1%}
.soArt .soBg{position:absolute;left:0;top:0;width:100%;z-index:0;opacity:.94}
.soArt .arWrap{position:relative;z-index:1}
.soArt .soRow,.soArt .soCard{background:linear-gradient(180deg,rgba(13,19,48,.82),rgba(7,11,30,.86))}
.axmsn{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  pointer-events:none;font-family:Poppins;text-shadow:0 1px 3px #000}
.axmsn.nm b{font:700 clamp(11px,1.7vh,15px)/1 'Bebas Neue',Poppins;letter-spacing:1px;color:#FFE27A}
.axmsn.nm.big b{font-size:clamp(10px,1.6vh,14px);letter-spacing:.5px}
.axmsn.sub{font:700 clamp(9px,1.4vh,12px)/1 Poppins;color:#C5CDDC}
.axmsn.sub.ready{color:#00E88A}
.axmsn.ico{font-size:clamp(16px,2.6vh,24px)}
.axmsn.pill{font:800 clamp(9px,1.4vh,12px)/1 Poppins;color:#3A2A00}
.axmsn.pill.rd{color:#3A2A00}
.axmsn.tm{font:700 clamp(9px,1.4vh,12px)/1 Poppins;color:#FFE27A}
.axmsn.prg{justify-content:flex-start;background:transparent}
.axmsn.prg i{display:block;height:100%;background:linear-gradient(90deg,#FFC928,#FFE27A);border-radius:4px}
.axms.row.bare{background:transparent;box-shadow:none}
.axsea.slot2{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;pointer-events:none}
.axsea.slot2 s{text-decoration:none;font:700 clamp(8px,1.25vh,11px)/1 Poppins;color:#8390A8}
.axsea.slot2.gold s{color:#FFE27A}
.axsea.slot2 b{font-size:clamp(13px,2.2vh,20px)}
.axlu{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:none;
  font-family:Poppins;text-shadow:0 1px 4px #000}
.axlu.num{font:700 clamp(22px,4vh,40px)/1 'Bebas Neue',Poppins;letter-spacing:2px;color:#FFE27A}
.axlu.old{font:700 clamp(12px,2vh,18px)/1 Poppins;color:#8390A8}
.axlu.new{font:700 clamp(13px,2.2vh,20px)/1 Poppins;color:#FFE27A}
.axlu.rw{font:700 clamp(10px,1.6vh,14px)/1 Poppins;color:#00E5FF}
.axbp{position:absolute;box-sizing:border-box;pointer-events:none}
.axbp.tick{display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#37E27A,#0F9B4A);box-shadow:0 0 0 2px #063,0 2px 6px rgba(0,0,0,.6);
  color:#fff;font:800 clamp(9px,1.5vh,13px)/1 Poppins}
.axbp.tick.off{background:#0B1024;box-shadow:0 0 0 1.5px rgba(131,144,168,.45) inset;color:transparent}
.axbp.barcov{background:#141028;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,201,40,.3) inset;
  display:flex;align-items:stretch;justify-content:flex-start}
.axbp.barcov i{display:block;background:linear-gradient(90deg,#FFC928,#FFE27A);border-radius:8px}
.arWrap.pk{align-items:center;justify-content:center;display:flex;flex-direction:column;gap:12px;text-align:center}
.pkCrest{font-size:54px;filter:drop-shadow(0 6px 16px rgba(255,201,40,.4))}
.pkT{font:700 clamp(20px,3.4vh,30px)/1 'Bebas Neue',Poppins;letter-spacing:3px;color:#FFE27A}
.pkS{text-decoration:none;font:600 clamp(10px,1.6vh,13px)/1.4 Poppins;color:#8390A8;margin-bottom:8px}
.pkBtn{width:min(78vw,320px);display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:14px;cursor:pointer;
  font:700 clamp(12px,1.9vh,15px)/1 Poppins;color:#fff;box-shadow:0 6px 14px rgba(0,0,0,.4)}
.pkBtn em{font-style:normal;font-weight:800;width:22px;text-align:center}
.pkBtn.fb{background:linear-gradient(180deg,#1E7BF0,#1560C4)}
.pkBtn.gg{background:linear-gradient(180deg,#fff,#E8EAED);color:#1a1a1a}
.pkBtn.ap{background:linear-gradient(180deg,#111,#000);box-shadow:0 0 0 1px rgba(255,255,255,.25) inset}
.pkBtn.gs{background:linear-gradient(180deg,rgba(13,19,48,.95),rgba(7,11,30,.95));box-shadow:0 0 0 1.5px rgba(255,201,40,.5) inset;color:#FFE27A}
.pkN{text-decoration:none;font:500 clamp(8px,1.25vh,10px)/1.5 Poppins;color:#5A6478;max-width:300px;margin-top:6px}
.pkBtn.em{background:linear-gradient(180deg,#2A3550,#1A2238);box-shadow:0 0 0 1px rgba(197,205,220,.3) inset}
.pkBtn.em i{font-style:normal;font-weight:500;font-size:.75em;color:#8390A8;margin-left:4px}

/* ═══ AX·S2 ═══ */
.axin{position:absolute;background:rgba(7,11,30,.92);border:1.5px solid rgba(255,201,40,.4);border-radius:12px;
  padding:0 14px;color:#fff;font:600 clamp(12px,1.8vh,15px)/1 Poppins;outline:none;box-sizing:border-box}
.axin::placeholder{color:#5A6478}
.axin.cd{text-align:center;font:800 clamp(16px,2.6vh,22px)/1 'Bebas Neue',Poppins;letter-spacing:6px;text-transform:uppercase}
.axotp.bx{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:10px;
  background:rgba(7,11,30,.9);box-shadow:0 0 0 1.5px rgba(0,229,255,.45) inset;
  font:800 clamp(16px,2.8vh,24px)/1 'Bebas Neue',Poppins;color:#00E5FF}
.axotp.bx.cur{box-shadow:0 0 0 2px #00E5FF inset,0 0 12px rgba(0,229,255,.4)}
.axnw{position:absolute;display:flex;align-items:center;cursor:pointer}
.axnw b{font:700 clamp(10px,1.6vh,13px)/1.2 Poppins;color:#fff;text-shadow:0 1px 3px #000}
.axac{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  box-sizing:border-box;text-align:center;pointer-events:none}
.axac em{font-style:normal;font-size:clamp(16px,2.8vh,26px)}
.axac b{font:700 clamp(7px,1.15vh,10px)/1.1 Poppins;color:#fff}
.axac s{text-decoration:none;font:700 clamp(8px,1.25vh,11px)/1 Poppins;color:#FFE27A}
.axac.lk2{opacity:.55;filter:saturate(.3)}
.axac.cl{cursor:pointer;background:rgba(2,4,12,.25);border-radius:14px}
.axrwc{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:rgba(6,9,24,.55);border-radius:16px;box-shadow:0 0 0 1.5px rgba(255,201,40,.35) inset;cursor:pointer;padding:3%;box-sizing:border-box}
.axrwc em{font-style:normal;font-size:clamp(18px,3vh,28px)}
.axrwc b{font:700 clamp(8px,1.25vh,11px)/1.2 Poppins;color:#fff;text-align:center}
.axrwc u{text-decoration:none;font:800 clamp(8px,1.3vh,11px)/1 Poppins;color:#00E5FF}
.axan{position:absolute;display:flex;flex-direction:column;gap:8px;padding:4%;box-sizing:border-box;overflow:hidden}
.axan b{font:700 clamp(12px,1.9vh,16px)/1.2 Poppins;color:#FFE27A}
.axan s{text-decoration:none;font:500 clamp(9px,1.45vh,12px)/1.5 Poppins;color:#C5CDDC}

/* ═══ AX·W3b — pause + clubs ═══ */
#axPauseB{position:absolute;top:calc(8px + env(safe-area-inset-top));right:10px;z-index:55;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:16px;cursor:pointer;
  background:rgba(6,9,24,.85);box-shadow:0 0 0 1.5px rgba(255,201,40,.45) inset;color:#FFE27A}
.axpz{position:absolute;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
  background:rgba(2,4,12,.78);backdrop-filter:blur(3px)}
.axpz.on{display:flex}
.pzCard{width:min(80vw,320px);display:flex;flex-direction:column;gap:10px;padding:20px 18px;border-radius:20px;
  background:linear-gradient(180deg,rgba(11,26,62,.98),rgba(2,4,12,.99));box-shadow:0 0 0 2px rgba(255,201,40,.55) inset,0 20px 50px rgba(0,0,0,.6)}
.pzCard b{text-align:center;font:700 clamp(17px,2.8vh,24px)/1 'Bebas Neue',Poppins;letter-spacing:2px;color:#FFE27A;margin-bottom:4px}
.pzCard s{text-decoration:none;text-align:center;font:500 clamp(8px,1.2vh,10px)/1.4 Poppins;color:#5A6478;margin-top:2px}
.pzBtn{text-align:center;padding:12px;border-radius:12px;cursor:pointer;font:700 clamp(12px,1.9vh,15px)/1 Poppins;color:#fff;
  background:rgba(13,19,48,.9);box-shadow:0 0 0 1.5px rgba(255,201,40,.3) inset}
.pzBtn:active{background:rgba(255,201,40,.14)}
.pzBtn.danger{color:#FF6B6B;box-shadow:0 0 0 1.5px rgba(255,107,107,.4) inset}
.axlbr{position:absolute;display:flex;align-items:center;gap:10px;padding:0 4%;box-sizing:border-box;border-radius:12px;
  background:rgba(6,9,24,.6);box-shadow:0 0 0 1px rgba(255,201,40,.3) inset;pointer-events:none}
.axlbr b{font:800 clamp(10px,1.6vh,14px)/1 Poppins;color:#FFE27A;width:12%}
.axlbr span{flex:1;font:600 clamp(10px,1.6vh,13px)/1 Poppins;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.axlbr u{text-decoration:none;font:700 clamp(9px,1.5vh,12px)/1 Poppins;color:#00E5FF}
.axlbr.me{box-shadow:0 0 0 1.5px #00E5FF inset;background:rgba(0,229,255,.08)}
.rtl{direction:rtl}
.rtl .arHead .arBack{transform:scaleX(-1)}
.pkBtn, .pzBtn { font-family: Poppins, 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', sans-serif; }
.rtl .pkBtn{flex-direction:row-reverse}
.axpz.menuMode{background:rgba(2,4,12,.55)}
.axpz.menuMode .pzCard{box-shadow:0 0 0 2px rgba(0,229,255,.45) inset,0 20px 50px rgba(0,0,0,.6)}
#axRetChip{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:130;
  display:flex;align-items:center;gap:6px;padding:11px 18px;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,#0B1A3E,#060B22);box-shadow:0 0 0 1.5px #00E5FF inset,0 8px 24px rgba(0,229,255,.25);
  color:#C5CDDC;font:600 12px/1 Poppins;animation:retpulse 1.6s ease-in-out infinite}
#axRetChip b{color:#00E5FF;font-weight:800}
@keyframes retpulse{0%,100%{box-shadow:0 0 0 1.5px #00E5FF inset,0 8px 24px rgba(0,229,255,.2)}50%{box-shadow:0 0 0 2px #00E5FF inset,0 8px 30px rgba(0,229,255,.45)}}
.cbChat{max-height:22vh;overflow-y:auto;display:flex;flex-direction:column;gap:5px;margin:10px 0;padding:8px;
  background:rgba(2,4,12,.5);border-radius:10px}
.cbMsg{font:500 11px/1.4 Poppins;color:#C5CDDC;text-align:left}
.cbMsg b{color:#FFE27A;font-weight:700}
.axnw.nwB{overflow:hidden;border-radius:14px;display:flex;align-items:flex-end;box-shadow:0 0 0 1.5px rgba(255,201,40,.4) inset,0 8px 22px rgba(0,0,0,.5)}
.axnw.nwB img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.axnw.nwB b{position:relative;z-index:1;width:100%;padding:6px 10px;font:700 clamp(9px,1.5vh,12px)/1.2 Poppins;color:#FFE27A;
  background:linear-gradient(0deg,rgba(2,4,12,.92),transparent);text-shadow:0 1px 3px #000}
.lvSeat{display:flex;align-items:center;gap:8px;margin:7px 0}
.lvSeat em{font-style:normal;font-size:15px;width:22px}
.lvSeat.act em{filter:drop-shadow(0 0 6px #00E5FF)}
.lvBar{flex:1;height:9px;border-radius:99px;background:rgba(2,4,12,.7);overflow:hidden;box-shadow:0 0 0 1px rgba(255,201,40,.25) inset}
.lvBar i{display:block;height:100%;background:linear-gradient(90deg,#C07A08,#FFE27A);transition:width .6s}
.lvSeat s{text-decoration:none;font:600 9px/1 Poppins;color:#8390A8;white-space:nowrap}
.lvSeat.act .lvBar i{background:linear-gradient(90deg,#00A9C0,#00E5FF)}
.mbCard{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px;border-radius:18px;margin-bottom:12px;
  background:linear-gradient(180deg,rgba(11,26,62,.95),rgba(2,4,12,.98));box-shadow:0 0 0 1.5px rgba(255,201,40,.4) inset}
.mbCard img{width:56%;border-radius:12px;filter:drop-shadow(0 8px 18px rgba(255,201,40,.25))}
.mbCard b{font:700 clamp(13px,2vh,17px)/1 'Bebas Neue',Poppins;letter-spacing:2px;color:#FFE27A}
.mbCard s{text-decoration:none;font:600 clamp(9px,1.4vh,11px)/1 Poppins;color:#8390A8}
#sgBar{margin-top:12px;padding:12px;border-radius:14px;background:rgba(2,4,12,.6);box-shadow:0 0 0 1.5px rgba(255,201,40,.35) inset;text-align:center}
#sgBar b{display:block;font:700 12px/1 'Bebas Neue',Poppins;letter-spacing:2px;color:#FFE27A}
#sgBar s{text-decoration:none;display:block;font:600 9px/1.4 Poppins;color:#00E5FF;margin:4px 0}
#sgBar .sgNote{color:#5A6478}
.sgRow{display:flex;gap:10px;justify-content:center;margin:8px 0}
.sgBtn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 14px;border-radius:12px;cursor:pointer;font-size:20px;
  background:rgba(13,19,48,.9);box-shadow:0 0 0 1.5px rgba(255,201,40,.35) inset}
.sgBtn i{font:700 8px/1 Poppins;color:#B48CFF;font-style:normal}
.sgBtn:active{background:rgba(255,201,40,.15)}
.artFull{position:absolute;inset:0}
.artHot{position:absolute;cursor:pointer;border-radius:12px}
.artHot:active{background:rgba(255,226,122,.14)}
.artTxt{position:absolute;display:flex;align-items:center;justify-content:center;font:800 clamp(10px,1.7vh,14px)/1 Poppins;color:#FFE27A;text-shadow:0 1px 3px #000;pointer-events:none}
.artTxt.lft{justify-content:flex-start;padding-left:2%}
.pzArt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(78vw,340px);aspect-ratio:1106/1422;
  background:url('assets/game_matchmenu.webp') center/contain no-repeat}
.artIn{position:absolute}
.artIn input{width:100%;height:100%;background:rgba(2,4,12,.55);border:1px solid rgba(255,201,40,.4);border-radius:8px;color:#FFE27A;font:700 12px Poppins;text-align:center;outline:none}
#htoast.on{background:url('assets/ui_toast_pill.webp') center/100% 100% no-repeat !important;border:none !important;box-shadow:none !important;padding:16px 34px !important;color:#FFE27A !important}

/* v4.95 hide-plate: art-baked control abhi nahi bana — dhak do, tap nahi */
.axhide{position:absolute;background:rgba(3,6,16,.86);border-radius:12px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}

/* PERF v4: interaction latency — tap-delay aur double-tap-zoom hataao.
   Sirf interactive elements par; scroll/pan behaviour na-chhua. */
button, .axhs, .nv, .chip, .stab, [data-a], [onclick], .btn, b[id], .soCard{ touch-action: manipulation; }

/* FX-TIER (v4.3): tier-rules ASLI runtime classes par bandhe gaye hain.
   (v4.2 me maine .fxDeco/.fxGlow/.fxTrail likhe the — wo CSS me to the magar runtime me KOI node
   unhe carry hi nahi karta tha, is liye wo rules kuch control nahi kar rahe the. Ab durust.)
   Cost structurally hatti hai — `opacity:0` kahin istemal nahi.
   Gameplay-critical feedback (dice · destination · capture · safe-cells · turn · timer · legal-move · win)
   har tier me barqarar; sirf DECORATIVE layers hatti hain. */
html[data-fx="balanced"] .glow{ animation:none }
html[data-fx="balanced"] .axgfly{ animation-duration:1.6s }
html[data-fx="performance"] .glow{ animation:none !important; box-shadow:none !important; filter:none !important }
html[data-fx="performance"] .ringspin{ animation:none !important }
html[data-fx="performance"] .axgfly{ animation:none !important }
html[data-fx="performance"] .bounce{ animation:none !important }

/* ═══ MOTION TOKENS (v1.1) — har token ka ASLI consumer isi change me maujood hai ═══ */
:root{
  --m-instant: 90ms;   --m-quick: 180ms;  --m-base: 260ms;
  --m-in:  cubic-bezier(.2,.8,.2,1);
  --m-out: cubic-bezier(.4,0,.2,1);
}

/* PRESS FEEDBACK — CONFLICT-FREE.
   63 selectors pehle se `transform` istemal karte hain, is liye press par transform ko HAATH NAHI lagaya:
   filter+brightness istemal hota hai, jo kisi maujooda transform/animation se takraata nahi.
   Consumer: --m-instant. */
button, .btn, .nv, .chip, .stab, .axhs, .hs, .artHot, .soCard, .arCard, .pkBtn, [data-a]{
  transition: filter var(--m-instant) var(--m-out);
}
button:active, .btn:active, .nv:active, .chip:active, .stab:active,
.axhs:active, .hs:active, .artHot:active, .soCard:active, .arCard:active,
.pkBtn:active, [data-a]:active{
  filter: brightness(1.16) saturate(1.05);
}

/* EXTRA-TURN CUE — chhota, premium; dice-result/legal-moves/turn/timer ko kabhi nahi dhaanpta.
   Consumers: --m-base, --m-in. */
.mxt{
  position:fixed; left:50%; top:16%; transform:translateX(-50%);
  z-index:120; pointer-events:none;
  padding:8px 20px; border-radius:999px;
  background:linear-gradient(180deg,rgba(20,36,84,.96),rgba(11,26,62,.96));
  border:1px solid #FFE27A; color:#FFE27A;
  font:800 12px Poppins; letter-spacing:2px; white-space:nowrap;
  animation: mxtIn var(--m-base) var(--m-in) both, mxtOut var(--m-quick) var(--m-out) 1s forwards;
}
.mxt s{ display:block; text-decoration:none; font:700 9px Poppins; color:#C5CDDC; letter-spacing:3px; margin-top:2px }
@keyframes mxtIn { from{ opacity:0; transform:translateX(-50%) translateY(-10px) } to{ opacity:1; transform:translateX(-50%) translateY(0) } }
@keyframes mxtOut{ to{ opacity:0; transform:translateX(-50%) translateY(-8px) } }
html[data-fx="performance"] .mxt{ animation:mxtIn var(--m-quick) var(--m-in) both, mxtOut var(--m-quick) var(--m-out) .8s forwards }

/* MOTION v1.3 — chaar lamhon ki CSS. `--m-reveal` ISI change me consume hota hai (orphan token nahi). */
:root{ --m-reveal: 520ms }
.mEnt{ position:fixed; left:-9999px; opacity:0; animation: mEntIn var(--m-base) var(--m-in) both }
@keyframes mEntIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:translateY(0) } }
.mFound{ position:fixed; left:50%; top:22%; transform:translateX(-50%); z-index:120; pointer-events:none;
  padding:10px 26px; border-radius:999px; background:linear-gradient(180deg,#1B2E6E,#0B1A3E);
  border:1px solid #FFE27A; color:#FFE27A; font:800 14px Poppins; letter-spacing:3px;
  animation: mxtIn var(--m-reveal) var(--m-in) both }
.mClaim{ position:fixed; left:50%; top:30%; transform:translateX(-50%); z-index:120; pointer-events:none;
  color:#2EE59D; font:800 15px Poppins; letter-spacing:2px;
  animation: mxtIn var(--m-base) var(--m-in) both }
.mPf{ position:fixed; left:50%; bottom:14%; transform:translateX(-50%); z-index:120; pointer-events:none;
  padding:8px 18px; border-radius:12px; font:700 11px Poppins; letter-spacing:1px; text-align:center;
  animation: mxtIn var(--m-quick) var(--m-in) both }
.mPfDef{ background:rgba(58,18,24,.96); border:1px solid #FF6B6B; color:#FFD7D7 }
.mPfPend{ background:rgba(20,36,84,.96); border:1px solid #FFE27A; color:#FFE27A }
html[data-fx="performance"] .mEnt{ animation-duration:var(--m-quick) }