/* ============================================
   CHARACTER STYLES (CSS-based characters)
   Replace these with your video/image assets
   ============================================ */

/* Base Character Styles */
.character {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Anita - Visual Impairment (Teal) */
.character-anita {
    background: transparent;
}

.character-anita .body {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 70px;
    background: linear-gradient(135deg, #5C9EAD, #4A8B9A);
    border-radius: 25px 25px 15px 15px;
}

.character-anita .head {
    position: absolute;
    bottom: 95px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #5C9EAD, #4A8B9A);
    border-radius: 50%;
}

.character-anita .sunglasses {
    position: absolute;
    bottom: 115px;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 12px;
    background: #1a1a1a;
    border-radius: 6px;
}

.character-anita .cane {
    position: absolute;
    bottom: 0;
    left: 65%;
    width: 6px;
    height: 90px;
    background: white;
    border-radius: 3px;
    transform: rotate(15deg);
    transform-origin: bottom center;
}

.character-anita .cane::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -1px;
    width: 8px;
    height: 15px;
    background: #E06B53;
    border-radius: 0 0 4px 4px;
}

.character-anita .leg-left,
.character-anita .leg-right {
    position: absolute;
    bottom: 0;
    width: 16px;
    height: 35px;
    background: linear-gradient(135deg, #5C9EAD, #4A8B9A);
    border-radius: 8px;
}

.character-anita .leg-left { left: calc(50% - 18px); }
.character-anita .leg-right { left: calc(50% + 2px); }

/* Imran - Hearing Impairment (Green) */
.character-imran .body {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 70px;
    background: linear-gradient(135deg, #5B8266, #4A7155);
    border-radius: 25px 25px 15px 15px;
}

.character-imran .head {
    position: absolute;
    bottom: 95px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #5B8266, #4A7155);
    border-radius: 50%;
}

.character-imran .headphones {
    position: absolute;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
    width: 55px;
    height: 30px;
    border: 5px solid #333;
    border-bottom: none;
    border-radius: 30px 30px 0 0;
}

.character-imran .headphones::before,
.character-imran .headphones::after {
    content: '';
    position: absolute;
    top: 15px;
    width: 15px;
    height: 20px;
    background: #333;
    border-radius: 4px;
}

.character-imran .headphones::before { left: -10px; }
.character-imran .headphones::after { right: -10px; }

.character-imran .eye-left,
.character-imran .eye-right {
    position: absolute;
    bottom: 115px;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

.character-imran .eye-left { left: calc(50% - 12px); }
.character-imran .eye-right { left: calc(50% + 4px); }

.character-imran .eye-left::after,
.character-imran .eye-right::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 4px;
    height: 4px;
    background: #333;
    border-radius: 50%;
}

.character-imran .leg-left,
.character-imran .leg-right {
    position: absolute;
    bottom: 0;
    width: 16px;
    height: 35px;
    background: linear-gradient(135deg, #5B8266, #4A7155);
    border-radius: 8px;
}

.character-imran .leg-left { left: calc(50% - 18px); }
.character-imran .leg-right { left: calc(50% + 2px); }

/* Rahul - Mobility Disability (Orange/Wheelchair) */
.character-rahul .wheelchair-base {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 15px;
    background: #333;
    border-radius: 4px;
}

.character-rahul .wheelchair-back {
    position: absolute;
    bottom: 35px;
    left: calc(50% - 30px);
    width: 10px;
    height: 50px;
    background: #333;
    border-radius: 4px;
}

.character-rahul .wheel-left,
.character-rahul .wheel-right {
    position: absolute;
    bottom: 5px;
    width: 50px;
    height: 50px;
    border: 6px solid #222;
    border-radius: 50%;
    background: transparent;
}

.character-rahul .wheel-left { left: calc(50% - 45px); }
.character-rahul .wheel-right { left: calc(50% - 5px); }

.character-rahul .wheel-left::after,
.character-rahul .wheel-right::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #444;
    border-radius: 50%;
}

.character-rahul .caster-left,
.character-rahul .caster-right {
    position: absolute;
    bottom: 0;
    width: 15px;
    height: 15px;
    background: #222;
    border-radius: 50%;
}

.character-rahul .caster-left { left: calc(50% - 25px); }
.character-rahul .caster-right { left: calc(50% + 10px); }

.character-rahul .body {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 55px;
    background: linear-gradient(135deg, #E06B53, #D05A42);
    border-radius: 22px 22px 10px 10px;
}

.character-rahul .head {
    position: absolute;
    bottom: 85px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #E06B53, #D05A42);
    border-radius: 50%;
}

.character-rahul .eye-left,
.character-rahul .eye-right {
    position: absolute;
    bottom: 100px;
    width: 7px;
    height: 7px;
    background: white;
    border-radius: 50%;
}

.character-rahul .eye-left { left: calc(50% - 10px); }
.character-rahul .eye-right { left: calc(50% + 3px); }

.character-rahul .smile {
    position: absolute;
    bottom: 92px;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 8px;
    border: 3px solid #333;
    border-top: none;
    border-radius: 0 0 15px 15px;
}

/* Meera - Neurodiversity (Tan) */
.character-meera .body {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 70px;
    background: linear-gradient(135deg, #DDA77B, #CC966A);
    border-radius: 25px 25px 15px 15px;
}

.character-meera .head {
    position: absolute;
    bottom: 95px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #DDA77B, #CC966A);
    border-radius: 50%;
}

.character-meera .headphones {
    position: absolute;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
    width: 55px;
    height: 30px;
    border: 5px solid #6B5B95;
    border-bottom: none;
    border-radius: 30px 30px 0 0;
}

.character-meera .headphones::before,
.character-meera .headphones::after {
    content: '';
    position: absolute;
    top: 15px;
    width: 15px;
    height: 20px;
    background: #6B5B95;
    border-radius: 4px;
}

.character-meera .headphones::before { left: -10px; }
.character-meera .headphones::after { right: -10px; }

.character-meera .eye-left,
.character-meera .eye-right {
    position: absolute;
    bottom: 115px;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

.character-meera .eye-left { left: calc(50% - 12px); }
.character-meera .eye-right { left: calc(50% + 4px); }

.character-meera .leg-left,
.character-meera .leg-right {
    position: absolute;
    bottom: 0;
    width: 16px;
    height: 35px;
    background: linear-gradient(135deg, #DDA77B, #CC966A);
    border-radius: 8px;
}

.character-meera .leg-left { left: calc(50% - 18px); }
.character-meera .leg-right { left: calc(50% + 2px); }

/* Showcase Characters (smaller for home screen) */
.showcase-character {
    position: relative;
    overflow: hidden;
}

.showcase-character[data-character="anita"] {
    background: linear-gradient(135deg, rgba(92,158,173,0.2), rgba(92,158,173,0.1));
}

.showcase-character[data-character="imran"] {
    background: linear-gradient(135deg, rgba(91,130,102,0.2), rgba(91,130,102,0.1));
}

.showcase-character[data-character="rahul"] {
    background: linear-gradient(135deg, rgba(224,107,83,0.2), rgba(224,107,83,0.1));
}

.showcase-character[data-character="meera"] {
    background: linear-gradient(135deg, rgba(221,167,123,0.2), rgba(221,167,123,0.1));
}

.showcase-character::after {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 90px;
    border-radius: 30px 30px 10px 10px;
}

.showcase-character[data-character="anita"]::after {
    background: linear-gradient(135deg, #5C9EAD, #4A8B9A);
}

.showcase-character[data-character="imran"]::after {
    background: linear-gradient(135deg, #5B8266, #4A7155);
}

.showcase-character[data-character="rahul"]::after {
    background: linear-gradient(135deg, #E06B53, #D05A42);
    border-radius: 20px;
    height: 70px;
}

.showcase-character[data-character="meera"]::after {
    background: linear-gradient(135deg, #DDA77B, #CC966A);
}

/* Walking Animation for Characters */
.game-character.moving .leg-left {
    animation: legWalkLeft 0.4s ease-in-out infinite;
}

.game-character.moving .leg-right {
    animation: legWalkRight 0.4s ease-in-out infinite;
}

@keyframes legWalkLeft {
    0%, 100% { transform: rotate(-15deg); }
    50% { transform: rotate(15deg); }
}

@keyframes legWalkRight {
    0%, 100% { transform: rotate(15deg); }
    50% { transform: rotate(-15deg); }
}

/* Wheelchair Rolling Animation */
.game-character.moving .wheel-left,
.game-character.moving .wheel-right {
    animation: wheelRoll 0.5s linear infinite;
}

@keyframes wheelRoll {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Celebration Animation */
.game-character.reached .body,
.game-character.reached .head {
    animation: celebrateBounce 0.5s ease infinite;
}

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