/* style.css – zmiany: rozmieszczenie przycisków edycji (lewa/prawa), soundToggle bez obrysu w górnym rogu, ukrywanie switchCam kontrolowane w JS. */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --topH: 13vh;
  --bottomH: 18vh;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100svh;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

.max-width {
  position: relative;
  height: 100%;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
}

/* Górny pasek */
#top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--topH);
  background: #111;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 45;
  padding: 0 1rem;
  padding-top: env(safe-area-inset-top, 0px);
}

#top-bar .max-width { display: flex; }

.top-col {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#top-bar .top-col:first-child {
  flex: 0 0 20%;
  max-width: 20%;
  justify-content: flex-start;
}

#top-bar .top-col:nth-child(2) {
  flex: 0 0 80%;
  max-width: 80%;
  justify-content: flex-start;
  padding-left: 15px;
}

#top-bar .messages {
  position: static !important;
  transform: none;
  max-width: 100%;
  text-align: center;
  color: #fff;
  
}

/* Podgląd */
.video-container {
  position: relative;
  flex: 0 0 auto;
  --visH: calc(100svh - var(--topH) - var(--bottomH));
  width: min(calc(var(--visH) * 7 / 9), 100vw);
  height: min(var(--visH), calc(100vw * 9 / 7));
  margin: var(--topH) auto calc(var(--bottomH) + env(safe-area-inset-bottom));
  background: #000;
  -webkit-user-drag: none;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  -webkit-user-drag: none;
}

#overlay,
#faceOverlay,
.video-container canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#overlay { z-index: 1; }
#faceOverlay { z-index: 2; }

#photoContainer {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  overflow: hidden;
}

#photoContainer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 2px solid #fff;
  display: block;
  -webkit-user-drag: none;
}

/* Canvasy edycji */
#photoEditCanvas,
#photoMaskCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}

#photoEditCanvas {
  pointer-events: auto;
  cursor: grab;
  z-index: 4;
}
#photoEditCanvas:active { cursor: grabbing; }

#photoMaskCanvas {
  pointer-events: none;
  z-index: 5;
}

/* Panel edycji */
.edit-overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: .55rem .9rem calc(.65rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0,0,0,0.92), rgba(0,0,0,0.4) 60%, rgba(0,0,0,0));
  z-index: 6;
  pointer-events: none;
}

.edit-overlay .edit-group {
  position: absolute;
  bottom: .55rem;
  display: flex;
  gap: 0.6rem;
  pointer-events: auto;
}

.edit-overlay .edit-group.left { left: .9rem; }
.edit-overlay .edit-group.right { right: .9rem; }

.edit-overlay button {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #1d1d1d;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,.55);
  transition: background .2s, transform .15s;
}

.edit-overlay button:hover { background:#2a2a2a; }
.edit-overlay button:active { transform:scale(.9); }

/* Dolny pasek */
#bottom-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  height: var(--bottomH);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
}

#captureBtn,
#startBtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 4px solid #fff;
  background: transparent;
  cursor: pointer;
  outline: none;
  color: #fff;
}

#captureBtn {
  display: none;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid #111;
  box-shadow: 0 0 0 4px #fff;
}

#startBtn {
  display: block;
  padding: 0 1rem;
  height: 60px;
  border-radius: 30px;
  font-size: 1.2rem;
  line-height: 1;
}

/* Review controls */
#reviewControls {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  gap: 1rem;
  z-index: 41;
}

#reviewControls button {
  display: inline-block;
  padding: 0.6em 1.2em;
  border-radius: 24px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  background: transparent;
  color: #fff;
  border: 4px solid #fff;
  box-sizing: border-box;
  min-width: 140px;
}

#downloadBtn {
  border-color: #0f0 !important;
  font-size: 1.4rem !important;
}

#downloadBtn:disabled,
#discardBtn:disabled {
  opacity: .4;
  cursor: default;
  border-color: #666 !important;
}

#switchCam {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: 80px;
  cursor: pointer;
  border-radius: 5px;
  display: none;
}

/* Ikony / instrukcje */
.dir-icon {
  width: 80px;
  height: 80px;
  border-radius: 5px;
}

