/* =========================================================================
 * Gothic — Kolonia Górnicza · prototyp
 *
 * Spis treści:
 *   1. Zmienne i reset
 *   2. Nagłówek i nawigacja
 *   3. Przyciski
 *   4. Sekcja hero
 *   5. Sekcja „O świecie”
 *   6. Stopka i notatki
 *   7. Dialogi i formularze
 *   8. Panel postaci
 *   9. Wyposażenie i podpowiedzi
 *  10. Plecak
 *  11. Powiadomienia i panel admina
 *  11b. Ekran gry: wstęp, lokacja, podróż
 *  12. Responsywność
 * ========================================================================= */

/* ---------------------------------------------------------------------------
 * 1. Zmienne i reset
 * ------------------------------------------------------------------------- */

:root {
  color-scheme: dark;
  --bg: #0d0e10;
  --panel: #181a1e;
  --text: #d5d7db;
  --muted: #9b9fa7;
  --accent: #89a5c9;

  /* Paleta semantyczna — jedyne kolory akcentów w interfejsie (wartości rgb służą wariantom z przezroczystością) */
  --accent: #89a5c9;
  --accent-rgb: 137 165 201;
  --line-strong: #8190aa;
  --line-strong-rgb: 129 144 170;
  --gold: #e3b04c;
  --gold-rgb: 227 176 76;
  --gold-tint: #f0dfb4;
  --gold-tint-rgb: 255 233 176;
  --green: #8fd18f;
  --green-rgb: 143 209 143;
  --green-tint: #b9e0b9;
  --green-tint-rgb: 185 224 185;
  --red: #df7a72;
  --red-rgb: 223 122 114;
  --red-line: #b97671;
  --red-line-rgb: 185 118 113;
  --red-tint: #f0b7b2;
  --red-tint-rgb: 240 183 178;
  --violet: #b1a0d7;
  --violet-rgb: 177 160 215;
  --ember: #e0a06a;
  --ember-rgb: 224 160 106;
  --ember-tint: #e4dccb;
  --ember-tint-rgb: 228 220 203;
  --accent-tint: #b0c8e6;
  --accent-tint-rgb: 176 200 230;

  /* Wspólny styl elementów pływających: okienka podpowiedzi, powiadomienia, dialogi, karty */
  --float-border: 1px solid rgb(var(--line-strong-rgb) / .5);
  --float-radius: 6px;
  --float-shadow: 0 18px 60px #000c, 0 0 0 1px #ffffff08 inset;
  --float-bg: linear-gradient(160deg, #1c1f25, #16181d 70%);
  --line: #ffffff13;
  --danger: var(--red-tint);
  --danger-line: rgb(var(--red-line-rgb) / .35);
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --sidebar-width: 0px;
  --radius: 4px;

  /* Skala typograficzna — jedyne dozwolone rozmiary tekstu w interfejsie */
  --fs-label: 11px;   /* etykiety, tagi, nagłówki sekcji (wielkie litery) */
  --fs-note: 12px;    /* notatki, podpisy, teksty pomocnicze */
  --fs-body: 13px;    /* tekst w panelach i oknach */
  --fs-ui: 14px;      /* przyciski, nawigacja, powiadomienia */
  --fs-lead: 16px;    /* akapit wprowadzający */
  --ls-label: 1.4px;  /* rozstrzelenie etykiet */

  /* Nagłówki — jedna rodzina szeryfowa, cztery rozmiary */
  --h-display: clamp(44px, 5vw, 64px);
  --h1: 30px;
  --h2: 22px;
  --h3: 18px;
  --rarity-fine: var(--green);
  --rarity-rare: #7cafe8;
  --rarity-legendary: var(--gold);
}

h1, h2, h3, h4, .brand, .combat-side strong, .equipment-tooltip strong, .admin-heading h3, .discard-form h4, .admin-form h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0;
}

/* Wspólny styl wszystkich etykiet — niezależnie od tego, czy tekst w HTML/JS jest wielkimi literami */
.eyebrow, .class-tag, .inventory-section-title, .prototype-note > span,
.filter-button, .sort-button, .admin-toggle, .art-caption, footer > span:last-child {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 30px;
}

body {
  margin: 0;
  background: radial-gradient(ellipse at 70% 10%, #2a3140 0%, transparent 55%), var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-ui);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Blokada przewijania strony, gdy otwarte jest którekolwiek okno dialogowe. */
body:has(dialog[open]) { overflow: hidden; }

button, input, textarea, select { font: inherit; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}

/* ---------------------------------------------------------------------------
 * 2. Nagłówek i nawigacja
 * ------------------------------------------------------------------------- */

.header, main, footer {
  max-width: 1240px;
  margin: auto;
  padding-left: 54px;
  padding-right: 54px;
}

.header {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  letter-spacing: 4px;
  white-space: nowrap;
}

.brand-symbol { color: var(--accent); font-size: 24px; }
.brand-version {
  margin-left: 7px;
  padding: 1px 5px;
  border: 1px solid rgb(var(--line-strong-rgb) / .35);
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--muted);
  vertical-align: 4px;
}
footer .brand-version { vertical-align: 2px; }

nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: var(--fs-ui);
}

.world-link, .text-button { color: #b8bdc5; }

/* Przełącznik języka */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

.lang-button {
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
}

.lang-button:hover { color: var(--text); }
.lang-button[aria-pressed=true] { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.lang-separator { color: #4a5160; font-size: var(--fs-label); }
.text-button { background: none; border: 0; padding: 8px 0; }
.text-button:hover, .world-link:hover { color: var(--accent); }

/* ---------------------------------------------------------------------------
 * 3. Przyciski
 * ------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px;
  background: #ffffff05;
  border: 1px solid rgb(var(--line-strong-rgb) / .33);
  border-radius: var(--radius);
  color: var(--accent);
  font-weight: 600;
  font-size: var(--fs-ui);
  line-height: 1.3;
  transition: background .15s, border-color .15s;
}

.button:hover { background: rgb(var(--accent-rgb) / .08); border-color: rgb(var(--line-strong-rgb) / .6); }
.button span { font-size: 16px; font-weight: 400; }
.button.small { padding: 9px 16px; gap: 8px; font-size: var(--fs-body); }
.full { width: 100%; }

.button.primary {
  background: linear-gradient(#2c3541, #1f2731);
  border-color: #7890ac80;
  color: var(--text);
  padding: 14px 24px;
  box-shadow: inset 0 1px #cbd6e514, 0 6px 20px #0006;
}

.button.primary:hover { background: linear-gradient(#34404f, #25303c); }

.button.danger { color: var(--danger); border-color: var(--danger-line); }
.button.danger:hover { background: rgb(var(--red-line-rgb) / .09); }

/* ---------------------------------------------------------------------------
 * 4. Sekcja hero
 * ------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: 48px;
  padding: 64px 0 56px;
}

.hero-copy { max-width: 560px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  line-height: 1.6;
}

.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgb(var(--accent-rgb) / .4);
}

h1 {
  font-size: var(--h-display);
  line-height: 1.1;
  margin: 18px 0 20px;
}

h1 em { color: var(--accent); font-style: italic; }
.nowrap { white-space: nowrap; }

.hero-copy > p {
  font-size: var(--fs-lead);
  line-height: 1.75;
  color: var(--muted);
  margin: 0 0 28px;
}

.hero-copy > p .desktop-break { display: none; }

.hero-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  font-size: var(--fs-note);
  color: var(--muted);
}

.hero-note li { display: inline-flex; align-items: center; gap: 8px; }
.hero-note li::before { content: "◇"; color: var(--accent); font-size: 12px; }

.hero-art {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin-left: auto;
}

.hero-art svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 40px #0008); }

.hero-art:after {
  content: "";
  position: absolute;
  inset: 72% 0 0;
  background: linear-gradient(transparent, var(--bg));
  pointer-events: none;
}

.art-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  z-index: 1;
  text-align: center;
  color: var(--accent);
}

.art-caption > span { display: block; }

.art-caption small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--fs-note);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------------------------------------------------------------------------
 * 5. Sekcja „O świecie”
 * ------------------------------------------------------------------------- */

.world-section {
  padding: 48px 0 56px;
  border-top: 1px solid var(--line);
}

.section-heading { max-width: 560px; margin-bottom: 28px; }

h2 { font-size: var(--h1); line-height: 1.25; margin: 10px 0 8px; }
h3 { font-size: var(--h2); line-height: 1.3; margin: 0 0 8px; }

.section-heading p { font-size: var(--fs-body); color: var(--muted); margin: 0; }

.class-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.class-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: linear-gradient(160deg, #1b1e24, #13161a);
  border: 1px solid #a1a7b01f;
  border-top: 2px solid rgb(var(--line-strong-rgb) / .4);
  border-radius: var(--radius);
  box-shadow: 0 10px 25px #0004;
}

.class-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: #829fcb0c;
  border: 1px solid #aeb8c92e;
  border-radius: var(--radius);
  font-size: 24px;
  color: var(--accent);
}

.class-card-head { display: flex; align-items: center; gap: 14px; }
.class-card-answer { font-style: italic; color: var(--ember-tint); }
.class-card-bonuses { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--fs-note); line-height: 1.45; color: var(--muted); }
.class-card-bonuses .is-major { color: var(--green); }
.class-card-head > div { display: grid; gap: 3px; min-width: 0; }
.class-card h3 { margin: 0; }

.class-card p {
  flex: 1;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
}

.class-tag { color: #9faec2; }

/* ---------------------------------------------------------------------------
 * 6. Stopka i notatki
 * ------------------------------------------------------------------------- */


.prototype-note {
  margin: 0;
  padding: 20px 0 28px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-note);
  line-height: 1.75;
  color: var(--muted);
  max-width: 760px;
}

.prototype-note > span {
  display: block;
  color: var(--accent);
  margin-bottom: 6px;
}

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 80px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-note);
  color: var(--muted);
}

footer .brand { font-size: 15px; letter-spacing: 3px; color: #b7bec8; }

.noscript { padding: 20px; color: var(--red-tint); text-align: center; }

/* ---------------------------------------------------------------------------
 * 7. Dialogi i formularze
 * ------------------------------------------------------------------------- */

dialog {
  width: min(560px, calc(100% - 30px));
  max-height: 90dvh;
  overflow: auto;
  padding: 32px 36px 34px;
  border: var(--float-border);
  border-radius: var(--float-radius);
  background: var(--float-bg);
  color: var(--text);
  box-shadow: var(--float-shadow), 0 40px 120px #000a;
}

dialog::backdrop {
  background: #060709e0;
  backdrop-filter: blur(6px);
}

dialog h2 { margin: 8px 0 14px; font-size: var(--h1); }
dialog p { font-size: var(--fs-body); line-height: 1.7; color: var(--muted); }
.dialog-header { margin-bottom: 18px; }

.close-button {
  position: absolute;
  top: 10px;
  right: 14px;
  border: 0;
  background: none;
  font-size: 27px;
  line-height: 1;
  padding: 6px;
  color: var(--muted);
}

form > label, legend {
  display: block;
  font-size: var(--fs-body);
  font-weight: 600;
  margin: 19px 0 9px;
  color: #cdd1d7;
}

input:not([type=radio]), textarea, select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #8faacf40;
  border-radius: 4px;
  background: #101214;
  color: var(--text);
}

input::placeholder, textarea::placeholder { color: #9097a2; }
textarea { resize: vertical; min-height: 85px; }

form > small {
  display: block;
  font-size: var(--fs-note);
  color: var(--muted);
  margin-top: 7px;
}

fieldset { border: 0; padding: 0; margin: 5px 0 18px; min-width: 0; }
legend { padding: 0; margin-bottom: 10px; }

.choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.choices label { position: relative; cursor: pointer; min-width: 0; }
.choices-2 { grid-template-columns: repeat(2, 1fr); }
.gender-fieldset { margin: 14px 0 0; padding: 0; border: 0; min-width: 0; }
.gender-fieldset legend { margin-bottom: 8px; padding: 0; font-size: var(--fs-body); font-weight: 600; color: #cdd1d7; }
.field-note { margin: 8px 0 0; font-size: var(--fs-note); color: var(--muted); }
.intro-form .gender-fieldset { margin-top: 10px; }

.choices input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.choices label > span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  min-height: 75px;
  padding: 10px 3px;
  border: 1px solid #ffffff1a;
  border-radius: 5px;
  background: #ffffff03;
  font-size: var(--fs-body);
}

.choices input:checked + span {
  border-color: var(--accent);
  color: var(--text);
  background: rgb(var(--accent-rgb) / .06);
}

.choices input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.choices b { font-size: 25px; font-weight: 400; line-height: 1.4; }

.optional {
  color: var(--muted);
  font-weight: 400;
  font-size: var(--fs-note);
  margin-left: 6px;
}

.form-error { color: var(--red-tint); margin: 12px 0; }
.form-error:empty { display: none; }

.switch-mode { display: block; margin: 15px auto 0; font-size: var(--fs-body); }

.dialog-note {
  font-size: var(--fs-note);
  border-top: 1px solid var(--line);
  padding-top: 17px;
  margin-top: 20px;
}

.character-preview { font-size: var(--fs-body); color: var(--accent); margin: 14px 0; }

dialog .creator-faction-note {
  font-size: var(--fs-note);
  border-left: 2px solid rgb(var(--accent-rgb) / .44);
  padding-left: 12px;
}

/* ---------------------------------------------------------------------------
 * 8. Panel postaci
 * ------------------------------------------------------------------------- */

.has-character {
  --sidebar-width: 300px;
  padding-left: var(--sidebar-width);
}

.has-character .header {
  height: auto;
  min-height: 108px;
  padding-top: 20px;
  padding-bottom: 20px;
  flex-wrap: wrap;
}

.has-character nav { flex-wrap: wrap; gap: 12px 22px; }

.has-character #profile-label {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-panel {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #48658c #111d30;
  margin: 0;
  padding: 0 22px 22px;
  border: 0;
  border-right: 1px solid #6e92bf55;
  background: linear-gradient(170deg, #1b2c43, #111d30 55%, #0e1826);
  box-shadow: 8px 0 35px #0006;
}

/* Kompas — gdzie jestem */

.panel-compass {
  --location-color: var(--accent);
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0 -22px 18px;
  padding: 16px 22px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--location-color) 30%, transparent);
  background:
    radial-gradient(ellipse at 0% 50%, color-mix(in srgb, var(--location-color) 22%, transparent), transparent 65%),
    #0b121e99;
}

