/* =============================================================================
   main.css — Grundlayout des Prototyps: Pergament/Tinte-Optik, responsive
   Grid (Karte + Statusleiste), kein hartcodiertes Pixel-Layout für eine
   einzelne Auflösung (siehe CLAUDE.md Abschnitt 2 zur späteren Mobile-
   Anpassung).
   ============================================================================= */

:root {
  --color-parchment: #ecdfc0;
  --color-parchment-dark: #d8c69c;
  --color-ink: #2c1e12;
  --color-ink-soft: #4a3826;
  --color-accent: #8a2c1f; /* Siegelwachs-Rot */
  --color-accent-soft: #b5502f;
  --color-gold: #a97e2f;
  --color-panel-bg: rgba(236, 223, 192, 0.94);
  --color-border: #7a5a34;
  --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.35);
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #14100b;
  color: var(--color-ink);
  font-family: var(--font-body);
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Kopfleiste ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1.2rem;
  background: linear-gradient(180deg, #2c1e12, #1c130b);
  color: var(--color-parchment);
  border-bottom: 3px solid var(--color-gold);
  flex-wrap: wrap;
}

.topbar h1 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.8rem);
  margin: 0;
  letter-spacing: 0.04em;
  color: var(--color-parchment);
}

.topbar .subtitle {
  font-size: 0.8rem;
  opacity: 0.75;
  font-style: italic;
}

.turn-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* Seit dem Marktübersicht-Button (3 Buttons + Rundenanzeige) passt das auf
     schmalen Handy-Breiten nicht mehr in eine Zeile — ohne Wrap drückte das
     die ganze Seite horizontal auf (Regressionstest ist genau darauf
     angesprungen). */
  flex-wrap: wrap;
  justify-content: flex-end;
}

.turn-indicator {
  font-family: var(--font-display);
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  white-space: nowrap;
}

.end-turn-button {
  font-family: var(--font-display);
  font-size: 0.95rem;
  background: var(--color-accent);
  color: var(--color-parchment);
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  padding: 0.35rem 1.1rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.end-turn-button:hover {
  background: var(--color-accent-soft);
}

.new-game-button {
  font-family: var(--font-display);
  font-size: 0.85rem;
  background: transparent;
  color: var(--color-parchment);
  border: 1px solid rgba(236, 223, 192, 0.4);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.75;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.new-game-button:hover {
  opacity: 1;
  border-color: var(--color-gold);
}

/* ---------- Hauptlayout ---------- */

.main-layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr);
  gap: 1rem;
  padding: 1rem;
}

@media (max-width: 900px) {
  .main-layout {
    grid-template-columns: 1fr;
  }
}

/* ---------- Karte ---------- */

/* Die Karte darf NIE unter eine lesbare Mindestbreite schrumpfen (siehe
   Nutzer-Feedback: Marker/Text wurden auf schmalen Bildschirmen unlesbar
   klein). Statt dessen scrollt sie ab hier horizontal — auf einem Handy
   ein normales, erwartbares Verhalten für eine Desktop-orientierte Karte
   (siehe CLAUDE.md: dieser Schritt ist bewusst Desktop-Web-only). */
.map-column {
  min-width: 0; /* erlaubt dem Grid-Item, schmaler als sein Inhalt zu sein */
}

/* Standardmäßig 3x GEZOOMT (siehe .map-frame.is-zoomed) statt der ganzen
   Karte auf einmal, damit eng beieinanderliegende Städte (Malmö/Warberg/
   Visby/Ystad) nicht mehr überlappen — Nutzer-Wunsch: "die Karte muss
   irgendwie normalerweise gezoomt (3x) sein, damit sich die Städte nicht
   überlappen". .map-scroll ist dafür das FESTE Sichtfenster (überall gleich
   groß, 16:9) und scrollt in BEIDE Richtungen über die größere
   .map-frame-Fläche; ein Übersicht-Button (#map-zoom-toggle) schaltet auf
   die frühere 1x-Ansicht (ganze Karte sichtbar, keine Scrollbars) um. */
.map-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.4rem;
}

.map-zoom-toggle {
  font-family: var(--font-display);
  font-size: 0.85rem;
  background: transparent;
  color: var(--color-parchment);
  border: 1px solid rgba(236, 223, 192, 0.4);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.map-zoom-toggle:hover {
  opacity: 1;
  border-color: var(--color-gold);
}

.map-scroll {
  position: relative;
  overflow: auto;
  border-radius: 10px;
  aspect-ratio: 16 / 9;
  width: 100%;
  /* BEWUSST kein min-width mehr (anders als früher bei .map-frame): würde
     .map-scroll selbst (normaler Fluss-Layout, keine absolute Positionierung
     wie .map-frame) über die Viewport-Breite hinaus aufblähen und die ganze
     Seite horizontal scrollbar machen (Regression, per Test aufgefallen).
     Nicht mehr nötig: im Standard-Zoom (300%, .map-frame.is-zoomed) ist die
     effektive Kartenbreite für die cqw-Marker-Größen ohnehin ein Vielfaches
     der Viewport-Breite, auch auf schmalen Handys. */
}

.map-scroll-hint {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--color-parchment);
  opacity: 0.75;
  text-align: center;
}

