/**
 * Login Animals — CSS creatures integrated into the real login page.
 * Faithfully extracted from login-animals-v2.html.
 * The login-card sits INSIDE the animal-scene, hands grip it.
 */

/* ============================================================
   Animal Scene Wrapper
   ============================================================ */
.fpa-login-animal {
    width: 100%;
    max-width: 460px;
    animation: fpa-animal-fadeIn .6s ease-out;
}

/* Standard login fallback when no animals are enabled */
.fpa-login-page.fpa-login-standard .fpa-login-animal {
    max-width: 400px;
}

.fpa-login-page.fpa-login-standard .login-card {
    transform: none;
    margin-top: 0;
}

.fpa-login-page.fpa-login-standard .login-card.up {
    transform: none;
}

.fpa-login-page.fpa-login-standard .login-card h2 {
    color: var(--text-primary, #1D2D44);
}

@keyframes fpa-animal-fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Shared Creature Container
   ============================================================ */
.creature {
    position: relative;
    width: 200px;
    margin: 30px auto 0;
}

/* Decorative creature layers should never block login form controls. */
.creature,
.creature * {
    pointer-events: none;
}

.creature .face {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 50px auto 0;
    position: relative;
    box-shadow: 0 10px 15px rgba(0,0,0,.12);
    z-index: 50;
}

.creature .eye-white {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    z-index: 500;
    top: 80px;
    overflow: hidden;
}
.creature .eye-white.left  { left: 40px; }
.creature .eye-white.right { right: 40px; left: auto; }

.creature .eye-ball {
    position: absolute;
    width: 0;
    height: 0;
    left: 25px;
    top: 25px;
    max-width: 10px;
    max-height: 10px;
}
.creature .eye-ball::after {
    content: '';
    background: #000;
    position: absolute;
    border-radius: 50%;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
}

.creature .nose {
    position: absolute;
    height: 20px;
    width: 35px;
    bottom: 40px;
    left: 0; right: 0;
    margin: auto;
    z-index: 55;
}

.creature .body {
    background: #fff;
    position: absolute;
    top: 200px;
    left: -20px;
    width: 250px;
    height: 352px;
    border-radius: 100px 100px 100px 100px / 126px 126px 96px 96px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    z-index: 1;
}

.creature .foot {
    position: absolute;
    top: 430px;
    width: 82px;
    height: 120px;
    z-index: 80;
    box-shadow: 0 5px 5px rgba(0,0,0,.15);
    border-radius: 40px 40px 39px 40px / 26px 26px 63px 63px;
}
.creature .foot.left  { left: -80px; }
.creature .foot.right { left: auto; right: -80px; }

.creature .foot::after {
    content: '';
    width: 55px;
    height: 65px;
    border-radius: 50%;
    position: absolute;
    bottom: 10px;
    left: 0; right: 0;
    margin: auto;
}

.creature .foot .toes,
.creature .foot .toes::after,
.creature .foot .toes::before {
    position: absolute;
    width: 25px;
    height: 35px;
    border-radius: 50%;
    top: 10px;
}
.creature .foot.left .toes  { right: 5px; }
.creature .foot.left .toes::after  { content: ''; position: absolute; right: 30px; top: 0; width: 20px; }
.creature .foot.left .toes::before { content: ''; position: absolute; right: 55px; top: 5px; width: 20px; }
.creature .foot.right .toes { left: 5px; right: auto; }
.creature .foot.right .toes::after  { content: ''; position: absolute; left: 30px; right: auto; top: 0; width: 20px; }
.creature .foot.right .toes::before { content: ''; position: absolute; left: 55px; right: auto; top: 5px; width: 20px; }

/* ============================================================
   Login Card — held by animal hands (faithful to v2)
   ============================================================ */
.login-card {
    max-width: 400px;
    padding: 20px 40px;
    background: #fff;
    height: 380px;
    margin: auto;
    display: block;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    border: 1px solid rgba(74,144,226,.08);
    border-radius: 12px;
    transition: transform 0.3s ease;
    position: relative;
    transform: translateY(-100px);
    z-index: 500;
    perspective: 800px;
}
.login-card.up {
    transform: translateY(-180px);
}

.login-card h2 {
    font-family: var(--font-family-heading, 'Poppins', sans-serif);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 12px;
    text-align: center;
}

/* --- Hands (3-part paw gripping the card) --- */
.login-card .hand,
.login-card .hand::after,
.login-card .hand::before {
    width: 40px;
    height: 30px;
    border-radius: 50px;
    box-shadow: 0 2px 3px rgba(0,0,0,.15);
    margin: 5px;
    position: absolute;
    top: 70px;
    left: -25px;
}
.login-card .hand::after,
.login-card .hand::before {
    content: '';
    left: -5px;
    top: 11px;
}
.login-card .hand::before { top: 26px; }

.login-card .hand.right {
    left: auto;
    right: -25px;
}
.login-card .hand.right::after,
.login-card .hand.right::before {
    left: auto;
    right: -5px;
}

/* --- Form Controls inside card --- */
.login-card .form-group {
    position: relative;
    margin-bottom: 14px;
    text-align: left;
}
.login-card .form-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-secondary, #6B7A90);
    margin-bottom: 4px;
}
.login-card .form-control {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #E9ECEF;
    border-radius: 8px;
    font-size: 1rem;
    font-family: var(--font-family-primary, 'Inter', sans-serif);
    background: #fff;
    transition: all .2s;
    color: var(--text-primary, #1D2D44);
}
.login-card .form-control:focus {
    outline: none;
    border-color: var(--primary-blue, #4A90E2);
    box-shadow: 0 0 0 3px rgba(74,144,226,.12);
}

/* Password toggle inside card */
.login-card .fpa-password-wrapper {
    position: relative;
}
.login-card .fpa-password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    opacity: .6;
    padding: 4px;
}
.login-card .fpa-password-toggle:hover { opacity: 1; }

/* Form options row */
.login-card .fpa-form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: .85rem;
}
.login-card .fpa-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary, #6B7A90);
    cursor: pointer;
}
.login-card .fpa-checkbox-label input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--primary-blue, #4A90E2);
}
.login-card .fpa-forgot-link {
    color: var(--primary-blue, #4A90E2);
    text-decoration: none;
    font-weight: 500;
}
.login-card .fpa-forgot-link:hover {
    text-decoration: underline;
}

/* Messages */
.login-card #fpa-login-messages {
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 6px;
    font-size: .85rem;
    display: none;
}
.login-card #fpa-login-messages.error {
    display: block;
    background: #FEE;
    color: #C33;
    border: 1px solid #FCC;
}
.login-card #fpa-login-messages.success {
    display: block;
    background: #EFE;
    color: #3C3;
    border: 1px solid #CFC;
}

