body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #ffe6e6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

/* Prevent scrollbars only on pages that need it (main game) */
body.no-scroll {
    height: 100vh;
    overflow: hidden;
}

.container {
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 90%;
    width: 100%;
    margin: 20px;
    box-sizing: border-box;
}

h1 {
    color: #ff4d4d;
    margin-bottom: 2rem;
}

.buttons {
    position: relative; /* Needed for absolute positioning context if we wanted it, but using viewport for full runaway */
    display: flex;
    justify-content: center;
    gap: 100px;
    /* Ensure height is preserved so buttons don't collapse */
    min-height: 60px; 
}

button {
    box-sizing: border-box;
    font-size: 1.2rem;
    padding: 10px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.1s ease;
}

#yes-btn {
    background-color: #ff4d4d;
    color: white;
}

#yes-btn:hover {
    background-color: #e60000;
}

#no-btn {
    background-color: #ddd;
    color: #333;
    /* transition: all 0.2s ease; - As requested in GEMINI.md */
    transition: all 0.2s ease; 
}

/* Initial position for No button - slightly tricky with absolute. 
   Let's actually handle initial layout with JS or just keep it in flow initially 
   and switch to absolute on first hover, OR just set it absolute relative to body.
   For simplicity and "runaway" effect, absolute positioning on the body works best
   once it starts moving. But for initial layout, we might want it centered.
   
   However, the spec says "To achieve the 'unclickable' effect, the button uses absolute positioning."
*/

/* Resetting #no-btn for initial static layout to look nice next to Yes, 
   then JS will likely take over absolute positioning. 
   But wait, if it's absolute, it removes from flow. 
   Let's style it initially to be roughly in place, or handle layout in JS.
   Actually, let's keep it simple: Start static, make absolute on first hover?
   Or just place it manually. 
   
   Let's try to keep it simple:
   We will let the HTML flow place it initially. 
   BUT, the JS will likely set position: absolute when it moves.
*/

.celebration img {
    max-width: 100%;
    max-height: 300px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    margin-top: 20px;
}

.instructions-content {
    text-align: left;
    max-width: 500px;
}

.instructions-content code {
    background-color: #eee;
    padding: 2px 5px;
    border-radius: 3px;
    font-family: monospace;
}

.instructions-content pre {
    background-color: #eee;
    padding: 10px;
    border-radius: 5px;
    overflow-x: auto;
}

.back-link {
    display: inline-block;
    margin-top: 20px;
    color: #ff4d4d;
    text-decoration: none;
}

.links {
    margin-top: 1.5rem;
}

.links p {
    margin-bottom: 0.5rem;
}

.footer {
    position: fixed;
    bottom: 10px;
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
    color: #666;
}

.footer a {
    color: #ff4d4d;
    text-decoration: none;
    font-weight: bold;
}

.footer a:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .buttons {
        gap: 20px;
    }
}