/**
 * Mafia Wars - Components CSS
 * Consolidated from: page-components.css, new-pages.css, components.css
 */

/* ============================================
   FROM: page-components.css
   ============================================ */
/**
 * Mafia Wars - Page Components CSS
 * Shared styles for all game pages
 * Works with theme-ultimate.css
 */

/* ============================================
   PAGE LAYOUT
   ============================================ */
.page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
}

.page-header {
    background: var(--bg-card);
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.page-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.page-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.page-subtitle {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 4px;
}

.page-stats {
    display: flex;
    gap: 24px;
    align-items: center;
}

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

.page-stat-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

.page-stat-value.energy { color: var(--color-energy); }
.page-stat-value.gold { color: var(--accent-gold); }
.page-stat-value.cash { color: var(--color-cash); }
.page-stat-value.health { color: var(--color-health); }

/* ============================================
   TAB NAVIGATION
   ============================================ */
.tab-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
}

.tab-nav::-webkit-scrollbar {
    display: none;
}

.tab-btn {
    padding: 10px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 150ms ease;
}

.tab-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-light);
}

.tab-btn.active {
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.2) 0%, rgba(201, 162, 39, 0.05) 100%);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

/* ============================================
   MISSION / JOB CARDS
   ============================================ */
.mission-card {
    background: var(--bg-card);
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all 150ms ease;
}

.mission-card:hover {
    border-color: var(--border-light);
    background: var(--bg-card-hover);
}

.mission-card.locked {
    opacity: 0.6;
}

.mission-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.mission-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-white);
    margin: 0;
}

.mission-level {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.mission-level span {
    color: var(--color-energy);
}

.mission-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
}

.mission-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.mission-stat-icon {
    width: 16px;
    height: 16px;
    opacity: 0.8;
}

.mission-stat.energy { color: var(--color-energy); }
.mission-stat.cash { color: var(--color-cash); }
.mission-stat.xp { color: var(--color-xp); }
.mission-stat.success { color: var(--color-cash); }
.mission-stat.time { color: var(--text-secondary); }

/* Mission Progress */
.mission-progress {
    margin-bottom: 12px;
}

.mission-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.mission-progress-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.mission-progress-value {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.mission-progress-bar {
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    overflow: hidden;
}

.mission-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-gold-dark), var(--accent-gold));
    border-radius: 3px;
    transition: width 300ms ease;
}

