:root {
    --retro-green: #2e8b57;
    --retro-dark-green: #1e5b38;
    --retro-text: #ffffff;
    --retro-shadow: #000000;
}

body {
    font-family: 'Press Start 2P', cursive;
    background-color: #2e4d35;
    /* Fallback */
    background-image:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
    color: #fff;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    text-align: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.3);
    border: 4px solid var(--retro-text);
    box-shadow: 8px 8px 0px var(--retro-shadow);
    max-width: 600px;
    width: 90%;
}

.title {
    font-size: 2rem;
    margin-bottom: 3rem;
    text-shadow: 4px 4px 0px var(--retro-shadow);
    line-height: 1.5;
}

.menu {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

.retro-btn {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.2rem;
    padding: 1rem 2rem;
    background-color: var(--retro-text);
    color: var(--retro-shadow);
    border: 4px solid var(--retro-shadow);
    cursor: pointer;
    box-shadow: 4px 4px 0px var(--retro-shadow);
    transition: transform 0.1s, box-shadow 0.1s;
    width: 100%;
    max-width: 300px;
}

.retro-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--retro-shadow);
}

.retro-btn:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px var(--retro-shadow);
}

.instructions {
    margin-top: 2rem;
    text-align: left;
    line-height: 1.6;
    font-size: 0.9rem;
    border-top: 2px dashed var(--retro-text);
    padding-top: 1rem;
    overflow: hidden;
    max-height: 500px;
    /* Arbitrary max-height for transition */
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, margin 0.3s;
}

.instructions.hidden {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}