@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ===================== Familien-Tokens (globaler Styleguide) ===================== */
:root {
  --p-50:#F1F5F7; --p-100:#DEE8ED; --p-200:#BFD0D9; --p-300:#97B0BD;
  --p-400:#6E8E9F; --p-500:#466478; --p-600:#3B5563; --p-700:#30444F;
  --p-800:#26353D; --p-900:#1B252B;
  --a-50:#FDF1ED; --a-100:#FADDD3; --a-200:#F4BBA8; --a-300:#ED967C;
  --a-400:#E5765B; --a-500:#D55B40; --a-600:#B4472F; --a-700:#8E3725;
  --a-800:#6B291C; --a-900:#481B12;
  --n-0:#FFFFFF; --n-50:#FAF8F6; --n-100:#F2EFEC; --n-200:#E5E0DB;
  --n-300:#CFC8C1; --n-400:#A39B92; --n-500:#7A726A; --n-600:#5C554E;
  --n-700:#443E39; --n-800:#2E2A26; --n-900:#1C1A17;

  --bg:#FAF8F6; --surface:#FFFFFF; --surface-2:#F2EFEC;
  --surface-hover:#EDEAE5; --surface-active:#E5E0DB;
  --border:#E5E0DB; --border-strong:#948B82;
  --text:#1C1A17; --text-2:#5C554E; --text-muted:#6A625A; --text-disabled:#A39B92;
  --action:#466478; --action-hover:#3B5563; --on-action:#FFFFFF;
  --accent:#E5765B; --accent-solid:#8E3725; --on-accent:#FFFFFF;
  --link:#466478; --focus:#D55B40;
  --overlay:rgba(28,26,23,.55);
  --success:#3F9A5C; --success-text:#2C7344; --success-bg:#E9F3EC; --success-border:#BFE0CB;
  --warning:#D9981F; --warning-text:#946307; --warning-bg:#FBF0D9; --warning-border:#EFD9A6;
  --error:#D8453F;   --error-text:#B83A34;   --error-bg:#FBE7E6;   --error-border:#F2C4C1;
  --info:#3B82C4;    --info-text:#336CA1;    --info-bg:#E6EFF7;    --info-border:#C2D8EC;
  --shadow-sm:0 1px 2px rgba(28,26,23,.06),0 1px 1px rgba(28,26,23,.05);
  --shadow-md:0 4px 12px -2px rgba(28,26,23,.10),0 2px 5px -2px rgba(28,26,23,.07);
  --shadow-lg:0 16px 40px -8px rgba(28,26,23,.18);

  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:999px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-8:48px;

  /* ---- Spielspezifische Geländefarben (--kg-*), siehe CLAUDE.md ---- */
  --kg-forest:#2F6B3C;    --kg-forest-ink:#FFFFFF;
  --kg-village:#B4432F;   --kg-village-ink:#FFFFFF;
  --kg-farm:#D9A32A;      --kg-farm-ink:#2E2A26;
  --kg-water:#2F6FA8;     --kg-water-ink:#FFFFFF;
  --kg-monster:#8E3B74;   --kg-monster-ink:#FFFFFF;
  --kg-mountain:#5C4434;  --kg-mountain-ink:#F6E3C8;
  --kg-wasteland:#8C847B; --kg-wasteland-ink:#FFFFFF;
  --kg-sheet:#FBF7F0;     --kg-sheet-line:#D9CDBA;
  --kg-ruin:#A8761F;

  /* ---- Geländesymbole als SVG-Masken ----
     Stroke-basiert (wie Lucide), damit sie bei ~20 px noch lesbar sind.
     Die Farbe kommt nicht von hier, sondern über --kg-ink aus der Maske. */
  --sym-forest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 7.5 10.5h3L6 18h12l-4.5-7.5h3z'/%3E%3Cpath d='M12 18v3.5'/%3E%3C/svg%3E");
  --sym-village: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11 12 4l8.5 7'/%3E%3Cpath d='M5.5 10v10h13V10'/%3E%3Cpath d='M10 20v-5.5h4V20'/%3E%3C/svg%3E");
  /* Feld: Diagonalschraffur wie auf den Original-Erkundungskarten — bewusst
     anders als die Wellen, sonst sind Feld und Wasser bei 20 px verwechselbar. */
  --sym-farm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M3 10 10 3'/%3E%3Cpath d='M3 17 17 3'/%3E%3Cpath d='M7 21 21 7'/%3E%3Cpath d='M14 21 21 14'/%3E%3C/svg%3E");
  --sym-water: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M2.5 7q2.4-2.2 4.8 0t4.8 0 4.8 0 4.8 0'/%3E%3Cpath d='M2.5 12.5q2.4-2.2 4.8 0t4.8 0 4.8 0 4.8 0'/%3E%3Cpath d='M2.5 18q2.4-2.2 4.8 0t4.8 0 4.8 0 4.8 0'/%3E%3C/svg%3E");
  --sym-monster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5a8 8 0 0 0-8 8v11l3-2.6 2.5 2.2L12 18.5l2.5 2.6 2.5-2.2 3 2.6v-11a8 8 0 0 0-8-8z'/%3E%3Cpath d='M9.2 10.5h.01'/%3E%3Cpath d='M14.8 10.5h.01'/%3E%3C/svg%3E");
  --sym-mountain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 4 4 7.5L17 7l5 13H2z'/%3E%3C/svg%3E");
  --sym-wasteland: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M4 7.5h6M13.5 7.5h6'/%3E%3Cpath d='M3 13h5M11.5 13h8'/%3E%3Cpath d='M5 18.5h7M15.5 18.5h4'/%3E%3C/svg%3E");
  /* Ruine: Säule mit Kapitell plus zwei abgebrochene Stümpfe. */
  --sym-ruin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 20.5h19'/%3E%3Cpath d='M6 20.5V8M10 20.5V8'/%3E%3Cpath d='M4.5 8h7'/%3E%3Cpath d='M15 20.5v-7.5'/%3E%3Cpath d='M19 20.5v-4.5'/%3E%3C/svg%3E");
}

