html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: black;
}
canvas {
  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-family: helvetica, sans-serif;
  font-size: 1.2em;
  text-align: center;
}

/* ---- Modifier-key hint (item 87) ---- */
#modifier-hint {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 12px;
  background: rgba(0, 0, 0, 0.75);
  color: white;
  font-family: helvetica, sans-serif;
  font-size: 14px;
  pointer-events: none;
  border-radius: 6px;
  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: white;
  border: 1px solid black;
  padding: 6px 8px;
  font-family: helvetica, sans-serif;
  font-size: 10pt;
  line-height: 1.2;
  z-index: 10;
}
#poi-tooltip-title {
  font-weight: bold;
  margin-bottom: 4px;
}
#poi-tooltip-blurb {
  white-space: pre-wrap;
}
#poi-tooltip-hr { display: none; }
#poi-tooltip-gm-notes {
  white-space: pre-wrap;
  color: #555;
  font-style: italic;
}

/* ---- Button bank ---- */
#button-bank-container {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  border: 2px solid #777;
  border-radius: 8px;
  overflow: hidden;
  background: silver;
}
#button-bank-handle {
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid #777;
  cursor: grab;
  touch-action: none;
  user-select: none;
  font-size: 13px;
  color: #555;
  text-align: center;
}
#banks-row {
  display: flex;
}
#button-bank {
  display: flex;
  flex-direction: column;
}
#tools-bank {
  display: none;
  flex-direction: column;
  margin-left: -1px;
}
/* All buttons in both columns: full 4-sided border */
#button-bank button,
#tools-bank button {
  width: 80px;
  padding: 5px 0;
  font-family: helvetica, sans-serif;
  font-size: 0.85em;
  background: silver;
  border: 1px solid rgba(0, 0, 0, 0.18);
  line-height: 1.2;
  outline: none;
  cursor: pointer;
  text-align: center;
  touch-action: manipulation;
}
/* First row: no top border (handle's border-bottom is the separator) */
#button-bank > :first-child,
#tools-bank > button:first-child {
  border-top: none;
}
/* Collapse row dividers: each non-first item slides up 1px */
#button-bank > * + *,
#tools-bank > button + button {
  margin-top: -1px;
}
/* Hover: raise above neighbours to show full border */
#button-bank button:hover,
#tools-bank button:hover {
  position: relative;
  z-index: 1;
  background: gainsboro;
}
#zoom-buttons {
  display: flex;
}
#zoom-buttons button {
  flex: 1;
  width: auto;
}
#zoom-buttons > button + button {
  margin-left: -1px;
}
.vtt-only {
  display: none;
}

