/* Urban Warfare - Next-Gen PvP Action Game Styles */
/* Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;500;700&display=swap');

/* CSS Variables */
:root {
    --primary: #00d4ff;
    --primary-dark: #0099cc;
    --secondary: #ff3366;
    --accent: #ffd700;
    --dark: #0a0a0f;
    --darker: #050508;
    --light: #ffffff;
    --gray: #8a8a9a;
    --success: #00ff88;
    --warning: #ffaa00;
    --danger: #ff3366;
    
    --font-display: 'Orbitron', sans-serif;
    --font-body: 'Rajdhani', sans-serif;
    
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--darker);
    font-family: var(--font-body);
    color: var(--light);
    user-select: none;
}

#game-container {
    width: 100%;
    height: 100%;
    position: relative;
}

#game-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

/* Loading Screen */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.loading-content {
    text-align: center;
    animation: fadeIn 1s ease;
}

.logo-container {
    margin-bottom: 3rem;
}

.game-title {
    font-family: var(--font-display);
    font-size: 5rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    background: linear-gradient(135deg, var(--light) 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 60px rgba(0, 212, 255, 0.5);
}

.game-title .highlight {
    color: var(--primary);
    -webkit-text-fill-color: var(--primary);
}

.tagline {
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: 0.5em;
    color: var(--gray);
    margin-top: 0.5rem;
}

.loading-bar-container {
    width: 400px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin: 2rem auto;
}

.loading-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    animation: loadingProgress 3s ease-in-out infinite;
    box-shadow: 0 0 20px var(--primary);
}

.loading-text {
    font-size: 1rem;
    color: var(--gray);
    letter-spacing: 0.2em;
    animation: pulse 2s ease infinite;
}

.loading-tips {
    margin-top: 3rem;
    padding: 1rem 2rem;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 8px;
}

.loading-tips p {
    color: var(--primary);
    font-size: 0.9rem;
}

/* Main Menu */
#main-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.menu-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 20% 80%, rgba(0, 212, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(255, 51, 102, 0.1) 0%, transparent 50%),
        linear-gradient(180deg, var(--darker) 0%, var(--dark) 100%);
    z-index: -1;
}

.city-silhouette {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 400"><path fill="%23111" d="M0,400 L0,300 L50,300 L50,250 L100,250 L100,320 L150,320 L150,200 L200,200 L200,350 L250,350 L250,280 L300,280 L300,400 L350,400 L350,220 L400,220 L400,380 L450,380 L450,260 L500,260 L500,400 L550,400 L550,180 L600,180 L600,340 L650,340 L650,290 L700,290 L700,400 L750,400 L750,240 L800,240 L800,360 L850,360 L850,270 L900,270 L900,400 L950,400 L950,190 L1000,190 L1000,330 L1050,330 L1050,280 L1100,280 L1100,400 L1150,400 L1150,210 L1200,210 L1200,370 L1250,370 L1250,250 L1300,250 L1300,400 L1350,400 L1350,300 L1400,300 L1400,350 L1450,350 L1450,230 L1500,230 L1500,400 L1550,400 L1550,260 L1600,260 L1600,340 L1650,340 L1650,290 L1700,290 L1700,400 L1750,400 L1750,200 L1800,200 L1800,360 L1850,360 L1850,280 L1920,280 L1920,400 Z"/></svg>') repeat-x bottom;
    background-size: 1920px 100%;
    opacity: 0.6;
    animation: cityScroll 60s linear infinite;
}

.particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, var(--primary), transparent),
        radial-gradient(2px 2px at 40px 70px, var(--accent), transparent),
        radial-gradient(1px 1px at 90px 40px, var(--light), transparent),
        radial-gradient(2px 2px at 130px 80px, var(--primary), transparent),
        radial-gradient(1px 1px at 160px 120px, var(--secondary), transparent);
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: particleFloat 20s linear infinite;
    opacity: 0.3;
}

.menu-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.logo-main {
    text-align: center;
    margin-bottom: 3rem;
}

.logo-main h1 {
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    background: linear-gradient(135deg, var(--light) 0%, var(--primary) 50%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-main .version {
    color: var(--gray);
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    margin-top: 0.5rem;
}

/* Main Navigation */
.main-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 900px;
    width: 100%;
    margin-bottom: 3rem;
}

.menu-btn {
    position: relative;
    padding: 1.5rem 2rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
}

.menu-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.menu-btn:hover::before {
    left: 100%;
}

.menu-btn.primary {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 212, 255, 0.05));
    border-color: var(--primary);
}

