/* ===========================================================================
   Incremental Sheep — REDESIGN stylesheet (drop-in náhrada styles.css)
   Teplý pastorální vzhled, zelená + zlatá, premium karty.
   Pozadí + panely se plynule mění z louky do vesmíru dle proměnné --cosmic
   (nastavuje ji src/redesign.js podle čísla fáze). Cílí na STÁVAJÍCÍ třídy
   z src/ui/ui.js — žádná změna v logice hry není potřeba.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

@property --cosmic { syntax: '<number>'; initial-value: 0; inherits: true; }

:root {
  --cosmic: 0;
  --m: calc(var(--cosmic) * 100%);
  /* ostrý překlop panelů+textu: rychle a SPOLEČNĚ mezi fází 5 a 6,
     aby text ani pozadí nikdy neuvázly v šedé (= nečitelné). Obloha
     se přitom stmívá plynule přes --m. */
  --msr: clamp(0, calc((var(--cosmic) - 0.36) * 7.7), 1);
  --ms: calc(var(--msr) * 100%);

  /* konstantní akcenty (zelená ovce + zlaté bohatství) */
  --green:      oklch(0.62 0.11 150);
  --green-deep: oklch(0.50 0.10 150);
  --gold:       oklch(0.78 0.105 84);
  --gold-deep:  oklch(0.62 0.108 70);
  --warn:       oklch(0.72 0.115 58);
  --bad:        oklch(0.62 0.135 35);

  /* proměnlivá paleta: pastorální (světlá) ↔ kosmická (tmavá).
     Pozadí panelů i barvy textu se MÍCHAJÍ STEJNÝM --ms, takže se
     překlápějí současně a kontrast zůstává vždy zachovaný. */
  --paper:    color-mix(in oklch, oklch(0.992 0.008 90), oklch(0.27 0.045 288) var(--ms));
  --paper-2:  color-mix(in oklch, oklch(0.965 0.013 88), oklch(0.24 0.045 286) var(--ms));
  --sunk:     color-mix(in oklch, oklch(0.925 0.016 86), oklch(0.19 0.045 285) var(--ms));
  --ink:      color-mix(in oklch, oklch(0.31 0.022 68),  oklch(0.96 0.012 90) var(--ms));
  --ink-soft: color-mix(in oklch, oklch(0.47 0.022 72),  oklch(0.88 0.03 320) var(--ms));
  --ink-faint:color-mix(in oklch, oklch(0.63 0.018 78),  oklch(0.80 0.04 320) var(--ms));
  --line:     color-mix(in oklch, oklch(0.89 0.016 84),  oklch(0.80 0.05 320 / .28) var(--ms));
  --panel:    color-mix(in oklch, oklch(0.992 0.008 90), oklch(0.29 0.045 290 / .62) var(--ms));
  --panel-2:  color-mix(in oklch, oklch(0.955 0.012 88), oklch(0.25 0.045 288 / .62) var(--ms));
  --card-shadow: 0 1px 0 oklch(1 0 0 / calc(0.6 - var(--msr) * 0.55)) inset,
                 0 8px 22px oklch(0.3 0.04 280 / calc(0.10 + var(--cosmic) * 0.25));

  --serif: "Spectral", Georgia, serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --r-lg: 18px; --r-md: 13px; --r-sm: 9px;
  transition: --cosmic 1.4s cubic-bezier(.4,0,.2,1);
}
* { box-sizing: border-box; }

