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

body {
    margin: 0; display: flex; justify-content: center; align-items: center;
    height: 100vh; background-color: #111;
    font-family: 'Press Start 2P', cursive; overflow: hidden; user-select: none;
}

/* --- CRT & CONTAINER --- */
.crt-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    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%; z-index: 9999; pointer-events: none;
    box-shadow: inset 0 0 100px rgba(0,0,0,0.9);
}

.game-container {
    position: relative; width: 1280px; height: 720px;
    background-color: #000; overflow: hidden;
    border: 4px solid #000; box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

/* --- STARTUP SCREEN --- */
#startup-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #000000; z-index: 5000;
    display: flex; justify-content: center; align-items: center;
    opacity: 1; transition: opacity 0.5s ease-out;
    cursor: pointer;
}
.sega-logo {
    font-family: 'Anton', sans-serif; font-size: 150px; color: #ff0000;
    letter-spacing: -10px; transform: scaleY(1.2);
    position: relative; overflow: hidden;
    animation: slide-logo 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}
.sega-logo::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.8), transparent);
    animation: shine-logo 2.0s infinite;
}
@keyframes slide-logo { 0% { transform: scaleY(1.2) translateY(50px); opacity: 0; } 100% { transform: scaleY(1.2) translateY(0); opacity: 1; } }
@keyframes shine-logo { 0% { left: -100%; } 100% { left: 100%; } }

