/* Strona Dark Tribe — warstwa nad Unify 3.2 (theme.min.css przebudowany:
   dane/motyw/darktribe.scss). Klasy własne mają przedrostek `dt-`.

   Kolory: ciemny grafit, czerń i czerwień Hordy (decyzja 2026-10-28, PLAN § 23;
   wcześniej treść na bieli). Kontrast liczony dla tła #141414 i karty #1f1f1f:
   --dt-czerwien        #a30f0f  TŁO: przyciski, pasy, znacznik IC (biel na niej 8,0:1); obrysy
   --dt-czerwien-jasna  #ff5a4f  czerwień jako TEKST i ikona (6,0 / 5,4:1) — #a30f0f ma tu 2,3:1
   --dt-czern           #0d0d0d  nagłówek, hero, stopka, tła znaków
   --dt-tlo / -drugie   #141414 / #1b1b1b  strona / ramki, nagłówki tabel, sekcje na zmianę
   --dt-karta           #1f1f1f  karty, pola, wiersze
   --dt-jasny           #f2f2f2  nagłówki i tytuły (16,5:1)
   --dt-tekst           #d6d6d6  tekst (12,7:1)
   --dt-szary-cichy     #9e9e9e  tekst drugorzędny (6,9 / 6,2:1)

   Nagłówki: Cinzel (fonts/cinzel), tekst: Inter (fonts/inter) — z naszego hosta. */
:root {
    --dt-czerwien: #a30f0f;
    --dt-czerwien-ciemna: #7f0b0b;
    --dt-czerwien-jasna: #ff5a4f;
    --dt-czerwien-tlo: #2a1414;
    --dt-czern: #0d0d0d;
    --dt-grafit: #161616;
    --dt-tlo: #141414;
    --dt-tlo-drugie: #1b1b1b;
    --dt-karta: #1f1f1f;
    --dt-karta-wyzej: #262626;
    --dt-jasny: #f2f2f2;
    --dt-tekst: #d6d6d6;
    --dt-szary-cichy: #9e9e9e;
    --dt-linia: #303030;
    --dt-linia-mocna: #4a4a4a;
    /* Ramki „uwaga / podgląd / zaplanowane” — bursztyn na ciemnym. */
    --dt-bursztyn-tlo: #2b2412;
    --dt-bursztyn-linia: #5c4a1c;
    --dt-bursztyn: #f2c86b;
    /* Edytor tekstu w panelu (django-prose-editor czyta te zmienne). */
    --body-fg: #d6d6d6;
    --body-bg: #1a1a1a;
    --border-color: #3a3a3a;
    --prose-editor-background: #1a1a1a;
    --prose-editor-foreground: #d6d6d6;
    --prose-editor-border-color: #3a3a3a;
    --prose-editor-typographic: #4a4a4a;
    --prose-editor-active-color: #a30f0f;
    --prose-editor-disabled-color: #3a3a3a;
    --dt-cinzel: "Cinzel", Georgia, "Times New Roman", serif;
}

