* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; background: #0a0a0f; font-family: 'Russo One', sans-serif; color: #fff; }
#scene-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; }
#ui-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 10; pointer-events: none; }
#ui-overlay > * { pointer-events: auto; }

.screen { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.screen.active { display: flex; }

/* MAIN MENU */
.main-menu { flex-direction: column; align-items: center; justify-content: center; background: rgba(5,5,15,0.85); }
.game-title { font-family: 'Press Start 2P', monospace; font-size: clamp(24px, 5vw, 56px); color: #ff4444; text-shadow: 0 0 20px #ff4444, 0 0 60px #ff000066, 4px 4px 0 #000; margin-bottom: 40px; letter-spacing: 4px; animation: titlePulse 2s ease-in-out infinite; }
@keyframes titlePulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.03)} }
.menu-btn { font-family: 'Press Start 2P', monospace; font-size: clamp(10px, 1.8vw, 16px); padding: 16px 40px; margin: 8px; background: linear-gradient(180deg, #2a2a3a 0%, #1a1a2a 100%); border: 3px solid #444; color: #fff; cursor: pointer; transition: all 0.15s; min-width: 320px; text-align: center; letter-spacing: 2px; }
.menu-btn:hover, .menu-btn.selected { background: linear-gradient(180deg, #ff4444 0%, #cc2222 100%); border-color: #ff6666; transform: scale(1.08); box-shadow: 0 0 30px #ff444466; }
.menu-btn:active { transform: scale(0.95); }

/* CHARACTER EDITOR */
.editor-screen { flex-direction: row; background: rgba(5,5,15,0.95); }
.editor-viewport { width: 60%; height: 100%; position: relative; }
.editor-panel { width: 40%; height: 100%; overflow-y: auto; padding: 20px; background: #0d0d1a; border-left: 3px solid #333; }
.editor-panel::-webkit-scrollbar { width: 8px; }
.editor-panel::-webkit-scrollbar-track { background: #111; }
.editor-panel::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
.editor-panel::-webkit-scrollbar-thumb:hover { background: #666; }
.panel-title { font-family: 'Press Start 2P', monospace; font-size: 14px; color: #ff4444; margin-bottom: 16px; }
.part-btn { display: inline-block; padding: 6px 10px; margin: 3px; font-size: 11px; font-family: 'Russo One', sans-serif; background: #1a1a2a; border: 2px solid #333; color: #aaa; cursor: pointer; transition: all 0.1s; }
.part-btn:hover { border-color: #666; color: #fff; }
.part-btn.active { background: #ff4444; border-color: #ff6666; color: #fff; }
.slider-group { margin: 12px 0; }
.slider-label { font-size: 12px; color: #888; margin-bottom: 4px; display: flex; justify-content: space-between; }
.slider-label span { color: #ff4444; }
input[type="range"] { width: 100%; accent-color: #ff4444; background: #222; height: 6px; -webkit-appearance: none; border-radius: 3px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; background: #ff4444; border-radius: 3px; cursor: pointer; }
input[type="color"] { width: 50px; height: 30px; border: 2px solid #444; background: none; cursor: pointer; }
.name-input { width: 100%; padding: 10px; font-family: 'Press Start 2P', monospace; font-size: 12px; background: #111; border: 2px solid #444; color: #fff; margin-bottom: 16px; }
.name-input:focus { outline: none; border-color: #ff4444; }
.action-btn { padding: 10px 20px; margin: 4px; font-family: 'Russo One', sans-serif; font-size: 13px; border: 2px solid #444; cursor: pointer; transition: all 0.1s; }
.btn-save { background: #22aa44; border-color: #33cc55; color: #fff; }
.btn-save:hover { background: #33cc55; transform: scale(1.05); }
.btn-delete { background: #aa2222; border-color: #cc3333; color: #fff; }
.btn-delete:hover { background: #cc3333; transform: scale(1.05); }
.btn-done { background: #4444ff; border-color: #6666ff; color: #fff; }
.btn-done:hover { background: #6666ff; transform: scale(1.05); }
.btn-preset { background: #333; border-color: #555; color: #ccc; }
.btn-preset:hover { background: #555; color: #fff; }
.btn-dup { background: #aa8800; border-color: #ccaa22; color: #fff; }
.btn-dup:hover { background: #ccaa22; }
.saved-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.gallery-item { width: 70px; height: 70px; background: #1a1a2a; border: 2px solid #333; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 9px; text-align: center; transition: all 0.1s; padding: 4px; overflow: hidden; word-break: break-all; }
.gallery-item:hover { border-color: #ff4444; transform: scale(1.1); }
.gallery-item.selected { border-color: #ff4444; box-shadow: 0 0 10px #ff444466; }

/* FIGHTER SELECT */
.select-screen { flex-direction: column; background: rgba(5,5,15,0.92); padding: 20px; }
.select-top { display: flex; justify-content: center; gap: 12px; margin-bottom: 16px; }
.mode-btn { padding: 10px 24px; font-family: 'Press Start 2P', monospace; font-size: 11px; background: #1a1a2a; border: 2px solid #444; color: #888; cursor: pointer; }
.mode-btn.active { background: #ff4444; border-color: #ff6666; color: #fff; }
.player-slots { display: flex; gap: 16px; flex: 1; justify-content: center; align-items: stretch; overflow: hidden; }
.player-slot { flex: 1; max-width: 280px; background: #111; border: 3px solid #333; padding: 12px; display: flex; flex-direction: column; align-items: center; }
.player-slot.p1 { border-color: #ff4444; }
.player-slot.p2 { border-color: #4488ff; }
.player-slot.p3 { border-color: #44cc44; }
.player-slot.p4 { border-color: #ffcc00; }
.slot-label { font-family: 'Press Start 2P', monospace; font-size: 14px; margin-bottom: 8px; }
.p1 .slot-label { color: #ff4444; }
.p2 .slot-label { color: #4488ff; }
.p3 .slot-label { color: #44cc44; }
.p4 .slot-label { color: #ffcc00; }
.fighter-carousel { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 8px 0; }
.carousel-item { padding: 4px 8px; font-size: 10px; background: #222; border: 2px solid #444; color: #aaa; cursor: pointer; }
.carousel-item.picked { border-color: #ff4444; color: #fff; background: #332; }
.ready-btn { margin-top: auto; padding: 8px 20px; font-family: 'Press Start 2P', monospace; font-size: 10px; background: #333; border: 2px solid #555; color: #888; cursor: pointer; }
.ready-btn.ready { background: #22aa44; border-color: #33cc55; color: #fff; animation: readyPulse 1s infinite; }
@keyframes readyPulse { 0%,100%{box-shadow:0 0 0 transparent} 50%{box-shadow:0 0 20px #22aa4466} }
.arena-row { display: flex; gap: 10px; justify-content: center; margin: 12px 0; overflow-x: auto; padding: 8px; }
.arena-item { padding: 8px 16px; font-size: 11px; background: #1a1a2a; border: 2px solid #333; color: #aaa; cursor: pointer; white-space: nowrap; }
.arena-item.active { border-color: #ff4444; color: #fff; background: #2a1a1a; }
.start-fight-btn { padding: 14px 40px; font-family: 'Press Start 2P', monospace; font-size: 14px; background: #444; border: 3px solid #555; color: #666; cursor: not-allowed; align-self: center; margin-top: 12px; }
.start-fight-btn.enabled { background: linear-gradient(180deg, #ff4444, #cc2222); border-color: #ff6666; color: #fff; cursor: pointer; animation: fightPulse 1.5s infinite; }
@keyframes fightPulse { 0%,100%{box-shadow:0 0 0 transparent} 50%{box-shadow:0 0 30px #ff444466} }

/* COMBAT HUD */
.combat-hud { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; }
.hud-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; }
.health-container { width: 35%; }
.health-bar { height: 22px; background: #222; border: 2px solid #444; position: relative; overflow: hidden; }
.health-fill { height: 100%; transition: width 0.3s; }
.health-fill.p1 { background: linear-gradient(90deg, #ff4444, #ff6666); }
.health-fill.p2 { background: linear-gradient(270deg, #4488ff, #66aaff); }
.health-label { font-family: 'Press Start 2P', monospace; font-size: 9px; position: absolute; top: 3px; padding: 0 6px; color: #fff; text-shadow: 1px 1px 0 #000; }
.stamina-bar { height: 8px; background: #111; border: 1px solid #333; margin-top: 2px; }
.stamina-fill { height: 100%; background: #aacc22; transition: width 0.2s; }
.round-info { font-family: 'Press Start 2P', monospace; font-size: 12px; color: #ffcc00; text-shadow: 0 0 10px #ffcc0066; text-align: center; }
.timer-display { font-family: 'Press Start 2P', monospace; font-size: 20px; color: #fff; }
.combo-popup { position: absolute; font-family: 'Press Start 2P', monospace; font-size: 24px; color: #ffcc00; text-shadow: 0 0 20px #ff8800, 2px 2px 0 #000; animation: comboPop 0.8s ease-out forwards; pointer-events: none; }
@keyframes comboPop { 0%{transform:scale(0.5);opacity:1} 30%{transform:scale(1.3)} 100%{transform:scale(1);opacity:0;transform:translateY(-40px)} }
.ko-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: 'Press Start 2P', monospace; font-size: clamp(32px,8vw,72px); color: #ff4444; text-shadow: 0 0 40px #ff0000, 0 0 80px #ff000066, 4px 4px 0 #000; animation: koSlam 0.5s ease-out; }
@keyframes koSlam { 0%{transform:translate(-50%,-50%) scale(3);opacity:0} 60%{transform:translate(-50%,-50%) scale(0.9)} 100%{transform:translate(-50%,-50%) scale(1);opacity:1} }
.hit-effect { font-family: 'Press Start 2P', monospace; position: absolute; font-size: 18px; color: #fff; text-shadow: 0 0 10px #ff4444; animation: hitPop 0.5s ease-out forwards; pointer-events: none; }
@keyframes hitPop { 0%{transform:scale(0.5) rotate(-10deg);opacity:1} 100%{transform:scale(1.2) rotate(5deg) translateY(-30px);opacity:0} }

/* RESULTS */
.results-screen { flex-direction: column; align-items: center; justify-content: center; background: rgba(5,5,15,0.9); gap: 20px; }
.winner-text { font-family: 'Press Start 2P', monospace; font-size: clamp(18px, 4vw, 36px); text-shadow: 0 0 30px currentColor; }
.stats-panel { background: #111; border: 2px solid #333; padding: 20px; min-width: 300px; }
.stats-panel table { width: 100%; font-size: 13px; }
.stats-panel td { padding: 6px 12px; border-bottom: 1px solid #222; }

/* OPTIONS */
.options-screen { flex-direction: column; align-items: center; background: rgba(5,5,15,0.95); padding: 40px; overflow-y: auto; }
.option-group { margin: 16px 0; width: 100%; max-width: 500px; }
.option-group h3 { font-family: 'Press Start 2P', monospace; font-size: 12px; color: #ff4444; margin-bottom: 12px; }
.option-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #1a1a2a; }
.option-row label { font-size: 13px; color: #aaa; }
.option-row select, .option-row input { background: #1a1a2a; border: 2px solid #333; color: #fff; padding: 6px 12px; font-family: 'Russo One', sans-serif; }

.footer-link { position: fixed; bottom: 8px; right: 12px; z-index: 100; }
.footer-link a { font-family: 'Press Start 2P', monospace; font-size: 8px; color: #444; text-decoration: none; transition: all 0.2s; }
.footer-link a:hover { color: #ff4444; text-shadow: 0 0 10px #ff444466; }

.mirror-toggle { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 12px; color: #888; }
.mirror-toggle input { accent-color: #ff4444; }
.section-divider { border: none; border-top: 1px solid #222; margin: 16px 0; }