/* ---- pozadí: louka → soumrak → vesmír ---------------------------------- */
html, body { margin: 0; min-height: 100%; }
html {
  scrollbar-gutter: stable both-edges;
  background:
    radial-gradient(120% 90% at 50% -15%,
      color-mix(in oklch, oklch(0.86 0.06 230), oklch(0.20 0.06 280) var(--m)),
      color-mix(in oklch, oklch(0.95 0.02 95),  oklch(0.12 0.05 285) var(--m)))
    fixed;
}
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}
body {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}
body::before { /* hvězdné pole jen v kosmu */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--cosmic);
  transition: opacity 1.4s ease;
  background-image:
    radial-gradient(1.3px 1.3px at 12% 18%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 68% 12%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 84% 42%, oklch(0.9 0.05 320), transparent),
    radial-gradient(1px 1px at 32% 56%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 52% 78%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 22% 88%, oklch(0.9 0.06 90), transparent),
    radial-gradient(1px 1px at 90% 72%, #fff, transparent);
}

#app { position: relative; z-index: 1; flex: 1; max-width: 880px; width: 100%; margin: 0 auto; padding: 16px 14px; }
h2, h3 { margin: 0; }

/* ---- HUD ---------------------------------------------------------------- */
.hud {
  background: linear-gradient(180deg, var(--paper), var(--panel-2));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--card-shadow);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hud-title { font-size: 22px; font-family: var(--serif); font-weight: 600; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hud-title .dim { font-size: 12px; color: var(--ink-faint); font-family: var(--sans); font-weight: 500; }
.hud-hint { color: var(--gold-deep); font-size: 12.5px; margin: 5px 0 12px; }
body.cosmic .hud-hint { color: var(--gold); }
/* #opt: suroviny se vejdou na DVA řádky a každý řádek je JEDEN řádek bez zalomení.
   Řádek 1 = kredity…maso (chips-main), řádek 2 = ostatní suroviny (chips-extra).
   Chipy se rovnoměrně zUží, aby se řada vždy vešla na jeden řádek; uvnitř se obsah
   skládá pod sebe (zásoba / rychlost za s / cena), takže i úzký chip zůstane čitelný. */
.chips { display: flex; flex-wrap: nowrap; gap: 6px; }
/* druhý řádek (#68): ostatní suroviny — mírně potlačené a oddělené mezerou */
.chips-extra { margin-top: 7px; }
.chips-extra .chip-v { font-size: 15px; }
.chip {
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 6px 9px; display: flex; flex-direction: column; box-shadow: var(--card-shadow);
  flex: 1 1 0; min-width: 0;     /* stejně široké, zUží se aby se řada vešla na jeden řádek */
}
/* řádek 1 chipu (#68): ikona + zásoba + rychlost/s vedle sebe (název je jen v title) */
/* uvnitř chipu: ikona + zásoba spolu na 1. řádku, rychlost/s se zalomí pod ně (#opt) */
.chip-top { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px; row-gap: 1px; min-width: 0; }
.chip-i { font-size: 13px; flex-shrink: 0; line-height: 1; }
.chip-v { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink);
  white-space: nowrap; min-width: 0; }
