body {
    font-family: Arial, Helvetica, sans-serif;
    background-image: 
        linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
        url("../images/games/exploding_kittens/backgrounds/Intro_image.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    min-height: 100vh;
}

header {

    background-color: transparent;

    border-bottom: none;

    min-height: 180px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    background-image: url("../images/games/exploding_kittens/backgrounds/Top_instructions.png");

    background-size: 100% 95%;

    background-position: center;

    background-repeat: no-repeat;

}

/* ===========================
   SCOREBOARD
=========================== */

#scoreboard {

    display: flex;

    justify-content: center;

    gap: 20px;

    margin: 30px;

    flex-wrap: wrap;

    position: sticky;

    top: 0;
    
    z-index: 1000;

    background: #600e10;

}

.team-box {

    min-width: 190px;
    max-width: 250px;

    background-image: url("../images/games/exploding_kittens/backgrounds/Score_plank.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 10px;

    padding: 20px;

    text-align: center;

    transition: .3s;

}

.team-box h3 {

    margin-bottom: 10px;

}

.team-box p {

    font-size: 2rem;

    font-weight: bold;

}

.active-team {

    border: 4px solid #22c55e;

    transform: scale(1.05);

}

/*=============================
QUESTION GRID
=============================*/

#question-grid{

    display:grid;

    grid-template-columns:repeat(5, minmax(100px, 1fr));

    justify-items:center;

    gap:1rem;

}

.question-card{

    width: 220px;
    height: 320px;

    background-image: url("../images/games/exploding_kittens/cards/back_of_card.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius:15px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:clamp(4.2rem, 12vw, 8.8rem);

    font-weight:bold;

    cursor:pointer;

    transition:
        transform .6s ease,
        box-shadow .3s ease;

    user-select:none;

}

.question-card:not(.animating):hover {

    transform: translateY(-8px);
}

.used-card{

    background:#555;

    opacity:.45;

    cursor:default;

}

.selected-card{

    transform:scale(2.8)
              rotateY(180deg);

    z-index:999;

}

/*=============================
QUESTION OVERLAY
=============================*/

#question-overlay{

    position:fixed;

    inset:0;

    z-index: 2000;

    background:rgba(0,0,0,.75);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.4s;

}

#question-overlay.show{

    opacity:1;

    visibility:visible;

}

#question-card{

    width:1000px;
    height:600px;

    max-width:90%;

    background-image: url("../images/games/exploding_kittens/backgrounds/question_background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color:white;

    border-radius:20px;

    padding:40px;

    text-align:center;

    box-shadow:0 20px 40px rgba(0,0,0,.4);

    display:flex;
    flex-direction:column;
}

#instruction{

    flex:0 0 50px;

    height: 50px;

    background-image: url("../images/games/exploding_kittens/backgrounds/Top_instructions.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;

    margin-bottom:25px;

}

#question-box{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:20px;

    background-color: white;

    height:260px;

    width: 100%;


}

#question-text{

    font-size:2rem;

    text-align:center;

    color: black;

}

#question-image{

    max-width:100%;

    max-height:100%;

    object-fit:contain;

}

#answer-box{

    display:none;
    flex:0 0 50px;
    height: 50px;
    background-image: url("../images/games/exploding_kittens/backgrounds/answer_bar.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;

    font-size:1.8rem;

    margin:30px 0;


}

#question-buttons{

    flex:0 0 auto;

    display:flex;

    justify-content:center;

    gap:25px;

    cursor:pointer;

}

.image-btn {

    width:80px;
    height:80px;

    background-size:100% 100%;
    background-position:center;
    background-repeat:no-repeat;

    border:none;

    color:transparent;
    background-color:transparent;

}

#correct-btn{

    background-image:url("../images/games/exploding_kittens/buttons/correct_button.png");

}

#incorrect-btn{

    background-image:url("../images/games/exploding_kittens/buttons/incorrect_button.png");

}

#show-answer-btn{

    width:400px;

    background-image:url("../images/games/exploding_kittens/buttons/letter_block.png");
    

    color:white;

}

/*===========================
ANIMATION LAYER
===========================*/

#animation-layer{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:1500;

}

.flying-card{

    position:fixed;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#374151;

    color:white;

    border-radius:15px;

    font-size:2rem;

    font-weight:bold;

    z-index:1501;

    will-change:transform,left,top;

}

/*=============================
REWARD OVERLAY
=============================*/

#reward-overlay{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.75);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:2500;

}

#reward-overlay.show{

    opacity:1;

    visibility:visible;

}

/*=============================
REWARD WINDOW
=============================*/

#reward-window{

    width:1300px;

    max-width:95%;

    max-height:90%;

    overflow-y:auto;

    overflow-x:hidden;

    background-image: url("../images/games/exploding_kittens/backgrounds/question_background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius:20px;

    padding:40px;

    box-shadow:0 20px 60px rgba(0,0,0,.5);

}

#reward-window h2{

    text-align:center;

    margin-bottom:40px;

}

/*=============================
REWARD CONTENT
=============================*/

#reward-content{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:60px;

}

/*=============================
CARD DECK
=============================*/

#deck-area{

    position:relative;

    width:220px;

    height:320px;

}

.deck-card{

    position:absolute;

    width:180px;

    height:260px;

    border-radius:15px;

    background-image: url("../images/games/exploding_kittens/cards/back_of_card.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border:2px solid #222;

    transition:.4s;

}

.deck-card:nth-child(1){

    left:0;
    top:0;

}

.deck-card:nth-child(2){

    left:8px;
    top:8px;

}

.deck-card:nth-child(3){

    left:16px;
    top:16px;

}

.deck-card:nth-child(4){

    left:24px;
    top:24px;

}

.deck-card:nth-child(5){

    left:32px;
    top:32px;

}

/*=============================
RIGHT PANEL
=============================*/

#reward-info{

    display:flex;

    flex-direction:column;

    justify-content:center;

    height:100%;

}

