/**
 * Ranger Character Styles
 * Green ranger with flowing cape
 */

/* In-Game Sprite */
.player[data-character="ranger"]::before {
    box-shadow:
        /* Row 1 - Hood */
        -8px -8px 0 0 var(--skin-primary, #6aaa64),
        0px -8px 0 0 var(--skin-primary, #6aaa64),
        8px -8px 0 0 var(--skin-primary, #6aaa64),

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

        /* Row 3 - Tunic */
        -8px 8px 0 0 var(--skin-secondary, #7cc576),
        -4px 8px 0 0 var(--skin-primary, #6aaa64),
        0px 8px 0 0 var(--skin-accent, #9bcd76),
        4px 8px 0 0 var(--skin-primary, #6aaa64),
        8px 8px 0 0 var(--skin-secondary, #7cc576),

        /* Row 4 - Boots */
        -4px 16px 0 0 var(--skin-primary, #5a8a54),
        4px 16px 0 0 var(--skin-primary, #5a8a54),

        /* Bow */
        -12px -8px 0 0 var(--skin-primary, #6aaa64);
}

/* Character Selection Preview */
.char-card-preview[data-character="ranger"]::before {
    box-shadow:
        -8px -8px 0 0 var(--skin-primary, #6aaa64),
        0px -8px 0 0 var(--skin-primary, #6aaa64),
        8px -8px 0 0 var(--skin-primary, #6aaa64),
        -8px 0px 0 0 var(--skin-primary, #6aaa64),
        -4px 0px 0 0 #2d2d2d,
        0px 0px 0 0 #f5deb3,
        4px 0px 0 0 #2d2d2d,
        8px 0px 0 0 var(--skin-primary, #6aaa64),
        -8px 8px 0 0 var(--skin-secondary, #7cc576),
        -4px 8px 0 0 var(--skin-primary, #6aaa64),
        0px 8px 0 0 var(--skin-accent, #9bcd76),
        4px 8px 0 0 var(--skin-primary, #6aaa64),
        8px 8px 0 0 var(--skin-secondary, #7cc576),
        -4px 16px 0 0 var(--skin-primary, #5a8a54),
        4px 16px 0 0 var(--skin-primary, #5a8a54),
        -12px -8px 0 0 var(--skin-primary, #6aaa64);
}

/* Skin Selector Preview */
.skin-preview[data-character="ranger"]::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 #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),
        -12px -8px 0 0 var(--preview-primary);
}