[data-theme="dark"] {
  --bg:#1C1A17; --surface:#262320; --surface-2:#312D29;
  --surface-hover:#3A332E; --surface-active:#443E39;
  --border:#443E39; --border-strong:#6E655C;
  --text:#FAF8F6; --text-2:#CFC8C1; --text-muted:#A39B92; --text-disabled:#6E655C;
  --action:#6E8E9F; --action-hover:#97B0BD; --on-action:#1C1A17;
  --accent:#ED967C; --accent-solid:#ED967C; --on-accent:#1C1A17;
  --link:#97B0BD; --focus:#ED967C;
  --overlay:rgba(0,0,0,.70);
  --success:#5BB377; --success-text:#7CC795; --success-bg:#1F3326; --success-border:#345C42;
  --warning:#E6B243; --warning-text:#EBC069; --warning-bg:#3A2F14; --warning-border:#5E4D22;
  --error:#E66761;   --error-text:#F0938E;   --error-bg:#3A1E1C;   --error-border:#5E3330;
  --info:#5C9DD6;    --info-text:#7FB2E0;    --info-bg:#1C2D3D;    --info-border:#34516E;
  --shadow-sm:0 1px 2px rgba(0,0,0,.40);
  --shadow-md:0 4px 14px -2px rgba(0,0,0,.50),0 2px 6px -2px rgba(0,0,0,.40);
  --shadow-lg:0 18px 44px -8px rgba(0,0,0,.60);

  --kg-forest:#4E9A5E;    --kg-forest-ink:#0F1A12;
  --kg-village:#D4604A;   --kg-village-ink:#1C1A17;
  --kg-farm:#E8BC55;      --kg-farm-ink:#1C1A17;
  --kg-water:#4D93CC;     --kg-water-ink:#0E1A24;
  --kg-monster:#B55E9B;   --kg-monster-ink:#1C1A17;
  --kg-mountain:#8A6A50;  --kg-mountain-ink:#1C1A17;
  --kg-wasteland:#A39B92; --kg-wasteland-ink:#1C1A17;
  --kg-sheet:#2A2622;     --kg-sheet-line:#4A4239;
  --kg-ruin:#C79A4E;
}