.map-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 3px solid var(--color-border);
  background: #0c0904;
  /* Marker-Größen unten sind in cqw (% der Kartenbreite) angegeben, damit
     sie mit der Kartengröße mitwachsen/schrumpfen — genau das erzeugt beim
     Umschalten zwischen is-zoomed (300%) und Übersicht (100%) den optischen
     Zoom-Effekt für Marker/Text mit, nicht nur für den Hintergrund. */
  container-type: inline-size;
  /* KEINE CSS-transition hier — die Größe wird beim Zoomen per JS animiert
     (siehe main.js animateMapZoom), weil scrollLeft/scrollTop parallel zur
     Größe mitlaufen müssen, damit derselbe Kartenpunkt zentriert bleibt.
     Eine reine CSS-transition lief der Scroll-Position hinterher, was den
     Zoom sichtbar springen/"reißen" ließ (Nutzer-Feedback: "herein und
     herauszoomen soll noch angepasst werden"). */
}

.map-frame.is-zoomed {
  width: 300%;
  height: 300%;
}

.map-frame img.map-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.city-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-parchment);
  font-family: var(--font-display);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
}

.city-marker .marker-badge {
  /* 4.53cqw entspricht 44px bei der ursprünglichen ~970px-Kartenbreite,
     schrumpft/wächst aber proportional mit der tatsächlichen Kartengröße.
     Untergrenze bewusst bei 24px/10px (statt technisch minimal möglich),
     damit Marker auf schmalen/mobilen Bildschirmen NIE unlesbar klein
     werden — auf sehr schmalen Screens ist etwas Kartenüberlappung das
     kleinere Übel gegenüber unlesbarem Text (siehe Nutzer-Feedback). */
  width: clamp(24px, 4.53cqw, 48px);
  height: clamp(24px, 4.53cqw, 48px);
  border-radius: 50%;
  object-fit: cover;
  /* Jede Stadt bekommt ihre eigene Farbe (siehe mapColors.js), als Inline-
     Custom-Property pro Marker gesetzt — Nutzer-Wunsch: "die Kreise um
     Schiffe und Städte sollen verschiedene Farben haben". */
  border: 2px solid var(--city-color, var(--color-gold));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  background: var(--color-parchment-dark);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.city-marker.is-home .marker-badge {
  width: clamp(30px, 5.77cqw, 60px);
  height: clamp(30px, 5.77cqw, 60px);
  border-width: 3px;
}

.city-marker:hover .marker-badge,
.city-marker:focus-visible .marker-badge {
  transform: scale(1.12);
  box-shadow: 0 0 0 4px rgba(169, 126, 47, 0.55);
}

.city-marker .marker-label {
  font-size: clamp(10px, 1.29cqw, 12.5px);
  padding: clamp(1px, 0.3cqw, 3px) clamp(4px, 1.2cqw, 8px);
  background: rgba(20, 14, 8, 0.72);
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.city-marker.is-home .marker-label {
  font-weight: bold;
  color: var(--color-gold);
}

/* Eigene Schiffe auf der Karte (im Hafen oder als Fortschritts-Punkt auf
   der Fahrt) — siehe mapView.js shipMapPosition. Kein <button> (nicht
   interaktiv, reine Standortanzeige), daher pointer-events:none, damit
   Klicks weiterhin an den darunterliegenden Stadt-Marker durchgereicht
   werden, falls sich ein Schiff gerade im Hafen befindet. */
.ship-map-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* Nutzer-Feedback: "Schiffe müssen sichtbarer sein. Mach einen Kreis
     drum" — jedes Schiff bekommt außerdem seine eigene Farbe (siehe
     mapColors.js), als Inline-Custom-Property pro Marker gesetzt, genau
     wie bei den Stadt-Markern. */
  width: clamp(20px, 3.8cqw, 36px);
  height: clamp(20px, 3.8cqw, 36px);
  border: 2.5px solid var(--ship-color, var(--color-gold));
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  /* Rundenende (siehe main.js/mapView.js): links/top ändern sich, das
     Schiff gleitet sichtbar zur neuen Position statt zu springen —
     Nutzer-Wunsch: "muss irgendwie cool animiert aussehen". */
  transition: left 1.1s cubic-bezier(0.45, 0, 0.55, 1), top 1.1s cubic-bezier(0.45, 0, 0.55, 1);
}

.ship-map-marker img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.ship-map-marker.is-at-sea img {
  filter: drop-shadow(0 0 3px rgba(255, 220, 150, 0.9));
  animation: ship-bob 1.6s ease-in-out infinite;
}

/* Schiffe AUF SEE überlappen (anders als im Hafen) keinen Stadt-Marker,
   dürfen also klickbar sein — Nutzer-Wunsch: "wenn ich auf ein Schiff ...
   auf der Karte klicke soll angezeigt werden, was das Schiff geladen hat". */
.ship-map-marker.is-at-sea {
  pointer-events: auto;
  cursor: pointer;
}

@keyframes ship-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-2px) rotate(2deg); }
}

/* ---------- Statusleiste ---------- */

.status-panel {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: var(--color-panel-bg);
  border: 3px solid var(--color-border);
  border-radius: 10px;
  padding: 1rem;
  box-shadow: var(--shadow-soft);
  max-height: min(80vh, 900px);
  overflow-y: auto;
}

.status-panel h2 {
  font-family: var(--font-display);
  font-size: 1rem;
  margin: 0 0 0.4rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.3rem;
  color: var(--color-ink-soft);
  letter-spacing: 0.03em;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  padding: 0.15rem 0;
}

