/* Combat at the table — the phone's combat bar: the initiative prompt, then the turn banner ("Round 2 · Now: Goblin 2",
   "You’re next"), gold "Your turn!" with End my turn. On the board it sits just above the party cards (Lucas), sticky
   while the party section is in view; first in the sheet's sticky bar. */

#combat-bar{position:sticky;top:0;z-index:6;width:min(640px,100%);margin:0 auto 14px}
#combat-bar:empty{display:none}
/* The initiative prompt is tall: on the board it scrolls with the page (the turn banner after it stays sticky). */
#combat-bar:has(> .rolling){position:static}

.combat-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 16px;
  background:var(--parch);color:var(--ink);border:4px solid var(--outline);box-shadow:inset 0 -4px 0 var(--parch-2),0 4px 0 rgba(27,18,16,.35);
  font:19px/1.35 var(--f-body)}
.combat-bar p{margin:0}
.combat-bar b,.combat-bar strong{color:var(--ink)}
.combat-bar .cb-now > b:first-child,.cb-roll b,.cb-saved b{font-family:var(--f-num);font-weight:700;font-variant-numeric:lining-nums tabular-nums}

/* initiative: the call, what to roll, the box and Save, who is in */
.combat-bar .cb-title,.combat-bar .cb-roll,.combat-bar .cb-saved,.combat-bar .cb-in,.combat-bar .form-error{flex-basis:100%}
.cb-title strong{font:600 24px/1.2 var(--f-display);color:var(--wood-800)}
.cb-form{display:flex;align-items:center;gap:8px}
.cb-form input[name=init]{width:5em;min-height:44px;height:44px;padding:4px 8px;font:700 20px var(--f-num);font-variant-numeric:lining-nums tabular-nums;
  color:var(--ink);background:#fffaf0;border:3px solid var(--outline);box-shadow:inset -3px -3px 0 #e6cf98;border-radius:0}
.cb-form input[name=init]:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.cb-form .btn{min-height:44px}
.combat-bar .form-error{min-height:0}
.combat-bar .form-error:empty{display:none}
.cb-in{font-size:17px}

/* the turn banner: "Round 2 · Now: Goblin 2" on one line, "Next" / "You’re next" under it on a phone */
.cb-lines{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;column-gap:.6em}
.cb-now,.cb-next{overflow-wrap:anywhere}
.cb-next.you strong{font-family:var(--f-display);font-weight:600}
/* an enemy's public conditions after its name: small cream-on-red tags (6.9:1), like the sheet's */
.cb-conds{display:inline-flex;flex-wrap:wrap;gap:4px;vertical-align:middle}
.combat-bar .tag.cond{align-self:auto;font:15px/1.3 var(--f-display);text-transform:none;padding:0 6px;background:#94302a;color:var(--cream)}
@media (min-width:701px){ .cb-next::before{content:'· '} }
@media (max-width:700px){ .cb-next{flex-basis:100%} }

/* my turn: gold with dark ink (≈10:1), a short glow when it arrives */
.combat-bar.mine{background:var(--gold);box-shadow:inset 0 -4px 0 #d9a92c,0 4px 0 rgba(27,18,16,.35);animation:cb-glow 1.4s ease-out 2}
.combat-bar.mine .cb-now strong{font:600 24px/1.2 var(--f-display);color:var(--outline)}
.combat-bar.mine .btn{flex:none;min-height:44px}
@keyframes cb-glow{
  0%{box-shadow:inset 0 -4px 0 #d9a92c,0 4px 0 rgba(27,18,16,.35),0 0 0 0 rgba(242,200,75,.9)}
  60%{box-shadow:inset 0 -4px 0 #d9a92c,0 4px 0 rgba(27,18,16,.35),0 0 22px 8px rgba(242,200,75,.75)}
  100%{box-shadow:inset 0 -4px 0 #d9a92c,0 4px 0 rgba(27,18,16,.35),0 0 0 0 rgba(242,200,75,0)}
}
@media (prefers-reduced-motion: reduce){ .combat-bar.mine{animation:none} }

/* inside the sheet's sticky bar: no box in the box — a strip above the name with a dashed line under it */
.sheet-bar .combat-bar{margin:-8px -16px 0;padding:8px 16px;border:0;border-bottom:3px dashed var(--parch-edge);box-shadow:none}
.sheet-bar .combat-bar.mine{border-bottom-color:#b8862a}
@media (max-width:700px){ .sheet-bar .combat-bar{margin:-6px -8px 0;padding:6px 8px} }
/* The initiative prompt opens the sheet's body (out of the sticky bar), ruled off like a section. */
.sheet-body > .combat-bar{margin:0 -16px 6px;padding:8px 16px 12px;border:0;border-bottom:3px dashed var(--parch-edge);box-shadow:none}
@media (max-width:700px){ .sheet-body > .combat-bar{margin:0 -8px 6px;padding:6px 8px 12px} }

/* ---------- death saves: the marks (sheet, iPad card, Luuk's tracker) ---------- */
/* "Successes ■■□  Failures ■□□": labels in ink; each mark is a square pixel pip (--pip), filled or hollow, green for
   successes and red for failures (≥ 5:1 on both parchments). The ●/○ glyphs stay in the markup for copy and fallback. */
.ds-marks{--pip:14px;display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 14px;color:var(--ink);white-space:nowrap}
.ds-marks > span{display:inline-flex;align-items:center;gap:6px}
.ds-dots{display:inline-flex;gap:calc(var(--pip) / 3)}
.ds-dots i{display:block;box-sizing:border-box;width:var(--pip);height:var(--pip);overflow:hidden;font-size:0;line-height:0;
  border:calc(var(--pip) / 5) solid currentColor}
.ds-dots i.on{background:currentColor}
.ds-s .ds-dots{color:var(--ds-ok)}
.ds-f .ds-dots{color:var(--ds-bad)}
.ds-word{font:700 1em var(--f-display)}
.ds-word.stable{color:var(--ds-ok)}
.ds-word.fallen{color:var(--ds-bad)}

/* the sheet: first section, a red heading, the explainer, the marks, then the d20 box and the buttons */
.sheet-sec#sec-death h2{color:var(--ds-bad)}
#sec-death p{margin:6px 0}
#sec-death .ds-line{font:700 20px var(--f-body)}
#sec-death .ds-marks{--pip:18px}
#sec-death .ds-state strong{font-family:var(--f-display);font-weight:700}
#sec-death .ds-state.stable strong{color:var(--ds-ok)}
#sec-death .ds-state.fallen strong{color:var(--ds-bad)}
#sec-death .panel-row{margin:8px 0}
#sec-death .btn{min-height:44px}
#sec-death input[name=ds-roll]{width:5em;min-height:44px;height:44px;padding:4px 8px;font:700 20px var(--f-num);font-variant-numeric:lining-nums tabular-nums;
  color:var(--ink);background:#fffaf0;border:3px solid var(--outline);box-shadow:inset -3px -3px 0 #e6cf98;border-radius:0}
#sec-death input[name=ds-roll]:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
#sec-death .ds-hint{font-size:16px;color:var(--ink)}
#sec-death .form-error:empty{display:none}

/* Luuk's tracker: in the slot the row toggle keeps for them, small but full ink */
.tracker .saves:empty{display:none}
.tracker .saves{display:inline-flex;align-items:center;gap:8px;font:600 15px var(--f-body);color:var(--ink)}
.tracker .saves .ds-marks{--pip:12px;gap:2px 10px}

/* ---------- the fight layout on the sheet (fight-view.js): your turn, Action / Bonus action / Reaction, More ---------- */
/* Sections keep the sheet's headings (26px, 24px on a phone). Rows are flat on the parchment with dashed dividers. */
.fight-turn{margin:14px 0 4px;font:18px/1.45 var(--f-body);color:var(--ink)}
.fight-turn p{margin:0}
.fight-turn .fight-lead{font:600 22px/1.3 var(--f-display);color:var(--wood-800);margin-bottom:2px}
.fight-turn ul{margin:2px 0 6px;padding-left:1.3em}
.fight-turn li{margin:2px 0}
.fight-turn + .sheet-sec{border-top:3px dashed var(--parch-edge)}

.fight-list,.fight-std{list-style:none;padding:0;margin:0}
.fight-list > li + li,.fight-std > li + li{border-top:2px dashed var(--parch-edge)}
.fight-row{min-height:44px;padding:8px 2px;font-size:17px;color:var(--ink)}
.fight-row > b,.fight-tap > b{font:600 19px/1.25 var(--f-display);color:var(--wood-800);overflow-wrap:anywhere}
.fight-row p{margin:2px 0 0;font-size:17px;line-height:1.4;color:var(--ink)}
/* a row that opens its card: the whole row is the tap target, no box around it */
.fight-row:has(> .fight-tap){padding:0}
.fight-tap{display:block;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;cursor:pointer;touch-action:manipulation}
.fight-tap:hover{background:rgba(255,250,240,.45)}
.fight-tap:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
/* what it costs (1 Ki, 1st-level slot): a small full-ink tag */
.sheet-body.fight .cost{display:inline-block;margin-left:6px;padding:0 6px;vertical-align:2px;
  font:600 14px/1.5 var(--f-body);color:var(--ink);border:2px solid var(--ink);white-space:nowrap}
.fight-std > li{min-height:44px;padding:10px 2px;font-size:17px;line-height:1.4;color:var(--ink);box-sizing:border-box}
.fight-std b{font:600 18px var(--f-display);color:var(--wood-800)}
.sheet-body.fight .slot-rows{margin:2px 0 6px}

/* More: the rest of the sheet, folded; the summary is a full-width 44px button */
.fight-more{margin-top:10px;border-top:3px dashed var(--parch-edge);padding-top:14px}
.fight-more > summary{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;box-sizing:border-box;padding:0 10px;
  font:600 17px/1.2 var(--f-display);color:var(--cream);text-align:center;cursor:pointer;touch-action:manipulation;list-style:none;
  border:8px solid transparent;border-image:url(/img/tavern/s-button.png) 4 fill/12px/0 stretch;text-shadow:2px 2px 0 #1b1210}
.fight-more > summary::-webkit-details-marker{display:none}
.fight-more > summary::after{content:'▾';font-size:15px}
.fight-more[open] > summary::after{content:'▴'}
.fight-more > summary:active{border-image-source:url(/img/tavern/s-button-down.png)}
.fight-more > summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.fight-more > .sheet-sec:first-of-type{margin-top:4px}