/* MTG Deck Builder — styly. Tokeny dědí z jonbarson.cz:
   základ dává /account/theme.css (dark :root + light overrides na
   [data-theme=light]), tady jen rozšířená sada per-app proměnných ve stejné
   paletě jako minisarchive/malediction. Žádný vlastní design systém.
   Layout: deck-first (home se seznamem decků → deck editor se search
   sidebar → volitelná browse galerie). */

* { box-sizing: border-box; }

:root {
  --bg: #14121a;
  --bg2: #191622;
  --panel: #1e1a28;
  --panel2: #272233;
  --text: #e9e4d8;
  --muted: #9c95a8;
  --accent: #c9a35a;
  --accent2: #e3c98a;
  --accent-dim: #8a6f3a;
  --green: #5cb884;
  --red: #d95c5c;
  --border: #362f45;
  --border-soft: #2b2536;
  --radius: 10px;
  --serif: "Eagle Lake", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  /* kanonické mana barvy (segmenty grafů — obsah, ne téma; neměnit dle theme) */
  --mana-w: #e9e3c0;
  --mana-u: #4a90c9;
  --mana-b: #8d7f96;
  --mana-r: #c9575e;
  --mana-g: #5cb884;
  --mana-c: #9c95a8;
}

html, body {
  margin: 0;
  height: 100%;
  background:
    radial-gradient(1100px 500px at 80% -10%, rgba(201,163,90,.05), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(90,70,140,.06), 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; }

* { scrollbar-width: thin; scrollbar-color: #453c58 transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #453c58; border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

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

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

button, .btn-link {
  background: var(--accent);
  color: #241b09;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
  font-size: .88rem;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-content: center;
  text-decoration: none;
  font-family: inherit;
}
button:hover { background: var(--accent2); }
button.primary { background: var(--accent); }
button.ghost, .btn-link.ghost {
  background: rgba(255,255,255,.02);
  color: var(--muted);
  border: 1px solid var(--border);
}
button.ghost:hover, .btn-link.ghost:hover { color: var(--accent2); border-color: var(--accent-dim); background: rgba(255,255,255,.02); }
button.small { padding: 4px 8px; font-size: .76rem; gap: 4px; }
button.small .icon { width: 13px; height: 13px; }
button.danger-ghost:hover { color: var(--red); border-color: var(--red); }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input, select {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: .9rem;
  font-family: inherit;
  min-width: 0;
}
/* vlastní rozbalovačka — nativní select ignoruje tmavé téma a svítí bíle */
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239c95a8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 13px;
  cursor: pointer;
}
select:hover { border-color: var(--accent-dim); }
select option, select optgroup { background: var(--panel); color: var(--text); }
:root[data-theme="light"] select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d6350' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
input:focus, select:focus {
  outline: none;
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 2px rgba(201,163,90,.15);
}
input[type="number"] { width: 74px; }

/* ---- horní lišta ---- */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: linear-gradient(180deg, #211c2d, var(--panel));
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}
.topbar .back { color: var(--muted); display: flex; padding: 6px; border-radius: 8px; }
.topbar .back:hover { color: var(--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(--muted); font-size: .8rem; white-space: nowrap; }

/* ---- slim progress DB (auto-import) ---- */
.db-progress {
  position: sticky;
  top: 53px;
  z-index: 39;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  font-size: .8rem;
  color: var(--muted);
}
.db-progress-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, rgba(201,163,90,.14), rgba(201,163,90,.24));
  transition: width .3s ease;
  pointer-events: none;
}
.db-progress > * { position: relative; }