/* Mastery Stars */
.mission-mastery {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.mastery-star {
    width: 16px;
    height: 16px;
    color: var(--border-dark);
}

.mastery-star.bronze { color: #cd7f32; }
.mastery-star.silver { color: #c0c0c0; }
.mastery-star.gold { color: #ffd700; }
.mastery-star.ruby { color: #e0115f; }

/* Mission Button */
.mission-btn {
    width: 100%;
    padding: 12px;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 150ms ease;
}

.mission-btn.do-job {
    background: linear-gradient(180deg, var(--accent-gold-light) 0%, var(--accent-gold) 50%, var(--accent-gold-dark) 100%);
    color: #000;
}

.mission-btn.do-job:hover {
    background: linear-gradient(180deg, #e8c94a 0%, var(--accent-gold-light) 50%, var(--accent-gold) 100%);
}

.mission-btn.in-progress {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: not-allowed;
}

.mission-btn.locked {
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* ============================================
   ITEM / EQUIPMENT CARDS
   ============================================ */
.item-card {
    background: var(--bg-card);
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    transition: all 150ms ease;
}

.item-card:hover {
    border-color: var(--border-light);
    transform: translateY(-2px);
}

.item-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.item-name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 4px;
}

.item-type {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.item-stats {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.item-stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

.item-stat.attack { color: var(--color-health); }
.item-stat.defense { color: var(--color-energy); }

.item-quantity {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Rarity Colors */
.item-card.common { border-color: var(--border-dark); }
.item-card.uncommon { border-color: #2ecc71; }
.item-card.rare { border-color: #3498db; }
.item-card.epic { border-color: #9b59b6; }
.item-card.legendary { border-color: #f1c40f; }

/* ============================================
   GRID LAYOUTS
   ============================================ */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

/* Responsive Grid */
@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
    
    .grid-auto {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .grid-3, .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   LISTS
   ============================================ */
.list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    transition: all 150ms ease;
}

.list-item:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-light);
}

.list-item-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.list-item-icon {
    width: 40px;
    height: 40px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.list-item-name {
    font-weight: 600;
    color: var(--text-white);
}

.list-item-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.list-item-value {
    font-family: var(--font-mono);
    font-weight: 600;
}

/* ============================================
   STAT BOXES
   ============================================ */
.stat-box {
    background: var(--bg-card);
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.stat-box-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.stat-box-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 4px;
}

.stat-box-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================
   LEADERBOARD / RANKING
   ============================================ */
.leaderboard {
    background: var(--bg-card);
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    overflow: hidden;
}

.leaderboard-header {
    display: grid;
    grid-template-columns: 60px 1fr 100px;
    gap: 16px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-dark);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.leaderboard-row {
    display: grid;
    grid-template-columns: 60px 1fr 100px;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-dark);
    align-items: center;
    transition: background 150ms ease;
}

.leaderboard-row:last-child {
    border-bottom: none;
}

.leaderboard-row:hover {
    background: var(--bg-secondary);
}

.leaderboard-rank {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
}

.leaderboard-rank.gold { color: #ffd700; }
.leaderboard-rank.silver { color: #c0c0c0; }
.leaderboard-rank.bronze { color: #cd7f32; }

.leaderboard-player {
    display: flex;
    align-items: center;
    gap: 12px;
}

.leaderboard-avatar {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: var(--bg-tertiary);
}

.leaderboard-name {
    font-weight: 600;
    color: var(--text-white);
}

.leaderboard-level {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.leaderboard-score {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--accent-gold);
    text-align: right;
}

/* ============================================
   FIGHT / COMBAT
   ============================================ */
.fight-result {
    background: var(--bg-card);
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    padding: 24px;
    text-align: center;
}

.fight-result.victory {
    border-color: var(--color-cash);
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.1) 0%, var(--bg-card) 100%);
}

.fight-result.defeat {
    border-color: var(--color-health);
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.1) 0%, var(--bg-card) 100%);
}

.fight-result-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.fight-result.victory .fight-result-title { color: var(--color-cash); }
.fight-result.defeat .fight-result-title { color: var(--color-health); }

.fight-rewards {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 16px;
}

.fight-reward {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 600;
}

.fight-reward.cash { color: var(--color-cash); }
.fight-reward.xp { color: var(--color-xp); }

/* ============================================
   EMPTY STATES
   ============================================ */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.empty-state-text {
    font-size: 0.9rem;
    max-width: 400px;
    margin: 0 auto;
}

/* ============================================
   LOADING STATE
   ============================================ */
.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: var(--text-muted);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-dark);
    border-top-color: var(--accent-gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    font-size: 0.9rem;
}

/* ============================================
   BADGES & TAGS
   ============================================ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
}

.badge-gold {
    background: rgba(201, 162, 39, 0.2);
    color: var(--accent-gold);
    border: 1px solid var(--accent-gold);
}

.badge-green {
    background: rgba(46, 204, 113, 0.2);
    color: var(--color-cash);
    border: 1px solid var(--color-cash);
}

.badge-red {
    background: rgba(231, 76, 60, 0.2);
    color: var(--color-health);
    border: 1px solid var(--color-health);
}

.badge-blue {
    background: rgba(52, 152, 219, 0.2);
    color: var(--color-energy);
    border: 1px solid var(--color-energy);
}

/* ============================================
   TOOLTIPS
   ============================================ */
.tooltip {
    position: relative;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-primary);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 150ms ease;
    z-index: 100;
}

.tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   MOBILE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    .page-header {
        padding: 12px 16px;
    }
    
    .page-header-content {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .page-title {
        font-size: 1.25rem;
    }
    
    .page-stats {
        width: 100%;
        justify-content: space-between;
    }
    
    .mission-card {
        padding: 12px;
    }
    
    .mission-stats {
        gap: 12px;
    }
    
    .item-icon {
        width: 48px;
        height: 48px;
    }
    
    .stat-box-value {
        font-size: 1.25rem;
    }
}

/* ============================================
   FROM: new-pages.css
   ============================================ */
/* ============================================
   NEW PAGES STYLES
   ============================================ */

/* Common Page Styles */
.page-header {
    text-align: center;
    margin-bottom: 2rem;
}

.page-header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--gold);
}

.page-header p {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

/* Tabs */
.inventory-tabs,
.fight-tabs,
.properties-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.tab-btn {
    padding: 0.75rem 2rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s;
    font-size: 1rem;
}

.tab-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--gold);
}

.tab-btn.active {
    background: var(--accent-gradient);
    border-color: var(--gold);
    color: white;
}

/* ============================================
   INVENTORY PAGE
   ============================================ */

.inventory-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.equipment-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s;
    font-size: 0.9rem;
}

.filter-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.filter-btn.active {
    background: rgba(212, 175, 55, 0.2);
    border-color: var(--gold);
    color: var(--gold);
}

.equipment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.equipment-card {
    background: var(--card-bg);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s;
}

.equipment-card:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.2);
}

.equipment-card.locked {
    opacity: 0.6;
}

.equipment-card.expensive {
    border-color: rgba(255, 0, 0, 0.3);
}

.equipment-card.owned {
    border-color: rgba(0, 255, 0, 0.3);
}

.equipment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.equipment-type {
    font-size: 2rem;
}

.equipment-tier {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
}

.tier-1 { background: rgba(128, 128, 128, 0.3); color: #aaa; }
.tier-2 { background: rgba(0, 255, 0, 0.3); color: #0f0; }
.tier-3 { background: rgba(0, 128, 255, 0.3); color: #08f; }
.tier-4 { background: rgba(128, 0, 255, 0.3); color: #a0f; }
.tier-5 { background: rgba(255, 215, 0, 0.3); color: #fd0; }

.equipment-card h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: var(--gold);
}

.equipment-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.equipment-stats .stat {
    flex: 1;
    text-align: center;
    font-weight: bold;
}

.equipment-info {
    margin-bottom: 1rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.info-row:last-child {
    border-bottom: none;
}

.user-resources {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 12px;
}

.user-resources .resource {
    font-size: 1.2rem;
    font-weight: bold;
}

.inventory-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--card-bg);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.stat-card h3 {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--gold);
}

/* ============================================
   FIGHT PAGE
   ============================================ */

.fight-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.combat-info {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.info-card {
    background: var(--card-bg);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    text-align: center;
}

.targets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.target-card {
    background: var(--card-bg);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s;
}

.target-card:hover {
    transform: translateY(-4px);
    border-color: var(--danger);
    box-shadow: 0 8px 24px rgba(255, 0, 0, 0.2);
}

.target-header {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.target-header .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid var(--gold);
}

.target-info h3 {
    font-size: 1.3rem;
    color: var(--gold);
    margin-bottom: 0.25rem;
}

.target-stats {
    margin-bottom: 1rem;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.health-bar {
    height: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    overflow: hidden;
    margin: 1rem 0;
}

.health-fill {
    height: 100%;
    background: linear-gradient(90deg, #f00, #0f0);
    transition: width 0.3s;
}

.win-chance {
    text-align: center;
    padding: 0.75rem;
    border-radius: 8px;
    margin: 1rem 0;
    font-weight: bold;
}

.win-high {
    background: rgba(0, 255, 0, 0.2);
    color: #0f0;
}

.win-medium {
    background: rgba(255, 255, 0, 0.2);
    color: #ff0;
}

.win-low {
    background: rgba(255, 0, 0, 0.2);
    color: #f00;
}

.fight-result-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s;
}

.result-content {
    background: var(--card-bg);
    border: 3px solid var(--gold);
    border-radius: 16px;
    padding: 2rem;
    max-width: 500px;
    text-align: center;
}

.fight-result-modal.fight-win {
    background: rgba(0, 100, 0, 0.3);
}

.fight-result-modal.fight-loss {
    background: rgba(100, 0, 0, 0.3);
}

.fight-details {
    margin: 2rem 0;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    margin: 0.5rem 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.detail-row.loot-drop {
    background: rgba(212, 175, 55, 0.2);
    border: 2px solid var(--gold);
}

.level-up-banner {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--accent-gradient);
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: bold;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.history-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--card-bg);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.history-item.won {
    border-left: 4px solid #0f0;
}

.history-item.lost {
    border-left: 4px solid #f00;
}

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

.history-details {
    flex: 1;
}

.history-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.history-time {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

/* ============================================
   PROPERTIES PAGE
   ============================================ */

.properties-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.quick-actions {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.properties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.property-card {
    background: var(--card-bg);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s;
    position: relative;
}

.property-card:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.2);
}

.property-card.owned {
    border-color: rgba(0, 255, 0, 0.3);
}

.property-card.locked {
    opacity: 0.6;
}

.owned-label {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0, 255, 0, 0.2);
    color: #0f0;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
}

.property-card h3 {
    font-size: 1.3rem;
    color: var(--gold);
    margin-bottom: 0.5rem;
}

.property-level {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(212, 175, 55, 0.2);
    border-radius: 12px;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.property-description {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.property-info {
    margin: 1rem 0;
}

.info-row.special {
    background: rgba(212, 175, 55, 0.1);
    padding: 0.5rem;
    border-radius: 6px;
    margin-top: 0.5rem;
}

.collection-progress {
    margin: 1rem 0;
}

.progress-bar {
    height: 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: var(--accent-gradient);
    transition: width 0.3s;
}

.progress-text {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.property-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ============================================
   CREW PAGE
   ============================================ */

.crew-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.mafia-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.top-positions {
    margin-bottom: 3rem;
}

.top-positions h2 {
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--gold);
}

.subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.positions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.position-card {
    background: var(--card-bg);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s;
}

.position-card:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
}

.position-card.assigned {
    border-color: rgba(0, 255, 0, 0.5);
}

.position-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.position-icon {
    font-size: 2.5rem;
}

.position-bonus {
    color: var(--gold);
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.position-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.assigned-member {
    padding: 1rem;
    background: rgba(0, 255, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.empty-slot {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.crew-members h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--gold);
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.member-card {
    background: var(--card-bg);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s;
}

.member-card:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
}

.member-card.positioned {
    border-color: rgba(0, 255, 0, 0.5);
}

.member-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    margin-bottom: 0.5rem;
}

.member-level {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.member-position {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(212, 175, 55, 0.2);
    border-radius: 12px;
    font-size: 0.75rem;
    margin-top: 0.5rem;
}

.member-stats {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.hire-section {
    margin-top: 3rem;
    padding: 2rem;
    background: var(--card-bg);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    text-align: center;
}

.hire-section h3 {
    color: var(--gold);
    margin-bottom: 0.5rem;
}

.hire-section p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.assign-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.assign-modal .modal-content {
    background: var(--card-bg);
    border: 2px solid var(--gold);
    border-radius: 16px;
    padding: 2rem;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
}

.member-select-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
}

.member-select-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.member-select-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.member-select-item > div {
    flex: 1;
}

.current-pos {
    color: var(--gold);
    font-size: 0.85rem;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-danger {
    color: #f00;
}

.text-success {
    color: #0f0;
}

.text-rare {
    color: var(--gold);
    font-weight: bold;
}

.text-secondary {
    color: var(--text-secondary);
}

.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.empty-state button {
    margin-top: 1rem;
}

.loading {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.error-message {
    padding: 1rem;
    background: rgba(255, 0, 0, 0.1);
    border: 2px solid rgba(255, 0, 0, 0.3);
    border-radius: 8px;
    color: #f00;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .equipment-grid,
    .targets-grid,
    .properties-grid {
        grid-template-columns: 1fr;
    }
    
    .members-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    
    .positions-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   FROM: components.css (original)
   ============================================ */
/* Reusable Components */

/* Buttons */
.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.2s;
    display: inline-block;
}

.btn-primary {
    background: var(--color-accent, #d4af37);
    color: var(--color-bg-dark, #0a0a0f);
}

.btn-primary:hover {
    background: var(--color-accent-light, #f0d060);
    transform: translateY(-2px);
}

.btn-secondary {
    background: var(--color-bg-card, #1a1a2e);
    color: var(--color-text, #e0e0e0);
    border: 1px solid var(--color-accent, #d4af37);
}

/* Cards */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.card-header {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-dark);
}

.card-body {
    padding: 0;
}

.card-title {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--accent-gold);
}

/* Forms */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.form-input {
    width: 100%;
    padding: 0.75rem;
    background: var(--color-bg-dark, #0a0a0f);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 4px;
    color: var(--color-text, #e0e0e0);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-accent, #d4af37);
}

/* Modal */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-bg-card, #1a1a2e);
    border-radius: 8px;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    z-index: 1001;
}

/* Toast */
.toast {
    position: fixed;
    top: 1rem;
    right: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    z-index: 2000;
}

.toast-success {
    background: #10b981;
    color: white;
}

.toast-error {
    background: #ef4444;
    color: white;
}

.toast-warning {
    background: #f59e0b;
    color: white;
}

/* Badge */
.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
}

.badge-gold {
    background: var(--color-accent, #d4af37);
    color: var(--color-bg-dark, #0a0a0f);
}

.badge-danger {
    background: #ef4444;
    color: white;
}

/* ============================================
   FROM: page-overrides.css
   ============================================ */
/**
 * Mafia Wars - Page Style Overrides
 * Overrides inline styles from JS-rendered pages
 * Uses !important to override inline styles
 */

/* ============================================
   GLOBAL PAGE OVERRIDES
   ============================================ */

/* Force page background */
.missions-page,
.fight-page,
.inventory-page,
.properties-page,
.dashboard-page,
.crew-page,
.travel-page,
.achievements-page,
.leaderboard-page,
.store-page,
.skills-page,
.bosses-page,
.robbing-page,
.collections-page,
.daily-page,
.family-page,
.hitlist-page,
.operations-page,
.crafting-page,
.gifts-page,
.stash-page,
[class*="-page"] {
    color: var(--text-primary) !important;
}

/* ============================================
   HEADER OVERRIDES
   ============================================ */
.page-header,
[class*="page-header"],
div[style*="linear-gradient"][style*="padding"][style*="border-radius"] {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-dark) !important;
    border-radius: 8px !important;
}

/* Page titles */
.page-header h1,
[class*="page-header"] h1,
h1[style*="color: #d4af37"],
h1[style*="color:#d4af37"] {
    font-family: var(--font-display) !important;
    color: var(--accent-gold) !important;
    font-size: 1.5rem !important;
    letter-spacing: 1px !important;
}

/* Page subtitles */
.page-header p,
[class*="page-header"] p,
p[style*="color: #a0a0a0"] {
    color: var(--text-secondary) !important;
    font-size: 0.85rem !important;
}

/* ============================================
   TAB / TIER BUTTON OVERRIDES
   ============================================ */
.tier-btn,
.tab-btn,
button[class*="tier"],
button[class*="tab"],
button[style*="background: rgba(255, 255, 255, 0.05)"],
button[style*="background: linear-gradient"] {
    font-family: var(--font-display) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 10px 16px !important;
    border-radius: 6px !important;
    transition: all 150ms ease !important;
}

/* Inactive tabs */
button[style*="background: rgba(255, 255, 255, 0.05)"] {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-dark) !important;
    color: var(--text-secondary) !important;
}

button[style*="background: rgba(255, 255, 255, 0.05)"]:hover {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-light) !important;
    color: var(--text-white) !important;
}

/* Active tabs */
button[style*="border: 2px solid #d4af37"],
button[style*="border: 2px solid rgb(212, 175, 55)"],
.tier-btn.active,
.tab-btn.active {
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.2) 0%, rgba(201, 162, 39, 0.05) 100%) !important;
    border: 1px solid var(--accent-gold) !important;
    color: var(--accent-gold) !important;
}

/* ============================================
   CARD OVERRIDES  
   ============================================ */
.mission-card,
.item-card,
.property-card,
.achievement-card,
.boss-card,
div[style*="background: rgba(26, 26, 46"],
div[style*="background: linear-gradient(135deg, #1a1a2e"],
div[style*="background: #1a1a2e"],
div[style*="background: rgba(255, 255, 255, 0.02)"],
div[style*="background: rgba(255, 255, 255, 0.03)"],
div[style*="background: rgba(255, 255, 255, 0.05)"] {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-dark) !important;
    border-radius: 8px !important;
}

div[style*="background: rgba(26, 26, 46"]:hover,
div[style*="background: rgba(255, 255, 255, 0.02)"]:hover,
div[style*="background: rgba(255, 255, 255, 0.03)"]:hover {
    background: var(--bg-card-hover) !important;
    border-color: var(--border-light) !important;
}

/* ============================================
   BUTTON OVERRIDES
   ============================================ */
/* Primary/Gold buttons */
button[style*="background: #d4af37"],
button[style*="background: linear-gradient"][style*="#d4af37"],
button[style*="background-color: #d4af37"],
.btn-gold,
.do-job-btn {
    background: linear-gradient(180deg, var(--accent-gold-light) 0%, var(--accent-gold) 50%, var(--accent-gold-dark) 100%) !important;
    color: #000 !important;
    border: none !important;
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 6px !important;
}

button[style*="background: #d4af37"]:hover,
button[style*="background: linear-gradient"][style*="#d4af37"]:hover {
    background: linear-gradient(180deg, #e8c94a 0%, var(--accent-gold-light) 50%, var(--accent-gold) 100%) !important;
}

/* Secondary buttons */
button[style*="background: rgba(255, 255, 255, 0.1)"],
button[style*="background: #2a2a3e"],
.btn-secondary {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-dark) !important;
    color: var(--text-primary) !important;
}

/* Disabled buttons */
button:disabled,
button[disabled],
button[style*="opacity: 0.5"],
button[style*="cursor: not-allowed"] {
    background: var(--bg-secondary) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* ============================================
   PROGRESS BAR OVERRIDES
   ============================================ */
.mastery-bar,
.progress-bar-container,
div[style*="background: rgba(255, 255, 255, 0.1)"][style*="height"] {
    background: var(--bg-input) !important;
    border-radius: 4px !important;
}

.mastery-progress,
.progress-fill,
div[style*="background: linear-gradient"][style*="height: 100%"] {
    border-radius: 4px !important;
}

/* Progress colors */
div[style*="background: linear-gradient(90deg, #10b981"],
div[style*="background: #10b981"] {
    background: linear-gradient(90deg, var(--color-cash-dark), var(--color-cash)) !important;
}

div[style*="background: linear-gradient(90deg, #3b82f6"],
div[style*="background: #3b82f6"] {
    background: linear-gradient(90deg, var(--color-energy-dark), var(--color-energy)) !important;
}

div[style*="background: linear-gradient(90deg, #f59e0b"],
div[style*="background: #f59e0b"] {
    background: linear-gradient(90deg, var(--color-stamina-dark), var(--color-stamina)) !important;
}

div[style*="background: linear-gradient(90deg, #ef4444"],
div[style*="background: #ef4444"] {
    background: linear-gradient(90deg, var(--color-health-dark), var(--color-health)) !important;
}

/* Gold/XP bars */
div[style*="background: linear-gradient(90deg, #d4af37"],
div[style*="background: #d4af37"][style*="height"] {
    background: linear-gradient(90deg, var(--accent-gold-dark), var(--accent-gold)) !important;
}

/* ============================================
   TEXT COLOR OVERRIDES
   ============================================ */
/* Gold text */
span[style*="color: #d4af37"],
div[style*="color: #d4af37"],
p[style*="color: #d4af37"] {
    color: var(--accent-gold) !important;
}

/* Green/Cash text */
span[style*="color: #10b981"],
span[style*="color: #2ecc71"],
div[style*="color: #10b981"],
div[style*="color: #2ecc71"] {
    color: var(--color-cash) !important;
}

/* Blue/Energy text */
span[style*="color: #3b82f6"],
div[style*="color: #3b82f6"] {
    color: var(--color-energy) !important;
}

/* Orange/Stamina text */
span[style*="color: #f59e0b"],
span[style*="color: #e67e22"],
div[style*="color: #f59e0b"] {
    color: var(--color-stamina) !important;
}

/* Red/Health text */
span[style*="color: #ef4444"],
span[style*="color: #e74c3c"],
div[style*="color: #ef4444"] {
    color: var(--color-health) !important;
}

/* Muted text */
span[style*="color: #a0a0a0"],
div[style*="color: #a0a0a0"],
p[style*="color: #a0a0a0"],
span[style*="color: #666"],
span[style*="color: #6b7280"] {
    color: var(--text-secondary) !important;
}

/* White text */
span[style*="color: white"],
span[style*="color: #fff"],
span[style*="color: #ffffff"],
div[style*="color: white"] {
    color: var(--text-white) !important;
}

/* ============================================
   FONT OVERRIDES
   ============================================ */
/* Display font for headers */
h1, h2, h3,
[style*="font-family: 'Bebas Neue'"],
[style*="font-family: 'Georgia'"],
[style*="letter-spacing: 2px"] {
    font-family: var(--font-display) !important;
}

/* Monospace for numbers */
[style*="font-family: monospace"],
.stat-value,
.money-value {
    font-family: var(--font-mono) !important;
}

/* ============================================
   INPUT OVERRIDES
   ============================================ */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea,
select {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-dark) !important;
    border-radius: 6px !important;
    color: var(--text-primary) !important;
    font-family: var(--font-body) !important;
    padding: 10px 12px !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent-gold) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px var(--accent-gold-glow) !important;
}

/* ============================================
   TABLE OVERRIDES
   ============================================ */
table {
    width: 100%;
    border-collapse: collapse;
}

th {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.5px !important;
    padding: 12px !important;
    text-align: left !important;
    border-bottom: 1px solid var(--border-dark) !important;
}

td {
    padding: 12px !important;
    border-bottom: 1px solid var(--border-dark) !important;
    color: var(--text-primary) !important;
}

tr:hover td {
    background: var(--bg-secondary) !important;
}

/* ============================================
   MODAL OVERRIDES
   ============================================ */
.modal,
div[style*="position: fixed"][style*="background: rgba(0, 0, 0"] {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(4px) !important;
}

.modal-content,
div[style*="position: fixed"] > div[style*="background: #1a1a2e"],
div[style*="position: fixed"] > div[style*="background: linear-gradient"] {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-dark) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-lg) !important;
}

/* ============================================
   LOADING STATES
   ============================================ */
div[style*="animation: spin"],
.loading-spinner {
    color: var(--accent-gold) !important;
}

/* ============================================
   SCROLLBAR IN CONTENT
   ============================================ */
.missions-grid::-webkit-scrollbar,
.inventory-grid::-webkit-scrollbar,
[class*="-grid"]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.missions-grid::-webkit-scrollbar-track,
[class*="-grid"]::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

.missions-grid::-webkit-scrollbar-thumb,
[class*="-grid"]::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

/* ============================================
   SPECIFIC PAGE FIXES
   ============================================ */

/* Dashboard stat cards */
.dashboard-page .stat-card,
div[style*="text-align: center"][style*="padding"][style*="background"] {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-dark) !important;
    border-radius: 8px !important;
}

/* Inventory item slots */
.inventory-slot,
.item-slot {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-dark) !important;
}

/* Fight page opponent cards */
.opponent-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-dark) !important;
}

/* Properties income display */
.income-display {
    color: var(--color-cash) !important;
    font-family: var(--font-mono) !important;
}

/* Achievement badges */
.achievement-badge {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-dark) !important;
}

.achievement-badge.unlocked {
    border-color: var(--accent-gold) !important;
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.1) 0%, var(--bg-card) 100%) !important;
}

/* ============================================
   TOAST NOTIFICATION OVERRIDES
   ============================================ */
#toast-container .toast,
.toast-notification {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-dark) !important;
    border-radius: 8px !important;
    font-family: var(--font-body) !important;
    box-shadow: var(--shadow-lg) !important;
}

