/* The map page (index.html). Colours, fonts and other shared values are the variables in theme.css. */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: black;
  font-family: var(--font-ui);
}
#map, #fog, #measure { /* the map's layers */
  position: absolute;
  left: 0;
  top: 0;
  touch-action: none; /* prevent browser handling of pinch/scroll */
}
#fog {
  z-index: 1;
  pointer-events: none;
}
#measure {
  z-index: 2;
  pointer-events: none;
}
#error {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.2em;
  text-align: center;
}

/* ---- Buttons in the panels and dialogs ---- */
#button-bank-container button,
.dialog-box button,
.tool-panel button {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 4px;
  padding: 5px 12px;
  cursor: pointer;
  touch-action: manipulation;
}
#button-bank-container button:hover,
.dialog-box button:hover,
.tool-panel button:hover { background: var(--btn-hover-bg); color: var(--text-strong); }
#button-bank-container button:active,
.dialog-box button:active,
.tool-panel button:active { background: var(--btn-active-bg); }
#button-bank-container button:focus-visible,
.dialog-box button:focus-visible,
.tool-panel button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dialog-box button:disabled,
.tool-panel button:disabled { opacity: 0.4; cursor: default; background: var(--btn-bg); border-color: var(--btn-border); color: var(--text); }
.dialog-box .btn-primary, .tool-panel .btn-primary { background: var(--accent); border-color: var(--accent); color: white; }
.dialog-box .btn-primary:hover, .tool-panel .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.dialog-box .btn-danger, .tool-panel .btn-danger { background: var(--danger); border-color: var(--danger); color: white; }
.dialog-box .btn-danger:hover, .tool-panel .btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }

/* ---- Modifier-key hint (item 87) ---- */
#modifier-hint {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 12px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  color: var(--text-strong);
  font-size: 14px;
  pointer-events: none;
  border-radius: var(--panel-radius);
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 100;
  white-space: nowrap;
}
#modifier-hint.visible { opacity: 1; transition: none; }

/* ---- POI tooltip ---- */
#poi-tooltip {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  max-width: 400px;
  background: rgba(18, 18, 18, 0.94);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  padding: 8px 11px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
  z-index: 10;
}
#poi-tooltip-title {
  font-weight: bold;
  color: var(--text-strong);
  margin-bottom: 4px;
}
#poi-tooltip-blurb {
  white-space: pre-wrap;
}
#poi-tooltip-hr {
  display: none;
  border: none;
  border-top: 1px solid var(--divider);
  margin: 7px 0;
}
#poi-tooltip-gm-notes {
  white-space: pre-wrap;
  color: var(--text-muted);
  font-style: italic;
}

/* ---- Controls panel (same look as the dice roller) ---- */
#button-bank-container {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: 4px -4px 14px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  min-width: 122px; /* room for the header's title and Help button when it's one column (players) */
}
/* Fixed heights (header 25, seven 24px rows in VTT mode) so the panel is 211px tall on every device,
   the same as the dice roller beside it. (Atlas mode has no Dice or Party buttons, and no dice roller.) */
#button-bank-handle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 25px;
  box-sizing: border-box;
  padding: 0 4px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--divider);
  cursor: grab;
  touch-action: none;
  user-select: none;
  font-size: 13px;
  color: var(--text-muted);
}
#banks-row {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  padding: 2px;
}
#button-bank,
#tools-bank {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 84px;
}
#button-bank { flex: 1 0 auto; } /* alone (players), it fills the panel */
#tools-bank {
  display: none; /* shown via JS for the GM */
}
#button-bank-container button {
  height: 24px;
  padding: 0 2px;
  line-height: 1;
  white-space: nowrap; /* "Party Tokens" fills the 84px exactly; a wider font (older macOS) spills into the padding, not a second line */
}
#zoom-buttons {
  display: flex;
  gap: 2px;
}
#zoom-buttons button {
  flex: 1;
  font-size: 15px;
}
/* Two-part switches (Atlas | VTT, GM | Player): the current choice is highlighted. */
.switch {
  display: flex;
  height: 24px;
  box-sizing: border-box;
  border: 1px solid var(--btn-border);
  border-radius: 4px;
  overflow: hidden;
}
#button-bank-container .switch button {
  flex: 1;
  height: auto; /* fill the switch, inside its border */
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
}
#button-bank-container .switch button + button { border-left: 1px solid var(--btn-border); }
#button-bank-container .switch button:hover { background: var(--btn-hover-bg); color: var(--text-strong); }
/* Selected: the same look for the switches and the on/off toggles (Dice, Party) */
#button-bank-container button[aria-pressed="true"] {
  background: rgba(74, 144, 217, 0.35);
  border-color: rgba(74, 144, 217, 0.7);
  color: var(--text-strong);
}
#button-bank-container button[aria-pressed="true"]:hover { background: rgba(74, 144, 217, 0.5); }
#button-bank-container .switch button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.7); /* the switch's halves have no border of their own */
  cursor: default;
}
.vtt-only {
  display: none;
}

