/* =====================================================================================================
   BKC – vzhled hry
   Tmavě šedé pozadí, bílé a šedé odstíny (bez oranžové), orámované tabulky. Obsah 1200 px, tabulky na
   celou šířku, čísla stejně široká. Barvy funkcí, statusů a hodností mají význam a nemění se.

   Obsah souboru:
     1. Proměnné (paleta, podklady řádků, písmo, mezery)
     2. Základ a pomocné třídy
     3. Rozložení hry (menu vlevo, lišta surovin, obsah)
     4. Nadpisy a podmenu
     5. Tabulky (záhlaví, proužky, čísla, součty) a podklady řádků podle významu
     6. Boxy a dlaždice s čísly
     7. Formuláře a tlačítka
     8. Hlášky, toasty, okno (dialog)
     9. Odznaky, štítky, ukazatele postupu
    10. Barvy funkcí, statusů a hodností
    11.–25. Jednotlivé stránky
    26. Úzké obrazovky (všechna @media na jednom místě)
        + blok „Telefony“ úplně na konci: menu pod tlačítkem, lišta surovin v mřížce, větší písmo a tlačítka
   CSP nepovoluje inline styly ani skripty: všechno je tady, šířky ukazatelů dělá <progress>.
   ===================================================================================================== */


/* ---------- 1. Proměnné ---------- */

:root {
  /* plochy */
  --bg: #2b2b2b;
  --bg-public: #151515;
  --surface: #313131;
  --surface-2: #3a3a3a;
  --surface-3: #454545;
  --input: #1e1e1e;

  /* čáry */
  --line: #555555;
  --line-soft: #3e3e3e;
  --line-strong: #808080;

  /* text */
  --text: #dcdcdc;
  --muted: #9b9b9b;
  --accent: #f4f4f4;
  --link: #c9c9c9;
  --white: #ffffff;

  /* významové barvy (klidné, čitelné na šedé) */
  --good: #8dcf8d;
  --bad: #e58585;
  --warn: #d9c87e;
  --info: #8ab6de;
  /* výsledek v historii a přehledu útoků [M 6.3, majitel 2026-10]: žlutě dobře pro tebe, oranžově špatně */
  --atk-yes: #dccb6e;
  --atk-no: #e39a5c;
  /* typy útoků [majitel 2026-10: každý útok jinou barvou]: zkratka, levý proužek a vybraná karta na /utok, legenda,
     řádky výpisů a bojová zpráva. Odstíny rozložené po kruhu barev (+ ocelová a hnědá), světlé na tmavém i zeleném. */
  --atk-dob: #f0b43c;
  --atk-par: #8fc65c;
  --atk-obr: #a7b2bf;
  --atk-let: #5f9ff5;
  --atk-nal: #46c8e0;
  --atk-spe: #b07ff2;
  --atk-sab: #f07fb0;
  --atk-odp: #f2735e;
  --atk-lou: #c39a72;
  --atk-uno: #d8d85a;
  --atk-pru: #3fcfa5;

  /* podklady řádků: jemné, přes pozadí; najetí myší řádek nezvýrazňuje (rozhodnutí majitele) */
  --row-alt: rgba(255, 255, 255, 0.04);
  --row-hover: transparent;
  --row-highlight: rgba(255, 255, 255, 0.1);
  --row-highlight-edge: #d8d8d8;
  --row-unread: rgba(255, 255, 255, 0.05);
  --row-good: rgba(141, 207, 141, 0.085);
  --row-bad: rgba(229, 133, 133, 0.085);
  --row-info: rgba(138, 182, 222, 0.09);
  --row-warn: rgba(217, 200, 126, 0.08);

  /* hlášky */
  --tint-good: rgba(141, 207, 141, 0.1);
  --tint-bad: rgba(229, 133, 133, 0.1);
  --tint-info: rgba(138, 182, 222, 0.1);

  /* oznámení adminů: světle modrá ze staré hry (#63aeef – odkazy a údaje na herních stránkách bkc-game.net) */
  --forum-admin: #63aeef;
  --forum-admin-bg: rgba(99, 174, 239, 0.1);

  /* krajská fóra (domovské fórum a oznámení vedení kraje): názvy zeleně [majitel 2026-10] */
  --forum-regional: #66d466;

  /* písmo a mezery */
  --font: Verdana, Tahoma, sans-serif;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --radius: 3px;

  /* rozložení */
  --page-width: 1200px;
  --sidebar-width: 230px;

  /* starší názvy, používané jinde ve hře */
  --ok: var(--good);
  --cell: var(--surface);
}


/* ---------- 2. Základ a pomocné třídy ---------- */

* {
  box-sizing: border-box;
}

html {
  /* místo pro posuvník i na krátkých stránkách, jinak se obsah posune do strany */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fs-base)/1.45 var(--font);
  /* čísla stejně široká: odpočty a částky se při změně nehýbou */
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--link);
}

a:hover {
  color: var(--white);
}

p {
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
}

/* Obrázky v tabulkách mají vždy svou velikost: s max-width v procentech je prohlížeč u široké tabulky
   zmáčkne (sloupec s obrázkem se zúží pod šířku obrázku). Co se nevejde, posouvá se uvnitř obsahu. */
td img,
th img {
  max-width: none;
}

.muted {
  color: var(--muted);
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.small {
  font-size: var(--fs-xs);
}

.nowrap {
  white-space: nowrap;
}

.good,
.win,
.online {
  color: var(--good);
}

.bad,
.loss {
  color: var(--bad);
}

.links {
  margin-top: 18px;
  text-align: center;
}

.links a {
  margin: 0 var(--sp-2);
}

form.inline {
  display: inline;
}

/* htmx tyhle styly normálně vkládá sám jako inline <style>, to ale Content-Security-Policy
   nepovolí, takže jsou vypnuté (meta htmx-config v layoutu) a jsou tady. */
.htmx-indicator {
  opacity: 0;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
  transition: opacity 200ms ease-in;
}


/* ---------- 3. Rozložení hry ---------- */

.shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  padding: 16px 14px;
}

.logo img {
  display: block;
  width: 190px;
  margin: 0 0 12px 4px;
}

.menu-block {
  margin: 24px 0;
}

.menu a,
.menu button {
  display: block;
  width: 100%;
  padding: 2px var(--sp-2);
  border: 1px dotted transparent;
  background: none;
  color: var(--white);
  font: 18px/1.4 var(--font);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu a.active,
.menu a:hover,
.menu button:hover {
  border-color: #9a9a9a;
}

/* Nová pošta v levém menu: tučně a v barvě funkce odesílatele (třídu role-* doplní nick-color-of) */
.menu a.mail-new {
  color: var(--nick, var(--white));
  font-weight: bold;
}

.main {
  flex: 1;
  min-width: 0;
  padding: 10px 18px 30px;
}

/* Všechny stránky mají stejnou šířku obsahu; co by bylo širší (velká tabulka), posouvá se uvnitř obsahu,
   takže se stránka do strany nikdy nerozjede. */
.content {
  max-width: var(--page-width);
  margin: 0 auto;
  overflow-x: auto;
}

/* Horní lišta surovin: nad obsahem, stejně široká jako on */
.resbar {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto 10px;
  border-collapse: collapse;
  border: 1px solid var(--line);
  background: var(--surface);
}

.resbar td {
  padding: 3px 8px;
  border: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: bold;
  text-align: center;
  vertical-align: top;
}

.resbar .label {
  display: block;
  color: var(--muted);
  font-weight: normal;
}

.resbar .value {
  display: block;
  color: var(--white);
}

.resbar .delta {
  display: block;
  color: var(--accent);
}

.resbar .delta.good {
  color: var(--good);
}

.resbar .delta.bad {
  color: var(--bad);
}

.resbar .small {
  display: block;
  color: var(--muted);
  font-weight: normal;
}

.resbar td.server-time .value {
  white-space: nowrap;
}

/* Ikony pošty v horní liště: zhasnuté šedé, nová pošta svítí (bez rámečků); počet u OS má barvu odesílatele (--nick). */
.resbar td.mail-inds .value {
  display: flex;
  gap: var(--sp-1);
  justify-content: center;
}

a.mail-ind {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px;
  text-decoration: none;
}

a.mail-ind.off img {
  opacity: 0.4;
  filter: grayscale(1);
}

a.mail-ind .count {
  color: var(--nick, var(--white));
  font-size: var(--fs-xs);
}


/* Zpráva pro všechny (údržba) a hraní za hráče nahoře na herních stránkách */
.admin-banner {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto 10px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--info);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--white);
  text-align: center;
}

.admin-banner .btn {
  margin-left: var(--sp-2);
}


/* ---------- 4. Nadpisy a podmenu ---------- */

h1,
h2 {
  color: var(--accent);
  font-weight: bold;
  text-align: center;
  overflow-wrap: break-word;
}

h1 {
  margin: 14px 0 12px;
  font-size: var(--fs-lg);
}

h2 {
  margin: 22px 0 10px;
  font-size: var(--fs-md);
}

h3 {
  margin: 14px 0 6px;
  color: var(--accent);
  font-size: var(--fs-base);
}

caption {
  padding: 4px 0;
  color: var(--accent);
  font-weight: bold;
}

/* Podmenu sekce (Stavby | Upgrade staveb …): záložky, aktivní má podklad. */
.submenu {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  align-items: center;
  justify-content: center;
  margin: 2px 0 12px;
}

.submenu a {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--muted);
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}

.submenu a:hover {
  color: var(--white);
}

.submenu a.active {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--white);
}

.submenu .sep {
  color: var(--line-strong);
}

.submenu .badge {
  margin-left: -2px;
}

/* Druhá úroveň podmenu (podkapitoly, další stránky Republiky, záložky uvnitř stránky): menší, aktivní podtržená */
.submenu.role-submenu,
.submenu.manual-sections,
.region-links {
  margin-top: -6px;
  font-size: var(--fs-sm);
}

.submenu.role-submenu a,
.submenu.manual-sections a {
  padding: 1px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
}

.submenu.role-submenu a.active,
.submenu.manual-sections a.active {
  border-bottom-color: currentColor;
  background: none;
}

/* Odkazy na kraje pod menu Republiky */
.region-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  justify-content: center;
  margin: -4px 0 12px;
}

.region-links a {
  color: var(--link);
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}

.region-links a:hover {
  color: var(--white);
  text-decoration: underline;
}

.region-links a.active {
  color: var(--white);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}

/* Menu vlády a podmenu krajské armády: barva = nejnižší funkce, která tam může jednat (proměnná --nick z tříd role-*),
   role-all (všichni hráči kraje) zůstává šedá. Aktivní položku značí podtržení, ať se barva funkce neztratí. */
.submenu.role-menu a {
  padding: 2px 8px 1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--nick, var(--muted));
}

.submenu.role-menu a:hover {
  border-bottom-color: var(--line);
  color: var(--nick, var(--white));
}

.submenu.role-menu a.active {
  border-bottom-color: currentColor;
  background: none;
  color: var(--nick, var(--white));
}

/* Legenda barev (funkce v menu vlády, nicky v Republice) */
.role-legend {
  margin: 6px 0 12px;
  color: var(--muted);
  font-size: var(--fs-xs);
  text-align: center;
}

.role-legend span {
  margin: 0 4px;
  font-weight: bold;
  white-space: nowrap;
}

.role-legend .muted,
.role-legend .role-all {
  color: var(--muted);
}

.submenu + .role-legend {
  margin-top: -6px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  text-align: center;
}

.toolbar select {
  width: auto;
  max-width: 100%;
}

.stats {
  margin: 8px 0 14px;
  color: var(--muted);
  text-align: center;
}

.stats b {
  color: var(--text);
}

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  justify-content: center;
  margin: 10px 0;
}

.pager b {
  color: var(--accent);
}


/* ---------- 5. Tabulky ---------- */

table.grid {
  margin: 0 auto;
  border-collapse: collapse;
}

.content table.grid {
  width: 100%;
}

.grid th,
.grid td {
  padding: 5px 10px;
  border: 1px solid var(--line);
  vertical-align: middle;
}

.grid th {
  background: var(--surface-2);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: bold;
}

.grid th[scope="row"] {
  background: none;
  color: var(--muted);
  font-size: var(--fs-base);
  font-weight: normal;
  text-align: left;
}

.grid th a {
  color: var(--accent);
}

.grid td {
  overflow-wrap: break-word;
}

.grid td.when {
  white-space: nowrap;
}

.grid td.num,
.grid th.num {
  text-align: right;
  white-space: nowrap;
}

/* Proužky: každý druhý řádek o chlup světlejší. :where() drží nízkou váhu, takže podklady podle
   významu (můj řádek, současná politika …) proužek vždy přebijí. */
:where(table.grid > tbody > tr:nth-child(even)) > td,
:where(table.grid > tbody > tr:nth-child(even)) > th[scope="row"] {
  background: var(--row-alt);
}

/* Součtové řádky */
.grid tr.total > *,
.grid tr.ka-total > *,
.grid tfoot tr > * {
  border-top: 2px solid var(--line-strong);
  background: var(--surface);
  font-weight: bold;
}

.grid tr.total > th,
.grid tr.ka-total > th,
.grid tfoot tr > th {
  color: var(--accent);
}

/* Přehledy Republiky pod sebou s mezerou */
table.grid.republic {
  margin-bottom: var(--sp-4);
}

/* Řazení klikem na záhlaví (game.js) */
th[data-sort] {
  cursor: pointer;
  user-select: none;
}

th[data-sort]::after {
  content: "\00a0⇅";
  color: var(--muted);
  font-size: var(--fs-xs);
}

th[data-sort].sorted-asc::after {
  content: "\00a0▲";
  color: var(--accent);
}

th[data-sort].sorted-desc::after {
  content: "\00a0▼";
  color: var(--accent);
}

/* Řazení odkazem v záhlaví (Republika): sestupně ▼, vzestupně ▲ */
.republic th.sorted a::after {
  content: "\00a0▼";
}

.republic th.sorted.asc a::after {
  content: "\00a0▲";
}

/* --- Podklady řádků podle významu --- */

/* já, můj kraj, současná politika, můj hlas: světlý podklad a bílý proužek vlevo */
.grid tr.me > *,
.grid tr.mine > *,
.grid tr.region-current > *,
.grid tr.referendum-mine > * {
  background: var(--row-highlight);
}

.grid tr.me > :first-child,
.grid tr.mine > :first-child,
.grid tr.region-current > :first-child,
.grid tr.referendum-mine > :first-child {
  box-shadow: inset 3px 0 0 var(--row-highlight-edge);
}

.grid tr.me td,
.grid tr.referendum-mine td:first-child {
  color: var(--white);
}

/* nepřečteno, nové příspěvky */
.grid tr.unread > td,
.grid tr.has-new > td {
  background: var(--row-unread);
}

.grid tr.unread > td {
  font-weight: bold;
}

/* hotovo / výhra */
.grid tr.research-done > *,
.grid tr.task-done > *,
.grid tr.lotto-row-win > *,
.grid tr.hangman-row-win > * {
  background: var(--row-good);
}

/* běží (aktivní projekt) */
.grid tr.research-active > * {
  background: var(--row-info);
}

.grid tr.research-active > :first-child {
  box-shadow: inset 3px 0 0 var(--info);
}

/* zamčené, prázdné, nedostupné: tlumeně */
.grid tr.region-locked > td,
table.grid.region-locked td {
  color: var(--muted);
  opacity: 0.7;
}

.grid tr.task-done > td,
.grid tr.attack-unit-none > td {
  color: var(--muted);
}

/* nabídka systému (neutrální město) */
.grid tr.trade-neutral > td {
  background: var(--row-info);
}

/* první řádek skupiny (antimulti) */
.grid tr.admin-group-start > td {
  border-top: 2px solid var(--line-strong);
}


/* ---------- 6. Boxy a dlaždice ---------- */

.city-box,
.herna-box,
.home-box,
.landing-side,
.city-action,
.attack-filter,
.herna-draw,
.hangman-card,
.mail-body,
.choice {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* Box s nadpisem (formuláře měst, fondu, vlády, herny) */
.city-box {
  width: 100%;
  max-width: 520px;
  margin: 12px auto;
  padding: 0 14px 4px;
}

.city-box .box-title,
.herna-box .box-title {
  margin: 0 -14px 10px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--surface-2);
  color: var(--accent);
  font-weight: bold;
  text-align: center;
  overflow-wrap: break-word;
}

.city-box.region-wide,
.city-box.bulk-replace {
  max-width: none;
}

/* Potvrzovací krok a nevratné akce (červený rámeček); okno potvrzení je v bloku „Potvrzovací okno“ na konci */
.city-box.confirm-box {
  border-color: #8a5050;
}

.city-box.confirm-box {
  max-width: 680px;
}

.city-box.confirm-box .box-title {
  background: #4a3333;
}


/* Boxy vedle sebe v pravidelné mřížce (koupit / prodat, bankomat, fond, vláda) */
.city-forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-3) var(--sp-4);
  align-items: stretch;
  margin: 12px 0;
}

.city-forms .city-box {
  max-width: none;
  margin: 0;
}

/* jediný box v mřížce zůstane rozumně široký uprostřed */
.city-forms > .city-box:only-child {
  justify-self: center;
  width: 100%;
  max-width: 520px;
}

.city-box-bottom {
  margin-top: 12px;
}

/* Dlaždice s čísly (fond, admin, útok) */
.stat-tiles,
.admin-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--sp-2);
  margin: 10px 0;
}

.stat-tile,
.admin-tile,
.fund-building {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
  overflow-wrap: break-word;
}

.stat-tile .label,
.stat-tile small,
.admin-tile .label,
.admin-tile small,
.fund-building .label {
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs);
}

.stat-tile b,
.admin-tile b {
  display: block;
  margin: 2px 0;
  color: var(--white);
  font-size: var(--fs-lg);
}

.admin-tile.warn {
  border-color: var(--warn);
}


/* ---------- 7. Formuláře a tlačítka ---------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
input:not([type]),
select,
textarea {
  width: 100%;
  max-width: 100%;
  padding: 4px 6px;
  border: 1px solid #777777;
  border-radius: 2px;
  background: var(--input);
  color: var(--white);
  font: inherit;
  color-scheme: dark;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #b5b5b5;
  outline: none;
}

input[type="file"] {
  max-width: 100%;
  color: var(--text);
}

.form {
  max-width: 460px;
  margin: 0 auto;
}

.form.wide {
  max-width: 820px;
}

.city-box .form:not(.wide),
.herna-box .form {
  max-width: none;
}

.form .field {
  margin: 0 0 12px;
}

.form label {
  display: block;
  margin-bottom: 3px;
  color: var(--accent);
}

.form .hint,
.hint {
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs);
}

.form .check {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.form .check label {
  display: inline;
  margin: 0;
  color: var(--text);
}

.field-validation-error,
.validation-summary-errors {
  color: var(--bad);
}

.validation-summary-errors ul {
  margin: 0 0 12px;
  padding-left: 18px;
}

/* Vstupy v tabulkách a řádcích s akcí mají pevnou šířku, ať se tabulka neroztahuje */
.grid input.count,
.grid input[type="number"] {
  width: 110px;
}

.city-action input.count,
.bulk-replace-fields input.count {
  width: 90px;
}

/* Tlačítka */
button.btn,
a.btn,
input[type="submit"] {
  display: inline-block;
  padding: 3px 14px;
  border: 1px solid #8f8f8f;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--white);
  font: inherit;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
}

button.btn:hover,
a.btn:hover,
input[type="submit"]:hover {
  background: #4a4a4a;
  color: var(--white);
}

button.btn:focus-visible,
a.btn:focus-visible {
  outline: 2px solid #bdbdbd;
  outline-offset: 1px;
}

button.btn:disabled,
button.btn:disabled:hover {
  background: var(--surface-2);
  opacity: 0.4;
  cursor: not-allowed;
}

button.btn.small,
a.btn.small {
  padding: 1px 9px;
  font-size: var(--fs-sm);
  font-weight: bold;
  white-space: nowrap;
}

button.btn.primary {
  border-color: #dedede;
  background: #4a4a4a;
  font-weight: bold;
}

button.btn.primary:hover {
  background: #575757;
}

button.btn.danger,
a.btn.danger {
  border-color: #a85d5d;
  background: #502c2c;
}

button.btn.danger:hover,
a.btn.danger:hover {
  background: #633636;
}