/* ===================== Grundlagen ===================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px; line-height: 24px;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: contain;
}
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }

.wrap { max-width: 560px; margin: 0 auto; padding: var(--space-4) var(--space-4) var(--space-8); }

/* ===================== App-Header (Styleguide 7.3) ===================== */
.app-header {
  position: relative; display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3); padding-bottom: var(--space-3); margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.app-header-title { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 1 1 auto; }
.app-header-icon { display: inline-flex; flex-shrink: 0; }
.app-header-icon img { width: 28px; height: 28px; border-radius: 7px; display: block; }
.app-header-title h1 {
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 22px; line-height: 28px; font-weight: 800;
  color: var(--text); letter-spacing: -0.01em; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-header-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.app-header-status {
  position: absolute; bottom: -9px; right: 0;
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 10px; line-height: 14px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap; pointer-events: none;
  transition: opacity .25s, background-color .2s, border-color .2s, color .2s;
}
.app-header-status[hidden] { display: none; }
.app-header-status[data-status="saved"] { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.app-header-status[data-status="offline"] { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }

.btn-pill {
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
  border-radius: var(--radius-pill); padding: 0 var(--space-3);
  min-height: 44px; min-width: 44px;
  font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  white-space: nowrap; flex-shrink: 0; transition: background-color .15s;
}
.btn-pill:hover { background: var(--surface-hover); }
.btn-pill:active { background: var(--surface-active); }

/* ===================== Jahreszeiten-Leiste ===================== */
.season-bar {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-3);
  margin-bottom: var(--space-3); box-shadow: var(--shadow-sm);
}
.season-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.season-name { font-family: 'Figtree', sans-serif; font-size: 18px; line-height: 24px; font-weight: 700; }
.season-time { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.edict-row { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.edict-chip {
  font-size: 11px; line-height: 16px; font-weight: 600;
  padding: 5px 10px; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  cursor: pointer; font-family: inherit;
  transition: background-color .15s, border-color .15s;
}
.edict-chip:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.edict-chip:active { background: var(--surface-active); }
/* Noch nicht eingetragener Erlass — lädt zum Antippen ein, drängt aber nicht. */
.edict-chip.empty {
  background: transparent; border-style: dashed;
  border-color: var(--border-strong); color: var(--text-muted);
}
.edict-chip.empty:hover { background: var(--surface-2); }
.edict-chip.active { background: var(--p-100); border-color: var(--p-200); color: var(--p-700); }
/* Aktiv UND noch offen: gestrichelt bleibt (= nicht eingetragen), dazu die
   Tönung (= wird diese Jahreszeit gebraucht). Beides muss ablesbar sein. */
.edict-chip.active.empty {
  background: var(--p-50); border-style: dashed; border-color: var(--p-300); color: var(--p-700);
}
[data-theme="dark"] .edict-chip.active.empty {
  background: var(--p-800); border-color: var(--p-400); color: var(--p-100);
}
[data-theme="dark"] .edict-chip.active { background: var(--p-800); border-color: var(--p-700); color: var(--p-100); }
.edict-chip b { font-weight: 800; }

/* ===================== Spielfeld ===================== */
.board-wrap { position: relative; margin-bottom: var(--space-3); }
.board {
  display: grid; grid-template-columns: repeat(11, 1fr);
  gap: 2px; padding: 6px;
  background: var(--kg-sheet); border: 1px solid var(--kg-sheet-line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  /* none statt manipulation: beim Wischen über das Raster wird gemalt,
     nicht gescrollt. */
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.cell {
  position: relative; aspect-ratio: 1; border-radius: 3px;
  background: transparent; border: 1px dashed var(--kg-sheet-line);
  display: flex; align-items: center; justify-content: center;
}
/* Jedes Gelände: Füllfarbe + eigenes Symbol. Das Symbol liegt als Maske auf
   ::before, damit die Tintenfarbe pro Typ aus einem Token kommt und in beiden
   Themes passt. Die Motive sind Lucide-Icons bzw. im selben Strichduktus
   gezeichnet (Stroke-basiert, runde Enden). */
.cell[data-t="forest"]    { background: var(--kg-forest);    --kg-ink: var(--kg-forest-ink);    --kg-sym: var(--sym-forest); }
.cell[data-t="village"]   { background: var(--kg-village);   --kg-ink: var(--kg-village-ink);   --kg-sym: var(--sym-village); }
.cell[data-t="farm"]      { background: var(--kg-farm);      --kg-ink: var(--kg-farm-ink);      --kg-sym: var(--sym-farm); }
.cell[data-t="water"]     { background: var(--kg-water);     --kg-ink: var(--kg-water-ink);     --kg-sym: var(--sym-water); }
.cell[data-t="monster"]   { background: var(--kg-monster);   --kg-ink: var(--kg-monster-ink);   --kg-sym: var(--sym-monster); }
.cell[data-t="mountain"]  { background: var(--kg-mountain);  --kg-ink: var(--kg-mountain-ink);  --kg-sym: var(--sym-mountain); }
.cell[data-t="wasteland"] { background: var(--kg-wasteland); --kg-ink: var(--kg-wasteland-ink); --kg-sym: var(--sym-wasteland); }
.cell[data-t] { border-style: solid; border-color: transparent; }

.cell[data-t]::before {
  content: ''; position: absolute; inset: 15%;
  background-color: var(--kg-ink);
  -webkit-mask: var(--kg-sym) center / contain no-repeat;
          mask: var(--kg-sym) center / contain no-repeat;
  opacity: .88; pointer-events: none;
}
/* Umbautes Gebirge: Symbol wechselt auf Münzgold statt nur heller zu werden. */
.cell.mtn-done::before { background-color: var(--kg-farm); opacity: 1; }

/* Ruine, noch unbemalt: gebrochene Säulen wie auf dem Originalbogen. */
.cell[data-ruin="1"]:not([data-t])::after {
  content: ''; position: absolute; inset: 16%;
  background-color: var(--kg-ruin);
  -webkit-mask: var(--sym-ruin) center / contain no-repeat;
          mask: var(--sym-ruin) center / contain no-repeat;
  opacity: .9; pointer-events: none;
}
/* Ruine, bemalt: nur noch eine dezente Ecke — sonst kollidiert sie mit dem
   Geländesymbol. Sichtbar bleiben muss sie, weil die Kornkammer sie wertet. */
.cell[data-ruin="1"][data-t]::after {
  content: ''; position: absolute;
  right: 8%; bottom: 8%; width: 26%; height: 26%;
  border: 1.5px solid var(--kg-ink); border-radius: 2px;
  opacity: .5; pointer-events: none;
}

/* Belegte Felder sind nicht bemalbar — erst radieren. Mit aktivem Radierer
   sind sie aber sehr wohl bearbeitbar, nur Gebirge und Ödland bleiben tabu. */
.board:not([data-brush="erase"]) .cell[data-t] { cursor: not-allowed; }
.board[data-brush="erase"] .cell[data-t="mountain"],
.board[data-brush="erase"] .cell[data-t="wasteland"] { cursor: not-allowed; }

/* Kurzer Wackler, wenn ein gesperrtes Feld angetippt wird. */
@keyframes kg-bump {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-2px); }
  75%      { transform: translateX(2px); }
}
.cell.bump { animation: kg-bump .3s ease; z-index: 1; }
.cell.bump::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .cell.bump { animation: none; outline: 2px solid var(--error); outline-offset: -2px; }
}

/* ===================== Steuerleiste ===================== */
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-3);
  margin-bottom: var(--space-3); box-shadow: var(--shadow-sm);
}
.panel h2 {
  font-family: 'Figtree', sans-serif; font-size: 18px; line-height: 24px;
  font-weight: 600; margin: 0 0 var(--space-2);
}
.label {
  font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* Münz-Zähler: minus — Wert — plus */
.coin-row { display: flex; align-items: center; gap: var(--space-3); }
.coin-value {
  font-family: 'Figtree', sans-serif;
  font-size: 26px; line-height: 34px; font-weight: 700;
  min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums;
}

.terr-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.terr-btn {
  min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; background: var(--surface);
}
/* Das Farbkästchen im Pinsel-Button zeigt dasselbe Symbol wie die Zelle,
   damit die Zuordnung Knopf → Feld ohne Nachdenken klappt. */
.terr-btn .sw { width: 18px; height: 18px; border-radius: 3px; position: relative; flex-shrink: 0; }
.terr-btn .sw[data-t="forest"]  { background: var(--kg-forest);  --kg-ink: var(--kg-forest-ink);  --kg-sym: var(--sym-forest); }
.terr-btn .sw[data-t="village"] { background: var(--kg-village); --kg-ink: var(--kg-village-ink); --kg-sym: var(--sym-village); }
.terr-btn .sw[data-t="farm"]    { background: var(--kg-farm);    --kg-ink: var(--kg-farm-ink);    --kg-sym: var(--sym-farm); }
.terr-btn .sw[data-t="water"]   { background: var(--kg-water);   --kg-ink: var(--kg-water-ink);   --kg-sym: var(--sym-water); }
.terr-btn .sw[data-t="monster"] { background: var(--kg-monster); --kg-ink: var(--kg-monster-ink); --kg-sym: var(--sym-monster); }
.terr-btn .sw::before {
  content: ''; position: absolute; inset: 11%;
  background-color: var(--kg-ink);
  -webkit-mask: var(--kg-sym) center / contain no-repeat;
          mask: var(--kg-sym) center / contain no-repeat;
  opacity: .9;
}
.terr-btn.sel { border-color: var(--action); border-width: 2px; background: var(--p-50); }
[data-theme="dark"] .terr-btn.sel { background: var(--p-800); }

.actions { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-3); }
.btn {
  min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; transition: background-color .15s;
}
.btn-primary { background: var(--action); color: var(--on-action); border: 1px solid var(--action); flex: 1; }
.btn-primary:hover:not(:disabled) { background: var(--action-hover); border-color: var(--action-hover); }
.btn-primary:disabled { background: var(--surface-2); color: var(--text-disabled); border-color: var(--border); cursor: not-allowed; }
.btn-ghost { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); }
.btn-ghost:hover { background: var(--surface-hover); }
.btn-accent { background: var(--accent-solid); color: var(--on-accent); border: 1px solid var(--accent-solid); }
.btn-accent:hover:not(:disabled) { background: var(--a-800); border-color: var(--a-800); }
[data-theme="dark"] .btn-accent:hover:not(:disabled) { background: var(--a-200); border-color: var(--a-200); }
.btn-accent:disabled {
  background: var(--surface-2); color: var(--text-disabled);
  border-color: var(--border); cursor: not-allowed;
}
.btn-danger { background: transparent; color: var(--error-text); border: 1px solid var(--error-border); }
.btn-danger:hover { background: var(--error); color: var(--n-0); border-color: var(--error); }
[data-theme="dark"] .btn-danger:hover { color: var(--n-900); }
.btn-sq { width: 44px; padding: 0; flex: 0 0 auto; }

