/* Okno zbiorczego importu SavedVariables (redakcja/_wgraj_dane.html).

   Własny arkusz zamiast klas Tailwinda: skompilowany tailwind.css zawiera
   tylko klasy użyte w szablonach w chwili budowania, a ten ekran ma być
   niezależny od tego, czy ktoś przebudował CSS. Kolory to paleta
   z tailwind.config.js. */

:root {
  --wd-noc-900: #04070f;
  --wd-noc-800: #070c1a;
  --wd-noc-700: #0b1226;
  --wd-obrys: #1e2e4f;
  --wd-zloto: #c9a227;
  --wd-zloto-jasne: #f0d284;
  --wd-szmaragd: #5fb98b;
  --wd-szmaragd-jasny: #8fd6b0;
  --wd-zar: #e2762a;
  --wd-zar-jasny: #ffc46b;
  --wd-rdza: #c2703f;
  --wd-arkana: #5b8de0;
  --wd-patyna: #5e6980;
  --wd-pergamin: #ede8dc;
  --wd-mgla: #8794ae;
}

/* ---------- przycisk w nagłówku ---------- */

.wd-otworz {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .9rem;
  border: 1px solid rgba(201, 162, 39, .45);
  background: linear-gradient(180deg, rgba(201, 162, 39, .16), rgba(201, 162, 39, .05));
  color: var(--wd-zloto-jasne);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  overflow: hidden;
  transition: background .2s, color .2s, box-shadow .2s;
}
.wd-otworz:hover { background: linear-gradient(180deg, rgba(201, 162, 39, .3), rgba(201, 162, 39, .1)); color: #fff; }
.wd-otworz:focus-visible { outline: 2px solid var(--wd-zloto-jasne); outline-offset: 2px; }
/* Błysk przesuwający się po przycisku - zachęta, nie animacja ciągła. */
.wd-otworz::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 236, 180, .28), transparent);
  transform: skewX(-20deg);
  animation: wd-blysk 6s ease-in-out 1.5s infinite;
  pointer-events: none;
}
@keyframes wd-blysk { 0%, 82% { left: -60%; } 100% { left: 130%; } }
.wd-otworz-ikona { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wd-otworz-spinner { display: none; }
.wd-otworz-etykieta { display: none; }
@media (min-width: 640px) { .wd-otworz-etykieta { display: inline; } }

.wd-otworz[data-stan="trwa"] { border-color: rgba(91, 141, 224, .6); color: #cfe0ff; background: rgba(91, 141, 224, .14); }
.wd-otworz[data-stan="trwa"] .wd-otworz-ikona { display: none; }
.wd-otworz[data-stan="trwa"] .wd-otworz-spinner { display: inline-block; }
.wd-otworz[data-stan="gotowe"] { border-color: rgba(95, 185, 139, .6); color: var(--wd-szmaragd-jasny); background: rgba(95, 185, 139, .14); }

/* ---------- okno ---------- */

/* Klasy z `display` przebijają atrybut hidden - tu ma on zawsze wygrać. */
.wd-okno [hidden] { display: none !important; }

.wd-okno { width: min(640px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; background: transparent; color: var(--wd-pergamin); font-family: Inter, sans-serif; font-size: 14px; line-height: 1.5; }
.wd-okno::backdrop { background: rgba(4, 7, 15, .82); backdrop-filter: blur(4px); }
.wd-okno, .wd-okno * { box-sizing: border-box; }
:where(.wd-okno) p, :where(.wd-okno) ol, :where(.wd-okno) ul { margin: 0; padding: 0; list-style: none; }
.wd-okno b { font-weight: 700; }
.wd-okno button { font-family: inherit; line-height: inherit; border: 0; cursor: pointer; }
.wd-okno .wd-zamknij { background: transparent; }
.wd-okno .klip { clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.wd-rama { display: block; padding: 1px; background: linear-gradient(135deg, rgba(201, 162, 39, .55), var(--wd-obrys) 45%, rgba(91, 141, 224, .35)); }
.wd-wnetrze {
  max-height: calc(100vh - 2rem - 2px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--wd-obrys) transparent;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(201, 162, 39, .1), transparent 60%),
    var(--wd-noc-800);
  color: var(--wd-pergamin);
  padding: 1.5rem 1.75rem 1.4rem;
}
.wd-naglowek { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.wd-nadpis { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(168, 203, 255, .7); }
.wd-tytul { margin-top: .2rem; font-family: Cinzel, Georgia, serif; font-size: 21px; font-weight: 700; color: var(--wd-pergamin); }
.wd-zamknij { display: grid; place-items: center; width: 30px; height: 30px; color: var(--wd-mgla); border: 1px solid transparent; transition: color .2s, border-color .2s; }
.wd-zamknij:hover { color: var(--wd-pergamin); border-color: var(--wd-obrys); }
.wd-zamknij svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.wd-ukryte { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* strefa upuszczania */
.wd-strefa {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: 1.8rem 1rem 1.5rem;
  border: 1px dashed rgba(201, 162, 39, .45);
  background: rgba(4, 7, 15, .45);
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s;
}
.wd-strefa:hover, .wd-strefa:focus-within { border-color: var(--wd-zloto); background: rgba(201, 162, 39, .06); }
.wd-strefa[data-nad] { border-style: solid; border-color: var(--wd-zloto-jasne); background: rgba(201, 162, 39, .12); transform: scale(1.01); }
.wd-strefa[data-wybrany] { border-style: solid; border-color: rgba(95, 185, 139, .6); background: rgba(95, 185, 139, .07); }
.wd-strefa-ikona { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 999px; background: rgba(201, 162, 39, .1); color: var(--wd-zloto-jasne); }
.wd-strefa[data-wybrany] .wd-strefa-ikona { background: rgba(95, 185, 139, .14); color: var(--wd-szmaragd-jasny); }
.wd-strefa-ikona svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wd-strefa-tekst { font-size: 13.5px; color: var(--wd-pergamin); }
.wd-strefa-tekst b { color: var(--wd-zloto-jasne); font-weight: 600; }
.wd-strefa-sciezka { font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; color: var(--wd-patyna); word-break: break-all; }
/* wybór wersji gry (tylko strona publiczna) */
.wd-pytanie { margin: 0 0 .9rem; font-size: 13.5px; color: var(--wd-pergamin); }
.wd-wersje { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 520px) { .wd-wersje { grid-template-columns: 1fr; } }
/* Retail złoty, Forever niebieski. Kolor jest na całej karcie (pasek, tło,
   plakietka), a nie tylko na cienkiej ramce, żeby wersje rozróżniać od razu. */
.wd-wersja {
  --wd-wersja: var(--wd-zloto);
  --wd-wersja-jasny: var(--wd-zloto-jasne);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  padding: .9rem 1rem .9rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--wd-wersja) 22%, transparent), transparent 80%),
    rgba(4, 7, 15, .45);
  color: var(--wd-mgla);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s;
}
/* Z prefiksem .wd-okno, bo `.wd-okno button { border: 0 }` jest silniejsze. */
.wd-okno .wd-wersja {
  border: 1px solid color-mix(in srgb, var(--wd-wersja) 50%, transparent);
  border-top: 3px solid var(--wd-wersja);
}
.wd-wersja-forever { --wd-wersja: var(--wd-arkana); --wd-wersja-jasny: #a9c6f5; }
.wd-okno .wd-wersja:hover:not(:disabled), .wd-okno .wd-wersja:focus-visible { border-color: var(--wd-wersja); border-top-color: var(--wd-wersja-jasny); }
.wd-wersja:hover:not(:disabled), .wd-wersja:focus-visible {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--wd-wersja) 32%, transparent), transparent 85%),
    rgba(4, 7, 15, .45);
  transform: translateY(-1px);
}
.wd-wersja-znak {
  padding: .1rem .45rem;
  border: 1px solid color-mix(in srgb, var(--wd-wersja) 60%, transparent);
  background: color-mix(in srgb, var(--wd-wersja) 16%, transparent);
  color: var(--wd-wersja-jasny);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.wd-wersja b { font-size: 18px; color: var(--wd-wersja-jasny); }
.wd-wersja code { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--wd-pergamin); }
.wd-wersja small { font-size: 11.5px; color: var(--wd-zar-jasny); }
.wd-wersja small:empty { display: none; }
/* Przerwa przygasza kartę, ale zostawia jej kolor: dalej widać, która to wersja. */
.wd-wersja:disabled { opacity: .75; filter: saturate(.7); cursor: not-allowed; }

