/**
 * Hero Character Styles
 * Default hero skin with cyan/teal colors and golden crown
 */

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

        /* Row 2 - Eyes */
        -8px 0px 0 0 var(--skin-primary, #4ecdc4),
        -4px 0px 0 0 #2d2d2d,
        0px 0px 0 0 var(--skin-primary, #4ecdc4),
        4px 0px 0 0 #2d2d2d,
        8px 0px 0 0 var(--skin-primary, #4ecdc4),

        /* Row 3 - Body */
        -8px 8px 0 0 var(--skin-secondary, #44a7a0),
        -4px 8px 0 0 var(--skin-secondary, #44a7a0),
        0px 8px 0 0 var(--skin-accent, #6ee7df),
        4px 8px 0 0 var(--skin-secondary, #44a7a0),
        8px 8px 0 0 var(--skin-secondary, #44a7a0),

        /* Row 4 - Legs */
        -4px 16px 0 0 var(--skin-secondary, #38817c),
        4px 16px 0 0 var(--skin-secondary, #38817c),

        /* Row 5 - Golden Cape (flowy) */
        -8px 14px 0 0 #FFD700,
        6px 14px 0 0 #FFD700;
}

/* Character Selection Preview */
.char-card-preview[data-character="hero"]::before {
    box-shadow:
        -8px -8px 0 0 var(--skin-primary, #4ecdc4),
        0px -8px 0 0 var(--skin-primary, #4ecdc4),
        8px -8px 0 0 var(--skin-primary, #4ecdc4),
        -8px 0px 0 0 var(--skin-primary, #4ecdc4),
        -4px 0px 0 0 #2d2d2d,
        0px 0px 0 0 var(--skin-primary, #4ecdc4),
        4px 0px 0 0 #2d2d2d,
        8px 0px 0 0 var(--skin-primary, #4ecdc4),
        -8px 8px 0 0 var(--skin-secondary, #44a7a0),
        -4px 8px 0 0 var(--skin-secondary, #44a7a0),
        0px 8px 0 0 var(--skin-accent, #6ee7df),
        4px 8px 0 0 var(--skin-secondary, #44a7a0),
        8px 8px 0 0 var(--skin-secondary, #44a7a0),
        -4px 16px 0 0 var(--skin-secondary, #38817c),
        4px 16px 0 0 var(--skin-secondary, #38817c),
        -8px 14px 0 0 #FFD700,
        6px 14px 0 0 #FFD700;
}

/* Skin Selector Preview */
.skin-preview[data-character="hero"]::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1.5);
    background: transparent;
    box-shadow:
        -8px -8px 0 0 var(--preview-primary),
        0px -8px 0 0 var(--preview-primary),
        8px -8px 0 0 var(--preview-primary),
        -8px 0px 0 0 var(--preview-primary),
        -4px 0px 0 0 #2d2d2d,
        0px 0px 0 0 var(--preview-primary),
        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-secondary),
        0px 8px 0 0 var(--preview-accent),
        4px 8px 0 0 var(--preview-secondary),
        8px 8px 0 0 var(--preview-secondary),
        -4px 16px 0 0 var(--preview-secondary),
        4px 16px 0 0 var(--preview-secondary),
        -8px 14px 0 0 #FFD700,
        6px 14px 0 0 #FFD700;
}