@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* { box-sizing: border-box; }
body { margin: 0; padding: 0; overflow: hidden; background-color: #000; color: #ffffff; font-family: 'Press Start 2P', cursive; user-select: none; }
#init-screen { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.95); z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; }
.pulse-text { animation: pulse 1.5s infinite; color: #ffcc00; font-size: 24px; text-align: center; line-height: 1.5; }
@keyframes pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
#game-container { position: relative; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #0b0510; }

canvas { display: none; width: 100%; height: 100%; max-width: 100vw; max-height: 100vh; object-fit: contain; image-rendering: pixelated; box-shadow: 0px 0px 80px rgba(80, 20, 150, 0.5); background: #111; }
.crt-effect { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 99; display: none; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 4px, 6px 100%; box-shadow: inset 0 0 100px rgba(0,0,0,0.9); }
.screen-ui { position: absolute; width: 100%; height: 100%; display: none; flex-direction: column; justify-content: center; align-items: center; background: rgba(0,0,0,0.9); z-index: 10; text-align: center; }
.screen-ui.active { display: flex; } canvas.active { display: block; }
h1 { color: #fff; text-shadow: 5px 5px 0px #ff003c; margin-bottom: 20px; font-size: 40px;} h2 { color: #fff; text-shadow: 3px 3px 0px #8b00ff; margin-bottom: 20px;}
.btn-main { background: #111; border: 4px solid #fff; color: white; padding: 20px 40px; margin: 10px; font-family: inherit; font-size: 1.2rem; cursor: pointer; transition: 0.2s;} .btn-main:hover { background: #222; transform: scale(1.05); }
.btn-back { background: #330000; border-color: #ff0000; color: #ff6666; margin-top: 30px; font-size: 1rem; } .btn-back:hover { background: #ff003c; color: white; }
.btn-play { color: #00ff55; border-color: #00ff55; } .btn-local { color: #ff8800; border-color: #ff8800; } .btn-train { color: #ffcc00; border-color: #ffcc00; } .btn-controls { color: #00ddff; border-color: #00ddff; } .btn-settings { color: #ffea00; border-color: #ffea00; }
#combat-hud { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; pointer-events: none;} #combat-hud.active { display: block; }
.hud-wrapper { position: absolute; top: 20px; width: 45%; } #player1-hud { left: 40px; } #player2-hud { text-align: right; right: 40px;}
.player-name-text { font-size: 1.4rem; margin-bottom: 8px; text-shadow: 3px 3px 0 #000;}
.hud-container { background: rgba(0,0,0,0.85); border: 4px solid #ffffff; padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.hud-bar-background { width: 100%; height: 22px; background: #000; border: 2px solid #555; position: relative; }
.hud-bar-fill { height: 100%; width: 100%; transition: width 0.1s linear; }
.color-hp { background: #00ff55; } #player2-hud .color-hp { background: #ff2222; float: right;}
.color-guard { background: #ffcc00; } .color-parry { background: #00ffaa; } .color-special { background: #00ddff; } .color-ultimate { background: #a200ff; }
.hud-bar-text { position: absolute; width: 100%; text-align: center; top: 6px; font-size: 0.6rem; opacity: 0.9; color: #fff; z-index: 2; text-shadow: 1px 1px 2px #000;}
.info-panel { border: 2px solid #555; padding: 30px; text-align: left; font-size: 0.8rem; line-height: 2.2; max-width: 850px; margin-bottom: 20px; background: rgba(0,0,0,0.8); max-height: 75vh; overflow-y: auto; padding-right: 40px;}
.settings-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #444; padding-bottom: 10px; margin-bottom: 15px; }
.keybind-btn { background: #222; border: 2px solid #888; color: #fff; font-family: inherit; padding: 8px 12px; cursor: pointer; min-width: 100px; text-align: center; text-transform: uppercase; } .keybind-btn:hover { background: #444; } .keybind-btn.listening { background: #ffcc00; color: #000; }
.settings-expanded span { font-size: 0.7rem; color: #aaa;}