/* 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; }
}