/* ==========================================================================
   CC Supervisor — Stylesheet
   Aus dem Single-File-MVP herausgeloest. Alle frueheren style="..."-Attribute
   sind hier als Utility-Klassen abgebildet, damit eine strikte CSP ohne
   'unsafe-inline' funktioniert.
   ========================================================================== */

:root {
  --bg: #0B0E13;
  --panel: #171D26;
  --panel-2: #1E2530;
  --line: #2A323F;
  --text: #EDEFF4;
  --muted: #838C9E;
  --accent: #f5ab3d;
  --success: #068250;
  --danger: #da4146;
  --warn: #EA5B44;
  --neutral-progress: #4B5566;
  --gray: #c9c9c9;
  --octopus-blue: #4A6CF7;
  /* Hoehe der Fussleiste. Wird unten von .screen abgezogen, damit die Leiste
     bei kurzen Bildschirminhalten genau am unteren Rand sitzt statt darunter. */
  --footer-h: 34px;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body { height: 100%; }

body {
  margin: 0;
  background: radial-gradient(1200px 800px at 50% -10%, #151B24 0%, var(--bg) 60%);
  color: var(--text);
  font-family: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  display: flex;
  justify-content: center;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

#shell {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
}

.screen {
  display: none;
  flex-direction: column;
  padding: 12px 12px 20px;
  min-height: calc(100vh - var(--footer-h));
  min-height: calc(100dvh - var(--footer-h));
}
.screen.active { display: flex; }

/* --------------------------------------------------------------------------
   Fussleiste mit dem Nutzungshinweis
   Bewusst auf allen Bildschirmen sichtbar. Der kurze Satz ist anklickbar und
   oeffnet den vollstaendigen Hinweis im vorhandenen Dialog.
   -------------------------------------------------------------------------- */
#app-footer {
  min-height: var(--footer-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px calc(env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(11, 14, 19, .85);
  flex-wrap: wrap;
}
.disclaimer-btn {
  background: none;
  border: none;
  padding: 8px 4px;
  margin: 0;
  color: var(--muted);
  font-family: inherit;
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: .02em;
  text-align: center;
  cursor: pointer;
  text-decoration: underline dotted var(--line);
  text-underline-offset: 3px;
}
.disclaimer-btn:hover { color: var(--text); }

/* Impressum-Link im Footer, teilt sich die Optik mit dem Disclaimer-Knopf.
   Als <a> statt <button>, deshalb display:inline-block fuer Padding/Klickflaeche. */
.footer-sep {
  color: var(--line);
  font-size: 10px;
  padding: 0 2px;
}
a.footer-link {
  display: inline-block;
  text-decoration-style: dotted;
}
a.footer-link:visited { color: var(--muted); }

h1 {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 4px 4px 10px;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Fokus-Sichtbarkeit (Tastaturbedienung)
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Utilities (ersetzen die frueheren Inline-Styles)
   -------------------------------------------------------------------------- */
/* ACHTUNG bei diesen Utilities: Sie stehen im Stylesheet VOR den
   Komponenten-Klassen. Bei gleicher Spezifitaet gewinnt die spaetere Regel —
   deshalb sind die drei Utilities, die eine Komponenten-Eigenschaft
   ueberschreiben muessen (.inline-btn, .round-btn, .clickable), bewusst als
   Kombi-Selektor geschrieben. Sonst greifen sie nicht. */
.hidden { display: none !important; }
.mt-18 { margin-top: 18px; }
.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.no-top-margin { margin-top: 0 !important; }
.danger-value { color: var(--danger); }
.d-badge.clickable { cursor: pointer; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sekundaer-Knopf, der sich an seinen Inhalt anpasst statt die volle Breite
   zu nehmen (z. B. der Diabolo-Store-Knopf in der Budget-Zeile). */
.secondary-btn.inline-btn {
  width: auto;
  flex: 0 0 auto;
  padding: 10px 14px;
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.game-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

/* Kleiner runder Knopf (das Fragezeichen im Spielbildschirm). Der einzige
   verbliebene Nutzer von .icon-btn, seit die Werkzeugleiste auf .tool-btn
   umgestellt wurde (1.5.0). */
.icon-btn {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.icon-btn.round-btn {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  font-size: 12px;
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.primary-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #2A1600;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
}
.primary-btn:disabled { opacity: .4; cursor: not-allowed; }

.secondary-btn {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  margin-top: 8px;
  font-family: inherit;
}

.link-btn {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}

/* Jetzt 5 Sprachknoepfe (DE/EN/FR/ES/PT) statt 3 — flex-wrap verhindert ein
   Ueberlaufen auf sehr schmalen Bildschirmen, kleineres Padding/Gap sorgt
   dafuer, dass alle fuenf normalerweise trotzdem in einer Zeile bleiben. */
.lang-switch { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
/* 1.6.0: Sprachleiste im Zahnrad-Menue. Dort linksbuendig und mit etwas Luft
   nach unten, damit sie sich von den Menue-Eintraegen darunter absetzt. */
.popover-lang { justify-content: flex-start; padding: 4px 12px 8px; }
.popover-label {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 12px 4px;
}
.lang-btn {
  padding: 4px 7px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.lang-btn.active { border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------------------------------
   Name-Screen
   -------------------------------------------------------------------------- */
.name-card {
  margin: auto;
  width: 100%;
  max-width: 340px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px;
  text-align: center;
}
.name-card .lang-switch { margin-bottom: 14px; }
.name-card h1 {
  margin: 0 0 6px;
  font-size: 20px;
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
}
.name-card .lead { color: var(--muted); font-size: 13px; margin: 0 0 18px; }

#name-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  font-size: 16px; /* 16px verhindert den Auto-Zoom auf iOS */
  margin-bottom: 14px;
  font-family: inherit;
}
#name-input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

/* --------------------------------------------------------------------------
   Start-Screen
   -------------------------------------------------------------------------- */
.start-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.player-name { font-size: 18px; font-weight: 700; }
.player-name-row { display: flex; align-items: center; gap: 8px; position: relative; }
.player-name-btn {
  font-size: 18px;
  font-weight: 700;
  background: none;
  border: none;
  color: var(--text);
  padding: 0;
  cursor: pointer;
  text-decoration: underline dotted var(--muted);
  text-underline-offset: 3px;
  font-family: inherit;
}
.gear-btn {
  background: none;
  border: none;
  font-size: 15px;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  opacity: .8;
}
.settings-popover {
  display: none;
  position: absolute;
  z-index: 15;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  margin: -6px 0 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
.settings-popover.show { display: block; }
.popover-item {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.popover-item:hover { background: var(--panel-2); }

.start-best { text-align: right; }
.trained-badge { font-size: 10px; margin-left: 4px; }
.stat-label {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 500;
}
.stat-value {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.budget-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
/* Betrag und Waehrungskuerzel duerfen nie umbrechen ("0" / "ST" untereinander). */
.budget-row .stat-value { color: var(--accent); white-space: nowrap; }
.start-best .stat-value, #store-budget-display { white-space: nowrap; }

.storage-warning {
  margin: 12px 4px 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--warn);
  border: 1px solid var(--warn);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(234, 91, 68, .08);
}
.storage-warning[hidden] { display: none; }

.tech-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tech-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
}
.tech-badge.active { color: var(--accent); border-color: var(--accent); }
.tech-badge.outage {
  text-decoration: line-through;
  color: var(--danger);
  border-color: var(--danger);
}

/* Runde 2, Phase 3: war repeat(5, 1fr) — bei mehr als 5 Mitarbeitern (jetzt
   bis zu MAX_SLOTS=8) ergab das eine unschoene 5+n-Aufteilung. minmax(60px,
   1fr) lässt den Browser so viele Spalten wie moeglich in die 480px breite
   Shell packen (bei 456px Innenbreite passen 7 Spalten a 60px+Gap, die 8.
   Kachel bricht sauber in die naechste Zeile um).
   1.5.0: Die Einstellen-Kachel (.add-chip) belegt eine weitere Spalte, das
   Raster traegt das ohne Aenderung mit — bei vollem Team (8) entfaellt sie. */
#roster-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.roster-chip {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 4px;
  text-align: center;
  font-size: 11px;
  cursor: default;
  overflow: hidden;
  position: relative;
}
.roster-chip .roster-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roster-chip .tier-tag {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}
.roster-chip.upgradeable {
  border-color: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(245, 171, 61, .14);
}
/* 1.5.0: Ein Mitarbeiter, fuer den es noch etwas zu kaufen gibt, ist
   anklickbar — auch wenn das Budget dafuer gerade nicht reicht (siehe
   tasks-todo-1.5.md, Entscheidung 3.2: der Weg soll sichtbar bleiben, der
   Dialog zeigt dann deaktivierte Eintraege mit Preis). */
.roster-chip.has-options { cursor: pointer; }

/* 1.5.0: Das "+" ist ein reiner Hinweis, KEIN eigener Knopf (Entscheidung 3.3
   — auf 60px Chipbreite sitzt oben rechts schon der Umbenennen-Stift). Der
   ganze Chip ist die Trefferflaeche, deshalb pointer-events:none. */
.chip-plus {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  pointer-events: none;
}
.roster-chip:not(.upgradeable) .chip-plus { color: var(--muted); }

/* 1.5.0: Einstellen-Kachel am Ende des Teams. Gleiche Grundform wie ein
   Mitarbeiter-Chip, damit das Raster nicht springt. */
.add-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-style: dashed;
  cursor: pointer;
  color: var(--muted);
  min-height: 52px;
}
.add-chip .add-plus { font-size: 18px; font-weight: 700; line-height: 1; color: var(--accent); }
.add-chip .add-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.add-chip.locked { opacity: .55; }
.add-chip.locked .add-plus { color: var(--muted); }
.add-chip.affordable { border-color: var(--accent); border-style: solid; box-shadow: 0 0 0 2px rgba(245, 171, 61, .14); }

.tier-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 6px;
  border-radius: 5px;
  margin-top: 2px;
}
.tier-tag.tier-trainee { background: rgba(201, 201, 201, .15); color: var(--gray); }
.tier-tag.tier-experienced { background: rgba(75, 85, 102, .35); color: #B7C0CE; }
.tier-tag.tier-expert { background: rgba(245, 171, 61, .18); color: var(--accent); }
.tier-tag.tier-veteran { background: rgba(74, 108, 247, .18); color: var(--octopus-blue); }
.tier-tag.in-agent-card { margin-left: auto; }

/* Kleiner Umbenennen-Knopf, oben rechts auf dem Team-Chip. Bewusst separat
   vom Chip-Klick (der jetzt den Erweiterungs-Dialog oeffnet) — siehe app.js
   Listener, der closest('.rename-btn') VOR closest('.roster-chip') prueft. */
.rename-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  color: var(--muted);
  font-size: 9px;
  cursor: pointer;
}
.rename-btn:hover { color: var(--text); }

#contract-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.contract-card {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
}
/* 1.6.0: .contract-card.selected ist entfallen — es gibt keine Auswahl mehr,
   gestartet wird direkt am Play-Knopf der Karte. */
.contract-card { cursor: default; }
.contract-card.locked {
  cursor: not-allowed;
  opacity: .6;
}
.c-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.c-head-main { min-width: 0; }
/* Der Play-Knopf ist die einzige Startmoeglichkeit und darf deshalb nicht
   uebersehen werden: Akzentfarbe, rund, mindestens 44px Trefferflaeche. */
.play-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #2A1600;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 2px; /* das Dreieck wirkt sonst nach links versetzt */
  transition: transform .1s ease, box-shadow .15s ease;
}
.play-btn:hover { box-shadow: 0 0 0 4px rgba(245, 171, 61, .18); }
.play-btn:active { transform: scale(.94); }
.contract-card .c-level {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  margin-bottom: 4px;
}
.contract-card .c-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.risk-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}
.risk-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.risk-dot.good { background: var(--success); }
.risk-dot.medium { background: var(--warn); }
.risk-dot.bad { background: var(--danger); }
.risk-dot.locked { background: var(--muted); }
.contract-card .c-desc { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.contract-card .c-lock-hint { color: var(--muted); font-size: 11px; margin-bottom: 8px; font-style: italic; }
.contract-card .c-meta {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  flex-wrap: wrap;
}
.contract-card .c-meta b { color: var(--text); }

/* --------------------------------------------------------------------------
   Store
   -------------------------------------------------------------------------- */
.store-header-row { display: flex; align-items: center; gap: 10px; }
.d-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: default;
  display: block;
}
.d-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d-badge.small { width: 20px; height: 20px; border-radius: 5px; }

.store-section { margin-bottom: 20px; }
.store-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.store-item.locked { opacity: .55; }
.store-item-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.store-item-title { font-weight: 700; font-size: 14px; }
.store-item-title-row { display: flex; align-items: center; gap: 6px; }
/* 1.4.4: Ueberschrift plus Info-Knopf in einer Zeile. Der Knopf traegt die
   Begruendung fuer die Benennung "Servicemitarbeiter" — bewusst ein Knopf und
   kein title-Tooltip, weil die App Mobile-First ist und dort niemand hovert. */
.section-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.section-head h1 { margin-right: 0; }

.info-btn {
  background: none;
  border: none;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: .85;
}
.store-item-desc { color: var(--muted); font-size: 12px; margin-top: 2px; }
.store-item-effect { color: #B7C0CE; font-size: 11px; margin-top: 4px; font-style: italic; }
.store-item-level {
  font-size: 10px;
  color: var(--muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin-top: 2px;
}
.buy-btn {
  flex-shrink: 0;
  padding: 9px 14px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #2A1600;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.buy-btn:disabled { background: var(--panel-2); color: var(--muted); cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Auswahl-Dialog (1.5.0)
   Ein Eintrag = eine kaufbare Sache. Deaktivierte Eintraege bleiben sichtbar
   (mit Preis), damit der naechste Schritt erkennbar ist, statt zu verschwinden
   — dasselbe Muster wie die deaktivierten Kauf-Knoepfe im Store.
   -------------------------------------------------------------------------- */
.choice-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; text-align: left; }
.choice-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.choice-item:disabled { opacity: .5; cursor: not-allowed; }
.choice-item-main { min-width: 0; }
/* Titel und Zusatzzeile untereinander — beide sind <span> (ein <button> darf
   nur Phrasing-Inhalt tragen), brauchen also eine eigene Zeilenschaltung. */
.choice-item-title, .choice-item-meta { display: block; }
.choice-item-title { font-weight: 700; font-size: 13px; }
.choice-item-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.choice-item-price {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.choice-item:disabled .choice-item-price { color: var(--muted); }
/* 1.6.0: Zwischenueberschrift, seit der Erweiterungs-Dialog bis zu sieben
   Eintraege hat. Erste Ueberschrift ohne oberen Abstand. */
.choice-group {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 6px 2px 0;
}
.choice-group:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   Spiel-Screen
   -------------------------------------------------------------------------- */
#wallboard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  row-gap: 12px;
  column-gap: 10px;
  margin-bottom: 6px;
}
#time-value.risk { color: var(--warn); }
#time-value.bad { color: var(--danger); animation: pulse .8s infinite; }
#sla-value.good { color: var(--success); }
#sla-value.risk { color: var(--warn); animation: pulse 1s infinite; }
#sla-value.bad { color: var(--danger); animation: pulse .5s infinite; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

#shift-subtitle { font-size: 11px; color: var(--muted); margin: 0 4px 8px; }
#game-tech-badges { margin-bottom: 12px; }

/* 1.5.0: Die Werkzeugleiste war ein Flex-Container, in dem die Flex-Kraft
   (flex:1) die Restbreite nahm und die drei Symbol-Knoepfe fest 42px breit
   waren. Jetzt ein Grid mit gleich breiten Spalten: jedes Werkzeug ist
   gleichberechtigt (Vorgabe Matthias). grid-auto-flow:column plus
   grid-auto-columns:1fr heisst zugleich, dass der bis zum Kauf ausgeblendete
   Schichtplaner-Knopf (.hidden) keine leere Spalte hinterlaesst — die drei
   verbleibenden teilen sich die Breite. */
.game-toolbar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  margin-bottom: 14px;
  margin-top: 14px;
}
.tool-btn {
  min-width: 0;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 2px;
  border-radius: 10px;
  border: 2px solid var(--line);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.tool-icon {
  height: 22px;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tool-caption {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 1.7.0: Das Pulsieren ist raus. Es blendete den Knopf 60 Sekunden lang von
   Deckkraft 1 auf 0,4 — mit dem neuen Countdown darin waere die Zahl schlicht
   unlesbar gewesen. Der laufende Zaehler sagt ohnehin deutlicher "laeuft
   gerade" als jedes Blinken. Rahmen und Gluehen bleiben. */
.tool-btn.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(245, 171, 61, .2);
}
.tool-btn.used { opacity: .45; cursor: not-allowed; animation: none; }

.joker-icon-wrap { position: relative; }
.octopus-icon { height: 22px; width: auto; max-width: 18px; object-fit: contain; display: block; }
.joker-used-badge {
  display: none;
  position: absolute;
  top: -5px;
  right: -6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
  font-weight: 700;
}
/* 1.4.3: gruene Umrandung, solange eine sinnvolle Nutzung moeglich ist —
   also eine Ladung uebrig UND jemand krank oder in Zwangspause. Verschwindet
   von selbst, sobald das nicht mehr gilt. Steht bewusst VOR .armed, damit ein
   scharfgeschalteter Joker sein Aussehen behaelt (Kaskaden-Reihenfolge, siehe
   tasks/lessons.md). */
#joker-btn.has-target {
  border-color: var(--success);
  box-shadow: 0 0 0 3px rgba(34, 160, 96, .28);
}

#joker-btn.armed {
  border-color: var(--neutral-progress);
  box-shadow: 0 0 0 3px rgba(75, 85, 102, .35);
  animation: pulse 1.2s infinite;
}
.tool-btn.used .octopus-icon { filter: grayscale(1) brightness(.6); }
.tool-btn.used .joker-used-badge { display: block; }
.tool-btn.used .joker-label { text-decoration: line-through; }

#queue-section { margin-bottom: 16px; }
/* Code-Review 1.4.1, Punkt 12: die Spaltenzahl stand hier fest als repeat(5, …)
   und in app.js als MAX_QUEUE_SLOTS — zwei Dateien, ein Wert. Wer eines von
   beiden aendert, bekommt eine Warteschlange, deren Layout nicht mehr zur Zahl
   der gerenderten Chips passt. app.js setzt jetzt --queue-cols aus
   MAX_QUEUE_SLOTS; der Fallback 5 haelt die Darstellung intakt, falls das
   Skript nicht laeuft. */
#queue { display: grid; grid-template-columns: repeat(var(--queue-cols, 5), 1fr); gap: 8px; }
.call-chip {
  height: 80px;
  background: var(--panel-2);
  border: 2px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  position: relative;
  transition: transform .1s ease, border-color .15s ease;
}
.call-chip.selected {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 0 0 3px rgba(245, 171, 61, .15);
}
.call-chip .icon { font-size: 20px; }
.call-chip .bar-track {
  width: 56px;
  height: 5px;
  background: #0B0D13;
  border-radius: 3px;
  overflow: hidden;
}
.call-chip .bar-fill {
  height: 100%;
  background: var(--success);
  width: 100%;
  transition: width .1s linear, background .2s ease;
}
.call-chip.urgent .bar-fill { background: var(--danger); }
.call-chip.warn .bar-fill { background: var(--warn); }
.call-chip.training { background: var(--panel); }
/* Code-Review 1.4.1, Punkt 4: der Trainings-Chip hat seit dieser Version einen
   Balken (die Frist aus TRAINING_IGNORE_DEADLINE_MS laeuft sichtbar ab). Er
   bleibt bewusst neutral statt gruen/gelb/rot: ein Training ist nachrangig und
   soll nicht mit echten Anrufen um Aufmerksamkeit konkurrieren. render() setzt
   fuer Trainings deshalb auch keine .warn/.urgent-Klassen. */
.call-chip.training .bar-fill { background: var(--neutral-progress); }
.call-chip.callback { border-color: var(--neutral-progress); }
/* 1.6.0: Wiederanruf (Fachwissen). Warnfarbener Rahmen — anders als ein
   Rueckruf ist er kein Angebot an den Kunden, sondern die Folge eines nicht
   abschliessend geloesten Gespraechs. */
.call-chip.repeat { border-color: var(--warn); }
.call-chip .chip-label {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
#queue-empty {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 13px;
  padding: 30px 0;
  text-align: center;
}
#queue-overflow {
  display: none;
  font-size: 11px;
  color: var(--warn);
  margin-top: 6px;
  text-align: center;
}

#agents { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.agent-card {
  position: relative;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: border-color .15s ease, transform .1s ease, opacity .2s ease, box-shadow .15s ease;
}
.agent-card.free {
  border-color: var(--success);
  box-shadow: 0 0 0 2px rgba(6, 130, 80, .18);
}
.agent-card.free::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(6, 130, 80, .25);
}
.agent-card.free.assignable { animation: pulse-glow 1s infinite; }
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(6, 130, 80, .35); }
  50% { box-shadow: 0 0 0 7px rgba(6, 130, 80, .12); }
}
.agent-card.busy { opacity: .88; }
.agent-card.training { opacity: .88; }
.agent-card.on-break { opacity: .5; cursor: not-allowed; }
.agent-card.sick { opacity: .5; cursor: not-allowed; border-color: var(--warn); }
.agent-card.warn-stress { border-color: var(--warn); animation: pulse 1.1s infinite; }
.agent-card.joker-rescued { animation: joker-blink 0.35s ease-in-out 4; }
@keyframes joker-blink {
  0%, 100% { border-color: var(--success); box-shadow: 0 0 0 2px rgba(6, 130, 80, .18); }
  50% { border-color: var(--octopus-blue); box-shadow: 0 0 0 6px rgba(74, 108, 247, .45); background: #1a2440; }
}
.agent-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.agent-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.agent-name { font-weight: 700; font-size: 14px; }
.agent-status { font-size: 11px; color: var(--muted); }
.agent-card.free .agent-status { color: var(--success); }
/* Standardmaessig ausgeblendet; das Skript blendet den Balken bei Gespraech
   oder Training per style.display ein (CSSOM, von der CSP nicht betroffen). */
.agent-bar-track { display: none; height: 5px; background: #0B0D13; border-radius: 3px; overflow: hidden; }
.agent-bar-fill {
  height: 100%;
  background: var(--neutral-progress);
  width: 0%;
  transition: width .1s linear;
}
.agent-load { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.agent-load-label { font-size: 10px; color: var(--muted); white-space: nowrap; }
.agent-load-track { flex: 1; height: 4px; background: #0B0D13; border-radius: 3px; overflow: hidden; }
.agent-load-fill {
  height: 100%;
  background: var(--muted);
  width: 0%;
  transition: width .3s ease, background .3s ease;
}
.stress-row { display: flex; align-items: center; gap: 6px; }
.stress-track { flex: 1; height: 4px; background: #0B0D13; border-radius: 3px; overflow: hidden; }
.stress-fill {
  height: 100%;
  width: 0%;
  background: var(--success);
  transition: width .3s ease, background .3s ease;
}

.fly-point {
  position: fixed;
  z-index: 50;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 15px;
  pointer-events: none;
  will-change: transform, opacity;
}

/* 1.4.3: Warteschlange und Agenten bleiben im Nachlauf bedienbar — dort darf
   jetzt zugewiesen werden (siehe assignSelected()). Gesperrt bleiben nur die
   Dinge, die zur Schicht selbst gehoeren: Flex-Kraft und Routing-Automatik.
   1.5.0: #joker-bar (der frühere Wrapper) ist mit der neuen Werkzeugleiste
   entfallen — die Regel greift jetzt direkt am Knopf. */
#screen-game.shift-locked #joker-btn,
#screen-game.shift-locked #planner-btn {
  opacity: .55;
  pointer-events: none;
}

.shift-end-banner {
  display: none;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: #2A1600;
  font-weight: 700;
  font-size: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 12px;
}
.shift-end-banner.show { display: flex; }
.shift-end-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(42, 22, 0, .3);
  border-top-color: #2A1600;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Toasts & Hinweise
   -------------------------------------------------------------------------- */
.toast-container {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  /* Code-Review 1.4.1, Punkt 14: musste mit den Overlays mitwandern (25 -> 80),
     damit Toasts weiterhin ueber einem offenen Dialog sichtbar bleiben statt
     hinter dessen deckendem Hintergrund zu verschwinden. */
  z-index: 85;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  pointer-events: none;
  width: 90%;
  max-width: 400px;
}
.toast {
  background: var(--panel);
  border: 1px solid var(--danger);
  color: var(--text);
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 20px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
  text-align: center;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.joker, .toast.info { border-color: var(--neutral-progress); }

#hint {
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  min-height: 16px;
}

/* --------------------------------------------------------------------------
   Overlays
   -------------------------------------------------------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 14, 19, .94);
  display: none;
  align-items: center;
  justify-content: center;
  /* Code-Review 1.4.1, Punkt 14: lag frueher bei 25 und damit UNTER dem
     Consent-Banner (70). Beim Erstbesuch — solange keine Tracking-Entscheidung
     gespeichert ist — verdeckte das Banner am Desktop den Schliessen-Knopf des
     Nutzungshinweis-Dialogs vollstaendig (elementFromPoint auf der Knopfmitte
     lieferte consent-banner-text). Der Dialog liess sich dann nur noch per
     Escape schliessen. Ein modales Overlay gehoert immer ueber eine
     nicht-modale Leiste; die Reihenfolge ist jetzt durchgaengig:
     Popover 15 < Fly-Point 50 < Consent-Banner 70 < Overlay 80 < Toast 85
     < Fatal-Overlay 90. */
  z-index: 80;
  padding: 20px;
}
.overlay.show { display: flex; }
/* Das Fatal-Overlay muss ueber allem anderen liegen. */
#fatal-overlay { z-index: 90; background: rgba(11, 14, 19, .98); }

.overlay-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  max-height: 90vh;
  overflow-y: auto;
}
.overlay-actions { display: flex; gap: 8px; }

#event-card h2 { margin: 0 0 10px; font-size: 18px; color: var(--warn); }
#explainer-card h2 { margin: 0 0 4px; font-size: 18px; color: var(--accent); }
#explainer-card .explainer-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 6px;
}
#fatal-card h2 { margin: 0 0 10px; font-size: 18px; color: var(--danger); }

.overlay-card p {
  color: var(--text);
  font-size: 14px;
  margin: 0 0 20px;
  line-height: 1.5;
}
#pause-card h2, #tutorial-card h2, #confirm-card h2, #rename-card h2, #choice-card h2 { margin: 0 0 10px; font-size: 18px; }
#rename-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  font-size: 16px; /* 16px verhindert Auto-Zoom auf iOS, gleiches Muster wie #name-input */
  margin-bottom: 14px;
  font-family: inherit;
}
#rename-input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

