/* Studio telewizyjne: granat, czerń i złoto-żółty — te same barwy, co matryca
   punktów na tablicy w scenie 3D. HUD trzyma się KRAWĘDZI ekranu: środek
   należy do tablicy i standu z przyciskiem, bo to jedyne miejsce, gdzie widać,
   co się w grze dzieje. Wszystko, co tu leży na środku (wielki przycisk, pole
   odpowiedzi), pokazuje się tylko wtedy, gdy gracz naprawdę ma coś zrobić. */

:root {
  --granat: #0d1440;
  --granat-ciemny: #070b24;
  --granat-jasny: #172363;
  --zloto: #f2c14e;
  --zolty: #ffdb5c;
  --papier: #f1ead9;
  --przygaszony: #8d97bd;
  --ramka: #263166;
  /* Barwy rodzin wstawia main.js z BARWY w shared.js — tu tylko zapasowe. */
  --druzyna-a: #b3402f;
  --druzyna-b: #2f5fb3;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; height: 100dvh; overflow: hidden;
  background: var(--granat-ciemny);
  color: var(--papier);
  font-family: ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  user-select: none;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

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

.schowane { display: none !important; }

/* ================= nakładki ================= */

.nakladka {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% 35%, rgba(13,20,64,.82), rgba(4,6,16,.96));
  backdrop-filter: blur(4px);
}

