/* === FONTS: PKO Bank Polski === */
/* Pliki w: public/assets/fonts/ */
@font-face {
  font-family: "PKOBankPolski";
  src:
    url("../fonts/pkobankpolski-regular.woff2") format("woff2"),
    url("../fonts/pkobankpolski-regular.woff") format("woff"),
    url("../fonts/pkobankpolski-regular.otf") format("opentype"),
    url("../fonts/pkobankpolski-regular.eot");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PKOBankPolski";
  src:
    url("../fonts/pkobankpolski-light.woff2") format("woff2"),
    url("../fonts/pkobankpolski-light.woff") format("woff"),
    url("../fonts/pkobankpolski-light.otf") format("opentype"),
    url("../fonts/pkobankpolski-light.eot");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PKOBankPolski";
  src:
    url("../fonts/pkobankpolski-bold.woff2") format("woff2"),
    url("../fonts/pkobankpolski-bold.woff") format("woff"),
    url("../fonts/pkobankpolski-bold.otf") format("opentype"),
    url("../fonts/pkobankpolski-bold.eot");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* === GLOBAL === */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "PKOBankPolski", "Helvetica Neue", Arial, sans-serif;
  background: #0b1940; /* granatowe tło KV */
  color: #ffffff;
  line-height: 1.4;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;

  /* TŁO PREZENTACJI – NIE RUSZAĆ */
  background-image: url(../img/bgtemp.webp);
  background-position: bottom right;
  background-size: cover;
  background-repeat: no-repeat;
}

h1, h2 { font-weight: 700; margin-bottom: 1rem; }



.screen-view h1 {
    font-size: 4rem;
}

.screen-view #podium h1 {
    margin-bottom: 20vh;
    font-size: 5rem;
}

button {
  background: #ef2d36;
  color: #fff;
  border: none;
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
  font-family: inherit;
  font-weight: 600;
  width: 100%;
}
button:hover { background: #fff;
color: #000; }
button.danger { background: #ef2d36; }
button.danger:hover { background: #ef2d36; }

#btn-show-leaderboard {
background: #fff;
color: #000;
}

#btn-next-question {
  background: #0966ff;
}

input[type="text"], input[type="password"] {
  width: 100%;
  padding: 0.8rem;
  margin: 0.5rem 0 1rem;
  border: 1px solid #ffffff;         /* 1px border KV */
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: 1rem;
}

.error { color: #ef2d36; margin-top: 0.5rem; }

.screen.hidden, .hidden { display: none; }
.screen.active {
    display: block;
    padding: 15px;
    width: 95%;
    margin: auto;
    margin-top: -4rem;
}

/* === LOGO (opcjonalne) === */
.logo {
  position: absolute;
  top: 5%;
  right: 5%;
  width: 15%;
}
.logo.dioda {
    position: absolute;
    top: 5%;
    right: 8%;
    width: 10%;
}
.logo img { max-width: 100%; }

/* === WSPÓLNE UTYLITY === */
.qtext { font-size: 1.25rem; margin-top: .5rem; }
.timer { margin-top: 1rem; font-size: 1.5rem; font-weight: bold; color: #ef2d36; }
.correct-callout { margin-top: .75rem; font-weight: 700; }


#timer {
  opacity: 1;
  transition: opacity .25s ease; /* możesz wydłużyć jak chcesz */
}
#timer.is-hidden {
  opacity: 0;
  pointer-events: none; /* żeby nie klikał, jak zniknie */
}


.screen-view .qtext {
font-size: 2.2rem;
}

.screen-view #options-list {
    font-size: 1.5rem;
    display: flex
;
    gap: 20px;
    justify-content: flex-start;
    flex-wrap: wrap;
        text-align: left;
}

.screen-view #options-list li {
    background: transparent;
    border: 1px solid #ffffff;
    margin: 0.5rem 0;
    padding: 1rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s 
ease, border-width .1s 
ease;
    width: calc(50% - 20px);
        text-align: left;
            display: flex
;
    align-items: center;
        font-size: 1.8rem;

}

.screen-view .progress {
font-size: 1.3rem;
}


.topbar{
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; margin-bottom:.75rem;
}
.progress{ opacity:.85; font-weight:700; }

/* ===== PLAYER ===== */
body.player-view #app { max-width: 400px; width: 100%; text-align: center; }

