* { box-sizing: border-box; margin: 0; padding: 0; }
.hidden { display: none !important; }

:root {
  --bg: #f6f7f4;
  --panel: #ffffff;
  --border: #dfe3d8;
  --border-strong: #c8cfbf;
  --text: #172015;
  --muted: #5d6957;
  --faint: #98a291;
  --hover: #eef1ea;
  --accent: #b45309;
  --p1: #3b82f6;
  --p2: #ef4444;
  --ok: #16a34a;
  --danger: #dc2626;
  --primary: #2f6d3b;
  --primary-soft: #e6f0e5;
  --on-primary: #ffffff;
  --on-primary-sub: #cfe3cf;
  --primary-hover: #275c32;
  --primary-active: #1f4a28;
  --glass: rgba(255, 255, 255, 0.92);
  --gold-bg: #fffbeb;
  color-scheme: light;
}

/* Dunkler Modus: folgt dem System, außer im Menü ist „Hell“ oder „Dunkel“ gewählt. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111813; --panel: #18221a; --border: #273428; --border-strong: #364737;
    --text: #e8eee6; --muted: #9fb09b; --faint: #6f806c; --hover: #1f2b21;
    --accent: #f59e0b; --ok: #4ade80; --danger: #f87171;
    --primary: #5fae6c; --primary-soft: #1f3322; --on-primary: #0e150f; --on-primary-sub: #2b4a30; --primary-hover: #74c081; --primary-active: #4f9a5c;
    --glass: rgba(24, 34, 26, 0.92); --gold-bg: #2a2412;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111813; --panel: #18221a; --border: #273428; --border-strong: #364737;
  --text: #e8eee6; --muted: #9fb09b; --faint: #6f806c; --hover: #1f2b21;
  --accent: #f59e0b; --ok: #4ade80; --danger: #f87171;
  --primary: #5fae6c; --primary-soft: #1f3322; --on-primary: #0e150f; --on-primary-sub: #2b4a30; --primary-hover: #74c081; --primary-active: #4f9a5c;
  --glass: rgba(24, 34, 26, 0.92); --gold-bg: #2a2412;
  color-scheme: dark;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

button:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 1px;
}

#topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  z-index: 20;
}

.brand {
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Immer einzeilig: bei vielen Stämmen horizontal wischen statt umbrechen. */
#player-strip {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x;
}
#player-strip::-webkit-scrollbar { display: none; }

.chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  background: var(--panel);
  font-size: 13px;
  color: var(--muted);
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
  flex: none;
}
.chip.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--text);
}
.chip.dead { background: var(--bg); opacity: 0.6; }
.chip.dead .dot { filter: grayscale(1); }
.chip.dead .dead-name { text-decoration: line-through; color: var(--muted); }
.chip .dead-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #b91c1c; }
.chip .dot { width: 10px; height: 10px; flex: none; }
.chip .stars { color: var(--accent); font-weight: 600; }
.chip .meta { color: var(--muted); font-size: 12px; }

#status {
  font-size: 13px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.top-actions { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
#round-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  padding: 5px 11px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
}

.btn {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  min-height: 38px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover:not(:disabled) { background: var(--hover); border-color: var(--border-strong); }
.btn:active:not(:disabled) { background: var(--border); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn:disabled:hover { background: var(--panel); border-color: var(--border); }
.btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.btn.primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.primary:active:not(:disabled) { background: var(--primary-active); border-color: var(--primary-active); }
.btn.primary:disabled {
  background: var(--hover);
  border-color: var(--border);
  color: var(--faint);
  opacity: 1;
}
.btn.primary:disabled:hover { background: var(--hover); border-color: var(--border); }
#endTurnBtn {
  min-width: 140px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
@media (max-width: 720px) {
  #endTurnBtn { min-width: 0; }
}
.btn.ghost { background: transparent; border-color: transparent; color: var(--text); }
.btn.ghost:hover { background: var(--hover); border-color: transparent; }
.btn.small { padding: 6px 10px; font-size: 13px; }
.btn.big { padding: 14px 20px; font-size: 16px; width: 100%; text-align: left; }
.btn.danger {
  background: var(--panel);
  border-color: #fecaca;
  color: var(--danger);
}
.btn.danger:hover { background: #fef2f2; border-color: #fca5a5; }

@media (hover: none) {
  .btn { min-height: 44px; }
  .btn:hover:not(:disabled) { background: var(--panel); border-color: var(--border); }
  .btn.primary:hover:not(:disabled) { background: var(--primary); border-color: var(--primary); }
  .btn.ghost:hover { background: transparent; border-color: transparent; }
}

#stage {
  position: fixed;
  inset: 54px 0 0 0;
}
#gameCanvas { display: block; width: 100%; height: 100%; touch-action: none; }

#menuBtn { position: absolute; top: 12px; right: 12px; z-index: 10; }

#toast-area {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 15;
  pointer-events: none;
}
.toast {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
  animation: toast-in 0.2s ease;
}
.toast.warn { border-color: #fecaca; color: var(--danger); }
.toast.good { border-color: #bbf7d0; color: #15803d; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

#panel {
  position: absolute;
  left: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: 320px;
  max-width: calc(100vw - 28px);
  max-height: 55vh;
  max-height: 55dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 12;
  animation: panel-in 0.18s ease;
}
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } }
#panel.hidden { display: none; }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.panel-title { font-size: 15px; font-weight: 700; }
.panel-sub { font-size: 12px; color: var(--muted); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0;
}
.stat {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 6px 4px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat b { display: block; font-size: 15px; color: var(--text); margin-top: 2px; }

.ability-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.hp-bar {
  height: 8px;
  background: var(--border);
  overflow: hidden;
  margin: 6px 0 10px;
}
.hp-bar > div { height: 100%; background: var(--ok); transition: width 0.25s; }
.hp-bar.low > div { background: var(--p2); }

.action-list { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
}
.action .cost { color: var(--accent); font-weight: 700; white-space: nowrap; }
.action .sub { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.action:disabled .sub { color: var(--faint); }

.hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.45;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(24, 24, 27, 0.55);
  display: flex;
  /* flex-start + margin:auto statt center: zentriert, schneidet aber bei
     hohen Karten oben nichts ab (sonst ist der Anfang nicht erreichbar). */
  align-items: flex-start;
  justify-content: center;
  z-index: 50;
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.overlay > .card { margin: auto; flex: none; }
.overlay.hidden { display: none; }
.name-extra { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 8px; }
.name-extra.hidden { display: none; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 30px;
  width: min(560px, 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  animation: panel-in 0.22s ease;
}
.card.narrow { width: min(420px, 100%); text-align: center; }
.card h1 { font-size: 30px; margin-bottom: 6px; letter-spacing: -0.03em; }
.card h2 { font-size: 20px; letter-spacing: -0.02em; }
.tagline { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
.footnote { color: var(--muted); font-size: 12px; margin-top: 16px; text-align: center; }

.menu-buttons { display: flex; flex-direction: column; gap: 10px; }

.tribe-pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  padding: 2px 2px 10px;
}
.tribe-opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
}
.tribe-opt:hover { background: var(--hover); border-color: var(--border-strong); }
.tribe-opt.active { border-color: var(--primary); background: var(--primary-soft); }
.tribe-opt .tribe-name { font-weight: 700; }
.tribe-opt .tribe-name .dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: middle; }
.tribe-opt .tribe-tech { font-size: 12px; color: var(--muted); line-height: 1.4; }

.menu-section {
  margin-top: 18px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.menu-section > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  min-height: 46px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  -webkit-tap-highlight-color: transparent;
}
.menu-section > summary::-webkit-details-marker { display: none; }
.menu-section > summary::after {
  content: '▾';
  margin-left: auto;
  color: var(--faint);
  transition: transform 0.15s;
}
.menu-section[open] > summary::after { transform: rotate(180deg); }
.menu-section > .menu-body { padding: 2px 14px 16px; }
.menu-section .menu-body > ul { list-style: none; margin: 0; }
.menu-section .menu-body li { margin-bottom: 6px; padding-left: 14px; position: relative; }
.menu-section .menu-body li::before { content: '▸'; position: absolute; left: 0; color: var(--faint); }
.menu-section .menu-body b { color: var(--text); }
.menu-section .menu-body { font-size: 13px; line-height: 1.55; color: var(--muted); }

.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.card-head h2 { flex: 1; }
.stars { color: var(--accent); font-weight: 700; }

#tech-overlay .card {
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  width: min(1060px, 96vw);
}
#tech-list { display: flex; flex-direction: column; gap: 8px; overflow: hidden; flex: 1; }
#tech-stars { white-space: nowrap; }

#tech-tree {
  position: relative;
  width: 100%;
  height: min(46vh, 420px);
  height: min(46dvh, 420px);
  min-height: 240px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 40%, var(--bg) 80%),
    var(--bg);
  border: 1px solid var(--border);
  cursor: grab;
  touch-action: none;
}
#tech-tree.grabbing { cursor: grabbing; }
#tech-viewport { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
#tech-lines { position: absolute; inset: 0; pointer-events: none; }
#tech-nodes { position: absolute; inset: 0; }
/* Wabenbaum: Sechseck-Knoten wie die Spielfelder. Der äußere Teil ist der
   Rahmen (Zweigfarbe), der innere die Fläche. */