.karta {
  width: min(560px, 94vw);
  max-height: 94vh; overflow-y: auto;
  padding: 28px 30px;
  background: linear-gradient(180deg, #111a4e, #0a0f31);
  border: 1px solid var(--ramka);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
  text-align: center;
}
.karta.szeroka { width: min(760px, 96vw); }

/* Tytuł „jak z tablicy": żółte litery na granacie, rozstrzelone. */
h1 {
  margin: 0 0 6px;
  font-size: clamp(34px, 9vw, 58px);
  letter-spacing: clamp(4px, 2vw, 12px);
  font-weight: 900;
  color: var(--zolty);
  text-shadow: 0 0 18px rgba(255,219,92,.45), 0 3px 0 #6c4f10;
}
h2 { margin: 0 0 6px; font-size: 24px; letter-spacing: 4px; color: var(--zolty); }

.podtytul { margin: 0 0 20px; color: var(--przygaszony); font-size: 14px; letter-spacing: .5px; }

.pole { display: flex; gap: 10px; }
.pole.srodek { justify-content: center; margin-top: 18px; flex-wrap: wrap; }

input, select {
  font-family: inherit;
  background: #070c26; color: var(--papier);
  border: 1px solid var(--ramka); border-radius: 10px; outline: none;
}
input:focus, select:focus { border-color: var(--zloto); }

#nick, #nowy-pokoj { flex: 1; padding: 13px 15px; font-size: 16px; min-width: 0; }

#graj, #start {
  padding: 13px 28px; font-size: 15px; font-weight: 800; letter-spacing: 2px;
  background: linear-gradient(180deg, var(--zolty), #c48f1c);
  color: #221806; border: 0; border-radius: 10px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(242,193,78,.28);
}
#graj:hover, #start:not(:disabled):hover { filter: brightness(1.08); }
#start:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }

.drugi {
  padding: 11px 16px; font-size: 11px; font-weight: 700; letter-spacing: 2px;
  font-family: inherit;
  background: rgba(255,255,255,.06); color: #cbd3ee;
  border: 1px solid var(--ramka); border-radius: 10px; cursor: pointer;
}
.drugi:hover { border-color: var(--zloto); color: var(--papier); }

#strony { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.strona {
  padding: 11px 4px; font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  font-family: inherit;
  background: #070c26; color: var(--przygaszony);
  border: 1px solid var(--ramka); border-radius: 10px; cursor: pointer;
}
.strona[data-druzyna="A"] { color: var(--druzyna-a); }
.strona[data-druzyna="B"] { color: var(--druzyna-b); }
.strona.wybrana { color: #0a0f31; border-color: transparent; background: linear-gradient(180deg, #cfd6f0, #9aa4c9); }
.strona.wybrana[data-druzyna="A"] { background: var(--druzyna-a); color: #ffeae5; }
.strona.wybrana[data-druzyna="B"] { background: var(--druzyna-b); color: #e9f0ff; }

#pokoje { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ramka); text-align: left; }
#pokoje-naglowek {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;
  font-size: 11px; letter-spacing: 2px; font-weight: 800; color: var(--przygaszony);
}
#pokoje-naglowek em { font-style: normal; letter-spacing: .5px; color: var(--zloto); }
#pokoje-lista { max-height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
#pokoje-lista .pusto { padding: 10px; font-size: 12px; color: var(--przygaszony); text-align: center; }
.pokoj {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  width: 100%; padding: 10px 12px; text-align: left; font-size: 13px; font-family: inherit;
  background: #070c26; color: var(--papier);
  border: 1px solid var(--ramka); border-radius: 9px; cursor: pointer;
}
.pokoj:hover { border-color: #4c5da8; }
.pokoj.wybrany { border-color: var(--zloto); background: rgba(242,193,78,.1); }
.pokoj .p-faza, .pokoj .p-graczy { font-size: 11px; letter-spacing: 1px; color: var(--przygaszony); }

#lobby-blad { min-height: 0; font-size: 12.5px; color: #ff9b8a; }
#lobby-blad:not(:empty) { margin-top: 10px; }

.zasady {
  margin: 18px 0 12px; padding: 14px 0; font-size: 13px; line-height: 1.9;
  color: #aeb7d8; border-top: 1px solid var(--ramka); border-bottom: 1px solid var(--ramka);
}
.zasady b { color: var(--zolty); }

#wroc { display: block; width: 100%; margin-top: 14px; }

/* ================= lobby: skład rodzin ================= */

#rodziny { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }

.rodzina {
  padding: 14px; text-align: left;
  background: #070c26; border: 1px solid var(--ramka); border-top-width: 3px; border-radius: 12px;
}
.rodzina.d-a { border-top-color: var(--druzyna-a); }
.rodzina.d-b { border-top-color: var(--druzyna-b); }

.rodzina-nazwa {
  width: 100%; padding: 9px 11px; margin-bottom: 10px;
  font-size: 16px; font-weight: 800; letter-spacing: 2px; text-align: center;
  color: var(--zolty); background: #050818;
}

.sklad { list-style: none; margin: 0 0 10px; padding: 0; min-height: 96px; font-size: 13px; }
.sklad li { padding: 5px 8px; border-radius: 7px; display: flex; gap: 6px; align-items: baseline; }
.sklad li + li { margin-top: 3px; }
.sklad li.ja { background: rgba(242,193,78,.14); color: var(--zolty); font-weight: 700; }
.sklad li em { font-style: normal; font-size: 10px; letter-spacing: 1px; color: var(--przygaszony); }
.sklad .pusto { color: var(--przygaszony); font-size: 12px; padding: 5px 8px; }

.boty { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 1.5px; color: var(--przygaszony); }
.boty b { color: var(--papier); min-width: 14px; text-align: center; font-size: 14px; }
.boty .bot {
  width: 30px; height: 30px; font-size: 17px; line-height: 1; font-family: inherit;
  background: rgba(255,255,255,.06); color: var(--papier);
  border: 1px solid var(--ramka); border-radius: 8px; cursor: pointer;
}
.boty .bot:hover { border-color: var(--zloto); }

.dolacz-do {
  width: 100%; margin-top: 10px; padding: 9px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  font-family: inherit; background: rgba(255,255,255,.05); color: #cbd3ee;
  border: 1px solid var(--ramka); border-radius: 9px; cursor: pointer;
}
.dolacz-do:hover { border-color: var(--zloto); }
.dolacz-do.tu { background: rgba(242,193,78,.16); border-color: var(--zloto); color: var(--zolty); }

#widzowie { margin-top: 12px; font-size: 12px; color: var(--przygaszony); min-height: 16px; }

/* ================= HUD ================= */

#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#hud button, #hud select, #hud input { pointer-events: auto; }

#gora {
  position: absolute; top: max(10px, env(safe-area-inset-top)); left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: clamp(14px, 5vw, 60px);
  padding: 0 12px;
  text-shadow: 0 2px 8px rgba(0,0,0,.95);
}
.wynik { display: flex; align-items: baseline; gap: 10px; font-size: 12px; letter-spacing: 2px; font-weight: 800; }
.wynik b { font-size: clamp(24px, 5vw, 34px); letter-spacing: 0; }
.d-a { color: var(--druzyna-a); }
.d-b { color: var(--druzyna-b); }
/* Barwy rodzin są ciemne (takie mają materiały w scenie) — na czarnym tle
   ratuje je obwódka, inaczej granatowa „B" znika w granatowym studiu. */
.wynik.d-a b, .wynik.d-b b { -webkit-text-stroke: .5px rgba(255,255,255,.55); }

#srodek-gora { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 96px; }
#runda-hud { font-size: 11px; letter-spacing: 3px; font-weight: 800; color: var(--zolty); }
#mnoznik-hud { font-size: 12px; letter-spacing: 1px; color: var(--przygaszony); }

#pytanie-hud {
  position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 46px); left: 50%;
  transform: translateX(-50%);
  width: min(660px, 92vw); padding: 9px 16px;
  display: flex; align-items: baseline; gap: 10px; justify-content: center;
  font-size: clamp(13px, 2.2vw, 16px); line-height: 1.35; text-align: center;
  background: rgba(7,11,36,.82); border: 1px solid var(--ramka); border-radius: 10px;
  box-shadow: 0 8px 26px rgba(0,0,0,.5);
}
#pytanie-ile { font-style: normal; font-size: 11px; letter-spacing: 1px; color: var(--zloto); white-space: nowrap; }