a.btn.attack img {
  vertical-align: middle;
}

/* Tlačítko, které vypadá jako odkaz (mazání červeně, jinde jako odkaz) */
button.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--bad);
  font: inherit;
  font-size: var(--fs-xs);
  text-decoration: underline;
  cursor: pointer;
}

/* Řádek s akcí: popisek, pole a tlačítko v jednom řádku, při nedostatku místa se zalomí */
.city-actions {
  margin: 16px 0;
}

.city-action {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  margin: 8px 0;
  padding: 8px 12px;
}

.city-action select,
.city-action input[type="text"] {
  width: auto;
  min-width: 0;
}

/* Výběr kraje a politiky (vstup do hry) */
.choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
}

.choice {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  min-width: 0;
  padding: 5px 8px;
}

.choice.closed {
  opacity: 0.45;
}

.choice small {
  display: block;
  color: var(--muted);
}

.searchbox {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  justify-content: center;
  margin: 0 auto 12px;
}

.searchbox input[type="text"] {
  width: 200px;
}


/* ---------- 8. Hlášky, toasty, okno ---------- */

.notice {
  margin: 12px auto;
  color: var(--text);
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  overflow-wrap: break-word;
}

.notice.ok {
  border-color: #4f7a4f;
  border-left-color: var(--good);
  background: var(--tint-good);
}

.notice.bad {
  border-color: #845050;
  border-left-color: var(--bad);
  background: var(--tint-bad);
}

/* Toasty s oznámeními vpravo dole */
.toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: min(340px, calc(100vw - 32px));
}

.toast {
  display: block;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: #1e1e1e;
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  overflow-wrap: break-word;
  cursor: pointer;
}

.toast b {
  display: block;
  color: var(--accent);
}

.toast span {
  display: block;
  margin-top: 2px;
}

a.toast:hover {
  color: var(--white);
}

.toast.ok {
  border-left-color: var(--good);
}

.toast.bad {
  border-left-color: var(--bad);
}

/* Okno (dialog), např. přejmenování města */
dialog.modal {
  min-width: min(320px, 92vw);
  max-width: 440px;
  padding: 12px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #1e1e1e;
  color: var(--text);
}

dialog.modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

dialog.modal .box-title {
  margin-bottom: var(--sp-2);
  color: var(--accent);
  font-weight: bold;
  text-align: center;
}


/* ---------- 9. Odznaky, štítky, ukazatele ---------- */

/* Kulatý odznak s počtem (nepřečtená oznámení, pošta) */
.badge {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: #111111;
  font-size: var(--fs-xs);
  font-weight: bold;
  line-height: 18px;
  text-align: center;
  vertical-align: middle;
}

.badge[hidden] {
  display: none;
}

/* Nová pošta: výrazný červený odznak u Pošty */
.badge.mail {
  background: #c95d5d;
  color: var(--white);
}

/* Návrhy od jiných krajů čekají na velení (menu Vláda, Smlouvy) [majitel 2026-10] */
.badge.diplomacy {
  margin-left: 4px;
  background: #c9a227;
  color: #1a1a1a;
}

/* Štítky v textu („domovské“, „běží“, „tvůj hlas“, příznaky v adminu) */
.tag,
.region-tag,
.admin-flag,
.post-new {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: normal;
  line-height: 16px;
  white-space: nowrap;
  vertical-align: 1px;
}

/* Čip se zaobleným okrajem (stav šibenice) */
.chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #262626;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.chip b {
  color: var(--text);
}

.chip.good b {
  color: var(--good);
}

/* Ukazatele postupu: <progress> místo inline šířky (CSP nepovoluje style="…"), všude stejný vzhled */
progress {
  height: 6px;
  border: 0;
  border-radius: 3px;
  background: var(--input);
  color: #cfcfcf;
  vertical-align: middle;
  appearance: none;
  overflow: hidden;
}

progress::-webkit-progress-bar {
  border-radius: 3px;
  background: var(--input);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}

progress::-webkit-progress-value {
  border-radius: 3px;
  background: #cfcfcf;
}

progress::-moz-progress-bar {
  border-radius: 3px;
  background: #cfcfcf;
}

progress.army-bar,
progress.research-progress,
progress.gen-bar,
progress.attack-quota,
progress.task-progress {
  display: block;
  width: 100%;
  margin-top: 3px;
}

progress.task-progress {
  max-width: 180px;
}

progress.research-progress {
  height: 7px;
  margin: 2px 0;
}

progress.attack-quota {
  height: 4px;
  margin: 2px 0;
}

.referendum-share progress {
  width: 120px;
  margin-right: 6px;
}

progress.age-progress {
  width: 120px;
  height: 8px;
  margin: 0 6px;
}

.online-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: #5fae5f;
}


/* ---------- 10. Barvy funkcí, statusů a hodností ----------
   Barvy z manuálu [M 9.1]. Občan, Vyhnanec, Moderátor a Ostuda mají zase přesně barvy z manuálu [majitel 2026-10];
   ostatní na šedém pozadí nečitelné zůstávají zesvětlené (rozhodnutí majitele 3. 10. 2026).
   Třídy role-* a status-* vypisuje tag helper <nick> (Features/Players/NickTagHelper.cs), ostatní balíčky
   je jen používají. Proměnná --nick nese barvu i pro a.nick:hover. */
:root {
  --role-velitel: #ffff00;
  --role-zastupce: #ffffff;
  --role-senator: #3366ff;
  --role-general: #00aa00;
  --role-kronikar: #a5ff3f;
  --role-obcan: #626cc6;
  --role-admin: #01baff;
  --role-moderator: #cd5acf;
  --status-novacek: #ffb6c1;
  --status-veteran: #fa8072;
  --status-ostuda: #996633;
  --status-vyhnanec: #555555;
  --status-antimulti: #ffcc99;
}

.role-velitel { --nick: var(--role-velitel); color: var(--nick); }
.role-zastupce { --nick: var(--role-zastupce); color: var(--nick); }
.role-senator { --nick: var(--role-senator); color: var(--nick); }
.role-general { --nick: var(--role-general); color: var(--nick); }
.role-kronikar { --nick: var(--role-kronikar); color: var(--nick); }
.role-obcan { --nick: var(--role-obcan); color: var(--nick); }
.role-admin { --nick: var(--role-admin); color: var(--nick); }
.role-moderator { --nick: var(--role-moderator); color: var(--nick); }
.status-novacek { --nick: var(--status-novacek); color: var(--nick); }
.status-veteran { --nick: var(--status-veteran); color: var(--nick); }
.status-ostuda { --nick: var(--status-ostuda); color: var(--nick); }
/* Vyhnanec má šedý nick [M 9.1: #555555]; AntiMulti tým má béžovou [M 9.1]. */
.status-vyhnanec { --nick: var(--status-vyhnanec); color: var(--nick); }
.status-antimulti { --nick: var(--status-antimulti); color: var(--nick); }

.nick {
  white-space: nowrap;
}

a.nick {
  text-decoration: none;
}

a.nick:hover {
  color: var(--nick, var(--white));
  text-decoration: underline;
}

.badge-tags .role-obcan {
  color: var(--text);
}

.ka-exiled {
  color: var(--status-vyhnanec);
}

/* Hodnosti podle skupin (RankStyle.cs) */
.rank-muzstvo { color: #b5b5b5; }
.rank-poddustojnik { color: #ffffff; }
.rank-praporcik { color: #8fd18f; }
.rank-nizsi-dustojnik { color: #7dc0ff; }
.rank-vyssi-dustojnik { color: #c9a0ff; }
.rank-general { color: #ffd700; font-weight: bold; }

img.rank {
  margin-right: 6px;
  vertical-align: middle;
}

/* Avatary (nejvýš 100 × 100, menší se nezvětšují) */
img.avatar {
  display: block;
  max-width: 100px;
  max-height: 100px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.profile-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  margin: 0 auto 12px;
}


/* ---------- 11. Hlavní ---------- */

.home-government {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  justify-content: flex-start;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

/* Krajská nástěnka uprostřed: rámeček s hlavičkou (nadpis, autor, Skrýt). Skrytá = jeden řádek „Zobrazit“. */
.home-board {
  max-width: 680px;
  margin: 0 auto 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.home-board-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 5px 10px;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--surface-2);
}

.home-board-head h2 {
  margin: 0;
  color: var(--accent);
  font-size: var(--fs-md);
}

.home-board-head .home-board-meta {
  flex: 1;
  font-size: var(--fs-xs);
}

.home-board-head form {
  margin: 0 0 0 auto;
}

.home-board > p {
  margin: 8px 10px;
}

.home-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  margin: 10px 0 6px;
}

.home-box {
  min-width: 0;
  padding-bottom: 6px;
}

.home-box h2.box-title {
  margin: 0 0 4px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--surface-2);
  color: var(--accent);
  font-size: var(--fs-md);
  font-weight: bold;
  text-align: center;
}

.home-board-text {
  max-width: none;
  padding: 8px 12px;
}

.home-note > summary {
  padding: 5px 10px;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.home-note-when {
  margin-right: 6px;
  white-space: nowrap;
}

.home-note[open] {
  background: var(--surface);
}

.home-note-body {
  padding: 0 10px 6px 28px;
  overflow-wrap: anywhere;
}

.home-note-body::after {
  content: "";
  display: block;
  clear: both;
}

.home-note-body p {
  margin: 4px 0;
}

.home-stats,
.home-relations {
  width: 100%;
  border-collapse: collapse;
}

.home-stats th,
.home-relations tbody th {
  width: 42%;
  padding: 3px 10px;
  color: var(--muted);
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
}

.home-relations tbody th {
  width: auto;
}

.home-stats td,
.home-relations td {
  padding: 3px 10px;
  overflow-wrap: anywhere;
}

.home-stats tr + tr > *,
.home-relations tbody tr > * {
  border-top: 1px solid var(--line-soft);
}

.home-relations thead th {
  padding: 3px 10px;
  color: var(--accent);
  font-size: var(--fs-sm);
  text-align: left;
}


/* ---------- 12. Stavby ---------- */

.grid img.thumb {
  display: block;
  width: 100px;
  height: auto;
}

/* Nahrazení budov ve všech městech, široké jako tabulka */
.bulk-replace-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: center;
}

.bulk-replace-fields label {
  white-space: nowrap;
}

.bulk-replace-fields select {
  width: auto;
}

.bulk-confirm .bulk-list {
  margin: 4px 0 10px;
  padding-left: 22px;
}


/* ---------- 13. Jednotky a hrdinové ---------- */

.army-intro {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: bold;
  text-align: center;
}

.army-ub {
  margin: 0 0 10px;
  color: var(--accent);
  font-weight: bold;
  text-align: center;
}

.army-stats {
  margin: 0 0 16px;
  font-size: var(--fs-sm);
}

.army-stats p {
  margin: 2px 0;
  text-align: center;
}

.army-stats b {
  color: var(--white);
}

/* Rozpis síly (celková, pozemní, vzdušná, partyzánská) */
.army-power-split {
  margin: 8px auto 10px;
}

.army-power-split td,
.army-power-split th {
  padding: 3px 10px;
}

/* Tabulky armády: hodnoty na střed */
.army-units th,
.army-units td,
.army-upgrades td,
.army-heroes td,
.army-hire td {
  text-align: center;
}

.army-units td,
.army-units th {
  padding: 3px 6px;
}

.army-units th:first-child {
  white-space: nowrap;
}

.army-unit-name small,
.army-units td small,
.army-upgrades td small,
.army-heroes td small,
.army-hire td small,
.army-img small {
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: normal;
}

.army-units td.noncombat-effect,
.noncombat-units td.noncombat-effect {
  font-size: var(--fs-xs);
}

.grid td.army-img {
  padding: 2px;
}

.army-img img {
  display: block;
  width: 120px;
  height: auto;
  margin: 0 auto;
}

.army-img.small img {
  width: 80px;
}

.army-units input[type="number"] {
  width: 100px;
}

.army-units td button.btn.small {
  margin: 1px;
}

.army-exp {
  min-width: 150px;
}

.army-hire td:nth-child(2) {
  text-align: left;
}

.army-choice {
  display: block;
  margin: 2px 0;
  cursor: pointer;
}

.army-hire .army-choice small {
  display: inline;
  margin-left: 4px;
}

.army-hire .hero-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Portréty hrdinů ze staré hry (originál 160 × 120) */
.army-heroes td.hero-cell {
  min-width: 180px;
}

img.hero-portrait {
  display: block;
  width: 120px;
  height: 90px;
  margin: 0 auto 4px;
  border: 1px solid var(--line);
  object-fit: cover;
}

img.hero-thumb {
  width: 48px;
  height: 36px;
  border: 1px solid var(--line);
  object-fit: cover;
  vertical-align: middle;
}

/* Krajská armáda: tabulky hráče i vlády se stejnými sloupci; obrázky jednotek větší (64 × 48, půlka originálu) */
.ka-units img.cat-img {
  width: 64px;
  height: 48px;
}

table.grid.ka-units {
  table-layout: fixed;
}

.ka-units th:nth-child(2) {
  width: 22%;
}

.ka-units th:nth-child(3) {
  width: 34%;
}

.ka-units input[type="number"] {
  width: 140px;
  max-width: 70%;
}

.ka-short,
.ka-closed {
  color: var(--bad);
}

.ka-short {
  font-weight: bold;
}

.ka-open,
.ka-payouts tr.ka-incoming td {
  color: var(--good);
}


/* ---------- 14. Města ---------- */

.city-warning {
  color: var(--accent);
  font-weight: bold;
  text-align: center;
}

.city-table {
  font-size: var(--fs-sm);
}

.city-table td {
  padding: 4px 8px;
}

.city-table td.num {
  white-space: nowrap;
}

.city-table .city-name {
  color: var(--white);
}

/* Města nabízená v obchodě: červený název [M 13.4] */
.city-table .city-name.city-offered {
  color: var(--bad);
}

.city-table .tag.city-offered-tag {
  border-color: #845050;
  color: var(--bad);
  text-decoration: none;
}

/* Přejmenování ve správě měst bíle (link-button je jinak červený jako mazání) */
.city-table button.link-button {
  color: var(--white);
}

.city-table td.city-img {
  width: 84px;
  padding: 2px;
  text-align: center;
}

.city-img img,
.city-img .noimg {
  display: block;
  width: 80px;
  height: 60px;
  object-fit: cover;
}

.city-img .noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #262626;
  color: var(--muted);
  font-size: var(--fs-xs);
}

.city-table .city-output {
  white-space: nowrap;
}

/* Spokojenost */
.satisfaction-warn {
  color: var(--warn);
}

.stats .satisfaction,
.city-table td.satisfaction b {
  white-space: nowrap;
}

.city-table td.satisfaction {
  white-space: normal;
}

.city-table td.num .small:not(.nowrap) {
  white-space: normal;
}

.city-table td.satisfaction,
.stats .satisfaction[title] {
  cursor: help;
}


/* ---------- 15. Obchod a bankomat ---------- */

.trade-intro {
  margin: 0 0 12px;
  color: var(--muted);
  text-align: center;
}

/* Pravidla obchodu jako krátký seznam */
.trade-rules {
  margin: 6px 0 12px;
  padding-left: 18px;
}

.trade-table {
  font-size: var(--fs-sm);
}

.trade-table td {
  padding: 4px 8px;
}

.trade-table .tag.trade-neutral-tag {
  border-color: #4f6a85;
  color: var(--info);
}

.trade-actions form,
.trade-buy {
  display: inline-block;
  margin: 1px 2px;
}

.trade-buy input[type="number"] {
  width: 110px;
  text-align: right;
}

.trade-table td.trade-img {
  width: 84px;
  padding: 2px;
}

.trade-img img {
  display: block;
  width: 80px;
  height: 60px;
  object-fit: cover;
}

/* Trh: nejlevnější nabídky po skupinách, všechny tabulky se stejnými sloupci */
h3.trade-group {
  margin: 14px 0 4px;
  text-align: center;
}

table.grid.trade-cheapest {
  table-layout: fixed;
}

.trade-cheapest th:nth-child(2),
.trade-cheapest th:nth-child(3),
.trade-cheapest th:nth-child(4) {
  width: 15%;
}

.trade-cheapest th:nth-child(5) {
  width: 260px;
}

/* Bankomat jako obrazovka starého bankomatu [v2] */
.bank-screen {
  max-width: 460px;
  margin: 0 auto 16px;
  padding: 12px 18px;
  border: 6px solid #666666;
  border-radius: 6px;
  background: #050505;
}

.bank-welcome {
  margin-bottom: var(--sp-2);
  color: #e05a5a;
  font-size: var(--fs-lg);
  font-weight: bold;
  text-align: center;
}

.bank-summary {
  margin: 0 auto;
  border-collapse: collapse;
}

.bank-summary th,
.bank-summary td {
  padding: 2px 10px;
}

.bank-summary th {
  color: var(--muted);
  font-weight: normal;
  text-align: left;
}

.bank-summary td {
  color: var(--white);
  text-align: right;
}

.bank-note {
  margin: var(--sp-2) 0 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  text-align: center;
}


/* ---------- 16. Fond, výzkum a úkoly ---------- */

/* MWatt s bleskem */
.stat-tile.mwatt b::before,
.mwatt-val::before {
  content: "\26A1 ";
  color: #ffe14d;
}

.fund-buildings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  margin: 10px 0;
}

.fund-building {
  padding: 6px;
}

.fund-building img {
  display: block;
  width: 100px;
  height: 75px;
  margin: 0 auto 4px;
  object-fit: cover;
}

.fund-building b {
  color: var(--white);
  font-size: var(--fs-lg);
}

.fund-top {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Výzkumné projekty: pevné sloupce, postup jako <progress> */
table.grid.research-projects {
  table-layout: fixed;
}

.research-projects th:nth-child(2) {
  width: 24%;
}

.research-projects th:nth-child(3) {
  width: 96px;
}

.research-projects th:nth-child(4) {
  width: 20%;
}

.research-projects th:nth-child(5) {
  width: 140px;
}

.research-projects tr.research-done td:first-child b {
  color: var(--good);
}

img.research-img {
  float: left;
  width: 80px;
  height: 60px;
  margin-right: var(--sp-2);
  object-fit: cover;
}

.research-projects input.count {
  width: 70px;
}

/* „2 / 4“ a pod tím dílky generací: hotové bílé, běžící napůl */
.research-gen {
  display: block;
  color: var(--muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.research-gen b {
  color: var(--accent);
  font-size: 18px;
}

.research-pips {
  display: inline-flex;
  gap: 3px;
  margin-top: 3px;
}

.research-pip {
  display: inline-block;
  width: 14px;
  height: 6px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--input);
}

.research-pip.done {
  border-color: var(--accent);
  background: var(--accent);
}

.research-pip.running {
  border-color: var(--accent);
  background: linear-gradient(90deg, var(--muted) 50%, var(--input) 50%);
}

.story-status th[scope="row"] {
  width: 30%;
}

/* Úkoly */
.task-table {
  margin: 0 auto 14px;
}

.task-table .task-level {
  color: var(--accent);
  font-weight: bold;
  white-space: nowrap;
}


/* ---------- 17. Kraj: politiky, vláda, diplomacie ---------- */

form.region-inline {
  display: inline;
  margin: 0;
}

.region-nowrap {
  white-space: nowrap;
}

.region-small {
  font-size: var(--fs-xs);
}

.region-note {
  margin: 10px auto;
}

.region-unlock {
  margin: 0 auto 10px;
}

.region-unlock form {
  margin-left: var(--sp-2);
}

.region-text {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.region-board {
  max-width: none;
  padding: 4px 2px;
}

.region-board-meta {
  margin: 6px 0 0;
  text-align: right;
}

.region-question {
  margin: var(--sp-2) 0;
  color: var(--white);
  font-weight: bold;
  text-align: center;
  overflow-wrap: break-word;
}

.region-vote form {
  margin: 0 6px;
}

.region-members td:first-child {
  white-space: nowrap;
}

/* Krajské politiky: každý efekt na vlastním řádku, bonusy zeleně (.good), negativa červeně (.bad) */
.region-policies .region-effect {
  display: block;
}

/* Krajské upgrady: všechny tabulky stejně široké se stejnými sloupci */
table.grid.region-upgrades {
  table-layout: fixed;
}

.region-upgrades th:nth-child(2) {
  width: 11%;
}

.region-upgrades th:nth-child(3),
.region-upgrades th:nth-child(4) {
  width: 19%;
}

.region-upgrades th:nth-child(5) {
  width: 15%;
}

.region-upgrades th:nth-child(6) {
  width: 90px;
}

/* Skupina upgradů jako box: v záhlaví odemknutí (stav, cena, koupit) a nápověda */
.city-box.upgrade-group {
  padding-bottom: 10px;
}

.upgrade-group .box-title.upgrade-group-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2) var(--sp-3);
}

.upgrade-group-title .upgrade-unlock-price {
  color: var(--text);
  font-weight: normal;
}

.upgrade-group-title form {
  margin: 0;
}

.upgrade-group table.grid.region-upgrades {
  margin: 0;
}

.region-upgrades .upgrade-desc {
  display: block;
}

.region-upgrades td.upgrade-next {
  white-space: normal;
}

.region-upgrades td.gen {
  text-align: center;
}

.gen-count {
  white-space: nowrap;
}

/* Diplomacie */
.dipl-status th[scope="row"] {
  min-width: 110px;
}

.dipl-war-sides th[scope="row"] {
  min-width: 150px;
}

td.dipl-none {
  color: var(--muted);
}

td.dipl-treaty {
  color: var(--good);
}

td.dipl-notice {
  color: var(--warn);
}

td.dipl-alliance {
  color: var(--info);
  font-weight: bold;
}

td.dipl-war {
  color: var(--bad);
  font-weight: bold;
}

td.dipl-wardeclared {
  color: var(--bad);
}

.dipl-war-note {
  margin: var(--sp-2) auto;
  padding: 6px 12px;
  border: 1px solid #845050;
  border-left: 4px solid var(--bad);
  border-radius: var(--radius);
  background: var(--tint-bad);
}

/* Války po dvojicích krajů */
.war-pair th {
  width: 25%;
}

.war-pair td.war-side span {
  display: block;
}

.war-win {
  color: var(--good);
}

/* Klíčová města: obrázek 120 × 100 ze staré hry, ostatní sloupce stejně široké ve všech tabulkách */
table.grid.key-cities {
  table-layout: fixed;
}

.key-cities th:first-child {
  width: 132px;
}

td.key-city-img {
  padding: 3px;
}

img.key-city-thumb {
  display: block;
  width: 120px;
  height: 100px;
  border: 1px solid var(--line);
  object-fit: cover;
}

.key-cities select {
  max-width: 60%;
}

/* Příběhová města */
table.grid.story-cities {
  table-layout: fixed;
}

.story-cities th:nth-child(2) {
  width: 90px;
}

.story-cities th:last-child {
  width: 170px;
}

.story-cities form.region-inline {
  margin-left: var(--sp-2);
}


/* ---------- 18. Referenda ---------- */

.referendum-vote .btn {
  margin: 3px 4px;
}

.referendum-results {
  margin: 6px 0;
}

.referendum-share {
  white-space: nowrap;
}

.referendum-past {
  margin-bottom: 12px;
}


/* ---------- 19. Útok ----------
   Každý typ útoku má vlastní barvu (--atk z tokenů --atk-* v :root) [majitel 2026-10]: karty na /utok, legenda,
   čip a proužek v řádcích výpisů, bojová zpráva. Výsledek útoku má své barvy (--atk-yes / --atk-no). */
.atk-dobyvaci { --atk: var(--atk-dob); }
.atk-partyzansky { --atk: var(--atk-par); }
.atk-obrneny { --atk: var(--atk-obr); }
.atk-letecky { --atk: var(--atk-let); }
.atk-vrtulniky { --atk: var(--atk-nal); }
.atk-vysadek { --atk: var(--atk-spe); }
.atk-sabotaz { --atk: var(--atk-sab); }
.atk-rakety { --atk: var(--atk-odp); }
.atk-loupez { --atk: var(--atk-lou); }
.atk-unos { --atk: var(--atk-uno); }
.atk-pruzkum { --atk: var(--atk-pru); }

/* Čip se zkratkou typu: tónovaný podklad a text v barvě typu */
.atk-chip {
  display: inline-block;
  min-width: 34px;
  padding: 0 5px;
  border: 1px solid color-mix(in srgb, var(--atk, var(--line-strong)) 55%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--atk, var(--line)) 16%, var(--surface));
  color: var(--atk, var(--text));
  font-size: var(--fs-xs);
  font-weight: bold;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
  vertical-align: 1px;
}

/* Legenda barev nad výpisem; položka zároveň filtruje typ */
.atk-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  justify-content: center;
  margin: var(--sp-2) auto;
  font-size: var(--fs-sm);
}

.atk-legend-item {
  padding: 2px 8px 2px 4px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.atk-legend-item:hover {
  border-color: var(--line);
  color: var(--white);
}

.atk-legend-item.active {
  border-color: var(--atk, var(--line-strong));
  background: var(--surface-2);
  color: var(--white);
}

/* Filtr výpisů útoků (GET formulář) */
.attack-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: flex-end;
  justify-content: center;
  margin: 0 auto 6px;
  padding: 8px 12px;
}

.attack-filter label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--accent);
  font-size: var(--fs-sm);
}

