/* style.css */ :root{ color-scheme: light; --bg: #ffffff; --fg: #111111; --border: rgba(128,128,128,.45); --border2: rgba(128,128,128,.35); --border3: rgba(128,128,128,.25); --panel-bg: #ffffff; --mods-bg: rgba(0,0,0,.02); --sprite-bg: rgba(0,0,0,.08); --warn: #b45309; --select-bg: #ffffff; --select-fg: #111111; /* Results layout */ --results-meta-h: 44px; /* tweak 40�56 to taste */ } :root[data-app-dark]{ color-scheme: dark; --bg: #121212; --fg: #ffffff; --border: rgba(255,255,255,.22); --border2: rgba(255,255,255,.16); --border3: rgba(255,255,255,.14); --panel-bg: rgba(255,255,255,.03); --mods-bg: rgba(255,255,255,.02); --sprite-bg: rgba(0,0,0,.15); --warn: #f59e0b; --select-bg: #1a1a1a; --select-fg: #ffffff; } *, *::before, *::after { box-sizing: border-box; } body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; background: var(--bg); color: var(--fg); } .wrap{ /* Full-bleed inside iframe: take the full width of the viewport */ width: 100%; max-width: none; margin: 0; padding: 18px; /* Full-height scrolling container (paired with index.html's overflow:hidden on body) */ min-height: 100%; } .header { margin-bottom: 10px; } h1 { margin: 0 0 6px; font-size: 22px; } h2 { margin: 0; font-size: 16px; } .sectionTitle { margin: 0 0 12px; } .muted { opacity: .75; } .hint { display:block; font-size: 12px; margin-top: 6px; } .panel{ border: 1px solid var(--border2); border-radius: 12px; padding: 14px; margin: 12px 0; background: var(--panel-bg); } /* caret */ /* Prevent header overlay issues: keep content above header hit-area */ .grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } label { display: grid; gap: 7px; font-size: 13px; } input, select, button{ padding: 9px 10px; border-radius: 10px; border: 1px solid var(--border); color: inherit; background: transparent; } input, select { width: 100%; } button { cursor: pointer; } .row{ display:flex; align-items:center; gap:10px; } .row.tight { margin-top: 4px; } .row.gap { justify-content: flex-start; } .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } #growth { flex: 1; } #growthInput { width: 120px; } .span2 { grid-column: span 2; } .mods{ border: 1px solid var(--border2); border-radius: 12px; padding: 10px 12px; display: grid; gap: 10px; background: var(--mods-bg); } .modsTitle { font-size: 13px; } .toggle{ display:flex; align-items:center; gap:10px; } .toggle input{ width: 18px; height: 18px; margin: 0; } .spriteBox{ display:flex; justify-content:center; padding: 6px 0; } .petSprite{ width: 120px; height: 120px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 6px 12px rgba(0,0,0,.35)); } .statline{ display:grid; gap: 6px; padding: 10px 12px; border: 1px dashed var(--border2); border-radius: 12px; } .mt { margin-top: 14px; } table { width: 100%; border-collapse: collapse; } thead th{ text-align: left; font-weight: 600; } th, td{ padding: 9px 8px; border-bottom: 1px solid var(--border3); } /* Helps the Current | Legacy columns read nicely */ /* td:first-child, th:first-child { width: 80px; } */ /* .legacyCol { opacity: 0.9; }*/ /* Only the Stats table needs a narrow label column */ .resultsStats td:first-child, .resultsStats th:first-child { width: 80px; } /* Spells: allow the Skill column to be flexible */ #offenseSpellsTable th:first-child, #offenseSpellsTable td:first-child { width: auto; } /* Melee: make label column wide enough to never wrap */ #offenseMeleeTable th:first-child, #offenseMeleeTable td:first-child{ width: 140px; white-space: nowrap; } /* When JS toggles legacy mode off it adds .legacyHidden to */ .legacyHidden .legacyCol { display: none; } .warn { color: var(--warn); font-size: 13px; } pre { white-space: pre-wrap; } /* Theme-aware select control */ select{ background-color: var(--select-bg); color: var(--select-fg); -webkit-text-fill-color: var(--select-fg); } /* Optional: slightly reduce padding on the Results table on small screens */ @media (max-width: 600px){ th, td { padding: 8px 6px; } } @media (max-width: 1100px){ .grid { grid-template-columns: repeat(2, 1fr); } .span2 { grid-column: span 2; } .mods { grid-column: span 2; } } @media (max-width: 840px){ .grid { grid-template-columns: 1fr; } .span2, .mods { grid-column: span 1; } } /* --- FORCE SELECT TO FOLLOW THEME (fix �always dark� native select) --- */ #petSelect{ background-color: var(--select-bg) !important; color: var(--select-fg) !important; -webkit-text-fill-color: var(--select-fg) !important; /* kill native styling so OS/browser can't keep it dark */ -webkit-appearance: none; appearance: none; /* space for arrow */ padding-right: 34px; /* custom arrow using current text color */ background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } /* If you also want the other selects to behave */ select{ background-color: var(--select-bg) !important; color: var(--select-fg) !important; -webkit-text-fill-color: var(--select-fg) !important; -webkit-appearance: none; appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } /* ========================= RESULTS: aligned 3-column layout Stats | Spells | Melee ========================= */ /* .resultsGrid{ display:grid; grid-template-columns: 0.5fr 1fr 1fr; gap:18px; align-items:start; } @media (max-width: 980px){ .resultsGrid{ grid-template-columns: 1fr; } } .subTitle{ margin: 0 0 8px; font-size: 14px; font-weight: 700; } .right{ text-align:right; } #offenseSpellsTable th:last-child, #offenseSpellsTable td:last-child{ text-align:right; } /* KEY: every results column uses the same vertical structure: title | fixed meta slot | table */ .resultsCol{ display:grid; grid-template-rows: auto var(--results-meta-h) 1fr; align-items:start; } .resultsMetaSlot, .resultsMetaSpacer{ min-height: var(--results-meta-h); } .resultsMetaSlot{ display:flex; align-items:flex-start; } /* remove surprise margins that shift tables */ .resultsMetaSlot p{ margin: 0; } /* Melee meta styling */ .meleeMeta{ display:flex; flex-wrap:wrap; gap:10px; margin: 0; /* IMPORTANT: don't push the table down */ opacity: .85; } .meleeMeta .dot{ opacity:.55; } /* If the hint is empty, keep the slot but don't show any line breaks */ #offenseSpellsHint:empty{ display:none; } /* Melee table: keep label column on one line so row heights match */ #offenseMeleeTable th:first-child, #offenseMeleeTable td:first-child{ width: 140px; white-space: nowrap; } /* Footer spanning all columns */ .resultsAssumptions{ grid-column: 1 / -1; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--border3); } */ /* ===== RESULTS: force alignment ===== */ :root{ --results-meta-h: 48px; } /* tweak 44�56 */ .resultsGrid{ display:grid; grid-template-columns: 0.5fr 1fr 1fr; gap:18px; align-items:start; } @media (max-width: 980px){ .resultsGrid{ grid-template-columns: 1fr; } } .resultsCol{ display:grid; grid-template-rows: auto var(--results-meta-h) 1fr; align-items:start; } /* meta slot always same height */ .resultsMetaSlot, .resultsMetaSpacer{ min-height: var(--results-meta-h); } .resultsMetaSlot{ display:flex; align-items:flex-start; } /* kill default

margins that cause drift */ .resultsMetaSlot p{ margin:0; } .meleeMeta{ margin:0; } /* scope first-column widths (DON'T use the global 80px rule anymore) */ .resultsStats td:first-child, .resultsStats th:first-child{ width: 80px; } #offenseSpellsTable th:first-child, #offenseSpellsTable td:first-child{ width:auto; } #offenseMeleeTable th:first-child, #offenseMeleeTable td:first-child{ width: 140px; white-space: nowrap; } /* assumptions spanning */ .resultsAssumptions{ grid-column: 1 / -1; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--border3); } /* ========================= Mystic Crystals ========================= */ .crystalRows{ display: grid; gap: 10px; } .crystalRow{ display: block; /* IMPORTANT: crystalRow is a card, not a grid */ padding: 10px; border: 1px solid var(--border2); border-radius: 12px; background: rgba(0,0,0,.02); } :root[data-app-dark] .crystalRow{ background: rgba(255,255,255,.02); } .crystalRow .slotHeader{ display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; } .crystalRow .slotHeader .lock{ font-size: 12px; opacity: .8; } /* One layout owner for the inputs */ /* Force the 4 crystal fields onto ONE row */ .crystal-fields{ display: flex; gap: 10px; align-items: flex-end; flex-wrap: nowrap; /* <-- key: no wrapping on desktop */ } /* Each

/ click issues) ========================= */ .panelHeader{ display:flex; align-items:center; justify-content:space-between; margin: -2px 0 12px; } .panelToggle{ width: 100%; display:flex; align-items:center; justify-content:space-between; gap: 10px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; } .panelToggle .panelTitle{ font-weight: 700; font-size: 16px; } /* caret */ .panelToggle::after{ content: "▾"; opacity: .8; transform: rotate(0deg); transition: transform .15s ease; } .panelToggle[aria-expanded="false"]::after{ transform: rotate(-90deg); } .panelBody[hidden]{ display:none !important; } /* ========================= Total Resistances (Results) Rendered as a responsive 2-column grid list ========================= */ .resultsResistsBlock{ grid-column: 1 / -1; margin-top: 10px; } .resistGrid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; } @media (max-width: 720px){ .resistGrid{ grid-template-columns: 1fr; } } .resistItem{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border3); } .resistItem .label{ opacity: .85; } .resistItem .val{ text-align: right; min-width: 36px; } /* Pet Infusion preview */ .infusePreview{ font-size: 12px; line-height: 1.4; opacity: .8; } .infusePreview .k{opacity:.85} .infusePreview .v{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;}