.wd-blad { margin-top: .9rem; padding: .6rem .8rem; border-left: 2px solid var(--wd-rdza); background: rgba(194, 112, 63, .1); font-size: 12px; color: #f2c3a5; }

.wd-stopka { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(30, 46, 79, .7); }
.wd-przycisk { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.1rem; font-size: 12.5px; font-weight: 600; transition: background .2s, color .2s, opacity .2s; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.wd-przycisk svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wd-przycisk-cichy { background: rgba(4, 7, 15, .5); color: var(--wd-mgla); }
.wd-przycisk-cichy:hover { color: var(--wd-pergamin); }
.wd-przycisk-zloty { background: linear-gradient(180deg, var(--wd-zloto-jasne), var(--wd-zloto)); color: var(--wd-noc-900); }
.wd-przycisk-zloty:hover { background: linear-gradient(180deg, #fff, var(--wd-zloto-jasne)); }
.wd-przycisk:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- postęp ---------- */

.wd-pasek-ramka { margin-bottom: 1rem; }
.wd-pasek-opis { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .45rem; font-size: 12px; color: var(--wd-mgla); }
.wd-zegar { font-variant-numeric: tabular-nums; color: var(--wd-patyna); }
.wd-pasek { height: 6px; background: rgba(30, 46, 79, .6); overflow: hidden; }
.wd-pasek span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--wd-zloto), var(--wd-zloto-jasne), var(--wd-zloto));
  background-size: 200% 100%;
  animation: wd-plyn 2.2s linear infinite;
  transition: width .5s cubic-bezier(.2, .85, .25, 1);
}
.wd-pasek[data-koniec] span { background: linear-gradient(90deg, var(--wd-szmaragd), var(--wd-szmaragd-jasny)); animation: none; }
@keyframes wd-plyn { to { background-position: -200% 0; } }

.wd-lista { display: flex; flex-direction: column; gap: 2px; }
.wd-wiersz {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: .75rem;
  align-items: start;
  padding: .6rem .7rem;
  background: rgba(4, 7, 15, .35);
  border-left: 2px solid transparent;
  animation: wd-wjazd .35s cubic-bezier(.2, .85, .25, 1) both;
  transition: background .3s, border-color .3s;
}
@keyframes wd-wjazd { from { opacity: 0; transform: translateY(6px); } }
.wd-wiersz[data-stan="trwa"] { background: rgba(91, 141, 224, .08); border-left-color: var(--wd-arkana); }
.wd-wiersz[data-stan="ok"] { border-left-color: var(--wd-szmaragd); }
.wd-wiersz[data-stan="pusty"], .wd-wiersz[data-stan="pominiety"] { border-left-color: rgba(226, 118, 42, .6); }
.wd-wiersz[data-stan="blad"] { background: rgba(194, 112, 63, .08); border-left-color: var(--wd-rdza); }
.wd-wiersz[data-stan="brak"], .wd-wiersz[data-stan="czeka"] { opacity: .6; }

.wd-ikona { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 999px; }
.wd-ikona svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wd-wiersz[data-stan="czeka"] .wd-ikona { border: 1.5px dashed var(--wd-patyna); }
.wd-wiersz[data-stan="brak"] .wd-ikona { border: 1.5px solid var(--wd-patyna); color: var(--wd-patyna); }
.wd-wiersz[data-stan="trwa"] .wd-ikona { border: 2px solid rgba(91, 141, 224, .25); border-top-color: var(--wd-arkana); animation: wd-obrot .8s linear infinite; }
.wd-wiersz[data-stan="ok"] .wd-ikona { background: var(--wd-szmaragd); color: var(--wd-noc-900); animation: wd-pyk .45s cubic-bezier(.3, 1.6, .5, 1); box-shadow: 0 0 14px rgba(95, 185, 139, .45); }
.wd-wiersz[data-stan="ok"] .wd-ikona path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: wd-rysuj .4s .12s ease-out forwards; }
.wd-wiersz[data-stan="pusty"] .wd-ikona, .wd-wiersz[data-stan="pominiety"] .wd-ikona { background: rgba(226, 118, 42, .2); color: var(--wd-zar-jasny); animation: wd-pyk .45s cubic-bezier(.3, 1.6, .5, 1); }
.wd-wiersz[data-stan="blad"] .wd-ikona { background: var(--wd-rdza); color: var(--wd-noc-900); animation: wd-drgnij .4s ease-in-out; }
@keyframes wd-obrot { to { transform: rotate(360deg); } }
@keyframes wd-pyk { 0% { transform: scale(.3); } 100% { transform: scale(1); } }
@keyframes wd-rysuj { to { stroke-dashoffset: 0; } }
@keyframes wd-drgnij { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

.wd-wiersz-tytul { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; font-size: 13px; color: var(--wd-pergamin); }
.wd-wiersz-tytul a { color: inherit; text-decoration: none; }
.wd-wiersz-tytul a:hover { color: var(--wd-zloto-jasne); }
.wd-wiersz-licznik { font-size: 11px; color: var(--wd-patyna); }
.wd-wiersz-opis { margin-top: .2rem; font-size: 11.5px; line-height: 1.5; color: var(--wd-mgla); }
.wd-wiersz[data-stan="blad"] .wd-wiersz-opis { color: #f2c3a5; }
.wd-wiersz-czas { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--wd-patyna); white-space: nowrap; }
.wd-szczegoly { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; animation: wd-wjazd .35s ease-out both; }
.wd-chip { display: inline-flex; align-items: baseline; gap: .3rem; padding: .15rem .5rem; font-size: 11px; background: rgba(30, 46, 79, .55); color: var(--wd-mgla); }
.wd-chip b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--wd-pergamin); }
.wd-chip-nowe { background: rgba(95, 185, 139, .14); color: var(--wd-szmaragd-jasny); }
.wd-chip-nowe b { color: #c5f0d9; }
.wd-chip-zmienione { background: rgba(91, 141, 224, .14); color: #a8cbff; }
.wd-chip-pominiete { background: rgba(226, 118, 42, .12); color: var(--wd-zar-jasny); }
.wd-pod-lista { margin-top: .4rem; padding-left: 1rem; list-style: disc; font-size: 11px; line-height: 1.55; color: var(--wd-mgla); }
.wd-link { display: inline-block; margin-top: .4rem; font-size: 11px; color: var(--wd-zloto); }
.wd-link:hover { color: var(--wd-zloto-jasne); }
.wd-ostrzezenie { margin-top: 1rem; font-size: 11px; line-height: 1.55; color: var(--wd-patyna); }

/* ---------- finał ---------- */

.wd-koniec {
  position: relative;
  margin-bottom: 1.2rem;
  padding: 1.4rem 1rem 1.2rem;
  text-align: center;
  background: radial-gradient(80% 90% at 50% 0%, rgba(95, 185, 139, .16), transparent 70%);
  overflow: hidden;
  animation: wd-wjazd .5s cubic-bezier(.2, .85, .25, 1) both;
}
.wd-koniec-znak { position: relative; width: 74px; height: 74px; margin: 0 auto .7rem; }
.wd-koniec-znak svg { width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wd-koniec-znak circle { stroke: var(--wd-szmaragd); stroke-width: 3; stroke-dasharray: 202; stroke-dashoffset: 202; animation: wd-rysuj .7s ease-out forwards; filter: drop-shadow(0 0 8px rgba(95, 185, 139, .6)); }
.wd-koniec-znak path { stroke: var(--wd-szmaragd-jasny); stroke-width: 4; stroke-dasharray: 50; stroke-dashoffset: 50; animation: wd-rysuj .45s .55s ease-out forwards; }
.wd-koniec[data-uwagi] .wd-koniec-znak circle { stroke: var(--wd-zloto); filter: drop-shadow(0 0 8px rgba(201, 162, 39, .6)); }
.wd-koniec[data-uwagi] .wd-koniec-znak path { stroke: var(--wd-zloto-jasne); }
.wd-koniec-tytul { font-family: Cinzel, Georgia, serif; font-size: 25px; font-weight: 700; color: var(--wd-pergamin); }
.wd-koniec-podtytul { margin-top: .35rem; font-size: 12.5px; color: var(--wd-mgla); }
.wd-kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 2px; margin-top: 1.1rem; }
.wd-kafel { padding: .6rem .4rem; background: rgba(4, 7, 15, .45); }
.wd-kafel b { display: block; font-family: Cinzel, Georgia, serif; font-size: 20px; font-variant-numeric: tabular-nums; color: var(--wd-pergamin); }
.wd-kafel span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--wd-patyna); }
.wd-kafel-nowe b { color: var(--wd-szmaragd-jasny); }
.wd-kafel-bledy b { color: var(--wd-rdza); }

