:root {
    --dfo-bg-dark: #1a1a2e;
    --dfo-bg-light: #282846;
    --dfo-border-gold: #c69f53;
    --dfo-border-dark: #4a4a6a;
    --dfo-highlight: #ffd700;
    --dfo-slot-bg: rgba(10, 10, 20, 0.7);
}

.insignia-modal-content {
    max-width: 900px;
    background: var(--dfo-bg-dark); 
    border: 3px solid var(--dfo-border-gold);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
    padding: 20px;
    border-radius: 15px;
}

.insignia-main-layout {
    display: flex;
    flex-direction: column;
    gap: 15px;

}

.insignia-top-sector {
    display: flex;
    gap: 20px;
}

.insignia-left-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dfo-bg-light);
    border-radius: 10px;
    padding: 20px;
    border: 1px solid var(--dfo-border-dark);
}

.insignia-visualizer {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.insignia-right-panel {
    flex: 1.2;
    display: flex;
}

.insignia-details-panel {
    flex-grow: 1;
    background: var(--dfo-bg-light);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--dfo-border-dark);
    display: flex;
    flex-direction: column;
}

#insignia-details-title {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--dfo-border-gold);
    text-align: center;
}

.insignia-bottom-sector {
    flex-shrink: 0;
}

.insignia-interaction-panel {
    background: var(--dfo-bg-light);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--dfo-border-dark);
    display: flex;
    flex-direction: column; 
    gap: 15px;
}

.insignia-controls-info {
    width: 100%; 
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    font-size: 1.1em; 
    line-height: 1.6;
    text-align: center; 
}

.insignia-controls-info strong {
    color: var(--dfo-highlight);
}

.insignia-action-buttons {
    width: 100%;
    display: flex;
    gap: 15px;
}

#insignia-upgrade-btn, #insignia-enhance-btn {
    flex: 1;
    padding: 18px 20px;
    font-size: 1.4em;
    font-weight: bold;
    border-radius: 8px;
}

.insignia-centerpiece { width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, #4c4c6a, #1c1c3a); border: 5px solid var(--dfo-border-gold); display: flex; align-items: center; justify-content: center; z-index: 10; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; position: relative; }
.insignia-centerpiece:hover, .insignia-centerpiece.selected { transform: scale(1.05); border-color: var(--dfo-highlight); box-shadow: 0 0 30px var(--dfo-highlight); }
.insignia-icon { font-size: 5em; }
.insignia-enhancement-display { position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); background-color: rgba(0,0,0,0.9); color: var(--dfo-highlight); padding: 5px 12px; border-radius: 20px; font-size: 1.2em; font-weight: bold; border: 1px solid var(--dfo-border-gold); }
.gem-slot { position: absolute; width: 70px; height: 70px; background: var(--dfo-slot-bg); border: 2px solid var(--dfo-border-dark); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: box-shadow 0.2s; transform: rotate(45deg); border-radius: 8px; }
.gem-slot:hover, .gem-slot.selected { border-color: var(--dfo-highlight); box-shadow: 0 0 20px var(--dfo-highlight); }
.gem-icon-container { transform: rotate(-45deg); }
.gem-icon { font-size: 2.2em; }
.gem-slot-0 { top: 10px; left: 50%; margin-left: -35px; } 
.gem-slot-1 { top: 50%; right: 10px; margin-top: -35px; }
.gem-slot-2 { bottom: 10px; left: 50%; margin-left: -35px; }
.gem-slot-3 { top: 50%; left: 10px; margin-top: -35px; }
#insignia-details-stats { display: flex; flex-direction: column; gap: 12px; font-size: 1.05em; line-height: 1.6; }
.stat-detail-item { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed var(--dfo-border-dark); }
.stat-detail-item span:last-child { font-weight: bold; color: var(--success-color); }
.grade-glow-Common { border-color: var(--common-color); }
.grade-glow-Rare { border-color: var(--rare-color); box-shadow: 0 0 10px var(--rare-color); }
.grade-glow-Legendary { border-color: var(--legendary-color); box-shadow: 0 0 15px var(--legendary-color); }
.grade-glow-Epic { border-color: var(--epic-color); box-shadow: 0 0 20px var(--epic-color); }
.grade-glow-Mystic { border-color: var(--mystic-color); box-shadow: 0 0 25px var(--mystic-color); }
.grade-glow-Primal { border-color: var(--primal-color); animation: pulse-primal-glow 2s infinite; }
@keyframes pulse-primal-glow { 0%, 100% { box-shadow: 0 0 25px var(--primal-color); } 50% { box-shadow: 0 0 40px var(--primal-color); } }
.insignia-centerpiece.deactivated { filter: grayscale(90%) brightness(0.6); cursor: not-allowed; }
.insignia-centerpiece.deactivated:hover { transform: none; border-color: var(--dfo-border-gold); box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); }
.gem-slot.locked { filter: grayscale(80%); cursor: not-allowed; }
.gem-slot.locked:hover { border-color: var(--dfo-border-dark); box-shadow: none; }

