/* ============================================================
   SUBMONY, „Gold × FireRed” · komponenty UI
   Okna, dialogi, sloty drużyny, przyciski, plakietki, paski HP,
   menu z kursorem ▶, formularze. Stare nazwy klas (glass-card,
   feat-card, btn-primary…) zostają, zmienia się tylko wygląd.

   Ramki to pikselowe 9-slice z public/css/sprites.css (--frame-*),
   rysowane przez border-image; border-color zostaje jako fallback.
   ============================================================ */

/* ── Wspólna mechanika ramek ─────────────────────────────── */
.win, .glass-card, .dialog,
.slot, .feat-card,
.btn, .btn-primary, .btn-ghost, .btn-blue, .btn-cancel,
.label, .tag,
.input, .textarea, .input-wrap.has-prefix {
  border-style: solid;
  border-color: var(--fb, var(--frame));
  border-width: calc(var(--b, 3) * var(--px));
  border-image: var(--fimg) var(--b, 3) fill / calc(var(--b, 3) * var(--px)) stretch;
  background-clip: padding-box;
}

/* ── Okno ────────────────────────────────────────────────── */
.win, .glass-card {
  --b: 3;
  --fimg: var(--frame-win);
  background-color: var(--paper);
  color: var(--ink);
  text-shadow: none;
  padding: calc(4 * var(--px)) calc(5 * var(--px));
}
.win.is-sel, .glass-card.is-sel, .win.is-key {
  --fimg: var(--frame-win-sel);
  --fb: var(--sel-edge);
}

/* ── Dialog (podwójna ramka jak w Gold) ──────────────────── */
.dialog {
  --b: 4;
  --fimg: var(--frame-dialog);
  position: relative;
  background-color: var(--paper);
  color: var(--ink);
  text-shadow: none;
  padding: calc(3 * var(--px)) calc(5 * var(--px));
  line-height: 1.6;
}
/* migająca strzałka ▼ „ciąg dalszy” w prawym dolnym rogu */
.dialog.has-more { padding-right: calc(12 * var(--px)); }
.dialog.has-more::after {
  content: '';
  position: absolute;
  right: calc(3 * var(--px));
  bottom: calc(2 * var(--px));
  width: calc(var(--spr-cursor-down-w) * var(--fp));
  height: calc(var(--spr-cursor-down-h) * var(--fp));
  background: var(--spr-cursor-down) 0 0 / 100% 100% no-repeat;
  animation: soft-sink 1.6s var(--ease-soft) infinite;
}

/* ── Slot drużyny ────────────────────────────────────────── */
.slot, .feat-card {
  --b: 4;
  --fimg: var(--frame-slot);
  --fb: var(--slot-edge);
  position: relative;
  display: block;
  background-color: var(--slot);
  color: #FFFFFF;
  text-decoration: none;
  text-shadow: none;
  padding: calc(3 * var(--px)) calc(4 * var(--px)) calc(4 * var(--px)) calc(15 * var(--px));
  min-height: calc(18 * var(--px));
  transition: background-color .25s var(--ease-soft), color .25s var(--ease-soft), transform .3s var(--ease-out-soft);
}
/* pokéball na lewej krawędzi slotu (w starym markupie to .feat-icon) */
.slot-ball, .feat-card .feat-icon {
  position: absolute;
  left: calc(1 * var(--px));
  top: calc(2 * var(--px));
  width: calc(var(--spr-ball-w) * var(--px));
  height: calc(var(--spr-ball-h) * var(--px));
  background: var(--spr-ball) 0 0 / 100% 100% no-repeat;
  margin: 0;
}
.feat-card .feat-icon svg { display: none; }
.slot-title, .feat-title {
  display: block;
  font-family: var(--f-body);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.3;
  overflow-wrap: break-word;
}
.slot-desc, .feat-desc {
  display: block;
  margin-top: calc(2 * var(--px));
  font-size: var(--fs-small);
  line-height: 1.5;
  color: #FFFFFF;
}
/* zaznaczony slot: cyjan + pomarańczowa ramka, pokéball podskakuje */
.slot.is-sel, .feat-card.is-sel,
a.slot:focus-visible, a.feat-card:focus-visible {
  --fimg: var(--frame-slot-sel);
  --fb: var(--sel-edge);
  background-color: var(--sel);
  color: var(--sel-text);
  text-shadow: none;
  outline: none;
}
.slot.is-sel .slot-desc, .feat-card.is-sel .feat-desc,
a.slot:focus-visible .slot-desc, a.feat-card:focus-visible .feat-desc { color: var(--sel-text); }
.slot.is-sel .slot-ball, .feat-card.is-sel .feat-icon,
a.slot:focus-visible .slot-ball, a.feat-card:focus-visible .feat-icon {
  animation: soft-bob 1.2s var(--ease-soft) infinite;
}
@media (hover: hover) {
  a.slot:hover, a.feat-card:hover {
    --fimg: var(--frame-slot-sel);
    --fb: var(--sel-edge);
    background-color: var(--sel);
    color: var(--sel-text);
    text-shadow: none;
  }
  a.slot:hover .slot-desc, a.feat-card:hover .feat-desc { color: var(--sel-text); }
  a.slot:hover .slot-ball, a.feat-card:hover .feat-icon { animation: soft-bob 1.2s var(--ease-soft) infinite; }
}

