@font-face {
    font-family: 'Segoe UI Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe UI Regular'), url('Segoe UI.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Segoe UI Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe UI Italic'), url('Segoe UI Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Segoe UI Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe UI Bold'), url('Segoe UI Bold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Segoe UI Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe UI Bold Italic'), url('Segoe UI Bold Italic.woff') format('woff');
    }

:root {
    --font-primary: 'Segoe UI Regular', 'Inter', sans-serif;
    --bg-primary: #fff4e4;
    --bg-secondary: #f8e4c4;
    --bg-tertiary: #fff4dc;
    --text-primary: #2c2c2c;
    --text-secondary: #666666;
    --text-accent: #8b4513;
    --border-color: #d4c4b0;
    --accent-color: #cd853f;
    --success-color: #228b22;
    --warning-color: #daa520;
    --error-color: #dc143c;
    --shadow: rgba(0, 0, 0, 0.1);
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --transition: all 0.3s ease
}

[data-theme="dark"] {
    --bg-primary: #1a1d23;
    --bg-secondary: #102434;
    --bg-tertiary: #182c3c;
    --text-primary: #e6e6e6;
    --text-secondary: #a0a0a0;
    --text-accent: #daa520;
    --border-color: #3d4152;
    --accent-color: #f4a460;
    --shadow: rgba(0, 0, 0, 0.3)
}

[data-theme="dark"] .main-content {
    background-color: #283c4c;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    font-family: var(--font-primary);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    transition: var(--transition)
}

.game-container {
    display: flex;
    height: 100vh;
    overflow: hidden
}

.sidebar {
    width: 250px;
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: var(--transition)
}

.sidebar-header {
    height: 320px;
    background-color: #cd853f;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: flex-end;
    position: relative;
    transition: var(--transition);
}

.sidebar-header[data-region="dragonspire"] {
    background-color: #cd853f;
    background-image: url('dragonspire.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.sidebar-header[data-region="thylhanore"] {
    background-color: #32cd32
}

.sidebar-header[data-region="thul-buldahr"] {
    background-color: #a9a9a9
}

.sidebar-header[data-region="lahmusa"] {
    background-color: #ffd700
}

.sidebar-header[data-region="liqilina"] {
    background-color: #87ceeb
}

.header-overlay {
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3), transparent);
    padding: var(--spacing-lg);
    color: white;
    display: flex;
    align-items: flex-end;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
}

.character-section {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-sm);
}

.character-model-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
    height: 200px;
    margin-bottom: var(--spacing-md);
}

.character-model {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: white;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    transition: var(--transition);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.character-model:hover {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.character-stats-overlay {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: center;
    width: 100%;
}

.character-stats-overlay .stat-item {
    background: rgba(0, 0, 0, 0.7);
    border-radius: var(--radius-md);
    padding: var(--spacing-xs) var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    min-width: 120px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: var(--transition);
}

.character-stats-overlay .stat-item:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.character-stats-overlay .stat-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.character-stats-overlay .power-rating .stat-icon {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.character-stats-overlay .total-level .stat-icon {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
}

.character-stats-overlay .prestige-rank .stat-icon {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
}

.character-stats-overlay .stat-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

.character-stats-overlay .stat-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    line-height: 1;
    margin-bottom: 1px;
}

.character-stats-overlay .stat-value {
    font-size: 0.9rem;
    color: white;
    font-weight: 700;
    line-height: 1;
}

.region-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.player-level {
    font-size: 0.9rem;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.region-section {
    text-align: right;
    z-index: 1;
}

.character-stats-orbital {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.stat-orbital {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xs) var(--spacing-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 65px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: var(--transition);
    pointer-events: all; /* Re-enable clicks for individual stats */
    transform-origin: center;
    z-index: 2;
}

.stat-orbital:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    z-index: 4;
}

.stat-orbital.stat-top {
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
}

.stat-orbital.stat-left {
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
}

.stat-orbital.stat-right {
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
}

/* Hover effects for positioning */
.stat-orbital.stat-top:hover {
    transform: translateX(-50%) scale(1.1);
}

.stat-orbital.stat-left:hover {
    transform: translateY(-50%) scale(1.1);
}

.stat-orbital.stat-right:hover {
    transform: translateY(-50%) scale(1.1);
}

/* Stat Icons */
.stat-orbital .stat-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-bottom: 1px;
}

.stat-orbital[data-stat="power"] .stat-icon {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.stat-orbital[data-stat="level"] .stat-icon {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
}

.stat-orbital[data-stat="prestige"] .stat-icon {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
}

/* Stat Values and Labels */
.stat-orbital .stat-value {
    font-size: 0.85rem;
    color: white;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.stat-orbital .stat-label {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Current Location Card */
.current-location-card {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    border: 2px solid var(--accent-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    position: relative;
    overflow: hidden;
}

.current-location-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(205, 133, 63, 0.1) 0%, transparent 50%);
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.location-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    background-color: var(--accent-color);
    color: white;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-lg);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    position: relative;
    z-index: 2;
}

.location-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    position: relative;
    z-index: 2;
}

.location-visual {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.region-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
    position: relative;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.region-icon.dragonspire {
    background: linear-gradient(135deg, #cd853f, #8b4513);
}

.location-path {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.path-line {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-color), var(--text-accent));
    border-radius: var(--radius-sm);
    position: relative;
}

.path-line::after {
    content: '';
    position: absolute;
    right: -5px;
    top: -2px;
    width: 0;
    height: 0;
    border-left: 8px solid var(--text-accent);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

.city-marker {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--success-color), #16a34a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.location-info {
    flex: 1;
}

.region-display {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.city-display {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--accent-color);
    margin-bottom: var(--spacing-md);
}

.location-flavor {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    font-style: italic;
}

/* Region Cards with Favor */
.region-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.region-icon-small {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
    flex-shrink: 0;
}

.region-icon-small.thylhanore {
    background: linear-gradient(135deg, #32cd32, #228b22);
}

.region-icon-small.thul-buldahr {
    background: linear-gradient(135deg, #a9a9a9, #696969);
}

.region-icon-small.lahmusa {
    background: linear-gradient(135deg, #ffd700, #daa520);
}

.region-icon-small.liqilina {
    background: linear-gradient(135deg, #87ceeb, #4682b4);
}

.region-info {
    flex: 1;
}

.favor-display {
    background-color: var(--bg-primary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

.favor-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.favor-bar {
    width: 100%;
    height: 12px;
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: var(--spacing-xs);
    border: 1px solid var(--border-color);
}

.favor-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffd700, #ffed4e);
    border-radius: var(--radius-sm);
    transition: width 0.5s ease;
    position: relative;
}

.favor-fill::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 infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.favor-text {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 600;
    text-align: center;
}

/* Skill Access Menu */
.skill-access-menu {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
    margin-bottom: var(--spacing-xl);
}

.menu-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-accent);
    margin-bottom: var(--spacing-lg);
    font-size: 1.3rem;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color);
}

.menu-title i {
    color: var(--accent-color);
}

.skill-buttons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.skill-access-btn {
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    text-align: left;
}

.skill-access-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--shadow);
    border-color: var(--accent-color);
}

.skill-access-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    border-color: var(--text-secondary);
}

.skill-access-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.skill-access-btn.farming .skill-access-icon {
    background: linear-gradient(135deg, #9acd32, #adff2f);
}

.skill-access-btn.alchemy .skill-access-icon {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
}

.skill-access-btn.enchanting .skill-access-icon {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.skill-access-btn:disabled .skill-access-icon {
    background: linear-gradient(135deg, var(--text-secondary), #6b7280);
}

.skill-access-info {
    flex: 1;
}

.skill-access-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.skill-access-level {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.skill-access-btn:disabled .skill-access-level {
    color: var(--error-color);
    font-weight: 600;
}

/* Building Cards - Updated Layout */
.buildings-grid.special {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-xl);
}

.buildings-grid.crafting {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-xl);
}

.building-card {
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    position: relative;
    min-height: 200px;
}

.building-card:hover:not(.locked) {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--shadow);
    border-color: var(--accent-color);
}

.building-card.unlocked {
    border-color: var(--success-color);
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(34, 139, 34, 0.1));
}

.building-card.locked {
    opacity: 0.6;
    border-color: var(--text-secondary);
}

.building-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    position: relative;
}

.building-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    flex-shrink: 0;
}

.building-icon.farming {
    background: linear-gradient(135deg, #9acd32, #adff2f);
}

.building-icon.alchemy {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
}

.building-icon.enchanting {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.building-icon.smelter {
    background: linear-gradient(135deg, #dc2626, #ef4444);
}

.building-icon.forge {
    background: linear-gradient(135deg, #374151, #6b7280);
}

.building-icon.kitchen {
    background: linear-gradient(135deg, #f97316, #fb923c);
}

.building-icon.workshop {
    background: linear-gradient(135deg, #0891b2, #06b6d4);
}

.building-icon.tailor {
    background: linear-gradient(135deg, #ec4899, #f472b6);
}

.building-icon.tannery {
    background: linear-gradient(135deg, #92400e, #d97706);
}

.building-main-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}

.building-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.building-description {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.5;
    word-wrap: break-word;
}

.building-level {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-color);
    margin-bottom: var(--spacing-xs);
}

.building-action-button {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-xs);
    width: 130px;
}

.upgrade-btn {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.85rem;
    white-space: nowrap;
    min-width: 120px;
    text-align: center;
}

.upgrade-btn:hover:not(:disabled) {
    background-color: var(--text-accent);
    transform: scale(1.05);
}

.upgrade-btn:disabled {
    background-color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 0.6;
}

.upgrade-cost {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-xs);
    color: var(--warning-color);
    font-weight: 600;
    font-size: 0.8rem;
    margin-bottom: var(--spacing-xs);
    width: 100%;
}

.upgrade-cost i {
    color: #ffd700;
}

.building-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: auto;
}

.skill-unlock,
.speed-bonus {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    width: fit-content;
}

.skill-unlock {
    background-color: var(--success-color);
    color: white;
}

.speed-bonus {
    background-color: var(--warning-color);
    color: white;
}

.building-card.locked .skill-unlock,
.building-card.locked .speed-bonus {
    background-color: var(--text-secondary);
    color: white;
}

.unlock-requirement {
    font-size: 0.85rem;
    color: var(--error-color);
    font-weight: 600;
    font-style: italic;
    margin-top: var(--spacing-xs);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .location-main {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-lg);
    }

    .location-visual {
        justify-content: center;
    }

    .region-display {
        font-size: 1.5rem;
    }

    .city-display {
        font-size: 1.2rem;
    }

    .skill-buttons-grid {
        grid-template-columns: 1fr;
    }

    .buildings-grid.special,
    .buildings-grid.crafting {
        grid-template-columns: 1fr;
    }

    .building-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        position: relative;
    }

    .building-action-button {
        position: static;
        align-items: center;
        margin-top: var(--spacing-md);
    }

    .building-main-info {
        text-align: center;
    }

    .skill-unlock,
    .speed-bonus {
        align-self: center;
    }

    .skill-access-btn {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
}

/* Quest Page Styles */
.quest-stats {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

.daily-quests,
.quest-points {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background-color: var(--bg-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    font-weight: 600;
}

.daily-quests i {
    color: var(--accent-color);
}

.quest-points i {
    color: #ffd700;
}

.quest-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* Quest Shop Section */
.quest-shop-section {
    margin-bottom: var(--spacing-lg);
}

.quest-shop-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--accent-color), var(--text-accent));
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    color: white;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: 1rem;
}

.quest-shop-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(205, 133, 63, 0.3);
}

.quest-shop-btn i:first-child {
    font-size: 1.5rem;
}

.shop-info {
    flex: 1;
    text-align: left;
}

.shop-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.shop-subtitle {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Quest Cards */
.quests-section {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.quests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-lg);
}

.quest-card {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.quest-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--shadow);
    border-color: var(--accent-color);
}

.quest-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.skill-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
    flex-shrink: 0;
}

