/* Riftbound builder — styly. Základ dávají tokeny z /account/theme.css
   (--bg, --bg-soft, --card, --card-border, --text, --text-dim), tady jen
   vlastní akcenty (hextech tyrkys) a per-app komponenty. Desktop-first. */

* { box-sizing: border-box; }

:root {
  --rb-accent: #3ec6c9;
  --rb-accent2: #7fdfe1;
  --rb-accent-dim: #26797b;
  --rb-red: #d95c5c;
  --rb-green: #5cb884;
  --radius: 12px;          /* panely, dialogy, karty */
  --radius-sm: 9px;        /* tlačítka, inputy, chipy */
  --tr: .18s ease;         /* jednotná délka transitions (kontrakt: 150–250 ms) */
  /* fancy pass: glass/gradient tokeny + stíny (light si je přepíše) */
  --rb-btn-fg: #06272a;                                     /* text na akcentovém tlačítku */
  --rb-glass: color-mix(in srgb, var(--card) 76%, transparent);
  --rb-glass-border: rgba(255,255,255,.09);
  --rb-shadow-1: 0 3px 12px -4px rgba(0,0,0,.35);
  --rb-shadow-2: 0 18px 50px -16px rgba(0,0,0,.6);
  --rb-glow: 0 0 20px -6px color-mix(in srgb, var(--rb-accent) 45%, transparent);
  /* doménové barvy (obsah, ne téma — stejné v obou schématech) */
  /* oficiální barvy domén (LoL wiki RB ikony) — drž v sync s DOMAINS v data.js */
  --rb-fury: #DF1620;
  --rb-calm: #488C38;
  --rb-mind: #0F6FA6;
  --rb-body: #E87600;
  --rb-chaos: #6A4094;
  --rb-order: #D2B400;
  /* ── barvy rarit — DVĚ oddělené sady, neplest si je ──
     --rb-r-*  = GEM (oficiální ikona / oficiální gradient). Je to OBSAH, ne
                 téma → NEMĚNÍ SE s tématem a definuje se JEN tady na :root.
                 Duhová ultimate a tyrkysové promo jsou oficiální gradienty
                 (ikonu nemají), proto mají víc stopů.
     --rb-rf-* = FRAME (rámeček dlaždice, opts.rarityFrames). Startuje na
                 týchž hodnotách, ale musí být ČITELNÝ proti podkladu, takže
                 světlé téma si ho přepisuje (viz :root[data-theme="light"]).
     Kdyby to byla jedna sada (jak to bylo v první verzi téhle změny), světlý
     přepis by překreslil i gemy: duhová ultimate zkolabuje do bahna a promo
     přeliv se obrátí. Rámeček tedy NIKDY nesahá na --rb-r-*, gem NIKDY na
     --rb-rf-*.
     Odstíny navzorkované z OFICIÁLNÍCH gem ikon (icons/RB_*_icon.png,
     dominantní odstín sytých pixelů), ne vymyšlené: common stříbrná,
     uncommon tyrkysová, rare purpurová, epic oranžová, showcase zlatá. */
  --rb-r-common: #9EB1BF;
  --rb-r-uncommon: #42A7A6;
  --rb-r-rare: #BD2294;
  --rb-r-epic: #D96A1A;
  --rb-r-showcase: #E8C21F;
  --rb-r-ultimate: #E03145;
  --rb-r-ultimate2: #E8D857;
  --rb-r-ultimate3: #4DC98A;
  --rb-r-ultimate4: #5A9DF0;
  --rb-r-promo: #1F9E93;
  --rb-r-promo2: #8FF0E2;
  /* rámeček — tmavé téma = shodné s gemem; kontrast vůči --bg i --bg-soft
     drží ≥ 3.2:1 (dosavadní --card-border má jen 1.4:1), proto je `rare`
     o kousek světlejší než pixel v ikoně (#B0208A dává jen 2.9:1). */
  --rb-rf-common: var(--rb-r-common);
  --rb-rf-uncommon: var(--rb-r-uncommon);
  --rb-rf-rare: var(--rb-r-rare);
  --rb-rf-epic: var(--rb-r-epic);
  --rb-rf-showcase: var(--rb-r-showcase);
  --rb-rf-ultimate: var(--rb-r-ultimate);
  --rb-rf-ultimate2: var(--rb-r-ultimate2);
  --rb-rf-ultimate3: var(--rb-r-ultimate3);
  --rb-rf-ultimate4: var(--rb-r-ultimate4);
  --rb-rf-promo: var(--rb-r-promo);
  --rb-rf-promo2: var(--rb-r-promo2);
}
:root[data-theme="light"] {
  --rb-accent: #17888b;
  --rb-accent2: #0e6b6e;
  --rb-accent-dim: #5ba7a9;
  --rb-btn-fg: #f4fbfb;                                     /* světlý akcent je tmavý → světlý text */
  --rb-glass: color-mix(in srgb, var(--card) 82%, transparent);
  --rb-glass-border: rgba(93,79,50,.16);
  --rb-shadow-1: 0 3px 12px -4px rgba(80,62,38,.18);
  --rb-shadow-2: 0 18px 44px -18px rgba(80,62,38,.35);
  /* RÁMEČKY dlaždic ve světlém tématu: týž odstín (hue drží), jen ztmavený
     tak, aby kontrast vůči --bg i --bg-soft zůstal ≥ 3.2:1 — na krémovém
     podkladu by originály (zejména common stříbrná a showcase zlatá)
     splynuly.
     PŘEPISUJE SE VÝHRADNĚ --rb-rf-* (rámeček). --rb-r-* (gem) tady NESMÍ
     být: gem je oficiální ikona/gradient, tedy obsah, a s tématem se nemění.
     POZOR na promo: oba stopy se tu musí ztmavit, takže „promo2" je ve
     světlém tématu TMAVŠÍ z dvojice (v tmavém světlejší). Nejsou to
     „světlý/tmavý" stop, ale prostě stop A a B. */
  --rb-rf-common: #5D798D;
  --rb-rf-uncommon: #338180;
  --rb-rf-rare: #B0208A;
  --rb-rf-epic: #B95A16;
  --rb-rf-showcase: #8B730E;
  --rb-rf-ultimate: #C8202F;
  --rb-rf-ultimate2: #827612;
  --rb-rf-ultimate3: #288556;
  --rb-rf-ultimate4: #1572E6;
  --rb-rf-promo: #1A847B;
  --rb-rf-promo2: #0C6259;
}

html, body {
  margin: 0;
  height: 100%;
  /* gradient mesh podklad — akcent + fialový protipól, v obou tématech decentní */
  background:
    radial-gradient(1100px 500px at 85% -10%, color-mix(in srgb, var(--rb-accent) 7%, transparent), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(122,90,190,.08), transparent 60%),
    radial-gradient(700px 420px at 110% 75%, rgba(122,90,190,.05), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
}
body { display: flex; flex-direction: column; min-height: 100vh; }
/* stránka NIKDY nescrolluje do strany (konvence webu) — clip nevytváří
   scroller (sticky topbar dál funguje); široký obsah musí scrollovat ve
   VLASTNÍM kontejneru (checklist, gamelog…). Dřív jen ≤900px — na desktopu
   ale libovolné přetečení (dlouhá jména, tabulky) stránku roztáhlo. */
html, body { overflow-x: clip; }

* { scrollbar-width: thin; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 6px; }

h1, h2 { font-family: var(--serif); letter-spacing: .02em; }
h1 { font-size: 1.15rem; margin: 0; white-space: nowrap; color: var(--rb-accent2); display: flex; align-items: center; gap: 9px; }
h1 svg { color: var(--rb-accent); }
h2 { margin: 0 0 10px; font-size: 1.2rem; color: var(--rb-accent2); }

.icon { width: 15px; height: 15px; vertical-align: -2px; flex-shrink: 0; }
.hidden { display: none !important; }
.spacer { flex: 1; }
.dim { color: var(--text-dim); }

button {
  background: linear-gradient(160deg, var(--rb-accent) 20%, color-mix(in srgb, var(--rb-accent) 78%, #063032));
  color: var(--rb-btn-fg);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
  font-size: .88rem;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-content: center;
  font-family: inherit;
  transition: background-color var(--tr), color var(--tr), border-color var(--tr),
              box-shadow var(--tr), filter var(--tr);
}
button:hover:not(:disabled) { filter: brightness(1.12); box-shadow: var(--rb-glow); }
button.primary { background: linear-gradient(160deg, var(--rb-accent) 20%, color-mix(in srgb, var(--rb-accent) 78%, #063032)); }
button.ghost {
  background: rgba(255,255,255,.02);
  color: var(--text-dim);
  border: 1px solid var(--card-border);
}
button.ghost:hover { color: var(--rb-accent2); border-color: var(--rb-accent-dim); background: rgba(255,255,255,.02); filter: none; box-shadow: none; }
button.small { padding: 4px 9px; font-size: .78rem; gap: 5px; }
button.small .icon { width: 13px; height: 13px; }
button.danger-ghost:hover { color: var(--rb-red); border-color: var(--rb-red); }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid var(--rb-accent);
  outline-offset: 2px;
}

input, select, textarea {
  background: var(--bg-soft);
  border: 1px solid var(--card-border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: .9rem;
  font-family: inherit;
  min-width: 0;
  transition: border-color var(--tr), box-shadow var(--tr);
}
select { cursor: pointer; }
select option { background: var(--card); color: var(--text); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--rb-accent-dim);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rb-accent) 16%, transparent);
}
input[type="number"] { width: 70px; }

/* ═══ admin gate ═══ */
.rb-gate { display: none; }
html.rb-locked .rb-app { display: none !important; }
html.rb-locked .rb-gate {
  display: flex;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(640px 360px at 50% 30%, color-mix(in srgb, var(--rb-accent) 9%, transparent), transparent 70%),
    var(--bg);
  z-index: 100;
}
.rb-gate-box {
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, var(--rb-accent)), var(--card) 55%);
  border: 1px solid var(--rb-glass-border);
  border-radius: var(--radius);
  padding: 30px 38px;
  text-align: center;
  max-width: min(90vw, 380px);
  box-shadow: var(--rb-shadow-2);
}
.rb-gate-box h2 { display: flex; align-items: center; justify-content: center; gap: 9px; }
.rb-gate-box p { color: var(--text-dim); margin: 8px 0 18px; }

/* ═══ topbar ═══ */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: linear-gradient(180deg, var(--bg-soft), var(--card));
  border-bottom: 1px solid var(--card-border);
  position: sticky;
  top: 0;
  z-index: 40;
}
/* glass topbar — jen kde backdrop-filter existuje (fallback = gradient výš) */
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .topbar {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--bg-soft) 74%, transparent),
      color-mix(in srgb, var(--card) 66%, transparent));
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    backdrop-filter: blur(12px) saturate(1.15);
  }
}
.topbar .back { color: var(--text-dim); display: flex; padding: 6px; border-radius: var(--radius-sm); transition: color var(--tr), background-color var(--tr); }
.topbar .back:hover { color: var(--rb-accent2); background: rgba(255,255,255,.04); }
.topbar .back .icon { width: 18px; height: 18px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.stats { color: var(--text-dim); font-size: .8rem; white-space: nowrap; }

/* ═══ navigace appky (injektuje nav.js do topbaru) ═══ */
.rb-nav { display: flex; gap: 3px; margin-left: 8px; min-width: 0; overflow-x: auto; }
.rb-nav a {
  color: var(--text-dim);
  text-decoration: none;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .84rem;
  white-space: nowrap;
  transition: color var(--tr), background-color var(--tr), box-shadow var(--tr);
}
.rb-nav a:hover { color: var(--rb-accent2); background: rgba(255,255,255,.04); }
.rb-nav a.on {
  color: var(--rb-accent2);
  background: color-mix(in srgb, var(--rb-accent) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rb-accent) 35%, transparent);
}

/* ═══ flex řetěz od <body> k .layout (JEN builder s otevřeným editorem) ═══
   body je flex sloupec a .layout se na něj spoléhá (`flex: 1; min-height: 0`
   níž). Mezi nimi ale stojí .rb-app a v builderu ještě #editor — dokud byly
   oba `display: block`, `flex: 1` neplatilo a .mid (scroll kontejner
   virtualizace) narostl na obsah: celý katalog v DOM (949 dlaždic / ~13 500
   uzlů) a `.rb-holo-anim` na KAŽDÉ vlastněné foil dlaždici v katalogu
   = přímé porušení HOLO v3 pravidla 2. Musí zůstat flex sloupec.
   PROČ TAK ÚZKÝ SELEKTOR: `.rb-app` je sdílená napříč appkou a `flex: 1` +
   `min-height: 0` na ní zastropuje výšku na viewport. Na stránkách, které
   rolují CELÉ (rozcestník /riftbound/, hub builderu), by tím skončil
   containing block sticky topbaru na 100vh a topbar by se od té výšky dolů
   odrolovával pryč (naměřeno). Galerie a proxy maji obdobne pravidlo niz
   (.rb-app:has(> .layout)) — tam je .layout primym ditetem .rb-app.
   POZOR: #editor se skrývá ATRIBUTEM `hidden` a spoléhá na UA pravidlo
   `[hidden] { display: none }` — autorské `display: flex` by ho porazilo
   specificitou a skrytý editor by se odkryl přes hub. Proto `:not([hidden])`
   (a stejná podmínka v `:has()`, ať hub builderu roluje dál po staru).
   (Admin gate `html.rb-locked .rb-app { display: none !important }` výš má
   !important, takže ho tenhle display nepřebije.) */
