/* F8.1f: DOM projection of the final 2D HUD composition from runtime V26/V212. */
.hud{pointer-events:none;position:fixed;inset:0;z-index:20;font-family:var(--font-mono,monospace);color:#f1e9f5}
.cc-panel{background:linear-gradient(135deg,#070914f2,#101126e8);border:3px solid #252b45;box-shadow:inset 0 0 0 1px #6e3f91,0 8px 28px #0008}
.cc-player-panel{position:absolute;left:14px;top:14px;width:292px;height:82px;display:grid;grid-template-columns:56px 1fr;gap:18px;padding:10px}
.cc-player-portrait{width:56px;height:56px;background:#080a14;border:2px solid #6c3d8b;overflow:hidden;display:grid;place-items:center;color:#c56cff;font-weight:900}
.cc-player-portrait img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.cc-player-bars{display:grid;gap:9px;align-content:center}
.cc-top-meter{position:relative;height:16px;background:#080a13;border:1px solid #342a45;overflow:hidden}
.cc-top-meter>span{position:absolute;inset:2px auto 2px 2px;width:0;background:var(--meter,#ff5f78);box-shadow:inset 0 2px #ffffff24}
.cc-top-meter label,.cc-top-meter output{position:absolute;z-index:1;top:2px;font-size:9px;font-weight:900}
.cc-top-meter label{left:7px}.cc-top-meter output{right:6px}.cc-top-meter.mana{--meter:#8d68ff}
.cc-survival-meters{position:absolute;left:max(12px,calc(50% - 391px));bottom:38px;display:flex;gap:8px;align-items:center}
.cc-survival-meter{--ratio:1;--meter:#55c8ff;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#111321 0 52%,transparent 54%),conic-gradient(var(--meter) calc(var(--ratio)*1turn),#332b42 0);border:3px solid #070912;box-shadow:0 4px 14px #000b;position:relative}
.cc-survival-meter b{color:var(--meter);font-size:12px}.cc-survival-meter small{position:absolute;top:23px;font-size:7px;color:#e9e3ed}.cc-survival-meter.stamina{--meter:#e4c85b}.cc-survival-meter.food{--meter:#f29a50}.cc-survival-meter.rest{--meter:#a76cff}
.f8-status-effects{position:absolute;left:max(12px,calc(50% - 391px));bottom:86px;display:none;gap:5px;max-width:360px;flex-wrap:wrap}.f8-status-effects.show{display:flex}.f8-status-effects span{display:flex;gap:7px;align-items:center;padding:5px 7px;border:1px solid #7654a4;background:#090b16e8;box-shadow:0 4px 12px #0008}.f8-status-effects b{color:#dca8ff;font-size:8px;text-transform:uppercase}.f8-status-effects small{color:#f6e490;font-size:8px}
.actionbar{position:absolute!important;left:50%!important;bottom:26px!important;transform:translateX(-50%)!important;width:auto!important;display:grid!important;grid-template-columns:repeat(8,63px)!important;gap:5px!important}
.actionbar .slot{width:63px!important;height:63px!important}
.cc-location-time{position:absolute;left:50%;bottom:98px;transform:translateX(-50%);min-width:280px;text-align:center;padding:7px 14px;background:#070914dc;border:1px solid #4d395d;font-size:10px;letter-spacing:.08em}
.cc-location-time b{color:#c56cff;margin-right:10px}.cc-location-time span{color:#d4cfdb}
.quest-tracker{top:250px!important;right:14px!important;width:323px!important;background:#070914ec!important;border:3px solid #252b45!important;box-shadow:inset 0 0 0 1px #b7952d!important}
#f8-minimap{top:14px!important;right:14px!important;width:224px!important;min-height:220px!important}
#f8-minimap>div b{font-size:11px;color:#c56cff}#f8-minimap>div span{font-size:8px;color:#91899f}#f8-minimap canvas{width:190px!important;height:168px!important}
.key-hints{bottom:5px!important;right:14px!important;left:auto!important;transform:none!important;font-size:9px!important;color:#a99fae!important}
.status-bars,.top-left,.brand{display:none!important}
.cc-save-source{position:absolute;left:14px;top:104px;padding:5px 8px;background:#070914cc;border:1px solid #49335f;color:#8f879b;font-size:8px;letter-spacing:.08em}
#f8-damage-vignette{position:fixed;inset:0;z-index:24;pointer-events:none;opacity:0;background:radial-gradient(circle,transparent 38%,#8e102777 78%,#42010bc7 100%);box-shadow:inset 0 0 90px #d6234866;transition:opacity .16s ease}
#f8-damage-vignette.show{opacity:1;transition-duration:.035s}
#f8-hit-marker{position:fixed;left:50%;top:50%;z-index:25;pointer-events:none;transform:translate(-50%,-50%) scale(.72);opacity:0;color:#ffe071;font:900 30px/1 var(--font-mono,monospace);text-shadow:0 0 8px #ff5f78;transition:opacity .12s,transform .12s}
#f8-hit-marker.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#f8-death{position:fixed;inset:0;z-index:80;display:none;place-items:center;padding:24px;background:radial-gradient(circle,#11101aee,#03040afa);font-family:var(--font-mono,monospace);text-align:center;color:#eee5ef}
#f8-death.open{display:grid}#f8-death>div{width:min(560px,92vw);padding:38px;background:#080a14f5;border:3px solid #49283d;box-shadow:inset 0 0 0 1px #9b3857,0 22px 80px #000}
#f8-death small{color:#e75e70;letter-spacing:.2em;font-weight:900}#f8-death h2{margin:12px 0;color:#f0d889;font-size:24px}#f8-death p{color:#aaa2b5}.f8-respawn-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px}.f8-respawn-action{padding:13px 22px;border:1px solid #bb91d2;background:linear-gradient(#76509a,#49315f);color:#fff;font:900 12px var(--font-mono,monospace);letter-spacing:.08em;cursor:pointer}.f8-respawn-action.secondary{border-color:#665972;background:linear-gradient(#373244,#24212e);color:#d9d1df}
@media(max-width:1000px){.cc-player-panel{transform:scale(.78);transform-origin:top left}.cc-survival-meters,.f8-status-effects{transform:scale(.78);transform-origin:bottom left}.actionbar{grid-template-columns:repeat(8,50px)!important}.actionbar .slot{width:50px!important;height:50px!important}.quest-tracker{transform:scale(.78);transform-origin:top right}#f8-minimap{transform:scale(.78);transform-origin:top right}.key-hints{display:none!important}}