:root{
  --ink:#080b1a;
  --void:#0d1226;
  --vellum:#e9dcbe;
  --vellum-dim:#bfae8c;
  --gold:#c8a137;
  --gold-bright:#f0d071;
  --arcane:#6fd6e0;
  --arcane-deep:#2b6f80;
  --blood:#9b3b3b;
  --rule:rgba(200,161,55,.28);
  --panel:rgba(233,220,190,.035);
  --serif:'EB Garamond',Georgia,serif;
  --display:'IM Fell English SC',Georgia,serif;
  --unicase:'Cormorant Unicase',Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink);
  color:var(--vellum);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* ---- control baseline ------------------------------------------------
   Splitting the sheet into modules turned several spans and divs into real
   <button>s and <input>s, and a control the browser paints itself lands in a
   dark panel as a light grey slab. Every control starts from the page's own
   vocabulary here; each widget still draws its own border on top. */
button,input,select,textarea{
  font-family:inherit;color:inherit;background-color:transparent;
  border:0;border-radius:0;
}
button{cursor:pointer}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{
  appearance:none;-webkit-appearance:none;
}
/* The native chevron disappears with the native widget, so the select draws
   its own and reserves the room for it. */
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0h9L4.5 6z' fill='%23bfae8c'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;padding-right:25px;
}
select option{background:#11162c;color:var(--vellum)}
input::placeholder,textarea::placeholder{color:rgba(191,174,140,.42);font-style:italic}
:focus-visible{outline:1px solid var(--arcane);outline-offset:2px}

/* ---- atmosphere ---------------------------------------------------- */
#sky{position:fixed;inset:0;z-index:0;pointer-events:none}
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.wrap{position:relative;z-index:2;max-width:1500px;margin:0 auto;padding:0 28px 140px}

/* ---- shared panel -------------------------------------------------- */
.panel{
  position:relative;background:var(--panel);
  border:1px solid var(--rule);
  padding:18px 20px 20px;
  backdrop-filter:blur(2px);
}
.panel::before,.panel::after{
  content:"";position:absolute;width:9px;height:9px;border:1px solid var(--gold);opacity:.65;
}
.panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.panel > h2{
  font-family:var(--unicase);font-size:.86rem;letter-spacing:.24em;font-weight:700;
  color:var(--gold);margin:0 0 14px;display:flex;align-items:center;gap:12px;text-transform:lowercase;
}
.panel > h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--rule),transparent)}