.rb-app:has(> #editor:not([hidden])) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#editor:not([hidden]) { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* ═══ layout: filtry | grid | deck ═══ */
.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 370px;
  min-height: 0;
}
.filters, .deckpane {
  background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 86%, var(--bg)));
  padding: 14px;
  overflow-y: auto;
  height: calc(100vh - 53px);
  position: sticky;
  top: 53px;
}
.filters { border-right: 1px solid var(--card-border); }
.deckpane { border-left: 1px solid var(--card-border); }

/* galerie: jen filtry | grid (bez deck panelu) */
.layout-2 { grid-template-columns: 250px minmax(0, 1fr); }

/* ═══ builder layout v3 („moxfield"): DECK = hlavní plocha, katalog vpravo ═══
   Jen desktop (≥901 px) — mobil jede na tabech (data-mview) beze změny.
   DOM pořadí: deckpane, filters, mid → grid areas je rozmístí nezávisle;
   filtry jsou horní „šuplík" katalogového sloupce (přepíná .show-filters,
   tlačítko Filtry v topbaru builderu). */
@media (min-width: 901px) {
  .layout-builder {
    grid-template-columns: minmax(0, 1fr) 430px;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "deck filters" "deck catalog";
  }
  .layout-builder .deckpane {
    grid-area: deck;
    border-left: none;
    border-right: 1px solid var(--card-border);
    padding: 16px 22px;
    /* výšku určuje řádek gridu (layout má konečnou výšku, viz .rb-app/#editor
       flex řetěz) — `height: calc(100vh - 53px)` + sticky ze třísloupcového
       layoutu by tady přetekly o výšku .ed-top a rolovala by se celá stránka */
    height: auto;
    min-height: 0;
    position: static;
  }
  .layout-builder .filters {
    grid-area: filters;
    display: none;
    position: static;
    height: auto;
    max-height: 44vh;
    border-right: none;
    border-bottom: 1px solid var(--card-border);
  }
  .layout-builder.show-filters .filters { display: block; }
  .layout-builder .mid {
    grid-area: catalog;
    height: auto;
    min-height: 0;
  }
  /* validace + statistiky + otvírací ruka vedle sebe (hlavní plocha je
     široká; auto-fit sloupce se na užším okně samy zalamují) */
  .layout-builder .deck-lower {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0 26px;
    align-items: start;
    max-width: 1400px;
  }
  .layout-builder .deck-top,
  .layout-builder #deck-name,
  .layout-builder .deck-top2 { max-width: 1400px; }
}

/* ═══ deck board (vizuální zobrazení decku — karty s arty) ═══ */
.deck-viewtog { display: inline-flex; gap: 4px; }
.deck-viewtog .on {
  color: var(--rb-accent2);
  border-color: var(--rb-accent);
  box-shadow: 0 0 8px -3px color-mix(in srgb, var(--rb-accent) 60%, transparent);
}
.bgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 9px;
  margin: 4px 0 12px;
}
.bgrid-land { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.bcard {
  position: relative;
  aspect-ratio: 744 / 1039;
  border-radius: 4.5% / 3.2%;
  overflow: hidden;
  background: var(--bg-soft);
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent);
  box-shadow: var(--rb-shadow-1);
  transition: border-color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.bcard:hover {
  border-color: color-mix(in srgb, var(--rb-accent) 60%, transparent);
  transform: translateY(-3px);
  box-shadow: var(--rb-shadow-2);
  z-index: 2;
}
.bcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* battlefieldy: soubory jsou uložené NA ŠÍŘKU (konvence celé appky — detail,
   preview i varianty je zobrazují přirozeně; jedině portrait dlaždice
   katalogu je otáčí, grid.js landStyle). Landscape dlaždice boardu = žádná
   rotace, obrázek ji vyplní zděděným .bcard img pravidlem. */
.bcard.bland { aspect-ratio: 1039 / 744; }
.bcnt {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 2;
  padding: 1px 8px;
  border-radius: 10px;
  background: rgba(8, 10, 14, .8);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bctl {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  display: none;
  gap: 4px;
}
.bcard:hover .bctl, .bcard:focus-within .bctl { display: inline-flex; }
.bctl button {
  padding: 2px 9px;
  font-size: .82rem;
  border-radius: 8px;
  background: rgba(8, 10, 14, .85);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
}
.bctl button:hover { color: var(--rb-accent2); border-color: var(--rb-accent); filter: none; box-shadow: none; }
.cat-filters-btn.on {
  color: var(--rb-accent2);
  border-color: var(--rb-accent);
}
.sec-gap { display: inline-block; width: 18px; }
@media (max-width: 900px) {
  .cat-filters-btn { display: none; }    /* mobil má tab Filtry */
  .deck-viewtog { margin-left: auto; }
}

/* střední sloupec je vlastní scroll kontejner (virtualizace gridu) */
.mid {
  position: relative;
  overflow-y: auto;
  height: calc(100vh - 53px);
  padding: 12px 16px;
  min-width: 0;
}

/* ═══ DVA SCROLLBARY (oprava 2026-08-23) ═══
   .mid, .filters i .deckpane si výšku počítaly z magické konstanty
   `calc(100vh - 53px)` / `top: 53px`, jenže topbar mezitím vyrostl na 55 px.
   Rozdíl 2 px přetekl přes viewport, takže vedle vnitřního scrollbaru gridu
   měla svůj scrollbar i celá stránka (naměřeno: .mid začíná na 55 px, měří
   747 px → spodek 802 px při okně 800 px).
   Konstantu proto nedopočítáváme znovu (rozešla by se zas) — na galerii a
   proxy, kde je .layout PŘÍMÝM dítětem .rb-app a stránka se rolovat nemá,
   výšku dopočítá flex. Builder tohle pravidlo nechytí (jeho .layout sedí
   uvnitř #editor, viz flex řetěz výš), hub ani rozcestník taky ne — ty rolují
   celé a zastropování na 100vh by jim urvalo sticky topbar.
   JEN DESKTOP. Zkoušel jsem to pustit i na mobil a ZMĚŘENĚ to rozbilo
   virtualizaci: ve stacked layoutu (max-width:900px) nemá .layout definitní
   výšku, takže .mid { height:auto } narostl na obsah — 1466 dlaždic v DOM
   a přetok 208 000 px. Mobil si proto drží svou `calc(100dvh - …)` (viz
   sekce MOBIL níž). */
@media (min-width: 901px) {
  .rb-app:has(> .layout) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .rb-app:has(> .layout) > .layout { flex: 1; min-height: 0; }
  .rb-app:has(> .layout) .mid,
  .rb-app:has(> .layout) .filters,
  .rb-app:has(> .layout) .deckpane { height: auto; min-height: 0; position: static; }
}
.grid-outer { position: relative; }
.grid-layer { position: absolute; inset: 0 0 auto 0; }
.result-meta { color: var(--text-dim); font-size: .76rem; margin-bottom: 8px; min-height: 1em; }
.empty { color: var(--text-dim); text-align: center; padding: 50px 0; }

/* ═══ filtry ═══ */
.fsearch { position: relative; margin-bottom: 12px; }
.fsearch .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-dim); }
.fsearch input { width: 100%; padding-left: 32px; }
/* skupiny filtrů jako jemné panely — vizuální hierarchie (fancy pass) */
.fgroup {
  margin: 9px 0;
  padding: 9px 11px;
  background: color-mix(in srgb, var(--bg-soft) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 65%, transparent);
  border-radius: 10px;
}
.flabel {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.frow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.frow .dash { color: var(--text-dim); }
.chk { display: inline-flex; gap: 6px; align-items: flex-start; color: var(--text-dim); font-size: .82rem; cursor: pointer; }
.chk input { accent-color: var(--rb-accent); margin-top: 2px; }
.fgroup select { width: 100%; }
.grid-help { color: var(--text-dim); font-size: .72rem; line-height: 1.5; opacity: .85; }

.dom-row { display: flex; gap: 5px; flex-wrap: wrap; }
.dom-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  padding: 0;
  background: var(--bg-soft);
  border: 2px solid var(--card-border);
  color: var(--dc, var(--text-dim));
  font-weight: 700;
  font-size: .82rem;
  filter: none;
}
.dom-btn:hover { background: var(--bg-soft); border-color: var(--dc); filter: none; box-shadow: 0 0 12px -4px var(--dc); }
.dom-btn.on {
  border-color: var(--dc);
  background: color-mix(in srgb, var(--dc) 28%, var(--bg-soft));
  color: var(--text);
  box-shadow: 0 0 12px -3px var(--dc);
}
/* SVG runa uvnitř kulatého tlačítka domény */
.dom-btn .rb-dicon { width: 16px; height: 16px; display: block; margin: auto; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  background: var(--bg-soft);
  border: 1px solid var(--card-border);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .76rem;
  font-weight: 500;
  filter: none;
}
.chip:hover { background: var(--bg-soft); color: var(--text); border-color: var(--rb-accent-dim); filter: none; box-shadow: none; }
.chip.on {
  background: color-mix(in srgb, var(--rb-accent) 18%, var(--bg-soft));
  color: var(--rb-accent2);
  border-color: var(--rb-accent);
  box-shadow: 0 0 10px -4px color-mix(in srgb, var(--rb-accent) 60%, transparent);
}
/* rarity gem v chipu filtru (sjednocení s detailem karty) */
.chip .rb-gem { width: 8px; height: 8px; margin: 0 6px 0 0; vertical-align: 0; }

