:root{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
--orange:#ff6a1a;--ink:#0d0912;--panel:rgba(18,12,31,.92);--line:#2b2140;--txt:#f3ece2}
*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#120c1f;color:var(--txt);font-family:"Avenir Next","Segoe UI",Roboto,system-ui,sans-serif;overscroll-behavior:none;touch-action:none;position:fixed;inset:0}
#game{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block}
.hidden{display:none!important}
button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}
.screen{position:fixed;inset:0;z-index:20}
#splash{background:radial-gradient(ellipse at 50% 30%,#3a1f5c 0,#120c1f 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;transition:opacity .5s}
.logo-m{display:block;margin:0 auto;width:min(68vw,330px);height:auto;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.85)) drop-shadow(0 0 18px rgba(0,0,0,.6));pointer-events:none}
.logo-sub{display:block;margin-top:10px;font-weight:900;letter-spacing:.32em;font-size:min(4.4vw,20px);color:var(--orange);text-shadow:2px 2px 0 #000}
.splash-logo,.title-logo{text-align:center}
.loadbar{width:min(64vw,300px);height:10px;border:2px solid #000;background:#221735;border-radius:6px;overflow:hidden;box-shadow:0 0 0 2px #fff2}
#loadfill{height:100%;width:0;background:linear-gradient(90deg,#ff6a1a,#ffb627);transition:width .2s}
.loadtxt{font-size:13px;opacity:.75;letter-spacing:.08em}
#title{overflow:hidden}
.title-art{position:absolute;inset:-4%;background:url(../img/title.jpg) 50% 35%/cover no-repeat;animation:kb 24s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.08) translate(-1.5%,-1%)}}
.title-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,12,31,.75) 0,rgba(18,12,31,0) 32%,rgba(18,12,31,0) 52%,rgba(18,12,31,.95) 82%)}
.title-logo{position:absolute;left:0;right:0;top:calc(var(--sat) + 7vh)}
.title-menu{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 24px);display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 24px}
.big{width:min(84vw,360px);min-height:58px;border-radius:14px;font-weight:900;font-size:19px;letter-spacing:.12em;text-transform:uppercase;background:#2a1f3f;border:3px solid #000;box-shadow:0 5px 0 #000,inset 0 2px 0 #fff2}
.big:active,.mid:active{transform:translateY(3px);box-shadow:0 2px 0 #000}
.primary{background:linear-gradient(180deg,#ff8a3a,#e8541a);color:#1a0b02;text-shadow:0 1px 0 #ffb98a}
.mid{flex:1;min-height:50px;border-radius:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:#2a1f3f;border:3px solid #000;box-shadow:0 4px 0 #000}
.danger{background:#5a1724}
.row{display:flex;gap:12px;width:min(84vw,360px)}
.ver{font-size:11px;opacity:.6;margin-top:4px;text-align:center}
#hud{position:fixed;inset:0;z-index:10;pointer-events:none}
#hud button{pointer-events:auto}
.hud-tl{position:absolute;top:calc(var(--sat) + 10px);left:calc(var(--sal) + 10px);display:flex;flex-direction:column;gap:8px;max-width:58vw}
.pchip{display:flex;gap:8px;align-items:center;background:var(--panel);border:2px solid #000;border-radius:14px;padding:6px 10px 6px 6px;box-shadow:0 3px 0 #000}
.pface,.tface{width:44px;height:44px;border-radius:10px;background:url(../img/nathan.jpg) center/cover;border:2px solid var(--orange);flex:none}
.pbars{width:130px}
.pname{font-weight:900;font-size:12px;letter-spacing:.12em}.pname span{color:#ffb627;margin-left:4px}
.bar{height:9px;background:#000;border-radius:5px;margin-top:4px;overflow:hidden}
.bar div{height:100%;transition:width .2s}
.hp div{background:linear-gradient(90deg,#d9203a,#ff5d5d)}.xp{height:5px}.xp div{background:#8ff3ff}
.tracker{background:var(--panel);border:2px solid #000;border-left:4px solid var(--orange);border-radius:10px;padding:7px 10px;font-size:12px;line-height:1.35;box-shadow:0 3px 0 #000}
.tracker b{display:block;color:var(--orange);letter-spacing:.08em;font-size:11px;text-transform:uppercase}
.tracker .done{opacity:.45;text-decoration:line-through}
.hud-tr{position:absolute;top:calc(var(--sat) + 10px);right:calc(var(--sar) + 10px);display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.wallet{display:flex;gap:8px;background:var(--panel);border:2px solid #000;border-radius:12px;padding:5px 9px;font-size:12px;font-weight:800;box-shadow:0 3px 0 #000}
.wallet .c{color:#9dff8a}.wallet .r{color:#ffd34d}.wallet .f{color:#8ff3ff}
.wallet.big{font-size:15px;box-shadow:none;justify-content:space-around}
.mm-wrap{width:104px;height:104px;border-radius:50%;overflow:hidden;border:3px solid #000;box-shadow:0 0 0 2px var(--orange),0 3px 0 #000;background:#000}
#minimap{width:100%;height:100%}
.hud-btns{display:flex;gap:8px}
.round{width:46px;height:46px;border-radius:50%;background:var(--panel);border:2px solid #000;box-shadow:0 3px 0 #000;font-size:18px;font-weight:900}
.toast{position:absolute;left:calc(var(--sal) + 10px);right:calc(var(--sar) + 10px);top:calc(var(--sat) + 150px);display:flex;gap:10px;align-items:center;background:#fff8ec;color:#140c08;border:3px solid #000;border-radius:14px;padding:8px 12px;font-weight:700;font-size:14px;box-shadow:4px 4px 0 #000;animation:pop .25s}
@keyframes pop{from{transform:scale(.9);opacity:0}}
.prompt{position:absolute;left:50%;bottom:calc(var(--sab) + 170px);transform:translateX(-50%);background:var(--panel);border:2px solid var(--orange);border-radius:20px;padding:7px 14px;font-weight:800;font-size:13px;letter-spacing:.05em;white-space:nowrap}
.joy{position:absolute;left:0;bottom:0;width:52%;height:58%;pointer-events:auto;touch-action:none}
.joybase{position:absolute;left:calc(var(--sal) + 34px);bottom:calc(var(--sab) + 40px);width:112px;height:112px;margin:0;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:rgba(255,255,255,.07);opacity:.2;transition:opacity .4s ease;pointer-events:none}
.joy.active .joybase{opacity:.85;transition:opacity .08s}
.knob{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:rgba(255,255,255,.7);box-shadow:0 0 0 2px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.4)}
.actions{position:absolute;right:calc(var(--sar) + 14px);bottom:calc(var(--sab) + 30px);width:150px;height:150px;pointer-events:none}
.act{position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);background:rgba(20,16,30,.45);color:#fff;opacity:.42;display:flex;align-items:center;justify-content:center;padding:0;pointer-events:auto;transition:opacity .25s,transform .08s;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.act svg{width:52%;height:52%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:1}
.act:active,.act.on{opacity:.9;transform:scale(.93);transition:opacity .05s,transform .05s}
.act::after{content:'';position:absolute;inset:-12px;border-radius:50%}
.attack{right:0;bottom:0;width:70px;height:70px;color:#ffb3b3;border-color:rgba(255,120,120,.8)}
.power{right:84px;bottom:2px;width:54px;height:54px;color:#b7f4ff;border-color:rgba(140,230,255,.8);overflow:hidden}
.power i{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(0,0,0,.55)}
.use{right:8px;bottom:84px;width:52px;height:52px;color:#ffe08a;border-color:rgba(255,215,110,.8)}
.flash{position:absolute;inset:0;background:#e9e4ff;opacity:0;pointer-events:none}
.deathfx{position:absolute;inset:0;background:radial-gradient(circle,rgba(80,0,0,.4),rgba(0,0,0,.9));display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Impact,sans-serif;font-size:48px;color:#ff4250;letter-spacing:.06em}
.deathfx small{font-family:inherit;font-size:16px;color:#fff;margin-top:6px}
.sheet{position:fixed;left:0;right:0;bottom:0;height:86vh;height:86dvh;z-index:30;background:linear-gradient(180deg,#22183a,#140e22);border-top:3px solid #000;border-radius:22px 22px 0 0;box-shadow:0 -6px 0 rgba(0,0,0,.4);transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.9,.3,1.1);padding:0 calc(var(--sar) + 14px) calc(var(--sab) + 14px) calc(var(--sal) + 14px);display:flex;flex-direction:column}
.sheet.open{transform:translateY(0)}
.grab{width:48px;height:5px;border-radius:3px;background:#fff4;margin:8px auto}
.sheet-head{display:flex;justify-content:space-between;align-items:center}
.sheet-head h2{margin:0;font-family:Impact,sans-serif;letter-spacing:.08em;font-weight:400;font-size:26px;color:var(--orange)}
.sheet-body{flex:1;overflow-y:auto;display:flex;gap:12px;flex-wrap:wrap;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.charcol{flex:1 1 300px;display:flex;flex-direction:column;align-items:center}
#charview{width:150px;height:195px;background:radial-gradient(circle at 50% 40%,#3a2a5a,#140e22);border-radius:14px;border:2px solid #000}
.slots{display:flex;gap:8px;margin-top:8px}
.slot{width:86px;min-height:62px;border-radius:10px;border:2px solid #000;background:#1b1430;padding:4px;font-size:10px;text-align:center;pointer-events:auto}
.slot small{display:block;opacity:.55;text-transform:uppercase;letter-spacing:.1em;font-size:9px}
.statline{font-size:12px;opacity:.85;margin-top:6px;text-align:center}
.invcol{flex:1 1 300px}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:10px}
.cell{aspect-ratio:1;border-radius:10px;background:#1b1430;border:3px solid #333;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative}
.cell em{position:absolute;right:3px;bottom:1px;font-style:normal;font-size:11px;font-weight:900}
.cell.sel{outline:2px solid #fff}
.detail{margin-top:10px;background:#0f0a1a;border:2px solid #000;border-radius:12px;padding:10px;font-size:13px;min-height:90px}
.detail .rar{font-weight:900;text-transform:uppercase;font-size:11px;letter-spacing:.1em}
.detail button{margin-top:8px;padding:10px 18px;border-radius:10px;background:var(--orange);color:#000;font-weight:900;border:2px solid #000}
.modal{position:fixed;inset:0;z-index:40;background:rgba(5,3,10,.7);display:flex;align-items:center;justify-content:center;padding:calc(var(--sat) + 20px) 20px calc(var(--sab) + 20px)}
.card{background:linear-gradient(180deg,#2a1f45,#171028);border:3px solid #000;border-radius:20px;box-shadow:6px 6px 0 #000;padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px;width:min(92vw,400px);animation:pop .2s}
.card.scroll{max-height:80vh;overflow:auto;touch-action:pan-y;font-size:14px;line-height:1.45;align-items:stretch}
.card h3{margin:0;font-family:Impact,sans-serif;font-weight:400;font-size:30px;letter-spacing:.08em;color:var(--orange)}
.lootrow{display:flex;justify-content:space-between;width:min(80vw,330px);padding:8px 10px;border-radius:10px;background:#0f0a1a;margin:3px 0;border-left:5px solid;font-weight:700;font-size:14px}
.tog,.seg{display:flex;justify-content:space-between;align-items:center;width:min(84vw,340px);font-weight:800;font-size:16px;padding:6px 0}
.tog input{display:none}.tog i{width:54px;height:30px;border-radius:15px;background:#3a2f50;border:2px solid #000;position:relative}
.tog i:after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s}
.tog input:checked+i{background:var(--orange)}.tog input:checked+i:after{left:27px}
.seg button{padding:8px 12px;border-radius:8px;background:#3a2f50;border:2px solid #000;margin-left:4px;font-weight:800}
.seg button.on{background:var(--orange);color:#000}
.rotate{display:none}
@media (orientation:landscape) and (max-height:500px){.rotate{display:flex;position:fixed;inset:0;z-index:99;background:#120c1f;align-items:center;justify-content:center;text-align:center;font-weight:900;font-size:22px}}
@media (min-width:900px){.sheet{left:50%;width:760px;margin-left:-380px}}

#g3d{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;background:#121626}
#game{background:transparent;pointer-events:none}

.ic{width:22px;height:22px;vertical-align:middle}
.wallet .pp{color:#ff9de2}.wallet .pp b{margin-left:2px}
.pface[data-i]:not([data-i=""])::after{content:attr(data-i);display:flex;align-items:center;justify-content:center;height:100%;font:900 22px sans-serif;color:#ff7a1a;background:#1d1630}
.hubcard{max-width:520px;width:calc(100% - 20px);max-height:86vh;display:flex;flex-direction:column}
.hubhead{display:flex;justify-content:space-between;align-items:center}
.hubtabs{display:flex;gap:6px;overflow-x:auto;padding:6px 0 8px;scrollbar-width:none}
.hubtabs button{flex:0 0 auto;padding:7px 11px;border-radius:16px;border:1px solid #ff7a1a55;background:#1b1530;color:#eee;font-weight:700;font-size:12px}
.hubtabs button.on{background:#ff7a1a;color:#140f24}
.hubbody{overflow-y:auto;flex:1;font-size:13px;line-height:1.45}
.hrow{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:9px 10px;margin:6px 0;border-radius:10px;background:#1b1530;border:1px solid #ffffff18}
.hrow .t{flex:1}.hrow small{display:block;opacity:.7}
.hrow button{padding:7px 12px;border-radius:9px;border:0;background:#ff7a1a;color:#140f24;font-weight:800;white-space:nowrap}
.hrow button[disabled]{background:#444;color:#aaa}
.sw{width:22px;height:22px;border-radius:6px;border:2px solid #fff3;flex:0 0 auto}
.note{opacity:.75;font-size:12px;margin:6px 2px}
.cut{position:fixed;inset:0;z-index:60;background:rgba(5,3,12,.35)}
.cut .bar{position:absolute;left:0;right:0;height:11vh;background:#000}.cut .top{top:0}.cut .bot{bottom:0}
.cutbox{position:absolute;left:12px;right:12px;bottom:calc(11vh + 14px);max-width:520px;margin:0 auto;display:flex;gap:12px;background:rgba(14,10,30,.92);border:2px solid #ff7a1a;border-radius:14px;padding:12px}
.cutface{width:56px;height:56px;border-radius:10px;flex:0 0 auto;background:#2a2040 center/cover;display:flex;align-items:center;justify-content:center;font:900 26px sans-serif;color:#ff7a1a}
.cutname{font-weight:900;color:#ff9a4a;letter-spacing:1px;font-size:12px}.cuttext{font-size:15px;margin:3px 0 6px;min-height:40px}
.cut small{opacity:.55}
#splash .tip{margin-top:14px;font-size:12px;opacity:.75;max-width:300px;text-align:center}
/* item reveal */
.rvl{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,rgba(0,0,0,.35),rgba(0,0,0,.88) 60%);animation:rvlIn .3s ease-out}
.rvl.out{animation:rvlOut .26s ease-in forwards}
.rvl-spot{position:absolute;left:50%;top:-10%;width:260px;height:80%;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);filter:blur(6px);pointer-events:none}
.rvl-rays{position:absolute;left:50%;top:45%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:repeating-conic-gradient(from 0deg,var(--rc) 0 6deg,transparent 6deg 24deg);opacity:.0;mask:radial-gradient(circle,#000 10%,transparent 65%);-webkit-mask:radial-gradient(circle,#000 10%,transparent 65%);animation:rvlRays 6s linear infinite,rvlFade .5s .1s forwards}
.rvl-common .rvl-rays,.rvl-uncommon .rvl-rays{display:none}
.rvl-burst{position:absolute;left:50%;top:45%}
.rvl-burst i{position:absolute;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--rc);box-shadow:0 0 10px var(--rc);opacity:0;animation:rvlP .9s var(--t) ease-out forwards;transform:rotate(var(--a))}
.rvl-epic .rvl-burst i,.rvl-legendary .rvl-burst i,.rvl-event .rvl-burst i{animation:rvlP .9s var(--t) ease-out forwards,rvlTw 1.2s 1.1s ease-in-out infinite}
.rvl-card{position:relative;text-align:center;color:#fff;padding:18px 26px;border-radius:14px;background:rgba(20,22,28,.92);border:2px solid var(--rc);box-shadow:0 0 30px var(--rc),inset 0 0 20px rgba(255,255,255,.05);animation:rvlPop .5s cubic-bezier(.2,1.6,.4,1)}
.rvl-card img{width:112px;height:112px;object-fit:contain;filter:drop-shadow(0 0 12px var(--rc));animation:rvlBob 2s ease-in-out infinite}
.rvl-tag{font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.75}
.rvl-name{font-size:20px;font-weight:800;margin-top:6px}
.rvl-r{display:inline-block;margin-top:6px;padding:2px 10px;border-radius:99px;background:var(--rc);color:#111;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.rvl-legendary .rvl-r,.rvl-epic .rvl-r{background:linear-gradient(90deg,var(--rc),#fff,var(--rc));background-size:200% 100%;animation:rvlShine 1.6s linear infinite}
.rvl-hint{font-size:11px;opacity:.6;margin-top:10px}
@keyframes rvlIn{from{opacity:0}}@keyframes rvlOut{to{opacity:0;transform:scale(1.04)}}
@keyframes rvlRays{to{transform:rotate(360deg)}}@keyframes rvlFade{to{opacity:.55}}
@keyframes rvlP{0%{opacity:1;transform:rotate(var(--a)) translateX(0) scale(1.4)}100%{opacity:.9;transform:rotate(var(--a)) translateX(var(--d)) scale(.6)}}
@keyframes rvlTw{50%{opacity:.2}}
@keyframes rvlPop{from{transform:scale(.4);opacity:0}}
@keyframes rvlBob{50%{transform:translateY(-6px)}}
@keyframes rvlShine{to{background-position:-200% 0}}

.cut.cutbg{background:#05030c center/cover no-repeat}
.cutclose{position:absolute;left:50%;top:calc(11vh + 18px);width:min(78vw,420px);aspect-ratio:1;transform:translateX(-50%) rotate(-1.5deg);background:#111 center/cover;border:5px solid #fff;box-shadow:4px 6px 0 #000,0 0 40px rgba(0,0,0,.6);opacity:0;pointer-events:none}
.cutclose.on{opacity:1}.cutclose.pop{animation:cupop .28s ease-out}
@keyframes cupop{from{transform:translateX(-50%) rotate(-1.5deg) scale(.86);opacity:.2}to{transform:translateX(-50%) rotate(-1.5deg) scale(1);opacity:1}}
@media (orientation:portrait){.cutclose{top:calc(8vh + 18px)}}