:root{
  --night:#150d08; --walnut:#24150d; --walnut2:#3b2416; --ink:#2b211b;
  --paper:#fffaf0; --paper2:#f7eddc; --cream:#f3e7d2;
  --gold:#b9852d; --gold2:#dfbf78; --amber:#d98d31; --moss:#526640;
  --burgundy:#773b3b; --navy:#36485d; --plum:#60435f;
  --line:rgba(66,43,26,.22); --line2:rgba(66,43,26,.4);
  --accent:#526640; --accentDark:#334228; --accentSoft:#edf0e7;
  --accent2:#62b7b2; --accent3:#d1aa55;
  --themeGlow:rgba(82,102,64,.24); --themeGlow2:rgba(98,183,178,.18);
  --themeSurface:#fffaf0; --themeDeep:#263421;
  --themePattern:rgba(82,102,64,.055); --themePageWash:rgba(82,102,64,.10);
  --shadow:0 20px 60px rgba(12,7,4,.38),0 4px 15px rgba(12,7,4,.24);
  --display:Georgia,'Iowan Old Style','Palatino Linotype',serif;
  --body:'Avenir Next','Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{max-width:100%;overflow-x:hidden;overflow-x:clip;background:var(--night);-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:light}
body{margin:0;min-width:0;max-width:100%;overflow-x:hidden;overflow-x:clip;background:
  radial-gradient(circle at 18% -10%,var(--themeGlow),transparent 34rem),
  radial-gradient(circle at 82% 8%,var(--themeGlow2),transparent 30rem),
  linear-gradient(180deg,color-mix(in srgb,var(--themeDeep) 54%,#24160e),#120b07 70%);color:var(--ink);font-family:var(--body);transition:background .45s ease}
button,input,select,textarea{font:inherit;color:inherit}
button{touch-action:manipulation}
input,select,textarea{font-size:16px}
textarea{resize:vertical;min-height:52px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.app{padding:max(12px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(30px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.toolbar{max-width:980px;margin:0 auto 12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:9px;background:linear-gradient(120deg,rgba(33,20,13,.92),color-mix(in srgb,var(--themeDeep) 72%,rgba(33,20,13,.88)));border:1px solid color-mix(in srgb,var(--accent) 34%,rgba(223,191,120,.22));border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.25),0 0 22px var(--themeGlow);backdrop-filter:blur(12px);position:sticky;top:max(6px,env(safe-area-inset-top));z-index:30;transition:background .45s ease,border-color .45s ease,box-shadow .45s ease}
.toolbar select{flex:1 1 170px;min-width:0;height:42px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:#fffaf0;padding:0 10px}
.toolbar button{height:42px;border:0;border-radius:10px;padding:0 12px;font-weight:800;cursor:pointer;background:linear-gradient(#e8ce8e,#b9852d);color:#2c1c0b;box-shadow:inset 0 1px rgba(255,255,255,.35);transition:background .35s ease,box-shadow .35s ease,color .35s ease}
.toolbar .rules-link,.toolbar .discord-link{height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:0 12px;color:#fff;font-weight:900;text-decoration:none;white-space:nowrap}
.toolbar .rules-link{border:1px solid rgba(208,194,255,.34);background:linear-gradient(135deg,#6654b8,#287f83)}
.toolbar .discord-link{border:1px solid rgba(203,207,255,.46);background:linear-gradient(135deg,#5865f2,#3945c6);box-shadow:inset 0 1px rgba(255,255,255,.2)}
.toolbar[data-role] button:not(.secondary){background:linear-gradient(135deg,var(--accent2),var(--accent));color:white;box-shadow:inset 0 1px rgba(255,255,255,.3),0 0 14px var(--themeGlow2)}
.toolbar button.secondary{background:rgba(255,255,255,.09);color:#fff;border:1px solid rgba(255,255,255,.14)}
.more-menu{position:relative;height:42px;flex:0 0 auto}
.more-menu summary{height:42px;display:flex;align-items:center;justify-content:center;gap:6px;list-style:none;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:0 12px;font-weight:800;cursor:pointer;background:rgba(255,255,255,.09);color:#fff;user-select:none}
.more-menu summary::-webkit-details-marker{display:none}
.more-menu summary:after{content:'▾';font-size:10px;transition:transform .18s ease}
.more-menu[open] summary:after{transform:rotate(180deg)}
.more-menu-panel{position:absolute;right:0;top:calc(100% + 7px);z-index:50;width:250px;display:grid;gap:6px;padding:8px;border:1px solid color-mix(in srgb,var(--accent) 35%,rgba(255,255,255,.2));border-radius:11px;background:linear-gradient(145deg,color-mix(in srgb,var(--themeDeep) 86%,#1d120c),#1c130d);box-shadow:0 14px 30px rgba(0,0,0,.38),0 0 18px var(--themeGlow)}
.more-menu-panel button{width:100%;height:38px;text-align:left}
.more-menu-note{margin:0 2px 3px;padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.13);color:#ead8b6;font-size:10px;line-height:1.4}
.more-menu summary:focus-visible,.more-menu-panel button:focus-visible{outline:3px solid var(--accent2);outline-offset:2px}
.toolbar .status{flex:1 0 100%;font-size:12px;color:#f3dfb2;min-height:15px}
.toolbar input[type=file]{display:none}
.site-footer{max-width:980px;margin:16px auto 0;padding:18px 12px 28px;color:#d8c49a;font-size:12px;font-weight:750;letter-spacing:.05em;text-align:center}.site-footer a{color:#f0d992}
.draft-restore{max-width:980px;margin:-4px auto 12px;padding:9px 12px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;border:1px solid color-mix(in srgb,var(--accent) 42%,#d7b56c);border-radius:12px;background:linear-gradient(135deg,#fff8e8,color-mix(in srgb,var(--accentSoft) 46%,white));color:#55391f;box-shadow:0 7px 20px rgba(31,18,10,.16),0 0 18px var(--themeGlow);font-size:12px;font-weight:800}
.draft-restore span{flex:0 1 auto}
.draft-restore button{min-height:34px;border:1px solid color-mix(in srgb,var(--accent) 38%,#8d6739);border-radius:9px;padding:0 12px;font-weight:900;cursor:pointer;background:linear-gradient(135deg,var(--accent2),var(--accent));color:white;box-shadow:inset 0 1px rgba(255,255,255,.28)}
.draft-restore button.secondary{background:white;color:var(--accentDark)}

.sheet{max-width:8.5in;margin:0 auto}
.page{width:100%;min-height:11in;background:
  radial-gradient(circle at 88% 3%,var(--themeGlow2),transparent 23rem),
  radial-gradient(circle at 4% 96%,var(--themeGlow),transparent 26rem),
  linear-gradient(180deg,var(--themePageWash),transparent 3.2in),
  linear-gradient(140deg,rgba(255,255,255,.58),transparent 44%),
  var(--themeSurface);padding:.38in .42in;margin:0 auto 18px;border:3px solid color-mix(in srgb,var(--accent) 58%,transparent);border-radius:12px;box-shadow:var(--shadow),0 0 52px var(--themeGlow);position:relative;overflow:hidden;isolation:isolate;transition:background .45s ease,border-color .45s ease,box-shadow .45s ease}
.page:before{content:"";position:absolute;inset:10px;pointer-events:none;border:1px solid color-mix(in srgb,var(--accent) 54%,transparent);border-top-width:4px;border-radius:8px;box-shadow:inset 0 0 30px var(--themeGlow),0 0 18px var(--themeGlow2);transition:border-color .45s ease,box-shadow .45s ease}
.page:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.9;background-image:
  radial-gradient(circle at 12px 12px,var(--themePattern) 0 1px,transparent 1.5px),
  linear-gradient(118deg,transparent 0 48%,var(--themePattern) 49% 50%,transparent 51% 100%);background-size:25px 25px,170px 170px;mix-blend-mode:multiply}
.page>*{position:relative;z-index:1}

:root[data-role="rogue"] .page:after{background-image:repeating-linear-gradient(132deg,transparent 0 36px,rgba(37,78,55,.055) 37px 38px,transparent 39px 74px),radial-gradient(circle at 84% 14%,rgba(89,142,83,.10),transparent 20rem)}
:root[data-role="alchemist"] .page:after{background-image:linear-gradient(90deg,transparent 48%,rgba(13,142,137,.04) 49% 51%,transparent 52%),linear-gradient(transparent 48%,rgba(13,142,137,.04) 49% 51%,transparent 52%);background-size:42px 42px}

.mast{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center;background:linear-gradient(118deg,var(--walnut2),var(--themeDeep) 58%,color-mix(in srgb,var(--accentDark) 86%,#05060c));color:white;border-radius:14px;padding:12px 14px;margin-bottom:10px;box-shadow:0 6px 18px rgba(32,18,10,.24),inset 0 1px rgba(255,255,255,.10);overflow:hidden;position:relative;transition:background .45s ease}
.mast:after{content:"";position:absolute;z-index:0;inset:-80% -15%;pointer-events:none;background:linear-gradient(110deg,transparent 30%,var(--themeGlow2) 48%,transparent 67%);opacity:.55;transform:translateX(-38%)}
.mast>*{z-index:1}
.emblem{width:52px;height:52px;border:1px solid color-mix(in srgb,var(--accent2) 70%,white);border-radius:14px;display:flex;align-items:center;justify-content:center;gap:0;font-family:var(--display);font-weight:900;font-size:23px;background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(0,0,0,.20));box-shadow:inset 0 0 0 2px rgba(255,255,255,.05),0 0 20px var(--themeGlow2);transform:rotate(-2deg)}
.emblem .b-one{color:#86cfff;text-shadow:0 0 5px #55bfff,0 0 13px rgba(69,171,255,.82),1px 1px 0 #4a2b1e}
.emblem .b-two{color:#85e79d;text-shadow:0 0 5px #55d887,0 0 13px rgba(77,214,128,.78),1px 1px 0 #4a2b1e;transform:translateY(1px)}
.brand{font-family:var(--display);font-size:25px;font-weight:900;letter-spacing:.14em;line-height:1}
.tagline{font-family:var(--display);font-style:italic;color:#f2d89b;font-size:12px;margin-top:4px}
.page-mark{display:none}
.page-number{position:absolute;right:24px;bottom:20px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;z-index:5;font-family:var(--display);font-size:12px;font-weight:900;color:var(--accentDark);background:color-mix(in srgb,var(--accentSoft) 82%,white);border:1px solid color-mix(in srgb,var(--accent) 44%,transparent);box-shadow:0 3px 9px rgba(38,22,12,.14),0 0 15px var(--themeGlow)}

.hero-head{display:grid;grid-template-columns:minmax(0,2fr) minmax(140px,1fr);gap:10px;margin-bottom:10px}
.hero-name-wrap,.role-wrap{border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line2));border-radius:12px;padding:8px 10px;background:linear-gradient(145deg,rgba(255,255,255,.88),color-mix(in srgb,var(--accentSoft) 32%,#f8efdf));box-shadow:0 3px 12px rgba(47,28,18,.06),inset 0 1px rgba(255,255,255,.75);transition:border-color .35s ease,background .35s ease,box-shadow .35s ease}
.role-wrap{position:relative;overflow:hidden;border-top:4px solid var(--accent);box-shadow:0 4px 20px var(--themeGlow),inset 0 1px rgba(255,255,255,.78);transition:border-color .35s ease,background .35s ease,box-shadow .35s ease}
.role-wrap:after{content:"";position:absolute;right:-24px;bottom:-28px;width:92px;height:92px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,var(--themeGlow2),transparent 68%);transition:background .45s ease}
.role-wrap>*{position:relative;z-index:1}
.micro{display:block;font-size:9px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:#765b3d;margin-bottom:3px}
.hero-name{width:100%;border:0;border-bottom:2px solid rgba(185,133,45,.46);background:transparent;font-family:var(--display);font-size:28px;font-weight:800;outline:none;padding:1px 0 2px}
.role-select{width:100%;height:39px;border:1px solid color-mix(in srgb,var(--accent) 58%,var(--line));background:linear-gradient(135deg,#fff 8%,var(--accentSoft));border-radius:8px;padding:0 8px;font-weight:900;color:var(--accentDark);box-shadow:inset 5px 0 0 var(--accent),0 0 14px var(--themeGlow2);transition:all .35s ease}
.identity-grid{display:grid;grid-template-columns:1fr .72fr 1.1fr .85fr 1.35fr;gap:7px;margin-top:7px}
.fieldbox{border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.74);padding:5px 7px;min-width:0}
.fieldbox input,.fieldbox select,.fieldbox textarea{border:0;background:transparent;width:100%;outline:none;padding:0;min-width:0}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.card{border:1px solid color-mix(in srgb,var(--accent) 19%,var(--line2));border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.90),color-mix(in srgb,var(--accentSoft) 16%,#f7eddd));padding:9px 10px;margin-bottom:9px;box-shadow:0 3px 10px rgba(83,48,24,.07),inset 0 1px rgba(255,255,255,.76);transition:border-color .35s ease,background .35s ease,box-shadow .35s ease}
.card-title{display:flex;align-items:center;gap:7px;font-family:var(--display);font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--walnut2);margin:0 0 6px}
.card-title .icon{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(145deg,color-mix(in srgb,var(--accentSoft) 78%,white),color-mix(in srgb,var(--accent2) 24%,white));color:var(--accentDark);font-size:13px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent),0 0 12px var(--themeGlow2)}
.card-title .icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card-sub{font-size:10.5px;line-height:1.35;color:#6a5544;margin:-2px 0 6px}

.vitals{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vital{border:1px solid var(--line);border-radius:11px;background:white;padding:7px;text-align:center}
.vital .label{font-size:9px;text-transform:uppercase;letter-spacing:.1em;font-weight:900;color:#71553c}
.vital .value{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:4px}
.vital input{width:54px;border:0;border-bottom:2px solid var(--gold);background:transparent;text-align:center;font-family:var(--display);font-weight:900;font-size:25px;outline:none}
.vital .fixed{font-family:var(--display);font-weight:900;font-size:25px}
.stepper{width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);background:#fff7e8;font-weight:900;font-size:18px;display:grid;place-items:center;padding:0}

.knack-grid{display:grid;grid-template-columns:1fr;gap:5px}
.line-input{display:grid;grid-template-columns:30px 1fr;gap:6px;align-items:start}
.line-input .num{width:27px;height:27px;border-radius:50%;background:var(--accentSoft);display:grid;place-items:center;font-family:var(--display);font-weight:900;color:var(--accentDark);font-size:12px}
.line-input input{width:100%;border:0;border-bottom:1.5px solid var(--line2);background:transparent;padding:4px 2px;outline:none}
.line-input textarea{width:100%;min-height:44px;border:0;border-bottom:1.5px solid var(--line2);background:transparent;padding:8px 2px 5px;outline:none;line-height:1.35;resize:none;overflow:hidden}
.line-input .num{margin-top:8px}
.auto-grow-text{min-height:44px;line-height:1.35;resize:none!important;overflow:hidden!important;overflow-wrap:anywhere}
.trouble{margin-top:8px;padding-top:7px;border-top:1px dashed var(--line2)}
.trouble .num{background:#f3e4e1;color:var(--burgundy)}

.roll-table{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-radius:11px;overflow:hidden;border:1px solid rgba(53,31,23,.24);box-shadow:0 3px 11px rgba(50,28,19,.10)}
.roll{border:0;border-right:1px solid rgba(255,255,255,.48);border-radius:0;padding:8px 4px;text-align:center;min-width:0;position:relative;isolation:isolate;overflow:hidden}
.roll:last-child{border-right:0}
.roll:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-120%);opacity:.55}
.roll strong{display:block;font-family:var(--display);font-size:16px;color:#321c24;text-shadow:0 1px rgba(255,255,255,.65)}
.roll span{display:block;font-size:8.2px;font-weight:950;line-height:1.15;text-transform:uppercase;margin-top:2px;letter-spacing:.03em;overflow-wrap:anywhere}
.roll.cat{background:linear-gradient(145deg,#552046,#8b2d4f 58%,#bd445b);color:#fff}.roll.cat strong{color:#fff}.roll.fail{background:linear-gradient(145deg,#f2b0a5,#db665b);color:#561b1b}.roll.haggle{background:linear-gradient(145deg,#ffe5a1,#ed9f39);color:#59330b}.roll.success{background:linear-gradient(145deg,#a9eadc,#45b7ae);color:#073f43}.roll.triumph{background:linear-gradient(125deg,#ffb7c8,#ffd68b 22%,#a9f0c8 43%,#9bd8ff 64%,#c2adff 82%,#ffb8db);color:#2f2344;box-shadow:inset 0 0 17px rgba(255,255,255,.74)}
.roll.triumph:after{animation:prism-sheen 5.5s ease-in-out infinite;opacity:.95}
@keyframes prism-sheen{0%,58%,100%{transform:translateX(-125%)}75%{transform:translateX(125%)}}

.distance-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid rgba(46,48,38,.25);border-radius:11px;overflow:hidden;background:#fff;box-shadow:0 3px 10px rgba(48,35,23,.08)}
.distance{min-height:67px;border:0;border-right:1px solid rgba(255,255,255,.58);border-radius:0;padding:9px 5px;text-align:center;position:relative;overflow:hidden;display:grid;place-items:center;isolation:isolate}
.distance:last-child{border-right:0}
.distance:nth-child(1){background:linear-gradient(135deg,#dff2dc,#a8d5a6)}
.distance:nth-child(2){background:linear-gradient(135deg,#e7efcb,#c7d780)}
.distance:nth-child(3){background:linear-gradient(135deg,#ffe8ad,#e7b15b)}
.distance:nth-child(4){background:linear-gradient(135deg,#e7b4b1,#c6656d)}
.distance b{font-family:var(--display);font-size:11px;color:#2f3026;text-shadow:0 1px rgba(255,255,255,.8);z-index:2}
.distance-watermark{position:absolute;width:62px;height:62px;inset:50% auto auto 50%;transform:translate(-50%,-50%);opacity:.22;z-index:1;fill:none;stroke:#243a2a;stroke-width:4.6;stroke-linecap:round;stroke-linejoin:round}
.distance-watermark.weapon-glyph{color:#243a2a;stroke:none;filter:drop-shadow(0 1px 0 rgba(255,255,255,.5));opacity:.24}
.distance-watermark .weapon-fill{fill:currentColor;stroke:none}
.distance-watermark .weapon-detail{fill:none;stroke:rgba(255,255,255,.72);stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.distance-watermark .weapon-chain{fill:none;stroke:currentColor;stroke-width:2.75}
.distance:nth-child(1) .distance-watermark{width:66px;height:66px;transform:translate(-50%,-50%) rotate(-2deg)}
.distance:nth-child(2) .distance-watermark{width:69px;height:69px;transform:translate(-50%,-50%) rotate(-8deg);stroke-width:3.6}
.distance:nth-child(3) .distance-watermark{width:82px;height:64px;color:#4b3116;stroke:#4b3116;stroke-width:4.2;transform:translate(-50%,-50%) rotate(-2deg)}
.distance:nth-child(4) .distance-watermark{stroke:#611f31;stroke-width:5.2}
.distance small,.distance-note{display:none}

.weapon-table{width:100%;border-collapse:collapse;table-layout:fixed}
.weapon-table th{font-size:8.5px;text-transform:uppercase;letter-spacing:.08em;color:#765b3d;text-align:left;padding:0 4px 4px}
.weapon-table td{padding:4px;border-top:1px solid var(--line);vertical-align:top}
.weapon-table textarea,.weapon-table select{display:block;width:100%;border:0;background:transparent;outline:none;padding:7px 5px;box-sizing:border-box}
.weapon-table textarea{min-height:44px;line-height:1.35;resize:none;overflow:hidden;overflow-wrap:anywhere}
.weapon-table .damage{min-height:44px;text-align:center;font-weight:900;cursor:pointer}
.unarmed{font-size:9.5px;color:#695442;margin-top:5px}

.abilities{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.abilities-page{scroll-margin-top:92px}
.ability{border:1px solid var(--line);border-radius:10px;background:white;padding:6px;min-width:0;position:relative}
.ability-top{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:5px;align-items:end}
.ability input,.ability select,.ability textarea{width:100%;border:0;background:transparent;outline:none;padding:2px;min-width:0}
.ability select.name{font-family:var(--display);font-weight:900;border-bottom:1px solid var(--line2);border-radius:0;cursor:pointer}
.ability input.cost{text-align:center;font-weight:900;border-bottom:1px solid var(--line2)}
.ability input.cost[readonly]{color:var(--accentDark);background:var(--accentSoft);border-radius:5px 5px 0 0;cursor:default}
.ability .path{font-size:9px;color:#785f48;border-bottom:1px solid var(--line);margin-top:2px}
.ability textarea{font-size:12px;line-height:1.35;height:64px;min-height:64px;margin-top:2px;resize:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;border-radius:5px!important;transition:height .18s ease,box-shadow .18s ease}
.ability.has-overflow:not(.expanded) textarea{box-shadow:inset 0 -15px 12px -14px rgba(72,47,29,.72)}
.ability.expanded textarea{min-height:150px;box-shadow:inset 0 0 0 1px var(--line)}
.ability-help{display:flex;justify-content:flex-end;gap:10px;align-items:center;margin-top:3px;color:#846b55;font-size:9px;min-height:25px;flex-wrap:wrap}
.ability-help button{min-height:25px;border:0;background:transparent;color:var(--accentDark);font-weight:900;padding:3px 0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.ability-help button:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px}

.ability-dialog{width:min(620px,calc(100% - 24px));max-height:min(82dvh,760px);border:1px solid rgba(185,133,45,.5);border-radius:16px;padding:0;background:var(--paper);color:var(--ink);box-shadow:0 24px 80px rgba(0,0,0,.5)}
.ability-dialog::backdrop{background:rgba(15,8,5,.72);backdrop-filter:blur(3px)}
.ability-dialog{overflow:hidden}
.ability-dialog-inner{padding:18px;max-height:min(82dvh,760px);display:flex;flex-direction:column}
.ability-dialog-head{display:flex;justify-content:space-between;gap:12px;align-items:start;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:12px}
.ability-dialog h2{font-family:var(--display);font-size:24px;margin:0;color:var(--accentDark)}
.ability-dialog-meta{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#806344;margin-top:4px}
.ability-dialog-close{width:38px;height:38px;border:1px solid var(--line2);border-radius:50%;background:#fff8e9;font-size:20px;font-weight:900;cursor:pointer;flex:0 0 auto}
.ability-dialog-text{white-space:pre-wrap;font-size:14px;line-height:1.55;min-height:0;overflow:auto;padding:0 7px 8px 0;-webkit-overflow-scrolling:touch}

.print-ability-reference{display:none}

.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.profile-item{border:1px solid var(--line);border-radius:9px;background:white;padding:6px}
.profile-item textarea,.profile-item input{width:100%;border:0;background:transparent;outline:none;padding:2px}
.profile-item textarea{min-height:55px}
.profile-item.wide{grid-column:1/-1}

.inventory{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.note-box{border:1px solid var(--line);border-radius:9px;background:white;padding:6px}
.note-box textarea{width:100%;border:0;background:transparent;outline:none;min-height:88px;padding:2px}
.note-box.wide{grid-column:1/-1}

.conflict{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.conflict div{border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:9px;background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--accentSoft) 36%,white));text-align:center;padding:7px 4px;box-shadow:inset 0 1px rgba(255,255,255,.72)}
.conflict b{display:block;font-family:var(--display);font-size:10px;color:var(--accentDark)}
.conflict small{font-size:8.2px;line-height:1.18;display:block;color:#66513f;margin-top:2px;overflow-wrap:anywhere}

.d20-display{min-height:310px;display:grid;place-items:center;position:relative;margin:2px 0 0;isolation:isolate;overflow:visible}
.d20-display:before,.d20-display:after{content:"";position:absolute;inset:12% 8%;border-radius:50%;pointer-events:none;z-index:-1}
.d20-display:before{background:conic-gradient(from 30deg,rgba(255,79,169,.24),rgba(255,203,73,.22),rgba(77,229,178,.22),rgba(76,166,255,.24),rgba(147,90,255,.23),rgba(255,79,169,.24));filter:blur(30px);opacity:.78}
.d20-display:after{inset:24% 22%;background:rgba(255,255,255,.5);filter:blur(24px)}
.prism-d20{width:min(100%,330px);height:auto;display:block;filter:drop-shadow(0 18px 18px rgba(30,15,26,.21));overflow:visible}
.prism-d20 .face{stroke:rgba(255,255,255,.16);stroke-width:1.1}
.prism-d20 .edge-glow{fill:none;stroke:url(#d20Prism);stroke-width:8;stroke-linejoin:round;stroke-linecap:round;filter:url(#d20Glow);opacity:.72}
.prism-d20 .edge{fill:none;stroke:url(#d20Prism);stroke-width:3.1;stroke-linejoin:round;stroke-linecap:round}
.prism-d20 .inner-edge{fill:none;stroke:url(#d20Prism);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round;opacity:.96}
.prism-d20 .d20-number{font-family:var(--display);font-weight:900;font-size:48px;fill:#fff;text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:#2d2144;stroke-width:2.5px;filter:url(#numberGlow)}
.prism-d20 .spark{fill:#fff;filter:url(#numberGlow);opacity:.92}
.abilities-page{min-height:11in;padding-bottom:.58in;background:
  radial-gradient(circle at 84% 8%,var(--themeGlow2),transparent 22rem),
  radial-gradient(circle at 9% 84%,var(--themeGlow),transparent 25rem),
  linear-gradient(140deg,rgba(255,255,255,.64),transparent 44%),
  var(--themeSurface)}
.abilities-page .mast{margin-bottom:14px}
.ability-grimoire-intro{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;margin:3px 2px 14px;padding:11px 13px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:13px;background:linear-gradient(135deg,rgba(255,255,255,.9),color-mix(in srgb,var(--accentSoft) 42%,white));box-shadow:0 5px 18px rgba(55,34,22,.08),inset 0 1px rgba(255,255,255,.8)}
.ability-grimoire-intro strong{display:block;font-family:var(--display);font-size:15px;color:var(--accentDark);margin-bottom:2px}
.ability-grimoire-intro span{font-size:10.5px;line-height:1.35;color:#6a5544}
.ability-grimoire-sigil{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:21px;color:white;background:linear-gradient(145deg,var(--accent),var(--accentDark));border:1px solid color-mix(in srgb,var(--accent2) 55%,white);box-shadow:inset 0 1px rgba(255,255,255,.25),0 0 20px var(--themeGlow)}
.ability-filter{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:8px;margin:0 2px 10px;padding:9px 11px;border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));border-radius:11px;background:rgba(255,255,255,.78);font-size:11px;color:#6a5544}
.ability-filter-top{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;min-width:0;flex-wrap:wrap}
.ability-filter label{display:flex;align-items:center;gap:7px;cursor:pointer;font-weight:800;color:var(--accentDark)}
.ability-filter input[type="checkbox"]{width:17px;height:17px;accent-color:var(--accent);margin:0}
.ability-search-controls{min-width:0;display:grid;grid-template-columns:minmax(180px,1.5fr) minmax(96px,.8fr) minmax(96px,.8fr) minmax(108px,.72fr) auto;gap:6px;align-items:center}
.ability-search-controls label{display:block;min-width:0}
.ability-search-controls input,.ability-search-controls select,.ability-search-controls button{width:100%;height:38px;min-width:0;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line2));border-radius:8px;background:#fffdf7;padding:0 9px;color:var(--ink);font-size:12px}
.ability-search-controls button{width:auto;cursor:pointer;background:color-mix(in srgb,var(--accentSoft) 58%,white);font-weight:900;color:var(--accentDark)}
.ability-library-download{max-width:100%;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line2));border-radius:8px;background:var(--accentDark);padding:0 11px;color:white;font-size:11px;font-weight:900;text-decoration:none;white-space:nowrap}
.ability-filter .filter-note{min-height:14px;text-align:left;line-height:1.3}
.ability.duplicate{box-shadow:0 0 0 2px rgba(190,70,70,.55)}
.ability.duplicate .dupe-flag{display:block}
.dupe-flag{display:none;font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#9c3535;margin-top:3px}
.print-mirror{display:none}
.abilities-page .abilities{gap:11px}
.abilities-page .ability{padding:34px 10px 9px;border-color:color-mix(in srgb,var(--accent) 25%,var(--line));background:linear-gradient(145deg,rgba(255,255,255,.96),color-mix(in srgb,var(--accentSoft) 30%,white));box-shadow:0 4px 14px rgba(56,35,23,.08);overflow:hidden}
.abilities-page .ability:before{position:absolute;top:0;left:0;right:0;height:25px;display:flex;align-items:center;padding:0 10px;font-size:8.5px;font-weight:950;letter-spacing:.13em;text-transform:uppercase;color:var(--accentDark);background:linear-gradient(90deg,color-mix(in srgb,var(--accentSoft) 88%,white),rgba(255,255,255,.45));border-bottom:1px solid color-mix(in srgb,var(--accent) 22%,var(--line))}
#startAbilities{counter-reset:start-slot}
#startAbilities .ability{counter-increment:start-slot}
#startAbilities .ability:before{content:"Starting ability " counter(start-slot)}
#growthAbilities{counter-reset:growth-slot}
#growthAbilities .ability{counter-increment:growth-slot}
#growthAbilities .ability:before{content:"Learned ability " counter(growth-slot)}
.abilities-page .ability textarea{height:118px;min-height:118px;line-height:1.42;background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.58))!important}
.abilities-page .ability.expanded textarea{min-height:230px}
.ability-section-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin:16px 2px 9px;padding-bottom:8px;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));color:var(--accentDark)}
.ability-section-head h2{font-family:var(--display);font-size:17px;margin:0;letter-spacing:.04em}
.ability-section-meta{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.ability-section-head p{font-size:10px;line-height:1.3;margin:0;text-align:right;color:#6a5544;max-width:360px}
.ability-count{flex:0 0 auto;min-width:78px;padding:5px 8px;border-radius:999px;text-align:center;font-size:9px;font-weight:950;letter-spacing:.07em;text-transform:uppercase;color:white;background:linear-gradient(120deg,var(--accent),var(--accentDark));box-shadow:0 3px 10px var(--themeGlow)}
.ability-divider{height:1px;margin:17px 0 2px;background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent);opacity:.65}
:root[data-role="rogue"] .mast{background:linear-gradient(118deg,#13251b,#203b2b 52%,#355a3d);box-shadow:0 7px 22px rgba(10,31,20,.36),inset 0 1px rgba(167,211,145,.14)}
:root[data-role="rogue"] .role-wrap{border-color:rgba(66,121,78,.58);box-shadow:0 5px 24px rgba(34,82,50,.27),inset 0 0 0 1px rgba(189,224,170,.10)}
:root[data-role="rogue"] .role-select{box-shadow:inset 3px 0 0 #4f8658,0 0 15px rgba(85,145,91,.20)}
:root[data-role="rogue"] .card-title .icon{background:linear-gradient(145deg,#f7fff1,#d8eacb);box-shadow:inset 0 0 0 1px rgba(48,105,62,.24),0 0 14px rgba(76,136,83,.27)}
:root[data-role="alchemist"] .mast{background:linear-gradient(118deg,#173438,#07505a 57%,#137e78);box-shadow:0 7px 22px rgba(4,58,63,.25),inset 0 -2px rgba(207,85,97,.48),inset 0 1px rgba(255,255,255,.13)}
:root[data-role="alchemist"] .role-wrap{border-color:rgba(16,143,138,.55);box-shadow:0 5px 22px rgba(14,139,132,.24),inset 0 -2px rgba(207,85,97,.24)}
:root[data-role="alchemist"] .role-select{box-shadow:inset 3px 0 0 #168f8a,0 0 14px rgba(105,225,209,.17)}
:root[data-role="alchemist"] .vital:first-child{border-color:rgba(207,85,97,.36);box-shadow:inset 0 3px 0 rgba(207,85,97,.48)}
.footer{display:none!important}

@media (max-width:760px){
  .app{padding-left:0;padding-right:0}
  .toolbar{margin:0 8px 10px;position:relative;top:auto}
  .draft-restore{margin:0 8px 10px;text-align:center}
  .sheet{max-width:none}
  .page{min-height:0;border-radius:0;margin-bottom:10px;padding:14px 12px 50px;box-shadow:none}
  .page:before{inset:5px;border-radius:5px}
  .mast{grid-template-columns:42px minmax(0,1fr);gap:9px;padding:10px 11px}
  .emblem{width:42px;height:42px;font-size:17px}
  .brand{font-size:21px;letter-spacing:.1em}
  .tagline{font-size:11px}
  .page-mark{display:none}
  .hero-head{grid-template-columns:1fr}
  .identity-grid{grid-template-columns:1fr 1fr}
  .identity-pronouns{grid-column:1;grid-row:1}
  .identity-height{grid-column:2;grid-row:1}
  .identity-age{grid-column:1;grid-row:2}
  .identity-species{grid-column:2;grid-row:2}
  .identity-from{grid-column:1 / -1;grid-row:3}
  .grid2{grid-template-columns:1fr}
  .hero-name{font-size:26px}
  .card{padding:9px}
  .abilities{grid-template-columns:1fr}
  .abilities-page .ability textarea{height:132px;min-height:132px}
  .ability-grimoire-intro{grid-template-columns:1fr auto;gap:10px;margin-bottom:11px;padding:10px 11px}
  .ability-grimoire-sigil{width:46px;height:46px;border-radius:13px;font-size:18px}
  .ability-section-head{align-items:start;flex-direction:column;gap:3px}
  .ability-section-meta{width:100%;justify-content:space-between;align-items:center}
  .ability-section-head p{text-align:left;max-width:none}
  .ability-count{min-width:74px}
  .d20-display{min-height:260px;margin-top:0}
  .prism-d20{width:min(86vw,292px)}
  .page-number{right:16px;bottom:13px}
  .ability textarea{height:82px}
  .ability.expanded textarea{min-height:180px}
  .ability-help{font-size:10px;gap:12px}
  .ability-help button{min-height:34px;padding:5px 0}
  .profile-grid{grid-template-columns:1fr}
  .profile-item.wide{grid-column:auto}
  .inventory{grid-template-columns:1fr}
  .note-box.wide{grid-column:auto}
  .ability-filter{grid-template-columns:1fr}
  .ability-filter-top{align-items:stretch;flex-direction:column}
  .ability-library-download{width:100%}
  .ability-search-controls{grid-template-columns:1fr 1fr}
  .ability-search{grid-column:1 / -1}
  .ability-search-controls input,.ability-search-controls select,.ability-search-controls button,.ability-library-download{height:44px;min-height:44px}
  .ability-filter .filter-note{grid-column:1}
}
@media (max-width:480px){
  .toolbar>button,.toolbar>.rules-link,.toolbar>.discord-link,.toolbar>.more-menu{flex:1 1 calc(20% - 7px);padding:0 5px;font-size:12px;min-width:0}
  .toolbar>select{flex-basis:100%}
  .more-menu summary{padding:0 7px}
  .more-menu-panel{right:0;width:min(250px,calc(100vw - 28px))}
  .identity-grid{gap:5px}
  .roll-table{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
  .roll{padding:5px 2px}.roll strong{font-size:14px}.roll span{font-size:7.7px}
  .distance-grid{grid-template-columns:1fr 1fr}
  .conflict{grid-template-columns:1fr 1fr}
  .ability-grimoire-intro{grid-template-columns:1fr}
  .ability-grimoire-sigil{display:none}
  .ability-section-meta{align-items:flex-start;flex-direction:column;gap:6px}
  .conflict div{min-height:52px;display:grid;align-content:center}
  .vital .fixed,.vital input{font-size:23px}
  .stepper{width:32px;height:32px}
}
@media (min-width:761px) and (max-width:1024px){
  .page{padding:.28in .30in}
}
@media print{
  @page{size:letter;margin:0}
  html,body{background:white}
  .app{padding:0}.toolbar,.draft-restore{display:none!important}.sheet{max-width:none}.page{width:8.5in;height:auto;min-height:11in;margin:0;border-radius:0;box-shadow:none;page-break-after:always;padding:.38in .42in;overflow:visible}.page:last-child{page-break-after:auto}
  .ability-filter{display:none}
  .print-mirror{display:block;white-space:pre-wrap;font-size:10.5px;line-height:1.38;padding:2px;min-height:0}
  textarea.has-print-mirror{display:none}
  .card,.note-box,.profile-item,.ability{break-inside:avoid}
  .abilities-page{height:auto;min-height:11in;overflow:visible}
  .abilities-page .ability textarea{height:82px!important;min-height:82px;overflow:hidden!important}
  .d20-display{min-height:290px}
  .page-number{box-shadow:none}
  input,textarea,select{font-size:11px}
  .ability-help,.ability-dialog{display:none!important}
  .site-footer{display:none!important}
  .print-ability-reference{display:block;width:8.5in;min-height:11in;padding:.45in .5in;background:#fffaf0;color:var(--ink);page-break-before:always}
  .print-ability-reference[hidden]{display:none}
  .print-ability-reference-header{border-bottom:2px solid var(--gold);padding-bottom:10px;margin-bottom:14px}
  .print-ability-reference-header h2{font-family:var(--display);font-size:25px;letter-spacing:.08em;margin:0;color:var(--walnut2)}
  .print-ability-reference-header p{font-size:10px;margin:4px 0 0;color:#6a5544}
  .print-ability-item{break-inside:avoid;border:1px solid var(--line2);border-radius:9px;background:white;padding:9px 10px;margin:0 0 9px}
  .print-ability-item h3{font-family:var(--display);font-size:15px;margin:0 0 2px;color:var(--accentDark)}
  .print-ability-meta{font-size:8.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#806344;margin-bottom:5px}
  .print-ability-text{white-space:pre-wrap;font-size:10.5px;line-height:1.4;margin:0}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}

    .prereq-toggle{display:inline-flex;align-items:center;gap:.4em;font-size:.78em;opacity:.85;margin-left:.9em}
    .ability.prereq-broken{outline:2px solid #b8860b;outline-offset:2px}
    .prereq-flag{margin-top:.4em;font-size:.75em;color:#8a5a00;background:#fff6e0;border:1px solid #e5c77a;border-radius:4px;padding:.3em .5em}
    @media print{.prereq-toggle{display:none}.prereq-flag{border:none;background:none;color:#555}}

/* --- Briarbound revision: play-facing rule reminders --- */
.hp-rules{display:flex;align-items:center;gap:8px;margin-top:7px;padding:6px 8px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:9px;background:linear-gradient(140deg,#fff,color-mix(in srgb,var(--accentSoft) 42%,white))}
.hp-rules strong{display:block;font-family:var(--display);font-size:11px;color:var(--accentDark);line-height:1.2}
.hp-rules strong > span{display:inline!important;font:inherit!important;color:inherit!important;line-height:inherit!important;margin:0!important}
.hp-rules.zero-state{margin-top:5px;border-color:rgba(119,59,59,.4);background:linear-gradient(140deg,#fff,#fbeeea)}
.hp-rules.zero-state strong{color:var(--burgundy)}
.regroup-btn{flex:0 0 auto;min-height:32px;border:0;border-radius:8px;padding:0 11px;cursor:pointer;font-family:var(--display);font-weight:900;font-size:11px;letter-spacing:.03em;color:#fff;background:linear-gradient(135deg,var(--accent2),var(--accent));box-shadow:inset 0 1px rgba(255,255,255,.3),0 2px 7px rgba(40,25,15,.16)}
.regroup-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.quick-list{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:2px;color:#604b3a;font-size:10px;line-height:1.28}
.quick-list li{position:relative;padding-left:12px}
.quick-list li:before{content:"•";position:absolute;left:1px;color:var(--accent);font-weight:950}
.hp-rules .quick-list{font-size:9px;line-height:1.25}
.zero-state .quick-list li:before{color:var(--burgundy)}
.pillar-rules{margin:6px 0}
.pillar-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:6px;font-size:8.5px;line-height:1.22;color:#604b3a;text-align:center}
.pillar-map span{padding:4px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:7px;background:rgba(255,255,255,.68)}
.pillar-map strong{display:block;color:var(--accentDark)}
.pillar-costs{display:grid;grid-template-columns:auto 1fr;gap:2px 7px;margin-top:6px;padding:6px 8px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));border-radius:8px;background:rgba(255,255,255,.7);font-size:9px;line-height:1.25;color:#604b3a}
.pillar-costs strong{grid-row:1 / span 3;color:var(--accentDark)}

.roll-note{margin-top:6px;font-size:9.5px;line-height:1.35;color:#5f4835}
.roll-note strong{font-family:var(--display);color:#8a5a12}
.roll-note em{font-style:normal;font-weight:900}

.turn-strip{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:6px;padding:6px 8px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:9px;background:linear-gradient(140deg,#fff,color-mix(in srgb,var(--accentSoft) 40%,white));text-align:center}
.turn-strip b{font-family:var(--display);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--accentDark)}
.turn-strip span{font-family:var(--display);font-weight:900;font-size:12px;color:#3d2c1d}
.turn-strip i{font-style:normal;color:var(--accent);padding:0 2px}

.session-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:7px 0 3px}
.session-btn{min-height:34px;border:0;border-radius:9px;padding:0 13px;cursor:pointer;font-family:var(--display);font-weight:900;font-size:11.5px;color:#fff;background:linear-gradient(135deg,var(--accent2),var(--accent));box-shadow:inset 0 1px rgba(255,255,255,.3),0 2px 8px rgba(40,25,15,.18)}
.session-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.session-hint{font-size:9.5px;color:#6b5341}

.ability input.cost.is-free{font-family:var(--display);letter-spacing:.06em;color:#1f5d3a;background:#dff3e4}
.ability input.path[readonly]{cursor:default}

@media (max-width:480px){
  .hp-rules{align-items:flex-start}
  .turn-strip{flex-direction:column;gap:2px}
}
@media print{
  .regroup-btn,.session-btn{display:none!important}
  .hp-rules{padding:4px 6px}
  .session-actions{margin:2px 0}
}
.hp-rules.ap-recovery{margin-top:5px}
.ap-recovery .quick-list b{color:var(--accentDark)}
.base-pillar-field{flex:0 0 auto;min-width:86px;text-align:center}
.base-pillar-field output{display:block;font-family:var(--display);font-weight:900;font-size:13px;letter-spacing:.04em;color:var(--accentDark);min-height:1.2em}
.base-pillar-field output[data-empty="true"]{font-family:inherit;font-weight:700;font-size:10px;letter-spacing:0;color:#8a735f}
@media print{.base-pillar-field output[data-empty="true"]{visibility:hidden}}


/* ================================================================
   BRIARBOUND ENCHANTED UI PASS · REVISION 3
   Bramble-carved wood, gem light, stronger focus states, and print fit.
   ================================================================ */
:root{
  --woodDark:#170d08;--woodMid:#4c2a15;--woodLight:#a96528;
  --brightGold:#ffd98a;--magicCyan:#67f1e4;--leafGlow:#8cdf78;
  --focusRing:color-mix(in srgb,var(--accent2) 74%,white);
}
::selection{background:color-mix(in srgb,var(--accent2) 42%,white);color:#1e130c}
body{position:relative;isolation:isolate;overflow-x:hidden}
body:before,body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}
body:before{background:
  radial-gradient(circle at 9% 16%,rgba(119,241,221,.12) 0 1px,transparent 2px),
  radial-gradient(circle at 89% 9%,rgba(255,217,138,.14) 0 1px,transparent 2px),
  radial-gradient(circle at 76% 76%,rgba(141,223,117,.09) 0 1.5px,transparent 2.5px);
  background-size:38px 38px,53px 53px,71px 71px;opacity:.72}
body:after{background:linear-gradient(90deg,rgba(0,0,0,.32),transparent 22%,transparent 78%,rgba(0,0,0,.32));mix-blend-mode:multiply}
.app{position:relative;z-index:1}

.toolbar{border:1px solid color-mix(in srgb,var(--brightGold) 52%,var(--accent));border-top-color:rgba(255,229,165,.72);background:
  linear-gradient(90deg,rgba(255,255,255,.045),transparent 15% 85%,rgba(255,255,255,.035)),
  repeating-linear-gradient(7deg,rgba(255,255,255,.025) 0 1px,transparent 1px 7px),
  linear-gradient(135deg,#25140c,color-mix(in srgb,var(--themeDeep) 82%,#1a0d08) 55%,#160b08);
  box-shadow:inset 0 1px rgba(255,255,255,.12),inset 0 -3px rgba(0,0,0,.25),0 14px 34px rgba(0,0,0,.34),0 0 28px var(--themeGlow);overflow:visible}
.toolbar:before{content:"";position:absolute;inset:3px;border:1px solid rgba(255,218,135,.13);border-radius:11px;pointer-events:none}
.toolbar>*{position:relative;z-index:1}
.toolbar button,.more-menu summary{transition:transform .16s ease,filter .16s ease,box-shadow .2s ease,border-color .2s ease}
.toolbar button:active,.more-menu summary:active{transform:translateY(1px) scale(.985)}
.toolbar select:focus-visible,.toolbar button:focus-visible,.more-menu summary:focus-visible{outline:3px solid var(--focusRing);outline-offset:2px}
.save-indicator{flex:0 0 auto;min-height:28px;display:flex;align-items:center;gap:7px;padding:4px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#f7e4ba;font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;box-shadow:inset 0 1px rgba(255,255,255,.08)}
.save-gem{width:9px;height:9px;transform:rotate(45deg);border-radius:2px;background:#7ee6b4;box-shadow:0 0 8px #67efb1,0 0 15px rgba(103,239,177,.46);transition:background .2s ease,box-shadow .2s ease}
.save-indicator[data-state="dirty"]{color:#ffe0a1;border-color:rgba(255,198,80,.28)}
.save-indicator[data-state="dirty"] .save-gem{background:#ffbd4a;box-shadow:0 0 8px #ffb83d,0 0 16px rgba(255,184,61,.5)}
.save-indicator[data-state="draft"] .save-gem{background:#67dff0;box-shadow:0 0 8px #67dff0,0 0 16px rgba(103,223,240,.5)}
.save-indicator[data-state="restore"] .save-gem{background:#d190ff;box-shadow:0 0 8px #d190ff,0 0 16px rgba(209,144,255,.5)}
.save-indicator[data-state="error"] .save-gem{background:#ff6868;box-shadow:0 0 8px #ff6868,0 0 16px rgba(255,104,104,.5)}
.toolbar .status{color:#f6dca5;font-weight:750;letter-spacing:.015em}

.page{border-width:4px;border-color:color-mix(in srgb,var(--accent) 58%,#8d6739);background:
  radial-gradient(circle at 92% 4%,var(--themeGlow2),transparent 23rem),
  radial-gradient(circle at 2% 98%,var(--themeGlow),transparent 27rem),
  linear-gradient(180deg,var(--themePageWash),transparent 3.25in),
  linear-gradient(140deg,rgba(255,255,255,.62),transparent 44%),
  repeating-linear-gradient(92deg,rgba(117,82,44,.018) 0 1px,transparent 1px 6px),
  var(--themeSurface);
  box-shadow:0 26px 80px rgba(7,4,2,.43),0 8px 20px rgba(7,4,2,.26),0 0 58px var(--themeGlow),inset 0 0 0 1px rgba(255,255,255,.5)}
.page:before{inset:7px;border:1px solid color-mix(in srgb,var(--accent) 58%,#b58b4d);border-top-width:5px;border-bottom-width:2px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.32),inset 0 0 34px var(--themeGlow),0 0 20px var(--themeGlow2)}
.page:after{opacity:.98;background-image:
  radial-gradient(circle at 10px 10px,var(--themePattern) 0 1.1px,transparent 1.7px),
  linear-gradient(118deg,transparent 0 48%,var(--themePattern) 49% 50%,transparent 51% 100%),
  radial-gradient(ellipse at 0 0,rgba(185,133,45,.10),transparent 27%),
  radial-gradient(ellipse at 100% 100%,rgba(98,183,178,.09),transparent 25%);
  background-size:25px 25px,170px 170px,100% 100%,100% 100%}

.mast{grid-template-columns:76px minmax(0,1fr);gap:14px;min-height:86px;padding:7px 18px 7px 9px;border:1px solid color-mix(in srgb,var(--brightGold) 58%,var(--accent2));border-bottom-color:rgba(0,0,0,.45);background:
  linear-gradient(90deg,rgba(255,255,255,.06),transparent 18% 82%,rgba(255,255,255,.035)),
  repeating-linear-gradient(4deg,rgba(255,255,255,.022) 0 1px,transparent 1px 8px),
  linear-gradient(118deg,var(--walnut2),var(--themeDeep) 58%,color-mix(in srgb,var(--accentDark) 86%,#05060c));
  box-shadow:inset 0 1px rgba(255,255,255,.15),inset 0 -5px rgba(0,0,0,.20),0 8px 22px rgba(31,17,9,.28),0 0 24px var(--themeGlow);overflow:visible}
.mast:before{content:"";position:absolute;inset:4px;border:1px solid rgba(255,220,142,.14);border-radius:10px;pointer-events:none;z-index:1}
.mast:after{opacity:.72;animation:mast-sheen 7s ease-in-out infinite}
.mast>*{position:relative;z-index:2}
.emblem{width:76px;height:76px;border:0;border-radius:50%;padding:0;display:grid;place-items:center;background:radial-gradient(circle,rgba(49,239,220,.18),rgba(9,14,13,.55) 57%,rgba(0,0,0,.15) 70%,transparent 72%);box-shadow:inset 0 0 18px rgba(89,246,222,.19),0 0 20px var(--themeGlow2),0 7px 15px rgba(0,0,0,.34);transform:rotate(-2deg);isolation:isolate}
.emblem:before{content:"";position:absolute;inset:7px;border:1px dashed rgba(119,242,224,.34);border-radius:50%;z-index:-1;animation:rune-spin 26s linear infinite}
.emblem:after{content:"✦";position:absolute;right:0;top:4px;color:#e9fff8;font-size:10px;text-shadow:0 0 7px var(--magicCyan),0 0 15px var(--magicCyan);animation:spark-pulse 2.8s ease-in-out infinite}
.bb-logo{width:90px;height:90px;max-width:none;display:block;object-fit:contain;filter:drop-shadow(0 3px 2px rgba(0,0,0,.54)) drop-shadow(0 0 7px rgba(77,239,224,.55));user-select:none;-webkit-user-drag:none}
.mast-copy{min-width:0;padding-left:2px}
.brand{position:relative;width:max-content;max-width:100%;font-size:29px;letter-spacing:.13em;color:#f9dda0;background:linear-gradient(180deg,#fff5c7 0%,#f4cb74 42%,#bf7627 78%,#ffe8a4 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 0 rgba(56,26,8,.85)) drop-shadow(0 0 9px rgba(255,205,103,.18))}
.brand:after{content:"";position:absolute;left:0;right:.12em;bottom:-5px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--accent2),var(--brightGold),var(--leafGlow),transparent);box-shadow:0 0 8px var(--themeGlow2)}
.tagline{margin-top:8px;color:#f6ddaa;font-size:11.5px;letter-spacing:.035em;text-shadow:0 1px 1px rgba(0,0,0,.65)}

.hero-name-wrap,.role-wrap,.card,.profile-item,.note-box,.ability{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,background .25s ease}
.hero-name-wrap,.role-wrap{border-color:color-mix(in srgb,var(--accent) 35%,#9a7144);box-shadow:0 5px 16px rgba(47,28,18,.08),inset 0 1px rgba(255,255,255,.88)}
@media screen{
  .hero-name-wrap:focus-within,.role-wrap:focus-within{border-color:var(--focusRing);box-shadow:0 7px 22px rgba(47,28,18,.12),0 0 18px var(--themeGlow2),inset 0 1px white}
}
.hero-name{font-size:30px;text-shadow:0 1px rgba(255,255,255,.82);border-bottom-color:color-mix(in srgb,var(--accent) 58%,var(--gold));caret-color:var(--accent)}
.micro{color:color-mix(in srgb,var(--accentDark) 74%,#765b3d);text-shadow:0 1px rgba(255,255,255,.8)}
.fieldbox,.profile-item,.note-box{border-color:color-mix(in srgb,var(--accent) 18%,var(--line2));background:linear-gradient(145deg,rgba(255,255,255,.90),rgba(255,255,255,.65));box-shadow:inset 0 1px rgba(255,255,255,.86)}
@media screen{
  .fieldbox:focus-within,.profile-item:focus-within,.note-box:focus-within{border-color:color-mix(in srgb,var(--accent2) 62%,var(--accent));box-shadow:0 0 0 2px color-mix(in srgb,var(--accent2) 18%,transparent),0 0 13px var(--themeGlow2),inset 0 1px white}
}
.role-wrap{border-top-width:5px}
.role-select{height:41px;border-width:1px;box-shadow:inset 5px 0 0 var(--accent),0 0 16px var(--themeGlow2)}
#pillarBadge{display:inline-flex!important;align-items:center;gap:5px;width:max-content;max-width:100%;padding:4px 8px!important;border:1px solid color-mix(in srgb,var(--accent) 42%,#b88b4f);border-radius:999px;background:linear-gradient(135deg,color-mix(in srgb,var(--accentSoft) 74%,white),white);color:var(--accentDark)!important;box-shadow:inset 0 1px white,0 2px 8px var(--themeGlow);font-size:8.8px!important;text-transform:uppercase}
#pillarBadge[hidden]{display:none!important}

.card{position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--accent) 24%,#9b754c);border-top-width:2px;background:linear-gradient(180deg,rgba(255,255,255,.94),color-mix(in srgb,var(--accentSoft) 20%,#f7eddd));box-shadow:0 5px 15px rgba(70,39,20,.085),inset 0 1px rgba(255,255,255,.88)}
.card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),var(--brightGold),transparent);opacity:.75;pointer-events:none}
.card-title{color:color-mix(in srgb,var(--accentDark) 72%,var(--walnut2));text-shadow:0 1px white}
.card-title:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 38%,transparent),transparent);margin-left:3px}
.card-title .icon{border:1px solid color-mix(in srgb,var(--accent) 28%,#b18a58);background:radial-gradient(circle at 35% 25%,white,color-mix(in srgb,var(--accent2) 25%,white) 45%,color-mix(in srgb,var(--accent) 26%,white));box-shadow:inset 0 1px white,inset 0 -2px rgba(0,0,0,.07),0 3px 7px rgba(54,30,15,.12),0 0 13px var(--themeGlow2);transform:rotate(-2deg)}
.card-sub{color:#654d3c}
.vital{position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--accent) 22%,var(--line2));background:linear-gradient(155deg,#fff,color-mix(in srgb,var(--accentSoft) 25%,white));box-shadow:inset 0 1px white,0 3px 9px rgba(51,31,18,.07)}
.vital:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,transparent,var(--accent2),transparent);opacity:.55}
.vitals-card .vital:first-child{border-top-color:#c34b53;box-shadow:inset 0 3px rgba(195,75,83,.35),0 3px 9px rgba(51,31,18,.07)}
.vitals-card .vital:nth-child(2){border-top-color:var(--accent2);box-shadow:inset 0 3px color-mix(in srgb,var(--accent2) 45%,transparent),0 3px 9px rgba(51,31,18,.07)}
.pillar-card .vital:nth-child(1){border-top:3px solid #b94e42}
.pillar-card .vital:nth-child(2){border-top:3px solid #4f8a58}
.pillar-card .vital:nth-child(3){border-top:3px solid #7c55b7}
.vital input{border-bottom-color:color-mix(in srgb,var(--accent) 70%,var(--gold));text-shadow:0 1px white}
.stepper{border-color:color-mix(in srgb,var(--accent) 34%,var(--line2));background:radial-gradient(circle at 35% 25%,#fff,#fff1d7);box-shadow:inset 0 1px white,0 2px 6px rgba(54,31,17,.11);transition:transform .14s ease,box-shadow .18s ease,background .18s ease}
.stepper:active{transform:scale(.94)}
.hp-rules,.turn-strip{box-shadow:inset 0 1px white,0 2px 7px rgba(52,31,18,.06)}
.regroup-btn,.session-btn{position:relative;overflow:hidden;box-shadow:inset 0 1px rgba(255,255,255,.35),0 3px 10px rgba(40,25,15,.20),0 0 13px var(--themeGlow2);transition:transform .16s ease,filter .16s ease,box-shadow .2s ease}

.roll-table{border-color:color-mix(in srgb,var(--accent) 34%,#5d3a25);box-shadow:0 5px 14px rgba(50,28,19,.13),0 0 12px var(--themeGlow2)}
.roll{transition:transform .18s ease,filter .18s ease,box-shadow .2s ease}
.roll-note{padding:5px 7px;border-left:3px solid #e5a73c;border-radius:5px;background:linear-gradient(90deg,rgba(255,229,161,.38),transparent)}
.distance,.conflict div{transition:transform .16s ease,filter .16s ease,box-shadow .2s ease}
.weapon-table tbody tr:nth-child(even){background:color-mix(in srgb,var(--accentSoft) 25%,transparent)}
@media screen and (hover:hover) and (pointer:fine){
  .weapon-table tbody tr:hover{background:color-mix(in srgb,var(--accent2) 13%,white)}
}
.d20-display{filter:drop-shadow(0 0 16px var(--themeGlow2))}
.prism-d20{animation:d20-float 5.2s ease-in-out infinite}
.prism-d20 .spark{animation:spark-pulse 2.4s ease-in-out infinite}

.ability-grimoire-intro{border-color:color-mix(in srgb,var(--accent) 38%,#9b754c);box-shadow:0 7px 20px rgba(55,34,22,.10),0 0 19px var(--themeGlow2),inset 0 1px white}
.ability-grimoire-sigil{position:relative;border:1px solid color-mix(in srgb,var(--accent2) 70%,white);box-shadow:inset 0 1px rgba(255,255,255,.30),0 5px 13px rgba(31,20,12,.16),0 0 22px var(--themeGlow);animation:sigil-pulse 3.6s ease-in-out infinite}
.ability-filter{border-color:color-mix(in srgb,var(--accent) 32%,#9b754c);box-shadow:inset 0 1px white,0 3px 10px rgba(55,34,22,.06)}
.ability-section-head h2{position:relative;text-shadow:0 1px white}
.ability-section-head h2:after{content:"";position:absolute;left:0;bottom:-9px;width:78%;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2),transparent);box-shadow:0 0 8px var(--themeGlow2)}
.abilities-page .ability{border-width:1px;border-top-width:2px;box-shadow:0 5px 15px rgba(56,35,23,.09),inset 0 1px white}
.ability.filled{border-color:color-mix(in srgb,var(--accent) 52%,#9b754c);box-shadow:0 7px 18px rgba(56,35,23,.11),0 0 13px var(--themeGlow2),inset 0 1px white}
.ability.filled:after{content:"◆";position:absolute;right:8px;top:6px;color:var(--accent2);font-size:9px;text-shadow:0 0 8px var(--accent2)}
.ability.duplicate{box-shadow:0 0 0 2px rgba(190,70,70,.62),0 0 14px rgba(190,70,70,.24)}
.ability.prereq-broken{outline:2px solid #c68b20;box-shadow:0 0 0 3px rgba(255,223,134,.30),0 0 16px rgba(198,139,32,.25)}
.ability input,.ability select,.ability textarea{border-radius:5px}
@media screen{
  .ability select.name:focus-visible,.ability input:focus-visible,.ability textarea:focus-visible,
  .hero-name:focus-visible,.fieldbox input:focus-visible,.fieldbox textarea:focus-visible,.profile-item input:focus-visible,.profile-item textarea:focus-visible,.note-box textarea:focus-visible,.role-select:focus-visible{outline:2px solid var(--focusRing);outline-offset:1px;background:color-mix(in srgb,var(--accentSoft) 45%,white);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent2) 14%,transparent),0 0 13px var(--themeGlow2)}
}

.page-number{width:35px;height:35px;border:1px solid color-mix(in srgb,var(--accent) 55%,#8d6739);background:radial-gradient(circle at 35% 28%,#fff,color-mix(in srgb,var(--accentSoft) 78%,white));box-shadow:inset 0 1px white,0 4px 10px rgba(38,22,12,.15),0 0 17px var(--themeGlow)}
.story-page .card{overflow:hidden}
.story-page .note-box textarea{min-height:104px}
.story-page .note-box.wide textarea{min-height:122px}
@media (min-width:761px){
  .story-grid{align-items:start}
  .story-grid>div{display:flex;flex-direction:column;gap:9px;min-width:0}
  .story-grid .card{margin-bottom:0}
}

@keyframes mast-sheen{0%,62%,100%{transform:translateX(-42%)}78%{transform:translateX(42%)}}
@keyframes rune-spin{to{transform:rotate(360deg)}}
@keyframes spark-pulse{0%,100%{opacity:.48;transform:scale(.82)}50%{opacity:1;transform:scale(1.16)}}
@keyframes sigil-pulse{0%,100%{transform:rotate(-2deg) scale(1);filter:brightness(1)}50%{transform:rotate(2deg) scale(1.035);filter:brightness(1.1)}}
@keyframes d20-float{0%,100%{transform:translateY(0) rotate(-.35deg)}50%{transform:translateY(-7px) rotate(.35deg)}}

@media screen and (hover:hover) and (pointer:fine){
  .card:hover{border-color:color-mix(in srgb,var(--accent2) 40%,var(--accent));box-shadow:0 8px 22px rgba(70,39,20,.11),0 0 14px var(--themeGlow2),inset 0 1px white}
}
@media (max-width:760px){
  body:after{display:none}
  .mast{grid-template-columns:58px minmax(0,1fr);min-height:72px;gap:10px;padding:6px 10px 6px 7px}
  .emblem{width:58px;height:58px}
  .bb-logo{width:70px;height:70px}
  .brand{font-size:22px;letter-spacing:.095em}
  .tagline{font-size:10.5px;margin-top:7px}
  .page{border-width:2px}
  .story-grid>div{display:block}
  .story-grid .card{margin-bottom:9px}
  .prism-d20{animation-duration:6.4s}
  .save-indicator{margin-left:auto}
}
@media (max-width:480px){
  .toolbar .save-indicator{flex:1 1 100%;justify-content:center;order:4}
  .toolbar .status{order:5;text-align:center}
  .mast{grid-template-columns:52px minmax(0,1fr)}
  .emblem{width:52px;height:52px}
  .bb-logo{width:63px;height:63px}
  .brand{font-size:19px;letter-spacing:.075em}
  .tagline{font-size:9.8px}
  .card-title{letter-spacing:.055em}
}
@media print{
  html,body{width:8.5in;min-width:8.5in;background:#fff!important}
  body:before,body:after{display:none!important}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .sheet{width:auto;max-width:none;margin:0}
  .page{zoom:1!important;width:8.5in!important;height:auto!important;min-height:11in!important;margin:0!important;padding:.38in .42in!important;border-width:3px!important;border-radius:0!important;overflow:visible!important;box-shadow:none!important;page-break-after:always!important;break-after:page!important}
  /* The front is a fixed one-page reference. Its denser layout is scaled as a
     single unit; the variable-length pages print at true letter size. */
  .front-page{zoom:.75!important;width:11.3333in!important;height:14.6667in!important;min-height:14.6667in!important;padding:.42in .48in!important;overflow:hidden!important}
  .abilities-page,.story-page{zoom:1!important;width:8.5in!important;height:auto!important;min-height:11in!important;padding:.38in .42in!important;overflow:visible!important;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .page:last-child{page-break-after:auto!important;break-after:auto!important}
  .mast{min-height:82px;box-shadow:inset 0 1px rgba(255,255,255,.15),inset 0 -4px rgba(0,0,0,.16)!important}
  .emblem:before,.emblem:after{animation:none!important}
  .prism-d20,.prism-d20 .spark,.ability-grimoire-sigil,.mast:after{animation:none!important}
  .card,.ability,.hero-name-wrap,.role-wrap,.profile-item,.note-box{box-shadow:none!important;transform:none!important}
  .story-grid{display:block!important}
  .story-grid>div{display:block!important}
  .story-grid .card{margin-bottom:9px!important}
  .story-page .card,.story-page .note-box,.story-page .profile-item{break-inside:auto!important}
  .story-page .card-title,.story-page .micro{break-after:avoid-page}
  .abilities-page .ability{break-inside:avoid-page!important}
  input,textarea,select{font-size:13px!important}
  .front-page .page-number{box-shadow:none!important}
  .abilities-page .page-number,.story-page .page-number{display:none!important}
  .print-ability-reference{zoom:1}
}

/* --- Briarbound: max HP, current Pillar balances, growth slots --- */
/* The HP row carries two inputs now (current and max) plus both steppers, so the
   original single-input widths overflow the column. */
.vitals-card .vital:first-child .value{gap:2px}
.vitals-card .vital:first-child input[data-key="hp"]{width:46px}
.vital input.maxhp{width:38px;font-size:18px;opacity:.85;border-bottom-color:var(--line2)}
.vital .value .fixed{opacity:.5;font-size:18px;margin:0 -1px}
@media (max-width:480px){
  .vitals-card .vital:first-child input[data-key="hp"]{width:40px}
  .vital input.maxhp{width:34px;font-size:16px}
}

.add-slot-btn{flex:0 0 auto;min-height:26px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:999px;padding:0 10px;cursor:pointer;font-family:var(--display);font-weight:900;font-size:10px;letter-spacing:.06em;color:var(--accentDark);background:rgba(255,255,255,.8)}
.add-slot-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.add-slot-btn[disabled]{opacity:.45;cursor:not-allowed}
@media print{.add-slot-btn{display:none!important}}

/* On-screen readability. The sheet is played by kids at arm's length; print keeps
   its tighter sizes because paper holds far more detail per inch than a screen. */
@media screen{
  .card-sub,.ability-grimoire-intro span{font-size:12px;line-height:1.42}
  .micro{font-size:10px;letter-spacing:.1em}
  .roll strong{font-size:18px}
  .roll span{font-size:9.4px;line-height:1.2}
  .roll-note{font-size:11px;line-height:1.4}
  .hp-rules strong{font-size:12.5px}
  .quick-list{font-size:11px;line-height:1.35}
  .hp-rules .quick-list{font-size:10.5px;line-height:1.3}
  .pillar-costs{font-size:10.5px;line-height:1.3}
  .pillar-map{font-size:9.5px}
  .unarmed,.session-hint,.ability-section-head p{font-size:11px;line-height:1.35}
  .conflict small{font-size:9.6px;line-height:1.25}
  .distance b{font-size:12px}
  .ability-filter{font-size:12px}
  .ability-count{font-size:10px}
  .dupe-flag{font-size:10px}
}
@media screen and (max-width:480px){
  .roll strong{font-size:16px}
  .roll span{font-size:8.6px}
  .conflict small{font-size:9px}
}

/* ================================================================
   BRIARBOUND POLISH PASS · REVISION 4
   Effect-preserving containment, responsive control fit, and stable print flow.
   ================================================================ */
.mast{isolation:isolate}
.mast:after{inset:0;border-radius:inherit;transform:none;background-size:235% 100%;background-position:115% 0;background-repeat:no-repeat;animation:mast-sheen-contained 7s ease-in-out infinite}
@keyframes mast-sheen-contained{0%,62%,100%{background-position:115% 0}78%{background-position:-115% 0}}

.story-page{padding-bottom:.68in}

/* Keep the enchanted frame light clean: the parchment texture stays beneath
   the inner frame, and only inset light is clipped by the page edge. */
.page:before{z-index:1;box-shadow:inset 0 0 0 2px rgba(255,255,255,.32),inset 0 0 34px var(--themeGlow)}

/* Nested focus and button glows should clear their cards instead of ending in
   a hard rectangle. The top rune is inset so it still follows the corners. */
.card,.story-page .card{overflow:visible}
.card:before{left:7px;right:7px;border-radius:999px}

/* The halo already has two soft bloom layers. Shadow the die itself so those
   blurred layers are not filtered a second time into a boxy-looking haze. */
.d20-display{filter:none}
.prism-d20{filter:drop-shadow(0 18px 18px rgba(30,15,26,.21)) drop-shadow(0 0 14px var(--themeGlow2))}

/* These are quick-reference hover tiles. Prevent accidental blue selection
   while the pointer travels across them, without changing their content. */
.roll-table>.roll,.distance-grid>.distance{cursor:default}

/* Keep the circular counters circular inside the dense desktop cards. */
.stepper{flex:0 0 34px}
.pillar-card .vital .value{gap:2px}
.pillar-card .stepper{width:25px;height:25px;flex-basis:25px;font-size:15px}
.pillar-card .vital input{width:32px;font-size:20px}
.vitals-card .vital:first-child .stepper{width:27px;height:27px;flex-basis:27px;font-size:16px}
.vitals-card .vital:first-child input[data-key="hp"]{width:38px}
.vitals-card .vital:first-child input.maxhp{width:29px}
.vitals-card .vital:first-child .fixed{font-size:15px}

.session-dialog{width:min(560px,calc(100% - 24px))}
.session-dialog .ability-dialog-inner{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.session-dialog-copy{font-size:13px;line-height:1.5;color:#654d3c;margin:0 0 12px}
.session-question{margin:4px 0 8px;font-size:12px;font-weight:850;color:#5b4332}
.session-pillar-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:4px 0 15px}
.session-pillar-option{position:relative;cursor:pointer;min-width:0}
.session-pillar-option input{position:absolute;opacity:0;pointer-events:none}
.session-pillar-option span{min-height:78px;display:grid;place-items:center;align-content:center;gap:3px;padding:10px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line2));border-radius:12px;background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--accentSoft) 32%,white));box-shadow:inset 0 1px white,0 3px 10px rgba(48,29,17,.08);font-family:var(--display);font-weight:900;color:var(--accentDark);text-align:center;transition:transform .16s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}
.session-pillar-option small{display:block;font-family:var(--body);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#735c48}
.session-pillar-option input:checked+span{border-color:var(--accent2);background:linear-gradient(145deg,color-mix(in srgb,var(--accentSoft) 70%,white),#fff);box-shadow:inset 0 1px white,0 0 0 3px color-mix(in srgb,var(--accent2) 22%,transparent),0 0 18px var(--themeGlow2);transform:translateY(-1px)}
.session-pillar-option input:focus-visible+span{outline:3px solid var(--focusRing);outline-offset:2px}
.session-dialog-actions{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line)}
.session-dialog-actions button{min-height:40px;border-radius:10px;padding:0 15px;font-family:var(--display);font-weight:900;cursor:pointer}
.session-dialog-cancel{border:1px solid var(--line2);background:#fff8e9;color:var(--walnut2)}
.session-dialog-award{border:0;background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.35),0 3px 11px rgba(40,25,15,.2),0 0 14px var(--themeGlow2)}
.session-dialog-actions button:focus-visible{outline:3px solid var(--focusRing);outline-offset:2px}
.session-pillar-error{margin:-5px 0 12px;padding:9px 11px;border:1px solid #b84a4a;border-radius:9px;background:#fff0ee;color:#711f1f;font-size:12px;font-weight:850}
.session-pillar-options[aria-invalid="true"]{outline:3px solid rgba(184,74,74,.28);outline-offset:5px;border-radius:10px}
.session-ability{display:grid;gap:5px;margin:0 0 5px;font-size:11px;font-weight:900;color:var(--accentDark)}
.session-ability select{width:100%;min-height:44px;border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line2));border-radius:10px;background:#fff;padding:0 10px}
.session-ability-help{margin:0 0 13px;font-size:10.5px;line-height:1.4;color:#6b5341}
.session-preview{margin:16px 0;padding:16px;border:1px solid var(--line2);border-radius:12px;background:#fffbf1;color:var(--walnut2)}
.session-preview h3{margin:0 0 5px;font:900 20px var(--display);color:var(--accentDark)}
.session-preview-meta{font-size:14px;line-height:1.5;color:#654d3c}
.session-preview-rules{white-space:pre-wrap;font-size:16px;line-height:1.55;margin:12px 0 0;overflow-wrap:anywhere}
.session-preview details{margin-top:12px}
.session-preview summary{min-height:44px;padding:10px 0;font-size:14px;font-weight:850;cursor:pointer}
.session-ledger{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.session-ledger caption{text-align:left;font-weight:900;margin:16px 0 7px;color:var(--accentDark)}
.session-ledger th,.session-ledger td{padding:8px 3px;text-align:right;border-bottom:1px solid var(--line)}
.session-ledger th:first-child{text-align:left}
.session-ledger thead{font-size:12px;color:#654d3c}
.session-ledger td:last-child{font-weight:900;color:var(--accentDark)}
.session-preview-note{margin:10px 0 0;font-size:14px;line-height:1.5;color:#654d3c}
.session-dialog .session-ability,.session-dialog .session-question,.session-dialog .session-ability-help,.session-dialog .session-dialog-copy{font-size:14px}
.session-dialog .session-pillar-option small{font-size:12px;letter-spacing:0;text-transform:none}
.session-dialog .session-pillar-option span{padding:8px 5px}

@media screen and (hover:hover) and (pointer:fine){
  .toolbar button:hover,.more-menu summary:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:inset 0 1px rgba(255,255,255,.35),0 4px 12px rgba(0,0,0,.24),0 0 13px var(--themeGlow2)}
  .toolbar>button:hover,.toolbar>.more-menu:hover{z-index:3}
  .stepper:hover{transform:scale(1.08);background:linear-gradient(135deg,color-mix(in srgb,var(--accent2) 24%,white),#fff6df);box-shadow:inset 0 1px white,0 3px 9px rgba(54,31,17,.15),0 0 12px var(--themeGlow2)}
  .regroup-btn:hover,.session-btn:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:inset 0 1px rgba(255,255,255,.38),0 5px 13px rgba(40,25,15,.22),0 0 19px var(--themeGlow2)}
  .roll:hover{transform:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.62),inset 0 0 18px rgba(255,255,255,.38),inset 0 -4px 8px rgba(49,28,19,.08)}
  .roll.triumph:hover{box-shadow:inset 0 0 17px rgba(255,255,255,.74),inset 0 0 0 2px rgba(255,255,255,.62),inset 0 -4px 8px rgba(49,28,19,.08)}
  .distance:hover{transform:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.64),inset 0 0 16px rgba(255,255,255,.34),inset 0 -4px 8px rgba(49,28,19,.08)}
  .conflict div:hover{z-index:2;transform:translateY(-1px);filter:saturate(1.07);box-shadow:0 4px 10px rgba(40,27,17,.14)}
  .card:hover{z-index:2}
  .abilities-page .ability:hover{z-index:2;transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent2) 50%,var(--accent));box-shadow:0 8px 20px rgba(56,35,23,.12),0 0 15px var(--themeGlow2),inset 0 1px white}
  .add-slot-btn:not(:disabled):hover{background:var(--accentSoft);box-shadow:0 0 12px var(--themeGlow2)}
  .session-pillar-option:hover span{border-color:color-mix(in srgb,var(--accent2) 55%,var(--accent));box-shadow:inset 0 1px white,0 5px 14px rgba(48,29,17,.11),0 0 13px var(--themeGlow2)}
  .session-dialog-actions button:not(:disabled):hover{transform:translateY(-1px);filter:brightness(1.06)}
}

@media screen and (max-width:880px) and (min-width:761px){
  .front-page>.grid2{grid-template-columns:1fr}
}
@media screen and (max-width:880px){
  .pillar-card .stepper,.vitals-card .vital:first-child .stepper{width:34px;height:34px;flex-basis:34px;font-size:18px}
  .pillar-card .vital input{width:48px;font-size:24px}
  .vitals-card .vital:first-child input[data-key="hp"]{width:46px}
  .vitals-card .vital:first-child input.maxhp{width:38px;font-size:18px}
  .vitals-card .vital:first-child .fixed{font-size:18px}
}
@media screen and (max-width:760px){
  .app{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
}
@media screen and (max-width:600px){
  .ability-filter{flex-wrap:wrap;align-items:flex-start}
  .ability-filter .filter-note{flex:1 0 100%;text-align:left}
}
@media screen and (max-width:520px){
  .weapon-table colgroup,.weapon-table thead{display:none}
  .weapon-table,.weapon-table tbody{display:block;width:100%}
  .weapon-table tr{display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:7px;padding:8px 0;border-top:1px solid var(--line)}
  .weapon-table tr:first-child{border-top:0}
  .weapon-table td{display:grid;gap:3px;padding:0;border-top:0;min-width:0}
  .weapon-table td:nth-child(3){grid-column:1 / -1}
  .weapon-table td:before{content:attr(data-label);font-size:8.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#765b3d}
  .weapon-table textarea,.weapon-table select{border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line2));border-radius:7px;background:rgba(255,255,255,.62)}
  .vitals-card .vitals,.pillar-card .vitals{grid-template-columns:1fr!important}
  .pillar-card .vital .value,.vitals-card .vital:first-child .value{gap:5px}
  .pillar-card .stepper,.vitals-card .vital:first-child .stepper{width:38px;height:38px;flex-basis:38px;font-size:18px}
  .pillar-card .vital input{width:54px;font-size:25px}
  .vitals-card .vital:first-child input[data-key="hp"]{width:46px}
  .vitals-card .vital:first-child input.maxhp{width:38px;font-size:18px}
  .vitals-card .vital:first-child .fixed{font-size:18px}
  .session-pillar-options{grid-template-columns:1fr}
  .session-pillar-option span{min-height:58px}
}
@media screen and (max-width:480px){
  .toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center}
  .toolbar>select{grid-column:1/-1;width:100%}
  .toolbar>button,.toolbar>.rules-link,.toolbar>.discord-link,.toolbar>.more-menu{width:100%;min-width:0;padding:0}
  .toolbar>button{padding:0 5px}
  .toolbar>.more-menu{height:42px}
  .toolbar>button,.toolbar>.rules-link,.toolbar>.discord-link,.toolbar>.more-menu{grid-column:span 2}
  .more-menu summary{width:100%;padding:0 5px}
  .toolbar .save-indicator,.toolbar .status{grid-column:1/-1;margin-left:0}
  .toolbar .save-indicator{order:initial}
  .toolbar .status{order:initial;text-align:center}
  .distance:nth-child(2n){border-right:0}
  .distance:nth-child(n+3){border-top:1px solid rgba(255,255,255,.58)}
  .d20-display{margin-inline:20px}
  .prism-d20{width:min(100%,270px)}
  .story-page{padding-bottom:64px}
  .session-dialog-actions button{flex:1 1 140px}
}
@media print{
  .session-dialog{display:none!important}
  .mast:after{background-position:50% 0!important}
  .story-page .card{overflow:visible!important}
  .story-page .inventory,.story-page .profile-grid{display:block!important}
  .story-page .note-box,.story-page .profile-item{margin-bottom:7px}
}

/* ================================================================
   FRAME STABILITY + INTENTIONAL CURSORS
   One ambient glow owner per frame; only real fields select text.
   ================================================================ */
:root{
  --frameHalo:color-mix(in srgb,var(--accent) 22%,transparent);
  --frameFocus:color-mix(in srgb,var(--accent2) 34%,transparent);
  --frameRing:color-mix(in srgb,var(--accent2) 42%,transparent);
}

/* Page depth is separated from the colored halo, and desktop pages leave
   enough room that neighboring halos do not merge into a dark band. */
@media screen and (min-width:761px){
  .page{margin-bottom:32px;box-shadow:0 20px 48px rgba(7,4,2,.38),0 6px 16px rgba(7,4,2,.20),0 0 12px var(--frameHalo),inset 0 0 0 1px rgba(255,255,255,.5)}
}
@media screen and (max-width:760px){
  .page{box-shadow:none}
}

/* Rogue uses two texture layers, not the four-layer sizing inherited from the
   generic parchment. This prevents repeating dark patches and moire. */
:root[data-role="rogue"] .page:after{background-size:auto,100% 100%;background-repeat:repeat,no-repeat}

/* Restore the grimoire's intended lighting after the generic page surface. */
.page.abilities-page{background:
  radial-gradient(circle at 84% 8%,var(--themeGlow2),transparent 22rem),
  radial-gradient(circle at 9% 84%,var(--themeGlow),transparent 25rem),
  linear-gradient(180deg,var(--themePageWash),transparent 3.25in),
  linear-gradient(140deg,rgba(255,255,255,.62),transparent 44%),
  repeating-linear-gradient(92deg,rgba(117,82,44,.018) 0 1px,transparent 1px 6px),
  var(--themeSurface)}

/* Every role now uses the same frame construction. Role colors still flow
   through the theme variables, but no role can replace the shadow stack. */
:root .mast,
:root[data-role] .mast{background:
  linear-gradient(90deg,rgba(255,255,255,.06),transparent 18% 82%,rgba(255,255,255,.035)),
  repeating-linear-gradient(4deg,rgba(255,255,255,.022) 0 1px,transparent 1px 8px),
  linear-gradient(118deg,var(--walnut2),var(--themeDeep) 58%,color-mix(in srgb,var(--accentDark) 86%,#05060c));
  box-shadow:inset 0 1px rgba(255,255,255,.15),inset 0 -5px rgba(0,0,0,.20),0 8px 22px rgba(31,17,9,.28),0 0 18px var(--frameHalo);overflow:hidden}
:root .role-wrap,
:root[data-role] .role-wrap{border-color:color-mix(in srgb,var(--accent) 35%,#9a7144);box-shadow:0 5px 16px rgba(47,28,18,.09),inset 0 1px rgba(255,255,255,.88)}
:root .role-select,
:root[data-role] .role-select{box-shadow:inset 5px 0 0 var(--accent)}
.card-title .icon,
:root[data-role] .card-title .icon{background:radial-gradient(circle at 35% 25%,white,color-mix(in srgb,var(--accent2) 25%,white) 45%,color-mix(in srgb,var(--accent) 26%,white));box-shadow:inset 0 1px white,inset 0 -2px rgba(0,0,0,.07),0 3px 7px rgba(54,30,15,.12)}

/* Briarwood Field Seals: bold, carved storybook marks that stay legible when
   the front sheet is reduced for print. Filled silhouettes carry the meaning;
   pale cuts add the handmade, engraved character. */
.card-title .icon,
:root[data-role] .card-title .icon{
  --icon-ink:color-mix(in srgb,var(--accentDark) 84%,#1d120c);
  --icon-carve:color-mix(in srgb,var(--themeSurface) 88%,white);
  position:relative;isolation:isolate;flex:0 0 30px;width:30px;height:30px;margin-top:-2px;
  border:2px solid color-mix(in srgb,var(--accent) 48%,#815b2e);
  border-radius:46% 54% 48% 52% / 53% 46% 54% 47%;
  outline:1px solid rgba(255,255,255,.72);outline-offset:-4px;
  background:radial-gradient(circle at 31% 24%,rgba(255,255,255,.98) 0 10%,transparent 11%),linear-gradient(145deg,color-mix(in srgb,var(--accentSoft) 78%,white),color-mix(in srgb,var(--accent2) 30%,white));
  color:var(--icon-ink);
}
.card-title .icon{transform:rotate(-2.5deg)}
.card-title .icon[data-sigil="pillars"],.card-title .icon[data-sigil="distance"],.card-title .icon[data-sigil="pack"],.card-title .icon[data-sigil="session"]{transform:rotate(2deg)}
.card-title .icon svg{display:block;width:22px;height:22px;overflow:visible;fill:none;stroke:none}
.card-title .icon .icon-shape,.ability-grimoire-sigil .icon-shape{fill:currentColor;stroke:none}
.card-title .icon .icon-line,.ability-grimoire-sigil .icon-line{fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.card-title .icon .icon-carve,.ability-grimoire-sigil .icon-carve{fill:none;stroke:var(--icon-carve);stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.card-title .icon .icon-inlay,.ability-grimoire-sigil .icon-inlay{fill:var(--icon-carve);stroke:none}
.card-title .icon .icon-number{fill:var(--icon-carve);font:950 6.5px/1 var(--body);letter-spacing:-.08em;text-anchor:middle;dominant-baseline:middle}
.ability-grimoire-sigil{--icon-carve:var(--accentDark)}
.ability-grimoire-sigil svg{display:block;width:36px;height:36px;fill:none;stroke:none}

@media print{
  .card-title .icon,:root[data-role] .card-title .icon{--icon-ink:#2b211b;--icon-carve:#fff;color:#2b211b;background:#fff;border:1.5px solid #5a4432;outline:1px solid #b8a58e;transform:none}
}
:root[data-role="alchemist"] .vitals-card .vital:first-child{border-color:rgba(207,85,97,.36);box-shadow:inset 0 3px rgba(207,85,97,.35),0 3px 9px rgba(51,31,18,.07)}

/* Keep the logo's localized magic inside the mast instead of letting three
   separate glows cross the frame edge. */
.emblem{box-shadow:inset 0 0 18px rgba(89,246,222,.19),0 7px 15px rgba(0,0,0,.34)}
.bb-logo{width:76px;height:76px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.54)) drop-shadow(0 0 7px rgba(77,239,224,.55))}

/* The toolbar owns its halo; controls keep depth and lift without painting a
   second blurred rectangle inside it. */
.toolbar{box-shadow:inset 0 1px rgba(255,255,255,.12),inset 0 -3px rgba(0,0,0,.25),0 14px 34px rgba(0,0,0,.34),0 0 18px var(--frameHalo)}
.toolbar[data-role] button:not(.secondary){box-shadow:inset 0 1px rgba(255,255,255,.3),0 2px 7px rgba(0,0,0,.20)}
.more-menu[open]{z-index:4}

/* Outer frames own focus. Nested field shells and controls use crisp inset
   rings, so focus never creates stacked or clipped rectangular haze. */
@media screen{
  .hero-name-wrap:focus-within,
  :root .role-wrap:focus-within,
  :root[data-role] .role-wrap:focus-within{z-index:3;border-color:var(--focusRing);box-shadow:0 7px 22px rgba(47,28,18,.12),0 0 10px var(--frameFocus),inset 0 1px white}
  .fieldbox:focus-within,.profile-item:focus-within,.note-box:focus-within{border-color:color-mix(in srgb,var(--accent2) 62%,var(--accent));box-shadow:inset 0 0 0 2px var(--frameRing),inset 0 1px white}
}
.card{box-shadow:0 5px 15px rgba(70,39,20,.085),inset 0 1px rgba(255,255,255,.88)}
@media screen{
  .card:focus-within{z-index:3;border-color:color-mix(in srgb,var(--accent2) 58%,var(--accent));box-shadow:0 8px 22px rgba(70,39,20,.12),0 0 10px var(--frameFocus),inset 0 1px white}
}
#pillarBadge{box-shadow:inset 0 1px white,0 2px 8px rgba(52,31,18,.10)}

.ability input,.ability select,.ability textarea,
.hero-name,.fieldbox input,.fieldbox textarea,.profile-item input,.profile-item textarea,.note-box textarea{box-shadow:none}
@media screen{
  .ability select.name:focus-visible,.ability input:focus-visible,.ability textarea:focus-visible,
  .hero-name:focus-visible,.fieldbox input:focus-visible,.fieldbox textarea:focus-visible,.profile-item input:focus-visible,.profile-item textarea:focus-visible,.note-box textarea:focus-visible,
  .vital input:focus-visible,.line-input input:focus-visible,.line-input textarea:focus-visible,.weapon-table textarea:focus-visible,.weapon-table select:focus-visible{outline:2px solid var(--focusRing);outline-offset:-1px;border-radius:4px;background:color-mix(in srgb,var(--accentSoft) 45%,white);box-shadow:none}
  :root .role-select:focus-visible,
  :root[data-role] .role-select:focus-visible{outline:0;background:color-mix(in srgb,var(--accentSoft) 45%,white);box-shadow:inset 5px 0 0 var(--accent),inset 0 0 0 2px var(--frameRing)}
}

/* Ability depth is composed once. Filled state changes an inset token;
   validation stays in one outline and therefore survives hover and focus. */
.ability{--abilityInset:transparent}
.ability.filled{--abilityInset:color-mix(in srgb,var(--accent2) 28%,transparent)}
.abilities-page .ability{box-shadow:0 5px 15px rgba(56,35,23,.09),inset 0 0 0 1px var(--abilityInset),inset 0 1px white}
.ability.prereq-broken{outline:2px solid #b8860b;outline-offset:2px}
.ability.duplicate{outline:2px solid rgba(190,70,70,.72);outline-offset:2px}
.ability.prereq-broken.duplicate{outline-color:rgba(190,70,70,.78)}
@media screen{
  .abilities-page .ability:focus-within{z-index:3;border-color:color-mix(in srgb,var(--accent2) 58%,var(--accent));box-shadow:0 8px 22px rgba(56,35,23,.13),0 0 10px var(--frameFocus),inset 0 0 0 1px var(--abilityInset),inset 0 1px white}
}

/* Joined reference frames own their depth; child tiles retain inset hover
   light. The die's ambient color stays in its bloom pseudos and SVG neon. */
.roll-table{box-shadow:0 5px 14px rgba(50,28,19,.13)}
.d20-display{filter:none}
.prism-d20{filter:drop-shadow(0 18px 18px rgba(30,15,26,.21))}
.ability-grimoire-intro{box-shadow:0 7px 20px rgba(55,34,22,.10),inset 0 1px white}

/* Buttons can still lift, but their shadows remain local to their shape. */
.regroup-btn,.session-btn{box-shadow:inset 0 1px rgba(255,255,255,.35),0 3px 10px rgba(40,25,15,.20)}
.session-pillar-option input:checked+span{box-shadow:inset 0 1px white,0 0 0 3px var(--frameRing)}
.session-dialog-award{box-shadow:inset 0 1px rgba(255,255,255,.35),0 3px 11px rgba(40,25,15,.20)}
@media screen{
  .stepper:focus-visible{outline:2px solid var(--focusRing);outline-offset:0}
}

@media screen and (hover:hover) and (pointer:fine){
  .toolbar button:hover,.more-menu summary:hover,.toolbar[data-role] button:not(.secondary):hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:inset 0 1px rgba(255,255,255,.35),0 4px 12px rgba(0,0,0,.24)}
  .card:hover{z-index:2;border-color:color-mix(in srgb,var(--accent2) 40%,var(--accent));box-shadow:0 8px 22px rgba(70,39,20,.11),0 0 8px var(--frameFocus),inset 0 1px white}
  .stepper:hover{transform:scale(1.06);background:linear-gradient(135deg,color-mix(in srgb,var(--accent2) 24%,white),#fff6df);box-shadow:inset 0 1px white,0 3px 9px rgba(54,31,17,.15)}
  .regroup-btn:hover,.session-btn:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:inset 0 1px rgba(255,255,255,.38),0 5px 13px rgba(40,25,15,.22)}
  .abilities-page .ability:hover{z-index:2;transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent2) 50%,var(--accent));box-shadow:0 8px 20px rgba(56,35,23,.12),0 0 8px var(--frameFocus),inset 0 0 0 1px var(--abilityInset),inset 0 1px white}
  .add-slot-btn:not(:disabled):hover{background:var(--accentSoft);box-shadow:0 3px 8px rgba(54,31,17,.12)}
  .session-pillar-option:hover span{border-color:color-mix(in srgb,var(--accent2) 55%,var(--accent));box-shadow:inset 0 1px white,0 4px 11px rgba(48,29,17,.11)}
  .card:focus-within{z-index:3;box-shadow:0 8px 22px rgba(70,39,20,.12),0 0 10px var(--frameFocus),inset 0 1px white}
  .abilities-page .ability:focus-within{z-index:3;box-shadow:0 8px 22px rgba(56,35,23,.13),0 0 10px var(--frameFocus),inset 0 0 0 1px var(--abilityInset),inset 0 1px white}
}

/* Static copy never asks for an I-beam. Actual editable fields explicitly opt
   back into text selection; real controls retain their action cursors. */
@media screen{
  body{cursor:default;-webkit-user-select:none;user-select:none}
  input:not([type]):not([readonly]):not(:disabled),
  input[type="text"]:not([readonly]):not(:disabled),
  input[type="search"]:not([readonly]):not(:disabled),
  input[type="email"]:not([readonly]):not(:disabled),
  input[type="tel"]:not([readonly]):not(:disabled),
  input[type="url"]:not([readonly]):not(:disabled),
  input[type="password"]:not([readonly]):not(:disabled),
  input[type="number"]:not([readonly]):not(:disabled),
  textarea:not([readonly]):not(:disabled),[contenteditable="true"]{-webkit-user-select:text;user-select:text;cursor:text}
  input[readonly],textarea[readonly],[aria-readonly="true"]{-webkit-user-select:none;user-select:none;cursor:default}
  button:not(:disabled),select:not(:disabled),summary,a[href],[role="button"]:not([aria-disabled="true"]),
  input[type="checkbox"]:not(:disabled),input[type="radio"]:not(:disabled),input[type="file"]:not(:disabled),
  .ability-filter label,.prereq-toggle,.session-pillar-option{cursor:pointer}
  button:disabled,select:disabled,input:disabled,textarea:disabled,[aria-disabled="true"]{cursor:not-allowed!important}
  .roll-table>.roll,.distance-grid>.distance{cursor:default}
}

@media screen and (max-width:760px){
  .emblem,.bb-logo{width:58px;height:58px}
}
@media screen and (max-width:480px){
  .emblem,.bb-logo{width:52px;height:52px}
  .roll-table{gap:0}
}

/* STABLE RENDERING MODE
   The previous enchanted frame system stacked blurred shadows, filters,
   backdrop blur, blend layers, and animated highlights across three pages.
   Chrome had to repaint and composite those layers while scrolling. Keep the
   color, gradients, borders, and D20 motion; remove the unstable lighting. */
@media screen{
  *,*::before,*::after{
    box-shadow:none!important;
    filter:none!important;
    -webkit-filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    mix-blend-mode:normal!important;
  }
  body::before,body::after,.page::before,.page::after{display:none!important}
  body,.toolbar,.page,.mast,.hero-name-wrap,.role-wrap,.role-select,
  .card,.profile-item,.note-box,.ability{transition:none!important}
  .card,.story-page .card{overflow:hidden}

  /* Keep the banner unmistakably alive without reviving the expensive blurred
     lighting stack. The traveling light is a narrow, clipped compositor layer;
     the logo and title move only inside the mast. */
  .mast{overflow:hidden}
  .mast::after{
    display:block!important;
    inset:-24% auto -24% -58%;
    width:58%;
    border-radius:42%;
    background:linear-gradient(102deg,transparent 0 24%,rgba(99,242,224,.14) 34%,rgba(255,239,169,.48) 47%,rgba(255,255,230,.78) 51%,rgba(111,203,255,.26) 59%,transparent 72%);
    opacity:.96;
    transform:skewX(-12deg) translate3d(0,0,0);
    animation:briarbound-banner-sheen 8.4s cubic-bezier(.34,.05,.2,1) infinite;
    will-change:transform;
  }
  @keyframes briarbound-banner-sheen{
    0%,6%{transform:skewX(-12deg) translate3d(0,0,0)}
    34%,100%{transform:skewX(-12deg) translate3d(285%,0,0)}
  }
  .emblem{animation:briarbound-banner-emblem 4.2s ease-in-out infinite;will-change:transform}
  @keyframes briarbound-banner-emblem{
    0%,100%{transform:translate3d(0,0,0) rotate(-2deg) scale(1)}
    46%{transform:translate3d(0,-2px,0) rotate(1deg) scale(1.035)}
  }
  .brand{
    background-image:linear-gradient(108deg,transparent 0 38%,rgba(255,255,241,.98) 48%,transparent 58%),linear-gradient(180deg,#fff5c7 0%,#f4cb74 42%,#bf7627 78%,#ffe8a4 100%);
    background-size:240% 100%,100% 100%;
    background-position:130% 0,0 0;
    animation:briarbound-title-glint 8.4s ease-in-out infinite;
  }
  .brand::after{background-size:220% 100%;animation:briarbound-rune-line 3.1s linear infinite}
  @keyframes briarbound-title-glint{
    0%,5%,50%,100%{background-position:130% 0,0 0}
    36%{background-position:-95% 0,0 0}
  }
  @keyframes briarbound-rune-line{
    from{background-position:110% 0}
    to{background-position:-110% 0}
  }

  /* Stop decorative repaint loops outside the lightweight D20 transform. */
  .emblem::before,.emblem::after,.ability-grimoire-sigil{animation:none!important}

  /* The old blurred D20 bloom is replaced by static, unfiltered color. */
  .d20-display::before{
    inset:8% 5%;
    background:
      radial-gradient(circle at 24% 35%,rgba(255,79,169,.19),transparent 43%),
      radial-gradient(circle at 76% 35%,rgba(76,166,255,.18),transparent 43%),
      radial-gradient(circle at 50% 76%,rgba(77,229,178,.16),transparent 48%);
    opacity:.72;
  }
  .d20-display::after{inset:24% 22%;background:radial-gradient(circle,rgba(255,255,255,.30),transparent 68%)}

  /* Frames no longer promote, lift, or repaint on hover/focus. Direct controls
     retain crisp outlines below, so keyboard focus remains unambiguous. */
  .hero-name-wrap:focus-within,.role-wrap:focus-within,
  .fieldbox:focus-within,.profile-item:focus-within,.note-box:focus-within,
  .card:hover,.card:focus-within,
  .abilities-page .ability:hover,.abilities-page .ability:focus-within,
  .conflict div:hover{transform:none!important;z-index:auto!important}
  .card:hover,.card:focus-within{border-color:color-mix(in srgb,var(--accent) 24%,#9b754c)!important}
  .abilities-page .ability:hover,.abilities-page .ability:focus-within{border-color:color-mix(in srgb,var(--accent) 25%,var(--line))!important}
  .hero-name-wrap:focus-within,.role-wrap:focus-within{border-color:color-mix(in srgb,var(--accent) 35%,#9a7144)!important}
  .fieldbox:focus-within,.profile-item:focus-within,.note-box:focus-within{border-color:color-mix(in srgb,var(--accent) 18%,var(--line2))!important}

  input:focus-visible,textarea:focus-visible,select:focus-visible,
  button:focus-visible,summary:focus-visible{
    outline:2px solid var(--focusRing)!important;
    outline-offset:1px!important;
  }
  .role-select{border-left:5px solid var(--accent)!important}
  .session-pillar-option input:checked+span{outline:3px solid color-mix(in srgb,var(--accent2) 55%,var(--accent));outline-offset:-3px}
  .session-pillar-option input:focus-visible+span{outline:3px solid var(--focusRing)!important;outline-offset:2px!important}
  .roll:hover,.distance:hover{outline:2px solid rgba(255,255,255,.62);outline-offset:-2px}
  .prism-d20 .edge-glow{stroke-width:5;opacity:.32}

  /* Let the masthead, role, save state, and D20 carry the magic. Everyday
     writing surfaces stay quieter so play information wins the hierarchy. */
  .card,.profile-item,.note-box,.ability{
    background:rgba(255,253,247,.91)!important;
    border-color:color-mix(in srgb,var(--accent) 16%,#a88a68)!important;
  }
  .card::before{opacity:.38}
  .ability-grimoire-intro{background:rgba(255,253,247,.88)}
  .fieldbox,.vital{background:rgba(255,255,255,.82)}
}

/* --- Shippable polish: healing, inventory, validation, and trials --- */
.hp-rules-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.blood-btn{
  background:linear-gradient(135deg,#8b2e3a,#c45c4a)!important;
  color:#fff8f0!important;
  border:1px solid rgba(255,200,180,.35)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.25),0 0 14px rgba(180,60,50,.28)!important;
}
.blood-btn:hover{filter:brightness(1.08)}
.inventory-counter{
  margin-top:8px;font-size:11px;font-weight:800;letter-spacing:.04em;
  color:#6b5341;padding:6px 10px;border-radius:8px;
  background:linear-gradient(135deg,rgba(255,250,240,.9),color-mix(in srgb,var(--accentSoft) 40%,#fff8e8));
  border:1px solid color-mix(in srgb,var(--accent) 22%,#c9a66b);
}
.pillar-summary{margin:7px 0 0;padding-top:7px;border-top:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));font-size:10px;line-height:1.35;color:#654d3c}
.pillar-summary a{color:var(--accentDark);font-weight:900;text-underline-offset:2px}
.mobile-play-bar{display:none}
.storage-recovery{max-width:980px;margin:-4px auto 12px;padding:8px 12px;border-radius:10px;font-size:11px;line-height:1.4;text-align:center}
.storage-recovery{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;border:1px solid #b84a4a;background:#fff0ee;color:#711f1f;font-weight:800}
.storage-recovery button{min-height:40px;border:0;border-radius:9px;padding:0 12px;background:#7a2630;color:white;font-weight:900;cursor:pointer}
.trial-tracker{display:grid;gap:8px;padding:6px 0;color:var(--ink)}
.trial-group{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.trial-group>span{min-width:60px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:#6b5341}
.trial-check{position:relative;display:grid;place-items:center;cursor:pointer}
.trial-check input{position:absolute;opacity:0;pointer-events:none}
.trial-check span{width:44px;height:44px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 42%,#98724c);border-radius:10px;background:white;font-family:var(--display);font-size:12px;font-weight:900;color:var(--accentDark);box-shadow:inset 0 1px white,0 2px 6px rgba(45,25,14,.1)}
.trial-check input:checked+span{background:linear-gradient(135deg,var(--accent2),var(--accent));color:white;border-color:var(--accent)}
.trial-check input:checked+span:after{content:"✓";font-size:19px}
.trial-check input:checked+span{font-size:0}
.trial-group.failures .trial-check input:checked+span{background:linear-gradient(135deg,#d95a52,#9f2f35);color:white;border-color:#8b2830;box-shadow:inset 0 1px rgba(255,255,255,.32),0 2px 7px rgba(125,30,38,.24)}
.trial-group.failures .trial-check input:checked+span:after{content:"✕";font-size:18px}
.trial-check input:focus-visible+span{outline:3px solid var(--focusRing);outline-offset:2px}
.trial-clear{justify-self:start;min-height:36px;border:1px solid var(--line2);border-radius:8px;padding:0 10px;background:#fff8e9;color:var(--walnut2);font-size:10px;font-weight:900;cursor:pointer}
.trial-hint{font-size:9px;color:#6b5341}
.number-error{display:block;margin-top:4px;color:#8d1f28;font-size:10px;font-weight:850;line-height:1.3}
[aria-invalid="true"]{outline:2px solid #b84a4a!important;outline-offset:2px}
.regroup-btn{transition:transform .15s ease,filter .15s ease,box-shadow .2s ease}
.regroup-btn:active{transform:scale(.97)}
.card{contain:layout style}
.status:empty{display:none}
@media screen and (max-width:760px){
  .app{padding-bottom:max(88px,calc(72px + env(safe-area-inset-bottom)))}
  .abilities-page{scroll-margin-top:12px}
  .toolbar select,.toolbar button,.toolbar .rules-link,.toolbar .discord-link,.more-menu,.more-menu summary{min-height:44px;height:44px}
  .more-menu-panel{max-height:calc(100dvh - 104px);overflow:auto;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .more-menu-panel button{height:44px}
  .draft-restore button,.role-select,.regroup-btn,.session-btn,.add-slot-btn,.ability-help button,.session-dialog-actions button{min-height:44px}
  .role-select{height:44px}
  .stepper,.pillar-card .stepper,.vitals-card .vital:first-child .stepper{width:44px;height:44px;flex-basis:44px}
  .ability-dialog-close{width:44px;height:44px;flex-basis:44px}
  .fieldbox input,.fieldbox select,.fieldbox textarea,.profile-item input,.profile-item textarea,.note-box textarea,.weapon-table textarea,.weapon-table select,.ability input,.ability select{min-height:44px}
  input.save-field:not([type="checkbox"]):not([type="radio"]),select.save-field,textarea.save-field{min-height:44px!important}
  .mobile-play-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    width:100%;max-width:100vw;
    display:grid;grid-template-columns:minmax(122px,1fr) minmax(114px,1fr) 52px 52px;gap:5px;
    padding:7px max(7px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));
    border-top:1px solid color-mix(in srgb,var(--brightGold) 52%,var(--accent));
    background:linear-gradient(135deg,rgba(24,14,10,.97),color-mix(in srgb,var(--themeDeep) 84%,#160d09));
    box-shadow:0 -12px 30px rgba(0,0,0,.35);color:#fff8e9;backdrop-filter:blur(12px)
  }
  .mobile-meter{min-width:0;display:grid;grid-template-columns:44px minmax(34px,1fr) 44px;align-items:center;gap:3px}
  .mobile-meter output{min-width:0;text-align:center;font-family:var(--display);font-size:12px;font-weight:900;color:#f5d993;white-space:nowrap}
  .mobile-meter button,.mobile-play-bar>.mobile-save,.mobile-play-bar>.mobile-more{width:100%;min-width:44px;height:44px;border:1px solid rgba(255,255,255,.22);border-radius:10px;background:rgba(255,255,255,.08);color:white;font-weight:900;cursor:pointer}
  .mobile-meter button{font-size:20px;background:linear-gradient(145deg,var(--accent2),var(--accent))}
  .mobile-play-bar>.mobile-save{background:linear-gradient(135deg,#d8bb70,#a97529);color:#2b1a0d;font-size:11px}
  .mobile-play-bar>.mobile-more{font-size:10px}
}
@media screen and (max-width:430px){
  .app{padding-bottom:max(136px,calc(120px + env(safe-area-inset-bottom)))}
  .mobile-play-bar{grid-template-columns:1fr 1fr 1fr 1fr}
  .mobile-meter{grid-column:span 2}
  .mobile-play-bar>.mobile-save{grid-column:2}
  .mobile-play-bar>.mobile-more{grid-column:3}
}
@media (prefers-reduced-motion:reduce){
  .roll.triumph:after,.prism-d20,.card-title .icon{animation:none!important;transition:none!important}
  .regroup-btn{transition:none!important}
}

@media print{
  *,*::before,*::after{box-shadow:none!important;filter:none!important;-webkit-filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  body::before,body::after,.page::before,.page::after,.mast::after,.roll.triumph::after{display:none!important}
  .abilities-page:before,.abilities-page:after,.story-page:before,.story-page:after{display:none!important}
  .roll-table,.distance-grid,.card-title .icon,.ability-grimoire-intro{box-shadow:none!important}
  .prism-d20{filter:none!important}
  .mobile-play-bar{display:none!important}
}


/* Briarbound polish pass (September 2026). Screen-only layout and legibility
   refinements layered after the original sheet styles. No game logic, storage,
   or print layout is affected. */
@media screen {
  /* The Roll: keep result names whole ("Catastrophe", not "Catastro-phe") */
  .roll-table { grid-template-columns: minmax(max-content, 1.28fr) minmax(0, 1fr) minmax(0, 1.14fr) minmax(0, 1fr) minmax(0, 1fr); }
  .roll span { overflow-wrap: normal; word-break: keep-all; hyphens: manual; letter-spacing: .01em; }

  /* Distance tiles: labels sit on a soft plate so they read over the watermarks */
  .distance b {
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255, 252, 244, .78);
    box-shadow: 0 1px 3px rgba(45, 25, 14, .12);
    line-height: 1.25;
  }

  /* Empty single-line fields get a quiet writing line so it is clear where to type */
  .fieldbox input:not([type="checkbox"]),
  .profile-item input:not([type="checkbox"]) {
    min-height: 30px;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, rgba(66, 43, 26, .2));
    border-radius: 0;
  }
  .fieldbox textarea { border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, rgba(66, 43, 26, .2)); border-radius: 0; }
  .fieldbox, .profile-item { cursor: text; }
  .fieldbox:focus-within, .profile-item:focus-within, .note-box:focus-within {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line2));
  }

  /* Adventure Notes: give the Trial Tracker a full row so its boxes stay in one line */
  .adventure-card .profile-item:has(.trial-tracker),
  .adventure-card .profile-item:has([data-key="consumables"]) { grid-column: 1 / -1; }
  .trial-group { flex-wrap: nowrap; }
  .trial-group > span { min-width: 76px; }
  .trial-hint { font-size: 10.5px; line-height: 1.35; }
  .trial-clear { font-size: 11px; min-height: 40px; }

  /* Section headings: spacing so the flourish never strikes through the caption */
  .ability-section-head h2 { padding-bottom: 2px; }
  .add-slot-btn { min-height: 34px; padding: 0 14px; white-space: nowrap; border-radius: 999px; font-size: 11px; }
}
@media screen and (max-width: 760px) {
  .ability-section-head { gap: 16px; }
  .ability-section-meta { flex-wrap: wrap; row-gap: 8px; }
  .ability-section-meta > p { flex: 1 1 100%; }
  .add-slot-btn { min-height: 44px; aspect-ratio: auto; width: auto; height: auto; }
}
@media screen and (max-width: 480px) {
  .ability-section-meta { flex-direction: row; align-items: center; justify-content: space-between; }
  .add-slot-btn { padding: 0 18px; font-size: 12px; }
  .roll span { font-size: 8.8px; letter-spacing: 0; }
  .trial-group { flex-wrap: wrap; }
  .trial-group > span { flex: 1 1 100%; }
}
/* Phone play bar: one row — HP meter, AP meter, Save, More */
@media screen and (max-width: 760px) {
  .mobile-play-bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 4px;
  }
  .mobile-meter { grid-column: auto; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 2px; }
  .mobile-meter button { min-width: 40px; }
  .mobile-meter output { display: grid; line-height: 1.05; font-size: inherit; }
  .mobile-vital-label { font-family: var(--body); font-size: 9px; letter-spacing: .12em; color: #d9c79e; }
  .mobile-vital-value { font-size: clamp(13px, 3.9vw, 16px); color: #f5d993; overflow: hidden; text-overflow: ellipsis; }
  .mobile-play-bar > .mobile-save,
  .mobile-play-bar > .mobile-more { grid-column: auto; width: auto; padding: 0 10px; font-size: 11px; }
}
@media screen and (max-width: 430px) {
  .app { padding-bottom: max(84px, calc(68px + env(safe-area-inset-bottom))); }
  .mobile-play-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; }
  .mobile-meter { grid-column: auto; }
  .mobile-play-bar > .mobile-save,
  .mobile-play-bar > .mobile-more { grid-column: auto; padding: 0 8px; }
}
/* Decorative d20: smaller on phones so it no longer fills a whole screen */
@media screen and (max-width: 760px) {
  .d20-display { min-height: 176px; margin: 0 0 4px; }
  .prism-d20 { width: min(46vw, 180px); }
}