/* ---- Shown while the GM previews the player view ---- */
#player-view-banner {
  display: none;
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: rgba(74, 144, 217, 0.9);
  border: none;
  border-radius: 12px;
  box-shadow: var(--panel-shadow);
  color: white;
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: pointer;
  z-index: 90;
  white-space: nowrap;
}
#player-view-banner:hover { background: var(--accent-hover); }

/* ---- Dialogs (native <dialog>) ---- */
dialog.dialog-box {
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: 95vw;
  max-height: 88vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 16px 20px 16px;
  background: var(--dialog-bg);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  font-family: var(--font-ui);
  font-size: 14px;
  color-scheme: dark; /* dark checkboxes, dropdowns and scrollbars */
  z-index: 20;
}
dialog.dialog-box::backdrop {
  background: rgba(0, 0, 0, 0.35);
}
.dialog-box h2 {
  margin: 0 36px 14px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-strong);
}
.dialog-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  font-size: 20px;
  color: var(--text-muted);
  border-radius: 4px;
}
.dialog-close:hover { background: var(--btn-hover-bg); color: var(--text-strong); }
.dialog-error { color: var(--error-text); min-height: 1.2em; margin-bottom: 6px; }
.dialog-message { color: var(--error-text); font-size: 0.9em; margin: 6px 0 0; }
/* Extra buttons sit on the left; Cancel and the main button always end up bottom-right. */
.dialog-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}
.dialog-buttons .btn-cancel { margin-left: auto; }
.dialog-buttons button { padding: 6px 16px; font-size: 14px; }

/* Form tables: label column, then the field */
.dialog-box table { width: 100%; border-collapse: collapse; }
.dialog-box td { padding: 4px 6px; vertical-align: middle; }
.dialog-box td:first-child {
  padding-left: 0;
  white-space: nowrap;
  color: var(--text-muted);
  font-weight: 600;
}
.dialog-box input[type=text],
.dialog-box input[type=password],
.dialog-box input[type=number],
.dialog-box select,
.dialog-box textarea {
  font-family: inherit;
  font-size: inherit;
  color: var(--text-strong);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 4px;
  padding: 5px 7px;
  box-sizing: border-box;
}
/* Opaque: on Windows the open list takes the select's (see-through) background over a light one */
.dialog-box option { background: var(--dialog-bg); color: var(--text-strong); }
.dialog-box td input[type=text],
.dialog-box td input[type=password],
.dialog-box td select,
.dialog-box td textarea { width: 100%; }
.dialog-box input:focus,
.dialog-box select:focus,
.dialog-box textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.dialog-box input::placeholder,
.dialog-box textarea::placeholder { color: var(--text-faint); }
.dialog-box input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }

/* ---- POI focus button tooltip ---- */
#poi-focus-btn { position: relative; }
#poi-focus-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid var(--panel-border);
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: normal;
  width: 200px;
  text-align: left;
  pointer-events: none;
  z-index: 200;
}
#poi-focus-btn:hover #poi-focus-tooltip { display: block; }