.panel-compass-glyph {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--location-color) 55%, transparent);
  border-radius: var(--radius);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--location-color) 30%, #0c0d10), #0c0d10 80%);
  color: var(--location-color);
  font: 400 19px / 1 var(--serif);
  text-shadow: 0 0 10px currentColor;
}

.panel-compass-text { display: grid; gap: 1px; min-width: 0; }
.panel-compass-label { font-size: 10px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.panel-compass-text strong { font-family: var(--serif); font-weight: 400; font-size: var(--fs-lead); line-height: 1.2; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-compass-count { font-size: var(--fs-note); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.panel-compass-count::before { content: "◇ "; color: var(--location-color); }

/* Strefa stała: portret, zasoby, plecak */

.panel-fixed { padding-bottom: 16px; border-bottom: 1px solid var(--line); }

.character-content {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
}

.character-content > div:nth-child(2) { flex: 1; min-width: 0; }
.character-content h2, .character-content p { overflow-wrap: anywhere; }
.character-content h2 { font-size: 22px; margin: 3px 0; line-height: 1.15; }

.character-content p {
  color: var(--muted);
  font-size: var(--fs-note);
  margin: 4px 0 0;
  white-space: pre-wrap;
}

.portrait {
  position: relative;
  height: 60px;
  width: 52px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid #aeb8c940;
  border-radius: 45% 45% 2px 2px;
  background: #090b0e88;
  color: var(--accent);
  font-size: 30px;
}

.level-badge {
  position: absolute;
  right: -7px;
  bottom: -7px;
  min-width: 24px;
  padding: 2px 6px;
  border: 1px solid rgb(var(--accent-rgb) / .5);
  border-radius: 2px;
  background: #17283d;
  box-shadow: 0 2px 8px #0006;
  color: #d9e6f7;
  font-size: var(--fs-note);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

/* Paski zasobów */

.character-resources { display: grid; gap: 9px; margin: 0 0 14px; }

.resource-experience { --resource-color: var(--violet); --resource-dark: var(--violet); margin-top: 2px; cursor: help; }
.resource-hp         { --resource-color: var(--red); --resource-dark: var(--red); }
.resource-mana       { --resource-color: #7cafe8; --resource-dark: #3a6fad; }
.resource-stamina    { --resource-color: var(--gold); --resource-dark: var(--gold); }

.resource-heading {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  font-size: var(--fs-body);
  color: var(--resource-color);
}

.resource-icon { display: grid; place-items: center; width: 16px; font: 700 12px / 1 var(--serif); color: var(--resource-color); text-shadow: 0 0 6px currentColor; }
.resource-heading > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-heading > span:last-child { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 7ch; text-align: right; }
.resource.is-low .resource-heading > span:last-child { color: var(--ember); }
.resource.is-low .resource-fill { background: linear-gradient(90deg, var(--ember), var(--resource-color)); }

.resource-track {
  position: relative;
  height: 8px;
  overflow: hidden;
  border: 1px solid #ffffff20;
  border-radius: 6px;
  background: #0a0b0d;
  box-shadow: inset 0 2px 4px #0005;
  position: relative;
}

.resource-fill {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--resource-dark), var(--resource-color));
  transition: width .42s cubic-bezier(.2, .7, .2, 1);
}

/* Ślad po stracie: jaśniejszy pas zostaje chwilę w starym miejscu i dogania wypełnienie */
.resource-trail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--resource-color) 55%, #fff 20%);
  opacity: 0;
  transition: width .42s cubic-bezier(.2, .7, .2, 1);
}
.resource-trail.is-lagging { opacity: .75; transition: width .5s ease .28s, opacity .3s ease .6s; }

/* Podgląd kosztu drogi: zużywana część paska szarzeje i pulsuje */
.resource-preview {
  position: absolute;
  top: 0;
  bottom: 0;
  background:
    repeating-linear-gradient(135deg, #0a0b0dcc 0 3px, #6a7280cc 3px 5px);
  box-shadow: inset 1px 0 0 #ffffff66;
  animation: stamina-preview 1.1s ease-in-out infinite;
  pointer-events: none;
}
.resource-preview.is-over { background: repeating-linear-gradient(135deg, #0a0b0dcc 0 3px, rgb(var(--ember-rgb) / .85) 3px 5px); box-shadow: inset 1px 0 0 rgb(var(--ember-rgb) / .9); }
.resource-preview.is-gain { background: repeating-linear-gradient(135deg, rgb(var(--green-rgb) / .35) 0 3px, rgb(var(--green-rgb) / .9) 3px 5px); box-shadow: inset -1px 0 0 rgb(var(--green-rgb) / .9); }
.resource.is-previewing .resource-heading > span:last-child:not(.is-over) { color: var(--accent-tint); }

/* Paski zasobów w oknie odpoczynku */
.rest-gains { display: grid; gap: 10px; width: min(560px, 100%); margin: 0 auto 14px; text-align: left; }
.rest-gain { display: grid; gap: 5px; }
.rest-gain-head { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: var(--fs-body); color: var(--resource-color); }
.rest-gain-name { color: var(--resource-color); }
.rest-gain-value { color: var(--accent-tint); font-variant-numeric: tabular-nums; }
.rest-gain-value.is-over { color: var(--ember); }
.rest-gain-track { height: 10px; }
.rest-gain.is-idle { opacity: .55; }
.rest-gain.is-idle .rest-gain-value { color: var(--muted); }
.rest-gain-note { font-size: var(--fs-note); color: var(--muted); }
@keyframes stamina-preview { 50% { opacity: .45; } }
.resource.is-previewing .resource-heading > span:last-child { color: var(--accent-tint); }
.resource.is-previewing .resource-heading > span:last-child.is-over { color: var(--ember); }

.resource-experience .resource-heading { font-size: var(--fs-note); margin-bottom: 3px; }
.resource-experience .resource-track { height: 4px; }

.stat-hover { cursor: help; border-radius: 2px; }
.stat-hover:hover, .stat-hover:focus-visible { background: rgb(var(--accent-rgb) / .05); }
.character-facts .stat-hover { margin: 0 -6px; padding-left: 6px; padding-right: 6px; }
.character-resources .stat-hover { margin: 0 -6px; padding: 3px 6px; }

.stat-bonus { color: var(--green); font-weight: 600; font-size: var(--fs-note); }
.resource-heading .has-bonus { color: var(--green-tint); }

.stat-tooltip { z-index: 21; pointer-events: none; }
.stat-tooltip .tooltip-stats { margin-top: 10px; }
.item-stat-bonus .stat-icon svg, .item-stat-bonus .stat-icon .item-glyph { width: 16px; height: 16px; font-size: 13px; }

.attribute-glyph {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  font: 700 13px / 1 var(--serif);
  text-shadow: 0 1px 4px #0008;
}

/* Plecak — jedyny duży przycisk panelu */

.character-panel .backpack-button {
  font-size: var(--fs-body);
  min-height: 44px;
  padding: 9px 16px;
  justify-content: space-between;
  background: rgb(var(--accent-rgb) / .06);
  border-color: rgb(var(--accent-rgb) / .4);
}

.backpack-button .backpack-label { display: flex; align-items: center; gap: 9px; font-size: var(--fs-body); }
.backpack-label svg { width: 18px; height: 18px; }
.backpack-button #backpack-count { font-size: var(--fs-note); font-variant-numeric: tabular-nums; color: var(--muted); }

/* Zakładki */

.panel-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 -22px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
}

.panel-tabs [role=tab] {
  position: relative;
  padding: 13px 4px 11px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-align: center;
  transition: color .15s;
}

.panel-tabs [role=tab]:hover { color: var(--text); }
.panel-tabs [role=tab][aria-selected=true] { color: var(--accent-tint); }
.panel-tabs [role=tab]::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -1px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity .2s, transform .2s;
}
.panel-tabs [role=tab][aria-selected=true]::after { opacity: 1; transform: none; }
.panel-tabs [role=tab]:focus-visible { outline: 1px solid var(--accent); outline-offset: -4px; border-radius: 2px; }

.panel-pane { padding-top: 18px; animation: pane-in .25s ease; }
@keyframes pane-in { from { opacity: 0; } }

.panel-block-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.panel-block-head .block-title { margin: 0; flex: 1; min-width: 0; }
.panel-block-head .class-tag { white-space: nowrap; }
.panel-block-head .info-button { width: 20px; height: 20px; font-size: var(--fs-body); flex: none; }
.panel-info-tooltip { z-index: 21; pointer-events: none; width: min(260px, calc(100vw - 24px)); }
.panel-info-tooltip p { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--text); }

/* Zakładka Postać */

.character-facts { margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--line); }

.character-facts > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}

.character-facts dt { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); color: var(--muted); }
.character-facts dt svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--accent); }
.character-facts dd { margin: 0; text-align: right; font-size: var(--fs-body); color: var(--text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.character-facts .ore-row dd { font-weight: 600; color: var(--accent-tint); }
.character-facts .attribute-row dd { font-weight: 600; }

.character-story {
  margin: 0 0 14px;
  padding-left: 12px;
  border-left: 2px solid rgb(var(--accent-rgb) / .44);
  font: italic var(--fs-body) / 1.7 var(--serif);
  color: var(--muted);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.panel-link { display: inline-flex; gap: 6px; padding: 0; font-size: var(--fs-body); color: var(--accent); }
.panel-link:hover { color: var(--text); }

/* Zakładka Umiejętności */

.skills { padding: 0 0 14px; }
.skills + .skills { padding-top: 6px; border-top: 1px solid var(--line); padding-top: 14px; }
.skills-list { display: grid; gap: 4px; }

.skill-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0 -6px;
  padding: 5px 6px;
}

.skill-glyph {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgb(var(--line-strong-rgb) / .25);
  border-radius: 2px;
  background: #0b0d10aa;
  font: 400 14px / 1 var(--serif);
  text-shadow: 0 0 6px currentColor;
}

.skill-text { min-width: 0; }

.skill-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3ch;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  font-size: var(--fs-note);
  color: var(--muted);
}

.skill-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-level { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.skill-track { height: 3px; border-width: 0; background: #ffffff10; box-shadow: none; }

.panel-collapse {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
}
.panel-collapse .block-title { margin: 0; flex: none; }
.panel-collapse-chevron { display: inline-block; width: 10px; color: var(--muted); font-size: 11px; transition: transform .2s; }
.panel-collapse[aria-expanded=true] .panel-collapse-chevron { transform: rotate(90deg); }
.panel-collapse:hover .block-title, .panel-collapse:hover .panel-collapse-chevron { color: var(--text); }

.skills-list-compact { grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.skills-list-compact .skill-row { grid-template-columns: 20px minmax(0, 1fr); gap: 8px; padding: 4px 6px; }
.skills-list-compact .skill-glyph { width: 20px; height: 20px; font-size: 12px; }
.skills-list-compact .skill-heading { font-size: var(--fs-label); margin-bottom: 3px; }
.skills-list-compact .skill-track { height: 2px; }

/* ---------------------------------------------------------------------------
 * 9. Wyposażenie i podpowiedzi
 * ------------------------------------------------------------------------- */

.equipment { padding: 0 0 12px; }

.equipment-inspector { width: 100%; max-width: 324px; }

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 8px;
}

.equipment-cell { min-width: 0; text-align: center; }

.equipment-cell > span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-note);
  margin-top: 7px;
  padding-bottom: 10px;
}

.equipment-slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  min-height: 44px;
  padding: 8px;
  border: 1px solid #8e9bae88;
  border-radius: 2px;
  background: linear-gradient(145deg, #2b2d32, #17191d);
  color: #c1b6a4;
  box-shadow: inset 0 0 16px #0005;
}

.equipment-slot:after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 4px;
  height: 4px;
  background: #c1b6a4;
  transform: rotate(45deg);
}

.equipment-slot svg { display: block; width: 100%; max-width: 44px; height: auto; }
.equipment-slot .outfit-cloth { fill: #8b786335; }

.equipment-slot.is-empty {
  border-style: dashed;
  border-color: #7888a43d;
  background: #0b0d1077;
  color: #8995a8;
  box-shadow: none;
}

.equipment-slot.is-empty svg { opacity: .6; }
.equipment-slot.is-empty:after { display: none; }
.equipment-slot.is-empty .outfit-cloth { fill: none; }

/* Obramowanie w kolorze jakości przedmiotu (plecak, ekwipunek, szczegóły, listy admina) */


[data-rarity=fine] { --rarity-color: var(--rarity-fine); }
[data-rarity=rare] { --rarity-color: var(--rarity-rare); }
[data-rarity=legendary] { --rarity-color: var(--rarity-legendary); }

.equipment-slot[data-rarity],
.inventory-item-icon[data-rarity],
.admin-row-icon[data-rarity] {
  border-color: var(--rarity-color);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rarity-color) 35%, transparent), inset 0 0 14px #0005, 0 0 10px color-mix(in srgb, var(--rarity-color) 22%, transparent);
}

