/* =====================================================
   CHESTS · Cassa, Badge, Animazioni, Layout
   ===================================================== */

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
}

.chests-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding: 30px 12px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.chests-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 520px;
  padding: 0;
  margin: 0 auto;
}

/* ===== SLOT ===== */
.chest-slot {
  aspect-ratio: 0.85 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px 6px 12px;
  gap: 6px;
  position: relative;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s, box-shadow 0.2s;
}

.chest-slot:active { transform: scale(0.97); }

.chest-slot[data-chest="normal"] { border-color: rgba(74, 222, 128, 0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 12px rgba(0,0,0,0.2), 0 0 20px rgba(74,222,128,0.15); }
.chest-slot[data-chest="coins"] { border-color: rgba(96, 165, 250, 0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 12px rgba(0,0,0,0.2), 0 0 20px rgba(96,165,250,0.15); }
.chest-slot[data-chest="legendary"] { border-color: rgba(251, 191, 36, 0.45); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 12px rgba(0,0,0,0.2), 0 0 25px rgba(251,191,36,0.25); animation: legendarySlot 3s ease-in-out infinite; }

@keyframes legendarySlot {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 12px rgba(0,0,0,0.2), 0 0 25px rgba(251,191,36,0.25); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 12px rgba(0,0,0,0.2), 0 0 40px rgba(251,191,36,0.5); }
}

/* ===== BADGE ===== */
.chest-count-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #1a1a2e;
  border: 2px solid #0f0f1e;
  z-index: 5;
  transition: transform 0.2s;
}

.chest-count-badge[data-type="normal"] { background: linear-gradient(135deg, #4ade80, #22c55e); box-shadow: 0 4px 12px rgba(74,222,128,0.4); }
.chest-count-badge[data-type="coins"] { background: linear-gradient(135deg, #60a5fa, #3b82f6); box-shadow: 0 4px 12px rgba(96,165,250,0.4); }
.chest-count-badge[data-type="legendary"] { background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 4px 12px rgba(251,191,36,0.5); }
.chest-count-badge.empty { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.4); box-shadow: none; }
.chest-count-badge.bump { animation: badgeBump 0.4s ease; }

@keyframes badgeBump {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.45); }
}

/* ===== CHEST ===== */
.chest {
  width: 100%;
  max-width: none;
  aspect-ratio: 1;
  flex-shrink: 1;
  min-height: 0;
  cursor: pointer;
  transition: transform 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chest:active { transform: scale(0.9); }
.chest.idle { animation: float 2.5s ease-in-out infinite; }
.chest.shake { animation: shake 0.5s ease; }
.chest.opened { animation: pop 0.6s ease forwards; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes shake { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-8deg) scale(1.05); } 40% { transform: rotate(8deg) scale(1.05); } 60% { transform: rotate(-6deg) scale(1.08); } 80% { transform: rotate(6deg) scale(1.08); } }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1.1); } }

.chest-emoji {
  font-size: clamp(48px, 15vw, 80px);
  line-height: 1;
  display: block;
  text-align: center;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.chest.locked { opacity: 0.45; filter: grayscale(0.8) drop-shadow(0 10px 20px rgba(0,0,0,0.3)); }
.chest.locked:active { transform: none; }

/* ===== LABEL ===== */
.chest-label { text-align: center; flex-shrink: 0; margin-top: auto; }
.chest-label-name { font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.95); letter-spacing: 0.5px; text-transform: uppercase; }
.chest-label-cost { font-size: 10px; color: rgba(255,255,255,0.55); margin-top: 3px; font-weight: 700; }
.chest-label-cost.timer { color: #4ade80; font-weight: 700; }

/* ===== HINT ===== */
.chest-hint {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(251,191,36,0.08) 0%, rgba(251,191,36,0.04) 100%);
  border: 1px solid rgba(251, 191, 36, 0.15);
  border-radius: 30px;
  max-width: 90%;
  flex-shrink: 0;
  line-height: 1.4;
}

/* ===== GLOW EFFETTI ===== */
.chest-slot[data-chest="normal"] .chest { animation: float 2.5s ease-in-out infinite, glowNormal 3s ease-in-out infinite; }
@keyframes glowNormal { 0%, 100% { filter: drop-shadow(0 10px 20px rgba(74,222,128,0.3)); } 50% { filter: drop-shadow(0 10px 30px rgba(74,222,128,0.6)); } }
.chest-slot[data-chest="legendary"] .chest { animation: float 2.5s ease-in-out infinite, glowLegendary 2s ease-in-out infinite; }
@keyframes glowLegendary { 0%, 100% { filter: drop-shadow(0 10px 20px rgba(251,191,36,0.5)); } 50% { filter: drop-shadow(0 10px 40px rgba(251,191,36,0.9)); } }

/* ===== RESPONSIVE FIX MOBILE ===== */

/* Per telefoni stretti (come Redmi A5) e in verticale */
@media (max-width: 600px) and (orientation: portrait) {
  .chests-area {
    padding: 10px 10px;
    gap: 20px;
    justify-content: flex-start; /* Inizia dall'alto invece che al centro */
    margin-top: 20px;
  }

  /* Le casse si mettono in verticale una sotto l'altra! */
  .chests-row {
    grid-template-columns: 1fr; /* 1 sola colonna */
    gap: 15px;
    max-width: 90%;
  }

  /* Rimpiccioliamo leggermente gli slot per farli stare tutti e 3 */
  .chest-slot {
    aspect-ratio: auto; /* Lasciamo che si adattino in altezza */
    padding: 10px 15px;
    flex-direction: row; /* Emoji a sinistra, testo a destra */
    justify-content: flex-start;
    gap: 15px;
    align-items: center;
  }

  .chest {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
  }

  .chest-emoji {
    font-size: 60px;
  }

  .chest-count-badge {
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    min-width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .chest-label {
    text-align: left;
    margin-top: 0;
    flex: 1;
  }

  .chest-label-name {
    font-size: 14px;
  }

  .chest-label-cost {
    font-size: 12px;
  }

  .chest-hint {
    margin-top: 10px;
    padding: 8px 16px;
  }
}

/* Tablet o schermi più larghi */
@media (min-width: 601px) {
  .chests-row {
    grid-template-columns: repeat(3, 1fr);
    max-width: 520px;
  }
}