/* Layout: a field-manual app. Dark section rail on the left, a wide content column, and spells split into a filterable list beside a pinned detail card. */
:root{
  --bg:#ECEEF1;
  --panel:#FFFFFF;
  --panel2:#F5F6F8;
  --ink:#171B22;
  --muted:#596170;
  --line:#DADEE5;
  --line2:#E8EBEF;
  --accent:#8C6212;
  --accent-ink:#FFFFFF;
  --accent-soft:#F5EBD5;
  --accent-line:#DEC593;
  --rail:#141821;
  --rail2:#1C222D;
  --rail-ink:#D7DBE3;
  --rail-muted:#8B94A5;
  --rail-accent:#E3B65C;
  --danger:#A3392A;
  --scrim:rgba(12,15,20,.52);
  --sc-abjuration:#2E6DAE; --sc-conjuration:#B26F1C; --sc-divination:#20847B; --sc-enchantment:#AF416C;
  --sc-evocation:#C2432A; --sc-illusion:#7552C2; --sc-necromancy:#4D7631; --sc-transmutation:#967E18;
  --f-display:"Kurale","Alegreya",Georgia,serif;
  --f-read:"Alegreya",Georgia,"Times New Roman",serif;
  --f-ui:"Alegreya Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --r:12px; --r-sm:8px;
  --rail-w:252px;
  --shadow:0 1px 2px rgba(20,24,33,.05),0 6px 18px rgba(20,24,33,.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1116; --panel:#151920; --panel2:#1B2029; --ink:#E5E7EC; --muted:#9AA3B2; --line:#2A303B; --line2:#222833;
    --accent:#E2B456; --accent-ink:#1B1508; --accent-soft:#30271A; --accent-line:#5C4922;
    --rail:#0A0D11; --rail2:#151A22; --rail-ink:#D7DBE3; --rail-muted:#7F8899; --rail-accent:#E2B456;
    --danger:#EE8B7B; --scrim:rgba(0,0,0,.62);
    --sc-abjuration:#6CA7E5; --sc-conjuration:#E2A250; --sc-divination:#4DC1B5; --sc-enchantment:#E37EA6;
    --sc-evocation:#F27C5E; --sc-illusion:#A98CF1; --sc-necromancy:#89B86A; --sc-transmutation:#D6BA4C;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.25);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1116; --panel:#151920; --panel2:#1B2029; --ink:#E5E7EC; --muted:#9AA3B2; --line:#2A303B; --line2:#222833;
  --accent:#E2B456; --accent-ink:#1B1508; --accent-soft:#30271A; --accent-line:#5C4922;
  --rail:#0A0D11; --rail2:#151A22; --rail-ink:#D7DBE3; --rail-muted:#7F8899; --rail-accent:#E2B456;
  --danger:#EE8B7B; --scrim:rgba(0,0,0,.62);
  --sc-abjuration:#6CA7E5; --sc-conjuration:#E2A250; --sc-divination:#4DC1B5; --sc-enchantment:#E37EA6;
  --sc-evocation:#F27C5E; --sc-illusion:#A98CF1; --sc-necromancy:#89B86A; --sc-transmutation:#D6BA4C;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.25);
  color-scheme:dark;
}

html{font-size:16px}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--rail)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
kbd{font-family:var(--f-ui);font-size:.75rem;border:1px solid currentColor;border-radius:5px;padding:0 5px;opacity:.7}
@media (prefers-reduced-motion: reduce){html:not(.force-motion) *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
svg.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Shell */
.shell{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100vh}
.rail{position:sticky;top:0;height:100vh;box-sizing:border-box;background:var(--rail);color:var(--rail-ink);display:flex;flex-direction:column;gap:14px;padding:22px 14px 16px;padding-left:max(14px,env(safe-area-inset-left,0px));overflow-y:auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;padding:0 6px}
.brand .d20{width:38px;height:38px;color:var(--rail-accent);flex:none}
.d20 path{fill:none;stroke:currentColor;stroke-width:1.15;stroke-linejoin:round}
.brand b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.6rem;line-height:1;color:#F3F4F7}
.brand small{display:block;font-size:.8rem;color:var(--rail-muted);margin-top:3px;letter-spacing:.02em}
.search-btn{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;background:var(--rail2);color:var(--rail-muted);border:1px solid #2A313D;border-radius:10px;padding:10px 12px;font:inherit;font-size:.95rem;cursor:pointer;text-align:left}
.search-btn span{flex:1}
.search-btn:hover{color:var(--rail-ink);border-color:#3A4252}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:9px;text-decoration:none;color:var(--rail-ink);font-weight:500;font-size:1rem}
.nav a .n{margin-left:auto;font-size:.78rem;color:var(--rail-muted);font-variant-numeric:tabular-nums}
.nav a:hover{background:var(--rail2)}
.nav a[aria-current="page"]{background:var(--rail2);color:#fff;box-shadow:inset 3px 0 0 var(--rail-accent)}
.nav a[aria-current="page"] svg{color:var(--rail-accent)}
.nav .sep{height:1px;background:#262C37;margin:8px 6px}
.rail-foot{margin-top:auto;font-size:.76rem;color:var(--rail-muted);padding:0 6px;line-height:1.4}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:none}
.view{flex:1;box-sizing:border-box;width:100%;max-width:1320px;margin:0 auto;padding-block:28px 56px;padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}
.foot{border-top:1px solid var(--line);font-size:.84rem;color:var(--muted)}
.foot>div{max-width:1320px;margin:0 auto;padding-block:18px 26px;padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}
.foot p{margin:0;max-width:90ch}
.foot a{color:var(--accent)}
.tabbar{display:none}

/* Page heads */
.ph{display:flex;flex-direction:column;gap:6px;margin-bottom:22px}
.crumbs{font-size:.9rem;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.ph h1{font-family:var(--f-display);font-weight:400;font-size:2.4rem;line-height:1.08;margin:0;text-wrap:balance}
.ph .en{color:var(--muted);font-size:.95rem;letter-spacing:.02em}
.ph-sub{margin:0;color:var(--muted);max-width:70ch;font-size:1.05rem}
.eyebrow{margin:0;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}

/* Shared bits */
.chip{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.9rem;font-weight:500;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer;text-decoration:none;line-height:1.3;white-space:nowrap}
.chip:hover{border-color:var(--accent-line)}
.chip.on{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.chip .dot{width:9px;height:9px;border-radius:50%}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;padding:4px 10px;border-radius:999px;background:var(--panel2);border:1px solid var(--line2);color:var(--ink);white-space:nowrap}
.pill b{font-weight:700}
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.92rem;font-weight:700;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:8px 14px;cursor:pointer;text-decoration:none;line-height:1.2}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.quiet{border-color:transparent;background:transparent;color:var(--muted)}
.btn.quiet:hover{color:var(--danger)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn[disabled]{opacity:.55;cursor:default}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
input[type="search"],input[type="text"],input[type="date"],select,textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;box-sizing:border-box}
textarea{font-family:var(--f-read);font-size:1.05rem;line-height:1.55;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search-field{position:relative}
.search-field svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.search-field input{padding-left:40px}
.empty-state{padding:28px 20px;border:1px dashed var(--line);border-radius:var(--r);color:var(--muted);text-align:center}
mark{background:var(--accent-soft);color:var(--ink);border-radius:3px;padding:0 2px}

/* Prose */
.prose{font-family:var(--f-read);font-size:1.075rem;line-height:1.62;color:var(--ink)}
.prose>*:first-child{margin-top:0}
.prose>*:last-child{margin-bottom:0}
.prose p{margin:0 0 .75em}
.prose ul,.prose ol{margin:0 0 .8em;padding-left:1.3em;display:flex;flex-direction:column;gap:.3em}
.prose li::marker{color:var(--accent)}
.prose strong{font-weight:700}
.prose a.xref,.xref{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-line)}
.prose a.xref:hover{border-bottom-color:var(--accent)}
.prose h4{font-family:var(--f-ui);font-size:.95rem;margin:1em 0 .3em}
.tbl{overflow-x:auto;margin:6px 0 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel)}
.tbl table{border-collapse:collapse;width:100%;font-family:var(--f-ui);font-size:.94rem;line-height:1.4}
.tbl th{text-align:left;font-weight:700;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:9px 12px;border-bottom:1px solid var(--line);background:var(--panel2);white-space:nowrap}
.tbl td{padding:8px 12px;border-bottom:1px solid var(--line2);vertical-align:top;font-variant-numeric:tabular-nums}
.tbl tr:last-child td{border-bottom:none}
.tbl td:first-child{white-space:nowrap}

/* Home */
.hero{display:flex;flex-direction:column;gap:10px;padding:34px 34px 30px;border-radius:18px;background:var(--rail);color:var(--rail-ink);position:relative;overflow:hidden;margin-bottom:22px}
.hero .eyebrow{color:var(--rail-accent)}
.hero h1{font-family:var(--f-display);font-weight:400;font-size:3.2rem;line-height:1;margin:0;color:#F4F5F8}
.hero .lede{margin:0;color:var(--rail-muted);font-size:1.12rem;max-width:56ch}
.hero-search{margin-top:10px;display:flex;align-items:center;gap:12px;max-width:560px;width:100%;box-sizing:border-box;background:#fff;color:#4B5261;border:none;border-radius:12px;padding:14px 16px;font:inherit;font-size:1.05rem;cursor:pointer;text-align:left;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.hero-search span{flex:1}
.hero-search svg{color:#8C6212}
.hero .d20-big{position:absolute;right:-30px;top:-20px;width:240px;height:240px;color:var(--rail-accent);opacity:.12;pointer-events:none}
.home-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px;align-items:start}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.tile{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center;padding:16px;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--accent-line);transform:translateY(-1px)}
.tile svg{color:var(--accent);width:24px;height:24px}
.tile-t{font-weight:700;font-size:1.05rem}
.tile-n{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.tile-d{grid-column:1 / -1;font-size:.88rem;color:var(--muted);margin-top:4px}
.side-col{display:flex;flex-direction:column;gap:16px}
.box{padding:18px}
.box h2{font-family:var(--f-display);font-weight:400;font-size:1.35rem;margin:0 0 10px}
.qlinks{display:flex;flex-wrap:wrap;gap:6px}
.next-card{display:flex;flex-direction:column;gap:4px}
.next-card .when{font-family:var(--f-display);font-size:1.3rem;color:var(--ink)}
.mini-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mini-list a{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line2);text-decoration:none}
.mini-list li:last-child a{border-bottom:none}
.mini-list a:hover .t{color:var(--accent)}
.mini-list .s{font-size:.82rem;color:var(--muted);white-space:nowrap}

/* Cards grid (classes, races, subclasses) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.ccard{display:flex;flex-direction:column;gap:10px;padding:18px;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);transition:border-color .15s,transform .15s}
.ccard:hover{border-color:var(--accent-line);transform:translateY(-2px)}
.ccard-top{display:flex;gap:14px;align-items:center}
.ccard h2{font-family:var(--f-display);font-weight:400;font-size:1.5rem;line-height:1.1;margin:0}
.ccard .en{font-size:.85rem;color:var(--muted)}
.ccard p{margin:0;color:var(--muted);font-size:.95rem}
.ccard .chips{margin-top:auto}
.hex{width:52px;height:52px;flex:none;position:relative;display:grid;place-items:center;color:var(--accent)}
.hex svg{position:absolute;inset:0;width:100%;height:100%}
.hex svg path{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.4}
.hex span{position:relative;font-family:var(--f-display);font-size:1.45rem;color:var(--accent);line-height:1}
.hex.lg{width:76px;height:76px}
.hex.lg span{font-size:2.1rem}

/* Entity page */
.ent-head{display:flex;gap:18px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.ent-head .ph{margin:0;flex:1 1 300px}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 20px;overflow-x:auto}
.tabs button{font:inherit;font-weight:700;font-size:.98rem;color:var(--muted);background:none;border:none;padding:10px 14px;cursor:pointer;white-space:nowrap;box-shadow:inset 0 -3px 0 transparent}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--accent)}
.kv{display:grid;grid-template-columns:minmax(140px,220px) minmax(0,1fr);margin:0}
.kv dt,.kv dd{padding:11px 16px;border-bottom:1px solid var(--line2);margin:0}
.kv dt{font-weight:700;color:var(--muted);font-size:.92rem}
.kv dt:last-of-type,.kv dd:last-of-type{border-bottom:none}
.lvl-table td:nth-child(3){white-space:normal;min-width:220px}
.lvl-table td a{color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--muted)}
.lvl-table td a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.lvl-table td:first-child{font-weight:700}
.feat-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.feats{display:flex;flex-direction:column;gap:10px}
details.feat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);scroll-margin-top:84px}
details.feat>summary{display:flex;align-items:baseline;gap:12px;padding:14px 16px;cursor:pointer;list-style:none}
details.feat>summary::-webkit-details-marker{display:none}
details.feat>summary::after{content:"";margin-left:auto;align-self:center;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
details.feat[open]>summary::after{transform:rotate(-135deg)}
details.feat .lvl{flex:none;min-width:2.6em;text-align:center;font-size:.78rem;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:2px 6px;font-variant-numeric:tabular-nums}
details.feat .fn{font-weight:700;font-size:1.06rem}
details.feat .en{font-size:.84rem;color:var(--muted)}
details.feat>.prose{padding:0 16px 16px 16px;border-top:1px solid var(--line2);padding-top:12px}
details.feat.flash{animation:flash 1.6s ease}
@keyframes flash{0%,40%{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}100%{}}
.sub-card{display:flex;gap:16px;align-items:flex-start;padding:18px;text-decoration:none}
.sub-card h3{font-family:var(--f-display);font-weight:400;font-size:1.4rem;margin:0 0 4px}
.sub-card p{margin:0;color:var(--muted)}
.section-title{font-family:var(--f-display);font-weight:400;font-size:1.5rem;margin:26px 0 12px}
.spell-groups{display:flex;flex-direction:column;gap:18px}
.spell-groups h3{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.trait{padding:18px 20px}
.trait h3{font-family:var(--f-display);font-weight:400;font-size:1.35rem;margin:0 0 8px}
.traits{display:flex;flex-direction:column;gap:12px}

/* Spells master-detail */
.md{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,460px);gap:22px;align-items:start}
.filters{display:flex;flex-direction:column;gap:10px;padding:14px;margin-bottom:12px}
.frow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.frow .lab{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:4px;min-width:64px}
.chip.lv{min-width:2.3em;justify-content:center}
.chip.sc .dot{background:var(--c)}
.chip.sc.on{background:var(--c);border-color:var(--c);color:#fff}
.chip.sc.on .dot{background:#fff}
.flist-meta{display:flex;justify-content:space-between;align-items:center;font-size:.88rem;color:var(--muted);margin:4px 2px 8px}
.linkbtn{font:inherit;color:var(--accent);background:none;border:none;padding:0;cursor:pointer;font-weight:700}
.slist{display:flex;flex-direction:column;gap:14px}
.sgroup h3{display:flex;align-items:baseline;gap:8px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 6px 4px}
.sgroup h3 span{font-weight:500;letter-spacing:0;text-transform:none}
.rows{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.row{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:9px 14px;text-decoration:none;border-bottom:1px solid var(--line2)}
.row:last-child{border-bottom:none}
.row:hover{background:var(--panel2)}
.row[aria-current="true"]{background:var(--accent-soft)}
.row .dot{width:10px;height:10px;border-radius:50%;background:var(--c)}
.row-main{display:flex;flex-direction:column;min-width:0}
.row-n{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-en{font-size:.82rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-tags{display:flex;gap:4px}
.tag{font-size:.72rem;font-weight:700;border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--muted)}
.tag.fav{color:var(--accent);border-color:var(--accent-line)}
.row-t{font-size:.86rem;color:var(--muted);white-space:nowrap;min-width:4.5em;text-align:right}
.detail{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto}
.detail-empty{padding:40px 24px;text-align:center;color:var(--muted)}
.detail-empty svg{width:40px;height:40px;color:var(--accent-line);margin-bottom:8px}
.spell{padding:22px 22px 20px}
.sp-top{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:700;color:var(--c)}
.sp-top .dot{width:10px;height:10px;border-radius:50%;background:var(--c)}
.spell h2{font-family:var(--f-display);font-weight:400;font-size:2rem;line-height:1.1;margin:6px 0 2px}
.spell .en{color:var(--muted);font-size:.92rem;margin:0 0 14px}
.sp-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.favbtn{font:inherit;display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:700;color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.favbtn svg{width:16px;height:16px}
.favbtn[aria-pressed="true"]{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
.favbtn[aria-pressed="true"] svg{fill:currentColor}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line2);border:1px solid var(--line2);border-radius:var(--r-sm);overflow:hidden;margin:0 0 16px}
.stats div{background:var(--panel2);padding:9px 12px}
.stats dt{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stats dd{margin:2px 0 0;font-weight:600;font-size:.96rem}
.stats .wide{grid-column:1 / -1}
.higher{margin-top:14px;padding:12px 14px;background:var(--panel2);border-radius:var(--r-sm)}
.higher h4{margin:0 0 4px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.sp-classes{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sp-classes .lab{font-size:.8rem;color:var(--muted);margin-right:4px}
.raw-note{margin:0 0 10px;font-size:.85rem;color:var(--muted);background:var(--panel2);border-radius:8px;padding:8px 10px}
.back{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--accent);text-decoration:none;margin-bottom:12px}

/* Feats, backgrounds, gear */
.group-title{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px}
.group-title:first-child{margin-top:0}
.feat-meta{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.bg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.bg{padding:20px;display:flex;flex-direction:column;gap:12px}
.bg h2{font-family:var(--f-display);font-weight:400;font-size:1.6rem;margin:0}
.bg .kv dt,.bg .kv dd{padding:8px 0}
.bg .kv{grid-template-columns:120px minmax(0,1fr)}
.gear-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.gear-tools .search-field{flex:1 1 260px;max-width:420px}
.gtable td:first-child{font-weight:700}
.gtable tr.sub td{background:var(--panel2);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.gtable tr.hit td{background:var(--accent-soft)}
.gtable .props{display:flex;flex-wrap:wrap;gap:4px}
.gtable .props span{font-size:.82rem;background:var(--panel2);border:1px solid var(--line2);border-radius:5px;padding:0 6px;white-space:nowrap}
.ilist{display:flex;flex-direction:column;gap:8px}
.defs{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.def{padding:16px}
.def h3{margin:0 0 6px;font-size:1.05rem}
.def p{margin:0;color:var(--muted)}

/* Rules */
.rules{display:grid;grid-template-columns:250px minmax(0,1fr);gap:40px;align-items:start}
.rtoc{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto;display:flex;flex-direction:column;gap:12px}
.rtoc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rtoc .ch>a{display:flex;gap:8px;font-weight:700;text-decoration:none}
.rtoc .ch>a .n{color:var(--muted);font-variant-numeric:tabular-nums;min-width:1.2em}
.rtoc .ch>a:hover,.rtoc .ch.current>a{color:var(--accent)}
.rtoc .arts{margin:4px 0 0 1.7em;gap:2px}
.rtoc .arts a{font-size:.88rem;color:var(--muted);text-decoration:none}
.rtoc .arts a:hover{color:var(--ink);text-decoration:underline}
.rbody{max-width:74ch;display:flex;flex-direction:column;gap:44px;min-width:0}
.rch h2{font-family:var(--f-display);font-weight:400;font-size:2rem;margin:4px 0 0}
.rch .intro{color:var(--muted);font-style:italic;margin:6px 0 0;font-family:var(--f-read);font-size:1.05rem}
.rch,.rart{scroll-margin-top:84px}
.rart{padding-top:18px;margin-top:16px;border-top:1px solid var(--line)}
.rart h3{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:0 0 8px;font-size:1.25rem}
.rart h3 .sec{font-size:.82rem;color:var(--accent);font-variant-numeric:tabular-nums}
.rart h3 .en{font-size:.82rem;color:var(--muted);font-weight:500}
.rart.flash{animation:flashb 1.6s ease}
@keyframes flashb{0%,40%{background:var(--accent-soft)}100%{background:transparent}}

/* Campaign */
.camp{display:flex;flex-direction:column;gap:18px;max-width:900px}
.camp-head{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:flex-start;justify-content:space-between;padding:24px}
.camp-meta{flex:1 1 380px;min-width:0}
.camp-meta h2{font-family:var(--f-display);font-weight:400;font-size:2.2rem;line-height:1.1;margin:0 0 8px}
.placeholder{color:var(--muted);font-style:italic;margin:0}
.next{flex:0 1 260px;display:flex;flex-direction:column;gap:2px;padding:12px 16px;border:1px dashed var(--accent);border-radius:10px;background:var(--accent-soft)}
.next .label{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.next strong{font-family:var(--f-display);font-weight:400;font-size:1.25rem;line-height:1.3}
.next-empty span:last-child{color:var(--muted)}
.head-actions{flex-basis:100%;display:flex;gap:10px}
.camp-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.camp-tools .chips{flex:1 1 auto}
.camp-tools .search-field{flex:0 1 240px;min-width:180px}
.entries{display:flex;flex-direction:column;gap:14px}
.entry{padding:20px 22px;display:flex;flex-direction:column;gap:6px;min-width:0}
.entry.pinned{border-color:var(--accent-line)}
.entry-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;font-size:.86rem;color:var(--muted)}
.entry-meta .type{font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.74rem;color:var(--accent)}
.entry-meta .pin{font-weight:700;color:var(--accent)}
.entry h3{font-family:var(--f-display);font-weight:400;font-size:1.5rem;line-height:1.25;margin:0}
.entry .prose{overflow-wrap:anywhere}
.entry .prose.clipped{max-height:13.5em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent)}
.more{align-self:flex-start;font:inherit;font-weight:700;font-size:.9rem;color:var(--accent);background:none;border:none;padding:2px 0;cursor:pointer}
.entry-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;padding-top:12px;border-top:1px solid var(--line2)}
.confirm-q{font-weight:700;margin-right:4px}
.banner{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 16px;border:1px solid var(--accent-line);border-radius:10px;background:var(--accent-soft)}
.banner p{margin:0;flex:1 1 240px}
.mode{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:4px 10px;border-radius:999px;align-self:flex-start}

/* Dialogs, palette, toast */
dialog{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:0;width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 32px)}
dialog::backdrop{background:var(--scrim)}
.ed{display:flex;flex-direction:column;gap:14px;padding:24px}
.ed h3{font-family:var(--f-display);font-weight:400;font-size:1.6rem;margin:0}
.field{display:flex;flex-direction:column;gap:6px;font-size:.9rem;font-weight:700}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hint{margin:-6px 0 0;font-size:.84rem;color:var(--muted)}
.check{display:flex;gap:8px;align-items:center;font-size:.95rem}
.check input{width:18px;height:18px;accent-color:var(--accent)}
.form-err{margin:0;color:var(--danger);font-size:.9rem}
.ed-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.pal-wrap{position:fixed;inset:0;z-index:60;background:var(--scrim);display:flex;justify-content:center;align-items:flex-start;padding:calc(8vh + env(safe-area-inset-top,0px)) 16px 16px}
.pal{width:min(680px,100%);background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.35);overflow:hidden;display:flex;flex-direction:column;max-height:76vh}
.pal-in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.pal-in input{border:none;box-shadow:none;padding:4px 0;font-size:1.15rem;background:transparent}
.pal-in input:focus{box-shadow:none}
.pal-in svg{color:var(--muted)}
.pal-res{overflow:auto;padding:6px}
.pal-g{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:10px 10px 4px}
.pal-it{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:9px;text-decoration:none}
.pal-it[aria-selected="true"]{background:var(--accent-soft)}
.pal-it .dot{width:9px;height:9px;border-radius:50%;background:var(--c,var(--muted));flex:none}
.pal-it .t{font-weight:700}
.pal-it .s{font-size:.84rem;color:var(--muted);margin-left:auto;text-align:right}
.pal-empty{padding:26px;text-align:center;color:var(--muted)}
.pal-foot{display:flex;gap:14px;padding:8px 14px;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:70;background:var(--ink);color:var(--panel);font-size:.95rem;padding:10px 16px;border-radius:10px;max-width:calc(100vw - 32px);box-shadow:0 6px 24px rgba(0,0,0,.2)}
.sheet-wrap{position:fixed;inset:0;z-index:55;background:var(--scrim);display:flex;align-items:flex-end}
.sheet{width:100%;background:var(--panel);border-radius:18px 18px 0 0;padding:14px 16px calc(18px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sheet a{display:flex;align-items:center;gap:10px;padding:12px;border-radius:10px;background:var(--panel2);text-decoration:none;font-weight:700}
.sheet a svg{color:var(--accent)}

/* Responsive */
@media (max-width:1240px){
  .md{grid-template-columns:minmax(0,1fr)}
  .md .detail{display:none}
  .md.show-detail .md-list{display:none}
  .md.show-detail .detail{display:block;position:static;max-height:none}
}
@media (max-width:1100px){
  .home-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:999px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .topbar{display:flex;align-items:center;gap:10px;position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--rail);color:var(--rail-ink);padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .topbar .brand{padding:0;flex:1}
  .topbar .brand .d20{width:30px;height:30px}
  .topbar .brand b{font-size:1.35rem}
  .topbar .brand small{display:none}
  .icon-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--rail2);color:var(--rail-ink);border:none;cursor:pointer}
  .view{padding-block:20px 96px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .foot>div{padding-bottom:calc(90px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--rail);padding:6px 0 calc(6px + env(safe-area-inset-bottom,0px));padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);border-top:1px solid #222936}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;font:inherit;font-size:.72rem;color:var(--rail-muted);text-decoration:none;background:none;border:none;padding:4px 0;cursor:pointer}
  .tabbar [aria-current="page"]{color:var(--rail-accent)}
  .rules{grid-template-columns:minmax(0,1fr);gap:16px}
  .rtoc{position:static;max-height:none;overflow:visible}
  .rtoc ol.chs{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px}
  .rtoc .ch{flex:none}
  .rtoc .ch>a{border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:var(--panel);font-size:.9rem;white-space:nowrap}
  .rtoc .arts{display:none}
  details.feat,.rch,.rart{scroll-margin-top:72px}
}
@media (max-width:600px){
  .ph h1{font-size:1.9rem}
  .hero{padding:24px 20px}
  .hero h1{font-size:2.4rem}
  .hero .d20-big{width:170px;height:170px}
  .tiles{grid-template-columns:1fr 1fr}
  .tile{padding:12px}
  .tile-d{display:none}
  .cards{grid-template-columns:minmax(0,1fr)}
  .kv{grid-template-columns:minmax(0,1fr)}
  .kv dt{border-bottom:none;padding-bottom:0}
  .row{grid-template-columns:10px minmax(0,1fr) auto;padding:10px 12px}
  .row-t{display:none}
  .stats{grid-template-columns:1fr 1fr}
  .spell{padding:18px 16px}
  .row2{grid-template-columns:1fr}
  .camp-head{padding:18px}
  .entry{padding:16px}
  .camp-tools .search-field{flex-basis:100%}
  .bg-grid{grid-template-columns:minmax(0,1fr)}
  .frow .lab{min-width:100%}
}

/* Emblems: gold line-art drawn with stroke-dashoffset */
.emb{display:block;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.emb .ln{stroke-dasharray:1;stroke-dashoffset:0}
.emb .bg{fill:var(--emb-bg,var(--accent-soft))}
.hex{color:var(--accent);transition:transform .25s ease}
.hex svg.emb{position:relative;inset:auto;width:70%;height:70%;z-index:1}
.hex svg.emb path{fill:none;stroke:currentColor;stroke-width:2.1}
.hex svg.emb path.bg{fill:var(--accent-soft)}
.hex svg.frame path{transition:filter .3s ease,stroke-width .3s ease}
.draw .emb .ln,.ccard:hover .emb .ln{animation:emb-draw 1.1s cubic-bezier(.6,0,.2,1) both;animation-delay:calc(var(--i) * 70ms)}
.ccard:hover .hex{transform:scale(1.05)}
.ccard:hover .hex svg.frame path{filter:drop-shadow(0 0 5px var(--accent-line));stroke-width:1.8}
@keyframes emb-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* Big emblem in an entity header */
.hex.xl{width:104px;height:104px;isolation:isolate}
.hex.xl::before{content:"";position:absolute;inset:-22px;border-radius:50%;z-index:-1;background:radial-gradient(closest-side,var(--accent-soft),transparent);animation:breathe 5s ease-in-out infinite}
.hex.xl svg.emb{stroke-width:1.9}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.04)}}

/* Spell: school sigil + magic circle */
.spell{position:relative;overflow:hidden}
.spell>*{position:relative}
.spell>.mcircle{position:absolute;right:-74px;top:-74px;width:270px;height:270px;color:var(--c);opacity:.15;pointer-events:none;fill:none;stroke:currentColor;stroke-width:1}
.mcircle g{transform-origin:100px 100px;animation:spin 90s linear infinite}
.mcircle path,.mcircle circle{stroke-dasharray:1;stroke-dashoffset:0}
.cast>.mcircle{animation:mc-in 1.6s ease-out both}
.cast>.mcircle path,.cast>.mcircle circle{animation:emb-draw 1.3s ease-out both}
@keyframes mc-in{0%{opacity:0;transform:scale(.8) rotate(-30deg)}55%{opacity:.4}100%{opacity:.15;transform:none}}
.sp-title{display:flex;align-items:center;gap:14px;margin:8px 0 14px}
.sp-title h2{margin:0}
.sp-title .en{margin:2px 0 0}
.sigil{width:64px;height:64px;flex:none;color:var(--c);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.sigil .s-ring{stroke-dasharray:2 4.6;transform-origin:32px 32px;animation:spin 20s linear infinite}
.sigil .s-in{opacity:.45}
.sigil .s-flame{fill:currentColor;fill-opacity:.16}
.sigil .s-flame2{fill:currentColor;fill-opacity:.55;stroke:none}
.sigil .s-core{transform-origin:32px 44px;animation:flick 1.9s ease-in-out infinite}
.sigil .spark{fill:currentColor;stroke:none;opacity:0;animation:spark 1.8s ease-out infinite;animation-delay:calc(var(--i) * -.23s)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flick{0%,100%{transform:scale(1,1)}30%{transform:scale(.95,1.07)}60%{transform:scale(1.04,.96)}80%{transform:scale(.98,1.03)}}
@keyframes spark{0%{transform:translateY(9px);opacity:0}15%{opacity:1}100%{transform:translateY(-7px);opacity:0}}

/* Rollable d20 on the home hero */
.d20-roll{flex:none;width:128px;height:128px;background:none;border:none;padding:0;cursor:pointer;color:var(--rail-accent);border-radius:50%}
.d20-roll:focus-visible{outline:2px solid var(--rail-accent);outline-offset:6px}
.die{width:100%;height:100%;overflow:visible;display:block}
.die path{fill:none;stroke:currentColor;stroke-width:.65;stroke-linejoin:round}
.die path.face{fill:currentColor;fill-opacity:.1}
.die text{fill:#F4F5F8;font:700 4px "Alegreya Sans",system-ui,sans-serif;text-anchor:middle;stroke:none}
.die path.crack{stroke:#EE8B7B;stroke-width:.55;stroke-dasharray:1;stroke-dashoffset:1;fill:none}
.rolling .die{animation:roll .95s cubic-bezier(.2,.7,.2,1)}
.crit .die{filter:drop-shadow(0 0 7px rgba(227,182,92,.55));animation:crit 1.3s ease-out}
.fumble .die path.crack{animation:emb-draw .45s ease-out .05s forwards}
.fumble .die{animation:shake .45s}
@keyframes roll{0%{transform:rotate(0) scale(1)}35%{transform:rotate(390deg) scale(.8)}72%{transform:rotate(700deg) scale(1.08)}100%{transform:rotate(720deg) scale(1)}}
@keyframes crit{0%{filter:drop-shadow(0 0 0 rgba(227,182,92,0))}30%{filter:drop-shadow(0 0 22px rgba(227,182,92,1))}100%{filter:drop-shadow(0 0 7px rgba(227,182,92,.55))}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-4px) rotate(-3deg)}40%{transform:translateX(4px) rotate(3deg)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* Animated scenes */
.scene{position:relative;display:block;aspect-ratio:16/9;width:100%;max-width:100%;overflow:hidden;border-radius:10px;background:#0b0a10;cursor:pointer;isolation:isolate;-webkit-tap-highlight-color:transparent}
.scene-stage{position:absolute;inset:-6px}
.scene-stage svg,.scene-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene-hint{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;color:#fff;background:rgba(10,10,16,.55);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:3px 10px 3px 8px;transition:opacity .3s;pointer-events:none}
.scene-hint svg{width:9px;height:9px;fill:currentColor}
.scene.playing .scene-hint{opacity:0}
.scene .star{animation:twinkle 3.2s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.2}}
.ccard.has-scene{overflow:hidden}
.ccard.has-scene .scene{margin:-18px -18px 2px;width:auto;max-width:none;border-radius:11px 11px 0 0}
.spell.has-scene .scene{margin:-22px -22px 14px;width:auto;max-width:none;border-radius:11px 11px 0 0}
.spell.has-scene>.mcircle{top:auto;bottom:-110px}
@media (max-width:600px){.spell.has-scene .scene{margin:-18px -16px 14px}}
.scene .rays{mix-blend-mode:screen;animation:rays 9s ease-in-out infinite alternate}
@keyframes rays{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
.scene .spin-slow{animation:spin 80s linear infinite}
.scene .bob{animation:bob 6s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-6px)}}
.scene .win{animation:winflick 7s steps(1) infinite}
@keyframes winflick{0%,92%{opacity:1}93%,96%{opacity:.35}97%{opacity:1}}
.scene .flame{transform-box:fill-box;transform-origin:50% 100%;animation:flick 1.3s ease-in-out infinite}

/* ---------- Site integration: look switcher, hero die, showcase, banners ---------- */
.fxsw{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.fxsw .lab{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fxsw .opts{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--panel2);border:1px solid var(--line)}
.fxsw button{font:inherit;font-size:.86rem;font-weight:700;border:none;background:none;color:var(--muted);padding:6px 12px;border-radius:999px;cursor:pointer;line-height:1.2;white-space:nowrap}
.fxsw button:hover{color:var(--ink)}
.fxsw button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.fxsw button:disabled{opacity:.4;cursor:not-allowed}
.fxsw.on-dark .lab{color:var(--rail-muted)}
.fxsw.on-dark .opts{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13)}
.fxsw.on-dark button{color:var(--rail-muted)}
.fxsw.on-dark button:hover{color:#F4F5F8}
.fxsw.on-dark button[aria-pressed="true"]{background:var(--rail-accent);color:#1B1508}
.rail-foot{display:flex;flex-direction:column;gap:14px}
.rail-foot .fxsw button{padding:6px 10px;font-size:.8rem}
.hero .fxsw{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.sheet-fx{grid-column:1/-1;padding:6px 2px 0}

.hero-row{display:flex;gap:20px;align-items:flex-start;justify-content:space-between}
.hero-txt{display:flex;flex-direction:column;gap:10px;min-width:0;flex:1}
.roll-col{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none;margin:-6px -4px 0 0}
.roll-out{min-height:1.3em;font-size:.84rem;color:var(--rail-muted);text-align:center;max-width:150px}
.roll-out.c20{color:var(--rail-accent);font-weight:700}
.roll-out.c1{color:#EE8B7B;font-weight:700}
.d20-roll .die text{font-size:4.2px}

.showcase{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px;padding:16px;margin-bottom:22px;align-items:center}
.sc-stage{min-width:0}
.sc-stage .scene{border-radius:10px}
.sc-side{display:flex;flex-direction:column;gap:8px;min-width:0;padding-right:6px}
.sc-side h2{font-family:var(--f-display);font-weight:400;font-size:2rem;line-height:1.05;margin:0}
.sc-side h2 a{color:var(--ink);text-decoration:none}
.sc-side h2 a:hover{color:var(--accent)}
.sc-sub{margin:0;color:var(--muted);font-size:.92rem}
.sc-tag{margin:0;color:var(--ink);max-width:48ch}
.sc-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.sc-note{margin:4px 0 0;font-size:.86rem;color:var(--muted);line-height:1.45}
.sc-note.warn{color:var(--ink);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:9px;padding:8px 10px}
.sc-emb{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 60%,#232838,#0b0d13 70%);color:var(--rail-accent);--accent:var(--rail-accent);--accent-soft:rgba(226,180,86,.14);--accent-line:rgba(226,180,86,.45)}
.sc-emb.is-spell{color:var(--c)}
.sc-emb>.mcircle{position:absolute;width:78%;height:auto;max-height:140%;left:11%;top:50%;transform:translateY(-50%);fill:none;stroke:currentColor;stroke-width:.9;opacity:.22;pointer-events:none}
.sc-emb>.mcircle path,.sc-emb>.mcircle circle{animation:emb-draw 1.6s ease-out both}
.sc-emb .hex.xl{width:150px;height:150px}
.sc-emb .hex.xl svg.frame path{fill:rgba(226,180,86,.08);stroke:var(--rail-accent)}
.sc-emb .sigil{width:150px;height:150px;stroke-width:1.3}

.ent-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:22px;align-items:center;margin-bottom:18px}
.ent-top .ent-head{margin-bottom:0}
.ent-scene{box-shadow:var(--shadow)}
.bg-top{display:flex;gap:14px;align-items:center}
.bg.has-scene{overflow:hidden}
.bg.has-scene .scene{margin:-20px -20px 2px;width:auto;max-width:none;border-radius:11px 11px 0 0}
.sub-card .hex{flex:none}

@media (max-width:999px){
  .showcase{grid-template-columns:minmax(0,1fr);gap:14px}
  .ent-top{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .hero-row{gap:10px}
  .d20-roll{width:84px;height:84px}
  .roll-out{font-size:.76rem;max-width:96px}
  .showcase{padding:12px}
  .sc-side h2{font-size:1.65rem}
  .sc-emb .hex.xl,.sc-emb .sigil{width:110px;height:110px}
  .bg.has-scene .scene{margin:-20px -20px 2px}
}

/* ---------- Catalog: sources, notes, level lists ---------- */
.srcb{display:inline-flex;align-items:center;font-size:.76rem;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:var(--muted);white-space:nowrap}
.srcb.s-srd{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
.srcb.s-phb{color:var(--sc-abjuration);border-color:color-mix(in srgb,var(--sc-abjuration) 40%,transparent)}
.srcb.s-new{color:var(--sc-divination);border-color:color-mix(in srgb,var(--sc-divination) 40%,transparent)}
.srcb.s-ua{color:var(--sc-transmutation);border-color:color-mix(in srgb,var(--sc-transmutation) 40%,transparent)}
.srcb.s-3p{color:var(--sc-enchantment);border-color:color-mix(in srgb,var(--sc-enchantment) 40%,transparent)}
.cat-note{color:var(--muted);margin:0 0 14px;max-width:80ch}
.cat-box{padding:12px 16px;border:1px dashed var(--accent-line);border-radius:10px;background:var(--accent-soft);color:var(--ink);font-size:.94rem;line-height:1.5;margin:14px 0 0}
.lvl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lvl-list li{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line2);font-weight:600}
.lvl-list li:last-child{border-bottom:none}
.lvl-list .lvl{flex:none;min-width:2.8em;text-align:center;font-size:.78rem;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:2px 6px}
.sc-group{scroll-margin-top:84px;margin-top:8px}
.sc-group .group-title a{color:inherit;text-decoration:none}
.sc-group .group-title a:hover{color:var(--accent)}
.ccard .chips .srcb{font-size:.74rem}

/* Classes / subclasses switch at the top of the Classes section */
.sect-tabs{margin:0 0 18px}
.sect-tabs a{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:1rem;color:var(--muted);text-decoration:none;padding:10px 14px;white-space:nowrap;box-shadow:inset 0 -3px 0 transparent}
.sect-tabs a:hover{color:var(--ink)}
.sect-tabs a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--accent)}
.sect-tabs a span{font-size:.78rem;font-weight:700;color:var(--muted);background:var(--panel2);border:1px solid var(--line2);border-radius:999px;padding:1px 8px}
.cat-mini{font-size:.86rem;color:var(--muted);margin:.5em 0 0;font-family:var(--f-ui)}
details.feat>summary .srcb{margin-left:4px;align-self:center}
.bg>.chips{margin-top:-4px}
#fbody .group-title,#bgbody{scroll-margin-top:84px}

/* Bestiary and magic items */
:root{
  --r-common:#6B7280; --r-uncommon:#2F8A3E; --r-rare:#2E64B8; --r-very-rare:#7A3FB8; --r-legendary:#C2661A; --r-artifact:#B32D3A; --r-varies:#1F8282;
  --mt-aberration:#7A3FB8; --mt-beast:#6B7B2E; --mt-celestial:#B48A12; --mt-construct:#5F6B7A; --mt-dragon:#B8402A; --mt-elemental:#C2661A; --mt-fey:#A8457E;
  --mt-fiend:#9C2A2A; --mt-giant:#8A5A2B; --mt-humanoid:#2E64B8; --mt-monstrosity:#4E7A3A; --mt-ooze:#2F8A6E; --mt-plant:#3E8A2F; --mt-undead:#4B5563;
  --sb-rule:#9C2A2A;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --r-common:#A2A9B6; --r-uncommon:#6BC47A; --r-rare:#6E9EE8; --r-very-rare:#B48AE6; --r-legendary:#F0A05A; --r-artifact:#E8707B; --r-varies:#5CC4C4;
    --mt-aberration:#B48AE6; --mt-beast:#AFC062; --mt-celestial:#E4C35C; --mt-construct:#A2ACB9; --mt-dragon:#EE8268; --mt-elemental:#F0A05A; --mt-fey:#E58BBE;
    --mt-fiend:#E87070; --mt-giant:#D2A170; --mt-humanoid:#6E9EE8; --mt-monstrosity:#8FC27A; --mt-ooze:#5CC4A8; --mt-plant:#7FCB6F; --mt-undead:#A7B0BE;
    --sb-rule:#E87070;
  }
}
:root[data-theme="dark"]{
  --r-common:#A2A9B6; --r-uncommon:#6BC47A; --r-rare:#6E9EE8; --r-very-rare:#B48AE6; --r-legendary:#F0A05A; --r-artifact:#E8707B; --r-varies:#5CC4C4;
  --mt-aberration:#B48AE6; --mt-beast:#AFC062; --mt-celestial:#E4C35C; --mt-construct:#A2ACB9; --mt-dragon:#EE8268; --mt-elemental:#F0A05A; --mt-fey:#E58BBE;
  --mt-fiend:#E87070; --mt-giant:#D2A170; --mt-humanoid:#6E9EE8; --mt-monstrosity:#8FC27A; --mt-ooze:#5CC4A8; --mt-plant:#7FCB6F; --mt-undead:#A7B0BE;
  --sb-rule:#E87070;
}
.statblock,.mitem{padding:22px 22px 20px;border-top:3px solid var(--c)}
.statblock .sb-top,.mitem .sp-top{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:700;color:var(--c)}
.statblock .sb-top .dot,.mitem .sp-top .dot{width:10px;height:10px;border-radius:50%;background:var(--c)}
.statblock h2,.mitem h2{font-family:var(--f-display);font-weight:400;font-size:2rem;line-height:1.1;margin:6px 0 2px;text-wrap:balance}
.statblock .en,.mitem .en{color:var(--muted);font-size:.92rem;margin:0 0 6px}
.sb-meta,.mi-meta{margin:0 0 14px;font-style:italic;color:var(--ink);font-family:var(--f-read)}
.mi-meta{padding-bottom:12px;border-bottom:1px solid var(--line2)}
.sb-core{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line2);border:1px solid var(--line2);border-radius:var(--r-sm);overflow:hidden;margin:0 0 12px}
.sb-core div{background:var(--panel2);padding:8px 12px;min-width:0}
.sb-core .wide{grid-column:1 / -1}
.sb-core dt{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sb-core dd{margin:2px 0 0;font-weight:600;font-size:.96rem}
.sb-ab{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:0 0 12px}
.sb-abc{display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 2px;border-radius:var(--r-sm);background:var(--panel2);border:1px solid var(--line2);font-variant-numeric:tabular-nums}
.sb-abc .k{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sb-abc .v{font-size:1.15rem;font-weight:700;line-height:1.15}
.sb-abc .m{font-size:.86rem;color:var(--ink)}
.sb-abc .s{font-size:.7rem;color:var(--muted);white-space:nowrap}
.sb-lines{border-top:2px solid var(--sb-rule);border-bottom:2px solid var(--sb-rule);padding:8px 0 4px;margin:0 0 6px}
.sb-line{margin:0 0 5px;font-size:.95rem;line-height:1.45}
.sb-line b{color:var(--sb-rule);font-weight:700}
.sb-body .sb-sec{font-family:var(--f-display);font-weight:400;font-size:1.3rem;color:var(--sb-rule);margin:16px 0 6px;padding-bottom:3px;border-bottom:1px solid var(--line)}
.sb-body p{margin:0 0 .6em}
.sb-body p b i,.sb-body p i b{font-weight:700}
.sb-body em{font-style:italic;color:var(--muted)}
.sb-body .sb-intro{font-size:.92rem;color:var(--muted)}
.sb-body .sb-spells{margin:-.3em 0 .8em;padding-left:1.2em}
.mitem .prose b{font-weight:700}
.tbl-wrap{overflow-x:auto;margin:0 0 .9em;border:1px solid var(--line2);border-radius:var(--r-sm)}
.mi-tbl{border-collapse:collapse;width:100%;font-family:var(--f-ui);font-size:.9rem;line-height:1.35}
.mi-tbl caption{caption-side:top;text-align:left;font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 10px 6px}
.mi-tbl th{background:var(--panel2);text-align:left;font-weight:700;padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.mi-tbl td{padding:6px 10px;border-top:1px solid var(--line2);vertical-align:top}
.mi-tbl td:first-child{white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:520px){
  .sb-ab{grid-template-columns:repeat(3,minmax(0,1fr))}
  .statblock,.mitem{padding:18px 16px}
}

/* ===== «Похідний журнал авантюриста»: dark-first theme, section colours, frames, home, navigation ===== */
/* Night is the default look. Day (parchment) applies when the viewer explicitly chose light, or toggled «День» in the app. */
:root:not(.day):not([data-theme="light"]){
  --bg:#0C0E13; --panel:#141720; --panel2:#1A1E28; --ink:#ECE6D8; --muted:#9C9AA2; --line:#2A2F3B; --line2:#20242E;
  --accent:#E0B25A; --accent-ink:#1A1408; --accent-soft:#2C2416; --accent-line:#5E4A24;
  --rail:#08090D; --rail2:#13161E; --rail-ink:#DCD7CB; --rail-muted:#878591; --rail-accent:#E0B25A;
  --danger:#EE8B7B; --scrim:rgba(0,0,0,.66);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.28);
  --c-home:#E0B25A; --c-classes:#9DB4D6; --c-races:#6FC8A6; --c-spells:#B89CFF; --c-feats:#EE93C4; --c-backgrounds:#D7A86E;
  --c-gear:#A8B8A2; --c-bestiary:#F0706A; --c-magic:#F2C35E; --c-rules:#EFA74A; --c-campaign:#5ECB8E;
  --r-common:#A7ADB8; --r-uncommon:#6BCB7E; --r-rare:#6FA3F0; --r-very-rare:#B98CF0; --r-legendary:#F5A55A; --r-artifact:#EE6E7A; --r-varies:#5CC8C8;
  --sb-rule:#EE7A70;
  --map-line:rgba(224,178,90,.07); --map-line2:rgba(224,178,90,.045);
  --hero-bg:#0F1219; --hero-ink:#F3EEE2;
  color-scheme:dark;
}
:root.day,:root[data-theme="light"]{
  --bg:#EDE3CD; --panel:#FBF6EA; --panel2:#F3EAD6; --ink:#2A2118; --muted:#6C5E4A; --line:#D8C8A8; --line2:#E5D8BD;
  --accent:#8A5A12; --accent-ink:#FFFFFF; --accent-soft:#F1E1BD; --accent-line:#CFAE6C;
  --rail:#1F1912; --rail2:#2B231A; --rail-ink:#EBE2D0; --rail-muted:#A89A83; --rail-accent:#E6B85E;
  --danger:#A3392A; --scrim:rgba(30,22,12,.5);
  --shadow:0 1px 2px rgba(60,40,10,.08),0 8px 22px rgba(60,40,10,.09);
  --c-home:#8A5A12; --c-classes:#3E5F8E; --c-races:#1F7F5E; --c-spells:#6A47C2; --c-feats:#A8396F; --c-backgrounds:#8E5A1E;
  --c-gear:#566A4E; --c-bestiary:#A82E2A; --c-magic:#9A6A0C; --c-rules:#A2600E; --c-campaign:#1E7F4A;
  --r-common:#6B7280; --r-uncommon:#2F8A3E; --r-rare:#2E64B8; --r-very-rare:#7A3FB8; --r-legendary:#C2661A; --r-artifact:#B32D3A; --r-varies:#1F8282;
  --sb-rule:#9C2A2A;
  --map-line:rgba(138,90,18,.10); --map-line2:rgba(138,90,18,.06);
  --hero-bg:#2A2117; --hero-ink:#F7EEDC;
  color-scheme:light;
}
:root{--sec:var(--accent)}
[data-sec="home"]{--sec:var(--c-home)} [data-sec="classes"]{--sec:var(--c-classes)} [data-sec="races"]{--sec:var(--c-races)}
[data-sec="spells"]{--sec:var(--c-spells)} [data-sec="feats"]{--sec:var(--c-feats)} [data-sec="backgrounds"]{--sec:var(--c-backgrounds)}
[data-sec="gear"]{--sec:var(--c-gear)} [data-sec="bestiary"]{--sec:var(--c-bestiary)} [data-sec="magic"]{--sec:var(--c-magic)}
[data-sec="rules"]{--sec:var(--c-rules)} [data-sec="campaign"]{--sec:var(--c-campaign)} [data-sec="tracker"]{--sec:var(--c-bestiary)} [data-sec="chars"]{--sec:var(--c-home)}

body{background:radial-gradient(1100px 520px at 78% -12%,color-mix(in srgb,var(--sec) 9%,transparent),transparent 70%),var(--bg);background-attachment:fixed;transition:background-color .3s}

/* Rail: section colour on the active link */
.nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--sec);background:color-mix(in srgb,var(--sec) 12%,var(--rail2))}
.nav a[aria-current="page"] svg{color:var(--sec)}
.nav a[data-sec]:hover svg{color:var(--sec)}
.nav a[data-sec] svg{transition:color .2s}

/* Page heads get a coloured ornament */
.ph h1{position:relative;padding-bottom:12px}
.ph h1::after{content:"";position:absolute;left:0;bottom:0;width:72px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--sec),transparent)}
.ph .eyebrow{color:var(--sec)}

/* Framed cards: thin corner ornaments in the section colour */
.card{position:relative}
.card::after{content:"";position:absolute;inset:5px;pointer-events:none;border-radius:calc(var(--r) - 4px);z-index:3;opacity:.75;
  --fc:color-mix(in srgb,var(--sec) 70%,transparent);
  background:
    linear-gradient(var(--fc),var(--fc)) left top/12px 1.5px no-repeat,linear-gradient(var(--fc),var(--fc)) left top/1.5px 12px no-repeat,
    linear-gradient(var(--fc),var(--fc)) right top/12px 1.5px no-repeat,linear-gradient(var(--fc),var(--fc)) right top/1.5px 12px no-repeat,
    linear-gradient(var(--fc),var(--fc)) left bottom/12px 1.5px no-repeat,linear-gradient(var(--fc),var(--fc)) left bottom/1.5px 12px no-repeat,
    linear-gradient(var(--fc),var(--fc)) right bottom/12px 1.5px no-repeat,linear-gradient(var(--fc),var(--fc)) right bottom/1.5px 12px no-repeat}
.card.filters::after,.card.detail-empty::after{opacity:.35}
:root:not(.day):not([data-theme="light"]) .card{background:linear-gradient(180deg,color-mix(in srgb,var(--sec) 4%,var(--panel)),var(--panel) 160px)}
.rows{border-color:var(--line)}
.row[aria-current="true"]{background:color-mix(in srgb,var(--sec) 14%,var(--panel));box-shadow:inset 3px 0 0 var(--sec)}
.chip.on{background:var(--sec);border-color:var(--sec);color:var(--bg)}
.linkbtn,.back{color:var(--sec)}
.search-field input:focus,input:focus,select:focus,textarea:focus{border-color:var(--sec);box-shadow:0 0 0 3px color-mix(in srgb,var(--sec) 22%,transparent)}

/* ---------- page bar (desktop) and back button ---------- */
.pagebar{position:sticky;top:0;z-index:25;display:flex;align-items:center;gap:12px;min-height:52px;box-sizing:border-box;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line2);
  padding-block:8px;padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}
.pagebar[hidden]{display:none!important}
.backbtn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:700;font-size:.92rem;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 10px;cursor:pointer;white-space:nowrap}
.backbtn:hover{border-color:var(--sec);color:var(--sec)}
.backbtn svg{width:18px;height:18px}
.pb-crumbs{display:flex;align-items:center;gap:8px;min-width:0;font-size:.92rem;color:var(--muted)}
.pb-crumbs a{color:var(--muted);text-decoration:none;white-space:nowrap}
.pb-crumbs a:hover{color:var(--sec)}
.pb-crumbs .dot{width:8px;height:8px;border-radius:50%;background:var(--sec);flex:none}
.pb-crumbs b{color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-tools{margin-left:auto;display:flex;gap:8px}
.iconbtn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.iconbtn:hover{border-color:var(--sec);color:var(--sec)}
.iconbtn svg{width:19px;height:19px}
.tb-back{display:none}
.tb-title{display:none}
@media (max-width:999px){
  .pagebar{display:none}
  .topbar .tb-back{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--rail2);color:var(--rail-ink);border:none;cursor:pointer;flex:none}
  .topbar .tb-back[hidden]{display:none}
  .topbar.inner .brand{display:none}
  .topbar.inner .tb-title{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.15}
  .tb-title small{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sec)}
  .tb-title b{font-family:var(--f-display);font-weight:400;font-size:1.15rem;color:#F3EEE2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* page enter transition and back-to-top */
.view.enter{animation:view-in .26s cubic-bezier(.2,.7,.2,1)}
@keyframes view-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.totop{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:35;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:var(--panel);color:var(--sec);border:1px solid color-mix(in srgb,var(--sec) 50%,var(--line));box-shadow:var(--shadow);cursor:pointer;
  opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s,transform .2s}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop svg{width:20px;height:20px;transform:rotate(90deg)}
@media (max-width:999px){.totop{bottom:calc(84px + env(safe-area-inset-bottom,0px));right:max(14px,env(safe-area-inset-right,0px))}}

/* theme toggle in rail / sheet */
.daytog{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.86rem;font-weight:700;color:var(--rail-muted);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:999px;padding:6px 12px;cursor:pointer}
.daytog:hover{color:#F4F5F8}
.daytog svg{width:16px;height:16px}
.sheet .daytog{color:var(--ink);background:var(--panel2);border-color:var(--line)}

/* ---------- home ---------- */
.hero2{position:relative;overflow:hidden;isolation:isolate;border-radius:20px;margin-bottom:20px;padding:40px 40px 34px;color:var(--hero-ink);
  background:
    radial-gradient(600px 300px at 82% 40%,rgba(224,178,90,.16),transparent 70%),
    repeating-radial-gradient(circle at 18% 120%,transparent 0 22px,var(--map-line) 22px 23px),
    repeating-radial-gradient(circle at 92% -30%,transparent 0 30px,var(--map-line2) 30px 31px),
    linear-gradient(160deg,#1B1A22,var(--hero-bg) 60%,#0A0B0F);
  border:1px solid rgba(224,178,90,.22);box-shadow:var(--shadow)}
.hero2::after{content:"";position:absolute;inset:8px;border-radius:14px;pointer-events:none;border:1px solid rgba(224,178,90,.16)}
.hero2 .compass{position:absolute;right:-40px;bottom:-60px;width:300px;height:300px;color:#E0B25A;opacity:.13;z-index:-1;pointer-events:none}
.hero2 .compass g{transform-origin:100px 100px;animation:spin 240s linear infinite}
.fog{position:absolute;inset:-20%;z-index:-1;pointer-events:none;opacity:.55;
  background:radial-gradient(40% 30% at 30% 70%,rgba(160,170,200,.10),transparent 70%),radial-gradient(35% 25% at 70% 80%,rgba(200,180,150,.08),transparent 70%);
  animation:fog 28s ease-in-out infinite alternate}
@keyframes fog{from{transform:translateX(-4%)}to{transform:translateX(5%)}}
.embers{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.embers i{position:absolute;bottom:-10px;left:var(--x);width:3px;height:3px;border-radius:50%;background:#FFC46B;box-shadow:0 0 6px 2px rgba(255,160,60,.6);opacity:0;
  animation:ember var(--d) linear infinite;animation-delay:var(--t)}
@keyframes ember{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}70%{opacity:.6}100%{transform:translate(var(--dx),-260px);opacity:0}}
.hero2 .eyebrow{color:#E0B25A}
.hero2 h1{font-family:var(--f-display);font-weight:400;font-size:3.6rem;line-height:1;margin:6px 0 10px;color:var(--hero-ink);text-shadow:0 2px 24px rgba(224,178,90,.25)}
.hero2 .lede{margin:0 0 18px;color:#B9B2A3;font-size:1.12rem;max-width:56ch}
.hero2 .hero-row{display:flex;gap:24px;align-items:center;justify-content:space-between}
.bigsearch{display:flex;align-items:center;gap:12px;width:100%;max-width:600px;box-sizing:border-box;background:rgba(255,255,255,.96);color:#4B4436;border:none;border-radius:14px;padding:15px 18px;font:inherit;font-size:1.05rem;cursor:pointer;text-align:left;box-shadow:0 10px 34px rgba(0,0,0,.35),0 0 0 1px rgba(224,178,90,.35)}
.bigsearch span{flex:1}
.bigsearch svg{color:#8A5A12;width:22px;height:22px}
.bigsearch kbd{color:#8A7A5E}
.hero2 .d20-roll{width:140px;height:140px;color:#E0B25A}
.hero2 .roll-out{color:#B9B2A3}

.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:26px;grid-auto-flow:dense}
.bento-card{padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.bento-card h2{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sec);margin:0;display:flex;align-items:center;gap:8px}
.bento-card h2 svg{width:16px;height:16px}
.b-daily{grid-column:span 2;grid-row:span 2;padding:22px;overflow:hidden}
.b-daily .kind{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:700;color:var(--sec)}
.b-daily .kind .dot{width:9px;height:9px;border-radius:50%;background:var(--sec)}
.b-daily h3{font-family:var(--f-display);font-weight:400;font-size:2.4rem;line-height:1.05;margin:0;text-wrap:balance}
.b-daily h3 a{color:var(--ink);text-decoration:none}
.b-daily h3 a:hover{color:var(--sec)}
.b-daily .en{color:var(--muted);font-size:.92rem;margin-top:-4px}
.b-daily .meta{display:flex;flex-wrap:wrap;gap:6px}
.b-daily .snip{font-family:var(--f-read);font-size:1.06rem;line-height:1.6;color:var(--ink);margin:0;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.b-daily .glyph{position:absolute;right:-26px;bottom:-30px;width:190px;height:190px;color:var(--sec);opacity:.09;pointer-events:none}
.b-daily .glyph svg{width:100%;height:100%}
.b-daily .go{margin-top:auto;align-self:flex-start}
.b-next .when{font-family:var(--f-display);font-size:1.45rem;line-height:1.2}
.countdown{display:flex;gap:8px}
.countdown span{display:flex;flex-direction:column;align-items:center;min-width:52px;padding:6px 4px;border-radius:9px;background:var(--panel2);border:1px solid var(--line2)}
.countdown b{font-size:1.4rem;font-variant-numeric:tabular-nums;line-height:1.1}
.countdown small{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.mini-list .k{width:8px;height:8px;border-radius:50%;background:var(--sec);flex:none;align-self:center}
.mini-list a{align-items:center}
.mini-list a .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty-mini{color:var(--muted);font-size:.92rem;margin:0}

.tiles2{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:26px}
.tile2{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:center;padding:16px;text-decoration:none;
  background:linear-gradient(135deg,color-mix(in srgb,var(--sec) 10%,var(--panel)),var(--panel) 65%);border:1px solid var(--line);border-radius:var(--r);transition:border-color .18s,transform .18s,box-shadow .18s}
.tile2:hover{border-color:color-mix(in srgb,var(--sec) 60%,var(--line));transform:translateY(-2px);box-shadow:0 10px 26px -12px color-mix(in srgb,var(--sec) 60%,transparent)}
.tile2 .ic{grid-row:span 2;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--sec);background:color-mix(in srgb,var(--sec) 14%,transparent);border:1px solid color-mix(in srgb,var(--sec) 35%,transparent)}
.tile2 .ic svg{width:22px;height:22px}
.tile2 .tt{font-weight:700;font-size:1.05rem}
.tile2 .tn{font-size:.82rem;color:var(--sec);font-weight:700;font-variant-numeric:tabular-nums}
.tile2 .td{grid-column:2 / -1;font-size:.86rem;color:var(--muted)}
@media (max-width:1100px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .hero2{padding:26px 20px 22px}
  .hero2 h1{font-size:2.5rem}
  .hero2 .hero-row{flex-direction:row;align-items:flex-start}
  .hero2 .d20-roll{width:84px;height:84px}
  .bento{grid-template-columns:minmax(0,1fr)}
  .b-daily{grid-column:auto;grid-row:auto}
  .b-daily h3{font-size:1.9rem}
  .tiles2{grid-template-columns:1fr 1fr}
  .tile2{grid-template-columns:minmax(0,1fr) auto;padding:12px}
  .tile2 .ic{grid-row:auto;grid-column:1 / -1;width:36px;height:36px;margin-bottom:6px}
  .tile2 .td{display:none}
  .tile2 .tt{font-size:.98rem}
}
.tabbar [aria-current="page"]{color:var(--sec)}
.bento .qlinks{gap:6px}
@media (max-width:640px){
  .hero2 .hero-row{display:block}
  .hero2 .roll-col{position:absolute;top:16px;right:12px;margin:0}
  .hero2 .eyebrow,.hero2 h1,.hero2 .lede{max-width:calc(100% - 92px)}
  .hero2 .lede{max-width:none}
  .bigsearch{padding:13px 14px;font-size:1rem}
  .bigsearch kbd{display:none}
}

/* ---------- collectible cards: monsters and loot ---------- */
.tilt{transform:perspective(1300px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .45s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.tilt.tilting{transition:transform .08s linear}
.tilt .glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),color-mix(in srgb,var(--c) 16%,transparent),transparent 60%)}
.tilt.tilting .glare{opacity:1}
.detail{perspective:1300px}
.card-acts{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 14px}
.favbtn.fight{color:var(--c-bestiary)}
.favbtn.fight:hover{border-color:var(--c-bestiary)}
.statblock{border-top:none;padding-top:0;overflow:hidden}
.sb-band{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 -22px 14px;padding:18px 22px 14px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 26%,var(--panel)),color-mix(in srgb,var(--c) 6%,var(--panel)) 70%);border-bottom:2px solid var(--c)}
.sb-band h2{margin:4px 0 2px}
.sb-band .en{margin:0}
.cr-medal{flex:none;width:66px;height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(160deg,var(--c),color-mix(in srgb,var(--c) 45%,#000))}
.cr-medal small{font-size:.66rem;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.85)}
.cr-medal b{font-family:var(--f-display);font-weight:400;font-size:1.45rem;line-height:1;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4)}
@media (max-width:600px){.sb-band{margin:0 -16px 12px;padding:16px}}

.mitem{overflow:hidden;box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent),0 14px 40px -14px color-mix(in srgb,var(--c) 70%,transparent),var(--shadow);
  background:radial-gradient(520px 220px at 85% -10%,color-mix(in srgb,var(--c) 18%,transparent),transparent 70%),var(--panel)}
.loot-glyph{position:absolute;right:-18px;top:-14px;width:150px;height:150px;color:var(--c);opacity:.13;pointer-events:none;z-index:0}
.loot-glyph svg{width:100%;height:100%;stroke-width:1.1}
.mitem>*{position:relative;z-index:1}
.mitem>.glare{position:absolute;z-index:2}
.mitem>.loot-glyph{position:absolute;z-index:0}
.mitem .sp-top{flex-wrap:wrap}
.rune{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:1px 8px 1px 5px;border-radius:999px;font-size:.78rem;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);background:color-mix(in srgb,var(--c) 10%,transparent)}
.rune svg,.rune-tag svg{width:12px;height:12px}
.rune-tag{display:inline-grid;place-items:center;color:var(--accent)}
.mitem.r-legendary::before,.mitem.r-artifact::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:4;
  background:linear-gradient(115deg,transparent 35%,var(--c) 48%,#fff8 50%,var(--c) 52%,transparent 65%) 0 0/300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:loot-shine 4.5s linear infinite}
@keyframes loot-shine{from{background-position:120% 0}to{background-position:-120% 0}}
#mi-list .row .dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent),0 0 10px color-mix(in srgb,var(--c) 70%,transparent)}
#mi-list .row:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 10%,transparent),transparent 60%)}
#mo-list .row:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 10%,transparent),transparent 60%)}

/* ---------- clickable rolls, condition hints ---------- */
.roll{font:inherit;color:inherit;background:color-mix(in srgb,var(--sec) 10%,transparent);border:none;border-bottom:1.5px dotted color-mix(in srgb,var(--sec) 80%,transparent);
  border-radius:4px 4px 0 0;padding:0 3px;margin:0 1px;cursor:pointer;line-height:inherit;white-space:nowrap;font-variant-numeric:tabular-nums}
.roll:hover{background:color-mix(in srgb,var(--sec) 22%,transparent);color:var(--ink)}
.roll.d20{font-weight:700}
.sb-abc .roll{background:none;border:none;padding:0;margin:0;border-radius:4px}
.sb-abc .roll.m{font-size:.86rem;color:var(--ink);border-bottom:1px dotted var(--muted)}
.sb-abc .roll.s{font-size:.7rem;color:var(--muted);white-space:nowrap}
.sb-abc .roll:hover{color:var(--sec)}
.cond{font:inherit;color:inherit;background:none;border:none;padding:0;margin:0;cursor:help;line-height:inherit;border-bottom:1.5px dashed color-mix(in srgb,var(--c-rules) 75%,transparent)}
.cond:hover{color:var(--c-rules)}
.pop{position:fixed;z-index:80;max-height:min(60vh,420px);overflow:auto;box-sizing:border-box;padding:12px 14px;border-radius:12px;background:var(--panel);
  border:1px solid color-mix(in srgb,var(--c-rules) 45%,var(--line));box-shadow:0 18px 50px rgba(0,0,0,.45)}
.pop[hidden]{display:none!important}
.pop-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.pop-h b{font-family:var(--f-display);font-weight:400;font-size:1.25rem;color:var(--c-rules)}
.pop .prose{font-size:.98rem;line-height:1.5}
.pop .linkbtn{color:var(--c-rules);text-decoration:none;font-size:.88rem;white-space:nowrap}

/* ---------- dice tray ---------- */
.dice{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:45;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.dice>*{pointer-events:auto}
.totop{right:max(80px,calc(env(safe-area-inset-right,0px) + 60px))}
.dice-fab{position:relative;width:54px;height:54px;border-radius:50%;padding:7px;box-sizing:border-box;background:radial-gradient(circle at 35% 30%,#2B2416,#100D08);color:#E0B25A;border:1px solid rgba(224,178,90,.55);
  box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 4px color-mix(in srgb,var(--bg) 60%,transparent);cursor:pointer}
.dice-fab:hover{border-color:#E0B25A}
.dice-fab .die text{font-size:4.4px}
.dice-fab.crit{color:#FFD36B;box-shadow:0 0 22px rgba(255,200,90,.7)}
.dice-fab.fumble{color:#EE7A70}
.dfab-n{position:absolute;right:-6px;top:-6px;min-width:22px;height:22px;padding:0 5px;box-sizing:border-box;border-radius:999px;display:grid;place-items:center;font-size:.8rem;font-weight:700;background:var(--accent);color:var(--accent-ink)}
.dice-panel{width:min(340px,calc(100vw - 32px));max-height:min(78vh,640px);overflow:auto;box-sizing:border-box;padding:14px;border-radius:16px;background:var(--panel);border:1px solid var(--line);box-shadow:0 22px 60px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:10px}
.dice-panel[hidden]{display:none!important}
.dp-head{display:flex;justify-content:space-between;align-items:center}
.dp-head b{font-family:var(--f-display);font-weight:400;font-size:1.35rem}
.dp-head .iconbtn{width:32px;height:32px}
.dp-dies{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.die-btn{font:inherit;font-weight:700;padding:9px 0;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);cursor:pointer}
.die-btn:hover{border-color:var(--accent);color:var(--accent)}
.dp-adv{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--panel2);border:1px solid var(--line)}
.dp-adv button{flex:1;font:inherit;font-size:.84rem;font-weight:700;border:none;background:none;color:var(--muted);padding:6px 4px;border-radius:999px;cursor:pointer}
.dp-adv button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.dp-hist{display:flex;flex-direction:column;gap:6px}
.dr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 10px;padding:7px 10px;border-radius:10px;background:var(--panel2);border:1px solid var(--line2)}
.dr-main{display:flex;flex-direction:column;min-width:0}
.dr-l{font-weight:700;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-e{font-size:.78rem;color:var(--muted)}
.dr-t{font-family:var(--f-display);font-size:1.5rem;line-height:1;font-variant-numeric:tabular-nums}
.dr.big .dr-t{font-size:2rem;color:var(--accent)}
.dr-x{grid-column:1 / -1;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.dr.crit{border-color:#E0B25A;box-shadow:0 0 18px -6px rgba(224,178,90,.8)}
.dr.crit .dr-x,.dr.crit .dr-t{color:#E8B94E}
.dr.fumble{border-color:color-mix(in srgb,#EE7A70 60%,transparent)}
.dr.fumble .dr-x,.dr.fumble .dr-t{color:#EE7A70}
.dice-bubble{width:min(300px,calc(100vw - 32px));animation:view-in .25s ease}
.dice-bubble .dr{box-shadow:0 14px 40px rgba(0,0,0,.45);background:var(--panel)}
@media (max-width:999px){
  .dice{bottom:calc(76px + env(safe-area-inset-bottom,0px));right:max(12px,env(safe-area-inset-right,0px))}
  .dice-fab{display:none}
  .totop{right:max(14px,env(safe-area-inset-right,0px))}
  .tabbar button[aria-expanded="true"]{color:var(--rail-accent)}
}

/* ---------- combat tracker ---------- */
.trk{display:flex;flex-direction:column;gap:14px;max-width:980px}
.trk-head{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:16px 18px}
.trk-round{display:flex;flex-direction:column;align-items:center;min-width:76px;padding:6px 10px;border-radius:12px;background:color-mix(in srgb,var(--sec) 14%,var(--panel2));border:1px solid color-mix(in srgb,var(--sec) 40%,transparent)}
.trk-round small{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sec)}
.trk-round b{font-family:var(--f-display);font-weight:400;font-size:2rem;line-height:1}
.trk-btns{display:flex;flex-wrap:wrap;gap:8px}
.btn.primary{background:var(--sec);border-color:var(--sec);color:var(--bg)}
#trk-confirm{flex-basis:100%}
#trk-confirm:empty{display:none}
.trk-add{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.trk-add h2{margin:0;font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sec)}
.trk-form{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr)) auto;gap:8px}
.trk-sug{display:flex;flex-direction:column;gap:4px}
.trk-sug:empty{display:none}
.sug{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font:inherit;text-align:left;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);cursor:pointer}
.sug:hover{border-color:var(--sec)}
.sug span{font-size:.84rem;color:var(--muted);white-space:nowrap}
.tlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.trow{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--line);transition:border-color .2s,box-shadow .2s}
.trow.cur{border-color:var(--sec);box-shadow:0 0 0 1px var(--sec),0 12px 30px -14px color-mix(in srgb,var(--sec) 80%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--sec) 12%,var(--panel)),var(--panel) 60%)}
.trow.down{opacity:.6}
.trow.down .tname a,.trow.down .tname{text-decoration:line-through}
.tinit input{width:64px;box-sizing:border-box;text-align:center;font-family:var(--f-display);font-size:1.5rem;padding:6px 4px;border-radius:10px}
.tmain{display:flex;flex-direction:column;gap:6px;min-width:0}
.tname{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-weight:700;font-size:1.05rem}
.tname a{color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--muted)}
.tname a:hover{color:var(--sec)}
.tnow{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bg);background:var(--sec);padding:2px 7px;border-radius:999px}
.tac,.tdown,.tblood{font-size:.76rem;font-weight:700;padding:1px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.tdown{color:var(--danger);border-color:var(--danger)}
.tblood{color:var(--c-bestiary);border-color:color-mix(in srgb,var(--c-bestiary) 50%,transparent)}
.thp{display:flex;align-items:center;gap:10px}
.hpbar{flex:1;max-width:280px;height:8px;border-radius:999px;background:var(--panel2);border:1px solid var(--line2);overflow:hidden}
.hpbar i{display:block;height:100%;background:linear-gradient(90deg,#3FA45E,#7ACB6F);border-radius:inherit;transition:width .3s}
.trow.bloody .hpbar i{background:linear-gradient(90deg,#C2661A,#F0A05A)}
.trow.down .hpbar i{background:var(--danger)}
.hpn{font-size:.88rem;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.tconds{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.tcond{font:inherit;font-size:.78rem;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c-rules) 50%,transparent);background:color-mix(in srgb,var(--c-rules) 12%,transparent);color:var(--c-rules);cursor:pointer}
.tconds select{width:auto;font-size:.8rem;padding:2px 8px;border-radius:999px}
.tact{display:flex;gap:6px;align-items:center}
.tact input{width:70px;box-sizing:border-box;padding:7px 8px;text-align:center}
.tbtn{font:inherit;font-size:.86rem;font-weight:700;padding:7px 10px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);cursor:pointer}
.tbtn.dmg:hover{border-color:var(--danger);color:var(--danger)}
.tbtn.heal:hover{border-color:#5ECB8E;color:#5ECB8E}
.tbtn.del{display:grid;place-items:center;padding:6px;color:var(--muted)}
.tbtn.del svg{width:16px;height:16px}
@media (max-width:720px){
  .trk-form{grid-template-columns:1fr 1fr}
  .trk-form input[name="n"]{grid-column:1 / -1}
  .trk-form button{grid-column:1 / -1}
  .trow{grid-template-columns:56px minmax(0,1fr)}
  .tinit input{width:56px;font-size:1.3rem}
  .tact{grid-column:1 / -1}
  .tact input{flex:1}
}
input[type="number"]{font:inherit;font-size:1rem;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;box-sizing:border-box;-moz-appearance:textfield}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{opacity:.5}
.roll{margin:0;padding:0 2px}
.feat-meta .pill{white-space:normal;max-width:100%}
.srcb{max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* ---------- character sheets ---------- */
.ch-tools{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.ch-tools .btn svg{width:18px;height:18px}
.imp{padding:16px;margin-bottom:16px;display:flex;flex-direction:column;gap:10px}
.chgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.chcard{display:flex;gap:14px;align-items:center;padding:16px;text-decoration:none}
.chcard:hover{border-color:var(--sec)}
.chc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.chcard h2{font-family:var(--f-display);font-weight:400;font-size:1.45rem;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chcard p{margin:0;color:var(--muted);font-size:.92rem}
.ch-medal,.lvl-medal{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:58px;height:66px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(160deg,#F2C35E,#8A5A12);color:#1A1408}
.ch-medal small,.lvl-medal small{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ch-medal b,.lvl-medal b{font-family:var(--f-display);font-weight:400;font-size:1.6rem;line-height:1}
.lvl-medal{width:78px;height:88px}
.lvl-medal b{font-size:2.3rem}
.xpbar{position:relative;height:12px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
.xpbar i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:linear-gradient(90deg,#8A5A12,#E0B25A 70%,#FFE29A);box-shadow:0 0 14px rgba(224,178,90,.6);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.xpbar.sm{height:7px}
.xpbar .xp-l,.xpbar .xp-r{display:none}
.cs{display:flex;flex-direction:column;gap:14px}
.cs-head{padding:20px;display:flex;flex-direction:column;gap:16px}
.cs-id{display:flex;align-items:center;gap:16px}
.cs-name{flex:1;min-width:0}
.cs-n{font-family:var(--f-display)!important;font-size:2.1rem!important;line-height:1.1;border:1px solid transparent!important;background:transparent!important;padding:2px 6px!important;margin-left:-6px;width:100%}
.cs-n:hover{border-color:var(--line)!important}
.cs-sub{margin:4px 0 0;color:var(--muted)}
.cs-sub a{color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--muted)}
.cs-sub a:hover{color:var(--sec)}
.cs-edit{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;padding:14px;border-radius:12px;background:var(--panel2);border:1px solid var(--line2)}
.cs-edit[hidden]{display:none}
.cs-edit label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;font-weight:700;color:var(--muted)}
.cs-edit-act{grid-column:1 / -1;display:flex;gap:8px;flex-wrap:wrap}
#ch-msg{grid-column:1 / -1}
#ch-msg:empty{display:none}
.xp{display:flex;flex-direction:column;gap:8px}
.xp-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.95rem;color:var(--muted)}
.xp-top b{color:var(--ink);font-variant-numeric:tabular-nums}
.xp-add{display:flex;gap:8px;flex-wrap:wrap}
.xp-add input{flex:1 1 160px;width:auto}
.xp-add select{flex:0 1 150px;width:auto}
.cs-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;align-items:start}
.cs-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.cs-col>.card{padding:18px}
.cs-col h2{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sec)}
.cs-col h2 svg{width:16px;height:16px}
.hint2{font-size:.72rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
.cs-core{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:12px;background:var(--panel2);border:1px solid var(--line2);text-align:center}
.stat small{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stat b{font-family:var(--f-display);font-weight:400;font-size:1.6rem;line-height:1.1}
.roll.big{font-family:var(--f-display);font-size:1.6rem;font-weight:400;line-height:1.1;background:none;border-bottom-width:2px}
.hpbox{grid-column:1 / -1;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:var(--panel2);border:1px solid var(--line2)}
.hp-top{display:flex;justify-content:space-between;align-items:baseline}
.hp-top small{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hp-top b{font-family:var(--f-display);font-weight:400;font-size:1.8rem}
.hp-top em{font-style:normal;color:#6FA3F0;font-size:.9rem}
.hpbar.big{max-width:none;height:10px}
.hp-act{display:flex;gap:6px}
.hp-act input{flex:1;width:auto;padding:7px 10px}
.rest{text-align:right}
.abgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.abt{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;border-radius:12px;background:var(--panel2);border:1px solid var(--line2)}
.abt.prof{border-color:color-mix(in srgb,var(--sec) 45%,var(--line2))}
.abt .k{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.abt input{width:64px;text-align:center;font-family:var(--f-display);font-size:1.4rem;padding:4px;border-radius:8px}
.abt .roll.m{font-size:1.05rem;background:none}
.abt .roll.s{font-size:.74rem;font-weight:500;color:var(--muted);background:none;border-bottom-width:1px}
.sklist{list-style:none;margin:0;padding:0;columns:2;column-gap:18px}
.sklist li{display:flex;align-items:center;gap:8px;padding:5px 0;break-inside:avoid;border-bottom:1px solid var(--line2)}
.sn{flex:1;min-width:0;font-size:.95rem}
.sn small{color:var(--muted);font-size:.72rem}
.pdot{flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--muted);background:none;cursor:pointer;padding:0}
.pdot.l1{background:var(--sec);border-color:var(--sec)}
.pdot.l2{background:var(--sec);border-color:var(--sec);box-shadow:0 0 0 3px color-mix(in srgb,var(--sec) 35%,transparent)}
.slotrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line2)}
.pips{display:flex;gap:6px;flex-wrap:wrap}
.pip{width:20px;height:20px;transform:rotate(45deg);border-radius:4px;border:1.5px solid #B89CFF;background:color-mix(in srgb,#B89CFF 30%,transparent);cursor:pointer;padding:0}
.pip.used{background:none;opacity:.5}
.gains{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.gains li{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--panel2);border:1px solid var(--line2)}
.gains .gi{grid-row:span 2;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--sec);background:color-mix(in srgb,var(--sec) 14%,transparent)}
.gains .gi svg{width:16px;height:16px}
.gains .gt{font-weight:700}
.gains .gv{font-size:.86rem;color:var(--muted)}
.gains .g-asi .gi,.gains .g-sub .gi{color:#E0B25A;background:rgba(224,178,90,.15)}
.cs-next{border-color:color-mix(in srgb,var(--sec) 45%,var(--line))}
.flist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.flist li{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid var(--line2)}
.flist .lv{flex:none;min-width:2.2em;text-align:center;font-size:.76rem;font-weight:700;color:var(--sec);background:color-mix(in srgb,var(--sec) 14%,transparent);border-radius:6px;padding:1px 6px}
.flist small{margin-left:auto;color:var(--muted);font-size:.78rem;white-space:nowrap}
.timeline{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid color-mix(in srgb,var(--sec) 40%,transparent);display:flex;flex-direction:column;gap:14px}
.timeline>li{position:relative}
.timeline>li::before{content:"";position:absolute;left:-21px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--sec);box-shadow:0 0 0 3px var(--panel)}
.tl-h{display:flex;justify-content:space-between;margin-bottom:6px}
.tl-l{font-weight:700}
.tl-d{font-size:.82rem;color:var(--muted)}
.cs-notes textarea{min-height:140px}
@media (max-width:900px){.cs-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.sklist{columns:1}.cs-n{font-size:1.6rem!important}.lvl-medal{width:62px;height:70px}.lvl-medal b{font-size:1.8rem}}

/* level-up celebration */
.lvlup-wrap{position:fixed;inset:0;z-index:70;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:16px}
.lvlup{position:relative;width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;box-sizing:border-box;padding:30px 24px 22px;border-radius:20px;text-align:center;
  background:radial-gradient(420px 220px at 50% 0,rgba(224,178,90,.28),transparent 70%),var(--panel);border:1px solid rgba(224,178,90,.55);box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 60px -10px rgba(224,178,90,.5);animation:lu-in .5s cubic-bezier(.2,1.3,.4,1)}
@keyframes lu-in{from{transform:scale(.8) translateY(20px);opacity:0}to{transform:none;opacity:1}}
.lu-burst{position:absolute;left:50%;top:76px;width:0;height:0;pointer-events:none}
.lu-burst i{position:absolute;width:6px;height:6px;border-radius:50%;background:#FFD77A;box-shadow:0 0 10px #FFB84A;opacity:0;transform:rotate(var(--a)) translateX(0);animation:lu-spark 1.2s ease-out var(--t) forwards}
@keyframes lu-spark{0%{opacity:1;transform:rotate(var(--a)) translateX(10px)}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d))}}
.lu-medal{margin:0 auto 10px;width:96px;height:108px;display:flex;flex-direction:column;align-items:center;justify-content:center;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(160deg,#FFE29A,#E0B25A 45%,#8A5A12);color:#1A1408;animation:lu-medal 1s ease-out}
@keyframes lu-medal{0%{transform:scale(.3) rotate(-30deg)}60%{transform:scale(1.15) rotate(6deg)}100%{transform:none}}
.lu-medal small{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.lu-medal b{font-family:var(--f-display);font-weight:400;font-size:3rem;line-height:1}
.lvlup h2{font-family:var(--f-display);font-weight:400;font-size:1.9rem;margin:4px 0}
.lu-sub{color:var(--muted);margin:0 0 14px}
.lu-body{text-align:left;display:flex;flex-direction:column;gap:8px}
.lu-body h3{margin:8px 0 2px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#E0B25A}
.lu-body .gains li{animation:view-in .4s ease both}
.lu-body .gains li:nth-child(2){animation-delay:.08s}.lu-body .gains li:nth-child(3){animation-delay:.16s}.lu-body .gains li:nth-child(4){animation-delay:.24s}.lu-body .gains li:nth-child(5){animation-delay:.32s}
.lu-act{margin-top:16px}
.hp-act{flex-wrap:wrap}
.hp-act input{flex:1 1 100%;min-width:0}
.hp-act .tbtn,.hp-act button{flex:1 1 0}
@media (min-width:561px){.hp-act input{flex:1 1 90px}.hp-act button{flex:0 0 auto}}
.cs-head .cs-n{min-width:0}
.flist a{min-width:0;overflow-wrap:anywhere}

/* ---------- character: avatar, xp, inventory, spells, wizard ---------- */
.av{position:relative;display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 30% 25%,#6b5320,#2a1f0c 70%);box-shadow:0 0 0 2px #E0B25A,0 0 0 4px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.4)}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av-i{font-family:var(--f-display);font-size:1.4rem;color:#FFE3A0;letter-spacing:.02em}
.av.md{width:60px;height:60px}.av.lg{width:84px;height:84px}.av.lg .av-i{font-size:2rem}
.av.xl{width:132px;height:132px}.av.xl .av-i{font-size:3rem}
.av-pick{position:relative;display:inline-grid;cursor:pointer;flex:none;border-radius:50%}
.av-pick .av-cta{position:absolute;right:-4px;bottom:-2px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--panel);border:1px solid var(--line);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.av-pick .av-cta svg{width:16px;height:16px}
.av-pick:hover .av{box-shadow:0 0 0 2px #FFE3A0,0 0 0 4px rgba(0,0,0,.35),0 0 24px rgba(224,178,90,.5)}
.av-pick.big .av-cta{position:static;width:auto;height:auto;border-radius:999px;padding:5px 12px;gap:6px;display:inline-flex;margin:10px auto 0;font-size:.85rem;font-weight:700}
.av-pick.big{display:flex;flex-direction:column;align-items:center}
.av-pick:focus-within{outline:2px solid var(--sec);outline-offset:4px}
.lvl-medal.sm{position:absolute;left:-6px;top:-6px;width:34px;height:38px}
.lvl-medal.sm b{font-size:1.15rem}
.cs-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.saved{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;font-weight:700;color:#6BC47A}
.saved svg{width:14px;height:14px}
.chc-av{position:relative;flex:none}
.chc-av .ch-medal{position:absolute;right:-8px;bottom:-6px;width:30px;height:34px}
.chc-av .ch-medal b{font-size:1rem}
.chc-xp{font-size:.78rem!important;font-variant-numeric:tabular-nums}
.ch-tools .btn.big,.btn.big{padding:12px 20px;font-size:1rem}
.ch-tools a.btn svg,.btn.big svg{width:18px;height:18px}
.ch-empty{padding:20px}
.ch-how{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;counter-reset:how}
.ch-how li{counter-increment:how;display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:12px;background:var(--panel2);border:1px solid var(--line2)}
.ch-how li::before{content:counter(how);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--sec);color:#1A1408;font-weight:700;margin-bottom:4px}
.ch-how span{color:var(--muted);font-size:.92rem}
.xp3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.xp3>div,.lu-xp>div{display:flex;flex-direction:column;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--panel2);border:1px solid var(--line2);min-width:0}
.xp3 small,.lu-xp small{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.xp3 b,.lu-xp b{font-family:var(--f-display);font-weight:400;font-size:1.7rem;line-height:1.15;font-variant-numeric:tabular-nums}
.xp3 span,.lu-xp span{font-size:.78rem;color:var(--muted)}
.xp3 .xp-left,.lu-xp>div:nth-child(3){border-color:color-mix(in srgb,#E0B25A 55%,transparent);background:color-mix(in srgb,#E0B25A 9%,var(--panel2))}
.xp3 .xp-left b,.lu-xp>div:nth-child(3) b{color:#E0B25A}
.xp-ends{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums}
.xp-mid{color:var(--ink)}
.lu-xp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:left;margin:0 0 14px}
.lu-xp .xpbar{grid-column:1 / -1}
.lu-xp p{grid-column:1 / -1;margin:0;font-size:.82rem;color:var(--muted)}
@media (max-width:560px){.xp3 b,.lu-xp b{font-size:1.3rem}.xp3>div,.lu-xp>div{padding:8px}.xp-mid{order:3;flex-basis:100%}}
.adder{position:relative;display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.adder .mine{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--muted);cursor:pointer}
.adder .mine input{width:auto;accent-color:var(--sec)}
.sugg{position:absolute;left:0;right:0;top:46px;z-index:20;display:flex;flex-direction:column;padding:4px;border-radius:12px;background:var(--panel);border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.45);max-height:320px;overflow:auto}
.sugg button{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;border:none;border-radius:8px;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.sugg button:hover,.sugg button:focus-visible{background:var(--panel2)}
.sugg button svg{width:18px;height:18px;color:var(--sec)}
.sugg b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sugg small{font-size:.76rem;color:var(--muted);white-space:nowrap}
.sugg .own{border-top:1px solid var(--line2);border-radius:0 0 8px 8px}
.sugg .dot,.splist .dot{width:10px;height:10px;border-radius:50%;background:var(--c,var(--muted));justify-self:center}
.inv,.splist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.inv li,.splist li{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line2)}
.inv-eq{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--line2);background:var(--panel2);color:var(--muted);cursor:pointer}
.inv-eq svg{width:18px;height:18px}
.inv-eq[aria-pressed="true"]{color:#1A1408;background:var(--sec);border-color:var(--sec)}
.inv-n,.spn{flex:1;min-width:0;display:flex;flex-direction:column}
.inv-n small,.spn small{font-size:.74rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-at{flex:none;border:none;background:none;color:#B48AE6;font-size:1.1rem;cursor:pointer;padding:4px}
.qty{flex:none;display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:999px;overflow:hidden}
.qty button{border:none;background:var(--panel2);color:var(--ink);width:28px;height:28px;font:inherit;font-weight:700;cursor:pointer}
.qty b{min-width:24px;text-align:center;font-variant-numeric:tabular-nums;font-size:.9rem}
.inv-del{flex:none;display:grid;place-items:center;width:28px;height:28px;border:none;background:none;color:var(--muted);cursor:pointer;border-radius:8px}
.inv-del:hover{color:var(--danger);background:var(--panel2)}
.inv-del svg{width:15px;height:15px}
.cs-spells h3{margin:12px 0 2px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.prep{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid #B89CFF;background:none;cursor:pointer;padding:0}
.prep[aria-pressed="true"]{background:#B89CFF;box-shadow:0 0 0 3px rgba(184,156,255,.25)}
.cs-col h2 .hint2{margin-left:auto}
/* wizard */
.wz{display:flex;flex-direction:column;gap:14px}
.wz-steps{list-style:none;margin:0;padding:0;display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.wz-steps li{flex:1 0 auto}
.wz-steps button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border-radius:999px;border:1px solid var(--line2);background:var(--panel2);color:var(--muted);font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;white-space:nowrap}
.wz-steps button:disabled{cursor:default;opacity:.55}
.wz-steps span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--line);color:var(--ink);font-size:.76rem}
.wz-steps .done button{color:var(--ink)}
.wz-steps .done span{background:#6BC47A;color:#0b1a0e}
.wz-steps .cur button{border-color:var(--sec);color:var(--ink);box-shadow:0 0 0 1px var(--sec)}
.wz-steps .cur span{background:var(--sec);color:#1A1408}
.wz-body{padding:20px;display:flex;flex-direction:column;gap:14px}
.wz-hero{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.wz-name{flex:1 1 280px;display:flex;flex-direction:column;gap:10px}
.wz-name input{font-family:var(--f-display);font-size:1.5rem}
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.pick{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:14px;border-radius:12px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink);font:inherit;cursor:pointer;transition:border-color .15s,transform .15s}
.pick:hover{transform:translateY(-1px);border-color:var(--line)}
.pick span{display:flex;flex-direction:column;gap:3px;min-width:0}
.pick b{font-family:var(--f-display);font-weight:400;font-size:1.25rem;line-height:1.15}
.pick small{color:var(--muted);font-size:.84rem;line-height:1.35}
.pick em{font-style:normal;font-size:.76rem;font-weight:700;color:var(--sec)}
.pick.on{border-color:var(--sec);box-shadow:0 0 0 1px var(--sec),0 0 24px -8px var(--sec);background:color-mix(in srgb,var(--sec) 9%,var(--panel2))}
.wz-q{max-width:420px}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--panel2);border:1px solid var(--line2);flex-wrap:wrap}
.seg button{border:none;background:none;color:var(--muted);font:inherit;font-size:.88rem;font-weight:700;padding:7px 14px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--sec);color:#1A1408}
.btn.sm{padding:6px 12px;font-size:.85rem;margin-left:6px}
.btn.sm svg{width:16px;height:16px}
.wz-rolls{display:flex;gap:6px;flex-wrap:wrap}
.wz-rolls span{display:grid;place-items:center;min-width:40px;height:40px;border-radius:10px;background:var(--panel2);border:1px solid var(--sec);font-family:var(--f-display);font-size:1.3rem}
.wz-abs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.wz-ab{display:grid;grid-template-columns:minmax(0,1fr) 92px 48px 40px;gap:8px;align-items:center;padding:8px 12px;border-radius:12px;background:var(--panel2);border:1px solid var(--line2)}
.wz-ab.key{border-color:color-mix(in srgb,var(--sec) 55%,transparent)}
.wz-ab .k{font-weight:700;display:flex;flex-direction:column}
.wz-ab .k i{font-style:normal;font-size:.68rem;color:var(--sec);text-transform:uppercase;letter-spacing:.08em}
.wz-ab select,.wz-ab input{padding:6px 8px}
.wz-ab .fin{font-family:var(--f-display);font-size:1.4rem;text-align:center}
.wz-ab .fin sup{font-family:var(--f-ui);font-size:.66rem;color:#6BC47A;margin-left:1px}
.wz-ab .mod{color:var(--muted);font-weight:700;text-align:right}
.wz-bgb{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:12px;border:1px dashed var(--sec)}
.wz-b21{display:flex;gap:10px;flex-wrap:wrap}
.wz-b21 label{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem}
.wz-b21 select{width:auto}
.wz-sk{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px}
.skp{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink);font:inherit;font-size:.92rem;cursor:pointer;text-align:left}
.skp small{font-size:.7rem;color:var(--muted)}
.skp:disabled{cursor:default;opacity:.45}
.skp.on{opacity:1;border-color:var(--sec);background:color-mix(in srgb,var(--sec) 14%,var(--panel2))}
.skp.bg.on{border-style:dashed}
.wz-sum{padding:18px;display:flex;flex-direction:column;gap:14px;background:var(--panel2)}
.wz-sum-h{display:flex;gap:16px;align-items:center}
.wz-sum-h h2{font-family:var(--f-display);font-weight:400;font-size:2rem;margin:0}
.wz-sum-h p{margin:2px 0 0;color:var(--muted)}
.wz-sum-ab{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.wz-sum-ab div{display:flex;flex-direction:column;align-items:center;padding:8px 4px;border-radius:10px;background:var(--panel);border:1px solid var(--line2)}
.wz-sum-ab small{font-size:.68rem;font-weight:700;text-transform:uppercase;color:var(--muted)}
.wz-sum-ab b{font-family:var(--f-display);font-weight:400;font-size:1.5rem}
.wz-sum-ab span{font-size:.8rem;color:var(--sec);font-weight:700}
.wz-sum-st{display:flex;gap:8px 18px;flex-wrap:wrap;color:var(--muted)}
.wz-sum-st b{color:var(--ink)}
.wz-nav{display:flex;align-items:center;gap:12px;position:sticky;bottom:0;z-index:5;padding:12px 0;background:linear-gradient(transparent,var(--bg) 30%)}
.wz-nav .btn svg{width:18px;height:18px}
.wz-err{flex:1;text-align:right;font-size:.86rem;color:var(--muted)}
@media (max-width:999px){.wz-nav{bottom:calc(58px + env(safe-area-inset-bottom,0px))}}
@media (max-width:560px){.wz-sum-ab{grid-template-columns:repeat(3,minmax(0,1fr))}.wz-ab{grid-template-columns:minmax(0,1fr) 84px 40px 34px;padding:8px}.wz-hero{justify-content:center}.wz-steps button{padding:6px 10px;font-size:.8rem}.wz-err{font-size:.78rem}.picks{grid-template-columns:minmax(0,1fr)}.cs-id{flex-wrap:wrap}.cs-acts{width:100%;justify-content:space-between}}

/* ---------- dice table ---------- */
.dtable{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;cursor:pointer;
  background:radial-gradient(70% 60% at 50% 45%,rgba(14,11,16,.95),rgba(3,2,5,.97));opacity:0;transition:opacity .22s ease;-webkit-tap-highlight-color:transparent}
.dtable.in{opacity:1}.dtable.out{opacity:0}
.dt-tray{--inl:#E0B25A;position:relative;padding:14px;border-radius:26px;
  background:radial-gradient(circle at 50% 0,rgba(255,230,180,.18),transparent 60%),repeating-linear-gradient(92deg,rgba(0,0,0,.14) 0 2px,transparent 2px 7px,rgba(255,255,255,.04) 7px 8px,transparent 8px 13px),linear-gradient(135deg,#6a4426,#2b1a0e 48%,#563621);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,235,200,.25),inset 0 -2px 6px rgba(0,0,0,.5),0 36px 90px rgba(0,0,0,.7),0 0 70px -20px var(--inl);
  transform:translateY(24px) scale(.96) rotateX(8deg);transition:transform .45s cubic-bezier(.2,1.2,.4,1)}
.dtable.in .dt-tray{transform:none}
.dt-tray canvas{display:block;border-radius:14px}
.dt-tray::after{content:"";position:absolute;inset:14px;border-radius:14px;pointer-events:none;box-shadow:0 0 0 2px var(--inl),0 0 0 4px rgba(0,0,0,.45),inset 0 10px 26px rgba(0,0,0,.45)}
.dt-tray::before{content:"";position:absolute;inset:3px;border-radius:23px;pointer-events:none;
  background:radial-gradient(circle at 8px 8px,var(--inl) 0 3px,transparent 3.6px),radial-gradient(circle at calc(100% - 8px) 8px,var(--inl) 0 3px,transparent 3.6px),
    radial-gradient(circle at 8px calc(100% - 8px),var(--inl) 0 3px,transparent 3.6px),radial-gradient(circle at calc(100% - 8px) calc(100% - 8px),var(--inl) 0 3px,transparent 3.6px),
    radial-gradient(circle at 50% 7px,var(--inl) 0 2.2px,transparent 2.8px),radial-gradient(circle at 50% calc(100% - 7px),var(--inl) 0 2.2px,transparent 2.8px)}
.skin-dragon .dt-tray{--inl:#d2402f;background:radial-gradient(circle at 50% 0,rgba(255,170,140,.14),transparent 60%),radial-gradient(circle,#7a7a84 0 1.6px,transparent 2.2px) 0 0/34px 34px,linear-gradient(135deg,#43434b,#121216 50%,#2e2e35)}
.skin-ivory .dt-tray{--inl:#cfa860;background:radial-gradient(circle at 50% 0,rgba(255,240,200,.22),transparent 60%),repeating-linear-gradient(88deg,rgba(0,0,0,.12) 0 1px,transparent 1px 5px,rgba(255,255,255,.05) 5px 6px,transparent 6px 11px),linear-gradient(135deg,#9a6638,#5a3518 50%,#86552c)}
.skin-star .dt-tray{--inl:#9be3ff;background:radial-gradient(circle at 50% 0,rgba(255,255,255,.4),transparent 60%),repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 2px,transparent 2px 6px),linear-gradient(135deg,#d4dcef,#56637f 50%,#a7b3cc)}
.dt-tray.shake{animation:dt-shake .5s ease}
@keyframes dt-shake{20%{transform:translateX(-9px) rotate(-.6deg)}40%{transform:translateX(8px) rotate(.5deg)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.dt-res{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:104px;padding:8px 26px 12px;border-radius:18px;background:radial-gradient(closest-side,rgba(6,5,8,.98),rgba(6,5,8,.9));color:#F3EEE2;text-align:center;opacity:0;transform:translateY(12px) scale(.9);transition:opacity .3s,transform .5s cubic-bezier(.2,1.5,.4,1)}
.dt-res.show{opacity:1;transform:none}
.dt-l{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#E0B25A;max-width:90vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-res b{font-family:var(--f-display);font-weight:400;font-size:4.2rem;line-height:1;font-variant-numeric:tabular-nums;background:linear-gradient(#fff6dc,#e8c27a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(224,178,90,.45))}
.dt-e{font-size:.9rem;color:rgba(243,238,226,.72);max-width:90vw}
.dt-x{margin-top:6px;padding:4px 14px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;animation:dt-pulse 1.2s ease-in-out infinite}
@keyframes dt-pulse{50%{transform:scale(1.06)}}
.dt-res.crit b{background:linear-gradient(#fffbe8,#ffcf5a);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 28px rgba(255,200,90,.95))}
.dt-res.crit .dt-x{background:linear-gradient(#ffe39a,#d9a640);color:#1A1408;box-shadow:0 0 24px rgba(255,200,90,.6)}
.dt-res.fumble b{background:linear-gradient(#ffd0c8,#ff5a46);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 20px rgba(255,70,50,.7))}
.dt-res.fumble .dt-x{background:#8e1b1b;color:#fff}
.dt-hint{margin:0;font-size:.75rem;color:rgba(243,238,226,.45)}
@media (max-width:560px){.dt-tray{padding:10px;border-radius:20px}.dt-tray::after{inset:10px}.dt-res b{font-size:3.4rem}}

.dp-skins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.dskin{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 4px;border-radius:12px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink);cursor:pointer;text-align:left;min-width:0;transition:border-color .15s,transform .15s}
.dskin:hover{transform:translateY(-1px);border-color:var(--line)}
.dskin canvas{flex:none;width:52px;height:52px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));transition:transform .4s cubic-bezier(.2,1.4,.4,1)}
.dskin:hover canvas{transform:rotate(-12deg) scale(1.06)}
.dskin span{display:flex;flex-direction:column;min-width:0}
.dskin b{font-size:.8rem;line-height:1.15}
.dskin small{font-size:.68rem;line-height:1.2;color:var(--muted)}
.dskin[aria-pressed="true"]{border-color:var(--sec);box-shadow:0 0 0 1px var(--sec),0 0 18px -6px var(--sec)}
.dp-opts{display:flex;gap:14px;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}
.dp-opts label{display:flex;align-items:center;gap:6px;cursor:pointer}
.dp-opts input{width:auto;accent-color:var(--sec)}

/* dice pool */
.dp-dies{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px}
.die-btn{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 6px!important}
.die-btn .dic{width:26px;height:26px;fill:color-mix(in srgb,var(--sec) 16%,transparent);stroke:var(--sec);stroke-width:1.3;stroke-linejoin:round}
.die-btn .dic .in{fill:color-mix(in srgb,var(--sec) 30%,transparent);stroke-width:1}
.die-btn span{font-size:.8rem;font-weight:700}
.die-btn i{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;border-radius:999px;background:var(--sec);color:#1A1408;font-style:normal;font-size:.74rem;font-weight:700;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.die-btn.on{border-color:var(--sec)!important;box-shadow:0 0 0 1px var(--sec)}
.dp-pool{display:flex;align-items:center;gap:8px;padding:8px;border-radius:12px;border:1px dashed var(--line);min-height:44px;box-sizing:border-box}
.dp-pool.has{border-style:solid;border-color:color-mix(in srgb,var(--sec) 50%,var(--line))}
.dp-pool-l{flex:1;display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.dp-hint{font-size:.78rem;color:var(--muted);line-height:1.3}
.pchip{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink);font:inherit;font-size:.85rem;font-weight:700;cursor:pointer}
.pchip b{color:var(--muted);font-weight:400}
.pchip:hover b{color:var(--danger)}
.dp-mod{flex:none;display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:999px;overflow:hidden}
.dp-mod button{border:none;background:var(--panel2);color:var(--ink);width:28px;height:30px;font:inherit;font-weight:700;cursor:pointer}
.dp-mod b{min-width:34px;text-align:center;font-variant-numeric:tabular-nums;font-size:.88rem}
.dp-go{display:flex;gap:6px}
.dp-roll{flex:1;justify-content:center;padding:11px 14px!important;font-size:1rem}
.dp-roll svg{width:18px;height:18px}
.dp-roll:disabled{opacity:.5}
.die-cell{position:relative;display:flex}
.die-cell .die-btn{flex:1}
.die-n{position:absolute;top:-7px;right:-6px;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;border-radius:999px;background:var(--sec);color:#1A1408;font-style:normal;font-size:.78rem;font-weight:700;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.4);pointer-events:none}
.die-minus{position:absolute;top:-7px;left:-6px;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-weight:700;font-size:1rem;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.die-minus:hover{color:var(--danger);border-color:var(--danger)}
.pchip{padding:6px 10px}
.pchip b{font-size:1rem}
.dp-roll{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-dies{gap:12px 12px!important;padding:4px 4px 0}
.chwrap{position:relative;display:flex}
.chwrap .chcard{flex:1;padding-right:52px}
.ch-x{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--line2);background:var(--panel2);color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s}
.ch-x svg{width:18px;height:18px}
.ch-x:hover,.ch-x:focus-visible{color:var(--danger);border-color:var(--danger)}
.ch-ask{border-color:var(--danger)!important;align-items:flex-start}
.ch-ask h2{white-space:normal!important}
.ch-ask-b{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.btn svg{width:17px;height:17px}
.btn.icon-only{padding:8px 10px}
.btn.icon-only:hover{color:var(--danger);border-color:var(--danger)}
#ch-del-slot:empty{display:none}

/* ---------- campaigns ---------- */
[data-sec="camps"]{--sec:#E0B25A}
.spin{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid color-mix(in srgb,var(--sec) 30%,transparent);border-top-color:var(--sec);animation:spin 0.9s linear infinite}
.cp-note{display:flex;gap:14px;align-items:flex-start;padding:18px 20px}
.cp-note>svg{width:28px;height:28px;color:var(--sec);flex:none}
.cp-note p{margin:4px 0 0;color:var(--muted)}
.cp-load{align-items:center}
.cp-ro{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin-bottom:14px;border-radius:12px;border:1px dashed var(--sec);font-size:.9rem;color:var(--muted)}
.cp-ro svg{flex:none;color:var(--sec)}
.cp-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-bottom:22px}
.cp-act{display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 14px;padding:18px;align-items:start}
.cp-act>div{min-width:0}
.cp-act p{margin:3px 0 0;color:var(--muted);font-size:.92rem}
.cp-act>.btn,.cp-act>.cp-join{grid-column:1 / -1;margin-top:10px}
.cp-act-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px}
.cp-act-ic svg{width:24px;height:24px}
.cp-act-ic.dm{background:color-mix(in srgb,#E0B25A 18%,transparent);color:#E0B25A}
.cp-act-ic.pl{background:color-mix(in srgb,#6E9EE8 18%,transparent);color:#6E9EE8}
.cp-join{display:flex;gap:8px}
.cp-join input{flex:1;min-width:0;font-family:var(--f-display);font-size:1.25rem;letter-spacing:.18em;text-transform:uppercase}
.cp-h{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px}
.cpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.cpcard{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px 18px 16px;text-decoration:none;overflow:hidden;transition:transform .15s,border-color .15s}
.cpcard:hover{transform:translateY(-2px);border-color:var(--cc)}
.cp-band{position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--cc),transparent)}
.cpcard::after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--cc) 22%,transparent),transparent);pointer-events:none}
.cp-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cp-role{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.cp-role.dm{background:color-mix(in srgb,#E0B25A 20%,transparent);color:#E0B25A}
.cp-role.pl{background:color-mix(in srgb,#6E9EE8 20%,transparent);color:#8FB6F0}
.cp-live{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:#6BC47A}
.cp-live i,.cp-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#6BC47A;box-shadow:0 0 0 0 rgba(107,196,122,.6);animation:cp-pulse 1.6s infinite}
@keyframes cp-pulse{70%{box-shadow:0 0 0 8px rgba(107,196,122,0)}100%{box-shadow:0 0 0 0 rgba(107,196,122,0)}}
.cpcard h2{font-family:var(--f-display);font-weight:400;font-size:1.6rem;line-height:1.15;margin:0}
.cp-desc{margin:0;color:var(--muted);font-size:.92rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cp-meta{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:center;font-size:.85rem;color:var(--muted)}
.cp-meta>span{display:inline-flex;align-items:center;gap:6px}
.cp-meta svg{width:16px;height:16px}
.cp-mem{gap:0!important}
.cp-mem .pav{margin-right:-6px;box-shadow:0 0 0 2px var(--panel)}
.cp-mem em{font-style:normal;margin-left:12px}
.cp-next{display:flex;align-items:center;gap:6px;margin:auto 0 0;padding-top:6px;font-size:.88rem;color:var(--ink)}
.cp-next svg{width:16px;height:16px;color:var(--cc)}
.pav{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;overflow:hidden;background:var(--panel2);border:1px solid var(--line);vertical-align:middle}
.pav img{width:100%;height:100%;object-fit:cover}
.pav i{font-style:normal;font-size:.7rem;font-weight:700;color:var(--ink)}
.pav.xs{width:22px;height:22px}.pav.xs i{font-size:.6rem}
.pav.sm{width:36px;height:36px}.pav.md{width:56px;height:56px}
.av.sm{width:40px;height:40px}.av.sm .av-i{font-size:.95rem}
.cp-pend{display:flex;flex-direction:column;gap:8px}
.cp-pitem{display:flex;gap:12px;align-items:center;padding:12px 16px}
.cp-pitem div{flex:1;min-width:0}
.cp-pitem p{margin:2px 0 0;color:var(--muted);font-size:.86rem}
.cp-empty{padding:20px;margin-top:6px}
.cp-empty h3{margin:0 0 12px;font-family:var(--f-display);font-weight:400;font-size:1.4rem}
.cp{display:flex;flex-direction:column;gap:14px}
.cp-head{position:relative;overflow:hidden;padding:24px}
.cp-head::after{content:"";position:absolute;right:-60px;top:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--cc) 20%,transparent),transparent);pointer-events:none}
.cp-head-in{position:relative;z-index:1;display:flex;gap:18px 24px;flex-wrap:wrap;align-items:flex-end;justify-content:space-between}
.cp-head-t{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.cp-head h1{font-family:var(--f-display);font-weight:400;font-size:2.4rem;line-height:1.05;margin:0;text-wrap:balance}
.cp-head-t>p{margin:0;color:var(--muted);max-width:70ch}
.cp-head-a{display:flex;gap:8px;flex-wrap:wrap}
.cp-go{gap:10px}
.cp-tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}
.cp-tabs button{display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:700;font-size:.95rem;color:var(--muted);background:none;border:none;padding:10px 14px;cursor:pointer;white-space:nowrap;box-shadow:inset 0 -3px 0 transparent}
.cp-tabs button[aria-selected="true"]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--sec)}
.cp-tabs span,.chip span{font-size:.72rem;padding:0 7px;border-radius:999px;background:var(--panel2);border:1px solid var(--line2);color:var(--muted)}
.cp-body{display:flex;flex-direction:column;gap:14px}
.cp-box{padding:18px}
.cp-box>h2{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sec)}
.cp-box>h2 svg{width:16px;height:16px}
.cp-box>p{margin:0 0 12px;color:var(--muted);font-size:.92rem}
.cp-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#D0573C;color:#fff;font-size:.72rem;letter-spacing:0}
.cp-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:16px 18px;border-color:color-mix(in srgb,var(--sec) 50%,var(--line))}
.cp-cta>svg{width:28px;height:28px;color:var(--sec);flex:none}
.cp-cta>div{flex:1 1 260px}
.cp-cta p{margin:2px 0 0;color:var(--muted);font-size:.9rem}
.cp-cta code{font-size:1rem;letter-spacing:.12em;color:var(--sec)}
.cp-over{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;align-items:start}
.cp-empty-s{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px;border-radius:12px;border:1px dashed var(--line);color:var(--muted);font-size:.92rem}
.cp-empty-s p{margin:0}
.cp-tbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cp-logs{display:flex;flex-direction:column;gap:12px}
.cp-logs>.card{padding:18px 20px}
.cp-log{display:flex;flex-direction:column;gap:6px;min-width:0}
.cp-log-h{display:flex;gap:6px 12px;align-items:center;flex-wrap:wrap;font-size:.84rem;color:var(--muted)}
.cp-sn{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.74rem;color:var(--sec)}
.cp-xp{font-weight:700;color:#6BC47A}
.cp-tools{margin-left:auto;display:inline-flex;gap:2px}
.cp-tools .iconbtn{width:32px;height:32px}
.cp-tools .iconbtn svg{width:16px;height:16px}
.cp-log h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:1.45rem;line-height:1.2}
.cp-x{overflow-wrap:anywhere}
.cp-x.clip{max-height:9em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.cp-xpdone{display:flex;gap:6px;align-items:center;margin:4px 0 0;font-size:.86rem;color:#6BC47A}
.cp-xpdone svg{width:16px;height:16px}
.cp-log .btn.sm{align-self:flex-start;margin:4px 0 0}
.cp-notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.cp-note-c{display:flex;flex-direction:column;gap:6px;padding:16px;min-width:0;border-top:3px solid var(--kc,var(--sec))}
.cp-note-c.k-npc{--kc:#6E9EE8}.cp-note-c.k-place{--kc:#6BC47A}.cp-note-c.k-quest{--kc:#E0B25A}.cp-note-c.k-rumor{--kc:#B48AE6}.cp-note-c.k-letter{--kc:#D9A066}
.cp-note-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cp-kind{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--kc,var(--sec))}
.cp-kind svg{width:14px;height:14px}
.cp-pin{color:#E0B25A}
.cp-priv{font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,#D0573C 20%,transparent);color:#F08A70}
.cp-note-c h3{margin:0;font-size:1.08rem}
.cp-note-c .prose{font-size:1rem;overflow-wrap:anywhere}
.cp-kinds .chip{gap:6px}
.cp-loot{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cp-loot li{display:flex;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line2)}
.cp-loot li:last-child{border-bottom:none}
.cp-li{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:var(--panel2);color:var(--sec)}
.cp-li svg{width:18px;height:18px}
.cp-ln{flex:1;min-width:0;display:flex;flex-direction:column}
.cp-ln small{color:var(--muted);font-size:.8rem}
.cp-heroes{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.cp-hero{display:flex;flex-direction:column;gap:12px;padding:16px}
.cp-hero.empty{flex-direction:row;align-items:center;opacity:.75}
.cp-hero.empty p{margin:2px 0 0;color:var(--muted);font-size:.88rem}
.cp-hero-h{display:flex;gap:12px;align-items:center}
.cp-hero-h b{font-family:var(--f-display);font-weight:400;font-size:1.35rem}
.cp-hero-h p{margin:0;color:var(--muted);font-size:.86rem}
.cp-hero-h small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.78rem;margin-top:2px}
.cp-hero-st{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.cp-hero-st span{display:flex;flex-direction:column;align-items:center;padding:6px 4px;border-radius:10px;background:var(--panel2);font-size:.66rem;font-weight:700;text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.2}
.cp-hero-st b{font-family:var(--f-display);font-weight:400;font-size:1.3rem;color:var(--ink);text-transform:none}
.cp-hero-ab{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.cp-hero-ab span{display:flex;flex-direction:column;align-items:center;font-weight:700;font-size:.95rem}
.cp-hero-ab small{font-size:.62rem;color:var(--muted);text-transform:uppercase}
.cp-hero-ab em{font-style:normal;font-size:.74rem;color:var(--sec)}
.cp-hero-a{display:flex;gap:6px;flex-wrap:wrap}
.cp-hero-at{margin:0;font-size:.74rem;color:var(--muted)}
.cp-on{display:inline-block;width:8px;height:8px;border-radius:50%;background:#6BC47A}
.cp-pm,.cp-people{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cp-pm li,.cp-people li{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line2)}
.cp-pm li:last-child,.cp-people li:last-child{border-bottom:none}
.cp-pm span,.cp-people span{flex:1;min-width:0;display:flex;flex-direction:column}
.cp-pm small,.cp-people small{color:var(--muted);font-size:.8rem}
.cp-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;align-items:start}
.cp-codebox{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.cp-codebox code{font-family:var(--f-display);font-size:2rem;letter-spacing:.24em;padding:6px 16px;border-radius:12px;background:var(--panel2);border:1px dashed var(--sec);color:var(--sec)}
.cp-pres{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.cp-hit{display:flex;gap:10px;align-items:center;padding:6px 8px;border-radius:10px;background:var(--panel2)}
.cp-hit span:nth-child(2){flex:1;display:flex;flex-direction:column}
.cp-hit small{color:var(--muted);font-size:.75rem}
.cp-hit em{font-style:normal;color:var(--muted);font-size:.8rem}
.cp-denied{margin:10px 0 0;font-size:.84rem;color:var(--muted)}
.btn.danger-t{margin-right:auto;color:var(--danger)}
/* modal */
.md-wrap{position:fixed;inset:0;z-index:65;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:16px}
.md{width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;box-sizing:border-box;padding:20px;display:flex;flex-direction:column;gap:12px;animation:lu-in .3s cubic-bezier(.2,1.2,.4,1)}
.md-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.md-h h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:1.6rem}
.md-b{display:flex;flex-direction:column;gap:12px}
.md-b p{margin:0}
.md-f{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.md .sugg{top:auto;position:relative;margin-top:4px}
.cp-cols{display:flex;gap:8px}
.cp-col input{position:absolute;opacity:0}
.cp-col span{display:block;width:30px;height:30px;border-radius:50%;cursor:pointer;box-shadow:0 0 0 2px var(--panel),0 0 0 3px transparent}
.cp-col input:checked+span{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--ink)}
.cp-col input:focus-visible+span{outline:2px solid var(--sec);outline-offset:4px}
.cp-pick{display:flex;flex-direction:column;gap:6px}
.cp-pick .pick{align-items:center}
.cp-pick .pick input{accent-color:var(--sec)}
.cp-pick .pick:has(input:checked){border-color:var(--sec);box-shadow:0 0 0 1px var(--sec)}
/* live session */
.pl{display:flex;flex-direction:column;gap:14px}
.pl-top{display:flex;gap:12px 18px;align-items:center;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line)}
.pl-tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.pl-tt h1{margin:0;font-family:var(--f-display);font-weight:400;font-size:2rem;line-height:1.1}
.pl-tt p{margin:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--muted);font-size:.9rem}
.pl-wait{display:flex;flex-direction:column;align-items:center;gap:12px;padding:44px 24px;text-align:center}
.pl-wait h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:2rem}
.pl-wait p{margin:0;max-width:52ch;color:var(--muted)}
.pl-wait .spin{width:36px;height:36px;border-width:3px}
.pl-prompt{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:16px 18px;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,#E0B25A 22%,var(--panel)),var(--panel));border:1px solid #E0B25A;box-shadow:0 0 40px -12px #E0B25A;animation:lu-in .4s cubic-bezier(.2,1.3,.4,1)}
.pl-prompt div{flex:1 1 240px}
.pl-prompt b{font-family:var(--f-display);font-weight:400;font-size:1.5rem}
.pl-prompt p{margin:2px 0 0;color:var(--muted)}
.pl-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;align-items:start}
.pl-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.pl-box{padding:18px}
.pl-box>h2{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sec)}
.pl-box>h2 svg{width:16px;height:16px}
.pl-round{margin-left:auto;font-size:.72rem;padding:3px 10px;border-radius:999px;background:var(--panel2);color:var(--ink);letter-spacing:.06em}
.pl-order{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pl-order li{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:var(--panel2);border:1px solid var(--line2);transition:border-color .2s,box-shadow .2s}
.pl-order li.cur{border-color:var(--sec);box-shadow:0 0 0 1px var(--sec),0 0 22px -8px var(--sec)}
.pl-order li.hid{opacity:.55;border-style:dashed}
.pl-order li.down{opacity:.45}
.pl-ini{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--panel);font-family:var(--f-display);font-size:1.3rem}
.pl-mi{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,#D0573C 22%,transparent);color:#F08A70;flex:none}
.pl-mi svg{width:18px;height:18px}
.pl-n{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pl-n b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-n small{color:var(--muted);font-size:.78rem}
.pl-n .hpbar{height:5px}
.hpw{font-weight:700}.hpw.ok{color:#6BC47A}.hpw.mid{color:#E0B25A}.hpw.low{color:#F08A70}.hpw.down{color:var(--muted)}
.pl-turn{flex:none;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--sec);color:#1A1408}
.pl-mact{flex:none;display:flex;gap:4px;align-items:center}
.pl-mact .tbtn{min-width:30px;padding:4px 8px}
.pl-mact .iconbtn{width:30px;height:30px}
.pl-mact .iconbtn svg{width:15px;height:15px}
.pl-waitlist{margin:10px 0 0;font-size:.84rem;color:var(--muted)}
.pl-dm{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line2)}
.pl-dm .btn svg{width:17px;height:17px}
.parch{position:relative;padding:22px 22px 20px;border-radius:6px;color:#2a1d10;font-family:var(--f-read);
  background:radial-gradient(120% 80% at 20% 10%,#fbf1d6,#ecd9ab 60%,#d9bf86);box-shadow:inset 0 0 30px rgba(120,80,30,.35),0 10px 30px rgba(0,0,0,.4);animation:parch-in .6s cubic-bezier(.2,1.2,.4,1)}
@keyframes parch-in{from{transform:rotate(-2deg) translateY(14px);opacity:0}to{transform:none;opacity:1}}
.parch img{display:block;max-width:100%;border-radius:4px;margin:0 auto 12px;box-shadow:0 4px 14px rgba(60,30,0,.35)}
.parch h3{margin:0 0 8px;font-family:var(--f-display);font-weight:400;font-size:1.55rem;color:#3a250f}
.parch .prose{color:#2a1d10;font-size:1.08rem}
.pl-quick{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.pl-quick .check{font-size:.84rem;color:var(--muted)}
.pl-rolls{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;max-height:420px;overflow:auto}
.pl-rolls li{display:grid;grid-template-columns:minmax(0,7em) minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line2);animation:view-in .3s ease}
.pl-rolls li.me .pl-rw{color:var(--sec)}
.pl-rw{font-weight:700;font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-rl{display:flex;flex-direction:column;min-width:0;font-size:.9rem}
.pl-rl small{color:var(--muted);font-size:.76rem}
.pl-rolls b{font-family:var(--f-display);font-weight:400;font-size:1.5rem}
.pl-rolls li.crit b{color:#FFD77A}.pl-rolls li.fumble b{color:#F08A70}
@media (max-width:900px){.pl-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.cp-head{padding:18px}.cp-head h1{font-size:1.9rem}.cp-head-a{width:100%}.cp-head-a .btn{flex:1;justify-content:center}.cp-codebox code{font-size:1.6rem}.pl-tt h1{font-size:1.6rem}.pl-rolls li{grid-template-columns:minmax(0,5em) minmax(0,1fr) auto}.cp-hero-st span{font-size:.58rem}}
.cp-pm .av,.cp-pm .pav,.cp-people .pav,.cp-hit .pav{flex:none!important;display:inline-grid!important}
.cp-pm li>.av,.cp-pm li>.pav{width:40px;height:40px}
.cp-join input::placeholder{letter-spacing:0;text-transform:none;font-family:var(--f-ui);font-size:.95rem}
@media (max-width:900px){.pl-grid{display:flex;flex-direction:column}.pl-col{display:contents}.pl-init{order:1}.pl-handout{order:2}.pl-feed{order:3}.pl-party{order:4}}

/* ---------- rules assistant ---------- */
[data-sec="ask"]{--sec:var(--c-rules)}
.ak{display:flex;flex-direction:column;gap:12px;max-width:880px}
.ak-log{display:flex;flex-direction:column;gap:14px;padding:18px;min-height:240px;max-height:calc(100vh - 400px);overflow:auto;scroll-behavior:smooth}
.ak-msg{display:flex;gap:10px;align-items:flex-start;max-width:100%}
.ak-msg.me{justify-content:flex-end}
.ak-msg.me .ak-b{background:color-mix(in srgb,var(--sec) 16%,var(--panel2));border:1px solid color-mix(in srgb,var(--sec) 40%,transparent);border-radius:16px 16px 4px 16px;padding:10px 14px;max-width:80%;white-space:pre-wrap;overflow-wrap:anywhere}
.ak-msg.bot .ak-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.ak-msg.bot .prose{font-size:1.04rem;overflow-wrap:anywhere}
.ak-msg.bot .prose p{margin:0 0 .6em}
.ak-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--sec) 18%,transparent);color:var(--sec)}
.ak-ic svg{width:18px;height:18px}
.ak-ref{color:var(--sec);text-decoration:none;border-bottom:1px dotted var(--sec);font-size:.88em;white-space:nowrap}
.ak-ref::before{content:"↗ ";font-size:.8em}
.ak-src{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ak-src span{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ak-src .chip{font-size:.8rem;padding:4px 10px}
.ak-think{display:flex;gap:10px;align-items:center;color:var(--muted)}
.ak-empty p{margin:0 0 10px;color:var(--muted)}
.ak-empty .chip{white-space:normal;text-align:left}
.ak-err{margin:0;color:var(--danger);font-size:.9rem}
.ak-form{display:flex;gap:8px;align-items:flex-end}
.ak-form textarea{flex:1;min-width:0;resize:none;font-family:var(--f-ui);font-size:1rem}
.ak-form .btn{flex:none;padding:12px 16px}
.ak-form .btn svg{width:18px;height:18px}
.ak-foot{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
@media (max-width:999px){.ak-log{max-height:calc(100vh - 360px)}}
@media (max-width:560px){.ak-msg.me .ak-b{max-width:92%}.ak-log{padding:12px}.ak-form .btn{padding:12px}}
.ak-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:14px;background:var(--panel2);border:1px solid var(--line2);border-left:3px solid var(--sec)}
.ak-card.k-spell{border-left-color:var(--c-spells)}.ak-card.k-mon{border-left-color:var(--c-bestiary)}.ak-card.k-mi{border-left-color:var(--c-magic)}.ak-card.k-rule{border-left-color:var(--c-rules)}
.ak-card-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.ak-kind{flex-basis:100%;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ak-t{font-family:var(--f-display);font-size:1.4rem;color:var(--ink);text-decoration:none}
.ak-t:hover{color:var(--sec)}
.ak-card-h small{color:var(--muted)}
.ak-lead{margin:0;font-size:1.02rem}
.ak-lead b{color:var(--sec);font-size:1.1em}
.ak-q{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:6px;font-family:var(--f-read);font-size:1.02rem;line-height:1.5}
.ak-q mark{background:color-mix(in srgb,var(--sec) 28%,transparent);color:inherit;border-radius:3px;padding:0 2px}
.ak-meta{margin:0;font-size:.88rem;color:var(--muted)}
.ak-more{align-self:flex-start;font-size:.86rem;font-weight:700;color:var(--sec);text-decoration:none}
.ak-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ak-stats span{display:flex;flex-direction:column;align-items:center;padding:6px;border-radius:10px;background:var(--panel);font-size:.68rem;font-weight:700;text-transform:uppercase;color:var(--muted);text-align:center}
.ak-stats b{font-family:var(--f-display);font-weight:400;font-size:1.3rem;color:var(--ink);text-transform:none}
.ak-stats small{font-size:.66rem;font-weight:500;text-transform:none}
.ak-list{display:flex;flex-wrap:wrap;gap:6px}
.ak-list small{color:var(--muted);font-size:.7rem;margin-left:4px}
.ak-tbl{border-collapse:collapse;width:100%;max-width:520px}
.ak-tbl td{padding:6px 10px;border-bottom:1px solid var(--line2)}
.ak-msg.bot .ak-b{gap:10px}
.ak-log{position:relative}
.ak-ai{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:14px 18px;margin-bottom:18px;text-decoration:none;border-color:color-mix(in srgb,#8FB6F0 55%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,#6E9EE8 14%,var(--panel)),var(--panel))}
.ak-ai>span:nth-child(2){flex:1 1 260px;display:flex;flex-direction:column}
.ak-ai small{color:var(--muted);font-size:.86rem}
.ak-ai-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,#6E9EE8 22%,transparent);color:#8FB6F0}
.ak-ai-ic svg{width:22px;height:22px}
.ak-deeper{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:.86rem;font-weight:700;color:#8FB6F0;text-decoration:none}
.ak-deeper svg{width:15px;height:15px}
.ak-own{padding:12px 16px}
.ak-own summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:700;list-style:none}
.ak-own summary svg{width:16px;height:16px;color:var(--sec)}
.ak-own-f{display:flex;gap:8px;flex-wrap:wrap}
.ak-own-f input{flex:1 1 260px}
.cp-pagehead{display:flex;gap:12px 20px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:6px}
.cp-pagehead .ph{margin-bottom:12px}
.cp-hbtns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.cp-hbtns .btn svg{width:18px;height:18px}
.cp-filter{margin:6px 0 14px}
.cp-filter .chip{gap:6px}
.cpcard.past{opacity:.78;filter:saturate(.6)}
.cpcard.past:hover{opacity:1;filter:none}
.cp-past-tag{font-size:.74rem;font-weight:700;color:var(--muted)}
.cp-forget{align-self:flex-start;margin-top:6px;font-size:.84rem}
.cp-empty{display:flex;flex-direction:column;gap:18px;padding:24px}
.cp-empty-h{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.cp-empty-h h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:1.8rem}
.cp-empty-h p{margin:0 0 8px;color:var(--muted)}
.cp-codein{font-family:var(--f-display);font-size:1.5rem;letter-spacing:.2em;text-transform:uppercase}
.cp-codein::placeholder{letter-spacing:0;text-transform:none;font-family:var(--f-ui);font-size:1rem}
@media (max-width:560px){.cp-pagehead .cp-hbtns{width:100%}.cp-pagehead .cp-hbtns .btn{flex:1;justify-content:center}}

/* ---------- design pass 1: every section has its own world ---------- */
.aura{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0}
.aura i{position:absolute;left:var(--x);top:var(--y);width:calc(6px * var(--s));height:calc(6px * var(--s));border-radius:50%;background:var(--c);opacity:0}
.spell,.statblock,.mitem{isolation:isolate}
.spell>.aura,.statblock>.aura,.mitem>.aura{position:absolute}
/* spells: the card glows in its school's colour, the circle is brighter */
.spell{border-top:3px solid var(--c);background:radial-gradient(420px 260px at 88% -6%,color-mix(in srgb,var(--c) 24%,transparent),transparent 70%),radial-gradient(300px 200px at 0% 110%,color-mix(in srgb,var(--c) 10%,transparent),transparent 70%),var(--panel);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent),0 22px 60px -26px var(--c)}
.spell>.mcircle{opacity:.26;filter:drop-shadow(0 0 6px var(--c))}
.cast>.mcircle{animation:mc-in2 1.8s cubic-bezier(.2,.8,.2,1) both}
@keyframes mc-in2{0%{opacity:0;transform:scale(.6) rotate(-50deg);filter:drop-shadow(0 0 0 var(--c))}55%{opacity:.6;filter:drop-shadow(0 0 18px var(--c))}100%{opacity:.26;transform:none;filter:drop-shadow(0 0 6px var(--c))}}
.spell .sp-title h2{text-shadow:0 0 24px color-mix(in srgb,var(--c) 45%,transparent)}
.spell .sigil{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--c) 70%,transparent))}
/* evocation: embers rising */
.aura.sc-evocation i{top:auto;bottom:-10px;background:radial-gradient(circle,#FFE0A0,#F07A3A 60%,transparent 70%);animation:au-rise var(--d) ease-in var(--t) infinite}
/* necromancy: drifting green mist */
.aura.sc-necromancy i{width:calc(120px * var(--s));height:calc(70px * var(--s));border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,#7FD08A 30%,transparent),transparent);filter:blur(6px);animation:au-mist calc(var(--d) * 2) ease-in-out var(--t) infinite}
/* abjuration: pulsing ward rings */
.aura.sc-abjuration i{width:calc(60px * var(--s));height:calc(60px * var(--s));background:none;border:1.5px solid color-mix(in srgb,var(--c) 70%,transparent);animation:au-ring var(--d) ease-out var(--t) infinite}
.aura.sc-abjuration i:nth-child(n+5){display:none}
/* conjuration: gold motes swirling */
.aura.sc-conjuration i{background:radial-gradient(circle,#FFE9B0,var(--c) 70%);box-shadow:0 0 8px var(--c);animation:au-swirl var(--d) linear var(--t) infinite}
/* divination: twinkling stars */
.aura.sc-divination i,.aura.ty-celestial i,.aura.ty-fey i,.aura.loot i{width:calc(9px * var(--s));height:calc(9px * var(--s));border-radius:0;background:var(--c);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:au-twinkle var(--d) ease-in-out var(--t) infinite}
/* enchantment: soft pink waves */
.aura.sc-enchantment i{width:calc(90px * var(--s));height:calc(90px * var(--s));background:radial-gradient(closest-side,transparent 60%,color-mix(in srgb,var(--c) 35%,transparent) 64%,transparent 70%);animation:au-ring calc(var(--d) * 1.4) ease-out var(--t) infinite}
.aura.sc-enchantment i:nth-child(n+5){display:none}
/* illusion: iridescent shimmer over the whole card */
.sc-illusion{--ill:linear-gradient(115deg,transparent 20%,rgba(160,120,255,.14) 35%,rgba(90,220,255,.12) 50%,rgba(255,120,220,.12) 65%,transparent 80%)}
.aura.sc-illusion::before{content:"";position:absolute;inset:-50%;background:var(--ill);animation:au-sheen 7s linear infinite}
.aura.sc-illusion i{display:none}
/* transmutation: gold and green motes trading places */
.aura.sc-transmutation i{animation:au-swirl var(--d) linear var(--t) infinite}
.aura.sc-transmutation i:nth-child(odd){background:#C8E06A;box-shadow:0 0 6px #C8E06A}
.aura.sc-transmutation i:nth-child(even){background:#F2C35E;box-shadow:0 0 6px #F2C35E}

/* bestiary: a backdrop for each creature type */
.statblock .aura{opacity:.9}
.ty-dragon .aura{background:radial-gradient(circle at 50% 100%,transparent 9px,color-mix(in srgb,var(--c) 12%,transparent) 10px,transparent 11px) 0 0/22px 14px;-webkit-mask:linear-gradient(200deg,#000,transparent 55%);mask:linear-gradient(200deg,#000,transparent 55%)}
.aura.ty-dragon i{top:auto;bottom:-10px;background:radial-gradient(circle,#FFD08A,var(--c) 60%,transparent 70%);animation:au-rise calc(var(--d) * 1.2) ease-in var(--t) infinite}
.aura.ty-dragon i:nth-child(n+5){display:none}
.aura.ty-undead i,.aura.ty-ooze i:nth-child(n+5){width:calc(140px * var(--s));height:calc(80px * var(--s));background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 26%,transparent),transparent);filter:blur(8px);animation:au-mist calc(var(--d) * 2) ease-in-out var(--t) infinite}
.ty-fiend .aura{background:radial-gradient(120% 60% at 50% 115%,color-mix(in srgb,#E2462F 30%,transparent),transparent 70%);animation:au-pulse 4s ease-in-out infinite}
.aura.ty-fiend i{top:auto;bottom:-10px;background:radial-gradient(circle,#FFB070,#D23A22 60%,transparent 70%);animation:au-rise var(--d) ease-in var(--t) infinite}
.ty-celestial .aura{background:repeating-conic-gradient(from 0deg at 50% -20%,color-mix(in srgb,var(--c) 12%,transparent) 0 4deg,transparent 4deg 14deg);-webkit-mask:linear-gradient(#000,transparent 70%);mask:linear-gradient(#000,transparent 70%)}
.ty-beast .aura::before,.ty-monstrosity .aura::before{content:"";position:absolute;right:16px;top:70px;width:110px;height:120px;opacity:.16;
  background:linear-gradient(105deg,transparent 46%,var(--c) 47% 51%,transparent 52%) -30px 0/100% 100% no-repeat,linear-gradient(105deg,transparent 46%,var(--c) 47% 51%,transparent 52%) 0 0/100% 100% no-repeat,linear-gradient(105deg,transparent 46%,var(--c) 47% 51%,transparent 52%) 30px 0/100% 100% no-repeat}
.aura.ty-beast i,.aura.ty-monstrosity i,.aura.ty-humanoid i,.aura.ty-giant i,.aura.ty-plant i{display:none}
.aura.ty-aberration i{width:calc(70px * var(--s));height:calc(70px * var(--s));background:none;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);animation:au-ring calc(var(--d) * 1.3) ease-out var(--t) infinite}
.aura.ty-aberration i:nth-child(n+5){display:none}
.ty-elemental .aura{background:linear-gradient(160deg,color-mix(in srgb,var(--c) 14%,transparent),transparent 40%,color-mix(in srgb,#5AB4F0 12%,transparent) 80%) 0 0/200% 200%;animation:au-flow 9s ease-in-out infinite alternate}
.aura.ty-elemental i{top:auto;bottom:-10px;animation:au-rise var(--d) ease-in var(--t) infinite}
.ty-construct .aura{background:linear-gradient(color-mix(in srgb,var(--c) 9%,transparent) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,color-mix(in srgb,var(--c) 9%,transparent) 1px,transparent 1px) 0 0/22px 22px;-webkit-mask:radial-gradient(circle at 90% 0,#000,transparent 60%);mask:radial-gradient(circle at 90% 0,#000,transparent 60%)}
.aura.ty-construct i{display:none}
.aura.ty-ooze i:nth-child(-n+4){top:auto;bottom:-14px;width:calc(12px * var(--s));height:calc(12px * var(--s));background:none;border:1.5px solid color-mix(in srgb,var(--c) 60%,transparent);animation:au-rise calc(var(--d) * 1.4) ease-in var(--t) infinite}
.ty-plant .aura{background:radial-gradient(ellipse 18px 8px at 30% 40%,color-mix(in srgb,var(--c) 18%,transparent) 60%,transparent 62%) 0 0/70px 60px;-webkit-mask:linear-gradient(200deg,#000,transparent 50%);mask:linear-gradient(200deg,#000,transparent 50%)}
/* legendary creatures: a slow gold edge */
.statblock.legend{box-shadow:0 0 0 1px rgba(242,195,94,.55),0 0 40px -12px rgba(242,195,94,.6)}
.statblock.legend::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:4;
  background:linear-gradient(115deg,transparent 35%,#F2C35E 48%,#fff8 50%,#F2C35E 52%,transparent 65%) 0 0/300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:loot-shine 6s linear infinite}
.legend-tag{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;margin:-4px 0 6px;padding:3px 10px;border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#1A1408;background:linear-gradient(90deg,#F7D68A,#E0A440)}
.legend-tag svg{width:13px;height:13px}
/* magic items: rarer loot glimmers */
.aura.loot i{background:var(--c)}
.mitem.r-very-rare{box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent),0 0 36px -14px var(--c)}
.mitem.r-legendary{animation:au-glow 3.6s ease-in-out infinite}
.mitem.r-artifact{animation:au-glow 2.6s ease-in-out infinite}
.mitem.r-artifact .aura::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,color-mix(in srgb,var(--c) 16%,transparent),transparent 30%,color-mix(in srgb,var(--c) 12%,transparent),transparent 60%);animation:spin 18s linear infinite}
.mitem.r-legendary .loot-glyph,.mitem.r-artifact .loot-glyph{opacity:.22;filter:drop-shadow(0 0 10px var(--c))}
@keyframes au-rise{0%{transform:translateY(0) scale(1);opacity:0}12%{opacity:.85}100%{transform:translateY(-340px) translateX(20px) scale(.3);opacity:0}}
@keyframes au-mist{0%,100%{transform:translate(-20px,0);opacity:0}50%{transform:translate(30px,-10px);opacity:.9}}
@keyframes au-ring{0%{transform:scale(.2);opacity:0}25%{opacity:.8}100%{transform:scale(2.4);opacity:0}}
@keyframes au-swirl{0%{transform:rotate(0) translateX(28px) rotate(0);opacity:0}20%,80%{opacity:.9}100%{transform:rotate(360deg) translateX(28px) rotate(-360deg);opacity:0}}
@keyframes au-twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:.9;transform:scale(1) rotate(45deg)}}
@keyframes au-sheen{from{transform:translateX(-30%)}to{transform:translateX(30%)}}
@keyframes au-pulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes au-flow{from{background-position:0 0}to{background-position:100% 100%}}
@keyframes au-glow{0%,100%{box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent),0 0 30px -14px var(--c)}50%{box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 70%,transparent),0 0 56px -10px var(--c)}}
:root.day .aura i{mix-blend-mode:multiply}
@media (prefers-reduced-motion: reduce){html:not(.force-motion) .aura,html:not(.force-motion) .aura i,html:not(.force-motion) .aura::before{animation:none!important}html:not(.force-motion) .aura i{display:none}}
.statblock .legend-tag{position:absolute;top:-12px;left:18px;z-index:6;margin:0;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.statblock.legend{overflow:visible;margin-top:12px}
.statblock>*:not(.aura):not(.glare):not(.legend-tag),.spell>*:not(.aura):not(.mcircle):not(.scene){position:relative;z-index:1}
.aura.ty-undead i,.aura.ty-ooze i:nth-child(n+5),.aura.sc-necromancy i{opacity:0;mix-blend-mode:screen}
@keyframes au-mist{0%,100%{transform:translate(-20px,0);opacity:0}50%{transform:translate(30px,-10px);opacity:.5}}

/* ===== design pass 2: micro-animations ===== */
/* page change: a breath of fog in the section colour */
.fog-veil{position:absolute;left:0;right:0;top:0;height:100vh;z-index:5;pointer-events:none;overflow:hidden;animation:fog-out .6s ease-out forwards}
.fog-veil i{position:absolute;width:90vmax;height:60vmax;border-radius:50%;filter:blur(40px);background:radial-gradient(closest-side,color-mix(in srgb,var(--sec,var(--accent)) 16%,var(--bg)) 0%,color-mix(in srgb,var(--sec,var(--accent)) 6%,var(--bg)) 55%,transparent 100%)}
.fog-veil i:nth-child(1){left:-30vmax;top:-10vmax;animation:fog-l .8s ease-out forwards}
.fog-veil i:nth-child(2){right:-30vmax;top:20vh;animation:fog-r .8s ease-out forwards}
.fog-veil i:nth-child(3){left:10vw;bottom:-30vmax;animation:fog-l .8s ease-out forwards}
@keyframes fog-out{0%{opacity:.75}40%{opacity:.4}100%{opacity:0}}
@keyframes fog-l{to{transform:translateX(-22vw) scale(1.15)}}
@keyframes fog-r{to{transform:translateX(22vw) scale(1.15)}}
.view.enter{animation:view-fog .5s cubic-bezier(.2,.7,.2,1)}
@keyframes view-fog{from{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:none}}

/* roll buttons hop on hover */
button.roll{display:inline-block;transform-origin:50% 80%}
button.roll:hover{animation:roll-hop .5s cubic-bezier(.3,1.5,.5,1)}
button.roll:active{transform:scale(.92)}
@keyframes roll-hop{0%{transform:none}30%{transform:translateY(-3px) rotate(-5deg) scale(1.08)}60%{transform:translateY(0) rotate(3deg)}80%{transform:rotate(-1deg)}100%{transform:none}}
.die-btn:hover .dic{animation:die-wob .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes die-wob{0%{transform:none}35%{transform:translateY(-4px) rotate(-14deg) scale(1.1)}70%{transform:rotate(8deg)}100%{transform:none}}
.dp-roll:not([disabled]):hover svg{animation:die-wob .55s cubic-bezier(.3,1.5,.5,1)}
.d20-roll:hover .die{animation:die-wob .6s cubic-bezier(.3,1.5,.5,1)}

/* the result is stamped onto the table */
.dt-res{position:relative}
.dt-res.show b{animation:stamp .55s cubic-bezier(.2,1.4,.4,1) .05s both}
.dt-res.show::before{content:"";position:absolute;left:50%;top:46%;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;border:2px solid rgba(232,194,122,.8);pointer-events:none;animation:stamp-ring .7s ease-out .22s both}
.dt-res.show.crit::before{border-color:rgba(255,215,122,1);border-width:3px}
.dt-res.show.fumble::before{border-color:rgba(255,90,70,.85)}
@keyframes stamp{0%{opacity:0;transform:scale(2.6) rotate(-8deg)}55%{opacity:1;transform:scale(.9) rotate(1deg)}75%{transform:scale(1.05)}100%{opacity:1;transform:none}}
@keyframes stamp-ring{0%{opacity:0;transform:scale(.4)}20%{opacity:1}100%{opacity:0;transform:scale(2.4)}}
.dice-bubble .dr-t{display:inline-block;animation:stamp .5s cubic-bezier(.2,1.4,.4,1) .1s both}
.pl-rolls li b,.pl-rolls li .t{display:inline-block;animation:stamp .5s cubic-bezier(.2,1.4,.4,1) .1s both}

/* natural 20: a gold flash across the page; natural 1: the page flinches */
.pfx{position:fixed;inset:0;z-index:95;pointer-events:none;overflow:hidden}
.pfx-crit{mix-blend-mode:screen;animation:pfx-fade 1.4s ease-out forwards}
.pfx-crit b{position:absolute;inset:-20%;background:radial-gradient(closest-side at 50% 45%,rgba(255,226,150,.85),rgba(255,190,80,.35) 45%,transparent 75%);animation:pfx-bloom 1.2s cubic-bezier(.2,.8,.2,1) forwards}
.pfx-crit::after{content:"";position:absolute;top:-20%;bottom:-20%;width:28%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,236,180,.55),transparent);transform:skewX(-14deg);animation:pfx-sweep .9s ease-out .05s forwards}
.pfx-crit i{position:absolute;left:50%;top:45%;width:3px;height:46vmax;margin-left:-1.5px;transform-origin:50% 0;background:linear-gradient(rgba(255,226,150,.9),transparent);transform:rotate(var(--a)) scaleY(0);animation:pfx-ray 1s ease-out var(--t) forwards}
@keyframes pfx-fade{0%,55%{opacity:1}100%{opacity:0}}
@keyframes pfx-bloom{0%{opacity:0;transform:scale(.3)}25%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
@keyframes pfx-sweep{to{left:120%}}
@keyframes pfx-ray{0%{transform:rotate(var(--a)) scaleY(0);opacity:1}60%{opacity:.8}100%{transform:rotate(var(--a)) scaleY(1);opacity:0}}
.pfx-fumble{background:radial-gradient(closest-side,transparent 55%,rgba(150,20,10,.45));animation:pfx-red .9s ease-out forwards}
@keyframes pfx-red{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
.view.quake{animation:quake .55s cubic-bezier(.36,.07,.19,.97)}
@keyframes quake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px) rotate(-.2deg)}40%,60%{transform:translateX(5px) rotate(.2deg)}}

/* level up: a column of light and the class crest */
.lu-beam{position:absolute;left:50%;top:0;bottom:0;width:min(820px,100vw);transform:translateX(-50%);pointer-events:none;overflow:hidden}
.lu-beam span{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,220,140,.16) 22%,rgba(255,236,190,.5) 50%,rgba(255,220,140,.16) 78%,transparent);transform-origin:50% 0;animation:lu-beam 1.1s cubic-bezier(.2,.8,.2,1) both,lu-beam-breathe 3.2s ease-in-out 1.1s infinite}
.lu-beam i{position:absolute;bottom:-10px;left:var(--x);width:4px;height:4px;border-radius:50%;background:#FFE29A;box-shadow:0 0 8px #FFB84A;animation:lu-mote var(--d) linear var(--t) infinite;opacity:0}
@keyframes lu-beam{0%{transform:scaleY(0);opacity:0}30%{opacity:1}100%{transform:scaleY(1);opacity:1}}
@keyframes lu-beam-breathe{50%{opacity:.7}}
@keyframes lu-mote{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-100vh);opacity:0}}
.lvlup{z-index:1}
.lu-crest{position:relative;width:132px;height:132px;margin:0 auto 14px;display:grid;place-items:center;color:#E0B25A;--accent:#E0B25A;--accent-soft:rgba(224,178,90,.16);--accent-line:rgba(224,178,90,.5)}
.lu-crest .hex.xl{width:120px;height:120px;animation:lu-crest-in .9s cubic-bezier(.2,1.3,.4,1) .15s both}
.lu-crest .hex.xl svg.frame path{fill:rgba(224,178,90,.12);stroke:#E0B25A;stroke-width:1.6}
.lu-halo{position:absolute;inset:-26px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,215,122,.55),rgba(255,190,80,.15) 60%,transparent);animation:lu-halo 2.6s ease-in-out .4s infinite}
.lu-crest .lu-medal{position:absolute;right:-14px;bottom:-8px;width:54px;height:60px;margin:0;animation:lu-medal 1s ease-out .55s both}
.lu-crest .lu-medal small{font-size:.5rem}
.lu-crest .lu-medal b{font-size:1.7rem}
@keyframes lu-crest-in{0%{opacity:0;transform:translateY(-60px) scale(.6)}70%{opacity:1;transform:translateY(4px) scale(1.06)}100%{transform:none}}
@keyframes lu-halo{0%,100%{opacity:.6;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
.lu-burst{top:96px}
@media (prefers-reduced-motion: reduce){html:not(.force-motion) .fog-veil,html:not(.force-motion) .pfx,html:not(.force-motion) .lu-beam i{display:none}}

/* ===== design pass 3: atmosphere ===== */
/* drifting dust, embers in the bestiary and at the table, motes of magic in spells and items */
#ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;--amb:color-mix(in srgb,var(--sec,var(--accent)) 55%,#FFE6B0)}
.shell,.main{position:relative;z-index:1}
#ambient i{position:absolute;left:var(--x);top:var(--y);width:calc(4px * var(--s));height:calc(4px * var(--s));border-radius:50%;background:var(--amb);box-shadow:0 0 6px var(--amb);opacity:0;animation:amb-dust var(--d) ease-in-out var(--t) infinite}
@keyframes amb-dust{0%{opacity:0;transform:translate(0,0)}20%{opacity:.35}50%{transform:translate(var(--w),-6vh)}80%{opacity:.25}100%{opacity:0;transform:translate(calc(var(--w) * -.5),-12vh)}}
html[data-sec="bestiary"] #ambient i,html[data-sec="tracker"] #ambient i,html[data-sec="play"] #ambient i,html[data-sec="camps"] #ambient i{top:auto;bottom:-10px;--amb:#FF9A4A;box-shadow:0 0 8px #FF7A2A;animation:amb-ember calc(var(--d) * .7) linear var(--t) infinite}
@keyframes amb-ember{0%{opacity:0;transform:translate(0,0)}10%{opacity:.7}60%{opacity:.45}100%{opacity:0;transform:translate(var(--w),-105vh) scale(.4)}}
html[data-sec="spells"] #ambient i,html[data-sec="magic"] #ambient i{animation:amb-twinkle calc(var(--d) * .5) ease-in-out var(--t) infinite}
@keyframes amb-twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.55;transform:scale(1.2) translateY(-2vh)}}
html.day #ambient,html[data-theme="light"] #ambient{--amb:color-mix(in srgb,var(--sec,var(--accent)) 70%,#7A5A20)}
html.day #ambient i,html[data-theme="light"] #ambient i{box-shadow:none}
html.amb-off #ambient{display:none}
@media (prefers-reduced-motion: reduce){html:not(.force-motion) #ambient{display:none}}
@media print{#ambient{display:none}}

/* illuminated initial letters */
.prose.illum>p:first-child::first-letter{float:left;font-family:var(--f-display);font-weight:400;font-size:3.35em;line-height:.86;margin:.06em .12em 0 0;padding:.1em .14em .06em;
  color:var(--accent);background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--sec,var(--accent)) 22%,transparent),transparent 70%),var(--panel2);
  border:1px solid var(--accent-line);border-radius:6px;box-shadow:inset 0 0 0 3px var(--panel),inset 0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent);text-shadow:0 0 14px color-mix(in srgb,var(--accent) 35%,transparent)}
.spell .prose.illum>p:first-child::first-letter{color:var(--c);border-color:color-mix(in srgb,var(--c) 50%,transparent);box-shadow:inset 0 0 0 3px var(--panel),inset 0 0 0 4px color-mix(in srgb,var(--c) 35%,transparent);text-shadow:0 0 14px color-mix(in srgb,var(--c) 45%,transparent)}
.prose.illum[lang="en"]>p:first-child::first-letter{font-size:2.9em}

/* ornamental dividers */
.section-title,.group-title,.rch h2{display:flex;align-items:center;gap:14px}
.section-title::after,.group-title::after,.rch h2::after{content:"";flex:1 1 auto;min-width:40px;height:14px;background:var(--accent-line);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14'%3E%3Cpath d='M30 1l6 6-6 6-6-6z M14 7a6 4 0 0 1 10 0 M46 7a6 4 0 0 0-10 0' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Ccircle cx='6' cy='7' r='1.8'/%3E%3Ccircle cx='54' cy='7' r='1.8'/%3E%3C/svg%3E") center/60px 14px no-repeat,linear-gradient(#000,#000) left center/calc(50% - 34px) 1.2px no-repeat,linear-gradient(#000,#000) right center/calc(50% - 34px) 1.2px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14'%3E%3Cpath d='M30 1l6 6-6 6-6-6z M14 7a6 4 0 0 1 10 0 M46 7a6 4 0 0 0-10 0' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Ccircle cx='6' cy='7' r='1.8'/%3E%3Ccircle cx='54' cy='7' r='1.8'/%3E%3C/svg%3E") center/60px 14px no-repeat,linear-gradient(#000,#000) left center/calc(50% - 34px) 1.2px no-repeat,linear-gradient(#000,#000) right center/calc(50% - 34px) 1.2px no-repeat}
.group-title::after{height:10px;opacity:.8}
.sc-group .group-title a,.group-title>*{flex:none}

/* illustrated empty states */
.empty-art{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;color:var(--accent)}
.empty-art svg{width:min(240px,70%);height:auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.empty-state .empty-art{margin:-8px auto 10px}
.empty-state .empty-art svg{width:min(150px,50%)}
.empty-art .ea-fl{stroke:var(--line);stroke-width:1.2}
.empty-art .ea-wall,.empty-art .ea-c2{opacity:.35}
.empty-art .ea-flame{fill:#FFC86A;stroke:#E39A3A;transform-box:fill-box;transform-origin:50% 100%;animation:flick 1.4s ease-in-out infinite}
.empty-art .ea-glow{fill:rgba(255,200,106,.14);stroke:none;animation:ea-glow 3s ease-in-out infinite}
@keyframes ea-glow{50%{opacity:.5}}
.empty-art .ea-route{stroke-dasharray:4 5;animation:ea-march 2.4s linear infinite}
@keyframes ea-march{to{stroke-dashoffset:-18}}
.empty-art .ea-x{stroke:var(--danger);stroke-width:2.2}
.empty-art .ea-rose{transform-origin:70px 58px;animation:spin 30s linear infinite;opacity:.7}
.empty-art .ea-quill{transform-origin:206px 132px;animation:ea-quill 4s ease-in-out infinite}
@keyframes ea-quill{50%{transform:rotate(-6deg)}}
.empty-art .ea-moth{transform-origin:120px 84px;animation:ea-moth 6s linear infinite}
@keyframes ea-moth{from{transform:rotate(0) translateX(0)}to{transform:rotate(360deg)}}
.empty-art .ea-shield{opacity:.55}
.empty-art .ea-chair:not(.ea-c2){transform-origin:210px 138px;animation:ea-chair 5s ease-in-out infinite}
@keyframes ea-chair{0%,100%{transform:none}50%{transform:rotate(1.2deg)}}
.ea-t{margin:6px 0 0;font-family:var(--f-display);font-size:1.5rem;color:var(--ink)}
.ea-p{margin:0 0 8px;color:var(--muted);max-width:44ch}
.ch-empty{display:flex;flex-direction:column;gap:14px}

/* ===== list pages: one column, records open inline under their row ===== */
.mdx{display:block;max-width:980px}
.mdx .md-list{min-width:0}
.rows .row[aria-current="true"]{background:color-mix(in srgb,var(--c,var(--accent)) 14%,var(--panel));box-shadow:inset 3px 0 0 var(--c,var(--accent))}
.inl{padding:12px;background:color-mix(in srgb,var(--c,var(--accent)) 5%,var(--panel2));border-bottom:1px solid var(--line2);display:flex;flex-direction:column;gap:8px;animation:inl-in .32s cubic-bezier(.2,.8,.2,1)}
.inl>.card{margin:0;box-shadow:none}
.inl .detail-empty{display:none}
.inl-close{align-self:center;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.9rem;color:var(--muted);text-decoration:none;padding:6px 14px;border-radius:999px;border:1px solid var(--line)}
.inl-close:hover{color:var(--ink);border-color:var(--accent-line)}
.inl-close svg{transform:rotate(90deg);width:16px;height:16px}
@keyframes inl-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:600px){.inl{padding:8px 6px}}
.inl .spell.has-scene .scene{aspect-ratio:auto;height:clamp(150px,26vw,250px)}
.inl .card{max-width:100%}
.author-box{display:flex;gap:12px;align-items:flex-start;margin:20px 0 6px;padding:14px 16px;border-radius:12px;border:1px solid var(--accent-line);background:color-mix(in srgb,var(--accent) 7%,var(--panel));font-size:.92rem;line-height:1.5}
.author-box svg{color:var(--accent);flex:none;margin-top:2px}
.author-box b{display:block;color:var(--ink)}
.author-box span{color:var(--muted)}

/* ===== character sheet: choices, abilities, feats, weapons, notes, folding ===== */
.cs section[data-fold]>h2{position:relative;padding-right:40px}
.fold-b{position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:none;cursor:pointer;color:var(--muted)}
.fold-b::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translate(-50%,-70%) rotate(45deg);transition:transform .2s}
.fold-b:hover{border-color:var(--line);color:var(--ink)}
section.folded .fold-b::before{transform:translate(-50%,-30%) rotate(-135deg)}
.cs section.folded>*:not(h2){display:none!important}
.cs section.folded>h2{margin-bottom:0}
.cs section.folded{padding-bottom:14px}

.cs-todo{border-color:var(--accent-line);background:color-mix(in srgb,var(--accent) 8%,var(--panel));margin-bottom:16px}
.todo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.todo li{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.todo .lv,.abl .lv{flex:none;min-width:2.2em;text-align:center;font-size:.76rem;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:2px 6px}
.todo-n{font-weight:700;flex:1 1 140px}
.btn.sm{font-size:.84rem;padding:6px 11px}
.pick-done{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;color:var(--muted);flex-wrap:wrap}
.pick-done svg{color:#3FA66B;width:16px;height:16px}
.pick-done b{color:var(--ink)}
.gains .gpick{grid-column:2;margin-top:6px}
.gains .gd{grid-column:2;margin-top:4px}
.gains .gd>summary{cursor:pointer;font-size:.82rem;color:var(--accent);font-weight:700;list-style:none}
.gains .gd>summary::-webkit-details-marker{display:none}
.gains .gd .prose{font-size:.95rem;margin-top:6px;padding:10px 12px;border-radius:10px;background:var(--panel2)}

.abls{display:flex;flex-direction:column;gap:6px}
.abl-gh{display:flex;align-items:center;gap:6px;margin:6px 0 6px;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.abl-gh svg{width:14px;height:14px;color:var(--accent)}
.abl{border:1px solid var(--line2);border-radius:10px;background:var(--panel2)}
.abl.star{border-color:var(--accent-line);background:color-mix(in srgb,var(--accent) 10%,var(--panel2));box-shadow:inset 3px 0 0 var(--accent)}
.abl>summary{display:flex;align-items:center;gap:10px;padding:8px 10px;cursor:pointer;list-style:none}
.abl>summary::-webkit-details-marker{display:none}
.abl .lv0 svg{width:12px;height:12px}
.abl-n{flex:1;min-width:0;display:flex;flex-direction:column;font-weight:700}
.abl-n small{font-weight:500;font-size:.78rem;color:var(--muted)}
.abl-st{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;border:none;background:none;color:var(--muted);cursor:pointer}
.abl-st svg{width:17px;height:17px}
.abl-st[aria-pressed="true"]{color:var(--accent)}
.abl-st[aria-pressed="true"] svg{fill:currentColor}
.abl-st:hover{background:var(--panel)}
.abl-b{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}
.abl-b .prose{font-size:.98rem}
.abl-a{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.linkbtn.danger{color:var(--danger)}
.add-own{margin-top:12px}
.abl-form{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding:12px;border:1px dashed var(--accent-line);border-radius:12px}

.wpns{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.wpn{border:1px solid var(--line2);border-radius:10px;background:var(--panel2)}
.wpn>summary{display:flex;align-items:center;gap:10px;padding:8px 10px;cursor:pointer;list-style:none}
.wpn>summary::-webkit-details-marker{display:none}
.wpn>summary>svg{color:var(--accent);flex:none}
.wpn-n{flex:1;min-width:0;display:flex;flex-direction:column}
.wpn-n small{font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wpn-r{display:flex;gap:6px;align-items:center;flex:none}
.wpn-r .roll{font-size:.95rem;padding:3px 8px;border-radius:7px;border-bottom-width:1.5px}
.wpn-nd{font-size:.86rem;color:var(--muted)}
.wpn-b{padding:4px 12px 12px;display:flex;flex-direction:column;gap:10px}
.wpn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.wpn-grid label,.wpn-b>label{display:flex;flex-direction:column;gap:4px;font-size:.78rem;font-weight:700;color:var(--muted)}
.wpn-grid .wide{grid-column:1/-1}
.wpn-grid .chk{flex-direction:row;align-items:center;gap:8px;grid-column:1/-1;font-size:.9rem;color:var(--ink)}
.wpn-grid input,.wpn-grid select,.wpn-b textarea{padding:8px 10px;font-size:.95rem}
.wpn-props{margin:0;font-size:.86rem;color:var(--muted)}

.inv-note{flex:none;width:30px;height:30px;display:grid;place-items:center;border:none;background:none;color:var(--muted);border-radius:8px;cursor:pointer}
.inv-note svg{width:16px;height:16px}
.inv-note.has{color:var(--accent)}
.inv .inv-x{display:block;padding:0 0 8px 40px;border:none}
.inv .inv-x textarea{font-size:.92rem;padding:8px 10px}

.notes{display:flex;flex-direction:column;gap:6px}
.note{border:1px solid var(--line2);border-radius:10px;background:var(--panel2)}
.note>summary{display:flex;flex-direction:column;padding:9px 12px;cursor:pointer;list-style:none}
.note>summary::-webkit-details-marker{display:none}
.note>summary b{font-family:var(--f-display);font-weight:400;font-size:1.15rem}
.note>summary small{color:var(--muted);font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note[open]>summary small{display:none}
.note-b{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}
.note-b input{font-weight:700}

/* the picker window */
.pick-wrap{position:fixed;inset:0;z-index:85;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:16px}
.pick{width:min(640px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;gap:10px;padding:18px;box-sizing:border-box;animation:lu-in .3s cubic-bezier(.2,1.2,.4,1)}
.pk-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pk-h h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:1.5rem}
.pk-cur{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.92rem;padding:8px 10px;border-radius:10px;background:var(--panel2)}
.pk-cur svg{color:#3FA66B;width:16px;height:16px}
.pk-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.pk-tabs button{font:inherit;font-weight:700;color:var(--muted);background:none;border:none;padding:8px 12px;cursor:pointer;box-shadow:inset 0 -3px 0 transparent}
.pk-tabs button[aria-selected="true"]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--accent)}
.pk-body{overflow:auto;display:flex;flex-direction:column;gap:6px;min-height:0;padding-right:2px}
.pk-it{border:1px solid var(--line2);border-radius:10px;background:var(--panel2)}
.pk-it>summary{display:flex;align-items:center;gap:10px;padding:9px 10px;cursor:pointer;list-style:none}
.pk-it>summary::-webkit-details-marker{display:none}
.pk-n{flex:1;min-width:0;display:flex;flex-direction:column}
.pk-n small{font-size:.8rem;color:var(--muted)}
.pk-it .srcb{flex:none}
.pk-it>.prose,.pk-it>.linkbtn{margin:0 12px 10px}
.pk-it>.prose{font-size:.95rem}
.pk-ab{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pk-abb{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font:inherit;cursor:pointer}
.pk-abb small{font-size:.74rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.pk-abb b{font-family:var(--f-display);font-weight:400;font-size:1.8rem;line-height:1.1}
.pk-abb i{position:absolute;top:6px;right:8px;font-style:normal;font-weight:700;font-size:.8rem;color:var(--accent)}
.pk-abb.on{border-color:var(--accent);background:var(--accent-soft)}
.pk-abb:disabled{opacity:.45;cursor:default}
.pk-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
@media (max-width:600px){.pk-ab{grid-template-columns:repeat(2,minmax(0,1fr))}.wpn-grid{grid-template-columns:minmax(0,1fr)}.wpn-n small{white-space:normal}.pick{padding:14px}}
.pick-wrap .pick{display:flex;align-items:stretch}
.pick-wrap .pick>*{align-self:stretch;max-width:none}
.pick-wrap .pk-body{width:100%}
.pinned{margin-bottom:6px;padding-bottom:10px;border-bottom:1px dashed var(--line)}
.note-a{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.note-a .linkbtn{margin-left:auto}
.note-b textarea{min-height:180px;font-size:1.02rem}
.notefs{position:fixed;inset:0;z-index:88;background:var(--scrim);display:flex;padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.nfs{flex:1;display:flex;flex-direction:column;gap:10px;padding:18px;box-sizing:border-box;max-width:1100px;margin:0 auto;width:100%;animation:lu-in .25s cubic-bezier(.2,1.2,.4,1)}
.nfs-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nfs-t{flex:1 1 240px;font-family:var(--f-display);font-size:1.6rem;border:none;background:transparent;padding:4px 0;box-shadow:none}
.nfs-t:focus{box-shadow:none;border-bottom:1px solid var(--accent-line)}
.nfs-x{flex:1;resize:none;font-size:1.1rem;line-height:1.65;padding:14px}
.nfs-hint{margin:0;font-size:.82rem;color:var(--muted)}
.row-del{flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;min-width:30px;justify-content:center;padding:0 6px;border-radius:8px;border:1px solid transparent;background:none;color:var(--muted);cursor:pointer;font:inherit;font-size:.8rem;font-weight:700}
.row-del svg{width:16px;height:16px}
.row-del:hover{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.row-del.ask{color:#fff;background:var(--danger);border-color:var(--danger);padding:0 10px}
.note>summary{flex-direction:row;align-items:center;gap:8px}
.note-s{flex:1;min-width:0;display:flex;flex-direction:column}
.note-s small{color:var(--muted);font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note[open] .note-s small{display:none}
.note-s b{font-family:var(--f-display);font-weight:400;font-size:1.15rem}

/* quick access */
.cs-quick{margin-bottom:16px;border-color:var(--accent-line)}
.qk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;align-items:start}
.qk{border:1px solid var(--accent-line);border-radius:12px;background:color-mix(in srgb,var(--accent) 7%,var(--panel2))}
.qk.qk-sp{border-color:color-mix(in srgb,var(--sc-illusion) 45%,transparent);background:color-mix(in srgb,var(--sc-illusion) 7%,var(--panel2))}
.qk>summary{display:flex;align-items:center;gap:8px;padding:9px 10px;cursor:pointer;list-style:none}
.qk>summary::-webkit-details-marker{display:none}
.qk-n{flex:1;min-width:0;display:flex;flex-direction:column}
.qk-n b{font-weight:700}
.qk-n small{font-size:.76rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qk-uses{display:flex;gap:3px;flex-wrap:wrap;max-width:110px;justify-content:flex-end}
.qk-uses .pip{width:14px;height:14px}
.qk-b{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}
.qk-b .prose{font-size:.95rem;max-height:260px;overflow:auto}
.qk-set{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.84rem;color:var(--muted)}
.qk-set b{min-width:1.4em;text-align:center;color:var(--ink)}
.qk-set .tbtn{padding:2px 9px}
.qk-acts{margin-top:10px}
.qk-fab{position:fixed;left:calc(var(--rail-w) + 20px);bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:45;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid var(--accent-line);background:var(--panel);color:var(--ink);font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.qk-fab svg{color:var(--accent);width:18px;height:18px}
.qk-fab i{font-style:normal;font-size:.75rem;min-width:1.5em;text-align:center;padding:1px 6px;border-radius:999px;background:var(--accent);color:var(--accent-ink)}
.qk-fab[aria-expanded="true"]{background:var(--accent-soft)}
.qk-drawer{position:fixed;left:calc(var(--rail-w) + 20px);bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:46;width:min(380px,calc(100vw - 32px));max-height:min(70vh,640px);overflow:auto;display:flex;flex-direction:column;gap:10px;padding:14px;box-sizing:border-box;border-radius:16px;border:1px solid var(--accent-line);background:var(--panel);box-shadow:0 24px 60px rgba(0,0,0,.5);animation:lu-in .25s cubic-bezier(.2,1.2,.4,1)}
.qk-drawer .qk-grid{grid-template-columns:minmax(0,1fr)}
.qk-dh{display:flex;align-items:center;justify-content:space-between}
.qk-dh b{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:400;font-size:1.25rem}
.qk-dh svg{color:var(--accent)}
.splist .abl-st{width:28px;height:28px}
@media (max-width:999px){.qk-fab{left:max(16px,env(safe-area-inset-left,0px));bottom:calc(84px + env(safe-area-inset-bottom,0px))}.qk-fab span{display:none}.qk-drawer{left:max(16px,env(safe-area-inset-left,0px));bottom:calc(138px + env(safe-area-inset-bottom,0px));max-height:60vh}}
.cs>.cs-todo,.cs>.cs-quick{padding:18px}
.cs>.cs-todo>h2,.cs>.cs-quick>h2{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-family:var(--f-ui);font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sec)}
.cs>.cs-todo>h2 svg,.cs>.cs-quick>h2 svg{width:16px;height:16px}

/* note attachments */
.att{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.att-it{position:relative;display:flex}
.att-th{padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel);cursor:zoom-in;width:92px;height:92px}
.att-th img{width:100%;height:100%;object-fit:cover;display:block}
.att-file{display:flex;align-items:center;gap:8px;padding:8px 30px 8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit;cursor:pointer;text-align:left;max-width:240px}
.att-file svg{color:var(--accent);flex:none}
.att-file span{display:flex;flex-direction:column;min-width:0}
.att-file b{font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-file small{font-size:.76rem;color:var(--muted)}
.att-x{position:absolute;top:4px;right:4px;width:24px;height:24px;display:grid;place-items:center;border-radius:999px;border:none;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;padding:0}
.att-x svg{width:13px;height:13px}
.att-x.ask{background:var(--danger)}
.att-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:92px;min-height:92px;border:1px dashed var(--accent-line);border-radius:10px;color:var(--accent);font-size:.78rem;font-weight:700;text-align:center;cursor:pointer;padding:6px;box-sizing:border-box}
.att-add:hover{background:var(--accent-soft)}
.note-th{width:32px;height:32px;object-fit:cover;border-radius:6px;flex:none;border:1px solid var(--line)}
.note-s small svg{width:12px;height:12px;vertical-align:-2px;margin-right:2px}
.nfs-att{flex:none}
.attview{position:fixed;inset:0;z-index:95;background:rgba(5,6,10,.92);display:flex;flex-direction:column;padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.av-h{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#F3EEE2;padding:4px 4px 10px}
.av-h b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av-b{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto}
.av-b img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.att-txt{max-width:900px;width:100%;max-height:100%;overflow:auto;white-space:pre-wrap;background:var(--panel);color:var(--ink);padding:16px;border-radius:10px;font-size:.95rem;box-sizing:border-box}
.att-none{text-align:center;color:#F3EEE2;max-width:420px}
.att-none svg{width:40px;height:40px;color:var(--accent)}

/* sheet layout editing */
.cs-laybar{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;padding:16px 18px;margin-bottom:16px;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel))}
.cs-laybar>div:first-child{flex:1 1 320px;min-width:0}
.cs-laybar b{display:flex;align-items:center;gap:8px;font-size:1.05rem}
.cs-laybar b svg{color:var(--accent)}
.cs-laybar p{margin:6px 0 0;color:var(--muted);font-size:.9rem}
.lay-hid{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px;font-size:.86rem;color:var(--muted)}
.lay-hid .chip svg{width:14px;height:14px}
.lay-acts{display:flex;gap:8px;flex-wrap:wrap}
.sec-ctl{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px 6px 12px;margin-bottom:-6px;border:1px dashed var(--accent-line);border-radius:10px;background:var(--accent-soft)}
.cs>.sec-ctl{margin-bottom:8px}
.sec-n{display:flex;align-items:center;gap:6px;font-weight:700;font-size:.86rem}
.sec-n svg{width:15px;height:15px;color:var(--accent)}
.sec-b{display:flex;gap:4px;flex-wrap:wrap}
.sec-b button{display:inline-flex;align-items:center;gap:4px;height:30px;min-width:30px;justify-content:center;padding:0 6px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:.78rem;font-weight:700;cursor:pointer}
.sec-b button svg{width:15px;height:15px}
.sec-b button:disabled{opacity:.35;cursor:default}
.sec-b button:not(:disabled):hover{border-color:var(--accent)}
.lay-empty{padding:20px;border:1px dashed var(--line);border-radius:12px;text-align:center}
.mv{display:inline-flex;flex-direction:column;gap:2px;flex:none}
.mv-b{width:26px;height:18px;display:grid;place-items:center;border:1px solid var(--line);border-radius:5px;background:var(--panel);color:var(--ink);cursor:pointer;padding:0}
.mv-b svg{width:13px;height:13px}
.mv-b:hover{border-color:var(--accent);color:var(--accent)}
.cs-editing .wpn,.cs-editing .abl,.cs-editing .splist li{outline:1px dashed color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:1px}
.abl.hid{opacity:.55}
.abl-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.abl-foot .add-own{margin-top:0}
@media (max-width:999px){.cs-grid{grid-template-columns:minmax(0,1fr)}}

/* ===== illustrations ===== */
.ark{fill:none;stroke:var(--sil,#07080c);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.are{fill:var(--glow,#FFD77A)}
.are[style*="fill:none"]{stroke:var(--glow,#FFD77A)}
.art-sil,.art-th{--sil:#07080c}
.art-sil,.art-th,.art-wth{fill:var(--sil);overflow:visible}
.art-plate{position:relative;display:block;aspect-ratio:16/7;max-width:100%;border-radius:12px;overflow:hidden;isolation:isolate;
  background:radial-gradient(60% 70% at 50% 92%,color-mix(in srgb,var(--c) 42%,transparent),transparent 70%),radial-gradient(90% 60% at 50% 0,color-mix(in srgb,var(--c) 16%,#10131c),#06070b 80%)}
.ap-sky{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(1px 1px at 12% 22%,#fff8,transparent),radial-gradient(1px 1px at 28% 12%,#fff6,transparent),radial-gradient(1.5px 1.5px at 72% 18%,#fff9,transparent),radial-gradient(1px 1px at 86% 30%,#fff6,transparent),radial-gradient(1px 1px at 46% 8%,#fff5,transparent),radial-gradient(1px 1px at 62% 34%,#fff4,transparent);animation:twinkle 6s ease-in-out infinite}
.art-plate::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-6%;height:34%;z-index:1;pointer-events:none;background:radial-gradient(50% 60% at 50% 100%,color-mix(in srgb,var(--c) 22%,transparent),transparent 70%);filter:blur(6px);animation:ap-fog 9s ease-in-out infinite alternate}
@keyframes ap-fog{to{transform:translateX(4%)}}
.art-plate .art-sil{position:absolute;left:0;right:0;bottom:4%;height:88%;width:100%;--glow:color-mix(in srgb,var(--c) 60%,#FFE6A8)}
.art-plate .art-sil use{filter:drop-shadow(0 0 1px var(--c)) drop-shadow(0 0 1px var(--c)) drop-shadow(0 0 9px color-mix(in srgb,var(--c) 60%,transparent));animation:ap-breathe 5s ease-in-out infinite;transform-origin:50% 100%;transform-box:fill-box}
@keyframes ap-breathe{50%{transform:scaleY(1.012) translateY(-.4px)}}
.ap-ground{fill:color-mix(in srgb,var(--c) 30%,#000);opacity:.6;filter:blur(1.5px)}
.ap-cap{position:absolute;left:12px;bottom:8px;z-index:2;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--c) 70%,#fff)}
.statblock .mon-plate{margin:-2px 0 14px}
.inl .statblock .mon-plate{margin-top:0}
.item-plate{aspect-ratio:16/5;margin:0 0 14px}
.item-plate .art-sil{height:84%;bottom:8%;--glow:color-mix(in srgb,var(--c) 75%,#fff);--sil:color-mix(in srgb,var(--c) 22%,#E9E3D3)}
.item-plate .art-sil use{filter:drop-shadow(0 0 .8px var(--c)) drop-shadow(0 0 10px color-mix(in srgb,var(--c) 65%,transparent));animation:ap-float 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes ap-float{50%{transform:translateY(-3px) rotate(-2deg)}}
.art-th{width:44px;height:32px;flex:none;border-radius:7px;padding:2px;box-sizing:border-box;background:radial-gradient(70% 80% at 50% 100%,color-mix(in srgb,var(--c) 34%,transparent),#0b0d14);--glow:color-mix(in srgb,var(--c) 70%,#fff)}
.art-th use{filter:drop-shadow(0 0 .8px var(--c)) drop-shadow(0 0 .8px var(--c))}
.art-wth{--sil:color-mix(in srgb,var(--c,var(--accent)) 20%,#E9E3D3);width:34px;height:34px;flex:none;border-radius:8px;padding:3px;box-sizing:border-box;background:radial-gradient(80% 80% at 50% 60%,color-mix(in srgb,var(--c,var(--accent)) 28%,transparent),#0b0d14);--c:var(--accent);--glow:#FFD77A}
.art-wth use{filter:drop-shadow(0 0 .7px var(--c)) drop-shadow(0 0 3px color-mix(in srgb,var(--c) 50%,transparent))}
.row.has-art{grid-template-columns:44px minmax(0,1fr) auto auto}
.row.has-art .dot{display:none}
@media (max-width:600px){.row.has-art{grid-template-columns:44px minmax(0,1fr) auto}}
@media (prefers-reduced-motion: reduce){html:not(.force-motion) .art-plate *,html:not(.force-motion) .art-plate::after{animation:none!important}}
.g-n{display:inline-flex;align-items:center;gap:10px}
.gtable .art-wth{width:30px;height:30px}
.mi-th{width:44px;height:32px}
.wpn>summary>.art-wth{width:36px;height:36px}
.b-daily.has-plate .art-plate{margin:-2px 0 12px;aspect-ratio:16/6}
.pact-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:10px}
.pact-card{padding:18px;display:flex;flex-direction:column;gap:6px;border-color:var(--accent-line);background:radial-gradient(120% 80% at 0 0,color-mix(in srgb,var(--accent) 10%,transparent),transparent 60%),var(--panel)}
.pact-card h3{margin:4px 0 0;font-family:var(--f-display);font-weight:400;font-size:1.5rem}
.pact-card .en{margin:0;color:var(--muted);font-size:.85rem}
.pact-card .prose{font-size:.98rem}
.pact-art{width:56px;height:56px;border-radius:14px}
.inv-rq{margin:0;padding:10px 16px 0;font-size:.86rem;color:var(--accent);font-weight:700}
.pk-it.na{opacity:.6}
.pk-na{font-size:.76rem;color:var(--muted);white-space:nowrap}
.art-plate.has-img{background:#07080c;aspect-ratio:16/8}
.art-plate.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;animation:ap-kb 24s ease-in-out infinite alternate}
.art-plate.has-img::after{left:0;right:0;bottom:0;height:45%;filter:none;animation:none;background:linear-gradient(transparent,rgba(5,6,10,.75));z-index:1}
.art-plate.has-img::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 60px rgba(0,0,0,.65);border-radius:inherit}
@keyframes ap-kb{from{transform:scale(1.02)}to{transform:scale(1.09) translate(-1%,-1%)}}
img.art-th{object-fit:cover;padding:0;background:#0b0d14;border:1px solid color-mix(in srgb,var(--c) 40%,transparent)}
.b-daily .art-plate.has-img{aspect-ratio:16/7}
/* compact art: title on the left, picture on the right */
.sb-band.with-art{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(150px,280px);align-items:center;gap:14px}
.sb-band .mon-plate{margin:0!important;aspect-ratio:4/3;width:100%;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent)}
.sb-band .mon-plate .ap-cap{display:none}
.sb-band .mon-plate:not(.has-img) .art-sil{height:92%;bottom:4%}
.mi-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,240px);gap:14px;align-items:center;margin-bottom:6px}
.mi-head .item-plate{margin:0;aspect-ratio:4/3;width:100%;box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent)}
.mi-head .item-plate .art-sil{height:78%;bottom:11%}
@media (max-width:600px){.sb-band.with-art{grid-template-columns:minmax(0,1fr) 120px;grid-template-areas:"t art" "cr art"}.sb-band.with-art>div:first-child{grid-area:t}.sb-band.with-art .cr-medal{grid-area:cr;width:50px;height:56px}.sb-band.with-art .mon-plate{grid-area:art;aspect-ratio:3/4}.mi-head{grid-template-columns:minmax(0,1fr) 110px}}

/* ---------- account ---------- */
.acc-wrap{max-width:560px}
.acc-card{display:flex;flex-direction:column;gap:14px;padding:22px}
.acc-card h2{margin:0}
.acc-mail{word-break:break-all}
.acc-seg{display:inline-flex;gap:4px;align-self:flex-start}
.acc-seg button{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:inherit;font:inherit;cursor:pointer}
.acc-seg button[aria-selected="true"]{background:var(--sec);color:var(--bg);border-color:transparent;font-weight:600}
.acc-form{display:flex;flex-direction:column;gap:12px}
.acc-form input{width:100%;box-sizing:border-box}
.acc-st{display:flex;align-items:center;gap:8px;margin:0;color:var(--ok,#7fd19b)}
.acc-st.bad{color:var(--bad,#ff8a7a)}
.acc-st .i{width:18px;height:18px}
.acc-more summary{cursor:pointer;margin-bottom:10px}
.ch-hint{font-size:13px;opacity:.75;align-self:center}
.ch-hint kbd{font:inherit;font-size:12px;padding:1px 6px;border-radius:5px;border:1px solid currentColor;opacity:.9}
@media (max-width:640px){.ch-hint{display:none}}
input[type="email"],input[type="password"]{font:inherit;font-size:1rem;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;box-sizing:border-box}
.acc-form .field{display:flex;flex-direction:column;gap:6px}
.hero-code{font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;min-height:120px;resize:vertical}
.hero-cp-st{margin:8px 0 0;font-size:14px;min-height:1.2em}
.hero-cp-st.ok{color:var(--ok,#7fd19b)}
.hero-cp-st.hint{color:var(--sec)}
.ver-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:90;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 18px;border-radius:14px;background:var(--panel);border:1px solid var(--sec);box-shadow:0 12px 40px rgba(0,0,0,.45);color:var(--ink);max-width:calc(100vw - 32px);box-sizing:border-box}
.ver-bar .btn.quiet{padding:8px}.ver-bar .i{width:16px;height:16px}
@media (max-width:640px){.ver-bar{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}

/* ---------- campaigns on the site: account button, invites, monster tokens ---------- */
.tb-acc{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-weight:600;font-size:14px;text-decoration:none;margin-left:auto;white-space:nowrap;max-width:200px}
.tb-acc span{overflow:hidden;text-overflow:ellipsis}
.tb-acc .i{width:18px;height:18px;flex:none}
.tb-acc.in{border-color:color-mix(in srgb,var(--sec) 55%,var(--line))}
.tb-acc:not(.in){background:var(--sec);color:var(--bg);border-color:var(--sec)}
.tb-acc+.icon-btn{margin-left:8px}
@media (max-width:640px){.tb-acc{height:36px;padding:0 10px}.tb-acc.in span{display:none}}
.acc-nick{margin:0;font-size:1.6rem}
.acc-mail{margin:-8px 0 0}
.cp-linkbox{margin:4px 0 10px}
.cp-linkbox input{font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink)}
.mtok{width:44px;height:44px;border-radius:12px;overflow:hidden;flex:none;display:inline-flex;align-items:center;justify-content:center;background:radial-gradient(70% 80% at 50% 100%,color-mix(in srgb,var(--sec) 22%,transparent),#0b0d14);border:1px solid color-mix(in srgb,var(--sec) 35%,var(--line))}
.mtok img{width:100%;height:100%;object-fit:cover}
.mtok svg{width:88%;height:88%;fill:#07080c}
.mtok .i{width:22px;height:22px}
.mtok.sm{width:36px;height:36px;border-radius:10px}
.mtok-btn{padding:0;border:0;background:none;cursor:pointer;border-radius:12px}
.mtok-btn:focus-visible{outline:2px solid var(--sec);outline-offset:2px}
.pl-order li.down .mtok{filter:grayscale(1) brightness(.55)}
.linkbtn.mname{font:inherit;font-weight:700;color:inherit;text-decoration:underline dotted;text-underline-offset:3px;padding:0;background:none;border:0;cursor:pointer}
.mdmg{color:var(--sec)}
.mlist{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.mrow{display:flex;align-items:center;gap:10px;padding:6px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 70%,transparent)}
.mrow-n{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-decoration:none}
.mrow-n small{opacity:.7;font-size:12px}
.mrow .iconbtn.on{color:var(--sec)}
.mchosen{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;border:1px solid var(--sec);margin-bottom:10px}
.mchosen div{flex:1;display:flex;flex-direction:column}
.mchosen small{opacity:.7}
.mphoto{cursor:pointer}
.mpick .eyebrow{margin:0 0 4px}
.md-wrap.md-wide .md{max-width:min(860px,calc(100vw - 32px))}
.md-mon .statblock{margin:0;box-shadow:none}
.mon-save-slot{position:relative;z-index:3;display:flex;justify-content:flex-end;margin-bottom:6px}
.pb-tools .tb-acc{height:38px;margin:0 4px 0 0}
.home-acc{display:flex;justify-content:flex-end;margin:0 0 10px}
@media (max-width:999px){.home-acc{display:none}}
.view{position:relative}

/* ---------- Elsa ---------- */
.el-head{display:flex;gap:22px;align-items:center;padding:20px;margin-bottom:16px;overflow:hidden;position:relative}
.el-portrait{width:132px;height:132px;flex:none;border-radius:50%;padding:4px;background:conic-gradient(from 200deg,var(--sec),color-mix(in srgb,var(--sec) 20%,transparent),var(--sec));box-shadow:0 0 40px color-mix(in srgb,var(--sec) 35%,transparent)}
.el-portrait img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.el-intro{min-width:0}
.el-intro h1{margin:2px 0 6px}
.el-intro p{margin:0;max-width:60ch;opacity:.85}
.el-intro .eyebrow{opacity:1}
@media (max-width:640px){.el-head{gap:14px;padding:14px}.el-portrait{width:76px;height:76px;padding:3px}.el-intro h1{font-size:1.5rem;margin:0 0 4px}.el-intro p{font-size:14px;line-height:1.45}}
.el-face{width:36px;height:36px;flex:none;border-radius:50%;overflow:hidden;border:2px solid color-mix(in srgb,var(--sec) 60%,transparent);box-sizing:border-box}
.el-face img{width:100%;height:100%;object-fit:cover;display:block}
.el-msg{align-items:flex-start;gap:10px}
.el-msg .ak-b p{margin:0 0 8px}.el-msg .ak-b p:last-child{margin-bottom:0}
.el-msg .ak-b ul{margin:4px 0 8px;padding-left:20px}
.el-ref{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;margin:0 1px;border-radius:6px;font-size:11px;font-weight:700;vertical-align:1px;background:color-mix(in srgb,var(--sec) 22%,transparent);color:var(--sec);text-decoration:none}
.el-src{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px;padding-top:8px;border-top:1px dashed var(--line);font-size:12px}
.el-src>span{opacity:.7}
.el-src .chip.sm{font-size:12px;padding:3px 9px}
.el-src .chip b{color:var(--sec);margin-right:2px}
.el-err{border-color:color-mix(in srgb,#ff8a7a 50%,var(--line))}
.ak-b.el-typing{display:flex;flex-direction:row;align-items:center;gap:5px}
.el-typing span{width:7px;height:7px;border-radius:50%;background:var(--sec);animation:elDot 1.1s infinite ease-in-out}
.el-typing span:nth-child(2){animation-delay:.15s}.el-typing span:nth-child(3){animation-delay:.3s}
.el-typing em{margin-left:8px;font-style:normal;opacity:.75;font-size:13px}
@keyframes elDot{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-5px);opacity:1}}
@media (prefers-reduced-motion:reduce){.el-typing span{animation:none}}
/* Elsa floating button beside the dice, and her chat panel */
.el-fab{position:fixed;right:calc(max(20px,env(safe-area-inset-right,0px)) + 66px);bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:45;display:inline-flex;align-items:center;gap:8px;height:54px;padding:4px 16px 4px 4px;border-radius:999px;border:1px solid rgba(224,178,90,.55);background:radial-gradient(circle at 30% 30%,#24301f,#0d110b);color:#f3e6c4;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 4px color-mix(in srgb,var(--bg) 60%,transparent)}
.el-fab .el-face{width:44px;height:44px;border-color:#E0B25A}
.el-fab:hover{border-color:#E0B25A;box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 18px rgba(224,178,90,.35)}
.el-fab[aria-expanded="true"]{border-color:#E0B25A}
.totop{right:calc(max(20px,env(safe-area-inset-right,0px)) + 196px)}
.elp{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(90px + env(safe-area-inset-bottom,0px));z-index:60;width:min(410px,calc(100vw - 32px));height:min(600px,calc(100vh - 140px));display:flex;flex-direction:column;padding:0;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.55);animation:view-in .2s ease}
.elp[hidden]{display:none}
.elp-h{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;border-bottom:1px solid var(--line)}
.elp-h div{flex:1;display:flex;flex-direction:column;line-height:1.2}
.elp-h small{opacity:.65;font-size:12px}
#elp-body{flex:1;min-height:0;display:flex;flex-direction:column}
.elp-log{flex:1;min-height:0;overflow-y:auto;padding:12px;border:0;border-radius:0;background:none;box-shadow:none;margin:0;max-height:none}
.elp-log .chips{gap:6px}.elp-log .chip{font-size:12px}
.elp-form{padding:10px;border-top:1px solid var(--line);margin:0;display:flex;gap:8px;align-items:flex-end}
.elp-form textarea{flex:1;min-height:44px;resize:none}
.elp-form .btn{height:44px;width:48px;padding:0;justify-content:center}
@media (max-width:999px){
  .el-fab{right:max(12px,env(safe-area-inset-right,0px));bottom:calc(76px + env(safe-area-inset-bottom,0px));height:50px;padding:3px}
  .el-fab .el-fab-t{display:none}
  .el-fab .el-face{width:42px;height:42px}
  .totop{right:calc(max(12px,env(safe-area-inset-right,0px)) + 60px)}
  .elp{right:max(12px,env(safe-area-inset-right,0px));left:max(12px,env(safe-area-inset-left,0px));width:auto;bottom:calc(136px + env(safe-area-inset-bottom,0px));height:min(560px,calc(100vh - 220px))}
}

/* ---------- 3D dice ---------- */
.d3host{position:fixed;inset:0;visibility:hidden;pointer-events:none}
.dtable.d3 .d3host{position:absolute;inset:0;visibility:visible}
.dtable.d3 .d3host canvas{display:block}
.dtable.d3{justify-content:flex-start;padding:0;background:radial-gradient(90% 75% at 50% 50%,rgba(20,15,22,.9),rgba(3,2,5,.97))}
.dtable.d3 .dt-res{position:absolute;left:50%;top:calc(10px + env(safe-area-inset-top,0px));transform:translate(-50%,-8px);z-index:2;min-height:0;padding:8px 26px 10px;box-shadow:0 10px 40px rgba(0,0,0,.55)}
.dtable.d3 .dt-res.show{transform:translate(-50%,0)}
.dtable.d3 .dt-res b{font-size:3.4rem}
.dtable.d3 .dt-hint{position:absolute;left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom,0px));text-align:center;z-index:2;margin:0}
.dtable.dq{background:rgba(3,2,5,.35);transition:opacity .15s ease}
.dtable.dq .dt-res{box-shadow:0 18px 60px rgba(0,0,0,.6);border:1px solid rgba(224,178,90,.35);animation:dq-pop .22s cubic-bezier(.2,1.4,.4,1)}
@keyframes dq-pop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.dtable.dq .dt-res{animation:none}}

/* ---------- audit fixes: room for floating buttons, bigger touch targets, recovery code ---------- */
.view{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
@media (max-width:999px){.view{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}}
@media (pointer:coarse){
  .prose a.xref,.view a.xref,button.roll,button.cond,.view .linkbtn{padding-block:7px;margin-block:-7px}
  button.roll{padding-inline:5px;margin-inline:-3px}
}
.rc-code{font:700 1.6rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-align:center;padding:16px;border-radius:12px;border:1px dashed var(--sec);background:var(--panel);user-select:all;margin:10px 0}
.el-hero{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;font-size:14px;color:var(--muted)}
.el-hero .i{width:18px;height:18px;color:var(--sec)}
.el-hero select{width:auto;flex:1;min-width:160px;max-width:360px;padding:6px 10px}
.elp .el-hero{margin:0;padding:8px 12px;border-bottom:1px solid var(--line)}
/* character sheet on phones: experience folds into one line, actions get compact */
.xp-sum{display:none}
@media (max-width:640px){
  .cs-head .xp{display:none}
  .cs-head.xp-open .xp{display:block}
  .xp-sum{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;width:100%;margin-top:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:14px;text-align:left;cursor:pointer}
  .xp-sum>span:first-child{flex:1;min-width:0}
  .xp-sum .xpbar{order:3;flex-basis:100%;height:5px}
  .xp-sum-a{display:inline-flex;align-items:center;gap:4px;color:var(--sec);font-weight:700}
  .xp-sum-a .i{width:16px;height:16px}
  .cs-head.xp-open .xp-sum-a{opacity:.5}
  .cs-acts{gap:6px;justify-content:flex-start}
  .cs-acts .btn{padding:8px 11px;font-size:13px}
  .cs-acts .saved{flex-basis:100%}
}
/* navigation groups */
.nav-g{margin:14px 12px 4px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--rail-ink,#cfc6b4) 55%,transparent)}
.nav .nav-g:first-of-type{margin-top:10px}
.nav a{padding-block:8px}
@media (max-height:820px){.nav a{padding-block:6px}.nav-g{margin-top:10px}}
.el-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;border:1px solid var(--line);background:var(--panel);margin:0 0 14px}
.el-tabs>*{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none}
.el-tabs .i{width:16px;height:16px}
.el-tabs .on{background:var(--sec);color:var(--bg)}
/* account button: one brand colour everywhere, quieter on phones */
.tb-acc:not(.in){background:#E0B25A;color:#1a1408;border-color:#E0B25A}
.tb-acc.in{border-color:rgba(224,178,90,.55);color:var(--ink)}
.tb-acc .i{color:inherit}
@media (max-width:640px){.tb-acc:not(.in){background:transparent;color:#E0B25A;border-color:rgba(224,178,90,.6);padding:0 10px}.tb-acc:not(.in) span{display:none}}
.rail{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
@media (max-width:640px){
  .cs-acts{display:grid!important;grid-template-columns:1fr 1fr 1fr auto;gap:6px}
  .cs-acts .saved{grid-column:1/-1}
  .cs-acts .btn{padding:9px 6px!important;font-size:12.5px!important;justify-content:center;white-space:nowrap;min-width:0}
  .cs-acts .btn .i{width:14px;height:14px}
}
.pl-log .pl-loglist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto}
.pl-loglist li{display:flex;gap:10px;font-size:14px;line-height:1.4}
.pl-loglist time{flex:none;font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px;padding-top:2px}
.pl-mact .btn.sm{padding:6px 10px;font-size:12.5px}
.pl-mact .btn.sm .i{width:14px;height:14px}
/* advantage toggle above the sheet, danger zone, notifications */
.cs-advrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.cs-advrow .muted{font-size:13px}
.cs-adv button[aria-pressed=true][data-v="1"]{background:color-mix(in srgb,#3fae6a 22%,transparent);color:var(--ink)}
.cs-adv button[aria-pressed=true][data-v="-1"]{background:color-mix(in srgb,#d9534f 22%,transparent);color:var(--ink)}
html[data-adv="1"] .cs-core .roll.d20,html[data-adv="1"] .cs-abil .roll.d20,html[data-adv="1"] .cs-skills .roll.d20{box-shadow:inset 0 0 0 1.5px #3fae6a}
html[data-adv="-1"] .cs-core .roll.d20,html[data-adv="-1"] .cs-abil .roll.d20,html[data-adv="-1"] .cs-skills .roll.d20{box-shadow:inset 0 0 0 1.5px #d9534f}
.acc-danger{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.btn.danger{background:#a3312c;border-color:#a3312c;color:#fff}
.btn.danger:hover{background:#8b2622}
/* static pages for search engines: shown only until the app takes over (and to crawlers) */
.seo{max-width:760px;margin:0 auto;padding:24px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px));font:16px/1.6 Alegreya Sans,system-ui,sans-serif;color:#e8e2d4;background:#0E1116}
.seo a{color:#E3B65C}.seo h1{font:700 32px/1.2 Kurale,Georgia,serif;margin:8px 0 14px;text-wrap:balance}.seo h2{font:700 21px/1.3 Kurale,Georgia,serif;margin:22px 0 8px}.seo h3{font-size:17px;margin:16px 0 6px}
.seo-en{font-size:.55em;color:#a59f92;font-weight:400}.seo-nav{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;margin-bottom:12px}.seo-bc{font-size:13px;color:#a59f92}
.seo-lead{font-size:18px;color:#d6cfbf}.seo-dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:12px 0}.seo-dl dt{color:#a59f92}.seo-dl dd{margin:0}
.seo table{border-collapse:collapse;margin:10px 0;display:block;overflow-x:auto}.seo th,.seo td{border:1px solid #2a3040;padding:4px 8px;text-align:left}.seo-img{float:right;max-width:40%;height:auto;margin:0 0 10px 14px;border-radius:12px}
.seo-list{columns:2;padding-left:18px}.seo-list small{color:#a59f92}.seo-foot{margin-top:30px;font-size:12.5px;color:#8f897c}
@media (max-width:560px){.seo-list{columns:1}.seo-img{float:none;max-width:100%}}

/* ===================== Home v3: aurora hero, section bento, play row ===================== */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.hx-hero{padding:56px 48px 44px;margin-bottom:34px;background:linear-gradient(160deg,#17151F,#0E1017 55%,#08090D)}
.hx-aurora{position:absolute;inset:-30%;z-index:-2;pointer-events:none;filter:blur(40px) saturate(1.25);opacity:.9}
.hx-aurora i{position:absolute;width:55%;height:60%;border-radius:50%;mix-blend-mode:screen}
.hx-aurora i:nth-child(1){left:8%;top:18%;background:radial-gradient(closest-side,rgba(184,156,255,.42),transparent);animation:hxa1 18s ease-in-out infinite alternate}
.hx-aurora i:nth-child(2){left:42%;top:4%;background:radial-gradient(closest-side,rgba(224,178,90,.38),transparent);animation:hxa2 22s ease-in-out infinite alternate}
.hx-aurora i:nth-child(3){left:30%;top:42%;background:radial-gradient(closest-side,rgba(94,203,190,.26),transparent);animation:hxa3 26s ease-in-out infinite alternate}
@keyframes hxa1{to{transform:translate(18%,10%) scale(1.15)}}
@keyframes hxa2{to{transform:translate(-14%,16%) scale(.9)}}
@keyframes hxa3{to{transform:translate(12%,-18%) scale(1.2)}}
.hx-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(224,178,90,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(224,178,90,.07) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(70% 80% at 30% 40%,#000,transparent);mask-image:radial-gradient(70% 80% at 30% 40%,#000,transparent)}
.hx-title{font-size:clamp(2.6rem,6vw,4.6rem)!important;letter-spacing:-.01em;background:linear-gradient(100deg,#F6EBD2 20%,#F2C35E 40%,#FFF4D8 50%,#E0B25A 60%,#F6EBD2 80%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent!important;animation:hxshine 7s ease-in-out infinite;text-shadow:none!important;filter:drop-shadow(0 4px 30px rgba(224,178,90,.25))}
@keyframes hxshine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.hx-hero .lede{color:#CFC6B4!important;font-size:1.18rem}
.hx-stats{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px}
.hx-stats span{display:flex;align-items:baseline;gap:7px;color:#A9A193;font-size:.92rem}
.hx-stats b{font-family:var(--f-display);font-size:1.7rem;color:#F6EBD2;font-weight:400;font-variant-numeric:tabular-nums}
.hx-hero .bigsearch{transition:transform .25s,box-shadow .25s}
.hx-hero .bigsearch:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 0 2px rgba(224,178,90,.6)}

.hx-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:8px 2px 14px}
.hx-head h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:1.9rem}
.hx-head span{color:var(--muted);font-size:.95rem}

.hx-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;margin-bottom:36px}
.hx-card{grid-column:span 4;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:6px;min-height:178px;padding:20px 20px 18px;border-radius:18px;
  color:var(--ink);text-decoration:none;background:linear-gradient(150deg,color-mix(in srgb,var(--sec) 16%,var(--panel)),var(--panel) 60%);border:1px solid color-mix(in srgb,var(--sec) 22%,var(--line));
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;animation:hxrise .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 55ms)}
.hx-card.w7{grid-column:span 7}.hx-card.w5{grid-column:span 5}.hx-card.w4{grid-column:span 4}
@keyframes hxrise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.hx-card::before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;z-index:2;pointer-events:none;opacity:0;transition:opacity .35s;
  background:conic-gradient(from var(--ang),transparent 0 60%,var(--sec) 75%,#fff8 80%,var(--sec) 85%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:hxspin 4s linear infinite}
@keyframes hxspin{to{--ang:360deg}}
.hx-glow,.hx-play .hx-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,30%),color-mix(in srgb,var(--sec) 28%,transparent),transparent 65%)}
.hx-card:hover,.hx-card:focus-visible{transform:translateY(-4px);border-color:color-mix(in srgb,var(--sec) 55%,var(--line));box-shadow:0 22px 50px -24px color-mix(in srgb,var(--sec) 75%,transparent)}
.hx-card:hover::before,.hx-card:hover .hx-glow,.hx-card:focus-visible::before{opacity:1}
.hx-top{display:flex;align-items:center;justify-content:space-between}
.hx-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--sec);background:color-mix(in srgb,var(--sec) 16%,transparent);border:1px solid color-mix(in srgb,var(--sec) 32%,transparent);transition:transform .35s}
.hx-ic svg{width:23px;height:23px}
.hx-card:hover .hx-ic{transform:rotate(-8deg) scale(1.08)}
.hx-n{font-family:var(--f-display);font-size:2.1rem;line-height:1;color:var(--sec);font-variant-numeric:tabular-nums;opacity:.9}
.hx-t{font-family:var(--f-display);font-size:1.55rem;margin-top:8px}
.hx-d{color:var(--muted);font-size:.95rem;max-width:46ch}
.hx-go{position:absolute;right:16px;bottom:14px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--sec);border:1px solid color-mix(in srgb,var(--sec) 35%,transparent);opacity:.6;transition:transform .35s,opacity .35s,background .35s}
.hx-go svg{width:16px;height:16px}
.hx-card:hover .hx-go{opacity:1;transform:translateX(3px);background:color-mix(in srgb,var(--sec) 18%,transparent)}
.hx-emb,.hx-sch,.hx-mon,.hx-rar,.hx-chips{margin-top:auto;padding-top:12px;padding-right:42px}
.hx-emb{display:flex;flex-wrap:wrap;gap:6px}
.hx-emb>span{width:34px;height:38px;display:grid;place-items:center;transition:transform .3s}
.hx-emb>span>*{max-width:100%;max-height:100%}
.hx-card:hover .hx-emb>span{transform:translateY(-3px)}
.hx-card:hover .hx-emb>span:nth-child(2n){transform:translateY(2px)}
.hx-sch{display:flex;flex-wrap:wrap;gap:6px}
.hx-sch span{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;padding:4px 9px;border-radius:999px;background:color-mix(in srgb,var(--c) 14%,transparent);color:color-mix(in srgb,var(--c) 70%,var(--ink))}
.hx-sch i{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.hx-mon{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hx-mon span{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#000}
.hx-mon img{width:100%;height:100%;object-fit:cover;transition:transform .6s;display:block}
.hx-mon b{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 5px;font-size:.72rem;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.8));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-card:hover .hx-mon img{transform:scale(1.08)}
.hx-rar{display:flex;gap:8px}
.hx-rar i{flex:1;height:8px;border-radius:4px;background:var(--c);box-shadow:0 0 12px -2px var(--c);transform-origin:left;animation:hxbar 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.4s + var(--k,0) * 80ms)}
.hx-rar i:nth-child(2){--k:1}.hx-rar i:nth-child(3){--k:2}.hx-rar i:nth-child(4){--k:3}.hx-rar i:nth-child(5){--k:4}.hx-rar i:nth-child(6){--k:5}
@keyframes hxbar{from{transform:scaleX(0)}}
.hx-chips{display:flex;flex-wrap:wrap;gap:6px}

.hx-plays{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.hx-play{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;text-decoration:none;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);transition:transform .3s,border-color .3s,box-shadow .3s;animation:hxrise .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.35s + var(--i) * 60ms)}
.hx-play:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--sec) 55%,var(--line));box-shadow:0 18px 40px -22px color-mix(in srgb,var(--sec) 70%,transparent)}
.hx-play:hover .hx-glow{opacity:1}
.hx-play b{display:block;font-size:1.05rem}.hx-play small{display:block;color:var(--muted);font-size:.84rem;line-height:1.35;margin-top:2px}
.hx-play .hx-ic{flex:none;width:42px;height:42px}
.hx-elsa{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px color-mix(in srgb,var(--sec) 60%,transparent),0 0 18px -2px var(--sec)}
.hx-pitch{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:stretch;margin-bottom:36px;padding:20px;border-radius:18px;border:1px dashed color-mix(in srgb,var(--accent) 35%,var(--line));
  background:linear-gradient(120deg,color-mix(in srgb,var(--c-races) 7%,transparent),transparent 40%,color-mix(in srgb,var(--c-bestiary) 7%,transparent))}
.hx-who h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:1.08rem;color:var(--sec)}
.hx-who h3 svg{width:20px;height:20px}
.hx-who ul{margin:0;padding-left:18px;color:var(--muted);font-size:.93rem;display:grid;gap:5px}
.hx-cta{display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:220px}
.hx-cta p{margin:0;color:var(--muted);font-size:.9rem}
.hx-mine{margin-bottom:24px}

@media (max-width:1100px){
  .hx-card.w7,.hx-card.w5{grid-column:span 6}.hx-card.w4{grid-column:span 6}
  .hx-plays{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hx-pitch{grid-template-columns:1fr 1fr}.hx-cta{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
}
@media (max-width:640px){
  .hx-hero{padding:28px 18px 24px;margin-bottom:24px}
  .hx-stats{gap:6px 16px;margin-top:16px}.hx-stats b{font-size:1.3rem}
  .hx-bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hx-card.w7,.hx-card.w5{grid-column:1 / -1}.hx-card.w4{grid-column:span 1}
  .hx-card{min-height:0;padding:16px 14px 14px;border-radius:16px}
  .hx-card.w4 .hx-d{display:none}.hx-card.w4 .hx-t{font-size:1.2rem}.hx-card.w4 .hx-go{display:none}
  .hx-card.w4 .hx-n{font-size:1.5rem}
  .hx-t{font-size:1.35rem}
  .hx-plays{grid-template-columns:1fr;gap:8px}
  .hx-pitch{grid-template-columns:1fr;padding:16px}
  .hx-head h2{font-size:1.6rem}
}
@media (prefers-reduced-motion:reduce){
  .hx-aurora i,.hx-title,.hx-card,.hx-card::before,.hx-play,.hx-rar i{animation:none!important}
}
:root.day .hx-card,:root[data-theme="light"] .hx-card{background:linear-gradient(150deg,color-mix(in srgb,var(--sec) 12%,var(--panel)),var(--panel) 60%)}
@media (max-width:640px){
  .hx-card.cmp{grid-column:span 1!important}
  .hx-card.cmp .hx-d,.hx-card.cmp .hx-go{display:none}.hx-card.cmp .hx-t{font-size:1.2rem}.hx-card.cmp .hx-n{font-size:1.5rem}
  .prose.illum>p:first-child::first-letter{float:none;font:inherit;margin:0;padding:0;border:0;box-shadow:none;background:none;color:inherit;text-shadow:none}
}
/* floating buttons hide while scrolling down on phones and tablets */
@media (max-width:999px){
  .el-fab,.dice-fab,.totop,.qk-fab{transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s}
  html.fab-hide .el-fab,html.fab-hide .dice-fab,html.fab-hide .totop,html.fab-hide .qk-fab{transform:translateY(160%)!important;opacity:0!important;pointer-events:none!important}
}
/* image placeholders: a soft shimmer instead of a black square while a picture loads */
img.art-th,img.art-img,.hx-mon span{background:linear-gradient(110deg,var(--panel2) 30%,color-mix(in srgb,var(--sec) 16%,var(--panel2)) 50%,var(--panel2) 70%) 0 0/220% 100%;animation:skel 1.6s linear infinite}
@keyframes skel{to{background-position:-220% 0}}
@media (prefers-reduced-motion:reduce){img.art-th,img.art-img,.hx-mon span{animation:none}}
/* guest previews on Campaigns and Elsa */
.demo-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;align-items:center;margin-top:8px}
.demo-copy h2{font-family:var(--f-display);font-weight:400;font-size:2rem;line-height:1.15;margin:4px 0 16px;text-wrap:balance}
.demo-copy .eyebrow{color:var(--sec)}
.demo-steps{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px}
.demo-steps li{display:flex;gap:14px;align-items:flex-start;animation:hxrise .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 90ms)}
.demo-steps b{display:block}.demo-steps small{display:block;color:var(--muted);font-size:.9rem}
.demo-steps .hx-ic{flex:none;width:40px;height:40px}
.demo-list{margin:0 0 20px;padding-left:18px;display:grid;gap:7px;color:var(--muted)}
.demo-shot{position:relative;border-radius:20px;padding:18px;background:linear-gradient(150deg,color-mix(in srgb,var(--sec) 14%,var(--panel)),var(--panel));border:1px solid color-mix(in srgb,var(--sec) 30%,var(--line));
  box-shadow:0 30px 70px -30px color-mix(in srgb,var(--sec) 60%,transparent);transform:perspective(1200px) rotateY(-6deg) rotateX(3deg);transition:transform .6s cubic-bezier(.2,.8,.2,1);animation:hxrise .8s .1s both}
.demo-shot:hover{transform:none}
.dm-bar{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted);margin-bottom:10px}
.dm-live{display:inline-flex;align-items:center;gap:7px;color:var(--c-campaign);font-weight:600}
.dm-live i{width:8px;height:8px;border-radius:50%;background:var(--c-campaign);box-shadow:0 0 0 0 var(--c-campaign);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.dm-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dm-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:12px;background:var(--panel2);border:1px solid var(--line)}
.dm-row.turn{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 24px -6px var(--accent)}
.dm-ini{width:26px;text-align:center;font-family:var(--f-display);font-size:1.15rem}
.dm-row img,.dm-av{width:36px;height:36px;border-radius:10px;object-fit:cover;flex:none}
.dm-av{display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5a4520,#1f180c);color:#F2C35E;font-family:var(--f-display)}
.dm-n{flex:1;min-width:0}.dm-n b{display:block;font-size:.95rem}.dm-n small{color:var(--muted);font-size:.8rem}.dm-n small.hurt{color:var(--accent)}
.dm-log{display:grid;gap:3px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.dm-log b{color:var(--ink);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.el-demo{display:grid;gap:12px}
.el-q{justify-self:end;max-width:80%;padding:10px 14px;border-radius:16px 16px 4px 16px;background:color-mix(in srgb,var(--sec) 22%,var(--panel2));font-size:.94rem}
.el-q:last-child{opacity:.55}
.el-a{display:flex;gap:10px;align-items:flex-start}.el-a img{width:34px;height:34px;border-radius:50%;flex:none;object-fit:cover}
.el-a>div{padding:10px 14px;border-radius:16px 16px 16px 4px;background:var(--panel2);border:1px solid var(--line);font-size:.92rem}.el-a p{margin:0 0 6px}.el-a p:last-child{margin:0}
.demo-elsa{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);margin-top:14px}
@media (max-width:900px){.demo-wrap,.demo-elsa{grid-template-columns:1fr}.demo-shot{transform:none}.demo-elsa .demo-shot{order:2}}
@media (prefers-reduced-motion:reduce){.demo-shot,.demo-steps li{animation:none;transform:none}}
.demo-copy .ed-actions{justify-content:flex-start}
@media (max-width:640px){.spell .prose.illum>p:first-child::first-letter{color:inherit;border:0;box-shadow:none;text-shadow:none;background:none}}
/* owner stats */
.st-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.st-kpi>div{padding:16px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
.st-kpi b{display:block;font-family:var(--f-display);font-size:2rem;font-weight:400;color:var(--accent)}.st-kpi span{color:var(--muted);font-size:.88rem}
.st-card{margin-bottom:14px}.st-card h2{display:flex;justify-content:space-between;align-items:center;gap:10px}
.st-chart{width:100%;height:160px;display:block}.st-chart rect{fill:var(--accent);opacity:.85}.st-chart rect:hover{opacity:1}
.st-ax{display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem}
.st-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.st-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.st-list li{display:grid;grid-template-columns:minmax(0,9rem) 1fr auto;gap:10px;align-items:center;font-size:.92rem}
.st-list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.st-list i{height:8px;border-radius:4px;width:var(--w);background:color-mix(in srgb,var(--accent) 70%,transparent)}
.st-errs ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}.st-errs li{display:grid;gap:3px}.st-errs span{color:var(--muted);font-size:.82rem}
.st-errs code{white-space:pre-wrap;font-size:.75rem;color:var(--muted);overflow-x:auto}
@media (max-width:760px){.st-kpi{grid-template-columns:1fr 1fr}.st-grid{grid-template-columns:1fr}}
.share-in{width:100%;box-sizing:border-box}
/* readability and keyboard focus */
:root:not(.day):not([data-theme="light"]){--muted:#AAA8B0}
:root.day,:root[data-theme="light"]{--muted:#5E513F}
:focus-visible{outline:2px solid var(--sec,var(--accent));outline-offset:2px;border-radius:6px}
.hx-card:focus-visible,.hx-play:focus-visible{outline-offset:3px}
.st-card{padding:18px 20px}
/* DM tools: conditions, encounter builder, DM screen, homebrew */
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:640px){.row3{grid-template-columns:1fr 1fr}}
.cond-row{display:flex;flex-wrap:wrap;gap:4px;width:100%;order:9;padding-left:calc(26px + 48px)}
.pl-order li{flex-wrap:wrap}
.cond{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:.76rem;font-weight:600;color:var(--ink);text-decoration:none;
  background:color-mix(in srgb,var(--c-feats) 20%,transparent);border:1px solid color-mix(in srgb,var(--c-feats) 45%,transparent);cursor:pointer;font-family:inherit}
.cond i{font-style:normal;opacity:.7}
.cond-add{opacity:.55}.cond-add:hover{opacity:1}
.cond-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:12px}
.cond-pick{position:relative}.cond-pick input{position:absolute;opacity:0}
.cond-pick span{display:block;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);font-size:.88rem;cursor:pointer;text-align:center}
.cond-pick input:checked+span{border-color:var(--c-feats);background:color-mix(in srgb,var(--c-feats) 18%,var(--panel2))}
.cond-pick input:focus-visible+span{outline:2px solid var(--accent)}
@media (max-width:640px){.cond-grid{grid-template-columns:1fr 1fr}.cond-row{padding-left:0}}
.enc-saved{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.enc-pick{display:grid;gap:6px;margin:10px 0}
.enc-q{display:inline-flex;align-items:center;gap:8px}
.enc-meter{margin:6px 0 12px}
.enc-bar{position:relative;height:12px;border-radius:6px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
.enc-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;transition:width .4s cubic-bezier(.2,.8,.2,1);background:var(--c-races)}
.enc-bar.mod i{background:var(--c-magic)}.enc-bar.high i{background:var(--c-rules)}.enc-bar.deadly i{background:var(--c-bestiary);width:100%!important}
.enc-bar span{position:absolute;top:0;bottom:0;width:2px;background:var(--bg);opacity:.8}
.enc-lab{margin:8px 0 0;font-size:.9rem;color:var(--muted)}.enc-lab b{color:var(--ink)}
.enc-vis{align-self:end;padding-bottom:10px}
.md-side .md{max-width:560px}
.ds-tabs{margin-bottom:12px}
.ds-art{border-bottom:1px solid var(--line);padding:8px 0}.ds-art summary{cursor:pointer;font-weight:600}.ds-art .prose{font-size:.92rem;margin-top:6px}
.ds-tbl{width:100%;border-collapse:collapse;margin:6px 0 14px;font-size:.92rem}.ds-tbl td{padding:6px 8px;border-bottom:1px solid var(--line2)}
.hb-ty{margin:0 0 8px;color:var(--muted)}
.hb-ab{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:12px 0}
.hb-ab span{display:grid;justify-items:center;padding:8px 4px;border-radius:10px;background:var(--panel2);border:1px solid var(--line)}
.hb-ab small{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.hb-ab i{font-style:normal;color:var(--muted);font-size:.82rem}
.hb-abin{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
@media (max-width:640px){.hb-abin,.hb-ab{grid-template-columns:repeat(3,minmax(0,1fr))}}
.linkish{background:none;border:0;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.recap-ava{width:22px;height:22px;border-radius:50%;object-fit:cover;margin-right:6px;vertical-align:middle}
/* sheet: spell limits, cast, purse, carrying */
.sp-lim{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:4px 0 8px;font-size:.88rem;color:var(--muted)}
.sp-lim span{padding:3px 10px;border-radius:999px;background:var(--panel2);border:1px solid var(--line)}
.sp-lim .full{border-color:color-mix(in srgb,var(--c-races) 50%,var(--line));color:var(--ink)}
.sp-lim .over{border-color:var(--danger);color:var(--danger)}
.sp-lim em{color:var(--danger);font-style:normal}
.sp-cast{padding:4px 9px!important;font-size:.78rem!important}.sp-cast .i{width:13px;height:13px}
.purse{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 10px}
.coin{display:flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border-radius:999px;background:var(--panel2);border:1px solid var(--line)}
.coin span{font-size:.78rem;font-weight:700;color:var(--cc)}.coin input{width:58px;border:0;background:transparent;padding:4px;color:var(--ink);font:inherit;text-align:right}
.c-cp{--cc:#C98A5A}.c-sp{--cc:#B8C2CC}.c-ep{--cc:#8FC7B5}.c-gp{--cc:#E9C35E}.c-pp{--cc:#D9E2F2}
.purse-tot{color:var(--muted);font-size:.88rem;margin-left:4px}
.carry{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;margin:0 0 12px;font-size:.88rem;color:var(--muted)}
.carry .hpbar{height:6px}.carry b{color:var(--ink)}.carry em{grid-column:1 / -1;color:var(--danger);font-style:normal}
.carry.over .hpbar i{background:var(--danger)}
/* printing a hero sheet */
@media print{
  :root{--bg:#fff!important;--panel:#fff!important;--panel2:#f5f2ea!important;--ink:#111!important;--muted:#444!important;--line:#ccc!important;color-scheme:light}
  body{background:#fff!important;color:#111}
  .rail,.topbar,.pagebar,.tabbar,.el-fab,.dice-fab,.totop,.qk-fab,.qk-drawer,.cs-acts,.adder,.foot,.ver-bar,.fold-b,.row-del,.inv-del,.mv,.sp-cast,.xp-add,.xp-sum,.cs-advrow,#overlay,.embers,.toast,.av-cta,.hp-act,.rest{display:none!important}
  .main,.view{margin:0!important;padding:0!important;max-width:none!important}
  .card{box-shadow:none!important;border:1px solid #bbb!important;background:#fff!important;break-inside:avoid}
  .card::after,.card::before{display:none!important}
  .cs-grid{display:block!important}.cs-col{display:block!important}
  section.folded>*:not(h2){display:block!important}
  a{color:#111;text-decoration:none}
}
.roll-pops{position:fixed;left:50%;top:calc(70px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:60;display:grid;gap:8px;pointer-events:none;width:min(360px,calc(100vw - 32px))}
.roll-pop{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:16px;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(10px);border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));
  box-shadow:0 18px 40px -14px rgba(0,0,0,.6);animation:rpIn .55s cubic-bezier(.2,1.3,.4,1) both}
.roll-pop.out{animation:rpOut .45s ease forwards}
.rp-die{width:38px;height:38px;color:var(--accent);flex:none;animation:rpSpin .7s cubic-bezier(.2,.8,.2,1)}
.rp-die svg{width:100%;height:100%}
.rp-t{flex:1;min-width:0;display:grid}.rp-t small{color:var(--muted);font-size:.76rem}.rp-t b{font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rp-t i{font-style:normal;color:var(--muted);font-size:.76rem}
.rp-n{font-family:var(--f-display);font-size:2rem;line-height:1;color:var(--ink)}
.roll-pop.crit{border-color:#FFD36B;box-shadow:0 0 30px -4px rgba(255,200,90,.6)}.roll-pop.crit .rp-n{color:#FFD36B}
.roll-pop.fumble .rp-n{color:var(--danger)}
@keyframes rpIn{from{opacity:0;transform:translateY(-16px) scale(.92)}}
@keyframes rpOut{to{opacity:0;transform:translateY(-10px) scale(.96)}}
@keyframes rpSpin{from{transform:rotate(-200deg) scale(.6)}}
@media (prefers-reduced-motion:reduce){.roll-pop,.rp-die{animation:none}}
@media print{
  html,body,.shell,.main,.view{background:#fff!important;display:block!important;width:auto!important;min-height:0!important}
  .cs-todo,.cs-next,.lay-bar{display:none!important}
  .cs-head{grid-template-columns:1fr!important}
  .cs-n{border:0!important;background:none!important;color:#111!important;font-size:22pt!important}
  @page{margin:12mm}
}