/* ═══ grid dlaždice ═══ */
.rb-tile { position: absolute; top: 0; left: 0; cursor: pointer; }
/* hover lift + glow jde na .rb-thumb — transform .rb-tile drží virtualizace! */
.rb-thumb {
  position: relative;
  border-radius: 4.5% / 3.5%;
  overflow: hidden;
  border: 1px solid var(--card-border);
  background: var(--bg-soft);
  transition: border-color var(--tr), box-shadow var(--tr), transform var(--tr);
}
.rb-tile:hover .rb-thumb {
  border-color: color-mix(in srgb, var(--rb-accent) 55%, var(--card-border));
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.55), var(--rb-glow);
  transform: translateY(-3px);
}
.rb-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* placeholder pod obrázkem — appka funguje i bez stažených obrázků */
.rb-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  text-align: center;
}
.rb-ph b { font-size: .8rem; line-height: 1.25; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.rb-ph i { font-style: normal; font-size: .68rem; color: var(--text-dim); }
.rb-ph-big { position: static; aspect-ratio: 5 / 7; border-radius: 8px; }
.rb-ph-big b { font-size: 1rem; }

.rb-cost {
  position: absolute;
  top: 5px; left: 5px;
  min-width: 22px; height: 22px;
  padding: 0 4px;
  border-radius: 7px;
  background: rgba(10,14,18,.82);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  font-size: .78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.rb-cost i { font-style: normal; font-size: .62rem; opacity: .85; margin-left: 2px; }
.rb-info {
  position: absolute;
  top: 4px; right: 4px;
  width: 24px; height: 24px;
  padding: 0;
  border-radius: 50%;
  background: rgba(10,14,18,.75);
  color: #dfe6ea;
  border: 1px solid rgba(255,255,255,.25);
  font-size: .72rem;
  font-style: italic;
  font-family: Georgia, serif;
  opacity: 0;
  transition: opacity .12s ease;
}
.rb-tile:hover .rb-info, .rb-info:focus-visible { opacity: 1; }
.rb-info:hover { background: var(--rb-accent); color: var(--rb-btn-fg); }
.rb-tname {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: .72rem;
  color: var(--text-dim);
}
.rb-tname span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-illegal { opacity: .35; }
.rb-illegal:hover { opacity: .8; }

/* ═══ rarity rámeček dlaždice (galerie — opts.rarityFrames) ═══
   Barva = proměnné --rb-rf-*, které v tmavém tématu sedí na gemových
   --rb-r-*, takže gem v chipu filtru a rámeček karty mluví jednou řečí;
   ve světlém tématu se ztmaví JEN rámeček (gem je oficiální ikona/gradient
   a nemění se — viz komentář u :root).
   PERF: nekreslí se NIC navíc — jen border-color/-width na .rb-thumb, který
   border už má. Žádný element, žádný ::before, žádný filter, žádná animace
   a hlavně žádná gradientová vrstva k rasterizaci. Duhová ultimate a
   dvoutónové promo jedou přes ČTYŘHODNOTOVÝ border-color (top/right/bottom/
   left): respektuje border-radius (border-image ho ignoruje) a stojí přesně
   tolik co jednobarevný rámeček.
   .rb-thumb má box-sizing: border-box a pevnou inline výšku → tloušťka 2px
   NEMĚNÍ geometrii gridu, jen o pixel osekne plochu obrázku.
   HOVER přebíjí raritu ZÁMĚRNĚ: .rb-tile:hover .rb-thumb má specificitu
   0,3,0 proti 0,2,0 tady, akcentní okraj tedy zůstává čitelným stavem.
   .rb-unowned šedí jen img/.rb-ph UVNITŘ, takže rámeček nevlastněné („zamčené")
   karty zůstává barevný — je to metadata o kartě, ne její art.
   Holo vrstva ::before leží uvnitř .rb-thumb (inset: 0 = plocha po okraj,
   navíc overflow: hidden), rámeček je nad ní a nekoliduje. */
.rb-thumb.rb-r-common, .rb-thumb.rb-r-uncommon, .rb-thumb.rb-r-rare,
.rb-thumb.rb-r-epic, .rb-thumb.rb-r-showcase, .rb-thumb.rb-r-ultimate,
.rb-thumb.rb-r-promo { border-width: 2px; }
.rb-thumb.rb-r-common   { border-color: var(--rb-rf-common); }
.rb-thumb.rb-r-uncommon { border-color: var(--rb-rf-uncommon); }
.rb-thumb.rb-r-rare     { border-color: var(--rb-rf-rare); }
.rb-thumb.rb-r-epic     { border-color: var(--rb-rf-epic); }
.rb-thumb.rb-r-showcase { border-color: var(--rb-rf-showcase); }
.rb-thumb.rb-r-ultimate {
  border-color: var(--rb-rf-ultimate) var(--rb-rf-ultimate2) var(--rb-rf-ultimate3) var(--rb-rf-ultimate4);
}
.rb-thumb.rb-r-promo {
  border-color: var(--rb-rf-promo2) var(--rb-rf-promo) var(--rb-rf-promo) var(--rb-rf-promo2);
}

/* ═══ hlavička skupiny (galerie — opts.groupBy) ═══
   Vlastní vizuální řádek v mapě řádků gridu (výška = GROUP_HDR_H v grid.js,
   posílá se inline, ať se JS a CSS nemůžou rozejít). Absolutní pozice jako
   dlaždice, ale přes celou šířku vrstvy.
   pointer-events: pruh sám je INERTNÍ (levná pojistka — táhne se přes celou
   šířku vrstvy a nemá co brát vstup dlaždicím), ale oba texty uvnitř si
   hit-testing berou zpátky (pointer-events: auto), jinak by jejich `title`
   byl mrtvý kód. Překryv s dlaždicemi NEHROZÍ: buildRows() dává hlavičce
   VLASTNÍ řádek výšky GROUP_HDR_H, dlaždicový pás začíná až za ním (ověřeno
   elementFromPoint — hit-test dlaždic se nezměnil). */
.rb-ghead {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  padding: 0 2px 6px;
  border-bottom: 1px solid var(--card-border);
  color: var(--text);
  font-size: .82rem;
  font-weight: 600;
  pointer-events: none;
}
.rb-ghead .rb-gem { margin: 0 0 1px; }
.rb-ghead svg { width: 15px; height: 15px; margin-bottom: 1px; flex-shrink: 0; }
.rb-gh-lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-gh-n {
  margin-left: auto;
  color: var(--text-dim);
  font-weight: 500;
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
/* texty hlavičky smí brát myš — bez toho by `title` (význam poměru, plný
   název useknutého setu) nikdy nevyjel; kurzor „help" to zároveň prozradí */
.rb-gh-lab, .rb-gh-n { pointer-events: auto; cursor: help; }

/* pip domény — barevný puntík se SVG runou uvnitř (fancy pass) */
.dpip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px; height: 13px;
  border-radius: 50%;
  flex-shrink: 0;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.dpip .rb-dicon { width: 9px; height: 9px; display: block; }
.dpip-none { background: transparent; border: 1px solid var(--text-dim); box-shadow: none; width: 9px; height: 9px; }
.dpips { display: inline-flex; gap: 3px; align-items: center; }

/* ═══ symboly v textu karet (renderText) ═══ */
.rb-sym {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px; height: 17px;
  padding: 0 2px;
  font-size: .72rem;
  font-weight: 700;
  vertical-align: -3px;
  color: #fff;
}
.rb-energy {
  background: #46525e;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.rb-rune { border-radius: 50%; }
/* SVG runa v textovém symbolu (renderText) — velikost přes atributy 11×11,
   tady jen jistota zarovnání */
.rb-sym .rb-dicon { display: block; }
.rb-d-fury { background: var(--rb-fury); }
.rb-d-calm { background: var(--rb-calm); }
.rb-d-mind { background: var(--rb-mind); }
.rb-d-body { background: var(--rb-body); }
.rb-d-chaos { background: var(--rb-chaos); }
.rb-d-order { background: var(--rb-order); color: #3a3008; }
.rb-might, .rb-exhaust, .rb-pt { background: none; color: var(--rb-accent); min-width: 0; padding: 0; font-size: .9em; }
.rb-kw { color: var(--rb-accent2); }

/* ═══ hover preview ═══ */
.rb-preview {
  position: fixed;
  z-index: 70;
  width: 300px;
  max-height: 74vh;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--rb-glass-border);
  border-radius: var(--radius);
  box-shadow: var(--rb-shadow-2);
  padding: 12px 14px;
  pointer-events: none;
  font-size: .84rem;
  line-height: 1.5;
}
/* glass náhled — jen s podporou backdrop-filter (fallback = plný --card) */
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .rb-preview {
    background: var(--rb-glass);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
  }
}
.rb-preview .pv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rb-preview .pv-head b { font-family: var(--serif); color: var(--rb-accent2); font-size: .95rem; }
.rb-preview .pv-head .rb-cost { position: static; }
.rb-preview .pv-type { color: var(--text-dim); font-size: .74rem; margin: 3px 0 6px; }
.rb-preview .pv-img img { width: 130px; border-radius: 6px; display: block; margin: 4px 0; }
.rb-preview .pv-stat { color: var(--rb-accent); font-weight: 600; font-size: .8rem; margin: 4px 0; }
.rb-preview .pv-text { margin: 6px 0; }
.rb-preview .pv-cs { color: var(--text-dim); border-top: 1px dashed var(--card-border); margin-top: 6px; padding-top: 6px; }
.rb-preview .pv-flavor { color: var(--text-dim); font-style: italic; font-size: .78rem; margin-top: 6px; }
.rb-preview .pv-meta { color: var(--text-dim); font-size: .7rem; margin-top: 8px; }
@media (hover: none) {
  .rb-preview { display: none !important; }
}

/* ═══ deck panel ═══ */
.deck-top { display: flex; gap: 6px; margin-bottom: 8px; }
.deck-top select { flex: 1; padding: 5px 8px; font-size: .84rem; }
#deck-name {
  width: 100%;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--rb-accent2);
  background: transparent;
  border: 1px solid transparent;
  margin-bottom: 8px;
}
#deck-name:hover, #deck-name:focus { border-color: var(--card-border); background: var(--bg-soft); }
.deck-top2 { display: flex; gap: 6px; align-items: center; margin-bottom: 12px; }

.sec { margin-bottom: 14px; }
.sec-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--serif);
  font-size: .9rem;
  color: var(--rb-accent);
  border-bottom: 1px solid color-mix(in srgb, var(--rb-accent) 24%, var(--card-border));
  padding-bottom: 3px;
  margin-bottom: 5px;
}
.cnt { font-family: "Segoe UI", system-ui, sans-serif; font-size: .78rem; color: var(--rb-green); font-variant-numeric: tabular-nums; }
.cnt.bad { color: var(--rb-red); font-weight: 700; }
.sec-hint { color: var(--text-dim); font-size: .76rem; margin: 4px 0; }
.dgroup-h { color: var(--text-dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; margin: 7px 0 2px; }

/* řádek decku (moxfield styl): výřez artu karty v pozadí + čitelnostní
   gradient; obsah leží nad ním (z-index), ovládání −/+ se ukazuje na hoveru */
.drow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  margin-bottom: 3px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: .84rem;
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--tr), transform var(--tr);
}
.drow .dart {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: 150% auto;
  background-position: 50% 22%;      /* portrét: výřez ilustrace nad textboxem */
  opacity: .58;
  transition: opacity var(--tr), transform var(--tr);
}
.drow .dart-land { background-size: cover; background-position: 50% 42%; }
/* přechod: vlevo (počet + jméno) plně čitelné pozadí, vpravo art prosvítá */
.drow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--bg) 4%,
    color-mix(in srgb, var(--bg) 74%, transparent) 38%,
    color-mix(in srgb, var(--bg) 22%, transparent) 100%);
}
.drow > *:not(.dart) { position: relative; z-index: 2; }
.drow:hover { border-color: color-mix(in srgb, var(--rb-accent) 45%, transparent); }
.drow:hover .dart { opacity: .72; transform: scale(1.04); }
.drow-miss { padding: 3px 6px; }
.drow .dcount {
  color: var(--text);
  min-width: 26px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
/* počet kusů ve sbírce — tichý štítek vpravo od ceny */
.drow .down {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-soft) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 70%, transparent);
  color: var(--text-dim);
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
/* kusy zamčené v preconech (postavitelnost) */
.own-precon { color: var(--text-dim); font-size: .74rem; }
.drow .dname {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  justify-content: flex-start;   /* globální button je flex → jinak by se text centroval */
  padding: 2px 0;
  font-weight: 400;
  text-shadow: 0 1px 3px var(--bg);   /* čitelnost nad artem */
}
.drow .dname:hover { color: var(--rb-accent2); }
.drow .dname.miss { color: var(--rb-red); }
.drow .dcost {
  color: var(--text);
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-soft) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 70%, transparent);
  text-align: center;
}
.drow .dctl { display: none; gap: 2px; }
.drow:hover .dctl, .drow:focus-within .dctl { display: inline-flex; }
.drow .dctl button {
  padding: 1px 6px;
  font-size: .72rem;
  background: var(--bg-soft);
  color: var(--text-dim);
  border: 1px solid var(--card-border);
}
.drow .dctl button:hover { color: var(--rb-accent2); border-color: var(--rb-accent-dim); filter: none; box-shadow: none; }

/* zvýraznění po kliku na porušení validace */
.drow.rb-hl { background: color-mix(in srgb, var(--rb-red) 22%, var(--bg-soft)); outline: 1px solid var(--rb-red); }

/* ═══ validace ═══ */
.vblock { margin-top: 18px; }
.v-ok { color: var(--rb-green); font-size: .84rem; }
.vrow {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg-soft);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--rb-red);
  color: var(--text);
  font-weight: 400;
  font-size: .78rem;
  border-radius: 6px;
  padding: 5px 9px;
  margin: 4px 0;
  line-height: 1.4;
  filter: none !important;
  box-shadow: none !important;
}
.vrow:hover { background: var(--bg-soft); border-color: var(--rb-red); }
.vrow.sev-warning { border-left-color: var(--rb-order); }
.vrow.sev-warning:hover { border-color: var(--rb-order); }

/* ═══ statistiky ═══ */
.sblock { margin-top: 18px; }
.stat-sub {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-dim);
  margin: 12px 0 6px;
}
.curve { display: flex; align-items: flex-end; gap: 4px; height: 84px; }
.cbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; justify-content: flex-end; }
.cbar .bar {
  width: 100%;
  background: linear-gradient(180deg, var(--rb-accent), var(--rb-accent-dim));
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}
.cbar .bval { font-size: .66rem; color: var(--text); min-height: 1em; }
.cbar .blbl { font-size: .66rem; color: var(--text-dim); }

.stackbar { display: flex; height: 13px; border-radius: 999px; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--card-border); }
.stackbar span { display: block; height: 100%; }
.stack-legend { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 5px; font-size: .72rem; color: var(--text-dim); }
.stack-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; }

.stat-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.stat-table td { padding: 2px 0; color: var(--text); }
.stat-table td:last-child { text-align: right; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.hyp-list { max-height: 180px; overflow-y: auto; border: 1px solid var(--card-border); border-radius: 8px; padding: 6px 8px; background: var(--bg-soft); }
.hyp-row { display: flex; gap: 6px; align-items: center; font-size: .78rem; color: var(--text); cursor: pointer; padding: 1px 0; }
.hyp-row input { accent-color: var(--rb-accent); }
.hyp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; font-size: .8rem; color: var(--text-dim); flex-wrap: wrap; }
.hyp-foot select { padding: 3px 6px; font-size: .8rem; }
.hyp-p { color: var(--rb-accent2); font-size: .95rem; font-variant-numeric: tabular-nums; }

