/* ============================================================
   Minigierki przed wpłatą — pełnoekranowa nakładka.
   Kolory z aktywnego motywu (--c-popup, --c-akcent…).
   ============================================================ */

html.minigra-otwarta,
html.minigra-otwarta body { overflow: hidden; }

.minigra {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(60, 120, 255, 0.25), transparent 70%),
    #050a24;
  animation: minigra-wejscie 0.25s ease-out;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

@keyframes minigra-wejscie {
  from { opacity: 0; }
  to { opacity: 1; }
}

.minigra-gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--c-pasek);
  border-bottom: 1px solid var(--c-pasek-ramka);
}

.minigra-tytul {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--f-display);
  font-size: clamp(18px, 4.6vw, 26px);
  color: var(--c-akcent);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.minigra-tytul-ikona { font-size: 1.1em; flex: none; }
.minigra-tytul > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 480px) {
  .minigra-tytul { font-size: 18px; }
  .minigra-stawka { font-size: 12px; padding: 3px 9px; }
}

.minigra-stawka {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--c-panel-ramka);
  color: var(--c-tekst);
  font: 700 14px var(--f-tekst);
  white-space: nowrap;
}

/* odliczanie 3-2-1 na środku sceny */
.minigra-odliczanie {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  font-family: var(--f-display);
  font-size: clamp(64px, 22vw, 150px);
  color: var(--c-akcent);
  text-shadow: 0 6px 0 rgba(0, 0, 0, 0.45), 0 0 30px rgba(255, 227, 77, 0.6);
  pointer-events: none;
  white-space: nowrap;
}

.minigra-odliczanie[hidden] { display: none; }
.minigra-odliczanie.pulsuj { animation: minigra-puls 0.5s ease-out; }

