/* Meta Ending Styles */

/* Canvas Transformation */
.game-finished {
    transform: scale(0.4) translateY(-20%);
    transition: transform 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy zoom */
    
    /* CRT Monitor Look */
    border-radius: 20px;
    box-shadow: 
        0 0 20px lime,
        inset 0 0 50px rgba(0,0,0,0.5);
    border: 10px solid #333;
    position: relative;
    z-index: 10; /* Above regular game UI but below desk overlay elements if needed */
}

/* Desk Overlay (Behind/Around Canvas) */
#desk-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #222, #000); /* Dark room */
    z-index: 5; /* Behind the popped-out canvas? No, canvas is part of DOM flow usually. 
                   If canvas is z-index 10, this should be behind? 
                   Actually, we want this to COVER the regular background but be behind the "monitor" canvas.
                   Since canvas is static usually, we might need to adjust z-indices. */
    opacity: 0;
    transition: opacity 1s;
    pointer-events: none; /* Let clicks pass through if needed */
}

/* Potato Dev */
#potato-dev {
    position: absolute;
    bottom: 50px;
    right: 150px;
    font-size: 150px;
    animation: bounce 2s infinite ease-in-out;
}
.dev-headset {
    position: absolute;
    top: -20px;
    left: 10px;
    font-size: 100px;
}
.dev-body {
    position: absolute;
    bottom: -50px;
    left: 20px;
    font-size: 120px;
    z-index: -1;
}

/* Coffee */
#dev-coffee {
    position: absolute;
    bottom: 100px;
    left: 100px;
    font-size: 80px;
    filter: drop-shadow(0 0 10px orange);
}

/* Keyboard */
#dev-keyboard {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 100px;
    opacity: 0.5;
}

/* Dialogue Box */
#ending-dialogue {
    position: absolute;
    bottom: 300px;
    right: 300px;
    background: white;
    color: black;
    padding: 20px;
    border-radius: 20px;
    border-bottom-right-radius: 0; /* Speech bubble tail ish */
    font-family: 'Courier New', monospace;
    font-size: 24px;
    max-width: 650px;
    box-shadow: 0 0 20px rgba(255,255,255,0.5);
    pointer-events: auto; /* Allow interaction if needed */
}

.sys-text {
    color: #00aa00; /* Terminal Green */
}
.dev-text {
    color: #aa5500; /* Potato Brown */
}

/* Subscribe Button */
#subscribe-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 100;
    padding: 30px 60px;
    font-size: 40px;
    font-weight: bold;
    color: white;
    background: linear-gradient(45deg, #ff0000, #ff5555);
    border: 5px solid white;
    border-radius: 10px;
    box-shadow: 0 0 50px red;
    cursor: pointer;
    animation: popIn 0.5s forwards, pulse 1s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

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

@keyframes pulse {
    0% { box-shadow: 0 0 30px red; }
    50% { box-shadow: 0 0 60px yellow; }
    100% { box-shadow: 0 0 30px red; }
}