<!DOCTYPE html>
<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" lang="en-US"  lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>D&D HP Tracker</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Metamorphous&family=Inter:wght@400;600&display=swap');
html,body{height:100%;width:100%}html{--font-scale:100;font-size:calc(16px * (var(--font-scale) / 100))}
body{font-family:'Inter',sans-serif;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;margin:0;overflow:hidden;background-color:transparent}
@keyframes pulse-focus{0%,100%{box-shadow:0 0 0 2px #18181b,0 0 0 5px #3b82f6}50%{box-shadow:0 0 0 2px #18181b,0 0 0 8px rgba(96,165,250,.6)}}
button:focus-visible,input:focus-visible,select:focus-visible,details:focus-visible,[tabindex="0"]:focus-visible,label:focus-visible{outline:0!important;border-radius:6px;z-index:50;position:relative;animation:pulse-focus 1.5s infinite}
body.light-mode button:focus-visible,body.light-mode input:focus-visible,body.light-mode select:focus-visible,body.light-mode details:focus-visible,body.light-mode [tabindex="0"]:focus-visible,body.light-mode label:focus-visible{animation-name:pulse-focus-light}
@keyframes pulse-focus-light{0%,100%{box-shadow:0 0 0 2px #fff,0 0 0 5px #2563eb}50%{box-shadow:0 0 0 2px #fff,0 0 0 8px rgba(59,130,246,.6)}}
.sc-lbl,.sc-lbl-blk,.sc-flex,.sc-badge{display:none!important;font-weight:700;font-size:10px;opacity:.7}
.sc-badge{opacity:1;color:#71717a;border:1px solid #3f3f46;padding:2px 6px;border-radius:4px;background-color:#27272a}
body.show-shortcuts .sc-lbl,body.show-shortcuts .sc-badge{display:inline-flex!important}body.show-shortcuts .sc-lbl-blk{display:block!important}
body.show-shortcuts .sc-flex{display:flex!important}body.show-shortcuts #settingsBtn{width:auto;padding-left:.75rem;padding-right:.75rem}
body.show-shortcuts #navHints{display:flex!important}:fullscreen #appWrapper,:-webkit-full-screen #appWrapper,:-moz-full-screen #appWrapper{max-width:100%!important;border-radius:0!important;border:none!important}
.monospace-mode *{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace!important}.fantasy-font{font-family:'Metamorphous',serif}
.hp-bar-container{height:24px;background:#27272a;border-radius:12px;overflow:hidden;border:2px solid #3f3f46;position:relative}.hp-bar-fill{height:100%;transition:width .4s cubic-bezier(.175,.885,.32,1.1),background-color .3s ease}
.log-container::-webkit-scrollbar,.main-scroll::-webkit-scrollbar{width:4px;height:4px}.main-scroll::-webkit-scrollbar-track{margin-top:2.5rem;margin-bottom:2.5rem;background:transparent}
.log-container::-webkit-scrollbar-track{background:transparent}.log-container::-webkit-scrollbar-thumb,.main-scroll::-webkit-scrollbar-thumb{background:#3f3f46;border-radius:10px}
.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.no-spinners::-webkit-inner-spin-button,.no-spinners::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.no-spinners{-moz-appearance:textfield}
.death-save-dot{width:20px;height:20px;border-radius:50%;border:2px solid #3f3f46;transition:all .2s ease}.death-save-success.active{background-color:#22c55e;border-color:#16a34a;box-shadow:0 0 10px rgba(34,197,94,.5)}
.death-save-failure.active{background-color:#ef4444;border-color:#dc2626;box-shadow:0 0 10px rgba(239,68,68,.5)}.modal-overlay{background-color:rgba(0,0,0,.9);backdrop-filter:blur(8px)}
.tab-btn{word-break:break-all;transition:all .2s ease;touch-action:manipulation}.moving-tab{border-color:#ef4444!important;animation:pulse-red 1.5s infinite;background-color:#450a0a!important;color:#fecaca!important}
@keyframes pulse-red{0%,100%{box-shadow:0 0 0 0 transparent}70%{box-shadow:0 0 0 10px rgba(239,68,68,0)}}.drop-dot{width:12px;height:12px;background-color:#3f3f46;border-radius:50%;display:inline-block;margin:auto 4px;cursor:pointer;transition:all .2s ease;flex-shrink:0;border:2px solid #18181b}
.drop-dot:hover,.drop-dot:active{background-color:#ef4444;transform:scale(1.4);box-shadow:0 0 8px #ef4444}button{touch-action:manipulation}
#appWrapper{transition:max-width .3s ease,max-height .3s ease}#appWrapper.constrained-ratio{border-radius:1.5rem;border:1px solid #3f3f46}body.light-mode #appWrapper.constrained-ratio{border-color:#d4d4d8}
.toast-enter{animation:toastIn .3s ease-out forwards}.toast-exit{animation:toastOut .3s ease-in forwards}@keyframes toastIn{from{opacity:0;transform:translateY(100%) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(100%) scale(.9)}}body.light-mode{color:#18181b}
body.light-mode #appWrapper,body.light-mode .bg-zinc-900{background-color:#fafafa!important;border-color:#e4e4e7!important}body.light-mode .bg-zinc-950{background-color:#fff!important}body.light-mode .bg-zinc-800{background-color:#f4f4f5!important}
body.light-mode .bg-zinc-700{background-color:#e4e4e7!important}body.light-mode .border-zinc-800{border-color:#e4e4e7!important}body.light-mode .border-zinc-700{border-color:#d4d4d8!important}
body.light-mode .text-zinc-600{color:#52525b!important}body.light-mode .text-zinc-500{color:#71717a!important}body.light-mode .text-zinc-400{color:#3f3f46!important}body.light-mode .text-zinc-300{color:#27272a!important}
body.light-mode .text-zinc-200,body.light-mode .text-zinc-100{color:#18181b!important}body.light-mode .text-white{color:#000!important}body.light-mode input.bg-transparent{border-bottom-color:#d4d4d8!important;color:#18181b!important}
body.light-mode input.bg-zinc-800,body.light-mode input.bg-zinc-900,body.light-mode select.bg-zinc-800,body.light-mode select.bg-zinc-700{background-color:#fff!important;color:#18181b!important;border-color:#e4e4e7!important}
body.light-mode .hp-bar-container{background:#e4e4e7;border-color:#d4d4d8}body.light-mode .death-save-dot{border-color:#d4d4d8}body.light-mode .drop-dot{background-color:#a1a1aa;border-color:#fff}
body.light-mode .modal-overlay{background-color:rgba(255,255,255,.85)!important}body.light-mode .log-container::-webkit-scrollbar-thumb,body.light-mode .main-scroll::-webkit-scrollbar-thumb{background:#d4d4d8}
body.light-mode button.text-zinc-400:hover{color:#18181b!important}body.light-mode button.text-zinc-300:hover{color:#000!important}body.light-mode .bg-zinc-950\/50{background-color:rgba(255,255,255,.6)!important}
body.light-mode .bg-zinc-800\/50{background-color:rgba(244,244,245,.6)!important}body.light-mode .bg-zinc-800\/30{background-color:rgba(244,244,245,.4)!important}body.light-mode .bg-zinc-800\/20{background-color:rgba(244,244,245,.3)!important}
body.light-mode .bg-green-900\/20,body.light-mode .bg-green-900\/40{background-color:rgba(34,197,94,.15)!important;color:#15803d!important;border-color:rgba(34,197,94,.3)!important}
body.light-mode .bg-red-900\/20{background-color:rgba(239,68,68,.15)!important;color:#b91c1c!important;border-color:rgba(239,68,68,.3)!important}body.light-mode .bg-blue-900\/20{background-color:rgba(37,99,235,.15)!important;color:#1d4ed8!important;border-color:rgba(37,99,235,.3)!important}
body.light-mode .text-\[\#e5e5e5\]{color:#18181b!important}body.light-mode .peer:checked ~ .peer-checked\:bg-green-600{background-color:#16a34a!important}body.light-mode .moving-tab{background-color:#fee2e2!important;color:#b91c1c!important;border-color:#ef4444!important}
body.light-mode #quickScrollBtn,body.light-mode #bottomFullscreenBtn{background-color:rgba(255,255,255,.9)!important;color:#3f3f46!important;border-color:#d4d4d8!important}
body.light-mode #quickScrollBtn:hover,body.light-mode #bottomFullscreenBtn:hover{background-color:#fff!important}body.light-mode button.bg-blue-600{background-color:#2563eb!important;color:#fff!important;font-weight:400!important}
body.light-mode button.bg-blue-600:hover{background-color:#3b82f6!important}body.light-mode button.bg-green-700{background-color:#16a34a!important;color:#fff!important}
body.light-mode button.bg-green-700:hover,body.light-mode button.bg-green-800:hover{background-color:#22c55e!important}body.light-mode button.bg-green-800{background-color:#15803d!important;color:#fff!important}
body.light-mode button.bg-red-700,body.light-mode button.bg-red-800:hover,body.light-mode button.bg-red-900:hover{background-color:#dc2626!important;color:#fff!important}
body.light-mode button.bg-red-700:hover{background-color:#ef4444!important}body.light-mode button.bg-red-800{background-color:#b91c1c!important;color:#fff!important}
body.light-mode button.bg-red-900{background-color:#991b1b!important;color:#fff!important}body.light-mode button.bg-blue-700{background-color:#1d4ed8!important;color:#fff!important}
body.light-mode button.bg-blue-700:hover{background-color:#2563eb!important}body.light-mode .danger-reset-btn:hover{background-color:#dc2626!important;color:#fff!important;border-color:#dc2626!important}
body.light-mode .bg-yellow-900\/20{background-color:#fef9c3!important;border-color:#facc15!important}body.light-mode .text-yellow-500{color:#a16207!important}body.light-mode .text-yellow-400\/80{color:#854d0e!important}

/* Easter Egg Shared & Specific CSS */
.easter-egg-text,.sparta-text,.sparta-text-big,.nice-animation,.fire-text,.fire-text-container,.hal-text,.neon-pink-text,.cyber-glitch,.bing-bong-text,.halo-text,.witness-text,.dolphin-text,.jack-text,.iron-man-text,.frankenstein-text,.wakanda-text,.patronus-text,.dust-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;text-align:center;pointer-events:none;color:#fff;text-shadow:0 0 10px #000;font-weight:700;animation:eggFade 3s forwards;font-size:clamp(22px,5.5vw,44px);width:85%;max-width:85%;word-wrap:break-word}
@keyframes eggFade{0%{opacity:0;transform:translate(-50%,-40%)}15%,85%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-60%)}}
.small-egg-text{font-size:clamp(14px,3.5vw,24px)!important}
.nice-animation{color:#ffd700!important;text-shadow:0 0 20px #d4af37,0 0 10px #b8860b!important;font-family:serif;font-style:italic}
.dolphin{position:absolute;bottom:0;font-size:4rem;z-index:10000;animation:jump 4s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes jump{0%{transform:translate(-20vw,20vh) rotate(-30deg)}50%{transform:translate(50vw,-75vh) rotate(10deg)}100%{transform:translate(120vw,20vh) rotate(60deg)}}
.sparta-text{font-size:clamp(28px,7vw,56px);color:#dc2626;text-transform:uppercase}
.sparta-text-big{font-size:clamp(38px,9.5vw,76px);color:#dc2626;text-transform:uppercase;animation:spartaStamp 2s forwards}
@keyframes spartaStamp{0%{opacity:0;transform:translate(-50%,-50%) scale(3)}20%,80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0}}
.smoke-particle{position:absolute;bottom:-10%;background:radial-gradient(circle,rgba(34,197,94,.6) 0,transparent 70%);border-radius:50%;z-index:9998;pointer-events:none;animation:smokeRise 5s linear forwards}
@keyframes smokeRise{0%{transform:translateY(0) scale(1);opacity:0}20%{opacity:1}100%{transform:translateY(-100vh) scale(3);opacity:0}}
.fire-text-container{color:#ef4444;font-size:clamp(32px,8vw,64px);text-shadow:0 0 20px #f59e0b,0 0 40px #ef4444;animation:fireFlicker 3s forwards}
@keyframes fireFlicker{0%,100%{opacity:0}10%,90%{opacity:1}20%,40%,60%,80%{text-shadow:0 0 10px #f59e0b,0 0 30px #ef4444}30%,50%,70%{text-shadow:0 0 25px #facc15,0 0 50px #dc2626}}
.fire-particle{position:absolute;left:50%;top:50%;font-size:3rem;z-index:9998;animation:fireExplode 2s cubic-bezier(.25,1,.5,1) forwards}
@keyframes fireExplode{0%{transform:translate(-50%,-50%) scale(.5);opacity:1}100%{transform:translate(calc(-50% + (var(--tx) * 250px)),calc(-50% + (var(--ty) * 250px))) scale(2);opacity:0}}
.matrix-col{position:absolute;top:-100%;color:#22c55e;font-family:monospace;font-size:1.5rem;line-height:1;z-index:9999;white-space:pre;text-shadow:0 0 5px #16a34a;animation:matrixFall linear forwards}
@keyframes matrixFall{to{top:100%}}
.orwell-eye-svg{position:absolute;top:50%;left:50%;width:80%;max-width:400px;transform:translate(-50%,-50%);z-index:9999;animation:eggFade 4.6s forwards}
.orwell-pupil-group{animation:eyeLook 4.6s infinite}
@keyframes eyeLook{0%,100%{transform:translateX(0)}20%{transform:translateX(-15px)}40%{transform:translateX(15px)}60%{transform:translateX(-10px) translateY(-5px)}80%{transform:translateX(10px) translateY(5px)}}
.hal-eye{position:absolute;top:50%;left:50%;width:50%;max-width:300px;transform:translate(-50%,-50%);z-index:9998;animation:eggFade 7s forwards}
.flood-water{position:absolute;bottom:0;left:-50%;width:200%;height:0;background:rgba(14,165,233,.8);border-radius:40% 60% 0 0 / 10% 20% 0 0;z-index:9999;animation:flood 5s ease-in forwards, wave 3s infinite linear}
@keyframes wave{0%{border-radius:40% 60% 0 0 / 15% 25% 0 0}50%{border-radius:60% 40% 0 0 / 25% 15% 0 0}100%{border-radius:40% 60% 0 0 / 15% 25% 0 0}}
@keyframes flood{0%{height:0;transform:translateX(0);opacity:1}90%{height:120vh;transform:translateX(-10%);opacity:1}100%{height:120vh;transform:translateX(-10%);opacity:0}}
.neon-pink-text{color:#f472b6;font-size:clamp(28px,7vw,56px);text-shadow:0 0 10px #ec4899,0 0 20px #db2777}
.cyber-glitch{color:#facc15;font-family:monospace;font-size:clamp(28px,7vw,56px);animation:glitch .2s infinite}
@keyframes glitch{0%,100%{text-shadow:4px 0 #ef4444,-4px 0 #06b6d4;transform:translate(-50%,-50%)}25%{text-shadow:-4px 0 #ef4444,4px 0 #06b6d4;transform:translate(-51%,-49%) skew(-5deg)}50%{text-shadow:4px 0 #ef4444,-4px 0 #06b6d4;transform:translate(-49%,-51%)}75%{text-shadow:-4px 0 #ef4444,4px 0 #06b6d4;transform:translate(-52%,-48%) skew(5deg)}}
.dust-text{color:#d4d4d8;animation:dust 7.5s forwards!important}
@keyframes dust{0%,30%{opacity:1;filter:blur(0);letter-spacing:normal;transform:translate(-50%,-50%);color:#d4d4d8}100%{opacity:0;filter:blur(12px);letter-spacing:20px;transform:translate(-20%,-80%);color:#52525b}}
.patronus-text{color:#a5f3fc;text-shadow:0 0 20px #67e8f9}
.bing-bong-text{color:#e879f9;text-shadow:0 0 10px #c026d3}
.rainbow-arch{font-size:clamp(38px,9.5vw,76px);margin-bottom:10px}
.holy-light{color:#fef08a;text-shadow:0 0 50px #fde047,0 0 100px #eab308;animation:eggFade 4s forwards!important}
.lightning-overlay{position:absolute;inset:0;background:#3b82f6;z-index:9998;opacity:0;pointer-events:none;animation:lightning 4s forwards}
@keyframes lightning{0%,9%,11%,19%,21%,39%,41%,100%{opacity:0}10%,20%,40%{opacity:.9}}
.crow{position:absolute;font-size:clamp(80px,15vw,150px);z-index:9999;animation:fly 2.5s linear forwards;transform:scaleX(-1)}
@keyframes fly{0%{transform:translateX(0) translateY(0) scaleX(-1)}100%{transform:translateX(-150vw) translateY(-20vh) scaleX(-1)}}
.explosion{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;background:#ef4444;box-shadow:0 0 50px 20px #f59e0b;z-index:9999;transform:translate(-50%,-50%);animation:explode 1.5s forwards}
@keyframes explode{0%{transform:translate(-50%,-50%) scale(1);opacity:1}50%{background:#f59e0b;opacity:1}100%{transform:translate(-50%,-50%) scale(100);opacity:0;background:#000}}
.spraypaint{position:absolute;inset:0;background:radial-gradient(circle,rgba(156,163,175,.8) 0,transparent 70%);z-index:9998;opacity:0;pointer-events:none;animation:spray 3.5s forwards}
@keyframes spray{0%{opacity:0;transform:scale(.5)}20%,80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
.witness-text{color:#e5e7eb;text-shadow:0 0 20px #9ca3af;text-transform:uppercase}
.jack-text{animation:jackFade 5s forwards!important}
@keyframes jackFade{0%{color:#fff;transform:translate(-50%,-50%) scale(1);opacity:1}50%{color:#93c5fd;transform:translate(-50%,-50%) scale(.9);opacity:1}100%{color:#1e3a8a;transform:translate(-50%,-100%) scale(.5);opacity:0}}
.iron-man-text{font-family:Impact,sans-serif;text-transform:uppercase;color:#fcd34d!important;text-shadow:2px 2px 0 #b91c1c,-1px -1px 0 #b91c1c,0 0 20px #dc2626!important;font-size:clamp(28px,7vw,56px)}
.wakanda-text{color:#000!important;text-shadow:0 0 15px rgba(255,255,255,.8)!important;text-transform:uppercase;letter-spacing:2px}
.frankenstein-text{color:#fff;text-shadow:0 0 20px #3b82f6,0 0 40px #2563eb}
</style>
</head>
<body class="bg-transparent h-full w-full flex flex-col items-center justify-center p-0 text-[#e5e5e5]">
<input type="file" id="fileUpload" class="hidden" accept=".json" onchange="importState(event)">
<div id="appWrapper" class="w-full h-full bg-zinc-900 flex flex-col relative overflow-hidden">
<div id="frozenHeader" class="shrink-0 p-4 sm:p-6 pb-2 sm:pb-2 z-10"><div class="flex items-center justify-between"><div class="flex items-center gap-2 flex-1 min-w-0"><button id="addHeroBtn" onpointerdown="handlePlusPointerDown(event)" class="h-10 px-3 font-bold text-zinc-400 hover:text-white transition bg-zinc-800 rounded-xl border border-zinc-700 active:scale-95 shrink-0 flex items-center justify-center gap-2"></button><div id="reorderTooltip" class="text-[10px] text-zinc-500 hidden max-w-[200px] leading-tight">Press and hold a hero's tab, then press a dot to rearrange.</div></div><div class="flex items-center gap-2 shrink-0"><button onclick="executeAction(['s_grave'])" id="graveBtn" class="h-10 whitespace-nowrap px-4 text-[11px] font-bold rounded-xl transition border border-zinc-700 text-zinc-400 hover:text-white bg-zinc-800 flex items-center gap-1.5 active:scale-95"></button><button onclick="executeAction(['s_settings'])" id="settingsBtn" class="h-10 w-10 text-zinc-400 hover:text-white transition bg-zinc-800 rounded-xl border border-zinc-700 active:scale-95 flex items-center justify-center" title="Settings"></button></div></div></div>
<div id="mainScrollArea" class="flex-1 flex flex-col relative overflow-y-auto overflow-x-hidden main-scroll min-h-0" onscroll="handleScroll()">
<div id="landingView" class="flex-1 shrink-0 flex flex-col items-center justify-center text-center pt-8 pb-40 px-4 sm:px-6 relative"><div id="landingIcon" class="w-24 h-24 shrink-0 bg-pink-500/20 rounded-full flex items-center justify-center mb-4 border border-pink-500/40"></div><p class="text-zinc-500 text-[10px] uppercase tracking-[0.2em] font-bold mb-6">The Plastic Dragon presents:</p><div class="mb-4"><h1 class="fantasy-font text-4xl text-yellow-500 font-bold leading-tight">The Ultimate<br>D&D 5e HP Tracker</h1></div><p class="text-zinc-500 text-sm mb-10 max-w-[260px]">Assemble your party and track their journey through life and death.</p><div class="flex flex-col gap-4 w-full px-4 sm:px-8 shrink-0"><button onclick="executeAction(['s_add'])" class="w-full bg-green-700 hover:bg-green-600 py-4 rounded-2xl font-bold text-[#fff] shadow-[0_0_20px_rgba(22,163,74,0.4)] transition active:scale-95 flex items-center justify-center gap-3"><span id="btnIconAddBig"></span><span id="createBtnLabel">Start Your Adventure</span></button><button onclick="executeAction(['s_load'])" class="w-full bg-zinc-800 hover:bg-zinc-700 py-4 rounded-2xl font-bold text-zinc-300 border border-zinc-700 transition active:scale-95 flex items-center justify-center gap-3"><span id="btnIconLoadBig"></span><span id="loadBtnLabel"></span></button></div><button onclick="executeAction(['s_grave'])" id="landingGraveBtn" class="hidden mt-10 text-zinc-600 hover:text-zinc-400 text-xs font-bold uppercase tracking-widest border-b border-transparent hover:border-zinc-500 transition whitespace-nowrap"></button></div>
<div id="activeView" class="hidden shrink-0 flex flex-col px-4 sm:px-6 pt-0"><div class="mt-1 mb-4 relative shrink-0" id="activeSearchContainer"><input type="text" id="inlineActiveSearch" oninput="renderTabs()" placeholder="Filter active heroes..." class="w-full bg-zinc-800/50 border border-zinc-700 rounded-xl py-3 px-4 text-sm font-bold focus:outline-none focus:border-blue-500 transition placeholder:font-normal"><div class="absolute right-4 top-1/2 -translate-y-1/2 flex items-center pointer-events-none"><span class="sc-badge" data-sc="s_tracker"></span></div></div><div id="tabList" class="flex flex-wrap gap-2 items-center mb-6 pb-4 border-b border-zinc-800 shrink-0"></div><div id="interfaceBody" class="flex flex-col"></div></div>
<div id="deletedView" class="hidden shrink-0 flex flex-col px-4 sm:px-6 pt-0 mt-4"><div class="flex justify-between items-center mb-6 shrink-0"><h1 class="fantasy-font text-2xl text-zinc-500 font-bold italic">Graveyard</h1><button onclick="executeAction(['s_back'])" class="flex items-center gap-1.5 text-xs font-bold text-zinc-300 hover:text-white bg-zinc-800 border border-zinc-700 px-3 py-2 rounded-xl transition active:scale-95"><span class="icon-back"></span><span id="graveBackLabel"></span></button></div><div class="mt-1 mb-4 relative shrink-0" id="graveSearchContainer"><input type="text" id="inlineGraveSearch" oninput="renderGraveyard()" placeholder="Filter fallen heroes..." class="w-full bg-zinc-800/50 border border-zinc-700 rounded-xl py-3 px-4 text-sm font-bold focus:outline-none focus:border-blue-500 transition placeholder:font-normal"><div class="absolute right-4 top-1/2 -translate-y-1/2 flex items-center pointer-events-none"><span class="sc-badge" data-sc="s_grave"></span></div></div><div id="deletedList" class="space-y-3 flex-1 pb-4"></div><div id="graveyardFooter" class="mt-6 pt-6 border-t border-zinc-800 flex flex-col items-center gap-4 shrink-0"><button onclick="showModal('purgeAllModal')" class="flex items-center gap-2 text-[11px] font-bold text-red-500 transition uppercase tracking-widest bg-red-900/20 border border-red-900/30 hover:bg-red-900/40 px-6 py-2 rounded-lg active:scale-95 shadow-lg shadow-red-950/20 whitespace-nowrap">Purge Graveyard <span class="sc-lbl" data-sc="s_gy_purge_all"></span></button></div></div>
<div id="settingsView" class="hidden shrink-0 flex flex-col px-4 sm:px-6 pt-0 mt-4 pb-8"><div class="flex justify-between items-center mb-4 shrink-0"><h1 class="fantasy-font text-2xl text-zinc-100 font-bold">Settings</h1><button onclick="executeAction(['s_back'])" class="flex items-center gap-1.5 text-xs font-bold text-zinc-300 hover:text-white bg-zinc-800 border border-zinc-700 px-3 py-2 rounded-xl transition active:scale-95"><span class="icon-back"></span><span id="setBackLabel"></span></button></div><div class="mt-1 mb-4 relative shrink-0"><input type="text" id="inlineSettingSearch" oninput="filterSettings()" placeholder="Filter settings..." class="w-full bg-zinc-800/50 border border-zinc-700 rounded-xl py-3 px-4 text-sm font-bold focus:outline-none focus:border-blue-500 transition placeholder:font-normal"><div class="absolute right-4 top-1/2 -translate-y-1/2 flex items-center pointer-events-none"><span class="sc-badge" data-sc="s_settings"></span></div></div><div id="settingsTabList" class="flex flex-wrap gap-2 border-b border-zinc-800 mb-6 shrink-0 w-full pb-1"></div><div id="settingsBody" class="flex flex-col flex-1"></div></div></div>
<button id="quickScrollBtn" class="absolute bottom-4 sm:bottom-6 left-1/2 -translate-x-1/2 z-40 bg-zinc-800/40 backdrop-blur-md text-white h-10 w-10 rounded-full border border-zinc-600/50 shadow-xl transition hover:bg-zinc-700/60 active:scale-95 flex items-center justify-center hidden"></button><button id="bottomFullscreenBtn" onclick="executeAction(['s_fullscreen'])" class="absolute bottom-4 right-4 sm:bottom-6 sm:right-6 z-40 bg-zinc-800/40 backdrop-blur-md text-white h-10 w-10 rounded-full border border-zinc-600/50 shadow-xl transition hover:bg-zinc-700/60 active:scale-95 flex items-center justify-center hidden"></button>
<div id="navHints" class="absolute bottom-4 left-4 sm:bottom-6 sm:left-6 z-30 flex-col gap-2 pointer-events-none hidden items-start"><div class="shadow-md bg-zinc-800 flex items-center gap-2 py-1.5 px-3 rounded-lg border border-zinc-700"><span class="text-zinc-200 text-[10px] font-bold uppercase tracking-wider">Scroll</span><span class="text-zinc-400 border border-zinc-600 bg-zinc-700 px-1.5 py-0.5 rounded text-[9px] font-bold">Ctrl+↕</span></div><div class="shadow-md bg-zinc-800 flex items-center gap-2 py-1.5 px-3 rounded-lg border border-zinc-700"><span class="text-zinc-200 text-[10px] font-bold uppercase tracking-wider">Navigate</span><span class="text-zinc-400 border border-zinc-600 bg-zinc-700 px-1.5 py-0.5 rounded text-[9px] font-bold">Arrows</span></div></div>
<div id="toastContainer" class="fixed bottom-20 left-1/2 -translate-x-1/2 z-[60] flex flex-col gap-2 pointer-events-none w-max max-w-[90vw]"></div>
<div id="modalContainer" class="absolute inset-0 z-50 hidden flex items-center justify-center p-4 sm:p-6 modal-overlay">
<div id="actionPromptModal" class="bg-zinc-900 border border-zinc-800 p-6 sm:p-8 rounded-3xl max-w-xs w-full text-center shadow-2xl hidden"><h2 id="actionPromptTitle" class="fantasy-font text-zinc-100 text-2xl mb-6">Action</h2><input type="number" id="actionPromptInput" class="w-full bg-zinc-800 border border-zinc-700 rounded-xl py-4 text-center focus:outline-none text-2xl font-bold focus:border-blue-500 mb-6 no-spinners"><div class="flex gap-3"><button id="actionPromptConfirm" class="flex-1 bg-blue-600 hover:bg-blue-500 py-3 rounded-xl font-bold text-white transition active:scale-95"></button><button onclick="closeModals()" class="flex-1 bg-zinc-800 hover:bg-zinc-700 py-3 rounded-xl font-bold text-zinc-400 transition">Cancel <span class="sc-lbl ml-1">(ESC)</span></button></div></div>
<div id="searchModal" class="bg-zinc-900 border border-zinc-800 p-6 rounded-3xl max-w-sm w-full text-center shadow-2xl hidden flex flex-col max-h-[80vh]"><h2 id="searchModalTitle" class="fantasy-font text-zinc-100 text-xl mb-4">Search Heroes</h2><input type="text" id="searchInput" placeholder="Type a name..." class="w-full bg-zinc-800 border border-zinc-700 rounded-xl py-3 px-4 focus:outline-none text-sm focus:border-green-600 mb-4"><div id="searchResultsList" class="flex-1 overflow-y-auto main-scroll space-y-2 text-left text-sm font-bold text-zinc-300"></div><button onclick="closeModals()" class="w-full bg-zinc-800 hover:bg-zinc-700 py-3 rounded-xl font-bold text-zinc-400 transition mt-4 shrink-0">Cancel <span class="sc-lbl ml-1">(ESC)</span></button></div>
<div id="createHeroModal" class="bg-zinc-900 border border-zinc-800 p-6 sm:p-8 rounded-3xl max-w-xs w-full text-center shadow-2xl hidden"><h2 class="fantasy-font text-zinc-100 text-2xl mb-6">Set Hero Stats</h2><div class="mb-4 text-left"><label class="block text-[10px] text-zinc-500 uppercase font-bold mb-2">Hero Name</label><input type="text" id="newHeroNameInput" maxlength="100" class="w-full bg-zinc-800 border border-zinc-700 rounded-xl py-3 text-center focus:outline-none text-xl focus:border-green-600"></div><div class="mb-6 text-left"><label class="block text-[10px] text-zinc-500 uppercase font-bold mb-2">Maximum HP</label><input type="number" id="newHeroMaxHpInput" min="1" max="10000" class="w-full bg-zinc-800 border border-zinc-700 rounded-xl py-4 text-center focus:outline-none text-xl focus:border-green-600 no-spinners"></div><div class="flex flex-col gap-3"><button onclick="confirmCreateHero()" class="w-full bg-green-700 hover:bg-green-600 py-4 rounded-xl font-bold text-[#fff] transition active:scale-95 shadow-[0_0_15px_rgba(22,163,74,0.3)]">Create Hero <span class="sc-lbl ml-1">(Enter)</span></button><button onclick="openCalculator('new')" class="w-full bg-blue-700/20 border border-blue-700/50 text-blue-400 hover:bg-blue-700/30 py-3 rounded-xl font-bold transition active:scale-95 flex items-center justify-center gap-2"><span class="icon-calc-sm"></span> HP Calculator <span class="sc-lbl ml-1" data-sc="s_calc"></span></button><button onclick="closeModals()" class="w-full bg-zinc-800 py-3 rounded-xl font-bold text-zinc-400 hover:bg-zinc-700 transition">Cancel <span class="sc-lbl ml-1">(ESC)</span></button></div></div>
<div id="hpCalculatorModal" class="bg-zinc-900 border border-zinc-800 p-6 sm:p-8 rounded-3xl max-w-xs sm:max-w-sm w-full shadow-2xl hidden max-h-[90vh] overflow-y-auto main-scroll"><h2 class="fantasy-font text-zinc-100 text-2xl mb-4 text-center">HP Calculator</h2><div class="space-y-4 text-sm text-zinc-300"><div class="flex items-center gap-2"><label class="font-bold text-xs uppercase text-zinc-500 whitespace-nowrap">Hit Die</label><select id="calcHd1" oninput="doHPCalc('average')" class="bg-zinc-800 border border-zinc-700 rounded-xl p-2 focus:outline-none flex-1 font-bold text-center"><option value="6">d6</option><option value="8" selected>d8</option><option value="10">d10</option><option value="12">d12</option></select><label class="font-bold text-xs uppercase text-zinc-500 ml-2 whitespace-nowrap">Level</label><select id="calcLvl1" oninput="doHPCalc('average')" class="bg-zinc-800 border border-zinc-700 rounded-xl p-2 w-16 text-center focus:outline-none font-bold"></select></div><div class="flex items-center justify-between gap-2 mt-3 mb-2"><label class="font-bold text-xs uppercase text-zinc-500 whitespace-nowrap">Constitution Modifier</label><input type="number" id="calcCon" oninput="doHPCalc('average')" value="0" class="bg-zinc-800 border border-zinc-700 rounded-xl p-2 w-16 text-center focus:outline-none font-bold no-spinners"></div><div class="grid grid-cols-2 gap-3 text-xs mt-2 bg-zinc-950/50 p-4 rounded-xl border border-zinc-800"><label tabindex="0" class="flex items-center gap-2 cursor-pointer font-bold"><input tabindex="-1" type="checkbox" id="calcTough" oninput="doHPCalc('average')" class="w-4 h-4 rounded bg-zinc-800 border-zinc-700 accent-red-500"> Tough Feat</label><label tabindex="0" class="flex items-center gap-2 cursor-pointer font-bold"><input tabindex="-1" type="checkbox" id="calcDwarf" oninput="doHPCalc('average')" class="w-4 h-4 rounded bg-zinc-800 border-zinc-700 accent-red-500"> Hill Dwarf</label><label tabindex="0" class="flex items-center gap-2 cursor-pointer col-span-2 font-bold"><input tabindex="-1" type="checkbox" id="calcDrac1" oninput="doHPCalc('average')" class="w-4 h-4 rounded bg-zinc-800 border-zinc-700 accent-red-500"> Draconic Sorcerer (Class 1)</label></div><hr class="border-zinc-800 my-4"><details class="group"><summary tabindex="0" class="cursor-pointer text-xs font-bold text-zinc-500 uppercase tracking-widest text-center hover:text-white transition pb-1">Multiclass Options</summary><div class="space-y-4 mt-4 bg-zinc-800/20 p-4 rounded-2xl border border-zinc-800/50"><div><p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mb-2">Second Class</p><div class="flex items-center gap-2 mb-2"><label class="font-bold text-[10px] uppercase text-zinc-500 whitespace-nowrap">Hit Die</label><select id="calcHd2" oninput="doHPCalc('average')" class="bg-zinc-800 border border-zinc-700 rounded-lg p-1.5 focus:outline-none flex-1 text-xs font-bold text-center"><option value="6">d6</option><option value="8" selected>d8</option><option value="10">d10</option><option value="12">d12</option></select><label class="font-bold text-[10px] uppercase text-zinc-500 ml-2 whitespace-nowrap">Level</label><select id="calcLvl2" oninput="doHPCalc('average')" class="bg-zinc-800 border border-zinc-700 rounded-lg p-1.5 w-14 text-center focus:outline-none text-xs font-bold"></select></div><label tabindex="0" class="flex items-center gap-2 cursor-pointer text-[10px] font-bold"><input tabindex="-1" type="checkbox" id="calcDrac2" oninput="doHPCalc('average')" class="w-3 h-3 rounded bg-zinc-800 border-zinc-700 accent-red-500"> Draconic Sorcerer</label></div><hr class="border-zinc-800/50"><div><p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mb-2">Third Class</p><div class="flex items-center gap-2 mb-2"><label class="font-bold text-[10px] uppercase text-zinc-500 whitespace-nowrap">Hit Die</label><select id="calcHd3" oninput="doHPCalc('average')" class="bg-zinc-800 border border-zinc-700 rounded-lg p-1.5 focus:outline-none flex-1 text-xs font-bold text-center"><option value="6">d6</option><option value="8" selected>d8</option><option value="10">d10</option><option value="12">d12</option></select><label class="font-bold text-[10px] uppercase text-zinc-500 ml-2 whitespace-nowrap">Level</label><select id="calcLvl3" oninput="doHPCalc('average')" class="bg-zinc-800 border border-zinc-700 rounded-lg p-1.5 w-14 text-center focus:outline-none text-xs font-bold"></select></div><label tabindex="0" class="flex items-center gap-2 cursor-pointer text-[10px] font-bold"><input tabindex="-1" type="checkbox" id="calcDrac3" oninput="doHPCalc('average')" class="w-3 h-3 rounded bg-zinc-800 border-zinc-700 accent-red-500"> Draconic Sorcerer</label></div></div></details><hr class="border-zinc-800 my-4"><div class="bg-zinc-950 p-5 rounded-2xl text-center border border-zinc-800 mt-2"><p id="calcResultLabel" class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mb-2">Calculated HP</p><div class="text-6xl font-bold text-yellow-500 mb-2 font-mono tracking-tighter" id="calcResultDisplay" data-val="0">0</div><p class="text-[11px] text-zinc-500 mb-5 font-bold">Total Level <span id="calcTotalLevelDisplay" class="text-white ml-1">1</span></p><div class="flex gap-2 justify-center"><button type="button" onclick="doHPCalc('average')" class="flex-1 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 text-xs py-2.5 rounded-xl font-bold transition active:scale-95 text-white">Average</button><button type="button" onclick="doHPCalc('roll')" class="flex-1 bg-blue-900/20 text-blue-500 hover:bg-blue-900/40 border border-blue-900/30 text-xs py-2.5 rounded-xl font-bold transition active:scale-95">Roll for HP</button></div></div><div class="flex flex-col gap-2 mt-4"><button type="button" onclick="applyCalculatorResult()" class="w-full bg-green-700 hover:bg-green-600 py-3.5 rounded-xl font-bold text-[#fff] transition active:scale-95 shadow-[0_0_15px_rgba(22,163,74,0.3)]">Apply to Hero <span class="sc-lbl ml-1">(Enter)</span></button><button type="button" onclick="closeCalculator()" class="w-full bg-zinc-800 py-3 rounded-xl font-bold text-zinc-400 hover:bg-zinc-700 transition">Cancel <span class="sc-lbl ml-1">(ESC)</span></button></div></div></div>
<div id="downedModal" class="bg-zinc-900 border-2 border-red-900 p-6 sm:p-8 rounded-3xl max-w-xs w-full text-center shadow-2xl hidden"><h2 class="fantasy-font text-red-600 text-3xl mb-2">Downed!</h2><p id="downedHeroNameDisplay" class="text-white font-bold mb-8"></p><div class="flex flex-col gap-3"><button id="btnDownedStab" onclick="stabilize()" class="w-full bg-green-700 py-3 rounded-xl font-bold transition flex items-center justify-center gap-2">Stabilized <span class="sc-lbl" data-sc="s_downed_stab"></span></button><button onclick="executeAction(['s_downed_ds'])" class="w-full bg-zinc-800 py-3 rounded-xl font-bold transition flex items-center justify-center gap-2">Death Saves <span class="sc-lbl" data-sc="s_downed_ds"></span></button><button onclick="executeAction(['s_ds_kill'])" class="w-full bg-red-950 text-red-200 py-3 rounded-xl font-bold border border-red-900 flex items-center justify-center gap-2" id="btnDownedKill"></button></div></div>
<div id="deathAnnouncementModal" class="bg-zinc-950 border-2 border-red-600 p-6 sm:p-8 rounded-[2rem] max-w-xs w-full text-center shadow-2xl hidden"><h2 class="fantasy-font text-red-600 text-2xl mb-2">A Hero Falls</h2><p id="fallenHeroNameDisplay" class="text-white font-bold text-xl mb-4"></p><button onclick="closeModals()" class="w-full bg-zinc-800 py-4 rounded-xl font-bold transition">Farewell <span class="sc-lbl ml-1">(Enter)</span></button></div>
<div id="logModal" class="bg-zinc-900 border border-zinc-800 p-6 rounded-3xl max-w-sm w-full hidden flex flex-col h-full max-h-[500px]"><h2 id="logHeroName" class="fantasy-font text-zinc-100 text-xl font-bold mb-4">Hero Log</h2><div id="logModalActions" class="grid grid-cols-2 gap-3 mb-4 hidden shrink-0"><button onclick="executeAction(['s_gy_revive'])" id="btnLogRevive" class="bg-green-900/20 flex justify-center items-center gap-2 text-green-500 border border-green-900/30 hover:bg-green-900/40 py-2.5 rounded-xl font-bold text-xs transition active:scale-95"></button><button onclick="executeAction(['s_gy_purge'])" id="btnLogPurge" class="bg-red-900/20 flex justify-center items-center gap-2 text-red-500 border border-red-900/30 hover:bg-red-900/40 py-2.5 rounded-xl font-bold text-xs transition active:scale-95"></button></div><div id="logContentScroll" class="text-[11px] space-y-2 flex-1 overflow-y-auto pr-4 log-container mb-6 border-y border-zinc-800 py-4"></div><button onclick="closeModals()" class="w-full bg-zinc-800 py-3 rounded-xl font-bold shrink-0">Close <span class="sc-lbl ml-1">(Enter/ESC)</span></button></div>
<div id="deleteConfirmModal" class="bg-zinc-950 border border-zinc-800 p-6 sm:p-8 rounded-3xl max-w-xs w-full text-center hidden shadow-2xl"><h2 class="fantasy-font text-zinc-100 text-xl mb-6">Retire this hero?</h2><button onclick="retireActiveHero()" class="w-full bg-red-700 py-3 rounded-xl font-bold mb-3">Retire <span class="sc-lbl ml-1">(Enter)</span></button><button onclick="closeModals()" class="w-full bg-zinc-800 py-3 rounded-xl font-bold text-zinc-400">Cancel <span class="sc-lbl ml-1">(ESC)</span></button></div>
<div id="messageModal" class="bg-zinc-900 border border-zinc-700 p-6 sm:p-8 rounded-3xl max-w-xs w-full text-center hidden"><h2 id="messageTitle" class="fantasy-font text-white text-xl mb-2"></h2><p id="messageBody" class="text-zinc-400 text-sm mb-6"></p><button onclick="closeModals()" class="w-full bg-zinc-800 py-3 rounded-xl font-bold active:scale-95">OK <span class="sc-lbl ml-1">(Enter/ESC)</span></button></div>
<div id="hardResetModal" class="bg-zinc-950 border-2 border-red-600 p-6 sm:p-8 rounded-3xl max-w-xs w-full text-center hidden"><h2 class="fantasy-font text-red-600 text-2xl mb-4">Wipe Adventure?</h2><p class="text-zinc-400 text-xs mb-8 leading-relaxed">This will permanently delete all current party members, their full health history, and all fallen heroes in the graveyard. This action cannot be undone.</p><button onclick="hardReset()" class="w-full bg-red-700 py-4 rounded-xl font-bold text-white transition active:scale-95 mb-3">Reset Everything <span class="sc-lbl ml-1">(Enter)</span></button><button onclick="closeModals()" class="w-full bg-zinc-800 py-3 rounded-xl font-bold text-zinc-400">Cancel <span class="sc-lbl ml-1">(ESC)</span></button></div>
<div id="purgeAllModal" class="bg-zinc-950 border-2 border-red-600 p-6 sm:p-8 rounded-3xl max-w-xs w-full text-center hidden"><h2 class="fantasy-font text-red-600 text-xl mb-6">Purge graveyard?</h2><button onclick="confirmPurge()" class="w-full bg-red-900 py-3 rounded-xl font-bold border border-red-600 mb-3">Purge <span class="sc-lbl ml-1">(Enter)</span></button><button onclick="closeModals()" class="w-full bg-zinc-900 py-3 rounded-xl font-bold">Cancel <span class="sc-lbl ml-1">(ESC)</span></button></div>
<div id="purgeSingleModal" class="bg-zinc-900 border border-zinc-800 p-6 sm:p-8 rounded-3xl max-w-xs w-full text-center hidden"><h2 class="fantasy-font text-red-500 text-xl mb-6">Erase hero?</h2><button id="confirmPurgeSingleBtn" class="w-full bg-red-800 py-3 rounded-xl font-bold mb-3">Erase Forever <span class="sc-lbl ml-1">(Enter)</span></button><button onclick="closeModals()" class="w-full bg-zinc-800 py-3 rounded-xl font-bold">Keep Them <span class="sc-lbl ml-1">(ESC)</span></button></div>
</div></div>
<script>
    const el = id => document.getElementById(id);
    const qAll = q => document.querySelectorAll(q);
    const getHero = () => state.party[state.index];

    [1, 2, 3].forEach(i => {
        let s = el(`calcLvl${i}`);
        if (s) s.innerHTML = Array.from({ length: 21 }, (_, j) => `<option value="${j}">${j}</option>`).slice(i === 1 ? 1 : 0).join('');
    });

    const svg = (p, c = "h-5 w-5 shrink-0", sw = "2") => `<svg xmlns="http://www.w3.org/2000/svg" class="${c}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round">${p}</svg>`;
    
    const ICONS = {
        add: svg(`<path d="M12 4v16m8-8H4"/>`, "h-5 w-5 shrink-0", "3"),
        cog: svg(`<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>`),
        back: svg(`<polyline points="15 18 9 12 15 6"/>`, "w-3.5 h-3.5 shrink-0", "2.5"),
        full: svg(`<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>`, "w-[18px] h-[18px]"),
        min: svg(`<path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/>`, "w-[18px] h-[18px]"),
        calc: svg(`<rect x="4" y="2" width="16" height="20" rx="2" ry="2"/><line x1="8" y1="6" x2="16" y2="6"/><line x1="16" y1="14" x2="16.01" y2="14"/><line x1="12" y1="14" x2="12.01" y2="14"/><line x1="8" y1="14" x2="8.01" y2="14"/><line x1="16" y1="18" x2="16.01" y2="18"/><line x1="12" y1="18" x2="12.01" y2="18"/><line x1="8" y1="18" x2="8.01" y2="18"/>`, "w-[22px] h-[22px]", "2.5"),
        calcSm: svg(`<rect x="4" y="2" width="16" height="20" rx="2" ry="2"/><line x1="8" y1="6" x2="16" y2="6"/><line x1="16" y1="14" x2="16.01" y2="14"/><line x1="12" y1="14" x2="12.01" y2="14"/><line x1="8" y1="14" x2="8.01" y2="14"/><line x1="16" y1="18" x2="16.01" y2="18"/><line x1="12" y1="18" x2="12.01" y2="18"/><line x1="8" y1="18" x2="8.01" y2="18"/>`, "w-4 h-4", "2.5"),
        undo: svg(`<path d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>`, "h-3.5 w-3.5", "2.5"),
        redo: svg(`<path d="M21 10h-10a8 8 0 00-8 8v2m18-10l-6 6m6-6l-6-6"/>`, "h-3.5 w-3.5", "2.5"),
        save: svg(`<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>`, "w-4 h-4", "2.5"),
        load: svg(`<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>`, "w-4 h-4", "2.5"),
        danger: svg(`<path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>`, "h-4 w-4"),
        sun: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="text-yellow-500"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>`,
        skull: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="w-12 h-12 text-zinc-700 mb-4"><path d="M5 21v-8a7 7 0 0 1 14 0v8M3 21h18"/><path d="M12 9v6M10 11h4"/></svg>`,
        dragon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>`,
        heal: svg(`<path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>`),
        retire: svg(`<path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>`),
        down: svg(`<path d="M19 14l-7 7m0 0l-7-7m7 7V3"/>`, "w-[18px] h-[18px]"),
        up: svg(`<path d="M5 10l7-7m0 0l7 7m-7-7v18"/>`, "w-[18px] h-[18px]")
    };

    const scLabel = (id, ex = '') => `<span class="sc-lbl ${ex}" data-sc="${id}"></span>`;
    const scBadge = id => `<span class="sc-badge" data-sc="${id}"></span>`;

    el('addHeroBtn').innerHTML = ICONS.add + scLabel('s_add', 'ml-1 opacity-100');
    el('settingsBtn').innerHTML = ICONS.cog + scLabel('s_settings', 'ml-1');
    el('landingIcon').innerHTML = ICONS.dragon;
    el('btnIconAddBig').innerHTML = ICONS.add;
    el('btnIconLoadBig').innerHTML = ICONS.load;
    qAll('.icon-back').forEach(e => e.outerHTML = ICONS.back);
    qAll('.icon-calc-sm').forEach(e => e.outerHTML = ICONS.calcSm);
    el('bottomFullscreenBtn').innerHTML = ICONS.full;

    const DEF_SC = {
        s_save: 'Ctrl+S', s_load: 'Ctrl+L', s_undo: 'Ctrl+Z', s_redo: 'Ctrl+Y', s_add: 'Shift+N',
        s_tracker: 'T', s_grave: 'G', s_settings: 'Q', s_light: 'L', s_fullscreen: 'Ctrl+F', s_toggle_sc: 'Ctrl+B',
        s_heal: 'H', s_dmg: 'D', s_temp: 'Alt+T', s_rename: 'Ctrl+R',
        s_maxup: 'Ctrl+H', s_maxdown: 'Ctrl+D', s_fullheal: 'Ctrl+Shift+H', s_retire: 'Ctrl+Shift+D', s_calc: 'C',
        s_qadj_10: '1', s_qadj_5: '2', s_qadj_1: '3', s_qadj_m1: '4', s_qadj_m5: '5', s_qadj_m10: '6',
        s_downed_stab: 'Ctrl+H', s_downed_ds: 'D',
        s_ds_succ: 'H', s_ds_fail: 'D', s_ds_nat1: '1', s_ds_nat20: '2', s_ds_revive: 'Ctrl+H', s_ds_kill: 'Ctrl+D',
        s_gy_revive: 'H', s_gy_purge: 'D', s_gy_purge_all: 'Ctrl+Shift+D',
        s_set_save: 'Alt+S', s_set_disp: 'Alt+D', s_set_short: 'Alt+C', s_set_def: 'Alt+Shift+D', s_set_about: 'Alt+A',
        s_back: 'ESC'
    };

    const SC_DEFS = [
        { c: 'Spatial Navigation', i: [{ id: 's_nav_arr', l: 'Navigate Focus', fixed: 'Arrows' }, { id: 's_nav_mscroll', l: 'Micro Scroll', fixed: 'Ctrl+↕' }, { id: 's_nav_scroll', l: 'Scroll View', fixed: 'Shift+↕' }] },
        { c: 'Global Navigation', i: [{ id: 's_tracker', l: 'Tracker / Search' }, { id: 's_grave', l: 'Graveyard / Search' }, { id: 's_settings', l: 'Settings / Search' }, { id: 's_back', l: 'Back / Close Modal' }] },
        { c: 'Global Actions', i: [{ id: 's_save', l: 'Save Adventure' }, { id: 's_load', l: 'Load Adventure' }, { id: 's_undo', l: 'Undo Action' }, { id: 's_redo', l: 'Redo Action' }, { id: 's_add', l: 'Add New Hero' }, { id: 's_light', l: 'Toggle Light Mode' }, { id: 's_fullscreen', l: 'Toggle Fullscreen' }, { id: 's_toggle_sc', l: 'Toggle Shortcuts View' }] },
        { c: 'Tracker Actions', i: [{ id: 's_heal', l: 'Heal Hero' }, { id: 's_dmg', l: 'Damage Hero' }, { id: 's_temp', l: 'Set Temp HP' }, { id: 's_rename', l: 'Rename Hero' }, { id: 's_maxup', l: 'Increase Max HP' }, { id: 's_maxdown', l: 'Lower Max HP' }, { id: 's_fullheal', l: 'Full Heal' }, { id: 's_retire', l: 'Retire Hero' }, { id: 's_calc', l: 'HP Calculator' }] },
        { c: 'Quick Adjustments', i: [{ id: 's_qadj_10', l: '+10 HP' }, { id: 's_qadj_5', l: '+5 HP' }, { id: 's_qadj_1', l: '+1 HP' }, { id: 's_qadj_m1', l: '-1 HP' }, { id: 's_qadj_m5', l: '-5 HP' }, { id: 's_qadj_m10', l: '-10 HP' }] },
        { c: 'Death Saves', i: [{ id: 's_ds_succ', l: 'Success' }, { id: 's_ds_fail', l: 'Failure' }, { id: 's_ds_nat20', l: 'Nat 20' }, { id: 's_ds_nat1', l: 'Nat 1' }, { id: 's_downed_stab', l: 'Stabilize Hero' }, { id: 's_downed_ds', l: 'Enter Death Saves' }, { id: 's_ds_revive', l: 'Revive from Death Saves' }, { id: 's_ds_kill', l: 'Kill Hero' }] },
        { c: 'Graveyard Log', i: [{ id: 's_gy_revive', l: 'Revive Hero' }, { id: 's_gy_purge', l: 'Purge Hero' }, { id: 's_gy_purge_all', l: 'Purge Entire Graveyard' }] },
        { c: 'Settings Tabs', i: [{ id: 's_set_save', l: 'Saving Tab' }, { id: 's_set_disp', l: 'Display Tab' }, { id: 's_set_short', l: 'Shortcuts Tab' }, { id: 's_set_def', l: 'Defaults Tab' }, { id: 's_set_about', l: 'About Tab' }] }
    ];

    const DEFAULT_SETTINGS = { defaultMaxHP: 10, defaultName: 'Hero', timeFormat: '12h', fontMonospace: false, dateFormat: 'MM/DD/YY', lightMode: false, autoSave: true, showFullscreenBtn: true, fontScale: 100, showSeconds: false, showShortcuts: false, customShortcuts: {} };
    let state = { view: 'active', index: 0, party: [], graveyard: [], editIndex: null, hasReordered: false, settings: {}, foundEggs: [] };

    const createPopup = (h, c, d, t, a) => { setTimeout(() => { const e = document.createElement('div'); if (c) e.className = c; if (a) e.style.animationName = a; if (t) e.style.animationDuration = t + 'ms'; e.innerHTML = h; el('appWrapper').appendChild(e); setTimeout(() => e.remove(), t); }, d); };
    const popE = (e, m, d, c = "easter-egg-text") => createPopup(e ? `<div style='font-size:12vmin;margin-bottom:10px;'>${e}</div>${m}` : m, c, 0, d);

    const EGGS_HP = {
        '21': { id: 'hp_21', d: 3000, fn: () => popE("", "u stoopid?", 3000) },
        '42': { id: 'hp_42', d: 4500, fn: () => { for (let i = 0; i < 3; i++) setTimeout(() => { const d = document.createElement('div'); d.className = 'dolphin'; d.innerText = '🐬'; d.style.animationDelay = (i * .3) + 's'; el('appWrapper').appendChild(d); setTimeout(() => d.remove(), 4000); }, i * 300); createPopup("So long and thanks for all the fish.", "easter-egg-text dolphin-text", 500, 3500); } },
        '69': { id: 'hp_69', d: 2600, fn: () => createPopup("Nice.", "easter-egg-text nice-animation", 0, 2600) },
        '300': { id: 'hp_300', d: 4000, fn: () => { createPopup("THIS", "easter-egg-text sparta-text", 0, 1000); createPopup("IS", "easter-egg-text sparta-text", 1000, 1000); createPopup("SPARTAAA!", "easter-egg-text sparta-text-big", 2000, 2000); } },
        '420': { id: 'hp_420', d: 5100, fn: () => { for (let i = 0; i < 30; i++) setTimeout(() => { const s = document.createElement('div'); s.className = 'smoke-particle'; s.style.left = (5 + (Math.random() * 90)) + '%'; s.style.animationDelay = (Math.random() * .5) + 's'; s.style.width = (120 + Math.random() * 180) + 'px'; s.style.height = s.style.width; el('appWrapper').appendChild(s); setTimeout(() => s.remove(), 5100); }, i * 80); } },
        '451': { id: 'hp_451', d: 3500, fn: () => popE("📚🔥", "", 3500, "easter-egg-text fire-text-container") },
        '666': { id: 'hp_666', d: 3000, fn: () => popE("😈", "", 3000, "easter-egg-text fire-text-container") },
        '911': { id: 'hp_911', d: 3000, fn: () => popE("🫡", "Never forget.", 3000) },
        '1337': { id: 'hp_1337', d: 4500, fn: () => { for (let i = 0; i < 25; i++) setTimeout(() => { const c = document.createElement('div'); c.className = 'matrix-col'; c.style.left = (Math.random() * 95) + '%'; c.style.animationDuration = (2 + Math.random() * 2) + 's'; c.innerText = Array.from({ length: 10 + Math.floor(Math.random() * 15) }).map(() => Math.random() > .5 ? '1' : '0').join('\n'); el('appWrapper').appendChild(c); setTimeout(() => c.remove(), 4500); }, Math.random() * 1000); } },
        '1984': { id: 'hp_1984', d: 4600, fn: () => createPopup(`<svg class="orwell-eye-svg" viewBox="0 0 100 50"><path d="M 0 25 Q 50 -10 100 25 Q 50 60 0 25 Z" fill="#f4f4f5" stroke="#18181b" stroke-width="2"/><clipPath id="ec1984"><path d="M 0 25 Q 50 -10 100 25 Q 50 60 0 25 Z"/></clipPath><g clip-path="url(#ec1984)"><g class="orwell-pupil-group"><circle cx="50" cy="25" r="14" fill="#dc2626"/><circle cx="50" cy="25" r="6" fill="#000"/><circle cx="54" cy="21" r="2" fill="#fff" opacity="0.8"/></g></g></svg>`, "", 0, 4600) },
        '2001': { id: 'hp_2001', d: 7000, fn: () => { createPopup(`<svg viewBox="0 0 100 100" class="w-full h-full"><circle cx="50" cy="50" r="45" fill="#111" stroke="#333" stroke-width="5"/><circle cx="50" cy="50" r="25" fill="#ef4444" filter="blur(2px)"/><circle cx="50" cy="50" r="10" fill="#fef08a" filter="blur(1px)"/></svg>`, "easter-egg-text hal-eye", 0, 7000); createPopup("I'm sorry Dave.", "easter-egg-text hal-text", 1000, 2500); createPopup("I'm afraid I can't let you do that.", "easter-egg-text hal-text", 4000, 3000); } },
        '2012': { id: 'hp_2012', d: 5000, fn: () => { el('appWrapper').insertAdjacentHTML('beforeend', '<div class="flood-water"></div>'); setTimeout(() => { const fw = el('appWrapper').querySelector('.flood-water'); if(fw) fw.remove(); }, 5000); } },
        '2049': { id: 'hp_2049', d: 5500, fn: () => { createPopup("You look lonely.", "easter-egg-text neon-pink-text", 0, 2600); createPopup("I can fix that.", "easter-egg-text neon-pink-text", 2500, 2600); } },
        '2077': { id: 'hp_2077', d: 6000, fn: () => { const g = (t, d) => setTimeout(() => { const e = document.createElement('div'); e.className = 'easter-egg-text cyber-glitch'; e.innerText = t; el('appWrapper').appendChild(e); setTimeout(() => e.remove(), 2600); }, d); g("What makes someone a criminal?", 0); g("Getting Caught.", 2800); } },
        '2137': { id: 'hp_2137', d: 3000, fn: () => popE("🙏", "Amen", 3000) },
        '8008': { id: 'hp_8008', d: 3000, fn: () => popE("", "hehe boobies", 3000) },
        '9001': { id: 'hp_9001', d: 3500, fn: () => { createPopup("ITS OVER 9000!!", "easter-egg-text fire-text-container", 0, 3500); for(let i=0;i<30;i++){ setTimeout(()=>{ const f=document.createElement('div'); f.innerText='🔥'; f.className='fire-particle'; f.style.setProperty('--tx', Math.random()*2-1); f.style.setProperty('--ty', Math.random()*2-1); el('appWrapper').appendChild(f); setTimeout(()=>f.remove(),2000); }, Math.random()*500); } } }
    };

    const EGGS_DEATH = [
        { k: 'kenny', id: 'death_kenny', d: 3000, fn: () => popE("", "OH MY GOD, THEY KILLED KENNY!", 3000) },
        { k: 'epstein', id: 'death_epstein', d: 3000, fn: () => popE("", "That wasn't suicide.", 3000) },
        { k: 'osama', id: 'death_osama', d: 3000, fn: () => popE("", "Ladies and gentlemen, we got 'em.", 3000) },
        { k: 'gandalf', id: 'death_gandalf', d: 4000, fn: () => { if (!state.settings?.lightMode) updateSetting('lightMode', true); else { document.body.classList.remove('light-mode'); setTimeout(() => document.body.classList.add('light-mode'), 4000); } popE("", "FLY YOU FOOLS", 4000); } },
        { k: 'merlin', id: 'death_merlin', d: 4000, fn: () => { createPopup("Country road, take me home,<br>to the place...", "easter-egg-text", 0, 2500); createPopup("", "explosion", 2500, 1500); } },
        { k: 'nux', exact: true, id: 'death_nux', d: 3500, fn: () => { createPopup("", "spraypaint", 0, 3500); createPopup("WITNESS ME", "easter-egg-text witness-text", 500, 3000); } },
        { k: 'jack', exact: true, id: 'death_jack', d: 5000, fn: () => popE("", "I'll never let go, I promise.", 5000, "easter-egg-text jack-text") },
        { k: 'spock', id: 'death_spock', d: 3000, fn: () => popE("🖖", "Live long and prosper.", 3000) },
        { k: 'tony stark', id: 'death_tony_stark', d: 3000, fn: () => popE("", "I'm Iron Man.", 3000, "easter-egg-text iron-man-text") },
        { k: 'spiderman', alts: ['spider-man', 'spider man'], id: 'death_spiderman', d: 7500, fn: () => createPopup("I don't feel so good Mr. Stark.", "easter-egg-text dust-text", 0, 7500) },
        { k: 'eurydice', id: 'death_eurydice', d: 4000, fn: () => popE("🌹", "It's a sad song, but we're gonna sing it again.", 4000) },
        { k: 'snape', id: 'death_snape', d: 6000, fn: () => { createPopup("After all this time?", "easter-egg-text", 0, 2500); createPopup("<div style='display:block;font-size:12vmin;margin-bottom:10px;'>🦌</div><div style='display:block;'>Always.</div>", "easter-egg-text patronus-text", 2500, 3500); } },
        { k: 'bing bong', id: 'death_bing_bong', d: 4000, fn: () => { createPopup("SING LOUDER", "easter-egg-text bing-bong-text", 0, 2000); createPopup("<div class='rainbow-arch'>🌈</div>Take her to the moon for me.", "easter-egg-text bing-bong-text", 2000, 3000); } },
        { k: 'black panther', id: 'death_black_panther', d: 3000, fn: () => popE("🐆", "Wakanda Forever", 3000, "easter-egg-text wakanda-text") }
    ];

    const EGGS_REVIVE = [
        { k: 'jesus', id: 'revive_jesus', d: 4000, fn: () => createPopup("<div style='font-size:16vmin;margin-bottom:10px;display:block;'>✝️</div><div style='display:block;'>and on the third day</div>", "easter-egg-text holy-light", 0, 4000) },
        { k: 'phil connors', id: 'revive_phil_connors', d: 6000, fn: () => { createPopup("<div id='flip-clock' style='font-family:monospace;font-size:16vmin;background:#111;color:#fff;padding:20px;border-radius:10px;display:inline-block;'>5:49</div>", "easter-egg-text small-egg-text", 0, 1500); setTimeout(() => { if (el('flip-clock')) el('flip-clock').innerText = '6:00'; }, 1000); createPopup("OK campers, rise and shine, and don't forget your booties 'cause it's gonna be cold out there.", "easter-egg-text small-egg-text", 1500, 4500); } },
        { k: 'jim hopper', id: 'revive_jim_hopper', d: 4000, fn: () => popE("", "Um so... what he just, jumped out of the way at the last second? Ok I guess.", 4000) },
        { k: 'frankenstein\'s monster', id: 'revive_frankenstein', d: 4000, fn: () => { el('appWrapper').insertAdjacentHTML('beforeend', '<div class="lightning-overlay"></div>'); popE("⚡", "He lives! HE LIVES!", 4000, "easter-egg-text frankenstein-text"); setTimeout(() => { let o = el('appWrapper').querySelector('.lightning-overlay'); if (o) o.remove(); }, 4000); } },
        { k: 'eric draven', id: 'revive_eric_draven', d: 3500, fn: () => { for (let i = 0; i < 15; i++) setTimeout(() => { const c = document.createElement('div'); c.className = 'crow'; c.innerText = '🐦‍⬛'; c.style.left = '110%'; c.style.top = (Math.random() * 80) + '%'; c.style.animationDuration = (1.5 + Math.random()) + 's'; el('appWrapper').appendChild(c); setTimeout(() => c.remove(), 2500); }, Math.random() * 1500); } },
        { k: 'gandalf', id: 'revive_gandalf', d: 4000, fn: () => { if (!state.settings?.lightMode) updateSetting('lightMode', true); else { document.body.classList.remove('light-mode'); setTimeout(() => document.body.classList.add('light-mode'), 4000); } popE("", "FLY YOU FOOLS", 4000); } },
        { k: 'palpatine', id: 'revive_palpatine', d: 4000, fn: () => popE("", "Death is a concept invented by the Jedi. I don't even know how to spell it.", 4000) }
    ];

    const ALL_EGGS = [...Object.keys(EGGS_HP).map(k => EGGS_HP[k].id), ...EGGS_DEATH.map(e => e.id), ...EGGS_REVIVE.map(e => e.id)];
    const trigEgg = (id, fn) => { if (!state.foundEggs) state.foundEggs = []; if (!state.foundEggs.includes(id)) { state.foundEggs.push(id); fn(); if (state.view === 'settings') updateUI(false); } };
    const triggerEasterEggs = hp => { if (EGGS_HP[hp]) trigEgg(EGGS_HP[hp].id, EGGS_HP[hp].fn); };
    const checkEggStr = (str, egg) => { const s = str.toLowerCase(); return egg.exact ? s === egg.k : s.includes(egg.k) || (egg.alts && egg.alts.some(a => s.includes(a))); };
    const triggerDeathEasterEggs = n => EGGS_DEATH.forEach(e => { if (checkEggStr(n, e)) trigEgg(e.id, e.fn); });
    const triggerReviveEasterEggs = n => EGGS_REVIVE.forEach(e => { if (checkEggStr(n, e)) trigEgg(e.id, e.fn); });

    let storageWorking = true; try { localStorage.setItem('__t__', '1'); localStorage.removeItem('__t__'); } catch (e) { storageWorking = false; }
    function showToast(msg, isErr = false) { const c = el('toastContainer'); if (!c) return; const t = document.createElement('div'); t.className = `px-4 py-3 rounded-xl text-sm font-bold shadow-xl toast-enter pointer-events-auto ${isErr ? 'bg-red-600' : 'bg-green-600'} text-white`; t.innerText = msg; c.appendChild(t); setTimeout(() => { t.classList.replace('toast-enter', 'toast-exit'); setTimeout(() => t.remove(), 300); }, 2500); }

    let activeSettingsTab = 'saving', adjTimer = null, adjDelta = 0, adjMaxDelta = 0, adjHeroId = null, adjMode = null, adjInitialMax = 0, holdTimer = null, currentGraveyardIdx = null, actionPromptCallback = null, actionPromptCancelCallback = null, searchMode = 'tracker', listeningForShortcut = null;
    
    const getFileSafeTimestamp = () => { const n = new Date(), p = x => String(x).padStart(2, '0'); return `${n.getFullYear()}-${p(n.getMonth() + 1)}-${p(n.getDate())}_${p(n.getHours())}-${p(n.getMinutes())}-${p(n.getSeconds())}`; };
    const formatLogTime = (ts, fb) => { if (!ts) return fb; const d = new Date(ts), o = { hour: '2-digit', minute: '2-digit', hour12: state.settings?.timeFormat !== '24h' }; if (state.settings?.showSeconds) o.second = '2-digit'; return d.toLocaleTimeString([], o); };
    const formatLogDate = (ts, fb) => { if (!ts) return fb; const d = new Date(ts), f = state.settings?.dateFormat || 'MM/DD/YY'; if (f === 'DD/MM/YY') return d.toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: '2-digit' }); if (f === 'Long') return d.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }); if (f === 'D Month YYYY') return d.toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' }); return d.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: '2-digit' }); };
    
    const updateText = (id, t) => { const e = el(id); if (e) e.innerHTML = t; };
    function updateShortcutLabels() { qAll('[data-sc]').forEach(e => { const k = state.settings?.customShortcuts?.[e.dataset.sc] || DEF_SC[e.dataset.sc]; if (k) e.innerText = e.dataset.sc === 's_back' ? '(ESC)' : `(${k})`; }); }
    function getUniqueName(base, excId = null) { const all = [...state.party, ...state.graveyard].filter(h => h.id !== excId); let fName = base.trim() || state.settings?.defaultName || "Hero", ctr = 1; const m = fName.match(/^(.*?)(\s+(\d+))?$/); let pfx = fName, tName = fName; if (m && m[3]) { pfx = m[1]; ctr = parseInt(m[3]); } while (all.some(h => h.name.toLowerCase() === tName.toLowerCase())) { ctr++; tName = `${pfx} ${ctr}`; } return tName; }

    function handleScroll() {
        const s = el('mainScrollArea'), b = el('quickScrollBtn'); if (!s || !b) return;
        if (s.scrollHeight > s.clientHeight * 1.5) {
            b.classList.remove('hidden');
            if (s.scrollTop < (s.scrollHeight - s.clientHeight) / 2) {
                b.innerHTML = ICONS.down + `<div class="sc-flex absolute -top-10 shadow-md bg-zinc-800 items-center gap-2 py-1 px-2.5 rounded-lg border border-zinc-700 pointer-events-none whitespace-nowrap"><span class="text-zinc-400 border border-zinc-600 bg-zinc-700 px-1.5 py-0.5 rounded text-[9px] font-bold">Shift+↕</span></div>`;
                b.title = "Scroll to Bottom (Shift+Down) | Scroll Step (Ctrl+Down)";
                b.onclick = () => { if (state.editIndex !== null) return; const h = el('hpTrackerHeader'); if (h && state.view === 'active') s.scrollTo({ top: h.offsetTop - 16, behavior: 'smooth' }); else s.scrollTo({ top: s.scrollHeight, behavior: 'smooth' }); };
            } else {
                b.innerHTML = ICONS.up + `<div class="sc-flex absolute -top-10 shadow-md bg-zinc-800 items-center gap-2 py-1 px-2.5 rounded-lg border border-zinc-700 pointer-events-none whitespace-nowrap"><span class="text-zinc-400 border border-zinc-600 bg-zinc-700 px-1.5 py-0.5 rounded text-[9px] font-bold">Shift+↕</span></div>`;
                b.title = "Scroll to Top (Shift+Up) | Scroll Step (Ctrl+Up)";
                b.onclick = () => { if (state.editIndex === null) s.scrollTo({ top: 0, behavior: 'smooth' }); };
            }
        } else b.classList.add('hidden');
    }

    function pushAppState() { window.history.pushState({ tpd_app: true }, ''); }
    window.addEventListener('popstate', () => { if (!el('modalContainer').classList.contains('hidden') || state.view !== 'active') { executeAction(['s_back'], true); pushAppState(); } });
    
    function showModal(id) { const c = el('modalContainer'); c.classList.remove('hidden'); Array.from(c.children).forEach(k => k.classList.add('hidden')); el(id).classList.remove('hidden'); pushAppState(); }
    function closeModals() { const c = el('modalContainer'); c.classList.add('hidden'); Array.from(c.children).forEach(k => k.classList.add('hidden')); actionPromptCallback = null; if (actionPromptCancelCallback) { const cb = actionPromptCancelCallback; actionPromptCancelCallback = null; cb(); } if (el('searchInput')) el('searchInput').value = ''; if (document.activeElement && document.activeElement.blur) document.activeElement.blur(); updateUI(false); }
    function showMessage(t, msg) { updateText('messageTitle', t); updateText('messageBody', msg); showModal('messageModal'); }

    function openActionPrompt(t, btnTxt, cls, cb, def = '', onCancel = null, subTxt = null) {
        if (state.party.length === 0 && state.view !== 'deleted') return;
        updateText('actionPromptTitle', t);
        const b = el('actionPromptConfirm');
        b.className = `flex-1 flex flex-col items-center justify-center py-3 rounded-xl font-bold text-white transition active:scale-95 ${cls}`;
        b.innerHTML = `<div>${btnTxt} <span class="sc-lbl ml-1">(Enter)</span></div>${subTxt ? `<div class="text-[10px] font-normal opacity-75 mt-0.5">${subTxt}</div>` : ''}`;
        b.onclick = () => { let val = parseInt(el('actionPromptInput').value); actionPromptCancelCallback = null; closeModals(); cb(val); };
        el('actionPromptInput').value = def; actionPromptCancelCallback = onCancel; showModal('actionPromptModal'); setTimeout(() => el('actionPromptInput').focus(), 100); actionPromptCallback = b.onclick;
    }

    function openSearchModal(m) { searchMode = m; updateText('searchModalTitle', m === 'tracker' ? 'Search Active Heroes' : 'Search Fallen Heroes'); el('searchInput').value = ''; renderSearchResults(); showModal('searchModal'); setTimeout(() => el('searchInput').focus(), 100); }
    function renderSearchResults() { const q = el('searchInput').value.toLowerCase(), list = searchMode === 'tracker' ? state.party : state.graveyard; const r = list.map((h, i) => ({ ...h, ogIndex: i })).filter(h => h.name.toLowerCase().includes(q)); el('searchResultsList').innerHTML = r.map((h, i) => `<button tabindex="0" onclick="selectSearchResult(${h.ogIndex})" class="w-full p-3 bg-zinc-800/50 hover:bg-zinc-800 border border-zinc-700 rounded-xl cursor-pointer transition text-left ${i === 0 ? 'border-green-500/50 bg-green-900/10 text-green-400' : ''}">${h.name}</button>`).join('') || '<div class="p-4 text-center text-zinc-500 italic">No heroes found.</div>'; }
    if (el('searchInput')) el('searchInput').addEventListener('input', renderSearchResults);
    function selectSearchResult(idx) { closeModals(); if (searchMode === 'tracker') switchChar(idx); else if (searchMode === 'graveyard') showLog(idx); }

    function executeAction(acts, fShortcut = false) {
        if (!Array.isArray(acts)) acts = [acts]; const has = a => acts.includes(a), mdl = !el('modalContainer').classList.contains('hidden');
        const aMdl = mdl ? document.querySelector('#modalContainer > div:not(.hidden)') : null;
        const isInp = document.activeElement && ['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName), blk = fShortcut && isInp;
        
        if (has('s_back')) { if (mdl) closeModals(); else if (state.view !== 'active') switchView('active'); return; }
        if (has('s_toggle_sc')) { updateSetting('showShortcuts', !state.settings?.showShortcuts); return; }
        if (has('s_save')) { exportState(); return; } if (has('s_load')) { el('fileUpload').click(); return; }
        if (has('s_undo') && !mdl) { undo(); return; } if (has('s_redo') && !mdl) { redo(); return; }
        if (has('s_add') && !mdl) { requestNewCharacter(); return; } if (has('s_fullscreen')) { toggleFullScreen(); return; }
        if (has('s_tracker') && !blk && !mdl) { if (state.view !== 'active') switchView('active'); else setTimeout(() => el('inlineActiveSearch')?.focus(), 50); return; }
        if (has('s_grave') && !blk && !mdl) { if (state.view !== 'deleted') switchView('deleted'); else setTimeout(() => el('inlineGraveSearch')?.focus(), 50); return; }
        if (has('s_settings') && !blk && !mdl) { if (state.view !== 'settings') switchView('settings'); else setTimeout(() => el('inlineSettingSearch')?.focus(), 50); return; }
        if (has('s_light') && !blk) { updateSetting('lightMode', !state.settings?.lightMode); return; }
        if (has('s_set_save')) { setSettingsTab('saving'); return; } if (has('s_set_disp')) { setSettingsTab('display'); return; }
        if (has('s_set_short')) { setSettingsTab('shortcuts'); return; } if (has('s_set_def')) { setSettingsTab('defaults'); return; } if (has('s_set_about')) { setSettingsTab('about'); return; }
        
        const h = getHero();
        if (aMdl && aMdl.id === 'downedModal' && !blk) { if (has('s_downed_stab')) el('btnDownedStab').click(); else if (has('s_downed_ds')) toDeathSaves(); else if (has('s_ds_kill')) handleKill(); return; }
        if (aMdl && aMdl.id === 'createHeroModal' && !blk && has('s_calc')) { openCalculator('new'); return; }
        if (aMdl && aMdl.id === 'logModal' && !blk && currentGraveyardIdx !== null) { if (has('s_gy_revive')) restore(currentGraveyardIdx); else if (has('s_gy_purge')) purgeSingle(currentGraveyardIdx); return; }
        if (state.view === 'deleted' && !mdl && !blk) { if (has('s_gy_purge_all')) { showModal('purgeAllModal'); return; } if (state.graveyard.length === 1) { if (has('s_gy_revive')) { restore(0); return; } if (has('s_gy_purge')) { purgeSingle(0); return; } } }
        
        if (state.view === 'active' && !mdl && !blk && h) {
            if (has('s_rename')) { el('heroNameInput')?.focus(); el('heroNameInput')?.select(); return; }
            if (has('s_calc')) { openCalculator('active'); return; }
            if (!h.isDowned) {
                if (has('s_heal')) { const v = parseInt(el('adjustmentInput')?.value); if (!fShortcut && !isNaN(v) && v > 0) handleAdjustmentProcess(h, v); else openActionPrompt("Heal Hero", "Heal", "bg-green-700 hover:bg-green-600", val => { if (!isNaN(val) && val > 0) { state.lastAdj = val; if (el('adjustmentInput')) el('adjustmentInput').value = val; handleAdjustmentProcess(h, val); } }); }
                else if (has('s_dmg')) { const v = parseInt(el('adjustmentInput')?.value); if (!fShortcut && !isNaN(v) && v > 0) handleAdjustmentProcess(h, -v); else openActionPrompt("Damage Hero", "Damage", "bg-red-700 hover:bg-red-600", val => { if (!isNaN(val) && val > 0) { state.lastAdj = val; if (el('adjustmentInput')) el('adjustmentInput').value = val; handleAdjustmentProcess(h, -val); } }); }
                else if (has('s_temp')) { const v = parseInt(el('tempInput')?.value); if (!fShortcut && !isNaN(v) && v >= 0) { state.lastTemp = v; finalizeAdjustment(); saveUndo(); h.temp = v; addLog(`Received ${v} Temporary Health`); updateUI(); } else openActionPrompt("Set Temp HP", "Set", "bg-blue-700 hover:bg-blue-600", val => { if (!isNaN(val) && val >= 0) { state.lastTemp = val; if (el('tempInput')) el('tempInput').value = val; finalizeAdjustment(); saveUndo(); h.temp = val; addLog(`Received ${val} Temporary Health`); updateUI(); } }); }
                else if (has('s_maxup')) openActionPrompt("Increase Max HP", "Increase", "bg-green-800 hover:bg-green-700", v => { if (!isNaN(v) && v > 0) updateMax(h.max + v); });
                else if (has('s_maxdown')) openActionPrompt("Lower Max HP", "Lower", "bg-red-800 hover:bg-red-700", v => { if (!isNaN(v) && v > 0) updateMax(Math.max(1, h.max - v)); });
                else if (has('s_qadj_10')) quickAdj(10); else if (has('s_qadj_5')) quickAdj(5); else if (has('s_qadj_1')) quickAdj(1); else if (has('s_qadj_m1')) quickAdj(-1); else if (has('s_qadj_m5')) quickAdj(-5); else if (has('s_qadj_m10')) quickAdj(-10);
                else if (has('s_fullheal')) resetApp(); else if (has('s_retire')) showModal('deleteConfirmModal');
            } else {
                if (has('s_ds_succ')) deathRoll('s'); else if (has('s_ds_fail')) deathRoll('f'); else if (has('s_ds_nat1')) deathRoll('cf'); else if (has('s_ds_nat20')) deathRoll('c');
                else if (has('s_downed_stab') || has('s_ds_revive')) stabilize(); else if (has('s_ds_kill')) handleKill(); else if (has('s_fullheal')) resetApp(); else if (has('s_retire')) showModal('deleteConfirmModal');
            }
        }
    }

    function getKeyString(e) { let k = []; if (e.ctrlKey || e.metaKey) k.push('Ctrl'); if (e.altKey) k.push('Alt'); if (e.shiftKey) k.push('Shift'); if (['Control', 'Shift', 'Alt', 'Meta'].includes(e.key)) return null; let n = e.key.toUpperCase(); if (n === ' ') n = 'SPACE'; else if (n === 'ESCAPE') n = 'ESC'; k.push(n); return k.join('+'); }
    
    window.addEventListener('keydown', e => {
        const isInp = ['INPUT', 'TEXTAREA', 'SELECT'].includes(e.target.tagName);
        if (isInp && e.target.type === 'number' && !['Backspace', 'Tab', 'Enter', 'Escape', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Delete'].includes(e.key) && !e.ctrlKey && !e.metaKey && !/^[0-9]$/.test(e.key)) { e.preventDefault(); return; }
        
        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
            if (isInp) { if (e.target.tagName === 'SELECT') { if (e.key === 'ArrowUp' || e.key === 'ArrowDown') return; } else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') return; }
            e.preventDefault(); const mdl = !el('modalContainer').classList.contains('hidden'), aMdl = mdl ? Array.from(el('modalContainer').children).find(c => !c.classList.contains('hidden')) : null, area = mdl && aMdl ? aMdl : el('mainScrollArea');
            if (e.shiftKey) { if (area) { if (e.key === 'ArrowUp') area.scrollTo({ top: 0, behavior: 'smooth' }); if (e.key === 'ArrowDown') area.scrollTo({ top: area.scrollHeight, behavior: 'smooth' }); } return; }
            if (e.ctrlKey || e.metaKey) { if (area) { if (e.key === 'ArrowUp') area.scrollBy({ top: -150, behavior: 'smooth' }); if (e.key === 'ArrowDown') area.scrollBy({ top: 150, behavior: 'smooth' }); } return; }
            
            const scope = aMdl || document, focs = Array.from(scope.querySelectorAll('button:not(:disabled), input:not(:disabled), select:not(:disabled), [tabindex="0"], summary')).filter(x => x.tabIndex >= 0 && x.getBoundingClientRect().width > 0 && window.getComputedStyle(x).visibility !== 'hidden');
            if (!focs.length) return; const cur = document.activeElement, cR = cur.getBoundingClientRect(); if (!focs.includes(cur) || cR.width === 0) { focs[0].focus(); return; }
            
            let bMatch = null, minD = Infinity;
            focs.forEach(f => {
                if (f === cur) return; const r = f.getBoundingClientRect(); let dx = 0, dy = 0, v = false;
                if (e.key === 'ArrowUp' && r.bottom <= cR.top + 10) { dy = cR.top - r.bottom; dx = (r.left + r.width / 2) - (cR.left + cR.width / 2); v = true; }
                else if (e.key === 'ArrowDown' && r.top >= cR.bottom - 10) { dy = r.top - cR.bottom; dx = (r.left + r.width / 2) - (cR.left + cR.width / 2); v = true; }
                else if (e.key === 'ArrowLeft' && r.right <= cR.left + 10) { dx = cR.left - r.right; dy = (r.top + r.height / 2) - (cR.top + cR.height / 2); v = true; }
                else if (e.key === 'ArrowRight' && r.left >= cR.right - 10) { dx = r.left - cR.right; dy = (r.top + r.height / 2) - (cR.top + cR.height / 2); v = true; }
                if (v) { const p = (e.key === 'ArrowUp' || e.key === 'ArrowDown') ? Math.abs(dx) * 2.5 : Math.abs(dy) * 2.5, d = Math.sqrt(dx * dx + dy * dy) + p; if (d < minD) { minD = d; bMatch = f; } }
            });
            if (!bMatch) { const idx = focs.indexOf(cur); let nIdx = idx; if (['ArrowDown', 'ArrowRight'].includes(e.key)) nIdx = (idx + 1) % focs.length; else nIdx = (idx - 1 + focs.length) % focs.length; bMatch = focs[nIdx]; }
            if (bMatch) bMatch.focus(); return;
        }
        
        if (listeningForShortcut) { e.preventDefault(); const ks = getKeyString(e); if (ks) { if (!state.settings.customShortcuts) state.settings.customShortcuts = {}; if (ks === 'ESC') delete state.settings.customShortcuts[listeningForShortcut]; else state.settings.customShortcuts[listeningForShortcut] = ks; listeningForShortcut = null; updateSetting('customShortcuts', state.settings.customShortcuts); } return; }
        
        const ks = getKeyString(e); if (!ks && e.key !== 'Enter' && e.keyCode !== 13) return;
        if (ks === 'ESC') { e.preventDefault(); if (!el('modalContainer').classList.contains('hidden')) { closeModals(); return; } let act = false; if (isInp) { e.target.blur(); act = true; } if (state.editIndex !== null) { state.editIndex = null; updateUI(false); act = true; } if (!act) executeAction(['s_back'], true); return; }
        
        if (e.key === 'Enter' || e.keyCode === 13) {
            const ae = document.activeElement; if (ae && (ae.tagName === 'SELECT' || ae.tagName === 'LABEL' || (ae.tagName === 'INPUT' && ae.type === 'checkbox'))) { e.preventDefault(); if (ae.tagName === 'SELECT') ae.blur(); else if (ae.tagName === 'LABEL') { const cb = ae.querySelector('input[type="checkbox"]'); if (cb) cb.click(); else ae.click(); } else ae.click(); return; }
            const c = el('modalContainer'), mdl = !c.classList.contains('hidden');
            if (mdl) { e.preventDefault(); const am = Array.from(c.children).find(x => !x.classList.contains('hidden')); if (am) { if (am.id === 'actionPromptModal') el('actionPromptConfirm').click(); else if (am.id === 'createHeroModal') confirmCreateHero(); else if (am.id === 'hpCalculatorModal') applyCalculatorResult(); else if (am.id === 'deleteConfirmModal') retireActiveHero(); else if (am.id === 'hardResetModal') hardReset(); else if (am.id === 'purgeAllModal') confirmPurge(); else if (am.id === 'purgeSingleModal') el('confirmPurgeSingleBtn').click(); else if (am.id === 'searchModal') { const fR = el('searchResultsList').querySelector('button'); if (fR) fR.click(); else closeModals(); } else closeModals(); } else closeModals(); if (document.activeElement && document.activeElement.blur) document.activeElement.blur(); return; }
            if (state.view === 'deleted' && state.graveyard.length === 1 && !isInp) { e.preventDefault(); showLog(0); return; }
            if (isInp) { e.preventDefault(); e.target.blur(); if (e.target.id === 'inlineActiveSearch') { const q = e.target.value.toLowerCase(), f = state.party.map((h, i) => ({ h, i })).find(x => x.h.name.toLowerCase().includes(q)); if (f) { e.target.value = ''; switchChar(f.i); } } else if (e.target.id === 'inlineGraveSearch') { const q = e.target.value.toLowerCase(), f = state.graveyard.map((h, i) => ({ h, i })).find(x => x.h.name.toLowerCase().includes(q)); if (f) { e.target.value = ''; showLog(f.i); } } return; }
            if (state.party.length === 0 && state.view === 'active') { e.preventDefault(); executeAction(['s_add']); return; }
        }
        
        let fActs = []; for (const [id, dk] of Object.entries(DEF_SC)) { if ((state.settings?.customShortcuts?.[id] || dk) === ks) fActs.push(id); }
        if (fActs.length > 0) { if (isInp && !ks.includes('Ctrl') && !ks.includes('Alt') && !ks.includes('Meta')) return; e.preventDefault(); executeAction(fActs, true); }
    });

    function handlePointerAction(e, hCb, cCb) { if (e.button !== 0 && e.pointerType === 'mouse') return; finalizeAdjustment(); let iH = false; const sX = e.clientX, sY = e.clientY; holdTimer = setTimeout(() => { iH = true; hCb(); }, 300); const chM = mv => { if (Math.abs(mv.clientX - sX) > 10 || Math.abs(mv.clientY - sY) > 10) clearTimeout(holdTimer); }; const cln = () => { clearTimeout(holdTimer); window.removeEventListener('pointerup', pU); window.removeEventListener('pointermove', chM); window.removeEventListener('pointercancel', cln); }; const pU = () => { if (!iH && cCb) cCb(); cln(); }; window.addEventListener('pointermove', chM); window.addEventListener('pointerup', pU, { once: true }); window.addEventListener('pointercancel', cln); }
    function handlePlusPointerDown(e) { handlePointerAction(e, () => { if (state.party.length > 0) { state.editIndex = 0; updateUI(false); } }, () => executeAction(['s_add'])); }
    function handleTabPointerDown(e, idx) { handlePointerAction(e, () => { state.editIndex = idx; updateUI(false); }, () => switchChar(idx)); }
    window.addEventListener('pointerdown', e => { if (state.editIndex !== null && !e.target.closest('.tab-btn') && !e.target.closest('.drop-dot') && !e.target.closest('#quickScrollBtn')) { state.editIndex = null; updateUI(false); } });
    
    function requestNewCharacter() { if (state.party.length >= 100) { showMessage("Party Full", "Maximum 100 active heroes reached."); return; } finalizeAdjustment(); el('newHeroNameInput').value = getUniqueName(state.settings?.defaultName || "Hero"); el('newHeroMaxHpInput').value = state.settings?.defaultMaxHP || 10; showModal('createHeroModal'); el('newHeroNameInput').focus(); }
    function confirmCreateHero() { const mx = Math.min(Math.max(1, parseInt(el('newHeroMaxHpInput').value) || state.settings?.defaultMaxHP || 10), 10000), un = getUniqueName(el('newHeroNameInput').value.trim() || state.settings?.defaultName || "Hero"), ts = Date.now(); state.party.push({ id: ts, name: un, current: mx, max: mx, temp: 0, isDowned: false, isStable: false, saves: { s: 0, f: 0 }, log: [{ msg: "Joined Party", status: `${mx}/${mx}`, timestamp: ts }], undo: [], redo: [] }); state.index = state.party.length - 1; state.view = 'active'; closeModals(); updateUI(); triggerEasterEggs(mx); }

    function renderHPIcon(h, bF, cS, tS, c) { return `<div class="relative text-center mb-0 shrink-0"><button onclick="openCalculator('active')" class="absolute top-0 right-0 text-zinc-500 hover:text-blue-500 transition active:scale-95 pr-1 flex items-center gap-1" title="HP Calculator">${ICONS.calc}${scLabel('s_calc', 'ml-0')}</button><div class="flex justify-center items-baseline gap-2"><span class="text-6xl font-bold">${h.current}</span><span class="text-2xl text-zinc-600">/</span><input type="number" oninput="this.style.width=(this.value.length+1.8)+'ch'" onchange="updateMax(this.value)" value="${h.max}" class="bg-transparent text-2xl text-zinc-400 text-center border-b border-zinc-900 focus:outline-none pb-1 no-spinners" style="width:${(h.max.toString().length + 1.8)}ch"></div><div class="sc-lbl-blk text-[9px] text-zinc-500 uppercase tracking-widest text-center mt-2" id="maxHpLabel"><span data-sc="s_maxup"></span> / <span data-sc="s_maxdown"></span></div><div class="text-blue-400 font-bold text-sm leading-tight mt-1 ${h.temp ? '' : 'invisible'}">+ ${h.temp} Temp HP</div></div><div class="hp-bar-container mb-6 shrink-0"><div class="flex h-full" style="width:${bF}%"><div class="h-full ${c}" style="width:${cS}%"></div><div class="h-full bg-blue-500 opacity-80" style="width:${tS}%"></div></div></div><div class="flex items-end gap-3 mb-5 shrink-0"><button onclick="executeAction(['s_heal'])" class="flex-1 flex items-center justify-center bg-green-700 py-3 rounded-xl font-bold active:scale-95 text-white">Heal ${scLabel('s_heal', 'ml-1')}</button><div class="flex-1"><p class="text-[10px] text-zinc-500 uppercase font-bold mb-1 text-center">Adjustment</p><input type="number" id="adjustmentInput" oninput="state.lastAdj=this.value" value="${state.lastAdj || ''}" class="w-full bg-zinc-800 border border-zinc-700 rounded-xl py-3 text-center focus:outline-none text-lg no-spinners"></div><button onclick="executeAction(['s_dmg'])" class="flex-1 flex items-center justify-center bg-red-700 py-3 rounded-xl font-bold active:scale-95 text-white">Dmg ${scLabel('s_dmg', 'ml-1')}</button></div><div class="grid grid-cols-6 gap-1 mb-5 shrink-0">${[10, 5, 1, -1, -5, -10].map(v => `<button onclick="quickAdj(${v})" class="${v > 0 ? 'bg-green-900/20 text-green-500 border-green-900/30' : 'bg-red-900/20 text-red-500 border-red-900/30'} flex flex-col items-center justify-center py-1.5 rounded-lg text-xs border font-bold active:scale-95"><span>${v > 0 ? '+' : ''}${v}</span>${scLabel(v === 10 ? 's_qadj_10' : v === 5 ? 's_qadj_5' : v === 1 ? 's_qadj_1' : v === -1 ? 's_qadj_m1' : v === -5 ? 's_qadj_m5' : 's_qadj_m10', 'mt-0.5')}</button>`).join('')}</div><div class="mb-5 p-4 bg-zinc-800/30 rounded-2xl border border-zinc-800 flex gap-2 shrink-0"><input type="number" id="tempInput" oninput="state.lastTemp=this.value" value="${state.lastTemp || ''}" max="10000" placeholder="Temp HP" class="flex-1 bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-1.5 text-sm focus:outline-none no-spinners"><button onclick="executeAction(['s_temp'])" class="bg-blue-700 flex items-center justify-center text-white px-5 py-1.5 rounded-lg text-xs font-bold active:scale-95">Set ${scLabel('s_temp', 'ml-1')}</button></div>`; }
    function renderDSIcon(h) { return `<div class="bg-zinc-950 p-6 rounded-3xl border border-zinc-800 mb-6 text-center"><div class="flex flex-col gap-6"><div><p class="text-[10px] text-zinc-500 uppercase font-bold mb-2">Successes</p><div class="flex justify-center gap-4">${[1, 2, 3].map(i => `<div class="death-save-dot death-save-success ${h.saves.s >= i ? 'active' : ''}"></div>`).join('')}</div></div><div><p class="text-[10px] text-zinc-500 uppercase font-bold mb-2">Failures</p><div class="flex justify-center gap-4">${[1, 2, 3].map(i => `<div class="death-save-dot death-save-failure ${h.saves.f >= i ? 'active' : ''}"></div>`).join('')}</div></div></div></div><div class="grid grid-cols-2 gap-3 mb-3"><button onclick="executeAction(['s_ds_succ'])" class="bg-green-800 flex items-center justify-center py-3 rounded-xl font-bold active:scale-95 text-white">Success ${scLabel('s_ds_succ', 'ml-1')}</button><button onclick="executeAction(['s_ds_fail'])" class="bg-red-800 flex items-center justify-center py-3 rounded-xl font-bold active:scale-95 text-white">Failure ${scLabel('s_ds_fail', 'ml-1')}</button></div><div class="grid grid-cols-4 gap-2 mb-6"><button onclick="executeAction(['s_ds_revive'])" class="bg-green-900/20 flex flex-col items-center justify-center text-green-500 hover:bg-green-900/40 border border-green-900/30 py-2 rounded-xl text-[10px] sm:text-xs font-bold active:scale-95 transition"><span>Revived</span>${scLabel('s_ds_revive', 'mt-1')}</button><button onclick="executeAction(['s_ds_nat20'])" class="bg-zinc-800 flex flex-col items-center justify-center text-green-400 py-2 rounded-xl text-[10px] sm:text-xs font-bold border border-green-900/30 active:scale-95"><span>Nat 20</span>${scLabel('s_ds_nat20', 'mt-1')}</button><button onclick="executeAction(['s_ds_nat1'])" class="bg-zinc-800 flex flex-col items-center justify-center text-red-400 py-2 rounded-xl text-[10px] sm:text-xs font-bold border border-red-900/30 active:scale-95"><span>Nat 1</span>${scLabel('s_ds_nat1', 'mt-1')}</button><button onclick="executeAction(['s_ds_kill'])" class="bg-red-900/20 flex flex-col items-center justify-center text-red-500 hover:bg-red-900/40 border border-red-900/30 py-2 rounded-xl text-[10px] sm:text-xs font-bold active:scale-95 transition"><span>Killed</span>${scLabel('s_ds_kill', 'mt-1')}</button></div>`; }
    function renderHeroInterface() { const h = getHero(); if (!h) return; const t = h.current + h.temp, bF = Math.min((t / h.max) * 100, 100), cS = t > 0 ? (h.current / t) * 100 : 0, tS = t > 0 ? (h.temp / t) * 100 : 0, c = (h.current / h.max) * 100 > 50 ? 'bg-green-500' : ((h.current / h.max) * 100 > 20 ? 'bg-yellow-500' : 'bg-red-600'); el('interfaceBody').innerHTML = `<div id="hpTrackerHeader" class="relative flex items-center justify-center mb-5 min-h-[40px] shrink-0"><div class="absolute left-0"><button onclick="executeAction(['s_fullheal'])" class="p-2 text-green-500 hover:text-green-400 bg-green-900/20 rounded-lg border border-green-900/30 transition active:scale-95 flex items-center justify-center gap-1" title="Full Heal">${ICONS.heal}${scLabel('s_fullheal', 'ml-1')}</button></div><h2 class="fantasy-font text-2xl text-yellow-500 font-bold">HP Tracker</h2><div class="absolute right-0"><button onclick="executeAction(['s_retire'])" class="p-2 text-red-500 hover:text-red-400 bg-red-900/20 rounded-lg border border-red-900/30 transition active:scale-95 flex items-center justify-center gap-1" title="Retire">${scLabel('s_retire', 'mr-1')}${ICONS.retire}</button></div></div><div class="relative w-full flex flex-col items-center mb-5 shrink-0"><div class="sc-lbl-blk text-[9px] text-zinc-500 uppercase tracking-widest mb-1 absolute -top-4">Rename <span data-sc="s_rename"></span></div><input type="text" id="heroNameInput" onchange="updateName(this.value)" maxlength="100" value="${h.name}" class="bg-transparent text-lg sm:text-xl font-semibold border-b border-zinc-800 w-full focus:outline-none focus:border-red-500 pb-1 text-center"></div><div class="shrink-0">${h.isDowned ? renderDSIcon(h) : renderHPIcon(h, bF, cS, tS, c)}</div><div class="border-t border-zinc-800 pt-4 flex-1 flex flex-col min-h-0"><div class="flex justify-between items-center mb-3 shrink-0 pr-4"><span class="text-[10px] text-zinc-500 uppercase font-bold">History</span><div class="flex gap-2"><button onclick="executeAction(['s_undo'])" class="flex items-center gap-1 px-3 py-1.5 bg-zinc-800 border border-zinc-700 rounded-lg text-xs font-bold text-zinc-400 hover:text-white hover:bg-zinc-700 transition disabled:opacity-30 disabled:cursor-not-allowed active:scale-95" ${!h.undo.length ? 'disabled' : ''}>${ICONS.undo} Undo ${scLabel('s_undo', 'ml-1')}</button><button onclick="executeAction(['s_redo'])" class="flex items-center gap-1 px-3 py-1.5 bg-zinc-800 border border-zinc-700 rounded-lg text-xs font-bold text-zinc-400 hover:text-white hover:bg-zinc-700 transition disabled:opacity-30 disabled:cursor-not-allowed active:scale-95" ${!h.redo.length ? 'disabled' : ''}>${ICONS.redo} Redo ${scLabel('s_redo', 'ml-1')}</button></div></div><div id="logList" class="text-[11px] space-y-2 pb-4 overflow-y-auto pr-4 log-container max-h-[450px]"></div></div>`; renderLogItems(); if (h.current <= 0 && !h.isDowned && !h.isStable) { updateText('downedHeroNameDisplay', h.name); showModal('downedModal'); } updateShortcutLabels(); }

    const uiToggle = (k, l, d = false, x = '') => `<label tabindex="0" class="setting-item flex items-center justify-between cursor-pointer ${x}"><div class="flex items-center gap-2">${l}</div><div class="relative inline-flex items-center"><input tabindex="-1" type="checkbox" onchange="updateSetting('${k}',this.checked)" ${(state.settings?.[k] !== undefined ? state.settings[k] : d) ? 'checked' : ''} class="sr-only peer"><div class="w-11 h-6 bg-zinc-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-zinc-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div></div></label>`;
    const uiInput = (k, l, t = "text", dV = "", m = "") => `<div class="setting-item"><label class="block text-sm text-white font-bold mb-2">${l}</label><input type="${t}" onchange="updateSetting('${k}',${t === 'number' ? `parseInt(this.value)||${dV}` : `this.value.trim()||'${dV}'`})" value="${state.settings?.[k] ?? dV}" class="w-full bg-zinc-800 border border-zinc-700 rounded-xl py-3 px-4 focus:outline-none text-zinc-200 ${t === 'number' ? 'no-spinners' : ''}">${m ? `<p class="text-[10px] text-zinc-500 mt-2 italic">${m}</p>` : ''}</div>`;
    const card = (t, c, cl = 'bg-zinc-800/50 p-4 rounded-2xl border border-zinc-800 flex flex-col gap-4') => `<div class="setting-block ${cl}">${t ? `<h3 class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">${t}</h3>` : ''}${c}</div>`;

    function filterSettings() { const q = el('inlineSettingSearch').value.toLowerCase(), s = q.length > 0; qAll('.settings-page').forEach(p => p.style.display = (s || p.dataset.tab === activeSettingsTab) ? '' : 'none'); qAll('.setting-item').forEach(i => { if (!s) i.style.display = ''; else i.style.display = i.innerText.toLowerCase().includes(q) ? '' : 'none'; }); qAll('.setting-block').forEach(b => { if (!s) { b.style.display = ''; return; } const itms = b.querySelectorAll('.setting-item'); if (!itms.length) b.style.display = b.innerText.toLowerCase().includes(q) ? '' : 'none'; else { const h = Array.from(itms).some(i => i.style.display !== 'none'); b.style.display = h ? '' : 'none'; } }); }
    function renderSettingsTabs() {
        const lst = el('settingsTabList'); if (!lst) return;
        const ts = [{ id: 'saving', label: 'Saving', sc: 's_set_save' }, { id: 'display', label: 'Display', sc: 's_set_disp' }, { id: 'shortcuts', label: 'Shortcuts', sc: 's_set_short' }, { id: 'defaults', label: 'Defaults', sc: 's_set_def' }, { id: 'about', label: 'About', extraClass: 'ml-auto', sc: 's_set_about' }];
        lst.innerHTML = ts.map(t => `<button tabindex="0" onclick="setSettingsTab('${t.id}')" class="px-3 py-2 text-sm font-bold flex flex-col items-center justify-center ${t.extraClass || ''} ${activeSettingsTab === t.id ? 'text-red-500 border-b-2 border-red-500' : 'text-zinc-500 hover:text-zinc-300'}">${scLabel(t.sc, 'mb-0.5')}${t.label}</button>`).join('');
        const b = el('settingsBody'); if (!b) return;

        const wHtml = !storageWorking ? card('', `<p class="text-red-500 font-bold text-sm flex items-center gap-2">${ICONS.danger} Auto-Save Unavailable</p><p class="text-xs text-red-400 mt-1">Your browser/cookies settings prevent this app from automatically saving. Please manual backups to keep your adventure.</p>`, 'setting-item bg-red-900/20 border border-red-500/50 p-4 rounded-2xl mb-2 shrink-0') : '';
        const sHtml = wHtml + card('', `<div class="setting-item"><p class="text-zinc-400 text-xs italic leading-relaxed shrink-0 mb-3 px-1">Automatically saves your adventure. <b>Requires cookies/local storage.</b> This save data will not transfer across different browsers or devices.</p></div>${uiToggle('autoSave', '<p class="text-sm font-bold text-zinc-200">Auto-Save to Browser</p>', true, 'bg-zinc-800/50 p-4 rounded-2xl border border-zinc-800')}`, 'bg-transparent border-0 p-0') + `<hr class="border-zinc-800 border-t-2 my-1 setting-block">` + card('', `<div class="setting-item"><p class="text-zinc-400 text-xs italic leading-relaxed shrink-0 mb-4 px-1">Manual save files include your settings, heroes, history logs, and graveyard. Use this to backup or transfer your adventure.</p></div><div class="flex flex-col gap-3"><button onclick="executeAction(['s_save'])" class="setting-item w-full bg-blue-700 text-white hover:bg-blue-600 py-3 rounded-xl font-bold transition flex items-center justify-center gap-2 text-sm active:scale-95 shrink-0">${ICONS.save} Save Adventure To File ${scLabel('s_save', 'ml-1')}</button><button onclick="executeAction(['s_load'])" class="setting-item w-full bg-zinc-700 text-white hover:bg-zinc-600 py-3 rounded-xl font-bold transition flex items-center justify-center gap-2 text-sm active:scale-95 shrink-0">${ICONS.load} Load Adventure From File ${scLabel('s_load', 'ml-1')}</button></div>`, 'bg-transparent border-0 p-0') + card('', `<div class="setting-item bg-red-900/10 p-6 rounded-2xl border border-red-500/30"><h3 class="text-red-500 font-bold mb-2 text-sm uppercase tracking-wider">Danger Zone</h3><p class="text-zinc-400 text-xs italic leading-relaxed shrink-0 mb-4 px-1">Permanently clears your entire adventure.</p><button onclick="showModal('hardResetModal')" class="danger-reset-btn w-full bg-zinc-900 text-red-500 border-2 border-red-500/50 hover:bg-red-600 hover:text-white py-3 rounded-xl font-bold transition text-xs active:scale-95 flex items-center justify-center gap-2">${ICONS.danger} Full Adventure Reset</button></div>`, 'mt-0 pt-6 border-t border-zinc-800 shrink-0 mb-4 bg-transparent border-0 p-0');
        let scHtml = card('', uiToggle('showShortcuts', '<p class="text-sm font-bold text-zinc-200">Show Shortcuts in App Buttons</p>', false, 'bg-zinc-800/50 p-4 rounded-2xl border border-zinc-800'), 'mb-4 bg-transparent border-0 p-0') + card('', `<div class="setting-item"><p class="text-yellow-500 font-bold text-[10px] uppercase tracking-widest mb-1">Browser Limitations</p><p class="text-xs text-yellow-400/80">Certain commands (like Ctrl+T, Ctrl+W, F5, Ctrl+Tab) are strictly protected by the browser and cannot be overridden by this app.</p></div>`, 'bg-yellow-900/20 border border-yellow-500/50 p-4 rounded-2xl mb-4') + `<div class="setting-item setting-block text-[10px] text-zinc-500 italic px-1 mb-2"><p>Click a button to assign a new shortcut. Press ESC to restore default.</p></div>`;
        SC_DEFS.forEach(g => { let sGp = g.i.map(a => `<div class="setting-item flex justify-between items-center"><span class="text-xs font-bold text-zinc-300">${a.l}</span>${a.fixed ? `<span class="text-xs font-mono font-bold px-3 py-1.5 rounded-lg border bg-zinc-900 border-zinc-700 text-zinc-500 cursor-not-allowed min-w-[80px] text-center">${a.fixed}</span>` : `<button tabindex="0" onclick="listeningForShortcut='${a.id}';updateUI(false);" class="text-xs font-mono font-bold px-3 py-1.5 rounded-lg border ${listeningForShortcut === a.id ? 'bg-blue-900/40 border-blue-500 text-blue-400 animate-pulse' : 'bg-zinc-900 border-zinc-700 text-zinc-400 hover:text-white hover:bg-zinc-800'} min-w-[80px] transition text-center">${listeningForShortcut === a.id ? 'Press Key...' : (state.settings?.customShortcuts?.[a.id] || DEF_SC[a.id])}</button>`}</div>`).join(''); scHtml += card(g.c, sGp, 'bg-zinc-800/30 p-4 rounded-2xl border border-zinc-800 flex flex-col gap-3'); });
        const dfHtml = card('', uiInput('defaultMaxHP', 'New Hero Max Health', 'number', '10'), 'bg-transparent border-0 p-0') + card('', uiInput('defaultName', 'New Hero Name', 'text', 'Hero', 'A unique number will still be added if the name exists.'), 'bg-transparent border-0 p-0');
        const R = [{ id: '1/2', name: '1:2', w: 1, h: 2 }, { id: '9/16', name: '9:16', w: 9, h: 16 }, { id: '2/3', name: '2:3', w: 2, h: 3 }, { id: '5/7', name: '5:7', w: 5, h: 7 }, { id: '3/4', name: '3:4', w: 3, h: 4 }, { id: '4/5', name: '4:5', w: 4, h: 5 }, { id: '1/1', name: '1:1', w: 1, h: 1 }, { id: 'auto', name: 'Fill', w: 0, h: 0 }];
        const getRI = (w, h) => { if (w === 0) return `<svg viewBox="0 0 100 100" class="h-5 mx-auto mb-1.5 text-current"><rect x="10" y="20" width="80" height="60" stroke="currentColor" stroke-width="8" fill="none" stroke-dasharray="8 8" rx="4"/></svg>`; let rw, rh; if (w > h) { rw = 80; rh = 80 * (h / w); } else { rh = 80; rw = 80 * (w / h); } return `<svg viewBox="0 0 100 100" class="h-5 mx-auto mb-1.5 text-current"><rect x="${50 - rw / 2}" y="${50 - rh / 2}" width="${rw}" height="${rh}" stroke="currentColor" stroke-width="8" fill="none" rx="8"/></svg>`; };
        const rHtml = `<div class="setting-item grid grid-cols-4 sm:grid-cols-8 gap-2 mb-2">` + R.map(r => `<button tabindex="0" onclick="updateSetting('aspectRatio','${r.id}')" class="flex flex-col items-center justify-center py-2 px-1 rounded-xl transition ${((state.settings?.aspectRatio || (window.innerWidth < 768 ? 'auto' : '9/16')) === r.id) ? 'bg-red-500/20 text-red-500 border border-red-500/50' : 'bg-zinc-800/50 text-zinc-400 hover:text-zinc-200 border border-zinc-700/50'}">${getRI(r.w, r.h)}<span class="text-[9px] font-bold whitespace-nowrap">${r.name}</span></button>`).join('') + `</div>`;
        const dHtml = card('', uiToggle('lightMode', `${ICONS.sun}<p class="text-sm font-bold text-zinc-200 flex items-center">Light Mode ${scLabel('s_light', 'ml-1')}</p>`, false, 'bg-zinc-800/50 p-4 rounded-2xl border border-zinc-800'), 'bg-transparent border-0 p-0') + card('Screen Size and Ratio', `${rHtml}<button tabindex="0" onclick="toggleFullScreen()" class="setting-item bg-blue-600 hover:bg-blue-500 text-white w-full py-2.5 rounded-xl text-sm font-bold transition active:scale-95 flex items-center justify-center gap-2"><span id="settingsFullscreenIcon">${ICONS.full}</span><span id="settingsFullscreenText">Enable Full Screen Mode</span> ${scLabel('s_fullscreen', 'ml-1')}</button>${uiToggle('showFullscreenBtn', '<p class="text-sm font-bold text-zinc-200">Show Full Screen Corner Button</p>', true)}`) + card('UI Elements', `<div class="setting-item flex flex-col gap-2"><div class="flex justify-between items-center"><p class="text-sm font-bold text-zinc-200">UI Scale</p><div class="flex items-center text-xs font-bold text-zinc-400"><input type="number" min="70" max="130" value="${state.settings?.fontScale || 100}" onchange="let v=parseInt(this.value);if(v>96&&v<104){v=100;this.value=100;}updateSetting('fontScale',v)" class="w-16 bg-transparent text-right focus:outline-none focus:text-blue-400 transition no-spinners" id="fontScaleInput"><span>%</span></div></div><input tabindex="-1" type="range" min="70" max="130" value="${state.settings?.fontScale || 100}" oninput="let v=parseInt(this.value);if(v>96&&v<104){v=100;this.value=100;}el('fontScaleInput').value=v;document.documentElement.style.setProperty('--font-scale',v);" onchange="let v=parseInt(this.value);if(v>96&&v<104){v=100;this.value=100;}updateSetting('fontScale',v)" class="w-full accent-green-600 cursor-pointer"></div>${uiToggle('fontMonospace', '<p class="text-sm font-bold text-zinc-200">Monospace Font</p>', false)}${uiToggle('showShortcuts', '<p class="text-sm font-bold text-zinc-200">Show Shortcuts in App Buttons</p>', false)}`) + card('History Log Format', `<label tabindex="0" class="setting-item flex items-center justify-between cursor-pointer"><div><p class="text-sm font-bold text-zinc-200">24-Hour Time</p></div><div class="relative inline-flex items-center"><input tabindex="-1" type="checkbox" onchange="updateSetting('timeFormat',this.checked?'24h':'12h')" ${state.settings?.timeFormat === '24h' ? 'checked' : ''} class="sr-only peer"><div class="w-11 h-6 bg-zinc-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-zinc-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div></div></label>${uiToggle('showSeconds', '<p class="text-sm font-bold text-zinc-200">Show Seconds</p>', false)}<div class="setting-item flex items-center justify-between"><div><p class="text-sm font-bold text-zinc-200">Date Format</p></div><select tabindex="0" onchange="updateSetting('dateFormat',this.value)" class="bg-zinc-700 text-white text-xs font-bold rounded-lg px-2 py-2 border border-zinc-600 focus:outline-none focus:border-zinc-500 cursor-pointer"><option value="MM/DD/YY" ${state.settings?.dateFormat === 'MM/DD/YY' || !state.settings?.dateFormat ? 'selected' : ''}>MM/DD/YY</option><option value="DD/MM/YY" ${state.settings?.dateFormat === 'DD/MM/YY' ? 'selected' : ''}>DD/MM/YY</option><option value="Long" ${state.settings?.dateFormat === 'Long' ? 'selected' : ''}>Month D, YYYY</option><option value="D Month YYYY" ${state.settings?.dateFormat === 'D Month YYYY' ? 'selected' : ''}>D Month YYYY</option></select></div>`);
        const aHtml = `<div class="setting-block flex flex-col items-center w-full gap-4"><div class="setting-item flex flex-col items-center gap-4"><div class="w-24 h-24 shrink-0 bg-pink-500/20 rounded-full flex items-center justify-center mb-1 border border-pink-500/40">${ICONS.dragon}</div><h2 class="fantasy-font text-2xl text-yellow-500 font-bold leading-tight text-center">The Ultimate<br>D&D 5e HP Tracker</h2><p class="text-sm text-zinc-400 text-center">Coded by <a href="https://gemini.google.com" target="_blank" class="text-blue-400 hover:text-blue-300 underline font-bold">Gemini</a></p><p class="text-sm text-zinc-400 text-center">Prompted (with love) by <a href="https://www.theplasticdragon.com" target="_blank" class="text-orange-500 hover:text-orange-400 underline font-bold">ReiTheMartian</a></p><div class="text-sm text-zinc-400 px-4 leading-relaxed text-center">On behalf of <a href="https://www.theplasticdragon.com" target="_blank" class="text-blue-600 hover:text-blue-500 underline font-bold">The Plastic Dragon</a>,<br>thank you for being here.</div></div><div class="setting-item mt-1 w-full flex flex-col items-center gap-2"><p class="text-xs text-zinc-600 font-mono font-bold">v1.3.4</p><a href="https://reithemartian.notion.site/TPD-The-Ultimate-HP-Tracker-Changelog-32f72f4c642a801c8f5ff34e6590dbd6?source=copy_link" target="_blank" class="bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 px-4 py-2 rounded-xl text-xs font-bold text-zinc-300 transition active:scale-95 text-center no-underline inline-block w-auto">View Changelog</a></div><div class="setting-item mt-2 pt-4 border-t border-zinc-800/50 w-full flex flex-col items-center"><p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mb-1">Egg Counter</p><div class="text-2xl font-mono text-pink-500 font-bold">${state.foundEggs ? state.foundEggs.length : 0} <span class="text-zinc-600">/</span> ${ALL_EGGS.length}</div></div></div>`;
        b.innerHTML = `<div class="settings-page flex flex-col gap-6 pb-4 flex-1" data-tab="saving" ${activeSettingsTab === 'saving' ? '' : 'style="display:none"'}>${sHtml}</div><div class="settings-page flex flex-col gap-4 pb-4 flex-1" data-tab="display" ${activeSettingsTab === 'display' ? '' : 'style="display:none"'}>${dHtml}</div><div class="settings-page flex flex-col gap-4 pb-4 flex-1" data-tab="shortcuts" ${activeSettingsTab === 'shortcuts' ? '' : 'style="display:none"'}>${scHtml}</div><div class="settings-page flex flex-col gap-6 pb-4 flex-1" data-tab="defaults" ${activeSettingsTab === 'defaults' ? '' : 'style="display:none"'}>${dfHtml}</div><div class="settings-page text-center flex flex-col items-center justify-center pt-8 pb-4 gap-4" data-tab="about" ${activeSettingsTab === 'about' ? '' : 'style="display:none"'}>${aHtml}</div>`;
        if (el('inlineSettingSearch')) filterSettings(); handleFullscreenChange(); updateShortcutLabels();
    }

    function setSettingsTab(t) { activeSettingsTab = t; qAll('.settings-page').forEach(p => p.style.display = (p.dataset.tab === activeSettingsTab) ? '' : 'none'); renderSettingsTabs(); }
    function applyGlobalSettings() { if (!state.settings) return; document.body.classList.toggle('monospace-mode', !!state.settings.fontMonospace); document.body.classList.toggle('light-mode', !!state.settings.lightMode); document.body.classList.toggle('show-shortcuts', !!state.settings.showShortcuts); document.documentElement.style.setProperty('--font-scale', state.settings.fontScale || 100); applyAspectRatio(state.settings.aspectRatio || (window.innerWidth < 768 ? 'auto' : '9/16')); updateShortcutLabels(); }
    function updateSetting(k, v) { if (!state.settings) state.settings = {}; state.settings[k] = v; applyGlobalSettings(); if (k === 'aspectRatio' && activeSettingsTab === 'display') renderSettingsTabs(); if (['timeFormat', 'dateFormat', 'autoSave', 'showFullscreenBtn', 'showSeconds', 'aspectRatio', 'showShortcuts', 'customShortcuts'].includes(k)) updateUI(true); }
    function applyAspectRatio(v) { const w = el('appWrapper'); if (!w) return; if (!v || v === 'auto') { w.style.maxWidth = '100%'; w.style.maxHeight = '100%'; w.classList.remove('constrained-ratio'); } else { const [W, H] = v.split('/').map(Number); w.style.maxWidth = `min(100vw, calc(100vh * ${W} / ${H}))`; w.style.maxHeight = `min(100vh, calc(100vw * ${H} / ${W}))`; w.classList.add('constrained-ratio'); } }

    function updateUI(full = true) {
        if (!el('landingView')) return; const isL = state.party.length === 0 && state.view === 'active';
        el('landingView').classList.toggle('hidden', !isL); el('activeView').classList.toggle('hidden', state.view !== 'active' || isL); el('deletedView').classList.toggle('hidden', state.view !== 'deleted'); el('settingsView').classList.toggle('hidden', state.view !== 'settings');
        if (el('bottomFullscreenBtn')) { el('bottomFullscreenBtn').classList.toggle('hidden', state.settings?.showFullscreenBtn === false); handleFullscreenChange(); }
        if (el('reorderTooltip')) el('reorderTooltip').classList.toggle('hidden', state.hasReordered || state.view !== 'active' || state.party.length <= 1);
        if (el('activeSearchContainer')) el('activeSearchContainer').classList.toggle('hidden', state.party.length <= 1); if (el('graveSearchContainer')) el('graveSearchContainer').classList.toggle('hidden', state.graveyard.length <= 1);
        if (isL) { el('addHeroBtn').classList.add('invisible'); el('graveBtn').classList.add('invisible'); updateText('createBtnLabel', `Start Your Adventure ${scLabel('s_add', 'ml-2')}`); updateText('loadBtnLabel', `Load Your Adventure ${scLabel('s_load', 'ml-2')}`); el('landingGraveBtn').classList.toggle('hidden', state.graveyard.length === 0); if (state.graveyard.length) updateText('landingGraveBtn', `Graveyard <span id="landingGraveCount">${state.graveyard.length}</span> ${scLabel('s_grave', 'ml-2')}`); }
        else { el('frozenHeader').classList.remove('hidden'); el('addHeroBtn').classList.remove('invisible'); el('graveBtn').classList.remove('invisible'); updateText('graveBtn', `Graveyard <span id="activeUiGraveCount">${state.graveyard.length}</span> ${scLabel('s_grave', 'ml-1')}`); updateText('graveBackLabel', `Back ${scLabel('s_back', 'ml-1')}`); updateText('setBackLabel', `Back ${scLabel('s_back', 'ml-1')}`); el('tabList').classList.toggle('hidden', state.view !== 'active'); if (state.view === 'deleted') renderGraveyard(); else if (state.view === 'settings') renderSettingsTabs(); else if (state.view === 'active' && full) renderHeroInterface(); renderTabs(); }
        if (el('downedModal') && !el('downedModal').classList.contains('hidden')) updateText('btnDownedKill', `Killed ${scLabel('s_ds_kill', 'ml-1')}`);
        if (el('logModal') && !el('logModal').classList.contains('hidden')) { el('logModalActions').classList.toggle('hidden', currentGraveyardIdx === null); updateText('btnLogRevive', `Revive ${scLabel('s_gy_revive', 'ml-1')}`); updateText('btnLogPurge', `Purge ${scLabel('s_gy_purge', 'ml-1')}`); }
        applyGlobalSettings(); if (state.settings?.autoSave !== false) try { localStorage.setItem('tpd_hp_tracker_state', JSON.stringify(state)); } catch (e) { } else try { localStorage.removeItem('tpd_hp_tracker_state'); } catch (e) { } setTimeout(handleScroll, 50); setTimeout(handleScroll, 250);
    }
    window.addEventListener('resize', handleScroll);

    function renderTabs() { const lst = el('tabList'); if (!lst) return; const iE = state.editIndex !== null, q = (el('inlineActiveSearch')?.value || '').toLowerCase(); let mC = 0, html = iE ? `<div onclick="executeMove(0)" class="drop-dot"></div>` : ''; html += state.party.map((c, i) => { if (q && !c.name.toLowerCase().includes(q)) return ''; const sE = q.length > 0 && mC === 0; mC++; let bC = "relative tab-btn flex-grow min-w-fit px-4 py-2.5 text-[11px] font-bold rounded-xl border transition active:scale-95 "; if (iE) bC += (state.editIndex === i) ? 'moving-tab' : 'text-zinc-500 border-zinc-800 bg-zinc-950/50 opacity-60'; else bC += (state.index === i && state.view === 'active') ? 'bg-red-500/10 text-red-500 border-red-500/50 shadow-lg' : 'text-zinc-500 border-zinc-800 bg-zinc-950'; const a = iE ? `onclick="handleTabEditClick(${i})"` : `onpointerdown="handleTabPointerDown(event, ${i})"`, eB = sE ? `<span class="sc-badge absolute -top-2 -left-2 z-10 shadow-md">Enter</span>` : ''; return `<button tabindex="0" ${a} class="${bC}">${eB}${c.name}</button>${iE ? `<div onclick="executeMove(${i + 1})" class="drop-dot"></div>` : ''}`; }).join(''); lst.innerHTML = html; updateShortcutLabels(); }
    function handleTabEditClick(idx) { state.editIndex = (state.editIndex === idx) ? null : idx; updateUI(false); }
    function executeMove(toIdx) { if (state.editIndex === null) return; const cAId = state.party[state.index].id, itm = state.party.splice(state.editIndex, 1)[0], aTo = toIdx > state.editIndex ? toIdx - 1 : toIdx; state.party.splice(aTo, 0, itm); state.index = state.party.findIndex(h => h.id === cAId); state.editIndex = aTo; state.hasReordered = true; updateUI(false); }
    function switchChar(i) { finalizeAdjustment(); state.index = i; state.view = 'active'; state.editIndex = null; updateUI(); }
    function switchView(v) { finalizeAdjustment(); state.view = v; state.editIndex = null; pushAppState(); updateUI(); }
    function toggleSettings() { switchView(state.view === 'settings' ? 'active' : 'settings'); } function toggleGraveyard() { switchView(state.view === 'deleted' ? 'active' : 'deleted'); }
    function toggleFullScreen() { const d = window.document, e = d.documentElement, r = e.requestFullscreen || e.mozRequestFullScreen || e.webkitRequestFullScreen || e.msRequestFullscreen, c = d.exitFullscreen || d.mozCancelFullScreen || d.webkitExitFullscreen || d.msExitFullscreen; if (!d.fullscreenElement && !d.mozFullScreenElement && !d.webkitFullscreenElement && !d.msFullscreenElement) { if (r) r.call(e); } else { if (c) c.call(d); } }
    function handleFullscreenChange() { const f = !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement), cb = el('bottomFullscreenBtn'); if (cb) { cb.title = f ? "Exit Fullscreen" : "Enable Fullscreen"; cb.innerHTML = (f ? ICONS.min : ICONS.full) + `<span class="sc-badge absolute -top-8 whitespace-nowrap shadow-md" data-sc="s_fullscreen"></span>`; } const st = el('settingsFullscreenText'), si = el('settingsFullscreenIcon'); if (st) st.innerText = f ? "Exit Full Screen Mode" : "Enable Full Screen Mode"; if (si) si.outerHTML = (f ? ICONS.min : ICONS.full).replace('width="18" height="18"', 'id="settingsFullscreenIcon" width="18" height="18"'); }
    ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange'].forEach(e => document.addEventListener(e, handleFullscreenChange));

    function finalizeAdjustment() { if (adjTimer === null) return; clearTimeout(adjTimer); adjTimer = null; const h = getHero(); if (!h) return; if (adjMode === 'hp' && adjDelta !== 0) addLog(adjDelta > 0 ? `Received ${adjDelta} Healing` : `Took ${Math.abs(adjDelta)} Damage`); else if (adjMode === 'max' && adjMaxDelta !== 0) addLog(`Max HP ${adjMaxDelta > 0 ? 'Increased' : 'Decreased'} by ${Math.abs(adjMaxDelta)}`); adjDelta = 0; adjMaxDelta = 0; adjHeroId = null; adjMode = null; updateUI(); }
    function addLog(m) { const h = getHero(); if (!h) return; const ts = Date.now(); let ss = h.isDowned ? `${h.saves.s}S / ${h.saves.f}F` : `${h.current}/${h.max}${h.temp > 0 ? ` (+${h.temp})` : ''}`; if (h._lowestHp !== undefined && h._lowestHp < 0) { ss = `${h._lowestHp}/${h.max}${h.temp > 0 ? ` (+${h.temp})` : ''}`; delete h._lowestHp; } h.log.push({ msg: m, status: ss, timestamp: ts }); while (h.log.length > 251) h.log.splice(1, 1); }
    function handleAdjustmentProcess(h, d) { if ((adjMode !== null && adjMode !== 'hp') || (adjHeroId !== null && adjHeroId !== h.id)) finalizeAdjustment(); if (adjTimer !== null && adjHeroId === h.id) { if ((adjDelta > 0 && d < 0) || (adjDelta < 0 && d > 0)) finalizeAdjustment(); else clearTimeout(adjTimer); } if (adjTimer === null) { if (d > 0 && h.current >= h.max) return; if (d < 0 && h.current === 0 && h.temp === 0) return; saveUndo(); adjHeroId = h.id; adjMode = 'hp'; adjDelta = 0; } let c = 0; h.isStable = false; if (d > 0) { c = Math.min(d, h.max - h.current); h.current += c; } else { let aD = Math.abs(d); c = d; if (h.temp > 0) { const ab = Math.min(aD, h.temp); h.temp -= ab; aD -= ab; } const rC = h.current - aD; if (rC < 0) h._lowestHp = Math.min(h._lowestHp || 0, rC); h.current = Math.max(0, rC); } adjDelta += (d > 0 ? c : d); updateUI(true); adjTimer = setTimeout(finalizeAdjustment, 1200); triggerEasterEggs(h.current); }
    function quickAdj(v) { const h = getHero(); if (h) handleAdjustmentProcess(h, v); } function updateName(v) { const h = getHero(); if (h) { h.name = getUniqueName(v, h.id); updateUI(false); } }
    function updateMax(v) { const h = getHero(); if (!h) return; const nm = Math.min(Math.max(1, parseInt(v) || 1), 10000); if (nm === h.max && adjMode !== 'max') return; if ((adjMode !== null && adjMode !== 'max') || (adjHeroId !== null && adjHeroId !== h.id)) finalizeAdjustment(); if (adjTimer === null) { saveUndo(); adjHeroId = h.id; adjMode = 'max'; adjInitialMax = h.max; } else clearTimeout(adjTimer); h.max = nm; if (h.current > h.max) h.current = h.max; adjMaxDelta = h.max - adjInitialMax; updateUI(true); adjTimer = setTimeout(finalizeAdjustment, 1200); }
    function resetApp() { const h = getHero(); if (h.current >= h.max && h.temp === 0 && !h.isDowned) return; finalizeAdjustment(); saveUndo(); const a = h.max - h.current; h.current = h.max; h.temp = 0; h.isDowned = false; h.isStable = false; h.saves = { s: 0, f: 0 }; addLog(`Fully Healed for ${a}`); updateUI(); triggerEasterEggs(h.current); }
    function stabilize() { finalizeAdjustment(); const h = getHero(); const dR = v => { if (isNaN(v) || v <= 0) v = 1; saveUndo(); h.current = Math.min(h.max, v); h.isDowned = false; h.isStable = false; h.saves = { s: 0, f: 0 }; addLog(v === 1 ? "Saved" : `Revived from Death Saves with ${h.current} HP`); updateUI(); triggerEasterEggs(h.current); }; openActionPrompt("Revive Hero", "Set HP", "bg-green-700 hover:bg-green-600", dR, '', () => dR(1), "(Empty = 1)"); }
    function toDeathSaves() { finalizeAdjustment(); const h = getHero(); saveUndo(); h.isDowned = true; h.isStable = false; h.saves = { s: 0, f: 0 }; addLog("Entering Death Saves"); closeModals(); updateUI(); }
    function deathRoll(t) { finalizeAdjustment(); const h = getHero(); saveUndo(); const o = { 's': { s: 1, f: 0, m: "Successful Death Save" }, 'f': { s: 0, f: 1, m: "Failed Death Save" }, 'c': { s: 3, f: 0, m: "NATURAL 20!" }, 'cf': { s: 0, f: 2, m: "NATURAL 1!" } }, r = o[t]; h.saves.s = Math.min(3, h.saves.s + r.s); h.saves.f = Math.min(3, h.saves.f + r.f); addLog(r.m); if (h.saves.s >= 3) { h.current = 1; h.isDowned = false; h.isStable = false; h.saves = { s: 0, f: 0 }; addLog("Stabilized"); } else if (h.saves.f >= 3) { handleKill(); return; } updateUI(); }
    function handleKill() { if (state.graveyard.length >= 100) { showMessage("Graveyard Full", "Purge fallen heroes first."); return; } finalizeAdjustment(); const h = getHero(), n = h.name; h.isDowned = false; h.isStable = false; h.current = 0; addLog("Killed"); state.graveyard.push({ ...h, undo: [...h.undo], redo: [] }); state.party.splice(state.index, 1); state.index = Math.max(0, state.index - 1); closeModals(); updateText('fallenHeroNameDisplay', n); showModal('deathAnnouncementModal'); updateUI(); triggerDeathEasterEggs(n); }

    let calcTarget = 'new';
    function openCalculator(t) { calcTarget = t; el('calcLvl1').value = 1; el('calcHd1').value = 8; [2, 3].forEach(i => { el(`calcLvl${i}`).value = 0; el(`calcHd${i}`).value = 8; el(`calcDrac${i}`).checked = false; }); el('calcCon').value = 0; el('calcTough').checked = false; el('calcDwarf').checked = false; el('calcDrac1').checked = false; doHPCalc('average'); showModal('hpCalculatorModal'); }
    function closeCalculator() { if (calcTarget === 'new') showModal('createHeroModal'); else closeModals(); }
    function doHPCalc(m = 'average') { const gV = i => parseInt(el(i).value) || 0, gC = i => el(i).checked, tL = [1, 2, 3].reduce((a, i) => a + gV('calcLvl' + i), 0); el('calcTotalLevelDisplay').innerText = tL; if (tL < 1) { el('calcResultDisplay').innerText = "0"; el('calcResultDisplay').dataset.val = 0; updateText('calcResultLabel', 'Calculated HP'); return; } let hp = 0, fD = false; [1, 2, 3].forEach(i => { let l = gV('calcLvl' + i); if (l > 0) { let hd = gV('calcHd' + i), tP = l; if (!fD) { hp += hd; tP--; fD = true; } if (tP > 0) { if (m === 'average') hp += tP * ((hd / 2) + 1); else if (m === 'roll') { for (let j = 0; j < tP; j++) hp += Math.floor(Math.random() * hd) + 1; } } if (gC('calcDrac' + i)) hp += l; } }); hp += (tL * gV('calcCon')) + (gC('calcTough') ? tL * 2 : 0) + (gC('calcDwarf') ? tL * 1 : 0); hp = Math.max(tL, hp); el('calcResultDisplay').innerText = hp; el('calcResultDisplay').dataset.val = hp; updateText('calcResultLabel', m === 'roll' ? 'Rolled HP' : 'Average HP'); }
    function applyCalculatorResult() { const v = parseInt(el('calcResultDisplay').dataset.val) || 10; if (calcTarget === 'new') { el('newHeroMaxHpInput').value = v; confirmCreateHero(); } else if (calcTarget === 'active') { updateMax(v); closeModals(); } }
    
    function restore(i) { if (state.party.length >= 100) { showMessage("Party Full", "Maximum 100 active heroes reached."); return; } finalizeAdjustment(); const dR = v => { if (isNaN(v) || v <= 0) v = 1; const h = state.graveyard.splice(i, 1)[0]; state.party.push(h); state.index = state.party.length - 1; const n = h.name; h.undo.push(getHeroSnapshot(h)); h.redo = []; h.current = Math.min(h.max, v); h.isDowned = false; h.isStable = false; h.saves = { s: 0, f: 0 }; addLog(v === 1 ? "Revived from Graveyard with 1 HP" : `Revived from Graveyard with ${h.current} HP`); updateUI(); triggerReviveEasterEggs(n); }; openActionPrompt("Revive Hero", "Set HP", "bg-green-700 hover:bg-green-600", dR, '', null, "(Empty = 1)"); }
    function purgeSingle(i) { showModal('purgeSingleModal'); el('confirmPurgeSingleBtn').onclick = () => { state.graveyard.splice(i, 1); closeModals(); updateUI(); }; }
    function confirmPurge() { state.graveyard = []; closeModals(); updateUI(); }
    function validateAndApplyState(l) { state = l; if (!state.settings) state.settings = {}; state.settings = { ...DEFAULT_SETTINGS, aspectRatio: (window.innerWidth < 768 ? 'auto' : '9/16'), ...state.settings }; if (!state.foundEggs) state.foundEggs = []; if (state.settings.fontDyslexic !== undefined) { state.settings.fontMonospace = state.settings.fontDyslexic; delete state.settings.fontDyslexic; } applyGlobalSettings(); state.view = 'active'; updateUI(); }
    function hardReset() { try { localStorage.removeItem('tpd_hp_tracker_state'); } catch (e) { } validateAndApplyState({ view: 'active', index: 0, party: [], graveyard: [], editIndex: null, hasReordered: false, settings: {}, foundEggs: [] }); closeModals(); }
    function exportState() { finalizeAdjustment(); try { const b = new Blob([JSON.stringify(state, null, 2)], { type: "application/json" }), a = Object.assign(document.createElement('a'), { href: URL.createObjectURL(b), download: `TPD_HP-Tracker_Save_${getFileSafeTimestamp()}.json` }); document.body.appendChild(a); a.click(); document.body.removeChild(a); showToast("Adventure saved!"); } catch (e) { showToast("Failed to save.", true); } }
    function importState(e) { const f = e.target.files[0]; if (!f) return; const r = new FileReader(); r.onload = v => { try { const l = JSON.parse(v.target.result); if (l.party) { validateAndApplyState(l); showMessage("Loaded", "Adventure restored."); } } catch (err) { updateUI(); showMessage("Error", "Save file corrupted."); } el('fileUpload').value = ''; }; r.readAsText(f); }
    
    function generateLogHTML(ls) { return ls.slice().reverse().map(e => { let cC = "border-zinc-500"; const m = e.msg; if (/(Joined Party|Revived|Saved|Stabilized)/i.test(m)) cC = "border-yellow-500"; else if (/(Entering Death Saves|Killed|Retired)/i.test(m)) cC = "border-orange-500"; else if (/(Temporary)/i.test(m)) cC = "border-blue-500"; else if (/(Heal|Success|NATURAL 20)/i.test(m)) cC = "border-green-500"; else if (/(Damage|Failure|Fail|NATURAL 1)/i.test(m)) cC = "border-red-500"; if (m.includes("Max HP Increased")) cC = "border-green-800"; else if (m.includes("Max HP Decreased")) cC = "border-red-800"; return `<div tabindex="0" class="flex justify-between border-l-2 ${cC} pl-3 py-1.5 shrink-0 hover:bg-zinc-800/30 transition rounded-r-lg"><div class="flex flex-col"><span class="text-zinc-300 font-bold">${e.msg}</span><span class="text-zinc-500 text-[9px] uppercase font-bold">${e.status}</span></div><div class="flex flex-col items-end"><span class="text-zinc-600 font-mono text-[11px] uppercase">${formatLogDate(e.timestamp, e.date)}</span><span class="text-zinc-600 font-mono text-[11px]">${formatLogTime(e.timestamp, e.time)}</span></div></div>`; }).join(''); }
    function renderLogItems() { if (el('logList')) el('logList').innerHTML = generateLogHTML(getHero().log); }
    
    function renderGraveyard() { const f = el('graveyardFooter'), lst = el('deletedList'), q = (el('inlineGraveSearch')?.value || '').toLowerCase(), flt = state.graveyard.map((c, i) => ({ c, i })).filter(x => x.c.name.toLowerCase().includes(q)); if (!flt.length && !q) { if (f) f.classList.add('hidden'); lst.innerHTML = `<div class="flex flex-col items-center justify-center py-20 text-center px-6">${ICONS.skull}<p class="text-zinc-500 italic text-sm">Not a single hero has fallen yet.<br>The world is safe... for now.</p></div>`; return; } if (!flt.length && q) { if (f) f.classList.remove('hidden'); lst.innerHTML = `<div class="p-4 text-center text-zinc-500 italic">No fallen heroes match your search.</div>`; return; } if (f) f.classList.remove('hidden'); const isS = state.graveyard.length === 1; lst.innerHTML = flt.map((x, idx) => { const sE = (isS || q.length > 0) && idx === 0, eB = sE ? `<span class="sc-badge absolute -top-3 -left-3 z-10 shadow-md">Enter</span>` : '', rS = isS ? scLabel('s_gy_revive', 'ml-1') : '', pS = isS ? scLabel('s_gy_purge', 'ml-1') : ''; return `<div class="relative w-full">${eB}<button tabindex="0" onclick="showLog(${x.i})" class="w-full text-left bg-zinc-800/50 border border-zinc-800 p-4 rounded-2xl flex justify-between items-center hover:bg-zinc-800 cursor-pointer transition focus-visible:bg-zinc-800"><div class="flex-1 font-bold text-zinc-300 pointer-events-none">${x.c.name}</div><div class="flex gap-2"><div onclick="event.stopPropagation();restore(${x.i})" class="px-3 py-1 flex items-center gap-1 text-[10px] font-bold bg-green-900/40 text-green-500 rounded-lg hover:bg-green-900/60 transition cursor-pointer">REVIVE ${rS}</div><div onclick="event.stopPropagation();purgeSingle(${x.i})" class="px-3 py-1 flex items-center gap-1 text-[10px] font-bold bg-red-900/20 text-red-500 rounded-lg border border-red-900/30 hover:bg-red-900/40 transition cursor-pointer">PURGE ${pS}</div></div></button></div>`; }).join(''); updateShortcutLabels(); }
    
    function showLog(i) { finalizeAdjustment(); currentGraveyardIdx = i; updateText('logHeroName', state.graveyard[i].name); el('logContentScroll').innerHTML = generateLogHTML(state.graveyard[i].log); showModal('logModal'); updateUI(false); }
    function getHeroSnapshot(h) { return JSON.stringify({ current: h.current, max: h.max, temp: h.temp, isDowned: h.isDowned, isStable: h.isStable, saves: { ...h.saves }, log: [...h.log] }); }
    function saveUndo() { const h = getHero(); if (h) { h.redo = []; h.undo.push(getHeroSnapshot(h)); } }
    function applyHistoryState(iR) { finalizeAdjustment(); const h = getHero(); if (!h) return; const sS = iR ? h.redo : h.undo, tS = iR ? h.undo : h.redo; if (!sS.length) return; let sSt = sS.pop(), sp = JSON.parse(sSt); if (sp._returnToGraveyard && !iR) { tS.push(getHeroSnapshot(h)); delete sp._returnToGraveyard; Object.assign(h, sp); state.graveyard.push({ ...h, undo: [...h.undo], redo: [...h.redo] }); state.party.splice(state.index, 1); state.index = Math.max(0, state.index - 1); updateUI(); return; } if (sp.current <= 0 && !sp.isDowned && sS.length) { tS.push(sSt); sSt = sS.pop(); sp = JSON.parse(sSt); } tS.push(getHeroSnapshot(h)); Object.assign(h, sp); updateUI(); triggerEasterEggs(h.current); }
    function undo() { applyHistoryState(false); } function redo() { applyHistoryState(true); }
    function retireActiveHero() { if (state.graveyard.length >= 100) return; finalizeAdjustment(); const h = getHero(), n = h.name; addLog("Retired"); state.graveyard.push({ ...h, undo: [...h.undo] }); state.party.splice(state.index, 1); state.index = Math.max(0, state.index - 1); closeModals(); updateUI(); triggerDeathEasterEggs(n); }
    
    try { const s = localStorage.getItem('tpd_hp_tracker_state'); if (s) { const p = JSON.parse(s); if (p && p.party) validateAndApplyState(p); else throw new Error("Invalid Save"); } else throw new Error("No Save Data"); } catch (err) { validateAndApplyState({ view: 'active', index: 0, party: [], graveyard: [], editIndex: null, hasReordered: false, settings: {}, foundEggs: [] }); }
    pushAppState();
</script>
</body>
</html>