.stat-row .label {
  color: var(--color-ink-soft);
}

.stat-row .value {
  font-weight: bold;
}

.rank-badge {
  display: inline-block;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-parchment);
  font-size: 0.85rem;
  font-weight: bold;
}

/* Rangwechsel-Dialog (ui/rankChangeDialog.js) — ersetzt den früheren
   selbstständig verschwindenden Toast (Nutzer-Korrektur 2026-08-20: "Beim
   Aufstieg erscheint ein Dialog (kein Toast), der die Mechanik erklärt und
   mit 'Verstanden' bestätigt werden muss"). */
.rank-change-dialog h2 {
  color: var(--color-gold);
}

/* Wachssiegel-Banner (Nutzer-Fund 2026-08-21: "wo sind die schönen Bilder
   der Siegel geblieben?") — dieselben 12 KI-generierten Bilder wie zuvor im
   Toast (src/assets/rank-*.png), jetzt oben im blockierenden Dialog statt
   in einem sich selbst schließenden Toast. */
.rank-change-banner {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  margin-bottom: 0.8rem;
}
.rank-change-banner.is-promoted {
  background: linear-gradient(135deg, rgba(169, 126, 47, 0.35), rgba(169, 126, 47, 0.12));
  border: 2px solid var(--color-gold);
}
.rank-change-banner.is-demoted {
  background: rgba(92, 31, 31, 0.2);
  border: 2px solid var(--color-accent);
}
.rank-change-img {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
}
.rank-change-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.rank-change-kicker {
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}
.rank-change-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.1;
}

.rank-feature-block {
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.6rem;
}
.rank-feature-block h3 {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
}
.rank-feature-block p {
  margin: 0;
  font-size: 0.85rem;
}
.rank-feature-block.is-gained {
  background: rgba(169, 126, 47, 0.25);
  border: 1px solid var(--color-gold);
}
.rank-feature-block.is-lost {
  background: rgba(92, 31, 31, 0.25);
  border: 1px solid var(--color-accent);
}

.rank-feature-hint {
  margin: -0.2rem 0 0.5rem;
  font-size: 0.78rem;
  padding-left: 0.6rem;
}

/* Sieg-Dialog (ui/gameOverDialog.js) beim Aufstieg zum Bürgermeister. */
.game-over-dialog h2 {
  color: var(--color-gold);
}
.game-over-dialog button {
  margin-right: 0.5rem;
}

/* Rang-Zeile ist jetzt ein <button> (Klick zeigt alle Ränge, siehe
   rankInfoDialog.js) — Button-Defaults zurücksetzen, damit sie weiterhin
   wie eine normale .stat-row aussieht. */
.rank-row-clickable {
  width: 100%;
  background: none;
  border: none;
  font-family: var(--font-body);
  color: inherit;
  cursor: pointer;
  border-radius: 4px;
}

.rank-row-clickable:hover,
.rank-row-clickable:focus-visible {
  background: rgba(169, 126, 47, 0.15);
}

.rank-progress-bar {
  height: 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.15);
  overflow: hidden;
  margin: 0.2rem 0 0.3rem;
}

.rank-progress-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--color-gold), var(--color-accent));
}

.ship-card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.5rem;
  background: rgba(255, 255, 255, 0.25);
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.ship-card img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex: none;
}

.ship-icon-clickable {
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ship-icon-clickable:hover,
.ship-icon-clickable:focus-visible {
  transform: scale(1.12);
  box-shadow: 0 0 0 3px rgba(169, 126, 47, 0.5);
}

.ship-card .ship-info {
  flex: 1;
  min-width: 0;
}

.ship-card .ship-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-weight: bold;
  font-size: 0.88rem;
}

.ship-card .ship-name-text {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

/* Nutzer-Wunsch: "packe neben dem Namen rechtsbündig ein Symbol für Ladung
   und die Angabe, zu wieviel Prozent es beladen ist" — NICHT zu verwechseln
   mit dem darunterliegenden Zustands-Balken (Schiffsgesundheit). */
.ship-card .ship-cargo-badge {
  font-weight: normal;
  font-size: 0.75rem;
  color: var(--color-ink-soft);
  white-space: nowrap;
  flex: none;
}

.ship-card .ship-meta {
  font-size: 0.78rem;
  color: var(--color-ink-soft);
}

.condition-bar {
  height: 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.15);
  overflow: hidden;
  margin-top: 0.25rem;
}

.condition-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7a9a4a, #4c7a2f);
}

.condition-bar.is-low > span {
  background: linear-gradient(90deg, #c98f2b, #a5641c);
}

.condition-bar.is-critical > span {
  background: linear-gradient(90deg, var(--color-accent-soft), var(--color-accent));
}

.shipyard-heading {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin: 0.7rem 0 0.4rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.2rem;
}

.shipyard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
}

.shipyard-card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  background: rgba(255, 255, 255, 0.25);
  text-align: center;
}

.shipyard-name {
  font-weight: bold;
  font-size: 0.85rem;
}

.shipyard-stats {
  font-size: 0.72rem;
  color: var(--color-ink-soft);
  margin: 0.2rem 0 0.5rem;
}

.shipyard-card button {
  width: 100%;
  font-size: 0.78rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-gold);
  color: var(--color-ink);
  padding: 0.3rem 0.4rem;
  cursor: pointer;
}