.skill-icon.woodcutting {
    background: linear-gradient(135deg, #228b22, #32cd32);
}

.skill-icon.mining {
    background: linear-gradient(135deg, #696969, #a9a9a9);
}

.skill-icon.fishing {
    background: linear-gradient(135deg, #4682b4, #87ceeb);
}

.skill-icon.smithing {
    background: linear-gradient(135deg, #b22222, #dc143c);
}

.skill-icon.cooking {
    background: linear-gradient(135deg, #ff8c00, #ffa500);
}

.skill-icon.combat {
    background: linear-gradient(135deg, #8b0000, #b22222);
}

.skill-icon.foraging {
    background: linear-gradient(135deg, #9acd32, #adff2f);
}

.skill-icon.active {
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(154, 205, 50, 0.5);
    }

    50% {
        box-shadow: 0 0 20px rgba(154, 205, 50, 0.8);
    }
}

.quest-info {
    flex: 1;
}

.quest-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.quest-skill {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quest-difficulty {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quest-difficulty.easy {
    background-color: var(--success-color);
    color: white;
}

.quest-difficulty.medium {
    background-color: var(--warning-color);
    color: white;
}

.quest-difficulty.hard {
    background-color: var(--error-color);
    color: white;
}

.quest-description {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--spacing-sm);
}

.quest-requirements {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    background-color: var(--bg-primary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
}

.requirement {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.9rem;
    color: var(--text-primary);
}

.requirement i {
    color: var(--accent-color);
    width: 16px;
}

.quest-rewards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.reward {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background-color: var(--bg-primary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.reward i {
    color: var(--success-color);
}

.reward:first-child i {
    color: #ffd700;
}

.reward:nth-child(2) i {
    color: var(--error-color);
}

.reward:last-child i {
    color: var(--warning-color);
}

.start-quest-btn {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.95rem;
}

.start-quest-btn:hover {
    background-color: var(--text-accent);
    transform: scale(1.02);
}

/* Active Quests */
.active-quests-section {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.active-quest-card {
    background-color: var(--bg-tertiary);
    border: 2px solid var(--success-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.active-quest-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.active-quest-info {
    flex: 1;
}

.quest-timer {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background-color: var(--warning-color);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
}

.quest-progress {
    margin-bottom: var(--spacing-md);
}

.progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-xs);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.progress-bar {
    width: 100%;
    height: 12px;
    background-color: var(--bg-primary);
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success-color), #16a34a);
    border-radius: var(--radius-sm);
    transition: width 0.5s ease;
}

.quest-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.abandon-quest-btn {
    background-color: var(--error-color);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem;
}

.boost-quest-btn {
    background-color: var(--warning-color);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem;
}

.abandon-quest-btn:hover {
    background-color: #b91c1c;
    transform: scale(1.02);
}

.boost-quest-btn:hover {
    background-color: #b45309;
    transform: scale(1.02);
}

/* Achievement Styles */
.achievement-stats {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

.completed-achievements,
.achievement-points {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background-color: var(--bg-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    font-weight: 600;
}

.completed-achievements i {
    color: var(--accent-color);
}

.achievement-points i {
    color: #ffd700;
}

.achievement-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.achievement-categories {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    background-color: var(--bg-secondary);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.category-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem;
    font-weight: 500;
}

.category-btn:hover {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

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

.achievement-section {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: var(--spacing-lg);
}

.achievement-card {
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    position: relative;
    overflow: hidden;
}

.achievement-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow);
    border-color: var(--accent-color);
}

.achievement-card.completed {
    border-color: var(--success-color);
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(34, 139, 34, 0.1));
}

.achievement-card.rare {
    border-color: #8b5cf6;
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(139, 92, 246, 0.1));
}

.achievement-card.legendary {
    border-color: #f59e0b;
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(245, 158, 11, 0.1));
    position: relative;
}

.achievement-card.legendary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
    animation: shimmer 3s infinite;
}

.achievement-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.achievement-icon.woodcutting {
    background: linear-gradient(135deg, #228b22, #32cd32);
}

.achievement-icon.mining {
    background: linear-gradient(135deg, #696969, #a9a9a9);
}

.achievement-icon.fishing {
    background: linear-gradient(135deg, #4682b4, #87ceeb);
}

.achievement-icon.item-collection {
    background: linear-gradient(135deg, var(--accent-color), var(--text-accent));
}

.achievement-icon.actions {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
}

.achievement-icon.exploration {
    background: linear-gradient(135deg, #059669, #10b981);
}

.achievement-icon.special {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.achievement-info {
    flex: 1;
}

.achievement-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.achievement-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
}

.achievement-progress {
    margin-bottom: var(--spacing-xs);
}

.achievement-progress span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    margin-bottom: 4px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--bg-primary);
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.progress-bar.completed {
    border-color: var(--success-color);
}

.progress-bar.locked {
    opacity: 0.5;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color), var(--text-accent));
    border-radius: var(--radius-sm);
    transition: width 0.5s ease;
    position: relative;
}

.progress-bar.completed .progress-fill {
    background: linear-gradient(90deg, var(--success-color), #16a34a);
}

.achievement-reward {
    font-size: 0.8rem;
    color: #ffd700;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.achievement-reward::before {
    content: '⭐';
    font-size: 0.9rem;
}

.completion-badge {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    width: 30px;
    height: 30px;
    background-color: var(--success-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
    z-index: 3;
}

.completion-badge.rare {
    background-color: #8b5cf6;
}

/* Store Styles */
.store-currency {
    display: flex;
    align-items: center;
}

.premium-currency {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    border: 1px solid #7c3aed;
}

.premium-currency i {
    color: #ddd6fe;
}

.alpha-notice {
    background: linear-gradient(135deg, var(--warning-color), #f59e0b);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    color: white;
}

.alpha-notice i {
    font-size: 2rem;
    flex-shrink: 0;
}

.notice-content h3 {
    margin-bottom: var(--spacing-xs);
    font-size: 1.2rem;
}

.notice-content p {
    margin: 0;
    opacity: 0.95;
}

.store-categories {
    display: flex;
    gap: var(--spacing-sm);
    background-color: var(--bg-secondary);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    margin-bottom: var(--spacing-xl);
}

.store-category-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    font-weight: 500;
    flex: 1;
    justify-content: center;
}

.store-category-btn:hover {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.store-category-btn.active {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.store-section {
    display: none;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.store-section.active {
    display: block;
}

.membership-section,
.upgrades-section,
.items-section {
    margin-bottom: var(--spacing-xl);
}

.membership-card {
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-primary));
    border: 2px solid var(--accent-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    position: relative;
    overflow: hidden;
}

.membership-card.premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.2), transparent);
    animation: shimmer 3s infinite;
}

.membership-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.membership-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
}

.membership-info {
    flex: 1;
}

.membership-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.membership-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.membership-price {
    text-align: right;
}

.price-amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-color);
}

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

.membership-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background-color: var(--bg-primary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.benefit-item i {
    color: var(--accent-color);
    width: 20px;
}

.purchase-btn {
    width: 100%;
    padding: var(--spacing-lg);
    background-color: var(--accent-color);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.purchase-btn.premium {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
}

.purchase-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(205, 133, 63, 0.3);
}

.currency-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
}

.currency-package {
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
    transition: var(--transition);
    position: relative;
}

.currency-package:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--shadow);
    border-color: var(--accent-color);
}

.currency-package.popular {
    border-color: #8b5cf6;
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(139, 92, 246, 0.1));
}

.currency-package.best-value {
    border-color: #f59e0b;
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(245, 158, 11, 0.1));
}

.popular-badge,
.value-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #8b5cf6;
    color: white;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
}

.value-badge {
    background-color: #f59e0b;
}

.package-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    margin: 0 auto var(--spacing-md);
}

.package-amount {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.package-bonus {
    font-size: 0.9rem;
    color: var(--success-color);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.package-price {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: var(--spacing-md);
}

.upgrades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: var(--spacing-lg);
    max-width: 1200px;
}

.upgrade-card {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transition: var(--transition);
}

.upgrade-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow);
    border-color: var(--accent-color);
}

.upgrade-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--accent-color), var(--text-accent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.upgrade-info {
    flex: 1;
}

.upgrade-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.upgrade-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    line-height: 1.4;
}

.upgrade-current {
    font-size: 0.85rem;
    color: var(--accent-color);
    font-weight: 600;
}

.upgrade-purchase {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-sm);
}

.upgrade-price {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: #8b5cf6;
    font-weight: 600;
}

.upgrade-btn,
.item-btn {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    min-width: 100px;
}

.upgrade-btn:hover,
.item-btn:hover {
    background-color: var(--text-accent);
    transform: scale(1.05);
}

.items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-lg);
}

.item-card {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow);
    border-color: var(--accent-color);
}

.item-card.tradeable {
    border-color: var(--success-color);
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(34, 139, 34, 0.1));
}

.tradeable-badge {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background-color: var(--success-color);
    color: white;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.item-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    margin: 0 auto;
}

.item-icon.premium {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
}

.item-icon.name-change {
    background: linear-gradient(135deg, #059669, #10b981);
}

.item-icon.guild-change {
    background: linear-gradient(135deg, #dc2626, #ef4444);
}

.item-icon.xp-boost {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.item-icon.energy-refill {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
}

.item-icon.cosmetic {
    background: linear-gradient(135deg, #ec4899, #f472b6);
}

.item-info {
    text-align: center;
    flex: 1;
}

.item-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.item-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: var(--spacing-sm);
}

.item-duration,
.item-cooldown,
.item-instant {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    display: inline-block;
}

.item-duration {
    background-color: var(--success-color);
    color: white;
}

.item-cooldown {
    background-color: var(--warning-color);
    color: white;
}

.item-instant {
    background-color: var(--error-color);
    color: white;
}

.item-purchase {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.item-price {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: #8b5cf6;
    font-weight: 600;
}

/* Inventory Page Styles */
.inventory-stats {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

.inventory-capacity,
.inventory-value {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background-color: var(--bg-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    font-weight: 600;
}

.inventory-capacity i {
    color: var(--accent-color);
}

.inventory-value i {
    color: #ffd700;
}

.inventory-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.inventory-controls {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.search-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.inventory-filters {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    align-items: center;
}

.sort-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem;
}

.sort-btn:hover {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

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

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--spacing-sm);
}

.inventory-item {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    transition: var(--transition);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    position: relative;
    overflow: hidden;
    min-height: 100px;
}

.inventory-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
}

/* Rarity Borders and Effects */
.inventory-item.common {
    border-color: var(--border-color);
}

.inventory-item.uncommon {
    border-color: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.2);
}

.inventory-item.magic {
    border-color: #3b82f6;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.2);
}

.inventory-item.rare {
    border-color: #FFFF77;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.2);
}

.inventory-item.epic {
    border-color: #8b5cf6;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.2);
}

.inventory-item.legendary {
    border-color: #f59e0b;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
    background: linear-gradient(135deg, var(--bg-secondary), rgba(239, 68, 68, 0.1));
    position: relative;
}

.inventory-item.legendary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
    animation: shimmer 3s infinite;
}

.inventory-item.mythic {
    border-color: #ef4444;
    box-shadow: 0 0 12px rgba(236, 72, 153, 0.4);
    background: linear-gradient(135deg, var(--bg-secondary), rgba(236, 72, 153, 0.1));
    position: relative;
}

.inventory-item.mythic::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(147, 51, 234, 0.4), transparent);
    animation: shimmer 2s infinite;
}

.inventory-item.mythic::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(236, 72, 153, 0.3), transparent);
    animation: shimmer 2.5s infinite reverse;
}

.equipment-stats {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

.equipped-items,
.total-power {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background-color: var(--bg-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    font-weight: 600;
}

.equipped-items i {
    color: var(--accent-color);
}

.total-power i {
    color: #ffd700;
}

/* Equipment Page Redesign */
.equipment-content {
    display: flex;
    gap: var(--spacing-xl);
    min-height: 600px;
}

.equipment-layout {
    display: flex;
    gap: var(--spacing-xl);
    width: 100%;
}

.character-equipment {
    flex: 2;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: center;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    border: 1px solid var(--border-color);
}

.equipment-row {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.equipment-slot {
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-primary));
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    width: 130px;
    height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.equipment-slot:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--shadow);
    border-color: var(--accent-color);
}

.equipment-slot.weapon,
.equipment-slot.accessory {
    border-color: var(--border-color);
    background-color: var(--bg-tertiary);
}

.slot-icon {
    display: none;
}

.equipment-slot.weapon .slot-icon {
    color: var(--error-color);
    border-color: var(--error-color);
}

.equipment-slot.accessory .slot-icon {
    color: var(--warning-color);
    border-color: var(--warning-color);
}

.slot-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: capitalize;
    letter-spacing: 0.5px;
    text-align: center;
    margin-bottom: var(--spacing-xs);
}

.equipped-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.equipped-item i {
    font-size: 1.1rem;
    color: var(--accent-color);
    margin-bottom: 2px;
}

.equipped-item span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    text-align: center;
}

.equipped-item.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    width: 100%;
}

.equipped-item.empty .slot-name {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.equipped-item.empty i {
    font-size: 1.5rem;
    color: var(--text-secondary);
    opacity: 0.5;
}

.equipped-item.empty span {
    color: var(--text-secondary);
    font-style: italic;
}

.equipped-item:not(.empty) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    width: 100%;
}

.equipped-item:not(.empty) i {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.equipped-item:not(.empty) span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    text-align: center;
}

.equipment-slot:has(.equipped-item:not(.empty)) .slot-name {
    display: none;
}

.equipment-slot.common {
    border-color: #9ca3af;
}

.equipment-slot.uncommon {
    border-color: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.2);
}

.equipment-slot.rare {
    border-color: #3b82f6;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.2);
}

.equipment-slot.epic {
    border-color: #8b5cf6;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.2);
}

.equipment-slot.legendary {
    border-color: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(245, 158, 11, 0.1));
    position: relative;
}

