/* Doplňky ke style.css builderu pro stránky kampaní (stejné barevné tokeny, světlý i tmavý režim). */
a.btn { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: inherit; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 5px 10px; white-space: nowrap; }
a.btn:hover { border-color: var(--ink-2); }
a.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.tag.status-draft { background: var(--panel-2); color: var(--ink-2); }
.tag.status-submitted { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.tag.status-approved { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.tag.role-gm { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.tag.role-player { background: var(--panel-2); }
.tag.role-admin { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.save-state { font-size: .82rem; color: var(--ink-2); min-width: 5.5em; }
.save-state.error { color: var(--err); font-weight: 600; }
.save-state.dirty, .save-state.saving { color: var(--warn); }
.hint.lock { border-left-color: var(--ok); background: var(--ok-soft); color: var(--ink); }
.hint a { cursor: pointer; }
.neg { color: var(--err); }
.pos { color: var(--ok); }
.buy { flex-wrap: nowrap; gap: 6px; justify-content: flex-end; }
.buy select { max-width: 190px; }
.money-row .money { font-family: var(--serif); font-size: 1.3rem; }
.new-skill { gap: 10px; }

/* Portál */
.wrap { max-width: 1100px; margin: 0 auto; padding-block: 20px 60px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.nav-links { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.portal-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.portal-top .nav-links { justify-self: end; }
.portal-top .who { color: inherit; text-decoration: none; font-weight: 600; justify-self: center; }
.portal-top .who:hover { color: var(--accent); }
@media (max-width: 600px) {
  .portal-top { grid-template-columns: auto minmax(0, 1fr); }
  .portal-top .nav-links { grid-column: 1 / -1; justify-self: start; }
}
.page-head { display: flex; gap: 12px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.page-head h1 { font-size: 1.9rem; margin: 0; text-wrap: balance; }
.page-head .sub { color: var(--ink-2); }
.camp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.camp { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 14px 16px; box-shadow: var(--shadow); text-decoration: none; color: inherit; min-width: 0; }
.camp:hover { border-color: var(--accent); }
.camp h3 { margin: 0; font-size: 1.2rem; }
.camp .meta { display: flex; gap: 6px 12px; flex-wrap: wrap; font-size: .85rem; color: var(--ink-2); }
.camp .desc { font-size: .9rem; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.camp ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
.prose { white-space: pre-wrap; max-width: 72ch; }
.two-col { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: minmax(0, 1fr); } }
.form-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.form-row .field { flex: 1 1 160px; }
.form-row input[type=text], .form-row input[type=number], .form-row select { width: 100%; }
.pw { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.15rem; background: var(--panel-2); border: 1px dashed var(--accent); border-radius: 6px; padding: 8px 12px; user-select: all; display: inline-block; }
.people { list-style: none; margin: 0; padding: 0; }
.people li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.people li .grow { flex: 1; min-width: 0; }
.log { list-style: none; margin: 0; padding: 0; max-height: 560px; overflow: auto; }
.log li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .9rem; overflow-wrap: anywhere; }

.login-card { max-width: 380px; margin: 12vh auto 0; }
.login-card h1 { font-size: 1.8rem; display: flex; gap: 10px; align-items: center; }
.login-card h1 svg { color: var(--accent); }
.login-card .field input { width: 100%; padding: 8px 10px; }
.login-card form { display: flex; flex-direction: column; gap: 12px; }
.error-text { color: var(--err); min-height: 1.3em; margin: 0; }

/* Mobil: tabulky s tlačítky (karma, obchod, uživatelé) jako karty – ovládání na vlastním řádku pod názvem. */
@media (max-width: 600px) {
  table.stack, table.stack tbody { display: block; }
  table.stack thead { display: none; }
  table.stack tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
  table.stack td { border: 0; padding: 0; }
  table.stack td:last-child, table.stack td[colspan] { grid-column: 1 / -1; }
  table.stack .buy, table.stack td:last-child > .row { justify-content: flex-start !important; flex-wrap: wrap !important; }
  table.stack .buy select { max-width: 100%; }
}