.hintbox {
  margin-top: var(--space-2); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); font-size: 13px; line-height: 20px;
}
.hintbox.warn { background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning-text); }
.hintbox.err  { background: var(--error-bg);   border: 1px solid var(--error-border);   color: var(--error-text); }
.hintbox.info { background: var(--info-bg);    border: 1px solid var(--info-border);    color: var(--info-text); }

.stat-row { display: flex; gap: var(--space-2); }
.stat {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--space-2); text-align: center;
}
.stat .v { font-family: 'Figtree', sans-serif; font-size: 21px; line-height: 28px; font-weight: 700; color: var(--text); }
.stat .k { font-size: 11px; color: var(--text-muted); }

/* Nur das Ruhm-Feld führt weiter — der Pfeil macht das sichtbar, sonst
   sähen alle drei Kacheln gleich aus und keiner tippt drauf. */
.stat.tappable {
  position: relative; cursor: pointer; font-family: inherit;
  border-color: var(--border-strong);
  transition: background-color .15s;
}
.stat.tappable:hover { background: var(--surface-hover); }
.stat.tappable:active { background: var(--surface-active); }
.stat-more {
  position: absolute; top: 5px; right: 5px;
  color: var(--text-muted); display: block;
}

/* ===================== Modal ===================== */
.modal-bg {
  position: fixed; inset: 0; background: var(--overlay);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4); z-index: 50;
}
.modal-bg[hidden] { display: none; }
.modal {
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); width: 100%; max-width: 520px;
  max-height: 86vh; overflow-y: auto; padding: var(--space-5);
}
.modal h2 { font-family: 'Figtree', sans-serif; font-size: 26px; line-height: 34px; font-weight: 700; margin: 0 0 var(--space-3); }
.modal h3 { font-family: 'Figtree', sans-serif; font-size: 18px; line-height: 24px; font-weight: 600; margin: var(--space-4) 0 var(--space-2); }

