/* helladnd pixel tavern: the character page (#sheet-<id>) and the DM's read-only copy of it (dialog#sheet).
   One parchment page, one sticky bar on it, sections split by dashed lines: no boxes inside boxes.
   Tokens live in tavern-room.css; buttons, tablets, pips, the HP bar and tags come from board.css. */

/* ===================== the page: a centred parchment column, the room either side ===================== */
.sheet-page{position:relative;width:min(760px,100%);margin:0 auto;padding:0 16px 24px;
  border:18px solid transparent;border-image:url(/img/tavern/s-parchment.png) 6 fill/18px/0 round;
  box-shadow:8px 10px 0 rgba(40,20,8,.4);color:var(--ink);font:18px/1.5 var(--f-body)}

/* A disabled button (exhaustion at 0, quantity at 0, ASI at +2, Level up while saving): a flat muted fill with
   the glyph in full ink, never a faded one (Lucas, checkpoint 3). */
:is(.sheet-page,.sheet-card) .btn:disabled{border-image:none;border:3px solid var(--parch-edge);background:var(--parch-2);
  color:var(--ink);text-shadow:none;cursor:default;transform:none}

/* ===================== sticky top bar ===================== */
.sheet-bar{position:sticky;top:0;z-index:5;margin:0 -16px;padding:8px 16px 10px;background:var(--parch);
  border-bottom:3px dashed var(--parch-edge);display:flex;flex-direction:column;gap:6px;
  max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain}
.bar-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sheet-bar .btn,.bar-panel .btn{min-height:44px}
.bar-name{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;font:600 22px/1.15 var(--f-display);color:var(--wood-800);margin:0}
.bar-name span{font:600 16px var(--f-display);color:var(--ink);white-space:nowrap}

/* HP (tap → panel) beside AC · Initiative · Speed */
.bar-mid{align-items:flex-end;gap:8px 18px}
.bar-hpwrap{flex:1 1 240px;min-width:0}
.bar-hp{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;margin:0;background:none;border:0;cursor:pointer;
  font:600 20px var(--f-num);color:var(--ink);text-align:left}
