* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f7f6f2;
  color: #28251d;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px;
}

h1, h2, h3 { margin-bottom: 8px; }
p { margin-bottom: 8px; }

.card {
  background: #fbfbf9;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  margin-bottom: 16px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 6px;
  background: #01696f;
  color: #f9f8f4;
  text-decoration: none;
  font-weight: 600;
  margin-top: 8px;
}

.layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: #1c1b19;
  color: #cdccca;
  padding: 16px;
}

.logo { font-size: 1.3rem; margin-bottom: 16px; }

.nav { display: flex; flex-direction: column; gap: 8px; }

.nav-item {
  padding: 8px 12px;
  border-radius: 6px;
  border: none;
  background: #28251d;
  color: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}

.nav-item:hover { background: #3a3834; }

.main { padding: 24px; }

.main-header { margin-bottom: 16px; }

.section { display: none; }
.section.active { display: block; }

.card.full { grid-column: 1 / -1; }

.map-container {
  padding: 16px;
}

.map-header { margin-bottom: 16px; }

.map-area {
  background: #fbfbf9;
  border-radius: 8px;
  min-height: 480px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
}

@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav { flex-direction: row; flex-wrap: wrap; }
}

/* ---- Utilidades e páginas de jogador (mobile-first) ---- */

.money-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px;
}