/* ---- Shared dialog base ---- */
.dialog-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 20;
}
.dialog-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  padding: 20px 24px 16px;
  overflow-y: auto;
  font-family: helvetica, sans-serif;
  font-size: 11pt;
  box-sizing: border-box;
}
.dialog-box h2 {
  margin: 0 0 10px;
  font-size: 1.1em;
  text-align: center;
}
.dialog-close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  font-size: 1.3em;
  color: #555;
  border-radius: 4px;
}
.dialog-close:hover { background: #eee; color: #000; }
.dialog-error { color: red; min-height: 1.2em; margin-bottom: 6px; }
.dialog-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}
.dialog-buttons button {
  padding: 6px 18px;
  font-family: inherit;
  font-size: inherit;
  border-radius: 4px;
  border: 1px solid #aaa;
  cursor: pointer;
  background: silver;
}
.dialog-buttons button:hover { background: gainsboro; }
.btn-primary { background: #4a90d9 !important; color: white; border-color: #3a7bc8 !important; }
.btn-primary:hover { background: #3a7bc8 !important; }
.btn-danger  { background: #cc2200 !important; color: white; border-color: #aa1800 !important; }
.btn-danger:hover  { background: #aa1800 !important; }

/* ---- 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: #e8e8e8;
  color: #222;
  font-size: 13px;
  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 ---- */
#search-overlay {
  pointer-events: none; /* let zoom/pan events reach the canvas behind it */
}
#search-overlay #search-dialog {
  pointer-events: auto; /* dialog itself still captures all interaction */
}
#search-dialog {
  width: 320px;
  max-width: 95vw;
  top: 20px;
  left: auto;
  right: 20px;
  transform: none;
}
#search-form-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
#search-input {
  flex: 1;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 4px 6px;
}
#search-results {
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid #eee;
  border-radius: 3px;
}
.search-result-item {
  padding: 6px 8px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover,
.search-result-item:focus { background: #f0f0f0; outline: none; }
#search-no-results {
  padding: 6px 8px;
  color: #888;
  font-style: italic;
}

/* ---- Help dialog ---- */
#help-overlay { max-height: unset; }
#help-dialog {
  max-width: 700px;
  width: 94%;
  max-height: 88vh;
  font-size: 9.5pt;
  line-height: 1.35;
}
#help-dialog p { margin: 0 0 8px; color: #333; }
#help-dialog h3 {
  margin: 10px 0 3px;
  font-size: 1em;
  color: #555;
  border-bottom: 1px solid #ddd;
  padding-bottom: 2px;
}
#help-dialog table { width: 100%; border-collapse: collapse; }
#help-dialog tr:nth-child(even) td { background: #f5f5f5; }
#help-dialog td { padding: 3px 8px; vertical-align: top; }
#help-dialog td:first-child { font-weight: bold; white-space: nowrap; color: #222; width: 32%; }

/* ---- POI edit dialog ---- */
#poi-dialog {
  width: 620px;
  max-width: 95vw;
  max-height: 88vh;
  /* Override .dialog-box centering: vertically centered, pinned to right edge */
  left: auto;
  right: 20px;
  transform: translateY(-50%);
}
#poi-dialog h2 {
  cursor: move;
  user-select: none;
}
#poi-dialog table { width: 100%; border-collapse: collapse; }
#poi-dialog td { padding: 4px 6px; vertical-align: middle; }
#poi-dialog td:first-child {
  font-weight: bold;
  white-space: nowrap;
  width: 26%;
  padding-top: 6px;
  vertical-align: top;
}
#poi-dialog input[type=text],
#poi-dialog select,
#poi-dialog textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 4px 6px;
}
#poi-dialog textarea { height: 140px; resize: vertical; }
#poi-dialog tr:nth-child(even) td { background: #f7f7f7; }

/* ---- Token edit dialog ---- */
#token-dialog {
  width: 400px;
  max-width: 95vw;
  max-height: 88vh;
  /* Match POI dialog: vertically centered, pinned to right edge */
  left: auto;
  right: 20px;
  transform: translateY(-50%);
}
#token-dialog table { width: 100%; border-collapse: collapse; }
#token-dialog td { padding: 4px 6px; vertical-align: middle; }
#token-dialog td:first-child {
  font-weight: bold;
  white-space: nowrap;
  width: 38%;
  padding-top: 6px;
  vertical-align: top;
}
#token-dialog input[type=text],
#token-dialog select {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 4px 6px;
}
#token-dialog tr:nth-child(even) td { background: #f7f7f7; }

/* ---- Player Options dialog ---- */
#player-options-dialog {
  width: 440px;
  max-width: 95vw;
}
#player-options-table { width: 100%; border-collapse: collapse; }
#player-options-table td { padding: 6px 6px; vertical-align: top; }
#player-options-table td:first-child {
  font-weight: bold;
  white-space: nowrap;
  width: 38%;
  padding-top: 10px;
}
#player-options-name {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 4px 6px;
}
/* ---- Color swatch picker ---- */
.color-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 179px;
}
.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid #000;
  box-sizing: border-box;
  flex-shrink: 0;
}
.color-swatch:hover { opacity: 0.8; }
.color-swatch.selected {
  box-shadow: 0 0 0 3px #000;
}
/* ---- Thickness swatch picker ---- */
.thickness-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.thickness-swatch {
  width: 20px;
  height: 36px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid #000;
  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 3px #000;
}
.thickness-swatch-line {
  height: calc(100% - 6px);
  background: white;
  border-radius: 2px;
}

