/* Artificer Command Center Styles */

/* Command Center Button */
#command-center-button {
    position: fixed;
    top: 20px;
    right: 100px;
    width: 50px;
    height: 50px;
    background: linear-gradient(45deg, #4a3728, #8b7355);
    border: 2px solid #d4af37;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 100;
}

#command-center-button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

.command-center-icon {
    font-size: 24px;
}

/* Command Center Modal */
#artificer-command-center {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

#artificer-command-center.collapsed {
    opacity: 0;
    pointer-events: none;
}

.command-center-container {
    width: 90vw;
    max-width: 900px;
    height: 70vh;
    max-height: 600px;
    background: linear-gradient(135deg, #2a2520, #4a3f35);
    border: 3px solid #d4af37;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(212, 175, 55, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.command-center-header {
    background: linear-gradient(90deg, #5a4a3a, #6b5b4b);
    border-bottom: 2px solid #d4af37;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.command-center-title {
    font-size: 20px;
    font-weight: bold;
    color: #d4af37;
    cursor: pointer;
}

.command-center-close {
    font-size: 24px;
    color: #d4af37;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.command-center-close:hover {
    background: rgba(212, 175, 55, 0.2);
}

/* Tabs */
.command-center-tabs {
    display: flex;
    background: #3a302a;
    border-bottom: 1px solid #d4af37;
}

.tab-button {
    flex: 1;
    padding: 12px 20px;
    text-align: center;
    background: transparent;
    color: #aaa;
    cursor: pointer;
    border-right: 1px solid #555;
    transition: all 0.3s ease;
    font-weight: 500;
}

.tab-button:last-child {
    border-right: none;
}

.tab-button.active {
    background: linear-gradient(45deg, #4a3728, #5a4738);
    color: #d4af37;
    border-bottom: 2px solid #d4af37;
}

.tab-button:hover:not(.active) {
    background: #4a3f35;
    color: #ccc;
}

/* Content */
.command-center-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #2a2520;
}

/* Jeweler's Forge */
.jeweler-forge {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.forge-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #d4af37;
}

.forge-header h2 {
    color: #d4af37;
    margin: 0;
    font-size: 24px;
}

.guild-status-compact {
    display: flex;
    align-items: center;
    gap: 15px;
}

.tier-info, .assigned-info {
    display: flex;
    align-items: center;
    gap: 5px;
}

.tier-label, .assigned-label {
    color: #ccc;
    font-size: 14px;
}

.tier-value, .assigned-value {
    color: #d4af37;
    font-weight: bold;
    font-size: 16px;
}

.tab-content {
    display: none;
    height: 100%;
}

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

/* Barracks Tab Styles */
.barracks-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    height: 100%;
}

.miner-assignment-panel, .guild-info-panel {
    background: #3a302a;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 20px;
    overflow-y: auto;
}

.miner-assignment-panel h3, .guild-info-panel h3 {
    color: #d4af37;
    margin: 0 0 15px 0;
    font-size: 18px;
}

/* Miner Cards */
.miners-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.miner-card {
    background: linear-gradient(135deg, #4a3f35, #5a4f45);
    border: 1px solid #666;
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.miner-card:hover {
    border-color: #d4af37;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);
}

.miner-card.assigned {
    background: linear-gradient(135deg, #2a4a2a, #3a5a3a);
    border-color: #4a7c59;
}

.miner-info {
    flex: 1;
}

.miner-name {
    color: #fff;
    font-weight: bold;
    margin-bottom: 4px;
}

.miner-level {
    color: #ccc;
    font-size: 12px;
}

.miner-status {
    color: #4a7c59;
    font-size: 12px;
    font-style: italic;
}

.assign-button {
    background: linear-gradient(45deg, #4a3728, #6a5738);
    color: #d4af37;
    border: 1px solid #d4af37;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.assign-button:hover {
    background: linear-gradient(45deg, #5a4738, #7a6748);
    transform: scale(1.05);
}

.assign-button:disabled {
    background: #444;
    color: #666;
    border-color: #666;
    cursor: not-allowed;
    transform: none;
}

/* Guild Status */
.guild-status {
    background: linear-gradient(135deg, #4a3f35, #5a4f45);
    border: 1px solid #666;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 15px;
}

.tier-display, .assigned-count {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.tier-label, .assigned-label {
    color: #ccc;
    font-size: 14px;
}

.tier-value, .assigned-value {
    color: #d4af37;
    font-weight: bold;
    font-size: 16px;
}

.upgrade-button {
    width: 100%;
    background: linear-gradient(45deg, #4a3728, #6a5738);
    color: #d4af37;
    border: 1px solid #d4af37;
    border-radius: 6px;
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}

.upgrade-button:hover:not(:disabled) {
    background: linear-gradient(45deg, #5a4738, #7a6748);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

.upgrade-button:disabled {
    background: #444;
    color: #666;
    border-color: #666;
    cursor: not-allowed;
}

.tier-benefits {
    margin-bottom: 15px;
}

.tier-benefits h4 {
    color: #d4af37;
    margin: 0 0 10px 0;
    font-size: 14px;
}

.benefits-list {
    background: #2a2520;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 10px;
}

.benefit-item {
    color: #ccc;
    font-size: 12px;
    margin-bottom: 4px;
}

.benefit-item:last-child {
    margin-bottom: 0;
}

.assigned-miners h4 {
    color: #d4af37;
    margin: 0 0 10px 0;
    font-size: 14px;
}

.assigned-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.assigned-miner {
    background: #2a2520;
    border: 1px solid #4a7c59;
    border-radius: 4px;
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.assigned-miner-name {
    color: #4a7c59;
    font-size: 12px;
    font-weight: bold;
}

.unassign-button {
    background: #7a4444;
    color: #fff;
    border: 1px solid #aa6666;
    border-radius: 3px;
    padding: 2px 6px;
    cursor: pointer;
    font-size: 10px;
    transition: all 0.2s ease;
}

.unassign-button:hover {
    background: #8a5454;
    transform: scale(1.05);
}

/* New Forge Layout */
.forge-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    flex: 1;
}

.tier-benefits-panel {
    background: #3a302a;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 20px;
    overflow-y: auto;
}

.crafting-panel, .transmutation-panel {
    background: #3a302a;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 20px;
}

.crafting-panel h3, .transmutation-panel h3 {
    color: #d4af37;
    margin: 0 0 15px 0;
    font-size: 18px;
}

.craft-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.recipe-selector, .material-selector, .metal-selector, .currency-selector {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.recipe-selector label, .material-selector label, .metal-selector label, .currency-selector label {
    color: #ccc;
    font-size: 14px;
    font-weight: bold;
}

.recipe-selector select, .material-selector select, .metal-selector select, .currency-selector select {
    background: #2a2520;
    color: #fff;
    border: 1px solid #666;
    border-radius: 4px;
    padding: 8px;
}

.crafting-preview {
    background: #2a2520;
    border: 1px solid #666;
    border-radius: 6px;
    padding: 15px;
}

.crafting-preview h4 {
    color: #d4af37;
    margin: 0 0 10px 0;
    font-size: 16px;
}

.item-preview {
    color: #ccc;
    font-size: 14px;
}

.craft-button {
    background: linear-gradient(45deg, #4a3728, #6a5738);
    color: #d4af37;
    border: 1px solid #d4af37;
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    transition: all 0.3s ease;
}

.craft-button:hover:not(:disabled) {
    background: linear-gradient(45deg, #5a4738, #7a6748);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

.craft-button:disabled {
    background: #444;
    color: #666;
    border-color: #666;
    cursor: not-allowed;
}

.transmutation-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.transmutation-option {
    background: #2a2520;
    border: 1px solid #666;
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.transmutation-option:hover {
    border-color: #d4af37;
    transform: translateY(-1px);
}

.transmutation-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Inventory Tab Styles */
.inventory-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    height: 100%;
}

.equipment-panel, .equipped-panel {
    background: #3a302a;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 20px;
    overflow-y: auto;
}

.equipment-panel h3, .equipped-panel h3 {
    color: #d4af37;
    margin: 0 0 15px 0;
    font-size: 18px;
}

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

.equipment-item {
    background: linear-gradient(135deg, #4a3f35, #5a4f45);
    border: 1px solid #666;
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.equipment-item:hover {
    border-color: #d4af37;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);
}

.equipment-item.equipped {
    border-color: #4a7c59;
    background: linear-gradient(135deg, #2a4a2a, #3a5a3a);
}

.item-name {
    color: #fff;
    font-weight: bold;
    margin-bottom: 6px;
}

.item-stats {
    color: #ccc;
    font-size: 12px;
}

.item-stat {
    margin-bottom: 2px;
}

.item-rarity {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 6px;
}

.item-rarity.common { color: #aaa; }
.item-rarity.uncommon { color: #4a7c59; }
.item-rarity.rare { color: #4a7ca7; }
.item-rarity.epic { color: #9d4edd; }
.item-rarity.legendary { color: #ff8500; }

/* Responsive Design */
@media (max-width: 768px) {
    .command-center-container {
        width: 95vw;
        height: 90vh;
    }
    
    .barracks-layout, .forge-layout, .inventory-layout {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .command-center-tabs {
        flex-direction: column;
    }
    
    .tab-button {
        border-right: none;
        border-bottom: 1px solid #555;
    }
    
    .tab-button:last-child {
        border-bottom: none;
    }
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

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

.command-center-container {
    animation: fadeIn 0.3s ease;
}

.miner-card, .equipment-item, .transmutation-option {
    animation: slideIn 0.3s ease;
}

/* Guild Benefits Content */
.guild-benefits-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.no-jewelers {
    text-align: center;
    color: #8b7355;
    padding: 20px;
}

.no-jewelers p {
    margin: 5px 0;
}

/* Jewelers List */
.jewelers-list h4 {
    color: #d4af37;
    margin: 0 0 15px 0;
    text-align: center;
}

.jewelers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.jeweler-card {
    background: rgba(139, 115, 85, 0.2);
    border: 1px solid #8b7355;
    border-radius: 6px;
    padding: 10px;
    color: #e6d5b8;
}

.jeweler-name {
    font-weight: bold;
    color: #d4af37;
    margin-bottom: 5px;
}

.jeweler-level {
    font-size: 0.9em;
    color: #a0a0a0;
    margin-bottom: 8px;
}

.jeweler-stats {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85em;
}

.jeweler-card .stat-label {
    color: #b8b8b8;
}

.jeweler-card .stat-value {
    color: #7dc383;
    font-weight: bold;
}

/* Guild Calculation */
.guild-calculation {
    background: rgba(74, 55, 40, 0.2);
    border: 1px solid #8b7355;
    border-radius: 8px;
    padding: 15px;
}

.guild-calculation h4 {
    color: #d4af37;
    margin: 0 0 15px 0;
    text-align: center;
}

.calculation-breakdown {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.calc-step {
    background: rgba(139, 115, 85, 0.1);
    border: 1px solid #8b7355;
    border-radius: 6px;
    padding: 12px;
}

.calc-step strong {
    color: #d4af37;
    display: block;
    margin-bottom: 8px;
}

.calc-totals, .final-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.calc-row, .final-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 8px;
    background: rgba(139, 115, 85, 0.1);
    border-radius: 4px;
}

.calc-label, .final-label {
    color: #b8b8b8;
}

.calc-value {
    color: #7dc383;
    font-weight: bold;
}

.final-row.speed .final-value { color: #87ceeb; }
.final-row.power .final-value { color: #ffd700; }
.final-row.yield .final-value { color: #98fb98; }
.final-row.luck .final-value { color: #dda0dd; }

.final-value {
    font-weight: bold;
    font-size: 1.1em;
}

.formula-explanation {
    margin-top: 8px;
    text-align: center;
    color: #a0a0a0;
    font-style: italic;
}

.final-bonuses {
    background: rgba(212, 175, 55, 0.1) !important;
    border-color: #d4af37 !important;
}

/* Responsive adjustments for Guild Benefits */
@media (max-width: 800px) {
    .jewelers-grid {
        grid-template-columns: 1fr;
    }
    
    .calc-totals, .final-totals {
        grid-template-columns: 1fr;
    }
}

/* === INVENTORY SYSTEM STYLES === */

/* Power Points Display - Fixed Colors */
.power-points-display {
    margin-bottom: 8px;
    padding: 4px 6px;
    background: rgba(107, 70, 37, 0.2);
    border-radius: 3px;
    border: 1px solid #85634D;
}

.power-info {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 2px;
    font-size: 10px;
}

.power-label {
    color: #6B4625;
    font-weight: bold;
}

.power-used {
    color: #8B4513;
    font-weight: bold;
}

.power-used.over-limit {
    color: #A0522D;
}

.power-separator {
    color: #A0774A;
}

.power-total {
    color: #6B4625;
    font-weight: bold;
}

.power-bar {
    width: 100%;
    height: 3px;
    background: rgba(107, 70, 37, 0.3);
    border-radius: 2px;
    overflow: hidden;
}

.power-fill {
    height: 100%;
    background: linear-gradient(90deg, #8B4513, #A0522D);
    transition: width 0.3s ease;
}

.power-used.over-limit + .power-separator + .power-total ~ .power-bar .power-fill {
    background: linear-gradient(90deg, #f44336, #ff9800);
}

/* Equipment section in miner cards */
.miner-equipment {
    margin-top: 10px;
}

.equipment-slots {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    margin-top: 5px;
}

.equipment-slot {
    width: 40px;
    height: 40px;
    border: 1px solid #85634D;
    border-radius: 4px;
    background: rgba(107, 70, 37, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.slot-number {
    position: absolute;
    top: 1px;
    left: 1px;
    background: #444;
    color: #FFD700;
    font-size: 7px;
    font-weight: bold;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.equipment-slot:hover {
    border-color: #d4af37;
    background: rgba(107, 70, 37, 0.4);
}

.equipment-slot .slot-icon {
    font-size: 20px;
    margin-bottom: 2px;
}

.equipment-slot .slot-label {
    font-size: 10px;
    color: #ccc;
    text-align: center;
}

.equipped-item {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: rgba(139, 69, 19, 0.6);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.equipped-item .item-icon {
    font-size: 12px;
    margin-bottom: 1px;
}

.equipped-item .item-name {
    font-size: 8px;
    color: #F4E4BC;
    text-align: center;
    line-height: 1.1;
    max-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.equipped-item .item-power-cost {
    font-size: 6px;
    color: #FFD700;
    text-align: center;
    margin-top: 1px;
}

.empty-slot {
    color: #666;
    font-size: 10px;
    text-align: center;
}

/* Inventory Controls */
.inventory-controls {
    margin-top: 10px;
    text-align: center;
}

.open-inventory-btn {
    background: linear-gradient(45deg, #4a3728, #8b7355);
    border: 1px solid #d4af37;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s ease;
}

.open-inventory-btn:hover {
    background: linear-gradient(45deg, #5a4738, #9b8365);
    transform: translateY(-1px);
}

/* Inventory Panel - Attached to Miner Cards */
.inventory-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(107, 70, 37, 0.95);
    border: 2px solid #85634D;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 8px;
    z-index: 100;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

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

.inventory-title {
    color: #d4af37;
    font-size: 12px;
    font-weight: bold;
}

.close-inventory-btn {
    background: #8B4513;
    border: 1px solid #A0522D;
    color: #F4E4BC;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.close-inventory-btn:hover {
    background: #A0522D;
    color: white;
}

/* 9-Grid Inventory System */
.inventory-grid-container {
    position: relative;
    height: 145px; /* Adjusted for 45px tall slots */
    overflow: hidden;
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    height: 100%;
    transition: transform 0.3s ease;
}

.inventory-item-slot {
    width: 100%;
    height: 45px;
    border: 2px solid #85634D;
    border-radius: 4px;
    background: rgba(107, 70, 37, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 9px;
    text-align: center;
    position: relative;
}

.inventory-item-slot:hover {
    border-color: #d4af37;
    background: rgba(107, 70, 37, 0.6);
}

.inventory-item-slot.empty {
    background: rgba(107, 70, 37, 0.15);
    border-color: rgba(133, 99, 77, 0.4);
    cursor: default;
}

.inventory-item-slot .item-icon {
    font-size: 14px;
    margin-bottom: 2px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
}

.inventory-item-slot .item-name {
    font-size: 8px;
    color: #F4E4BC;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    line-height: 1;
    font-weight: bold;
}

.inventory-item-slot .item-power-cost {
    font-size: 6px;
    color: #FFD700;
    position: absolute;
    bottom: 1px;
    right: 2px;
}

.inventory-item-slot .insufficient-power-item {
    position: absolute;
    top: 1px;
    left: 1px;
    font-size: 6px;
    color: #ff6b6b;
}

.inventory-item-slot .empty-slot {
    color: rgba(244, 228, 188, 0.3);
    font-size: 10px;
}

/* Scrolling controls */
.inventory-scroll-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.inventory-scroll-btn {
    background: rgba(107, 70, 37, 0.6);
    border: 1px solid #85634D;
    color: #d4af37;
    width: 20px;
    height: 16px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.inventory-scroll-btn:hover {
    background: rgba(107, 70, 37, 0.8);
    border-color: #d4af37;
}

.inventory-scroll-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: rgba(107, 70, 37, 0.2);
}

.inventory-page-info {
    color: #d4af37;
    font-size: 9px;
    font-weight: bold;
}

.inventory-body {
    padding: 20px;
}

.inventory-section {
    margin-bottom: 30px;
}

.inventory-section h4 {
    color: #d4af37;
    font-size: 18px;
    margin-bottom: 15px;
    border-bottom: 1px solid #666;
    padding-bottom: 5px;
}

/* Inventory Grid */
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
}

.inventory-item {
    background: #4a4a4a;
    border: 2px solid #666;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.inventory-item:hover {
    border-color: #d4af37;
    background: #5a5a5a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.inventory-item .item-icon {
    font-size: 32px;
    margin-bottom: 8px;
    display: block;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin: 0 auto 8px;
}

.inventory-item .item-name {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 5px;
    line-height: 1.2;
}

.inventory-item .item-stats {
    font-size: 12px;
    color: #ccc;
    line-height: 1.3;
}

.inventory-item .item-power-cost {
    font-size: 11px;
    color: #FFD700;
    font-weight: bold;
    margin-bottom: 3px;
}

.inventory-item .insufficient-power {
    font-size: 10px;
    color: #f44336;
    font-weight: bold;
    margin-top: 3px;
}

.inventory-item.insufficient-power-item {
    opacity: 0.6;
    border-color: #f44336;
}

.inventory-item.insufficient-power-item:hover {
    border-color: #f44336;
    background: #4a2a2a;
    transform: none;
    box-shadow: none;
}

/* Large Equipment Slots for Modal */
.equipped-items {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.equipment-slot-large {
    width: 120px;
    height: 100px;
    border: 3px solid #666;
    border-radius: 12px;
    background: #2a2a2a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
}

.slot-number-large {
    position: absolute;
    top: 5px;
    left: 5px;
    background: #444;
    color: #FFD700;
    font-size: 14px;
    font-weight: bold;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.equipment-slot-large:hover {
    border-color: #d4af37;
    background: #3a3a3a;
}

.equipment-slot-large .slot-icon {
    font-size: 32px;
    margin-bottom: 5px;
}

.equipment-slot-large .slot-label {
    font-size: 12px;
    color: #ccc;
    text-align: center;
    margin-bottom: 10px;
}

.equipped-item-area {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.equipped-item-large {
    background: #4a4a4a;
    border: 2px solid #d4af37;
    border-radius: 6px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.equipped-item-large .item-icon-large {
    font-size: 24px;
    margin-bottom: 5px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.equipped-item-large .item-details {
    text-align: center;
}

.equipped-item-large .item-name {
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 3px;
    line-height: 1.1;
}

.equipped-item-large .item-stats {
    font-size: 10px;
    color: #ccc;
    line-height: 1.2;
}

.empty-slot-large {
    color: #666;
    font-size: 12px;
    text-align: center;
    font-style: italic;
    line-height: 1.3;
}

/* Inventory Footer */
.inventory-footer {
    padding: 15px 20px;
    background: #2a2a2a;
    border-radius: 0 0 10px 10px;
    border-top: 1px solid #666;
}

.inventory-instructions {
    color: #ccc;
    font-size: 12px;
    text-align: center;
    font-style: italic;
}

/* Loading and Empty States */
.loading-message, .no-items-message {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 20px;
    grid-column: 1 / -1;
}

/* Beautiful Ring Crafting Interface */
.ring-crafting-interface {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

.ring-container {
    position: relative;
    width: 280px;
    height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reagent-selector-top {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: rgba(42, 37, 32, 0.9);
    border: 1px solid #d4af37;
    border-radius: 8px;
    padding: 8px 12px;
    backdrop-filter: blur(5px);
}

.reagent-selector-top label {
    color: #d4af37;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 4px;
    display: block;
    text-align: center;
}

.reagent-selector-top select {
    background: #2a2520;
    color: #fff;
    border: 1px solid #666;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 12px;
    min-width: 120px;
}

.crafting-ring {
    position: relative;
    width: 200px;
    height: 200px;
    margin-top: 30px;
}

.ring-circle {
    width: 100%;
    height: 100%;
    border: 8px solid #d4af37;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 
        0 0 20px rgba(212, 175, 55, 0.3),
        inset 0 0 20px rgba(212, 175, 55, 0.1);
    transition: all 0.3s ease;
}

.ring-circle:hover {
    box-shadow: 
        0 0 30px rgba(212, 175, 55, 0.5),
        inset 0 0 30px rgba(212, 175, 55, 0.2);
    transform: scale(1.02);
}

.ring-center {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #4a3f35, #5a4f45);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #8b7355;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
}

.selected-metal-display {
    text-align: center;
    color: #d4af37;
}

.selected-metal-display span {
    display: block;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.metal-icon {
    font-size: 32px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease;
}

.metal-icon:hover {
    transform: scale(1.1);
}

.metal-cycle-button {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(45deg, #4a3728, #6a5738);
    color: #d4af37;
    border: 2px solid #d4af37;
    border-radius: 25px;
    padding: 12px 24px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 5;
}

.metal-cycle-button:hover {
    background: linear-gradient(45deg, #5a4738, #7a6748);
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 16px rgba(212, 175, 55, 0.4);
}

.metal-cycle-button:active {
    transform: translateX(-50%) translateY(0px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Metal-specific styling */
.ring-circle.copper {
    border-color: #b87333;
    box-shadow: 
        0 0 20px rgba(184, 115, 51, 0.3),
        inset 0 0 20px rgba(184, 115, 51, 0.1);
}

.ring-circle.copper:hover {
    box-shadow: 
        0 0 30px rgba(184, 115, 51, 0.5),
        inset 0 0 30px rgba(184, 115, 51, 0.2);
}

.ring-circle.silver {
    border-color: #c0c0c0;
    box-shadow: 
        0 0 20px rgba(192, 192, 192, 0.3),
        inset 0 0 20px rgba(192, 192, 192, 0.1);
}

.ring-circle.silver:hover {
    box-shadow: 
        0 0 30px rgba(192, 192, 192, 0.5),
        inset 0 0 30px rgba(192, 192, 192, 0.2);
}

.ring-circle.gold {
    border-color: #d4af37;
    box-shadow: 
        0 0 20px rgba(212, 175, 55, 0.3),
        inset 0 0 20px rgba(212, 175, 55, 0.1);
}

.ring-circle.gold:hover {
    box-shadow: 
        0 0 30px rgba(212, 175, 55, 0.5),
        inset 0 0 30px rgba(212, 175, 55, 0.2);
}

/* Crafted Item Popup */
.crafted-item-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crafted-item-content {
    background: linear-gradient(135deg, #2a2a2a, #3a3a3a);
    border: 2px solid #d4af37;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.crafted-item-content h3 {
    color: #d4af37;
    margin-bottom: 20px;
    font-size: 24px;
}

.crafted-item-details {
    margin-bottom: 20px;
}

.crafted-item-details .item-name {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 8px;
}

.crafted-item-details .item-rarity {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
}

.crafted-item-details .item-power-cost {
    font-size: 12px;
    color: #FFD700;
    font-weight: bold;
    margin-bottom: 8px;
}

.crafted-item-details .item-stats {
    font-size: 12px;
    color: #ccc;
    line-height: 1.4;
}

.close-popup-btn {
    background: linear-gradient(45deg, #4a3728, #8b7355);
    border: 1px solid #d4af37;
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.close-popup-btn:hover {
    background: linear-gradient(45deg, #5a4738, #9b8365);
    transform: translateY(-1px);
}