@media (max-width: 768px) {
    .insignia-modal-content {
        height: 90vh; 
        padding: 10px;
        overflow-y: auto; 
    }

    .insignia-main-layout {

    }

    .insignia-top-sector {
        flex-direction: column;
        min-height: auto; 
    }

    .insignia-left-panel, .insignia-right-panel {
        flex-basis: auto; 
    }

    .insignia-visualizer {
        width: 280px;
        height: 280px;
    }

    .insignia-centerpiece {
        width: 120px;
        height: 120px;
    }

    .gem-slot {
        width: 60px;
        height: 60px;
    }
    
    #gem-slot-0 { top: 10px; left: 50%; margin-left: -30px; } 
    #gem-slot-1 { top: 50%; right: 10px; margin-top: -30px; }
    #gem-slot-2 { bottom: 10px; left: 50%; margin-left: -30px; }
    #gem-slot-3 { top: 50%; left: 10px; margin-top: -30px; }

    #insignia-details-title {
        font-size: 1.3em;
    }

    .insignia-controls-info {
        font-size: 1em;
        text-align: left;
    }

    #insignia-upgrade-btn, #insignia-enhance-btn {
        padding: 15px;
        font-size: 1.2em;
    }
}

.insignia-centerpiece.activated {
    background-image: url('/image/insignia_unlock.png');
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}


.gem-slot.unlocked {
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}

.gem-slot.unlocked.gem_bloodlust {
    background-image: url('/image/gem_unlock_ruby.png');
}
.gem-slot.unlocked.gem_power {
    background-image: url('/image/gem_unlock_power.png');
}
.gem-slot.unlocked.gem_defense {
    background-image: url('/image/gem_unlock_defense.png');
}
.gem-slot.unlocked.gem_vitality {
    background-image: url('/image/gem_unlock_vitality.png');
}


.user-info-insignia-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid var(--dfo-border-gold);
}


.user-info-insignia-section .insignia-visualizer {
    width: 250px;
    height: 250px;
}

.user-info-insignia-section .insignia-centerpiece {
    width: 110px;
    height: 110px;
}

.user-info-insignia-section .insignia-icon {
    font-size: 4em;
}

.user-info-insignia-section .gem-slot {
    width: 55px;
    height: 55px;
}

.user-info-insignia-section .gem-icon {
    font-size: 1.8em;
}


.user-info-insignia-section .gem-slot-0 { top: 5px; left: 50%; margin-left: -27.5px; } 
.user-info-insignia-section .gem-slot-1 { top: 50%; right: 5px; margin-top: -27.5px; }
.user-info-insignia-section .gem-slot-2 { bottom: 5px; left: 50%; margin-left: -27.5px; }
.user-info-insignia-section .gem-slot-3 { top: 50%; left: 5px; margin-top: -27.5px; }


.user-info-insignia-section .insignia-details-panel {
    padding: 15px;
}
.user-info-insignia-section #insignia-details-title {
    font-size: 1.3em;
    margin-bottom: 15px;
}
.user-info-insignia-section #insignia-details-stats {
    font-size: 0.95em;
    gap: 8px;
}