/* ============================================================
   SHADOWSKINGS — ARCANE PANEL (UPDATED FOR NEW HTML STRUCTURE)
   ============================================================ */

.arcane-panel {
    padding: 20px;
    color: #e9d5ff;
    font-family: "Cinzel", serif;
}

/* HEADER */
.arcane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.arcane-header h2 {
    margin: 0;
    color: #c084fc;
}

/* SECTIONS */
.arcane-section {
    margin-top: 25px;
}

.arcane-section h3 {
    margin-bottom: 10px;
    font-size: 20px;
    color: #c084fc;
}

/* NEW GRID SYSTEM */
.arcane-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

/* BUTTONS */
.arcane-grid button,
.arcane-close-btn {
    background: #4c1d95;
    border: 1px solid #6d28d9;
    padding: 10px 14px;
    color: #e9d5ff;
    cursor: pointer;
    border-radius: 6px;
    transition: 0.15s;
    text-align: center;
    font-size: 14px;
}

.arcane-grid button:hover,
.arcane-close-btn:hover {
    background: #6d28d9;
    transform: translateY(-2px);
}

/* TARGET + DETAILS BOXES */
.arcane-target-box,
.arcane-details-box {
    background: #2e1065;
    border: 1px solid #6d28d9;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 6px;
}

.tline,
.dline {
    margin: 4px 0;
}

/* SHIELD STATUS */
.arcane-shield-status {
    margin-top: 6px;
    color: #c084fc;
    font-size: 14px;
}

/* CLOSE BUTTON */
.arcane-close-btn {
    margin-top: 20px;
    background: #581c87;
    border: 1px solid #7e22ce;
    padding: 10px 18px;
    color: #e9d5ff;
    cursor: pointer;
    border-radius: 6px;
    width: fit-content;
}