/* ---- Search dialog (not modal) ---- */
#search-dialog {
  width: 320px;
  top: 20px;
  left: auto;
  right: 20px;
  transform: none;
}
#search-dialog h2 {
  cursor: move;
  user-select: none;
}
#search-form-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
#search-input { flex: 1; min-width: 0; }
#search-results {
  max-height: min(320px, calc(100vh - 160px)); /* (less in a short window: the dialog fits on screen) */
  overflow-y: auto;
  border: 1px solid var(--divider);
  border-radius: 4px;
}
#search-results:empty { display: none; }
.search-result-item {
  padding: 6px 8px;
  cursor: pointer;
  border-bottom: 1px solid var(--divider);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover,
.search-result-item:focus { background: var(--btn-hover-bg); color: var(--text-strong); outline: none; }
#search-no-results {
  padding: 6px 8px;
  color: var(--text-muted);
  font-style: italic;
}

/* ---- Help dialog ---- */
#help-dialog {
  max-width: 700px;
  width: 94%;
  font-size: 13px;
  line-height: 1.4;
}
#help-dialog p { margin: 0 0 8px; }
#help-dialog h3 {
  margin: 14px 0 4px;
  font-size: 13px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--divider);
  padding-bottom: 3px;
}
#help-dialog tr:nth-child(even) td { background: rgba(255, 255, 255, 0.04); }
#help-dialog td { padding: 4px 8px; vertical-align: top; }
#help-dialog td:first-child { color: var(--text-strong); width: 32%; padding-left: 8px; }

/* ---- POI and token dialogs: pinned to the right edge, so the spot on the map stays visible ---- */
#poi-dialog,
#token-dialog {
  left: auto;
  right: 20px;
  transform: translateY(-50%);
}
#poi-dialog { width: 620px; }
#poi-dialog h2 {
  cursor: move;
  user-select: none;
}
#poi-dialog td:first-child,
#token-dialog td:first-child { vertical-align: top; padding-top: 9px; }
#poi-dialog td:first-child { width: 26%; }
#poi-dialog textarea { height: 140px; resize: vertical; }
#poi-submap-row { display: flex; gap: 6px; }
#poi-submap-row input { flex: 1; min-width: 0; }
#poi-new-map-btn { flex-shrink: 0; }
#new-map-dialog { width: 440px; }
#new-map-dialog input[type=file] { color: var(--text); font-size: 13px; max-width: 100%; }
#new-map-busy { display: flex; align-items: center; gap: 8px; margin-right: auto; color: var(--text-muted); font-size: 13px; }
#new-map-busy[hidden] { display: none; }
#new-map-detect-note { margin: 4px 0 0; }
#new-map-detect-note:empty { display: none; }
/* The POI icon picker (pois.js): shapes and sizes drawn as on the map */
#poi-icon-picker { display: flex; flex-direction: column; gap: 4px; }
.poi-icon-row { display: flex; gap: 4px; }
.dialog-box .poi-icon-choice { width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center; }
.poi-icon-choice canvas { width: 28px; height: 28px; }
.dialog-box .poi-icon-none { width: auto; padding: 0 10px; }
.dialog-box .poi-icon-choice[aria-pressed="true"] {
  background: rgba(74, 144, 217, 0.35);
  border-color: rgba(74, 144, 217, 0.9);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.9);
}
#token-dialog { width: 500px; }
#token-dialog td:first-child { width: 1%; white-space: nowrap; padding-right: 12px; }

/* ---- Other dialogs ---- */
#player-options-dialog { width: 440px; }
#player-options-table td { padding: 6px; vertical-align: top; }
#player-options-table td:first-child { width: 38%; padding-top: 10px; padding-left: 0; }
#gm-login-dialog { width: 380px; }
#map-options-dialog { width: 400px; }
#map-options-scale { display: flex; gap: 6px; }
#map-options-scale input[type=number] { width: 70px; }
#map-options-hint { margin: 8px 0 0; }
/* A line of explanation with its button, below a dialog's main buttons (e.g. Calibrate Token Size in Map Options) */
.dialog-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--divider);
  font-size: 13px;
  color: var(--text-muted);
}
.dialog-section + .dialog-section { margin-top: 12px; }
.dialog-section button { flex-shrink: 0; }
.dialog-section input[type=text] { flex: 1; min-width: 0; }
/* A combobox's list (combobox.js): a popover, placed under its field */
.combobox-list {
  position: fixed;
  inset: auto;
  margin: 0;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0;
  list-style: none;
  box-sizing: border-box;
  background: var(--dialog-bg);
  border: 1px solid var(--input-border);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  color: var(--text-strong);
  font-size: 13px;
}
.combobox-list li { padding: 5px 8px; cursor: pointer; }
.combobox-list li:hover { background: var(--btn-hover-bg); }
.combobox-list li.active { background: rgba(74, 144, 217, 0.35); }
.combobox-list li.combobox-empty { color: var(--text-faint); cursor: default; background: none; }
/* Explanatory text in dialogs (also .dialog-section's) */
.dialog-note { margin: 0 0 12px; line-height: 1.45; font-size: 13px; color: var(--text-muted); }
#share-dialog { width: 440px; }
#ask-dialog { width: 380px; }
#ask-input { width: 100%; }
#welcome-dialog { width: 400px; }
#welcome-name { width: 100%; }
#share-link { width: 100%; }
#share-message { color: var(--success-text); min-height: 1.2em; }

