/* ===== SCHLACHTKARTE ===== */

.battlemap-section-outer {
  margin-top: 1.5rem;
}

.battlemap-section {
  /* wrapper filled by JS per instance */
}

.bm-panel {
  margin-top: 0.5rem;
}

.bm-toolbar {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(160,112,48,0.2);
}

.bm-paint-toolbar {
  display: none;
  gap: 0.3rem;
  align-items: center;
  flex-wrap: wrap;
}

.bm-paint-btn { transition: background 0.15s, border-color 0.15s; }
.bm-paint-btn.active {
  border-color: var(--gold) !important;
  background: rgba(200,151,42,0.18) !important;
  color: var(--gold) !important;
}

.bm-tool-move.active,
.bm-tool-paint.active {
  border-color: var(--gold) !important;
  background: rgba(200,151,42,0.15) !important;
  color: var(--gold) !important;
}

.bm-wrapper {
  width: 100%;
  height: 480px;
  border: 1px solid rgba(160,112,48,0.35);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: transparent;
  cursor: default;
}

.bm-canvas {
  display: block;
  touch-action: none;
  user-select: none;
}

.bm-hint {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  color: var(--stone);
  margin-top: 0.35rem;
  letter-spacing: 0.04em;
}

.bm-collapse-btn {
  background: none;
  border: none;
  color: var(--stone);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0 0.2rem;
  line-height: 1;
}
.bm-collapse-btn:hover { color: var(--gold); }

/* ── Figuren-Panel ── */
.bm-figures-panel {
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(200,151,42,0.05);
  border: 1px solid rgba(200,151,42,0.25);
  border-radius: 5px;
}

.bm-figures-hint {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  color: var(--stone);
  letter-spacing: 0.04em;
  margin-bottom: 0.45rem;
}

.bm-figures-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.bm-fig-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid rgba(160,112,48,0.3);
  border-radius: 5px;
  background: rgba(255,255,255,0.05);
  cursor: pointer;
  min-width: 64px;
  max-width: 90px;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.bm-fig-card:hover {
  border-color: rgba(200,151,42,0.55);
  background: rgba(200,151,42,0.08);
}
.bm-fig-card.selected {
  border-color: var(--gold);
  background: rgba(200,151,42,0.15);
  box-shadow: 0 0 6px rgba(200,151,42,0.35);
}
.bm-fig-card.on-map::after {
  content: '📍';
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 0.6rem;
  line-height: 1;
}

.bm-fig-avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(160,112,48,0.4);
}
.bm-fig-avatar-emoji {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(160,112,48,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.bm-fig-name {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  color: var(--stone-light);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}
.bm-fig-card.selected .bm-fig-name { color: var(--gold); }

.bm-fig-pos {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  color: var(--stone);
}
.bm-fig-pos-off { opacity: 0.4; }

.bm-fig-remove {
  margin-top: 0.1rem;
  padding: 0 4px;
  font-size: 0.6rem;
  line-height: 1.4;
  border: 1px solid rgba(200,80,80,0.4);
  border-radius: 3px;
  background: rgba(200,80,80,0.08);
  color: #e07070;
  cursor: pointer;
}
.bm-fig-remove:hover {
  background: rgba(200,80,80,0.22);
  border-color: rgba(200,80,80,0.7);
}