.menu-btn.primary:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 212, 255, 0.1));
    border-color: var(--primary);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
    transform: translateY(-2px);
}

.menu-btn.secondary {
    background: rgba(255, 255, 255, 0.03);
}

.menu-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--gray);
}

.btn-icon {
    font-size: 2rem;
}

.btn-text {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.btn-desc {
    font-size: 0.8rem;
    color: var(--gray);
}

/* Player Stats */
.player-stats {
    display: flex;
    gap: 3rem;
    padding: 1.5rem 3rem;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.stat-item {
    text-align: center;
}

.stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--gray);
    letter-spacing: 0.2em;
    margin-bottom: 0.3rem;
}

.stat-value {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
}

.stat-value.diamond {
    color: var(--primary);
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

/* Menu Footer */
.menu-footer {
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-btn {
    padding: 0.5rem 1.5rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    color: var(--gray);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.social-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.copyright {
    color: var(--gray);
    font-size: 0.8rem;
}

/* Game HUD */
#game-hud {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    pointer-events: none;
}

#game-hud > * {
    pointer-events: auto;
}

/* HUD Top Bar */
.hud-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
}

.match-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.timer {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--light);
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

.players-remaining {
    font-size: 0.9rem;
    color: var(--gray);
    letter-spacing: 0.1em;
}

.storm-warning {
    font-size: 0.8rem;
    color: var(--warning);
    animation: pulse 1s ease infinite;
}

/* Mini Map */
.mini-map-container {
    width: 180px;
    height: 180px;
    position: relative;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    overflow: hidden;
}

#mini-map {
    width: 100%;
    height: 100%;
}

.compass {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: var(--primary);
    font-weight: 700;
}

/* Crosshair */
.crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    pointer-events: none;
}

.crosshair-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    background: var(--light);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--primary);
}

.crosshair-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.crosshair-lines .line {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
}

.crosshair-lines .horizontal {
    width: 100%;
    height: 2px;
    top: 50%;
    transform: translateY(-50%);
}

.crosshair-lines .vertical {
    width: 2px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}

/* Hit Marker */
#hit-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    pointer-events: none;
}

.hit-lines {
    position: absolute;
    width: 100%;
    height: 100%;
}

.hit-line {
    position: absolute;
    width: 15px;
    height: 2px;
    background: var(--secondary);
    box-shadow: 0 0 10px var(--secondary);
}

.hit-line.tl { top: 0; left: 0; transform: rotate(45deg); transform-origin: left; }
.hit-line.tr { top: 0; right: 0; transform: rotate(-45deg); transform-origin: right; }
.hit-line.bl { bottom: 0; left: 0; transform: rotate(-45deg); transform-origin: left; }
.hit-line.br { bottom: 0; right: 0; transform: rotate(45deg); transform-origin: right; }

.hit-damage {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--secondary);
    text-shadow: 0 0 10px var(--secondary);
}

/* Kill Feed */
.kill-feed {
    position: absolute;
    top: 100px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.kill-entry {
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.7);
    border-left: 3px solid var(--secondary);
    font-size: 0.85rem;
    animation: slideInRight 0.3s ease;
}

.kill-entry .killer {
    color: var(--primary);
    font-weight: 600;
}

.kill-entry .weapon {
    color: var(--gray);
}

.kill-entry .victim {
    color: var(--secondary);
}

/* HUD Bottom */
.hud-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
}

/* Health & Shield */
.health-shield {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 250px;
}

.health-bar, .shield-bar {
    position: relative;
    height: 24px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bar-fill {
    height: 100%;
    transition: width var(--transition-fast);
}

.bar-fill.health {
    background: linear-gradient(90deg, var(--secondary), #ff5588);
}

.bar-fill.shield {
    background: linear-gradient(90deg, var(--primary), #44ddff);
}

.bar-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--light);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Weapon Info */
.weapon-info {
    text-align: center;
}

.weapon-name {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--gray);
    letter-spacing: 0.1em;
    margin-bottom: 0.3rem;
}

.ammo-count {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
}

.ammo-count .current {
    color: var(--light);
}

.ammo-count .separator {
    color: var(--gray);
    font-size: 1.5rem;
}

.ammo-count .reserve {
    color: var(--gray);
    font-size: 1.5rem;
}

.fire-mode {
    font-size: 0.75rem;
    color: var(--primary);
    letter-spacing: 0.2em;
    margin-top: 0.3rem;
}

/* Inventory */
.inventory {
    display: flex;
    gap: 0.5rem;
}

.slot {
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.slot.active {
    border-color: var(--primary);
    background: rgba(0, 212, 255, 0.1);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}

.slot-number {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 0.7rem;
    color: var(--gray);
}

.slot-icon {
    font-size: 1.5rem;
}

/* Action Hints */
.action-hints {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--gray);
}

.hint kbd {
    padding: 0.2rem 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--light);
}

