:root { color-scheme: dark; --bg: #121214; --panel: #1d1d22; --line: #3a3a44; --text: #e6e6e6; --muted: #a0a0aa;
  --accent: #f2c14e; --ok: #6fcf87; --warn: #e0b030; --bad: #ef6b6b; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 14px/1.45 system-ui, sans-serif; overflow: hidden; }
#app { display: flex; height: 100%; }
#stage { flex: 1; min-width: 0; position: relative; }
#canvas { display: block; width: 100%; height: 100%; }
#canvas:focus { outline: none; }
#status { position: absolute; top: 40%; left: 0; right: 0; text-align: center; color: var(--muted); }
/* The panel is for the GM only (body[data-role] comes from the session view model). */
#panel { display: none; width: clamp(280px, 30vw, 420px); box-sizing: border-box; background: var(--panel);
  border-left: 1px solid var(--line); overflow: auto; }
body[data-role="gm"] #panel { display: block; }
#panel.collapsed { width: 6.5rem; overflow: hidden; }
#panel.collapsed #panel-body { display: none; }
#panel header { padding: 4px 8px; }
#playback-banner { margin: 6px 0 0; font-size: 0.9em; } /* in the header: it stays when the panel is collapsed */
#playback-banner-short { display: none; }
#panel.collapsed #playback-banner-text { display: none; }
#panel.collapsed #playback-banner-short { display: inline; }
[role=tablist] { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--line); }
[role=tab] { background: none; color: var(--muted); border: 0; padding: 6px 8px; cursor: pointer; }
[role=tab][aria-selected=true] { color: var(--text); box-shadow: inset 0 -2px var(--accent); }
[role=tabpanel] { padding: 8px 12px 16px; }
[hidden] { display: none !important; }
h2 { font-size: 1.1rem; margin: 4px 0 8px; }
h3 { font-size: 0.95rem; margin: 14px 0 4px; color: var(--muted); }
label { display: block; margin: 6px 0; }
fieldset { border: 1px solid var(--line); margin: 8px 0; padding: 4px 8px; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), select {
  display: block; width: 100%; box-sizing: border-box; font: inherit; background: #26262c; color: var(--text);
  border: 1px solid var(--line); padding: 4px 6px; }