.equipment-slot.mythic {
    border-color: #ef4444;
    box-shadow: 0 0 12px rgba(236, 72, 153, 0.4);
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(236, 72, 153, 0.1));
    position: relative;
}

/* Tool Belt Section */
.tool-belt-section {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    width: 100%;
}

.tool-belt-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-accent);
    margin-bottom: var(--spacing-lg);
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    justify-content: center;
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

.tool-belt-title i {
    color: var(--accent-color);
    font-size: 1.2rem;
}

.tool-belt-row {
    justify-content: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

/* Tool Belt specific slot styling */
.tool-belt-row .equipment-slot {
    width: 130px;
    height: 110px;
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-primary));
    position: relative;
}



.tool-belt-row .equipment-slot:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--shadow);
    border-color: var(--accent-color);
}

/* Tool rarity effects for tool belt */
.tool-belt-row .equipment-slot.common {
    border-color: #9ca3af;
}

.tool-belt-row .equipment-slot.uncommon {
    border-color: #10b981;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
}

.tool-belt-row .equipment-slot.rare {
    border-color: #3b82f6;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
}

.tool-belt-row .equipment-slot.epic {
    border-color: #8b5cf6;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

.tool-belt-row .equipment-slot.legendary {
    border-color: #f59e0b;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.5);
    animation: legendary-glow 3s ease-in-out infinite alternate;
}

@keyframes legendary-glow {
    0% {
        box-shadow: 0 0 25px rgba(245, 158, 11, 0.5);
    }
    100% {
        box-shadow: 0 0 35px rgba(245, 158, 11, 0.8);
    }
}

/* Tool belt responsive adjustments */
@media (max-width: 768px) {
    .tool-belt-row {
        gap: var(--spacing-md);
    }
    
    .tool-belt-row .equipment-slot {
        width: 85px;
        height: 75px;
    }
    
    .tool-belt-title {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .tool-belt-row {
        gap: var(--spacing-sm);
    }
    
    .tool-belt-row .equipment-slot {
        width: 75px;
        height: 65px;
    }
    
    .tool-belt-title {
        font-size: 0.9rem;
    }
}

/* Equipment Stats Panel */
.equipment-stats-panel {
    flex: 1;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.stats-section {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
    margin-bottom: var(--spacing-md);
}

.stats-section.set-bonus {
    background: linear-gradient(135deg, var(--bg-secondary), rgba(139, 92, 246, 0.1));
    border-color: #8b5cf6;
}

.stats-section .section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-accent);
    margin-bottom: var(--spacing-md);
    font-size: 1.1rem;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color);
}

.stats-section .section-title i {
    color: var(--accent-color);
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.stat-value {
    font-weight: 700;
    color: var(--text-primary);
}

.set-bonus-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.set-bonus-item {
    padding: var(--spacing-md);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.set-bonus-item.active {
    border-color: var(--success-color);
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(34, 139, 34, 0.1));
}

.set-bonus-item.inactive {
    opacity: 0.7;
}

.set-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.set-name {
    font-weight: 700;
    color: var(--text-primary);
}

.set-progress {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.set-bonus-item.active .set-progress {
    color: var(--success-color);
    font-weight: 600;
}

.set-bonus-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
}

.set-bonus-item.active .set-bonus-text {
    color: var(--success-color);
}

/* Equipment Selection Modal */
.equipment-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.equipment-modal.active {
    display: flex;
}

.equipment-modal .modal-content {
    background-color: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-color);
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease-out;
}

.equipment-search {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.equipment-filters {
    display: flex;
    gap: var(--spacing-sm);
}

.available-equipment {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-height: 400px;
    overflow-y: auto;
}

.equipment-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    transition: var(--transition);
    cursor: pointer;
}

.equipment-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--shadow);
    border-color: var(--accent-color);
}

.equipment-item.none-option {
    border-color: var(--text-secondary);
    border-style: dashed;
    opacity: 0.8;
}

.equipment-item .item-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    border: 2px solid;
    flex-shrink: 0;
}

.equipment-item .item-icon.common {
    background: linear-gradient(135deg, #6b7280, #9ca3af);
    border-color: #9ca3af;
}

.equipment-item .item-icon.uncommon {
    background: linear-gradient(135deg, #10b981, #16a34a);
    border-color: #16a34a;
}

.equipment-item .item-icon.rare {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-color: #1d4ed8;
}

.equipment-item .item-icon.epic {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    border-color: #7c3aed;
}

.equipment-item .item-icon.legendary {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: #d97706;
}

.equipment-item .item-icon.empty {
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.equipment-item .item-details {
    flex: 1;
}

.equipment-item .item-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.equipment-item .item-rarity {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.equipment-item .item-rarity.common {
    color: #9ca3af;
}

.equipment-item .item-rarity.uncommon {
    color: #16a34a;
}

.equipment-item .item-rarity.rare {
    color: #1d4ed8;
}

.equipment-item .item-rarity.epic {
    color: #7c3aed;
}

.equipment-item .item-rarity.legendary {
    color: #d97706;
}

.equipment-item .item-stats {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.equipment-item .equip-btn {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.equipment-item .equip-btn:hover {
    background-color: var(--text-accent);
    transform: scale(1.05);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .equipment-layout {
        flex-direction: column;
    }
    
    .character-equipment {
        max-width: 100%;
    }
    
    .equipment-stats-panel {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .equipment-slot {
        width: 120px;
        height: 100px;
        padding: var(--spacing-sm);
    }
    
    .equipment-row {
        gap: var(--spacing-sm);
    }
    
    .slot-icon {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }
    
    .slot-name {
        font-size: 0.7rem;
    }
    
    .equipped-item i {
        font-size: 1rem;
    }
    
    .equipped-item span {
        font-size: 0.7rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .equipment-slot {
        width: 100px;
        height: 90px;
    }
    
    .equipment-row {
        gap: var(--spacing-xs);
    }
    
    .equipment-modal .modal-content {
        width: 95%;
        margin: var(--spacing-md);
    }
}

/* Statistics Page Styles */
.stats-summary {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

.total-playtime,
.total-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background-color: var(--bg-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    font-weight: 600;
}

.total-playtime i {
    color: var(--accent-color);
}

.total-actions i {
    color: #8b5cf6;
}

.statistics-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* Overview Section */
.overview-section {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.overview-card {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transition: var(--transition);
}

.overview-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--shadow);
    border-color: var(--accent-color);
}

.overview-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent-color), var(--text-accent));
}

.overview-info {
    flex: 1;
}

.overview-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.overview-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Skills Statistics Section */
.skills-statistics-section {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.skill-category {
    margin-bottom: var(--spacing-xl);
}

.skill-category:last-child {
    margin-bottom: 0;
}

.category-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-accent);
    margin-bottom: var(--spacing-lg);
    font-size: 1.2rem;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color);
}

.category-title i {
    color: var(--accent-color);
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-lg);
}

.skill-stat-card {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: var(--transition);
}

.skill-stat-card:hover:not(.locked) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow);
    border-color: var(--accent-color);
}

.skill-stat-card.locked {
    opacity: 0.6;
    border-color: var(--text-secondary);
}

.skill-stat-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.skill-stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
    flex-shrink: 0;
}

.skill-stat-icon.woodcutting {
    background: linear-gradient(135deg, #228b22, #32cd32);
}

.skill-stat-icon.mining {
    background: linear-gradient(135deg, #696969, #a9a9a9);
}

.skill-stat-icon.fishing {
    background: linear-gradient(135deg, #4682b4, #87ceeb);
}

.skill-stat-icon.foraging {
    background: linear-gradient(135deg, #9acd32, #adff2f);
}

.skill-stat-icon.smelting {
    background: linear-gradient(135deg, #dc2626, #ef4444);
}

.skill-stat-icon.smithing {
    background: linear-gradient(135deg, #374151, #6b7280);
}

.skill-stat-icon.cooking {
    background: linear-gradient(135deg, #f97316, #fb923c);
}

.skill-stat-icon.woodworking {
    background: linear-gradient(135deg, #0891b2, #06b6d4);
}

.skill-stat-icon.melee {
    background: linear-gradient(135deg, #8b0000, #b22222);
}

.skill-stat-icon.ranged {
    background: linear-gradient(135deg, #059669, #10b981);
}

.skill-stat-icon.magic {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
}

.skill-stat-icon.defense {
    background: linear-gradient(135deg, #1f2937, #374151);
}

.skill-stat-icon.farming {
    background: linear-gradient(135deg, #9acd32, #adff2f);
}

.skill-stat-icon.alchemy {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
}

.skill-stat-icon.enchanting {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.skill-stat-card.locked .skill-stat-icon {
    background: linear-gradient(135deg, var(--text-secondary), #6b7280);
}

.skill-stat-info {
    flex: 1;
}

.skill-stat-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.skill-stat-level {
    font-size: 0.9rem;
    color: var(--accent-color);
    font-weight: 600;
}

.skill-stat-card.locked .skill-stat-level {
    color: var(--error-color);
}

.skill-stat-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--border-color);
}

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

.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.stat-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.locked-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    color: var(--text-secondary);
    font-style: italic;
}

.locked-message i {
    color: var(--error-color);
}

/* Economic Statistics Section */
.economic-statistics-section {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.economic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-lg);
}

.economic-card {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: var(--transition);
}

.economic-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow);
    border-color: var(--accent-color);
}

.economic-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.economic-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
    flex-shrink: 0;
}

.economic-icon.market {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.economic-icon.guild {
    background: linear-gradient(135deg, #ec4899, #f472b6);
}

.economic-icon.quests {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
}

.economic-icon.achievements {
    background: linear-gradient(135deg, #10b981, #16a34a);
}

.economic-info {
    flex: 1;
}

.economic-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.economic-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.economic-stats {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.economic-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm);
    background-color: var(--bg-primary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.economic-stat.profit {
    border-color: var(--success-color);
    background: linear-gradient(135deg, var(--bg-primary), rgba(34, 139, 34, 0.1));
}

.economic-stat .stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.economic-stat .stat-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.economic-stat .stat-value.gold {
    color: #ffd700;
}

.economic-stat .stat-value.spent {
    color: var(--error-color);
}

.economic-stat .stat-value.tax {
    color: var(--warning-color);
}

.economic-stat .stat-value.rank {
    color: var(--accent-color);
}

.economic-stat .stat-value.favor {
    color: var(--success-color);
}

.economic-stat .stat-value.rare {
    color: #8b5cf6;
}

.economic-stat .stat-value.success {
    color: var(--success-color);
}

/* Miscellaneous Statistics Section */
.misc-statistics-section {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.misc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
}

.misc-card {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: var(--transition);
}

.misc-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow);
    border-color: var(--accent-color);
}

.misc-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--accent-color), var(--text-accent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
    margin-bottom: var(--spacing-md);
}

.misc-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.misc-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
}

.misc-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .stats-summary {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .overview-grid {
        grid-template-columns: 1fr;
    }

    .skills-grid {
        grid-template-columns: 1fr;
    }

    .economic-grid {
        grid-template-columns: 1fr;
    }

    .misc-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .overview-card {
        flex-direction: column;
        text-align: center;
    }

    .skill-stat-header {
        flex-direction: column;
        text-align: center;
    }

    .economic-header {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .misc-grid {
        grid-template-columns: 1fr;
    }

    .overview-value {
        font-size: 1.4rem;
    }

    .misc-value {
        font-size: 1.2rem;
    }
}


.guild-stats {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl)
}

.guild-level,
.guild-members,
.guild-power {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background-color: var(--bg-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    font-weight: 600
}

.guild-level i {
    color: var(--accent-color)
}

.guild-members i {
    color: var(--success-color)
}

.guild-power i {
    color: #ffd700
}

.guild-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl)
}

.guild-overview {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg)
}

.guild-banner {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    border: 2px solid var(--accent-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    position: relative;
    overflow: hidden
}

.guild-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(205, 133, 63, 0.1));
    pointer-events: none
}

.guild-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--accent-color), var(--text-accent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
    box-shadow: 0 8px 25px rgba(205, 133, 63, 0.3);
    flex-shrink: 0
}

.guild-info {
    flex: 1
}

.guild-name {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs)
}

.guild-motto {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-bottom: var(--spacing-sm)
}

.guild-leader {
    font-size: 0.9rem;
    color: var(--accent-color);
    font-weight: 600
}

.guild-badges {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap
}

.guild-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 600
}

.guild-badge.active {
    background-color: var(--success-color);
    color: white;
    border-color: var(--success-color)
}

.guild-badge i {
    font-size: 0.9rem
}

.guild-announcement {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color)
}

.guild-announcement h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-accent);
    margin-bottom: var(--spacing-md);
    font-size: 1.2rem
}

.guild-announcement h3 i {
    color: var(--accent-color)
}

.announcement-content {
    background-color: var(--bg-tertiary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--accent-color)
}

.announcement-text {
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: var(--spacing-md)
}

.announcement-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-secondary)
}

