/* ===== POPUP GLOBAL ===== */

.popup-overlay {
  position: fixed; /* IMPORTANT */
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);

  z-index: 999999; /* au dessus de TOUT (canvas, HUD, etc.) */
}

.popup-box {
  background: linear-gradient(180deg,#1b1f3a,#10142b);
  padding: 24px;
  border-radius: 14px;

  min-width: 280px;
  max-width: 90vw;

  box-shadow: 0 0 25px rgba(120,120,255,.3);
  text-align: center;
  
  position: relative;
  z-index: 1000000; /* Au-dessus de l'overlay */
}

.popup-title {
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 18px;
  color: #ffffff;
}

.popup-input {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  border: none;
  margin-bottom: 14px;
}

.popup-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
/* ===== INPUT POPUP NOCTURNE ===== */

.popup-input {
  width: 100%;
  padding: 10px 14px;

  background: rgba(20, 24, 50, 0.9);
  color: #ffffff;

  border: 1px solid rgba(120, 140, 255, 0.35);
  border-radius: 8px;

  outline: none;

  font-size: 15px;
  text-align: center;

  transition: 0.2s ease;
}

/* placeholder */
.popup-input::placeholder {
  color: rgba(255,255,255,0.35);
}

/* focus (quand tu écris) */
.popup-input:focus {
  border-color: #7a8cff;
  box-shadow: 0 0 10px rgba(120,140,255,0.6);
  background: rgba(25, 30, 65, 1);
}
.popup-box {
  backdrop-filter: blur(10px);
}

.popup-cancel, .popup-ok {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.popup-cancel {
  background: rgba(60, 60, 80, 0.8);
  color: #ffffff;
}

.popup-cancel:hover {
  background: rgba(80, 80, 100, 0.9);
}

.popup-ok {
  background: linear-gradient(90deg, #5a7aff, #7a8cff);
  color: #ffffff;
}

.popup-ok:hover {
  background: linear-gradient(90deg, #6a8aff, #8a9cff);
  box-shadow: 0 0 12px rgba(120, 140, 255, 0.5);
}

/* ===== RESPONSIVE POPUP ===== */

/* 📱 MOBILE PORTRAIT */
@media (max-width: 480px) {
  .popup-box {
    padding: 18px;
    min-width: 260px;
    max-width: 85vw;
  }

  .popup-title {
    font-size: 0.95rem;
  }

  .popup-input {
    padding: 9px 12px;
    font-size: 14px;
  }

  .popup-cancel, .popup-ok {
    padding: 8px 16px;
    font-size: 13px;
  }
}

/* 📱 MOBILE PAYSAGE */
@media (min-width: 481px) and (max-width: 768px) {
  .popup-box {
    padding: 20px;
    min-width: 300px;
  }

  .popup-cancel, .popup-ok {
    padding: 9px 18px;
  }
}

/* 💻 TABLETTE */
@media (min-width: 769px) and (max-width: 1024px) {
  .popup-box {
    padding: 26px;
    min-width: 320px;
    max-width: 500px;
  }

  .popup-title {
    font-size: 1.1rem;
  }

  .popup-input {
    font-size: 16px;
  }
}

/* 🖥 DESKTOP */
@media (min-width: 1025px) {
  .popup-box {
    max-width: 450px;
  }

  .popup-cancel:active, .popup-ok:active {
    transform: scale(0.95);
  }
}

/* ===== CJ REWARD POPUP ===== */
.cj-popup {
    position: fixed;
    bottom: 80px;
    right: 30px;
    font-size: 20px;
    color: #b78cff;
    text-shadow: 0 0 8px #a060ff;
    animation: cjFade 1.2s ease-out forwards;
    pointer-events: none;
    z-index: 9999;
}

@keyframes cjFade {
    0% { opacity: 0; transform: translateY(20px); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-20px); }
}

.rotate-warning {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, #1a0f2e, #090015);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
  color: #ffffff;
  font-size: 20px;
  text-align: center;
}

@media screen and (orientation: landscape) and (max-width: 1024px) {
  body::before{
    content:"🔄 Remets ton téléphone en mode portrait";
    position:fixed; inset:0;
    display:flex; align-items:center; justify-content:center;
    background: rgba(5, 0, 20, 0.95);
    color:#fff;
    font-size:18px;
    z-index:99999;
    text-align:center;
    padding:24px;
  }
  canvas, .ui, #game, #hud { display:none !important; }
}