/* ── Przyciski ───────────────────────────────────────────── */
.btn, .btn-primary, .btn-ghost, .btn-blue, .btn-cancel {
  --b: 3;
  --fimg: var(--frame-btn);
  --tsh: var(--ink-shadow);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--px));
  padding: calc(2 * var(--px)) calc(5 * var(--px));
  background-color: #F0F0EC;
  color: var(--ink);
  font-family: var(--f-caps);
  font-weight: var(--fw-caps);
  font-size: var(--fs-caps);
  line-height: 1.5;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  text-shadow: 1px 1px 0 var(--tsh);
  cursor: pointer;
  user-select: none;
  filter: drop-shadow(0 var(--px) 0 rgba(12, 22, 56, .35));
  transition: transform .2s var(--ease-out-soft), filter .25s var(--ease-soft);
}
.btn-primary {
  --fimg: var(--frame-btn-primary);
  --fb: var(--primary-edge);
  --tsh: var(--primary-edge);
  background-color: var(--primary);
  color: #FFFFFF;
}
.btn-blue {
  --fimg: var(--frame-btn-blue);
  --fb: var(--slot-edge);
  --tsh: var(--slot-edge);
  background-color: var(--slot);
  color: #FFFFFF;
}
.btn-cancel {
  --b: 4;
  --fimg: var(--frame-btn-cancel);
  --fb: var(--cancel-edge);
  --tsh: var(--cancel-edge);
  background-color: var(--cancel);
  color: #FFFFFF;
  padding: calc(1 * var(--px)) calc(5 * var(--px));
}
.btn-lg { padding: calc(3 * var(--px)) calc(7 * var(--px)); }
/* stare ikonki SVG (gładkie linie) nie pasują do pikseli, w przyciskach je chowamy */
.btn svg, .btn-primary svg, .btn-ghost svg, .btn-blue svg, .btn-cancel svg { display: none; }

@media (hover: hover) {
  .btn:hover, .btn-primary:hover, .btn-ghost:hover, .btn-blue:hover, .btn-cancel:hover { filter: brightness(1.08) drop-shadow(0 var(--px) 0 rgba(12, 22, 56, .35)); }
}
.btn:active, .btn-primary:active, .btn-ghost:active, .btn-blue:active, .btn-cancel:active,
.is-pressed {
  transform: translateY(var(--px));
  filter: none;
}
.btn:disabled, .btn-primary:disabled, .btn-ghost:disabled, .btn-blue:disabled, .btn-cancel:disabled,
.btn[aria-disabled="true"], .btn-primary[aria-disabled="true"], .btn-ghost[aria-disabled="true"],
.is-soon {
  filter: grayscale(.8) opacity(.6);
  cursor: not-allowed;
}
.dl-row .is-soon { pointer-events: none; }

