/* Gameplay follows the supplied battle-royale references: an open center,
   compact edge information, and color reserved for health, loot and events. */
#hud{--hud-edge:clamp(14px,2.4vw,34px);--hud-gold:#ffe343;color:#fff;font-family:var(--font-reading);font-variant-numeric:tabular-nums;text-shadow:0 1px 3px #000c}
#hud .topline{left:var(--hud-edge);right:auto;top:var(--hud-edge);max-width:26vw}
#hud #phase{padding:6px 9px;background:#11202b88;border:0;border-radius:2px;box-shadow:none;font:800 16px/1.2 var(--font-ui);letter-spacing:.015em}
.tactical-panel{position:absolute;right:var(--hud-edge);top:var(--hud-edge);width:190px;background:none;border:0;box-shadow:none;border-radius:0}
.map-frame{position:relative;padding:0;background:none}
#map-location{position:absolute;left:5px;right:5px;bottom:5px;text-align:center;font:800 clamp(12px,1.2vw,17px)/1.05 var(--font-ui);text-transform:uppercase;text-shadow:0 1px 2px #000,1px 0 2px #000,-1px 0 2px #000,0 -1px 2px #000;pointer-events:none}
#hud #map{position:relative;display:block;inset:auto;width:100%;height:auto;aspect-ratio:1;border:1px solid #fff9;border-radius:0;box-shadow:0 2px 5px #0004;background:#162b3d}
.match-count{display:flex;align-items:center;gap:10px;padding:7px 0 4px}
.match-symbol{display:none}
#hud #remaining{position:static;flex:1;min-width:0;padding:0;background:none;border-radius:0;font:800 17px/1.2 var(--font-ui)}
#hud #eliminations{white-space:nowrap;font:800 16px/1.2 var(--font-ui)}
#hud #storm{position:static;display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0;padding:4px 0;background:none;border:0;border-radius:0;color:#fff;font:14px/1.3 var(--font-reading)}
#storm-clock{font:800 19px/1.1 var(--font-ui);white-space:nowrap}
#storm-radius{display:none}
#hud #storm[data-phase=closing]{color:#e3baff}
#hud #storm[data-outside=true]{color:#ff9da7}
.compass{position:absolute;top:var(--hud-edge);left:50%;transform:translateX(-50%);width:390px;height:56px;overflow:hidden;text-align:center;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);background:none;text-shadow:0 2px 3px #0009}
#compass-tape{position:absolute;left:50%;top:0}
#compass-tape span{position:absolute;left:-18px;width:36px;padding-top:12px;font:800 17px/1 var(--font-ui);color:#e4eaf2}
#compass-tape span:before{content:'';position:absolute;width:1px;height:5px;top:1px;left:50%;background:#fff9}
#compass-tape span[data-major=true]{font-size:22px;color:#fff}
#heading{position:absolute;top:37px;left:50%;transform:translateX(-50%);font:800 13px/1 var(--font-ui);padding:0;background:none}
#heading:before{content:'';position:absolute;top:-36px;left:calc(50% - 3px);border-left:3px solid transparent;border-right:3px solid transparent;border-top:5px solid #fff}
#hud .vitals{left:var(--hud-edge);bottom:var(--hud-edge);width:290px;max-width:38vw;padding:0;display:grid;grid-template-columns:40px 1fr;align-items:end;gap:9px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.fighter-portrait{height:52px;position:relative;overflow:hidden;background:none;border:0}
#fighter-hud-portrait{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 2px 2px #0008)}
#hud .hud-player-tag{display:none}
.fighter-status{min-width:0;padding:0;display:grid;gap:5px}
#hud .fighter-hud{font:800 17px/1.2 var(--font-ui);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hud .vitals label{display:grid;grid-template-columns:1fr auto;gap:3px;margin:0;font:12px/1 var(--font-reading);letter-spacing:0;color:#fff;text-transform:none}
#hud .vitals label span{font:800 14px/1 var(--font-ui);float:none;color:#fff}
#hud .vitals meter{grid-column:1/-1;width:100%;height:14px;display:block;filter:drop-shadow(0 1px 1px #0005)}
#hud .vitals meter::-webkit-meter-bar{border:0;border-radius:0;background:#142128ad;box-shadow:none}
#hud .vitals meter::-webkit-meter-optimum-value{background:#61d833;border:0;border-radius:0;transition:width 120ms ease-out}
#hud #shield::-webkit-meter-optimum-value{background:#36b4ee}
#hud .vitals meter::-moz-meter-bar{background:#61d833}
#hud #shield::-moz-meter-bar{background:#36b4ee}
#hud[data-critical=true] #hp-number{color:#ff9da7}
#hud[data-critical=true] #hp::-webkit-meter-optimum-value{background:#f25966}
#hud[data-critical=true] #hp::-moz-meter-bar{background:#f25966}
#hud .equipment{right:var(--hud-edge);bottom:var(--hud-edge);padding:0;background:none;text-align:right;max-width:48vw}
.ammo-panel{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin:0 0 10px;padding:0;background:none;border:0;box-shadow:none}
#hud #weapon{order:2;font:800 16px/1.15 var(--font-ui);letter-spacing:.025em;text-transform:uppercase;color:#fff}
#hud #ammo{order:1;font:800 clamp(30px,2.8vw,42px)/1 var(--font-ui);letter-spacing:0;margin:0;white-space:nowrap;color:#fff}
#reload-state{order:3;font:14px/1.3 var(--font-reading);color:var(--hud-gold)}
#reload-state:empty{display:none}
#hud[data-ammo=low] #ammo{color:#ffe194}
#hud[data-ammo=empty] #ammo,#hud[data-ammo=empty] #reload-state{color:#ff9da7}
#hud[data-armed=false] #ammo{font:14px/1.4 var(--font-reading);white-space:normal;max-width:22ch}
#weapon-slots{display:flex;gap:5px;justify-content:flex-end;padding-top:4px}
.weapon-slot{--slot-color:#347fb4;position:relative;width:74px;height:68px;padding:5px;border:1px solid #ffffff4d;border-radius:0;background:linear-gradient(155deg,color-mix(in srgb,var(--slot-color),white 16%),var(--slot-color));box-shadow:0 2px 3px #0004;transition:transform 120ms ease-out}
.weapon-slot[data-tier='2']{--slot-color:#8744b9}.weapon-slot[data-tier='3']{--slot-color:#b8822e}
.weapon-slot[data-empty=true]{background:#16212a66;border-color:#ffffff28;box-shadow:none}
.weapon-slot[data-selected=true]{outline:2px solid white;outline-offset:1px;transform:translateY(-4px)}
.weapon-slot kbd{position:absolute;left:5px;top:4px;font:800 12px/1 var(--font-ui);color:white;padding:0;background:none}
.weapon-slot svg{display:block;width:100%;height:42px;fill:currentColor;color:#eef5fa;filter:drop-shadow(0 2px 1px #0005);transform:rotate(-12deg)}
#hud .weapon-slot span{display:block;margin:0;font:800 15px/1 var(--font-ui);text-align:right;color:#fff}
#hud #supplies{font:12px/1.35 var(--font-reading);color:#fff;margin:9px 0 0;padding:0}
#hud .equipment small{font:12px/1.35 var(--font-reading);color:#e2e8ef;margin-top:3px}
#hud #notice{top:19%;bottom:auto;max-width:min(450px,70vw);margin:0;padding:7px 12px;font:14px/1.4 var(--font-reading);background:#122332b8;border:0;border-radius:2px;box-shadow:none}
#hud #interact-prompt{font:800 19px/1.25 var(--font-ui);padding:10px 14px;background:#142334cf;border:0;border-radius:2px;box-shadow:none}
#hud .descent-speed{right:var(--hud-edge);top:44%;width:132px;padding:7px 0;background:none;border:0;border-radius:0;text-align:right}
#hud .descent-speed strong{font:800 28px/1.1 var(--font-ui);letter-spacing:0}
#hud .descent-speed-mode{font:800 14px/1.2 var(--font-ui);letter-spacing:.04em;color:#fff}
#hud .descent-speed-detail{font:12px/1.3 var(--font-reading);color:#fff}
#hud .descent-speed-track{background:#ffffff35;height:2px;margin-top:6px}
#hud .descent-speed-track i{background:#fff}
#hud .vitals,#hud .equipment,#hud .tactical-panel,#hud .compass,#hud .topline{z-index:4}
@media(max-width:800px){#hud{--hud-edge:14px}.tactical-panel{width:146px}.compass{width:240px}#hud .vitals{width:254px;grid-template-columns:32px 1fr}#hud .equipment small{display:none}#hud #phase{font-size:14px}.weapon-slot{width:62px;height:61px}.weapon-slot svg{height:35px}#hud #remaining,#hud #eliminations{font-size:15px}#hud #storm{font-size:12px}#hud .descent-speed{width:114px}}
@media(max-width:560px){#hud{--hud-edge:10px}.tactical-panel{width:112px}.compass{width:130px;left:47%}#compass-tape span{font-size:14px}#compass-tape span[data-major=true]{font-size:18px}#hud .topline{max-width:26vw}#hud #phase{font-size:13px;padding:5px}#hud #remaining,#hud #eliminations{font-size:13px}.match-count{gap:4px;padding-top:5px}#hud #storm{font-size:11px;gap:4px}#storm-clock{font-size:16px}#hud .vitals{max-width:42vw;grid-template-columns:1fr}.fighter-portrait{display:none}#hud .fighter-hud{font-size:15px}#hud .vitals label{font-size:11px}#hud .vitals meter{height:12px}.weapon-slot{width:43px;height:50px;padding:3px}.weapon-slot svg{height:31px}#hud .weapon-slot span{font-size:13px}.weapon-slot kbd{font-size:10px;left:3px;top:3px}#hud #weapon{font-size:13px;max-width:20ch}#hud #supplies{font-size:11px;max-width:23ch}#hud .descent-speed{width:105px}#hud .descent-speed strong{font-size:24px}#hud .descent-speed-detail{font-size:11px}#hud #notice{font-size:12px;top:21%}}
@media(max-height:560px) and (min-width:561px){#hud{--hud-edge:12px}.tactical-panel{width:118px}.compass{height:56px;width:250px}#hud #storm{font-size:11px}.match-count{padding:4px 0}#hud #remaining,#hud #eliminations{font-size:13px}#storm-clock{font-size:15px}#hud .vitals{width:252px;grid-template-columns:32px 1fr}#hud .equipment small{display:none}.weapon-slot{width:55px;height:52px}.weapon-slot svg{height:29px}.ammo-panel{margin-bottom:5px}#hud #ammo{font-size:31px}#hud #weapon{font-size:14px}#hud .descent-speed{left:var(--hud-edge);right:auto;top:78px;text-align:left}#hud #notice{top:17%;max-width:48vw}}
@media(prefers-reduced-motion:reduce){.weapon-slot,#hud .vitals meter::-webkit-meter-optimum-value{transition:none}}

#hud #hit-feedback{width:38px;height:38px;padding-top:44px;font-size:21px;text-shadow:0 2px 3px #000,0 0 7px #000;filter:drop-shadow(0 0 2px #000)}
#hud #hit-feedback::before,#hud #hit-feedback::after{background:linear-gradient(currentColor,currentColor) left center/12px 3px no-repeat,linear-gradient(currentColor,currentColor) right center/12px 3px no-repeat}
#hud #hit-feedback[data-kind=elimination]{color:#ffdf72;font-size:24px}
#hud #hit-feedback[data-kind=elimination]::before,#hud #hit-feedback[data-kind=elimination]::after{background-size:14px 4px}
#hud #hit-feedback[data-kind=broken]{color:#bcf5ff}
#incoming-hit{--impact-color:#ff6f7d;position:absolute;inset:0;z-index:7;pointer-events:none;box-shadow:inset 0 0 38px #d91b322b}
#incoming-hit[data-kind=shield],#incoming-hit[data-kind=broken]{--impact-color:#86e6ff;box-shadow:inset 0 0 30px #40ceff20}
#incoming-hit[data-kind=storm]{--impact-color:#d4a0ff;box-shadow:inset 0 0 38px #9745dd2b}
.incoming-bearing{position:absolute;left:50%;top:50%;width:210px;height:210px;translate:-50% -50%;transform:rotate(var(--incoming-bearing,0rad));border-radius:50%;background:conic-gradient(from -28deg,var(--impact-color) 0deg 56deg,transparent 56deg);mask:radial-gradient(transparent 66%,#000 67%,#000 71%,transparent 72%);filter:drop-shadow(0 1px 2px #000)}
.incoming-bearing i{position:absolute;left:calc(50% - 8px);top:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid var(--impact-color)}
#incoming-hit[data-directional=false] .incoming-bearing{display:none}
.incoming-label{position:absolute;left:50%;top:calc(50% + 119px);translate:-50% 0;padding:5px 10px;background:#161b26ed;border:1px solid var(--impact-color);color:var(--impact-color);font:800 11px/1.25 SkybreakBody,sans-serif;white-space:nowrap;text-shadow:0 1px 2px #000;border-radius:2px}
#hud .vitals[data-impact=shield]{outline:2px solid #86e6ff;outline-offset:2px}
#hud .vitals[data-impact=health]{outline:2px solid #ff6f7d;outline-offset:2px}
@media(max-height:450px){.incoming-bearing{width:150px;height:150px}.incoming-label{top:calc(50% + 82px);font-size:10px}}

/* Reticle radius is the actual weapon cone projected through the live camera. */
#hud #crosshair{--reticle-gap:8px;width:4px;height:4px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);filter:drop-shadow(0 1px 1px #000)}
#hud[data-aim=true] #crosshair{transform:translate(-50%,-50%)}
#hud #crosshair::before{left:1px;top:calc(-1 * var(--reticle-gap) - 6px);width:2px;height:6px;background:white;box-shadow:0 calc(2 * var(--reticle-gap) + 10px) white}
#hud #crosshair::after{left:calc(-1 * var(--reticle-gap) - 6px);top:1px;width:6px;height:2px;background:white;box-shadow:calc(2 * var(--reticle-gap) + 10px) 0 white}
#hud #crosshair[data-weapon=pistol]::before,#hud #crosshair[data-weapon=shotgun]::before{width:calc(2 * var(--reticle-gap) + 4px);height:calc(2 * var(--reticle-gap) + 4px);left:calc(-1 * var(--reticle-gap));top:calc(-1 * var(--reticle-gap));background:transparent;border:1.5px solid #fff;border-radius:50%;box-shadow:none}
#hud #crosshair[data-weapon=pistol]::after{display:none}
#hud #crosshair[data-weapon=shotgun]{background:transparent}
#hud #crosshair[data-weapon=shotgun]::before{border-radius:4px;border-width:2px}
#hud #crosshair[data-weapon=shotgun]::after{display:none}
#hud #crosshair[data-weapon=sniper]::before,#hud #crosshair[data-weapon=sniper]::after{opacity:.75}
#damage-numbers{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}
.damage-number{position:absolute;left:0;top:0;color:#fff;font-weight:900;font-size:28px;line-height:1;letter-spacing:-.025em;text-shadow:0 2px 0 #152132,1px 0 #152132,-1px 0 #152132,0 3px 7px #0009;white-space:nowrap}
.damage-number[data-kind=shield],.damage-number[data-kind=broken]{color:#86e6ff}
.damage-number[data-kind=broken]::before{content:'SHIELD BROKEN';display:block;position:absolute;bottom:calc(100% + 4px);left:50%;translate:-50% 0;font-size:11px;letter-spacing:.03em;color:#bcefff}
#elimination-confirm{position:absolute;left:50%;top:calc(50% + 170px);translate:-50% 0;z-index:8;display:flex;align-items:baseline;justify-content:center;gap:8px;max-width:80vw;font-weight:800;line-height:1.2;text-shadow:0 2px 3px #000,0 0 6px #000b;pointer-events:none}
#elimination-confirm>span{font-size:14px;letter-spacing:.08em;color:#fff}
#elimination-confirm>strong{font-size:21px;color:#ff6977;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-height:500px){#elimination-confirm{top:calc(50% + 115px)}.damage-number{font-size:24px}}
#hud #crosshair[data-weapon=sniper]::before{width:1px;height:11px;left:1.5px;top:calc(-1 * var(--reticle-gap) - 11px);box-shadow:0 calc(2 * var(--reticle-gap) + 15px) white}
#hud #crosshair[data-weapon=sniper]::after{width:11px;height:1px;left:calc(-1 * var(--reticle-gap) - 11px);top:1.5px;box-shadow:calc(2 * var(--reticle-gap) + 15px) 0 white}

#elimination-feed{position:absolute;left:2.4%;bottom:24%;display:flex;flex-direction:column;align-items:flex-start;gap:3px;max-width:min(480px,46vw);margin:0;padding:0;list-style:none;pointer-events:none;font:600 clamp(12px,1.05vw,16px)/1.4 var(--font-reading);text-shadow:0 1px 3px #000}
#elimination-feed li{padding:2px 6px;background:linear-gradient(90deg,#10223888,#10223822);color:#f4f8ff;overflow-wrap:anywhere}
#elimination-feed .feed-attacker[data-local=true]{color:#75ed9b}#elimination-feed .feed-victim{color:#ff7972}
@media(max-width:680px){#elimination-feed{max-width:60vw;bottom:28%;font-size:12px}}