/* rysinder — cukierkowy róż.
   Białe karty na nasyconym różu, fuksja na TAK, żółć na NIE.
   Cała odwaga idzie w poświatę pod kartą — reszta zostaje cicha. */

:root {
  --roz: #ff8fc0;
  --roz-glebszy: #ff7ab3;
  --biel: #fff;
  --roz-mgla: #ffe6f0;
  --wisnia: #3d0a24;
  --wisnia-mgla: #8a5a70;
  --fuksja: #ff1f7a;
  --zolc: #ffd84d;

  --krawedz: rgba(61, 10, 36, .12);
  --cien: 0 14px 34px rgba(61, 10, 36, .28);

  --display: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--display);
  color: var(--wisnia);
  background: var(--roz);
  background-image: radial-gradient(120% 65% at 50% 0%, #ffa8ce 0%, var(--roz) 55%, var(--roz-glebszy) 100%);
}

/* ---------- pasek ---------- */

.pasek { padding: 1.1rem 1rem .4rem; text-align: center; }

.logo {
  margin: 0;
  display: inline-flex;
  align-items: flex-end;
  gap: .45rem;
  font-size: clamp(1.7rem, 8vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  /* Wiśnia, nie biel: biel na tym różu daje kontrast 2,1:1, czyli poniżej
     progu czytelności nawet dla dużego tekstu. Wiśnia daje 7,9:1. */
  color: var(--wisnia);
}

/* Kępki na uszach — cecha rasy i źródło nazwy, stąd znak marki. */
.kepki { width: 1.5rem; height: .75rem; overflow: visible; }
.kepki path { fill: none; stroke: var(--fuksja); stroke-width: 1.6; stroke-linecap: round; }

/* ---------- ekrany ---------- */

main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  padding: .5rem 1rem 1rem;
  /* Poświata celowo wypływa poza kartę i bez przycięcia strona przewijała się
     w bok o ~70 px na telefonie. Przycinamy tutaj, a nie na html: overflow-x
     z body nie propaguje się do viewportu, a clip na korzeniu Chrome ignoruje.
     clip zamiast hidden, żeby nie robić z main kontenera przewijania. */
  overflow-x: clip;
}

.ekran { display: none; width: 100%; max-width: 25rem; }
body[data-screen="brief"] #ekran-brief,
body[data-screen="wynik"] #ekran-wynik { display: block; }

/* Ekran gry to kolumna: HUD i przyciski biorą swoje, talia resztę.
   Dzięki temu mieści się na każdym telefonie bez przewijania. */
body[data-screen="gra"] #ekran-gra { display: flex; flex-direction: column; min-height: 0; }

.panel {
  background: var(--biel);
  border-radius: 1.1rem;
  padding: 1.5rem 1.35rem;
  box-shadow: var(--cien);
}

.nadpis {
  margin: 0 0 .5rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fuksja);
}

h2 { margin: 0 0 .4rem; font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; }
.lead { margin: 0 0 1.1rem; color: var(--wisnia-mgla); font-size: .92rem; }

.wskazowki { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.wskazowki li {
  position: relative;
  padding: .65rem .8rem .65rem 2rem;
  margin-bottom: .45rem;
  background: var(--roz-mgla);
  border-radius: .5rem;
  font-family: var(--mono);
  font-size: .85rem;
  line-height: 1.3;
}
/* Ten sam znak kępek co przy logo — marker niesie treść, nie ozdabia. */
.wskazowki li::before {
  content: "";
  position: absolute;
  left: .75rem;
  top: 50%;
  width: .7rem;
  height: .7rem;
  margin-top: -.35rem;
  background: var(--fuksja);
  clip-path: polygon(0 100%, 30% 0, 45% 100%, 55% 100%, 70% 0, 100% 100%);
}

.drobne { margin: 0 0 1.2rem; font-size: .82rem; color: var(--wisnia-mgla); line-height: 1.45; }
.drobne strong { color: var(--wisnia); }

.btn {
  width: 100%;
  border: 0;
  border-radius: .6rem;
  padding: .85rem 1.5rem;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--biel);
  background: var(--fuksja);
  cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }

