/* ==== MARKETPLACC KAPARÓS JÁTÉK – DELUXE DESIGN ==== */

/* Fő gomb */
#scratchGameButton {
  display: inline-block;
  background: linear-gradient(135deg, #ffb347, #ff7b00);
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  padding: 14px 32px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  transition: all 0.3s ease;
  margin: 25px auto;
  text-align: center;
  font-family: 'Poppins', Arial, sans-serif;
}
#scratchGameButton:hover {
  transform: scale(1.07);
  background: linear-gradient(135deg, #ffa726, #ff5722);
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

/* Háttér overlay */
#scratchOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(6px);
}

/* Popup */
#scratchPopup {
  background: radial-gradient(circle at top, #fffaf3, #f5e7d4);
  border-radius: 25px;
  box-shadow: 0 0 50px rgba(255, 190, 120, 0.6);
  padding: 30px;
  text-align: center;
  animation: zoomIn 0.4s ease forwards;
  max-width: 680px;
  width: 90%;
  position: relative;
}
@keyframes zoomIn {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Sorsjegyek tartó */
.scratch-cards {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-top: 25px;
  flex-wrap: wrap;
}

/* Alap sorsjegy */
.scratch-card {
  position: relative;
  width: 180px;
  height: 240px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.4);
  cursor: pointer;
  transform: perspective(800px) rotateY(-3deg);
  transition: all 0.3s ease;
}
.scratch-card:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.05);
}

/* Színek (fémes hatás) */
.scratch-card.gold {
  background: linear-gradient(145deg, #f9d423, #ff4e50);
  background-image: repeating-linear-gradient(45deg, #ffec80, #ffd740 10px, #ffb300 20px);
}
.scratch-card.silver {
  background: repeating-linear-gradient(45deg, #d7d7d7, #b0b0b0 10px, #e0e0e0 20px);
}
.scratch-card.bronze {
  background: repeating-linear-gradient(45deg, #d2a679, #a87332 10px, #e6b98a 20px);
}

/* Fénycsík csillogás a felületen */
.scratch-card::before {
  content: "";
  position: absolute;
  top: -150%;
  left: -150%;
  width: 300%;
  height: 300%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.4) 50%,
    transparent 100%
  );
  transform: rotate(25deg);
  animation: shine 3s linear infinite;
}
@keyframes shine {
  0% { transform: translateX(-100%) rotate(25deg); }
  100% { transform: translateX(100%) rotate(25deg); }
}

/* Fejléc: "Kaparós sorsjegy" */
.scratch-card::after {
  content: "Kaparós sorsjegy";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-weight: 600;
  text-align: center;
  padding: 6px 0;
  font-size: 15px;
  border-radius: 18px 18px 0 0;
  letter-spacing: 0.5px;
  font-family: 'Poppins', Arial, sans-serif;
  z-index: 5;
  backdrop-filter: blur(2px);
}

/* Középső "Kaparj és nyerj!" felirat */
.scratch-card .card-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(0,0,0,0.6);
  z-index: 4;
  letter-spacing: 1px;
  font-family: 'Poppins', Arial, sans-serif;
  animation: glowText 3s ease-in-out infinite;
}
@keyframes glowText {
  0%, 100% { text-shadow: 0 0 6px rgba(255,255,255,0.5), 0 0 14px rgba(255,255,255,0.3); }
  50% { text-shadow: 0 0 20px rgba(255,255,255,1), 0 0 30px rgba(255,255,255,0.8); }
}

/* Billegés (JS aktiválja) */
.animate-wiggle {
  animation: wiggle 0.9s ease;
}
@keyframes wiggle {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  50% { transform: rotate(-2deg); }
  75% { transform: rotate(1.5deg); }
  100% { transform: rotate(0deg); }
}

/* Kaparható réteg (canvas) */
.scratch-cover {
  position: absolute;
  inset: 0;
  cursor: crosshair;
}

/* Popup szövegek */
#scratchResult {
  font-size: 20px;
  margin-top: 15px;
  line-height: 1.6;
  color: #333;
}

#scratchCode {
  display: inline-block;
  background: #212121;
  color: #fff;
  font-weight: bold;
  padding: 10px 18px;
  border-radius: 8px;
  margin: 12px 0;
  letter-spacing: 1px;
  font-size: 18px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

/* Gombok */
#closeScratch, #cancelScratch {
  margin-top: 20px;
  padding: 10px 22px;
  background: #ff7b00;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
  font-size: 16px;
}
#closeScratch:hover, #cancelScratch:hover {
  background: #e86800;
}

/* Mobilbarát elrendezés */
@media (max-width: 700px) {
  .scratch-cards {
    gap: 12px;
  }
  .scratch-card {
    width: 120px;
    height: 180px;
  }
  .scratch-card .card-text {
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  .scratch-card {
    width: 100px;
    height: 150px;
  }
  .scratch-card .card-text {
    font-size: 14px;
  }
  #scratchPopup h2 {
    font-size: 18px;
  }
}
/* ==== Kiegészítés: látható fekete felirat és kupon stílus ==== */
.scratch-card .card-text {
  color: #000 !important;
  font-weight: bold;
  text-shadow: none !important;
  font-size: 20px;
}

.hidden-prize {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #000;
  font-size: 18px;
  font-weight: 600;
  pointer-events: none;
  z-index: 5;
}
/* ==== Kaparós sorsjegy kiegészítés (fekete szöveg + középre igazított kupon) ==== */
.scratch-card .card-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 20px;
  color: #000;
  text-shadow: none;
  z-index: 3;
  pointer-events: none;
}

.hidden-prize {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #000;
  font-size: 18px;
  font-weight: 600;
  pointer-events: none;
  z-index: 2;
}
/* Interakció fixek */
.scratch-cover { z-index: 10; pointer-events: auto; }
.scratch-card .card-text, .scratch-card .hidden-prize { pointer-events: none !important; }
.scratch-card .card-text { color:#000 !important; font-weight:bold; text-shadow:none !important; }
.hidden-prize { opacity: 0; transition: opacity .3s ease; }