body, html { height: 100%; margin: 0; font-family: 'Courier New', Courier, monospace; background-color: #111; color: #0f0; } .modal-content img { max-width: 100%; max-height: 90%; border: 1px solid #0f0; } #splash-screen { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: #111; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 100; transition: opacity 0.5s ease-out; } .spinning-symbol { font-size: 150px; color: #ff0; text-shadow: 0 0 20px #ff0; animation: spin 4s linear infinite; } #enter-button { margin-top: 40px; padding: 15px 30px; background: #0f0; color: #111; border: none; font-family: 'Courier New', Courier, monospace; font-weight: bold; font-size: 1.2rem; cursor: pointer; transition: all 0.2s ease; } #enter-button:hover { box-shadow: 0 0 20px #0f0; transform: scale(1.05); } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #game-container { width: 100%; max-width: 1000px; height: auto; margin: 2rem auto; position: relative; border: 3px solid #0f0; box-shadow: 0 0 15px #0f0; } #game-container img { display: block; width: 100%; height: auto; } #message-box { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 80%; background: rgba(0, 0, 0, 0.8); border: 2px solid #0f0; padding: 10px 20px; text-align: center; transition: opacity 0.3s ease; } #signup-form { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 500px; box-sizing: border-box; background: rgba(0, 0, 0, 0.95); border: 3px solid #0f0; padding: 2rem; text-align: center; box-shadow: 0 0 25px #0f0; } #signup-form h2 { color: #0f0; margin-top: 0; } #signup-form p { color: #0f0; } #signup-form label { display: block; margin-bottom: 10px; color: #0f0; } #signup-form input { width: 80%; padding: 10px; background: #222; border: 1px solid #0f0; color: #0f0; font-family: 'Courier New', Courier, monospace; } #signup-form button { margin-top: 20px; padding: 10px 20px; background: #0f0; color: #111; border: none; font-family: 'Courier New', Courier, monospace; font-weight: bold; font-size: 1rem; cursor: pointer; transition: all 0.2s ease; } #signup-form button:disabled { background: #555; color: #999; opacity: 0.7; } .hidden { display: none !important; } .modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 50; display: flex; justify-content: center; align-items: center; } .modal-content { background: #111; border: 3px solid #0f0; padding: 2rem; text-align: center; box-shadow: 0 0 25px #0f0; } .modal-content img { max-width: 100%; max-height: 400px; border: 1px solid #0f0; } .modal-content p { color: #0f0; margin-top: 1rem; } .clickable-modal { cursor: pointer; } .button-container { display: flex; justify-content: space-around; margin-top: 1.5rem; } .modal-button { padding: 10px 20px; background: #222; color: #0f0; border: 1px solid #0f0; font-family: 'Courier New', Courier, monospace; font-size: 1rem; cursor: pointer; } .modal-button.clicked { background: #0f0; color: #111; box-shadow: 0 0 15px #0f0; } #terminal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 100; padding: 2rem; box-sizing: border-box; } #terminal-screen { font-family: 'Courier New', Courier, monospace; color: #0f0; font-size: 1.2rem; } #terminal-screen p { margin: 5px 0; } .terminal-prompt { color: #0f0; } #terminal-input { background: transparent; border: none; color: #fff; font-family: 'Courier New', Courier, monospace; font-size: 1.2rem; width: 50%; } #terminal-input:focus { outline: none; box-shadow: 0 0 10px #0f0; } #terminal-response { margin-top: 1rem; color: #f00; } .terminal-question-text { color: #fff; margin-bottom: 1rem; white-space: pre-wrap; } .terminal-options { list-style-type: none; padding-left: 1.5rem; } .terminal-options li { margin-bottom: 8px; color: #0f0; } .ascii-art { font-size: 1.5rem; font-weight: bold; color: #0f0; white-space: pre; text-align: center; margin-bottom: 2rem; } #terminal-form.hidden { display: none; }