/* Grid/Zoom/Pan/Popover-Mechanik kommt aus hive.css (bewusst geteilt, siehe
   kvkmap.html) — hier nur, was für KvK-Map spezifisch ist. */

.kvk-note-text {
  white-space: pre-wrap; font-family: 'Inter', monospace; font-size: .85rem;
  color: var(--text); margin: 0; min-height: 1.2em;
}

/* Roter Rahmen an der (früheren) Redzone-Grenze, 2 Zellen innerhalb des
   Grid-Rands -- der Pufferbereich davor ist ganz normal bebaubar, der Rahmen
   ist rein informativ. EINE durchgehende Fläche (Rahmenlinie + weicher
   Innenschatten) statt Verlauf pro Zelle, damit die Ecken nahtlos sind. */
.kvk-redzone-frame {
  border: 3px solid var(--crimson);
  box-shadow: inset 0 0 calc(var(--hive-cell, 18px) * 0.9) 0 color-mix(in srgb, var(--crimson) 45%, transparent);
  pointer-events: none;
}

/* Schloss-Fläche (12x12, liegt UNTER den 4 Türmen) -- selbst klickbar/färbbar. */
.kvk-castle-block {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); border: 2px solid var(--text-faint); border-radius: 4px;
  cursor: pointer;
}
/* 3x so groß wie ein normales Objekt-Label, aufrecht (siehe
   .obj-label-Gegenrotation unten -- .kvk-castle-block ist kein .hive-obj,
   deshalb greift Hives ".hive-obj .obj-label"-Regel hier NICHT, die
   Gegenrotation muss eigens definiert werden). Relativ zu --hive-cell (siehe
   hive.css), damit das Schloss-Emoji beim Zoomen mitwächst statt fest zu bleiben. */
.kvk-castle-block .obj-label { font-size: calc(var(--hive-cell, 18px) * 4.3333); }

/* Türme: eigene 2x2-Felder in den 4 Ecken des Schloss-Blocks, oben drauf
   gerendert. Eigens gezeichnetes Wehrturm-Symbol statt Emoji (Zinnen,
   Steinfarbe) + Himmelsrichtung als "Fuß" des Turms, beides aufrecht. */
.kvk-tower {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); border: 2px solid var(--text-faint); border-radius: 4px;
  cursor: pointer; z-index: 2;
}
.kvk-tower-stack { display: flex; flex-direction: column; align-items: center; gap: 1px; }
/* Relativ zu --hive-cell (siehe hive.css), damit Turm-Icon und -Label beim
   Zoomen mitwachsen statt fest zu bleiben. */
.kvk-tower-svg { width: calc(var(--hive-cell, 18px) * 0.8889); height: calc(var(--hive-cell, 18px) * 1.2222); }
.kvk-tower-label {
  font-size: calc(var(--hive-cell, 18px) * 0.3333); font-weight: 700; letter-spacing: .02em; color: var(--text-dim); white-space: nowrap;
}
/* Gegenrotation für Schloss-/Turm-Inhalt: Hives ".hive-obj .obj-label"-Regel
   greift nur innerhalb eines .hive-obj -- Schloss/Türme sind das bewusst
   nicht (nicht verschiebbar/löschbar), deshalb eigene Regel. */
.kvk-castle-block .obj-label, .kvk-tower-stack { transform: rotate(-45deg); }

/* Unfarbige Städte: eigener, farbstichfreier Grauton (--ash) statt des
   Modul-Akzents (--crimson) -- der sah der "Rot"-Markierungsfarbe zu ähnlich.
   Textfarbe bleibt --text (wie bei jeder anderen Kachel), nur Fläche/Rand ändern sich. */
.hive-obj.type-player { background: color-mix(in srgb, var(--ash) 55%, var(--surface-2)); border: 1px solid var(--ash); }

/* Gedeckte Markierungsfarben (Städte, Schloss, Türme) -- dieselben 5 Farben,
   je nach Objekt unterschiedlich stark eingefärbt. */
.hive-obj.type-player.zc-red    { background: color-mix(in srgb, var(--zone-red) 24%, transparent); border-color: var(--zone-red); }
.hive-obj.type-player.zc-blue   { background: color-mix(in srgb, var(--zone-blue) 24%, transparent); border-color: var(--zone-blue); }
.hive-obj.type-player.zc-green  { background: color-mix(in srgb, var(--zone-green) 24%, transparent); border-color: var(--zone-green); }
.hive-obj.type-player.zc-orange { background: color-mix(in srgb, var(--zone-orange) 24%, transparent); border-color: var(--zone-orange); }
.hive-obj.type-player.zc-purple { background: color-mix(in srgb, var(--zone-purple) 24%, transparent); border-color: var(--zone-purple); }

