/* Kreator kart. Karta ma wymiary strony A4 w punktach (595.28 x 841.89 pt),
   a pozycje elementów są w pt zmierzonych na reference.pdf, strona 25. */

@font-face {
  font-family: 'GenesysGlyphsAndDice';
  src: url('fonts/GenesysGlyphsAndDice-3.0.ttf') format('truetype');
  font-display: block;
}

/* Blackletter z konturów osadzonych w reference.pdf (strona 25); zbudowane przez scratchpad/build_unif_v2.py.
   Google Fonts „UnifrakturMaguntia” pozostaje jako zapas dla znaków, których podzbiór nie zawiera. */
@font-face {
  font-family: 'UnifrakturPDF';
  src: url('fonts/UnifrakturPDF-Regular.ttf') format('truetype');
  font-display: block;
}
@font-face {
  font-family: 'UnifrakturPDF Social';
  src: url('fonts/UnifrakturPDF-Social.ttf') format('truetype');
  font-display: block;
}
@font-face {
  font-family: 'UnifrakturPDF Species';
  src: url('fonts/UnifrakturPDF-Species.ttf') format('truetype');
  font-display: block;
}

:root {
  --ink: #5A4A4A;
  --light: #FBF1E8;
  --stub: #726260;
  --edit: #2563EB;
  --ui-line: rgba(59, 44, 38, .3);
  --ui-accent: #741b30;
  --ui-heading: #741b30;
  --ui-focus: #f1e1dd;
}

* { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }

html, body {
  margin: 0;
  font: 14px/1.45 system-ui, 'Segoe UI', sans-serif;
  color: #f9f9f9;
  background: #3b2c26;
}

