:root{
  --bg:#EDF0EC; --surface:#FBFCFA; --surface-2:#F3F6F2; --ink:#1B2420; --muted:#5F6B66; --line:#D3DAD5;
  --accent:#2C6B5E; --accent-ink:#FFFFFF; --accent-soft:#DCEAE5; --brass:#8A6522; --danger:#A5412F; --focus:#2C6B5E;
  --r-common:#6D7571; --r-uncommon:#23813A; --r-rare:#2757B8; --r-very-rare:#7C38B3; --r-legendary:#B85C0C; --r-mundane:#8A938E;
  --shadow:0 1px 2px rgba(20,35,30,.06),0 4px 14px rgba(20,35,30,.06);
  --display:'Alegreya SC',Georgia,'Times New Roman',serif; --body:'Alegreya Sans','Segoe UI',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark; --bg:#101614; --surface:#172019; --surface-2:#1C2621; --ink:#E2E8E4; --muted:#97A59F; --line:#29342F;
  --accent:#62B3A0; --accent-ink:#0E1614; --accent-soft:#1E3530; --brass:#D6AF5E; --danger:#E0806C; --focus:#62B3A0;
  --r-common:#A9B1AD; --r-uncommon:#5CC46A; --r-rare:#76A2F2; --r-very-rare:#BE8DF2; --r-legendary:#F2A24D; --r-mundane:#8C9892;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25);}}
:root[data-theme="dark"]{
  color-scheme:dark; --bg:#101614; --surface:#172019; --surface-2:#1C2621; --ink:#E2E8E4; --muted:#97A59F; --line:#29342F;
  --accent:#62B3A0; --accent-ink:#0E1614; --accent-soft:#1E3530; --brass:#D6AF5E; --danger:#E0806C; --focus:#62B3A0;
  --r-common:#A9B1AD; --r-uncommon:#5CC46A; --r-rare:#76A2F2; --r-very-rare:#BE8DF2; --r-legendary:#F2A24D; --r-mundane:#8C9892;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25);}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:16px/1.45 var(--body);font-variant-numeric:tabular-nums}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:700;text-wrap:balance;margin:0;letter-spacing:.01em}
.wrap{max-width:1280px;margin:0 auto;padding-inline:16px;padding-block:0 40px}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
.topbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;max-width:1280px;margin:0 auto;padding:12px 16px}
.brand{display:flex;align-items:baseline;gap:10px;margin-right:auto}
.brand h1{font-size:1.45rem}
.brand small{color:var(--muted);font-size:.85rem}
.tabs,.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.tabs button,.seg button{border:0;background:none;color:var(--muted);font:500 .95rem var(--body);padding:6px 14px;border-radius:7px;cursor:pointer}
.tabs button[aria-selected="true"],.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.note{color:var(--muted);font-size:.9rem;margin:14px 0 0}
.layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:22px;margin-top:18px;align-items:start}
@media (max-width:900px){.layout{grid-template-columns:minmax(0,1fr)}}
.player .dm-only{display:none!important}
.player .layout{grid-template-columns:minmax(0,1fr)}
aside.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;gap:14px}
.panel h2{font-size:1.1rem}
.field{display:grid;gap:5px}
.field>label,.lbl{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
input[type=text],input[type=number],input[type=url],input[type=search],select{width:100%;font:inherit;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:7px 9px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:500 .88rem var(--body);padding:4px 10px;border-radius:999px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn{border:0;background:var(--accent);color:var(--accent-ink);font:700 1rem var(--body);padding:10px 16px;border-radius:9px;cursor:pointer;letter-spacing:.02em}
.btn.ghost{background:var(--surface-2);color:var(--ink);border:1px solid var(--line);font-weight:500}
.btn:hover{filter:brightness(1.06)}
.toggle{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.95rem}
.toggle input{width:18px;height:18px;accent-color:var(--accent);flex:none}
.sliders{display:grid;gap:4px}
.srow{display:grid;grid-template-columns:118px 1fr 26px;align-items:center;gap:8px;font-size:.93rem}
.srow input[type=range]{width:100%;accent-color:var(--accent)}
.srow output{text-align:right;font-weight:700}
.srow.off{opacity:.45}
.srow.changed span::after{content:" •";color:var(--brass)}
main{min-width:0;display:grid;gap:18px}
main>*{min-width:0}
[hidden]{display:none!important}
.hero{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.hero h2{font-size:2rem}
.hero .meta{color:var(--muted)}
.shopnav{display:flex;flex-wrap:wrap;gap:6px}
.shopnav button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:9px;padding:6px 10px;font:500 .95rem var(--body);cursor:pointer}
.shopnav button[aria-current="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.rank{font:700 .78rem var(--body);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:var(--shadow)}
.shophead{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-start;justify-content:space-between}
.shophead h3{font-size:1.6rem}
.shophead p{margin:2px 0 0;color:var(--muted)}
.keeper{display:grid;gap:6px;min-width:220px}
.haggle{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--surface-2);border:1px dashed var(--line);border-radius:10px;padding:10px 12px;margin-top:14px}
.haggle input{width:80px}
.haggle strong{color:var(--brass)}
.tbl{width:100%;border-collapse:collapse;margin-top:10px}
.tbl th{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.tbl td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl td.price{text-align:right;white-space:nowrap;font-weight:700;color:var(--brass)}
.tbl th.price{text-align:right}
.tbl tr:last-child td{border-bottom:0}
.scroll-x{overflow-x:auto}
.pill{display:inline-block;font:700 .72rem var(--body);letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:5px;color:var(--pc);border:1px solid color-mix(in srgb,var(--pc) 45%,transparent);background:color-mix(in srgb,var(--pc) 10%,transparent);white-space:nowrap}
.r-common{--pc:var(--r-common)}.r-uncommon{--pc:var(--r-uncommon)}.r-rare{--pc:var(--r-rare)}.r-very-rare{--pc:var(--r-very-rare)}.r-legendary{--pc:var(--r-legendary)}.r-mundane{--pc:var(--r-mundane)}
.iname{font-weight:700;text-decoration:none}
.iname:hover{text-decoration:underline}
.sub{color:var(--muted);font-size:.9rem}
.tag{display:inline-block;font-size:.75rem;font-weight:700;padding:1px 6px;border-radius:5px;margin-left:6px;vertical-align:1px}
.tag.stolen{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
.tag.att{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
s.old{color:var(--muted);font-weight:400;margin-right:6px}
section.block{margin-top:18px}
section.block h4{font:700 .8rem var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0}
details{border:1px solid var(--line);border-radius:10px;background:var(--surface);margin-top:14px}
details>summary{cursor:pointer;padding:10px 14px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:10px}
details>summary::-webkit-details-marker{display:none}
details>summary::after{content:"＋";color:var(--muted)}
details[open]>summary::after{content:"－"}
details .inner{padding:0 14px 12px}
.enchant{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:end;margin-top:8px}
.quote{font-size:1.05rem}
.quote b{color:var(--brass)}
.empty{color:var(--muted);font-style:italic;margin:10px 0 0}
/* loot */
.odds{display:flex;height:14px;border-radius:7px;overflow:hidden;border:1px solid var(--line);margin-top:8px}
.odds span{background:var(--pc);height:100%}
.oddslegend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:.88rem;color:var(--muted)}
.oddslegend i{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--pc);margin-right:5px;vertical-align:-1px}
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:1100px){.slots{grid-template-columns:minmax(0,1fr)}}
.slot h3{font-size:1.2rem;margin-bottom:8px}
.opt{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--surface);display:grid;gap:5px}
.opt+.opt{margin-top:10px}
.opt .top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.opt .price{color:var(--brass);font-weight:700;white-space:nowrap}
.why{font-size:.86rem;color:var(--accent)}
.why.wild{color:var(--muted)}
.consum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.consum{grid-template-columns:minmax(0,1fr)}}
.books{display:grid;gap:16px}
.bookgrp{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:4px 16px}
.bookgrp label{display:flex;gap:8px;align-items:center;font-size:.95rem}
.bookgrp input{accent-color:var(--accent)}
.muted{color:var(--muted)}
.roster{display:grid;gap:4px}
.rrow{display:grid;grid-template-columns:1fr 64px;gap:8px;align-items:center}
.rname{display:flex;flex-direction:column;align-items:flex-start;text-align:left;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:8px;padding:5px 9px;cursor:pointer;font:inherit}
.rname:hover{border-color:var(--accent)}
.rname .sub{font-size:.8rem}
.rrow input{text-align:center;font-weight:700}
.tbl.party{margin:0;min-width:1100px}
.tbl.party th[scope=row]{font-family:var(--display);font-size:1.05rem;white-space:nowrap;padding:12px}
.tbl.party thead th{background:var(--surface-2)}
.tbl.party th.grp{text-align:center;text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--ink);font-weight:700;border-left:1px solid var(--line)}
.tbl.party td{min-width:150px;font-size:.93rem}
.tbl.party td.rollc{min-width:92px;text-align:center}
.tbl.party td.rollc strong{font-size:1.4rem;font-family:var(--display)}
.tbl.party td.rollc .sub{font-size:.75rem;line-height:1.25}
.tbl.party tr.skip{opacity:.55}
.cell+.cell{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.cell .iname{display:block;line-height:1.25;margin-bottom:3px}
.match{display:block;font-size:.78rem;color:var(--accent);margin-top:2px}
.slotnote{font-size:.75rem;color:var(--muted);font-style:italic;margin-bottom:4px}
.cell>.pill,.itemcell>.pill{display:table;margin-bottom:4px;font-size:.66rem;padding:1px 6px}
.spell{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;margin:4px 0 2px;padding:4px 8px;border-radius:6px;background:var(--accent-soft);font-weight:700;font-size:1rem;line-height:1.3}
.spell a{color:var(--ink);text-decoration:none}
.spell a:hover{text-decoration:underline}
.spellmark{color:var(--accent)}
.spellmeta{font-weight:500;font-size:.8rem;color:var(--muted)}
.src{position:relative;cursor:help;border-bottom:1px dotted currentColor;white-space:nowrap}
#tip{position:fixed;z-index:50;background:var(--tip-bg,#1D1C21);color:var(--tip-ink,#F6F1E6);border:1px solid var(--tip-line,var(--accent));font-size:.82rem;font-weight:500;line-height:1.3;padding:6px 9px;border-radius:6px;max-width:260px;box-shadow:var(--shadow);pointer-events:none}
.hint{margin:0 0 4px;font-size:.8rem;color:var(--muted);font-style:italic}
.btn.stale{box-shadow:0 0 0 3px var(--accent-soft)}
.award{margin-top:6px;border:1px solid var(--accent);background:transparent;color:var(--accent);font:700 .78rem var(--body);padding:3px 10px;border-radius:999px;cursor:pointer}
.award[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.cell.is-awarded{background:var(--accent-soft);border-radius:8px;padding:6px;margin:-2px -6px}
.tag.awarded{background:var(--accent);color:var(--accent-ink);margin:6px 0 0;display:inline-block}
.awardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.awardgrid h3{font-size:1.3rem}
.awardgrid .cell+.cell{margin-top:10px}
.awardgrid .cell.is-awarded{background:none;padding:0;margin:0}
.waiting{text-align:center;padding:40px 18px}
.waitline{font-family:var(--display);font-size:1.5rem;margin:0 0 6px}
@media (prefers-reduced-motion:no-preference){.fresh{animation:fade .35s ease-out}@keyframes fade{from{opacity:.35}to{opacity:1}}}

/* ---------- app additions ---------- */
html,body{margin:0}
[hidden]{display:none!important}
.page{max-width:1280px;margin:0 auto;padding-inline:16px;padding-block:18px 48px;display:grid;gap:16px}
.page>*{min-width:0}
.topbar .brand a{color:inherit;text-decoration:none}
#who{display:flex;align-items:center;gap:10px}
.form{display:grid;gap:12px}
.stack{display:grid;gap:8px}
.btn.small{padding:5px 10px;font-size:.85rem}
.btn.danger,.btn.ghost.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}
.btn:disabled{opacity:.5;cursor:not-allowed}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);font:inherit;cursor:pointer;text-align:left}
.linkbtn:hover{text-decoration:underline}
/* tab bar: a full-width band directly under the header; each tab is a complete shape of its own, so the bar can wrap */
nav.tabs{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:-18px;padding:10px 12px;position:relative;z-index:4;border:0;border-radius:0;background:none;overflow:visible;border-image:var(--tab-band,linear-gradient(var(--surface),var(--surface))) fill 0/0/0 100vmax}
nav.tabs a{white-space:nowrap;padding:8px 18px;color:var(--muted);text-decoration:none;font-weight:700;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);margin:0}
nav.tabs a[aria-current="page"]{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.badge{display:inline-block;background:var(--brass);color:var(--surface);font:700 .72rem var(--body);border-radius:999px;padding:1px 7px;vertical-align:2px}
.cardhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.cardhead h3{font-size:1.3rem}
.acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.acts.end{justify-content:flex-end}
.tbl.roster{min-width:560px}
.clist{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.ccard{display:grid;gap:4px;text-decoration:none;color:var(--ink)}
.ccard:hover{border-color:var(--accent)}
.newc{display:flex;flex-wrap:wrap;gap:10px;align-items:end;max-width:560px}
.newc .field{flex:1 1 240px}
.login{max-width:440px}
.login .card{display:grid;gap:12px}
.linkcard{display:grid;gap:10px}
.linkrow{display:flex;flex-wrap:wrap;gap:8px}
.linkrow input{flex:1 1 280px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem}
.pendcard{border-color:var(--brass)}
.prow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.tbl.roster td{vertical-align:middle}
.rollin{width:70px;text-align:center;font-weight:700}
.editor .acts{margin-top:14px}
.lootgrid{display:grid;grid-template-columns:330px minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:900px){.lootgrid{grid-template-columns:minmax(0,1fr)}}
.lootgrid .panel{display:grid;gap:12px}
.rrow{display:grid;grid-template-columns:1fr 64px;gap:8px;align-items:center;padding:3px 0}
.rrow input{text-align:center;font-weight:700}
.card.flush{padding:0}
.empty-state{text-align:center;padding:36px 18px}
.settings{display:grid;gap:16px}
.danger-zone{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:10px}
.pick{display:grid;gap:3px;text-align:left;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:10px;padding:12px;cursor:pointer;font:inherit}
.pick:hover{border-color:var(--accent)}
.pick.new{border-style:dashed}
.notice{background:color-mix(in srgb,var(--brass) 12%,transparent);border:1px solid color-mix(in srgb,var(--brass) 40%,transparent);border-radius:8px;padding:8px 12px;margin:8px 0}
.rollbox{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--surface-2);border:1px dashed var(--line);border-radius:10px;padding:10px 12px;margin:10px 0}
.rollbox input{width:80px;text-align:center;font-weight:700;font-size:1.1rem}
details.prefs{margin-top:10px}
h3.section{font-size:1.25rem;margin-top:8px}
.card.mine{border-color:var(--accent)}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:9px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:min(560px,calc(100vw - 32px));z-index:60}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.error{background:var(--danger);color:#fff}

/* ---------- v2: character form ---------- */
.cform{gap:16px}
.fs{border:1px solid var(--line);border-radius:12px;padding:14px 16px 16px;margin:0;display:grid;gap:12px;background:var(--surface-2)}
.fs>legend{font-family:var(--display);font-weight:700;font-size:1.15rem;padding:0 6px;margin-left:-6px;color:var(--ink)}
.fs>.sub{margin:-4px 0 0}
.fs input[type=text],.fs input[type=number],.fs select{background:var(--surface)}
.fs .chip{background:var(--surface)}
.fs .chip[aria-pressed="true"]{background:var(--accent)}
.fsub{font:700 .82rem var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:6px 0 -4px;padding-top:10px;border-top:1px dashed var(--line)}
.classgrid{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:10px}
.classgrid .lvl input{text-align:center}
.castline{margin:0;font-size:.95rem;color:var(--ink);background:var(--accent-soft);border-radius:8px;padding:7px 10px}
.castline:empty{display:none}
details.adv{margin:0;background:transparent}
details.adv>summary{padding:6px 10px;font-weight:500;color:var(--muted);font-size:.9rem}
.field.narrow{max-width:320px}
.hint{margin:2px 0 0;font-size:.82rem;color:var(--muted);font-style:normal}
.tag.lvl{background:color-mix(in srgb,var(--brass) 16%,transparent);color:var(--brass);white-space:nowrap}
.formacts{margin-top:14px}
@media (max-width:560px){.row2.r2s{grid-template-columns:minmax(0,1fr)}.fs{padding:12px}}

/* ---------- roster ---------- */
.rosterlist{display:grid}
.rosterrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px 14px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.rosterrow:first-child{border-top:0}
.rr-roll{display:flex;align-items:center;gap:6px}
.rr-roll .lbl{font-size:.7rem}
.rr-acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;align-items:center}
@media (max-width:640px){.rosterrow{grid-template-columns:minmax(0,1fr) auto}.rr-acts{grid-column:1/-1;justify-content:flex-start}}