.attack-filter select,
.attack-filter input[type="text"],
.attack-filter input[type="date"] {
  width: auto;
  min-width: 130px;
}

.attack-filter-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.attack-summary {
  margin: 6px auto var(--sp-2);
}

.attack-summary .muted,
.atk-color-legend {
  font-size: var(--fs-sm);
}

/* Řádky výpisu: tenký proužek v barvě typu a sotva znatelný podklad, čip; výsledek žlutě / oranžově */
table.grid.attack-log tbody tr.atk-row td {
  background: color-mix(in srgb, var(--atk) 4%, var(--bg));
}

table.grid.attack-log tbody tr.atk-row:nth-child(even) td {
  background: color-mix(in srgb, var(--atk) 7%, var(--bg));
}

table.grid.attack-log tbody tr.atk-row.mine td {
  background: color-mix(in srgb, var(--atk) 6%, #3a3a3a);
}

table.grid.attack-log tbody tr.atk-row td:first-child {
  box-shadow: inset 3px 0 0 var(--atk, var(--line));
}

.attack-log td.atk-type {
  white-space: nowrap;
}

.attack-log td.me,
.attack-log td.me a {
  color: var(--white);
  font-weight: bold;
}

.attack-log td.good,
.attack-log td.bad {
  font-weight: bold;
}

/* Historie útoků podle manuálu 6.3: soupeř, na kterého jsi zaútočil, zeleně; ten, kdo zaútočil na tebe,
   červeně; výsledek žlutě, když dopadl dobře pro tebe, jinak oranžově (--atk-yes / --atk-no) [majitel 2026-10]. */
.attack-history td.atk-opp-target,
.attack-history td.atk-opp-target a,
.atk-color-legend .atk-opp-target {
  color: var(--good);
}

.attack-history td.atk-opp-attacker,
.attack-history td.atk-opp-attacker a,
.atk-color-legend .atk-opp-attacker {
  color: var(--bad);
}

.attack-history td.atk-result-good,
.atk-good-text {
  color: var(--atk-yes);
}

/* Ztráty a body s malou ikonou, bez zalomení (řádek se nezvětší) [majitel 2026-10] */
.attack-history td.atk-num {
  white-space: nowrap;
}

.attack-summary .bad {
  color: var(--atk-no);
}

.attack-rel-war,
.attack-rel-wardeclared {
  color: var(--bad);
}

.attack-rel-notice {
  color: var(--warn);
}

.attack-rel-treaty {
  color: var(--good);
}

.attack-rel-alliance {
  color: var(--info);
}

.attack-rel-none {
  color: var(--muted);
}

/* Kroky formuláře */
.attack-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 12px 0;
  padding: 0;
  list-style: none;
}

.attack-steps li {
  padding: 3px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
}

.attack-steps li.active {
  border-color: var(--line-strong);
  background: var(--surface-2);
  color: var(--white);
  font-weight: bold;
}

.attack-steps li.done a {
  color: var(--good);
}

/* 1. krok: cíl */
.attack-nick {
  display: flex;
  gap: 6px;
  max-width: 420px;
  margin: 0 auto;
}

.attack-nick input[type="text"] {
  flex: 1;
  min-width: 0;
}

.attack-target {
  margin: 10px auto 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--good);
  border-radius: var(--radius);
  background: var(--bg);
}

.attack-target.blocked {
  border-left-color: var(--bad);
}

.attack-target-head {
  font-size: var(--fs-md);
  overflow-wrap: break-word;
}

.attack-target-name {
  color: var(--accent);
  font-weight: bold;
}

.attack-target-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: var(--sp-2) 0 4px;
}

.attack-target-facts dt {
  color: var(--muted);
  font-size: var(--fs-xs);
}

.attack-target-facts dd {
  margin: 0;
  font-weight: bold;
}

.attack-target-facts img.rank {
  height: 16px;
  margin-right: 4px;
}

.attack-target-verdict {
  margin: 4px 0 0;
  font-weight: bold;
}

progress.attack-quota::-webkit-progress-value {
  background: var(--atk, #cfcfcf);
}

progress.attack-quota::-moz-progress-bar {
  background: var(--atk, #cfcfcf);
}

/* 2. krok: město a jednotky se živým součtem (wwwroot/js/utok.js) */
.attack-field label {
  display: block;
  margin-bottom: 3px;
  color: var(--accent);
}

.attack-field {
  margin: 10px 0;
  text-align: center;
}

.attack-field select {
  width: auto;
  min-width: 260px;
}

.attack-units {
  margin: 10px auto;
}

.attack-units input[type="number"] {
  width: 120px;
  text-align: right;
}

.attack-units td.attack-send {
  white-space: nowrap;
}

.attack-units input.over {
  border-color: var(--bad);
}

.attack-units tfoot td.muted {
  font-size: var(--fs-xs);
  font-weight: normal;
}

.attack-units tfoot b {
  color: var(--accent);
}

.attack-hint {
  margin: 12px auto;
  color: var(--muted);
  text-align: center;
}

.attack-actions {
  margin-top: 14px;
  text-align: center;
}

.attack-actions a {
  margin-left: var(--sp-3);
}

button.btn.attack-go {
  padding: 5px 22px;
  border-color: #dedede;
  background: #4a4a4a;
  font-weight: bold;
}

button.btn.attack-go:hover {
  background: #575757;
}

/* Rakety: na co míří */
.rocket-target {
  margin: 10px 0;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.rocket-target legend {
  padding: 0 4px;
  color: var(--accent);
}

.rocket-target label {
  margin-right: 14px;
}

.rocket-target .hint {
  margin-top: 4px;
}

/* Bojová zpráva */
.battle-units {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  align-items: start;
  margin: 12px 0;
}

.battle-units table.grid {
  margin: 0;
}

.recon-cities td:last-child {
  font-size: var(--fs-xs);
}


/* ---------- 20. Pošta ---------- */

/* Texty od hráčů: HTML se kóduje, zalomení řádků zůstávají. */
.mail-body,
.post-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mail-body {
  margin: 14px auto;
  padding: 10px 14px;
}

.mail-head-box {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}

.mail-head-box table.grid {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.mail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

/* Stav zprávy: přijato (nová) / doručeno (příjemce ještě nečetl) / přečteno */
td.mail-state {
  color: var(--muted);
  white-space: nowrap;
}

td.mail-state.received {
  color: var(--accent);
  font-weight: bold;
}

td.mail-state.delivered {
  color: var(--text);
}

/* Smajlíci v textu a paleta pod textovým polem */
img.smiley {
  vertical-align: middle;
}

.smileys {
  margin: 2px 0 6px;
}

.smiley-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

button.smiley-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 30px;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
}

button.smiley-btn:hover,
button.smiley-btn:focus-visible {
  border-color: var(--line-strong);
}


/* ---------- 21. Fóra ---------- */

.grid.forums small {
  display: block;
}

/* Přehled fór: nové příspěvky v závorce [M 8.1], poslední příspěvek s autorem. */
.grid.forums td.forum-name a {
  font-weight: bold;
}

.grid tr.has-new td.forum-name > a {
  color: var(--white);
}

.new-count {
  margin-left: 4px;
  color: var(--white);
  font-weight: bold;
}

.grid td.last-post {
  min-width: 170px;
  font-size: var(--fs-sm);
}

.grid td.last-post small {
  display: block;
}

.grid td.last-post a.last-thread {
  display: block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

form.forum-seen {
  margin: 6px 0 12px;
  text-align: center;
}

form.forum-seen button.link-button {
  color: var(--link);
}

/* Druhy fór: oznámení adminů světle modře, vládní oznámení tučně */
.grid.forums tr.forum-adminannouncements a,
.grid.forums tr.forum-governmentannouncements a {
  font-weight: bold;
}

.grid.forums tr.forum-adminannouncements td {
  background: none;
}

.grid.forums tr.forum-adminannouncements a,
.grid.forums tr.forum-adminannouncements small,
h1.forum-adminannouncements {
  color: var(--forum-admin);
}

/* Systémové fórum modře jako oznámení adminů [majitel 2026-10] */
.grid.forums tr.forum-system td.forum-name > a,
h1.forum-system {
  color: var(--forum-admin);
}

.grid.posts.forum-adminannouncements td.post-body {
  color: var(--forum-admin);
}

/* Krajská fóra: název v přehledu i nadpis zeleně */
.grid.forums tr.forum-regional td.forum-name > a,
.grid.forums tr.forum-governmentannouncements td.forum-name > a,
h1.forum-regional,
h1.forum-governmentannouncements {
  color: var(--forum-regional);
}

/* Příspěvek: autor vlevo přes dva řádky, vpravo hlavička (datum, tlačítka, #id) a text. Bez proužků tabulky.
   Celý příspěvek má barvu hodnosti autora (rank-* z RankStyle.cs na řádku), pod nickem hodnost s obrázkem. */
table.grid.posts td {
  background: var(--surface);
  vertical-align: top;
}

.grid.posts td.author {
  width: 170px;
  text-align: center;
  overflow-wrap: anywhere;
}

.grid.posts td.author small {
  display: block;
}

.grid.posts td.author img.avatar {
  margin: 0 auto 4px;
}

.grid.posts td.author .nick {
  font-weight: bold;
  white-space: normal;
}

table.grid.posts td.post-head {
  padding: 3px 10px;
  background: var(--surface-2);
  font-size: var(--fs-xs);
}

.post-head::after {
  content: "";
  display: block;
  clear: both;
}

.post-head .post-meta {
  float: left;
}

.post-head .post-actions {
  float: right;
}

.post-head .post-actions a,
.post-head .post-actions form {
  margin-left: var(--sp-2);
}

.post-head a.post-id {
  color: var(--muted);
  text-decoration: none;
}

.grid.posts td.post-body {
  height: 60px;
  color: inherit;
}

.post-rank {
  display: block;
  font-size: var(--fs-xs);
}

.post-rank img.rank {
  height: 16px;
  margin-right: 4px;
}

/* Řádky citace (tlačítko citovat, „> …“). */
.post-quote {
  display: inline-block;
  padding-left: 6px;
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-style: italic;
}

/* Nový příspěvek od minulé návštěvy tématu. */
.post-new {
  margin: 0 6px 0 0;
  border-color: var(--white);
  color: var(--white);
  font-weight: bold;
}

.grid.posts tr.is-new td.post-head {
  border-top: 2px solid var(--white);
}

/* Moderování fór */
.mod-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  align-items: center;
  margin: 0 0 10px;
}

.mod-tools form,
form.mod-inline {
  display: inline;
  margin: 0;
}

a.mod-link {
  color: var(--bad);
}

.mod-player {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 12px;
}

.mod-player .notice {
  margin: var(--sp-2) 0 0;
}

.form.mod-box {
  margin-bottom: 18px;
  padding: 0 12px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}


/* ---------- 22. Republika ---------- */

.republic-map {
  margin-bottom: var(--sp-2);
}

/* Mapa krajů: tlumená tmavší modrá (světlá oslňovala), bílé hranice a popisky; kraj pod myší se rozjasní
   a dostane silnější bílou hranici. */
.region-map {
  display: block;
  width: 100%;
  height: auto;
}

.region-map .map-region path {
  fill: #3f5f7f;
  stroke: #ffffff;
  stroke-width: 1.25;
  stroke-linejoin: round;
  transition: fill 0.15s, stroke-width 0.15s;
}

.region-map .map-region.mine path {
  fill: #4b6f92;
}

.region-map .map-region:hover path,
.region-map .map-region:focus-visible path {
  fill: #5a84ac;
  stroke: #ffffff;
  stroke-width: 3.5;
}

.region-map .map-region:focus-visible {
  outline: none;
}

.region-map text {
  fill: #ffffff;
  stroke: #142130;
  stroke-width: 3px;
  stroke-linejoin: round;
  paint-order: stroke;
  font: 14px var(--font);
  text-anchor: middle;
  pointer-events: none;
}

/* Malá mapa v detailu kraje: ostatní kraje šedomodré, vybraný kraj modře */
.region-map.compact .map-region path {
  fill: #3c4651;
}

.region-map.compact .map-region:hover path {
  fill: #4e5d6c;
}

.region-map.compact .map-region.selected path {
  fill: #4b6f92;
  stroke: #ffffff;
  stroke-width: 3;
}

/* Mřížka vlád a detail kraje */
.gov-grid thead th[class^="role-"] {
  color: var(--nick);
}

.gov-grid td.nicks {
  font-size: var(--fs-sm);
}

.gov-grid td.nicks .nick {
  display: inline-block;
  margin-right: var(--sp-2);
}

.region-head {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: center;
  margin: 0 0 10px;
}

.region-head table.grid {
  margin: 0;
}

.region-government {
  margin: 0 auto 12px;
  text-align: center;
}

.region-government .nick {
  margin: 0 4px;
}

.player-actions {
  white-space: nowrap;
}

.player-actions a + a {
  margin-left: 6px;
}

.player-actions img {
  vertical-align: middle;
}

/* Sloupec „Admin“ s tlačítkem Hrát (jen pro admina): modře, ale tmavě a klidně */
table.grid th.admin-col,
table.grid td.admin-col,
.profile tr.admin-col > th,
.profile tr.admin-col > td {
  background: #2c4258;
  color: #dbe9f6;
  white-space: nowrap;
}

.admin-col button.btn.small {
  border-color: #6f9cc6;
  background: #345a80;
}

.admin-col button.btn.small:hover {
  background: #406c98;
}

/* Rekordy, výsledky věků a úvodní žebříčky: tabulky vedle sebe v pravidelné mřížce */
.record-boards,
.age-results-tables,
.landing-tops {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px 18px;
  align-items: start;
  margin-bottom: 18px;
}

.record-boards table.grid,
.age-results-tables table.grid,
.landing-tops table.grid {
  width: 100%;
  margin: 0;
}

.staff-list td {
  vertical-align: middle;
}

.age-results {
  margin-bottom: 26px;
}


/* ---------- 23. Herna ---------- */

.herna-intro {
  margin: 0 0 12px;
  text-align: center;
}

.herna-box {
  width: 100%;
  max-width: 460px;
  margin: 12px auto;
  padding: 0 14px 4px;
}

.herna-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}

.herna-layout .herna-box,
.herna-box.hangman-new {
  max-width: none;
  margin: 0 0 14px;
}

.herna-draw {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  justify-content: center;
  margin: 0 0 12px;
  padding: 6px 10px;
  color: var(--muted);
}

.herna-draw b {
  color: var(--accent);
}

.herna-winners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: var(--sp-4);
}

.herna-winners > section {
  min-width: 0;
}

/* Sportka: výběr čísel jako mřížka koulí; počet vybraných počítá CSS čítač (bez JavaScriptu). */
.lotto-form {
  counter-reset: picked;
}

.lotto-picker {
  display: grid;
  grid-template-columns: repeat(7, 40px);
  gap: 6px;
  justify-content: center;
  margin: 0 auto var(--sp-2);
}

.lotto-pick {
  position: relative;
  cursor: pointer;
}

.lotto-pick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lotto-pick span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid #555555;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4b4b4b, #1c1c1c);
  color: var(--text);
  font-weight: bold;
  transition: transform 0.1s;
}

.lotto-pick:hover span {
  border-color: #e0e0e0;
}

.lotto-pick input:checked {
  counter-increment: picked;
}

