/* Last Light HUD. Sizes in vh. No transitions or animations: every value is set per frame from game time. */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden;color:#f3ecdc;font-family:-apple-system,"Helvetica Neue",Arial,sans-serif;font-size:1.7vh}
#hud div{box-sizing:border-box}
.h-root,.h-main{position:absolute;inset:0}
.h-plate{background:linear-gradient(180deg,rgba(14,16,24,.55),rgba(8,10,16,.62));backdrop-filter:blur(.8vh);-webkit-backdrop-filter:blur(.8vh);border-radius:.5vh;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 .6vh 2vh rgba(0,0,0,.25)}
.h-lab{font-size:1.2vh;letter-spacing:.28em;text-transform:uppercase;color:rgba(240,226,190,.72)}
.h-num{font-size:1.45vh;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:#f6efdd}
.h-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.55vh}
.h-bar,.h-ebar,.h-bbar,.h-pbar,.h-seg{position:relative;background:rgba(255,255,255,.1);overflow:hidden}
.h-fill{position:absolute;inset:0;transform-origin:left center}

/* party */
.h-party{position:absolute;right:3vh;bottom:5.6vh;width:34vh;padding:1.5vh 1.8vh 1.6vh}
.h-name{font:400 2.5vh/1 Georgia,"Times New Roman",serif;letter-spacing:.32em;text-transform:uppercase;margin:0 0 1.3vh;color:#fbf5e6;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.h-hp{height:.9vh;margin-bottom:1.5vh}
.h-hp .h-fill{background:linear-gradient(90deg,#d9c58a,#f4ecd0)}
.h-hp .h-fill.low{background:linear-gradient(90deg,#c8503c,#f08a6a)}
.h-atb{display:flex;gap:.5vh;margin-bottom:1.5vh}
.h-seg{flex:1;height:.9vh}
.h-seg .h-fill{background:linear-gradient(90deg,#3a86c8,#7cc4f4)}
.h-seg .h-fill.full{background:linear-gradient(90deg,#58a8e8,#bde6ff);box-shadow:0 0 1vh rgba(120,200,255,.8)}
.h-flash{position:absolute;inset:0;background:#e8f6ff;box-shadow:0 0 1.6vh 4px #8cd0ff;opacity:0}
.h-lim{height:.7vh}
.h-lim .h-fill{background:linear-gradient(90deg,#9a6a2a,#e0a850)}
.h-lim .h-fill.hot{background:linear-gradient(90deg,#f0a040,#fff0c0)}
.h-glow{position:absolute;inset:-.4vh;background:radial-gradient(ellipse at center,rgba(255,200,110,.9),rgba(255,160,60,0) 70%);opacity:0}

/* commands */
.h-menu{position:absolute;left:3vh;bottom:5.6vh;width:20vh;padding:1vh .8vh}
.h-cmd{display:flex;align-items:center;padding:.8vh 1vh;border-radius:.3vh;color:rgba(243,236,220,.62)}
.h-dot{width:.5vh;height:.5vh;border-radius:50%;background:currentColor;opacity:.4;margin-right:1.1vh}
.h-cl{flex:1;font-size:1.55vh;letter-spacing:.14em;text-transform:uppercase}
.h-key{font-size:1.1vh;letter-spacing:.12em;padding:.2vh .7vh;border:1px solid rgba(255,255,255,.22);border-radius:.3vh;color:rgba(243,236,220,.7)}
.h-cmd.on{color:#fff8e4;background:linear-gradient(90deg,rgba(240,200,120,.28),rgba(240,200,120,.04))}
.h-cmd.on .h-dot{opacity:1;background:#ffd88a;box-shadow:0 0 .8vh #ffd88a}
.h-cmd.on .h-key{border-color:rgba(255,216,138,.7);color:#ffe4a8}
.h-cmd.off{color:rgba(243,236,220,.3)}
.h-cmd.rdy{color:#ffd88a}

/* ability plate */
.h-ability{position:absolute;left:50%;top:18vh;opacity:0;padding:1vh 4vh;background:linear-gradient(90deg,rgba(10,12,18,0),rgba(10,12,18,.6) 20%,rgba(10,12,18,.6) 80%,rgba(10,12,18,0));backdrop-filter:blur(.6vh);-webkit-backdrop-filter:blur(.6vh)}
.h-at{font:400 2.7vh/1 Georgia,"Times New Roman",serif;letter-spacing:.34em;text-transform:uppercase;color:#fff4d6;text-shadow:0 1px 4px rgba(0,0,0,.7);white-space:nowrap;padding-left:.34em}

/* enemy markers */
.h-eb{position:absolute;left:0;top:0;width:7vh;display:none}
.h-ebn{white-space:nowrap;margin-left:-3vh;margin-right:-3vh;font-size:1vh;letter-spacing:.2em;text-transform:uppercase;text-align:center;margin-bottom:.4vh;color:rgba(255,246,226,.85);text-shadow:0 1px 3px rgba(0,0,0,.9)}
.h-ebar{height:.5vh;box-shadow:0 0 0 1px rgba(0,0,0,.55);background:rgba(0,0,0,.45)}
.h-ebar .h-fill{background:linear-gradient(90deg,#c9503c,#f08060)}
.h-mark{position:absolute;left:0;top:0;width:2.2vh;height:2.2vh;display:none;color:#ffd88a;filter:drop-shadow(0 0 .5vh rgba(0,0,0,.9))}
.h-mark svg{width:100%;height:100%;display:block}

/* boss */
.h-boss{position:absolute;left:50%;top:5.6vh;width:min(70vh,56vw);transform:translateX(-50%);display:none}
.h-bname{font:400 2.1vh/1 Georgia,"Times New Roman",serif;letter-spacing:.5em;text-transform:uppercase;text-align:center;padding-left:.5em;margin-bottom:1vh;color:#f6e6c0;text-shadow:0 1px 5px rgba(0,0,0,.85)}
.h-bbar{height:1.1vh;background:rgba(10,8,8,.55);box-shadow:0 0 0 1px rgba(255,220,160,.28),0 .4vh 1.4vh rgba(0,0,0,.35)}
.h-bbar .h-fill{background:linear-gradient(90deg,#a02a22,#e0643c 70%,#ffb070)}
.h-bprow{margin:.7vh auto 0;width:60%}
.h-pbar{height:.4vh;background:rgba(10,8,8,.55)}
.h-pbar .h-fill{background:linear-gradient(90deg,#8a7a58,#e8d8a8)}
.h-ptxt{font-size:1vh;letter-spacing:.4em;text-align:center;margin-top:.7vh;padding-left:.4em;color:rgba(240,226,190,.8);text-shadow:0 1px 3px rgba(0,0,0,.9)}
.h-boss.stag .h-pbar{box-shadow:0 0 1.2vh .2vh rgba(255,200,100,.9)}
.h-boss.stag .h-pbar .h-fill{background:linear-gradient(90deg,#ffc860,#fff2c8)}
.h-boss.stag .h-ptxt{color:#ffe09a;font-size:1.25vh;text-shadow:0 0 1vh rgba(255,190,90,.9),0 1px 3px rgba(0,0,0,.9)}

/* damage numbers */
.h-dmg{position:absolute;left:0;top:0;font:600 2.6vh/1 -apple-system,"Helvetica Neue",Arial,sans-serif;letter-spacing:.03em;font-variant-numeric:tabular-nums;color:#fff;opacity:0;display:none;white-space:nowrap;text-shadow:0 0 .5vh rgba(0,0,0,.9),0 .15vh .3vh rgba(0,0,0,.95),.1vh .1vh 0 rgba(0,0,0,.8),-.1vh -.1vh 0 rgba(0,0,0,.6)}
.h-dmg.fire{color:#ffd0a0}
.h-dmg.big{font-size:4vh;font-weight:700;color:#ffd060}
.h-dmg.hero{color:#ff6a58;font-size:2.8vh}

/* banner and title */
.h-banner{position:absolute;left:5vh;top:34%;opacity:0;padding:0 0 1.2vh}
.h-bt{font:400 3.4vh/1.1 Georgia,"Times New Roman",serif;letter-spacing:.3em;text-transform:uppercase;color:#fbf2dc;text-shadow:0 1px 6px rgba(0,0,0,.8);margin-bottom:1.2vh}
.h-rule{height:1px;width:28vh;background:linear-gradient(90deg,rgba(255,232,180,.9),rgba(255,232,180,0))}
.h-banner.boss .h-bt{font-size:5vh;letter-spacing:.38em;color:#ffc878;text-shadow:0 0 2vh rgba(220,70,40,.55),0 1px 6px rgba(0,0,0,.85)}
.h-banner.boss .h-rule{width:46vh;height:2px;background:linear-gradient(90deg,#e0503a,#ffd080 60%,rgba(255,208,128,0))}
.h-title{position:absolute;left:50%;top:44%;opacity:0;text-align:center;width:100%}
.h-tt{font:200 11vh/1 Georgia,"Times New Roman",serif;letter-spacing:.42em;padding-left:.42em;color:#fbf2dc;text-shadow:0 0 3vh rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.6)}
.h-ts{font-size:1.9vh;letter-spacing:.6em;padding-left:.6em;text-transform:uppercase;margin-top:2.4vh;color:rgba(240,226,190,.85);text-shadow:0 1px 6px rgba(0,0,0,.8)}

/* Pass 3: readable plates and a shared gauge language. */
/* Round 2: panels are soft veils that fade toward the screen centre, with one thin accent rule on the outer edge. */
.h-plate{position:absolute;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;text-shadow:0 1px 3px rgba(0,0,0,.65)}
.h-plate:before{content:"";position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(224,205,158,.7) 20%,rgba(224,205,158,.7) 80%,transparent)}
.h-party{background:linear-gradient(270deg,rgba(8,13,20,.52),rgba(8,13,20,.3) 55%,rgba(8,13,20,0))}
.h-party:before{right:0}
.h-menu{background:linear-gradient(90deg,rgba(8,13,20,.52),rgba(8,13,20,.3) 55%,rgba(8,13,20,0))}
.h-menu:before{left:0}
.h-party.hurt:before{background:linear-gradient(180deg,transparent,rgba(255,120,100,.9) 20%,rgba(255,120,100,.9) 80%,transparent)}
.h-party{right:0;bottom:4vh;width:41vh;padding:1.5vh 3.4vh 1.7vh 4vh}
.h-name{font:600 2.7vh/1.1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.06em;margin-bottom:1.3vh}
.h-row{min-height:1.8vh;margin-bottom:.5vh;line-height:1}
.h-lab{font-size:1.65vh;letter-spacing:.06em;font-weight:600;color:#c4d2dc}
.h-num{font-size:1.75vh;letter-spacing:.01em;font-weight:600}
.h-hp{height:1.15vh;margin-bottom:1.3vh}
.h-bar,.h-seg,.h-bbar{background:rgba(3,9,16,.5);box-shadow:inset 0 0 0 1px #9ab6c033}
.h-bar:after,.h-bbar:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#09121c99 calc(25% - 1px),#09121c99 25%);border-top:1px solid #ffffff50;pointer-events:none}
.h-chip{position:absolute;inset:0;transform-origin:left;background:#f7a26e}
.h-hp .h-fill{background:linear-gradient(0deg,#c6bd91,#f5efcf);box-shadow:inset 0 1px #fff9}
.h-atb{gap:.7vh;margin-bottom:1.3vh}
.h-seg{height:1.15vh;border:1px solid #9ec9e34d}
.h-lim{height:1vh;overflow:visible}
.h-lim:after{border:1px solid #efd5a13d;background:none}
.h-glow{inset:-.6vh;background:linear-gradient(0deg,transparent,#ffb54599,transparent);box-shadow:0 0 1.2vh #fdb34d70}
.h-lim .h-fill.hot{background:linear-gradient(90deg,#e88c32,#ffe2a0 65%,#fff7db)}
.h-menu{left:0;bottom:4vh;width:30vh;padding:.7vh 3vh .7vh 3.4vh}
.h-cmd{min-height:3.9vh;padding:.65vh .9vh;color:#ece9df;border-radius:1px}
.h-cl{font-size:1.95vh;letter-spacing:.015em;text-transform:none;font-weight:600}
.h-key{min-width:3vh;text-align:center;font-size:1.35vh;letter-spacing:0;padding:.3vh .55vh;color:#e4e8ec;border-color:#9aaab566;background:#ffffff08}
.h-cmd.off{color:#91a0ad}.h-cmd.off .h-key{color:#91a0ad}
.h-dot{width:.4vh;height:1.4vh;border-radius:0;margin-right:1vh;opacity:.6}
.h-cmd.on{background:linear-gradient(90deg,#d8b36733,#d8b36700);box-shadow:inset 2px 0 #edce8f}
.h-cmd.rdy{color:#ffe2a3}

/* Combat callouts share the ivory rule and ink backing. */
.h-ability{top:19vh;min-width:29vh;padding:1.1vh 4vh 1.3vh;text-align:center;background:linear-gradient(100deg,#101b2600,#101b26a0 16%,#101b26a0 84%,#101b2600);backdrop-filter:none;-webkit-backdrop-filter:none}
.h-ability:before,.h-ability:after{content:"";position:absolute;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,#dacead,transparent)}
.h-ability:before{top:0}.h-ability:after{bottom:0;opacity:.45}
.h-at{font:600 2.8vh/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.04em;text-transform:none;padding:0;color:#fff0ce}
.h-eb{width:13vh;padding:.7vh 1vh .8vh;background:linear-gradient(90deg,#0a101900,#0a101990 22%,#0a101990 78%,#0a101900);border-top:1px solid #d5cab440;text-align:center}
.h-ebn{margin:0 0 .6vh;font-size:1.55vh;font-weight:600;letter-spacing:.015em;text-transform:none;color:#fff2df}
.h-ebar{height:.55vh;margin:0 .6vh;background:rgba(3,9,16,.6);box-shadow:0 0 0 1px #c8bca13d}
.h-mark{width:2.8vh;height:2.8vh;color:#ffe3a4;filter:drop-shadow(0 1px 1px #000) drop-shadow(0 0 3px #000)}
.h-boss{top:4vh;width:min(72vh,60vw);padding:1.1vh 1.6vh 1vh;background:linear-gradient(90deg,#0a121b00,#0a121b88 12%,#0a121b88 88%,#0a121b00)}
.h-bname{font:600 2.3vh/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.1em;padding:0;margin-bottom:.8vh;color:#f8ead1}
.h-bbar{height:1.2vh;border:1px solid #e3b78b66;box-shadow:0 2px 5px #0007}
.h-bbar .h-fill{background:linear-gradient(0deg,#b34b39,#ee9064)}
.h-bprow{margin:.65vh auto 0;width:80%}
.h-pbar{height:.65vh;background:#030910;border:1px solid #d2c4a43d}
.h-ptxt{font-size:1.4vh;line-height:1.1;font-weight:600;letter-spacing:.1em;padding:0;margin-top:.6vh;color:#d1dbe2}
.h-boss.stag .h-ptxt{font-size:1.55vh;letter-spacing:.13em;color:#ffe0a0;text-shadow:0 1px 3px #000}
.h-boss.stag .h-pbar{box-shadow:0 0 1vh #ffc76a77}
.h-dmg{font:600 3vh/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.02em;-webkit-text-stroke:.3vh #111721;paint-order:stroke fill;text-shadow:0 .25vh .35vh #000a,0 0 .7vh #0008}
.h-dmg.heavy{font-weight:800;color:#ffe9b8}
.h-dmg.crit{font-weight:800;color:#ffd24d}
.h-dmg.fire{font-weight:700;color:#ffad78}
.h-dmg.hero{font-weight:700;color:#ff9a88}

/* command readouts, objective line, result line */
.h-ro{font-size:1.25vh;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:#c9d3da;margin-right:1.1vh;opacity:.8;white-space:nowrap}
.h-cmd.off .h-ro{color:#91a0ad}.h-cmd.rdy .h-ro{color:#ffd88a;opacity:1}
.h-obj{position:absolute;left:50%;top:3.2vh;transform:translateX(-50%);opacity:0;display:none;width:44vh;text-align:center;padding:0 0 .6vh;background:linear-gradient(90deg,#0a121b00,#0a121b55 25%,#0a121b55 75%,#0a121b00);text-shadow:0 1px 3px rgba(0,0,0,.8)}
.h-oi{display:none}
.h-ot{display:inline-block;font-size:1.8vh;font-weight:600;letter-spacing:.08em;color:#f6efdd;margin:.7vh 1.2vh 0 0}
.h-od{display:inline-block;font-size:1.5vh;font-weight:500;letter-spacing:.05em;font-variant-numeric:tabular-nums;color:#e6c88f}
.h-os{position:relative;height:1px;margin:.7vh 6vh 0;background:linear-gradient(90deg,transparent,rgba(224,205,158,.75),transparent)}
.h-ok{position:absolute;top:-.4vh;width:.8vh;height:.8vh;margin-left:-.4vh;background:#ffe3a4;transform:rotate(45deg);box-shadow:0 0 .6vh #000a}
.h-res{position:absolute;left:50%;top:12vh;transform:translateX(-50%);opacity:0;display:none;width:40vh;text-align:center;padding:1vh 0 1.1vh;background:linear-gradient(90deg,#0a121b00,#0a121b66 22%,#0a121b66 78%,#0a121b00);text-shadow:0 1px 3px rgba(0,0,0,.8)}
.h-rt{font-size:2.1vh;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff0ce}
.h-rs{font-size:1.4vh;letter-spacing:.08em;margin-top:.6vh;color:#d9cdb0;font-variant-numeric:tabular-nums}
.h-rr{height:1px;margin:.8vh 5vh 0;background:linear-gradient(90deg,transparent,rgba(224,205,158,.7),transparent)}

/* Preserve the title's quiet ivory serif; tighten only the supporting line. */
.h-ts{letter-spacing:.32em;padding-left:.32em;font-weight:500;color:#e9dfc9;text-shadow:0 1px 5px #000,0 0 12px #0008}