diff --git a/MageWillvsParadoxSheet/magewillvsparadox.css b/MageWillvsParadoxSheet/magewillvsparadox.css index 7fc2345ff9..9d1a7becdb 100644 --- a/MageWillvsParadoxSheet/magewillvsparadox.css +++ b/MageWillvsParadoxSheet/magewillvsparadox.css @@ -7,752 +7,2798 @@ url(https://faustiangames.com/wp-content/uploads/2025/09/specialelite.woff) format('woff'); } -/* Optional: pane-specific styling hooks */ -.sheet-mage .sheet-mage { /* your existing class already used everywhere */ } -.sheet-vampire .sheet-vampire { /* mirror style block if desired */ } - - -.sheet-header { - width: 100%; - background-color: #070707; /* same black as the logo background */ - text-align: center; - padding: 10px 0; +.sheet-charsheet{ + --bg0:#070912; + --bg1:#0b1020; + --card: rgba(255,255,255,.06); + --card2: rgba(255,255,255,.09); + --stroke: rgba(255,255,255,.10); + --text: #e7e9f2; + --muted:#aeb6c8; + --accent:#8f5bff; + --accent2:#2ee6d6; + --danger:#ff4d6d; + --ok:#44d18a; + --shadow: 0 10px 30px rgba(0,0,0,.45); + --theme-accent-rgb: 143,91,255; + --theme-secondary-rgb: 46,230,214; + --theme-accent-strong: rgba(var(--theme-accent-rgb),.55); + --theme-accent-mid: rgba(var(--theme-accent-rgb),.35); + --theme-accent-soft: rgba(var(--theme-accent-rgb),.18); + --theme-accent-bg: rgba(var(--theme-accent-rgb),.15); + --theme-secondary-bg: rgba(var(--theme-secondary-rgb),.10); + --theme-focus: rgba(var(--theme-secondary-rgb),.55); + --theme-focus-ring: rgba(var(--theme-secondary-rgb),.15); + color: var(--text); + background: radial-gradient(900px 500px at 20% -10%, rgba(143,91,255,.35), transparent 60%), + radial-gradient(700px 420px at 95% 10%, rgba(46,230,214,.18), transparent 60%), + linear-gradient(180deg,var(--bg0),var(--bg1)); + padding: 14px; + box-sizing: border-box; } -.sheet-header img { - max-width: 90%; /* adjust as needed */ - max-height: 120px; - height: auto; + +.sheet-charsheet label{width:auto !important;} + + +.sheet-header{ + background: linear-gradient(90deg, var(--theme-accent-bg), var(--theme-secondary-bg)); + border: 1px solid var(--stroke); + border-radius: 16px; + padding: 12px 10px; + margin-bottom: 12px; + text-align: center; +} +.sheet-header-logo{ + display: inline-block; + max-height:96px; width: auto; + filter: drop-shadow(0 6px 12px rgba(0,0,0,.45)); + border-radius: 12px; + border: 1px solid rgba(255,255,255,.2); +} +.sheet-character-avatar{ + display: block; + width: 140px; + height: 140px; + margin: 10px auto 0; + border-radius: 12px; + border: 1px solid rgba(255,255,255,.2); + object-fit: cover; + background: rgba(0,0,0,.35); + box-shadow: 0 8px 24px rgba(0,0,0,.4); +} +.sheet-character-avatar:not([src]), +.sheet-character-avatar[src=""]{ + display: none; +} + + +.sheet-switcher{ + display:block !important; + margin: 0 0 12px 0; + padding: 0 0 10px 0; + position: relative; +} +.sheet-switcher > .sheet-tab, +.sheet-switcher > .sheet-tab-label{ + display:inline-block; + vertical-align:bottom; +} +.sheet-switcher > .sheet-tab{ + position:absolute; + opacity:0; + pointer-events:none; +} +.sheet-switcher > .sheet-tab-label{margin-right:10px;} +.sheet-tab-rail{ + height: 1px; + width: 100%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); + position: absolute; + left:0; right:0; bottom:0; +} +.sheet-switcher > .sheet-tab-vampire:checked ~ .sheet-tab-rail{ + background: linear-gradient(90deg, transparent, rgba(194,42,42,.55), transparent); +} +.sheet-switcher > .sheet-tab-werewolf:checked ~ .sheet-tab-rail{ + background: linear-gradient(90deg, transparent, rgba(107,166,74,.60), transparent); +} +.sheet-tab-label{ + font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; + font-weight: 700; + font-size: 13px; + letter-spacing: .08em; + text-transform: uppercase; + color: var(--muted); + padding: 8px 12px; + border-radius: 999px; + border: 1px solid rgba(255,255,255,.12); + background: rgba(255,255,255,.04); + cursor:pointer; + user-select:none; +} +.sheet-tab:checked + .sheet-tab-label{ + color: var(--text); + background: linear-gradient(90deg, rgba(var(--theme-accent-rgb),.30), rgba(var(--theme-secondary-rgb),.15)); + border-color: var(--theme-accent-strong); + box-shadow: 0 10px 20px var(--theme-accent-soft); +} + + +.sheet-pane{display:none !important;} +#sheettype-mage:checked ~ .sheet-pane.sheet-mage{display:block !important;} +#sheettype-vampire:checked ~ .sheet-pane.sheet-vampire{display:block !important;} +#sheettype-werewolf:checked ~ .sheet-pane.sheet-werewolf{display:block !important;} + + +.sheet-switcher > .sheet-tab-vampire:checked + .sheet-tab-label{ + background: linear-gradient(90deg, rgba(194,42,42,.35), rgba(255,110,110,.18)); + border-color: rgba(194,42,42,.60); + box-shadow: 0 10px 20px rgba(194,42,42,.20); +} +.sheet-switcher > .sheet-tab-werewolf:checked + .sheet-tab-label{ + background: linear-gradient(90deg, rgba(107,166,74,.35), rgba(163,219,132,.18)); + border-color: rgba(107,166,74,.62); + box-shadow: 0 10px 20px rgba(107,166,74,.22); +} + + +.sheet-switcher > .sheet-pane{ + --pane-accent-rgb: var(--theme-accent-rgb); + --pane-secondary-rgb: var(--theme-secondary-rgb); + --pane-accent-strong: rgba(var(--pane-accent-rgb),.55); + --pane-accent-mid: rgba(var(--pane-accent-rgb),.35); + --pane-accent-soft: rgba(var(--pane-accent-rgb),.18); + --pane-accent-bg: rgba(var(--pane-accent-rgb),.15); + --pane-secondary-bg: rgba(var(--pane-secondary-rgb),.10); + --pane-focus: rgba(var(--pane-secondary-rgb),.55); + --pane-focus-ring: rgba(var(--pane-secondary-rgb),.15); + background: + radial-gradient(900px 500px at 15% -10%, rgba(var(--pane-accent-rgb),.30), transparent 60%), + radial-gradient(700px 420px at 95% 8%, rgba(var(--pane-secondary-rgb),.16), transparent 60%), + linear-gradient(180deg, rgba(8,11,20,.92), rgba(6,9,16,.96)); + border: 1px solid rgba(var(--pane-accent-rgb),.20); + border-radius: 16px; + padding: 12px; +} +.sheet-switcher > .sheet-pane.sheet-vampire{ + --pane-accent-rgb: 194,42,42; + --pane-secondary-rgb: 255,110,110; +} +.sheet-switcher > .sheet-pane.sheet-werewolf{ + --pane-accent-rgb: 107,166,74; + --pane-secondary-rgb: 163,219,132; +} +.sheet-switcher > .sheet-pane .sheet-header{ + background: linear-gradient(90deg, var(--pane-accent-bg), var(--pane-secondary-bg)); +} +.sheet-switcher > .sheet-pane .sheet-block{ + border-color: rgba(var(--pane-accent-rgb),.30); + box-shadow: 0 10px 30px rgba(var(--pane-accent-rgb),.10); +} + + +.sheet-maindiv{ + background: transparent !important; +} + + +.sheet-columns{ + + display:grid; + grid-template-columns: 1fr; + gap: 14px; + align-items:start; +} +.sheet-columns > .sheet-col{ + width: 100%; + min-width: 0; +} +.sheet-columns > .sheet-col > .sheet-block{ + margin: 0 0 14px 0; +} + + +.sheet-block{ + background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04)); + border: 1px solid rgba(255,255,255,.10); + border-radius: 16px; + box-shadow: var(--shadow); + padding: 10px 10px 12px; + margin: 0 0 14px 0; +} + + +.sheet-section-title{ + background: none !important; + height:auto !important; + line-height:1.1 !important; + padding: 6px 6px 10px 6px !important; + margin: 0 0 8px 0 !important; + color: var(--text) !important; + font-family: 'Special Elite', ui-serif, Georgia, serif; + font-size: 22px !important; + letter-spacing: .04em; + border-bottom: 1px solid rgba(255,255,255,.12); +} + +.sheet-section-title .sheet-name-title:empty::before{ + content: "Name"; +} + + +.sheet-attr-box{ + background: rgba(0,0,0,.25) !important; + border: 1px solid rgba(255,255,255,.10) !important; + border-radius: 14px !important; + padding: 10px !important; + box-sizing: border-box; +} + + +.sheet-charsheet input[type="text"], +.sheet-charsheet input[type="number"], +.sheet-charsheet textarea, +.sheet-charsheet select{ + background: rgba(10,12,20,.70) !important; + color: var(--text) !important; + border: 1px solid rgba(255,255,255,.14) !important; + border-radius: 12px !important; + padding: 8px 10px !important; + box-shadow: inset 0 1px 0 rgba(255,255,255,.06); + font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif !important; + font-size: 14px !important; + outline: none; +} +.sheet-charsheet textarea{min-height: 90px !important; resize: vertical;} +.sheet-charsheet input[type="text"]:focus, +.sheet-charsheet input[type="number"]:focus, +.sheet-charsheet textarea:focus, +.sheet-charsheet select:focus{ + border-color: var(--theme-focus) !important; + box-shadow: 0 0 0 3px var(--theme-focus-ring); +} + +.sheet-switcher > .sheet-pane input[type="text"]:focus, +.sheet-switcher > .sheet-pane input[type="number"]:focus, +.sheet-switcher > .sheet-pane textarea:focus, +.sheet-switcher > .sheet-pane select:focus{ + border-color: var(--pane-focus) !important; + box-shadow: 0 0 0 3px var(--pane-focus-ring) !important; +} + + +.sheet-charsheet .sheet-attr-box input[name="attr_physical"], +.sheet-charsheet .sheet-attr-box input[name="attr_social"], +.sheet-charsheet .sheet-attr-box input[name="attr_mental"], +.sheet-charsheet .sheet-attr-box input[name="attr_arete"], +.sheet-charsheet .sheet-attr-box input[name="attr_vphysical"], +.sheet-charsheet .sheet-attr-box input[name="attr_vsocial"], +.sheet-charsheet .sheet-attr-box input[name="attr_vmental"], +.sheet-charsheet .sheet-attr-box input[name="attr_wphysical"], +.sheet-charsheet .sheet-attr-box input[name="attr_wsocial"], +.sheet-charsheet .sheet-attr-box input[name="attr_wmental"], +.sheet-charsheet .sheet-attr-box input[name="attr_w_gnosis"], +.sheet-charsheet .sheet-attr-box input[name="attr_w_rage"]{ + width: 56px !important; + text-align: center !important; + font-weight: 800 !important; +} + + +.sheet-charsheet input[type="checkbox"], +.sheet-charsheet .sheet-track-level input[type="radio"]{transform: translateY(1px);} + + +.sheet-charsheet .sheet-roll-box{ + background: rgba(0,0,0,.22) !important; + border: 1px solid rgba(255,255,255,.10); + border-radius: 14px; + padding: 10px 10px 8px !important; + margin-top: 8px; +} + + +.sheet-charsheet .sheet-roll-box .sheet-advanced-toggle{ + display: inline-flex !important; + align-items: center; + gap: 0; + margin: 0 8px 10px 0; + vertical-align: middle; + white-space: nowrap; + font-size: 0; + line-height: 0; +} +.sheet-charsheet .sheet-roll-box .sheet-advanced-toggle input[type="checkbox"], +.sheet-charsheet .sheet-track-level input[type="radio"]{ + margin: 0; +} + +.sheet-charsheet .sheet-roll-box .sheet-advanced-toggle input[type="checkbox"]{ + -webkit-appearance: none; + appearance: none; + width: 20px; + height: 20px; + transform: none; + cursor: pointer; + clip-path: polygon(50% 6%, 61% 36%, 94% 36%, 67% 55%, 77% 88%, 50% 69%, 23% 88%, 33% 55%, 6% 36%, 39% 36%); + border: 1px solid rgba(191,199,211,.9); + background: + linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.08) 35%, rgba(0,0,0,.22) 100%), + linear-gradient(135deg, rgba(207,215,228,.95), rgba(126,136,150,.9)); + box-shadow: + inset 0 1px 0 rgba(255,255,255,.5), + inset 0 -8px 10px rgba(0,0,0,.28), + 0 0 0 1px rgba(0,0,0,.26); +} + +.sheet-charsheet .sheet-roll-box .sheet-advanced-toggle input[type="checkbox"]:checked{ + border-color: rgba(247,223,145,.96); + background: + linear-gradient(180deg, rgba(255,250,229,.52), rgba(255,239,179,.16) 38%, rgba(56,38,10,.18) 100%), + linear-gradient(135deg, rgba(248,227,163,.98), rgba(186,143,53,.96)); + box-shadow: + inset 0 1px 0 rgba(255,255,255,.66), + inset 0 -8px 10px rgba(45,28,6,.24), + 0 0 0 1px rgba(0,0,0,.24), + 0 0 8px rgba(232,190,92,.38); +} + + +.sheet-ui-dialog .sheet-charsheet button[type="roll"], +.sheet-ui-dialog.sheet-charsheet button[type="roll"], +.sheet-ui-dialog .sheet-charsheet button[type="action"], +.sheet-ui-dialog.sheet-charsheet button[type="action"]{ + display: inline-block; + vertical-align: middle; + margin: 0 0 10px 0 !important; + border-radius: 12px !important; + border: 1px solid rgba(255,255,255,.14) !important; + background: linear-gradient(180deg, var(--theme-accent-mid), var(--theme-accent-soft)) !important; + color: var(--text) !important; + font-weight: 800 !important; + letter-spacing: .02em; + padding: 8px 10px !important; + min-width: 180px; + box-shadow: 0 12px 20px rgba(0,0,0,.25); +} + +.sheet-ui-dialog .sheet-charsheet button[type="roll"]:hover, +.sheet-ui-dialog.sheet-charsheet button[type="roll"]:hover, +.sheet-ui-dialog .sheet-charsheet button[type="action"]:hover, +.sheet-ui-dialog.sheet-charsheet button[type="action"]:hover{ + background: linear-gradient(180deg, rgba(var(--theme-secondary-rgb),.25), rgba(var(--theme-accent-rgb),.20)) !important; +} + +.sheet-ui-dialog .sheet-charsheet button[type="roll"]:active, +.sheet-ui-dialog.sheet-charsheet button[type="roll"]:active, +.sheet-ui-dialog .sheet-charsheet button[type="action"]:active, +.sheet-ui-dialog.sheet-charsheet button[type="action"]:active{ + transform: translateY(1px); +} + +.sheet-ui-dialog .sheet-charsheet .sheet-switcher > .sheet-pane button[type="roll"], +.sheet-ui-dialog.sheet-charsheet .sheet-switcher > .sheet-pane button[type="roll"], +.sheet-ui-dialog .sheet-charsheet .sheet-switcher > .sheet-pane button[type="action"], +.sheet-ui-dialog.sheet-charsheet .sheet-switcher > .sheet-pane button[type="action"]{ + background: linear-gradient(180deg, var(--pane-accent-mid), var(--pane-accent-soft)) !important; +} + +.sheet-ui-dialog .sheet-charsheet .sheet-switcher > .sheet-pane button[type="roll"]:hover, +.sheet-ui-dialog.sheet-charsheet .sheet-switcher > .sheet-pane button[type="roll"]:hover, +.sheet-ui-dialog .sheet-charsheet .sheet-switcher > .sheet-pane button[type="action"]:hover, +.sheet-ui-dialog.sheet-charsheet .sheet-switcher > .sheet-pane button[type="action"]:hover{ + background: linear-gradient(180deg, rgba(var(--pane-secondary-rgb),.25), rgba(var(--pane-accent-rgb),.20)) !important; +} + + +.sheet-charsheet hr{border:0;height:1px;background:rgba(255,255,255,.12);} + + +.sheet-charsheet .sheet-block > input[type="checkbox"][class*="sheet-toggle-"] + label + div[class*="-section"]{ + display:none; +} +.sheet-charsheet .sheet-block > input[type="checkbox"][class*="sheet-toggle-"]:checked + label + div[class*="-section"]{ + display:block; +} + + +.sheet-charsheet .sheet-block > input[type="checkbox"][class*="sheet-toggle-"]:checked + label + div.sheet-quint-row{ + display:flex; +} + + +.sheet-charsheet .sheet-skills-section ul{ + margin: 0; + padding: 0; + list-style: none; +} + +.sheet-charsheet .sheet-skills-section .sheet-attr-box > div > ul > li{ + margin: 0 0 10px 0; + padding: 10px; + border: 1px solid rgba(255,255,255,.10); + border-radius: 12px; + background: rgba(0,0,0,.18); +} + +.sheet-charsheet .sheet-skills-section .sheet-attr-box > div > ul > li{ + margin: 0; +} + +.sheet-charsheet .sheet-skills-section .sheet-attr-box > div > ul > li > label.sheet-improvement:first-of-type{ + display: inline-flex; + align-items: center; + gap: 0; + font-weight: 800; + letter-spacing: .05em; + text-transform: uppercase; + color: #dfe8f5 !important; +} + +.sheet-charsheet .sheet-skills-section .sheet-attr-box > div > ul > li > label.sheet-improvement:first-of-type input[type="checkbox"]{ + position: absolute; + opacity: 0; + pointer-events: none; +} + +.sheet-charsheet .sheet-skills-section .sheet-attr-box > div > ul > li > label.sheet-improvement:first-of-type b{ + font-weight: 900; +} + +.sheet-charsheet .sheet-skills-section .sheet-attr-box > div > ul > li > label.sheet-improvement:first-of-type b::after{ + content: " *"; + color: #8e98a8; +} + +.sheet-charsheet .sheet-skills-section .sheet-attr-box > div > ul > li > label.sheet-improvement:first-of-type input[type="checkbox"]:checked + b{ + color: rgba(var(--pane-secondary-rgb), .95); +} + +.sheet-charsheet .sheet-skills-section .sheet-attr-box > div > ul > li > label.sheet-improvement:first-of-type input[type="checkbox"]:checked + b::after{ + color: rgba(var(--pane-accent-rgb), .95); +} + +.sheet-charsheet .sheet-skills-section .sheet-attr-box > div > ul > li > label.sheet-improvement:last-of-type{ + display: block; + margin-top: 4px; + color: #aeb7c4 !important; + font-size: 12px !important; + text-transform: none; + letter-spacing: 0; +} + +.sheet-charsheet .sheet-skills-section .sheet-attr-box > div > ul > li > ul{ + display: flex; + flex-wrap: wrap; + gap: 8px; + margin: 8px 0 0 0; + padding: 0; + list-style: none; +} + +.sheet-charsheet .sheet-skills-section .sheet-attr-box > div > ul > li > ul > li{ + margin: 0; +} + +.sheet-charsheet .sheet-skills-section .sheet-attr-box > div > ul > li > ul > li > label.sheet-improvement{ + display: inline-flex; + align-items: center; + position: relative; +} + +.sheet-charsheet .sheet-skills-section .sheet-attr-box > div > ul > li > ul > li > label.sheet-improvement input[type="checkbox"]{ + position: absolute; + opacity: 0; + pointer-events: none; +} + +.sheet-charsheet .sheet-skills-section .sheet-attr-box > div > ul > li > ul > li > label.sheet-improvement i{ + display: inline-flex; + align-items: center; + gap: 0; + font-style: normal; + font-size: 12px; + line-height: 1; + padding: 6px 8px; + border-radius: 999px; + border: 1px solid rgba(172,181,196,.5); + color: #c9d1de; + background: rgba(24,30,42,.72); +} + +.sheet-charsheet .sheet-skills-section .sheet-attr-box > div > ul > li > ul > li > label.sheet-improvement i::before{ + content: "["; + margin-right: 1px; + color: #9ea8ba; +} + +.sheet-charsheet .sheet-skills-section .sheet-attr-box > div > ul > li > ul > li > label.sheet-improvement i::after{ + content: "]"; + margin-left: 1px; + color: #9ea8ba; +} + +.sheet-charsheet .sheet-skills-section .sheet-attr-box > div > ul > li > ul > li > label.sheet-improvement input[type="checkbox"]:checked + i{ + border-color: rgba(var(--pane-accent-rgb), .80); + color: #f7fbff; + background: linear-gradient(180deg, rgba(var(--pane-secondary-rgb), .46), rgba(var(--pane-accent-rgb), .56)); + box-shadow: 0 0 10px rgba(var(--pane-accent-rgb), .30); +} + +.sheet-charsheet .sheet-skills-section .sheet-attr-box > div > ul > li > ul > li > label.sheet-improvement input[type="checkbox"]:checked + i::before, +.sheet-charsheet .sheet-skills-section .sheet-attr-box > div > ul > li > ul > li > label.sheet-improvement input[type="checkbox"]:checked + i::after{ + color: rgba(var(--pane-secondary-rgb), .95); +} + + +.sheet-charsheet .sheet-backgrounds-section ul{ + margin: 0; + padding: 0; + list-style: none; +} + +.sheet-charsheet .sheet-backgrounds-section .sheet-attr-box > div > ul > li{ + margin: 0 0 10px 0; + padding: 10px; + border: 1px solid rgba(255,255,255,.10); + border-radius: 12px; + background: rgba(0,0,0,.18); +} + +.sheet-charsheet .sheet-backgrounds-section .sheet-attr-box > div > ul > li{ + margin: 0; +} + +.sheet-charsheet .sheet-backgrounds-section .sheet-werewolf .sheet-improvement{ + display: inline-flex; + align-items: center; + gap: 0; + font-weight: 1000 !important; + letter-spacing: .05em; + text-transform: uppercase; + color: rgba(var(--pane-accent-rgb), .95) !important; +} + +.sheet-charsheet .sheet-backgrounds-section .sheet-attr-box > div > ul > li > label.sheet-improvement:first-of-type{ + display: inline-flex; + align-items: center; + gap: 0; + font-weight: 800; + letter-spacing: .05em; + text-transform: uppercase; + color: #dfe8f5 !important; +} + +.sheet-charsheet .sheet-backgrounds-section .sheet-attr-box > div > ul > li > label.sheet-improvement:first-of-type input[type="checkbox"]{ + position: absolute; + opacity: 0; + pointer-events: none; +} + +.sheet-charsheet .sheet-backgrounds-section .sheet-attr-box > div > ul > li > label.sheet-improvement:first-of-type b{ + font-weight: 900; +} + +.sheet-charsheet .sheet-backgrounds-section .sheet-attr-box > div > ul > li > label.sheet-improvement:first-of-type b::after{ + content: " *"; + color: #8e98a8; +} + +.sheet-charsheet .sheet-backgrounds-section .sheet-attr-box > div > ul > li > label.sheet-improvement:first-of-type input[type="checkbox"]:checked + b{ + color: rgba(var(--pane-secondary-rgb), .95); +} + +.sheet-charsheet .sheet-backgrounds-section .sheet-attr-box > div > ul > li > label.sheet-improvement:first-of-type input[type="checkbox"]:checked + b::after{ + color: rgba(var(--pane-accent-rgb), .95); +} + +.sheet-charsheet .sheet-backgrounds-section .sheet-attr-box > div > ul > li > label.sheet-improvement:last-of-type{ + display: block; + margin-top: 4px; + color: #aeb7c4 !important; + font-size: 12px !important; + text-transform: none; + letter-spacing: 0; +} + +/* Make Traditions match the Backgrounds card/list style */ +.sheet-charsheet .sheet-tradition-section ul{ + margin: 0; + padding: 0; + list-style: none; +} + +.sheet-charsheet .sheet-tradition-section .sheet-attr-box > div > ul > li{ + margin: 0 0 10px 0; + padding: 10px; + border: 1px solid rgba(255,255,255,.10); + border-radius: 12px; + background: rgba(0,0,0,.18); +} + +.sheet-charsheet .sheet-tradition-section .sheet-attr-box > div > ul > li:last-child{ + margin-bottom: 0; +} + +/* Title line inside each tradition entry */ +.sheet-charsheet .sheet-tradition-section .sheet-attr-box > div > ul > li > label.sheet-improvement:first-of-type{ + display: inline-flex; + align-items: center; + gap: 0; + font-weight: 800; + letter-spacing: .05em; + text-transform: uppercase; + color: #dfe8f5 !important; + font-size: 16px !important; +} + +/* Hide native checkbox like Backgrounds */ +.sheet-charsheet .sheet-tradition-section .sheet-attr-box > div > ul > li > label.sheet-improvement:first-of-type input[type="checkbox"]{ + position: absolute; + opacity: 0; + pointer-events: none; +} + +.sheet-charsheet .sheet-tradition-section .sheet-attr-box > div > ul > li > label.sheet-improvement:first-of-type b{ + font-weight: 900; +} + +.sheet-charsheet .sheet-tradition-section .sheet-attr-box > div > ul > li > label.sheet-improvement:first-of-type b::after{ + content: " *"; + color: #8e98a8; +} + +/* Checked state */ +.sheet-charsheet .sheet-tradition-section .sheet-attr-box > div > ul > li > label.sheet-improvement:first-of-type input[type="checkbox"]:checked + b{ + color: rgba(var(--pane-secondary-rgb), .95); +} + +.sheet-charsheet .sheet-tradition-section .sheet-attr-box > div > ul > li > label.sheet-improvement:first-of-type input[type="checkbox"]:checked + b::after{ + color: rgba(var(--pane-accent-rgb), .95); +} + +/* Description line */ +.sheet-charsheet .sheet-tradition-section .sheet-attr-box > div > ul > li > label.sheet-improvement:last-of-type{ + display: block; + margin-top: 4px; + color: #aeb7c4 !important; + font-size: 12px !important; + text-transform: none; + letter-spacing: 0; +} + +.sheet-charsheet .sheet-rage-row{ + display: flex; + flex-wrap: nowrap; + gap: 8px; + align-items: center; + margin-bottom: 10px; + width: 100%; +} + +.sheet-charsheet .sheet-hunger-row{ + display: flex; + flex-wrap: nowrap; + gap: 8px; + align-items: center; + margin-bottom: 10px; + width: 100%; +} + +.sheet-charsheet .sheet-generation-row{ + display: flex; + flex-wrap: nowrap; + gap: 8px; + align-items: center; + width: 100%; +} + +.sheet-charsheet .sheet-generation{ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + width: 50px !important; + min-width: 50px !important; + max-width: 50px !important; + height: 50px; + margin: 0; + padding: 0; + cursor: pointer; +} + +.sheet-charsheet .sheet-generation input[type="radio"]{ + position: absolute; + inset: 0; + opacity: 0; + margin: 0; + cursor: pointer; +} + +.sheet-charsheet .sheet-generation span{ + position: relative; + width: 100%; + height: 100%; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + font-weight: 900; + color: #ffd9e3; + clip-path: polygon(50% 4%, 74% 24%, 74% 56%, 50% 96%, 26% 56%, 26% 24%); + border: 2px solid rgba(171,50,73,.90); + background: + radial-gradient(140% 120% at 30% 20%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%), + linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.18)), + rgba(48,12,21,.92); + box-shadow: + inset 0 1px 0 rgba(255,255,255,.14), + inset 0 -10px 14px rgba(0,0,0,.35), + 0 0 0 1px rgba(0,0,0,.30); +} + +.sheet-charsheet .sheet-generation span::before{ + content: ""; + position: absolute; + inset: 4px; + clip-path: polygon(50% 6%, 72% 25%, 72% 55%, 50% 92%, 28% 55%, 28% 25%); + border: 1px solid rgba(0,0,0,.35); + opacity: .55; + pointer-events: none; +} + +.sheet-charsheet .sheet-generation input[type="radio"]:checked + span{ + border-color: rgba(255,143,161,.98); + color: #fff4f7; + background: + radial-gradient(140% 120% at 30% 20%, rgba(255,255,255,.30), rgba(255,255,255,0) 55%), + linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.12)), + rgba(191,33,72,.94); + box-shadow: + inset 0 1px 0 rgba(255,255,255,.26), + inset 0 -10px 14px rgba(0,0,0,.26), + 0 0 12px rgba(220,64,102,.45), + 0 0 0 1px rgba(0,0,0,.26); +} + +.sheet-charsheet .sheet-quint-row{ + display: flex; + flex-wrap: nowrap; + gap: 8px; + align-items: center; + width: 100%; + margin-bottom: 10px; +} + + + + +.sheet-charsheet .sheet-wrage-level, +.sheet-charsheet .sheet-blood-level, +.sheet-charsheet .sheet-quint-level{ + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 50px; + width: 50px; + height: 50px; + margin: 0; + padding: 0; + cursor: pointer; +} + +.sheet-charsheet .sheet-wrage-level input[type="radio"], +.sheet-charsheet .sheet-blood-level input[type="radio"], +.sheet-charsheet .sheet-quint-level input[type="checkbox"], +.sheet-charsheet .sheet-track-level input[type="radio"]{ + position: absolute; + inset: 0; + opacity: 0; + margin: 0; + cursor: pointer; +} + +.sheet-charsheet .sheet-wrage-level span, +.sheet-charsheet .sheet-blood-level span, +.sheet-charsheet .sheet-quint-level span{ + position: relative; + width: 100%; + height: 100%; + display: inline-flex; + align-items: center; + justify-content: center; + font-weight: 900; + line-height: 1; + user-select: none; +} + + + +.sheet-charsheet .sheet-wrage-level span{ + border-radius: 10px; + border: 2px solid rgba(58,167,107,.75); + color: #d6ffe6; + + background: + linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 45%), + radial-gradient(120% 140% at 30% 20%, rgba(255,255,255,.12), rgba(255,255,255,0) 55%), + rgba(12,26,20,.92); + + box-shadow: + inset 0 1px 0 rgba(255,255,255,.18), + inset 0 -10px 18px rgba(0,0,0,.35), + 0 0 0 1px rgba(0,0,0,.35); +} + + +.sheet-charsheet .sheet-wrage-level span::before{ + content: ""; + position: absolute; + inset: 3px; + border-radius: 8px; + border: 1px solid rgba(255,255,255,.30); + opacity: .75; + pointer-events: none; +} + + +.sheet-charsheet .sheet-wrage-level span::after{ + content: ""; + position: absolute; + left: 16%; + top: 12%; + width: 45%; + height: 26%; + border-radius: 999px; + background: rgba(255,255,255,.22); + filter: blur(.2px); + pointer-events: none; +} + +.sheet-charsheet .sheet-wrage-level input[type="radio"]:checked + span{ + border-color: #baffdc; + color: #06140d; + + background: + linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 45%), + radial-gradient(120% 140% at 30% 20%, rgba(255,255,255,.16), rgba(255,255,255,0) 55%), + rgba(47,224,137,.92); + + box-shadow: + 0 0 0 1px rgba(0,0,0,.45), + 0 0 18px rgba(47,224,137,.35), + inset 0 1px 0 rgba(255,255,255,.20), + inset 0 -10px 18px rgba(0,0,0,.22); +} + + +.sheet-charsheet .sheet-armor-row{ + display: flex; + flex-direction: row; + gap: 8px; + align-items: center; + justify-content: flex-start; + width: 100%; +} + +.sheet-charsheet .sheet-armor-input{ + position: absolute; + opacity: 0; + pointer-events: none; +} + +.sheet-charsheet .sheet-armor-level{ + width: 50px; + height: 50px; + flex: 0 0 50px; + display: inline-block; + cursor: pointer; + clip-path: polygon(50% 4%, 88% 14%, 88% 56%, 50% 96%, 12% 56%, 12% 14%); + border: 2px solid rgba(192,200,214,0.65); + box-sizing: border-box; + background: + linear-gradient(180deg, rgba(255,255,255,0.36), rgba(255,255,255,0.05) 36%, rgba(0,0,0,0.24) 100%), + linear-gradient(135deg, rgba(210,218,230,0.9), rgba(126,136,150,0.9)); + box-shadow: + inset 0 1px 0 rgba(255,255,255,0.45), + inset 0 -10px 14px rgba(0,0,0,0.28), + 0 0 0 1px rgba(0,0,0,0.32); +} + +.sheet-charsheet .sheet-armor-level::after{ + content: ""; + display: block; + width: 100%; + height: 100%; + clip-path: polygon(50% 10%, 82% 18%, 82% 54%, 50% 88%, 18% 54%, 18% 18%); + border: 1px solid rgba(255,255,255,0.30); + box-sizing: border-box; + opacity: 0.55; +} + +.sheet-charsheet .sheet-armor-input:checked + .sheet-armor-level{ + border-color: rgba(247,223,145,0.96); + background: + linear-gradient(180deg, rgba(255,250,229,0.50), rgba(255,239,179,0.14) 38%, rgba(56,38,10,0.18) 100%), + linear-gradient(135deg, rgba(248,227,163,0.98), rgba(186,143,53,0.96)); + box-shadow: + inset 0 1px 0 rgba(255,255,255,0.66), + inset 0 -8px 12px rgba(45,28,6,0.24), + 0 0 0 1px rgba(0,0,0,0.28), + 0 0 14px rgba(232,190,92,0.40); +} + + + +.sheet-charsheet .sheet-blood-level span{ + border-radius: 14px; + border: 2px solid rgba(177,42,63,.80); + color: #ffe6eb; + + background: + radial-gradient(140% 140% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%), + linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.18)), + rgba(30,13,18,.92); + + box-shadow: + 0 2px 10px rgba(0,0,0,.40), + inset 0 2px 0 rgba(255,255,255,.10), + inset 0 -12px 18px rgba(0,0,0,.35); +} + + +.sheet-charsheet .sheet-blood-level span::before{ + content:""; + position:absolute; + inset: 4px; + border-radius: 12px; + border: 1px solid rgba(0,0,0,.28); + box-shadow: + inset 0 1px 0 rgba(255,255,255,.10), + inset 0 -10px 14px rgba(0,0,0,.22); + pointer-events:none; + opacity: .65; +} + + +.sheet-charsheet .sheet-blood-level span::after{ + content:""; + position:absolute; + left: 14%; + top: 10%; + width: 52%; + height: 30%; + border-radius: 999px; + background: rgba(255,255,255,.20); + pointer-events:none; +} + +.sheet-charsheet .sheet-blood-level input[type="radio"]:checked + span, +.sheet-charsheet .sheet-track-level input[type="radio"]:checked + span{ + border-color: #ffe1e8; + color: #1a0309; + + background: + radial-gradient(140% 140% at 30% 20%, rgba(255,255,255,.20), rgba(255,255,255,0) 55%), + linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.14)), + rgba(255,73,110,.92); + + box-shadow: + 0 2px 10px rgba(0,0,0,.40), + 0 0 16px rgba(255,73,110,.35), + inset 0 2px 0 rgba(255,255,255,.12), + inset 0 -12px 18px rgba(0,0,0,.28); +} + + + +.sheet-charsheet .sheet-quint-level{ + flex: 0 0 50px; + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; +} + +.sheet-charsheet .sheet-quint-level span{ + width: 50px; + height: 50px; + box-sizing: border-box; + border-radius: 0; + clip-path: polygon(25% 6%, 75% 6%, 96% 50%, 75% 94%, 25% 94%, 4% 50%); + border: 2px solid rgba(159,123,255,.85); + color: #efe9ff; + + background: + linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0) 45%), + linear-gradient(315deg, rgba(255,255,255,.10), rgba(255,255,255,0) 55%), + radial-gradient(120% 130% at 30% 25%, rgba(255,255,255,.14), rgba(255,255,255,0) 55%), + rgba(20,11,37,.92); + + box-shadow: + inset 0 1px 0 rgba(255,255,255,.18), + inset 0 -10px 16px rgba(0,0,0,.30), + 0 0 0 1px rgba(0,0,0,.35); +} + + +.sheet-charsheet .sheet-quint-level span::before{ + content: ""; + position: absolute; + inset: 4px; + clip-path: polygon(25% 8%, 75% 8%, 93% 50%, 75% 92%, 25% 92%, 7% 50%); + border: 1px solid rgba(0,0,0,.32); + opacity: .55; + pointer-events: none; +} + +.sheet-charsheet .sheet-quint-level span::after{ + content:""; + position:absolute; + left: 16%; + top: 12%; + width: 45%; + height: 26%; + border-radius: 999px; + background: rgba(255,255,255,.18); + pointer-events:none; +} + +.sheet-charsheet .sheet-quint-level input[type="checkbox"]:checked + span, +.sheet-charsheet .sheet-track-level input[type="radio"]:checked + span{ + border-color: #e6ddff; + color: #0a0520; + + background: + linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,0) 45%), + linear-gradient(315deg, rgba(255,255,255,.12), rgba(255,255,255,0) 55%), + radial-gradient(120% 130% at 30% 25%, rgba(255,255,255,.16), rgba(255,255,255,0) 55%), + rgba(138,91,255,.92); + + box-shadow: + 0 0 18px rgba(138,91,255,.35), + inset 0 1px 0 rgba(255,255,255,.22), + inset 0 -10px 16px rgba(0,0,0,.20); +} + +.sheet-hasrollbutton ~ .sheet-move-rollbutton{ + display: none; +} + +.sheet-hasrollbutton:checked ~ .sheet-move-rollbutton{ + display: block; +} + +.repcontainer .repitem button[type="action"] { + position: relative; +} + +/* Make Mage Spheres match Mage Skills */ +.sheet-charsheet .sheet-spheres-section ul{ + margin: 0; + padding: 0; + list-style: none; +} + +.sheet-charsheet .sheet-spheres-section .sheet-attr-box > div > ul > li{ + margin: 0; + padding: 10px; + border: 1px solid rgba(255,255,255,.10); + border-radius: 12px; + background: rgba(0,0,0,.18); +} + +.sheet-charsheet .sheet-spheres-section .sheet-attr-box > div > ul{ + display: grid; + gap: 10px; +} + +.sheet-charsheet .sheet-spheres-section .sheet-attr-box > div > ul > li > label.sheet-improvement:first-of-type{ + display: inline-flex; + align-items: center; + gap: 0; + font-weight: 800; + letter-spacing: .05em; + text-transform: uppercase; + color: #dfe8f5 !important; +} + +.sheet-charsheet .sheet-spheres-section .sheet-attr-box > div > ul > li > label.sheet-improvement:first-of-type input[type="checkbox"]{ + position: absolute; + opacity: 0; + pointer-events: none; +} + +.sheet-charsheet .sheet-spheres-section .sheet-attr-box > div > ul > li > label.sheet-improvement:first-of-type b{ + font-weight: 900; +} + +.sheet-charsheet .sheet-spheres-section .sheet-attr-box > div > ul > li > label.sheet-improvement:first-of-type b::after{ + content: " *"; + color: #8e98a8; +} + +.sheet-charsheet .sheet-spheres-section .sheet-attr-box > div > ul > li > label.sheet-improvement:first-of-type input[type="checkbox"]:checked + b{ + color: rgba(var(--pane-secondary-rgb), .95); +} + +.sheet-charsheet .sheet-spheres-section .sheet-attr-box > div > ul > li > label.sheet-improvement:first-of-type input[type="checkbox"]:checked + b::after{ + color: rgba(var(--pane-accent-rgb), .95); +} + +.sheet-charsheet .sheet-spheres-section .sheet-attr-box > div > ul > li > label.sheet-improvement:last-of-type{ + display: block; + margin-top: 4px; + color: #aeb7c4 !important; + font-size: 12px !important; + text-transform: none; + letter-spacing: 0; +} + +.sheet-charsheet .sheet-spheres-section .sheet-attr-box > div > ul > li > ul{ + display: flex; + flex-wrap: wrap; + gap: 8px; + margin: 8px 0 0 0; + padding: 0; + list-style: none; +} + +.sheet-charsheet .sheet-spheres-section .sheet-attr-box > div > ul > li > ul > li{ + margin: 0; +} + +.sheet-charsheet .sheet-spheres-section .sheet-attr-box > div > ul > li > ul > li > label.sheet-improvement{ + display: inline-flex; + align-items: center; + position: relative; +} + +.sheet-charsheet .sheet-spheres-section .sheet-attr-box > div > ul > li > ul > li > label.sheet-improvement input[type="checkbox"]{ + position: absolute; + opacity: 0; + pointer-events: none; +} + +.sheet-charsheet .sheet-spheres-section .sheet-attr-box > div > ul > li > ul > li > label.sheet-improvement i{ + display: inline-flex; + align-items: center; + gap: 0; + font-style: normal; + font-size: 12px; + line-height: 1; + padding: 6px 8px; + border-radius: 999px; + border: 1px solid rgba(172,181,196,.5); + color: #c9d1de; + background: rgba(24,30,42,.72); +} + +.sheet-charsheet .sheet-spheres-section .sheet-attr-box > div > ul > li > ul > li > label.sheet-improvement i::before{ + content: "["; + margin-right: 1px; + color: #9ea8ba; +} + +.sheet-charsheet .sheet-spheres-section .sheet-attr-box > div > ul > li > ul > li > label.sheet-improvement i::after{ + content: "]"; + margin-left: 1px; + color: #9ea8ba; +} + +.sheet-charsheet .sheet-spheres-section .sheet-attr-box > div > ul > li > ul > li > label.sheet-improvement input[type="checkbox"]:checked + i{ + border-color: rgba(var(--pane-accent-rgb), .80); + color: #f7fbff; + background: linear-gradient(180deg, rgba(var(--pane-secondary-rgb), .46), rgba(var(--pane-accent-rgb), .56)); + box-shadow: 0 0 10px rgba(var(--pane-accent-rgb), .30); +} + +.sheet-charsheet .sheet-spheres-section .sheet-attr-box > div > ul > li > ul > li > label.sheet-improvement input[type="checkbox"]:checked + i::before, +.sheet-charsheet .sheet-spheres-section .sheet-attr-box > div > ul > li > ul > li > label.sheet-improvement input[type="checkbox"]:checked + i::after{ + color: rgba(var(--pane-secondary-rgb), .95); +} + +/* Rolltemplate (runtime-safe selectors) */ +.sheet-rolltemplate-us, +.sheet-rolltemplate-us * { + box-sizing: border-box; + font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; +} + +.sheet-rolltemplate-us > div { + max-width: 340px; + border-radius: 26px; + overflow: hidden; +} + +.sheet-rolltemplate-us .sheet-rt-card { + --rt-gold-1: #c59d2f; + --rt-gold-2: #e0bb49; + --rt-accent-1: #522091; + --rt-accent-2: #7a35c8; + --rt-accent-soft: rgba(122,53,200,.22); + color: #f4f1ea; + border: 1px solid rgba(212,168,58,.55); + border-radius: 26px; + background: + linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), + linear-gradient(180deg, #1b1e25 0%, #13161d 100%); + box-shadow: + 0 18px 45px rgba(0,0,0,.45), + inset 0 1px 0 rgba(255,255,255,.06); + padding: 14px; +} + +.sheet-rolltemplate-us .sheet-rt-card.sheet-rt-theme-vampire { + --rt-accent-1: #7f1f26; + --rt-accent-2: #b63a45; + --rt-accent-soft: rgba(182,58,69,.22); +} + +.sheet-rolltemplate-us .sheet-rt-card.sheet-rt-theme-werewolf { + --rt-accent-1: #3f8b3f; + --rt-accent-2: #56b356; + --rt-accent-soft: rgba(86,179,86,.22); +} + +.sheet-rolltemplate-us .sheet-rt-card.sheet-rt-theme-mage { + --rt-accent-1: #522091; + --rt-accent-2: #7a35c8; + --rt-accent-soft: rgba(122,53,200,.22); +} + +.sheet-rolltemplate-us .sheet-rt-card > div { + margin-bottom: 12px; +} + +.sheet-rolltemplate-us .sheet-rt-nameplate { + position: relative; + padding: 14px 16px 34px 16px; + border-radius: 16px; + border: 1px solid rgba(255,255,255,.12); + background: + radial-gradient(circle at top right, var(--rt-accent-soft), transparent 45%), + linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); +} + +.sheet-rolltemplate-us .sheet-rt-rarity { + position: absolute; + bottom: 8px; + right: 10px; + font-size: 10px; + font-weight: 800; + letter-spacing: .5px; + color: #10131d; + background: linear-gradient(180deg, var(--rt-gold-2), var(--rt-gold-1)); + border-radius: 999px; + padding: 4px 8px; + max-width: calc(100% - 20px); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.sheet-rolltemplate-us .sheet-rt-name { + font-size: 22px; + font-weight: 800; + letter-spacing: .3px; + line-height: 1.05; + color: #f4f1ea; + margin: 0; + padding-right: 0; +} + +.sheet-rolltemplate-us .sheet-rt-move { + font-size: 12px; + color: #cfd4df; + margin: 4px 0 0 0; + text-transform: uppercase; + letter-spacing: 1px; +} + +.sheet-rolltemplate-us .sheet-rt-labels { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px; + align-items: stretch; +} + +.sheet-rolltemplate-us .sheet-rt-stat { + display: flex; + flex-direction: column; + min-width: 0; +} + +.sheet-rolltemplate-us .sheet-rt-values { + display: grid; + grid-template-columns: 1fr; + gap: 6px; +} + +.sheet-rolltemplate-us .sheet-rt-chip { + min-height: 38px; + display: grid; + place-items: center; + font-size: 14px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: .5px; + color: #ffffff; + text-shadow: 0 1px 0 rgba(0,0,0,.35); + border: 1px solid rgba(255,255,255,.18); + border-bottom: none; + border-radius: 16px 16px 0 0; + box-shadow: inset 0 1px 0 rgba(255,255,255,.12); + padding: 8px 12px 6px; +} + +.sheet-rolltemplate-us .sheet-rt-chip-will { + background: + radial-gradient(circle at top right, var(--rt-accent-soft), transparent 45%), + linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); + color: #ffd76a; +} + +.sheet-rolltemplate-us .sheet-rt-chip-opp { + background: + radial-gradient(circle at top right, var(--rt-accent-soft), transparent 45%), + linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); + color: var(--rt-accent-2); +} + +.sheet-rolltemplate-us .sheet-rt-values { + margin-bottom: 12px; + padding: 8px; + border-radius: 16px; + border: 1px solid rgba(255,255,255,.12); + background: + radial-gradient(circle at top center, var(--rt-accent-soft), transparent 55%), + linear-gradient(180deg, #252b33, #1b202b); +} + +.sheet-rolltemplate-us .sheet-rt-value { + min-height: 64px; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: nowrap; + font-size: clamp(18px, 5vw, 20px); + font-weight: 900; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-align: center; + border-radius: 0 0 16px 16px; + padding: 10px 16px 12px; + border: 1px solid rgba(255,255,255,.05); + text-shadow: 0 1px 0 rgba(0,0,0,.35); +} + +.sheet-rolltemplate-us .sheet-rt-stat-will .sheet-rt-value { + background: + radial-gradient(circle at top right, var(--rt-accent-soft), transparent 45%), + linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); + color: #ffd76a; + border: 1px solid rgba(255,215,110,.45); + box-shadow: + inset 0 1px 0 rgba(255,255,255,.35), + 0 0 10px rgba(224,187,73,.25); +} + +.sheet-rolltemplate-us .sheet-rt-stat-opp .sheet-rt-value { + background: + radial-gradient(circle at top right, var(--rt-accent-soft), transparent 45%), + linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); + color: var(--rt-accent-2); + border: 1px solid var(--rt-accent-2); + box-shadow: + inset 0 1px 0 rgba(255,255,255,.25), + 0 0 10px var(--rt-accent-soft); +} + +.sheet-rolltemplate-us .sheet-rt-value .inlinerollresult { + writing-mode: horizontal-tb !important; + text-orientation: mixed !important; display: inline-block; } -/* Base */ -li { list-style: none; } -.charsheet { background-color:#070707; } -.charsheet .sheet-maindiv { background-color:#070707; } - -/* Labels & headings */ -.charsheet .sheet-maindiv label { - display:inline-block; - width:auto; - margin-left:5px; - font-family:'Special Elite','Helvetica',sans-serif; - font-weight:normal; -} -.charsheet .sheet-maindiv label.sheet-name { - font-weight:400; - font-size:1.5em; +.sheet-rolltemplate-us .sheet-rt-values-critical .sheet-rt-value { + border-color: rgba(118,186,255,.62); + background: + radial-gradient(circle at 70% 30%, rgba(118,186,255,.38), transparent 48%), + linear-gradient(180deg, rgba(73,122,209,.36), rgba(31,62,125,.42)); + box-shadow: + 0 0 14px rgba(78,145,230,.38), + inset 0 1px 0 rgba(255,255,255,.18); } -/* Unified section title w/ graphic background and top spacing */ -.charsheet .sheet-maindiv .sheet-section-title { - background:url('https://faustiangames.com/wp-content/uploads/2025/08/label-image.png') no-repeat left center transparent; - color:#fff; - line-height:43px; - height:36px; - width:100%; - padding-left:15px; - margin:12px 0 0 0; /* top spacing before each section */ - font-size:1.5em; - display:block; - box-sizing:border-box; +.sheet-rolltemplate-us .sheet-rt-result { + min-height: 58px; + display: grid; + place-items: center; + border-radius: 18px; + border: 1px solid rgba(255,255,255,.12); + background: linear-gradient(180deg, #1b1e27, #11141b); + text-align: center; + font-size: 22px; + font-weight: 900; + letter-spacing: 1px; + text-transform: uppercase; + margin-bottom: 0 !important; } -/* Attribute boxes */ -.charsheet .sheet-attr-box { - padding:5px; - background:#0b0b0b; - border:2px solid #452182; - border-radius:5px; -} -.charsheet .sheet-attr-box input[type=text] { - width:100%; - text-align:center; - font-size:1.2em; - font-weight:bold; - background:#0b0b0b; - color:#ffffff; - border:2px solid #452182; +.sheet-rolltemplate-us .sheet-rt-result-critical { + color: #2296f5; + background: + radial-gradient(circle at top right, var(--rt-accent-soft), transparent 45%), + linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); } -.charsheet .sheet-attr-box input[type=text][name="attr_physical"] { - width: 35px; +.sheet-rolltemplate-us .sheet-rt-result-success { + color: #ffd76a; + background: + radial-gradient(circle at top right, var(--rt-accent-soft), transparent 45%), + linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); } -.charsheet .sheet-attr-box input[type=text][name="attr_social"] { - width: 35px; +.sheet-rolltemplate-us .sheet-rt-result-failure { + color: var(--rt-accent-2); + box-shadow: inset 0 1px 0 rgba(255,255,255,.05); + background: + radial-gradient(circle at top right, var(--rt-accent-soft), transparent 45%), + linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); } -.charsheet .sheet-attr-box input[type=text][name="attr_mental"] { - width: 35px; +.sheet-rolltemplate-us .sheet-rt-value, +.sheet-rolltemplate-us .sheet-rt-value * { + writing-mode: horizontal-tb !important; + text-orientation: mixed !important; } -.charsheet .sheet-attr-box input[type=text][name="attr_arete"] { - width: 35px; +/* Remove Roll20 inline roll coloring */ +.sheet-rolltemplate-us .inlinerollresult, +.sheet-rolltemplate-us .inlinerollresult.fullcrit, +.sheet-rolltemplate-us .inlinerollresult.fullfail, +.sheet-rolltemplate-us .inlinerollresult.importantroll { + background: transparent !important; + border: none !important; + color: inherit !important; + box-shadow: none !important; + font-weight: 900; + font-size: 1.1em; } -/*.charsheet .sheet-attr-box select { width:35px; } -.charsheet .sheet-attr-box select.sheet-advanced-dropdown { width:100px; }*/ - -/* Roll box (black background behind buttons) */ -.charsheet div.sheet-roll-box { - padding:8px 4px; - background:#000; - margin-top:0; - line-height:16px; +.sheet-rolltemplate-us .sheet-rt-card.sheet-rt-theme-mage .sheet-rt-result.sheet-rt-result-critical .sheet-rt-rarity { + background: linear-gradient(135deg, #8a5cff, #4b2ba8) !important; + background-image: linear-gradient(135deg, #8a5cff, #4b2ba8) !important; + color: #fff !important; + display: inline-block; + margin-top: 6px; + padding: 3px 8px; + border-radius: 999px; + font-size: 0.8em; + font-weight: 700; } -.charsheet .sheet-attr-box textarea { - font-size:1.2em; - height:32px; - padding: 5px; - box-sizing: border-box; - border: 2px solid #452182; - border-radius: 5px; - color: white; - background:#0b0b0b; - min-height: 80px; +.sheet-rolltemplate-us .sheet-rt-card.sheet-rt-theme-werewolf .sheet-rt-result.sheet-rt-result-critical .sheet-rt-rarity { + background: linear-gradient(135deg, var(--rt-accent-1), var(--rt-accent-2)) !important; + background-image: linear-gradient(135deg, var(--rt-accent-1), var(--rt-accent-2)) !important; + color: #fff8e1 !important; + display: inline-block; + margin-top: 6px; + padding: 3px 8px; + border-radius: 999px; + font-size: 0.8em; + font-weight: 700; +} + +.sheet-rolltemplate-us .sheet-rt-card.sheet-rt-theme-werewolf .sheet-rt-result-failure .sheet-rt-rarity { + display: inline-block; + margin-top: 6px; + padding: 3px 8px; + border-radius: 999px; + font-size: 0.8em; + font-weight: 700; + background: #6b1f1f; + color: #fff0f0; + border: 1px solid #b33a3a; } -/* Roll buttons: base + states */ -.ui-dialog .charsheet button[type=roll] { - float:none; - text-align:left; - margin:2px 0; - width:auto; - min-width:120px; - background-color:#452182; /* base purple */ - background-image:none !important; - box-shadow:none !important; - text-shadow:none !important; - -webkit-appearance:none; - appearance:none; - color:#fff; - border:2px solid #2c154f; - border-radius:5px; - padding:4px 8px; - font-weight:bold; - display:inline-block; /* stack vertically */ - margin-left:6px; - vertical-align:middle; -} -.ui-dialog .charsheet button[type=roll]:hover { - background-color:#5d2fa6 !important; /* lighter on hover */ -} -.ui-dialog .charsheet button[type=roll]:active { - background-color:#32185e !important; /* darker on press */ +/* Shared Lineage-style Conditions cards for Mage, Vampire, and Werewolf */ +.sheet-charsheet .sheet-conditions-themed{ + --conditions-theme: #6ba64a; } -/* Hide the roll button container by default */ -.sheet-move-rollbutton { - display: none; +.sheet-charsheet .sheet-mage-conditions{ --conditions-theme:#B85CFF; } +.sheet-charsheet .sheet-vampire-conditions{ --conditions-theme:#c22a2a; } +.sheet-charsheet .sheet-werewolf-conditions{ --conditions-theme:#6ba64a; } + +.sheet-charsheet .sheet-conditions-themed .sheet-condition-panel{ + padding: 14px !important; } -/* Show it only if the checkbox is checked */ -input.sheet-hasrollbutton:checked ~ .sheet-move-rollbutton { - display: block; -} - -/* “Mage” box border */ -.sheet-mage { - border:2px solid #452182; - border-radius:5px; - padding:6px; -} - -/* Show/hide helpers (left intact from your sheet logic) */ -.sheet-aware, -.sheet-fae, -.sheet-hunter, -.sheet-oracle, -.sheet-spectre, -.sheet-tainted, -.sheet-vamp, -.sheet-veteran, -.sheet-wizard, -.sheet-wolf, -.sheet-scholar, -.sheet-revenant, -.sheet-hallowed, -.sheet-vessel { +.sheet-charsheet .sheet-conditions-themed .sheet-condition-layout > .sheet-improvement[style*="font-size: small"]{ display:none; } -.sheet-classSelected { display:none; } -.sheet-lock:checked ~ .sheet-class, -.sheet-lock:checked ~ .sheet-class + label { display:none; } -.sheet-lock:checked ~ .sheet-class:checked, -.sheet-lock:checked ~ .sheet-class:checked + label, -.sheet-lock:checked ~ .sheet-classSelected { display:inline-block; } -.sheet-lock:not(:checked) ~ .sheet-class, -.sheet-lock:not(:checked) ~ .sheet-class + label { display:inline-block; } -.sheet-lock:checked ~ .sheet-classcol { display:none; } -.sheet-classcol > .sheet-class:checked, -.sheet-classcol > .sheet-class:checked + label { display:inline-block; } -input.sheet-showhide:checked ~ .sheet-subbox { display:none; } -.sheet-isaware:checked ~ .sheet-aware, -.sheet-isfae:checked ~ .sheet-fae, -.sheet-ishunter:checked ~ .sheet-hunter, -.sheet-isoracle:checked ~ .sheet-oracle, -.sheet-isspectre:checked ~ .sheet-spectre, -.sheet-istainted:checked ~ .sheet-tainted, -.sheet-isvamp:checked ~ .sheet-vamp, -.sheet-isveteran:checked ~ .sheet-veteran, -.sheet-iswizard:checked ~ .sheet-wizard, -.sheet-ismage:checked ~ .sheet-mage, -.sheet-iswolf:checked ~ .sheet-wolf, -.sheet-isscholar:checked ~ .sheet-scholar, -.sheet-isrevenant:checked ~ .sheet-revenant, -.sheet-ishallowed:checked ~ .sheet-hallowed, -.sheet-isvessel:checked ~ .sheet-vessel { +.sheet-charsheet .sheet-conditions-themed .sheet-condition-group-title{ + display:block; + margin: 0 0 10px 0 !important; + font-weight: 900 !important; + letter-spacing: .08em; + text-transform: uppercase; + color: var(--conditions-theme) !important; +} + +.sheet-charsheet .sheet-conditions-themed .sheet-condition-list{ + list-style:none; + margin: 0 0 14px 0; + padding: 0; + display:grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 10px; +} + +.sheet-charsheet .sheet-conditions-themed .sheet-condition-card{ + margin: 0; + padding: 12px; + border: 1px solid rgba(255,255,255,.10); + border-radius: 12px; + background: rgba(0,0,0,.18); + box-shadow: inset 0 1px 0 rgba(255,255,255,.04); + position: relative; + overflow: hidden; +} + +.sheet-charsheet .sheet-conditions-themed .sheet-condition-card::before{ + content:""; + position:absolute; + inset:0 auto 0 0; + width: 4px; + border-radius: 12px 0 0 12px; + background: rgba(255,255,255,.18); +} + +.sheet-charsheet .sheet-conditions-themed .sheet-condition-card-physical::before{ background:#D61A1A; } +.sheet-charsheet .sheet-conditions-themed .sheet-condition-card-social::before{ background:#1ACDD6; } +.sheet-charsheet .sheet-conditions-themed .sheet-condition-card-mental::before{ background:#D6C229; } + +.sheet-charsheet .sheet-conditions-themed .sheet-condition-title{ + display:flex !important; + align-items:flex-start; + gap:0; + font-weight: 900 !important; + letter-spacing: .05em; + text-transform: uppercase; + margin-bottom: 6px; +} + +.sheet-charsheet .sheet-conditions-themed .sheet-condition-title input[type="checkbox"]{ + position:absolute; + opacity:0; + pointer-events:none; +} + +.sheet-charsheet .sheet-conditions-themed .sheet-condition-title b{ + font-weight: 900; +} + +.sheet-charsheet .sheet-conditions-themed .sheet-condition-title b::after{ + content: " *"; + color: #8e98a8; +} + +.sheet-charsheet .sheet-conditions-themed .sheet-condition-title input[type="checkbox"]:checked + b{ + color: var(--conditions-theme); +} + +.sheet-charsheet .sheet-conditions-themed .sheet-condition-title input[type="checkbox"]:checked + b::after{ + color: currentColor; +} + +.sheet-charsheet .sheet-conditions-themed .sheet-condition-text{ + display:block; + margin-top: 4px; + color:#aeb7c4 !important; + font-size: 12px !important; + text-transform:none; + letter-spacing:0; + line-height:1.45; +} + +.sheet-charsheet .sheet-conditions-themed .sheet-condition-resolution{ + display:block; + margin-top: 8px; + color:#7ee18f !important; + font-size: 12px !important; + text-transform:none; + letter-spacing:0; + line-height:1.45; +} + +.sheet-charsheet .sheet-conditions-themed .sheet-condition-resolution b{ + color:#baf5c1; +} + +.sheet-charsheet .sheet-conditions-themed .sheet-condition-armor-row{ + margin: 0 0 14px 0; + padding: 10px; + border: 1px solid rgba(255,255,255,.10); + border-radius: 12px; + background: rgba(0,0,0,.18); +} + + +/* Mage experience ladder redesign */ +.sheet-charsheet .sheet-mage-xp-ladder{ + display:grid; + gap:14px; +} +.sheet-charsheet .sheet-mage-xp-card{ display:block; } - -.sheet-block { - /* These help if you ever switch to columns; harmless for grid */ - break-inside: avoid; - page-break-inside: avoid; - -webkit-column-break-inside: avoid; +.sheet-charsheet .sheet-mage-xp-header{ + display:flex; + justify-content:space-between; + align-items:flex-end; + gap:12px; + margin-bottom:12px; + padding-bottom:10px; + border-bottom:1px solid rgba(255,255,255,.10); +} +.sheet-charsheet .sheet-mage-xp-kicker{ + font-size:11px; + font-weight:700; + letter-spacing:.16em; + text-transform:uppercase; + color: var(--accent2); + margin-bottom:4px; +} +.sheet-charsheet .sheet-mage-xp-title{ + font-family:'Special Elite', ui-serif, Georgia, serif; + font-size:22px; + line-height:1.1; + color:var(--text); +} +.sheet-charsheet .sheet-mage-xp-rule{ + font-size:12px; + font-weight:700; + letter-spacing:.12em; + text-transform:uppercase; + color: var(--muted); + white-space:nowrap; +} +.sheet-charsheet .sheet-mage-xp-progress-wrap{ + position:relative; + display:grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap:8px; + margin-bottom:14px; + padding-bottom:34px; +} +.sheet-charsheet .sheet-mage-xp-check{ + position:absolute; + opacity:0; + pointer-events:none; +} +.sheet-charsheet .sheet-mage-xp-box{ + height:28px; + border-radius:10px; + border:1px solid rgba(255,255,255,.22); + background: rgba(255,255,255,.03); + box-shadow: inset 0 1px 0 rgba(255,255,255,.06); + cursor:pointer; + position:relative; +} +.sheet-charsheet .sheet-mage-xp-box::after{ + content:""; + position:absolute; + inset:4px; + border-radius:7px; + background: linear-gradient(180deg, rgba(var(--theme-accent-rgb),.92), rgba(var(--theme-secondary-rgb),.82)); + opacity:0; + transform:scale(.86); + transition:opacity .15s ease, transform .15s ease; + box-shadow: 0 0 16px rgba(var(--theme-accent-rgb),.25); +} +.sheet-charsheet .sheet-mage-xp-check:checked + .sheet-mage-xp-box::after{ + opacity:1; + transform:scale(1); +} +.sheet-charsheet .sheet-mage-xp-progress{ + position:absolute; + left:0; + right:0; + bottom:8px; + height:14px; + border-radius:999px; + overflow:hidden; + border:1px solid rgba(255,255,255,.14); + background: rgba(0,0,0,.30); +} +.sheet-charsheet .sheet-mage-xp-progress-fill{ + display:block; + width:0%; + height:100%; + border-radius:inherit; + background: linear-gradient(90deg, rgba(var(--theme-accent-rgb),.85), rgba(var(--theme-secondary-rgb),.85)); + box-shadow: 0 0 18px rgba(var(--theme-accent-rgb),.28); + transition:width .15s ease; +} +.sheet-charsheet .sheet-mage-xp-next{ + position:absolute; + right:0; + bottom:-18px; + font-size:12px; + color:var(--muted); +} +.sheet-charsheet .sheet-mage-xp-next::after{ + content:"Next advance in 5 XP"; +} +.sheet-charsheet input[name="attr_exp1"]:checked ~ .sheet-mage-xp-progress .sheet-mage-xp-progress-fill{width:20%;} +.sheet-charsheet input[name="attr_exp2"]:checked ~ .sheet-mage-xp-progress .sheet-mage-xp-progress-fill{width:40%;} +.sheet-charsheet input[name="attr_exp3"]:checked ~ .sheet-mage-xp-progress .sheet-mage-xp-progress-fill{width:60%;} +.sheet-charsheet input[name="attr_exp4"]:checked ~ .sheet-mage-xp-progress .sheet-mage-xp-progress-fill{width:80%;} +.sheet-charsheet input[name="attr_exp5"]:checked ~ .sheet-mage-xp-progress .sheet-mage-xp-progress-fill{width:100%;} +.sheet-charsheet input[name="attr_exp1"]:checked ~ .sheet-mage-xp-next::after{content:"Next advance in 4 XP";} +.sheet-charsheet input[name="attr_exp2"]:checked ~ .sheet-mage-xp-next::after{content:"Next advance in 3 XP";} +.sheet-charsheet input[name="attr_exp3"]:checked ~ .sheet-mage-xp-next::after{content:"Next advance in 2 XP";} +.sheet-charsheet input[name="attr_exp4"]:checked ~ .sheet-mage-xp-next::after{content:"Next advance in 1 XP";} +.sheet-charsheet input[name="attr_exp5"]:checked ~ .sheet-mage-xp-next::after{content:"Advance ready"; color: var(--accent2); font-weight:700;} +.sheet-charsheet .sheet-mage-xp-steps{ + display:grid; + gap:12px; +} +.sheet-charsheet .sheet-mage-xp-step{ + border:1px solid rgba(var(--theme-accent-rgb),.24); + border-left:5px solid rgba(var(--theme-accent-rgb),.60); + border-radius:12px; + padding:10px 12px; + background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); +} +.sheet-charsheet .sheet-mage-xp-step-top{ + display:flex; + justify-content:space-between; + align-items:center; + gap:12px; + margin-bottom:4px; +} +.sheet-charsheet .sheet-mage-xp-step-title{ + font-size:13px; + font-weight:700; + letter-spacing:.08em; + text-transform:uppercase; + color:var(--accent2); +} +.sheet-charsheet .sheet-mage-xp-step-tag{ + font-size:11px; + letter-spacing:.08em; + text-transform:uppercase; + color:var(--muted); +} +.sheet-charsheet .sheet-mage-xp-step-text{ + font-size:13px; + line-height:1.45; + color:var(--text); +} +.sheet-charsheet .sheet-mage-xp-subtitle{ + font-size:18px !important; + margin-bottom:12px !important; +} +.sheet-charsheet .sheet-mage-xp-adv-grid{ + display:grid; + grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); + gap:12px; +} +.sheet-charsheet .sheet-mage-xp-list-block{ + border:1px solid rgba(255,255,255,.10); + border-radius:12px; + padding:10px 12px; + background: rgba(255,255,255,.02); +} +.sheet-charsheet .sheet-mage-xp-list-title{ + display:block; + color: var(--accent2) !important; + font-weight:700; + font-size:13px; + letter-spacing:.08em; + text-transform:uppercase; + margin-bottom:8px; +} +.sheet-charsheet .sheet-mage-xp-list{ + list-style:none; + margin:0; + padding:0; +} +.sheet-charsheet .sheet-mage-xp-list li + li{ + margin-top:6px; +} +.sheet-charsheet .sheet-mage-xp-list label.sheet-improvement{ + display:flex; + align-items:flex-start; + gap:8px; + line-height:1.35; +} +.sheet-charsheet .sheet-mage-xp-list label.sheet-improvement input[type="checkbox"]{ + margin-top:3px; + flex:0 0 auto; +} +@media (max-width: 640px){ + .sheet-charsheet .sheet-mage-xp-header, + .sheet-charsheet .sheet-mage-xp-step-top{ + flex-direction:column; + align-items:flex-start; + } + .sheet-charsheet .sheet-mage-xp-rule, + .sheet-charsheet .sheet-mage-xp-step-tag{ + white-space:normal; + } } -/* Prefer ~420px columns; Roll20 will give you 1 or 2 depending on width */ -.charsheet .sheet-columns { - column-width: 420px; - column-gap: 16px; + +/* Shared experience ladder */ +.sheet-charsheet .sheet-xp-ladder{ + display:grid; + gap:14px; } -@media (max-width: 856px) { - .charsheet .sheet-columns { column-width: auto; column-count: 1; } +.sheet-charsheet .sheet-xp-card{ + display:block; } - -/* Force second column to start at “Sphere” */ -.charsheet .sheet-colbreak { - break-before:column; - page-break-before:always; /* older fallback */ - -webkit-column-break-before:always; /* WebKit fallback */ +.sheet-charsheet .sheet-xp-header{ + display:flex; + justify-content:space-between; + align-items:flex-end; + gap:12px; + margin-bottom:12px; + padding-bottom:10px; + border-bottom:1px solid rgba(255,255,255,.10); } - -/* Prevent splitting of blocks across columns */ -.charsheet .sheet-columns .sheet-box, -.charsheet .sheet-columns .sheet-attr-box, -.charsheet .sheet-columns .sheet-mage, -.charsheet .sheet-columns fieldset, -.charsheet .sheet-columns ul, -.charsheet .sheet-columns textarea, -.charsheet .sheet-columns label.sheet-section-title { - break-inside:avoid; - -webkit-column-break-inside:avoid; - page-break-inside:avoid; +.sheet-charsheet .sheet-xp-kicker{ + font-size:11px; + font-weight:700; + letter-spacing:.16em; + text-transform:uppercase; + color: var(--accent2); + margin-bottom:4px; } - -/* Utility clearfix */ -.sheet-cf:before, .sheet-cf:after { content:" "; display:table; } -.sheet-cf:after { clear:both; } - -/* Small inputs */ -.sheet-armor { width:50px; } - -/* Textareas */ -.repitem textarea, -.sheet-box textarea { - height:32px; +.sheet-charsheet .sheet-xp-title{ + font-family:'Special Elite', ui-serif, Georgia, serif; + font-size:22px; + line-height:1.1; + color:var(--text); +} +.sheet-charsheet .sheet-xp-rule{ + font-size:12px; + font-weight:700; + letter-spacing:.12em; + text-transform:uppercase; + color: var(--muted); + white-space:nowrap; +} +.sheet-charsheet .sheet-xp-progress-wrap{ + position:relative; + display:grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap:8px; + margin-bottom:14px; + padding-top:34px; + padding-bottom:34px; +} +.sheet-charsheet .sheet-xp-check, +.sheet-charsheet .sheet-xp-bar-check, +.sheet-charsheet .sheet-mage-xp-check{ + position:absolute; + opacity:0; + pointer-events:none; +} +.sheet-charsheet .sheet-xp-box{ + height:28px; + border-radius:10px; + border:1px solid rgba(255,255,255,.22); + background: rgba(255,255,255,.03); + box-shadow: inset 0 1px 0 rgba(255,255,255,.06); + cursor:pointer; + position:relative; + z-index:1; +} +.sheet-charsheet .sheet-xp-box::after{ + content:""; + position:absolute; + inset:4px; + border-radius:7px; + background: linear-gradient(180deg, rgba(var(--theme-accent-rgb),.92), rgba(var(--theme-secondary-rgb),.82)); + opacity:0; + transform:scale(.86); + transition:opacity .15s ease, transform .15s ease; + box-shadow: 0 0 16px rgba(var(--theme-accent-rgb),.25); +} +.sheet-charsheet .sheet-xp-check:checked + .sheet-xp-box::after, +.sheet-charsheet .sheet-mage-xp-check:checked + .sheet-xp-box::after, +.sheet-charsheet .sheet-mage-xp-check:checked + .sheet-mage-xp-box::after{ + opacity:1; + transform:scale(1); +} +.sheet-charsheet .sheet-xp-progress{ + position:absolute; + left:0; + right:0; + top:0; + height:18px; + border-radius:999px; + overflow:hidden; + border:1px solid rgba(255,255,255,.14); + background: rgba(0,0,0,.30); +} +.sheet-charsheet .sheet-xp-progress-fill{ + display:block; + width:0%; + height:100%; + border-radius:inherit; + background: linear-gradient(90deg, rgba(var(--theme-accent-rgb),.85), rgba(var(--theme-secondary-rgb),.85)); + box-shadow: 0 0 18px rgba(var(--theme-accent-rgb),.28); + transition:width .15s ease; +} +.sheet-charsheet .sheet-xp-progress-button{ + position:absolute; + top:0; + left:0; + right:0; + height:18px; + min-height:18px; + line-height:18px; box-sizing:border-box; - border:2px solid #452182; - border-radius:5px; - background-color:#0b0b0b; - color: white; + appearance:none; + -webkit-appearance:none; + display:block; + margin:0; + padding:0; + border:none; + background:transparent; + box-shadow:none; + cursor:pointer; + z-index:2; +} +.sheet-charsheet .sheet-xp-progress-button::before{ + content:""; + display:none; +} +.sheet-charsheet .sheet-xp-clear-button{ + position:absolute; + right:0; + bottom:-18px; + padding:0; + margin:0; + border:none; + background:transparent; + color:var(--muted); + font-size:12px; + text-transform:uppercase; + letter-spacing:.08em; + cursor:pointer; +} +.sheet-charsheet .sheet-xp-clear-button:hover{ + color:var(--text); +} +.sheet-charsheet .sheet-xp-next{ + position:absolute; + left:0; + bottom:-18px; + font-size:12px; + color:var(--muted); +} +.sheet-charsheet .sheet-xp-next::after{ + content:"Next advance in 5 XP"; +} +.sheet-charsheet .sheet-xp-steps{ + display:grid; + gap:12px; +} +.sheet-charsheet .sheet-xp-step{ + border:1px solid rgba(var(--theme-accent-rgb),.24); + border-left:5px solid rgba(var(--theme-accent-rgb),.60); + border-radius:12px; + padding:10px 12px; + background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); +} +.sheet-charsheet .sheet-xp-step-top{ + display:flex; + justify-content:space-between; + align-items:center; + gap:12px; + margin-bottom:4px; +} +.sheet-charsheet .sheet-xp-step-title{ + font-weight:700; + color:rgba(var(--theme-accent-rgb)) !important; +} +.sheet-charsheet .sheet-xp-step-tag{ + font-size:11px; + font-weight:700; + letter-spacing:.12em; + text-transform:uppercase; + color: var(--muted); +} +.sheet-charsheet .sheet-xp-step-text{ + font-size:13px; + line-height:1.45; + color:var(--text); +} +.sheet-charsheet .sheet-xp-subtitle{ + margin-bottom:10px; +} +.sheet-charsheet .sheet-xp-adv-grid{ + display:grid; + grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); + gap:12px; +} +.sheet-charsheet .sheet-xp-list-block{ + border:1px solid rgba(255,255,255,.10); + border-radius:12px; + padding:12px; + background: rgba(255,255,255,.02); +} +.sheet-charsheet .sheet-xp-list-title{ + display:block; + margin-bottom:8px; + color: rgba(var(--theme-accent-rgb)) !important; +} +.sheet-charsheet .sheet-xp-list{ + list-style:none; + margin:0; + padding:0; +} +.sheet-charsheet .sheet-xp-list li + li{ + margin-top:8px; +} +.sheet-charsheet .sheet-xp-list-block textarea{ + min-height:168px; +} +.sheet-charsheet .sheet-xp-theme-vampire{ + --theme-accent-rgb: 194, 42, 42; + --theme-secondary-rgb: 108, 10, 10; +} +.sheet-charsheet .sheet-xp-theme-werewolf{ + --theme-accent-rgb: 107, 166, 74; + --theme-secondary-rgb: 45, 82, 27; } -/* hide the section by default */ -.sheet-paradox-section { - display: none; +/* XP bar fill states */ +.sheet-charsheet input[name="attr_m_xpbar1"]:checked ~ .sheet-xp-progress .sheet-xp-progress-fill, +.sheet-charsheet input[name="attr_v_xpbar1"]:checked ~ .sheet-xp-progress .sheet-xp-progress-fill, +.sheet-charsheet input[name="attr_w_xpbar1"]:checked ~ .sheet-xp-progress .sheet-xp-progress-fill{width:20%;} +.sheet-charsheet input[name="attr_m_xpbar2"]:checked ~ .sheet-xp-progress .sheet-xp-progress-fill, +.sheet-charsheet input[name="attr_v_xpbar2"]:checked ~ .sheet-xp-progress .sheet-xp-progress-fill, +.sheet-charsheet input[name="attr_w_xpbar2"]:checked ~ .sheet-xp-progress .sheet-xp-progress-fill{width:40%;} +.sheet-charsheet input[name="attr_m_xpbar3"]:checked ~ .sheet-xp-progress .sheet-xp-progress-fill, +.sheet-charsheet input[name="attr_v_xpbar3"]:checked ~ .sheet-xp-progress .sheet-xp-progress-fill, +.sheet-charsheet input[name="attr_w_xpbar3"]:checked ~ .sheet-xp-progress .sheet-xp-progress-fill{width:60%;} +.sheet-charsheet input[name="attr_m_xpbar4"]:checked ~ .sheet-xp-progress .sheet-xp-progress-fill, +.sheet-charsheet input[name="attr_v_xpbar4"]:checked ~ .sheet-xp-progress .sheet-xp-progress-fill, +.sheet-charsheet input[name="attr_w_xpbar4"]:checked ~ .sheet-xp-progress .sheet-xp-progress-fill{width:80%;} +.sheet-charsheet input[name="attr_m_xpbar5"]:checked ~ .sheet-xp-progress .sheet-xp-progress-fill, +.sheet-charsheet input[name="attr_v_xpbar5"]:checked ~ .sheet-xp-progress .sheet-xp-progress-fill, +.sheet-charsheet input[name="attr_w_xpbar5"]:checked ~ .sheet-xp-progress .sheet-xp-progress-fill{width:100%;} + +.sheet-charsheet input[name="attr_m_xpbar1"]:checked ~ .sheet-xp-next::after, +.sheet-charsheet input[name="attr_v_xpbar1"]:checked ~ .sheet-xp-next::after, +.sheet-charsheet input[name="attr_w_xpbar1"]:checked ~ .sheet-xp-next::after{content:"Next advance in 4 XP";} +.sheet-charsheet input[name="attr_m_xpbar2"]:checked ~ .sheet-xp-next::after, +.sheet-charsheet input[name="attr_v_xpbar2"]:checked ~ .sheet-xp-next::after, +.sheet-charsheet input[name="attr_w_xpbar2"]:checked ~ .sheet-xp-next::after{content:"Next advance in 3 XP";} +.sheet-charsheet input[name="attr_m_xpbar3"]:checked ~ .sheet-xp-next::after, +.sheet-charsheet input[name="attr_v_xpbar3"]:checked ~ .sheet-xp-next::after, +.sheet-charsheet input[name="attr_w_xpbar3"]:checked ~ .sheet-xp-next::after{content:"Next advance in 2 XP";} +.sheet-charsheet input[name="attr_m_xpbar4"]:checked ~ .sheet-xp-next::after, +.sheet-charsheet input[name="attr_v_xpbar4"]:checked ~ .sheet-xp-next::after, +.sheet-charsheet input[name="attr_w_xpbar4"]:checked ~ .sheet-xp-next::after{content:"Next advance in 1 XP";} +.sheet-charsheet input[name="attr_m_xpbar5"]:checked ~ .sheet-xp-next::after, +.sheet-charsheet input[name="attr_v_xpbar5"]:checked ~ .sheet-xp-next::after, +.sheet-charsheet input[name="attr_w_xpbar5"]:checked ~ .sheet-xp-next::after{content:"Advance ready"; color: var(--accent2); font-weight:700;} + + +/* Corruption dashboard */ +.sheet-charsheet .sheet-corruption-dashboard{ + --corruption-accent: rgba(var(--theme-accent-rgb), .95); + --corruption-accent-soft: rgba(var(--theme-accent-rgb), .18); + --corruption-accent-line: rgba(var(--theme-accent-rgb), .45); + background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.12)); + border: 1px solid rgba(255,255,255,.10); + border-radius: 16px; + overflow: hidden; + box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } -/* when the checkbox is checked, show it */ -.sheet-toggle-paradox:checked ~ .sheet-paradox-section { - display: block; +.sheet-charsheet .sheet-corruption-dashboard-mage{ + --corruption-accent: rgba(184,92,255,.96); + --corruption-accent-soft: rgba(184,92,255,.16); + --corruption-accent-line: rgba(184,92,255,.42); } -/* optional: cursor change to indicate it's clickable */ -.sheet-section-title { +.sheet-charsheet .sheet-corruption-dashboard-vampire{ + --corruption-accent: rgba(194,42,42,.96); + --corruption-accent-soft: rgba(194,42,42,.16); + --corruption-accent-line: rgba(194,42,42,.42); +} + +.sheet-charsheet .sheet-corruption-dashboard-werewolf{ + --corruption-accent: rgba(107,166,74,.96); + --corruption-accent-soft: rgba(107,166,74,.16); + --corruption-accent-line: rgba(107,166,74,.42); +} + +.sheet-charsheet .sheet-corruption-head{ + padding: 14px 14px 12px; + border-bottom: 1px solid rgba(255,255,255,.08); + background: linear-gradient(90deg, var(--corruption-accent-soft), rgba(255,255,255,0)); +} + +.sheet-charsheet .sheet-corruption-eyebrow{ + color: var(--corruption-accent); + font-size: 11px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: .14em; + margin-bottom: 6px; +} + +.sheet-charsheet .sheet-corruption-title{ + color: var(--text); + font-family: 'Special Elite', ui-serif, Georgia, serif; + font-size: 24px; + line-height: 1.15; + margin-bottom: 6px; +} + +.sheet-charsheet .sheet-corruption-copy{ + color: var(--muted); + font-size: 13px; + line-height: 1.45; +} + +.sheet-charsheet .sheet-corruption-track-row{ + display: flex; + flex-wrap: nowrap; + align-items: center; + gap: 8px; + margin-top: 12px; + width: 100%; +} + +.sheet-charsheet .sheet-corruption-track-label{ + color: var(--corruption-accent); + font-size: 12px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: .12em; + margin-right: 2px; + flex: 0 0 auto; +} + +.sheet-charsheet .sheet-corruption-box{ + position: relative; + display: flex; + flex: 1 1 0; + min-width: 0; + width: auto; + height: 32px; + margin: 0; cursor: pointer; } -/* show the section by default */ -.sheet-name-section { +.sheet-charsheet .sheet-corruption-box input[type="checkbox"]{ + position: absolute; + inset: 0; + opacity: 0; + margin: 0; + cursor: pointer; +} + +.sheet-charsheet .sheet-corruption-box span{ + width: 100%; + height: 100%; display: block; + border-radius: 8px; + border: 1px solid var(--corruption-accent-line); + background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.16)); + box-shadow: inset 0 1px 0 rgba(255,255,255,.08); } -/* when the checkbox is checked, hide it */ -.sheet-toggle-name:checked ~ .sheet-name-section { - display: none; +.sheet-charsheet .sheet-corruption-box input[type="checkbox"]:checked + span{ + background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(0,0,0,.08)), var(--corruption-accent); + border-color: var(--corruption-accent); + box-shadow: 0 0 10px var(--corruption-accent-soft); } -.sheet-gear-section { - display: block; +.sheet-charsheet .sheet-corruption-metrics{ + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 10px; + padding: 12px 14px 0; } -.sheet-toggle-gear:checked ~ .sheet-gear-section { - display: none; +.sheet-charsheet .sheet-corruption-metric, +.sheet-charsheet .sheet-corruption-chip{ + background: rgba(255,255,255,.025); + border: 1px solid rgba(255,255,255,.09); + border-radius: 12px; + padding: 10px 11px; } -/* show the section by default */ -.sheet-look-section { +.sheet-charsheet .sheet-corruption-metric strong, +.sheet-charsheet .sheet-corruption-chip strong{ display: block; + color: var(--corruption-accent); + font-size: 11px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: .12em; + margin-bottom: 5px; } -/* when the checkbox is checked, hide it */ -.sheet-toggle-look:checked ~ .sheet-look-section { - display: none; -} - -/* show the section by default */ -.sheet-stats-section { +.sheet-charsheet .sheet-corruption-metric span, +.sheet-charsheet .sheet-corruption-chip span, +.sheet-charsheet .sheet-corruption-stepcopy em{ display: block; + color: var(--muted); + font-size: 12px; + font-style: normal; + line-height: 1.45; } -/* when the checkbox is checked, hide it */ -.sheet-toggle-stats:checked ~ .sheet-stats-section { - display: none; +.sheet-charsheet .sheet-corruption-chips{ + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 10px; + padding: 12px 14px 14px; } -/* show the section by default */ -.sheet-avatar-section { +.sheet-charsheet .sheet-corruption-timeline{ + padding: 12px 14px 14px; + border-top: 1px solid rgba(255,255,255,.08); + background: rgba(0,0,0,.16); +} + +.sheet-charsheet .sheet-corruption-step{ + display: grid; + grid-template-columns: 20px 16px 1fr; + gap: 10px; + align-items: start; + margin: 0 0 10px; + cursor: pointer; +} + +.sheet-charsheet .sheet-corruption-step:last-child{margin-bottom: 0;} + +.sheet-charsheet .sheet-corruption-step input[type="checkbox"]{ + width: 16px; + height: 16px; + margin: 2px 0 0; + accent-color: var(--corruption-accent); +} + +.sheet-charsheet .sheet-corruption-step-static{ + grid-template-columns: 16px 1fr; + cursor: default; +} + +.sheet-charsheet .sheet-corruption-dot{ + width: 14px; + height: 14px; + border-radius: 999px; + border: 2px solid var(--corruption-accent-line); + margin-top: 1px; + background: rgba(0,0,0,.25); +} + +.sheet-charsheet .sheet-corruption-detail{ + border:1px solid var(--corruption-accent); + border-left:5px solid var(--corruption-accent); + border-radius:12px; + padding:10px 12px; + background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); +} + +.sheet-charsheet .sheet-corruption-step input[type="checkbox"]:checked + .sheet-corruption-dot{ + background: var(--corruption-accent); + border-color: var(--corruption-accent); + box-shadow: 0 0 10px var(--corruption-accent-soft); +} + +.sheet-charsheet .sheet-corruption-stepcopy strong{ display: block; + color: var(--text); + font-size: 13px; + margin-bottom: 3px; } -/* when the checkbox is checked, hide it */ -.sheet-toggle-avatar:checked ~ .sheet-avatar-section { - display: none; +@media only screen and (max-width: 740px){ + .sheet-charsheet .sheet-corruption-metrics, + .sheet-charsheet .sheet-corruption-chips{ + grid-template-columns: 1fr; + } } -/* show the section by default */ -.sheet-focus-section { - display: block; +.sheet-charsheet .sheet-corruption-step-detail{ + border:1px solid var(--corruption-accent); + border-left:5px solid var(--corruption-accent); + border-radius:12px; + padding:10px 12px; + background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); } -/* when the checkbox is checked, hide it */ -.sheet-toggle-focus:checked ~ .sheet-focus-section { - display: none; +.sheet-charsheet .sheet-corruption-step-title{ + font-weight:700; + color:var(--corruption-accent) !important; } -/* show the section by default */ -.sheet-quintessence-section { - display: block; + +/* Repeating card stack refresh */ +.sheet-charsheet .repcontainer .repitem, +.sheet-charsheet .repcontainer .itemcontrol { + margin-bottom: 12px; } -/* when the checkbox is checked, hide it */ -.sheet-toggle-quintessence:checked ~ .sheet-quintessence-section { - display: none; +.sheet-charsheet fieldset.repeating_moves, +.sheet-charsheet fieldset.repeating_vmoves, +.sheet-charsheet fieldset.repeating_wmoves, +.sheet-charsheet fieldset.repeating_vdisciplines, +.sheet-charsheet fieldset.repeating_wgifts, +.sheet-charsheet fieldset.repeating_gear, +.sheet-charsheet fieldset.repeating_vgear, +.sheet-charsheet fieldset.repeating_wgear { + margin: 0 0 12px 0; + padding: 0; + border: 0; + background: transparent; } -/* show the section by default */ -.sheet-conditions-section { - display: block; +.sheet-charsheet .sheet-repeat-card { + position: relative; + display: grid; + gap: 10px; + padding: 16px 18px 18px; + border-radius: 18px; + border: 1px solid rgba(255,255,255,.12); + background: + linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 28%), + linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0) 42%), + rgba(7, 8, 13, .72); + box-shadow: + inset 0 1px 0 rgba(255,255,255,.08), + 0 10px 22px rgba(0,0,0,.22); + overflow: hidden; } -/* when the checkbox is checked, hide it */ -.sheet-toggle-conditions:checked ~ .sheet-conditions-section { - display: none; +.sheet-charsheet .sheet-repeat-card::before { + content: ""; + position: absolute; + inset: 0 auto 0 0; + width: 6px; + border-radius: 18px 0 0 18px; + background: rgba(255,255,255,.18); } -/* show the section by default */ -.sheet-spheres-section { - display: block; -} +.sheet-charsheet .sheet-repeat-card--mage::before { background: linear-gradient(180deg, #b85cff, #6d35b4); } +.sheet-charsheet .sheet-repeat-card--vampire::before { background: linear-gradient(180deg, #c22a2a, #6f1111); } +.sheet-charsheet .sheet-repeat-card--werewolf::before { background: linear-gradient(180deg, #6ba64a, #31551f); } -/* when the checkbox is checked, hide it */ -.sheet-toggle-spheres:checked ~ .sheet-spheres-section { - display: none; -} - -/* show the section by default */ -.sheet-experience-section { - display: block; -} - -/* when the checkbox is checked, hide it */ -.sheet-toggle-experience:checked ~ .sheet-experience-section { - display: none; -} - -/* show the section by default */ -.sheet-corruption-section { - display: block; -} - -/* when the checkbox is checked, hide it */ -.sheet-toggle-corruption:checked ~ .sheet-corruption-section { - display: none; -} - -/* show the section by default */ -.sheet-tradition-section { - display: block; -} - -/* when the checkbox is checked, hide it */ -.sheet-toggle-tradition:checked ~ .sheet-tradition-section { - display: none; -} - -/* show the section by default */ -.sheet-seeking-section { - display: block; -} - -/* when the checkbox is checked, hide it */ -.sheet-toggle-seeking:checked ~ .sheet-seeking-section { - display: none; -} - -/* show the section by default */ -.sheet-magemoves-section { - display: block; -} - -/* when the checkbox is checked, hide it */ -.sheet-toggle-magemoves:checked ~ .sheet-magemoves-section { - display: none; -} - -/* show the section by default */ -.sheet-skills-section { - display: block; -} - -/* when the checkbox is checked, hide it */ -.sheet-toggle-skills:checked ~ .sheet-skills-section { - display: none; -} - -/* show the section by default */ -.sheet-backgrounds-section { - display: block; -} - -/* when the checkbox is checked, hide it */ -.sheet-toggle-backgrounds:checked ~ .sheet-backgrounds-section { - display: none; -} - -/* show the section by default */ -.sheet-endmove-section { - display: block; -} - -/* when the checkbox is checked, hide it */ -.sheet-toggle-endmove:checked ~ .sheet-endmove-section { - display: none; -} - -.small-text { font-size: smaller; } - -/* Roll Template container */ -.sheet-rolltemplate-us .sheet-rt-container { - width: 250px; - background: #000; - font-family: 'Special Elite','Helvetica',sans-serif; - font-weight: bold; - color: white; - border: 2px solid #452182; - border-radius: 5px; - padding: 5px; +.sheet-charsheet .sheet-repeat-title-input, +.sheet-charsheet .sheet-repeat-inline-input, +.sheet-charsheet .sheet-repeat-inline-select, +.sheet-charsheet .sheet-roll-stat-select, +.sheet-charsheet .sheet-repeat-description, +.sheet-charsheet .sheet-repeat-tags { + width: 100%; box-sizing: border-box; } -/* Header */ -.sheet-rolltemplate-us .sheet-rt-header { - font-size: 1.5em !important; - padding: 10px 5px 5px !important; - color: #FFD700 !important;/* gold for header */ -} -.sheet-rolltemplate-us .sheet-rt-subtitle { - font-size: 0.8em; - color: #8A2BE2; /* purple for subtitle */ - margin-top: 2px; - border-bottom: 1px solid rgba(255,255,255,0.15); - padding-bottom: 4px; +.sheet-charsheet .sheet-repeat-title-input { + min-height: 42px; + padding: 10px 14px; + border-radius: 12px; + font-size: 18px; + font-weight: 700; + letter-spacing: .02em; } -/* Row layout */ -.sheet-rolltemplate-us .sheet-rt-row { +.sheet-charsheet .sheet-repeat-inline-input, +.sheet-charsheet .sheet-repeat-inline-select, +.sheet-charsheet .sheet-roll-stat-select { + min-height: 38px; + padding: 8px 12px; + border-radius: 10px; +} + +.sheet-charsheet .sheet-repeat-description, +.sheet-charsheet .sheet-repeat-tags { + min-height: 96px; + padding: 12px 14px; + border-radius: 12px; + resize: vertical; +} + +.sheet-charsheet .sheet-repeat-tags { + min-height: 74px; +} + +.sheet-charsheet .sheet-roll-controls { + display: grid; + gap: 8px; + padding: 12px 12px 10px; + margin-right: 34px; + border-radius: 12px; + background: rgba(255,255,255,.05); + border: 1px solid rgba(255,255,255,.08); + width: flex; +} + +.sheet-charsheet .sheet-repeat-roll-btn { + width: flex; +} + +.sheet-charsheet .sheet-repeat-meta-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 10px; + margin-right: 34px; +} + +.sheet-charsheet .sheet-repeat-gear-checks { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 8px; +} + +.sheet-charsheet .sheet-repeat-gear-checks > label { display: flex; - justify-content: space-between; align-items: center; - padding: 4px 5px; - font-size: 1.2em; -} - -/* Row colors */ -.sheet-rolltemplate-us .sheet-will-row .sheet-rt-label { color: #FFD700; } /* gold label */ -.sheet-rolltemplate-us .sheet-paradox-row .sheet-rt-label { color: #8A2BE2; } /* purple label */ - -/* Dice results */ -.sheet-rolltemplate-us .sheet-rt-value .inlinerollresult { - background: transparent; - color: white; /* fallback default */ - border: 2px solid #452182; -} -.sheet-rolltemplate-us .sheet-will-row .inlinerollresult { - color: #FFD700 !important; /* gold result */ - border-color: #FFD700 !important; -} -.sheet-rolltemplate-us .sheet-paradox-row .inlinerollresult { - color: #8A2BE2 !important; /* purple result */ - border-color: #8A2BE2 !important; -} - -/* Results (below rows) */ -.sheet-rolltemplate-us .sheet-rt-result { - margin-top: 6px; - padding: 4px 5px; - font-size: 1em; -} -.sheet-rolltemplate-us .sheet-will-result { color: #FFD700; } -.sheet-rolltemplate-us .sheet-paradox-result { color: #8A2BE2; } -.sheet-rolltemplate-us .sheet-critical { - color: #FFD700; - text-shadow: 0 0 6px #FFD700; - font-weight: bold; -} - -/* ===== SHEET TYPE SWITCHER (Mage / Vampire) — TABS ===== */ -.charsheet .sheet-switcher { - display: contents; - align-items: flex-end; gap: 6px; - margin: 10px 0 0; - flex-wrap: wrap; + padding: 8px 10px; + border-radius: 999px; + background: rgba(255,255,255,.05); + border: 1px solid rgba(255,255,255,.08); } -/* hide radios but keep them functional */ -.charsheet .sheet-tab { - appearance: none; width: 0; height: 0; margin: 0; padding: 0; border: 0; - position: absolute; left: -9999px; -} - -/* tab look — force inline and non-fullwidth against Roll20 defaults */ -.charsheet .sheet-tab-label { - display: inline-flex !important; - width: auto !important; - max-width: none !important; - white-space: nowrap; - align-items: center; - padding: 6px 14px; - margin: 0; /* spacing comes from .sheet-switcher gap */ - border: 1px solid #444; - border-bottom: none; - border-radius: 8px 8px 0 0; - background: #111; - color: #ddd; - cursor: pointer; - user-select: none; - line-height: 1.2; - vertical-align: bottom; -} - -/* active tab */ -.charsheet .sheet-tab-mage:checked + .sheet-tab-label, -.charsheet .sheet-tab-vampire:checked + .sheet-tab-label { - background: #222; - color: #fff; - border-color: #666; - position: relative; -} - -/* blend active tab into the pane */ -.charsheet .sheet-tab-mage:checked + .sheet-tab-label::after, -.charsheet .sheet-tab-vampire:checked + .sheet-tab-label::after { - content: ""; +.sheet-charsheet .sheet-roll-toggle-corner { position: absolute; - left: -1px; right: -1px; bottom: -1px; - height: 1px; - background: #070707; /* matches your .sheet-maindiv background */ + right: 12px; + bottom: 12px; + z-index: 3; } -/* slim rail under tabs */ -.charsheet .sheet-tab-rail { - height: 1px; - background: #444; - margin: 0 0 10px 0; -} - -/* panes / visibility (same logic you already had) */ -.charsheet .sheet-pane { display: none; } -.charsheet .sheet-tab-mage:checked ~ .sheet-mage { display: block; } -.charsheet .sheet-tab-mage:checked ~ .sheet-vampire { display: none; } -.charsheet .sheet-tab-vampire:checked ~ .sheet-vampire { display: block; } -.charsheet .sheet-tab-vampire:checked ~ .sheet-mage { display: none; } - -/* ===== Vampire visual theme hooks ===== */ -:root { - /* in case you want to reuse — Roll20 supports CSS vars */ - --mage-accent: #452182; - --vamp-accent: #a81818; - --vamp-accent-dark: #6e1010; - --vamp-accent-light: #c22a2a; -} - -/* Borders and boxes inside the Vampire pane */ -.charsheet .sheet-vampire .sheet-attr-box, -.charsheet .sheet-vampire .sheet-vampire { - border-color: var(--vamp-accent); -} - -/* Section title image already set — keep it, but tweak text color if desired */ -.charsheet .sheet-vampire .sheet-section-title { - color:#fff; /* stays white on your label image */ -} - -/* Roll buttons inside Vampire pane */ -.ui-dialog .charsheet .sheet-vampire button[type=roll] { - background-color: var(--vamp-accent); - border-color: var(--vamp-accent-dark); - color:#fff; -} -.ui-dialog .charsheet .sheet-vampire button[type=roll]:hover { - background-color: var(--vamp-accent-light) !important; -} -.ui-dialog .charsheet .sheet-vampire button[type=roll]:active { - background-color: var(--vamp-accent-dark) !important; -} - -/* Inputs/textareas in Vampire pane */ -.charsheet .sheet-vampire .sheet-attr-box input[type=text], -.charsheet .sheet-vampire .sheet-attr-box textarea, -.charsheet .sheet-vampire .repitem textarea, -.charsheet .sheet-vampire .sheet-box textarea { - border-color: var(--vamp-accent); - background-color:#0b0b0b; - color: white; - min-width: 100%; -} - -.charsheet .sheet-vampire .sheet-attr-box input[type=text][name="attr_v_physical"] -{ - min-width:35px; - width:35px; -} - -.charsheet .sheet-vampire .sheet-attr-box input[type=text][name="attr_v_social"] -{ - min-width:35px; - width:35px; -} - -.charsheet .sheet-vampire .sheet-attr-box input[type=text][name="attr_v_mental"] -{ - min-width:35px; - width:35px; -} - -/* “Mage” box border */ -.sheet-vampire { - border:2px solid var(--vamp-accent); - border-radius:5px; - padding:6px; -} - -.charsheet .sheet-vampire textarea { - background:#0b0b0b; - color:#f5f5f5; - border-color: var(--vamp-accent); -} - -/* Base style for all hunger boxes */ -.charsheet input[type=checkbox].sheet-hunger { +.sheet-charsheet input.sheet-corner-checkbox[type="checkbox"] { appearance: none; -webkit-appearance: none; - width: 28px; - height: 28px; - border: 2px solid var(--vamp-accent); - border-radius: 3px; - background: #000; + width: 22px; + height: 22px; + margin: 0; + border-radius: 999px; + border: 2px solid rgba(255,255,255,.35); + background: rgba(0,0,0,.35); + box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(0,0,0,.25); cursor: pointer; - position: relative; - margin: 2px; - font-weight: bold; } -/* Default number (unchecked) */ -.charsheet input[type=checkbox].sheet-hunger::after { - color: #777; /* gray when inactive */ - font-size: 16px; +.sheet-charsheet input.sheet-corner-checkbox[type="checkbox"]:checked { + background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.45), rgba(255,255,255,0) 42%), #d9dfe8; + border-color: #ffffff; + box-shadow: 0 0 10px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.45); +} + +.sheet-charsheet input.sheet-corner-checkbox[type="checkbox"]:checked::after { + content: ""; + display: block; + width: 8px; + height: 8px; + margin: 5px auto 0; + border-radius: 999px; + background: rgba(0,0,0,.55); +} + +.sheet-charsheet .sheet-desc, +.sheet-charsheet .sheet-stat { + font-weight: 800; + text-transform: uppercase; + letter-spacing: .06em; + font-size: 11px; + color: #d8dde7; +} + +.sheet-charsheet .sheet-repeat-card textarea, +.sheet-charsheet .sheet-repeat-card input[type="text"], +.sheet-charsheet .sheet-repeat-card select { + background: rgba(0,0,0,.28); + border: 1px solid rgba(255,255,255,.12); + color: #f3f4f6; +} + +.sheet-charsheet .sheet-repeat-card textarea::placeholder, +.sheet-charsheet .sheet-repeat-card input[type="text"]::placeholder { + color: rgba(243,244,246,.55); +} + +@media (max-width: 700px) { + .sheet-charsheet .sheet-repeat-meta-grid, + .sheet-charsheet .sheet-repeat-gear-checks { + grid-template-columns: 1fr; + } +} + + +/* Repeating move rows: only show roll controls when the lower-right checkbox is enabled */ +.sheet-charsheet input.sheet-corner-checkbox.sheet-roll-toggle-corner[type="checkbox"] { position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + right: 12px; + bottom: 12px; + z-index: 3; } -/* Highlighted (checked) */ -.charsheet input[type=checkbox].sheet-hunger:checked::after { - color: #fff; /* bright white text */ - text-shadow: 0 0 6px red; /* glowing effect */ +.sheet-charsheet input.sheet-corner-checkbox.sheet-roll-toggle-corner[type="checkbox"] + .sheet-move-rollbutton { + display: none; } -/*Generation */ -.charsheet input[name="attr_v_gen1"]::after { content:"+1";} -.charsheet input[name="attr_v_gen1"]:checked::after { content: "+1"; } -.charsheet input[name="attr_v_gen2"]::after { content:"+2";} -.charsheet input[name="attr_v_gen2"]:checked::after { content: "+2"; } -.charsheet input[name="attr_v_gen3"]::after { content:"+3";} -.charsheet input[name="attr_v_gen3"]:checked::after { content: "+3"; } - -/* Hunger 1 */ -.charsheet input[name="attr_v_hunger1"]::after { content: "-3"; } -.charsheet input[name="attr_v_hunger1"]:checked::after { content: "-3"; } - -/* Hunger 2 */ -.charsheet input[name="attr_v_hunger2"]::after { content: "-2"; } -.charsheet input[name="attr_v_hunger2"]:checked::after { content: "-2"; } - -/* Hunger 3 */ -.charsheet input[name="attr_v_hunger3"]::after { content: "-1"; } -.charsheet input[name="attr_v_hunger3"]:checked::after { content: "-1"; } - -/* Hunger 4 */ -.charsheet input[name="attr_v_hunger4"]::after { content: "0"; } -.charsheet input[name="attr_v_hunger4"]:checked::after { content: "0"; } - -/* Hunger 5 */ -.charsheet input[name="attr_v_hunger5"]::after { content: "+1"; } -.charsheet input[name="attr_v_hunger5"]:checked::after { content: "+1"; } - -/* Hunger 6 */ -.charsheet input[name="attr_v_hunger6"]::after { content: "+1"; } -.charsheet input[name="attr_v_hunger6"]:checked::after { content: "+1"; } - -/* Hunger 7 */ -.charsheet input[name="attr_v_hunger7"]::after { content: "+2"; } -.charsheet input[name="attr_v_hunger7"]:checked::after { content: "+2"; } - -/* Hunger 8 */ -.charsheet input[name="attr_v_hunger8"]::after { content: "+3"; } -.charsheet input[name="attr_v_hunger8"]:checked::after { content: "+3"; } - - -/* Header bar (if you want a slightly redder feel only for Vampire) */ -.charsheet .sheet-vampire .sheet-header { background-color:#0b0b0b; } /* subtle */ - -/* layout */ -.sheet-hunger-row { display:flex; gap:6px; } - -/* hide the native radio, style the span as the box */ -.sheet-hunger input[type=radio] { position:absolute; opacity:0; } -.sheet-hunger span { - display:inline-block; - min-width:28px; text-align:center; - padding:4px 6px; border:2px solid var(--vamp-accent); - border-radius:4px; - background:#0b0b0b; color:#fff; font-weight:bold; - user-select:none; cursor:pointer; +.sheet-charsheet input.sheet-corner-checkbox.sheet-roll-toggle-corner[type="checkbox"]:checked + .sheet-move-rollbutton { + display: grid; } -/* highlight when selected */ -.sheet-hunger input[type=radio]:checked + span { - background: var(--vamp-accent); - border-color: var(--vamp-accent-dark); - box-shadow: 0 0 6px rgba(162, 24, 24, 0.6); -} \ No newline at end of file +/* Repeating move names switch to the display font once they are filled in */ +.sheet-charsheet .sheet-repeat-title-input:not(:placeholder-shown) { + font-family: 'Special Elite', ui-serif, Georgia, serif !important; + font-weight: 700; + letter-spacing: .03em; +} + +.sheet-charsheet .sheet-repeat-title-input::placeholder { + font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif !important; + letter-spacing: normal; +} + +.sheet-charsheet .sheet-repeat-roll-btn, +.sheet-charsheet .sheet-repeat-roll-btn span[name="attr_classmovename"], +.sheet-charsheet .sheet-repeat-roll-btn span[name="attr_vclassmovename"], +.sheet-charsheet .sheet-repeat-roll-btn span[name="attr_w_movename"] { + font-family: 'Special Elite', ui-serif, Georgia, serif; +} + + +/* === Repeating sections refreshed to match sample card-stack style more closely === */ +.sheet-charsheet fieldset.repeating_moves .repcontainer, +.sheet-charsheet fieldset.repeating_vmoves .repcontainer, +.sheet-charsheet fieldset.repeating_wmoves .repcontainer, +.sheet-charsheet fieldset.repeating_vdisciplines .repcontainer, +.sheet-charsheet fieldset.repeating_wgifts .repcontainer { + display: grid; + gap: 14px; +} + +.sheet-charsheet .repcontainer .repitem { + position: relative; +} + +.sheet-charsheet .sheet-repeat-card { + gap: 12px; + padding: 16px 16px 14px 18px; + border-radius: 18px; + border: 1px solid rgba(75, 82, 105, .85); + background: + linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), + linear-gradient(180deg, rgba(26,28,36,.96), rgba(32,35,48,.96)); + box-shadow: 0 18px 40px rgba(0,0,0,.28); +} + +.sheet-charsheet .sheet-repeat-card::after { + content: ""; + position: absolute; + inset: 0; + border-radius: 18px; + pointer-events: none; + box-shadow: inset 0 1px 0 rgba(255,255,255,.06); +} + +.sheet-charsheet .sheet-repeat-card--mage::before { background: #b85cff; } +.sheet-charsheet .sheet-repeat-card--vampire::before { background: #c22a2a; } +.sheet-charsheet .sheet-repeat-card--werewolf::before { background: #6ba64a; } + +.sheet-charsheet .sheet-repeat-title-input { + min-height: 44px; + padding: 10px 14px; + padding-right: 42px; + border-radius: 13px; + border: 1px solid rgba(95,102,128,.9) !important; + background: rgba(255,255,255,.035) !important; + box-shadow: none; + font-size: 17px; + line-height: 1.2; +} + +.sheet-charsheet .sheet-repeat-inline-input, +.sheet-charsheet .sheet-repeat-inline-select, +.sheet-charsheet .sheet-roll-stat-select { + min-height: 40px; + border-radius: 12px; + border: 1px solid rgba(75,82,105,.9) !important; + background: rgba(15,17,24,.9) !important; +} + +.sheet-charsheet .sheet-desc, +.sheet-charsheet .sheet-stat, +.sheet-charsheet .sheet-repeat-meta-grid .sheet-improvement { + display: inline-flex; + align-items: center; + width: fit-content; + padding: 4px 9px; + border-radius: 999px; + border: 1px solid rgba(75,82,105,.9); + background: rgba(255,255,255,.04); + color: #aeb7c8 !important; + font-size: 10px !important; + font-weight: 700; + letter-spacing: .08em; + text-transform: uppercase; +} + +.sheet-charsheet .sheet-repeat-description, +.sheet-charsheet .sheet-repeat-tags { + min-height: 88px; + border-radius: 14px; + border: 1px solid rgba(255,255,255,.05) !important; + background: rgba(0,0,0,.18) !important; + color: #d7d7e3; +} + +.sheet-charsheet .sheet-roll-controls { + gap: 8px; + padding: 12px 13px; + margin-right: 36px; + border-radius: 14px; + background: rgba(255,255,255,.03); + border: 1px solid rgba(75,82,105,.9); +} + +.sheet-charsheet .sheet-repeat-meta-grid { + gap: 12px; + margin-right: 36px; +} + +.sheet-charsheet .sheet-repeat-roll-btn { + min-height: 40px; + border-radius: 12px; + border: 1px solid rgba(75,82,105,.9); + background: #0f1118; + color: #eceaf7; + box-shadow: none; +} + +.sheet-charsheet .sheet-repeat-roll-btn:hover { + filter: brightness(1.06); +} + +.sheet-charsheet input.sheet-corner-checkbox[type="checkbox"] { + width: 20px; + height: 20px; + border-radius: 6px; + border: 1px solid rgba(75,82,105,.95); + background: rgba(255,255,255,.03); + box-shadow: none; +} + +.sheet-charsheet input.sheet-corner-checkbox[type="checkbox"]:checked { + background: rgba(236,234,247,.92); + border-color: rgba(236,234,247,.95); + box-shadow: 0 0 0 2px rgba(255,255,255,.06); +} + +.sheet-charsheet input.sheet-corner-checkbox[type="checkbox"]:checked::after { + width: 8px; + height: 8px; + margin-top: 5px; + border-radius: 3px; +} + +.sheet-charsheet .repcontrol { + margin-top: 10px; +} + +.sheet-charsheet .repcontrol .btn, +.sheet-charsheet .repcontrol button { + border-radius: 12px; + border: 1px solid rgba(75,82,105,.9); + background: #0f1118; + color: #eceaf7; + box-shadow: none; + padding: 8px 12px; +} + +.sheet-charsheet .repcontrol .btn:hover, +.sheet-charsheet .repcontrol button:hover { + filter: brightness(1.08); +} + +.sheet-charsheet .sheet-repeat-head { + display: grid; + gap: 10px; +} + +.sheet-charsheet .sheet-repeat-pillbar, +.sheet-charsheet .sheet-repeat-tagrow { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.sheet-charsheet .sheet-repeat-pill-input { + width: auto !important; + min-width: 90px; + max-width: 180px; + height: 30px; + padding: 4px 10px; + border-radius: 999px !important; + border: 1px solid rgba(75,82,105,.9) !important; + background: rgba(255,255,255,.04) !important; + font-size: 11px !important; + text-transform: uppercase; + letter-spacing: .06em; + box-shadow: none !important; +} + +.sheet-charsheet input.sheet-repeat-pill-input { + color: #757a8a !important; + -webkit-text-fill-color: #757a8a; +} + +.sheet-charsheet .sheet-repeat-pill-input::placeholder { + color: rgba(213,216,228,.25); +} + +.sheet-charsheet .sheet-repeat-pill-tag { + background: rgba(255,255,255,.05) !important; +} + +.sheet-charsheet .sheet-repeat-head .sheet-repeat-title-input { + margin-bottom: 0; +} + +.sheet-charsheet .sheet-repeat-desc-block { + position: relative; + display: grid; + gap: 8px; +} + +.sheet-charsheet .sheet-repeat-desc-head { + display: inline-block; + width: fit-content; + position: relative; +} + +.sheet-charsheet .sheet-repeat-desc-pill { + cursor: pointer; + user-select: none; + transition: background .2s ease, color .2s ease, border-color .2s ease; +} + +.sheet-charsheet .sheet-repeat-desc-toggle { + position: absolute; + top: 0; + left: 0; + width: 120px; /* adjust if needed */ + height: 24px; /* adjust to match your pill height */ + opacity: 0; + cursor: pointer; + z-index: 2; + margin: 0; +} + +.sheet-charsheet .sheet-repeat-desc-toggle:not(:checked) ~ .sheet-repeat-description { + display: none; +} + +.sheet-charsheet .sheet-repeat-desc-toggle:checked ~ .sheet-repeat-desc-head .sheet-repeat-desc-pill { + color: #f3f4f6 !important; + border-color: rgba(184,92,255,.9); + background: rgba(184,92,255,.16); +} diff --git a/MageWillvsParadoxSheet/magewillvsparadox.html b/MageWillvsParadoxSheet/magewillvsparadox.html index e236259ca9..2e0956e0a5 100644 --- a/MageWillvsParadoxSheet/magewillvsparadox.html +++ b/MageWillvsParadoxSheet/magewillvsparadox.html @@ -1,1281 +1,2718 @@ -
- -
- - +
+ +
+ + - - + + -
+ + - -
+
-
- -
- Mage: Will vs Paradox Logo -
- - - -
- - -
- - +
- - - - -
-
-
- -
-
-
-
- - -
- - - - - - - -
-
-
- -
-
-
-
- - -
- - - - - - - -
-
- - -
- - - -
- -
- -
- - -
-
- -
- - -
- -
- -
- -
-
-
- -
- - -
- -
- -
- -
-
-
- -
- - -
- -
- - -
-
-
-
-
- -
- - - - - - - -
-
-
- -

- - - - -
- - -
- -
-
-
- - - -
- -
-
-
- -
- - - - - - - -
- -
-
-
    -
    -

    • -
      -
      • -
      • -
      • -
      • -
    -
    -
    -

    • -
      -
      • -
      • -
      • -
      • -
    -
    -
    -

    • -
      -
      • -
      • -
      • -
      • -
    -
    -
    -

    • -
      -
      • -
      • -
      • -
      • -
    -
    -
    -

    • -
      -
      • -
      • -
      • -
      • -
    -
    -
    -

    • -
      -
      • -
      • -
      • -
      • -
    -
    -
    -

    • -
      -
      • -
      • -
      • -
      • -
    -
    -
    -

    • -
      -
      • -
      • -
      • -
      • -
    -
    -
    -

    • -
      -
      • -
      • -
      • -
      • -
    -
    -
-
-
-
-
- -
- - - - - - - -
- -
-
-
    -
    -

    • -
    -
    -

    • -
    -
    -

    • -
    -
    -

    • -
    -
    -

    • -
    -
    -

    • -
    -
    -

    • -
    -
    -

    • -
    -
-
-
-
-
- -
- - - - - - - -
-
-
- -
-
-
-
- -
- - - - - - - -
-
-
-
- -
-
-
- - -
- - - - - - - -
-
-
- - - - - -
-
-
-
-
- -
- - - - - - - -
+
-
-
- -
- -
- - - - -
-
-
-
-
-
    -
  • -
    - - - -
    -
    • -
  • -
    - - - -
    -
    • -
  • -
    - - - -
    -
    • -
  • -
    - - - -
    -
    • -
-
-
    -
  • -
    - - - -
    -
    • -
  • -
    - - - -
    -
    • -
  • -
    - - - -
    -
    • -
-
-
    -
  • -
    - - - -
    -
    • -
  • -
    - - - -
    -
    • -
  • -
    - - - -
    -
    • -
-
- -
-
-
-
- -
- - +
+ + Character Avatar +
- - - -
- - -
-
- -
    -
    -

    • -
      -
      • -
      • -
      • -
      • -
    -
    -
    -

    • -
      -
      • -
      • -
      • -
      • -
    -
    -
    -

    • -
      -
      • -
      • -
      • -
      • -
    -
    -
    -

    • -
      -
      • -
      • -
      • -
      • -
    -
    -
    -

    • -
      -
      • -
      • -
      • -
      • -
    -
    -
    -

    • -
      -
      • -
      • -
      • -
      • -
    -
    -
    -

    • -
      -
      • -
      • -
      • -
      • -
    -
    -
    -

    • -
      -
      • -
      • -
      • -
      • -
    -
    -
    -

    • -
      -
      • -
      • -
      • -
      • -
    -
    -
-
-
-
-
- -
- - - - - - - -
-
-
-
- - - - -
-
-
-
-
- -
-

    • -
      -
      • -
      • -
      • -
      • -
      • -
      • -
    -
    -
    -

    • -
      -
      • -
      • -
      • -
      • -
    -
    -

    • -
      -
      • -
      • -
      • -
      • -
      • -
    -
    -
    -
    -
    -
    - -
    - - - - - - - -
    -
    -
    - -

    - - - - - - - -

    +
    + +
    - -
    -
      -
      -

      • -
      -
      -

      • -
      -
      -

      • -
      -
      -

      • -
      -
      -

      • -
      -
    -
    -
    -
    -
    -
      -
      -

      • -
      -
      -

      • -
      -
      -

      • -
      -
      -

      • -
      -
    -
    -
    -
    -
    -
    - -
    - - +
    - - + - -
    -
    -
    -
    - + + + + +
    +
    +
    + +
    +
    +
    +
    + + +
    + + + + + + + +
    +
    +
    + +
    +
    +
    +
    + + +
    + + + + + + + +
    +
    + + +
    + +
    + +
    + + +
    +
    + +
    + + +
    + +
    + +
    + +
    +
    +
    + +
    + + +
    + +
    + +
    + +
    +
    +
    + +
    + + +
    + +
    + + +
    +
    +
    +
    + +
    + + + + + + + +
    +
    +
    +
    +
    + + +
    + + + +
    +
    + + + +
    + + + +
    + +
    + + +
    + Description +
    + + +
    + +
    + + + + +
    +
    +
    + +
    +
    +
    + +
    + + + + + + + +
    + +
    +
      -
      -

      • -
      -
      -

      • -
      -
      -

      • -
      -
      -

      • -
      -
      -

      • -
      -
      -

      • -
      -
      -

      • -
      -
      -

      • -
      -
      -

      • -
      -
      -

      • -
      +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
    -
    -
    -
    -
    - +
    +
    +
    + + +
    + + + + + + + +
    + +
    +
    +
      +

      • +

      • +

      • +

      • +

      • +

      • +

      • +

      • +
    +
    +
    +
    +
    + +
    + + + + + + + +
    +
    +
    + +
    +
    +
    +
    + +
    + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    + + +
    + +
    + + + + + + + +
    + + + + + + +
    +
    +
    + +
    + + + + + + + +
    + +
    +
    + +
    + +
    +
    + + + + + + + + + + +
    +
    +
    + +
    +
      +
    • +
      + + + +
      +
      • +
    • +
      + + + +
      +
      • +
    • +
      + + + +
      +
      • +
    • +
      + + + +
      +
      • +
    +
    +
      +
    • +
      + + + +
      +
      • +
    • +
      + + + +
      +
      • +
    • +
      + + + +
      +
      • +
    +
    +
      +
    • +
      + + + +
      +
      • +
    • +
      + + + +
      +
      • +
    • +
      + + + +
      +
      • +
    +
    + +
    +
    +
    +
    + +
    + + + + + + + +
    + + +
    +
    + +
      +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +
    +
    +
    +
    +
    + +
    + + + + +
    +
    +
    +
    +
    Advance Ladder
    +
    Experience & Advancement
    +
    +
    5 XP = Advance
    +
    + +
    + + + + + + + + +
    + + + + + + + + + + + +
    + +
    +
    +
    + Step 1 — Earn XP + each session +
    +
    Gain 1 XP at the end of every session. Gain +1 more if you failed a roll or received a condition.
    +
    + +
    +
    + Step 2 — Spend 5 XP + take an advance +
    +
    Clear the XP bar, then mark one advancement reward below.
    +
    + +
    +
    + Step 3 — Every 3rd Advance + major milestone +
    +
    Use a major advancement instead of a normal one, then select the next advanced move in order.
    +
    +
    +
    + +
    + +
    +
    + +
      +
      • +
      • +
      • +
      • +
      • +
      • +
    +
    + +
    + +
      +
      • +
      • +
      • +
      • +
    +
    + +
    + +
      +
      • +
      • +
      • +
      • +
      • +
    +
    +
    +
    +
    +
    + +
    + + +
    +
    +
    +
    Mage / Corruption
    +
    Vulgar Power Dashboard
    +
    Corruption Moves are always available. Every one is vulgar magick and always adds +1 Scene Paradox.
    +
    +
    Track
    + + + + + +
    +
    + +
    +
    Track5 marks before an Unleash Paradox result.
    +
    ThemePower without restraint; reality pushes back.
    +
    + +
    +
    SorceryMark Corruption to make a Change permanently immune to Paradox. It will not unravel.
    +
    Latent PowerMark Corruption to use a practice you do not have from one of your Spheres.
    +
    DevastationMark Corruption to create a powerful change as if you had rolled a critical on Change Reality.
    +
    The Dark ArtsMark Corruption and take the Bleeding Condition to gain 1d6 Quintessence.
    +
    + +
    +
    Escalation
    + + + + + +
    +
    +
    +
    + +
    + + + + + + + +
    +
    +
    +
    + +
      +

      • +

      • +

      • +

      • +

      • +

      • +

      • +

      • +

      • +

      • +
    +
    +
    +
    +
    +
    + +
    + + + + + + + +
    +
    +
    + +
    +
    +
    +
    + +
    + + + + + + +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    + + + + + +
    + + + + +
    +
    +
    +
    + + + + +
    +
    +
    +
    + + + +
    +
    + + +
    +
    + +
    + + -
    - - +
    - - +
    + +
    + + Character Avatar +
    - -
    -
    -
    - -
    -
    -
    -
    +
    +
    + +
    + + + +
    +
    +
    + +
    +
    +
    +
    + +
    + + + +
    +
    +
    + +
    +
    +
    +
    + +
    + + + +
    +
    + + +
    + +
    + +
    + + +
    +
    + +
    + + +
    + +
    + + +
    +
    + +
    + + +
    + +
    + + +
    +
    + +
    + + + + +
    +
    +
    + +
    + + + + + + + +
    +
    +
    +
    +
    + + +
    + + + +
    +
    + + + +
    + + + +
    + +
    + + +
    + Description +
    + + +
    + +
    + + + + +
    +
    +
    + +
    +
    +
    + +
    + + + + + + + +
    + +
    +
    +
      +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +
    +
    +
    +
    +
    + +
    +
    + +
    + + + + + + + +
    + +
    +
    +
      +

      • +

      • +

      • +

      • +

      • +

      • +

      • +

      • +
    +
    +
    +
    +
    + +
    + + + +
    +
    + + + + + + + + +
    +
    +
    + +
    + + +
    +
    +
    +
    Vampire / Corruption
    +
    Beast Pressure Dashboard
    +
    Use this panel to track Beast pressure, degeneration, frenzy risk, or whatever corruption rules your chronicle uses for vampires.
    +
    +
    Track
    + + + + + +
    +
    + +
    +
    Track5 marks before the Beast leaves a lasting scar.
    +
    ThemeHunger, predation, frenzy, and loss of self.
    +
    + +
    +
    Blood SurgePush past mortal limits by leaning into the Beast.
    +
    Predator's SmileUse fear, fascination, or menace to dominate the weak-willed.
    +
    Sanguine RecoveryHeal, endure, or persist through monstrous feeding.
    +
    Ravenous FeedingFeed too hard, too fast, or too openly to secure a result.
    +
    + +
    +
    Escalation
    + + + +
    +
    +
    +
    + +
    + + + +
    +
    +
    +
    +
    Advance Ladder
    +
    Experience & Advancement
    +
    +
    5 XP = Advance
    +
    + +
    + + + + + + + + +
    + + + + + + + + + + + +
    + +
    +
    +
    + Step 1 — Earn XP + each session +
    +
    Gain 1 XP at the end of every session. Gain +1 more if you failed a roll or received a condition.
    +
    + +
    +
    + Step 2 — Spend 5 XP + take an advance +
    +
    Clear the progress bar after you spend the XP, then mark your chosen vampire advancement below.
    +
    + +
    +
    + Step 3 — Track Growth + chronicle notes +
    +
    Use the checklist and notes area to record your disciplines, corruption options, or custom chronicle rewards.
    +
    +
    +
    + +
    + +
    +
    + +
      +
      • +
      • +
      • +
      • +
      • +
      • +
    +
    + +
    + + +
    +
    +
    +
    +
    + +
    + + +
    +
    +
    + +
    + +
    +
    + + + + + + + + + + +
    +
    +
    +
    +
      +
    • +
      + + + +
      +
      • +
    • +
      + + + +
      +
      • +
    • +
      + + + +
      +
      • +
    • +
      + + + +
      +
      • +
    +
    +
      +
    • +
      + + + +
      +
      • +
    • +
      + + + +
      +
      • +
    • +
      + + + +
      +
      • +
    +
    +
      +
    • +
      + + + +
      +
      • +
    • +
      + + + +
      +
      • +
    • +
      + + + +
      +
      • +
    +
    + +
    +
    +
    +
    + +
    + + + +
    +
    +
    + +
      +

      • +

      • +

      • +

      • +

      • +

      • +

      • +

      • +

      • +

      • +

      • +

      • +

      • +
    +
    +
    +
    +
    + +
    +
    + + +
    + + +
    +
    +
    +
    + + +
    + +
    + +
    + + + +
    + + +
    +
    +
    +
    +
    + + + + +
    +
    +
    +
    + + + + +
    +
    +
    +
    + + + + + + + -
    - - +
    - - - -
    -
    -
    -
    -
    -
    -
    -
    - - +
    +
    + + Character Avatar +
    - +
    + + +
    +
    +
    + +
    +
    +
    +
    - +
    + + +
    +
    +
    + +
    +
    +
    +
    -
    - - +
    + + +
    +
    +
    + +
      +

      • +

      • +

      • +

      • +

      • +

      • +

      • +

      • +

      • +

      • +

      • +

      • +

      • +

    - -
    -
    -
    -
    -
    - - - - -
    -
    -
    -
    + +
      +

      • +

      • +

      • +

    + + +
      +

      • +

      • +

      • +

      • +

      • +
    +
    +
    +
    +
    + +
    + + +
    + +
    + + +
    + +
    + +
    + + +
    +
    + +
    + + +
    + +
    + +
    + + +
    +
    + +
    + + +
    + +
    + +
    + + +
    +
    + +
    + + +
    + + +
    +
    +
    +
    + +
    + + +
    +
    +
    +
    + + + + +
    + +
    +
    +
    +
    + +
    + + +
    +
    +
    +
      +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +

    • +
        +
        • +
        • +
        • +
        • +
      +
      • +
    +
    +
    +
    +
    + +
    + + +
    +
    +
    +
      +

      • +

      • +

      • +

      • +

      • +

      • +
    +
    +
    +
    +
    + + +
    + + +
    +
    +
    +
    +
    + + +
    + + + +
    +
    + + + +
    + + + +
    + +
    + + +
    + Description +
    + + +
    + +
    + + + + +
    +
    +
    +
    +
    +
    + +
    + + +
    +
    +
    + +
    + +
    +
    + + + + + + + + + + +

    +
    +
    +
    +
    +
      +
    • +
      + + + +
      +
      • +
    • +
      + + + +
      +
      • +
    • +
      + + + +
      +
      • +
    • +
      + + + +
      +
      • +
    + +
    +
      +
    • +
      + + + +
      +
      • +
    • +
      + + + +
      +
      • +
    • +
      + + + +
      +
      • +
    + +
    +
      +
    • +
      + + + +
      +
      • +
    • +
      + + + +
      +
      • +
    • +
      + + + +
      +
      • +
    + +
    + +
    +
    +
    +
    + +
    + + + +
    +
    +
    +
    +
    Advance Ladder
    +
    Experience & Advancement
    +
    +
    5 XP = Advance
    +
    + +
    + + + + + + + + +
    + + + + + + + + + + + +
    + +
    +
    +
    + Step 1 — Earn XP + each session +
    +
    Gain 1 XP at the end of every session. Gain +1 more if you failed a roll or received a condition.
    +
    + +
    +
    + Step 2 — Spend 5 XP + take an advance +
    +
    Clear the progress bar after you spend the XP, then mark the advancement reward you chose.
    +
    + +
    +
    + Step 3 — Every 3rd Advance + major milestone +
    +
    Take one of the major advancement options instead of a normal one every third time you advance.
    +
    +
    +
    + +
    + +
    +
    + +
      +
      • +
      • +
    +
    + +
    + +
      +
      • +
      • +
      • +
      • +
      • +
      • +
    +
    +
    +
    +
    +
    + +
    + + +
    +
    +
    +
    Werewolf / Corruption
    +
    Wyrm Taint Dashboard
    +
    Garou mark Corruption when siding with the Wyrm, failing Gaia in meaningful ways, or when the GM says the Wyrm has left a real stain.
    +
    +
    Track
    + + + + + +
    +
    + +
    +
    Track5 marks before the Wyrm claims the Garou.
    +
    ThemeSpiritual contamination, guilt, and inevitable fall.
    +
    + +
    +
    Make a Dark BargainAccept aid, passage, or knowledge from a Wyrm-tainted source.
    +
    Defile GaiaPollute, desecrate, or harm the world you are meant to defend.
    +
    Spare the RotLet corruption live when you truly had the chance to stop it.
    +
    GM PressureCorruption may be assigned when the Wyrm gets its hooks in.
    +
    + +
    +
    Note:
    +
    +
    +
    + Sense the Taint + Sense Wyrm +
    +
    The Wyrm always lingers. Garou with Sense Wyrm can smell Corruption in the scene and track the source.
    +
    + +
    +
    + Repentence + Removing Corruption +
    +
    Removing the stain should take a rite, or serious story effort.
    +
    + +
    +
    + Track Full + major milestone +
    +
    The Garou succumbs to the Wyrm and becomes a Black Spiral Dancer.
    +
    +
    +
    +
    +
    +
    + +
    + + +
    +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + +
    + +
    + +
    + + + +
    + + +
    +
    +
    +
    +
    + +
    + + +
    +
    +
    +
    + + + + + +
    + + + +
    +
    +
    +
    +
    +
    + + + + + +
    +
    - -
    -
    - - -
    -
    - - - - - -
    - -
    - -
    - Vampire Logo -
    - -
    - -
    - - - -
    -
    -
    - -
    -
    -
    -
    - -
    - - - -
    -
    -
    - -
    -
    -
    -
    - -
    - - - -
    -
    - - - -
    - - -
    - - - -
    -
    - -
    - - -
    - - -
    -
    - -
    - - -
    - - -
    -
    - -
    - - - - -
    -
    -
    -
    - -
    - - - -
    -

    - - - -
    - - - - - - - - -
    - -
    -
    -
    - -
    - - - -
    -
    -
    - - -
    -
    -
    -
    - -
    - - - - -
    -
    -
    - -

    - -
    -
    -
    -
    - - -
    -
    -
    - - - - -
    -
    -
    -
    -
    - -

    - - -
    -
    -
    -
    -
    - - - - - -
    - -
    - - - -
    -
    - {{name}} - {{#roll_name}}
    {{roll_name}}
    {{/roll_name}} +
    +
    +
    {{name}}
    + {{#roll_name}}
    {{roll_name}}
    {{/roll_name}}
    -
    - Will - {{die1}} -
    -
    - Paradox - {{die2}} -
    + {{#rollGreater() computed::critflag 0}} +
    +
    +
    Will
    +
    + {{computed::willkept}} + {{#rollGreater() computed::willbonus 0}} + {{computed::willbonus}}{{/rollGreater() computed::willbonus 0}} + {{#rollLess() computed::willbonus 0}} - {{computed::willbonusabs}}{{/rollLess() computed::willbonus 0}} + {{#rollGreater() computed::willbonus2 0}} + {{computed::willbonus2}}{{/rollGreater() computed::willbonus2 0}} + {{#rollLess() computed::willbonus2 0}} - {{computed::willbonus2abs}}{{/rollLess() computed::willbonus2 0}} + = {{computed::die1}} +
    +
    - - - {{#rollTotal() willraw pararaw}} -
    Critical!
    - {{/rollTotal() willraw pararaw}} + {{#rollTotal() computed::critflag 0}} + {{#rollGreater() computed::die1 computed::die2}} +
    +
    +
    Will
    +
    + {{computed::willkept}} + {{#rollGreater() computed::willbonus 0}} + {{computed::willbonus}}{{/rollGreater() computed::willbonus 0}} + {{#rollLess() computed::willbonus 0}} - {{computed::willbonusabs}}{{/rollLess() computed::willbonus 0}} + {{#rollGreater() computed::willbonus2 0}} + {{computed::willbonus2}}{{/rollGreater() computed::willbonus2 0}} + {{#rollLess() computed::willbonus2 0}} - {{computed::willbonus2abs}}{{/rollLess() computed::willbonus2 0}} + = {{computed::die1}} +
    +
    - {{#is_arete}} - {{#rollTotal() willraw pararaw}} -
    Gain 1 Quintessence
    - {{/rollTotal() willraw pararaw}} - {{/is_arete}} +
    +
    {{opp_label}}
    +
    + {{#rollGreater() computed::oppbonus 0}} + {{computed::oppraw}} + {{computed::oppbonus}} = {{computed::die2}} + {{/rollGreater() computed::oppbonus 0}} + {{#rollTotal() computed::oppbonus 0}} + {{computed::oppraw}} + {{/rollTotal() computed::oppbonus 0}} +
    +
    +
    +
    SUCCESS
    + {{/rollGreater() computed::die1 computed::die2}} + + {{#rollLess() computed::die1 computed::die2}} +
    +
    +
    Will
    +
    + {{computed::willkept}} + {{#rollGreater() computed::willbonus 0}} + {{computed::willbonus}}{{/rollGreater() computed::willbonus 0}} + {{#rollLess() computed::willbonus 0}} - {{computed::willbonusabs}}{{/rollLess() computed::willbonus 0}} + {{#rollGreater() computed::willbonus2 0}} + {{computed::willbonus2}}{{/rollGreater() computed::willbonus2 0}} + {{#rollLess() computed::willbonus2 0}} - {{computed::willbonus2abs}}{{/rollLess() computed::willbonus2 0}} + = {{computed::die1}} +
    +
    + +
    +
    {{opp_label}}
    +
    + {{#rollGreater() computed::oppbonus 0}} + {{computed::oppraw}} + {{computed::oppbonus}} = {{computed::die2}} + {{/rollGreater() computed::oppbonus 0}} + {{#rollTotal() computed::oppbonus 0}} + {{computed::oppraw}} + {{/rollTotal() computed::oppbonus 0}} +
    +
    +
    +
    + FAILURE + {{#rollGreater() computed::ragegainflag 0}} +
    +1 Rage
    + {{/rollGreater() computed::ragegainflag 0}} +
    + {{/rollLess() computed::die1 computed::die2}} + + {{#rollTotal() computed::die1 computed::die2}} +
    +
    +
    Will
    +
    + {{computed::willkept}} + {{#rollGreater() computed::willbonus 0}} + {{computed::willbonus}}{{/rollGreater() computed::willbonus 0}} + {{#rollLess() computed::willbonus 0}} - {{computed::willbonusabs}}{{/rollLess() computed::willbonus 0}} + {{#rollGreater() computed::willbonus2 0}} + {{computed::willbonus2}}{{/rollGreater() computed::willbonus2 0}} + {{#rollLess() computed::willbonus2 0}} - {{computed::willbonus2abs}}{{/rollLess() computed::willbonus2 0}} + = {{computed::die1}} +
    +
    + +
    +
    {{opp_label}}
    +
    + {{#rollGreater() computed::oppbonus 0}} + {{computed::oppraw}} + {{computed::oppbonus}} = {{computed::die2}} + {{/rollGreater() computed::oppbonus 0}} + {{#rollTotal() computed::oppbonus 0}} + {{computed::oppraw}} + {{/rollTotal() computed::oppbonus 0}} +
    +
    +
    +
    SUCCESS
    + {{/rollTotal() computed::die1 computed::die2}} + {{/rollTotal() computed::critflag 0}}
    -
    \ No newline at end of file + + \ No newline at end of file diff --git a/MageWillvsParadoxSheet/magewillvsparadox.png b/MageWillvsParadoxSheet/magewillvsparadox.png index d17abd5f5d..be6d7996f4 100644 Binary files a/MageWillvsParadoxSheet/magewillvsparadox.png and b/MageWillvsParadoxSheet/magewillvsparadox.png differ diff --git a/MageWillvsParadoxSheet/sheet.json b/MageWillvsParadoxSheet/sheet.json index d4d321729d..e8dc319593 100644 --- a/MageWillvsParadoxSheet/sheet.json +++ b/MageWillvsParadoxSheet/sheet.json @@ -4,6 +4,6 @@ "authors": "Faustian Deal", "roll20userid": "224458", "preview": "magewillvsparadox.png", - "instructions": "Character sheet for Mage Will vs. Paradox \n\n [Game Documentation](https://faustiangames.com/mage-wod-willvsparadox/)", + "instructions": "Character sheet for Mage Will vs. Paradox \n\n [Game Documentation](https://faustiangames.com/wp-content/uploads/2025/08/Mage-v1.8-WoD-WillvsParadox.pdf)", "legacy": false } \ No newline at end of file