/* ==========================================
   PACCHETTI, RARITÀ E LIVELLI (js/pacchetti.js)
   ========================================== */
:root {
    --rarita-comune: #b8c6cf;
    --rarita-rara: #3fa9ff;
    --rarita-epica: #b760ff;
    --rarita-leggendaria: #ffc83d;
}

/* Elementi che vengono nascosti dal gioco anche se il loro stile imposta un display */
.home-pacchetti[hidden],
.avviso-ospite[hidden],
.popup-progresso-carta[hidden],
.popup-apertura-pacchetto[hidden],
#campo-password-autenticazione[hidden],
#campo-ricordami-autenticazione[hidden],
.btn-ospite-autenticazione[hidden],
.btn-migliora-carta[hidden],
.carta-apertura[hidden],
#btn-salta-apertura[hidden],
.riepilogo-apertura[hidden] {
    display: none !important;
}

/* ---------- Posti nella home, sotto i pulsanti ---------- */
.home-pacchetti {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 10px;
    width: min(340px, calc(100% - 24px));
    transform: translateX(-50%);
}

.posti-pacchetti {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.posto-pacchetto {
    position: relative;
    min-width: 0;
    height: 66px;
    margin: 0;
    padding: 4px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    border: 2px solid rgba(156, 241, 255, 0.75);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(40, 92, 160, 0.82), rgba(38, 32, 104, 0.88));
    box-shadow: 0 0 10px rgba(73, 193, 255, 0.35);
    color: #ecf8ff;
    font-weight: 900;
    line-height: 1.05;
    cursor: pointer;
}

.posto-pacchetto.vuoto {
    border-style: dashed;
    border-color: rgba(156, 241, 255, 0.4);
    background: rgba(6, 18, 45, 0.55);
    box-shadow: none;
    color: rgba(198, 244, 255, 0.7);
    cursor: default;
}

.posto-icona {
    font-size: 1.35rem;
    line-height: 1;
}

.posto-pacchetto.vuoto .posto-icona {
    font-size: 1rem;
}

.posto-nome {
    font-size: 0.6rem;
    text-transform: uppercase;
}