/* --- MANIA MAIN MENU --- */
#main-menu {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000;
    display: flex; overflow: hidden;
    background: #fbc02d; /* Mania Yellow */
}
.mania-bg-layer {
    position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background-image: radial-gradient(#f57f17 20%, transparent 20%);
    background-size: 40px 40px; background-position: 0 0;
    opacity: 0.2; z-index: 0;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mania-sidebar {
    position: absolute; right: 0; top: 0; width: 45%; height: 100%;
    background: linear-gradient(to bottom, #0277bd, #00acc1);
    transform: skewX(-15deg) translateX(120px);
    border-left: 15px solid #fff;
    box-shadow: -10px 0 30px rgba(0,0,0,0.3);
    z-index: 1;
}
.mania-char-art {
    position: absolute; bottom: 0; left: 50px;
    width: 600px; height: 600px;
    background-image: url('sonicidle.gif'); 
    background-size: contain; background-repeat: no-repeat; background-position: bottom left;
    transform: scale(1.2); z-index: 2;
    filter: drop-shadow(10px 10px 0 rgba(0,0,0,0.2));
}
.mania-title {
    position: absolute; top: 50px; left: 50px;
    font-family: 'Anton', sans-serif; font-size: 80px; color: #0044cc;
    text-shadow: 4px 4px 0 #fff, 8px 8px 0 rgba(0,0,0,0.2);
    transform: skewX(-10deg) rotate(-5deg);
    z-index: 5; margin: 0;
}
.mania-menu-viewport {
    position: absolute; right: 50px; top: 0; bottom: 0;
    width: 500px;
    display: flex; align-items: center; 
    z-index: 10;
    pointer-events: none;
}
.mania-menu-scroll {
    display: flex; flex-direction: column; align-items: flex-end;
    width: 100%;
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mania-menu-item {
    position: relative;
    font-family: 'Anton', sans-serif; font-size: 36px; color: #fff;
    background: #111;
    padding: 15px 60px 15px 30px;
    margin: 8px 0;
    text-transform: uppercase;
    transform: skewX(-15deg);
    cursor: pointer;
    border: none;
    border-left: 10px solid transparent;
    transition: all 0.2s ease;
    width: 380px; text-align: right;
    box-shadow: 5px 5px 0 rgba(0,0,0,0.3);
    opacity: 0.6; pointer-events: auto;
}
.mania-menu-item span { display: block; transform: skewX(15deg); letter-spacing: 2px; }
.mania-menu-item.active {
    background: #d32f2f; 
    border-left: 15px solid #fff;
    transform: skewX(-15deg) translateX(-40px) scale(1.1);
    opacity: 1; z-index: 100;
    box-shadow: 15px 15px 0 rgba(0,0,0,0.4);
}
.mania-menu-item:hover { opacity: 1; }
/* Menu Colors */
.mania-menu-item.active[data-color="blue"] { background: #1565c0; }
.mania-menu-item.active[data-color="green"] { background: #2e7d32; }
.mania-menu-item.active[data-color="purple"] { background: #7b1fa2; }
.mania-menu-item.active[data-color="teal"] { background: #00838f; }
.mania-menu-item.active[data-color="yellow"] { background: #f9a825; color: #fff; }
.mania-menu-item.active[data-color="orange"] { background: #ef6c00; }
.mania-menu-item.active[data-color="pink"] { background: #e91e63; }
.mania-menu-item.active[data-color="gray"] { background: #607d8b; }

.copyright { position: absolute; bottom: 15px; right: 20px; color: #fff; font-size: 10px; z-index: 20; opacity: 0.8; }
.wipe-btn-container {
    position: absolute; bottom: 20px; left: 20px;
    cursor: pointer; z-index: 100;
    font-size: 10px; color: #d32f2f;
    background: rgba(255,255,255,0.8); padding: 5px;
    border: 2px solid #d32f2f;
}

/* --- OVERLAYS & UI --- */
.overlay-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 500; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.controls-container { display: flex; gap: 40px; }
.control-col { background: rgba(0,0,0,0.5); padding: 20px; border-radius: 10px; border: 2px solid #555; width: 300px; }
.key-row { margin: 15px 0; font-size: 14px; color: #ddd; display: flex; align-items: center; }
.key { display: inline-block; background: #eee; color: #111; padding: 4px 8px; border-radius: 4px; font-weight: bold; border-bottom: 3px solid #999; margin-right: 10px; min-width: 20px; text-align: center; }

#char-select { background: rgba(0, 0, 0, 0.92); z-index: 3000; }
.title-text { color: #ffd700; text-shadow: 4px 4px #0033cc; font-family: 'Anton', sans-serif; font-size: 60px; margin-bottom: 20px; }
.subtitle-text { font-family: 'Press Start 2P', cursive; font-size: 16px; color: #fff; margin-bottom: 40px; line-height: 1.5; }
.char-grid { display: flex; gap: 30px; }
.char-card { position: relative; width: 180px; height: 280px; border: 4px solid #444; background: #222; cursor: pointer; transition: 0.2s; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.char-card:hover { border-color: #ffd700; transform: translateY(-10px); background: #333; }
.char-portrait { width: 100%; height: 180px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.char-name { color: #fff; padding: 20px; font-size: 14px; }
.lock-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); color: #888; display: flex; justify-content: center; align-items: center; font-size: 20px; font-weight: bold; pointer-events: none; text-shadow: 2px 2px 0 #000; }
.char-card.locked { cursor: not-allowed; border-color: #333 !important; transform: none !important; }
.char-card:not(.locked) .lock-overlay { display: none; }

/* --- SETTINGS SCREEN STYLES --- */
.settings-container {
    width: 600px;
    background: rgba(0,0,0,0.9);
    border: 3px solid #607d8b;
    padding: 40px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    box-shadow: 0 0 20px rgba(96, 125, 139, 0.3);
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: 14px;
}

.setting-row label {
    width: 200px;
    text-align: left;
    color: #ffd700;
    text-shadow: 2px 2px #000;
}

/* Custom Range Slider */
input[type=range] {
    -webkit-appearance: none;
    width: 250px;
    background: transparent;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 10px;
    background: #fff;
    border: 2px solid #000;
    cursor: pointer;
    margin-top: -8px;
    box-shadow: 2px 2px 0 #000;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: #444;
    border: 1px solid #fff;
}

#music-val, #sfx-val {
    width: 60px;
    text-align: right;
    color: #00ffff;
}

/* Toggle Switch for Streamer Mode */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
    margin-right: 20px;
    cursor: pointer;
}

.toggle-switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #444;
    transition: .4s;
    border: 2px solid #fff;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border: 1px solid #000;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:checked + .slider:before {
    transform: translateX(30px);
}

.setting-desc {
    color: #888; 
    font-size: 10px; 
    margin-top: -20px;
    text-align: center;
}

/* --- GAME WORLD --- */
.sky { position: absolute; top: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, #004499 0%, #4488ff 50%, #ccccff 100%); z-index: 0; }
.clouds { position: absolute; top: 20px; left: 0; width: 200%; height: 250px; background-image: radial-gradient(circle, #fff 55%, transparent 60%), radial-gradient(circle, #fff 55%, transparent 60%), radial-gradient(circle, #fff 55%, transparent 60%); background-size: 120px 60px, 160px 80px, 100px 50px; background-position: 0 0, 50px 20px, 120px 10px; background-repeat: repeat-x; opacity: 0.9; z-index: 1; filter: drop-shadow(0px 4px 0px rgba(0,0,0,0.1)); }
.hills { position: absolute; bottom: 120px; width: 200%; height: 300px; z-index: 2; background: linear-gradient(135deg, #1e1e44 25%, transparent 25%) -50px 0, linear-gradient(225deg, #1e1e44 25%, transparent 25%) -50px 0, linear-gradient(315deg, #1e1e44 25%, transparent 25%), linear-gradient(45deg, #1e1e44 25%, transparent 25%); background-size: 100px 100px; background-repeat: repeat-x; background-position: bottom; opacity: 1.0; }
.hills::after { content: ''; position: absolute; bottom: -40px; left: -50px; width: 100%; height: 200px; background: linear-gradient(135deg, #4a2e00 25%, transparent 25%) -50px 0, linear-gradient(225deg, #4a2e00 25%, transparent 25%) -50px 0; background-size: 140px 140px; opacity: 1; }
.water-surface { position: absolute; bottom: 80px; width: 200%; height: 120px; background: repeating-linear-gradient(0deg, #0033aa 0px, #0033aa 4px, #0055cc 4px, #0055cc 8px, #2277ff 8px, #2277ff 12px); z-index: 3; box-shadow: 0 -5px 10px rgba(0,0,0,0.3); }
.water-surface::before { content: ''; position: absolute; bottom: 0; left: 15%; width: 20px; height: 250px; z-index: 10; background: repeating-linear-gradient(0deg, #6d4c41 0px, #6d4c41 20px, #4e342e 20px, #4e342e 24px); box-shadow: -40px -60px 0 -10px #2e7d32, 40px -60px 0 -10px #2e7d32, 0px -90px 0 0px #388e3c, -60px -20px 0 -10px #2e7d32, 60px -20px 0 -10px #2e7d32; border-radius: 4px; }
.waterfall { position: absolute; bottom: 80px; right: 25%; width: 50px; height: 300px; background: repeating-linear-gradient(180deg, #aaddff 0%, #0088ff 10%, #aaddff 20%); z-index: 2; border-left: 2px solid rgba(255,255,255,0.5); border-right: 2px solid rgba(255,255,255,0.5); animation: waterfall-cycle 0.5s linear infinite; } @keyframes waterfall-cycle { from { background-position: 0 0; } to { background-position: 0 100px; } }
.ground { position: absolute; bottom: 0; width: 100%; height: 90px; background-color: #5d3305; z-index: 10; border-top: 4px solid #000; }
.grass-top { height: 20px; width: 100%; background: repeating-linear-gradient(90deg, #00d000 0, #00d000 10px, #00a000 10px, #00a000 15px, #ffff00 15px, #ffff00 20px); border-bottom: 4px solid #3e2200; }
.checkerboard { width: 100%; height: 100%; background-image: linear-gradient(45deg, #7c4c11 25%, transparent 25%, transparent 75%, #7c4c11 75%, #7c4c11), linear-gradient(45deg, #7c4c11 25%, transparent 25%, transparent 75%, #7c4c11 75%, #7c4c11); background-color: #482902; background-size: 64px 64px; background-position: 0 0, 32px 32px; box-shadow: inset 0 10px 20px rgba(0,0,0,0.5); }

/* --- STAGE OBJECTS --- */
.stage { position: absolute; width: 100%; height: 100%; top: 0; left: 0; transition: transform 0.1s linear; transform-origin: center bottom; z-index: 15; }
.player { position: absolute; width: 60px; height: 60px; pointer-events: none; z-index: 20; transform-origin: bottom center; }
.sprite { position: absolute; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center bottom; image-rendering: pixelated; }

/* --- HUD & UI --- */
.ui { position: absolute; top: 30px; width: 100%; padding: 0 60px; display: flex; justify-content: space-between; z-index: 100; box-sizing: border-box; }
.hud-group { display: flex; flex-direction: column; gap: 4px; width: 350px; transform: scale(1.1); transform-origin: top left; }
.p2-hud { align-items: flex-end; transform-origin: top right; }
.row { display: flex; gap: 15px; align-items: center; }
.label { color: #ffd700; text-shadow: 2px 2px #000; font-size: 14px; text-transform: uppercase; }
.win-markers { display: flex; gap: 8px; }
.dot { width: 16px; height: 16px; border-radius: 50%; background: #333; border: 2px solid #fff; }
.dot.active { background: #d32f2f; box-shadow: 0 0 6px red; }
.health-bar-container { width: 100%; height: 24px; background: #444; border: 3px solid #fff; transform: skewX(-15deg); overflow: hidden; position: relative; box-shadow: 2px 2px 0 #000; }
.health-bar-container.low-hp { border-color: #ff0000; animation: flashBorder 0.2s infinite; } @keyframes flashBorder { 0% { border-color: #fff; } 50% { border-color: #ff0000; } 100% { border-color: #fff; } }
.health-bar-ghost { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #d32f2f; transition: width 1s linear 0.5s; z-index: 1; }
.health-bar { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #4488ff; transition: width 0.1s; z-index: 2; }
.stamina-bar-container { width: 80%; height: 8px; background: #222; border: 2px solid #fff; transform: skewX(-15deg); overflow: hidden; margin-top: 4px; }
.stamina-bar { width: 100%; height: 100%; background: #00ffff; transition: width 0.1s linear; }
.stamina-full { animation: flash-white 0.5s; } @keyframes flash-white { 0% { background: #fff; } 100% { background: #00ffff; } }
.center-hud { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.timer { font-size: 50px; color: #ffd700; text-shadow: 3px 3px #0033cc; background: rgba(0,0,0,0.5); padding: 5px 15px; border-radius: 5px; }
.timer-panic { color: #ff0000 !important; text-shadow: 0 0 10px red !important; animation: pulse-red 0.5s infinite; }

/* --- EFFECTS & PARTICLES --- */
#ready-go-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 400; display: flex; justify-content: center; align-items: center; }
.ready-text, .go-text, .time-text, .ko-text { font-size: 120px; color: #ffd700; text-shadow: 6px 6px #0033cc; display: none; }
.ready-text { animation: pop-in 0.5s; }
.go-text { color: #00FF00; text-shadow: 6px 6px #006400; animation: pop-in 0.5s; }
.time-text { color: #FF0000; text-shadow: 6px 6px #500000; animation: pop-in 0.5s; }
.ko-text { color: #FF0000; text-shadow: 6px 6px #000; animation: pop-in 0.2s forwards; font-size: 160px; }
@keyframes pop-in { 0% { transform: scale(0); opacity: 0; } 80% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } }
#damage-layer { position: absolute; width: 100%; height: 100%; top:0; left:0; pointer-events: none; z-index: 200; }
.damage-pop { position: absolute; font-size: 24px; color: #ffeb3b; text-shadow: 2px 2px #d32f2f; font-weight: bold; animation: floatUp 0.8s forwards; }
.crit-pop { position: absolute; font-size: 40px; color: #ff0000; text-shadow: 3px 3px #fff; font-weight: 900; font-style: italic; animation: bouncePop 0.6s forwards; z-index: 300; }
.combo-pop { position: absolute; font-size: 40px; color: #00ff00; text-shadow: 3px 3px #000; font-style: italic; animation: bouncePop 0.5s forwards; z-index: 300; left: 50%; top: 30%; transform: translateX(-50%); }
@keyframes floatUp { 0% { transform: translateY(0) scale(1); opacity: 1; } 50% { transform: translateY(-40px) scale(1.2); opacity: 1; } 100% { transform: translateY(-80px) scale(1); opacity: 0; } } @keyframes bouncePop { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); opacity: 0; } }
.dust-particle { position: absolute; width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.8; animation: fadeDust 0.5s forwards; pointer-events: none; z-index: 50; } @keyframes fadeDust { 100% { transform: scale(2) translateY(-20px); opacity: 0; } }
.afterimage { position: absolute; width: 60px; height: 60px; background-size: 85%; background-repeat: no-repeat; background-position: bottom center; opacity: 0.5; pointer-events: none; z-index: 10; filter: grayscale(100%) brightness(200%); animation: fadeGhost 0.3s forwards; }
@keyframes fadeGhost { to { opacity: 0; transform: scale(1.1); } }
.hit { animation: flash-hit 0.1s steps(2) 3; } @keyframes flash-hit { to { visibility: hidden; } }
.shadow-blob { position: absolute; bottom: 0px; left: 10px; width: 40px; height: 10px; background: rgba(0,0,0,0.5); border-radius: 50%; z-index: -1; transition: transform 0.1s; } .jumping .shadow-blob { transform: scale(0.5); opacity: 0.5; }
.invincible { animation: blink-invincible 0.1s infinite; } @keyframes blink-invincible { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.3; } }
.blocking { filter: brightness(0.7) contrast(1.3); }
.vignette { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, transparent 60%, rgba(255, 0, 0, 0.0) 100%); pointer-events: none; z-index: 150; transition: background 0.5s; } .vignette.active { background: radial-gradient(circle, transparent 50%, rgba(255, 0, 0, 0.4) 100%); animation: pulse-red 1s infinite; } @keyframes pulse-red { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
.flash-screen { animation: screen-flash-anim 0.1s forwards; } @keyframes screen-flash-anim { 0% { background-color: rgba(255,255,255,0.8); } 100% { background-color: transparent; } }
.glitch-effect { animation: glitch-anim 0.2s cubic-bezier(.25, .46, .45, .94) both infinite; } @keyframes glitch-anim { 0% { transform: translate(0); filter: none; } 25% { transform: translate(-2px, 2px); filter: drop-shadow(4px 0 0 red) drop-shadow(-4px 0 0 cyan); } 50% { transform: translate(2px, -2px); filter: drop-shadow(-4px 0 0 red) drop-shadow(4px 0 0 cyan); } 75% { transform: translate(-2px, -2px); filter: drop-shadow(2px 0 0 red) drop-shadow(-2px 0 0 blue); } 100% { transform: translate(0); filter: none; } }
.shockwave { position: absolute; width: 100px; height: 20px; border: 2px solid #fff; border-radius: 50%; background: transparent; opacity: 0.8; transform: scale(0); pointer-events: none; z-index: 18; animation: shockwave-expand 0.4s ease-out forwards; } @keyframes shockwave-expand { 0% { transform: scale(0.2); opacity: 0.8; border-width: 4px; } 100% { transform: scale(2.0); opacity: 0; border-width: 0px; } }
.impact-ring { position: absolute; width: 80px; height: 80px; border: 4px solid #FFD700; border-radius: 50%; transform: translate(-50%, -50%) scale(0.5); pointer-events: none; z-index: 250; box-shadow: 0 0 10px #ffaa00; animation: impact-pop 0.2s ease-out forwards; } @keyframes impact-pop { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2.0); opacity: 0; border-width: 0; } }
.speed-line { position: absolute; height: 2px; background: rgba(255, 255, 255, 0.5); border-radius: 2px; z-index: 40; pointer-events: none; transform: scaleX(0); animation: speedLineAnim 0.3s linear forwards; } @keyframes speedLineAnim { 0% { transform: scaleX(0); opacity: 0; } 20% { transform: scaleX(1); opacity: 1; } 100% { transform: translateX(100px) scaleX(0); opacity: 0; } }
.projectile { position: absolute; width: 40px; height: 12px; background: #ffeb3b; border: 2px solid #ff9800; border-radius: 6px; box-shadow: 0 0 15px #ffeb3b, 0 0 5px #fff; z-index: 90; pointer-events: none; } .projectile::after { content: ''; position: absolute; top: 2px; right: 4px; width: 20px; height: 4px; background: rgba(255,255,255,0.8); border-radius: 4px; }
.taunting { filter: contrast(1.5) brightness(1.2); transform: scale(1.1) !important; }
.taunt-bubble { position: absolute; width: 120px; color: #000; font-weight: bold; font-size: 12px; background: #fff; padding: 8px; border: 3px solid #000; border-radius: 15px; text-align: center; box-shadow: 4px 4px 0px rgba(0,0,0,0.5); z-index: 300; animation: pop-up-fade 1.0s forwards; pointer-events: none; } .taunt-bubble::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); border-width: 8px 8px 0; border-style: solid; border-color: #000 transparent transparent transparent; } @keyframes pop-up-fade { 0% { transform: translateY(10px) scale(0); opacity: 0; } 20% { transform: translateY(0) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-30px); opacity: 0; } }
.exhausted { filter: grayscale(0.5) hue-rotate(200deg) brightness(0.7) !important; }
.shaking { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; } @keyframes shake { 10%, 90% { transform: translate3d(-5px, 0, 0); } 20%, 80% { transform: translate3d(5px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-10px, 0, 0); } 40%, 60% { transform: translate3d(10px, 0, 0); } }
.respawn-beam { position: absolute; width: 10px; height: 800px; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,0)); bottom: 80px; animation: beam-anim 0.5s ease-out forwards; z-index: 30; } @keyframes beam-anim { 0% { width: 60px; opacity: 1; } 100% { width: 0px; opacity: 0; } }
.shield { position: absolute; width: 80px; height: 80px; border: 4px solid #00ffff; border-radius: 50%; top: -10px; left: -10px; box-shadow: 0 0 10px #00ffff; opacity: 0.6; z-index: 25; animation: shield-pulse 0.2s infinite; display: none; } .blocking .shield { display: block; } @keyframes shield-pulse { 0% { opacity: 0.4; transform: scale(0.95); } 100% { opacity: 0.7; transform: scale(1.05); } }
.hud-shake { animation: hud-shake-anim 0.3s ease-out; } @keyframes hud-shake-anim { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* --- SMASH OVERLAY --- */
.smash-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; overflow: hidden; display: none; align-items: center; justify-content: center; }
.smash-overlay.active { display: flex; }
.smash-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #222; z-index: 1; }
.smash-stripe { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(90deg, transparent 40%, rgba(255,255,255,0.9) 50%, transparent 60%); transform: rotate(-15deg) translateY(100%); z-index: 2; }
.smash-overlay.active .smash-stripe { animation: stripe-slash 0.5s cubic-bezier(0.1, 0.7, 1.0, 0.1) forwards 0.2s; } @keyframes stripe-slash { 0% { transform: rotate(-15deg) translateY(100%); } 100% { transform: rotate(-15deg) translateY(0); } }
.winner-pose { position: absolute; bottom: -50px; right: 100px; width: 500px; height: 500px; background-size: contain; background-repeat: no-repeat; background-position: bottom center; z-index: 3; opacity: 0; transform: translateX(100px) scale(1.5); }
.smash-overlay.active .winner-pose { animation: char-slide 0.6s ease-out forwards 0.5s; } @keyframes char-slide { 0% { opacity: 0; transform: translateX(200px) scale(1.5); } 100% { opacity: 1; transform: translateX(0) scale(1.5); } }
.winner-text-container { position: absolute; top: 30%; left: 50px; z-index: 4; font-family: 'Anton', sans-serif; font-style: italic; text-transform: uppercase; transform: skewX(-15deg); }
#smash-winner-name { font-size: 140px; color: #fff; margin: 0; line-height: 0.9; text-shadow: 10px 10px 0px rgba(0,0,0,0.5); opacity: 0; transform: translateX(-200px); }
.smash-overlay.active #smash-winner-name { animation: text-slam 0.4s cubic-bezier(0,1.2,1,1) forwards 0.7s; }
.wins-text { font-size: 100px; color: #FFD700; margin: 0; line-height: 0.9; text-shadow: 5px 5px 0px rgba(0,0,0,0.5); opacity: 0; transform: translateX(-200px); }
.smash-overlay.active .wins-text { animation: text-slam 0.4s cubic-bezier(0,1.2,1,1) forwards 0.9s; }
@keyframes text-slam { 0% { opacity: 0; transform: translateX(-200px) scale(2); } 100% { opacity: 1; transform: translateX(0) scale(1); } }
.win-quote { position: absolute; bottom: 150px; left: 60px; z-index: 5; font-size: 24px; color: #fff; background: rgba(0,0,0,0.7); padding: 10px; border-left: 5px solid #FFD700; opacity: 0; max-width: 600px; font-style: italic; }
.smash-overlay.active .win-quote { animation: fade-in 1s ease forwards 1.5s; }
.smash-btn { position: absolute; bottom: 60px; right: 60px; left: auto; z-index: 100; opacity: 0; background: #000; border: none; border-bottom: 6px solid #FFD700; padding: 25px 50px; transform: skewX(-15deg) translateY(50px); box-shadow: 10px 10px 0px rgba(0,0,0,0.5); transition: all 0.2s ease; cursor: pointer; }
.smash-btn span { display: block; transform: skewX(15deg); color: #fff; font-size: 28px; font-weight: bold; letter-spacing: 2px; text-shadow: none; }
.smash-btn:hover { background: #d32f2f; border-bottom-color: #fff; transform: skewX(-15deg) scale(1.1) translateY(0); box-shadow: 0 0 20px #ff0000; }
.smash-overlay.active .smash-btn { animation: btn-slide-up 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards 2.0s; } @keyframes btn-slide-up { to { opacity: 1; transform: skewX(-15deg) translateY(0); } } @keyframes fade-in { to { opacity: 1; } }

/* --- THEMES --- */
.theme-sonic .smash-bg { background: radial-gradient(circle, #0044cc, #000); } .theme-sonic .smash-stripe { background: linear-gradient(90deg, transparent 40%, rgba(255,255,255,0.9) 50%, rgba(0,100,255,0.5) 60%); } .theme-sonic .winner-pose { background-image: url('sonicdance.gif'); }
.theme-shadow .smash-bg { background: radial-gradient(circle, #8b0000, #000); } .theme-shadow .smash-stripe { background: linear-gradient(90deg, transparent 40%, rgba(255,255,255,0.9) 50%, rgba(255,0,0,0.5) 60%); } .theme-shadow .winner-pose { background-image: url('shadowdance.gif'); }
.theme-metal .smash-bg { background: radial-gradient(circle, #002266, #000); } .theme-metal .smash-stripe { background: linear-gradient(90deg, transparent 40%, rgba(200,200,200,0.9) 50%, rgba(255,215,0,0.5) 60%); } .theme-metal .winner-pose { background-image: url('metaldance.gif'); }
.theme-tails .smash-bg { background: radial-gradient(circle, #ffaa00, #5c3a00); } .theme-tails .smash-stripe { background: linear-gradient(90deg, transparent 40%, rgba(255,255,255,0.9) 50%, rgba(255,165,0,0.5) 60%); } .theme-tails .winner-pose { background-image: url('tailsdance.gif'); }
.theme-knuckles .smash-bg { background: radial-gradient(circle, #cc0000, #3d0000); } .theme-knuckles .smash-stripe { background: linear-gradient(90deg, transparent 40%, rgba(0, 255, 0, 0.8) 50%, rgba(255, 0, 0, 0.5) 60%); } .theme-knuckles .winner-pose { background-image: url('knucklesdance.gif'); transform: scale(1.8) translateX(-50px); }
.theme-eggman .smash-bg { background: radial-gradient(circle, #ff6600, #4d1f00); } .theme-eggman .smash-stripe { background: linear-gradient(90deg, transparent 40%, rgba(255,255,255,0.9) 50%, rgba(139,0,0,0.5) 60%); } .theme-eggman .winner-pose { background-image: url('eggmandance.gif'); transform: scale(1.5); }

/* --- TUTORIAL & EXTRAS (UPDATED) --- */
.tutorial-bubble { 
    position: absolute; 
    top: 130px; 
    left: 180px; 
    
    /* Visual Style */
    background: #fff; 
    border: 4px solid #0044cc; /* Sonic Blue */
    border-radius: 12px; 
    padding: 20px; 
    
    /* Text Style */
    font-family: 'Press Start 2P', cursive; 
    font-size: 14px; 
    color: #111; 
    line-height: 1.6; 
    white-space: pre-wrap; 
    text-align: left;
    
    /* Dimensions & FX */
    width: 450px; 
    z-index: 5000; 
    box-shadow: 
        inset 0 0 0 2px #fff, /* Inner White Outline */
        inset 0 0 0 4px #87cefa, /* Inner Light Blue Accent */
        8px 8px 0 rgba(0,0,0,0.5); /* Hard Retro Drop Shadow */
        
    /* Animation */
    animation: float-bubble 3s ease-in-out infinite;
    opacity: 0; 
    transition: opacity 0.2s; 
}

.tutorial-bubble.visible { 
    opacity: 1; 
    /* We combine the float animation with the pop-in */
    animation: bubble-pop 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28), float-bubble 3s ease-in-out infinite; 
}

/* The "Tail" of the speech bubble (Main/Sonic) */
.tutorial-bubble::after { 
    content: ''; 
    position: absolute; 
    top: 20px; 
    left: -24px; 
    border-width: 12px 24px 12px 0; 
    border-style: solid; 
    border-color: transparent #0044cc transparent transparent; /* Match Border Color */
}

/* The inner white part of the tail (to make it look hollow/connected) */
.tutorial-bubble::before { 
    content: ''; 
    position: absolute; 
    top: 24px; 
    left: -15px; 
    border-width: 8px 16px 8px 0; 
    border-style: solid; 
    border-color: transparent #fff transparent transparent; 
    z-index: 1; 
}

/* Player 2 (Shadow) Variant */
.tutorial-bubble.p2 { 
    left: auto; 
    right: 180px; 
    border-color: #d32f2f; /* Red Border for Shadow */
    box-shadow: 
        inset 0 0 0 2px #fff,
        inset 0 0 0 4px #ff8a80, /* Light Red Accent */
        -8px 8px 0 rgba(0,0,0,0.5); /* Shadow faces other way */
} 

/* Remove P1 tails */
.tutorial-bubble.p2::after, .tutorial-bubble.p2::before { display: none; }

/* Add P2 tails (Right side) */
.tutorial-bubble.p2-arrow::after { 
    content: ''; 
    position: absolute; 
    top: 20px; 
    right: -24px; 
    border-width: 12px 0 12px 24px; 
    border-style: solid; 
    border-color: transparent transparent transparent #d32f2f; /* Match P2 Border */
    display: block; 
}

.tutorial-bubble.p2-arrow::before { 
    content: ''; 
    position: absolute; 
    top: 24px; 
    right: -15px; 
    border-width: 8px 0 8px 16px; 
    border-style: solid; 
    border-color: transparent transparent transparent #fff; 
    z-index: 1; 
    display: block; 
}

/* ANIMATIONS */
@keyframes float-bubble {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes bubble-pop { 
    0% { transform: scale(0); opacity: 0; } 
    100% { transform: scale(1); opacity: 1; } 
}

.tutorial-sonic-sprite { position: absolute; left: 40px; top: 100px; width: 60px; height: 60px; background-image: url('sonicidle.gif'); background-size: contain; background-repeat: no-repeat; transform: scale(3.5); z-index: 4999; }
.tutorial-shadow-sprite { position: absolute; right: 40px; top: 100px; width: 60px; height: 60px; background-image: url('shadowidle.gif'); background-size: contain; background-repeat: no-repeat; transform: scale(3.5) scaleX(-1); z-index: 4999; }

/* SPRITE CLASSES */
.sonic-portrait { background-image: url('sonicidle.gif'); } .shadow-portrait { background-image: url('shadowidle.gif'); } .metal-portrait { background-image: url('metalidle.gif'); } .tails-portrait { background-image: url('tailsidle.gif'); } .knuckles-portrait { background-image: url('knucklesidle.gif'); } .eggman-portrait { background-image: url('eggmanidle.gif'); }
.sonic-idle { background-image: url('sonicidle.gif'); background-size: 85%; } .sonic-walk { background-image: url('sonicwalk.gif'); background-size: 85%; transform: skewX(-10deg); } .sonic-attack { background-image: url('sonicattack.gif'); background-size: contain; transform: scale(1.3); } .sonic-jump { background-image: url('sonicjump.gif'); background-size: 70%; background-position: center bottom 10px; } .sonic-special { background-image: url('sonicspecial.gif'); background-size: 85%; background-position: center bottom; }
.shadow-idle { background-image: url('shadowidle.gif'); background-size: 85%; } .shadow-walk { background-image: url('shadowwalk.gif'); background-size: 85%; transform: skewX(-10deg); } .shadow-attack { background-image: url('shadowattack.gif'); background-size: contain; transform: scale(1.1); mix-blend-mode: multiply; } .shadow-jump { background-image: url('shadowjump.gif'); background-size: 70%; background-position: center bottom 10px; }
.metal-idle { background-image: url('metalidle.gif'); background-size: 85%; transform: scale(1.3); transform-origin: bottom center; } .metal-walk { background-image: url('metalwalk.gif'); background-size: 85%; transform: scale(1.3) skewX(-10deg); transform-origin: bottom center;} .metal-attack { background-image: url('metalattack.gif'); background-size: contain; transform: scale(1.3); transform-origin: bottom center; } .metal-jump { background-image: url('metaljump.gif'); background-size: 70%; background-position: center bottom 10px; } .metal-special { background-image: url('metalspecial.gif'); background-size: contain; transform: scale(2.0); transform-origin: bottom center; }
.tails-idle { background-image: url('tailsidle.gif'); background-size: 85%; } .tails-walk { background-image: url('tailswalk.gif'); background-size: contain; transform: skewX(-10deg) scale(1.1); } .tails-attack { background-image: url('tailsattack.gif'); background-size: contain; transform: scale(1.35); } .tails-jump { background-image: url('tailsjump.gif'); background-size: 70%; background-position: center bottom 15px; } .tails-special { background-image: url('tailsspecial.gif'); background-size: 85%; background-position: center bottom; transform: scale(1.2); }
.knuckles-idle { background-image: url('knucklesidle.gif'); background-size: 120%; } .knuckles-walk { background-image: url('knuckleswalk.gif'); background-size: contain; transform: skewX(-10deg); } .knuckles-attack { background-image: url('knucklesattack.gif'); background-size: contain; transform: scale(1.3); } .knuckles-jump { background-image: url('knucklesjump.gif'); background-size: 70%; background-position: center bottom 10px; } .knuckles-special { background-image: url('knucklesspecial.gif'); background-size: 85%; background-position: center bottom; }
.eggman-idle { background-image: url('eggmanidle.gif'); background-size: 110%; transform-origin: bottom center; transform: scale(1.4); } .eggman-walk { background-image: url('eggmanwalk.gif'); background-size: 160%; transform-origin: bottom center; transform: scale(1.4); } .eggman-attack { background-image: url('eggmanwalk.gif'); background-size: 110%; transform-origin: bottom center; transform: scale(1.4) skewX(-20deg); filter: contrast(1.2); } .eggman-jump { background-image: url('eggmanjump.gif'); background-size: 110%; transform-origin: bottom center; transform: scale(1.4); } .eggman-special { background-image: url('eggmanidle.gif'); background-size: 110%; transform-origin: bottom center; transform: scale(1.4); filter: brightness(1.5); }
.metal-summon { background-image: url('metalspecial.gif'); background-size: contain; transform: scale(2.0); }

.battle-bubble { position: absolute; background: #fff; border: 3px solid #000; padding: 10px; border-radius: 10px; font-family: 'Press Start 2P', cursive; font-size: 10px; color: #000; max-width: 200px; z-index: 500; pointer-events: none; text-align: center; box-shadow: 4px 4px 0 rgba(0,0,0,0.5); white-space: pre-wrap; opacity: 0; transition: opacity 0.2s; }
.battle-bubble.visible { opacity: 1; animation: bubble-pop 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); }
.battle-bubble::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); border-width: 10px 10px 0; border-style: solid; border-color: #000 transparent transparent transparent; }
.parry-spark { position: absolute; width: 60px; height: 60px; background: radial-gradient(circle, #00ffff 0%, transparent 70%); border: 2px solid #fff; border-radius: 50%; z-index: 200; animation: parry-anim 0.3s ease-out forwards; } @keyframes parry-anim { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(2.0); opacity: 0; } } @keyframes bubble-pop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* MINION UI */
.minion-hp-container { position: absolute; width: 60px; height: 8px; background: #222; border: 2px solid #fff; z-index: 95; pointer-events: none; transform: skewX(-15deg); box-shadow: 2px 2px 0 rgba(0,0,0,0.5); }
.minion-hp-fill { width: 100%; height: 100%; background: #ff0000; transition: width 0.1s linear; }

/* --- LEGAL DISCLAIMER OVERLAY STYLES --- */
#disclaimer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Above everything including CRT */
    color: white;
    font-family: 'Press Start 2P', cursive;
    text-align: center;
}

.disclaimer-box {
    background: #111;
    padding: 40px;
    border: 4px solid #0044cc;
    border-radius: 0;
    max-width: 650px;
    box-shadow: 10px 10px 0px #d32f2f;
    line-height: 1.6;
}

.disclaimer-title {
    color: #d32f2f;
    font-size: 24px;
    margin-bottom: 20px;
    text-shadow: 2px 2px #000;
}

.disclaimer-box p {
    font-size: 12px;
    margin-bottom: 15px;
    color: #ccc;
}

.disclaimer-box strong {
    color: #fff;
}

#accept-btn {
    background: #0044cc;
    color: white;
    border: 4px solid #fff;
    padding: 15px 30px;
    cursor: pointer;
    font-family: 'Press Start 2P', cursive;
    font-size: 14px;
    margin-top: 20px;
    transition: transform 0.1s;
}

#accept-btn:hover {
    background: #d32f2f;
    transform: scale(1.05);
}

/* --- FIXED CREDITS SCREEN STYLES (Solves Cutoff & Visibility) --- */
#credits-screen {
    /* Ensures the overlay aligns everything in the center */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 6000;
}

#credits-title {
    font-family: 'Anton', sans-serif;
    font-size: 60px;
    color: #ffd700; /* Gold Title */
    text-shadow: 4px 4px 0 #0044cc; /* Blue Shadow */
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.credits-scroll-container {
    width: 700px;
    height: 350px; /* Reduced height to prevent cutoff */
    overflow-y: auto;
    border: 3px solid #ffd700; /* Gold Border */
    background: rgba(0, 0, 0, 0.8); /* Darker background for text readability */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
    text-align: center;
    
    /* Custom Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #ffd700 #222;
}

.credits-scroll-container::-webkit-scrollbar { width: 10px; }
.credits-scroll-container::-webkit-scrollbar-track { background: #111; }
.credits-scroll-container::-webkit-scrollbar-thumb { background-color: #ffd700; border-radius: 5px; }

.credit-section { 
    margin-bottom: 25px; 
    border-bottom: 1px solid #444; 
    padding-bottom: 15px; 
}

.credit-section:last-child { border-bottom: none; }

.credit-section h3 { 
    color: #00ffff; /* Cyan Headers */
    font-family: 'Anton', sans-serif; 
    font-size: 24px; 
    margin-bottom: 10px; 
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 #000;
}

.credit-section p { 
    color: #ffffff; /* White Text - FIXED VISIBILITY */
    font-family: 'Press Start 2P', cursive; 
    font-size: 12px; 
    line-height: 1.8; 
    margin: 5px 0; 
    text-shadow: 1px 1px 0 #000;
}

/* Fix for the Close Button container */
.credits-close-btn {
    margin-top: 20px !important;
    width: 300px;
    text-align: center;
    background: #d32f2f; /* Red button */
    border: 2px solid #fff;
    color: #fff;
}
.credits-close-btn:hover {
    background: #fff;
    color: #d32f2f;
}