/* Paleta 1:1 z marynarze.com (Base.astro): paper/ink/muted/navy/sea/foam/card/line.
   Quiz ma wygladac jak czesc serwisu, nie jak osobna apka. */
:root {
  --tlo: #f4f8fb;          /* --paper */
  --karta: #ffffff;        /* --card */
  --tekst: #10283a;        /* --ink */
  --tekst-slaby: #54708a;  /* --muted */
  --granat: #0b2545;       /* --navy */
  --granat-gleboki: #071a2f;
  --morski: #1273a0;       /* --sea */
  --morski-gleboki: #0d5c86; /* --sea-deep */
  --turkus: #1273a0;       /* akcent = ten sam morski, bez obcego turkusu */
  --turkus-mgla: #e7f1f8;  /* --foam */
  --morski-mgla: #e7f1f8;  /* --foam */
  --dobra: #15803d;        /* --dz-hotelowy (zieleń serwisu) */
  --dobra-tlo: #e8f5ec;
  --zla: #b3261e;          /* bledna odpowiedz musi byc czerwona, nie brazowa jak --warn */
  --zla-tlo: #fceceb;
  --kreska: #d8e4ee;       /* --line */
  --cien: 0 1px 2px rgba(11, 37, 69, .06), 0 8px 24px -18px rgba(11, 37, 69, .35);
  --cien-mocny: 0 18px 44px -24px rgba(11, 37, 69, .5);
  --promien: 12px;
}

html[data-motyw="ciemny"] {
  --tlo: #081522;
  --karta: #0f2135;
  --tekst: #e9f0f7;
  --tekst-slaby: #9ab2c8;
  --granat: #e9f0f7;
  --morski: #4fa8dc;
  --morski-gleboki: #6cbbe6;
  --turkus: #4fa8dc;
  --turkus-mgla: #14293e;
  --morski-mgla: #14293e;
  --dobra: #4fcd8d;
  --dobra-tlo: #102a20;
  --zla: #ff9086;
  --zla-tlo: #2c1917;
  --kreska: #21374f;
  --cien: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .3);
  --cien-mocny: 0 20px 50px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* atrybut hidden musi wygrywac z display z klas (np. .werdykt) */

/* tylko dla czytnikow ekranu: poza ekranem wizualnie, ale w drzewie dostepnosci (region aria-live) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* elementy fokusowane programowo dla a11y (nie klikalne): nie pokazuj ramki fokusu.
   Klawiatura i tak dziala; ramka na naglowku/karcie tylko myliłaby wzrokowo. */
#tresc-pytania:focus, #karta-wynik:focus { outline: none; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font: 17px/1.62 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.srodek { width: min(780px, 100% - 32px); margin-inline: auto; }

/* --- pas gorny --- */
.pas {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--karta) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--kreska);
}
.pas__tresc { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.pas__prawo { display: flex; align-items: center; gap: 6px; }

/* marka 1:1 z naglowkiem marynarze.com */
.marka {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--granat); text-decoration: none;
  font-weight: 800; font-size: 1.18rem; letter-spacing: .01em;
}
.marka em { font-style: normal; color: var(--morski); }
.marka__fale { width: 40px; height: 24px; fill: none; stroke: var(--morski); stroke-width: 2; stroke-linecap: round; }

.powrot {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--morski); text-decoration: none; font-weight: 600; font-size: 15px;
  padding: 8px 12px; border-radius: 99px; border: 1px solid var(--kreska);
}
.powrot::before { content: "←"; }
.powrot:hover { background: var(--morski-mgla); border-color: var(--morski); }
@media (max-width: 520px) { .powrot { font-size: 0; padding: 8px 10px; } .powrot::before { font-size: 16px; } }