/* Pasek narzędzi */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  padding: 10px 14px;
  background: #1c1c1c;
  border-bottom: 1px solid var(--ui-line);
  font-family: 'Alegreya', Georgia, serif;
  font-size: 15px;
}
.toolbar label { display: inline-flex; gap: 6px; align-items: center; }
.toolbar .back-link { font: inherit; padding: 5px 0; color: inherit; text-decoration: none; cursor: pointer; }
.toolbar .back-link:hover { text-decoration: underline; }
.toolbar select,
.toolbar button,
.file-btn {
  font: inherit;
  padding: 5px 12px;
  border: 1px solid rgba(241, 225, 221, .3);
  border-radius: 6px;
  background: #f1e1dd;
  color: #3b2c26;
  cursor: pointer;
}
.toolbar button:hover, .file-btn:hover { border-color: var(--ui-accent); background: rgba(116, 27, 48, .16); }
.file-btn { position: relative; display: inline-flex; align-items: center; }
.file-btn input[type=file] { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.file-btn:has(input:focus-visible) { outline: 2px solid var(--ui-focus); outline-offset: 2px; }

/* Układ: karta po lewej, panel po prawej (na wąskim ekranie pod kartą) */
.layout {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 16px;
}
.stage {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.panel {
  flex: 0 0 300px;
  background: #f1e1dd;
  border: 1px solid var(--ui-line);
  padding: 12px 14px;
  font-family: 'Alegreya', Georgia, serif;
  font-size: 14px;
}
.panel h2 { font-family: 'Alegreya SC', Georgia, serif; font-size: 17px; font-weight: 700; color: var(--ui-heading); margin: 6px 0 6px; }
.panel summary { font-size: 14px; font-weight: 700; cursor: pointer; }
.panel section + section { margin-top: 14px; border-top: 1px solid rgba(241, 225, 221, .12); padding-top: 10px; }
.panel dl { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 3px 10px; margin: 0; }
.panel dt { color: #bfb6b2; }
.panel dd { margin: 0; overflow-wrap: anywhere; word-break: normal; }
.panel .hint { color: #bfb6b2; margin: 0 0 6px; }
.panel ul { margin: 0; padding-left: 18px; }
.changes { list-style: none; padding-left: 0 !important; }
.changes li { border-bottom: 1px solid rgba(241, 225, 221, .12); padding: 6px 0; }
.chg-label { font-weight: 600; }
.chg-old, .chg-new { color: #e0d8d5; word-break: break-word; }
.changes button { margin-top: 4px; font: inherit; padding: 2px 8px; cursor: pointer; }

.sheet-wrap {
  position: relative;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  flex: 0 0 auto;
}

/* Płótno: A4 w pt. Skalowane transformacją w app.js, bez zmiany pozycji w pt. */
.sheet {
  position: absolute;
  left: 0;
  top: 0;
  width: 595.28pt;
  height: 841.89pt;
  background: #fff;
  overflow: hidden;
  transform-origin: 0 0;
  font-size: 8pt;
  color: var(--ink);
  text-align: left;
}

/* Pola tekstowe (pozycje absolutne, zmierzone z PDF) */
.sheet .t {
  position: absolute;
  margin: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: visible;
}
.sheet .t.paras p { margin: 0; }
.sheet .t.paras p + p { margin-top: .35em; }

.sheet .al  { font-family: 'Alegreya', serif; font-weight: 400; }
.sheet .alb { font-family: 'Alegreya', serif; font-weight: 700; }
.sheet .sc  { font-family: 'Alegreya SC', serif; font-weight: 400; }
.sheet .scb { font-family: 'Alegreya SC', serif; font-weight: 700; }
.sheet .sck { font-family: 'Alegreya SC', serif; font-weight: 900; text-transform: uppercase; }
.sheet .uf  { font-family: 'UnifrakturPDF', 'UnifrakturMaguntia', serif; font-weight: 400; }
.sheet .ufs { font-family: 'UnifrakturPDF Social', 'UnifrakturPDF', 'UnifrakturMaguntia', serif; font-weight: 400; }
.sheet .ufp { font-family: 'UnifrakturPDF Species', 'UnifrakturPDF', 'UnifrakturMaguntia', serif; font-weight: 400; }
/* Symbole kości: działają także w podglądach poza kartą (okno wyboru, lupka, ekwipunek) */
.die { font-family: 'GenesysGlyphsAndDice', 'Alegreya', serif; font-weight: 400; }

/* Komórki talentów: stopka, zaznaczenie i A/P (ramki, tabela i pasy są w grafice karty) */
.sheet .cell { position: absolute; }
.sheet .c-title {
  position: absolute;
  left: 0;
  top: 7.25pt;
  width: 130.71pt;
  height: 11.2pt;
  text-align: center;
  font-family: 'Alegreya SC', serif;
  font-weight: 700;
  font-size: 9pt;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink);
}
.sheet .c-body {
  position: absolute;
  left: 4.86pt;
  width: 121pt;
  text-align: center;
  font-family: 'Alegreya', serif;
  font-weight: 400;
  font-size: 6.75pt;
  line-height: 1.185;
  letter-spacing: -0.016em;
  color: var(--ink);
}
.sheet .c-desc { display: block; }
/* Typ aktywacji stoi na stałej wysokości w komórce (linia bazowa jak na drukowanej karcie), niezależnie od długości opisu */
.sheet .c-tag { position: absolute; left: 0; right: 0; top: 33.04pt; font-size: 6.75pt; }
.sheet .c-ref {
  position: absolute;
  left: 0;
  width: 130.71pt;
  text-align: center;
  font-family: 'Alegreya SC', serif;
  font-weight: 900;
  font-size: 6.75pt;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--light);
}
/* Pola zakupu i A/P: ramki są w grafice karty; tu zostaje obszar kliknięcia i zaznaczenie */
.sheet .check {
  position: absolute;
  left: 0;
  width: 20.4pt;
  height: 19.8pt;
  cursor: pointer;
}
/* Zaznaczony talent: ✓ w drukowanym polu zamiast wypełnionego kwadratu; PDF pomija to tło (pole wyboru ma własny wygląd) */
.sheet .check.on::after {
  content: '';
  position: absolute;
  left: 6.8pt; top: 3.3pt; width: 9.8pt; height: 10pt;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 4 7.7 8.6 2.3' fill='none' stroke='%232b2222' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sheet .ap {
  position: absolute;
  left: 109.11pt;
  width: 21.6pt;
  height: 19.8pt;
}
.sheet .c-code {
  position: absolute;
  left: -1.3pt; right: 1.3pt;
  top: 1.26pt; /* dawne obramowanie 1.2 pt przeglądarka zaokrąglała do 0.75 pt; pozycja jak wcześniej */
  text-align: center;
  font-family: 'Alegreya SC', serif;
  font-weight: 700;
  font-size: 11pt;
  line-height: 1.3;
  color: var(--ink);
}

/* Łączniki: obszar kliknięcia (hit) i widoczny odcinek (stub) */
.sheet .hit { position: absolute; cursor: pointer; }
.sheet .hit:hover { background: rgba(37, 99, 235, .16); }
.sheet .stub { position: absolute; display: none; pointer-events: none; }
/* Łącznik to oryginalny kształt z PDF (art/connectors.json), wypełniony kolorem --stub */
.sheet .stub svg { display: block; width: 100%; height: 100%; fill: var(--stub); }
.sheet .stub.on { display: block; }

/* Koszty wierszy (obrócone, czytane z góry na dół) */
.sheet .exp {
  position: absolute;
  writing-mode: vertical-rl;
  font-family: 'Alegreya', serif;
  font-weight: 700;
  font-size: 7pt;
  line-height: 9.06pt;
  color: var(--ink);
  white-space: pre;
}
.sheet .exp .xp-num,
.sheet .exp .xp-unit { display: inline-block; }
.sheet .exp .xp-unit { padding-inline-start: 1.9pt; }

/* Edycja: każde pole to contenteditable */
.sheet [contenteditable="true"] { cursor: text; }
.sheet [contenteditable="true"]:hover { background: rgba(37, 99, 235, .06); }
.sheet [contenteditable="true"]:focus {
  outline: 1px dashed var(--edit);
  outline-offset: 1px;
  background: rgba(37, 99, 235, .08);
}
.sheet .is-overflow { outline: 1px solid #DC2626; outline-offset: 0; }

@media (max-width: 1100px) {
  .layout { flex-direction: column; }
  .stage { width: 100%; }
  .panel { flex: 1 1 auto; width: 100%; }
}

/* Listy wpisów (wyposażenie, umiejętności): slot, narzędzia pokazują się po najechaniu */
/* Obszar najechania wokół listy (padding poza tekstem, bez wpływu na układ): ikony nie znikają w drodze do kursora */
.sheet .slots {
  position: absolute;
  box-sizing: content-box;
  margin: -12pt 0 -6pt -18pt;
  padding: 12pt 18pt 6pt 18pt;
}
.sheet .slot { position: relative; white-space: normal; }
/* Wpis listy nie pęka w środku („a / Shield”): łamanie wiersza przypada tylko między wpisami */
.sheet .slot-text { white-space: nowrap; }
.sheet .slot-tools {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 0.3em); /* tuż nad tekstem wpisu (pole fontu jest wyższe od wysokości liter) */
  transform: translateX(-50%);
  display: none;
  gap: calc(2px * var(--inv, 1));
  white-space: nowrap;
  z-index: 2;
}
/* Ikony pokazują się tylko przy najechaniu na ten wpis (lub przy fokusie), żeby na liście nie było naraz kilku par ikon */
.sheet .slot:hover .slot-tools,
.sheet .slot:focus-within .slot-tools { display: inline-flex; }
/* Słowo and/or na liście wyposażenia: w edytorze klik przełącza AND ↔ OR; w druku to zwykły tekst */
.sheet .slot.op[data-act] { cursor: pointer; }
.sheet .slot.op[data-act]:hover { text-decoration: underline dotted; }
/* Przecinek między wpisami: w edytorze klik wstawia AND; w druku to zwykły przecinek */
.sheet .sep[data-act] { cursor: pointer; }
.sheet .sep[data-act]:hover { text-decoration: underline dotted; }
/* „+” zawsze widoczny, wyraźniejszy po najechaniu; leży w obszarze najechania, więc nie ma przerwy */
.sheet .slots > .add {
  position: absolute;
  right: 3pt;
  top: calc(12pt + var(--lh, 11pt) / 2); /* środek pierwszej linii (12 pt to padding góry), więc plus nie przeskakuje przy dwóch wierszach */
  transform: translateY(-50%);
  opacity: .6;
}
.sheet .slots:hover > .add,
.sheet .slots:focus-within > .add,
.sheet .slots > .add:hover,
.sheet .slots > .add:focus-visible { opacity: 1; }
/* Przyciski i ikony: stały rozmiar na ekranie (16 px; zmienna --inv ustawia app.js), pozycje liczone w pt arkusza */
.sheet .tool {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(16px * var(--inv, 1));
  height: calc(16px * var(--inv, 1));
  padding: 0;
  border: calc(1px * var(--inv, 1)) solid #9a9290;
  border-radius: 50%;
  background: #fff;
  color: #4a4040;
  cursor: pointer;
}
.sheet .tool svg {
  width: calc(9px * var(--inv, 1));
  height: calc(9px * var(--inv, 1));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sheet .tool:hover { background: #eef4ff; border-color: var(--edit); }
.sheet .tool[aria-label^="Remove"]:hover { border-color: #b42318; color: #b42318; background: #fff5f4; }
.sheet .cell-tool {
  position: absolute;
  right: -7pt;
  top: -6pt;
  display: inline-flex;
  z-index: 3;
  opacity: .55;
}
.sheet .cell:hover .cell-tool,
.sheet .cell:focus-within .cell-tool,
.sheet .cell-tool:hover,
.sheet .cell-tool:focus-visible { opacity: 1; }

/* Okno wyboru */
.picker {
  width: min(880px, 94vw);
  height: min(640px, 88vh);
  padding: 0;
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  background: #f1e1dd;
  color: #f9f9f9;
  font: 15px/1.4 'Alegreya', Georgia, serif;
}
.picker::backdrop { background: rgba(0, 0, 0, .35); }
.picker[open] { display: flex; flex-direction: column; }
.picker:has(#picker-manual:not([hidden])) { height: auto; min-height: 360px; }
.picker-head,
.picker-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; }
.picker-head { justify-content: space-between; border-bottom: 1px solid rgba(241, 225, 221, .15); }
.picker-head h3 { margin: 0; font-family: 'Alegreya SC', Georgia, serif; font-size: 17px; }
.picker-foot { justify-content: flex-end; border-top: 1px solid rgba(241, 225, 221, .15); }
.picker-foot .msg { margin-right: auto; color: #ffb4a6; }
.picker-tabs { display: flex; gap: 6px; padding: 8px 14px 0; }
.picker-tabs button,
.picker-foot button { font: inherit; padding: 5px 12px; border: 1px solid rgba(241, 225, 221, .3); border-radius: 4px; background: #434343; color: #f9f9f9; cursor: pointer; }
.picker-tabs button.active { background: rgba(116, 27, 48, .16); border-color: var(--ui-accent); }
.picker-foot button.primary { background: var(--ui-accent); border-color: var(--ui-accent); color: #f9f9f9; }
.picker-foot button:disabled { opacity: .45; cursor: default; }
.picker-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 12px 14px; }
.picker-col { display: flex; flex-direction: column; min-height: 0; gap: 8px; }
.picker-col input[type="search"],
.picker-col input[type="text"],
.picker-col input[type="number"] { font: inherit; padding: 6px 8px; border: 1px solid rgba(241, 225, 221, .3); border-radius: 4px; }
.results { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow: auto; border: 1px solid rgba(241, 225, 221, .15); border-radius: 4px; }
.results .res { display: flex; flex-direction: column; padding: 6px 8px; border-bottom: 1px solid rgba(241, 225, 221, .12); cursor: pointer; }
.results .res:hover { background: rgba(116, 27, 48, .22); }
.results .res.sel { background: rgba(116, 27, 48, .16); }
.results .res-sub { color: #bfb6b2; font-size: 12px; }
.results .empty { cursor: default; color: #bfb6b2; }
.preview { flex: 1; min-height: 0; overflow: auto; }
.preview h4 { margin: 0 0 4px; font-size: 16px; }
.preview h5 { margin: 10px 0 4px; font-size: 13px; color: #bfb6b2; }
.preview .badge { display: inline-block; min-width: 22px; text-align: center; padding: 1px 6px; border-radius: 3px; background: #5A4A4A; color: #fff; font-weight: 600; }
.preview .muted,
.picker .muted { color: #bfb6b2; }
.preview .warn { color: #ffb4a6; }
.preview .note { color: #b8d8bd; }
.preview .full { white-space: pre-line; }
.preview .kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0; }
.preview .kv dt { color: #bfb6b2; }
.preview .kv dd { margin: 0; }
.preview a { color: var(--ui-heading); }

/* Podgląd lupki na karcie: pływające okno przy talencie */
.talent-pop {
  position: fixed;
  z-index: 30;
  width: min(340px, 92vw);
  max-height: min(60vh, 480px);
  overflow: auto;
  padding: 10px 12px;
  background: #f1e1dd;
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  color: #f9f9f9;
  font: 15px/1.4 'Alegreya', Georgia, serif;
}
.talent-pop .preview { overflow: visible; }

/* Tło karty (art/background.webp) pod tekstem i polami; nie łapie kliknięć */
.sheet .sheet-bg { position: absolute; pointer-events: none; user-select: none; max-width: none; }
/* Okienko ilustracji: obraz przycięty do okienka; ✎ w prawym dolnym rogu pokazuje się po najechaniu */
.sheet .art-box { position: absolute; }
.sheet .art-box:hover { outline: 1px dashed rgba(37, 99, 235, .45); outline-offset: -1px; }
.art-clip { position: absolute; inset: 0; overflow: hidden; }
/* Przenikanie: maska z czterech gradientów; każda krawędź ma własny pas (--f-top, --f-right, --f-bottom, --f-left) */
.art-clip.fade {
  --edge: linear-gradient(to right, transparent, #000 var(--f-left)), linear-gradient(to left, transparent, #000 var(--f-right)), linear-gradient(to bottom, transparent, #000 var(--f-top)), linear-gradient(to top, transparent, #000 var(--f-bottom));
  -webkit-mask-image: var(--edge);
  -webkit-mask-composite: source-in;
  mask-image: var(--edge);
  mask-composite: intersect;
}
.sheet .art-img { position: absolute; pointer-events: none; max-width: none; }
.sheet .art-tool { position: absolute; right: 3pt; bottom: 3pt; z-index: 3; opacity: 0; }
.sheet .art-box:hover .art-tool,
.sheet .art-tool:hover,
.sheet .art-tool:focus-visible { opacity: 1; }
@media (hover: none) { .sheet .art-tool { opacity: 1; } }

/* Okno wyboru ilustracji */
.art-dlg { width: min(940px, 96vw); height: min(760px, 94vh); }
.art-body { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 12px 14px; }
.art-col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; }
.art-col h4 { margin: 0; font-size: 13px; color: #bfb6b2; }
.art-col > button { font: inherit; padding: 5px 12px; border: 1px solid rgba(241, 225, 221, .3); border-radius: 4px; background: #434343; color: #f9f9f9; cursor: pointer; }
.art-col > button.sel { background: rgba(116, 27, 48, .16); border-color: var(--ui-accent); }
.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; width: 100%; }
.art-thumb { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid rgba(241, 225, 221, .3); border-radius: 4px; background: #434343; color: #f9f9f9; cursor: pointer; font: inherit; font-size: 12px; text-align: left; }
.art-thumb img { width: 100%; height: auto; display: block; background: #434343; }
.art-thumb.sel { border-color: var(--ui-accent); background: rgba(116, 27, 48, .16); }
.art-preview { position: relative; overflow: hidden; background: #fff; border: 1px dashed #4a4a4a; touch-action: none; cursor: grab; }
.art-preview img { position: absolute; pointer-events: none; max-width: none; user-select: none; }
/* Cała ilustracja poza okienkiem jest przyciemniona; okienko karty z ramką leży nad nią */
.art-preview .art-full { opacity: .35; }
.art-frame { position: absolute; background: #fff; outline: 1px dashed #2563eb; outline-offset: -1px; }
.art-empty { margin: 8px; }
#art-zoom { width: 160px; }
@media (max-width: 900px) { .art-body { grid-template-columns: 1fr; } }
.fade-edges { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.fade-edges .qty { justify-content: space-between; white-space: nowrap; }
input[type=range], input[type=checkbox] { accent-color: var(--ui-heading); }
.fade-edges input[type=range] { width: 100px; }
.art-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.art-col > p { margin: 0; }
/* Podgląd nie może się kurczyć w kolumnie: cała ilustracja zostaje widoczna, a reszta okna przewija się */
.art-preview { flex: 0 0 auto; }

/* Znacznik edytowanej karty w pasku narzędzi */
.edited-badge {
  display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid #734332; border-radius: 4px;
  background: rgba(115, 67, 50, .45); color: #f9f9f9; font-weight: 600; white-space: nowrap;
}

/* Wydruk (Ctrl+P → Zapisz jako PDF): sama karta w A4, bez marginesów i bez interfejsu */
@page { size: A4 portrait; margin: 0; }
@media print {
  html, body { background: #fff; height: 841.89pt; overflow: hidden; }
  .toolbar, .panel, #talent-pop, dialog { display: none !important; }
  .layout { display: block; padding: 0; }
  .stage { width: auto; display: block; }
  .sheet-wrap { box-shadow: none !important; width: 595.28pt !important; height: 841.89pt !important; overflow: hidden; }
  .sheet { transform: none !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .sheet .tool, .sheet .hit, .sheet .art-tool, .sheet .slot-tools { display: none !important; }
  .sheet [contenteditable="true"],
  .sheet [contenteditable="true"]:hover,
  .sheet [contenteditable="true"]:focus,
  .sheet .sel-social:focus { outline: none !important; background: transparent !important; }
  .sheet .art-box:hover { outline: none !important; }
  /* Kwadraty zakupu (kupione talenty, zmiany gracza) drukują się wypełnione; eksport PDF ukrywa to wypełnienie w tle i zapisuje stan w polach wyboru */
  /* Stany talentów z kreatora (ramki kupionego i dostępnego, przygaszenie zablokowanego) są tylko na ekranie */
  .sheet .cell.bought, .sheet .cell.available { box-shadow: none !important; background: transparent !important; }
  .sheet .cell.locked .c-title, .sheet .cell.locked .c-body { opacity: 1 !important; }
}
.qty { display: flex; align-items: center; gap: 8px; }
.qty input { width: 80px; font: inherit; padding: 4px 6px; border: 1px solid rgba(241, 225, 221, .3); border-radius: 4px; }
.qty select { font: inherit; padding: 4px 6px; border: 1px solid rgba(241, 225, 221, .3); border-radius: 4px; }
[hidden] { display: none !important; }
/* Lupka: podgląd pełnego opisu talentu, w górnym prawym rogu komórki (nie zachodzi na ✎ ani na tytuł) */
.sheet .cell-info {
  position: absolute;
  right: 7pt;
  top: -6pt;
  display: inline-flex;
  z-index: 3;
  opacity: .55;
}
.sheet .cell:hover .cell-info,
.sheet .cell:focus-within .cell-info,
.sheet .cell-info:hover,
.sheet .cell-info:focus-visible { opacity: 1; }

/* Talenty bez skróconego tekstu: placeholder na karcie */
.sheet .is-missing { font-style: italic; color: #8a7f7c; }

/* Klasa społeczna: lista rozwijana wyglądająca jak tekst karty */
.sheet .sel-social {
  position: absolute;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  font-family: 'Alegreya SC', serif;
  font-weight: 700;
  font-size: 8pt;
  line-height: 1.2;
  letter-spacing: 0.12pt;
  color: var(--ink);
  cursor: pointer;
}
.sheet .sel-social:hover { background: rgba(37, 99, 235, .06); }
.sheet .sel-social:focus { outline: 1px dashed var(--edit); outline-offset: 1px; }

/* Gatunki: przycisk wyboru pokazuje się po najechaniu */
/* Pole gatunków: obszar najechania z prawej, żeby ikona nie znikała w przerwie */
.sheet .species-field {
  box-sizing: content-box;
  padding-right: 18pt;
}
.sheet .species-tool {
  position: absolute;
  right: 3pt;
  top: 50%;
  transform: translateY(-50%);
  opacity: .6;
}
.sheet .species-field:hover .species-tool,
.sheet .species-field:focus-within .species-tool,
.sheet .species-tool:hover,
.sheet .species-tool:focus-visible { opacity: 1; }

/* Urządzenia dotykowe nie mają najechania: ikony zawsze widoczne */
@media (hover: none) {
  .sheet .slot-tools { display: inline-flex; }
  .sheet .slots > .add,
  .sheet .species-tool,
  .sheet .cell-tool,
  .sheet .cell-info { opacity: 1; }
}

/* Okno gatunków */
.species-dlg { height: auto; max-height: 88vh; }
.species-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.species-list { list-style: none; margin: 0; padding: 0; }
.species-list li { padding: 6px 0; border-bottom: 1px solid rgba(241, 225, 221, .12); }
.sp-row { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.species-custom { display: flex; flex-direction: column; gap: 4px; }
.species-custom input { font: inherit; padding: 6px 8px; border: 1px solid rgba(241, 225, 221, .3); border-radius: 4px; }
.species-body .msg { color: #ffb4a6; margin: 0; }

/* Podgląd tekstu wpisu na karcie w oknie wyboru */
.composed { margin: 0; font-weight: 600; color: #b8d8bd; }
#picker-plural-wrap input { width: 100%; }

/* Ikony nie używają zoom: pozycje (np. right, top) skalują się razem z kartą, a rozmiar daje .tool */

/* Osadzenie w kreatorze postaci (?embed=1): sam arkusz, bez paska i panelu, tylko do odczytu */
html.embed, body.embed { margin: 0; background: transparent; }
body.embed .toolbar,
body.embed .panel,
body.embed dialog,
body.embed #talent-pop { display: none !important; }
body.embed .layout { display: block; padding: 0; }
body.embed .sheet-wrap { box-shadow: none; }
body.embed .sheet { pointer-events: none; }
/* Powiększenie w kreatorze postaci (?zoom=1): karta tylko do podglądu, bez kliknięć w pola i kratki zakupu */
body.zoom .sheet { pointer-events: none !important; }
body.zoom .sheet .check { pointer-events: auto !important; cursor: pointer; }
body.embed .sheet .tool,
body.embed .sheet .cell-tool,
body.embed .sheet .cell-info { display: none !important; }

/* Talent kupiony w kreatorze postaci: wyraźna ramka komórki i zaznaczenie zakupu */
.sheet .cell.bought { box-shadow: inset 0 0 0 1.5pt #b5482f; background: rgba(181, 72, 47, .08); }

/* Stan talentu z kreatora w ramce (?embed=1): kratka zakupu klikalna, dostępny talent ramką, zablokowany przygaszony */
body.embed .sheet .check { pointer-events: auto; cursor: pointer; }
body.embed .sheet .cell.available { box-shadow: inset 0 0 0 1.2pt #2f7d4a; }
body.embed .sheet .cell.locked .check { cursor: default; }
body.embed .sheet .cell.locked .c-title,
body.embed .sheet .cell.locked .c-body { opacity: .45; }

/* Powiększenie w kreatorze: kartka w wybranej skali, przewijana w ramce; ekran edytora bez linku powrotu */
body.zoom .layout { display: flex; justify-content: center; padding: 12px 0; }
body.screen .toolbar .back-link { display: none; }

/* Chrome edytora w palecie strony: ciemne pola, przyciski i nagłówki; arkusz karty zostaje jasny */
.toolbar select, .toolbar input, .panel input, .panel select, .picker input, .picker select, .talent-pop input, .qty input, .qty select, .species-custom input, .picker-col input { background: #434343; color: #f9f9f9; }
.toolbar button, .panel button, dialog button, .talent-pop button { background: #434343; color: #f9f9f9; border-color: rgba(241, 225, 221, .3); }
.picker-head h3, .panel h2 { color: var(--ui-heading); }

/* Wydruk powiększonej karty specjalizacji: arkusz bez odstępów, nie obcięty na dole */
@media print {
  body.zoom .layout { display: block !important; padding: 0 !important; }
}

/* Chrome edytora w palecie kreatora: beżowe panele i okna, brązowy tekst, wino jako akcent */
.panel, .picker, .talent-pop { color: #3b2c26; }
.panel button, .picker button, .talent-pop button, dialog button { background: #fbf6f3; color: #3b2c26; border-color: rgba(59, 44, 38, .35); }
.panel input, .panel select, .picker input, .picker select, .talent-pop input, .qty input, .qty select, .species-custom input, .picker-col input { background: #fbf6f3; color: #3b2c26; }
.panel dt, .panel .hint, .results .res-sub, .results .empty, .picker .muted, .preview .muted, .preview .kv dt, .preview h5, .art-col h4, .chg-old, .chg-new { color: #6e5a52; }
.toolbar button, .toolbar select, .file-btn { background: #f1e1dd; color: #3b2c26; border-color: rgba(241, 225, 221, .4); }
.picker-foot button.primary { background: #741b30; border-color: #741b30; color: #f9f9f9; }

/* Nagłówek karty: nazwa specjalizacji albo wersji nad kartą; w ramce kreatora i w powiększeniu go nie ma */
.card-head { margin: 0 0 4px; font: 700 30px/1.1 'UnifrakturMaguntia', serif; color: #f1e1dd; }
.card-sub { margin: 0 0 10px; font-size: 14px; color: #d3c6c1; }
body.embed .card-head, body.embed .card-sub, body.zoom .card-head, body.zoom .card-sub { display: none; }
@media print { .card-head, .card-sub { display: none !important; } }

.stage { flex-direction: column; align-items: center; }
.card-head { text-align: center; }

/* Ramka kreatora: arkusz przy lewej krawędzi, tak jak karta postaci w tej samej ramce */
body.embed .stage { align-items: flex-start; }

/* Osadzona karta w ramce kreatora wypełnia ramkę co do piksela: bez pasków przewijania; powiększenie się przewija */
body.embed:not(.zoom) { overflow: hidden; }

/* Klasa społeczna specjalizacji wybierana bezpośrednio w karcie w kreatorze i w powiększeniu; reszta arkusza tylko do podglądu */
body.embed .sheet .sel-social { pointer-events: auto; cursor: pointer; }
body.zoom .sheet .sel-social { pointer-events: auto !important; cursor: pointer; }