.mirror { transform: scaleX(-1); -webkit-transform: scaleX(-1); }

#introInstructions {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  font-size: 1.2rem;
  line-height: 1.4;
  color: #fff;
  background: #000;
  z-index: 4;
}

#introInstructions p { display: none; }

#introInstructions .intro-stack { display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; }
#introInstructions .intro-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; letter-spacing: .5px; }
#introInstructions .intro-subtitle { opacity: .9; font-size: 1.1rem; }
#introInstructions .intro-sep { width: 60%; height: 1px; background: #333; margin: 6px 0 2px; }

button { line-height: 1.2; }

/* Buttons styled like #startBtn */
.start-like {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.1rem;
  min-height: 60px;
  border-radius: 30px;
  font-size: 1.2rem;
  line-height: 1.2;
  border: 4px solid #fff;
  background: transparent;
  color: #fff;
  cursor: pointer;
  min-width: 220px;
}
.start-like:active { transform: scale(0.98); }

@media (hover:hover) and (pointer:fine) {
  #switchCam { display: none !important; }
}

/* infoBtn */
/* === Dwu-warstwowy progress wokół infoBtn z widoczną ścieżką === */
#infoBtn {
  position: relative;
  z-index: auto;
  grid-column: 1;
  justify-self: start;
  align-self: center;
  margin-left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #111;              /* środek */
  border: none;
  cursor: pointer;

  /* kąty i kolory obu ringów (możesz zmienić) */
  --inner-angle: 0deg;           /* ustawiane z JS */
  --outer-angle: 0deg;           /* ustawiane z JS */
  --inner-color: #0f0;           /* zielony – sceneria + światło */
  --outer-color: #2b9cff;        /* niebieski – ustawienie (etap 2) */
  /* kolory ścieżek (20% krycia) */
  --inner-track: rgba(0,255,0,.2);
  --outer-track: rgba(43,156,255,.2);

  --ring-w: 6px;                 /* grubość pierścienia */
  --gap: 4px;                    /* odstęp między pierścieniami */
}

/* wspólna baza dla obydwu ringów */
#infoBtn .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: .95;
  transition: opacity .2s ease;
  /* „donut” przez maskę radialną */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-w)), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-w)), #000 0);
}

/* wewnętrzny ring: progress NA ścieżce (2 warstwy tła) */
#infoBtn .ring-inner {
  inset: -3px;
  background:
    /* progres – na wierzchu */
    conic-gradient(from -90deg,
      var(--inner-color) var(--inner-angle),
      transparent 0 360deg),
    /* ścieżka – pod spodem, zawsze 360° */
    conic-gradient(from -90deg,
      var(--inner-track) 360deg);
}

/* zewnętrzny ring: też 2 warstwy, domyślnie ukryty (etap 1) */
#infoBtn .ring-outer {
  inset: calc(-3px - var(--gap) - var(--ring-w));
  background:
    conic-gradient(from -90deg,
      var(--outer-color) var(--outer-angle),
      transparent 0 360deg),
    conic-gradient(from -90deg,
      var(--outer-track) 360deg);
  opacity: 0; /* pokaż tylko w etapie 2 */
}

/* pokaż drugi ring (z jego ścieżką) na etapie 2 */
#infoBtn.dual .ring-outer { opacity: .95; }


/* Popup */
.info-popup {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50vh;
  background: #000;
  color: #fff;
  transform: translateY(100%);
  transition: transform .3s ease-in-out;
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.info-popup.open { transform: translateY(0); }

/* === Badge przy ikonce "i" (licznik powiadomień) === */
#infoBtn .info-badge{
  position:absolute;
  top:-2px;
  right:-2px;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:#e53935;
  color:#fff;
  font-weight:700;
  font-size:12px;
  line-height:20px;
  text-align:center;
  display:none;             /* domyślnie ukryte */
  transform-origin:center;
  z-index:3;                /* nad pierścieniami info */
  box-shadow:0 0 0 2px #111; /* obrys pod kolor dolnego paska */
}
#infoBtn .info-badge.show{
  display:flex;
  align-items:center;
  justify-content:center;
  animation:pulseBadge 1.2s ease-in-out infinite;
}
@keyframes pulseBadge{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.12); }
}