.equipment-slot[data-rarity]:after { background: var(--rarity-color); }
.equipment-slot[data-rarity=legendary] { background: linear-gradient(145deg, #34302a, #1a1814); }
.equipment-slot[data-rarity=rare] { background: linear-gradient(145deg, #262d38, #14181f); }
.equipment-slot[data-rarity=fine] { background: linear-gradient(145deg, #27302a, #151a16); }

.inventory-slot[aria-pressed=true][data-rarity] {
  box-shadow: inset 0 0 0 1px var(--rarity-color), 0 0 15px color-mix(in srgb, var(--rarity-color) 35%, transparent);
}

.equipment-slot:hover, .equipment-slot[aria-expanded=true] {
  border-color: var(--accent);
  background-color: #252d38;
}

.equipment-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 11;
  width: min(280px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 17px 18px;
  border: var(--float-border);
  border-radius: var(--float-radius);
  background: var(--float-bg);
  box-shadow: var(--float-shadow);
  text-align: left;
  overflow-wrap: anywhere;
}

.equipment-tooltip strong {
  display: block;
  margin: 6px 0 8px;
  font-size: var(--h3);
  color: var(--text);
}

.equipment-tooltip p { font-size: var(--fs-body); line-height: 1.7; color: var(--muted); margin: 0; }

/* Statystyki przedmiotu — wspólne dla podpowiedzi i panelu szczegółów */

.item-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.item-stat {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body);
  color: var(--muted);
}

.item-stat-value {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Wiersz z długą wartością (np. lista stworów): etykieta w pierwszym wierszu, wartość zawijana pod nią */
.item-stat-block { grid-template-rows: auto auto; row-gap: 2px; }
.item-stat-block .item-stat-label { grid-column: 2 / -1; }
.item-stat-block .item-stat-value { grid-column: 2 / -1; white-space: normal; line-height: 1.35; }
.item-stat-block .stat-icon { grid-row: 1 / span 2; align-self: start; margin-top: 2px; }

.item-stat-delta { font-weight: 600; font-size: var(--fs-note); }
.item-stat-delta.is-better { color: var(--green); }
.item-stat-delta.is-worse { color: var(--red); }

.item-stat.is-unmet .item-stat-value { color: var(--red); }
.item-stat.is-unmet .item-stat-label { color: var(--red); }

.item-glyph.is-magic, svg.is-magic { filter: drop-shadow(0 0 5px currentColor); }

.item-stat-value-row { padding-top: 5px; border-top: 1px dashed var(--line); }
.item-stat-value-row .item-stat-value { color: var(--accent-tint); }

.stat-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font: 700 14px / 1 var(--serif);
  text-shadow: 0 1px 4px #0008;
}

.stat-icon-ore { width: 17px; height: 17px; color: var(--accent); }

.tooltip-stats { margin-top: 12px; }
.tooltip-stats:empty, .tooltip-stats > .item-stats[hidden] { display: none; }

.detail-stats { margin: 4px 0 12px; padding: 12px 0 0; border-top: 1px solid var(--line); }
.detail-stats:has(> .item-stats[hidden]), .detail-stats:empty { display: none; }

.admin-effects-grid .item-stat-field { display: block; font-size: var(--fs-note); color: var(--muted); }
.admin-effects-grid .item-stat-field > span { display: inline-flex; align-items: center; gap: 5px; }
.admin-effects-grid .item-stat-field input { margin-top: 5px; }

.equipment-tooltip small {
  display: block;
  border-top: 1px solid var(--line);
  margin-top: 13px;
  padding-top: 10px;
  font-size: var(--fs-note);
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
 * 10. Plecak
 * ------------------------------------------------------------------------- */

#inventory-dialog {
  position: fixed;
  z-index: 9;
  inset: 18px 15px 18px calc(var(--sidebar-width) + 15px);
  width: min(870px, calc(100% - var(--sidebar-width) - 30px));
  max-height: calc(100dvh - 36px);
  margin: auto;
  padding: 30px;
  overscroll-behavior: contain;
  background: linear-gradient(140deg, #1c2027, var(--panel) 55%);
}

.inventory-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.inventory-heading h2 { margin: 8px 0; }

.inventory-title-row { display: flex; align-items: center; gap: 10px; }

.info-button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgb(var(--line-strong-rgb) / .5);
  border-radius: 50%;
  background: rgb(var(--accent-rgb) / .07);
  color: var(--accent);
  font: italic 600 var(--fs-ui) var(--serif);
  line-height: 1;
}

.info-button:hover, .info-button[aria-expanded=true] {
  border-color: var(--accent);
  background: rgb(var(--accent-rgb) / .15);
  color: var(--text);
}

.inventory-info-tooltip ul {
  margin: 8px 0 0;
  padding-left: 16px;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--muted);
}

.inventory-info-tooltip li + li { margin-top: 6px; }

.inventory-wallet {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-body);
  color: var(--muted);
}

.inventory-wallet svg { display: block; width: 19px; height: 19px; color: var(--accent); }
.inventory-wallet strong { color: var(--accent-tint); font-variant-numeric: tabular-nums; }

dialog .inventory-intro { font-size: var(--fs-body); margin: 5px 0 23px; }

.inventory-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 25px;
  align-items: start;
}

.inventory-storage { min-width: 0; }

.inventory-section-title {
  line-height: 1.6;
  margin: 0 0 12px;
  color: var(--muted);
}

.inventory-equipped {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 62px));
  gap: 12px;
}

.inventory-equipped .equipment-cell > span { font-size: var(--fs-note); }

.backpack-section {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 18px;
}

.inventory-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

#inventory-count {
  font-size: var(--fs-note);
  color: var(--accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.inventory-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 12px;
}

.inventory-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.inventory-filters[hidden] { display: none; }