.guild-main-content {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden
}

.guild-tabs {
    display: flex;
    background-color: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color)
}

.guild-tab-btn {
    flex: 1;
    padding: var(--spacing-md);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    font-weight: 500;
    border-bottom: 3px solid transparent
}

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

.guild-tab-btn.active {
    background-color: var(--bg-primary);
    color: var(--accent-color);
    border-bottom-color: var(--accent-color)
}

.guild-tab-content {
    display: none;
    padding: var(--spacing-lg)
}

.guild-tab-content.active {
    display: block
}

.members-controls {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg)
}

.member-search {
    display: flex;
    gap: var(--spacing-sm)
}

.member-sort-tabs {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap
}

.sort-tab-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem
}

.sort-tab-btn:hover {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color)
}

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

.members-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm)
}

.member-item {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transition: var(--transition)
}

.member-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
    border-color: var(--accent-color)
}

.member-item.leader {
    border-color: #ffd700;
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(255, 215, 0, 0.1))
}

.member-item.officer {
    border-color: var(--accent-color);
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(205, 133, 63, 0.1))
}

.member-avatar {
    width: 50px;
    height: 50px;
    background-color: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--text-secondary);
    flex-shrink: 0
}

.member-item.leader .member-avatar {
    border-color: #ffd700;
    color: #ffd700;
    background: linear-gradient(135deg, var(--bg-primary), rgba(255, 215, 0, 0.1))
}

.member-item.officer .member-avatar {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: linear-gradient(135deg, var(--bg-primary), rgba(205, 133, 63, 0.1))
}

.member-info {
    flex: 1
}

.member-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px
}

.member-role {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px
}

.member-level {
    font-size: 0.85rem;
    color: var(--accent-color);
    font-weight: 600
}

.member-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-right: var(--spacing-md)
}

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

.member-status {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px
}

.member-status.online {
    background-color: var(--success-color);
    color: white
}

.member-status.offline {
    background-color: var(--text-secondary);
    color: white
}

.guild-quests-section h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-accent);
    margin-bottom: var(--spacing-lg);
    font-size: 1.2rem
}

.guild-quests-section h3 i {
    color: var(--accent-color)
}

.guild-quests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-lg)
}

.guild-quest-card {
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: var(--transition)
}

.guild-quest-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--shadow);
    border-color: var(--accent-color)
}

.guild-quest-card.active {
    border-color: var(--success-color);
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(34, 139, 34, 0.1))
}

.quest-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md)
}

.quest-icon {
    width: 50px;
    height: 50px;
    background-color: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--accent-color)
}

.quest-info {
    flex: 1
}

.quest-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px
}

.quest-difficulty {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px
}

.quest-difficulty.easy {
    background-color: var(--success-color);
    color: white
}

.quest-difficulty.medium {
    background-color: var(--warning-color);
    color: white
}

.quest-difficulty.legendary {
    background-color: #f59e0b;
    color: white
}

.quest-timer {
    background-color: var(--warning-color);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600
}

.quest-progress {
    margin-bottom: var(--spacing-md)
}

.quest-rewards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs)
}

.quest-rewards .reward {
    background-color: var(--bg-primary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--success-color);
    font-weight: 600;
    border: 1px solid var(--border-color)
}

.guild-events-section h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-accent);
    margin-bottom: var(--spacing-lg);
    font-size: 1.2rem
}

.guild-events-section h3 i {
    color: var(--accent-color)
}

.events-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md)
}

.event-card {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    transition: var(--transition)
}

.event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow)
}

.event-card.upcoming {
    border-color: var(--warning-color);
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(218, 165, 32, 0.1))
}

.event-card.active {
    border-color: var(--success-color);
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(34, 139, 34, 0.1))
}

.event-card.completed {
    opacity: 0.7
}

.event-date {
    background-color: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    text-align: center;
    min-width: 80px
}

.event-day {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1
}

.event-month {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px
}

.event-info {
    flex: 1
}

.event-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs)
}

.event-description {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    line-height: 1.4
}

.event-time {
    font-size: 0.85rem;
    color: var(--text-accent);
    font-weight: 600
}

.event-status {
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px
}

.event-status.upcoming {
    background-color: var(--warning-color);
    color: white
}

.event-status.active {
    background-color: var(--success-color);
    color: white
}

.event-status.completed {
    background-color: var(--text-secondary);
    color: white
}

.guild-buildings-section h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-accent);
    margin-bottom: var(--spacing-lg);
    font-size: 1.2rem
}

.guild-buildings-section h3 i {
    color: var(--accent-color)
}

.buildings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-lg)
}

.guild-building-card {
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md)
}

.guild-building-card:hover:not(.locked) {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--shadow);
    border-color: var(--accent-color)
}

.guild-building-card.max-level {
    border-color: #ffd700;
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(255, 215, 0, 0.1))
}

.guild-building-card.locked {
    opacity: 0.6;
    border-color: var(--text-secondary)
}

.building-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    margin: 0 auto
}

.building-icon.guild-hall {
    background: linear-gradient(135deg, #ffd700, #ffed4e)
}

.building-icon.treasury {
    background: linear-gradient(135deg, #f59e0b, #fbbf24)
}

.building-icon.armory {
    background: linear-gradient(135deg, #dc2626, #ef4444)
}

.building-icon.workshop {
    background: linear-gradient(135deg, #0891b2, #06b6d4)
}

.building-icon.library {
    background: linear-gradient(135deg, #8b5cf6, #a855f7)
}

.building-icon.portal {
    background: linear-gradient(135deg, #ec4899, #f472b6)
}

.building-info {
    text-align: center
}

.building-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs)
}

.building-level {
    font-size: 0.9rem;
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: var(--spacing-sm)
}

.building-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4
}

.building-bonus {
    background-color: var(--success-color);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    margin-top: auto
}

.upgrade-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: auto
}

.upgrade-cost {
    font-size: 0.85rem;
    color: var(--warning-color);
    font-weight: 600;
    text-align: center
}

.upgrade-building-btn {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition)
}

.upgrade-building-btn:hover {
    background-color: var(--text-accent);
    transform: scale(1.02)
}

.unlock-requirement {
    background-color: var(--text-secondary);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    margin-top: auto
}

.guild-boss-section h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-accent);
    margin-bottom: var(--spacing-lg);
    font-size: 1.2rem
}

.guild-boss-section h3 i {
    color: var(--accent-color)
}

.boss-encounter {
    background-color: var(--bg-tertiary);
    border: 2px solid var(--error-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg)
}

.boss-visual {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-lg)
}

.boss-image {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #dc2626, #ef4444);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: white;
    box-shadow: 0 0 30px rgba(220, 38, 38, 0.5);
    animation: boss-pulse 3s infinite
}

.boss-info {
    flex: 1
}

.boss-name {
    font-size: 2rem;
    font-weight: 700;
    color: var(--error-color);
    margin-bottom: var(--spacing-xs)
}

.boss-level {
    font-size: 1.2rem;
    color: var(--text-accent);
    font-weight: 600;
    margin-bottom: var(--spacing-sm)
}

.boss-description {
    color: var(--text-secondary);
    line-height: 1.5
}

@keyframes boss-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 30px rgba(220, 38, 38, 0.5)
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 40px rgba(220, 38, 38, 0.8)
    }
}

.boss-health {
    margin-bottom: var(--spacing-lg)
}

.health-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    color: var(--text-primary)
}

.health-bar {
    width: 100%;
    height: 20px;
    background-color: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden
}

.health-fill {
    height: 100%;
    background: linear-gradient(90deg, #dc2626, #ef4444);
    transition: width 0.5s ease
}

.boss-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg)
}

.boss-stat {
    background-color: var(--bg-primary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    text-align: center
}

.stat-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs)
}

.stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary)
}

.boss-rewards h4{display:flex;align-items:center;gap:var(--spacing-sm);color:var(--text-accent);margin-bottom:var(--spacing-md);font-size:1.1rem}.boss-rewards h4 i{color:var(--accent-color)}.rewards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.reward-item{background-color:var(--bg-primary);padding:var(--spacing-md);border-radius:var(--radius-md);border:1px solid var(--border-color);display:flex;align-items:center;gap:var(--spacing-sm);font-weight:600;white-space:nowrap}.reward-item i{color:var(--success-color);font-size:1.2rem;flex-shrink:0}.reward-item span{flex:1;text-align:left}

.boss-actions {
    display: flex;
    gap: var(--spacing-md)
}

.attack-boss-btn {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: white;
    border: none;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    font-size: 1rem
}

.attack-boss-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.3)
}

.boss-info-btn {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition)
}

.boss-info-btn:hover {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color)
}

.treasury-overview{background-color:var(--bg-tertiary);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-bottom:var(--spacing-xl);border:1px solid var(--border-color)}.treasury-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-lg)}.treasury-stat{background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-lg);display:flex;align-items:center;gap:var(--spacing-md);transition:var(--transition)}.treasury-stat:hover{transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow)}.stat-icon{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:white;flex-shrink:0}.stat-icon.gold{background:linear-gradient(135deg,#ffd700,#ffed4e)}.stat-icon.items{background:linear-gradient(135deg,var(--accent-color),var(--text-accent))}.stat-icon.capacity{background:linear-gradient(135deg,#10b981,#16a34a)}.stat-info{flex:1}.stat-label{font-size:0.9rem;color:var(--text-secondary);margin-bottom:4px}.stat-value{font-size:1.3rem;font-weight:700;color:var(--text-primary)}.treasury-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-xl);margin-bottom:var(--spacing-xl)}.donation-section,.treasury-storage{background-color:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-lg);border:1px solid var(--border-color)}.donation-section h3,.treasury-storage h3{display:flex;align-items:center;gap:var(--spacing-sm);color:var(--text-accent);margin-bottom:var(--spacing-md);font-size:1.2rem}.donation-section h3 i,.treasury-storage h3 i{color:var(--accent-color)}.donation-tabs,.storage-tabs{display:flex;gap:var(--spacing-xs);margin-bottom:var(--spacing-md);background-color:var(--bg-tertiary);padding:var(--spacing-xs);border-radius:var(--radius-md)}.donation-tab-btn,.storage-tab-btn{flex:1;padding:var(--spacing-sm);background:none;border:none;color:var(--text-secondary);cursor:pointer;transition:var(--transition);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);font-size:0.9rem}.donation-tab-btn:hover,.storage-tab-btn:hover{background-color:var(--bg-primary);color:var(--text-primary)}.donation-tab-btn.active,.storage-tab-btn.active{background-color:var(--accent-color);color:white}.donation-content,.storage-content{display:none}.donation-content.active,.storage-content.active{display:block}.current-gold{display:flex;align-items:center;gap:var(--spacing-xs);background-color:var(--bg-tertiary);padding:var(--spacing-md);border-radius:var(--radius-md);margin-bottom:var(--spacing-md);font-weight:600}.current-gold i{color:#ffd700}.donation-input-section{margin-bottom:var(--spacing-md)}.donation-input-section label{display:block;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-sm)}.amount-controls{display:flex;gap:var(--spacing-xs);margin-bottom:var(--spacing-sm)}.preset-btn{padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);cursor:pointer;transition:var(--transition);font-size:0.85rem}.preset-btn:hover{background-color:var(--accent-color);color:white;border-color:var(--accent-color)}.donation-input{width:100%;padding:var(--spacing-sm);border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:var(--bg-tertiary);color:var(--text-primary);font-size:0.9rem}.donation-input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 2px rgba(205,133,63,0.2)}.donation-benefits{background-color:var(--bg-tertiary);padding:var(--spacing-md);border-radius:var(--radius-md);margin-bottom:var(--spacing-md)}.benefit-item{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-xs);font-size:0.85rem;color:var(--text-secondary)}.benefit-item:last-child{margin-bottom:0}.benefit-item i{color:var(--success-color)}.donate-btn{width:100%;padding:var(--spacing-md);border:none;border-radius:var(--radius-md);font-weight:700;cursor:pointer;transition:var(--transition);font-size:1rem}.donate-btn.gold{background:linear-gradient(135deg,#ffd700,#ffed4e);color:#8b4513}.donate-btn.items{background:linear-gradient(135deg,var(--accent-color),var(--text-accent));color:white}.donate-btn:hover:not(:disabled){transform:scale(1.02);box-shadow:0 4px 15px rgba(205,133,63,0.3)}.donate-btn:disabled{background-color:var(--text-secondary);color:white;cursor:not-allowed;opacity:0.6}.donation-filters{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.donatable-items-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-sm);max-height:300px;overflow-y:auto;margin-bottom:var(--spacing-md)}.donatable-item{background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-sm);display:grid;grid-template-columns:auto 1fr auto auto;gap:var(--spacing-sm);align-items:center;transition:var(--transition)}.donatable-item:hover{border-color:var(--accent-color)}.item-icon-small{width:30px;height:30px;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:0.9rem;color:var(--accent-color)}.item-info-small{min-width:0}.item-name-small{font-weight:600;color:var(--text-primary);font-size:0.85rem;margin-bottom:2px}.item-quantity-small{font-size:0.75rem;color:var(--text-secondary)}.item-value-small{font-size:0.75rem;color:var(--warning-color);text-align:right}.quantity-selector{display:flex;gap:var(--spacing-xs);align-items:center}.item-quantity-input{width:60px;padding:4px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background-color:var(--bg-primary);color:var(--text-primary);text-align:center;font-size:0.8rem}.select-all-btn{padding:4px 8px;background-color:var(--accent-color);color:white;border:none;border-radius:var(--radius-sm);font-size:0.75rem;cursor:pointer;transition:var(--transition)}.select-all-btn:hover{background-color:var(--text-accent)}.donation-summary{background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-md);margin-bottom:var(--spacing-md)}.summary-title{font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-sm)}.summary-items{font-size:0.9rem;color:var(--text-secondary);margin-bottom:var(--spacing-xs)}.summary-value{font-weight:600;color:var(--warning-color)}.recent-donations-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.donation-entry{background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-md);display:flex;align-items:center;gap:var(--spacing-md)}.donor-info{display:flex;align-items:center;gap:var(--spacing-sm);flex:1}.donor-avatar{width:40px;height:40px;background-color:var(--bg-primary);border:2px solid var(--border-color);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--text-secondary)}.donor-name{font-weight:600;color:var(--text-primary);margin-bottom:2px}.donation-time{font-size:0.8rem;color:var(--text-secondary)}.donation-details{flex:1;text-align:center}.donation-type{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);font-weight:600}.donation-type.gold{color:#ffd700}.donation-type.items{color:var(--accent-color)}.donation-value{font-weight:700;color:var(--success-color);text-align:right}.treasury-items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--spacing-sm)}.treasury-item{background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-md);text-align:center;transition:var(--transition)}.treasury-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow)}.treasury-item-icon{width:40px;height:40px;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--accent-color);margin:0 auto var(--spacing-sm)}.treasury-item-name{font-weight:600;color:var(--text-primary);margin-bottom:4px;font-size:0.9rem}.treasury-item-quantity{font-size:0.8rem;color:var(--text-secondary)}.contributors-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.contributor-item{background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-md);display:flex;align-items:center;gap:var(--spacing-md)}.contributor-item.top{border-color:#ffd700;background:linear-gradient(135deg,var(--bg-tertiary),rgba(255,215,0,0.1))}.contributor-rank{width:30px;height:30px;background-color:var(--accent-color);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.9rem}.contributor-item.top .contributor-rank{background-color:#ffd700}.contributor-info{display:flex;align-items:center;gap:var(--spacing-sm);flex:1}.contributor-avatar{width:40px;height:40px;background-color:var(--bg-primary);border:2px solid var(--border-color);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--text-secondary)}.contributor-avatar.leader{border-color:#ffd700;color:#ffd700}.contributor-avatar.officer{border-color:var(--accent-color);color:var(--accent-color)}.contributor-name{font-weight:600;color:var(--text-primary);margin-bottom:2px}.contributor-role{font-size:0.8rem;color:var(--text-secondary)}.contribution-stats{text-align:right}.contribution-amount{font-weight:700;color:#ffd700;margin-bottom:2px}.contribution-items{font-size:0.8rem;color:var(--text-secondary)}@media (max-width:768px){.treasury-actions{grid-template-columns:1fr}.treasury-stats{grid-template-columns:1fr}.donatable-item{grid-template-columns:1fr;gap:var(--spacing-xs);text-align:center}.quantity-selector{justify-content:center}}

@media (max-width:768px) {
    .guild-stats {
        flex-direction: column;
        gap: var(--spacing-sm)
    }

    .guild-banner {
        flex-direction: column;
        text-align: center
    }

    .guild-tabs {
        flex-direction: column
    }

    .guild-tab-btn {
        justify-content: flex-start
    }

    .member-item {
        flex-direction: column;
        text-align: center
    }

    .member-stats {
        flex-direction: row;
        justify-content: center;
        gap: var(--spacing-md)
    }

    .boss-visual {
        flex-direction: column;
        text-align: center
    }

    .boss-actions {
        flex-direction: column
    }

    .guild-quests-grid,
    .buildings-grid {
        grid-template-columns: 1fr
    }
}


@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(200%);
    }
}