.tech-hex {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 92px;
  height: 104px;
  padding: 3px;
  border: 0;
  background: var(--branch);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, opacity 0.15s;
}
.tech-hex .tn-in {
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--panel);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 8px;
}
.tech-hex .tn-name { font-size: 11px; font-weight: 700; text-align: center; line-height: 1.15; }
.tech-hex .tn-cost { font-size: 10px; font-weight: 700; color: var(--accent); }
.tech-hex:hover { transform: translate(-50%, -50%) scale(1.06); }
.tech-hex.done .tn-in { background: var(--branch); color: #fff; }
.tech-hex.done .tn-cost { color: #fff; }
.tech-hex.poor .tn-cost { color: #b91c1c; }
.tech-hex.locked { background: var(--border-strong); }
.tech-hex.locked .tn-in { background: var(--hover); color: var(--muted); }
.tech-hex.locked .tn-cost { color: var(--muted); }
.tech-hex.selected { background: var(--primary); padding: 5px; transform: translate(-50%, -50%) scale(1.08); }

#tech-detail {
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 96px;
}
#tech-detail .td-head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
#tech-detail .td-dot { width: 12px; height: 12px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
#tech-detail .td-tier { margin-left: auto; font-size: 12px; color: var(--muted); }
#tech-detail .td-desc { font-size: 13px; }
#tech-detail .td-unlock { font-size: 12px; color: var(--muted); }
#tech-detail .td-buy { align-self: flex-start; }

.forecast-list { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.forecast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 6px 10px;
}
.forecast b { color: var(--p2); white-space: nowrap; font-weight: 700; }
.forecast b.lethal { color: var(--ok); }
.forecast .fc-hp { color: var(--muted); }

.tile-grid { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.tile-chip {
  font-size: 11px;
  padding: 4px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
}
.tile-chip.res { color: var(--accent); border-color: #fde68a; background: #fffbeb; }
.tile-chip.built { color: var(--text); border-color: var(--border-strong); background: var(--panel); font-weight: 600; }

.build-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}
.build-tile { font-size: 12px; color: var(--muted); min-width: 88px; }
.build-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.btn.chip-btn { padding: 5px 10px; font-size: 12px; }
.btn.chip-btn.disabled { opacity: 0.45; }
.btn.chip-btn .cost { color: var(--accent); font-weight: 700; }

#winner-title { color: var(--text); }
#winner-text { color: var(--muted); margin: 10px 0 24px; }

/* Touch & neue Panels */
.panel-head-right { display: flex; align-items: center; gap: 10px; }
.panel-close { min-height: 30px; padding: 4px 10px; font-size: 12px; }
.ability {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  min-height: 30px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ability:active { background: var(--border); }
.ability { color: var(--muted); }

@media (hover: none) {
  .ability { min-height: 44px; }
  .tech-hex:hover:not(.selected) { transform: translate(-50%, -50%); }
  .btn.chip-btn { min-height: 40px; }
  .action { min-height: 48px; }
  #techBtn, #overviewBtn, #menuBtn { min-height: 44px; }
}

.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.setting-label { font-size: 14px; color: var(--muted); font-weight: 600; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg .chip-btn { border: 1px solid var(--border); padding: 6px 11px; font-size: 12px; background: var(--panel); color: var(--text); font-family: inherit; cursor: pointer; }
.seg .chip-btn.active { border-color: var(--primary); background: var(--primary-soft); color: var(--text); }

#overview-overlay .card { max-width: 520px; max-height: 86vh; max-height: 86dvh; overflow-y: auto; touch-action: pan-y; }
#confirm-overlay .card.narrow { text-align: center; }
.confirm-text { margin: 6px 0 18px; font-size: 15px; color: var(--text); line-height: 1.45; }
.overview-row { display: flex; align-items: center; width: 100%; text-align: left; }
.overview-row.dimmed { opacity: 0.55; }
.overview-stat { margin-bottom: 4px; }
.overview-stat .panel-head { margin-bottom: 8px; }

#tech-overlay .card { max-height: 92vh; max-height: 92dvh; overflow-y: auto; }

/* Tablets (iPad hoch, kleine Laptops): Zusatzinfos ausblenden, damit die
   Leiste einzeilig bleibt und „Zug beenden" sichtbar ist. */
@media (max-width: 1100px) {
  #status { display: none; }
  .chip .meta { display: none; }
  #topbar { gap: 10px; }
}
@media (max-width: 900px) {
  #round-label { display: none; }
  #endTurnBtn { min-width: 0; }
  .top-actions { gap: 4px; }
}

@media (max-width: 750px) {
  .card { padding: 18px 14px; }
  .card h1 { font-size: 24px; }
  .tagline { margin-bottom: 14px; font-size: 13px; }
  .menu-section > summary { padding: 11px 12px; }
  .menu-section > .menu-body { padding: 2px 12px 14px; }
  #menu-overlay .card { min-height: 0; }
}

@media (max-width: 760px) {
  #status, #round-label { display: none; }
  .brand { font-size: 14px; }
  #topbar { gap: 8px; padding: 0 8px; }
  .chip { padding: 4px 8px; font-size: 12px; flex: none; }
  .chip .meta { display: none; }
  .btn { padding: 8px 10px; font-size: 13px; }
  #panel {
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-height: 44vh;
    max-height: 44dvh;
  }
  .card { padding: 22px; }
}

/* Belohnungen, Übergabe, Endstatistik */
.overlay.solid { background: var(--bg); }
.card.narrow.wide { width: min(600px, 100%); }
.reward-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.reward-opt .sub { font-size: 12px; font-weight: 400; color: var(--muted); }
.btn.primary.reward-opt .sub { color: var(--on-primary-sub); }
.level-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.level-chip { font-size: 11px; padding: 4px 8px; border: 1px solid var(--border-strong); background: var(--panel); color: var(--text); font-weight: 600; }
.chip .pts { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.stats-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 4px 0 16px; text-align: left; font-variant-numeric: tabular-nums; }
.stats-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; padding: 6px 6px; border-bottom: 1px solid var(--border); }
.stats-table td { padding: 7px 6px; border-bottom: 1px solid var(--border); color: var(--text); }
.stats-table td.num, .stats-table th.num { text-align: right; }
.stats-table .dot { display: inline-block; width: 9px; height: 9px; margin-right: 7px; vertical-align: middle; }
.stats-table tr.me td { font-weight: 700; }
.stats-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.score-chart { width: 100%; height: auto; display: block; margin-bottom: 18px; border: 1px solid var(--border); background: var(--bg); }
.chart-cap { font-size: 12px; color: var(--muted); text-align: left; margin-bottom: 6px; }

/* Hinweis auf Einheiten, die noch handeln können */
.idle-btn { color: #a16207; border-color: #facc15; background: #fefce8; }
.idle-btn:hover { background: #fef9c3; }
.idle-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #facc15; margin-right: 6px; vertical-align: middle; }
.panel .todo { color: #a16207; }

/* Ton-Knopf neben dem Menü */
#soundBtn { position: absolute; top: 12px; right: 84px; z-index: 10; }
@media (hover: none) { #soundBtn { min-height: 44px; right: 96px; } }

/* Minikarte unten rechts */
#minimap {
  position: absolute; right: 12px; bottom: 12px; z-index: 9;
  width: 220px; height: 150px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  cursor: pointer; touch-action: none;
}
/* Schmal: unter den Menü-Knöpfen, damit das Panel unten sie nicht verdeckt */
@media (max-width: 760px) { #minimap { width: 140px; height: 96px; top: 64px; bottom: auto; right: 8px; } }

/* Diplomatie in der Übersicht */
.dip-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.dip-row .dip-name { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.dip-row .dip-state { font-size: 12px; color: var(--muted, #71717a); }
.dip-row .dip-state.peace { color: #15803d; }
.dip-row .btn { padding: 6px 10px; font-size: 12px; }
.tribe-perk { display: block; font-size: 11px; color: #a16207; margin-top: 2px; }
.vet-badge { color: #a16207; font-weight: 700; }

/* Schmale Bildschirme: Bereit nur als Punkt + Zahl */
@media (max-width: 760px) {
  .top-actions .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  #idleBtn { padding: 8px 9px; }
}
/* Sehr schmal (Handy hochkant): Schriftzug weglassen, damit „Zug beenden“ passt */
@media (max-width: 480px) {
  .brand { display: none; }
}

/* Kamera-Steuerung links neben der Minikarte */
#camera-pad {
  position: absolute; right: 244px; bottom: 12px; z-index: 9;
  display: grid; grid-template-columns: repeat(3, 36px); gap: 4px;
}
.cam-btn {
  width: 36px; height: 36px; border: 1px solid var(--border);
  background: var(--glass); font-size: 16px; font-weight: 700; color: var(--text);
  cursor: pointer; touch-action: manipulation;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.cam-btn:hover { background: var(--panel); }
@media (max-width: 760px) {
  #camera-pad { right: 8px; top: 168px; bottom: auto; grid-template-columns: repeat(3, 40px); }
  .cam-btn { width: 40px; height: 40px; }
}

#soundBtn { display: inline-flex; align-items: center; justify-content: center; }

/* Kleine Leiste der gewählten Einheit (Info-Menü erst bei erneutem Antippen) */
#unit-chip {
  position: absolute; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 12;
  display: flex; align-items: center; gap: 10px; max-width: min(440px, calc(100vw - 28px));
  background: var(--panel); border: 1px solid var(--border); padding: 8px 10px 8px 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
#unit-chip.hidden { display: none; }
#unit-chip .uc-main { display: flex; flex-direction: column; min-width: 0; }
#unit-chip .uc-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#unit-chip .dot { flex: none; width: 10px; height: 10px; }
#unit-chip [data-details] { flex: none; margin-left: auto; }
@media (max-width: 760px) {
  #unit-chip { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); max-width: none; }
}

/* Kleine Inline-Symbole (Stern, Haken) */
.ico { display: inline-block; vertical-align: -1px; }
.vet-badge .ico, .uc-main .ico, .tribe-perk .ico { color: #ca8a04; }

/* Monumente in der Übersicht */
.monument-list { display: grid; gap: 6px; margin-bottom: 8px; }
.monument { display: grid; grid-template-columns: 12px 1fr; column-gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--border); opacity: 0.7; }
.monument .sub { grid-column: 2; font-size: 12px; color: var(--muted, #71717a); }
.monument.ready { opacity: 1; border-color: #f59e0b; }
.monument.done { opacity: 1; background: rgba(34, 197, 94, 0.08); }
.mon-dot { width: 12px; height: 12px; border-radius: 50%; }

/* Rückblick: was seit dem letzten eigenen Zug passiert ist */
#news {
  position: absolute; left: 12px; top: 64px; z-index: 30; width: min(340px, calc(100% - 24px));
  background: var(--panel); border: 1px solid var(--border); border-left: 4px solid #dc2626;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); padding: 10px 12px; font-size: 14px;
}
#news h3 { margin: 0 0 6px; font-size: 14px; }
#news ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
#news li button { all: unset; cursor: pointer; display: block; width: 100%; padding: 3px 4px; }
#news li button:hover, #news li button:focus-visible { background: var(--hover); }
#news .news-more { color: var(--muted); font-size: 12px; }
@media (max-width: 760px) { #news { top: 108px; left: 8px; width: calc(100% - 16px); } }

/* Tutorial-Karte */
#tutor {
  position: absolute; left: 50%; transform: translateX(-50%); top: 64px; z-index: 31;
  width: min(460px, calc(100% - 24px)); background: #1d2a1f; color: #f3f6f1;
 padding: 12px 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); font-size: 14px; line-height: 1.45;
}
#tutor .tu-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 12px; color: #a1a1aa; }
#tutor .tu-text { margin: 0 0 10px; }
#tutor .tu-bar { height: 4px; background: #34463a; overflow: hidden; margin-bottom: 10px; }
#tutor .tu-bar div { height: 100%; background: #facc15; }
#tutor .tu-btns { display: flex; gap: 8px; justify-content: flex-end; }
#tutor .btn { background: #26372a; color: #f3f6f1; border-color: #3c5240; }
#tutor .btn.primary { background: #facc15; color: #172015; border-color: #facc15; }
@media (max-width: 760px) { #tutor { top: auto; bottom: 120px; } }
/* Tutorial im Fenster (Forschung, Ausbauen, Übersicht): Leiste unter dem Kopf */
.tu-inline { background: #1d2a1f; color: #f3f6f1; padding: 8px 12px; margin: 0 0 8px; font-size: 13px; line-height: 1.4; }
.tu-inline .tu-head { font-size: 11px; color: #a1a1aa; margin-bottom: 3px; }
.tu-inline .tu-bar { height: 3px; background: #34463a; overflow: hidden; margin-bottom: 6px; }
.tu-inline .tu-bar div { height: 100%; background: #facc15; }
.tu-inline .tu-text { margin: 0 0 6px; }
.tu-inline .tu-btns { display: flex; gap: 8px; justify-content: flex-end; }
.tu-inline .btn { background: #26372a; color: #f3f6f1; border-color: #3c5240; }
.tu-inline .btn.primary { background: #facc15; color: #172015; border-color: #facc15; }
/* Handy quer: Karte schmal links, Leiste im Fenster einzeilig */
/* Seitenleiste links neben der Karte (alles außer Handy hochkant) */
#tutor.tu-side { left: max(12px, env(safe-area-inset-left, 0px)); transform: none; width: min(280px, 30vw); overflow-y: auto; }
#tutor.tu-side .tu-btns { flex-wrap: wrap; }
html.phone #tutor.tu-side { left: max(8px, env(safe-area-inset-left, 0px)); width: min(260px, 38vw); padding: 8px 10px; font-size: 12px; line-height: 1.35; }
html.phone #tutor.tu-side .tu-head { font-size: 11px; margin-bottom: 2px; }
html.phone #tutor.tu-side .tu-bar { margin-bottom: 6px; }
html.phone #tutor.tu-side .tu-text { margin-bottom: 6px; }
html.phone #tutor.tu-side .btn { min-height: 34px; padding: 4px 10px; }
@media (orientation: landscape) {
  html.phone .tu-inline { display: flex; align-items: center; gap: 8px; padding: 4px 8px; margin-bottom: 4px; font-size: 12px; }
  html.phone .tu-inline .tu-head, html.phone .tu-inline .tu-bar { display: none; }
  html.phone .tu-inline .tu-text { margin: 0; flex: 1; }
  html.phone .tu-inline .btn { min-height: 32px; padding: 2px 8px; white-space: nowrap; }
}
/* Hervorgehobener Knopf: gelber, pulsierender Rahmen */
.tu-focus { outline: 3px solid #facc15 !important; outline-offset: 2px; animation: tu-pulse 1.1s ease-in-out infinite; }
@keyframes tu-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.7); } 50% { box-shadow: 0 0 0 7px rgba(250, 204, 21, 0); } }
@media (prefers-reduced-motion: reduce) { .tu-focus { animation: none; } }
/* Lern-Tabs */
.learn-card { width: min(560px, 100%); }
.learn-tabs { flex-wrap: wrap; }
.learn-tabs .ov-tab { display: inline-flex; align-items: center; gap: 4px; }
.learn-done { color: var(--ok); display: inline-flex; }
.learn-pane h3 { margin: 2px 0 6px; font-size: 20px; }
.learn-kicker { margin: 0; font-size: 12px; color: var(--muted); }
.learn-sub { margin: 10px 0 4px; font-weight: 700; }
.learn-list { margin: 0 0 10px; padding-left: 20px; }
.learn-list li { margin: 2px 0; }

/* Niederlage: was man geschafft hat */
.achieve { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0; }
.achieve span { background: #fef3c7; color: #78350f; padding: 4px 10px; font-size: 13px; font-weight: 600; }
.tip { font-size: 14px; color: var(--muted); margin: 8px 0 0; }

/* Profil im Menü */
#profile-card { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; margin: 4px 0 14px; padding: 10px 12px; border: 1px solid var(--border); background: var(--bg); }
#profile-card .pc-level { grid-row: span 2; width: 44px; height: 44px; background: var(--primary); color: var(--on-primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; }
#profile-card .pc-title { font-weight: 700; }
#profile-card .pc-sub { font-size: 12px; color: var(--muted); }
.xp-bar { height: 6px; background: var(--border); overflow: hidden; }
.xp-bar div { height: 100%; background: #facc15; transition: width 0.8s ease; }
#profile-card .xp-bar { grid-column: 1 / -1; }
.daily-btn .sub { display: block; font-size: 12px; font-weight: 500; opacity: 0.75; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.ach { border: 1px solid var(--border); padding: 6px 8px; font-size: 12px; color: var(--faint); background: var(--panel); }
.ach b { display: block; font-size: 13px; color: var(--faint); }
.ach.got { border-color: #facc15; background: var(--gold-bg); color: var(--muted); }
.ach.got b { color: var(--text); }
/* Ergebnis am Spielende */
#winner-profile { margin: 0 0 16px; }
.wp-xp { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 4px; }
.wp-up { color: #a16207; font-weight: 700; }
.wp-ach { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wp-ach span { background: #1d2a1f; color: #facc15; padding: 4px 10px; font-size: 13px; font-weight: 600; }
.wp-daily { margin-top: 8px; font-size: 14px; }

/* Karte nach Spielende ansehen */
#review-bar {
  position: absolute; left: 50%; transform: translateX(-50%); top: 64px; z-index: 31;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center;
  background: #1d2a1f; color: #f3f6f1; padding: 8px 10px 8px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); font-size: 14px; max-width: calc(100% - 24px);
}
#review-bar .btn { background: #26372a; color: #f3f6f1; border-color: #3c5240; }
#review-bar .btn.primary { background: #facc15; color: #172015; border-color: #facc15; }

/* Vorgemerktes Ziel: Hinweis in der Einheitenleiste */
.uc-hint { color: #a16207; font-weight: 700; }

/* Rundenbericht */
#news { border-left-color: var(--text); max-height: calc(100% - 140px); overflow-y: auto; }
#news .news-head { font-size: 12px; color: var(--muted); margin: -2px 0 8px; }
#news h4 { margin: 8px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
#news li { border-left: 3px solid var(--faint); padding-left: 6px; }
#news li.tone-bad { border-left-color: #dc2626; }
#news li.tone-warn { border-left-color: #f59e0b; }
#news li.tone-good { border-left-color: #16a34a; }
#news li.tone-info { border-left-color: #60a5fa; }
#news .news-go { font-size: 11px; color: #a16207; font-weight: 700; margin-left: 4px; }

/* Profil-Statistik */
#stats .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.stat-bars { display: flex; align-items: flex-end; gap: 4px; height: 80px; margin: 6px 0; }
.stat-bars div { flex: 1; max-width: 32px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.stat-bars span { width: 100%; background: #facc15; min-height: 2px; }
.stat-bars em { font-style: normal; font-size: 10px; color: var(--muted); }
.recent { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; font-size: 13px; }
.recent li { border-left: 3px solid var(--faint); padding: 3px 8px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.recent li.won { border-left-color: #16a34a; }
.recent li span { color: var(--faint); font-size: 12px; }

/* KI-Botschaft */
.toast.quote { font-style: italic; border-left: 4px solid #7c3aed; }

/* Kampagne */
.mission-list { display: grid; gap: 6px; }
.mission-list button { text-align: left; }
.mission-list .m-stars { font-weight: 700; color: #a16207; white-space: nowrap; }
#mission-bar {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 29;
  background: #1d2a1f; color: #f3f6f1; padding: 8px 14px; font-size: 13px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); max-width: calc(100% - 24px); text-align: center;
}
#mission-bar b { color: #facc15; }
#mission-bar .mb-bar { height: 4px; background: #34463a; margin-top: 5px; overflow: hidden; }
#mission-bar .mb-bar div { height: 100%; background: #facc15; }
@media (max-width: 760px) { #mission-bar { bottom: 96px; } }

/* Namenswahl und Bestenliste */
.name-input { width: 100%; box-sizing: border-box; font-size: 18px; padding: 10px 12px; border: 1px solid var(--border); margin: 6px 0; }
#name-error { color: #b91c1c; min-height: 18px; }
.board-tabs { margin-bottom: 8px; }
.board-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; font-size: 14px; }
.board-list li { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; padding: 4px 8px; background: var(--bg); }
.board-list li.me { background: #fef3c7; font-weight: 700; }
.board-list .b-sub { color: var(--muted); font-size: 12px; }
.profile-name { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; grid-column: 1 / -1; font-size: 13px; }
.profile-name .btn { padding: 3px 8px; font-size: 12px; }
.menu-section .menu-body .board-list li::before, .menu-section .menu-body .recent li::before { content: none; }

/* Admin-/Kreativ-Panel (nur nach Freischaltung) */
#adminBtn { position: fixed; right: 12px; bottom: 172px; z-index: 60; background: var(--panel); border: 1px solid var(--border); }
@media (hover: none) { #adminBtn { min-height: 44px; } }
@media (max-width: 760px) { #adminBtn { top: 168px; bottom: auto; right: 8px; } }
#admin-panel {
  position: fixed; right: 12px; top: 64px; z-index: 60;
  width: 320px; max-width: calc(100vw - 24px); max-height: calc(100% - 250px); min-height: 200px;
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; user-select: text; -webkit-user-select: text;
  background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); padding: 10px 12px 12px; font-size: 13px;
}
@media (max-width: 760px) { #admin-panel { top: 64px; right: 8px; max-width: calc(100vw - 16px); max-height: calc(100% - 140px); } }
#admin-panel h4 { margin: 10px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
#admin-panel .hint { font-size: 12px; color: var(--muted); margin: 4px 0; }
.adm-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.adm-grow { flex: 1; }
.adm-flag { font-size: 11px; color: var(--accent); border: 1px solid var(--accent); padding: 1px 5px; }
.adm-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.adm-tabs .btn { padding: 4px 8px; font-size: 12px; }
.adm-tabs .btn.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.adm-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; flex-wrap: wrap; }
.adm-row select, .adm-row input { flex: 1; min-width: 0; padding: 5px 6px; border: 1px solid var(--border-strong); font: inherit; background: var(--panel); color: var(--text); }
.adm-row input[type=number] { max-width: 90px; }
.adm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 4px 0; }
.adm-grid .btn { text-align: center; }
.adm-check { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-size: 12px; color: var(--muted); }
.adm-tool { background: #fffbeb; border: 1px solid #fcd34d; padding: 6px 8px; margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.adm-info { font-size: 12px; margin-top: 6px; color: var(--text); }
#admin-panel textarea { width: 100%; font: 12px monospace; border: 1px solid var(--border-strong); padding: 6px; resize: vertical; }
body.adm-picking #gameCanvas { cursor: crosshair; }

/* Stadtmenü: kompakt, Bauen im eigenen Fenster */
.city-sum { margin: 6px 0 0; }
.linklike { all: unset; cursor: pointer; color: var(--accent); font-weight: 600; text-decoration: underline; }
.city-reward { width: 100%; margin-top: 10px; }
.city-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.city-act { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; min-height: 52px; }
.city-act[data-build-open] { border-color: var(--primary); }
.city-act .sub, .train-tile .tt-stats { font-size: 11px; color: var(--muted); font-weight: 400; }
.city-sec { margin: 14px 0 6px; }
.train-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; }
.train-tile { display: grid; grid-template-columns: 1fr auto; gap: 1px 6px; text-align: left; padding: 8px 10px; min-height: 48px; }
.train-tile .tt-name { font-weight: 600; font-size: 13px; }
.train-tile .tt-cost { font-weight: 700; color: var(--accent); font-size: 13px; }
.train-tile .tt-stats { grid-column: 1 / -1; }
.tt-legend { font-size: 11px; margin-top: 4px; }

.build-card { width: min(940px, 100%); padding: 22px; }
.build-wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, 1fr); gap: 22px; align-items: start; }
.build-map-box { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.build-map { position: relative; margin: 6px auto; }
.bhex {
  position: absolute; padding: 0; border: 0; cursor: pointer; background: var(--border-strong);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: transform 0.12s ease, background 0.12s ease; -webkit-tap-highlight-color: transparent;
}
.bhex .hx-in {
  position: absolute; inset: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); text-align: center; line-height: 1.1; padding: 0 6px;
}
.bhex .hx-t { font-size: 10px; opacity: 0.9; }
.bhex .hx-m { font-size: 12px; font-weight: 700; }
.bhex .hx-m.res { color: #fef3c7; }
.bhex .hx-g { font-size: 10px; opacity: 0.95; }
.bhex.city .hx-in { filter: saturate(0.6) brightness(0.85); }
.bhex.can { background: #f59e0b; }
.bhex.can .hx-in { inset: 4px; }
.bhex.sel { background: var(--primary); z-index: 2; transform: scale(1.06); }
.bhex.sel .hx-in { inset: 5px; }
.bhex:focus-visible { outline: none; background: #2563eb; z-index: 3; }
@media (hover: hover) { .bhex:hover { transform: scale(1.05); z-index: 2; } }
.build-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); flex-wrap: wrap; justify-content: center; }
.build-legend .lg { width: 14px; height: 14px; display: inline-block; margin-left: 8px; }
.build-legend .lg.can { background: #f59e0b; }
.build-legend .lg.sel { background: var(--primary); box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--border-strong); }
.build-detail h3 { font-size: 18px; margin-bottom: 6px; }
.build-detail p { font-size: 13px; color: var(--text); margin: 4px 0; }
.bopts { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.bopt { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; text-align: left; padding: 10px 12px; min-height: 52px; }
.bopt .bo-key { font-size: 11px; color: var(--faint); font-weight: 700; }
.bopt .bo-main { display: flex; flex-direction: column; gap: 2px; }
.bopt .sub { font-size: 12px; color: var(--muted); font-weight: 400; }
.bopt .cost { font-weight: 700; color: var(--accent); white-space: nowrap; }
.build-keys { font-size: 12px; color: var(--muted); margin-top: 14px; text-align: center; }
@media (hover: none) { .build-keys, .bopt .bo-key { display: none; } .bopt { grid-template-columns: 1fr auto; } }
@media (max-width: 760px) {
  .build-card { padding: 14px; }
  .build-wrap { grid-template-columns: 1fr; gap: 12px; }
}
.blater { margin-top: 12px; font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.blater-chip { background: var(--hover); border: 1px solid var(--border); padding: 2px 8px; color: var(--text); }
.blater-chip i { font-style: normal; color: var(--muted); }




/* Startmenü: passt ohne Seiten-Scrollen auf iPad (810×950 hoch, 1080×700 quer).
   Kopf und Reiter stehen fest, nur ein zu langer Reiter scrollt in sich. */
#menu-overlay { padding: 12px; align-items: center; }
#menu-overlay > .menu-card {
  width: min(1100px, 100%); height: auto; max-height: calc(100dvh - 24px); min-height: min(600px, calc(100dvh - 24px)); margin: auto;
  padding: 18px 24px 0; display: flex; flex-direction: column;
}
.menu-top { display: flex; align-items: center; gap: 20px; flex: none; }
.menu-brand { flex: 1; min-width: 0; }
.wordmark {
  font-weight: 800; font-size: 42px !important; line-height: 0.95; letter-spacing: -0.035em !important; margin: 0 !important;
}
.menu-top .tagline { margin: 4px 0 0; font-size: 13px; }
/* Datenschutz aus jedem Reiter erreichbar, darum im festen Kopf. */
.menu-legal { margin: 2px 0 0; font-size: 12px; }
.menu-legal a { color: var(--muted); }
#menu-overlay #profile-card {
  flex: 0 1 470px; margin: 0; padding: 8px 12px; gap: 2px 12px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-areas: "lvl title name" "lvl stats name" "xp xp xp";
}
#menu-overlay #profile-card > :nth-child(1) { grid-area: lvl; width: 40px; height: 40px; font-size: 16px; }
#menu-overlay #profile-card > :nth-child(2) { grid-area: title; }
#menu-overlay #profile-card > :nth-child(3) { grid-area: stats; }
#menu-overlay #profile-card > .xp-bar { grid-area: xp; margin-top: 4px; }
#menu-overlay #profile-card > .profile-name { grid-area: name; display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; font-size: 12px; }
#menu-overlay #profile-card .profile-name .btn { padding: 4px 10px; min-height: 36px; font-size: 12px; }

.menu-tabs { display: flex; gap: 2px; margin: 12px 0 0; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; flex: none; }
.menu-tabs::-webkit-scrollbar { display: none; }
.storage-warn { margin: 0 0 10px; padding: 8px 10px; border: 1px solid #f59e0b; background: rgba(245, 158, 11, 0.12); font-size: 13px; line-height: 1.4; }
.storage-warn.hidden { display: none; }
/* Reiter ragen über den Rand (schmale Handys): weicher Rand zeigt, dass man wischen kann. */
.menu-tabs.fade-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.menu-tabs.fade-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.menu-tabs.fade-left.fade-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.menu-tab {
  all: unset; cursor: pointer; padding: 12px 16px 10px; font-size: 14px; font-weight: 600; color: var(--muted);
  border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.menu-tab:hover { color: var(--text); }
.menu-tab.active { color: var(--text); border-bottom-color: var(--primary); }
.menu-tab:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.menu-pane { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 14px 2px 10px; }
.menu-h { font-size: 13px; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.menu-h-sub { font-weight: 400; color: var(--faint); }
* + .menu-h { margin-top: 16px; }

/* Spielen: breit zwei Spalten (Modi + Stamm | Einstellungen), sonst untereinander */
.play-grid { display: grid; gap: 16px 28px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "modes settings" "tribe settings"; align-items: start; }
.play-modes { grid-area: modes; display: flex; flex-direction: column; gap: 8px; }
.play-tribe { grid-area: tribe; }
.play-settings { grid-area: settings; }
.play-tribe .menu-h, .play-settings .menu-h { margin-top: 0; }
.mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#menu-overlay .btn.big.mode {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  min-height: 60px; padding: 9px 14px; font-size: 15px; font-weight: 700; line-height: 1.2;
}
#menu-overlay .btn.big.mode .sub { display: block; font-size: 12px; font-weight: 500; opacity: 0.75; line-height: 1.3; }
#menu-overlay .btn.primary.big.mode .sub { color: var(--on-primary-sub); opacity: 1; }
#menu-overlay .btn.big.mode.ghost { border: 1px dashed var(--border-strong); }
.mode-wide { text-align: center !important; min-height: 48px; }
.online-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.online-actions .btn { min-height: 36px; }
.my-matches { border: 1px solid var(--border); background: var(--panel); }
.my-matches .menu-h { margin: 0; padding: 8px 12px 4px; }
.my-matches-list { max-height: 168px; overflow-y: auto; overscroll-behavior: contain; }
.match-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 12px; border: 0; border-top: 1px solid var(--hover); background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.match-row:hover { background: var(--hover); }
.match-row .match-what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-row .match-state { color: var(--muted); white-space: nowrap; }
.match-row.my-turn .match-state { color: var(--primary); font-weight: 700; }
.play-tribe .tribe-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0; }
.play-tribe .tribe-opt { min-height: 44px; padding: 6px 9px; gap: 1px; }
.play-tribe .tribe-opt .tribe-name { font-size: 13px; }
.play-tribe .tribe-opt .tribe-tech { font-size: 11px; }
.tribe-info { margin-top: 8px; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); font-size: 13px; color: var(--muted); line-height: 1.45; min-height: 58px; }
.tribe-info b { color: var(--text); }
.tribe-info .tribe-perk { display: inline; font-size: 13px; }
.settings-box { display: grid; grid-template-columns: 1fr; gap: 0; }
.settings-box .setting-row { padding: 5px 0; margin: 0; border-bottom: 1px solid var(--hover); gap: 8px; flex-wrap: nowrap; }
.settings-box .setting-label { font-size: 13px; }
.settings-box .seg { flex-wrap: nowrap; }
.settings-box .chip-btn { min-height: 36px; padding: 5px 11px; }
.settings-box .setting-row { padding: 3px 0; }

.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.help-pane ul { list-style: none; font-size: 13px; line-height: 1.55; color: var(--muted); columns: 2 340px; column-gap: 28px; }
.help-pane li { break-inside: avoid; margin-bottom: 8px; }
.help-pane b { color: var(--text); }

/* Hochkant-Tablet und schmaler: alles untereinander, Modi 3×2, Stamm 6 Spalten, Einstellungen zweispaltig */
@media (max-width: 960px) {
  #menu-overlay > .menu-card { padding: 16px 18px 0; }
  .play-grid { grid-template-columns: 1fr; grid-template-areas: "modes" "tribe" "settings"; gap: 16px; }
  .mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .play-tribe .tribe-pick { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .settings-box { grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .settings-box .setting-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .settings-box .setting-label { font-size: 12px; }
  .profile-grid { grid-template-columns: 1fr; }
}
/* Handy: Kopf untereinander, Seite darf scrollen */
@media (max-width: 620px) {
  #menu-overlay > .menu-card { max-height: none; min-height: 0; padding: 14px 14px 0; }
  .menu-top { flex-direction: column; align-items: stretch; gap: 10px; }
  #menu-overlay #profile-card { flex: none; }
  .wordmark { font-size: 36px !important; }
  .menu-pane { overflow: visible; }
  .mode-grid { grid-template-columns: 1fr 1fr; }
  .play-tribe .tribe-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .settings-box { grid-template-columns: 1fr; }
  .settings-box .seg { flex-wrap: wrap; }
}
.tribe-opt .tribe-name .dot { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3); }

/* Bau-Fenster: Ertrag je Feld, Vorschau, Ausbilden */
.bhex .hx-y { position: absolute; bottom: 13%; left: 50%; transform: translateX(-50%); background: rgba(23, 32, 21, 0.82); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 6px; text-shadow: none; }
.bhex .hx-gain { position: absolute; top: 13%; left: 50%; transform: translateX(-50%); z-index: 3; display: none; font-size: 12px; font-weight: 700; color: #fff; background: var(--ok); padding: 0 6px; }
.bhex.gain { background: var(--ok); }
.bhex.gain .hx-gain { display: block; }
.bo-gain { font-size: 12px; font-weight: 700; color: var(--ok); margin-left: 6px; }
.bh-inc { font-size: 13px; font-weight: 500; color: var(--muted); }
.bh-inc b { color: var(--ok); }
.bsec { font-size: 13px; font-weight: 700; margin: 12px 0 4px; }

/* Obere Leiste: eigene Sterne groß links */
.treasury { display: flex; align-items: center; gap: 7px; flex: none; padding-right: 14px; border-right: 1px solid var(--border); }
.treasury:empty { display: none; }
.tr-num { font-size: 28px; font-weight: 800; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tr-txt { display: flex; flex-direction: column; line-height: 1.15; }
.tr-lbl { font-size: 12px; font-weight: 700; color: var(--text); }
.tr-inc { font-size: 12px; color: var(--muted); white-space: nowrap; }
.chip .stars::after { content: ' Sterne'; font-weight: 400; color: var(--muted); }
@media (max-width: 1100px) { .chip .stars::after { content: ''; } }
@media (max-width: 560px) { .tr-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .tr-num { font-size: 24px; } .treasury { padding-right: 8px; } }

/* Dunkler Modus: Flächen mit Bedeutungsfarbe */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .idle-btn { color: #fbbf24; border-color: #a16207; background: #2a2412; }
:root:not([data-theme="light"]) .idle-btn:hover { background: #3a3116; }
:root:not([data-theme="light"]) .btn.danger { border-color: #7f1d1d; }
:root:not([data-theme="light"]) .btn.danger:hover { background: #2a1517; border-color: #b91c1c; }
:root:not([data-theme="light"]) .toast.warn { border-color: #7f1d1d; }
:root:not([data-theme="light"]) .toast.good { border-color: #14532d; color: var(--ok); }
:root:not([data-theme="light"]) .adm-tool { background: #2a2412; border-color: #a16207; }
:root:not([data-theme="light"]) .tribe-perk, :root:not([data-theme="light"]) .vet-badge, :root:not([data-theme="light"]) .panel .todo, :root:not([data-theme="light"]) .uc-hint, :root:not([data-theme="light"]) #news .news-go { color: #fbbf24; }
:root:not([data-theme="light"]) .ach.got { border-color: #a16207; }
:root:not([data-theme="light"]) #minimap { border-color: rgba(255, 255, 255, 0.25); }
:root:not([data-theme="light"]) .bhex .hx-in { filter: brightness(0.92); }
:root:not([data-theme="light"]) .chip.dead .dead-tag { color: #f87171; }
}
:root[data-theme="dark"] .idle-btn { color: #fbbf24; border-color: #a16207; background: #2a2412; }
:root[data-theme="dark"] .idle-btn:hover { background: #3a3116; }
:root[data-theme="dark"] .btn.danger { border-color: #7f1d1d; }
:root[data-theme="dark"] .btn.danger:hover { background: #2a1517; border-color: #b91c1c; }
:root[data-theme="dark"] .toast.warn { border-color: #7f1d1d; }
:root[data-theme="dark"] .toast.good { border-color: #14532d; color: var(--ok); }
:root[data-theme="dark"] .adm-tool { background: #2a2412; border-color: #a16207; }
:root[data-theme="dark"] .tribe-perk, :root[data-theme="dark"] .vet-badge, :root[data-theme="dark"] .panel .todo, :root[data-theme="dark"] .uc-hint, :root[data-theme="dark"] #news .news-go { color: #fbbf24; }
:root[data-theme="dark"] .ach.got { border-color: #a16207; }
:root[data-theme="dark"] #minimap { border-color: rgba(255, 255, 255, 0.25); }
:root[data-theme="dark"] .bhex .hx-in { filter: brightness(0.92); }
:root[data-theme="dark"] .chip.dead .dead-tag { color: #f87171; }

/* Teamfarben-Punkte: feiner Rand, damit dunkle Farben auf dunklem Grund sichtbar bleiben */
.dot { box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.55); }
.owner-line { display: inline-flex; align-items: center; gap: 6px; }
.owner-line .dot { display: inline-block; width: 9px; height: 9px; flex: none; }
@media (max-width: 400px) {
  #topbar { gap: 6px; padding: 0 8px; }
  .top-actions { gap: 2px; }
  #techBtn, #overviewBtn { padding: 6px 7px; font-size: 13px; }
  #endTurnBtn { padding: 8px 10px; }
}

/* Bau-Fenster in 3D: echte Szene, Marken als Knöpfe darüber */
.build-map.b3 { position: relative; width: 100%; height: min(54vh, 460px); min-height: 280px; margin: 0; background: #8fc9ea; overflow: hidden; touch-action: none; }
.b3-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.b3-canvas:active { cursor: grabbing; }
.b3-tags { position: absolute; inset: 0; pointer-events: none; }
.b3-tag {
  position: absolute; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 7px;
  background: var(--panel); color: var(--text); border: 1px solid var(--border-strong);
  font: inherit; font-size: 11px; font-weight: 600; line-height: 1.15; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.b3-tag.blank { width: 14px; height: 14px; padding: 0; opacity: 0.75; }
.b3-tag.can { border-color: #f59e0b; border-width: 2px; }
.b3-tag.blank.can { opacity: 1; background: #fde68a; }
.b3-tag.sel, .b3-tag.blank.sel, .b3-tag.blank.can.sel { background: var(--primary); color: var(--on-primary); border: 2px solid #fff; opacity: 1; z-index: 2; }
.b3-tag.blank.sel { width: 18px; height: 18px; }
.b3-tag.gain { border-color: var(--ok); }
.b3-tag .b3-y { font-size: 10px; font-weight: 700; color: var(--accent); }
.b3-tag.sel .b3-y { color: var(--on-primary-sub); }
.b3-tag .hx-gain { display: none; font-size: 11px; font-weight: 700; color: #fff; background: var(--ok); padding: 0 5px; }
.b3-tag.gain .hx-gain { display: block; }
.b3-tag:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.b3-hint { position: absolute; left: 8px; bottom: 6px; font-size: 11px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); pointer-events: none; }
@media (hover: none) { .b3-tag.blank { width: 22px; height: 22px; } .b3-tag { padding: 5px 8px; } }

/* Forschung: Fenster füllt die Höhe, Baum nimmt den Platz, Schrift lesbar */
#tech-overlay .card { height: calc(100dvh - 40px); max-height: 900px; overflow: hidden; }
#tech-list { flex: 1; min-height: 0; }
#tech-tree { flex: 1; height: auto; min-height: 240px; }
#tech-detail { flex: none; min-height: 0; }
.tech-hex .tn-in { padding: 0 5px; gap: 2px; }
.tech-hex .tn-name { font-size: 14px; font-weight: 700; line-height: 1.08; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.tech-hex .tn-cost { font-size: 13px; }
@media (max-width: 760px) { #tech-overlay .card { padding: 14px; } }

/* ==== Freie Karte: Bedienung in schwebenden Kärtchen an den Rändern ==== */
#stage { inset: 0; }
#topbar {
  position: fixed; inset: 0 0 auto 0; height: auto; z-index: 20;
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px;
  background: transparent; border: 0; pointer-events: none;
}
#topbar > * { pointer-events: auto; }
.hud-card {
  display: flex; align-items: center; gap: 4px; min-height: 48px; padding: 4px 8px;
  background: var(--panel); border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
}
.hud-left { gap: 12px; padding: 4px 14px 4px 12px; flex: none; }
.hud-left .treasury { padding-right: 12px; }
.round-box { display: flex; flex-direction: column; line-height: 1.2; }
#topbar #round-label { all: unset; font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
#topbar #status { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
#topbar #player-strip { flex: 0 1 auto; gap: 4px; padding: 4px 6px; }
#topbar .chip { border-color: transparent; background: transparent; padding: 4px 8px; }
#topbar .chip.active { border-color: var(--primary); background: var(--primary-soft); }
#topbar .top-actions { margin-left: auto; gap: 2px; padding: 4px; }
#menuBtn, #soundBtn { position: static; }
#topbar #endTurnBtn { margin-left: 4px; }
@media (max-width: 1100px) { #topbar #status { display: none; } }
@media (max-width: 900px) {
  #topbar { flex-wrap: wrap; padding: 8px; gap: 6px; }
  #topbar #player-strip { order: 5; flex: 1 1 100%; min-height: 40px; }
  #topbar .top-actions { flex: 1 1 auto; justify-content: flex-end; }
}
@media (max-width: 560px) {
  .hud-left .round-box { display: none; }
  .hud-left .treasury { padding-right: 0; border-right: 0; }
  #topbar .top-actions { flex-wrap: wrap; }
  #soundBtn { display: none; }
}

/* Alles unter den Kärtchen richtet sich nach ihrer Höhe */
#toast-area { top: calc(var(--hud-h, 68px) + 4px); }
#tutor, #review-bar { top: calc(var(--hud-h, 68px) + 8px); }
/* Handy: Tutorial-Karte unten statt oben (sonst oben und unten gesetzt und riesig) */
@media (max-width: 760px) { #tutor { top: auto; } }
@media (max-width: 760px) { #minimap { top: calc(var(--hud-h, 68px) + 6px); } }

/* Hinweise: klein und kurz */
.toast { font-size: 13px; padding: 6px 12px; max-width: min(460px, calc(100vw - 24px)); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.toast.quote { font-style: italic; color: var(--muted); border-left: 3px solid var(--border-strong); }

/* Rundenbericht: schmale Liste am rechten Rand */
#news, #news:not(.hidden) {
  left: auto; right: 12px; top: calc(var(--hud-h, 68px) + 8px); width: min(300px, calc(100% - 24px));
  max-height: calc(100% - var(--hud-h, 68px) - 250px); min-height: 0; overflow-y: auto;
  border-left: 3px solid var(--primary); font-size: 13px; padding: 10px 12px;
}
#news .news-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
#news .news-top h3 { margin: 0; font-size: 14px; }
#news .news-top .btn { padding: 4px 8px; min-height: 0; font-size: 12px; }
#news h4 { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 700; color: var(--text); }
#news li button { font-size: 13px; }
@media (max-width: 760px) { #news, #news:not(.hidden) { left: 8px; right: 8px; width: auto; max-height: 45%; } }

/* Kamera-Knöpfe über der Minikarte, damit unten Platz für die Leisten bleibt */
#camera-pad { right: 12px; bottom: 172px; }
@media (max-width: 760px) { #camera-pad { top: calc(var(--hud-h, 68px) + 112px); bottom: auto; right: 8px; } }

/* Werte als Symbol mit Zahl */
.vstat { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; }
.vstat svg { color: var(--muted); flex: none; }
.tt-stats { display: flex; gap: 8px; }
.uc-stats { display: flex; gap: 10px; margin: 2px 0 1px; }
.uc-stats .vstat { font-size: 13px; }

/* Stadt: flache Leiste am unteren Rand in drei Spalten */
#panel.city-bar {
  left: 12px; right: 244px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none;
  max-height: 44vh; max-height: 44dvh; display: grid; grid-template-columns: minmax(210px, 250px) minmax(170px, 200px) minmax(0, 1fr);
  gap: 14px; align-items: start; padding: 12px 14px;
}
#panel.city-bar.small { grid-template-columns: minmax(220px, 320px); right: auto; }
#panel.city-bar .panel-head { margin-bottom: 8px; }
#panel.city-bar .stat-row { margin-bottom: 6px; }
#panel.city-bar .stat { padding: 5px 6px; }
.cp-acts { display: flex; flex-direction: column; gap: 6px; }
.cp-acts .city-act { min-height: 52px; }
.cp-acts .city-reward { margin: 0; }
.cp-train .city-sec { margin: 0 0 6px; }
.cp-train .train-grid { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); }
.cp-note { color: var(--muted); font-weight: 400; margin-left: 6px; }
@media (max-width: 900px) {
  #panel.city-bar { right: 244px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #panel.city-bar .cp-train { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  #panel.city-bar, #panel.city-bar.small { left: 8px; right: 8px; grid-template-columns: minmax(0, 1fr); max-height: 52vh; max-height: 52dvh; }
}
/* Nachbesserungen: gleich hohe Kärtchen, kompakte Stadtleiste, Handy zweizeilig */
.hud-card { min-height: 52px; }
#topbar .top-actions .btn { min-height: 40px; padding: 6px 11px; }
#topbar .top-actions #endTurnBtn { padding: 8px 16px; }
#panel.city-bar .level-row { margin: 2px 0 6px; gap: 4px; }
#panel.city-bar .level-chip { padding: 2px 6px; font-weight: 600; }
.unit-in-city { width: 100%; text-align: left; margin-top: 2px; }
.cp-note { color: var(--muted); font-size: 12px; margin: -2px 0 6px; }
@media (max-width: 560px) {
  #topbar .hud-left { order: 1; }
  #topbar #player-strip { order: 2; flex: 1 1 0; min-width: 0; }
  #topbar .top-actions { order: 3; flex: 1 1 100%; flex-wrap: nowrap; justify-content: space-between; }
  #topbar .top-actions .btn { padding: 6px 8px; font-size: 13px; }
  #soundBtn { display: none; }
}
#adminBtn { top: auto; right: 12px; bottom: 268px; }
@media (max-width: 760px) { #adminBtn { top: calc(var(--hud-h, 68px) + 214px); bottom: auto; right: 8px; } }
#topbar .chip .stars::after { content: ""; }

/* ==== Wie Mini Metro: Schild am Objekt, Werkzeugreihe unten in der Mitte ==== */
#anchor-tag {
  position: fixed; z-index: 14; transform: translate(-50%, calc(-100% - 34px)); pointer-events: none;
  min-width: 150px; max-width: 240px; padding: 7px 10px; background: var(--panel); color: var(--text);
  border: 1px solid var(--border); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); font-size: 12px;
}
#anchor-tag::after { content: ''; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); border: 7px solid transparent; border-bottom: 0; border-top-color: var(--panel); }
#anchor-tag.hidden { display: none; }
#anchor-tag.at-below { transform: translate(-50%, 30px); }
#anchor-tag.at-below::after { bottom: auto; top: -7px; border-top: 0; border-bottom: 7px solid var(--panel); }
.at-head { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.at-head .dot { width: 9px; height: 9px; flex: none; }
.at-lvl, .at-vet { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted); }
.at-vet { color: var(--accent); }
.at-bar { display: block; height: 5px; background: var(--hover); margin: 5px 0 4px; }
.at-bar span { display: block; height: 100%; background: var(--ok); }
.at-bar.low span { background: var(--danger); }
.at-bar.pop span { background: var(--primary); }
.at-stats { display: flex; gap: 9px; align-items: center; color: var(--muted); }
.at-inc { font-weight: 700; color: var(--accent); font-size: 13px; }
.at-sub { margin-top: 3px; color: var(--muted); font-size: 11px; }

#panel.toolbar, #unit-chip {
  left: 12px; right: 244px; margin: 0 auto; transform: none; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: fit-content; max-width: calc(100vw - 256px); max-height: none; overflow: visible;
  display: flex; flex-direction: column; gap: 6px; padding: 8px; animation: none;
}
#unit-chip { align-items: stretch; }
.tb-cap { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 0 2px; min-height: 28px; }
.tb-cap > span:first-child { flex: 1; min-width: 0; }
.tb-cap .btn { padding: 4px 8px; min-height: 28px; font-size: 12px; }
.tb-row { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: thin; padding-bottom: 2px; }
.tb-sep { flex: none; width: 1px; background: var(--border); margin: 4px 2px; }
.tool-tile {
  flex: none; width: auto; min-width: 112px; max-width: 168px; min-height: 78px; padding: 8px 9px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 4px; text-align: left;
}
.tool-tile b { font-size: 13px; line-height: 1.15; overflow-wrap: break-word; }
.tool-tile.tt-main { border-color: var(--primary); }
.tool-tile .tt-foot { display: flex; align-items: center; gap: 6px; width: 100%; }
.tool-tile .tt-cost { font-size: 15px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.tool-tile .tt-why { font-size: 11px; font-weight: 400; color: var(--muted); line-height: 1.2; }
.tool-tile.primary .tt-why { color: var(--on-primary-sub); }
.tool-tile.off { color: var(--faint); border-style: dashed; }
.tool-tile .tt-stats { display: flex; gap: 6px; }
.tool-tile .vstat { font-size: 11px; }

@media (max-width: 760px) {
  #panel.toolbar, #unit-chip { left: 8px; right: 8px; width: auto; max-width: none; transform: none; }
  .tool-tile { min-width: 104px; }
}

/* Sechsecke als Erkennungszeichen – nur für Marker, Abzeichen und Währung */
:root { --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.dot, .chip .dot, .owner-line .dot, .at-head .dot, .tribe-opt .tribe-name .dot { clip-path: var(--hex); box-shadow: none; }
.chip .dot { width: 11px; height: 12px; }
.idle-dot { border-radius: 0; clip-path: var(--hex); width: 9px; height: 10px; }
#profile-card .pc-level { clip-path: var(--hex); width: 46px; height: 52px; }
.tr-hex { width: 20px; height: 23px; flex: none; background: var(--accent); clip-path: var(--hex); }
.tool-tile .tt-cost {
  display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 34px; padding: 0 4px;
  background: var(--accent); color: var(--on-primary); clip-path: var(--hex); font-size: 14px;
}
.tool-tile[disabled] .tt-cost, .tool-tile.off .tt-cost { background: var(--border-strong); color: var(--panel); }
.at-hexes { display: flex; gap: 3px; margin: 6px 0 4px; }
.at-hexes span { width: 14px; height: 16px; background: var(--hover); clip-path: var(--hex); }
.at-hexes span.on { background: var(--primary); }
@media (max-width: 900px) and (min-width: 561px) {
  .hud-left { gap: 8px; padding: 4px 10px; }
  #topbar .top-actions .btn { padding: 6px 8px; }
  #topbar .top-actions #endTurnBtn { padding: 8px 12px; }
}
@media (max-width: 400px) { #topbar { padding: 8px 6px; } #topbar .top-actions .btn { padding: 6px 6px; } #topbar .top-actions #endTurnBtn { padding: 8px 10px; } }

/* Übersicht mit Reitern */
#overview-overlay .card { max-width: 640px; width: min(640px, 100%); }
.ov-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.ov-sum .stat { padding: 6px; }
.ov-perk { margin: 4px 0; }
.ov-report { margin: 2px 0 6px; }
.ov-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 8px 0 10px; overflow-x: auto; scrollbar-width: none; }
.ov-tab { all: unset; cursor: pointer; padding: 10px 12px 8px; font-size: 13px; font-weight: 700; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.ov-tab.active { color: var(--text); border-bottom-color: var(--primary); }
.ov-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ov-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ov-table th { text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 6px; border-bottom: 1px solid var(--border); }
.ov-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ov-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ov-table tbody tr { cursor: pointer; }
.ov-table tbody tr:hover, .ov-table tbody tr:focus-visible { background: var(--hover); outline: none; }
.ov-table tr.ov-dim td { color: var(--muted); }
.ov-inc { font-weight: 700; color: var(--accent); }
.ov-stats { display: flex; gap: 8px; }
.ov-hexes { display: inline-flex; gap: 2px; }
.ov-hexes span { width: 10px; height: 11px; background: var(--hover); clip-path: var(--hex); box-shadow: inset 0 0 0 1px var(--border); }
.ov-hexes span.on { background: var(--primary); }
.ov-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 6px; border: 1px solid var(--border-strong); color: var(--text); white-space: nowrap; margin: 1px 0; }
.ov-tag.good { border-color: var(--ok); color: var(--ok); }
.ov-tag.bad { border-color: var(--danger); color: var(--danger); }
.ov-none { color: var(--faint); }
.ov-mons { display: grid; gap: 8px; margin-bottom: 8px; }
.ov-mon { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--border); }
.ov-mon.ready { border-color: #f59e0b; }
.ov-mon.done { border-color: var(--ok); }
.ov-bar { display: block; height: 6px; background: var(--hover); }
.ov-bar span { display: block; height: 100%; background: var(--primary); }
.ov-mon.ready .ov-bar span { background: #f59e0b; }
.ov-mon-sub { font-size: 12px; color: var(--muted); }
@media (max-width: 560px) { .ov-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ov-table th:nth-child(4), .ov-table td:nth-child(4) { display: none; } }

/* Kampfvorschau am Ziel: Leben vorher (hell) und nachher (voll) */
#anchor-tag .du-title { font-size: 11px; font-weight: 700; color: var(--danger); margin-bottom: 4px; }
#anchor-tag .du-row { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 4px; }
#anchor-tag .du-row .dot { width: 9px; height: 10px; flex: none; }
#anchor-tag .du-note { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--danger); }
#anchor-tag .du-bar { position: relative; display: block; height: 6px; background: var(--hover); margin: 3px 0 2px; }
#anchor-tag .du-now { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--danger) 35%, var(--hover)); }
#anchor-tag .du-after { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ok); }
#anchor-tag .du-hp { font-size: 11px; color: var(--muted); }
#anchor-tag .du-hp b { color: var(--text); }
#anchor-tag .du-go { margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--primary); }
#anchor-tag:has(.du-title) { min-width: 200px; }

/* Aufgeklappte Einheiten-Details in der Werkzeugreihe */
.tb-more { border-bottom: 1px solid var(--border); padding: 2px 2px 8px; display: grid; gap: 6px; max-width: 560px; }
.tb-more .ability-row { margin: 0; }
.tb-info { font-size: 12px; color: var(--muted); line-height: 1.5; }
.tool-tile.danger { border-color: var(--danger); }
.tool-tile.danger .tt-cost { background: var(--danger); }

/* Forschung: Sprungleiste zu den Zweigen */
.tech-jump { display: flex; gap: 4px; margin: -4px 0 8px; overflow-x: auto; scrollbar-width: none; flex: none; }
.tech-jump.hidden { display: none; }
.tj-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; min-height: 34px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tj-btn:hover { background: var(--hover); }
.tj-dot { width: 10px; height: 11px; clip-path: var(--hex); }
@media (hover: none) { .tj-btn { min-height: 40px; } }
.test-flag { font-size: 11px; font-weight: 700; color: var(--accent); border: 1px solid var(--accent); padding: 0 5px; align-self: flex-start; margin-top: 2px; }

/* Wiederholung: Leiste unten in der Mitte */
#replay-bar {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 30;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  width: min(760px, calc(100% - 24px)); padding: 10px 12px; background: var(--panel); border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
#replay-bar.hidden { display: none; }
#rpSlider { flex: 1 1 220px; min-width: 160px; accent-color: var(--primary); height: 28px; }
.rp-label { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 96px; }
.rp-speed .chip-btn { min-height: 32px; }
@media (hover: none) { #rpSlider { height: 40px; } .rp-speed .chip-btn { min-height: 40px; } }

/* KI-Lehrling */
#coach { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--hud-h, 68px) + 8px); z-index: 31; width: min(420px, calc(100% - 24px));
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--primary); padding: 10px 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); font-size: 14px; }
#coach.hidden { display: none; }
#coach .co-head { font-size: 12px; font-weight: 700; color: var(--primary); margin-bottom: 2px; }
#coach .co-why { font-size: 12px; color: var(--muted); margin-top: 3px; }
#coach .co-acts { display: flex; gap: 6px; margin-top: 8px; }
@media (max-width: 430px) { #topbar .top-actions { gap: 0; } #topbar .top-actions #coachBtn, #topbar .top-actions #techBtn, #topbar .top-actions #overviewBtn, #topbar .top-actions #menuBtn { padding: 6px 5px; font-size: 12px; } #topbar .top-actions #endTurnBtn { padding: 8px 8px; } }

/* Meldung, wenn das Spiel nicht starten konnte (siehe index.html). */
.boot-failed {
  position: fixed; left: 16px; right: 16px; top: 50%; transform: translateY(-50%);
  max-width: 420px; margin: 0 auto; padding: 16px 18px; z-index: 1000;
  background: var(--panel); color: var(--danger); border: 1px solid var(--border-strong);
  font-size: 15px; line-height: 1.4;
}

/* ==== Handy-Ansicht (Klasse „phone“ am <html>, gesetzt nach Gerät in index.html) ====
   Gilt nur auf Handys, egal ob hoch oder quer. PC und Tablet bleiben wie oben.
   Ziel: die Karte frei lassen. Oben eine schmale Leiste mit Sternen, Runde, Forschung und
   Zug beenden; alles Weitere hinter „Mehr“. Minikarte und Kamera-Knöpfe nur auf Wunsch. */
html:not(.phone) #topbar .phone-only { display: none; }
html.phone #topbar { flex-wrap: nowrap; align-items: stretch; gap: 6px; padding: 6px 6px 0; padding-left: max(6px, env(safe-area-inset-left, 0px)); padding-right: max(6px, env(safe-area-inset-right, 0px)); padding-top: max(6px, env(safe-area-inset-top, 0px)); }
html.phone #topbar .hud-card { min-height: 44px; }
html.phone #topbar .hud-left { order: 1; flex: none; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 2px 8px; }
html.phone #topbar .hud-left .treasury { padding-right: 0; border-right: 0; gap: 5px; }
html.phone .tr-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
html.phone .tr-num { font-size: 20px; }
html.phone .tr-hex { width: 15px; height: 17px; }
html.phone #topbar .round-box { display: flex; }
html.phone #topbar #round-label { font-size: 11px; font-weight: 600; color: var(--muted); }
html.phone #topbar #status { display: none; }
html.phone #topbar #player-strip { display: none; }
html.phone #topbar .top-actions {
  order: 2; flex: 1 1 0; min-width: 0; margin-left: 0; flex-wrap: wrap; justify-content: flex-end; align-content: center; gap: 2px; padding: 2px;
}
html.phone #topbar .top-actions :is(.btn, #techBtn, #overviewBtn, #menuBtn, #coachBtn) { min-height: 40px; padding: 6px 8px; font-size: 14px; }
html.phone #topbar .top-actions #endTurnBtn { order: 1; margin-left: 2px; padding: 8px 10px; font-size: 14px; }
html.phone #topbar .top-actions :is(#techBtn, #idleBtn, #moreBtn) { order: 1; }
html.phone #topbar .top-actions #moreBtn { width: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
html.phone #topbar .top-actions #idleBtn { padding: 6px 7px; }
/* Nur sichtbar ausgeblendet: Bildschirmleser lesen „1 bereit“ statt „1“. */
html.phone .top-actions .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* Schmale Handys (bis 380 px): enger, damit alles in eine Zeile passt */
@media (max-width: 380px) {
  html.phone #topbar { gap: 4px; padding: 4px 4px 0; padding-top: max(4px, env(safe-area-inset-top, 0px)); }
  html.phone #topbar .hud-left { padding: 2px 6px; }
  html.phone #topbar .top-actions { gap: 1px; padding: 2px 1px; }
  html.phone #topbar .top-actions :is(.btn, #techBtn, #overviewBtn, #menuBtn, #coachBtn) { padding: 6px 6px; font-size: 13px; }
  html.phone #topbar .top-actions #endTurnBtn { margin-left: 1px; padding: 8px 8px; font-size: 13px; }
  html.phone #topbar .top-actions #moreBtn { width: 36px; }
}
/* Sehr schmale Handys (320 bis 345 px): noch enger, „Zug beenden“ bleibt in der Zeile */
@media (max-width: 345px) {
  html.phone #topbar .hud-left { padding: 2px 4px; }
  html.phone .tr-num { font-size: 18px; }
  html.phone #topbar .top-actions #techBtn { padding: 6px 4px; font-size: 12px; }
  html.phone #topbar .top-actions #endTurnBtn { padding: 8px 5px; font-size: 12px; }
  html.phone #topbar .top-actions #moreBtn { width: 32px; }
  html.phone #topbar .top-actions #idleBtn { padding: 6px 4px; }
}
/* Zugeklappt: nur Forschung, Bereit, Mehr und Zug beenden */
html.phone #topbar:not(.more-open) :is(#overviewBtn, #soundBtn, #menuBtn, #coachBtn, #mapToggleBtn, #camToggleBtn) { display: none; }
/* Aufgeklappt: die übrigen Knöpfe in eigener Zeile darunter, dazu die Stämme */
html.phone #topbar.more-open { flex-wrap: wrap; }
html.phone #topbar.more-open .top-actions::after { content: ''; order: 2; flex: 1 1 100%; height: 0; }
html.phone #topbar.more-open .top-actions :is(#overviewBtn, #soundBtn, #menuBtn, #coachBtn, #mapToggleBtn, #camToggleBtn) { order: 3; display: inline-flex; flex: 1 1 auto; justify-content: center; }
html.phone #topbar.more-open #player-strip { display: flex; order: 4; flex: 1 1 100%; min-width: 0; overflow-x: auto; min-height: 40px; }
html.phone #topbar #moreBtn.active, html.phone #topbar.more-open #moreBtn { background: var(--primary-soft); }
html.phone #topbar :is(#mapToggleBtn, #camToggleBtn).active { background: var(--primary-soft); }

/* Minikarte und Kamera-Knöpfe: aus, bis man sie unter „Mehr“ einschaltet */
html.phone:not(.show-map) #minimap, html.phone:not(.show-cam) #camera-pad { display: none; }
html.phone #minimap { top: calc(var(--hud-h, 56px) + 6px); bottom: auto; right: 8px; width: 132px; height: 90px; }
html.phone #camera-pad { top: calc(var(--hud-h, 56px) + 6px); bottom: auto; right: 8px; grid-template-columns: repeat(3, 40px); }
html.phone.show-map #camera-pad { top: calc(var(--hud-h, 56px) + 104px); }
html.phone .cam-btn { width: 40px; height: 40px; }
/* Kamera-Knöpfe nie unter einer Leiste: weg, solange „Tipp der KI“ oder „Karte ansehen“ offen ist,
   quer auch, solange unten eine Einheit oder Stadt gewählt ist (dort reicht die Höhe nicht für beides). */
html.phone:has(#coach:not(.hidden), #review-bar:not(.hidden)) #camera-pad { display: none; }
@media (orientation: landscape) {
  html.phone:has(#unit-chip:not(.hidden), #panel:not(.hidden), #replay-bar:not(.hidden)) #camera-pad { display: none; }
}
html.phone #adminBtn { top: calc(var(--hud-h, 56px) + 6px); bottom: auto; right: auto; left: 8px; }

/* Leisten unten über die ganze Breite, nie höher als gut die Hälfte */
html.phone #panel.toolbar, html.phone #unit-chip {
  left: 8px; right: 8px; width: auto; max-width: none; transform: none; margin: 0;
  bottom: calc(6px + env(safe-area-inset-bottom, 0px)); padding: 6px;
}
/* Kacheln wachsen mit langem Text mit (z. B. „Aufrüsten: Armbrustschütze“), statt überzulaufen */
html.phone .tool-tile { width: auto; min-width: 100px; max-width: 168px; min-height: 70px; padding: 6px 8px; }
html.phone .tool-tile b { overflow-wrap: break-word; }
/* Aufgeklappte Details nie unter die obere Leiste: innen scrollen */
html.phone #unit-chip, html.phone #panel.toolbar { max-height: calc(100% - var(--hud-h, 56px) - 16px); overflow-y: auto; overscroll-behavior: contain; }
html.phone #panel.city-bar, html.phone #panel.city-bar.small {
  left: 8px; right: 8px; bottom: calc(6px + env(safe-area-inset-bottom, 0px)); grid-template-columns: minmax(0, 1fr);
  max-height: 50vh; max-height: 50dvh; overflow-y: auto; padding: 10px; gap: 8px;
}
html.phone #panel.city-bar .cp-train { grid-column: auto; }

/* Hinweise und Berichte schmal halten */
html.phone #news, html.phone #news:not(.hidden) { top: calc(var(--hud-h, 56px) + 6px); left: 8px; right: 8px; width: auto; max-height: 42%; }
html.phone #tutor { top: auto; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); width: calc(100% - 16px); font-size: 13px; padding: 10px 12px; }
html.phone #coach { width: calc(100% - 16px); }
html.phone #mission-bar { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); font-size: 12px; padding: 6px 10px; }
html.phone #review-bar { top: calc(var(--hud-h, 56px) + 6px); }
html.phone #replay-bar { width: calc(100% - 16px); padding: 6px 8px; gap: 6px; bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
html.phone #admin-panel { top: calc(var(--hud-h, 56px) + 6px); right: 8px; max-width: calc(100vw - 16px); max-height: calc(100% - var(--hud-h, 56px) - 100px); }

/* Handy quer: wenig Höhe. Stadtleiste nebeneinander statt untereinander, Berichte rechts. */
@media (orientation: landscape) {
  html.phone #topbar .hud-card { min-height: 40px; }
  html.phone #topbar .top-actions :is(.btn, #techBtn, #overviewBtn, #menuBtn, #coachBtn) { min-height: 36px; padding: 4px 10px; }
  html.phone #topbar .top-actions #endTurnBtn { padding: 6px 14px; }
  html.phone #panel.city-bar, html.phone #panel.city-bar.small {
    grid-template-columns: minmax(180px, 230px) minmax(150px, 190px) minmax(0, 1fr); max-height: 58vh; max-height: 58dvh;
  }
  html.phone #panel.city-bar.small { grid-template-columns: minmax(200px, 320px); right: auto; }
  html.phone .tool-tile { min-height: 62px; }
  html.phone #news, html.phone #news:not(.hidden) { left: auto; width: min(320px, 45%); max-height: calc(100% - var(--hud-h, 56px) - 110px); }
  html.phone #tutor { top: calc(var(--hud-h, 56px) + 6px); bottom: auto; width: min(460px, 60%); }
  html.phone #coach { width: min(420px, 60%); }
}

/* Fenster (Forschung, Übersicht, Menü) auf dem Handy: fast randlos, damit mehr Inhalt passt */
html.phone .overlay { padding: 6px; }
html.phone .overlay > .card { padding: 12px; }
html.phone .card-head { margin-bottom: 8px; }
html.phone #tech-overlay .card { height: calc(100dvh - 12px); max-height: none; width: 100%; padding: 10px 12px; }
html.phone #tech-tree { min-height: 120px; }
@media (orientation: landscape) {
  html.phone .card-head { margin-bottom: 4px; }
  html.phone .card-head h2 { font-size: 18px; }
  html.phone #tech-tree { min-height: 90px; }
  /* Startmenü quer: schmaler Kopf, damit die Spielarten ohne langes Scrollen sichtbar sind */
  html.phone #menu-overlay > .menu-card { padding-top: 10px; }
  html.phone .menu-top { gap: 12px; }
  html.phone .menu-brand { flex: none; }
  html.phone .wordmark { font-size: 26px !important; white-space: nowrap; }
  html.phone .menu-top .tagline { display: none; }
}
/* Eigene Online-Partien: lange Stammesnamen umbrechen statt das Menü zu verbreitern */
html.phone .match-row { flex-wrap: wrap; row-gap: 0; }
html.phone .match-row .match-state { white-space: normal; min-width: 0; }
html.phone .match-row .match-what { flex: 1 0 auto; }