:root{
  --pad-v: 2vh;
  --gap-v: 3vh;
  --btn-w: 28vw;        /* rozmiar przycisku play */
}

html,body{
  height:100%;
  background:#000;
  color:#fff;
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow:hidden;      /* kiosk */
}

.screen{ position:absolute; inset:0; display:none; }
.screen[aria-hidden="false"]{ display:block; }

.screen--cover .cover-img{
  position:absolute; inset:0;
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
}

.screen--quiz .stage{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start;
  padding-top:6vh; gap: var(--gap-v);
}

.top{ width:100%; display:flex; justify-content:center; }
.top-img{ width:60vw; height:auto; object-fit:contain; }

.play-btn{
  background:transparent; border:0; padding:0;
  width:var(--btn-w); aspect-ratio:1/1;
}
.play-btn img{ width:100%; height:100%; object-fit:contain; }

.wave-wrap{ width:92vw; margin-top:1vh; }
.wave{ width:100%; height:auto; }

.answers{
  width:92vw; margin-top:2vh;
  display:grid; grid-template-columns: 1fr 1fr;
  gap:4vh 6vw;
}

.answer{
  display:flex; align-items:center; justify-content:flex-start;
  gap:4vw; padding:2vh 2vw;
  border-radius:3vw;
  background:rgba(255,255,255,0.06);
  cursor:pointer; user-select:none;
  transition:transform .1s ease;
}
.answer:active{ transform:scale(0.98); }
.answer.disabled{ opacity:.5; pointer-events:none; }

.answer .badge{
  width:9vw; height:9vw; border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; font-size:5vw; color:#fff;
  background:#ff5a2f;          /* A */
}
.answer[data-key="B"] .badge{ background:#5aa9ff; }
.answer[data-key="C"] .badge{ background:#f4a7b9; }
.answer[data-key="D"] .badge{ background:#ffd35a; }

.answer .label{ font-weight:800; font-size:4.6vw; line-height:1.1; }

.answer.correct{ outline:.8vw solid #17cf6a; }
.answer.wrong{   outline:.8vw solid #ff3c3c; }


#resetArea {
  position: fixed;
  bottom: 2vh;
  left: 2vh;
  width: 10vw;
  height: 10vw;
  background: rgba(255,255,255,0.03); /* prawie niewidoczne */
  z-index: 9999;
  border-radius: 1vw;
  touch-action: none;
}

#resetArea.active {
  background: rgba(255,0,0,0.3); /* wizualna informacja o trzymaniu */
}


/* === FADE MIĘDZY EKRANAMI === */
.screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* ekran widoczny */
.screen[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}


/* === EKRAN ŁADOWANIA === */
.screen--loader {
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.8s ease;
}

.loader-content {
  width: 80vw;
  text-align: center;
  font-family: system-ui, sans-serif;
}

.loader-title {
  font-size: 5vw;
  margin-bottom: 3vh;
  color: #f4a7b9;
  font-weight: 700;
}

.loader-bar {
  width: 100%;
  height: 2vh;
  background: rgba(255,255,255,0.1);
  border-radius: 1vh;
  overflow: hidden;
}

.loader-progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff5533, #f9a2b4);
  transition: width 0.3s ease;
}

.loader-percent {
  margin-top: 2vh;
  font-size: 4vw;
  color: #fff;
}

#loaderScreen.hidden {
  opacity: 0;
  pointer-events: none;
}