/* Basis (in de Claude-versie leverde de host dit) */
html{-webkit-text-size-adjust:100%;color-scheme:light}
body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}

/* Lettertypes (WP15, huisstijl): Inter voor alles, Playfair Display alleen voor merk en grote koppen (h1, statblock-naam).
   Zelf meegeleverd: latin-subset, variabel gewicht (één bestand per stijl), werkt offline en zonder Google. Licentie: fonts/OFL.txt.
   Buiten de unicode-range valt de browser terug op de systeemletter. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-latin-wght.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:italic;font-weight:100 900;font-display:swap;src:url("../fonts/inter-latin-wght-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;src:url("../fonts/playfair-display-latin-wght.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Layout: DM-scherm — links de initiative-volgorde als stapel kaarten, rechts (of als sheet op mobiel) het statblock in klassieke rode lijnvoering */
/* Kleurtokens (WP14, huisstijl Kev's Inn). Componenten gebruiken alleen deze tokens, geen hex (tests/contrast.test.js).
   Eigenaarschap: --act* goud = primaire actie, focus (--focus), aan de beurt, geselecteerd (--sel); --good gelukt; --warn aandacht;
   --bad fout, destructief, kritiek; --info info en delen (kamer); neutralen voor vlakken, tekst, randen, secundaire knoppen.
   Op goud altijd --act-fg (walnoot), nooit wit. Helder goud (--act) alleen als vlak; tekst/iconen/ringen in licht via --act-ink.
   Monster/speler zonder kleur: zijstreep alleen bij monsters (--mon), avatar-vorm (AF12), neutrale vlakken. --sb-ink = statblock-inkt (koper, WP17) op --sb-bg (perkament); --card = deelnemerskaart (warm wit).
   Licht = :root; donker twee keer gelijk (systeem en vaste keuze), de test bewaakt dat. */
:root{
  --bg:#f7f6f2; --surface:#ffffff; --sunk:#eceae3; --line:#d6d5cd; --line-strong:#8a8a8a;
  --fg:#1f1f1f; --muted:#5b5b5b;
  --act:#d4a44b; --act-fg:#3b2f26; --act-ink:#7a5714; --act-soft:#f5ead0; --focus:#7a5714; --sel:#7a5714;
  --good:#286b2c; --good-fg:#ffffff; --warn:#8f5a00; --warn-soft:#fbf3e4;
  --bad:#c62828; --bad-soft:#fbe9e7; --info:#1f5fbf;
  --mon:#5b5b5b; --mon-soft:#e2e0da; --pc-soft:#ebdcc6; --sb-ink:#7f4316; --sb-bg:#f6efe3; --card:#fbf7f0;
  --now-ink:#e0b565; /* naam aan de beurt op de walnoot-kop van het spelersscherm (beide thema's) */
  --fight-bg:#3b2f26; --fight-fg:#ffffff; --fight-muted:#d9cfc2; --fight-btn:#4a3c31; --fight-btn-line:#a08c78;
  --t-link:#e0b565; --t-good:#7fe08f; --t-bad:#ff9a90; /* op de melding (achtergrond --fg) */
  --brand:"Playfair Display", Georgia, "Times New Roman", serif; /* alleen merk, h1, statblock-naam */
  --body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display:var(--body); /* koppen, namen en grote cijfers: Inter vet */
  --r:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#151413; --surface:#1f1f1f; --sunk:#2b2825; --line:#3d3934; --line-strong:#8a8278;
  --fg:#ede8e0; --muted:#b5ada2;
  --act:#d4a44b; --act-fg:#2a2019; --act-ink:#e0b565; --act-soft:#3a2f1c; --focus:#e0b565; --sel:#d4a44b;
  --good:#6cc287; --good-fg:#0f2414; --warn:#e3a944; --warn-soft:#2e2614;
  --bad:#f28b82; --bad-soft:#3a2321; --info:#8ab4f8;
  --mon:#b5ada2; --mon-soft:#34312d; --pc-soft:#3b3226; --sb-ink:#d9956a; --sb-bg:#1f1f1f; --card:#231e1a;
  --now-ink:#e0b565;
  --fight-bg:#3a322b; --fight-fg:#ede8e0; --fight-muted:#c9c0b4; --fight-btn:#4a4038; --fight-btn-line:#9a8e80;
  --t-link:#7a5714; --t-good:#276a3a; --t-bad:#b3261e; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#151413; --surface:#1f1f1f; --sunk:#2b2825; --line:#3d3934; --line-strong:#8a8278;
  --fg:#ede8e0; --muted:#b5ada2;
  --act:#d4a44b; --act-fg:#2a2019; --act-ink:#e0b565; --act-soft:#3a2f1c; --focus:#e0b565; --sel:#d4a44b;
  --good:#6cc287; --good-fg:#0f2414; --warn:#e3a944; --warn-soft:#2e2614;
  --bad:#f28b82; --bad-soft:#3a2321; --info:#8ab4f8;
  --mon:#b5ada2; --mon-soft:#34312d; --pc-soft:#3b3226; --sb-ink:#d9956a; --sb-bg:#1f1f1f; --card:#231e1a;
  --now-ink:#e0b565;
  --fight-bg:#3a322b; --fight-fg:#ede8e0; --fight-muted:#c9c0b4; --fight-btn:#4a4038; --fight-btn-line:#9a8e80;
  --t-link:#7a5714; --t-good:#276a3a; --t-bad:#b3261e; color-scheme:dark }
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.4;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-top:max(12px,env(safe-area-inset-top,0px));padding-bottom:max(80px,env(safe-area-inset-bottom,0px))}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}}

header.top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;justify-content:space-between}
h1{font-family:var(--brand);font-weight:800;font-size:1.6rem;margin:0;letter-spacing:0;line-height:1.15;text-wrap:balance}
h1 span{color:var(--act-ink)}
/* WP16 (HS5): embleem vóór het woordmerk, merk en geen knop (geen vlak, rand of tikvlak); schaalt met de h1 (34 px bij 1.6rem) */
h1 .emb{width:1.33em;height:1.33em;vertical-align:-.28em;margin-right:.3em;color:var(--act-ink)}
.round{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.round b{font-family:var(--display);font-size:1.15rem}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 12px;min-height:44px;min-width:44px}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--act);border-color:var(--act);color:var(--act-fg);font-weight:700}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.4;cursor:default}
.btn.small{min-height:44px;padding:4px 10px;font-size:.9rem}
.bar{display:flex;gap:8px;flex-wrap:wrap}