.shipyard-card button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.warehouse-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.warehouse-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  padding: 0.3rem 0.55rem;
  /* Jetzt ein <button> (siehe statusPanel.js) — Button-Defaults zurücksetzen,
     Nutzer-Idee: Klick öffnet den schifflosen Kontor-Handel (kontorDialog.js). */
  width: 100%;
  border: none;
  font-family: var(--font-body);
  color: inherit;
  cursor: pointer;
}

.warehouse-row:hover,
.warehouse-row:focus-visible {
  background: rgba(255, 255, 255, 0.4);
}

.warehouse-row .capacity {
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-soft);
}

.goods-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.5rem;
}

.goods-legend .good-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  text-align: center;
  color: var(--color-ink-soft);
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.4rem 0.2rem 0.3rem;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.goods-legend .good-item:hover,
.goods-legend .good-item:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.goods-legend .good-item img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-parchment-dark);
}

.goods-legend .good-amount {
  font-weight: bold;
  color: var(--color-ink);
}

/* ---------- Schiffssteuerung (Statusleiste) ---------- */

.ship-controls {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}

.ship-destination-select {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  font-family: var(--font-body);
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.5);
}

.ship-controls button,
.repair-button {
  font-size: 0.78rem;
  font-family: var(--font-body);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-gold);
  color: var(--color-ink);
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  white-space: nowrap;
}

.repair-button {
  margin-top: 0.35rem;
  display: block;
  background: rgba(255, 255, 255, 0.4);
}

.ship-error {
  color: var(--color-accent);
  font-size: 0.75rem;
  margin-top: 0.3rem;
  min-height: 1em;
}

/* ---------- Protokoll ---------- */

.log-section {
  padding: 0 1rem 1rem;
}

.log-panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  max-height: 140px;
  overflow-y: auto;
  color: var(--color-parchment);
  font-size: 0.8rem;
}

.log-entry {
  padding: 0.15rem 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.log-entry:last-child {
  border-bottom: none;
}

.log-entry-placeholder {
  color: rgba(236, 223, 192, 0.55);
  font-style: italic;
}

/* Zufallsereignisse (Schritt 4, siehe events.js/actions.js addLog `type`)
   heben sich farblich vom normalen Protokoll ab, damit wichtige Ereignisse
   (Wrack, Rangaufstieg) beim Überfliegen nicht untergehen. */
.log-entry-danger {
  color: #ff8a75;
  font-weight: bold;
}

.log-entry-warning {
  color: #f0c46a;
}

.log-entry-gold {
  color: var(--color-gold);
}

.log-entry-rankup {
  color: #ffe9a8;
  font-weight: bold;
}

.log-entry-rankdown {
  color: #e0a598;
  font-weight: bold;
}

.log-entry-dynasty {
  color: #c9b6ff;
  font-style: italic;
}

.log-entry-victory {
  color: var(--color-gold);
  font-weight: bold;
  font-style: italic;
}

/* ---------- Handelsdialog ---------- */

.trade-dialog {
  /* Position/Größe werden bewusst EXPLIZIT gesetzt statt sich auf die
     UA-Default-Zentrierung von <dialog>:modal zu verlassen — auf einem
     echten Android-Handy (Chrome) wurde der Dialog sonst nicht korrekt
     zentriert/begrenzt und lief unten aus dem sichtbaren Bereich heraus. */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: 3px solid var(--color-border);
  border-radius: 10px;
  /* Volltonfarbe (KEIN Alpha) — mit --color-panel-bg (94% Deckkraft) schien
     auf einem echten Handy der Hintergrund sichtbar durch den Dialog
     hindurch (siehe Nutzer-Screenshot). */
  background: var(--color-parchment);
  color: var(--color-ink);
  padding: 1rem 1.2rem 1.2rem;
  max-width: min(94vw, 900px);
  width: 100%;
}

/* Nutzer-Wunsch: "mach die Handelstabelle auf dem Tablet/PC-Bildschirm
   breiter, 90% des Bildschirms oder so" — NUR der eigentliche Handelsdialog
   (viele Spalten, profitiert am meisten von Breite), nicht die kleineren
   Info-Dialoge (Rang/Schiff/Bestand), die dieselbe .trade-dialog-Basis
   nutzen. Auf schmalen Bildschirmen ist 90vw ~ der bisherige Wert, macht
   also mobil praktisch keinen Unterschied. */
.trade-dialog--wide {
  width: 90vw;
  max-width: min(90vw, 1500px);
  /* dvh berücksichtigt die ein-/ausblendende Adressleiste mobiler Browser
     korrekt (100vh ist dort oft die MAXIMALE, nicht die aktuell sichtbare
     Höhe) — vh bleibt als Fallback für Browser ohne dvh-Unterstützung. */
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.7);
  z-index: 1000;
}

.trade-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

/* Manuelles Backdrop-Fallback (siehe tradeDialog.js): einige mobile
   Browser dimmen den Hintergrund über dialog::backdrop nicht zuverlässig
   ab — dieses Element übernimmt dieselbe Aufgabe unabhängig davon. */
.trade-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
}

.trade-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.4rem;
  margin-bottom: 0.6rem;
}

.trade-dialog-header h2 {
  font-family: var(--font-display);
  margin: 0;
}

.trade-close {
  border: none;
  background: transparent;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--color-ink-soft);
}

.trade-hint {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin: 0.3rem 0;
}

