:root{--hud-bg: rgba(17, 12, 28, .76);--hud-edge: rgba(250, 244, 255, .24);--hud-text: #f6ffe8;--health: #87ed5c;--shield: #67c7ff;--danger: #a65cff;--gold: #ffd45a}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:#050509;color:var(--hud-text);font-family:PingFang SC,Microsoft YaHei,Noto Sans SC,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace}#app{position:relative}#game-root{position:absolute;inset:0}#game-root canvas{display:block;border-radius:clamp(22px,2vw,42px);box-shadow:0 0 0 1px #f4e8ff14,0 20px 70px #0000008c;image-rendering:pixelated;touch-action:none}#hud-root{position:absolute;top:50%;left:50%;width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,56.25vw);aspect-ratio:16 / 9;pointer-events:none;transform:translate(-50%,-50%)}.hud-left{position:absolute;left:clamp(10px,1.4vw,22px);top:clamp(10px,2vh,22px);display:grid;gap:4px;width:clamp(220px,18vw,240px);transition:opacity .14s ease,filter .14s ease}.hud-left.is-occluding .fighter-row{background:linear-gradient(90deg,#14181694,#171e1661);box-shadow:0 2px #00000029;opacity:.68}.fighter-row{display:grid;grid-template-columns:20px 36px 1fr;align-items:center;min-height:44px;padding:4px 7px 4px 3px;border:1px solid rgba(244,255,223,.16);border-radius:8px;background:linear-gradient(90deg,#141816b8,#27361e7a);box-shadow:0 2px #0000002e;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.fighter-row.dead{opacity:.45;filter:grayscale(.7)}.fighter-rank{display:grid;width:18px;height:18px;place-items:center;border:2px solid rgba(255,255,255,.55);border-radius:4px;background:#3c94d8;background-position:center;background-size:100% 100%;color:#fff;font-size:10px;font-weight:900;text-shadow:0 2px #132033}.fighter-rank.rank-1{background-image:url(/assets/ui/rank-1.png)}.fighter-rank.rank-2{background-image:url(/assets/ui/rank-2.png)}.fighter-rank.rank-3{background-image:url(/assets/ui/rank-3.png)}.fighter-rank.rank-4{background-image:url(/assets/ui/rank-4.png)}.fighter-rank.rank-5{background-image:url(/assets/ui/rank-5.png)}.fighter-portrait{width:34px;height:34px;border:2px solid #1b1b22;border-radius:7px;background:#222;background-position:center;background-size:cover;box-shadow:inset 0 -8px #0000003d}.fighter-portrait.rogue{background-image:url(/assets/ui/portrait-rogue.png)}.fighter-portrait.samurai{background-image:url(/assets/ui/portrait-samurai.png)}.fighter-portrait.ninja{background-image:url(/assets/ui/portrait-ninja.png)}.fighter-portrait.cowboy{background-image:url(/assets/ui/portrait-cowboy.png)}.fighter-portrait.mage{background-image:url(/assets/ui/portrait-mage.png)}.fighter-body{display:grid;min-width:0;gap:3px}.fighter-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px}.fighter-name{overflow:hidden;color:#fff;font-size:clamp(10px,.95vw,13px);font-weight:900;line-height:1.05;text-overflow:ellipsis;text-shadow:0 2px #111;white-space:nowrap}.fighter-bars{position:relative;height:9px;overflow:hidden;border:2px solid #050709;border-radius:3px;background:#060909}.fighter-bars i{position:absolute;left:0;display:block;height:100%}.fighter-bars .health{top:0;background:var(--health)}.fighter-bars .shield{bottom:0;height:35%;background:var(--shield)}.fighter-value{color:#e8f6df;font-size:10px;font-weight:900;text-shadow:0 2px #111;white-space:nowrap}.hud-right-stack{position:absolute;top:clamp(10px,2vh,22px);right:clamp(10px,1.6vw,26px);display:grid;justify-items:end;gap:6px}.hud-top-right{display:flex;justify-content:flex-end;gap:5px;transition:opacity .14s ease}.stat-pill,.storm-timer{display:flex;align-items:center;min-height:28px;gap:5px;padding:4px 10px;border:0;border-radius:7px;background:url(/assets/ui/stat-pill.png) center / 100% 100% no-repeat,var(--hud-bg);color:#fff;font-size:clamp(12px,1vw,16px);font-weight:900;box-shadow:0 3px #00000047}.hud-top-right.is-occluding .stat-pill,.storm-timer.is-occluding{background:#0c09126b;box-shadow:0 2px #00000029}.stat-icon{color:#fff}.stat-icon.skull{color:#f5f0ff}.mini-map{position:relative;width:clamp(132px,10vw,158px);aspect-ratio:16 / 9;overflow:hidden;border:2px solid rgba(246,232,255,.62);border-radius:12px;background:linear-gradient(180deg,#160d2414,#160d2447),url(/assets/maps/arena-minimap.png) center / 100% 100% no-repeat;box-shadow:inset 0 0 0 1px #fff3,inset 0 0 18px #0a07126b,0 4px #0000003d;opacity:.94;transition:opacity .14s ease,filter .14s ease}.mini-map.is-occluding{opacity:.62;filter:saturate(.86)}.mini-map:after{position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 2px #844bc675,inset 0 0 10px #00000057;content:""}.mini-storm{position:absolute;z-index:2;border:2px solid rgba(255,248,255,.88);border-radius:50%;background:#652da424;box-shadow:0 0 7px #be86ff94,inset 0 0 12px #2c0c4c4d}.mini-dot{position:absolute;z-index:4;width:7px;height:7px;border:1px solid white;border-radius:50%;box-shadow:0 0 4px #000000ad;transform:translate(-50%,-50%)}.mini-dot.player{background:#48aef0}.mini-dot.bot{background:#f04747}.mini-dot.team-3{background:#90d65f}.mini-dot.team-4{background:#a65cff}.mini-dot.team-5{background:#ffad42}.mini-dot.pve{width:5px;height:5px;background:#3a173e}.storm-timer{justify-self:center;min-width:86px;justify-content:center;margin-top:-2px}.storm-timer span{width:13px;height:13px;border:2px solid white;border-radius:50%;background:var(--danger)}.hud-actions{position:absolute;bottom:clamp(22px,4vh,48px);left:clamp(22px,3vw,56px);display:none;gap:16px}.hud-actions button{display:grid;width:58px;height:58px;place-items:center;border:4px solid #24202e;border-radius:8px;background:url(/assets/ui/action-button.png) center / 100% 100% no-repeat,#181a24;color:#fff;font-size:28px;font-weight:900;box-shadow:inset 0 0 0 3px #ffffff2e,0 4px #00000059}.inventory{position:absolute;bottom:clamp(10px,1.8vh,22px);left:50%;display:grid;grid-template-columns:repeat(5,clamp(54px,4.7vw,66px));gap:clamp(6px,.7vw,10px);overflow:visible;pointer-events:none;transform:translate(-50%);transition:opacity .14s ease,filter .14s ease;z-index:20}.inventory-slot{position:relative;display:grid;height:clamp(54px,4.7vw,66px);min-width:44px;min-height:44px;padding:0;appearance:none;overflow:visible;place-items:center;border:4px solid rgba(210,216,226,.44);border-radius:8px;background:url(/assets/ui/inventory-slot.png) center / 100% 100% no-repeat,#1011152e;box-shadow:inset 0 0 0 3px #ffffff14,0 2px #00000024;color:inherit;cursor:pointer;font:inherit;pointer-events:auto}.inventory-slot.active{border-color:var(--gold);background:url(/assets/ui/inventory-slot-active.png) center / 100% 100% no-repeat,#42300e94;box-shadow:inset 0 0 0 4px #ffffff2e,0 0 0 4px #ffd45a57,0 0 18px #ffd45ab8,0 5px #00000057;transform:translateY(-5px)}.inventory-slot.active .slot-key{color:#11131a;background:var(--gold)}.inventory-slot.active strong{color:var(--gold)}.inventory-slot:focus-visible{outline:3px solid rgba(255,255,255,.82);outline-offset:3px}.inventory.is-occluding .inventory-slot:not(.active){border-color:#d2d8e275;background:url(/assets/ui/inventory-slot.png) center / 100% 100% no-repeat,#10111524;box-shadow:inset 0 0 0 2px #ffffff17,0 2px #00000024;opacity:.42;transform:scale(.9)}.slot-key{position:absolute;top:5px;left:7px;color:#e6ebf4b8;font-size:10px;font-weight:900;pointer-events:none}.inventory-slot strong{position:absolute;right:7px;bottom:5px;color:#fff;font-size:clamp(13px,1.4vw,18px);pointer-events:none;text-shadow:0 2px #000}.slot-icon{display:block;width:min(54px,76%);height:min(48px,68%);border-radius:3px;background:center / contain no-repeat;filter:drop-shadow(0 3px 0 rgba(0,0,0,.55));image-rendering:pixelated;pointer-events:none}.slot-tooltip{position:absolute;left:50%;bottom:calc(100% + 12px);display:grid;gap:6px;width:min(230px,58vw);padding:12px 14px;border:3px solid rgba(255,212,90,.96);border-radius:8px;background:#0e0c14f0;box-shadow:inset 0 0 0 2px #ffffff1f,0 8px #00000057;color:#f8ffe9;font-size:12px;line-height:1.45;opacity:0;pointer-events:none;text-align:left;text-shadow:0 2px #000;transform:translate(-50%,6px);transition:opacity .15s ease,transform .15s ease;visibility:hidden;z-index:50}.slot-tooltip:after{position:absolute;left:50%;bottom:-9px;width:14px;height:14px;border-right:3px solid rgba(255,212,90,.96);border-bottom:3px solid rgba(255,212,90,.96);background:#0e0c14f0;content:"";transform:translate(-50%) rotate(45deg)}.slot-tooltip b{color:var(--gold);font-size:13px}.slot-tooltip em{color:#d7e5ff;font-style:normal}.inventory-slot:hover .slot-tooltip,.inventory-slot:focus .slot-tooltip,.inventory-slot:focus-visible .slot-tooltip,.inventory-slot.show-tooltip .slot-tooltip{opacity:1;transform:translate(-50%);visibility:visible}.inventory-slot:first-child .slot-tooltip,.inventory-slot:nth-child(2) .slot-tooltip{left:0;transform:translateY(6px)}.inventory-slot:first-child .slot-tooltip:after,.inventory-slot:nth-child(2) .slot-tooltip:after{left:34px}.inventory-slot:first-child:hover .slot-tooltip,.inventory-slot:first-child:focus .slot-tooltip,.inventory-slot:first-child:focus-visible .slot-tooltip,.inventory-slot:first-child.show-tooltip .slot-tooltip,.inventory-slot:nth-child(2):hover .slot-tooltip,.inventory-slot:nth-child(2):focus .slot-tooltip,.inventory-slot:nth-child(2):focus-visible .slot-tooltip,.inventory-slot:nth-child(2).show-tooltip .slot-tooltip{transform:translate(0)}.inventory-slot:nth-child(4) .slot-tooltip,.inventory-slot:last-child .slot-tooltip{right:0;left:auto;transform:translateY(6px)}.inventory-slot:nth-child(4) .slot-tooltip:after,.inventory-slot:last-child .slot-tooltip:after{right:34px;left:auto}.inventory-slot:nth-child(4):hover .slot-tooltip,.inventory-slot:nth-child(4):focus .slot-tooltip,.inventory-slot:nth-child(4):focus-visible .slot-tooltip,.inventory-slot:nth-child(4).show-tooltip .slot-tooltip,.inventory-slot:last-child:hover .slot-tooltip,.inventory-slot:last-child:focus .slot-tooltip,.inventory-slot:last-child:focus-visible .slot-tooltip,.inventory-slot:last-child.show-tooltip .slot-tooltip{transform:translate(0)}.item-shield .slot-icon,.item-medkit .slot-icon{width:min(62px,70%);height:min(64px,76%);border:0}.weapon-pistol .slot-icon{background-image:url(/assets/ui/items/pistol.png)}.weapon-rifle .slot-icon{background-image:url(/assets/ui/items/rifle.png)}.weapon-shotgun .slot-icon{background-image:url(/assets/ui/items/shotgun.png)}.item-shield .slot-icon{background-image:url(/assets/ui/items/shield.png)}.item-medkit .slot-icon{background-image:url(/assets/ui/items/medkit.png)}.progression-panel{position:absolute;left:50%;top:clamp(10px,2vh,22px);display:grid;width:min(360px,34vw);gap:5px;padding:6px 10px 7px;border:2px solid rgba(255,212,90,.66);border-radius:12px;background:linear-gradient(180deg,#1b2218d1,#121612a8);box-shadow:0 3px #00000038,inset 0 0 0 1px #ffffff12;color:#fff;pointer-events:none;text-shadow:0 2px #000;transform:translate(-50%);transition:opacity .14s ease;z-index:19}.progression-panel.is-occluding{opacity:.36}.progression-main{display:grid;grid-template-columns:auto minmax(96px,1fr) auto;align-items:center;gap:10px}.progression-main strong{color:var(--gold);font-size:clamp(13px,1.25vw,17px);letter-spacing:.04em}.progression-main span,.progression-meta{color:#f4ffe9;font-size:clamp(9px,.9vw,12px);font-weight:900}.progression-meta{display:grid;grid-template-columns:auto auto minmax(78px,1fr);align-items:center;gap:8px;color:#dff2d8}.progression-meta span{min-width:0;white-space:nowrap}.progression-meta .current-slot{justify-self:end;padding:3px 8px;border:1px solid rgba(255,212,90,.58);border-radius:999px;background:#ffd45a21;color:#f8ffe9}.progression-meta b{color:var(--gold)}.xp-bar{height:7px;overflow:hidden;border:2px solid #050709;border-radius:999px;background:#080a09f0}.xp-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#82ed5c,#ffd45a)}.start-notice{position:absolute;top:50%;left:50%;z-index:60;display:grid;width:min(760px,88vw);gap:14px;max-height:min(86%,620px);overflow:auto;padding:clamp(16px,2.2vw,26px);border:3px solid rgba(255,212,90,.92);border-radius:14px;background:linear-gradient(135deg,rgba(255,212,90,.12),transparent 34%),linear-gradient(180deg,#181222f5,#0a0b12f0);box-shadow:inset 0 0 0 2px #ffffff1a,0 10px #00000057,0 0 48px #a65cff57;pointer-events:auto;text-align:center;text-shadow:0 2px #000;transform:translate(-50%,-50%)}.start-notice-header{display:grid;gap:6px}.start-notice-header>span{justify-self:center;padding:4px 12px;border:1px solid rgba(255,212,90,.6);border-radius:999px;color:#f8ffe9;font-size:clamp(10px,1vw,12px);font-weight:900;letter-spacing:.16em}.start-notice strong{color:var(--gold);font-size:clamp(25px,3.2vw,42px);font-weight:900;line-height:1.05}.start-notice em{color:#dce7ff;font-size:clamp(12px,1.2vw,15px);font-style:normal;font-weight:900}.start-notice-grid{display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);gap:12px;text-align:left}.start-notice section,.start-notice-control-set{display:grid;gap:7px;min-width:0;padding:12px;border:1px solid rgba(244,255,223,.18);border-radius:10px;background:#07090e80}.start-notice-controls{padding:0;border:0;background:transparent}.start-notice-control-touch{display:none}.start-notice h2{margin:0 0 2px;color:#f8ffe9;font-size:clamp(14px,1.3vw,18px)}.start-notice p{display:grid;grid-template-columns:minmax(72px,.45fr) minmax(0,1fr);align-items:center;margin:0;gap:8px;color:#e8f6df;font-size:clamp(11px,1vw,13px);font-weight:800;line-height:1.35}.start-notice p b{color:var(--gold);font-size:.95em}.start-notice p span{min-width:0;color:#f4ffe9}.start-notice-items{box-shadow:inset 0 0 0 1px #ffd45a1a}.start-notice-items p b{white-space:nowrap}.start-notice-button{justify-self:center;min-width:180px;min-height:46px;padding:10px 22px;border:3px solid rgba(255,255,255,.34);border-radius:9px;background:linear-gradient(180deg,#ffd45a,#c98320);color:#18100a;cursor:pointer;font:inherit;font-size:clamp(14px,1.4vw,18px);font-weight:900;box-shadow:inset 0 2px #ffffff6b,0 5px #00000059}.start-notice-button:hover,.start-notice-button:focus-visible{filter:brightness(1.08);outline:3px solid rgba(255,255,255,.72);outline-offset:3px}.end-state{position:absolute;top:50%;left:50%;display:grid;gap:8px;min-width:260px;padding:18px 24px;border:3px solid rgba(255,255,255,.32);border-radius:8px;background:#100c19db;pointer-events:auto;text-align:center;transform:translate(-50%,-50%);box-shadow:0 8px #0000004d}.end-state strong{color:var(--gold);font-size:32px}.end-state.lost strong{color:#ff6464}.end-state span{color:#e5e1f7;font-size:14px;font-weight:800}.end-state-button{justify-self:center;min-width:128px;min-height:42px;padding:8px 18px;border:3px solid rgba(255,255,255,.34);border-radius:8px;background:linear-gradient(180deg,#ffd45a,#c98320);color:#18100a;cursor:pointer;font:inherit;font-size:15px;font-weight:900;box-shadow:inset 0 2px #ffffff6b,0 4px #00000059}.end-state-button:hover,.end-state-button:focus-visible{filter:brightness(1.08);outline:3px solid rgba(255,255,255,.72);outline-offset:3px}.mobile-controls{position:absolute;inset:0;z-index:55;display:none;pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none}.mobile-joystick{position:absolute;bottom:calc(24px + env(safe-area-inset-bottom));left:calc(24px + env(safe-area-inset-left));width:clamp(116px,18vw,148px);height:clamp(116px,18vw,148px);border:3px solid rgba(255,255,255,.32);border-radius:50%;background:radial-gradient(circle,#ffffff2e,#16122294 58%,#0b0912c7);box-shadow:inset 0 0 0 4px #ffffff14,0 6px #0000004d,0 0 28px #a65cff2e;opacity:.9;pointer-events:auto;touch-action:none}.mobile-joystick:before{position:absolute;inset:22%;border:2px dashed rgba(255,212,90,.32);border-radius:50%;content:""}.mobile-joystick-knob{position:absolute;top:50%;left:50%;width:clamp(48px,7vw,62px);height:clamp(48px,7vw,62px);border:3px solid rgba(255,255,255,.48);border-radius:50%;background:linear-gradient(180deg,#ffd45aeb,#c47121e0);box-shadow:inset 0 3px #ffffff5c,0 4px #0000005c;transform:translate(-50%,-50%)}.mobile-buttons{position:absolute;right:calc(22px + env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));display:grid;grid-template-columns:auto auto;grid-template-areas:"cycle fire";align-items:end;gap:12px;pointer-events:auto}.mobile-button{display:grid;place-items:center;width:clamp(68px,9.2vw,86px);height:clamp(68px,9.2vw,86px);padding:0;border:4px solid rgba(255,255,255,.34);border-radius:18px;background:url(/assets/ui/action-button.png) center / 100% 100% no-repeat,linear-gradient(180deg,#29243af0,#0d0f16eb);color:#fff;font:inherit;font-weight:900;box-shadow:inset 0 0 0 3px #ffffff1f,0 5px #0000005c;text-shadow:0 2px #000;touch-action:none}.mobile-button strong{font-size:clamp(15px,2.1vw,20px);line-height:1}.mobile-button span{color:#dce7ff;font-size:clamp(9px,1.2vw,11px);line-height:1}.mobile-button-fire{grid-area:fire;width:clamp(92px,12vw,112px);height:clamp(92px,12vw,112px);border-radius:28px;background:url(/assets/ui/action-button.png) center / 100% 100% no-repeat,linear-gradient(180deg,#ff604ef5,#73191ef0)}.mobile-button-cycle{grid-area:cycle}.mobile-button.is-pressed{filter:brightness(1.18);transform:translateY(4px) scale(.98);box-shadow:inset 0 0 0 3px #ffffff2e,0 1px #0000006b}@media(hover:none),(pointer:coarse){.mobile-controls.is-active{display:block}.start-notice-control-desktop{display:none}.start-notice-control-touch{display:grid}}@media(max-width:820px){.hud-left{width:210px;gap:4px}.fighter-row{grid-template-columns:18px 32px 1fr;min-height:42px;padding:4px 6px 4px 3px}.fighter-portrait{width:30px;height:30px}.fighter-name,.fighter-value{font-size:9px}.hud-right-stack{top:10px;right:10px;gap:5px}.mini-map{width:120px}.stat-pill,.storm-timer{min-height:24px;padding:3px 8px;font-size:11px}.start-notice{width:min(680px,92vw);gap:10px;padding:14px}.start-notice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.start-notice section,.start-notice-control-set{gap:6px;padding:10px}.start-notice p{grid-template-columns:minmax(66px,.44fr) minmax(0,1fr);gap:7px}}@media(orientation:portrait){#hud-root{top:0;left:0;width:100vw;height:100vh;aspect-ratio:auto;transform:none}.hud-left{top:max(10px,env(safe-area-inset-top));left:10px;width:min(210px,55vw)}.fighter-row{min-height:38px}.hud-right-stack{top:max(10px,env(safe-area-inset-top));right:10px}.mini-map{width:min(106px,28vw)}.progression-panel{top:auto;bottom:calc(max(92px,11vh) + env(safe-area-inset-bottom));width:min(320px,82vw);opacity:.92}.progression-panel.is-occluding{opacity:.72}.progression-main{grid-template-columns:auto minmax(76px,1fr) auto}.progression-meta{grid-template-columns:auto auto auto}.inventory{bottom:calc(16px + env(safe-area-inset-bottom));grid-template-columns:repeat(5,minmax(48px,58px));gap:7px}.inventory-slot{height:58px}.mobile-joystick{bottom:calc(94px + env(safe-area-inset-bottom));width:min(128px,28vw);height:min(128px,28vw)}.mobile-buttons{right:calc(12px + env(safe-area-inset-right));bottom:calc(94px + env(safe-area-inset-bottom));gap:7px}.mobile-button{width:min(68px,16vw);height:min(68px,16vw);border-radius:15px}.mobile-button-fire{width:min(86px,20vw);height:min(86px,20vw);border-radius:24px}.mobile-button strong{font-size:min(16px,3.5vw)}.mobile-button span{font-size:min(10px,2.5vw)}.slot-tooltip{display:none}.start-notice{width:min(620px,96vw);max-height:min(78vh,620px);gap:8px;padding:12px}.start-notice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.start-notice section,.start-notice-control-set{gap:5px;padding:8px}.start-notice p{grid-template-columns:1fr;gap:2px;font-size:min(11px,2.7vw);line-height:1.25}.start-notice h2{font-size:min(14px,3.4vw)}}