@keyframes minigra-puls {
  from { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.minigra-panel-ikona {
  font-size: 44px;
  line-height: 1;
  margin: -2px 0 6px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.minigra-panel.wynik { animation: minigra-wynik 0.35s cubic-bezier(.2, .9, .25, 1.3); }

@keyframes minigra-wynik {
  from { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
}

.minigra-panel-nad b { color: var(--c-okno-tekst); }

.minigra-x {
  width: 38px;
  height: 38px;
  border: 1px solid var(--c-panel-ramka);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  color: var(--c-tekst);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.minigra-scena {
  position: relative;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.minigra-plotno {
  /* absolutnie — inaczej rozmiar płótna rozpychałby scenę (pętla: płótno → scena → płótno) */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.minigra-podpowiedz {
  position: absolute;
  left: 12px;
  bottom: 14px;
  max-width: calc(100% - 130px);    /* z prawej zostaje miejsce na przycisk BUDUJ */
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(10, 22, 70, 0.72);
  color: #fff;
  font: 600 14px var(--f-tekst);
  pointer-events: none;
}

.minigra-podpowiedz:empty { display: none; }

.minigra-panel {
  position: absolute;
  border-top: 4px solid var(--c-akcent) !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100% - 32px));
  max-height: calc(100% - 24px);
  overflow: auto;
  padding: 20px 20px 18px;
  border: 1px solid var(--c-panel-ramka);
  border-radius: var(--r-panel);
  background: var(--c-popup);
  color: var(--c-okno-tekst);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  text-align: center;
}

.minigra-panel[hidden] { display: none; }

.minigra-panel-nad {
  margin: 0 0 6px;
  color: var(--c-okno-tekst-2);
  font-size: 14px;
}

.minigra-panel-tytul {
  margin: 0 0 12px;
  font-family: var(--f-display);
  font-size: clamp(24px, 6vw, 34px);
  color: var(--c-akcent);
  line-height: 1.05;
  text-transform: uppercase;
}

.minigra-panel-tytul.wygrana { color: #7dff9a; }
.minigra-panel-tytul.przegrana { color: var(--c-blad); }

.minigra-trudnosc { margin: 0 0 12px; text-align: left; }

.minigra-trudnosc-napis {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--c-okno-tekst-2);
  margin-bottom: 4px;
}

.minigra-trudnosc-napis b { color: var(--c-okno-tekst); }

.minigra-trudnosc-pas {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.minigra-trudnosc-pas i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5ee06a, #ffe34d);
}

.minigra-trudnosc-pas i.trudna { background: linear-gradient(90deg, #ffb02e, #ff3b3b 70%, #b3002d); }

.minigra-opis {
  margin: 0 0 16px;
  padding-left: 1.3em;
  text-align: left;
  font-size: 14.5px;
  line-height: 1.45;
}

.minigra-opis li + li { margin-top: 4px; }

.minigra-info {
  margin: 4px 0 14px;
  font-size: 13px;
  color: var(--c-okno-tekst-3);
}

.minigra-przyciski {
  display: flex;
  gap: 10px;
}

.minigra-btn {
  flex: 1;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--c-pole-ramka);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--c-okno-tekst);
  font: 700 16px var(--f-tekst);
  white-space: nowrap;
  cursor: pointer;
}

.minigra-btn.glowny {
  flex: 1.4;
  border-color: transparent;
  background: var(--c-kat-aktywna);
  color: var(--c-kat-aktywna-tekst);
}

.minigra-btn:disabled {
  opacity: 0.55;
  cursor: default;
}


@media (prefers-reduced-motion: reduce) {
  .minigra { animation: none; }
}

/* ============================================================
   Suwak kwoty w oknie wpłaty (zamiast pola i szybkich kwot)
   ============================================================ */

.suwak-kwota { margin-top: 4px; }

.szybkie[hidden],
.pole-kwota[hidden] { display: none; }

.suwak-gora {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.suwak-wartosc {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--f-liczby);
  font-size: clamp(2.2rem, 11vw, 3rem);
  line-height: 1;
  color: var(--c-okno-tekst);
}

.suwak-wartosc .vb { font-size: 0.8em; flex: none; }

.suwak-krok {
  flex: none;
  width: 44px;
  height: 44px;
  border: 2px solid var(--c-pole-ramka);
  border-radius: 50%;
  background: var(--c-pole);
  color: var(--c-okno-tekst);
  font: 700 24px var(--f-tekst);
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.suwak-krok:active { transform: scale(0.92); }

/* pasek stref nad suwakiem: która gra czeka na daną kwotę */
.suwak-strefy {
  display: flex;
  gap: 4px;
  margin: 14px 0 6px;
}

.suwak-strefy[hidden] { display: none; }

.suwak-strefa {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 8px;
  text-align: left;
  line-height: 1.15;
  border-radius: 8px;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.06);
  color: var(--c-okno-tekst-2);
  font: 700 13px var(--f-tekst);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
}

.suwak-strefa > span:last-child { min-width: 0; white-space: normal; }
.suwak-strefa small { display: block; font-weight: 500; opacity: 0.8; }
.suwak-strefa .ik { font-size: 1.5em; flex: none; }

.suwak-strefa.aktywna {
  opacity: 1;
  color: var(--c-okno-tekst);
  border-color: #5ee06a;
  background: rgba(94, 224, 106, 0.16);
  transform: translateY(-2px);
}

.suwak-strefa.trudna.aktywna {
  border-color: #ff5a4a;
  background: rgba(255, 90, 74, 0.16);
}

.suwak {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 34px;
  margin: 0;
  background: transparent;
  touch-action: pan-y;
  cursor: pointer;
  --p: 0.25;
}

.suwak:focus-visible { outline: none; }

.suwak::-webkit-slider-runnable-track {
  height: 12px;
  border-radius: 999px;
  /* za kciukiem przyciemnione — widać, ile „wybrano” */
  background:
    linear-gradient(90deg, transparent calc(var(--p) * 100%), rgba(0, 0, 0, 0.55) 0),
    var(--suwak-tlo, linear-gradient(90deg, var(--c-okno-akcent), var(--c-okno-akcent)));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}

.suwak::-moz-range-track {
  height: 12px;
  border-radius: 999px;
  background: var(--suwak-tlo, var(--c-okno-akcent));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}

.suwak::-moz-range-progress { height: 12px; border-radius: 999px; background: transparent; }

.suwak::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 34px;
  height: 34px;
  margin-top: -11px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  background: var(--c-kat-aktywna);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}

.suwak::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  background: var(--c-kat-aktywna);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}

.suwak:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-okno-akcent) 50%, transparent); }

.suwak-skala {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 12px;
  color: var(--c-okno-tekst-3);
}

/* wskaźnik gry pod suwakiem */
.okno-minigra {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  font-size: 13px;
  color: var(--c-okno-tekst-2);
}

.okno-minigra[hidden] { display: none; }
.okno-minigra .ik { font-size: 26px; line-height: 1; }
.okno-minigra-tekst { flex: 1; min-width: 0; }
.okno-minigra-tekst b { display: block; font-size: 15px; color: var(--c-okno-tekst); }

.okno-minigra-poziom {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  color: #0a1646;
  background: #5ee06a;
}

.okno-minigra-poziom.trudna { background: #ff5a4a; color: #fff; }