.lotto-pick input:checked + span {
  border-color: var(--white);
  background: radial-gradient(circle at 35% 30%, #ffffff, #b8b8b8);
  color: #1e1e1e;
  transform: scale(1.06);
}

.lotto-pick input:focus-visible + span {
  outline: 2px solid var(--white);
}

.lotto-count {
  margin: 0 0 10px;
  color: var(--muted);
  text-align: center;
}

.lotto-count::before {
  content: "Vybráno " counter(picked) " ";
  color: var(--accent);
  font-weight: bold;
}

.lotto-bet {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  align-items: center;
  margin: 6px 0;
}

.lotto-bet label {
  color: var(--accent);
}

.lotto-bet input[type="number"] {
  width: 160px;
  text-align: right;
}

.lotto-money {
  margin: 2px 0 var(--sp-2);
  font-size: var(--fs-xs);
}

.lotto-buttons .btn {
  margin: 2px 4px;
}

.lotto-win {
  color: var(--good);
  font-weight: bold;
}

/* Koule s čísly na tiketech a v losování */
.lotto-balls {
  white-space: nowrap;
}

.lotto-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  margin: 1px 2px;
  padding: 0 4px;
  border: 1px solid #555555;
  border-radius: 14px;
  background: #1e1e1e;
  font-weight: bold;
}

.lotto-num.drawn {
  border-color: var(--white);
  background: radial-gradient(circle at 35% 30%, #ffffff, #b8b8b8);
  color: #1e1e1e;
}

.lotto-num.hit {
  border-color: var(--good);
  background: #2f5532;
  color: var(--white);
}

.lotto-payouts {
  width: 100%;
  border-collapse: collapse;
}

.lotto-payouts th {
  color: var(--accent);
  font-weight: normal;
  text-align: left;
}

.lotto-payouts th,
.lotto-payouts td {
  padding: 2px var(--sp-2);
}

.lotto-payouts tr.lotto-partial td {
  color: var(--accent);
}

/* Historie tiketů a her: proužek vlevo podle výsledku, výhra s jemným zeleným podkladem */
.lotto-history tr.lotto-row-win td:first-child,
.hangman-history tr.hangman-row-win td:first-child {
  box-shadow: inset 3px 0 0 var(--good);
}

.lotto-history tr.lotto-row-partial td:first-child {
  box-shadow: inset 3px 0 0 #cfcfcf;
}

.lotto-history tr.lotto-row-loss td:first-child,
.hangman-history tr.hangman-row-loss td:first-child {
  box-shadow: inset 3px 0 0 var(--bad);
}

/* Šibenice */
.hangman-card {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  justify-content: center;
  align-items: center;
  margin: 12px 0;
  padding: 14px 18px;
}

.hangman-card.won {
  border-color: #4f7a4f;
}

.hangman-card.lost {
  border-color: #845050;
}

.gallows-photo {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
}

.hangman-play {
  flex: 1;
  min-width: 260px;
}

.hangman-word {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: var(--sp-2) 0 12px;
}

.hangman-word span {
  width: 34px;
  height: 42px;
  border: 1px solid var(--line);
  border-bottom: 3px solid #e0e0e0;
  border-radius: 4px;
  background: #1e1e1e;
  color: var(--white);
  font-size: 24px;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
}

.hangman-word span.hidden {
  background: #262626;
}

.hangman-word span.missed {
  border-bottom-color: var(--bad);
  color: var(--bad);
}

.hangman-status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin: 4px 0 10px;
}

.lives {
  display: inline-flex;
  gap: 3px;
}

.lives .pip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--good);
}

.lives .pip.lost {
  background: var(--bad);
}

.hangman-wrong {
  margin: 0 0 var(--sp-2);
  color: var(--muted);
}

.hangman-wrong b {
  color: var(--bad);
  letter-spacing: 2px;
}

.hangman-keys {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 5px;
  margin: 0 0 12px;
}

.hangman-keys .key {
  height: 40px;
  border: 1px solid #777777;
  border-radius: 6px;
  background: linear-gradient(#4a4a4a, #333333);
  box-shadow: 0 2px 0 #1a1a1a;
  color: var(--white);
  font: bold 15px var(--font);
  cursor: pointer;
}

.hangman-keys .key:hover:not(:disabled) {
  border-color: #e0e0e0;
  background: linear-gradient(#5c5c5c, #3e3e3e);
}

.hangman-keys .key:disabled {
  cursor: default;
  opacity: 0.45;
}

.hangman-keys .key.hit:disabled {
  border-color: #4f7a4f;
  background: #2f4a30;
  box-shadow: none;
  color: var(--good);
  opacity: 1;
}

.hangman-keys .key.miss:disabled {
  border-color: #845050;
  background: #472b2b;
  box-shadow: none;
  color: var(--bad);
  opacity: 0.8;
}

.hangman-result {
  margin: 4px 0 0;
}


/* ---------- 24. Admin ---------- */

.admin-warn {
  color: var(--bad);
}

.admin-table td {
  vertical-align: top;
}

.admin-flag {
  margin: 0 4px 2px 0;
  text-decoration: none;
}

.admin-flag.role {
  border-color: #4f6a85;
  color: var(--info);
}

.admin-flag.bad {
  border-color: #845050;
  color: var(--bad);
}

.admin-flag.warn {
  border-color: #7d7350;
  color: var(--warn);
}

.admin-details {
  display: block;
  max-width: 420px;
  color: var(--muted);
  font-size: var(--fs-xs);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.admin-age-link {
  margin: 0 6px;
}

/* Boxy, řádky formulářů a mřížka administrace jsou v bloku „Admin – jednotný vzhled“ na konci souboru. */


/* ---------- 25. Pravidla, bannery, veřejné stránky ---------- */

.manual {
  max-width: 860px;
  margin: 0 auto;
}

.manual h2 {
  margin: 22px 0 var(--sp-2);
  font-size: var(--fs-lg);
  text-align: left;
}

.manual h3 {
  margin: 16px 0 4px;
}

.manual p {
  margin: 0 0 10px;
  text-align: justify;
}

.manual .term {
  color: var(--accent);
}

.manual .indent {
  margin-left: 14px;
}

.manual table.manual-table {
  width: auto;
  margin: 10px auto 14px;
  font-size: var(--fs-sm);
}

.manual-table td {
  padding: 3px 6px;
}

.manual-table td p {
  margin: 0 0 4px;
  text-align: left;
}

.manual-note {
  padding: 8px 12px;
  border-left: 3px solid var(--line);
  background: var(--surface);
  color: var(--muted);
}

.manual .m-red { color: var(--bad); }
.manual .m-warn { color: #e6d27a; }
.manual .m-osobnost { color: #7dc0ff; }
.manual .m-am-udan { color: #66ff33; }
.manual .m-am-1 { color: #b5b54a; }
.manual .m-am-2 { color: #c08a55; }
.manual .m-am-3 { color: var(--bad); }
.manual .m-am-ocisten { color: #4fbf4f; }

.submenu.manual-chapters {
  font-size: var(--fs-sm);
}

.submenu.manual-sections {
  margin-top: -6px;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}

.manual-toc {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 4px 18px;
}

.manual-toc h2 {
  margin: 12px 0 2px;
  font-size: var(--fs-md);
}

.manual-toc ul {
  margin: 0;
  padding-left: 18px;
}

.manual-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  max-width: 860px;
  margin: 20px auto 0;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
}

.manual-search input[type="search"] {
  width: 260px;
}

.manual-hits {
  max-width: 860px;
  margin: 10px auto;
}

.manual-hits li {
  margin-bottom: 10px;
}

.manual-snippet {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.manual-snippet mark {
  padding: 0 2px;
  background: #5c5c5c;
  color: var(--white);
}

/* Bannery */
.banner-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.banner-item h2 {
  margin: 0 0 6px;
  text-align: left;
}

.banner-item img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 6px;
}

textarea.banner-code {
  font: 11px/1.4 Consolas, monospace;
}

/* Osobní: avatar */
.avatar-settings {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: center;
  align-items: flex-start;
}

.avatar-settings .form {
  margin: 0 0 10px;
}

/* Veřejné stránky (přihlášení, registrace, úvod). Pozadí je na obalu, ne na <body>:
   hx-boost mění jen obsah body, třídy na něm by zůstaly. */
.public {
  min-height: 100vh;
  padding-top: 1px;
  background: var(--bg-public);
}

.banner {
  padding-top: 18px;
  text-align: center;
}

.banner img {
  max-width: 100%;
  height: auto;
}

.public-box {
  width: 100%;
  max-width: 715px;
  margin: 0 auto;
  padding: 10px 24px 24px;
  border: 1px solid #3b3b3b;
  background: var(--bg);
}

.public-box:has(.landing),
.public-box:has(.manual) {
  max-width: 1000px;
}

.public-box table.grid {
  width: 100%;
}

.public-footer {
  padding: 16px;
  color: #666666;
  font-size: var(--fs-xs);
  text-align: center;
}

.public-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  justify-content: center;
  margin-bottom: 6px;
}

.public-links a {
  color: #8f8f8f;
}

.landing {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
}

.landing-main {
  flex: 1;
  min-width: 0;
}

.landing-side {
  width: 240px;
  flex-shrink: 0;
  padding: 0 12px 12px;
}

.landing-side h2 {
  font-size: var(--fs-lg);
}

.landing-lead {
  color: var(--accent);
  font-size: var(--fs-md);
  text-align: center;
}

.landing h2 {
  margin: 18px 0 var(--sp-2);
}

.landing-pics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin: 10px 0;
}

.landing-pics img {
  width: 120px;
  height: 90px;
  border: 1px solid var(--line);
  object-fit: cover;
}

.landing-stats table.grid {
  margin-bottom: 12px;
}

.landing-tops {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 0;
}

.landing-register {
  margin: 14px 0 4px;
}

.landing-links {
  display: flex;
  flex-direction: column;
  gap: 4px 12px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}


/* ---------- 26. Úzké obrazovky ---------- */

/* Menší notebook: lišta surovin a herna se stáhnou */
@media (max-width: 1100px) {
  .resbar td {
    padding: 2px 5px;
  }
}

@media (max-width: 860px) {
  .herna-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Mobil: sloupce pod sebou. Menu, horní lišta, písmo, tlačítka a posouvání tabulek pro telefon jsou v bloku
   „Telefony“ na konci souboru (musí přebít i pravidla stránek, která jsou až za touhle sekcí). */
@media (max-width: 760px) {
  .shell {
    display: block;
  }

  .main {
    padding: 8px 10px 24px;
  }

  .home-columns,
  .region-head,
  .fund-top {
    grid-template-columns: minmax(0, 1fr);
  }

  .fund-buildings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-stats th {
    white-space: normal;
  }

  .army-units td {
    padding: 2px 4px;
  }

  .army-img img.cat-img {
    width: 80px;
    height: 60px;
  }

  .army-units input[type="number"],
  .trade-buy input[type="number"],
  .attack-units input[type="number"] {
    width: 80px;
  }

  .attack-filter label {
    flex: 1 1 140px;
  }

  .attack-filter select,
  .attack-filter input[type="text"],
  .attack-filter input[type="date"],
  .attack-field select {
    width: 100%;
    min-width: 0;
  }

  .mail-head-box {
    flex-direction: column;
  }

  .grid.posts td.author {
    width: 90px;
  }

  .grid td.last-post {
    min-width: 0;
  }

  .post-head .post-meta,
  .post-head .post-actions {
    display: block;
    float: none;
  }

  .post-head .post-actions a:first-child {
    margin-left: 0;
  }

  .referendum-share progress {
    width: 60px;
  }

  .lotto-picker {
    grid-template-columns: repeat(7, 34px);
    gap: 4px;
  }

  .lotto-pick span {
    width: 34px;
    height: 34px;
  }

  .hangman-word span {
    width: 26px;
    height: 34px;
    font-size: 18px;
    line-height: 32px;
  }

  .herna-winners,
  .record-boards,
  .age-results-tables,
  .battle-units {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing {
    flex-direction: column;
  }

  .landing-side {
    width: auto;
    align-self: stretch;
  }

  .public-box {
    padding: 8px 12px 16px;
  }

  .manual-search input[type="search"] {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .region-map .map-name {
    display: none;
  }
}


/* ---------- Obrázky a fond ----------
   Obrázky jednotek, budov a hrdinů z katalogu (<unit-img>, <building-img>, <hero-img>, <goods-img>, <mention-img>),
   ikony surovin (<res-icon>, img/ikony/res-*.svg, vlastní kresby) a stránka Fond (stav kraje).
   Rozměry dávají i atributy width/height, tady tvar, rámeček a zarovnání. */

img.cat-img {
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--surface-2);
  object-fit: cover;
  vertical-align: middle;
}

img.cat-img-mini {
  width: 20px;
  height: 15px;
  border-radius: 1px;
}

img.cat-img-icon {
  width: 32px;
  height: 24px;
}

img.cat-img-small {
  width: 48px;
  height: 36px;
}

img.cat-img-normal {
  width: 80px;
  height: 60px;
}

img.cat-img-large {
  width: 120px;
  height: 90px;
}

/* Obrázek a jméno vedle sebe (řádky tabulek: krajská armáda, útok, zprávy, trh) */
.img-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-align: left;
}

.img-label img {
  flex: none;
}

/* Malý obrázek s textem v řadě (budovy ve zprávě z průzkumu, ztráty při přestupu) */
.img-chip {
  display: inline-block;
  margin: 1px var(--sp-3) 1px 0;
  white-space: nowrap;
}

/* Ikony surovin: v textu na účaří, v dlaždici větší nad popiskem */
img.res-icon {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}

img.res-icon-large {
  width: 28px;
  height: 28px;
}

.stat-tile.icon-tile img.res-icon-large {
  display: block;
  margin: 0 auto var(--sp-1);
}

/* Blesk u MWatt stejný jako ikona MWatt (dřív znak ⚡) */
.stat-tile.mwatt b::before,
.mwatt-val::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 3px;
  background: url("../img/ikony/res-mwatt.svg") center / contain no-repeat;
  vertical-align: -0.15em;
}

/* Oznámení na Hlavní: obrázek zmíněné jednotky, hrdiny nebo budovy vlevo */
.home-note-body img.note-img {
  float: left;
  margin: 2px var(--sp-2) 2px 0;
}

.trade-sell .toolbar {
  margin-top: var(--sp-2);
}

/* Úkoly: obrázek před názvem úkolu */
.task-table td.task-name {
  white-space: nowrap;
}

.task-table td.task-name img.cat-img {
  margin-right: var(--sp-2);
}

/* Fond: stav kraje */
.fund-state {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.fund-buildings.fund-region {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* obrázky budov i ikona hráčů stejně velké (100 × 75), kresba ikony uprostřed */
.fund-building img.cat-img,
.fund-building img.res-icon {
  width: 100px;
  height: 75px;
}

.fund-building img.res-icon {
  padding: 16px 0;
  object-fit: contain;
}

.fund-building small {
  display: block;
  font-size: var(--fs-xs);
}

.fund-key-cities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin: 10px 0;
}

figure.fund-key-city {
  width: 110px;
  margin: 0;
  padding: var(--sp-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.fund-key-city img {
  display: block;
  width: 96px;
  height: 80px;
  margin: 0 auto 2px;
  object-fit: cover;
}

.fund-key-city figcaption {
  color: var(--muted);
  font-size: var(--fs-xs);
  overflow-wrap: break-word;
}

ul.fund-upgrades {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-2);
  margin: 10px 0;
  padding: 0;
  list-style: none;
}

.fund-upgrades li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.fund-upgrades li small {
  color: var(--good);
}

@media (max-width: 760px) {
  .fund-buildings.fund-region {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .task-table td.task-name {
    white-space: normal;
  }
}


/* ---------- Republika: podmenu na jeden řádek, popisky mapy (větev republika-menu) ---------- */

/* Podmenu Republiky: krátké názvy (celé v title) a užší záložky, aby se při běžné šířce vešlo na jeden řádek.
   Na úzké obrazovce se zalomí jako ostatní podmenu. */
.submenu.republic-menu {
  gap: 2px;
}

.submenu.republic-menu a {
  padding: 2px 7px;
}

/* Popisky krajů v mapě: menší písmo, dlouhé názvy jsou na dva řádky (RegionMapLabels), Praha je na mapě malá. */
.region-map .map-name {
  font-size: 12px;
}

.region-map .map-name.small {
  font-size: 11px;
}

/* ---------- Připomínky majitele k UI (větev ui-pripominky) ----------
   Nápověda v bublině (<help-tip>), kompaktní Správa měst, větší obrázky hrdinů a krajské armády,
   obrázky budov ve skladu KA, věta o maximu měst v Osidlování. */

/* Nápověda v bublině (<help-tip>) je v bloku „Stavby a Útok (větev stavby-utok)“ na konci souboru. */

/* Osidlování při maximu měst: jen jedna bílá věta */
.settle-max {
  margin: 24px 0;
  color: var(--white);
  font-size: var(--fs-md);
  text-align: center;
}

/* Správa měst: tabulka se vejde na šířku stránky bez posouvání do strany */
.city-table.city-table-compact th,
.city-table.city-table-compact td {
  padding: 3px 4px;
}

.city-table-compact th {
  white-space: nowrap;
}

.city-table-compact th abbr {
  text-decoration: none;
}

.city-table-compact a.city-abandon {
  color: var(--bad);
}

.city-table-compact .city-births {
  margin-left: 2px;
}

/* Najmout hrdinu: portréty stejně velké jako v tabulce hrdinů */
.army-hire img.hero-thumb {
  width: 120px;
  height: 90px;
}

.army-hire .army-choice.hero-choice {
  margin: 4px 0;
}

/* Krajská armáda: obrázky jednotek stejně velké jako na /jednotky, budovy ve skladu menší */
.ka-units img.cat-img.cat-img-large {
  width: 120px;
  height: 90px;
}

@media (max-width: 760px) {
  .army-hire img.hero-thumb,
  .ka-units img.cat-img.cat-img-large {
    width: 80px;
    height: 60px;
  }
}

/* ---------- Fóra a Tržnice (větev fora-obchod) ----------
   Příspěvky ve fórech jako samostatné bloky v barvě funkce autora, Oznámení adminů světle modře,
   Tržnice se záložkami Nákup | Prodej a prodej na jednu obrazovku. Starší pravidla .grid.posts výš už
   nic nevypisuje (příspěvky nejsou tabulka). */

/* Každý příspěvek je blok s mezerou a rámečkem lehce v barvě funkce autora. Třída role-* / status-* z nick-color-of nastaví --nick
   (barva nicku autora) a v té barvě je text, který autor napsal: velitel žlutě, admin světle modře… [majitel 2026-10]. */
.posts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 12px;
}

.posts article.post {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  /* Rámeček v barvě funkce autora: 2px a sytější, ať je barva dobře vidět [majitel 2026-10]. */
  border: 2px solid var(--line-soft);
  border-color: color-mix(in srgb, var(--nick, var(--line-soft)) 85%, var(--line-soft));
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}

.posts article.post.is-new {
  box-shadow: 0 0 0 1px var(--white);
}

.posts .post-author {
  padding: 8px 6px;
  border-right: 1px solid var(--line-soft);
  text-align: center;
  overflow-wrap: anywhere;
}

.posts .post-author img.avatar {
  margin: 0 auto 4px;
}

.posts .post-author .nick {
  font-weight: bold;
  white-space: normal;
}

/* Kraj autora (neutrální a systémové fórum) */
.posts .post-region {
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs);
}

.posts .post-main {
  min-width: 0;
}

.posts .post-head {
  padding: 3px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
  font-size: var(--fs-xs);
}

.posts .post-body {
  min-height: 60px;
  padding: 8px 10px;
  color: var(--nick, var(--text));
  overflow-wrap: anywhere;
}

/* Oznámení adminů: text admina světle modře; hlavička (datum, číslo, akce) a podklad jako u ostatních příspěvků. */
.posts.forum-adminannouncements article.post {
  --nick: var(--forum-admin);
}

.posts.forum-adminannouncements .post-body {
  color: var(--forum-admin);
}

/* Tržnice: záložky Nákup | Prodej pod podmenu Obchodu, výrazné jako karty */
.submenu.market-tabs {
  gap: 0 2px;
  margin: -4px 0 14px;
  border-bottom: 1px solid var(--line);
}

.submenu.market-tabs a {
  margin-bottom: -1px;
  padding: 5px 28px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: var(--fs-md);
}

.submenu.market-tabs a.active {
  border-color: var(--line);
  background: var(--surface);
}

/* Skupiny zboží na nákupu: třetí úroveň, menší a podtržená */
.submenu.market-groups {
  font-size: var(--fs-sm);
}

.submenu.market-groups a {
  padding: 1px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}

.submenu.market-groups a.active {
  border-bottom-color: currentColor;
  background: none;
}

/* Prodej na jednu obrazovku: vlevo zboží (řádek = formulář), vpravo nabídky a pravidla */
.sell-layout {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: var(--sp-3);
  align-items: start;
}

.sell-layout .city-box {
  max-width: none;
  margin: 0 0 var(--sp-3);
}

.sell-list {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
}

.sell-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px 76px auto;
  gap: 6px;
  align-items: center;
  padding: 3px 0;
  border-bottom: 1px solid var(--line-soft);
}

.sell-row:last-child {
  border-bottom: 0;
}

.sell-row.sell-head {
  color: var(--muted);
  font-size: var(--fs-xs);
}

.sell-goods {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.sell-goods img.cat-img {
  flex: none;
}

.sell-name {
  min-width: 0;
  line-height: 1.25;
}

.sell-name b,
.sell-name small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sell-name small {
  color: var(--muted);
  font-size: var(--fs-xs);
}

.sell-amount {
  display: flex;
  gap: 2px;
}

.sell-row input[type="number"] {
  width: 100%;
  min-width: 0;
  padding: 2px 4px;
  text-align: right;
}

.sell-mine .trade-table td {
  padding: 3px 6px;
}

.sell-mine .trade-goods img.cat-img {
  margin-right: 4px;
  vertical-align: middle;
}

.sell-mine .trade-actions {
  white-space: nowrap;
}

.trade-sell-rules .trade-rules {
  margin: 4px 0 8px;
  font-size: var(--fs-xs);
}

@media (max-width: 760px) {
  .posts article.post {
    grid-template-columns: minmax(0, 1fr);
  }

  .posts .post-author {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
  }

  .posts .post-author img.avatar {
    max-width: 40px;
    max-height: 40px;
    margin: 0;
  }

  .sell-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .submenu.market-tabs a {
    padding: 4px 16px;
  }
}


/* ---------- Vláda a fond (větev vlada-fond) ----------
   Tabulka vlády, čisté Volby, Smlouvy, Fond na první pohled a Příjmy kraje. Vysvětlivky jsou v <help-tip>. */

/* Vláda: funkce v barvě funkce, hráč s hodností, online stav; neobsazené funkce tlumeně */
table.grid.gov-table {
  max-width: 720px;
}

.gov-table caption .help-tip {
  font-weight: normal;
}

.gov-table th.gov-role {
  width: 150px;
  background: var(--surface-2);
  font-weight: bold;
  white-space: nowrap;
}

.gov-table td.gov-player {
  white-space: nowrap;
}

.gov-table .gov-rank {
  margin-left: 6px;
  font-size: var(--fs-xs);
}

.gov-table td.gov-online {
  width: 120px;
}

.gov-table td.gov-action {
  width: 80px;
  text-align: center;
}

.gov-table tr.gov-empty th.gov-role span {
  opacity: 0.55;
}

.gov-resign {
  margin: 10px 0;
}

.gov-resign .btn {
  margin-left: var(--sp-2);
}

.city-box.gov-appoint {
  max-width: 720px;
}

.gov-appoint-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding-bottom: 8px;
}

.gov-appoint-row label {
  color: var(--muted);
}

/* Volby: velitel a senátor vedle sebe, bez obrázků */
.election-intro {
  margin: 6px 0 10px;
}

.election-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--sp-4);
  align-items: start;
}

.election {
  padding: 0 12px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.election h2 {
  margin: 0 -12px 8px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-size: var(--fs-md);
}

.election h3 {
  margin-top: 14px;
  text-align: center;
}

.election-phase {
  margin: 6px 0 10px;
  color: var(--muted);
  text-align: center;
}

.election-phase.voting {
  color: var(--good);
}

.election-candidates td.region-text {
  font-size: var(--fs-sm);
}

.election-run {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 10px 0 0;
}

.election-run textarea {
  flex: 1 1 220px;
  min-height: 0;
}

table.grid.election-results {
  width: auto;
  min-width: 220px;
}

/* Smlouvy: jedna věta nad tabulkou vztahů */
.dipl-intro {
  margin: 6px 0 10px;
}

/* Fond: dlaždice, pod nimi příspěvek a poslední pohyby vedle sebe */
.fund-state .fund-main b {
  color: var(--warn);
}

.fund-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-3) var(--sp-4);
  align-items: start;
  margin: 10px 0;
}

.fund-overview .city-box {
  max-width: none;
  margin: 0;
}

.fund-donate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding-bottom: 10px;
}

.fund-donate input {
  width: 160px;
}

.fund-moves ul {
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}

.fund-moves li {
  display: flex;
  gap: var(--sp-2);
  align-items: baseline;
  padding: 3px 0;
  border-bottom: 1px solid var(--line-soft);
}

.fund-moves li > :nth-child(2) {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.fund-moves li.fund-in b {
  color: var(--good);
}

.fund-moves li.fund-out b {
  color: var(--bad);
}

/* Příjmy kraje: stavby a klíčová města vedle sebe, přispěvatelé ve dvou sloupcích */
.fund-income {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-4);
  align-items: start;
}

.fund-income h2 {
  margin-top: 8px;
}

.fund-income .fund-buildings.fund-region {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .gov-table .gov-rank {
    display: none;
  }

  .election-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ---------- Republika, města a nástěnka (větev republika-2) ----------
   Zlatý řádek „já“ v Rekordech, akce měst jako ikony v úzkém sloupci, Příběh jako kraj
   a krajská nástěnka na Hlavní přes celou šířku s bílým textem. */
:root {
  --row-gold: rgba(255, 204, 0, 0.2);
  --row-gold-edge: #ffcc00;
  --gold: #ffd84d;
}

/* Rekordy: můj řádek stejně jako v kraji (běžné .grid tr.me), majitel zlatou nechtěl. */

/* Správa měst: přejmenovat a opustit jako ikony v posledním úzkém sloupci */
.city-table.city-table-compact th.city-act-col,
.city-table.city-table-compact td.city-act {
  width: 1%;
  padding: 3px 2px;
  text-align: center;
  white-space: nowrap;
}

.city-table-compact th.city-act-col abbr {
  font-size: var(--fs-xs);
}

.city-table-compact td.city-act .icon-button {
  display: inline-block;
  min-width: 20px;
  margin: 1px;
  padding: 1px 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--white);
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
}

.city-table-compact td.city-act .icon-button:hover {
  border-color: var(--line-strong);
  background: var(--surface-3);
}

.city-table-compact td.city-act a.city-abandon {
  color: var(--bad);
}

.city-table-compact td.city-act .city-abandon-later {
  border-color: transparent;
  background: none;
  color: var(--muted);
  cursor: help;
}

/* Příběh: jeden „hráč“ a jeho města jako v profilu hráče */
.story-player-name {
  color: var(--white);
}

table.grid.story-city-list td.center a img {
  vertical-align: middle;
}

/* Krajská nástěnka na Hlavní: nahoře přes celou šířku, text bíle tak, jak ho vláda napsala */
.home-board {
  max-width: none;
}

.home-board-text {
  color: var(--white);
  white-space: pre-wrap;
}

.home-board-head .home-board-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--sp-2);
  font-size: var(--fs-xs);
}