/* --- Sign-In / Register Button --- */
.login-card .btn-login {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    border: none;
    border-radius: 50px;
    font-family: var(--font-family-primary, 'Inter', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all .2s;
    text-align: center;
    text-decoration: none;
    background: linear-gradient(135deg, var(--primary-blue, #4A90E2) 0%, var(--primary-blue-dark, #2C5AA0) 100%);
}
.login-card .btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    color: #fff;
}
.login-card .btn-login-alt {
    background: linear-gradient(135deg, var(--accent-orange, #FF8A65) 0%, #e67350 100%);
    margin-top: 10px;
}
.login-card .btn-loader {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* --- Error Thought Bubble --- */
.alert-bubble {
    position: absolute;
    color: var(--error, #E53935);
    font-size: 14px;
    font-weight: 600;
    right: -140px;
    top: -80px;
    z-index: 200;
    padding: 20px 18px;
    background: #fff;
    box-shadow: 0 3px 5px rgba(0,0,0,.15);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: .4s .5s linear;
    white-space: nowrap;
}
.alert-bubble::after,
.alert-bubble::before {
    content: '';
    position: absolute;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,.12);
    border-radius: 50%;
}
.alert-bubble::after {
    width: 20px; height: 20px;
    left: -14px; bottom: -6px;
}
.alert-bubble::before {
    width: 12px; height: 12px;
    left: -28px; bottom: -18px;
}

/* Shake + bubble on wrong entry */
.login-card.wrong-entry { animation: wrong-log .3s; }
.login-card.wrong-entry .alert-bubble {
    opacity: 1;
    transform: scale(1);
}
@keyframes wrong-log {
    0%, 100% { margin-left: 0; }
    20%, 60%  { margin-left: 20px; }
    40%, 80%  { margin-left: -20px; }
}

/* ============================================================
   Card Flip — Login ↔ Register
   ============================================================ */
.login-card {
    transform-style: preserve-3d;
}
.login-card .card-face {
    backface-visibility: hidden;
}
.login-card .card-back {
    position: absolute;
    inset: 0;
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotateY(180deg);
    border-radius: 12px;
    background: #fff;
}
.login-card.flipped {
    transform: translateY(-100px) rotateY(180deg);
}
.login-card.flipped.up {
    transform: translateY(-180px) rotateY(180deg);
}

/* Forgot-password messages */
#fpa-forgot-messages {
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 6px;
    font-size: .85rem;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
#fpa-forgot-messages:empty { display: none; }
#fpa-forgot-messages.error {
    background: #FEE;
    color: #C33;
    border: 1px solid #FCC;
}
#fpa-forgot-messages.success {
    background: #EFE;
    color: #363;
    border: 1px solid #CFC;
}
.card-flip-link {
    text-align: center;
    margin-top: 14px;
    font-size: .88rem;
}
.card-flip-link a {
    color: var(--primary-blue, #4A90E2);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}
.card-flip-link a:hover {
    text-decoration: underline;
}
.card-back-desc {
    color: var(--text-secondary, #6B7A90);
    margin-bottom: 20px;
    text-align: center;
}
.card-back-buttons {
    width: 100%;
}
.card-back-buttons .btn-login {
    margin-bottom: 0;
}

/* ============================================================
   PANDA
   ============================================================ */
.panda-scene .face { background: #fff; }
.panda-scene .ear,
.panda-scene .ear::after {
    position: absolute;
    width: 80px; height: 80px;
    background: #000;
    z-index: 5;
    border: 10px solid #fff;
    left: -15px; top: -15px;
    border-radius: 50%;
}
.panda-scene .ear::after { content: ''; left: 125px; }
.panda-scene .eye-shade {
    background: #000;
    width: 50px; height: 80px;
    position: absolute;
    top: 35px;
    border-radius: 25px / 20px 30px 35px 40px;
}
.panda-scene .eye-shade.left  { left: 25px; transform: rotate(220deg); }
.panda-scene .eye-shade.right { left: 105px; transform: rotate(140deg); }
.panda-scene .nose {
    border-radius: 50px 20px / 30px 15px;
    transform: rotate(15deg);
    background: #000;
}
.panda-scene .body  { background: #fff; }
.panda-scene .foot  { background: #000; }
.panda-scene .foot::after { background: #222; }
.panda-scene .foot .toes,
.panda-scene .foot .toes::after,
.panda-scene .foot .toes::before { background: #222; }
.panda-scene .hand,
.panda-scene .hand::after,
.panda-scene .hand::before { background: #000; }
.panda-scene .login-card h2 { color: #1a1a2e; }
.panda-scene .btn-login { background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%); }

/* ============================================================
   DOG
   ============================================================ */
.dog-scene .face { background: #F5C97D; }
.dog-scene .ear-flop {
    position: absolute;
    width: 60px; height: 100px;
    background: #C6943F;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    top: 30px;
    z-index: 5;
}
.dog-scene .ear-flop.left  { left: -18px; transform: rotate(-10deg); }
.dog-scene .ear-flop.right { right: -18px; transform: rotate(10deg); }
.dog-scene .eye-white { top: 75px; }
.dog-scene .eye-white.left  { left: 38px; }
.dog-scene .eye-white.right { right: 38px; }
.dog-scene .snout {
    position: absolute;
    width: 90px; height: 60px;
    background: #FAEBD7;
    border-radius: 50%;
    bottom: 14px; left: 50%;
    transform: translateX(-50%);
    z-index: 55;
}
.dog-scene .nose {
    bottom: 52px;
    width: 26px; height: 18px;
    border-radius: 50% 50% 40% 40%;
    background: #3a2a1a;
}
.dog-scene .tongue {
    position: absolute;
    width: 18px; height: 24px;
    background: #FF8A8A;
    border-radius: 0 0 50% 50%;
    bottom: 10px; left: 50%;
    transform: translateX(-50%);
    z-index: 56;
    animation: fpa-pant 1.2s ease-in-out infinite;
}
@keyframes fpa-pant {
    0%, 100% { height: 24px; }
    50% { height: 16px; }
}
.dog-scene .tail {
    position: absolute;
    width: 16px; height: 65px;
    background: #C6943F;
    border-radius: 50px;
    top: 300px; right: -40px;
    transform-origin: bottom center;
    animation: fpa-wag .5s ease-in-out infinite alternate;
    z-index: 0;
}
@keyframes fpa-wag {
    from { transform: rotate(-25deg); }
    to   { transform: rotate(25deg); }
}
.dog-scene .body  { background: #F5C97D; }
.dog-scene .foot  { background: #C6943F; }
.dog-scene .foot::after { background: #D4A656; }
.dog-scene .foot .toes,
.dog-scene .foot .toes::after,
.dog-scene .foot .toes::before { background: #D4A656; }
.dog-scene .hand,
.dog-scene .hand::after,
.dog-scene .hand::before { background: #C6943F; }
.dog-scene .login-card h2 { color: #8B6914; }
.dog-scene .btn-login { background: linear-gradient(135deg, #C6943F 0%, #A67C2E 100%); }

/* ============================================================
   CAT — Orange Tabby
   ============================================================ */
.cat-scene .face { background: #E8A050; position: relative; }
.cat-scene .face::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 6;
    background:
        linear-gradient(168deg, transparent 38%, #B06820 38.5%, #B06820 40.5%, transparent 41%),
        linear-gradient(180deg, transparent 34%, #B06820 35%, #B06820 37%, transparent 37.5%),
        linear-gradient(192deg, transparent 38%, #B06820 38.5%, #B06820 40.5%, transparent 41%),
        linear-gradient(100deg, transparent 15%, #B06820 15.5%, #B06820 17%, transparent 17.5%),
        linear-gradient(100deg, transparent 22%, #B06820 22.5%, #B06820 24%, transparent 24.5%),
        linear-gradient(80deg, transparent 15%, #B06820 15.5%, #B06820 17%, transparent 17.5%),
        linear-gradient(80deg, transparent 22%, #B06820 22.5%, #B06820 24%, transparent 24.5%);
    pointer-events: none;
}
.cat-scene .face::after {
    content: '';
    position: absolute;
    width: 80px; height: 50px;
    background: #FFF5E6;
    border-radius: 50%;
    bottom: 10px; left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}
.cat-scene .ear-cat {
    position: absolute;
    top: -10px;
    z-index: 5;
    width: 60px;
    height: 80px;
    background: #E8A050;
    clip-path: polygon(50% 0%, 2% 100%, 98% 100%);
}
.cat-scene .ear-cat.left  { left: 4px; transform: rotate(-8deg); }
.cat-scene .ear-cat.right { right: 4px; transform: rotate(8deg); }
.cat-scene .ear-cat .ear-inner {
    position: absolute;
    width: 34px;
    height: 48px;
    background: #FFB8C6;
    clip-path: polygon(50% 0%, 5% 100%, 95% 100%);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.cat-scene .eye-white { width: 34px; height: 34px; top: 68px; }
.cat-scene .eye-white.left  { left: 30px; }
.cat-scene .eye-white.right { right: 30px; }
.cat-scene .eye-ball::after {
    width: 16px; height: 24px;
    border-radius: 40%;
    background: #4a8c2a;
}
.cat-scene .eye-ball::before {
    content: '';
    position: absolute;
    width: 6px; height: 12px;
    background: #1a3a10;
    border-radius: 3px;
    right: 5px; bottom: 6px;
    z-index: 2;
}
.cat-scene .whiskers {
    position: absolute;
    bottom: 42px;
    z-index: 56;
}
.cat-scene .whiskers.left  { left: -24px; }
.cat-scene .whiskers.right { right: -24px; }
.cat-scene .whiskers span {
    display: block;
    width: 40px; height: 2px;
    background: #fff;
    margin: 5px 0;
    border-radius: 2px;
}
.cat-scene .whiskers.left span:first-child  { transform: rotate(-10deg); }
.cat-scene .whiskers.left span:last-child   { transform: rotate(10deg); }
.cat-scene .whiskers.right span:first-child { transform: rotate(10deg); }
.cat-scene .whiskers.right span:last-child  { transform: rotate(-10deg); }
.cat-scene .nose {
    width: 16px; height: 12px;
    background: #FF9E9E;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    bottom: 46px;
    z-index: 10;
}
.cat-scene .mouth-cat {
    position: absolute;
    bottom: 28px; left: 50%;
    transform: translateX(-50%);
    font-size: 24px; color: #A06030;
    z-index: 55;
    line-height: 1;
}
.cat-scene .tail-cat {
    position: absolute;
    width: 16px; height: 90px;
    background: repeating-linear-gradient(0deg, #E8A050 0px, #E8A050 10px, #B06820 10px, #B06820 18px);
    border-radius: 50px;
    top: 300px; right: -40px;
    transform: rotate(-15deg);
    transform-origin: bottom center;
    z-index: 0;
}
.cat-scene .tail-cat::after {
    content: '';
    position: absolute;
    width: 26px; height: 26px;
    background: #B06820;
    border-radius: 50%;
    top: -10px; left: -5px;
}
.cat-scene .body { background: #E8A050; }
.cat-scene .body::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(90deg, transparent 0px, transparent 18px, #B06820 18px, #B06820 24px);
    opacity: .4;
}
.cat-scene .foot  { background: #C0813A; }
.cat-scene .foot::after { background: #D4944A; }
.cat-scene .foot .toes,
.cat-scene .foot .toes::after,
.cat-scene .foot .toes::before { background: #D4944A; }
.cat-scene .hand {
    background: #C0813A;
    width: 36px;
    height: 32px;
    border-radius: 50%;
}
.cat-scene .hand::after {
    background: #C0813A;
    width: 16px;
    height: 14px;
    border-radius: 50%;
}
.cat-scene .hand::before {
    background: #C0813A;
    width: 16px;
    height: 14px;
    border-radius: 50%;
}
.cat-scene .login-card h2 { color: #A06030; }
.cat-scene .btn-login { background: linear-gradient(135deg, #E8A050 0%, #C07830 100%); }

/* ============================================================
   RABBIT
   ============================================================ */
.rabbit-scene .face { background: #F5EDE3; }
.rabbit-scene .ear-long {
    position: absolute;
    width: 42px; height: 120px;
    background: #F5EDE3;
    border-radius: 50%;
    top: -40px;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.rabbit-scene .ear-long::after {
    content: '';
    position: absolute;
    width: 24px; height: 85px;
    background: #FFCCCC;
    border-radius: 50%;
    top: 18px; left: 50%;
    transform: translateX(-50%);
}
.rabbit-scene .ear-long.left  { left: 18px; transform: rotate(-8deg); }
.rabbit-scene .ear-long.right { right: 18px; transform: rotate(8deg); }
.rabbit-scene .eye-white { width: 30px; height: 30px; top: 74px; }
.rabbit-scene .eye-white.left  { left: 36px; }
.rabbit-scene .eye-white.right { right: 36px; }
.rabbit-scene .eye-ball::after { background: #8B2252; }
.rabbit-scene .cheek {
    position: absolute;
    width: 30px; height: 18px;
    background: rgba(255,170,170,.3);
    border-radius: 50%;
    top: 96px;
    z-index: 56;
}
.rabbit-scene .cheek.left  { left: 12px; }
.rabbit-scene .cheek.right { right: 12px; }
.rabbit-scene .nose { width: 14px; height: 10px; bottom: 46px; background: #FFAAAA; border-radius: 50%; }
.rabbit-scene .mouth-rabbit {
    position: absolute;
    bottom: 30px; left: 50%;
    transform: translateX(-50%);
    width: 22px; height: 10px;
    border-bottom: 2px solid #C0A090;
    border-left: 2px solid #C0A090;
    border-right: 2px solid #C0A090;
    border-radius: 0 0 50% 50%;
    z-index: 55;
}
.rabbit-scene .teeth {
    position: absolute;
    bottom: 24px; left: 50%;
    transform: translateX(-50%);
    z-index: 56;
    display: flex; gap: 2px;
}
.rabbit-scene .teeth span {
    display: block;
    width: 8px; height: 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0 0 3px 3px;
}
.rabbit-scene .cotton-tail {
    position: absolute;
    width: 30px; height: 30px;
    background: #fff;
    border-radius: 50%;
    top: 360px; left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.rabbit-scene .body  { background: #F5EDE3; }
.rabbit-scene .foot  { background: #E8D5C4; border-radius: 50%; height: 60px; }
.rabbit-scene .foot::after { background: #F0E0D0; }
.rabbit-scene .foot .toes,
.rabbit-scene .foot .toes::after,
.rabbit-scene .foot .toes::before { background: #F0E0D0; }
.rabbit-scene .hand,
.rabbit-scene .hand::after,
.rabbit-scene .hand::before { background: #E8D5C4; }
.rabbit-scene .login-card h2 { color: #8B6A5A; }
.rabbit-scene .btn-login { background: linear-gradient(135deg, #D4A08A 0%, #BF8A72 100%); }

/* ============================================================
   HAMSTER
   ============================================================ */
.hamster-scene .face { background: #F5C48A; width: 200px; height: 180px; }
.hamster-scene .ear-round {
    position: absolute;
    width: 40px; height: 40px;
    background: #D4A05A;
    border-radius: 50%;
    top: 36px;
    z-index: 5;
}
.hamster-scene .ear-round::after {
    content: '';
    position: absolute;
    width: 24px; height: 24px;
    background: #FFCCCC;
    border-radius: 50%;
    top: 8px; left: 8px;
}
.hamster-scene .ear-round.left  { left: -6px; }
.hamster-scene .ear-round.right { right: -6px; }
.hamster-scene .eye-white { width: 26px; height: 26px; top: 68px; }
.hamster-scene .eye-white.left  { left: 40px; }
.hamster-scene .eye-white.right { right: 40px; }
.hamster-scene .cheek {
    position: absolute;
    width: 52px; height: 42px;
    background: #FFDAB9;
    border-radius: 50%;
    top: 78px;
    z-index: 56;
}
.hamster-scene .cheek.left  { left: -2px; }
.hamster-scene .cheek.right { right: -2px; }
.hamster-scene .nose { width: 14px; height: 10px; bottom: 36px; background: #D4877A; border-radius: 50%; }
.hamster-scene .mouth-hamster {
    position: absolute;
    bottom: 22px; left: 50%;
    transform: translateX(-50%);
    width: 16px; height: 6px;
    border-bottom: 2px solid #B08060;
    border-radius: 0 0 50% 50%;
    z-index: 55;
}
.hamster-scene .belly {
    position: absolute;
    width: 130px; height: 140px;
    background: #FAEBD7;
    border-radius: 50%;
    top: 240px; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
.hamster-scene .body  { background: #F5C48A; }
.hamster-scene .foot  { background: #D4A05A; height: 80px; }
.hamster-scene .foot::after { background: #E0B86A; }
.hamster-scene .foot .toes,
.hamster-scene .foot .toes::after,
.hamster-scene .foot .toes::before { background: #E0B86A; }
.hamster-scene .hand,
.hamster-scene .hand::after,
.hamster-scene .hand::before { background: #D4A05A; }
.hamster-scene .login-card h2 { color: #9E6B2E; }
.hamster-scene .btn-login { background: linear-gradient(135deg, #D4A05A 0%, #B8883E 100%); }

/* ============================================================
   FOX
   ============================================================ */
.fox-scene .face { background: #E86A33; }
.fox-scene .ear-fox {
    position: absolute;
    top: -10px;
    z-index: 5;
    width: 60px;
    height: 75px;
    background: #E86A33;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.fox-scene .ear-fox.left  { left: 2px; transform: rotate(-6deg); }
.fox-scene .ear-fox.right { right: 2px; transform: rotate(6deg); }
.fox-scene .ear-fox .ear-inner {
    position: absolute;
    width: 36px;
    height: 46px;
    background: #1a1a2e;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.fox-scene .face-white {
    position: absolute;
    width: 110px; height: 85px;
    background: #fff;
    border-radius: 50%;
    bottom: 6px; left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}
.fox-scene .eye-white { width: 28px; height: 28px; top: 68px; z-index: 55; }
.fox-scene .eye-white.left  { left: 34px; }
.fox-scene .eye-white.right { right: 34px; }
.fox-scene .eye-ball::after { background: #2D1B00; }
.fox-scene .nose { width: 18px; height: 14px; bottom: 42px; background: #2D1B00; border-radius: 50% 50% 40% 40%; }
.fox-scene .mouth-fox {
    position: absolute;
    bottom: 26px; left: 50%;
    transform: translateX(-50%);
    width: 18px; height: 6px;
    border-bottom: 2px solid #8B4513;
    border-radius: 0 0 50% 50%;
    z-index: 55;
}
.fox-scene .tail-fox {
    position: absolute;
    width: 20px; height: 85px;
    background: #E86A33;
    border-radius: 50px;
    top: 295px; right: -40px;
    transform: rotate(-12deg);
    transform-origin: bottom center;
    z-index: 0;
}
.fox-scene .tail-fox::after {
    content: '';
    position: absolute;
    width: 28px; height: 28px;
    background: #fff;
    border-radius: 50%;
    top: -8px; left: -4px;
}
.fox-scene .chest {
    position: absolute;
    width: 140px; height: 160px;
    background: #FFF8F0;
    border-radius: 50%;
    top: 230px; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
.fox-scene .body  { background: #E86A33; }
.fox-scene .foot  { background: #2D1B00; }
.fox-scene .foot::after { background: #3D2B10; }
.fox-scene .foot .toes,
.fox-scene .foot .toes::after,
.fox-scene .foot .toes::before { background: #3D2B10; }
.fox-scene .hand,
.fox-scene .hand::after,
.fox-scene .hand::before { background: #C05520; }
.fox-scene .login-card h2 { color: #C04D18; }
.fox-scene .btn-login { background: linear-gradient(135deg, #E86A33 0%, #C05520 100%); }

/* ============================================================
   OWL
   ============================================================ */
.owl-scene .face { background: #8B6B4A; }
.owl-scene .ear-tuft {
    position: absolute;
    top: 18px;
    z-index: 5;
    width: 0; height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 40px solid #8B6B4A;
}
.owl-scene .ear-tuft.left  { left: 14px; }
.owl-scene .ear-tuft.right { right: 14px; }
.owl-scene .eye-ring {
    position: absolute;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #F5DEB3;
    top: 52px;
    z-index: 20;
}
.owl-scene .eye-ring.left  { left: 18px; }
.owl-scene .eye-ring.right { right: 18px; }
.owl-scene .eye-white { width: 40px; height: 40px; top: 60px; z-index: 30; }
.owl-scene .eye-white.left  { left: 26px; }
.owl-scene .eye-white.right { right: 26px; }
.owl-scene .eye-ball::after { width: 22px; height: 22px; background: #FF8C00; }
.owl-scene .eye-ball::before {
    content: '';
    position: absolute;
    width: 10px; height: 10px;
    background: #1a1a2e;
    border-radius: 50%;
    right: 5px; bottom: 5px;
    z-index: 2;
}
.owl-scene .beak {
    position: absolute;
    bottom: 34px; left: 50%;
    transform: translateX(-50%);
    z-index: 55;
    width: 0; height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 20px solid #D4A05A;
}
.owl-scene .breast {
    position: absolute;
    width: 130px; height: 150px;
    background: #D2B48C;
    border-radius: 50%;
    top: 230px; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
.owl-scene .body  { background: #8B6B4A; }
.owl-scene .foot  { background: #D4A05A; height: 50px; border-radius: 50%; }
.owl-scene .foot::after { background: #C8944A; }
.owl-scene .foot .toes,
.owl-scene .foot .toes::after,
.owl-scene .foot .toes::before { background: #C8944A; }
.owl-scene .hand,
.owl-scene .hand::after,
.owl-scene .hand::before { background: #6B4F36; }
.owl-scene .login-card h2 { color: #6B4F36; }
.owl-scene .btn-login { background: linear-gradient(135deg, #8B6B4A 0%, #6B4F36 100%); }

/* ============================================================
   HEDGEHOG
   ============================================================ */
.hedgehog-scene .face { background: #DEC6A0; width: 180px; height: 180px; }
.hedgehog-scene .spine-dome {
    position: absolute;
    width: 280px;
    height: 220px;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 55%, #7B5230 0%, #4A2E14 100%);
    border-radius: 50% 50% 45% 45%;
    z-index: 4;
}
.hedgehog-scene .spine-ring {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 250px;
    z-index: 52;
    pointer-events: none;
}
.hedgehog-scene .spine-ring span {
    position: absolute;
    width: 10px;
    background: linear-gradient(to top, #3C1E0A 0%, #7B5230 40%, #C8A070 100%);
    transform-origin: bottom center;
    clip-path: polygon(50% 0%, 15% 100%, 85% 100%);
}
.hedgehog-scene .eye-white { width: 26px; height: 26px; top: 72px; }
.hedgehog-scene .eye-white.left  { left: 36px; }
.hedgehog-scene .eye-white.right { right: 36px; }
.hedgehog-scene .eye-ball::after { width: 18px; height: 18px; }
.hedgehog-scene .cheek {
    position: absolute;
    width: 26px; height: 18px;
    background: rgba(255,180,160,.35);
    border-radius: 50%;
    top: 92px;
    z-index: 56;
}
.hedgehog-scene .cheek.left  { left: 16px; }
.hedgehog-scene .cheek.right { right: 16px; }
.hedgehog-scene .nose { width: 18px; height: 14px; bottom: 38px; background: #2a1a0a; border-radius: 50%; }
.hedgehog-scene .mouth-hh {
    position: absolute;
    bottom: 26px; left: 50%;
    transform: translateX(-50%);
    width: 16px; height: 6px;
    border-bottom: 2px solid #8B6B4A;
    border-radius: 0 0 50% 50%;
    z-index: 55;
}
.hedgehog-scene .body { background: #5A3820; border-radius: 50%; height: 310px; }
.hedgehog-scene .belly-hh {
    position: absolute;
    width: 140px; height: 130px;
    background: #DEC6A0;
    border-radius: 50%;
    top: 240px; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
.hedgehog-scene .foot  { background: #B08860; height: 60px; }
.hedgehog-scene .foot::after { background: #C09870; }
.hedgehog-scene .foot .toes,
.hedgehog-scene .foot .toes::after,
.hedgehog-scene .foot .toes::before { background: #C09870; }
.hedgehog-scene .hand,
.hedgehog-scene .hand::after,
.hedgehog-scene .hand::before { background: #B08860; }
.hedgehog-scene .login-card h2 { color: #5A3820; }
.hedgehog-scene .btn-login { background: linear-gradient(135deg, #8B6B4A 0%, #5A3820 100%); }

/* ============================================================
   PENGUIN
   ============================================================ */
.penguin-scene .face { background: #1a1a2e; }
.penguin-scene .face-white {
    position: absolute;
    width: 130px; height: 105px;
    background: #fff;
    border-radius: 50%;
    bottom: 4px; left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}
.penguin-scene .eye-white { width: 28px; height: 28px; top: 60px; z-index: 20; }
.penguin-scene .eye-white.left  { left: 38px; }
.penguin-scene .eye-white.right { right: 38px; }
.penguin-scene .beak-pgn {
    position: absolute;
    bottom: 36px; left: 50%;
    transform: translateX(-50%);
    z-index: 55;
    width: 0; height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 18px solid #F5A623;
}
.penguin-scene .flipper {
    position: absolute;
    width: 28px; height: 90px;
    background: #1a1a2e;
    border-radius: 50%;
    top: 230px;
    z-index: 3;
}
.penguin-scene .flipper.left  { left: -16px; transform: rotate(10deg); }
.penguin-scene .flipper.right { right: -16px; transform: rotate(-10deg); }
.penguin-scene .belly-pgn {
    position: absolute;
    width: 150px; height: 170px;
    background: #fff;
    border-radius: 50%;
    top: 220px; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
.penguin-scene .body  { background: #1a1a2e; }
.penguin-scene .foot  { background: #F5A623; height: 40px; border-radius: 50%; }
.penguin-scene .foot::after { display: none; }
.penguin-scene .foot .toes { display: none; }
.penguin-scene .hand,
.penguin-scene .hand::after,
.penguin-scene .hand::before { background: #1a1a2e; }
.penguin-scene .login-card h2 { color: #1a1a2e; }
.penguin-scene .btn-login { background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%); }

/* ============================================================
   GUINEA PIG
   ============================================================ */
.guinea-scene .face { background: #C4884D; width: 210px; height: 180px; }
.guinea-scene .face-blaze {
    position: absolute;
    width: 60px; height: 100px;
    background: #fff;
    border-radius: 50%;
    top: 30px; left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}
.guinea-scene .ear-gp {
    position: absolute;
    width: 38px; height: 32px;
    background: #A06830;
    border-radius: 50%;
    top: 30px;
    z-index: 5;
}
.guinea-scene .ear-gp::after {
    content: '';
    position: absolute;
    width: 22px; height: 18px;
    background: #FFCCCC;
    border-radius: 50%;
    top: 7px; left: 8px;
}
.guinea-scene .ear-gp.left  { left: -10px; }
.guinea-scene .ear-gp.right { right: -10px; }
.guinea-scene .eye-white { width: 28px; height: 28px; top: 62px; }
.guinea-scene .eye-white.left  { left: 38px; }
.guinea-scene .eye-white.right { right: 38px; }
.guinea-scene .eye-ball::after { background: #1a1a2e; }
.guinea-scene .nose { width: 20px; height: 14px; bottom: 34px; background: #FF9E9E; border-radius: 50%; }
.guinea-scene .mouth-gp {
    position: absolute;
    bottom: 18px; left: 50%;
    transform: translateX(-50%);
    width: 18px; height: 7px;
    border-bottom: 2px solid #9E6B3A;
    border-radius: 0 0 50% 50%;
    z-index: 55;
}
.guinea-scene .rosette {
    position: absolute;
    width: 30px; height: 30px;
    border: 3px solid rgba(160,104,48,.3);
    border-radius: 50%;
    z-index: 2;
}
.guinea-scene .rosette:nth-child(1) { top: 220px; left: 30px; }
.guinea-scene .rosette:nth-child(2) { top: 250px; right: 30px; }
.guinea-scene .body  { background: #C4884D; border-radius: 50%; height: 290px; }
.guinea-scene .foot  { background: #A06830; height: 50px; border-radius: 50%; }
.guinea-scene .foot::after { background: #B07840; }
.guinea-scene .foot .toes,
.guinea-scene .foot .toes::after,
.guinea-scene .foot .toes::before { background: #B07840; }
.guinea-scene .hand,
.guinea-scene .hand::after,
.guinea-scene .hand::before { background: #A06830; }
.guinea-scene .login-card h2 { color: #8B5E2B; }
.guinea-scene .btn-login { background: linear-gradient(135deg, #C4884D 0%, #A06830 100%); }

/* ============================================================
   HORSE
   ============================================================ */
.horse-scene .face { background: #8B5A2C; width: 170px; height: 230px; border-radius: 45%; }
.horse-scene .ear-horse {
    position: absolute;
    width: 28px; height: 55px;
    background: #8B5A2C;
    border-radius: 50% 50% 20% 20%;
    top: 10px;
    z-index: 5;
}
.horse-scene .ear-horse::after {
    content: '';
    position: absolute;
    width: 14px; height: 30px;
    background: #FFCCCC;
    border-radius: 50%;
    top: 10px; left: 7px;
}
.horse-scene .ear-horse.left  { left: 22px; transform: rotate(-12deg); }
.horse-scene .ear-horse.right { right: 22px; transform: rotate(12deg); }
.horse-scene .mane {
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    z-index: 6;
}
.horse-scene .mane span {
    display: block;
    width: 14px; height: 38px;
    background: #3a2a1a;
    border-radius: 0 0 50% 50%;
    position: absolute;
}
.horse-scene .mane span:nth-child(1) { left: -20px; transform: rotate(-15deg); height: 34px; }
.horse-scene .mane span:nth-child(2) { left: -6px; transform: rotate(-5deg); }
.horse-scene .mane span:nth-child(3) { left: 8px; transform: rotate(5deg); }
.horse-scene .mane span:nth-child(4) { left: 22px; transform: rotate(15deg); height: 34px; }
.horse-scene .eye-white { width: 28px; height: 32px; top: 80px; }
.horse-scene .eye-white.left  { left: 22px; }
.horse-scene .eye-white.right { right: 22px; }
.horse-scene .eye-ball::after { background: #2D1B00; width: 18px; height: 18px; }
.horse-scene .blaze {
    position: absolute;
    width: 30px; height: 90px;
    background: #fff;
    border-radius: 50%;
    top: 60px; left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}
.horse-scene .muzzle {
    position: absolute;
    width: 100px; height: 70px;
    background: #A87040;
    border-radius: 50%;
    bottom: -6px; left: 50%;
    transform: translateX(-50%);
    z-index: 55;
}
.horse-scene .nostril {
    position: absolute;
    width: 14px; height: 10px;
    background: #4a3020;
    border-radius: 50%;
    bottom: 18px;
    z-index: 56;
}
.horse-scene .nostril.left  { left: 52px; }
.horse-scene .nostril.right { right: 52px; }
.horse-scene .body  { background: #8B5A2C; }
.horse-scene .foot  { background: #3a2a1a; height: 100px; }
.horse-scene .foot::after { background: #4a3a2a; }
.horse-scene .foot .toes { display: none; }
.horse-scene .foot::before {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 72px; height: 20px;
    background: #2a1a0a;
    border-radius: 0 0 10px 10px;
}
.horse-scene .hand,
.horse-scene .hand::after,
.horse-scene .hand::before { background: #6B4020; }
.horse-scene .login-card h2 { color: #6B3E1A; }
.horse-scene .btn-login { background: linear-gradient(135deg, #8B5A2C 0%, #6B3E1A 100%); }

/* ============================================================
   DEER
   ============================================================ */
.deer-scene .face { background: #C8956A; }
.deer-scene .ear-deer {
    position: absolute;
    width: 55px; height: 40px;
    background: #C8956A;
    border-radius: 50%;
    top: 40px;
    z-index: 5;
}
.deer-scene .ear-deer::after {
    content: '';
    position: absolute;
    width: 34px; height: 24px;
    background: #FFD4B8;
    border-radius: 50%;
    top: 8px; left: 10px;
}
.deer-scene .ear-deer.left  { left: -30px; transform: rotate(-25deg); }
.deer-scene .ear-deer.right { right: -30px; transform: rotate(25deg); }
.deer-scene .eye-white { width: 36px; height: 36px; top: 70px; }
.deer-scene .eye-white.left  { left: 30px; }
.deer-scene .eye-white.right { right: 30px; }
.deer-scene .eye-ball::after { background: #3a1a0a; width: 22px; height: 22px; }
.deer-scene .chin-white {
    position: absolute;
    width: 80px; height: 60px;
    background: #FFF5EE;
    border-radius: 50%;
    bottom: -4px; left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}
.deer-scene .nose { width: 22px; height: 16px; bottom: 36px; background: #3a2a1a; border-radius: 50%; }
.deer-scene .mouth-deer {
    position: absolute;
    bottom: 22px; left: 50%;
    transform: translateX(-50%);
    width: 16px; height: 6px;
    border-bottom: 2px solid #8B6B4A;
    border-radius: 0 0 50% 50%;
    z-index: 55;
}
.deer-scene .spots { position: absolute; z-index: 3; }
.deer-scene .spots span {
    position: absolute;
    width: 12px; height: 12px;
    background: rgba(255,255,255,.35);
    border-radius: 50%;
}
.deer-scene .spots span:nth-child(1) { top: 230px; left: 20px; }
.deer-scene .spots span:nth-child(2) { top: 260px; left: 50px; }
.deer-scene .spots span:nth-child(3) { top: 240px; right: 20px; }
.deer-scene .spots span:nth-child(4) { top: 270px; right: 50px; }
.deer-scene .spots span:nth-child(5) { top: 225px; left: 80px; }
.deer-scene .spots span:nth-child(6) { top: 280px; left: 30px; }
.deer-scene .tail-deer {
    position: absolute;
    width: 18px; height: 24px;
    background: #C8956A;
    border-radius: 50%;
    top: 360px; left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}
.deer-scene .tail-deer::after {
    content: '';
    position: absolute;
    width: 14px; height: 16px;
    background: #fff;
    border-radius: 50%;
    bottom: -2px; left: 2px;
}
.deer-scene .body  { background: #C8956A; }
.deer-scene .foot  { background: #5C3A1E; height: 100px; }
.deer-scene .foot::after { display: none; }
.deer-scene .foot .toes { display: none; }
.deer-scene .foot::before {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 60px; height: 16px;
    background: #3a2a1a;
    border-radius: 0 0 8px 8px;
}
.deer-scene .hand,
.deer-scene .hand::after,
.deer-scene .hand::before { background: #A07550; }
.deer-scene .login-card h2 { color: #8B6038; }
.deer-scene .btn-login { background: linear-gradient(135deg, #C8956A 0%, #A07550 100%); }

/* ============================================================
   SQUIRREL
   ============================================================ */
.squirrel-scene .face { background: #CC6B33; }
.squirrel-scene .ear-sq {
    position: absolute;
    width: 28px; height: 32px;
    background: #CC6B33;
    border-radius: 50% 50% 40% 40%;
    top: 24px;
    z-index: 5;
}
.squirrel-scene .ear-sq::after {
    content: '';
    position: absolute;
    width: 16px; height: 18px;
    background: #FFD4B8;
    border-radius: 50%;
    top: 7px; left: 6px;
}
.squirrel-scene .ear-sq::before {
    content: '';
    position: absolute;
    width: 6px; height: 14px;
    background: #CC6B33;
    border-radius: 50%;
    top: -8px; left: 11px;
}
.squirrel-scene .ear-sq.left  { left: 12px; }
.squirrel-scene .ear-sq.right { right: 12px; }
.squirrel-scene .eye-white { width: 32px; height: 32px; top: 68px; }
.squirrel-scene .eye-white.left  { left: 30px; }
.squirrel-scene .eye-white.right { right: 30px; }
.squirrel-scene .eye-ball::after { background: #1a1a2e; }
.squirrel-scene .face-cream {
    position: absolute;
    width: 100px; height: 70px;
    background: #FAEBD7;
    border-radius: 50%;
    bottom: 4px; left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}
.squirrel-scene .nose { width: 12px; height: 10px; bottom: 44px; background: #3a2a1a; border-radius: 50%; }
.squirrel-scene .teeth {
    position: absolute;
    bottom: 26px; left: 50%;
    transform: translateX(-50%);
    z-index: 56;
    display: flex; gap: 2px;
}
.squirrel-scene .teeth span {
    display: block;
    width: 6px; height: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0 0 2px 2px;
}
.squirrel-scene .tail-sq {
    position: absolute;
    width: 80px; height: 180px;
    background: radial-gradient(ellipse at 40% 50%, #D47838 0%, #CC6B33 50%, #A04E1C 100%);
    border-radius: 60% 80% 20% 40%;
    top: 60px; right: -70px;
    transform: rotate(-30deg);
    transform-origin: bottom left;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.squirrel-scene .tail-sq::after {
    content: '';
    position: absolute;
    width: 65px; height: 80px;
    background: radial-gradient(ellipse at 50% 50%, #D47838, #B85A25);
    border-radius: 70% 50% 50% 60%;
    top: -40px; right: -10px;
    transform: rotate(25deg);
}
.squirrel-scene .tail-sq::before {
    content: '';
    position: absolute;
    width: 60px; height: 70px;
    background: radial-gradient(ellipse at 50% 50%, #E8955A, #CC6B33);
    border-radius: 50%;
    top: 30px; right: -8px;
    transform: rotate(10deg);
    z-index: -1;
}
.squirrel-scene .chest-sq {
    position: absolute;
    width: 130px; height: 140px;
    background: #FAEBD7;
    border-radius: 50%;
    top: 230px; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
.squirrel-scene .body  { background: #CC6B33; }
.squirrel-scene .foot  { background: #8B4520; height: 70px; }
.squirrel-scene .foot::after { background: #9B5530; }
.squirrel-scene .foot .toes,
.squirrel-scene .foot .toes::after,
.squirrel-scene .foot .toes::before { background: #9B5530; }
.squirrel-scene .hand,
.squirrel-scene .hand::after,
.squirrel-scene .hand::before { background: #8B4520; }
.squirrel-scene .login-card h2 { color: #8B4520; }
.squirrel-scene .btn-login { background: linear-gradient(135deg, #CC6B33 0%, #A05520 100%); }

/* ============================================================
   PARROT
   ============================================================ */
.parrot-scene .face { background: #4CAF50; width: 180px; height: 180px; }
.parrot-scene .forehead {
    position: absolute;
    width: 100px; height: 30px;
    background: linear-gradient(180deg, #E53935 0%, #C62828 100%);
    border-radius: 50% 50% 40% 40%;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}
.parrot-scene .forehead::before {
    content: '';
    position: absolute;
    width: 60px; height: 14px;
    background: #FDD835;
    border-radius: 50%;
    bottom: -4px; left: 50%;
    transform: translateX(-50%);
}
.parrot-scene .forehead::after {
    content: '';
    position: absolute;
    width: 30px; height: 20px;
    background: #E53935;
    border-radius: 50% 50% 0 0;
    top: -12px; left: 50%;
    transform: translateX(-50%);
}
.parrot-scene .eye-ring-p {
    position: absolute;
    width: 38px; height: 38px;
    background: #fff;
    border-radius: 50%;
    top: 58px;
    z-index: 20;
}
.parrot-scene .eye-ring-p.left  { left: 22px; }
.parrot-scene .eye-ring-p.right { right: 22px; }
.parrot-scene .eye-white { width: 30px; height: 30px; top: 62px; z-index: 30; }
.parrot-scene .eye-white.left  { left: 26px; }
.parrot-scene .eye-white.right { right: 26px; }
.parrot-scene .eye-ball::after { background: #1a1a2e; }

/* Parrot nose (small triangular beak) */
.parrot-scene .nose {
    position: absolute;
    width: 16px; height: 14px;
    background: #2D2D2D;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    bottom: 36px; left: 50%;
    transform: translateX(-50%);
    z-index: 56;
}

/* Mohawk — five colourful spikes above the head */
.parrot-scene .mohawk {
    position: absolute;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 3px;
    z-index: 60;
}
.parrot-scene .mohawk span {
    display: block;
    width: 10px;
    border-radius: 40% 40% 0 0;
    transform-origin: bottom center;
}
.parrot-scene .mohawk span:nth-child(1) { height: 28px; background: #E53935; transform: rotate(-18deg); }
.parrot-scene .mohawk span:nth-child(2) { height: 38px; background: #FDD835; transform: rotate(-8deg); }
.parrot-scene .mohawk span:nth-child(3) { height: 44px; background: #1E88E5; }
.parrot-scene .mohawk span:nth-child(4) { height: 38px; background: #43A047; transform: rotate(8deg); }
.parrot-scene .mohawk span:nth-child(5) { height: 28px; background: #FF9800; transform: rotate(18deg); }
.parrot-scene .wing-mark { position: absolute; z-index: 3; }
.parrot-scene .wing-mark.left {
    top: 240px; left: -10px;
    width: 45px; height: 100px;
    background: #1E88E5;
    border-radius: 50%;
    transform: rotate(10deg);
}
.parrot-scene .wing-mark.right {
    top: 240px; right: -10px;
    width: 45px; height: 100px;
    background: #1E88E5;
    border-radius: 50%;
    transform: rotate(-10deg);
}
.parrot-scene .wing-mark::after {
    content: '';
    position: absolute;
    width: 30px; height: 60px;
    background: #FDD835;
    border-radius: 50%;
    bottom: 5px; left: 8px;
}
.parrot-scene .tail-parrot {
    position: absolute;
    top: 370px; left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}
.parrot-scene .tail-parrot span {
    position: absolute;
    width: 10px; height: 50px;
    background: #E53935;
    border-radius: 0 0 50% 50%;
}
.parrot-scene .tail-parrot span:nth-child(1) { left: -14px; transform: rotate(-8deg); }
.parrot-scene .tail-parrot span:nth-child(2) { left: 0px; }
.parrot-scene .tail-parrot span:nth-child(3) { left: 14px; transform: rotate(8deg); }
.parrot-scene .body  { background: #4CAF50; }
.parrot-scene .foot  { background: #5D4037; height: 50px; border-radius: 50%; }
.parrot-scene .foot::after { background: #6D5047; }
.parrot-scene .foot .toes,
.parrot-scene .foot .toes::after,
.parrot-scene .foot .toes::before { background: #6D5047; }
.parrot-scene .hand,
.parrot-scene .hand::after,
.parrot-scene .hand::before { background: #388E3C; }
.parrot-scene .login-card h2 { color: #2E7D32; }
.parrot-scene .btn-login { background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%); }

/* ============================================================
   TORTOISE
   ============================================================ */
.tortoise-scene .face {
    background: #8B9E6B;
    width: 140px;
    height: 140px;
    transition: transform 0.5s cubic-bezier(.34, 1.56, .64, 1);
}
.tortoise-scene .eye-white { width: 22px; height: 22px; top: 48px; }
.tortoise-scene .eye-white.left  { left: 22px; }
.tortoise-scene .eye-white.right { right: 22px; }
.tortoise-scene .eye-ball::after { background: #1a1a2e; width: 14px; height: 14px; }
.tortoise-scene .beak-tort {
    position: absolute;
    width: 22px; height: 14px;
    background: #9E8B5A;
    border-radius: 0 0 50% 50%;
    bottom: 26px; left: 50%;
    transform: translateX(-50%);
    z-index: 55;
}
.tortoise-scene .neck {
    position: absolute;
    width: 80px; height: 50px;
    background: #8B9E6B;
    border-radius: 50%;
    top: 165px; left: 50%;
    transform: translateX(-50%);
    transition: transform 0.5s cubic-bezier(.34, 1.56, .64, 1);
    z-index: 3;
}

/* Tortoise peek-a-boo: head pops out of shell */
.tortoise-scene .creature.tortoise-peek .face {
    transform: translateY(-30px);
}
.tortoise-scene .creature.tortoise-peek .neck {
    transform: translateX(-50%) translateY(-20px);
}
.tortoise-scene .body {
    background: #6B5B33;
    border-radius: 50%;
    height: 290px;
    width: 270px;
    left: -30px;
    top: 190px;
}
.tortoise-scene .shell-pattern {
    position: absolute;
    top: 210px; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 220px; height: 160px;
}
.tortoise-scene .shell-pattern span {
    position: absolute;
    border: 2px solid rgba(139,110,70,.4);
    border-radius: 50%;
}
.tortoise-scene .shell-pattern span:nth-child(1) { width: 50px; height: 45px; top: 20px; left: 30px; }
.tortoise-scene .shell-pattern span:nth-child(2) { width: 55px; height: 50px; top: 15px; left: 85px; }
.tortoise-scene .shell-pattern span:nth-child(3) { width: 50px; height: 45px; top: 20px; right: 30px; }
.tortoise-scene .shell-pattern span:nth-child(4) { width: 45px; height: 40px; top: 60px; left: 55px; }
.tortoise-scene .shell-pattern span:nth-child(5) { width: 45px; height: 40px; top: 60px; right: 55px; }
.tortoise-scene .body::after {
    content: '';
    position: absolute;
    width: 140px; height: 80px;
    background: #7B6B43;
    border-radius: 50%;
    top: 30px; left: 50%;
    transform: translateX(-50%);
}
.tortoise-scene .foot  { background: #7B8B5B; height: 50px; width: 60px; border-radius: 50%; }
.tortoise-scene .foot::after { display: none; }
.tortoise-scene .foot .toes { display: none; }
.tortoise-scene .tail-tort {
    position: absolute;
    width: 14px; height: 18px;
    background: #8B9E6B;
    border-radius: 0 0 50% 50%;
    top: 440px; left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}
.tortoise-scene .hand,
.tortoise-scene .hand::after,
.tortoise-scene .hand::before { background: #7B8B5B; }
.tortoise-scene .login-card h2 { color: #5B6B3B; }
.tortoise-scene .btn-login { background: linear-gradient(135deg, #6B8B4A 0%, #5B6B3B 100%); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
    .fpa-login-animal {
        padding-bottom: 12px;
    }

    .creature {
        margin-top: 16px;
        transform: scale(.75);
        transform-origin: top center;
    }
    .login-card {
        transform: translateY(-118px);
        padding: 18px 24px;
        height: auto;
    }
    .login-card.up {
        transform: translateY(-178px);
    }
    .login-card.flipped {
        transform: translateY(-118px) rotateY(180deg);
    }
    .login-card.flipped.up {
        transform: translateY(-178px) rotateY(180deg);
    }
}
@media (max-width: 480px) {
    .creature {
        transform: scale(.6);
        transform-origin: top center;
    }
    .login-card {
        transform: translateY(-138px);
        padding: 14px 18px;
    }
    .login-card.up {
        transform: translateY(-192px);
    }
    .login-card.flipped {
        transform: translateY(-138px) rotateY(180deg);
    }
    .login-card.flipped.up {
        transform: translateY(-192px) rotateY(180deg);
    }
}

@media (max-width: 768px) and (max-height: 720px) {
    .creature {
        transform: scale(.67);
    }

    .login-card,
    .login-card.flipped {
        transform: translateY(-132px);
    }

    .login-card.up,
    .login-card.flipped.up {
        transform: translateY(-186px);
    }
}