/* Przyklejony nagłówek nie może zasłaniać celu kotwicy ani fokusu (WCAG 2.4.11). */
html { scroll-padding-top: 5.5rem; color-scheme: dark; }
body { color: var(--dt-tekst); background-color: var(--dt-tlo); }
/* Faktura grafitu (PLAN § 24, W5): delikatny szum (SVG feTurbulence w data:, bez plików z zewnątrz) i winieta
   na stałej warstwie pod treścią — karty, nagłówek i stopka mają własne tła, więc widać ją tylko na gołym
   graficie. Bez ruchu, więc bez pauzy. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(ellipse at 50% 30%, transparent 55%, rgba(0, 0, 0, .38) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)' opacity='.05'/%3E%3C/svg%3E"); }
h1, h2, h3, .h1, .h2, .h3, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--dt-cinzel);
    font-weight: 700;
    letter-spacing: .02em;
    text-wrap: balance;
}

.dt-skip { z-index: 1100; }
main:focus { outline: none; }
:focus-visible { outline: 3px solid #e53935; outline-offset: 2px; }

/* --------------------------------------------------------------- pasek „w budowie” */
.dt-budowa { background: var(--dt-czerwien); color: #fff; font-size: .875rem; padding: .4rem 0; text-align: center; }

/* ------------------------------------------------------------------ nagłówek */
.dt-naglowek { position: sticky; top: 0; z-index: 1030; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.dt-marka { display: inline-flex; align-items: center; gap: .65rem; color: #fff; }
.dt-marka:hover, .dt-marka:focus { color: #fff; }
.dt-marka img { height: 40px; width: auto; }
.dt-marka span { font-family: var(--dt-cinzel); font-weight: 700; font-size: 1.25rem; letter-spacing: .1em; text-transform: uppercase; }
.dt-naglowek .navbar-nav .nav-link { color: rgba(255, 255, 255, .85); font-weight: 500; white-space: nowrap; }
/* Od 2026-10-22 menu ma kategorie (PLAN § 14.9) — pięć pozycji mieści się z runami i ciaśniejszymi
   odstępami od 992 px (zmierzone 992–1600 px, PL i EN, z zalogowanym kontem). Nowe strony idą
   do kategorii, nie na górny pasek. */
@media (min-width: 992px) {
    .dt-naglowek .navbar-nav > .nav-item > .nav-link { padding-left: .45rem; padding-right: .45rem; }
    .dt-naglowek-akcje { margin-left: .5rem; gap: .6rem; }
}
.dt-naglowek .navbar-nav .nav-link:hover, .dt-naglowek .navbar-nav .nav-link:focus { color: #fff; }
.dt-naglowek .navbar-nav .nav-link.active { color: #fff; box-shadow: inset 0 -2px 0 var(--dt-czerwien-jasna); }
.dt-naglowek .navbar-toggler { color: #fff; border-color: rgba(255, 255, 255, .25); }
.dt-naglowek .dropdown-menu { --bs-dropdown-bg: #1b1b1b; --bs-dropdown-link-color: rgba(255, 255, 255, .85);
    --bs-dropdown-link-hover-bg: #262626; --bs-dropdown-link-hover-color: #fff; --bs-dropdown-link-active-bg: var(--dt-czerwien);
    border: 1px solid rgba(255, 255, 255, .1); }
.dt-naglowek-akcje { display: flex; align-items: center; gap: 1rem; padding: .75rem 0; }
@media (min-width: 992px) {
    .dt-naglowek-akcje { padding: 0; }
}
/* Unify poniżej 992 px daje rozwiniętemu menu białe tło (ciemne ma tylko lista .navbar-nav),
   więc języki i „Zaloguj” znikały na białym pasie, a rozwinięcie kategorii dostawało jasną ramkę. */
@media (max-width: 991.98px) {
    .dt-naglowek .navbar-collapse { background-color: transparent; }
    .dt-naglowek .navbar-nav .dropdown-menu { border-color: rgba(255, 255, 255, .1); }
    .dt-naglowek-akcje { border-top: 1px solid rgba(255, 255, 255, .08); }
}

.dt-jezyki { display: flex; gap: .35rem; padding: 0; }
.dt-jezyki .list-inline-item:not(:last-child) { margin-right: 0; }
.dt-jezyk { display: inline-block; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; padding: .15rem .35rem;
    color: rgba(255, 255, 255, .75); border-bottom: 2px solid transparent; }
.dt-jezyk:hover, .dt-jezyk:focus { color: #fff; }
.dt-jezyk-aktywny { color: #fff; border-bottom-color: var(--dt-czerwien-jasna); }

/* ---------------------------------------------------------------------- hero */
.dt-hero { background-image: radial-gradient(circle at 78% 42%, rgba(163, 15, 15, .38), transparent 52%); }
/* Łuk pod hero w kolorze tła strony; sekcje na zmianę — tło drugie (dawniej .bg-light). */
.dt-hero-ksztalt { fill: var(--dt-tlo); }
.dt-sekcja-druga { background-color: var(--dt-tlo-drugie); }
.dt-hero-tytul { font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem); letter-spacing: .05em; line-height: 1.05; margin-bottom: 1rem; }
.dt-fakty li { display: flex; gap: .6rem; align-items: baseline; color: rgba(255, 255, 255, .82); margin-bottom: .35rem; }
.dt-fakty i { color: var(--dt-czerwien-jasna); }

.dt-licznik { display: inline-block; border: 1px solid rgba(255, 255, 255, .14); border-radius: .75rem;
    padding: 1rem 1.5rem; background: rgba(255, 255, 255, .03); }
.dt-licznik-tytul { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255, 255, 255, .72); margin-bottom: .6rem; }
.dt-licznik-pola { display: flex; gap: 1.75rem; }
.dt-licznik-pole { display: flex; flex-direction: column; min-width: 3.5rem; }
.dt-licznik-liczba { font-family: var(--dt-cinzel); font-weight: 700; font-size: 2.5rem; line-height: 1;
    color: #fff; font-variant-numeric: tabular-nums; }
.dt-licznik-opis { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .72); margin-top: .3rem; }
.dt-licznik-data { font-size: .8125rem; color: rgba(255, 255, 255, .72); margin-top: .75rem; }

/* --------------------------------------------------------------------- karty */
.dt-karta { border-top: 3px solid var(--dt-czerwien); }
.dt-karta .card-title { color: var(--dt-jasny); }
.dt-karta .card-text { color: var(--dt-tekst); }
.dt-karta-ikona { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
    border-radius: 50%; background: var(--dt-czerwien-tlo); color: var(--dt-czerwien-jasna); font-size: 1.25rem; }
.dt-karta-wpisu .card-img-top { aspect-ratio: 3 / 2; object-fit: cover; height: auto; }
.dt-karta-link { color: var(--dt-jasny); }
.dt-karta-link:hover, .dt-karta-link:focus { color: var(--dt-czerwien-jasna); }
.dt-karta-wpisu:focus-within { outline: 3px solid #e53935; outline-offset: 2px; }
.dt-karta-wpisu:focus-within a:focus-visible { outline: none; }
.dt-karta-meta { font-size: .8125rem; color: var(--dt-szary-cichy); }
.dt-pusto { color: var(--dt-szary-cichy); }

/* Znacznik IC / OOC: różnią się jasnością (wypełnienie kontra kontur), nie tylko barwą. */
.dt-znacznik { display: inline-flex; align-items: center; height: 1.5rem; padding: 0 .55rem; border-radius: .25rem;
    font-size: .6875rem; font-weight: 700; letter-spacing: .12em; line-height: 1; }
.dt-znacznik-ic { background: var(--dt-czerwien); color: #fff; }
.dt-znacznik-ooc { border: 1px solid rgba(255, 255, 255, .45); color: var(--dt-tekst); }
.bg-dark .dt-znacznik-ooc { border-color: rgba(255, 255, 255, .55); color: #fff; }

/* ------------------------------------------------------------ pas „20 lat” */
.dt-pas h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.dt-os { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; }
.dt-os li { flex: 1 1 12rem; border-top: 2px solid rgba(255, 255, 255, .6); padding-top: .75rem; color: #fff; }
.dt-os-data { display: block; font-family: var(--dt-cinzel); font-weight: 700; font-size: 1.5rem; }
.dt-os-opis { color: rgba(255, 255, 255, .9); }

/* ------------------------------------------------------- nagłówek podstrony */
.dt-naglowek-strony { background-image: radial-gradient(circle at 88% 0, rgba(163, 15, 15, .34), transparent 50%); }
.dt-naglowek-strony .breadcrumb { font-size: .85rem; --bs-breadcrumb-divider-color: rgba(255, 255, 255, .5);
    --bs-breadcrumb-item-active-color: rgba(255, 255, 255, .72); }
.dt-naglowek-strony .breadcrumb a { color: rgba(255, 255, 255, .85); }
.dt-naglowek-strony .breadcrumb a:hover, .dt-naglowek-strony .breadcrumb a:focus { color: #fff; }
.dt-naglowek-strony .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .5); }
/* Unify ma `.breadcrumb .breadcrumb-item { color: #0d0d0d }` — bez tego bieżąca strona znika na czerni. */
.dt-naglowek-strony .breadcrumb-item.active { color: rgba(255, 255, 255, .72); }
.dt-tytul { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); line-height: 1.15; margin-bottom: .75rem; }
.dt-naglowek-meta { font-size: .875rem; color: rgba(255, 255, 255, .72); }
.dt-blad-kod { font-family: var(--dt-cinzel); font-weight: 700; font-size: 3.5rem; color: var(--dt-czerwien-jasna); }

/* --------------------------------------------------------------------- treść */
.dt-tresc { font-size: 1.0625rem; line-height: 1.75; max-width: 46rem; }
.dt-tresc h2 { font-size: 1.6rem; margin: 2.5rem 0 1rem; scroll-margin-top: 6rem; }
.dt-tresc h3 { font-size: 1.25rem; margin: 1.75rem 0 .75rem; }
.dt-tresc table { width: 100%; margin: 1.5rem 0; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; }
.dt-tresc th, .dt-tresc td { border: 1px solid var(--dt-linia); padding: .5rem .75rem; vertical-align: top; }
.dt-tresc th { background: var(--dt-tlo-drugie); }
.dt-tresc a:not(.btn) { text-decoration: underline; text-underline-offset: .15em; }

.dt-cytat { margin: 2rem 0; padding: 1rem 1.5rem; border-left: 4px solid var(--dt-czerwien); background: var(--dt-tlo-drugie);
    border-radius: 0 .5rem .5rem 0; }
.dt-cytat blockquote { font-size: 1.15rem; font-style: italic; color: var(--dt-jasny); }
.dt-cytat figcaption { margin-top: .5rem; font-weight: 600; color: var(--dt-szary-cichy); }

.dt-blok-obraz { margin: 2rem 0; }
.dt-blok-obraz img { border: 1px solid var(--dt-linia); }
.dt-blok-obraz figcaption, .dt-film figcaption { font-size: .875rem; color: var(--dt-szary-cichy); margin-top: .5rem; }
.dt-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem; margin: 1.5rem 0; }
.dt-galeria img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: .5rem; }
.dt-galeria-tytul { font-weight: 600; margin-top: 2rem; }

.dt-wyroznienie { display: flex; gap: .9rem; border-radius: .75rem; padding: 1rem 1.25rem; margin: 1.5rem 0; }
.dt-wyroznienie > i { font-size: 1.3rem; line-height: 1.5; }
.dt-wyroznienie p:last-child { margin-bottom: 0; }
.dt-wyroznienie-informacja { background: var(--dt-tlo-drugie); }
.dt-wyroznienie-informacja > i { color: var(--dt-jasny); }
.dt-wyroznienie-wazne { background: var(--dt-czerwien-tlo); border-left: 4px solid var(--dt-czerwien); }
.dt-wyroznienie-wazne > i { color: var(--dt-czerwien-jasna); }

.dt-film { margin: 2rem 0; }
.dt-film-okladka { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0;
    background: var(--dt-czern); color: #fff; border-radius: .75rem; overflow: hidden; }
.dt-film-okladka img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.dt-film-play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 4.5rem; height: 4.5rem;
    display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--dt-czerwien); font-size: 2.25rem; }
.dt-film-okladka:hover .dt-film-play, .dt-film-okladka:focus-visible .dt-film-play { background: var(--dt-czerwien-ciemna); }
.dt-film-info { position: absolute; left: 1rem; bottom: .75rem; font-size: .8rem; background: rgba(0, 0, 0, .6); padding: .15rem .5rem; border-radius: .3rem; }
.dt-film iframe, .dt-film-wideo { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: .75rem; background: var(--dt-czern); }

.dt-spis { margin-top: 1.5rem; padding: 1rem 1.25rem; border-left: 3px solid var(--dt-czerwien); position: sticky; top: 6rem; }
.dt-spis-naglowek { font-weight: 700; margin-bottom: .5rem; }
.dt-spis ol { padding-left: 1.1rem; margin: 0; font-size: .92rem; }

.dt-sasiednie { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.dt-sasiedni { display: block; border: 1px solid var(--dt-linia); border-radius: .75rem; padding: 1rem 1.25rem; color: var(--dt-jasny); font-weight: 600; }
.dt-sasiedni:hover, .dt-sasiedni:focus { border-color: var(--dt-czerwien); color: var(--dt-czerwien-jasna); }
.dt-sasiedni span { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dt-szary-cichy); }
.dt-sasiedni-starszy { text-align: right; }
.dt-rss a { color: var(--dt-szary-cichy); }

/* -------------------------------------------------------------- formularz */
.dt-legenda { font-family: var(--dt-cinzel); font-weight: 700; font-size: 1.2rem; width: 100%; color: var(--dt-jasny);
    border-bottom: 1px solid var(--dt-linia); padding-bottom: .5rem; margin-bottom: 1.25rem; }
.dt-wymagane { color: var(--dt-czerwien-jasna); }
.dt-dolacz-wstep { color: var(--dt-szary-cichy); }
/* Pułapka na automaty: zwykłe pole tekstowe poza ekranem — NIE display:none i NIE HiddenInput
   (Aurora: boty to rozpoznają). Bez poziomego paska przewijania. */
.dt-pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dt-kontakt-uwaga { font-size: .8125rem; color: var(--dt-szary-cichy); }

/* ------------------------------------------------------------------- stopka */
/* Unify koloruje akapity na $paragraph-color (#0d0d0d) — w czarnej stopce byłyby niewidoczne. */
.dt-stopka p { color: rgba(255, 255, 255, .72); }
.dt-stopka { color: rgba(255, 255, 255, .72); }
.dt-stopka .text-cap { font-size: .75rem; }
.dt-stopka-zacheta { font-family: var(--dt-cinzel); font-weight: 700; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); color: #fff; }
.dt-stopka-zacheta span { display: block; font-family: Inter, sans-serif; font-weight: 400; font-size: 1rem; color: rgba(255, 255, 255, .72); letter-spacing: 0; }
.dt-marka-stopka img { height: 36px; }
.dt-stopka-opis { max-width: 26rem; }
.dt-stopka-prawa { font-size: .8125rem; color: rgba(255, 255, 255, .62); }
.dt-odwiedziny b { color: rgba(255, 255, 255, .88); font-weight: 600; }

/* ---------------------------------------------------------------- runy orcze
   Sprajt static/img/runy.svg (dane/runy/runy.py): <svg class="dt-runa"><use href="…#r-<klucz>">;
   kolor z `color`. Dekoracje to maski CSS: runy-fryz.svg, runy-kolumna.svg, runa-plemie(-mala).svg —
   kolor nadaje background-color, więc ten sam plik działa na czerni i na czerwieni (PLAN § 9). */
.dt-runa { display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: -.25em; }
.dt-orczy-tekst { font-family: var(--dt-cinzel); font-weight: 700; letter-spacing: .04em; }
abbr.dt-orczy { text-decoration: underline dotted rgba(255, 90, 79, .7); text-underline-offset: .2em; cursor: help; }

.dt-menu-runa { width: 1.05em; height: 1.05em; margin-right: .4rem; vertical-align: -.18em; color: var(--dt-czerwien-jasna); }
.dt-karta-ikona .dt-runa { width: 1.6rem; height: 1.6rem; }
.dt-przycisk-runa { width: 1.1em; height: 1.1em; margin-right: .45rem; vertical-align: -.2em; }

.dt-powitanie { font-family: var(--dt-cinzel); font-weight: 700; font-size: 1.15rem; color: var(--dt-czerwien-jasna); }
.dt-powitanie-tlum { font-family: Inter, sans-serif; font-weight: 400; font-size: .875rem; color: rgba(255, 255, 255, .66); }

/* Krąg runiczny wokół herbu (jak krąg Shadowmoon): pełny obrót w 150 s, pauza przyciskiem,
   poza ekranem stoi, przy reduced-motion nie rusza się wcale. */
.dt-herb { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: 0 auto; }
.dt-krag { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dt-krag-linia { fill: none; stroke: rgba(255, 90, 79, .45); stroke-width: 2; }
.dt-krag-cienka { stroke: rgba(255, 90, 79, .22); stroke-width: 1; }
.dt-krag-obrot { color: rgba(255, 90, 79, .78); transform-origin: 0 0; animation: dt-obrot 150s linear infinite; }
@keyframes dt-obrot { to { transform: rotate(360deg); } }
[data-animacja].dt-pauza .dt-krag-obrot, [data-animacja].dt-poza-ekranem .dt-krag-obrot { animation-play-state: paused; }
.dt-herb-obraz { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto; height: 60%;
    filter: drop-shadow(0 0 2.25rem rgba(163, 15, 15, .55)); }
.dt-okrzyk { font-size: 1.4rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dt-czerwien-jasna); margin-top: 1rem; }
.dt-okrzyk-tlum { font-size: .8125rem; color: rgba(255, 255, 255, .66); }
.dt-pauza-przycisk { display: inline-flex; align-items: center; gap: .4rem; min-height: 2rem; padding: .2rem .85rem;
    font-size: .75rem; color: rgba(255, 255, 255, .78); background: transparent; border: 1px solid rgba(255, 255, 255, .22); border-radius: 2rem; }
.dt-pauza-przycisk:hover, .dt-pauza-przycisk:focus-visible { color: #fff; border-color: var(--dt-czerwien-jasna); }

/* Kolumny run po bokach hero (monolit Warsongów) — tylko na szerokich ekranach. */
.dt-kolumna-run { display: none; position: absolute; top: 0; bottom: 0; width: 38px; background-color: rgba(255, 90, 79, .16);
    -webkit-mask: url("../img/runy-kolumna.1d219a413aac.svg") center top / 38px auto repeat-y;
    mask: url("../img/runy-kolumna.1d219a413aac.svg") center top / 38px auto repeat-y; pointer-events: none; }
.dt-kolumna-lewa { left: 1.75rem; }
.dt-kolumna-prawa { right: 1.75rem; -webkit-mask-position: center 160px; mask-position: center 160px; }
@media (min-width: 1200px) { .dt-kolumna-run { display: block; } }

/* Fryz — pas małych run między sekcjami. */
.dt-fryz { height: 18px; background-color: rgba(255, 90, 79, .3);
    -webkit-mask: url("../img/runy-fryz.73e707cdbb7a.svg") left center / auto 18px repeat-x;
    mask: url("../img/runy-fryz.73e707cdbb7a.svg") left center / auto 18px repeat-x; }
.dt-naglowek-strony .dt-fryz { margin-bottom: 1rem; }
.dt-stopka > .dt-fryz { margin-top: 1.25rem; }
.dt-fryz-pas { background-color: rgba(255, 255, 255, .24); margin: .9rem 0; }

/* Znak wodny „plemię” w sekcji na tle drugim. */
.dt-znak-wodny { position: relative; }
.dt-znak-wodny::before { content: ""; position: absolute; top: 50%; right: 0; width: min(340px, 55vw); aspect-ratio: 1;
    transform: translateY(-50%); background-color: rgba(255, 90, 79, .06); pointer-events: none;
    -webkit-mask: url("../img/runa-plemie.d1b995dd683b.svg") center / contain no-repeat; mask: url("../img/runa-plemie.d1b995dd683b.svg") center / contain no-repeat; }
.dt-znak-wodny > * { position: relative; }

.dt-licznik-runa { width: 1.1rem; height: 1.1rem; margin-right: .45rem; vertical-align: -.22em; color: var(--dt-czerwien-jasna); }
.dt-po-premierze { display: flex; gap: .85rem; align-items: center; color: #fff; font-size: 1.15rem; }
.dt-po-premierze-runa { width: 2.75rem; height: 2.75rem; color: var(--dt-czerwien-jasna); }

/* Śródtytuły z małą runą „plemię” i linią. */
.dt-tresc h2 { display: flex; align-items: center; gap: .65rem; }
.dt-tresc h2::before { content: ""; flex: none; width: 1.1em; height: 1.1em; background-color: var(--dt-czerwien-jasna);
    -webkit-mask: url("../img/runa-plemie-mala.23b6f3aa9a82.svg") center / contain no-repeat;
    mask: url("../img/runa-plemie-mala.23b6f3aa9a82.svg") center / contain no-repeat; }
.dt-tresc h2::after { content: ""; flex: 1 1 2rem; min-width: 2rem; height: 1px; background: var(--dt-linia); }

/* Pieczęć kroniki IC. */
.dt-pieczec { display: flex; align-items: center; gap: 1rem; margin: 3rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--dt-linia); }
.dt-pieczec-znak { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 4rem; height: 4rem;
    border: 2px solid var(--dt-czerwien); border-radius: 50%; color: var(--dt-czerwien-jasna);
    box-shadow: inset 0 0 0 4px var(--dt-tlo), inset 0 0 0 5px rgba(163, 15, 15, .35); }
.dt-pieczec-znak .dt-runa { width: 2.3rem; height: 2.3rem; }
.dt-pieczec figcaption { font-family: var(--dt-cinzel); font-weight: 700; color: var(--dt-jasny); }
.dt-pieczec-autor { display: block; font-family: Inter, sans-serif; font-weight: 400; font-size: .875rem; color: var(--dt-szary-cichy); }

/* Formularz „Dołącz”. */
.dt-legenda { display: flex; align-items: center; gap: .6rem; }
.dt-legenda-runa { width: 1.5rem; height: 1.5rem; color: var(--dt-czerwien-jasna); }
.dt-dziekujemy { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.5rem; border-radius: .75rem;
    background: var(--dt-tlo-drugie); border-left: 4px solid var(--dt-czerwien); }
.dt-dziekujemy-runa { width: 3.5rem; height: 3.5rem; color: var(--dt-czerwien-jasna); }
.dt-dziekujemy-tlum { color: var(--dt-szary-cichy); font-style: italic; margin-bottom: .5rem; }

/* Rozdroże „Dołącz” i drogi gościa w „Moim koncie” (PLAN § 17). */
.dt-droga { border-top: 4px solid var(--dt-czerwien); }
.dt-droga-naglowek { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.5rem; }
.dt-droga-runa { flex: none; width: 3rem; height: 3rem; color: var(--dt-czerwien-jasna); }
.dt-droga-lead { color: var(--dt-szary-cichy); }
.dt-droga-lead strong { color: var(--dt-jasny); }
.dt-kroki { margin-bottom: 1.5rem; }
.dt-kroki .step-title { font-size: 1rem; margin-bottom: .15rem; }
.dt-kroki .step-text { font-size: .875rem; color: var(--dt-szary-cichy); }
.dt-droga-stan { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--dt-jasny); }
.dt-droga-stan-runa { flex: none; width: 1.5rem; height: 1.5rem; color: var(--dt-czerwien-jasna); }

/* Podania na stronie oficera. */
.dt-podanie-dane { display: grid; grid-template-columns: max-content 1fr; column-gap: 1rem; }
.dt-podanie-dane dd { margin-bottom: .35rem; overflow-wrap: anywhere; }
.dt-podanie-dane dt { padding-top: .15rem; }
.dt-podanie-tekst { white-space: normal; overflow-wrap: anywhere; }

/* 404: runa „podróż” w przerwanym kręgu. */
.dt-zgubiona { position: relative; width: 8rem; height: 8rem; margin: 0 auto; color: var(--dt-czerwien-jasna); }
.dt-zgubiona-tlo { position: absolute; inset: 0; width: 100%; height: 100%; }
.dt-zgubiona-krag { fill: none; stroke: rgba(255, 90, 79, .6); stroke-width: 3; stroke-dasharray: 250 90; transform: rotate(-60deg); }
.dt-zgubiona-runa { position: absolute; left: 50%; top: 50%; width: 4rem; height: 4rem; transform: translate(-50%, -50%); }
.dt-blad-numer { font-size: .45em; color: rgba(255, 255, 255, .55); letter-spacing: .1em; }

/* Słowniczek orczy. */
.dt-slowniczek { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.dt-slowo { border: 1px solid var(--dt-linia); border-top: 3px solid var(--dt-czerwien); border-radius: .75rem; padding: 1rem 1.25rem; }
.dt-slowo dt { font-size: 1.2rem; color: var(--dt-jasny); margin-bottom: .25rem; }
.dt-slowo dd { margin: 0; }
.dt-slowo-znaczenie { display: block; font-weight: 600; }
.dt-slowo-uwaga { display: block; font-size: .875rem; color: var(--dt-szary-cichy); }
.dt-slowo-zrodlo { display: inline-block; margin-top: .4rem; padding: 0 .4rem; font-size: .6875rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--dt-szary-cichy); border: 1px solid var(--dt-linia); border-radius: .25rem; }

/* Stopka: motto runami i runa dnia. */
.dt-motto { display: flex; gap: 1rem; align-items: center; }
.dt-motto-znak .dt-runa { width: 3rem; height: 3rem; color: var(--dt-czerwien-jasna); }
.dt-motto-runy { display: flex; gap: .35rem; color: rgba(255, 255, 255, .85); margin-bottom: .2rem; }
.dt-motto-runy .dt-runa { width: 1.5rem; height: 1.5rem; }
.dt-motto-tekst { display: block; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.dt-runa-dnia { display: flex; gap: .9rem; align-items: center; }
.dt-runa-dnia-znak { width: 3rem; height: 3rem; color: var(--dt-czerwien-jasna); }
.dt-runa-dnia-nazwa { display: block; font-family: var(--dt-cinzel); font-weight: 700; font-size: 1.1rem; color: #fff; }
.dt-runa-dnia-opis { display: block; font-size: .75rem; color: rgba(255, 255, 255, .58); }

/* ------------------------------------------------- konto i karty postaci (PLAN § 10) */
.dt-konto-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .875rem; white-space: nowrap; color: rgba(255, 255, 255, .85); }
.dt-konto-link:hover, .dt-konto-link:focus { color: #fff; }
.dt-naglowek-konta { padding-top: 2.5rem; }
.dt-konto-karta { max-width: 34rem; margin-top: -1.5rem; }
.dt-konto-runa { width: 3.5rem; height: 3.5rem; color: var(--dt-czerwien-jasna); margin-bottom: .75rem; }
.dt-konto-opis, .dt-konto-uwaga { color: var(--dt-szary-cichy); }
.dt-konto-uwaga { font-size: .8125rem; }
.dt-szczegoly summary { cursor: pointer; color: var(--dt-szary-cichy); font-size: .875rem; }
.dt-szczegoly summary:hover, .dt-szczegoly summary:focus-visible { color: var(--dt-jasny); }
.dt-konto-panel + .dt-konto-panel { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--dt-linia); }
.dt-konto-obraz { max-width: 220px; border: 1px solid var(--dt-linia); border-radius: .5rem; padding: .5rem; background: var(--dt-karta); }
.dt-konto-boczne .card-body { padding: 1.5rem; }
.dt-konto-dane dt { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dt-szary-cichy); }
.dt-konto-dane dd { margin-bottom: .75rem; }
.dt-konto-usun { font-size: .875rem; color: var(--dt-czerwien-jasna); }

.dt-moje-postacie { display: grid; gap: .75rem; }
.dt-moja-postac { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; border: 1px solid var(--dt-linia); border-radius: .75rem; }
.dt-moja-postac-znak { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 64px; height: 80px;
    border-radius: .5rem; overflow: hidden; background: var(--dt-czern); color: var(--dt-czerwien-jasna); }
.dt-moja-postac-znak img { width: 100%; height: 100%; object-fit: cover; }
.dt-moja-postac-znak .dt-runa { width: 2.25rem; height: 2.25rem; }
.dt-moja-postac-opis { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.dt-moja-postac-imie { font-family: var(--dt-cinzel); font-weight: 700; font-size: 1.1rem; color: var(--dt-jasny); }
.dt-moja-postac-akcje { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
@media (max-width: 575.98px) { .dt-moja-postac { flex-wrap: wrap; } .dt-moja-postac-akcje { justify-content: flex-start; } }

.dt-karta-postaci { overflow: hidden; }
.dt-karta-postaci-portret { position: relative; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 40%, #2a0b0b, var(--dt-czern) 70%); color: var(--dt-czerwien-jasna); }
.dt-karta-postaci-portret img { width: 100%; height: 100%; object-fit: cover; }
.dt-karta-postaci-runa { width: 40%; height: 40%; opacity: .85; }
.dt-karta-postaci-glowna { position: absolute; left: .75rem; top: .75rem; padding: .1rem .55rem; border-radius: .25rem;
    background: var(--dt-czerwien); color: #fff; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dt-karta-postaci-cytat { font-style: italic; color: var(--dt-tekst); font-size: .9375rem; }
.dt-karta-postaci:focus-within { outline: 3px solid #e53935; outline-offset: 2px; }
.dt-karta-postaci:focus-within a:focus-visible { outline: none; }
.dt-ranga-naglowek { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.5rem; padding-bottom: .75rem; border-bottom: 1px solid var(--dt-linia); }
.dt-ranga-runa { width: 2.5rem; height: 2.5rem; color: var(--dt-czerwien-jasna); }

.dt-postac-portret { aspect-ratio: 4 / 5; border-radius: .75rem; overflow: hidden; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 40%, #2a0b0b, var(--dt-czern) 70%); color: var(--dt-czerwien-jasna); }
.dt-postac-portret img { width: 100%; height: 100%; object-fit: cover; }
.dt-postac-runa { width: 45%; height: 45%; }
.dt-postac-dane { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0; }
.dt-postac-dane dt { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dt-szary-cichy); padding-top: .15rem; }
.dt-postac-dane dd { margin: 0; }
.dt-postac-dane-runa { width: 1.1em; height: 1.1em; margin-right: .35rem; color: var(--dt-czerwien-jasna); }
.dt-rzemiosla { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .4rem 1.5rem; }

/* ------------------------------------------------------ wydarzenia i zapisy (PLAN § 11) */
.dt-wydarzenia-pasek { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.dt-filtr { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.dt-filtr .list-inline-item { margin: 0; }
.dt-filtr-link { display: inline-block; padding: .2rem .65rem; border: 1px solid var(--dt-linia); border-radius: 2rem; font-size: .8125rem; color: var(--dt-tekst); }
.dt-filtr-link:hover, .dt-filtr-link:focus { border-color: var(--dt-czerwien); color: var(--dt-czerwien-jasna); }
.dt-filtr-aktywny { background: var(--dt-czerwien); border-color: var(--dt-czerwien); color: #fff; }
.dt-filtr-aktywny:hover, .dt-filtr-aktywny:focus { color: #fff; }

.dt-wydarzenia { display: grid; gap: .75rem; }
.dt-wydarzenie { position: relative; display: flex; align-items: center; gap: 1.25rem; padding: 1rem 1.25rem; background: var(--dt-karta);
    border: 1px solid var(--dt-linia); border-left: 4px solid var(--dt-czerwien); border-radius: .75rem; }
.dt-wydarzenie:focus-within { outline: 3px solid #e53935; outline-offset: 2px; }
.dt-wydarzenie:focus-within a:focus-visible { outline: none; }
.dt-wydarzenie-data { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 4.25rem; height: 4.25rem;
    border-radius: .5rem; background: var(--dt-czern); color: #fff; line-height: 1; }
.dt-wydarzenie-dzien { font-family: var(--dt-cinzel); font-weight: 700; font-size: 1.6rem; }
.dt-wydarzenie-miesiac { margin-top: .2rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dt-czerwien-jasna); }
.dt-wydarzenie-opis { flex: 1 1 auto; min-width: 0; }
.dt-wydarzenie-rodzaj { display: flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--dt-szary-cichy); }
.dt-wydarzenie-runa { width: 1.1rem; height: 1.1rem; color: var(--dt-czerwien-jasna); }
.dt-wydarzenie-stan { padding: .05rem .45rem; border-radius: .25rem; background: var(--dt-czerwien); color: #fff; }
.dt-wydarzenie-licznik { display: flex; flex-direction: column; align-items: center; flex: none; min-width: 4rem; text-align: center; }
.dt-wydarzenie-liczba { font-family: var(--dt-cinzel); font-weight: 700; font-size: 1.5rem; color: var(--dt-jasny); line-height: 1.1; }
.dt-wydarzenie-limit { font-size: .9rem; color: var(--dt-szary-cichy); }
.dt-wydarzenie-podpis { font-size: .75rem; color: var(--dt-szary-cichy); }
.dt-wydarzenie-odwolane { border-left-color: var(--dt-linia); background: var(--dt-tlo-drugie); }
.dt-wydarzenie-odwolane .dt-wydarzenie-data { background: #3a3a3a; }
.dt-wydarzenie-odwolane .dt-karta-link { text-decoration: line-through; color: var(--dt-szary-cichy); }
@media (max-width: 575.98px) {
    .dt-wydarzenie { gap: .9rem; padding: .85rem; }
    .dt-wydarzenie-data { width: 3.5rem; height: 3.5rem; }
    .dt-wydarzenie-licznik { display: none; }
}
.dt-czas-lokalny { color: var(--dt-szary-cichy); }

.dt-kalendarz { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.5rem; border-radius: .75rem; background: var(--dt-tlo-drugie); }
.dt-kalendarz-runa { flex: none; width: 3rem; height: 3rem; color: var(--dt-czerwien-jasna); }
.dt-kalendarz-adres { flex: 1 1 16rem; min-width: 0; font-size: .8125rem; background: var(--dt-karta); }
@media (max-width: 575.98px) { .dt-kalendarz { flex-direction: column; gap: .75rem; padding: 1.25rem; } }

.dt-sklad-rola { display: flex; align-items: baseline; gap: .5rem; font-family: inherit; font-size: .8125rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--dt-szary-cichy); margin-bottom: .75rem; }
.dt-sklad-rola span { color: var(--dt-czerwien-jasna); }
.dt-zapisy { display: grid; gap: .5rem; padding-left: 0; }
.dt-zapisy-rezerwa { list-style: none; counter-reset: rezerwa; }
.dt-zapisy-rezerwa .dt-zapis::before { counter-increment: rezerwa; content: counter(rezerwa) "."; flex: none; width: 1.25rem;
    font-weight: 700; color: var(--dt-szary-cichy); }
.dt-zapis { display: flex; align-items: flex-start; gap: .6rem; }
.dt-zapis-runa { flex: none; width: 1.75rem; height: 1.75rem; padding: .3rem; border-radius: .4rem; background: var(--dt-czern); color: var(--dt-czerwien-jasna); }
.dt-zapis-opis { display: flex; flex-direction: column; min-width: 0; }
.dt-zapis-imie { font-weight: 600; color: var(--dt-jasny); }
a.dt-zapis-imie:hover, a.dt-zapis-imie:focus { color: var(--dt-czerwien-jasna); }
.dt-zapis-uwaga { font-size: .8125rem; font-style: italic; color: var(--dt-tekst); }
.dt-moj-zapis { padding: .65rem .85rem; border-radius: .5rem; background: var(--dt-tlo-drugie); font-size: .9375rem; }
.dt-moj-zapis-sklad { background: var(--dt-czerwien-tlo); color: var(--dt-czerwien-jasna); font-weight: 600; }

/* ------------------------------------- historia, weterani, legenda, galeria (PLAN § 12) */
.dt-os-epoka + .dt-os-epoka { margin-top: 3rem; }
.dt-os-epoka-tytul { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.dt-os-epoka-runa { width: 2.25rem; height: 2.25rem; color: var(--dt-czerwien-jasna); }
.dt-os-punkty { position: relative; margin: 0 0 0 1.1rem; padding-left: 2rem; border-left: 2px solid var(--dt-linia); }
.dt-os-punkt { position: relative; max-width: 46rem; }
.dt-os-punkt + .dt-os-punkt { margin-top: 2rem; }
.dt-os-znacznik { position: absolute; left: calc(-2rem - 7px); top: .3rem; width: 12px; height: 12px; border-radius: 50%;
    background: var(--dt-tlo); border: 3px solid var(--dt-czerwien); }
.dt-os-punkt-wazny .dt-os-znacznik { left: calc(-2rem - 19px); top: -.15rem; width: 36px; height: 36px; border: 0; padding: 7px;
    background: var(--dt-czern); color: var(--dt-czerwien-jasna); display: flex; }
.dt-os-znacznik .dt-runa { width: 100%; height: 100%; }
.dt-os-data { margin-bottom: .2rem; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dt-czerwien-jasna); }
.dt-os-tytul { font-size: 1.25rem; margin-bottom: .4rem; }
.dt-os-punkt-wazny .dt-os-tytul { font-size: 1.5rem; }
.dt-os-opis p:last-child { margin-bottom: 0; }
.dt-os-zrzut { display: inline-block; margin-top: .75rem; max-width: 22rem; border-radius: .5rem; overflow: hidden; }
.dt-os-zrzut img { display: block; width: 100%; height: auto; }

.dt-weteran-naglowek { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.dt-weteran-naglowek .dt-zapis-runa { width: 2.5rem; height: 2.5rem; padding: .45rem; display: inline-flex; }
.dt-weteran-naglowek .dt-runa { width: 100%; height: 100%; }
.dt-weteran-wspomnienie { padding-left: .9rem; border-left: 3px solid var(--dt-czerwien); font-style: italic; color: var(--dt-tekst); }
.dt-weteran-wspomnienie p:last-child { margin-bottom: 0; }

.dt-hierarchia-lista { display: grid; gap: 1rem; margin: 0; }
.dt-hierarchia-ranga { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--dt-linia); border-radius: .75rem; }
.dt-hierarchia-znak { display: inline-flex; flex: none; width: 3rem; height: 3rem; padding: .55rem; border-radius: .5rem;
    background: var(--dt-czern); color: var(--dt-czerwien-jasna); }
.dt-hierarchia-znak .dt-runa { width: 100%; height: 100%; }

.dt-album { overflow: hidden; }
.dt-album:focus-within { outline: 3px solid #e53935; outline-offset: 2px; }
.dt-album:focus-within a:focus-visible { outline: none; }
.dt-album-okladka { position: relative; aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 40%, #2a0b0b, var(--dt-czern) 70%); color: var(--dt-czerwien-jasna); }
.dt-album-okladka img { width: 100%; height: 100%; object-fit: cover; }
.dt-album-runa { width: 30%; height: 30%; opacity: .85; }
.dt-album-epoka { position: absolute; left: .75rem; top: .75rem; padding: .1rem .55rem; border-radius: .25rem; background: rgba(13, 13, 13, .8);
    color: #fff; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dt-zrzuty { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.dt-zrzut a { display: block; border-radius: .5rem; overflow: hidden; background: var(--dt-czern); }
.dt-zrzut img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: opacity .2s; }
.dt-zrzut a:hover img, .dt-zrzut a:focus img { opacity: .85; }
.dt-zrzut figcaption { margin-top: .4rem; font-size: .8125rem; color: var(--dt-tekst); }
.dt-zrzut-autor { display: block; color: var(--dt-szary-cichy); }
@media (max-width: 575.98px) { .dt-zrzuty { grid-template-columns: 1fr 1fr; gap: .75rem; } }
.dt-moje-zrzuty { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.25rem; }
.dt-moj-zrzut img { display: block; width: 100%; height: auto; border-radius: .5rem; aspect-ratio: 3 / 2; object-fit: cover; }
.dt-moj-zrzut figcaption { margin-top: .5rem; }
.dt-moj-zrzut-akcje { display: flex; gap: .4rem; margin-top: .5rem; }

/* ------------------------------------------------------ rajdy, DKP, ankiety (PLAN § 13) */
.dt-btn-mini { padding: .15rem .5rem; font-size: .75rem; }
.dt-decyzja { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
.dt-podsumowanie { padding: 1rem 1.25rem; border-radius: .75rem; background: var(--dt-tlo-drugie); }
.dt-podsumowanie-rola { padding: .15rem .6rem; margin-bottom: .35rem; border: 1px solid var(--dt-linia); border-radius: 2rem; background: var(--dt-karta); font-size: .875rem; }
.dt-podsumowanie-brak { font-weight: 600; color: var(--dt-czerwien-jasna); }
.dt-oficer { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem 1rem; border: 1px dashed var(--dt-czerwien);
    border-radius: .75rem; background: var(--dt-czerwien-tlo); }
.dt-oficer-etykieta { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dt-czerwien-jasna); margin-right: .25rem; }
.dt-tabela { font-size: .9375rem; }
/* Napis `visually-hidden` (position: absolute) w ostatniej kolumnie liczył się do szerokości STRONY,
   bo jego blok zawierający leżał poza przewijaną ramką — na telefonie strona jechała w bok. */
.table-responsive { position: relative; }
.dt-tabela thead th { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dt-szary-cichy); }
/* Kolory jakości jak w grze; rzadki i epicki rozjaśnione do kontrastu 4.5:1 na karcie. */
.dt-przedmiot { font-weight: 600; }
.dt-jakosc-niezwykly { color: #1eff00; }
.dt-jakosc-rzadki { color: #4da3ff; }
.dt-jakosc-epicki { color: #b875f5; }
.dt-jakosc-legendarny { color: #ff8000; }
a.dt-przedmiot:hover, a.dt-przedmiot:focus { text-decoration: underline; }
.dt-ankieta { display: grid; gap: .75rem; }
.dt-ankieta-opcja { padding: .75rem 1rem; border: 1px solid var(--dt-linia); border-radius: .75rem; }
.dt-ankieta-moja { border-color: var(--dt-czerwien); }
.dt-ankieta-pasek { display: block; height: .5rem; margin: .4rem 0; border-radius: .25rem; background: var(--dt-tlo-drugie); overflow: hidden; }
.dt-ankieta-pasek span { display: block; height: 100%; background: var(--dt-czerwien); }

/* ------------------------------------------------------------------ forum (PLAN § 14) */
.dt-menu-licznik { margin-left: .3rem; font-size: .6875rem; vertical-align: .1em; }
.dt-forum-pasek { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1.5rem; }
.dt-forum-szukaj { display: flex; gap: .4rem; min-width: min(100%, 18rem); }
.dt-forum-uwaga { padding: .75rem 1rem; border-radius: .75rem; background: var(--dt-tlo-drugie); color: var(--dt-tekst); }
.dt-forum-dla { padding: .05rem .45rem; border: 1px solid var(--dt-linia); border-radius: .25rem; font-size: .6875rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--dt-szary-cichy); vertical-align: .15em; }
.dt-dzialy, .dt-watki { display: grid; gap: .75rem; margin: 0; }
.dt-dzial { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--dt-linia); border-radius: .75rem; }
.dt-dzial-nowy, .dt-watek-nowy { border-left: 4px solid var(--dt-czerwien); }
.dt-dzial-znak { display: inline-flex; flex: none; width: 3rem; height: 3rem; padding: .55rem; border-radius: .5rem;
    background: var(--dt-czern); color: var(--dt-czerwien-jasna); }
.dt-dzial-znak .dt-runa { width: 100%; height: 100%; }
.dt-dzial-opis { min-width: 0; }
.dt-watek { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; border: 1px solid var(--dt-linia); border-radius: .75rem; }
.dt-watek-tytul { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dt-watek-ikona { color: var(--dt-szary-cichy); margin-right: .2rem; }
.dt-watek-liczba { flex: none; font-size: .875rem; color: var(--dt-szary-cichy); white-space: nowrap; }
.dt-posty { display: grid; gap: 1.25rem; }
.dt-post { display: grid; grid-template-columns: 10rem 1fr; gap: 1.25rem; padding: 1.25rem; border: 1px solid var(--dt-linia); border-radius: .75rem;
    scroll-margin-top: 6rem; }
.dt-post-nowy { border-left: 4px solid var(--dt-czerwien); }
.dt-post-ukryty { background: var(--dt-tlo-drugie); }
.dt-post-autor { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; overflow-wrap: anywhere; }
.dt-post-portret { display: block; width: 5rem; height: 6.25rem; border-radius: .5rem; object-fit: cover; background: var(--dt-czern); }
.dt-post-runa { display: inline-flex; padding: 1.25rem .9rem; color: var(--dt-czerwien-jasna); }
.dt-post-runa .dt-runa { width: 100%; height: 100%; }
.dt-post-podpis { font-weight: 700; color: var(--dt-jasny); }
.dt-post-tresc { min-width: 0; }
.dt-post-meta { margin-bottom: .75rem; }
.dt-post-html { overflow-wrap: anywhere; }
.dt-post-html p:last-child { margin-bottom: 0; }
.dt-post-html blockquote { margin: 0 0 1rem; padding: .5rem 1rem; border-left: 3px solid var(--dt-czerwien); background: var(--dt-tlo-drugie); }
.dt-post-html blockquote p { margin-bottom: .5rem; }
.dt-post-html pre { padding: .75rem 1rem; border-radius: .5rem; background: var(--dt-tlo-drugie); white-space: pre-wrap; }
.dt-post-uwaga { font-size: .875rem; font-style: italic; color: var(--dt-szary-cichy); }
.dt-post-obrazy { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; max-width: 40rem; margin-top: 1rem; }
.dt-post-obrazy a { display: block; border-radius: .5rem; overflow: hidden; background: var(--dt-czern); }
.dt-post-obrazy img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.dt-post-akcje { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: 1rem; }
.dt-post-akcje form { display: inline; }
/* Spoiler: zakryty do kliknięcia (forum.js); bez skryptu odsłania go najechanie. */
.dt-spoiler { padding: 0 .2rem; border-radius: .25rem; background: #3a3a3a; color: transparent; cursor: pointer; }
.dt-spoiler a, .dt-spoiler * { color: transparent; }
.dt-spoiler:hover, .dt-spoiler:focus-visible, .dt-spoiler-odkryty { background: var(--dt-tlo-drugie); color: inherit; cursor: auto; }
.dt-spoiler:hover *, .dt-spoiler:focus-visible *, .dt-spoiler-odkryty * { color: inherit; }
.dt-spoiler-odkryty a { color: var(--dt-czerwien-jasna); }
.dt-forum-narzedzia { display: flex; flex-wrap: wrap; gap: .15rem; margin-bottom: .35rem; }
.dt-forum-narzedzia .btn { font-size: 1rem; line-height: 1; padding: .45rem .55rem; color: var(--dt-tekst); }
.dt-forum-narzedzia[hidden] { display: none; }
.dt-forum-pole { min-height: 10rem; }
.dt-forum-usun-obrazy { display: flex; flex-wrap: wrap; gap: .75rem; }
.dt-forum-usun-obraz { display: flex; align-items: center; gap: .4rem; }
.dt-forum-usun-obraz img { border-radius: .35rem; object-fit: cover; }
.dt-forum-usun-obraz ul, .dt-forum-usun-obrazy ul { list-style: none; padding: 0; }
.dt-forum-podglad { padding: .75rem 1rem; border-left: 3px solid var(--dt-linia); background: var(--dt-tlo-drugie); }
@media (max-width: 575.98px) {
    .dt-post { grid-template-columns: 1fr; gap: .75rem; padding: 1rem; }
    .dt-post-autor { flex-direction: row; align-items: center; }
    .dt-post-portret { width: 3rem; height: 3.75rem; }
    .dt-post-runa { padding: .6rem .45rem; }
}

/* Na telefonie krąg stoi (bateria, ruch przy przewijaniu kciukiem) — PLAN § 9 R2. */
@media (max-width: 991.98px) {
    .dt-krag-obrot { animation: none; }
    .dt-pauza-przycisk { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dt-krag-obrot { animation: none; }
    .dt-pauza-przycisk { display: none; }
    .card-transition, .card-transition:hover, .card-transition:focus { transform: none !important; transition: none !important; }
    .dt-zrzut img { transition: none; }
    html { scroll-behavior: auto; }
}

/* ------------------------------------- ikony z gry, kafle, kolory klas (PLAN § 15) */
/* Ikony Blizzarda z dane/gra/ikony.py: kwadrat w ciemnej ramce, jak w grze. */
.dt-ikona-gry { display: inline-block; border-radius: .2rem; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); background: #000; }
.dt-ikona-tekst { width: 1.25em; height: 1.25em; margin-right: .3em; vertical-align: -.3em; }
.dt-ikona-duza { width: 1.75rem; height: 1.75rem; margin-right: .5rem; vertical-align: middle; }
.dt-postac-dane dd { display: flex; align-items: center; flex-wrap: wrap; }
.dt-profesje { display: grid; gap: .4rem; }
.dt-profesje li { display: flex; align-items: center; }

/* Kolory klas z gry — ramki portretów i znaków; imiona postaci (`.dt-imie`, PLAN § 24 W2) tymi samymi
   kolorami, a gdzie kolor z gry ma na karcie mniej niż 4,5 : 1 — jaśniejszy `--dt-klasa-tekst`
   (Shaman, Death Knight). Pilnuje `test_panel_gracza.KontrastTests`. */
.dt-klasa-wojownik { --dt-klasa: #c69b6d; }
.dt-klasa-paladyn { --dt-klasa: #f48cba; }
.dt-klasa-lowca { --dt-klasa: #aad372; }
.dt-klasa-lotrzyk { --dt-klasa: #fff468; }
.dt-klasa-kaplan { --dt-klasa: #ffffff; }
.dt-klasa-szaman { --dt-klasa: #0070dd; --dt-klasa-tekst: #3d9bff; }
.dt-klasa-mag { --dt-klasa: #3fc7eb; }
.dt-klasa-czarnoksieznik { --dt-klasa: #8788ee; }
.dt-klasa-druid { --dt-klasa: #ff7c0a; }
.dt-klasa-rycerz_smierci { --dt-klasa: #c41e3a; --dt-klasa-tekst: #ec5f74; }
.dt-klasa-mnich { --dt-klasa: #00ff98; }
.dt-imie { color: var(--dt-klasa-tekst, var(--dt-klasa, var(--dt-jasny))); font-weight: 600; }
a.dt-imie:hover, a.dt-imie:focus { color: var(--dt-klasa-tekst, var(--dt-klasa, var(--dt-jasny))); text-decoration: underline; }

/* Miejsce portretu: ramka w kolorze klasy i ikona klasy w rogu (decyzja 2026-10-23). */
.dt-karta-postaci-portret { border-bottom: 4px solid var(--dt-klasa, var(--dt-czern)); }
.dt-postac-portret { position: relative; border: 3px solid var(--dt-klasa, var(--dt-czern)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.dt-moja-postac-znak { position: relative; border: 2px solid var(--dt-klasa, var(--dt-czern)); }
.dt-odznaka-klasy { position: absolute; right: .6rem; bottom: .6rem; display: block; width: 2.25rem; height: 2.25rem;
    border: 2px solid var(--dt-klasa, #000); border-radius: .35rem; overflow: hidden; background: #000; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.dt-odznaka-klasy .dt-ikona-gry { display: block; width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.dt-postac-portret .dt-odznaka-klasy { width: 3rem; height: 3rem; }
.dt-moja-postac-znak .dt-odznaka-klasy, .dt-post-znak .dt-odznaka-klasy { right: -.35rem; bottom: -.35rem; width: 1.6rem; height: 1.6rem; }
.dt-post-znak { position: relative; display: block; flex: none; }
@media (max-width: 575.98px) { .dt-post-znak .dt-odznaka-klasy { right: -.3rem; bottom: -.3rem; width: 1.25rem; height: 1.25rem; border-width: 1px; } }
.dt-post-znak .dt-post-portret { border: 2px solid var(--dt-klasa, var(--dt-czern)); }
.dt-zapis-znak { flex: none; width: 1.75rem; height: 1.75rem; border: 2px solid var(--dt-klasa, var(--dt-czern)); border-radius: .4rem; overflow: hidden; background: #000; }
.dt-zapis-znak .dt-ikona-gry { display: block; width: 100%; height: 100%; border-radius: 0; box-shadow: none; }

/* Poziom postaci jak w ramce postaci w grze: liczba w kółku w prawym górnym rogu portretu. */
.dt-odznaka-poziomu { position: absolute; right: .6rem; top: .6rem; display: inline-flex; align-items: center; justify-content: center;
    min-width: 2rem; height: 2rem; padding: 0 .35rem; border: 2px solid #c8a24a; border-radius: 1rem; background: #0d0d0d;
    color: #f4d58d; font-size: .8125rem; font-weight: 700; line-height: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.dt-moja-postac-znak .dt-odznaka-poziomu, .dt-post-znak .dt-odznaka-poziomu { right: -.4rem; top: -.4rem; min-width: 1.45rem; height: 1.45rem;
    padding: 0 .2rem; border-width: 1px; font-size: .6875rem; }
.dt-poziom { margin-left: .4rem; font-size: .8125rem; font-weight: 700; color: var(--dt-szary-cichy); }

/* Skład plemienia i profesje na stronie Członkowie (PLAN § 16). */
.dt-sklad .dt-filtr-link .dt-ikona-gry { margin-right: .3em; }
.dt-filtr-ile { display: inline-block; min-width: 1.25rem; margin-left: .15rem; font-weight: 700; color: var(--dt-czerwien-jasna); text-align: center; }
.dt-filtr-aktywny .dt-filtr-ile { color: #fff; }
.dt-profesja-lista li { display: flex; justify-content: space-between; gap: .75rem; padding: .2rem 0; border-bottom: 1px solid var(--dt-linia); font-size: .9375rem; }
.dt-profesja-lista li:last-child { border-bottom: 0; }

/* „Co nowego w plemieniu” na stronie głównej (PLAN § 16). */
.dt-nowosci li { display: flex; flex-direction: column; padding: .55rem 0; border-bottom: 1px solid var(--dt-linia); }
.dt-nowosci li:last-child { border-bottom: 0; }
.dt-nowosci .dt-nowosci-postac { flex-direction: row; align-items: center; gap: .6rem; }
.dt-nowosci-postac > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.dt-nowosci-tytul { font-weight: 600; color: var(--dt-jasny); }
a.dt-nowosci-tytul:hover, a.dt-nowosci-tytul:focus { color: var(--dt-czerwien-jasna); }

/* BattleTag: wielkość liter ma znaczenie — bez Cinzela (wersaliki). */
.dt-battletag { font-family: inherit; font-size: 1rem; }
.dt-konto-uwaga .dt-battletag { font-size: inherit; font-weight: 600; color: var(--dt-jasny); }

/* Kafle wyboru rasy i klasy (apps/core/gra.py): przycisk schowany, ale dalej w kolejności tabulacji. */
.dt-pole-kafle legend { float: none; font-size: inherit; }
.dt-kafle { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: .5rem; }
.dt-kafel { position: relative; }
.dt-kafel-wejscie { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }
.dt-kafel-etykieta { display: flex; flex-direction: column; align-items: center; gap: .4rem; height: 100%; padding: .65rem .35rem .55rem;
    border: 1px solid var(--dt-linia); border-radius: .5rem; background: var(--dt-karta); color: var(--dt-jasny);
    font-size: .8125rem; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.dt-kafel-etykieta .dt-ikona-gry { width: 2.75rem; height: 2.75rem; }
.dt-kafel-etykieta:hover { border-color: var(--dt-czerwien); }
.dt-kafel-wejscie:checked + .dt-kafel-etykieta { border-color: var(--dt-czerwien); background: var(--dt-czerwien-tlo); box-shadow: inset 0 0 0 1px var(--dt-czerwien); }
.dt-kafel-wejscie:focus-visible + .dt-kafel-etykieta { outline: 3px solid #e53935; outline-offset: 2px; }
.dt-kafel-wejscie.is-invalid + .dt-kafel-etykieta { border-color: var(--bs-danger, #dc3545); }
.dt-kafel-wejscie:disabled + .dt-kafel-etykieta { opacity: .35; cursor: not-allowed; border-style: dashed; }
.dt-kafel-wejscie:disabled + .dt-kafel-etykieta:hover { border-color: var(--dt-linia); }
.dt-kafel-wejscie:disabled + .dt-kafel-etykieta .dt-ikona-gry { filter: grayscale(1); }
.dt-kafel-pusty { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: .2rem;
    background: var(--dt-tlo-drugie); color: var(--dt-szary-cichy); font-size: 1.25rem; }
@media (prefers-reduced-motion: reduce) { .dt-kafel-etykieta { transition: none; } }
.dt-kafle-naglowek { grid-column: 1 / -1; margin: .35rem 0 0; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dt-szary-cichy); }
.dt-kafle-podpowiedz { grid-column: 1 / -1; margin: 0; font-size: .875rem; color: var(--dt-szary-cichy); }
.dt-kafel[hidden], .dt-kafle-naglowek[hidden] { display: none; }
.dt-profesja-wybor { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.dt-poziom-profesji { width: 5.5rem; flex: none; }
.dt-profesje-grupa { margin: .25rem 0 .35rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dt-szary-cichy); }
.dt-rzemiosla .form-check-label .dt-ikona-gry { margin-right: .4em; }

/* ------------------------------------- układ panelu „Moje konto” (PLAN § 23.3, zwarty — § 27) */
/* Na całą szerokość okna z marginesem, najwyżej 1800 px. Nawigacja u góry: pasek grup z rozwijanymi kolumnami
   (wzór: menu Wowhead), zwarty nagłówek, zakładki sekcji grupy. Kolejność na ekranie robi `order` — w HTML
   nawigacja stoi przed nagłówkiem (oficer/_menu.html), bo nagłówek to osobny blok szablonu. */
.dt-panel-kontener { width: 100%; max-width: 1800px; margin-right: auto; margin-left: auto;
    padding-right: clamp(1rem, 2.5vw, 2.5rem); padding-left: clamp(1rem, 2.5vw, 2.5rem); }
.dt-panel-gora { display: flex; flex-direction: column; }
.dt-panel-nawigacja { display: contents; }
.dt-pasek { order: 1; background: #0b0b0b; border-bottom: 1px solid var(--dt-linia); }
.dt-panel-gora .dt-naglowek-panelu { order: 2; }
.dt-zakladki-panelu { order: 3; background: var(--dt-tlo-drugie); border-bottom: 1px solid var(--dt-linia); }
.dt-panel-menu-telefon { order: 4; padding-top: 1rem; }

.dt-pasek-wiersz { display: flex; align-items: center; gap: 1rem; min-height: 2.5rem; }
.dt-pasek-grupy { display: flex; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.dt-pasek-przycisk { display: flex; align-items: center; gap: .4rem; height: 2.5rem; padding: 0 .75rem; border: 0;
    border-bottom: 2px solid transparent; background: none; color: rgba(255, 255, 255, .78); font-size: .875rem; font-weight: 600; }
.dt-pasek-przycisk > i:first-child { color: var(--dt-czerwien-jasna); font-size: .85rem; }
.dt-pasek-przycisk:hover, .dt-pasek-przycisk:focus-visible, .dt-pasek-przycisk[aria-expanded="true"] { background: var(--dt-karta); color: #fff; }
.dt-pasek-grupa.active > .dt-pasek-przycisk { color: #fff; border-bottom-color: var(--dt-czerwien-jasna); }
.dt-pasek-strzalka { font-size: .6rem; opacity: .6; }
.dt-mega { display: none; margin-top: 0 !important; padding: .85rem 1rem; min-width: 15rem; background: #161616;
    border: 1px solid var(--dt-linia); border-top: 2px solid var(--dt-czerwien); border-radius: 0 0 .4rem .4rem;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .65); }
/* Szerokość z treści (max-content): menu jest absolutne w wąskim <li>, bez tego nazwy by się ucinały. */
.dt-mega.show { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(11rem, max-content); gap: 1.5rem;
    width: max-content; max-width: calc(100vw - 2rem); }
.dt-mega-tytul { margin: 0 0 .4rem; padding-bottom: .3rem; border-bottom: 1px solid var(--dt-linia); font-size: .6875rem;
    font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dt-szary-cichy); }
.dt-mega-oficer .dt-mega-tytul { color: var(--dt-czerwien-jasna); }
.dt-mega ul { margin: 0; padding: 0; list-style: none; }
.dt-mega a { display: flex; align-items: center; gap: .45rem; padding: .2rem .35rem; border-radius: .25rem; font-size: .8125rem;
    line-height: 1.35; color: var(--dt-jasny); white-space: nowrap; }
.dt-mega a:hover, .dt-mega a:focus-visible, .dt-mega a[aria-current] { background: var(--dt-karta-wyzej); color: #fff; }
.dt-mega a > i { width: 1rem; flex: none; text-align: center; font-size: .8rem; color: var(--dt-czerwien-jasna); }
.dt-mega .dt-mega-ikona { width: 18px; height: 18px; flex: none; border-radius: 3px; }
.dt-mega-nazwa { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
.dt-mega-meta { margin-left: auto; padding-left: .75rem; font-size: .6875rem; color: var(--dt-szary-cichy); }
.dt-mega-siatka { display: grid; grid-template-columns: repeat(2, minmax(8.5rem, 1fr)); column-gap: .35rem; }
.dt-mega-pusto { margin: 0; font-size: .8125rem; color: var(--dt-szary-cichy); }
.dt-zakladka-licznik { display: inline-block; min-width: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: var(--dt-czerwien);
    color: #fff; font-size: .6875rem; font-weight: 700; line-height: 1.15rem; text-align: center; }
.dt-skocz { position: relative; width: 17rem; margin-left: auto; }
.dt-skocz .form-control { height: 1.9rem; padding: .2rem .65rem; font-size: .8125rem; background: #161616; }
.dt-skocz-lista { position: absolute; top: calc(100% + .3rem); right: 0; z-index: 1040; width: 24rem; max-height: 60vh; overflow-y: auto;
    margin: 0; padding: .3rem; list-style: none; background: #161616; border: 1px solid var(--dt-linia); border-radius: .4rem;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .65); }
.dt-skocz-lista a { display: flex; justify-content: space-between; gap: .75rem; padding: .3rem .5rem; border-radius: .25rem;
    font-size: .8125rem; color: var(--dt-jasny); }
.dt-skocz-lista a span { font-size: .6875rem; color: var(--dt-szary-cichy); white-space: nowrap; }
.dt-skocz-lista a.aktywny, .dt-skocz-lista a:hover { background: var(--dt-karta-wyzej); color: #fff; }
.dt-skocz-lista .dt-skocz-pusto { padding: .3rem .5rem; font-size: .8125rem; color: var(--dt-szary-cichy); }
.dt-zakladki-panelu ul { display: flex; flex-wrap: wrap; gap: 0 .15rem; margin: 0; padding: 0; list-style: none; }
.dt-zakladki-panelu a { display: flex; align-items: center; gap: .4rem; margin-bottom: -1px; padding: .5rem .7rem; font-size: .8125rem;
    font-weight: 600; color: var(--dt-szary-cichy); border-bottom: 2px solid transparent; }
.dt-zakladki-panelu a > i:first-child { font-size: .8rem; }
.dt-zakladki-panelu a:hover, .dt-zakladki-panelu a:focus-visible { color: #fff; }
.dt-zakladki-panelu a.active { color: #fff; border-bottom-color: var(--dt-czerwien-jasna); }
.dt-tarcza { font-size: .65rem; color: var(--dt-czerwien-jasna); }

.dt-naglowek-panelu > .dt-panel-kontener { padding-top: .55rem; padding-bottom: .55rem; }
.dt-naglowek-panelu .breadcrumb { margin-bottom: .1rem; font-size: .75rem; }
.dt-naglowek-panelu-tytul { display: flex; align-items: baseline; gap: .9rem; min-width: 0; }
.dt-tytul-panelu { margin: 0; font-size: 1.375rem; line-height: 1.25; white-space: nowrap; }
.dt-naglowek-panelu-tytul .dt-naglowek-meta { min-width: 0; margin: 0; overflow: hidden; font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 991.98px) {
    .dt-tytul-panelu { white-space: normal; }
    .dt-naglowek-panelu-tytul { display: block; }
    .dt-naglowek-panelu-tytul .dt-naglowek-meta { white-space: normal; }
}

/* Gęsto jak w Wowhead (PLAN § 27): tekst 14 px, tabele 13 px, mniejsze przyciski, pola i odstępy — tylko w panelu. */
.dt-panel { padding-top: 1.25rem; padding-bottom: 3rem; font-size: .875rem; }
.dt-panel h2, .dt-panel .h4 { font-size: 1.05rem; }
.dt-panel h3, .dt-panel .h5 { font-size: .95rem; }
.dt-panel .h3 { font-size: 1.15rem; }
.dt-panel .mb-7 { margin-bottom: 1.75rem !important; }
.dt-panel .mt-7 { margin-top: 1.75rem !important; }
.dt-panel .mb-6 { margin-bottom: 1.25rem !important; }
.dt-panel .mt-6 { margin-top: 1.25rem !important; }
.dt-panel .mb-5 { margin-bottom: 1rem !important; }
.dt-panel .mt-5 { margin-top: 1rem !important; }
.dt-panel .table > :not(caption) > * > * { padding: .35rem .55rem; font-size: .8125rem; }
.dt-panel .btn { padding: .4rem .85rem; font-size: .8125rem; }
.dt-panel .btn-sm, .dt-panel .dt-btn-mini { padding: .2rem .5rem; font-size: .75rem; }
.dt-panel .form-control, .dt-panel .form-select { padding-top: .4rem; padding-bottom: .4rem; font-size: .875rem; }
.dt-panel .form-label { margin-bottom: .25rem; font-size: .8125rem; }
.dt-panel .form-text, .dt-panel .invalid-feedback { font-size: .75rem; }
.dt-panel .card-body { padding: 1rem; }
.dt-panel .alert { padding: .6rem .85rem; font-size: .8125rem; }
/* Okienko z paskiem tytułu (pulpity, PLAN § 27) — jak ramki Wowhead. */
.dt-okno { margin-bottom: 1rem; border: 1px solid var(--dt-linia); border-radius: .4rem; background: var(--dt-karta); }
.dt-okno-tytul { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .4rem .75rem; border-bottom: 1px solid var(--dt-linia);
    background: rgba(255, 255, 255, .03); font-family: inherit; font-size: .6875rem !important; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--dt-szary-cichy); }
.dt-okno-tytul a { margin-left: auto; font-size: .75rem; letter-spacing: 0; text-transform: none; }
.dt-okno-tresc { padding: .6rem .75rem; }
.dt-okno-tresc > :last-child { margin-bottom: 0; }
/* Edytor wpisu i strony: treść + kolumna boczna (zapis, data, zrzut) stałej szerokości. */
.dt-edytor-uklad { display: grid; gap: 2rem; }
.dt-edytor-tresc { min-width: 0; }
@media (min-width: 1200px) { .dt-edytor-uklad { grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; align-items: start; } }

/* ------------------------------------------------------------ panel oficera (PLAN § 21) */
/* Menu z boku zostało tylko na telefonie — w <details> (PLAN § 27). */
.dt-panel-menu-grupa { margin: 1.25rem 0 .35rem; padding-left: .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--dt-szary-cichy); }
.dt-panel-menu-link { display: flex; align-items: center; gap: .65rem; padding: .5rem .75rem; border-radius: .5rem;
    color: var(--dt-tekst); font-weight: 500; }
.dt-panel-menu-link i { color: var(--dt-czerwien-jasna); width: 1.1rem; text-align: center; }
.dt-panel-menu-link:hover, .dt-panel-menu-link:focus { background: var(--dt-karta); color: var(--dt-jasny); }
.dt-panel-menu-link.active { background: var(--dt-karta-wyzej); color: #fff; box-shadow: inset 3px 0 0 var(--dt-czerwien-jasna); }
.dt-panel-menu-link.active i { color: var(--dt-czerwien-jasna); }
.dt-panel-menu-link .badge { margin-left: auto; }
.dt-panel-menu-mobilne { border: 1px solid var(--dt-linia); border-radius: .75rem; padding: .25rem .5rem; }
.dt-panel-menu-mobilne summary { display: flex; align-items: center; gap: .65rem; padding: .5rem .25rem; font-weight: 600; cursor: pointer; }
.dt-panel-menu-mobilne summary i { color: var(--dt-czerwien-jasna); }
.dt-panel-menu-mobilne summary::after { content: "\F282"; font-family: "bootstrap-icons"; margin-left: auto; transition: transform .2s; }
.dt-panel-menu-mobilne[open] summary::after { transform: rotate(180deg); }
.dt-panel-menu-mobilne[open] { padding-bottom: .5rem; }

.dt-panel-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.dt-panel-akcje form { margin: 0; }
.dt-panel-filtry { display: flex; flex-wrap: wrap; gap: .5rem; }
.dt-panel-filtry .form-control, .dt-panel-filtry .form-select { width: auto; flex: 1 1 10rem; }
.dt-panel-zakladki { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; border-bottom: 1px solid var(--dt-linia); }
.dt-panel-zakladki a { padding: .5rem 0; color: var(--dt-szary-cichy); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dt-panel-zakladki a.active { color: var(--dt-jasny); border-color: var(--dt-czerwien); }

.dt-panel-kafle { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .5rem; }
.dt-panel-kafel { display: flex; flex-direction: column; gap: .2rem; padding: .6rem .8rem; border: 1px solid var(--dt-linia);
    border-left: 4px solid var(--dt-czerwien); border-radius: .75rem; color: var(--dt-tekst); }
.dt-panel-kafel:hover, .dt-panel-kafel:focus { border-color: var(--dt-czerwien-jasna); color: var(--dt-jasny); }
.dt-panel-kafel-liczba { font-family: var(--dt-cinzel); font-size: 1.35rem; font-weight: 700; line-height: 1; color: var(--dt-czerwien-jasna); }

.dt-panel-lista li { padding: .35rem 0; border-bottom: 1px solid var(--dt-linia); }
.dt-panel-lista li:last-child { border-bottom: 0; }
.dt-panel-lista .dt-karta-meta { display: block; }
.dt-panel-zmiana-co { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--dt-szary-cichy); }

.dt-panel-wiersze { border-top: 1px solid var(--dt-linia); }
.dt-panel-wiersz { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
    padding: .5rem 0; border-bottom: 1px solid var(--dt-linia); }
.dt-panel-wiersz-wazny { box-shadow: inset 4px 0 0 var(--dt-czerwien); padding-left: .85rem; }
.dt-panel-wiersz-opis { flex: 1 1 18rem; min-width: 0; }
.dt-panel-wiersz-tytul { display: block; font-weight: 600; color: var(--dt-jasny); overflow-wrap: anywhere; }
.dt-panel-wiersz-znaczniki { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }

.dt-stan { font-weight: 600; letter-spacing: .02em; border: 1px solid transparent; }
.dt-stan-szkic { background: var(--dt-tlo-drugie); color: var(--dt-tekst); border-color: var(--dt-linia); }
.dt-stan-zaplanowany { background: var(--dt-bursztyn-tlo); color: var(--dt-bursztyn); border-color: var(--dt-bursztyn-linia); }
.dt-stan-opublikowany { background: #142a1b; color: #7fd69a; border-color: #2a5a3a; }
.dt-stan-archiwum { background: var(--dt-czerwien-tlo); color: #ff8a80; border-color: #5a2222; }
.dt-stan-en, .dt-stan-brak { background: var(--dt-karta); color: var(--dt-szary-cichy); border-color: var(--dt-linia); }
a.dt-stan-en:hover, a.dt-stan-en:focus { color: var(--dt-jasny); border-color: var(--dt-szary-cichy); }

.dt-panel-info { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding: .75rem 1rem;
    background: var(--dt-tlo-drugie); border-radius: .75rem; font-size: .875rem; }
.dt-panel-dalej { padding-top: 1.5rem; border-top: 1px solid var(--dt-linia); }
.dt-panel-sekcja { padding: 1.25rem; border: 1px solid var(--dt-linia); border-radius: .75rem; }

/* Edytor wpisu: pola z boku przyklejone przy przewijaniu długiej treści. */
.dt-panel-boczne { padding: 1.25rem; background: var(--dt-tlo-drugie); border-radius: .75rem; }
@media (min-width: 1200px) { .dt-panel-boczne { position: sticky; top: 6rem; } }
.dt-panel-publikacja { display: grid; gap: .5rem; margin-bottom: 1.5rem; }

.dt-bloki { display: grid; gap: 1rem; }
.dt-blok-karta { border: 1px solid var(--dt-linia); border-radius: .75rem; background: var(--dt-karta); }
/* Karta w siatce bierze szerokość min-content — w WebKicie pasek edytora tekstu się nie zawijał
   i rozpychał kartę poza ekran telefonu (390 px). */
.dt-blok-karta { min-width: 0; }
.dt-blok-karta .prose-menubar, .dt-blok-karta .prose-menubar__group { flex-wrap: wrap; }
.dt-blok-karta-bledy { border-color: var(--bs-danger, #dc3545); }
.dt-blok-karta-naglowek { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem .5rem .4rem 1rem;
    background: var(--dt-tlo-drugie); border-bottom: 1px solid var(--dt-linia); border-radius: .75rem .75rem 0 0; }
.dt-blok-karta-nazwa { font-weight: 600; font-size: .875rem; }
.dt-blok-karta-nazwa i { color: var(--dt-czerwien-jasna); margin-right: .45rem; }
.dt-blok-karta-przyciski { display: flex; align-items: center; gap: .15rem; }
.dt-blok-karta-przyciski [disabled] { opacity: .3; border-color: transparent; }
.dt-blok-usun { display: inline-flex; align-items: center; gap: .35rem; margin: 0; cursor: pointer; }
.dt-blok-usun input { margin: 0; }
.dt-blok-karta-tresc { padding: 1rem 1rem 0; }
.dt-blok-karta-podglad img { max-width: 16rem; height: auto; border-radius: .5rem; margin-bottom: 1rem; }
.dt-blok-usuniety { opacity: .55; }
.dt-blok-usuniety .dt-blok-karta-tresc { display: none; }
.dt-blok-usuniety .dt-blok-karta-nazwa { text-decoration: line-through; }
.dt-bloki-dodaj { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1rem; padding: .75rem;
    border: 1px dashed var(--dt-linia); border-radius: .75rem; }
.dt-bloki-dodaj-etykieta { font-weight: 600; font-size: .875rem; margin-right: .25rem; }
.dt-blok-karta .prose-editor { border-radius: .5rem; }

.dt-wybor-obrazu { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .4rem; }
.dt-wybor-obrazu-opcja { position: relative; display: block; margin: 0; cursor: pointer; border: 2px solid transparent; border-radius: .5rem;
    overflow: hidden; background: var(--dt-karta); }
.dt-wybor-obrazu-opcja input { position: absolute; top: .3rem; left: .3rem; margin: 0; }
.dt-wybor-obrazu-opcja img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.dt-wybor-obrazu-opcja:has(input:checked) { border-color: var(--dt-czerwien); }
.dt-wybor-obrazu-opcja:has(input:focus-visible) { outline: 3px solid #e53935; outline-offset: 2px; }
.dt-wybor-obrazu-brak { grid-column: 1 / -1; display: flex; align-items: center; padding: .45rem .6rem .45rem 1.9rem;
    border-color: var(--dt-linia); font-size: .875rem; }
.dt-wybor-obrazu-brak input { top: 50%; left: .6rem; transform: translateY(-50%); }

.dt-panel-miniatury { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .5rem; }
.dt-panel-miniatura { position: relative; margin: 0; cursor: pointer; }
.dt-panel-miniatura img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: .5rem; }
.dt-panel-miniatura input { position: absolute; top: .35rem; left: .35rem; margin: 0; }
.dt-panel-miniatura span { display: block; font-size: .75rem; color: var(--dt-szary-cichy); }
.dt-panel-miniatura:has(input:checked) img { opacity: .4; outline: 2px solid var(--dt-czerwien); }

.dt-panel-albumy { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
.dt-panel-album { display: flex; flex-direction: column; gap: .2rem; color: var(--dt-tekst); }
.dt-panel-album img, .dt-panel-album-pusty { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
    border-radius: .5rem; background: var(--dt-tlo-drugie); margin-bottom: .35rem; }
.dt-panel-album-pusty { display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--dt-linia-mocna); }
.dt-panel-album-tytul { font-weight: 600; color: var(--dt-jasny); }
.dt-panel-album:hover .dt-panel-album-tytul, .dt-panel-album:focus .dt-panel-album-tytul { color: var(--dt-czerwien-jasna); }

.dt-panel-zrzuty { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.dt-panel-zrzut { display: flex; flex-direction: column; gap: .35rem; }
.dt-panel-zrzut img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: .5rem; }
.dt-panel-zrzut-ukryty img { opacity: .4; }
.dt-panel-zrzut-opis { display: flex; flex-direction: column; font-size: .875rem; overflow-wrap: anywhere; }
.dt-panel-zrzut-akcje { display: flex; flex-wrap: wrap; gap: .15rem; }
.dt-panel-zrzut-akcje form { margin: 0; }
@media (max-width: 575.98px) { .dt-panel-zrzuty { grid-template-columns: 1fr 1fr; gap: .75rem; } }

/* Podgląd wpisu z panelu i relacja na stronie wpisu. */
.dt-podglad { position: sticky; top: 4.5rem; z-index: 1020; padding: .6rem 0; background: var(--dt-bursztyn-tlo);
    border-bottom: 1px solid var(--dt-bursztyn-linia); font-size: .875rem; color: var(--dt-bursztyn); }
.dt-z-wydarzenia { padding: .6rem 1rem; background: var(--dt-tlo-drugie); border-radius: .5rem; font-size: .875rem; }
.dt-blok-album-link { margin-top: -.75rem; font-size: .875rem; }
.dt-podsumowanie-rajdu { margin: 2rem 0; padding: 1.25rem 1.5rem; border: 1px solid var(--dt-linia); border-left: 4px solid var(--dt-czerwien);
    border-radius: .75rem; background: var(--dt-tlo-drugie); }
.dt-podsumowanie-naglowek { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.dt-podsumowanie-runa { width: 2.25rem; height: 2.25rem; flex: none; color: var(--dt-czerwien-jasna); }
.dt-podsumowanie-tytul { font-family: var(--dt-cinzel); font-weight: 700; font-size: 1.15rem; color: var(--dt-jasny); }
.dt-podsumowanie-dane dt { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dt-szary-cichy); }
.dt-podsumowanie-dane dt span { color: var(--dt-czerwien-jasna); margin-left: .2rem; }
.dt-podsumowanie-dane dd { margin-bottom: .75rem; }
.dt-podsumowanie-dane dd:last-child { margin-bottom: 0; }

/* Moje konto w panelu: postacie i zapisy obok karty konta (PLAN § 23.4). */
.dt-konto-uklad { display: grid; gap: 2rem; }
.dt-konto-glowna { min-width: 0; }
@media (min-width: 1200px) { .dt-konto-uklad { grid-template-columns: minmax(0, 1fr) 22rem; gap: 2.5rem; align-items: start; } }

/* DKP plemienia i historia punktów postaci (PLAN § 23.5). */
.dt-dkp-filtry { align-items: center; }
.dt-dkp-filtry .form-control { flex: 2 1 14rem; }
.dt-dkp-moje { margin: 0 .5rem; white-space: nowrap; }
.dt-sortuj { display: inline-flex; align-items: center; gap: .2rem; color: inherit; }
.dt-sortuj:hover, .dt-sortuj:focus, .dt-sortuj.active { color: var(--dt-jasny); }
.dt-tabela-dkp td, .dt-tabela-dkp tbody th { vertical-align: middle; }
.dt-tabela-dkp tbody th { font-weight: 400; }
.dt-dkp-postac { display: flex; align-items: center; gap: .6rem; min-width: 11rem; }
.dt-dkp-postac a { font-weight: 600; }
.dt-dkp-moja { --bs-table-accent-bg: rgba(255, 90, 79, .07); }
.dt-dkp-discord { color: var(--dt-szary-cichy); white-space: nowrap; }
.dt-tabela-dkp thead th { white-space: nowrap; }
.dt-dkp-ukryta { padding: 0 .35rem; border: 1px solid; border-radius: .25rem; font-size: .6875rem; }
.dt-dkp-plus { color: #7fd69a; }
.dt-dkp-minus { color: #ff8a80; }
.dt-dkp-karta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--dt-linia);
    border-radius: .75rem; background: var(--dt-karta); }
.dt-panel-kafel-aktywny { border-color: var(--dt-czerwien-jasna); }
.dt-panel-kafel-liczba small { font-family: Inter, sans-serif; font-size: .875rem; font-weight: 600; }

/* Panel oficera: strony i ich teksty (PLAN § 22). */
.dt-panel-formularz { max-width: 42rem; }
.dt-strona-wiersz .dt-panel-wiersz-opis { flex-basis: 11rem; }
.dt-strona-poziom-1 { padding-left: 1.5rem; }
.dt-strona-poziom-2 { padding-left: 3rem; }
.dt-strona-poziom-1 .dt-panel-wiersz-tytul::before, .dt-strona-poziom-2 .dt-panel-wiersz-tytul::before {
    content: "└"; margin-right: .4rem; color: var(--dt-linia-mocna); font-weight: 400; }
@media (max-width: 575.98px) { .dt-strona-poziom-1 { padding-left: .75rem; } .dt-strona-poziom-2 { padding-left: 1.5rem; } }
.dt-strzalki { display: inline-flex; gap: .1rem; margin: 0; }
.dt-strzalki .btn[disabled] { opacity: .3; border-color: transparent; }
.dt-panel-ramka { display: flex; gap: .9rem; padding: .9rem 1.1rem; border: 1px solid var(--dt-linia); border-left: 4px solid var(--dt-szary-cichy);
    border-radius: .75rem; background: var(--dt-karta); }
.dt-panel-ramka > i { font-size: 1.25rem; line-height: 1.4; color: var(--dt-szary-cichy); }
.dt-wypelniacze { padding: .9rem 1.1rem; border: 1px solid var(--dt-bursztyn-linia); border-left: 4px solid #d9a400; border-radius: .75rem;
    background: var(--dt-bursztyn-tlo); color: var(--dt-bursztyn); }
.dt-wypelniacze ul { padding-left: 1.25rem; overflow-wrap: anywhere; }
.dt-wypelniacze .dt-karta-meta { color: #d9b866; }
.dt-oryginal { border: 1px solid var(--dt-linia); border-radius: .75rem; }
.dt-oryginal summary { padding: .75rem 1.1rem; font-weight: 600; cursor: pointer; }
.dt-oryginal[open] summary { border-bottom: 1px solid var(--dt-linia); }
.dt-oryginal-tresc { max-height: 32rem; overflow-y: auto; padding: 1rem 1.1rem; background: var(--dt-tlo-drugie); border-radius: 0 0 .75rem .75rem; }
.dt-panel-wersje { padding-top: 1.5rem; border-top: 1px solid var(--dt-linia); }
.dt-panel-wersje summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
/* Strona EN czeka na tłumaczenie — polski tekst z ramką (PLAN § 22.8). */
.dt-bez-tlumaczenia { display: flex; gap: .6rem; align-items: baseline; padding: .75rem 1rem; margin-bottom: 1.5rem;
    background: var(--dt-tlo-drugie); border-left: 4px solid var(--dt-czerwien); border-radius: .5rem; font-size: .9375rem; }
.dt-bez-tlumaczenia i { color: var(--dt-czerwien-jasna); }

/* PLAN § 24: grupy członków, pulpit gracza, „nie będę”, grupy w rajdzie, lista życzeń, zamówienia,
   „kogo szukamy”, plemię w panelu oficera, podpowiedź przedmiotu. */
.dt-licznik-wydarzenie { margin: -.35rem 0 .9rem; font-family: var(--dt-cinzel); font-size: 1.15rem; font-weight: 700; }
.dt-licznik-wydarzenie a { color: #fff; }
.dt-licznik-wydarzenie a:hover, .dt-licznik-wydarzenie a:focus { color: #fff; text-decoration: underline; }
.dt-licznik-zapis { color: var(--dt-czerwien-jasna); font-weight: 600; }

.dt-podpowiedz { position: fixed; z-index: 1080; display: flex; flex-direction: column; gap: .1rem; max-width: min(20rem, calc(100vw - 1rem));
    padding: .55rem .75rem; background: rgba(8, 8, 16, .96); border: 1px solid #5a5a6e; border-radius: .35rem;
    box-shadow: 0 0 0 1px #000, 0 6px 18px rgba(0, 0, 0, .6); font-size: .8125rem; color: #fff; pointer-events: auto; }
.dt-podpowiedz strong { font-size: .9375rem; }
.dt-podpowiedz-jakosc { color: var(--dt-szary-cichy); }
.dt-podpowiedz-niezwykly { border-color: #1eff00; }
.dt-podpowiedz-rzadki { border-color: #4da3ff; }
.dt-podpowiedz-epicki { border-color: #b875f5; }
.dt-podpowiedz-legendarny { border-color: #ff8000; }
span.dt-przedmiot[tabindex] { cursor: help; }
span.dt-przedmiot[tabindex]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: .15rem; }

.dt-pulpit-wydarzenia { display: grid; gap: .6rem; }
.dt-pulpit-wydarzenie { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: .75rem 1rem;
    border: 1px solid var(--dt-linia); border-radius: .75rem; background: var(--dt-karta); }
.dt-pulpit-wydarzenie .dt-wydarzenie-data { flex: none; }
.dt-pulpit-opis { flex: 1 1 14rem; min-width: 0; }
.dt-pulpit-stan { display: block; margin-top: .2rem; font-size: .875rem; color: var(--dt-szary-cichy); }
.dt-pulpit-stan-sklad { color: #7fd69a; }
.dt-pulpit-stan-rezerwa, .dt-pulpit-stan-czeka, .dt-pulpit-stan-moze { color: var(--dt-bursztyn); }
.dt-pulpit-przyciski { display: flex; flex-wrap: wrap; gap: .4rem; }
.dt-pulpit-przyciski form { margin: 0; }
.dt-pulpit-kafle { display: grid; gap: 1rem; }
@media (min-width: 768px) { .dt-pulpit-kafle { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } }
.dt-pulpit-kafel { padding: 1.1rem 1.25rem; border: 1px solid var(--dt-linia); border-radius: .75rem; background: var(--dt-karta); }
.dt-pulpit-lista { display: grid; gap: .45rem; }
.dt-pulpit-lista i { margin-right: .45rem; color: var(--dt-czerwien-jasna); }
.dt-pulpit-saldo { color: var(--dt-jasny); }

.dt-zapisy-nie .dt-zapis { opacity: .85; }
.dt-grupy-rajdu { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.dt-grupa-rajdu { padding: .9rem 1rem; border: 1px solid var(--dt-linia); border-radius: .75rem; background: var(--dt-karta); }
.dt-grupa-osoba { padding: .2rem 0; }
.dt-grupa-osoba .dt-ikona-gry { width: 1.1rem; height: 1.1rem; margin-right: .35rem; vertical-align: -.2em; }
.dt-grupa-zadanie { display: block; padding-left: 1.45rem; font-size: .8125rem; color: var(--dt-bursztyn); }
.dt-grupa-moja { margin: 0 -.5rem; padding: .2rem .5rem; border-radius: .4rem; background: var(--dt-czerwien-tlo); }
.dt-tabela-grupy .form-select { min-width: 4.5rem; }
.dt-tabela-grupy .form-control { min-width: 12rem; }

.dt-zyczenia-kto { display: grid; gap: .2rem; }
.dt-pole-waskie .form-control { max-width: 8rem; }
.dt-zyczenie-spelnione { opacity: .6; }
@media (max-width: 1199.98px) { .dt-bok-najpierw > .dt-edytor-bok { order: -1; } }

.dt-szukamy { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.25rem; border: 1px solid var(--dt-linia);
    border-left: 4px solid var(--dt-czerwien); border-radius: .75rem; background: var(--dt-karta); }
.dt-szukamy-runa { width: 2.25rem; height: 2.25rem; flex: none; color: var(--dt-czerwien-jasna); }
.dt-szukamy-lista .list-inline-item { margin: 0 1rem .35rem 0; font-weight: 600; }
.dt-szukamy-lista .dt-ikona-gry { width: 1.4rem; height: 1.4rem; margin-right: .4rem; vertical-align: -.35em; border-radius: .25rem; }
.dt-szukamy-rola { color: var(--dt-jasny); }
.dt-kafel-znak { padding: 0 .35rem; border-radius: .25rem; background: var(--dt-czerwien); color: #fff; font-size: .6875rem;
    font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

.dt-panel-ramka-rangi { padding: 1rem 1.1rem .25rem; border: 1px solid var(--dt-linia); border-radius: .75rem; background: var(--dt-karta); }
.dt-panel-ramka-rangi legend { float: none; width: auto; padding: 0 .35rem; margin-bottom: .5rem; }
.dt-sklad-stan li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid var(--dt-linia); }
.dt-sklad-stan .dt-ikona-gry { width: 1.2rem; height: 1.2rem; margin-right: .4rem; vertical-align: -.25em; }
.dt-checkboxy .form-check-label .dt-ikona-gry { width: 1.2rem; height: 1.2rem; margin-right: .3rem; vertical-align: -.25em; }
.dt-brak { color: var(--dt-bursztyn); font-weight: 600; }
.dt-weteran-tekst { white-space: normal; overflow-wrap: anywhere; }

/* Wydruk zostaje jasny: czarny tekst na bieli, bez teł kart i sekcji. */
@media print {
    html { color-scheme: light; }
    .dt-naglowek, .dt-stopka, .dt-budowa, .dt-skip, .dt-fryz, .dt-kolumna-run, .dt-pauza-przycisk, .dt-podpowiedz { display: none !important; }
    body::before { display: none; }
    html, body, .bg-dark, .card, [class*="dt-"] { background: #fff !important; box-shadow: none !important; }
    body, body * { color: #000 !important; border-color: #bbb !important; }
}

/* ---------------------------------------------------------------- przedmioty z Wowhead (PLAN § 26)
   Link do Wowhead: skrypt Wowhead (static/js/wowhead.js) dokłada ikonę i podpowiedź, kolor jakości
   dajemy sami — te same kolory co .dt-jakosc-* (kontrast na karcie), plus szary i biały z gry. */
.dt-wh { font-weight: 600; text-decoration: none; }
.dt-wh:hover, .dt-wh:focus { text-decoration: underline; }
.dt-wh-q0 { color: #9d9d9d; }
.dt-wh-q1 { color: #f2f2f2; }
.dt-wh-q2 { color: #1eff00; }
.dt-wh-q3 { color: #4da3ff; }
.dt-wh-q4 { color: #b875f5; }
.dt-wh-q5 { color: #ff8000; }
.dt-wh-kafle { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem; }
.dt-edytor-bok .dt-wh-kafle { grid-template-columns: 1fr; }
.dt-wh-kafel { display: flex; align-items: center; gap: .6rem; min-width: 0; padding: .5rem .65rem; border: 1px solid var(--dt-linia);
  border-radius: .5rem; background: var(--dt-tlo-drugie); cursor: pointer; }
.dt-wh-kafel:hover { border-color: var(--dt-czerwien-jasna); }
.dt-wh-kafel:has(input:checked) { border-color: var(--dt-czerwien-jasna); box-shadow: 0 0 0 1px var(--dt-czerwien-jasna); }
.dt-wh-kafel input { flex: none; margin: 0; }
.dt-wh-kafel-tekst { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.dt-wh-kafel[hidden] { display: none; }
.dt-sr-lista li { padding: .35rem 0; border-bottom: 1px solid var(--dt-linia); }
.dt-sr-kto { display: block; font-size: .875rem; }
.dt-sr-usun { line-height: 1; color: var(--dt-czerwien-jasna); text-decoration: none; }
.dt-materialy summary { cursor: pointer; }
.dt-post-html a[href*="wowhead.com/"] { font-weight: 600; }
/* Okienka obok siebie (PLAN § 27): pulpit gracza — szerokie z wydarzeniami i kolumna z boku; pulpit oficera — dwie równe. */
.dt-okna { display: grid; gap: 0 1rem; align-items: start; }
@media (min-width: 1200px) {
    .dt-okna { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); }
    .dt-okna-rowne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dt-okna-kolumna, .dt-okna-bok { min-width: 0; }
.dt-okno .dt-pulpit-wydarzenia { gap: 0; }
.dt-okno .dt-pulpit-wydarzenie { padding: .45rem .1rem; border: 0; border-bottom: 1px solid var(--dt-linia); border-radius: 0; background: none; }
.dt-okno .dt-pulpit-wydarzenie:last-child { border-bottom: 0; }
.dt-okno .dt-wydarzenie-data { width: 2.75rem; height: 2.75rem; }
.dt-okno .dt-wydarzenie-dzien { font-size: 1.1rem; }
.dt-okno .dt-pulpit-stan { font-size: .8125rem; }
.dt-okno .dt-pulpit-lista { gap: .3rem; }
.dt-okno .dt-panel-lista li:first-child { padding-top: 0; }
.dt-okno .dt-moje-postacie { margin: 0; gap: .4rem; }
.dt-okno .dt-moja-postac { padding: .45rem .5rem; border-radius: .4rem; }
.dt-okno .link { font-size: inherit; }
.dt-panel .dt-panel-zakladki { gap: .15rem 1.1rem; }
.dt-panel .dt-panel-zakladki a { padding: .35rem 0; font-size: .8125rem; }