/* ikony: kreska w kolorze tekstu, jak Icon.astro w serwisie */
.ikona { display: inline-block; vertical-align: -0.155em; color: inherit; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* chipy dzialow: monochromatyczne (morski), jak nawigacja serwisu */
.chipy { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
  background: var(--karta); color: var(--tekst);
  border: 1px solid var(--kreska); border-radius: 99px;
  transition: border-color .12s, background .12s;
}
.chip .ikona { color: var(--morski); }
.chip:hover { border-color: var(--morski); }
.chip.wybrany {
  border-color: var(--morski);
  background: color-mix(in srgb, var(--morski) 10%, var(--karta));
  color: var(--morski);
}
.chip.wybrany .ikona { color: var(--morski); }

/* wyszukiwarka testow */
.szukajka { position: relative; }
#szukaj {
  width: 100%; padding: 14px; font: inherit;
  background: var(--karta); color: var(--tekst);
  border: 1px solid var(--kreska); border-radius: var(--promien);
}
#szukaj:focus-visible { outline: 3px solid var(--morski); outline-offset: 2px; }
.podpowiedzi {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
  margin: 0; padding: 6px; list-style: none;
  background: var(--karta); border: 1px solid var(--kreska);
  border-radius: var(--promien); box-shadow: var(--cien-mocny);
  max-height: 320px; overflow-y: auto;
}
.podpowiedz {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
}
.podpowiedz:hover { background: var(--morski-mgla); }
.podpowiedz__ikona {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 9px; color: var(--morski);
  background: color-mix(in srgb, var(--morski) 11%, var(--karta));
}
.podpowiedz__tresc { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.podpowiedz__tresc b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podpowiedz small { color: var(--tekst-slaby); font-size: 13px; }
.podpowiedz__typ {
  margin-left: auto; flex: none; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--tekst-slaby);
  border: 1px solid var(--kreska); border-radius: 99px; padding: 3px 9px;
}
.podpowiedz--pusto { color: var(--tekst-slaby); cursor: default; }
.podpowiedz--pusto:hover { background: transparent; }

/* --- hero: statyczny obraz pod granatowym gradientem brandu, dokladnie jak HeroPas.astro w serwisie.
   Bez wideo: lekkie, szybkie, niezawodne. --- */