.score-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.score-table th, .score-table td { padding: 6px 4px; text-align: right; border-bottom: 1px solid var(--border); }
.score-table th:first-child, .score-table td:first-child { text-align: left; }
.score-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; }
.score-table tr.sum td { font-weight: 700; border-bottom: none; border-top: 2px solid var(--border-strong); }
.score-table td { font-variant-numeric: tabular-nums; }
/* ---- Abrechnung je Jahreszeit (statt breiter Tabelle) ----
   Gestapelt, weil fünf Spalten mit Kartennamen auf 375 px nicht nebeneinander
   passen und das Modal sonst seitlich überläuft. */
.season-score {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); margin-bottom: var(--space-2);
  overflow: hidden;
}
.season-score.muted { background: var(--surface); border-style: dashed; }
.season-score-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); padding: var(--space-2) var(--space-3);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.season-score.muted .season-score-head { background: transparent; }
.season-score-head .nm {
  font-family: 'Figtree', sans-serif; font-size: 18px; line-height: 24px; font-weight: 700;
}
.season-score-head .tot {
  font-family: 'Figtree', sans-serif; font-size: 21px; line-height: 28px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.season-score-rows { padding: var(--space-1) var(--space-3) var(--space-2); }
.season-score-rows > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); padding: 5px 0; font-size: 14px;
}
.season-score-rows > div + div { border-top: 1px solid var(--border); }
.season-score-rows span { color: var(--text-2); min-width: 0; }
.season-score-rows b { font-variant-numeric: tabular-nums; white-space: nowrap; }