/* Der Nutzungshinweis ist mehrabsaetzig und soll kopierbar sein. */
#explainer-text {
  white-space: pre-line;
  user-select: text;
  -webkit-user-select: text;
  text-align: left;
}
#tutorial-card { text-align: left; }
#tutorial-card #tutorial-step-counter { text-align: left; }

.fatal-detail {
  display: none;
  text-align: left;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  margin: 0 0 16px;
  max-height: 140px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
  -webkit-user-select: text;
}
.fatal-detail.show { display: block; }

/* --------------------------------------------------------------------------
   Consent-Banner (Matomo-Tracking)
   Schmale, unaufdringliche Leiste am unteren Bildschirmrand — kein Modal,
   damit die App darunter weiter bedienbar bleibt. Erscheint nur, solange
   noch keine Entscheidung gespeichert ist (siehe initConsent() in app.js).
   -------------------------------------------------------------------------- */
.consent-banner {
  position: fixed;
  left: 50%;
  bottom: calc(var(--footer-h) + 8px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 70;
  width: calc(100% - 24px);
  max-width: 440px;
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.consent-banner[hidden] { display: none; }
#consent-banner-text {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}
.consent-banner-actions { display: flex; gap: 8px; }
.consent-banner-actions .secondary-btn,
.consent-banner-actions .primary-btn { margin-top: 0; }

/* --------------------------------------------------------------------------
   Dashboard
   -------------------------------------------------------------------------- */
.contract-result { font-weight: 700; font-size: 13px; margin: 0 0 14px; }
.contract-result.good { color: var(--success); }
.contract-result.bad { color: var(--danger); }

.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 4px 0 18px;
}
.dash-kpi-tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}
.dash-kpi-tile .stat-value { font-size: 20px; }
/* 1.4.3: Bei ungerader Kachelzahl (Endlosmodus: Score, Budget, Wellen) fuellt
   die letzte Kachel die Zeile, statt eine Luecke stehen zu lassen. */
