/* WFRP 5e Companion — one stylesheet, light + dark, mobile first. */

/* Headings: Alegreya (SIL OFL 1.1, static/vendor/fonty), variable weight, vendored so the app works offline.
   Polish letters other than „ó” live in the latin-ext file; the browser fetches a file only when a page needs it. */
@font-face {
  font-family: "Alegreya"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url("/static/vendor/fonty/alegreya-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Alegreya"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url("/static/vendor/fonty/alegreya-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Palette taken from the WFRP cover: teal-grey stone and navy shadows, the gold-to-orange logo
   with its blood-red outline, the parchment banner and the sickly green sky. */
:root {
  --bg: #ebe4d3;
  --surface: #fbf8ef;
  --surface-2: #f1ebdc;
  --ink: #1b2a30;
  --muted: #56646a;
  --border: #d5cbb5;
  --accent: #9f2317;
  --accent-ink: #fff8ea;
  --accent-soft: #f3dcd4;
  --gold: #a8620a;
  --teal: #2c6468;
  --teal-soft: #dbe7e4;
  --ok: #2f6a34;
  --ok-soft: #e0ecd9;
  --bad: #a4251c;
  --bad-soft: #f6ddd8;
  --warn: #8a5800;
  --warn-soft: #f6e9cc;
  --info-soft: #dde8e6;
  --chaos: #4d7a27;         /* Corruption and mutations: Morrslieb's sickly green */
  --chaos-soft: #e4eed8;
  --nav-bg: #1c3338;
  --nav-ink: #e7e2d3;
  --nav-muted: #9fb4b1;
  --nav-hover: rgb(255 255 255 / 7%);
  --nav-active: #f4bd3a;
  --nav-active-bg: rgb(244 189 58 / 14%);
  --logo-a: #f9d648;
  --logo-b: #e9791c;
  --logo-edge: #7d140c;
  --shadow: 0 1px 2px rgb(20 35 40 / 10%), 0 4px 16px rgb(20 35 40 / 7%);
  --radius: 10px;
  --radius-sm: 6px;
  --font: system-ui, -apple-system, "Segoe UI", "Noto Sans", Roboto, sans-serif;
  --font-head: "Alegreya", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --nav-w: 232px;
  --tabbar-h: 60px;
  color-scheme: light;
}

/* Dark: the script in <head> (web.SKRYPT_MOTYWU) always sets data-theme — the user's choice, or the system's
   setting for "auto" — so the dark palette is written once. */
:root[data-theme="dark"] {
  --bg: #0e191d;
  --surface: #15252a;
  --surface-2: #1c3035;
  --ink: #e9e4d5;
  --muted: #93a8a6;
  --border: #2a4147;
  --accent: #e5553b;
  --accent-ink: #1b0906;
  --accent-soft: #3b1f1a;
  --gold: #f2b830;
  --teal: #72b0ac;
  --teal-soft: #1b3539;
  --ok: #9bcf6e;
  --ok-soft: #1f3322;
  --bad: #f07d68;
  --bad-soft: #3d1f1b;
  --warn: #f2b830;
  --warn-soft: #3a2f16;
  --info-soft: #1b3036;
  --chaos: #a3d96f;
  --chaos-soft: #1f3320;
  --nav-bg: #0a1316;
  --nav-ink: #e2ddcf;
  --nav-muted: #8aa09e;
  --nav-hover: rgb(255 255 255 / 6%);
  --nav-active: #f4bd3a;
  --nav-active-bg: rgb(244 189 58 / 12%);
  --shadow: 0 1px 2px rgb(0 0 0 / 35%), 0 4px 16px rgb(0 0 0 / 30%);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 var(--font);
  min-height: 100dvh;
}
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: 1.7rem; color: var(--teal); }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 .75em; }
a { color: var(--accent); }
small, .muted { color: var(--muted); }
.muted { font-size: .92em; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }
code, kbd { font-size: .9em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 0 .3em; }
ul.plain { list-style: none; padding: 0; margin: 0; }

/* ---- layout ---------------------------------------------------------------------- */
.app { min-height: 100dvh; }
.main { padding: 16px 16px calc(var(--tabbar-h) + 88px); max-width: 1180px; margin: 0 auto; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem 16px;
  background: color-mix(in srgb, var(--nav-bg) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--logo-edge);
  color: var(--nav-ink);
}
.topbar .btn.ghost { color: var(--nav-ink); }
.topbar .btn.ghost:hover { background: var(--nav-hover); }
.topbar .brand { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--nav-ink); text-decoration: none; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand .sigil { color: var(--logo-b); }
.brand .logo {
  background: linear-gradient(180deg, var(--logo-a) 25%, var(--logo-b) 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 var(--logo-edge)) drop-shadow(0 -1px 0 var(--logo-edge));
  letter-spacing: .03em;
}

.sidenav { display: none; }
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--nav-bg); border-top: 2px solid var(--logo-edge);
}
.tabbar a, .tabbar button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--nav-muted); text-decoration: none; font-size: .72rem; background: none; border: 0; font-family: inherit;
  cursor: pointer; min-width: 0;
}
.tabbar .ikona.ico { width: 1.45rem; height: 1.45rem; }
.tabbar a.active, .tabbar button.active { color: var(--nav-active); font-weight: 600; }

@media (min-width: 900px) {
  .sidenav {
    display: flex; flex-direction: column;
    position: fixed; top: 0; bottom: 0; left: 0; width: var(--nav-w);
    padding: 1rem .75rem; gap: 2px;
    background: var(--nav-bg); border-right: 2px solid var(--logo-edge); color: var(--nav-ink);
    overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--nav-muted) transparent;  /* a very short window */
  }
  .sidenav .brand { font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; color: var(--nav-ink); text-decoration: none; padding: .25rem .5rem 1rem; }
  .sidenav a, .sidenav button.navlink {
    display: flex; align-items: center; gap: .65rem; width: 100%;
    padding: .5rem .6rem; border-radius: var(--radius-sm);
    color: var(--nav-ink); text-decoration: none; background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
  }
  .sidenav a:hover, .sidenav button.navlink:hover { background: var(--nav-hover); }
  .sidenav a.active { background: var(--nav-active-bg); color: var(--nav-active); font-weight: 600; box-shadow: inset 3px 0 0 var(--nav-active); }
  .sidenav .ikona { width: 1.15rem; height: 1.15rem; opacity: .9; }
  .sidenav .section { margin: 1rem .6rem .25rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--nav-muted); }
  .sidenav .muted, .sidenav .kbd-hint { color: var(--nav-muted); }
  .sidenav .spacer { flex: 1; }
  /* the account row: „Moje konto” with who is logged in, then settings and logout as icons */
  .konto-nav { display: flex; align-items: center; gap: 2px; margin-top: .4rem; padding-top: .5rem;
    border-top: 1px solid color-mix(in srgb, var(--nav-muted) 35%, transparent); }
  .sidenav .konto-nav > a, .konto-gosc { flex: 1; min-width: 0; width: auto; padding-right: .3rem; white-space: nowrap; }
  .konto-gosc { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; }
  .konto-nav .grow { overflow: hidden; text-overflow: ellipsis; }
  .sidenav .konto-nav button.navlink { width: auto; padding: .5rem .45rem; }
  /* a laptop with a short window: the same menu, denser, so it still fits without a scrollbar */
  @media (max-height: 860px) {
    .sidenav { padding-top: .6rem; padding-bottom: .6rem; }
    .sidenav .brand { padding-bottom: .6rem; }
    .sidenav a, .sidenav button.navlink { padding-top: .38rem; padding-bottom: .38rem; }
    .sidenav .section { margin-top: .7rem; }
    .kampania-nav { margin-bottom: .6rem; }
    .kampania-nav select { min-height: 34px; padding-top: .25rem; padding-bottom: .25rem; }
  }
  @media (max-height: 740px) {  /* 1366×768 with the browser's bars */
    .sidenav a, .sidenav button.navlink { padding-top: .3rem; padding-bottom: .3rem; }
    .sidenav .section { margin-top: .5rem; }
    .kampania-nav label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  }
  .kampania-nav { margin: -.4rem .5rem .9rem; }
  .kampania-nav label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--nav-muted); margin-bottom: .2rem; }
  .kampania-nav select { width: 100%; background: var(--nav-hover); color: var(--nav-ink); border-color: var(--nav-muted); }
  .kampania-nav select option { color: CanvasText; background: Canvas; }  /* the open list is not dark */
  .app { padding-left: var(--nav-w); }
  .tabbar { display: none; }
  .topbar .brand { display: none; }  /* the side menu has it; the bar says where you are */
  .topbar .tytul-strony { display: block; }
  .topbar .stan-zapisu { display: inline; }
  .naglowek-imie .save-state { display: none; }  /* the sheet's save state moves to the bar */
  .topbar { background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--border); color: var(--ink); }
  .topbar .btn.ghost { color: var(--ink); }
  .topbar .btn.ghost:hover { background: var(--surface-2); }
  .topbar .szukaj-pasek { min-width: 15rem; justify-content: flex-start; gap: .5rem; padding: .3rem .45rem .3rem .65rem;
    border-color: var(--border); background: var(--surface); color: var(--muted); font-weight: 400; }
  .topbar .szukaj-pasek:hover { border-color: var(--muted); background: var(--surface); }
  .topbar .szukaj-pasek .szukaj-napis { display: inline; flex: 1; text-align: left; }
  .topbar .szukaj-pasek kbd { display: inline; font-family: inherit; font-size: .75rem; color: var(--muted); }
  .tabs.zakladki-stron { margin: 0 0 1.25rem; padding: 0; }  /* the content's own edge, not the phone's full bleed */
  .main { padding: 24px 32px 96px; }
}