.toast.success,
.toast-notification.success {
    border-left: 4px solid var(--color-cash) !important;
}

.toast.error,
.toast-notification.error {
    border-left: 4px solid var(--color-health) !important;
}

.toast.warning,
.toast-notification.warning {
    border-left: 4px solid var(--color-stamina) !important;
}

.toast.info,
.toast-notification.info {
    border-left: 4px solid var(--color-energy) !important;
}

/* ============================================
   HELP BUTTON & MODAL (NEW)
   ============================================ */
.help-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: var(--bg-tertiary, #222228);
    border: 1px solid var(--border-dark, #2a2a30);
    color: var(--text-secondary, #a0a0a0);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 150ms ease;
    flex-shrink: 0;
}

.help-btn:hover {
    background: var(--accent-gold, #c9a227);
    color: #000;
    border-color: var(--accent-gold, #c9a227);
    transform: scale(1.1);
}

#help-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 200ms ease;
}

#help-modal.active {
    display: flex;
    opacity: 1;
}

.help-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}

.help-modal-content {
    position: relative;
    background: var(--bg-card, #1e1e24);
    border: 1px solid var(--border-dark, #2a2a30);
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 200ms ease;
}

#help-modal.active .help-modal-content {
    transform: scale(1);
}

.help-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--bg-tertiary, #222228);
    border-bottom: 1px solid var(--border-dark, #2a2a30);
}

.help-modal-header h2 {
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-size: 1.25rem;
    color: var(--accent-gold, #c9a227);
    margin: 0;
}

.help-modal-close {
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--border-dark, #2a2a30);
    border-radius: 6px;
    color: var(--text-secondary, #a0a0a0);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 150ms ease;
}

.help-modal-close:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #ef4444;
}

.help-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    color: var(--text-primary, #e8e8e8);
    line-height: 1.6;
}

.help-modal-body h4 {
    color: var(--accent-gold, #c9a227);
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-size: 1rem;
    margin: 1.25rem 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.help-modal-body h4:first-child {
    margin-top: 0;
}

.help-modal-body p {
    margin-bottom: 0.75rem;
    color: var(--text-secondary, #a0a0a0);
}

.help-modal-body ul, .help-modal-body ol {
    margin: 0.5rem 0 1rem 1.5rem;
    color: var(--text-secondary, #a0a0a0);
}

.help-modal-body li {
    margin-bottom: 0.35rem;
}

.help-modal-body strong {
    color: var(--text-primary, #e8e8e8);
}

.help-modal-body code {
    background: var(--bg-input, #0a0a0c);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-family: var(--font-mono, monospace);
    font-size: 0.85em;
    color: var(--color-energy, #3498db);
}

/* ============================================
   GLOBAL ANIMATION SYSTEM
   ============================================ */

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

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

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

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

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

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

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes slideInUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.3); }
    50% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.6), 0 0 40px rgba(212, 175, 55, 0.3); }
}

@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes glow {
    0%, 100% { filter: drop-shadow(0 0 2px currentColor); }
    50% { filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 15px currentColor); }
}

@keyframes ripple {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(4); opacity: 0; }
}

@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.1); }
    28% { transform: scale(1); }
    42% { transform: scale(1.1); }
    70% { transform: scale(1); }
}

