/* ====== BATTLE FLOORS STYLES - OPTIMIZED V2 ====== */
/* Base floor styling with performance improvements */
.battle-floor {
position: absolute;
bottom: 0;
left: -150px;
width: 200%; /* Kept for visual layout consistency */
height: 200px;
/* OPTIMIZATION: Removed rotateX(65deg) - Major performance gain, significant visual change (flatter floor) */
/* Compensate slightly by pushing down */
transform: scale(2) translateY(60px);
/* OPTIMIZATION: Removed preserve-3d as it's not needed without 3D rotation */
will-change: transform; /* Hints browser to optimize transform animations */
backface-visibility: hidden; /* Reduces paint complexity */
/* OPTIMIZATION: Removed box-shadow as it was negligible or transparent */
z-index: 3;
image-rendering: pixelated; /* Keep for retro style */
transition: background-color 0.8s ease;
border-top: 6px solid rgba(0, 0, 0, 0.2); /* Keep border */
overflow: hidden; /* Prevent potential background bleed */
}
/* DAY FLOORS - SIMPLIFIED SVGs */
/* Day - celestial */
.floor-day-celestial {
background-color: #2a3a8c;
/* OPTIMIZATION: Simplified SVG - basic diagonal lines */
background-image: url('data:image/svg+xml,');
background-size: 80px 80px;
}
/* Day - forest */
.floor-day-forest {
background-color: #1a4d1a;
/* OPTIMIZATION: Simplified SVG - vertical lines */
background-image: url('data:image/svg+xml,');
background-size: 60px 60px;
}
/* Day - desert */
.floor-day-desert {
background-color: #c2b280;
/* OPTIMIZATION: Simplified SVG - dots */
background-image: url('data:image/svg+xml,');
background-size: 30px 30px;
}
/* Day - lavaland */
.floor-day-lavaland {
background-color: #8b2500;
/* OPTIMIZATION: Simplified SVG - checkerboard */
background-image: url('data:image/svg+xml,');
background-size: 40px 40px;
animation: lava-pulse 4s infinite alternate; /* Keep simple animation */
}
/* Simplified lava animation */
@keyframes lava-pulse {
0% { background-color: #8b2500; }
100% { background-color: #b22222; }
}
/* Day - castle */
.floor-day-castle {
background-color: #777777;
/* OPTIMIZATION: Simplified SVG - basic checkerboard */
background-image: url('data:image/svg+xml,');
background-size: 32px 32px;
}
/* Day - plains */
.floor-day-plains {
background-color: #7cba3d;
/* OPTIMIZATION: Simplified SVG - fewer circles */
background-image: url('data:image/svg+xml,');
background-size: 30px 30px;
}
/* NIGHT FLOORS - SIMPLIFIED SVGs */
/* Night - void */
.floor-night-void {
background-color: #1e0033;
/* OPTIMIZATION: Simplified SVG - radial gradient */
background-image: url('data:image/svg+xml,');
background-size: 100px 100px;
}
/* Night - neon */
.floor-night-neon {
background-color: #000000;
/* OPTIMIZATION: Simplified SVG - fewer lines */
background-image: url('data:image/svg+xml,');
background-size: 60px 60px;
}
/* Night - ice */
.floor-night-ice {
background-color: #0a2c3d;
/* OPTIMIZATION: Simplified SVG - basic cross pattern */
background-image: url('data:image/svg+xml,');
background-size: 70px 70px;
}
/* Night - space */
.floor-night-space {
background-color: #090418;
/* OPTIMIZATION: Simplified SVG - fewer circles */
background-image: url('data:image/svg+xml,');
background-size: 50px 50px;
animation: space-twinkle 6s infinite ease-in-out; /* Keep simple animation */
}
/* Simplified space animation */
@keyframes space-twinkle {
0%, 100% { opacity: 0.9; } /* Animating opacity of the whole floor */
50% { opacity: 1; }
}
/* Night - haunted */
.floor-night-haunted {
background-color: #3a2e39;
/* OPTIMIZATION: Simplified SVG - vertical stripes */
background-image: url('data:image/svg+xml,');
background-size: 40px 40px;
}
/* Night - cyber */
.floor-night-cyber {
background-color: #000033;
/* OPTIMIZATION: Simplified SVG - basic grid */
background-image: url('data:image/svg+xml,');
background-size: 20px 20px;
animation: cyber-scan 3s infinite linear; /* Keep simple animation */
}
/* Simplified cyber animation */
@keyframes cyber-scan {
0% { background-position: 0 0; }
100% { background-position: 20px 20px; }
}
/* MADNESS FLOORS - SIMPLIFIED SVGs & ANIMATIONS */
/* Madness - chaotic */
.floor-madness-chaotic {
background-color: #4b0000;
/* OPTIMIZATION: Simplified SVG - diagonal lines */
background-image: url('data:image/svg+xml,');
background-size: 60px 60px;
/* OPTIMIZATION: Removed distort animation, maybe add subtle pulse */
animation: madness-opacity-pulse 5s infinite alternate;
}
@keyframes madness-opacity-pulse {
0% { opacity: 0.9; }
100% { opacity: 1; }
}
/* Madness - broken */
.floor-madness-broken {
background-color: #241c1c;
/* OPTIMIZATION: Simplified SVG - cracks */
background-image: url('data:image/svg+xml,');
background-size: 60px 60px;
/* OPTIMIZATION: Reduced hue-rotate range */
animation: madness-floor-pulse 4s infinite alternate;
}
/* Simplified pulse animation */
@keyframes madness-floor-pulse {
0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(10deg); } /* Reduced from 20deg */
}
/* Madness - glitch */
.floor-madness-glitch {
background-color: #0a0a0a;
/* OPTIMIZATION: Simplified SVG - horizontal lines */
background-image: url('data:image/svg+xml,');
background-size: 32px 32px;
}
/* Optional: add a simpler glitch animation through a class */
.enable-glitch {
/* OPTIMIZATION: Uses only transform and opacity */
animation: simple-glitch 0.8s steps(2) infinite;
}
@keyframes simple-glitch {
0%, 100% { transform: scale(2) translateY(60px); opacity: 1; }
50% { transform: scale(2) translateY(60px) translateX(3px); opacity: 0.9; }
}
/* Madness - vortex */
.floor-madness-vortex {
background-color: #2d1152;
/* OPTIMIZATION: Simplified SVG - just the gradient */
background-image: url('data:image/svg+xml,');
background-size: 200px 200px;
animation: simple-rotate 10s infinite linear; /* Keep simple animation */
}
@keyframes simple-rotate {
0% { background-position: center 0; }
100% { background-position: center 200px; }
}
/* Madness - psychedelic */
.floor-madness-psychedelic {
background-color: #ff00ff;
/* OPTIMIZATION: Simplified SVG - checkerboard */
background-image: url('data:image/svg+xml,');
background-size: 40px 40px;
/* OPTIMIZATION: Reduced hue-rotate range */
animation: color-shift 4s infinite alternate;
}
@keyframes color-shift {
0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(45deg); } /* Reduced from 90deg */
}
/* Madness - corrupted */
.floor-madness-corrupted {
background-color: #222222;
/* OPTIMIZATION: Simplified SVG - checkerboard */
background-image: url('data:image/svg+xml,');
background-size: 16px 16px;
}
/* Optional: add a simpler corrupt glitch animation through a class */
.enable-corrupt {
/* OPTIMIZATION: Uses only transform */
animation: corrupt-shift 0.5s steps(2) infinite;
}
@keyframes corrupt-shift {
0%, 100% { transform: scale(2) translateY(60px); }
25%, 75% { transform: scale(2) translateY(60px) translateX(-3px); }
50% { transform: scale(2) translateY(60px) translateX(3px); }
}
/* Media queries for mobile optimization */
@media (max-width: 768px) {
.battle-floor {
/* Further adjust scale/position if needed for mobile */
transform: scale(1.8) translateY(50px);
}
/* Disable more animations on mobile */
.floor-day-lavaland,
.floor-night-space,
.floor-night-cyber,
.floor-madness-chaotic,
.floor-madness-broken,
.floor-madness-vortex,
.floor-madness-psychedelic,
.enable-glitch,
.enable-corrupt {
animation: none;
}
/* Optionally simplify madness filters further on mobile */
.floor-madness-broken,
.floor-madness-psychedelic {
filter: none;
}
}