.wd-iskra {
  position: absolute;
  left: 50%;
  top: 58px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--wd-zloto-jasne);
  box-shadow: 0 0 8px rgba(240, 210, 132, .9);
  opacity: 0;
  animation: wd-iskra 1.1s .5s cubic-bezier(.15, .7, .3, 1) forwards;
  pointer-events: none;
}
.wd-iskra:nth-child(3n) { background: var(--wd-szmaragd-jasny); box-shadow: 0 0 8px rgba(143, 214, 176, .9); }
@keyframes wd-iskra {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.3); }
}

@media (max-width: 520px) {
  .wd-wnetrze { padding: 1.2rem 1rem; }
  .wd-wiersz { grid-template-columns: 22px 1fr; }
  .wd-wiersz-czas { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .wd-otworz::after, .wd-iskra { display: none; }
  .wd-wiersz, .wd-wiersz .wd-ikona, .wd-koniec, .wd-szczegoly, .wd-pasek span { animation: none; }
  .wd-wiersz[data-stan="ok"] .wd-ikona path, .wd-koniec-znak circle, .wd-koniec-znak path { animation: none; stroke-dashoffset: 0; }
  .wd-wiersz[data-stan="trwa"] .wd-ikona { animation: wd-obrot 2s linear infinite; }
}

.wd-otworz-spinner {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  border: 2px solid rgba(168, 203, 255, .25);
  border-top-color: #cfe0ff;
  animation: wd-obrot .8s linear infinite;
}