/* =====================================================================================
   Klinikum Kuddelmuddel – style.css
   Retro-Oberfläche: klobige, abgeschrägte Paneele, Pixelränder, warme Krankenhausfarben.
   Alle Maße in rem; main.js setzt --ui-scale (1 bei 1280×720, bis 3 bei 4K).
   ===================================================================================== */

/* Hauseigene Pixelschrift (tools/make-font.mjs), vom eigenen Server ausgeliefert */
@font-face {
  font-family: 'Kuddelpixel';
  src: url('../fonts/kuddelpixel.woff') format('woff'), url('../fonts/kuddelpixel.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --ui-scale: 1;
  --ink: #3a2816;
  --ink-soft: #6b5137;
  --ink-faint: #9a8264;
  --panel: #e9d9b4;
  --panel-hi: #fff5da;
  --panel-mid: #d9c497;
  --panel-lo: #a98a59;
  --panel-deep: #7a5f3a;
  --outline: #2a1c0e;
  --night: #262537;
  --night-2: #34324a;
  --night-3: #4a4766;
  --teal: #3a9d8f;
  --teal-hi: #7fd3c3;
  --teal-lo: #22665c;
  --red: #d24a3c;
  --red-hi: #ff8f7a;
  --red-lo: #84261d;
  --mustard: #e3b23c;
  --mustard-hi: #ffe08a;
  --mustard-lo: #9a7114;
  --green: #5aa646;
  --green-lo: #2f6b23;
  --blue: #4f86c6;
  --blue-lo: #2d5281;
  --paper: #f6f1df;
  --paper-line: #dcd3b4;
  --shadow: rgba(20, 12, 4, 0.45);
  --px: 0.1rem;            /* ein „Pixel“ der Oberfläche */
  --font: 'Kuddelpixel', 'Lucida Console', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html {
  font-size: calc(20px * var(--ui-scale));
  height: 100%;
  background: var(--night);
}

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  color: var(--ink);
  background: var(--night);
  -webkit-font-smoothing: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  line-height: 1.05;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

#app { position: fixed; inset: 0; overflow: hidden; }

#game-canvas, #fx-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
#game-canvas { background: #3f6b34; cursor: default; }
#game-canvas.tool-build { cursor: crosshair; }
#game-canvas.tool-door { cursor: pointer; }
#game-canvas.tool-sell { cursor: not-allowed; }
#game-canvas.tool-carry { cursor: grabbing; }
#game-canvas.panning { cursor: move; }
#fx-canvas { pointer-events: none; }

.layer { position: absolute; inset: 0; pointer-events: none; }
.layer > * { pointer-events: auto; }
.hidden { display: none !important; }
.invisible { visibility: hidden; }

/* ------------------------------------------------------------------ Grundbausteine */
.panel {
  background: var(--panel);
  border: calc(var(--px) * 2) solid;
  border-color: var(--panel-hi) var(--panel-lo) var(--panel-lo) var(--panel-hi);
  box-shadow: 0 0 0 var(--px) var(--outline), calc(var(--px) * 3) calc(var(--px) * 3) 0 var(--px) var(--shadow);
  image-rendering: pixelated;
}
.panel.dark {
  background: var(--night-2);
  color: #efe6cf;
  border-color: var(--night-3) #18172a #18172a var(--night-3);
}
.inset {
  background: var(--panel-mid);
  border: calc(var(--px) * 2) solid;
  border-color: var(--panel-lo) var(--panel-hi) var(--panel-hi) var(--panel-lo);
}
.inset.paper { background: var(--paper); }
.inset.dark { background: #1e1d2c; color: #e9e1c8; border-color: #12111d #4a4766 #4a4766 #12111d; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
  min-height: 1.6rem; padding: 0.15rem 0.6rem;
  background: var(--panel);
  color: var(--ink);
  font-size: 1rem; line-height: 1;
  border: calc(var(--px) * 2) solid;
  border-color: var(--panel-hi) var(--panel-lo) var(--panel-lo) var(--panel-hi);
  box-shadow: 0 0 0 var(--px) var(--outline);
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
}
.btn:hover { background: var(--panel-hi); }
.btn:active, .btn.active, .btn.pressed {
  border-color: var(--panel-lo) var(--panel-hi) var(--panel-hi) var(--panel-lo);
  background: var(--panel-mid);
  padding-top: 0.2rem; padding-bottom: 0.1rem;
}
.btn:disabled, .btn.disabled {
  color: var(--ink-faint); cursor: not-allowed; background: var(--panel-mid);
  border-color: var(--panel-mid) var(--panel-lo) var(--panel-lo) var(--panel-mid);
}
.btn.primary { background: var(--teal); color: #fff; border-color: var(--teal-hi) var(--teal-lo) var(--teal-lo) var(--teal-hi); }
.btn.primary:hover { background: #48b3a3; }
.btn.primary:active { border-color: var(--teal-lo) var(--teal-hi) var(--teal-hi) var(--teal-lo); }
.btn.danger { background: var(--red); color: #fff; border-color: var(--red-hi) var(--red-lo) var(--red-lo) var(--red-hi); }
.btn.danger:hover { background: #e25b4c; }
.btn.danger:active { border-color: var(--red-lo) var(--red-hi) var(--red-hi) var(--red-lo); }
.btn.gold { background: var(--mustard); border-color: var(--mustard-hi) var(--mustard-lo) var(--mustard-lo) var(--mustard-hi); }
.btn.small { min-height: 1.25rem; padding: 0.05rem 0.4rem; font-size: 0.9rem; }
.btn.big { min-height: 2.3rem; font-size: 1.35rem; padding: 0.25rem 1rem; }
.btn.wide { width: 100%; }
.btn.icon-only { padding: 0.15rem 0.3rem; }
.btn .pix { width: 1rem; height: 1rem; }
.btn.big .pix { width: 1.4rem; height: 1.4rem; }

.pix { display: inline-block; image-rendering: pixelated; image-rendering: crisp-edges; flex: none; }
.pix-canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }

h1, h2, h3, h4 { margin: 0; font-weight: normal; line-height: 1; }
p { margin: 0.3rem 0; line-height: 1.1; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.good { color: var(--green-lo); }
.bad { color: var(--red-lo); }
.warn { color: var(--mustard-lo); }
.small { font-size: 0.85rem; }
.big-text { font-size: 1.3rem; }
.center { text-align: center; }
.right { text-align: right; }
.row { display: flex; gap: 0.4rem; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.col { display: flex; flex-direction: column; gap: 0.35rem; }
.grow { flex: 1 1 auto; min-width: 0; }
.spacer { flex: 1; }
.sep { height: calc(var(--px) * 2); background: var(--panel-lo); border-bottom: var(--px) solid var(--panel-hi); margin: 0.35rem 0; }

input[type=text], input[type=password], input[type=number], select, textarea {
  background: var(--paper);
  border: calc(var(--px) * 2) solid;
  border-color: var(--panel-lo) var(--panel-hi) var(--panel-hi) var(--panel-lo);
  padding: 0.15rem 0.35rem;
  font-size: 1.05rem;
  outline: none;
  user-select: text; -webkit-user-select: text;
  min-width: 0;
}
input:focus, select:focus, textarea:focus { background: #fffbe9; box-shadow: 0 0 0 var(--px) var(--teal); }

input[type=range] {
  -webkit-appearance: none; appearance: none;
  height: 0.8rem; background: transparent; width: 100%; cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 0.45rem; background: var(--panel-lo);
  border: var(--px) solid var(--outline);
}
input[type=range]::-moz-range-track { height: 0.45rem; background: var(--panel-lo); border: var(--px) solid var(--outline); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 0.8rem; height: 1.05rem; margin-top: -0.38rem;
  background: var(--mustard); border: var(--px) solid var(--outline);
  box-shadow: inset calc(var(--px) * -2) calc(var(--px) * -2) 0 var(--mustard-lo), inset calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--mustard-hi);
}
input[type=range]::-moz-range-thumb {
  width: 0.8rem; height: 1.05rem; border-radius: 0;
  background: var(--mustard); border: var(--px) solid var(--outline);
}

.check { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.check input { display: none; }
.check .box {
  width: 1rem; height: 1rem; background: var(--paper);
  border: calc(var(--px) * 2) solid; border-color: var(--panel-lo) var(--panel-hi) var(--panel-hi) var(--panel-lo);
  position: relative; flex: none;
}
.check input:checked + .box::after {
  content: ''; position: absolute; left: 0.18rem; top: 0.18rem; width: 0.45rem; height: 0.45rem; background: var(--teal-lo);
}

/* Fortschrittsbalken */
.bar {
  position: relative; height: 0.75rem; min-width: 3rem;
  background: #3d3326;
  border: var(--px) solid var(--outline);
  box-shadow: inset 0 calc(var(--px) * 2) 0 rgba(0,0,0,.35);
  overflow: hidden;
}
.bar > i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: var(--green);
  box-shadow: inset 0 calc(var(--px) * 2) 0 rgba(255,255,255,.35), inset 0 calc(var(--px) * -2) 0 rgba(0,0,0,.2);
  transition: width .25s steps(6);
}
.bar.red > i { background: var(--red); }
.bar.gold > i { background: var(--mustard); }
.bar.blue > i { background: var(--blue); }
.bar.teal > i { background: var(--teal); }
.bar > span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.75rem; text-shadow: var(--px) var(--px) 0 #000; line-height: 1;
}
.bar.tall { height: 1rem; }

.stars { color: var(--mustard-lo); letter-spacing: -0.05rem; white-space: nowrap; }
.stars .on { color: #e8a91d; text-shadow: var(--px) var(--px) 0 var(--mustard-lo); }
.stars .off { color: rgba(90, 70, 40, 0.35); }

.tag {
  display: inline-block; padding: 0 0.3rem; font-size: 0.85rem;
  background: var(--panel-mid); border: var(--px) solid var(--panel-lo);
}
.tag.teal { background: var(--teal-hi); border-color: var(--teal-lo); }
.tag.red { background: var(--red-hi); border-color: var(--red-lo); }
.tag.gold { background: var(--mustard-hi); border-color: var(--mustard-lo); }

.scroll { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--panel-lo) var(--panel-mid); }
.scroll::-webkit-scrollbar { width: 0.6rem; }
.scroll::-webkit-scrollbar-track { background: var(--panel-mid); }
.scroll::-webkit-scrollbar-thumb { background: var(--panel-lo); border: var(--px) solid var(--panel-deep); }

table.list { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
table.list th { text-align: left; font-weight: normal; color: var(--ink-soft); border-bottom: calc(var(--px) * 2) solid var(--panel-lo); padding: 0.1rem 0.3rem; position: sticky; top: 0; background: var(--panel-mid); }
table.list td { padding: 0.12rem 0.3rem; border-bottom: var(--px) solid rgba(122, 95, 58, 0.3); vertical-align: middle; }
table.list tr.clickable { cursor: pointer; }
table.list tr.clickable:hover td { background: rgba(255, 245, 218, 0.6); }
table.list tr.me td { background: rgba(127, 211, 195, 0.35); }
table.list td.num, table.list th.num { text-align: right; }
/* Personal-Tabelle: Name kürzt mit …, Gehalt und Knöpfe brechen nie um, notfalls scrollt die Tabelle */
.table-wrap { overflow-x: auto; max-width: 100%; scrollbar-width: thin; }
table.staff-table td.nm { width: 100%; max-width: 0; }
table.staff-table .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.staff-table td.num, table.staff-table th.num, table.staff-table td.act { white-space: nowrap; }
table.staff-table td.act .row { flex-wrap: nowrap; }
table.staff-table td .bar { min-width: 3.2rem; }

.tabs { display: flex; gap: 0.2rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.tab {
  padding: 0.15rem 0.55rem; cursor: pointer; font-size: 1rem;
  background: var(--panel-mid);
  border: calc(var(--px) * 2) solid; border-color: var(--panel-hi) var(--panel-lo) transparent var(--panel-hi);
  box-shadow: 0 0 0 var(--px) var(--outline);
  display: inline-flex; gap: 0.25rem; align-items: center;
}
.tab:hover { background: var(--panel-hi); }
.tab.active { background: var(--panel-hi); color: var(--ink); padding-bottom: 0.25rem; margin-bottom: -0.1rem; }
.tab .count { font-size: 0.8rem; color: var(--ink-soft); }

/* ------------------------------------------------------------------ Boot */
.boot {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #3b3956 0%, var(--night) 70%);
  z-index: 50;
}
.boot-box { padding: 1rem 2rem; text-align: center; min-width: 18rem; }
.boot-title { font-size: 2rem; margin: 0.4rem 0; }
.boot-text { color: var(--ink-soft); }
.boot-cross {
  width: 3rem; height: 3rem; margin: 0 auto; position: relative;
  animation: bootspin 1.2s steps(8) infinite;
}
.boot-cross::before, .boot-cross::after { content: ''; position: absolute; background: var(--red); box-shadow: 0 0 0 var(--px) var(--outline); }
.boot-cross::before { left: 1rem; top: 0; width: 1rem; height: 3rem; }
.boot-cross::after { left: 0; top: 1rem; width: 3rem; height: 1rem; }
@keyframes bootspin { to { transform: rotate(90deg); } }
.boot.error .boot-text { color: var(--red-lo); white-space: pre-wrap; text-align: left; font-size: 0.9rem; max-width: 40rem; }

/* ------------------------------------------------------------------ Tooltip & Toasts */
.tooltip {
  position: absolute; z-index: 90; pointer-events: none;
  max-width: 18rem; padding: 0.2rem 0.45rem;
  background: #fff6c7; color: var(--ink); font-size: 0.95rem;
  border: var(--px) solid var(--outline);
  box-shadow: calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--shadow);
  line-height: 1.05;
}
.tooltip b { font-weight: normal; color: var(--teal-lo); }

/* Toasts unten in der Mitte über Laufschrift und Werkzeugleiste: dort liegen keine Fenstertitel. */
#toast-layer {
  position: absolute; left: 50%; bottom: 7.4rem; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  z-index: 8; pointer-events: none; max-width: 60vw;
}
.toast .count { color: var(--ink-soft); }
#menu-layer:not(.hidden) ~ #toast-layer, #app:has(#hud-layer.hidden) #toast-layer { bottom: auto; top: 1rem; z-index: 80; }
.toast {
  padding: 0.25rem 0.8rem; font-size: 1.05rem; max-width: 32rem; text-align: center;
  background: var(--paper); border: calc(var(--px) * 2) solid var(--outline);
  box-shadow: calc(var(--px) * 3) calc(var(--px) * 3) 0 var(--shadow);
  animation: toastin .18s steps(3);
}
.toast.bad { background: #ffd8cf; border-color: var(--red-lo); }
.toast.good { background: #dcf4d4; border-color: var(--green-lo); }
.toast.warn { background: #fff0bf; border-color: var(--mustard-lo); }
.toast.out { animation: toastout .3s steps(3) forwards; }
@keyframes toastin { from { transform: translateY(-0.8rem); opacity: 0; } }
@keyframes toastout { to { transform: translateY(-0.8rem); opacity: 0; } }

/* ------------------------------------------------------------------ HUD oben */
.hud-top {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: stretch; gap: 0.25rem;
  padding: 0.2rem 0.3rem;
  background: var(--night-2);
  border-bottom: calc(var(--px) * 2) solid #17162a;
  box-shadow: 0 calc(var(--px) * 2) 0 var(--night-3) inset, 0 calc(var(--px) * 2) 0 rgba(0,0,0,.4);
  color: #f2e9d0;
  min-height: 2.2rem;
}
.hud-cell {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0 0.5rem;
  background: #1f1e2f;
  border: calc(var(--px) * 2) solid; border-color: #121120 var(--night-3) var(--night-3) #121120;
  font-size: 1.2rem; white-space: nowrap;
}
.hud-cell.clickable { cursor: pointer; }
.hud-cell.clickable:hover { background: #2b2a42; }
.hud-cell .lbl { color: #a9a2c4; font-size: 0.9rem; }
.hud-money .val { color: #9ff08a; min-width: 5.6rem; text-align: right; }
.hud-money.neg .val { color: #ff8d7a; }
.hud-money .loan { color: #ffb36b; font-size: 0.85rem; }
.hud-rep .bar { width: 6rem; }
.hud-date { min-width: 9.6rem; justify-content: center; }
.hud-speed { gap: 0.15rem; padding: 0 0.25rem; }
.hud-speed .btn { min-height: 1.45rem; padding: 0.05rem 0.35rem; font-size: 1rem; }
.hud-speed .btn.active { background: var(--mustard); }
.hud-counts .cured { color: #9ff08a; }
.hud-counts .died { color: #ff8d7a; }
.hud-level { color: #d8cfe9; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
.hud-menu .btn { min-height: 1.45rem; }

/* ------------------------------------------------------------------ HUD unten */
.hud-bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; gap: 0.3rem;
  padding: 0 0.3rem 0.3rem 0.3rem;
  pointer-events: none;
}
.hud-bottom > * { pointer-events: auto; }
.advisor {
  position: relative; flex: none;
  width: 5.4rem; height: 5.4rem;
  padding: 0.2rem;
  cursor: pointer;
}
.advisor canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; background: #8fb7c9; }
.advisor .name { position: absolute; left: 0; right: 0; bottom: -0.05rem; text-align: center; font-size: 0.7rem; color: #fff; text-shadow: var(--px) var(--px) 0 #000; }
.advisor-bubble {
  position: absolute; left: 0.4rem; bottom: 6rem;
  max-width: 28rem; min-width: 12rem;
  padding: 0.35rem 0.6rem; font-size: 1.05rem; line-height: 1.1;
  background: #fffdf2; border: calc(var(--px) * 2) solid var(--outline);
  box-shadow: calc(var(--px) * 3) calc(var(--px) * 3) 0 var(--shadow);
  pointer-events: auto; cursor: pointer;
  z-index: 5;
  animation: toastin .15s steps(3);
}
.advisor-bubble::after {
  content: ''; position: absolute; left: 1.6rem; bottom: -0.75rem;
  border: 0.35rem solid transparent; border-top: 0.45rem solid var(--outline);
}
.advisor-bubble .who { color: var(--teal-lo); font-size: 0.85rem; display: block; margin-bottom: 0.1rem; }
.advisor-bubble.warning { background: #fff3c4; }
.advisor-bubble.bad { background: #ffe0d8; }
.advisor-bubble.good { background: #e3f7da; }

.bottom-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.ticker {
  height: 1.45rem; overflow: hidden; position: relative;
  background: #121a12; color: #7cf06c;
  border: calc(var(--px) * 2) solid; border-color: #0a0f0a #3a4a3a #3a4a3a #0a0f0a;
  box-shadow: 0 0 0 var(--px) var(--outline);
  font-size: 1.05rem; cursor: pointer;
  text-shadow: 0 0 0.25rem rgba(124, 240, 108, 0.6);
}
.ticker .track { position: absolute; top: 0.08rem; white-space: nowrap; will-change: transform; }
.ticker .item { margin-right: 3rem; }
.ticker .item.bad { color: #ff8d7a; text-shadow: 0 0 0.25rem rgba(255, 141, 122, 0.6); }
.ticker .item.warning { color: #ffd66b; text-shadow: 0 0 0.25rem rgba(255, 214, 107, 0.6); }
.ticker .item.good { color: #b6ff9e; }
.ticker .item.pa { color: #8fd8ff; text-shadow: 0 0 0.25rem rgba(143, 216, 255, 0.6); }

.toolbar {
  display: flex; gap: 0.2rem; align-items: stretch; flex-wrap: nowrap;
  padding: 0.2rem; overflow-x: auto; scrollbar-width: none;
}
.toolbar::-webkit-scrollbar { display: none; }
.tool-btn {
  flex: 1 1 0; min-width: 3.6rem; max-width: 7rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
  padding: 0.2rem 0.08rem 0.1rem;
  background: var(--panel);
  border: calc(var(--px) * 2) solid; border-color: var(--panel-hi) var(--panel-lo) var(--panel-lo) var(--panel-hi);
  box-shadow: 0 0 0 var(--px) var(--outline);
  cursor: pointer; font-size: 0.85rem; line-height: 1; text-align: center;
  touch-action: manipulation;
  position: relative;
}
.tool-btn .pix { width: 1.6rem; height: 1.6rem; }
.tool-btn:hover { background: var(--panel-hi); }
.tool-btn.active { background: var(--mustard-hi); border-color: var(--panel-lo) var(--panel-hi) var(--panel-hi) var(--panel-lo); }
.tool-btn .key { position: absolute; right: 0.15rem; top: 0.05rem; font-size: 0.65rem; color: var(--ink-faint); }
.tool-btn .badge {
  position: absolute; right: -0.25rem; top: -0.35rem; min-width: 0.9rem; height: 0.9rem; padding: 0 0.15rem;
  background: var(--red); color: #fff; font-size: 0.75rem; line-height: 0.9rem; text-align: center;
  border: var(--px) solid var(--outline);
}

.minimap { flex: none; width: 9.5rem; height: 5.4rem; padding: 0.15rem; cursor: pointer; }
.minimap canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; background: #2d4a27; }

/* Werkzeug-Hinweisleiste */
.tool-hint {
  position: absolute; left: 50%; top: 2.8rem; transform: translateX(-50%);
  padding: 0.2rem 0.7rem; font-size: 1.05rem;
  background: rgba(38, 37, 55, 0.92); color: #f2e9d0;
  border: calc(var(--px) * 2) solid #121120;
  box-shadow: 0 0 0 var(--px) var(--night-3);
  white-space: nowrap; max-width: 95vw; overflow: hidden; text-overflow: ellipsis;
}
.tool-hint .ok { color: #9ff08a; }
.tool-hint .no { color: #ff8d7a; }
.tool-hint kbd { background: #4a4766; padding: 0 0.25rem; border: var(--px) solid #12111d; font-family: inherit; }

/* ------------------------------------------------------------------ Fenster */
.window {
  position: absolute; display: flex; flex-direction: column;
  max-height: calc(100% - 10rem); min-width: 14rem;
  z-index: 10;
}
.window.front { z-index: 11; }
.win-title {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.1rem 0.2rem 0.1rem 0.45rem;
  background: var(--teal); color: #fff;
  border-bottom: calc(var(--px) * 2) solid var(--teal-lo);
  box-shadow: inset 0 calc(var(--px) * 2) 0 var(--teal-hi);
  font-size: 1.15rem; cursor: grab; touch-action: none;
  text-shadow: var(--px) var(--px) 0 rgba(0,0,0,.4);
}
.window.info .win-title { background: var(--blue); border-bottom-color: var(--blue-lo); box-shadow: inset 0 calc(var(--px) * 2) 0 #8db6e6; }
.window.warn .win-title { background: var(--red); border-bottom-color: var(--red-lo); box-shadow: inset 0 calc(var(--px) * 2) 0 var(--red-hi); }
.win-title .pix { width: 1.1rem; height: 1.1rem; }
.win-title .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-close {
  width: 1.3rem; height: 1.3rem; padding: 0; min-height: 0; font-size: 1rem; line-height: 1;
  background: var(--red); color: #fff; border-color: var(--red-hi) var(--red-lo) var(--red-lo) var(--red-hi);
}
.win-body { padding: 0.45rem; overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 0; }
.win-foot { padding: 0.3rem 0.45rem; border-top: calc(var(--px) * 2) solid var(--panel-lo); display: flex; gap: 0.3rem; justify-content: flex-end; flex-wrap: wrap; }

/* Karten (Räume, Gegenstände, Bewerber) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.4rem; }
.card {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.35rem;
  background: var(--panel-hi);
  border: calc(var(--px) * 2) solid; border-color: #fffbee var(--panel-lo) var(--panel-lo) #fffbee;
  box-shadow: 0 0 0 var(--px) var(--panel-deep);
  cursor: pointer; position: relative;
}
.card:hover { background: #fffbe9; box-shadow: 0 0 0 var(--px) var(--teal-lo), 0 0 0 calc(var(--px) * 3) var(--teal-hi); }
.card.selected { box-shadow: 0 0 0 var(--px) var(--teal-lo), 0 0 0 calc(var(--px) * 3) var(--mustard); }
.card.locked { cursor: not-allowed; opacity: 0.55; filter: grayscale(0.8); }
.card.poor .cost { color: var(--red-lo); }
.card .head { display: flex; gap: 0.35rem; align-items: center; }
.card .icon { width: 3.2rem; height: 3.2rem; flex: none; background: #c8d6c0; border: var(--px) solid var(--panel-lo); }
.card .icon canvas { width: 100%; height: 100%; }
.card .name { font-size: 1.1rem; line-height: 1; }
.card .cost { color: var(--teal-lo); font-size: 1.05rem; }
.card .desc { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.05; }
.card .meta { font-size: 0.8rem; color: var(--ink-soft); display: flex; gap: 0.3rem; flex-wrap: wrap; }
.card .lock { position: absolute; right: 0.3rem; top: 0.2rem; }

.cand { display: grid; grid-template-columns: 4.2rem 1fr auto; gap: 0.45rem; align-items: start; padding: 0.35rem; background: var(--panel-hi); border: calc(var(--px) * 2) solid; border-color: #fffbee var(--panel-lo) var(--panel-lo) #fffbee; box-shadow: 0 0 0 var(--px) var(--panel-deep); }
.cand + .cand { margin-top: 0.35rem; }
.portrait { width: 4.2rem; height: 4.2rem; background: #8fb7c9; border: calc(var(--px) * 2) solid; border-color: var(--panel-lo) var(--panel-hi) var(--panel-hi) var(--panel-lo); }
.portrait canvas { width: 100%; height: 100%; }
.portrait.small { width: 2rem; height: 2rem; border-width: var(--px); }
.cand .nm { font-size: 1.15rem; }
.cand .traits { font-size: 0.85rem; color: var(--ink-soft); }
.cand .traits .plus::before { content: '+ '; color: var(--green-lo); }
.cand .traits .minus::before { content: '– '; color: var(--red-lo); }
.cand .side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
.cand .salary { font-size: 1.1rem; color: var(--teal-lo); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem; align-items: center; font-size: 1rem; }
.kv .k { color: var(--ink-soft); white-space: nowrap; }
.kv .v { min-width: 0; }

.needs { display: grid; grid-template-columns: 6.2rem 1fr; gap: 0.2rem 0.4rem; align-items: center; font-size: 0.95rem; }

.chart-box { background: #1e1d2c; border: calc(var(--px) * 2) solid; border-color: #12111d #4a4766 #4a4766 #12111d; }
.chart-box canvas { width: 100%; display: block; image-rendering: pixelated; }
.legend { display: flex; gap: 0.8rem; font-size: 0.85rem; flex-wrap: wrap; }
.legend i { display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.2rem; border: var(--px) solid var(--outline); vertical-align: -0.05rem; }

.goal { padding: 0.3rem 0.4rem; background: var(--panel-hi); border: var(--px) solid var(--panel-lo); }
.goal + .goal { margin-top: 0.3rem; }
.goal .row { justify-content: space-between; }
.goal.done { background: #e3f4da; }
.goal .check-mark { color: var(--green-lo); }

.slider-row { display: grid; grid-template-columns: 11rem 1fr 3.5rem; gap: 0.5rem; align-items: center; }
.slider-row .val { text-align: right; color: var(--teal-lo); }
.slider-row .help { grid-column: 1 / -1; font-size: 0.8rem; color: var(--ink-soft); margin-top: -0.2rem; }

.disease { padding: 0.35rem; background: var(--panel-hi); border: var(--px) solid var(--panel-lo); }
.disease + .disease { margin-top: 0.3rem; }
.disease.unknown { background: var(--panel-mid); color: var(--ink-soft); }
.disease .joke { font-size: 0.85rem; color: var(--ink-soft); font-style: italic; }
.disease .cure { display: flex; gap: 0.2rem; flex-wrap: wrap; align-items: center; font-size: 0.9rem; }

.log { font-size: 0.9rem; }
.log .entry { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.05rem 0.2rem; border-bottom: var(--px) dotted rgba(122, 95, 58, 0.4); }
.log .entry .amt.pos { color: var(--green-lo); }
.log .entry .amt.neg { color: var(--red-lo); }
.log .msg { padding: 0.1rem 0.2rem; border-left: calc(var(--px) * 3) solid var(--panel-lo); margin-bottom: 0.15rem; }
.log .msg.bad { border-left-color: var(--red); }
.log .msg.warning { border-left-color: var(--mustard); }
.log .msg.good { border-left-color: var(--green); }
.log .msg.pa { border-left-color: var(--blue); }
.log .msg .when { color: var(--ink-faint); font-size: 0.8rem; margin-right: 0.3rem; }

.plot-row { display: flex; gap: 0.5rem; align-items: center; padding: 0.3rem; background: var(--panel-hi); border: var(--px) solid var(--panel-lo); }
.plot-row + .plot-row { margin-top: 0.3rem; }
.plot-row.owned { background: #e3f4da; }
.plot-row .swatch { width: 1.2rem; height: 1.2rem; border: var(--px) solid var(--outline); flex: none; }

/* ------------------------------------------------------------------ Modal & Fax */
.modal-backdrop {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(16, 14, 26, 0.55);
  z-index: 60;
  animation: fadein .12s steps(2);
  padding: 1rem;
}
.modal-backdrop.clear { background: transparent; }
@keyframes fadein { from { opacity: 0; } }
.modal { max-width: min(36rem, 94vw); width: 100%; display: flex; flex-direction: column; max-height: 92vh; }
.modal.wide { max-width: min(54rem, 96vw); }
.modal .win-body { padding: 0.6rem 0.8rem; }

.fax {
  position: relative;
  width: min(34rem, 92vw);
  max-height: 90vh;
  display: flex; flex-direction: column;
  background: var(--paper);
  background-image: repeating-linear-gradient(0deg, transparent 0, transparent calc(1.25rem - 1px), var(--paper-line) calc(1.25rem - 1px), var(--paper-line) 1.25rem);
  color: #26221a;
  border: var(--px) solid var(--outline);
  box-shadow: calc(var(--px) * 4) calc(var(--px) * 4) 0 var(--shadow);
  padding: 0.9rem 1.2rem 0.8rem;
  animation: faxin .7s steps(14);
  transform-origin: top center;
}
.fax::before, .fax::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 0.55rem;
  background: repeating-linear-gradient(180deg, transparent 0, transparent 0.5rem, rgba(40, 30, 10, 0.25) 0.5rem, rgba(40, 30, 10, 0.25) 0.75rem);
}
.fax::before { left: 0.2rem; }
.fax::after { right: 0.2rem; }
@keyframes faxin { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
/* Rohrpost: gerollter Zettel mit Messingkapsel oben statt Endlospapier-Rand */
.fax.rohrpost { padding-top: 1.9rem; animation: rp-unroll .75s steps(12); }
.fax.rohrpost::before, .fax.rohrpost::after {
  top: 1.1rem; width: 0.7rem;
  background: linear-gradient(90deg, rgba(60, 45, 20, 0.28), rgba(60, 45, 20, 0) 100%);
}
.fax.rohrpost::after { background: linear-gradient(270deg, rgba(60, 45, 20, 0.28), rgba(60, 45, 20, 0) 100%); }
.rp-capsule {
  position: absolute; left: 50%; top: 0.15rem; transform: translateX(-50%);
  width: min(14rem, 60%); height: 1.35rem;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: linear-gradient(180deg, #f6d98a 0%, #d9a83c 38%, #a8771f 70%, #7c5410 100%);
  border: var(--px) solid #3a2a0a; border-radius: 0.85rem;
  box-shadow: calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--shadow);
  color: #3a2a0a; font-size: 0.85rem; letter-spacing: 0.05rem;
  animation: rp-drop .45s steps(6);
}
.rp-capsule .rp-band { width: 0.35rem; align-self: stretch; background: #6b4a12; border-left: var(--px) solid #3a2a0a; border-right: var(--px) solid #3a2a0a; }
.rp-capsule .rp-label { background: #fff3cf; padding: 0 0.35rem; border: var(--px) solid #3a2a0a; }
@keyframes rp-drop { from { transform: translate(-50%, -2.5rem); } to { transform: translate(-50%, 0); } }
@keyframes rp-unroll { 0% { clip-path: inset(0 0 100% 0); } 30% { clip-path: inset(0 0 92% 0); } 100% { clip-path: inset(0 0 0 0); } }
.fax-head { display: flex; justify-content: space-between; font-size: 0.85rem; color: #6b604a; border-bottom: calc(var(--px) * 2) solid #26221a; padding-bottom: 0.2rem; letter-spacing: 0.05rem; }
.fax-title { font-size: 1.9rem; margin: 0.5rem 0 0.3rem; text-transform: uppercase; letter-spacing: 0.08rem; }
.fax-body { font-size: 1.15rem; line-height: 1.25rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; white-space: pre-wrap; }
.fax-body .kv { font-size: 1.1rem; line-height: 1.25rem; white-space: normal; }
.fax-stamp {
  position: absolute; right: 1.4rem; top: 3.9rem; transform: rotate(-12deg);
  border: calc(var(--px) * 3) solid; padding: 0.1rem 0.6rem; font-size: 1.5rem; letter-spacing: 0.15rem;
  color: rgba(190, 40, 30, 0.75); border-color: rgba(190, 40, 30, 0.75);
  pointer-events: none;
}
.fax-stamp.good { color: rgba(40, 130, 60, 0.75); border-color: rgba(40, 130, 60, 0.75); }
.fax-stamp.blue { color: rgba(40, 80, 160, 0.7); border-color: rgba(40, 80, 160, 0.7); }
.fax-foot { display: flex; gap: 0.4rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 0.6rem; padding-top: 0.4rem; border-top: var(--px) dashed #8a7f66; }
.fax-sign { font-size: 0.95rem; color: #6b604a; margin-top: 0.4rem; }

/* ------------------------------------------------------------------ Menüs */
#menu-layer { background: var(--night); }
#menu-bg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#menu-root { position: absolute; inset: 0; display: flex; align-items: safe center; justify-content: safe center; padding: 1rem; overflow: auto; }

.title-screen { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; cursor: pointer; }
.logo {
  font-size: 4.6rem; line-height: 0.85; color: #fff3cf; letter-spacing: 0.1rem;
  text-shadow:
    0.15rem 0 0 var(--outline), -0.15rem 0 0 var(--outline), 0 0.15rem 0 var(--outline), 0 -0.15rem 0 var(--outline),
    0.3rem 0.3rem 0 var(--red), 0.45rem 0.45rem 0 var(--outline);
}
.logo .k2 { display: block; color: var(--mustard-hi); font-size: 5.6rem; animation: wobble 2.4s steps(6) infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg) translateY(-0.1rem); } }
.tagline { font-size: 1.5rem; color: #d7cfe9; text-shadow: var(--px) var(--px) 0 #000; }
.press-start { font-size: 1.6rem; color: #fff; animation: blink 1.1s steps(2) infinite; text-shadow: calc(var(--px)*2) calc(var(--px)*2) 0 #000; }
@keyframes blink { 50% { opacity: 0; } }
.menu-footer { position: absolute; left: 0.6rem; bottom: 0.4rem; font-size: 0.9rem; color: #a9a2c4; text-shadow: var(--px) var(--px) 0 #000; pointer-events: none; }
.menu-footer .online { color: #9ff08a; }
.menu-footer .offline { color: #ffd66b; }

.menu-panel { width: min(30rem, 94vw); padding: 0.8rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.5rem;
  max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.menu-panel > * { flex-shrink: 0; }
.menu-panel.wide { width: min(60rem, 96vw); }
.menu-panel.mid { width: min(44rem, 96vw); }
.menu-panel h2 { font-size: 2rem; text-align: center; margin-bottom: 0.2rem; }
.menu-panel h3 { font-size: 1.35rem; }
.menu-head { display: flex; align-items: center; gap: 0.6rem; }
.menu-head h2 { flex: 1; }
.menu-buttons { display: flex; flex-direction: column; gap: 0.45rem; }
.menu-buttons .btn { justify-content: flex-start; font-size: 1.45rem; min-height: 2.3rem; padding-left: 0.8rem; }
.menu-buttons .btn .pix { width: 1.5rem; height: 1.5rem; }
.menu-buttons .btn .sub { margin-left: auto; font-size: 0.9rem; color: var(--ink-soft); }
.menu-buttons .btn.primary .sub { color: #dff; }
.whoami { display: flex; align-items: center; gap: 0.5rem; justify-content: center; font-size: 1.1rem; color: var(--ink-soft); }
.swatch-dot { display: inline-block; width: 1rem; height: 1rem; border: var(--px) solid var(--outline); box-shadow: inset calc(var(--px)*-2) calc(var(--px)*-2) 0 rgba(0,0,0,.25); flex: none; }

.profile-list { display: flex; flex-direction: column; gap: 0.35rem; max-height: 52vh; padding: 0.35rem; }
.profile-item {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.5rem; cursor: pointer;
  background: var(--panel-hi); border: calc(var(--px) * 2) solid; border-color: #fffbee var(--panel-lo) var(--panel-lo) #fffbee;
  box-shadow: 0 0 0 var(--px) var(--panel-deep);
  font-size: 1.3rem;
}
.profile-item:hover { background: #fffbe9; box-shadow: 0 0 0 var(--px) var(--teal-lo), 0 0 0 calc(var(--px) * 3) var(--teal-hi); }
.profile-item .avatar { width: 2.2rem; height: 2.2rem; flex: none; border: calc(var(--px)*2) solid var(--outline); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem; text-shadow: var(--px) var(--px) 0 #000; }
.profile-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-item .meta { font-size: 0.85rem; color: var(--ink-soft); }
.profile-empty { text-align: center; color: var(--ink-soft); padding: 1rem; }

.color-pick { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.color-pick .c { width: 1.6rem; height: 1.6rem; border: calc(var(--px)*2) solid var(--outline); cursor: pointer; }
.color-pick .c.sel { box-shadow: 0 0 0 calc(var(--px) * 2) var(--panel-hi), 0 0 0 calc(var(--px) * 4) var(--outline); }

.form { display: flex; flex-direction: column; gap: 0.5rem; }
.form label { display: flex; flex-direction: column; gap: 0.15rem; font-size: 1rem; color: var(--ink-soft); }
.form .err { color: var(--red-lo); min-height: 1rem; font-size: 1rem; }

.campaign { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0.7rem; min-height: 0; flex: 1 1 auto; }
.campaign-map { position: relative; min-height: 18rem; }
.campaign-map canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; cursor: pointer; }
.level-list { display: none; }
.level-detail { display: flex; flex-direction: column; gap: 0.35rem; min-height: 0; }
.level-detail .intro { font-size: 1.02rem; line-height: 1.12; }
.level-detail .scrollbox { flex: 1 1 auto; min-height: 0; padding: 0.4rem 0.5rem; max-height: 46vh; }
.level-name { font-size: 1.8rem; }
.level-tag { color: var(--ink-soft); font-size: 1rem; }
.goal-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.goal-chips .tag { font-size: 0.95rem; }

.opt-group { display: flex; flex-direction: column; gap: 0.25rem; }
.opt-group .lbl { color: var(--ink-soft); }
.seg { display: flex; gap: 0.2rem; flex-wrap: wrap; }
.seg .btn { flex: 1 1 auto; }

.saves { display: flex; flex-direction: column; gap: 0.3rem; max-height: 58vh; padding: 0.35rem; }
.save-slot { display: grid; grid-template-columns: 2.3rem 1fr auto; gap: 0.5rem; align-items: center; padding: 0.3rem 0.45rem; background: var(--panel-hi); border: calc(var(--px) * 2) solid; border-color: #fffbee var(--panel-lo) var(--panel-lo) #fffbee; box-shadow: 0 0 0 var(--px) var(--panel-deep); }
.save-slot.empty { background: var(--panel-mid); color: var(--ink-soft); }
.save-slot .num { font-size: 1.6rem; text-align: center; color: var(--ink-soft); }
.save-slot .num .pix { width: 1.4rem; height: 1.4rem; vertical-align: middle; }
.save-slot .nm { font-size: 1.15rem; }
.save-slot .meta { font-size: 0.85rem; color: var(--ink-soft); }

.credits { text-align: center; font-size: 1.1rem; line-height: 1.25; max-height: 64vh; }
.credits h3 { color: var(--teal-lo); margin-top: 0.7rem; font-size: 1.3rem; }
.credits .fine { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.9rem; }

.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
.pin-pad .btn { font-size: 1.4rem; min-height: 2.1rem; }
.pin-display { text-align: center; font-size: 2rem; letter-spacing: 0.4rem; min-height: 2.2rem; background: var(--paper); }

/* ------------------------------------------------------------------ Kleine Bildschirme / Touch */
@media (max-width: 900px), (max-height: 560px) {
  .hud-level { display: none; }
  .hud-rep .bar { width: 4rem; }
  .hud-date { min-width: 0; }
  .minimap { display: none; }
  .tool-btn span.lbl { display: none; }
  .campaign { grid-template-columns: 1fr; }
  .logo { font-size: 3rem; }
  .logo .k2 { font-size: 3.6rem; }
}
@media (pointer: coarse) {
  .btn { min-height: 2rem; }
  .tool-btn { min-width: 3.2rem; }
}

.icon-box { flex: none; background: #c8d6c0; border: calc(var(--px) * 2) solid; border-color: var(--panel-lo) var(--panel-hi) var(--panel-hi) var(--panel-lo); }
.icon-box canvas { width: 100%; height: 100%; }
.hud-cell .pix { width: 1.05rem; height: 1.05rem; }
.hud-speed .btn .pix { width: auto; height: 0.85rem; }
.tool-hint { z-index: 20; }
.hud-top { z-index: 15; }
.hud-bottom { z-index: 12; }
.advisor-bubble { z-index: 9; }
.tagline { background: rgba(31, 29, 54, 0.6); padding: 0.1rem 0.6rem; }
.hud-level { justify-content: flex-start; }
.hud-level span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.advisor-bubble { max-width: 24rem; }

/* ------------------------------------------------------------------ Ersatzschrift
   Lädt „Kuddelpixel“ nicht (offline, Firmen-Proxy), ist die Ersatz-Monospace-Schrift deutlich
   breiter. main.js setzt dann html.no-pixel-font; Beschriftungen werden etwas kleiner und
   laufen nie über ihre Knöpfe hinaus. */
.tool-btn .lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.03em; }
.no-pixel-font body { letter-spacing: -0.02em; }
.no-pixel-font .tool-btn { font-size: 0.62rem; }
.no-pixel-font .tool-btn .key { font-size: 0.5rem; }
.no-pixel-font .hud-cell { font-size: 0.82rem; }
.no-pixel-font .hud-date { min-width: 8.6rem; }
.no-pixel-font .ticker, .no-pixel-font .advisor-bubble { font-size: 0.85rem; }
.no-pixel-font .win-body, .no-pixel-font .fax-body { font-size: 0.85rem; }
.no-pixel-font .advisor .name { font-size: 0.55rem; }

/* Faxkopf: langer Absender wird gekürzt statt umzubrechen */
.fax-head > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fax-head > span:last-child { flex: none; margin-left: 0.6rem; white-space: nowrap; }
/* Werkzeug-Hinweis blinkt bei ungültigem Klick kurz auf (statt eines zusätzlichen Fehler-Toasts) */
.tool-hint.flash { animation: hintflash .45s steps(3) 1; }
@keyframes hintflash { 0%, 66% { background: rgba(132, 38, 29, 0.95); } }

/* Eingeklappte Fenster (z. B. Gegenstände während des Platzierens): nur die Titelleiste */
.window.collapsed { width: auto !important; min-width: 0; }
.window.collapsed .win-body, .window.collapsed .win-foot { display: none; }
.window.collapsed .win-title { cursor: pointer; }

/* Ratgeber-Sprechblase: nach dem Lesen einzeilig, bei offenem Werkzeug/Fenster ausgeblendet */
.advisor-bubble.strip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 20rem; padding-top: 0.15rem; padding-bottom: 0.15rem; }
.advisor-bubble.strip .who { display: inline; margin-right: 0.4rem; }
.advisor-bubble.strip:hover { white-space: normal; max-width: 24rem; }
.advisor-bubble.suppressed { display: none; }

/* =====================================================================================
   Einweisung (tutorial.js): Karte unten rechts, Hervorhebungsrahmen und Pfeil
   ===================================================================================== */
.tut-card {
  position: absolute; right: 0.4rem; bottom: 6.4rem; z-index: 13;
  width: 22rem; max-width: calc(100vw - 0.8rem);
  display: flex; flex-direction: column;
  max-height: calc(100% - 9.6rem);
  animation: toastin .2s steps(3);
}
.tut-head {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.25rem 0.3rem 0.25rem 0.3rem;
  background: var(--mustard); border-bottom: calc(var(--px) * 2) solid var(--mustard-lo);
  box-shadow: inset 0 calc(var(--px) * 2) 0 var(--mustard-hi);
}
.tut-portrait { flex: none; width: 2.6rem; height: 2.6rem; border: calc(var(--px) * 2) solid var(--outline); background: #8fb7c9; }
.tut-portrait canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.tut-kicker { font-size: 0.8rem; color: #5a4210; }
.tut-title { font-size: 1.2rem; color: var(--ink); line-height: 1.05; }
.tut-min { flex: none; align-self: flex-start; min-width: 1.5rem; }
.tut-body { padding: 0.45rem 0.55rem 0.3rem; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.tut-text { font-size: 1.02rem; line-height: 1.15; }
.tut-sub { font-size: 0.95rem; line-height: 1.12; color: var(--teal-lo); background: rgba(127, 211, 195, 0.25); border-left: calc(var(--px) * 3) solid var(--teal); padding: 0.2rem 0.35rem; }
.tut-check { display: flex; gap: 0.5rem; flex-wrap: wrap; font-size: 0.95rem; color: var(--ink-soft); }
.tut-check .ok { color: var(--green-lo); }
.tut-praise { font-size: 1rem; line-height: 1.15; background: #e3f7da; border: calc(var(--px) * 2) solid var(--green); padding: 0.25rem 0.4rem; }
.tut-foot { display: flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.45rem; border-top: calc(var(--px) * 2) solid var(--panel-lo); }
.tut-card.praise .tut-head { background: var(--green); box-shadow: inset 0 calc(var(--px) * 2) 0 #9fff8a; border-bottom-color: var(--green-lo); }
.tut-card.praise .tut-kicker, .tut-card.praise .tut-title { color: #fff; text-shadow: var(--px) var(--px) 0 rgba(0,0,0,.35); }
.tut-card.min { width: auto; }
.tut-card.min .tut-body, .tut-card.min .tut-foot { display: none; }
.tut-card.min .tut-head { cursor: pointer; }
.tut-layer { position: absolute; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.tut-spot {
  position: absolute; pointer-events: none;
  border: calc(var(--px) * 3) solid var(--mustard-hi);
  box-shadow: 0 0 0 calc(var(--px) * 2) var(--outline), 0 0 1rem 0.2rem rgba(255, 224, 138, 0.75);
  animation: tutpulse 1s steps(4) infinite;
}
@keyframes tutpulse { 50% { border-color: #fff; box-shadow: 0 0 0 calc(var(--px) * 2) var(--outline), 0 0 1.4rem 0.45rem rgba(255, 224, 138, 0.95); } }
.tut-arrow { position: absolute; width: 0; height: 0; pointer-events: none; }
.tut-arrow i {
  position: absolute; left: -0.9rem; bottom: 0; width: 1.8rem; height: 2.2rem;
  background: var(--mustard-hi);
  clip-path: polygon(30% 0, 70% 0, 70% 55%, 100% 55%, 50% 100%, 0 55%, 30% 55%);
  filter: drop-shadow(0.1rem 0 0 var(--outline)) drop-shadow(-0.1rem 0 0 var(--outline)) drop-shadow(0 0.1rem 0 var(--outline)) drop-shadow(0 -0.1rem 0 var(--outline));
}
.tut-arrow.up i { bottom: auto; top: 0; transform: rotate(180deg); }

/* Werkzeug-Hinweis mit Knöpfen (Drehen, Fertig) – auch für Touch */
.tool-hint { display: flex; align-items: center; gap: 0.5rem; }
.tool-hint.hidden { display: none; }
.tool-hint .hint-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-hint .hint-btns { flex: none; display: flex; gap: 0.25rem; }
.tool-hint .hint-btns .btn { color: var(--ink); }
.tool-hint .hint-btns .btn.primary { color: #fff; }

/* Kurzhilfe-Knopf im HUD */
.hud-menu { gap: 0.25rem; padding: 0 0.25rem; }
.hud-help { min-width: 1.6rem; padding: 0.05rem 0.4rem; font-size: 1.05rem; min-height: 1.45rem; }

/* Kurzhilfe (F1) */
.qh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.6rem 1rem; }
.qh-sec h3 { margin: 0 0 0.25rem; color: var(--teal-lo); }
.qh-sec td:first-child { white-space: nowrap; width: 1%; }
.qh-first ol { margin: 0.1rem 0 0.3rem 1.2rem; padding: 0; line-height: 1.2; }
.qh-first li { margin-bottom: 0.15rem; }

/* Jahresempfang (Preisverleihung) */
.modal.awards { max-width: min(30rem, 94vw); }
.awards-body { display: flex; flex-direction: column; gap: 0.5rem; }
.stage-box { border: calc(var(--px) * 2) solid var(--outline); background: #2a1424; }
.awards-stage { width: 100%; display: block; image-rendering: pixelated; aspect-ratio: 360 / 150; }
.award-list { display: flex; flex-direction: column; gap: 0.3rem; }
.award { display: flex; gap: 0.5rem; align-items: center; padding: 0.3rem 0.4rem; background: var(--panel-hi); border: calc(var(--px) * 2) solid; border-color: #fffbee var(--panel-lo) var(--panel-lo) #fffbee; }
.award.bad { background: #f3e2d9; }
.award-icon { flex: none; width: 2.4rem; height: 3rem; background: #c8d6c0; border: var(--px) solid var(--panel-lo); }
.award.bad .award-icon { background: #d9c3b8; }
.award-icon canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.award-title { font-size: 1.15rem; }
.award.good .award-title { color: var(--teal-lo); }
.award.bad .award-title { color: var(--red-lo); }
.award-tags { display: flex; gap: 0.25rem; margin-top: 0.15rem; }
.award-sum { text-align: right; margin: 0; }

/* Landkreis-Rangliste (Statistik) */
.ranking h3 { margin: 0; }
.rank-table td:nth-child(2) { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.medal { display: inline-block; min-width: 1.05rem; text-align: center; border: var(--px) solid var(--outline); line-height: 1.05rem; }
.medal.gold { background: #f1c84b; }
.medal.silver { background: #d4d4dc; }
.medal.bronze { background: #d39a5e; }

.now-playing { min-height: 1em; }

/* ------------------------------------------------------------------ Touch & kleine Bildschirme
   Größere Trefferflächen für Finger; Layout für 1024×600 und Tablets im Querformat. */
@media (pointer: coarse) {
  .btn { min-height: 2.2rem; padding-left: 0.7rem; padding-right: 0.7rem; }
  .btn.small { min-height: 1.9rem; }
  .win-close { width: 2rem; height: 2rem; font-size: 1.3rem; }
  .win-title { min-height: 2.2rem; }
  .tab { padding: 0.35rem 0.7rem; }
  .tool-btn { min-width: 3.4rem; min-height: 3.3rem; }
  .hud-speed .btn { min-width: 2.1rem; min-height: 1.9rem; }
  .hud-menu .btn, .hud-help { min-height: 1.9rem; }
  .card { padding: 0.45rem; }
  .tool-hint { font-size: 0.95rem; padding: 0.25rem 0.5rem; }
  .advisor-bubble.strip { max-width: 16rem; }
  input[type=range] { min-height: 1.8rem; }
  .label.check, label.check { min-height: 1.8rem; }
}
@media (max-height: 640px) {
  .window { max-height: calc(100% - 8.6rem); }
  .tut-card { bottom: 5.6rem; max-height: calc(100% - 8.6rem); }
  .tut-text { font-size: 0.95rem; }
  .tut-sub { font-size: 0.88rem; }
}
@media (max-width: 1100px) {
  .tut-card { width: 19rem; }
  .hud-menu .lbl-menu { display: none; }
}
@media (max-width: 900px), (max-height: 560px) {
  .tut-card { width: 17rem; bottom: 4.9rem; }
  .tut-portrait { width: 2rem; height: 2rem; }
  .qh-grid { grid-template-columns: 1fr; }
}
.qh-chips { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; margin-top: 0.35rem; font-size: 0.9rem; }
.qh-chip kbd { font-family: inherit; background: var(--panel-hi); border: var(--px) solid var(--panel-lo); padding: 0 0.25rem; }
@media (max-height: 640px) {
  .awards-stage { max-height: 24vh; width: auto; margin: 0 auto; }
  .stage-box { display: flex; justify-content: center; }
}
/* Meldungs-Toasts liegen über Ratgeber-Sprechblase und Fenstern (sie fangen keine Klicks ab) */
#toast-layer { z-index: 14; }

/* Ereignis-Knopf unter der oberen Leiste (Impfaktion während einer Epidemie) */
.hud-alerts { position: absolute; right: 0.4rem; top: 2.9rem; z-index: 14; display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; pointer-events: none; }
.hud-alerts > * { pointer-events: auto; }
.hud-alert { font-size: 1rem; max-width: min(26rem, 70vw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: tutpulse-btn 1.2s steps(2) infinite; }
.hud-alert.hidden { display: none; }
@keyframes tutpulse-btn { 50% { filter: brightness(1.18); } }

/* Levelname im HUD: bis 1366 px Breite nur „Level n“ (voller Name im Tooltip) */
.hud-level .lvl-short { display: none; }
@media (max-width: 1366px) {
  .hud-level .lvl-full { display: none; }
  .hud-level .lvl-short { display: inline; }
}

/* ------------------------------------------------------------------ Handy hochkant
   Die obere Leiste bricht in zwei Zeilen um (Geschwindigkeit und Zähler in Zeile 2),
   die Rufleiste zeigt nur die Zahl, die Werkzeugleiste lässt sich seitlich wischen. */
@media (orientation: portrait) and (max-width: 600px) {
  .hud-top { flex-wrap: wrap; row-gap: 0.2rem; }
  .hud-cell { font-size: 1rem; padding: 0 0.35rem; }
  .hud-rep .bar { display: none; }
  .hud-money .val { min-width: 0; }
  .hud-money .loan { display: none; }
  .hud-date { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  .hud-date span { overflow: hidden; text-overflow: ellipsis; }
  .hud-speed { order: 10; flex: 1 1 auto; justify-content: center; }
  .hud-counts { order: 11; }
  .tool-hint { top: 5.4rem; max-width: calc(100vw - 0.8rem); }
  .tool-hint .hint-text { white-space: normal; }
  .hud-alerts { top: 5.4rem; }
  .window { max-height: calc(100% - 12.5rem); max-width: calc(100vw - 0.6rem); }
  .hud-bottom { gap: 0.2rem; }
  .advisor { width: 3.6rem; height: 3.6rem; }
  .advisor-bubble { bottom: 6.4rem; max-width: calc(100vw - 1rem); }
  .toolbar { overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .tool-btn { flex: 0 0 auto; min-width: 3.3rem; scroll-snap-align: start; }
  .tut-card { left: 0.4rem; right: 0.4rem; width: auto; bottom: 4.6rem; max-height: calc(100% - 11rem); }
  #toast-layer { max-width: 92vw; bottom: auto; top: 5.6rem; }
}

/* Handy quer und andere niedrige Bildschirme: Einweisungskarte bleibt unter der Werkzeug-Hinweisleiste */
@media (max-height: 560px) {
  .tut-card { max-height: calc(100% - 10.4rem); }
  /* Kampagne: Karte und Leveldaten nebeneinander, Karte gedeckelt, „Starten“ immer sichtbar */
  .campaign { grid-template-columns: 1fr 1fr; }
  .campaign-map { min-height: 0; max-height: 58vh; aspect-ratio: 320 / 220; margin: 0 auto; width: 100%; }
  .campaign-map canvas { object-fit: contain; }
  .level-detail .scrollbox { max-height: 38vh; }
  .level-detail > .row.between:last-child { position: sticky; bottom: 0; background: var(--panel); padding: 0.2rem 0; z-index: 2; }
}

/* Meldungs-Toasts nicht über die Ratgeber-Sprechblase (die liegt links unten), sondern rechts darüber */
@media (max-width: 1100px) {
  #toast-layer { left: auto; right: 0.6rem; transform: none; align-items: flex-end; max-width: min(60vw, 26rem); }
}