/* Hlavní: Vztahy s kraji stejně vysoké jako Statistiky hráče. Výšku řádku určují statistiky
   (contain: size = tabulka vztahů výšku nezvětšuje), víc vztahů se posouvá uvnitř boxu. */
.home-columns {
  align-items: stretch;
}

.home-relations-box {
  display: flex;
  flex-direction: column;
}

.home-relations-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  contain: size;
}

.home-relations-scroll .home-relations thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
}

/* Na úzké obrazovce jsou boxy pod sebou: vztahy mají svou přirozenou výšku. */
@media (max-width: 760px) {
  .home-relations-scroll {
    overflow-y: visible;
    contain: none;
  }
}

/* Smlouvy: jedna tabulka krajů, velení má sloupec Akce s krátkými tlačítky v řádku */
table.grid.dipl-relations th[scope="row"] {
  color: var(--text);
  white-space: nowrap;
}

table.grid.dipl-relations td {
  vertical-align: middle;
}

.dipl-relations tr.dipl-incoming > * {
  background: var(--row-warn);
}

.dipl-relations .region-tag.dipl-tag-in {
  border-color: var(--warn);
  color: var(--warn);
}

.dipl-relations .dipl-act,
.dipl-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

.dipl-relations .dipl-act form,
.dipl-toolbar form {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.dipl-relations td.dipl-actions select {
  padding: 1px 2px;
  font-size: var(--fs-xs);
}

/* Smlouvy: vztah, odkazy a výběry se nelámou po písmenech ani nemačkají; když se akce nevejdou,
   zalomí se celé prvky pod sebe [majitel 2026-10]. */
.dipl-relations .dipl-act > *,
.dipl-relations .dipl-act form > * {
  flex-shrink: 0;
}

.dipl-relations td.dipl-actions select {
  width: auto;
}

/* Smlouvy: ochrana po válce pod dobou smlouvy, aby sloupec nebyl zbytečně široký */
.dipl-relations .dipl-protection {
  margin-top: 2px;
}

.dipl-relations td.dipl-none,
.dipl-relations .dipl-act a,
.dipl-relations .dipl-act button {
  white-space: nowrap;
}

/* Detail vztahu: akce v jednom řádku pod stavem */
.dipl-toolbar {
  justify-content: center;
  margin: 0 auto 14px;
}

.dipl-toolbar label {
  color: var(--muted);
}

/* ---------- Pošta od Systému: odesílatel i předmět světle modře jako admin [majitel 2026-10] ---------- */
.system-mail,
a.system-mail,
a.system-mail:visited {
  color: var(--forum-admin);
}

/* ---------- Stavby a Útok (větev stavby-utok) ----------
   Nápověda v bublině (<help-tip> + wwwroot/js/help-tip.js), Stavby na jednu obrazovku se záložkami
   Postavit | Nahradit, typy útoků na /utok pod sebou po skupinách (každý typ svou barvou). */

/* Nápověda v bublině: otazník v kolečku. Text u otazníku je opravdu skrytý (hidden), help-tip.js ho ukáže
   v bublině na konci <body> s position: fixed, takže ji .content (overflow-x: auto) neořízne ani nerozšíří. */
.help-tip {
  display: inline-block;
  margin-left: 4px;
  line-height: 1;
  vertical-align: middle;
}

.help-tip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--muted);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: bold;
  line-height: 1;
  cursor: help;
  user-select: none;
}

.help-tip-icon:hover,
.help-tip-icon[aria-expanded="true"] {
  border-color: var(--white);
}

.help-tip-icon:focus {
  outline: none;
}

.help-tip-icon:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 1px;
}

.help-tip .help-tip-text {
  display: none;
}

.help-tip-bubble {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: max-content;
  max-width: min(340px, calc(100vw - 16px));
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: normal;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
}

.help-tip-bubble[hidden] {
  display: none;
}

.help-tip-bubble b {
  color: var(--white);
}

/* Stavby, záložka Postavit: výběr města s otazníkem, nízké řádky a malé obrázky, ať se tabulka vejde na obrazovku */
.toolbar.stavby-city {
  margin: 4px 0 0;
}

table.grid.stavby-table th,
table.grid.stavby-table td {
  padding: 2px 8px;
}

.grid.stavby-table input.count {
  width: 90px;
}

/* Stavby, záložka Nahradit */
.city-box.bulk-replace {
  margin-top: 4px;
}

/* Útok, 1. krok: typy útoků pod sebou ve skupinách (dobývání, konvenční, nekonvenční). Každý typ má svou barvu
   (--atk z .atk-* v oddílu 19) na zkratce, levém proužku a ukazateli kvóty. Vybraný typ je poznat jen barvou: rámeček
   a jemný podklad v barvě typu, plná zkratka; bez překryvu a stínu [majitel 2026-10]. Typ, na který nemáš jednotky
   nebo nemáš kvótu, je šedý. */
