/* hopu - warstwa interfejsu telewizora.
 *
 * Zasady, ktore trzymaja to w ryzach:
 *  - wszystko skaluje sie od jednostek vmin/vh, bo ekrany sa od 13" do 75",
 *  - marginesy bezpieczne, bo telewizory obcinaja brzegi obrazu,
 *  - zero blur i backdrop-filter na duzych powierzchniach - przegladarki TV
 *    rysuja je programowo i gubia klatki,
 *  - fonty wylacznie systemowe, zero pobierania.
 *
 * Telewizor niczym nie steruje. Caly wybor dzieje sie w telefonie, wiec
 * na tym ekranie nie ma zadnego elementu, ktory trzeba by "kliknac pilotem".
 */

:root {
  color-scheme: dark;
  --ink: #eef4ff;
  --muted: #93a8c6;
  --bg: #060b16;
  --cyan: #4dd2ff;
  --amber: #ffcf3f;
  --pink: #ff5d8f;
  --green: #56e39f;
  --safe-x: clamp(20px, 3.4vw, 84px);
  --safe-y: clamp(16px, 3.4vh, 52px);
  --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --qr: min(46vh, 30vw);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font-family: var(--font);
  -webkit-user-select: none; user-select: none;
}

/* Kursor zostaje widoczny. Na telewizorze i tak go nie ma, a na laptopie
   ukrywanie go tylko przeszkadza - nie widac, gdzie sie celuje w przycisk
   dzwieku. Chowa sie wylacznie w trakcie gry, gdzie nie ma czego klikac. */
body[data-state="playing"] { cursor: none; }

#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.screen {
  position: fixed; inset: 0;
  display: none;
  padding: var(--safe-y) var(--safe-x);
  flex-direction: column;
}
.screen.is-active { display: flex; }
.screen-pass { pointer-events: none; background: none; }

.center {
  margin: auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2vmin;
}

.muted { color: var(--muted); }
.small { font-size: 2vmin; }

/* ------------------------------------------------------------------ */
/* Lobby                                                               */
/* ------------------------------------------------------------------ */

/* Przyciemnienie animacji lecacej pod spodem. Mocniejsze po lewej, gdzie
   jest tekst, lzejsze na srodku, zeby bylo widac, ze cos sie dzieje. */
#screen-lobby::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(6,11,22,0.97) 0%,
      rgba(6,11,22,0.93) 34%,
      rgba(6,11,22,0.58) 58%,
      rgba(6,11,22,0.86) 100%),
    linear-gradient(to top, rgba(6,11,22,0.85) 0%, rgba(6,11,22,0) 45%);
}

.lobby {
  position: relative;
  flex: 1; display: flex; align-items: center; gap: 4vmin; min-height: 0;
}

.lobby-left {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 2.2vmin;
}

/* --- marka --- */

.brand { display: flex; align-items: center; gap: 1.4vmin; }
.mark { width: 5.6vmin; height: 5.6vmin; color: var(--cyan); display: block; }
.mark svg { width: 100%; height: 100%; display: block; }
.wordmark {
  font-size: 5vmin; font-weight: 900; letter-spacing: -0.02em; color: var(--ink);
}
.brand-tag {
  margin-left: 1.2vmin; padding: 0.5vmin 1.6vmin;
  border-radius: 999px; background: rgba(77,210,255,0.14);
  color: var(--cyan); font-size: 1.9vmin; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* Dwa stany lewej kolumny: zapraszajacy przed polaczeniem i rzeczowy po nim.
   Po podlaczeniu telefonu instrukcja "jak zacząć" jest juz tylko szumem -
   liczy sie jedno zdanie: wybierz gre w telefonie. */
.hero-ready { display: none; }
#screen-lobby[data-phone="on"] .hero-intro { display: none; }
#screen-lobby[data-phone="on"] .hero-ready { display: block; }

.phone-hint {
  display: flex; align-items: center; gap: 1.8vmin;
  margin-top: 3vmin; font-size: 2.4vmin; color: var(--ink);
}
.phone-glyph {
  flex: 0 0 auto;
  width: 4.4vmin; height: 7.4vmin;
  border: 0.45vmin solid var(--cyan); border-radius: 1vmin;
  position: relative;
}
.phone-glyph::after {
  content: ""; position: absolute; left: 50%; bottom: 0.7vmin;
  width: 1.4vmin; height: 0.35vmin; margin-left: -0.7vmin;
  background: var(--cyan); border-radius: 999px;
}

/* --- naglowek --- */

.hero {
  margin: 0;
  font-size: 8.2vmin; line-height: 1.02; font-weight: 900; letter-spacing: -0.03em;
}
.hero em { font-style: normal; color: var(--amber); }
.hero-sub {
  margin: 0; font-size: 2.6vmin; color: var(--muted); max-width: 46vmin; line-height: 1.4;
}

/* --- kroki --- */

.steps {
  list-style: none; margin: 0.6vmin 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 1.2vmin;
}
.steps li {
  display: flex; align-items: center; gap: 1.6vmin;
  font-size: 2.4vmin; color: var(--ink);
}
.steps b {
  flex: 0 0 auto;
  width: 4.2vmin; height: 4.2vmin; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.1); color: var(--cyan);
  font-size: 2.1vmin; font-weight: 900;
}

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

