:root {
    --bg-color: #f0f4f8;
    /* Soft Cloud */
    --accent-color: #ffb703;
    /* Energetic Yellow */
    --secondary-accent: #fb8500;
    /* Energetic Orange */
    --box-color: #ffffff;
    --text-color: #333;
    --road-color: #d1d9e6;
}

/* Specific to Game 3 container to avoid global pollution if possible, 
   but original CSS used body. We'll wrap it or just use specific classes. 
   Given the file structure, we'll likely load this CSS only for game3.html 
   or scope it. Since game3.html is a separate page, we can keep it mostly as is,
   but we should be careful about body styles if game3.html inherits main.css.
   Let's check game1.html... it imports main.css and game.css.
   We will try to make these styles specific to the game container where possible,
   or just overwrite for this page.
*/

.game3-container {
    user-select: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
    position: relative;
    height: 600px;
    /* Fixed height for the game area */
    background-color: var(--bg-color);
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
    max-width: 800px;
    /* adjust as needed */
    display: flex;
    flex-direction: column;
}

/* Ported Styles with slight checks */

.screen {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s;
    background: transparent;
}

.hidden {
    display: none !important;
}

/* --- INTRO & ANIMATIONS --- */
.road {
    position: absolute;
    bottom: 0;
    width: 200%;
    height: 100px;
    background: repeating-linear-gradient(90deg,
            var(--road-color) 0,
            var(--road-color) 50px,
            #fff 50px,
            #fff 100px);
    animation: moveRoad 2s linear infinite;
}

@keyframes moveRoad {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100px);
    }
}

.character {
    font-size: 5rem;
    position: absolute;
    bottom: 60px;
    transition: all 0.5s;
}

#hero {
    left: 20%;
}

#gene-intro {
    right: 20%;
    transform: scaleX(-1);
}

.running {
    animation: bounce 0.5s infinite alternate;
}

@keyframes bounce {
    from {
        bottom: 60px;
    }

    to {
        bottom: 70px;
    }
}

/* --- GAME SCREEN --- */
.game3-header {
    position: absolute;
    top: 20px;
    width: 90%;
    display: flex;
    justify-content: space-between;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--secondary-accent);
    z-index: 10;
}

/* Gene Helper & Message Bubble */
.gene-helper {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 10px;
}

.gene-avatar {
    font-size: 3rem;
    margin-right: 15px;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.message-bubble {
    background: #74b9ff;
    color: white;
    padding: 15px;
    border-radius: 20px;
    border-bottom-left-radius: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    flex: 1;
    font-size: 1rem;
    line-height: 1.4;
    position: relative;
}

.puzzle-container {
    background: var(--bg-color);
    padding: 10px;
    border-radius: 15px;
}

.grid-3x3 {
    display: grid;
    grid-template-columns: repeat(3, 60px);
    grid-template-rows: repeat(3, 60px);
    gap: 5px;
    margin-bottom: 20px;
}

.cell {
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    border-radius: 8px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

.cell.question-mark {
    background: var(--accent-color);
    color: white;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.options-container {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.option-btn {
    width: 60px;
    height: 60px;
    background: white;
    border: 2px solid var(--road-color);
    border-radius: 10px;
    font-size: 2rem;
    cursor: pointer;
    transition: 0.2s;
}

.option-btn:hover {
    border-color: var(--accent-color);
    transform: translateY(-5px);
}

/* --- VICTORY --- */
#victory-screen {
    background: #1a1a1a;
    color: white;
    border-radius: 15px;
}

.fireworks {
    font-size: 3rem;
    animation: spin 5s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.hero-free {
    font-size: 6rem;
    margin: 30px;
    animation: runAway 2s forwards;
}

@keyframes runAway {
    0% {
        transform: translateX(-100px);
    }

    100% {
        transform: translateX(200px);
        opacity: 0;
    }
}

.message {
    font-size: 2rem;
}

#btn-restart {
    font-size: 2rem;
    background: none;
    border: 2px solid white;
    padding: 10px 20px;
    color: white;
    border-radius: 50px;
    cursor: pointer;
    margin-top: 20px;
    transition: 0.3s;
}

#btn-restart:hover {
    background: white;
    color: #1a1a1a;
}

.shake {
    animation: shake 0.5s;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

/* Feedback Overlay */
#feedback-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    z-index: 100;
    pointer-events: none;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    animation: popIn 0.5s forwards;
    font-weight: bold;
}

@keyframes popIn {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

/* Celebration Confetti */
.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ffd32a;
    animation: fall 2s linear forwards;
}

@keyframes fall {
    to {
        transform: translateY(100vh) rotate(720deg);
    }
}

/* Victory Rank */
.rank {
    font-size: 2rem;
    font-weight: bold;
    color: var(--accent-color);
    margin: 20px 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}