/* ---- Color swatch picker ---- */
.color-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 145px; /* 6 swatches */
}
.color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-sizing: border-box;
  flex-shrink: 0;
}
.color-swatch:hover { opacity: 0.8; }
.color-swatch.selected {
  box-shadow: 0 0 0 2px var(--dialog-bg), 0 0 0 4px var(--text-strong);
}
/* The color wheel: the browser's color picker, drawn as a rainbow (its own swatch hidden) */
.color-wheel {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.color-wheel:hover { opacity: 0.8; }
.color-wheel::-webkit-color-swatch-wrapper { padding: 0; }
.color-wheel::-webkit-color-swatch { opacity: 0; border: none; }
.color-wheel::-moz-color-swatch { opacity: 0; border: none; }
#poi-color-swatches .color-swatch-row { max-width: none; }
#token-dialog .color-swatch-row { max-width: 250px; } /* 10 swatches: a background's greys and dark colors, then light ones */
/* Text/Border Color: just two swatches, so its color wheel and text field fit beside them */
#token-fg-swatches { display: flex; align-items: center; gap: 12px; }
#token-fg-swatches .color-text-row { margin-top: 0; }
#token-fg-swatches .color-text-input { flex: none; width: 120px; }
#draw-color-swatches .color-swatch-row { max-width: 225px; } /* 9 swatches */
.color-text-row { display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.color-text-input { flex: 1; min-width: 0; max-width: 200px; box-sizing: border-box; }
.color-text-input.invalid { border-color: var(--error-text); }
/* ---- Thickness swatch picker ---- */
.thickness-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.thickness-swatch {
  width: 20px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-sizing: border-box;
  background: #444;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thickness-swatch:hover { opacity: 0.8; }
.thickness-swatch.selected {
  box-shadow: 0 0 0 2px var(--dialog-bg), 0 0 0 4px var(--text-strong);
}
.thickness-swatch-line {
  height: calc(100% - 6px);
  background: white;
  border-radius: 2px;
}

/* ---- Party pane ---- */
#party-pane {
  display: none; /* shown via JS as 'flex' in VTT mode */
  position: fixed;
  top: var(--home-top, 0); /* just below the Dice Results pane (placePartyHome in party.js) */
  left: 0;
  height: fit-content;
  width: 210px;
  max-height: 50vh;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 0 var(--panel-radius) var(--panel-radius) 0;
  box-shadow: 4px 0 14px rgba(0, 0, 0, 0.55);
  z-index: 10;
  font-size: 14px;
  color: var(--text);
}
#party-list {
  min-height: 0;
  overflow-y: auto;
  padding: 3px 0;
}
.party-member {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 8px;
}
.party-member.draggable {
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.party-member.dragging {
  cursor: grabbing;
  background: var(--btn-hover-bg);
}
.party-member.gm .party-name {
  color: #f0c060;
}
.party-member.npc .party-name {
  color: #ff7a8a;
}
.party-member.turn {
  background: rgba(80, 150, 255, 0.3);
}
.party-member.turn .party-name {
  font-weight: bold;
}
.party-dot.none {
  visibility: hidden;
}
#party-header .party-gm-only {
  display: flex;
  gap: 4px;
}
#party-footer {
  padding: 2px 8px 5px;
}
.party-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #555;
}
.party-dot.online {
  background: #3c3;
}
.party-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.party-remove {
  flex-shrink: 0;
  padding: 0 2px;
  border: none;
  background: none;
  color: var(--error-text);
  font-size: 1em;
  cursor: pointer;
}
.party-empty {
  padding: 3px 8px;
  color: var(--text-faint);
  font-style: italic;
}