/* ---------- HUD ---------- */

.hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 .2rem .6rem;
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--wisnia);
}
/* Wypalone serca muszą zostać widoczne, a nie zniknąć w tle. */
.serca { display: inline-flex; gap: .3rem; }
.serce { color: var(--fuksja); }
.serce--pusty { color: var(--wisnia); opacity: .3; }
.licznik { opacity: .75; }

.brief-skrot {
  background: var(--biel);
  border-radius: .7rem;
  padding: .5rem .75rem;
  margin-bottom: .7rem;
  font-size: .85rem;
  box-shadow: 0 4px 14px rgba(61, 10, 36, .16);
}
.brief-skrot summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wisnia-mgla);
}
.brief-skrot ul { margin: .6rem 0 .15rem; padding: 0; list-style: none; }
.brief-skrot li { font-family: var(--mono); font-size: .8rem; padding: .15rem 0 .15rem .9rem; position: relative; }
.brief-skrot li::before { content: "·"; position: absolute; left: .2rem; color: var(--fuksja); }

/* ---------- talia ---------- */

/* --moc (0-1) i --barwa ustawia JS podczas przeciągania; dziedziczą je
   zarówno poświata pod kartą, jak i sama krawędź karty. */
.talia {
  position: relative;
  flex: 1 1 auto;
  min-height: 11rem;
  max-height: 32rem;
  --moc: 0;
  --barwa: var(--fuksja);
}

.poswiata {
  position: absolute;
  /* Musi wychodzić daleko poza kartę — karta jest nieprzezroczysta
     i inaczej przykrywa poświatę w całości. */
  inset: -26% -24%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--barwa), transparent 70%);
  opacity: calc(var(--moc) * .95);
  filter: blur(30px);
  pointer-events: none;
  transition: opacity .18s ease;
}

.karta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--biel);
  border-radius: 1.1rem;
  /* Trzy warstwy sygnatury. Ostry pierścień niesie stan nawet wtedy, gdy
     rozmyta poświata ginie — fuksja na różowym tle to róż na różu, więc sam
     blask nie wystarcza. Rozmyta łuna dokłada ciepło tam, gdzie widać
     (żółć na NIE czyta się świetnie), a --cien trzyma kartę nad tłem. */
  box-shadow: 0 0 0 calc(var(--moc) * 4px) var(--barwa),
              var(--cien),
              0 0 calc(var(--moc) * 46px) calc(var(--moc) * 8px)
              color-mix(in srgb, var(--barwa) calc(var(--moc) * 75%), transparent);
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}
.karta.wraca { transition: transform .28s cubic-bezier(.2, .8, .3, 1); }
.karta.wychodzi { transition: transform .34s ease-in, opacity .34s ease-in; opacity: 0; }

.karta-foto {
  width: 100%;
  /* Sztywny udział, nie elastyczny: przy długim bio na niskim ekranie
     tekst wypychał zdjęcie do paska, a z fotki odczytuje się kolor futra,
     oczu i kępki, czyli połowę wskazówek. Teraz to tekst się przewija. */
  flex: 0 0 56%;
  min-height: 0;
  object-fit: cover;
  /* Kadrujemy na górną część zdjęcia: na niskiej karcie telefonu środek
     kadru wypada na tułowiu i pysk wypada poza obraz, a to z pyska
     odczytuje się kolor oczu i kępki, czyli połowę wskazówek. */
  object-position: 50% 30%;
  background: var(--roz-mgla);
}

.karta-tresc { flex: 1 1 auto; min-height: 0; padding: .85rem 1rem 1rem; overflow-y: auto; }
/* Klasę wpina JS tylko wtedy, gdy treść faktycznie nie mieści się w karcie.
   Bez tego sygnału gracz nie wie, że pod spodem są jeszcze tagi — a w nich
   bywa jedyne wystąpienie którejś wskazówki. */