.hero {
  position: relative; isolation: isolate; margin: 0;
  min-height: 420px; display: grid; align-items: end;
  overflow: hidden;
}
.hero__foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  object-position: 60% 40%;   /* kadr: nawigator z lornetka + radary, gradient brandu od lewej pod tekst */
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    rgba(11, 37, 69, .93) 0%, rgba(11, 37, 69, .78) 48%, rgba(13, 92, 134, .38) 100%);
}
.hero__tresc { color: #eaf4fb; padding-top: 40px; padding-bottom: 44px; }
.hero__nad {
  display: inline-block; margin: 0 0 14px;
  font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: #a9e4f2;
  background: rgba(23, 184, 212, .12);
  border: 1px solid rgba(23, 184, 212, .35);
  padding: 6px 12px; border-radius: 99px;
}
.hero h1 {
  margin: 0 0 14px;
  font-size: clamp(30px, 6vw, 46px); line-height: 1.12; letter-spacing: -.5px;
  color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.hero__lead { margin: 0; max-width: 46ch; color: #c8dced; }

@media (max-width: 640px) { .hero { min-height: 340px; } }

/* --- karty --- */
.karta {
  position: relative; z-index: 2;
  background: var(--karta);
  border: 1px solid var(--kreska);
  border-radius: 20px;
  box-shadow: var(--cien-mocny);
  padding: 26px;
}
.karta--wybor { margin-top: -34px; margin-bottom: 40px; }

h2 { font-size: clamp(20px, 4vw, 26px); line-height: 1.35; margin: 0 0 22px; color: var(--granat); }
.lead { color: var(--tekst-slaby); margin: 0; }

.pasek-stat {
  background: linear-gradient(90deg, var(--turkus-mgla), transparent);
  border-left: 3px solid var(--turkus);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 22px;
  font-size: 15px; color: var(--tekst-slaby);
}
.pasek-stat b { color: var(--tekst); }

.pole { margin-bottom: 22px; }
.pole label { display: block; font-weight: 600; font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 9px; color: var(--tekst-slaby); }

select {
  width: 100%; padding: 14px; font: inherit;
  background: var(--karta); color: var(--tekst);
  border: 1px solid var(--kreska); border-radius: var(--promien);
}
select:focus-visible, button:focus-visible { outline: 3px solid var(--turkus); outline-offset: 2px; }

/* tryby */
.tryby { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 560px) { .tryby { grid-template-columns: 1fr; } }
.tryb {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 14px; text-align: left; font: inherit; cursor: pointer;
  background: var(--karta); color: var(--tekst);
  border: 1px solid var(--kreska); border-radius: var(--promien);
  transition: border-color .15s, background .15s, transform .1s;
}
.tryb:hover { border-color: var(--turkus); transform: translateY(-1px); }
.tryb .ikona { color: var(--morski); margin-bottom: 4px; }
.tryb b { font-size: 16px; }
.tryb small { color: var(--tekst-slaby); font-size: 12.5px; line-height: 1.4; }
.tryb.wybrany { border-color: var(--turkus); background: var(--turkus-mgla); box-shadow: inset 0 0 0 1px var(--turkus); }

.przelaczniki { display: flex; gap: 8px; flex-wrap: wrap; }
.przel {
  flex: 1 1 auto; min-width: 74px; padding: 12px; font: inherit; cursor: pointer;
  background: var(--karta); color: var(--tekst);
  border: 1px solid var(--kreska); border-radius: var(--promien);
}
.przel.wybrany { border-color: var(--turkus); background: var(--turkus-mgla); color: var(--morski); font-weight: 600; }

.notka-symulator {
  background: var(--morski-mgla); border-radius: var(--promien);
  padding: 14px 16px; font-size: 15px; color: var(--tekst-slaby);
}
.notka-symulator b { color: var(--tekst); }
.notka-symulator .zrodlo { display: block; margin-top: 6px; font-size: 13px; }

.glowny, .poboczny {
  width: 100%; padding: 16px 20px; font: inherit; font-weight: 600; cursor: pointer;
  border-radius: var(--promien); border: 1px solid transparent; margin-top: 6px;
}
.glowny {
  background: var(--morski);
  color: #fff; box-shadow: 0 6px 18px -8px rgba(11, 37, 69, .5);
}
.glowny:hover { filter: brightness(1.06); }
.poboczny { background: transparent; color: var(--morski); border-color: var(--kreska); }
.poboczny:hover { border-color: var(--morski); }

.reset-link {
  display: block; width: 100%; margin-top: 4px; padding: 10px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--tekst-slaby); text-decoration: underline;
}
.reset-link:hover { color: var(--zla); }

.ikonka {
  background: transparent; border: 0; color: var(--tekst-slaby);
  font-size: 19px; cursor: pointer; padding: 6px 10px; border-radius: 8px;
}
.ikonka:hover { background: var(--morski-mgla); }

/* Przycisk SFX: dzwiek i haptyka istnieja TYLKO na urzadzeniach dotykowych (dzwiek.js, DOTYK).
   Na desktopie (mysz/trackpad) przycisk nie kontroluje niczego co widac/slychac - myli, wiec go nie ma.
   Ten sam breakpoint co DOTYK w dzwiek.js, tylko odwrotny (decyzja Lukasza 17.07). */
@media (hover: hover) and (pointer: fine) {
  #sfx { display: none; }
}

/* --- quiz --- */
#ekran-quiz { padding-top: 32px; }
.postep { height: 6px; background: var(--kreska); border-radius: 99px; overflow: hidden; margin-bottom: 18px; }
#pasek { height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--morski-gleboki), var(--morski));
  transition: width .35s cubic-bezier(.4, 0, .2, 1); }

.naglowek-quizu { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.licznik { font-weight: 700; color: var(--granat); font-variant-numeric: tabular-nums; }
.etykieta {
  background: var(--morski-mgla); color: var(--morski);
  padding: 4px 11px; border-radius: 99px; font-size: 12px; font-weight: 600;
}
.zegar {
  margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700;
  background: var(--turkus-mgla); color: var(--morski);
  padding: 5px 12px; border-radius: 99px; font-size: 15px;
}
.zegar.srednio { background: #fbeccd; color: #9a6400; }  /* bursztyn: <=25% czasu, jeszcze bez paniki */
html[data-motyw="ciemny"] .zegar.srednio { background: #3a2c12; color: #f0b64d; }
.zegar.malo { background: var(--zla-tlo); color: var(--zla); animation: puls 1s ease-in-out infinite; }
@keyframes puls { 50% { opacity: .55; } }
.naglowek-quizu #przerwij { margin-left: auto; }
.zegar + #przerwij { margin-left: 0; }

.warianty { display: grid; gap: 10px; }
.wariant {
  display: flex; gap: 13px; align-items: flex-start; width: 100%; text-align: left;
  padding: 15px 16px; font: inherit; cursor: pointer;
  background: var(--karta); color: var(--tekst);
  border: 1px solid var(--kreska); border-radius: var(--promien);
  box-shadow: var(--cien); transition: border-color .12s, transform .08s;
}
.wariant:hover:not(:disabled) { border-color: var(--turkus); transform: translateX(2px); }
.wariant:disabled { cursor: default; }
.wariant .litera {
  flex: 0 0 30px; height: 30px; display: grid; place-items: center;
  background: var(--morski-mgla); color: var(--morski);
  border-radius: 9px; font-weight: 700; font-size: 14px;
}
.wariant.dobra { border-color: var(--dobra); background: var(--dobra-tlo); }
.wariant.dobra .litera { background: var(--dobra); color: #fff; }
.wariant.zla { border-color: var(--zla); background: var(--zla-tlo); }
.wariant.zla .litera { background: var(--zla); color: #fff; }
.wariant.wybrana { border-color: var(--morski); background: var(--morski-mgla); }

.reakcja { margin-top: 18px; padding: 15px 16px; border-radius: var(--promien); font-weight: 600; }
.reakcja.dobra { background: var(--dobra-tlo); color: var(--dobra); }
.reakcja.zla { background: var(--zla-tlo); color: var(--zla); }
.reakcja small { display: block; font-weight: 400; margin-top: 5px; color: var(--tekst-slaby); }

/* --- mikrointerakcje (krok 3 „Feel"): subtelne, informacyjne, morskie ---
   Wszystko respektuje prefers-reduced-motion ORAZ przelacznik SFX (html[data-animacje="off"]).
   Sam feedback zielen/czerwien jest w klasach .dobra/.zla wyzej i dziala zawsze. */

/* ptaszek rysowany kreska na poprawnej odpowiedzi (dodawany przez fx.js) */
.ptaszek { margin-left: auto; align-self: center; flex: none; width: 22px; height: 22px;
  fill: none; stroke: var(--dobra); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ptaszek path { stroke-dasharray: 26; stroke-dashoffset: 26; }
.ptaszek.rysuj path { animation: rysujPtaszek .3s ease-out forwards; }
@keyframes rysujPtaszek { to { stroke-dashoffset: 0; } }

/* potrzasniecie blednego wariantu i pojedynczy puls poprawnego (klasy dodaje fx.js tylko gdy animacjeOK) */
.wariant.potrzasnij { animation: potrzasnij .24s ease-in-out; }
.wariant.pulsuj { animation: pulsuj .5s ease-in-out; }
@keyframes potrzasnij {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}
@keyframes pulsuj { 50% { transform: scale(1.03); } }

/* sprezynujace wejscie werdyktu (klase dodaje fx.js) */
.werdykt.wpada { animation: wpada .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes wpada { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* konfetti brandu (canvas z fx.js) */
.konfetti-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }

/* efekty czysto-CSS (nie dodawane przez JS) musza same respektowac oba warunki */
@media (prefers-reduced-motion: no-preference) {
  /* wcisniecie wariantu pod palcem */
  html:not([data-sfx="off"]) .wariant:not(:disabled):active { transform: scale(.98); }
  /* delikatny polysk fali na pasku postepu */
  html:not([data-sfx="off"]) #pasek {
    background: linear-gradient(90deg, var(--morski-gleboki), var(--morski), var(--morski-gleboki));
    background-size: 200% 100%; animation: przeplyw 3s linear infinite;
  }
  /* View Transitions: spokojny cross-fade calej strony miedzy ekranami */
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
}
@keyframes przeplyw { to { background-position: -200% 0; } }

/* --- wynik --- */
#ekran-wynik { padding-top: 32px; }
.karta--wynik { text-align: center; margin-bottom: 22px; }
.werdykt {
  display: inline-block; padding: 6px 16px; border-radius: 99px; margin-bottom: 14px;
  font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.werdykt.zdany { background: var(--dobra-tlo); color: var(--dobra); }
.werdykt.niezdany { background: var(--zla-tlo); color: var(--zla); }
.wynik-duzy { font-size: 62px; font-weight: 800; color: var(--granat); line-height: 1.05; margin-bottom: 10px; }
.wynik-duzy span { font-size: 21px; color: var(--tekst-slaby); font-weight: 600; }

.przyciski { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.przyciski button { flex: 1 1 200px; width: auto; }

.blad {
  background: var(--karta); border: 1px solid var(--kreska); border-left: 4px solid var(--zla);
  border-radius: var(--promien); padding: 15px 16px; margin-bottom: 12px; box-shadow: var(--cien);
}
.blad p { margin: 0 0 9px; font-weight: 600; }
.blad .odp { font-size: 15px; margin: 4px 0; color: var(--tekst-slaby); }
.blad .odp b { color: var(--dobra); }
.blad .odp.moja b { color: var(--zla); }

/* --- stopka --- */
.stopka { margin-top: 40px; padding: 26px 0 44px; color: var(--tekst-slaby); font-size: 14px;
  border-top: 1px solid var(--kreska); background: var(--karta); }
.stopka a { color: var(--morski); }
.stopka p { margin: 0 0 12px; }
.stopka__mocne {
  font-weight: 600; color: var(--tekst);
  border-left: 3px solid var(--turkus); padding-left: 12px;
}
.drobne { font-size: 13px; }

/* --- raport do druku / PDF --- */
.tylko-druk { display: none; }  /* na ekranie ukryte, widoczne tylko przy druku */

@media print {
  /* czysta biel, oszczędność tuszu, tekst na czarno */
  :root { --tekst: #000; --tekst-slaby: #333; --kreska: #bbb; }
  html[data-motyw="ciemny"] { --karta: #fff; --tekst: #000; --tekst-slaby: #333; }
  body { background: #fff; color: #000; }

  /* wszystko poza raportem znika */
  .pas, .hero, .przyciski, .stopka, #ekran-start, #ekran-quiz { display: none !important; }
  .srodek { width: 100%; }
  #ekran-wynik { padding: 0; }

  .tylko-druk { display: block; }

  #raport-naglowek {
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 2px solid var(--navy, #0b2545); padding-bottom: 10px; margin-bottom: 16px;
  }
  .raport-marka { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; color: #0b2545; }
  .raport-marka em { font-style: normal; color: #1273a0; }
  .raport-marka svg { width: 34px; height: 20px; fill: none; stroke: #1273a0; stroke-width: 2; stroke-linecap: round; }
  .raport-tytul { text-align: right; }
  .raport-tytul strong { display: block; font-size: 15px; color: #0b2545; }
  .raport-podtytul { display: block; font-size: 11px; color: #555; margin-bottom: 2px; }
  #raport-meta { font-size: 12px; color: #333; }

  .karta--wynik { box-shadow: none; border: 1px solid #bbb; text-align: left; margin-bottom: 14px; page-break-inside: avoid; }
  .wynik-duzy { font-size: 34px; }
  .werdykt { border: 1px solid currentColor; }

  #lista-bledow h2 { font-size: 15px; margin: 12px 0 8px; }
  .blad { box-shadow: none; border: 1px solid #ccc; border-left: 3px solid #b3261e; page-break-inside: avoid; }
  .blad .odp b { color: #000; }

  #raport-stopka {
    margin-top: 18px; padding-top: 10px; border-top: 1px solid #bbb;
    font-size: 11px; color: #444; page-break-inside: avoid;
  }

  a[href]::after { content: ""; }  /* nie doklejaj URL-i przy linkach */
}