/* ---- HOME ---- */
.view-home { flex: 1; padding: 26px 18px 40px; }
.home-inner { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.home-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.home-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

/* ---- pás herních režimů na úvodce ---- */
.play-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.play-card {
  --c: var(--accent);
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-decoration: none; color: inherit;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.play-card:hover {
  transform: translateY(-2px);
  border-color: var(--c);
  box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--c) 55%, transparent);
}
.play-card .pc-ico {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--bg2); border: 1px solid var(--border-soft);
}
.play-card .pc-ico svg { width: 22px; height: 22px; color: var(--c); }
.play-card .pc-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.play-card .pc-txt b { font-family: var(--serif); font-weight: 400; font-size: 1rem; color: var(--text); }
.play-card .pc-txt i { font-style: normal; font-size: .78rem; color: var(--muted); }
.play-solo { --c: #5cb884; }
.play-mp { --c: #5aa9d8; }
.play-horde { --c: #d95c5c; }
.deck-tile {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  position: relative;
  overflow: hidden;
}
.deck-tile:hover {
  transform: translateY(-2px);
  border-color: var(--accent-dim);
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.7);
}
.deck-tile .dt-art {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 20%;
  opacity: .16;
  pointer-events: none;
}
.deck-tile:hover .dt-art { opacity: .24; }
.deck-tile > * { position: relative; }
.deck-tile h3 { margin: 0; font-family: var(--serif); font-size: 1rem; color: var(--accent2); font-weight: 400; }
.deck-tile .dt-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .76rem; }
.deck-tile .dt-pips { display: flex; gap: 3px; }
.deck-tile .dt-pips img { width: 14px; height: 14px; }
.deck-tile .dt-del {
  position: absolute; top: 8px; right: 8px;
  opacity: 0;
  padding: 3px 6px;
}
.deck-tile:hover .dt-del, .deck-tile .dt-del:focus-visible { opacity: 1; }
.deck-tile .dt-legal { font-size: .72rem; }
.deck-tile .dt-legal.ok { color: var(--green); }
.deck-tile .dt-legal.bad { color: var(--red); }
.home-empty { color: var(--muted); text-align: center; padding: 40px 0 10px; }
.legal-note { color: var(--muted); font-size: .74rem; line-height: 1.5; }
.legal-note a { color: var(--accent); }
/* atribuce fixně na spodku stránky (jen home) */
.view-home .legal-note {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 12px 18px 8px;
  text-align: center;
  background: linear-gradient(180deg, transparent, var(--bg) 55%);
  pointer-events: none;
}
.view-home .legal-note a { pointer-events: auto; }
.home-inner { padding-bottom: 50px; }

/* ---- layout deck editoru: search | deck | přehled ---- */
.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 340px;
  min-height: 0;
}
.layout-browse { grid-template-columns: 260px minmax(0, 1fr); }
.filters, .deckpane {
  background: var(--panel);
  padding: 14px;
  overflow-y: auto;
  height: calc(100vh - 53px);
  position: sticky;
  top: 53px;
}
.filters { border-right: 1px solid var(--border); }
.deckpane { border-left: 1px solid var(--border); }
.content { padding: 14px 18px; min-width: 0; }

/* ---- filtry / search sidebar ---- */
.fsearch { position: relative; margin-bottom: 10px; }
.fsearch .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.fsearch input { width: 100%; padding-left: 32px; }
/* našeptávač v editoru (textové výsledky pod vyhledávačem) */
.suggest { margin-bottom: 12px; }
.suggest .shint { color: var(--muted); font-size: .78rem; padding: 4px 2px; }
.suggest .smeta { color: var(--muted); font-size: .72rem; padding: 4px 2px 0; }
.srow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: .84rem;
  cursor: pointer;
}
.srow:hover, .srow.sel { background: var(--panel2); }
.srow.sel { outline: 1px solid var(--accent-dim); }
.srow .sname {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.srow .sin { color: var(--green); font-size: .74rem; font-variant-numeric: tabular-nums; }
.srow .smana { white-space: nowrap; }
.srow .sinfo {
  padding: 1px 6px;
  font-size: .72rem;
  background: var(--bg2);
  color: var(--muted);
  border: 1px solid var(--border);
  opacity: 0;
}
.srow:hover .sinfo, .srow.sel .sinfo { opacity: 1; }
.srow .sinfo:hover { color: var(--accent2); border-color: var(--accent-dim); }

#f-details, #b-details { margin-bottom: 10px; }
#f-details summary, #b-details summary {
  cursor: pointer;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 0;
  user-select: none;
}
#f-details summary:hover, #b-details summary:hover { color: var(--accent2); }
.fgroup { margin: 12px 0; }
.flabel {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: 6px;
}
.frow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.frow .dash { color: var(--muted); }
.chk { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: .82rem; cursor: pointer; }
.chk input { accent-color: var(--accent); }
.fgroup > input[type="search"] { width: 100%; }
.fbottom { margin: 14px 0 6px; justify-content: space-between; }