.attack-types {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.attack-cat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.attack-cat legend {
  margin-bottom: 3px;
  padding: 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.attack-type {
  display: grid;
  grid-template-columns: auto minmax(190px, 240px) minmax(0, 1fr);
  gap: 1px 10px;
  align-items: center;
  min-width: 0;
  padding: 3px 8px;
  border: 1px solid var(--line-soft);
  border-left: 4px solid var(--atk, var(--line-strong));
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}

.attack-type:hover {
  border-color: var(--atk, var(--line-strong));
}

.attack-type:has(input:checked) {
  border-color: var(--atk, var(--line-strong));
  background: color-mix(in srgb, var(--atk, var(--line)) 14%, var(--surface));
}

.attack-type:has(input:checked) .atk-chip {
  border-color: var(--atk, var(--line-strong));
  background: var(--atk, var(--line-strong));
  color: var(--bg);
}

.attack-type:has(input:focus-visible) {
  outline: 2px solid var(--atk, var(--white));
  outline-offset: 1px;
}

/* nepoužitelný typ: šedý proužek, zkratka i text (bez průhlednosti) */
.attack-type.no-units,
.attack-type.closed {
  --atk: var(--line-strong);
  color: var(--muted);
}

.attack-type.closed {
  cursor: default;
}

.attack-type.closed:hover {
  border-color: var(--line-soft);
  border-left-color: var(--atk);
}

.attack-type input {
  margin: 0;
  accent-color: var(--atk, var(--line-strong));
}

.attack-type-main,
.attack-type-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.attack-type-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.attack-type small {
  display: block;
  font-size: var(--fs-xs);
}

.attack-type small.attack-type-desc {
  color: var(--text);
  font-size: var(--fs-sm);
}

.attack-type.no-units small,
.attack-type.closed small {
  color: var(--muted);
}

@media (max-width: 760px) {
  .attack-type {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .attack-type-info {
    grid-column: 2;
  }
}

/* Jednotky a Nebojové: tři řádky souhrnu nad tabulkou zarovnané vlevo, tip k propouštění pod tabulkou */
.army-stats p {
  text-align: left;
}

.army-tip {
  margin: 6px 0 12px;
  text-align: left;
}

/* Hrdinové v plné velikosti originálu (160 × 120), v tabulce i při najímání */
.army-heroes td.hero-cell {
  min-width: 200px;
}

img.hero-portrait,
.army-hire img.hero-thumb {
  width: 160px;
  height: 120px;
}

/* Úkoly: obrázky stejně velké jako jednotky na /jednotky (120 × 90) */
.task-table td.task-name img.cat-img {
  vertical-align: middle;
}

/* Fóra: klasický příspěvek, vlevo sloupec s avatarem, nickem, krajem a hodností, vpravo hlavička a text */
.posts article.post {
  align-items: stretch;
}

.posts .post-author .nick {
  display: block;
  margin-bottom: 2px;
}

.posts .post-author .post-rank {
  margin-top: 2px;
}

@media (max-width: 760px) {
  img.hero-portrait,
  .army-hire img.hero-thumb {
    width: 120px;
    height: 90px;
  }

  .posts .post-author .nick {
    display: inline;
    margin: 0;
  }
}

/* Fóra, mazání: vlastní příspěvek běžným odkazem, cizí (moderátor) červeně přes potvrzovací okno se jménem autora */
.post-head .post-actions a.mod-delete,
.post-head .post-actions button.mod-delete {
  color: var(--bad);
  font-weight: bold;
}

.mod-excerpt {
  margin: 8px 0;
  padding: 6px 10px;
  border-left: 3px solid var(--line-strong);
  background: var(--surface-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- Admin: Statusy a funkce v detailu hráče [majitel 2026-10] ---------- */
table.grid.admin-status {
  width: 100%;
  margin: 0 0 8px;
}

table.grid.admin-status td {
  vertical-align: middle;
}

/* Menu administrace ve skupinách: pod hlavním řádkem menší řádek se stránkami skupiny */
.submenu.admin-subnav {
  margin-top: -6px;
  font-size: var(--fs-sm);
}


/* ---------- Drobnosti (větev drobnosti) ----------
   Hrdinové menší (140 × 105, mezi dřívějšími 120 × 90 a originálem 160 × 120), spotřeba jídla a nafty pod sebou,
   skupiny Bojové / Nebojové ve formulářích KA, užší Správa měst s malými tlačítky a avatar v tabulce profilu. */
.army-heroes td.hero-cell {
  min-width: 170px;
}

img.hero-portrait,
.army-hire img.hero-thumb {
  width: 140px;
  height: 105px;
}

.army-units td.army-upkeep {
  white-space: nowrap;
}

.ka-units tr.ka-group th {
  background: var(--surface-2);
  text-align: left;
}

.city-table.city-table-compact th,
.city-table.city-table-compact td {
  padding: 3px;
}

.city-table.city-table-compact th {
  font-size: var(--fs-xs);
}

.city-table.city-table-compact td.city-act .btn.small {
  display: block;
  margin: 1px 0 3px;
  padding: 1px 5px;
  text-align: center;
}

.city-table.city-table-compact td.city-act a.btn.small.city-abandon {
  color: var(--bad);
}

.city-table.city-table-compact td.city-act .city-abandon-later {
  display: block;
  white-space: normal;
  cursor: help;
}

.profile tr.profile-avatar-row > td {
  text-align: center;
}

.profile tr.profile-avatar-row .profile-avatar {
  margin: 4px auto;
}

@media (max-width: 760px) {
  img.hero-portrait,
  .army-hire img.hero-thumb {
    width: 120px;
    height: 90px;
  }
}

/* ---------- Hráči kraje: akce v řádku (exil, návrat z exilu, vyhození k Bezdomovcům) ---------- */

.member-exiled {
  display: block;
  font-size: var(--fs-sm);
}

.member-actions-cell {
  white-space: nowrap;
}

.member-actions > summary {
  cursor: pointer;
  color: var(--link);
  font-size: var(--fs-sm);
}

.member-actions-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.member-actions-body form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.member-actions-body input[name="reason"] {
  width: 150px;
  font-size: var(--fs-sm);
}

/* Hlavní: vláda online a „zobrazit nástěnku“ na jednom řádku vlevo [majitel 2026-10] */
.home-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin: 0 0 10px;
  text-align: left;
}

.home-topline .home-government {
  margin: 0;
}

.home-topline .home-board-show {
  margin: 0;
  font-size: var(--fs-xs);
}

/* ---------- Admin: Hráči a účty a detail hráče v blocích (větev admin-hraci) ----------
   Výpis: filtr na jeden řádek, řazení kliknutím na záhlaví. Detail: rozcestník na kotvy bloků,
   formuláře po jednom na řádek (tabulka admin-actions), blok Nebezpečné červeně orámovaný. */
.toolbar.admin-filter {
  justify-content: center;
  align-items: center;
  margin: 0 0 10px;
}

.toolbar.admin-filter input[type="text"] {
  width: 180px;
}

.toolbar.admin-filter select {
  width: auto;
}

table.grid.admin-players th a {
  color: inherit;
}

table.grid.admin-players th.sorted a::after {
  content: "\00a0▼";
}

table.grid.admin-players th.sorted.asc a::after {
  content: "\00a0▲";
}

table.grid.admin-players td {
  vertical-align: middle;
}

table.grid.admin-players td.admin-account span {
  display: block;
}

.admin-links {
  white-space: nowrap;
}

.admin-links a,
.admin-links form {
  margin-right: 6px;
}

.submenu.admin-tabs {
  margin: 0 0 6px;
  font-size: var(--fs-sm);
}

.submenu.admin-tabs a {
  border-color: var(--line);
}

.submenu.admin-tabs a.admin-tab-danger {
  color: var(--bad);
}

table.grid.admin-facts {
  width: 100%;
  max-width: 900px;
}

table.grid.admin-actions {
  width: 100%;
}

table.grid.admin-actions th {
  width: 180px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

@media (max-width: 760px) {
  table.grid.admin-facts tr {
    display: flex;
    flex-wrap: wrap;
  }

  table.grid.admin-facts th,
  table.grid.admin-facts td {
    flex: 1 1 40%;
    width: auto;
  }

  table.grid.admin-actions th {
    width: auto;
    white-space: normal;
  }
}
/* ---------- UI polish: jednotná tlačítka, tabulky bez přetékání, online tečka, barvy útoků (větev ui-polish) ----------
   Tlačítka ve hře mají jen tyhle varianty:
   - .btn            běžné (šedé), .btn.primary hlavní akce (světlejší rámeček, tučně);
   - .btn.small      malé tlačítko v řádku tabulky nebo u pole;
   - .btn.danger     nevratná akce (propustit, zbourat, opustit, odvolat, smazat) – červené, vždy s potvrzením;
   - .link-button    tlačítko, které vypadá jako odkaz (.link-button.danger červeně).
   Platí pro <button>, <a> i <summary> (nabídka akcí v řádku). */
summary.btn {
  display: inline-block;
  padding: 3px 14px;
  border: 1px solid #8f8f8f;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--white);
  font: inherit;
  line-height: 1.35;
  list-style: none;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

summary.btn::-webkit-details-marker {
  display: none;
}

summary.btn::after {
  content: "\00a0▾";
  color: var(--muted);
}

summary.btn:hover,
details[open] > summary.btn {
  background: #4a4a4a;
}

summary.btn:focus-visible,
button.link-button:focus-visible,
a.link-button:focus-visible {
  outline: 2px solid #bdbdbd;
  outline-offset: 1px;
}

summary.btn.small {
  padding: 1px 9px;
  font-size: var(--fs-sm);
  font-weight: bold;
  white-space: nowrap;
}

a.btn.primary {
  border-color: #dedede;
  background: #4a4a4a;
  font-weight: bold;
}

a.btn.primary:hover {
  background: #575757;
}

button.btn.danger,
a.btn.danger,
summary.btn.danger {
  border-color: #a85d5d;
  background: #4a2b2b;
  color: #f6dcdc;
}

button.btn.danger:hover,
a.btn.danger:hover,
summary.btn.danger:hover {
  border-color: #c77474;
  background: #633636;
  color: var(--white);
}

button.btn.danger:disabled,
button.btn.danger:disabled:hover {
  border-color: #6e4a4a;
  background: #3a2a2a;
}

/* Odkazové tlačítko: dřív bylo vždy červené, teď jako odkaz; červené jen s .danger */
button.link-button,
a.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  font-size: var(--fs-xs);
  text-decoration: underline;
  cursor: pointer;
}

button.link-button:hover,
a.link-button:hover {
  color: var(--white);
}

button.link-button.danger,
a.link-button.danger,
.post-head .post-actions a.mod-delete {
  color: var(--bad);
}

button.link-button.danger:hover,
a.link-button.danger:hover,
.post-head .post-actions a.mod-delete:hover {
  color: #f0a6a6;
}

/* Hlavní: „zobrazit nástěnku“ vpravo v řádku s vládou online, bíle [majitel 2026-10] */
.home-topline .home-board-show {
  margin-left: auto;
}

.home-topline .home-board-show .link-button {
  color: var(--white);
}

/* Online: zelená tečka před nickem (NickTagHelper), title „Online“ */
.online-dot {
  flex-shrink: 0;
  margin-right: 4px;
  vertical-align: 1px;
}

/* Nabídka akcí v řádku tabulky (row-menu.js): panel přes tabulku, řádek ani sloupce se nehnou */
details.row-menu {
  position: relative;
  display: inline-block;
}

.row-menu-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: max-content;
  min-width: 240px;
  max-width: min(360px, calc(100vw - 16px));
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  text-align: left;
  white-space: normal;
}

.row-menu-panel.row-menu-fixed {
  position: fixed;
  right: auto;
}

.row-menu-panel form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.row-menu-panel input[name="reason"],
.row-menu-panel input[type="text"] {
  flex: 1 1 150px;
  width: auto;
  min-width: 0;
  font-size: var(--fs-sm);
}

/* Tabulky: nic nesmí přetéct do strany. Dlouhé slovo (e-mail, nick) se radši zalomí, čísla a časy zůstávají v řádku. */
.content table.grid td {
  overflow-wrap: anywhere;
}

.content table.grid td.num,
.content table.grid td.when {
  overflow-wrap: normal;
}

/* Jednotky: „propustit všechny“ se v úzkém sloupci jednotky zalomí, ať tabulka nepřeteče */
.army-units .btn.small.danger {
  white-space: normal;
}

/* Správa měst: přejmenovat a opustit jako malá tlačítka pod názvem města (bez sloupce Akce) */
.city-table-compact .city-name-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 3px;
}

.city-table-compact .city-name-actions .btn.small {
  padding: 0 6px;
  font-size: var(--fs-xs);
}

.city-table-compact .city-name-actions .city-abandon-later {
  align-self: center;
  cursor: help;
}

/* Statusy a Admin TEAM: obálka u jména = napsat poštu */
a.mail-to {
  display: inline-block;
  margin-left: 6px;
  line-height: 0;
  vertical-align: middle;
}

a.mail-to img {
  opacity: 0.85;
}

a.mail-to:hover img,
a.mail-to:focus-visible img {
  opacity: 1;
}

/* Pošta: stav zprávy ikonou jako v horní liště (OS žlutá, VL zelená, TECH fialová); přečtená zhasnutá šedá */
td.mail-state {
  width: 1%;
  text-align: center;
}

.mail-state-icon {
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
}

.mail-state-icon.off img {
  opacity: 0.4;
  filter: grayscale(1);
}

/* Války věku: filtr podle kraje a stavu nad výpisem */
.toolbar.war-filter {
  gap: 6px 16px;
  margin: 0 0 12px;
}

.war-filter label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--accent);
  font-size: var(--fs-sm);
}

.war-filter select {
  width: auto;
}

/* Barvy typů útoků jsou v oddílu 19 (.atk-* → tokeny --atk-* v :root), stejné jako na /utok [majitel 2026-10]. */

/* Výsledek ve výpisech útoků: jemně podbarvená buňka, žlutá úspěch / dobře pro tebe, oranžová neúspěch [M 6.3, majitel 2026-10] */
table.grid.attack-log tbody tr.atk-row td.good {
  background: color-mix(in srgb, var(--atk-yes) 10%, var(--bg));
  color: var(--atk-yes);
}

table.grid.attack-log tbody tr.atk-row td.bad {
  background: color-mix(in srgb, var(--atk-no) 10%, var(--bg));
  color: var(--atk-no);
}

.attack-history td.atk-opp-target,
.attack-history td.atk-opp-target a,
.atk-color-legend .atk-opp-target {
  color: #9fcf9f;
}

.attack-history td.atk-opp-attacker,
.attack-history td.atk-opp-attacker a,
.atk-color-legend .atk-opp-attacker {
  color: #dc9a9a;
}

/* Bojová zpráva, podrobnosti: vítězná / poražená síla podbarvená */
.grid.battle tr.total td.win,
.grid.battle td.win {
  background: color-mix(in srgb, var(--good) 11%, var(--surface));
  color: var(--good);
}

.grid.battle tr.total td.loss,
.grid.battle td.loss {
  background: color-mix(in srgb, var(--bad) 10%, var(--surface));
  color: var(--bad);
}

/* Krajská armáda: sklad nad tabulkou Bojové (dřív záložka Sklad), budovy, které vyrábí jídlo a naftu, v řadě s textem */
.ka-stats .ka-producers .img-label {
  margin: 2px 0;
  vertical-align: middle;
}

/* Oznámení: záložky Oznámení | Archiv, plná šířka obsahu, nepřečtená zvýrazněná, tlačítka u řádku [majitel 2026-10] */
.notes-intro {
  margin-top: 0;
  font-size: var(--fs-sm);
}

.notes-list {
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.notes-list > li + li {
  border-top: 1px solid var(--line-soft);
}

.notes-row,
.notes-row-form {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.notes-row-form,
.notes-row .home-note {
  flex: 1 1 auto;
  min-width: 0;
}

.notes-row form.inline {
  flex: none;
}

.notes-row .btn.small {
  flex: none;
  margin: 3px 6px 3px 0;
  white-space: nowrap;
}

.notes-row.unread {
  background: var(--row-unread);
}

.notes-row.unread .home-note > summary b {
  color: var(--white);
}

.notes-row:not(.unread) .home-note > summary b {
  font-weight: normal;
}

.notes-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 10px 0;
}

/* ---------- root-admin: štítek roota (Admin:Root) v adminu ---------- */
.admin-flag.root {
  border-color: var(--role-admin);
  color: var(--role-admin);
  font-weight: 700;
}

/* Detail hráče v adminu: rychlá úprava hodnoty přímo v Přehledu („upravit“ otevře malý formulář v řádku). */
.quick-edit {
  display: inline-block;
  margin-left: 6px;
  text-align: left;
  vertical-align: top;
}

.quick-edit > summary {
  color: var(--muted);
  font-size: var(--fs-xs);
  cursor: pointer;
  text-decoration: underline dotted;
}

.quick-edit[open] {
  display: block;
  margin: 4px 0 0;
}

.quick-edit .quick-form {
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Čas příspěvku a jeho číslo (#id) v barvě funkce autora, stejně jako nick a text [majitel 2026-10]. */
.posts .post-head .post-meta .muted,
.posts .post-head a.post-id {
  color: var(--nick, var(--muted));
}

/* Kraj autora ve fóru v barvě funkce autora jako nick [majitel 2026-10]. */
.posts .post-region {
  color: var(--nick, var(--muted));
}

/* Krajská zpráva v poště: text a rámeček v barvě funkce odesílatele, jako příspěvek ve fóru [majitel 2026-10]. */
.mail-body.mail-regional {
  border: 2px solid color-mix(in srgb, var(--nick, var(--line)) 85%, var(--line));
}

/* Správa fondu: Krajský fond sám nahoře uprostřed, ostatní dlaždice v boxech nad formulářem [majitel 2026-10]. */
.stat-tiles.fund-top {
  grid-template-columns: minmax(0, 280px);
  justify-content: center;
}

.stat-tiles.fund-box-tiles {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin: 0 0 var(--sp-2);
}

/* Hlavní: připomínka běžících referend a voleb pod nástěnkou, rámeček jako nástěnka [majitel 2026-10]. */
.home-voting-list {
  margin: 0;
  padding: 6px 12px;
  list-style: none;
}

.home-voting-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--sp-2);
  padding: 2px 0;
}

.home-voting-detail {
  flex: 1;
  min-width: 0;
  color: var(--white);
  overflow-wrap: anywhere;
}

.home-voting-meta {
  margin-left: auto;
  font-size: var(--fs-xs);
}

/* ---------- Fóra z manuálu: AntiMulti, Výzkum, Herní, VIP [M 8.1] ---------- */

/* AntiMulti fórum béžově jako status AntiMulti, VIP fórum tučně v barvě velitele (vedení krajů). */
.grid.forums tr.forum-antimulti td.forum-name > a,
h1.forum-antimulti {
  color: var(--status-antimulti);
}

.grid.forums tr.forum-vip td.forum-name > a,
h1.forum-vip {
  color: var(--role-velitel);
  font-weight: bold;
}

/* Systémová hláška (dokončený výzkum ve fóru Výzkum): bez avataru, nick „Systém“. */
.posts article.post.system-post .post-author .nick {
  font-weight: bold;
}

/* ---------- AntiMulti tabulka [M 5.2.7] ---------- */

.multi-table td.multi-stage {
  white-space: nowrap;
  font-weight: bold;
}

.multi-table tr.multi-reported td.multi-stage,
.multi-table tr.multi-warned1 td.multi-stage,
.multi-table tr.multi-warned2 td.multi-stage,
.multi-table tr.multi-warned3 td.multi-stage,
.multi-table tr.multi-deleted td.multi-stage {
  color: var(--bad);
}

.multi-table tr.multi-cleared td.multi-stage {
  color: var(--good);
}

.multi-table form.inline + form.inline {
  margin-left: var(--sp-2);
}

form.multi-resolve {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

form.multi-resolve input[type="text"] {
  flex: 1 1 140px;
  min-width: 0;
}

/* ---------- Admin – jednotný vzhled [majitel 2026-10] ----------
   Všechny stránky /admin (main.content.admin-page, třídu přidává _Layout) skládají jen z těchto dílů:
   - hlavička: _AdminMenu (skupiny, podmenu a hláška .notice vždy na stejném místě), pak <h1> s případnou <help-tip>
     a pod ním nepovinně .admin-intro (jedna šedá věta);
   - oddíly: <h2> (podtržený) a .admin-grid = mřížka stejně velkých boxů (dva vedle sebe, na mobilu pod sebou);
   - .admin-box = box s nadpisem <h3> v pruhu (jako .box-title ve hře); .admin-box.danger = nevratné akce (červeně, vždy
     poslední), .admin-wide přes celou šířku mřížky, .admin-narrow jediný box uprostřed;
   - .admin-line = řádek „popisek – pole – tlačítko“; v boxu a ve formuláři .admin-form mají popisky (<label>, .admin-label)
     stejnou šířku, takže pole leží pod sebou; .admin-inline = řádek tlačítek; .admin-note = drobná šedá poznámka;
   - nápověda <help-tip> je vždy v nadpisu nebo v popisku, ne uprostřed textu;
   - tabulky kompaktní: table.grid.admin-table (výpisy), table.grid.overview (údaj – hodnota), table.grid.admin-actions
     (popisek – formulář); potvrzovací krok = <confirm-dialog> (okno); tlačítka .btn, u nevratných .btn.danger. */
.admin-page > h2,
.admin-page .admin-section > h2 {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.admin-intro {
  margin: -4px 0 12px;
  color: var(--muted);
  text-align: center;
}

.admin-intro b {
  color: var(--text);
}

.admin-note {
  color: var(--muted);
  font-size: var(--fs-xs);
}

p.admin-note {
  margin: 6px 0;
}

.admin-section {
  scroll-margin-top: 8px;
}

/* Mřížka stejně velkých boxů: dva vedle sebe, třetí pod nimi; na úzké obrazovce jeden sloupec */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--sp-3);
  align-items: stretch;
  margin: var(--sp-3) 0;
}

.admin-box {
  min-width: 0;
  margin: var(--sp-3) 0;
  padding: 0 12px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.admin-grid > .admin-box {
  margin: 0;
}

.admin-box.admin-wide {
  grid-column: 1 / -1;
}

.admin-box.admin-narrow {
  max-width: 680px;
  margin-right: auto;
  margin-left: auto;
}

/* Nadpis boxu v pruhu jako .box-title ve hře */
.admin-box > h3:first-child {
  margin: 0 -12px 8px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--surface-2);
  color: var(--accent);
  font-size: var(--fs-base);
  text-align: center;
  overflow-wrap: break-word;
}

.admin-box > h3:not(:first-child) {
  margin: 12px 0 6px;
  font-size: var(--fs-sm);
}

.admin-box > :last-child {
  margin-bottom: 0;
}

.admin-box textarea,
.admin-box .form {
  width: 100%;
  max-width: none;
}

.admin-box > table.grid {
  margin: 0 0 4px;
}

/* Patička boxu oddělená čárou (doplňková akce pod formulářem) */
.admin-box-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

/* Nevratné akce: box i blok Nebezpečné v detailu hráče stejně červeně */
.admin-box.danger,
.admin-section.admin-danger {
  border-color: #845050;
}

.admin-box.danger > h3:first-child {
  border-bottom-color: #845050;
  background: #4a3333;
  color: var(--bad);
}

.admin-section.admin-danger {
  margin-top: 28px;
  padding: 0 12px 10px;
  border: 1px solid #845050;
  border-radius: var(--radius);
}

.admin-section.admin-danger > h2 {
  border-bottom-color: #845050;
  color: var(--bad);
}

/* Řádek „popisek – pole – tlačítko“ */
.admin-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 6px 0;
}

.admin-line > label,
.admin-label {
  margin: 0;
  color: var(--accent);
  font-size: var(--fs-sm);
}

.admin-line form {
  margin: 0;
}

.admin-line select,
.admin-line input[type="text"],
.admin-line input[type="number"],
.admin-line input[type="datetime-local"] {
  width: auto;
  max-width: 100%;
}

.admin-line input[type="number"] {
  width: 110px;
}

.admin-line input.admin-reason,
.admin-line input.admin-grow {
  flex: 1 1 200px;
  min-width: 160px;
}

.admin-line textarea {
  flex: 1 1 100%;
}

/* V boxu a ve formuláři .admin-form mají popisky stejnou šířku, pole a tlačítka leží pod sebou */
.admin-box > .admin-line > label:first-child,
.admin-box > .admin-line > .admin-label:first-child,
.admin-form > .admin-line > label:first-child,
.admin-form > .admin-line > .admin-label:first-child {
  flex: 0 0 11em;
}

/* Řádek tlačítek (odkazy a formuláře vedle sebe) */
.admin-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
}

.admin-inline form {
  margin: 0;
}

/* Tabulky v administraci kompaktní; údaj – hodnota s úzkým sloupcem popisků */
.admin-page table.grid th,
.admin-page table.grid td {
  padding: 4px 8px;
}

.admin-page table.grid.overview th[scope="row"] {
  width: 1%;
  white-space: nowrap;
}

/* Čísla v dlaždicích Přehledu vedou na odfiltrovaný seznam */
.admin-tile b a {
  color: inherit;
  text-decoration: none;
}

.admin-tile b a:hover {
  text-decoration: underline;
}

@media (max-width: 520px) {
  .admin-box > .admin-line > label:first-child,
  .admin-box > .admin-line > .admin-label:first-child,
  .admin-form > .admin-line > label:first-child,
  .admin-form > .admin-line > .admin-label:first-child {
    flex-basis: 100%;
  }

  .admin-line > .admin-label:empty {
    display: none;
  }
}

/* Obchodní dobývání [majitel 2026-10]: poznámka na útoku a v bojové zprávě, přehled obchodu a formulář návrhu. */
.dipl-trade-note {
  margin: var(--sp-2) auto;
  padding: 6px 12px;
  border: 1px solid #7d7350;
  border-left: 4px solid var(--warn);
  border-radius: var(--radius);
  background: var(--row-warn);
}

.dipl-trade-progress {
  width: 120px;
  vertical-align: middle;
  margin-left: var(--sp-2);
}

.dipl-relations .region-tag.dipl-trade-tag {
  margin-left: var(--sp-1);
  text-decoration: none;
}

.dipl-trade-form {
  max-width: 640px;
  margin: var(--sp-2) auto;
}

.dipl-trade-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  margin-bottom: var(--sp-2);
}

.dipl-trade-field > label {
  flex: 0 0 230px;
}

.dipl-trade-field input[type="number"] {
  width: 140px;
}

@media (max-width: 520px) {
  .dipl-trade-field > label {
    flex-basis: 100%;
  }
}

/* Útok, 1. krok: kam teď jde útočit (jen ve válce a přes obchodní dobývání) [majitel 2026-10]: jeden řádek
   „Útočit jde: Válka: X do 13. 10. · Y do 13. 10. · Bezdomovci (?)“, vysvětlení v bublině. */
.attack-allowed {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  align-items: baseline;
  justify-content: center;
  margin: 0 0 8px;
  font-size: var(--fs-sm);
}

.attack-allowed-label {
  margin-right: 6px;
  color: var(--muted);
}

.attack-allowed-group + .attack-allowed-group::before,
.attack-allowed-item + .attack-allowed-item::before {
  content: "·";
  margin: 0 6px;
  color: var(--muted);
}

.attack-allowed-group > span:first-child:not(.attack-allowed-item) {
  margin-right: 4px;
}

.attack-allowed .muted a,
.attack-allowed a.muted {
  color: var(--muted);
}

.attack-allowed a.muted:hover {
  color: var(--white);
}

/* Detail vztahu a Obchodní dobývání [majitel 2026-10: uklizeně]: karta stavu nahoře, akce v boxech vedle sebe
   (Smlouva | Válka | Obchod), sbalená historie dole. Na mobilu boxy pod sebou (city-forms je auto-fit mřížka). */
.dipl-state .dipl-status {
  width: 100%;
  margin: 0 0 10px;
}

