| :root { |
| --bg-dark: #0a0a0f; |
| --neon-green: #39ff14; |
| --nokia-green: #43523d; |
| --nokia-dark: #202b1f; |
| --neon-cyan: #0ff; |
| --neon-pink: #ff00ff; |
| --neon-orange: #ff4500; |
| --neon-purple: #9d00ff; |
| --text-light: #f0f0f0; |
| --glass-bg: rgba(20, 20, 30, 0.7); |
| --glass-border: rgba(255, 255, 255, 0.1); |
| } |
|
|
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
|
|
| body { |
| background-color: var(--bg-dark); |
| color: var(--text-light); |
| font-family: 'Outfit', sans-serif; |
| overflow: hidden; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| height: 100vh; |
| background-image: |
| radial-gradient(circle at 50% 50%, rgba(57, 255, 20, 0.05) 0%, transparent 50%), |
| linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); |
| background-size: 100% 100%, 40px 40px, 40px 40px; |
| } |
|
|
| .hidden { |
| display: none !important; |
| } |
|
|
| |
| .nokia-boot { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background-color: var(--nokia-green); |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| align-items: center; |
| z-index: 100; |
| transition: opacity 1s ease-out; |
| } |
|
|
| .nokia-boot::after { |
| content: ''; |
| position: absolute; |
| top: 0; left: 0; right: 0; bottom: 0; |
| background: repeating-linear-gradient( |
| 0deg, |
| rgba(0, 0, 0, 0.1), |
| rgba(0, 0, 0, 0.1) 2px, |
| transparent 2px, |
| transparent 4px |
| ); |
| pointer-events: none; |
| } |
|
|
| .nokia-text { |
| font-family: 'Press Start 2P', cursive; |
| color: var(--nokia-dark); |
| font-size: 5rem; |
| letter-spacing: 10px; |
| animation: bootPulse 2s infinite alternate; |
| } |
|
|
| @keyframes bootPulse { |
| 0% { opacity: 0.8; text-shadow: none; } |
| 100% { opacity: 1; text-shadow: 0 0 10px rgba(32, 43, 31, 0.5); } |
| } |
|
|
| |
| #game-container { |
| width: 800px; |
| border-radius: 16px; |
| box-shadow: 0 0 40px rgba(57, 255, 20, 0.2), 0 0 100px rgba(0, 0, 0, 0.8); |
| overflow: hidden; |
| background: #000; |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| canvas { |
| display: block; |
| width: 800px; |
| height: 600px; |
| } |
|
|
| .canvas-wrapper { |
| position: relative; |
| width: 800px; |
| height: 600px; |
| } |
|
|
| |
| .score-panel { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 15px 20px; |
| background: rgba(10, 10, 15, 0.9); |
| border-bottom: 2px solid #222; |
| z-index: 10; |
| } |
|
|
| .score-box, .high-score-box, .level-box, .gems-box { |
| background: var(--glass-bg); |
| backdrop-filter: blur(10px); |
| border: 1px solid var(--glass-border); |
| padding: 10px 15px; |
| border-radius: 12px; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| min-width: 100px; |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); |
| } |
|
|
| .label { |
| font-size: 0.7rem; |
| text-transform: uppercase; |
| letter-spacing: 2px; |
| color: #aaa; |
| margin-bottom: 4px; |
| } |
|
|
| #score, #high-score, #level, #gems { |
| font-family: 'Press Start 2P', cursive; |
| font-size: 1.2rem; |
| color: var(--neon-green); |
| text-shadow: 0 0 10px rgba(57, 255, 20, 0.5); |
| } |
|
|
| .hud-bottom { |
| position: absolute; |
| bottom: 20px; |
| left: 20px; |
| right: 20px; |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-end; |
| pointer-events: none; |
| z-index: 10; |
| } |
|
|
| |
| #power-up-status { |
| background: var(--glass-bg); |
| backdrop-filter: blur(10px); |
| border: 1px solid var(--glass-border); |
| padding: 10px; |
| border-radius: 20px; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| width: 200px; |
| } |
|
|
| #power-up-icon { |
| font-size: 1.5rem; |
| filter: drop-shadow(0 0 5px rgba(255,255,255,0.8)); |
| } |
|
|
| .progress-bar { |
| flex-grow: 1; |
| height: 8px; |
| background: rgba(255,255,255,0.1); |
| border-radius: 4px; |
| overflow: hidden; |
| } |
|
|
| #power-up-progress { |
| height: 100%; |
| width: 100%; |
| background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple)); |
| border-radius: 4px; |
| transform-origin: left; |
| transition: transform 0.1s linear; |
| } |
|
|
| |
| #combo-display { |
| animation: comboPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; |
| } |
|
|
| .combo-text { |
| font-family: 'Press Start 2P', cursive; |
| font-size: 1.5rem; |
| color: var(--neon-orange); |
| text-shadow: 0 0 15px rgba(255, 69, 0, 0.8), 0 0 30px rgba(255, 69, 0, 0.4); |
| -webkit-text-stroke: 1px #fff; |
| } |
|
|
| @keyframes comboPop { |
| 0% { transform: scale(0.5); opacity: 0; } |
| 80% { transform: scale(1.1); opacity: 1; } |
| 100% { transform: scale(1); opacity: 1; } |
| } |
|
|
| |
| .overlay { |
| position: absolute; |
| top: 0; left: 0; width: 100%; height: 100%; |
| background: rgba(0, 0, 0, 0.8); |
| backdrop-filter: blur(5px); |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| align-items: center; |
| z-index: 20; |
| pointer-events: auto; |
| } |
|
|
| #overlay-title { |
| font-family: 'Press Start 2P', cursive; |
| font-size: 3rem; |
| color: #ff003c; |
| text-shadow: 0 0 20px rgba(255, 0, 60, 0.6); |
| margin-bottom: 20px; |
| } |
|
|
| #overlay-points { |
| font-size: 1.5rem; |
| margin-bottom: 40px; |
| } |
|
|
| #overlay-points span { |
| font-family: 'Press Start 2P', cursive; |
| color: var(--neon-green); |
| } |
|
|
| .overlay-buttons { |
| display: flex; |
| gap: 20px; |
| } |
|
|
| .btn { |
| padding: 12px 30px; |
| border: none; |
| border-radius: 8px; |
| font-family: 'Outfit', sans-serif; |
| font-weight: 700; |
| font-size: 1.2rem; |
| cursor: pointer; |
| text-transform: uppercase; |
| transition: all 0.2s ease; |
| pointer-events: auto; |
| } |
|
|
| .btn.primary { |
| background: var(--neon-green); |
| color: #000; |
| box-shadow: 0 0 15px rgba(57, 255, 20, 0.4); |
| } |
|
|
| .btn.primary:hover { |
| background: #4dff2b; |
| box-shadow: 0 0 25px rgba(57, 255, 20, 0.6); |
| transform: translateY(-2px); |
| } |
|
|
| .btn.secondary { |
| background: transparent; |
| color: var(--text-light); |
| border: 2px solid var(--neon-cyan); |
| box-shadow: 0 0 15px rgba(0, 255, 255, 0.2) inset; |
| } |
|
|
| .btn.secondary:hover { |
| background: rgba(0, 255, 255, 0.1); |
| box-shadow: 0 0 20px rgba(0, 255, 255, 0.4) inset, 0 0 15px rgba(0, 255, 255, 0.4); |
| transform: translateY(-2px); |
| } |
|
|
| |
| .modal { |
| position: absolute; |
| top: 0; left: 0; width: 100%; height: 100%; |
| background: rgba(0, 0, 0, 0.6); |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| z-index: 30; |
| pointer-events: auto; |
| } |
|
|
| .glass-panel { |
| background: var(--glass-bg); |
| backdrop-filter: blur(15px); |
| border: 1px solid var(--glass-border); |
| border-radius: 16px; |
| padding: 30px; |
| width: 600px; |
| max-width: 90%; |
| max-height: 90%; |
| box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); |
| position: relative; |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .close-btn { |
| position: absolute; |
| top: 15px; |
| right: 20px; |
| background: none; |
| border: none; |
| color: #aaa; |
| font-size: 2rem; |
| cursor: pointer; |
| transition: color 0.2s; |
| } |
|
|
| .close-btn:hover { |
| color: #fff; |
| } |
|
|
| .modal h2 { |
| font-family: 'Press Start 2P', cursive; |
| text-align: center; |
| margin-bottom: 20px; |
| font-size: 1.8rem; |
| color: var(--neon-cyan); |
| text-shadow: 0 0 10px rgba(0, 255, 255, 0.5); |
| } |
|
|
| .shop-gems { |
| text-align: center; |
| font-size: 1.2rem; |
| margin-bottom: 20px; |
| background: rgba(0,0,0,0.3); |
| padding: 10px; |
| border-radius: 8px; |
| } |
|
|
| #shop-gem-count { |
| color: var(--neon-cyan); |
| font-weight: 700; |
| font-size: 1.4rem; |
| } |
|
|
| .skins-grid { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 15px; |
| overflow-y: auto; |
| padding: 10px; |
| } |
|
|
| .skin-card { |
| background: rgba(0, 0, 0, 0.4); |
| border: 1px solid var(--glass-border); |
| border-radius: 12px; |
| padding: 15px; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| transition: all 0.3s ease; |
| } |
|
|
| .skin-card:hover { |
| transform: translateY(-5px); |
| border-color: rgba(255, 255, 255, 0.3); |
| } |
|
|
| .skin-preview { |
| width: 60px; |
| height: 60px; |
| border-radius: 8px; |
| margin-bottom: 10px; |
| background: #222; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .skin-preview-snake { |
| width: 30px; |
| height: 10px; |
| border-radius: 5px; |
| } |
|
|
| .skin-name { |
| font-weight: 700; |
| margin-bottom: 10px; |
| text-align: center; |
| } |
|
|
| .btn-equip { |
| width: 100%; |
| padding: 8px; |
| border: none; |
| border-radius: 6px; |
| font-weight: bold; |
| cursor: pointer; |
| background: #333; |
| color: #fff; |
| transition: background 0.2s; |
| } |
|
|
| .btn-equip.affordable { |
| background: var(--neon-cyan); |
| color: #000; |
| } |
|
|
| .btn-equip.equipped { |
| background: var(--neon-green); |
| color: #000; |
| cursor: default; |
| } |
|
|
| .btn-equip:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| } |
|
|
| |
| @keyframes shakeConfig { |
| 0% { transform: translate(1px, 1px) rotate(0deg); } |
| 10% { transform: translate(-1px, -2px) rotate(-1deg); } |
| 20% { transform: translate(-3px, 0px) rotate(1deg); } |
| 30% { transform: translate(3px, 2px) rotate(0deg); } |
| 40% { transform: translate(1px, -1px) rotate(1deg); } |
| 50% { transform: translate(-1px, 2px) rotate(-1deg); } |
| 60% { transform: translate(-3px, 1px) rotate(0deg); } |
| 70% { transform: translate(3px, 1px) rotate(-1deg); } |
| 80% { transform: translate(-1px, -1px) rotate(1deg); } |
| 90% { transform: translate(1px, 2px) rotate(0deg); } |
| 100% { transform: translate(1px, -2px) rotate(-1deg); } |
| } |
|
|
| .shake { |
| animation: shakeConfig 0.5s cubic-bezier(.36,.07,.19,.97) both; |
| } |
|
|
| .flash-red { |
| box-shadow: inset 0 0 100px rgba(255, 0, 0, 0.8) !important; |
| } |
|
|
| |
| .input-field { |
| width: 100%; |
| padding: 15px; |
| background: rgba(0,0,0,0.5); |
| border: 2px solid var(--neon-cyan); |
| color: var(--neon-cyan); |
| font-family: 'Press Start 2P', cursive; |
| font-size: 1rem; |
| border-radius: 8px; |
| outline: none; |
| text-align: center; |
| transition: all 0.3s; |
| } |
|
|
| .input-field:focus { |
| box-shadow: 0 0 20px rgba(0, 255, 255, 0.4); |
| background: rgba(0, 0, 0, 0.8); |
| } |
|
|
| .player-profile { |
| position: absolute; |
| top: 0; |
| right: 20px; |
| background: var(--glass-bg); |
| padding: 8px 20px; |
| border-radius: 0 0 12px 12px; |
| font-size: 0.8rem; |
| color: var(--neon-cyan); |
| border: 1px solid var(--glass-border); |
| border-top: none; |
| display: flex; |
| gap: 20px; |
| z-index: 15; |
| box-shadow: 0 5px 15px rgba(0,0,0,0.5); |
| } |
|
|
| .player-profile span { |
| font-family: 'Outfit', sans-serif; |
| font-weight: 700; |
| } |
|
|
| .player-profile a { |
| color: var(--neon-orange); |
| text-decoration: none; |
| cursor: pointer; |
| font-weight: 700; |
| transition: color 0.2s; |
| } |
|
|
| .player-profile a:hover { |
| color: #ff884d; |
| } |
|
|
| |
| .profiles-list { |
| max-height: 200px; |
| overflow-y: auto; |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| margin-top: 20px; |
| padding-right: 5px; |
| } |
|
|
| .profile-btn { |
| background: rgba(0, 0, 0, 0.4); |
| border: 1px solid var(--glass-border); |
| color: var(--neon-cyan); |
| padding: 12px; |
| border-radius: 8px; |
| cursor: pointer; |
| font-family: 'Outfit', sans-serif; |
| font-weight: 700; |
| font-size: 1.1rem; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| transition: all 0.2s; |
| } |
|
|
| .profile-btn:hover { |
| background: rgba(0, 255, 255, 0.1); |
| border-color: var(--neon-cyan); |
| transform: translateX(5px); |
| } |
|
|
| .profile-score { |
| font-family: 'Press Start 2P', cursive; |
| font-size: 0.7rem; |
| color: var(--neon-orange); |
| } |
|
|
|
|