@keyframes slideProgress {
    from { width: 0; }
    to { width: var(--progress, 100%); }
}

/* Animation Utility Classes */
.animate-fadeIn { animation: fadeIn 0.3s ease both; }
.animate-fadeInUp { animation: fadeInUp 0.4s ease both; }
.animate-fadeInDown { animation: fadeInDown 0.4s ease both; }
.animate-fadeInLeft { animation: fadeInLeft 0.4s ease both; }
.animate-fadeInRight { animation: fadeInRight 0.4s ease both; }
.animate-scaleIn { animation: scaleIn 0.3s ease both; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-pulseGlow { animation: pulseGlow 2s ease-in-out infinite; }
.animate-shimmer { animation: shimmer 2s linear infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-bounce { animation: bounce 1s ease infinite; }
.animate-shake { animation: shake 0.5s ease; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-glow { animation: glow 2s ease-in-out infinite; }
.animate-heartbeat { animation: heartbeat 1.5s ease-in-out infinite; }

/* Animation Delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

/* Stagger Animation for Lists */
.stagger-list > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-list > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-list > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-list > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-list > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-list > *:nth-child(6) { animation-delay: 0.3s; }
.stagger-list > *:nth-child(7) { animation-delay: 0.35s; }
.stagger-list > *:nth-child(8) { animation-delay: 0.4s; }
.stagger-list > *:nth-child(9) { animation-delay: 0.45s; }
.stagger-list > *:nth-child(10) { animation-delay: 0.5s; }

/* ============================================
   ENHANCED CARD STYLES
   ============================================ */
.game-card {
    background: linear-gradient(145deg, var(--bg-card) 0%, rgba(20, 20, 35, 0.95) 100%);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.game-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-light), var(--accent-gold));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.game-card:hover {
    transform: translateY(-3px);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(212, 175, 55, 0.1);
}

.game-card:hover::before {
    opacity: 1;
}

.game-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.game-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.05) 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    animation: float 3s ease-in-out infinite;
}