.error {
  background: #fdecea;
  color: #8a1c14;
  border: 1px solid #f3b9b3;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

.vault-card small { color: #6b675d; font-weight: normal; }

.balances {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 12px;
}
.balances li {
  background: #efeee9;
  border-radius: 6px;
  padding: 6px 10px;
  color: #111;            /* texto sempre escuro: o fundo do chip é claro fixo */
}
.balances li strong { color: #111; }

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.inline-form input[type="number"] { width: 90px; }
.inline-form input, .inline-form select, .inline-form button {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #cbc9c0;
  font-size: 1rem;
}
.inline-form button {
  background: #01696f;
  color: #f9f8f4;
  border: none;
  cursor: pointer;
  font-weight: 600;
}
.inline-form button.btn-danger { background: #8a1c14; }

.btn-disabled {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 6px;
  background: #cbc9c0;
  color: #6b675d;
  font-weight: 600;
  margin-top: 8px;
}

/* ---- Log de eventos ---- */
.log-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.log-item {
  background: #fbfbf9;
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}
.log-time { color: #6b675d; font-size: 0.85rem; min-width: 128px; }
.log-badge {
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e5e4df;
  color: #3a3834;
}
.log-money .log-badge { background: #d8efe0; color: #0d5c37; }
.log-item .log-badge { }
.log-level .log-badge { background: #e3e0f7; color: #3b2f8a; }
.log-author { color: #6b675d; font-size: 0.85rem; }
.log-desc { flex: 1 1 100%; }

/* ---- Dashboard do mestre ---- */
.muted { color: #6b675d; font-size: 0.9rem; }
details { margin-top: 8px; }
details summary { cursor: pointer; font-weight: 600; color: #01696f; }

/* ---- Mapa (SVG grid + tempo real) ---- */
.map-body { background: #14130f; color: #e8e6df; min-height: 100vh; }
.map-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: #1c1b19;
}
.map-header h1 { margin: 0; font-size: 1.1rem; }
.ws-status {
  font-size: 0.8rem; padding: 2px 8px; border-radius: 999px;
  background: #4b2b2b; color: #ffd7d7;
}
.ws-status.ok { background: #23402c; color: #b8f0c8; }

.map-layout { display: flex; gap: 12px; padding: 12px; align-items: flex-start; }
.map-stage {
  flex: 1 1 auto;
  background: #0c0b09;
  border-radius: 8px;
  overflow: auto;        /* permite rolar quando o mapa é ampliado além do stage */
  min-width: 0;
  position: relative;
  /* Centraliza o mapa horizontalmente, mesmo com zoom. Como o SVG pode ser
     mais largo que o stage, usamos flex com justify-content:center (centra
     quando cabe) e a rolagem parte do centro quando ultrapassa. */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* O stage mantém sua largura no layout flex — o zoom NÃO altera a caixa,
     então a barra lateral (.map-controls) não é arrastada. */
}
#map-svg {
  /* Zoom de exibição (só visual): escala apenas o SVG dentro do stage.
     --map-zoom vai de 0.4 a 3; 1 = largura total do stage. */
  width: calc(var(--map-zoom, 1) * 100%);
  height: auto;
  display: block;
  flex: 0 0 auto;        /* não encolhe; mantém a largura do zoom */
  margin: 0 auto;
  aspect-ratio: 1 / 1;   /* padrão; sobrescrito via JS conforme grid X/Y */
  background: #1a1915;
}
.grid-line { stroke: rgba(255,255,255,0.12); stroke-width: 0.02; }
.token-label { fill: #fff; paint-order: stroke; stroke: #000; stroke-width: 0.03; }
.map-shape { pointer-events: all; }
.object-icon { pointer-events: none; user-select: none; }

.map-controls {
  flex: 0 0 300px;
  background: #201f1b;
  border-radius: 8px;
  padding: 12px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
}
.map-controls h2 { font-size: 1rem; }
.control-block { margin-bottom: 16px; border-top: 1px solid #333; padding-top: 10px; }
.control-block label { display: block; margin: 6px 0; font-size: 0.9rem; }
.control-block input, .control-block select {
  width: 100%; padding: 6px; border-radius: 6px; border: 1px solid #444;
  background: #14130f; color: #e8e6df;
}
.control-block input[type="color"] { height: 32px; padding: 2px; }
.control-block button {
  margin-top: 6px; padding: 8px 10px; border-radius: 6px; border: none;
  background: #01696f; color: #f9f8f4; font-weight: 600; cursor: pointer; width: 100%;
}
.control-block button.btn-danger { background: #8a1c14; }
.lock-banner {
  font-size: 0.8rem;
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #3a3016;
  color: #f0d79a;
}
.lock-banner.locked { background: #16351f; color: #b8f0c8; }
.control-block button.locked { background: #8a5a00; }
.shape-group.locked { pointer-events: none; }
#template-list { list-style: none; margin-top: 8px; }
#template-list li { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
#template-list button { width: auto; padding: 4px 8px; }

/* ---- Ordem de turno: overlay no mapa (TV/jogador/mestre) ---- */
.turn-overlay {
  position: absolute;
  top: 10px; left: 10px;
  width: 210px; max-height: 80%;
  background: rgba(12, 11, 9, 0.82);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 8px 10px;
  color: #f2efe6;
  z-index: 5;
  overflow-y: auto;
  backdrop-filter: blur(2px);
}
.turn-overlay-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.turn-overlay-title { font-weight: 700; font-size: 0.95rem; }
.turn-round { font-size: 0.78rem; opacity: 0.8; }
.turn-overlay-list { list-style: none; margin: 0; padding: 0; }
.turn-ov-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 5px 8px; margin: 3px 0; border-radius: 6px;
  background: rgba(255,255,255,0.06);
  border-left: 4px solid transparent;
  font-size: 0.9rem;
}
.turn-ov-item.turn-player { border-left-color: #22c55e; }
.turn-ov-item.turn-enemy { border-left-color: #ef4444; }
.turn-ov-item.active {
  background: #fbbf24; color: #1a1600; font-weight: 700;
  box-shadow: 0 0 10px rgba(251,191,36,0.6);
}
.turn-ov-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turn-ov-meta { font-size: 0.75rem; opacity: 0.85; flex: 0 0 auto; }

/* TV: overlay maior e mais legível de longe. */
.tv-mode .turn-overlay { width: 320px; top: 24px; left: 24px; padding: 14px 16px; }
.tv-mode .turn-overlay-title { font-size: 1.4rem; }
.tv-mode .turn-round { font-size: 1.1rem; }
.tv-mode .turn-ov-item { font-size: 1.3rem; padding: 8px 12px; }
.tv-mode .turn-ov-meta { font-size: 1rem; }

/* ---- Ordem de turno: painel do mestre ---- */
.turn-add { border: 1px dashed #444; border-radius: 6px; padding: 6px; margin-bottom: 8px; }
.turn-list { list-style: none; margin: 8px 0; padding: 0; }
.turn-list li.turn-item {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  padding: 5px 8px; margin: 3px 0; border-radius: 6px;
  background: #14130f; border-left: 4px solid transparent; font-size: 0.88rem;
}
.turn-list li.turn-player { border-left-color: #22c55e; }
.turn-list li.turn-enemy { border-left-color: #ef4444; }
.turn-list li.active { background: #3a3016; color: #ffe9a8; font-weight: 700; }
.turn-item-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turn-item-btns { display: flex; gap: 3px; flex: 0 0 auto; }
.turn-item-btns button { width: auto; margin: 0; padding: 2px 6px; font-size: 0.8rem; }
.turn-controls { display: flex; flex-wrap: wrap; gap: 4px; }
.turn-controls button { width: auto; flex: 1 1 45%; margin: 2px 0; }

/* ---- Régua de medição ---- */
.ruler-readout {
  position: absolute;
  bottom: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(12,11,9,0.85); color: #fbbf24;
  padding: 8px 16px; border-radius: 20px; font-weight: 700; font-size: 1.1rem;
  border: 1px solid #fbbf24; z-index: 6;
}
.tv-mode .ruler-readout { font-size: 1.6rem; bottom: 28px; }

/* Modo TV: sem cabeçalho, tela cheia. */
.tv-mode .map-layout { padding: 0; }
.tv-mode .map-stage { border-radius: 0; height: 100vh; }
.tv-mode #map-svg { height: 100vh; aspect-ratio: auto; }

@media (max-width: 768px) {
  .map-layout { flex-direction: column; }
  .map-controls { flex-basis: auto; width: 100%; max-height: none; }
}

/* ---- Setas do jogador ENCOSTADAS nas bordas da tela ---- */
/* Botões direcionais agrupados como um D-pad de console (cruz), fixos no canto
   inferior esquerdo da tela. Uma grade 3×3 posiciona cada seta na cruz. */
.edge-arrows {
  position: fixed;
  right: 16px; top: 50%; transform: translateY(-50%);
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(3, 56px);
  gap: 4px;
  touch-action: manipulation;
}
.edge-arrow {
  border: none;
  border-radius: 12px;
  background: rgba(1, 105, 111, 0.9);
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.45);
  touch-action: manipulation;
}
.edge-arrow:active { background: #014f54; }
/* Posição de cada seta na cruz (grade 3×3): cima=col2/lin1, esquerda=col1/lin2,
   direita=col3/lin2, baixo=col2/lin3. O centro fica vazio. */
.edge-up    { grid-column: 2; grid-row: 1; }
.edge-left  { grid-column: 1; grid-row: 2; }
.edge-right { grid-column: 3; grid-row: 2; }
.edge-down  { grid-column: 2; grid-row: 3; }

/* No celular (retrato/tela estreita), o D-pad vai para o canto inferior direito,
   ao alcance do polegar, com botões um pouco menores. */
@media (max-width: 768px) {
  .edge-arrows {
    top: auto; bottom: 16px; right: 12px; transform: none;
    grid-template-columns: repeat(3, 52px);
    grid-template-rows: repeat(3, 52px);
  }
}

/* ---- Toast de notificação do dashboard ---- */
.dash-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #01696f;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 100;
}
.dash-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =====================================================================
   Base global — aplica visual consistente e responsivo a TODAS as páginas
   (login, jogador, ficha, inventário, magias, dinheiro, log, mestre).
   Só afeta páginas cujo <body> tem a classe .page (e complementa as demais).
   ===================================================================== */

.page {
  background: #f2efe6;
  color: #28251d;
  min-height: 100vh;
}

/* Contêiner central responsivo para conteúdo de página. */
.page-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 16px 48px;
}
.page-content.narrow { max-width: 420px; }

/* Tipografia */
.page h1 { font-size: 1.5rem; margin: 12px 0 12px; color: #01474b; }
.page h2 { font-size: 1.2rem; margin: 20px 0 8px; }
.page h3 { font-size: 1.02rem; margin: 14px 0 6px; color: #3a3834; }
.page p { line-height: 1.5; }

/* Cartão implícito para blocos/section dentro de páginas simples */
.page .inventory-entry,
.page form:not(.inline-form):not(.stacked-form):not(.player-nav) {
  background: #fbfbf9;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  margin-bottom: 16px;
}

.page .inventory-entry {
  border: 1px solid #e6e3da;
}

/* Campos de formulário — toque confortável no celular */
.page label { display: inline-block; font-size: 0.9rem; color: #4a473f; margin-top: 8px; }
.page input,
.page select,
.page textarea {
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid #cbc9c0;
  border-radius: 8px;
  background: #fff;
  color: inherit;
  max-width: 100%;
  margin-top: 4px;
}
.page input[type="number"] { width: 140px; }
.page input[type="text"],
.page input[type="password"],
.page textarea { width: 100%; }
.page textarea { resize: vertical; }
.page input:focus,
.page select:focus,
.page textarea:focus {
  outline: none;
  border-color: #01696f;
  box-shadow: 0 0 0 3px rgba(1, 105, 111, 0.18);
}

/* Botões */
.page button,
.page .btn {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: #01696f;
  color: #f9f8f4;
  cursor: pointer;
  text-decoration: none;
  margin-top: 8px;
}
.page button:hover,
.page .btn:hover { background: #015458; }
.page button:active { transform: translateY(1px); }

/* Links de texto */
.page a { color: #01696f; }

/* Formulário empilhado (login) */
.stacked-form { display: flex; flex-direction: column; gap: 4px; }
.stacked-form button { align-self: flex-start; }

.login-page .page-content {
  margin-top: 8vh;
  background: #fbfbf9;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

/* Barra de navegação do jogador (mobile-first) */
.player-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  background: #01474b;
  padding: 8px 12px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.player-nav a {
  color: #d7efe9;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.95rem;
}
.player-nav a:hover { background: rgba(255, 255, 255, 0.12); }
.player-nav .brand { font-weight: 700; color: #fff; margin-right: auto; }

/* Linha de botões/atalhos */
.link-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* Ajustes responsivos gerais */
@media (max-width: 600px) {
  .page h1 { font-size: 1.3rem; }
  .page input[type="number"] { width: 100%; }
  .player-nav { justify-content: center; }
  .player-nav .brand { margin-right: 0; width: 100%; text-align: center; }
}

/* ---- Magias agrupadas por nível ---- */
.spell-level-group { margin: 12px 0; }
.spell-level-group h4 {
  margin: 0 0 6px;
  padding: 4px 8px;
  background: #e7efe8;
  border-left: 4px solid #01696f;
  border-radius: 4px;
  color: #01474b;
}
.spell-level-group ul { list-style: none; margin: 0; padding-left: 4px; }
.spell-level-group li { padding: 2px 0; }
.spell-cost {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.8rem;
  color: #8a5a00;
  background: #fff6e0;
  border: 1px solid #f0d79a;
  border-radius: 4px;
  padding: 0 6px;
}

/* ---- Controles de jogadores e rotação no mapa ---- */
#player-add-list { list-style: none; margin: 6px 0 0; padding: 0; }
.player-add-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid #333;
}
.player-add-item button { width: auto; padding: 4px 10px; margin: 0; }

.rotate-block { margin-top: 10px; }
.rotate-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.rotate-buttons button { width: auto; flex: 1 1 45%; padding: 6px 8px; margin: 0; }
.rotate-buttons button:disabled { opacity: 0.45; cursor: not-allowed; }

.shape-group.selected .map-shape { filter: drop-shadow(0 0 0.2px #fff); }

/* ---- Banner de sucesso (dashboard) ---- */
.success-banner {
  background: #d8efe0;
  color: #0d5c37;
  border: 1px solid #a6d9bb;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

/* ---- Perícias/salvaguardas no card do mestre ---- */
.prof-title { font-weight: 600; margin: 8px 0 2px; font-size: 0.9rem; }
.prof-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 4px;
}
.prof-list li { font-size: 0.85rem; color: #0d5c37; }

/* ---- Form de dar item (mestre) ---- */
.item-form .focus-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  white-space: nowrap;
}
.item-form .focus-inline input { width: auto; margin: 0; }

/* ---- Histórico da campanha ---- */
.day-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.day-entry { border-left: 4px solid #cbc9c0; padding: 6px 10px; background: #f7f6f2; border-radius: 4px; }
.day-entry.current { border-left-color: #01696f; background: #eef5f2; }
.day-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.day-money { margin-left: auto; font-size: 0.85rem; }
.day-money .given { color: #0d5c37; margin-right: 8px; }
.day-money .taken { color: #8a1c14; }
.day-notes { list-style: none; margin: 6px 0 0; padding-left: 10px; display: flex; flex-direction: column; gap: 4px; }
.day-notes li { display: flex; gap: 6px; align-items: baseline; font-size: 0.9rem; }
.day-notes li span { color: #4a473f; }
.inline-note-del { display: inline; margin-left: auto; }
.inline-note-del button { padding: 0 8px; margin: 0; }

/* ---- Bandeja de tokens de jogador ---- */
#token-tray { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tray-item { display: flex; align-items: center; gap: 8px; }
.tray-item .tray-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 1px solid #111; }
.tray-item button { width: auto; padding: 4px 10px; margin: 0; }

/* ---- Névoa e alça ---- */
.map-fog { }
.fog-handle { }

/* ---- Caixa de contexto (duplo clique) ---- */
.ctx-dialog {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #201f1b;
  color: #e8e6df;
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  z-index: 200;
  min-width: 220px;
}
.ctx-title { font-weight: 700; margin-bottom: 10px; }
.ctx-buttons { display: flex; flex-direction: column; gap: 8px; }
.ctx-buttons button {
  padding: 8px 12px; border: none; border-radius: 6px;
  background: #01696f; color: #f9f8f4; font-weight: 600; cursor: pointer;
}
.ctx-buttons button.btn-danger { background: #8a1c14; }
#ctx-close { background: #3a3834; }

/* ---- Painel de conteúdo/saque do baú ---- */
.chest-panel { margin-top: 12px; border-top: 1px solid #3a3834; padding-top: 10px; }
.chest-panel h4 { margin: 0 0 8px; font-size: 0.95rem; }
.chest-items { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.chest-items .chest-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #2a2925; border-radius: 6px; padding: 6px 8px;
}
.chest-items .chest-item-name { flex: 1; font-size: 0.9rem; }
.chest-items .chest-item button {
  padding: 4px 10px; border: none; border-radius: 6px;
  background: #01696f; color: #f9f8f4; font-weight: 600; cursor: pointer; font-size: 0.8rem;
}
.chest-items .chest-item button.btn-danger { background: #8a1c14; }
.chest-items li.muted { font-size: 0.85rem; opacity: 0.8; }
.chest-add-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.chest-add-form input {
  padding: 6px 8px; border-radius: 6px; border: 1px solid #3a3834;
  background: #17161300; background-color: #2a2925; color: #e8e6df;
}
.chest-add-form button {
  padding: 8px 12px; border: none; border-radius: 6px;
  background: #01696f; color: #f9f8f4; font-weight: 600; cursor: pointer;
}
.chest-image-actions { display: flex; gap: 8px; }
.chest-image-actions button {
  flex: 1; padding: 8px 12px; border: none; border-radius: 6px;
  background: #01696f; color: #f9f8f4; font-weight: 600; cursor: pointer;
}
.chest-image-actions button.btn-danger { background: #8a1c14; }

/* ---- FASE 6: Biblioteca de objetos (paleta do editor) ---- */
.object-library { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.object-preset {
  display: flex; align-items: center; gap: 8px;
  background: #14130f; border: 1px solid #444; border-radius: 6px; padding: 6px;
}
.object-preset-thumb {
  width: 36px; height: 36px; flex: 0 0 36px; object-fit: cover;
  border-radius: 4px; background: #0c0b08;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.object-preset-name { flex: 1; font-size: 0.9rem; }
.object-preset .object-preset-add { width: auto; margin-top: 0; padding: 6px 10px; font-size: 0.8rem; }

/* ---- Inventário do jogador: itens colapsáveis ---- */
details.inventory-entry {
  background: #fbfbf9;
  border: 1px solid #e6e3da;
  border-radius: 10px;
  padding: 0;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.inventory-summary {
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}
.inventory-summary::-webkit-details-marker { display: none; }
.inventory-summary::before {
  content: "▸";
  color: #01696f;
  transition: transform 0.15s;
}
details.inventory-entry[open] .inventory-summary::before { content: "▾"; }
.item-summary-qty { color: #6b675d; font-weight: 400; }
.item-summary-focus {
  font-size: 0.72rem; text-transform: uppercase; font-weight: 700;
  background: #fff6e0; color: #8a5a00; border: 1px solid #f0d79a;
  border-radius: 999px; padding: 1px 8px;
}
/* Espaçamento interno dos campos quando expandido */
details.inventory-entry[open] { padding: 0 14px 14px; }

/* ---- Excluir jogador ---- */
.delete-player-form { margin-top: 12px; border-top: 1px solid #eee; padding-top: 10px; }
.delete-player-form button { width: 100%; }

/* ---- Inventário: armas/vestimentas e estado ---- */
.hidden { display: none !important; }
.weapon-field, .armor-field {
  border-left: 3px solid #01696f;
  padding-left: 10px;
  margin: 8px 0;
}
.equip-label { display: block; margin: 8px 0; }
.item-kind-badge {
  font-size: 0.7rem; text-transform: uppercase; font-weight: 700;
  border-radius: 999px; padding: 1px 8px;
}
.kind-arma { background: #fde2e1; color: #8a1c14; border: 1px solid #f3b9b3; }
.kind-vest { background: #e3e0f7; color: #3b2f8a; border: 1px solid #c7c0ec; }
.item-summary-stored {
  font-size: 0.7rem; text-transform: uppercase; font-weight: 700;
  background: #efeee9; color: #6b675d; border-radius: 999px; padding: 1px 8px;
}

/* ---- Chips de status e armas no card do mestre ---- */
.stat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.stat-chip {
  background: #eef2ee; border: 1px solid #d6ddd6; border-radius: 999px;
  padding: 3px 10px; font-size: 0.85rem;
}
.stat-chip.chip-warn { background: #fdecea; border-color: #f3b4ad; color: #8a2c22; }

/* ---- Consulta de magias do mestre ---- */
.spell-group h3 { margin: 0 0 8px; }
.spell-entry { border-bottom: 1px solid #e2ded3; padding: 6px 0; }
.spell-entry summary { cursor: pointer; }
.spell-entry .spell-tag {
  background: #eef2ee; border: 1px solid #d6ddd6; border-radius: 999px;
  padding: 1px 8px; font-size: 0.72rem; margin-left: 6px;
}
.spell-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0; font-size: 0.88rem; }
.spell-full-desc { margin: 4px 0 2px; font-size: 0.92rem; }

/* ---- Mapa-múndi (visualizador com zoom/pan) ---- */
.worldmap-viewport {
  position: relative;
  width: 100%;
  height: calc(100vh - 64px);
  overflow: hidden;
  background: #0c0b09;
  cursor: grab;
  touch-action: none;
}
.worldmap-viewport.grabbing { cursor: grabbing; }
#worldmap-img {
  position: absolute;
  top: 50%; left: 50%;
  max-width: 100%; max-height: 100%;
  transform-origin: center center;
  user-select: none;
  will-change: transform;
}
.worldmap-controls {
  position: fixed; bottom: 16px; right: 16px;
  display: flex; gap: 8px; z-index: 50;
}
.worldmap-controls button {
  padding: 8px 12px; border: none; border-radius: 8px;
  background: rgba(1, 105, 111, 0.9); color: #fff; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.worldmap-controls button:active { background: #014f54; }
.worldmap-thumb { margin: 8px 0; }
.worldmap-thumb img { max-width: 100%; max-height: 260px; border-radius: 8px; border: 1px solid #e2ded3; }

/* ---- Mapa-múndi: marcadores (Abordagem B) ---- */
/* O stage recebe o transform (zoom/pan) e contém a imagem + camada de pinos. */
.worldmap-stage {
  position: absolute;
  top: 50%; left: 50%;
  transform-origin: center center;
  will-change: transform;
}
.worldmap-stage #worldmap-img {
  position: static;
  display: block;
  max-width: 80vw; max-height: 80vh;
  transform: none;
  margin: 0;
}
.worldmap-markers {
  position: absolute; inset: 0;
  pointer-events: none;
}
.wm-marker {
  position: absolute;
  width: 18px; height: 18px;
  transform: translate(-50%, -100%);
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  background: var(--pin, #ef4444);
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  cursor: pointer;
  pointer-events: auto;
  padding: 0;
}
.wm-marker.wm-secret { outline: 2px dashed #fff; outline-offset: 2px; }
/* Marcadores com glifo de categoria/tipo (Req 1.3, Req 5): pino um pouco maior
   e simétrico para acomodar o emoji centralizado. */
.wm-marker:not(:empty) {
  width: 26px; height: 26px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.worldmap-viewport.wm-adding { cursor: crosshair; }
#wm-add-mode.active { background: #b45309; }

/* Popover do marcador */
.wm-popover {
  position: fixed; z-index: 80;
  max-width: 280px;
  background: #fbfbf9; color: #28251d;
  border: 1px solid #d6ddd6; border-radius: 10px;
  padding: 12px 14px; box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
.wm-popover h3 { margin: 0 6px 6px 0; font-size: 1.05rem; }
.wm-popover-body { margin: 4px 0; font-size: 0.92rem; white-space: pre-wrap; }
.wm-popover-link { margin: 6px 0 0; font-size: 0.88rem; }
.wm-popover-close {
  position: absolute; top: 6px; right: 8px;
  border: none; background: none; font-size: 1.2rem; cursor: pointer; color: #666;
}
.wm-popover-actions { display: flex; gap: 8px; margin-top: 10px; }

/* Diálogo de criação/edição (mestre) */
.wm-dialog {
  position: fixed; z-index: 90;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(420px, 92vw);
  background: #fbfbf9; color: #28251d;
  border-radius: 12px; padding: 18px; box-shadow: 0 10px 40px rgba(0,0,0,0.45);
}
.wm-dialog h3 { margin: 0 0 10px; }
.wm-dialog .wm-secret { display: flex; align-items: center; gap: 6px; }
.wm-dialog-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ---- Ajustar dinheiro: uma moeda por linha ---- */
.coin-adjust-form { margin: 6px 0 12px; }
.coin-vault-name { display: block; margin-bottom: 4px; }
.coin-grid { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.coin-cell { display: flex; align-items: center; gap: 8px; }
.coin-cell .coin-label { flex: 0 0 90px; }
.coin-cell input { flex: 1 1 auto; max-width: 140px; }

/* ---- Cabeçalho do card do jogador (foto de rosto + nome) ---- */
.player-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.player-card-head h2 { margin: 0; font-size: 1.05rem; }
.player-card-head .muted { margin: 2px 0 0; }
.player-face {
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  flex: 0 0 auto;
  border: 2px solid var(--accent, #01696f);
  display: flex; align-items: center; justify-content: center;
  background: #eef2ee;
}
.player-face img { width: 100%; height: 100%; object-fit: cover; }
.player-face .avatar-placeholder { font-size: 0.65rem; text-align: center; opacity: 0.6; }

/* ---- Modificadores de atributo: um por linha ---- */
.attr-chips { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.attr-chip {
  display: flex; justify-content: space-between; align-items: baseline;
  background: #eef2ee; border: 1px solid #d6ddd6; border-radius: 6px;
  padding: 4px 10px; font-size: 0.9rem;
}
.attr-chip strong { font-size: 1rem; }
.hp-form { margin: 6px 0; }
.hp-form input[type="number"] { width: 80px; }
.weapon-summary { margin: 6px 0; }
.weapon-list { list-style: none; margin: 2px 0 0; padding: 0; }
.weapon-list li { font-size: 0.88rem; padding: 2px 0; }

/* ---- Tela inicial do jogador em blocos ---- */
.player-home { display: flex; flex-direction: column; gap: 14px; }
.sheet-block {
  background: #fbfbf9;
  border: 1px solid #e2ded3;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.block-title {
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid #e2ded3;
  font-size: 1.05rem;
  color: #01474b;
}
.identity-block .char-name { margin: 0; font-size: 1.5rem; }

.combat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 10px;
}
.combat-stat {
  background: #eef2ee;
  border: 1px solid #d6ddd6;
  border-radius: 10px;
  padding: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.combat-stat.big { background: #d8efe0; border-color: #a6d9bb; }
.cs-label { font-size: 0.72rem; text-transform: uppercase; color: #6b675d; letter-spacing: 0.04em; }
.cs-value { font-size: 1.5rem; font-weight: 700; color: #28251d; }
.cs-sub { font-size: 0.9rem; font-weight: 400; color: #6b675d; }
.cs-temp { font-size: 0.72rem; color: #0d5c37; }

.attr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 10px;
}
.attr-box {
  background: #fff;
  border: 1px solid #d6ddd6;
  border-radius: 10px;
  padding: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.attr-name { font-size: 0.75rem; font-weight: 700; color: #01474b; letter-spacing: 0.05em; }
.attr-mod { font-size: 1.4rem; font-weight: 700; }
.attr-score { font-size: 0.8rem; color: #6b675d; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } }

/* ---- Bestiário do mestre ---- */
.bestiary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.bestiary-card {
  border: 1px solid var(--border, #333);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface, #201f1b);
}
.bestiary-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bestiary-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.bestiary-stats { font-size: 0.85rem; opacity: 0.85; margin-left: auto; }
.bestiary-attacks { font-size: 0.88rem; margin: 6px 0 2px; }
.bestiary-actions { display: flex; gap: 6px; margin-top: 8px; }
.bestiary-actions form { flex: 1 1 auto; }
.bestiary-actions button { width: 100%; padding: 6px 8px; }

/* ---- Espaços de magia (spell slots) ---- */
.slots-panel {
  border: 1px solid var(--border, #333);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 12px 0;
  background: var(--surface, #201f1b);
}
.slot-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.slot-level {
  border: 1px solid var(--border, #333);
  border-radius: 8px;
  padding: 8px 10px;
}
.slot-level.pact { margin-top: 10px; border-color: #7c3aed; }
.slot-level-head { display: flex; justify-content: space-between; align-items: baseline; }
.slot-pips { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.slot-pip {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--accent, #01696f);
  background: transparent;
}
.slot-pip.spent { background: var(--accent, #01696f); opacity: 0.45; }
.slot-pip.pact { border-color: #7c3aed; }
.slot-pip.pact.spent { background: #7c3aed; }
.slot-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.slot-actions form { display: inline-flex; gap: 4px; }
.slot-actions button { padding: 4px 10px; border-radius: 6px; border: none; cursor: pointer;
  background: var(--accent, #01696f); color: #fff; font-weight: 600; }
.slot-actions button[disabled] { opacity: 0.4; cursor: not-allowed; }
.slot-override input { width: 4.5em; padding: 3px 5px; }

.soft-divider { border: none; border-top: 1px solid var(--border, #333); margin: 10px 0; opacity: 0.6; }

/* ---- Anotações privadas do jogador ---- */
.notes-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.note-card .note-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.note-date { font-size: 0.78rem; }
.note-body { white-space: pre-wrap; margin: 6px 0; }
.note-card details { margin: 6px 0; }

/* ---- Chat efêmero (mapa) ---- */
.chat-widget {
  position: fixed;
  bottom: 12px; right: 12px;
  width: 300px; max-width: 90vw;
  background: rgba(12, 11, 9, 0.92);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  color: #f2efe6;
  z-index: 20;
  overflow: hidden;
}
.chat-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; cursor: pointer; font-weight: 700;
  background: rgba(255,255,255,0.06);
}
.chat-badge { color: #fbbf24; font-size: 1.4rem; line-height: 0; }
.chat-body { display: flex; flex-direction: column; }
.chat-log {
  list-style: none; margin: 0; padding: 8px;
  max-height: 240px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 5px;
}
.chat-msg { font-size: 0.85rem; line-height: 1.25; }
.chat-msg .chat-from { font-weight: 700; margin-right: 5px; }
.chat-msg.whisper { color: #c4b5fd; }
.chat-msg.whisper .chat-from { color: #a78bfa; }
.chat-msg.system { color: #fca5a5; font-style: italic; }
.chat-form { display: flex; gap: 4px; padding: 8px; border-top: 1px solid rgba(255,255,255,0.1); flex-wrap: wrap; }
.chat-target { flex: 1 1 100%; padding: 5px; border-radius: 6px; border: 1px solid #444; background: #14130f; color: #e8e6df; }
.chat-form input { flex: 1 1 auto; padding: 6px; border-radius: 6px; border: 1px solid #444; background: #14130f; color: #e8e6df; }
.chat-form button { padding: 6px 12px; border-radius: 6px; border: none; background: var(--accent, #01696f); color: #fff; font-weight: 600; cursor: pointer; }

/* ---- Foto do personagem (ficha) ---- */
.avatar-block .avatar-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.avatar-preview {
  width: 96px; height: 96px; border-radius: 10px; overflow: hidden;
  border: 2px solid var(--accent, #01696f);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface, #201f1b); flex: 0 0 auto;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-placeholder { font-size: 0.8rem; opacity: 0.6; }

/* ---- Referência do mestre (catálogo, loja, compêndio) ---- */
.ref-filter {
  width: 100%; max-width: 360px; padding: 7px 10px; margin: 8px 0;
  border-radius: 6px; border: 1px solid var(--border, #444);
  background: var(--surface, #14130f); color: var(--text, #e8e6df);
}
.ref-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ref-table th, .ref-table td {
  text-align: left; padding: 6px 8px;
  border-bottom: 1px solid var(--border, #333);
  vertical-align: top;
}
.ref-table th { font-weight: 700; opacity: 0.85; }
.ref-table tbody tr:hover { background: rgba(127,127,127,0.08); }
.ref-attack { font-size: 0.82rem; }
.ref-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.ref-table form { margin: 0; }
.ref-table button { padding: 4px 10px; border-radius: 6px; border: none; cursor: pointer;
  background: var(--accent, #01696f); color: #fff; font-weight: 600; white-space: nowrap; }
.shop-price { font-weight: 700; color: var(--accent, #01696f); white-space: nowrap; }
.shop-cat h3 { margin-bottom: 4px; }

.ref-def-list { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ref-def-list li { line-height: 1.35; }
.damage-list { columns: 2; column-gap: 24px; }
@media (max-width: 640px) { .damage-list { columns: 1; } }

.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.lang-group ul { margin: 4px 0 0; padding-left: 18px; }
.lang-group li { line-height: 1.3; }

/* ---- Nomes por raça ---- */
.names-card h3 { margin-bottom: 6px; }
.names-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.names-col strong { display: block; margin-bottom: 2px; color: var(--accent, #01696f); }
.names-col p { margin: 0; line-height: 1.4; font-size: 0.9rem; }

/* ---- Aba de chat dedicada ---- */
.chat-page { max-width: 760px; }
.chat-page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chat-page-head h1 { margin-right: auto; }
.chat-log-full {
  border: 1px solid var(--border, #333); border-radius: 10px;
  background: var(--surface, #201f1b);
  height: 55vh; min-height: 260px; overflow-y: auto;
  padding: 12px; margin: 12px 0;
  display: flex; flex-direction: column; gap: 8px;
}
.chat-row { display: flex; flex-direction: column; max-width: 85%; }
.chat-row.mine { align-self: flex-end; align-items: flex-end; }
.chat-meta { font-size: 0.72rem; opacity: 0.7; margin-bottom: 2px; }
.chat-bubble {
  background: rgba(127,127,127,0.15); border-radius: 10px;
  padding: 7px 11px; line-height: 1.35; white-space: pre-wrap; word-break: break-word;
}
.chat-row.mine .chat-bubble { background: var(--accent, #01696f); color: #fff; }
.chat-row.whisper .chat-bubble { border: 1px dashed #a78bfa; }
.chat-row.whisper .chat-meta { color: #a78bfa; }
.chat-row.system .chat-bubble { background: transparent; color: #fca5a5; font-style: italic; }
.chat-form-full { display: flex; gap: 8px; flex-wrap: wrap; }
.chat-form-full .chat-target { flex: 0 0 auto; padding: 8px; border-radius: 8px;
  border: 1px solid var(--border, #444); background: var(--surface, #14130f); color: var(--text, #e8e6df); }
.chat-form-full input { flex: 1 1 auto; min-width: 160px; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border, #444); background: var(--surface, #14130f); color: var(--text, #e8e6df); }
.chat-form-full button { padding: 9px 18px; border-radius: 8px; border: none;
  background: var(--accent, #01696f); color: #fff; font-weight: 600; cursor: pointer; }
.chat-clear-form { margin-top: 10px; }

/* ---- Modo movimento do jogador: mapa VISÍVEL + controles nos cantos ---- */
.player-move-mode .map-layout { padding: 0; }
.player-move-mode .map-stage { border-radius: 0; height: calc(100vh - 56px); align-items: center; }
.player-move-mode #map-svg { height: 100%; width: auto; max-width: 100%; max-height: 100%; margin: 0 auto; }
/* Botões de visualização do jogador (canto inferior esquerdo). */
.player-view-controls {
  position: fixed;
  bottom: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 50;
}
.player-view-controls button {
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  background: #01696f;
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.player-view-controls button:active { background: #014f54; }
/* Botão "Seguir meu personagem" enquanto o modo está ativo. */
.player-view-controls button.active { background: #b45309; }
.move-panel {
  max-width: 460px; margin: 24px auto; padding: 20px;
  text-align: center;
  border: 1px solid var(--border, #333); border-radius: 12px;
  background: var(--surface, #201f1b);
}
/* Dentro do painel de movimento dedicado, o D-pad é centralizado no fluxo
   (não fixo no canto). Mantém a mesma grade em cruz. */
.move-panel .edge-arrows,
.move-panel .arrow-pad {
  position: static;
  left: auto; right: auto; bottom: auto; top: auto;
  transform: none;
  margin: 18px auto 6px;
  justify-content: center;
}
.move-hint { min-height: 1.2em; margin-top: 8px; }

/* HUD de recursos do jogador (recursos-no-mapa): painel recolhível no canto
   superior esquerdo com espaços de magia, consumíveis e Pontos de Foco. Só
   aparece na tela de movimento do próprio jogador. */
.resource-hud {
  position: fixed;
  top: 64px; left: 12px;
  z-index: 55;
  width: 220px;
  background: rgba(17, 24, 28, 0.92);
  border: 1px solid #1f7a80;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  color: #e6f2f3;
  font-size: 13px;
  overflow: hidden;
}
.resource-hud-toggle {
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: #0b6a6f;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.resource-hud-toggle:active { background: #014f54; }
.resource-hud-body { padding: 8px 10px; max-height: 60vh; overflow-y: auto; }
.hud-section { margin-bottom: 10px; }
.hud-section:last-child { margin-bottom: 0; }
.hud-section h4 {
  margin: 0 0 4px; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.03em; color: #8fd3d7;
}
.hud-row {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 0;
}
.hud-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-count { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: #cbe9eb; }
.hud-btn {
  flex: 0 0 auto;
  min-width: 26px; padding: 2px 8px;
  border: 1px solid #1f7a80; border-radius: 6px;
  background: #0d3a3d; color: #e6f2f3; cursor: pointer;
}
.hud-btn:hover { background: #12595e; }
.hud-btn:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 768px) {
  .resource-hud { width: 180px; top: 56px; left: 8px; font-size: 12px; }
}

/* ---- Alças de redimensionamento de formas ---- */
.shape-handle { pointer-events: all; }
.shape-handle:hover { fill-opacity: 1; }

/* ---- Ataques / golpes do jogador ---- */
.attack-form label { display: block; margin: 8px 0; font-size: 0.9rem; }
.attack-form input, .attack-form select, .attack-form textarea {
  width: 100%; padding: 7px 9px; border-radius: 6px;
  border: 1px solid var(--border, #444);
  background: var(--surface, #14130f); color: var(--text, #e8e6df);
}
.attack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.attacks-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.attack-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.attack-summary { display: flex; gap: 6px; flex-wrap: wrap; }
.attack-chip {
  font-size: 0.8rem; padding: 2px 8px; border-radius: 12px;
  background: rgba(127,127,127,0.18);
}
.attack-chip.dmg { background: var(--accent, #01696f); color: #fff; font-weight: 600; }
.attack-meta { font-size: 0.84rem; margin: 6px 0; }
.attack-notes { white-space: pre-wrap; margin: 6px 0; }
.attack-card details { margin: 6px 0; }

/* ---- Personagens criados (NPCs do mestre) ---- */
.npc-list { display: flex; flex-direction: column; gap: 10px; }
.npc-card {
  border: 1px solid var(--border, #333); border-radius: 8px;
  padding: 10px 12px; background: var(--surface, #201f1b);
}
.npc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.npc-field { margin: 5px 0; line-height: 1.4; }
.npc-interactions { white-space: pre-wrap; }
.npc-card details { margin: 6px 0; }

/* ---- Itens consumíveis (inventário do jogador) ---- */
.item-summary-consumable {
  font-size: 0.7rem; text-transform: uppercase; font-weight: 700;
  background: #e3f0e0; color: #2f6b2a; border: 1px solid #b9dab3;
  border-radius: 999px; padding: 1px 8px;
}
.consumable-label { display: block; margin: 8px 0; }
.use-inline { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.use-inline .use-amount { width: 3.2em; padding: 2px 4px; }
.use-inline .use-btn {
  padding: 2px 10px; border: none; border-radius: 6px;
  background: #2f6b2a; color: #f9f8f4; font-weight: 700; cursor: pointer; font-size: 0.8rem;
}
.use-inline .use-btn:hover { background: #245321; }

/* ---- História da campanha (aba do mestre) ---- */
.story-fieldset { border: 1px solid #d6ddd6; border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.story-fieldset legend { font-weight: 700; padding: 0 6px; }
.story-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.story-row select, .story-row input { flex: 1 1 auto; min-width: 8em; }
.story-row .story-rm { flex: 0 0 auto; width: auto; padding: 2px 10px; }
.story-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.story-entry { border: 1px solid #e2ded3; border-radius: 10px; padding: 12px 14px; background: #fbfbf9; }
.story-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.story-body { margin: 6px 0; white-space: pre-wrap; }
.story-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.story-chip { font-size: 0.75rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; background: #eef2ee; color: #2f6b2a; border: 1px solid #cfe0cf; }
.story-chip-npc { background: #e3e0f7; color: #3b2f8a; border-color: #c7c0ec; }
.story-chip-lugar_mundo, .story-chip-vila, .story-chip-cena { background: #dfeef5; color: #1c5b74; border-color: #b9dae6; }
.story-chip-inimigo { background: #fde2e1; color: #8a1c14; border-color: #f3b9b3; }
.story-chip-personagem { background: #d8efe0; color: #0d5c37; border-color: #a6d9bb; }
.story-chip-log { background: #fff6e0; color: #8a5a00; border-color: #f0d79a; }
.story-changes { list-style: none; margin: 6px 0; padding-left: 10px; display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }

/* Multiclasse na ficha (spec multiclasse-ficha): linhas de classe+subclasse+nível
   com botões de adicionar/remover. Layout enxuto que se adapta ao mobile. */
.multiclass-block { margin: 8px 0; }
.multiclass-block > label { font-weight: 600; }
#class-rows { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.class-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(100px, 1fr) 90px auto;
  gap: 6px;
  align-items: center;
}
.class-row .class-name,
.class-row .class-sub,
.class-row .class-level { width: 100%; }
.class-row .class-remove {
  padding: 4px 10px;
  border: 1px solid #a33; border-radius: 6px;
  background: #3a1414; color: #f0d0d0; cursor: pointer;
}
.class-row .class-remove:disabled { opacity: 0.4; cursor: default; }
#add-class {
  padding: 6px 12px; border-radius: 6px; border: 1px solid #1f7a80;
  background: #0d3a3d; color: #e6f2f3; cursor: pointer;
}
@media (max-width: 600px) {
  .class-row { grid-template-columns: 1fr 1fr; }
  .class-row .class-remove { grid-column: 2; justify-self: end; }
}

/* =====================================================================
   PADRONIZAÇÃO GLOBAL (camada de normalização)
   ---------------------------------------------------------------------
   Este bloco fica por ÚLTIMO de propósito: no CSS, quando a
   especificidade empata, a última regra vence. Aqui reconciliamos as
   cores fixas (hardcoded) espalhadas pelo arquivo com as variáveis de
   tema (themes.css), unificamos os contêineres de página e reorganizamos
   os controles fixos da tela do mapa. Assim padronizamos sem reescrever
   as centenas de regras acima (menos risco de regressão de layout).

   Variáveis de tema usadas: --accent, --accent-dark, --accent-soft,
   --accent-text, --bg, --surface, --surface-2, --text, --muted, --border.
   Além delas, definimos abaixo tokens semânticos derivados para estados
   (sucesso, perigo, aviso) que antes eram cores fixas.
   ===================================================================== */

:root {
  /* Tokens semânticos (claros por padrão; ajustados p/ temas escuros abaixo). */
  --danger: #8a1c14;
  --danger-bg: #fdecea;
  --danger-border: #f3b9b3;
  --success: #0d5c37;
  --success-bg: #d8efe0;
  --success-border: #a6d9bb;
  --warning: #8a5a00;
  --warning-bg: #fff6e0;
  --warning-border: #f0d79a;
  --info: #1c5b74;
  --info-bg: #dfeef5;
  --info-border: #b9dae6;
  --violet: #3b2f8a;
  --violet-bg: #e3e0f7;
  --violet-border: #c7c0ec;

  /* Superfícies do MAPA (sempre escuras por natureza, independentes do tema
     da página, para manter o tabuleiro legível). */
  --map-bg: #14130f;
  --map-surface: #201f1b;
  --map-surface-2: #2a2925;
  --map-stage: #0c0b09;
  --map-panel: #1c1b19;
  --map-text: #e8e6df;
  --map-border: #3a3834;
  --map-overlay: rgba(12, 11, 9, 0.9);

  /* Alturas de referência para posicionar controles fixos. */
  --map-header-h: 56px;
}

/* Nos temas escuros, os "banners" de estado ficam com fundo translúcido do
   próprio accent/estado para não estourar contraste com texto claro. */
html[data-theme="noturno"],
html[data-theme="carvao"],
html[data-theme="vinho"],
html[data-theme="floresta"],
html[data-theme="ametista"] {
  --danger-bg: color-mix(in srgb, #ef4444 22%, var(--surface));
  --danger: #fca5a5;
  --danger-border: color-mix(in srgb, #ef4444 40%, var(--surface));
  --success-bg: color-mix(in srgb, #22c55e 20%, var(--surface));
  --success: #86efac;
  --success-border: color-mix(in srgb, #22c55e 38%, var(--surface));
  --warning-bg: color-mix(in srgb, #f59e0b 20%, var(--surface));
  --warning: #fcd34d;
  --warning-border: color-mix(in srgb, #f59e0b 38%, var(--surface));
  --info-bg: color-mix(in srgb, #38bdf8 20%, var(--surface));
  --info: #bae6fd;
  --info-border: color-mix(in srgb, #38bdf8 38%, var(--surface));
  --violet-bg: color-mix(in srgb, #a78bfa 22%, var(--surface));
  --violet: #ddd6fe;
  --violet-border: color-mix(in srgb, #a78bfa 40%, var(--surface));
}

/* ---------- 1. Tipografia e base ---------- */
body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

/* ---------- 2. Contêineres de página unificados ----------
   Antes: .page-content (max 900), .money-page (max 640), .container (960).
   Agora todos compartilham a mesma caixa central responsiva. Mantemos os
   nomes de classe (não precisa mexer nos templates), só igualamos o visual. */
.page-content,
.money-page,
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 16px 48px;
  width: 100%;
}
.page-content.narrow { max-width: 420px; }
/* dinheiro/log usavam money-page estreito; padronizamos com o restante. */

/* Cartões: uma única identidade visual (fundo, borda, sombra, raio). */
.card,
.sheet-block,
.vault-card,
.log-item,
.story-entry,
details.inventory-entry,
.page form:not(.inline-form):not(.stacked-form):not(.player-nav),
.page .inventory-entry {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* Headings padronizados por variável (fora e dentro de .page). */
.page h1, .page-content h1 { color: var(--accent-dark); }
.page h2, .page h3 { color: var(--text); }

/* Links e texto auxiliar. */
.page a, details summary, .details summary { color: var(--accent); }
.muted, .page .muted, .vault-card small,
.log-time, .log-author, .note-date { color: var(--muted); }

/* ---------- 3. Botões: uma identidade, variantes por token ---------- */
.btn,
.page button, .page .btn,
.inline-form button,
.ctx-buttons button,
.chest-add-form button,
.chest-image-actions button,
.chest-items .chest-item button {
  background: var(--accent);
  color: var(--accent-text);
  border: none;
}
.btn:hover,
.page button:hover, .page .btn:hover,
.inline-form button:hover { background: var(--accent-dark); }

/* Variante de perigo unificada (era #8a1c14 repetido em vários lugares). */
.btn-danger,
.page .btn-danger,
button.btn-danger,
.ctx-buttons button.btn-danger,
.chest-items .chest-item button.btn-danger,
.chest-image-actions button.btn-danger {
  background: var(--danger);
  color: #fff;
}
#ctx-close { background: var(--map-border); color: var(--map-text); }
.btn-disabled,
.page .btn-disabled { background: var(--surface-2); color: var(--muted); }

/* ---------- 4. Campos de formulário (páginas claras) ---------- */
.page input, .page select, .page textarea,
.inline-form input, .inline-form select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.page input:focus, .page select:focus, .page textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ---------- 5. Banners de estado (sucesso/erro/aviso) ---------- */
.error {
  background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border);
}
.success-banner {
  background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border);
}

/* ---------- 6. Chips e badges por token ---------- */
.log-badge { background: var(--surface-2); color: var(--text); }
.log-money .log-badge { background: var(--success-bg); color: var(--success); }
.log-level .log-badge { background: var(--violet-bg); color: var(--violet); }
.log-dice .log-badge { background: var(--info-bg); color: var(--info); }
.balances li, .balances li strong { color: #111 !important; }  /* chip claro fixo, texto escuro */

.stat-chip, .attr-chip, .spell-entry .spell-tag {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
}
.stat-chip.chip-warn { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }

.item-summary-consumable { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.item-summary-focus { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
.item-summary-stored { background: var(--surface-2); color: var(--muted); }
.kind-arma { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); }
.kind-vest { background: var(--violet-bg); color: var(--violet); border: 1px solid var(--violet-border); }

/* Story chips por categoria. */
.story-chip { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.story-chip-npc { background: var(--violet-bg); color: var(--violet); border-color: var(--violet-border); }
.story-chip-lugar_mundo, .story-chip-vila, .story-chip-cena { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }
.story-chip-inimigo { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.story-chip-personagem { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.story-chip-log { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.story-fieldset, .story-entry { border-color: var(--border); }
.story-entry { background: var(--surface); }

/* Magias: cabeçalho de nível e selo de custo. */
.spell-level-group h4 { background: var(--accent-soft); border-left: 4px solid var(--accent); color: var(--accent-dark); }
.spell-cost { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }

/* Multiclasse: linha de classe usa tokens de tema. */
.class-row .class-remove { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); }
#add-class { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }

/* Perícias/histórico. */
.prof-list li { color: color-mix(in srgb, var(--accent) 55%, var(--text)); }
.day-entry { background: var(--surface-2); border-left: 4px solid var(--border); }
.day-entry.current { border-left-color: var(--accent); background: var(--accent-soft); }
.day-money .given { color: var(--success); }
.day-money .taken { color: var(--danger); }
.day-notes li span { color: var(--muted); }

/* Combate/atributos: superfícies por tema. */
.combat-stat { background: var(--surface-2); border: 1px solid var(--border); }
.combat-stat.big { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.cs-value { color: var(--text); }
.cs-label, .cs-sub, .attr-score { color: var(--muted); }
.cs-temp { color: var(--success); }
.attr-box { background: var(--surface); border: 1px solid var(--border); }
.attr-name, .block-title, .identity-block .char-name { color: var(--accent-dark); }
.block-title { border-bottom: 2px solid var(--border); }
.player-face { background: var(--surface-2); }

/* Diálogos e popovers de mapa-múndi seguem o tema da página (são claros). */
.wm-popover, .wm-dialog { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.wm-popover-close { color: var(--muted); }
.worldmap-thumb img { border: 1px solid var(--border); }

/* ---------- 7. Sidebar do mestre e nav do jogador ---------- */
.nav-item { background: color-mix(in srgb, var(--accent-dark) 72%, #000); color: var(--accent-text); }
.nav-item:hover { background: color-mix(in srgb, var(--accent-dark) 52%, #000); }

/* =====================================================================
   MAPA — superfícies coerentes (o tabuleiro permanece escuro em qualquer
   tema, mas centralizado nas variáveis --map-*). Botões e destaques usam
   o accent do tema para manter identidade.
   ===================================================================== */
.map-body { background: var(--map-bg); color: var(--map-text); }
.map-header { background: var(--map-panel); }
.map-stage { background: var(--map-stage); }
#map-svg { background: #1a1915; }
.map-controls { background: var(--map-surface); }
.control-block { border-top: 1px solid var(--map-border); }
.control-block input, .control-block select { background: var(--map-bg); color: var(--map-text); border: 1px solid var(--map-border); }
.control-block button { background: var(--accent); color: var(--accent-text); }
.control-block button.btn-danger { background: var(--danger); }
.ctx-dialog { background: var(--map-surface); color: var(--map-text); }
.chest-panel { border-top: 1px solid var(--map-border); }
.chest-items .chest-item { background: var(--map-surface-2); }
.chest-add-form input { background: var(--map-surface-2); color: var(--map-text); border: 1px solid var(--map-border); }
.object-preset { background: var(--map-bg); border: 1px solid var(--map-border); }
.ctx-buttons button, .chest-items .chest-item button, .chest-add-form button, .chest-image-actions button { background: var(--accent); color: var(--accent-text); }
.ctx-buttons button.btn-danger, .chest-items .chest-item button.btn-danger, .chest-image-actions button.btn-danger { background: var(--danger); }

/* =====================================================================
   CONTROLES FIXOS DA TELA DO MAPA — reorganização (mobile-first)
   ---------------------------------------------------------------------
   Objetivo: cada controle num canto próprio, sem colidir entre si nem
   cobrir o miolo do mapa, respeitando a "safe area" do celular (notch/
   barra de gestos). Layout de cantos:
     - topo-esquerda:  HUD de recursos (#resource-hud)
     - topo-direita:   ordem de turno (.turn-overlay) — já é absolute no stage
     - baixo-esquerda: botões de visão (#player-view-controls)
     - baixo-direita:  D-pad (#arrow-pad) — dedo do polegar
   O header "Voltar" fica fixo no topo, discreto, e o stage começa abaixo.
   ===================================================================== */

/* Header do mapa fixo no topo (para o botão "Voltar" ficar sempre acessível
   sem rolar), com respeito à safe-area superior. */
.player-move-mode .map-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  padding-top: calc(6px + env(safe-area-inset-top, 0px));
  padding-left: calc(16px + env(safe-area-inset-left, 0px));
  min-height: var(--map-header-h);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
/* O stage começa abaixo do header fixo. */
.player-move-mode .map-stage {
  height: calc(100vh - var(--map-header-h));
  margin-top: var(--map-header-h);
}

/* HUD de recursos (consumíveis/magia/foco): topo-esquerda, abaixo do header,
   com safe-area à esquerda. Some no fluxo do resto. */
.player-move-mode .resource-hud {
  top: calc(var(--map-header-h) + 8px + env(safe-area-inset-top, 0px));
  left: calc(10px + env(safe-area-inset-left, 0px));
  z-index: 58;
}

/* Botões "Seguir meu personagem" / "Mapa inteiro": canto inferior ESQUERDO,
   respeitando a safe-area inferior/esquerda. */
.player-move-mode .player-view-controls {
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: calc(16px + env(safe-area-inset-left, 0px));
  z-index: 56;
  align-items: flex-start;
}
.player-view-controls button {
  background: var(--accent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.player-view-controls button.active { background: var(--accent-dark); }

/* D-pad: canto inferior DIREITO em TODAS as larguras (não só no mobile),
   ao alcance do polegar e longe dos botões de visão. Safe-area à direita. */
.player-move-mode .edge-arrows,
.player-move-mode #arrow-pad {
  top: auto;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  left: auto;
  transform: none;
  z-index: 62;
}
.edge-arrow { background: color-mix(in srgb, var(--accent) 88%, transparent); }
.edge-arrow:active { background: var(--accent-dark); }

/* move-hint: centralizado no rodapé, sem cobrir os cantos, discreto. */
.player-move-mode .move-hint {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  margin: 0;
  max-width: 60vw;
  text-align: center;
  padding: 4px 10px;
  background: var(--map-overlay);
  color: var(--map-text);
  border-radius: 999px;
  font-size: 0.8rem;
  z-index: 54;
  pointer-events: none;
}
.player-move-mode .move-hint:empty { display: none; }

/* Chat do mapa: sobe um pouco no jogador para não colidir com o D-pad no
   canto inferior direito (o D-pad tem z maior; aqui damos folga vertical). */
.player-move-mode .chat-widget {
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
}

/* No celular, os controles ficam um pouco menores e as faixas de folga
   maiores, mantendo o miolo do mapa livre. */
@media (max-width: 768px) {
  .player-move-mode .resource-hud { width: 168px; font-size: 12px; }
  .player-move-mode .player-view-controls button { padding: 8px 12px; font-size: 0.9rem; }
  .player-move-mode .move-hint { max-width: 78vw; }
  /* O chat vira um alvo compacto acima do D-pad para não sobrepor as setas. */
  .player-move-mode .chat-widget { width: min(260px, 78vw); bottom: calc(180px + env(safe-area-inset-bottom, 0px)); }
}

/* Telas muito baixas em paisagem (celular deitado): D-pad e visão encolhem. */
@media (max-height: 480px) {
  .player-move-mode .edge-arrows { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); }
  .player-move-mode .resource-hud { max-height: 46vh; }
  .player-move-mode .resource-hud-body { max-height: 34vh; }
}

/* ---------- Cabeçalho de página (substitui o uso do .map-header escuro em
   páginas claras do mestre: história, biblioteca, banco de mapas). Row com
   título + ações, alinhado ao tema. ---------- */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  max-width: 900px;
  margin: 0 auto;
  padding: 16px 16px 0;
}
.page-header h1 { margin: 0; margin-right: auto; color: var(--accent-dark); font-size: 1.4rem; }
.page-header .muted { flex: 1 1 100%; margin: 0; }

/* ---------- Barra de navegação do jogador: aba ativa + rolagem horizontal ----------
   Agora a barra aparece em todas as páginas do jogador (via include
   _player_nav.html), então destacamos a aba atual e garantimos que ela role
   horizontalmente no celular em vez de quebrar em muitas linhas. */
.player-nav {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.player-nav a { white-space: nowrap; flex: 0 0 auto; }
.player-nav a.active {
  background: color-mix(in srgb, #fff 20%, transparent);
  font-weight: 700;
}
.player-nav .brand { flex: 0 0 auto; }
/* No celular a barra continua rolável e não centraliza (para não esconder abas). */
@media (max-width: 600px) {
  .player-nav { justify-content: flex-start; }
  .player-nav .brand { margin-right: 8px; width: auto; text-align: left; }
}

/* =====================================================================
   Toasts (feedback rápido) — usados no mapa (dados, ações do HUD, erros).
   ===================================================================== */
.toast-area {
  position: fixed;
  top: calc(var(--map-header-h) + 8px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  pointer-events: none;
  max-width: 92vw;
}
.toast {
  background: var(--map-overlay);
  color: var(--map-text);
  border: 1px solid var(--map-border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.9rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.2s;
  max-width: 92vw;
  text-align: center;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-dice { border-color: var(--accent); }
.toast-secret { border-color: #a78bfa; color: #ddd6fe; }
.toast-error { border-color: var(--danger); color: #fecaca; }

/* =====================================================================
   Widget de rolagem de dados (mapa: jogador e mestre). Botão recolhível no
   lado direito, abaixo do header; expande um painel com dados e opções.
   ===================================================================== */
.dice-widget {
  position: fixed;
  top: calc(var(--map-header-h) + 8px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  z-index: 58;
  width: 220px;
  max-width: 80vw;
}
.dice-toggle {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--map-border);
  border-radius: 10px;
  background: var(--map-overlay);
  color: var(--map-text);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.dice-panel {
  margin-top: 6px;
  background: var(--map-overlay);
  border: 1px solid var(--map-border);
  border-radius: 10px;
  padding: 10px;
  color: var(--map-text);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}
.dice-quick { display: flex; flex-wrap: wrap; gap: 5px; }
.dice-die {
  flex: 1 1 auto; min-width: 42px;
  padding: 7px 6px; border: 1px solid var(--map-border); border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 80%, transparent);
  color: #fff; font-weight: 600; cursor: pointer;
}
.dice-die:active { background: var(--accent-dark); }
.dice-custom { display: flex; gap: 6px; margin: 8px 0; }
.dice-custom input {
  flex: 1 1 auto; min-width: 0; padding: 7px 8px;
  border: 1px solid var(--map-border); border-radius: 8px;
  background: var(--map-bg); color: var(--map-text);
}
.dice-custom button {
  flex: 0 0 auto; padding: 7px 12px; border: none; border-radius: 8px;
  background: var(--accent); color: var(--accent-text); font-weight: 600; cursor: pointer;
}
.dice-opts { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 0.8rem; margin-bottom: 6px; }
.dice-opts label { display: inline-flex; align-items: center; gap: 3px; }
.dice-secret { display: flex; align-items: center; gap: 5px; font-size: 0.8rem; margin-bottom: 6px; }
.dice-checks { margin: 8px 0 4px; border-top: 1px solid var(--map-border); padding-top: 8px; }
.dice-check-row { display: flex; gap: 6px; }
.dice-check-row select {
  flex: 1 1 auto; min-width: 0; padding: 6px 8px;
  border: 1px solid var(--map-border); border-radius: 8px;
  background: var(--map-bg); color: var(--map-text);
}
.dice-check-row button {
  flex: 0 0 auto; padding: 6px 12px; border: none; border-radius: 8px;
  background: var(--accent); color: var(--accent-text); font-weight: 600; cursor: pointer;
}
.dice-check-hint { font-size: 0.72rem; margin: 4px 0 0; }
.dice-feed { list-style: none; margin: 6px 0 0; padding: 0; max-height: 30vh; overflow-y: auto; font-size: 0.82rem; }
.dice-feed-item { padding: 3px 0; border-top: 1px solid var(--map-border); }
.dice-feed-item.secret { opacity: 0.85; }
.dice-roller { font-weight: 700; color: var(--accent); }

/* No celular, o widget de dados fica mais estreito e não colide com o HUD
   (esquerda) nem com a ordem de turno; abre para baixo. */
@media (max-width: 768px) {
  .dice-widget { width: 168px; }
  .dice-feed { max-height: 22vh; }
}

/* =====================================================================
   Condições/status nos tokens (spec condicoes-tokens).
   ===================================================================== */
/* Ícones sobre o token no SVG (não capturam clique). */
.token-condition { pointer-events: none; user-select: none; }

/* Anel pulsante do token cujo turno está ativo (visível para todos e na TV). */
@keyframes token-turn-pulse {
  0%   { stroke-opacity: 1;   stroke-width: 0.10; }
  50%  { stroke-opacity: 0.35; stroke-width: 0.20; }
  100% { stroke-opacity: 1;   stroke-width: 0.10; }
}
.token-turn-ring {
  animation: token-turn-pulse 1.1s ease-in-out infinite;
  filter: drop-shadow(0 0 0.15px #fbbf24);
}
@media (prefers-reduced-motion: reduce) {
  .token-turn-ring { animation: none; stroke-opacity: 1; }
}

/* Painel de condições no diálogo de contexto (mestre). */
.ctx-conditions { margin-top: 12px; border-top: 1px solid var(--map-border); padding-top: 10px; }
.ctx-conditions h4 { margin: 0 0 8px; font-size: 0.95rem; }
.conditions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  max-height: 46vh;
  overflow-y: auto;
}
.condition-chip {
  padding: 6px 8px;
  border: 1px solid var(--map-border);
  border-radius: 8px;
  background: var(--map-bg);
  color: var(--map-text);
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
}
.condition-chip.active {
  background: color-mix(in srgb, var(--accent) 75%, transparent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
@media (max-width: 480px) {
  .conditions-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   Quadro da Mesa (spec quadro-missoes): mural compartilhado de notas.
   ===================================================================== */
.board-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.board-card.pinned {
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
}
.board-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; align-items: baseline; }
.board-meta { font-size: 0.78rem; }
.board-body { white-space: pre-wrap; margin: 6px 0; }
.board-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 6px; }
.board-actions form { margin: 0; }
.board-pin-label { display: inline-flex; align-items: center; gap: 5px; font-size: 0.9rem; }

/* Missões ricas (spec quadro-missoes): status, recompensas, vínculos, imagens. */
.board-form-grid { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin: 6px 0; }
.board-form-grid label { display: flex; flex-direction: column; font-size: 0.85rem; gap: 2px; }
.board-fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.board-fieldset legend { font-weight: 600; padding: 0 6px; font-size: 0.9rem; }
.board-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.board-row select, .board-row input { flex: 1 1 8em; min-width: 8em; }
.board-row .board-rm { flex: 0 0 auto; width: auto; padding: 2px 10px; }

/* Missão ativa em destaque; inativa esmaecida (visão do mestre). */
.board-card.status-ativa { border-left: 4px solid var(--success); background: var(--success-bg); }
.board-card.status-inativa { opacity: 0.72; border-left: 4px dashed var(--border); }
.board-status-badge { font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.board-status-badge.ativa { background: var(--success); color: #fff; }
.board-status-badge.inativa { background: var(--surface-2); color: var(--muted); }
.board-status-form select { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }

/* Recompensas: chips coloridos por tipo. */
.board-rewards { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; font-size: 0.85rem; }
.reward-chip { font-weight: 600; border-radius: 999px; padding: 2px 10px; border: 1px solid var(--border); }
.reward-chip.gold { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.reward-chip.xp { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }
.reward-chip.item { background: var(--surface-2); color: var(--text); }

/* Entregar recompensa (mestre): lista de jogadores + botão. */
.reward-deliver { margin: 6px 0; }
.reward-deliver summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.reward-deliver-form { margin-top: 6px; }
.reward-players { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0; }
.reward-players label { display: inline-flex; align-items: center; gap: 5px; font-size: 0.9rem; }

/* Vínculos: reaproveita o visual dos story-chips. */
.board-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.board-chip { font-size: 0.75rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.board-chip-npc { background: var(--violet-bg); color: var(--violet); border-color: var(--violet-border); }
.board-chip-lugar_mundo, .board-chip-vila, .board-chip-cena { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }
.board-chip-inimigo { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.board-chip-personagem { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.board-chip-item { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }

/* Galeria de imagens da missão. */
.board-images { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.board-image { position: relative; width: 120px; height: 120px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.board-image img { width: 100%; height: 100%; object-fit: cover; }
.board-image-del { position: absolute; top: 2px; right: 2px; margin: 0; }
.board-image-del button { padding: 0 8px; line-height: 1.6; }

/* =====================================================================
   Busca global do mestre (spec busca-global).
   ===================================================================== */
.sidebar-search { margin-bottom: 12px; }
.sidebar-search input {
  width: 100%; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 0.9rem;
}
.search-form { display: flex; gap: 8px; margin: 8px 0 16px; }
.search-form input {
  flex: 1 1 auto; min-width: 0; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.search-form button {
  flex: 0 0 auto; padding: 10px 16px; border: none; border-radius: 8px;
  background: var(--accent); color: var(--accent-text); font-weight: 600; cursor: pointer;
}
.search-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.search-results li { padding: 4px 0; border-bottom: 1px solid var(--border); }

/* =====================================================================
   Dar item por arrastar-e-soltar (spec dar-item-arrastar).
   ===================================================================== */
.give-item-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.give-item-row input[type="text"] { flex: 1 1 200px; min-width: 0; }
.give-item-row input[type="number"] { width: 80px; }
.give-item-chip {
  flex: 0 0 auto;
  padding: 10px 16px; border-radius: 10px;
  background: var(--accent); color: var(--accent-text); font-weight: 600;
  cursor: grab; user-select: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.give-item-chip:active { cursor: grabbing; }
/* Card do jogador como alvo de soltar. */
.player-dropzone { transition: outline-color 0.15s, background-color 0.15s; outline: 2px solid transparent; }
.player-dropzone.drop-hover {
  outline: 2px dashed var(--accent);
  background: var(--accent-soft);
}
.player-dropzone.drop-ok { outline: 2px solid var(--success); }

/* =====================================================================
   Modo retrato: girar o mapa 90° no celular (spec mapa-retrato).
   ---------------------------------------------------------------------
   Quando o jogador ativa "Girar mapa", rotacionamos o SVG 90° para que a
   LARGURA do mapa aproveite a ALTURA da tela do celular em pé. O SVG é
   dimensionado pela altura do stage (que vira a largura visual após a rotação).
   Só afeta a tela de movimento do jogador; desktop/TV não mudam.
   ===================================================================== */
.player-move-mode.map-rotated .map-stage {
  /* Esconde overflow para a rotação não gerar barras estranhas. */
  overflow: hidden;
}
.player-move-mode.map-rotated #map-svg {
  transform: rotate(90deg);
  transform-origin: center center;
  /* Após girar 90°, a "largura" visual passa a ser a altura do stage e vice-versa.
     Dimensionamos pela altura do stage para o mapa preencher o eixo maior do
     celular em pé. */
  height: auto;
  width: calc(100vh - var(--map-header-h));
  max-width: none;
  max-height: 100vw;
}
/* O botão fica destacado quando a rotação está ativa. */
.player-view-controls button#rotate-map.active { background: var(--accent-dark); }

/* A rotação faz mais sentido no celular; em telas largas o botão continua
   disponível, mas o efeito é opcional. */

/* =====================================================================
   Seleção de Mesa (multi-mesa / spec multi-mesa).
   ===================================================================== */
.mesa-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mesa-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.mesa-item .mesa-name { font-weight: 600; }
.mesa-item form { margin: 0; }