.item-icon-inventory {
    width: 32px;
    height: 32px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--accent-color);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.inventory-item.uncommon .item-icon-inventory {
    border-color: #10b981;
    color: #10b981;
}

.inventory-item.magic .item-icon-inventory {
    border-color: #3b82f6;
    color: #3b82f6;
}

.inventory-item.rare .item-icon-inventory {
    border-color: #FFFF77;
    color: #FFFF77;
}

.inventory-item.epic .item-icon-inventory {
    border-color: #8b5cf6;
    color: #8b5cf6;
}

.inventory-item.legendary .item-icon-inventory {
    border-color: #f59e0b;
    color: #f59e0b;
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(239, 68, 68, 0.1));
}

.inventory-item.mythic .item-icon-inventory {
    border-color: #ef4444;
    color: #ef4444;
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(236, 72, 153, 0.1));
}

.item-info-inventory {
    text-align: center;
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--spacing-xs);
}

.item-name-inventory {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    height: 2.4em;
    margin-bottom: auto;
}

.item-quantity {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent-color);
    margin-top: auto;
}

/* Sell Modal Styles */
.sell-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

.sell-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: var(--bg-primary);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    color: var(--text-accent);
    margin: 0;
}

.close-modal {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.close-modal:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.modal-body {
    padding: var(--spacing-lg);
}

.item-preview {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background-color: var(--bg-secondary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
}

.preview-icon {
    width: 60px;
    height: 60px;
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--accent-color);
}

.preview-info {
    flex: 1;
}

.preview-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.preview-rarity {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    margin-bottom: var(--spacing-xs);
}

.preview-rarity.common {
    background-color: #6b7280;
    color: white;
}

.preview-rarity.uncommon {
    background-color: #10b981;
    color: white;
}

.preview-rarity.magic {
    background-color: #3b82f6;
    color: white;
}

.preview-rarity.rare {
    background-color: #8b5cf6;
    color: white;
}

.preview-rarity.epic {
    background-color: #f59e0b;
    color: white;
}

.preview-rarity.legendary {
    background-color: #ef4444;
    color: white;
}

.preview-rarity.mythic {
    background-color: #ec4899;
    color: white;
}

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

.sell-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.quantity-section label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.quantity-btn {
    width: 40px;
    height: 40px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.quantity-btn:hover {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.quantity-input {
    width: 100px;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    text-align: center;
    font-weight: 600;
}

.quantity-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(205, 133, 63, 0.2);
}

.price-info {
    background-color: var(--bg-secondary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.total-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--warning-color);
}

.modal-footer {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.sell-all-btn,
.sell-selected-btn {
    flex: 1;
    padding: var(--spacing-md);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.sell-all-btn {
    background-color: var(--warning-color);
    color: white;
}

.sell-all-btn:hover {
    background-color: #b45309;
    transform: scale(1.02);
}

.sell-selected-btn {
    background-color: var(--success-color);
    color: white;
}

.sell-selected-btn:hover {
    background-color: #16a34a;
    transform: scale(1.02);
}

.cancel-btn {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.cancel-btn:hover {
    background-color: var(--error-color);
    color: white;
    border-color: var(--error-color);
}

/* Responsive Design */
@media (max-width: 768px) {
    .inventory-stats {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .inventory-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-select,
    .sort-btn {
        width: 100%;
        justify-content: center;
    }

    .inventory-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: var(--spacing-xs);
    }

    .modal-content {
        width: 95%;
    }

    .modal-footer {
        flex-direction: column;
    }

    .price-info {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-xs);
    }
}

@media (max-width: 480px) {
    .inventory-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    }

    .item-name-inventory {
        font-size: 0.7rem;
    }

    .item-quantity {
        font-size: 0.65rem;
    }

    .item-value {
        font-size: 0.6rem;
    }
}

/* Camp Stats */
.camp-stats {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

.camp-level,
.building-slots {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background-color: var(--bg-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    font-weight: 600;
}

.camp-level i {
    color: var(--accent-color);
}

.building-slots i {
    color: var(--warning-color);
}

.camp-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.buildings-section {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.sidebar-nav {
    flex: 1;
    padding: var(--spacing-sm)
}

.nav-section {
    margin-bottom: var(--spacing-md)
}

.section-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
    padding-left: var(--spacing-sm)
}

.nav-list {
    list-style: none
}

.nav-list li {
    margin-bottom: var(--spacing-xs)
}

.nav-btn {
    font-family: var(--font-primary);
    width: 100%;
    padding: 4px var(--spacing-md);
    background: none;
    border: none;
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.9rem;
    position: relative;
}

.external-link {
    font-family: var(--font-primary);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: none;
    border: none;
    color: var(--text-primary);
    text-align: left;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.9rem;
    text-decoration: none
}

.nav-btn:hover,
.external-link:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-accent)
}

/* Skill Navigation Info */
.skill-nav-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.skill-nav-name {
    font-family: var(--font-primary);
    flex: 1;
    text-align: left;
}

.skill-nav-level {
    font-family: var(--font-primary);
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.nav-btn.active {
    background-color: var(--accent-color);
    color: white;
    font-weight: 500
}

.nav-btn i,
.external-link i {
    width: 16px;
    text-align: center
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #fff4e4;
}

.content-inner {
    max-width: 1280px;
    width: 100%;
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
}

.ui-settings {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-secondary);
}

.ui-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

.content-container {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    display: flex;
    justify-content: center;
    background-color: inherit;
}

/* Responsive adjustments for the wrapper */
@media (max-width: 1280px) {
    .content-wrapper {
        max-width: 100%;
        box-shadow: none;
    }
    
    .main-content {
        background-color: var(--bg-primary);
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .content-wrapper {
        max-width: 100%;
        margin: 0;
        box-shadow: none;
    }
    
    .main-content {
        background-color: var(--bg-primary);
    }
}

.game-title-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-md)
}

.version {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background-color: var(--bg-tertiary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color)
}

.game-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-accent);
    text-shadow: 1px 1px 2px var(--shadow)
}

.ui-right-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg)
}

.player-gold-ui {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--warning-color);
    font-weight: 600;
    background-color: var(--bg-tertiary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    font-size: 0.9rem
}

.player-gold-ui i {
    color: #ffd700
}

.settings-buttons {
    display: flex;
    gap: var(--spacing-sm)
}

.settings-btn {
    padding: var(--spacing-sm);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center
}

.settings-btn:hover {
    background-color: var(--accent-color);
    color: white
}

.content-container {
    flex: 1;
    overflow-y: auto;
}

.page {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding-bottom: 80px;
}

.page.active {
    display: block;
    opacity: 1;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-color)
}

.page-header h2 {
    font-size: 2rem;
    color: var(--text-accent);
    font-weight: 600
}

.skill-level {
    background-color: var(--accent-color);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    font-weight: 600
}

.energy-display {
    display: flex;
    align-items: center;
    gap: var(--spacing-md)
}

.energy-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--warning-color);
    font-weight: 600
}

.energy-info i {
    color: #ffd700
}

.energy-bar {
    width: 150px;
    height: 20px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden
}

.energy-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffd700, #ffed4e);
    transition: width 0.3s ease
}

.map-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl)
}

.current-location {
    background-color: var(--bg-secondary);
    border: 2px solid var(--accent-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg)
}

.location-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md)
}

.location-header h3 {
    color: var(--text-accent);
    margin: 0
}

.location-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs)
}

.current-region {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary)
}

.current-city {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent-color)
}

.location-description {
    color: var(--text-secondary);
    font-style: italic;
    margin-top: var(--spacing-sm)
}

.travel-sections {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl)
}

.travel-section {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color)
}

.travel-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-accent);
    margin-bottom: var(--spacing-lg);
    font-size: 1.2rem
}

.travel-title i {
    color: var(--accent-color)
}

.cities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md)
}

.city-card {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
    cursor: pointer
}

.city-card:hover:not(.current) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
    border-color: var(--accent-color)
}

.city-card.current {
    border-color: var(--success-color);
    background-color: var(--bg-primary)
}

.city-info {
    flex: 1
}

.city-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs)
}

.city-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary)
}

.travel-cost {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--warning-color);
    background-color: var(--bg-primary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm)
}

.travel-cost i {
    color: #ffd700
}

.current-location-badge {
    background-color: var(--success-color);
    color: white;
    font-size: 0.8rem
}

.regions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg)
}

.region-card {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md)
}

.region-card:hover:not(.locked) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow);
    border-color: var(--accent-color)
}

.region-card.locked {
    opacity: 0.6
}

.region-header {
    margin-bottom: var(--spacing-sm)
}

.region-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs)
}

.region-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-style: italic
}

.region-cities {
    background-color: var(--bg-primary);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-md)
}

