/* Memowisko - motyw ciemny, telefon pierwszy: pola dotyku min 44 px, 100dvh, bezpieczne marginesy. */

:root {
  --tlo: #0f0f14;
  --panel: #1c1c26;
  --panel2: #262633;
  --tekst: #f4f4f5;
  --tekst2: #a1a1aa;
  --akcent: #c8f135;
  --akcent2: #ff4fa3;
  --zloto: #fbbf24;
  --promien: 16px;
  /* Wysokosc paska polaczenia; o tyle schodzi nizej powiadomienie. */
  --wysokosc-paska: 44px;
}

html, body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

body {
  overflow-x: hidden;
}

* {
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
}

p {
  margin: 0;
}

/* --- uklad ekranu ---------------------------------------------------------- */

.ekran {
  min-height: 100dvh;
  padding: calc(12px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ekran-start {
  justify-content: center;
}

.kolumna {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rzad {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rzad .btn {
  flex: 1 1 140px;
}

.pasek-gorny {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}

.pasek-tytul {
  font-size: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opis {
  color: var(--tekst2);
  font-size: 14px;
}

.stopka {
  margin-top: auto;
  color: var(--tekst2);
  font-size: 12px;
  text-align: center;
}

/* --- przyciski i pola ------------------------------------------------------ */

.btn {
  min-height: 48px;
  width: 100%;
  padding: 12px 16px;
  font: inherit;
  font-weight: 600;
  border: 0;
  border-radius: var(--promien);
  background: var(--panel2);
  color: var(--tekst);
  cursor: pointer;
}

.btn-glowny {
  background: var(--akcent);
  color: #10140a;
}

.btn-drugi {
  background: transparent;
  border: 1px solid #3f3f46;
  color: var(--tekst);
}

.btn-ostrzezenie {
  background: var(--akcent2);
  color: #1a0410;
}

.btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.btn-waski {
  width: auto;
  min-height: 44px;
  padding: 10px 14px;
  flex: 0 0 auto;
}

.link {
  background: none;
  border: 0;
  padding: 12px;
  min-height: 44px;
  font: inherit;
  color: var(--akcent);
  text-decoration: underline;
  cursor: pointer;
}

input, textarea {
  font: inherit;
  background: var(--panel2);
  color: var(--tekst);
  border: 1px solid #3f3f46;
  border-radius: 10px;
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
}

.pole {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--tekst2);
}

/* --- karty ----------------------------------------------------------------- */

.karta {
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel2);
  position: relative;
}

.karta img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.karta.zaznaczona {
  outline: 3px solid var(--akcent);
}

.karta.zlota {
  outline: 3px solid var(--zloto);
  box-shadow: 0 0 24px rgba(251, 191, 36, .5);
}

.karta-numer {
  position: absolute;
  top: 6px;
  left: 6px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .7);
  color: var(--tekst);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.karta-rewers,
.karta-pusta {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tekst2);
}

.karta-rewers {
  font-size: 40px;
  background: linear-gradient(135deg, var(--panel), var(--panel2));
}

.karta-pusta {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  padding: 8px;
  box-sizing: border-box;
}

.siatka-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.karuzela {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 16px;
}

.karuzela .karta {
  flex: 0 0 min(72vw, 320px);
  scroll-snap-align: center;
}

.miniatury {
  display: flex;
  gap: 6px;
}

.miniatury .karta {
  width: 48px;
  flex: 0 0 48px;
}

/* --- listy ----------------------------------------------------------------- */

.lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pozycja {
  background: var(--panel);
  border-radius: var(--promien);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pozycja-nazwa {
  font-size: 17px;
  font-weight: 600;
}

.lista-zasad {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  line-height: 1.4;
}

/* --- nakladka i arkusz ----------------------------------------------------- */

.nakladka {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .92);
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: calc(12px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  gap: 12px;
}

.nakladka-gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.nakladka-naglowek {
  font-weight: 600;
}

.nakladka-srodek {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nakladka-obraz {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.nakladka-podpis {
  text-align: center;
  color: var(--tekst2);
}

.nakladka-akcje {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.arkusz-tlo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 40;
  display: flex;
  align-items: flex-end;
}

.arkusz {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  background: var(--panel);
  border-radius: 20px 20px 0 0;
  max-height: 85dvh;
  overflow: auto;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.arkusz-gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.arkusz-tytul {
  font-size: 18px;
}

.arkusz-obraz {
  width: 100%;
  max-height: 45dvh;
  object-fit: contain;
  border-radius: 12px;
  background: var(--panel2);
}

/* --- paski ----------------------------------------------------------------- */

.pasek-fazy {
  border-radius: 12px;
  padding: 12px;
  font-size: 15px;
  background: var(--panel2);
  color: var(--tekst);
}

.pasek-akcja {
  background: var(--akcent);
  color: #10140a;
  font-weight: 600;
}

.pasek-czekanie {
  background: var(--panel);
  color: var(--tekst2);
}

.powiadomienie {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top) + var(--przesuniecie-gory, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 520px);
  box-sizing: border-box;
  background: var(--panel2);
  color: var(--tekst);
  border-radius: 12px;
  padding: 12px 16px;
  z-index: 60;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  animation: powiadomienie-wjazd .2s ease-out;
}

.powiadomienie-blad {
  background: var(--akcent2);
  color: #1a0410;
}

@keyframes powiadomienie-wjazd {
  from { transform: translate(-50%, -16px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

/* --- zakladki i awatary ---------------------------------------------------- */

.zakladki {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: var(--panel);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 30;
}

.zakladki button {
  flex: 1 1 0;
  min-height: 56px;
  background: none;
  border: 0;
  color: var(--tekst2);
  font: inherit;
  font-weight: 600;
  position: relative;
  cursor: pointer;
}

.zakladki button.wybrana {
  color: var(--akcent);
}

.kropka {
  position: absolute;
  top: 10px;
  right: 22%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--akcent2);
}

.awatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  position: relative;
  flex: 0 0 auto;
}

.awatar.maly {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.awatar-ja {
  box-shadow: 0 0 0 2px var(--akcent);
}

.awatar-znak {
  position: absolute;
  font-size: 12px;
  line-height: 1;
}

.awatar-bot {
  right: -4px;
  bottom: -4px;
}

.awatar-korona {
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}

.rzad-awatarow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- pola wyboru i licznik ------------------------------------------------- */

.pole-wyboru {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 15px;
}

.pole-wyboru input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  accent-color: var(--akcent);
}

.pole-wyboru .opis {
  margin-left: auto;
}

.licznik {
  display: flex;
  align-items: center;
  gap: 16px;
}

.licznik-wartosc {
  font-size: 22px;
  font-weight: 700;
  min-width: 2ch;
  text-align: center;
}

/* --- gra ------------------------------------------------------------------- */

/* Zakladki sa przyklejone na dole, wiec tresc musi miec miejsce pod soba. */
.ekran-gra {
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

.gra-gora {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gra-rzad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}

.gra-runda {
  font-size: 18px;
  font-weight: 700;
}

.gra-narrator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dymek {
  background: var(--panel2);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 16px;
  /* Podpowiedz moze byc jednym ciagiem 80 znakow - bez tego wyjezdza poza dymek. */
  overflow-wrap: anywhere;
}

.gra-tresc {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Karuzela ma wlasny margines wewnetrzny - bez tego karty zwezaja sie o padding ekranu. */
.gra-tresc .karuzela {
  margin: 0 -16px;
}

.miejsce {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.miejsce.przygaszone {
  opacity: 0.4;
}

.miejsce-karta {
  position: relative;
}

.miejsce-stopka {
  display: flex;
  align-items: center;
  gap: 6px;
}

.podpis-miejsca {
  font-size: 12px;
  color: var(--tekst2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.glosujacy {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 24px;
}

.plakietka {
  position: absolute;
  top: 6px;
  right: 6px;
  border-radius: 999px;
  padding: 2px 8px;
  background: var(--akcent);
  color: #10140a;
  font-size: 13px;
  font-weight: 700;
}

.lista-punktow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.lista-punktow li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--panel2);
}

.lista-punktow .punkty {
  margin-left: auto;
  font-weight: 700;
}

/* --- plansza --------------------------------------------------------------- */

.plansza {
  position: relative;
  width: 100%;
  aspect-ratio: 360 / 520;
}

.plansza svg {
  width: 100%;
  height: 100%;
  display: block;
}

.pionek {
  position: absolute;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8));
  transition: left .9s ease-in-out, top .9s ease-in-out;
}

.pionek .awatar {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

/* --- online ---------------------------------------------------------------- */

.pole-kodu {
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.kod-pokoju {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: .2em;
  text-align: center;
  /* Odstep po ostatniej literze zostaje od letter-spacing - bez tego kod ucieka w lewo. */
  text-indent: .2em;
}

/* Gracz w liscie idzie w rzedzie: awatar, imie, stan, przycisk gospodarza. */
.pozycja-gracz {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.kolumna-gracza {
  flex: 1 1 auto;
  min-width: 0;
}

.kolumna-gracza .pozycja-nazwa {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kropka-offline {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--tekst2);
  flex: 0 0 auto;
}

/* Pokoj online: pasek polaczenia stoi nad ekranem, nie na nim - inaczej zaslania naglowek gry. */
.pokoj {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.pokoj > .ekran {
  flex: 1 1 auto;
  min-height: 0;
}

.pasek-polaczenia {
  position: sticky;
  top: 0;
  z-index: 25;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  box-sizing: border-box;
  min-height: var(--wysokosc-paska);
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--panel2);
  color: var(--tekst2);
  font-size: 14px;
  text-align: center;
}

.rzad-przyciskow {
  display: flex;
  gap: 8px;
}

/* Zapas, gdy telefon nie ma ani okna udostepniania, ani schowka - link do przepisania. */
.pole-linku {
  font-size: 13px;
  text-align: center;
}