/* (opcjonalnie) drobny margines dla bloków etapowych w popupie */
#popupContent .popup-dynamic{ margin-bottom:.75rem; }


.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5rem 1rem;
  border-bottom: 1px solid #444;
  font-size: 1.1rem;
}
.close-btn {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: #fff;
  cursor: pointer;
}
.popup-content {
  padding: 1rem;
  overflow-y: auto;
  flex: 1;
}

#countdownTimer {
  font-size: 3rem;
  font-weight: bold;
  padding-left: 10px;
  line-height: 1;
  user-select: none;
}


#soundToggle {
  position: absolute;
  top: 8px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 11;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #28c463;
  transition: color .25s, transform .15s;
}

#soundToggle.off {
  color: #8d8d8d;                 /* SZARY gdy WYŁĄCZONY */
}

#soundToggle .icon-sound {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  /* opcjonalny efekt świecenia dla włączonego */
  filter: drop-shadow(0 0 4px rgba(40,196,99,0.45));
}

#soundToggle.off .icon-sound {
  filter: none;
}

/* (Opcjonalnie) lekkie wciśnięcie przy tapnięciu */
#soundToggle:active {
  transform: scale(.9);
}


/* Responsywność */
@media (max-width: 640px) {
  #reviewControls {
    flex-direction: row;  /* zmiana: było column */
    top: 50%;             /* zmiana: było 52% */
  }
  #reviewControls button {
    min-width: 140px;     /* zmiana: było 130px */
  }
  .edit-overlay button {
    width: 48px;
    height: 48px;
    font-size: 1.15rem;
  }
  .edit-overlay .edit-group.left { left: .65rem; }
  .edit-overlay .edit-group.right { right: .65rem; }
}

#top-center {
  display: flex;
  flex-direction: column;  /* ustawia elementy w pionie */
  align-items: center;     /* wyśrodkowanie w poziomie */
  justify-content: center; /* wyśrodkowanie w pionie w dostępnej wysokości */
}

.stage-header {
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  width: 100%;
  margin-bottom: 0.2rem;
}

/* Ikony światła – maskowane z light.svg, 50% przezroczystości */
/* Ikony światła – domyślnie NIEWIDOCZNE; pojawią się po starcie podglądu */
.light-icon {
  position: absolute;
  top: 8px;
  width: 40px;
  height: 40px;
  opacity: 0; /* było 0.5 – teraz ukryte */
  background: currentColor;
  -webkit-mask: url('/icons/light.svg') center / contain no-repeat;
          mask: url('/icons/light.svg') center / contain no-repeat;
  z-index: 10;
  transition: opacity 0.35s ease, color 0.8s ease, filter 0.8s ease, transform 0.25s ease;
}

.video-container.lights-on .light-icon {
  opacity: 0.5; /* po starcie podglądu */
}


.light-icon.left { left: 8px; }
.light-icon.right { right: 8px; }

/* Stan: ON (żółty) – bez pulsowania */
.light-icon.on {
  color: #ffd400;
  filter: drop-shadow(0 0 8px rgba(255,212,0,0.5));
  animation: none;
}

/* Stan: OFF – płynne pulsowanie koloru między szarym a czerwonym */
.light-icon.off {
  animation: colorPulse 1.8s ease-in-out infinite;
}

/* Kluczowe klatki pulsowania koloru */
@keyframes colorPulse {
  0%   { color: #666; }
  50%  { color: #ff3c3c; }
  100% { color: #666; }
}

/* Przycisk "Dalej" – taki sam styl jak OK / Zrób jeszcze raz */
#nextStageBtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;                /* pokazywany/ukrywany w JS */
  padding: 0.6em 1.2em;
  border-radius: 24px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  background: transparent;
  color: #fff;
  border: 4px solid #fff;       /* OK ma zielony border, tu zostaje biały jak "Zrób jeszcze raz" */
  min-width: 140px;
  box-sizing: border-box;
}