/* Fortschrittsbalken (Gebäude und Ausbildung) */
.pbar { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.pbar-top { display: flex; justify-content: space-between; gap: 8px; font-size: 0.8rem; }
.pbar-right { color: var(--brass-light); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pbar-track { height: 8px; border-radius: 4px; background: #0d0f12; border: 1px solid var(--panel-edge); overflow: hidden; }
.pbar-fill { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #8a5a17, var(--brass-light)); transition: width 1s linear; }

/* Rekrutierungsfenster */
.recruit-window.modal { max-width: 760px; }
.recruit-place { flex-direction: row; align-items: center; gap: 10px; margin: 4px 0 6px; }
.recruit-place select { font: inherit; color: var(--text); background: #121417; border: 1px solid var(--panel-edge); border-radius: 7px; padding: 7px 10px; }
.recruit-window .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.recruit-window .tab { white-space: nowrap; flex: none; }
.tab small { color: var(--muted); font-weight: 500; }
.tab.later { opacity: 0.55; }
.recruit-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; padding-right: 2px; }
.recruit-row {
  display: grid; grid-template-columns: 72px minmax(0, 1.3fr) minmax(0, 1.2fr) auto; gap: 12px; align-items: center;
  background: #181b1f; border: 1px solid var(--panel-edge); border-radius: 9px; padding: 8px 10px;
}
.recruit-row.locked { opacity: 0.5; }
.recruit-row .lock { font-size: 0.85rem; }
.rr-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rr-stats { display: flex; gap: 10px; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.rr-stats em { font-style: normal; color: var(--muted); margin-right: 3px; font-size: 0.72rem; }
.rr-cost { display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; }
.rr-cost small { color: var(--muted); }
.rr-act { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 170px; }
.rr-act small { font-size: 0.72rem; text-align: right; }
.unit-img { width: 72px; height: 56px; border-radius: 7px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(160deg, #2b3036, #15181b); border: 1px solid var(--panel-edge); }
.unit-img.small { width: 44px; height: 34px; }
.unit-img img { width: 100%; height: 100%; object-fit: cover; }
.unit-img .ph { font-size: 1.7rem; filter: grayscale(0.2); }
.unit-img.small .ph { font-size: 1.1rem; }
.recruit-queue h4 { margin: 14px 0 6px; color: var(--brass-light); }
.queue-item { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.05); }
.queue-item.waiting { opacity: 0.6; }

/* Laufendes Match: Seitenfenster nur auf Knopfdruck, Rohstoffe als Streifen unter der Kopfzeile */
.panel-toggle { align-items: center; gap: 6px; }
.map-stage.playing ~ * .panel-toggle, .map-page:has(.map-stage.playing) .panel-toggle { display: inline-flex; }
.map-stage.playing .match-panel { display: none; }
.map-stage.playing .match-panel.open { display: block; }
.map-stage.has-resbar .resource-bar {
  top: 0; left: 0; right: 0; transform: none; max-width: none; border-radius: 0; border-width: 0 0 1px; padding: 3px 8px; justify-content: center;
}
.map-stage.has-resbar .res { padding: 2px 8px; }
.map-stage.has-resbar .map-controls { top: 58px; }
@media (min-width: 641px) { .map-stage.has-resbar .province-panel { top: 58px; max-height: calc(100% - 70px); } }
.map-stage.has-resbar .match-panel { top: 58px; }
@media (max-width: 640px) {
  .map-stage.has-resbar .resource-bar { justify-content: flex-start; }
  .map-stage.has-resbar .map-toggles { top: 58px; bottom: auto; }
  .recruit-row { grid-template-columns: 56px 1fr; }
  .recruit-row .unit-img { width: 56px; height: 44px; grid-row: span 2; }
  .rr-cost, .rr-act { grid-column: 2; align-items: flex-start; max-width: none; }
  .nation-name-top { display: none; }
}