.game-card-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.game-card-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ============================================
   ENHANCED BUTTONS
   ============================================ */
.btn-primary {
    background: linear-gradient(135deg, var(--accent-gold) 0%, #b8860b 100%);
    color: #000;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

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

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.4);
}

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

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    color: var(--text-primary);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.1) 100%);
    border-color: rgba(212, 175, 55, 0.5);
    transform: translateY(-2px);
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    color: white;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(239, 68, 68, 0.4);
}

.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    color: white;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(16, 185, 129, 0.4);
}

/* ============================================
   PROGRESS BARS
   ============================================ */
.progress-bar {
    height: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
    position: relative;
}

.progress-bar-fill.animated::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 2s linear infinite;
    background-size: 200% 100%;
}

.progress-bar-fill.energy {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.progress-bar-fill.health {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.progress-bar-fill.stamina {
    background: linear-gradient(90deg, #06b6d4, #22d3ee);
}

.progress-bar-fill.xp {
    background: linear-gradient(90deg, #8b5cf6, #a78bfa);
}

.progress-bar-fill.gold {
    background: linear-gradient(90deg, #d4af37, #f0d060);
}

/* ============================================
   STAT DISPLAYS
   ============================================ */
.stat-box {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.stat-box:hover {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(212, 175, 55, 0.2);
    transform: translateY(-2px);
}

.stat-box-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    animation: float 3s ease-in-out infinite;
}

.stat-box-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-box-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================
   LOADING STATES
   ============================================ */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(212, 175, 55, 0.2);
    border-top-color: var(--accent-gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 2rem auto;
}

.loading-dots {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    padding: 2rem;
}

.loading-dots span {
    width: 10px;
    height: 10px;
    background: var(--accent-gold);
    border-radius: 50%;
    animation: bounce 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

.skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

/* ============================================
   BADGE STYLES
   ============================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-gold {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.1) 100%);
    color: var(--accent-gold);
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.badge-success {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-danger {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-info {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge-purple {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

/* ============================================
   TOOLTIP STYLES
   ============================================ */
.tooltip {
    position: relative;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
}

/* ============================================
   NOTIFICATION BADGES
   ============================================ */
.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    background: #ef4444;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    animation: pulse 2s ease-in-out infinite;
}

/* ============================================
   SECTION HEADERS
   ============================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.section-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.section-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ============================================
   ITEM CARDS
   ============================================ */
.item-card {
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.8) 0%, rgba(20, 20, 35, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.item-card:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.item-card.rarity-common { border-left: 3px solid #9ca3af; }
.item-card.rarity-uncommon { border-left: 3px solid #22c55e; }
.item-card.rarity-rare { border-left: 3px solid #3b82f6; }
.item-card.rarity-epic { border-left: 3px solid #a855f7; }
.item-card.rarity-legendary { 
    border-left: 3px solid #f59e0b;
    animation: pulseGlow 3s ease-in-out infinite;
}

.item-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    animation: float 4s ease-in-out infinite;
}

.item-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.item-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.item-stat {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.item-stat.attack { color: #ef4444; }
.item-stat.defense { color: #3b82f6; }

/* ============================================
   RESPONSIVE GRID
   ============================================ */
.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   HOVER EFFECTS
   ============================================ */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* ============================================
   PAGE TRANSITION
   ============================================ */
.page-enter {
    animation: fadeInUp 0.4s ease both;
}

.page-exit {
    animation: fadeIn 0.2s ease reverse both;
}