/* Karta postaci: arkusz TOW s. 73 (art/sheet-73.webp) z polami nad nim.
   Wszystkie pozycje są w pt, jak w kartach specjalizacji; sheet ma rozmiar A4 w pt. */

:root {
  --ink: #2b2222;
  --badge: #1d4ed8;
  --muted: #6e5a52;
  --ui-line: rgba(241, 225, 221, .22);
  --ui-accent: #741b30;
  --ui-heading: #741b30;
  --ui-focus: #f1e1dd;
  --ui-warn: #734332;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: #3b2c26; font-family: 'Alegreya', Georgia, serif; color: #f9f9f9; }

.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; background: #1c1c1c; border-bottom: 1px solid var(--ui-line);
  position: sticky; top: 0; z-index: 5;
}
.toolbar button, .file-btn {
  font: inherit; padding: 4px 10px; border: 1px solid rgba(241, 225, 221, .4); border-radius: 4px; background: #f1e1dd; color: #3b2c26; cursor: pointer;
}
.toolbar button:hover, .file-btn:hover { background: #fbf6f3; }
/* Przycisk pliku: pole wyboru przykrywa przycisk, więc plik da się wybrać z klawiatury */
.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; }

.layout { display: flex; gap: 18px; align-items: flex-start; padding: 16px; }
.stage { flex: 0 0 auto; }
.panel { flex: 1 1 260px; max-width: 360px; background: #f1e1dd; color: #3b2c26; border: 1px solid rgba(59, 44, 38, .3); border-radius: 6px; padding: 12px 14px; font-size: 14px; }
.panel h2 { font-family: 'Alegreya SC', Georgia, serif; font-size: 17px; font-weight: 700; color: var(--ui-heading); margin: 14px 0 6px; }
.panel h2:first-child { margin-top: 0; }
.panel .muted { color: var(--muted); font-size: 13px; }
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: 4px 0; border-bottom: 1px solid rgba(59, 44, 38, .16); }
.switch { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.fx-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(59, 44, 38, .16); }
.fx-row label { font-size: 13px; color: var(--muted); }
.fx-row select, .fx-row input[type=number] { font: inherit; padding: 2px 4px; }
.fx-row .ded { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.warn { color: var(--ui-warn); }

/* Arkusz: wymiary w pt, skalowany przez --s (jak w karcie specjalizacji) */
.sheet-wrap {
  --s: 1;
  width: calc(595.28pt * var(--s));
  height: calc(841.89pt * var(--s));
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
  overflow: hidden;
}
.sheet {
  position: relative;
  width: 595.28pt;
  height: 841.89pt;
  transform: scale(var(--s));
  transform-origin: 0 0;
  background: #fff;
}
.sheet-bg { position: absolute; left: 0; top: 0; width: 595.28pt; height: 841.89pt; pointer-events: none; user-select: none; }
/* Stopnie: kółko na sprzęcie (trzy części) i kratki ran krytycznych; zaznaczona część lub kratka jest czarna */
.sheet .ctl.degree { border-radius: 50%; }
.sheet .ctl.degree svg { display: block; width: 100%; height: 100%; }
.sheet .ctl.degree .s { fill: transparent; }
.sheet .ctl.degree .s.on { fill: rgba(43, 33, 30, .82); }
.sheet .ctl.injury.on { background: rgba(43, 33, 30, .82); }

/* Pola: bez ramki, na drukowanym polu; ostrość dopiero po kliknięciu */
.f {
  position: absolute; border: 0; margin: 0; padding: 0; background: transparent;
  font: 10.5pt/1.1 'Caveat', 'Alegreya', Georgia, serif; color: var(--ink); outline: none;
}
.f:focus { background: rgba(116, 27, 48, .08); }
.f-text { padding-left: 1pt; }
.f-num { text-align: center; }
.f-area { resize: none; overflow: hidden; font-size: 8.4pt; line-height: 9pt; }
/* Symbole kości w opisie zdolności (znaki z obszaru prywatnego, patrz kreator.js symbolText) rysuje krój Genesys; rozmiar dopasowuje app.js */
@font-face { font-family: 'GenesysSymbols'; src: url('../ui/fonts/GenesysSymbols-PUA.ttf') format('truetype'); }
/* Opis zdolności w kroju odręcznym jak reszta wartości; znaki kości z obszaru prywatnego biorą zapasowo krój GenesysSymbols */
.f-area[data-key^="ab."][data-key$=".desc"] { font-family: 'Caveat', 'GenesysSymbols', Georgia, serif; font-size: 8.4pt; line-height: 9pt; }
/* Nakładka kolorów kości: pole zostaje do edycji (tekst przezroczysty, kursor widoczny), a pod nim ten sam tekst z kolorowymi symbolami */
.f-area.f-typed { color: transparent; caret-color: var(--ink); }
.f-mirror { position: absolute; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; pointer-events: none; color: var(--ink); white-space: pre-wrap; overflow-wrap: break-word; font-family: 'Caveat', 'GenesysSymbols', Georgia, serif; font-size: 8.4pt; line-height: 9pt; }
.f-check { appearance: auto; width: 9pt; height: 9pt; margin: 0; accent-color: var(--ink); cursor: pointer; }
/* Wartości cech i atrybutów: większe, bo pudełka na arkuszu są duże */
.f-stat { font-size: 17pt; font-weight: 400; }
/* Pola Character i Description w nagłówku: o 2 pt większe niż reszta (8,2 → 10,2 pt) */
.f-head { font-size: 12.4pt; }
/* Przyciski „Career?”, rang i „On you?” leżą na drukowanych komórkach; zaznaczenie wypełnia całą kratkę (tak samo w PDF: INSET w karta-postaci/pdf-export.js) */
.ctl { position: absolute; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.ctl:hover { background: rgba(116, 27, 48, .10); }
.ctl::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.ctl.on::after { background: var(--ink); }
.ctl:focus-visible { outline: .6pt solid var(--badge); }

/* Wartość zmieniona przez efekt talentu (progi, obrona, pancerz, cechy): niebieska na ekranie, czarna w wydruku */
.sheet .f.fx-up { color: var(--badge); }
@media print { .sheet .f.fx-up { color: var(--ink) !important; } }

/* Wydruk „tylko stałe wartości” (krok 8 kreatora): pola i przyciski klasy vol są puste na ekranie i w wydruku, miejsce zostaje */
body.stable-print .vol { visibility: hidden; }

/* Wydruk: przyciski „+” i „−” przy cechach służą do rozdawania XP na ekranie, na kartce ich nie ma */
@media print { .pd { display: none !important; } }

/* Karta w ramce kreatora: sama kartka, bez paska i panelu */
.embed .toolbar, .embed .panel { display: none !important; }
.embed .layout { padding: 0; }
.embed .sheet-wrap { box-shadow: none; }
/* Powiększenie w kreatorze (?zoom=1): klikane są rangi umiejętności; przyciski +/− cech nadal ukryte */
.zoom .pd { display: none; }
.zoom .layout { justify-content: center; align-items: flex-start; min-height: 100vh; padding: 12px 0; }

/* Tryb podglądu: obrysy pól, żeby sprawdzić pozycje na tle */
.debug .f { outline: .4pt solid rgba(220, 38, 38, .55); }
.debug .f:focus { background: rgba(255, 235, 59, .35); }

/* Wąski ekran: panel pod kartą, bez poziomego przewijania strony (ekran, nie wydruk) */
@media screen and (max-width: 1099px) {
  .layout { flex-direction: column; }
  .stage, .panel { width: 100%; max-width: none; }
  .panel { flex: 0 0 auto; }
}

/* Wydruk (Ctrl+P → Zapisz jako PDF): sama karta w A4 */
@page { size: A4 portrait; margin: 0; }
@media print {
  html, body { background: #fff; }
  .toolbar, .panel { display: none !important; }
  .layout { display: block; padding: 0; }
  .stage { width: auto; }
  .sheet-wrap { --s: 1 !important; box-shadow: none; width: 595.28pt; height: 841.89pt; }
  .sheet { transform: none !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .f:focus { background: transparent; }
}

/* PD w ramce kreatora (?embed=1): przyciski „+” i „−” przy polu cechy; pole Exp. poniżej zera na czerwono */
.sheet .pd {
  position: absolute; margin: 0; padding: 0; width: 7pt; height: 8pt;
  display: flex; align-items: center; justify-content: center;
  border: .4pt solid #6b4b3a; border-radius: 50%; background: #fff8ec; color: #4a2e22;
  font: 700 7pt/1 'Alegreya', Georgia, serif; cursor: pointer; opacity: .85;
}
.sheet .pd:hover { opacity: 1; background: #fff; }
.sheet .pd:disabled { opacity: .25; cursor: default; }
.f.neg { color: #b42318; }

/* Ekran dotykowy: przyciski na karcie nie reagują (za małe na dotyk); XP wydaje się w tabeli kreatora */
body.touch .ctl.rank, body.touch .ctl.career, body.touch .pd { pointer-events: none; }

/* Pola w pasku i panelu w palecie strony (arkusz karty zostaje jasny) */
.toolbar select, .panel input, .panel select, .fx-row select, .fx-row input[type=number] { background: #fbf6f3; color: #3b2c26; }

/* Wydruk powiększonej karty: bez odstępów i wysokości ekranu (inaczej druga pusta strona) */
@media print {
  .zoom .layout { display: block !important; padding: 0 !important; min-height: 0 !important; height: auto !important; }
}

/* 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; }

/* PL box interiors measured on the Polish sheet. */
html[lang="pl"] .ctl.career::after, html[lang="pl"] .ctl.rank::after { inset:.6pt; }

html[lang="pl"] .f[data-key="critical"], html[lang="pl"] .f[data-key="mutations"] { line-height:13.7pt; }