.showcase { margin-top: 1.4vmin; }
.showcase-label {
  display: block; font-size: 1.8vmin; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); font-weight: 800; margin-bottom: 1.2vmin;
}
/* Kafle gier: te same grafiki, co na kaflach w aplikacji. Dziecko szuka
   obrazka, nie napisu - kolorowe kropki nic mu nie mowily. */
/* Cztery kafle w wierszu: przy siedmiu grach trzy rzedy po 26 vmin schodzily
   pod dolna krawedz, poza bezpieczny margines telewizora. Cztery po 24 vmin
   to okolo 101 vmin - miesci sie w lewej kolumnie obok kodu QR. */
.chips-games { display: flex; flex-wrap: wrap; gap: 1.6vmin; }

.game-tile {
  position: relative; overflow: hidden;
  width: 24vmin; height: 13.5vmin;
  border-radius: 2.2vmin;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}
.game-art {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Przyciemnienie siega wyzej niz sama nazwa, bo pod nia stoi jeszcze opis. */
.game-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,11,22,0.96) 34%, rgba(6,11,22,0.15) 80%);
}
.game-text {
  position: absolute; left: 1.4vmin; right: 1.4vmin; bottom: 1vmin;
  display: flex; flex-direction: column;
}
.game-name {
  font-size: 2.3vmin; font-weight: 900; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Krotki opis gry: najwyzej dwie linijki, dalej wielokropek. */
.game-desc {
  margin-top: 0.3vmin;
  font-size: 1.45vmin; line-height: 1.25; font-weight: 600;
  color: rgba(230,240,255,0.85);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.game-players {
  position: absolute; right: 1.2vmin; top: 1vmin;
  padding: 0.3vmin 1.1vmin; border-radius: 999px;
  background: var(--tile-color, var(--cyan)); color: #06121f;
  font-size: 1.6vmin; font-weight: 900;
}

/* --- panel z kodem QR --- */

.qr-panel {
  flex: 0 0 auto; width: calc(var(--qr) + 8vmin);
  display: flex; flex-direction: column; align-items: center;
  padding: 3vmin;
  border-radius: 3.4vmin;
  background: linear-gradient(160deg, rgba(77,210,255,0.16), rgba(255,207,63,0.1));
  border: 1px solid rgba(255,255,255,0.14);
}
.qr-head {
  font-size: 2.4vmin; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 2vmin; text-align: center;
}
.qr {
  width: var(--qr); height: var(--qr);
  background: #fff; border-radius: 2vmin; padding: 1.4vmin;
  display: flex; align-items: center; justify-content: center;
}
.qr img, .qr svg { width: 100%; height: 100%; display: block; }

.phone-status {
  margin-top: 2.4vmin; font-size: 2.2vmin; font-weight: 800; color: var(--muted);
  display: flex; align-items: center; gap: 1vmin;
}
.phone-status::before {
  content: ""; width: 1.6vmin; height: 1.6vmin; border-radius: 50%;
  background: var(--muted);
}
.phone-status.is-on { color: var(--green); }
.phone-status.is-on::before { background: var(--green); }

.players-label { margin-top: 1.4vmin; font-size: 1.9vmin; color: var(--muted); }
.chips { display: flex; gap: 1vmin; margin-top: 0.8vmin; }
.chip {
  font-weight: 900; font-size: 2vmin; padding: 0.5vmin 1.8vmin; border-radius: 999px;
  color: #06121f;
}
.chip-p1 { background: var(--cyan); }
.chip-p2 { background: var(--pink); }
.chip-p3 { background: var(--amber); }
.chip-p4 { background: var(--green); }

/* --- narzedzia (mysz na laptopie; z telefonu to samo idzie po sieci) --- */

.lobby-tools {
  position: absolute; top: var(--safe-y); right: var(--safe-x);
  display: flex; gap: 1vmin;
}
.tool {
  display: flex; align-items: center; gap: 0.9vmin;
  font-family: inherit; font-size: 2vmin; font-weight: 800; color: var(--ink);
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px; padding: 1vmin 2vmin; cursor: pointer;
}
.tool.is-off { color: var(--muted); }
.tool-icon { font-size: 2.4vmin; }

/* ------------------------------------------------------------------ */
/* Odliczanie                                                          */
/* ------------------------------------------------------------------ */

.ready-title { font-size: 8vmin; font-weight: 900; letter-spacing: -0.02em; }
.ready-how { font-size: 2.8vmin; color: var(--muted); max-width: 62vmin; }
.count {
  font-size: 22vmin; font-weight: 900; line-height: 1;
  color: var(--amber);
  animation: pop .35s ease-out;
}
/* Faza zbierania graczy: ta sama liczba, ale w innym kolorze i mniejsza,
   zeby nie mylila sie z odliczaniem. */
.count.is-gather { font-size: 14vmin; color: var(--cyan); animation: none; }
@keyframes pop { from { transform: scale(.6); opacity: .2; } to { transform: scale(1); opacity: 1; } }

/* ------------------------------------------------------------------ */
/* Wynik                                                               */
/* ------------------------------------------------------------------ */

/* Wlasne przyciemnienie: tabela wyniku ma byc czytelna niezaleznie od tego,
   co akurat rysuje plotno pod spodem. */
#screen-over::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%,
    rgba(6,11,22,0.92) 0%, rgba(6,11,22,0.86) 45%, rgba(6,11,22,0.72) 100%);
}
/* Tresc musi byc pozycjonowana, inaczej przyciemnienie z ::before
   namalowaloby sie NA niej - elementy pozycjonowane malowane sa pozniej. */