.dipl-boxes {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.dipl-box .dipl-toolbar,
.dipl-trade-box .dipl-toolbar {
  justify-content: flex-start;
  margin: 0 0 10px;
}

.dipl-box .dipl-trade-form,
.dipl-trade-new .dipl-trade-form {
  max-width: none;
  margin: 0 0 6px;
}

.dipl-box .dipl-trade-field > label {
  flex-basis: 100%;
}

.dipl-box .dipl-status,
.dipl-trade-box .dipl-status {
  width: 100%;
}

.city-box .box-title help-tip {
  font-weight: normal;
}

.dipl-trade-box .box-title a {
  color: var(--accent);
}

.dipl-trade-box .box-title .region-tag {
  margin-left: var(--sp-1);
  font-weight: normal;
}

.city-box.dipl-incoming-box {
  border-color: var(--warn);
}

/* Sbalená historie: záhlaví boxu je zároveň přepínač. */
details.dipl-history-box > summary.box-title {
  margin-bottom: 0;
  cursor: pointer;
}

details.dipl-history-box[open] > summary.box-title {
  margin-bottom: 10px;
}

details.dipl-history-box h3 {
  margin: 10px 0 6px;
  color: var(--accent);
  text-align: center;
}

/* Útok, 1. krok: cíl s našeptávačem a „kam teď jde útočit“ vedle sebe [majitel 2026-10] */
.attack-top .attack-who .attack-nick {
  max-width: none;
}

.attack-step1 .attack-top > .attack-who:only-child {
  max-width: 640px;
}

.attack-suggest-list {
  margin: 6px 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  list-style: none;
}

.attack-suggest-list li + li {
  border-top: 1px solid var(--line);
}

.attack-suggest-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  padding: 4px 8px;
  text-decoration: none;
}

a.attack-suggest-pick:hover,
a.attack-suggest-pick:focus {
  background: var(--surface-2);
}

.attack-suggest-list li.blocked {
  opacity: 0.7;
}

.attack-suggest-empty {
  margin: 6px 0 0;
}

.attack-rel-trade {
  color: var(--warn);
}

.attack-rel-homeless {
  color: var(--muted);
}

.attack-types-box .attack-types {
  margin-top: 0;
}

/* Smlouvy: odkaz Obchod u každého kraje */
.dipl-relations .dipl-trade-link {
  margin-left: var(--sp-1);
  font-weight: normal;
}

/* Úklid stránek [majitel 2026-10]: Smlouvy krajů a Války věku v boxech se záhlavím, dlaždice s počty nahoře,
   dvojice válek a menší tabulky vedle sebe (na mobilu pod sebou). */
a.stat-tile {
  color: inherit;
  text-decoration: none;
}

a.stat-tile:hover,
a.stat-tile:focus {
  border-color: var(--accent);
}

.republic-boxes,
.war-pairs {
  grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr));
}

.city-box table.grid.republic {
  margin-bottom: 10px;
}

.city-box .box-title .box-title-link {
  margin-left: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: normal;
}

.war-filter {
  max-width: 640px;
}

.war-pair-box .war-score {
  margin: 0 0 8px;
}

.city-box.war-pair-mine {
  border-color: var(--accent);
}

.war-pair-box table.grid.war-pair {
  margin-bottom: 10px;
}

/* Útok, 2. krok jako 1. krok: karta cíle | typ útoku a cílové město, pod nimi box s jednotkami */
.attack-step2 .attack-target {
  margin-top: 0;
}

.attack-setup .attack-hint {
  margin: 0 0 8px;
}

.attack-setup .attack-field select {
  min-width: 0;
  max-width: 100%;
}

.attack-change {
  margin: 8px 0 6px;
}

.attack-units-box .attack-units {
  margin-top: 0;
}

.attack-units-box .attack-actions {
  margin: 10px 0 12px;
}

/* Vláda: funkce v boxu (odstoupení pod tabulkou), Hráči kraje a Kronika v boxech se záhlavím */
.city-box.gov-box {
  max-width: 720px;
}

.gov-box table.grid.gov-table,
.city-box table.grid.region-members,
.city-box table.grid.region-requests,
.city-box table.grid.region-log {
  margin-bottom: 10px;
}

.chronicle-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
  gap: var(--sp-3) var(--sp-4);
  align-items: start;
  margin: 12px 0;
}

.chronicle-layout > .city-box {
  max-width: none;
  margin: 0;
}

.chronicle-new .form.wide {
  max-width: none;
}

@media (max-width: 800px) {
  .chronicle-layout {
    grid-template-columns: 1fr;
  }
}

/* Dlouhé výpisy po dnech: záhlaví skupiny přes celou šířku tabulky (řazení klikem ho odstraní, game.js) */
.grid tr.group-row > th {
  background: var(--surface-2);
  color: var(--accent);
  font-size: var(--fs-sm);
  text-align: left;
}

.city-box.attack-log-box table.grid.attack-log,
.fund-payouts-box table.grid.ka-payouts {
  margin-bottom: 10px;
}

.attack-log-box .box-title help-tip,
.attack-log-box .box-title .muted {
  font-weight: normal;
}

/* Osobní, Přestup a Příjmy kraje: boxy se záhlavím vedle sebe */
.city-box > table.grid.overview,
.city-box > table.grid.ka-regions {
  margin-bottom: 10px;
}

.personal-boxes .form,
.novacek-box .form {
  margin-bottom: 10px;
}

.city-box table.grid.key-cities,
.city-box table.grid.story-cities,
.city-box table.grid.mutes,
.city-box table.grid.task-table {
  margin-bottom: 10px;
}

.task-wins {
  margin: 0 0 8px;
}

.task-wins b {
  color: var(--white);
  font-size: var(--fs-md);
}

/* Moderování hráče: stav nahoře (se zrušením trestu), zásahy vedle sebe */
.city-box.mod-state {
  max-width: 680px;
}

.mod-unmute {
  margin: var(--sp-2) 0 0;
}

.city-box.transfer-pending {
  max-width: 680px;
}

.fund-income .city-box {
  max-width: none;
  margin: 0;
}

.fund-income {
  margin: 12px 0;
}

/* Úklid stránek, 2. várka [majitel 2026-10]: Republika (Příběh, Hledání, Rekordy), Herna, Pošta, Fóra, Jednotky,
   Obchod, Osidlování, Oznámení a admin v boxech se záhlavím, vysvětlivky v bublinách, výpisy po dnech. */
.records-box .record-boards {
  margin-bottom: 10px;
}

.search-box .searchbox {
  margin-bottom: 10px;
}

.city-box.mail-compose,
.city-box.forum-reply {
  max-width: 820px;
}

.city-box.hangman-history-box {
  max-width: 680px;
}

.herna-box table.grid.lotto-tickets,
.city-box table.grid.lotto-tickets,
.city-box table.grid.hangman-history,
.city-box table.grid.herna-winners-table,
.city-box table.grid.mutes,
.city-box table.grid.army-heroes,
.city-box table.grid.army-upgrades,
.city-box form > table.grid.army-hire,
.city-box table.grid.ka-units,
.city-box table.grid.trade-table,
.city-box table.grid.trade-cheapest,
.city-box table.grid.city-table {
  margin-bottom: 10px;
}

.lotto-history-box .stats {
  margin: 0 0 8px;
}

.city-box .submenu.market-groups {
  margin-top: 0;
}

.ka-top .army-stats {
  margin-bottom: 8px;
}

.settle-targeted .form.city-box-bottom {
  max-width: 460px;
}

/* Oznámení: akce nad seznamem, oznámení po dnech */
.notes-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 6px;
}

.notes-toolbar .notes-actions {
  margin: 0;
}

.notes-list > li.notes-day {
  padding: 3px 10px;
  background: var(--surface-2);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: bold;
}

/* ---------- Detail kraje v Republice: souhrn s mapou | vláda, pod nimi hráči kraje [majitel 2026-10] ---------- */

.region-detail-top {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.region-detail-top .region-head {
  margin: 0 0 10px;
}

.region-detail-top .region-government {
  margin: 4px 0 10px;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .region-detail-top {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* AntiMulti: varování přenesené z minulého věku [majitel 2026-10] */
.multi-carried {
  margin-left: 4px;
  color: var(--muted);
  font-weight: normal;
  white-space: nowrap;
}

/* ---------- Klíčová města na mapě krajů: bílé tečky na skutečné poloze [majitel 2026-10] ---------- */
.region-map .map-key-city circle {
  fill: #ffffff;
  stroke: #142130;
  stroke-width: 1;
  transition: r 0.12s;
}

.region-map .map-key-city:hover circle,
.region-map .map-key-city:focus-visible circle {
  r: 5;
  fill: #ffe9a8;
}

.region-map .map-key-city:focus-visible {
  outline: none;
}

/* Republika → Klíčová města: mapa nahoře, po krajích karty s obrázkem, majitelem a popisem [majitel 2026-10] */
.key-city-map-box .region-map {
  max-width: 820px;
  margin: 0 auto 6px;
}

.key-city-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: var(--sp-3);
  margin-bottom: 8px;
}

.key-city-card {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  scroll-margin-top: 80px;
}

.key-city-card:target {
  border-color: #ffe9a8;
  box-shadow: 0 0 0 1px #ffe9a8;
}

.key-city-card img.key-city-thumb {
  flex: none;
}

.key-city-text {
  min-width: 0;
}

.key-city-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px var(--sp-2);
}

.key-city-name {
  color: var(--white);
}

.key-city-attack {
  margin-left: 6px;
}

.key-city-info {
  margin: 4px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text);
}

@media (max-width: 480px) {
  .key-city-cards {
    grid-template-columns: 1fr;
  }

  .key-city-card {
    flex-direction: column;
  }
}

/* ---------- Oznámení ekonomického přepočtu po sekcích (Bilance, Bonus, Katastrofa, Ztráty, Stávky, Varování) ----------
   Bonus zeleně, katastrofa/ztráty/stávky červeně, varování tlumenou žlutou palety (--warn), bilance šedě. Řádek přepočtu
   s katastrofou nebo ztrátami (NotificationKind.EconomicAlert) má vlevo červený proužek. */
.notes-row.alert {
  box-shadow: inset 3px 0 0 var(--bad);
}

.note-chip {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: normal;
  line-height: 1.5;
  white-space: nowrap;
}

.note-chip.good {
  border-color: var(--good);
  color: var(--good);
}

.note-chip.bad {
  border-color: var(--bad);
  color: var(--bad);
}

.note-chip.warn {
  border-color: var(--warn);
  color: var(--warn);
}

.tick-note {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 6px 10px;
  margin: 4px 0;
}

.tick-sec {
  padding: 3px 8px 4px;
  border-left: 3px solid var(--line-strong);
  background: var(--surface-2);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.tick-sec h4 {
  margin: 0 0 2px;
  color: var(--accent);
  font-size: var(--fs-sm);
}

.tick-sec ul {
  margin: 0;
  padding-left: 16px;
}

.tick-sec li {
  margin: 1px 0;
}

.tick-sec.good {
  border-left-color: var(--good);
  background: var(--row-good);
}

.tick-sec.good h4 {
  color: var(--good);
}

.tick-sec.bad {
  border-left-color: var(--bad);
  background: var(--row-bad);
}

.tick-sec.bad h4 {
  color: var(--bad);
}

.tick-sec.warn {
  border-left-color: var(--warn);
  background: var(--row-warn);
}

.tick-sec.warn h4 {
  color: var(--warn);
}

.tick-sec h4::before {
  content: "\2261\00a0";
}

.tick-sec.good h4::before {
  content: "\25b2\00a0";
}

.tick-sec.bad h4::before {
  content: "\25bc\00a0";
}

.tick-sec.warn h4::before {
  content: "!\00a0";
}

/* ---------- Výzkum kraje a příběhová města ve stylu krajských upgradů [majitel 2026-10] ---------- */
/* Tabulka v boxu kategorie (a příběhu kraje) bez vlastního okraje, jako u upgradů. */
.upgrade-group table.grid.research-projects,
.upgrade-group table.grid.story-cities {
  margin: 0;
}

/* Rychlé částky u polí s penězi (_MoneyAdd) [majitel 2026-10]: řádek tlačítek pod polem, v řádku Fondu vedle pole. */
.money-add {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.fund-donate .money-add {
  margin-top: 0;
}

/* Vláda kraje: Funkce v kraji a Jmenování do funkce vedle sebe, na mobilu pod sebou [majitel 2026-10].
   Jen div: stejnou třídu má i tabulka Vlády krajů na /republika a mřížka by ji rozbila. */
div.gov-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: var(--sp-4);
  align-items: start;
}

.gov-grid > .city-box.gov-box,
.gov-grid > .city-box.gov-appoint {
  max-width: none;
  margin: 0;
}

.gov-grid .gov-appoint-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-items: start;
}

.gov-grid .gov-appoint-row select {
  width: 100%;
}

.gov-grid .gov-appoint-row .btn {
  grid-column: 2;
}

