@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');*, *::before, *::after{box-sizing: border-box;} html, body{height: 100%;overflow: hidden;} body{display: flex;justify-content: center;align-items: center;margin: 0;padding: 20px;background: linear-gradient(135deg, #0a0a0a 0%, #1a0033 50%, #0a0a0a 100%);font-family: 'Orbitron', monospace;text-transform: uppercase;color: #00ffff;min-height: 100vh;overflow-x: auto;} .game-wrapper{display: flex;justify-content: center;align-items: flex-start;gap: 30px;} .machine-frame{background: linear-gradient(145deg, #2a2a2a, #1a1a1a);border-radius: 20px;padding: 20px;box-shadow: 0 0 50px rgba(255, 0, 255, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.5);border: 3px solid #666;height: 850px;display: flex;align-items: center;justify-content: center;} .container{position: relative;line-height: 0;border-radius: 10px;overflow: hidden;box-shadow: 0 0 30px rgba(0, 255, 255, 0.4), inset 0 0 10px rgba(0, 0, 0, 0.8);} .game-over-display{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 2rem;font-weight: 900;color: #ff00ff;text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 30px #ff00ff;text-align: center;opacity: 0;transition: opacity 0.5s ease;z-index: 100;background: rgba(0, 0, 0, 0.8);padding: 30px;border-radius: 15px;border: 2px solid #ff00ff;} .game-over-display.show{opacity: 1;} .game-over-display .sub-text{font-size: 1rem;color: #00ffff;margin-top: 15px;text-shadow: 0 0 10px #00ffff;} canvas{overflow: hidden;border-radius: 8px;box-shadow: 0 0 40px rgba(0, 255, 255, 0.6), inset 0 0 20px rgba(0, 0, 0, 0.8);} .combo-display{position: absolute;top: 70px;left: 50%;transform: translateX(-50%);font-size: 1.2rem;font-weight: 700;color: #ffff00;text-shadow: 0 0 10px #ffff00;opacity: 0;transition: opacity 0.3s ease;z-index: 10;} .combo-display.show{opacity: 1;animation: comboFlash 0.5s ease-out;} @keyframes comboFlash{0%{transform: translateX(-50%) scale(0.5);} 50%{transform: translateX(-50%) scale(1.2);} 100%{transform: translateX(-50%) scale(1);}} .control-panel{width: 380px;height: 850px;background: linear-gradient(145deg, #2a2a2a, #1a1a1a);border-radius: 20px;padding: 25px;box-shadow: 0 0 40px rgba(255, 0, 255, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.8);border: 3px solid #444;overflow: hidden;display: flex;flex-direction: column;} .panel-title{text-align: center;font-size: 1.7rem;font-weight: 900;color: #ff00ff;text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;margin-bottom: 18px;letter-spacing: 2px;border-bottom: 2px solid #333;padding-bottom: 10px;flex-shrink: 0;} .display-section{margin-bottom: 12px;background: linear-gradient(135deg, #1a1a1a, #0f0f0f);border: 2px solid #333;border-radius: 10px;padding: 10px 12px;position: relative;overflow: hidden;flex-shrink: 0;} .display-section::before{content: '';position: absolute;top: 0;left: 0;right: 0;height: 2px;background: linear-gradient(90deg, transparent, #00ffff, transparent);animation: scanline 3s linear infinite;} @keyframes scanline{0%, 100%{opacity: 0;} 50%{opacity: 1;}} .display-label{font-size: 0.8rem;color: #888;margin-bottom: 4px;letter-spacing: 1px;} .display-value{font-size: 1.9rem;font-weight: 700;text-shadow: 0 0 15px currentColor;min-height: 38px;display: flex;align-items: center;} .score-display{color: #00ffff;} .high-score-display{color: #ff00ff;} .balls-display{color: #ffff00;} .combo-value{font-size: 1.4rem;color: #ff6600;} .stats-grid{display: grid;grid-template-columns: 1fr 1fr;gap: 10px;margin-top: 15px;margin-bottom: auto;flex-shrink: 0;} .stat-item{background: linear-gradient(135deg, #0f0f0f, #1a1a1a);border: 1px solid #444;border-radius: 8px;padding: 8px;text-align: center;} .stat-label{font-size: 0.6rem;color: #666;margin-bottom: 3px;} .stat-value{font-size: 1rem;font-weight: 700;color: #00ffff;text-shadow: 0 0 8px currentColor;} .status-lights{display: flex;justify-content: space-around;margin: 12px 0;padding: 10px;background: linear-gradient(135deg, #0f0f0f, #1a1a1a);border-radius: 10px;border: 2px solid #333;flex-shrink: 0;} .status-light{width: 15px;height: 15px;border-radius: 50%;border: 2px solid #333;position: relative;} .status-light::after{content: '';position: absolute;top: 2px;left: 2px;right: 2px;bottom: 2px;border-radius: 50%;background: currentColor;opacity: 0.3;} .light-red{color: #ff0000;} .light-yellow{color: #ffff00;} .light-green{color: #00ff00;} .light-blue{color: #0066ff;} .status-light.active{box-shadow: 0 0 15px currentColor;animation: lightPulse 1s ease-in-out infinite alternate;} .status-light.active::after{opacity: 1;} @keyframes lightPulse{from{box-shadow: 0 0 15px currentColor;} to{box-shadow: 0 0 25px currentColor;}} .panel-controls{display: flex;justify-content: space-between;gap: 15px;margin-top: 20px;flex-shrink: 0;} .panel-btn{flex-grow: 1;background: transparent;border: 2px solid #666;color: #888;padding: 12px;border-radius: 8px;font-family: inherit;font-size: 0.9rem;font-weight: 700;cursor: pointer;transition: all 0.3s ease;text-transform: uppercase;} .panel-btn:hover{border-color: #00ffff;color: #00ffff;text-shadow: 0 0 10px #00ffff;box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);} .panel-btn.active{border-color: #00ffff;color: #00ffff;text-shadow: 0 0 10px #00ffff;} .modal{display: none;position: fixed;z-index: 1000;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0,0,0,0.7);animation: fadeIn 0.5s;} .modal-content{background: linear-gradient(145deg, #1a1a1a, #0f0f0f);margin: 10% auto;padding: 25px 30px;border: 3px solid #ff00ff;box-shadow: 0 0 30px rgba(255, 0, 255, 0.5);border-radius: 15px;width: 90%;max-width: 500px;position: relative;} .close-button{color: #aaa;position: absolute;top: 10px;right: 20px;font-size: 32px;font-weight: bold;transition: 0.3s;} .close-button:hover, .close-button:focus{color: #ff00ff;text-decoration: none;cursor: pointer;} .modal-content h4{color: #ff6600;font-size: 1.1rem;margin: 0 0 10px 0;text-shadow: 0 0 8px #ff6600;border-bottom: 1px solid #333;padding-bottom: 8px;} .modal-content h4:not(:first-child){margin-top: 20px;} .modal-content ul{list-style: none;padding: 0;margin: 0;} .modal-content li{padding: 5px 0;font-size: 0.9rem;color: #ccc;} .modal-content .key{color: #ffff00;font-weight: 700;text-shadow: 0 0 5px #ffff00;} @keyframes fadeIn{from{opacity: 0;} to{opacity: 1;}} @media (min-height: 0px){.game-wrapper{transform: scale(0.4);}} @media (min-height: 400px){.game-wrapper{transform: scale(0.5);}} @media (min-height: 600px){.game-wrapper{transform: scale(0.7);}} @media (min-height: 850px){.game-wrapper{transform: scale(1);}} @media (max-width: 1200px){.game-wrapper{flex-direction: column;gap: 20px;align-items: center;} .control-panel{width: 90%;max-width: 500px;order: 2;height: auto;} .machine-frame{order: 1;height: auto;}}