/* ---- Dice pane ---- */
#dice-pane {
  display: none; /* shown via JS as 'flex' in VTT mode */
  position: fixed;
  top: 0;
  left: 0;
  width: 350px;
  height: 180px;
  min-width: 140px;
  min-height: 60px;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 0 0 var(--panel-radius) 0;
  box-shadow: var(--panel-shadow);
  z-index: 10;
  font-family: var(--font-mono);
  font-size: 15px;
  color: #ccc;
}
#party-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#dice-pane-header,
#party-header {
  padding: 4px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--divider);
  cursor: move;
  user-select: none;
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-muted);
}
#dice-log {
  flex: 1;
  overflow-y: auto;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
#dice-log:empty::before {
  content: 'No rolls yet.';
  color: var(--text-faint);
  font-family: var(--font-ui);
  font-style: italic;
}
.dice-entry {
  padding: 1px 0;
  line-height: 1.25;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.dice-entry:last-child { border-bottom: none; }
.dice-player {
  color: var(--dice-blue);
  font-weight: bold;
}
.dice-entry-indent {
  display: inline-block;
  width: 2em;
}
.dice-total {
  color: var(--dice-gold);
  font-weight: bold;
}
.dice-total-loser {
  color: var(--text-faint);
}
#dice-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  cursor: se-resize;
}
#dice-resize-handle::before {
  content: '';
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(255, 255, 255, 0.3);
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

/* ---- Dice roller widget ---- */
/* #dice-help-icon is a .help-icon (theme.css) with its own tooltip: a grid of examples, above it */
#dice-help-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid var(--panel-border);
  color: #eee;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  padding: 6px 10px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 200;
  grid-template-columns: auto auto;
  column-gap: 14px;
  row-gap: 1px;
  justify-items: start;
}
#dice-help-tooltip .dh-hdr {
  grid-column: 1 / -1;
  margin-bottom: 3px;
  font-family: var(--font-ui);
}
#dice-help-icon:hover #dice-help-tooltip,
#dice-help-icon:focus #dice-help-tooltip {
  display: grid;
}
#dice-roller-handle {
  height: 25px; /* same as the Controls header */
  box-sizing: border-box;
  padding: 0 4px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--divider);
  cursor: grab;
  touch-action: none;
  user-select: none;
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Small buttons in widget headers (#button-bank-container's id beats its own button rule) */
#dice-recent-btn,
#button-bank-container #help-button,
#party-pane button:not(.party-remove) {
  height: auto;
  padding: 0 6px;
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 16px;
  color: #aaa;
  background: none;
  border: 1px solid #555;
  border-radius: 3px;
  cursor: pointer;
}
#dice-recent-btn:hover,
#button-bank-container #help-button:hover,
#party-pane button:not(.party-remove):hover {
  color: var(--text-strong);
  border-color: #888;
}
#dice-recent-list {
  display: none; /* shown via JS as 'flex' */
  position: absolute;
  right: 0;
  bottom: calc(100% + 4px);
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 120px;
  max-width: 100%;
  padding: 3px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
}
#dice-recent-list.below {
  bottom: auto;
  top: calc(100% + 4px);
}
.dice-recent-item {
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.dice-recent-item:hover {
  background: rgba(255, 255, 255, 0.16);
  color: var(--text-strong);
}
#dice-roller {
  display: none; /* shown via JS as 'flex' in VTT mode */
  position: fixed;
  bottom: 0;
  right: 0;
  width: 256px;
  flex-direction: column;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: -4px -4px 14px rgba(0, 0, 0, 0.55);
  z-index: 10;
  font-family: var(--font-mono);
  font-size: 18px;
  color: #ccc;
  user-select: none;
}
/* 45 with its divider: 2 (borders) + 25 (header) + 45 + 139 (keypad) = 211, the Controls panel's height */
#dice-roller-top {
  display: flex;
  align-items: stretch;
  min-height: 45px; /* a long expression wraps onto more lines and makes it taller */
  box-sizing: border-box;
  border-bottom: 1px solid var(--divider);
}
#dice-roller-expr {
  flex: 1;
  padding: 6px 8px;
  line-height: 32px; /* one line fills the 44px row, whatever the font size (16px on touch screens) */
  color: var(--text-strong);
  font-size: 18px;
  word-break: break-all;
  user-select: text;
  cursor: text;
  outline: none;
}
#dice-roller-expr:empty::before {
  content: '—';
  color: #444;
}
#dice-roller-error {
  display: none;
  padding: 3px 10px;
  color: var(--error-text);
  font-family: var(--font-ui);
  font-size: 14px;
}
#dice-roller-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 31px;
  gap: 3px 2px; /* rows: 3 + 4 x 31 + 3 x 3 + 3 = 139 */
  padding: 3px;
}
#dice-roller-grid button {
  padding: 0;
  background: var(--btn-bg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  color: #ccc;
  font-family: var(--font-mono);
  font-size: 18px;
  cursor: pointer;
  text-align: center;
}
#dice-roller-grid button:hover { background: var(--btn-hover-bg); color: var(--text-strong); }
#dice-roller-grid button:active { background: var(--btn-active-bg); }
#dice-roller-grid button[data-val="+"],
#dice-roller-grid button[data-val="-"],
#dice-roller-grid button[data-val="*"],
#dice-roller-grid button[data-val="x"] { font-size: 22px; line-height: 1; }
#dice-roller-grid button[data-val^="d"] { color: var(--dice-blue); }
#dice-roller-grid button[data-val^="d"]:hover { color: #aad0ff; }
.dice-special { color: var(--dice-gold) !important; }
.dice-special:hover { color: #ffe898 !important; }
#dice-roll-btn {
  flex-shrink: 0;
  width: 60px;
  background: rgba(74, 144, 217, 0.5);
  border: none;
  border-left: 1px solid rgba(74, 144, 217, 0.4);
  border-radius: 0;
  color: var(--text-strong);
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 0.03em;
  cursor: pointer;
}
#dice-roll-btn:hover { background: rgba(74, 144, 217, 0.8); }
#dice-backspace-btn { color: #ff9999 !important; }