/* ---- Party pane (same look as the dice widgets) ---- */
#party-pane {
  display: none; /* shown via JS as 'flex' in VTT mode */
  position: fixed;
  /* vertically centered against the left edge (no transform, so dragging works) */
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto 0;
  height: fit-content;
  width: 210px;
  max-height: 50vh;
  flex-direction: column;
  overflow: hidden;
  background: rgba(18, 18, 18, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0 6px 6px 0;
  box-shadow: 4px 0 14px rgba(0, 0, 0, 0.55);
  z-index: 10;
  font-family: monospace;
  font-size: 14px;
  color: #ccc;
}
#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: rgba(255, 255, 255, 0.12);
}
.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: #ddd;
}
.party-remove {
  flex-shrink: 0;
  padding: 0 2px;
  border: none;
  background: none;
  color: #ff6b6b;
  font-size: 1em;
  cursor: pointer;
}
.party-empty {
  padding: 3px 8px;
  color: #666;
  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: rgba(18, 18, 18, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0 0 6px 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
  z-index: 10;
  font-family: monospace;
  font-size: 15px;
  color: #ccc;
}
#party-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#dice-pane-header,
#party-header {
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  cursor: move;
  user-select: none;
  flex-shrink: 0;
  font-size: 13px;
  color: #888;
}
#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: #444;
  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: #7ab4ff;
  font-weight: bold;
}
.dice-entry-indent {
  display: inline-block;
  width: 2em;
}
.dice-total {
  color: #ffd060;
  font-weight: bold;
}
.dice-total-loser {
  color: #666;
}
#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 {
  display: inline-block;
  position: relative;
  width: 14px;
  height: 14px;
  line-height: 14px;
  border-radius: 50%;
  border: 1px solid #888;
  font-size: 10px;
  color: #888;
  text-align: center;
  cursor: default;
  vertical-align: middle;
  margin-left: 4px;
  user-select: none;
}
#dice-help-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: rgba(0, 0, 0, 0.85);
  color: #eee;
  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;
}
#dice-help-icon:hover #dice-help-tooltip {
  display: grid;
}
#dice-roller-handle {
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  cursor: grab;
  touch-action: none;
  user-select: none;
  flex-shrink: 0;
  font-size: 13px;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#dice-recent-btn,
