Quest Encounter Builder

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_204":205,"_206":207},"routes/_app.x.$handle.$name",{"_94":93,"_32":44,"_103":84,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":121,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":25},"version",11,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","styles.ts","latestPath","fileId","41e6e7a6-e774-11f0-ab1a-42dde27851f2","name","fileType","content","// CSS styles for Quest Encounter Master\n\nexport const STYLES = `\n* { box-sizing: border-box; margin: 0; padding: 0; }\n\n:root {\n --ink: #111111;\n --paper: #ffffff;\n --warm-gray: #f8f7f5;\n --border: #d4d4d4;\n --muted: #555555;\n --accent: #d4145a;\n}\n\nbody {\n font-family: 'Ovo', Georgia, serif;\n background: var(--warm-gray);\n color: var(--ink);\n line-height: 1.5;\n font-size: 17px;\n}\n\n.h1, h1 { \n font-family: 'Alegreya Sans SC', sans-serif; \n font-weight: 900;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n}\n\n.h2, h2 { \n font-family: 'Alegreya Sans SC', sans-serif; \n font-weight: 800;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n}\n\n.h3, h3 {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-weight: 700;\n font-size: 0.8rem;\n text-transform: uppercase;\n letter-spacing: 0.12em;\n}\n\n.app {\n max-width: 640px;\n margin: 0 auto;\n padding: 2.5rem 1.25rem;\n}\n\nheader {\n text-align: center;\n margin-bottom: 2.5rem;\n}\n\nheader h1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n color: var(--ink);\n}\n\nheader .subtitle {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 1rem;\n font-weight: 700;\n color: var(--muted);\n letter-spacing: 0.15em;\n}\n\n.card {\n background: var(--paper);\n border-radius: 3px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n margin-bottom: 2rem;\n}\n\n.party-input {\n padding: 2rem;\n text-align: center;\n}\n\n.party-input label {\n display: block;\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.85rem;\n font-weight: 700;\n letter-spacing: 0.12em;\n color: var(--muted);\n margin-bottom: 1rem;\n}\n\n.hp-row {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n margin-bottom: 1.25rem;\n}\n\n.hp-row button {\n width: 44px;\n height: 44px;\n border: 2px solid var(--border);\n background: var(--paper);\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 1.5rem;\n font-weight: 700;\n cursor: pointer;\n transition: all 0.15s;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.hp-row button:hover {\n background: var(--warm-gray);\n border-color: var(--ink);\n}\n\n.hp-row input {\n width: 100px;\n text-align: center;\n font-family: 'Alegreya', serif;\n font-weight: 900;\n font-size: 3.5rem;\n border: none;\n background: transparent;\n outline: none;\n color: var(--ink);\n}\n\n.presets {\n display: flex;\n gap: 0.625rem;\n justify-content: center;\n flex-wrap: wrap;\n}\n\n.presets button {\n padding: 0.5rem 1rem;\n border: 2px solid var(--border);\n background: var(--paper);\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.8rem;\n font-weight: 700;\n color: var(--muted);\n cursor: pointer;\n transition: all 0.15s;\n}\n\n.presets button:hover {\n border-color: var(--ink);\n color: var(--ink);\n}\n\n.difficulty-guide {\n border: 2px dashed var(--border);\n border-left: 4px solid var(--muted);\n padding: 1.5rem;\n margin-bottom: 2rem;\n background: var(--paper);\n}\n\n.guide-header {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n cursor: pointer;\n}\n\n.guide-header .icon {\n width: 24px;\n height: 24px;\n color: var(--muted);\n}\n\n.guide-header h3 {\n flex: 1;\n font-size: 0.85rem;\n}\n\n.guide-header .chevron {\n width: 20px;\n height: 20px;\n color: var(--muted);\n transition: transform 0.2s;\n}\n\n.guide-header .chevron.open {\n transform: rotate(180deg);\n}\n\n.guide-content {\n display: none;\n padding-top: 1rem;\n border-top: 1px dashed var(--border);\n margin-top: 1rem;\n}\n\n.guide-content.open {\n display: block;\n}\n\n.ranges {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 0.625rem;\n margin-bottom: 1.25rem;\n}\n\n.range {\n text-align: center;\n padding: 1rem 0.75rem;\n background: var(--warm-gray);\n border: 1px solid var(--border);\n}\n\n.range .label {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.7rem;\n font-weight: 700;\n letter-spacing: 0.1em;\n color: var(--muted);\n display: block;\n margin-bottom: 0.375rem;\n}\n\n.range .value {\n font-family: 'Alegreya', serif;\n font-weight: 700;\n font-size: 1rem;\n}\n\n.formula {\n text-align: center;\n font-family: 'Alegreya', serif;\n font-weight: 800;\n font-size: 1.25rem;\n margin: 1.25rem 0;\n color: var(--ink);\n}\n\nblockquote {\n font-style: italic;\n color: var(--muted);\n font-size: 0.95rem;\n padding-left: 1.25rem;\n border-left: 3px solid var(--border);\n line-height: 1.6;\n}\n\nblockquote cite {\n display: block;\n margin-top: 0.625rem;\n font-style: normal;\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.7rem;\n font-weight: 700;\n letter-spacing: 0.1em;\n}\n\n.difficulty-section {\n margin-bottom: 1rem;\n}\n\n.difficulty-header {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem 1.25rem;\n background: var(--paper);\n border: 2px solid var(--border);\n cursor: pointer;\n transition: border-color 0.15s;\n}\n\n.difficulty-header:hover {\n border-color: var(--ink);\n}\n\n.difficulty-badge {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.75rem;\n font-weight: 800;\n letter-spacing: 0.1em;\n padding: 0.375rem 0.75rem;\n background: var(--warm-gray);\n}\n\n.difficulty-badge.easy { background: #dbeafe; color: #1e40af; }\n.difficulty-badge.fair { background: #dcfce7; color: #166534; }\n.difficulty-badge.deadly { background: #fee2e2; color: #b91c1c; }\n\n.difficulty-count {\n font-family: 'Ovo', serif;\n font-size: 1rem;\n color: var(--muted);\n flex: 1;\n}\n\n.difficulty-chevron {\n width: 20px;\n height: 20px;\n color: var(--muted);\n transition: transform 0.2s;\n}\n\n.difficulty-chevron.open {\n transform: rotate(180deg);\n}\n\n.difficulty-grid {\n display: none;\n padding: 1.25rem 0;\n gap: 1.25rem;\n}\n\n.difficulty-grid.open {\n display: grid;\n}\n\n.creature-card {\n background: var(--paper);\n border: 2px solid var(--border);\n padding: 1.5rem;\n transition: border-color 0.15s;\n}\n\n.creature-card:hover {\n border-color: var(--ink);\n}\n\n.creature-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 0.625rem;\n}\n\n.creature-name {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-weight: 900;\n font-size: 1.125rem;\n}\n\n.creature-rating {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.7rem;\n font-weight: 700;\n color: var(--muted);\n letter-spacing: 0.08em;\n}\n\n.creature-flavor {\n font-size: 1rem;\n color: var(--muted);\n margin-bottom: 1rem;\n}\n\n.stat-line {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n margin-bottom: 1rem;\n font-family: 'Alegreya Sans SC', sans-serif;\n font-weight: 800;\n font-size: 1rem;\n}\n\n.stat-line .divider {\n flex: 1;\n height: 2px;\n background: var(--ink);\n}\n\n.abilities {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n margin-bottom: 1.25rem;\n}\n\n.ability-badge {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.7rem;\n font-weight: 700;\n letter-spacing: 0.05em;\n padding: 0.375rem 0.625rem;\n background: var(--ink);\n color: var(--paper);\n}\n\n.creature-actions {\n display: flex;\n gap: 0.625rem;\n}\n\n.btn {\n padding: 0.625rem 1.25rem;\n border: 2px solid var(--border);\n background: var(--paper);\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.85rem;\n font-weight: 700;\n letter-spacing: 0.05em;\n cursor: pointer;\n transition: all 0.15s;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n}\n\n.btn:hover {\n border-color: var(--ink);\n}\n\n.btn-primary {\n flex: 1;\n background: var(--ink);\n color: var(--paper);\n border-color: var(--ink);\n}\n\n.btn-primary:hover {\n background: #333;\n}\n\n.btn svg {\n width: 16px;\n height: 16px;\n}\n\n.combat-view .app {\n max-width: 480px;\n}\n\n.combat-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.25rem;\n background: var(--paper);\n margin-bottom: 1.25rem;\n border: 2px solid var(--border);\n}\n\n.combat-header .back {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.85rem;\n font-weight: 700;\n color: var(--muted);\n background: none;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 0.375rem;\n}\n\n.combat-header .back:hover {\n color: var(--ink);\n}\n\n.combat-header .back svg {\n width: 16px;\n height: 16px;\n}\n\n.combat-header .title {\n text-align: right;\n}\n\n.combat-header h2 {\n font-size: 1.25rem;\n}\n\n.combat-header .subtitle {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.7rem;\n font-weight: 700;\n color: var(--muted);\n letter-spacing: 0.12em;\n}\n\n.combat-unit {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1.25rem;\n background: var(--paper);\n border: 2px solid var(--border);\n margin-bottom: 0.625rem;\n}\n\n.combat-unit.dead {\n opacity: 0.5;\n background: var(--warm-gray);\n}\n\n.unit-info {\n display: flex;\n align-items: center;\n gap: 1.25rem;\n}\n\n.unit-hp {\n width: 56px;\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 3px solid var(--ink);\n font-family: 'Alegreya', serif;\n font-weight: 900;\n font-size: 1.5rem;\n}\n\n.combat-unit.dead .unit-hp {\n border-color: var(--border);\n color: var(--muted);\n}\n\n.unit-name {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-weight: 800;\n font-size: 1.125rem;\n}\n\n.unit-stats {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.7rem;\n font-weight: 700;\n color: var(--muted);\n letter-spacing: 0.08em;\n}\n\n.unit-controls {\n display: flex;\n gap: 0.625rem;\n}\n\n.unit-controls button {\n width: 44px;\n height: 44px;\n border: 2px solid var(--border);\n background: var(--paper);\n font-size: 1.5rem;\n font-weight: 700;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.unit-controls .damage {\n color: #b91c1c;\n border-color: #fecaca;\n background: #fef2f2;\n}\n\n.unit-controls .heal {\n color: #166534;\n border-color: #bbf7d0;\n background: #dcfce7;\n}\n\n.victory {\n margin-top: 2.5rem;\n padding: 2.5rem;\n background: #dcfce7;\n border: 2px solid #86efac;\n text-align: center;\n}\n\n.victory h3 {\n font-family: 'Alegreya', serif;\n font-weight: 900;\n font-style: italic;\n font-size: 1.75rem;\n color: #166534;\n margin-bottom: 1.25rem;\n}\n\n.attribution {\n margin-top: 3rem;\n padding-top: 1.5rem;\n border-top: 1px solid var(--border);\n text-align: center;\n}\n\n.attribution p {\n font-size: 0.8rem;\n color: var(--muted);\n margin-bottom: 0.5rem;\n}\n\n.attribution a {\n color: var(--muted);\n text-decoration: underline;\n}\n\n.attribution a:hover {\n color: var(--ink);\n}\n\n@media (max-width: 480px) {\n .ranges { grid-template-columns: 1fr; }\n header h1 { font-size: 2rem; }\n .hp-row input { font-size: 2.5rem; }\n}\n`;\n","// CSS styles for Quest Encounter Builder\n// Typography: Alegreya Sans SC (headings), Alegreya (pullquotes), Ovo (body)\n\nexport const STYLES = `\n* { box-sizing: border-box; margin: 0; padding: 0; }\n\n:root {\n --ink: #111111;\n --paper: #ffffff;\n --warm-gray: #f8f7f5;\n --border: #e5e5e5;\n --border-strong: #d4d4d4;\n --muted: #555555;\n --accent: #d4145a;\n --radius: 12px;\n --radius-sm: 8px;\n}\n\nbody {\n font-family: 'Ovo', Georgia, serif;\n background: var(--warm-gray);\n color: var(--ink);\n line-height: 1.5;\n font-size: 17px;\n}\n\n.h1, h1 { \n font-family: 'Alegreya Sans SC', sans-serif; \n font-weight: 900;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n}\n\n.h2, h2 { \n font-family: 'Alegreya Sans SC', sans-serif; \n font-weight: 800;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n}\n\n.h3, h3 {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-weight: 700;\n font-size: 0.8rem;\n text-transform: uppercase;\n letter-spacing: 0.12em;\n}\n\n.app {\n max-width: 640px;\n margin: 0 auto;\n padding: 2.5rem 1.25rem;\n}\n\nheader {\n text-align: center;\n margin-bottom: 2.5rem;\n}\n\nheader h1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n color: var(--ink);\n}\n\nheader .subtitle {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 1rem;\n font-weight: 700;\n color: var(--muted);\n letter-spacing: 0.15em;\n}\n\n.card {\n background: var(--paper);\n border-radius: var(--radius);\n border: 1px solid var(--border);\n box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n margin-bottom: 2rem;\n}\n\n.party-input {\n padding: 2rem;\n text-align: center;\n}\n\n.party-input label {\n display: block;\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.85rem;\n font-weight: 700;\n letter-spacing: 0.12em;\n color: var(--muted);\n margin-bottom: 1rem;\n}\n\n.hp-row {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n margin-bottom: 1.25rem;\n}\n\n.hp-row button {\n width: 44px;\n height: 44px;\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n background: var(--paper);\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 1.5rem;\n font-weight: 700;\n cursor: pointer;\n transition: all 0.15s;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.hp-row button:hover {\n background: var(--warm-gray);\n border-color: var(--border-strong);\n}\n\n.hp-row input {\n width: 100px;\n text-align: center;\n font-family: 'Alegreya', serif;\n font-weight: 900;\n font-size: 3.5rem;\n border: none;\n background: transparent;\n outline: none;\n color: var(--ink);\n}\n\n.presets {\n display: flex;\n gap: 0.5rem;\n justify-content: center;\n flex-wrap: wrap;\n}\n\n.presets button {\n padding: 0.5rem 0.875rem;\n border: 1px solid var(--border);\n border-radius: 999px;\n background: var(--paper);\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.75rem;\n font-weight: 700;\n color: var(--muted);\n cursor: pointer;\n transition: all 0.15s;\n}\n\n.presets button:hover {\n border-color: var(--border-strong);\n color: var(--ink);\n}\n\n.difficulty-guide {\n border: 1px solid var(--border);\n border-left: 4px solid var(--muted);\n border-radius: var(--radius-sm);\n padding: 1.25rem;\n margin-bottom: 2rem;\n background: var(--paper);\n}\n\n.guide-header {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n cursor: pointer;\n}\n\n.guide-header .icon {\n width: 20px;\n height: 20px;\n color: var(--muted);\n}\n\n.guide-header h3 {\n flex: 1;\n font-size: 0.8rem;\n}\n\n.guide-header .chevron {\n width: 18px;\n height: 18px;\n color: var(--muted);\n transition: transform 0.2s;\n}\n\n.guide-header .chevron.open {\n transform: rotate(180deg);\n}\n\n.guide-content {\n display: none;\n padding-top: 1rem;\n border-top: 1px dashed var(--border);\n margin-top: 1rem;\n}\n\n.guide-content.open {\n display: block;\n}\n\n.ranges {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 0.5rem;\n margin-bottom: 1.25rem;\n}\n\n.range {\n text-align: center;\n padding: 0.875rem 0.5rem;\n background: var(--warm-gray);\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n}\n\n.range .label {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.65rem;\n font-weight: 700;\n letter-spacing: 0.08em;\n color: var(--muted);\n display: block;\n margin-bottom: 0.25rem;\n}\n\n.range .value {\n font-family: 'Alegreya', serif;\n font-weight: 700;\n font-size: 0.95rem;\n}\n\n.formula {\n text-align: center;\n font-family: 'Alegreya', serif;\n font-weight: 800;\n font-size: 1.25rem;\n margin: 1.25rem 0;\n color: var(--ink);\n}\n\nblockquote {\n font-style: italic;\n color: var(--muted);\n font-size: 0.9rem;\n padding-left: 1.25rem;\n border-left: 3px solid var(--border);\n line-height: 1.6;\n}\n\nblockquote cite {\n display: block;\n margin-top: 0.625rem;\n font-style: normal;\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.65rem;\n font-weight: 700;\n letter-spacing: 0.1em;\n}\n\n.difficulty-section {\n margin-bottom: 0.75rem;\n}\n\n.difficulty-header {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem 1.25rem;\n background: var(--paper);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n cursor: pointer;\n transition: border-color 0.15s;\n}\n\n.difficulty-header:hover {\n border-color: var(--border-strong);\n}\n\n.difficulty-badge {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.7rem;\n font-weight: 800;\n letter-spacing: 0.08em;\n padding: 0.375rem 0.75rem;\n border-radius: var(--radius-sm);\n}\n\n.difficulty-badge.easy { background: #dbeafe; color: #1e40af; }\n.difficulty-badge.fair { background: #dcfce7; color: #166534; }\n.difficulty-badge.deadly { background: #fee2e2; color: #b91c1c; }\n\n.difficulty-count {\n font-family: 'Ovo', serif;\n font-size: 0.95rem;\n color: var(--muted);\n flex: 1;\n}\n\n.difficulty-chevron {\n width: 18px;\n height: 18px;\n color: var(--muted);\n transition: transform 0.2s;\n}\n\n.difficulty-chevron.open {\n transform: rotate(180deg);\n}\n\n.difficulty-grid {\n display: none;\n padding: 1rem 0;\n gap: 1rem;\n}\n\n.difficulty-grid.open {\n display: grid;\n}\n\n.encounter-card {\n background: var(--paper);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 1.25rem;\n transition: all 0.15s;\n}\n\n.encounter-card:hover {\n border-color: var(--border-strong);\n box-shadow: 0 4px 12px rgba(0,0,0,0.06);\n}\n\n.encounter-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 0.5rem;\n}\n\n.encounter-name {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-weight: 900;\n font-size: 1.125rem;\n}\n\n.encounter-rating {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.65rem;\n font-weight: 700;\n color: var(--muted);\n letter-spacing: 0.06em;\n background: var(--warm-gray);\n padding: 0.25rem 0.5rem;\n border-radius: 4px;\n}\n\n.encounter-flavor {\n font-size: 0.95rem;\n color: var(--muted);\n margin-bottom: 0.875rem;\n}\n\n/* Roster stats - inline compact display */\n.roster-stats {\n display: flex;\n flex-wrap: wrap;\n gap: 0.375rem;\n margin-bottom: 1rem;\n}\n\n.roster-unit {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.75rem;\n font-weight: 700;\n background: var(--warm-gray);\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n padding: 0.375rem 0.625rem;\n}\n\n.roster-unit .count {\n color: var(--ink);\n}\n\n.roster-unit .stats {\n color: var(--muted);\n font-weight: 500;\n padding-left: 0.5rem;\n border-left: 1px solid var(--border);\n}\n\n.encounter-actions {\n display: flex;\n gap: 0.5rem;\n}\n\n.btn {\n padding: 0.625rem 1rem;\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n background: var(--paper);\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.8rem;\n font-weight: 700;\n letter-spacing: 0.04em;\n cursor: pointer;\n transition: all 0.15s;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n}\n\n.btn:hover {\n border-color: var(--border-strong);\n background: var(--warm-gray);\n}\n\n.btn-primary {\n flex: 1;\n background: var(--ink);\n color: var(--paper);\n border-color: var(--ink);\n}\n\n.btn-primary:hover {\n background: #333;\n border-color: #333;\n}\n\n.btn svg {\n width: 14px;\n height: 14px;\n}\n\n.combat-view .app {\n max-width: 480px;\n}\n\n.combat-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 1.25rem;\n background: var(--paper);\n margin-bottom: 1rem;\n border: 1px solid var(--border);\n border-radius: var(--radius);\n}\n\n.combat-header .back {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.8rem;\n font-weight: 700;\n color: var(--muted);\n background: none;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.combat-header .back:hover {\n color: var(--ink);\n}\n\n.combat-header .back svg {\n width: 16px;\n height: 16px;\n}\n\n.combat-header .title {\n text-align: right;\n}\n\n.combat-header h2 {\n font-size: 1.125rem;\n}\n\n.combat-header .subtitle {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.65rem;\n font-weight: 700;\n color: var(--muted);\n letter-spacing: 0.1em;\n}\n\n.combat-unit {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1rem 1.25rem;\n background: var(--paper);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n margin-bottom: 0.5rem;\n}\n\n.combat-unit.dead {\n opacity: 0.5;\n background: var(--warm-gray);\n}\n\n.unit-info {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.unit-hp {\n width: 52px;\n height: 52px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--ink);\n border-radius: var(--radius-sm);\n font-family: 'Alegreya', serif;\n font-weight: 900;\n font-size: 1.375rem;\n}\n\n.combat-unit.dead .unit-hp {\n border-color: var(--border);\n color: var(--muted);\n}\n\n.unit-name {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-weight: 800;\n font-size: 1rem;\n}\n\n.unit-stats {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.65rem;\n font-weight: 700;\n color: var(--muted);\n letter-spacing: 0.06em;\n}\n\n.unit-controls {\n display: flex;\n gap: 0.5rem;\n}\n\n.unit-controls button {\n width: 40px;\n height: 40px;\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n background: var(--paper);\n font-size: 1.375rem;\n font-weight: 700;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.unit-controls .damage {\n color: #b91c1c;\n border-color: #fecaca;\n background: #fef2f2;\n}\n\n.unit-controls .damage:hover {\n background: #fee2e2;\n}\n\n.unit-controls .heal {\n color: #166534;\n border-color: #bbf7d0;\n background: #dcfce7;\n}\n\n.unit-controls .heal:hover {\n background: #bbf7d0;\n}\n\n.victory {\n margin-top: 2rem;\n padding: 2rem;\n background: #dcfce7;\n border: 1px solid #86efac;\n border-radius: var(--radius);\n text-align: center;\n}\n\n.victory h3 {\n font-family: 'Alegreya', serif;\n font-weight: 900;\n font-style: italic;\n font-size: 1.5rem;\n color: #166534;\n margin-bottom: 1rem;\n}\n\n.attribution {\n margin-top: 2.5rem;\n padding-top: 1.25rem;\n border-top: 1px solid var(--border);\n text-align: center;\n}\n\n.attribution p {\n font-size: 0.8rem;\n color: var(--muted);\n margin-bottom: 0.375rem;\n}\n\n.attribution a {\n color: var(--muted);\n text-decoration: underline;\n}\n\n.attribution a:hover {\n color: var(--ink);\n}\n\n@media (max-width: 480px) {\n .ranges { grid-template-columns: 1fr; }\n header h1 { font-size: 2rem; }\n .hp-row input { font-size: 2.5rem; }\n}\n`;\n","createdAt",["D",1767315322982],"branchVersion","branchId","c267ae72-e771-11f0-a247-42dde27851f2","id","c2676bba-e771-11f0-a247-42dde27851f2","quest-encounters",["D",1767313622733],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Quest RPG encounter builder with official typography","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_94":93,"_102":98},"org",{"_94":93,"_95":96,"_97":98,"_18":54,"_99":100,"_101":25},"branch",{"_13":83,"_32":84,"_42":41,"_85":43,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":44,"_92":93},"isOwned",13,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dcm31","handle","displayName","Charlie","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789541999&sig=7032040c53bed00f88177505596e579d7fe702ff82f3f97f431146d41baae6d9","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":200,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":201,"_78":202,"_80":203,"_82":25},"tree",[179,180,181,182,183],"files",[179,180,181,182,183],"counts",{"_169":60,"_170":135,"_171":60,"_172":173,"_174":175},"contents",[126,127,128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_42":162,"_32":163,"_30":164,"_132":-5,"_40":41,"_39":165,"_133":121,"_37":166,"_13":135,"_33":20,"_34":167,"_24":25,"_136":-5,"_27":168},{"_42":155,"_32":156,"_30":157,"_132":-5,"_40":41,"_39":158,"_133":121,"_37":159,"_13":60,"_33":20,"_34":160,"_24":25,"_136":-5,"_27":161},{"_42":148,"_32":149,"_30":150,"_132":-5,"_40":41,"_39":151,"_133":25,"_37":152,"_13":60,"_33":20,"_34":153,"_24":25,"_136":-5,"_27":154},{"_42":138,"_32":139,"_30":140,"_132":-5,"_40":41,"_39":141,"_133":121,"_37":142,"_13":143,"_33":144,"_34":145,"_24":25,"_136":146,"_27":147},{"_42":131,"_32":28,"_30":31,"_132":-5,"_40":41,"_39":14,"_133":121,"_37":134,"_13":135,"_33":20,"_34":36,"_24":25,"_136":-5,"_27":137},"b7d57738-e775-11f0-803a-42dde27851f2","parentId","latest",["D",1767315322982],1,"label",[28],"98939f30-e775-11f0-9fb0-42dde27851f2","main.ts","0de17bc6-e772-11f0-bdd4-42dde27851f2",10,["D",1767315270538],4,"http","import { Hono } from \"npm:hono@4\";\nimport { BESTIARY } from \"./bestiary.ts\";\nimport { STYLES } from \"./styles.ts\";\nimport { getClientScript } from \"./client.ts\";\n\nconst app = new Hono();\n\nconst HTML = `\n\n\n \n \n Quest Encounter Builder\n \n \n \n \n\n\n

\n \n \n \n\n`;\n\napp.get(\"/\", (c) => c.html(HTML));\n\nexport default app.fetch;\n","questencounters",[139],"6e661342-e774-11f0-a2ab-42dde27851f2","client.ts","6e661432-e774-11f0-a2ab-42dde27851f2",7,["D",1767314770282],"// Client-side React app code (runs in browser)\n\nexport function getClientScript(bestiaryJson: string): string {\n return `\nconst { useState, useMemo, useEffect } = React;\n\nconst BESTIARY = ${bestiaryJson};\n\n// SVG Icons\nconst Icons = {\n chevronDown: '',\n arrowLeft: '',\n play: '',\n download: '',\n book: '',\n skull: '',\n};\n\nfunction Icon({ name, className }) {\n return React.createElement('span', {\n className: className,\n dangerouslySetInnerHTML: { __html: Icons[name] },\n style: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }\n });\n}\n\nfunction classifyDifficulty(cost, ranges) {\n if (cost >= ranges.Easy.min && cost <= ranges.Easy.max) return \"Easy\";\n if (cost >= ranges.Fair.min && cost <= ranges.Fair.max) return \"Fair\";\n if (cost >= ranges.Deadly.min && cost <= ranges.Deadly.max) return \"Deadly\";\n return null;\n}\n\nfunction generateEncounters(partyHP) {\n const ranges = {\n Easy: { min: partyHP * 0.2, max: partyHP * 0.49 },\n Fair: { min: partyHP * 0.5, max: partyHP * 0.89 },\n Deadly: { min: partyHP * 0.9, max: partyHP * 1.3 },\n };\n \n const encounters = [];\n const seen = new Set();\n \n const minion = BESTIARY.find(c => c.id === \"minion\");\n const veteran = BESTIARY.find(c => c.id === \"veteran\");\n const boss = BESTIARY.find(c => c.id === \"boss\");\n const bigBoss = BESTIARY.find(c => c.id === \"big_boss\");\n \n const targets = [ranges.Easy.max, ranges.Fair.max, ranges.Deadly.max];\n \n for (const target of targets) {\n const minionCount = Math.floor(target / minion.cost);\n if (minionCount > 0) {\n const roster = Array(minionCount).fill(minion);\n const cost = roster.reduce((s, c) => s + c.cost, 0);\n const difficulty = classifyDifficulty(cost, ranges);\n const id = \"horde-\" + cost;\n if (difficulty && !seen.has(id)) {\n seen.add(id);\n encounters.push({ id, name: \"The Horde\", flavor: minionCount + \" minions swarm the party\", totalCost: cost, roster, difficulty });\n }\n }\n \n const veteranCount = Math.floor(target / veteran.cost);\n if (veteranCount > 0) {\n const roster = Array(veteranCount).fill(veteran);\n const cost = roster.reduce((s, c) => s + c.cost, 0);\n const difficulty = classifyDifficulty(cost, ranges);\n const id = \"elite-\" + cost;\n if (difficulty && !seen.has(id)) {\n seen.add(id);\n encounters.push({ id, name: \"Elite Squad\", flavor: veteranCount + \" battle-hardened veterans\", totalCost: cost, roster, difficulty });\n }\n }\n \n if (target > boss.cost) {\n const addCount = Math.round((target - boss.cost) / minion.cost);\n const roster = [boss, ...Array(addCount).fill(minion)];\n const cost = roster.reduce((s, c) => s + c.cost, 0);\n const difficulty = classifyDifficulty(cost, ranges);\n const id = \"boss-\" + cost;\n if (difficulty && !seen.has(id)) {\n seen.add(id);\n encounters.push({ id, name: \"Boss Leader\", flavor: \"1 Boss with \" + addCount + \" minion guards\", totalCost: cost, roster, difficulty });\n }\n }\n \n if (target >= bigBoss.cost) {\n const addCount = Math.floor((target - bigBoss.cost) / minion.cost);\n const roster = [bigBoss, ...Array(addCount).fill(minion)];\n const cost = roster.reduce((s, c) => s + c.cost, 0);\n const difficulty = classifyDifficulty(cost, ranges);\n const id = \"villain-\" + cost;\n if (difficulty && !seen.has(id)) {\n seen.add(id);\n encounters.push({ id, name: \"Major Villain\", flavor: addCount > 0 ? \"Big Boss with \" + addCount + \" loyal guards\" : \"A fearsome Big Boss stands alone\", totalCost: cost, roster, difficulty });\n }\n }\n }\n \n return { encounters: encounters.sort((a, b) => a.totalCost - b.totalCost), ranges };\n}\n\n// PDF Generation - Tarot-sized cards (70mm x 120mm) with rounded corners\nasync function downloadPDF(encounter) {\n if (!window.jspdf) {\n alert(\"PDF loading... try again.\");\n return;\n }\n \n const { jsPDF } = window.jspdf;\n const doc = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' });\n \n // Tarot card dimensions: 70mm x 120mm\n const cardW = 70, cardH = 120;\n const cornerRadius = 5;\n const marginX = (210 - cardW * 2) / 3;\n const marginY = 15, gapY = 8;\n \n // Helper to draw rounded rectangle\n function roundedRect(x, y, w, h, r) {\n doc.setLineWidth(0.8);\n doc.setDrawColor(30, 30, 30);\n doc.setFillColor(255, 255, 255);\n \n doc.moveTo(x + r, y);\n doc.lineTo(x + w - r, y);\n doc.curveTo(x + w, y, x + w, y + r);\n doc.lineTo(x + w, y + h - r);\n doc.curveTo(x + w, y + h, x + w - r, y + h);\n doc.lineTo(x + r, y + h);\n doc.curveTo(x, y + h, x, y + h - r);\n doc.lineTo(x, y + r);\n doc.curveTo(x, y, x + r, y);\n \n doc.fillStroke();\n }\n \n encounter.roster.forEach((unit, i) => {\n // 2 cards per row, 2 rows per page = 4 cards per page\n if (i > 0 && i % 4 === 0) doc.addPage();\n \n const col = i % 2;\n const row = Math.floor((i % 4) / 2);\n const x = marginX + col * (cardW + marginX);\n const y = marginY + row * (cardH + gapY);\n \n // Draw rounded card\n roundedRect(x, y, cardW, cardH, cornerRadius);\n \n // Name - centered, large\n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(16);\n doc.setTextColor(30, 30, 30);\n doc.text(unit.name.toUpperCase(), x + cardW / 2, y + 20, { align: 'center' });\n \n // Role - centered below name\n doc.setFontSize(9);\n doc.setTextColor(100);\n doc.text(unit.role.toUpperCase(), x + cardW / 2, y + 28, { align: 'center' });\n \n // Decorative line\n doc.setLineWidth(0.5);\n doc.setDrawColor(180);\n doc.line(x + 15, y + 35, x + cardW - 15, y + 35);\n \n // Large HP display in center\n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(48);\n doc.setTextColor(30, 30, 30);\n doc.text(String(unit.hp), x + cardW / 2, y + 65, { align: 'center' });\n \n doc.setFontSize(10);\n doc.setTextColor(100);\n doc.text(\"HIT POINTS\", x + cardW / 2, y + 73, { align: 'center' });\n \n // Attack stat\n doc.setLineWidth(0.5);\n doc.setDrawColor(180);\n doc.line(x + 15, y + 82, x + cardW - 15, y + 82);\n \n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(24);\n doc.setTextColor(30, 30, 30);\n doc.text(String(unit.attack), x + cardW / 2, y + 97, { align: 'center' });\n \n doc.setFontSize(9);\n doc.setTextColor(100);\n doc.text(\"ATTACK\", x + cardW / 2, y + 104, { align: 'center' });\n \n // Footer\n doc.setFontSize(7);\n doc.setTextColor(150);\n doc.text(\"QUEST RPG\", x + cardW / 2, y + cardH - 6, { align: 'center' });\n });\n \n doc.save(encounter.name.replace(/\\\\s+/g, '_') + '_Cards.pdf');\n}\n\n// Components\nfunction DifficultyGuide({ partyHP, ranges }) {\n const [open, setOpen] = useState(false);\n \n return React.createElement('div', { className: 'difficulty-guide' },\n React.createElement('div', { className: 'guide-header', onClick: () => setOpen(!open) },\n React.createElement(Icon, { name: 'book', className: 'icon' }),\n React.createElement('h3', null, 'DIFFICULTY GUIDE'),\n React.createElement('span', { \n className: 'chevron ' + (open ? 'open' : ''),\n dangerouslySetInnerHTML: { __html: Icons.chevronDown }\n })\n ),\n React.createElement('div', { className: 'guide-content ' + (open ? 'open' : '') },\n React.createElement('div', { className: 'ranges' },\n React.createElement('div', { className: 'range' },\n React.createElement('span', { className: 'label' }, 'EASY (20-49%)'),\n React.createElement('span', { className: 'value' }, Math.floor(ranges.Easy.min) + ' - ' + Math.floor(ranges.Easy.max))\n ),\n React.createElement('div', { className: 'range' },\n React.createElement('span', { className: 'label' }, 'FAIR (50-89%)'),\n React.createElement('span', { className: 'value' }, Math.floor(ranges.Fair.min) + ' - ' + Math.floor(ranges.Fair.max))\n ),\n React.createElement('div', { className: 'range' },\n React.createElement('span', { className: 'label' }, 'DEADLY (90%+)'),\n React.createElement('span', { className: 'value' }, Math.floor(ranges.Deadly.min) + ' - ' + Math.floor(ranges.Deadly.max))\n )\n ),\n React.createElement('div', { className: 'formula' }, 'NPC Rating = HP + Attack + 1'),\n React.createElement('blockquote', null,\n '\"First, add up the current hit points of the entire party... Then, add together: their hit points, the highest damage they deal in a turn, and the number of NPCs.\"',\n React.createElement('cite', null, '- QUEST GAME BOOK, PAGE 108')\n )\n )\n );\n}\n\nfunction EncounterCard({ enc, onRun, onPrint }) {\n const unitSummary = {};\n enc.roster.forEach(u => {\n unitSummary[u.name] = (unitSummary[u.name] || 0) + 1;\n });\n \n return React.createElement('div', { className: 'creature-card' },\n React.createElement('div', { className: 'creature-header' },\n React.createElement('span', { className: 'creature-name' }, enc.name),\n React.createElement('span', { className: 'creature-rating' }, 'RATING ' + enc.totalCost)\n ),\n React.createElement('p', { className: 'creature-flavor' }, enc.flavor),\n React.createElement('div', { className: 'abilities' },\n Object.entries(unitSummary).map(([name, count]) => {\n return React.createElement('span', { key: name, className: 'ability-badge' },\n count + 'x ' + name.toUpperCase()\n );\n })\n ),\n React.createElement('div', { className: 'stat-line' },\n React.createElement('span', null, 'HP ' + enc.roster[0].hp),\n React.createElement('span', { className: 'divider' }),\n React.createElement('span', null, 'ATK ' + enc.roster[0].attack)\n ),\n React.createElement('div', { className: 'creature-actions' },\n React.createElement('button', { className: 'btn btn-primary', onClick: () => onRun(enc) },\n React.createElement('span', { dangerouslySetInnerHTML: { __html: Icons.play } }),\n 'RUN'\n ),\n React.createElement('button', { className: 'btn', onClick: () => onPrint(enc) },\n React.createElement('span', { dangerouslySetInnerHTML: { __html: Icons.download } }),\n 'PDF'\n )\n )\n );\n}\n\nfunction DifficultySection({ title, encounters, onRun, onPrint }) {\n const [open, setOpen] = useState(false);\n \n if (!encounters.length) return null;\n \n const badgeClass = title.toLowerCase();\n \n return React.createElement('div', { className: 'difficulty-section' },\n React.createElement('div', { className: 'difficulty-header', onClick: () => setOpen(!open) },\n React.createElement('span', { className: 'difficulty-badge ' + badgeClass }, title.toUpperCase()),\n React.createElement('span', { className: 'difficulty-count' }, encounters.length + ' encounters'),\n React.createElement('span', { \n className: 'difficulty-chevron ' + (open ? 'open' : ''),\n dangerouslySetInnerHTML: { __html: Icons.chevronDown }\n })\n ),\n React.createElement('div', { className: 'difficulty-grid ' + (open ? 'open' : '') },\n encounters.map(enc => React.createElement(EncounterCard, {\n key: enc.id,\n enc,\n onRun,\n onPrint\n }))\n )\n );\n}\n\nfunction CombatUnit({ unit, onDamage, onHeal }) {\n const isDead = unit.currentHp <= 0;\n \n return React.createElement('div', { className: 'combat-unit ' + (isDead ? 'dead' : '') },\n React.createElement('div', { className: 'unit-info' },\n React.createElement('div', { className: 'unit-hp' }, \n isDead \n ? React.createElement('span', { dangerouslySetInnerHTML: { __html: Icons.skull }, style: { width: 28, height: 28 } })\n : unit.currentHp\n ),\n React.createElement('div', null,\n React.createElement('div', { className: 'unit-name' }, unit.name),\n React.createElement('div', { className: 'unit-stats' }, 'MAX HP ' + unit.hp + ' / ATK ' + unit.attack)\n )\n ),\n !isDead \n ? React.createElement('div', { className: 'unit-controls' },\n React.createElement('button', { className: 'damage', onClick: () => onDamage(unit.uniqueId) }, '-'),\n React.createElement('button', { className: 'heal', onClick: () => onHeal(unit.uniqueId) }, '+')\n )\n : React.createElement('button', { className: 'btn', onClick: () => onHeal(unit.uniqueId, unit.hp) }, 'REVIVE')\n );\n}\n\nfunction Attribution() {\n return React.createElement('footer', { className: 'attribution' },\n React.createElement('p', null, \n 'This tool uses mechanics from the ',\n React.createElement('a', { href: 'https://www.adventure.game/resources/', target: '_blank', rel: 'noopener' }, 'Quest Creators Resource'),\n ' by ',\n React.createElement('a', { href: 'https://www.adventure.game/', target: '_blank', rel: 'noopener' }, 'The Adventure Guild'),\n ', licensed under ',\n React.createElement('a', { href: 'https://creativecommons.org/licenses/by/4.0/', target: '_blank', rel: 'noopener' }, 'CC-BY 4.0'),\n '.'\n ),\n React.createElement('p', null,\n 'Quest was created by T.C. Sottek.'\n )\n );\n}\n\nfunction App() {\n const [partyHP, setPartyHP] = useState(40);\n const [view, setView] = useState('setup');\n const [selectedEncounter, setSelectedEncounter] = useState(null);\n const [combatRoster, setCombatRoster] = useState([]);\n \n useEffect(() => {\n if (!window.jspdf) {\n const script = document.createElement('script');\n script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js';\n document.body.appendChild(script);\n }\n }, []);\n \n const { encounters, ranges } = useMemo(() => generateEncounters(partyHP), [partyHP]);\n \n const handleRun = (enc) => {\n setSelectedEncounter(enc);\n setCombatRoster(enc.roster.map((u, i) => ({\n ...u,\n currentHp: u.hp,\n uniqueId: u.id + '-' + i + '-' + Date.now()\n })));\n setView('run');\n };\n \n const handleDamage = (id) => {\n setCombatRoster(r => r.map(u => \n u.uniqueId === id ? { ...u, currentHp: Math.max(0, u.currentHp - 1) } : u\n ));\n };\n \n const handleHeal = (id, amt = 1) => {\n setCombatRoster(r => r.map(u => \n u.uniqueId === id ? { ...u, currentHp: Math.min(u.hp, u.currentHp + amt) } : u\n ));\n };\n \n if (view === 'run' && selectedEncounter) {\n const allDead = combatRoster.every(u => u.currentHp === 0);\n \n return React.createElement('div', { className: 'combat-view' },\n React.createElement('div', { className: 'app' },\n React.createElement('div', { className: 'combat-header' },\n React.createElement('button', { className: 'back', onClick: () => setView('setup') },\n React.createElement('span', { dangerouslySetInnerHTML: { __html: Icons.arrowLeft } }),\n 'BACK'\n ),\n React.createElement('div', { className: 'title' },\n React.createElement('h2', null, selectedEncounter.name),\n React.createElement('span', { className: 'subtitle' }, 'BATTLE TRACKER')\n )\n ),\n combatRoster.map(unit => React.createElement(CombatUnit, {\n key: unit.uniqueId,\n unit,\n onDamage: handleDamage,\n onHeal: handleHeal\n })),\n allDead && React.createElement('div', { className: 'victory' },\n React.createElement('h3', null, 'Encounter Cleared!'),\n React.createElement('button', { className: 'btn btn-primary', onClick: () => setView('setup') }, 'PLAN NEXT BATTLE')\n )\n )\n );\n }\n \n return React.createElement('div', { className: 'app' },\n React.createElement('header', null,\n React.createElement('h1', null, 'ENCOUNTER MASTER'),\n React.createElement('span', { className: 'subtitle' }, 'QUEST RPG')\n ),\n React.createElement('div', { className: 'card party-input' },\n React.createElement('label', null, 'TOTAL PARTY HP'),\n React.createElement('div', { className: 'hp-row' },\n React.createElement('button', { onClick: () => setPartyHP(h => Math.max(10, h - 5)) }, '-'),\n React.createElement('input', {\n type: 'number',\n value: partyHP,\n onChange: e => setPartyHP(parseInt(e.target.value) || 10)\n }),\n React.createElement('button', { onClick: () => setPartyHP(h => h + 5) }, '+')\n ),\n React.createElement('div', { className: 'presets' },\n [2, 3, 4, 5, 6].map(n => \n React.createElement('button', { key: n, onClick: () => setPartyHP(n * 10) }, n + ' PLAYERS')\n )\n )\n ),\n React.createElement(DifficultyGuide, { partyHP, ranges }),\n React.createElement(DifficultySection, {\n title: 'Easy',\n encounters: encounters.filter(e => e.difficulty === 'Easy'),\n onRun: handleRun,\n onPrint: downloadPDF\n }),\n React.createElement(DifficultySection, {\n title: 'Fair',\n encounters: encounters.filter(e => e.difficulty === 'Fair'),\n onRun: handleRun,\n onPrint: downloadPDF\n }),\n React.createElement(DifficultySection, {\n title: 'Deadly',\n encounters: encounters.filter(e => e.difficulty === 'Deadly'),\n onRun: handleRun,\n onPrint: downloadPDF\n }),\n React.createElement(Attribution, null)\n );\n}\n\nReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));\n`;\n}\n",[149],"24bda2aa-e774-11f0-94ad-42dde27851f2","bestiary.ts","24bda340-e774-11f0-94ad-42dde27851f2",5,["D",1767314646704],"// Quest RPG Creature Data\n// Based on the Quest Creators Resource (CC-BY 4.0) by The Adventure Guild\n\nexport interface Creature {\n id: string;\n name: string;\n hp: number;\n attack: number;\n cost: number;\n role: string;\n features?: string[];\n}\n\nexport const BESTIARY: Creature[] = [\n { id: \"commoner\", name: \"Commoner\", hp: 2, attack: 1, cost: 4, role: \"Commoner\" },\n { id: \"minion\", name: \"Minion\", hp: 4, attack: 2, cost: 7, role: \"Minion\" },\n { id: \"veteran\", name: \"Veteran\", hp: 8, attack: 3, cost: 12, role: \"Minion\", features: [\"Veteran (+4 HP, +1 Atk)\"] },\n { id: \"boss\", name: \"Boss\", hp: 10, attack: 4, cost: 15, role: \"Boss\", features: [\"Resistant to some abilities\"] },\n { id: \"big_boss\", name: \"Big Boss\", hp: 20, attack: 5, cost: 26, role: \"Boss\", features: [\"Big (+10 HP, +1 Atk)\"] },\n { id: \"colossal\", name: \"Titan\", hp: 50, attack: 8, cost: 59, role: \"Boss\", features: [\"Colossal (+40 HP, +4 Atk)\", \"Massive Scale\"] },\n];\n",[156],"92ebc51c-e775-11f0-a362-42dde27851f2","README.md","cb4cb7ee-e771-11f0-8512-42dde27851f2",9,["D",1767315261045],"# Quest Encounter Builder\n\nBuild balanced encounters for Quest RPG using the official Chapter 4 math.\n\n## What this does\n\n1. Enter your party's total HP\n2. Get balanced encounter suggestions at Easy, Fair, and Deadly tiers\n3. Run a live combat tracker during play\n4. Export printable PDF stat cards (tarot-sized)\n\n## Getting started\n\n1. Click **Remix**\n2. Open the val's HTTP endpoint\n3. Enter your party's total HP\n4. Pick an encounter and run it\n\nNo API keys needed. Everything runs client-side.\n\n## The Math\n\nFrom Quest Game Book, Page 108:\n\n> Add together the current hit points of the entire party. Then for each NPC:\n> - Their hit points\n> - The highest damage they deal in a single turn \n> - Add 1 per NPC in the group\n>\n> If this rating equals or exceeds party HP, it's deadly. Between 50-80% is a fair fight.\n\n| Difficulty | Rating Range |\n|------------|--------------|\n| Easy | 20-49% of Party HP |\n| Fair | 50-89% of Party HP |\n| Deadly | 90%+ of Party HP |\n\n## Typography\n\nUses the official Quest Creator's Resource fonts:\n- **Alegreya Sans SC** — headings (H1, H2, H3)\n- **Alegreya** — pullquotes\n- **Ovo** — body text\n\n## Bestiary\n\n| Unit | HP | Attack | Rating | Role |\n|------|------|--------|--------|------|\n| Commoner | 2 | 1 | 4 | Commoner |\n| Minion | 4 | 2 | 7 | Minion |\n| Veteran | 8 | 3 | 12 | Minion |\n| Boss | 10 | 4 | 15 | Boss |\n| Big Boss | 20 | 5 | 26 | Boss |\n| Titan | 50 | 8 | 59 | Boss |\n\n## Attribution\n\nThis tool uses mechanics from the [Quest Creators Resource](https://www.adventure.game/resources/) \nby [The Adventure Guild](https://www.adventure.game/), licensed under [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/).\n\nQuest was created by T.C. Sottek.\n",[163],"pulls","branches","forks","envVars",{"_176":60,"_178":60},"connections",{"_176":60,"_177":60},"count","unfilledCount","emptyCount",{"_42":162,"_32":163,"_30":164,"_132":-5,"_40":41,"_39":165,"_133":121,"_37":197,"_13":135,"_33":20,"_34":167,"_24":25,"_136":-5,"_185":198,"_27":199},{"_42":155,"_32":156,"_30":157,"_132":-5,"_40":41,"_39":158,"_133":121,"_37":194,"_13":60,"_33":20,"_34":160,"_24":25,"_136":-5,"_185":195,"_27":196},{"_42":148,"_32":149,"_30":150,"_132":-5,"_40":41,"_39":151,"_133":25,"_37":191,"_13":60,"_33":20,"_34":153,"_24":25,"_136":-5,"_185":192,"_27":193},{"_42":138,"_32":139,"_30":140,"_132":-5,"_40":41,"_39":141,"_133":121,"_37":188,"_13":143,"_33":144,"_34":145,"_24":25,"_136":146,"_185":189,"_27":190},{"_42":131,"_32":28,"_30":31,"_132":-5,"_40":41,"_39":14,"_133":121,"_37":184,"_13":135,"_33":20,"_34":36,"_24":25,"_136":-5,"_185":186,"_27":187},["D",1767315322982],"children",[],[28],["D",1767315270538],[],[139],["D",1767314770282],[],[149],["D",1767314646704],[],[156],["D",1767315261045],[],[163],["D",1767313622733],{"_94":93,"_102":98},{"_94":93,"_95":96,"_97":98,"_18":54,"_99":100,"_101":25},{"_13":83,"_32":84,"_42":41,"_85":43,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":44,"_92":93},"ctx",{"_76":-5,"_123":237,"_238":239,"_240":241,"_242":25,"_243":25,"_244":25,"_245":121,"_246":-5,"_247":-7,"_248":-7,"_249":60,"_250":25,"_251":25,"_252":-5,"_253":25,"_254":25,"_255":25,"_256":-5},"ENV",{"_208":209,"_210":211,"_212":84,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v11