/* rychlost/s (#11): na vlastním řádku pod zásobou, drobně a potlačeně */
.chip-t { flex-basis: 100%; font-size: 11px; line-height: 1.15; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* řádek 2 chipu (#68): jednotková cena v kreditech; pevná výška, ať HUD neposkakuje (#36) */
.chip-p { min-height: 14px; line-height: 14px; font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* #opt: na užších oknech zmenši písmo i odsazení chipů, ať oba řádky surovin
   (5 + až 8 chipů) zůstanou každý na jednom řádku bez ořezu hodnot. */
@media (max-width: 720px) {
  .chip { padding: 5px 7px; }
  .chip-i { font-size: 12px; }
  .chip-v { font-size: 14px; }
  .chips-extra .chip-v { font-size: 13px; }
  .chip-t, .chip-p { font-size: 10px; }
}
@media (max-width: 480px) {
  .chips { gap: 4px; }
  .chip { padding: 4px 5px; }
  .chip-v { font-size: 12px; }
  .chips-extra .chip-v { font-size: 11px; }
  .chip-t, .chip-p { font-size: 9px; }
}
/* zlatý akcent jen na úplně prvním chipu (Kredity) — ne na prvním chipu řádku 2 */
.chips-main .chip:first-child {
  background: linear-gradient(180deg,
    color-mix(in oklch, oklch(0.97 0.04 88), oklch(0.33 0.05 290) var(--m)),
    color-mix(in oklch, oklch(0.92 0.055 86), oklch(0.30 0.05 290) var(--m)));
  border-color: var(--gold);
}
.chips-main .chip:first-child .chip-v { color: var(--gold-deep); }
body.cosmic .chips-main .chip:first-child .chip-v { color: var(--gold); }

/* ---- záložky ------------------------------------------------------------ */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tab {
  background: var(--panel-2); color: var(--ink-faint); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 15px; cursor: pointer; font-size: 13px; font-family: var(--sans);
  box-shadow: inset 0 1px 2px oklch(0.4 0.03 70 / .07); transition: color .2s, background .2s, transform .1s;
}
.tab:hover { color: var(--ink); background: var(--panel); }
.tab.active {
  background: linear-gradient(180deg, var(--green), var(--green-deep));
  color: oklch(0.98 0.02 150); border-color: transparent;
  box-shadow: 0 2px 8px oklch(0.6 0.1 150 / .4);
}

/* ---- panely / sekce ----------------------------------------------------- */
.panel { display: flex; flex-direction: column; gap: 12px; }
.sect {
  background: linear-gradient(180deg, var(--paper), var(--panel-2));
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px;
  box-shadow: var(--card-shadow); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.sect h3 { margin: 0 0 11px; font-size: 12px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }

/* #35: inline karta „nová fáze" v aktivním panelu — zlatý akcent, nepřekrývá panel */
.sect.phase-banner { border: 2px solid var(--gold); background: linear-gradient(135deg, oklch(0.99 0.04 90 / .6), var(--panel-2)); }
.sect.phase-banner .modal-tag { color: var(--gold-deep); }
.sect.phase-banner h2 { margin: 4px 0 8px; font-size: 18px; }
.sect.phase-banner > .act { margin-top: 10px; }

/* ---- tlačítka ----------------------------------------------------------- */
button.act, .footer-btn {
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 9px 14px; cursor: pointer; font-size: 13px; font-family: var(--sans);
  font-weight: 600; margin: 3px 6px 3px 0; box-shadow: var(--card-shadow); transition: transform .08s, filter .15s, background .15s;
}
button.act:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--green), var(--green-deep)); color: oklch(0.98 0.02 150);
  border-color: transparent; box-shadow: 0 2px 8px oklch(0.6 0.1 150 / .4);
}
button.act:active:not(:disabled) { transform: translateY(1px) scale(.985); }
button.act:disabled { opacity: .45; cursor: not-allowed; filter: saturate(.5); }
/* #opt: jednotně široká tlačítka — šířku určuje mřížka, NE délka textu, takže se
   velikost nemění, když se podtitulek přepíná („chybí 💰" ↔ efekt) ani když se
   mění čísla. Všechna akční tlačítka v řadě jsou stejně velká. */
.btn-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; align-items: stretch; }
.btn-row > button.act { margin: 0; width: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; }
/* doprovodné texty / odkazy (kapacita skladu, GitHub…) nemají být úzký sloupec */
.btn-row > :not(button) { grid-column: 1 / -1; align-self: center; }

/* hlavní/akcentní tlačítko: dej třídu .act + .primary, kde chceš zlatý CTA */
button.act.primary {
  background: linear-gradient(180deg, oklch(0.80 0.10 84), var(--gold-deep)); color: oklch(0.99 0.02 90);
  border-color: transparent; box-shadow: 0 2px 0 oklch(0.54 0.10 68), 0 6px 16px oklch(0.7 0.11 80 / .42), inset 0 1px 0 oklch(1 0 0/.4);
}
button.act.primary:hover:not(:disabled) { filter: brightness(1.05); background: linear-gradient(180deg, oklch(0.80 0.10 84), var(--gold-deep)); color: oklch(0.99 0.02 90); }