/* ---- header -------------------------------------------------------- */
header.hero{padding:54px 0 30px;position:relative}
.eyebrow{font-family:var(--unicase);letter-spacing:.44em;font-size:.72rem;color:var(--arcane);opacity:.8;margin-bottom:10px}
h1{
  font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,6vw,4.6rem);
  margin:0;line-height:.94;color:var(--vellum);
  text-shadow:0 0 44px rgba(111,214,224,.16);
}
h1 .flourish{color:var(--gold);font-size:.55em;vertical-align:.35em;margin:0 .18em}
.subline{display:flex;flex-wrap:wrap;gap:0 26px;margin-top:16px;color:var(--vellum-dim);font-size:1.02rem}
.subline b{color:var(--vellum);font-weight:500}
.hero-rule{height:1px;background:linear-gradient(90deg,var(--gold),rgba(200,161,55,.05));margin-top:24px}
.sigil{position:absolute;top:26px;right:0;width:132px;height:132px;opacity:.5}
.sigil circle,.sigil path,.sigil line{fill:none;stroke:var(--gold);stroke-width:.7}
.sigil .inner{stroke:var(--arcane);opacity:.75;transform-origin:66px 66px;animation:spin 64s linear infinite}
.sigil .outer{transform-origin:66px 66px;animation:spin 120s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- layout -------------------------------------------------------- */
.grid{display:grid;grid-template-columns:288px minmax(0,1fr) 348px;gap:22px;align-items:start}
.col{display:flex;flex-direction:column;gap:22px}

/* ---- ability scores ------------------------------------------------ */
.abilities{display:flex;flex-direction:column;gap:10px}
.ability{
  display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;
  border:1px solid var(--rule);padding:10px 12px;background:rgba(8,11,26,.4);
  transition:border-color .25s,background .25s;
}
.ability:hover{border-color:var(--gold);background:rgba(200,161,55,.06)}
.ability .mod{
  font-family:var(--unicase);font-size:1.72rem;font-weight:700;color:var(--gold-bright);
  text-align:center;line-height:1;
}
/* `min-width:0` because the name cell holds a label and a save, and a grid
   item's automatic minimum is its content, which keeps a narrow phone from
   ever shrinking the row. */
.ability .name{font-family:var(--unicase);letter-spacing:.18em;font-size:.78rem;color:var(--vellum-dim);text-transform:uppercase;min-width:0}
.ability .save{font-size:.82rem;color:var(--arcane);opacity:.85}
.ability input{
  width:52px;-moz-appearance:textfield;appearance:textfield;background:transparent;border:1px solid var(--rule);color:var(--vellum);
  font-family:var(--serif);font-size:1.12rem;text-align:center;padding:4px 0;
}
.ability input:focus{outline:none;border-color:var(--arcane);background:rgba(111,214,224,.07)}
.ability input::-webkit-outer-spin-button,.ability input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ability{overflow:hidden}
.ability > *{min-width:0}

/* ---- combat strip -------------------------------------------------- */
.combat{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{border:1px solid var(--rule);padding:12px 8px;text-align:center;background:rgba(8,11,26,.45);position:relative}
.stat .v{font-family:var(--unicase);font-size:1.9rem;font-weight:700;color:var(--vellum);line-height:1.05}
.stat .k{font-family:var(--unicase);letter-spacing:.16em;font-size:.66rem;color:var(--vellum-dim);text-transform:uppercase;margin-top:4px}
.stat.shield .v{color:var(--gold-bright)}
.acbtn{position:absolute;left:50%;transform:translateX(-50%);bottom:-9px;background:var(--void);border:1px solid var(--rule);
  color:var(--vellum-dim);font-family:var(--unicase);letter-spacing:.12em;font-size:.55rem;text-transform:uppercase;
  padding:2px 8px;cursor:pointer;transition:.2s;white-space:nowrap}
.acbtn:hover{border-color:var(--gold);color:var(--vellum)}
.acbtn.on{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:700}

/* ---- hit points ---------------------------------------------------- */
.hpbar{height:9px;background:rgba(155,59,59,.18);border:1px solid rgba(155,59,59,.45);margin:12px 0 4px;position:relative;overflow:hidden}
.hpbar i{display:block;height:100%;background:linear-gradient(90deg,#7d2b2b,#c05555);transition:width .45s cubic-bezier(.4,1.4,.5,1)}
.hpbar u{position:absolute;inset:0 0 0 auto;background:repeating-linear-gradient(45deg,rgba(111,214,224,.5) 0 4px,transparent 4px 8px);transition:width .45s}
.hpnums{display:flex;justify-content:space-between;align-items:baseline;font-size:.86rem;color:var(--vellum-dim)}
.hpnums b{font-family:var(--unicase);font-size:2rem;color:var(--vellum);font-weight:700}
.hprow{display:flex;gap:8px;margin-top:12px;align-items:center}
.hprow input{width:64px;background:rgba(8,11,26,.6);border:1px solid var(--rule);color:var(--vellum);text-align:center;font-family:var(--serif);padding:6px}
.deathsaves{display:flex;justify-content:space-between;margin-top:16px;font-size:.8rem;color:var(--vellum-dim)}
.pips{display:flex;gap:6px;margin-top:5px}
.pip{width:15px;height:15px;border-radius:50%;border:1px solid var(--vellum-dim);cursor:pointer;transition:.2s}
.pip.on.succ{background:var(--arcane);border-color:var(--arcane);box-shadow:0 0 10px rgba(111,214,224,.6)}
.pip.on.fail{background:var(--blood);border-color:var(--blood);box-shadow:0 0 10px rgba(155,59,59,.6)}

/* ---- skills -------------------------------------------------------- */
.skills{column-count:2;column-gap:26px}
.skill{
  display:flex;align-items:baseline;gap:9px;padding:3px 4px;break-inside:avoid;cursor:pointer;
  border-radius:2px;transition:background .18s;
}
.skill:hover{background:rgba(200,161,55,.09)}
.skill .dot{width:9px;height:9px;border:1px solid var(--vellum-dim);border-radius:50%;flex:0 0 auto;position:relative;top:-1px}
.skill.prof .dot{background:var(--gold);border-color:var(--gold)}
.skill.exp .dot{background:var(--arcane);border-color:var(--arcane);box-shadow:0 0 8px var(--arcane)}
.skill .m{font-family:var(--unicase);font-weight:700;width:2.4em;text-align:right;color:var(--vellum)}
.skill .n{flex:1}
.skill .ab{font-size:.68rem;letter-spacing:.1em;color:var(--vellum-dim);text-transform:uppercase}
.legend{display:flex;gap:18px;font-size:.74rem;color:var(--vellum-dim);margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}
.legend span{display:flex;align-items:center;gap:7px}
.legend i{width:9px;height:9px;border-radius:50%;display:block}

/* ---- portent ------------------------------------------------------- */
.portent{display:flex;gap:16px;justify-content:center;padding:6px 0 4px}
.die{
  width:82px;height:92px;position:relative;cursor:pointer;display:grid;place-items:center;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),filter .3s;
}
.die svg{position:absolute;inset:0;width:100%;height:100%}
.die polygon{fill:rgba(111,214,224,.09);stroke:var(--arcane);stroke-width:1.2}
.die span{position:relative;font-family:var(--unicase);font-size:2.1rem;font-weight:700;color:var(--arcane);text-shadow:0 0 16px rgba(111,214,224,.55)}
.die:hover{transform:translateY(-4px) rotate(-3deg)}
.die.spent{filter:grayscale(1);opacity:.32;cursor:default}
.die.spent:hover{transform:none}
.die.spent polygon{stroke:var(--vellum-dim)}
.die.spent span{color:var(--vellum-dim);text-shadow:none;text-decoration:line-through}

/* ---- spells -------------------------------------------------------- */
.slots{display:flex;flex-direction:column;gap:11px;margin-bottom:6px}
.slotrow{display:flex;align-items:center;gap:11px}
.slotrow .lv{font-family:var(--unicase);font-size:.74rem;letter-spacing:.14em;color:var(--vellum-dim);width:4.6em;text-transform:uppercase}
.slot{
  width:19px;height:19px;border:1px solid var(--gold);cursor:pointer;
  transform:rotate(45deg);transition:.22s;
}
.slot.full{background:var(--gold);box-shadow:0 0 12px rgba(200,161,55,.55)}
.slot:hover{transform:rotate(45deg) scale(1.18)}
.spell{
  display:grid;grid-template-columns:16px 1fr auto;gap:10px;align-items:baseline;
  padding:5px 6px;cursor:pointer;border-left:1px solid transparent;transition:.18s;
}
.spell:hover{background:rgba(111,214,224,.07);border-left-color:var(--arcane)}
.spell .p{color:var(--gold);font-size:.8rem}
.spell .meta{font-size:.72rem;color:var(--vellum-dim);letter-spacing:.06em;white-space:nowrap}
.spell.unprepared{opacity:.42}
.spell.unprepared .p{color:transparent}
.spell em{font-style:italic;color:var(--arcane);font-size:.74rem}
.spellhead{display:flex;gap:22px;margin-bottom:16px}
.spellhead div{flex:1;text-align:center;border:1px solid var(--rule);padding:9px 4px;background:rgba(8,11,26,.4)}
.spellhead b{display:block;font-family:var(--unicase);font-size:1.7rem;color:var(--gold-bright);line-height:1.1}
.spellhead small{font-family:var(--unicase);letter-spacing:.14em;font-size:.62rem;color:var(--vellum-dim);text-transform:uppercase}
.grouplabel{font-family:var(--unicase);letter-spacing:.2em;font-size:.68rem;color:var(--gold);text-transform:uppercase;margin:16px 0 6px;opacity:.85}

/* ---- attacks / features / kit -------------------------------------- */
table.attacks{width:100%;border-collapse:collapse;font-size:.94rem}
table.attacks th{
  font-family:var(--unicase);font-size:.64rem;letter-spacing:.16em;color:var(--vellum-dim);
  text-transform:uppercase;text-align:left;padding-bottom:7px;font-weight:600;
}
table.attacks td{padding:7px 0;border-top:1px solid var(--rule)}
table.attacks tr{cursor:pointer;transition:background .18s}
table.attacks tbody tr:hover{background:rgba(200,161,55,.07)}
table.attacks td:nth-child(2),table.attacks td:nth-child(3){font-family:var(--unicase);font-weight:700;color:var(--gold-bright)}
.feat{border-left:1px solid var(--rule);padding:2px 0 2px 14px;margin-bottom:15px}
.feat h3{font-family:var(--display);font-size:1.06rem;margin:0 0 3px;color:var(--vellum);font-weight:400}
.feat h3 small{font-family:var(--unicase);font-size:.6rem;letter-spacing:.16em;color:var(--arcane);margin-left:9px;text-transform:uppercase;vertical-align:middle}
.feat p{margin:0;font-size:.9rem;color:var(--vellum-dim);line-height:1.5}
.coins{display:flex;gap:10px;margin-top:14px}
.coin{flex:1;text-align:center;border:1px solid var(--rule);padding:7px 2px}
.coin b{display:block;font-family:var(--unicase);font-size:1.25rem;color:var(--gold-bright)}
.coin small{font-size:.6rem;letter-spacing:.16em;color:var(--vellum-dim);text-transform:uppercase}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.tag{border:1px solid var(--rule);padding:3px 10px;font-size:.76rem;color:var(--vellum-dim);letter-spacing:.05em}

/* ---- dice tray ----------------------------------------------------- */
.tray{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:linear-gradient(180deg,rgba(8,11,26,.6),rgba(8,11,26,.97));
  border-top:1px solid var(--rule);backdrop-filter:blur(9px);
  padding:14px 28px;display:flex;align-items:center;gap:22px;
}
.tray .label{font-family:var(--unicase);letter-spacing:.2em;font-size:.68rem;color:var(--gold);text-transform:uppercase;white-space:nowrap}
.modeswitch{display:flex;border:1px solid var(--rule)}
.modeswitch button{
  background:transparent;border:0;color:var(--vellum-dim);font-family:var(--unicase);
  letter-spacing:.12em;font-size:.68rem;padding:7px 13px;cursor:pointer;text-transform:uppercase;transition:.2s;
}
.modeswitch button.on{background:var(--gold);color:var(--ink);font-weight:700}
.rollbtn{
  background:transparent;border:1px solid var(--gold);color:var(--gold-bright);
  font-family:var(--unicase);letter-spacing:.16em;font-size:.76rem;padding:9px 22px;cursor:pointer;
  text-transform:uppercase;transition:.22s;
}
.rollbtn:hover{background:var(--gold);color:var(--ink)}
.result{flex:1;display:flex;align-items:baseline;gap:14px;min-height:44px;overflow:hidden}
.result .total{font-family:var(--unicase);font-size:2.4rem;font-weight:700;color:var(--vellum);line-height:1}
.result .total.crit{color:var(--gold-bright);text-shadow:0 0 22px rgba(240,208,113,.75)}
.result .total.fumble{color:var(--blood);text-shadow:0 0 22px rgba(155,59,59,.75)}
.result .detail{font-size:.88rem;color:var(--vellum-dim)}
.result .detail s{opacity:.45}
.result .what{font-family:var(--unicase);letter-spacing:.14em;font-size:.72rem;color:var(--arcane);text-transform:uppercase}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.pop{animation:pop .38s cubic-bezier(.34,1.56,.64,1)}
.hint{font-size:.74rem;color:var(--vellum-dim);opacity:.7;white-space:nowrap}

/* ---- misc ---------------------------------------------------------- */
/* Chart.js sizes its canvas from the box it sits in, and a box with no width of
   its own takes the canvas's — so the two ratchet each other wider and the page
   grows a horizontal scrollbar once the columns stack. Pinning the canvas
   inside a box that owns its own width breaks the loop. */
.chartbox{height:236px;position:relative;width:100%;min-width:0}
.chartbox canvas{position:absolute;inset:0;width:100% !important;height:100% !important}
.notice{font-size:.78rem;color:var(--vellum-dim);opacity:.72;margin-top:10px;font-style:italic}
[x-cloak]{display:none!important}
/* A bare `1fr` track is min-content-floored, so one wide row inside a panel
   pushes the whole stacked page sideways. `minmax(0,1fr)` lets it clamp. */
@media(max-width:1180px){.grid{grid-template-columns:minmax(0,1fr)}.sigil{display:none}}
/* ---- inline mini buttons ------------------------------------------- */
.mini{
  background:transparent;border:1px solid var(--rule);color:var(--vellum-dim);
  font-family:var(--unicase);letter-spacing:.12em;font-size:.58rem;text-transform:uppercase;
  padding:3px 9px;cursor:pointer;transition:.18s;
}
.mini:hover{border-color:var(--gold);color:var(--gold-bright)}
.mini.arc{border-color:rgba(111,214,224,.42);color:var(--arcane)}
.mini.arc:hover{background:var(--arcane);color:var(--ink);border-color:var(--arcane)}
.mini.warn:hover{border-color:var(--blood);color:#e08a8a}
.mini[disabled]{opacity:.28;cursor:not-allowed}
.mini[disabled]:hover{border-color:var(--rule);color:var(--vellum-dim);background:transparent}
.grouplabel .mini{margin-left:9px;vertical-align:1px}

/* ---- spell rows gain a cast column --------------------------------- */
.spell{grid-template-columns:16px minmax(0,1fr) auto auto}
.spell .acts{display:flex;gap:5px;opacity:0;transition:opacity .16s}
.spell:hover .acts{opacity:1}
.spell .badge{
  font-family:var(--unicase);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--rule);padding:1px 5px;color:var(--vellum-dim);margin-left:7px;white-space:nowrap;
}
.spell .badge.r{color:var(--arcane);border-color:rgba(111,214,224,.4)}
.spell.spent{opacity:.35}
.spell.spent .p{color:var(--vellum-dim)}

/* ---- level stepper -------------------------------------------------- */
.lvlstep{display:inline-flex;gap:5px;margin-left:7px;vertical-align:1px}
.lvlstep button{
  width:21px;height:21px;background:transparent;border:1px solid var(--rule);color:var(--gold);
  font-family:var(--unicase);font-size:.85rem;line-height:1;cursor:pointer;transition:.18s;padding:0;
}
.lvlstep button:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* ---- overlay -------------------------------------------------------- */
.scrim{
  position:fixed;inset:0;z-index:60;background:rgba(4,6,14,.85);backdrop-filter:blur(7px);
  display:flex;align-items:center;justify-content:center;padding:38px 26px;animation:fade .18s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  position:relative;width:100%;max-width:1140px;height:84vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#101632,#080b1a);border:1px solid var(--gold);
  box-shadow:0 40px 120px rgba(0,0,0,.75),0 0 90px rgba(111,214,224,.06);
  animation:rise .24s cubic-bezier(.34,1.4,.64,1);
}
@keyframes rise{from{transform:translateY(16px) scale(.987);opacity:0}to{transform:none;opacity:1}}
.mhead{display:flex;align-items:center;gap:14px;padding:16px 24px;border-bottom:1px solid var(--rule);flex:0 0 auto}
.mtitle{font-family:var(--display);font-size:1.5rem;color:var(--vellum);line-height:1.12}
.msub{font-family:var(--unicase);letter-spacing:.18em;font-size:.64rem;color:var(--arcane);text-transform:uppercase}
.modal .x{
  margin-left:auto;background:transparent;border:1px solid var(--rule);color:var(--vellum-dim);
  width:30px;height:30px;cursor:pointer;font-size:1.05rem;line-height:1;transition:.18s;flex:0 0 auto;
}
.modal .x:hover{border-color:var(--blood);color:#e08a8a}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:13px 24px;border-bottom:1px solid var(--rule);flex:0 0 auto}
.filters input[type=search]{
  flex:1;min-width:170px;background:rgba(8,11,26,.7);border:1px solid var(--rule);color:var(--vellum);
  font-family:var(--serif);font-size:.95rem;padding:7px 12px;
}
.filters input[type=search]:focus{outline:none;border-color:var(--arcane)}
.chip{
  background:transparent;border:1px solid var(--rule);color:var(--vellum-dim);
  font-family:var(--unicase);letter-spacing:.12em;font-size:.6rem;text-transform:uppercase;
  padding:6px 11px;cursor:pointer;transition:.18s;white-space:nowrap;
}
.chip:hover{border-color:var(--gold);color:var(--vellum)}
.chip.on{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:700}
.comp{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);overflow:hidden;flex:1 1 auto;min-height:0}
.complist{overflow-y:auto;border-right:1px solid var(--rule);padding:5px 0}
.crow{
  display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:11px;align-items:center;
  padding:7px 18px;cursor:pointer;border-left:2px solid transparent;transition:.14s;
}
.crow:hover{background:rgba(111,214,224,.07);border-left-color:var(--arcane)}
.crow.sel{background:rgba(200,161,55,.11);border-left-color:var(--gold)}
.crow .lvl{font-family:var(--unicase);font-weight:700;color:var(--gold-bright);text-align:center;font-size:.92rem}
.crow .nm{color:var(--vellum);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow .sc{font-size:.66rem;letter-spacing:.08em;color:var(--vellum-dim);text-transform:uppercase}
.crow.have .nm::after{content:"\2726";color:var(--gold);margin-left:8px;font-size:.7rem}
.compdetail{overflow-y:auto;padding:22px 26px 30px}
.complist::-webkit-scrollbar,.compdetail::-webkit-scrollbar{width:8px}
.complist::-webkit-scrollbar-thumb,.compdetail::-webkit-scrollbar-thumb{background:rgba(200,161,55,.28)}
.empty{color:var(--vellum-dim);opacity:.5;font-style:italic;text-align:center;padding:64px 20px}
.props{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:11px 22px;
  margin:6px 0 18px;padding-bottom:16px;border-bottom:1px solid var(--rule);
}
.prop small{display:block;font-family:var(--unicase);letter-spacing:.16em;font-size:.56rem;
  color:var(--vellum-dim);text-transform:uppercase;margin-bottom:2px}
.prop span{color:var(--vellum)}
.rules{font-size:1rem;line-height:1.62;color:var(--vellum);white-space:pre-wrap}
.upcast{margin-top:15px;padding:12px 14px;border:1px solid var(--rule);background:rgba(111,214,224,.05);
  font-size:.9rem;color:var(--arcane);line-height:1.55}
.castbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px;padding-top:15px;border-top:1px solid var(--rule)}
.castbar .lbl{font-family:var(--unicase);letter-spacing:.16em;font-size:.58rem;color:var(--gold);
  text-transform:uppercase;width:52px;flex:0 0 auto}

/* ---- inventory ------------------------------------------------------
   One grid shared by every row, with fixed columns either side of the name,
   so quantities, weights and flags line up down the list however long or
   short an item's name is. */
.kit{display:flex;flex-direction:column;gap:1px;margin-top:4px}
.item{
  position:relative;display:grid;align-items:center;gap:7px;
  grid-template-columns:24px minmax(0,1fr) 38px 60px 14px;
  padding:5px 4px;border-bottom:1px solid rgba(200,161,55,.1);
}
.item:last-child{border-bottom:0}
.item:hover{background:rgba(200,161,55,.05)}
.item .qty{grid-column:1;font-size:.82rem;color:var(--vellum-dim);text-align:right;font-variant-numeric:tabular-nums}
.item .iname{
  grid-column:2;font:inherit;text-align:left;color:var(--vellum);padding:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.item .iname:hover{color:var(--gold-bright)}
.item.equipped .iname,.item.attuned .iname{color:var(--gold)}
.item > .meta{grid-column:3;font-size:.78rem;color:var(--vellum-dim);text-align:right;font-variant-numeric:tabular-nums}
.item .mini{grid-column:4;font-size:.52rem;padding:3px 4px;letter-spacing:.06em;justify-self:start}
.item .del{grid-column:5;opacity:0;transition:.18s;font-size:1rem;line-height:1;padding:0;color:var(--vellum-dim)}
.item:hover .del{opacity:.45}
.item .del:hover{opacity:1;color:#e08a8a}
.carry{display:flex;align-items:center;gap:11px;font-size:.82rem;color:var(--vellum-dim);margin-bottom:10px}
.carry .hpbar{flex:1}
.itemtip{
  position:absolute;left:-6px;right:-6px;bottom:calc(100% + 5px);z-index:30;
  background:linear-gradient(180deg,#131a38,#0a0e20);border:1px solid var(--gold);
  padding:11px 13px;font-size:.85rem;line-height:1.5;color:var(--vellum);
  box-shadow:0 16px 40px rgba(0,0,0,.72);opacity:0;transform:translateY(4px);
  pointer-events:none;transition:.16s;white-space:pre-wrap;
}
.item.described:hover .itemtip{opacity:1;transform:none}
.additem{display:grid;grid-template-columns:minmax(0,1fr) 62px;gap:8px;margin-top:11px}
.additem input,.additem textarea{
  background:rgba(8,11,26,.7);border:1px solid var(--rule);color:var(--vellum);
  font-family:var(--serif);font-size:.9rem;padding:7px 9px;width:100%;
}
.additem input:focus,.additem textarea:focus{outline:none;border-color:var(--arcane)}
.additem textarea{grid-column:1/-1;resize:vertical;min-height:54px;line-height:1.45}
.additem .go{grid-column:1/-1;padding:8px}
.coin input{
  width:100%;background:transparent;border:0;color:var(--gold-bright);text-align:center;
  font-family:var(--unicase);font-size:1.25rem;font-weight:700;padding:0;
  -moz-appearance:textfield;appearance:textfield;
}
.coin input::-webkit-outer-spin-button,.coin input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.coin input:focus{outline:none;background:rgba(111,214,224,.09)}

/* ---- notes ---------------------------------------------------------- */
textarea.notes{
  width:100%;min-height:132px;background:rgba(8,11,26,.55);border:1px solid var(--rule);color:var(--vellum);
  font-family:var(--serif);font-size:.98rem;line-height:1.56;padding:12px;resize:vertical;
}
textarea.notes:focus{outline:none;border-color:var(--arcane)}

/* ---- tray extras ---------------------------------------------------- */
.dicein{
  width:92px;background:rgba(8,11,26,.7);border:1px solid var(--rule);color:var(--vellum);
  font-family:var(--serif);text-align:center;padding:8px 6px;
}
.dicein:focus{outline:none;border-color:var(--arcane)}
.saved{
  font-family:var(--unicase);letter-spacing:.14em;font-size:.56rem;color:var(--arcane);
  text-transform:uppercase;opacity:0;transition:opacity .3s;white-space:nowrap;
}
.saved.on{opacity:.8}

@media(max-width:900px){
  .comp{grid-template-columns:1fr;overflow-y:auto}
  .complist{border-right:0;border-bottom:1px solid var(--rule);max-height:240px}
  .modal{height:90vh}
}

@media print{
  body{background:#fff;color:#111}
  #sky,.tray,body::after{display:none}
  .panel{border-color:#999;background:#fff}
  h1,.stat .v,.ability .mod{color:#111}
  .wrap{padding-bottom:0}
}