.color-row { display: flex; gap: 5px; margin-bottom: 8px; flex-wrap: wrap; }
.color-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  padding: 0;
  background: var(--bg2);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; color: var(--muted);
}
.color-btn img { width: 20px; height: 20px; display: block; opacity: .5; }
.color-btn:hover { background: var(--bg2); border-color: var(--accent-dim); }
.color-btn.on { border-color: var(--accent); background: var(--panel2); }
.color-btn.on img { opacity: 1; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .76rem;
  font-weight: 500;
}
.chip:hover { background: var(--bg2); color: var(--text); border-color: var(--accent-dim); }
.chip.on { background: var(--panel2); color: var(--accent2); border-color: var(--accent); }

/* ---- výsledky ---- */
.result-meta { color: var(--muted); font-size: .76rem; margin-bottom: 8px; min-height: 1em; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.grid-side { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tile { position: relative; }
.tile .timg {
  width: 100%;
  aspect-ratio: 488 / 680;
  border-radius: 4.5% / 3.5%;
  background: var(--panel2);
  border: 1px solid var(--border-soft);
  display: block;
  object-fit: cover;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.tile:hover .timg {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.6);
}
.tile .tadd {
  position: absolute;
  top: 6px; right: 6px;
  width: 30px; height: 30px;
  padding: 0;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .15s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.tile:hover .tadd, .tile .tadd:focus-visible { opacity: 1; }
.tile .tname {
  font-size: .72rem;
  color: var(--muted);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.tile .tname .in-deck { color: var(--green); font-weight: 700; }
.tile .tprice { color: var(--accent); }
.empty { color: var(--muted); text-align: center; padding: 50px 0; }
#grid-sentinel, #bgrid-sentinel { height: 1px; }

.ms { width: 14px; height: 14px; vertical-align: -2px; margin: 0 1px; }
.ms-lg { width: 17px; height: 17px; }

/* ---- deck editor střed ---- */
.deck-main { max-width: none; }
.deck-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
#deck-name {
  width: 100%;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--accent2);
  background: transparent;
  border: 1px solid transparent;
}
#deck-name:hover, #deck-name:focus { border-color: var(--border); background: var(--bg2); }
.deck-head-row { flex-wrap: nowrap; }
.deck-count { color: var(--muted); font-size: .84rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

.legality {
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 9px 11px;
  margin-bottom: 12px;
  font-size: .84rem;
}
.legality.ok { border-color: rgba(92,184,132,.5); background: rgba(92,184,132,.08); color: var(--green); }
.legality.bad { border-color: rgba(217,92,92,.45); background: rgba(217,92,92,.07); }
.legality .lhead { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.legality.bad .lhead { color: var(--red); }
.legality ul { margin: 8px 0 2px; padding-left: 18px; color: var(--text); }
.legality li { margin: 3px 0; font-size: .8rem; }
.legality .lmore { color: var(--muted); font-size: .76rem; margin-top: 4px; }
.legality .lmore a { color: var(--accent); }

/* velitel — dlaždice s obrázkem */
#commander-zone { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cmdr-card {
  display: flex;
  gap: 12px;
  align-items: center;
  background: rgba(201,163,90,.06);
  border: 1px solid rgba(201,163,90,.3);
  border-radius: var(--radius);
  padding: 10px 12px;
  min-width: 260px;
}
.cmdr-card img.cportrait { width: 74px; border-radius: 6px; cursor: pointer; display: block; }
.cmdr-card .cmdr-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cmdr-card .cmdr-name { font-family: var(--serif); color: var(--accent2); cursor: pointer; background: none; border: none; padding: 0; font-size: .95rem; text-align: left; }
.cmdr-card .cmdr-name:hover { color: var(--accent); }
.cmdr-card .cmdr-type { color: var(--muted); font-size: .74rem; }
.cmdr-card .cmdr-actions { display: flex; gap: 6px; margin-top: 3px; }
.cmdr-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--muted);
  font-size: .84rem;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* seznam decku ve sloupcích (Moxfield styl) — tolik sloupců, kolik se vejde */
.deck-cols { columns: 280px; column-gap: 26px; }
.dgroup { break-inside: avoid; margin-bottom: 12px; }
.dgroup-h {
  display: flex;
  justify-content: space-between;
  font-family: var(--serif);
  font-size: .85rem;
  color: var(--accent);
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 3px;
  margin-bottom: 4px;
}
.drow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  border-radius: 6px;
  font-size: .84rem;
}
.drow:hover { background: var(--panel2); }
.drow .dcount { color: var(--muted); min-width: 22px; text-align: right; font-variant-numeric: tabular-nums; }
.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;
  padding: 2px 0;
}
.drow .dname:hover { color: var(--accent2); }
.drow .dmana { white-space: nowrap; }
.drow .dctl { display: none; gap: 2px; }
.drow:hover .dctl, .drow:focus-within .dctl { display: inline-flex; }
.drow .dctl button { padding: 1px 5px; font-size: .7rem; background: var(--bg2); color: var(--muted); border: 1px solid var(--border); }
.drow .dctl button:hover { color: var(--accent2); border-color: var(--accent-dim); }