@media (max-width: 760px) {
  div.gov-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Kdo nejmenuje, má jen box Funkce v kraji: jeden sloupec, šířka jako dřív. */
div.gov-grid.gov-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

.gov-grid.gov-grid-single > .city-box.gov-box {
  max-width: 720px;
  margin: 0 auto;
}

/* Rekordy [majitel 2026-10: „tabulky jsou rozbité kvůli textu“]: tři úzké tabulky vedle sebe se nesmí roztahovat
   textem. Pevné šířky sloupců (colgroup v Rekordy.cshtml), menší písmo, každý řádek na jeden řádek textu;
   co se nevejde (dlouhý nick, kraj, věk), skončí třemi tečkami a celý text je v title. Popis tabulky je v bublině,
   takže nadpisy mají stejnou výšku a řádky sousedních tabulek lícují. */
table.grid.record-board {
  table-layout: fixed;
  font-size: var(--fs-sm);
}

.record-board caption {
  font-size: var(--fs-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content table.grid.record-board td {
  padding: 4px 6px;
}

.record-board col.rec-pos {
  width: 2.8em;
}

.record-board col.rec-region {
  width: 30%;
}

.record-board col.rec-age {
  width: 5.5em;
}

.record-board col.rec-value {
  width: 9em;
}

/* Text v buňce na jeden řádek, přesah třemi tečkami (celý text v title buňky) */
.content table.grid td.cut {
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rekordy skončených věků mají sloupec navíc (věk): po dvou vedle sebe, ať se jména vejdou. */
.record-boards.record-boards-wide {
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}

.record-boards-wide col.rec-region {
  width: 26%;
}

/* Mapa Republiky: tečky klíčových měst jen po zaškrtnutí „zobrazit města“ pod mapou, bez obnovení stránky
   [majitel 2026-10: „tečky jsou moc rušivé“]. Malá mapa v detailu kraje se řídí stejnou volbou (.hide-key-cities), mapa Klíčových měst tečky ukazuje vždy. */
.republic-map:has(input[data-map-cities]:not(:checked)) .map-key-cities,
.hide-key-cities .map-key-cities {
  display: none;
}

.map-cities-toggle {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  text-align: center;
}

.map-cities-toggle label {
  cursor: pointer;
}

.map-cities-toggle input {
  margin: 0 4px 0 0;
  vertical-align: middle;
}

/* Admin → Kraje → detail kraje: členové vlády vedle sebe, u každého jeho funkce [majitel 2026-10] */
.admin-gov-member {
  display: inline-block;
  margin: 0 12px 2px 0;
  white-space: nowrap;
}

/* Potvrzovací okno [majitel 2026-10: „ať je to jednotně na modální okno Ano/Ne uprostřed stránky“]:
   jedno okno pro všechna potvrzení – data-confirm v game.js i potvrzovací kroky ze serveru (<confirm-dialog>).
   <dialog> je jen průhledný obal uprostřed stránky, vzhled dělá vnitřní city-box (ničivá akce = confirm-box s červeným
   rámečkem a záhlavím). Bez skriptu je okno taky uprostřed (position: fixed), jen bez ztmavení. */
dialog.confirm-dialog {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  height: fit-content;
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 0;
  background: transparent;
  color: var(--text);
}

dialog.confirm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

/* Vzhled jako boxy hry [majitel 2026-10: „ať odpovídá hře“]: záhlaví přes celou šířku, obsah na střed,
   tlačítka v pruhu dole oddělená čarou; barvy jen z tokenů, aby seděly i se zeleným vzhledem. */
.confirm-dialog > .city-box {
  max-width: none;
  margin: 0;
  padding: 0 16px;
  border-color: var(--line-strong, var(--line));
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.65);
}

.confirm-dialog > .city-box > .box-title {
  margin: 0 -16px 12px;
  padding: 8px 12px;
  font-size: var(--fs-md);
  letter-spacing: 0.02em;
}

.confirm-dialog > .city-box.confirm-box {
  border-color: var(--bad);
}

.confirm-dialog > .city-box.confirm-box > .box-title {
  border-bottom-color: var(--bad);
  background: var(--surface-2);
  color: var(--bad);
}

.confirm-dialog .confirm-detail,
.confirm-dialog .confirm-lead {
  margin: 0 0 var(--sp-2);
  text-align: center;
}

.confirm-dialog .confirm-note {
  margin: var(--sp-2) 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: center;
}

.confirm-dialog .confirm-table {
  width: auto;
  min-width: 60%;
  margin: 0 auto var(--sp-2);
}

.confirm-dialog .confirm-tiles {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin: var(--sp-2) 0;
}

.confirm-dialog .confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin: var(--sp-3) -16px 0;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 0 0 var(--radius) var(--radius);
}

.confirm-dialog .confirm-actions .btn {
  min-width: 110px;
}

.confirm-dialog .bulk-list {
  margin: var(--sp-1) 0 var(--sp-2);
}

/* ---------- Reparace za porušení smlouvy v návrhu smlouvy [M 9.5.2] ---------- */
.dipl-toolbar form.dipl-propose {
  flex-wrap: wrap;
  justify-content: center;
}

.dipl-reparations {
  display: grid;
  flex-basis: 100%;
  grid-template-columns: auto minmax(7em, 11em);
  gap: var(--sp-1) var(--sp-2);
  align-items: center;
  justify-content: center;
  margin: var(--sp-1) 0;
  padding: var(--sp-1) var(--sp-2) var(--sp-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
}

.dipl-reparations legend {
  padding: 0 var(--sp-1);
  color: var(--muted);
}

.dipl-reparations label {
  text-align: right;
}

.dipl-reparations input {
  width: 100%;
}

/* Krajská armáda: důvod poslání do KA vedle tlačítka v součtovém řádku [M 3.4.2] */
.grid tr.ka-total > td.ka-deposit {
  font-weight: normal;
  text-align: right;
}

.ka-deposit input[type="text"] {
  width: 60%;
  min-width: 10em;
  max-width: 100%;
  margin-right: var(--sp-1);
}

/* Zamčená sekce Fond a výzkum (pod 30 měst mimo vládu, vyhnanec) [M 12.1.1] */
.fund-locked {
  max-width: 640px;
  margin: var(--sp-3) auto;
}

/* Útok: varování u dobývacího útoku, když chybí letecká technika nebo pěšák [majitel 2026-10]. Jen malý řádek
   žlutě s vykřičníkem (při výběru jednotek zmizí), žádný červený pruh; skutečnou chybu ukáže až odeslání. */
.attack-warn-row td {
  padding: 0 8px;
  border: 0;
}

.attack-warn {
  margin: 3px 0;
  padding: 0;
  color: var(--warn);
  font-size: var(--fs-sm);
  text-align: left;
}

.attack-warn::before {
  content: "!";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  font-weight: bold;
  line-height: 12px;
  text-align: center;
  vertical-align: 1px;
}

.attack-warn[hidden] {
  display: none;
}

/* Admin: víc tlačítek jednoho formuláře vedle sebe (+1 den, přepočty sobě) [majitel 2026-10] */
.admin-line form.admin-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

/* Admin → Moje nastavení: výsledek Testovací války [majitel 2026-10] */
.grid.admin-testwar {
  width: 100%;
  margin: var(--sp-2) 0 0;
}

.grid.admin-testwar th {
  text-align: left;
  font-weight: normal;
  color: var(--muted);
}

/* ---------- Řeky na mapách krajů a zvětšená mapa kraje (ČÚZK Data250) [majitel 2026-10] ----------
   Barvu a šířku řeky dědí cesta ze skupiny .map-river, aby ji širší průhledná kopie (<use class="map-river-hit">)
   mohla přebít: na tenkou čáru se tak dá najet myší a ukáže se název. Na mapě Republiky jsou řeky tenčí než bílé
   hranice krajů, aby se od nich daly rozeznat. Řeky jsou sytě modré [majitel 2026-10: „přece jen jsou to řeky“],
   světlejší a sytější než modré plochy krajů a světle modré okresy. */
.map-river {
  fill: none;
  stroke: #33b5ff;
  stroke-width: 0.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.map-river:hover {
  stroke: #a8dcff;
  stroke-width: 2.4;
}

.map-river-hit {
  stroke: transparent;
  stroke-width: 7;
}

/* Přepínače vrstev pod mapou (města, řeky, okresy) a uvedení zdroje dat */
.map-cities-toggle .help-tip + label,
.map-cities-toggle label + label {
  margin-left: var(--sp-3);
}

.map-source {
  margin-left: var(--sp-3);
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

/* Republika: řeky jen po zaškrtnutí „zobrazit řeky“ (bez obnovení stránky) */
.republic-map:has(input[data-map-rivers]:not(:checked)) .map-rivers {
  display: none;
}

/* Detail kraje → Mapa kraje: plocha kraje modře jako vybraný kraj, okresy tenkou jednobarevnou čarou (bez barevných
   ploch, po najetí se okres jen lehce rozjasní a ukáže název), bílé řeky a tečky klíčových měst. Mapa má svou přirozenou
   velikost (viewBox nejvýš 600 × 440), na úzké obrazovce se zmenší. */
.region-zoom {
  max-width: 660px;
}

.region-zoom-map {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.zoom-region {
  fill: #4b6f92;
  stroke: none;
}

/* Okraj kraje tmavý: řeky jsou na zvětšené mapě sytě modré, okresy světle modré. */
.zoom-region-border {
  fill: none;
  stroke: #142130;
  stroke-width: 1.6;
  stroke-linejoin: round;
  pointer-events: none;
}

.map-districts path {
  fill: transparent;
  stroke: #a9c1d9;
  stroke-width: 0.8;
  stroke-linejoin: round;
  transition: fill 0.12s;
}

.map-districts path:hover {
  fill: rgba(255, 255, 255, 0.12);
}

.region-zoom-map .map-river {
  stroke-width: 1.3;
}

.region-zoom-map .map-river:hover {
  stroke-width: 2.8;
}

.region-zoom-map .map-key-city circle {
  fill: #ffffff;
  stroke: #142130;
  stroke-width: 1.2;
  transition: r 0.12s;
}

.region-zoom-map .map-key-city:hover circle,
.region-zoom-map .map-key-city:focus-visible circle {
  r: 6.5;
  fill: #ffe9a8;
}

.region-zoom-map .map-key-city:focus-visible {
  outline: none;
}

.region-zoom:has(input[data-map-cities]:not(:checked)) .map-key-cities,
.region-zoom:has(input[data-map-rivers]:not(:checked)) .map-rivers,
.region-zoom:has(input[data-map-districts]:not(:checked)) .map-districts,
.region-zoom:has(input[data-map-zoom]:not(:checked)) .region-zoom-body {
  display: none;
}

/* Reparace za mír v návrhu míru [majitel 2026-10]: popisek, pole a rychlá tlačítka ve třech sloupcích */
.dipl-reparations.dipl-peace-terms {
  grid-template-columns: auto minmax(7em, 11em) auto;
}

.dipl-peace-terms .dipl-quick {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

@media (max-width: 520px) {
  .dipl-reparations.dipl-peace-terms {
    grid-template-columns: auto minmax(7em, 1fr);
  }

  .dipl-peace-terms .dipl-quick {
    grid-column: 2;
  }

  .dipl-peace-terms > span:empty {
    display: none;
  }
}

/* Útok bez rušivých pruhů [majitel 2026-10]: hláška po odeslání menší a užší, zamčený útok v boxu, poznámky k cíli
   (obchodní dobývání, porušení smlouvy, postih) malým řádkem v kartě cíle, odpočet kvót v záhlaví boxu typů. */
.attack-page > .notice {
  max-width: 640px;
  margin: 8px auto;
  padding: 4px 10px;
  font-size: var(--fs-sm);
  text-align: center;
}

.city-box.attack-locked {
  text-align: center;
}

.attack-locked p {
  margin: 6px 0 8px;
}

.attack-target-note {
  margin: 2px 0;
  font-size: var(--fs-sm);
}

.attack-target-note .region-tag {
  margin-left: 0;
}

.attack-target .warn {
  color: var(--warn);
}

/* Postih útoku ve válce jen malým štítkem „útok −10 %“ (důvody v bublině) u cíle i v bojové zprávě [majitel 2026-10] */
.attack-target-penalty,
.battle-penalty-value {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent);
  border-radius: var(--radius);
  color: var(--warn);
  font-size: var(--fs-xs);
  font-weight: normal;
  line-height: 16px;
  white-space: nowrap;
}

.battle-penalty {
  margin: 0 var(--sp-2) 0 0;
}

.battle-penalty .region-tag {
  color: var(--bad);
}

.city-box .box-title .box-title-note {
  margin-left: var(--sp-2);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: normal;
}

.attack-types-box .box-title [data-countdown] {
  color: var(--text);
}

/* Mapa kraje: přepínač „zobrazit“ v záhlaví boxu (celá mapa je ve výchozím stavu schovaná) [majitel 2026-10] */
.region-zoom .box-title .region-zoom-show {
  margin-left: var(--sp-2);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: normal;
  cursor: pointer;
}

.region-zoom .box-title .region-zoom-show input {
  margin: 0 4px 0 0;
  vertical-align: middle;
}

/* Bojová zpráva [majitel 2026-10: přehledněji, méně věcí]: nahoře výsledek jedním řádkem (proužek v barvě typu útoku),
   dlaždice s tím hlavním, souboje jako malé bloky s pruhem poměru síly, podrobnosti sbalené. Na mobilu pod sebou. */
.battle-head {
  max-width: 820px;
  margin: 8px auto 12px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--atk, var(--line-strong));
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.battle-head p {
  margin: 0;
}

.battle-headline {
  font-size: var(--fs-lg);
  font-weight: bold;
}

.battle-headline .atk-chip {
  margin-right: 4px;
  vertical-align: 2px;
}

.battle-head.good .battle-headline-text {
  color: var(--good);
}

.battle-head.bad .battle-headline-text {
  color: var(--bad);
}

.battle-headline small {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: normal;
}

.battle-head .battle-who {
  margin-top: 4px;
  font-size: var(--fs-sm);
}

.battle-vs {
  margin: 0 4px;
  color: var(--muted);
}

.battle-head .battle-tags {
  margin-top: 4px;
}

.battle-tags .region-tag:first-child {
  margin-left: 0;
}

.battle-tiles {
  max-width: 820px;
  margin: 0 auto 12px;
}

.stat-tile.battle-tile-mine {
  border-color: var(--line-strong);
}

.stat-tile b.win {
  color: var(--good);
}

.stat-tile b.loss {
  color: var(--bad);
}

.stat-tile b.muted {
  color: var(--muted);
}

.battle-chips {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-sm);
}

.battle-chips .img-chip {
  margin: 1px 6px;
}

/* Souboje vedle sebe; pruh = podíl síly útočníka (barva typu útoku) proti obránci (šedá) */
.battle-duels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-3);
  max-width: 820px;
  margin: 0 auto;
}

.battle-duels .city-box {
  max-width: none;
  margin: 0;
}

.battle-duels > .city-box:only-child {
  justify-self: center;
  width: 100%;
  max-width: 420px;
}

.duel-verdict {
  margin-left: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: normal;
}

.duel-bar {
  height: 8px;
  margin: 2px 0 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--muted) 45%, var(--surface));
}

.duel-bar-a {
  display: block;
  height: 100%;
  background: var(--atk, var(--line-strong));
}

.duel-p0 { width: 0; }
.duel-p5 { width: 5%; }
.duel-p10 { width: 10%; }
.duel-p15 { width: 15%; }
.duel-p20 { width: 20%; }
.duel-p25 { width: 25%; }
.duel-p30 { width: 30%; }
.duel-p35 { width: 35%; }
.duel-p40 { width: 40%; }
.duel-p45 { width: 45%; }
.duel-p50 { width: 50%; }
.duel-p55 { width: 55%; }
.duel-p60 { width: 60%; }
.duel-p65 { width: 65%; }
.duel-p70 { width: 70%; }
.duel-p75 { width: 75%; }
.duel-p80 { width: 80%; }
.duel-p85 { width: 85%; }
.duel-p90 { width: 90%; }
.duel-p95 { width: 95%; }
.duel-p100 { width: 100%; }

.duel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.duel-table th,
.duel-table td {
  padding: 2px 4px;
}

.duel-table th {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: normal;
  text-align: right;
}

.duel-table th[scope="row"] {
  color: var(--text);
  font-size: var(--fs-sm);
  text-align: left;
}

.duel-table td small {
  color: var(--muted);
  font-size: var(--fs-xs);
}

.duel-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  vertical-align: 0;
}

.duel-a .duel-dot {
  background: var(--atk, var(--line-strong));
}

.duel-d .duel-dot {
  background: color-mix(in srgb, var(--muted) 45%, var(--surface));
}

.duel-foot {
  margin: 4px 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  text-align: center;
}

.battle-duels-note {
  margin: 4px auto 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  text-align: center;
}

/* Průzkum a sbalené podrobnosti boje */
.battle-recon,
.battle-details {
  max-width: 820px;
}

.battle-recon .stat-tiles {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

details.battle-details > summary.box-title {
  margin-bottom: 0;
  cursor: pointer;
}

details.battle-details[open] > summary.box-title {
  margin-bottom: 10px;
}

.battle-details table.grid.battle {
  margin: 0 auto;
}

/* Bojová zpráva: vzduch, země a pěchota jako tři bloky vedle sebe, na užší obrazovce pod sebou [majitel 2026-10] */
.battle-duels.battle-duels-3 {
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .battle-duels.battle-duels-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Dar do fondu: pole na důvod je širší než částka [M 12.1.1.3, majitel 2026-10] */
.fund-donate input.fund-reason {
  width: 260px;
  max-width: 100%;
}

/* Růžový panáček nováčka za nickem v Republice [M 9.1.2, majitel 2026-10] */
.novacek-icon {
  display: inline-block;
  margin-left: 3px;
  color: var(--status-novacek);
  vertical-align: -1px;
  line-height: 1;
}

.novacek-icon svg {
  display: block;
  fill: currentColor;
}

/* Admin → detail kraje: smlouvy kraje s tlačítkem Smazat smlouvu [M 9.5.1, majitel 2026-10] */
.admin-treaties table.grid {
  width: 100%;
}

.admin-treaties form.admin-inline {
  margin: 0;
}

/* Horní lišta: armáda potřebuje víc jídla nebo nafty, než je v zásobě + výrobě – část jednotek při přepočtu zemře [majitel 2026-10] */
.resbar .delta.short {
  margin: 1px auto 0;
  padding: 0 4px;
  width: fit-content;
  border: 1px solid var(--bad);
  border-radius: 3px;
  background: rgba(229, 133, 133, 0.15);
  cursor: help;
}

.resbar .delta.short::before {
  content: "⚠ ";
}

/* Hlavní: řádek Online nováčci pod vládou online (jen veteráni, admini, moderátoři) [M 9.1.2, majitel 2026-10] */
.home-topline.home-novacci {
  align-items: baseline;
}

.home-novacci-label {
  color: var(--status-novacek);
  font-weight: bold;
  white-space: nowrap;
}

/* Návrh míru: proč hra předvyplnila poraženého (podle války) vedle výběru, zalomené [majitel 2026-10] */
.dipl-peace-terms .dipl-loser-hint {
  max-width: 18em;
  line-height: 1.25;
}

@media (max-width: 520px) {
  .dipl-peace-terms .dipl-loser-hint {
    grid-column: 2;
  }
}

/* Parťák [M 0.4, majitel 2026-10]: poznámka „Parťák nesmí …“ místo formuláře (<partner-guard>), box v Osobním */
.partner-note {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-style: italic;
}

p.partner-note {
  margin: 6px 0 10px;
  text-align: center;
}

.partner-box td .region-inline {
  margin-left: var(--sp-2);
}

/* Lišta „Hraješ v zastoupení“ (parťák): zelený proužek jako zelená tečka parťáka v Online hráčích [M 5.2.2] */
.admin-banner.partner-banner {
  border-left-color: var(--good);
}

/* Online hráči: majitel loginu modrá tečka, parťák zelená [M 5.2.2]; „V zastoupení“ u příspěvku a zprávy [M 0.4] */
.online-dot.owner {
  background: var(--info);
}

.online-legend .online-dot {
  margin-left: var(--sp-2);
}

.partner-mark {
  margin-left: 6px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-style: italic;
  cursor: help;
}

/* Útok na hráče Příběh [majitel 2026-10]: odkaz v řádku „Útočit jde“ a box posádky příběhového města. */
.attack-rel-story {
  color: var(--accent, inherit);
  font-weight: bold;
}

table.grid.attack-garrison-units {
  margin: 0 auto;
  width: auto;
}

.attack-garrison-units td {
  white-space: nowrap;
  padding: 4px 10px;
}

@media (max-width: 640px) {
  .attack-garrison-units tr {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Historie útoků: proč dobývání neuspělo, drobně pod výsledkem [majitel 2026-10] */
.attack-history td small.atk-fail-reason {
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: normal;
}

/* Prémiový účet: malá ikonka P za nickem v seznamech hráčů Republiky [M 5.2.1] (NickTagHelper.PremiumIcon) */
.premium-icon,
.role-legend .premium-icon {
  display: inline-block;
  margin: 0 0 0 3px;
  padding: 0 3px;
  border: 1px solid var(--warn);
  border-radius: 3px;
  color: var(--warn);
  font-size: 9px;
  font-weight: bold;
  line-height: 11px;
  vertical-align: 1px;
  white-space: nowrap;
}

/* ---------- Telefony [majitel 2026-10] ----------
   Hra se musí pohodlně hrát na telefonu (šířka 360–430 px): stránka se nikdy neposouvá do strany, písmo aspoň
   14 px, tlačítka a odkazy menu aspoň ~40 px vysoké, pole formulářů na celou šířku. Všechno je v @media pro úzkou
   obrazovku, na počítači se nic nemění (tlačítko Menu z _Layout je tam skryté). Blok je na konci souboru, aby
   přebil i pravidla stránek a „UI polish“. Obaly .table-scroll přidává game.js jen na úzké obrazovce.
   Velikosti obrázků se nemění. Kompaktní tabulka Vztahy s kraji na Hlavní zůstává, jak je (pravidlo majitele). */

.menu-toggle {
  display: none;
}

@media (max-width: 760px) {
  /* Písmo o stupeň větší (základ 13 → 14 px). */
  :root {
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-base: 14px;
    --fs-md: 15px;
    --fs-lg: 17px;
  }

  /* Vztahy s kraji na Hlavní beze změny: původní velikosti písma. */
  .home-relations-scroll {
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 13px;
    --fs-md: 14px;
    --fs-lg: 16px;
    font-size: 13px;
  }

  /* --- Hlavička: logo a tlačítko Menu v jednom řádku, menu se rozbalí pod nimi --- */
  .sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    justify-content: space-between;
    width: auto;
    padding: 8px 10px 4px;
  }

  .logo img {
    margin: 0;
  }

  .menu-toggle {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--white);
    font: bold 16px/1 var(--font);
    cursor: pointer;
  }

  .menu-toggle .badge {
    margin: 0;
  }

  .sidebar.menu-open .menu-toggle {
    border-color: #b5b5b5;
    background: var(--surface-3);
  }

  /* Ikona tří čárek */
  .menu-toggle-icon,
  .menu-toggle-icon::before,
  .menu-toggle-icon::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
  }

  .menu-toggle-icon {
    position: relative;
  }

  .menu-toggle-icon::before,
  .menu-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .menu-toggle-icon::before {
    top: -6px;
  }

  .menu-toggle-icon::after {
    top: 6px;
  }

  .menu {
    display: none;
    flex-basis: 100%;
  }

  .sidebar.menu-open .menu {
    display: block;
  }

  /* Skupiny menu oddělené čárou, odkazy ve dvou sloupcích jako velká tlačítka */
  .menu-block {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
    padding: 6px 0;
    border-top: 1px solid var(--line-soft);
  }

  .menu a,
  .menu button {
    display: flex;
    gap: 6px;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 6px 10px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 16px;
    line-height: 1.2;
  }

  .menu a.active {
    border-color: #9a9a9a;
    background: var(--surface-2);
  }

  /* --- Horní lišta surovin: mřížka o třech sloupcích, hráč a čas serveru přes celou šířku --- */
  .resbar {
    display: block;
    margin: 0 0 10px;
    border: 0;
    background: none;
  }

  .resbar tbody {
    display: block;
  }

  .resbar tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--line);
    background: var(--line);
  }

  .resbar td {
    display: block;
    min-width: 0;
    padding: 3px 4px;
    border: 0;
    background: var(--surface);
    overflow-wrap: anywhere;
  }

  .resbar td:first-child,
  .resbar td.server-time {
    grid-column: 1 / -1;
  }

  .resbar td:first-child .value,
  .resbar td.server-time .label,
  .resbar td.server-time .value {
    display: inline;
    margin: 0 4px;
  }

  .resbar td.mail-inds .value {
    flex-wrap: wrap;
    gap: 2px;
  }

  /* --- Obsah --- */
  .main {
    padding: 6px 8px 24px;
  }

  /* Podmenu: záložky jako dotykové cíle */
  .submenu {
    gap: 4px;
  }

  /* Svislítka mezi záložkami se při zalomení do více řádků jen pletou, záložky odděluje mezera. */
  .submenu .sep {
    display: none;
  }

  .submenu a,
  .submenu.role-submenu a,
  .submenu.manual-sections a,
  .submenu.role-menu a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 10px;
  }

  .region-links {
    gap: 2px 4px;
  }

  .region-links a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 4px 6px;
  }

  /* Tabulky: menší odsazení buněk; co se nevejde, posouvá se uvnitř obalu (game.js), ne celá stránka */
  .grid th,
  .grid td {
    padding: 4px 6px;
  }

  .table-scroll {
    max-width: 100%;
    margin: 0 0 var(--sp-3);
    overflow-x: auto;
  }

  /* V posuvném obalu se tabulka nemačká: pevné rozložení sloupců (trh, výzkum, rekordy …) a lámání slov uprostřed
     („Prům-yslov-á zóna“) jen na počítači; na telefonu je tabulka tak široká, jak potřebuje, a posouvá se. */
  .table-scroll > table.grid {
    margin-bottom: 0;
    table-layout: auto;
  }

  .table-scroll > table.grid td {
    overflow-wrap: break-word;
  }

  /* Jednotky (sloupec = jednotka): popisky řádků se zalomí a zůstanou při posouvání vlevo vidět */
  .table-scroll > table.army-units th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 96px;
    max-width: 120px;
    background: var(--surface-2);
    white-space: normal;
  }

  /* Boxy na celou šířku pod sebou */
  .city-box {
    max-width: none;
    padding: 0 10px 4px;
  }

  .city-box .box-title,
  .herna-box .box-title {
    margin: 0 -10px 10px;
  }

  .city-forms {
    grid-template-columns: minmax(0, 1fr);
  }

  .stat-tiles,
  .admin-tiles {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  /* Formuláře: pole vysoká na prst; písmo 16 px (menší písmo iPhone při psaní přiblíží) */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="date"],
  input:not([type]),
  select,
  textarea {
    min-height: 40px;
    font-size: 16px;
  }

  .city-action select,
  .city-action input[type="text"],
  .searchbox input[type="text"],
  .toolbar select {
    flex: 1 1 160px;
    width: auto;
  }

  .form {
    max-width: none;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }

  /* Tlačítka aspoň 40 px vysoká (malá v řádcích tabulek 36 px) */
  button.btn,
  a.btn,
  summary.btn,
  input[type="submit"] {
    min-height: 40px;
    padding: 8px 14px;
  }

  button.btn.small,
  a.btn.small,
  summary.btn.small {
    min-height: 36px;
    padding: 6px 10px;
  }

  a.btn,
  summary.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Veřejné stránky: užší okraje, odkazy v patičce jako dotykové cíle */
  .public-box {
    padding: 8px 10px 16px;
    border-right: 0;
    border-left: 0;
  }

  .public-footer {
    font-size: var(--fs-sm);
  }

  .public-links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 4px;
  }
}