/* Voice Chat */
.voice-chat {
    position: absolute;
    bottom: 200px;
    left: 20px;
}

.voice-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 20px;
}

.voice-waves {
    display: flex;
    gap: 2px;
    align-items: center;
    height: 20px;
}

.voice-waves span {
    width: 3px;
    background: var(--success);
    border-radius: 2px;
    animation: voiceWave 0.5s ease infinite alternate;
}

.voice-waves span:nth-child(2) { animation-delay: 0.1s; height: 60%; }
.voice-waves span:nth-child(3) { animation-delay: 0.2s; height: 40%; }

.voice-name {
    font-size: 0.8rem;
    color: var(--light);
}

/* Notifications */
.notifications {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.notification {
    padding: 1rem 2rem;
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid var(--accent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 1rem;
    animation: notificationPop 3s ease forwards;
}

.notif-icon {
    font-size: 1.5rem;
}

.notif-text {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
}

/* Pause Menu */
#pause-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pause-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.pause-content {
    position: relative;
    background: rgba(10, 10, 15, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 3rem;
    text-align: center;
    z-index: 1;
}

.pause-content h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    margin-bottom: 2rem;
    color: var(--light);
}

.pause-btn {
    display: block;
    width: 250px;
    padding: 1rem;
    margin: 0.5rem auto;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--light);
    font-family: var(--font-body);
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pause-btn:hover {
    background: rgba(0, 212, 255, 0.1);
    border-color: var(--primary);
}

.pause-btn[data-action="leave"] {
    color: var(--secondary);
    border-color: rgba(255, 51, 102, 0.3);
}

.pause-btn[data-action="leave"]:hover {
    background: rgba(255, 51, 102, 0.1);
    border-color: var(--secondary);
}

/* Death Screen */
#death-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
}

.death-content {
    text-align: center;
    animation: fadeIn 0.5s ease;
}

.placement {
    font-family: var(--font-display);
    font-size: 8rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--light), var(--gray));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.eliminated {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--secondary);
    letter-spacing: 0.3em;
    margin: 1rem 0;
}

.killer-info {
    margin: 2rem 0;
    padding: 1.5rem;
    background: rgba(255, 51, 102, 0.1);
    border: 1px solid rgba(255, 51, 102, 0.3);
    border-radius: 8px;
}

.killed-by {
    display: block;
    color: var(--gray);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.killer-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--secondary);
    font-weight: 700;
}

.killer-weapon {
    display: block;
    color: var(--gray);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.match-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin: 2rem 0;
}

.match-stats .stat {
    text-align: center;
}

.match-stats .stat-label {
    display: block;
    color: var(--gray);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.3rem;
}

.match-stats .stat-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--light);
}

.btn-primary {
    padding: 1rem 3rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border: none;
    border-radius: 8px;
    color: var(--dark);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes loadingProgress {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes cityScroll {
    from { background-position: 0 bottom; }
    to { background-position: -1920px bottom; }
}

@keyframes particleFloat {
    from { transform: translateY(0); }
    to { transform: translateY(-200px); }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes voiceWave {
    from { height: 20%; }
    to { height: 100%; }
}

@keyframes notificationPop {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    10% {
        opacity: 1;
        transform: scale(1.05);
    }
    20% {
        transform: scale(1);
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* Responsive */
@media (max-width: 1200px) {
    .main-nav {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .game-title {
        font-size: 3.5rem;
    }
}

@media (max-width: 768px) {
    .main-nav {
        grid-template-columns: 1fr;
    }
    
    .player-stats {
        flex-direction: column;
        gap: 1rem;
    }
    
    .hud-bottom {
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .inventory {
        order: -1;
        width: 100%;
        justify-content: center;
    }
}