/* Snakes & Ladders - Login + Character Selection Flow Styles */

/* ====== Theme Tokens (Hero Selection) ====== */
:root,
body[data-theme="default"] {
    --bg-1: #0f0c29;
    --bg-2: #24243e;
    --accent: #667eea;
    --accent-2: #764ba2;
    --card-border: #2ecc71;
    --button-bg: linear-gradient(145deg, #2ecc71, #27ae60);
    --button-bg-hover: linear-gradient(145deg, #34d27b, #2fb864);
    --button-text: #ffffff;
    --muted-text: rgba(255, 255, 255, 0.78);
    --heading: #ffffff;
    --overlay-1: rgba(102, 126, 234, 0.18);
    --overlay-2: rgba(118, 75, 162, 0.18);
    --accent-glow: rgba(102, 126, 234, 0.65);
    --accent-soft: rgba(102, 126, 234, 0.3);
    --card-border-glow: rgba(46, 204, 113, 0.95);
    --card-border-soft: rgba(46, 204, 113, 0.45);
    --focus-ring: rgba(118, 75, 162, 0.45);
}

body[data-theme="aurora-mint"] {
    --bg-1: #062b2f;
    --bg-2: #102a2f;
    --accent: #3dd6b0;
    --accent-2: #7fffd4;
    --card-border: #43f0c2;
    --button-bg: linear-gradient(145deg, #20c997, #0f766e);
    --button-bg-hover: linear-gradient(145deg, #2cdca8, #148e83);
    --button-text: #eafffa;
    --muted-text: rgba(225, 255, 246, 0.86);
    --heading: #ebfffa;
    --overlay-1: rgba(61, 214, 176, 0.2);
    --overlay-2: rgba(127, 255, 212, 0.18);
    --accent-glow: rgba(61, 214, 176, 0.62);
    --accent-soft: rgba(61, 214, 176, 0.28);
    --card-border-glow: rgba(67, 240, 194, 0.9);
    --card-border-soft: rgba(67, 240, 194, 0.45);
    --focus-ring: rgba(127, 255, 212, 0.42);
}

body[data-theme="emberforge"] {
    --bg-1: #2b0f07;
    --bg-2: #44130f;
    --accent: #ff7a3d;
    --accent-2: #ffb347;
    --card-border: #ff8f5a;
    --button-bg: linear-gradient(145deg, #ff6a3d, #c0392b);
    --button-bg-hover: linear-gradient(145deg, #ff7f52, #d04936);
    --button-text: #fff4ee;
    --muted-text: rgba(255, 218, 204, 0.88);
    --heading: #ffe9df;
    --overlay-1: rgba(255, 122, 61, 0.22);
    --overlay-2: rgba(255, 179, 71, 0.18);
    --accent-glow: rgba(255, 122, 61, 0.62);
    --accent-soft: rgba(255, 122, 61, 0.3);
    --card-border-glow: rgba(255, 143, 90, 0.9);
    --card-border-soft: rgba(255, 143, 90, 0.5);
    --focus-ring: rgba(255, 179, 71, 0.42);
}

body[data-theme="midnight-violet"] {
    --bg-1: #0c0820;
    --bg-2: #22113d;
    --accent: #8b5cf6;
    --accent-2: #c084fc;
    --card-border: #a78bfa;
    --button-bg: linear-gradient(145deg, #7c3aed, #4c1d95);
    --button-bg-hover: linear-gradient(145deg, #8f4eff, #5a24ac);
    --button-text: #f8f3ff;
    --muted-text: rgba(224, 207, 255, 0.86);
    --heading: #f3edff;
    --overlay-1: rgba(139, 92, 246, 0.2);
    --overlay-2: rgba(192, 132, 252, 0.18);
    --accent-glow: rgba(139, 92, 246, 0.64);
    --accent-soft: rgba(139, 92, 246, 0.3);
    --card-border-glow: rgba(167, 139, 250, 0.92);
    --card-border-soft: rgba(167, 139, 250, 0.48);
    --focus-ring: rgba(192, 132, 252, 0.45);
}

body[data-theme="solar-flare"] {
    --bg-1: #2b1200;
    --bg-2: #4f2400;
    --accent: #ffb703;
    --accent-2: #fb8500;
    --card-border: #ffd166;
    --button-bg: linear-gradient(145deg, #ff9f1c, #ff6b35);
    --button-bg-hover: linear-gradient(145deg, #ffb33d, #ff7c47);
    --button-text: #fff8ea;
    --muted-text: rgba(255, 234, 186, 0.88);
    --heading: #fff4dd;
    --overlay-1: rgba(255, 183, 3, 0.2);
    --overlay-2: rgba(251, 133, 0, 0.18);
    --accent-glow: rgba(255, 183, 3, 0.6);
    --accent-soft: rgba(255, 183, 3, 0.28);
    --card-border-glow: rgba(255, 209, 102, 0.9);
    --card-border-soft: rgba(255, 209, 102, 0.48);
    --focus-ring: rgba(251, 133, 0, 0.42);
}

body[data-theme="oceanic-depths"] {
    --bg-1: #021b2d;
    --bg-2: #063b45;
    --accent: #00b4d8;
    --accent-2: #48cae4;
    --card-border: #90e0ef;
    --button-bg: linear-gradient(145deg, #0077b6, #0096c7);
    --button-bg-hover: linear-gradient(145deg, #178bcb, #12a9da);
    --button-text: #ecfcff;
    --muted-text: rgba(204, 242, 255, 0.88);
    --heading: #e7fbff;
    --overlay-1: rgba(0, 180, 216, 0.2);
    --overlay-2: rgba(72, 202, 228, 0.18);
    --accent-glow: rgba(0, 180, 216, 0.62);
    --accent-soft: rgba(0, 180, 216, 0.28);
    --card-border-glow: rgba(144, 224, 239, 0.9);
    --card-border-soft: rgba(144, 224, 239, 0.48);
    --focus-ring: rgba(72, 202, 228, 0.42);
}

body[data-theme="rose-nebula"] {
    --bg-1: #2a0c1f;
    --bg-2: #3f1533;
    --accent: #ff5ca8;
    --accent-2: #ff8fab;
    --card-border: #ffa8c6;
    --button-bg: linear-gradient(145deg, #ff4d8d, #c9184a);
    --button-bg-hover: linear-gradient(145deg, #ff66a0, #db1f57);
    --button-text: #fff0f7;
    --muted-text: rgba(255, 218, 235, 0.88);
    --heading: #fff0f6;
    --overlay-1: rgba(255, 92, 168, 0.22);
    --overlay-2: rgba(255, 143, 171, 0.2);
    --accent-glow: rgba(255, 92, 168, 0.64);
    --accent-soft: rgba(255, 92, 168, 0.3);
    --card-border-glow: rgba(255, 168, 198, 0.9);
    --card-border-soft: rgba(255, 168, 198, 0.5);
    --focus-ring: rgba(255, 143, 171, 0.44);
}

body[data-theme="cyber-lime"] {
    --bg-1: #081a05;
    --bg-2: #16310e;
    --accent: #a3e635;
    --accent-2: #bef264;
    --card-border: #d9f99d;
    --button-bg: linear-gradient(145deg, #84cc16, #4d7c0f);
    --button-bg-hover: linear-gradient(145deg, #98e620, #5a8f14);
    --button-text: #f7ffe8;
    --muted-text: rgba(234, 255, 201, 0.9);
    --heading: #f5ffe9;
    --overlay-1: rgba(163, 230, 53, 0.2);
    --overlay-2: rgba(190, 242, 100, 0.18);
    --accent-glow: rgba(163, 230, 53, 0.58);
    --accent-soft: rgba(163, 230, 53, 0.28);
    --card-border-glow: rgba(217, 249, 157, 0.9);
    --card-border-soft: rgba(217, 249, 157, 0.48);
    --focus-ring: rgba(190, 242, 100, 0.42);
}

body[data-theme="glacier-blue"] {
    --bg-1: #0a1f33;
    --bg-2: #12395a;
    --accent: #60a5fa;
    --accent-2: #93c5fd;
    --card-border: #bfdbfe;
    --button-bg: linear-gradient(145deg, #3b82f6, #1d4ed8);
    --button-bg-hover: linear-gradient(145deg, #5397ff, #2c5cef);
    --button-text: #eff6ff;
    --muted-text: rgba(222, 236, 255, 0.88);
    --heading: #f1f7ff;
    --overlay-1: rgba(96, 165, 250, 0.2);
    --overlay-2: rgba(147, 197, 253, 0.18);
    --accent-glow: rgba(96, 165, 250, 0.62);
    --accent-soft: rgba(96, 165, 250, 0.3);
    --card-border-glow: rgba(191, 219, 254, 0.9);
    --card-border-soft: rgba(191, 219, 254, 0.48);
    --focus-ring: rgba(147, 197, 253, 0.42);
}

body[data-theme="sandstone-gold"] {
    --bg-1: #2a1e12;
    --bg-2: #4a3724;
    --accent: #d4a373;
    --accent-2: #e9c46a;
    --card-border: #f4d58d;
    --button-bg: linear-gradient(145deg, #c58940, #a97142);
    --button-bg-hover: linear-gradient(145deg, #d39a52, #b67f50);
    --button-text: #fff7e8;
    --muted-text: rgba(250, 232, 202, 0.9);
    --heading: #fff6e5;
    --overlay-1: rgba(212, 163, 115, 0.2);
    --overlay-2: rgba(233, 196, 106, 0.18);
    --accent-glow: rgba(212, 163, 115, 0.6);
    --accent-soft: rgba(212, 163, 115, 0.28);
    --card-border-glow: rgba(244, 213, 141, 0.9);
    --card-border-soft: rgba(244, 213, 141, 0.5);
    --focus-ring: rgba(233, 196, 106, 0.42);
}

/* ====== Display Name Modal Styles ====== */
.display-name-modal {
    position: fixed;
    inset: 0;
    background: rgba(6, 10, 14, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
}

.display-name-card {
    background: linear-gradient(145deg, #1b2a1f, #0f1711);
    border: 2px solid #8B4513;
    border-radius: 18px;
    padding: 28px 32px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
    text-align: center;
}

.display-name-card h2 {
    margin: 0 0 10px 0;
    color: #FFD700;
    font-size: 1.4em;
}

.display-name-card p {
    margin: 0 0 18px 0;
    color: #e2e8f0;
    font-size: 0.95em;
}

#display-name-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: rgba(15, 23, 42, 0.85);
    color: #f8fafc;
    font-size: 1em;
    margin-bottom: 16px;
}

.display-name-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.display-name-actions button {
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}

#display-name-save {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: #f8fafc;
}

#display-name-skip {
    background: rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
}

/* ====== Login Container Styles ====== */
/* LOGIN CONTAINER STYLES */
#login-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 40px 20px;
    position: relative;
    overflow: hidden;
}

#login-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.login-hero {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
    animation: fadeInDown 0.6s ease-out;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-icon {
    font-size: 80px;
    margin-bottom: 20px;
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.login-title {
    font-size: 2.5em;
    color: white;
    margin: 0 0 10px 0;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    font-weight: 700;
}

.login-subtitle {
    font-size: 1.15em;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}

.login-options {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 480px;
    width: 100%;
    position: relative;
    z-index: 1;
    animation: fadeInUp 0.6s ease-out 0.2s backwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-btn {
    width: 100%;
    padding: 20px 24px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
    font-family: inherit;
    position: relative;
    overflow: hidden;
}

.login-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.login-btn:hover::before {
    width: 300px;
    height: 300px;
}

.primary-login {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.primary-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(102, 126, 234, 0.5);
}

.guest-login {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    box-shadow: 0 8px 20px rgba(44, 62, 80, 0.3);
}

.guest-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(44, 62, 80, 0.4);
}

.btn-icon {
    font-size: 32px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.btn-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    position: relative;
    z-index: 1;
}

.btn-title {
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
}

.btn-description {
    font-size: 0.85em;
    opacity: 0.9;
    display: block;
}

.login-divider {
    text-align: center;
    margin: 24px 0;
    position: relative;
}

.login-divider::before,
.login-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: linear-gradient(to right, transparent, #ddd, transparent);
}

.login-divider::before {
    left: 0;
}

.login-divider::after {
    right: 0;
}

.login-divider span {
    background: white;
    padding: 0 16px;
    color: #7f8c8d;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.login-footer {
    margin-top: 30px;
    position: relative;
    z-index: 1;
    animation: fadeIn 0.6s ease-out 0.4s backwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.login-notice {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 16px 20px;
    color: white;
    font-size: 0.9em;
    line-height: 1.6;
    max-width: 480px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.notice-icon {
    font-size: 20px;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .login-title {
        font-size: 2em;
    }
    
    .login-subtitle {
        font-size: 1em;
    }
    
    .login-options {
        padding: 30px 24px;
    }
    
    .login-btn {
        padding: 16px 20px;
    }
    
    .btn-icon {
        font-size: 28px;
    }
    
    .btn-title {
        font-size: 1.1em;
    }
}

/* ====== Character Carousel + Theme Selector ====== */
#character-selection {
    text-align: center;
    padding: 20px;
    margin: 0;
    background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%);
    min-height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
}

.hero-selection-layout {
    width: min(1280px, 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding-bottom: 60px;
    margin: 0 auto;
}

#character-selection::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background:
        radial-gradient(circle at 20% 50%, var(--overlay-1) 0%, transparent 52%),
        radial-gradient(circle at 80% 80%, var(--overlay-2) 0%, transparent 52%);
    pointer-events: none;
    z-index: 0;
}

#character-selection > * {
    position: relative;
    z-index: 1;
}

.hero-selection-layout {
    width: min(1280px, 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.hero-selector-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#character-selection h2 {
    font-size: 2.5em;
    color: var(--heading);
    margin: 0 0 20px 0;
    text-shadow: 0 0 26px var(--accent-glow), 0 0 54px var(--accent-soft);
    background: linear-gradient(45deg, var(--heading), var(--accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.character-carousel,
.character-perk-display,
.character-select-instruction,
.game-start-btn {
    position: relative;
    z-index: 1;
}

#character-selection .character-select-instruction {
    margin-top: 15px;
    color: var(--muted-text);
    font-size: 0.92em;
    font-style: italic;
}

.character-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 0 0 30px 0;
    min-height: 320px;
    width: min(100%, 940px);
}

#character-selection .carousel-btn {
    background: linear-gradient(145deg, var(--accent), var(--accent-2));
    color: var(--button-text);
    border: 2px solid rgba(255, 255, 255, 0.18);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px var(--accent-soft);
    z-index: 10;
    backdrop-filter: blur(10px);
}

#character-selection .carousel-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 12px 30px var(--accent-glow);
}

#character-selection .carousel-btn:active {
    transform: scale(0.95);
}

#character-selection .carousel-btn:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.carousel-container {
    flex: 1;
    max-width: 800px;
    overflow: visible;
    position: relative;
}

.carousel-track {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 20px;
}

#character-selection .character-card {
    background: linear-gradient(145deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.9));
    backdrop-filter: blur(10px);
    border: 4px solid rgba(127, 140, 141, 0.5);
    border-radius: 16px;
    padding: 20px 16px;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease, filter 0.35s ease, border-color 0.35s ease, opacity 0.35s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 150px;
    opacity: 0.4;
    transform: translateY(0) scale(0.7);
    transform-origin: center;
    filter: grayscale(50%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    will-change: transform, box-shadow, filter;
}

#character-selection .character-card.center {
    opacity: 1;
    transform: translateY(0) scale(1.15);
    border-color: var(--accent);
    box-shadow: 0 15px 50px var(--accent-glow), 0 0 80px var(--accent-soft);
    z-index: 5;
    filter: grayscale(0%);
}

#character-selection .character-card.selected {
    border-color: var(--card-border) !important;
    box-shadow: 0 0 60px var(--card-border-glow), 0 0 100px var(--card-border-soft) !important;
    background: linear-gradient(145deg, rgba(10, 20, 16, 0.8), var(--card-border)) !important;
    backdrop-filter: blur(10px);
    animation: selectedPulse 2s ease-in-out infinite;
}

@keyframes selectedPulse {
    0%, 100% {
        box-shadow: 0 0 60px var(--card-border-glow), 0 0 100px var(--card-border-soft);
    }
    50% {
        box-shadow: 0 0 80px var(--card-border-glow), 0 0 120px var(--card-border-soft);
    }
}

#character-selection .character-card.left,
#character-selection .character-card.right {
    opacity: 0.6;
    transform: translateY(0) scale(0.85);
}

#character-selection .character-card:hover:not(.selected) {
    opacity: 0.85;
    filter: grayscale(0%) saturate(1.05) brightness(1.06);
    box-shadow: 0 18px 48px var(--accent-soft), 0 0 40px var(--accent-soft);
}

#character-selection .character-card.left:hover:not(.selected),
#character-selection .character-card.right:hover:not(.selected) {
    transform: translateY(-10px) scale(0.92);
}

#character-selection .character-card.center:hover:not(.selected) {
    transform: translateY(-14px) scale(1.22);
    box-shadow: 0 22px 70px var(--accent-glow), 0 0 100px var(--accent-soft);
}

#character-selection .character-name {
    font-size: 1.2em;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-align: center;
}

#character-selection .character-description {
    font-size: 0.82em;
    color: var(--muted-text);
    margin: 0;
    font-style: italic;
    text-align: center;
}

.pixel-character {
    width: 100px;
    height: 100px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    animation: idle 2s ease-in-out infinite;
    position: relative;
    margin: 0 auto;
    display: block;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
    transition: filter 0.35s ease;
}

#character-selection .character-card.center .pixel-character {
    filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.4));
    animation: centerIdle 1.5s ease-in-out infinite;
}

#character-selection .character-card:hover .pixel-character {
    filter: drop-shadow(0 6px 14px var(--accent-soft)) brightness(1.05);
}

#character-selection .character-card.center:hover .pixel-character {
    filter: drop-shadow(0 10px 20px var(--accent-glow)) brightness(1.08);
}

@keyframes idle {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}

@keyframes centerIdle {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-10px) scale(1.05); }
}

