/* 1987 MicroProse phosphor-green on black aesthetic */
body {
    background-color: #000000;
    color: #00ff00;
    font-family: 'Courier New', monospace;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#game-container {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
}

#form-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #000000;
    border: 2px solid #00ff00;
    padding: 20px;
    box-shadow: 0 0 10px #00ff00;
}

h1 {
    margin-top: 0;
    text-shadow: 0 0 5px #00ff00;
    font-size: 1.5em;
}

p {
    margin: 10px 0;
}

#submit-button-container {
    margin: 20px 0;
}

#submit-button {
    background-color: #000000;
    color: #00ff00;
    border: 2px solid #00ff00;
    padding: 10px 20px;
    font-family: 'Courier New', monospace;
    font-size: 1.2em;
    cursor: pointer;
    transition: all 0.1s ease;
    position: relative;
    overflow: hidden;
}

#submit-button:hover {
    background-color: #003300;
    box-shadow: 0 0 10px #00ff00;
}

/* Submit button liquefaction effect */
.liquefying {
    background: linear-gradient(90deg, #00ff00 0%, #00ff00 50%, #000000 50%, #000000 100%);
    background-size: 200% 100%;
    animation: liquefy 0.5s linear infinite;
}

@keyframes liquefy {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Backward cursor effect */
.cursor-backward {
    animation: cursor-back 0.5s infinite;
}

@keyframes cursor-back {
    0% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    50% { transform: translateX(0); }
    75% { transform: translateX(2px); }
    100% { transform: translateX(0); }
}

/* Font kerning degradation */
.kerning-degrade-1 { letter-spacing: 0.02em; }
.kerning-degrade-2 { letter-spacing: 0.04em; }
.kerning-degrade-3 { letter-spacing: 0.06em; }
.kerning-degrade-4 { letter-spacing: 0.08em; }
.kerning-degrade-5 { letter-spacing: 0.1em; }
.kerning-degrade-6 { letter-spacing: 0.12em; }
.kerning-degrade-7 { letter-spacing: 0.14em; }
.kerning-degrade-8 { letter-spacing: 0.16em; }
.kerning-degrade-9 { letter-spacing: 0.18em; }
.kerning-degrade-10 { letter-spacing: 0.2em; }
.kerning-degrade-11 { letter-spacing: 0.22em; }
.kerning-degrade-12 { letter-spacing: 0.24em; }
.kerning-degrade-13 { letter-spacing: 0.26em; }
.kerning-degrade-14 { letter-spacing: 0.28em; }
.kerning-degrade-15 { letter-spacing: 0.3em; }
.kerning-degrade-16 { letter-spacing: 0.32em; }
.kerning-degrade-17 { letter-spacing: 0.34em; }
.kerning-degrade-18 { letter-spacing: 0.36em; }
.kerning-degrade-19 { letter-spacing: 0.38em; }
.kerning-degrade-20 { letter-spacing: 0.4em; }

/* Screen hard-lock effect */
.hard-lock {
    pointer-events: none;
    user-select: none;
}

/* Wet cardboard degradation effect */
.wet-cardboard {
    opacity: 0.8;
    filter: blur(1px);
    background: repeating-linear-gradient(
        45deg,
        rgba(0, 255, 0, 0.1),
        rgba(0, 255, 0, 0.1) 1px,
        rgba(0, 0, 0, 0.1) 1px,
        rgba(0, 0, 0, 0.1) 2px
    );
    animation: static 0.1s infinite;
}

@keyframes static {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-1px, -1px); }
    20% { transform: translate(1px, 1px); }
    30% { transform: translate(-1px, 1px); }
    40% { transform: translate(1px, -1px); }
    50% { transform: translate(0, 0); }
    60% { transform: translate(-1px, 0); }
    70% { transform: translate(1px, 0); }
    80% { transform: translate(0, 1px); }
    90% { transform: translate(0, -1px); }
    100% { transform: translate(0, 0); }
}

/* Text melting effect */
.text-melt {
    animation: melt 0.5s ease-in-out;
}

@keyframes melt {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(20px); }
}

#countdown-display {
    font-size: 2em;
    margin-top: 20px;
    text-shadow: 0 0 5px #00ff00;
}

#game-state-display {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    font-size: 0.9em;
    color: #008800;
}