.news-delay-hint {
  font-style: italic;
  background: rgba(169, 126, 47, 0.15);
  border: 1px dashed var(--color-gold);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
}

.trade-error {
  background: var(--color-accent);
  color: var(--color-parchment);
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

/* Schiffsauswahl im Handelsdialog als anklickbare Karten statt <select>
   (Nutzer-Wunsch: "die Auswahl der Schiffe soll schöner sein"). */
.ship-select-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.ship-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  font-family: var(--font-body);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  color: var(--color-ink);
}

.ship-tab:hover {
  border-color: var(--color-gold);
}

.ship-tab.is-selected {
  background: rgba(169, 126, 47, 0.3);
  border-color: var(--color-gold);
  border-width: 2px;
}

.ship-tab-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  align-self: stretch; /* Spalten-Flex-Container (siehe .ship-tab) -> stretch wirkt hier horizontal, damit die Ladungsanzeige rechts an den Kartenrand rutscht */
  font-weight: bold;
  font-size: 0.85rem;
}

.ship-tab-name-text {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Nutzer-Wunsch: "packe neben dem Namen rechtsbündig ein Symbol für Ladung
   und die Angabe, zu wieviel Prozent es beladen ist". */
.ship-tab-cargo {
  font-weight: normal;
  font-size: 0.72rem;
  color: var(--color-ink-soft);
  white-space: nowrap;
}

.ship-tab-meta {
  font-size: 0.72rem;
  color: var(--color-ink-soft);
}

.trade-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin: 0.5rem 0;
  display: block;
  overflow-x: auto;
}

.trade-table th,
.trade-table td {
  padding: 0.3rem 0.4rem;
  text-align: left;
  white-space: nowrap;
}

.trade-table thead {
  border-bottom: 1px solid var(--color-border);
}

.trade-table tbody tr:nth-child(odd) {
  background: rgba(0, 0, 0, 0.03);
}

/* Kurzes Hervorheben der Zeile, zu der per Klick aus der Statusleiste
   gesprungen wurde (siehe tradeDialog.js openTradeDialog highlightGoodId),
   damit klar ist, welche Ware gemeint war, statt sie nur "irgendwo im
   Blickfeld" landen zu lassen. */
.trade-table tbody tr.is-highlighted {
  background: rgba(169, 126, 47, 0.35);
  transition: background 1.4s ease;
}

.good-cell {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.profit-positive {
  color: #3c6e21;
  font-weight: bold;
}

.profit-negative {
  color: var(--color-accent);
  font-weight: bold;
}

.good-cell img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--color-border);
}

/* Mengen-Stepper (+/-1, +/-10, +/-50) statt Zahlen-Eingabefeld — Nutzer-
   Wunsch: "ich möchte keine Zahlen eingeben. mach +/-1 +/-10 etc buttons". */
.qty-stepper {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-wrap: wrap;
}

/* Nutzer-Wunsch: "das muss ich sehen, bevor ich den Kaufen-Knopf drücke ...
   irgendwie bei der Menge ... den Durchschnittspreis (gerundet) auch
   anzeigen" — Vorschau von Ø-Preis + Gesamtpreis für die aktuell
   eingestellte Menge, direkt unter dem Mengen-Stepper (NICHT auf dem
   Kaufen/Verkaufen-Button selbst, das wurde vom Nutzer ausdrücklich
   korrigiert). Siehe tradeDialog.js/kontorDialog.js updatePreview. */
.qty-price-preview {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: var(--color-ink-soft);
}

/* Nutzer-Feedback: "das lange Drücken geht nicht, da dann der Browser in
   den Markieren-Modus geht" — verhindert Text-Auswahl/Lupe/Kontextmenü
   während des Haltens (siehe attachLongPress in tradeDialog.js). */
