@import url('https://fonts.googleapis.com/css2?family=Fondamento&display=swap');
/* Wspólne komunikaty (toasty) i okna potwierdzenia z kreator-ui.js: zamiast okien przeglądarki. */
.kreator-toasts {
  position: fixed; left: 50%; bottom: 18px; z-index: 1000; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: min(560px, calc(100vw - 32px)); pointer-events: none;
}
.kreator-toast {
  max-width: 100%; padding: 9px 16px; border-radius: 10px; background: #1c1c1c; color: #f9f9f9; border: 1px solid rgba(241, 225, 221, .2);
  font: 15px/1.4 'Alegreya', Georgia, serif; box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  pointer-events: auto; cursor: pointer; animation: kreator-toast-in .18s ease-out; transition: opacity .2s ease;
}
.kreator-toast.leaving { opacity: 0; }
@keyframes kreator-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

dialog.kreator-modal {
  width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 22px 24px;
  border: 1px solid rgba(59, 44, 38, .3); border-radius: 14px; background: #f1e1dd; color: #3b2c26;
  font: 16px/1.45 'Alegreya', Georgia, serif; box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
dialog.kreator-modal::backdrop { background: rgba(43, 33, 30, .35); }
/* Selektory z dialog.kreator-modal przebijają globalne style dialogów w aplikacjach (np. dialog form { display: flex }) */
dialog.kreator-modal form { display: block; margin: 0; }
dialog.kreator-modal .kreator-modal-title { margin: 0 0 8px; font: 700 24px/1.2 'UnifrakturMaguntia', 'Alegreya SC', Georgia, serif; color: #741b30; }
dialog.kreator-modal .kreator-modal-text { margin: 0 0 20px; font: inherit; color: inherit; }
dialog.kreator-modal .kreator-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
dialog.kreator-modal .kreator-btn {
  font: inherit; font-weight: 400; padding: 7px 16px; border: 1px solid rgba(59, 44, 38, .35); border-radius: 8px;
  background: #fbf6f3; color: #3b2c26; cursor: pointer;
}
dialog.kreator-modal .kreator-btn:hover { border-color: #741b30; background: rgba(116, 27, 48, .12); }
dialog.kreator-modal .kreator-btn.kreator-btn-primary { background: #741b30; border-color: #741b30; color: #f9f9f9; }
dialog.kreator-modal .kreator-btn.kreator-btn-primary:hover { background: #8c2339; }
dialog.kreator-modal .kreator-btn.kreator-btn-danger { background: #734332; border-color: #734332; color: #f9f9f9; }
dialog.kreator-modal .kreator-btn.kreator-btn-danger:hover { background: #5f3728; }
.kreator-modal :focus-visible, .kreator-toast:focus-visible { outline: 2px solid #741b30; outline-offset: 2px; }

@media print { .kreator-toasts, dialog.kreator-modal { display: none !important; } }

dialog.kreator-modal .kreator-modal-input { display: block; width: 100%; box-sizing: border-box; margin: 0 0 16px; padding: 8px 10px; border: 1px solid rgba(59, 44, 38, .35); border-radius: 8px; background: #fbf6f3; color: #3b2c26; font: 16px/1.4 'Alegreya', Georgia, serif; }
dialog.kreator-modal .kreator-modal-input:focus { outline: 2px solid #741b30; outline-offset: 1px; }

dialog.kreator-modal .kreator-choice-list { display: grid; gap: 6px; margin: 0 0 16px; }
/* Trzy kolumny potrzebują szerszego okna, bo nazwy umiejętności (np. Coordination) nie mieszczą się w wąskim polu; na telefonie są dwie */
dialog.kreator-modal:has(.kreator-choice-list--cols-3) { width: min(520px, calc(100vw - 32px)); }
dialog.kreator-modal .kreator-choice-list--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { dialog.kreator-modal .kreator-choice-list--cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
dialog.kreator-modal .kreator-choice { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(59, 44, 38, .3); border-radius: 8px; background: #fbf6f3; color: #3b2c26; cursor: pointer; }
dialog.kreator-modal .kreator-choice span { min-width: 0; overflow-wrap: anywhere; }
dialog.kreator-modal .kreator-choice:has(input:checked) { border-color: #741b30; box-shadow: inset 0 0 0 1px #741b30; }
dialog.kreator-modal .kreator-choice.is-off { opacity: .45; cursor: default; }
dialog.kreator-modal .kreator-choice input { accent-color: #741b30; margin: 0; }
dialog.kreator-modal .kreator-btn:disabled { opacity: .45; cursor: default; }

/* Wspólny pasek narzędzi postaci (kreator, karta postaci, edytor kart): logo strony, „Narzędzia postaci”,
   przełącznik trzech narzędzi i EN / PL. Kolory jak na perilous.eu. W ramkach (embed) cały pasek jest ukryty
   przez style aplikacji, a w oknie edytora otwartym z kreatora (screen) chowamy tylko tę część. */
.tools-nav { display: flex; align-items: center; gap: 10px 14px; min-width: 0; font: 15px/1.2 'Alegreya', Georgia, serif; }
.tools-nav a { color: #f1e1dd; text-decoration: none; }
.tn-logo { display: block; flex: none; }
.tn-logo img { display: block; height: 32px; width: auto; }
.tn-hub { font: 700 19px/1.1 'Fondamento', 'Alegreya', serif; white-space: nowrap; }
.tn-hub:hover { text-decoration: underline; }
.tn-switch { display: inline-flex; flex: none; border: 1px solid #5a4840; border-radius: 6px; overflow: hidden; font-family: 'Alegreya SC', 'Alegreya', serif; font-weight: 700; font-size: 14px; }
.tn-switch a { padding: 5px 12px; color: #d1c1ba; border-right: 1px solid #5a4840; white-space: nowrap; }
.tn-switch a:last-child { border-right: 0; }
.tn-switch a:hover { color: #fff; background: rgba(241, 225, 221, .1); }
.tn-switch a[aria-current="page"] { background: #741b31; color: #f1e1dd; }
.tn-lang { display: inline-flex; flex: none; border: 1px solid #5a4840; border-radius: 99px; overflow: hidden; font: 700 13px/1 'Alegreya SC', 'Alegreya', serif; }
.tn-lang a, .tn-lang span { padding: 5px 10px; }
.tn-lang a { color: #d1c1ba; }
.tn-lang a:hover { color: #fff; background: rgba(241, 225, 221, .1); }
.tn-lang .on { background: #f1e1dd; color: #1d1917; }
.tools-nav :focus-visible { outline: 2px solid #f1e1dd; outline-offset: 2px; }
.toolbar:has(> .tools-nav) { background: #1d1917; }
body.screen .tools-nav { display: none; }
@media (max-width: 1100px) { .tn-hub { display: none; } }
@media (max-width: 800px) {
  .tools-nav { flex-wrap: wrap; justify-content: space-between; }
  .tn-switch { order: 3; flex: 1 1 100%; min-width: 0; overflow-x: auto; }
  .tn-switch a { flex: 1 0 auto; padding: 6px 9px; font-size: 13px; text-align: center; }
}
@media (max-width: 420px) { .tn-logo img { height: 26px; } }

/* Pasek karty postaci i edytora: działania po prawej, główne „Drukuj / PDF” wyróżnione, reszta w menu „Plik” */
.toolbar.app-bar { gap: 8px 14px; padding: 8px 16px; color: #f9f3f0; }
.app-bar .app-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.toolbar.app-bar button, .toolbar.app-bar select, .toolbar.app-bar .file-btn, .file-menu > summary {
  font: 15px/1.2 'Alegreya', Georgia, serif; padding: 6px 12px; border: 1px solid rgba(241, 225, 221, .32); border-radius: 6px;
  background: transparent; color: #f1e1dd; cursor: pointer;
}
.toolbar.app-bar select { background: #2b221e; }
.toolbar.app-bar button:hover, .toolbar.app-bar .file-btn:hover, .file-menu > summary:hover, .file-menu[open] > summary { background: rgba(241, 225, 221, .12); border-color: rgba(241, 225, 221, .7); color: #fff; }
.toolbar.app-bar #btn-print { background: #f1e1dd; border-color: #f1e1dd; color: #140f0d; font-family: 'Alegreya SC', 'Alegreya', serif; font-weight: 700; }
.toolbar.app-bar #btn-print:hover { background: #fff; }
.file-menu { position: relative; }
.file-menu > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.file-menu > summary::-webkit-details-marker { display: none; }
.file-menu > summary::after { content: '\25BE'; }
.file-menu-list {
  position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; min-width: 230px; display: grid; gap: 2px; padding: 6px;
  border: 1px solid #5a4840; border-radius: 8px; background: #1d1917; box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.toolbar.app-bar .file-menu-list button, .toolbar.app-bar .file-menu-list .file-btn {
  display: block; width: 100%; padding: 8px 12px; border: 0; border-radius: 5px; background: transparent; text-align: left; white-space: nowrap;
}
.toolbar.app-bar .file-menu-list button:hover, .toolbar.app-bar .file-menu-list .file-btn:hover { background: rgba(241, 225, 221, .12); }
.toolbar.app-bar .file-menu-list #btn-reset, .toolbar.app-bar .file-menu-list #btn-clear { margin-top: 4px; border-top: 1px solid #5a4840; border-radius: 0 0 5px 5px; color: #e8a5a5; }
@media (max-width: 800px) {
  .toolbar.app-bar { padding: 8px 12px; }
  .toolbar.app-bar .tools-nav { flex: 1 1 100%; }
}