.dash-kpi-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dash-kpi-note {
  font-size: 12px;
  color: var(--muted);
  margin: -4px 0 8px;
}
.dash-kpi-tile .stat-value.good { color: var(--success); }
.dash-kpi-tile .stat-value.bad { color: var(--danger); }

.dash-tech-line {
  font-size: 12px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 6px;
}
.dash-line-chart {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 18px;
}
.dash-line-chart svg { width: 100%; height: 90px; display: block; }
.dash-line-legend {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
}

.donut {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.donut-hole {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 18px;
}
.donut-legend {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.donut-legend .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}
.donut-legend .dot.accepted { background: var(--success); }
.donut-legend .dot.iva { background: var(--neutral-progress); }
.donut-legend .dot.missed { background: var(--danger); }

.dash-bar-chart { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.dash-agent-chart { margin-bottom: 18px; display: flex; flex-direction: column; gap: 8px; }
.dash-bar-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.dash-bar-row .bar-label {
  width: 88px;
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-bar-row .bar-track {
  flex: 1;
  height: 10px;
  background: #0B0D13;
  border-radius: 5px;
  overflow: hidden;
}
.dash-bar-row .bar-fill { height: 100%; border-radius: 5px; transition: width .4s ease; }
.dash-bar-row .bar-count {
  width: 30px;
  text-align: right;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  flex-shrink: 0;
}
.dash-insight {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  margin-bottom: 12px;
}
.dash-provider-note { font-size: 11px; color: var(--muted); margin-bottom: 18px; }
.dash-diabolocom-box {
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
}
.dash-diabolocom-box #dash-diabolocom-note {
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
}
.dash-diabolocom-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.dash-diabolocom-link:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Reduzierte Bewegung respektieren
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* ==========================================================================
   1.7.0 — ACD-Countdown, Rahmen-Signale, Endsequenz, Mobile-Verdichtung
   Dieser Block steht bewusst am Dateiende: drei seiner Regeln muessen in der
   Kaskade GEWINNEN, und bei gleicher Spezifitaet gewinnt die spaetere Regel.
   Betroffen sind .agent-card.joker-target (gegen .agent-card.sick, das
   border-color setzt), #agents.cols-3 (gegen das Basis-Raster) und die
   Verdichtungs-Media-Query. Steht der Block weiter oben, greift er nicht —
   dieselbe Falle wie bei #joker-btn.has-target in 1.4.3.
   ========================================================================== */

/* --- ACD-Kachel: Countdown und Fortschrittsbalken ------------------------- */
/* Beide absolut positioniert, damit die feste Hoehe von .tool-btn (56px) und
   damit die Gleichgrosse aller Werkzeugknoepfe unberuehrt bleibt. */
.tool-btn { position: relative; overflow: hidden; }
.tool-timer {
  position: absolute;
  top: 3px;
  right: 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}
.tool-timer[hidden] { display: none; }
.tool-bar-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #0B0D13;
}
.tool-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width .2s linear;
}
/* In den letzten Sekunden wandert der Balken auf Warnfarbe — derselbe Moment,
   in dem der Bildschirmrahmen anspringt, nur am Ort der Ursache. */