#reward-display{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:80px;

    margin-top:20px;

}

#score-panel{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:320px;

}



/*=============================
DRAWN CARD
=============================*/

#drawn-cards{

    position:relative;

    width:220px;

    height:320px;

    border-radius:20px;

    background-image: url("../images/games/exploding_kittens/cards/back_of_card.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color:black;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:5rem;

    font-weight:bold;

    margin-bottom:30px;

    box-shadow:0 10px 30px rgba(0,0,0,.4);

}

.reward-card{

    position:absolute;

    width:220px;

    height:320px;

    left:0;
    top:0;

    transform-style:preserve-3d;

    transition:
        transform .8s ease,
        left .8s ease,
        top .8s ease;

}

.reward-card.move{

    left:-250px;

    top:0;

}

.reward-card.flip{

    transform:rotateY(180deg);

}

.reward-card-front,
.reward-card-back{

    position:absolute;

    width:100%;
    height:100%;

    backface-visibility:hidden;

}

.reward-card-back{

    transform:rotateY(0deg);

}

.reward-card-front{

    transform:rotateY(180deg);

}

.reward-card-image{

    width:220px;

    height:auto;

    user-select:none;

    pointer-events:none;

}

/*=============================
TEMP SCORE
=============================*/

#temporary-score{

    width:180px;

    text-align:center;

    font-size:6rem;

    font-weight:bold;

    color:#22c55e;

    margin-top:20px;

}

/*=============================
BUTTONS
=============================*/

#reward-buttons{

    display:flex;

    justify-content:center;

    gap:30px;

    margin-top:50px;

}

.top-deck-card{

    cursor:pointer;

}

.top-deck-card:hover{

    transform:translateX(8px);

}

/*=============================
SWAP OVERLAY
=============================*/

#swap-overlay{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.75);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:3000;

}

#swap-overlay.show{

    opacity:1;

    visibility:visible;

}

#swap-window{

    width:450px;

    background:#1f2937;

    border-radius:20px;

    padding:30px;

    text-align:center;

}

#swap-team-list{

    display:flex;

    flex-direction:column;

    gap:15px;

    margin:25px 0;

}

.swap-team-button{

    padding:18px;

    border:none;

    border-radius:10px;

    background:#374151;

    color:white;

    font-size:1.2rem;

    cursor:pointer;

    transition:.25s;

}

.swap-team-button:hover{

    background:#22c55e;

}

#lesson-info{

    margin-top:25px;

    padding:20px;

    background:#374151;

    border-radius:15px;

    text-align:left;

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

}

#lesson-info h3{

    margin-bottom:15px;

    color:#22c55e;

}

#lesson-info p{

    margin:8px 0;

    font-size:1.05rem;

}

@keyframes bombShake {

    0%   { transform: translate(0,0) rotateY(180deg); }

    10%  { transform: translate(-8px,0) rotateY(180deg); }

    20%  { transform: translate(8px,0) rotateY(180deg); }

    30%  { transform: translate(-10px,0) rotateY(180deg); }

    40%  { transform: translate(10px,0) rotateY(180deg); }

    50%  { transform: translate(-8px,0) rotateY(180deg); }

    60%  { transform: translate(8px,0) rotateY(180deg); }

    70%  { transform: translate(-5px,0) rotateY(180deg); }

    80%  { transform: translate(5px,0) rotateY(180deg); }

    90%  { transform: translate(-2px,0) rotateY(180deg); }

    100% { transform: translate(0,0) rotateY(180deg); }

}

.reward-card.bomb{

    animation:bombShake .6s ease;

}

@keyframes deckShake{

    0%{transform:translateX(0);}

    20%{transform:translateX(-6px);}

    40%{transform:translateX(6px);}

    60%{transform:translateX(-4px);}

    80%{transform:translateX(4px);}

    100%{transform:translateX(0);}

}

#deck.explode{

    animation:deckShake .5s;

}

@keyframes scoreFlash{

    0%{color:white;}

    50%{color:red;}

    100%{color:white;}

}

.score-hit{

    animation:scoreFlash .8s;

}

.reward-hit{

    animation:redFlash .35s;

}

@keyframes redFlash{

    0%{

        background:rgba(255,0,0,0);

    }

    50%{

        background:rgba(255,0,0,.25);

    }

    100%{

        background:rgba(255,0,0,0);

    }

}

#reward-footer{

    margin-top:60px;

    display:flex;

    justify-content:flex-end;

}

#return-btn{

    width:130px;
    height:100px;
    background-color:transparent;

    background-image:url("../images/games/exploding_kittens/buttons/back_button.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

#drawn-cards.special-intro{

    opacity:0;

    transform:translateY(80px);

}

@keyframes specialCardAppear{

    0%{

        opacity:0;
        transform:translateY(80px);

    }

    70%{

        opacity:1;
        transform:translateY(-12px);

    }

    100%{

        opacity:1;
        transform:translateY(0);

    }

}

#drawn-cards.special-animate{

    animation:specialCardAppear .8s ease-out forwards;

}

@keyframes holyGlow {

    0%{

        box-shadow:0 0 0 gold;

    }

    50%{

        box-shadow:0 0 60px gold;

    }

    100%{

        box-shadow:0 0 0 gold;

    }

}

#reward-window.special-event{

    animation:holyGlow 1s ease;

}

#temporary-score-label{
    text-align: center;
    font-size: 2rem;
}

.card-summary-image {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.card-summary-image img {
    width: 100px;
    height: auto;
}