.long-press-btn {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.qty-step-btn {
  font-size: 0.7rem !important;
  padding: 0.15rem 0.35rem !important;
  min-width: 1.9rem;
}

.qty-display {
  min-width: 2.2rem;
  text-align: center;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.sell-price {
  color: var(--color-ink-soft);
  font-size: 0.9em;
}

/* Stapelt Kauf-/Verkaufspreis IMMER zuverlässig untereinander, auch wenn
   die umgebende <td> per Media-Query selbst zum Flex-Container wird
   (siehe main.css unten, .trade-table td unter 640px) — <br> allein
   reicht dafür nicht, siehe Kommentar in marketOverviewDialog.js/
   tradeDialog.js. */
.price-pair {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.3;
}

/* Preisverlauf-Sparkline (siehe ui/sparkline.js) — Nutzer-Wunsch: macht die
   zyklische Nachfrage (game/demandCycles.js) sichtbar, statt dass man den
   Rhythmus einer Ware mühsam selbst herausrechnen muss. Zeigt bewusst NUR
   den tatsächlich aufgezeichneten Verlauf, keine Prognose (Nutzer: "keine
   Vorhersage"). */
.price-sparkline {
  display: block;
  margin-top: 0.25rem;
  overflow: visible;
}

.price-sparkline-past {
  stroke: var(--color-accent);
  stroke-width: 1.4;
}

.price-sparkline-now {
  fill: var(--color-gold);
  stroke: var(--color-parchment);
  stroke-width: 0.6;
}

/* Marktübersicht (siehe marketOverviewDialog.js): eine gemeinsame Preistafel
   für alle Städte, mit bewusst VERZÖGERTEN Preisen für entfernte Orte (siehe
   priceHistory.js) statt Live-Werten — sonst wäre der Reiz weg. Breite: siehe
   .trade-dialog--wide (Nutzer-Wunsch: "die Handelsübersicht soll auch so
   breit sein wie der Handelsdialog") — dieselbe Klasse, kein eigenes Maß mehr. */

/* Nutzer-Wunsch: "die Tabelle der Marktübersicht soll so breit sein wie
   der Dialog" — .trade-table ist normalerweise `display:block` (nötig für
   das horizontale Scrollen bei vielen Spalten im Handelsdialog), dadurch
   entsteht intern eine anonyme Tabellen-Box, die sich nur an ihrem INHALT
   statt an den 100% Breite ausrichtet — sichtbar als Leerraum rechts neben
   der Tabelle. `table-layout:fixed` + `display:table` NUR hier (die
   Marktübersicht hat keine <th colspan> wie der Handelsdialog, also kein
   Risiko für dessen Spalten-Ausrichtung) erzwingt zuverlässig 100% Breite. */
/* .kontor-table (kontorDialog.js) hat wie .market-overview-table kein
   <th colspan> im Kopf, also derselbe risikolose Fix. */
.market-overview-table,
.kontor-table {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.market-overview-table th,
.market-overview-table td,
.kontor-table th,
.kontor-table td {
  white-space: normal;
  word-break: break-word;
}

.market-overview-row {
  cursor: pointer;
}

.market-overview-row:hover,
.market-overview-row:focus-visible {
  background: rgba(169, 126, 47, 0.25) !important;
}

.market-overview-city {
  font-weight: bold;
  white-space: nowrap;
}

.news-delay {
  display: block;
  font-weight: normal;
  font-size: 0.72rem;
  color: var(--color-ink-soft);
  opacity: 0.8;
}

/* Ø Einkauf der Lagerware, als Unterzeile in der "Lager"-Zelle des
   Handelsdialogs (siehe tradeDialog.js) — dieselbe kleine, gedämpfte
   Optik wie .news-delay, damit die Hauptzahl (Lagermenge) klar führt. */
.warehouse-avg-cost {
  display: block;
  font-weight: normal;
  font-size: 0.72rem;
  color: var(--color-ink-soft);
  opacity: 0.8;
}

/* Mobile Artikel-Ansicht der Marktübersicht (siehe marketOverviewDialog.js
   buildMobileView) — standardmäßig ausgeblendet, die Stadt-Zeile x
   Waren-Spalte-Tabelle bleibt für Tablet/PC aktiv, wo sich eine Spalte
   bequem scannen lässt. */
.market-overview-mobile {
  display: none;
}

@media (max-width: 640px) {
  .market-overview-city {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
  }

  /* Nutzer-Wunsch: "die Marktübersicht auf dem Handy nach Artikeln nicht
     nach Städten gruppieren, man vergleicht ja die Preise für einen Artikel
     in verschiedenen Städten" — die Stadt-Zeilen-Tabelle würde als
     gestapelte Karte pro STADT enden (siehe .trade-table-Mobil-Regeln oben),
     also stattdessen eine komplett eigene, bereits nach Ware gruppierte
     Ansicht zeigen. */
  .market-overview-table {
    display: none;
  }

  .market-overview-mobile {
    display: block;
  }
}

.mo-good-card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.6rem;
  background: rgba(255, 255, 255, 0.3);
}

.mo-good-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: bold;
  margin-bottom: 0.4rem;
}

.mo-good-header img {
  width: 26px;
  height: 26px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--color-border);
}

.mo-city-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  border: none;
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  margin-bottom: 0.3rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: inherit;
  cursor: pointer;
}

.mo-city-row:last-child {
  margin-bottom: 0;
}

.mo-city-row:hover,
.mo-city-row:focus-visible {
  filter: brightness(0.95);
}

.mo-city-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.mo-city-name-line {
  display: flex;
  align-items: center;
  font-weight: bold;
}

.trade-table button {
  font-size: 0.76rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-gold);
  color: var(--color-ink);
  padding: 0.15rem 0.5rem;
  cursor: pointer;
}

.trade-table button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Unter 640px: aus der breiten Tabelle wird pro Ware eine gestapelte Karte
   (kein seitliches Scrollen mehr nötig — auf dem Handy leicht zu übersehen
   und laut Nutzer-Feedback "passt nicht auf den Bildschirm"). Jede <td>
   bekommt über data-label (siehe tradeDialog.js) ihre Spaltenüberschrift
   als vorangestelltes Label; die Ware-Zelle (Icon+Name) bleibt wie sie ist. */