/* ---------- cursed (DM only) ---------- */
.cursed{display:inline-block;font:800 .72rem var(--body);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--danger);border-radius:5px;padding:2px 7px;margin:0 0 4px 6px;vertical-align:1px}
.cell>.cursed{margin-left:0;display:table}
.cell.is-cursed{box-shadow:inset 3px 0 0 var(--danger);padding-left:9px}
tr.is-cursed td:first-child{box-shadow:inset 3px 0 0 var(--danger)}

/* ---------- loot results ---------- */
.resulthead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.resulthead p{margin:0}
.lootlist{display:grid;gap:10px}
.lootchar{margin:0;border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
.lootchar>.lc-head,.lootchar .lc-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:12px 16px;font-weight:500}
.lootchar>summary.lc-head::after{margin-left:auto}
.lc-name{font-family:var(--display);font-size:1.15rem;font-weight:700;margin-right:auto}
.lc-name .sub{font-family:var(--body);font-weight:500}
.lc-roll strong{font-family:var(--display);font-size:1.25rem}
.lc-status{font-size:.9rem;font-weight:700;white-space:nowrap}
.lc-status.ok{color:var(--r-uncommon)}
.lc-status.no{color:var(--danger)}
.lootchar.skip{opacity:.6;border:1px solid var(--line)}
.lc-body{padding:0 16px 14px;display:grid;gap:12px;border-top:1px solid var(--line)}
.lc-group h4{font:700 .8rem var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:12px 0 8px}
.lc-group h4 .sub{text-transform:none;letter-spacing:0;font-weight:500;margin-left:6px}
.lc-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lc-slot{border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--surface-2);min-width:0}
.lc-slot h5{margin:0 0 6px;font:700 .74rem var(--body);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.lc-slot .cell.is-awarded{margin:0 -4px;padding:6px}
.oddsline{margin:0;font-size:.8rem}
@media (max-width:760px){.lc-slots{grid-template-columns:minmax(0,1fr)}.lootchar .lc-head{padding:10px 12px}.lc-body{padding:0 12px 12px}.lc-name{flex-basis:100%}}
.lootchar>summary.lc-head{list-style:none}

/* ---------- dialogs ---------- */
dialog{border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);padding:20px;max-width:min(520px,calc(100vw - 32px));box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(10,20,16,.55)}
dialog h3{font-size:1.3rem;margin-bottom:10px}
dialog p{margin:8px 0}
dialog .acts{margin-top:16px}
.qrdlg{text-align:center}
.qrbox{background:#fff;border-radius:10px;padding:6px;margin:12px auto;width:min(340px,70vw)}
.qrbox svg{display:block;width:100%;height:auto}
.qrdlg form{margin-top:8px}

/* ---------- shops ---------- */
.shopcard{display:grid;gap:4px}
.shophead .btn{margin-top:8px}
.haggle .full{flex-basis:100%;margin:0}
.stocktbl{margin-top:4px}
.typecol{width:28%}
.rankbox{margin:0}
.rankbox .inner{display:grid;gap:8px}
.rollset{margin:0}
.panel hr{margin:0}
@media (max-width:560px){.srow{grid-template-columns:100px 1fr 22px}.shophead h3{font-size:1.35rem}.keeper{min-width:0;width:100%}}
.market,#p-shops{display:grid;gap:14px;min-width:0}
#p-shops .hero h2{font-size:1.7rem}

/* ---------- homebrew ---------- */
.navlink{color:var(--ink);text-decoration:none;font-weight:700;font-size:.95rem}
.navlink:hover{color:var(--accent)}
@media (max-width:560px){.who-email{display:none}}
.lead{margin:0;max-width:75ch}
.hbtools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.hbtools input[type=search]{flex:1 1 220px;width:auto;font:inherit;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:7px 9px}
.hbtools select{width:auto;flex:0 1 240px}
.hblist{display:grid}
.hbrow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 14px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.hblist .hbrow:first-child{border-top:0}
.hb-main{min-width:0;flex:1 1 260px}
.hb-main>.pill{margin-right:6px}
.hb-main .iname{font-weight:700}
.hb-where{font-size:.82rem}
.hbgone{margin-top:12px}
.chips.picked{margin-top:6px}
.chips.picked:empty{display:none}
.src.hb{border-bottom:0;cursor:help;font-weight:700;color:var(--brass);background:color-mix(in srgb,var(--brass) 14%,transparent);border-radius:4px;padding:0 5px}
.iname.nolink{color:var(--ink)}
.askdm{font-weight:500;font-style:italic;color:var(--muted);white-space:nowrap}
#who{flex-wrap:wrap}
.field>label.toggle{text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--ink);font-weight:500;margin-top:6px}
.fs input[type=url]{background:var(--surface)}
details.bookset{margin:0}
details.bookset>summary{font-size:.95rem}
details.bookset .inner{padding-top:4px}
.blocknote{margin:2px 0 0;font-size:.85rem}


