/* ArcaniOpus – mosaz, kůže a fialová magie. Nadpisy a čísla Press Start 2P, text VT323. */

@font-face {
  font-family: "Press Start 2P";
  src: url("fonts/PressStart2P-Regular.ttf") format("truetype");
  font-display: block;
}
@font-face {
  font-family: "VT323";
  src: url("fonts/VT323-Regular.ttf") format("truetype");
  font-display: block;
}

:root {
  --bg: #14110e;
  --panel: #211b15;
  --panel-2: #2a221a;
  --line: #4a3b2a;
  --brass: #c9973f;
  --brass-dim: #8c6a35;
  --text: #ecdfc6;
  --muted: #a29379;
  --tech: #d9a24a;
  --magic: #a77cff;
  --neutral: #a8b08a;
  --hp: #d8463b;
  --mana: #4a8ce0;
  --speed: #e0c050;
  --good: #7cd957;
  --bad: #e5604f;
  --physical: #f2e6c9;
  --arcane: #b48cff;
  --electric: #ffe033;
  --shield: #6fd3ff;
  --fire: #ff8a3d;
  --poison: #7cd957;
  --px: "Press Start 2P", monospace;
  --vt: "VT323", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--vt);
  font-size: 21px;
  line-height: 1.15;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* hra, ne stránka: text nejde označovat tažením ani dvojklikem (jinak modré pruhy přes panely);
   psát a kopírovat jde dál v polích, v konzoli a v tabulce balancu */
body { overflow-x: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* výřez na kameru (ostrůvek) u telefonu: hra se mu vyhne, místo něj černá lišta nahoře, na šířku po straně
   (podle natočení; env() je 0, kde výřez není). Stránka má viewport-fit=cover, jinak by prohlížeč výřez řešil sám. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}