#screen-over .center { position: relative; }

.over-lines {
  display: flex; flex-direction: column; gap: 1.4vmin;
  margin: 3vmin 0; min-width: 74vmin;
}
/* Tabela wyniku ma sie czytac z drugiego konca pokoju - stad duze liczby. */
.over-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 4vmin;
  font-size: 4vmin; font-weight: 800; padding: 2.2vmin 3.4vmin;
  background: rgba(255,255,255,0.09); border-radius: 2.2vmin;
}
.over-line strong {
  font-weight: 900; color: var(--amber); font-size: 5.4vmin;
  font-variant-numeric: tabular-nums;
}
.over-lines:empty { display: none; }

/* Karty graczy w kolejnosci z ekranu gry. Odstepy marginesami, nie `gap`:
   starsze przegladarki telewizorow nie znaja `gap` we flexboksie i karty
   zlepialyby sie w jeden pas. */
.over-players {
  display: flex; justify-content: center; align-items: stretch;
  margin: 3.4vmin 0 2.4vmin;
}
.over-players:empty { display: none; }
.over-players.is-grid { flex-wrap: wrap; max-width: 100vmin; }
.over-players.is-column { flex-direction: column; align-items: center; }

.over-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  min-width: 30vmin; margin: 0 1.6vmin; padding: 2.2vmin 3.4vmin 2.4vmin;
  border-radius: 2.6vmin; border: 0.7vmin solid var(--pc, var(--cyan));
  background: rgba(255,255,255,0.08);
}
/* Cztery karty w dwoch rzedach musza zmiescic sie razem z przyciskami
   i podpisem - stad nizsze karty i mniejsze liczby niz w jednym rzedzie. */
.over-players.is-grid { margin: 2vmin 0 1.4vmin; }
.over-players.is-grid .over-card {
  margin: 0.8vmin 1.6vmin; min-width: 36vmin; padding: 1.2vmin 3vmin 1.4vmin;
}
.over-players.is-grid .over-status { margin-top: 0.4vmin; font-size: 3.6vmin; }
.over-players.is-grid .over-value { margin-top: 0; font-size: 4.6vmin; }
.over-players.is-grid .over-who { font-size: 2.8vmin; }
.over-players.is-column .over-card {
  flex-direction: row; justify-content: space-between;
  min-width: 70vmin; margin: 0.8vmin 0; padding: 1.6vmin 3.4vmin;
}
.over-players.is-column .over-card > * { margin: 0 1.4vmin; }

/* Zwyciezca: zlota poswiata i odrobine wiekszy - widac go z kanapy,
   zanim ktokolwiek przeczyta napis. */
