/*
    CSS FILE FOR STYLING THE GAME
    ------------------------------------------------
    CSS (Cascading Style Sheets) is how you make a website look nice.
    This file styles the buttons, cards, and layout for a fun, readable
    Choose Your Own Adventure game.
    ------------------------------------------------
*/

/* Set a nice font-family for the whole body */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #1b1a23;
    color: #f8f9fa;
    min-height: 100vh;
}

/* Style for the cards containing fandom options */
.fandom-card {
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    border-radius: 10px;
    background-color: #222034;
    padding: 20px;
    text-align: center;
    transition: transform 0.1s;
}
.fandom-card:hover {
    transform: translateY(-4px) scale(1.03);
    background-color: #282647;
    cursor: pointer;
}
.fandom-icon {
    font-size: 2.6rem;
    margin-bottom: 10px;
}
.fandom-btn {
    margin-top: 16px;
}
.game-step {
    margin-top: 10px;
}

/* Story area styling */
#story-output {
    background: #24213a;
    border-radius: 8px;
    padding: 24px 18px;
    font-size: 1.15rem;
    min-height: 130px;
    margin-bottom: 14px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.18);
    color: #e5e7ef;
}

/* Style the choice buttons */
.choice-btn {
    font-size: 1.1rem;
    margin-bottom: 15px;
    background: linear-gradient(90deg,#8b4de7 0,#6246ea 100%);
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 13px 22px;
    box-shadow: 0 2px 6px rgba(90,62,180,0.17);
    width: 100%;
    transition: background 0.13s;
}
.choice-btn:hover, .choice-btn:focus {
    background: linear-gradient(90deg,#a46beb 0,#7e68e7 100%);
    color: #fdf6ff;
}

#loading-spinner {
    padding: 28px 0;
    font-size: 18px;
}

/* Ending style */
#step-end {
    text-align: center;
    padding: 30px 10px;
}

#restart-btn {
    margin-top: 22px;
}

/* Responsive: make everything stack vertically on mobile */
@media (max-width: 801px) {
    #story-output {
        padding: 15px 6px;
        font-size: 1.02rem;
    }
    .fandom-icon {
        font-size: 2.1rem;
    }
    .fandom-card {
        padding: 13px 7px;
    }
}