/* ---- položky / seznamy -------------------------------------------------- */
.list { display: flex; flex-direction: column; gap: 9px; }
.item { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; }
.item-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.stat-row { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0; font-variant-numeric: tabular-nums; }
.dim { color: var(--ink-faint); }
.small { font-size: 12px; }
/* Stavové/varovné řádky s proměnlivou délkou (limit stáda, páření): rezervovaná
   výška ~2 řádky, ať změna textu (např. „málo samců") neposouvá UI pod sebou (#36). */
.statusline { display: block; min-height: 30px; line-height: 15px; font-variant-numeric: tabular-nums; }

/* ---- pruhy (bar) -------------------------------------------------------- */
.bar { position: relative; height: 18px; background: var(--sunk); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; margin: 7px 0;
  box-shadow: inset 0 1px 2px oklch(0.4 0.03 70/.12); }
.barfill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px 0 0 7px;
  background: linear-gradient(180deg, oklch(0.68 0.11 150), var(--green-deep)); box-shadow: 0 0 10px oklch(0.6 0.1 150/.3); transition: width .4s cubic-bezier(.4,0,.2,1); }
.barlabel { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- genové lišty ------------------------------------------------------- */
.genes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.gene-h { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-soft); }
.gene-track { position: relative; height: 8px; background: var(--sunk); border-radius: 4px; margin: 4px 0 2px;
  box-shadow: inset 0 1px 2px oklch(0.4 0.03 70/.12); }
.gene-sigma { position: absolute; top: 0; bottom: 0; background: color-mix(in oklch, oklch(0.5 0.02 150 / .14), oklch(0.9 0.05 320 / .18) var(--m)); border-radius: 4px; }
.gene-mu { position: absolute; top: -2px; width: 4px; height: 12px; border-radius: 2px; transform: translateX(-2px); box-shadow: 0 0 6px currentColor; }
/* gen na dobrém stropu (#opt): zvýrazněná značka μ + zlatý popisek — optimální
   hodnoty tak nesplývají v jedné plné liště (funguje na obou koncích škály). */
.gene-maxed .gene-mu { box-shadow: 0 0 0 1.5px oklch(0.99 0.02 90 / .9), 0 0 8px var(--gold); }
.gene-maxed .gene-h { color: var(--gold-deep); font-weight: 600; }
body.cosmic .gene-maxed .gene-h { color: var(--gold); }

/* ---- ovládací prvky ----------------------------------------------------- */
.ctl-row { display: flex; align-items: center; gap: 8px; margin: 7px 0; flex-wrap: wrap; }
.ck { display: flex; align-items: center; gap: 8px; margin: 6px 0; cursor: pointer; }
input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 120px; height: 6px; border-radius: 3px;
  background: var(--sunk); box-shadow: inset 0 1px 2px oklch(0.4 0.03 70/.12); cursor: pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 17px; height: 17px; border-radius: 50%; cursor: pointer;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep)); border: 2px solid var(--paper); box-shadow: 0 2px 5px rgba(0,0,0,.25); }
select, input[type=number] { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px 8px; font-family: var(--sans); box-shadow: var(--card-shadow); }

/* ---- plátno stáda ------------------------------------------------------- */
.herdcanvas { width: 100%; height: 128px; border-radius: var(--r-md); display: block; margin-bottom: 8px;
  border: 1px solid var(--line); box-shadow: inset 0 1px 3px oklch(0.3 0.04 280/.2); }

/* ---- tabulka statistik -------------------------------------------------- */
table.stats { width: 100%; border-collapse: collapse; }
table.stats td { padding: 5px 0; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--line); }
table.stats td:first-child { color: var(--ink-faint); }
table.stats td:last-child { text-align: right; font-weight: 600; }

/* ---- banner ------------------------------------------------------------- */
.banner {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: oklch(0.99 0.02 90);
  border: none; padding: 11px 16px; border-radius: var(--r-md); margin-bottom: 12px; font-size: 13px; font-weight: 500;
  box-shadow: 0 6px 18px oklch(0.6 0.1 80/.4);
}