#character-selection .game-start-btn {
    padding: 14px 50px;
    font-size: 1.15em;
    font-weight: bold;
    background: var(--button-bg);
    color: var(--button-text);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-shadow: 0 8px 24px var(--card-border-soft);
}

#character-selection .game-start-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    background: var(--button-bg-hover);
    box-shadow: 0 12px 32px var(--card-border-glow);
}

#character-selection .game-start-btn:disabled {
    background: linear-gradient(145deg, #7f8c8d, #95a5a6);
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.6;
}

#character-selection .game-start-btn:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

#character-selection .character-perk-display,
#character-selection .perk-description {
    color: var(--muted-text);
}

#character-selection .character-perk-display,
#character-selection .character-weapon-display,
#character-selection .avatar-upload-panel {
    width: min(100%, 780px);
    background: rgba(10, 16, 28, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 12px;
    backdrop-filter: blur(8px);
}

#character-selection .perk-header,
#character-selection .weapon-header,
#character-selection .avatar-upload-title {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.66);
    margin-bottom: 6px;
}

#character-selection .perk-name,
#character-selection .weapon-name {
    color: var(--heading);
    font-size: 1.02rem;
    font-weight: 700;
    margin-bottom: 4px;
}

#character-selection .perk-description,
#character-selection .weapon-description {
    margin: 0;
    color: var(--muted-text);
    font-size: 0.9rem;
}

#character-selection .weapon-effect {
    margin-top: 6px;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.7);
}

#character-selection #weapon-effect-display {
    color: var(--accent-2);
    font-weight: 700;
}

#character-selection .avatar-upload-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

#character-selection .avatar-preview {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.2));
    background-size: cover;
    background-position: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

#character-selection .avatar-preview.has-image {
    border-color: var(--card-border);
}

#character-selection .avatar-preview-fallback {
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
}

#character-selection .avatar-upload-meta p {
    margin: 0;
    color: var(--muted-text);
    font-size: 0.82rem;
    line-height: 1.35;
}

#character-selection .avatar-upload-meta .avatar-upload-help {
    margin-top: 4px;
    opacity: 0.85;
}

#character-selection .avatar-upload-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

#character-selection .avatar-btn {
    border: none;
    border-radius: 999px;
    padding: 8px 14px;
    background: var(--button-bg);
    color: var(--button-text);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#character-selection .avatar-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px var(--accent-soft);
}

#character-selection .avatar-btn.secondary {
    background: rgba(255, 255, 255, 0.12);
}

/* Theme selector side panel */
.theme-selector-panel {
    flex: 0 0 260px;
    width: 260px;
    background: rgba(8, 12, 20, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35);
    padding: 16px;
    text-align: left;
}

#character-selection .theme-panel-title {
    font-size: 1.15em;
    margin: 0;
    color: #ffffff;
    letter-spacing: 0.4px;
}

#character-selection .theme-panel-subtitle {
    margin: 6px 0 12px;
    color: var(--muted-text);
    font-size: 0.84em;
    line-height: 1.35;
}

.theme-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-height: 54vh;
    overflow-y: auto;
    padding-right: 2px;
}

.theme-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    background: rgba(16, 24, 36, 0.72);
    color: #f7f9ff;
    padding: 8px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.theme-option:hover {
    border-color: rgba(255, 255, 255, 0.34);
    transform: translateY(-1px);
}