.kvk-castle-block.zc-red,    .kvk-tower.zc-red    { background: color-mix(in srgb, var(--zone-red) 40%, var(--surface-3)); border-color: var(--zone-red); }
.kvk-castle-block.zc-blue,   .kvk-tower.zc-blue   { background: color-mix(in srgb, var(--zone-blue) 40%, var(--surface-3)); border-color: var(--zone-blue); }
.kvk-castle-block.zc-green,  .kvk-tower.zc-green  { background: color-mix(in srgb, var(--zone-green) 40%, var(--surface-3)); border-color: var(--zone-green); }
.kvk-castle-block.zc-orange, .kvk-tower.zc-orange { background: color-mix(in srgb, var(--zone-orange) 40%, var(--surface-3)); border-color: var(--zone-orange); }
.kvk-castle-block.zc-purple, .kvk-tower.zc-purple { background: color-mix(in srgb, var(--zone-purple) 40%, var(--surface-3)); border-color: var(--zone-purple); }

/* Stadt-Beschriftung: 1-3 Zeilen (Name + optional Kampfgebiet-Begriff + optional
   Extra-Zeile), als EINE zentrierte Flex-Spalte statt einzeln positionierter
   Elemente -- der Name bleibt so immer sauber zentriert, egal wie viele Zeilen.
   .hive-obj selbst zentriert die Spalte per Flex (siehe hive.css), hier nur EINE
   Gegenrotation für den ganzen Block statt pro Zeile. */
.kvk-obj-stack {
  transform: rotate(-45deg); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; pointer-events: none;
}
/* Relativ zu --hive-cell (siehe hive.css), damit die Stadt-Beschriftung beim
   Zoomen mitwächst statt fest zu bleiben. --name-scale: von JS gesetzter
   Verkleinerungsfaktor (renderGrid, UI.fitNameToTile in ui.js) für lange Namen,
   die sonst über den Kachelrand hinauslaufen würden -- Default 1, kurze Namen
   werden dadurch NIE größer als bisher. */
.kvk-ln-name { font-size: calc(var(--hive-cell, 18px) * 0.4444 * var(--name-scale, 1)); font-weight: 700; color: var(--text); white-space: nowrap; line-height: 1.15; }
.kvk-ln-tag { font-size: calc(var(--hive-cell, 18px) * 0.3333); font-weight: 700; letter-spacing: .02em; color: var(--text-dim); white-space: nowrap; line-height: 1.1; }
.kvk-ln-extra { font-size: calc(var(--hive-cell, 18px) * 0.3333); color: var(--text-dim); font-style: italic; white-space: nowrap; line-height: 1.1; }

/* Farb-Leiste (Editor): 5 Swatches + "keine Farbe", persistent -- ausgewählte
   Farbe bleibt "scharf", bis erneut angetippt (siehe kvkmap.js applyColorTool). */
.kvk-color-bar { display: flex; gap: 6px; align-items: center; }
.kvk-swatch {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border);
  cursor: pointer; padding: 0; flex-shrink: 0;
}
.kvk-swatch.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.kvk-swatch[data-color="red"]    { background: var(--zone-red); }
.kvk-swatch[data-color="blue"]   { background: var(--zone-blue); }
.kvk-swatch[data-color="green"]  { background: var(--zone-green); }
.kvk-swatch[data-color="orange"] { background: var(--zone-orange); }
.kvk-swatch[data-color="purple"] { background: var(--zone-purple); }
.kvk-swatch[data-color=""] {
  background: repeating-linear-gradient(45deg, var(--surface-3) 0 4px, var(--surface) 4px 8px);
}

/* ===== Eigenständige Gruppenseite (kvkmap-group.html) ===== */
/* Hero-Header statt normaler .card -- hebt sich bewusst von den Listen-/
   Formular-Karten darunter ab (eigene Seite, eigener Look). */
.kvk-group-hero {
  background: var(--accent-bg); border: 1px solid var(--border-soft); border-radius: var(--r);
  padding: 20px 18px;
}
.kvk-group-hero h1 {
  margin: 0 0 4px; font-family: 'Rajdhani', sans-serif; font-size: 1.6rem; font-weight: 700;
  color: var(--text); line-height: 1.2;
}
/* Truppen-Ratio: Prozentzahl zuerst, dann Bezeichnung, alle 3 Zeilen
   untereinander -- auf einen Blick erfassbar statt nebeneinander gequetscht. */
.kvk-ratio-row { display: flex; align-items: center; gap: 8px; }
.kvk-ratio-row input[type="number"] { width: 70px; text-align: right; flex: none; }
.kvk-ratio-row .unit { color: var(--text-dim); }