@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');:root{--bg-gradient-start: #1a1a2e;--bg-gradient-end: #16213e;--container-bg: rgba(38, 43, 64, 0.8);--text-color: #e0e0ff;--text-secondary: #bd93f9;--neon-green: #50fa7b;--neon-pink: #ff79c6;--neon-yellow: #f1fa8c;--neon-blue: #8be9fd;--dark-gray: #44475a;--medium-gray: #6272a4;--border-color: var(--medium-gray);--button-bg: var(--dark-gray);--button-hover-bg: var(--medium-gray);--button-text: var(--text-color);--input-bg: var(--dark-gray);--input-border: var(--medium-gray);--input-text: var(--text-color);--color-form-0: #50fa7b;--color-form-1: #8be9fd;--color-form-2: #ffb86c;--color-form-3: #f1fa8c;--color-form-4: #ff79c6;--color-form-5: #bd93f9;--color-form-6: #ff5555;} *{box-sizing: border-box;margin: 0;padding: 0;} body{font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));color: var(--text-color);display: flex;flex-direction: column;min-height: 100vh;line-height: 1.6;overflow-x: hidden;} .main-content{flex-grow: 1;display: flex;justify-content: center;align-items: center;padding: 20px;} .game-container{max-width: 650px;width: 100%;padding: 30px;background-color: var(--container-bg);border-radius: 15px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);border: 1px solid var(--dark-gray);text-align: center;} h1{font-family: 'Orbitron', sans-serif;font-size: 2.5rem;margin-bottom: 25px;color: var(--text-color);text-shadow: 0 0 5px var(--neon-pink);} h1 .geek{color: var(--neon-green);} h1 .code{color: var(--neon-pink);} .game-active-area{display: flex;justify-content: center;align-items: flex-start;gap: 25px;flex-wrap: wrap;} #myCanvas, #nextFormCanvas{border: 2px solid var(--border-color);background-color: #0f101c;box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);border-radius: 5px;} #myCanvas{} #nextFormCanvas{background-color: transparent;border-color: var(--dark-gray);} .info-panel{display: flex;flex-direction: column;align-items: center;gap: 15px;min-width: 150px;} #scoringTable{width: 100%;border-collapse: collapse;margin-bottom: 10px;} #scoringTable td{padding: 8px 5px;text-align: left;font-size: 0.95rem;border-bottom: 1px dashed var(--dark-gray);} #scoringTable td:first-child{font-weight: bold;color: var(--text-secondary);} #scoringTable td:last-child{text-align: right;font-weight: bold;color: var(--neon-yellow);} .controls{display: flex;flex-direction: column;gap: 10px;width: 100%;} .control-button{background-color: var(--button-bg);color: var(--button-text);border: none;padding: 12px 20px;border-radius: 8px;font-size: 1rem;font-weight: bold;cursor: pointer;text-align: center;text-decoration: none;transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);width: 100%;} .control-button:hover{background-color: var(--button-hover-bg);transform: translateY(-2px);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);} .control-button:active{transform: translateY(0);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);} .control-button.paused{background-color: var(--neon-pink);color: var(--bg-gradient-start);} .control-button.paused:hover{background-color: #ff9ed7;} .instructions{font-size: 0.9rem;color: var(--text-secondary);margin-top: 10px;} .score-form-area{display: flex;flex-direction: column;align-items: center;gap: 15px;padding: 20px;border-top: 1px solid var(--dark-gray);margin-top: 20px;} .score-form-area h2{color: var(--neon-green);font-family: 'Orbitron', sans-serif;font-size: 1.8rem;} #form{display: flex;flex-direction: column;align-items: stretch;gap: 10px;width: 100%;max-width: 300px;} #form label{font-weight: bold;color: var(--text-secondary);text-align: left;margin-bottom: -5px;} #form input[type="text"], #form input[type="number"]{background-color: var(--input-bg);border: 1px solid var(--input-border);color: var(--input-text);padding: 10px;border-radius: 5px;font-size: 1rem;} #form input[readonly]{background-color: var(--dark-gray);cursor: not-allowed;} #submitButton, #playAgainButton{margin-top: 10px;background-color: var(--neon-green);color: var(--bg-gradient-start);} #submitButton:hover, #playAgainButton:hover{background-color: #80ffb8;} .site-footer{flex-shrink: 0;text-align: center;padding: 1.5rem 1rem;margin-top: 2rem;background-color: rgba(15, 16, 28, 0.7);color: var(--medium-gray);font-size: 0.85rem;border-top: 1px solid var(--dark-gray);} .footer-links{margin-bottom: 0.5rem;} .footer-links a{color: var(--text-secondary);text-decoration: none;margin: 0 8px;transition: color 0.3s ease;} .footer-links a:hover{color: var(--neon-pink);text-decoration: underline;} .footer-links span{margin: 0 3px;} .site-footer .geek{color: var(--neon-green);font-weight: bold;} .site-footer .code{color: var(--neon-pink);font-weight: bold;} .copyright{font-size: 0.8rem;} @media (max-width: 768px){.game-container{padding: 20px;} h1{font-size: 2rem;} .game-active-area{flex-direction: column;align-items: center;} .info-panel{width: 80%;max-width: 300px;margin-top: 20px;}} @media (max-width: 480px){body{font-size: 14px;} .main-content{padding: 10px;} .game-container{padding: 15px;} h1{font-size: 1.6rem;margin-bottom: 15px;} #myCanvas{} .info-panel{width: 90%;} .control-button{padding: 10px 15px;font-size: 0.9rem;} #scoringTable td{padding: 6px 3px;} .site-footer{padding: 1rem 0.5rem;font-size: 0.75rem;} .footer-links a, .footer-links span{margin: 0 4px;}}