.score-total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); margin-top: var(--space-3);
  padding-top: var(--space-3); border-top: 2px solid var(--border-strong);
}
.score-total span { font-family: 'Figtree', sans-serif; font-size: 18px; font-weight: 700; }
.score-total b {
  font-family: 'Figtree', sans-serif; font-size: 26px; line-height: 34px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.season-score-head .tag {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--radius-pill); vertical-align: middle;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
}
.season-score-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-strong); background: var(--surface);
}
.season-score.muted .season-score-foot { background: transparent; }
.season-score-foot span { font-weight: 600; }
.season-score-foot b {
  font-family: 'Figtree', sans-serif; font-size: 21px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ---- Wertungsdialog ---- */
/* Erlass-Zeile im Karten-Modus: Buchstabe, Kartenname, aktueller Wert. */
.edict-slot {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; min-height: 56px; text-align: left;
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-family: inherit;
}
.edict-slot:hover { background: var(--surface-hover); }
.edict-slot.empty { border-style: dashed; border-color: var(--border-strong); }
.edict-slot .lt {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--action); color: var(--on-action);
  font-size: 13px; font-weight: 800;
}
.edict-slot .nm { flex: 1; font-size: 14px; font-weight: 600; min-width: 0; }
.edict-slot.empty .nm { font-weight: 400; color: var(--text-muted); }
.edict-slot .vl {
  font-family: 'Figtree', sans-serif; font-size: 21px; font-weight: 800;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}