/* ---- pravý panel: taby Statistiky | Doporučení ---- */
.side-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.side-tabs button {
  flex: 1;
  background: var(--bg2);
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 7px 8px;
  font-size: .8rem;
}
.side-tabs button.on { background: var(--panel2); color: var(--accent2); border-color: var(--accent); }

.deck-stats { display: flex; flex-direction: column; gap: 16px; }
.stat-h {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: 7px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.stat-h .chk { font-size: .72rem; text-transform: none; letter-spacing: 0; font-weight: 400; }

.curve { display: flex; align-items: flex-end; gap: 5px; height: 90px; }
.cbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; justify-content: flex-end; }
.cbar .bar {
  width: 100%;
  background: linear-gradient(180deg, var(--accent), var(--accent-dim));
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  transition: height .25s ease;
}
.cbar .bval { font-size: .68rem; color: var(--text); }
.cbar .blbl { font-size: .68rem; color: var(--muted); }

.stackbar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--bg2); border: 1px solid var(--border-soft); }
.stackbar span { display: block; height: 100%; }
.stack-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: .74rem; color: var(--muted); }
.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(--muted); font-variant-numeric: tabular-nums; }
.stat-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kpi { background: var(--bg2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 10px; }
.kpi .kv { font-size: 1.05rem; color: var(--accent2); font-variant-numeric: tabular-nums; }
.kpi .kl { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* ---- EDHREC doporučení ---- */
.deck-recs { display: flex; flex-direction: column; gap: 14px; }
.recs-note { color: var(--muted); font-size: .78rem; line-height: 1.5; }
.recs-note a { color: var(--accent); }
.rec-group { }
.rec-h {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--accent);
  margin-bottom: 5px;
}
.rec-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 4px;
  border-radius: 6px;
  font-size: .82rem;
}
.rec-row:hover { background: var(--panel2); }
.rec-row .rname {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none; border: none; padding: 2px 0;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.rec-row .rname:hover { color: var(--accent2); }
.rec-row .rsyn { color: var(--muted); font-size: .7rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rec-row .radd { padding: 1px 6px; font-size: .72rem; background: var(--bg2); color: var(--muted); border: 1px solid var(--border); }
.rec-row .radd:hover { color: var(--accent2); border-color: var(--accent-dim); }
.rec-row .rin { color: var(--green); font-size: .76rem; padding: 1px 4px; }

/* ---- popis decku ---- */
#deck-desc {
  width: 100%;
  resize: vertical;
  min-height: 34px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  font-family: inherit;
  font-size: .84rem;
  padding: 6px 10px;
  margin-bottom: 10px;
}
#deck-desc:hover, #deck-desc:focus { border-color: var(--border); background: var(--bg2); color: var(--text); outline: none; }

/* ---- group/sort řádek ---- */
.list-controls { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.list-controls label { display: inline-flex; gap: 7px; align-items: center; color: var(--muted); font-size: .78rem; }
.list-controls select { padding: 5px 8px; font-size: .82rem; }

/* ---- game changer marker ---- */
.gc-mark { color: var(--accent); flex-shrink: 0; }
.gc-mark .icon { width: 12px; height: 12px; }

/* ---- spodní info lišta ---- */
.deck-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 34;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 18px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-top: 1px solid var(--border);
  font-size: .82rem;
  color: var(--muted);
  flex-wrap: wrap;
}
.deck-footer b { color: var(--text); font-weight: 600; }
.deck-footer .df-price { color: var(--accent2); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.deck-footer .df-types { margin-left: auto; display: flex; gap: 13px; align-items: center; flex-wrap: wrap; }
.deck-footer .df-t { display: inline-flex; gap: 4px; align-items: center; font-variant-numeric: tabular-nums; }
.deck-footer .df-t .icon { width: 14px; height: 14px; color: var(--muted); }
.deck-footer .df-gc { display: inline-flex; gap: 4px; align-items: center; color: var(--accent); }
.deck-footer .df-bracket { display: inline-flex; gap: 6px; align-items: center; }
.deck-footer .df-bracket select { padding: 3px 6px; font-size: .78rem; }
.deck-foot-pad { height: 46px; }

/* ---- dialogy ---- */
dialog {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  max-width: min(760px, 94vw);
  max-height: 90vh;
}
dialog::backdrop { background: rgba(8,6,12,.68); }
.dlg-body { padding: 18px; overflow-y: auto; max-height: 88vh; position: relative; }
.dlg-close { position: absolute; top: 10px; right: 10px; }

.card-detail { display: grid; grid-template-columns: 300px 1fr; gap: 18px; }
.card-detail .cimg { width: 100%; border-radius: 4.5% / 3.5%; display: block; background: var(--panel2); }
.card-detail .cimgs { display: flex; flex-direction: column; gap: 10px; }
.card-detail h2 { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.card-detail .ctype { color: var(--muted); margin: 2px 0 10px; }
.card-detail .ctext { line-height: 1.55; font-size: .92rem; white-space: pre-wrap; }
.card-detail .ctext em { color: var(--muted); }
.card-detail .cpt { font-weight: 600; color: var(--accent2); margin-top: 8px; }
.card-detail .cmeta { color: var(--muted); font-size: .8rem; margin-top: 10px; }
.card-detail .cprices { margin-top: 6px; font-size: .84rem; color: var(--accent); }
.legal-grid { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.legal-pill { font-size: .7rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.legal-pill.legal { color: var(--green); border-color: rgba(92,184,132,.45); }
.legal-pill.banned { color: var(--red); border-color: rgba(217,92,92,.45); }
.legal-pill.restricted { color: var(--accent); border-color: rgba(201,163,90,.5); }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* random commander modal */
.dlg-random-body { width: min(420px, 92vw); text-align: center; }
.dlg-random-body h2 { margin-bottom: 12px; }
.dlg-random-body .rimg { width: min(300px, 78vw); border-radius: 4.5% / 3.5%; display: block; margin: 0 auto 6px; background: var(--panel2); cursor: pointer; }
.dlg-random-body .rtype { color: var(--muted); font-size: .8rem; margin-bottom: 12px; }
.dlg-random-body .ractions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* nový deck modal */
.dlg-new-body { width: min(380px, 92vw); }
.dlg-new-body h2 { margin-bottom: 14px; }
.dlg-new-body .fgroup { margin: 0 0 12px; }
.dlg-new-body input[type="text"], .dlg-new-body select { width: 100%; }
.dlg-new-body .nactions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }

/* import decku */
.dlg-import-body { width: min(520px, 94vw); }
.dlg-import-body h2 { margin-bottom: 12px; }
.dlg-import-body textarea {
  width: 100%;
  min-height: 220px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: Consolas, monospace;
  font-size: .8rem;
  padding: 10px;
  resize: vertical;
}
.dlg-import-body .imp-note { color: var(--muted); font-size: .76rem; margin: 8px 0; line-height: 1.5; }
.dlg-import-body .imp-warn { color: var(--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; }
.dlg-import-body .frow { margin-bottom: 10px; }

/* generátor hordích balíčků */
.dlg-horde-body { width: min(560px, 94vw); }
.dlg-horde-body h2 { margin-bottom: 10px; }
.dlg-horde-body select { width: 100%; }
.dlg-horde-body .nactions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.hg-prev { border-top: 1px solid var(--border-soft); padding-top: 10px; margin-top: 6px; }
.hg-sum { color: var(--accent2); font-size: .85rem; margin-bottom: 8px; }
.hg-cards { display: flex; flex-wrap: wrap; gap: 6px; max-height: 40vh; overflow-y: auto; }
.hg-card {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg2); border: 1px solid var(--border-soft); border-radius: 6px;
  padding: 3px 8px 3px 3px; font-size: .74rem; color: var(--muted);
}
.hg-card[data-tok] { border-color: rgba(217,92,92,.4); }
.hg-card img { width: 26px; border-radius: 3px; display: block; }

/* výběr printu / alt artu */
.dlg-prints-body { width: min(680px, 94vw); }
.dlg-prints-body h2 { margin-bottom: 12px; }
.prints-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
/* POZOR: globální button je inline-flex → obrázek a popisek by seděly vedle
   sebe (rozbité dlaždice) — tady musí být block */
.print-tile { display: block; width: 100%; cursor: pointer; border: 2px solid transparent; border-radius: 8px; padding: 3px; text-align: center; background: none; color: var(--muted); font-weight: 400; }
.print-tile:hover { border-color: var(--accent-dim); background: var(--panel2); }
.print-tile.on { border-color: var(--accent); }
.print-tile img { width: 100%; border-radius: 4.5% / 3.5%; display: block; background: var(--panel2); }
.print-tile .pset { font-size: .68rem; color: var(--muted); margin-top: 3px; }
.prints-note { color: var(--muted); font-size: .78rem; margin: 8px 0; }

/* testovací ruka */
.dlg-play-body { width: min(1020px, 96vw); text-align: center; }
.dlg-play-body h2 { text-align: left; margin-bottom: 14px; }
.play-hand { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.play-hand img {
  width: clamp(96px, 12vw, 136px);
  border-radius: 4.5% / 3.5%;
  background: var(--panel2);
  cursor: pointer;
  transition: transform .15s ease;
}
.play-hand img:hover { transform: translateY(-4px); }
.play-actions { display: flex; gap: 8px; justify-content: center; margin: 14px 0 8px; }
.play-meta { color: var(--muted); font-size: .82rem; }
.play-meta b { color: var(--accent2); }
.play-dist { margin: 12px auto 0; max-width: 420px; text-align: left; }
.play-dist table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.play-dist td { padding: 2px 6px; color: var(--text); }
.play-dist td:first-child { color: var(--muted); white-space: nowrap; }
.play-dist .pbar { display: inline-block; height: 9px; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); border-radius: 3px; vertical-align: middle; margin-right: 7px; }
.play-dist td:last-child { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* hover náhled karty (fixní vlevo dole, jen hover zařízení) */
.hover-card {
  position: fixed;
  left: 14px;
  bottom: 58px;
  width: 235px;
  z-index: 60;
  pointer-events: none;
  display: none;
}
.hover-card.show { display: block; }
.hover-card img {
  width: 100%;
  border-radius: 4.5% / 3.5%;
  display: block;
  box-shadow: 0 14px 44px rgba(0,0,0,.65);
  background: var(--panel2);
}
@media (hover: none), (max-width: 1240px) {
  .hover-card { display: none !important; }
}

/* sdílený deck */
.dlg-share-body { width: min(640px, 94vw); }
.share-meta { color: var(--muted); font-size: .8rem; margin: 4px 0 12px; }
.share-list { max-height: 55vh; overflow-y: auto; columns: 2 240px; column-gap: 22px; }
.dlg-share-body .nactions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

/* tisk proxy listu — 63×88 mm karty, jinak skryté */
#print-sheet { display: none; }
@media print {
  body > *:not(#print-sheet) { display: none !important; }
  #print-sheet { display: block; }
  #print-sheet img {
    width: 63mm; height: 88mm;
    object-fit: cover;
    margin: 0 1mm 1mm 0;
    page-break-inside: avoid;
    border-radius: 0;
  }
  @page { margin: 6mm; }
}

.dlg-help-body { max-width: 560px; line-height: 1.55; }
.dlg-help-body h4 { color: var(--accent); margin: 14px 0 6px; font-family: var(--serif); }
.dlg-help-body ul { margin: 6px 0; padding-left: 20px; }
.dlg-help-body li { margin: 4px 0; font-size: .88rem; }

/* ---- mobilní tabbar ---- */
.tabbar { display: none; }

@media (max-width: 1240px) {
  .layout { grid-template-columns: 280px minmax(0, 1fr); }
  .deckpane.sidebar-right {
    position: fixed;
    inset: 53px 0 46px 0;
    height: auto;
    z-index: 30;
    border-left: none;
    display: none;
  }
  body.pane-side .deckpane.sidebar-right { display: block; }
  body.pane-side .content, body.pane-side .filters { display: none; }
  .tabbar {
    position: sticky;
    bottom: 0;
    z-index: 35;
    background: var(--panel);
    border-top: 1px solid var(--border);
  }
  body.in-deck .tabbar { display: flex; }
  .tabbar button {
    flex: 1;
    background: transparent;
    color: var(--muted);
    border: none;
    border-radius: 0;
    padding: 12px;
  }
  .tabbar button.on { color: var(--accent2); box-shadow: inset 0 2px 0 var(--accent); }
  body.in-deck .deck-footer { bottom: 45px; }
}

@media (max-width: 820px) {
  .layout { display: block; }
  .filters, .deckpane { position: static; height: auto; border: none; width: 100%; }
  .layout-browse .filters { border-bottom: 1px solid var(--border); }
  /* v deck editoru řídí viditelnost panelů body.pane-* */
  body.in-deck #pane-search, body.in-deck #pane-deck, body.in-deck #pane-side { display: none; }
  body.in-deck.pane-search #pane-search { display: block; }
  body.in-deck.pane-deck #pane-deck { display: block; }
  body.in-deck.pane-side #pane-side { display: block; position: static; inset: auto; }
  .topbar { flex-wrap: wrap; gap: 8px 10px; }
  .topbar h1 span { display: none; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .grid-side { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .card-detail { grid-template-columns: 1fr; }
  .card-detail .cimg { max-width: 300px; margin: 0 auto; }
  .deck-cols { columns: 1; }
  .home-actions { margin-left: 0; }
}

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

/* ---- light mode dorovnání (tokeny přepíše theme.css, tady jen ruční barvy) ---- */
:root[data-theme="light"] .topbar { background: linear-gradient(180deg, var(--bg-soft), var(--panel)); }
:root[data-theme="light"] .tile .timg { border-color: var(--border); }
:root[data-theme="light"] .cbar .bar { background: linear-gradient(180deg, #b08e3e, #9a7526); }
:root[data-theme="light"] .cmdr-card { background: rgba(154,117,38,.1); border-color: rgba(154,117,38,.35); }
:root[data-theme="light"] .legality.ok { color: #2e7d55; border-color: rgba(46,125,85,.45); background: rgba(46,125,85,.07); }
:root[data-theme="light"] .db-progress-bar { background: linear-gradient(90deg, rgba(154,117,38,.15), rgba(154,117,38,.3)); }

/* token v seznamu decku / našeptávači */
.tok-mark { color: var(--red); font-size: .8em; flex-shrink: 0; }

/* rulings + nápověda k syntaxi */
.rulings-box { margin-top: 14px; }
.rulings-h { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 6px; }
.rulings-list { margin: 0; padding-left: 18px; max-height: 30vh; overflow-y: auto; }
.rulings-list li { font-size: .82rem; line-height: 1.5; margin: 5px 0; color: var(--text); }
.rulings-list .rd { color: var(--muted); font-size: .72rem; margin-right: 5px; }
.syntax-hint { color: var(--muted); font-size: .7rem; line-height: 1.45; margin: 8px 0 2px; opacity: .85; }

/* historie verzí */
.dlg-hist-body { width: min(620px, 94vw); }
.hist-list { display: flex; flex-direction: column; gap: 5px; max-height: 34vh; overflow-y: auto; margin: 10px 0; }
.hist-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 11px; font-size: .82rem; color: var(--text); font-weight: 400; text-align: left;
}
.hist-row:hover { border-color: var(--accent-dim); }
.hist-row.on { border-color: var(--accent); background: var(--panel2); }
.hist-row .hr-date { flex: 1; color: var(--muted); }
.hist-row .hr-n { color: var(--accent2); font-variant-numeric: tabular-nums; }
.hist-row .hr-note { color: var(--text); font-style: italic; }
.hist-row .hr-auto { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.hist-diff { border-top: 1px solid var(--border-soft); padding-top: 10px; }
.diff-list { margin: 0; padding-left: 18px; max-height: 26vh; overflow-y: auto; }
.diff-list li { font-size: .82rem; margin: 3px 0; }
.diff-list li.add { color: var(--green); }
.diff-list li.rem { color: var(--red); }
.diff-list .dq { color: var(--muted); font-size: .74rem; }