/* Blender-rendered metal frames over live, accessible HUD content. */
#hud{--pale:#e8e2d4;position:fixed;inset:0;z-index:2;pointer-events:none;color:var(--pale);font:600 14px Georgia,'Times New Roman',serif;text-shadow:0 2px 3px #000}
:is(.action-bar,.ammo-frame,.ammo-title,.unit-name,.map-title,#waveAnnouncement,#zombieCount,#nextWaveCountdown,#bossFrame){border:1px solid transparent;border-image:url('./assets/ui/panel-frame.webp') 72 fill / 15px / 0 stretch;background:none;box-shadow:none;border-radius:0}
.wave-frame{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:clamp(300px,32vw,440px);text-align:center;padding-top:28px;isolation:isolate}
.frame-flourish{display:none}
#waveAnnouncement{position:absolute;top:0;left:50%;transform:translateX(-50%);min-width:136px;padding:8px 20px;color:#f5ead5;font-size:19px;line-height:1.1;white-space:nowrap;z-index:2}
#zombieCount{position:relative;padding:17px 23px 15px;color:#eee4cf;font-size:clamp(18px,1.5vw,24px);line-height:1.1;white-space:nowrap;letter-spacing:.2px}
#nextWaveCountdown{display:inline-block;margin-top:6px;padding:9px 18px;color:#d5d8d9;font:13px/1.2 Georgia,serif;border-image-width:11px}
#hud .minimap-frame{position:absolute;top:17px;right:20px;width:clamp(140px,14vw,200px);margin:0;padding:0;display:block}
.map-title{text-align:center;margin:0 7px 5px;padding:8px 9px;color:#e8ddc7;font-size:14px;letter-spacing:.3px;border-image-width:12px}
.map-rim{position:relative;aspect-ratio:1;padding:8.5%;border:0;background:none;filter:drop-shadow(0 3px 5px #000b)}
.map-rim:after,.portrait-rim:after{content:'';position:absolute;inset:0;background:url('./assets/ui/circular-frame.webp') center/100% 100% no-repeat;pointer-events:none;z-index:3}
#minimap{position:static;inset:auto;display:block;width:100%;height:100%;border:0;border-radius:50%;background:#182027}
.hud-bottom{position:absolute;bottom:20px;left:22px;right:22px;display:grid;grid-template-columns:minmax(235px,1fr) auto minmax(145px,1fr);align-items:end;gap:20px}
.player-frame{position:relative;width:clamp(245px,23vw,340px);height:108px;align-self:end}
.portrait-rim{position:absolute;z-index:2;left:0;bottom:0;width:108px;height:108px;border:0;background:none;filter:drop-shadow(0 3px 5px #000b)}
.portrait-window{position:absolute;inset:8.5%;overflow:hidden;border-radius:50%;background:radial-gradient(#493b2e,#121920)}
.portrait-window img{display:block;object-fit:cover;width:150%;height:150%;max-width:none;transform:translate(-16.67%,-21%);filter:contrast(1.06)}
.unit-details{position:absolute;left:86px;right:0;bottom:22px}
.unit-name{height:33px;display:flex;align-items:center;justify-content:center;padding:0 12px 0 20px;color:#eee0c4;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-image-width:11px}
.health-track{position:relative;height:30px;margin-top:3px;padding:5px 6px;background:#241415;overflow:hidden;border:0}
.health-track:after,#bossHealthTrack:after{content:'';position:absolute;inset:0;border:1px solid transparent;border-image:url('./assets/ui/bar-bezel.webp') 72 fill / 11px / 0 stretch;z-index:3;pointer-events:none}
.health-interior{position:absolute;inset:5px 6px;overflow:hidden}
#healthFill{position:absolute;top:0;bottom:0;left:0;width:100%;max-width:100%;background:linear-gradient(#80d94c,#369e21 35%,#156b13 70%,#3f9e27);box-shadow:inset 0 2px 3px #c9ffa84d;transition:width .15s linear}
#health{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-left:10px;color:#fbffed;font:700 15px/1 Georgia,serif;letter-spacing:.3px;text-shadow:0 1px 3px #000;z-index:4}
.action-bar{display:flex;gap:10px;padding:17px 21px 13px;position:relative;border-image-source:url('./assets/ui/action-frame.webp');border-image-width:19px;filter:drop-shadow(0 4px 5px #000a)}
.action-bar:before,.action-bar:after{display:none}
.ability{width:66px;text-align:center;position:relative}
.ability-icon{position:relative;width:64px;height:64px;border:0;overflow:hidden;border-radius:5px;background:#111a21}
.ability-icon svg{position:absolute;inset:7%;display:block;width:86%;height:86%;border-radius:4px}
.ability-icon:after{content:'';position:absolute;inset:0;background:url('./assets/ui/ability-frame.webp') center/100% 100% no-repeat;z-index:4;pointer-events:none}
.ability kbd{position:absolute;top:7px;right:7px;padding:2px 3px;border-radius:2px;background:#080c11df;color:#f5dfad;font:700 10px/1 Georgia,serif;z-index:5}
.slot-number{position:absolute;top:8px;left:8px;color:#d1c5ac;font:10px/1 Georgia,serif;text-shadow:0 1px 2px #000;z-index:5}
.ability-label{display:block;margin-top:6px;color:#e4ded0;font:12px/1.15 Georgia,serif;white-space:nowrap}
.ability.empty{opacity:.64}.ability.empty .ability-icon{background:repeating-linear-gradient(135deg,#171e24,#171e24 4px,#1b242b 4px,#1b242b 6px)}.ability.empty .ability-label{color:#b1b6b9}
.cooldown-shade{position:absolute;bottom:7%;left:7%;right:7%;height:min(86%,var(--cooldown,0%));background:#07101fbd;z-index:2}
#frostTrapStatus{position:absolute;left:0;right:0;bottom:11px;color:#e5faff;font:700 15px/1 Georgia,serif;text-shadow:0 2px 3px #000;z-index:5}
#frostTrapStatus[data-state='ready']{font-size:10px;bottom:9px;color:#cbf1ff}
.ammo-frame{justify-self:end;width:150px;text-align:center;position:relative;padding:13px 15px 11px;border-image-width:17px;filter:drop-shadow(0 3px 4px #000a)}
.ammo-title{position:absolute;left:18px;right:18px;top:-28px;padding:8px 0;color:#eee0c4;font:14px/1 Georgia,serif;border-image-width:11px}
.ammo-content{display:flex;align-items:center;justify-content:space-between;gap:8px}.ammo-content svg{width:29px;height:38px}
#ammo{position:static;inset:auto;color:#f5eedf;font:700 42px/1 Georgia,serif;text-shadow:0 2px 3px #000}
#reloadStatus{font:10px/1.2 Georgia,serif;color:#c7c8c4;margin-top:5px}
#pickupNotice{position:absolute;top:61%;left:0;right:0;text-align:center;font-size:28px;color:#a4f282;letter-spacing:.6px;text-shadow:0 2px 4px #000}
#hud .keyline{display:none}
#bossFrame{position:absolute;top:135px;left:50%;transform:translateX(-50%);width:min(380px,50vw);padding:10px 17px 12px;text-align:center;color:#f2dfb8;border-image-width:18px;filter:drop-shadow(0 3px 6px #0009)}
#bossFrame[hidden]{display:none}.boss-name{font:bold 19px Georgia,serif;margin-bottom:4px}
#bossHealthTrack{position:relative;height:23px;background:#220e0a;overflow:hidden;border:0;padding:4px 5px}
#bossHealthFill{height:100%;background:linear-gradient(#e65a2d,#9b2413);transition:width .1s}
#bossHealth{position:absolute;inset:0;text-align:center;color:#fff;font:600 12px/23px Arial,sans-serif;text-shadow:0 1px 3px #000;z-index:4}
/* Reuse the rendered steel bezel for functional menu buttons; retain the black menu. */
#menu :is(.primary,.boss-test-button){border:1px solid transparent;border-image:url('./assets/ui/panel-frame.webp') 72 fill / 16px / 0 stretch;background:none;border-radius:0;color:#f1e6d1;box-shadow:none}
#menu :is(.primary,.boss-test-button):hover{background:none;filter:brightness(1.24);box-shadow:none}
#menu .boss-test-button{color:#c5c7c9}#menu :is(.primary,.boss-test-button):focus-visible{outline:2px solid #c6d5df;outline-offset:4px}
@media(max-width:1100px){.hud-bottom{left:14px;right:14px;gap:12px;grid-template-columns:225px auto 115px}.player-frame{width:225px;height:90px}.portrait-rim{width:88px;height:88px}.unit-details{left:70px;bottom:17px}.unit-name{font-size:13px;height:29px}.health-track{height:27px}#health{font-size:13px}.ability{width:54px}.ability-icon{width:52px;height:52px}.action-bar{gap:7px;padding:14px 16px 12px;border-image-width:17px}.ability-label{font-size:10px}.ability kbd{font-size:9px;top:6px;right:6px}.slot-number{top:7px;left:7px}#frostTrapStatus{font-size:13px;bottom:10px}#frostTrapStatus[data-state='ready']{font-size:8px;bottom:8px}.ammo-frame{width:115px;padding:12px}.ammo-content svg{width:23px}#ammo{font-size:34px}.ammo-title{font-size:13px;left:10px;right:10px}}
@media(max-width:800px){#hud .minimap-frame{width:130px;right:12px;top:12px}.map-title{font-size:12px}.wave-frame{left:12px;transform:none;top:12px;width:280px}#zombieCount{font-size:18px;padding-inline:14px}#waveAnnouncement{font-size:17px}.hud-bottom{grid-template-columns:1fr 1fr;gap:12px;bottom:14px}.action-bar{grid-column:1/3;grid-row:2;justify-self:center}.player-frame{grid-column:1;grid-row:1}.ammo-frame{grid-column:2;grid-row:1}.ability{width:53px}.ability-icon{width:51px;height:51px}}
@media(max-width:480px){.wave-frame{width:215px}#zombieCount{font-size:14px;padding-inline:10px}#waveAnnouncement{font-size:15px;min-width:115px}#hud .minimap-frame{width:105px;right:8px}.map-title{font-size:10px}.player-frame{width:208px}.unit-name{font-size:12px}.hud-bottom{left:10px;right:10px}.ability{width:49px}.ability-icon{width:47px;height:47px}.action-bar{gap:5px;padding-inline:14px}}
@media(max-height:600px) and (min-width:801px){.hud-bottom{bottom:12px}.action-bar{padding-block:12px}.ability-icon{width:48px;height:48px}.ability{width:50px}.portrait-rim{height:78px;width:78px}.player-frame{height:80px}.unit-details{left:63px;bottom:12px}#hud .minimap-frame{width:130px}.wave-frame{transform:translateX(-50%) scale(.9);transform-origin:top center}}
@media(max-height:650px){#bossFrame{top:108px;padding:11px 15px}.boss-name{font-size:16px;margin-bottom:4px}}

/* Keep the complete health bezel behind the portrait stacking context. */
.player-frame{isolation:isolate}.unit-details{z-index:1}.portrait-rim{z-index:2}
.ability-icon:after{background-image:url('./assets/ui/silver-button.webp')}
.ability-icon{transition:transform .07s ease,filter .07s ease;transform-origin:center}
.ability.is-pressed .ability-icon{transform:translateY(2px) scale(.96);filter:brightness(.86)}
.ability.is-pressed .ability-icon:after{background-image:url('./assets/ui/silver-button-pressed.webp')}
.ability-icon img{position:absolute;inset:9%;display:block;width:82%;height:82%;object-fit:cover;border-radius:4px}
#warstompStatus{position:absolute;left:0;right:0;bottom:11px;color:#fff0bd;font:700 15px/1 Georgia,serif;text-shadow:0 2px 3px #000;z-index:5}
#warstompStatus[data-state='ready']{font-size:10px;bottom:9px}
#warstompStatus[data-state='casting']{font-size:10px}
@media(max-width:1100px){#warstompStatus{font-size:13px;bottom:10px}#warstompStatus[data-state='ready']{font-size:8px;bottom:8px}}
@media(prefers-reduced-motion:reduce){.ability-icon{transition:none}}

.status-buff{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%);width:44px;height:44px;border:2px solid #a7afb3;border-radius:4px;background:#150b08;box-shadow:inset 0 0 0 1px #383e40,0 2px 5px #000b;overflow:hidden}.status-buff img{display:block;width:100%;height:100%;object-fit:cover}.status-buff span{position:absolute;left:0;right:0;bottom:2px;color:#fff4d5;text-align:center;font:700 12px/1 Georgia,serif;text-shadow:0 1px 3px #000,1px 0 2px #000,-1px 0 2px #000}@media(max-width:800px){.status-buff{width:38px;height:38px;bottom:calc(100% + 8px)}}
#multishotStatus{position:absolute;left:0;right:0;bottom:11px;color:#fff0bd;font:700 15px/1 Georgia,serif;text-shadow:0 2px 3px #000;z-index:5}
#multishotStatus[data-state="ready"]{font-size:10px;bottom:9px}
#multishotStatus[data-state="active"]{color:#ffeb88}
#multishotAbility{cursor:pointer;pointer-events:auto}
#multishotAbility:focus-visible{outline:2px solid #ffdc78;outline-offset:3px}
#multishotAbility.is-active .ability-icon{box-shadow:0 0 14px #ffc345}
#multishotAbility.is-active .cooldown-shade{background:#78520a55}
@media(max-width:1100px){#multishotStatus{font-size:13px;bottom:10px}#multishotStatus[data-state="ready"]{font-size:8px;bottom:8px}}


/* The physical scope supplies the centred crosshair during Multi-shot. */
body.multishot-scoped #crosshair{opacity:0}

.ability.is-locked .ability-icon>*{visibility:hidden}
.ability.is-locked{pointer-events:none}
#abilityUnlockNotice{position:absolute;top:clamp(160px,23vh,220px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;max-width:calc(100vw - 32px);padding:12px 20px;border:1px solid #a68a4c;border-radius:4px;background:#0a1017dd;color:#ffe6a2;text-align:left;font:700 clamp(15px,1.5vw,21px)/1.25 Georgia,serif;text-shadow:0 2px 4px #000;box-shadow:0 3px 14px #0007;z-index:10;pointer-events:none}
#abilityUnlockNotice[hidden],#bossTestMenu[hidden]{display:none}
#bossTestMenu h2{color:#d4b078;font-family:Georgia,serif}
.boss-test-info{color:#c3c8bf;font-size:13px;line-height:1.5}

#ragnarosLavaWarning{position:absolute;top:auto;bottom:clamp(130px,20vh,180px);left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;max-width:calc(100vw - 32px);background:#10151ab3;border:1px solid #b57838;border-radius:3px;padding:7px 12px;color:#ffe3a3;text-align:center;font:600 clamp(12px,1.15vw,15px)/1.3 Georgia,serif;text-shadow:0 1px 3px #000;box-shadow:none;z-index:9;pointer-events:none}
#ragnarosLavaCountdown{display:inline-block;flex-shrink:0;margin:0;font-size:15px;color:#a4f9b0;font-variant-numeric:tabular-nums}
#ragnarosLavaWarning[hidden]{display:none}

#abilityUnlockIcon{position:static;width:50px;height:50px;flex-shrink:0;border:2px solid #c8aa66;border-radius:4px;object-fit:cover;box-shadow:0 0 12px #e5b94455}
#abilityUnlockTitle{font:inherit}
.ability-unlock-flight{position:fixed;z-index:20;pointer-events:none;object-fit:cover;border:2px solid #d8bd78;border-radius:4px;box-shadow:0 0 18px #ffe09a90;will-change:left,top,width,height}
.ability.unlock-pending .ability-icon img{visibility:hidden}
.ability.unlock-landed .ability-icon{animation:unlock-arrival .6s ease-out}
@keyframes unlock-arrival{from{box-shadow:0 0 24px 5px #ffe3a3;filter:brightness(1.7)}to{box-shadow:0 0 0 transparent;filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.ability.unlock-landed .ability-icon{animation:none}}
#menu #controlsMenu{margin-top:0;padding-top:0;border-top:0}
#menu #controlsMenu h2{text-align:center;font:700 21px Georgia,serif;color:#e3cca1;margin-bottom:18px}
#controlsBack{margin-top:18px}
@media(max-height:600px){#ragnarosLavaWarning{bottom:117px;font-size:12px;padding:5px 9px}#abilityUnlockNotice{top:165px;padding:9px 14px}#abilityUnlockIcon{width:42px;height:42px}}

/* Transparent white wordmark, shared by the start and pause menus. */
#menu h1.game-title{position:relative;left:50%;transform:translateX(-50%);width:min(640px,88vw);max-width:none;margin:0 0 30px;padding:0;font-size:0;line-height:0;background:transparent}
#menu .game-title svg{display:block;width:100%;height:auto;overflow:hidden;filter:brightness(0) invert(1)}
@media(max-height:640px){#menu h1.game-title{width:min(540px,86vw);margin-bottom:22px}}

#scoreboard{position:absolute;top:20px;left:20px;min-width:180px;width:max-content;max-width:240px;padding:14px 18px;color:#e8e2d4;border:1px solid transparent;border-image:url('./assets/ui/panel-frame.webp') 72 fill / 15px / 0 stretch;background:none;text-shadow:0 2px 3px #000}
.score-title{font:700 11px/1.2 Georgia,serif;letter-spacing:1.6px;color:#d9bf88}
#scoreValue{display:block;margin:4px 0 7px;color:#ffe6a2;font:700 29px/1.1 Georgia,serif;font-variant-numeric:tabular-nums}
@media(max-width:800px){#scoreboard{top:112px;left:12px;min-width:150px;padding:11px 14px;max-width:210px}#scoreValue{font-size:23px}}
@media(max-height:600px) and (min-width:801px){#scoreboard{top:14px;left:14px;padding:11px 14px}#scoreValue{font-size:23px}}

#scoreboard{min-width:155px;padding-bottom:10px}#scoreValue{margin-bottom:0}
#menu #pausedScore{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 20px;margin:0 0 18px;border:1px solid transparent;border-image:url('./assets/ui/panel-frame.webp') 72 fill / 15px / 0 stretch;color:#ffe6a2}
#pausedScore span{font:700 12px Georgia,serif;letter-spacing:1.5px}#pausedScoreValue{font:700 27px/1.1 Georgia,serif;font-variant-numeric:tabular-nums}