/* ---- components ------------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem; box-shadow: var(--shadow);
  border-top: 3px solid color-mix(in srgb, var(--teal) 55%, var(--border));
}
.card + .card, .stack > * + * { margin-top: 1rem; }
/* in a grid the gap does the spacing; that margin stretched the first tile by its height */
:is(.grid, .grid-2, .grid-auto) > .card + .card { margin-top: 0; }
.card h2, .card h3 { margin-top: 0; }
.card-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.card-head h2, .card-head h3 { margin: 0; flex: 1; }
.grid { display: grid; gap: 1rem; }
.grid-2 { display: grid; gap: 1rem; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
[hidden] { display: none !important; }  /* .badge and friends set their own display */
.grid-auto { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
/* one's own characters: a gold frame, and first in the list when they share a grid with the others */
.postac-karta.moja { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.row.nowrap { flex-wrap: nowrap; }
.row.nowrap > .btn:not(.grow) { flex: none; white-space: nowrap; }  /* „＋ Dodaj” by a field keeps one line */
.grow { flex: 1; min-width: 0; }
.right { margin-left: auto; }
.center { text-align: center; }
.hide-mobile { display: none; }
@media (min-width: 700px) { .hide-mobile { display: initial; } .hide-desktop { display: none; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-height: 40px; padding: .4rem .85rem;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--ink);
  font: inherit; font-weight: 500; text-decoration: none; cursor: pointer;
  touch-action: manipulation; user-select: none;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--bad); }
.btn.warn { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.btn.small { min-height: 32px; padding: .2rem .55rem; font-size: .88rem; }
.btn.icon { min-width: 40px; padding: .3rem; }
.btn.small.icon { min-width: 32px; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.big { min-height: 52px; font-size: 1.1rem; padding: .6rem 1.4rem; }
.btn.block { width: 100%; }

input, select, textarea {
  font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .45rem .6rem; min-height: 40px; width: 100%;
}
textarea { min-height: 90px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 1px; }
input[type="checkbox"], input[type="radio"] { width: 1.15rem; height: 1.15rem; min-height: 0; accent-color: var(--accent); }
/* numbers are typed (or stepped with the − / + buttons), the tiny spinner arrows only get in the way on a phone */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input.num { width: 4.2rem; text-align: center; padding-left: .2rem; padding-right: .2rem; }
input.num-s { width: 3.2rem; text-align: center; padding-left: .1rem; padding-right: .1rem; }
input.inline, textarea.inline { border-color: transparent; background: transparent; }
input.inline:hover, textarea.inline:hover { border-color: var(--border); }
label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .2rem; }
label.check { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink); font-size: .95rem; cursor: pointer; margin: 0; }
.field { margin-bottom: .75rem; }
.fields { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

.badge {
  display: inline-block; padding: .05rem .45rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; line-height: 1.5;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
  white-space: nowrap;
}
.badge.accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
/* a Creature Trait an effect gives: outlined, next to the effect's filled chip */
.badge.cecha-efektu { background: transparent; color: var(--accent); border-color: var(--accent); }
.badge.cecha-efektu.sytuacyjna { border-style: dashed; }  /* only when it fits (a Ward against magic) */
.badge.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.badge.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge.gold { color: var(--gold); border-color: var(--gold); background: transparent; }

.alert { padding: .6rem .8rem; border-radius: var(--radius-sm); background: var(--info-soft); margin-bottom: 1rem; }
.alert.bad { background: var(--bad-soft); color: var(--bad); }
.alert.warn { background: var(--warn-soft); color: var(--warn); }
.alert.ok { background: var(--ok-soft); color: var(--ok); }

.list { list-style: none; margin: 0; padding: 0; }
.list > li { border-bottom: 1px solid var(--border); }
.list > li:last-child { border-bottom: 0; }
.list-link { display: flex; align-items: center; gap: .6rem; padding: .7rem .2rem; color: var(--ink); text-decoration: none; }
.list-link:hover { background: var(--surface-2); }
.list-link .title { font-weight: 600; }
.list-link.moja { border-left: 3px solid var(--gold); padding-left: .5rem; background: color-mix(in srgb, var(--gold) 10%, transparent); }

table.t { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.t th, table.t td { padding: .35rem .4rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
table.t th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
table.t td.n, table.t th.n { text-align: center; white-space: nowrap; }
table.t tr:last-child td { border-bottom: 0; }
table.t tr.hl td { background: var(--accent-soft); font-weight: 600; }
.table-wrap { overflow-x: auto; margin: 0 -.25rem; padding: 0 .25rem; }

details.acc { border-bottom: 1px solid var(--border); }
details.acc > summary {
  list-style: none; cursor: pointer; padding: .7rem .2rem; display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap;  /* a row of badges must wrap on a phone instead of pushing the page sideways */
}
details.acc > summary > * { min-width: 0; }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
details.acc[open] > summary::before { transform: rotate(90deg); }
details.acc > .acc-body { padding: 0 .2rem .9rem 1.2rem; }
.prose :first-child { margin-top: 0; }
.prose :last-child { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 1.3rem; }

.tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--border); margin: 0 -16px 1rem; padding: 0 16px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs :is(button, a) {
  background: none; border: 0; border-bottom: 3px solid transparent; padding: .6rem .7rem; font: inherit;
  color: var(--muted); cursor: pointer; white-space: nowrap; text-decoration: none;
}
.tabs :is(button, a).active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
/* tabs that are pages of their own (the GM's „Gracze i kampanie”) */
.zakladki-stron a { display: inline-flex; align-items: center; gap: .45rem; }
.zakladki-stron a:hover { color: var(--ink); }
.zakladki-stron a.active:hover { color: var(--accent); }
.zakladki-stron .ikona { width: 1.1rem; height: 1.1rem; }
@media (max-width: 480px) {  /* all three names on a phone's width */
  .zakladki-stron a { padding-left: .5rem; padding-right: .5rem; }
  .zakladki-stron .ikona { display: none; }
}
.szukaj-pasek .szukaj-napis, .szukaj-pasek kbd { display: none; }  /* a phone: the magnifier alone */

.stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: .45rem .3rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border);
  min-width: 0;
}
.stat .lbl { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.stat .val { font-size: 1.35rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat .sub { font-size: .75rem; color: var(--muted); }
.stepper { display: inline-flex; align-items: center; gap: .15rem; }
.stepper .btn { min-width: 34px; min-height: 34px; padding: 0; font-size: 1.1rem; }
.stepper .v { min-width: 2.2rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* characteristics grid on the sheet */
.cechy { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; }
@media (max-width: 420px) { .cechy { grid-template-columns: repeat(5, 1fr); gap: .3rem; } }
.cecha { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); text-align: center; position: relative; }
.cecha:has(.cecha-rzut:enabled:hover) { border-color: var(--accent); }
.cecha-rzut {
  display: flex; flex-direction: column; align-items: center; width: 100%; padding: .35rem .2rem;
  background: none; border: 0; border-radius: inherit; font: inherit; color: inherit; cursor: pointer;
}
.cecha-rzut:disabled { cursor: default; }
.cecha > div { padding: 0 .2rem .3rem; }
.cecha .kod { font-size: .78rem; font-weight: 700; color: var(--muted); }
.cecha .w { font-size: 1.45rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cecha .b { font-size: .72rem; color: var(--muted); }
.cecha.prof::after { content: "●"; position: absolute; top: 2px; right: 5px; font-size: .6rem; color: var(--gold); }

.skill-row { display: flex; align-items: center; gap: .4rem; padding: .35rem 0; border-bottom: 1px solid var(--border); }
.skill-row:last-child { border-bottom: 0; }
.skill-row .name { flex: 1; min-width: 0; }
.skill-row .name button { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.skill-row .name button:hover { text-decoration: underline; }
.skill-row .val {
  min-width: 3.1rem; min-height: 38px; font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.dot-prof { color: var(--gold); font-size: .7rem; }
.dim { opacity: .55; }

/* compact skill grid */
.cells { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.cells.edycja { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (max-width: 480px) {
  .cells { grid-template-columns: 1fr 1fr; gap: .3rem; }
  .cells.edycja { grid-template-columns: 1fr; }
  .cell { padding-left: .4rem; }
  .cell-name > span { font-size: .84rem; }
  .cell-val { min-width: 2.5rem; font-size: 1rem; }
}
.cell {
  display: flex; align-items: center; gap: .3rem; min-width: 0;
  padding: .2rem .2rem .2rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
}
.cell.grupowa { border-style: dashed; }  /* „Skradanie (…)”: the Specialisations the card lacks (5e s. 110) */
.cell.zarobkowa { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 55%, transparent); }  /* before .prof: keeps its gold edge */
.cell.prof { border-left: 3px solid var(--gold); }
.cell-name {
  flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2;
  background: none; border: 0; padding: .15rem 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.cell-name > span { font-size: .92rem; overflow-wrap: break-word; hyphens: auto; }
.cell-name small { font-size: .72rem; }
.cell-name:hover > span { text-decoration: underline; }
.cell-val { min-width: 2.9rem; min-height: 36px; padding: .1rem .3rem; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.cell .stepper .btn { min-width: 28px; min-height: 28px; font-size: 1rem; }
.cell .stepper .v { min-width: 1.5rem; }

/* compact equipment list */
/* fixed tracks: every row (and the header) is its own grid, so auto-sized columns would not line up */
.items .item-row {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 3rem 3rem 2.25rem; gap: .35rem; align-items: center;
  padding: .12rem 0; border-bottom: 1px solid var(--border);
}
.items .item-row > :first-child { justify-self: center; }
.items .item-row > .btn.icon { width: 100%; min-width: 0; padding-left: 0; padding-right: 0; }
.items .item-row { break-inside: avoid; }
.items-head .second { display: none; }
@media (min-width: 1000px) {
  .items-head { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .items-head .second { display: grid; }
  .items-list { columns: 2; column-gap: 1.5rem; }
}
.items .item-row.head { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding-bottom: .2rem; }
.items .item-name { display: flex; flex-wrap: wrap; gap: 0 .35rem; min-width: 0; }
.items .item-name input { flex: 1 1 11rem; min-width: 0; }
.items .item-name input.note { flex: 1 1 9rem; font-size: .84rem; color: var(--muted); }
.items .item-name input.cena { flex: 0 1 7rem; }
.items .item-cechy { flex: 1 1 100%; margin: .15rem 0; }  /* an item's Craftsmanship (partials/cechy_oreza.html) */
.items input { min-height: 30px; padding: .12rem .35rem; }
input.num-xs { width: 3rem; text-align: center; padding-left: .1rem; padding-right: .1rem; }
.btn.done { border-color: var(--gold); color: var(--gold); opacity: 1; }

.ticks { display: flex; flex-wrap: wrap; gap: 4px; }
.tick { width: 22px; height: 22px; border-radius: 4px; border: 1.5px solid var(--border); background: var(--surface); }
.tick.on { background: linear-gradient(180deg, var(--logo-a), var(--logo-b)); border-color: var(--logo-edge); }

.silhouette { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }

/* ---- dialogs ------------------------------------------------------------------------ */
.overlay {
  position: fixed; inset: 0; z-index: 60; background: rgb(10 6 3 / 45%);
  display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 700px) { .overlay { align-items: center; padding: 1rem; } }
.sheet {
  background: var(--surface); color: var(--ink); width: 100%; max-width: 560px;
  max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; scroll-padding-bottom: 5.5rem;
  border-radius: 16px 16px 0 0; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  box-shadow: var(--shadow);
}
@media (min-width: 700px) { .sheet { border-radius: 14px; } }
.sheet.wide { max-width: 760px; }
.sheet-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
/* the main action of a dialog stays at the bottom edge while the sheet scrolls */
.sheet-foot {
  position: sticky; bottom: calc(-1rem - env(safe-area-inset-bottom)); z-index: 2;
  margin: .75rem -1rem calc(-1rem - env(safe-area-inset-bottom));
  padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border);
}
.sheet .razem { margin: .2rem 0 .5rem; }
#rzut-wynik { scroll-margin-top: .5rem; }
.sheet details.wiecej { margin-bottom: 0; }
.sheet-head h2 { margin: 0; flex: 1; font-size: 1.2rem; }

.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.seg button { border: 0; background: var(--surface); padding: .35rem .7rem; font: inherit; cursor: pointer; color: var(--muted); min-height: 36px;
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.seg button + button { border-left: 1px solid var(--border); }
.seg button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.hint { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: var(--radius-sm); background: var(--surface-2); margin-bottom: .3rem; font-size: .92rem; }
.hint.off { opacity: .5; text-decoration: line-through; }

/* roll result */
.roll { border-radius: var(--radius); padding: .8rem; border: 1px solid var(--border); background: var(--surface-2); }
.roll.ok { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-soft); }
.roll.bad { border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: var(--bad-soft); }
.roll .big { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.roll .dice { font-size: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.roll .sl { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.roll .liczba { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.roll .liczba small { margin-top: 3px; font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.roll details.detail > summary { cursor: pointer; }
.roll .verdict { font-weight: 700; }
.roll .detail { font-size: .88rem; color: var(--muted); margin-top: .3rem; }
.roll .extra { margin-top: .5rem; font-size: .95rem; }
.roll .extra > div + div { margin-top: .2rem; }
.roll-compact { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.roll-compact:last-child { border-bottom: 0; }
.roll-compact .res { min-width: 3.2rem; text-align: center; font-weight: 800; font-size: 1.1rem; border-radius: var(--radius-sm); padding: .1rem .2rem; }
.res.ok { background: var(--ok-soft); color: var(--ok); }
.res.bad { background: var(--bad-soft); color: var(--bad); }
.res.neutral { background: var(--surface-2); }

/* floating dice button */
.fab {
  position: fixed; right: 16px; bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); z-index: 45;
  width: 56px; height: 56px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--nav-bg); color: var(--nav-ink); font-size: 1.6rem;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--nav-ink) 22%, transparent), 0 4px 14px rgb(0 0 0 / 28%); cursor: pointer;
}
@media (min-width: 900px) { .fab { bottom: 24px; right: 24px; } }
.fab:hover { filter: brightness(1.15); }

/* 3D dice layer: kept laid out (visibility, not display) so the WebGL canvas keeps its size */
.kosci-3d {
  position: fixed; inset: 0; z-index: 70; pointer-events: none;
  visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility 0s linear .25s;
}
.kosci-3d.widoczne {
  visibility: visible; opacity: 1; pointer-events: auto; cursor: pointer; transition: opacity .15s ease;
  background: radial-gradient(ellipse at center, rgb(8 14 16 / 12%), rgb(8 14 16 / 45%));
}
/* someone else's roll: the dice fly over the page, which stays usable */
.kosci-3d.widoczne.cudzy { pointer-events: none; cursor: default; background: radial-gradient(ellipse at center, transparent, rgb(8 14 16 / 22%)); }
.kosci-3d canvas { display: block; }

/* toasts */
.toasts { position: fixed; top: 64px; right: 12px; left: 12px; z-index: 80; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; align-items: flex-end; }
.toast {
  pointer-events: auto; max-width: 380px; width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm); padding: .55rem .7rem; box-shadow: var(--shadow); font-size: .92rem;
}
.toast.ok { border-left-color: var(--ok); }
.toast.bad { border-left-color: var(--bad); }
.toast.warn { border-left-color: var(--warn); }
.toast.z-akcja { display: flex; align-items: center; gap: .6rem; justify-content: space-between; }

/* palette */
.palette-results { max-height: 55dvh; overflow-y: auto; margin-top: .5rem; }
.palette-results a { display: flex; gap: .5rem; align-items: center; padding: .55rem .5rem; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.palette-results a.sel, .palette-results a:hover { background: var(--accent-soft); }

.save-state { font-size: .78rem; color: var(--muted); min-width: 5.5rem; text-align: right; }
.save-state.err { color: var(--bad); }

.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; }
.qr svg { width: min(320px, 80vw); height: auto; background: #fff; border-radius: 8px; padding: 6px; }
.kbd-hint { font-size: .75rem; color: var(--muted); }
.problem-blad { color: var(--bad); }
.problem-ostrzezenie { color: var(--warn); }
.htmx-request .spinner, .spinner.htmx-request { opacity: 1; }
.spinner { opacity: 0; transition: opacity .2s; }

/* ---- combat tracker ---------------------------------------------------------------------- */
button.badge { cursor: pointer; font-family: inherit; }
button.badge:disabled { cursor: default; }
.walka-pasek { position: sticky; top: var(--topbar-h, 58px); z-index: 20; padding: .6rem .8rem; }
#trafienia { scroll-margin-top: 150px; }  /* below the sticky GM toolbar */
.walka-tura { font-size: 1.05rem; }
.walka-box { padding: .55rem .6rem; border-radius: var(--radius-sm); background: var(--accent-soft); }
.walka-box label { color: var(--accent); font-weight: 600; }

/* ---- roll dialog: difficulty chips, scene targets, the folded configuration, the result's actions ---- */
.trudnosci { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.8rem, 1fr)); gap: .3rem; }
.cele { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .35rem; margin-top: .3rem; }
.trudnosci button, .cel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 46px; padding: .3rem .4rem; line-height: 1.15;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--ink); font: inherit; cursor: pointer; touch-action: manipulation;
}
.trudnosci button { padding: .3rem .2rem; font-size: .86rem; }  /* „Problematyczny” fits three to a row on a phone */
.trudnosci button span { max-width: 100%; overflow-wrap: anywhere; }
.trudnosci button small, .cel .znaczniki { font-size: .74rem; color: var(--muted); }
.trudnosci button:hover, .cel:hover { border-color: var(--accent); }
.trudnosci button.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.cel .nazwa { font-weight: 600; overflow-wrap: anywhere; text-align: center; }
.cel.sojusznik { border-style: dashed; }
.cel.on { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.cel.on .znaczniki { color: inherit; opacity: .85; }
.walka-box .btn.on { background: var(--surface); border-color: var(--accent); }
.podsumowanie-rzutu {
  display: block; width: 100%; margin-bottom: .6rem; padding: .4rem .6rem;
  border: 1px dashed var(--border); border-radius: var(--radius-sm); background: transparent;
  color: var(--ink); font: inherit; font-size: .9rem; text-align: left; cursor: pointer;
}
.podsumowanie-rzutu:disabled { cursor: default; }
.stepery-rzutu { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.9rem, 1fr)); gap: .5rem .75rem; }
.stepery-rzutu label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akcje-wyniku { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.akcje-wyniku:not(:has(> :not(template))) { display: none; }
.propozycja { border-top-color: var(--gold); }
.trafienie { padding: .55rem 0; border-bottom: 1px solid var(--border); }
.trafienie:last-child { border-bottom: 0; }
.trafienie.zadane { opacity: .7; }
.uczestnik { display: flex; gap: .5rem; align-items: flex-start; padding: .45rem .4rem; border-bottom: 1px solid var(--border); border-left: 4px solid transparent; }
.uczestnik:last-child { border-bottom: 0; }
.uczestnik.wrog { border-left-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.uczestnik.aktywny { background: var(--accent-soft); border-left-color: var(--accent); border-radius: var(--radius-sm); }
.uczestnik.moj .nazwa { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
/* one's own characters must jump out of the list at a glance, also when it is their turn */
.uczestnik.moj { background: color-mix(in srgb, var(--gold) 12%, transparent); border-left-color: var(--gold); }
.uczestnik.moj.aktywny { background: var(--accent-soft); border-left-color: var(--gold); }
.uczestnik.wylaczony { opacity: .5; }
.uczestnik .ini { min-width: 2.5rem; text-align: center; }
.uczestnik .ini .v { font-size: 1.4rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.uczestnik .nazwa { font-weight: 700; font-size: 1.02rem; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uczestnik .strzalka { color: var(--accent); font-weight: 800; }
.uczestnik .strzalka .ikona { fill: currentColor; }  /* the one taking its turn: a filled triangle */
.u-glowa { display: flex; align-items: center; gap: .4rem; min-width: 0; min-height: 32px; }
.zdrowie { display: inline-flex; align-items: center; gap: .3rem; flex: none; font-size: .9rem; font-variant-numeric: tabular-nums; }
.pasek-zyw { display: inline-block; width: 3.4rem; height: 7px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.pasek-zyw > span { display: block; height: 100%; transition: width .3s; }
.pasek-zyw .ok { background: var(--ok); }
.pasek-zyw .warn { background: var(--gold); }
.pasek-zyw .bad { background: var(--bad); }
.uczestnik .znaczniki { gap: .25rem; margin-top: .1rem; }
/* A participant's actions. With a mouse they wrap onto more lines: a row scrolling sideways hid its last chips (the wheel
   scrolls down and there is no scrollbar to see). On a touch screen they stay one row to swipe, and its right edge fades
   while more chips wait there (a scroll-driven animation; without one there is simply no fade). */
.akcje { gap: .3rem; }
.uczestnik .akcje { flex-wrap: wrap; margin-top: .3rem; }
.chip-grupa { display: inline-flex; gap: .2rem; flex: none; max-width: 100%; }
.btn.chip-akcji { flex: none; min-height: 34px; border-radius: 999px; white-space: nowrap; max-width: 100%; }
/* a chip longer than the row (a spell with its Conditions) breaks its text instead of running out of the row */
.uczestnik .akcje .btn.chip-akcji, .panel-gracza .akcje .btn.chip-akcji { white-space: normal; text-align: left; }
@property --zanik-lewy { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --zanik-prawy { syntax: "<length>"; inherits: false; initial-value: 0px; }
/* the fade shows only on the side where chips wait: the right one at the start, the left one at the end */
@keyframes akcje-przewijane {
  0% { --zanik-lewy: 0px; --zanik-prawy: 2.5rem; } 15% { --zanik-lewy: 2.5rem; }
  85% { --zanik-prawy: 2.5rem; } 100% { --zanik-lewy: 2.5rem; --zanik-prawy: 0px; }
}
@media (pointer: coarse) {
  .uczestnik .akcje { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none;
    mask-image: linear-gradient(to right, transparent, #000 var(--zanik-lewy), #000 calc(100% - var(--zanik-prawy)), transparent); }
  @supports (animation-timeline: scroll()) {
    .uczestnik .akcje { animation: akcje-przewijane linear both; animation-timeline: scroll(self inline); }
  }
  .uczestnik .akcje::-webkit-scrollbar { display: none; }
  .uczestnik .akcje .btn.chip-akcji { white-space: nowrap; max-width: none; }
  .uczestnik .akcje .chip-grupa { max-width: none; }
}
.wiecej { margin-top: .5rem; padding: .6rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.wiecej > * + * { margin-top: .5rem; }
.mg-edycja { padding-top: .5rem; border-top: 1px dashed var(--border); }
.stany-edycja .row + .row { margin-top: .25rem; }
.opcje-sceny { border-top: 1px solid var(--border); padding-top: .5rem; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* hits: one card each, the Wounds it will cost in large print and one main button */
.karta-trafienia { padding: .6rem .7rem; margin-bottom: .5rem; border: 1px solid var(--border); border-left: 4px solid var(--warn); border-radius: var(--radius-sm); background: var(--surface); }
.karta-trafienia.zadane { border-left-color: var(--border); opacity: .8; }
.karta-trafienia.odparte { border-left-color: var(--ok); }
.kt-ochrona { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; margin-top: .45rem; }
.kt-ochrona .btn { text-align: left; }
.kt-ochrona .btn.on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.karta-trafienia:is(.odrzucone, .unikniete) { border-left-color: var(--border); opacity: .6; }
.kt-glowa { display: flex; flex-wrap: wrap; gap: .1rem .5rem; align-items: baseline; }
.kt-podglad { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin-top: .35rem; }
.kt-podglad .rany { font-size: 1.5rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.kt-wzor { flex-basis: 100%; }
.kt-edycja { padding: .5rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.blok-trafienia details.acc { border-bottom: 0; }

/* Critical Wounds (komponenty/walka/krytyczne.js): folded in a settled hit with the table's text, and the big card
   that comes up when one is rolled — a blood-red band, the roll and the wound's name large, the row in the book's
   font, a stamp for a death. The card sits over the roll dialog („Zadaj” from there), under a Condition's description
   (its badges open it) and the dice. */
.kt-krytyk { margin-top: .45rem; border: 1px solid color-mix(in srgb, var(--bad) 28%, transparent); border-left: 3px solid var(--bad);
  border-radius: var(--radius-sm); background: var(--bad-soft); }
.kt-krytyk > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; padding: .4rem .55rem; }
.kt-krytyk > summary::-webkit-details-marker { display: none; }
.kt-krytyk > summary::after { content: "▸"; margin-left: auto; color: var(--muted); transition: transform .15s; }
.kt-krytyk[open] > summary::after { transform: rotate(90deg); }
.kt-krytyk > summary > .ikona { flex: none; width: 1.3rem; height: 1.3rem; color: var(--bad); }
.kt-krytyk-nazwa { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.kt-krytyk-nazwa b { font-family: var(--font-head); font-size: 1.06rem; }
.kt-krytyk-nazwa small { font-size: .8rem; }
.kt-krytyk.smierc .kt-krytyk-nazwa b { color: var(--bad); }
.kt-krytyk-tresc { padding: .1rem .6rem .6rem; font-size: .93rem; }
.kt-krytyk-tresc > * + *, .rana > * + * { margin-top: .5rem; }
.rana-opis, .rana-na-karcie { margin-bottom: 0; }

.overlay.rana-okno { z-index: 61; align-items: center; padding: 12px;
  background: radial-gradient(ellipse at center, rgb(60 6 3 / 48%), rgb(10 3 2 / 84%)); }
.overlay.rana-okno::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, rgb(200 24 12 / 0%) 15%, rgb(200 24 12 / 60%)); }
.rana-arkusz { position: relative; max-width: 540px; border-radius: 14px; padding-top: 0; overflow-x: hidden;  /* the stamp's scale */
  border: 1px solid color-mix(in srgb, var(--bad) 55%, transparent);
  box-shadow: 0 24px 70px rgb(0 0 0 / 55%), 0 0 90px rgb(170 20 10 / 35%); }
.rana-pasmo { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .5rem; margin: 0 -1rem .8rem;
  padding: .6rem 1rem; color: #fff1e0; font-family: var(--font-head); font-size: 1.05rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; background: linear-gradient(100deg, #5e0d07, #a4251c 55%, #7d140c); }
.rana-pasmo .ikona { width: 1.35rem; height: 1.35rem; }
.rana-arkusz.smierc .rana-pasmo { background: linear-gradient(100deg, #140807, #3b0e0a 55%, #1d0a08); }
.rana-trafienie + .rana-trafienie { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.rana-kto { color: var(--muted); }
.rana-kto b { color: var(--ink); }
.rana { margin-top: .7rem; }
.rana + .rana { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px dashed var(--border); }
.rana-wynik { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; }
.rana-liczba { flex: none; display: inline-flex; flex-direction: column; align-items: center; line-height: 1;
  padding-right: .9rem; border-right: 2px solid color-mix(in srgb, var(--bad) 35%, transparent); }
.rana-liczba > span { font-size: 2.6rem; font-weight: 800; color: var(--bad); font-variant-numeric: tabular-nums; }
.rana-liczba small { margin-top: 3px; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; }
.rana-tytul { flex: 1 1 10rem; min-width: 0; }
.rana-miejsce { display: block; color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.rana-nazwa { margin: .1rem 0 0; font-size: clamp(1.55rem, 5.5vw, 2.15rem); font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.rana.smierc .rana-nazwa { color: var(--bad); }
.rana-pieczec { flex: none; margin: .35rem 0 .35rem auto; display: inline-flex;  /* room for its tilt when it wraps */ align-items: center; gap: .3rem; padding: .15rem .55rem; border: 3px double var(--bad);
  border-radius: 6px; color: var(--bad); font-family: var(--font-head); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; transform: rotate(-9deg); }
.rana-pieczec .ikona { width: 1.2rem; height: 1.2rem; }
.rana .rana-wynik + .rana-rzut { margin-top: .3rem; }
.rana-rzut { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.rana .rana-opis { font-family: var(--font-head); font-size: 1.14rem; line-height: 1.5; }
/* the blow lands: the page flashes red, the card strikes and shakes, the name comes up, a death is stamped */
@media (prefers-reduced-motion: no-preference) {
  .overlay.rana-okno { animation: rana-tlo .35s ease-out; }
  .overlay.rana-okno::before { animation: rana-blysk .9s ease-out; }
  .rana-arkusz { animation: rana-cios .6s cubic-bezier(.2, .9, .3, 1.2); }
  .rana-nazwa { animation: rana-nazwa .5s .2s both cubic-bezier(.2, .9, .3, 1); }
  .rana-pieczec { animation: rana-pieczec .45s .55s both cubic-bezier(.3, 1.4, .5, 1); }
}
@keyframes rana-tlo { from { opacity: 0; } }
@keyframes rana-blysk { from { opacity: 1; } }
@keyframes rana-cios {
  0% { opacity: 0; transform: scale(1.14); }
  45% { opacity: 1; transform: scale(.985); }
  60% { transform: translateX(-7px) rotate(-.4deg); }
  72% { transform: translateX(6px) rotate(.3deg); }
  84% { transform: translateX(-3px); }
}
@keyframes rana-nazwa { from { opacity: 0; transform: translateY(.35em); } }
@keyframes rana-pieczec { from { opacity: 0; transform: rotate(-9deg) scale(2.6); } }

/* the tracker's layout: one column that puts the defences first; two from 1200 px, the right one sticky */
.walka-kolumny { display: flex; flex-direction: column; gap: 1rem; }
.walka-lewa, .walka-prawa { display: contents; }
.walka-kolumny .card { margin-top: 0; }
.blok-obrona { order: 1; } .blok-uczestnicy { order: 2; } .blok-trafienia { order: 3; } .blok-poscig { order: 4; }
.blok-dodawanie { order: 5; } .blok-dziennik { order: 6; } .blok-notatki { order: 7; }
.blok-poscig { display: flex; flex-direction: column; gap: 1rem; }
.blok-poscig:not(:has(> :not(template))) { display: none; }
@media (min-width: 1200px) {
  .main:has(.walka-kolumny) { max-width: 1560px; }
  .walka-kolumny { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 30%); align-items: start; }
  .walka-lewa, .walka-prawa { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
  .walka-prawa {
    position: sticky; top: calc(var(--topbar-h, 58px) + var(--pasek-walki-h, 0px) + 12px);
    max-height: calc(100vh - var(--topbar-h, 58px) - var(--pasek-walki-h, 0px) - 24px); overflow-y: auto;
  }
}

/* a player's own character, docked above the bottom bar: a one-line header, unfolding into its actions */
.walka-strona.z-panelem { padding-bottom: 72px; }
body:has(.panel-gracza) .fab { display: none; }  /* the panel has its own dice button */
.panel-gracza {
  position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: 35;
  background: var(--surface); border-top: 2px solid var(--border); box-shadow: 0 -4px 16px rgb(20 35 40 / 14%);
}
@media (min-width: 900px) { .panel-gracza { bottom: 0; left: var(--nav-w); } }
.panel-gracza.tura { border-top-color: var(--accent); }
.panel-gracza.pilny:not(.tura) { border-top-color: var(--warn); }
.panel-glowa {
  display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 52px; padding: .4rem 16px;
  background: none; border: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.panel-gracza.tura .panel-glowa { background: var(--accent-soft); }
.panel-glowa { flex-wrap: wrap; row-gap: .3rem; }
.panel-znaki { display: flex; gap: .4rem; flex-basis: 100%; }  /* a line of its own, so the name keeps its room */
.panel-imie { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-glowa .nowrap { white-space: nowrap; }
@media (max-width: 480px) {
  .panel-glowa .pasek-zyw { display: none; }  /* the numbers stay; the name needs the room */
  .walka-strona h1 { font-size: 1.45rem; }
}
.tura-znak { flex: none; padding: .15rem .5rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .85rem; }
.tura-znak.czeka { background: var(--warn); color: var(--surface); }
.panel-tresc { max-height: min(55vh, 460px); overflow-y: auto; padding: .2rem 16px .8rem; }
.panel-gracza .akcje { flex-wrap: wrap; }
.panel-gracza > .panel-tresc, .panel-gracza > div { max-width: 900px; margin: 0 auto; }
@media (prefers-reduced-motion: no-preference) {
  .panel-gracza.tura .tura-znak { animation: puls 1.6s ease-in-out infinite; }
}
.wpis-walki { padding: .25rem 0; border-bottom: 1px solid var(--border); font-size: .93rem; }
.wpis-walki:last-child { border-bottom: 0; }

/* ---- dice options ------------------------------------------------------------------------------ */
.ustawienia { z-index: 65; }  /* opens from inside the roll dialog too */
.ustawienia h3 { margin: 0 0 .5rem; }
.kosci-podpis {
  position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 1;
  max-width: min(92vw, 560px); padding: .35rem .8rem; border-radius: 999px; pointer-events: none;
  background: color-mix(in srgb, var(--nav-bg) 88%, transparent); color: var(--nav-ink);
  font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kosci-presety { display: grid; gap: .45rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.kosc-preset {
  display: flex; align-items: center; gap: .55rem; padding: .4rem .5rem; min-height: 48px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.kosc-preset:hover { border-color: var(--accent); }
.kosc-preset.wybrany { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); font-weight: 600; }
.kosc-probka {
  flex: none; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
  font-weight: 800; font-size: .9rem; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 18%), 0 1px 2px rgb(0 0 0 / 25%);
}
.ustawienia .przelaczniki { display: grid; gap: .55rem; justify-items: start; }

/* ---- doubles (lib/krytyk.js): a crit's result, badge, toast and roll-log entry in gold, a fumble's charred, and a
   flash over the page once the dice have landed — half the Critical Wound card's weight. A crit: a coin with the roll,
   the word in the logo's gold-to-orange with its blood-red edge, rays turning behind, sparks out of the coin. A fumble
   (`.pech`, further down): the page darkens, an iron coin drops, cracks and smokes, the word lands in blood. Over the
   dialogs and the dice, under the toasts; only the tile takes a tap (and swallows it while it fades). ---- */
.badge.krytyk { background: linear-gradient(180deg, #f9d648, #e9791c); color: #3a1204; border-color: #7d140c; }
.res.krytyk { background: linear-gradient(180deg, #f9d648, #e9791c); color: #3a1204; }
.toast.krytyk { border-left-color: var(--gold); box-shadow: var(--shadow), 0 0 18px color-mix(in srgb, var(--gold) 35%, transparent); }
.roll.krytyk { border-color: color-mix(in srgb, var(--gold) 75%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 22%, var(--surface)), var(--ok-soft) 70%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent), 0 0 24px color-mix(in srgb, var(--gold) 30%, transparent); }
.roll.krytyk .dice { color: var(--gold); }
.badge.pech, .res.pech { background: linear-gradient(180deg, #6d1a12, #2a0c09); color: #f6ddd8; border-color: #140605; }
.toast.pech { border-left-color: var(--bad); box-shadow: var(--shadow), 0 0 16px rgb(130 14 6 / 30%); }
.roll.pech { border-color: color-mix(in srgb, var(--bad) 70%, #000);
  background: linear-gradient(135deg, color-mix(in srgb, var(--bad) 14%, var(--surface-2)), var(--bad-soft) 70%);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--bad) 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--bad) 30%, transparent); }
.roll.pech .dice { color: var(--bad); }

.krytyk-blysk { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; padding: 16px; overflow: hidden;
  pointer-events: none; transition: opacity .4s ease;
  background: radial-gradient(ellipse at center, rgb(249 214 72 / 20%), rgb(12 8 2 / 40%) 75%); }
.krytyk-blysk.znika { opacity: 0; }
.krytyk-blysk::before { content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(circle at center, rgb(255 240 170 / 90%), rgb(249 214 72 / 35%) 30%, transparent 65%); }
.krytyk-promienie { position: absolute; left: 50%; top: 50%; width: 170vmax; height: 170vmax; translate: -50% -50%; opacity: .6;
  background: repeating-conic-gradient(rgb(249 214 72 / 30%) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 42%); mask-image: radial-gradient(circle, #000 8%, transparent 42%); }
.krytyk-kafel { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem;
  width: min(24rem, 100%); margin-top: 2.7rem; padding: 3.1rem 1.2rem 1.1rem; border-radius: 16px; text-align: center;
  color: #f3e9d2; pointer-events: auto; cursor: pointer;
  background: radial-gradient(ellipse at 50% 0%, #2d4d50, #12211f 72%); border: 1px solid rgb(249 214 72 / 75%);
  box-shadow: inset 0 0 0 3px #12211f, inset 0 0 0 4px rgb(249 214 72 / 40%), 0 20px 60px rgb(0 0 0 / 50%),
              0 0 80px rgb(242 184 48 / 45%); }
.krytyk-moneta { position: absolute; top: 0; left: 50%; translate: -50% -50%; width: 5.4rem; height: 5.4rem; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  color: #4a1606; border: 3px solid #7d140c;
  background: radial-gradient(circle at 35% 28%, #fff7c8, #f9d648 30%, #e9a41c 65%, #b8560c);
  box-shadow: inset 0 0 0 3px rgb(255 240 190 / 55%), 0 0 0 3px rgb(249 214 72 / 30%), 0 6px 18px rgb(0 0 0 / 45%),
              0 0 30px rgb(249 214 72 / 60%); }
.krytyk-moneta span { font-size: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.krytyk-moneta small { margin-top: 2px; font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6b2a0a; }
.krytyk-napis { max-width: 100%; font-family: var(--font-head); font-size: clamp(2.3rem, 11vw, 3.4rem); font-weight: 900;
  line-height: 1.05; letter-spacing: .05em; text-transform: uppercase; overflow-wrap: anywhere; color: transparent;
  background: linear-gradient(110deg, transparent 38%, rgb(255 255 255 / 90%) 50%, transparent 62%) 100% 0 / 250% 100% no-repeat,
              linear-gradient(180deg, #fff6c4 8%, #f9d648 45%, #e9791c 92%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 0 #7d140c) drop-shadow(0 0 14px rgb(249 214 72 / 45%)); }
.krytyk-napis.dlugi { font-size: clamp(1.7rem, 8vw, 2.5rem); }
.krytyk-kto { font-size: .95rem; color: rgb(243 233 210 / 78%); overflow-wrap: anywhere; }
.krytyk-kto b { color: #fff4d6; }
.krytyk-iskra { position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  opacity: 0; background: #fff3b0; box-shadow: 0 0 8px 2px rgb(249 214 72 / 85%); pointer-events: none; }
/* the page flashes gold, the tile springs up, the coin spins in, sparks burst out of it, a gleam runs over the word;
   the result in the roll dialog gleams once the flash is gone */
@media (prefers-reduced-motion: no-preference) {
  .krytyk-blysk { animation: krytyk-tlo .3s ease-out; }
  .krytyk-blysk::before { animation: krytyk-rozblysk .8s ease-out; }
  .krytyk-promienie { animation: krytyk-promienie 2.8s linear both; }
  .krytyk-kafel { animation: krytyk-wejscie .55s cubic-bezier(.2, .9, .3, 1.3) both; transition: scale .4s ease-in; }
  .krytyk-blysk.znika .krytyk-kafel { scale: .94; }
  .krytyk-moneta { animation: krytyk-moneta .7s .12s cubic-bezier(.25, 1, .4, 1) both; }
  .krytyk-napis { animation: krytyk-polysk 1s .5s ease-out both; }
  .krytyk-iskra { animation: krytyk-iskra .9s var(--opozn) cubic-bezier(.1, .7, .3, 1) both; }
  #rzut-wynik .roll.krytyk { position: relative; overflow: hidden; }
  #rzut-wynik .roll.krytyk::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgb(255 236 150 / 55%) 50%, transparent 65%) 100% 0 / 250% 100% no-repeat;
    animation: krytyk-polysk 1.1s 2.5s ease-out both; }
}
@keyframes krytyk-tlo { from { opacity: 0; } }
@keyframes krytyk-rozblysk { from { opacity: 1; } to { opacity: 0; } }
@keyframes krytyk-promienie {
  0% { opacity: 0; rotate: 0deg; scale: .5; }
  25% { opacity: .9; }
  100% { opacity: .6; rotate: 40deg; scale: 1; }
}
@keyframes krytyk-wejscie {
  0% { opacity: 0; transform: scale(.35) rotate(-6deg); }
  60% { opacity: 1; transform: scale(1.07) rotate(1deg); }
  100% { transform: none; }
}
@keyframes krytyk-moneta {
  from { opacity: 0; transform: perspective(400px) rotateY(-540deg) scale(.4); }
  to { transform: perspective(400px) rotateY(0) scale(1); }
}
@keyframes krytyk-polysk { from { background-position: 100% 0, 0 0; } to { background-position: 0 0, 0 0; } }
@keyframes krytyk-iskra {
  0% { opacity: 1; transform: rotate(var(--kat)) translateY(0) scale(1.3); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--kat)) translateY(calc(-1 * var(--dal))) scale(.4); }
}

/* a fumble: the same tile in soot and blood; the coin's crack is two zigzag bands, a glowing one under a dark one */
.krytyk-blysk.pech { background: radial-gradient(ellipse at center, rgb(40 6 3 / 30%), rgb(6 2 1 / 66%) 72%); }
.krytyk-blysk.pech::before { background: radial-gradient(ellipse at center, transparent 35%, rgb(140 14 6 / 50%)); }
.pech .krytyk-kafel { color: #e9dcd3; border-color: rgb(164 37 28 / 70%);
  background: radial-gradient(ellipse at 50% 0%, #3d1714, #140908 72%);
  box-shadow: inset 0 0 0 3px #140908, inset 0 0 0 4px rgb(164 37 28 / 35%), 0 20px 60px rgb(0 0 0 / 65%),
              0 0 60px rgb(130 14 6 / 45%); }
.pech .krytyk-moneta { color: #ece3da; border-color: #2a0f0c; text-shadow: 0 1px 0 #000;
  background: radial-gradient(circle at 35% 28%, #9a9088, #5f5650 35%, #3b3430 70%, #1f1a18);
  box-shadow: inset 0 0 0 3px rgb(0 0 0 / 25%), 0 6px 18px rgb(0 0 0 / 60%), 0 0 26px rgb(150 20 10 / 55%); }
.pech .krytyk-moneta small { color: #b9ada3; }
.pech .krytyk-moneta::before, .pech .krytyk-moneta::after { content: ""; position: absolute; inset: -3px; transform-origin: top; }
.pech .krytyk-moneta::before { background: rgb(214 58 36 / 85%);
  clip-path: polygon(44.5% 0, 37.5% 26%, 48.5% 47%, 38.5% 71%, 45.5% 100%, 55.5% 100%, 48.5% 71%, 58.5% 47%, 47.5% 26%, 54.5% 0); }
.pech .krytyk-moneta::after { background: #0c0403;
  clip-path: polygon(47% 0, 40% 26%, 51% 47%, 41% 71%, 48% 100%, 53% 100%, 46% 71%, 56% 47%, 45% 26%, 52% 0); }
.pech .krytyk-napis { background-image: linear-gradient(180deg, #ff9a7e 5%, #d63a24 42%, #7a130b 88%);
  background-position: 0 0; background-size: 100% 100%;  /* the crit's two layers' gleam values would stretch it */
  filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 12px rgb(200 30 15 / 50%)); }
.pech .krytyk-kto { color: rgb(233 220 211 / 75%); }
.pech .krytyk-kto b { color: #f6e6dc; }
.krytyk-dym { position: absolute; left: 50%; top: 0; width: 3.2rem; height: 3.2rem; margin: -1.6rem 0 0 -1.6rem; border-radius: 50%;
  opacity: 0; pointer-events: none; filter: blur(4px);  /* soot over a light page, ash over a dark one */
  background: radial-gradient(circle, rgb(40 30 27 / 85%), rgb(30 22 20 / 45%) 45%, transparent 70%); }
:root[data-theme="dark"] .krytyk-dym { background: radial-gradient(circle, rgb(135 120 112 / 90%), rgb(80 70 65 / 50%) 45%, transparent 70%); }
/* the edges close in red, the tile drops and shakes as the coin hits, the coin falls, bounces and cracks, smoke rises
   out of the crack, the word lands heavy */
@media (prefers-reduced-motion: no-preference) {
  .krytyk-blysk.pech::before { animation: pech-puls 1.4s ease-out both; }
  .pech .krytyk-kafel { animation: pech-wejscie .9s ease-out both; }
  .pech .krytyk-moneta { animation: pech-moneta .9s .1s both; }
  .pech .krytyk-moneta::before, .pech .krytyk-moneta::after { animation: pech-pekniecie .2s .62s ease-in both; }
  .pech .krytyk-napis { animation: pech-napis .6s .35s cubic-bezier(.3, 1.3, .5, 1) both; }
  .krytyk-dym { animation: pech-dym 1.8s var(--opozn) ease-out both; }
}
@keyframes pech-puls { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: .45; } }
@keyframes pech-wejscie {
  0% { opacity: 0; transform: translateY(-1.5rem) scale(1.04); }
  35% { opacity: 1; transform: none; }
  58% { transform: none; }
  66% { transform: translateX(-6px) rotate(-.6deg); }
  76% { transform: translateX(5px) rotate(.4deg); }
  86% { transform: translateX(-2px); }
  100% { transform: none; }
}
@keyframes pech-moneta {
  0% { opacity: 0; transform: translateY(-8rem) rotate(-30deg) scale(1); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  40% { opacity: 1; transform: translateY(0) rotate(6deg) scale(1.1, .85); animation-timing-function: ease-out; }
  55% { transform: translateY(-.5rem) rotate(-3deg) scale(.97, 1.04); animation-timing-function: ease-in; }
  70% { transform: translateY(0) rotate(0deg) scale(1); }
  78% { transform: translateY(0) rotate(-4deg) scale(1); }
  88% { transform: translateY(0) rotate(2deg) scale(1); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes pech-pekniecie { from { scale: 1 0; } }
@keyframes pech-napis { 0% { opacity: 0; transform: scale(1.8); } 55% { opacity: 1; transform: scale(.94); } 100% { transform: none; } }
@keyframes pech-dym {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  20% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx), calc(-1 * var(--dy))) scale(2.8); }
}

/* ---- character sheet (karta.html) ---- */
/* the header (name, Conditions, the four numbers of play, tabs) stays in sight right under the top bar */
.karta-naglowek {
  position: sticky; top: var(--topbar-h, 0px); z-index: 25;
  margin: -16px -16px .6rem; padding: .45rem 16px 0;
  background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 900px) { .karta-naglowek { margin: -24px -32px .8rem; padding: .6rem 32px 0; } }
.naglowek-imie { display: flex; align-items: center; gap: .5rem; }
.naglowek-imie input { font-size: 1.3rem; padding: .1rem .3rem; margin-left: -.3rem; }
/* the name and, under it, its rest (surname, byname, clan): the sheet's and the NPC's header */
.imie-pola { display: flex; flex-direction: column; }
.imie-pola input.nazwisko { font-size: .85rem; color: var(--muted); padding-block: 0; min-height: 0; line-height: 1.35; }
.naglowek-imie .save-state { flex: none; font-size: .8rem; }
/* „⋯” by the name: what concerns the whole character (its rolls; the GM's lock, hiding, deleting) */
.menu-postaci { position: relative; flex: none; }
.menu-postaci > .btn { font-size: 1.3rem; line-height: 1; }
.menu-postaci-lista { position: absolute; right: 0; top: calc(100% + 4px); z-index: 25; min-width: 14rem; padding: .3rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.menu-postaci-lista > :is(a, button) { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .55rem .6rem;
  border: 0; border-radius: var(--radius-sm); background: none; font: inherit; color: var(--ink); text-align: left;
  text-decoration: none; cursor: pointer; }
.menu-postaci-lista > :is(a, button):hover { background: var(--surface-2); }
.menu-postaci-lista > .danger { color: var(--bad); }
.menu-postaci-lista .ikona { color: var(--muted); }
.menu-postaci-lista > .danger .ikona { color: inherit; }
.stany-plakietki { display: flex; flex-wrap: wrap; gap: .3rem; margin: .15rem 0 .1rem; }
.chipy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; margin-top: .35rem; }
.chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 0; min-height: 50px; padding: .25rem .2rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  font: inherit; color: var(--ink); cursor: pointer; touch-action: manipulation;
}
.chip:hover { border-color: var(--accent); }
.chip.otwarty { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.chip .lbl { max-width: 100%; font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .val { font-size: 1.15rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.chip .val small { font-size: .75rem; font-weight: 500; color: var(--muted); }
.chip.momentum .val { font-size: .95rem; font-weight: 600; color: var(--muted); }
.chip.momentum.aktywne { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--surface)); }
.chip.momentum.aktywne .val { color: var(--gold); }
.chip .pasek { display: block; width: 80%; height: 4px; margin-top: 2px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.chip .pasek > span { display: block; height: 100%; background: var(--ok); transition: width .3s; }
.chip .pasek.warn > span { background: var(--warn); }
.chip .pasek.bad > span { background: var(--bad); }
.chip-popover { margin-top: .4rem; padding: .35rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: var(--shadow); }
.stepper.duzy .btn { min-width: 46px; min-height: 46px; font-size: 1.35rem; }
.stepper.duzy .v { min-width: 3.6rem; font-size: 1.1rem; }
.karta-naglowek .tabs { margin: .35rem -16px 0; border-bottom: 0; }
@media (min-width: 900px) {
  .karta-naglowek .tabs { margin: .45rem -32px 0; padding: 0 32px; }
  .chipy { max-width: 760px; }
}
.tabs .tab-dodaj { font-size: .85rem; opacity: .75; }
.naglowek-opis { margin: 0 0 .75rem; font-size: .9rem; }

.grupa-umiejetnosci + .grupa-umiejetnosci { margin-top: .9rem; }
.grupa-umiejetnosci h4 { margin: 0 0 .4rem; font-size: .78rem; font-family: var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.skill-row .notatka { font-size: .88rem; color: var(--muted); font-style: italic; }

/* a weapon, spell or prayer: what it is on the left, the big button that uses it on the right */
.karta-akcji { padding: .6rem 0; }
.karta-akcji + .karta-akcji { border-top: 1px solid var(--border); }
.karta-akcji-glowa { display: flex; align-items: center; gap: .5rem; }
.karta-akcji-info { margin-top: .1rem; font-size: .85rem; color: var(--muted); }
.karta-akcji-edycja { margin-top: .6rem; padding: .6rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.wybor-cech { align-items: center; }  /* a weapon's or armour's Qualities (partials/cechy_oreza.html) */
.wybor-cech .chip-moneta { min-height: 32px; padding: .15rem .65rem; font-size: .9rem; }
.nazwa-opis { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--ink); text-align: left; cursor: pointer; }
.nazwa-opis:hover { text-decoration: underline; }
.przycisk-akcji { flex: none; flex-direction: column; gap: 0; min-width: 4.8rem; min-height: 54px; padding: .3rem .6rem; line-height: 1.15; }
.przycisk-akcji .w { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.btn.on { background: var(--accent-soft); border-color: transparent; }

/* someone else's character: values read as plain text and nothing that would change the card is shown
   (the server refuses such changes anyway; karta.zablokujPole makes a touched field read-only) */
.tylko-odczyt :is(input:not([type=checkbox]), textarea, select) { border-color: transparent; background: transparent; box-shadow: none; resize: none; }
.tylko-odczyt :is(input, textarea)::placeholder { color: transparent; }
.tylko-odczyt :is(input, textarea, select):focus { outline: none; }
.tylko-odczyt :is(.stepper .btn, .btn.danger, .tylko-edycja) { display: none !important; }
.tylko-odczyt .chip { cursor: default; }
.tylko-odczyt .chip:hover { border-color: var(--border); }

/* ---- pursuit (5e s. 158–159, partials/panel_poscigu.html): the rules' three steps, the two sides, the Factors with the
   table of s. 159, the party's Obstacles as a row of slots (the one that meets the requirement is marked), the outcome */
.poscig-etapy { display: flex; gap: .3rem; margin: 0 0 .9rem; padding: 0; list-style: none; counter-reset: none; }
.poscig-etapy li { flex: 1; display: flex; align-items: center; gap: .45rem; min-width: 0; padding: .4rem .1rem 0;
  border-top: 3px solid var(--border); color: var(--muted); font-size: .9rem; }
.poscig-etapy .nr { flex: none; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  border: 1.5px solid var(--border); font-size: .78rem; font-weight: 700; }
.poscig-etapy .nazwa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poscig-etapy li.zrobiony { border-top-color: var(--gold); color: var(--ink); }
.poscig-etapy li.zrobiony .nr { background: var(--gold); border-color: var(--gold); color: var(--accent-ink); }
.poscig-etapy li.teraz { border-top-color: var(--accent); color: var(--accent); font-weight: 600; }
.poscig-etapy li.teraz .nr { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
@media (max-width: 560px) {  /* a phone: the numbers, and the name of the step the chase is at */
  .poscig-etapy li.teraz { flex: 3; }
  .poscig-etapy li:not(.teraz) .nazwa { display: none; }
}

.poscig-strony { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .6rem; }
.poscig-strona { border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .6rem; background: var(--surface); }
.poscig-strona.scigani { border-top: 3px solid var(--teal); }
.poscig-strona.scigajacy { border-top: 3px solid var(--accent); }
.poscig-strona header { display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; }
.poscig-strona header b { font-family: var(--font-head); font-size: 1.08rem; }
.poscig .biegacze { list-style: none; margin: 0; padding: 0; }
.poscig .biegacze > li { padding: .35rem .4rem; margin: 0 -.4rem; border-radius: var(--radius-sm); }
.poscig .biegacze > li + li { border-top: 1px solid var(--border); }
.poscig .biegacze > li.w-tescie { background: var(--accent-soft); }
.poscig .biegacz { display: flex; align-items: center; gap: .5rem; }
.poscig .biegacz .nazwa { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poscig .biegacz small { display: block; }  /* not .d-block: its !important would beat x-show */
.poscig .biegacz .los { color: var(--ink); }
.poscig .szybkosc { flex: none; padding: .15rem .55rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2); color: var(--ink); font: inherit; font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
button.szybkosc { cursor: pointer; min-height: 32px; }
button.szybkosc:hover, button.szybkosc[aria-expanded="true"] { border-color: var(--accent); }
.poscig .szybkosc.wlasna { border-color: var(--gold); color: var(--gold); font-weight: 600; }
.poscig .biegacz-edycja { margin-top: .45rem; padding: .5rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.poscig .biegacz-edycja .kwota-wiersz { background: var(--surface); }

.poscig-krok { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--border); }
.poscig-krok h4 { margin: 0 0 .5rem; font-size: 1.05rem; }
.poscig-krok h4 small { font-family: var(--font); font-size: .85rem; font-weight: 400; }
.poscig-test-wynik { margin: .8rem 0 0; padding: .45rem .7rem; border-radius: var(--radius-sm); background: var(--info-soft); }

.poscig .czynniki { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .3rem; }
.poscig .czynniki li { display: flex; align-items: baseline; gap: .5rem; }
.poscig .czynniki .znak { flex: none; width: 1.3rem; height: 1.3rem; display: inline-grid; place-items: center; border-radius: 50%;
  font-size: .75rem; font-weight: 700; transform: translateY(.1rem); }
.poscig .czynniki .tak .znak { background: var(--ok-soft); color: var(--ok); }
.poscig .czynniki .nie { color: var(--muted); }
.poscig .czynniki .nie .znak { background: var(--surface-2); }
.poscig .czynniki .czeka { color: var(--muted); font-style: italic; }
.poscig .czynniki .czeka .znak { border: 1.5px dashed var(--border); font-style: normal; }
.poscig .skala { display: flex; flex-wrap: wrap; gap: .4rem; }
.poscig .stopien { flex: 1 1 7rem; display: flex; flex-direction: column; gap: .1rem; padding: .4rem .6rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted); }
.poscig .stopien.teraz { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.poscig .stopien.teraz .muted { color: inherit; }

.poscig .licznik { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.poscig .sloty { display: flex; flex-wrap: wrap; gap: .35rem; }
.poscig .slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; width: 4.2rem; }
.poscig .slot .znak { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 2px dashed var(--border); font-weight: 700; }
.poscig .slot small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .75rem; }
.poscig .slot.ok .znak { border: 2px solid var(--ok); background: var(--ok-soft); color: var(--ok); }
.poscig .slot.zle .znak { border: 2px solid var(--bad); background: var(--bad-soft); color: var(--bad); }
/* the requirement: this many slots from the left must be beaten (a gold bar after the last one needed) */
.poscig .slot.prog::after { content: ""; position: absolute; top: .1rem; right: -.28rem; width: 3px; height: 1.9rem;
  border-radius: 2px; background: var(--gold); }

.poscig .przeszkody { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .6rem; }
.poscig .przeszkoda { display: flex; flex-direction: column; gap: .35rem; padding: .6rem .7rem; border: 1px solid var(--border);
  border-left: 4px solid var(--warn); border-radius: var(--radius-sm); background: var(--surface); }
.poscig .przeszkoda.ok { border-left-color: var(--ok); }
.poscig .przeszkoda.zle { border-left-color: var(--bad); }
.poscig .przeszkoda header { display: flex; align-items: center; gap: .4rem; }
.poscig .przeszkoda h5 { margin: 0; font-size: 1rem; font-family: var(--font-head); }
.poscig .przeszkoda h5 small { font-family: var(--font); font-weight: 400; font-size: .8rem; }
.poscig .przeszkoda p { margin: 0; }
.poscig .przeszkoda .link-maks { align-self: flex-start; }
.poscig .pomoc { padding: .35rem .55rem; border-radius: var(--radius-sm); background: var(--ok-soft); color: var(--ok); font-size: .9rem; }

.poscig-wynik { margin-top: 1rem; padding: .8rem .9rem; border-radius: var(--radius); border: 1px solid var(--border); border-left-width: 4px; }
.poscig-wynik.ok { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok-soft) 70%, var(--surface)); }
.poscig-wynik.zle { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad-soft) 70%, var(--surface)); }
.poscig-wynik h4 { margin: 0 0 .25rem; font-size: 1.2rem; }

/* the new chase form (poscig.html): terrain as tiles saying whom it favours, the other side's rows */
.wybor-terenu { display: flex; flex-wrap: wrap; gap: .4rem; }
.wybor-terenu button { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; flex: 0 1 15rem; padding: .45rem .7rem;
  text-align: left; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink);
  font: inherit; cursor: pointer; }
.wybor-terenu button small { color: var(--muted); font-size: .82rem; }
.wybor-terenu button:hover { border-color: var(--accent); }
.wybor-terenu button.on { border-color: var(--accent); background: var(--accent-soft); }
.wybor-terenu button.on b { color: var(--accent); }
.biegacz-npc { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-bottom: .5rem; padding: .45rem .55rem;
  border-radius: var(--radius-sm); background: var(--surface-2); }

.tabela-przeszkod { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.tabela-przeszkod button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .45rem .6rem; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.tabela-przeszkod button:hover:enabled, .tabela-przeszkod button.on { border-color: var(--accent); }
.tabela-przeszkod button.on { background: var(--accent-soft); }
.tabela-przeszkod .nr { flex: none; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--surface-2); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- campaigns ---- */
.kampania-mini { font-size: .8rem; color: var(--muted); max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kampania-menu { margin-bottom: .75rem; }
.kampania-menu label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .2rem; }
.kampania-menu select { width: 100%; }

/* ---- connection and confirmations ---- */
.polaczenie { display: inline-block; flex: none; width: .55rem; height: .55rem; margin-left: .45rem; border-radius: 50%;
  background: var(--muted); vertical-align: middle; }
.polaczenie.polaczono { background: var(--ok); }
.polaczenie.lacze { background: var(--warn); animation: puls 1.2s ease-in-out infinite; }
.polaczenie.offline { background: var(--bad); }
@keyframes puls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .polaczenie.lacze { animation: none; } }
.save-state.err { font-weight: 600; }
.overlay.opis { z-index: 62; }  /* a description opens from inside other dialogs (roll, tracker) */
.potwierdzenie { z-index: 90; }
.potwierdzenie .sheet { max-width: 420px; }
.potwierdzenie h2 { margin-top: 0; font-size: 1.15rem; }

/* ---- the cheat sheet (sciaga.html, and the dialog 📋 opens in the tracker and the pursuit) ---- */
.sciaga-pasek {
  position: sticky; top: var(--topbar-h, 0px); z-index: 15;
  margin: 0 -16px .75rem; padding: .5rem 16px .45rem;
  background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 900px) { .sciaga-pasek { margin: 0 -32px .9rem; padding: .6rem 32px .5rem; } }
.w-panelu .sciaga-pasek { top: -1rem; margin: -1rem -1rem .75rem; padding: .75rem 1rem .45rem; background: var(--surface); }
.sciaga-chipy { display: flex; gap: .3rem; margin-top: .45rem; overflow-x: auto; scrollbar-width: none; }
.sciaga-chipy::-webkit-scrollbar { display: none; }
.chip-sekcji {
  flex: none; display: inline-flex; align-items: center; gap: .3rem; min-height: 34px; padding: .2rem .75rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink);
  font: inherit; font-size: .9rem; white-space: nowrap; cursor: pointer; touch-action: manipulation;
}
.chip-sekcji:hover { border-color: var(--accent); }
.chip-sekcji.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.sciaga-sekcja-tytul { margin: .75rem 0 .5rem; }
/* cards of different heights pack into columns (top to bottom), a card never split between two */
.sciaga-karty { column-gap: 1rem; }
@media (min-width: 760px) { .sciaga:is(.k2, .k3) .sciaga-karty { columns: 2; } }
@media (min-width: 1200px) { .sciaga.k3:not(.w-panelu) .sciaga-karty { columns: 3; } }
.karta-sciagi {
  display: block; break-inside: avoid; margin: 0 0 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  border-top: 3px solid color-mix(in srgb, var(--teal) 55%, var(--border));
  scroll-margin-top: calc(var(--topbar-h, 58px) + 7rem);
}
.w-panelu .karta-sciagi { scroll-margin-top: 7rem; }
.karta-sciagi.wlasna { border-top-color: var(--gold); }
.karta-sciagi-glowa { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; list-style: none; cursor: pointer; }
.karta-sciagi-glowa::-webkit-details-marker { display: none; }
.karta-sciagi-glowa::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.karta-sciagi[open] > .karta-sciagi-glowa::before { transform: rotate(90deg); }
.karta-sciagi-glowa h3 { flex: 1; min-width: 0; margin: 0; font-size: 1.05rem; }
.karta-sciagi-tresc { padding: 0 .9rem .85rem; font-size: .95rem; }
.karta-sciagi-tresc .zrodlo { margin: .5rem 0 0; font-size: .8rem; color: var(--muted); text-align: right; }
.karta-sciagi .prose :is(ul, ol) { margin: .3rem 0 .6rem; }
.karta-sciagi .prose li + li { margin-top: .2rem; }
.karta-sciagi .auto { color: var(--teal); cursor: help; }
.edytor-sciagi { padding: .9rem; background: var(--surface-2); }
.lista-tabel { list-style: none; margin: 0; padding: 0; }
.lista-tabel li { display: flex; align-items: center; gap: .5rem; padding: .2rem 0; }
.lista-tabel li > :first-child { flex: 0 1 auto; min-width: 0; text-align: left; }
.sheet.sciaga-arkusz { max-width: 980px; }
/* tables written in Markdown (compendium, session journal, the cheat sheet) look like the app's own */
.prose table { width: 100%; border-collapse: collapse; margin: .5rem 0 .75rem; font-size: .92rem; }
.prose :is(th, td) { padding: .3rem .4rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.prose th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.prose tr:last-child td { border-bottom: 0; }

/* ---- spacing scale and helpers, instead of style="…" in the templates. Like the inline styles they replace,
   they win over component rules (!important). Scale: 1 = .25rem, 2 = .5rem, 3 = .75rem, 4 = 1rem, 5 = 1.5rem. ---- */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: .25rem !important; } .mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: .75rem !important; } .mt-4 { margin-top: 1rem !important; } .mt-5 { margin-top: 1.5rem !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: .25rem !important; } .mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: .75rem !important; } .mb-4 { margin-bottom: 1rem !important; } .mb-5 { margin-bottom: 1.5rem !important; }
.my-1 { margin-top: .25rem !important; margin-bottom: .25rem !important; }
.my-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
.my-3 { margin-top: .75rem !important; margin-bottom: .75rem !important; }
.my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mt-12vh { margin-top: 12vh !important; }
.p-0 { padding: 0 !important; } .p-2 { padding: .5rem !important; } .pl-0 { padding-left: 0 !important; }
.py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
.py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.pt-1 { padding-top: .25rem !important; } .pb-3 { padding-bottom: .75rem !important; } .pt-10vh { padding-top: 10vh !important; }
.gap-tight { gap: .15rem !important; } .gap-2 { gap: .5rem !important; } .gap-3 { gap: .75rem !important; } .gap-4 { gap: 1rem !important; }
.w-auto { width: auto !important; }
.w-5 { width: 5rem !important; } .w-6 { width: 6rem !important; } .w-7 { width: 7rem !important; } .w-8 { width: 8rem !important; }
.min-w-0 { min-width: 0 !important; } .d-contents { display: contents !important; } .w-9 { width: 9rem !important; } .w-10 { width: 10rem !important; } .w-12 { width: 12rem !important; }
.w-14 { width: 14rem !important; } .w-16 { width: 16rem !important; }
.min-w-4 { min-width: 4rem !important; } .min-w-5 { min-width: 5rem !important; } .min-w-10 { min-width: 10rem !important; } .min-w-12 { min-width: 12rem !important; }
.min-h-0 { min-height: 0 !important; }
.mw-14 { max-width: 14rem !important; } .mw-16 { max-width: 16rem !important; } .mw-18 { max-width: 18rem !important; } .mw-22 { max-width: 22rem !important; }
.mw-24 { max-width: 24rem !important; } .mw-320 { max-width: 320px !important; } .mw-380 { max-width: 380px !important; }
.mw-520 { max-width: 520px !important; } .mw-640 { max-width: 640px !important; } .mw-820 { max-width: 820px !important; }
.d-block { display: block !important; } .d-inline { display: inline !important; }
.niewidoczny { visibility: hidden !important; }  /* keeps its place in the layout */
.flex-wrap { flex-wrap: wrap !important; } .items-start { align-items: flex-start !important; } .items-end { align-items: flex-end !important; }
.justify-start { justify-content: flex-start !important; } .justify-between { justify-content: space-between !important; }
.justify-end { justify-content: flex-end !important; }
.cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.cols-150 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }
.cols-160 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; }
.cols-180 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; }
.cols-220 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; }
.span-2 { grid-column: span 2 !important; }
.span-all { grid-column: 1 / -1 !important; } .flex-11 { flex: 1 1 11rem !important; }
.text-sm { font-size: .85rem !important; } .text-md { font-size: 1.05rem !important; } .text-xl { font-size: 1.5rem !important; }
.text-hero { font-size: 3rem !important; }
.text-hero .ikona { width: 3.5rem; height: 3.5rem; color: var(--logo-b); }
.fw-bold { font-weight: 700 !important; } .font-head { font-family: var(--font-head) !important; }
.text-left { text-align: left !important; } .text-center { text-align: center !important; } .text-nowrap { white-space: nowrap !important; } .break-all { word-break: break-all !important; }
.link-plain { text-decoration: none !important; color: inherit !important; } .text-inherit { color: inherit !important; }
.text-bad { color: var(--bad) !important; } .bg-2 { background: var(--surface-2) !important; }
.cursor-pointer { cursor: pointer !important; } .rounded-lg { border-radius: 14px !important; }
.stat.aktywne { background: var(--accent-soft); border-color: var(--accent); }

/* ---- money: coins, the purse on a sheet and the party page, the „Handel” dialog (stores/handel.js) ---- */
/* the coins are our own drawings (static/img): the crown, Sigmar's hammer, the twin-tailed comet */
.moneta { display: inline-block; flex: none; width: 1.2em; height: 1.2em; vertical-align: -.25em;
  background: center / contain no-repeat; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 25%)); }
.moneta.duza { width: 2rem; height: 2rem; }
.moneta-zk { background-image: url("../img/moneta-zk.svg"); }
.moneta-s { background-image: url("../img/moneta-s.svg"); }
.moneta-p { background-image: url("../img/moneta-p.svg"); }
/* three tiles of their natural size on a laptop, sharing the width on a phone; the dialog's small row fills it */
.sakiewka { display: grid; grid-template-columns: repeat(3, minmax(0, 8.5rem)); gap: .5rem; flex: none; max-width: 100%;
  padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
.sakiewka.mala { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.majatek { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; }
.majatek .opis { flex: 1 1 14rem; margin: 0; }
button.sakiewka:enabled { cursor: pointer; }
button.sakiewka:enabled:hover .moneta-kafel { border-color: var(--accent); }
.moneta-kafel { display: flex; align-items: center; gap: .55rem; min-width: 0; padding: .6rem .75rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.moneta-kafel .moneta { width: 2.3rem; height: 2.3rem; }
.moneta-kafel .ile { display: flex; align-items: baseline; gap: .3rem; min-width: 0; }
.moneta-kafel b { font-size: 1.45rem; line-height: 1; font-variant-numeric: tabular-nums; }
.moneta-kafel small { color: var(--muted); }
.sakiewka.mala .moneta-kafel { padding: .35rem .55rem; }
.sakiewka.mala .moneta { width: 1.6rem; height: 1.6rem; }
.sakiewka.mala b { font-size: 1.1rem; }
@media (max-width: 560px) {  /* a phone: three tiles share ~360 px, so four-digit sums must still fit */
  .sakiewka { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .moneta-kafel { gap: .3rem; padding: .45rem .4rem; }
  .moneta-kafel .moneta { width: 1.55rem; height: 1.55rem; }
  .moneta-kafel .ile { flex-direction: column; align-items: flex-start; gap: .1rem; }  /* the number above its coin's name */
  .moneta-kafel b { font-size: 1.15rem; }
  .sakiewka.mala .ile { flex-direction: row; align-items: baseline; gap: .3rem; }
}
.seg.pelny { display: flex; }
.seg.pelny button { flex: 1; white-space: nowrap; padding-left: .3rem; padding-right: .3rem; }
.kwota { display: grid; gap: .35rem; }
.kwota-wiersz { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; padding: .3rem .4rem .3rem .6rem;
  border-radius: var(--radius-sm); background: var(--surface-2); }
.kwota-wiersz .nazwa { flex: 1 1 5rem; min-width: 0; font-weight: 600; }
.krokomierz input.v { width: 4.4rem; min-height: 46px; padding: .2rem; text-align: center; font-size: 1.15rem; }
/* the preview keeps one size whatever it says (two lines, the „wyczyść” button always holding its place): a bottom
   sheet grows upwards, so a taller box would move the coin rows away from the finger tapping + */
.podglad-kwoty { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; padding: .45rem .5rem .45rem .75rem;
  min-height: calc(2lh + .9rem); border-radius: var(--radius-sm); background: var(--info-soft); line-height: 1.35; }
.podglad-kwoty .btn { flex: none; }
.podglad-kwoty.pusto { background: var(--surface-2); color: var(--muted); }
.podglad-kwoty.zle { background: var(--bad-soft); color: var(--bad); }
/* one height for every mode, so switching tabs does not move them either; the button stays at the bottom */
.sheet.handel { display: flex; flex-direction: column; min-height: min(92dvh, 43rem); }
.sheet.handel > * { flex-shrink: 0; }
.sheet.handel > .odstep { flex: 1 0 0; }
.link-maks { padding: 0; border: 0; background: none; font: inherit; font-size: .85rem; color: var(--accent); cursor: pointer; text-decoration: underline; }
.etykieta-pola { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .3rem; }
.wybor-monet { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip-moneta { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .3rem .8rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.chip-moneta:hover:enabled { border-color: var(--accent); }
.chip-moneta.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.chip-moneta:disabled { opacity: .4; cursor: default; }
.porzadki { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin-top: .9rem; padding-top: .8rem;
  border-top: 1px dashed var(--border); }
.dochod { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin-top: .9rem; padding-top: .8rem;
  border-top: 1px solid var(--border); }
.handel details.acc { border-bottom: 0; }
.handel .acc-body > * + * { margin-top: .4rem; }

/* ---- icons (static/vendor/ikony, Lucide, ISC): drawn with the text colour ---- */
.ikona { width: 1.2em; height: 1.2em; flex: none; vertical-align: -.22em; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fab .ikona { width: 2.1rem; height: 2.1rem; }  /* the d10 has more lines than a plain glyph */
.btn.icon .ikona { width: 1.25rem; height: 1.25rem; }
.badge .ikona { width: 1.15em; height: 1.15em; margin-right: .25em; vertical-align: -.2em; }
.badge.sama-ikona .ikona { margin-right: 0; }
:is(h2, h3, h4) > .ikona { margin-right: .35em; color: var(--teal); }
.alert > .ikona:first-child { margin-right: .4em; }
/* an icon before text where no flex gap spaces them */
:is(p, small, b, dt, span, label:not(.check), .etykieta-pola, .nazwa-opis) > .ikona { margin-right: .3em; }
.cell-name .ikona { color: var(--ok); }  /* an earning skill (Income) */
/* Luck, Fate… as icon + number in a line */
.zasoby .ikona { margin: 0 .15em 0 .45em; }
.zasoby .ikona:first-child { margin-left: 0; }
.ikona-pusta { width: 2.4rem; height: 2.4rem; color: var(--muted); }  /* an empty list's sign */

/* ---- top bar: the page's name and the save state on a wide screen ---- */
.tytul-strony { display: none; font-family: var(--font-head); font-weight: 600; font-size: 1.15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.stan-zapisu { display: none; font-size: .85rem; color: var(--muted); white-space: nowrap; }

/* ---- the phone's „Więcej”: groups of big rows ---- */
.menu-wiecej .section { margin: .9rem .2rem .3rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.menu-lista { display: flex; flex-direction: column; }
.menu-lista a, .menu-lista button {
  display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 48px; padding: .55rem .5rem;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: inherit; text-align: left;
  text-decoration: none; cursor: pointer;
}
.menu-lista a:hover, .menu-lista button:hover { background: var(--surface-2); }
.menu-lista a.active { color: var(--accent); font-weight: 600; }
/* under „Wyloguj”: who is logged in, one line, a long nick cut with an ellipsis */
.nazwa-konta { overflow-wrap: anywhere; }  /* a long name without spaces must not stretch the card */
.kto { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; color: var(--muted); }
.sidenav .kto { color: var(--nav-muted); }
.menu-lista .ikona { width: 1.3rem; height: 1.3rem; color: var(--muted); }
.menu-lista a.active .ikona { color: var(--accent); }

/* ---- loading: grey shapes of what is coming ---- */
.szkielet { display: flex; flex-direction: column; gap: .8rem; }
.sz-linia, .sz-blok { border-radius: var(--radius-sm); background: var(--surface-2); }
.sz-linia { height: .95rem; margin: .45rem 0; }
.szkielet .card .sz-linia:nth-child(3n+1) { width: 88%; }
.szkielet .card .sz-linia:nth-child(3n+2) { width: 66%; }
.szkielet .card .sz-linia:nth-child(3n) { width: 78%; }
.sz-tytul { height: 1.8rem; width: 45%; }
.sz-rzad { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.sz-blok { height: 3.2rem; }
@media (prefers-reduced-motion: no-preference) {
  .sz-linia, .sz-blok { animation: puls 1.4s ease-in-out infinite; }
}

/* ---- start page: a dashboard ---- */
.scena-trwa {
  display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; border-radius: var(--radius);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--ink); text-decoration: none;
}
.scena-trwa:hover { border-color: var(--accent); }
.scena-trwa.tura { background: var(--accent); color: var(--accent-ink); }
.scena-trwa.tura .muted { color: inherit; opacity: .85; }
.scena-trwa .scena-ikona { width: 1.6rem; height: 1.6rem; }
.szybkie-akcje { gap: .4rem; }
.kafle-postaci { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; }
.kafel-postaci {
  display: flex; flex-direction: column; gap: .3rem; padding: .75rem .85rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--gold);
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow);
}
.kafel-postaci:hover { border-color: var(--accent); }
.kafel-postaci b { font-family: var(--font-head); font-size: 1.15rem; }
.pasek-zyw.szeroki { width: 100%; max-width: 12rem; height: 8px; }
.tabela-druzyny tr.moja td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.tabela-druzyny .kol-liczb { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela-druzyny .znaczniki { gap: .2rem; }
.tylko-telefon { display: none; }
@media (max-width: 600px) {
  .tabela-druzyny .kol-liczb { display: none; }
  .tylko-telefon { display: block; }
}

/* ---- character creator (nowa_postac.html): a progress bar over the steps, race tiles, the summary ---- */
.kreator-kroki { display: flex; gap: .3rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.kreator-kroki li { flex: 1; min-width: 0; }
.kreator-kroki button {
  display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 100%; padding: .45rem .1rem 0;
  border: 0; border-top: 4px solid var(--border); background: none; color: var(--muted);
  font: inherit; font-size: .85rem; cursor: pointer;
}
.kreator-kroki button:disabled { cursor: default; }
.kreator-kroki .nr {
  display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); font-weight: 700;
}
.kreator-kroki .nazwa { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kreator-kroki li.zrobiony button { border-top-color: var(--gold); color: var(--ink); }
.kreator-kroki li.zrobiony button:hover .nazwa { text-decoration: underline; }
.kreator-kroki li.zrobiony .nr { background: var(--gold); border-color: var(--gold); color: var(--accent-ink); }
.kreator-kroki li.teraz button { border-top-color: var(--accent); color: var(--accent); font-weight: 600; }
.kreator-kroki li.teraz .nr { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
@media (max-width: 560px) {
  .kreator-kroki li.teraz { flex: 3; }
  .kreator-kroki li:not(.teraz) .nazwa { display: none; }
}
.kreator-krok h2:focus { outline: none; }
.kreator-nav { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; }
.kreator-blad { margin: 1rem 0 0; color: var(--bad); font-weight: 600; }
.wynik-losowania { margin: 0 0 .75rem; font-weight: 600; }
.kafle-wyboru { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem; }
.kafel-wyboru {
  display: flex; flex-direction: column; gap: .3rem; padding: .65rem .8rem; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface); cursor: pointer;
}
.kafel-wyboru:hover { border-color: var(--accent); }
.kafel-wyboru:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent); }
.kafel-wyboru:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.kafel-wyboru input { margin: 0; accent-color: var(--accent); }
.kafel-wyboru b { font-family: var(--font-head); font-size: 1.15rem; }
.opis-profesji { margin-top: 1rem; padding: .75rem .9rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.opis-wyboru { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .9rem; margin: .5rem 0 0; }
.opis-wyboru dt { font-weight: 600; color: var(--muted); }
.opis-wyboru dd { margin: 0; }
@media (max-width: 480px) { .opis-wyboru { grid-template-columns: 1fr; } .opis-wyboru dd { margin-bottom: .35rem; } }
/* the characteristics' tiles: the total under the name, then why — the 2k10 (typed, a chip to swap in B/C, or
   points) and what the race and the career add */
.kafel-cechy {
  display: flex; flex-direction: column; align-items: stretch; gap: .2rem; padding: .35rem .3rem .4rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); text-align: center;
}
.kafel-cechy label { font-size: .85rem; font-weight: 700; color: var(--muted); }
.kafel-cechy.prof { border-color: var(--gold); }
.kafel-cechy.prof label { color: var(--gold); }
.kafel-cechy.cel { border-color: var(--accent); background: var(--accent-soft); }
.kafel-cechy-pola { display: flex; flex-direction: column; gap: .2rem; }
.kafel-cechy-pola input { padding-left: .2rem; padding-right: .2rem; }
.kafel-cechy small { font-size: .72rem; line-height: 1.2; color: var(--muted); }
.kafel-cechy small.premia { color: var(--gold); font-weight: 700; }
.kafel-cechy-suma { font-size: 1.35rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kostka-cechy {
  display: grid; place-items: center; min-height: 2.6rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 1.15rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
button.kostka-cechy { cursor: grab; touch-action: manipulation; box-shadow: 0 2px 0 var(--border); }
@media (hover: hover) { button.kostka-cechy:hover { border-color: var(--accent); } }  /* a tap would leave it marked */
button.kostka-cechy[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.kafle-cech.przestawiane:has([aria-pressed="true"]) button.kostka-cechy:not([aria-pressed="true"]) { border-style: dashed; border-color: var(--accent); }
.baner-cech {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .8rem; margin: 0 0 .75rem; padding: .55rem .8rem;
  border-radius: var(--radius-sm); background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent);
}
.baner-cech p { flex: 1 1 18rem; }
.cecha > b { display: block; padding-bottom: .3rem; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.lista-podsumowania { list-style: none; margin: 0; padding: 0; }
.lista-podsumowania li { display: flex; align-items: baseline; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--border); }
.lista-podsumowania li:last-child { border-bottom: 0; }
.lista-podsumowania small { color: var(--muted); }
.lista-podsumowania b { min-width: 2rem; text-align: right; font-variant-numeric: tabular-nums; }
.lista-wyboru { list-style: none; margin: 0; padding: 0; }
.lista-wyboru li { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .6rem; padding: .35rem 0; border-bottom: 1px solid var(--border); }
.lista-wyboru li:last-child { border-bottom: 0; }
.lista-wyboru li.wybrana > .grow, .lista-wyboru li.wybrana label span { font-weight: 600; }
.lista-wyboru .badge { margin-left: .4rem; vertical-align: .1em; }
.lista-wyboru small { min-width: 2rem; color: var(--muted); text-align: right; }
.lista-wyboru b { min-width: 2rem; text-align: right; font-variant-numeric: tabular-nums; }
.spec-wybor select, .spec-wybor input { width: auto; min-width: 9rem; max-width: 14rem; padding-top: .3rem; padding-bottom: .3rem; }
@media (max-width: 600px) {  /* on a phone the specialisation gets its own line under the skill */
  .lista-wyboru .spec-wybor { order: 10; flex: 1 0 100%; }
  .spec-wybor select, .spec-wybor input { width: 100%; max-width: none; }
}
.talent-chip {
  display: inline-block; padding: .2rem .65rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--ink); font: inherit; font-size: .92rem; text-align: left; cursor: pointer;
}
.talent-chip:hover { border-color: var(--accent); }
.para-talentow { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: .75rem 0 0; padding: .4rem .8rem .6rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); }
.para-talentow legend { padding: 0 .3rem; font-size: .85rem; color: var(--muted); }

/* ---- the GM's requests for a test (stores/prosby.js): the pill over the bottom bar, the sheet it opens, the GM's
   dialog. The pill sits left of the dice button, and above a player's docked panel in the tracker. ---- */
.prosby-znacznik {
  position: fixed; z-index: 44; left: 16px; bottom: calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom));
  max-width: calc(100% - 16px - 96px); min-height: 46px;
  display: inline-flex; align-items: center; gap: .45rem; padding: .45rem 1rem .45rem .7rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent), 0 4px 14px rgb(0 0 0 / 22%);
  font: inherit; font-weight: 600; cursor: pointer;
}
.prosby-znacznik .ikona { width: 1.5rem; height: 1.5rem; }
.prosby-znacznik .tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prosby-znacznik:hover { border-color: var(--accent); }
.prosby-znacznik.pilny { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); animation: prosba-puls 2s ease-out infinite; }
.prosby-znacznik.gotowe { border-color: var(--ok); color: var(--ok); }
@keyframes prosba-puls {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent), 0 4px 14px rgb(0 0 0 / 22%); }
  70%, 100% { box-shadow: 0 0 0 14px transparent, 0 4px 14px rgb(0 0 0 / 22%); }
}
@media (prefers-reduced-motion: reduce) { .prosby-znacznik.pilny { animation: none; } }
/* the tracker's docked panel has its own dice button (the round one hides), so the pill may be wider there */
body:has(.panel-gracza) .prosby-znacznik { bottom: calc(var(--tabbar-h) + var(--panel-gracza-h, 52px) + 12px + env(safe-area-inset-bottom));
  max-width: calc(100% - 32px); }
@media (min-width: 900px) {
  .prosby-znacznik { left: calc(var(--nav-w) + 24px); bottom: 28px; max-width: min(28rem, calc(100% - var(--nav-w) - 130px)); }
  body:has(.panel-gracza) .prosby-znacznik { bottom: calc(var(--panel-gracza-h, 52px) + 14px); max-width: min(28rem, calc(100% - var(--nav-w) - 48px)); }
}

.prosba-karta { padding: .75rem .85rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.prosba-karta + .prosba-karta { margin-top: .75rem; }
.prosba-karta.ukryta { border-style: dashed; }
.prosba-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.prosba-glowa h3 { margin: 0; font-size: 1.15rem; }
.prosba-powod { margin: .5rem 0 0; padding: .35rem .7rem; border-left: 3px solid var(--gold); background: var(--surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-family: var(--font-head); font-style: italic; font-size: 1.05rem; }
.prosba-postacie { list-style: none; margin: .6rem 0 0; padding: 0; }
.prosba-postacie li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; min-height: 44px; padding: .3rem .5rem;
  border-radius: var(--radius-sm); border-left: 4px solid var(--border); background: var(--surface-2); }
.prosba-postacie li + li { margin-top: .3rem; }
.prosba-kto { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; min-width: 0; }
.prosba-kto b { font-size: 1.05rem; }
.prosba-postacie .uwaga { color: var(--warn); }
.prosba-postacie li.sukces { border-left-color: var(--ok); }
.prosba-postacie li.porazka { border-left-color: var(--bad); }
.prosba-postacie li.krytyk { border-left-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--surface-2)); }
.prosba-postacie li.pech { border-left-color: var(--bad); background: var(--bad-soft); }
.prosba-wynik { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; font-weight: 600; }
.prosba-postacie li.sukces .prosba-wynik, .prosba-postacie li.krytyk .prosba-wynik { color: var(--ok); }
.prosba-postacie li.porazka .prosba-wynik, .prosba-postacie li.pech .prosba-wynik { color: var(--bad); }
.prosba-postep { margin-top: .6rem; }
.pasek-postepu { height: 8px; margin: .3rem 0 .15rem; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.pasek-postepu > span { display: block; height: 100%; background: var(--teal); transition: width .3s; }
.prosba-postep.osiagniety { color: var(--ok); }
.prosba-postep.osiagniety .pasek-postepu > span { background: var(--ok); }
.prosba-postep.porazka { color: var(--bad); }
.prosba-progi { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.prog-postaci { display: inline-flex; align-items: baseline; gap: .35rem; padding: .15rem .6rem; border-radius: 999px;
  background: var(--teal-soft); font-size: .9rem; }
.prog-postaci b { font-variant-numeric: tabular-nums; }
.prog-postaci.ostrzezenie { background: var(--warn-soft); color: var(--warn); }
.sheet.prosba-nowa { display: flex; flex-direction: column; }
.sheet.prosba-nowa > * { flex-shrink: 0; }
.sheet.prosba-nowa > .odstep { flex: 1 0 0; }
.prosba-w-rzucie { margin-bottom: .75rem; padding: .5rem .75rem; border-left: 3px solid var(--gold); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-2); }
.prosba-dostarczona, .zajecie-zapisane { margin: .4rem 0 0; color: var(--ok); font-size: .9rem; }
.trudnosci button:disabled { cursor: default; opacity: .5; }
.trudnosci button.on:disabled { opacity: 1; }

/* ---- Corruption and mutations (karta.html, the roll dialog): the points as pips up to the threshold (a gold line)
   and past it in red; the mutations as action cards, a hidden one dashed ---- */
.zepsucie-licznik { display: flex; align-items: center; gap: .75rem; }
.pipsy-zepsucia { display: flex; flex-wrap: wrap; gap: 3px; margin: .15rem 0 .2rem; }
.pipsy-zepsucia > span { position: relative; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border);
  background: var(--surface-2); }
.pipsy-zepsucia > span.on { background: var(--chaos); border-color: var(--chaos); }
.pipsy-zepsucia > span.ponad { border-color: var(--bad); }
.pipsy-zepsucia > span.on.ponad { background: var(--bad); }
.pipsy-zepsucia > span.prog { margin-left: 6px; }
.pipsy-zepsucia > span.prog::before { content: ""; position: absolute; left: -6px; top: -3px; bottom: -3px; width: 2px;
  border-radius: 1px; background: var(--gold); }
.liczniki-mutacji { display: flex; flex-wrap: wrap; gap: .35rem; }
.mutacja .ikona-mutacji { width: 1.4rem; height: 1.4rem; color: var(--chaos); }
.mutacja.ukryta { margin-top: .3rem; padding: .5rem; border: 1px dashed var(--warn); border-radius: var(--radius-sm);
  background: var(--warn-soft); }
.mutacja.ukryta + .karta-akcji { border-top: 0; }
.zepsucie-w-rzucie { padding: .5rem .75rem; border-left: 3px solid var(--chaos); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--chaos-soft); }
.zepsucie-w-rzucie .stawka { font-size: .9rem; font-weight: 600; color: var(--chaos); }
.prosba-w-rzucie.zepsucie { border-left-color: var(--chaos); background: var(--chaos-soft); }
.seg.dwa-wiersze button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  line-height: 1.2; white-space: normal; }
.seg.dwa-wiersze button small { font-size: .78rem; opacity: .8; }
.card.zepsucie-po-walce { border-left: 4px solid var(--chaos); }

/* ---- social tests, haggling, carousing and Psychology (5e s. 140–145, 183–184) ---- */
.trudnosci button.sugerowana { border-color: var(--accent); border-style: dashed; box-shadow: 0 0 0 2px var(--accent-soft); }
.rozmowca .wybor-monet { align-items: center; }
.rozmowca .chip-moneta { min-height: 36px; padding: .2rem .7rem; }
.osoba-rozmowcy { min-height: 36px; max-width: 100%; }
.osoba-rozmowcy.on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.czynniki .czynnik { display: grid; grid-template-columns: 4.6rem 1fr; align-items: center; gap: .4rem; margin-bottom: .3rem; }
.czynniki .czynnik .nazwa { font-weight: 600; font-size: .88rem; }
.czynniki .seg button { padding-top: .25rem; padding-bottom: .25rem; }
.czynniki .seg button > span { font-weight: 700; }
.czynniki .seg button.minus.on { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.hulanka { padding: .5rem .75rem; border-left: 3px solid var(--gold); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--accent-soft); }
.psychologia-wiersz { padding: .35rem 0; border-bottom: 1px solid var(--border); }
.psychologia-wiersz:last-of-type { border-bottom: 0; }
.nowa-psychologia { padding: .6rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); }

/* ---- injuries and diseases (partials/zdrowie_karty.html): action cards like the mutations, a disease the GM hides
   dashed; its symptoms with what each does now; the daily tests under them; the dialogs' preview ---- */
.dolegliwosc .ikona-dolegliwosci { width: 1.4rem; height: 1.4rem; color: var(--bad); }
.choroba.ukryta { margin-top: .3rem; padding: .5rem; border: 1px dashed var(--warn); border-radius: var(--radius-sm);
  background: var(--warn-soft); }
.choroba.ukryta + .karta-akcji { border-top: 0; }
.objawy-choroby { display: flex; flex-wrap: wrap; gap: .1rem .75rem; margin-top: .2rem; font-size: .85rem; }
.objawy-choroby .objaw.czeka .nazwa-opis { color: var(--muted); }
.testy-objawow { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .5rem; padding-top: .6rem;
  border-top: 1px solid var(--border); }
.sheet.uraz-okno, .sheet.choroba-okno { display: flex; flex-direction: column; }
.sheet.uraz-okno > *, .sheet.choroba-okno > * { flex-shrink: 0; }
.sheet.uraz-okno > .odstep, .sheet.choroba-okno > .odstep { flex: 1 0 0; }
.podglad-urazu, .podglad-choroby { padding: .6rem .75rem; border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: .92rem; }
.podglad-urazu > div + div { margin-top: .25rem; }
.dane-choroby { display: grid; grid-template-columns: auto 1fr; gap: .15rem .75rem; margin: 0 0 .5rem; font-size: .9rem; }
.dane-choroby dt { color: var(--muted); }
.dane-choroby dd { margin: 0; font-weight: 600; }
.objawy-lista { margin: 0 0 .4rem; padding-left: 1.1rem; font-size: .9rem; }
.prosba-w-rzucie.dolegliwosc-w-rzucie { border-left-color: var(--warn); background: var(--warn-soft); }
.zarazenie-w-prosbie { padding: .5rem .75rem; border-left: 3px solid var(--warn); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--warn-soft); }
.zarazenie-w-prosbie .stawka { font-size: .9rem; font-weight: 600; color: var(--warn); }

/* ---- handouts and whispers (stores/materialy.js, materialy.html): a shown handout full screen — a picture that
   zooms where it is tapped, a letter on parchment under a wax seal (static/img/pieczec.svg, our own drawing) — the
   page's cards, the GM's editor, and the conversation's bubbles. ---- */
.tabbar button { position: relative; }
.tabbar .kropka { position: absolute; top: 8px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--nav-bg); }
.tabs :is(button, a) .badge { margin-left: .1rem; }
.tabs button .ikona { margin-right: .15rem; }

.overlay.material-okno { z-index: 64; background: rgb(8 6 4 / 82%); padding: 0; }
.material-arkusz {
  display: flex; flex-direction: column; width: 100%; height: 100dvh; background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow);
}
@media (min-width: 700px) { .material-arkusz { max-width: 1100px; height: min(94dvh, 1100px); border-radius: 14px; overflow: hidden; } }
.material-glowa { display: flex; align-items: center; gap: .6rem; padding: .6rem .6rem .6rem 1rem; border-bottom: 1px solid var(--border);
  padding-top: calc(.6rem + env(safe-area-inset-top)); }
.material-glowa h2 { margin: 0; font-size: 1.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.material-glowa small { color: var(--muted); }
.material-ikona { width: 1.6rem; height: 1.6rem; color: var(--gold); }
.material-tresc { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column;
  background: var(--surface-2); padding-bottom: env(safe-area-inset-bottom); }
/* a picture as tall as it needs (a landscape map on a phone leaves room for the text under it), at most most of the
   screen; alone, it fills the window. Zoomed in, it takes the whole window and scrolls: the text waits under it. */
.material-obraz { flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: #120d09; cursor: zoom-in; touch-action: manipulation; }
.material-obraz img { display: block; max-width: 100%; max-height: 72dvh; object-fit: contain; user-select: none; -webkit-user-select: none; }
.material-obraz.sam { flex: 1 1 0; min-height: 0; }
.material-obraz.sam img { max-height: 100%; }
.material-obraz.zoom { flex: 1 1 0; min-height: 0; display: block; overflow: auto; cursor: zoom-out; touch-action: auto; }
.material-obraz.zoom img { max-width: none; max-height: none; height: auto; }
.material-tresc:has(> .material-obraz.zoom) > :not(.material-obraz) { display: none; }
/* text alone sits in the middle of the window; the spacers shrink away when it is longer than the window */
.material-tresc.bez-obrazu::before, .material-tresc.bez-obrazu::after { content: ""; flex: 1 0 0; }
.material-stopka { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; padding: .6rem 1rem;
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); font-size: .92rem; }

/* a letter: parchment stays parchment in the dark theme too, only a little dimmer */
.pergamin {
  position: relative; width: calc(100% - 24px); max-width: 40rem; margin: 1.25rem auto 3rem; padding: 1.8rem 1.6rem 3.2rem;
  color: #3b2a16; font-family: var(--font-head); font-size: 1.18rem; line-height: 1.55; border-radius: 3px;
  background:
    radial-gradient(ellipse at 18% 8%, rgb(255 252 240 / 55%), transparent 55%),
    radial-gradient(ellipse at 85% 95%, rgb(128 84 34 / 24%), transparent 60%),
    radial-gradient(ellipse at 5% 90%, rgb(128 84 34 / 16%), transparent 45%),
    linear-gradient(100deg, #ecd8a6, #f5e7c2 38%, #f0dfb4 68%, #e5cc93);
  box-shadow: inset 0 0 42px rgb(120 78 28 / 38%), inset 0 0 5px rgb(96 58 18 / 45%), 0 12px 30px rgb(0 0 0 / 28%);
}
.pergamin .prose :is(p, li) { margin-bottom: .7em; }
.pergamin .prose a { color: #7d140c; }
.pergamin .prose :is(h1, h2, h3) { color: #5a2a10; }
.pergamin .pieczec { position: absolute; right: 1.4rem; bottom: -1.9rem; width: 4.8rem; height: 4.8rem;
  background: url("../img/pieczec.svg") center / contain no-repeat; filter: drop-shadow(0 3px 4px rgb(0 0 0 / 35%)); transform: rotate(-9deg); }
:root[data-theme="dark"] .pergamin { filter: brightness(.9) saturate(.95); }
.notatka-mg { width: calc(100% - 24px); max-width: 44rem; margin: 1.25rem auto 2rem; padding: 1.2rem 1.3rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); font-size: 1.05rem; }
/* a laptop or a screen on the table (the guest): read from further away */
@media (min-width: 900px) {
  .pergamin { max-width: 46rem; font-size: 1.4rem; padding: 2.4rem 2.4rem 3.6rem; }
  .notatka-mg { font-size: 1.3rem; padding: 1.6rem 1.8rem; }
}

.materialy-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: .8rem; }
.materialy-foldery { display: flex; flex-wrap: wrap; gap: .35rem; }
.materialy-foldery .chip-moneta { min-height: 32px; padding: .15rem .65rem; font-size: .9rem; }
.materialy-foldery .chip-moneta small { font-weight: 500; opacity: .7; font-variant-numeric: tabular-nums; }
.materialy-foldery .tylko-szkice { border-style: dashed; }
.materialy-grupa + .materialy-grupa { margin-top: 1.5rem; }
.materialy-grupa-glowa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
  margin-bottom: .75rem; }
.materialy-grupa-glowa h2 { display: flex; align-items: center; gap: .45rem; min-width: 0; overflow-wrap: anywhere; }
.material-kafel { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.material-kafel.szkic { border-style: dashed; box-shadow: none; }
.material-kafel.nowy { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.kafel-podglad { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 12rem; padding: 0; border: 0; overflow: hidden;
  background: #1d1611; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.kafel-podglad img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.kafel-podglad:hover img { transform: scale(1.03); }
.kafel-pergamin, .kafel-notatka { position: absolute; inset: 0; padding: .9rem 1rem; overflow: hidden; font-size: .82rem; line-height: 1.4; }
.kafel-pergamin { color: #3b2a16; font-family: var(--font-head); font-size: .92rem;
  background: radial-gradient(ellipse at 20% 10%, rgb(255 252 240 / 50%), transparent 60%), linear-gradient(100deg, #ecd8a6, #f4e5bf 45%, #e6cf98);
  box-shadow: inset 0 0 24px rgb(120 78 28 / 35%); }
.kafel-pergamin::after { content: ""; position: absolute; right: .6rem; bottom: .5rem; width: 2.4rem; height: 2.4rem;
  background: url("../img/pieczec.svg") center / contain no-repeat; transform: rotate(-9deg); }
.kafel-notatka { background: var(--surface-2); color: var(--ink); }
.kafel-pergamin::before, .kafel-notatka::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(transparent, rgb(236 216 166 / 95%)); }
.kafel-notatka::before { background: linear-gradient(transparent, var(--surface-2)); }
.kafel-znak { position: absolute; top: .5rem; right: .5rem; box-shadow: 0 1px 3px rgb(0 0 0 / 25%); }
.kafel-podglad .badge:not(.accent) { background: var(--surface); }
.kafel-opis { padding: .6rem .75rem .2rem; min-width: 0; }
.kafel-opis b { display: block; font-family: var(--font-head); font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kafel-czytelnicy { display: block; margin-top: .2rem; color: var(--warn); }
.kafel-czytelnicy.wszyscy { color: var(--ok); }
.kafel-notatka-mg { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kafel-akcje { display: flex; gap: .35rem; padding: .5rem .75rem .7rem; margin-top: auto; }
.kafel-akcje .btn:first-child { flex: 1; }

.sheet.material-edytor { display: flex; flex-direction: column; }
.sheet.material-edytor > * { flex-shrink: 0; }
.sheet.material-edytor > .odstep { flex: 1 0 0; }
.obraz-wybor { display: flex; align-items: flex-start; gap: .75rem; }
.obraz-podglad { flex: none; width: 6.5rem; height: 6.5rem; border-radius: var(--radius-sm); overflow: hidden; background: #1d1611;
  border: 1px solid var(--border); }
.obraz-podglad img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uwaga-tekst { color: var(--warn); }

/* portraits: by the name on a sheet, on the dashboard and the character list */
.awatar { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border); background: var(--surface-2); }
.awatar.maly { width: 1.7rem; height: 1.7rem; border-width: 1px; }
.postac-w-tabeli { display: inline-flex; align-items: center; gap: .4rem; }
.postac-w-tabeli a { min-width: 0; }
.btn.szepnij { min-height: 28px; min-width: 28px; padding: 0 .3rem; color: var(--muted); }
.btn.szepnij:hover { color: var(--accent); }
.portret { flex: none; width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 50%; overflow: hidden; cursor: pointer;
  border: 2px solid var(--gold); background: var(--surface-2); color: var(--muted); display: grid; place-items: center; }
.portret img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portret.pusty { border: 1.5px dashed var(--border); }
.portret.pusty:hover { border-color: var(--accent); color: var(--accent); }
.portret .ikona { width: 1.2rem; height: 1.2rem; }
.portret-arkusz { max-width: 440px; }
.portret-duzy { display: grid; place-items: center; min-height: 12rem; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.portret-duzy img { display: block; width: 100%; max-height: 60dvh; object-fit: contain; }
.portret-duzy.pusty { aspect-ratio: 1; min-height: 0; max-height: 16rem; text-align: center; }
.portret-duzy.pusty .ikona { width: 2.5rem; height: 2.5rem; }

/* whispers: the GM's list of players, a conversation's bubbles (mine on the right), the field at the bottom */
.overlay.rozmowa-nakladka { z-index: 62; }
.sheet.rozmowa-okno { display: flex; flex-direction: column; height: min(86dvh, 42rem); overflow: hidden; }
.rozmowa-ramka, .rozmowa-karta { display: flex; flex-direction: column; min-height: 0; }
.rozmowa-ramka { flex: 1; }
/* on the page: the field and its button end above the round dice button and the bottom bar */
.rozmowa-karta { height: clamp(18rem, calc(100dvh - 23.5rem), 40rem); }
.rozmowa-glowa { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.rozmowa-glowa h2 { margin: 0; font-size: 1.2rem; }
.rozmowa-podtytul { display: block; }
.watki { overflow-y: auto; min-height: 0; margin: 0 -.25rem; padding: 0 .25rem; }
.watek { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 58px; padding: .5rem .5rem; border: 0;
  border-bottom: 1px solid var(--border); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.watek:hover { background: var(--surface-2); }
.watek-litera { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--teal-soft); color: var(--teal); font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; }
.watek.nowe .watek-litera { background: var(--accent); color: var(--accent-ink); }
.watek.nowe .watek-skrot { color: var(--ink); font-weight: 600; }
.watek-postacie, .watek-skrot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.watek-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; flex: none; }
.rozmowa { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.wiadomosci { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .45rem;
  padding: .6rem .5rem; margin: 0 -.25rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.wiadomosci .empty { margin: auto 0; padding: 1rem; }
.dymek { max-width: 85%; align-self: flex-start; padding: .45rem .7rem .3rem; border-radius: 14px 14px 14px 4px;
  background: var(--surface); border: 1px solid var(--border); }
.dymek.moj { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.dymek p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.dymek-stopka { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .1rem .4rem; margin-top: .15rem; font-size: .75rem; color: var(--muted); }
.dymek-cofnij { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; }
.pisz { display: flex; align-items: flex-end; gap: .5rem; padding-top: .6rem; }
.pisz textarea { flex: 1; min-height: 44px; max-height: 8rem; resize: vertical; }
.pisz .btn { min-height: 44px; min-width: 48px; }

/* ---- the campaign chronicle (kronika.html, partials/kronika_okno.html, stores/kronika.js): people with a portrait or
   their initials on a wax-coloured disc, places with their picture, threads with their progress; the GM's hidden ones
   dashed. The entry window, the editor and the quick story NPC on parchment. ---- */
.justify-center { justify-content: center !important; }
.flex-none { flex: none !important; }
.imie-los { max-width: 38rem; padding: .6rem .7rem; }
.kronika-pasek { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.kronika-rodzaje button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.kronika-rodzaje .ikona { width: 1.05rem; height: 1.05rem; }
.kronika-rodzaje small { font-weight: 500; font-variant-numeric: tabular-nums; opacity: .8; }
.kronika-filtr { position: relative; flex: 1 1 13rem; max-width: 22rem; }
.kronika-filtr .ikona { position: absolute; left: .65rem; top: 50%; width: 1rem; height: 1rem; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.kronika-filtr input { width: 100%; padding-left: 2.1rem; }
.kronika-akcje-strony { display: flex; gap: .5rem; margin-left: auto; }
.kronika-tagi { display: flex; flex-wrap: wrap; gap: .35rem; }
.kronika-tagi .chip-moneta { min-height: 32px; padding: .15rem .65rem; font-size: .9rem; }
@media (max-width: 699px) {
  .kronika-rodzaje { display: flex; width: 100%; }
  .kronika-rodzaje button { flex: 1; padding-left: .3rem; padding-right: .3rem; }
  .kronika-filtr { max-width: none; }
  .kronika-akcje-strony { width: 100%; }
  .kronika-akcje-strony .btn { flex: 1 1 auto; padding-left: .5rem; padding-right: .5rem; white-space: nowrap; }
  .tylko-szeroki { display: none !important; }
}

.kronika-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; }
.kronika-kafel { position: relative; display: flex; align-items: flex-start; gap: .8rem; width: 100%; min-width: 0; padding: .75rem .85rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s; }
.kronika-kafel:hover { border-color: var(--accent); }
.kronika-kafel.ukryty { border-style: dashed; box-shadow: none; background: color-mix(in srgb, var(--surface) 55%, var(--surface-2)); }
.kronika-kafel.nowy { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
/* the round mark: a portrait, a person's initials, a place's pin, a thread's route */
.kafel-znak-wpisu, .kronika-znak { flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%;
  width: 3.4rem; height: 3.4rem; border: 2px solid var(--gold); color: #5b3a12; font-family: var(--font-head); font-weight: 700;
  font-size: 1.25rem; letter-spacing: .02em; background: radial-gradient(circle at 35% 28%, #f8ebcb, #dcc28c 70%, #c9a86a); }
.kafel-znak-wpisu img, .kronika-znak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kafel-znak-wpisu .ikona, .kronika-znak .ikona { width: 1.5rem; height: 1.5rem; }
.rodzaj-watek .kafel-znak-wpisu, .kronika-znak.rodzaj-watek { border-radius: 12px; border-color: var(--teal); color: var(--teal); background: var(--teal-soft); }
.kronika-znak.rodzaj-miejsce { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
/* a place: its picture as a band on top */
.kronika-kafel.rodzaj-miejsce { flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.rodzaj-miejsce .kafel-znak-wpisu { width: 100%; height: 3.4rem; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  background: linear-gradient(120deg, var(--accent-soft), var(--surface-2)); color: var(--accent); }
.rodzaj-miejsce .kafel-znak-wpisu.zdjecie { height: 8.5rem; background: #1d1611; }
.rodzaj-miejsce .kafel-znak-wpisu img { transition: transform .25s; }
.kronika-kafel.rodzaj-miejsce:hover img { transform: scale(1.03); }
.rodzaj-miejsce .kafel-tresc { padding: .6rem .85rem .75rem; }
.kafel-tresc { display: flex; flex-direction: column; gap: .25rem; flex: 1; min-width: 0; }
.kafel-tresc > b { font-family: var(--font-head); font-size: 1.15rem; line-height: 1.2; overflow-wrap: anywhere; }
.kafel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; font-size: .88rem; color: var(--muted); }
.status-statusu { display: inline-flex; align-items: center; gap: .3rem; color: var(--ink); font-weight: 600; }
.kafel-skrot { font-size: .88rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kafel-postep { display: flex; align-items: center; gap: .5rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.kafel-postep .pasek { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.kafel-postep .pasek > span { display: block; height: 100%; background: var(--ok); }
.kafel-chipy { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .1rem; }
.kafel-chipy .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the entry's window */
.overlay.kronika-okno { z-index: 63; }
.sheet.kronika-arkusz { padding-top: .8rem; }
.kronika-pokaz { margin: 0 0 .6rem; text-align: center; font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; color: var(--gold); letter-spacing: .03em; }
.kronika-glowa { display: flex; align-items: center; gap: .75rem; margin-bottom: .8rem; }
.kronika-glowa h2 { margin: 0; font-size: 1.5rem; line-height: 1.15; overflow-wrap: anywhere; }
.kronika-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin-top: .25rem; font-size: .92rem; }
.kronika-znak { width: 3.6rem; height: 3.6rem; }
.kronika-ukryty { margin-bottom: .8rem; }
.kronika-portret-duzy { display: block; width: min(100%, 18rem); margin: 0 auto 1rem; border-radius: 12px; overflow: hidden;
  border: 3px solid var(--gold); box-shadow: var(--shadow); background: var(--surface-2); }
.kronika-portret-duzy img { display: block; width: 100%; max-height: 46dvh; object-fit: cover; }
@media (min-width: 700px) {
  .kronika-tresc.z-portretem { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
  .kronika-tresc.z-portretem .kronika-portret-duzy { width: 100%; margin: 0; }
  .kronika-tresc.z-portretem .kronika-portret-duzy img { max-height: 24rem; }
  .kronika-opisy > :first-child { margin-top: 0; }
}
.kronika-obraz { display: block; margin: 0 0 1rem; border-radius: var(--radius); overflow: hidden; background: #1d1611; }
.kronika-obraz img { display: block; width: 100%; max-height: 45dvh; object-fit: contain; }
.kronika-sekcja { margin-top: 1.1rem; }
.kronika-sekcja h3 { margin: 0 0 .45rem; font-size: 1.05rem; }
.cele-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.cele-lista li { display: flex; align-items: center; gap: .5rem; }
.cele-lista li .check { flex: 1; min-width: 0; }
.cele-lista li.zrobiony span:not(.badge):not(.cel-znak) { text-decoration: line-through; color: var(--muted); }
.cele-lista li.ukryty { opacity: .85; }
.cel-znak { flex: none; width: 1.2rem; text-align: center; color: var(--ok); font-weight: 700; }
.przyslugi-tytul { margin: .5rem 0 .3rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.przyslugi-lista { list-style: none; padding: 0; margin: 0 0 .4rem; display: grid; gap: .35rem; }
.przyslugi-lista li { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-2); }
.przyslugi-lista li.splacona { opacity: .6; }
.przyslugi-lista li.splacona .grow { text-decoration: line-through; }
.kronika-zjednani { margin: 1rem 0 0; padding: .5rem .7rem; border-radius: var(--radius-sm); background: var(--ok-soft); }
.powiazania { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip-moneta.ukryty { border-style: dashed; }
.notatki-tekst { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 .6rem; padding: .55rem .75rem; border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--teal-soft); }
.sekrety-mg { padding: .6rem .8rem; border: 1px dashed var(--gold); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--gold) 8%, var(--surface)); }
.sekrety-mg .prose > :last-child { margin-bottom: 0; }
.kronika-karta { margin: 1rem 0 0; }
.kronika-akcje .row { flex-wrap: wrap; }
@media (max-width: 499px) { .kronika-akcje .btn.primary { order: -1; flex-basis: 100%; } }

/* the GM's editor */
.sheet.kronika-edytor { display: flex; flex-direction: column; }
.sheet.kronika-edytor > * { flex-shrink: 0; }
.sheet.kronika-edytor > .odstep { flex: 1 0 0; }
.obraz-podglad.okragly { border-radius: 50%; border: 2px solid var(--gold); }
.status-wybor { align-items: flex-end; gap: .75rem 1.25rem; }
.status-pozycja .krokomierz { margin: 0; }
.relacje-wybor .chip-moneta.on.ok { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.relacje-wybor .chip-moneta.on.warn { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.relacje-wybor .chip-moneta.on.bad { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.cele-edytor { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .35rem; }
.cele-edytor li { display: flex; align-items: center; gap: .4rem; }
.cele-edytor li input:not([type="checkbox"]) { min-width: 0; }
.przysluga-edytor { display: flex; flex-direction: column; margin-bottom: .6rem; padding: .6rem .7rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-2); }
.przysluga-edytor .seg.pelny button { white-space: normal; line-height: 1.2; font-size: .9rem; }
.przysluga-edytor .seg.pelny + .seg.pelny { margin-top: .5rem; }
.przysluga-edytor select { min-width: 0; }
.sekrety-pole textarea { border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); background: color-mix(in srgb, var(--gold) 5%, var(--surface)); }

/* the quick story NPC: its lines on parchment, each with its own 🎲 */
.sheet.generator-arkusz { max-width: 620px; }
.generator-wynik { position: relative; padding: .7rem 1rem .8rem; color: #3b2a16; border-radius: 4px; transition: opacity .15s;
  background:
    radial-gradient(ellipse at 18% 8%, rgb(255 252 240 / 55%), transparent 55%),
    radial-gradient(ellipse at 85% 95%, rgb(128 84 34 / 22%), transparent 60%),
    linear-gradient(100deg, #ecd8a6, #f5e7c2 38%, #f0dfb4 68%, #e5cc93);
  box-shadow: inset 0 0 30px rgb(120 78 28 / 32%), inset 0 0 4px rgb(96 58 18 / 40%); }
:root[data-theme="dark"] .generator-wynik { filter: brightness(.9) saturate(.95); }
.generator-wynik.laduje { opacity: .55; }
.generator-wynik dl { margin: 0; }
.generator-wynik .muted { color: #6f5530; }
.gen-wiersz { display: grid; grid-template-columns: 7.2rem 1fr auto; align-items: center; gap: .1rem .6rem; padding: .3rem 0;
  border-bottom: 1px dashed rgb(90 60 20 / 28%); }
.gen-wiersz:last-child { border-bottom: 0; }
.gen-wiersz dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: #7a5a2e; }
.gen-wiersz dd { margin: 0; min-width: 0; }
.gen-wiersz .btn.ghost { color: #5b3a12; }
.gen-wiersz .status-statusu { margin-left: .5rem; color: #3b2a16; }
.gen-imie { grid-template-columns: 1fr auto; }
.gen-imie dd { font-family: var(--font-head); font-size: 1.65rem; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.gen-wiersz.sekret dd { font-style: italic; }
@media (max-width: 499px) {
  .gen-wiersz { grid-template-columns: 1fr auto; }
  .gen-wiersz dt { grid-column: 1 / -1; }
}

/* ---- the campaign's calendar (partials/kalendarz_okno.html): the date on the top bar and its window ---- */
.data-gry { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; min-width: 0; padding: .2rem .65rem .2rem .45rem;
  border: 1px solid color-mix(in srgb, var(--nav-ink) 30%, transparent); border-radius: 999px; background: transparent;
  color: inherit; font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap; }
.data-gry:hover { background: var(--nav-hover); }
.data-gry .tekst { overflow: hidden; text-overflow: ellipsis; }
.data-gry.noc { border-color: var(--nav-active); color: var(--nav-active); }
.data-gry.pusta { border-style: dashed; }
.ksiezyc-chip { display: inline-flex; flex: none; }
.ksiezyc-chip .ksiezyc { width: 1.2rem; height: 1.2rem; }
@media (min-width: 900px) {
  .data-gry { border-color: var(--border); background: var(--surface); color: var(--ink); }
  .data-gry:hover { background: var(--surface-2); border-color: var(--muted); }
  .data-gry.noc { border-color: var(--gold); color: var(--gold); }
}
@media (max-width: 380px) { .data-gry { padding-right: .5rem; font-size: .8rem; } }
/* a phone with the date on the bar: the sigil alone is the way home, so the app's name does not end in „W…” */
@media (max-width: 480px) { .topbar:has(.data-gry:not([style*="none"])) .brand .logo { display: none; } }

/* the moons: Mannslieb silver, Morrslieb the sickly green of the cover's sky; the lit part is drawn from the phase */
.ksiezyc { width: 2.6rem; height: 2.6rem; flex: none; overflow: visible; }
/* the unlit part is the night sky's own dark disc, so a new moon still reads as a moon */
.ksiezyc .ciemna { fill: #243238; stroke: #5b6b70; stroke-width: .7; }
.ksiezyc .jasna { fill: #ece6d2; }
.ksiezyc.mannslieb .jasna { fill: #f3eedd; stroke: #b9b19a; stroke-width: .5; }
.ksiezyc.morrslieb .ciemna { fill: #1f2a1c; stroke: #4e6a3d; }
.ksiezyc.morrslieb .jasna { fill: #a3d96f; stroke: #5d8f33; stroke-width: .5; filter: drop-shadow(0 0 2.5px rgb(140 214 80 / 70%)); }
:root[data-theme="dark"] .ksiezyc .ciemna { fill: #0a1215; stroke: #56696d; }

.sheet.kalendarz-okno { display: flex; flex-direction: column; min-height: min(92dvh, 44rem); }
.sheet.kalendarz-okno > * { flex-shrink: 0; }
.sheet.kalendarz-okno > .odstep { flex: 1 0 0; }
.dzis-gry { display: grid; gap: .6rem; margin-bottom: .9rem; }
.data-duza { font-family: var(--font-head); font-size: 1.45rem; font-weight: 700; line-height: 1.15; color: var(--teal); }
.dzis-data .znaczenia { margin-top: .15rem; }
.noc-swieta { margin: 0; }
.opis-swieta { margin: 0; font-style: italic; }
.ksiezyce { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .5rem; }
.ksiezyc-kafel { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: var(--radius-sm);
  background: var(--surface-2); line-height: 1.25; }
.ksiezyc-kafel > span:first-child { display: inline-flex; }
button.ksiezyc-kafel { width: 100%; border: 1px solid transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.ksiezyc-kafel:hover, button.ksiezyc-kafel[aria-expanded="true"] { border-color: var(--border); }
.wybor-fazy .wybor-monet { gap: .3rem; }
.chip-moneta.maly { min-height: 34px; padding: .2rem .65rem; font-size: .9rem; }
.nastepne-swieto { margin: 0; }

.miesiac-glowa { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; }
.miesiac-glowa .btn.icon { font-size: 1.5rem; line-height: 1; }
.swieto-przed { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .4rem; margin-bottom: .4rem; padding: .35rem .6rem;
  border-radius: var(--radius-sm); background: var(--warn-soft); font-size: .92rem; }
.swieto-przed.dzis { outline: 2px solid var(--accent); outline-offset: -2px; }
.siatka-miesiaca { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.siatka-miesiaca th { font-size: .72rem; font-weight: 600; color: var(--muted); text-align: center; padding: .1rem 0; overflow: hidden; }
.siatka-miesiaca td { position: relative; height: 2.35rem; text-align: center; vertical-align: middle; border-radius: 6px;
  background: var(--surface-2); font-variant-numeric: tabular-nums; }
.siatka-miesiaca td.pusty { background: none; }
.siatka-miesiaca td.dzis { background: var(--accent-soft); color: var(--accent); font-weight: 700; box-shadow: inset 0 0 0 2px var(--accent); }
.znak-ksiezyca { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; vertical-align: middle; }
.siatka-miesiaca .znak-ksiezyca { position: absolute; bottom: 3px; left: 50%; width: .45rem; height: .45rem; transform: translateX(-50%); }
.znak-ksiezyca { width: .6rem; height: .6rem; }
.znak-ksiezyca.pelnia { background: #f3eedd; box-shadow: 0 0 0 1.5px #b39a5c; }
.znak-ksiezyca.now { background: #243238; box-shadow: 0 0 0 1px #5b6b70; }
.legenda { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: .5rem 0 0; }

.uplyw-czasu .kwota { margin-top: .2rem; }
.propozycja-czasu { margin-top: .8rem; transition: opacity .15s; }
.propozycja-czasu.laduje { opacity: .55; }
.propozycja-czasu h3 { margin-bottom: .2rem; }
.odpoczynek-czasu { margin-bottom: .6rem; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.lista-propozycji { list-style: none; margin: .4rem 0; padding: 0; display: grid; gap: .25rem; }
.lista-propozycji li .check { display: flex; align-items: flex-start; gap: .5rem; padding: .35rem .5rem; border-radius: var(--radius-sm);
  background: var(--surface-2); line-height: 1.3; }
.lista-propozycji li .check input { margin-top: .15rem; }
.data-pulpit { display: inline-flex; align-items: center; gap: .45rem; margin-top: .35rem; padding: .2rem .7rem .2rem .3rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit;
  font-size: .95rem; text-align: left; cursor: pointer; }
@media (max-width: 560px) { .data-pulpit { border-radius: 14px; font-size: .9rem; } }
.data-pulpit .ksiezyc { width: 1.5rem; height: 1.5rem; }
.data-pulpit .ksiezyc-chip .ksiezyc { width: 1.5rem; height: 1.5rem; }
.data-pulpit:hover { border-color: var(--muted); }
.data-wpisu { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: .2rem 0 .75rem; padding: .35rem .6rem;
  border-radius: var(--radius-sm); background: var(--surface); }
.czas-mod { flex: none; max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.czas-mod.czasowy { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.sheet.czas-efektu-okno { max-width: 460px; }
/* an own modifier on a phone: checkbox, name, ⏳ and 🗑 on one line, the modifier's text on the next */
@media (max-width: 560px) {
  .row.nowrap.wiersz-mod { flex-wrap: wrap; }
  /* own dice on a phone: the number and „Rozlicz wynik” on one line, the way back to the app's dice under them */
  .row.nowrap.stopka-rzutu { flex-wrap: wrap; }
  .stopka-rzutu .za-mnie { flex: 1 0 100%; }
  .wiersz-mod .w-9 { flex: 1 1 6rem; width: auto; min-width: 0; }
  .wiersz-mod .wpis-mod { order: 5; flex-basis: 100%; }
}

/* ---- between adventures (przerwa.html, strony/przerwa.js) ---- */
.badge.info { background: var(--info-soft); color: var(--ink); border-color: transparent; font-weight: 500; }
.przerwa { max-width: 78rem; }
.przerwa-postacie { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: 1rem; align-items: start; }
.przerwa-postacie > .card { margin: 0; }
.przerwa-wstep h2 { display: flex; align-items: center; gap: .5rem; }
.przerwa-plan { margin: .5rem 0 0; padding-left: 1.4rem; display: grid; gap: .3rem; }
.przerwa-plan li::marker { color: var(--gold); font-weight: 700; }
.przerwa-etapy { margin-bottom: .6rem; }
.przerwa-skutki { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.przerwa-skutki .badge { white-space: normal; max-width: 100%; text-align: left; }
.przerwa-skutki.inline { display: inline-flex; margin: 0 0 0 .3rem; vertical-align: middle; }
.przerwa-wydarzenie { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.przerwa-wydarzenie .tytul { font-family: var(--font-head); font-size: 1.25rem; }
.przerwa-region .prose { max-width: 48rem; }
.przerwa-postac { border-left: 3px solid transparent; }
.przerwa-postac.moja { border-left-color: var(--accent); }
.przerwa-postac-glowa { display: flex; align-items: center; gap: .7rem; }
.przerwa-postac-glowa h3 a { color: inherit; text-decoration: none; }
.przerwa-postac-glowa h3 a:hover { text-decoration: underline; }
.przerwa-postac-glowa .awatar { width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover; flex: none; }
.przerwa-limit { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; flex: none; }
.przerwa-limit .kropki { display: flex; gap: .25rem; }
.przerwa-limit .kropki span { width: .8rem; height: .8rem; border-radius: 50%; border: 1.5px solid var(--gold); }
.przerwa-limit .kropki .zajete { background: var(--gold); }
.przerwa-limit .kropki .nadmiar { background: var(--bad); border-color: var(--bad); }
.przerwa-limit small { color: var(--muted); font-variant-numeric: tabular-nums; }
.przerwa-blok select.wybor-wydarzenia { flex: 1 1 9rem; min-width: 0; width: auto; }
.przerwa-blok-glowa { row-gap: .1rem; }
.przerwa-blok { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--border); }
.przerwa-blok.alert { margin-bottom: 0; border-top: 0; padding: .55rem .75rem; }
.przerwa-wydarzenie-postaci summary { cursor: pointer; line-height: 1.5; }
.przerwa-wydarzenie-postaci summary b { font-family: var(--font-head); font-size: 1.08rem; margin-right: .3rem; }
.przerwa-zajecia { list-style: none; margin: .3rem 0 0; padding: 0; }
.przerwa-zajecia li { display: flex; align-items: flex-start; gap: .6rem; padding: .45rem 0; }
.przerwa-zajecia li + li { border-top: 1px dashed var(--border); }
.przerwa-zajecia .akcje { display: flex; gap: .3rem; flex: none; }
.przerwa-zajecia li.zrobione .ikona-zajecia { opacity: .6; }
.ikona-zajecia { width: 1.5rem; height: 1.5rem; margin-top: .1rem; color: var(--teal); }
.sheet.przerwa-okno { display: flex; flex-direction: column; min-height: min(92dvh, 40rem); }
.sheet.przerwa-okno.start { min-height: 0; }
.sheet.przerwa-okno > * { flex-shrink: 0; }
.sheet.przerwa-okno > .odstep { flex: 1 0 0; }
.sheet.zajecie-okno { max-width: 640px; }
.zajecia-kafle { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .4rem; }
.zajecie-kafel { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.zajecie-kafel:hover:enabled { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.zajecie-kafel b { font-family: var(--font-head); font-size: 1.05rem; }
.zajecie-kafel .zakaz { color: var(--bad); }
.zajecie-kafel.niedostepne { cursor: default; opacity: .62; background: var(--surface-2); }
.lista-kandydatow { display: grid; gap: .3rem; max-height: 17rem; overflow-y: auto; padding-right: .2rem; }
.przerwa-pozycja { align-items: flex-start; padding: .35rem .5rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.tabela-koniec { width: 100%; border-collapse: collapse; margin-top: .6rem; }
.tabela-koniec th { text-align: left; font-size: .8rem; color: var(--muted); font-weight: 600; padding: .25rem .4rem; }
.tabela-koniec td { padding: .45rem .4rem; border-top: 1px solid var(--border); vertical-align: top; }
.tabela-koniec td:not(:first-child) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela-koniec .bad { color: var(--bad); }
.scena-trwa.przerwa-baner { background: var(--teal-soft); border-color: color-mix(in srgb, var(--teal) 40%, transparent); }
.scena-trwa.przerwa-baner:hover { border-color: var(--teal); }
.blok-zetonow .zeton-wiersz { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; }
.blok-zetonow .zeton-wiersz + .zeton-wiersz { border-top: 1px dashed var(--border); }
.ikona-zetonu { width: 1.35rem; height: 1.35rem; color: var(--gold); }
.majatek + .lokaty, .lokaty { margin-top: .6rem; display: grid; gap: .3rem; }
@media (max-width: 560px) {
  .przerwa-zajecia li { flex-wrap: wrap; }
  .przerwa-zajecia .akcje { margin-left: 2.4rem; }
  .tabela-koniec { font-size: .92rem; }
}