#th{position:absolute;left:0;right:0;top:0;z-index:4;pointer-events:none;padding:calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 0 calc(10px + env(safe-area-inset-left));display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;font-family:NeonNumbers,NeonUI,Microsoft YaHei,sans-serif}
#th[hidden],.th-vit[hidden],.th-level[hidden],.th-row[hidden]{display:none}
.th-vit{grid-column:1;grid-row:1;display:flex;align-items:center;min-width:0;padding-right:5px}
.th-portrait{width:36px;height:36px;flex:none;z-index:1;display:grid;place-items:center;border:2px solid #81eaff;border-radius:50%;background:radial-gradient(#284b6c,#120b2a 76%);box-shadow:0 0 8px #43f4ff88,inset 0 0 0 2px #181130}
.th-portrait i{width:21px;height:16px;background:linear-gradient(#befff4,#51dacd 36%,#238f9d);clip-path:polygon(14% 0,86% 0,86% 14%,100% 14%,100% 86%,86% 86%,86% 100%,14% 100%,14% 86%,0 86%,0 14%,14% 14%);position:relative}
.th-portrait i::after{content:'';position:absolute;inset:5px 3px;background:linear-gradient(90deg,#7fffee 0 27%,#102036 27% 73%,#7fffee 73%);box-shadow:0 0 0 2px #102036}
.th-meters{min-width:0;flex:1;max-width:133px;margin-left:-5px;padding:4px 5px 4px 9px;border:1px solid #70528f;background:linear-gradient(#291741ed,#10132dee);display:grid;gap:3px}
.th-level{grid-column:2;grid-row:1;padding:4px 15px;color:#fff;font:800 17px NeonUI,Microsoft YaHei,sans-serif;letter-spacing:1px;white-space:nowrap;position:relative;isolation:isolate;text-shadow:2px 2px 0 #501243}
.th-level::before,.th-level::after{content:'';position:absolute;inset:0;z-index:-1;clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px);background:#ffd0ea}
.th-level::after{inset:2px;background:linear-gradient(#ff69bc,#b72178)}
.th-row{display:flex;align-items:center;gap:3px}
.th-row b{width:14px;font:800 10px NeonNumbers,monospace;color:#e8dcff;letter-spacing:1px;text-shadow:1px 1px 0 #05021a}
.th-hp,.th-sh{display:flex;gap:2px;flex:1;min-width:0}
.th-hp i{flex:1;max-width:26px;height:10px;transform:skewX(-20deg);border:1px solid #5a3fa8;background:#2a1259}
.th-hp i.on{border-color:#ffd0ea;background:linear-gradient(#ff8ad0,#ff2f8e);box-shadow:0 0 8px #ff2f8e}
.th-hp.low i.on{animation:th-blink .5s steps(2) infinite}
.th-sh i{flex:1;max-width:26px;height:6px;transform:skewX(-20deg);border:1px solid #1f5c78;background:#0d2a45}
.th-sh i.on{border-color:#c8fbff;background:linear-gradient(#9ffaff,#27c9ff);box-shadow:0 0 7px #43f4ff}
.th-vit.hit{animation:th-shake .3s steps(4)}
@keyframes th-blink{50%{opacity:.25}}
@keyframes th-shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
#th #pause{grid-column:3;grid-row:1;justify-self:end;pointer-events:auto;width:44px;height:40px;display:grid;place-items:center;padding:0;border:0;background:none;color:#dcfdff;box-shadow:none}
#th #pause[hidden]{display:none}
.th-pause{width:17px;height:20px;border-inline:5px solid currentColor;filter:drop-shadow(0 0 4px #43f4ff) drop-shadow(1px 2px 0 #100a28)}
#th #pause:hover{color:#74f8ff}
#th #pause:focus-visible{outline:2px solid #74f8ff;outline-offset:-3px}
#th #pause:active{transform:translateY(1px)}
#viewport:has(>#th:not([hidden]))>#skill-wallet{top:calc(54px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right))}
/* old floor/zone stay in the DOM (game.js still writes them) but are visually hidden */
#viewport .floorinfo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}
#viewport .hud .actions{display:none}
@media(prefers-reduced-motion:reduce){.th-hp.low i.on,.th-vit.hit{animation:none}}

#viewport{--battle-meter-top:calc(101px + env(safe-area-inset-top))}
#viewport :is(#survival-clock,#boss-health){
 top:var(--battle-meter-top);left:50%;width:calc(100% - 32px);height:24px;
 transform:translateX(-50%);box-sizing:border-box;container-type:normal;
 padding:0;border:0;background:none;box-shadow:none;z-index:3
}
#viewport:has(#boss-health:not([hidden])) #survival-clock{display:none!important}
#viewport #clock-spectrum{display:none}
#viewport #survival-clock .clock-face,#viewport #boss-health>div:first-child{
 position:absolute;inset:0;z-index:1;display:flex;flex-direction:row;
 justify-content:space-between;align-items:center;gap:6px;padding:0 9px;margin:0;
 color:#f3fcff;text-shadow:0 1px 2px #08051b,1px 1px 2px #08051b
}
#viewport #survival-clock strong{flex-direction:row;align-items:baseline;gap:3px}
#viewport #survival-clock :is(small,b,span),#viewport #boss-health :is(strong,span){
 font:800 12px/1 NeonUI,Microsoft YaHei,sans-serif;letter-spacing:0;margin:0;color:inherit
}
#viewport :is(.normal-time-track,.boss-health-track){
 position:absolute;inset:0;display:block;height:auto;border-radius:4px;
 background:#15132e;border:1px solid #817ba3;box-shadow:0 2px 0 #080619,inset 0 0 5px #05030f
}
#viewport .normal-time-track{overflow:hidden}
#viewport :is(.normal-time-track>i,#boss-health-fill){
 background:repeating-linear-gradient(125deg,#ffffff22 0 7px,transparent 7px 15px),
 linear-gradient(#28bcb3,#15768b);box-shadow:inset 0 2px #a1fff777
}
#viewport #boss-health-fill,#viewport .urgent .normal-time-track>i{
 background:repeating-linear-gradient(125deg,#ffffff22 0 7px,transparent 7px 15px),
 linear-gradient(#e55877,#9a214b);box-shadow:inset 0 2px #ffc2d688
}
#viewport #survival-clock small{position:static;transform:none}
#viewport #survival-clock strong{opacity:1}
#viewport:has(#boss-health:not([hidden]),#survival-clock[style*="display: block"]) .drinks-hud{
 top:calc(var(--battle-meter-top) + 32px)
}