.city-preview {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4
}

.region-travel {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.travel-cost-region {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-weight: 600;
    color: var(--warning-color)
}

.travel-cost-region i {
    color: #ffd700
}

.region-card.locked .travel-cost-region {
    color: var(--text-secondary)
}

.region-card.locked .travel-cost-region i {
    color: var(--text-secondary)
}

.travel-btn {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    min-width: 80px
}

.travel-btn:hover:not(:disabled) {
    background-color: var(--text-accent);
    transform: scale(1.05)
}

.travel-btn:disabled {
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    cursor: not-allowed
}

.travel-btn:active:not(:disabled) {
    transform: scale(0.98)
}

/* Market Page */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-color);
}

.market-header-right {
    display: flex;
    align-items: center;
}

.history-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem;
}

.history-btn:hover {
    background-color: var(--text-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(205, 133, 63, 0.3);
}

.history-btn i {
    font-size: 0.9rem;
}

.market-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl)
}

.market-search {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md)
}

.search-container {
    display: flex;
    gap: var(--spacing-sm)
}

.search-input {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: var(--transition)
}

.search-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(205, 133, 63, 0.2)
}

.search-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--accent-color);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px
}

.search-btn:hover {
    background-color: var(--text-accent)
}

.market-filters {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap
}

.filter-select {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
    min-width: 150px
}

.filter-select:focus {
    outline: none;
    border-color: var(--accent-color)
}

.market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--spacing-md);
}

.market-item {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-height: 200px;
}

.market-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
    border-color: var(--accent-color);
}

.item-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.item-icon-market {
    width: 32px;
    height: 32px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--accent-color);
    flex-shrink: 0;
}

.item-info-market {
    flex: 1;
    min-width: 0;
}

.item-name-market {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
    line-height: 1.2;
}

.item-rarity {
    font-size: 0.7rem;
    font-weight: 400;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    opacity: 0.8;
    display: inline-block;
    line-height: 1
}

.item-rarity.common {
    background-color: #6b7280;
    color: white
}

.item-rarity.uncommon {
    background-color: #10b981;
    color: white
}

.item-rarity.rare {
    background-color: #3b82f6;
    color: white
}

.item-rarity.epic {
    background-color: #8b5cf6;
    color: white
}

.market-prices {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.price-section {
    flex: 1;
    background-color: var(--bg-tertiary);
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    text-align: center;
}

.price-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    font-weight: 600;
}

.price-value {
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.price-value i {
    font-size: 0.7rem;
}

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

.buy-price {
    color: var(--error-color)
}

.sell-price {
    color: var(--success-color)
}

.price-value i {
    color: #ffd700
}

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

.market-actions {
    display: flex;
    gap: var(--spacing-xs);
    margin-top: auto;
}

.market-btn {
    flex: 1;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.8rem;
}

.buy-btn-market {
    background-color: var(--success-color);
    color: white;
}

.buy-btn-market:hover {
    background-color: #16a34a;
    transform: scale(1.05);
}

.sell-btn-market {
    background-color: var(--warning-color);
    color: white;
}

.sell-btn-market:hover {
    background-color: #b45309;
    transform: scale(1.05);
}

.market-btn:active {
    transform: scale(0.98)
}

.market-info {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-style: italic
}

.market-history-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.market-history-modal.active {
    display: flex;
}

.market-history-modal .modal-content {
    background-color: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-color);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease-out;
}

.history-tabs {
    display: flex;
    background-color: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.history-tab-btn {
    flex: 1;
    padding: var(--spacing-md);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    font-weight: 500;
    border-bottom: 3px solid transparent;
}

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

.history-tab-btn.active {
    background-color: var(--bg-primary);
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.history-tab-content {
    display: none;
    padding: var(--spacing-lg);
    max-height: 400px;
    overflow-y: auto;
}

.history-tab-content.active {
    display: block;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.history-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background-color: var(--bg-secondary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.history-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--shadow);
}

.history-icon {
    width: 40px;
    height: 40px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--accent-color);
    flex-shrink: 0;
}

.history-details {
    flex: 1;
}

.history-item-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.history-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.history-price {
    font-size: 0.9rem;
    font-weight: 600;
}

.history-price.bought {
    color: var(--error-color);
}

.history-price.sold {
    color: var(--success-color);
}

/* Responsive Updates */
@media (max-width: 768px) {
    .market-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: var(--spacing-sm);
    }
    
    .market-item {
        padding: var(--spacing-sm);
        min-height: 180px;
    }
    
    .item-name-market {
        font-size: 0.8rem;
    }
    
    .price-value {
        font-size: 0.75rem;
    }
    
    .market-btn {
        font-size: 0.75rem;
        padding: 6px var(--spacing-xs);
    }
    
    .page-header {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: flex-start;
    }
    
    .market-header-right {
        align-self: flex-end;
    }
}

@media (max-width: 480px) {
    .market-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
    
    .market-history-modal .modal-content {
        width: 95%;
        margin: var(--spacing-md);
    }
}

/* Merchant Page */

.merchant-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl)
}

.merchant-section {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color)
}

.merchant-section .section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1.3rem;
    color: var(--text-accent);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color)
}

.merchant-section .section-title i {
    color: var(--accent-color)
}

.merchant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-md)
}

.merchant-item {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transition: var(--transition);
    cursor: pointer
}

.merchant-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
    border-color: var(--accent-color)
}

.item-icon {
    width: 50px;
    height: 50px;
    background-color: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--accent-color);
    flex-shrink: 0
}

.item-details {
    flex: 1
}

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

.item-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs)
}

.item-stats {
    font-size: 0.8rem;
    color: var(--success-color);
    font-weight: 500;
    background-color: var(--bg-primary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    display: inline-block
}

.item-purchase {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-sm);
    flex-shrink: 0
}

.item-price {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--warning-color);
    font-weight: 600;
    font-size: 0.9rem
}

.item-price i {
    color: #ffd700
}

.buy-btn {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem;
    min-width: 80px
}

.buy-btn:hover {
    background-color: var(--text-accent);
    transform: scale(1.05)
}

.buy-btn:active {
    transform: scale(0.98)
}

.merchant-info {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-style: italic
}

.skill-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--spacing-xl)
}

.skill-left,
.skill-right {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg)
}

.skill-left h3,
.skill-right h3 {
    color: var(--text-accent);
    margin-bottom: var(--spacing-md);
    font-size: 1.1rem
}

.current-action {
    margin-bottom: var(--spacing-lg)
}

.action-info {
    background-color: var(--bg-tertiary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md)
}

.action-name {
    font-weight: 600;
    margin-bottom: var(--spacing-sm)
}

.progress-bar {
    height: 20px;
    background-color: var(--bg-primary);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: var(--spacing-xs)
}

.progress-fill {
    height: 100%;
    background-color: var(--success-color);
    transition: width 0.3s ease
}

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

.consumables {
    margin-bottom: var(--spacing-lg)
}

.consumable-slots {
    display: flex;
    gap: var(--spacing-sm)
}

.rewards-list {
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md)
}

.reward-item {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--border-color)
}

.reward-item:last-child {
    border-bottom: none
}

.item-count {
    color: var(--text-accent);
    font-weight: 600
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md)
}

.action-card {
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    cursor: pointer;
    transition: var(--transition)
}

.action-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow)
}

.action-card.active {
    border-color: var(--accent-color);
    background-color: var(--bg-primary)
}

.action-card.locked {
    opacity: 0.5;
    cursor: not-allowed
}

.action-tier {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs)
}

.action-name {
    font-weight: 600;
    margin-bottom: var(--spacing-xs)
}

.action-req {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs)
}

.action-xp {
    color: var(--success-color);
    font-weight: 600;
    font-size: 0.9rem
}

.coming-soon,
.beta-notice {
    text-align: center;
    padding: var(--spacing-xl);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    margin-top: var(--spacing-xl)
}

.coming-soon i,
.beta-notice i {
    font-size: 3rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md)
}

.coming-soon h3,
.beta-notice h3 {
    color: var(--text-accent);
    margin-bottom: var(--spacing-sm)
}

@media (max-width:768px) {
    .sidebar {
        width: 240px
    }

    .skill-content {
        grid-template-columns: 1fr
    }

    .cities-grid,
    .regions-grid {
        grid-template-columns: 1fr
    }

    .actions-grid {
        grid-template-columns: 1fr
    }

    .game-title-section {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs)
    }

    .game-title {
        font-size: 1.2rem
    }

    .merchant-grid {
        grid-template-columns: 1fr
    }

    .merchant-item {
        flex-direction: column;
        text-align: center
    }

    .item-purchase {
        align-items: center
    }

    .market-grid {
        grid-template-columns: 1fr
    }

    .market-filters {
        flex-direction: column
    }

    .filter-select {
        min-width: 100%
    }

    .market-prices {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm)
    }

    .energy-display {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm)
    }

    .energy-bar {
        width: 200px
    }

    .quest-stats {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .quests-grid {
        grid-template-columns: 1fr;
    }

    .quest-header {
        flex-wrap: wrap;
    }

    .quest-rewards {
        flex-direction: column;
    }

    .quest-actions {
        flex-direction: column;
    }

    .achievement-stats {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .achievements-grid {
        grid-template-columns: 1fr;
    }

    .achievement-card {
        flex-direction: column;
        text-align: center;
    }

    .category-btn {
        flex: 1;
        justify-content: center;
    }

    .store-categories {
        flex-direction: column;
    }

    .membership-header {
        flex-direction: column;
        text-align: center;
    }

    .membership-benefits {
        grid-template-columns: 1fr;
    }

    .currency-grid,
    .upgrades-grid,
    .items-grid {
        grid-template-columns: 1fr;
    }

    .upgrade-card {
        flex-direction: column;
        text-align: center;
    }

    .upgrade-purchase {
        align-items: center;
    }

    .camp-stats {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
}

@media (max-width:480px) {
    .game-container {
        flex-direction: column
    }

    .sidebar {
        width: 100%;
        height: auto;
        max-height: 200px;
        overflow-y: auto
    }

    .sidebar-nav {
        display: none
    }

    .main-content {
        height: calc(100vh - 200px)
    }
}

::-webkit-scrollbar {
    width: 8px
}

::-webkit-scrollbar-track {
    background: var(--bg-primary)
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-sm)
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color)
}


.skill-tree-visual .tree-node {
    position: absolute;
    width: 80px;
    height: 80px;
    background: var(--bg-tertiary);
    border: 3px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--accent-color);
    box-shadow: 0 4px 16px var(--shadow);
    transition: all 0.3s ease;
    cursor: pointer;
    z-index: 2;
}

.skill-tree-visual .tree-node .node-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 4px;
    text-align: center;
    line-height: 1.2;
}

