*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#060b1e;color:#fff;font-family:'Bahnschrift','Segoe UI',Arial,sans-serif;user-select:none;-webkit-user-select:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
button,select,input{font-family:inherit}
button{cursor:pointer}
/* ---------- Loading ---------- */
#loading{position:fixed;inset:0;background:radial-gradient(circle at 50% 40%,#16308a,#060b1e 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:50}
#loading p{opacity:.8;letter-spacing:.08em}
.logo{font-weight:800;font-style:italic;font-size:26px;letter-spacing:.02em;line-height:.9;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.logo span{display:block;color:#ffe14a;font-size:.62em;letter-spacing:.34em}
.logo.big{font-size:64px;text-align:center}
/* ---------- Lobby ---------- */
#lobby{position:fixed;inset:0;z-index:10;pointer-events:none}
#lobby>*{pointer-events:auto}
.topbar{position:absolute;top:0;left:0;right:0;height:64px;display:flex;align-items:center;gap:28px;padding:0 28px;background:linear-gradient(#050a1ccc,#050a1c00)}
#tabs{display:flex;gap:6px;flex:1}
#tabs button{background:transparent;border:0;color:#cfd8ff;font-weight:700;font-size:15px;letter-spacing:.06em;padding:8px 16px;border-radius:6px;transition:.12s}
#tabs button:hover{background:#ffffff1c;color:#fff}
#tabs button.on{background:#fff;color:#0b1638}
.wallet{display:flex;align-items:center;gap:8px;background:#0008;border:1px solid #ffffff25;padding:6px 14px 6px 8px;border-radius:20px;font-size:17px}
.coin{display:inline-block;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#bff3ff,#2fb4f0 55%,#126aa8);border:2px solid #dff8ff;box-shadow:0 0 8px #49c6ff}
.coin.s{width:15px;height:15px;border-width:1.5px;vertical-align:-2px;margin-right:4px}
.tab{display:none;position:absolute;inset:64px 0 0 0;pointer-events:none}
.tab.on{display:block}
.tab>*{pointer-events:auto}
.playerTag{position:absolute;top:14%;left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;background:#0007;padding:6px 16px 6px 6px;border-radius:26px;border:1px solid #ffffff22}
.playerTag .lvl{width:34px;height:34px;border-radius:50%;background:#ffe14a;color:#1a1a1a;font-weight:800;display:flex;align-items:center;justify-content:center}
.playerTag b{display:block;font-size:16px}
.playerTag small{color:#7dffb0;font-size:12px}
.modeCard{position:absolute;left:28px;bottom:32px;width:300px;background:#0a1230e0;border:1px solid #ffffff22;border-radius:12px;padding:14px;box-shadow:0 12px 40px #0008}
.modeArt{height:110px;border-radius:8px;background:linear-gradient(135deg,#2b6cf5,#7a3cf0 60%,#f04f9a);display:flex;align-items:flex-end;padding:8px;margin-bottom:10px;position:relative;overflow:hidden}
.modeArt:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,#ffffff14 0 14px,transparent 14px 34px)}
.modeArt span{position:relative;background:#0009;padding:2px 10px;border-radius:4px;font-weight:700;letter-spacing:.1em;font-size:12px}
.modeCard h2{font-style:italic;font-weight:800;font-size:24px}
.modeCard p{color:#b7c2ee;font-size:13px;margin:2px 0 10px}
.diffRow{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#cdd6ff;margin-bottom:10px}
select{background:#16204a;color:#fff;border:1px solid #ffffff30;border-radius:6px;padding:5px 8px}
#btnPlay{width:100%;height:62px;border:0;border-radius:8px;background:linear-gradient(#fff36b,#ffd21f);color:#1b1b1b;font-weight:800;font-style:italic;font-size:30px;letter-spacing:.03em;box-shadow:0 5px 0 #b58a00,0 10px 22px #0007;transition:.08s}
#btnPlay:hover{filter:brightness(1.08);transform:translateY(-1px)}
#btnPlay:active{transform:translateY(3px);box-shadow:0 2px 0 #b58a00}
.statBox{position:absolute;right:28px;bottom:32px;background:#0a1230c8;border:1px solid #ffffff22;border-radius:12px;padding:12px 18px;display:flex;gap:22px}
.statBox div{text-align:center}
.statBox b{display:block;font-size:24px;font-style:italic}
.statBox small{color:#9fb0ee;font-size:11px;letter-spacing:.1em}
.tip{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-size:12px;color:#ffffff70}
.panel{position:absolute;left:28px;top:14px;bottom:24px;width:min(56vw,860px);background:#0a1230d8;border:1px solid #ffffff20;border-radius:12px;padding:18px 22px;overflow-y:auto}
.panel.wide{width:min(64vw,940px)}
.panel h1,.box h1{font-style:italic;font-weight:800;font-size:30px;margin-bottom:4px}
.panel h3,.box h3{margin:16px 0 8px;font-size:14px;letter-spacing:.14em;color:#ffe14a;display:flex;align-items:center;gap:14px}
.sub{color:#aebaf0;font-size:13px;margin-bottom:10px}
.note{color:#8795cf;font-size:12px;margin-top:12px}
.cards{display:flex;flex-wrap:wrap;gap:12px}
.card{position:relative;width:148px;height:196px;border-radius:8px;overflow:hidden;cursor:pointer;border:3px solid transparent;transition:.1s;box-shadow:0 6px 14px #0006}
.cards.feat .card{width:230px;height:270px}
.card:hover{transform:translateY(-3px);border-color:#ffffffa0}
.card.sel{border-color:#ffe14a}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.card .nm{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(#0000,#000c 40%);padding:22px 8px 7px;font-weight:700;font-size:14px;line-height:1.15}
.card .nm small{display:block;font-weight:400;font-size:12px;color:#dfe6ff;margin-top:2px}
.card .tag{position:absolute;top:6px;left:6px;background:#000a;padding:2px 7px;border-radius:4px;font-size:11px;letter-spacing:.06em}
.card.locked img{filter:grayscale(.85) brightness(.55)}
.r0{background:radial-gradient(circle at 50% 35%,#c4ccd6,#59636f)}
.r1{background:radial-gradient(circle at 50% 35%,#a5ec74,#2c7a1c)}
.r2{background:radial-gradient(circle at 50% 35%,#7fd0ff,#1a5aa8)}
.r3{background:radial-gradient(circle at 50% 35%,#d99bff,#6325aa)}
.r4{background:radial-gradient(circle at 50% 35%,#ffd183,#bd6410)}
.detail{position:absolute;right:28px;bottom:32px;width:300px;background:#0a1230e0;border:1px solid #ffffff22;border-radius:12px;padding:14px 16px}
.detail h2{font-style:italic;font-size:24px}
.detail .rar{font-size:12px;letter-spacing:.14em;font-weight:700;margin:2px 0 6px}
.detail p{color:#b7c2ee;font-size:13px;margin-bottom:10px}
.detail button{width:100%;height:46px;border:0;border-radius:8px;background:linear-gradient(#fff36b,#ffd21f);color:#1b1b1b;font-weight:800;font-size:18px;box-shadow:0 4px 0 #b58a00}
.detail button:disabled{background:#3a4470;color:#aab;box-shadow:none;cursor:default}
.ghostBtn{margin-top:16px;background:#1b2a66;border:1px solid #5d77e0;color:#dfe7ff;padding:9px 16px;border-radius:8px;font-weight:700}
.ghostBtn:hover{background:#27398a}
.ghostBtn.small{margin:0;padding:4px 10px;font-size:12px;letter-spacing:0}
.setGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;margin-top:10px}
.setGrid label{font-size:13px;color:#cdd6ff;display:flex;flex-direction:column;gap:5px}
.setGrid label.chk{flex-direction:row;align-items:center;gap:8px}
.setGrid input[type=range]{width:100%}
.setGrid input:not([type]){background:#16204a;border:1px solid #ffffff30;border-radius:6px;color:#fff;padding:7px 9px;font-size:15px}
#binds{columns:2;column-gap:30px}
#binds h4{font-size:12px;letter-spacing:.14em;color:#8fa2ee;margin:10px 0 4px;break-after:avoid}
.kbrow{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid #ffffff10;font-size:13px;break-inside:avoid;gap:8px}
.kb{min-width:96px;background:#16204a;color:#fff;border:1px solid #ffffff35;border-radius:6px;padding:5px 10px;font-weight:700;font-size:13px}
.kb:hover{border-color:#ffe14a}
.kb.listen{background:#ffe14a;color:#111}
/* ---------- Overlays ---------- */
.overlay{position:fixed;inset:0;z-index:30;background:#050a1cb8;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.box{background:#0c1640;border:1px solid #ffffff28;border-radius:14px;padding:26px 30px;min-width:340px;display:flex;flex-direction:column;gap:10px;text-align:center;box-shadow:0 20px 60px #000a}
.box.wideBox{width:min(90vw,940px);max-height:90vh;text-align:left}
#pauseSetSlot{overflow-y:auto;max-height:70vh;padding-right:8px}
.box button{height:44px;border-radius:8px;border:1px solid #ffffff30;background:#1b2a66;color:#fff;font-weight:700;font-size:15px}
.box button:hover{background:#27398a}
.box button.big{background:linear-gradient(#fff36b,#ffd21f);color:#1b1b1b;border:0;font-size:18px;box-shadow:0 4px 0 #b58a00}
.box .kb,.box .ghostBtn.small{height:auto}
#endTitle{font-style:italic;font-weight:800;font-size:54px;line-height:1;color:#ffe14a;text-shadow:0 4px 0 #0006}
#endTitle.lose{color:#ff6a6a}
#endPlace{font-size:20px;margin-bottom:6px}
#endStats{display:flex;justify-content:center;gap:26px;margin:8px 0 14px}
#endStats b{display:block;font-size:26px;font-style:italic}
#endStats small{color:#9fb0ee;font-size:11px;letter-spacing:.1em}
/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:5;pointer-events:none;text-shadow:0 1px 2px #000b}
#compass{position:absolute;top:8px;left:50%;transform:translateX(-50%)}
#stormMsg{position:absolute;top:58px;left:50%;transform:translateX(-50%);font-weight:700;font-size:15px;letter-spacing:.05em;white-space:nowrap}
#stormMsg b{color:#d58bff}
#mapBox{position:absolute;top:14px;right:16px;width:200px}
#minimap{display:block;border:2px solid #ffffffb0;border-radius:4px;background:#1a5fa8}
#matchInfo{display:flex;justify-content:space-between;margin-top:6px;font-size:16px}
#matchInfo span{display:flex;align-items:center;gap:5px}
#matchInfo svg{width:16px;height:16px;fill:#fff;filter:drop-shadow(0 1px 1px #000)}
#matchInfo .st svg{fill:#d58bff}
#feed{position:absolute;left:16px;top:16px;width:360px;font-size:13px;display:flex;flex-direction:column;gap:3px}
#feed div{background:#0006;padding:3px 8px;border-radius:4px;width:fit-content;animation:feedIn .2s}
#feed b{color:#ffe14a}
#feed .me b:first-child{color:#7dffb0}
@keyframes feedIn{from{opacity:0;transform:translateX(-12px)}}
#crosshair{position:absolute;left:50%;top:50%;--gap:7px}
#crosshair i{position:absolute;background:#fff;box-shadow:0 0 2px #000}
#crosshair i:nth-child(1){width:2px;height:9px;left:-1px;top:calc(-9px - var(--gap))}
#crosshair i:nth-child(2){width:2px;height:9px;left:-1px;top:var(--gap)}
#crosshair i:nth-child(3){height:2px;width:9px;top:-1px;left:calc(-9px - var(--gap))}
#crosshair i:nth-child(4){height:2px;width:9px;top:-1px;left:var(--gap)}
#crosshair b{position:absolute;width:3px;height:3px;left:-1.5px;top:-1.5px;background:#fff;border-radius:50%;box-shadow:0 0 2px #000}
#hitmarker{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px;opacity:0;background:
linear-gradient(45deg,transparent 46%,#fff 46% 54%,transparent 54%),linear-gradient(-45deg,transparent 46%,#fff 46% 54%,transparent 54%);
-webkit-mask:radial-gradient(circle,transparent 5px,#000 6px);mask:radial-gradient(circle,transparent 5px,#000 6px)}
#hitmarker.on{animation:hm .22s}
#hitmarker.head{filter:sepia(1) saturate(9) hue-rotate(5deg)}
@keyframes hm{0%{opacity:1;transform:scale(1.35)}100%{opacity:0;transform:scale(.9)}}
#scope{position:absolute;inset:0;display:none;background:
linear-gradient(#000,#000) 50% 50%/1px 100% no-repeat,linear-gradient(#000,#000) 50% 50%/100% 1px no-repeat,
radial-gradient(circle at 50% 50%,transparent 0 34vh,#000 34.4vh)}
#prompt{position:absolute;left:50%;top:60%;transform:translateX(-50%);background:#000a;padding:6px 14px;border-radius:6px;font-size:15px;display:none;white-space:nowrap}
kbd{display:inline-block;background:#fff;color:#111;border-radius:4px;padding:0 6px;font-family:inherit;font-weight:800;font-size:.9em;text-shadow:none;margin-right:5px;min-width:20px;text-align:center}
.bar{height:8px;background:#0009;border-radius:4px;overflow:hidden;border:1px solid #ffffff40}
.bar>div{height:100%;background:#ffe14a;width:0}
#useWrap{position:absolute;left:50%;top:68%;transform:translateX(-50%);width:240px;text-align:center;font-size:13px;display:none}
#targetHp{position:absolute;left:50%;top:44%;transform:translateX(-50%);width:150px;text-align:center;font-size:12px;display:none}
#targetHpBar{background:#7dffb0}
#banner{position:absolute;left:50%;top:24%;transform:translateX(-50%);text-align:center;opacity:0;transition:opacity .25s}
#banner.on{opacity:1}
#bannerT{font-style:italic;font-weight:800;font-size:36px;letter-spacing:.03em;text-shadow:0 3px 0 #0008}
#bannerS{font-size:17px;color:#ffe14a}
#dropHint{position:absolute;left:50%;top:62%;transform:translateX(-50%);font-size:20px;font-weight:700;display:none;white-space:nowrap}
#editHint{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);background:#0b3a80d0;border:1px solid #6cc0ff;padding:6px 14px;border-radius:6px;font-size:13px;display:none;white-space:nowrap}
#vitals{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:330px}
#ammo{text-align:center;font-size:30px;font-weight:700;font-style:italic;margin-bottom:6px;min-height:36px}
#ammo small{font-size:18px;opacity:.85;font-style:normal}
.vrow{display:flex;align-items:center;gap:7px;margin-top:4px}
.vic{width:16px;text-align:center;font-weight:800}
.vic.sh{color:#59b9ff;font-size:12px}.vic.hp{color:#7dff6a;font-size:18px;line-height:14px}
.vbar{flex:1;height:14px;background:#000a;border:1px solid #ffffff38;border-radius:2px;overflow:hidden}
.vbar>div{height:100%;transition:width .15s}
#shBar{background:linear-gradient(#7cd0ff,#2f8fe8)}#hpBar{background:linear-gradient(#a6ff5e,#49c42a)}
.vrow b{width:34px;font-size:15px}
#rightDock{position:absolute;right:16px;bottom:20px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
#hotbar,#buildbar{display:flex;gap:5px}
.slot{position:relative;width:62px;height:62px;border-radius:5px;border:2px solid #ffffff40;background:#0b122cb0;overflow:hidden}
.slot.sel{border-color:#fff;transform:translateY(-6px);box-shadow:0 0 12px #fff8}
.slot img{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);object-fit:contain}
.slot svg{position:absolute;inset:9px 9px 13px;width:calc(100% - 18px);height:calc(100% - 22px);fill:none;stroke:#bfe2ff;stroke-width:2.200;stroke-linejoin:round}
.slot .cnt{position:absolute;right:4px;bottom:1px;font-size:14px;font-weight:700}
.slot .key{position:absolute;left:3px;top:1px;font-size:10px;font-weight:700;background:#000a;padding:0 4px;border-radius:3px}
.slot.b{background:#0e3a78c0;border-color:#6cc0ff70}
.slot.b.sel{border-color:#9fe0ff;box-shadow:0 0 12px #58b8ffb0}
#mats{display:flex;gap:10px;font-size:15px;font-weight:700}
#mats span{display:flex;align-items:center;gap:5px;padding:2px 7px;border-radius:5px;border:2px solid transparent}
#mats span.sel{border-color:#9fe0ff;background:#0e3a78a0}
#mats i{width:18px;height:14px;border-radius:2px;display:inline-block;border:1px solid #0008}
#mats .wood{background:linear-gradient(#d39a5b,#9a6a34)}#mats .stone{background:linear-gradient(#c5c0b9,#86817a)}#mats .metal{background:linear-gradient(#b9c6d2,#6b7986)}
#dmgLayer{position:absolute;inset:0;overflow:hidden}
.dmg{position:absolute;font-weight:800;font-style:italic;font-size:22px;animation:dmgUp .8s forwards;text-shadow:0 2px 0 #000,0 0 4px #000}
.dmg.head{color:#ffe14a;font-size:28px}.dmg.shd{color:#6cc8ff}
@keyframes dmgUp{0%{transform:translate(-50%,0) scale(1.3)}20%{transform:translate(-50%,-10px) scale(1)}100%{transform:translate(-50%,-55px);opacity:0}}
#stormTint{position:absolute;inset:0;background:radial-gradient(circle,#7a2cf020,#6a1ee070);opacity:0;transition:opacity .4s}
#hurt{position:absolute;inset:0;box-shadow:inset 0 0 140px 40px #f00c;opacity:0}
#bigmap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#040818b0}
#bigmapC{height:min(86vh,86vw);width:auto;border:3px solid #ffffffb0;border-radius:6px}
@media (max-width:1280px){#vitals{left:16px;transform:none;width:300px}#feed{top:70px}.panel{width:58vw}.detail{width:260px}}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#ffffff10;border-radius:5px}::-webkit-scrollbar-thumb{background:#5d77e0;border-radius:5px}