input[type=range] { width: 100%; }
button { font: inherit; background: #2c2c34; color: var(--text); border: 1px solid var(--line); padding: 4px 10px; cursor: pointer; }
button.primary { background: #35512a; border-color: var(--ok); }
button[aria-pressed=true] { border-color: var(--accent); color: var(--accent); }
button:disabled { opacity: 0.5; cursor: default; }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.row label { flex: 1; }
.hint { color: var(--muted); font-size: 0.9em; margin: 2px 0 8px; }
.error { color: var(--bad); }
.calm { color: var(--ok); }
.notice { color: var(--warn); }
.remote { outline: 1px dashed var(--warn); } /* changed by someone else while you were in the field */
.banner { border: 1px solid var(--warn); padding: 6px 8px; margin-bottom: 8px; }
#stage-footer { display: none; position: absolute; left: 8px; bottom: 6px; } /* bottom left: the chat sits at the bottom right */
body[data-role="gm"] #stage-footer, body[data-role="player"] #stage-footer { display: block; } /* the landing screens have no model to show */
#stage-footer button { font-size: 0.8em; padding: 0 6px; opacity: 0.75; }
.palette button { padding: 2px; }
.palette img { display: block; }
.palette { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
ol, ul { padding-left: 1.4em; margin: 4px 0; }
li { margin: 2px 0; }
li button { padding: 0 6px; }
#hist-scrub { width: 100%; }
#hist-list button { all: unset; cursor: pointer; }
#hist-list button[aria-pressed=true] { color: var(--accent); }
#hist-list button:focus-visible { outline: 2px solid var(--accent); }
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); max-width: min(640px, 90vw); max-height: 80vh; overflow: auto; }
dialog::backdrop { background: rgb(0 0 0 / 0.6); }
pre { white-space: pre-wrap; font-size: 0.85em; }
#scene-list li[aria-current=true] { font-weight: 600; }
/* The Table tab's players: a dot and the word for online (colour alone says nothing to everybody), the id muted, Remove… at the end. */
#players { list-style: none; padding: 0; }
.seat { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; margin: 4px 0; }
.seat-name { font-weight: 600; overflow-wrap: anywhere; }
.seat button { margin-left: auto; }
.muted { color: var(--muted); }
.dot { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; background: transparent; border: 1px solid var(--muted); }
.dot.on { background: var(--ok); border-color: var(--ok); }
/* The Combat tab: one card per combatant, compact for the narrowest panel (280 px): every group of controls wraps onto the next line.
   The #tab-combat prefix wins over the general full-width rule for inputs above. */
#cb-body { border: 0; margin: 0; padding: 0; min-width: 0; } /* a fieldset only to disable the whole tab at once */
#cb-pick { list-style: none; padding: 0; }
#cb-pick label { display: flex; gap: 6px; align-items: center; margin: 2px 0; }
.row .cb-inline { flex: 0 0 auto; margin: 0; }
#tab-combat .row select { flex: 1 1 8rem; width: auto; }
.cb-list { list-style: none; padding: 0; margin: 8px 0; }
.cb-row { border: 1px solid var(--line); background: #22222a; margin: 6px 0; padding: 4px 6px; }
.cb-row.cb-current { border-color: var(--accent); box-shadow: inset 3px 0 var(--accent); }
.cb-row.cb-defeated { opacity: 0.6; }
.cb-row.cb-defeated .cb-name { text-decoration: line-through; }
.cb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.cb-turn { flex: none; width: 1em; color: var(--accent); }
.cb-name { background: none; border: 0; padding: 0; font-weight: 600; text-align: left; overflow-wrap: break-word; max-width: calc(100% - 1.4em); }
.cb-name:hover { text-decoration: underline; }
.cb-flags { color: var(--muted); font-size: 0.85em; }
.cb-tools { display: flex; gap: 2px; margin-left: auto; flex: none; }
.cb-nums, .cb-dmg, .cb-cond { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: flex-end; margin: 4px 0; }
.cb-f { display: flex; flex-direction: column; margin: 0; }
.cb-cap { color: var(--muted); font-size: 0.8em; }
#tab-combat .cb-f input { width: 3rem; padding: 2px 4px; } /* five of them (Init Mod HP Max Temp) fit one line of the narrowest panel */
#tab-combat .cb-cond .cb-f:first-child { flex: 1 1 6rem; }
#tab-combat .cb-cond .cb-f:first-child input { width: 100%; }
#tab-combat input[type=number] { appearance: textfield; -moz-appearance: textfield; } /* no spin buttons: they eat the width */
#tab-combat input[type=number]::-webkit-inner-spin-button, #tab-combat input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cb-dmg button { min-width: 2rem; }
.cb-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 4px 0; }
.cb-chip { margin: 0; padding: 0 2px 0 8px; border: 1px solid var(--line); border-radius: 10px; background: #2c2c34; font-size: 0.85em; }
.cb-chip button { background: none; border: 0; color: var(--muted); }
.cb-pips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.cb-pip { padding: 0 8px; }
/* M3 A: multi-selection */
#insp-multi-list { list-style: none; padding: 0; margin: 8px 0; }
#insp-multi-list li { margin: 2px 0; }
#insp-multi-list button { width: 100%; text-align: left; overflow-wrap: anywhere; }
/* M3 C: handouts. The dialog is for every role (the GM's panel is hidden for players, the footer and the dialog are not). */
#stage-footer button + button { margin-left: 6px; }
.handout-img { display: block; max-width: 100%; max-height: 70vh; object-fit: contain; margin: 8px auto; }
#handout-dialog { width: min(900px, 92vw); max-width: 92vw; }
#handout-dialog h2 { overflow-wrap: anywhere; }
#handout-list { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 8px 0; }
#handout-list li { margin: 0; }
#handout-list button { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#handout-seats { list-style: none; padding: 0; }
#handout-seats label { display: flex; gap: 6px; align-items: center; margin: 2px 0; }
#handout-gm-list { list-style: none; padding: 0; }
.handout-row { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; margin: 4px 0; }
.handout-title { font-weight: 600; overflow-wrap: anywhere; }
.handout-row button:first-of-type { margin-left: auto; }
/* M4 B: import */
#import-dialog { width: min(640px, 92vw); }
#import-done { font-weight: 600; overflow-wrap: anywhere; }
#import-lines { overflow-wrap: anywhere; }
/* M4 C: actors */
.bare { border: 0; margin: 0; padding: 0; min-width: 0; } /* a fieldset only to disable a whole tab at once */
.actor-list { list-style: none; padding: 0; margin: 4px 0 8px; }
.actor-list li { margin: 3px 0; }
.actor-pick { width: 100%; text-align: left; overflow-wrap: anywhere; padding: 4px 8px; }
.actor-pick[aria-current=true] { border-color: var(--accent); box-shadow: inset 3px 0 var(--accent); }
.actor-title { font-weight: 600; }
/* The selected actor's page: compact like the Combat tab, for the narrowest panel (280 px). */
#actor-title { margin: 14px 0 2px; color: var(--text); overflow-wrap: anywhere; }
#actor-roll-result { color: var(--ok); min-height: 1.4em; margin: 2px 0; }
.ae-section { margin: 4px 0 8px; }
.ae-h { margin: 12px 0 4px; font-size: 0.9rem; color: var(--muted); }
.ae-f { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.ae-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 6px 8px; margin: 6px 0; }
.ae-texts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; margin: 6px 0; }
.ae-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 6px 8px; }
.ae-cell { display: flex; gap: 4px; align-items: flex-end; min-width: 0; }
.ae-cell .ae-f { flex: 1 1 auto; }
.ae-roll { padding: 2px 6px; min-width: 2.6rem; }
.ae-x { padding: 2px 8px; }
.ae-list { list-style: none; padding: 0; margin: 4px 0; }
.ae-row { border: 1px solid var(--line); background: #22222a; margin: 4px 0; padding: 4px 6px; }
.ae-line { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: flex-end; margin: 3px 0; }
.ae-grow { flex: 1 1 6rem; }
.ae-narrow { flex: 0 0 4.5rem; }
.ae-check { display: flex; gap: 4px; align-items: center; margin: 0; flex: none; }
#tab-actors input[type=number] { appearance: textfield; -moz-appearance: textfield; } /* no spin buttons: they eat the width */
#tab-actors input[type=number]::-webkit-inner-spin-button, #tab-actors input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* The Combat tab's turn card: the rolls of whoever's turn it is. */
#tab-combat .cb-f input[placeholder]:not([placeholder=""]) { width: 8rem; } /* the modifier field, while it suggests "+7 Perception" */
.cb-card { border: 1px solid var(--accent); background: #22222a; margin: 6px 0; padding: 2px 8px 4px; }
.cb-card h3 { margin: 4px 0; color: var(--text); overflow-wrap: anywhere; }
#cb-turn-result { color: var(--ok); min-height: 1.4em; margin: 2px 0; }
#new-character-dialog, #new-creatures-dialog { width: min(560px, 92vw); }
#new-creatures-dialog .row label, #new-character-dialog .row label { flex: 1 1 7rem; min-width: 0; }
/* M4 D: sheet. The player's aside beside the board (D25): docked like the GM's panel, non-modal, so the board stays usable while rolling.
   The footer button shows and hides it; body[data-role] comes from the session view model. */
#sheet { display: none; width: clamp(260px, 26vw, 360px); box-sizing: border-box; padding: 0 12px 16px; background: var(--panel);
  border-left: 1px solid var(--line); overflow: auto; }
body[data-role="player"] #sheet:not([hidden]) { display: block; }
#open-sheet { opacity: 1; }
#open-sheet[aria-expanded=true] { border-color: var(--accent); color: var(--accent); }
#sheet header { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; margin: 8px 0 4px; }
#sheet header h2 { margin: 0; overflow-wrap: anywhere; }
#sheet header button { flex: none; }
#sheet-hp { font-weight: 600; margin: 2px 0 6px; }
#sheet-hp-controls { align-items: flex-end; }
#sheet-hp-controls label { margin: 0; }
#sheet-hp-box { min-width: 0; }
#sheet-rolling { align-items: flex-end; }
#sheet-rolling label { margin: 0; }
#sheet-rolling #sheet-bonus-label { flex: 0 0 6rem; }
#sheet-conditions { margin: 6px 0; }
#sheet-last { margin: 4px 0; font-weight: 600; min-height: 1.45em; }
#sheet-error { margin: 2px 0; }
#sheet h3 { margin: 12px 0 4px; }
.sheet-rows { list-style: none; padding: 0; margin: 4px 0 10px; }
.sheet-rows li { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.sheet-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sheet-rows .muted { min-width: 0; overflow-wrap: anywhere; }
.sheet-value { font-variant-numeric: tabular-nums; }
.sheet-roll { min-width: 3.2rem; padding: 2px 8px; font-variant-numeric: tabular-nums; }
.sheet-rows li.sheet-strike { flex-wrap: wrap; border: 1px solid var(--line); background: #22222a; padding: 4px 6px; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
#sheet-more details { margin: 8px 0; }
#sheet-more summary { cursor: pointer; }
#sheet-more ul { margin: 4px 0; }
#sheet-party { list-style: none; padding: 0; }
.sheet-member { border: 1px solid var(--line); background: #22222a; margin: 6px 0; padding: 4px 6px; }
.sheet-member-name { font-weight: 600; overflow-wrap: anywhere; }
/* A phone: the aside lies over the board instead of taking its width (panel-sheet.js does not open it by itself below 700px either). */
@media (max-width: 699px) {
  #sheet { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 92vw); z-index: 2; box-shadow: -4px 0 12px rgb(0 0 0 / 0.5); }
}