.theme-option:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.theme-option.is-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-soft), 0 8px 22px var(--accent-soft);
}

.theme-swatch {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: linear-gradient(135deg, var(--swatch-1), var(--swatch-2));
}

#character-selection .theme-option-label {
    flex: 1;
    font-size: 0.9em;
    color: #f2f4ff;
}

.theme-check {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #ffffff;
    font-size: 0.75em;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.theme-option.is-selected .theme-check {
    opacity: 1;
    transform: scale(1);
}

@media (max-width: 1200px) {
    .hero-selection-layout {
        width: min(1120px, 100%);
    }

    .theme-selector-panel {
        flex-basis: 240px;
        width: 240px;
    }
}

@media (max-width: 900px) {
    #character-selection {
        justify-content: flex-start;
        align-items: flex-start;
        padding: 24px 14px 30px;
        overflow-y: auto;
    }

    .hero-selection-layout {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        width: min(940px, 100%);
        margin: 0 auto;
    }

    .hero-selector-main {
        width: 100%;
    }

    .theme-selector-panel {
        width: 100%;
        max-width: none;
    }

    .theme-options {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        max-height: none;
    }

    #character-selection h2 {
        font-size: 2.1em;
        margin-bottom: 14px;
    }

    .character-carousel {
        min-height: 290px;
        gap: 14px;
        margin-bottom: 20px;
    }
}

@media (max-width: 600px) {
    .character-carousel {
        gap: 10px;
        min-height: 250px;
    }

    #character-selection .carousel-btn {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    #character-selection .character-card {
        min-width: 130px;
        padding: 16px 12px;
    }

    #character-selection .character-card.center {
        transform: translateY(0) scale(1.04);
    }

    .pixel-character {
        width: 84px;
        height: 84px;
    }

    #character-selection .character-card.center:hover:not(.selected) {
        transform: translateY(-8px) scale(1.08);
    }

    #character-selection .game-start-btn {
        width: min(90%, 360px);
        padding: 13px 24px;
        font-size: 1em;
    }

    #character-selection .avatar-upload-row {
        align-items: flex-start;
    }

    #character-selection .avatar-preview {
        width: 54px;
        height: 54px;
    }

    #character-selection .avatar-upload-actions {
        flex-wrap: wrap;
    }
}

