/* /assets/css/puzzle-hunt.css */

/* Od 2026-02: nie ma już dużego panelu puzzli w stopce */
.omPuzzleSlot{ display:none !important; }
.omPuzzleCard{ display:none !important; }
.omPuzzleArrow{ display:none !important; }

/* === Nowe: małe kawałki zdjęcia (overlay) === */
.omPuzzleFloatPiece{
  position: fixed;
  z-index: 2147482000;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 12px;
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
  background-repeat: no-repeat;
  background-color: #f3f4f6;
  cursor: pointer;
  padding: 0;
  animation: omPuzzleFloatPulse 1.2s infinite;
}
.omPuzzleFloatPiece:hover{ transform: translateY(-1px) scale(1.02); }
.omPuzzleFloatPiece:active{ transform: translateY(0) scale(.99); }
.omPuzzleFloatPiece:focus{ outline: 3px solid rgba(239,68,68,.35); outline-offset: 2px; }
.omPuzzleFloatPiece.is-collected{ opacity:.55; filter: grayscale(0.2); animation:none; }
@keyframes omPuzzleFloatPulse{
  0%{ box-shadow: 0 14px 28px rgba(0,0,0,.18), 0 0 0 0 rgba(239,68,68,.25); }
  70%{ box-shadow: 0 14px 28px rgba(0,0,0,.18), 0 0 0 10px rgba(239,68,68,0); }
  100%{ box-shadow: 0 14px 28px rgba(0,0,0,.18), 0 0 0 0 rgba(239,68,68,0); }
}