/* ═══ dialogy ═══ */
dialog {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--rb-glass-border);
  border-radius: var(--radius);
  padding: 0;
  max-width: min(760px, 94vw);
  max-height: 90vh;
  box-shadow: var(--rb-shadow-2);
}
dialog[open] { animation: rb-dlg-in .2s ease; }
@keyframes rb-dlg-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
}
dialog::backdrop { background: rgba(8,6,12,.62); }
@supports ((backdrop-filter: blur(5px)) or (-webkit-backdrop-filter: blur(5px))) {
  dialog::backdrop {
    background: rgba(8,6,12,.45);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }
}
.dlg-body { padding: 18px; overflow-y: auto; max-height: 88vh; position: relative; }
.dlg-close { position: absolute; top: 10px; right: 10px; z-index: 1; }

.card-detail { display: grid; grid-template-columns: 280px 1fr; gap: 18px; }
.card-detail .cd-img {
  border-radius: 8px;
  overflow: hidden;
  align-self: start;
  aspect-ratio: 5 / 7;
  position: relative;
}
.card-detail .cd-img img.dimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* landscape karty (battlefieldy): v detailu přirozeně na šířku, ne ořez */
.card-detail .cd-img:has(img.dimg-land) { aspect-ratio: 7 / 5; }
/* otočení oboustranného tokenu (detail): tlačítko POD obrázkem v levém
   sloupci gridu — scoped přes :has, ať bez flipu (a na mobilu, kde je grid
   jednosloupcový) layout zůstává netknutý */
.card-detail .cd-flip { display: block; margin: 6px 0 0; grid-column: 1; grid-row: 2; justify-self: center; }
.card-detail:has(.cd-flip) .cd-info { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 900px) {
  .card-detail .cd-flip { grid-column: auto; grid-row: auto; }
  .card-detail:has(.cd-flip) .cd-info { grid-column: auto; grid-row: auto; }
}
.rb-preview .pv-img img.pv-land { width: 182px; }
.vthumb-land img { aspect-ratio: 1039 / 744; object-fit: contain; }
.card-detail h2 {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 4px;
  flex-wrap: wrap;
  /* rezerva pro absolutně posazené ‹ N / M › + ✕ vpravo nahoře, ať dlouhý
     název karty nepodtéká pod ovládání a zalomí se dřív */
  padding-right: 178px;
  min-height: 30px;
}
.card-detail h2 .rb-cost { position: static; }
.card-detail .cd-type { color: var(--text-dim); font-size: .82rem; margin-bottom: 8px; }
.card-detail .cd-stat { color: var(--rb-accent); font-weight: 600; margin-bottom: 8px; }
.card-detail .cd-text { line-height: 1.55; font-size: .92rem; }
.card-detail .cd-flavor { color: var(--text-dim); font-style: italic; font-size: .82rem; margin-top: 8px; }
.card-detail .cd-tr { margin-top: 12px; }
.card-detail .cd-tr label { display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); margin-bottom: 4px; }
.card-detail .cd-tr textarea { width: 100%; resize: vertical; font-size: .86rem; }
.card-detail .cd-meta { color: var(--text-dim); font-size: .76rem; margin-top: 10px; }
.card-detail .cd-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

.dlg-import-body { width: min(520px, 94vw); }
.dlg-import-body textarea {
  width: 100%;
  font-family: Consolas, monospace;
  font-size: .78rem;
  resize: vertical;
  margin-top: 8px;
}
.dlg-import-body .imp-note { color: var(--text-dim); font-size: .78rem; margin: 6px 0 10px; line-height: 1.5; }
.dlg-import-body .imp-warn { color: var(--rb-red); font-size: .78rem; margin: 8px 0; max-height: 90px; overflow-y: auto; }
.dlg-import-body .nactions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
#imp-file { width: 100%; font-size: .78rem; }

/* ═══ domovská stránka ═══ */
.home { width: 100%; max-width: 1080px; margin: 0 auto; padding: 30px 22px 60px; }

/* hero s gradient mesh pozadím (fancy pass) */
.hero { position: relative; text-align: center; margin-bottom: 36px; padding: 34px 10px 6px; }
.hero::before {
  content: '';
  position: absolute;
  inset: -26px -14px 0;
  border-radius: 26px;
  pointer-events: none;
  background:
    radial-gradient(430px 210px at 22% 12%, color-mix(in srgb, var(--rb-accent) 13%, transparent), transparent 70%),
    radial-gradient(520px 250px at 78% 6%, rgba(122,90,190,.13), transparent 70%),
    radial-gradient(360px 210px at 55% 92%, color-mix(in srgb, var(--rb-accent) 7%, transparent), transparent 70%);
}
.hero > * { position: relative; }
.hero-title { font-size: 2.2rem; margin: 0 0 6px; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-title {
    background: linear-gradient(115deg, var(--rb-accent2) 15%, var(--rb-accent) 50%, #9b83dd 95%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
.hero-sub { color: var(--text-dim); margin: 0 0 22px; }
.hero-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left; }

/* dlaždice s hover glow (kontrakt: „dlaždice s hover parallax/glow“) */
.tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(170deg, var(--card), color-mix(in srgb, var(--card) 90%, var(--bg)));
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 20px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.tile::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(320px 180px at 28% -8%, color-mix(in srgb, var(--rb-accent) 15%, transparent), transparent 72%);
  transition: opacity .22s ease;
}
.tile:hover {
  border-color: color-mix(in srgb, var(--rb-accent) 45%, var(--card-border));
  transform: translateY(-3px);
  box-shadow: var(--rb-shadow-1), var(--rb-glow);
}
.tile:hover::after { opacity: 1; }
.tile .icon { width: 26px; height: 26px; color: var(--rb-accent); transition: transform .2s ease; }
.tile:hover .icon { transform: scale(1.12) translateY(-1px); }
.tile b { font-family: var(--serif); font-size: 1.06rem; color: var(--rb-accent2); }
.tile span { color: var(--text-dim); font-size: .82rem; line-height: 1.5; }

.home-sec { margin-bottom: 36px; }
.home-sec-h {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--rb-accent) 22%, var(--card-border));
  padding-bottom: 7px;
  margin-bottom: 14px;
}
.home-sec-h h2 { margin: 0; font-size: 1.05rem; }
.home-empty { padding: 10px 0; font-size: .88rem; }

/* min(310px, 100%): na velmi úzkém displeji se dlaždice nesmí rozšířit přes stránku */
.deck-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: 12px; }
.deck-card {
  display: flex;
  gap: 12px;
  background: linear-gradient(170deg, var(--card), color-mix(in srgb, var(--card) 90%, var(--bg)));
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 12px;
  transition: border-color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.deck-card:hover {
  border-color: color-mix(in srgb, var(--rb-accent) 35%, var(--card-border));
  transform: translateY(-2px);
  box-shadow: var(--rb-shadow-1);
}
.dk-thumb {
  width: 56px;
  height: 78px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  background: var(--bg-soft);
  border: 1px solid var(--card-border);
}
.dk-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dk-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dk-name { font-family: var(--serif); color: var(--rb-accent2); font-size: .98rem; display: flex; align-items: center; gap: 7px; min-width: 0; }
.dk-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-valid { flex-shrink: 0; font-size: .84rem; font-family: "Segoe UI", system-ui, sans-serif; }
.dk-valid.ok { color: var(--rb-green); }
.dk-valid.bad { color: var(--rb-red); }
.dk-meta { color: var(--text-dim); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; flex-wrap: wrap; }

/* odkaz i button ve stejném kabátě (akce v kartě decku) */
.btnlike {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  font-size: .78rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.02);
  color: var(--text-dim);
  border: 1px solid var(--card-border);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--tr), border-color var(--tr), background-color var(--tr);
  filter: none !important;
  box-shadow: none !important;
}
.btnlike:hover { color: var(--rb-accent2); border-color: var(--rb-accent-dim); background: rgba(255,255,255,.02); }
.btnlike.danger:hover { color: var(--rb-red); border-color: var(--rb-red); }

.db-box {
  background: linear-gradient(170deg, var(--card), color-mix(in srgb, var(--card) 90%, var(--bg)));
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--text-dim);
  font-size: .86rem;
  line-height: 1.7;
}
.db-box b { color: var(--text); }

/* ═══ sbírka (badge ×n + ✦n, hover −/+ overlay, filtr, řádky v detailu) ═══ */
/* badge vlevo dole — nekoliduje s cenou (vlevo nahoře), „i“ (vpravo nahoře)
   ani s −/+ overlay (vpravo dole); ztlumení .rb-illegal na dlaždici zůstává.
   Wrapper drží ×n a ✦n (foil) vedle sebe. */
