/* Klasowa Arena — oprawa na rzutnik: ciemne tło, duży kontrast, duże litery. */
:root {
  --tlo: #0d1533;
  --tlo-2: #16224d;
  --karta: #1d2b5e;
  --tekst: #f4f6ff;
  --tekst-2: #b8c2e8;
  --akcent: #ffc83d;
  --akcent-tekst: #1a1400;
  --zycie: #ff5470;
  --blad: #ff8a8a;
  --obwodka: #3a4a8a;
  --fokus: #7fd4ff;
  --dobrze: #3ddc84;
  --dobrze-tlo: #123d2c;
  --zle: #ff5470;
  --zle-tlo: #4a1426;
  --hover: #26387a;
  --serce-puste: #4a5688;
  --placeholder: #7a86b8;
  --akcent-cien: #b07c00;
  --akcent-hover: #ffd666;
  --akcent-poswiata: rgba(255, 200, 61, .35);
  --nakladka: rgba(5, 10, 30, .78);
  --promien: 14px;
  --czcionka: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: clamp(15px, min(1.25vw + 6px, 2.2vh + 4px), 30px);
}

/* Motyw jasny — do jasnych sal, gdzie ciemne tło z rzutnika wychodzi szaro. */
:root[data-motyw="jasny"] {
  --tlo: #eef1fa;
  --tlo-2: #ffffff;
  --karta: #ffffff;
  --tekst: #10183a;
  --tekst-2: #3f4b75;
  --akcent: #9a6500;
  --akcent-tekst: #ffffff;
  --zycie: #d0213f;
  --blad: #c0182f;
  --obwodka: #b9c2e0;
  --fokus: #0a6fc2;
  --dobrze: #0a7a3f;
  --dobrze-tlo: #dcf4e6;
  --zle: #d0213f;
  --zle-tlo: #fde1e6;
  --hover: #e3e8f7;
  --serce-puste: #c9cfe4;
  --placeholder: #8a93b5;
  --akcent-cien: transparent;
  --akcent-hover: #7f5300;
  --akcent-poswiata: rgba(154, 101, 0, .25);
  --nakladka: rgba(16, 24, 58, .55);
}
:root[data-motyw="jasny"] .odpowiedz.poprawna .litera,
:root[data-motyw="jasny"] .odpowiedz.bledna .litera,
:root[data-motyw="jasny"] .przycisk.dobrze,
:root[data-motyw="jasny"] .przycisk.zle { color: #ffffff; }

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: radial-gradient(ellipse at 50% 0%, var(--tlo-2), var(--tlo) 70%);
  background-color: var(--tlo);
  color: var(--tekst);
  font-family: var(--czcionka);
  line-height: 1.35;
}

#app {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.ekran {
  width: min(100%, 60rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.naglowek h1 { margin: 0; font-size: 2.4rem; letter-spacing: .02em; }
.podtytul { margin: .4rem 0 0; color: var(--tekst-2); font-size: 1.1rem; }

/* Logo */
.logo { display: flex; flex-direction: column; line-height: .95; font-weight: 900; text-transform: uppercase; }
.logo-gora { font-size: 2.2rem; letter-spacing: .35em; color: var(--tekst-2); padding-left: .35em; }
.logo-dol {
  font-size: 5.5rem; letter-spacing: .06em; color: var(--akcent);
  text-shadow: 0 .06em 0 var(--akcent-cien), 0 .2em .5em rgba(0, 0, 0, .45);
}

/* Przyciski */
.nawigacja { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: .5rem; }

.przycisk {
  font: inherit; font-size: 1.15rem; font-weight: 700;
  min-height: 3rem; padding: .6rem 1.6rem;
  border-radius: var(--promien); border: 2px solid var(--obwodka);
  background: var(--karta); color: var(--tekst);
  cursor: pointer; transition: transform .1s, background .15s;
}
.przycisk:hover { background: var(--hover); }
.przycisk:active { transform: translateY(2px); }
.przycisk:disabled { opacity: .45; cursor: not-allowed; }
.przycisk.glowny { background: var(--akcent); color: var(--akcent-tekst); border-color: var(--akcent); }
.przycisk.glowny:hover { background: var(--akcent-hover); }
.przycisk:focus-visible, input:focus-visible { outline: 4px solid var(--fokus); outline-offset: 3px; }


.info { margin: 0; color: var(--tekst-2); }
.info.blad { color: var(--blad); }

/* Gracze */
.siatka-graczy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.5rem; width: 100%; }
.pole-gracza { display: flex; align-items: center; gap: .6rem; }
.pole-gracza input {
  flex: 1; min-width: 0; font: inherit; font-size: 1.1rem;
  padding: .5rem .8rem; border-radius: 10px;
  border: 2px solid var(--obwodka); background: var(--tlo); color: var(--tekst);
}
.pole-gracza input::placeholder { color: var(--placeholder); }

