:root{color-scheme:dark}html,body{margin:0;background:#0d100f}img{max-width:100%}[hidden]{display:none!important}
/* plynulý přechod mezi webem (Herna) a hrou: prolnutí stránek v prohlížečích, které to umějí (Chrome, Edge, Safari) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* Rozvržení: bojiště přes celou plochu; HUD jako železné lišty nahoře a dole; nabídky jsou kované desky nad živou bitvou, ukotvené vlevo. */
:root {
  --ink: #0d100f;
  --plate: #171b19;
  --plate-2: #22271f;
  --rivet: #3a4139;
  --bone: #ece2c9;
  --ash: #a9a28e;
  --brass: #c99a3d;
  --brass-hi: #edc66b;
  --blood: #d0553b;
  --moss: #8bbb63;
  --font-display: "Grenze Gotisch", "UnifrakturMaguntia", Georgia, serif;
  --font-ui: "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;
  --fs-xs: 12px; --fs-s: 13px; --fs-m: 15px; --fs-l: 18px; --fs-xl: 26px; --fs-xxl: 40px; --fs-hero: clamp(54px, 9vw, 112px);
  color-scheme: dark;
}
/* písmo Grenze Gotisch nemá cyrilici: ukrajinské a ruské nadpisy píše Alegreya (stejná rodina jako písmo rozhraní) */
#app.cyr { --font-display: "Alegreya", "Alegreya Sans", Georgia, serif; }
/* čínština: nadpisy Noto Serif SC, text Noto Sans SC; čínské písmo nemá kurzívu ani verzálky */
#app.cjk { --font-display: "Noto Serif SC", "Alegreya", serif; --font-ui: "Alegreya Sans", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif; font-family: var(--font-ui); }
#app.cjk * { font-style: normal !important; }
#app.cjk .eyebrow, #app.cjk h3, #app.cjk .at-k, #app.cjk .res-ach-k { letter-spacing: .06em; }
html { height: 100%; box-sizing: border-box; background: var(--ink); }
*, *::before, *::after { box-sizing: inherit; }
body { height: 100%; overflow: hidden; background: var(--ink); color: var(--bone); font: 400 var(--fs-m)/1.45 var(--font-ui); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 2px; }
#app { position: relative; height: 100%; width: 100%; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #1b201a; }
#vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(5,7,6,0.55) 100%); transition: background .4s; }
#vignette.deep { background: linear-gradient(90deg, rgba(8,10,9,0.94) 0%, rgba(8,10,9,0.86) 38%, rgba(8,10,9,0.35) 78%, rgba(8,10,9,0.15) 100%); }
#vignette.full { background: linear-gradient(90deg, rgba(8,10,9,0.95) 0%, rgba(8,10,9,0.9) 55%, rgba(8,10,9,0.82) 100%); }

/* ---------- obecné prvky ---------- */
.screen { position: absolute; inset: 0; z-index: 5; overflow-y: auto; overflow-x: hidden; padding-block: clamp(20px, 5vh, 56px); padding-inline: clamp(16px, 5vw, 64px); touch-action: pan-y; }
.eyebrow { margin: 0; font-size: var(--fs-s); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); font-weight: 700; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xxl); line-height: 1; letter-spacing: .01em; }
h3 { font-size: var(--fs-s); letter-spacing: .12em; text-transform: uppercase; color: var(--ash); font-weight: 700; margin-bottom: 10px; }
.hint { color: var(--ash); font-size: var(--fs-s); margin: 6px 0 0; }
.lede { max-width: 62ch; color: var(--bone); font-size: var(--fs-l); margin: 0 0 24px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 8px 18px; border: 1px solid var(--rivet); border-radius: 2px; background: var(--plate-2); color: var(--bone); font-weight: 700; letter-spacing: .02em; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.btn:hover:not(:disabled) { border-color: var(--brass); color: var(--brass-hi); }
.btn.primary { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.btn.primary:hover:not(:disabled) { background: var(--brass-hi); color: var(--ink); }
.btn.ghost { background: transparent; }
.btn.sm { min-height: 32px; padding: 4px 10px; font-size: var(--fs-s); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.icon-btn { width: 30px; height: 30px; border: 1px solid var(--rivet); background: transparent; border-radius: 2px; cursor: pointer; font-size: 18px; line-height: 1; color: var(--ash); }
.icon-btn:hover { color: var(--blood); border-color: var(--blood); }
.portrait { display: inline-grid; place-items: center; background: radial-gradient(circle at 50% 70%, #3b4a2c 0%, #20281b 75%); border: 1px solid var(--rivet); border-radius: 2px; flex: none; overflow: hidden; }
.portrait canvas { display: block; }
/* obrázky v rozhraní kreslené v pixelech obrazovky (uiCanvas): na stránce mají svou velikost v CSS */
.pcv { width: var(--pw); height: var(--ph); }
.portrait.sm canvas { width: 30px; height: 30px; }
.portrait.xs { vertical-align: middle; margin-right: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 7px 14px; border: 1px solid var(--rivet); border-radius: 2px; background: rgba(23,27,25,0.7); cursor: pointer; font-weight: 600; transition: border-color .15s, background .15s; }
.chip small { font-size: var(--fs-xs); color: var(--ash); font-weight: 500; font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--brass); }
.chip.on { border-color: var(--brass); background: rgba(201,154,61,0.16); color: var(--brass-hi); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.screen-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 22px; max-width: 1180px; }
.screen-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; max-width: 1180px; }
/* dlouhé obrazovky: hlavní tlačítka zůstanou na očích v malém doku dole (ne tmavý pruh přes šířku obrazovky) */
#scr-camp, #scr-army, #scr-campaign { padding-bottom: 0; }
#scr-camp, #scr-army, #scr-campaign { scroll-padding: 16px 0 112px; }
#scr-camp .screen-foot, #scr-army .screen-foot, #scr-campaign .screen-foot { position: sticky; bottom: clamp(10px, 2vh, 18px); z-index: 2; width: max-content; max-width: 100%; margin: 16px 0 clamp(10px, 2vh, 18px); padding: 8px; background: linear-gradient(180deg, rgba(37,42,35,0.97), rgba(17,20,18,0.97)); border: 1px solid #4b4535; border-top-color: #8a6a2a; border-radius: 3px; box-shadow: 0 0 0 1px #0a0b0a, 0 14px 34px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,236,190,0.1); }

/* ---------- hlavní nabídka ---------- */
#scr-menu { display: flex; flex-direction: column; justify-content: safe center; }
.menu-wrap { max-width: 640px; display: grid; gap: 24px; }
.game-title { margin: .2em 0 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(42px, 6.4vw, 86px); line-height: 1; letter-spacing: .005em; white-space: nowrap; color: var(--bone); text-shadow: 0 2px 0 #000, 0 0 40px rgba(255,120,50,0.18); }
.game-title span { color: var(--brass-hi); font-size: .56em; letter-spacing: .02em; margin: 0 .06em; }
.tagline { margin: 10px 0 0; font-size: var(--fs-l); color: var(--ash); max-width: 46ch; }
.menu-buttons { display: grid; gap: 2px; justify-items: start; }
.menu-minor { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 6px; }
.menu-btn { position: relative; background: none; border: 0; padding: 6px 0 6px 0; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 4.2vw, 40px); line-height: 1.05; color: var(--bone); text-align: left; transition: color .15s, padding .2s; }
.menu-btn::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 2px; background: var(--brass); transition: width .2s; }
.menu-btn:hover, .menu-btn:focus-visible { color: var(--brass-hi); padding-left: 30px; }
.menu-btn:hover::before, .menu-btn:focus-visible::before { width: 20px; }
.menu-btn small { display: block; font-family: var(--font-ui); font-size: var(--fs-s); color: var(--ash); letter-spacing: .02em; }
.menu-btn.minor { font-size: clamp(20px, 2.6vw, 26px); color: var(--ash); }
.menu-foot { margin: 0; color: var(--ash); font-size: var(--fs-s); max-width: 48ch; border-top: 1px solid var(--rivet); padding-top: 12px; }
.menu-foot b { color: var(--bone); font-weight: 700; }

/* ---------- nastavení bitvy ---------- */
.setup-body { display: grid; gap: 22px; max-width: 1180px; }
.setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.setup-block { min-width: 0; }
.factions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.faction { display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 14px; border: 1px solid var(--rivet); border-radius: 2px; background: rgba(23,27,25,0.82); cursor: pointer; transition: border-color .15s, background .15s; min-width: 0; }
.faction:hover { border-color: var(--brass); }
.faction.on { border-color: var(--brass-hi); background: rgba(201,154,61,0.12); }
.faction canvas { flex: none; }
.fx-text { display: grid; gap: 4px; min-width: 0; }
.fx-text strong { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); line-height: 1; letter-spacing: .01em; }
.fx-blurb { color: var(--bone); font-size: var(--fs-s); }
.fx-trait { color: var(--ash); font-size: var(--fs-xs); }
.factions.compact { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.factions.compact .faction { align-items: center; padding: 10px; }
.factions.compact .fx-text strong { font-size: var(--fs-l); }

/* ---------- sestavení armády ---------- */
#army-points { font-variant-numeric: tabular-nums; font-size: var(--fs-l); color: var(--ash); }
#army-points b { color: var(--brass-hi); font-size: var(--fs-xl); }
#army-points.over b { color: var(--blood); }
.army-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; max-width: 1180px; }
.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 8px; }
.utile { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; align-items: start; text-align: left; padding: 10px; border: 1px solid var(--rivet); border-radius: 2px; background: #191d1b; cursor: pointer; transition: border-color .15s; min-width: 0; }
.utile:hover:not(:disabled) { border-color: var(--brass); }
.utile:disabled { cursor: not-allowed; }
.utile:disabled > * { opacity: .42; }
.ut-main { display: grid; gap: 2px; min-width: 0; }
.ut-main strong { font-size: var(--fs-l); line-height: 1.15; }
.ut-cls { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--brass); font-weight: 700; }
.ut-desc { font-size: var(--fs-s); color: var(--ash); }
.ut-cost { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--brass-hi); font-size: var(--fs-l); }
.stats { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: var(--fs-xs); color: var(--ash); margin-top: 4px; font-variant-numeric: tabular-nums; }
.stats b { color: var(--bone); font-weight: 700; }
.armylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 60vh; overflow-y: auto; }
.armylist li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--rivet); background: rgba(23,27,25,0.85); border-radius: 2px; }
.armylist li small { display: block; color: var(--ash); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.armylist li.locked { border-style: dashed; }

/* ---------- výsledek a pauza ---------- */
/* nápověda otevřená z pauzy v bitvě: zakrýt lištu a karty pod ní */
#hud:not([hidden]) ~ #scr-help { background: rgba(8,10,9,0.95); }
#scr-result, #scr-pause, #scr-sound { display: grid; place-items: center; grid-template-columns: minmax(0, 1fr); background: rgba(8,10,9,0.55); }
.snd-rows { display: grid; gap: 14px; margin: 18px 0 10px; }
.snd-row { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 4px 12px; align-items: center; }
.snd-row span { grid-column: 1 / -1; color: var(--ash); font-size: var(--fs-s); letter-spacing: .04em; }
.snd-row input { width: 100%; accent-color: var(--brass); min-height: 28px; }
.snd-row output { text-align: right; font-variant-numeric: tabular-nums; color: var(--bone); font-weight: 700; }
.snd-note { color: var(--ash); font-size: var(--fs-s); margin: 4px 0 0; min-height: 1.4em; }
.slab { width: min(760px, 100%); background: linear-gradient(180deg, rgba(32,37,31,0.97), rgba(20,24,22,0.97)); border: 1px solid var(--rivet); box-shadow: 0 30px 80px rgba(0,0,0,0.6); padding: clamp(18px, 4vw, 36px); border-radius: 2px; }
.slab.narrow { width: min(420px, 100%); }
#result-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 8vw, 84px); line-height: .9; color: var(--brass-hi); }
#scr-result.lost #result-title { color: var(--blood); }
.res-sub { color: var(--bone); margin: 10px 0 14px; }
.res-msgs { margin: 0 0 14px; padding-left: 18px; color: var(--brass-hi); }
.res-table-wrap { overflow-x: auto; max-height: 42vh; overflow-y: auto; border: 1px solid var(--rivet); }
.res-table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.res-table th { text-align: left; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ash); padding: 8px 10px; border-bottom: 1px solid var(--rivet); position: sticky; top: 0; background: #1c201d; }
.res-table td { padding: 6px 10px; border-bottom: 1px solid rgba(58,65,57,0.5); white-space: nowrap; }
.res-table tr.dead td { color: var(--ash); }
.rk { color: var(--brass-hi); font-size: var(--fs-xs); }
#result-btns, .pause-btns { margin-top: 20px; }
.pause-btns { display: grid; gap: 8px; }
.pause-btns .btn { width: 100%; }

/* ---------- tažení ---------- */
.camp-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 28px; max-width: 1180px; align-items: start; }
.camp-map-wrap { position: relative; border: 1px solid var(--rivet); background: #1b1f1a; }
.camp-map-col { display: grid; gap: 8px; min-width: 0; }
.camp-progress { margin: 0; }
/* uzly mapy aktu: tlačítka nad plátnem */
.mnodes { position: absolute; inset: 0; }
.mnode { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; padding: 0; border: 0; background: none; color: var(--bone); font: inherit; cursor: pointer; }
.mnode:disabled { cursor: default; }
.mn-dot { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #262a24; border: 1.5px solid #6a6a5c; color: #a9a28e; font-weight: 800; font-size: 13px; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,0.55); transition: transform .12s ease, box-shadow .12s ease; }
.mn-name { position: absolute; top: calc(100% + 3px); white-space: nowrap; padding: 1px 6px; background: rgba(16,19,17,0.8); color: #9a947f; font-size: 12.5px; font-weight: 700; border-radius: 2px; pointer-events: none; }
.mnode.lab-up .mn-name { top: auto; bottom: calc(100% + 3px); }
.mnode.edge-l .mn-name { left: -4px; }
.mnode.edge-r .mn-name { right: -4px; }
@media (max-width: 640px) {
  .mn-name { font-size: 11px; white-space: normal; width: max-content; max-width: 84px; text-align: center; line-height: 1.15; padding: 1px 4px; }
  .mnode.edge-l .mn-name { text-align: left; } .mnode.edge-r .mn-name { text-align: right; }
}
.mnode.side .mn-dot { width: 21px; height: 21px; font-size: 11px; }
.mnode.side .mn-name { font-weight: 600; font-size: 12px; }
.mnode.final .mn-dot { width: 31px; height: 31px; border-width: 2px; font-size: 14px; }
.mnode.done .mn-dot { background: #5d2a1d; border-color: var(--brass); color: #fff; }
.mnode.done .mn-name { color: var(--bone); }
.mnode.open .mn-dot { background: #3a2e1a; border-color: var(--brass-hi); color: var(--brass-hi); }
.mnode.open .mn-name { color: var(--bone); }
.mnode.open:hover .mn-dot, .mnode.open:focus-visible .mn-dot { box-shadow: 0 0 0 3px rgba(237,198,107,0.35); }
.mnode.sel .mn-dot { transform: scale(1.15); box-shadow: 0 0 0 5px rgba(237,198,107,0.25), 0 0 18px rgba(237,198,107,0.5); }
.mnode.sel .mn-name { color: var(--brass-hi); }
.mnode.closed, .mnode.skip { opacity: 0.45; }
.mnode.locked .mn-name { color: #7c776a; }
.mnode.gpf { outline: none !important; box-shadow: none; }
.mnode.gpf .mn-dot { outline: 2px solid var(--brass-hi); outline-offset: 3px; }
.brief-note { margin: 0; padding: 8px 10px; border-left: 3px solid var(--brass); background: rgba(201,154,61,0.08); font-size: var(--fs-s); }
.ev-fork { margin: 14px 0 0; max-width: 680px; }
/* relikvie: seznam s ikonou, jménem a účinkem */
.relic-sec { min-width: 0; margin-bottom: 18px; }
.relic-sec h3 { margin: 4px 0 8px; }
.relic-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 6px; }
.relic-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 10px 6px 6px; border: 1px solid var(--rivet); border-radius: 2px; background: linear-gradient(180deg, rgba(44,37,24,0.6), rgba(21,25,23,0.88)); min-width: 0; }
.relic-ic { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(201,154,61,0.6); border-radius: 50%; background: radial-gradient(circle at 50% 38%, #3d3322, #15130e 80%); color: var(--brass-hi); }
.relic-ic svg { width: 22px; height: 22px; display: block; }
.relic-txt { display: grid; gap: 1px; min-width: 0; line-height: 1.25; }
.relic-txt strong { font-size: var(--fs-s); color: var(--brass-hi); }
.relic-txt span { font-size: var(--fs-xs); color: var(--bone); }
.camp-map-relics .relic-sec { margin: 6px 0 0; }
/* přehled armády vedle mapy aktu */
.camp-side { display: none; }
.army-sec h3, .camp-side .relic-sec h3 { margin: 0 0 8px; }
.roster-mini { display: grid; gap: 3px; }
.rm-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 2px 8px 2px 2px; border: 1px solid var(--rivet); border-radius: 2px; background: rgba(21,25,23,0.82); }
.rm-row.hero { background: linear-gradient(90deg, rgba(58,46,26,0.55), rgba(21,25,23,0.82)); }
.rm-row.weak { border-color: rgba(208,85,59,0.65); }
.rm-row .portrait canvas { width: 30px; height: 30px; }
.rm-name { font-weight: 700; font-size: var(--fs-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-info { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ash); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rm-info b { color: var(--brass-hi); }
.rm-info .menbar { width: 44px; }
.rm-row.weak .menbar i { background: #e0703a; }
.rm-up { display: inline-flex; gap: 2px; }
.army-sec .hint { margin: 6px 0 0; }
/* události s volbou */
.ev-choices { display: grid; gap: 10px; margin-top: 18px; max-width: 680px; }
.ev-choice { display: grid; gap: 4px; text-align: left; padding: 12px 14px; border: 1px solid var(--rivet); background: rgba(20,24,21,0.88); color: var(--bone); font: inherit; font-size: var(--fs-m); cursor: pointer; }
.ev-choice:hover:not(:disabled), .ev-choice:focus-visible { border-color: var(--brass-hi); background: rgba(58,46,26,0.88); }
.ev-choice:disabled { opacity: 0.55; cursor: not-allowed; }
.ev-fx { color: var(--brass-hi); font-size: var(--fs-s); }
.ev-why { color: #e8907c; font-size: var(--fs-s); }
.ev-out { color: var(--bone); }
.campmap { width: 100%; height: auto; display: block; }
.camp-brief { display: grid; gap: 12px; min-width: 0; }
.brief-text { margin: 0; font-size: var(--fs-l); max-width: 52ch; }
.brief-facts { margin: 4px 0 0; display: grid; gap: 0; border-top: 1px solid var(--rivet); }
.brief-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rivet); }
.brief-facts dt { color: var(--ash); }
.brief-facts dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.gold { font-variant-numeric: tabular-nums; color: var(--brass-hi); font-weight: 800; font-size: var(--fs-xl); }
.gold small { color: var(--ash); font-weight: 600; font-size: var(--fs-s); margin-left: 6px; }
.gold::before { content: ""; display: inline-block; width: 22px; height: 22px; margin-right: 8px; vertical-align: -3px; background: radial-gradient(circle at 40% 35%, #f6d77c 0 30%, #d9a83e 31% 62%, #7a5a16 63% 70%, transparent 71%); }
.camp-end { max-width: 640px; display: grid; gap: 12px; }
/* konec tažení: souhrn války */
.camp-fin { border: 1px solid var(--rivet); padding: 12px 14px; background: linear-gradient(180deg, rgba(40,30,22,0.6), rgba(21,25,23,0.6)); }
.camp-fin h3 { margin: 0 0 6px; font-size: var(--fs-l, 1.1rem); color: var(--brass-hi); }
.camp-fin .hint { margin: 8px 0 0; }
.camp-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; max-width: 1180px; align-items: start; }
.camp-heroes, .camp-units, .camp-recruit { display: grid; gap: 6px; margin-bottom: 20px; }
.hero-card, .cu { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--rivet); background: linear-gradient(180deg, rgba(30,35,31,0.92), rgba(21,25,23,0.92)); border-radius: 2px; }
.hero-card div { display: grid; gap: 3px; min-width: 0; }
.hero-card strong { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hero-card .lvl { color: var(--brass-hi); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hero-card .hint { margin: 0; }
.hero-card.locked { opacity: .55; border-style: dashed; }
.hero-card.locked span { color: var(--ash); font-size: var(--fs-s); }
.xpbar { display: block; height: 5px; background: #0f1210; border: 1px solid #2c322c; max-width: 260px; }
.xpbar i { display: block; height: 100%; background: linear-gradient(90deg, #a77a26, var(--brass-hi)); }
/* řádek jednotky v táboře: portrét, stav, dvě vylepšení, doplnění */
.cu { grid-template-columns: 60px minmax(0, 1fr); grid-template-areas: "port main" "port foot" "brk brk"; gap: 8px 12px; padding: 8px 10px; align-items: start; }
.cu > .cu-port { grid-area: port; align-self: center; } .cu > .cu-main { grid-area: main; } .cu > .cu-foot { grid-area: foot; } .cu > .cu-brk { grid-area: brk; }
.cu-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.cu-foot .cu-side { margin-left: auto; }
.cu-brk:empty, .hc-brk:empty { display: none; }
.cu-port { position: relative; width: 58px; height: 58px; }
.cu-port.just canvas { animation: portglow .9s ease-out 1; }
.cu-main { display: grid; gap: 3px; min-width: 0; }
.cu-main strong { font-size: var(--fs-l); line-height: 1.1; }
.cu-men { display: flex; align-items: center; gap: 8px; color: var(--ash); font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.menbar { display: block; width: 74px; height: 5px; background: #0f1210; border: 1px solid #2c322c; flex: none; }
.menbar i { display: block; height: 100%; background: var(--bone); }
.cu-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 0; border: 0; background: none; color: var(--ash); font: inherit; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; letter-spacing: .02em; text-align: left; cursor: pointer; }
.cu-stats:hover span:first-child, .hc-stats:hover > span:not(.cu-more) { color: var(--bone); }
.cu-more { color: var(--brass-hi); font-weight: 700; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; white-space: nowrap; }
.cu-more::after { content: ' ▾'; text-decoration: none; display: inline-block; }
[aria-expanded="true"] > .cu-more::after { content: ' ▴'; }
/* rozpis hodnot: základ + veteránství + vylepšení = celkem */
.stab table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.stab th, .stab td { padding: 3px 6px; text-align: right; white-space: nowrap; }
.stab thead th { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ash); font-weight: 700; border-bottom: 1px solid var(--rivet); }
.stab tbody th { text-align: left; color: var(--bone); font-weight: 600; }
.stab tbody tr + tr { border-top: 1px solid rgba(255,255,255,.05); }
.stab .c-base { color: var(--ash); }
.stab .c-vet, .stab .c-lvl { color: var(--brass-hi); }
.stab .c-up { color: #9cc7ea; }
.stab .c-sk { color: #c9a8f0; }
.stab .c-eff { color: var(--moss); }
.stab .neg { color: #ff8a6a; }
.stab .c-total { color: var(--bone); font-weight: 800; }
.stab tr.derived th { color: var(--ash); font-weight: 500; font-size: 11px; padding-left: 10px; }
.stab .hs { display: none; }
@media (max-width: 560px) {
  .stab .hl { display: none; } .stab .hs { display: inline; }
  .stab table { font-size: 11px; } .stab th, .stab td { padding: 2px 3px; }
  .cu-brk, .hc-brk { padding: 6px; }
}
.stab tr.derived td { color: var(--ash); font-size: 11px; }
.stab tr.derived .c-total { color: var(--bone); font-weight: 700; }
.stab-notes { display: grid; gap: 3px; margin-top: 6px; font-size: var(--fs-xs); color: var(--ash); line-height: 1.35; }
.stab-notes p { margin: 0; }
.stab-notes b { font-weight: 700; }
.cu-brk, .hc-brk { padding: 8px 10px; background: rgba(12,14,13,.6); border: 1px solid var(--rivet); max-width: 640px; overflow-x: auto; }
#ctip:has(.stab) { width: min(540px, calc(100vw - 16px)); }
/* karty popisů: schopnost, účinek, vlastnost, dovednost */
.icard { gap: 6px; }
.ic-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ic-head strong { font-size: var(--fs-m); color: var(--bone); }
.ic-kind { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; }
.ic-kind.buff { color: var(--brass-hi); } .ic-kind.debuff { color: #ff8a6a; }
.ic-facts { margin: 0; font-size: var(--fs-xs); color: var(--brass-hi); }
.ic-boost { margin: 0; font-size: var(--fs-xs); color: #c9a8f0; }
.ic-state { margin: 0; font-size: var(--fs-xs); color: var(--ash); }
.ic-state.ok { color: var(--moss); }
/* štítky s popisem (vlastnosti, schopnosti) */
.trait, .cu-ab, .cu-tr, .hc-ab, .hc-sk { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px 1px 5px; border: 1px solid var(--rivet); border-radius: 2px; background: rgba(23,27,25,.85); color: var(--bone); font-size: var(--fs-xs); cursor: help; white-space: nowrap; }
.trait:hover, .cu-ab:hover, .cu-tr:hover, .hc-ab:hover, .hc-sk:hover, .trait:focus-visible, .cu-ab:focus-visible, .cu-tr:focus-visible { border-color: var(--brass); }
.trait kbd, .cu-ab kbd, .hc-ab kbd { padding: 1px 4px; font-size: 10px; }
.trait.ab, .cu-ab { color: var(--brass-hi); }
.sp-traits { display: flex; flex-wrap: wrap; gap: 4px; }
.cu-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.cu-tr { color: var(--ash); }
.sp-fx .fxc { cursor: help; }
.cu-ups { display: flex; gap: 6px; }
.upbtn { position: relative; display: grid; grid-template-columns: 30px auto; grid-template-rows: auto auto; column-gap: 7px; align-items: center; min-width: 118px; padding: 5px 9px 5px 6px; border: 1px solid var(--rivet); border-radius: 2px; background: #1b201c; color: var(--bone); cursor: pointer; text-align: left; transition: border-color .15s, background .15s, transform .12s; }
.upbtn:hover:not(:disabled) { border-color: var(--brass); background: #232a22; }
.upbtn:active:not(:disabled) { transform: translateY(1px); }
.upbtn .up-ic { grid-row: 1 / 3; display: grid; place-items: center; }
.upic { width: 28px; height: 28px; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.upic.sm { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; }
.up-txt { display: flex; align-items: center; gap: 6px; font-size: var(--fs-s); line-height: 1.1; }
.up-txt b { font-weight: 800; letter-spacing: .02em; }
.up-cost { display: flex; align-items: center; gap: 6px; font-size: var(--fs-s); font-weight: 700; color: var(--brass-hi); font-variant-numeric: tabular-nums; }
.up-next { color: var(--ash); font-weight: 600; font-size: var(--fs-xs); }
.up-cost.done { color: var(--brass-hi); text-transform: uppercase; letter-spacing: .1em; font-size: var(--fs-xs); }
.upbtn.max { border-color: rgba(242,197,90,.55); background: linear-gradient(180deg, rgba(242,197,90,.12), rgba(242,197,90,.03)); cursor: default; }
.upbtn.poor .up-cost { color: #c98a74; }
.upbtn.poor .upic { opacity: .7; }
.upbtn.just { animation: uppop .55s cubic-bezier(.2,1.6,.4,1) 1; border-color: var(--brass-hi); }
.upbtn.just .upic { animation: upshine 1s ease-out 1; }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid #6c6a5e; background: #121512; }
.pips i.on { background: var(--brass-hi); border-color: #f6dc94; box-shadow: 0 0 4px rgba(242,197,90,.6); }
.cost { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--brass-hi); }
.coin { width: 14px; height: 14px; display: block; }
.cu-side { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.cu-fill { gap: 8px; }
.cu-fill.poor .cost, #btn-camp-fill.poor .cost { color: #c98a74; }
/* Doplnit vše v doku tábora: cena vedle popisku */
#btn-camp-fill { gap: 10px; }
#btn-camp-fill .cost { font-size: var(--fs-s); }
.cu-full { color: var(--moss); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 0 6px; white-space: nowrap; }
/* propuštění: červený křížek a vrácené zlato */
.cu-dismiss { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 3px 9px 3px 5px; border: 1px solid rgba(208,85,59,.55); background: rgba(94,34,22,.32); color: #f0c4b8; border-radius: 2px; cursor: pointer; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; transition: border-color .15s, background .15s, color .15s; }
.cu-dismiss .x { display: inline-grid; place-items: center; width: 20px; height: 20px; background: var(--blood); color: #fff; border-radius: 2px; flex: none; }
.cu-dismiss .x svg { width: 11px; height: 11px; display: block; }
.cu-dismiss .dis-g { display: inline-flex; align-items: center; gap: 3px; color: var(--brass-hi); font-variant-numeric: tabular-nums; }
.cu-dismiss .dis-g .coin { width: 12px; height: 12px; }
.cu-dismiss:hover { border-color: #ff7a5e; background: rgba(150,40,25,.5); color: #fff; }
.upbtn.poor:disabled { cursor: not-allowed; opacity: .62; }
.upbtn .short { color: #e7a08c; font-weight: 700; font-size: var(--fs-xs); white-space: nowrap; }
.cu-fill:disabled { opacity: .55; }
.rtile.off { cursor: not-allowed; }
.rtile.off > * { opacity: .45; }
/* hrdinové v táboře */
.hero-card { grid-template-columns: 50px minmax(0, 1fr) auto; }
.hc-main { display: grid; gap: 4px; min-width: 0; }
.hc-stats { display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-xs); color: var(--ash); font-variant-numeric: tabular-nums; text-align: left; cursor: pointer; }
.hc-statwrap { display: grid; gap: 6px; }
.hc-stats b { color: var(--bone); font-weight: 800; }
.hc-abil, .hc-skills { display: flex; flex-wrap: wrap; gap: 4px; }
.hc-ab { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px 1px 2px; border: 1px solid var(--rivet); font-size: var(--fs-xs); color: var(--bone); background: rgba(10,12,11,.5); }
.hc-sk { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 3px; border: 1px solid rgba(242,197,90,.45); background: rgba(242,197,90,.08); color: var(--brass-hi); font-size: var(--fs-xs); font-weight: 700; }
.sk-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; color: var(--brass-hi); flex: none; }
.sk-ic svg { width: 100%; height: 100%; display: block; }
.sk-ic.sm { width: 14px; height: 14px; }
.hero-sk { align-self: center; gap: 6px; }
.sk-badge { display: inline-grid; place-items: center; min-width: 22px; height: 18px; padding: 0 4px; background: var(--brass-hi); color: var(--ink); font-size: 11px; font-weight: 800; border-radius: 2px; }
/* strom dovedností */
.modal-box.wide { width: min(880px, 100%); max-height: calc(100% - 16px); overflow-y: auto; }
.sk-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.sk-head .portrait canvas { width: 48px; height: 48px; }
.sk-pts { margin: 0; font-weight: 800; color: var(--ash); }
.sk-pts.some { color: var(--brass-hi); font-size: var(--fs-l); }
.sk-head .hint { margin: 2px 0 0; }
.sk-tree { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.sk-col { display: grid; align-content: start; }
.sk-col h3 { margin-bottom: 8px; }
.sk-node { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--rivet); background: rgba(16,19,17,.88); margin-bottom: 18px; }
.sk-node:last-child { margin-bottom: 0; }
.sk-node:not(:last-child)::after { content: ""; position: absolute; left: 29px; bottom: -19px; width: 2px; height: 18px; background: var(--rivet); }
.sk-node.has { border-color: rgba(242,197,90,.7); background: linear-gradient(180deg, rgba(242,197,90,.14), rgba(242,197,90,.04)); }
.sk-node.has:not(:last-child)::after { background: var(--brass); }
.sk-node.can { border-color: var(--brass-hi); box-shadow: 0 0 16px rgba(242,197,90,.18); }
.sk-node.locked { opacity: .5; }
/* vrcholná dovednost (desátá úroveň): ohnivý lem */
.sk-node.top { border-style: double; border-width: 3px; }
.sk-node.top.has, .sk-node.top.can { border-color: #ff9a4a; box-shadow: 0 0 18px rgba(255,140,60,.25); }
.sk-node.locked .sk-ic, .sk-node.open .sk-ic { color: var(--ash); }
.sk-node.just { animation: uppop .55s cubic-bezier(.2,1.6,.4,1) 1; }
.sk-txt { display: grid; gap: 2px; min-width: 0; }
.sk-txt strong { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-m); }
.sk-txt span { font-size: var(--fs-s); color: var(--ash); }
.sk-txt em { font-style: normal; font-size: var(--fs-xs); color: #e7a08c; }
.sk-tier { font-size: var(--fs-xs); color: var(--brass); letter-spacing: .08em; }
.sk-state { font-size: var(--fs-xs); font-weight: 800; color: var(--brass-hi); white-space: nowrap; }
/* plovoucí karta s hodnotami */
#ctip { position: absolute; left: 0; top: 0; z-index: 25; pointer-events: none; width: 310px; max-width: calc(100vw - 16px); padding: 10px 12px; background: rgba(14,17,15,.97); border: 1px solid var(--brass); box-shadow: 0 16px 40px rgba(0,0,0,.6); }
.tcard { display: grid; gap: 8px; }
.tc-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.tc-head .portrait canvas { width: 44px; height: 44px; }
.tc-head strong { display: block; font-size: var(--fs-l); line-height: 1.1; }
.tc-cls { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--brass); font-weight: 700; }
.tc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin: 0; }
.tc-st { background: rgba(30,35,31,.9); border: 1px solid var(--rivet); padding: 3px 4px; text-align: center; min-width: 0; }
.tc-st dt { font-size: 10px; color: var(--ash); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-st dd { margin: 0; font-weight: 800; font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.tc-st.up dd { color: var(--moss); }
.tc-abil { display: grid; gap: 4px; }
.tc-ab { margin: 0; font-size: var(--fs-xs); color: var(--ash); line-height: 1.4; }
.tc-ab kbd { margin-right: 5px; }
.tc-ab b { color: var(--bone); }
.tc-traits { margin: 0; font-size: var(--fs-xs); color: var(--brass-hi); }
.tc-desc { margin: 0; font-size: var(--fs-xs); color: var(--ash); font-style: italic; }
.tc-note { margin: 0; font-size: var(--fs-xs); color: #e7a08c; font-weight: 700; }
.cu.just-row { border-color: rgba(242,197,90,.6); }
.up-badges { position: absolute; left: 1px; bottom: 1px; display: flex; gap: 1px; pointer-events: none; }
.ub { display: inline-flex; align-items: center; gap: 0; padding: 0 2px 0 0; background: rgba(8,10,9,.78); border-radius: 2px; }
.ubi { width: 14px; height: 14px; display: block; }
.ub b { font-size: 9px; line-height: 1; font-weight: 800; color: var(--bone); letter-spacing: .02em; }
.uc-port { position: relative; }
.uc-port .up-badges { left: auto; right: 2px; bottom: auto; top: 18px; flex-direction: column; align-items: flex-end; }
.msg .cnt { margin-left: 6px; color: var(--brass-hi); font-weight: 800; font-size: var(--fs-xs); }
.sp-gear { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 0; font-size: var(--fs-xs); color: var(--bone); }
.sp-gear span { display: inline-flex; align-items: center; gap: 4px; }
.uc-port .ubi { width: 12px; height: 12px; }
.camp-legend { line-height: 1.7; }
.camp-safety { margin: 4px 0 14px; padding: 10px 14px; border: 1px solid rgba(208,85,59,0.45); border-left: 3px solid var(--blood); background: rgba(60,22,14,0.32); font-size: var(--fs-s); color: var(--bone); max-width: 980px; }
.camp-safety p { margin: 0 0 6px; }
.camp-safety b { color: #ffc2b0; }
.camp-safety ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; color: var(--ash); }
.camp-safety li b { color: var(--brass-hi); }
.camp-safety li.used { opacity: .7; }
.camp-nudge { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; padding: 8px 10px; border: 1px solid rgba(242,197,90,.4); background: rgba(242,197,90,.07); color: var(--bone); font-size: var(--fs-s); }
.camp-nudge .coin { width: 18px; height: 18px; flex: none; }
.camp-nudge b { color: var(--brass-hi); }
.btn.pulse { border-color: var(--brass-hi); color: var(--brass-hi); animation: btnpulse 1.8s ease-in-out infinite; }
@keyframes btnpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(242,197,90,0); } 50% { box-shadow: 0 0 14px 2px rgba(242,197,90,.35); } }
@media (prefers-reduced-motion: reduce) { .btn.pulse { animation: none; } }
.rtile { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; padding: 6px 10px; border: 1px solid var(--rivet); background: linear-gradient(180deg, rgba(30,35,31,0.92), rgba(21,25,23,0.92)); border-radius: 2px; cursor: pointer; transition: border-color .15s; }
.rtile:hover:not(:disabled) { border-color: var(--brass); }
.rtile:disabled { cursor: not-allowed; }
.rtile:disabled > * { opacity: .42; }
.rtile.locked { border-style: dashed; }
.rtile.poor .cost { color: #c98a74; }
.rt-main { display: grid; min-width: 0; }
.rt-main span { color: var(--ash); font-size: var(--fs-xs); }
@keyframes uppop { 0% { transform: scale(1); } 40% { transform: scale(1.08); box-shadow: 0 0 18px rgba(242,197,90,.55); } 100% { transform: scale(1); box-shadow: none; } }
@keyframes upshine { 0% { filter: drop-shadow(0 0 0 rgba(255,230,150,0)) brightness(1); } 30% { filter: drop-shadow(0 0 6px rgba(255,230,150,.95)) brightness(1.5); } 100% { filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)) brightness(1); } }
@keyframes portglow { 0% { filter: brightness(1); } 25% { filter: brightness(1.8) drop-shadow(0 0 6px rgba(255,230,150,.9)); } 100% { filter: brightness(1); } }

/* ---------- uložené hry ---------- */
.fx-badge { justify-self: start; padding: 1px 7px; border: 1px solid rgba(242,197,90,.5); background: rgba(242,197,90,.1); color: var(--brass-hi); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em; }
.nc-warn { margin: 10px 0 0; padding: 9px 12px; border: 1px solid rgba(208,85,59,.55); border-left-width: 3px; background: rgba(208,85,59,.09); font-size: var(--fs-s); max-width: 80ch; }
.nc-warn b { color: #ffb4a3; }
.sv-src { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 10px 14px; max-width: 1180px; border: 1px solid var(--rivet); background: rgba(23,27,25,0.82); font-size: var(--fs-m); }
.sv-src.col { display: grid; gap: 8px; }
.sv-backup { max-width: 1180px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rivet); }
.sv-backup-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.sv-file { display: none; }
.sv-src b { color: var(--brass-hi); }
.sv-src .ic svg, .sv-row .ic svg, .sv-backup .ic svg, .modal .ic svg { width: 16px; height: 16px; display: block; }
.sv-src .ic { color: var(--brass-hi); flex: none; }
#saves-cloud { margin: 0; max-width: 40ch; text-align: right; }
.sv-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 28px; max-width: 1180px; align-items: start; }
.sv-hint { margin: -4px 0 10px; }
.sv-list { display: grid; gap: 6px; }
.sv-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 10px 9px 12px; border: 1px solid var(--rivet); background: linear-gradient(180deg, rgba(30,35,31,0.94), rgba(21,25,23,0.94)); border-radius: 2px; min-height: 72px; }
.sv-row.current { border-color: rgba(242,197,90,.55); }
.sv-row.just { animation: uppop .55s cubic-bezier(.2,1.6,.4,1) 1; border-color: var(--brass-hi); }
.sv-row.empty { background: rgba(18,21,19,0.78); border-style: dashed; min-height: 56px; }
.sv-row.done .sv-where { color: var(--moss); }
.sv-shield { display: grid; place-items: center; }
.sv-no { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--rivet); color: var(--ash); font-weight: 800; font-variant-numeric: tabular-nums; }
.sv-main { display: grid; gap: 1px; min-width: 0; }
.sv-tag { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); font-weight: 700; }
.sv-cur { padding: 0 6px; background: var(--brass); color: var(--ink); letter-spacing: .06em; font-size: 10px; }
.sv-main strong { font-size: var(--fs-l); line-height: 1.15; }
.sv-where { color: var(--brass-hi); font-weight: 700; }
.sv-node { font-size: var(--fs-s); color: var(--bone); }
.sv-facts, .sv-time { font-size: var(--fs-xs); color: var(--ash); font-variant-numeric: tabular-nums; }
.sv-empty { color: var(--ash); font-style: italic; }
.sv-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.sv-btns .btn .ic { display: inline-grid; }
.sv-del { display: inline-grid; place-items: center; width: 32px; height: 32px; }
.sv-del .ic svg { width: 16px; height: 16px; }
.modal { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(5,6,6,0.66); }
.modal-box { width: min(500px, 100%); }
.modal-box h2 { font-size: clamp(28px, 4vw, 36px); margin: 4px 0 10px; }
#modal-body p { margin: 0 0 8px; color: var(--bone); }
#modal-body p + p { color: var(--ash); font-size: var(--fs-s); }
.modal-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.modal-btns .btn .ic { display: inline-grid; }
.btn.danger { background: #5e2216; border-color: var(--blood); color: #ffe2da; }
.btn.danger:hover:not(:disabled) { background: #7a2b1c; border-color: #ff7a5e; color: #fff; }
@media (max-width: 640px) {
  .sv-cols { grid-template-columns: minmax(0, 1fr); }
  .sv-row { grid-template-columns: 34px minmax(0, 1fr); }
  .sv-btns { grid-column: 1 / -1; justify-content: flex-start; }
  .sv-row.empty { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .sv-row.empty .sv-btns { grid-column: auto; }
  #saves-cloud { text-align: left; }
}

/* ---------- nápověda ---------- */
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; max-width: 1180px; }
.keys { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.keys dt { font-weight: 700; color: var(--brass-hi); white-space: nowrap; }
.keys dd { margin: 0; color: var(--bone); }
.tips { margin: 0; padding-left: 18px; display: grid; gap: 8px; max-width: 60ch; }
.tips li::marker { color: var(--brass); }
.credits { font-size: var(--fs-s); color: var(--ash); gap: 4px; }
.credits a { color: var(--bone); }
.help-grid > .who-sec { grid-column: 1 / -1; border-top: 1px solid var(--rivet); padding-top: 22px; }
.who-lede { max-width: 72ch; margin-bottom: 18px; }
.who { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px 40px; }
.who h4 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); line-height: 1.1; color: var(--brass-hi); }
.who h4 span { margin-left: 8px; font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-s); color: var(--ash); letter-spacing: .02em; }
.who h5 { margin: 16px 0 6px; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--brass); font-weight: 700; }
.who-list { max-width: none; }
.who-list b { color: var(--brass-hi); font-weight: 700; }
.who .credits { max-width: none; }
kbd { font: 700 11px/1 var(--font-ui); padding: 2px 5px; border: 1px solid var(--rivet); border-bottom-width: 2px; border-radius: 2px; color: var(--bone); background: var(--plate-2); }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#topbar { position: absolute; top: 0; left: 0; right: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 8px; background: linear-gradient(180deg, rgba(10,12,11,0.9) 0%, rgba(10,12,11,0.6) 70%, rgba(10,12,11,0) 100%); }
.obj { display: grid; line-height: 1.15; min-width: 0; }
#obj-text { font-weight: 700; font-size: var(--fs-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#obj-timer { color: var(--ash); font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
#obj-atmo { color: var(--ash); font-size: var(--fs-xs); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#obj-atmo:empty { display: none; }
.balance { display: grid; grid-template-columns: auto 220px auto; align-items: center; gap: 8px; font-size: var(--fs-s); font-weight: 700; }
.balance .side { color: var(--ash); white-space: nowrap; }
.bal-bar { display: flex; height: 8px; border: 1px solid rgba(0,0,0,0.8); background: #111; }
.bal-bar i { display: block; transition: flex-grow .5s; }
#score-wrap { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 0 12px; font-variant-numeric: tabular-nums; color: var(--bone); font-size: var(--fs-s); }
#score-b { text-align: right; }
.controls { display: flex; justify-content: flex-end; gap: 4px; }
.ctl { min-width: 38px; height: 34px; padding: 0 8px; border: 1px solid var(--rivet); background: rgba(23,27,25,0.85); border-radius: 2px; cursor: pointer; font-weight: 700; font-variant-numeric: tabular-nums; display: inline-grid; place-items: center; }
.ctl svg { width: 15px; height: 15px; }
.ctl.on { border-color: var(--brass); color: var(--brass-hi); background: rgba(201,154,61,0.16); }
.ctl:hover { border-color: var(--brass); }
#log { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 60px); left: 16px; display: grid; gap: 4px; pointer-events: none; max-width: min(380px, 70vw); }
.msg { display: flex; align-items: center; gap: 8px; padding: 4px 10px; background: rgba(10,12,11,0.72); border-left: 2px solid var(--rivet); font-size: var(--fs-s); transition: opacity 1s; }
.msg .dot { width: 8px; height: 8px; flex: none; border-radius: 1px; }
.msg.good { border-left-color: var(--moss); }
.msg.bad { border-left-color: var(--blood); }
.msg.fade { opacity: 0; }
#toast { position: absolute; z-index: 20; left: 50%; bottom: calc(var(--hud-h, 114px) + env(safe-area-inset-bottom, 0px) + 46px); transform: translateX(-50%); padding: 8px 16px; background: rgba(10,12,11,0.88); border: 1px solid var(--rivet); font-size: var(--fs-s); pointer-events: none; transition: opacity .4s; max-width: calc(100% - 32px); text-align: center; }
#toast.out { opacity: 0; }
/* předěl fáze scénáře */
#phase-banner { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); display: grid; gap: 4px; justify-items: center; padding: 14px 26px 16px; background: rgba(12,14,12,0.9); border: 1px solid var(--brass); text-align: center; pointer-events: none; max-width: min(560px, calc(100% - 32px)); transition: opacity .5s; }
#phase-banner.out { opacity: 0; }
#bossbar { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 74px); transform: translateX(-50%); width: min(520px, calc(100% - 32px)); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 6px 12px; background: rgba(12,10,9,0.82); border: 1px solid #7a3a1e; pointer-events: none; }
#bossbar .bb-name { font-family: var(--font-display); font-size: 17px; color: #ffcf9a; white-space: nowrap; }
#bossbar .bb-track { position: relative; height: 10px; background: #1c1210; border: 1px solid #3a1a10; overflow: hidden; }
#bossbar .bb-fill, #bossbar .bb-lag { position: absolute; left: 0; top: 0; bottom: 0; }
#bossbar .bb-fill { background: linear-gradient(180deg, #ff9a4a, #c2401a); transition: width .15s; }
#bossbar .bb-lag { background: #ffe0a0; transition: width .9s ease-out .25s; }
#bossbar .bb-tick { position: absolute; top: -1px; bottom: -1px; width: 2px; background: rgba(255,230,190,0.7); }
#bossbar .bb-tick.t1 { left: 33%; }
#bossbar .bb-tick.t2 { left: 66%; }
#bossbar .bb-ph { font-size: var(--fs-xs); color: #ffcf9a; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
#hud.has-boss #deploybar, #hud.has-boss .bark { top: calc(env(safe-area-inset-top, 0px) + 120px); }
@media (max-width: 1180px) { #hud.has-boss #log { top: calc(env(safe-area-inset-top, 0px) + 120px); } }
@media (max-width: 640px) { #bossbar { top: calc(env(safe-area-inset-top, 0px) + 116px); } #bossbar .bb-name { font-size: 14px; } #hud.has-boss #deploybar, #hud.has-boss .bark { top: calc(env(safe-area-inset-top, 0px) + 160px); } #hud.has-boss #log { top: calc(env(safe-area-inset-top, 0px) + 224px); } }
#phase-banner .pb-k { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); font-weight: 700; }
#phase-banner .pb-t { font-family: var(--font-display); font-size: 30px; line-height: 1.1; color: var(--brass-hi); }
#phase-banner .pb-x { font-size: var(--fs-s); color: var(--bone); }
.deploy-goal b { color: var(--brass-hi); }
#deploybar { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 64px); left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; padding: 12px 16px; background: rgba(15,18,16,0.92); border: 1px solid var(--brass); max-width: calc(100% - 32px); }
#deploybar p { margin: 0; font-size: var(--fs-s); color: var(--bone); max-width: 46ch; }
#deploybar p b { color: var(--brass-hi); }
#tooltip { position: absolute; left: 0; top: 0; pointer-events: none; display: grid; gap: 1px; padding: 6px 10px; background: rgba(10,12,11,0.9); border: 1px solid var(--rivet); font-size: var(--fs-s); max-width: 220px; }
#tooltip em { color: var(--brass-hi); font-style: normal; font-size: var(--fs-xs); }
/* ---------- spodní panel bitvy ----------
   Kovová deska přes celou šířku s mosaznou hranou: vlevo vybraná jednotka (údaje, rozkazy a schopnosti),
   uprostřed karty jednotek, vpravo minimapa v pouzdře, které nad desku vyčnívá. Nad levým horním rohem
   desky jsou záložky skupin (Ctrl+1–9). Výška desky je pevná (--hud-h) a kamera s ní počítá. */
#hud { --hud-h: 114px; --sp-w: clamp(390px, 26vw, 600px); --mm-w: 244px; }
#bottombar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: calc(var(--hud-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
  display: grid; grid-template-columns: var(--sp-w) minmax(0, 1fr) var(--mm-w); align-items: stretch;
  background:
    radial-gradient(circle at 50% 45%, #f2d68f 0 1.2px, #9c7731 2.2px, #2c210d 3.4px, rgba(0,0,0,0) 3.8px) calc(var(--sp-w) - 4px) 7px / 8px 8px no-repeat,
    radial-gradient(circle at 50% 45%, #f2d68f 0 1.2px, #9c7731 2.2px, #2c210d 3.4px, rgba(0,0,0,0) 3.8px) calc(var(--sp-w) - 4px) calc(100% - 15px - env(safe-area-inset-bottom, 0px)) / 8px 8px no-repeat,
    radial-gradient(circle at 50% 45%, #f2d68f 0 1.2px, #9c7731 2.2px, #2c210d 3.4px, rgba(0,0,0,0) 3.8px) calc(100% - var(--mm-w) - 4px) 7px / 8px 8px no-repeat,
    radial-gradient(circle at 50% 45%, #f2d68f 0 1.2px, #9c7731 2.2px, #2c210d 3.4px, rgba(0,0,0,0) 3.8px) calc(100% - var(--mm-w) - 4px) calc(100% - 15px - env(safe-area-inset-bottom, 0px)) / 8px 8px no-repeat,
    linear-gradient(180deg, rgba(255,236,190,0.07) 0, rgba(255,236,190,0) 18px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, rgba(0,0,0,0) 1px 4px),
    linear-gradient(180deg, #21261f 0%, #171b18 55%, #101311 100%);
  box-shadow: 0 -10px 26px rgba(0,0,0,0.5); }
#bottombar::before { content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 4px; background: linear-gradient(180deg, #2a1f0c 0, #a57c33 28%, #f0cf7f 55%, #8a6a2a 82%, #241a0a 100%); pointer-events: none; }
#bottombar > section { position: relative; min-width: 0; min-height: 0; }
#bottombar > section + section { box-shadow: inset 1px 0 0 rgba(0,0,0,0.72), inset 2px 0 0 rgba(237,198,107,0.09); }
/* vybraná jednotka: údaje nahoře, rozkazy a schopnosti pod nimi */
#selpanel { display: grid; grid-template-rows: minmax(0, 1fr) auto; align-content: center; gap: 7px; padding: 9px 14px 9px; overflow: hidden; container-type: inline-size; }
.sp-empty { display: grid; gap: 7px; align-content: center; }
.sp-empty p { margin: 0; color: var(--ash); font-size: var(--fs-s); line-height: 1.3; }
.sp-unit { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; }
.sp-port { position: relative; }
.sp-port canvas { width: 52px; height: 52px; }
.sp-port .uc-fx { top: 3px; right: 2px; left: auto; pointer-events: auto; }
.sp-port .uc-fx .fxc { cursor: help; }
.sp-title { display: grid; min-width: 0; line-height: 1.14; }
.sp-title strong { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-cls { color: var(--brass); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-line { font-size: var(--fs-s); color: var(--ash); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-barrow { display: flex; align-items: center; gap: 7px; min-width: 0; margin-top: 2px; }
.sp-barrow .sp-bar { flex: 1; margin: 0; }
.sp-mor { flex: none; font-size: 11px; color: var(--ash); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-bar { display: block; height: 4px; background: #0b0d0c; margin-top: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6); }
.sp-bar i { display: block; height: 100%; }
.sp-unit.enemy .sp-title strong { color: #ffc9bd; }
.sp-stats { display: grid; grid-template-columns: repeat(3, 48px); gap: 2px; margin: 0; font-variant-numeric: tabular-nums; cursor: help; }
.sp-stats div { background: rgba(10,12,11,0.55); border: 1px solid var(--rivet); padding: 1px 2px; text-align: center; min-width: 0; }
.sp-stats dt { font-size: 10px; line-height: 1.2; color: var(--ash); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-stats dd { margin: 0; font-weight: 800; font-size: var(--fs-s); line-height: 1.15; }
.sp-more { display: none; flex-wrap: wrap; align-content: flex-start; align-self: center; gap: 3px 5px; max-height: 45px; overflow: hidden; min-width: 0; }
.sp-more .trait, .sp-more .fxc { font-size: 11px; }
.sp-more .trait { padding: 1px 6px 1px 4px; }
.sp-more .sp-fx, .sp-more .sp-gear, .sp-more .sp-traits { margin: 0; display: contents; }
.sp-desc { margin: 0; font-size: var(--fs-xs); color: var(--bone); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-unit.civ { grid-template-columns: auto minmax(0, 1fr); }
.sp-unit.civ .sp-desc { grid-column: 2; margin-top: -4px; }
/* široký panel (velké monitory): vedle hodnot ještě účinky, výzbroj a vlastnosti */
@container (min-width: 540px) {
  .sp-unit { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1.1fr); }
  .sp-more { display: flex; }
  .sp-port .uc-fx { display: none; }
  .sp-unit.civ { grid-template-columns: auto minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .sp-unit.civ .sp-desc { grid-column: 3; margin-top: 0; }
}
.sp-group { display: grid; gap: 4px; min-width: 0; align-content: center; }
.sg-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; white-space: nowrap; }
.sg-top strong { font-size: var(--fs-m); }
.sg-sum { color: var(--ash); font-size: var(--fs-s); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.sp-cmd { display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; max-height: 60px; overflow: hidden; min-width: 0; }
.act { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border: 1px solid var(--rivet); background: linear-gradient(180deg, #252a25, #1a1e1b); border-radius: 2px; cursor: pointer; font-size: var(--fs-s); font-weight: 600; flex: none; }
.act:hover { border-color: var(--brass); }
.act.on { border-color: var(--brass); color: var(--brass-hi); background: linear-gradient(180deg, rgba(201,154,61,0.3), rgba(201,154,61,0.12)); }
.act .ic { display: inline-grid; } .act svg { width: 14px; height: 14px; }
.act.ico { width: 32px; padding: 0; justify-content: center; }
.act.ico .k { position: absolute; right: 2px; bottom: 1px; font: 700 8px/1 var(--font-ui); color: var(--ash); }
.abil { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 5px; flex: 1 1 auto; min-width: 96px; max-width: 220px; border: 1px solid var(--brass); background: linear-gradient(180deg, rgba(201,154,61,0.24), rgba(201,154,61,0.1)); color: var(--bone); border-radius: 2px; cursor: pointer; font-size: var(--fs-s); font-weight: 700; text-align: left; overflow: hidden; }
.abil kbd { padding: 1px 4px; }
.abil .ab-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abil .ab-cd { color: var(--ash); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); }
.abil.cd { border-color: var(--rivet); background: rgba(23,27,25,0.9); color: var(--ash); }
.abil.active { background: var(--brass); color: var(--ink); }
.abil.active kbd { color: var(--ink); }
.abil:disabled { opacity: .5; cursor: not-allowed; }
.abil.uab { border-color: #8ea6c0; background: linear-gradient(180deg, rgba(140,165,195,0.24), rgba(140,165,195,0.1)); }
.abil.running { border-color: var(--moss); background: rgba(139,187,99,.18); }
.abil.running .ab-cd { color: #b8e09a; }
.uc-ab { display: none; position: absolute; left: 7px; top: 18px; width: 7px; height: 7px; transform: rotate(45deg); background: var(--brass-hi); box-shadow: 0 0 6px rgba(242,197,90,.85); }
.ucard.ab-ready .uc-ab { display: block; }
/* posílení a oslabení */
.fxc { display: inline-flex; align-items: center; gap: 4px; }
.fxi { display: inline-grid; place-items: center; width: 15px; height: 15px; padding: 1px; border: 1px solid; border-radius: 2px; flex: none; }
.fxi svg { width: 100%; height: 100%; }
.fxc.buff .fxi { color: #f3d27a; border-color: rgba(243,210,122,.7); background: rgba(14,16,12,.85); }
.fxc.debuff .fxi { color: #ff7a5c; border-color: rgba(255,110,80,.85); background: rgba(40,10,6,.88); }
.fxc.fx-chill .fxi { color: #a8dcff; } .fxc.fx-choke .fxi { color: #c9bba8; } .fxc.fx-burn .fxi { color: #ff9a4a; }
.fxc.fx-march .fxi { color: #7dffd0; } .fxc.fx-ward .fxi { color: #bfe6ff; } .fxc.undead .fxi { color: #7dffb0; }
.fxn { font-size: var(--fs-xs); color: var(--bone); }
.fxc.debuff .fxn { color: #ffb4a0; }
.fxt { font-size: 10px; color: var(--ash); font-variant-numeric: tabular-nums; }
.sp-fx { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 0; }
.sp-fx:empty { display: none; }
.uc-fx { position: absolute; top: 27px; left: 3px; display: grid; gap: 1px; pointer-events: none; }
.uc-fx .fxi { width: 12px; height: 12px; }
/* karty jednotek: při nedostatku místa se zúží, pak se dají posouvat (i kolečkem) */
#cards { display: flex; gap: 5px; align-items: flex-end; padding: 0 10px 9px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #4a4433 transparent; touch-action: pan-x; min-width: 0; }
.ucard { position: relative; flex: 0 1 72px; min-width: 66px; height: 88px; padding: 3px 3px 0; display: grid; grid-template-rows: 46px 1fr auto; border: 1px solid var(--rivet); border-radius: 2px; background: linear-gradient(180deg, #1f241f, #161a17); cursor: pointer; text-align: center; overflow: hidden; transition: border-color .12s, transform .12s; }
.ucard:hover { border-color: var(--brass); }
.ucard.sel { border-color: var(--brass-hi); box-shadow: inset 0 0 0 1px var(--brass-hi), 0 0 10px rgba(237,198,107,0.25); transform: translateY(-3px); }
.uc-port { display: grid; place-items: center; background: radial-gradient(circle at 50% 75%, #3b4a2c 0%, #1d2419 80%); }
.uc-port canvas { width: 44px; height: 44px; }
.uc-name { align-self: center; font-size: 10.5px; font-weight: 700; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 1px 1px 0; overflow-wrap: normal; text-wrap: balance; }
/* dlouhé jednoslovné jméno (Armbrustschützen, Halabardnicy) se nezalomí uprostřed slova: fitCardNames zmenší písmo; jen když ani to nestačí, smí se zalomit kdekoli */
.uc-name.brk { overflow-wrap: anywhere; }
.uc-men { position: absolute; top: 3px; right: 4px; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000; }
.uc-rank { position: absolute; top: 3px; left: 5px; font-size: 9px; color: var(--brass-hi); letter-spacing: -1px; }
.uc-grp { position: absolute; top: 3px; left: 3px; min-width: 13px; height: 13px; padding: 0 2px; border: 1px solid var(--brass); border-radius: 2px; background: #0d100f; color: var(--brass-hi); font: 800 10px/11px var(--font-ui); text-align: center; z-index: 1; }
.uc-grp:empty { display: none; }
.ucard.in-grp .uc-rank { left: 19px; }
/* stav (v boji, kolísají, prchají) nahradí jméno barevným štítkem */
.uc-state { position: absolute; left: 3px; right: 3px; top: 37px; height: 12px; display: grid; place-items: center; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; line-height: 1; color: var(--bone); background: rgba(10,12,11,0.62); text-shadow: 0 1px 1px #000; white-space: nowrap; overflow: hidden; }
.uc-state:empty { display: none; }
/* boj, kolísání a útěk: štítek nahradí jméno, aby byl vidět i z koutku oka */
.st-melee .uc-state, .st-waver .uc-state, .st-rout .uc-state, .ucard.gone .uc-state { top: 50px; height: 24px; font-size: 10px; text-shadow: none; border-radius: 1px; white-space: normal; }
.st-melee .uc-state { background: #2a221a; color: #ffd9a0; box-shadow: inset 0 0 0 1px rgba(255,217,160,0.35); }
.st-waver .uc-state { background: #6a5010; color: #fff1c4; }
.st-rout .uc-state { background: #8a2a1a; color: #fff; }
.ucard.st-rout { border-color: var(--blood); }
.ucard.gone { opacity: .35; filter: grayscale(1); }
.ucard.hurt { border-color: #e0503a; box-shadow: inset 0 0 0 1px #e0503a, inset 0 -18px 22px -10px rgba(224,80,58,0.55); }
.ucard.hurt .uc-port { animation: hurtshake .22s linear 1; }
@keyframes hurtshake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .ucard.hurt .uc-port { animation: none; } }
.ucard.gone .uc-state { background: #1a1d1b; color: var(--ash); }
.uc-bars { display: grid; gap: 2px; padding: 3px 1px 4px; }
.uc-bars i { display: block; height: 3px; background: var(--bone); }
/* minimapa v pouzdře, které vyčnívá nad desku */
#minimapwrap { position: relative; }
.mm-house { position: absolute; right: 12px; bottom: calc(9px + env(safe-area-inset-bottom, 0px)); padding: 4px; line-height: 0; background: linear-gradient(180deg, #2c3129, #171a18); border: 1px solid #7a6029; border-radius: 2px; box-shadow: 0 0 0 1px #0a0b0a, 0 -8px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,236,190,0.14); }
.mm-house::before { content: ""; position: absolute; left: -1px; right: -1px; top: -4px; height: 3px; background: linear-gradient(180deg, #8a6a2a, #f0cf7f 50%, #8a6a2a); border-radius: 2px 2px 0 0; }
#minimap { display: block; width: 214px; height: 140px; cursor: pointer; touch-action: none; border: 1px solid #0a0b0a; }
/* skupiny: záložky nad levým horním rohem panelu */
#groups { position: absolute; left: 12px; bottom: calc(100% + 4px); display: flex; align-items: flex-end; gap: 3px; max-width: calc(100% - var(--mm-w) - 24px); overflow: hidden; pointer-events: auto; }
#groups:empty { display: none; }
.gtab { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px 0 5px; border: 1px solid #4b4535; border-bottom: 0; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #2b302a, #1a1e1b); color: var(--bone); font: 700 var(--fs-s)/1 var(--font-ui); cursor: pointer; box-shadow: 0 -4px 10px rgba(0,0,0,0.35); flex: none; }
.gtab .gt-n { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 3px; background: #0d100f; border: 1px solid var(--rivet); border-radius: 2px; font-weight: 800; font-size: 11px; color: var(--brass-hi); font-variant-numeric: tabular-nums; }
.gtab .portrait canvas { width: 20px; height: 20px; }
.gtab .gt-c { font-size: var(--fs-xs); color: var(--ash); font-variant-numeric: tabular-nums; }
.gtab:hover { border-color: var(--brass); }
.gtab.part { border-color: rgba(201,154,61,0.7); }
.gtab.on { height: 30px; border-color: var(--brass-hi); background: linear-gradient(180deg, #5c4720, #2c2414 85%); color: var(--brass-hi); }
.gtab.on .gt-n { background: var(--brass-hi); border-color: var(--brass-hi); color: var(--ink); }
.gtab.on .gt-c { color: var(--bone); }
.gtab.dead { opacity: .5; }
.gtab.add { padding: 0 9px; color: var(--ash); }
.gtab.add:disabled { opacity: .4; cursor: default; border-color: #3a3a30; }
.gtab.add b { font-size: 15px; color: var(--brass); }

/* ---------- široké monitory: mapa aktu se třemi sloupci, tábor s jednotkami vedle sebe ---------- */
@media (min-width: 1400px) {
  #scr-camp .screen-head, #scr-camp .screen-foot { max-width: 1880px; }
  .camp-grid { max-width: 1880px; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
  .camp-heroes { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
  .camp-units { grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); align-items: start; }
  .camp-units > .hint { grid-column: 1 / -1; }
  .camp-units .cu-dismiss .dis-l { display: none; }
  /* doplnit a propustit vpravo nahoře vedle jména; hodnoty a štítky pod nimi mají celou šířku */
  .camp-units .cu { position: relative; }
  .camp-units .cu-foot .cu-side { position: absolute; top: 8px; right: 10px; }
  .camp-units .cu-main > strong, .camp-units .cu-men { padding-right: 190px; }
  .camp-rec { position: sticky; top: 0; }
}
@media (min-width: 1400px) {
  #scr-army .screen-head, #scr-army .screen-foot, #scr-ach .screen-head, #scr-ach .screen-foot, #scr-help .screen-head, #scr-help .screen-foot { max-width: 1880px; }
  .army-cols { max-width: 1880px; grid-template-columns: minmax(0, 1fr) 340px; }
  .army-cols .armylist { max-height: calc(100vh - 260px); }
  #scr-ach #ach-body { max-width: 1880px; }
  .help-grid { max-width: 1880px; grid-template-columns: minmax(340px, 0.85fr) minmax(0, 2fr); }
  .tips { display: block; max-width: none; columns: 2 380px; column-gap: 40px; }
  .tips li { break-inside: avoid; margin-bottom: 8px; }
}
@media (min-width: 1680px) {
  #scr-campaign .screen-head, #scr-campaign .screen-foot { max-width: 1880px; }
  .camp-cols { max-width: 1880px; grid-template-columns: minmax(0, 1.5fr) minmax(330px, 0.82fr) minmax(300px, 0.62fr); }
  .camp-side { display: grid; gap: 20px; align-content: start; }
}
/* ultraširoké monitory (21:9, 32:9): obsah přes celou šířku. Mapa aktu je jen tak velká, aby se i s relikviemi
   a tlačítky vešla na výšku; rozhovor a přehled armády vedle ní mají rozumnou šířku. */
@media (min-width: 2200px) {
  #scr-camp .screen-head, .camp-grid, #scr-campaign .screen-head, .camp-cols,
  #scr-army .screen-head, .army-cols, #scr-ach .screen-head, #scr-ach #ach-body, #scr-help .screen-head, .help-grid { max-width: none; }
  .camp-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); }
  .camp-heroes { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
  .camp-cols { grid-template-columns: minmax(0, calc((100vh - 400px) * 1.52)) minmax(380px, 820px) minmax(320px, 620px); }
  .army-cols { grid-template-columns: minmax(0, 1fr) 380px; }
  .tips { columns: 3 380px; }
}
@media (max-width: 900px) {
  #bottombar { height: auto; grid-template-columns: minmax(0, 1fr); gap: 4px; padding-top: 6px; background: linear-gradient(180deg, #21261f 0%, #101311 100%); }
  #bottombar > section + section { box-shadow: none; }
  #minimapwrap { display: none; }
  #selpanel { max-height: 150px; overflow-y: auto; padding-block: 4px 0; }
  #cards { padding-top: 6px; }
  .sp-stats { display: none; }
  #groups { max-width: calc(100% - 24px); }
  .army-cols, .camp-cols, .camp-grid { grid-template-columns: minmax(0, 1fr); }
  #toast { bottom: 250px; }
}
@media (max-width: 700px) {
  #vignette.deep { background: linear-gradient(180deg, rgba(8,10,9,0.9) 0%, rgba(8,10,9,0.82) 100%); }
  .sp-traits { display: none; }
  .sp-port canvas { width: 40px; height: 40px; }
}
@media (max-width: 640px) {
  #topbar { grid-template-columns: minmax(0, 1fr) auto; padding-inline: 12px; }
  .balance { grid-column: 1 / -1; grid-row: 2; grid-template-columns: auto minmax(0, 1fr) auto; }
  .roster { grid-template-columns: minmax(0, 1fr); }
  .ucard { flex-basis: 64px; }
  #log { top: calc(env(safe-area-inset-top, 0px) + 92px); }
  #deploybar { top: calc(env(safe-area-inset-top, 0px) + 96px); }
  .cu { grid-template-columns: 60px minmax(0, 1fr); grid-template-areas: "port main" "foot foot" "brk brk"; }
  .upbtn { flex: 1; min-width: 0; }
  .cu-ups { flex: 1 1 100%; }
  .cu-foot .cu-side { flex: 1 1 100%; margin-left: 0; justify-content: space-between; }
  .hero-card { grid-template-columns: 50px minmax(0, 1fr); }
  .hero-sk { grid-column: 1 / -1; justify-self: start; }
  .sk-tree { grid-template-columns: minmax(0, 1fr); }
  .sk-node { grid-template-columns: 34px minmax(0, 1fr); }
  .sk-learn, .sk-state { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- příběh ---------- */
.bark { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 62px); transform: translateX(-50%); display: flex; gap: 10px; align-items: center; width: max-content; max-width: min(640px, calc(100% - 32px)); padding: 7px 16px 7px 7px; background: rgba(13,15,14,0.9); border: 1px solid var(--rivet); border-left: 3px solid var(--bark-col, var(--brass)); box-shadow: 0 12px 34px rgba(0,0,0,0.5); pointer-events: none !important; z-index: 4; }
.bark.in { animation: barkin .35s ease-out; }
@keyframes barkin { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.bark-port canvas { width: 40px; height: 40px; }
.bark-body { display: grid; gap: 1px; min-width: 0; }
.bark-who { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--brass-hi); }
.bark.foe .bark-who { color: #ff9a84; }
.bark-text { font-size: var(--fs-m); color: var(--bone); font-style: italic; line-height: 1.3; }
@media (prefers-reduced-motion: reduce) { .bark.in { animation: none; } .story-p { animation: none !important; opacity: 1 !important; } }
#scr-story { display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 40%, rgba(12,14,13,0.7), rgba(6,7,7,0.94)); }
.story-wrap { width: min(760px, 100%); }
.story-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 7vw, 76px); line-height: .95; color: var(--brass-hi); margin: 6px 0 18px; text-shadow: 0 2px 0 #000; }
.story-cast { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.cast-card { display: flex; align-items: center; gap: 8px; color: var(--ash); font-size: var(--fs-s); }
.cast-card .portrait canvas { width: 46px; height: 46px; }
.story-p { margin: 0 0 14px; font-size: var(--fs-l); line-height: 1.6; color: var(--bone); max-width: 62ch; opacity: 0; animation: storyin .9s ease-out forwards; }
.story-p:first-of-type::first-letter { font-family: var(--font-display); font-size: 2.6em; float: left; line-height: .8; margin: 6px 8px 0 0; color: var(--brass-hi); }
@keyframes storyin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.story-foot { margin-top: 22px; }
.dlg { display: grid; gap: 8px; margin: 14px 0 16px; padding: 12px; border: 1px solid var(--rivet); background: rgba(14,17,15,0.75); }
.dlg-line { display: flex; gap: 10px; align-items: flex-start; }
.dlg-line > div { display: grid; gap: 1px; min-width: 0; }
.dlg-line b { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--brass-hi); }
.dlg-line span:not(.portrait) { color: var(--bone); font-style: italic; }
.story-foot { display: flex; gap: 10px; flex-wrap: wrap; }
.res-story { font-style: italic; color: var(--bone); font-size: var(--fs-l); line-height: 1.5; border-left: 3px solid var(--brass); padding: 4px 0 4px 14px; margin: 6px 0 14px; }
.camp-end .story-p { opacity: 1; animation: none; }
@media (max-width: 640px) {
  .bark { top: calc(env(safe-area-inset-top, 0px) + 94px); max-width: calc(100% - 24px); }
  .bark-text { font-size: var(--fs-s); }
  #log { top: calc(env(safe-area-inset-top, 0px) + 160px); }
}
/* ---------- úspěchy ---------- */
.ach-n { font-family: var(--font-ui); font-size: var(--fs-s); color: var(--brass); font-weight: 700; letter-spacing: .04em; margin-left: 2px; font-variant-numeric: tabular-nums; }
#ach-count { font-variant-numeric: tabular-nums; font-size: var(--fs-l); color: var(--ash); }
#ach-count b { color: var(--brass-hi); font-size: var(--fs-xl); }
#ach-body { display: grid; gap: 26px; max-width: 1180px; }
.ach-sub { color: var(--brass); letter-spacing: .06em; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 8px; }
.ach-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--rivet); border-radius: 2px; background: rgba(23,27,25,0.82); min-width: 0; }
.ach-card.got { border-color: rgba(201,154,61,0.7); background: linear-gradient(180deg, rgba(58,46,26,0.55), rgba(23,27,25,0.85)); }
.ach-card:not(.got) .ach-medal { opacity: .75; }
.ach-medal svg, svg.medal { width: 40px; height: 50px; display: block; }
svg.medal.sm { width: 22px; height: 27px; display: inline-block; vertical-align: middle; }
.ach-txt { display: grid; gap: 2px; min-width: 0; }
.ach-txt strong { font-size: var(--fs-l); line-height: 1.15; color: var(--ash); }
.ach-card.got .ach-txt strong { color: var(--brass-hi); }
.ach-desc { font-size: var(--fs-s); color: var(--ash); }
.ach-card.got .ach-desc { color: var(--bone); }
.ach-when { font-size: var(--fs-xs); color: var(--brass); letter-spacing: .04em; }
.ach-prog { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.ach-bar { flex: 1; height: 5px; max-width: 180px; background: rgba(0,0,0,0.45); border: 1px solid var(--rivet); }
.ach-bar i { display: block; height: 100%; background: var(--brass); }
.ach-prog small { font-size: var(--fs-xs); color: var(--ash); font-variant-numeric: tabular-nums; }
.res-ach { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 14px; }
.res-ach-k { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); font-weight: 700; }
.res-ach-i { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border: 1px solid rgba(201,154,61,0.6); background: rgba(58,46,26,0.5); color: var(--brass-hi); font-weight: 700; font-size: var(--fs-s); cursor: help; }
#achtoast { position: absolute; z-index: 40; top: calc(env(safe-area-inset-top, 0px) + 64px); right: 16px; display: flex; gap: 12px; align-items: center; width: min(380px, calc(100% - 32px)); padding: 10px 16px 10px 12px; background: linear-gradient(180deg, rgba(40,33,20,0.97), rgba(19,17,12,0.97)); border: 1px solid var(--brass); box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 26px rgba(237,198,107,0.14); pointer-events: none; opacity: 0; transform: translateY(-10px); transition: opacity .35s, transform .35s cubic-bezier(.2,.9,.3,1.15); }
#achtoast.in { opacity: 1; transform: none; }
@media (min-width: 641px) { #app.scr-full #achtoast { top: 14px; right: auto; left: 50%; margin-left: calc(min(380px, 100% - 32px) / -2); } }
#achtoast svg.medal { flex: none; }
.at-body { display: grid; gap: 1px; min-width: 0; }
.at-k { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); font-weight: 700; }
.at-n { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.05; color: var(--brass-hi); }
.at-d { font-size: var(--fs-s); color: var(--bone); }
@media (max-width: 640px) { #achtoast { top: calc(env(safe-area-inset-top, 0px) + 6px); right: 12px; width: calc(100% - 24px); } }
/* ---------- gamepad ---------- */
.gpf { outline: 2px solid var(--brass-hi) !important; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(237,198,107,0.18); }
#app.gamepad #view { cursor: none; }
.gpb { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 4px; background: #3a4139; color: var(--bone); font: 800 11px/1 var(--font-ui); letter-spacing: .02em; vertical-align: middle; white-space: nowrap; }
.gpb.face { width: 20px; padding: 0; border-radius: 50%; color: #101310; }
.gpb.face.a { background: #63b65a; } .gpb.face.b { background: #e0584a; } .gpb.face.x { background: #4c8fdc; } .gpb.face.y { background: #e9c14a; }
.gpb.face.ps { background: #262b27; font-size: 13px; }
.gpb.face.ps.a { color: #8fb4f2; } .gpb.face.ps.b { color: #f08a83; } .gpb.face.ps.x { color: #e29be0; } .gpb.face.ps.y { color: #7fdab0; }
#gp-hint { position: absolute; left: 50%; bottom: calc(100% + 40px); transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; padding: 5px 12px; background: rgba(13,15,14,0.88); border: 1px solid var(--rivet); font-size: var(--fs-xs); color: var(--ash); pointer-events: none !important; }
#gp-hint .gph { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
#gp-hint .gph .gpb + .gpb { margin-left: -2px; }
.gp-keys dt { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.gp-keys .gpb.pill { font-weight: 700; }

/* ---------- jazyk ---------- */
.lang-btn { display: inline-flex; align-items: center; gap: 8px; }
.lang-btn svg { width: .8em; height: .8em; flex: none; opacity: .85; }
.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 6px 0 4px; }
.lang-opt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--rivet); border-radius: 2px; background: rgba(23,27,25,0.82); color: var(--bone); cursor: pointer; font-family: var(--font-ui); text-align: left; transition: border-color .15s, background .15s; }
.lang-opt b { font-size: var(--fs-l); font-weight: 700; }
.lang-opt small { font-size: var(--fs-xs); color: var(--ash); letter-spacing: .1em; font-weight: 700; }
.lang-opt:hover { border-color: var(--brass); }
.lang-opt.on { border-color: var(--brass-hi); background: rgba(201,154,61,0.16); color: var(--brass-hi); }