/* ---- Instruction panels at the top of the screen (Manage Fog, Erase, Calibrate Token Size) ---- */
.tool-panel {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: none; /* shown via JS as 'flex' */
  flex-direction: column;
  min-width: 340px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  color: var(--text-strong);
  font-size: 14px;
  z-index: 100;
}
/* Headed like the widgets (Controls, Party, Dice Roller): they too sit over the map and leave it usable. */
.tool-panel-header {
  padding: 4px 8px;
  font-size: 13px;
  color: var(--text-muted);
  background: var(--header-bg);
  border-bottom: 1px solid var(--divider);
}
.tool-panel-body {
  padding: 8px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tool-panel button { padding: 3px 10px; }
#delete-fog-row1,
#draw-erase-row1 {
  display: flex;
  align-items: center;
}
#delete-fog-msg,
#draw-erase-msg {
  color: var(--text);
  font-size: 0.9em;
}
#calibrate-row1,
#delete-fog-row2,
#draw-erase-row2,
#calibrate-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
#delete-fog-row2,
#draw-erase-row2,
#calibrate-row2 { margin-top: 2px; }
#delete-fog-count,
#draw-erase-count {
  color: var(--text-muted);
  font-size: 0.88em;
  flex: 1;
}
#calibrate-panel { min-width: 300px; max-width: min(480px, calc(100vw - 24px)); }
#calibrate-msg {
  color: var(--text);
  font-size: 0.9em;
}
/* A map opened in another page (calibrateframe.js) to calibrate its token size: just the map and the panel */
body.embedded > :not(canvas, #error, #calibrate-panel, dialog, script) { display: none !important; }
#calibrate-size-display {
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 0.9em;
}
#calibrate-warning {
  color: var(--warning-text);
  flex: 1;
}
#delete-fog-buttons,
#draw-erase-buttons,
#calibrate-buttons {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* iOS zooms the page into any focused text field under 16px. */
@media (hover: none) {
  input, textarea, select, [contenteditable] {
    font-size: 16px !important;
  }
}