#party-pane button:not(.party-remove) {
  padding: 0 6px;
  font-family: monospace;
  font-size: 11px;
  line-height: 16px;
  color: #aaa;
  background: none;
  border: 1px solid #555;
  border-radius: 3px;
  cursor: pointer;
}
#dice-recent-btn:hover,
#party-pane button:not(.party-remove):hover {
  color: #fff;
  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: rgba(18, 18, 18, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
}
#dice-recent-list.below {
  bottom: auto;
  top: calc(100% + 4px);
}
.dice-recent-item {
  padding: 4px 8px;
  font-family: monospace;
  font-size: 14px;
  color: #ddd;
  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: #fff;
}
#dice-roller {
  display: none; /* shown via JS as 'flex' in VTT mode */
  position: fixed;
  bottom: 0;
  right: 0;
  width: 304px;
  flex-direction: column;
  background: rgba(18, 18, 18, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  box-shadow: -4px -4px 14px rgba(0, 0, 0, 0.55);
  z-index: 10;
  font-family: monospace;
  font-size: 18px;
  color: #ccc;
  user-select: none;
}
#dice-roller-top {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#dice-roller-expr {
  flex: 1;
  padding: 7px 10px 5px;
  min-height: 1.6em;
  color: #fff;
  font-size: 20px;
  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: #ff6b6b;
  font-size: 14px;
}
#dice-roller-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  padding: 5px;
}
#dice-roller-grid button {
  padding: 2px 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  color: #ccc;
  font-family: monospace;
  font-size: 20px;
  cursor: pointer;
  text-align: center;
}
#dice-roller-grid button:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
#dice-roller-grid button:active { background: rgba(255, 255, 255, 0.28); }
#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: 25px; }
#dice-roller-grid button[data-val^="d"] { color: #7ab4ff; }
#dice-roller-grid button[data-val^="d"]:hover { color: #aad0ff; }
.dice-special { color: #ffd060 !important; }
.dice-special:hover { color: #ffe898 !important; }
#dice-roll-btn {
  flex-shrink: 0;
  width: 70px;
  background: rgba(74, 144, 217, 0.5);
  border: none;
  border-left: 1px solid rgba(74, 144, 217, 0.4);
  border-radius: 0;
  color: #fff;
  font-family: monospace;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.05em;
  cursor: pointer;
}
#dice-roll-btn:hover { background: rgba(74, 144, 217, 0.8); }
#dice-backspace-btn { color: #ff9999 !important; }

/* ---- Delete Fog instruction panel ---- */
#delete-fog-panel {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  border-radius: 6px;
  z-index: 100;
  display: none;
  flex-direction: column;
  font-family: helvetica, sans-serif;
  font-size: 0.95em;
  min-width: 340px;
}
#delete-fog-header {
  padding: 6px 16px;
  font-weight: bold;
  text-align: center;
  font-size: 0.88em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #bbb;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
#delete-fog-body {
  padding: 8px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#delete-fog-row1 {
  display: flex;
  align-items: center;
}
#delete-fog-msg {
  color: #ddd;
  font-size: 0.9em;
}
#delete-fog-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 2px;
}
#delete-fog-count {
  color: #aaa;
  font-size: 0.88em;
  flex: 1;
}
#delete-fog-buttons {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
#delete-fog-panel button {
  font-size: 0.85em;
  padding: 2px 8px;
}

/* ---- Calibrate instruction panel ---- */
#calibrate-panel {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  border-radius: 6px;
  z-index: 100;
  display: none;
  flex-direction: column;
  font-family: helvetica, sans-serif;
  font-size: 0.95em;
  min-width: 300px;
}
#calibrate-header {
  padding: 6px 16px;
  font-weight: bold;
  text-align: center;
  font-size: 0.88em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #bbb;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
#calibrate-body {
  padding: 8px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#calibrate-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
#calibrate-size-display {
  white-space: nowrap;
  color: #aaa;
  font-size: 0.9em;
}
#calibrate-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 2px;
}
#calibrate-warning {
  color: #ffb347;
  flex: 1;
}
#calibrate-buttons {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
#calibrate-panel button {
  font-size: 0.85em;
  padding: 2px 8px;
}

/* ---- Draw erase instruction panel (same structure as #delete-fog-panel) ---- */
#draw-erase-panel {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  border-radius: 6px;
  z-index: 100;
  display: none;
  flex-direction: column;
  font-family: helvetica, sans-serif;
  font-size: 0.95em;
  min-width: 340px;
}
#draw-erase-header {
  padding: 6px 16px;
  font-weight: bold;
  text-align: center;
  font-size: 0.88em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #bbb;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
#draw-erase-body {
  padding: 8px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#draw-erase-row1 {
  display: flex;
  align-items: center;
}
#draw-erase-msg {
  color: #ddd;
  font-size: 0.9em;
}
#draw-erase-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 2px;
}
#draw-erase-count {
  color: #aaa;
  font-size: 0.88em;
  flex: 1;
}
#draw-erase-buttons {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
#draw-erase-panel button {
  font-size: 0.85em;
  padding: 2px 8px;
}

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