@media (max-width: 640px) {
  .trade-table {
    overflow-x: visible;
  }

  .trade-table thead {
    display: none;
  }

  /* Ohne dies bleibt <tbody> im Tabellen-Layout-Algorithmus (table-row-
     group) und richtet sich nach der Inhaltsbreite statt der vollen
     Dialogbreite — die Karten wirkten dadurch nur halb so breit wie der
     Dialog, mit viel Leerraum rechts daneben (siehe Nutzer-Screenshot). */
  .trade-table tbody {
    display: block;
    width: 100%;
  }

  .trade-table tbody tr {
    display: flex;
    flex-direction: row; /* zusammen mit flex-wrap unten: Infozeilen je
      eine volle Zeile, Buttons wrappen zu zweit nebeneinander */
    flex-wrap: wrap;
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.5rem;
    background: rgba(255, 255, 255, 0.3);
    gap: 0.4rem;
  }

  .trade-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: normal;
    padding: 0.25rem 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
    flex: 1 1 100%; /* Standard: jede Zelle nimmt eine eigene volle Zeile ein */
  }

  /* Button-Zellen (Kaufen/Verkaufen/Laden/Löschen) — statt jeweils allein
     in einer eigenen Zeile mit viel Leerraum daneben (Nutzer-Feedback:
     "die Buttons in der Tabelle verteilen") wrappen sie zu zweit
     nebeneinander, der Button füllt seine Hälfte komplett aus. */
  .trade-table td:has(button):not(.qty-cell) {
    flex: 1 1 calc(50% - 0.2rem);
    border-bottom: none;
    padding: 0;
  }

  .trade-table td:has(button):not(.qty-cell) button {
    width: 100%;
  }

  .trade-table td:last-child {
    border-bottom: none;
  }

  .trade-table td[data-label]::before {
    content: attr(data-label);
    font-weight: bold;
    color: var(--color-ink-soft);
    margin-right: 0.6rem;
    flex: none;
  }

  .good-cell {
    justify-content: flex-start;
    font-weight: bold;
  }

  .qty-stepper {
    justify-content: flex-end;
  }

  /* Preis-Vorschau (siehe .qty-price-preview oben) wrappt unter Menge-Label
     + Stepper auf eine eigene volle Zeile, statt das ohnehin schon enge
     Flex-Row der Menge-Zelle noch weiter zu stauchen. */
  .qty-cell {
    flex-wrap: wrap;
  }

  .qty-price-preview {
    flex: 1 1 100%;
    text-align: right;
  }

  .trade-table button {
    font-size: 0.85rem;
    padding: 0.35rem 0.8rem;
  }
}

.trade-footer {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--color-border);
  padding-top: 0.6rem;
  margin-top: 0.4rem;
}

.trade-action-button {
  font-family: var(--font-body);
  font-size: 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-accent);
  color: var(--color-parchment);
  padding: 0.35rem 0.8rem;
  cursor: pointer;
}

/* ---------- Waren-Bestandsübersicht (Klick auf Warenpreis-Karte) ---------- */

.good-inventory-dialog {
  max-width: min(94vw, 480px);
}

.good-inventory-title-icon {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  vertical-align: middle;
  margin-right: 0.5rem;
}

.good-inventory-dialog h3 {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin: 0.8rem 0 0.4rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.2rem;
}

.good-inventory-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.85rem;
  padding: 0.4rem 0.55rem;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  margin-bottom: 0.35rem;
}

.good-inventory-row span:first-child {
  flex: 1;
}

/* Anklickbare Variante (siehe shipInfoDialog.js: Ladungszeile -> Sprung zum
   Handelsdialog des Zielhafens) — die Zeile ist dafür ein <button> statt
   eines <div>, braucht also die üblichen Button-Resets plus einen
   erkennbaren Hover/Fokus-Zustand. */
.good-inventory-row-clickable {
  width: 100%;
  border: none;
  font-family: var(--font-body);
  cursor: pointer;
  text-align: left;
}

.good-inventory-row-clickable:hover,
.good-inventory-row-clickable:focus-visible {
  background: rgba(169, 126, 47, 0.25);
}

.good-inventory-amount {
  font-weight: bold;
  white-space: nowrap;
}

/* Ø Einkaufspreis je Fundort (Nutzer-Wunsch: "wie die Ware bewertet ist,
   die jeweiligen Einkaufspreise") — gedämpfter als die Menge, die bleibt
   die auffälligste Zahl in der Zeile. */
.good-inventory-value {
  color: var(--color-ink-soft);
  font-size: 0.8em;
  white-space: nowrap;
}

/* Farbiger Punkt, der in Listen dieselbe Farbe wie der Karten-Marker einer
   Stadt/eines Schiffs zeigt (siehe mapColors.js) — Nutzer-Wunsch: "in den
   Listen werden die Farben aufgegriffen". */
.color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: middle;
  border: 1px solid rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.rank-info-row.is-current {
  background: rgba(169, 126, 47, 0.35);
  border: 1px solid var(--color-gold);
}

.good-inventory-row button {
  font-size: 0.76rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-gold);
  color: var(--color-ink);
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  white-space: nowrap;
}

/* ---------- Sonstiges ---------- */

.error-banner {
  display: none;
  background: var(--color-accent);
  color: var(--color-parchment);
  padding: 0.6rem 1.2rem;
  font-size: 0.85rem;
}

.error-banner.is-visible {
  display: block;
}

/* Nutzer-Fund (2026-08-25, Telemetrie-Auswertung eines Testers): ein schon
   lange offener Tab lädt ES-Module nie automatisch neu — ein Fix, der
   NACH dem letzten Reload deployt wurde, greift erst nach einem erneuten
   Laden der Seite. Dieser Banner macht ein bereits installiertes Update
   sichtbar, statt es unbemerkt im Hintergrund zu lassen (siehe main.js
   serviceWorker.addEventListener("updatefound", ...)). Bewusst NICHT wie
   .error-banner alarmierend, sondern neutral/informativ. */
.update-banner {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  background: var(--color-panel-bg);
  border-bottom: 2px solid var(--color-accent);
  color: var(--color-ink);
  padding: 0.6rem 1.2rem;
  font-size: 0.85rem;
}

