@font-face{font-family:Noto;src:url('./assets/hud/NotoSans-Bold.ttf')}@font-face{font-family:Burbank;src:url('./assets/hud/BurbankBigCondensed-Black.ttf')}
:root{--hs:.75}body.playing #top{display:none}#hud{font-family:Noto,Arial,sans-serif;font-weight:700;text-shadow:1px 2px 2px #0009}#hud button{font-family:inherit}#squad{position:absolute;top:calc(20px * var(--hs));left:calc(30px * var(--hs));width:calc(280px * var(--hs));font-size:calc(16px * var(--hs));line-height:1.5}.squad-arrow{color:#d7f249;margin-right:10px}#squad i{display:block;width:75%;height:calc(7px * var(--hs));margin:2px 0 0 23px;background:#74d641;box-shadow:0 1px 3px #0005}#compass{top:calc(10px * var(--hs));height:calc(50px * var(--hs));width:520px;left:50%;transform:translateX(-50%);letter-spacing:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}#compass span{position:absolute;font-size:calc(14px * var(--hs));top:calc(22px * var(--hs));transform:translateX(-50%);opacity:.75}#compass .cardinal{top:calc(6px * var(--hs));font-size:calc(24px * var(--hs));opacity:1}#compass>i{position:absolute;left:50%;top:calc(34px * var(--hs));border:calc(5px * var(--hs)) solid transparent;border-bottom-color:white;transform:translateX(-50%)}#match{right:calc(18px * var(--hs));top:calc(16px * var(--hs));width:calc(270px * var(--hs));padding:0;border:0;background:none}.minimap-wrap{position:relative;width:100%;aspect-ratio:1;padding:calc(5px * var(--hs));background:#0004;box-shadow:0 0 2px #fff8}#map{width:100%;height:100%}.map-frame{position:absolute;inset:0;width:100%;height:100%;opacity:.6;pointer-events:none}.match-counts{display:flex;justify-content:center;align-items:center;gap:calc(9px * var(--hs));height:calc(34px * var(--hs));background:linear-gradient(90deg,transparent,#35213d80,transparent);font-size:calc(18px * var(--hs))}#match .match-counts span{font-size:inherit;font-weight:inherit}.match-counts img{width:calc(23px * var(--hs));height:calc(23px * var(--hs));object-fit:contain}.storm-clock{font-size:calc(25px * var(--hs))!important;color:#d17aff}.match-counts #storm{color:white;margin-right:calc(10px * var(--hs))}#resources{position:absolute;right:calc(25px * var(--hs));top:calc(365px * var(--hs));display:flex;gap:calc(30px * var(--hs));font-size:calc(20px * var(--hs))}#resources>div{width:calc(52px * var(--hs));text-align:center}#resources img{display:block;width:calc(48px * var(--hs));height:calc(48px * var(--hs));object-fit:contain;filter:drop-shadow(1px 2px 1px #0007)}#resources b{font-weight:inherit}#crosshair{width:calc(33px * var(--hs));height:calc(33px * var(--hs))}#crosshair i{opacity:.9}body.melee #crosshair{width:calc(20px * var(--hs));height:calc(20px * var(--hs));border:1px solid #fff9;border-radius:50%;box-shadow:0 0 1px #333}body.melee #crosshair i{display:none}#vitals{left:45%;bottom:calc(100px * var(--hs));width:calc(420px * var(--hs));transform:translateX(-50%)}.vital-row{display:flex;gap:calc(5px * var(--hs));align-items:center;height:calc(26px * var(--hs));margin-top:calc(4px * var(--hs))}.vital-row>img{width:calc(24px * var(--hs));height:calc(24px * var(--hs));object-fit:contain;filter:drop-shadow(1px 2px 1px #0008)}.vital-track{height:calc(24px * var(--hs));position:relative;flex:1;background:#08142688;border:1px solid #ffffff30;transform:skew(-6deg);box-shadow:0 1px 1px #0005}.vital-track>i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#69b9dc,#99d8ec)}.health .vital-track>i{background:linear-gradient(90deg,#54ba2d,#8ce73c)}.vital-track>span{position:absolute;inset:0;display:flex;align-items:center;gap:calc(14px * var(--hs));font-size:calc(16px * var(--hs));padding-left:calc(14px * var(--hs));transform:skew(6deg)}.vital-track small{font:inherit;opacity:.6}.vital-track strong{font:inherit}#loadout{right:calc(18px * var(--hs));bottom:calc(25px * var(--hs));text-align:right}#ammo{position:absolute;right:calc(280px * var(--hs));bottom:calc(170px * var(--hs));font-family:Burbank,Noto,sans-serif;font-size:calc(48px * var(--hs));white-space:nowrap;font-weight:400;display:flex;align-items:center;gap:calc(12px * var(--hs))}#ammo small{font:inherit;font-size:calc(30px * var(--hs));color:white}#ammo i{height:calc(30px * var(--hs));width:1px;background:#fff7;transform:rotate(12deg)}#ammo img{height:calc(24px * var(--hs));width:calc(24px * var(--hs));object-fit:contain}#ammo .reload-label{font-size:calc(24px * var(--hs))}#builds{display:flex;justify-content:flex-end;gap:calc(8px * var(--hs));margin-bottom:calc(15px * var(--hs));height:calc(62px * var(--hs))}#builds button,.trap-slot{position:relative;display:grid;place-items:center;background:transparent;border:0;color:white;width:calc(62px * var(--hs));height:100%;padding:0;pointer-events:auto}#builds img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(1px 2px 2px #0006)}kbd{font-family:Noto,Arial,sans-serif;font-size:calc(13px * var(--hs));font-weight:700;background:#29323c70;border:1px solid #ffffff75;border-radius:2px;min-width:calc(18px * var(--hs));height:calc(19px * var(--hs));line-height:calc(17px * var(--hs));text-align:center;padding:0 2px;box-shadow:0 1px 1px #0007}#builds kbd{position:absolute;top:calc(-8px * var(--hs));left:50%;transform:translateX(-50%)}.trap-slot{border:1px solid #dbe7ed88;font-size:calc(50px * var(--hs));background:#45729c30;opacity:.65}#slots{display:flex;gap:calc(4px * var(--hs));align-items:flex-end}#slots button{position:relative;width:calc(80px * var(--hs));height:calc(80px * var(--hs));padding:calc(3px * var(--hs));border:calc(2px * var(--hs)) solid #e2ebf0bb;background:linear-gradient(145deg,#7c8e98bb,#454f5bbb);border-radius:0;pointer-events:auto;box-shadow:inset 0 0 0 1px #0004;transition:transform .1s}#slots button:first-child{margin-right:calc(9px * var(--hs))}#slots button img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(2px 2px 2px #0006)}#slots .pickaxe,#slots .rare{background:linear-gradient(145deg,#41a9efee,#25649edd)}#slots .uncommon{background:linear-gradient(145deg,#7ac35bbb,#3d7942bb)}#slots .empty{background:#283b5040;border-color:#c1d5e88a}#slots .selected{transform:translateY(calc(-7px * var(--hs)));border-color:white;box-shadow:0 0 0 calc(2px * var(--hs)) #ffffffb0,inset 0 0 0 1px #fff7;color:white}#slots kbd{position:absolute;top:calc(-25px * var(--hs));left:50%;transform:translateX(-50%)}.slot-ammo{position:absolute;right:calc(5px * var(--hs));bottom:calc(2px * var(--hs));font-size:calc(15px * var(--hs));line-height:1}.bandage-icon{display:block;font-size:calc(43px * var(--hs));line-height:1;background:#ddd;color:#cc3c35;border-radius:12px;transform:rotate(-25deg);padding:4px;margin:6px}#toast{top:66%;font-family:Burbank,Noto,sans-serif;font-size:calc(28px * var(--hs));letter-spacing:1px}#context-controls{position:absolute;right:calc(22px * var(--hs));bottom:calc(205px * var(--hs));display:flex;flex-direction:column;gap:calc(5px * var(--hs));font-size:calc(11px * var(--hs));opacity:.85}#context-controls kbd{display:inline-block;margin-right:5px}#hud footer{display:none}#damage{box-shadow:inset 0 0 80px #f22}body.touch #vitals{left:25px;transform:none;bottom:20px;width:170px}body.touch #loadout{right:15px;bottom:25px}body.touch #builds{display:none}body.touch #context-controls{display:none}body.touch #resources{top:190px;gap:10px}body.touch #match{width:130px;top:10px;right:10px}body.touch #ammo{right:0;bottom:65px}body.touch #slots button{width:36px;height:36px}body.touch #slots kbd{display:none}body.touch #squad{display:none}