/* Turn banner */
.now{background:var(--act-soft);border:1px solid var(--sel);border-radius:var(--r);padding:10px 14px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.now .lbl{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.now .who{font-family:var(--display);font-size:1.3rem;font-weight:700;color:var(--act-ink)}

/* Order list */
ol.order{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.c{background:var(--card);border:1px solid var(--line);border-radius:var(--r);display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 12px;padding:10px 12px 10px 0;position:relative}
.c.active{border-color:var(--sel);box-shadow:0 0 0 2px var(--sel) inset}
.c.down{opacity:.5}
.c.down .nm{text-decoration:line-through}
.c>*:not(.init){grid-column:2;min-width:0}
.init{grid-column:1;grid-row:1/span 12;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;border-right:1px solid var(--line);padding-top:2px}
.init input{width:44px;text-align:center;border:0;background:transparent;font-family:var(--display);font-weight:700;font-size:1.35rem;font-variant-numeric:tabular-nums;padding:0}
.init small{font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums}
.row1{display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:wrap}
.nm{font-weight:700;font-size:1.05rem;min-width:0;overflow-wrap:anywhere}
.tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;padding:1px 6px;border-radius:4px;background:var(--sunk);color:var(--muted)}
.tag.m{background:var(--mon-soft);color:var(--fg)}
.ac{margin-left:auto;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ac b{color:var(--fg)}
.hp{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.hpbar{flex:1 1 110px;height:8px;border-radius:4px;background:var(--sunk);overflow:hidden;min-width:80px}
.hpbar i{display:block;height:100%;background:var(--good)}
.hpbar i.mid{background:var(--warn)} .hpbar i.low{background:var(--bad)}
.hpnum{font-variant-numeric:tabular-nums;font-size:.9rem;white-space:nowrap}
.thp{color:var(--info);font-weight:700}
.defl{font-size:.8rem;color:var(--muted);margin-top:4px;overflow-wrap:anywhere}
.defl b{color:var(--fg);font-weight:700}
.row3{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;align-items:center}
.pips{display:flex;align-items:center;gap:0;flex-wrap:wrap;margin-top:2px;font-size:.85rem;color:var(--muted)}
.pips .lbl{min-width:0;margin-right:6px}
.pips .pg{display:inline-flex;flex-wrap:wrap} /* pips breken als groep af, niet los van elkaar */
/* AF6: tikvlak 44×44 zonder overlap, het zichtbare bolletje is ::before */
.pip{width:44px;height:44px;border:0;background:none;padding:0;display:inline-grid;place-items:center;color:var(--act-ink);border-radius:8px}
.pip::before{content:"";box-sizing:border-box;width:24px;height:24px;border-radius:50%;border:2px solid currentColor;background:currentColor}
.pip[data-used="true"]::before{background:transparent;opacity:.55}
.pip:focus-visible{outline-offset:-6px}
.lacts{display:grid;gap:8px;margin-top:8px}
.lact{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.lact p{margin:0 0 6px}
.lact.used{opacity:.6}
.lairsel{font-weight:700;font-size:1.05rem;border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:4px 6px;max-width:100%;min-width:0}
.ds{display:flex;align-items:center;gap:4px 12px;flex-wrap:wrap;margin-top:8px;padding:8px 10px;border:1px solid var(--bad);border-radius:8px}
.ds .lbl{font-weight:700;color:var(--bad);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}
.dsg{display:flex;align-items:center;gap:0;font-size:.85rem;color:var(--muted)}
.dsp{width:44px;height:44px;border:0;background:none;padding:0;display:inline-grid;place-items:center;border-radius:8px}
.dsp::before{content:"";box-sizing:border-box;width:26px;height:26px;border-radius:50%;border:2px solid currentColor;background:transparent}
.dsp.s{color:var(--good)} .dsp.f{color:var(--bad)}
.dsp[data-on="true"]::before{background:currentColor}
.dsp:focus-visible{outline-offset:-6px}
/* RE15: cijferpad voor de eigen death save-worp (onder het death-save-blok) */
.dspad{margin-top:8px}
.dspad .dsv{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 6px}
.dspad .dsv b{font-size:1.5rem;font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}
.dspad .pad button:disabled{opacity:.35}
.dspad .pad .ok{font-size:1.05rem}
.dspad .hint{margin:6px 0 0}
.ds .st{font-weight:700}
.ds .st.ok{color:var(--good)} .ds .st.dead{color:var(--bad)}
.rcs{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.rc{font-size:.8rem;min-height:44px;padding:0 12px;border-radius:99px;border:1px solid var(--good);color:var(--good);background:transparent}
.rc[aria-pressed="false"]{border-color:var(--line-strong);color:var(--muted);border-style:dashed}
.tag.l{background:var(--surface);color:var(--fg)}
.c.lair{background:var(--sunk);border-style:dashed}
.chip{font-size:.75rem;padding:2px 8px;border-radius:99px;border:1px solid var(--warn);color:var(--warn);background:transparent}
.link{border:0;background:none;padding:2px 4px;color:var(--muted);font-size:.85rem;text-decoration:underline;text-underline-offset:2px}
/* AF6: knop- en summary-links 44 px hoog (ook midden in een zin: de regel wordt dan hoger) */
button.link,summary.link{display:inline-flex;align-items:center;gap:.3em;min-height:44px;padding:0 8px}
/* inline-flex haalt de standaard ▸ weg: zelf tekenen, behalve waar die al bewust uit stond (.cast, .conds) */
/* WP17 (HS7): chevron als CSS-lijn (geen tekenglyph: Inter heeft ▸/▾ niet); rechts = dicht, omlaag = open */
details:not(.cast):not(.conds)>summary.link::before,.setsec .schev::before{content:"";flex:0 0 auto;width:.42em;height:.42em;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(-45deg);margin:0 .45em 0 .1em}
details[open]:not(.cast):not(.conds)>summary.link::before,.setsec[open] .schev::before{transform:rotate(45deg)}
.link.strong{color:var(--act-ink);font-weight:700}
details.conds{width:100%}
details.conds summary{list-style:none;display:inline-flex}
details.conds summary::-webkit-details-marker{display:none}
.condgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px;margin-top:6px}
.durrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:8px}
.durrow label{font-size:.72rem}
.durrow select,.durrow input{min-height:44px;padding:4px 6px;font-size:.9rem}
.pick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 0 4px 54px}
.pick .conc{border-color:var(--warn);color:var(--warn)}
@media (max-width:420px){.pick{padding-left:0}}
.chip.cbtn{cursor:pointer;font:inherit;font-size:.75rem}
.chip.cbtn:hover{background:var(--warn);color:var(--bg)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.chk{display:flex;align-items:center;min-height:44px;gap:8px;text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--fg)}
.chk input{width:20px;height:20px;min-height:0;accent-color:var(--act-ink)}
.pm{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.pm:last-of-type{border-bottom:0}
.pm .pn{font-weight:700}
.pm .pi{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pm .pc{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.pm .pc input{width:64px;min-height:44px;padding:4px;text-align:center;border:1px solid var(--line-strong);border-radius:6px;background:var(--bg)}
.pm .here{font-size:.8rem;color:var(--good);font-weight:700}
.logbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px}
.logbox summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.05rem;display:flex;gap:8px;align-items:center;min-height:44px}
.lglist{list-style:none;margin:0;padding:0;max-height:55vh;overflow:auto;display:grid;gap:2px}
.lg{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 10px;padding:6px 0;border-bottom:1px dashed var(--line)}
.lg-meta{grid-row:1/span 3;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:2px;min-width:5.5em}
/* hele regel is het tikvlak voor een reden (::after over de rij); notitie en invoer liggen erboven */
.lg-msg{all:unset;overflow-wrap:anywhere;cursor:pointer}
.lg-msg::after{content:"";position:absolute;inset:0}
.lg-msg:focus-visible::after{outline:2px solid var(--focus);outline-offset:-2px;border-radius:6px}
@media (hover:hover){.lg:hover{background:var(--sunk)}}
.lg-tip{margin:0 0 6px}
.gsheet .lg{min-height:44px;align-content:center}
.gsheet .lglist{max-height:none;overflow:visible}
.lg-why{font-size:.85rem;color:var(--muted);font-style:italic}
.lg-note{position:relative;z-index:1;justify-self:start;border:0;background:var(--sunk);color:var(--fg);border-radius:6px;padding:2px 8px;font-size:.85rem;text-align:left}
.lg-in{position:relative;z-index:1;width:100%;border:1px solid var(--line-strong);border-radius:6px;background:var(--bg);padding:6px 8px;margin-top:2px}
.lg-round{font-family:var(--display);font-weight:700;color:var(--fg);padding:10px 0 2px;border-bottom:1px solid var(--line-strong)}
.lg-turn{font-size:.78rem;color:var(--muted);padding:4px 0 0;text-transform:uppercase;letter-spacing:.06em}
@media (max-width:420px){.lg{grid-template-columns:minmax(0,1fr)}.lg-meta{grid-row:auto}}
.chip .dl{opacity:.8;font-variant-numeric:tabular-nums}
.condgrid button{font-size:.82rem;min-height:44px;padding:2px 4px;border-radius:10px;border:1px solid var(--line);background:var(--bg)}
.condgrid button[aria-pressed="true"]{border-color:var(--warn);color:var(--warn);font-weight:700}

/* Voorbereiden: paneel met de formulieren (knoppen in de beurtbalk) */
.psheet{gap:12px}
.psheet .plair{justify-self:start}
/* grid-items mogen smaller worden dan hun inhoud, zodat brede onderdelen zelf scrollen i.p.v. de pagina op te rekken */
.wrap>section>*{min-width:0}
.form{display:grid;gap:10px}
.f2{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
label{display:grid;gap:3px;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
label input,label select,label textarea{text-transform:none;letter-spacing:0;font-size:1rem;color:var(--fg);border:1px solid var(--line-strong);border-radius:6px;background:var(--bg);padding:8px;min-height:44px;width:100%}
textarea{min-height:120px;resize:vertical}
.mlist{max-height:min(240px,32vh);max-height:min(240px,32dvh);overflow:auto;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
.mlist button{display:flex;width:100%;min-height:44px;align-items:center;justify-content:space-between;gap:8px;border:0;border-bottom:1px solid var(--line);background:transparent;padding:8px 10px;text-align:left}
.mlist button:last-child{border-bottom:0}
.mlist button[aria-pressed="true"]{background:var(--act-soft);color:var(--fg);font-weight:700;box-shadow:inset 3px 0 0 var(--sel)}
.mlist button>span:first-child{display:flex;align-items:flex-start;gap:8px;min-width:0}
.mlist .mi{flex:0 0 18px;width:18px;height:18px;margin-top:2px;color:var(--muted)}
.mlist button[aria-pressed="true"] .mi{color:var(--fg)}
.mlist .cr{color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.mlbl{font-size:.85rem;font-weight:700;color:var(--fg);margin:0}
/* Preview vóór toevoegen: compacte kaart onder de lijst */
.mprev{display:grid;gap:3px;padding:10px 12px;border:1px solid var(--line);border-left:4px solid var(--mon);border-radius:8px;background:var(--surface);font-size:.9rem;min-width:0;overflow-wrap:anywhere}
.mprev p{margin:0}
.mphead{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.mphead b{font-family:var(--display);color:var(--fg);font-size:1.1rem}
.mphead span{font-style:italic;color:var(--muted);font-size:.85rem}
.mpstat{font-variant-numeric:tabular-nums}
.mpdef{color:var(--muted);font-size:.85rem}
.mpmulti,.mptext{color:var(--muted);font-size:.85rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mptext{-webkit-line-clamp:3;white-space:pre-line}
.mpatk{font-weight:700}
.mpmore,.mptraits{color:var(--muted);font-size:.85rem}
.mptraits{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mptags{display:flex;flex-wrap:wrap;gap:4px}
.mpfull{justify-self:start;min-height:44px}
.sbx{border-top:2px solid var(--sb-ink);padding-top:6px}
.sbprev{margin:2px 0 0;font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--info)}
.hint{font-size:.85rem;color:var(--muted);margin:0}
/* Instellingen: kopjes en een gesegmenteerde keuze (Systeem/Licht/Donker) */
.appver{text-align:center;margin-top:8px;font-variant-numeric:tabular-nums}
.sethead{font:700 .75rem/1.2 var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:4px 0 0}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{flex:1 1 0;min-width:0;min-height:44px;border:0;border-left:1px solid var(--line);background:var(--surface);color:var(--fg);font:inherit;padding:0 6px}
.seg button:first-child{border-left:0}
.seg button[aria-pressed="true"]{background:var(--act-soft);color:var(--fg);font-weight:700;box-shadow:inset 0 -3px 0 var(--sel)}

/* Statblock */
.sbwrap{position:sticky;top:12px}
.sb{background:var(--sb-bg);border:1px solid var(--line);border-top:4px solid var(--sb-ink);border-bottom:4px solid var(--sb-ink);border-radius:4px;padding:14px 16px;max-height:calc(100vh - 24px);overflow:auto}
.sb h2{font-family:var(--brand);font-weight:700;color:var(--sb-ink);font-size:1.6rem;margin:0;line-height:1.1}
.sb .meta,.sbx .meta{font-style:italic;color:var(--muted);margin:2px 0 8px;font-size:.9rem;line-height:1.3}
.sb hr,.sbx hr{border:0;height:2px;background:linear-gradient(90deg,var(--sb-ink),transparent);margin:8px 0}
.sb p,.sbx p{margin:4px 0;line-height:1.9}
.lact p,#rsheet p,.sb .pre{line-height:1.9} /* AF14: overal waar diceify worpen zet */
.sb .k,.sbx .k{color:var(--sb-ink);font-weight:700}
.abil{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));text-align:center;font-variant-numeric:tabular-nums;gap:2px}
.abil b{display:block;color:var(--sb-ink);font-size:.8rem;letter-spacing:.06em}
.abil button{border:0;background:none;padding:2px;border-radius:4px}
.abil button:hover{background:var(--sunk)}
/* WP17 (HS6): ability-knoppen ≥ 44 px op 320 px: geen gap en tot in de padding van het statblock */
@media (max-width:379px){.abil{gap:0;margin-inline:-10px}}
.sb h3,.sbx h3{font-family:var(--display);color:var(--sb-ink);font-size:1.15rem;border-bottom:1px solid var(--sb-ink);margin:12px 0 6px;font-weight:700}
.sb .entry b i,.sbx .entry b i{font-style:italic}
.sb .entry,.sbx .entry{white-space:pre-line}
.cast{margin-top:6px;width:100%}
.cast summary{list-style:none;display:inline-flex}
.cast summary::-webkit-details-marker{display:none}
.castbox{display:grid;gap:6px;margin-top:6px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.slotrow{display:grid;grid-template-columns:44px auto minmax(0,1fr);gap:4px 10px;align-items:center}
.slotrow .lv{font-family:var(--display);font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap}
.slotrow .pp{display:flex;gap:0;flex-wrap:wrap}
.slotrow .sp{font-size:.82rem;color:var(--muted);min-width:0;overflow-wrap:anywhere}
.resrow{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:4px 10px;align-items:center}
.resrow .rn{font-weight:700;color:var(--fg);font-size:.9rem;overflow-wrap:anywhere}
.resrow .pp{display:flex;gap:0;flex-wrap:wrap;align-items:center}
.resrow .sp{grid-column:2;font-size:.8rem;color:var(--muted)}
/* AF6: pips van 44 px; op de telefoon spellnamen onder de slots en resources onder hun naam */
@media (max-width:420px){.slotrow{grid-template-columns:44px minmax(0,1fr)}.slotrow .sp{grid-column:2}.resrow{grid-template-columns:minmax(0,1fr)}.resrow .sp{grid-column:1}}
.slotin{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px}
.slotin label{font-size:.7rem;text-align:center}
.slotin input{padding:6px 2px;text-align:center;min-height:44px}
@media (max-width:420px){.slotin{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* AF14: inline in een zin (WCAG 2.5.8-uitzondering), daarom geen 44 px; wel ± 28 px hoog met een ruimere regel in het statblock */
.dice{border:0;border-bottom:1px dotted var(--act-ink);background:none;padding:4px 3px;margin:0 -1px;border-radius:6px;line-height:1.25;color:var(--act-ink);font-weight:700}
.dice:hover{background:var(--act-soft)}
/* WP17 (HS6): één patroon voor lege toestanden (geen icoon/embleem, zie WP16): gestippeld vak, rustige tekst */
.empty{color:var(--muted);font-size:.95rem;text-align:center;padding:24px 16px;margin:0;border:1px dashed var(--line-strong);border-radius:var(--r)}
.sbhead{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:0 8px}
.sbhead>div:first-child{display:contents}
.sbhead>.sbbtns{grid-column:2;grid-row:1}
.sbhead .meta{grid-column:1/-1}
.sbhead h2{align-self:center}
.closebtn{display:none}
.pre{white-space:pre-wrap}
.credit{font-size:.75rem;color:var(--muted);margin-top:14px}

.sbbtns{display:flex;gap:6px;flex:0 0 auto}
.sbbig{display:none}
.sbpin{min-height:44px;min-width:56px}
.sbpin[aria-pressed="true"]{background:var(--act-soft);border-color:var(--sel);color:var(--fg);font-weight:700}
.sbturn{display:flex;align-items:center;gap:6px;width:100%;min-height:44px;margin:0 0 8px;padding:6px 12px;border:1px solid var(--sel);border-radius:8px;background:var(--act-soft);color:var(--fg);text-align:left}
@media (min-width:900px){#sbturn:not(:empty)+.sb{max-height:calc(100vh - 76px)}} /* id-selector: niet over de telefoonhoogte heen */
.sbturn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Speler-sheet: live-blok bovenaan (alleen-lezen; bediening zit op de kaart) */
.livest{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;text-align:center;font-variant-numeric:tabular-nums}
.livest>div{background:var(--sunk);border-radius:6px;padding:4px 2px}
.livest .lk{display:block;font-size:.72rem;letter-spacing:.06em;color:var(--muted);font-weight:700}
.livest b{font-family:var(--display);font-size:1.25rem}
.livest b.acx{color:var(--info)}
.sb .badges{padding:6px 0 0}
.cnts{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.cnt{white-space:nowrap;font-variant-numeric:tabular-nums}
.cnt b{color:var(--muted);font-weight:700}
/* Telefoon: statblock half hoog boven de beurtbalk (Volgende blijft bereikbaar), Groot = tot bijna bovenaan */
@media (max-width:899px){
  .sbwrap{position:fixed;left:0;right:0;top:auto;bottom:var(--dock-h);z-index:14;padding:0 max(8px,env(safe-area-inset-right,0px)) 0 max(8px,env(safe-area-inset-left,0px))}
  .sbwrap[data-open="false"]{display:none}
  .sb{max-height:45vh;max-height:45dvh;border-radius:12px 12px 0 0;border-bottom:0;box-shadow:0 -8px 30px rgba(0,0,0,.25);padding-top:10px}
  .sbwrap[data-big="true"] .sb{max-height:calc(100vh - var(--dock-h) - env(safe-area-inset-top,0px) - 12px);max-height:calc(100dvh - var(--dock-h) - env(safe-area-inset-top,0px) - 12px)}
  .sbhead{position:sticky;top:-10px;background:var(--sb-bg);z-index:1;padding-top:2px}
  .closebtn,.sbbig{display:inline-flex;min-height:44px;min-width:56px;align-items:center;justify-content:center}
  .sbpin,#sbturn{display:none}
  body[data-sb="open"]{padding-bottom:calc(var(--dock-h) + 45vh + 24px);padding-bottom:calc(var(--dock-h) + 45dvh + 24px)}
}

/* Roll toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--dock-h) + 8px);z-index:50;display:flex;flex-direction:column;gap:6px;width:min(480px,calc(100% - 16px));pointer-events:none}
.toast:empty{display:none}
.tmsg{pointer-events:auto;background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:10px;font-variant-numeric:tabular-nums;box-shadow:0 6px 24px rgba(0,0,0,.3);max-height:30vh;max-height:30dvh;overflow:auto;overflow-wrap:anywhere}
.tmsg .tico{width:18px;height:18px;color:var(--t-bad);margin-right:8px;vertical-align:-.25em} /* WP17: alleen weigering/fout */
.toast b{font-size:1.25rem}
.toast .crit{color:var(--t-good)} .toast .fumble{color:var(--t-bad)}
.confirm{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.9rem}
@media (prefers-reduced-motion:no-preference){.c{transition:box-shadow .15s,border-color .15s}}

/* Opslag-tab */
#imp-text{min-height:110px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem}
.confirmbox{border:1px solid var(--warn);border-radius:8px;padding:10px 12px;display:grid;gap:8px}
/* GV7: vraag boven Start in de dock */
.oldask{margin-bottom:8px;background:var(--warn-soft)}
.oldask p{margin:0;font-size:.9rem}
.oldask .bar{flex-wrap:wrap;align-items:center}
.dock .oldask .link{border:0;background:none;font-weight:400;padding:0 8px;min-height:44px} /* geen dock-knoprand: Annuleer is een link */
.dock .oldask .btn{min-height:44px;font-size:1rem}

/* ===== Compacte kaarten (één open), beurtbalk onderaan, schade-paneel ===== */
:root{--dock-h:118px}
body{padding-bottom:calc(var(--dock-h) + 24px + env(safe-area-inset-bottom,0px))}
header.top{align-items:baseline}
.sum{display:flex;gap:12px;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.sum b{color:var(--fg)}
ol.order{gap:6px}
.c.k{display:block;padding:0;position:relative;overflow:hidden}
.c.k>*{grid-column:auto;min-width:0}
.c.k::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:transparent}
.c.k.mon::before{background:var(--mon)}
.c.k.open{border-color:var(--sel);box-shadow:0 0 0 2px var(--sel) inset}
/* WP14: aan de beurt = gouden vlak achter initiative en ▶ (plek, geen rand); geopend = ring (--sel). Samen op één kaart: vlak + ring.
   Het vlak zelf is 2,3:1 tegen de kaart (licht): toegestaan, want ▶ (walnoot op goud, 5,7:1) en aria-current dragen de betekenis.
   .c.k.lair.turn>.i wint van de lair-reset (.c.k.lair>.i{all:unset} en display:inline-block verderop). */
.c.k.turn .i,.c.k.lair.turn>.i{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;background:var(--act);color:var(--act-fg);padding:6px 0}
.c.k.out{opacity:.55}
.c.k.out .n span{text-decoration:line-through}
.khead,.c.k.lair>.i,.c.k.lair>.n,.c.k.lair>.meta{all:unset}
.khead{box-sizing:border-box;width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:4px 10px;padding:10px 12px 8px 4px;cursor:pointer;color:var(--fg);font:inherit}
.khead:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:var(--r)}
.c.k .i{font-family:var(--display);font-weight:700;font-size:1.2rem;text-align:center;font-variant-numeric:tabular-nums;line-height:1}
.c.k .tri{display:block;font-size:.65rem;color:inherit;margin-top:2px}
.c.k .n{font-weight:600;font-size:1.02rem;min-width:0;letter-spacing:-.01em}
.c.k .n{display:flex;align-items:center;gap:8px}
.c.k .n>.nm{display:block;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c.k .meta{font-size:.82rem;color:var(--muted);white-space:nowrap}
.hpw{grid-column:2/4;display:flex;align-items:center;gap:8px}
.hpw .bar{display:block;flex:1;height:6px;border-radius:3px;background:var(--sunk);overflow:hidden}
.hpw .bar i{display:block;height:100%;background:var(--good)}
.hpw .bar i.mid{background:var(--warn)}.hpw .bar i.low{background:var(--bad)}
.hpn{font-size:.85rem;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
/* Gevecht (GV1): HP-rij als eigen knop onder de kop, tik = schadepaneel; links uitgelijnd onder de naam (4 + 44 + 10) */
.c.k.fhp .khead{padding-bottom:0;min-height:44px}
.khp{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 12px 0 58px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.khp .hpn{color:var(--fg)}
.khp:active{background:var(--sunk)}
.khp:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:var(--r)}
/* Avatar: portret of icoon (ras / creature type) */
.av{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;overflow:hidden;background:var(--mon-soft);color:var(--fg)}
.pm .av,.c.k.pc .av{background:var(--pc-soft);color:var(--fg)}
.av .ic{width:20px;height:20px}
.av.img{background:var(--sunk)}
.av img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.ic{fill:currentColor}
/* WP17 (HS7): lijn-iconen uit icons/ui.svg (ico() in js/ui/icons.js); kleur = currentColor, maat volgt de letter */
.li{width:1em;height:1em;flex:0 0 auto;vertical-align:-.14em;overflow:visible}
.li.dn{transform:rotate(90deg)}
.tri .li{display:block;width:.9em;height:.9em;margin:0 auto}
.c.k .tri .li{width:12px;height:12px}
.li.big{width:22px;height:22px;vertical-align:middle} /* icoonknoppen: ✎ en + in de Gevecht-kop, ⚙ in de prep-rij */
#undo .li,.c.k .acts [data-p="more"] .li,.emore .li{width:22px;height:22px;vertical-align:middle}
.c.k.out .av{filter:grayscale(1)}
/* AF12: monster of speler niet alleen via kleur: speler rond, monster afgeronde rechthoek */
.c.k.mon .av,.pvc.monster .av{border-radius:6px}
.hint .pv{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:50% 20%;vertical-align:middle}
.badges{display:flex;gap:5px;flex-wrap:wrap;padding:0 12px 10px 48px}
.kbody .badges{padding:0 0 8px}
.bd{flex:0 0 auto;font-size:.75rem;padding:2px 8px;border-radius:99px;border:1px solid var(--line);color:var(--muted);white-space:nowrap;background:transparent;font-family:inherit;line-height:1.5}
.bd.cc{border-color:var(--warn);color:var(--warn)}
.bd.g{border-color:var(--good);color:var(--good)}
.bd.w{border-color:var(--warn);color:var(--warn);font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.bd.r{border-color:var(--bad);color:var(--bad);max-width:100%;overflow:hidden;text-overflow:ellipsis}
.bd.b{border-color:var(--info);color:var(--info)}
.bd.cbtn{cursor:pointer;min-height:44px;padding-inline:10px}
.kbody{padding:0 12px 12px 48px;display:grid;gap:8px}
.acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.acts button{min-height:46px;border-radius:10px;border:1px solid var(--line);background:var(--bg);font-weight:600;font-size:.8rem;letter-spacing:-.01em;padding:4px 2px;color:var(--fg)}
.acts button[aria-pressed="true"]{background:var(--act-soft);color:var(--fg);border-color:var(--sel);box-shadow:inset 0 0 0 1px var(--sel)}
.acts .dmg2{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.acts .heal2{color:var(--good)}
.acts .wide{grid-column:span 2}
.kpanel{display:grid;gap:8px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.kpanel.more{display:flex;flex-wrap:wrap;align-items:end;gap:8px}
.kpanel .inl{display:grid;gap:3px}
.kpanel .inl input{width:80px;min-height:44px}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.pip.lr::before{border-radius:4px;transform:rotate(45deg) scale(.85)}
.c.k.lair{padding:0}
.c.k.lair>.i,.c.k.lair>.n,.c.k.lair>.meta{display:inline-block}
.c.k.lair{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:4px 10px;padding:10px 12px 0 4px}
.c.k.lair .kbody{grid-column:1/-1;padding:0 0 12px 44px}
@media (max-width:420px){.kbody{padding-left:14px}.badges{padding-left:14px}.c.k.lair .kbody{padding-left:10px}}

/* Beurtbalk */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.08);
  padding:10px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.dock>*{max-width:680px;margin-inline:auto}
.dock .who{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.dock .who .l{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.dock .who>span:first-child{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden}
.dock .who b{font-family:var(--display);font-size:1.05rem;font-weight:700;color:var(--act-ink);display:inline-block;max-width:100%;vertical-align:bottom;overflow:hidden;text-overflow:ellipsis}
.dock .who b:not(:last-child){max-width:calc(100% - 3.5em)}
.dock .who .gk{font-size:.85rem;font-weight:700;color:var(--muted);white-space:nowrap}
.dock .who .r{font-size:.8rem;color:var(--muted);text-align:right;min-width:0;max-width:50%;flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock .row{display:grid;grid-template-columns:52px 52px minmax(0,1fr);gap:8px}
.dock .prow{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.9fr) 50px;gap:6px;margin-bottom:8px}
.dock .prow button{min-height:48px;font-size:.95rem;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;justify-content:center}
.dock .prow button[aria-pressed="true"]{border-color:var(--sel);color:var(--fg);background:var(--act-soft)}
@media (max-width:340px){.dock .prow .pp{display:none}}
.dock .row.one{grid-template-columns:52px minmax(0,1fr)}
.dock button{min-height:50px;border-radius:12px;border:1px solid var(--line);background:var(--bg);font-weight:700;font-size:1.05rem;color:var(--fg)}
.dock button:disabled{opacity:.4}
.dock .nx{background:var(--act);border-color:var(--act);color:var(--act-fg)}
/* desktop: beurtbalk precies onder de linkerkolom (kolommen 1.1fr / 1fr, gap 16px, max 1180px) */
@media (min-width:900px){.dock{--wrapw:min(1180px,calc(100vw - 32px));left:calc((100vw - var(--wrapw)) / 2);right:auto;width:calc((var(--wrapw) - 16px) * 1.1 / 2.1);border:1px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0;padding-inline:16px}}

/* Schade-paneel */
.sheet-wrap{position:fixed;inset:0;z-index:40}
.sheet-wrap .dim{position:absolute;inset:0;background:rgba(10,12,18,.45)}
.sheet{position:absolute;left:0;right:0;bottom:0;max-width:480px;margin-inline:auto;background:var(--surface);border-radius:20px 20px 0 0;
  padding:10px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));box-shadow:0 -10px 30px rgba(0,0,0,.25);display:grid;gap:10px}
.grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto}
.shead{display:flex;justify-content:space-between;align-items:center}
.shead .link{min-width:44px;min-height:44px;margin:-10px -8px -10px 0;padding:0 8px;justify-content:center}
.shead h3{margin:0;font-family:var(--display);font-size:1.2rem}
.seg2{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg2 button{border:0;background:transparent;padding:10px 4px;font-weight:700;font-size:.9rem;color:var(--muted);min-height:44px}
.seg2 button+button{border-left:1px solid var(--line)}
.seg2 button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.seg2.sm button{font-size:.8rem;min-height:44px;padding:6px 2px}
.disp{font-family:var(--display);font-size:2.4rem;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.preview{text-align:center;color:var(--muted);font-size:.95rem;min-height:1.4em}
.preview b{color:var(--fg)}.preview .bad{color:var(--bad)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pad button{min-height:52px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-size:1.35rem;font-weight:700;color:var(--fg)}
.pad .go{grid-column:span 3;font-size:1.05rem;color:var(--act-fg);background:var(--act);border-color:var(--act)}
.pad .go.go-heal{background:var(--good);border-color:var(--good);color:var(--good-fg)}
.pad .go.go-thp{background:var(--info);border-color:var(--info);color:var(--bg)}
.pad .go:disabled{opacity:.45}

/* ===== Modi (1.29.0): modus volgt het gevecht. Voorbereiden = fase-aanduiding; Gevecht = eigen kop; tussendoor = amberkleurige balk =====
   Kleuren: tokens --fight-* bovenaan (WP14): licht = walnoot als vlak, donker = warm neutraal en lichter dan de kaarten; contrast in
   tests/contrast.test.js. Geen goud in de kop (goud = actie/beurt; Volgende staat in de dock), geen rood, geen zijstreep (= monster).
   Knoprand ≥ 3:1. Geen color-mix (oudere iPads). */
.modes{min-width:0}
body[data-mode="fight"] header.top,body[data-run][data-mode="prep"] header.top{display:none}
body[data-mode="fight"] #resetbar{display:none}
.phase{display:flex;align-items:center;gap:8px;margin:0;font-size:.9rem;color:var(--muted)}
.phase .st{display:inline-flex;align-items:center;gap:6px}
.phase .dot{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums}
.phase .on{color:var(--fg);font-weight:700}
.phase .on .dot{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.phase .ln{flex:0 0 28px;height:1.5px;background:var(--line)}
.fhead{background:var(--fight-bg);color:var(--fight-fg);border-radius:14px;padding:12px 10px 12px 14px;display:flex;align-items:center;gap:8px}
.fhead .ft{flex:1 1 auto;min-width:0;display:grid;justify-items:start;text-align:left;font:inherit;color:inherit;background:transparent;border:1px solid var(--fight-btn-line);border-radius:12px;padding:6px 8px;margin:-6px 0 -6px -8px;cursor:pointer}
.fhead .ft:focus-visible{outline-color:var(--fight-fg)}
@media (hover:hover){.fhead .ft:hover{background:var(--fight-btn)}}
.fhead .lk{color:var(--fight-fg);white-space:nowrap} /* WP17: chevron breekt niet los af */
.fhead .l{font-size:.72rem;letter-spacing:.03em;white-space:nowrap;text-transform:uppercase;color:var(--fight-muted)}
.fhead .rn{font-family:var(--display);font-size:2rem;line-height:1.05;font-weight:700;white-space:nowrap}
.fhead .fsum{font-size:.78rem;letter-spacing:-.01em;color:var(--fight-muted);margin-top:4px;font-variant-numeric:tabular-nums}
.fhead .fsum>span{white-space:nowrap} /* WP15: past op 320 px tot 9/9; daarboven breekt hij tussen Party en Vijanden, nooit een aantal achter een ellipsis */
.fhead .fsum b{color:var(--fight-fg)}
.fhead .fb{flex:0 0 auto;min-width:48px;min-height:48px;border-radius:12px;border:1px solid var(--fight-btn-line);background:var(--fight-btn);color:var(--fight-fg);font-weight:700;font-size:.95rem;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px}
.fhead .fb.ic{padding:0}
.fhead .fi{display:inline-flex}
.fhead .fb:focus-visible{outline-color:var(--fight-fg)}
@media (max-width:379px){.fhead .fl{display:none}.fhead .fb{padding:0}}
.runbar{margin:0;border:1px solid var(--warn);background:var(--warn-soft);color:var(--fg);border-radius:12px;padding:10px 14px;font-size:.95rem;font-weight:700}
.dock .why{margin:6px 0 0;text-align:center;font-size:.85rem;color:var(--muted)}

/* Kaart in Voorbereiden (IN2): velden direct invullen, inrichtknoppen */
.pfs{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:6px}
.pfs.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.pf{display:grid;gap:3px;align-content:start;min-width:0}
.pf .pl{font-size:.75rem;font-weight:700;letter-spacing:.04em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf .pl small{font-weight:400;letter-spacing:0}
.pbox{display:flex;align-items:center;min-height:48px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface)}
.pbox.nv{border-style:dashed}
.pbox:focus-within{border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}
.pbox input{flex:1 1 auto;min-width:0;width:100%;min-height:46px;border:0;background:transparent;color:var(--fg);font-weight:700;font-size:1.15rem;text-align:center;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.pbox input::-webkit-inner-spin-button,.pbox input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.pbox input:focus{outline:none}
.pbox .of{flex:0 0 auto;padding-right:10px;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.pnow{margin:-2px 0 0}
.ppas{margin:2px 0 0;font-variant-numeric:tabular-nums}
.acts.pacts.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.acts.pacts.n5{grid-template-columns:repeat(3,minmax(0,1fr))}
.acts.pacts.n5>:nth-child(4){grid-column:span 2}

/* Snel toevoegen tijdens het gevecht */
.qsheet{max-height:calc(100dvh - 24px);overflow:auto}
.qlist{max-height:min(220px,32dvh)}
.qrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
/* Monsters toevoegen (IN4): één blok in het Monster-paneel en bij snel toevoegen */
.addblk{display:grid;gap:10px}
.addblk .addh{margin:0}
.stepper button:disabled{opacity:.4}
.seg2.init3 button{padding-inline:4px}
.qcol{display:grid;gap:3px;min-width:0}
.qlbl{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.stepper{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;border:1px solid var(--line);border-radius:10px;overflow:hidden;align-items:center}
.stepper button{min-height:44px;border:0;background:transparent;font-size:1.25rem;font-weight:700;color:var(--fg)}
.stepper output{text-align:center;font-weight:700;font-size:1.1rem;font-variant-numeric:tabular-nums}
.qgo{min-height:50px;font-size:1.05rem}

/* Meldingen boven de beurtbalk (nieuwste onderaan, bij de duim); met een open paneel bovenaan, want daar zitten de knoppen onderaan */
body:has(.sheet-wrap:not([hidden])) .toast{top:calc(8px + env(safe-area-inset-top,0px));bottom:auto;flex-direction:column-reverse}
@media (min-width:900px){.toast{--wrapw:min(1180px,calc(100vw - 32px));left:calc((100vw - var(--wrapw)) / 2);transform:none;width:calc((var(--wrapw) - 16px) * 1.1 / 2.1)}}
.tundo{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0 -10px 6px;padding:0 6px;vertical-align:middle;background:none;border:0;color:var(--t-link);text-decoration:underline;cursor:pointer;font:inherit;font-weight:700}

/* AoE: schade op meerdere doelen */
.dock .row{grid-template-columns:48px 52px 60px minmax(0,1fr)}
/* Vorige: pijl met klein bijschrift eronder (AF3), zelfde breedte als een icoonknop */
.dock .pv{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:0;line-height:1}
.dock .pvl{font-size:.7rem;font-weight:600;color:var(--muted);margin-top:2px}
.dock .row.one{grid-template-columns:52px minmax(0,1fr)}
.dock .aoeb{font-size:.95rem}
@media (max-width:399px){.dock .nb{display:none}}
.asheet{gap:12px}
.arow{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:end}
.arow #a-dmg{font-family:var(--display);font-weight:700;font-size:1.5rem;text-align:center;padding:4px}
/* RE18/RE1: caster, schade-spell, slot en dobbelstenen bovenaan de tab Schade */
.acast,.aspell{display:grid;gap:8px}
.dchips{display:flex;flex-wrap:wrap;gap:6px}
.dchips:empty{display:none}
.dchips .btn{display:inline-flex;align-items:baseline;gap:6px}
.dchips .btn small{font-size:.72rem;color:var(--muted);font-weight:400}
.dsel{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0 0 0 10px;border-radius:10px;background:var(--act-soft)}
.dsel button.link{min-width:44px;justify-content:center;font-size:1.1rem}
.aslot{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px}
.aslot .seg2 button small{font-weight:400}
.adice{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.adice .btn{min-width:64px}
.asave{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:var(--sunk)}
.asave select,.asave input{min-height:44px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);padding:0 8px;font-size:1rem}
.asave input{width:72px;text-align:center}
.asave .btn{margin-left:auto}
.asel{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.alist{display:grid;gap:8px}
.at{border:1px solid var(--line);border-radius:10px;padding:4px 10px 10px;display:grid;gap:8px;background:var(--surface)}
.at.off{border-style:dashed;background:transparent;padding-bottom:4px}
.at.off .atn>span:first-child{color:var(--muted)}
.atop{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;text-transform:none;letter-spacing:0;color:var(--fg);font-size:1rem}
.atop input{width:22px;height:22px;min-height:0;margin:0;flex:0 0 auto;accent-color:var(--act-ink)}
.atn{flex:1 1 auto;min-width:0;font-weight:700;overflow-wrap:anywhere}
.atn small{display:block;font-weight:400;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.adealt{font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--bad);font-variant-numeric:tabular-nums;white-space:nowrap}
.adealt.zero{color:var(--muted)}
.acalc{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.acalc b{color:var(--fg)}.acalc .bad{color:var(--bad)}
.at .link{justify-self:start}
/* Spell op doelen (tab in het AoE-paneel) */
.atabs{margin-top:-4px}
.spgrid .btn{min-height:48px}
.spgrid .btn[aria-pressed="true"]{border-color:var(--sel);box-shadow:inset 0 0 0 1px var(--sel);background:var(--act-soft)}
.scast{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px}
.scast select{min-height:44px;min-width:0}
.sform{display:grid;gap:8px}
.schk{display:flex;flex-wrap:wrap;gap:4px 16px}
.schk label{display:flex;align-items:center;gap:8px;min-height:44px;text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--fg)}
.schk input{width:22px;height:22px;min-height:0;margin:0;accent-color:var(--act-ink)}
.sres{font-size:.9rem;color:var(--bad);text-align:right;flex:0 1 auto;max-width:42%;overflow-wrap:anywhere}
.sres.zero{color:var(--muted);font-weight:400}
#s-info:empty{display:none}
/* IN9: hoofdknop van een paneel plakt onderaan (duimbereik); .sfoot voor toevoegen en initiative */
.afoot,.sfoot{position:sticky;z-index:1;bottom:calc(-16px - env(safe-area-inset-bottom,0px));background:var(--surface);display:grid;gap:6px;margin:0 calc(-1 * max(16px,env(safe-area-inset-right,0px))) calc(-16px - env(safe-area-inset-bottom,0px)) calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding:8px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));text-align:center;border-top:1px solid var(--line)}
.psheet .sfoot{margin-bottom:0} /* in het paneel volgt nog "+ Lair actions" */
.qsheet{scroll-padding-bottom:84px} /* gefocust veld niet onder de plakkende voet */
.ago:disabled{opacity:.45}

/* D&D Beyond-link (spelersformulier) */
.ddbrow{display:flex;gap:6px;min-width:0}
.ddbrow input{flex:1;min-width:0}
.btn.tap{min-height:44px}
label.sub{font-size:.75rem}
label .cw{display:none;color:var(--warn);font-weight:700}
label.warn .cw{display:inline}
label.warn .opt{display:none}
.f2>label{align-content:end} /* velden op één lijn, ook als een label over twee regels loopt */
/* SP4/AF15: veld zonder input (stepper) dat eruitziet als een label; foutregel onder een veld (formulier zonder browser-bubbels) */
.lab{display:grid;gap:3px;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;align-content:end}
.lab .stepper{text-transform:none;letter-spacing:0;color:var(--fg)}
.lhint{font-size:.75rem;text-transform:none;letter-spacing:0}
.ferr{color:var(--bad);font-size:.85rem;text-transform:none;letter-spacing:0;line-height:1.3}
input[aria-invalid="true"]{border-color:var(--bad)} /* geen :has (oudere iPads) */
label.warn input{border-color:var(--warn);box-shadow:0 0 0 1px var(--warn)}
.warnline{color:var(--warn)}

#pc-match .bar .btn{flex:1 1 130px}

/* Tijdelijke effecten en bewerken (open kaart) */
/* AF13: AC als schildje in de kaartkop; past in de bestaande kophoogte, "neer" blijft gewone tekst */
.c.k .meta .acv{display:inline-grid;place-items:center;min-width:2.1em;height:1.8em;padding:0 .2em;box-sizing:border-box;border:1.5px solid var(--muted);border-radius:.3em .3em 50% 50% / .3em .3em 40% 40%;font:700 1.1rem/1 var(--display);font-variant-numeric:tabular-nums;color:var(--fg)}
.c.k .meta .acv.acx{border-color:var(--fg);border-style:dashed;color:var(--fg);background:var(--sunk)}
.bd.ef{border-style:dashed;border-color:var(--info);color:var(--info);max-width:100%;overflow:hidden;text-overflow:ellipsis}
.acb{margin:-2px 0 8px}
.effgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px}
.effgrid .btn{display:grid;gap:1px;text-align:left;line-height:1.2;padding:6px 10px}
.effgrid .btn small{font-size:.72rem;color:var(--muted);font-weight:400}
.effgrid .btn[aria-pressed="true"]{border-color:var(--fg)}
.effform,.edit{display:grid;gap:8px;margin-top:8px}
.ed3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ed3 label small{text-transform:none;letter-spacing:0}
.edpas label{min-width:0;overflow-wrap:anywhere}
.edpasl{margin-top:10px}
/* resistances van een speler in ⋯ (SP2) */
.drbox{flex-basis:100%;display:grid;gap:8px;border-top:1px solid var(--line);padding-top:8px}
.drhead{display:flex;justify-content:space-between;align-items:center;gap:8px}
.drhead>span{min-width:0;overflow-wrap:anywhere}
.drhead .link{flex:0 0 auto}
.drgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.drt{position:relative;min-height:44px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--fg);font:inherit;font-size:.9rem;padding:4px}
.drt[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.drt.other{border-style:dashed}
.drt small{position:absolute;top:2px;right:6px;font-size:.68rem;font-weight:700;color:var(--muted)}
.drhint{margin:2px 0 0}
.dall{min-height:44px;justify-self:start}
.kpanel .bar .btn.tap{flex:1 1 120px}

/* Verborgen voor spelers (DM-kaart) */
.bd.hid{border-style:dashed}

/* Spelersscherm (speler.html): groot en rustig, leesbaar op afstand (tv) of op een tablet */
body.pv{font-size:clamp(16px,1.1rem + .9vw,30px);padding-bottom:max(24px,env(safe-area-inset-bottom,0px))}
.pvwrap{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:.8em}
.pvtop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pv h1{font-size:1.3em}
/* WP16: tagline alleen in de wachtstand (geen gevecht), Inter en gedempt: het wachtbericht blijft de hoofdboodschap */
.pvbrand{min-width:0}
.pvtag{margin:.15em 0 0;font-size:1rem;color:var(--muted)}
.pvnow{background:var(--fight-bg);color:var(--fight-fg);border:1px solid var(--fight-bg);border-radius:var(--r);padding:.6em .9em;display:flex;justify-content:space-between;align-items:flex-end;gap:.4em 1.2em;flex-wrap:wrap}
.pvnow:empty{display:none}
.pvnow .l{display:block;font-size:.6em;text-transform:uppercase;letter-spacing:.08em;color:var(--fight-muted)}
.pvnow b{font-family:var(--display);font-size:1.5em;color:var(--now-ink);line-height:1.15;overflow-wrap:anywhere}
.pvnow .r{text-align:right;font-family:var(--display);font-weight:600;font-size:1.05em;overflow-wrap:anywhere}
ol.pvlist{list-style:none;margin:0;padding:0;display:grid;gap:.4em}
.pvc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);display:grid;grid-template-columns:1.8em minmax(0,1fr) auto;align-items:center;gap:.25em .6em;padding:.45em .7em .45em 0}
.pvc.turn{border-color:var(--sel);box-shadow:0 0 0 1px var(--sel) inset} /* WP17: 2 px, 1 px viel op 3 m weg */
.pvc.out{opacity:.5}
.pvc.out .av{filter:grayscale(1)}
.pvi{text-align:center;font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}
.pvi .tri{display:block;font-size:.6em;color:inherit}
.pvc.turn .pvi{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:.4em;background:var(--act);color:var(--act-fg)}
.pvn{display:flex;align-items:center;gap:.45em;min-width:0}
.pvn .nm{flex:0 1 auto;min-width:0;font-weight:700;font-size:1.05em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pvn .av,.pvnext{flex:0 0 auto}
.pvc .av{width:1.9em;height:1.9em}
.pvc .av .ic{width:1.25em;height:1.25em}
.pvc.pc .av{background:var(--pc-soft);color:var(--fg)}
.pvc.lair .av{background:var(--sunk)}
.pvc.lair .nm{font-family:var(--display);font-weight:600;color:var(--muted)}
.pvnext{font-size:.6em;padding:1px .5em;border:1px solid var(--line-strong);color:var(--fg);border-radius:99px;white-space:nowrap}
.pvhp{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0}
.pvhp .hpw{width:min(9em,30vw)}
.pvhp .hpw .bar{height:.35em}
/* SC10: getal vaste breedte (tot 999/999), zodat alle HP-balken in een kolom even lang zijn; temp HP eronder */
.pvhp .hpn{font-size:.75em;flex:0 0 auto;min-width:7ch;text-align:right;font-variant-numeric:tabular-nums;display:grid;justify-items:end;line-height:1.1}
.pvhp .thp{font-size:.8em;line-height:1}
.pvst{font-size:.75em;padding:1px .6em;border-radius:99px;border:1px solid var(--good);color:var(--good);white-space:nowrap}
.pvst.mid{border-color:var(--warn);color:var(--warn)}
.pvst.low{border-color:var(--bad);color:var(--bad)}
.pvst.out{border-color:var(--line);color:var(--muted)}
.pvc .badges{grid-column:2/4;padding:0}
.pvc .bd{font-size:.62em}
.pvwait{text-align:center;padding:2em 1em}
.pvpause{display:block;margin-bottom:.4em;font-size:1.4em;color:var(--fg)}
/* smal (telefoon): HP op een eigen regel, zodat de naam ruimte houdt */
@media (max-width:560px){.pvnow .r{text-align:left}.pvhp{grid-column:2/4;flex-direction:row;align-items:center;justify-content:flex-start}.pvhp:empty{display:none}.pvhp .hpw{width:auto;flex:1}}

/* Aanvallen op de monsterkaart: één regel per actie (to hit · damage), Multiattack erboven */
.atk{display:grid;border:1px solid var(--line);border-radius:10px;padding:2px 10px;background:var(--surface)}
.atk .multi{margin:0;padding:6px 0;font-size:.82rem;color:var(--muted);border-bottom:1px solid var(--line);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.atk .multi b{color:var(--fg)}
.ar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center;min-height:50px;padding:3px 0;border-bottom:1px solid var(--line)}
.ar .an{font-weight:700;font-size:.92rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar .an small{display:block;font-weight:400;font-size:.74rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.ar .d{min-height:44px;min-width:46px;border-radius:9px;border:1px solid var(--line);background:var(--bg);font-weight:700;font-size:.88rem;padding:2px 8px;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--fg);max-width:46vw}
.ar .d.hit{color:var(--fg);border-color:var(--line-strong)}
.ar .d.dm{min-width:94px}
.ar .d.dm small{display:block;font-weight:400;font-size:.68rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar .d:active{background:var(--sunk)}
.ar .dc{font-size:.82rem;font-weight:700;color:var(--warn);white-space:nowrap}
.ar .d.dcb{color:var(--warn);border-color:var(--warn);font-size:.82rem;white-space:nowrap}
.ar .d.dcb small{display:block;font-weight:400;font-size:.68rem;color:var(--muted)}
.asrc{margin:-2px 0 8px;font-variant-numeric:tabular-nums}
.ar .dflat{font-size:.82rem;color:var(--muted);white-space:nowrap}
.atkmore{display:flex;align-items:center;min-height:44px}
.atkfold{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-weight:700;font-size:.9rem;cursor:pointer;color:var(--fg)}
.atk .atkfold{border:0;padding:0;border-radius:0}
.atk .atkfold.sub{border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.atkfold:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Legendary actions: vaste regel in de beurtbalk + paneel */
.dock .larow{display:flex;gap:8px;margin-bottom:8px}
.dock .lachip{flex:1 1 0;min-width:0;min-height:44px;display:flex;align-items:center;gap:6px;padding:0 10px;font-size:.88rem;border-color:var(--warn);color:var(--fg);text-align:left}
.lachip .ln{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lachip .ld{flex:0 0 auto;color:var(--warn);letter-spacing:.06em;font-variant-numeric:tabular-nums;white-space:nowrap}
.dock .lachip.off,.dock .lachip:disabled{opacity:.5;border-color:var(--line);flex:0 1 auto;max-width:48%}
.lachip.off .ld{color:var(--muted);font-weight:400;letter-spacing:0}
.lachip.pulse{animation:lapulse 1.2s ease-out 1}
@keyframes lapulse{0%{box-shadow:0 0 0 0 var(--warn)}100%{box-shadow:0 0 0 10px transparent}}
@media (prefers-reduced-motion:reduce){.lachip.pulse{animation:none}}
.lsheet{gap:10px}
.lsheet .hint{margin:0}
.lamon{display:grid;gap:8px}
.lamh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-bottom:1px solid var(--line);padding-bottom:4px}
.lamh b{font-family:var(--display);font-size:1.05rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lamh .ld{color:var(--warn);white-space:nowrap}
.lamh small{color:var(--muted)}
.lao{border:1px solid var(--line);border-radius:10px;padding:4px 10px;background:var(--bg)}
.lah{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;min-height:48px}
.lah .an{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis}
.lah .an small{display:block;font-weight:400;font-size:.76rem;color:var(--muted)}
.lah .btn{min-height:44px;min-width:88px}
.lao .ar{border-bottom:0;border-top:1px solid var(--line)}
.latxt{margin:0 0 6px;font-size:.82rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Open saves: regels in de beurtbalk + paneel */
.svbar{display:grid;gap:6px;margin-bottom:8px}
.svrow{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 0 0 10px;border:1px solid var(--warn);border-radius:12px;background:var(--bg)}
.svn{flex:1 1 auto;min-width:0;display:grid;line-height:1.15}
.svn b{font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg);font-family:inherit}
.svn small{font-size:.76rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock .svrow button,.svrow button{flex:0 0 auto;min-height:44px;min-width:44px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:.95rem;color:var(--fg);padding:0 10px}
.svrow .svroll{min-width:72px;color:var(--warn);border-color:var(--warn)}
.svrow .svok.bad,.dock .svrow .svok.bad{color:var(--bad)}
.svrow .svok,.dock .svrow .svok{font-size:.85rem;padding:0 8px;color:var(--good)} /* RE12: Geslaagd/Gefaald met tekst, past op 320 px */
.svn .svx{color:var(--warn);font-weight:600}
.qlbl.over{color:var(--warn)} /* RE8: meer doelen dan het maximum */
.edprev .warn{color:var(--warn)}.edprev .bad{color:var(--bad)}
.dock .svall{width:100%;min-height:44px;font-size:.95rem;border-color:var(--warn);color:var(--warn)}
.ssheet{gap:10px}
.ssheet .hint{margin:0}

/* Aanval op één doel (to-hit-knop op de monsterkaart) */
.xsheet{gap:10px}
.xlist{display:grid;gap:6px}
.xsub{margin:6px 0 0}
.xt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:52px;padding:4px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg);text-align:left;font:inherit}
.xt:active{background:var(--sunk)}
.xt .xn{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xt .xi{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.xt .xadvt{display:block;text-align:right;font-weight:700;color:var(--fg);max-width:9.5rem;overflow:hidden;text-overflow:ellipsis}
.xhit s{color:var(--muted)}
.xhow{margin:2px 0 0;font-size:.88rem;color:var(--muted);overflow-wrap:anywhere}
.xla{margin:8px 0}
.xla .hint{margin:0;min-width:0;overflow-wrap:anywhere}
.xback{justify-self:start}
.xhit{margin:0;font-size:.95rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.xhit b{font-size:1.15rem;margin-right:6px}
.xhit .ok{color:var(--good)}.xhit .bad{color:var(--bad)}
.xdmg{font-size:.88rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.xmode{display:grid;gap:4px}
.xrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.xrow .btn[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.xsheet .afoot{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px}

/* Initiative van spelers bij Start gevecht */
.isheet{gap:10px}
.ilist{display:grid;gap:6px;max-height:min(300px,36dvh);overflow:auto}
.ir{display:grid;grid-template-columns:minmax(0,1fr) 52px auto;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:2px 6px 2px 2px;background:var(--surface)}
.ir.act{border-color:var(--sel);box-shadow:0 0 0 1px var(--sel)}
.irn{min-height:44px;border:0;background:transparent;text-align:left;font:inherit;font-weight:700;color:var(--fg);padding:4px 8px;min-width:0}
.irn span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.irn small{display:block;font-weight:400;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.ir .iv{font-family:var(--display);font-weight:700;font-size:1.4rem;text-align:center;font-variant-numeric:tabular-nums}
.ifoot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center}
.ifoot .btn{min-height:50px}
.ir .btn{min-width:52px}

/* Lege lijst: welkomstkaart, party-knop of hint; voorbeeld-banner boven de lijst */
.order .welcome{list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:grid;gap:10px}
.welcome h2{margin:0;font-family:var(--display);font-size:1.4rem;color:var(--fg)}
.welcome p{margin:0}
.welcome .wimp{margin-top:6px}
.welcome .wbtns{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.welcome .btn{min-height:48px}
.order .empty{list-style:none}
.order .sbanner{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.85rem;color:var(--muted);border-left:3px solid var(--warn);padding:2px 0 2px 10px}
.sbanner .sbtns{display:flex;gap:8px;flex:none}

/* Spell-uitleg: tikbare spellnaam (cursief met stippel, zoals spellnamen in een statblock) en paneel #rsheet */
.spl{font:inherit;font-style:italic;color:inherit;background:none;border:0;border-bottom:1px dotted var(--muted);border-radius:0;
  padding:10px 0 4px;margin:-10px 0 -4px;line-height:inherit;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
.spl:hover,.spl:focus-visible{color:var(--act-ink);border-bottom-color:var(--act-ink)}
.rwrap{z-index:45}
.rsheet{max-height:85dvh;gap:8px;padding-top:0}
.rsheet .grab{margin-top:10px}
.rhead{position:sticky;top:0;background:var(--surface);z-index:1;padding:6px 0 4px;gap:12px}
.rhead h3{min-width:0;overflow-wrap:anywhere}
.rhead .link{flex:0 0 auto}
.rsheet .hint,.rmeta{margin:0}
.rmeta{font-style:italic;color:var(--muted)}
.rgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;margin:0;padding:8px 0;border-block:1px solid var(--line)}
.rgrid div{min-width:0}.rgrid .w{grid-column:1/-1}
.rgrid dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.rgrid dd{margin:0;overflow-wrap:anywhere}
.rmat{font-size:.85rem}
.rtext p{margin:0 0 8px}
.rtext h4{margin:12px 0 4px;font-family:var(--display);font-size:1rem}
.rtbl{overflow-x:auto;margin:0 0 8px}
.rtbl table{border-collapse:collapse;font-size:.88rem;width:100%}
.rtbl th,.rtbl td{border-bottom:1px solid var(--line);padding:4px 6px;text-align:left;vertical-align:top}
.rtbl th{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.rtbl td:first-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.rsheet .credit{margin-top:4px}
.rsw{max-width:180px}
.rcmp{margin:0;font-size:.85rem;border-left:3px solid var(--warn);padding:4px 0 4px 10px}
.effgrid .tag{white-space:nowrap;display:inline-block}

/* surprise: keuze in het initiative-paneel, badge op de kaart */
.isur{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px}
.isur>span{font-weight:700;font-size:.9rem;min-width:4.6em}
.seg2 button:disabled{opacity:.4}
/* Gevecht: dode monsters onderaan in een ingeklapt blok */
.downblk{list-style:none}
.downbtn{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;width:100%;min-height:44px;padding:0 12px;border:1px dashed var(--line);border-radius:var(--r);color:var(--muted);font-weight:700;font-size:.9rem;cursor:pointer}
.downbtn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.pvdown{margin:0;color:var(--muted);padding:.4em .7em;border:1px dashed var(--line);border-radius:var(--r)}
/* SC4: kop (verbinding + aan de beurt) vast bovenaan; de titel scrolt weg. Eén regel per naam, zodat de kop nooit groeit */
.pvstick{position:sticky;top:0;z-index:5;background:var(--bg);display:grid;grid-template-columns:minmax(0,1fr);gap:.4em}
.pvstick.off{display:none}
/* SC9: wat er net gebeurde, onder "aan de beurt" in de vaste kop; nieuwste onderaan iets donkerder; tv houdt 3 regels vrij (letter springt niet) */
.pvlog{list-style:none;margin:0;padding:0 .3em;font-size:.85em;line-height:1.35;color:var(--muted)}
.pvlog[hidden]{display:none}
.pvlog li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pvlog li:last-child{color:var(--fg)}
body.tv .pvlog{min-height:calc(3 * 1.35em)}
/* als app op het beginscherm: de vaste kop niet onder de notch */
@media (display-mode:standalone){.pvstick{top:env(safe-area-inset-top,0px)}.pvstick::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:env(safe-area-inset-top,0px);background:var(--bg)}}
.pvstick .pvnow b,.pvstick .pvnow .r{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;max-width:100%}
.pvstick .pvnow>div{min-width:0;max-width:100%}
.pvstick .pvnow .r .l{display:inline;margin-right:.4em}
.pvstick .pvnow b{display:block}
@media (max-width:360px){.pvstick .pvnow b{font-size:1.3em}}
.pvc{scroll-margin-top:calc(var(--stick,0px) + .5em)}
/* SC5: "Dit ben ik" */
.pvtools{display:flex;gap:.4em;flex-wrap:wrap}
#pv-me{max-width:12em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;line-height:44px;padding-block:0}
.pvpick{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.6em .8em;display:grid;gap:.4em}
.pvpick h2{font-size:1em;margin:0}
.pvpickb{display:flex;align-items:center;gap:.5em;justify-content:flex-start;text-align:left;width:100%;min-height:44px}
.pvpickb .av{width:1.6em;height:1.6em;flex:0 0 auto}
.pvpickb .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pvpickb[aria-pressed="true"]{border-color:var(--sel);box-shadow:0 0 0 2px var(--sel) inset;background:var(--act-soft)}
.pvpick .chk{font-size:.8em}
.pvpick .link{justify-self:start}
.pvnow.me{background:var(--act);border-color:var(--act)}
.pvnow.me b,.pvnow.me .l,.pvnow.me .r{color:var(--act-fg)}
.pvnow .r.me{color:var(--now-ink);font-weight:700}
/* WP17 (HS8): walnoot-kop zoals de gevechtskop van de DM; verbinding kwijt (body.stale) = neutraal, leest niet als live */
body.stale .pvnow{background:var(--sunk);border-color:var(--line);color:var(--muted)}
body.stale .pvnow b,body.stale .pvnow .l,body.stale .pvnow .r{color:var(--muted)} /* ook in stale + .me (dev-review) */
.pvnow.me .r.me{color:var(--act-fg)}
.pvme{background:var(--surface);border:2px solid var(--line-strong);border-radius:var(--r);padding:.5em .8em;display:grid;grid-template-columns:minmax(0,1fr);gap:.35em}
.pvme>*{grid-column:1/-1}
.pvmehead{display:flex;align-items:center;gap:.5em;min-width:0}
.pvmehead .av{width:1.9em;height:1.9em;flex:0 0 auto;background:var(--pc-soft);color:var(--fg)}
.pvmehead .av .ic{width:1.25em;height:1.25em}
.pvmehead .nm{font-family:var(--display);font-size:1.05em;line-height:1.2;min-width:0;overflow-wrap:anywhere}
.pvme>.pvhp{display:flex;flex-direction:row;align-items:center;gap:.5em}
.pvme .pvhp .hpw{width:auto;flex:1}
.pvme .bd{font-size:.7em}
.pvme .badges{padding:0;margin:0}
.pvsl .l{font-size:.6em;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);align-self:center;margin-right:.2em}
.pvmiss{margin:0;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:0 .5em}
.pvc.me{box-shadow:inset 4px 0 0 var(--fg)}
.pvc.turn.me{box-shadow:inset 4px 0 0 var(--fg),inset 0 0 0 1px var(--sel)} /* beurtring ook op de eigen rij */
/* SC8: lange namen over twee regels in de lijst (de vaste kop houdt één regel) */
.pvn{align-items:flex-start}
.pvn .av,.pvn .pvnext{align-self:center}
.pvn .nm{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;hyphens:auto;align-self:center}
/* SC4: lage schermen (telefoon liggend, groot lettertype): compacte kop op één regel en compactere kaarten */
@media (max-height:500px){
  body.pv{font-size:clamp(14px,1rem + .6vw,22px)}
  .pvwrap{gap:.4em}
  .pvnow{padding:.3em .7em;align-items:center;flex-wrap:nowrap}
  .pvnow .l{display:inline;margin-right:.4em}
  .pvnow b,.pvstick .pvnow b{font-size:1.15em;display:inline}
  .pvnow .r{font-size:.95em;flex:0 1 auto;min-width:0}
  .pvnow>div:first-child{flex:1 1 auto}
  ol.pvlist{gap:.25em}
  .pvc{padding-block:.25em}
  .pvc .av{width:1.5em;height:1.5em}
  .pvc .bd{font-size:.58em}
}
/* liggend vanaf 900 px (ook een telefoon liggend): letter met de hoogte mee */
@media (orientation:landscape) and (min-width:900px){
  body.pv{font-size:clamp(14px,3vh,30px)}
}
/* SC6 tv (body.tv uit speler.js, zelfde query plus min-height 501px): één brede regel per deelnemer
   (init | avatar + naam | condities | HP), letter --tvfs passend op de hoogte (js/tvfit.js); body.cols = noodgreep */
body.pv.tv{font-size:var(--tvfs,30px);padding-bottom:0}
body.pv.tv .pvwrap{max-width:none;padding:0 2vw;gap:.35em}
body.pv.tv .pvtop h1{font-size:.7em;margin:0}
body.pv.tv .pvtag{font-size:.45em;margin:0}
:root:fullscreen body.pv.tv .pvtop{display:none}
:root:-webkit-full-screen body.pv.tv .pvtop{display:none}
body.pv.tv .pvnow{padding:.3em .8em}
body.pv.tv .pvnow .l,body.pv.tv .pvnext{font-size:.75em}
body.pv.tv ol.pvlist{gap:.25em}
body.pv.tv .pvc{padding-block:.2em}
body.pv.tv:not(.cols) .pvc{grid-template-columns:1.8em minmax(0,auto) minmax(0,1fr) auto}
body.pv.tv:not(.cols) .pvc .badges{grid-column:3;grid-row:1;justify-content:flex-start;margin:0}
body.pv.tv:not(.cols) .pvhp{grid-column:4;grid-row:1}
body.pv.tv .pvc .bd{font-size:.85em;font-weight:700}
body.pv.tv .pvi{color:var(--fg)}
body.pv.tv .pvc.turn .pvi{color:var(--act-fg)}
body.pv.tv .pvhp{flex-direction:row;align-items:center;gap:.5em}
body.pv.tv .pvhp .hpw{display:flex;align-items:center;gap:.5em;width:auto}
body.pv.tv .pvhp .hpw .bar{width:6em;height:.45em}
body.pv.tv .pvhp .hpn{font-size:1em;color:var(--fg);font-weight:700;display:flex;gap:.3em;align-items:baseline}
body.pv.tv .pvst{font-size:.85em;font-weight:700}
body.pv.tv.cols ol.pvlist{grid-auto-flow:column;grid-template-rows:repeat(var(--rows),auto);grid-template-columns:1fr 1fr;column-gap:.8em}
body.pv.tv.cols .pvhp .hpw .bar{width:3.5em}
/* SC1: QR op de tv vóór het gevecht (of tijdens de pauze), rechts naast de lijst; altijd zwart op wit */
.pvqr{display:none}
body.pv.tv.qr .pvwrap{padding-right:calc(30vh + 4vw + 24px)}
body.pv.tv.qr .pvqr:not([hidden]){display:grid;justify-items:center;gap:.3em;position:fixed;right:2vw;bottom:2vw;width:calc(30vh + 24px);padding:12px;background:#fff;color:#111;border-radius:var(--r);font-size:clamp(14px,2vh,24px);text-align:center}
.pvqr svg.qr{display:block;width:30vh;height:30vh}
.pvqr p{margin:0;line-height:1.2}
.pvdown .l{font-size:.75em;text-transform:uppercase;letter-spacing:.08em;margin-right:.4em}

/* Delen met spelers (Instellingen → Spelersscherm, js/ui/kamer.js) */
.subhead{font:700 .9rem/1.2 var(--body);margin:6px 0 -2px}
.kamerbox{display:grid;gap:6px}
.kamerbox .hint{margin:0}
.kamererr{color:var(--bad)}
.kamer-code{margin:2px 0 0;font-family:var(--display);font-weight:700;font-size:2.2rem;line-height:1.1;letter-spacing:.12em;font-variant-numeric:tabular-nums;color:var(--info)}
.kamer-url{margin:0;font-size:.82rem;color:var(--muted);overflow-wrap:anywhere}
.kamer-st{margin:0;font-size:.92rem;color:var(--muted)}
.kamer-st.on{color:var(--good)}
.kamer-code.dim{color:var(--muted)}
/* SC1: QR schermvullend; in beide thema's wit vlak en zwarte tekst (scanners lezen geen negatief, maximaal contrast) */
.qrfull{position:fixed;inset:0;z-index:70;background:#fff;color:#111;overflow:auto;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.qrin{display:grid;justify-items:center;gap:10px;text-align:center;width:100%;max-width:640px}
.qrin h2{margin:0;font:700 1.3rem/1.2 var(--display);color:#111}
.qrfull svg.qr{display:block;width:270px;max-width:100%;height:auto}
.qrcode{margin:0;font:700 2.5rem/1.1 var(--display);letter-spacing:.12em;font-variant-numeric:tabular-nums;color:#111}
.qrurl{margin:0;font-size:.85rem;color:#444;overflow-wrap:anywhere}
.qrnote{margin:0;font-size:.95rem;color:#7a4b00}
.qrfull .qrclose{width:100%;min-height:48px;background:#fff;color:#111;border:1px solid #555;font-weight:700}
.kamer-st.on::before{content:"● "}
html.kamer-lost .dock .prow [data-prep="data"],html.kamer-pauze .dock .prow [data-prep="data"]{position:relative}
html.kamer-lost .dock .prow [data-prep="data"]::after,html.kamer-pauze .dock .prow [data-prep="data"]::after{content:"";position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--bad)}

/* Spelersscherm: code invoeren en verbindingsstatus */
.pvjoin{display:grid;grid-template-columns:minmax(0,1fr);gap:.4em;width:min(20em,100%);margin:1em auto 0}
.pvjoin label{font-weight:700}
.pvjoin .row{display:flex;gap:.4em}
.pvjoin input{flex:1;min-width:0;width:0;min-height:48px;font-size:1.3em;font-family:var(--display);font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:0 .5em}
.pvjoin .btn{min-height:48px}
.pvjoin .hint{margin:0}
.pvjoin .err{color:var(--bad)}
.pvnet{background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);padding:.35em .8em;font-size:.75em;color:var(--muted);text-align:center}
/* SC3: verbinding kwijt (amber, lijst gedimd) en DM weg (neutraal); zo groot als de kop zodat het op een tv op 3 m leesbaar is */
.pvnet.lost,.pvnet.dm{font-size:1em;padding:.5em .9em;text-align:left;display:flex;flex-direction:column;gap:.1em}
.pvnet b{font-family:var(--display);font-size:1.15em;line-height:1.2}
.pvnet span{font-size:.75em}
.pvnet.lost{background:var(--warn-soft);border:2px solid var(--warn);color:var(--fg)}
.pvnet.lost b{color:var(--warn)}
.pvnet.dm{background:var(--sunk);border:1px solid var(--line);color:var(--fg)}
.pvnet.dm span{color:var(--muted)}
body.pv.stale #pv-now,body.pv.stale #pv-list,body.pv.stale #pv-down{opacity:.4}
.pvcode{font-size:.6em;color:var(--muted);letter-spacing:.08em}

/* Instellingen → Spelersscherm → Wat spelers zien; "Verborgen voor spelers" bij toevoegen */
.visbox{display:grid;gap:4px}
.vlbl{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:6px 0 0}

/* ---------- encounters klaarzetten en moeilijkheid (js/ui/encounters.js) ---------- */
.dchip{display:inline-flex;align-items:center;font:inherit;font-size:.8rem;font-weight:700;padding:2px 10px;border-radius:99px;border:1px solid var(--muted);color:var(--muted);background:transparent;white-space:nowrap}
button.dchip{min-height:44px;cursor:pointer}
.dchip.r1{border-color:var(--good);color:var(--good)}
.dchip.r2{border-color:var(--line-strong);color:var(--fg)}
.dchip.r3{border-color:var(--warn);color:var(--warn)}
.dchip.r4{border-color:var(--bad);color:var(--bad);background:var(--bad-soft)}
.dchip.unk{border-style:dashed;font-weight:400}
.order .dbanner{list-style:none;display:grid;gap:4px}
.dbtn{display:flex;align-items:center;gap:6px;flex-wrap:wrap;width:100%;min-height:44px;padding:4px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--fg);font:inherit;font-size:.9rem;text-align:left;font-variant-numeric:tabular-nums}
.dbtn .dchip{pointer-events:none}
.dwhy{font-size:.85rem;color:var(--muted);padding:2px 10px 4px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dwhy p{margin:2px 0}
.dwhy b{color:var(--fg)}
.dwhy .dlvlh{color:var(--fg)}
.dlvls{display:grid;gap:6px;margin:4px 0 6px}
.dlvl{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--fg);font-size:.9rem}
.dlvl span{text-transform:none;letter-spacing:normal;font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlvl input{flex:none;width:4.5rem;min-height:44px;text-align:center;font:inherit;font-size:1rem}
.encsave{width:100%}
.encform{display:grid;gap:10px;border:1px solid var(--line);border-radius:8px;padding:10px}
.enclist{display:grid}
.encrow{display:grid;gap:8px;padding:12px 0;border-bottom:1px solid var(--line)}
.encrow:last-child{border-bottom:0}
.ehead{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.einfo{display:grid;gap:2px;min-width:0}
.einfo b{overflow-wrap:anywhere}
.einfo small{color:var(--muted);font-size:.85rem}
.einfo .enote{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}
.ebtns{display:grid;grid-template-columns:minmax(0,1fr) 52px;gap:8px}
.ebtns .btn{min-height:48px}
.encmenu{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.encmenu .btn{min-height:44px}
.encask .btn{min-height:44px}
.encimp{margin-top:6px}
.eback{justify-self:start;min-height:44px}
.erows{display:grid}
.erow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.erow .en{display:grid;min-width:0}
.erow .en b{overflow-wrap:anywhere}
.erow .en small{color:var(--muted);font-size:.8rem}
.erow .step{display:flex;align-items:center;gap:6px;flex:none}
.erow .step .btn{min-width:44px;min-height:44px;padding:0;font-size:1.2rem}
.erow .step b{min-width:2ch;text-align:center;font-variant-numeric:tabular-nums}
.erow .step .encnum{width:56px;min-height:44px;padding:0 4px;text-align:center;font:inherit;font-weight:700;font-variant-numeric:tabular-nums;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:6px}
.pm .plvl{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted);margin-top:4px}
.pm .pupd{display:block;min-height:44px;padding:0 8px;margin-left:-8px;text-align:left}
.pm .pupd[aria-disabled="true"]:not([aria-busy]){opacity:.55;cursor:default}
.pm .pupdbox{grid-column:1/-1;margin:0}
.pm .plvl input{width:64px;min-height:44px;padding:4px;text-align:center;border:1px solid var(--line-strong);border-radius:6px;background:var(--bg);color:var(--fg)}

/* VB2: ingeladen encounter boven de lijst, notitie (tactiek) ingeklapt */
.order .encn{list-style:none;display:grid;gap:4px}
.encnb{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:4px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--fg);font:inherit;font-size:.95rem;text-align:left}
.encnb .ennm{min-width:0;overflow-wrap:anywhere}
.encnb .entac{flex:0 0 auto;font-size:.85rem;color:var(--muted);font-weight:700}
.entxt{max-height:9.5em;overflow:auto;padding:2px 10px 4px;font-size:.9rem;white-space:pre-wrap;overflow-wrap:anywhere}
.entxt p{margin:2px 0}
.entxt .enh{font-weight:700;color:var(--muted);font-size:.8rem;margin-top:6px}
.enclink{width:100%;margin-top:12px}

/* GV2: samenvatting bij Gevecht afronden */
.esheet{gap:10px}
.esheet .hint,.esheet p{margin:0}
.esub{color:var(--muted);font-size:.9rem;overflow-wrap:anywhere}
.etiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.etiles div{border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;background:var(--bg);font-variant-numeric:tabular-nums}
.etiles b{display:block;font-size:1.5rem;line-height:1.1}
.etiles span{font-size:.8rem;color:var(--muted)}
.eln{overflow-wrap:anywhere}
.eln span,.elbl{color:var(--muted);font-size:.85rem}
.eflee summary{list-style:none;min-height:44px;display:flex;gap:6px;align-items:center;cursor:pointer;color:var(--muted);font-size:.9rem}
.echips{display:flex;flex-wrap:wrap;gap:6px}
.echip{min-height:44px;padding:0 12px;border-radius:99px;border:1px solid var(--line-strong);background:transparent;color:var(--muted);font:inherit;font-size:.9rem;display:inline-flex;align-items:center;gap:4px}
.echip[aria-pressed="true"]{border-color:var(--good);color:var(--fg);font-weight:700}
.endrow{border-color:var(--line)}
.endrow span{flex:1 1 auto;font-size:.9rem}
.dock .endrow button{color:var(--fg)}
.eflee summary::-webkit-details-marker{display:none}

/* DA3: tabblad gestopt, een ander tabblad werkt verder (js/main.js tabLost); boven alles, app eronder inert */
.tabstop{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;padding:16px;overflow:auto}
.tabstop-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 16px;max-width:420px;width:100%;display:grid;gap:12px}
.tabstop h2{margin:0;font-family:var(--display);font-size:1.4rem;color:var(--fg)}
.tabstop p{margin:0}
.tabstop .btn{min-height:48px;width:100%}

/* OB1: rondleiding (js/ui/tour.js). Spot = gat in de dim (box-shadow), vak met uitleg erboven of eronder. */
:root{--tour-dim:rgba(0,0,0,.55)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--tour-dim:rgba(0,0,0,.7)}}
:root[data-theme="dark"]{--tour-dim:rgba(0,0,0,.7)}
.tour{position:fixed;inset:0;z-index:60}
.tour[hidden]{display:none}
.tspot{position:fixed;border-radius:12px;box-shadow:0 0 0 200vmax var(--tour-dim);outline:2px solid var(--focus);pointer-events:none}
.tbox{position:fixed;width:min(320px,calc(100vw - 32px));background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:14px;padding:14px 16px 10px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.tbox .thead{margin:0 0 4px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tbox .thead b{font-family:var(--display);font-size:1.1rem}
.tbox .tprog{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.tbox #tour-x{margin:0 0 10px;line-height:1.4}
.tbtns{display:flex;align-items:center;gap:8px}
.tbtns .link{margin-right:auto}
.tbtns .btn{min-height:44px}
.tbtns .btn[hidden]{display:none}
/* AF10: het vak schuift niet (dan mis je Volgende tijdens de beweging), alleen een korte fade; scrollen gaat direct */
@media (prefers-reduced-motion:no-preference){.tspot{transition:top .2s ease,left .2s ease,width .2s ease,height .2s ease}.tbox.fade{animation:tfade .15s ease}}
@keyframes tfade{from{opacity:0}}
/* AF5: Instellingen in inklapbare secties met een statusregel in de kop */
.setsec{border-top:1px solid var(--line)}
.setsec:last-of-type{border-bottom:1px solid var(--line)}
.setsec>summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:48px;cursor:pointer;padding:2px 0}
.setsec>summary::-webkit-details-marker{display:none}
.setsec>summary .sethead{margin:0;flex:none}
.setsec .sstat{flex:1;min-width:0;text-align:right;font-size:.85rem;color:var(--muted);overflow-wrap:anywhere}
.setsec .sstat.warn{color:var(--warn);font-weight:600}
.setsec .sstat.dot::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--bad);margin-right:6px;vertical-align:1px}
.setsec .schev{color:var(--muted);display:inline-flex;align-items:center}
.setsec>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.setbody{display:grid;gap:10px;padding:2px 0 14px}
#order{overflow-anchor:none} /* IN8: scrollcorrectie doet keepCard, niet de browser */
/* GV8/GV10: undo-melding en sneltoetsen */
.tmore{opacity:.8;white-space:nowrap}
.keys{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 14px;margin:8px 0 12px;align-items:baseline}
.keys dt{white-space:nowrap}
.keys dd{margin:0}
kbd{display:inline-block;min-width:1.6em;padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;font:inherit;font-size:.85em;text-align:center;background:var(--sunk)}
.ifoot.one{grid-template-columns:1fr}
.kbonly{display:none}
@media (hover:hover) and (pointer:fine){.kbonly{display:inline-flex}}

/* RE10: conditiechip met uitleg (stippel zoals tikbare spellnamen, geen ✕) en paneel #csheet */
.bd.cinf{cursor:pointer;min-height:44px;padding-inline:10px;text-decoration:underline dotted;text-underline-offset:3px;-webkit-tap-highlight-color:transparent}
.bd.cinf:hover,.bd.cinf:focus-visible{background:var(--warn-soft)}
.csheet .rtext p{margin:0 0 6px}
.cgrid{display:grid;gap:6px;margin:0;padding:8px 0 0;border-top:1px solid var(--line)}
.cgrid div{min-width:0}
.cgrid dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.cgrid dd{margin:0;overflow-wrap:anywhere}
/* RE11: Exhaustion-niveau in het Conditie-paneel */
.exhrow{display:flex;align-items:center;gap:10px;margin-top:8px}
.exhrow .btn{min-width:44px;font-size:1.1rem}
.exhrow b{min-width:8em;text-align:center;font-variant-numeric:tabular-nums}
.exhtxt{margin:4px 0 0}
/* RE16: bevestigstap Rage in het Effect-paneel */
.rgbox p{margin:0 0 6px}
.rgbox .rghead{margin-bottom:4px}
.rgbox .rgwarn{color:var(--warn)}
.rgopt{margin:6px 0}
.rgbox .bar{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.dwhy .dtip{color:var(--fg);font-weight:600}
.isurh{margin:-4px 0 0;font-size:.8rem}

/* RE14: eigen monster uit plaktekst */
.autot { color: var(--muted); font-weight: 400; font-size: .85em; }
#cu-parse .mprev { margin-top: 4px; }
#cu-parse .hint { margin: 4px 0; }
/* RE13: save-rider in het aanvalspaneel; de seg vult de rij (duimbereik) */
.xrider{margin-top:6px}
.xrider .qlbl{margin:0 0 2px}
.xrider .hint{margin:2px 0}
.xrider .xrow .seg2{flex:1;min-width:180px}