span.bar-hp{cursor:default}
.bar-hp img{width:27px;height:27px;flex:none}
.bar-hp b{font-size:32px;line-height:1}
.bar-hp .temp{font:700 15px var(--f-num);color:#2f5a88} /* 5.7:1 on parchment */
.bar-hp:focus-visible,.bar-conds:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.sheet-bar .hpbar{margin-top:2px}
.bar-stats{flex:1 1 250px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;text-align:center}
.bar-stats dt{font:14px var(--f-label);letter-spacing:.5px;text-transform:uppercase;color:var(--ink)}
.bar-stats dd{margin:0;font-size:26px;line-height:1.15;white-space:nowrap}

/* conditions · inspiration · class resources */
.bar-low{gap:4px 10px}
.bar-conds{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1 1 180px;min-height:44px;padding:0 4px;margin:0;
  background:none;border:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
span.bar-conds{cursor:default}
button.bar-conds::after{content:'▾';font:600 18px var(--f-display);color:var(--wood-800)}
.bar-conds .tag{align-self:center;font-size:13px;padding:2px 8px;background:#94302a;color:var(--cream)}
.bar-conds .none{font-size:17px;color:var(--ink)}
.bar-insp{display:inline-flex;align-items:center;gap:6px;font:600 16px var(--f-display);color:var(--wood-800)}
.bar-insp img{width:22px;height:22px}
.bar-res{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0 2px}
.bar-res-lbl{display:inline-flex;flex-direction:column;margin-right:4px;line-height:1.1}
.bar-res .name{font:600 16px var(--f-display);color:var(--wood-800)}
.bar-reset{font:15px var(--f-body);color:var(--ink)} /* "short rest": when it comes back, in full ink (Lucas, checkpoint 3) */
.bar-res .res-count{font-size:20px;margin:0 6px}

/* panels open inside the bar's parchment: a dashed line, rows of buttons */
.bar-panel{border-top:3px dashed var(--parch-edge);padding-top:8px;margin-top:2px;display:flex;flex-direction:column;gap:8px}
.panel-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.panel-lbl{font:600 18px var(--f-display);color:var(--wood-800);margin-right:4px}
.panel-close{margin-left:auto}
.bar-panel input[name=amount]{width:7em;min-height:44px;padding:4px 8px;font:700 18px var(--f-num);font-variant-numeric:lining-nums tabular-nums;
  color:var(--ink);background:#fffaf0;border:3px solid var(--outline);border-radius:0;box-shadow:inset -3px -3px 0 #e6cf98}
.bar-panel input[name=amount]:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.bar-panel .form-error{margin:0}
.bar-panel .form-error:empty{display:none}
.cond-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.cond-grid .btn{font-size:15px;padding:0 6px}
.bar-panel .btn.num{min-width:52px;font:700 20px var(--f-num);font-variant-numeric:lining-nums tabular-nums}
.exh-level{min-width:1.6em;text-align:center;font-size:26px}

/* ===================== sections ===================== */
.sheet-body{padding-top:4px}
.sheet-sec{padding-bottom:14px}
.sheet-sec + .sheet-sec{border-top:3px dashed var(--parch-edge)}
.sheet-sec .sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap;margin:0}
.sheet-sec .sec-head .btn{flex:none;min-height:44px} /* the board's phone .sec-head .btn is 40px: not here */
.sheet-sec h2{font:600 26px var(--f-display);color:var(--wood-800);margin:18px 0 8px;min-width:0;overflow-wrap:anywhere}
.sheet-sec .sub-h{font:600 20px var(--f-display);color:var(--wood-800);margin:16px 0 6px}
.sheet-sec .sub-h .hint{font:15px var(--f-body);color:var(--ink);margin-left:6px}
.sheet-sec .empty{font-style:italic;color:var(--ink);margin:4px 0}
.sheet-sec .tab dd{font-size:28px}
/* Lucas (checkpoint 1): labels and small numbers bigger and in full ink */
.sheet-sec .tab dt{font-size:12px;color:var(--ink)}
.sheet-sec .skills small{color:var(--ink)}
.sheet-sec .tab small{font-size:15px;color:var(--ink)}
.sheet-sec .ability-grid .tab .save{font-size:15px;color:var(--ink)}
.sheet-sec .tablets.ability-grid{margin-top:4px}
.prof-line{margin:12px 0 0;font-size:18px}
.prof-line b,.skills b{font-size:20px}
.notes-text{overflow-wrap:anywhere}
.notes-edit textarea{width:100%;min-height:12em;font:17px/1.5 var(--f-body);color:var(--ink);background:#fffaf0;
  border:3px solid var(--outline);border-radius:0;box-shadow:inset -3px -3px 0 #e6cf98;padding:6px 8px;margin-bottom:8px}
.notes-edit textarea:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.notes-edit .panel-row{justify-content:flex-end}

/* numbers in a clear face */
.bar-hp b,.bar-hp,.bar-stats dd,.bar-res,.res-count,.exh-level,.sheet-sec .tab dd,.sheet-sec .tab small,.sheet-sec .tab .save,.prof-line b,.skills b{
  font-family:var(--f-num);font-weight:700;font-variant-numeric:lining-nums tabular-nums}
.bar-res .name{font-family:var(--f-display);font-weight:600}

/* ===================== phones ===================== */
@media (max-width:700px){
  .sheet-page{border-width:12px;border-image-width:12px;padding:0 8px 18px}
  .sheet-bar{margin:0 -8px;padding:6px 8px 8px}
  /* ← Board left, the three icon buttons right, the name on its own line underneath */
  .bar-top .bar-name{order:5;flex-basis:100%}
  .bar-top [data-action=rest]{margin-left:auto}
  .bar-stats{flex-basis:100%}
  .bar-stats dd{font-size:22px}
  .sheet-sec h2{font-size:24px}
  /* The bar stays pinned with the conditions panel open, so the toggle list scrolls inside a capped height
     (a cut-off row shows there is more); the bar + panel stay well under a phone screen. */
  .cond-grid{max-height:min(38vh,300px);max-height:min(38dvh,300px);overflow-y:auto;overscroll-behavior:contain;padding:2px 2px 4px;border-bottom:3px dashed var(--parch-edge)}
}

/* ===================== the DM's read-only dialog (dialog#sheet on /dm) ===================== */
.dm-sheet-close{flex:none;display:flex;justify-content:flex-end;padding:6px 8px 0}
.dm-sheet-close .btn{min-height:44px;min-width:44px}
#sheet .tab-body{padding-top:0}
#sheet .sheet-bar{margin:0 -14px;padding:6px 14px 10px;max-height:none;overflow:visible}

/* ===================== small cards over the page: the rest dialog's small parchment frame ===================== */
.sheet-card .card-close{display:flex;justify-content:flex-end;padding:6px 8px 0}
.card-form{padding:0 14px 14px;font:17px/1.5 var(--f-body);color:var(--ink)}
.card-form .plaque{display:flex;width:100%;margin:0 0 10px;overflow-wrap:anywhere}
.card-kind{margin:0;font:600 18px var(--f-display);color:var(--wood-800);text-transform:capitalize}
.card-facts{margin:2px 0 10px;font-size:17px}
.card-roll{margin:8px 0;font:700 19px/1.45 var(--f-body);color:var(--ink)}
.card-note{margin:6px 0;font-size:17px}
.card-text p{margin:8px 0;font:17px/1.5 var(--f-body);overflow-wrap:anywhere}
.card-h{font:600 20px var(--f-display);color:var(--wood-800);margin:14px 0 4px}
.card-form .card-menu{margin-top:16px}
.card-menu .btn{min-height:44px}
/* the typed-attack form: labels above their fields, bigger and in full ink (Lucas, checkpoint 1) */
#sheet-card .card-form label{margin:0 0 12px;font-size:14px;color:var(--ink)}
#sheet-card .card-form label input,#sheet-card .card-form label textarea{margin-top:4px}
#sheet-card .card-form .form-error{margin:0}
#sheet-card .card-form .form-error:empty{display:none}

/* ===================== attacks & spells ===================== */
.sec-btns{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.atk-list,.sp-list{list-style:none;padding:0;margin:0}
.atk-list li + li,.sp-list li + li{border-top:2px dotted var(--parch-edge)}
/* A row is the tap target: name · to-hit · damage on one line, range/notes underneath; no box around it. */
.atk,.sp,.tick{width:100%;min-height:48px;margin:0;padding:8px 2px;background:none;border:0;border-radius:0;font:inherit;color:var(--ink);text-align:left}
button.atk,button.sp,.tick{cursor:pointer}
button.atk:hover,button.sp:hover,.tick:hover{background:rgba(255,250,240,.45)}
button.atk:focus-visible,button.sp:focus-visible,.tick:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.atk{display:grid;grid-template-columns:minmax(0,1fr) 2.1em minmax(0,1fr);align-items:baseline;gap:2px 8px}
.atk-name{font:600 18px var(--f-display);color:var(--wood-800);overflow-wrap:break-word}
.atk-hit{font-size:22px;text-align:right}
.atk-dmg{font-size:18px;overflow-wrap:break-word}
.atk-notes{grid-column:1/-1;font-size:16px;color:var(--ink)}
@media (min-width:560px){.atk{grid-template-columns:12em 2.4em minmax(0,1fr);column-gap:12px}}

.spell-line{margin:2px 0 6px;font-size:18px}
.spell-line b{font-size:22px}
.slot-rows{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;margin:0 0 4px}
.slot-row{display:inline-flex;align-items:center;flex-wrap:wrap}
.slot-lbl{font-size:17px;margin-right:2px}
.prep-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:8px 0 4px}
.prep-head .btn,.prep-row .btn{min-height:44px}
.prep-head .switch,.prep-head [data-action=prepare-done]{margin-left:auto}
.prep-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 4px}
.prep-row .hint{font-size:16px;color:var(--ink)}
.prep-count{font-size:20px;margin-right:4px}
.prep-hint{margin:2px 0 0;font-size:17px}
.sp{display:flex;flex-direction:column;justify-content:center}
.sp-name{font:600 18px var(--f-display);color:var(--wood-800);overflow-wrap:anywhere}
.sp-marks abbr{text-decoration:none;font-size:15px;color:#2f5a88;margin-left:2px} /* 5.7:1 on parchment */
.not-prep{font:italic 16px var(--f-body);color:var(--ink)}
.sp-eff{font-size:16px;color:var(--ink)}
.tick{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:0 12px}
.tick .box{grid-row:1/span 2;width:26px;height:26px;display:grid;place-items:center;border:3px solid var(--outline);background:#fffaf0;
  font:700 16px/1 var(--f-num);color:var(--outline)}
.tick[aria-pressed=true] .box{background:var(--gold)}
.tick .sp-name,.tick .sp-eff{grid-column:2}

/* numbers in a clear face */
.atk-hit,.atk-dmg,.spell-line b,.slot-lbl,.prep-count,.sp-marks abbr{font-family:var(--f-num);font-weight:700;font-variant-numeric:lining-nums tabular-nums}
@media (max-width:700px){ #sheet .sheet-bar{margin:0 -8px;padding:6px 8px 8px} }

/* ===================== resources, features, inventory & coins ===================== */
.res-list,.feat-list,.it-list{list-style:none;padding:0;margin:0}
.res-list li + li,.feat-list li + li,.it-list li + li{border-top:2px dotted var(--parch-edge)}
/* the board card's resource row, without its own dashed line (the list draws the dots) */
.sheet-sec .res{margin:0;padding:4px 0;border-top:0;gap:0 6px}
.sheet-sec .res .name{font-size:18px;margin-right:0}
.sheet-sec .res .hint{font-size:15px;color:var(--ink);margin-right:auto}
.sheet-sec .res .res-count{font-size:22px}
.sheet-sec .res-back{margin:-4px 0 6px;font:italic 16px var(--f-body);color:var(--ink)}

/* features and items: the row is the tap target, no box around it */
.feat,.it{display:flex;width:100%;min-height:48px;margin:0;padding:8px 2px;background:none;border:0;border-radius:0;font:inherit;color:var(--ink);text-align:left}
button.feat,button.it,summary.feat{cursor:pointer}
button.feat:hover,button.it:hover,summary.feat:hover{background:rgba(255,250,240,.45)}
button.feat:focus-visible,button.it:focus-visible,summary.feat:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.feat{flex-direction:column;justify-content:center}
summary.feat{list-style:none}
summary.feat::-webkit-details-marker{display:none}
.feat-ro .card-text{padding:0 2px 8px}
.ft-name{font:600 18px var(--f-display);color:var(--wood-800);overflow-wrap:anywhere}
.ft-src{font:600 16px var(--f-display);color:var(--ink)}
.ft-line{font-size:16px;color:var(--ink);overflow-wrap:anywhere}
.it{align-items:baseline;justify-content:space-between;gap:10px}
.it-name{font:600 18px var(--f-display);color:var(--wood-800);overflow-wrap:anywhere;min-width:0}
.it-qty{font:700 18px var(--f-num);font-variant-numeric:lining-nums tabular-nums;color:var(--ink)}
.it-note{font:16px var(--f-body);color:var(--ink)}
.it-kind{flex:none;font:15px var(--f-body);color:var(--ink)}

/* coins: the coin once, then pp gp sp cp as four buttons in a row */
.coins{display:flex;align-items:center;gap:8px}
.coins > img{width:27px;height:27px;flex:none}
.coin-grid{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-width:520px}
.coin{display:flex;align-items:baseline;justify-content:center;gap:4px;min-height:48px;padding:0 4px}
.coin b{font:700 20px var(--f-num);font-variant-numeric:lining-nums tabular-nums;overflow-wrap:anywhere;min-width:0}
.coin-k{font:600 15px var(--f-display)}
span.coin{border-bottom:2px dotted var(--parch-edge)}
.sheet-sec .coin-total{margin:6px 0 0;font-size:16px;color:var(--ink)}

/* item, feature and coin cards */
.card-src{text-transform:none}
.qty-row{display:flex;align-items:center;gap:8px;margin:12px 0 0}
.qty-lbl{font:600 18px var(--f-display);color:var(--wood-800);margin-right:4px}
.qty-n{min-width:2.4em;text-align:center;font:700 24px var(--f-num);font-variant-numeric:lining-nums tabular-nums}
.qty-row .btn{font:700 22px var(--f-num)}
.card-form p.card-h{margin:10px 0 6px}
.card-choices{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.card-choices .btn{flex:1 1 140px;min-height:44px}
.coin-have{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:18px}
.coin-have img{width:27px;height:27px}
.coin-have b{font:700 26px var(--f-num);font-variant-numeric:lining-nums tabular-nums}
.coin-card .panel-row{margin-bottom:6px}
.coin-card .panel-row .btn{min-height:44px}
#sheet-card .coin-card input[name=amount]{width:7em;min-height:44px;padding:4px 8px;font:700 18px var(--f-num);font-variant-numeric:lining-nums tabular-nums}
@media (max-width:700px){
  .coins{gap:6px}
  .coin-grid{gap:4px}
  .coin{flex-direction:column;align-items:center;gap:0;padding:2px}
  .coin b{font-size:18px;line-height:1.1}
}

/* ===================== the setup page (#sheet-<id>/setup): one page, every field saves on its own ===================== */
.setup-head{display:flex;align-items:center;gap:12px;padding:10px 0 4px;border-bottom:3px dashed var(--parch-edge)}
.setup-head .btn{flex:none;min-height:44px}
.setup-head h1{flex:1 1 auto;min-width:0;margin:0;font:600 28px/1.15 var(--f-display);color:var(--wood-800);overflow-wrap:anywhere}
.su-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px 20px;margin:0 0 10px}
.su-grid.su-checks{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.su-grid.su-slots{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:560px){
  .su-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .su-grid.su-checks,.su-grid.su-slots{grid-template-columns:repeat(3,minmax(0,1fr))}
  .su-wide{grid-column:1/-1}
}
/* a field: its label above (full ink, Lucas), the box, then "✓ Saved" and any error under it */
.su-cell{display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:0}
.su-cell > label{font:14px var(--f-label);letter-spacing:.5px;text-transform:uppercase;color:var(--ink)}
.su-cell > label small{font:inherit}
/* short number fields: label left, the box (and its modifier or unit) right */
.su-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;align-content:start;gap:4px 8px}
.su-row > :is(.saved,.form-error,.su-hint){grid-column:1/-1}
.setup .su-num input:not([type=checkbox]):not([type=radio]):not([type=color]){width:5em;text-align:center;
  font:700 19px var(--f-num);font-variant-numeric:lining-nums tabular-nums}
.setup .su-cell.su-row > select{width:auto;max-width:100%}
.setup ::placeholder{color:var(--ink);font-style:italic}
.setup input[type=color]{width:72px;height:44px;padding:2px;margin:0;border:3px solid var(--outline);border-radius:0;background:#fffaf0;cursor:pointer}
.setup input[type=color]:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.su-mod{min-width:2.4em;text-align:right;font:700 22px var(--f-num);font-variant-numeric:lining-nums tabular-nums}
.su-of{font:17px var(--f-body);color:var(--ink)}
.su-hint{margin:2px 0 0;font:16px/1.4 var(--f-body);color:var(--ink)}
.su-check > label{display:flex;align-items:center;gap:10px;min-height:44px;font:18px var(--f-body);letter-spacing:0;text-transform:none;color:var(--ink);cursor:pointer}
/* "✓ Saved": the HP green darkened to 5.2:1 on parchment (--hp itself is 3.3:1) */
.setup .saved{align-self:flex-start;font:12px var(--f-label);letter-spacing:.5px;color:#2f6a24}
.setup .saved[hidden]{display:none}
.setup .form-error{margin:0;min-height:0;font:700 16px var(--f-body);color:var(--hp-low)}
.setup .form-error:empty{display:none}
.su-btns{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.su-btns .btn{flex:1 1 220px;min-height:52px}
.su-btns .su-levelup{font-size:20px}

/* resources: the class ones read-only, your own as rows of name · max · rest, no box around a row */
.su-classres,.su-reslist{list-style:none;padding:0;margin:0 0 6px}
.su-classres li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:6px 0}
.su-classres li + li,.su-reslist li + li,.su-classres + .su-reslist{border-top:2px dotted var(--parch-edge)}
.su-res-name{font:600 18px var(--f-display);color:var(--wood-800)}
.su-classres b{font:700 20px var(--f-num);font-variant-numeric:lining-nums tabular-nums}
.su-res{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;grid-template-areas:"label label x" "max reset .";gap:8px 12px;padding:10px 0}
.su-res .su-res-label{grid-area:label}
.su-res .su-num{grid-area:max}
.su-res .su-cell:nth-of-type(3){grid-area:reset}
.su-res .su-res-remove{grid-area:x;align-self:end}
@media (min-width:560px){
  .su-res{grid-template-columns:minmax(0,2fr) 6em minmax(0,1.3fr) 44px;grid-template-areas:"label max reset x"}
}
@media (max-width:700px){ .setup-head h1{font-size:24px} }

/* ===================== level up (#sheet-<id>/level-up): one screen, numbered steps split by dashed lines ===================== */
.levelup :where(input:not([type=checkbox]):not([type=radio]):not([type=color]),textarea){
  font:17px var(--f-body);color:var(--ink);background:#fffaf0;border:3px solid var(--outline);box-shadow:inset -3px -3px 0 #e6cf98;
  border-radius:0;min-height:44px;padding:6px 8px;width:100%}
.levelup :where(input,textarea):focus-visible{outline:3px solid var(--gold);outline-offset:1px}
/* The pixel face reads 5 as S and 2 as 8: the title and the average button (both numbers) use the number face. */
.levelup .setup-head h1{font:700 32px/1.15 var(--f-num);font-variant-numeric:lining-nums tabular-nums}
.lu-who{display:block;font:600 18px var(--f-display);color:var(--ink)}
.levelup .lu-top{margin:16px 0;color:var(--ink)}
.lu-step h2{display:flex;align-items:center;gap:12px}
.lu-n{flex:none;display:inline-grid;place-items:center;width:38px;height:38px;background:var(--wood-800);color:var(--cream);
  font:700 22px var(--f-num);font-variant-numeric:lining-nums tabular-nums}
.lu-say{margin:0 0 10px;font-size:18px;color:var(--ink)}
.lu-say:last-child{margin-bottom:0}

/* step 1: the roll box, "or", the average — one row, one height */
.lu-hp{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.lu-hp label{flex-basis:100%;font:14px var(--f-label);letter-spacing:.5px;text-transform:uppercase;color:var(--ink)}
.levelup .lu-hp input{width:5em;height:52px;text-align:center;font:700 24px var(--f-num);font-variant-numeric:lining-nums tabular-nums}
.lu-or{font:italic 18px var(--f-body);color:var(--ink)}
.lu-hp .btn{flex:1 1 240px;min-height:52px;font-size:17px}
.levelup [data-action="lu-average"]{font:700 19px var(--f-num);font-variant-numeric:lining-nums tabular-nums;letter-spacing:0}

/* step 2: what the new level brings */
.lu-feats{list-style:none;padding:0;margin:0}
.lu-feats li{display:flex;flex-direction:column;padding:8px 2px}
.lu-feats li + li{border-top:2px dotted var(--parch-edge)}

/* step 3: +2 / +1 +1, a feat, or not now; then the six scores with − and + */
.lu-choices{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.lu-choices .btn{flex:1 1 140px;min-height:52px;font-size:17px}
.lu-asi{list-style:none;padding:0;margin:0;max-width:460px}
.lu-asi li{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(4.4em,auto) 44px;align-items:center;gap:6px;padding:4px 0}
.lu-asi li + li{border-top:2px dotted var(--parch-edge)}
.lu-ab{font:600 18px var(--f-display);color:var(--wood-800);overflow-wrap:anywhere;min-width:0}
.lu-score{text-align:center;font:700 22px var(--f-num);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.lu-asi .btn{font:700 22px var(--f-num)}
.lu-feat{display:grid;gap:12px;margin:0 0 10px}

/* the error line and the one big button */
.lu-error{margin:14px 0 0;font:700 17px var(--f-body);color:var(--hp-low)}
.lu-error:empty{display:none}
.levelup .su-btns{margin-top:14px}
.levelup .lu-go{flex-basis:100%;min-height:56px;font-size:22px}
@media (max-width:700px){
  .levelup .setup-head h1{font-size:28px}
  .lu-ab{font-size:16px}
  .lu-score{font-size:20px}
}