/* Shared by Stopfapia and Abstinencia. Life is a vertical liquid level;
   endurance is the independent circular track around the vessel. */
.jp{--vitals-top:160px;--hud-edge:28px;--vitals-size:126px;--vitals-caption:44px;--vitals-lives:34px;--vitals-gap:8px;--vitals-height:calc(var(--vitals-size) + var(--vitals-caption) + var(--vitals-lives) + 2 * var(--vitals-gap))}
.jp .jp-explorer{--vitals-height:calc(var(--vitals-size) + var(--vitals-caption) + var(--vitals-lives) + 2 * var(--vitals-gap))}
.jp .jp-vitals.jp-vitals--orb{width:var(--vitals-size);min-height:0;max-width:none;display:grid;justify-items:center;gap:var(--vitals-gap);padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;font-variant-numeric:tabular-nums;text-shadow:0 2px 8px #04101d}
.jp-vitals-endurance-caption{height:var(--vitals-caption);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.15}
.jp-vitals-endurance-caption>span:first-child{display:flex;align-items:center;gap:5px;color:#b8edc4;font-size:11px;font-weight:650;letter-spacing:.06em}
.jp-vitals-endurance-caption svg{width:11px;height:14px;fill:currentColor}
.jp-vitals-endurance-caption [data-ui=stamina-value]{color:#e2ffe9;font-size:24px;font-weight:500;white-space:nowrap}
.jp-vitals-endurance-caption [data-ui=stamina-value] b{font-weight:750}
.jp-vitals-endurance-caption [data-ui=stamina-value] small{font-size:12px;font-weight:500}
.jp-vitals-orb{position:relative;width:var(--vitals-size);height:var(--vitals-size);border-radius:50%;background:radial-gradient(circle at 35% 25%,#183f4ad9,#071321f5 78%);box-shadow:0 6px 22px #0005,0 0 20px #8ff0b515}
.jp-vitals-endurance-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke-width:6;transform:rotate(-90deg)}
.jp-vitals-ring-track{stroke:#c1f2d426}
.jp-vitals-ring-fill{stroke:#a3e67c;stroke-linecap:round;filter:drop-shadow(0 0 3px #91ec7970)}
.jp-vitals-endurance-ring[data-low=true] .jp-vitals-ring-fill{stroke:#ffbd75;filter:drop-shadow(0 0 3px #ffac6960)}
.jp-health-vessel{position:absolute;inset:8%;isolation:isolate;overflow:hidden;border:1px solid #ffc5cc70;border-radius:50%;background:radial-gradient(circle at 32% 20%,#3e1a2b,#130d20 76%);box-shadow:inset 0 2px 13px #000a,0 0 0 1px #071922}
.jp-health-liquid{position:absolute;inset:auto 0 0;height:100%;background:linear-gradient(180deg,#f65365 0%,#d82343 40%,#860d2b 100%);transition:height .35s ease-out;box-shadow:inset 0 0 24px #ff587e45}
.jp-health-liquid:before,.jp-health-liquid:after{content:"";position:absolute;left:0;top:-9px;width:200%;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='12' viewBox='0 0 80 12'%3E%3Cpath fill='%23f65365' d='M0 6Q20 0 40 6T80 6V12H0Z'/%3E%3C/svg%3E") repeat-x 0 0;background-size:80px 12px;animation:jp-health-surface 3.8s linear infinite;will-change:transform}
.jp-health-liquid:after{top:-11px;opacity:.45;animation-duration:5.3s;animation-direction:reverse}
.jp-health-vessel[data-empty=true] .jp-health-liquid{opacity:0}
.jp-health-glass{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 27% 15%,#ffffff20,transparent 48%);box-shadow:inset 2px 3px 4px #ffdee222,inset -2px -3px 7px #0003;pointer-events:none}
.jp-health-readout{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff5f5;text-shadow:0 1px 3px #330315,0 2px 9px #35051ec9}
.jp-health-ecg{width:69%;height:47%;overflow:visible;fill:none;stroke:#fff1f2;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 3px #830c33)}
.jp-health-readout [data-ui=health-value]{font-size:13px;line-height:1.15;white-space:nowrap;color:#ffe5e8}
.jp .jp-vitals--orb .jp-health-readout [data-ui=health-current]{color:#fff;font-size:26px;font-weight:800}
.jp .jp-vitals--orb .jp-lives{position:relative;inset:auto;display:flex;align-items:center;justify-content:center;gap:6px;width:max-content;max-width:calc(100vw - 28px);min-width:0;height:var(--vitals-lives);padding:5px 11px;border:1px solid #ff9fba50;border-radius:20px;background:#171b30d9;box-shadow:inset 0 1px 5px #ffacc00b,0 3px 12px #0002;color:#fce3eb;font-size:11px;font-weight:500;letter-spacing:0;line-height:1;white-space:nowrap;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.jp .jp-vitals--orb .jp-lives svg{width:17px;height:17px;filter:drop-shadow(0 0 4px #ff61875c)}
.jp .jp-vitals--orb .jp-lives [data-ui=lives-value]{color:#fff0f4;font-size:17px;font-weight:750}
.jp .jp-vitals--orb .jp-lives:before,.jp .jp-vitals--orb .jp-lives:after{content:none}
.jp-vitals-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.jp[data-mode=explore] .jp-collect-notice{top:calc(var(--vitals-top,160px) + var(--vitals-height) + 64px)}
@keyframes jp-health-surface{from{transform:translateX(0)}to{transform:translateX(-80px)}}
@media(max-width:760px){
    .jp{--vitals-top:calc(max(16px,env(safe-area-inset-top)) + 60px);--hud-edge:14px;--vitals-size:93px;--vitals-caption:36px;--vitals-lives:30px;--vitals-gap:7px}
    .jp-vitals-endurance-caption>span:first-child{font-size:10px}.jp-vitals-endurance-caption [data-ui=stamina-value]{font-size:20px}
    .jp .jp-vitals--orb .jp-health-readout [data-ui=health-current]{font-size:21px}.jp-health-readout [data-ui=health-value]{font-size:10px}
    .jp .jp-vitals--orb .jp-lives{gap:4px;padding-inline:8px;font-size:9px}.jp .jp-vitals--orb .jp-lives [data-ui=lives-value]{font-size:15px}.jp .jp-vitals--orb .jp-lives svg{width:15px;height:15px}
    .jp[data-mode=explore] .jp-collect-notice{top:calc(var(--vitals-top) + var(--vitals-height) + 56px)}
}
@media(max-height:540px){
    .jp{--vitals-size:72px;--vitals-caption:30px;--vitals-lives:26px;--vitals-gap:6px}
    .jp-vitals-endurance-caption>span:first-child{font-size:9px}.jp-vitals-endurance-caption [data-ui=stamina-value]{font-size:17px}.jp-vitals-endurance-caption [data-ui=stamina-value] small{font-size:10px}
    .jp-health-readout{gap:0}.jp .jp-vitals--orb .jp-health-readout [data-ui=health-current]{font-size:17px}.jp-health-readout [data-ui=health-value]{font-size:9px}
    .jp .jp-vitals--orb .jp-lives{gap:4px;padding:4px 7px;font-size:9px}.jp .jp-vitals--orb .jp-lives [data-ui=lives-value]{font-size:13px}.jp .jp-vitals--orb .jp-lives svg{width:13px;height:13px}
    .jp .jp-explorer-status{left:calc(var(--hud-edge) + var(--vitals-size) + 14px);top:var(--vitals-top);max-width:calc(100% - var(--vitals-size) - 2 * var(--hud-edge) - 14px)}
    .jp[data-mode=explore] .jp-collect-notice{left:calc(var(--hud-edge) + var(--vitals-size) + 14px);top:calc(var(--vitals-top) + 54px);max-width:calc(100% - var(--vitals-size) - 2 * var(--hud-edge) - 14px)}
}
@media(max-height:540px) and (min-width:761px){.jp{--vitals-top:114px;--hud-edge:18px}}
@media(prefers-reduced-motion:reduce){.jp-health-liquid{transition:none}.jp-health-liquid:before,.jp-health-liquid:after{animation:none;will-change:auto}}