/**
 * Mage Character Styles
 * Purple mage with pointed wizard hat
 */

/* In-Game Sprite */
.player[data-character="mage"]::before {
    box-shadow:
        /* Row 1 - Hat */
        0px -12px 0 0 var(--skin-primary, #8b3a8b),
        -4px -8px 0 0 var(--skin-primary, #8b3a8b),
        0px -8px 0 0 var(--skin-primary, #8b3a8b),
        4px -8px 0 0 var(--skin-primary, #8b3a8b),

        /* Row 2 - Face */
        -8px 0px 0 0 var(--skin-primary, #8b3a8b),
        -4px 0px 0 0 #2d2d2d,
        0px 0px 0 0 #f5deb3,
        4px 0px 0 0 #2d2d2d,
        8px 0px 0 0 var(--skin-primary, #8b3a8b),

        /* Row 3 - Robe */
        -8px 8px 0 0 var(--skin-secondary, #a855a8),
        -4px 8px 0 0 var(--skin-primary, #8b3a8b),
        0px 8px 0 0 var(--skin-accent, #c77cc7),
        4px 8px 0 0 var(--skin-primary, #8b3a8b),
        8px 8px 0 0 var(--skin-secondary, #a855a8),

        /* Row 4 - Boots */
        -4px 16px 0 0 var(--skin-primary, #6b2a6b),
        4px 16px 0 0 var(--skin-primary, #6b2a6b);
}

/* Character Selection Preview */
.char-card-preview[data-character="mage"]::before {
    box-shadow:
        0px -12px 0 0 var(--skin-primary, #8b3a8b),
        -4px -8px 0 0 var(--skin-primary, #8b3a8b),
        0px -8px 0 0 var(--skin-primary, #8b3a8b),
        4px -8px 0 0 var(--skin-primary, #8b3a8b),
        -8px 0px 0 0 var(--skin-primary, #8b3a8b),
        -4px 0px 0 0 #2d2d2d,
        0px 0px 0 0 #f5deb3,
        4px 0px 0 0 #2d2d2d,
        8px 0px 0 0 var(--skin-primary, #8b3a8b),
        -8px 8px 0 0 var(--skin-secondary, #a855a8),
        -4px 8px 0 0 var(--skin-primary, #8b3a8b),
        0px 8px 0 0 var(--skin-accent, #c77cc7),
        4px 8px 0 0 var(--skin-primary, #8b3a8b),
        8px 8px 0 0 var(--skin-secondary, #a855a8),
        -4px 16px 0 0 var(--skin-primary, #6b2a6b),
        4px 16px 0 0 var(--skin-primary, #6b2a6b);
}

/* Skin Selector Preview */
.skin-preview[data-character="mage"]::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1.5);
    background: transparent;
    box-shadow:
        0px -12px 0 0 var(--preview-primary),
        -4px -8px 0 0 var(--preview-primary),
        0px -8px 0 0 var(--preview-primary),
        4px -8px 0 0 var(--preview-primary),
        -8px 0px 0 0 var(--preview-primary),
        -4px 0px 0 0 #2d2d2d,
        0px 0px 0 0 #f5deb3,
        4px 0px 0 0 #2d2d2d,
        8px 0px 0 0 var(--preview-primary),
        -8px 8px 0 0 var(--preview-secondary),
        -4px 8px 0 0 var(--preview-primary),
        0px 8px 0 0 var(--preview-accent),
        4px 8px 0 0 var(--preview-primary),
        8px 8px 0 0 var(--preview-secondary),
        -4px 16px 0 0 var(--preview-primary),
        4px 16px 0 0 var(--preview-primary);
}