/* ---------- styles: shared hooks. Each styles/<id>/style.css fills these in; the base look above stays the fallback. */
html{background:var(--bg)}
body{background:transparent;position:relative;min-height:100vh}
#bgart{position:absolute;inset:0;top:var(--tabs-h,0px);z-index:-1;pointer-events:none;overflow:clip}
#bgart>div{position:sticky;top:calc(100vh - max(var(--bg-h,1700px),100vh));height:max(var(--bg-h,1700px),100vh);background:var(--bg-art,none)}
.brand{align-items:center}
.coinlink{display:inline-flex;line-height:0}
.coin{width:44px;height:44px;flex:none;display:block}
/* rarity gems: the same shape for each rarity in every style, so colour is never the only clue */
.pill::before{content:"";display:inline-block;width:.85em;height:.85em;margin-right:4px;vertical-align:-.1em;background:currentColor;-webkit-mask:var(--gem) center/contain no-repeat;mask:var(--gem) center/contain no-repeat}
.r-common{--gem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5.5'/%3E%3C/svg%3E")}
.r-uncommon{--gem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1 13 7 7 13 1 7Z'/%3E%3C/svg%3E")}
.r-rare{--gem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1.5 13 12.5H1Z'/%3E%3C/svg%3E")}
.r-very-rare{--gem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1 12.5 4v6L7 13 1.5 10V4Z'/%3E%3C/svg%3E")}
.r-legendary{--gem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1l1.8 3.9 4.2.5-3.1 2.9.8 4.2L7 10.4 3.3 12.5l.8-4.2L1 5.4l4.2-.5Z'/%3E%3C/svg%3E")}
.r-mundane{--gem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='3' y='3' width='8' height='8' rx='1'/%3E%3C/svg%3E")}

/* the campaign title, centred, with room for each style's ornament */
.titlehero{position:relative;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:26px 0 10px;isolation:isolate}
.titlehero h2{font-size:clamp(2.4rem,7vw,4.4rem);line-height:1.05}
.titlehero::before,.titlehero::after{content:"";position:absolute;pointer-events:none;z-index:-1}
nav.tabs{justify-content:center}
/* player's style picker (a dialog, so no panel can cover it) */
.stylebox{display:grid;gap:12px;text-align:left}
@media (max-width:640px){nav.tabs{gap:6px;padding:8px}nav.tabs a{padding-left:14px!important;padding-right:14px!important}}

/* ---------- one panel per main column: a header (title, shop picker) above the content */
.resulthead{padding:12px 16px}
.shopframe{display:grid;gap:14px}
.shopframe .framehead{margin:0}
.shopframe .market{gap:14px}
.shopframe .shopnav{padding-bottom:14px;border-bottom:1px solid var(--line)}
/* the shop's own content sits inside the frame, so it loses its own frame */
.shopframe .card.shopcard,.shopframe .card.empty-state{background:none!important;border:0!important;border-image:none!important;box-shadow:none!important;outline:0!important;clip-path:none!important;padding:0!important;border-radius:0!important}
.shopframe .card.shopcard::before,.shopframe .card.shopcard::after{content:none!important}
.pastloot{margin-top:18px}
.pastloot .inner{display:grid;gap:10px}
.pastdate{font:700 .8rem var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:10px 0 0}
.heroacts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.titlehero .heroacts .btn{margin:0}
h3.section .when{font-size:.75em;opacity:.8;text-transform:none;letter-spacing:0}