/* ---- footer ------------------------------------------------------------- */
#footer {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 18px; background: var(--panel); border-top: 1px solid var(--line); font-size: 12px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#footer button { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 11px; cursor: pointer; font-family: var(--sans); }
#footer button:hover { background: var(--panel); }
#footer .danger { border-color: var(--bad); color: var(--bad); }
#footer .danger:hover { background: var(--bad); color: oklch(0.99 0.02 30); }
#footer input { flex: 1; min-width: 120px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 9px; font-family: ui-monospace, monospace; }
#footer .spacer { flex: 1; }
#footer a { color: var(--ink-faint); text-decoration: none; }
#footer a:hover { color: var(--gold-deep); }
#save-msg { color: var(--green-deep); }

/* ---- juice vrstva (přidává redesign.js) -------------------------------- */
.fxlayer { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.fx-float { position: absolute; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums;
  color: var(--green-deep); text-shadow: 0 1px 2px oklch(1 0 0/.6); animation: fxFloat 1.1s ease-out forwards; transform: translateX(-50%); }
body.cosmic .fx-float { color: oklch(0.85 0.12 150); text-shadow: 0 0 8px oklch(0.6 0.1 150/.8); }
@keyframes fxFloat { 0% { opacity: 0; transform: translate(-50%, 0) scale(.7); } 15% { opacity: 1; transform: translate(-50%, -6px) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -46px) scale(1); } }
.fx-particle { position: absolute; width: 7px; height: 7px; border-radius: 50%; animation: fxPart .8s ease-out forwards; }
@keyframes fxPart { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }
.fx-pulse { animation: fxPulse .35s ease-out; }
@keyframes fxPulse { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* ---- doplňky UI: #22 tabulka M/F · #24 rozpad příjmů · #25 delta · #29 nota - */
table.mf { border-collapse: collapse; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
table.mf th { font-size: 11px; font-weight: 600; color: var(--ink-faint); text-align: right; padding: 2px 0 4px 22px; }
table.mf td { padding: 2px 0 2px 22px; text-align: right; color: var(--ink); }
table.mf td:first-child, table.mf th:first-child { text-align: left; padding-left: 0; color: var(--ink-faint); }

table.income td:nth-child(2) { text-align: right; color: var(--ink-soft); padding-right: 14px; }
table.income tr.income-total td { border-bottom: none; border-top: 2px solid var(--line); padding-top: 6px; color: var(--green-deep); font-weight: 700; }
body.cosmic table.income tr.income-total td { color: oklch(0.85 0.12 150); }

.note { color: var(--gold-deep); font-weight: 600; }
body.cosmic .note { color: var(--gold); }

/* delta bublina po nákupu (#25) */
.chip { position: relative; }
.chip-d { position: absolute; top: 4px; right: 10px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: 0; pointer-events: none; }
.chip-d.show { animation: deltapop 1.4s ease-out; }
.chip-d.bad { color: var(--bad); }
.chip-d.good { color: var(--green-deep); }
@keyframes deltapop { 0% { opacity: 0; transform: translateY(7px); } 14% { opacity: 1; transform: translateY(0); } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(-7px); } }

/* ---- #32 horní nástroje (žárovka / nastavení / o hře) ------------------ */
.hud-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.hud-tools { display: flex; gap: 6px; flex-shrink: 0; }
.hud-tool {
  background: var(--panel-2); color: var(--ink-soft); border: 1px solid var(--line);
  border-radius: 50%; width: 34px; height: 34px; cursor: pointer; font-size: 15px; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--card-shadow);
  transition: transform .08s, background .15s, box-shadow .25s, color .15s;
}
.hud-tool:hover { background: var(--panel); color: var(--ink); transform: translateY(-1px); }
.hud-tool:active { transform: translateY(1px) scale(.95); }
.hud-tool.lit { border-color: var(--gold); color: var(--gold-deep); animation: toolGlow 1.8s ease-in-out infinite; }
body.cosmic .hud-tool.lit { color: var(--gold); }
@keyframes toolGlow {
  0%,100% { box-shadow: 0 0 0 1px var(--gold), 0 0 7px oklch(0.78 0.105 84/.35); }
  50% { box-shadow: 0 0 0 1px var(--gold), 0 0 16px oklch(0.78 0.105 84/.75); }
}