.panel h1,.panel button,.eyebrow,.tags{font-family:Burbank,Noto,sans-serif}.panel h1{letter-spacing:1px}.panel #play{background:#f5df36;color:#172952;transform:skew(-4deg);border-radius:0}.panel{border-radius:0;border-color:#8cbcff66;background:linear-gradient(145deg,#183a70ef,#102548ef)}

#interaction{position:absolute;left:54%;top:48%;display:flex;align-items:center;gap:12px;font-family:Noto,Arial,sans-serif}.interact-key{display:flex;align-items:center;gap:9px;font-size:14px}.interact-key kbd{font-size:18px;height:27px;line-height:24px;min-width:27px;background:#19283cd9}.item-card{position:relative;min-width:210px;padding:10px 18px;background:linear-gradient(100deg,#18222be8,#18222b99);border-top:4px solid var(--loot-color)}.item-card strong{display:block;font-family:Burbank;font-size:25px;letter-spacing:.5px}.item-card small{display:block;margin-top:4px;font-size:11px}.item-card>i{display:block;height:3px;background:#fff;position:absolute;left:0;bottom:0}#useProgress{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);display:grid;place-items:center;width:70px;height:70px;border-radius:50%;font-size:25px;background:radial-gradient(closest-side,#142234dd 82%,transparent 84%),conic-gradient(white var(--use),#ffffff35 0)}#slots .bandage-icon{background:none;padding:0;margin:0;transform:none;border-radius:0}body.playing #game{cursor:none}

#hit{font-family:Arial,sans-serif;font-weight:400;font-size:32px;line-height:1;text-shadow:0 1px 3px #183347;pointer-events:none} .damage-number{position:absolute;z-index:8;pointer-events:none;font-family:Burbank,Impact,sans-serif;font-size:clamp(24px,3vw,44px);font-weight:900;font-style:italic;color:#fff;-webkit-text-stroke:1px #193443;text-shadow:2px 3px 0 #193443;will-change:transform,top,opacity}.damage-number.shield-damage{color:#65d9ff}