/* Zahleneingabe im Modus „Selbst rechnen" */
.num-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.num-row span { font-size: 14px; font-weight: 600; min-width: 0; }
.num-row input {
  width: 84px; min-height: 44px; flex-shrink: 0;
  padding: 0 var(--space-2); text-align: right;
  font-family: 'Figtree', sans-serif; font-size: 21px; font-weight: 700;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.num-row input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Noch nicht eingetragener Erlass in der Partie-Übersicht */
.pick.empty { border-style: dashed; border-color: var(--border-strong); }
.pick.empty .t { color: var(--text-muted); }

/* Regeltext-Block nach der Wertung */
.why { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-3); }
.why b { font-size: 14px; color: var(--text); }
.why span { font-size: 13px; line-height: 19px; color: var(--text-2); }

/* ---- Detailansicht einer Wertungskarte ---- */
.detail-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); }
.detail-name { font-family: 'Figtree', sans-serif; font-size: 21px; line-height: 28px; font-weight: 700; }
.detail-en { font-size: 13px; color: var(--text-muted); }
.detail-cat {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
}
.detail-rule {
  font-size: 15px; line-height: 24px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--space-3); margin: 0;
}
.detail-live {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-top: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-sm);
  background: var(--info-bg); border: 1px solid var(--info-border);
}
.detail-live .k { font-size: 13px; color: var(--info-text); }
.detail-live .v { font-family: 'Figtree', sans-serif; font-size: 21px; font-weight: 700; color: var(--info-text); }
.detail-when { font-size: 13px; line-height: 20px; color: var(--text-2); margin: var(--space-3) 0 0; }

.pick-grid { display: grid; gap: var(--space-2); }
.pick {
  text-align: left; padding: var(--space-3); border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2);
}
.pick:hover { background: var(--surface-hover); }
/* Rein informative Karten (Partie-Übersicht) — kein Hover, kein Klickgefühl. */
.pick.static:hover { background: var(--surface-2); }
/* Die beiden Erlasse, die in dieser Jahreszeit gewertet werden. */
.pick.now { border-color: var(--action); border-left-width: 4px; }
.pick.sel { border-color: var(--action); border-width: 2px; background: var(--p-50); }
[data-theme="dark"] .pick.sel { background: var(--p-800); }
.pick .t { font-weight: 700; font-size: 14px; }
.pick .s { font-size: 12px; color: var(--text-muted); }
.pick .d { font-size: 12px; line-height: 18px; color: var(--text-2); margin-top: 4px; }

.seg { display: flex; gap: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.seg button { flex: 1; min-height: 44px; font-size: 14px; font-weight: 600; background: var(--surface); }
.seg button + button { border-left: 1px solid var(--border-strong); }
.seg button.sel { background: var(--action); color: var(--on-action); }