#screen-game.acd-ending .tool-bar-fill { background: var(--warn); }

/* --- Rahmen um den Spielbildschirm ---------------------------------------- */
/* position:fixed rahmt das Sichtfenster, nicht den Inhalt — dadurch ist der
   Rahmen unabhaengig davon sichtbar, wie weit gescrollt wurde.
   z-index 60 fuegt sich in die bestehende Ordnung ein:
   Popover 15 < Fly-Point 50 < RAHMEN 60 < Consent-Banner 70 < Overlay 80
   < Toast 85 < Fatal-Overlay 90.
   Gelb = die ACD laeuft aus, Rot = die Schicht steht auf der Kippe. Nie beide
   gleichzeitig; render() schaltet Gelb ab, sobald Rot gilt. */
#screen-game.acd-ending::after,
#screen-game.danger-edge::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  border: 4px solid var(--accent);
  border-radius: 4px;
  animation: edge-pulse 1s ease-in-out infinite;
}
#screen-game.danger-edge::after {
  border-color: var(--danger);
  animation-duration: .7s;
}
@keyframes edge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .2; }
}

/* --- Flex-Kraft: rettbare Mitarbeiter ------------------------------------- */
/* Octopus-Blau ist die Farbe der Flex-Kraft — sie steckt schon im Symbol, in
   der joker-rescued-Animation und im Veteranen-Tag.
   opacity kommt zurueck auf .92: .on-break und .sick setzen .5, und ein blauer
   Rahmen auf einer halbdurchsichtigen Karte sieht kaputt aus statt einladend.
   cursor ebenfalls, weil .on-break/.sick auf not-allowed stehen — hier ist der
   Klick aber genau das, was passieren soll. */