.filter-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 7px;
  border: 1px solid rgb(var(--line-strong-rgb) / .25);
  border-radius: 2px;
  background: #ffffff04;
  color: var(--muted);
}
.filter-icon { display: grid; place-items: center; width: 18px; height: 18px; font-size: 13px; color: var(--accent); }
.filter-icon svg, .filter-icon .item-glyph { width: 16px; height: 16px; font-size: 13px; }
.filter-count { padding: 0 5px; border-radius: 3px; background: #ffffff0c; font-size: var(--fs-label); font-variant-numeric: tabular-nums; color: var(--muted); }
.filter-button[aria-pressed=true] .filter-count { background: rgb(var(--accent-rgb) / .2); color: var(--text); }

.filter-button:hover { color: var(--text); border-color: rgb(var(--line-strong-rgb) / .5); }

.filter-button[aria-pressed=true] {
  color: var(--text);
  border-color: var(--accent);
  background: rgb(var(--accent-rgb) / .09);
}

.sort-button {
  padding: 6px 11px;
  border: 1px solid rgb(var(--line-strong-rgb) / .25);
  border-radius: 2px;
  background: transparent;
  color: var(--accent);
}

.sort-button:hover:not(:disabled) { border-color: var(--accent); background: rgb(var(--accent-rgb) / .06); }
.sort-button:disabled { opacity: .4; cursor: default; }

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.inventory-slot { min-width: 0; min-height: 44px; padding: 10px; }
.inventory-slot.is-empty { opacity: .55; }
.inventory-slot.is-empty:hover, .inventory-slot.is-empty[aria-pressed=true] { opacity: .9; }
.inventory-slot:after { display: none; }

/* Ciaśniejszy obrys w gęstej siatce, aby nie nachodził na sąsiednie sloty. */
.inventory-slot:focus-visible { outline-offset: 2px; }

.inventory-slot[aria-pressed=true] {
  border-color: var(--accent-tint);
  box-shadow: inset 0 0 0 1px rgb(var(--accent-tint-rgb) / .4), 0 0 15px rgb(var(--accent-rgb) / .09);
}

.inventory-slot.is-dimmed { opacity: .28; }
.inventory-slot.is-dimmed:hover { opacity: .6; }

.equipment-slot[draggable=true] { cursor: grab; }
.equipment-slot.is-dragging { opacity: .4; cursor: grabbing; }

.equipment-slot.is-drop-target {
  border-color: var(--gold);
  border-style: solid;
  background-color: #2b2a1f;
  box-shadow: 0 0 0 2px rgb(var(--gold-rgb) / .33), 0 0 18px rgb(var(--gold-rgb) / .2);
}

.inventory-slot-number {
  position: absolute;
  top: 3px;
  left: 5px;
  font-size: var(--fs-label);
  color: #8e98a8;
  line-height: 1.4;
}

.inventory-stack-count {
  position: absolute;
  right: 4px;
  bottom: 4px;
  min-width: 21px;
  padding: 1px 4px;
  border: 1px solid rgb(var(--line-strong-rgb) / .38);
  border-radius: 2px;
  background: #0b121eee;
  color: #e0eafa;
  font-size: var(--fs-note);
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.inventory-tooltip {
  pointer-events: none;
  max-width: calc(100vw - var(--sidebar-width) - 24px);
}

.inventory-empty-mark { color: #556170; font-size: 20px; line-height: 1; }

.item-glyph {
  display: block;
  font: 400 26px / 1 var(--serif);
  text-shadow: 0 2px 8px #0008;
}

.equipment-slot.is-empty .item-glyph { opacity: .55; filter: grayscale(.6); }
.inventory-item-icon .item-glyph { font-size: 40px; }
.equipment-grid .equipment-slot .item-glyph { font-size: 22px; }
dialog .inventory-empty { font-size: var(--fs-note); line-height: 1.7; margin: 10px 0 0; }

/* Szczegóły przedmiotu */

.inventory-detail {
  min-width: 0;
  padding: 21px 18px;
  background: #0e131b80;
  border: 1px solid rgb(var(--line-strong-rgb) / .19);
  border-top-color: rgb(var(--line-strong-rgb) / .44);
}

.inventory-item-icon {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  margin-bottom: 21px;
  background: rgb(var(--accent-rgb) / .03);
  border: 1px solid rgb(var(--line-strong-rgb) / .21);
  color: #c1b6a4;
  font-size: 36px;
}

.inventory-item-icon > svg { width: 58px; height: 58px; }
.inventory-item-icon .outfit-cloth { fill: #8b786335; }

.inventory-detail h3 { font-size: var(--h2); margin: 8px 0 10px; overflow-wrap: anywhere; }
dialog .inventory-detail p { font-size: var(--fs-body); line-height: 1.55; overflow-wrap: anywhere; }

dialog .inventory-item-note {
  font-size: var(--fs-note);
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.inventory-item-note:empty { display: none; }

.inventory-detail .button { margin-top: 9px; font-size: var(--fs-body); padding: 12px; gap: 8px; }

/* Wyrzucanie */

.discard-form {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--danger-line);
}

.discard-form h4 { margin: 0; font-size: var(--h3); }
dialog .discard-form p { font-size: var(--fs-note); }

/* Kolory mikstur (ikony) */


.potion-liquid {
  fill: var(--potion-color);
  stroke: var(--potion-color);
  stroke-width: 1;
}

.potion-mark { fill: #101722; font: 700 13px Georgia, serif; }

/* Komunikaty */

dialog .inventory-status { font-size: var(--fs-body); color: var(--accent-tint); margin: 15px 0 0; }
.inventory-status:empty { display: none; }

/* ---------------------------------------------------------------------------
 * 10b. Walka
 * ------------------------------------------------------------------------- */

.combat-screen .dialog-header { margin-bottom: 18px; }

/* Okno wydarzeń nad sceną: droga, odpoczynek, walka. Tło (mapa, panel) zostaje rozmyte. */
.scene-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12;
  background: #060709a8;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: backdrop-in .25s ease both;
}
@keyframes backdrop-in { from { opacity: 0; } }

.scene-dialog {
  position: fixed;
  inset: 0;
  z-index: 13;
  width: min(760px, calc(100% - 30px));
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 30px 34px 32px;
  overflow: auto;
  overscroll-behavior: contain;
  animation: screen-in .3s ease both;
}
.scene-dialog:not([open]) { display: none; }
.scene-panel { animation: pane-in .2s ease; }
.has-character .scene-dialog { left: var(--sidebar-width); width: min(760px, calc(100% - var(--sidebar-width) - 30px)); }
.combat-picker-actions { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
.combat-picker-actions .button { justify-content: center; }

/* Wybór przeciwnika */

.combat-encounter-head { display: grid; gap: 2px; margin-bottom: 4px; }
.combat-encounter-head h3 { margin: 0; font-size: var(--h2); color: var(--red-tint); animation: pane-in .25s ease; }
.combat-pool-note { margin: 0 0 16px; font-size: var(--fs-note); color: var(--muted); }
.enemy-card.is-unknown .enemy-portrait { opacity: .55; filter: grayscale(1); }
.enemy-card.is-unknown .enemy-loot { color: var(--muted); font-style: italic; }
.loot-tile.is-locked { opacity: .7; }
.loot-tile.is-locked .loot-slot-reward { filter: grayscale(1); }

.enemy-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 18px;
  margin: 16px 0 20px;
  padding: 18px;
  border: 1px solid rgb(var(--red-line-rgb) / .25);
  border-radius: var(--radius);
  background: linear-gradient(160deg, #23171a, #14121480);
}

.enemy-portrait, .combat-portrait {
  display: grid;
  place-items: center;
  border: 1px solid rgb(var(--red-line-rgb) / .38);
  border-radius: var(--radius);
  background: radial-gradient(circle at 50% 35%, #3a2224, #17111280);
  color: var(--red-tint);
  font-family: var(--serif);
  text-shadow: 0 0 14px rgb(var(--red-rgb) / .33);
}

.enemy-portrait { width: 88px; height: 88px; font-size: 44px; }
.combat-description { margin: 0 0 12px; font-size: var(--fs-body); }

.enemy-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 14px;
}

.enemy-stat {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-areas: "icon label" "icon value";
  column-gap: 8px;
  align-items: center;
}

.enemy-stat .stat-icon { grid-area: icon; }
.enemy-stat-label { grid-area: label; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.enemy-stat-value { grid-area: value; font-size: var(--fs-ui); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.enemy-loot { margin: 12px 0 0; font-size: var(--fs-note); color: var(--muted); }
.enemy-loot:empty { display: none; }

/* Arena */

.combat-sides {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}

.combat-side {
  padding: 16px 18px;
  border: 1px solid rgb(var(--line-strong-rgb) / .19);
  border-radius: var(--radius);
  background: linear-gradient(160deg, #161c26, #10141b);
}

.combat-side-enemy { border-color: rgb(var(--red-line-rgb) / .31); background: linear-gradient(160deg, #23171a, #151113); }

.combat-side-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.combat-portrait { width: 46px; height: 46px; flex-shrink: 0; font-size: 24px; }
.combat-side-player .combat-portrait { border-color: #6e92bf80; background: radial-gradient(circle at 50% 35%, #24334a, #11182380); color: var(--accent); text-shadow: 0 0 14px rgb(var(--accent-rgb) / .4); }
.combat-side strong { display: block; margin: 2px 0 0; font-size: var(--h2); line-height: 1.2; color: var(--text); overflow-wrap: anywhere; }
.combat-side .resource { margin: 0; }
.combat-side .resource-track { height: 12px; }
.combat-side-enemy .resource-track { height: 14px; }
.combat-side-enemy .resource-fill { background: linear-gradient(90deg, #7a2f2b, var(--red)); }
.combat-log { height: 220px; max-height: 220px; overflow-y: auto; scrollbar-width: thin; list-style: none;   margin: 0;   padding: 12px 16px;   max-height: 190px;   overflow-y: auto;   border: 1px solid var(--line);   border-radius: var(--radius);   background: #0a0c0f;   font-size: var(--fs-body);   line-height: 1.7;   scrollbar-width: thin; }
.combat-log-entry.is-dodge { color: var(--violet); }
.combat-result-summary { margin: 4px 0 16px; font-size: var(--fs-body); color: var(--muted); }
/* Siatka akcji: 3 kolumny; niedostępne kafelki zwijają się do ikony w tej samej komórce */
.combat-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.combat-actions > .action-cast-wrap { display: grid; gap: 6px; align-content: start; }
.combat-actions > .is-unavailable, .combat-actions > .action-cast-wrap.is-unavailable { justify-self: start; }
.action-button.is-unavailable { grid-template-columns: 40px; padding-right: 12px; min-height: 0; }
.action-button.is-unavailable .action-text { display: none; }
.action-cast-wrap.is-unavailable select { display: none; }
.combat-minor-resources { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.combat-minor-resources .resource-track { height: 7px; }

.combat-versus {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  color: var(--accent);
}

.combat-versus span { font-size: 26px; text-shadow: 0 0 16px rgb(var(--accent-rgb) / .4); }
.combat-versus small { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); white-space: nowrap; }

/* Dziennik */

.combat-log-panel { margin: 18px 0 16px; }
.combat-log-panel .inventory-section-title { margin-bottom: 8px; }


.combat-log-round {
  margin-top: 10px;
  padding-bottom: 2px;
  border-bottom: 1px dashed #ffffff10;
  color: var(--accent);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.combat-log-round:first-child { margin-top: 0; }
.combat-log-entry { color: #c4c8ce; padding-left: 12px; position: relative; }
.combat-log-entry::before { content: "›"; position: absolute; left: 0; color: #5a6270; }
.combat-log-entry.is-enemy { color: var(--red-tint); }
.combat-log-entry.is-highlight { color: var(--green-tint); font-weight: 600; }

/* Pasek akcji */

.action-button {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 14px 10px 12px;
  border: 1px solid rgb(var(--line-strong-rgb) / .25);
  border-radius: var(--radius);
  background: linear-gradient(160deg, #1d2229, #14171c);
  color: var(--text);
  text-align: left;
  transition: border-color .15s, background .15s;
}

.action-button:hover:not(:disabled) { border-color: rgb(var(--line-strong-rgb) / .6); background: linear-gradient(160deg, #242b34, #181c22); }
.action-button:disabled { opacity: .45; cursor: default; }

.action-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: #ffffff08;
  font: 400 22px / 1 var(--serif);
  color: var(--accent);
}

.action-attack .action-icon { color: var(--ember); }
.action-shoot .action-icon { color: var(--ember); }
.action-cast .action-icon { color: var(--violet); }
.action-potion .action-icon { color: var(--green); }
.action-flee .action-icon { color: var(--muted); }
.action-flee { border-color: rgb(var(--red-line-rgb) / .25); }
.action-flee:hover:not(:disabled) { border-color: rgb(var(--red-line-rgb) / .67); }

.action-text { display: grid; gap: 2px; min-width: 0; }
.action-label { font-size: var(--fs-ui); font-weight: 600; line-height: 1.2; }
.action-hint { font-size: var(--fs-note); color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }

/* Szybkie mikstury: cały rząd siatki, trzy równe kafelki w kolorze zasobu, z ikoną mikstury */
.quick-potions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.quick-potion { min-height: 56px; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 8px 12px 8px 10px; }
.quick-potion .quick-potion-icon { width: 34px; height: 34px; background: #0b0d10; }
.quick-potion .quick-potion-icon svg { width: 26px; height: 26px; }
.quick-potion .action-label { font-size: var(--fs-body); color: var(--resource-color); }
.quick-potion .action-hint { font-size: var(--fs-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-potion:not(:disabled) { border-color: color-mix(in srgb, var(--resource-color) 45%, transparent); }
.quick-potion:hover:not(:disabled) { border-color: var(--resource-color); }
/* Niedostępna mikstura: wyszarzona, ale zajmuje pełną komórkę, żeby rząd się nie rozjeżdżał */
.quick-potion.is-unavailable { grid-template-columns: 34px minmax(0, 1fr); padding-right: 12px; min-height: 56px; justify-self: stretch; }
.quick-potion.is-unavailable .action-text { display: grid; }
.quick-potion.is-unavailable .quick-potion-icon { filter: grayscale(1); opacity: .5; }
.quick-potion.is-unavailable .action-label { color: var(--muted); }
.action-use { display: grid; gap: 6px; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(200px, 40%); align-items: center; }
.action-cast-wrap { display: grid; gap: 6px; align-content: start; }
.action-cast-wrap select { min-width: 0; padding: 9px 12px; font-size: var(--fs-body); }
.action-use select { min-width: 0; padding: 9px 12px; font-size: var(--fs-body); }
.action-use .action-button { min-height: 0; }

/* Wynik */

.combat-result {
  margin-top: 6px;
  padding: 22px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #0e131b80;
  text-align: center;
}

.combat-result strong { display: block; font: 32px var(--serif); margin-bottom: 14px; letter-spacing: 1px; }
.combat-result[data-outcome=victory] { border-color: rgb(var(--green-rgb) / .4); }
.combat-result[data-outcome=victory] strong { color: var(--green-tint); }
.combat-result[data-outcome=defeat] { border-color: rgb(var(--red-line-rgb) / .4); }
.combat-result[data-outcome=defeat] strong { color: var(--red); }
.combat-result[data-outcome=fled] strong { color: var(--accent); }
.combat-result-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

.combat-arena { display: block; }
.enemy-card-body { min-width: 0; }

/* Podsumowanie po zwycięstwie: nagrody i łupy osobno */

.combat-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin: 6px 0 18px;
  text-align: left;
}

.combat-summary-block {
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #0a0c0fa0;
}

.combat-rewards { border-color: rgb(var(--violet-rgb) / .25); }
.combat-loot { border-color: rgb(var(--green-rgb) / .27); }
.combat-summary-block .inventory-section-title { margin-bottom: 12px; }
.combat-rewards .inventory-section-title { color: var(--violet); }
.combat-loot .inventory-section-title { color: var(--green); }

.combat-loot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 12px;
}

.combat-loot-grid:empty::before {
  content: "—";
  color: #4a5160;
  font-size: var(--fs-body);
}

.loot-tile { display: grid; justify-items: center; gap: 8px; min-width: 0; }
.loot-slot { width: 56px; aspect-ratio: 1; min-height: 56px; padding: 8px; }
.loot-slot:after { display: none; }
.loot-slot-reward { display: grid; place-items: center; cursor: default; }
.loot-slot-reward .item-glyph { font-size: 24px; }
.loot-caption { display: grid; gap: 2px; text-align: center; font-size: var(--fs-note); color: var(--muted); min-width: 0; }
.loot-caption strong { font-family: var(--sans); font-size: var(--fs-body); font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.combat-loot-note { margin: 12px 0 0; font-size: var(--fs-note); color: var(--muted); }
.combat-loot-note:empty { display: none; }
#combat-tooltip { z-index: 30; }

/* Okienko gratulacji */

.levelup-popup {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #06070999;
  backdrop-filter: blur(3px);
}

.levelup-card {
  position: relative;
  width: min(380px, 100%);
  padding: 34px 30px 28px;
  border: 1px solid rgb(var(--gold-rgb) / .55);
  border-radius: var(--float-radius);
  background: linear-gradient(160deg, #2a2417, #15130f 70%);
  box-shadow: var(--float-shadow), 0 0 0 1px rgb(var(--gold-rgb) / .13), inset 0 1px rgb(var(--gold-tint-rgb) / .13);
  text-align: center;
  transform: translateY(12px) scale(.96);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}

.levelup-popup.is-visible .levelup-card { transform: none; opacity: 1; }

.levelup-glow {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border: 1px solid rgb(var(--gold-rgb) / .53);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--gold-rgb) / .2), transparent 70%);
  color: var(--gold);
  font: 400 30px / 1 var(--serif);
  text-shadow: 0 0 18px var(--gold);
}

.levelup-card .eyebrow { color: var(--gold); }
.levelup-card h2 { margin: 6px 0 16px; font-size: var(--h1); color: var(--gold-tint); }

.levelup-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.levelup-entry {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas: "icon title" "icon detail";
  column-gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgb(var(--gold-rgb) / .2);
  border-radius: var(--radius);
  background: #ffffff05;
  text-align: left;
}

.levelup-icon { grid-area: icon; display: grid; place-items: center; width: 34px; height: 34px; font: 400 20px / 1 var(--serif); text-shadow: 0 0 10px currentColor; }
.levelup-entry strong { grid-area: title; font-size: var(--fs-ui); font-weight: 600; color: var(--text); }
.levelup-entry span:last-child { grid-area: detail; font-size: var(--fs-note); color: var(--gold-tint); }
.levelup-card .button.primary { border-color: rgb(var(--gold-rgb) / .53); background: linear-gradient(#4a3d22, #2c2415); color: var(--gold-tint); }
.levelup-card .button.primary:hover { background: linear-gradient(#5a4a2a, #362c1a); }

/* Admin — przeciwnicy */

.admin-enemy-grid label { display: block; font-size: var(--fs-note); color: var(--muted); }
.admin-enemy-grid label > span:first-child { display: block; }
.admin-enemy-grid input { margin-top: 5px; }
.admin-range { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.admin-loot-row { display: grid; grid-template-columns: minmax(0, 2.4fr) 1fr .8fr .8fr 1fr 1.1fr; gap: 8px; margin-top: 8px; }
.admin-loot-row input[id*="hunt"] { border-color: rgba(181, 138, 90, .45); }
.admin-loot-row select, .admin-loot-row input { min-width: 0; padding: 8px 10px; }

@media (max-width: 760px) {
  .admin-loot-row { grid-template-columns: 1fr 1fr 1fr; }
  .admin-loot-row select { grid-column: 1 / -1; }
  .game-screen { padding: 22px 20px 24px; }
  .location-header { grid-template-columns: 64px minmax(0, 1fr); margin: -22px -20px 22px; padding: 22px 20px 20px; gap: 16px; }
  .location-glyph { width: 64px; height: 64px; font-size: 32px; }
  .location-discovered { grid-column: 1 / -1; }
  .location-grid { grid-template-columns: 1fr; gap: 22px; }
  .location-map { height: clamp(260px, 70vw, 420px); }
  .intro-classes { grid-template-columns: 1fr; }
  .encounter-actions { grid-template-columns: 1fr; }
  .travel-actions { grid-template-columns: 1fr; }
  .travel-log { height: 318px; max-height: 318px; }
  .combat-log { height: 160px; max-height: 160px; }
  .npc-dialogue { grid-template-columns: 1fr; }
  .npc-portrait { width: 64px; height: 76px; font-size: 30px; }
  .admin-three-columns { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .combat-sides { grid-template-columns: 1fr; }
  .combat-versus { grid-auto-flow: column; padding: 2px 0; }
  .combat-actions { grid-template-columns: 1fr 1fr; }
  .quick-potions { grid-template-columns: 1fr; }
  .action-use { grid-template-columns: 1fr; }
  .action-use { grid-column: 1 / -1; }
  .enemy-card { grid-template-columns: 1fr; }
  .enemy-portrait { width: 64px; height: 64px; font-size: 32px; }
  .enemy-stats { grid-template-columns: 1fr 1fr; }
  .combat-summary { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * 11. Powiadomienia i panel admina
 * ------------------------------------------------------------------------- */

/* Komunikat o akcji w grze — u góry ekranu, nad wszystkimi oknami. */
#notification {
  position: fixed;
  top: 22px;
  left: 50%;
  z-index: 20;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90vw;
  padding: 14px 23px;
  border: var(--float-border);
  border-radius: var(--float-radius);
  background: var(--float-bg);
  color: var(--text);
  font-size: var(--fs-ui);
  box-shadow: var(--float-shadow);
}

.admin-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 15;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px dashed rgb(var(--line-strong-rgb) / .5);
  border-radius: 3px;
  background: #0b0d10cc;
  color: var(--muted);
  font-size: var(--fs-note);
  opacity: .72;
  transition: opacity .15s ease, color .15s ease;
}
.admin-toggle:hover, .admin-toggle:focus-visible, .admin-toggle[aria-expanded=true] { opacity: 1; }
.admin-toggle:hover, .admin-toggle[aria-expanded=true] { color: var(--text); border-style: solid; }

/* Panel admina — duże, modalne okno z nawigacją po lewej */
.admin-backdrop { position: fixed; inset: 0; z-index: 14; background: #05060899; backdrop-filter: blur(3px); }
body.admin-open { overflow: hidden; }
.admin-panel {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  width: min(1180px, calc(100vw - 32px));
  height: min(860px, calc(100dvh - 32px));
  margin: auto;
  padding: 0;
  border: 1px solid rgb(var(--line-strong-rgb) / .4);
  border-radius: var(--float-radius);
  background: linear-gradient(170deg, #1b1e24, #121418 60%, #0f1115);
  box-shadow: var(--float-shadow), 0 40px 120px #000c;
  overflow: hidden;
}

.admin-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(100deg, #1d2129, #15181e 70%);
}
.admin-heading-text { min-width: 0; }
.admin-heading h3 { margin: 4px 0 6px; font-size: var(--h2); }
.admin-heading-note { margin: 0; max-width: 78ch; font-size: var(--fs-note); line-height: 1.6; color: var(--muted); }
.admin-heading .close-button { position: static; margin: -6px -10px 0 0; }

.admin-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr); }

.admin-tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  border-right: 1px solid var(--line);
  background: #0b0d1055;
  overflow-y: auto;
  scrollbar-width: thin;
}
.admin-tabs [role=tab] {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.admin-tabs [role=tab]:hover { color: var(--text); background: #ffffff08; }
.admin-tabs [role=tab]:focus-visible { outline: none; border-color: rgb(var(--accent-rgb) / .6); }
.admin-tabs [role=tab][aria-selected=true] { color: var(--text); border-color: rgb(var(--accent-rgb) / .35); background: linear-gradient(100deg, rgb(var(--accent-rgb) / .18), #ffffff06); box-shadow: inset 3px 0 0 var(--accent); }
.admin-tab-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 4px; background: #0b0d10aa; border: 1px solid #ffffff14; font-size: 16px; color: var(--accent-tint); }
.admin-tabs [role=tab][aria-selected=true] .admin-tab-icon { color: #fff; background: rgb(var(--accent-rgb) / .3); border-color: rgb(var(--accent-rgb) / .5); }
.admin-tab-text { display: grid; gap: 1px; min-width: 0; }
.admin-tab-name { font-size: var(--fs-body); font-weight: 600; letter-spacing: .02em; }
.admin-tab-desc { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-tabs-separator { height: 1px; margin: 8px 6px; background: var(--line); }

.admin-content { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.admin-pane {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 28px 26px;
  scrollbar-width: thin;
}
.admin-pane.is-disabled { opacity: .55; }

.admin-section-head { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.admin-section-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 5px; border: 1px solid rgb(var(--accent-rgb) / .35); background: linear-gradient(160deg, rgb(var(--accent-rgb) / .22), #0b0d10); font-size: 22px; color: var(--accent-tint); }
.admin-section-title { margin: 2px 0 4px; font-family: var(--serif); font-weight: 400; font-size: var(--h2); color: var(--text); }
.admin-section-desc { margin: 0; max-width: 90ch; font-size: var(--fs-note); line-height: 1.65; color: var(--muted); }
.admin-section-desc:empty { display: none; }

.admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.admin-toolbar-end { justify-content: flex-end; }
.admin-toolbar select { width: auto; flex: 1; max-width: 360px; min-width: 0; padding: 9px 12px; }
.admin-toolbar .admin-note { flex: 1; margin: 0; }
.admin-toolbar-note { display: none; } /* treść pomocy przeniesiona do nagłówka sekcji */
.admin-toolbar .button.small { white-space: nowrap; padding: 9px 14px; }

.admin-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.admin-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 6px; border-bottom: 1px solid var(--line); transition: background .12s ease; }
.admin-row:hover { background: #ffffff05; }
.admin-row-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(var(--line-strong-rgb) / .25);
  border-radius: 2px;
  background: linear-gradient(145deg, #2b2d32, #17191d);
  color: #c1b6a4;
}

.admin-row-icon svg { width: 30px; height: 30px; }
.admin-row-icon .item-glyph { font-size: 22px; }
.admin-row-icon .potion-icon { width: 30px; height: 30px; }

.admin-row-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.admin-row-text strong { font-size: var(--fs-ui); font-weight: 600; overflow-wrap: anywhere; }
.admin-row-meta { font-size: var(--fs-note); color: var(--muted); overflow-wrap: anywhere; line-height: 1.5; }

.admin-row-actions { display: flex; gap: 6px; white-space: nowrap; }
.admin-row-actions .text-button { font-size: var(--fs-note); padding: 6px 10px; border: 1px solid transparent; border-radius: 3px; }
.admin-row-actions .text-button:hover:not(:disabled) { border-color: rgb(var(--line-strong-rgb) / .35); background: #ffffff08; }
.admin-row-actions .text-button:disabled { opacity: .35; cursor: default; }
.danger-text:hover:not(:disabled) { color: var(--danger) !important; }

.admin-note { font-size: var(--fs-note); line-height: 1.7; color: var(--muted); margin: 10px 0 0; }
.admin-status { font-size: var(--fs-note); color: var(--accent-tint); margin: 12px 0 0; }
.admin-status:empty { display: none; }

.admin-form h4 { margin: 0 0 4px; font-size: var(--h3); }
.admin-form > label, .admin-form legend, .admin-form .admin-two-columns label { margin: 14px 0 7px; }
.admin-form .admin-note { margin-top: 6px; }
.admin-form input[type=color] { height: 43px; padding: 4px 6px; }

.admin-two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.admin-form { padding: 18px 20px 20px; border: 1px solid rgb(var(--line-strong-rgb) / .25); border-radius: var(--radius); background: linear-gradient(165deg, #1b2029, #13161b); box-shadow: inset 0 1px #ffffff0a; }
.admin-form h3 { margin: 0 0 4px; font-family: var(--serif); font-weight: 400; font-size: var(--h3); color: var(--accent-tint); }
.admin-form > label:first-of-type { margin-top: 10px; }

.admin-effects { margin: 14px 0 0; }
.admin-effects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }

.admin-form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.admin-form-actions .button { padding: 10px 16px; font-size: var(--fs-body); }

.admin-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 10px;
  font-size: var(--fs-note);
  color: var(--muted);
}

.admin-check input { width: auto; }

.admin-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; }
.admin-check-inline { margin: 0; }
.admin-check-inline .stat-icon { width: 16px; height: 16px; font-size: 12px; }
.admin-two-columns .button.full { margin-top: 8px; }

.admin-panel .button.full { font-size: var(--fs-body); white-space: normal; min-height: 40px; margin-top: 8px; }
.admin-actions { display: grid; gap: 0; }

.test-item-form { margin: 12px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.test-item-form:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.admin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.admin-card { padding: 16px 18px 18px; border: 1px solid rgb(var(--line-strong-rgb) / .22); border-radius: var(--radius); background: linear-gradient(165deg, #1b2029, #13161b); box-shadow: inset 0 1px #ffffff0a; }
.admin-card-wide { grid-column: 1 / -1; }
.admin-card-title { margin: 0 0 4px; font-family: var(--serif); font-weight: 400; font-size: var(--h3); color: var(--accent-tint); }
.admin-card-desc { margin: 0 0 12px; font-size: var(--fs-note); line-height: 1.6; color: var(--muted); }
.admin-card label { display: block; margin: 12px 0 6px; }
.admin-card .admin-form-actions { margin-top: 10px; }
.admin-card .admin-note { margin-top: 0; }
.admin-footer { flex: 0 0 auto; padding: 10px 28px 12px; border-top: 1px solid var(--line); background: #0b0d1055; min-height: 44px; }
.admin-footer .form-error, .admin-footer .admin-status { margin: 0; }
.admin-footer .form-error:empty, .admin-footer .admin-status:empty { display: none; }
.admin-footer:has(.form-error:empty):has(.admin-status:empty) { min-height: 0; padding: 0; border-top: 0; }

.test-item-form select { min-width: 0; }
#content-json { font: 12px / 1.5 ui-monospace, Consolas, monospace; resize: vertical; }


/* ---------------------------------------------------------------------------
 * 11b. Ekran gry: wstęp, lokacja, podróż
 * ------------------------------------------------------------------------- */

.in-game main { padding-top: 28px; padding-bottom: 40px; }

.game { max-width: 980px; margin: 0 auto; }

.game-screen {
  position: relative;
  padding: 30px 34px 34px;
  border: 1px solid rgb(var(--line-strong-rgb) / .19);
  border-radius: 6px;
  background:
    radial-gradient(ellipse at 100% 0%, rgb(var(--accent-rgb) / .05), transparent 55%),
    linear-gradient(165deg, #171a20, #0f1114 70%);
  box-shadow: 0 30px 80px #0008, inset 0 1px #ffffff0a;
  animation: screen-in .3s ease both;
}

@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } }

.game-screen h2, .scene-dialog h2 { margin: 4px 0 8px; font-size: 26px; line-height: 1.15; }
.game-screen h2:focus { outline: none; }
.block-title {
  margin: 0 0 12px;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

/* Wstęp — rozmowa z Diego */

.intro-screen { overflow: hidden; }

.intro-scene {
  position: absolute;
  inset: 0 0 auto 0;
  height: 190px;
  background:
    radial-gradient(ellipse at 50% 120%, #2a3650 0%, transparent 60%),
    linear-gradient(#0b0d12, transparent);
  pointer-events: none;
}

.intro-barrier {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 36px;
  height: 120px;
  border-radius: 50%;
  border-top: 1px solid #9fc0ef66;
  box-shadow: 0 -18px 50px #6f9bdc33, 0 -2px 12px #b7d2ff44;
  mask-image: linear-gradient(#000 20%, transparent 70%);
  -webkit-mask-image: linear-gradient(#000 20%, transparent 70%);
}

.intro-body { position: relative; max-width: 760px; margin: 0 auto; }

.npc-dialogue {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 18px;
  margin: 22px 0 24px;
}

.npc-portrait {
  display: grid;
  place-items: center;
  width: 76px;
  height: 92px;
  border: 1px solid rgb(var(--ember-rgb) / .4);
  border-radius: var(--radius);
  background: radial-gradient(circle at 50% 30%, #4a3a24, #1a150f 75%);
  color: var(--ember);
  font-family: var(--serif);
  font-size: 36px;
  text-shadow: 0 0 16px rgb(var(--ember-rgb) / .4);
  box-shadow: inset 0 1px rgb(var(--gold-tint-rgb) / .13), 0 10px 30px #0007;
}

.npc-lines { display: grid; gap: 12px; align-content: start; }
.npc-name { display: flex; align-items: baseline; gap: 10px; }
.npc-name strong { font-family: var(--serif); font-size: var(--h3); font-weight: 400; color: var(--ember); }
.npc-name span { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }

.npc-line {
  position: relative;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid rgb(var(--ember-rgb) / .2);
  border-left: 2px solid rgb(var(--ember-rgb) / .53);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgb(var(--ember-rgb) / .05);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ember-tint);
}

.npc-line:empty { display: none; }
.npc-question { color: var(--text); font-style: italic; }

.intro-step { display: grid; gap: 16px; }

.intro-classes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.intro-class-card {
  display: grid;
  gap: 12px;
  padding: 18px 16px 16px;
  border: 1px solid rgb(var(--line-strong-rgb) / .25);
  border-radius: var(--radius);
  background: linear-gradient(170deg, #1c2129, #12151a);
  color: var(--text);
  text-align: left;
  transition: border-color .15s, transform .15s, background .15s;
}

.intro-class-card:hover { border-color: rgb(var(--accent-rgb) / .67); background: linear-gradient(170deg, #232a34, #161a20); transform: translateY(-2px); }
.intro-class-card[aria-pressed=true] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.intro-class-card .class-icon { width: 44px; height: 44px; font-size: 24px; }
.intro-class-body { display: grid; gap: 8px; }
.intro-class-body strong { font-family: var(--serif); font-size: var(--h3); font-weight: 400; }
.intro-class-answer { font-size: var(--fs-body); line-height: 1.5; color: var(--ember-tint); font-style: italic; }
.intro-class-bonus { font-size: var(--fs-note); line-height: 1.45; color: var(--green); }
.intro-class-bonus-minor { color: var(--muted); }
.intro-note { margin: 0; font-size: var(--fs-note); color: var(--muted); }

.intro-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.intro-chosen strong { font-family: var(--serif); font-size: var(--h3); font-weight: 400; }
.intro-form { display: grid; gap: 6px; max-width: 520px; }
.intro-form label { margin-top: 10px; font-size: var(--fs-body); font-weight: 600; color: #cdd1d7; }
.intro-form .button { margin-top: 14px; }

/* Widok lokacji */

.location-header {
  --location-color: var(--accent);
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  margin: -30px -34px 26px;
  padding: 30px 34px 26px;
  border-bottom: 1px solid #ffffff10;
  border-radius: 6px 6px 0 0;
  background:
    radial-gradient(ellipse at 0% 50%, color-mix(in srgb, var(--location-color) 22%, transparent), transparent 60%),
    linear-gradient(90deg, color-mix(in srgb, var(--location-color) 10%, #121419), #12141900);
}

.location-glyph {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 1px solid color-mix(in srgb, var(--location-color) 55%, transparent);
  border-radius: var(--radius);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--location-color) 28%, #0c0d10), #0c0d10 80%);
  font-family: var(--serif);
  font-size: 42px;
  text-shadow: 0 0 18px currentColor;
  box-shadow: inset 0 1px #ffffff14, 0 12px 30px #0007;
}

.location-head-text { min-width: 0; }
.location-head-text .class-tag { color: var(--location-color); }
.location-head-text h2 { margin: 6px 0 8px; }
.location-description { margin: 0; max-width: 60ch; font-size: var(--fs-body); line-height: 1.55; color: var(--muted); }
.location-discovered { align-self: start; white-space: nowrap; font-size: var(--fs-note); color: var(--muted); }

.location-grid { display: grid; grid-template-columns: minmax(260px, 2fr) minmax(0, 3fr); gap: 26px; align-items: start; }
.location-block { min-width: 0; }
.location-actions { display: grid; gap: 10px; }
.location-actions .action-button { min-height: 60px; }
.action-rest .action-icon { color: var(--violet); }
.action-rest-camp .action-icon { color: var(--ember); }
.action-backpack .action-icon { color: var(--accent); }
.location-note { margin: 10px 0 0; font-size: var(--fs-note); color: var(--muted); }
.location-note:empty { display: none; }

/* Karta celu */

.destination-card {
  margin-top: 18px;
  padding: 16px 16px 14px;
  border: 1px solid rgb(var(--accent-rgb) / .4);
  border-radius: var(--radius);
  background: linear-gradient(165deg, #1b2029, #13161b);
  box-shadow: 0 14px 40px #0007, inset 0 1px #ffffff0a;
  animation: pane-in .2s ease;
}

.destination-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 28px; gap: 12px; align-items: start; }
.destination-glyph {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #ffffff14;
  border-radius: var(--radius);
  background: #0b0d10;
  font: 400 24px / 1 var(--serif);
  text-shadow: 0 0 10px currentColor;
}
.destination-title { min-width: 0; }
.destination-title h4 { margin: 3px 0 4px; font-size: var(--h3); line-height: 1.2; }
.destination-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.destination-close { position: static; width: 28px; height: 28px; padding: 0; font-size: 20px; }
.destination-description { margin: 12px 0 10px; font-size: var(--fs-body); line-height: 1.55; color: var(--muted); }
.destination-card .tooltip-stats { margin-bottom: 12px; }
.destination-card .exit-warning { margin: 0 0 12px; }
.destination-go { width: 100%; text-align: left; border-color: rgb(var(--accent-rgb) / .5); }
.destination-go .action-icon { color: var(--accent); }
.destination-go.is-exhausting { border-color: rgb(var(--gold-rgb) / .5); }
.destination-go.is-exhausting .action-icon { color: var(--gold); }

.exit-warning { font-size: var(--fs-note); color: var(--gold); line-height: 1.35; }
.exit-tag {
  display: inline-block;
  padding: 0 6px;
  border-radius: 3px;
  background: rgb(var(--accent-rgb) / .13);
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.exit-tag-rest { background: rgb(var(--ember-rgb) / .13); color: var(--ember); }

.location-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -8px 0 20px;
  padding: 12px 16px;
  border: 1px solid rgb(var(--gold-rgb) / .4);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background: linear-gradient(90deg, rgb(var(--gold-rgb) / .1), rgb(var(--gold-rgb) / .02));
  color: var(--gold-tint);
  font-size: var(--fs-body);
  animation: banner-in .35s ease both;
}
.location-banner[data-kind=arrived], .location-banner[data-kind=back] { border-color: rgb(var(--accent-rgb) / .4); border-left-color: var(--accent); background: linear-gradient(90deg, rgb(var(--accent-rgb) / .1), rgb(var(--accent-rgb) / .02)); color: var(--accent-tint); }
.location-banner-icon { color: var(--gold); font-size: 16px; }
.location-banner-text { flex: 1; min-width: 0; }
.location-banner-close { position: static; flex: none; width: 28px; height: 28px; font-size: 18px; }
.location-banner[data-kind=arrived] .location-banner-icon, .location-banner[data-kind=back] .location-banner-icon { color: var(--accent); }
@keyframes banner-in { from { opacity: 0; transform: translateY(-6px); } }

.location-warning {
  margin: -8px 0 20px;
  padding: 10px 14px 10px 38px;
  position: relative;
  border: 1px solid rgb(var(--gold-rgb) / .33);
  border-radius: var(--radius);
  background: rgb(var(--gold-rgb) / .05);
  font-size: var(--fs-body);
  color: var(--gold-tint);
}
.location-warning::before { content: "ϟ"; position: absolute; left: 14px; top: 8px; font-size: 16px; color: var(--gold); }

/* Mini-mapa */

.location-map-block { min-width: 0; }
.location-map-frame {
  position: relative;
  border: 1px solid rgb(var(--line-strong-rgb) / .19);
  border-radius: var(--radius);
  background: radial-gradient(ellipse at 30% 20%, rgb(var(--accent-rgb) / .05), transparent 55%), #0b0d10;
  box-shadow: inset 0 0 40px #0008;
  overflow: hidden;
}
.location-map { display: block; width: 100%; height: clamp(340px, 40vw, 540px); font-family: var(--sans); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.location-map-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 48px 10px #0b0d10; border-radius: inherit; }
.map-zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: grid;
  gap: 4px;
  padding: 4px;
  border: var(--float-border);
  border-radius: var(--float-radius);
  background: #0f1114e6;
  box-shadow: 0 8px 24px #0008;
}
.map-zoom-button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgb(var(--line-strong-rgb) / .3);
  border-radius: 3px;
  background: #ffffff06;
  color: var(--text);
  font: 400 18px / 1 var(--serif);
}
.map-zoom-button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-tint); background: rgb(var(--accent-rgb) / .12); }
.map-zoom-button:disabled { opacity: .35; cursor: default; }
.map-zoom-reset { font-size: 15px; }
.map-center { font-size: 15px; color: var(--accent); }
.location-map.is-dragging { cursor: grabbing; }
.location-map.is-dragging .map-node { cursor: grabbing; }
.map-zoom-level { text-align: center; font-size: 10px; letter-spacing: .3px; color: var(--muted); font-variant-numeric: tabular-nums; }
.map-grid line { stroke: #ffffff07; stroke-width: .3; }
.map-edge { fill: none; stroke: rgb(var(--line-strong-rgb) / .4); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.map-edge.is-adjacent { stroke: rgb(var(--accent-rgb) / .8); stroke-width: 1.5; }
.map-edge.is-unknown { stroke-dasharray: 1.6 1.6; stroke: rgb(var(--line-strong-rgb) / .3); }
.map-badge rect { fill: #0b0d10; stroke: rgb(var(--accent-rgb) / .8); stroke-width: .35; }
.map-badge text { font-size: 2.4px; font-weight: 600; fill: var(--accent-tint); pointer-events: none; }
.map-select { fill: none; stroke: var(--accent); stroke-width: .6; opacity: 0; transition: opacity .15s; }
.map-node.is-selected .map-select { opacity: 1; }
.map-node.is-selected .map-tile { filter: drop-shadow(0 0 1.8px var(--node-color, #89a5c9)); }
.map-node { cursor: default; outline: none; }
.map-node.is-adjacent { cursor: pointer; }
.map-tile { fill: #171c24; stroke: var(--node-color, #5a6270); stroke-width: .55; transition: stroke-width .15s, filter .15s; }
.map-node.is-unknown .map-tile { stroke-dasharray: 1.1 .9; fill: #11151b; }
.map-node.is-current .map-tile { fill: var(--node-color, var(--accent)); }
.map-ring { fill: none; stroke: var(--node-color, var(--accent)); stroke-width: .5; opacity: .9; animation: map-pulse 2s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes map-pulse { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.18); opacity: 0; } }
.map-glyph { font-size: 4.2px; fill: var(--node-color, #6a7280); font-family: var(--serif); pointer-events: none; }
.map-node.is-current .map-glyph { fill: #0b0d10; }
.map-node.is-unknown .map-glyph { fill: #6a7280; font-family: var(--sans); font-weight: 700; }
.map-label { font-size: 2.6px; fill: var(--muted); pointer-events: none; }
.map-node.is-current .map-label { fill: var(--text); font-weight: 600; }
.map-node.is-adjacent .map-label { fill: #c4c8ce; }
.map-node.is-unknown .map-label { fill: #5a6270; }
.map-fire { font-size: 3px; fill: var(--ember); pointer-events: none; }
.map-node.is-adjacent:hover .map-tile, .map-node.is-adjacent:focus-visible .map-tile { stroke-width: 1; filter: drop-shadow(0 0 1.5px var(--node-color, #89a5c9)); }
.map-node.is-adjacent:hover .map-label, .map-node.is-adjacent:focus-visible .map-label { fill: var(--text); }
.exit-tooltip { z-index: 30; }
.admin-row-fields-xy { grid-template-columns: 1fr 1fr; }

.journal { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.journal-list {
  display: grid;
  gap: 6px;
  max-height: 150px;
  margin: 0;
  padding: 0 0 0 18px;
  overflow-y: auto;
  scrollbar-width: thin;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--muted);
}
.journal-list li::marker { color: #4a5160; }
.journal-list li:last-child { color: var(--text); }

/* Podróż */

.travel-screen { text-align: center; }
.travel-screen .eyebrow { justify-content: center; }
.travel-note { margin: 0 auto 26px; max-width: 48ch; font-size: var(--fs-body); color: var(--muted); }

.travel-progress {
  position: relative;
  height: 10px;
  max-width: 560px;
  margin: 0 auto 28px;
  border-radius: 5px;
  background: #ffffff0f;
  box-shadow: inset 0 1px 2px #0008;
}

.travel-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 5px;
  background: linear-gradient(90deg, #4f6a8f, var(--accent));
  box-shadow: 0 0 12px rgb(var(--accent-rgb) / .4);
  transition: width .45s ease;
}

.travel-marks { position: absolute; inset: 0; pointer-events: none; }
.travel-marks i {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 18px;
  margin-left: -1px;
  border-radius: 1px;
  background: #ffffff22;
}
.travel-marks i.is-done { background: var(--accent); box-shadow: 0 0 8px rgb(var(--accent-rgb) / .53); }
.travel-marks i:last-child { background: rgb(var(--gold-rgb) / .53); }
.travel-progress[hidden] + .rest-gains + .travel-step-label, .rest-gains:not([hidden]) + .travel-step-label { margin-top: 0; }
.travel-step-label { margin: -14px 0 18px; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }

.travel-log {
  display: grid;
  gap: 8px;
  max-width: 560px;
  min-height: 56px;
  margin: 0 auto 26px;
  padding: 0;
  list-style: none;
  text-align: left;
  height: 318px; max-height: 318px; align-content: start; overflow: hidden; padding-right: 2px;
}

/* Stała wysokość logu: nowe wpisy nie rozpychają okna, więc przycisk nad logiem stoi w miejscu */
/* Stała wysokość na 6 wpisów; nic się nie ścieśnia — nadmiar wygasa i znika */
.travel-line.is-leaving { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -8px; border-top-width: 0; border-bottom-width: 0; transition: max-height .4s ease, padding .4s ease, margin .4s ease, opacity .25s ease; }

.travel-line {
  position: relative;
  max-height: 200px;
  padding: 10px 14px 10px 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff05;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--muted);
  overflow: hidden;
  transform: none;
  transition: max-height .45s ease, padding .45s ease, margin .45s ease, opacity .4s ease .1s, transform .45s ease, color .3s, border-color .3s;
}

/* Stan początkowy nowego wiersza: zwinięty i przezroczysty — po klatce rozwija się i spycha starsze w dół */
.travel-line.is-entering {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: -8px;
  border-top-width: 0;
  border-bottom-width: 0;
  opacity: 0;
  transform: translateY(-10px);
}

.travel-line::before { content: "·"; position: absolute; left: 14px; top: 9px; font-size: 18px; line-height: 1; color: #4a5160; }
.travel-line:first-child { color: var(--text); border-color: rgb(var(--line-strong-rgb) / .25); }
.travel-line:not(:first-child) { opacity: .75; }
.travel-line.is-warning { border-color: rgb(var(--gold-rgb) / .33); color: var(--gold-tint); }
.travel-line.is-warning::before { content: "!"; color: var(--gold); font-weight: 700; font-size: 14px; top: 10px; }
.travel-line.is-danger { border-color: rgb(var(--red-rgb) / .4); background: rgb(var(--red-rgb) / .05); color: var(--red-tint); }
.travel-line.is-danger::before { content: "☠"; color: var(--red); font-size: 13px; top: 11px; }

.travel-actions { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px; width: min(560px, 100%); margin: 0 auto 14px; }
.travel-actions:has(#travel-leave[hidden]) { grid-template-columns: 1fr; }
.travel-next { width: 100%; text-align: left; border-color: rgb(var(--accent-rgb) / .4); }
.travel-leave { width: 100%; text-align: left; }
.travel-next[data-phase=arrive] { border-color: rgb(var(--green-rgb) / .53); }

.travel-next[data-phase=arrive] .action-icon { color: var(--green); }
.travel-next .action-icon { color: var(--accent); }

.encounter-breakdown { margin: -6px 0 14px; font-size: var(--fs-note); line-height: 1.5; color: var(--muted); }

.encounter { text-align: left; max-width: 640px; margin: 0 auto; animation: screen-in .3s ease both; }
.encounter-card h3 { margin: 0 0 6px; font-size: var(--h2); color: var(--red-tint); }
.encounter-card .enemy-stats { display: block; margin: 0; font-size: var(--fs-note); color: var(--muted); }
.encounter-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#encounter-sneak .action-icon { color: var(--violet); }
#encounter-back .action-icon { color: var(--muted); }

/* Premia klasy przy nazwie umiejętności */

.lang-badge {
  display: inline-block;
  margin-left: 2px;
  padding: 0 4px;
  border: 1px solid rgb(var(--accent-rgb) / .4);
  border-radius: 3px;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .4px;
  vertical-align: 2px;
}

.skill-class-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 3px;
  background: rgb(var(--green-rgb) / .13);
  color: var(--green);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .4px;
  vertical-align: 1px;
}

/* Formularz lokacji w panelu admina */

.admin-fieldset { margin: 16px 0 0; padding: 12px 16px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #0b0d1044; }
.admin-fieldset legend { padding: 0 6px; font-size: var(--fs-note); color: var(--muted); }
.admin-row-fields { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 10px; margin-top: 8px; }
.admin-row-fields-3 { grid-template-columns: minmax(0, 1fr) 110px 110px; }
.admin-three-columns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.admin-three-columns label { margin: 14px 0 7px; display: block; }
.admin-color { display: grid; gap: 6px; }
.admin-color input[type=color] { width: 100%; }

/* ---------------------------------------------------------------------------
 * 12. Responsywność
 * ------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  #inventory-dialog { padding: 28px 18px 20px; }
  .inventory-layout { grid-template-columns: 1fr; gap: 20px; }
  .inventory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .inventory-detail { padding: 16px; }
  .inventory-item-icon { width: 58px; height: 58px; margin-bottom: 12px; }
  .inventory-item-icon > svg { width: 42px; height: 42px; }
  .inventory-detail h3 { font-size: 22px; }
}

/* Panel postaci obok węższej treści */
@media (min-width: 761px) and (max-width: 1250px) {
  .has-character { --sidebar-width: 276px; }
  .has-character .header, .has-character main, .has-character footer { padding-left: 28px; padding-right: 28px; }
  .has-character .hero { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; }
  .has-character .hero-art { max-width: 400px; margin: 0 auto; }
}

@media (max-width: 900px) {
  .header, main, footer { padding-left: 28px; padding-right: 28px; }
  nav { gap: 16px; }
  .hero { gap: 32px; padding: 44px 0 40px; }
  .class-card { padding: 20px; }
}

/* Panel postaci jako karta u góry ekranu */
@media (max-width: 760px) {
  .has-character {
    --mobile-card-height: 46dvh;
    padding-left: 0;
    padding-top: var(--mobile-card-height);
  }

  .has-character .header { min-height: 85px; }

  .character-panel {
    width: 100%;
    height: var(--mobile-card-height);
    bottom: auto;
    padding: 18px 22px;
    border-right: 0;
    border-bottom: 1px solid rgb(var(--line-strong-rgb) / .44);
    box-shadow: 0 8px 30px #0005;
  }

  .character-panel { padding: 0 18px 14px; }
  .panel-compass { margin: 0 -18px 12px; padding: 10px 18px 10px; grid-template-columns: 30px minmax(0, 1fr) auto; }
  .panel-compass-glyph { width: 30px; height: 30px; font-size: 16px; }
  .character-content { margin-bottom: 10px; }
  .character-content p { display: none; }
  .character-resources { grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-bottom: 10px; }
  .resource-experience { grid-column: 1 / -1; }
  .panel-fixed { padding-bottom: 10px; }
  .character-panel .backpack-button { min-height: 38px; }
  .panel-tabs { margin: 0 -18px; padding: 0 18px; }
  .panel-tabs [role=tab] { padding: 10px 4px 8px; }
  .panel-pane { padding-top: 12px; }
  .character-panel .equipment-inspector { max-width: 300px; }

  .has-character .scene-dialog {
    left: 10px;
    inset: calc(var(--mobile-card-height) + 10px) 10px 10px;
    width: calc(100% - 20px);
    max-height: calc(100dvh - var(--mobile-card-height) - 20px);
    padding: 22px 18px 24px;
  }

  #inventory-dialog {
    inset: calc(var(--mobile-card-height) + 10px) 10px 10px;
    width: calc(100% - 20px);
    max-height: calc(100dvh - var(--mobile-card-height) - 20px);
  }

  .inventory-tooltip {
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - var(--mobile-card-height) - 24px);
  }
}

@media (max-width: 650px) {
  .header, main, footer { padding-left: 22px; padding-right: 22px; }

  .header {
    height: auto;
    min-height: 85px;
    padding-top: 16px;
    padding-bottom: 16px;
    gap: 12px;
  }

  .header nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
    gap: 8px 13px;
    font-size: var(--fs-body);
  }

  .brand { font-size: 16px; letter-spacing: 3px; }
  .brand-symbol { margin-right: 2px; font-size: 25px; }
  .world-link { display: none; }
  .lang-switch { padding-left: 8px; }
  .button.small { padding: 8px 11px; font-size: var(--fs-body); gap: 8px; }
  .button.small span { display: none; }
  #profile-label { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }

  .hero { grid-template-columns: 1fr; gap: 28px; padding: 36px 0 24px; }
  .hero-copy { max-width: none; }
  .hero-art { max-width: 340px; margin: 0 auto; }

  .class-grid { grid-template-columns: 1fr; gap: 12px; }
  .class-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "icon title" "icon text" "icon tag"; column-gap: 16px; row-gap: 6px; }
  .class-icon { grid-area: icon; }
  .class-card h3 { grid-area: title; margin: 0; }
  .class-card p { grid-area: text; }
  .class-card .class-tag { grid-area: tag; }
  h2 { font-size: 26px; }
  .world-section { padding-top: 32px; }

  footer {
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 23px;
    padding-bottom: 23px;
    gap: 12px;
  }

  footer > span:nth-child(2) { display: none; }

  dialog { padding: 28px 20px 26px; }
  dialog h2 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Jedna reguła dla wszystkiego: żadnych animacji ani przejść (obejmuje też kartę celu, nagłówek spotkania i paski) */
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------------
 * Frakcje: przynależność, reputacja, odznaka lokacji
 * ------------------------------------------------------------------------- */
.reputation { margin: 0 0 14px; }
.reputation-list { display: grid; gap: 2px; }
.reputation-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 10px; margin: 0 -6px; padding: 6px 6px; border-radius: 3px; cursor: pointer; min-width: 0; transition: background .15s ease; }
.reputation-row:hover, .reputation-row:focus-visible { background: #ffffff0a; outline: none; }
.reputation-glyph { width: 26px; height: 26px; border-radius: 50%; border-color: currentColor; background: color-mix(in srgb, currentColor 18%, #0b0d10); box-shadow: inset 0 1px #ffffff14; font-size: 13px; }
.reputation-text { min-width: 0; }
.reputation-text .skill-heading { grid-template-columns: minmax(0, 1fr) auto; }
.reputation-name { font-size: var(--fs-body); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reputation-member { font-size: var(--fs-note); color: var(--gold-tint); margin-left: 4px; }
.reputation-value { font-size: var(--fs-note); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.reputation-sub { display: flex; justify-content: flex-end; margin-top: 3px; font-size: var(--fs-note); color: var(--muted); }
.reputation-row[data-level="trusted"] .reputation-value, .reputation-row[data-level="respected"] .reputation-value,
.reputation-row[data-level="trusted"] .reputation-level, .reputation-row[data-level="respected"] .reputation-level { color: var(--green); }
.reputation-row[data-level="enemy"] .reputation-value, .reputation-row[data-level="distrust"] .reputation-value,
.reputation-row[data-level="enemy"] .reputation-level, .reputation-row[data-level="distrust"] .reputation-level { color: var(--red); }
.faction-row { cursor: pointer; }
.faction-row:hover, .faction-row:focus-visible { background: rgb(var(--line-strong-rgb) / .12); outline: none; border-radius: 3px; }
.reputation-track { position: relative; height: 5px; margin-top: 4px; border-radius: 2px; background: #0b0d10cc; border: 1px solid rgb(var(--line-strong-rgb) / .25); overflow: hidden; }
.reputation-zero { position: absolute; left: 50%; top: -1px; bottom: -1px; width: 1px; background: rgb(var(--line-strong-rgb) / .6); }
.reputation-fill { position: absolute; top: 0; bottom: 0; background: var(--green); transition: left .42s ease, width .42s ease; }
.reputation-fill.is-negative { background: var(--red); }
.location-tags { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.location-faction { display: inline-flex; align-items: center; gap: 5px; }
.location-faction-glyph { font-size: 12px; }
.caste-branch { font-size: var(--fs-note); color: var(--muted); white-space: nowrap; }
.admin-json { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; line-height: 1.4; }

/* Karta frakcji — „herb obozu”: sztandar w kolorze frakcji, emblemat, pozycja gracza i drzewko kast */
.faction-dialog {
  --faction-color: var(--accent);
  --faction-soft: color-mix(in srgb, var(--faction-color) 16%, #121418);
  --faction-line: color-mix(in srgb, var(--faction-color) 48%, transparent);
  --faction-glow: color-mix(in srgb, var(--faction-color) 35%, transparent);
  position: relative;
  width: min(780px, calc(100% - 30px));
  max-height: calc(100dvh - 40px);
  flex-direction: column;
  padding: 0;
  overflow: hidden; /* sztandar nie wystaje poza zaokrąglenie; przewija się .faction-card-body */
  border: 1px solid var(--faction-line);
  background: linear-gradient(170deg, #1b1e24, #121418 60%, #0f1115);
  box-shadow: var(--float-shadow), 0 0 80px -20px var(--faction-glow), 0 40px 120px #000a;
}
.faction-dialog[open] { display: flex; } /* tylko otwarta — zamknięty <dialog> ma zostać display:none, inaczej pusta karta wystaje pod stopką */
.faction-card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0 32px 28px; }
.faction-dialog .close-button { z-index: 2; color: #fff; text-shadow: 0 1px 2px #000a; }
.faction-dialog .close-button:hover, .faction-dialog .close-button:focus-visible { color: #fff; background: #0006; }

.faction-card-head {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 26px 64px 22px 32px; /* prawy margines zostawia miejsce na przycisk zamknięcia */
  margin: 0;
  isolation: isolate;
}
.faction-card-banner {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--faction-color) 55%, #000) 0%, transparent 55%),
    linear-gradient(100deg, color-mix(in srgb, var(--faction-color) 42%, #0b0d10) 0%, color-mix(in srgb, var(--faction-color) 18%, #0b0d10) 55%, #0f1115 100%);
  border-bottom: 1px solid var(--faction-line);
}
.faction-card-banner::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 3px;
  background: linear-gradient(90deg, var(--faction-color), transparent 70%);
  opacity: .9;
}
.faction-card-emblem {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--faction-color) 75%, #fff);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--faction-color) 60%, #fff) 0%, var(--faction-color) 38%, color-mix(in srgb, var(--faction-color) 55%, #000) 100%);
  box-shadow: 0 0 0 5px #0b0d10, 0 0 0 6px var(--faction-line), 0 10px 30px -6px var(--faction-glow), inset 0 2px 6px #fff3;
}
.faction-card-glyph { font-size: 40px; line-height: 1; color: #fff; text-shadow: 0 2px 6px #0008; }
.faction-card-title { min-width: 0; }
.faction-card-title .class-tag { color: color-mix(in srgb, var(--faction-color) 35%, #fff); letter-spacing: .14em; }
.faction-card-title h2 {
  margin: 4px 0 6px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 32px);
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 8px #0009;
}
.faction-card-leader { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: var(--fs-body); color: #e8e4dc; }
.faction-card-leader::before { content: "♛"; font-size: 13px; color: var(--gold); }
/* Zakładki obozów pod sztandarem — jeden rząd, aktywna „wyrasta” z paska */
.faction-card-switch { flex: 0 0 auto; display: flex; gap: 4px; padding: 10px 32px 0; margin: 0 0 18px; border-bottom: 1px solid #ffffff12; background: #0b0d1055; }
.faction-switch {
  --faction-color: var(--accent);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 9px;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-bottom-color: transparent;
  border-radius: 4px 4px 0 0;
  background: transparent;
  color: var(--muted);
  font: inherit; font-size: var(--fs-note);
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.faction-switch:hover, .faction-switch:focus-visible { color: #fff; background: #ffffff0a; outline: none; }
.faction-switch.is-active { color: #fff; border-color: #ffffff1c; border-bottom-color: #121418; background: linear-gradient(180deg, color-mix(in srgb, var(--faction-color) 26%, #121418), #121418); box-shadow: inset 0 2px 0 var(--faction-color); }
.faction-switch-glyph { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--faction-color); color: #fff; font-size: 12px; box-shadow: 0 0 0 1px #0008; }
.faction-switch-name { font-weight: 600; letter-spacing: .04em; }

.faction-card-description {
  margin: 0 0 20px;
  padding-left: 14px;
  border-left: 2px solid var(--faction-line);
  font-family: var(--serif);
  font-size: calc(var(--fs-body) + 1px);
  line-height: 1.6;
  color: var(--ember-tint);
}

.faction-card-standing, .caste-details {
  position: relative;
  padding: 16px 18px;
  border: 1px solid #ffffff14;
  border-radius: var(--radius);
  background: linear-gradient(165deg, #1b2029, #13161b);
  box-shadow: inset 0 1px #ffffff0a;
}
.faction-card-standing { margin-bottom: 22px; }
.faction-card-standing .block-title, .faction-card-tree .block-title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--faction-color); }
.faction-card-standing .block-title::after, .faction-card-tree .block-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--faction-line), transparent); }
.faction-card-standing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
.faction-card-rep .skill-heading { grid-template-columns: minmax(0, 1fr) auto; font-size: var(--fs-body); color: var(--text); }
.faction-card-track { height: 10px; margin-top: 8px; border-radius: 5px; background: linear-gradient(180deg, #08090b, #111318); box-shadow: inset 0 1px 3px #000c; }
.faction-card-track .reputation-zero { width: 2px; background: #ffffff55; }
.faction-card-track .reputation-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--green) 70%, #fff0), var(--green)); box-shadow: 0 0 10px rgb(var(--green-rgb) / .45); }
.faction-card-track .reputation-fill.is-negative { background: linear-gradient(270deg, color-mix(in srgb, var(--red) 70%, #fff0), var(--red)); box-shadow: 0 0 10px rgb(var(--red-rgb) / .45); }
.faction-card-scale { display: flex; justify-content: space-between; margin-top: 5px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
#faction-dialog-rep-value { font-weight: 600; white-space: nowrap; padding: 2px 8px; border-radius: 3px; background: #ffffff0d; color: var(--text); }
#faction-dialog-rep-value[data-level="trusted"], #faction-dialog-rep-value[data-level="respected"] { color: var(--green-tint); background: rgb(var(--green-rgb) / .14); }
#faction-dialog-rep-value[data-level="acquaintance"] { color: var(--gold-tint); background: rgb(var(--gold-rgb) / .14); }
#faction-dialog-rep-value[data-level="enemy"], #faction-dialog-rep-value[data-level="distrust"] { color: var(--red-tint); background: rgb(var(--red-rgb) / .14); }
.faction-card-membership { margin: 0; padding-left: 12px; border-left: 2px solid var(--faction-line); font-size: var(--fs-body); color: var(--text); line-height: 1.55; }

.faction-card-hint { margin: -6px 0 12px; font-size: var(--fs-note); color: var(--muted); }
.caste-tree { display: grid; gap: 0; padding: 4px 0 2px; }
.caste-tree-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; }
.caste-tree-row.has-branches { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.caste-tree-head { margin-bottom: 6px; }
.caste-tree-col { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; }
.caste-tree-col-trunk { color: color-mix(in srgb, var(--faction-color) 60%, #fff); }
.caste-tree-rank { align-self: center; font-family: var(--serif); font-size: 15px; color: color-mix(in srgb, var(--faction-color) 70%, #fff); text-align: center; opacity: .85; }
.caste-tree-cell { display: grid; gap: 6px; min-height: 44px; align-content: center; padding: 4px 0; }
.caste-tree-trunk .caste-tile { justify-self: center; width: 78%; }
.caste-tile {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #ffffff1f;
  border-radius: 4px;
  background: linear-gradient(180deg, #1d2129, #141720);
  color: var(--text);
  font: inherit; font-size: var(--fs-note); font-weight: 600; letter-spacing: .02em;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 0 #0008, inset 0 1px #ffffff0c;
  transition: border-color .15s ease, background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.caste-tile:hover, .caste-tile:focus-visible { border-color: var(--faction-color); outline: none; transform: translateY(-1px); box-shadow: 0 4px 12px -4px var(--faction-glow), inset 0 1px #ffffff14; }
.caste-tile.is-selected { border-color: var(--faction-color); background: linear-gradient(180deg, color-mix(in srgb, var(--faction-color) 32%, #141720), color-mix(in srgb, var(--faction-color) 16%, #141720)); color: #fff; box-shadow: 0 0 0 1px var(--faction-line), 0 6px 18px -6px var(--faction-glow); }
.caste-tile.is-current { border-color: var(--gold); color: var(--gold-tint); background: linear-gradient(180deg, #2a2516, #1b1810); box-shadow: 0 0 0 1px rgb(var(--gold-rgb) / .35), 0 0 18px -4px rgb(var(--gold-rgb) / .55); }
.caste-tile.is-next { border-style: dashed; border-color: color-mix(in srgb, var(--faction-color) 75%, #fff); animation: caste-next 2.2s ease-in-out infinite; }
.caste-tile.is-passed { opacity: .5; filter: saturate(.6); }
.caste-tile-mark { font-size: 12px; color: var(--gold); }
.caste-tile.is-next .caste-tile-mark { color: color-mix(in srgb, var(--faction-color) 60%, #fff); }
.caste-tile.has-parent::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 10px; margin-left: -1px; background: var(--faction-line); }
.caste-tree-fork-row { min-height: 18px; }
.caste-tree-fork { position: relative; grid-column: 2 / -1; height: 18px; }
.caste-tree-fork::before { content: ""; position: absolute; left: 16.66%; right: 16.66%; top: 50%; height: 2px; background: var(--faction-line); }
.caste-tree-fork::after { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 50%; margin-left: -1px; background: var(--faction-line); }
.caste-tree-fork-row + .caste-tree-row .caste-tree-warrior .caste-tile::before,
.caste-tree-fork-row + .caste-tree-row .caste-tree-mage .caste-tile::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 13px; margin-left: -1px; background: var(--faction-line); }
@keyframes caste-next { 0%, 100% { box-shadow: 0 2px 0 #0008, 0 0 0 0 transparent; } 50% { box-shadow: 0 2px 0 #0008, 0 0 14px -2px var(--faction-glow); } }

.caste-details { margin-top: 16px; border-color: var(--faction-line); background: linear-gradient(165deg, var(--faction-soft), #13161b 70%); animation: pane-in .2s ease; }
.caste-details-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.caste-details-head strong { font-family: var(--serif); font-weight: 400; font-size: var(--h3); color: #fff; }
.caste-details-from { margin: 4px 0 12px; font-size: var(--fs-note); color: var(--muted); }
.caste-details-title { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.caste-requirements { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px; }
.caste-requirement { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 8px; align-items: baseline; padding: 8px 10px; border-radius: 3px; background: #0b0d1080; border: 1px solid #ffffff10; font-size: var(--fs-note); color: var(--muted); }
.caste-requirement-label { grid-column: 2; }
.caste-requirement-value { grid-column: 2; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--fs-body); }
.caste-requirement-mark { grid-row: 1 / span 2; align-self: center; font-weight: 700; font-size: 15px; }
.caste-requirement.is-met { border-color: rgb(var(--green-rgb) / .3); }
.caste-requirement.is-met .caste-requirement-mark, .caste-requirement.is-met .caste-requirement-value { color: var(--green); }
.caste-requirement.is-unmet { border-color: rgb(var(--red-rgb) / .28); }
.caste-requirement.is-unmet .caste-requirement-mark { color: var(--red); }
.caste-requirement.is-quest { border-color: rgb(var(--gold-rgb) / .3); }
.caste-requirement.is-quest .caste-requirement-mark { color: var(--gold); }
.caste-details-note { margin: 12px 0 0; font-size: var(--fs-note); color: var(--muted); font-style: italic; }

@media (max-width: 760px) {
  .faction-card-body { padding: 0 18px 22px; }
  .faction-card-head { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; padding: 22px 52px 18px 18px; }
  .faction-card-emblem { width: 60px; height: 60px; }
  .faction-card-glyph { font-size: 28px; }
  .faction-card-switch { padding: 8px 12px 0; overflow-x: auto; scrollbar-width: none; }
  .faction-switch { padding: 7px 10px 8px; white-space: nowrap; }
  .faction-card-standing-grid { grid-template-columns: 1fr; }
  .caste-tree-row.has-branches { grid-template-columns: 24px repeat(3, minmax(0, 1fr)); gap: 6px; }
  .caste-tree-trunk .caste-tile { width: 100%; }
  .caste-tile { padding: 7px 6px; font-size: 11px; }
}

@media (max-width: 900px) {
  .admin-panel { width: calc(100vw - 16px); height: calc(100dvh - 16px); }
  .admin-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .admin-tabs { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .admin-tabs [role=tab] { grid-template-columns: 26px auto; width: auto; padding: 7px 10px; flex: 0 0 auto; }
  .admin-tab-desc { display: none; }
  .admin-tabs-separator { width: 1px; height: auto; margin: 4px 6px; }
  .admin-heading { padding: 16px 18px 14px; }
  .admin-heading-note { display: none; }
  .admin-pane { padding: 16px 18px 20px; }
  .admin-footer { padding: 8px 18px 10px; }
  .admin-section-head { grid-template-columns: 36px minmax(0, 1fr); }
  .admin-section-icon { width: 36px; height: 36px; font-size: 18px; }
}

/* Dziennik zmian */
.nav-changelog { display: inline-flex; align-items: center; gap: 6px; }
.nav-changelog-version { font-size: 11px; padding: 1px 6px; border: 1px solid rgb(var(--line-strong-rgb) / .35); border-radius: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nav-changelog:hover .nav-changelog-version { border-color: var(--accent); color: var(--accent); }
.changelog-dialog { width: min(720px, calc(100% - 30px)); }
.changelog-intro { margin: -4px 0 16px; }
.changelog-list { display: grid; gap: 8px; }
.changelog-entry { border: 1px solid rgb(var(--line-strong-rgb) / .22); border-radius: var(--radius); background: linear-gradient(165deg, #1b2029, #13161b); box-shadow: inset 0 1px #ffffff0a; }
.changelog-entry.is-current { border-color: rgb(var(--accent-rgb) / .45); }
.changelog-summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; }
.changelog-summary::-webkit-details-marker { display: none; }
.changelog-summary:hover { background: #ffffff06; }
.changelog-chevron { color: var(--muted); transition: transform .18s ease; }
.changelog-entry[open] .changelog-chevron { transform: rotate(90deg); }
.changelog-version { font-family: var(--serif); font-size: var(--h3); color: var(--accent-tint); font-variant-numeric: tabular-nums; min-width: 68px; }
.changelog-name { flex: 1; font-size: var(--fs-body); color: var(--text); }
.changelog-badges { display: flex; gap: 6px; }
.changelog-badge { font-size: 11px; padding: 2px 7px; border-radius: 10px; border: 1px solid transparent; font-variant-numeric: tabular-nums; white-space: nowrap; }
.changelog-badge.is-added, .changelog-section.is-added .changelog-section-title { color: var(--green); }
.changelog-badge.is-added { border-color: rgb(var(--green-rgb) / .35); background: rgb(var(--green-rgb) / .1); }
.changelog-badge.is-changed, .changelog-section.is-changed .changelog-section-title { color: var(--accent-tint); }
.changelog-badge.is-changed { border-color: rgb(var(--accent-rgb) / .35); background: rgb(var(--accent-rgb) / .1); }
.changelog-badge.is-fixed, .changelog-section.is-fixed .changelog-section-title { color: var(--gold-tint); }
.changelog-badge.is-fixed { border-color: rgb(var(--gold-rgb) / .35); background: rgb(var(--gold-rgb) / .1); }
.changelog-badge.is-removed, .changelog-section.is-removed .changelog-section-title { color: var(--red-tint); }
.changelog-badge.is-removed { border-color: rgb(var(--red-rgb) / .35); background: rgb(var(--red-rgb) / .1); }
.changelog-current { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: rgb(var(--accent-rgb) / .2); color: #fff; letter-spacing: .04em; text-transform: uppercase; }
.changelog-body { padding: 2px 16px 14px 44px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.changelog-section-title { margin: 12px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.changelog-items { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: var(--fs-body); line-height: 1.55; color: var(--text); }
.changelog-items li::marker { color: var(--muted); }
@media (max-width: 760px) {
  .nav-changelog-version { display: none; }
  .changelog-summary { flex-wrap: wrap; }
  .changelog-body { padding-left: 16px; }
}