#odliczanie {
  position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 46px);
  right: max(12px, env(safe-area-inset-right));
  min-width: 56px; padding: 6px 12px;
  font-size: 26px; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums;
  color: var(--zolty); background: rgba(7,11,36,.8);
  border: 1px solid var(--ramka); border-radius: 10px;
  text-shadow: 0 0 14px rgba(255,219,92,.5);
}
#odliczanie.malo { color: #ff7a5c; border-color: #7a2a1c; font-size: 44px; animation: migot .5s steps(2, end) infinite; }
@keyframes migot { 50% { opacity: .35; } }

#widz-hud {
  position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 46px); left: max(12px, env(safe-area-inset-left));
  padding: 6px 12px; font-size: 11px; letter-spacing: 1.5px; font-weight: 700;
  color: #0a0f31; background: var(--zloto); border-radius: 8px;
}

#wskazowka {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 220px);
  padding: 8px 16px; font-size: 13px; text-align: center;
  color: var(--zolty); background: rgba(7,11,36,.86);
  border: 1px dashed var(--zloto); border-radius: 10px;
}

/* --- dymek prowadzącego: musi być czytelny NA scenie 3D --- */
#dymek {
  position: absolute; left: max(12px, env(safe-area-inset-left));
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 150px);
  width: min(400px, 46vw); padding: 11px 14px;
  background: rgba(6,9,28,.92); border: 1px solid var(--zloto); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.65);
  font-size: 14px; line-height: 1.45;
}
/* Dziobek dymka — prowadzący stoi w głębi po prawej, więc wskazuje w prawo. */
#dymek::after {
  content: ''; position: absolute; right: -9px; bottom: 16px;
  border: 8px solid transparent; border-left-color: var(--zloto); border-right: 0;
}
#dymek b { display: block; margin-bottom: 3px; font-size: 10px; letter-spacing: 2px; color: var(--zloto); }

/* --- wielki przycisk standu --- */
#przycisk-wielki {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 78px);
  width: clamp(120px, 26vw, 170px); height: clamp(120px, 26vw, 170px);
  border-radius: 50%; cursor: pointer; font-family: inherit;
  font-size: 15px; font-weight: 900; letter-spacing: 2px; color: #2a0d06;
  background: radial-gradient(circle at 38% 32%, #ff8a6d, #d43a1b 62%, #8d2110);
  border: 5px solid #ffd9a8;
  box-shadow: 0 0 0 6px rgba(0,0,0,.45), 0 14px 34px rgba(212,58,27,.5);
  animation: puls 1.1s ease-in-out infinite;
}
#przycisk-wielki:active { transform: translateX(-50%) scale(.94); animation: none; }
@keyframes puls {
  0%, 100% { box-shadow: 0 0 0 6px rgba(0,0,0,.45), 0 14px 34px rgba(212,58,27,.45); }
  50% { box-shadow: 0 0 0 6px rgba(0,0,0,.45), 0 14px 52px rgba(255,138,109,.95); }
}

/* --- pole odpowiedzi --- */
#odpowiedz-wiersz {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 78px);
  width: min(560px, 94vw); display: flex; align-items: center; gap: 8px;
  padding: 10px; background: rgba(6,9,28,.92);
  border: 1px solid var(--zloto); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.6);
}
#odpowiedz-pole { flex: 1; min-width: 0; padding: 14px 14px; font-size: 17px; }
#odpowiedz-licznik { font-size: 11px; color: var(--przygaszony); font-variant-numeric: tabular-nums; }
#odpowiedz-licznik.blisko { color: #ff9b8a; }
#odpowiedz-wyslij {
  padding: 14px 18px; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; font-family: inherit;
  background: linear-gradient(180deg, var(--zolty), #c48f1c); color: #221806;
  border: 0; border-radius: 10px; cursor: pointer;
}