.posto-testo {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.56rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.posto-pacchetto.vuoto .posto-testo {
    white-space: normal;
    font-size: 0.5rem;
    font-weight: 700;
}

.posto-pacchetto.pacchetto-bronzo { border-color: #d98b4b; }
.posto-pacchetto.pacchetto-argento { border-color: #d7e3ec; }
.posto-pacchetto.pacchetto-oro { border-color: #ffc83d; }
.posto-pacchetto.pacchetto-leggendario { border-color: #ff7af0; }

.posto-pacchetto.in-apertura .posto-testo {
    color: #ffe28c;
}

.posto-pacchetto.pronto {
    background: linear-gradient(180deg, rgba(255, 196, 61, 0.95), rgba(214, 111, 28, 0.95));
    animation: pacchetto-pronto 1.1s ease-in-out infinite;
}

.posto-pacchetto.pronto .posto-testo {
    font-size: 0.72rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

@keyframes pacchetto-pronto {
    0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 200, 61, 0.5); }
    50% { transform: scale(1.06); box-shadow: 0 0 20px rgba(255, 200, 61, 0.95); }
}

.avviso-pacchetti {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 6px);
    margin: 0;
    padding: 5px 8px;
    border-radius: 8px;
    background: rgba(5, 14, 38, 0.9);
    color: #ffe28c;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.avviso-pacchetti:empty {
    display: none;
}

/* ---------- Apertura ---------- */
.popup-apertura-pacchetto {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: 16px;
}

.apertura-pannello {
    position: relative;
    z-index: 1;
    width: min(340px, 100%);
    padding: 18px 16px 16px;
    border: 2px solid rgba(151, 241, 255, 0.9);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(21, 65, 105, 0.98), rgba(32, 35, 91, 0.98));
    box-shadow: 0 0 28px rgba(54, 214, 255, 0.6);
    text-align: center;
}

.apertura-pannello h2 {
    margin: 0;
    color: #ffe28c;
    font-size: 1.1rem;
}

.contatore-apertura {
    margin: 4px 0 12px;
    color: #cdefff;
    font-size: 0.8rem;
}

.carta-apertura {
    min-height: 290px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    perspective: 700px;
}

.pacchetto-chiuso {
    width: 150px;
    height: 200px;
    display: grid;
    place-items: center;
    border: 3px solid #ffe28c;
    border-radius: 16px;
    background: radial-gradient(circle at 50% 30%, rgba(255, 236, 170, 0.5), rgba(88, 60, 190, 0.95));
    font-size: 4.5rem;
    animation: pacchetto-pronto 1.1s ease-in-out infinite;
}

.pacchetto-chiuso.pacchetto-iniziale {
    border-color: #9df4ff;
    background: radial-gradient(circle at 50% 30%, rgba(209, 249, 255, 0.55), rgba(41, 86, 176, 0.95));
}

#btn-salta-apertura {
    margin-top: 10px;
}

.carta-ricevuta {
    --colore-rarita: var(--rarita-comune);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 5px;
    border: 2px solid var(--colore-rarita);
    border-radius: 10px;
    background: rgba(5, 14, 38, 0.7);
    box-shadow: 0 0 14px color-mix(in srgb, var(--colore-rarita) 60%, transparent);
    color: #fff;
}

.carta-ricevuta.rarita-rara { --colore-rarita: var(--rarita-rara); }
.carta-ricevuta.rarita-epica { --colore-rarita: var(--rarita-epica); }
.carta-ricevuta.rarita-leggendaria { --colore-rarita: var(--rarita-leggendaria); }

.carta-ricevuta img {
    width: 100%;
    aspect-ratio: 17 / 27;
    object-fit: cover;
    border-radius: 7px;
}

.carta-ricevuta strong {
    font-size: 0.62rem;
    line-height: 1.1;
}

.carta-ricevuta .rarita-testo {
    color: var(--colore-rarita);
    font-size: 0.55rem;
    font-weight: 900;
}

.carta-ricevuta.grande {
    width: 160px;
    animation: gira-carta 0.5s ease-out;
}

.carta-ricevuta.grande strong {
    font-size: 0.95rem;
}

.carta-ricevuta.grande .rarita-testo {
    font-size: 0.8rem;
}

.carta-ricevuta.grande.rarita-epica,
.carta-ricevuta.grande.rarita-leggendaria {
    animation: gira-carta 0.5s ease-out, brilla-carta 1.4s ease-in-out 0.5s infinite;
}

.dettaglio-ricevuta {
    color: #cdefff;
    font-size: 0.7rem;
    line-height: 1.2;
}

.etichetta-nuova {
    position: absolute;
    z-index: 1;
    top: -9px;
    left: 50%;
    transform: translateX(-50%) rotate(-4deg);
    padding: 2px 8px;
    border-radius: 6px;
    background: #ff4f7a;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 900;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.riepilogo-apertura .etichetta-nuova {
    top: -7px;
    padding: 1px 4px;
    font-size: 0.5rem;
}

@keyframes gira-carta {
    from { transform: rotateY(90deg) scale(0.8); opacity: 0; }
    to { transform: rotateY(0) scale(1); opacity: 1; }
}

@keyframes brilla-carta {
    0%, 100% { box-shadow: 0 0 14px var(--colore-rarita); }
    50% { box-shadow: 0 0 30px var(--colore-rarita); }
}

.riepilogo-apertura {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 10px 8px;
    padding-top: 8px;
}

/* ---------- Collezione: rarità e livello ---------- */
.schermata-deck-artistica .lista-carte-deck .carta.rarita-rara { border-color: var(--rarita-rara); }
.schermata-deck-artistica .lista-carte-deck .carta.rarita-epica { border-color: var(--rarita-epica); }
.schermata-deck-artistica .lista-carte-deck .carta.rarita-leggendaria {
    border-color: var(--rarita-leggendaria);
    box-shadow: 0 0 8px rgba(255, 200, 61, 0.55);
}

.badge-livello-carta {
    position: absolute;
    z-index: 4;
    top: 4px;
    left: 4px;
    padding: 2px 4px;
    border: 1px solid rgba(226, 252, 255, 0.9);
    border-radius: 5px;
    background: rgba(8, 23, 52, 0.88);
    color: #fff;
    font-size: 0.52rem;
    font-weight: 900;
    line-height: 1;
}

.badge-livello-carta.migliorabile {
    border-color: #7dff9a;
    background: #1f9d4c;
    animation: pacchetto-pronto 1.1s ease-in-out infinite;
}

/* ---------- Scheda carta: doppioni e MIGLIORA ---------- */
.popup-progresso-carta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 8px;
}

.barra-doppioni {
    height: 8px;
    overflow: hidden;
    border: 1px solid rgba(184, 239, 255, 0.6);
    border-radius: 5px;
    background: rgba(4, 18, 45, 0.8);
}

.barra-doppioni-riempimento {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #36d17a, #b8ff6b);
    transition: width 0.3s ease;
}

.popup-doppioni-testo {
    color: #d9f7ff;
    font-size: 0.7rem;
}

.btn-migliora-carta {
    margin: 0;
    padding: 7px;
    border: 2px solid #9dffb7;
    border-radius: 9px;
    background: linear-gradient(90deg, #22b35a, #1d7d8f);
    color: #fff;
    font-weight: 900;
}

.btn-migliora-carta:disabled {
    border-color: rgba(184, 239, 255, 0.35);
    background: rgba(70, 87, 104, 0.8);
    color: rgba(255, 255, 255, 0.6);
    cursor: default;
}

.popup-info-pannello.carta-migliorata {
    animation: brilla-migliorata 0.7s ease-out;
}

@keyframes brilla-migliorata {
    0% { box-shadow: 0 0 60px #7dff9a; }
    100% { box-shadow: 0 0 28px rgba(54, 214, 255, 0.6); }
}

/* ---------- Fine partita e profilo ospite ---------- */
.pacchetto-fine-partita {
    margin: -8px 0 16px;
    color: #ffc83d;
    font-weight: 900;
}

.pacchetto-fine-partita:empty {
    display: none;
}

.avviso-ospite {
    position: relative;
    z-index: 1;
    width: min(360px, 100%);
    margin: 6px auto;
    padding: 5px 6px 5px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 200, 61, 0.8);
    border-radius: 10px;
    background: rgba(40, 28, 6, 0.75);
    color: #ffe9b0;
    font-size: 0.68rem;
    line-height: 1.2;
    text-align: left;
}

.avviso-ospite p {
    flex: 1;
    margin: 0;
}

.avviso-ospite .btn-salva-profilo {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
    padding: 6px 9px;
    font-size: 0.68rem;
}