/* =====================================================
   PREDICTION PAGE
===================================================== */

.hero{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding:20px 0 60px;

}

.prediction-card{

    width:100%;

    max-width:1500px;

    background:rgba(255,255,255,.65);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.5);

    border-radius:34px;

    padding:50px;

    box-shadow:0 25px 60px rgba(0,0,0,.08);

    animation:fadePage .8s ease;

}

.prediction-card h1{

    text-align:center;

    font-family:var(--font-title);

    font-size:58px;

    margin-bottom:20px;

}

.prediction-text{

    max-width:900px;

    margin:0 auto;

    text-align:center;

    font-size:22px;

    line-height:1.8;

    color:var(--text-light);

}

.instruction{

    display:none;

    text-align:center;

    margin-top:35px;

    font-size:28px;

    font-weight:600;

    color:var(--gold-dark);

}

.counter{

    display:none;

    margin-top:20px;

    text-align:center;

    font-size:22px;

    color:var(--gold);

}

#deckArea{

    display:flex;

    flex-direction:column;

    align-items:center;

    margin-top:60px;

    gap:35px;

}

#deck{

    width:220px;

    transition:.5s;

}

#deck img{

    width:100%;

    display:block;

    filter:drop-shadow(0 20px 35px rgba(0,0,0,.25));

}

.shuffle{

    animation:shuffleDeck 1.4s ease-in-out;

}

@keyframes shuffleDeck{

    0%{transform:rotate(0deg);}

    20%{transform:translateX(-35px) rotate(-8deg);}

    40%{transform:translateX(35px) rotate(8deg);}

    60%{transform:translateX(-25px) rotate(-5deg);}

    80%{transform:translateX(25px) rotate(5deg);}

    100%{transform:translateX(0) rotate(0deg);}

}
/* =====================================================
   CARDS
===================================================== */

.cards-container{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:16px;

    margin-top:50px;

}

.card{

    width:120px;

    height:190px;

    cursor:pointer;

    transition:.35s;

    border-radius:14px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

    background:white;

}

.card img{

    width:100%;

    height:100%;

    object-fit:cover;

    user-select:none;

    pointer-events:none;

}

.card:hover{

    transform:translateY(-18px) scale(1.06);

}

.card.selected{

    transform:translateY(-30px);

    box-shadow:0 20px 45px rgba(185,147,74,.45);

}

.card.disabled{

    opacity:.18;

    pointer-events:none;

    transform:scale(.92);

}
/* =====================================================
   RESULT
===================================================== */

.prediction-result{

    display:none;

    margin-top:60px;

    animation:fadePage .8s ease;

}

.prediction-result h2{

    text-align:center;

    font-family:var(--font-title);

    font-size:48px;

    margin-bottom:40px;

}

.selected-cards{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:40px;

    margin-bottom:50px;

}

.selected-card{

    width:270px;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 20px 50px rgba(0,0,0,.18);

}

.selected-card img{

    width:100%;

    height:auto;

    max-height:70vh;

    object-fit:contain;

    display:block;

}

.prediction-item{

    background:white;

    border-radius:24px;

    padding:30px;

    margin-bottom:25px;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.prediction-item h3{

    font-size:30px;

    margin-bottom:15px;

    color:var(--gold-dark);

}

.prediction-item p{

    font-size:19px;

    line-height:1.9;

}
/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1100px){

.selected-cards{

flex-direction:column;

align-items:center;

}

.selected-card{

width:220px;

}

}

@media(max-width:768px){

.prediction-card{

padding:30px;

}

.prediction-card h1{

font-size:42px;

}

.prediction-text{

font-size:18px;

}

.cards-container{

    gap:14px;

}

.card{

    width:90px;

    height:140px;

}

.selected-card{

width:180px;

}

.prediction-item{

padding:20px;

}

}

.prediction-card > .hero-line{

    margin:0 auto 35px;

}