/* ── Plakietki i etykiety ────────────────────────────────── */
.label, .tag {
  --b: 2;
  --fimg: var(--frame-tag);
  --fb: var(--plaque-edge);
  display: inline-flex;
  align-items: center;
  gap: calc(2 * var(--fp));
  padding: var(--fp) calc(3 * var(--fp));
  background-color: var(--plaque);
  color: var(--plaque-text);
  font-family: var(--f-caps);
  font-weight: var(--fw-caps);
  font-size: var(--fs-caps);
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 var(--plaque-edge);
}
/* kropka w .label = mini-pokéball */
.label-dot {
  flex: none;
  display: inline-block;
  width: calc(var(--spr-ball-mini-w) * var(--fp));
  height: calc(var(--spr-ball-mini-h) * var(--fp));
  background: var(--spr-ball-mini) 0 0 / 100% 100% no-repeat;
}

/* statusy w kolorach pasków HP */
.pill, .wlh-pill, .ae-status {
  display: inline-flex;
  align-items: center;
  gap: calc(2 * var(--fp));
  padding: var(--fp) calc(3 * var(--fp));
  border: var(--fp) solid var(--hp-track);
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--f-caps);
  font-weight: var(--fw-caps);
  font-size: var(--fs-caps-sm);
  line-height: 1.4;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pill::before, .wlh-pill::before {
  content: '';
  width: calc(3 * var(--fp));
  height: calc(3 * var(--fp));
  background: currentColor;
}
.pill.is-ok, .wlh-pill.approved, .ae-status-approved { background: var(--hp-green); color: #0E3A1C; }
.pill.is-mid, .wlh-pill.pending, .ae-status-pending  { background: var(--hp-yellow); color: #4A3200; }
.pill.is-bad, .wlh-pill.rejected, .ae-status-rejected { background: var(--hp-red); color: #FFFFFF; }

/* ── Pasek HP ────────────────────────────────────────────── */
.hp {
  display: flex;
  align-items: center;
  gap: var(--px);
}
.hp-label {
  flex: none;
  padding: 0 var(--px);
  background: var(--hp-yellow);
  color: #503000;
  font-family: var(--f-caps);
  font-weight: 900;
  font-size: var(--fs-micro);
  line-height: 1.5;
  border: 1px solid #806000;
  text-shadow: none;
}
.hp-track {
  position: relative;
  flex: 1;
  height: calc(3 * var(--px));
  border: var(--px) solid var(--hp-track);
  background: #505858;
}
.hp-track > i {
  display: block;
  height: 100%;
  width: calc(var(--v, 1) * 100%);
  background: linear-gradient(var(--hp-hi, var(--hp-green-hi)) 0 34%, var(--hp-fill, var(--hp-green)) 34%);
}
.hp.is-mid { --hp-fill: var(--hp-yellow); --hp-hi: var(--hp-yellow-hi); }
.hp.is-low { --hp-fill: var(--hp-red);    --hp-hi: var(--hp-red-hi); }

/* ── Menu z kursorem ▶ (menu START, spis treści, okienko wyboru) ── */
.menu { list-style: none; display: flex; flex-direction: column; gap: var(--px); }
.menu a, .menu button, .menu .menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(2 * var(--px));
  width: 100%;
  padding: var(--px) calc(2 * var(--px)) var(--px) calc(4 * var(--px) + 7 * var(--fp));
  font-family: var(--f-caps);
  font-weight: var(--fw-caps);
  font-size: var(--fs-caps);
  line-height: 1.5;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
  color: var(--ink);
}
.menu a::before, .menu button::before, .menu .menu-item::before {
  content: '';
  position: absolute;
  left: calc(2 * var(--px));
  top: 50%;
  width: calc(var(--spr-cursor-right-w) * var(--fp));
  height: calc(var(--spr-cursor-right-h) * var(--fp));
  margin-top: calc(var(--spr-cursor-right-h) * var(--fp) / -2);
  background: var(--spr-cursor-right) 0 0 / 100% 100% no-repeat;
  visibility: hidden;
}
.menu a:focus-visible, .menu button:focus-visible { outline: none; }
.menu a:focus-visible::before, .menu button:focus-visible::before,
.menu .active::before, .menu [aria-current]::before, .menu .is-sel::before {
  visibility: visible;
  animation: soft-nudge 1.3s var(--ease-soft) infinite;
}
@media (hover: hover) {
  .menu a:hover::before, .menu button:hover::before { visibility: visible; animation: soft-nudge 1.3s var(--ease-soft) infinite; }
}

/* ── Formularze ──────────────────────────────────────────── */
.field { margin-bottom: calc(5 * var(--px)); }
/* .field-label: podpis pola bez kontrolki (np. „Połącz Discord”), <span>, nie <label> */
.field > :is(label, .field-label) {
  display: block;
  margin-bottom: calc(2 * var(--px));
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--ink);
}
.field .hint {
  margin-left: calc(2 * var(--px));
  font-weight: 400;
  font-size: calc(var(--fs-small) - 1px);
  color: var(--ink-muted);
}
.input, .textarea {
  --b: 3;
  --fimg: var(--frame-input);
  width: 100%;
  padding: calc(2 * var(--px)) calc(3 * var(--px));
  background-color: #FFFFFF;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.4;
  caret-color: var(--primary);
}
.textarea { min-height: calc(26 * var(--px)); resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: #8A929A; }
.input:focus, .textarea:focus, .input-wrap.has-prefix:focus-within {
  outline: none;
  --fimg: var(--frame-win-sel);
  --fb: var(--sel-edge);
}

.input-wrap { position: relative; }
.input-wrap > svg {
  position: absolute; left: calc(3 * var(--px)); top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--ink-muted); pointer-events: none;
}
.input-wrap > svg ~ .input { padding-left: calc(3 * var(--px) + 26px); }
.input-wrap.has-prefix {
  --b: 3;
  --fimg: var(--frame-input);
  display: flex;
  align-items: center;
  gap: calc(2 * var(--px));
  padding: 0 calc(3 * var(--px));
  background-color: #FFFFFF;
}
.input-wrap.has-prefix > svg { position: static; transform: none; flex: none; }
.input-wrap.has-prefix .input-prefix { flex: none; color: var(--ink-muted); }
.input-wrap.has-prefix .input {
  flex: 1; min-width: 0;
  border: 0; border-image: none;
  padding: calc(2 * var(--px)) 0;
  background: transparent;
}
.input-wrap.has-prefix .input:focus { border-image: none; }

/* pole z błędem (np. link w odpowiedzi), czerwona obwódka, bez migania */
.input[aria-invalid="true"], .textarea[aria-invalid="true"],
.input-wrap.has-prefix:has(.input[aria-invalid="true"]) {
  outline: var(--px) solid var(--danger-text);
  outline-offset: 0;
}
.input-wrap.has-prefix .input[aria-invalid="true"] { outline: none; }

/* pułapka na boty, ludzie nie mogą jej zobaczyć ani wypełnić */
.honey { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

/* komunikaty formularza: bez .show puste i bez ramki, ale obecne w drzewie
   dostępności, role="status" ogłosi tekst, który JS wpisze później */
.form-msg {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--fs-small);
  line-height: 1.5;
  text-shadow: none;
}
.form-msg.show {
  margin-top: calc(2 * var(--px));
  padding: calc(2 * var(--px)) calc(3 * var(--px));
  border: var(--px) solid currentColor;
  animation: msg-in .35s var(--ease-out-soft) both;
}
@keyframes msg-in { from { opacity: 0; transform: translateY(-4px); } }
.form-msg.err  { background: #FDE8E4; color: var(--danger-text); }
.form-msg.ok   { background: #E4F6E8; color: var(--ok-text); }

/* kroki formularza (whitelist): zablokowany / zrobiony */
.field.is-locked { opacity: .45; pointer-events: none; filter: grayscale(.6); }
.field.is-locked .reward-box { opacity: 1; pointer-events: auto; filter: none; }
.step-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(6 * var(--px));
  height: calc(6 * var(--px));
  margin-right: calc(2 * var(--px));
  padding: 0 var(--px);
  background: var(--slot);
  color: #FFFFFF;
  border: var(--px) solid var(--slot-edge);
  font-family: var(--f-caps);
  font-weight: 800;
  font-size: 13px;
  vertical-align: middle;
  text-shadow: none;
}
.field.is-done .step-tag { background: var(--hp-green); border-color: #1E6A34; color: #0E3A1C; }

/* karta połączonego konta (Discord / Twitch), JS nadpisuje className */
.conn-card {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  padding: calc(2 * var(--px)) calc(3 * var(--px));
  background: var(--paper-2);
  border: var(--px) solid var(--frame);
  border-left-width: calc(3 * var(--px));
}
.conn-card.is-ok   { border-left-color: var(--hp-green); background: #EAF7EE; }
.conn-card.is-warn { border-left-color: var(--hp-yellow); background: #FBF4DC; }
.conn-avatar { width: 40px; height: 40px; flex-shrink: 0; object-fit: cover; image-rendering: pixelated; border: var(--px) solid var(--frame); background: var(--paper); }
.conn-name { font-weight: 600; font-size: var(--fs-small); }
.conn-name a { text-decoration: underline; text-underline-offset: 3px; }
.conn-sub { font-size: calc(var(--fs-small) - 2px); color: var(--ink-muted); margin-top: 2px; line-height: 1.45; }
.conn-mark { width: 20px; height: 20px; flex-shrink: 0; margin-left: auto; align-self: flex-start; margin-top: 6px; }
.conn-card.is-ok .conn-mark   { color: var(--ok-text); }
.conn-card.is-warn .conn-mark { color: var(--warn-text); }
.conn-again { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: calc(var(--fs-small) - 2px); color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; }
.conn-err { margin-top: calc(2 * var(--px)); font-size: var(--fs-small); color: var(--danger-text); }
/* pusty .conn-err zostaje w drzewie dostępności (role="status"), tylko bez odstępu */
.conn-err:empty { margin-top: 0; }
.ae-err:empty { display: none; }
.conn-btn { width: 100%; }
/* przyciski marek: bez ramki 9-slice (jej papierowy środek zakryłby kolor marki) */
.discord-btn, .twitch-btn {
  border-image: none;
  border-width: var(--px);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .28), inset -2px -2px 0 rgba(0, 0, 0, .22);
}
.discord-btn { background-color: var(--discord); border-color: #2A3080; color: #FFFFFF; --tsh: #2A3080; }
.twitch-btn  { background-color: #7B3BE8; border-color: #3A1878; color: #FFFFFF; --tsh: #3A1878; }

/* opis nagrody za punkty kanału, fioletowa „karta przedmiotu” */
.reward-box {
  padding: calc(3 * var(--px)) calc(4 * var(--px));
  background: #F1EAFE;
  border: var(--px) solid #6A3FC8;
  border-left-width: calc(3 * var(--px));
  color: var(--ink);
}
.reward-box .reward-name { font-family: var(--f-caps); font-weight: var(--fw-caps); font-size: var(--fs-caps); line-height: 1.4; letter-spacing: .05em; margin-bottom: calc(2 * var(--px)); text-transform: uppercase; }
.reward-box p { font-size: var(--fs-small); line-height: 1.55; }
.reward-box a { color: #5A2DB8; text-decoration: underline; text-underline-offset: 3px; }

/* ekran sukcesu (whitelist, podanie): ukryty, dopóki JS nie doda .show */
.wl-success { display: none; text-align: center; }
.wl-success.show { display: block; }

/* szkic formularza zapisany w przeglądarce (podanie) */
.draft-note {
  margin-bottom: calc(4 * var(--px));
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-muted);
}
.draft-note[hidden] { display: none; }
.link-btn {
  display: inline;
  padding: 0;
  font-weight: 700;
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Ramka z ważną informacją (np. „gra ruszy 10 grudnia”) ── */
.notice {
  margin-top: calc(4 * var(--px));
  padding: calc(2 * var(--px)) calc(3 * var(--px));
  background: #FBF4DC;
  border: var(--px) solid var(--frame);
  border-left: calc(3 * var(--px)) solid var(--hp-yellow);
  color: var(--ink);
  font-size: var(--fs-small);
  line-height: 1.55;
  text-shadow: none;
}
.notice b { font-weight: 800; }

/* ── Rozwijane szczegóły pobierania: „Co nowego”, SHA-256 ── */
.dl-extra { margin-top: calc(3 * var(--px)); display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.dl-extra[hidden], .dl-details[hidden] { display: none; }
.dl-details {
  border: var(--px) solid #C8D0D8;
  background: var(--paper-2);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.dl-details > summary {
  padding: var(--px) calc(3 * var(--px));
  font-weight: 700;
  cursor: pointer;
}
.dl-details > summary:focus-visible { outline: var(--px) solid var(--sel-edge); outline-offset: 0; }
.dl-details > :not(summary) { margin: 0 calc(3 * var(--px)) calc(2 * var(--px)); }
.dl-details ul { padding-left: 1.2em; }
.dl-details li + li { margin-top: 2px; }
.hash-row { display: flex; flex-direction: column; gap: 2px; }
.hash-row + .hash-row { margin-top: calc(2 * var(--px)); }
.hash-label { font-weight: 700; }
.hash {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 13px;
  overflow-wrap: anywhere;
  word-break: break-all;
  user-select: all;
}

/* ── Lista kroków z numerami (instrukcje) ─────────────────── */
.num-list { list-style: none; counter-reset: num; display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.num-list > li {
  counter-increment: num;
  position: relative;
  padding-left: calc(8 * var(--px));
  font-size: var(--fs-small);
  line-height: 1.55;
}
.num-list > li::before {
  content: counter(num);
  position: absolute;
  left: 0;
  top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(6 * var(--px));
  height: calc(6 * var(--px));
  background: var(--slot);
  border: var(--px) solid var(--slot-edge);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.num-list code, .notice code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: .9em;
  padding: 0 3px;
  background: var(--paper-2);
  border: 1px solid #C8D0D8;
  overflow-wrap: anywhere;
}

/* ── Dwie równe kolumny (np. instalacja: Windows / Linux) ─── */
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(4 * var(--px)); align-items: start; }
@media (max-width: 899px) { .two-col { grid-template-columns: 1fr; } }
.col-title { margin: calc(4 * var(--px)) 0 calc(3 * var(--px)); }
.col-title:first-child { margin-top: 0; }
.fine-print { margin-top: calc(3 * var(--px)); font-size: var(--fs-small); line-height: 1.55; color: var(--ink-muted); }

/* ── Lista „nazwa + opis” (np. profile grafiki) ───────────── */
.def-list { list-style: none; display: flex; flex-direction: column; }
.def-list > li {
  padding: calc(2 * var(--px)) 0;
  border-bottom: var(--px) solid #D8DEE4;
  font-size: var(--fs-small);
  line-height: 1.5;
}
.def-list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.def-list b { display: block; font-weight: 800; font-size: var(--fs-body); color: var(--ink); }

/* ── Drobne sprite'y do użycia w treści ──────────────────── */
.px-sprite {
  display: inline-block;
  width: calc(var(--w) * var(--px));
  height: calc(var(--h) * var(--px));
  background: var(--img) 0 0 / 100% 100% no-repeat;
  vertical-align: middle;
}

/* ── Tryb wysokiego kontrastu: zostają zwykłe ramki ──────── */
@media (forced-colors: active) {
  .win, .glass-card, .dialog, .slot, .feat-card,
  .btn, .btn-primary, .btn-ghost, .btn-blue, .btn-cancel,
  .label, .tag, .input, .textarea, .input-wrap.has-prefix {
    border-image: none;
    border-color: CanvasText;
  }
}

/* ── Nawigacja: granatowy pasek + menu START ─────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
  padding: 0 var(--gutter);
  background: var(--nav);
  border-bottom: var(--px) solid var(--nav-edge);
  box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--nav-hi), 0 var(--px) 0 rgba(8, 16, 48, .35);
  color: #FFFFFF;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  text-decoration: none;
  line-height: 0;
}
/* znaczek SUBMONY, w małym rozmiarze płynnie pomniejszony */
.nav-emblem { width: 34px; height: auto; filter: drop-shadow(0 2px 0 rgba(8, 16, 48, .45)); }
.nav-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.nav-logo-img { width: 86px; height: 22px; }
.nav-partner { display: flex; align-items: center; gap: 6px; padding-left: 2px; }
.nav-partner .nav-x { width: 13px; height: 13px; image-rendering: pixelated; }
.nav-partner .nav-ice { width: 62px; height: auto; }
@media (max-width: 379px) {
  .nav-logo-img { width: 86px; height: auto; }
  .nav-partner .nav-ice { width: 52px; }
}

.nav-links { display: flex; align-items: center; gap: calc(1 * var(--px)); list-style: none; }
.nav-links a {
  position: relative;
  display: block;
  padding: calc(1 * var(--px)) calc(2 * var(--px)) calc(1 * var(--px)) calc(4 * var(--px));
  font-weight: 700;
  font-size: var(--fs-small);
  color: #E8EEFF;
  text-decoration: none;
  text-shadow: 1px 1px 0 var(--nav-edge);
}
.nav-links a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(var(--spr-cursor-right-light-w) * 2px);
  height: calc(var(--spr-cursor-right-light-h) * 2px);
  margin-top: calc(var(--spr-cursor-right-light-h) * -1px);
  background: var(--spr-cursor-right-light) 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  visibility: hidden;
}
.nav-links a.active, .nav-links a[aria-current="page"] { color: #FFFFFF; }
.nav-links a.active::before, .nav-links a[aria-current="page"]::before,
.nav-links a:focus-visible::before { visibility: visible; animation: soft-nudge 1.3s var(--ease-soft) infinite; }
.nav-links a:focus-visible { outline: none; }
@media (hover: hover) {
  .nav-links a:hover { color: #FFFFFF; }
  .nav-links a:hover::before { visibility: visible; animation: soft-nudge 1.3s var(--ease-soft) infinite; }
}

.navbar .nav-cta { font-size: 14px; padding: calc(1 * var(--px)) calc(3 * var(--px)); }

.nav-burger {
  display: none;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  font-family: var(--f-caps);
  font-weight: var(--fw-caps);
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--ink);
  background: var(--paper);
  border: var(--px) solid var(--frame);
  box-shadow: inset -2px -2px 0 #B8C0C8, 0 var(--px) 0 var(--nav-edge);
  text-transform: uppercase;
}
.nav-burger::before {
  content: '';
  width: 10px;
  height: 14px;
  background: var(--spr-cursor-right) 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
}

/* menu START (telefony i wąskie okna) */
.nav-mobile {
  position: fixed;
  z-index: var(--z-menu);
  top: calc(var(--nav-h) + 2 * var(--px));
  right: var(--gutter);
  width: min(320px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100svh - var(--nav-h) - 6 * var(--px));
  overflow-y: auto;
  padding: calc(3 * var(--px)) calc(3 * var(--px)) calc(4 * var(--px));
}
.nav-mobile[hidden] { display: none; }
.nav-mobile .menu a { font-size: 17px; padding-top: calc(2 * var(--px)); padding-bottom: calc(2 * var(--px)); }
.nav-mobile-foot { display: flex; gap: calc(2 * var(--px)); margin-top: calc(3 * var(--px)); padding-top: calc(3 * var(--px)); border-top: var(--px) dashed #B8C4D0; }
.nav-mobile-foot > * { flex: 1; font-size: 14px; }

@media (max-width: 1079px) {
  .navbar .nav-links, .navbar .nav-cta { display: none; }
  .nav-burger { display: inline-flex; }
}