.karta-tresc.przewija {
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.6rem), transparent);
}
.karta-tresc h2 { font-size: 1.3rem; margin-bottom: .35rem; }
.karta-tresc p { margin: 0 0 .6rem; font-size: .9rem; line-height: 1.45; color: #5c3244; }

.tagi { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; padding: 0; margin: 0; }
.tagi li {
  padding: .2rem .55rem;
  background: var(--roz-mgla);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .7rem;
  color: #a03464;
}

.stempel {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  z-index: 2;
  padding: .1rem .6rem;
  border: .2rem solid currentColor;
  border-radius: .35rem;
  background: rgba(255, 255, 255, .82);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .04em;
  opacity: 0;
  transform: rotate(-12deg);
  pointer-events: none;
}
.stempel.tak { color: var(--fuksja); }
/* Żółć na jasnym zdjęciu sama by zniknęła — stempel dostaje białe tło,
   a tekst przyciemnioną żółć, żeby zostać czytelny na każdej fotce. */
.stempel.nie { color: #b8890a; left: auto; right: 1.1rem; transform: rotate(12deg); }

/* ---------- przyciski swipe ---------- */

.przyciski { flex: 0 0 auto; display: flex; justify-content: center; gap: 2.5rem; padding-top: 1rem; }

.btn-kolo {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  border: 0;
  background: var(--biel);
  box-shadow: var(--cien);
  font-size: 1.45rem;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease;
}
.btn-nie { color: #b8890a; }
.btn-tak { color: var(--fuksja); }
.btn-nie:hover { box-shadow: var(--cien), 0 0 0 5px rgba(255, 216, 77, .55); }
.btn-tak:hover { box-shadow: var(--cien), 0 0 0 5px rgba(255, 31, 122, .3); }
.btn-kolo:active { transform: scale(.92); }

.podpowiedz {
  flex: 0 0 auto;
  margin: .6rem 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--wisnia);
  opacity: .7;
}

/* ---------- wynik ---------- */

.wynik-foto {
  width: 100%;
  max-height: 14rem;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: .6rem;
  margin: .9rem 0;
}
#wynik-tekst { margin: 0 0 1.2rem; color: #5c3244; font-size: .95rem; line-height: 1.5; }

/* Wygrana to jedyny moment, w którym fuksja wychodzi poza akcent. */
body[data-wynik="won"] #wynik-tytul { color: var(--fuksja); }
body[data-wynik="won"] .panel { box-shadow: var(--cien), 0 0 0 4px rgba(255, 31, 122, .35); }

/* ---------- autorzy ---------- */

.autorzy { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.autorzy li {
  padding: .55rem 0;
  border-bottom: 1px solid var(--krawedz);
  font-family: var(--mono);
  font-size: .76rem;
  line-height: 1.5;
  color: var(--wisnia-mgla);
}
.autorzy li:last-child { border-bottom: 0; }
.autorzy a { color: var(--fuksja); }

/* ---------- stopka ---------- */

.stopka {
  flex: 0 0 auto;
  padding: .6rem 1rem .8rem;
  text-align: center;
  font-size: .75rem;
  color: var(--wisnia);
  opacity: .8;
}
.stopka a { color: var(--wisnia); }

/* ---------- konfetti ---------- */

.konfetti {
  position: fixed;
  top: -3vh;
  width: .45rem;
  height: .8rem;
  border-radius: 1px;
  pointer-events: none;
  z-index: 50;
  animation: spadanie linear forwards;
}
@keyframes spadanie {
  to { transform: translateY(108dvh) rotate(720deg); opacity: 0; }
}

/* ---------- dostępność ---------- */

:focus-visible { outline: 3px solid var(--wisnia); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .karta.wraca, .karta.wychodzi, .poswiata, .btn-kolo { transition: none; }
  .konfetti { display: none; }
}

@media (max-width: 22rem) {
  .przyciski { gap: 1.8rem; }
  .btn-kolo { width: 3.4rem; height: 3.4rem; }
}