#options-list { list-style: none; margin-top: 1rem; }
#options-list li {
  background: transparent;
  border: 1px solid #ffffff;       /* czysty biały border */
  margin: 0.5rem 0;
  padding: 1rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease, border-width .1s ease;
}
#options-list li:hover { background: rgba(255,255,255,0.06); color: #ffffff; }
#options-list li.disabled { pointer-events: none; opacity: 1; }
#feedback { margin-top: 1rem; font-weight: bold; }

/* zaznaczone (multi-choice przed wysłaniem) */
#options-list li.answer-selected {
  border-width: 2px;
  background: rgba(255,255,255,0.3);
}

/* poprawne (player + dioda): białe tło + granatowy font */
#options-list li.answer-correct {
  background: #ffffff;
  color: #0b1940;
  border-width: 1px;
  font-weight: 700;
}

/* zaznaczone błędnie (tylko player): gruby biały dashed */
#options-list li.answer-selected-wrong {
  background: transparent;
  color: #ffffff;
  border-width: 2px;
  border-style: dashed;
  font-weight: 700;
}

/* ===== SCREEN ===== */
body.screen-view{ text-align:center; width:100%; }
body.screen-view #app{ width:90%; margin:auto; }
.big-code{ font-size:4rem; font-weight:700; margin:1.5rem 0; color:#fff; }

#leaderboard-table {
    width: 50%;
    border-collapse: collapse;
    margin-top: 1rem;
    margin: auto;
}
#leaderboard-table th,#leaderboard-table td{
  padding:.5rem; font-size:1.6rem;
}

#leaderboard-table th{
  border-bottom:1px solid #fff; padding:.5rem; font-size:1.6rem;
}

/* === PODIUM (layout + animacje) === */
#podium-wrap{
  margin-top:2rem;
  display:flex; justify-content:center; align-items:flex-end; gap:2rem;
}
.podium-col{
  width:30%;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}

.podium-block{
  width:100%;
  height:220px;
  border:1px solid #fff; border-radius:12px;
  background:transparent; color:#fff;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  position:relative;
  /* robimy miejsce na dużą ksywę u góry */
  padding:0;
}

.podium-col.first  .podium-block{ height:320px; border-width:3px; padding-top:0px; }
.podium-col.second .podium-block{ height:280px; border-width:2px; }
.podium-col.third  .podium-block{ height:220px; border-width:2px; }

/* Ksywa NA PODIUM – na górze, największa */
.podium-nick{
  position:absolute; top:-5rem; left:10px; right:10px;
  text-align:center; font-weight:700;
  font-size:2.2rem;               /* duża ksywa */
  text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
}
.podium-col.first  .podium-nick{ font-size:2.6rem; }
.podium-col.second .podium-nick{ font-size:2.3rem; }
.podium-col.third  .podium-nick{ font-size:2.1rem; }

/* Środek: punkty i czas – mniejsze niż ksywa */
.podium-score{
  font-size:2rem;
  font-weight:700;
  letter-spacing:.02em;
}
.podium-time{
  margin-top:.25rem;
  font-size:.98rem;
  opacity:.9;
}

/* Podpis pod stopniem */
.podium-rank-label{
  margin-top:.6rem;
  font-weight:700;
  opacity:.85;
  font-size:2rem;
}

/* Animacje odsłaniania – wolniejsze, bardziej miękkie */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.show{
  opacity:1; transform:translateY(0);
  transition: transform .9s ease, opacity .9s ease;
}


/* Konfetti (canvas) */
#confetti-canvas{
  position:fixed; inset:0; pointer-events:none; z-index:9998;
}

/* ===== PRESENTER ===== */
body.presenter-login, body.presenter-view { max-width: 900px; margin: auto; width: 100%; }
#login-box { background: transparent; padding: 2rem; border: 1px solid #ffffff; border-radius: 12px; text-align: center; }
#presenter-panel { padding: 2rem; }
#session-controls { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
#session-controls button { flex: 1; min-width: 140px; }
#question-preview, #players-info { margin-bottom: 2rem; }
#players-count { font-size: 2rem; font-weight: bold; color: #ffffff; }

/* Bąbel z liczbą graczy */
#bubble-players{
  position:fixed; right:22px; bottom:22px;
  background:#ef2d36; color:#fff; width:44px; height:44px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; box-shadow:0 8px 24px rgba(0,0,0,.35);
  z-index:9999;
}


body.screen-view {
  background-image: none;
}


/* ======== BACKGROUND VIDEO ======== */
#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; /* pod wszystkim */
  opacity: 1; /* dopasuj – subtelne tło, nie odciąga uwagi */
  pointer-events: none; /* żeby nie blokował klikania */

}