/* ====== Pixel Art Characters ====== */
/* DETAILED PIXEL ART CHARACTERS */
.knight-pixel {
    background: 
        /* Red plume with wind movement and detail */
        linear-gradient(to right, transparent 43px, #a93226 43px, #a93226 44px, #cb4335 44px, #cb4335 45px, #e74c3c 45px, #e74c3c 46px, #ec7063 46px, #ec7063 47px, #e74c3c 47px, #e74c3c 49px, #ec7063 49px, #ec7063 50px, #f1948a 50px, #f1948a 51px, #ec7063 51px, #ec7063 53px, #e74c3c 53px, #e74c3c 54px, #cb4335 54px, #cb4335 55px, #a93226 55px, #a93226 56px, transparent 56px) 0px 6px / 100px 6px,
        /* Helmet crown - photorealistic metal */
        linear-gradient(to right, transparent 39px, #5d6d7e 39px, #5d6d7e 40px, #85929e 40px, #85929e 41px, #aab7b8 41px, #aab7b8 42px, #d5dbdb 42px, #d5dbdb 43px, #ecf0f1 43px, #ecf0f1 44px, #ffffff 44px, #ffffff 45px, #ecf0f1 45px, #ecf0f1 46px, #d5dbdb 46px, #d5dbdb 48px, #bdc3c7 48px, #bdc3c7 50px, #95a5a6 50px, #95a5a6 52px, #bdc3c7 52px, #bdc3c7 54px, #d5dbdb 54px, #d5dbdb 55px, #ecf0f1 55px, #ecf0f1 56px, #ffffff 56px, #ffffff 57px, #ecf0f1 57px, #ecf0f1 58px, #d5dbdb 58px, #d5dbdb 59px, #aab7b8 59px, #aab7b8 60px, #85929e 60px, #85929e 61px, #5d6d7e 61px, #5d6d7e 62px, transparent 62px) 0px 12px / 100px 9px,
        /* Visor with depth and eye glow */
        linear-gradient(to right, transparent 41px, #1c2833 41px, #1c2833 42px, #273746 42px, #273746 43px, #34495e 43px, #34495e 44px, #515a5a 44px, #515a5a 45px, #922b21 45px, #922b21 46px, #c0392b 46px, #c0392b 47px, #e74c3c 47px, #e74c3c 48px, transparent 48px, transparent 52px, #e74c3c 52px, #e74c3c 53px, #c0392b 53px, #c0392b 54px, #922b21 54px, #922b21 55px, #515a5a 55px, #515a5a 56px, #34495e 56px, #34495e 57px, #273746 57px, #273746 58px, #1c2833 58px, #1c2833 59px, transparent 59px) 0px 21px / 100px 4px,
        /* Face guard - polished metal */
        linear-gradient(to right, transparent 38px, #5d6d7e 38px, #5d6d7e 39px, #707b7c 39px, #707b7c 40px, #85929e 40px, #85929e 41px, #99a3a4 41px, #99a3a4 42px, #aab7b8 42px, #aab7b8 43px, #bdc3c7 43px, #bdc3c7 44px, #d5dbdb 44px, #d5dbdb 45px, #ecf0f1 45px, #ecf0f1 55px, #d5dbdb 55px, #d5dbdb 56px, #bdc3c7 56px, #bdc3c7 57px, #aab7b8 57px, #aab7b8 58px, #99a3a4 58px, #99a3a4 59px, #85929e 59px, #85929e 60px, #707b7c 60px, #707b7c 61px, #5d6d7e 61px, #5d6d7e 62px, transparent 62px) 0px 25px / 100px 7px,
        /* Chainmail neck - detailed texture */
        linear-gradient(to right, transparent 42px, #5d6d7e 42px, #5d6d7e 43px, #707b7c 43px, #707b7c 44px, #85929e 44px, #85929e 45px, #707b7c 45px, #707b7c 46px, #85929e 46px, #85929e 54px, #707b7c 54px, #707b7c 55px, #85929e 55px, #85929e 56px, #707b7c 56px, #707b7c 57px, #5d6d7e 57px, #5d6d7e 58px, transparent 58px) 0px 32px / 100px 5px,
        /* Shoulder pauldrons - curved 3D metal */
        linear-gradient(to right, transparent 29px, #5d6d7e 29px, #5d6d7e 30px, #707b7c 30px, #707b7c 31px, #85929e 31px, #85929e 32px, #99a3a4 32px, #99a3a4 33px, #aab7b8 33px, #aab7b8 34px, #bdc3c7 34px, #bdc3c7 35px, #d5dbdb 35px, #d5dbdb 36px, #ecf0f1 36px, #ecf0f1 37px, #ffffff 37px, #ffffff 38px, #ecf0f1 38px, #ecf0f1 39px, #d5dbdb 39px, #d5dbdb 40px, #bdc3c7 40px, #bdc3c7 60px, #d5dbdb 60px, #d5dbdb 61px, #ecf0f1 61px, #ecf0f1 62px, #ffffff 62px, #ffffff 63px, #ecf0f1 63px, #ecf0f1 64px, #d5dbdb 64px, #d5dbdb 65px, #bdc3c7 65px, #bdc3c7 66px, #aab7b8 66px, #aab7b8 67px, #99a3a4 67px, #99a3a4 68px, #85929e 68px, #85929e 69px, #707b7c 69px, #707b7c 70px, #5d6d7e 70px, #5d6d7e 71px, transparent 71px) 0px 37px / 100px 8px,
        /* Breastplate - mirror polish effect */
        linear-gradient(to right, transparent 35px, #5d6d7e 35px, #5d6d7e 36px, #707b7c 36px, #707b7c 37px, #85929e 37px, #85929e 38px, #99a3a4 38px, #99a3a4 39px, #aab7b8 39px, #aab7b8 40px, #bdc3c7 40px, #bdc3c7 41px, #d5dbdb 41px, #d5dbdb 42px, #ecf0f1 42px, #ecf0f1 43px, #ffffff 43px, #ffffff 44px, #ecf0f1 44px, #ecf0f1 46px, #d5dbdb 46px, #d5dbdb 48px, #bdc3c7 48px, #bdc3c7 50px, #aab7b8 50px, #aab7b8 52px, #bdc3c7 52px, #bdc3c7 54px, #d5dbdb 54px, #d5dbdb 56px, #ecf0f1 56px, #ecf0f1 57px, #ffffff 57px, #ffffff 58px, #ecf0f1 58px, #ecf0f1 59px, #d5dbdb 59px, #d5dbdb 60px, #bdc3c7 60px, #bdc3c7 61px, #aab7b8 61px, #aab7b8 62px, #99a3a4 62px, #99a3a4 63px, #85929e 63px, #85929e 64px, #707b7c 64px, #707b7c 65px, #5d6d7e 65px, #5d6d7e 66px, transparent 66px) 0px 45px / 100px 18px,
        /* Blue heraldic cross - layered */
        linear-gradient(to right, transparent 46px, #1a5490 46px, #1a5490 47px, #1f618d 47px, #1f618d 48px, #2471a3 48px, #2471a3 49px, #2980b9 49px, #2980b9 50px, #3498db 50px, #3498db 51px, #5dade2 51px, #5dade2 52px, #3498db 52px, #3498db 53px, #2980b9 53px, #2980b9 54px, transparent 54px) 0px 48px / 100px 12px,
        linear-gradient(to right, transparent 43px, #1a5490 43px, #1a5490 44px, #1f618d 44px, #1f618d 45px, #2471a3 45px, #2471a3 46px, #2980b9 46px, #2980b9 47px, #3498db 47px, #3498db 57px, #2980b9 57px, #2980b9 58px, #2471a3 58px, #2471a3 59px, #1f618d 59px, #1f618d 60px, #1a5490 60px, #1a5490 61px, transparent 61px) 0px 52px / 100px 3px,
        /* Gold belt with ornate buckle */
        linear-gradient(to right, transparent 37px, #9a7d0a 37px, #9a7d0a 38px, #b8860b 38px, #b8860b 39px, #d68910 39px, #d68910 40px, #f39c12 40px, #f39c12 42px, #f1c40f 42px, #f1c40f 44px, #f9e79f 44px, #f9e79f 46px, #f1c40f 46px, #f1c40f 48px, #fef5e7 48px, #fef5e7 52px, #f1c40f 52px, #f1c40f 54px, #f9e79f 54px, #f9e79f 56px, #f1c40f 56px, #f1c40f 58px, #f39c12 58px, #f39c12 60px, #d68910 60px, #d68910 61px, #b8860b 61px, #b8860b 62px, #9a7d0a 62px, #9a7d0a 63px, transparent 63px) 0px 63px / 100px 5px,
        /* Articulated leg plates */
        linear-gradient(to right, transparent 39px, #424949 39px, #424949 40px, #5d6d7e 40px, #5d6d7e 41px, #707b7c 41px, #707b7c 42px, #85929e 42px, #85929e 44px, #99a3a4 44px, #99a3a4 46px, #aab7b8 46px, #aab7b8 48px, #99a3a4 48px, #99a3a4 49px, transparent 49px, transparent 51px, #99a3a4 51px, #99a3a4 52px, #aab7b8 52px, #aab7b8 54px, #99a3a4 54px, #99a3a4 56px, #85929e 56px, #85929e 58px, #707b7c 58px, #707b7c 59px, #5d6d7e 59px, #5d6d7e 60px, #424949 60px, #424949 61px, transparent 61px) 0px 68px / 100px 20px,
        /* Detailed boots */
        linear-gradient(to right, transparent 37px, #1c2833 37px, #1c2833 38px, #273746 38px, #273746 39px, #34495e 39px, #34495e 40px, #5d6d7e 40px, #5d6d7e 42px, #707b7c 42px, #707b7c 44px, #85929e 44px, #85929e 46px, #707b7c 46px, #707b7c 48px, #5d6d7e 48px, #5d6d7e 49px, transparent 49px, transparent 51px, #5d6d7e 51px, #5d6d7e 52px, #707b7c 52px, #707b7c 54px, #85929e 54px, #85929e 56px, #707b7c 56px, #707b7c 58px, #5d6d7e 58px, #5d6d7e 60px, #34495e 60px, #34495e 61px, #273746 61px, #273746 62px, #1c2833 62px, #1c2833 63px, transparent 63px) 0px 88px / 100px 8px,
        /* Shield - detailed heraldry */
        linear-gradient(to right, transparent 16px, #154360 16px, #154360 17px, #1a5490 17px, #1a5490 18px, #1f618d 18px, #1f618d 19px, #2471a3 19px, #2471a3 20px, #2980b9 20px, #2980b9 21px, #3498db 21px, #3498db 23px, #5dade2 23px, #5dade2 25px, #85c1e9 25px, #85c1e9 27px, #aed6f1 27px, #aed6f1 29px, #85c1e9 29px, #85c1e9 31px, #5dade2 31px, #5dade2 33px, #3498db 33px, #3498db 35px, #2980b9 35px, #2980b9 36px, #2471a3 36px, #2471a3 37px, #1f618d 37px, #1f618d 38px, #1a5490 38px, #1a5490 39px, #154360 39px, #154360 40px, transparent 40px) 0px 45px / 100px 28px,
        /* Shield rivets and edge */
        linear-gradient(to right, transparent 18px, #707b7c 18px, #707b7c 19px, #85929e 19px, #85929e 20px, #99a3a4 20px, #99a3a4 21px, transparent 21px, transparent 37px, #99a3a4 37px, #99a3a4 38px, #85929e 38px, #85929e 39px, #707b7c 39px, #707b7c 40px, transparent 40px) 0px 47px / 100px 3px,
        linear-gradient(to right, transparent 24px, #707b7c 24px, #707b7c 25px, #85929e 25px, #85929e 26px, transparent 26px, transparent 32px, #85929e 32px, #85929e 33px, #707b7c 33px, #707b7c 34px, transparent 34px) 0px 62px / 100px 3px,
        /* Sword blade - razor sharp with reflections */
        linear-gradient(to right, transparent 65px, #5d6d7e 65px, #5d6d7e 66px, #707b7c 66px, #707b7c 67px, #85929e 67px, #85929e 68px, #99a3a4 68px, #99a3a4 69px, #bdc3c7 69px, #bdc3c7 70px, #ecf0f1 70px, #ecf0f1 71px, #ffffff 71px, #ffffff 72px, #ecf0f1 72px, #ecf0f1 73px, #bdc3c7 73px, #bdc3c7 74px, #99a3a4 74px, #99a3a4 75px, #85929e 75px, #85929e 76px, #707b7c 76px, #707b7c 77px, #5d6d7e 77px, #5d6d7e 78px, transparent 78px) 0px 28px / 100px 42px,
        /* Blade highlights */
        linear-gradient(to right, transparent 69px, #d5dbdb 69px, #d5dbdb 70px, #ecf0f1 70px, #ecf0f1 71px, #ffffff 71px, #ffffff 72px, transparent 72px) 0px 32px / 100px 3px,
        linear-gradient(to right, transparent 69px, #d5dbdb 69px, #d5dbdb 70px, #ecf0f1 70px, #ecf0f1 71px, #ffffff 71px, #ffffff 72px, transparent 72px) 0px 44px / 100px 3px,
        linear-gradient(to right, transparent 69px, #d5dbdb 69px, #d5dbdb 70px, #ecf0f1 70px, #ecf0f1 71px, #ffffff 71px, #ffffff 72px, transparent 72px) 0px 56px / 100px 3px,
        /* Gold crossguard - ornate */
        linear-gradient(to right, transparent 58px, #7d6608 58px, #7d6608 59px, #9a7d0a 59px, #9a7d0a 60px, #b8860b 60px, #b8860b 61px, #d68910 61px, #d68910 62px, #f39c12 62px, #f39c12 64px, #f1c40f 64px, #f1c40f 66px, #f9e79f 66px, #f9e79f 68px, #fef5e7 68px, #fef5e7 70px, #f9e79f 70px, #f9e79f 72px, #f1c40f 72px, #f1c40f 74px, #f39c12 74px, #f39c12 76px, #d68910 76px, #d68910 77px, #b8860b 77px, #b8860b 78px, #9a7d0a 78px, #9a7d0a 79px, #7d6608 79px, #7d6608 80px, transparent 80px) 0px 26px / 100px 5px,
        /* Leather grip with wrapping */
        linear-gradient(to right, transparent 66px, #3e2723 66px, #3e2723 67px, #4e342e 67px, #4e342e 68px, #5d4037 68px, #5d4037 69px, #6d4c41 69px, #6d4c41 70px, #7f6650 70px, #7f6650 71px, #8b6746 71px, #8b6746 72px, #7f6650 72px, #7f6650 73px, #6d4c41 73px, #6d4c41 74px, #5d4037 74px, #5d4037 75px, #4e342e 75px, #4e342e 76px, #3e2723 76px, #3e2723 77px, transparent 77px) 0px 19px / 100px 8px,
        /* Ruby pommel */
        linear-gradient(to right, transparent 64px, #641e16 64px, #641e16 65px, #7b241c 65px, #7b241c 66px, #922b21 66px, #922b21 67px, #a93226 67px, #a93226 68px, #c0392b 68px, #c0392b 69px, #e74c3c 69px, #e74c3c 70px, #ec7063 70px, #ec7063 71px, #f1948a 71px, #f1948a 72px, #ec7063 72px, #ec7063 73px, #e74c3c 73px, #e74c3c 74px, #c0392b 74px, #c0392b 75px, #a93226 75px, #a93226 76px, #922b21 76px, #922b21 77px, #7b241c 77px, #7b241c 78px, #641e16 78px, #641e16 79px, transparent 79px) 0px 15px / 100px 6px;
    background-repeat: no-repeat;
}

.wizard-pixel {
    background: 
        /* Golden star with shine */
        linear-gradient(to right, transparent 47px, #9a7d0a 47px, #9a7d0a 48px, #b8860b 48px, #b8860b 49px, #d68910 49px, #d68910 50px, #f39c12 50px, #f39c12 51px, #f1c40f 51px, #f1c40f 52px, #f9e79f 52px, #f9e79f 53px, #f1c40f 53px, #f1c40f 54px, #f39c12 54px, #f39c12 55px, #d68910 55px, #d68910 56px, #b8860b 56px, #b8860b 57px, #9a7d0a 57px, #9a7d0a 58px, transparent 58px) 0px 2px / 100px 5px,
        /* Hat tip with fabric folds */
        linear-gradient(to right, transparent 46px, #512e5f 46px, #512e5f 47px, #633974 47px, #633974 48px, #76448a 48px, #76448a 49px, #8e44ad 49px, #8e44ad 50px, #9b59b6 50px, #9b59b6 51px, #a569bd 51px, #a569bd 52px, #9b59b6 52px, #9b59b6 53px, #8e44ad 53px, #8e44ad 54px, #76448a 54px, #76448a 55px, #633974 55px, #633974 56px, #512e5f 56px, #512e5f 57px, transparent 57px) 0px 7px / 100px 5px,
        /* Hat ascending with shadow detail */
        linear-gradient(to right, transparent 44px, #512e5f 44px, #512e5f 45px, #5b2c6f 45px, #5b2c6f 46px, #6c3483 46px, #6c3483 47px, #76448a 47px, #76448a 48px, #8e44ad 48px, #8e44ad 49px, #9b59b6 49px, #9b59b6 50px, #af7ac5 50px, #af7ac5 51px, #c39bd3 51px, #c39bd3 52px, #af7ac5 52px, #af7ac5 53px, #9b59b6 53px, #9b59b6 54px, #8e44ad 54px, #8e44ad 55px, #76448a 55px, #76448a 56px, #6c3483 56px, #6c3483 57px, #5b2c6f 57px, #5b2c6f 58px, #512e5f 58px, #512e5f 59px, transparent 59px) 0px 12px / 100px 6px,
        /* Hat wide with gradient */
        linear-gradient(to right, transparent 41px, #512e5f 41px, #512e5f 42px, #5b2c6f 42px, #5b2c6f 43px, #6c3483 43px, #6c3483 44px, #76448a 44px, #76448a 45px, #8e44ad 45px, #8e44ad 46px, #9b59b6 46px, #9b59b6 48px, #af7ac5 48px, #af7ac5 50px, #c39bd3 50px, #c39bd3 52px, #af7ac5 52px, #af7ac5 54px, #9b59b6 54px, #9b59b6 56px, #8e44ad 56px, #8e44ad 57px, #76448a 57px, #76448a 58px, #6c3483 58px, #6c3483 59px, #5b2c6f 59px, #5b2c6f 60px, #512e5f 60px, #512e5f 61px, transparent 61px) 0px 18px / 100px 5px,
        /* Hat brim with edge detail */
        linear-gradient(to right, transparent 36px, #3d1e4f 36px, #3d1e4f 37px, #4a235a 37px, #4a235a 38px, #512e5f 38px, #512e5f 39px, #5b2c6f 39px, #5b2c6f 40px, #6c3483 40px, #6c3483 41px, #76448a 41px, #76448a 42px, #8e44ad 42px, #8e44ad 62px, #76448a 62px, #76448a 63px, #6c3483 63px, #6c3483 64px, #5b2c6f 64px, #5b2c6f 65px, #512e5f 65px, #512e5f 66px, #4a235a 66px, #4a235a 67px, #3d1e4f 67px, #3d1e4f 68px, transparent 68px) 0px 23px / 100px 5px,
        /* Face with realistic skin */
        linear-gradient(to right, transparent 41px, #a97e4f 41px, #a97e4f 42px, #c79b6f 42px, #c79b6f 43px, #d7a86e 43px, #d7a86e 44px, #e6b87d 44px, #e6b87d 45px, #f0c674 45px, #f0c674 47px, #f5d6a3 47px, #f5d6a3 49px, #f0c674 49px, #f0c674 51px, #f5d6a3 51px, #f5d6a3 53px, #f0c674 53px, #f0c674 55px, #e6b87d 55px, #e6b87d 56px, #d7a86e 56px, #d7a86e 57px, #c79b6f 57px, #c79b6f 58px, #a97e4f 58px, #a97e4f 59px, transparent 59px) 0px 28px / 100px 5px,
        /* Eyebrows with detail */
        linear-gradient(to right, transparent 42px, #979a9a 42px, #979a9a 43px, #aab7b8 43px, #aab7b8 44px, #bdc3c7 44px, #bdc3c7 46px, transparent 46px, transparent 54px, #bdc3c7 54px, #bdc3c7 56px, #aab7b8 56px, #aab7b8 57px, #979a9a 57px, #979a9a 58px, transparent 58px) 0px 30px / 100px 2px,
        /* Eyes with wisdom and glow */
        linear-gradient(to right, transparent 43px, #1c2833 43px, #1c2833 44px, #273746 44px, #273746 45px, #34495e 45px, #34495e 46px, #5dade2 46px, #5dade2 47px, #85c1e9 47px, #85c1e9 48px, transparent 48px, transparent 52px, #85c1e9 52px, #85c1e9 53px, #5dade2 53px, #5dade2 54px, #34495e 54px, #34495e 55px, #273746 55px, #273746 56px, #1c2833 56px, #1c2833 57px, transparent 57px) 0px 32px / 100px 3px,
        /* Nose with shading */
        linear-gradient(to right, transparent 48px, #c79b6f 48px, #c79b6f 49px, #a97e4f 49px, #a97e4f 50px, #8b6f47 50px, #8b6f47 51px, #a97e4f 51px, #a97e4f 52px, transparent 52px) 0px 33px / 100px 3px,
        /* Beard - flowing and textured */
        linear-gradient(to right, transparent 41px, #979a9a 41px, #979a9a 42px, #aab7b8 42px, #aab7b8 43px, #bdc3c7 43px, #bdc3c7 44px, #d5dbdb 44px, #d5dbdb 45px, #ecf0f1 45px, #ecf0f1 46px, #ffffff 46px, #ffffff 47px, #ecf0f1 47px, #ecf0f1 49px, #d5dbdb 49px, #d5dbdb 51px, #ecf0f1 51px, #ecf0f1 53px, #d5dbdb 53px, #d5dbdb 55px, #ecf0f1 55px, #ecf0f1 56px, #ffffff 56px, #ffffff 57px, #ecf0f1 57px, #ecf0f1 58px, #d5dbdb 58px, #d5dbdb 59px, #bdc3c7 59px, #bdc3c7 60px, #aab7b8 60px, #aab7b8 61px, #979a9a 61px, #979a9a 62px, transparent 62px) 0px 36px / 100px 6px,
        /* Robe collar with ornate trim */
        linear-gradient(to right, transparent 39px, #512e5f 39px, #512e5f 40px, #5b2c6f 40px, #5b2c6f 41px, #6c3483 41px, #6c3483 42px, #76448a 42px, #76448a 43px, #8e44ad 43px, #8e44ad 44px, #9b59b6 44px, #9b59b6 45px, #af7ac5 45px, #af7ac5 59px, #9b59b6 59px, #9b59b6 60px, #8e44ad 60px, #8e44ad 61px, #76448a 61px, #76448a 62px, #6c3483 62px, #6c3483 63px, #5b2c6f 63px, #5b2c6f 64px, #512e5f 64px, #512e5f 65px, transparent 65px) 0px 42px / 100px 6px,
        /* Robe body with rich folds */
        linear-gradient(to right, transparent 35px, #3d1e4f 35px, #3d1e4f 36px, #4a235a 36px, #4a235a 37px, #512e5f 37px, #512e5f 38px, #5b2c6f 38px, #5b2c6f 39px, #6c3483 39px, #6c3483 40px, #76448a 40px, #76448a 41px, #8e44ad 41px, #8e44ad 42px, #9b59b6 42px, #9b59b6 44px, #af7ac5 44px, #af7ac5 46px, #c39bd3 46px, #c39bd3 48px, #d2b4de 48px, #d2b4de 50px, #c39bd3 50px, #c39bd3 52px, #d2b4de 52px, #d2b4de 54px, #c39bd3 54px, #c39bd3 56px, #af7ac5 56px, #af7ac5 58px, #9b59b6 58px, #9b59b6 60px, #8e44ad 60px, #8e44ad 61px, #76448a 61px, #76448a 62px, #6c3483 62px, #6c3483 63px, #5b2c6f 63px, #5b2c6f 64px, #512e5f 64px, #512e5f 65px, #4a235a 65px, #4a235a 66px, #3d1e4f 66px, #3d1e4f 67px, transparent 67px) 0px 48px / 100px 26px,
        /* Star decorations with shine */
        linear-gradient(to right, transparent 39px, #9a7d0a 39px, #9a7d0a 40px, #b8860b 40px, #b8860b 41px, #d68910 41px, #d68910 42px, #f39c12 42px, #f39c12 43px, #f1c40f 43px, #f1c40f 44px, transparent 44px, transparent 47px, #f1c40f 47px, #f1c40f 48px, #f9e79f 48px, #f9e79f 49px, #f1c40f 49px, #f1c40f 50px, transparent 50px, transparent 55px, #f1c40f 55px, #f1c40f 56px, #f9e79f 56px, #f9e79f 57px, #f1c40f 57px, #f1c40f 58px, transparent 58px) 0px 58px / 100px 3px,
        /* Gold belt with gems */
        linear-gradient(to right, transparent 36px, #7d6608 36px, #7d6608 37px, #9a7d0a 37px, #9a7d0a 38px, #b8860b 38px, #b8860b 39px, #d68910 39px, #d68910 40px, #f39c12 40px, #f39c12 42px, #f1c40f 42px, #f1c40f 44px, #f9e79f 44px, #f9e79f 46px, #fef5e7 46px, #fef5e7 48px, #922b21 48px, #922b21 50px, #e74c3c 50px, #e74c3c 52px, #922b21 52px, #922b21 54px, #fef5e7 54px, #fef5e7 56px, #f9e79f 56px, #f9e79f 58px, #f1c40f 58px, #f1c40f 60px, #f39c12 60px, #f39c12 62px, #d68910 62px, #d68910 63px, #b8860b 63px, #b8860b 64px, #9a7d0a 64px, #9a7d0a 65px, #7d6608 65px, #7d6608 66px, transparent 66px) 0px 74px / 100px 6px,
        /* Robe bottom with flowing fabric */
        linear-gradient(to right, transparent 33px, #3d1e4f 33px, #3d1e4f 34px, #4a235a 34px, #4a235a 35px, #512e5f 35px, #512e5f 36px, #5b2c6f 36px, #5b2c6f 37px, #6c3483 37px, #6c3483 38px, #76448a 38px, #76448a 39px, #8e44ad 39px, #8e44ad 65px, #76448a 65px, #76448a 66px, #6c3483 66px, #6c3483 67px, #5b2c6f 67px, #5b2c6f 68px, #512e5f 68px, #512e5f 69px, #4a235a 69px, #4a235a 70px, #3d1e4f 70px, #3d1e4f 71px, transparent 71px) 0px 80px / 100px 16px,
        /* Staff - ancient wood */
        linear-gradient(to right, transparent 18px, #3e2723 18px, #3e2723 19px, #4e342e 19px, #4e342e 20px, #5d4037 20px, #5d4037 21px, #6d4c41 21px, #6d4c41 22px, #7f6650 22px, #7f6650 23px, #8b6746 23px, #8b6746 24px, #9c795d 24px, #9c795d 25px, #8b6746 25px, #8b6746 26px, transparent 26px) 0px 36px / 100px 56px,
        /* Crystal orb - glowing with magic */
        linear-gradient(to right, transparent 14px, #0b5394 14px, #0b5394 15px, #1167b1 15px, #1167b1 16px, #1a5490 16px, #1a5490 17px, #1f618d 17px, #1f618d 18px, #2471a3 18px, #2471a3 19px, #2980b9 19px, #2980b9 20px, #3498db 20px, #3498db 21px, #5dade2 21px, #5dade2 22px, #85c1e9 22px, #85c1e9 23px, #aed6f1 23px, #aed6f1 24px, #d6eaf8 24px, #d6eaf8 25px, #ebf5fb 25px, #ebf5fb 26px, #d6eaf8 26px, #d6eaf8 27px, #aed6f1 27px, #aed6f1 28px, #85c1e9 28px, #85c1e9 29px, #5dade2 29px, #5dade2 30px, #3498db 30px, #3498db 31px, #2980b9 31px, #2980b9 32px, #2471a3 32px, #2471a3 33px, transparent 33px) 0px 28px / 100px 12px,
        /* Orb bright highlight */
        linear-gradient(to right, transparent 18px, #d6eaf8 18px, #d6eaf8 19px, #ebf5fb 19px, #ebf5fb 20px, #ffffff 20px, #ffffff 22px, #ebf5fb 22px, #ebf5fb 23px, transparent 23px) 0px 30px / 100px 3px,
        /* Sleeve detail */
        linear-gradient(to right, transparent 30px, #512e5f 30px, #512e5f 31px, #5b2c6f 31px, #5b2c6f 32px, #6c3483 32px, #6c3483 33px, #76448a 33px, #76448a 34px, #8e44ad 34px, #8e44ad 36px, transparent 36px, transparent 64px, #8e44ad 64px, #8e44ad 66px, #76448a 66px, #76448a 67px, #6c3483 67px, #6c3483 68px, #5b2c6f 68px, #5b2c6f 69px, #512e5f 69px, #512e5f 70px, transparent 70px) 0px 52px / 100px 16px;
    background-repeat: no-repeat;
    animation: idle 2s ease-in-out infinite, wizardGlow 2s ease-in-out infinite;
}

@keyframes wizardGlow {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 5px rgba(241, 196, 15, 0.3)); }
    50% { filter: brightness(1.2) drop-shadow(0 0 15px rgba(241, 196, 15, 0.8)); }
}

.archer-pixel {
    background: 
        /* Hood top with fabric texture */
        linear-gradient(to right, transparent 42px, #0e6251 42px, #0e6251 43px, #117a65 43px, #117a65 44px, #138d75 44px, #138d75 45px, #16a085 45px, #16a085 46px, #1abc9c 46px, #1abc9c 47px, #48c9b0 47px, #48c9b0 48px, #76d7c4 48px, #76d7c4 49px, #a3e4d7 49px, #a3e4d7 50px, #76d7c4 50px, #76d7c4 51px, #48c9b0 51px, #48c9b0 52px, #1abc9c 52px, #1abc9c 53px, #16a085 53px, #16a085 54px, #138d75 54px, #138d75 55px, #117a65 55px, #117a65 56px, #0e6251 56px, #0e6251 57px, transparent 57px) 0px 6px / 100px 7px,
        /* Hood fabric folds */
        linear-gradient(to right, transparent 38px, #0b5345 38px, #0b5345 39px, #0e6251 39px, #0e6251 40px, #117a65 40px, #117a65 41px, #138d75 41px, #138d75 42px, #16a085 42px, #16a085 43px, #1abc9c 43px, #1abc9c 44px, #27ae60 44px, #27ae60 45px, #2ecc71 45px, #2ecc71 46px, #52be80 46px, #52be80 48px, #73c6b6 48px, #73c6b6 50px, #52be80 50px, #52be80 52px, #2ecc71 52px, #2ecc71 54px, #27ae60 54px, #27ae60 55px, #1abc9c 55px, #1abc9c 56px, #16a085 56px, #16a085 57px, #138d75 57px, #138d75 58px, #117a65 58px, #117a65 59px, #0e6251 59px, #0e6251 60px, #0b5345 60px, #0b5345 61px, transparent 61px) 0px 13px / 100px 9px,
        /* Hood inner shadow */
        linear-gradient(to right, transparent 36px, #093028 36px, #093028 37px, #0b5345 37px, #0b5345 38px, #0e6251 38px, #0e6251 39px, #117a65 39px, #117a65 40px, #138d75 40px, #138d75 41px, #145a32 41px, #145a32 60px, #138d75 60px, #138d75 61px, #117a65 61px, #117a65 62px, #0e6251 62px, #0e6251 63px, #0b5345 63px, #0b5345 64px, #093028 64px, #093028 65px, transparent 65px) 0px 22px / 100px 7px,
        /* Face - realistic skin with shading */
        linear-gradient(to right, transparent 41px, #9e794c 41px, #9e794c 42px, #a97e4f 42px, #a97e4f 43px, #c79b6f 43px, #c79b6f 44px, #d7a86e 44px, #d7a86e 45px, #e6b87d 45px, #e6b87d 46px, #f0c674 46px, #f0c674 48px, #f5d6a3 48px, #f5d6a3 50px, #f0c674 50px, #f0c674 52px, #f5d6a3 52px, #f5d6a3 54px, #f0c674 54px, #f0c674 56px, #e6b87d 56px, #e6b87d 57px, #d7a86e 57px, #d7a86e 58px, #c79b6f 58px, #c79b6f 59px, #a97e4f 59px, #a97e4f 60px, #9e794c 60px, #9e794c 61px, transparent 61px) 0px 29px / 100px 7px,
        /* Eyes with determination */
        linear-gradient(to right, transparent 43px, #1c2833 43px, #1c2833 44px, #273746 44px, #273746 45px, #34495e 45px, #34495e 46px, #5d6d7e 46px, #5d6d7e 47px, transparent 47px, transparent 53px, #5d6d7e 53px, #5d6d7e 54px, #34495e 54px, #34495e 55px, #273746 55px, #273746 56px, #1c2833 56px, #1c2833 57px, transparent 57px) 0px 31px / 100px 3px,
        /* Nose with shading */
        linear-gradient(to right, transparent 48px, #c79b6f 48px, #c79b6f 49px, #a97e4f 49px, #a97e4f 50px, #8b6f47 50px, #8b6f47 51px, #a97e4f 51px, #a97e4f 52px, transparent 52px) 0px 32px / 100px 3px,
        /* Leather-trimmed collar */
        linear-gradient(to right, transparent 40px, #5d4037 40px, #5d4037 41px, #6d4c41 41px, #6d4c41 42px, #7d5a3b 42px, #7d5a3b 43px, #8b6746 43px, #8b6746 44px, #16a085 44px, #16a085 45px, #1abc9c 45px, #1abc9c 46px, #27ae60 46px, #27ae60 58px, #1abc9c 58px, #1abc9c 59px, #16a085 59px, #16a085 60px, #8b6746 60px, #8b6746 61px, #7d5a3b 61px, #7d5a3b 62px, #6d4c41 62px, #6d4c41 63px, #5d4037 63px, #5d4037 64px, transparent 64px) 0px 36px / 100px 6px,
        /* Tunic with layered fabric */
        linear-gradient(to right, transparent 36px, #0b5345 36px, #0b5345 37px, #0e6251 37px, #0e6251 38px, #117a65 38px, #117a65 39px, #138d75 39px, #138d75 40px, #16a085 40px, #16a085 41px, #1abc9c 41px, #1abc9c 42px, #27ae60 42px, #27ae60 43px, #2ecc71 43px, #2ecc71 44px, #52be80 44px, #52be80 46px, #76d7c4 46px, #76d7c4 48px, #a3e4d7 48px, #a3e4d7 50px, #76d7c4 50px, #76d7c4 52px, #52be80 52px, #52be80 56px, #2ecc71 56px, #2ecc71 58px, #27ae60 58px, #27ae60 59px, #1abc9c 59px, #1abc9c 60px, #16a085 60px, #16a085 61px, #138d75 61px, #138d75 62px, #117a65 62px, #117a65 63px, #0e6251 63px, #0e6251 64px, #0b5345 64px, #0b5345 65px, transparent 65px) 0px 42px / 100px 23px,
        /* Leather chest strap */
        linear-gradient(to right, transparent 43px, #5d4037 43px, #5d4037 44px, #6d4c41 44px, #6d4c41 45px, #7d5a3b 45px, #7d5a3b 46px, #8b6746 46px, #8b6746 58px, #7d5a3b 58px, #7d5a3b 59px, #6d4c41 59px, #6d4c41 60px, #5d4037 60px, #5d4037 61px, transparent 61px) 0px 48px / 100px 3px,
        /* Detailed leather belt */
        linear-gradient(to right, transparent 38px, #3e2723 38px, #3e2723 39px, #4e342e 39px, #4e342e 40px, #5d4037 40px, #5d4037 41px, #6d4c41 41px, #6d4c41 42px, #7d5a3b 42px, #7d5a3b 44px, #8b6746 44px, #8b6746 46px, #9c795d 46px, #9c795d 56px, #8b6746 56px, #8b6746 58px, #7d5a3b 58px, #7d5a3b 60px, #6d4c41 60px, #6d4c41 61px, #5d4037 61px, #5d4037 62px, #4e342e 62px, #4e342e 63px, #3e2723 63px, #3e2723 64px, transparent 64px) 0px 65px / 100px 6px,
        /* Brass buckle with shine */
        linear-gradient(to right, transparent 46px, #7d6608 46px, #7d6608 47px, #9a7d0a 47px, #9a7d0a 48px, #b8860b 48px, #b8860b 49px, #d68910 49px, #d68910 50px, #f39c12 50px, #f39c12 51px, #f9e79f 51px, #f9e79f 52px, #f1c40f 52px, #f1c40f 53px, #d68910 53px, #d68910 54px, #b8860b 54px, #b8860b 55px, #9a7d0a 55px, #9a7d0a 56px, #7d6608 56px, #7d6608 57px, transparent 57px) 0px 66px / 100px 5px,
        /* Brown leather pants */
        linear-gradient(to right, transparent 40px, #3e2723 40px, #3e2723 41px, #4e342e 41px, #4e342e 42px, #5d4037 42px, #5d4037 43px, #6d4c41 43px, #6d4c41 44px, #7d5a3b 44px, #7d5a3b 45px, #8b6746 45px, #8b6746 47px, #9c795d 47px, #9c795d 48px, transparent 48px, transparent 52px, #9c795d 52px, #9c795d 53px, #8b6746 53px, #8b6746 55px, #7d5a3b 55px, #7d5a3b 56px, #6d4c41 56px, #6d4c41 57px, #5d4037 57px, #5d4037 58px, #4e342e 58px, #4e342e 59px, #3e2723 59px, #3e2723 60px, transparent 60px) 0px 71px / 100px 18px,
        /* Detailed boots */
        linear-gradient(to right, transparent 38px, #27160f 38px, #27160f 39px, #3e2723 39px, #3e2723 40px, #4e342e 40px, #4e342e 41px, #5d4037 41px, #5d4037 42px, #654321 42px, #654321 44px, #7d5a3b 44px, #7d5a3b 46px, #8b6746 46px, #8b6746 48px, #7d5a3b 48px, #7d5a3b 49px, transparent 49px, transparent 51px, #7d5a3b 51px, #7d5a3b 52px, #8b6746 52px, #8b6746 54px, #7d5a3b 54px, #7d5a3b 56px, #654321 56px, #654321 58px, #5d4037 58px, #5d4037 59px, #4e342e 59px, #4e342e 60px, #3e2723 60px, #3e2723 61px, #27160f 61px, #27160f 62px, transparent 62px) 0px 89px / 100px 8px,
        /* Bow - carved wood detail */
        linear-gradient(to right, transparent 65px, #3e2723 65px, #3e2723 66px, #4e342e 66px, #4e342e 67px, #5d4037 67px, #5d4037 68px, #6d4c41 68px, #6d4c41 69px, #7d5a3b 69px, #7d5a3b 70px, #8b6746 70px, #8b6746 71px, #9c795d 71px, #9c795d 72px, #a67c52 72px, #a67c52 73px, #9c795d 73px, #9c795d 74px, #8b6746 74px, #8b6746 75px, #7d5a3b 75px, #7d5a3b 76px, #6d4c41 76px, #6d4c41 77px, #5d4037 77px, #5d4037 78px, transparent 78px) 0px 26px / 100px 46px,
        /* Bow upper limb curve */
        linear-gradient(to right, transparent 70px, #4e342e 70px, #4e342e 71px, #5d4037 71px, #5d4037 72px, #6d4c41 72px, #6d4c41 73px, #7d5a3b 73px, #7d5a3b 74px, #8b6746 74px, #8b6746 75px, #9c795d 75px, #9c795d 76px, transparent 76px) 0px 28px / 100px 10px,
        /* Bow lower limb curve */
        linear-gradient(to right, transparent 70px, #4e342e 70px, #4e342e 71px, #5d4037 71px, #5d4037 72px, #6d4c41 72px, #6d4c41 73px, #7d5a3b 73px, #7d5a3b 74px, #8b6746 74px, #8b6746 75px, #9c795d 75px, #9c795d 76px, transparent 76px) 0px 60px / 100px 10px,
        /* Bowstring - taut fiber */
        linear-gradient(to right, transparent 68px, #bdc3c7 68px, #bdc3c7 69px, #d5d8dc 69px, #d5d8dc 70px, #ecf0f1 70px, #ecf0f1 71px, transparent 71px) 0px 32px / 100px 34px,
        /* Arrow - ready to fire */
        linear-gradient(to right, transparent 62px, #922b21 62px, #922b21 63px, #c0392b 63px, #c0392b 64px, #e74c3c 64px, #e74c3c 65px, #ec7063 65px, #ec7063 66px, transparent 66px) 0px 46px / 100px 4px,
        linear-gradient(to right, transparent 66px, #85929e 66px, #85929e 67px, #99a3a4 67px, #99a3a4 68px, #aab7b8 68px, #aab7b8 69px, #bdc3c7 69px, #bdc3c7 70px, transparent 70px) 0px 47px / 100px 3px,
        /* Arrow tip - sharp metal */
        linear-gradient(to right, transparent 69px, #5d6d7e 69px, #5d6d7e 70px, #707b7c 70px, #707b7c 71px, #85929e 71px, #85929e 72px, transparent 72px) 0px 46px / 100px 2px,
        /* Leather quiver */
        linear-gradient(to right, transparent 27px, #3e2723 27px, #3e2723 28px, #4e342e 28px, #4e342e 29px, #5d4037 29px, #5d4037 30px, #6d4c41 30px, #6d4c41 31px, #7d5a3b 31px, #7d5a3b 32px, #8b6746 32px, #8b6746 36px, #7d5a3b 36px, #7d5a3b 37px, #6d4c41 37px, #6d4c41 38px, transparent 38px) 0px 42px / 100px 22px,
        /* Arrows in quiver with feathers */
        linear-gradient(to right, transparent 25px, #c0392b 25px, #c0392b 26px, #e74c3c 26px, #e74c3c 27px, #ec7063 27px, #ec7063 28px, transparent 28px, transparent 30px, #c0392b 30px, #c0392b 31px, #e74c3c 31px, #e74c3c 32px, #ec7063 32px, #ec7063 33px, transparent 33px, transparent 34px, #f39c12 34px, #f39c12 35px, #f1c40f 35px, #f1c40f 36px, transparent 36px) 0px 38px / 100px 7px;
    background-repeat: no-repeat;
}

.warrior-pixel {
    background: 
        /* Curved battle horns - detailed metal */
        linear-gradient(to right, transparent 30px, #424949 30px, #424949 31px, #515a5a 31px, #515a5a 32px, #5d6d7e 32px, #5d6d7e 33px, #707b7c 33px, #707b7c 34px, #85929e 34px, #85929e 35px, #99a3a4 35px, #99a3a4 36px, #aab7b8 36px, #aab7b8 37px, #99a3a4 37px, #99a3a4 38px, transparent 38px, transparent 62px, #99a3a4 62px, #99a3a4 63px, #aab7b8 63px, #aab7b8 64px, #99a3a4 64px, #99a3a4 65px, #85929e 65px, #85929e 66px, #707b7c 66px, #707b7c 67px, #5d6d7e 67px, #5d6d7e 68px, #515a5a 68px, #515a5a 69px, #424949 69px, #424949 70px, transparent 70px) 0px 5px / 100px 11px,
        /* Horn tips - sharp and menacing */
        linear-gradient(to right, transparent 29px, #5d6d7e 29px, #5d6d7e 30px, #707b7c 30px, #707b7c 31px, #85929e 31px, #85929e 32px, #99a3a4 32px, #99a3a4 33px, #aab7b8 33px, #aab7b8 34px, #bdc3c7 34px, #bdc3c7 35px, #d5dbdb 35px, #d5dbdb 36px, #ecf0f1 36px, #ecf0f1 37px, transparent 37px, transparent 63px, #ecf0f1 63px, #ecf0f1 64px, #d5dbdb 64px, #d5dbdb 65px, #bdc3c7 65px, #bdc3c7 66px, #aab7b8 66px, #aab7b8 67px, #99a3a4 67px, #99a3a4 68px, #85929e 68px, #85929e 69px, #707b7c 69px, #707b7c 70px, #5d6d7e 70px, #5d6d7e 71px, transparent 71px) 0px 7px / 100px 7px,
        /* Helmet dome - dark battle-worn metal */
        linear-gradient(to right, transparent 37px, #283747 37px, #283747 38px, #34495e 38px, #34495e 39px, #424949 39px, #424949 40px, #515a5a 40px, #515a5a 41px, #5d6d7e 41px, #5d6d7e 42px, #707b7c 42px, #707b7c 44px, #85929e 44px, #85929e 46px, #99a3a4 46px, #99a3a4 48px, #aab7b8 48px, #aab7b8 52px, #99a3a4 52px, #99a3a4 54px, #85929e 54px, #85929e 56px, #707b7c 56px, #707b7c 58px, #5d6d7e 58px, #5d6d7e 59px, #515a5a 59px, #515a5a 60px, #424949 60px, #424949 61px, #34495e 61px, #34495e 62px, #283747 62px, #283747 63px, transparent 63px) 0px 16px / 100px 9px,
        /* Visor slit - glowing demonic eyes */
        linear-gradient(to right, transparent 40px, #4a0404 40px, #4a0404 41px, #641e16 41px, #641e16 42px, #7b241c 42px, #7b241c 43px, #922b21 43px, #922b21 44px, #a93226 44px, #a93226 45px, #c0392b 45px, #c0392b 46px, #e74c3c 46px, #e74c3c 47px, #ec7063 47px, #ec7063 48px, transparent 48px, transparent 52px, #ec7063 52px, #ec7063 53px, #e74c3c 53px, #e74c3c 54px, #c0392b 54px, #c0392b 55px, #a93226 55px, #a93226 56px, #922b21 56px, #922b21 57px, #7b241c 57px, #7b241c 58px, #641e16 58px, #641e16 59px, #4a0404 59px, #4a0404 60px, transparent 60px) 0px 25px / 100px 4px,
        /* Face guard - heavy plating */
        linear-gradient(to right, transparent 39px, #424949 39px, #424949 40px, #515a5a 40px, #515a5a 41px, #5d6d7e 41px, #5d6d7e 42px, #707b7c 42px, #707b7c 43px, #85929e 43px, #85929e 44px, #99a3a4 44px, #99a3a4 45px, #aab7b8 45px, #aab7b8 46px, #bdc3c7 46px, #bdc3c7 48px, #d5dbdb 48px, #d5dbdb 50px, #ecf0f1 50px, #ecf0f1 52px, #d5dbdb 52px, #d5dbdb 54px, #bdc3c7 54px, #bdc3c7 56px, #aab7b8 56px, #aab7b8 57px, #99a3a4 57px, #99a3a4 58px, #85929e 58px, #85929e 59px, #707b7c 59px, #707b7c 60px, #5d6d7e 60px, #5d6d7e 61px, #515a5a 61px, #515a5a 62px, #424949 62px, #424949 63px, transparent 63px) 0px 29px / 100px 7px,
        /* Chainmail neck - detailed texture */
        linear-gradient(to right, transparent 41px, #424949 41px, #424949 42px, #515a5a 42px, #515a5a 43px, #5d6d7e 43px, #5d6d7e 44px, #707b7c 44px, #707b7c 45px, #85929e 45px, #85929e 46px, #707b7c 46px, #707b7c 47px, #5d6d7e 47px, #5d6d7e 54px, #707b7c 54px, #707b7c 55px, #85929e 55px, #85929e 56px, #707b7c 56px, #707b7c 57px, #5d6d7e 57px, #5d6d7e 58px, #515a5a 58px, #515a5a 59px, #424949 59px, #424949 60px, transparent 60px) 0px 36px / 100px 6px,
        /* Shoulder spikes - intimidating layers */
        linear-gradient(to right, transparent 28px, #5d6d7e 28px, #5d6d7e 29px, #707b7c 29px, #707b7c 30px, #85929e 30px, #85929e 31px, #99a3a4 31px, #99a3a4 32px, #aab7b8 32px, #aab7b8 33px, #bdc3c7 33px, #bdc3c7 34px, #d5dbdb 34px, #d5dbdb 35px, #ecf0f1 35px, #ecf0f1 36px, #ffffff 36px, #ffffff 37px, transparent 37px, transparent 63px, #ffffff 63px, #ffffff 64px, #ecf0f1 64px, #ecf0f1 65px, #d5dbdb 65px, #d5dbdb 66px, #bdc3c7 66px, #bdc3c7 67px, #aab7b8 67px, #aab7b8 68px, #99a3a4 68px, #99a3a4 69px, #85929e 69px, #85929e 70px, #707b7c 70px, #707b7c 71px, #5d6d7e 71px, #5d6d7e 72px, transparent 72px) 0px 42px / 100px 6px,
        /* More menacing spikes */
        linear-gradient(to right, transparent 26px, #424949 26px, #424949 27px, #515a5a 27px, #515a5a 28px, #5d6d7e 28px, #5d6d7e 29px, #707b7c 29px, #707b7c 30px, #85929e 30px, #85929e 31px, #99a3a4 31px, #99a3a4 32px, #aab7b8 32px, #aab7b8 33px, #bdc3c7 33px, #bdc3c7 34px, transparent 34px, transparent 66px, #bdc3c7 66px, #bdc3c7 67px, #aab7b8 67px, #aab7b8 68px, #99a3a4 68px, #99a3a4 69px, #85929e 69px, #85929e 70px, #707b7c 70px, #707b7c 71px, #5d6d7e 71px, #5d6d7e 72px, #515a5a 72px, #515a5a 73px, #424949 73px, #424949 74px, transparent 74px) 0px 48px / 100px 5px,
        /* Chest armor - battle-scarred red */
        linear-gradient(to right, transparent 35px, #4a0404 35px, #4a0404 36px, #641e16 36px, #641e16 37px, #7b241c 37px, #7b241c 38px, #922b21 38px, #922b21 39px, #a93226 39px, #a93226 40px, #c0392b 40px, #c0392b 41px, #e74c3c 41px, #e74c3c 42px, #ec7063 42px, #ec7063 44px, #f1948a 44px, #f1948a 46px, #fadbd8 46px, #fadbd8 48px, #f1948a 48px, #f1948a 50px, #fadbd8 50px, #fadbd8 52px, #f1948a 52px, #f1948a 54px, #ec7063 54px, #ec7063 56px, #e74c3c 56px, #e74c3c 58px, #c0392b 58px, #c0392b 59px, #a93226 59px, #a93226 60px, #922b21 60px, #922b21 61px, #7b241c 61px, #7b241c 62px, #641e16 62px, #641e16 63px, #4a0404 63px, #4a0404 64px, transparent 64px) 0px 53px / 100px 18px,
        /* Armor ridges - 3D plates with detail */
        linear-gradient(to right, transparent 39px, #5d6d7e 39px, #5d6d7e 40px, #707b7c 40px, #707b7c 41px, #85929e 41px, #85929e 42px, #99a3a4 42px, #99a3a4 43px, #aab7b8 43px, #aab7b8 44px, #bdc3c7 44px, #bdc3c7 60px, #aab7b8 60px, #aab7b8 61px, #99a3a4 61px, #99a3a4 62px, #85929e 62px, #85929e 63px, #707b7c 63px, #707b7c 64px, #5d6d7e 64px, #5d6d7e 65px, transparent 65px) 0px 54px / 100px 3px,
        linear-gradient(to right, transparent 39px, #424949 39px, #424949 40px, #515a5a 40px, #515a5a 41px, #5d6d7e 41px, #5d6d7e 42px, #707b7c 42px, #707b7c 43px, #85929e 43px, #85929e 60px, #707b7c 60px, #707b7c 61px, #5d6d7e 61px, #5d6d7e 62px, #515a5a 62px, #515a5a 63px, #424949 63px, #424949 64px, transparent 64px) 0px 61px / 100px 3px,
        linear-gradient(to right, transparent 39px, #5d6d7e 39px, #5d6d7e 40px, #707b7c 40px, #707b7c 41px, #85929e 41px, #85929e 42px, #99a3a4 42px, #99a3a4 43px, #aab7b8 43px, #aab7b8 44px, #bdc3c7 44px, #bdc3c7 60px, #aab7b8 60px, #aab7b8 61px, #99a3a4 61px, #99a3a4 62px, #85929e 62px, #85929e 63px, #707b7c 63px, #707b7c 64px, #5d6d7e 64px, #5d6d7e 65px, transparent 65px) 0px 68px / 100px 3px,
        /* Studded belt - dark leather with metal */
        linear-gradient(to right, transparent 37px, #0b0c0c 37px, #0b0c0c 38px, #17202a 38px, #17202a 39px, #1c2833 39px, #1c2833 40px, #273746 40px, #273746 41px, #2c3e50 41px, #2c3e50 42px, #34495e 42px, #34495e 62px, #2c3e50 62px, #2c3e50 63px, #273746 63px, #273746 64px, #1c2833 64px, #1c2833 65px, #17202a 65px, #17202a 66px, #0b0c0c 66px, #0b0c0c 67px, transparent 67px) 0px 71px / 100px 7px,
        /* Skull buckle - intimidating detail */
        linear-gradient(to right, transparent 46px, #979a9a 46px, #979a9a 47px, #aab7b8 47px, #aab7b8 48px, #bdc3c7 48px, #bdc3c7 49px, #d5d8dc 49px, #d5d8dc 50px, #ecf0f1 50px, #ecf0f1 54px, #d5d8dc 54px, #d5d8dc 55px, #bdc3c7 55px, #bdc3c7 56px, #aab7b8 56px, #aab7b8 57px, #979a9a 57px, #979a9a 58px, transparent 58px) 0px 72px / 100px 5px,
        linear-gradient(to right, transparent 47px, #1c2833 47px, #1c2833 48px, #273746 48px, #273746 49px, transparent 49px, transparent 51px, #273746 51px, #273746 52px, transparent 52px, transparent 54px, #273746 54px, #273746 55px, transparent 55px, transparent 56px, #273746 56px, #273746 57px, #1c2833 57px, #1c2833 58px, transparent 58px) 0px 74px / 100px 2px,
        /* Leg armor - battle-worn */
        linear-gradient(to right, transparent 39px, #4a0404 39px, #4a0404 40px, #641e16 40px, #641e16 41px, #7b241c 41px, #7b241c 42px, #922b21 42px, #922b21 43px, #a93226 43px, #a93226 44px, #c0392b 44px, #c0392b 45px, #e74c3c 45px, #e74c3c 47px, #ec7063 47px, #ec7063 48px, transparent 48px, transparent 52px, #ec7063 52px, #ec7063 53px, #e74c3c 53px, #e74c3c 55px, #c0392b 55px, #c0392b 56px, #a93226 56px, #a93226 57px, #922b21 57px, #922b21 58px, #7b241c 58px, #7b241c 59px, #641e16 59px, #641e16 60px, #4a0404 60px, #4a0404 61px, transparent 61px) 0px 78px / 100px 16px,
        /* Spiked knee guards */
        linear-gradient(to right, transparent 37px, #424949 37px, #424949 38px, #515a5a 38px, #515a5a 39px, #5d6d7e 39px, #5d6d7e 40px, #707b7c 40px, #707b7c 41px, #85929e 41px, #85929e 42px, #99a3a4 42px, #99a3a4 44px, #aab7b8 44px, #aab7b8 46px, #bdc3c7 46px, #bdc3c7 48px, #d5dbdb 48px, #d5dbdb 49px, transparent 49px, transparent 51px, #d5dbdb 51px, #d5dbdb 52px, #bdc3c7 52px, #bdc3c7 54px, #aab7b8 54px, #aab7b8 56px, #99a3a4 56px, #99a3a4 58px, #85929e 58px, #85929e 59px, #707b7c 59px, #707b7c 60px, #5d6d7e 60px, #5d6d7e 61px, #515a5a 61px, #515a5a 62px, #424949 62px, #424949 63px, transparent 63px) 0px 94px / 100px 8px,
        /* Heavy armored boots */
        linear-gradient(to right, transparent 37px, #0b0c0c 37px, #0b0c0c 38px, #17202a 38px, #17202a 39px, #1c2833 39px, #1c2833 40px, #273746 40px, #273746 41px, #2c3e50 41px, #2c3e50 42px, #34495e 42px, #34495e 44px, #424949 44px, #424949 46px, #515a5a 46px, #515a5a 48px, #424949 48px, #424949 49px, transparent 49px, transparent 51px, #424949 51px, #424949 52px, #515a5a 52px, #515a5a 54px, #424949 54px, #424949 56px, #34495e 56px, #34495e 58px, #2c3e50 58px, #2c3e50 59px, #273746 59px, #273746 60px, #1c2833 60px, #1c2833 61px, #17202a 61px, #17202a 62px, #0b0c0c 62px, #0b0c0c 63px, transparent 63px) 0px 102px / 100px 8px,
        /* MASSIVE battle sword - detailed */
        linear-gradient(to right, transparent 65px, #424949 65px, #424949 66px, #515a5a 66px, #515a5a 67px, #5d6d7e 67px, #5d6d7e 68px, #707b7c 68px, #707b7c 69px, #85929e 69px, #85929e 70px, #99a3a4 70px, #99a3a4 71px, #aab7b8 71px, #aab7b8 72px, #bdc3c7 72px, #bdc3c7 73px, #d5dbdb 73px, #d5dbdb 74px, #ecf0f1 74px, #ecf0f1 75px, #ffffff 75px, #ffffff 76px, #ecf0f1 76px, #ecf0f1 77px, #d5dbdb 77px, #d5dbdb 78px, #bdc3c7 78px, #bdc3c7 79px, #aab7b8 79px, #aab7b8 80px, transparent 80px) 0px 23px / 100px 58px,
        /* Blade edge - razor sharp */
        linear-gradient(to right, transparent 73px, #d5dbdb 73px, #d5dbdb 74px, #ecf0f1 74px, #ecf0f1 75px, #ffffff 75px, #ffffff 76px, transparent 76px) 0px 28px / 100px 4px,
        linear-gradient(to right, transparent 73px, #d5dbdb 73px, #d5dbdb 74px, #ecf0f1 74px, #ecf0f1 75px, #ffffff 75px, #ffffff 76px, transparent 76px) 0px 44px / 100px 4px,
        linear-gradient(to right, transparent 73px, #d5dbdb 73px, #d5dbdb 74px, #ecf0f1 74px, #ecf0f1 75px, #ffffff 75px, #ffffff 76px, transparent 76px) 0px 60px / 100px 4px,
        /* Ornate gold crossguard */
        linear-gradient(to right, transparent 58px, #7d6608 58px, #7d6608 59px, #9a7d0a 59px, #9a7d0a 60px, #b8860b 60px, #b8860b 61px, #d68910 61px, #d68910 62px, #f39c12 62px, #f39c12 64px, #f1c40f 64px, #f1c40f 66px, #f9e79f 66px, #f9e79f 68px, #fef5e7 68px, #fef5e7 72px, #f9e79f 72px, #f9e79f 74px, #f1c40f 74px, #f1c40f 76px, #f39c12 76px, #f39c12 78px, #d68910 78px, #d68910 79px, #b8860b 79px, #b8860b 80px, #9a7d0a 80px, #9a7d0a 81px, #7d6608 81px, #7d6608 82px, transparent 82px) 0px 21px / 100px 6px,
        /* Wrapped grip */
        linear-gradient(to right, transparent 66px, #3e2723 66px, #3e2723 67px, #4e342e 67px, #4e342e 68px, #5d4037 68px, #5d4037 69px, #6d4c41 69px, #6d4c41 70px, #7d5a3b 70px, #7d5a3b 71px, #8b6746 71px, #8b6746 72px, #9c795d 72px, #9c795d 73px, #a67c52 73px, #a67c52 74px, #9c795d 74px, #9c795d 75px, #8b6746 75px, #8b6746 76px, #7d5a3b 76px, #7d5a3b 77px, #6d4c41 77px, #6d4c41 78px, #5d4037 78px, #5d4037 79px, #4e342e 79px, #4e342e 80px, #3e2723 80px, #3e2723 81px, transparent 81px) 0px 13px / 100px 9px,
        /* Ruby pommel with glow */
        linear-gradient(to right, transparent 64px, #4a0404 64px, #4a0404 65px, #641e16 65px, #641e16 66px, #7b241c 66px, #7b241c 67px, #922b21 67px, #922b21 68px, #a93226 68px, #a93226 69px, #c0392b 69px, #c0392b 70px, #e74c3c 70px, #e74c3c 71px, #ec7063 71px, #ec7063 72px, #f1948a 72px, #f1948a 73px, #fadbd8 73px, #fadbd8 74px, #f1948a 74px, #f1948a 75px, #ec7063 75px, #ec7063 76px, #e74c3c 76px, #e74c3c 77px, #c0392b 77px, #c0392b 78px, #a93226 78px, #a93226 79px, #922b21 79px, #922b21 80px, #7b241c 80px, #7b241c 81px, #641e16 81px, #641e16 82px, #4a0404 82px, #4a0404 83px, transparent 83px) 0px 8px / 100px 7px;
    background-repeat: no-repeat;
}