Spaces:
Sleeping
Sleeping
| /* Buenos Aires 2077 - Cyberpunk Styles */ | |
| :root { | |
| --neon-cyan: #00f5ff; | |
| --neon-magenta: #ff00ff; | |
| --neon-yellow: #ffff00; | |
| --neon-red: #ff0040; | |
| --neon-green: #00ff88; | |
| --neon-orange: #ff8800; | |
| --dark-bg: #0a0a0f; | |
| --dark-surface: #12121a; | |
| --dark-card: #1a1a25; | |
| --dark-border: #2a2a3a; | |
| --glass-bg: rgba(20, 20, 35, 0.85); | |
| --glass-border: rgba(0, 245, 255, 0.2); | |
| --text-primary: #ffffff; | |
| --text-secondary: #a0a0b0; | |
| --text-muted: #606070; | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| font-family: 'Rajdhani', sans-serif; | |
| background: var(--dark-bg); | |
| color: var(--text-primary); | |
| min-height: 100vh; | |
| overflow: hidden; | |
| } | |
| #rain-canvas { | |
| position: fixed; | |
| top: 0; left: 0; | |
| width: 100%; height: 100%; | |
| pointer-events: none; | |
| z-index: 1; | |
| } | |
| .scanlines { | |
| position: fixed; | |
| top: 0; left: 0; | |
| width: 100%; height: 100%; | |
| background: repeating-linear-gradient( | |
| 0deg, | |
| transparent, | |
| transparent 2px, | |
| rgba(0, 0, 0, 0.1) 2px, | |
| rgba(0, 0, 0, 0.1) 4px | |
| ); | |
| pointer-events: none; | |
| z-index: 1000; | |
| opacity: 0.3; | |
| } | |
| #game-container { | |
| display: grid; | |
| grid-template-columns: 280px 1fr 280px; | |
| grid-template-rows: 70px 1fr 80px; | |
| height: 100vh; | |
| gap: 10px; | |
| padding: 10px; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| /* Top HUD */ | |
| #top-hud { | |
| grid-column: 1 / -1; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| background: var(--glass-bg); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 8px; | |
| padding: 0 20px; | |
| backdrop-filter: blur(10px); | |
| } | |
| .hud-left { display: flex; align-items: center; gap: 15px; } | |
| .player-avatar { | |
| width: 50px; height: 50px; | |
| background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta)); | |
| border-radius: 50%; | |
| position: relative; | |
| display: flex; align-items: center; justify-content: center; | |
| } | |
| .avatar-frame { | |
| width: 40px; height: 40px; | |
| background: var(--dark-bg); | |
| border-radius: 50%; | |
| } | |
| .player-info h1 { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 1rem; | |
| color: var(--neon-cyan); | |
| text-shadow: 0 0 10px var(--neon-cyan); | |
| } | |
| .player-title { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| } | |
| .hud-center { display: flex; flex-direction: column; align-items: center; gap: 5px; } | |
| .time-display { | |
| display: flex; align-items: center; gap: 10px; | |
| font-family: 'Share Tech Mono', monospace; | |
| font-size: 1.5rem; | |
| color: var(--neon-yellow); | |
| text-shadow: 0 0 15px var(--neon-yellow); | |
| } | |
| .day-indicator { | |
| font-size: 0.7rem; | |
| background: var(--neon-cyan); | |
| color: var(--dark-bg); | |
| padding: 2px 8px; | |
| border-radius: 3px; | |
| } | |
| .weather-display { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| } | |
| .hud-right { display: flex; align-items: center; gap: 20px; } | |
| .currency-display { | |
| display: flex; align-items: center; gap: 10px; | |
| background: rgba(0, 255, 136, 0.1); | |
| border: 1px solid var(--neon-green); | |
| padding: 8px 15px; | |
| border-radius: 5px; | |
| } | |
| .currency-icon { | |
| font-size: 1.2rem; | |
| color: var(--neon-green); | |
| } | |
| .currency-amount { | |
| font-family: 'Share Tech Mono', monospace; | |
| font-size: 1.2rem; | |
| color: var(--neon-green); | |
| text-shadow: 0 0 10px var(--neon-green); | |
| } | |
| .currency-label { | |
| font-size: 0.6rem; | |
| color: var(--text-muted); | |
| } | |
| .hud-btn { | |
| background: transparent; | |
| border: 1px solid var(--glass-border); | |
| color: var(--text-primary); | |
| padding: 10px 15px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .hud-btn:hover { | |
| border-color: var(--neon-cyan); | |
| box-shadow: 0 0 15px rgba(0, 245, 255, 0.3); | |
| } | |
| /* Stats Panel */ | |
| #stats-panel, #events-panel { | |
| background: var(--glass-bg); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 8px; | |
| padding: 15px; | |
| backdrop-filter: blur(10px); | |
| overflow-y: auto; | |
| } | |
| .panel-title { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 0.8rem; | |
| color: var(--neon-cyan); | |
| margin-bottom: 15px; | |
| display: flex; align-items: center; gap: 8px; | |
| } | |
| .title-icon { color: var(--neon-magenta); } | |
| .stat-item { | |
| margin-bottom: 12px; | |
| padding: 8px; | |
| background: rgba(0, 0, 0, 0.3); | |
| border-radius: 5px; | |
| transition: all 0.3s; | |
| } | |
| .stat-item:hover { | |
| background: rgba(0, 245, 255, 0.1); | |
| } | |
| .stat-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-bottom: 5px; | |
| font-size: 0.75rem; | |
| } | |
| .stat-name { flex: 1; color: var(--text-secondary); } | |
| .stat-value { | |
| font-family: 'Share Tech Mono', monospace; | |
| color: var(--neon-cyan); | |
| } | |
| .stat-bar, .need-bar { | |
| height: 6px; | |
| background: var(--dark-bg); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| } | |
| .stat-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta)); | |
| border-radius: 3px; | |
| transition: width 0.5s ease; | |
| } | |
| .stat-fill.resistance { background: linear-gradient(90deg, #ff4444, #ff8888); } | |
| .stat-fill.hacking { background: linear-gradient(90deg, #00ff88, #88ffbb); } | |
| .stat-fill.charisma { background: linear-gradient(90deg, #ff00ff, #ff88ff); } | |
| .stat-fill.reflexes { background: linear-gradient(90deg, #ffff00, #ffff88); } | |
| .need-fill.hunger { background: linear-gradient(90deg, #ff8800, #ffaa44); } | |
| .need-fill.energy { background: linear-gradient(90deg, #00ff88, #88ffbb); } | |
| .need-fill.sanity { background: linear-gradient(90deg, #8800ff, #aa44ff); } | |
| .divider { | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, var(--glass-border), transparent); | |
| margin: 15px 0; | |
| } | |
| .need-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-bottom: 10px; | |
| font-size: 0.75rem; | |
| } | |
| .need-name { width: 70px; color: var(--text-secondary); } | |
| .need-bar { flex: 1; } | |
| /* Main Content */ | |
| #main-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| overflow-y: auto; | |
| padding-right: 5px; | |
| } | |
| #location-section { | |
| background: var(--glass-bg); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 8px; | |
| padding: 20px; | |
| backdrop-filter: blur(10px); | |
| } | |
| .location-header { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 15px; | |
| margin-bottom: 15px; | |
| } | |
| .location-icon { | |
| font-size: 2.5rem; | |
| background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .location-info { flex: 1; } | |
| .location-info h2 { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 1.5rem; | |
| color: var(--neon-cyan); | |
| text-shadow: 0 0 20px var(--neon-cyan); | |
| margin-bottom: 5px; | |
| } | |
| .location-info p { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| line-height: 1.4; | |
| } | |
| .location-danger { text-align: right; } | |
| .danger-label { | |
| font-size: 0.65rem; | |
| color: var(--text-muted); | |
| margin-bottom: 5px; | |
| display: block; | |
| } | |
| .danger-level { display: flex; gap: 3px; } | |
| .danger-dot { | |
| width: 8px; height: 8px; | |
| background: var(--dark-border); | |
| border-radius: 50%; | |
| } | |
| .danger-dot.active { background: var(--neon-red); box-shadow: 0 0 8px var(--neon-red); } | |
| /* Location Visual */ | |
| .location-visual { | |
| height: 200px; | |
| background: linear-gradient(180deg, #0a0a1a 0%, #1a0a2a 100%); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .location-scene { | |
| width: 100%; height: 100%; | |
| position: relative; | |
| } | |
| .building { | |
| position: absolute; | |
| bottom: 0; | |
| background: linear-gradient(180deg, #1a1a2a, #0a0a15); | |
| border: 1px solid rgba(0, 245, 255, 0.2); | |
| } | |
| .b1 { left: 5%; width: 15%; height: 70%; } | |
| .b2 { left: 22%; width: 12%; height: 85%; } | |
| .b3 { left: 36%; width: 18%; height: 60%; } | |
| .b4 { left: 56%; width: 14%; height: 90%; } | |
| .b5 { left: 72%; width: 20%; height: 75%; } | |
| .neon-sign { | |
| position: absolute; | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 0.8rem; | |
| padding: 3px 8px; | |
| animation: neonFlicker 3s infinite; | |
| } | |
| .s1 { top: 20%; left: 25%; color: var(--neon-magenta); text-shadow: 0 0 10px var(--neon-magenta); } | |
| .s2 { top: 15%; right: 20%; color: var(--neon-cyan); text-shadow: 0 0 10px var(--neon-cyan); } | |
| @keyframes neonFlicker { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.8; } | |
| 52% { opacity: 0.4; } | |
| 54% { opacity: 1; } | |
| } | |
| .drone { | |
| position: absolute; | |
| color: var(--neon-red); | |
| font-size: 0.8rem; | |
| animation: droneFly 8s linear infinite; | |
| } | |
| .d1 { top: 25%; animation-delay: 0s; } | |
| .d2 { top: 35%; animation-delay: -4s; } | |
| @keyframes droneFly { | |
| 0% { left: -5%; } | |
| 100% { left: 105%; } | |
| } | |
| .car { | |
| position: absolute; | |
| bottom: 5%; | |
| animation: carDrive 6s linear infinite; | |
| } | |
| .c1 { animation-delay: 0s; } | |
| .c2 { animation-delay: -3s; } | |
| @keyframes carDrive { | |
| 0% { left: 105%; } | |
| 100% { left: -10%; } | |
| } | |
| /* Activities Section */ | |
| #activities-section, #travel-section { | |
| background: var(--glass-bg); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 8px; | |
| padding: 15px; | |
| backdrop-filter: blur(10px); | |
| } | |
| .section-title { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 0.85rem; | |
| color: var(--text-primary); | |
| text-align: center; | |
| margin-bottom: 15px; | |
| } | |
| .title-decoration { color: var(--neon-magenta); margin: 0 10px; } | |
| .activities-grid, .travel-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 10px; | |
| } | |
| .activity-card, .travel-card { | |
| background: rgba(0, 0, 0, 0.4); | |
| border: 1px solid var(--dark-border); | |
| border-radius: 8px; | |
| padding: 15px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .activity-card:hover, .travel-card:hover { | |
| border-color: var(--neon-cyan); | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 20px rgba(0, 245, 255, 0.2); | |
| } | |
| .activity-icon, .travel-icon { | |
| font-size: 2rem; | |
| margin-bottom: 8px; | |
| } | |
| .activity-name, .travel-name { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 0.85rem; | |
| color: var(--neon-cyan); | |
| margin-bottom: 5px; | |
| } | |
| .activity-desc, .travel-desc { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| margin-bottom: 8px; | |
| } | |
| .activity-cost, .travel-time { | |
| font-size: 0.7rem; | |
| color: var(--neon-green); | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| /* Events Panel */ | |
| .npcs-container, .events-container { display: flex; flex-direction: column; gap: 10px; } | |
| .npc-item, .event-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px; | |
| background: rgba(0, 0, 0, 0.3); | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .npc-item:hover, .event-item:hover { | |
| background: rgba(0, 245, 255, 0.1); | |
| } | |
| .npc-avatar { | |
| width: 40px; height: 40px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--neon-magenta), var(--neon-cyan)); | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 1.2rem; | |
| } | |
| .npc-info, .event-info { flex: 1; } | |
| .npc-name, .event-name { | |
| font-size: 0.8rem; | |
| color: var(--text-primary); | |
| } | |
| .npc-role, .event-location { | |
| font-size: 0.65rem; | |
| color: var(--text-muted); | |
| } | |
| .npc-quest { color: var(--neon-yellow); font-size: 0.8rem; } | |
| .event-icon { font-size: 1.5rem; } | |
| .event-time { font-size: 0.7rem; color: var(--neon-orange); } | |
| /* Radio Player */ | |
| .radio-player { | |
| background: rgba(0, 0, 0, 0.4); | |
| border: 1px solid var(--dark-border); | |
| border-radius: 8px; | |
| padding: 12px; | |
| } | |
| .radio-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-bottom: 10px; | |
| font-size: 0.75rem; | |
| color: var(--neon-magenta); | |
| } | |
| .radio-display { | |
| background: var(--dark-bg); | |
| border-radius: 4px; | |
| padding: 8px; | |
| margin-bottom: 10px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .radio-wave { | |
| position: absolute; | |
| top: 50%; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: var(--neon-cyan); | |
| opacity: 0.3; | |
| animation: radioWave 1s ease-in-out infinite; | |
| } | |
| @keyframes radioWave { | |
| 0%, 100% { transform: scaleY(1); } | |
| 50% { transform: scaleY(3); } | |
| } | |
| .now-playing { | |
| font-size: 0.7rem; | |
| color: var(--text-secondary); | |
| display: block; | |
| text-align: center; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .radio-controls { | |
| display: flex; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| .radio-btn { | |
| background: transparent; | |
| border: 1px solid var(--dark-border); | |
| color: var(--text-primary); | |
| width: 35px; height: 35px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .radio-btn:hover { | |
| border-color: var(--neon-cyan); | |
| color: var(--neon-cyan); | |
| } | |
| .radio-btn.play { | |
| background: var(--neon-magenta); | |
| border-color: var(--neon-magenta); | |
| } | |
| /* Bottom HUD */ | |
| #bottom-hud { | |
| grid-column: 1 / -1; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| background: var(--glass-bg); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 8px; | |
| padding: 10px 20px; | |
| backdrop-filter: blur(10px); | |
| } | |
| .quick-actions { display: flex; gap: 10px; } | |
| .action-btn { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 3px; | |
| background: rgba(0, 0, 0, 0.4); | |
| border: 1px solid var(--dark-border); | |
| padding: 8px 15px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| color: var(--text-primary); | |
| } | |
| .action-btn:hover { | |
| border-color: var(--neon-cyan); | |
| background: rgba(0, 245, 255, 0.1); | |
| } | |
| .btn-icon { font-size: 1.2rem; } | |
| .btn-label { font-size: 0.6rem; color: var(--text-secondary); } | |
| .reputation-display { display: flex; align-items: center; gap: 15px; } | |
| .rep-label { font-size: 0.7rem; color: var(--text-muted); } | |
| .rep-bars { display: flex; gap: 10px; } | |
| .rep-bar { | |
| width: 100px; | |
| background: var(--dark-bg); | |
| border-radius: 3px; | |
| padding: 3px; | |
| position: relative; | |
| } | |
| .rep-name { | |
| font-size: 0.55rem; | |
| color: var(--text-muted); | |
| position: absolute; | |
| top: -12px; | |
| left: 0; | |
| } | |
| .rep-fill { | |
| height: 8px; | |
| background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta)); | |
| border-radius: 2px; | |
| } | |
| /* Modals */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; left: 0; | |
| width: 100%; height: 100%; | |
| background: rgba(0, 0, 0, 0.8); | |
| z-index: 500; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .modal.active { display: flex; } | |
| .modal-content { | |
| background: var(--dark-surface); | |
| border: 1px solid var(--neon-cyan); | |
| border-radius: 10px; | |
| width: 90%; | |
| max-width: 500px; | |
| max-height: 80vh; | |
| overflow: hidden; | |
| box-shadow: 0 0 50px rgba(0, 245, 255, 0.3); | |
| } | |
| .modal-content.large { max-width: 800px; } | |
| .modal-content.fullscreen { max-width: 95%; max-height: 90vh; } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 15px 20px; | |
| background: rgba(0, 245, 255, 0.1); | |
| border-bottom: 1px solid var(--glass-border); | |
| } | |
| .modal-header h2 { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 1rem; | |
| color: var(--neon-cyan); | |
| } | |
| .modal-close { | |
| background: transparent; | |
| border: none; | |
| color: var(--text-secondary); | |
| font-size: 1.2rem; | |
| cursor: pointer; | |
| transition: color 0.3s; | |
| } | |
| .modal-close:hover { color: var(--neon-red); } | |
| .modal-body { | |
| padding: 20px; | |
| overflow-y: auto; | |
| max-height: calc(80vh - 120px); | |
| } | |
| .modal-footer { | |
| padding: 15px 20px; | |
| border-top: 1px solid var(--glass-border); | |
| display: flex; | |
| gap: 10px; | |
| justify-content: flex-end; | |
| } | |
| /* Loading Screen */ | |
| #loading-screen { | |
| position: fixed; | |
| top: 0; left: 0; | |
| width: 100%; height: 100%; | |
| background: var(--dark-bg); | |
| z-index: 1000; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| #loading-screen.hidden { display: none; } | |
| .loading-content { text-align: center; } | |
| .loading-logo { margin-bottom: 40px; } | |
| .logo-text { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 3rem; | |
| color: var(--neon-cyan); | |
| text-shadow: 0 0 30px var(--neon-cyan); | |
| display: block; | |
| } | |
| .logo-year { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 5rem; | |
| font-weight: 900; | |
| background: linear-gradient(135deg, var(--neon-magenta), var(--neon-cyan)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| display: block; | |
| } | |
| .loading-bar { | |
| width: 300px; | |
| height: 4px; | |
| background: var(--dark-border); | |
| border-radius: 2px; | |
| margin: 0 auto 20px; | |
| overflow: hidden; | |
| } | |
| .loading-fill { | |
| height: 100%; | |
| width: 0; | |
| background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta)); | |
| transition: width 0.3s; | |
| } | |
| .loading-text { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| margin-bottom: 30px; | |
| } | |
| .loading-tips { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| font-style: italic; | |
| } | |
| /* Welcome Screen */ | |
| #welcome-screen { | |
| position: fixed; | |
| top: 0; left: 0; | |
| width: 100%; height: 100%; | |
| background: var(--dark-bg); | |
| z-index: 900; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| #welcome-screen.hidden { display: none; } | |
| .welcome-content { text-align: center; max-width: 600px; padding: 20px; } | |
| .welcome-header { margin-bottom: 40px; } | |
| .welcome-header h1 { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 3rem; | |
| color: var(--neon-cyan); | |
| text-shadow: 0 0 30px var(--neon-cyan); | |
| } | |
| .tagline { | |
| font-size: 1.2rem; | |
| color: var(--text-secondary); | |
| margin-top: 10px; | |
| } | |
| .character-creation h2 { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 1rem; | |
| color: var(--neon-magenta); | |
| margin-bottom: 20px; | |
| } | |
| .creation-form { display: flex; flex-direction: column; gap: 20px; } | |
| .form-group { text-align: left; } | |
| .form-group label { | |
| display: block; | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| margin-bottom: 8px; | |
| } | |
| .form-group input { | |
| width: 100%; | |
| padding: 12px 15px; | |
| background: var(--dark-card); | |
| border: 1px solid var(--dark-border); | |
| border-radius: 5px; | |
| color: var(--text-primary); | |
| font-family: 'Rajdhani', sans-serif; | |
| font-size: 1rem; | |
| transition: border-color 0.3s; | |
| } | |
| .form-group input:focus { | |
| outline: none; | |
| border-color: var(--neon-cyan); | |
| } | |
| .origin-options { display: flex; gap: 10px; } | |
| .origin-btn { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 5px; | |
| padding: 15px 10px; | |
| background: var(--dark-card); | |
| border: 2px solid var(--dark-border); | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| color: var(--text-primary); | |
| } | |
| .origin-btn:hover, .origin-btn.selected { | |
| border-color: var(--neon-cyan); | |
| background: rgba(0, 245, 255, 0.1); | |
| } | |
| .origin-icon { font-size: 1.5rem; } | |
| .origin-name { font-size: 0.8rem; font-weight: 600; } | |
| .origin-bonus { font-size: 0.65rem; color: var(--neon-green); } | |
| .start-btn { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| padding: 15px 30px; | |
| background: linear-gradient(135deg, var(--neon-magenta), var(--neon-cyan)); | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 1rem; | |
| color: var(--dark-bg); | |
| transition: all 0.3s; | |
| margin-top: 20px; | |
| } | |
| .start-btn:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 30px rgba(0, 245, 255, 0.5); | |
| } | |
| /* Glitch Effect */ | |
| .glitch { | |
| position: relative; | |
| animation: glitch 2s infinite; | |
| } | |
| @keyframes glitch { | |
| 0%, 100% { text-shadow: 0 0 30px var(--neon-cyan); } | |
| 20% { text-shadow: -3px 0 var(--neon-magenta), 3px 0 var(--neon-cyan); } | |
| 40% { text-shadow: 3px 0 var(--neon-magenta), -3px 0 var(--neon-cyan); } | |
| 60% { text-shadow: 0 0 30px var(--neon-cyan); } | |
| } | |
| /* Notifications */ | |
| #notifications-container { | |
| position: fixed; | |
| top: 90px; | |
| right: 20px; | |
| z-index: 600; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .notification { | |
| padding: 15px 20px; | |
| background: var(--glass-bg); | |
| border-left: 4px solid var(--neon-cyan); | |
| border-radius: 5px; | |
| backdrop-filter: blur(10px); | |
| animation: slideIn 0.3s ease; | |
| max-width: 300px; | |
| } | |
| .notification.success { border-color: var(--neon-green); } | |
| .notification.warning { border-color: var(--neon-orange); } | |
| .notification.error { border-color: var(--neon-red); } | |
| @keyframes slideIn { | |
| from { transform: translateX(100%); opacity: 0; } | |
| to { transform: translateX(0); opacity: 1; } | |
| } | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar { width: 6px; } | |
| ::-webkit-scrollbar-track { background: var(--dark-bg); } | |
| ::-webkit-scrollbar-thumb { background: var(--dark-border); border-radius: 3px; } | |
| ::-webkit-scrollbar-thumb:hover { background: var(--neon-cyan); } | |
| /* Responsive */ | |
| @media (max-width: 1200px) { | |
| #game-container { | |
| grid-template-columns: 1fr; | |
| grid-template-rows: auto; | |
| } | |
| #stats-panel, #events-panel { display: none; } | |
| } | |