body { box-sizing: border-box; padding: var(--safe-top) var(--safe-right) 0 var(--safe-left); }
/* černý rámeček přes výřez: pevný, takže zůstane na místě i při posouvání stránky; kliknutí propustí */
body::before { content: ""; position: fixed; inset: 0; z-index: 1000; pointer-events: none;
               border: 0 solid #000; border-width: var(--safe-top) var(--safe-right) 0 var(--safe-left); }
input, textarea, [contenteditable], .admin-log, .bal-wrap { user-select: text; -webkit-user-select: text; }

[hidden] { display: none !important; }

#app { min-height: 100%; }

button, select, input {
  font: inherit;
  color: inherit;
}

button {
  background: var(--panel-2);
  border: 2px solid var(--line);
  border-bottom-width: 4px;
  padding: 6px 12px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  image-rendering: pixelated;
}
button:hover:not(:disabled) { border-color: var(--brass-dim); }
button:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; }
button:disabled { opacity: 0.45; cursor: default; }
button.primary {
  background: linear-gradient(#c9973f, #a3772c);
  color: #1b130a;
  border-color: #6b4a1c;
  font-family: var(--px);
  font-size: 11px;
  padding: 10px 14px;
}

select, input {
  background: #120f0c;
  border: 2px solid var(--line);
  padding: 4px 6px;
  min-width: 0;
}

h1, h2, h3, .num, .px { font-family: var(--px); font-weight: normal; }
h2 { font-size: 11px; color: var(--brass); margin: 22px 0 10px; letter-spacing: 1px; }
h2 small { font-family: var(--vt); font-size: 19px; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
h3 { font-size: 11px; margin: 0; color: var(--brass); }

/* ---------- horní lišta ---------- */

.topbar {
  position: sticky; top: var(--safe-top); z-index: 5;     /* pod černou lištou výřezu na kameru */
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(#1d1712, #14110e);
  border-bottom: 2px solid var(--line);
}
.topbar h1 { font-size: 12px; margin: 0; color: var(--brass); white-space: nowrap; text-shadow: 2px 2px 0 #000; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; justify-content: center; }
.tabs button { padding: 4px 8px; font-size: 19px; }
.tabs button.active { border-color: var(--brass); color: var(--brass); }
.lang { font-family: var(--px); font-size: 9px; padding: 6px 8px; }
.mock-note { background: #3a2a10; color: var(--brass); padding: 4px 12px; font-size: 17px; }

main { padding: 6px 14px 40px; }

/* ---------- postava ---------- */

.name-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 8px; }
.name-row label { display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: 17px; }
.name-row input, .name-row select { color: var(--text); font-size: 20px; width: 100%; min-width: 0; }
.bg-desc { color: var(--muted); font-size: 18px; min-height: 20px; margin-top: 4px; }
/* rasa a původ: tlačítko místo výběru, pod ním panel Vzhled a původ (tvorba postavy) */
.name-row .origin-btn { color: var(--text); font-size: 18px; text-align: left; padding: 4px 8px; width: 100%; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.origin-panel { background: var(--panel); border: 2px solid var(--brass); padding: 8px 10px; margin: 6px 0 8px;
  display: flex; flex-direction: column; gap: 6px; }
.origin-panel[hidden] { display: none; }
.origin-panel h3 { margin: 0; color: var(--brass); }
.origin-panel .origin-label { color: var(--muted); font-size: 16px; }
.origin-races { display: flex; flex-wrap: wrap; gap: 4px; }
.origin-races button { font-size: 17px; padding: 3px 10px; }
.origin-races button.on, .origin-bg.on { border-color: var(--brass); color: var(--brass); }
.origin-colors { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.origin-colors .origin-label { min-width: 70px; }
.origin-swatch { width: 26px; height: 26px; min-width: 0; padding: 0; border: 2px solid var(--line); }
.origin-swatch.on { border-color: var(--brass); box-shadow: 0 0 0 2px var(--brass); }
.origin-bgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px; max-height: 40vh; overflow-y: auto; }
.origin-bg { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 1px; padding: 4px 8px; }
.origin-bg b { font-weight: normal; font-size: 17px; }
.origin-bg .small { font-size: 14px; color: var(--muted); }
.origin-btns { display: flex; gap: 6px; }
.origin-btns button { flex: 1; font-size: 18px; padding: 6px; }
.check { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 18px; color: var(--muted); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--brass); }

.preview {
  position: relative;
  height: 300px;
  margin-top: 10px;
  background: radial-gradient(ellipse at 50% 85%, #3a2e22 0%, #1a1612 70%);
  border: 2px solid var(--line);
  /* tažení do stran otáčí postavou, nahoru a dolů posouvá stránku (na telefonu náhled nebere celé posouvání) */
  touch-action: pan-y;
  overflow: hidden;
  cursor: grab;
}
.preview.small { height: 230px; }
@media (max-width: 899px) { #previewBox { height: 190px; } }
/* malá obrazovka (SMALL_CHAR v app.js): záložky postavy úplně nahoře, hrdina s aptitude a energií je součást
   Statistik (nad hodnotami), jméno a původ pod nimi; u ostatních záložek levý sloupec není vůbec.
   Levý a pravý sloupec se rozpustí (display: contents) a pořadí určí order. */
@media (max-width: 899px) {
  #screenCharacter .char-grid { display: flex; flex-direction: column; }
  #screenCharacter .char-left, #screenCharacter .char-right { display: contents; }
  #screenCharacter .char-left > * { order: 2; }
  #screenCharacter #pvpBar { order: 0; }
  #screenCharacter #charTabs { order: 1; margin-top: 0; }
  #screenCharacter .char-panel { order: 3; }
  #screenCharacter .name-row, #screenCharacter #bgDesc { order: 4; }
  #screenCharacter .name-row { margin-top: 10px; }
  #screenCharacter:not([data-ctab="stats"]) .char-left > :not(#pvpBar) { display: none; }
}
.preview canvas { display: block; image-rendering: pixelated; }
.drag-hint { position: absolute; right: 8px; bottom: 6px; color: var(--muted); font-size: 16px; pointer-events: none; z-index: 1; }

/* pruh zdatnosti: technika vlevo, magie vpravo */
.aptitude { margin-top: 12px; }
.apt-scale {
  position: relative; height: 18px;
  background: linear-gradient(90deg, #d9a24a 0%, #5a4428 46%, #3a3328 50%, #3e2f5a 54%, #a77cff 100%);
  border: 2px solid var(--line);
}
.apt-scale .mid { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; background: #000; opacity: 0.5; }
.apt-scale .marker {
  position: absolute; top: -7px; width: 10px; height: 28px; margin-left: -5px;
  background: var(--text); border: 2px solid #000; transition: left 0.3s;
}
.apt-scale .ghost { background: transparent; border-style: dashed; border-color: var(--text); opacity: 0.8; }
.apt-labels { display: flex; justify-content: space-between; font-family: var(--px); font-size: 8px; margin-top: 6px; }
.apt-labels .t { color: var(--tech); }
.apt-labels .m { color: var(--magic); }
.apt-text { text-align: center; font-size: 19px; margin-top: 4px; }
.apt-text .num { font-size: 10px; }

.slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.slot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; padding: 6px 8px 6px 12px; position: relative; min-height: 54px;
}
.slot::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--line); }
.slot.tech::before { background: var(--tech); }
.slot.magic::before { background: var(--magic); }
.slot.neutral::before { background: var(--neutral); }
.slot .sname { font-family: var(--px); font-size: 8px; color: var(--muted); }
.slot .iname { font-size: 20px; }
/* výbava hodně pod úrovní postavy (app.js markOutdated): šedý název */
.slot.outdated .iname { color: var(--muted); }
/* zpětná vazba (formulář „!“): víc místa na text */
.report-note.feedback { min-height: 140px; }
.slot.weapon { grid-column: 1 / -1; }

.stats { display: flex; flex-direction: column; gap: 4px; }
/* trénink zbraní: druh a lekce, crit teď → po lekci, tlačítko s cenou; zbraň v ruce zvýrazněná */
.training { display: flex; flex-direction: column; gap: 4px; }
.train-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
             background: var(--panel); padding: 4px 6px 4px 10px; border-left: 3px solid transparent; }
.train-row.held { border-left-color: var(--brass); }
.train-name { display: flex; flex-direction: column; min-width: 0; }
.train-name .small { color: var(--muted); font-size: 16px; }
.train-crit { font-family: var(--px); font-size: 11px; color: var(--good); white-space: nowrap; }
.train-row button, .train-row button.primary { font-family: var(--vt); font-size: 17px; padding: 3px 8px; white-space: nowrap; }
.stat-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px auto; align-items: center; gap: 8px; background: var(--panel); padding: 3px 6px 3px 10px; }
.stat-row .label small { color: var(--muted); margin-left: 6px; font-size: 17px; }
.stat-row .val { font-family: var(--px); font-size: 12px; text-align: center; }
.stat-row .mod { font-size: 17px; min-width: 26px; text-align: right; }
.stat-row .mod.plus { color: var(--good); }
.stat-row .mod.minus { color: var(--bad); }
.stat-row button { width: 34px; height: 30px; padding: 0; font-family: var(--px); font-size: 12px; }
.stat-row .pm { display: flex; gap: 4px; }
/* podržení + a − přidává rychleji; na dotyku bez nabídky a výběru textu */
.stat-row .pm button { touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.reset-row { display: flex; justify-content: flex-end; margin-top: 6px; }
.reset-row button { font-size: 15px; padding: 4px 10px; }
.reset-row button.sure, .chip.sure { border-color: var(--bad); color: var(--bad); }

.derived { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.derived .kv { display: flex; justify-content: space-between; background: var(--panel); padding: 3px 8px; }
.derived .kv .num { font-size: 11px; align-self: center; }
.derived .wide { grid-column: 1 / -1; }
.derived .wide > span:first-child { white-space: nowrap; margin-right: 8px; }
.warn { color: var(--bad); }

.resists { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 8px; }
.res { background: var(--panel); text-align: center; padding: 5px 2px; border-top: 3px solid var(--line); }
.res .rn { font-size: 15px; color: var(--muted); }
.res .num { font-size: 10px; margin-top: 2px; }
.res.physical { border-color: var(--physical); }
/* přídavek poškození u max. zásahu zbraně v barvě typu */
.xdmg { font-size: 0.85em; }
.dmg-physical { color: var(--physical); }
.dmg-arcane { color: var(--arcane); }
.dmg-electric { color: var(--electric); }
.dmg-fire { color: var(--fire); }
.dmg-poison { color: var(--poison); }
.res.arcane { border-color: var(--arcane); }
.res.electric { border-color: var(--electric); }
.res.fire { border-color: var(--fire); }
.res.poison { border-color: var(--poison); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--panel-2); border: 2px solid var(--line); padding: 2px 8px; font-size: 19px; }
.chip.passive { font-style: italic; border-style: dashed; }
.chip.click { cursor: pointer; }
.chip.hidden-skill { border-color: var(--bad); color: var(--muted); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.actions button { flex: 1 1 auto; }

/* ---------- soupeři ---------- */

.opp-list { display: flex; flex-direction: column; gap: 8px; }
.opp {
  background: var(--panel); border: 2px solid var(--line); padding: 8px 10px;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px;
}
.opp .oname { font-family: var(--px); font-size: 10px; color: var(--text); }
/* elitní nepřítel: zlaté jméno a rámeček, řádek s vlastnostmi */
.opp.elite { border-color: #d9a441; box-shadow: inset 0 0 0 1px rgba(255, 210, 90, 0.25); }
.opp.elite .oname { color: #ffd25a; }
.opp .osub.elite-fx { color: #e8c46a; }
.opp .osub { color: var(--muted); font-size: 18px; }
.opp .obtns { grid-row: 1 / span 4; grid-column: 2; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.opp .obtns button { font-size: 18px; padding: 3px 10px; }
.opp .obtns button.primary { font-size: 9px; padding: 8px 10px; }
.mini-apt { height: 8px; position: relative; background: linear-gradient(90deg, #d9a24a, #3a3328 50%, #a77cff); border: 1px solid #000; }
.mini-apt i { position: absolute; top: -3px; width: 4px; height: 12px; margin-left: -2px; background: var(--text); }
.empty-note { color: var(--muted); font-size: 18px; }

/* testovací server */
.srv { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.srv-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.srv-row input { flex: 1 1 140px; min-width: 0; }
#srvInfo { flex: 1 1 100%; color: var(--text); font-size: 18px; }
.srv-board { width: 100%; border-collapse: collapse; font-size: 18px; }
.srv-board th, .srv-board td { border-bottom: 1px solid var(--line); padding: 2px 6px; text-align: left; }
.srv-board th { color: var(--muted); font-weight: normal; }
.srv-board tr.me td { color: var(--brass); }
.srv-board tr.gap td { color: var(--muted); text-align: center; padding: 0; }
.srv-board tr.click { cursor: pointer; }
.srv-board tr.click:hover td { background: var(--panel-2); }

/* ---------- výběr předmětu / modální okna ---------- */

.sheet-backdrop {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  background: var(--bg); border-top: 3px solid var(--brass); padding: 12px 14px 20px;
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; position: sticky; top: -12px; background: var(--bg); padding: 4px 0; z-index: 1; }
.close { font-size: 18px; padding: 3px 10px; }
.help { color: var(--muted); font-size: 18px; margin: 4px 0 10px; }
.help.small { font-size: 17px; }
.help.warn { color: var(--bad); }

.pick-list { display: flex; flex-direction: column; gap: 6px; }
.pick {
  display: grid; grid-template-columns: 1fr auto; text-align: left; gap: 2px 8px;
  padding: 6px 10px 6px 14px; position: relative;
}
.pick::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--line); }
.pick.tech::before { background: var(--tech); }
.pick.magic::before { background: var(--magic); }
/* předmět nad úrovní postavy: jde mít, nasadit až na jeho úrovni */
.pick.locked, .inv-item.locked { opacity: 0.55; }
.pick .plock { color: var(--bad); font-size: 0.85em; }
.pick.neutral::before { background: var(--neutral); }
.pick.current { border-color: var(--brass); }
/* výběr do slotu: řádek se jménem, staty po rozbalení */
div.pick { background: var(--panel-2); border: 2px solid var(--line); border-bottom-width: 4px; }
div.pick.current { border-color: var(--brass); }
.pick .pick-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px;
  background: none; border: none; padding: 0; text-align: left; }
.pick .pick-head .pname { margin-right: auto; }
.pick .pick-head:active:not(:disabled) { transform: none; }
.pick.compact .pname { font-size: 19px; }
.pick .pick-body { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.pick .pick-body .pick-equip { grid-column: 1 / -1; }
.pick .pname { font-size: 21px; }
.pick .pfam { font-size: 16px; color: var(--muted); text-align: right; }
/* staty předmětu v mřížce: popisek nad hodnotou */
.pick .pgrid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 4px; }
.pick .pc { background: var(--panel); padding: 2px 6px; display: flex; flex-direction: column; min-width: 0; }
.pick .pc.wide { grid-column: 1 / -1; }
.pick .pc .pl { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick .pc .pv { font-size: 18px; color: var(--text); }
.pick .pc.warn .pv { color: var(--bad); }
.pick .pc.d-up .pv { color: #8fd17a; }
.pick .pc.d-down .pv { color: #e07a6a; }
.pick .pflavor { grid-column: 1 / -1; margin-top: 4px; font-style: italic; color: var(--muted, #a89e8c); }
.pick .pres { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 4px; }
.pick .pres .res { padding: 2px; }
.pick .pres .rn { font-size: 13px; }
.pick .pres .rv { font-size: 17px; }
.pick .pres .zero .rv { color: var(--muted); }
.pick .pres .d-up .rv { color: #8fd17a; }
.pick .pres .d-down .rv { color: #e07a6a; }
.pick .pchange { grid-column: 1 / -1; border-top: 1px dashed var(--line); padding-top: 4px; margin-top: 6px; }
.pick .pchange .plabel { color: var(--muted); font-size: 15px; }
.d-up { color: var(--good); }
.kv.good .num { color: var(--good); }   /* bonus celé sady */
.d-down { color: var(--bad); }

.rules { display: flex; flex-direction: column; gap: 6px; }
.rule { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 6px; align-items: center; background: var(--panel); padding: 6px; }
.rule .rif { color: var(--muted); font-size: 17px; }
.rule .rcond { display: flex; gap: 4px; }
.rule .rcond select { flex: 1; }
.rule .rcond input { width: 54px; }
.rule .ruse { grid-column: 2; display: flex; gap: 6px; align-items: center; }
.rule .ruse select { flex: 1; }
.rule .rbtns { grid-row: 1 / span 2; grid-column: 3; display: flex; flex-direction: column; gap: 2px; }
.rule .rbtns button { padding: 0 8px; font-size: 18px; }
.rule.invalid { box-shadow: inset 0 0 0 2px var(--bad); }
.rule .rwarn { grid-column: 1 / -1; color: var(--bad); font-size: 16px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 40;
  background: var(--panel-2); border: 2px solid var(--brass); padding: 8px 14px;
}

/* příchozí výzva na přátelský souboj: lišta nahoře uprostřed, nad arénou i 3D scénou */
.friendly-ask {
  position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100vw - 32px); top: 12px; z-index: 46;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px;
  background: var(--panel-2); border: 2px solid var(--brass); box-shadow: 0 4px 14px #000a;
}
.friendly-ask[hidden] { display: none; }

/* rozdělané rybaření: houpající se prut s rybou dole uprostřed (klik = rybářské pole ve Světě) */
/* na střed bez transform (stisk tlačítka transform přepisuje a odskočilo by) */
.fish-badge {
  position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: 24px; z-index: 8;
  display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 6px;
  background: var(--panel-2); border: 2px solid var(--brass); box-shadow: 0 4px 14px #000a;
}
.fish-badge img { width: 40px; height: 40px; image-rendering: pixelated; transform-origin: 15% 90%;
                  animation: fish-bob 1.8s ease-in-out infinite; }
.fish-badge b { font-family: var(--px); font-size: 11px; font-weight: normal; color: var(--brass); }
@keyframes fish-bob {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50% { transform: rotate(5deg) translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .fish-badge img { animation: none; } }

/* ---------- souboj ---------- */

.battle {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  background: var(--bg);
  max-width: 560px; margin: 0 auto;
}
.bars { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; padding: 8px 10px; align-items: start; background: #0e0c0a; border-bottom: 2px solid var(--line); }
.fighter .fname { font-family: var(--px); font-size: 8px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fighter.right { text-align: right; }
.bar { position: relative; height: 14px; background: #000; border: 2px solid var(--line); margin-bottom: 3px; }
.bar.mana { height: 9px; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; transition: width 0.25s; }
.bar.hp i { background: linear-gradient(#e85a4e, #a8302a); }
.bar.mana i { background: linear-gradient(#5aa0f0, #2c5aa8); }
.right .bar i { left: auto; right: 0; }
.bar b { position: absolute; inset: 0; font-family: var(--px); font-size: 7px; font-weight: normal; display: flex; align-items: center; justify-content: center; text-shadow: 1px 1px 0 #000; }
.bar.mana b { font-size: 6px; }
.fighter .status { font-size: 16px; min-height: 18px; color: var(--poison); display: flex; flex-wrap: wrap; gap: 2px 10px; }
.fighter .status .dot.fire { color: var(--fire); }
.fighter .status .dot.physical { color: var(--bad); }
.fighter .status .dot.electric { color: var(--electric); }
.fighter .status .dot.arcane { color: var(--arcane); }
.fighter .status .shield { color: var(--shield); }
.fighter .status .fx { color: var(--brass); }
.fighter.right .status { justify-content: flex-end; }
.fighter .status .ap { color: var(--muted, #a89a86); }
.turn { font-family: var(--px); font-size: 8px; color: var(--brass); padding-top: 14px; text-align: center; white-space: nowrap; }

.arena { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.arena canvas { display: block; image-rendering: pixelated; }

.fx-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* pustina: jemný zrnitý šum přes obraz (radiace); snímky šumu střídá aréna (ArenaView.loop), CSS jen pomalu pulzuje */
.fx-overlay .radiation { position: absolute; inset: 0; opacity: 0.1;
  background-color: rgba(90, 200, 60, 0.25); animation: radPulse 6s ease-in-out infinite; }
@keyframes radPulse { 0%, 100% { opacity: 0.07; } 50% { opacity: 0.12; } }
@media (prefers-reduced-motion: reduce) { .fx-overlay .radiation { animation: none; } }
.floater {
  position: absolute; left: 0; top: 0;
  font-family: var(--px); font-size: 16px; white-space: nowrap;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000;
  color: var(--physical);
}
.floater.small { font-size: 9px; color: var(--brass); }
.floater.miss { color: #9a9a9a; font-size: 12px; }
.floater.heal { color: #7cff9a; }
.floater.arcane { color: var(--arcane); }
.floater.electric { color: var(--electric); }
.floater.shield { color: var(--shield); }
.floater.fire { color: var(--fire); }
.floater.poison { color: var(--poison); }
.floater.self { color: var(--bad); }
.floater.big { font-size: 22px; }
/* level up nad hráčem (ArenaView.levelUp) */
.floater.levelup { font-size: 26px; color: #ffe08a; text-align: center;
  text-shadow: 0 0 10px #ffb030, 0 0 4px #ffd060, 2px 2px 0 #000, -1px -1px 0 #000; }
.floater.levelup .lvl { display: block; margin-top: 4px; font-size: 12px; color: #fff3c4; }

.battle-controls { padding: 8px 10px 10px; background: #0e0c0a; border-top: 2px solid var(--line); }
/* Speed bar hráče nad schopnostmi */
.speedbar { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin-bottom: 6px; }
.speedbar .sb-label, .speedbar .sb-num { font-family: var(--px); font-size: 8px; color: var(--speed); white-space: nowrap; }
.speedbar .sb-num { color: var(--text); min-width: 7ch; text-align: right; }
.speedbar .sb-track { position: relative; height: 12px; background: #000; border: 2px solid var(--line); overflow: hidden; }
.speedbar .sb-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#f0d36a, #b8902a); transition: width 0.25s; }
.speedbar .sb-cost { position: absolute; top: 0; bottom: 0; width: 0; background: rgba(255, 255, 255, 0.55); }
.speedbar .sb-cost.short { background: rgba(224, 90, 78, 0.7); }
.speedbar .sb-tick { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: #e8dcc4; opacity: 0.6; }
/* lišta schopností: jen ikonky; popis nad lištou */
.skillbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.skill { position: relative; padding: 2px; border-bottom-width: 4px; touch-action: manipulation; }
.skill .sk-icon { width: 56px; height: 56px; }
.skill.sel { outline: 2px solid #f2ead8; outline-offset: 1px; }
.skill.off .sk-icon { filter: grayscale(0.85) brightness(0.55); }
.skill .cd {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--px); font-size: 16px; color: #f2ead8; text-shadow: 2px 2px 0 #000; pointer-events: none;
}
.skill.autocast { box-shadow: 0 0 0 2px var(--brass) inset; }
.skill.autocast::after {
  content: "AUTO"; position: absolute; top: -7px; right: -4px;
  font-family: var(--px); font-size: 6px; background: var(--brass); color: #000; padding: 2px 3px;
}
.battle-controls { position: relative; }
.skill-tip {
  --sc: #9a8f80;
  position: absolute; left: 10px; right: 10px; bottom: calc(100% + 6px); z-index: 4; pointer-events: none;
  background: rgba(14, 12, 10, 0.95); border: 2px solid var(--sc); padding: 6px 10px;
}
.skill-tip .tip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.skill-tip .tip-name { font-size: 20px; color: #f2ead8; }
.skill-tip .tip-school { font-family: var(--px); font-size: 8px; color: var(--sc); white-space: nowrap; }
.skill-tip .tip-stats { font-family: var(--px); font-size: 8px; color: var(--muted); margin-top: 4px; line-height: 1.6; }
.skill-tip .tip-formula { font-size: 15px; color: #e8c47a; margin-top: 2px; }
.skill-tip .tip-desc { font-size: 16px; color: var(--text); margin-top: 2px; }
.skill-tip .tip-warn { font-size: 16px; color: var(--bad); margin-top: 2px; }
.ctrl-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.ctrl-row button { font-size: 18px; padding: 4px; }
.toggle.on { background: var(--brass); color: #1b130a; border-color: #6b4a1c; }
.battle-controls .hint { color: var(--muted); font-size: 15px; text-align: center; margin-top: 6px; }

.result { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); z-index: 3; }
.result-box { background: var(--bg); border: 3px solid var(--brass); padding: 20px 22px; text-align: center; min-width: 260px; }
.result-title { font-family: var(--px); font-size: 22px; color: var(--brass); text-shadow: 3px 3px 0 #000; }
.result-title.lose { color: var(--bad); }
.result-reason { color: var(--muted); margin-top: 10px; font-size: 19px; }

@media (max-width: 380px) {
  .topbar h1 { font-size: 10px; }
}

/* ladění balancu */
.bal-source { color: var(--muted); font-size: 16px; margin: 6px 0; word-break: break-all; }
.bal-wrap { overflow-x: auto; }
table.bal { border-collapse: collapse; margin: 4px 0 12px; font-size: 17px; white-space: nowrap; }
table.bal th, table.bal td { border: 1px solid #3a322a; padding: 2px 8px; text-align: left; }
table.bal th { color: var(--muted); font-weight: normal; }
table.bal td.r { text-align: right; }
table.bal td.good { color: #8fd17a; }
table.bal td.bad { color: #e07a6a; }
/* zamčená záložka v menu (companion do úrovně companionLevel): klik ukáže jen hlášku */
.tabs button.locked { opacity: 0.45; }

/* záložky postavy: jen jedna část naráz */
.char-tabs { margin: 8px 0 10px; }
.char-tabs button.active { border-color: var(--brass); color: var(--brass); }
/* záložka Battle: podzáložky, PvP sestavy po úrovních */
.battle-tabs { margin: 0 0 12px; }
.battle-tabs button.on { border-color: var(--brass); color: var(--brass); }
#pvpBox { max-width: 760px; }
/* ranked: karta nad sestavami */
.ranked-card { margin-bottom: 14px; gap: 4px; }
.ranked-card p { margin: 0; }
.ranked-card .inv-filter { margin: 0; }
.ranked-level { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ranked-card > button { margin: 2px 0 0; align-self: flex-start; }
.ranked-card .ranked-stats { margin: 0 0 4px; }
.ranked-wait { color: var(--brass); }
.ranked-warn { color: #e07a6a; }
.ranked-lower { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.board-kinds { margin-bottom: 8px; }
.pvp-row.locked { opacity: 0.55; }
.pvp-row .fbtns { display: flex; flex-wrap: wrap; gap: 6px; }
/* hledání v zušlechtění (pracovní stůl) */
.bench-search { width: 100%; box-sizing: border-box; margin: 4px 0 8px; }
/* úprava PvP sestavy na obrazovce postavy: lišta nad postavou */
.pvp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
           margin-bottom: 10px; padding: 8px 10px; background: var(--panel-2); border: 2px solid var(--brass); }
.pvp-bar[hidden] { display: none; }
.pvp-bar .pvp-info { display: flex; flex-direction: column; gap: 2px; }
.pvp-bar .pvp-info b { color: var(--brass); }
.pvp-bar .fbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.char-tabs .ctab-badge { margin-left: 4px; }
.char-tabs .ctab-badge.free { color: #8fd17a; }
.char-tabs .ctab-badge.warn { color: #e07a6a; }
.char-panel > h2:first-child { margin-top: 4px; }
.points-left { margin: 4px 0 8px; color: var(--muted); }
/* řádek s body a malým tlačítkem „i“, které ukáže nápovědu */
.points-row { display: flex; align-items: center; gap: 8px; }
.points-row h2 { margin: 6px 0 8px; }
.info-btn { width: 24px; height: 24px; min-width: 0; padding: 0; border-radius: 50%; font-weight: bold; line-height: 1; }
.info-btn.on { border-color: var(--brass); color: var(--brass); }
.points-left.free { color: #8fd17a; }
.points-left.warn { color: #e07a6a; }
/* zákaz schopností v simulaci */
.bal-skills { border: 1px solid #3a322a; padding: 4px 8px; margin: 6px 0; }
.bal-skills summary { cursor: pointer; color: var(--brass); }
.bal-skills .bal-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 6px 0; }
.bal-skills .bal-label { min-width: 110px; font-size: 16px; color: var(--muted); }
.bal-skills label.bal-who { font-size: 16px; display: inline-flex; align-items: center; gap: 4px; }
.bal-skill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; font-size: 16px; }
.bal-skill .sk-icon { width: 30px; height: 30px; }
.bal-skill .sk-icon img { left: 3px; top: 3px; width: calc(100% - 6px); height: calc(100% - 6px); }
.bal-skill .sk-icon .tier { display: none; }
.bal-skill.off { border-color: #e07a6a; color: #e07a6a; text-decoration: line-through; }
.bal-skill.off .sk-icon { filter: grayscale(0.85) brightness(0.55); }
.bal-off { color: #e07a6a; font-size: 16px; margin: 6px 0; }

/* schopnosti: záložky škol a karty */
/* horní řada: rodiny jako záložky; dolní řada: školy vybrané rodiny v rámečku její barvy */
.school-tabs { margin: 6px 0 8px; }
.school-tabs .family-row { display: flex; flex-wrap: wrap; gap: 4px; }
.school-tabs .family-row button { padding: 3px 10px; font-size: 18px; border-bottom-width: 0; }
.school-tabs .family-row button.active { color: var(--bg); }
.school-tabs .family-row button.magic.active { background: #6f76c8; border-color: #6f76c8; }
.school-tabs .family-row button.tech.active { background: var(--brass); border-color: var(--brass); }
.school-tabs .family-row button.neutral.active { background: #9a8f80; border-color: #9a8f80; }
.school-tabs .school-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 10px; border: 2px solid #3a322a; background: var(--panel); }
.school-tabs .school-row.magic { border-color: #6f76c8; }
.school-tabs .school-row.tech { border-color: var(--brass); }
.school-tabs .school-row.neutral { border-color: #9a8f80; }
/* orby škol: kulatá tlačítka v barvě školy s bílým glyfem, nevybrané jsou ztlumené */
.school-tabs .orbs { display: flex; flex-wrap: wrap; gap: 12px 12px; padding: 3px; }
.school-tabs .orb {
  --sc: #9a8f80;
  position: relative; width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%;
  /* lesklá koule: odlesk vlevo nahoře, světlejší střed, tmavý okraj, tenký prstenec kolem */
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.55) 0 10%, rgba(255, 255, 255, 0) 28%),
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--sc) 80%, #fff) 0%, var(--sc) 50%,
                    color-mix(in srgb, var(--sc) 45%, #000) 100%);
  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.25),
              0 0 0 2px #14110e, 0 0 0 3px color-mix(in srgb, var(--sc) 45%, #000), 0 3px 0 2px #000;
  filter: saturate(0.5) brightness(0.72);
}
.school-tabs .orb:hover:not(:disabled) { filter: saturate(0.8) brightness(0.9); }
.school-tabs .orb:active:not(:disabled) { transform: translateY(1px); border-bottom-width: 0; }
.school-tabs .orb.active { filter: none; outline: 2px solid #f2ead8; outline-offset: 3px; }
.school-tabs .orb img { display: block; width: 28px; height: 28px; margin: auto; image-rendering: pixelated; }
/* ikonky ze souborů (icons/…) jsou ve vyšším rozlišení: vyhlazovat, ne zvětšovat po pixelech */
.school-tabs .orb img.hq, .sk-icon img.hq { image-rendering: auto; }
.school-tabs .orb img.hq { width: 33px; height: 33px; }
.school-tabs .orb .count {
  position: absolute; right: -5px; bottom: -5px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px;
  background: #14110e; border: 1px solid var(--sc); color: #f2ead8; font-family: var(--px); font-size: 7px; line-height: 14px;
}
/* na úzkém displeji menší orby, aby se 8 magických škol vešlo do jedné řady */
@media (max-width: 480px) {
  .school-tabs .orbs { display: grid; grid-template-columns: repeat(8, minmax(0, 36px)); gap: 10px 8px; }
  .school-tabs .orb { width: 100%; height: auto; aspect-ratio: 1; }
  .school-tabs .orb img { width: 70%; height: 70%; }
  .school-tabs .orb img.hq { width: 83%; height: 83%; }
}
/* jméno vybrané školy vždy pod orby (škol je víc, než se vejde vedle sebe) */
.school-tabs .school-name { display: flex; align-items: baseline; gap: 10px; flex-basis: 100%; line-height: 1.1; margin-top: 6px; }
.school-tabs .school-name .sn { color: var(--sc); font-family: var(--px); font-size: 11px; }
.school-tabs .school-name .ss { color: var(--muted); font-size: 15px; }

/* ikonka skillu: rámeček v barvě školy, římská číslice pořadí vlevo nahoře */
.sk-icon {
  --sc: #9a8f80;
  position: relative; display: block; flex: none; width: 52px; height: 52px;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--sc) 35%, #1a1612), #14110e 78%);
  border: 2px solid var(--sc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.sk-icon.plain { --sc: #6b6158; }
.sk-icon img { position: absolute; left: 6px; top: 6px; width: calc(100% - 12px); height: calc(100% - 12px); image-rendering: pixelated; }
.sk-icon .tier {
  position: absolute; left: 3px; top: 3px; padding: 2px 2px 1px; font-family: var(--px); font-size: 7px; line-height: 1;
  color: #f2ead8; background: rgba(10, 8, 6, 0.75); border-radius: 2px;
}
.ability-list { display: flex; flex-direction: column; gap: 6px; }
.ability { border: 1px solid #3a322a; padding: 6px 8px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.ability > .sk-icon { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
.ability.learned { border-color: var(--brass); }
.ability.broken { border-color: var(--bad); }
.ability .ab-head { display: flex; gap: 8px; align-items: baseline; }
.ability .ab-name { font-size: 19px; }
.ability .ab-head { grid-column: 2; }
.ability .ab-desc { grid-column: 2; color: var(--text); font-size: 16px; }
.ability .ab-formula { grid-column: 2; color: #e8c47a; font-size: 15px; }
.ability .ab-info { grid-column: 2; display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--muted); font-size: 15px; }
.ability .ab-info .warn { color: var(--bad); }
.ability > button { grid-column: 3; grid-row: 1 / span 3; padding: 4px 10px; }

/* prototyp arény XvX přes celou obrazovku: scéna a panel (na šířku vpravo, na výšku dole) */
body.arena-open { overflow: hidden; }
.arena-full { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: #0e0c0a; }
.arena-full[hidden] { display: none; }
.arena-stage { position: relative; flex: 1; min-height: 0; }
.arena-box { position: absolute; inset: 0; overflow: hidden; background: #1d1813; }
.arena-box canvas { display: block; }
.arena-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px; pointer-events: none; font-family: var(--px); font-size: 9px; color: var(--brass); text-shadow: 0 2px 0 #000; }
.arena-top button { pointer-events: auto; font-size: 16px; padding: 2px 10px; }
.arena-top .arena-top-btns { display: flex; gap: 6px; }
.arena-result { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-family: var(--px); font-size: 22px;
  color: var(--brass); text-shadow: 0 3px 0 #000; pointer-events: none; }
.arena-panel { padding: 8px 10px 10px; border-top: 2px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.arena-panel .ap-name { font-family: var(--px); font-size: 9px; margin-bottom: 4px; }
.arena-panel .ap-pick { color: var(--muted); font-size: 17px; }
.arena-panel .ap-speed { color: var(--brass); font-size: 17px; }
.arena-panel .speedbar { margin-bottom: 0; }
.arena-panel .speedbar[hidden] { display: none; }
/* text pod myší nad lištou (šance na zásah, cena přesunu): pevná výška (nejvýš 3 řádky), jinak by měnící se text
   posouval lištu a myš by z tlačítka sjížděla */
.arena-panel .ap-hover { color: #e8c47a; font-size: 16px; line-height: 1.25; height: 3.75em; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
/* jméno postavy a tlačítko „i“ s nápovědou k ovládání */
.arena-panel .ap-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.arena-panel .ap-head .info-btn { width: 20px; height: 20px; font-size: 13px; flex: none; }
.arena-panel .ap-help { margin: 4px 0 0; }
/* popis schopnosti v panelu arény: ve sloupci, ne nad lištou jako v souboji 1 na 1 */
/* vlevo nahoře v aréně: životy a mana hráče (mosazný okraj) a pod nimi menší companion */
.arena-me { position: absolute; top: 30px; left: 8px; width: min(200px, 40%); display: flex; flex-direction: column; gap: 4px;
  pointer-events: none; z-index: 2; }
.arena-me .am-unit { background: rgba(14, 12, 10, 0.72); border: 2px solid var(--line); padding: 3px 5px 0; }
.arena-me .am-unit.me { border-color: var(--brass); }
.arena-me .am-unit.dead { opacity: 0.45; }
.arena-me .am-name { font-family: var(--px); font-size: 7px; line-height: 12px; color: #f2ead8; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arena-me .am-unit:not(.me) { width: 80%; }
.arena-me .am-unit:not(.me) .bar.hp { height: 10px; }
.arena-me .am-unit:not(.me) .bar b { font-size: 6px; }
.arena-me .ac-lvl { color: #9fd0ff; }
/* odolnosti na kartě: symbol druhu poškození v jeho barvě a procenta */
.arena-card .ac-res { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.arena-card .res-chip { display: inline-flex; align-items: center; gap: 3px; color: var(--text); }
.arena-card .res-chip .ni { width: 12px; height: 12px; background-color: #d8d0c0; }
.arena-card .res-chip.fire .ni { background-color: var(--fire); }
.arena-card .res-chip.electric .ni { background-color: var(--electric); }
.arena-card .res-chip.arcane .ni { background-color: var(--arcane); }
.arena-card .res-chip.poison .ni { background-color: var(--poison); }
/* popis schopnosti v aréně: kartička dole uprostřed plochy (panel se pak nehýbe) */
.arena-stage .arena-tip { left: 50%; right: auto; top: auto; bottom: 10px; transform: translateX(-50%); width: min(440px, calc(100% - 20px)); }
.arena-stage .arena-tip[hidden] { display: none; }
.arena-panel .skillbar { justify-content: flex-start; gap: 6px; }
.arena-panel .skill .sk-icon { width: 46px; height: 46px; }
.arena-panel .skill .sk-cost { position: absolute; right: 2px; bottom: 1px; font-family: var(--px); font-size: 7px; color: #f2ead8;
  text-shadow: 0 1px 0 #000, 1px 0 0 #000; }
.arena-panel .ap-control { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.arena-panel .ap-control .seg { font-size: 15px; padding: 4px 2px; border-right-width: 0; }
.arena-panel .ap-control .seg:last-child { border-right-width: 2px; }
.arena-panel .ap-control .seg.active { background: var(--brass); color: var(--bg); border-color: var(--brass); }
.arena-panel .ap-next { font-size: 16px; padding: 4px 8px; align-self: flex-start; }
.arena-panel .ctrl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.arena-panel .ctrl-row button { font-size: 18px; padding: 8px 6px; }
@media (orientation: landscape) and (min-width: 560px) {
  .arena-full { flex-direction: row; }
  .arena-panel { width: clamp(220px, 28vw, 320px); border-top: none; border-left: 2px solid var(--line); overflow-y: auto; }
  .arena-panel .ctrl-row { margin-top: auto; }
  /* panel souboje: aspoň 4 schopnosti vedle sebe (i s posuvníkem) */
  #arenaFull .arena-panel { width: clamp(272px, 30vw, 340px); }
}
/* tenký posuvník v panelech arény a 3D scén (široký by ubral místo ikonkám) */
.arena-panel { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
/* karta postavy nahoře uprostřed arény (najetí myší, na telefonu podržení prstu) */
/* karta postavy vpravo nahoře pod tlačítky (vlevo nahoře jsou životy hráče a companiona) */
.arena-card { position: absolute; top: 40px; right: 8px; width: min(320px, calc(58% - 16px));
  padding: 8px 10px; background: rgba(14, 12, 10, 0.92); border: 2px solid var(--line); pointer-events: none; z-index: 2; }
.arena-card[hidden] { display: none; }
.arena-card.side-A { border-color: #4f86a8; }
.arena-card.side-B { border-color: #a8443a; }
.arena-card .ac-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.arena-card .ac-name { font-family: var(--px); font-size: 9px; color: #f2ead8; }
.arena-card .ac-name.elite { color: #ffd25a; }
.arena-card .ac-name.boss { color: #a66bff; text-shadow: 0 0 6px rgba(120, 60, 220, 0.6); }
.arena-card .ac-lvl { color: #9fd0ff; text-shadow: none; }   /* úroveň za jménem */
/* obsah truhly po bossovi dungeonu (nad hláškou o výhře dole, ať nezakryje spodek a OK) */
.arena-loot { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); width: min(340px, calc(100% - 24px));
  padding: 10px 12px; background: rgba(14, 12, 10, 0.94); border: 2px solid #d8b048; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.arena-loot[hidden] { display: none; }
.arena-loot .al-head { font-family: var(--px); font-size: 10px; color: #ffd36a; text-align: center; }
.arena-loot .al-row { display: flex; align-items: center; gap: 8px; }
.arena-loot .al-gold { color: #ffd36a; justify-content: center; }
.arena-loot .al-name { flex: 1; color: #f2ead8; }
.arena-loot .al-row.rare .al-name { color: #5aa9ff; text-shadow: 0 0 6px rgba(70, 150, 255, 0.45); }
.arena-loot .al-sub { font-size: 12px; color: #a89b84; }
.arena-loot .al-ok { align-self: center; min-width: 80px; }
/* portál do dungeonu (aréna po výhře, panel pole) */
button.portal { border-color: #8a5cf0; color: #e3d4ff; background: #2a1d45; }
button.portal:hover:not(:disabled) { background: #3a2760; }
/* Těžit: rozsvícené, dokud je co kopat; bez rudy zhasne (disabled) */
button.mine:not(:disabled) { border-color: #c98a3a; color: #ffe2b8; background: #3a2a16; }
button.mine:hover:not(:disabled) { background: #4c371c; }
.arena-card .ac-status .fx.elite { color: #ffd25a; }
.arena-card .ac-status .fx.boss { color: #a66bff; }
.arena-card .ac-status .fx.bad { color: var(--bad); }
/* kouzlo na dluh (málo many): jde použít, ale s varováním */
#arenaSkills .skill.overdraw { border-color: #8a4fd6; box-shadow: inset 0 0 0 2px rgba(138, 79, 214, 0.45); }.arena-card .ac-weapon { font-size: 15px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arena-card .ac-status { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 15px; margin-top: 2px; }
.arena-card .ac-status .ap { color: var(--speed); }
.arena-card .ac-status .fx { color: var(--brass); }
.arena-card .ac-status .dot { color: var(--poison); }
.arena-card .ac-status .dot.fire { color: var(--fire); }
.arena-card .ac-status .dot.physical { color: var(--bad); }
.arena-card .ac-status .dot.electric { color: var(--electric); }
.arena-card .ac-status .dot.arcane { color: var(--arcane); }
.arena-card .ac-res { font-size: 14px; color: var(--muted); margin-top: 2px; }

/* jmenovka nad postavou: zbylý Speed a životy */
.arena-tag { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; pointer-events: none; }
.arena-tag b { font-family: var(--px); font-size: 7px; color: #f2ead8; text-shadow: 0 1px 0 #000, 1px 0 0 #000; }
.arena-tag .hp { display: block; width: 34px; height: 5px; background: #000; border: 1px solid #000; }
.arena-tag .hp i { display: block; height: 100%; background: #e85a4e; }
.arena-tag.side-A .hp i { background: #6fd3ff; }
.arena-tag.sel b { color: var(--brass); }
/* nastavení XvX v záložce Aréna: velikost bitvy a týmy */
.arena-setup { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 12px; }
.arena-setup .as-size { display: grid; grid-template-columns: repeat(4, 1fr); }
.arena-setup .as-size .seg { font-size: 15px; padding: 5px 2px; border-right-width: 0; }
.arena-setup .as-size .seg:last-child { border-right-width: 2px; }
.arena-setup .as-size .seg.active { background: var(--brass); color: var(--bg); border-color: var(--brass); }
.arena-setup .as-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.arena-setup h3 { margin: 0 0 4px; }
.arena-setup .as-list { display: flex; flex-direction: column; gap: 4px; }
.arena-setup .as-list select { width: 100%; }
.arena-setup .as-me { padding: 5px 6px; border: 2px solid var(--line); color: var(--brass); font-size: 15px; }
/* hořící, otrávená nebo krvácející postava: barevný rámeček kolem životů */
.arena-tag.dot-physical .hp { border-color: var(--bad); }
.arena-tag.dot-poison .hp { border-color: var(--poison); }
.arena-tag.dot-fire .hp { border-color: var(--fire); }

/* plášť v editoru postavy: zaškrtnutí, barva a id textury na jednom řádku */
.cape-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cape-row input:disabled { opacity: 0.45; }
.cape-row .help { margin: 0; }

/* ---------- kostra aplikace: menu vlevo (široké okno) nebo lišta dole (telefon, úzké okno) ---------- */

.shell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100%; }
.content { min-width: 0; padding-bottom: 78px; }          /* místo pro lištu dole */
main { max-width: 1320px; margin: 0 auto; }
.mob-account { flex: 1; min-width: 0; text-align: right; color: var(--muted); font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
/* telefon: energie celá vždycky, goldy a úroveň za ní se při málo místa ořežou trojtečkou */
.mob-account .st-en { flex: none; color: var(--text); }
/* offline: tlačítko zpátky na přihlášení */
.mob-account .mob-offline { padding: 2px 8px; font-size: inherit; color: var(--muted); }
.mob-account .st-rest { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mob-account .st-pc { display: none; }

.sidenav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; flex-wrap: nowrap; justify-content: stretch; gap: 4px;
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  background: linear-gradient(#1d1712, #14110e); border-top: 2px solid var(--line);
}
.sidenav .brand, .sidenav .nav-foot { display: none; }
.sidenav button[data-tab] {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 2px; font-size: 16px; border-bottom-width: 2px; white-space: nowrap; overflow: hidden;
}
.sidenav .ni { font-style: normal; font-size: 20px; line-height: 1.1; }
/* telefon: krátké popisky (ns místo nl), odznak v pravém horním rohu tlačítka */
.sidenav .nl { display: none; }
.sidenav button[data-tab] { position: relative; }
.sidenav button[data-tab] .nav-badge { position: absolute; top: 1px; right: 1px; min-width: 14px; padding: 0 3px; font-size: 11px; line-height: 14px; }
@media (max-width: 480px) {
  .sidenav button[data-tab] { font-size: 13px; padding: 4px 1px; }
  .topbar h1 { font-size: 10px; }
  .mob-account { font-size: 15px; }
  /* horní lišta na telefonu: menší mezery a tlačítka, ať se vejde energie */
  .topbar { gap: 6px; padding: 8px; }
  .topbar .lang { padding: 5px 6px; }
}
/* pixelové ikonky menu: maska v barvě písma, označená záložka je mosazná */
.ni[data-icon] { display: inline-block; width: 20px; height: 20px; flex: none; background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.sidenav .lang { font-size: 9px; padding: 6px 8px; }
.sidenav button.active { border-color: var(--brass); color: var(--brass); }
.toast, .fish-badge { bottom: 88px; }

/* postava, soupeři, žebříček: na úzkém okně pod sebou */
.char-grid, .rank-grid { display: block; }

/* sbalovací sekce postavy (staty, schopnosti) */
h2.fold { cursor: pointer; user-select: none; -webkit-user-select: none; display: flex; align-items: baseline; gap: 6px; }
h2.fold:hover span { color: var(--text); }
.fold-arrow { font-style: normal; width: 12px; display: inline-block; }
.fold-arrow::before { content: "▾"; font-family: var(--vt); font-size: 20px; }
h2.fold.closed .fold-arrow::before { content: "▸"; }
h2 small.free { color: var(--brass); }

/* žebříček a profil */
.profile { display: flex; gap: 10px 22px; flex-wrap: wrap; align-items: baseline; background: var(--panel); border: 2px solid var(--line); padding: 12px 14px; margin-top: 10px; }
.profile .pname { font-family: var(--px); font-size: 13px; color: var(--brass); flex: 1 1 100%; }
.profile .pstat { color: var(--muted); font-size: 19px; }
.profile .pstat b { color: var(--text); font-weight: normal; font-family: var(--px); font-size: 12px; margin-left: 4px; }
.srv-board td.win { color: var(--good); }
.srv-board td.loss { color: var(--bad); }
.srv-board td.draw { color: var(--muted); }
.srv-board td.small { color: var(--muted); font-size: 16px; }

/* přihlášení */
.login { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px;
         background: radial-gradient(ellipse at top, #2a2018, var(--bg) 70%); }
.login-card { width: 100%; max-width: 420px; background: var(--panel); border: 3px solid var(--brass); padding: 24px 22px;
              display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 40px #000a; }
.login-card h1 { font-size: 18px; color: var(--brass); text-align: center; margin: 0 0 4px; text-shadow: 3px 3px 0 #000; }
.login-sub { color: var(--muted); text-align: center; margin: 0 0 6px; font-size: 19px; }
.login-field { display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: 17px; }
.login-field input, .login-server input { color: var(--text); font-size: 20px; width: 100%; }
.login-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.login-msg { min-height: 22px; color: var(--bad); text-align: center; font-size: 18px; }
.login-msg.wait { color: var(--muted); }
.login-server summary { color: var(--muted); cursor: pointer; font-size: 17px; }
.login-server input { margin-top: 6px; }
.login-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* široké okno (počítač): menu vlevo, obsah přes celou šířku, postava ve dvou sloupcích */
@media (min-width: 900px) {
  .shell { grid-template-columns: 220px minmax(0, 1fr); }
  .sidenav {
    position: sticky; top: 0; height: 100vh; flex-direction: column; justify-content: flex-start;
    border-top: 0; border-right: 2px solid var(--line); padding: 16px 12px; gap: 6px;
  }
  .sidenav .brand { display: block; font-family: var(--px); font-size: 14px; color: var(--brass); text-shadow: 2px 2px 0 #000; margin: 4px 4px 18px; }
  .sidenav button[data-tab] { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 10px; font-size: 21px; padding: 8px 12px; border-bottom-width: 4px; }
  .sidenav .nl { display: inline; }
  .sidenav .ns { display: none; }
  .sidenav button[data-tab] .nav-badge { position: static; min-width: 20px; padding: 0 6px; font-size: 14px; line-height: 20px; }
  .sidenav .nav-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: auto; }
  /* horní lišta i na PC: užší, bez názvu hry (je v menu), stav vlevo a tlačítka DEV, zvuk, jazyk vpravo; spodek menu
     zůstává volný pro vývojářské záložky */
  .sidenav .nav-foot { display: none; }
  .mobilebar { padding: 5px 28px; gap: 8px; }
  .mobilebar h1 { display: none; }
  .mob-account { display: flex; align-items: center; gap: 18px; text-align: left; font-size: 18px; }
  .mob-account .st-mob { display: none; }
  .mob-account .st-pc { display: inline-block; flex: none; }
  .mob-account .st-name { color: var(--text); }
  .mob-account .st-gold { color: var(--brass); }
  .mob-account .enbar { width: 200px; min-width: 0; height: 16px; }
  .mob-account .enbar span { font-size: 14px; line-height: 12px; color: var(--text); text-shadow: 1px 1px 0 #000; }
  .content { padding-bottom: 0; }
  main { padding: 18px 28px 40px; }
  .toast, .fish-badge { bottom: 24px; }
  .char-grid { display: grid; grid-template-columns: minmax(320px, 440px) minmax(0, 1fr); gap: 28px; align-items: start; }
  .char-left { position: sticky; top: 18px; }
  .char-right > h2:first-child { margin-top: 8px; }
  .opp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  .rank-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
  .battle { max-width: 1100px; }
  .sheet-backdrop { align-items: center; }
  .sheet { max-width: 760px; border: 3px solid var(--brass); }
}

/* inventář: dlaždice předmětů a plášťů, filtr podle slotu */
.inv-filter { margin: 4px 0 8px; }
.inv-filter .chip { font-size: 17px; padding: 1px 8px; }
.inv-filter .chip.on { border-color: var(--brass); color: var(--brass); }
/* druhá řada pod Vanity (pláště, zbraně, off-handy, kusy zbroje) */
.inv-filter.inv-sub { margin-top: -4px; padding-left: 10px; border-left: 2px solid var(--brass); }
.inv-sub .chip { font-size: 15px; }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.inv-item {
  display: flex; align-items: center; gap: 8px; text-align: left; position: relative;
  padding: 4px 8px 4px 12px; min-height: 48px;
}
.inv-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--line); }
.inv-item.tech::before { background: var(--tech); }
.inv-item.magic::before { background: var(--magic); }
.inv-item.neutral::before { background: var(--neutral); }
.inv-item.cape::before { background: var(--brass-dim); }
/* vzhled zbraně: zlatý proužek a název (jen vzhled, bez úrovně) */
.inv-item.skin::before { background: var(--brass); }
.inv-item.skin .iname { color: #e6c36a; }
.inv-item.worn { border-color: var(--brass); }
.inv-item.glint .iname { color: #c9b4ff; text-shadow: 0 0 6px rgba(154, 107, 255, 0.6); }
/* vzácný předmět (rarity rare): modrý název v inventáři, obchodě i výběru */
.inv-item.rare .iname, .pick.rare .pname, .rarity-rare { color: #5aa9ff; text-shadow: 0 0 6px rgba(70, 150, 255, 0.45); }
.inv-item .inv-text { display: flex; flex-direction: column; min-width: 0; }
.inv-item .iname { font-size: 18px; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; }
.inv-item .islot { font-size: 14px; color: var(--muted); }
.inv-item .icount { margin-left: auto; font-size: 16px; color: var(--muted); }
/* ikonka suroviny (models/textures/items/Resource, 16 × 16) */
.res-icon { width: 32px; height: 32px; flex: none; image-rendering: pixelated; }
.res-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.res-label .res-icon, .al-pick .res-icon { width: 24px; height: 24px; }
.cape-thumb { width: 16px; height: 30px; flex: none; image-rendering: pixelated; border: 1px solid var(--line); }
.cape-big { width: 64px; height: 120px; image-rendering: pixelated; border: 2px solid var(--line); justify-self: center; grid-column: 1 / -1; }
.pick.cape-detail { background: var(--panel-2); border: 2px solid var(--brass); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pick.cape-detail .pgrid { align-self: stretch; }
.skin-big { width: 128px; height: auto; image-rendering: pixelated; }
.pick-equip { margin-top: 4px; }
/* obchod: záložky Obchodník / Připravujeme; Připravujeme = karty nabídek s přáním (zatím nejde koupit) */
.shop-mode { margin: 0 0 0 auto; }
.shop-mode .chip.on { border-color: var(--brass); color: var(--brass); }
.wish-note { margin: 6px 0 10px; }
.wish-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.wish-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px 14px; text-align: center; }
.wish-card .wish-icon { width: 72px; height: 72px; margin-bottom: 4px; }
.wish-card .wish-name { font-size: 16px; }
.wish-card .wish-price { font-size: 22px; color: var(--brass); }
.wish-card .wish-state { font-size: 13px; color: var(--muted); }
.wish-card.on { border-color: var(--good); }
.wish-card.on .wish-state { color: var(--good); }
.wish-detail { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 16px; }
.wish-detail .wish-big { width: 112px; height: 112px; }
.wish-detail .wish-tag { margin: 0; color: var(--muted); font-style: italic; }
.wish-detail .wish-desc { margin: 4px 0; max-width: 520px; line-height: 1.45; }
.wish-detail .wish-price-big { font-size: 26px; color: var(--brass); }
.wish-detail .help { margin: 0; }
/* tmog token v detailu předmětu a složení tokenů v batohu (druhé kliknutí potvrdí, .sure červeně) */
.tmog-box { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.tmog-box .help { margin: 0; }
.pick-tmog { width: 100%; }
.pack-combine { align-self: flex-start; margin-top: 4px; padding: 2px 8px; font-size: 13px; }
.pick-tmog.sure, .pack-combine.sure { border-color: var(--bad); color: var(--bad); }

/* úroveň, XP a goldy účtu u postavy */
.char-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.char-progress .lvl { font-family: var(--px); font-size: 10px; color: var(--brass); white-space: nowrap; }
.char-progress .gold { color: var(--brass); white-space: nowrap; font-size: 19px; }
.xpbar { position: relative; flex: 1; height: 18px; background: var(--panel-2); border: 2px solid var(--line); }
.xpbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#7a5bd0, #5a3fa8); }
.xpbar .xptext { position: relative; display: block; text-align: center; font-size: 15px; line-height: 14px; }

/* svět: energie, souřadnice, pole */
.world-energy { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.wlabel { font-family: var(--px); font-size: 10px; color: var(--brass); white-space: nowrap; }
.enbar { position: relative; flex: 1; min-width: 140px; max-width: 360px; height: 18px; background: var(--panel-2); border: 2px solid var(--line); }
.enbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#5fbf6a, #3d8f47); }
.enbar span { position: relative; display: block; text-align: center; font-size: 15px; line-height: 14px; }
.world-pos { color: var(--brass); white-space: nowrap; }
.char-energy { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.char-energy .enbar { max-width: none; }
.char-energy button, #btnWorldEat { font-size: 16px; padding: 2px 8px; white-space: nowrap; }
.pack-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 4px; }
.pack-head .enbar { flex: 0 1 260px; }
.pack-head .help { flex: 1 1 220px; }
.char-pack { margin-top: 10px; }
.char-pack .pack-title { margin: 0 0 4px; }
/* dlaždice batohu široké na celý název („Mistrovský magický svitek“), bez zalamování */
.pack-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.pack-head .enbar i { background: linear-gradient(#c9a25a, #8f6d32); }
.pack-head .enbar.heavy i { background: linear-gradient(#d9614a, #a23a28); }
.world-farms { margin-bottom: 8px; }
.farm-card { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; background: var(--panel); border: 2px solid var(--line); padding: 6px 10px; margin-bottom: 4px; }
.farm-card .fname { color: var(--text); }
.farm-card .fstate { color: var(--muted); }
.farm-card .fstate.ripe { color: #8fd16a; }
.farm-card .fbtns { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
.farm-card .fbtns button { font-size: 18px; padding: 3px 10px; }
/* kámen návratu: čtvercové tlačítko v levém dolním rohu karty (tlačítka mají vlevo místo), počet kamenů v rohu */
.farm-card { position: relative; }
.farm-card .fbreak { flex-basis: 100%; height: 0; }
.farm-card .fbtns.has-stone { padding-left: 54px; min-height: 44px; align-items: flex-end; align-content: flex-end; }
.farm-card .stone-btn { position: absolute; left: 10px; bottom: 6px; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; }
.farm-card .stone-btn .res-icon { width: 32px; height: 32px; }
.farm-card .stone-btn b { position: absolute; right: 2px; bottom: 0; font-size: 15px; line-height: 1; text-shadow: 1px 1px 0 #000; }
.world-food { color: var(--brass); }
.farm-panel h2 { margin: 0; }
/* panel vedle scény je sloupec s pevnou výškou a posuvníkem: díly se nesmí smrsknout (seznam na stole
   by jinak na širokém displeji zmizel) */
.farm-panel > * { flex-shrink: 0; }
.farm-panel .fstatus { color: var(--brass); }
/* rybaření: XP do další úrovně skillu */
.fish-xp { height: 6px; background: #1e1a16; border: 1px solid #3a322a; }
.fish-xp i { display: block; height: 100%; background: #5aa0e6; }
.cook-bar i { background: #e08a30; }
/* hospoda: odpočinek a zakázky */
/* pošta: číslo nepřečtených u záložky, řádky zpráv a útoků (jako karty zakázek) */
.nav-badge { margin-left: auto; min-width: 20px; padding: 0 6px; background: #b8402e; color: #fff; font-size: 14px;
  line-height: 20px; text-align: center; border-radius: 10px; }
.nav-badge.free { background: #3d8f47; }     /* volné body */
.nav-badge.questmark { background: #ffd34a; color: #3a2a08; font-weight: 700; }   /* zakázka v hospodě čeká */
/* obrana bunkru pod bunkrem ve Světě; vypršelé přihlášení červeně */
.defense-card .defense-head { display: flex; align-items: center; gap: 8px; }
.defense-card .defense-head .fname { flex: 1; }
.defense-card .defense-help { min-width: 26px; padding: 0 6px; }
.defense-card.warn .fname { color: #e0705a; }
.quest.new { border-color: var(--brass); }
.quest.win .q-title { color: #7cc04a; }
.quest.loss .q-title { color: #e07a6a; }
.mail-loot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex-basis: 100%; }
.arena-loot .al-pick { justify-content: center; }
.arena-loot > .al-sub { font-size: 15px; color: var(--muted); text-align: center; }

/* hospoda: vycentrovaná vnitřní plocha, pozadí jde později nastavit přes --tavern-bg (obrázek) */
.tavern { display: flex; flex-direction: column; gap: 12px; width: 100%; padding-top: 12px;
  background: var(--tavern-bg, none) center / cover no-repeat; }
.tavern > .actions { margin-top: 0; }
.tavern-card { border: 1px solid #3a322a; background: #16120e; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.tavern-rest { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tavern-rest .enbar { max-width: none; }
.tavern-card h2 { margin: 0; }
.tavern-card h3 { margin: 4px 0 0; color: var(--brass); }
.tavern-card .fbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.quest-list { display: flex; flex-direction: column; gap: 8px; }
.quest { border: 1px solid #3a322a; background: #1c1712; padding: 8px 10px; display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.quest .q-info { flex: 1 1 280px; display: flex; flex-direction: column; gap: 3px; }
.quest .fbtns { margin-left: auto; }
.quest.bounty .q-title { color: #e07a6a; }
.quest.active { border-color: var(--brass); }
.quest .q-reward { color: var(--brass); }
/* klan: řádek se vstupem a tlačítkem, nástěnka, deník; potvrzení nebezpečné akce červeně */
.clan-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.clan-row input { flex: 1 1 160px; min-width: 0; }
.clan-row input.clan-tag { flex: 0 0 90px; text-transform: uppercase; }
.clan-board { width: 100%; box-sizing: border-box; min-height: 90px; resize: vertical; background: #0d0b09; color: var(--text);
  border: 2px solid var(--line); padding: 6px 8px; font: inherit; }
.clan-board-text { white-space: pre-wrap; margin: 0; }
.clan-log { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
/* klanový quick chat: jméno, fráze, kdy; vlastní zprávy zeleně; fráze jako tlačítka pod výpisem */
.clan-chat { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto;
             background: #0f0d0b; border: 2px solid var(--line); padding: 6px 8px; }
.clan-msg { display: flex; gap: 8px; align-items: baseline; font-size: 18px; }
.clan-msg b { color: var(--brass); font-weight: normal; white-space: nowrap; }
.clan-msg.mine b { color: var(--good); }
.clan-msg span { flex: 1; min-width: 0; }
.clan-msg i { font-style: normal; color: var(--muted); font-size: 15px; white-space: nowrap; }
.clan-phrases { flex-wrap: wrap; margin-top: 8px; }
/* spíž: posuvník přídělu (vůdce) s hodnotou a potvrzením */
.ration-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ration-row input[type=range] { flex: 1 1 160px; accent-color: var(--brass); }
.ration-row b { font-family: var(--px); font-size: 11px; color: var(--brass); min-width: 64px; }
.ration-row .donate-amount { width: 120px; }
.clan-sign button { font-size: 18px; padding: 4px 10px; }
.clan-sign button.signed { border-color: var(--good); color: var(--good); }
.clan-phrases button { font-size: 16px; padding: 4px 8px; }
button.danger { border-color: #c85a4a; color: #e07a6a; }
.clan-war { margin: 0; color: #ff6a5a; font-weight: bold; }
.farm-card.clan-card { border-color: #4ad6c8; margin-top: 12px; }
/* Postava, záložka Dovednosti */
.char-skills { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.life-skill { border: 1px solid #3a322a; background: #16120e; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.life-skill .ls-head { display: flex; justify-content: space-between; align-items: baseline; }
.life-skill .ls-level { color: var(--brass); }
.life-skill .ls-xp { font-size: 14px; opacity: 0.85; }
.life-skill .help { margin: 2px 0 0; }
.life-skill.click { cursor: pointer; }
.life-skill.click:hover { border-color: #5a4a38; }
.farm-panel .fbtns { display: grid; grid-template-columns: 1fr; gap: 6px; }
.farm-panel .fbtns button { font-size: 18px; padding: 8px 6px; }
.farm-panel .fbtns .seed-btn { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.farm-panel .fbtns .seed-btn b { font-weight: normal; }
.farm-panel .fbtns .seed-btn .small { font-size: 14px; opacity: 0.8; }
/* zvýrazněná volba (plodina biomu, vybrané očarování) jen barvou, ne velkým pixelovým písmem */
.farm-panel .fbtns .seed-btn.primary { font-family: inherit; font-size: 18px; }
/* stůl na očarování: předměty, očarování, stupeň a cena */
.bench-list { display: flex; flex-direction: column; gap: 4px; max-height: 30vh; overflow-y: auto; margin-bottom: 8px; }
.bench-list .bench-item { text-align: left; font-size: 16px; padding: 4px 8px; }
.bench-list .bench-item.sel { border-color: var(--brass); color: var(--brass); }
/* stůl na očarování a vylepšení v dílně: řádky jako v inventáři (ikonka, jméno, slot), vyšší seznam */
.bench-filter { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.bench-list .inv-item { flex-shrink: 0; }
.bench-list .inv-item.sel { border-color: var(--brass); background: var(--panel-2); }
.bench-list:has(.inv-item) { max-height: 45vh; }
.bench-kinds .seed-btn { border-left-width: 5px; }
.bench-pick { display: flex; flex-direction: column; background: var(--panel); border: 2px solid var(--brass); padding: 4px 8px; margin: 4px 0 8px; }
.bench-pick b { color: var(--brass); font-weight: normal; }
.bench-pick .small { font-size: 14px; opacity: 0.8; }
.farm-panel .seg-row { display: flex; gap: 0; margin: 8px 0; }
.farm-panel .seg-row .seg { flex: 1; font-size: 16px; padding: 4px 0; }
.farm-panel .seg-row .seg.active { background: var(--brass); color: var(--bg); border-color: var(--brass); }
.bench-cost { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0; font-size: 15px; }
.bench-cost .ok { color: var(--good, #7cd957); }
.bench-cost .miss { color: var(--bad); }
.farm-panel .chest-list { display: flex; flex-direction: column; gap: 2px; }
.farm-panel .chest-list div { display: flex; justify-content: space-between; align-items: center; background: var(--panel); padding: 3px 8px; }
.farm-panel .row-btns { display: flex; align-items: center; gap: 6px; }
.farm-panel .row-btns button { font-size: 15px; padding: 1px 8px; }
/* pracovní stůl: recepty (výrobek, suroviny, kolikrát vyrobit) */
.craft-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 8px; }
.craft-tabs button { padding: 3px 10px; font-size: 16px; }
.craft-tabs button.active { border-color: var(--brass); color: var(--brass); }
.craft-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
/* výrobek nebo předmět u stolu (craftTile): řádek jako v inventáři, pod jménem poznámka a cena v ikonkách */
.craft-list .inv-item { flex-shrink: 0; width: 100%; }
.inv-item.craft-tile .islot { white-space: normal; display: flex; flex-direction: column; gap: 1px; }
.inv-item.craft-tile .ct-note { color: var(--muted); }
.cost-chips { display: inline-flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; }
.cost-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 14px; }
.cost-chip .res-icon { width: 20px; height: 20px; }
.cost-chip .cc-name { color: var(--muted); }
.cost-chip.ok { color: var(--good, #7cd957); }
.cost-chip.miss { color: var(--bad); }
.craft-row .cost-chips { margin: 2px 0 4px; }
.craft-status { margin: 4px 0; font-size: 15px; color: var(--muted); }
/* detail u stolu: cena v okénkách (ikonka, mám / potřeba, název) */
.craft-detail { margin: 4px 0 8px; }
/* detail předmětu jde otevřít i u stolu v bunkru (farmFull je arena-full, z-index 40) */
#picker { z-index: 45; }
.craft-detail .plabel { color: var(--brass); font-size: 16px; margin-bottom: 4px; }
.cost-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.cost-tile { display: flex; flex-direction: column; align-items: center; width: 84px; text-align: center; gap: 2px; }
.cost-tile .ct-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 2px solid var(--line); }
.cost-tile .ct-icon .res-icon { width: 40px; height: 40px; }
.cost-tile.ok .ct-icon { border-color: var(--good, #7cd957); }
.cost-tile.miss .ct-icon { border-color: var(--bad); }
.cost-tile b { font-weight: normal; font-size: 16px; }
.cost-tile.ok b { color: var(--good, #7cd957); }
.cost-tile.miss b { color: var(--bad); }
.cost-tile .ct-name { font-size: 13px; color: var(--muted); line-height: 1.1; }
.craft-row { background: var(--panel); padding: 4px 8px; }
.craft-row .bench-cost { margin: 2px 0 4px; font-size: 14px; }
.craft-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.craft-head b { color: var(--brass); font-weight: normal; }
.craft-head .small { font-size: 14px; opacity: 0.8; }
.world-go { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.world-go label { display: flex; align-items: center; gap: 4px; }
.world-go input { width: 84px; }
.world-steps { display: inline-flex; gap: 4px; }
.world-steps button { min-width: 36px; padding: 4px 8px; }
.world-mine { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.world-mine .chip { cursor: pointer; color: var(--text); }
.world-mine .chip.on { border-color: var(--brass); }
.world-grid { display: grid; grid-template-columns: 1fr; gap: 6px 18px; }
@media (min-width: 900px) { .world-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.world-info .wrow, .world-key .wrow { display: flex; justify-content: space-between; gap: 10px; background: var(--panel); padding: 3px 8px; margin-bottom: 2px; }
/* hlavní údaje pole nad náhledem arény (úroveň a nepřátelé, zakázka, nebezpečí) */
.world-key { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); column-gap: 6px; margin-bottom: 8px; }
.world-key > p { grid-column: 1 / -1; margin: 4px 0; }
.world-key .wrow b { color: var(--brass); font-weight: normal; }
.world-info { margin-top: 8px; }
/* akce pole hned pod názvem, ať souboj není až pod mapou */
.world-actions { margin: 4px 0 10px; }
.world-actions button { flex: 1 1 auto; }
/* údaje o poli ve dvou sloupcích (na úzkém displeji pod sebou) */
@media (min-width: 700px) {
  .world-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 6px; }
  .world-info > :not(.wrow) { grid-column: 1 / -1; }
}
.world-side .farm-card .fbtns button { font-size: 16px; padding: 2px 8px; white-space: nowrap; }
.world-side .farm-card .fbtns button.enter { border-color: var(--brass); color: var(--brass); }
.world-side .world-farms { margin-top: 10px; }
/* taby pravého sloupce Světa (Domov, Klan, Úkoly) */
.side-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.side-tabs .side-tab { display: flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 16px; }
.side-tabs .side-tab.active { border-color: var(--brass); color: var(--brass); }
.side-tabs .side-tab .nav-badge { margin-left: 2px; min-width: 16px; padding: 0 4px; font-size: 12px; line-height: 16px; }
.task-card .fname { flex-basis: 100%; }
.task-card .fstate { flex-basis: 100%; }
/* celý seznam úkolů od Hermuta na tabu Úkoly (jako plovoucí okénko) */
.side-steps { flex-basis: 100%; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.side-steps li { display: grid; grid-template-columns: 18px 1fr; gap: 6px; }
.side-steps li.done { color: var(--muted); text-decoration: line-through; }
.side-steps li.next span { color: var(--brass); }
.side-steps li i { font-style: normal; color: var(--brass); }
.side-steps li small { grid-column: 2; color: var(--muted); font-size: 15px; }
.world-side .world-mine { margin-top: 6px; }
.world-info .wrow b { color: var(--brass); font-weight: normal; }
.world-info p { margin: 4px 0; }
/* mapa světa a detail pole v okně */
.world-top { display: grid; grid-template-columns: 1fr; gap: 6px 18px; }
@media (min-width: 900px) { .world-top { grid-template-columns: auto minmax(0, 1fr); } }
.world-atlas { display: block; border: 2px solid var(--line); image-rendering: pixelated; max-width: 100%; height: auto; cursor: pointer; }
.atlas-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 17px; color: var(--muted); }
.atlas-legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border: 1px solid #0d0b09; }
.atlas-legend i.round { border-radius: 50%; }
.atlas-legend i.diamond { transform: rotate(45deg) scale(0.85); }
.atlas-legend i.zone { border: 1px dashed rgba(130, 230, 130, 0.9); }
.sheet-backdrop.center { align-items: center; }
/* šipky přes okraje mapy světa a náhledu arény */
.map-nav { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
/* ukázaná značka (krok od Hermuta): pulzující kroužek přes pole */
.atlas-ping { position: absolute; pointer-events: none; border: 3px solid #ffd34a; border-radius: 50%;
  box-shadow: 0 0 10px #ffd34a; animation: atlas-ping 0.9s ease-out infinite; }
@keyframes atlas-ping { from { transform: scale(0.35); opacity: 1; } to { transform: scale(1); opacity: 0.15; } }
#worldSteps { margin-top: 8px; }
/* střed bez transform (stisk tlačítka má vlastní translateY a šipka by uskočila) */
.map-arrow { --s: 30px; position: absolute; width: var(--s); height: var(--s); min-width: 0; padding: 0; font-size: 16px; line-height: 1;
  background: rgba(14, 12, 10, 0.72); border: 2px solid var(--line); opacity: 0.8; }
.map-arrow:hover { opacity: 1; border-color: var(--brass); }
.map-nav.small .map-arrow { --s: 26px; font-size: 14px; }
.map-arrow.up { top: 4px; left: calc(50% - var(--s) / 2); }
.map-arrow.down { bottom: 4px; left: calc(50% - var(--s) / 2); }
.map-arrow.left { left: 4px; top: calc(50% - var(--s) / 2); }
.map-arrow.right { right: 4px; top: calc(50% - var(--s) / 2); }
.map-nav:has(canvas[hidden]) .map-arrow { display: none; }
/* přiblížení a oddálení mapy světa: vpravo nahoře pod úrovní zóny v rohu */
.map-zoom { position: absolute; right: 4px; top: 32px; display: flex; flex-direction: column; gap: 4px; }
.map-zoom button { width: 30px; height: 30px; min-width: 0; padding: 0; font-size: 18px; line-height: 1;
  background: rgba(14, 12, 10, 0.72); border: 2px solid var(--line); opacity: 0.8; }
.map-zoom button:hover:not(:disabled) { opacity: 1; border-color: var(--brass); }
.map-zoom button:disabled { opacity: 0.35; }
.map-nav:has(canvas[hidden]) .map-zoom { display: none; }
.map-zoom.map-tools { right: auto; left: 4px; }
.map-zoom .ni[data-icon] { width: 16px; height: 16px; vertical-align: middle; }
.map-zoom .short-only { display: none; font-size: 12px; }
.mob-account .st-en { cursor: pointer; }

/* telefon na šířku (nízké okno): menu svisle vlevo místo lišty dole */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 899px) {
  .shell { grid-template-columns: 60px minmax(0, 1fr); }
  .sidenav {
    position: sticky; top: var(--safe-top); left: auto; right: auto; bottom: auto; height: calc(100vh - var(--safe-top)); flex-direction: column;
    border-top: 0; border-right: 2px solid var(--line); padding: 4px 3px calc(4px + env(safe-area-inset-bottom)); gap: 3px; overflow-y: auto;
  }
  .sidenav button[data-tab] { flex: 1 1 0; min-height: 34px; font-size: 11px; padding: 2px 1px; gap: 1px; }
  .sidenav .ni[data-icon] { width: 18px; height: 18px; }
  .content { padding-bottom: 0; }
  .toast { bottom: 12px; }
  .fish-badge { bottom: 12px; left: auto; right: 12px; margin: 0; }
  .steps-box { left: auto; right: 6px; width: 300px; bottom: 8px; }
}
/* nízké okno na šířku ve Světě: mapa vlevo na výšku okna, vedle taby; bez řádku energie (energie je nahoře ⚡,
   jídlo zůstane) a souřadnic (tlačítko XY u mapy je ukáže) */
@media (orientation: landscape) and (max-height: 560px) {
  .world-top { grid-template-columns: auto minmax(0, 1fr); }
  /* detail pole: náhled arény a údaje vlevo, nepřátelé vpravo (pod sebou by se nevešly) */
  .world-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .world-energy .wlabel, .world-energy .enbar, #worldEnergyNote, #worldPos { display: none; }
  .world-energy:has(#btnWorldEat[hidden]) { display: none; }
  #screenWorld:not(.show-go) .world-go { display: none; }
  .map-zoom .short-only { display: block; }
  .world-side .world-farms { margin-top: 0; }
  /* rybaření jen ikonkou s prutem (nápis by překryl tlačítka v pravém sloupci) */
  .fish-badge { padding: 3px; }
  .fish-badge b { display: none; }
  .fish-badge img { width: 34px; height: 34px; }
  /* panel 3D scény (hospoda, farma, bunkr): širší, bez nadpisu (je v liště scény) a vysvětlujících textů (?) */
  .farm-panel { width: clamp(240px, 40vw, 380px); padding: 6px 8px; gap: 4px; }
  .farm-panel .fp-head h2 { display: none; }
  .farm-panel .tavern-card { padding: 6px 8px; }
  .farm-panel .tavern-card h2 { font-size: 11px; }
  .farm-panel button.primary { font-size: 11px; padding: 7px 8px; }
  .farm-panel .quest { padding: 6px 8px; }
}
.fp-head { display: flex; align-items: center; gap: 6px; }
/* companion k naverbování v hospodě: jeho slova */
.recruit-say { font-style: italic; color: var(--text); margin: 4px 0; }
/* ? v hlavičce panelu: ukáže a schová vysvětlující texty (třída explain, výchozí schované) */
.fp-head .fp-explain { width: 24px; height: 24px; padding: 0; font-size: 14px; flex: none; margin-left: auto; }
.farm-panel.show-explain .fp-head .fp-explain { border-color: var(--brass); color: var(--brass); }
.farm-panel:not(.show-explain) .explain { display: none; }
/* zúžený panel 3D scény: postava u ničeho nestojí, nápověda (p.help) jen po ? */
.farm-panel { transition: width 0.25s ease; }
.farm-panel.slim:not(.show-explain) p.help { display: none; }
@media (orientation: landscape) and (min-width: 560px) {
  .farm-panel.slim:not(.show-explain) { width: 170px; }
}
/* 3D scéna farmy, bunkru a hospody na šířku: scéna přes celé okno, panel leží přes její pravý okraj, ať obraz
   neposkakuje, když se panel ukáže nebo zmizí (na výšku zůstává pod scénou, jinak by zakryl postavu) */
@media (orientation: landscape) and (min-width: 560px) {
  #farmFull .farm-panel { position: absolute; right: 0; top: 40px; bottom: 0; z-index: 3; overflow-y: auto;
    background: rgba(20, 17, 14, 0.94); border-top: 2px solid var(--line); border-left: 2px solid var(--line); }
}
/* zbyla by jen nápověda: panel zmizí, ? je v liště scény */
.farm-panel.gone:not(.show-explain) { display: none; }
.arena-top-btns .farm-help { min-width: 0; padding: 2px 10px; margin-right: 6px; }
/* sbalený panel rybaření: ikonka prutu v liště scény (a kolik je v síťce) */
.farm-panel.closed { display: none !important; }
.arena-top-btns .farm-open { display: inline-flex; align-items: center; gap: 4px; min-width: 0; padding: 1px 8px; }
.arena-top-btns .farm-open[hidden] { display: none; }
.arena-top-btns .farm-open img { width: 24px; height: 24px; image-rendering: pixelated; }
.arena-top-btns .farm-open span { font-family: var(--px); font-size: 9px; color: var(--brass); }
.fp-head .fp-collapse { width: 24px; height: 24px; padding: 0; font-size: 14px; flex: none; margin-left: auto; }
.arena-top-btns .farm-help.on { border-color: var(--brass); color: var(--brass); }
.sheet.world-sheet { max-width: 1100px; }
.world-sheet .sheet-head { gap: 10px; }
.world-sheet .sheet-head h3 { margin: 0; }
.world-sheet .sheet-head .close { margin-left: auto; }
/* akce pole v hlavičce okna (sticky): vpravo vedle nadpisu, na úzkém okně na vlastním řádku */
.world-sheet .sheet-head { flex-wrap: wrap; }
.world-sheet .sheet-head .world-actions { margin: 0 0 0 auto; gap: 6px; justify-content: flex-end; }
.world-sheet .sheet-head .world-actions button { flex: 0 1 auto; font-size: 17px; padding: 4px 12px; }
.world-sheet .sheet-head .world-actions button.primary { font-size: 11px; padding: 7px 12px; }
.world-sheet .sheet-head .world-actions + .close { margin-left: 0; }
@media (max-width: 700px) {
  .world-sheet .sheet-head .world-actions { order: 3; flex-basis: 100%; margin: 0; }
  .world-sheet .sheet-head .world-actions button { flex: 1 1 auto; }
}
.world-map { display: block; border: 2px solid var(--line); image-rendering: pixelated; max-width: 100%; height: auto; }

/* obchod */
.shop-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.shop-head .gold { font-size: 24px; color: var(--brass); }
.shop-grid { display: grid; grid-template-columns: 1fr; gap: 6px 18px; }
@media (min-width: 900px) { .shop-grid { grid-template-columns: 1fr 1fr; } }
.inv-item.poor .row-act { color: var(--bad); }
.inv-item.blocked { opacity: 0.55; }
/* obchod na úzké obrazovce: přepínač Koupit / Prodat, ukáže se jen jedna strana */
.shop-side { display: none; margin: 0 0 6px; }
.shop-side .chip.on { border-color: var(--brass); color: var(--brass); }
@media (max-width: 899px) {
  .shop-side { display: flex; }
  .shop-grid.side-buy > .shop-sell-col, .shop-grid.side-sell > .shop-buy-col { display: none; }
}
.shop-grid h2 { margin-top: 4px; }
#shopSellTitle { cursor: help; }

/* seznamy předmětů (inventář, obchod): řádky stejné výšky, jméno a popisek na jeden řádek */
.list-tools { display: flex; gap: 6px; margin: 0 0 8px; }
.list-tools select, .list-tools input {
  background: #0d0b09; border: 2px solid var(--line); padding: 2px 6px; font-size: 17px;
}
.list-tools input { flex: 1; min-width: 0; }
.inv-grid.rows { display: flex; flex-direction: column; gap: 4px; }
.inv-grid.rows .inv-item { height: 46px; min-height: 0; padding: 2px 8px 2px 12px; border-bottom-width: 2px; }
.inv-grid.rows .inv-item:active:not(:disabled) { transform: none; border-bottom-width: 2px; }
.inv-item .thumb-box { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; }
.inv-item .thumb-box .skin-thumb { height: 30px; max-width: 34px; }
.inv-item .thumb-box .cape-thumb { height: 30px; width: 16px; }
.inv-item .inv-text { flex: 1; }
.inv-item .iname, .inv-item .islot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-item .row-act {
  flex: none; margin-left: auto; border: 2px solid var(--line); background: var(--panel); padding: 1px 8px;
  font-size: 17px; color: var(--brass); white-space: nowrap;
}
.inv-item .row-act:hover { border-color: var(--brass); }
.inv-item .row-act.off { opacity: 0.45; cursor: default; }
/* sbírka vzácných věcí: chybějící zašedlé (i s modrým jménem Rare) */
.collection { margin-top: 16px; }
.collection .inv-grid.rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px 8px; }
.inv-item.missing { opacity: 0.45; filter: grayscale(1); }
.inv-item.missing .iname { color: var(--muted); text-shadow: none; }
.sheet-head .head-action { margin-left: auto; font-size: 10px; padding: 6px 12px; }
.sheet-head .head-action + .close { margin-left: 8px; }
/* prohlédnutí hráče: přidat do přátel, nahlásit */
.inspect-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }

/* konzole vývojáře (žebříček, jen účty z DevAccounts) */
.admin { margin: 10px 0 16px; }
.admin-log {
  background: #0d0b09; border: 2px solid var(--line); margin: 0 0 6px; padding: 6px 8px;
  max-height: 260px; overflow: auto; font-family: inherit; font-size: 16px; white-space: pre-wrap; color: var(--text);
}
.admin-log:empty { display: none; }
.admin-log .cmd { color: var(--brass); }
.admin-log .err { color: var(--bad); }
.admin input { width: 100%; box-sizing: border-box; background: #0d0b09; border: 2px solid var(--line); padding: 4px 8px; }
.skin-thumb { height: 32px; width: auto; max-width: 40px; flex: none; image-rendering: pixelated; }
.pick .skin-big { grid-column: 1 / -1; justify-self: center; height: 110px; width: auto; image-rendering: pixelated; margin: 4px 0; }
.nav-btns { display: flex; gap: 6px; }
.lang.sound { font-family: inherit; font-size: 14px; padding: 3px 7px; line-height: 1; }
.lang.dev-toggle { opacity: 0.6; }
/* horní lišta: malá hranatá tlačítka (nahlásit, nastavení) */
.lang.icon-btn { font-family: inherit; font-size: 16px; width: 26px; height: 26px; padding: 0; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.lang.report-btn { font-family: var(--px); font-size: 11px; color: var(--bad); }
/* nastavení a nahlášení: menší okno, řádky s jezdci */
.sheet.small-sheet { max-width: 440px; }
.settings-body { display: flex; flex-direction: column; gap: 8px; }
.settings-body h4 { margin: 6px 0 0; color: var(--brass); }
.set-row { display: grid; grid-template-columns: 7.5em 1fr 3.5em; align-items: center; gap: 8px; }
.set-row input[type=range] { width: 100%; accent-color: var(--brass); }
.set-row .set-num { text-align: right; color: var(--muted); }
.set-row.set-check { display: flex; }
.report-name, .report-note { width: 100%; box-sizing: border-box; background: #0d0b09; color: var(--text); border: 2px solid var(--line); padding: 4px 8px; font: inherit; }
.report-note { min-height: 80px; resize: vertical; }
/* přátelé v Profilu: žádost jménem, řádky přátel (parťák zlatě) */
.friends { margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.friend-add { display: flex; gap: 8px; }
.friend-add input { flex: 1; min-width: 0; }
.quest.friend.partner { border-color: #ffd84a; }
.quest.friend.partner .q-title { color: #ffd84a; }
.lang.dev-toggle.on { opacity: 1; background: var(--brass); color: #1a1410; }

/* poutník u ohníčku nad přihlášením */
/* poutník u ohníčku jako pozadí přihlášení (poloviční rozlišení, ať to nežere a je to pixelové) */
.login { position: relative; overflow: hidden; }
.login-fire { position: absolute; inset: 0; z-index: 0; }
.login-fire canvas { display: block; image-rendering: pixelated; }
.login-card { position: relative; z-index: 1; background: rgba(33, 27, 21, 0.9); }
/* autor dole na pozadí přihlášení */
.login-credit { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 1; text-align: center; font-size: 15px;
                color: var(--muted); text-shadow: 1px 1px 0 #000; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--brass); cursor: pointer; text-decoration: underline; }
.about-body p { margin: 4px 0; }
.about-title { font-family: "Press Start 2P", monospace; color: var(--brass); font-size: 14px; text-align: center; margin: 4px 0 10px !important; }
.about-name { font-size: 22px; color: var(--text); }
.about-row a { color: var(--brass); }

/* uvítání nového hráče: celá obrazovka, Hermut vlevo nahoře s bublinou, obsah kroku pod ním */
/* rozhovor (js/dialogue.js): 3D scéna přes celou obrazovku, dole okno s mluvčím a textem, vpravo nahoře Přeskočit */
.dialogue { position: fixed; inset: 0; z-index: 70; background: #000; cursor: pointer; user-select: none; }
.dialogue-view { position: absolute; inset: 0; }
/* rozhovor ve scéně hry (playTalk): scéna je vidět, okno jen chytá kliky */
.dialogue.dialogue-over { background: transparent; }
.dialogue-fade { position: absolute; inset: 0; background: #000; opacity: 1; transition: opacity 1.2s ease; pointer-events: none; }
.dialogue-panel { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(760px, calc(100% - 32px));
  box-sizing: border-box; background: rgba(16, 12, 9, 0.9); border: 2px solid var(--brass); padding: 10px 16px 14px; color: var(--text); }
.dialogue-panel b { display: block; color: var(--brass); font-size: 18px; margin-bottom: 4px; }
.dialogue-panel p { margin: 0; font-size: 19px; line-height: 1.45; min-height: 2.9em; }
.dialogue-more { position: absolute; right: 12px; bottom: 6px; color: var(--brass); animation: dialogue-blink 1s steps(2) infinite; }
@keyframes dialogue-blink { 50% { opacity: 0; } }
.dialogue-skip { position: absolute; top: 14px; right: 16px; }
.welcome { position: fixed; inset: 0; z-index: 60; background: radial-gradient(ellipse at top, #2a2018, #0c0a08 75%);
           display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.welcome-card { width: 100%; max-width: 920px; max-height: 100%; display: flex; flex-direction: column; gap: 12px;
                background: var(--panel); border: 3px solid var(--brass); padding: 16px 18px; box-shadow: 0 10px 40px #000a; overflow-y: auto; }
.welcome-dots { display: flex; gap: 8px; justify-content: center; }
.welcome-dots i { width: 12px; height: 12px; border: 2px solid var(--brass-dim); background: transparent; }
.welcome-dots i.on { background: var(--brass); border-color: var(--brass); }
.welcome-dots i.done { background: var(--brass-dim); }
.welcome-guide { display: flex; gap: 12px; align-items: center; }
.welcome-hermut { width: 120px; height: 140px; flex: none; position: relative; border: 2px solid var(--line); background: #1a1612; }
.welcome-hermut img { display: block; height: 100%; margin: 0 auto; image-rendering: pixelated; }
.welcome-say { position: relative; flex: 1; background: var(--panel-2); border: 2px solid var(--brass-dim); padding: 10px 14px; font-size: 19px; line-height: 1.35; }
.welcome-say::before { content: ""; position: absolute; left: -10px; top: 50%; margin-top: -8px; border: 8px solid transparent;
                       border-right-color: var(--brass-dim); border-left: 0; }
.welcome-say b { color: var(--brass); }
.welcome-main { display: flex; flex-direction: column; gap: 10px; min-height: 200px; }
.welcome-scene { display: flex; justify-content: center; align-items: flex-end; padding: 8px 0; border: 2px solid var(--line);
                 background: radial-gradient(ellipse at bottom, #3a2e22, #1a1612 70%); }
.welcome-scene img { display: block; max-width: 100%; max-height: 300px; image-rendering: pixelated; }
.welcome-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.welcome-points div { background: var(--panel-2); border: 2px solid var(--line); padding: 8px 10px; font-size: 18px; }
.welcome-points b { display: block; color: var(--brass); margin-bottom: 2px; }
/* nápověda (? v liště): splněné úkoly od Hermuta odškrtnuté */
.welcome-steps-list li.done { color: var(--muted); text-decoration: line-through; }
.welcome-who { display: grid; grid-template-columns: 260px 1fr; gap: 14px; align-items: start; }
.welcome-preview { height: 340px; position: relative; border: 2px solid var(--line); cursor: grab; }
.welcome-preview canvas { display: block; }
.welcome-who .origin-panel { margin: 0; }
.welcome-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.welcome-path { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 10px; background: var(--panel-2);
                border: 2px solid var(--line); cursor: pointer; }
.welcome-path.on { border-color: var(--brass); box-shadow: 0 0 0 2px var(--brass) inset; }
.welcome-path b { color: var(--brass); font-size: 18px; }
.welcome-path .wp-items { display: flex; flex-wrap: wrap; gap: 4px; }
.welcome-path .wp-items .islot { width: 40px; height: 40px; }
.welcome-path .wp-stats { color: var(--muted); font-size: 16px; }
/* snímek postavy (záložka DEV) */
.photo-tool { margin-top: 14px; border-top: 2px solid var(--line); padding-top: 8px; }
.photo-tool h3 { margin: 0; color: var(--brass); }
.photo-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.photo-row label { display: flex; gap: 6px; align-items: center; }

/* body a schopnosti v uvítání: panely z obrazovky postavy vedle sebe, bez tréninku zbraní a resetů */
.welcome-build { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.welcome-build .char-panel { min-width: 0; }
.welcome-build #trainingBox, .welcome-build .reset-row, .welcome-build #lockHelp { display: none; }
/* části karty se nesmrští (jinak dlouhý krok přetekl přes tlačítka), karta se posouvá; Zpět a Dál drží dole */
.welcome-card > * { flex: none; }
.welcome-nav { display: flex; justify-content: space-between; gap: 10px; position: sticky; bottom: -16px; z-index: 2;
               background: var(--panel); padding: 8px 0; margin-bottom: -8px; border-top: 2px solid var(--line); }
.welcome-nav .primary { margin-left: auto; }
@media (max-width: 720px) {
  .welcome { padding: 0; }
  .welcome-card { border-width: 0; min-height: 100%; }
  .welcome-hermut { width: 84px; height: 100px; }
  .welcome-points, .welcome-paths { grid-template-columns: 1fr; }
  .welcome-who, .welcome-build { grid-template-columns: 1fr; }
  .welcome-preview { height: 240px; }
  .welcome-scene { height: 220px; }
}

/* první kroky: plovoucí karta vpravo dole (na telefonu nad lištou menu), sbalit kliknutím na nadpis */
.steps-box { position: fixed; right: 14px; bottom: 14px; z-index: 30; width: 300px; background: var(--panel);
             border: 2px solid var(--brass); box-shadow: 0 6px 24px #0009; font-size: 17px; }
.steps-box .sb-head { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 6px 10px;
                      background: var(--panel-2); border: 0; color: var(--brass); font-size: 17px; text-align: left; }
.steps-box ol { list-style: none; margin: 0; padding: 6px 10px 8px; display: flex; flex-direction: column; gap: 4px; max-height: 55vh; overflow-y: auto; }
.steps-box li { display: grid; grid-template-columns: 18px 1fr; gap: 6px; cursor: pointer; }
.steps-box li.done { color: var(--muted); text-decoration: line-through; cursor: default; }
.steps-box li.next span { color: var(--brass); }
.steps-box li i { font-style: normal; color: var(--brass); }
.steps-box li small { grid-column: 2; color: var(--muted); font-size: 15px; text-decoration: none; }
.steps-box .sb-reward { padding: 0 10px 8px; color: var(--muted); font-size: 15px; }
.steps-box.closed ol, .steps-box.closed .sb-reward { display: none; }
/* úzké okno na výšku: přes celou šířku nad lištou menu (telefon na šířku má kartu vpravo dole, menu je vlevo) */
@media (max-width: 720px) and (orientation: portrait), (max-width: 720px) and (min-height: 561px) {
  .steps-box { right: 6px; left: 6px; width: auto; bottom: 74px; }
}
/* náhled zvířete (BattleTest, Bestiář) */
.creature-box { height: 340px; margin: 6px 0; border: 2px solid var(--line); }
.creature-box canvas { display: block; width: 100%; height: 100%; }

/* výřez na kameru: okna a 3D scény přes celou obrazovku taky mimo něj (černý rámeček body::before);
   až na konci, ať to nepřebijí jejich vlastní pravidla s inset: 0 */
.sheet-backdrop, .battle, .arena-full, .dialogue, .welcome { top: var(--safe-top); left: var(--safe-left); right: var(--safe-right); }
.friendly-ask { top: calc(12px + var(--safe-top)); }

/* aréna na telefonu: karta postavy po ťuknutí menší (jinak zabírala čtvrtinu plochy), drobnější písmo a pruhy */
@media (orientation: landscape) and (max-height: 560px), (max-width: 600px) {
  .arena-card { width: min(210px, 38%); padding: 3px 6px; top: 34px; }
  .arena-card .ac-head { margin-bottom: 2px; gap: 6px; }
  .arena-card .ac-name { font-size: 7px; }
  .arena-card .ac-weapon { font-size: 12px; }
  .arena-card .ac-status { font-size: 12px; gap: 0 6px; margin-top: 0; }
  .arena-card .ac-res { font-size: 11px; gap: 0 6px; margin-top: 0; }
  .arena-card .res-chip .ni { width: 9px; height: 9px; }
  .arena-card .bar { height: 10px; border-width: 1px; margin-bottom: 2px; }
  .arena-card .bar.mana { height: 7px; }
  .arena-card .bar b { font-size: 6px; }
  .arena-card .bar.mana b { font-size: 5px; }
}