.skill-tree-visual .tree-node.active {
    border-color: var(--success-color);
    background: linear-gradient(135deg, #e6f7ff, #bae7ff);
    color: var(--success-color);
    box-shadow: 0 0 20px rgba(82, 196, 26, 0.3);
}

.skill-tree-visual .tree-node.unlocked {
    border-color: var(--accent-color);
    background: linear-gradient(135deg, #fff7e6, #ffe7ba);
    color: var(--accent-color);
}

.skill-tree-visual .tree-node.locked {
    border-color: var(--text-secondary);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    opacity: 0.6;
    cursor: not-allowed;
}

.skill-tree-visual .tree-node.starter {
    border-color: #ffd700;
    background: linear-gradient(135deg, #fff9c4, #ffeaa7);
    color: #d4af37;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.4);
}

.skill-tree-visual .tree-node.master {
    border-color: #8b5cf6;
    background: linear-gradient(135deg, #f3e8ff, #ddd6fe);
    color: #8b5cf6;
    font-size: 2.5rem;
    width: 100px;
    height: 100px;
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.5);
}

.skill-tree-visual .tree-node:hover:not(.locked) {
    border-color: var(--warning-color);
    box-shadow: 0 8px 32px var(--shadow);
    transform: scale(1.05);
    z-index: 10;
}

/* Tooltip styles */
.skill-tree-visual .tree-node[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: pre-line;
    box-shadow: 0 8px 32px var(--shadow);
    border: 1px solid var(--border-color);
    z-index: 100;
    min-width: 250px;
    max-width: 300px;
    text-align: left;
    pointer-events: none;
}

.skill-tree-visual .tree-node[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    border: 10px solid transparent;
    border-top-color: var(--bg-primary);
    z-index: 100;
    pointer-events: none;
}

.skill-tree-content .stats-section {
    margin-top: 0;
    background: var(--bg-secondary);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.skill-points {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-secondary);
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: 600;
    color: #daa520;
    border: 1px solid var(--border-color);
    font-size: 1rem;
}

.skill-points i {
    color: #ffd700;
}

.total-bonuses {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bonus-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.bonus-label {
    font-weight: 500;
    color: var(--text-secondary);
}

.bonus-value {
    font-weight: 600;
    color: var(--success-color);
}

/* Gathering Skill Pages Styles */
.skill-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-color);
}

.skill-title-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.skill-icon-large {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    flex-shrink: 0;
}

.skill-icon-large.woodcutting {
    background: linear-gradient(135deg, #228b22, #32cd32);
}

.skill-icon-large.mining {
    background: linear-gradient(135deg, #696969, #a9a9a9);
}

.skill-icon-large.fishing {
    background: linear-gradient(135deg, #4682b4, #87ceeb);
}

.skill-icon-large.foraging {
    background: linear-gradient(135deg, #9acd32, #adff2f);
}

.skill-page-header h2 {
    font-size: 2rem;
    color: var(--text-accent);
    font-weight: 600;
    margin: 0;
}

.skill-level-section {
    display: flex;
    align-items: center;
}

.skill-level-display {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.skill-level {
    background-color: var(--accent-color);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 1.1rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.skill-progress {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: center;
}

.level-progress-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.level-indicator {
    background-color: var(--accent-color);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.9rem;
    min-width: 30px;
    text-align: center;
    flex-shrink: 0;
}

.level-indicator.left {
    background-color: var(--success-color);
}

.level-indicator.right {
    background-color: var(--text-secondary);
}

.progress-bar {
    width: 200px;
    height: 20px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success-color), #32cd32);
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

/* Current Action Styles */
.current-action {
    background-color: var(--bg-secondary);
    border: 2px solid var(--accent-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
    0%, 100% {
        border-color: var(--accent-color);
    }
    50% {
        border-color: var(--success-color);
    }
}

.action-info {
    flex: 1;
}

.action-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.action-progress {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.action-progress .progress-bar {
    width: 300px;
    height: 16px;
}

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

.stop-action-btn {
    background-color: var(--error-color);
    color: white;
    border: none;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.stop-action-btn:hover {
    background-color: #b91c1c;
    transform: scale(1.05);
}

/* Skill Content Layout */
.skill-content {
    display: grid;
    grid-template-columns: 500px 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

.skill-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    width: 100%;
}

.skill-actions {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.skill-actions h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-accent);
    margin-bottom: var(--spacing-lg);
    font-size: 1.3rem;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color);
}

.skill-actions h3 i {
    color: var(--accent-color);
}

/* Consumables Section */
.consumables-section {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.consumables-section h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-accent);
    margin-bottom: var(--spacing-lg);
    font-size: 1.3rem;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color);
}

.consumables-section h3 i {
    color: var(--accent-color);
}

.consumables-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.consumable-slot {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    transition: var(--transition);
    text-align: center;
    min-height: 140px;
}

.consumable-slot:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
}

.consumable-slot .slot-icon {
    width: 50px;
    height: 50px;
    background-color: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--accent-color);
    flex-shrink: 0;
}

.consumable-slot .slot-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-xs);
    width: 100%;
}

.slot-name {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin: 0;
}

.slot-item {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
}

.equip-btn {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    width: 100%;
    flex-shrink: 0;
}

.equip-btn:hover {
    background-color: var(--text-accent);
    transform: scale(1.05);
}

/* Responsive design for consumables */
@media (max-width: 768px) {
    .consumables-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    
    .consumable-slot {
        min-height: 120px;
    }
    
    .consumable-slot .slot-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .slot-name {
        font-size: 0.8rem;
    }
    
    .slot-item {
        font-size: 0.75rem;
    }
    
    .equip-btn {
        font-size: 0.75rem;
        padding: var(--spacing-xs);
    }
}

@media (max-width: 480px) {
    .consumables-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .consumable-slot {
        flex-direction: row;
        text-align: left;
        gap: var(--spacing-md);
        min-height: 80px;
    }
    
    .consumable-slot .slot-info {
        align-items: flex-start;
        text-align: left;
    }
    
    .equip-btn {
        width: auto;
        flex-shrink: 0;
        min-width: 60px;
    }
}


.equip-btn:hover {
    background-color: var(--text-accent);
    transform: scale(1.05);
}

/* Rewards Section */
.rewards-section {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.rewards-section h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-accent);
    margin-bottom: var(--spacing-lg);
    font-size: 1.1rem;
}

.rewards-section h3 i {
    color: var(--accent-color);
}

.rewards-display {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.rewards-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    min-height: 120px;
}

.reward-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
    color: var(--text-primary);
}

.reward-item:last-child {
    border-bottom: none;
}

.reward-item i {
    color: var(--accent-color);
    width: 16px;
    text-align: center;
}

.loot-all-btn {
    background: linear-gradient(135deg, var(--accent-color), #f3a969);
    color: white;
    border: none;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    font-size: 1rem;
}

.loot-all-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 139, 34, 0.3);
}

/* Actions Grid */
.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.action-card {
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.action-card:hover:not(.locked) {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--shadow);
    border-color: var(--accent-color);
}

.action-card.locked {
    opacity: 0.6;
    cursor: not-allowed;
    border-color: var(--text-secondary);
}

.action-card.active {
    border-color: var(--success-color);
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(34, 139, 34, 0.1));
}

.action-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.action-icon {
    width: 50px;
    height: 50px;
    background-color: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--accent-color);
    flex-shrink: 0;
}

.action-info {
    flex: 1;
}

.action-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

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

.action-rewards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.action-rewards .reward {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.85rem;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.action-rewards .reward i {
    color: var(--accent-color);
    width: 14px;
    text-align: center;
}

.unlock-requirement {
    font-size: 0.85rem;
    color: var(--error-color);
    font-weight: 600;
    font-style: italic;
    text-align: center;
    margin-top: var(--spacing-sm);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .skill-content {
        grid-template-columns: 300px 1fr;
    }
    
    .actions-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {
    .skill-page-header {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }
    
        .skill-level-display {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: center;
    }

    .progress-bar {
        width: 100%;
        max-width: 200px;
    }
    
    .skill-content {
        grid-template-columns: 1fr;
    }
    
    .current-action {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }
    
    .action-progress .progress-bar {
        width: 100%;
        max-width: 300px;
    }
    
    .actions-grid {
        grid-template-columns: 1fr;
    }
    
    .consumable-slot {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
}

@media (max-width: 480px) {
    .skill-page-header h2 {
        font-size: 1.5rem;
    }
    
    .skill-icon-large {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

     .skill-level {
        font-size: 1rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .progress-bar {
        width: 150px;
    }
    
    .action-header {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
}

/* Messaging UI */
.player-messages-ui {
    position: relative;
    margin-right: var(--spacing-sm);
}

.messages-btn {
    background: none;
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

.messages-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    transform: scale(1.05);
}

.message-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: var(--error-color);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-primary);
}

/* Overview Page Styles */
.overview-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.last-login-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Away Progress Section */
.away-progress-section {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.away-progress-section h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-accent);
    margin-bottom: var(--spacing-lg);
    font-size: 1.3rem;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color);
}

.away-progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
}

.away-activity-card {
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: var(--transition);
}

.away-activity-card.active {
    border-color: var(--success-color);
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(34, 139, 34, 0.1));
}

.activity-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.activity-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
    flex-shrink: 0;
}

.activity-icon.woodcutting {
    background: linear-gradient(135deg, #228b22, #32cd32);
}

.activity-icon.market {
    background: linear-gradient(135deg, #4682b4, #87ceeb);
}

.activity-info {
    flex: 1;
}

.activity-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.activity-action {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.activity-duration {
    font-size: 0.8rem;
    color: var(--accent-color);
    font-weight: 600;
}

.activity-progress {
    margin-bottom: var(--spacing-md);
}

.progress-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background-color: var(--bg-primary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 600;
}

.stat-item i {
    color: var(--accent-color);
}

.level-progress {
    background-color: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
}

.level-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.collect-btn {
    background: linear-gradient(135deg, var(--success-color), #32cd32);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    width: 100%;
}

.collect-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 139, 34, 0.3);
}

/* Quick Stats Section */
.quick-stats-section {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.quick-stats-section h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-accent);
    margin-bottom: var(--spacing-lg);
    font-size: 1.3rem;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color);
}

.quick-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
}

.quick-stat-card {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transition: var(--transition);
}

.quick-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
    border-color: var(--accent-color);
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
    flex-shrink: 0;
}

.stat-icon.gold {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
}

.stat-icon.xp {
    background: linear-gradient(135deg, #9333ea, #c084fc);
}

.stat-icon.items {
    background: linear-gradient(135deg, #0891b2, #67e8f9);
}

.stat-icon.energy {
    background: linear-gradient(135deg, #ea580c, #fb923c);
}

.stat-info {
    flex: 1;
}

.stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.stat-change {
    font-size: 0.8rem;
    font-weight: 600;
}

.stat-change.positive {
    color: var(--success-color);
}

.stat-change.negative {
    color: var(--error-color);
}

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

/* Recent Activity & Messages Section */
.recent-activity-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}

.activity-column,
.messages-column {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.activity-column h3,
.messages-column h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-accent);
    margin-bottom: var(--spacing-lg);
    font-size: 1.2rem;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color);
}

.activity-feed,
.messages-feed {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-height: 400px;
    overflow-y: auto;
}

.activity-item {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    transition: var(--transition);
}

.activity-item:hover {
    border-color: var(--accent-color);
    transform: translateX(4px);
}

.activity-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
}

.activity-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.9rem;
    color: var(--text-primary);
}

.activity-content i {
    color: var(--accent-color);
    width: 16px;
    text-align: center;
}

.message-item {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    transition: var(--transition);
}

.message-item.unread {
    border-color: var(--accent-color);
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(59, 130, 246, 0.1));
}

.message-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.sender-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.sender-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: white;
    flex-shrink: 0;
}

.sender-avatar.guild-leader {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
}

.sender-avatar.system {
    background: linear-gradient(135deg, #6b7280, #9ca3af);
}

.sender-avatar.player {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
}

.sender-details {
    display: flex;
    flex-direction: column;
}

.sender-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sender-role {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.message-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.message-content {
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: var(--spacing-sm);
}

.message-actions {
    display: flex;
    gap: var(--spacing-xs);
}

.reply-btn,
.mark-read-btn {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: 4px var(--spacing-xs);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.mark-read-btn {
    background-color: var(--text-secondary);
}

.reply-btn:hover,
.mark-read-btn:hover {
    transform: scale(1.05);
}

.view-all-messages-btn {
    background: linear-gradient(135deg, var(--accent-color), #d5833d);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    width: 100%;
    margin-top: var(--spacing-md);
}

.view-all-messages-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}

/* Quick Actions Section */
.quick-actions-section {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.quick-actions-section h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-accent);
    margin-bottom: var(--spacing-lg);
    font-size: 1.3rem;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color);
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.quick-action-btn {
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    text-align: left;
}

.quick-action-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--shadow);
    border-color: var(--accent-color);
}

.action-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
    flex-shrink: 0;
}

