638 lines
14 KiB
CSS
638 lines
14 KiB
CSS
/* ═══════════════════════════════════════════════════════════════
|
|
PLATFORMER GAME STYLES
|
|
═══════════════════════════════════════════════════════════════ */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;600;700&display=swap');
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
background: linear-gradient(135deg, #050510 0%, #0a0a20 50%, #0f0a25 100%);
|
|
font-family: 'Rajdhani', 'Segoe UI', sans-serif;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Animated background */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background:
|
|
radial-gradient(ellipse at 20% 80%, rgba(100, 0, 150, 0.15) 0%, transparent 50%),
|
|
radial-gradient(ellipse at 80% 20%, rgba(0, 100, 150, 0.15) 0%, transparent 50%),
|
|
radial-gradient(ellipse at 50% 50%, rgba(50, 0, 100, 0.1) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
.game-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.game-container {
|
|
text-align: center;
|
|
}
|
|
|
|
/* Canvas styles */
|
|
canvas {
|
|
display: block;
|
|
border: 3px solid #00ffff;
|
|
border-radius: 16px;
|
|
box-shadow:
|
|
0 0 40px rgba(0, 255, 255, 0.25),
|
|
0 0 80px rgba(0, 255, 255, 0.1),
|
|
inset 0 0 100px rgba(0, 0, 0, 0.5);
|
|
background: linear-gradient(180deg, #050510 0%, #0a0a20 100%);
|
|
margin-top: 10px;
|
|
animation: canvasPulse 4s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes canvasPulse {
|
|
0%, 100% { box-shadow: 0 0 40px rgba(0, 255, 255, 0.25), 0 0 80px rgba(0, 255, 255, 0.1), inset 0 0 100px rgba(0, 0, 0, 0.5); }
|
|
50% { box-shadow: 0 0 60px rgba(0, 255, 255, 0.4), 0 0 100px rgba(0, 255, 255, 0.2), inset 0 0 80px rgba(0, 0, 0, 0.4); }
|
|
}
|
|
|
|
/* Game container with vignette */
|
|
.game-container {
|
|
position: relative;
|
|
}
|
|
|
|
.game-container::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -47%);
|
|
width: 906px;
|
|
height: 556px;
|
|
pointer-events: none;
|
|
background: radial-gradient(ellipse at center, transparent 65%, rgba(0, 0, 0, 0.35) 100%);
|
|
border-radius: 20px;
|
|
}
|
|
|
|
/* Screen shake animation */
|
|
@keyframes screenShake {
|
|
0%, 100% { transform: translate(0, 0); }
|
|
10% { transform: translate(-5px, -3px); }
|
|
20% { transform: translate(5px, 3px); }
|
|
30% { transform: translate(-3px, 5px); }
|
|
40% { transform: translate(3px, -5px); }
|
|
50% { transform: translate(-5px, 3px); }
|
|
60% { transform: translate(5px, -3px); }
|
|
70% { transform: translate(-3px, -5px); }
|
|
80% { transform: translate(3px, 5px); }
|
|
90% { transform: translate(-5px, -3px); }
|
|
}
|
|
|
|
canvas.shake {
|
|
animation: screenShake 0.4s ease-out;
|
|
}
|
|
|
|
/* HUD styles */
|
|
.hud {
|
|
position: absolute;
|
|
top: 80px;
|
|
left: 15px;
|
|
right: 15px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 15px;
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
.hud-item {
|
|
background: linear-gradient(135deg, rgba(0, 40, 60, 0.9) 0%, rgba(0, 20, 40, 0.9) 100%);
|
|
padding: 8px 15px;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(0, 255, 255, 0.3);
|
|
color: #fff;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
letter-spacing: 1px;
|
|
text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
|
|
backdrop-filter: blur(5px);
|
|
box-shadow: 0 0 15px rgba(0, 255, 255, 0.15), inset 0 0 20px rgba(0, 255, 255, 0.05);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.hud-item:hover {
|
|
box-shadow: 0 0 25px rgba(0, 255, 255, 0.3), inset 0 0 30px rgba(0, 255, 255, 0.1);
|
|
}
|
|
|
|
.hud-item .label {
|
|
color: #888;
|
|
font-size: 14px;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.hud-item .value {
|
|
color: #00ffff;
|
|
font-size: 18px;
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-weight: 700;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.hud-item .value.gold {
|
|
color: #ffd700;
|
|
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
|
}
|
|
|
|
.hud-item .value.red {
|
|
color: #ff4757;
|
|
}
|
|
|
|
/* HUD groups */
|
|
.hud-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.hud-group .hud-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
/* Lives display */
|
|
.lives-display {
|
|
display: flex;
|
|
gap: 5px;
|
|
align-items: center;
|
|
}
|
|
|
|
.life-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
|
|
clip-path: polygon(50% 0%, 100% 35%, 80% 100%, 20% 100%, 0% 35%);
|
|
transition: all 0.3s;
|
|
box-shadow: 0 0 8px rgba(255, 71, 87, 0.5);
|
|
}
|
|
|
|
.life-icon.lost {
|
|
background: #333;
|
|
opacity: 0.3;
|
|
box-shadow: none;
|
|
transform: scale(0.8);
|
|
}
|
|
|
|
/* Power-up indicators */
|
|
.powerups {
|
|
position: absolute;
|
|
top: 70px;
|
|
left: 15px;
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.powerup-badge {
|
|
background: linear-gradient(135deg, rgba(100, 50, 150, 0.9) 0%, rgba(50, 20, 100, 0.9) 100%);
|
|
padding: 8px 15px;
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(150, 100, 255, 0.5);
|
|
color: #d4a5ff;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
display: none;
|
|
align-items: center;
|
|
gap: 5px;
|
|
animation: powerupPulse 1s ease-in-out infinite;
|
|
}
|
|
|
|
.powerup-badge.active {
|
|
display: flex;
|
|
}
|
|
|
|
.powerup-badge .icon {
|
|
font-size: 16px;
|
|
}
|
|
|
|
@keyframes powerupPulse {
|
|
0%, 100% { box-shadow: 0 0 10px rgba(150, 100, 255, 0.3); }
|
|
50% { box-shadow: 0 0 20px rgba(150, 100, 255, 0.6); }
|
|
}
|
|
|
|
/* Level indicator - placed in HUD */
|
|
.level-display {
|
|
background: linear-gradient(135deg, rgba(100, 0, 150, 0.9) 0%, rgba(50, 0, 100, 0.9) 100%);
|
|
padding: 6px 15px;
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(150, 100, 255, 0.5);
|
|
color: #d4a5ff;
|
|
font-size: 12px;
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-weight: 700;
|
|
text-shadow: 0 0 10px rgba(150, 100, 255, 0.5);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Title */
|
|
h1 {
|
|
color: #00ffff;
|
|
margin-bottom: 20px;
|
|
font-size: 48px;
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-weight: 900;
|
|
letter-spacing: 6px;
|
|
text-shadow:
|
|
0 0 20px #00ffff,
|
|
0 0 40px #00ffff,
|
|
0 0 60px #0088ff,
|
|
2px 2px 4px rgba(0,0,0,0.8);
|
|
animation: titleGlow 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes titleGlow {
|
|
0%, 100% {
|
|
text-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff, 0 0 60px #0088ff;
|
|
color: #00ffff;
|
|
}
|
|
33% {
|
|
text-shadow: 0 0 30px #ff00ff, 0 0 60px #ff00ff, 0 0 90px #8800ff;
|
|
color: #ff00ff;
|
|
}
|
|
66% {
|
|
text-shadow: 0 0 20px #00ff88, 0 0 40px #00ff88, 0 0 60px #00ff44;
|
|
color: #00ff88;
|
|
}
|
|
}
|
|
|
|
/* Controls help */
|
|
.controls {
|
|
margin-top: 25px;
|
|
color: #666;
|
|
font-size: 14px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.controls span {
|
|
background: linear-gradient(135deg, #ff00ff, #00ffff);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
padding: 4px 12px;
|
|
font-weight: 700;
|
|
font-family: 'Orbitron', sans-serif;
|
|
}
|
|
|
|
/* Message overlay */
|
|
#message {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: linear-gradient(135deg, rgba(10, 10, 30, 0.98) 0%, rgba(20, 10, 40, 0.98) 100%);
|
|
color: white;
|
|
padding: 50px 70px;
|
|
border-radius: 24px;
|
|
font-size: 28px;
|
|
display: none;
|
|
text-align: center;
|
|
border: 2px solid #00ffff;
|
|
box-shadow:
|
|
0 0 50px rgba(0, 255, 255, 0.3),
|
|
0 0 100px rgba(0, 255, 255, 0.1),
|
|
inset 0 0 40px rgba(0, 255, 255, 0.05);
|
|
z-index: 100;
|
|
min-width: 400px;
|
|
}
|
|
|
|
#message h2 {
|
|
font-size: 42px;
|
|
margin-bottom: 15px;
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-weight: 900;
|
|
}
|
|
|
|
#message.win h2 {
|
|
text-shadow: 0 0 30px #ffd700, 0 0 60px #ffd700;
|
|
color: #ffd700;
|
|
}
|
|
|
|
#message.lose h2 {
|
|
text-shadow: 0 0 30px #ff4757, 0 0 60px #ff4757;
|
|
color: #ff4757;
|
|
}
|
|
|
|
#message .stats {
|
|
font-size: 18px;
|
|
color: #aaa;
|
|
margin: 20px 0;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
#message .stats span {
|
|
color: #00ffff;
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-weight: 700;
|
|
}
|
|
|
|
#message button {
|
|
margin-top: 25px;
|
|
padding: 18px 50px;
|
|
font-size: 20px;
|
|
font-family: 'Orbitron', sans-serif;
|
|
background: linear-gradient(135deg, #00ffff 0%, #ff00ff 100%);
|
|
color: #000;
|
|
border: none;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
font-weight: 700;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
#message button:hover {
|
|
transform: scale(1.08);
|
|
box-shadow: 0 0 40px rgba(0, 255, 255, 0.6);
|
|
}
|
|
|
|
/* Pause menu */
|
|
#pause-menu {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: linear-gradient(135deg, rgba(10, 10, 30, 0.95) 0%, rgba(20, 10, 40, 0.95) 100%);
|
|
padding: 40px 60px;
|
|
border-radius: 20px;
|
|
border: 2px solid #00ffff;
|
|
text-align: center;
|
|
display: none;
|
|
z-index: 90;
|
|
}
|
|
|
|
#pause-menu h2 {
|
|
color: #00ffff;
|
|
font-size: 36px;
|
|
font-family: 'Orbitron', sans-serif;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
#pause-menu button {
|
|
display: block;
|
|
width: 100%;
|
|
margin: 10px 0;
|
|
padding: 15px 40px;
|
|
font-size: 18px;
|
|
font-family: 'Rajdhani', sans-serif;
|
|
font-weight: 600;
|
|
background: linear-gradient(135deg, rgba(0, 255, 255, 0.2) 0%, rgba(255, 0, 255, 0.2) 100%);
|
|
color: #fff;
|
|
border: 1px solid rgba(0, 255, 255, 0.5);
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
#pause-menu button:hover {
|
|
background: linear-gradient(135deg, rgba(0, 255, 255, 0.4) 0%, rgba(255, 0, 255, 0.4) 100%);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Loading screen */
|
|
#loading {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #050510;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#loading h2 {
|
|
color: #00ffff;
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 32px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* Main Menu */
|
|
#main-menu {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(135deg, #050510 0%, #0a0a20 50%, #0f0a25 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
#main-menu h1 {
|
|
font-size: 64px;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.menu-buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.menu-btn {
|
|
padding: 18px 60px;
|
|
font-size: 24px;
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, rgba(0, 255, 255, 0.2) 0%, rgba(255, 0, 255, 0.2) 100%);
|
|
color: #fff;
|
|
border: 2px solid rgba(0, 255, 255, 0.5);
|
|
border-radius: 15px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.menu-btn:hover {
|
|
background: linear-gradient(135deg, rgba(0, 255, 255, 0.4) 0%, rgba(255, 0, 255, 0.4) 100%);
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
|
|
}
|
|
|
|
.menu-hint {
|
|
margin-top: 50px;
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Modal */
|
|
.modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.modal.show {
|
|
display: flex;
|
|
}
|
|
|
|
.modal-content {
|
|
background: linear-gradient(135deg, rgba(20, 20, 50, 0.95) 0%, rgba(40, 20, 60, 0.95) 100%);
|
|
padding: 40px 60px;
|
|
border-radius: 20px;
|
|
border: 2px solid #00ffff;
|
|
text-align: center;
|
|
}
|
|
|
|
.modal-content h2 {
|
|
color: #00ffff;
|
|
font-size: 32px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.setting-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 15px 0;
|
|
border-bottom: 1px solid rgba(0, 255, 255, 0.2);
|
|
color: #fff;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.setting-item button {
|
|
padding: 8px 20px;
|
|
background: rgba(0, 255, 255, 0.2);
|
|
border: 1px solid #00ffff;
|
|
color: #00ffff;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.setting-item button:hover {
|
|
background: rgba(0, 255, 255, 0.4);
|
|
}
|
|
|
|
.back-btn {
|
|
margin-top: 30px !important;
|
|
}
|
|
|
|
/* Loading */
|
|
.loader {
|
|
width: 60px;
|
|
height: 60px;
|
|
border: 4px solid rgba(0, 255, 255, 0.2);
|
|
border-top-color: #00ffff;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 960px) {
|
|
canvas {
|
|
width: 100%;
|
|
max-width: 900px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 32px;
|
|
}
|
|
|
|
.hud-item {
|
|
padding: 8px 12px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.hud-item .value {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
/* Mobile Controls */
|
|
.mobile-controls {
|
|
display: none;
|
|
margin-top: 15px;
|
|
gap: 15px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.mobile-btn {
|
|
width: 70px;
|
|
height: 70px;
|
|
font-size: 28px;
|
|
border-radius: 50%;
|
|
border: 2px solid #00ffff;
|
|
background: rgba(0, 255, 255, 0.15);
|
|
color: white;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
transition: all 0.1s;
|
|
}
|
|
|
|
.mobile-btn:active {
|
|
background: rgba(0, 255, 255, 0.5);
|
|
transform: scale(0.92);
|
|
box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
|
|
}
|
|
|
|
/* Combo Display */
|
|
.combo-display {
|
|
opacity: 0;
|
|
transition: opacity 0.2s, transform 0.2s;
|
|
}
|
|
|
|
.combo-display.active {
|
|
opacity: 1;
|
|
animation: comboPulse 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes comboPulse {
|
|
0% { transform: scale(1.3); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
.combo-text {
|
|
color: #ffd700;
|
|
font-weight: bold;
|
|
text-shadow: 0 0 10px #ffd700;
|
|
}
|
|
|
|
/* Touch device detection */
|
|
@media (hover: none) and (pointer: coarse) {
|
|
.mobile-controls {
|
|
display: flex;
|
|
}
|
|
.controls {
|
|
display: none;
|
|
}
|
|
}
|