.rb-ownwrap {
  position: absolute;
  left: 5px; bottom: 5px;
  display: flex;
  gap: 4px;
  pointer-events: none;
}
.rb-own {
  padding: 1px 7px;
  border-radius: 9px;
  background: var(--rb-accent);
  color: var(--rb-btn-fg);
  border: 1px solid rgba(255,255,255,.3);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.5;
}
/* foil badge ✦n — duhový nádech, ať je poznat na první pohled */
.rb-foil {
  padding: 1px 7px;
  border-radius: 9px;
  background: linear-gradient(120deg, #8a5fd0, #4a8fd4 55%, #4caf7d);
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.rb-colctl {
  position: absolute;
  right: 4px; bottom: 4px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .12s ease;
}
.rb-tile:hover .rb-colctl,
.rb-colctl:focus-within { opacity: 1; }
.rb-colctl button {
  width: 26px; height: 24px;
  padding: 0;
  border-radius: 7px;
  background: rgba(10,14,18,.78);
  color: #dfe6ea;
  border: 1px solid rgba(255,255,255,.25);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1;
}
.rb-colctl button:hover { background: var(--rb-accent); color: var(--rb-btn-fg); }

.rb-col-minrow { margin-top: 7px; }
.rb-col-minrow label { font-size: .75rem; color: var(--text-dim); }
#f-col-min { width: 74px; }

/* ═══ ceny (TCGplayer market z prices.json) ═══ */
/* badge vpravo nahoře — v klidu viditelný, na hoveru ustoupí tlačítku „i“,
   které sedí na stejném místě (info je do hoveru neviditelné) */
.rb-price {
  position: absolute;
  top: 5px; right: 4px;
  padding: 1px 6px;
  border-radius: 7px;
  background: rgba(10,14,18,.78);
  color: #cfe8d2;
  border: 1px solid rgba(255,255,255,.22);
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transition: opacity .12s ease;
}
.rb-tile:hover .rb-price { opacity: 0; }

/* řádek Cena v detail modalu — „Cena $X · Foil $Y“ když foil cena existuje */
.cd-price { margin-top: 8px; font-size: .85rem; }
.cd-price .cd-price-label { color: var(--text-dim); }
.cd-price b { color: var(--rb-accent2); font-variant-numeric: tabular-nums; }
.cd-price .cd-price-low { color: var(--text-dim); font-size: .78rem; }
.cd-price .cd-price-sep { color: var(--text-dim); }
.cd-price .cd-price-foilv {
  /* duhový text — fallback barva pro prohlížeče bez background-clip:text */
  color: #9b7bd8;
  background: linear-gradient(100deg, #c78fff, #6fb2ff 55%, #7fe0a8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ═══ HOLO efekt foil karet — .rb-foil-owned (v4, 2026-08-27) ═══
   Vlastní implementace techniky „pokemon-cards-css" (simeydotme; GPL kód se
   nepřebírá, jen princip): spektrální pásy (repeating-linear) + barevné kolo
   (conic) přes color-dodge, nad tím radiální odlesk přes overlay.

   ZÁSADNÍ ROZDÍL PROTI v1–v3: NEMÍCHÁ SE S TÍM, CO JE POD VRSTVOU.
   `mix-blend-mode` je v gridu ZAKÁZANÝ (viz CONTRACTS.md, sekce HOLO) —
   míchání potřebuje při každém snímku backdrop, takže se každá foil dlaždice
   musí při scrollu znovu skládat a kompozitor to neodbaví (uživatel:
   „když vypnu foil, scroll je smooth, když zapnu, seká se jak blázen" — a to
   už bez animace i bez šumu). Místo toho je ART KARTY POSLEDNÍ VRSTVA POZADÍ
   TÉHOŽ ::before a duha se s ním smíchá přes `background-blend-mode`: to je
   operace při kreslení UVNITŘ elementu, nepotřebuje nic zvenčí, takže se
   dlaždice zrastrizuje JEDNOU a scroll ji nezajímá.
   Art dodává grid.js jako `--rb-art` + třídu `.rb-foil-art`; BEZ artu
   (chybějící/404 obrázek) se vrstva vůbec NEVYTVOŘÍ, jinak by nad
   placeholderem zbyl jen duhový film. Pořadí vrstev v CSS je shora dolů,
   art je proto POSLEDNÍ.
   Klid je STATICKÝ — žádná animace `background-position` (repaint každý
   snímek). Pod kurzorem (grid.js bindHoloPointer → --hx/--hy/--rx/--ry +
   .rb-holo-live) se duha i odlesk řídí kurzorem a karta se naklání; to je
   JEDNA dlaždice, tam si repaint dovolit můžeme. */
.rb-foil-owned {
  position: relative;
  --hx: 50%;
  --hy: 50%;
}
/* VRSTVA JEN TAM, KDE SE VYPLATI (2026-08-27, na zadost uzivatele):
   - .rb-holo-anim = radek je OPRAVDU na obrazovce (grid.js visR0..visR1);
     overscan radky, ktere se kresli dopredu, vrstvu nedostanou;
   - .rb-scrolling = behem scrollu se vrstva vubec nevytvori, takze rychle
     listovani nestoji nic; grid.js ji sundava ~120 ms po zastaveni.
   Obojí pres `content`, tedy vrstva realne NEEXISTUJE, ne ze je jen skryta. */
.rb-scrolling .rb-thumb.rb-foil-art::before,
.rb-thumb.rb-foil-art:not(.rb-holo-anim)::before { content: none; }

.rb-foil-owned.rb-foil-art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    /* odlesk (sleduje kurzor vlastním středem, ne background-position) */
    radial-gradient(farthest-corner circle at var(--hx) var(--hy),
      rgba(255, 255, 255, .20) 5%, rgba(255, 255, 255, .04) 26%, rgba(18, 18, 30, .26) 90%),
    /* spektrální pásy */
    repeating-linear-gradient(115deg,
      rgba(255, 0, 128, .78) 0%, rgba(255, 190, 0, .74) 5%,
      rgba(0, 240, 120, .74) 10%, rgba(0, 170, 255, .78) 15%,
      rgba(150, 60, 255, .76) 20%, rgba(255, 0, 128, .78) 25%),
    /* barevné kolo */
    conic-gradient(from 210deg at var(--hx) var(--hy),
      rgba(255, 40, 140, .55), rgba(255, 185, 30, .45), rgba(40, 235, 130, .48),
      rgba(30, 180, 255, .58), rgba(140, 70, 255, .52), rgba(255, 40, 140, .55)),
    /* ART KARTY — spodní vrstva, tu duha rozzařuje */
    var(--rb-art);
  background-size: 165% 165%, 340% 340%, 140% 140%, cover;
  background-position: center, var(--hx) var(--hy), center, center;
  /* pravidlo 0 (CONTRACTS.md): gradienty jsou větší než vrstva, s výchozím
     `repeat` by v nich byl šev */
  background-repeat: no-repeat;
  /* NE color-dodge: ten dělí podklad (base/(1-blend)), takže i při nízkém
     krytí zvedal jas o +22 až +28 a karty působily vybledle (nález uživatele
     2026-08-27). soft-light přidá lesk bez zesvětlení a "color" vezme jen
     odstín a sytost — luminanci podkladu nechá být, takže si art drží svůj
     kontrast. Kdo sem sáhne, ať to změří: metrika je ZVÝŠENÍ JASU proti
     kartě bez vrstvy, ne "jak je to barevné". */
  background-blend-mode: soft-light, color, color, normal;
  /* síla efektu = průhlednost vrstvy. Pod ní leží TENTÝŽ art (<img>), a to
     přesně zarovnaný, takže .82 znamená „duha na 82 %", ne rozmazaný obrázek
     — a je to kompozice, ne další průchod rasterizace jako filtr. */
  opacity: .5;
}
/* battlefieldy na šířku: <img> je v dlaždici otočený o 90° (grid.js landStyle),
   takže i vrstva s artem musí být otočená a mít PROHOZENÉ osy — `cover` sám
   nic neotočí a art by v dlaždici ležel nakřivo. Rozměry dodává grid.js
   (--rb-artw/--rb-arth) ze STEJNÝCH čísel jako landStyle; ta dvě místa musí
   zůstat v páru (viz CONTRACTS.md, invariant landStyle ↔ --rb-artw). */
.rb-thumb.rb-foil-art.rb-thumb-land::before {
  inset: auto;
  left: 50%;
  top: 50%;
  width: var(--rb-artw);
  height: var(--rb-arth);
  transform: translate(-50%, -50%) rotate(90deg);
  border-radius: 0;   /* ořez drží .rb-thumb (overflow: hidden) */
}
/* pod kurzorem: odlesk se mapuje 1:1 (background-size 100 %) a vrstva jde na
   plnou sílu; duha se hýbe přes background-position (--hx/--hy) — repaint
   JEDNÉ dlaždice, ne celého gridu */
.rb-foil-owned.rb-foil-art.rb-holo-live::before {
  /* HOVER V MRIZCE MA MIT STEJNOU SILU JAKO KLID (prani uzivatele 2026-08-27:
     "obarveni je slabsi a hover je total prepaleny"). Krytí proto zustava
     zdedene z klidu (.5) — meni se JEN mapovani odlesku na 1:1, aby sedel
     presne pod kurzor. Detail karty ma vlastni, silnejsi pravidla nize
     (.cd-img — 4 tridy, vyssi specificita). */
  background-size: 100% 100%, 340% 340%, 140% 140%, cover;
}
/* náklon jen pod kurzorem — perspective() na KAŽDÉ foil dlaždici zakládal
   3D kontext i pro karty, na které nikdo nenajel (jedna ze tří příčin
   100% CPU, viz historie) */
.rb-thumb.rb-foil-owned.rb-holo-live,
.cd-img.rb-foil-owned.rb-holo-live {
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .18s ease-out;
}
/* badge/ovládání dlaždice zůstávají NAD vrstvou (čitelnost, hover ovládání) */
.rb-foil-owned .rb-cost, .rb-foil-owned .rb-info, .rb-foil-owned .rb-price,
.rb-foil-owned .rb-ownwrap, .rb-foil-owned .rb-colctl, .rb-foil-owned .rb-varlab,
.rb-foil-owned .rb-banned { z-index: 2; }
/* detail modal je JEDNA velká karta — vrstva smí být na plno. `cover` tu sedí
   na img.dimg (taky inset: 0 + object-fit: cover) i u landscape, protože se
   celý .cd-img přepne na poměr 7/5. */
/* DETAIL KARTY = JEDINÉ místo, kde smí být mix-blend-mode (2026-08-27, přání
   uživatele: "nech to ale jen když na kartu kliknu a otevře se přiblížení").
   V mřížce je zakázaný, protože míchání potřebuje to, co je POD vrstvou, a
   při scrollu se to mění každý snímek → nedá se nacachovat a scroll se seká.
   V detailu je JEDNA velká karta, nic se nescrolluje a nic nerecykluje,
   takže je to zadarmo a vzhled je bohatší (to je ten "hoverový" lesk, co se
   uživateli líbil).
   Trik, aby se gradienty nemusely psát podruhé: `--rb-art: none` vyřadí
   spodní vrstvu s artem, takže se nemíchá dvakrát (jednou uvnitř vrstvy a
   podruhé proti <img> pod ní) — art dodá až color-dodge zespodu. */
.cd-img.rb-foil-art::before {
  --rb-art: none;
  background-blend-mode: normal;
  mix-blend-mode: color-dodge;
  filter: saturate(1.4) contrast(1.05) brightness(.85);
}
.cd-img.rb-foil-art.rb-foil-detail:not(.rb-holo-live)::before { opacity: .62; }
.cd-img.rb-foil-art.rb-foil-detail.rb-holo-live::before { opacity: .8; }
/* LANDSCAPE + HOVER: vrstva je otočená o 90°, ale --hx/--hy počítá grid.js
   z getBoundingClientRect() dlaždice, tedy v NEOTOČENÉ soustavě — odlesk by
   na battlefieldech jel kolmo ke kurzoru. Než prohazovat osy v JS (další
   párový invariant navíc), necháme u nich glare na středu; efekt tím
   nezmizí, jen kurzor nesleduje. */
.rb-thumb.rb-foil-art.rb-thumb-land.rb-holo-live::before {
  --hx: 50%;
  --hy: 50%;
}
/* holo i v hover preview (grid.js dává .rb-foil-owned na .pv-img wrapper):
   wrapper se smrskne na obrázek a ořízne vrstvu do radiusu karty, ať
   nepřetéká do textu náhledu */
.rb-preview .pv-img.rb-foil-owned {
  display: inline-block;
  margin: 4px 0;
  border-radius: 6px;
  overflow: hidden;
}
.rb-preview .pv-img.rb-foil-owned img { margin: 0; }

/* ZAMČENÁ karta = nevlastněná (jen galerie, opts.lockUnowned): černobíle.
   Kromě vzhledu je to perf pojistka — dřív měly holo i nevlastněné rare+,
   tedy 45 % katalogu. Odznaky/ovládání zůstávají barevné (filtr sedí jen na
   obrázku a placeholderu, ne na .rb-thumb — rarita je metadata, ne art).
   PERF: JEDINÁ filtr funkce — každá další je další průchod rasterizace přes
   celý obrázek. A ŽÁDNÁ změna filtru na hoveru: při scrollu myší nad gridem
   přejíždí kurzor přes dlaždice a každé přepnutí filtru je nová rasterizace
   právě té dlaždice, kterou se scrolluje.
   Foil vrstva sem nespadá: `foilOn()` v gridu dává foil jen VLASTNĚNÉ (tedy
   barevné) kartě, když je černobílý náhled zapnutý — .rb-unowned a
   .rb-foil-art se na téže dlaždici nikdy nepotkají. */
.rb-thumb.rb-unowned img,
.rb-thumb.rb-unowned .rb-ph { filter: grayscale(1); }

@media (prefers-reduced-motion: reduce) {
  /* v klidu se nic nehýbe (v4 nemá žádnou animaci), zbývá vypnout náklon —
     a ten je od v4 JEN na .rb-holo-live, takže selektor musí sedět na něj,
     jinak pravidlo nic nevypíná (nález review 2026-08-23). */
  .rb-thumb.rb-foil-owned.rb-holo-live,
  .cd-img.rb-foil-owned.rb-holo-live { transform: none; transition: none; }
}

/* cena decku ve statistikách builderu */
.deck-price { font-size: .85rem; color: var(--text-dim); margin: 2px 0 10px; }
.deck-price b { color: var(--rb-accent2); font-variant-numeric: tabular-nums; }
.deck-price .dim { font-size: .76rem; }

/* select „Vložit precon do sbírky…“ nad filtry galerie — stejný panel jako .fgroup */
.rb-precon-add {
  margin-bottom: 10px;
  padding: 9px 11px;
  background: color-mix(in srgb, var(--bg-soft) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 65%, transparent);
  border-radius: 10px;
}
.rb-precon-add select { width: 100%; font-size: .82rem; }

/* export/import celé sbírky (galerie, pod precon selectem) */
.rb-col-io {
  margin-bottom: 10px;
  padding: 9px 11px;
  background: color-mix(in srgb, var(--bg-soft) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 65%, transparent);
  border-radius: 10px;
}
.rb-col-io .flabel { margin-bottom: 7px; }
.rb-col-io-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.rb-col-io-btns button { flex: 1 1 auto; }

/* statistiky sbírky (galerie) */
.rb-col-stats {
  margin-bottom: 10px;
  padding: 9px 11px;
  background: color-mix(in srgb, var(--bg-soft) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 65%, transparent);
  border-radius: 10px;
  font-size: .82rem;
}
.rb-col-stats summary {
  cursor: pointer;
  color: var(--text-dim);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  user-select: none;
}
.rb-col-stats[open] summary { margin-bottom: 8px; color: var(--rb-accent2); }
.cs-total { margin-bottom: 8px; }
.cs-total b { color: var(--rb-accent2); font-size: .95rem; }
.cs-set { display: flex; align-items: center; gap: 7px; margin: 3px 0; }
.cs-set-n { width: 34px; color: var(--text-dim); font-size: .72rem; }
.cs-bar {
  flex: 1;
  height: 5px;
  background: color-mix(in srgb, var(--card-border) 55%, transparent);
  border-radius: 3px;
  overflow: hidden;
}
.cs-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--rb-accent-dim), var(--rb-accent));
  border-radius: 3px;
  transition: width var(--tr);
}
.cs-set-v { font-size: .7rem; color: var(--text-dim); min-width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
.cs-rarities { display: flex; gap: 9px; flex-wrap: wrap; margin: 8px 0 0; }
.cs-rar { display: inline-flex; align-items: center; gap: 4px; color: var(--text-dim); }
.cs-top-h { margin: 9px 0 4px; color: var(--text-dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.cs-top { margin: 0; padding-left: 18px; }
.cs-top li { display: flex; gap: 8px; cursor: pointer; padding: 1px 0; }
.cs-top li:hover span { color: var(--rb-accent2); }
.cs-top li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-top li b { font-variant-numeric: tabular-nums; }

/* ═══ varianty (alt art / Showcase / signature / overnumbered) ═══ */
/* štítek ALT / SHOWCASE / SIG / OVER — obsahové barvy, stejné v obou tématech */
.rb-varlab {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.5;
  color: #fff;
  background: #6b5fa8;
  border: 1px solid rgba(255,255,255,.28);
}
.rb-v-alt { background: #6b5fa8; }
.rb-v-showcase { background: #a05fd0; }
.rb-v-signature { background: #b9822e; }
.rb-v-over { background: #4a8fd4; }
/* na dlaždici sedí vpravo nahoře POD cenou (ta na hoveru ustupuje „i“);
   štítek zůstává viditelný pořád */
.rb-var-tile { position: absolute; top: 26px; right: 4px; pointer-events: none; }

/* detail varianty: štítek + odkaz „Základní karta“ */
.cd-variant { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .82rem; }
.cd-var-base {
  background: none;
  border: none;
  padding: 0;
  color: var(--rb-accent2);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cd-var-base:hover { color: var(--rb-accent); background: none; }

/* detail základní karty: sekce Varianty (mini dlaždice) */
.cd-vars { margin-top: 14px; }
.cd-vars-h {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.vtile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 150px;   /* v úzkém modalu (1 sloupec) se dlaždice nenafoukne */
  padding: 5px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--bg-soft);
  cursor: pointer;
}
.vtile:hover, .vtile:focus-visible { border-color: var(--rb-accent-dim); }
.vthumb {
  position: relative;
  aspect-ratio: 5 / 7;
  border-radius: 5px;
  overflow: hidden;
  background: var(--card);
}
.vthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vmeta { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 16px; }
.vprice { color: var(--text-dim); font-size: .68rem; font-variant-numeric: tabular-nums; }
.vcol { display: flex; align-items: center; justify-content: center; gap: 6px; }
.vcol button {
  width: 22px; height: 20px;
  padding: 0;
  font-size: .72rem;
  line-height: 1;
  background: var(--bg-soft);
  color: var(--text-dim);
  border: 1px solid var(--card-border);
  border-radius: 6px;
}
.vcol button:hover { color: var(--rb-accent2); border-color: var(--rb-accent-dim); background: var(--bg-soft); filter: none; box-shadow: none; }
.vcol .vcol-n {
  font-size: .78rem;
  color: var(--rb-accent2);
  min-width: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cd-col {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 10px 0 4px;
}
.cd-col .cd-col-label { color: var(--text-dim); font-size: .85rem; }
.cd-col .cd-col-n {
  color: var(--rb-accent2);
  font-size: 1rem;
  min-width: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cd-col button { width: 30px; height: 27px; padding: 0; line-height: 1; }

/* ═══ detail karty v2 (Effect box, mřížka polí, gemy, pilulky, listování) ═══ */

/* listování ‹ N / M › — sedí vlevo od zavíracího ✕ */
.dlg-nav {
  position: absolute;
  top: 10px;
  right: 52px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dlg-nav button { min-width: 30px; font-size: .95rem; line-height: 1; }
.dlg-nav button[disabled] { opacity: .35; cursor: default; }
.dlg-nav button[disabled]:hover { color: var(--text-dim); border-color: var(--card-border); }
.dlg-nav-pos {
  color: var(--text-dim);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  min-width: 58px;
  text-align: center;
  white-space: nowrap;
}

/* Effect box — text karty v jemně orámovaném panelu */
.cd-effect {
  margin-top: 10px;
  background: color-mix(in srgb, var(--bg-soft) 72%, transparent);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 10px 13px;
}
.cd-effect-h {
  font-size: .64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--rb-accent);
  margin-bottom: 5px;
}
.cd-effect .cd-flavor { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--card-border); }

/* keyword pilulka — [Accelerate], [Assault 2]… s tooltipem z glosáře */
.rb-kwpill {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rb-accent) 14%, var(--bg-soft));
  border: 1px solid color-mix(in srgb, var(--rb-accent) 45%, transparent);
  color: var(--rb-accent2);
  font-size: .82em;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  cursor: help;
}

/* mřížka polí Set / Číslo / Rarita / Energy / Power / Might / Typ / … */
.cd-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 7px;
  margin-top: 12px;
}
.cd-f {
  background: color-mix(in srgb, var(--bg-soft) 72%, transparent);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 6px 9px;
  min-width: 0;
}
.cd-f-l {
  display: block;
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-dim);
  margin-bottom: 3px;
}
.cd-f-v {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: .84rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cd-dom { display: inline-flex; align-items: center; gap: 4px; }

/* rarity gem — kosočtverec s gradientem. Barvy drží proměnné --rb-r-* nahoře
   (rámečky dlaždic mají vlastní sadu --rb-rf-*, ať je gem NEZÁVISLÝ na tématu
   — je to oficiální ikona/gradient). POZOR: dřívější komentář tady tvrdil „uncommon
   zelená, rare modrá, epic fialová" — to NEODPOVÍDÁ oficiálním gem ikonám,
   které se sem daly později. Skutečnost (navzorkováno z icons/RB_*_icon.png):
   common stříbrná, uncommon tyrkysová, rare purpurová, epic oranžová,
   showcase zlatá; ultimate červeno-duhová a promo tyrkys jsou CSS gradienty. */
.rb-gem {
  display: inline-block;
  width: 11px; height: 11px;
  margin: 0 3px 0 1px;
  border-radius: 3px;
  transform: rotate(45deg);
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 1px 3px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.35);
  flex-shrink: 0;
}
/* common..showcase = OFICIÁLNÍ rarity gemy (riftbound/icons/RB_*_icon.png,
   LoL wiki) — obrázek místo CSS kosočtverce; ultimate/promo oficiální ikonu
   nemají, zůstává gradientový gem */
.rb-g-common, .rb-g-uncommon, .rb-g-rare, .rb-g-epic, .rb-g-showcase {
  transform: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  width: 14px; height: 14px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.rb-g-common   { background-image: url(icons/RB_common_icon.png); }
.rb-g-uncommon { background-image: url(icons/RB_uncommon_icon.png); }
.rb-g-rare     { background-image: url(icons/RB_rare_icon.png); }
.rb-g-epic     { background-image: url(icons/RB_epic_icon.png); }
.rb-g-showcase { background-image: url(icons/RB_showcase_icon.png); }
.chip .rb-g-common, .chip .rb-g-uncommon, .chip .rb-g-rare,
.chip .rb-g-epic, .chip .rb-g-showcase { width: 12px; height: 12px; }
/* ultimate (overnumbered/secret rare) — červeno-duhový, výrazný: duhový
   conic přeliv s dominantní červenou + jemný červený glow navíc */
.rb-g-ultimate {
  background: conic-gradient(from 220deg,
    var(--rb-r-ultimate), #ff9d4d 18%, var(--rb-r-ultimate2) 34%, var(--rb-r-ultimate3) 50%,
    var(--rb-r-ultimate4) 66%, #b45ae0 82%, var(--rb-r-ultimate));
  box-shadow: 0 1px 3px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.35),
    0 0 6px rgba(224,49,69,.6);
}
.rb-g-promo    { background: linear-gradient(135deg, var(--rb-r-promo2), var(--rb-r-promo)); }

/* tag pilulka (Dragon, Noxus…) — neutrální, ať nekonkuruje keywordům */
.rb-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--text);
  font-size: .74rem;
  line-height: 1.7;
  white-space: nowrap;
}

/* BANNED badge — detail (v titulku) i dlaždice gridu */
.rb-banned {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 6px;
  background: linear-gradient(160deg, #de6060, #a83232);
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .07em;
  line-height: 1.7;
  white-space: nowrap;
  cursor: help;
}
/* dlaždice: vlevo pod cost badge — volný roh (cena/„i“ vpravo nahoře,
   ×n/✦n vlevo dole, −/+ vpravo dole, variant štítek vpravo pod cenou) */
.rb-ban-tile { position: absolute; top: 32px; left: 5px; pointer-events: none; z-index: 1; cursor: default; }

/* variant štítek na obrázku v detailu (vlevo nahoře) */
.rb-var-img { position: absolute; top: 8px; left: 8px; z-index: 2; }
/* promo varianta (variant:'promo') */
.rb-v-promo { background: #2e9e6b; }

/* „Koupit na TCGplayer“ vedle ceny */
.cd-price { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cd-price .cd-buy { margin-left: 4px; }

@media (max-width: 560px) {
  .cd-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══ přepínač zobrazení Grid/Checklist (galerie) ═══ */
.result-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rb-viewtog {
  display: inline-flex;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  overflow: hidden;
}
.rb-viewtog button {
  background: transparent;
  color: var(--text-dim);
  border: none;
  border-radius: 0;
  padding: 3px 12px;
  font-size: .74rem;
  font-weight: 600;
}
.rb-viewtog button:hover { color: var(--rb-accent2); background: rgba(255,255,255,.03); filter: none; box-shadow: none; }
.rb-viewtog button.on {
  background: color-mix(in srgb, var(--rb-accent) 18%, var(--bg-soft));
  color: var(--rb-accent2);
}
/* .rb-viewtog má overflow:hidden kvůli pilulce — fokusový prstenec s kladným
   offsetem by se celý ořízl (tlačítko sedí na hraně padding boxu), proto
   dovnitř. Platí i pro Grid/Checklist, obě skupiny sdílí .rb-viewtog. */
.rb-viewtog button:focus-visible { outline-offset: -2px; }
/* pravá strana meta řádku: Grid/Checklist + přepínače vzhledu vedle sebe
   (.result-meta je flex se space-between — bez obalu by se skupiny rozlétly) */
.rb-metatools { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* přepínače vzhledu (galerie): stejná pilulka jako Grid/Checklist, ale dva
   NEZÁVISLÉ on/off přepínače (aria-pressed). Stav nesmí být jen barva —
   fajfka vlevo od popisku se při vypnutí schová (místo si drží, ať popisek
   neposkakuje) */
.rb-distog button { display: inline-flex; align-items: center; gap: 5px; padding-left: 9px; }
.rb-distog .rb-tick { font-size: .7em; line-height: 1; }
.rb-distog button:not(.on) .rb-tick { visibility: hidden; }

/* ═══ checklist režim — hustá tabulka aktuálního filtru ═══ */
.rb-checklist { width: 100%; border-collapse: collapse; font-size: .8rem; }
.rb-checklist th {
  /* lepí se k hornímu okraji scrolleru (.mid) — dlouhé sety */
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card);
  text-align: left;
  font-size: .66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  padding: 6px 8px;
  border-bottom: 1px solid var(--card-border);
}
.rb-checklist td {
  padding: 3px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent);
}
.cl-row { cursor: pointer; transition: background-color var(--tr); }
.cl-row:hover { background: color-mix(in srgb, var(--rb-accent) 7%, transparent); }
.rb-checklist tr.rb-illegal { opacity: .45; }
.rb-checklist .cl-num { color: var(--text-dim); font-size: .72rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rb-checklist .cl-name { max-width: 0; width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-checklist .cl-name .rb-varlab, .rb-checklist .cl-name .rb-banned { margin-left: 6px; }
.rb-checklist .cl-gem, .rb-checklist .cl-af { width: 26px; text-align: center; }
.rb-checklist .cl-gem .rb-gem { margin: 0; }
/* ✦ vždy-foil — stejný duhový text jako foil cena v detailu */
.rb-checklist td.cl-af span {
  color: #9b7bd8;
  background: linear-gradient(120deg, #c78fff, #6fb2ff 55%, #7fe0a8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rb-checklist .cl-price { text-align: right; white-space: nowrap; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.rb-checklist .cl-ctl { width: 96px; text-align: center; white-space: nowrap; }
.rb-checklist .cl-b {
  width: 22px; height: 20px;
  padding: 0;
  font-size: .72rem;
  line-height: 1;
  background: var(--bg-soft);
  color: var(--text-dim);
  border: 1px solid var(--card-border);
  border-radius: 6px;
}
.rb-checklist .cl-b:hover { color: var(--rb-accent2); border-color: var(--rb-accent-dim); background: var(--bg-soft); filter: none; box-shadow: none; }
.rb-checklist .cl-n {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.rb-checklist .cl-n.done { color: var(--rb-green); font-weight: 600; }

/* ═══ hodnota sbírky v čase — sparkline + týdenní delta (statistiky) ═══ */
.cs-spark-box { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; }
.cs-spark { flex: 1; min-width: 0; height: 38px; }
.cs-spark-line { fill: none; stroke: var(--rb-accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.cs-spark-fill { fill: color-mix(in srgb, var(--rb-accent) 16%, transparent); stroke: none; }
.cs-delta { font-size: .74rem; white-space: nowrap; color: var(--text-dim); font-variant-numeric: tabular-nums; cursor: help; }
.cs-delta.up { color: var(--rb-green); }
.cs-delta.down { color: var(--rb-red); }

/* per set „dokoupení ~$X“ — odsazení zarovnané pod bar (za názvem setu) */
.cs-set-buy { margin: -1px 0 4px 41px; font-size: .68rem; color: var(--text-dim); }

/* top movers (↑ zelená / ↓ červená) */
.cs-movers { list-style: none; margin: 0; padding: 0; }
.cs-movers li { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 1px 0; }
.cs-movers li:hover span { color: var(--rb-accent2); }
.cs-movers i { font-style: normal; width: 12px; text-align: center; flex-shrink: 0; }
.cs-movers span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-movers b { font-variant-numeric: tabular-nums; font-weight: 600; }
.cs-movers .up { color: var(--rb-green); }
.cs-movers .down { color: var(--rb-red); }

/* ↑/↓ u ceny v detailu karty (změna od minulé aktualizace cen) */
.cd-price .cd-trend { font-weight: 700; cursor: help; }
.cd-price .cd-trend.up { color: var(--rb-green); }
.cd-price .cd-trend.down { color: var(--rb-red); }

/* druhý blok tlačítek (Buylist) v exportním panelu sbírky */
.rb-col-io .rb-col-io-btns + .flabel { margin-top: 10px; }

/* ═══ MOBIL (kontrakt: sekce MOBIL — breakpointy ~900/600 px) ═══ */

/* mobilní lišta (galerie: tlačítko Filtry; builder: záložky Filtry/Karty/Deck)
   a FAB s čítačem decku — desktop je neukazuje */
.mob-bar { display: none; }
.mob-fab { display: none; }

@media (max-width: 1150px) {
  .layout { grid-template-columns: 220px minmax(0, 1fr) 320px; }
  .layout-2 { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .layout { display: block; }
  .filters, .deckpane { position: static; height: auto; border: none; width: 100%; }
  .filters { border-bottom: 1px solid var(--card-border); }
  /* grid musí zůstat vlastní scroller — virtualizace čte jeho scrollTop;
     výška do zbytku displeje (topbar ~53 px + mob-bar ~51 px) */
  .mid { position: static; height: 70vh; height: calc(100dvh - 115px); padding: 10px 10px; }   /* 115 = topbar 63 + mob-bar 52; s 104 stranka pretekala o 11px a mela druhy scrollbar */
  .card-detail { grid-template-columns: 1fr; }
  .card-detail .cd-img { max-width: 280px; }
  .topbar h1 span { display: none; }
  .topbar { gap: 10px; padding: 10px 12px; }
  .hero-tiles { grid-template-columns: 1fr; }
  .db-box { overflow-x: auto; }   /* tabulka historie her scrolluje uvnitř boxu */

  /* lišta pod topbarem (sticky, ať je přepínání pořád po ruce) */
  .mob-bar {
    display: flex;
    gap: 7px;
    padding: 8px 12px;
    position: sticky;
    top: 53px;
    z-index: 35;
    background: var(--card);
    border-bottom: 1px solid var(--card-border);
  }
  .mtab {
    background: rgba(255,255,255,.02);
    color: var(--text-dim);
    border: 1px solid var(--card-border);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 600;
  }
  .mob-tabs .mtab { flex: 1 1 0; }
  .mtab.on {
    background: color-mix(in srgb, var(--rb-accent) 16%, var(--bg-soft));
    color: var(--rb-accent2);
    border-color: var(--rb-accent);
    box-shadow: 0 0 10px -4px color-mix(in srgb, var(--rb-accent) 60%, transparent);
  }

  /* galerie: filtry sbalené do horního panelu, tlačítko Filtry je rozbalí */
  .layout-2 .filters { display: none; }
  .layout-2.mob-open .filters { display: block; }

  /* builder: 3 sloupce → záložky (řídí nav.js přes data-mview; bez JS zůstává
     viditelný prostřední sloupec s kartami) */
  .layout:not(.layout-2) .filters,
  .layout:not(.layout-2) .deckpane { display: none; }
  .layout[data-mview="filters"]:not(.layout-2) .filters { display: block; }
  .layout[data-mview="deck"]:not(.layout-2) .deckpane { display: block; }
  .layout[data-mview="filters"]:not(.layout-2) .mid,
  .layout[data-mview="deck"]:not(.layout-2) .mid { display: none; }

  /* FAB s čítačem decku (jen builder — jinde v markupu není) */
  .mob-fab {
    position: fixed;
    right: 14px;
    bottom: 16px;
    z-index: 60;
    display: inline-flex;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    padding: 0;
    box-shadow: var(--rb-shadow-2);
  }
  .mob-fab .icon { width: 22px; height: 22px; }
  .mob-fab-n {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 11px;
    background: var(--card);
    color: var(--rb-accent2);
    border: 1px solid var(--rb-accent);
    font-size: .72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
  }
  .mob-fab.on { box-shadow: var(--rb-shadow-2), var(--rb-glow); }

  /* checklist scrolluje ve vlastním kontejneru (stránka ne) */
  .rb-checklist-wrap { overflow-x: auto; }
}

@media (max-width: 600px) {
  .home { padding: 20px 14px 44px; }
  .hero { padding: 22px 6px 4px; }
  .hero-title { font-size: 1.75rem; }
  .deck-list { grid-template-columns: 1fr; }
  .home-sec-h { flex-wrap: wrap; }
  .topbar .stats { display: none; }   /* stav DB je na home v db-boxu */
  .rb-nav a { padding: 7px 12px; }

  /* detail modal (a ostatní velké dialogy) fullscreen; RBUi confirm/alert
     zůstává malý — má vlastní třídu a styly */
  dialog:not(.rbui-dlg) {
    /* 100 % (ne 100vw!) — vw zahrnuje svislý scrollbar a s klasickými
       scrollbary by dialog přetékal o jeho šířku do strany */
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    border: none;
    border-radius: 0;
  }
  dialog:not(.rbui-dlg) .dlg-body {
    max-height: none;
    height: 100%;
    /* místo pro absolutní ‹ N / M › + ✕ vpravo nahoře */
    padding: 50px 14px 18px;
  }
  .card-detail h2 { padding-right: 0; min-height: 0; }
  .dlg-import-body, .dlg-hand-body { width: 100%; }

  /* checklist: úspora místa — cena a ✦ jsou v detailu karty; těsnější
     buňky, ať zbyde co nejvíc místa na jméno karty */
  .rb-checklist .cl-price, .rb-checklist .cl-af { display: none; }
  .rb-checklist th, .rb-checklist td { padding: 3px 4px; }
  .rb-checklist .cl-num { font-size: .66rem; }
}

/* ═══ touch (hover: none) — hover-only prvky dostávají tap alternativu ═══ */
@media (hover: none) {
  /* −/+ sbírky na dlaždici viditelné pořád (hover overlay neexistuje) */
  .rb-colctl { opacity: 1; }
  .rb-colctl button { width: 30px; height: 28px; }
  /* cena neustupuje tlačítku „i“ (to se na touch neukazuje / je viditelné) */
  .rb-tile:hover .rb-price { opacity: 1; }
  /* galerie: detail = tap na dlaždici → neviditelné „i“ pryč (žádný slepý cíl) */
  .layout-2 .rb-info { display: none; }
  /* builder: tap = přidat do decku, „i“ je jediná cesta k detailu → viditelné */
  .layout:not(.layout-2) .rb-info { opacity: 1; }
  /* ovládání řádku decku bez hoveru */
  .drow .dctl { display: inline-flex; }
  /* checklist −/+ větší tap cíle */
  .rb-checklist .cl-b { width: 30px; height: 28px; }
  .rb-checklist .cl-ctl { width: 108px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ═══ postavitelnost decku (builder statistiky) ═══ */
/* „Vlastníš X/Y kusů · dokoupení ~$Z" — rozbalovací seznam chybějících */
.own-line, .own-box summary { font-size: .82rem; color: var(--text-dim); }
.own-line { margin: 2px 0 10px; }
.own-line.own-ok { color: var(--rb-green); }
.own-box { margin: 2px 0 10px; }
.own-box summary {
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  margin: 0 -4px;
  transition: color var(--tr), background-color var(--tr);
}
.own-box summary:hover { color: var(--text); background: color-mix(in srgb, var(--bg-soft) 70%, transparent); }
.own-box[open] summary { color: var(--rb-accent2); margin-bottom: 6px; }
.own-box .dim { color: var(--text-dim); }
.own-list {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--card-border) 65%, transparent);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  background: color-mix(in srgb, var(--bg-soft) 55%, transparent);
  font-size: .78rem;
}
.own-row { display: flex; align-items: center; gap: 7px; padding: 1px 0; }
.own-n { color: var(--text-dim); font-variant-numeric: tabular-nums; min-width: 22px; }
.own-name {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
  font-size: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--tr);
}
.own-name:hover { color: var(--rb-accent2); }
.own-cost { color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* stat-sub s tlačítkem vpravo (Otvírací ruka + „Ruka") */
.stat-sub-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stat-sub-row button { flex-shrink: 0; text-transform: none; letter-spacing: normal; }

/* ═══ testovací ruka (modal builderu) ═══ */
.dlg-hand-body { width: min(640px, 94vw); }
.dlg-hand-body .hand-note { color: var(--text-dim); font-size: .78rem; margin: 6px 0 12px; line-height: 1.5; }
.hand-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hand-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  min-width: 0;
}
.hand-card .hand-img {
  display: block;
  aspect-ratio: 5 / 7;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-soft);
  border: 2px solid transparent;
  box-shadow: var(--rb-shadow-1);
  transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.hand-card .hand-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hand-card:hover:not(:disabled) .hand-img { transform: translateY(-3px); box-shadow: var(--rb-shadow-1), var(--rb-glow); }
.hand-card.sel .hand-img { border-color: var(--rb-red); }
.hand-card.sel:hover:not(:disabled) .hand-img { box-shadow: var(--rb-shadow-1), 0 0 20px -6px color-mix(in srgb, var(--rb-red) 45%, transparent); }
.hand-card:disabled { cursor: default; }
.hand-card .hand-name {
  font-size: .72rem;
  color: var(--text-dim);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ✕ přes vybranou kartu — jasně říká „tahle se vymění" */
.hand-card .hand-mark {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: var(--rb-red);
  color: #fff;
  border-radius: 50%;
  font-size: .72rem;
  box-shadow: var(--rb-shadow-1);
}
@media (max-width: 600px) {
  .hand-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ═══ galerie: akce sbírky (Export / Import / Statistiky) v topbaru,
   na mobilu ikonky v mob-baru; obsah v modalech místo bočních panelů ═══ */
.gal-actions { display: flex; align-items: center; gap: 6px; }
.gal-actions button { white-space: nowrap; }
.gal-actions-m { display: flex; gap: 7px; margin-left: auto; }
.gal-actions-m .mtab { padding: 8px 11px; display: inline-flex; align-items: center; }
.gal-actions-m .icon { width: 16px; height: 16px; }
/* display:flex výš by přebilo UA [hidden] — vrátit mu platnost */
.gal-actions[hidden], .gal-actions-m[hidden] { display: none; }
@media (max-width: 900px) {
  .gal-actions { display: none; }   /* na mobilu akce zastupuje mob-bar */
}

/* modaly galerie — malý Export, střední Import, ~640px Statistiky;
   na ≤600 px je přepne fullscreen pravidlo dialog:not(.rbui-dlg) výš
   (vyšší specificita 0,1,1 > 0,1,0 — proto tady třídy, ne id) */
.dlg-sm { width: min(400px, 94vw); }
.dlg-md { width: min(480px, 94vw); }
.dlg-stats { width: min(640px, 94vw); }
.dlg-galx h2 { padding-right: 40px; }   /* rezerva pro zavírací ✕ */
.dlg-galx .flabel { margin: 12px 0 7px; }
.dlg-galx .imp-note { color: var(--text-dim); font-size: .78rem; margin: 6px 0 10px; line-height: 1.5; }

/* záložky Import modalu (Záloha JSON / Vložit precon) */
.gal-tabs { display: flex; gap: 6px; margin: 2px 0 12px; }
.gal-tabs .gtab {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: .8rem;
  font-weight: 600;
}
.gal-tabs .gtab:hover { color: var(--rb-accent2); filter: none; box-shadow: none; }
.gal-tabs .gtab.on {
  background: color-mix(in srgb, var(--rb-accent) 16%, var(--bg-soft));
  color: var(--rb-accent2);
  border-color: var(--rb-accent);
}

/* precony jako klikatelné řádky (jméno + počet karet) */
.precon-list { display: flex; flex-direction: column; gap: 5px; max-height: min(46vh, 380px); overflow-y: auto; }
.precon-row {
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  background: color-mix(in srgb, var(--bg-soft) 55%, transparent);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  color: var(--text);
  font-weight: 500;
  font-size: .84rem;
}
.precon-row:hover {
  color: var(--rb-accent2);
  border-color: var(--rb-accent-dim);
  background: color-mix(in srgb, var(--bg-soft) 80%, transparent);
  filter: none;
  box-shadow: none;
}
.precon-row .pr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.precon-row .pr-n { color: var(--text-dim); font-size: .74rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* statistiky v modalu — stejná typografie jako dřív v bočním panelu */
.rb-col-stats-body { font-size: .82rem; }

/* ═══ Evidence preconů ve sbírce (2026-08-15) — zámky + Import sekce ═══ */

/* malý zámek v badge ×n / ✦n na dlaždici (locked > 0 — kusy drží precon) */
.rb-own .rb-lock, .rb-foil .rb-lock {
  font-size: .68em;
  margin-left: 2px;
  filter: grayscale(1) brightness(1.5);
}

/* detail karty: řádek Sbírka „4 (3 z preconů)" — pozn. hned za počtem */
.cd-col .cd-col-lock {
  color: var(--text-dim);
  font-size: .78rem;
  white-space: nowrap;
}

/* Import modal — sekce „Vložené precony": řádek jméno · ×n · Odebrat */
#imp-tracked {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--card-border);
}
.precon-tracked { display: flex; flex-direction: column; gap: 5px; }
.tprecon-row {
  display: flex;
  align-items: center;
  gap: 9px;
  background: color-mix(in srgb, var(--bg-soft) 55%, transparent);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 6px 11px;
  font-size: .84rem;
}
.tprecon-row .tp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tprecon-row .tp-n { color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* danger zóna dole v Import modalu — „Vymazat celou sbírku" */
.imp-danger {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--card-border);
  display: flex;
  justify-content: flex-end;
}

/* „P" badge — karta figuruje v evidovaném preconu (zámek jen když jsou
   VŠECHNY normal kusy z preconů; P zůstává i s volnými kusy navíc) */
.rb-preconb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 4px;
  font-size: .62rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--rb-accent) 28%, var(--card));
  color: var(--rb-accent2);
  border: 1px solid color-mix(in srgb, var(--rb-accent) 45%, transparent);
}
.cs-top-d { color: var(--text-dim); font-style: normal; font-size: .74rem; white-space: nowrap; }

/* ═══ builder HUB (výchozí pohled bez ?deck=) + read-only náhled preconu
   + modaly Kontrola vlastnictví / Náhodná legenda — dávka 2026-08-19 ═══ */

/* topbar tlačítko Filtry je editor-only — [hidden] musí přebít button display */
.cat-filters-btn[hidden] { display: none !important; }

#hub { flex: 1; overflow-y: auto; }
.hub-inner { max-width: 1100px; margin: 0 auto; padding: 26px 22px 60px; }
.hub-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hub-sec { margin-top: 30px; }
.hub-sec h2 { margin-bottom: 4px; }
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
/* dlouhé jméno decku nesmí roztáhnout dlaždici (min-content gridu) */
.hub-grid > * { min-width: 0; }

/* dlaždice decku / preconu */
.htile {
  display: flex;
  gap: 12px;
  align-items: stretch;
  background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 86%, var(--bg)));
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 10px 12px;
  overflow: hidden;
  transition: border-color var(--tr), box-shadow var(--tr);
}
.htile[data-deck], .htile[data-precon] { cursor: pointer; }
.htile[data-deck]:hover, .htile[data-precon]:hover { border-color: var(--rb-accent); box-shadow: var(--rb-glow); }
.htile:focus-visible { outline: 2px solid var(--rb-accent); outline-offset: 2px; }
.htile-art {
  flex: 0 0 56px;
  width: 56px;
  height: 78px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--bg-soft);
  align-self: center;
}
.htile-art img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.htile-noart { display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 1.3rem; }
.htile-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.htile-name { font-weight: 600; display: flex; align-items: center; gap: 7px; min-width: 0; }
.htile-name .htile-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.htile-name .hp-n { color: var(--text-dim); font-weight: 400; flex-shrink: 0; }
.htile-meta { color: var(--text-dim); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.htile-acts { display: flex; gap: 7px; margin-top: 3px; }
.hdot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; }
.hdot.ok { background: var(--rb-green); }
.hdot.bad { background: var(--rb-red); }
.hown-ok { color: var(--rb-green); }
.hown-miss { color: var(--rb-red); }

/* prázdný stav hubu: hint + chipy preconů (?precon= založí kopii) */
.hub-empty { padding: 6px 2px; }
.hub-empty .sec-hint { font-size: .84rem; }
.hub-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.hchip {
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: .8rem;
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--tr), border-color var(--tr);
}
.hchip:hover { color: var(--rb-accent2); border-color: var(--rb-accent); }

/* editor: odkaz „← Decks" zpět na hub */
.ed-top { padding: 8px 18px 0; }
#lnk-hub {
  color: var(--text-dim);
  text-decoration: none;
  font-size: .84rem;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: color var(--tr), background-color var(--tr);
}
#lnk-hub:hover { color: var(--rb-accent2); background: rgba(255,255,255,.04); }

/* read-only náhled preconu (?precon-view=) — statický nadpis místo inputu
   jména; mutační ovládání pryč (JS guardy v builder.js drží totéž) */
#deck-ro-name { display: none; }
#btn-copytodecks { display: none; }
.rb-precon-view #deck-ro-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--rb-accent2);
  margin: 2px 0 10px;
}
.rb-precon-view #btn-copytodecks { display: inline-flex; }
.rb-precon-view .deck-top,
.rb-precon-view #deck-name,
.rb-precon-view #btn-share,
.rb-precon-view #btn-import,
.rb-precon-view #precon-select,
.rb-precon-view #btn-play,
.rb-precon-view .drow .dctl,
.rb-precon-view .bcard .bctl { display: none !important; }

/* modal Kontrola vlastnictví */
.dlg-oc-body { width: min(720px, 94vw); }
.oc-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px; }
.oc-gh {
  font-weight: 600;
  font-size: .84rem;
  margin-bottom: 7px;
  color: var(--rb-accent2);
  display: flex;
  align-items: center;
  gap: 7px;
}
.oc-master { cursor: pointer; }
.oc-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 170px;
  overflow-y: auto;
  padding-right: 4px;
}
.oc-row { display: flex; align-items: center; gap: 8px; font-size: .84rem; cursor: pointer; }
.oc-row input, .oc-master input { accent-color: var(--rb-accent); flex-shrink: 0; }
.oc-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-res {
  display: grid;
  /* minmax(0,…): dlouhé jméno karty nesmí roztáhnout sloupec přes dialog */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--card-border);
  padding-top: 12px;
}
.oc-col { min-width: 0; }
.oc-h { font-weight: 600; font-size: .88rem; margin-bottom: 7px; }
.oc-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.oc-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 260px;
  overflow-y: auto;
  font-size: .82rem;
  padding-right: 4px;
}
.ocr { display: flex; gap: 7px; align-items: baseline; }
.ocr-n { color: var(--rb-accent2); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.ocr-name { flex: 1; min-width: 0; }
.ocr-p { color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dlg-oc-body .nactions, .dlg-rl-body .nactions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* modal Náhodná legenda */
.dlg-rl-body { width: min(440px, 94vw); }
.rl-opts { display: flex; gap: 18px; flex-wrap: wrap; margin: 4px 0 14px; }
.rl-opts label { display: flex; align-items: center; gap: 7px; font-size: .84rem; cursor: pointer; }
.rl-opts input { accent-color: var(--rb-accent); }
.rl-show { min-height: 100px; text-align: center; }
.rl-img {
  width: min(280px, 70vw);
  border-radius: 12px;
  box-shadow: var(--rb-shadow-1);
  display: block;
  margin: 0 auto;
}
.rl-name { font-family: var(--serif); font-size: 1.05rem; color: var(--rb-accent2); margin-top: 10px; }
.rl-doms { display: flex; gap: 12px; justify-content: center; margin-top: 6px; color: var(--text-dim); font-size: .84rem; }
.rl-dom { display: inline-flex; align-items: center; gap: 5px; }

/* mobil: hub jednosloupcově, sloupce modalů pod sebe */
@media (max-width: 900px) {
  .hub-inner { padding: 18px 14px 50px; }
  .hub-grid { grid-template-columns: 1fr; }
  .oc-groups, .oc-res { grid-template-columns: 1fr; }
  .ed-top { padding: 8px 12px 0; }
}

/* hromadný export (hub #dlg-bulkexport) */
.be-opts { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 12px; font-size: .86rem; }
.be-opts label { display: flex; align-items: center; gap: 8px; }
.be-opts .oc-gh { margin-top: 8px; }
.be-split { margin-top: 8px; }

/* ═══ modal Postavit (#dlg-build) — checklist fyzické stavby decku ═══ */
/* POZOR: obecný dialog má max-width 760px — širší modal musí šířku nastavit
   NA SVÉM <dialog> (tělo pak 100 %); šířka jen na .dlg-body by dialog
   roztáhla přes jeho max-width a scrolloval by do strany */
#dlg-build { width: min(880px, 94vw); max-width: min(880px, 94vw); }
.dlg-build-body { width: 100%; }
/* ≤600 fullscreen jako ostatní velké dialogy — MUSÍ být AŽ ZA základním
   pravidlem výše (stejná specificita, vyhrává pozdější) */
@media (max-width: 600px) {
  #dlg-build { width: 100%; max-width: 100%; }
}
.bd-name { font-family: var(--serif); font-size: 1.05rem; color: var(--rb-accent2); }
.bd-prog { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.bd-prog-n { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rb-accent2); flex-shrink: 0; }
.bd-bar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--card-border);
  overflow: hidden;
}
.bd-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--rb-accent-dim), var(--rb-accent));
  transition: width .25s ease;
}
.bd-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 10px; }
.bd-hide { display: flex; align-items: center; gap: 7px; font-size: .84rem; cursor: pointer; }
.bd-hide input { accent-color: var(--rb-accent); }
.bd-sec-h {
  font-weight: 600;
  font-size: .84rem;
  color: var(--rb-accent2);
  margin: 12px 0 2px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.bd-sec-n { color: var(--text-dim); font-weight: 400; font-variant-numeric: tabular-nums; }
/* dlaždice: DEFAULT černobílá; plné odkliknutí kartu „rozsvítí" do barev
   (plynulá transition), částečně vložená zůstává skoro černobílá */
.bd-tile { user-select: none; -webkit-user-select: none; }
.bd-tile img { filter: grayscale(1); transition: filter .3s ease; pointer-events: none; }
.bd-tile.bd-part img { filter: grayscale(.75); }
.bd-tile.bd-done img { filter: none; }
.bd-tile.bd-done {
  cursor: default;
  border-color: color-mix(in srgb, var(--rb-green) 75%, transparent);
  box-shadow: 0 0 10px -3px color-mix(in srgb, var(--rb-green) 60%, transparent);
}
/* oranžový badge částečného postupu („2/3") */
.bd-st {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  padding: 1px 8px;
  border-radius: 10px;
  background: rgba(196, 118, 14, .92);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* zelený ✓ badge hotové karty */
.bd-check {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rb-green);
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
}
/* informační štítek „nemáš" (sbírka kartu vůbec nezná) */
.bd-noown {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  padding: 1px 7px;
  border-radius: 9px;
  background: rgba(8, 10, 14, .82);
  border: 1px solid color-mix(in srgb, var(--rb-red) 65%, transparent);
  color: #f0b1b1;
  font-size: .68rem;
}
/* oprava −1 — velká touch plocha v rohu dlaždice */
.bd-minus {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 3;
  min-width: 36px;
  min-height: 32px;
  padding: 2px 10px;
  border-radius: 9px;
  font-size: 1rem;
  background: rgba(8, 10, 14, .85);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
}
.bd-minus:hover { color: var(--rb-accent2); border-color: var(--rb-accent); filter: none; box-shadow: none; }
/* fallback dlaždice pro id mimo databázi (osiřelé po refreshi dat) */
.bd-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 8px;
  font-size: .7rem;
  color: var(--text-dim);
  text-align: center;
  word-break: break-all;
}
#bd-grid .bgrid { margin: 4px 0 10px; }
#bd-grid > .sec-hint { margin: 14px 0; }
/* mobil: menší dlaždice, modal scrolluje (.dlg-body) */
@media (max-width: 900px) {
  #bd-grid .bgrid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 7px; }
  #bd-grid .bgrid-land { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}