<!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 5e Encounter 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 !important; }
@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; }
: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; }
.main-scroll::-webkit-scrollbar { width: 4px; height: 4px; }
.main-scroll::-webkit-scrollbar-track { margin-top: 2.5rem; margin-bottom: 2.5rem; background: transparent; }
.main-scroll::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 10px; }
.modal-overlay { background-color: rgba(0, 0, 0, .9); backdrop-filter: blur(8px); }
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 select.bg-zinc-700 { background-color: #fff !important; color: #18181b !important; border-color: #e4e4e7 !important; }
body.light-mode .modal-overlay { background-color: rgba(255, 255, 255, .85) !important; }
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-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-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 .text-\[\#e5e5e5\] { color: #18181b !important; }
body.light-mode button.bg-blue-600 { background-color: #2563eb !important; color: #fff !important; }
body.light-mode button.bg-green-700 { background-color: #16a34a !important; color: #fff !important; }
body.light-mode button.bg-red-700, body.light-mode button.bg-red-800 { background-color: #dc2626 !important; color: #fff !important; }
body.light-mode button.bg-red-900 { background-color: #991b1b !important; color: #fff !important; }
body.light-mode .text-yellow-500 { color: #a16207 !important; }
.drag-over { border-color: #3b82f6 !important; background-color: rgba(59, 130, 246, 0.1) !important; }
.dragging { opacity: 0.4; }
</style>
</head>
<body class="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 shadow-2xl">
<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" onclick="executeAction(['s_add'])" 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><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-orange-500/20 rounded-full flex items-center justify-center mb-4 border border-orange-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 Encounter Tracker</h1></div><p class="text-zinc-500 text-sm mb-10 max-w-sm px-4">Ask not for whom the dice rolls, it rolls for thee.</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">Initiate Your Encounter</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="renderVerticalList()" 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="massSelectToolbar" class="hidden bg-blue-900/20 border border-blue-500/50 rounded-xl p-3 flex justify-between items-center mb-4 shrink-0">
        <span class="text-xs text-blue-400 font-bold px-2"><span id="selCount">0</span> Selected</span>
        <button onclick="retireSelectedHeroes()" class="bg-red-700 hover:bg-red-600 text-white px-4 py-2 rounded-lg text-xs font-bold transition active:scale-95">Retire Selected</button>
    </div>

    <div id="verticalTrackerList" class="flex-1 flex flex-col gap-2 pb-20 shrink-0"></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="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"><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="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-6 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="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="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="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 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>

<script>
    const el = id => document.getElementById(id);
    const qAll = q => document.querySelectorAll(q);
    
    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]"),
        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>`,
        swords: `<svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12 text-orange-500" viewBox="0 0 24 24"><g stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="18" x2="20" y2="4" /><line x1="3" y1="21" x2="6" y2="18" /><line x1="4" y1="16" x2="8" y2="20" /><line x1="6" y1="6" x2="10.5" y2="10.5" /><line x1="13.5" y1="13.5" x2="20" y2="20" /><line x1="3" y1="3" x2="6" y2="6" /><line x1="4" y1="8" x2="8" y2="4" /></g></svg>`,
        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"/>`),
        grip: `<svg viewBox="0 0 24 24" class="w-5 h-5 opacity-50" fill="currentColor"><circle cx="9" cy="5" r="1.5"/><circle cx="15" cy="5" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="19" r="1.5"/><circle cx="15" cy="19" r="1.5"/></svg>`
    };
    
    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.swords;
    el('btnIconAddBig').innerHTML = ICONS.add;
    el('btnIconLoadBig').innerHTML = ICONS.load;
    qAll('.icon-back').forEach(e => e.outerHTML = ICONS.back);
    el('bottomFullscreenBtn').innerHTML = ICONS.full;
    
    const DEF_SC = {s_save:'Ctrl+S',s_load:'Ctrl+L',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_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:'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_add',l:'Add Combatant'},{id:'s_light',l:'Toggle Light Mode'},{id:'s_fullscreen',l:'Toggle Fullscreen'},{id:'s_toggle_sc',l:'Toggle Shortcuts View'}]},
        {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 = {defaultName:'Hero', fontMonospace:false, lightMode:false, autoSave:true, showFullscreenBtn:true, fontScale:100, showShortcuts:false, customShortcuts:{}};
    let state = {view:'active', party:[], graveyard:[], selected:[], settings:{}};
    
    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', currentGraveyardIdx = null, actionPromptCallback = null, actionPromptCancelCallback = null, searchMode = 'tracker', listeningForShortcut = null;
    let dragSrcIdx = 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 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 = `<span class="sc-badge absolute -top-8 whitespace-nowrap shadow-md">Shift+↕</span> ▼`;
                b.title = "Scroll to Bottom";
                b.onclick = () => s.scrollTo({top:s.scrollHeight, behavior:'smooth'});
            } else {
                b.innerHTML = `<span class="sc-badge absolute -top-8 whitespace-nowrap shadow-md">Shift+↕</span> ▲`;
                b.title = "Scroll to Top";
                b.onclick = () => s.scrollTo({top:0, behavior:'smooth'});
            }
        } else {
            b.classList.add('hidden');
        }
    }
    
    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');
    }
    
    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 executeAction(acts, fShortcut=false) {
        if(!Array.isArray(acts)) acts = [acts];
        const has = a => acts.includes(a);
        const mdl = !el('modalContainer').classList.contains('hidden');
        const isInp = document.activeElement && ['INPUT','TEXTAREA'].includes(document.activeElement.tagName);
        const 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_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; }
        
        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; }
            }
        }
    }
    
    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(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; }
            if(isInp) { e.target.blur(); return; }
            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'))) {
                if(ae.tagName === 'INPUT' && ae.type === 'checkbox') return; // let default click happen
                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');
            const 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 === 'createHeroModal') confirmCreateHero();
                    else if(am.id === 'hardResetModal') hardReset();
                    else if(am.id === 'purgeAllModal') confirmPurge();
                    else if(am.id === 'purgeSingleModal') el('confirmPurgeSingleBtn').click();
                    else closeModals();
                } else closeModals();
                if(document.activeElement && document.activeElement.blur) document.activeElement.blur();
                return;
            }
            if(isInp) {
                e.preventDefault();
                e.target.blur();
                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 requestNewCharacter() {
        if(state.party.length >= 100) { showMessage("Party Full", "Maximum 100 combatants reached."); return; }
        el('newHeroNameInput').value = getUniqueName(state.settings?.defaultName || "Hero");
        showModal('createHeroModal');
        el('newHeroNameInput').focus();
    }
    
    function confirmCreateHero() {
        const un = getUniqueName(el('newHeroNameInput').value.trim() || state.settings?.defaultName || "Hero");
        const ts = Date.now();
        state.party.push({ id: ts, name: un });
        state.view = 'active';
        closeModals();
        updateUI();
    }
    
    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();
        const 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 and heroes. Use this to backup or transfer your encounter.</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 Encounter 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 Encounter 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 encounter.</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 Encounter 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('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)}`);
        
        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-orange-500/20 rounded-full flex items-center justify-center mb-1 border border-orange-500/40">${ICONS.swords}</div><h2 class="fantasy-font text-2xl text-yellow-500 font-bold leading-tight text-center">The Ultimate<br>D&D 5e Encounter 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>`;
        
        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(['autoSave','showFullscreenBtn','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('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', `Initiate Your Encounter ${scLabel('s_add','ml-2')}`);
            updateText('loadBtnLabel', `Load Your Encounter ${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')}`);
            
            if(state.view === 'deleted') renderGraveyard();
            else if(state.view === 'settings') renderSettingsTabs();
            else if(state.view === 'active' && full) renderVerticalList();
        }
        
        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 renderVerticalList() {
        const lst = el('verticalTrackerList');
        if(!lst) return;
        const q = (el('inlineActiveSearch')?.value || '').toLowerCase();
        if(!state.selected) state.selected = [];
        
        lst.innerHTML = state.party.map((h, i) => {
            if(q && !h.name.toLowerCase().includes(q)) return '';
            const isSel = state.selected.includes(h.id);
            return `
            <div draggable="true" 
                 ondragstart="handleDragStart(event, ${i})"
                 ondragover="handleDragOver(event)"
                 ondrop="handleDrop(event, ${i})"
                 class="flex items-center gap-3 bg-zinc-800/50 hover:bg-zinc-800 border ${isSel ? 'border-blue-500' : 'border-zinc-700'} p-4 rounded-xl transition">
                <div class="cursor-grab active:cursor-grabbing text-zinc-500 hover:text-zinc-300">
                    ${ICONS.grip}
                </div>
                <input type="checkbox" 
                       ${isSel ? 'checked' : ''} 
                       onchange="toggleSelect('${h.id}')"
                       class="w-5 h-5 rounded bg-zinc-900 border-zinc-700 accent-blue-600 cursor-pointer flex-shrink-0">
                <input type="text" 
                       value="${h.name}" 
                       onchange="updateHeroName(${i}, this.value)"
                       class="flex-1 bg-transparent border-b border-transparent hover:border-zinc-600 focus:border-blue-500 focus:outline-none text-zinc-200 font-bold px-1 py-1 transition min-w-0">
            </div>
            `;
        }).join('');
        
        const massBar = el('massSelectToolbar');
        if(state.selected.length > 0) {
            massBar.classList.remove('hidden');
            el('selCount').innerText = state.selected.length;
        } else {
            massBar.classList.add('hidden');
        }
    }
    
    function handleDragStart(e, idx) {
        dragSrcIdx = idx;
        e.target.classList.add('opacity-50');
        e.dataTransfer.effectAllowed = 'move';
    }
    
    function handleDragOver(e) {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'move';
    }
    
    function handleDrop(e, idx) {
        e.stopPropagation();
        if (dragSrcIdx !== null && dragSrcIdx !== idx) {
            const moved = state.party.splice(dragSrcIdx, 1)[0];
            state.party.splice(idx, 0, moved);
            updateUI();
        }
        dragSrcIdx = null;
    }
    
    function toggleSelect(id) {
        if(!state.selected) state.selected = [];
        const idx = state.selected.indexOf(id);
        if(idx > -1) state.selected.splice(idx, 1);
        else state.selected.push(id);
        renderVerticalList();
    }
    
    function updateHeroName(i, val) {
        state.party[i].name = getUniqueName(val, state.party[i].id);
        updateUI();
    }

    function retireSelectedHeroes() {
        if(!state.selected || state.selected.length === 0) return;
        const toRetire = state.party.filter(h => state.selected.includes(h.id));
        state.party = state.party.filter(h => !state.selected.includes(h.id));
        state.graveyard.push(...toRetire);
        state.selected = [];
        updateUI();
    }
    
    function switchView(v) { state.view = v; updateUI(); }
    
    function toggleFullScreen() {
        const d = window.document, e = d.documentElement;
        const r = e.requestFullscreen || e.mozRequestFullScreen || e.webkitRequestFullScreen || e.msRequestFullscreen;
        const 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);
        const 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 restore(i) {
        if(state.party.length >= 100) { showMessage("Party Full", "Maximum 100 combatants reached."); return; }
        const h = state.graveyard.splice(i, 1)[0];
        state.party.push(h);
        updateUI();
    }
    
    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.selected) state.selected = [];
        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', party:[], graveyard:[], selected:[], settings:{}});
        closeModals();
    }
    
    function exportState() {
        try {
            const b = new Blob([JSON.stringify(state, null, 2)], {type:"application/json"});
            const a = Object.assign(document.createElement('a'), {href:URL.createObjectURL(b), download:`TPD_Encounter-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 renderGraveyard() {
        const f = el('graveyardFooter'), lst = el('deletedList');
        const q = (el('inlineGraveSearch')?.value || '').toLowerCase();
        const 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;
            const eB = sE ? `<span class="sc-badge absolute -top-3 -left-3 z-10 shadow-md">Enter</span>` : '';
            return `<div class="relative w-full">${eB}<button tabindex="0" 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</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</div></div></button></div>`;
        }).join('');
        updateShortcutLabels();
    }
    
    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', party:[], graveyard:[], selected:[], settings:{}});
    }
</script>
</body>
</html>