From 83cb5baacbf3159a3854eeca88ffa1b7f274f534 Mon Sep 17 00:00:00 2001
From: "maxim.dolgolyov" <dolgolyov_maxim@mail.ru>
Date: Tue, 24 Feb 2026 18:20:18 +0300
Subject: [PATCH] =?UTF-8?q?=D0=97=D0=B0=D0=B3=D1=80=D1=83=D0=B7=D0=B8?=
 =?UTF-8?q?=D1=82=D1=8C=20=D1=84=D0=B0=D0=B9=D0=BB=D1=8B=20=D0=B2=20=C2=AB?=
 =?UTF-8?q?css=C2=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/style.css | 637 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 637 insertions(+)
 create mode 100644 css/style.css

diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..02f870c
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,637 @@
+/* ═══════════════════════════════════════════════════════════════
+   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;
+    }
+}