/* Behemot Emporio — speciální tlačítko (NENÍ záložka, je výjimečné) */
.hud-emporio {
  width: auto; border-radius: 16px; padding: 0 12px; gap: 6px;
  font-size: 13px; font-weight: 600; letter-spacing: .2px;
  border-color: var(--gold); color: var(--gold-deep);
}
.hud-emporio:hover { background: var(--gold); color: #1a1205; }
.hud-emporio.active { background: var(--gold); color: #1a1205; box-shadow: 0 0 0 1px var(--gold), 0 0 12px oklch(0.78 0.105 84/.5); }
body.cosmic .hud-emporio { color: var(--gold); }
/* Behemotova živá hláška v Emporiu */
.beh-say { display: block; margin: 2px 0 10px; padding: 8px 10px; border-left: 3px solid var(--gold);
  background: var(--panel-2); border-radius: 6px; font-style: italic; color: var(--ink-soft); }
/* Emporio — fázová evoluce (Etapa 4): jemný posun akcentu hlášky s fází */
.emporio-head { margin-bottom: 6px; }
.emporio-head h3 { margin: 0 0 2px; font-size: 15px; }
.emporio-s1 .beh-say { border-left-color: #5b8def; }
.emporio-s2 .beh-say { border-left-color: #a06fd0; }
.emporio-s3 .beh-say { border-left-color: #c9a227; }
.emporio-modal { max-width: 560px; }   /* Emporio popup ("garáž") — víc obsahu než běžný modal */

/* ---- #34 odznak nově odemčené záložky ---------------------------------- */
.tab { position: relative; }
.tab.new { border-color: var(--gold); animation: tabPulse 1.8s ease-in-out infinite; }
@keyframes tabPulse {
  0%,100% { box-shadow: inset 0 1px 2px oklch(0.4 0.03 70/.07); }
  50% { box-shadow: 0 0 11px oklch(0.78 0.105 84/.55); }
}
.tab-badge {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  margin-left: 7px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: oklch(0.99 0.02 90);
  font-size: 11px; font-weight: 800; line-height: 1; box-shadow: 0 0 8px oklch(0.78 0.105 84/.7);
}

/* ---- dvouřádková tlačítka: popisek + efekt / důvod nedostupnosti -------- */
button.act { line-height: 1.2; }
.b-main { display: block; }
/* Podtitulek tlačítka: rezervovaná výška 1 řádku, ať se výška tlačítka nemění,
   když podtitulek přepíná „chybí X 💰" ↔ efekt/prázdno (kolísání kreditů) (#36). */
.b-sub { display: block; min-height: 14px; line-height: 14px; font-size: 11px; font-weight: 500; opacity: .82; margin-top: 2px; }
button.act:disabled .b-sub { color: var(--bad); opacity: .95; }
button.act:hover:not(:disabled) .b-sub { opacity: .95; }

/* ---- segmentová / preset / „nejlepší koupě" tlačítka ------------------- */
button.act.seg { padding: 6px 11px; }
button.act.seg.on { background: linear-gradient(180deg, var(--green), var(--green-deep)); color: oklch(0.98 0.02 150); border-color: transparent; }
button.act.preset { padding: 6px 10px; font-size: 12px; }
button.act.best { outline: 2px solid var(--gold); outline-offset: 1px; }
.flash { animation: flash .35s ease-out; }
@keyframes flash { 0% { filter: brightness(1.5); } 100% { filter: none; } }

/* ---- perky / milníky --------------------------------------------------- */
.branch-h { margin: 11px 0 4px; font-weight: 700; color: var(--ink); }
.item.done { border-color: var(--green); }

/* ---- modály (vstup do fáze, 💡/⚙/❓) + toasty milníků ------------------ */
.modal-bg {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 18px;
  background: oklch(0.2 0.04 280 / .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.modal {
  position: relative; max-width: 460px; width: 100%; max-height: 86vh; overflow: auto;
  background: linear-gradient(180deg, var(--paper), var(--panel-2)); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px 22px; box-shadow: 0 18px 50px oklch(0.2 0.05 280 / .5);
}
.modal h2 { font-family: var(--serif); font-size: 22px; margin-bottom: 10px; }
.modal .btn-row { margin: 10px 0; }
.modal-x {
  position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border-radius: 50%; padding: 0;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-soft); cursor: pointer; font-size: 18px; line-height: 1;
}
.modal-x:hover { background: var(--bad); color: oklch(0.99 0.02 30); border-color: transparent; }
.modal-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--gold-deep); font-weight: 700; }
.modal-lore { font-family: var(--serif); font-style: italic; color: var(--ink-soft); margin: 8px 0 12px; line-height: 1.5; }
.unlocks { margin: 4px 0 0; padding-left: 18px; color: var(--ink); }
.unlocks li { margin: 2px 0; }
.modal input { width: 100%; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; font-family: ui-monospace, monospace; margin: 8px 0; }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 110; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: oklch(0.99 0.02 90);
  padding: 10px 14px; border-radius: var(--r-md); font-size: 13px; font-weight: 700; box-shadow: 0 6px 18px oklch(0.6 0.1 80/.4);
}

/* ---- obsah modálů #32 (tip / o hře) ------------------------------------ */
.tip-step { font-weight: 700; color: var(--green-deep); margin: 4px 0 12px; font-size: 15px; }
body.cosmic .tip-step { color: oklch(0.85 0.12 150); }
.about-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); }
a.about-link {
  display: inline-block; text-decoration: none; text-align: center;
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 9px 14px; font-weight: 600; margin: 3px 6px 3px 0; box-shadow: var(--card-shadow);
}
a.about-link:hover { background: linear-gradient(180deg, var(--green), var(--green-deep)); color: oklch(0.98 0.02 150); border-color: transparent; }
.sect-div { height: 1px; background: var(--line); margin: 13px 0; }
button.act.danger { border-color: var(--bad); color: var(--bad); background: var(--panel-2); }
button.act.danger:hover:not(:disabled) { background: var(--bad); color: oklch(0.99 0.02 30); border-color: transparent; filter: none; }

/* ---- #35 inline oznámení nové fáze (místo modálu) ---------------------- */
.phase-notice {
  background: linear-gradient(180deg,
    color-mix(in oklch, oklch(0.97 0.045 88), oklch(0.33 0.05 290) var(--m)),
    color-mix(in oklch, oklch(0.93 0.05 86), oklch(0.30 0.05 290) var(--m)));
  border: 1px solid var(--gold); border-radius: var(--r-lg); padding: 14px 16px;
  box-shadow: 0 6px 18px oklch(0.7 0.11 80/.32); animation: pnIn .4s ease-out;
}
.phase-notice .pn-title { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--gold-deep); margin: 2px 0 4px; }
body.cosmic .phase-notice .pn-title { color: var(--gold); }
@keyframes pnIn { 0% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: translateY(0); } }

/* ---- #33 Jatka: dvě automatiky vedle sebe ------------------------------ */
.jatka-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jcard { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; }
.jcard h4 { margin: 0 0 8px; font-size: 13px; color: var(--ink); }

@media (max-width: 640px) { .genes { grid-template-columns: 1fr; } .jatka-cols { grid-template-columns: 1fr; } #app { padding: 12px; } }