.omPuzzleToast{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2147483000;
  background: rgba(17,24,39,.92);
  color: #fff;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  font: 800 13px/1.25 system-ui,Segoe UI,Roboto,Arial;
  opacity: 0;
  transform: translateY(10px);
  transition: .16s ease;
  pointer-events: none;
}
.omPuzzleToast.is-on{ opacity: 1; transform: translateY(0); }
.omPuzzlePiece{
  width: 92px;
  height: 92px;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #f3f4f6;
  flex:0 0 auto;
  display:grid;
  place-items:center;
}
.omPuzzlePiece canvas{display:block;width:100%;height:100%;}
.omPuzzleInfo{flex:1 1 auto;min-width: 0;}
.omPuzzleInfo h3{margin:0;font:800 16px/1.2 system-ui,Segoe UI,Roboto,Arial;}
.omPuzzleInfo p{margin:6px 0 0;color:#4b5563;font:500 13px/1.35 system-ui,Segoe UI,Roboto,Arial;}
.omPuzzleActions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.omPuzzleBtn{
  appearance:none;border:0;border-radius:999px;
  padding:10px 14px;
  font:800 13px/1 system-ui,Segoe UI,Roboto,Arial;
  cursor:pointer;
}
.omPuzzleBtn--primary{background:linear-gradient(135deg,#ef4444,#b91c1c);color:#fff;}
.omPuzzleBtn--muted{background:#f3f4f6;color:#b91c1c;border:1px solid #ef4444;}
.omPuzzleBadge{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:999px;
  padding:8px 12px;
  background:#ecfdf5;
  color:#065f46;
  font:800 12px/1 system-ui,Segoe UI,Roboto,Arial;
  border:1px solid rgba(16,185,129,.35);
}

/* Miganie linku do następnej strony */
.omPuzzleNextLink{
  position: relative;
  outline: 2px solid rgba(239,68,68,.35);
  border-radius: 10px;
  animation: omPuzzlePulse 1.1s infinite;
}
@keyframes omPuzzlePulse{
  0%{box-shadow:0 0 0 0 rgba(239,68,68,.35)}
  70%{box-shadow:0 0 0 10px rgba(239,68,68,0)}
  100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}
}

/* Pływająca strzałka w dół */
.omPuzzleArrow{
  position: fixed;
  right: 16px;
  bottom: 90px;
  z-index: 9999;
  width: 52px;height:52px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(239,68,68,.45);
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  display:grid;place-items:center;
  cursor:pointer;
}
.omPuzzleArrow svg{width:22px;height:22px}

/* Bonus page */
.omBonusWrap{max-width:1200px;margin:0 auto;padding:18px 16px 32px}
.omBonusTop{
  display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.omBonusTop .omBonusProgress{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.omBonusProgressTitle{font:900 16px/1.2 system-ui,Segoe UI,Roboto,Arial}
.omBonusProgressMeta{font:700 13px/1 system-ui,Segoe UI,Roboto,Arial;color:#374151}
.omBonusBtn{padding:10px 14px;border-radius:999px;border:0;cursor:pointer;font:900 13px/1 system-ui,Segoe UI,Roboto,Arial}
.omBonusBtn--ghost{background:#fff;border:1px solid rgba(239,68,68,.45);color:#b91c1c}
.omBonusBoard{
  margin-top:14px;
  border:1px dashed rgba(239,68,68,.35);
  border-radius:18px;
  padding:14px;
  background:#fff;
}
.omBonusGrid{
  display:grid;
  grid-template-columns: repeat( 3, minmax(0, 1fr));
  gap:10px;
  align-items:stretch;
}
.omBonusCell{
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background:#f3f4f6;
  overflow:hidden;
  aspect-ratio: 1 / 1;
  display:grid;
  place-items:center;
}
.omBonusCell canvas{width:100%;height:100%;display:block}
.omBonusHelp{
  margin-top:14px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:14px;
  background:#fff;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.omBonusHelp h4{margin:0;font:900 16px/1.2 system-ui,Segoe UI,Roboto,Arial}
.omBonusHelp p{margin:6px 0 0;color:#4b5563;font:600 13px/1.35 system-ui,Segoe UI,Roboto,Arial;max-width:820px}

/* mobile */
@media (max-width: 820px){
  .omBonusGrid{grid-template-columns: repeat(3, minmax(0,1fr))}
}
@media (max-width: 620px){
  .omPuzzleCard{flex-direction:column;align-items:stretch}
  .omPuzzleActions{justify-content:flex-start}
  .omBonusTop{flex-direction:column;align-items:flex-start}
  .omBonusGrid{grid-template-columns: repeat(2, minmax(0,1fr))}
}


/* === Puzzle Hunt consent (Gram / Nie gram) === */
.omPuzzleConsent{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9998; /* poniżej banera cookies (jeśli ma wyższy) */
  padding: 14px 16px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 -12px 30px rgba(0,0,0,.10);
}
.omPuzzleConsent__box{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 16px;
  align-items: center;
}
.omPuzzleConsent__title{
  font: 800 16px/1.2 system-ui, Segoe UI, Roboto, Arial;
  margin: 0;
}
.omPuzzleConsent__text{
  grid-column: 1 / 2;
  color: #374151;
  font: 600 13px/1.35 system-ui, Segoe UI, Roboto, Arial;
}
.omPuzzleConsent__actions{
  grid-column: 2 / 3;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.omPuzzleConsent__btn{
  appearance: none;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  border-radius: 999px;
  padding: 9px 14px;
  font: 800 13px/1 system-ui, Segoe UI, Roboto, Arial;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}
.omPuzzleConsent__btn:hover{ transform: translateY(-1px); }
.omPuzzleConsent__btn.is-yes{
  border-color: rgba(34,197,94,.35);
}
.omPuzzleConsent__btn.is-no{
  border-color: rgba(239,68,68,.35);
}
.omPuzzleConsent__small{
  grid-column: 1 / 2;
  color: #6b7280;
  font: 600 12px/1.2 system-ui, Segoe UI, Roboto, Arial;
}
@media (max-width: 680px){
  .omPuzzleConsent__box{ grid-template-columns: 1fr; }
  .omPuzzleConsent__actions{ grid-column: 1 / 2; justify-content: flex-start; }
}


/* Start gry z poziomu ODBIERZ NAGRODĘ gdy user kliknął "Nie gram" */
.omBonusStartGame{
  margin: 12px 0 18px;
  padding: 14px 14px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.8);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.omBonusStartGame__title{
  font: 800 14px/1.2 system-ui, Segoe UI, Roboto, Arial;
  margin-bottom: 6px;
}
.omBonusStartGame__text{
  font: 600 13px/1.35 system-ui, Segoe UI, Roboto, Arial;
  color: #374151;
  margin-bottom: 10px;
}

/* === SAFE OVERRIDE: DUŻY, NIE DO PRZEOCZENIA PANEL AKCEPTACJI (Puzzle Hunt) === */
#omPuzzleConsent.omPuzzleConsent,
.omPuzzleConsent{
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  margin: 0 !important;
  background: rgba(0,0,0,.78) !important;
  z-index: 2147483647 !important;
}

#omPuzzleConsent .omPuzzleConsent__box,
.omPuzzleConsent .omPuzzleConsent__box{
  width: min(900px, 100%) !important;
  max-width: 900px !important;
  background: #fff !important;
  border-radius: 22px !important;
  padding: 24px 22px !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.35) !important;
  border: 2px solid rgba(0,0,0,.08) !important;
  grid-template-columns: 1fr !important;
}

#omPuzzleConsent .omPuzzleConsent__actions,
.omPuzzleConsent .omPuzzleConsent__actions{
  grid-column: 1 / 2 !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  margin-top: 12px !important;
}

#omPuzzleConsent .omPuzzleConsent__title,
.omPuzzleConsent .omPuzzleConsent__title{
  font: 900 30px/1.15 system-ui,Segoe UI,Roboto,Arial !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 10px !important;
}

#omPuzzleConsent .omPuzzleConsent__text,
.omPuzzleConsent .omPuzzleConsent__text{
  font: 600 16px/1.55 system-ui,Segoe UI,Roboto,Arial !important;
  color: #111827 !important;
  opacity: .92 !important;
  margin: 0 0 14px !important;
}

#omPuzzleConsent .omPuzzleConsent__btn,
.omPuzzleConsent .omPuzzleConsent__btn{
  flex: 1 !important;
  min-width: 240px !important;
  border: 0 !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
  font: 900 18px/1 system-ui,Segoe UI,Roboto,Arial !important;
  cursor: pointer !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.10) !important;
}

#omPuzzleConsent .omPuzzleConsent__small,
.omPuzzleConsent .omPuzzleConsent__small{
  font: 500 13px/1.35 system-ui,Segoe UI,Roboto,Arial !important;
  color: #6b7280 !important;
  margin-top: 12px !important;
}