.over-card.is-win {
  background: rgba(255,207,63,0.14);
  box-shadow: 0 0 0 0.5vmin var(--amber), 0 0 6vmin rgba(255,207,63,0.35);
  transform: scale(1.06);
}
.over-card.is-lose { opacity: 0.8; }

.over-who { display: flex; align-items: center; font-size: 3.2vmin; font-weight: 800; }
.over-tag {
  background: var(--pc, var(--cyan)); color: #06121f; font-weight: 900;
  padding: 0.3vmin 1.3vmin; border-radius: 1.2vmin; margin-right: 1.2vmin;
}
.over-status { margin-top: 1vmin; font-size: 4.6vmin; font-weight: 900; color: var(--ink); }
.over-card.is-win .over-status { color: var(--amber); }
.over-card.is-lose .over-status { color: var(--muted); }
.over-value {
  margin-top: 0.4vmin; font-size: 6vmin; font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.over-detail { font-size: 2.4vmin; color: var(--muted); }
.over-players.is-column .over-status,
.over-players.is-column .over-value { margin-top: 0; }

.over-again {
  min-height: 4.4vmin; margin-bottom: 1.4vmin;
  font-size: 3.2vmin; font-weight: 900; color: var(--cyan);
}

.over-buttons { display: flex; gap: 2.6vmin; margin-top: 1vmin; }
.big-btn {
  font-family: inherit; font-size: 3.2vmin; font-weight: 900; color: #06121f;
  background: var(--cyan); border: none; border-radius: 2.2vmin;
  padding: 2.2vmin 5.5vmin; cursor: pointer;
}
.big-btn-ghost { background: rgba(255,255,255,.16); color: var(--ink); }

.over-hint {
  margin-top: 2vmin; font-size: 2.4vmin; color: var(--muted);
  display: flex; align-items: center; gap: 1.4vmin;
}

/* ------------------------------------------------------------------ */
/* Ostrzezenia i diagnostyka                                           */
/* ------------------------------------------------------------------ */

.warn {
  position: fixed; left: 50%; bottom: 6vmin; transform: translateX(-50%);
  display: none; flex-direction: column; align-items: center; gap: .6vmin;
  background: rgba(255,93,143,.94); color: #17040c;
  padding: 1.6vmin 3.4vmin; border-radius: 2vmin; z-index: 50;
}
.warn.is-visible { display: flex; }
.warn strong { font-size: 2.8vmin; }
.warn span { font-size: 2vmin; }

.diag {
  position: fixed; right: var(--safe-x); bottom: var(--safe-y);
  display: none; z-index: 60;
  background: rgba(0,0,0,.82); border-radius: 1.4vmin; padding: 1.4vmin 2.2vmin;
  font-variant-numeric: tabular-nums;
}
.diag.is-visible { display: block; }
.diag-title {
  font-size: 1.6vmin; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 1vmin;
}
/* Kazdy odczyt to osobna kolumna: podpis nad wartoscia. Wczesniej podpisy
   i liczby lezaly w jednym ciagu tekstu i sklejaly sie w nieczytelna wstege. */
.diag-row { display: flex; gap: 2.6vmin; align-items: flex-end; }
.diag-cell {
  display: flex; flex-direction: column; gap: .3vmin;
  /* Stala szerokosc: bez niej kafelek zmienia rozmiar razem z trescia
     ("25 ms" kontra "brak ruchu") i cale okienko drga. */
  width: 11vmin; flex: 0 0 auto;
}
.diag-cell i {
  font-style: normal; font-size: 1.4vmin; color: var(--muted);
  letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
}
.diag-cell b {
  font-size: 2.2vmin; font-weight: 800; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.diag-cell.is-warn b { color: var(--pink); }
.diag-cell.is-idle b { color: var(--muted); }

/* ------------------------------------------------------------------ */
/* Ekran laczenia                                                      */
/* ------------------------------------------------------------------ */

.logo-big { font-size: 12vmin; font-weight: 900; color: var(--cyan); letter-spacing: -0.02em; }
.spinner {
  width: 6vmin; height: 6vmin; border-radius: 50%;
  border: .8vmin solid rgba(255,255,255,.15);
  border-top-color: var(--cyan);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ */
/* Waskie okno (podglad na laptopie w pionie)                          */
/* ------------------------------------------------------------------ */

@media (max-aspect-ratio: 1/1) {
  :root { --qr: min(34vh, 60vw); }
  .lobby { flex-direction: column; align-items: stretch; overflow-y: auto; }
  .qr-panel { width: 100%; }
  .hero { font-size: 7vmin; }
}