/* --- panel finału --- */
#final-hud {
  position: absolute; right: max(12px, env(safe-area-inset-right));
  top: calc(max(10px, env(safe-area-inset-top)) + 46px);
  width: min(330px, 44vw); padding: 12px;
  background: rgba(6,9,28,.9); border: 1px solid var(--ramka); border-radius: 12px;
  font-size: 12.5px;
}
#final-naglowek { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 2px; font-weight: 800; color: var(--zolty); margin-bottom: 8px; }
#final-naglowek em { font-style: normal; color: var(--przygaszony); }
#final-lista { list-style: none; margin: 0; padding: 0; }
#final-lista li { padding: 6px 8px; border-radius: 7px; line-height: 1.3; }
#final-lista li + li { margin-top: 3px; }
#final-lista li.teraz { background: rgba(242,193,78,.16); box-shadow: inset 0 0 0 1px var(--zloto); }
#final-lista .f-pytanie { display: block; color: #cbd3ee; font-size: 11.5px; }
#final-lista .f-odp { display: flex; gap: 8px; margin-top: 2px; font-size: 11px; color: var(--zolty); }
#final-lista .f-odp span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#final-lista .f-odp i { font-style: normal; color: var(--papier); }
#final-stopka { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ramka); font-size: 11px; letter-spacing: 1px; color: var(--przygaszony); text-align: right; }
#final-stopka b { font-size: 20px; color: var(--zolty); }

/* --- czat rodziny --- */
#czat {
  position: absolute; left: max(12px, env(safe-area-inset-left));
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 62px);
  width: min(320px, 44vw);
}
#czat-lista { display: flex; flex-direction: column; gap: 3px; max-height: 110px; overflow: hidden; justify-content: flex-end; }
#czat-lista div {
  font-size: 12.5px; line-height: 1.35; padding: 3px 8px; border-radius: 7px;
  background: rgba(6,9,28,.72); text-shadow: 0 1px 3px #000;
  animation: wjazd .25s ease-out;
}
#czat-lista b { color: var(--zolty); font-weight: 700; }
#czat-lista .d-a b { color: var(--druzyna-a); -webkit-text-stroke: .4px rgba(255,255,255,.6); }
#czat-lista .d-b b { color: var(--druzyna-b); -webkit-text-stroke: .4px rgba(255,255,255,.6); }
#czat-wiersz {
  display: flex; align-items: center; gap: 6px; margin-top: 5px; padding: 5px 8px;
  background: rgba(6,9,28,.94); border: 1px solid var(--zloto); border-radius: 9px;
}
#czat-znak { color: var(--zloto); }
#czat-pole { flex: 1; min-width: 0; padding: 7px 8px; font-size: 13px; border: 0; background: transparent; }

/* --- guziki w rogu --- */
#przyciski {
  position: absolute; right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  display: flex; gap: 7px; align-items: center;
}
#przyciski button {
  width: 44px; height: 44px; font-size: 18px; line-height: 1; font-family: inherit;
  background: rgba(6,9,28,.86); color: var(--papier);
  border: 1px solid var(--ramka); border-radius: 11px; cursor: pointer;
}
#przyciski button:hover { border-color: var(--zloto); }
#przyciski button.wylaczone { opacity: .38; }
#ujecie { padding: 10px 8px; font-size: 12px; max-width: 140px; }

/* --- powiadomienia --- */
#toasty {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(max(10px, env(safe-area-inset-top)) + 96px);
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  width: min(520px, 92vw);
}
.toast {
  padding: 9px 16px; font-size: 13px; text-align: center;
  background: rgba(6,9,28,.94); border: 1px solid var(--ramka); border-left: 3px solid var(--zloto);
  border-radius: 9px; box-shadow: 0 8px 24px rgba(0,0,0,.6);
  animation: wjazd .28s ease-out;
}
.toast.zly { border-left-color: #ff7a5c; color: #ffc7bb; }
.toast.znika { opacity: 0; transform: translateY(-8px); transition: opacity .5s, transform .5s; }
@keyframes wjazd { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ================= telefon ================= */

@media (max-width: 720px) {
  .karta { padding: 20px 16px; }
  #rodziny { grid-template-columns: 1fr; }
  #dymek { width: calc(100vw - 24px); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 62px); }
  #dymek::after { display: none; }
  #czat { width: calc(100vw - 24px); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 62px); }
  #czat-lista { max-height: 66px; }
  /* Dymek i czat dzielą ten sam róg — czat wchodzi na wierzch dopiero, gdy
     ktoś naprawdę pisze, bo wtedy dymek i tak przeczytał już lektor. */
  #czat:has(#czat-wiersz:not(.schowane)) { z-index: 2; }
  #final-hud { width: min(300px, 62vw); font-size: 11.5px; }
  #wskazowka { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 250px); width: min(92vw, 420px); }
  #odpowiedz-wiersz { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 62px); }
  #przycisk-wielki { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 62px); }
  #przyciski button { width: 48px; height: 48px; }
}

/* Klawiatura ekranowa zjada dół — gdy gracz pisze, guziki w rogu mogą zniknąć,
   ale pole odpowiedzi musi zostać widoczne. */
@media (max-height: 520px) {
  #czat-lista { display: none; }
  #dymek { display: none !important; }
}