.update-banner.is-visible {
  display: flex;
}

.update-banner button {
  background: var(--color-accent);
  color: var(--color-parchment);
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.8rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Eigene, schmale Scrollbalken statt der klobigen System-Scrollbalken
   (Nutzer-Feedback: "in Chrome unter Windows sind die Scrollbalken
   Systemscrollbalken, das sieht sehr unschön aus") — betrifft Karte,
   Handelsdialog/-übersicht, Statusleiste, Protokoll und die Handelstabelle
   selbst (horizontales Scrollen zwischen 640-900px Breite). `scrollbar-*`
   deckt Firefox ab, `::-webkit-scrollbar` Chrome/Edge/Safari. */
.map-scroll,
.trade-dialog,
.status-panel,
.log-panel,
.trade-table {
  scrollbar-width: thin;
  scrollbar-color: var(--color-gold) rgba(0, 0, 0, 0.15);
}

.map-scroll::-webkit-scrollbar,
.trade-dialog::-webkit-scrollbar,
.status-panel::-webkit-scrollbar,
.log-panel::-webkit-scrollbar,
.trade-table::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.map-scroll::-webkit-scrollbar-track,
.trade-dialog::-webkit-scrollbar-track,
.status-panel::-webkit-scrollbar-track,
.log-panel::-webkit-scrollbar-track,
.trade-table::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.15);
}

.map-scroll::-webkit-scrollbar-thumb,
.trade-dialog::-webkit-scrollbar-thumb,
.status-panel::-webkit-scrollbar-thumb,
.log-panel::-webkit-scrollbar-thumb,
.trade-table::-webkit-scrollbar-thumb {
  background: var(--color-gold);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.map-scroll::-webkit-scrollbar-thumb:hover,
.trade-dialog::-webkit-scrollbar-thumb:hover,
.status-panel::-webkit-scrollbar-thumb:hover,
.log-panel::-webkit-scrollbar-thumb:hover,
.trade-table::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent-soft);
}

/* ---------- Rundenende-Popup (siehe ui/roundSummaryDialog.js) ----------
   Nutzer-Wunsch: "am ende einer runde sollten spezielle Ereignisse... als
   popup box angezeigt werden und ob die Runde erfolgreich war oder nicht",
   Bilder als Schriftrollen statt Wachssiegel ("ein mittelalterlicher
   sprecher vor sich auseinander zog und dann verkündete"). */
.round-summary-dialog {
  max-width: min(94vw, 620px);
  max-height: 85dvh;
  overflow-y: auto;
}

.round-summary-verdict {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: bold;
  text-align: center;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  margin: 0.4rem 0 1rem;
}
.round-summary-verdict.is-success {
  background: rgba(169, 126, 47, 0.18);
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
}
.round-summary-verdict.is-failure {
  background: rgba(138, 44, 31, 0.18);
  color: var(--color-accent-soft);
  border: 1px solid var(--color-accent);
}

.round-summary-events {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.round-summary-event {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  padding: 0.5rem;
}

.round-summary-event-img {
  width: 4.6rem;
  height: 4.6rem;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}

.round-summary-event p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.35;
}

.round-summary-ok {
  display: block;
  width: 100%;
  padding: 0.6rem;
  font-family: var(--font-display);
  font-weight: bold;
  font-size: 1rem;
}

/* ---------- Einstiegstutorial (siehe ui/tutorialDialog.js) ----------
   Nutzer-Wunsch: "erstelle noch ein einstiegstutorial, das man überspringen
   kann". */
.tutorial-dialog {
  max-width: min(94vw, 480px);
  max-height: 88dvh;
  overflow-y: auto;
  text-align: center;
}

.tutorial-img {
  width: 9rem;
  height: 9rem;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  margin: 0.4rem auto 1rem;
  display: block;
}

.tutorial-text {
  margin: 0 0 1.1rem;
  font-size: 0.98rem;
  line-height: 1.5;
  text-align: left;
}

.tutorial-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.tutorial-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
}

.tutorial-dot.is-active {
  background: var(--color-gold);
}

.tutorial-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.tutorial-nav-right {
  display: flex;
  gap: 0.5rem;
}

.tutorial-skip {
  background: none;
  border: none;
  color: var(--color-ink-soft);
  text-decoration: underline;
  font-size: 0.88rem;
  padding: 0.4rem 0.2rem;
}

.tutorial-back {
  background: none;
  border: 1px solid var(--color-border);
}

.tutorial-next {
  font-family: var(--font-display);
  font-weight: bold;
}

/* Feedback-Link in der Kopfzeile (führt zum Tester-Fragebogen auf tally.so).
   Sieht aus wie die übrigen Kopfzeilen-Buttons, ist aber ein <a>. */
a.feedback-button {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* Sprachumschalter "DE | EN" in der Kopfzeile (siehe main.js
   wireLanguageToggle) — sieht aus wie die übrigen Kopfzeilen-Buttons, die
   aktive Sprache ist hervorgehoben. Bewusst kompakt, damit die Kopfzeile auch
   bei 390px Breite ohne horizontales Scrollen umbricht. */
.language-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
}

.language-toggle .language-option {
  opacity: 0.55;
}

.language-toggle .language-option.is-active {
  opacity: 1;
  font-weight: bold;
  color: var(--color-gold);
}

.language-toggle .language-separator {
  opacity: 0.4;
}