.numer {
  display: inline-grid; place-items: center; flex: none;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--akcent); color: var(--akcent-tekst); font-weight: 800;
}

.pasek-graczy {
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: grid; grid-template-columns: repeat(var(--kolumny, 5), minmax(0, 1fr)); gap: .75rem;
}
.gracz {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .7rem .4rem; border-radius: var(--promien);
  background: var(--karta); border: 2px solid var(--obwodka);
}
.gracz .imie { font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gracz .zycia { color: var(--zycie); letter-spacing: .15em; font-size: 1.2rem; }

/* ——— Ekran gry ——— */
#app[data-ekran="gra"] { padding: 1rem; }
.ekran-gry { width: min(100%, 76rem); gap: .8rem; }
.naglowek-gry { display: flex; align-items: baseline; justify-content: center; gap: 1rem; }
.naglowek-gry h1 { margin: 0; font-size: 1.5rem; color: var(--akcent); text-transform: uppercase; letter-spacing: .08em; }
.naglowek-gry .podtytul { margin-top: .2rem; }

.ekran-gry .pasek-graczy { gap: .5rem; }
.gracz { padding: 0; }
.gracz .kafelek {
  width: 100%; height: 100%;
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: .3rem;
  padding: .35rem .25rem; font: inherit; color: inherit;
  background: none; border: 0; border-radius: var(--promien);
}
.ekran-gry .numer { width: 1.4rem; height: 1.4rem; font-size: .75rem; }
.ekran-gry .pasek-graczy:not(.finalowy) .imie { font-size: .9rem; }
.ekran-gry .gracz .zycia { font-size: .85rem; }
.pasek-graczy.finalowy .kafelek { flex-direction: column; gap: .15rem; padding: .4rem; }
.ekran-gry .gracz .imie { min-width: 0; flex: 0 1 auto; }
.ekran-gry .gracz .zycia { flex: none; letter-spacing: 0; }
.ekran-gry .gracz .status { flex: none; white-space: nowrap; }
.gracz.aktualny { border-color: var(--akcent); box-shadow: 0 0 0 3px var(--akcent), 0 0 1.5rem var(--akcent-poswiata); }
.gracz.odpadl { opacity: .38; }
.gracz .status { color: var(--tekst-2); font-size: .85rem; }
.gracz.do-wskazania { border-color: var(--fokus); border-style: dashed; }
.gracz.do-wskazania .kafelek { cursor: pointer; }
.gracz.do-wskazania:hover { background: var(--hover); }
.serce.puste { color: var(--serce-puste); }

.pasek-graczy.finalowy { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 48rem; }
.pasek-graczy.finalowy .imie { font-size: 1.4rem; }
.pasek-graczy.finalowy .zycia { font-size: 1.5rem; }

.karta-pytania {
  width: 100%; padding: 1rem 1.4rem;
  border-radius: calc(var(--promien) * 1.5);
  background: var(--karta); border: 2px solid var(--obwodka);
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.kto-odpowiada { margin: 0; color: var(--tekst-2); }
.kto-odpowiada strong { color: var(--akcent); font-size: 1.2rem; }
.polecenie { margin: 0; color: var(--tekst-2); font-size: 1.05rem; }
.tresc { margin: 0; font-size: 1.9rem; font-weight: 700; line-height: 1.25; }

.odpowiedzi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; width: 100%; }
.odpowiedz {
  display: flex; align-items: center; gap: .8rem; text-align: left;
  font: inherit; font-size: 1.2rem; font-weight: 600;
  min-height: 2.9rem; padding: .35rem .9rem;
  border-radius: var(--promien); border: 2px solid var(--obwodka);
  background: var(--tlo); color: var(--tekst); cursor: pointer;
}
.odpowiedz:hover:not(:disabled) { border-color: var(--akcent); }
.odpowiedz:disabled { cursor: default; opacity: .55; }
.odpowiedz .litera {
  flex: none; display: inline-grid; place-items: center;
  width: 2.2rem; height: 2.2rem; border-radius: 8px;
  background: var(--obwodka); font-weight: 800;
}
.odpowiedz.poprawna { opacity: 1; border-color: var(--dobrze); background: var(--dobrze-tlo); }
.odpowiedz.poprawna .litera { background: var(--dobrze); color: #04210f; }
.odpowiedz.bledna { opacity: 1; border-color: var(--zle); background: var(--zle-tlo); }
.odpowiedz.bledna .litera { background: var(--zle); color: #2a0008; }

.odpowiedzi.prawda-falsz { max-width: 36rem; }
.odpowiedzi.prawda-falsz .odpowiedz { justify-content: center; font-size: 1.4rem; }
.wyjasnienie { margin: 0; color: var(--tekst-2); font-size: 1.05rem; }

.wzor { width: 100%; padding: .8rem 1rem; border-radius: var(--promien); background: var(--dobrze-tlo); border: 2px solid var(--dobrze); }
.wzor p { margin: 0; font-size: 1.5rem; font-weight: 700; }
.wzor .akceptowane { font-size: 1rem; font-weight: 400; color: var(--tekst-2); margin-top: .3rem; }

.ocena { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.przycisk.dobrze { background: var(--dobrze); border-color: var(--dobrze); color: #04210f; }
.przycisk.zle { background: var(--zle); border-color: var(--zle); color: #2a0008; }

.wynik { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.5rem; }
.komunikat { margin: 0; font-size: 1.35rem; font-weight: 800; }
.komunikat.dobrze { color: var(--dobrze); }
.komunikat.zle { color: var(--zle); }
.komunikat.wskazanie { color: var(--fokus); font-size: 1.3rem; }

.przerwa h2 { margin: 0; font-size: 2rem; }
.finalisci { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; font-size: 1.6rem; font-weight: 800; color: var(--akcent); }

.narzedzia { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; opacity: .75; }
.narzedzia:hover, .narzedzia:focus-within { opacity: 1; }
.przycisk.maly { font-size: .85rem; min-height: 2.2rem; padding: .3rem .9rem; }

.ekran-zwyciezca { gap: 1rem; }
.zwyciezca-imie {
  margin: 0; font-size: 5rem; font-weight: 900; color: var(--akcent);
  text-shadow: 0 .06em 0 var(--akcent-cien), 0 .2em .6em rgba(0, 0, 0, .45);
  overflow-wrap: anywhere;
}

.zasady { text-align: left; font-size: 1.15rem; display: grid; gap: .6rem; max-width: 48rem; }

/* ——— Ustawienia (ekran graczy) ——— */
.ekran-graczy { gap: .8rem; }
.ekran-graczy .siatka-graczy { gap: .55rem 1.5rem; }
.ustawienia { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.6rem; }
.wybor { display: flex; align-items: center; gap: .35rem; }
.wybor-etykieta { color: var(--tekst-2); font-size: .9rem; margin-right: .2rem; }
.wybor-opcja {
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  padding: .3rem .7rem; border-radius: 999px;
  border: 2px solid var(--obwodka); background: var(--karta); color: var(--tekst);
}
.wybor-opcja[aria-pressed="true"] { background: var(--akcent); border-color: var(--akcent); color: var(--akcent-tekst); }
.wybor-opcja:focus-visible { outline: 4px solid var(--fokus); outline-offset: 2px; }

/* ——— Licznik czasu ——— */
.karta-gora { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .4rem 1.4rem; width: 100%; }
.licznik {
  display: flex; align-items: center; gap: .6rem;
  font: inherit; color: var(--tekst); background: none; border: 0; padding: .1rem .3rem; cursor: pointer;
  border-radius: 999px;
}
.licznik-tor { width: 9rem; height: .7rem; border-radius: 999px; background: var(--obwodka); overflow: hidden; }
.licznik-pasek { display: block; height: 100%; background: var(--dobrze); transform-origin: left; transition: transform .1s linear, background .3s; }
.licznik-sekundy { min-width: 4.5rem; text-align: left; font-weight: 800; font-variant-numeric: tabular-nums; }
.licznik.malo .licznik-pasek { background: var(--akcent); }
.licznik.malo .licznik-sekundy { color: var(--akcent); }
.licznik.koniec .licznik-sekundy { color: var(--zle); animation: puls .8s ease-in-out 2; }
.licznik.pauza { opacity: .6; }

/* ——— Okno ze skrótami ——— */
.nakladka { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 1rem; background: var(--nakladka); animation: pojaw .2s ease-out; }
.okno {
  max-width: 40rem; width: 100%; max-height: 100%; overflow: auto;
  padding: 1.2rem 1.6rem; border-radius: calc(var(--promien) * 1.5);
  background: var(--karta); border: 2px solid var(--obwodka); color: var(--tekst);
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
}
.okno h2 { margin: 0; }
.skroty { border-collapse: collapse; font-size: .95rem; text-align: left; }
.skroty th { padding: .25rem 1rem .25rem 0; white-space: nowrap; color: var(--akcent); font-weight: 800; }
.skroty td { padding: .25rem 0; }

.konfetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

/* ——— Animacje ——— */
@keyframes pojaw { from { opacity: 0; } to { opacity: 1; } }
@keyframes wjazd { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes potrzasniecie { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes peka { 0% { transform: scale(1); color: var(--zycie); } 40% { transform: scale(1.8); color: var(--zycie); } 100% { transform: scale(1); color: var(--serce-puste); } }
@keyframes gasnie { 0% { opacity: 1; filter: none; } 100% { opacity: .38; filter: grayscale(1); } }
@keyframes wyskok { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: none; } }

.karta-pytania.nowa { animation: wjazd .35s ease-out; }
.odpowiedz.poprawna, .wzor { animation: puls .5s ease-out; }
.odpowiedz.bledna { animation: potrzasniecie .4s ease-out; }
.serce { display: inline-block; }
.serce.tracone { animation: peka .9s ease-out; }
.gracz.tracil { animation: potrzasniecie .4s ease-out; }
.gracz.wlasnie-odpadl { animation: gasnie 1.2s ease-out .4s both; }
.gracz.aktualny { transition: box-shadow .3s; }
.komunikat { animation: pojaw .3s ease-out; }
.finalisci li { animation: wyskok .5s ease-out both; }
.zwyciezca-imie { animation: wyskok .8s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 640px) {
  .siatka-graczy { grid-template-columns: 1fr; }
  .pasek-graczy, .pasek-graczy.finalowy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .odpowiedzi { grid-template-columns: 1fr; }
  .tresc { font-size: 1.5rem; }
  .zwyciezca-imie { font-size: 3rem; }
  .logo-dol { font-size: 3.6rem; }
}
.info:empty { display: none; }