/**
 * Knight Character Styles
 * Red knight with helmet horns
 */

/* In-Game Sprite */
.player[data-character="knight"]::before {
    box-shadow:
        /* Row 1 - Helmet */
        -8px -8px 0 0 #d7d6d6,
        0px -8px 0 0 #d7d6d6,
        8px -8px 0 0 #d7d6d6,

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

        /* Row 3 - Armor */
        -8px 8px 0 0 var(--skin-secondary, #c82333),
        -4px 8px 0 0 #d7d6d6,
        0px 8px 0 0 var(--skin-secondary, #c82333),
        4px 8px 0 0 #d7d6d6,
        8px 8px 0 0 var(--skin-secondary, #c82333),

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

        /* Helmet details */
        -9px -9px 0 0 #d7d6d6,
        -9px -1px 0 0 #d7d6d6,
        9px -1px 0 0 #d7d6d6,
        9px -9px 0 0 #d7d6d6,
        1px -9px 0 0 #d7d6d6,
        -1px -9px 0 0 #e8e8e8,
        -6px -12px 0 0 #d7d6d6,
        6px -12px 0 0 #d7d6d6,
        0px -12px 0 0 #d7d6d6;
}

/* Character Selection Preview */
.char-card-preview[data-character="knight"]::before {
    box-shadow:
        -8px -8px 0 0 #d7d6d6,
        0px -8px 0 0 #d7d6d6,
        8px -8px 0 0 #d7d6d6,
        -8px 0px 0 0 var(--skin-primary, #dc3545),
        -4px 0px 0 0 #2d2d2d,
        0px 0px 0 0 #2d2d2d,
        4px 0px 0 0 #2d2d2d,
        8px 0px 0 0 var(--skin-primary, #dc3545),
        -8px 8px 0 0 var(--skin-secondary, #c82333),
        -4px 8px 0 0 #d7d6d6,
        0px 8px 0 0 var(--skin-secondary, #c82333),
        4px 8px 0 0 #d7d6d6,
        8px 8px 0 0 var(--skin-secondary, #c82333),
        -4px 16px 0 0 var(--skin-secondary, #8b2d2d),
        4px 16px 0 0 var(--skin-secondary, #8b2d2d),
        -9px -9px 0 0 #d7d6d6,
        -9px -1px 0 0 #d7d6d6,
        9px -1px 0 0 #d7d6d6,
        9px -9px 0 0 #d7d6d6,
        1px -9px 0 0 #d7d6d6,
        -1px -9px 0 0 #e8e8e8,
        -6px -12px 0 0 #d7d6d6,
        6px -12px 0 0 #d7d6d6,
        0px -12px 0 0 #d7d6d6;
}

/* Skin Selector Preview */
.skin-preview[data-character="knight"]::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 #d7d6d6,
        0px -8px 0 0 #d7d6d6,
        8px -8px 0 0 #d7d6d6,
        -8px 0px 0 0 var(--preview-primary),
        -4px 0px 0 0 #2d2d2d,
        0px 0px 0 0 #2d2d2d,
        4px 0px 0 0 #2d2d2d,
        8px 0px 0 0 var(--preview-primary),
        -8px 8px 0 0 var(--preview-secondary),
        -4px 8px 0 0 #d7d6d6,
        0px 8px 0 0 var(--preview-secondary),
        4px 8px 0 0 #d7d6d6,
        8px 8px 0 0 var(--preview-secondary),
        -4px 16px 0 0 var(--preview-secondary),
        4px 16px 0 0 var(--preview-secondary),
        -9px -9px 0 0 #d7d6d6,
        -9px -1px 0 0 #d7d6d6,
        9px -1px 0 0 #d7d6d6,
        9px -9px 0 0 #d7d6d6,
        1px -9px 0 0 #d7d6d6,
        -1px -9px 0 0 #e8e8e8,
        -6px -12px 0 0 #d7d6d6,
        6px -12px 0 0 #d7d6d6,
        0px -12px 0 0 #d7d6d6;
}