.agent-card.joker-target {
  border-color: var(--octopus-blue);
  opacity: .92;
  cursor: pointer;
  animation: joker-target-pulse 1.2s ease-in-out infinite;
}
@keyframes joker-target-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(74, 108, 247, .5); }
  50% { box-shadow: 0 0 0 8px rgba(74, 108, 247, .12); }
}

/* --- Endsequenz ----------------------------------------------------------- */
/* Durchlaessig (0,62 statt 0,94 wie die uebrigen Overlays): der Endzustand des
   Contact Centers bleibt sichtbar. Genau das war der Punkt — bis 1.6.0 sprang
   das Spiel ohne einen einzigen Frame ins Dashboard. */
.endseq-overlay {
  background: rgba(11, 14, 19, .62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  cursor: pointer;
}
.endseq-card {
  text-align: center;
  pointer-events: none;
  padding: 24px 28px;
  border-radius: 18px;
  background: rgba(23, 29, 38, .88);
  border: 1px solid var(--line);
  max-width: 320px;
  width: 100%;
}
.endseq-title {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.endseq-reason {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 10px;
}
.endseq-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}
.endseq-count.tick { animation: endseq-tick .45s ease-out; }
@keyframes endseq-tick {
  0% { transform: scale(1.5); opacity: .2; }
  60% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.endseq-hint {
  margin-top: 12px;
  font-size: 11px;
  color: var(--muted);
}

/* ==========================================================================
   Mobile-Verdichtung
   Zielgeraet ist iPhone 12 und neuer (Sichtfenster rund 745px hoch).
   Gemessen bei 8 Mitarbeitern und gekaufter Technik: der Spielbildschirm war
   rund 1035px hoch, es fehlten also knapp 290px — und zwar ausgerechnet beim
   Mitarbeiterblock, dem Teil, den man zum Spielen braucht.

   Zwei Stufen:
     cols-3          ab 7 Mitarbeitern, unabhaengig von der Bildschirmhoehe:
                     spart eine komplette Kartenreihe (~118px).
     max-height 900  alles andere ruecken enger zusammen. Greift nicht am
                     Desktop, wo Platz ohnehin kein Problem ist.
   Als Sicherheitsnetz fuer alles unter 740px (iPhone SE und Aehnliches)
   scrollt am Ende nur noch der Mitarbeiterbereich — Wallboard, Werkzeuge und
   Warteschlange bleiben damit in JEDER Kombination sichtbar.
   ========================================================================== */

/* --- Dreispaltige Mitarbeiterkarten ab 7 Personen ------------------------- */
/* Wichtig: HIER steht nur, was mit drei Spalten zu tun hat. Die kompakte
   Kartenform haengt an der Bildschirmhoehe und steht weiter unten in der
   Media-Query — beim ersten Anlauf hing sie an .cols-3, und genau das ging
   nach hinten los: ein Team aus SECHS Mitarbeitern blieb zweispaltig, bekam
   damit auch keine kompakten Karten und war am Ende 116px zu hoch. Also
   hoeher als ein Team aus acht. Gemessen, nicht vermutet. */
#agents.cols-3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* Freigabe Matthias: das Tier-Kennzeichen schrumpft zum farbigen Punkt —
   aber nur hier. In zwei Spalten ist fuer das Wort Platz genug.
   Die vier Tier-Farben gibt es bereits, die Bedeutung geht also nicht
   verloren, nur das Wort. */
#agents.cols-3 .tier-tag.in-agent-card {
  font-size: 0;
  width: 10px;
  height: 10px;
  min-width: 10px;
  padding: 0;
  margin-top: 0;
  border-radius: 50%;
  align-self: flex-start;
}
/* Der gruene Punkt von .agent-card.free saesse sonst genau auf dem Tier-Punkt.
   Der gruene Rahmen signalisiert "frei" deutlich genug. */
#agents.cols-3 .agent-card.free::before { display: none; }

/* --- Enger zusammenruecken auf flachen Bildschirmen ----------------------- */
@media (max-height: 900px) {
  #screen-game h1 { margin: 2px 4px 6px; }
  #wallboard { padding: 10px 12px; row-gap: 8px; }
  #wallboard .stat-value { font-size: 18px; }
  /* Sechs Badges brechen bei 390px Breite auf zwei Zeilen um und kosten
     damit rund 24px. Eine Zeile, seitlich schiebbar: der Platz ist
     zurueck, die Information bleibt erreichbar. */
  #game-tech-badges { margin-bottom: 8px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  #game-tech-badges .tech-badge { flex: 0 0 auto; }
  /* Hoehe bleibt fuer ALLE Werkzeuge gleich — tests/regression-1.5.spec.js
     prueft genau das. */
  .game-toolbar { margin-top: 8px; margin-bottom: 8px; }
  .tool-btn { height: 48px; }
  .tool-icon { height: 18px; font-size: 15px; }
  .call-chip { height: 64px; gap: 4px; }
  .call-chip .icon { font-size: 17px; }
  #queue-section { margin-bottom: 10px; }
  #hint { margin-top: 8px; }
  .screen { padding-bottom: 12px; }

  /* Kompakte Mitarbeiterkarte — bewusst an der Bildschirmhoehe, NICHT an der
     Spaltenzahl. Sie muss auch bei fuenf oder sechs Mitarbeitern greifen, die
     zweispaltig bleiben: 6 Karten in 2 Spalten sind 3 Reihen, genau wie 8
     Karten in 3 Spalten. Ohne diese Trennung war ein Sechser-Team hoeher als
     ein Achter-Team. */
  #agents .agent-card { padding: 9px 8px; gap: 6px; }
  /* nowrap statt wrap: sonst wird bei schmalen Karten jede unterschiedlich
     hoch und das Raster sieht zerrupft aus. */
  #agents .agent-top { flex-wrap: nowrap; gap: 5px; }
  #agents .agent-top > div:nth-child(2) { min-width: 0; }
  #agents .agent-avatar { width: 26px; height: 26px; font-size: 14px; border-radius: 8px; }
  #agents .agent-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #agents .agent-status { font-size: 10px; }
  #agents .agent-load-label { font-size: 9px; }
  /* Die Beschriftung "Stress" faellt weg, der Balken bleibt — die Farbe sagt
     ohnehin mehr als das Wort. Die Anrufzahl bleibt stehen, weil der
     Lastbalken relativ zum Team skaliert und ohne Zahl nicht ablesbar waere. */
  #agents .stress-row .agent-load-label { display: none; }
}

/* --- Sicherheitsnetz: nur der Mitarbeiterbereich scrollt ------------------- */
/* Unterhalb von 740px reicht auch die Verdichtung nicht mehr. Statt die ganze
   Seite scrollen zu lassen (und damit die Warteschlange aus dem Blick zu
   verlieren, ohne die das Spiel nicht spielbar ist), wird der Spielbildschirm
   auf Sichtfensterhoehe festgenagelt und nur der Mitarbeiterblock scrollt. */
@media (max-height: 740px) {
  #screen-game.active {
    height: calc(100vh - var(--footer-h));
    height: calc(100dvh - var(--footer-h));
    min-height: 0;
    overflow: hidden;
  }
  #agents-section {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  #agents {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
  }
  #hint { flex: 0 0 auto; }
}