.action-icon.woodcutting {
    background: linear-gradient(135deg, #228b22, #32cd32);
}

.action-icon.market {
    background: linear-gradient(135deg, #4682b4, #87ceeb);
}

.action-icon.guild {
    background: linear-gradient(135deg, #9333ea, #c084fc);
}

.action-icon.inventory {
    background: linear-gradient(135deg, #0891b2, #67e8f9);
}

.action-info {
    flex: 1;
}

.action-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.action-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .away-progress-grid {
        grid-template-columns: 1fr;
    }
    
    .recent-activity-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .quick-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .quick-actions-grid {
        grid-template-columns: 1fr;
    }
    
    .progress-stats {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .message-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
}

@media (max-width: 480px) {
    .quick-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .quick-stat-card {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
    
    .message-count {
        display: none;
    }
}

/* Hamburger Menu */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-right: var(--spacing-sm);
    z-index: 1001;
    transition: var(--transition);
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background-color: var(--text-primary);
    border-radius: 2px;
    transition: var(--transition);
    transform-origin: center;
}

.hamburger-menu.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

.hamburger-menu:hover .hamburger-line {
    background-color: var(--accent-color);
}

/* Mobile Overlay */
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-overlay.active {
    display: block;
    opacity: 1;
}

/* Sidebar Mobile Modifications */
.sidebar {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1000;
    position: relative;
}

/* Mobile Responsive Updates */
@media (max-width: 768px) {
    .hamburger-menu {
        display: flex;
    }
    
    .game-title-section {
        display: flex;
        align-items: center;
    }
    
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        transform: translateX(-100%);
        box-shadow: none;
        z-index: 1000;
        overflow-y: auto;
        width: 280px;
    }
    
    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
    }
    
    .main-content {
        margin-left: 0;
        width: 100%;
        transition: none;
    }
    
    .content-container {
        padding: var(--spacing-md);
    }
    
    /* Adjust UI settings for mobile */
    .ui-settings {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .game-title {
        font-size: 1.2rem;
    }
    
    .version {
        font-size: 0.7rem;
    }
    
    .player-gold-ui span {
        font-size: 0.9rem;
    }
    
    .settings-btn {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    
    .messages-btn {
        width: 36px;
        height: 36px;
    }
    
    .message-count {
        width: 16px;
        height: 16px;
        font-size: 0.6rem;
        top: -6px;
        right: -6px;
    }
    
    /* Mobile page adjustments */
    .page-header {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
        margin-bottom: var(--spacing-lg);
    }
    
    .skill-level-display {
        justify-content: center;
    }
    
    /* Overview page mobile adjustments */
    .away-progress-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .quick-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .recent-activity-section {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .quick-actions-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    /* Skill content mobile adjustments */
    .skill-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .skill-sidebar {
        order: 2;
    }
    
    .skill-actions {
        order: 1;
    }
    
    .actions-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .action-card {
        padding: var(--spacing-md);
    }
    
    .action-header {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
    
    /* Current action mobile adjustments */
    .current-action {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }
    
    .action-progress .progress-bar {
        width: 100%;
        max-width: 300px;
    }
    
    /* Consumables mobile adjustments */
    .consumable-slot {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
    
    .consumable-slot .slot-info {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .sidebar {
        width: 260px;
    }
    
    .hamburger-menu {
        width: 25px;
        height: 25px;
    }
    
    .hamburger-line {
        height: 2px;
    }
    
    .game-title {
        font-size: 1rem;
    }
    
    .version {
        display: none;
    }
    
    .player-gold-ui {
        flex-direction: column;
        gap: 2px;
        text-align: center;
    }
    
    .player-gold-ui span {
        font-size: 0.8rem;
    }
    
    .settings-btn {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
    
    .messages-btn {
        width: 32px;
        height: 32px;
    }
    
    .quick-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .quick-stat-card {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
    
    .away-activity-card {
        padding: var(--spacing-md);
    }
    
    .progress-stats {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .stat-item {
        justify-content: center;
    }
    
    .message-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .message-actions {
        justify-content: center;
        width: 100%;
    }
    
    /* Hide message count on very small screens */
    .message-count {
        display: none;
    }
    
    /* Adjust skill level progress for very small screens */
    .level-progress-container {
        gap: 4px;
    }
    
    .level-indicator {
        font-size: 0.7rem;
        padding: 2px 4px;
        min-width: 18px;
    }
    
    .progress-bar {
        width: 100px;
    }
    
    .progress-text {
        font-size: 0.75rem;
    }
}

/* Landscape mobile adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .sidebar {
        width: 240px;
    }
    
    .quick-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .recent-activity-section {
        grid-template-columns: 1fr 1fr;
    }
    
    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Smooth transitions for all interactive elements */
.nav-btn,
.quick-action-btn,
.action-card,
.quick-stat-card,
.away-activity-card,
.message-item,
.activity-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Ensure touch targets are large enough on mobile */
@media (max-width: 768px) {
    .nav-btn,
    .settings-btn,
    .messages-btn,
    .equip-btn,
    .collect-btn,
    .loot-all-btn,
    .reply-btn,
    .mark-read-btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    .action-card {
        min-height: 120px;
    }
    
    .quick-action-btn {
        min-height: 80px;
    }
}

/* Mobile Overlay */
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-overlay.active {
    display: block;
    opacity: 1;
}

/* Ensure sidebar mobile behavior */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        z-index: 1000;
        overflow-y: auto;
        width: 280px;
        box-shadow: none;
    }
    
    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
    }
    
    .main-content {
        margin-left: 0;
        width: 100%;
    }
}

.game-logo{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}.game-title{font-size:1.8rem;font-weight:800;background: var(--accent-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;letter-spacing:-0.5px;line-height:1;margin:0;position:relative;text-shadow:none}.game-title::before{content:'SkillAge';position:absolute;top:0;left:0;background:linear-gradient(135deg,rgba(59,130,246,0.3),rgba(139,92,246,0.3),rgba(236,72,153,0.3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:blur(8px);z-index:-1;opacity:0.6}.game-subtitle{font-size:0.7rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1.2px;margin-top:-2px;opacity:0.8;position:relative}.game-subtitle::after{content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:60%;height:1px;background:linear-gradient(90deg,transparent,var(--accent-color),transparent);opacity:0.5}.version{font-size:0.65rem;color:var(--text-secondary);background:linear-gradient(135deg,var(--bg-tertiary),var(--bg-secondary));padding:2px 6px;border-radius:var(--radius-sm);border:1px solid var(--border-color);font-weight:500;margin-left:var(--spacing-sm);box-shadow:0 1px 3px rgba(0,0,0,0.1)}@media (max-width:768px){.game-title{font-size:1.4rem}.game-subtitle{font-size:0.6rem;letter-spacing:1px}.version{font-size:0.6rem;padding:1px 4px}}@media (max-width:480px){.game-title{font-size:1.2rem}.game-subtitle{font-size:0.55rem;letter-spacing:0.8px}.version{display:none}}@media (max-width:320px){.game-title{font-size:1rem}.game-subtitle{font-size:0.5rem;letter-spacing:0.5px}}

/* Enhanced Skill Stats Panel */
.skill-stats-panel {
    margin: 20px 0;
    padding: 0 20px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    margin-bottom: 20px;
}

.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-card.primary {
    border-left: 4px solid #4CAF50;
}

.stat-card.equipment {
    border-left: 4px solid #FF9800;
}

.stat-card.skill-tree {
    border-left: 4px solid #9C27B0;
}

.stat-card.consumables {
    border-left: 4px solid #2196F3;
}

.stat-card.totals {
    border-left: 4px solid #F44336;
}

.stat-card.current-action {
    border-left: 4px solid #00BCD4;
}

.stat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.stat-header i {
    font-size: 1.1em;
}

.stat-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.stat-item.highlight {
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    border-radius: 4px;
    margin: 2px 0;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9em;
}

.stat-value {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95em;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .skill-stats-panel {
        padding: 0 10px;
    }
    
    .stat-card {
        padding: 12px;
    }
}

/* Woodcutting Skill Page Styles */
.skill-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-color);
}

.skill-title-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.skill-icon-large {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    flex-shrink: 0;
}

.skill-icon-large.woodcutting {
    background: linear-gradient(135deg, #228b22, #32cd32);
}

.skill-page-header h2 {
    font-size: 2rem;
    color: var(--text-accent);
    font-weight: 600;
    margin: 0;
}

.skill-level-section {
    display: flex;
    align-items: center;
}

.skill-level-display {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.skill-level {
    background-color: var(--accent-color);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 1.1rem;
}

.progress-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 200px;
}

.progress-bar {
    width: 200px;
    height: 20px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #228b22, #32cd32);
    transition: width 0.3s ease;
}

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

.next-level {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 1.1rem;
    border: 2px solid var(--border-color);
}

/* Current Action Display */
.current-action {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    border: 2px solid var(--accent-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    box-shadow: 0 4px 12px var(--shadow);
}

.current-action .action-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #228b22, #32cd32);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    flex-shrink: 0;
}

.current-action .action-info {
    flex: 1;
}

.current-action .action-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.current-action .action-progress {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.current-action .progress-bar {
    width: 100%;
    height: 16px;
    background-color: var(--bg-primary);
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.current-action .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffd700, #ffed4e);
    transition: width 0.1s ease;
}

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

.action-duration {
    text-align: right;
}

.duration-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Main Content Grid */
.skill-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}

.skill-left-column,
.skill-right-column {
    display: flex;
    flex-direction: column;
}

/* Gathered Items Section */
.gathered-items-section {
    display: none;
}

.gathered-items-section h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-accent);
    margin-bottom: var(--spacing-lg);
    font-size: 1.3rem;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color);
}

.gathered-items-section h3 i {
    color: var(--accent-color);
}

.gathered-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    min-height: 120px;
}

.gathered-item {
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    transition: var(--transition);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    position: relative;
    overflow: hidden;
    min-height: 100px;
}

.gathered-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
    border-color: var(--accent-color);
}

.gathered-item .item-icon-inventory {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #228b22, #32cd32);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    margin: 0 auto var(--spacing-xs);
}

.gathered-item .item-info-inventory {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gathered-item .item-name-inventory {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    line-height: 1.2;
}

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

.gathered-item .item-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #228b22, #32cd32);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    flex-shrink: 0;
}

.gathered-item .item-info {
    flex: 1;
}

.gathered-item .item-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.gathered-item .item-quantity {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.gathered-actions {
    display: flex;
    gap: var(--spacing-md);
}

.action-btn {
    flex: 1;
    padding: var(--spacing-md);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    font-size: 0.95rem;
}

.stop-btn {
    background-color: var(--error-color);
    color: white;
}

.stop-btn:hover {
    background-color: #b91c1c;
    transform: scale(1.02);
}

.loot-btn {
    background-color: var(--success-color);
    color: white;
}

.loot-btn:hover {
    background-color: #16a34a;
    transform: scale(1.02);
}

/* Available Resources Section */
.available-resources-section {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.available-resources-section h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-accent);
    margin-bottom: var(--spacing-lg);
    font-size: 1.3rem;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color);
}

.available-resources-section h3 i {
    color: var(--accent-color);
}

.resources-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.resource-card {
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    transition: var(--transition);
    position: relative;
    min-height: 80px;
}

.clickable-card {
    cursor: pointer;
}

.clickable-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--shadow);
    border-color: var(--accent-color);
}

.resource-card.active {
    border-color: var(--success-color);
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(34, 139, 34, 0.1));
}

.resource-card.selected {
    border-color: var(--accent-color);
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(59, 130, 246, 0.1));
}

.resource-card.active::before {
    content: "ACTIVE";
    position: absolute;
    top: var(--spacing-xs);
    right: var(--spacing-xs);
    background-color: var(--success-color);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    z-index: 1;
}

.resource-card.selected::before {
    content: "SELECTED";
    position: absolute;
    top: var(--spacing-xs);
    right: var(--spacing-xs);
    background-color: var(--accent-color);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    z-index: 1;
}

.locked-card {
    opacity: 0.6;
    border-color: var(--text-secondary);
    cursor: not-allowed;
    position: relative;
}

.locked-overlay {
    position: absolute;
    top: 50%;
    right: var(--spacing-md);
    transform: translateY(-50%);
    background-color: var(--text-secondary);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.resource-card:hover:not(.locked) {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--shadow);
    border-color: var(--accent-color);
}

.resource-card.active {
    border-color: var(--success-color);
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(34, 139, 34, 0.1));
}

.resource-card.locked {
    opacity: 0.6;
    border-color: var(--text-secondary);
}

.resource-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.resource-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #228b22, #32cd32);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: white;
    flex-shrink: 0;
}

.resource-info {
    flex: 1;
}

.resource-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.resource-level {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.resource-xp {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--success-color);
    text-align: right;
}

.resource-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
    padding-left: calc(50px + var(--spacing-md));
}

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

.resource-drops {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.start-action-btn {
    display: none;
}

.start-action-btn:not(.locked) {
    background-color: var(--accent-color);
    color: white;
}

.start-action-btn:not(.locked):hover {
    background-color: var(--text-accent);
    transform: scale(1.02);
}

.start-action-btn.locked {
    background-color: var(--text-secondary);
    color: white;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Action Details Section */
.action-details-section {
    display: none;
}

.action-details-section h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-accent);
    margin-bottom: var(--spacing-lg);
    font-size: 1.3rem;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color);
}

.action-details-section h3 i {
    color: var(--accent-color);
}

.action-details-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.action-detail-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.detail-icon {
    width: 40px;
    height: 40px;
    background-color: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--accent-color);
    flex-shrink: 0;
}

.detail-info {
    flex: 1;
}

.detail-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 2px;
}

.detail-value {
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 500;
}

.start-action-btn-large {
    width: 100%;
    padding: var(--spacing-lg);
    background-color: var(--success-color);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-size: 1.1rem;
}

.start-action-btn-large:hover {
    background-color: #16a34a;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 139, 34, 0.3);
}

/* Dynamic Content Section */
.dynamic-content-section {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
    margin-bottom: var(--spacing-xl);
}

.placeholder-content {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    border: 2px dashed var(--border-color);
    text-align: center;
    color: var(--text-secondary);
}

.placeholder-content i {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
    opacity: 0.5;
}

.placeholder-content h4 {
    margin-bottom: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: 1.2rem;
}

.placeholder-content p {
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .skill-page-header {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }
    
    .skill-level-display {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: center;
    }

    .progress-bar {
        width: 100%;
        max-width: 200px;
    }
    
    .skill-content {
        grid-template-columns: 1fr;
    }
    
    .current-action {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }
    
    .current-action .action-progress .progress-bar {
        width: 100%;
        max-width: 300px;
    }
    
    .gathered-actions {
        flex-direction: column;
    }
    
    .consumable-slot {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
}

@media (max-width: 480px) {
    .skill-page-header h2 {
        font-size: 1.5rem;
    }
    
    .skill-icon-large {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .skill-level {
        font-size: 1rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .progress-bar {
        width: 150px;
    }
    
    .resource-header {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
    
    .resource-details {
        padding-left: 0;
        text-align: center;
    }
}