/**
 * 🖥️ MASCOTTE CSS - Cyriaque.lol
 */

/* ===== CONTAINER ===== */
.mascotte-container {
    position: fixed;
    bottom: 20px;
    right: 40px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    /* Pour le drag physique */
    --drag-x: 0px;
    --drag-y: 0px;
    transform: translate(var(--drag-x), var(--drag-y));
    transition: none;
}

.mascotte-container.returning {
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* Rebond */
}

.mascotte-container.dragging {
    cursor: grabbing;
    transition: none !important;
}

/* Wrapper pour positionner la bulle correctement */
.mascotte-character {
    position: relative;
    transition: transform 0.15s ease;
}

/* Étirement pendant le drag */
.mascotte-container.dragging-up .mascotte-character {
    transform: scaleY(1.15) scaleX(0.9);
}
.mascotte-container.dragging-down .mascotte-character {
    transform: scaleY(0.85) scaleX(1.1);
}
.mascotte-container.dragging-left .mascotte-character {
    transform: scaleX(0.9) skewX(5deg);
}
.mascotte-container.dragging-right .mascotte-character {
    transform: scaleX(0.9) skewX(-5deg);
}

/* Écrasement à l'atterrissage */
.mascotte-container.landing .mascotte-character {
    animation: squash-land 0.4s ease;
}

@keyframes squash-land {
    0% { transform: scaleY(1) scaleX(1); }
    30% { transform: scaleY(0.7) scaleX(1.3); }
    50% { transform: scaleY(1.1) scaleX(0.95); }
    70% { transform: scaleY(0.95) scaleX(1.02); }
    100% { transform: scaleY(1) scaleX(1); }
}

.mascotte-container:hover:not(.dragging) {
    transform: translate(var(--drag-x), var(--drag-y)) scale(1.03);
}

.mascotte-container.shake .mascotte-character {
    animation: mascotte-shake 0.5s ease;
}

.mascotte-container.wiggle .mascotte-character {
    animation: mascotte-wiggle 0.4s ease;
}

/* Pas de wiggle pendant le drag */
.mascotte-container.dragging .mascotte-character {
    animation: none !important;
}

/* Cacher sur mobile/tablette */
@media (max-width: 900px) {
    .mascotte-container {
        display: none !important;
    }
}

/* ===== BULLE DE DIALOGUE ===== */
.mascotte-bubble {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px) scale(0.9);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #2d1f3d;
    padding: 12px 18px;
    border-radius: 16px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(100, 60, 140, 0.25);
    width: 200px;
    max-width: 200px;
    min-width: 120px;
    margin-bottom: 8px;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.4;
    white-space: normal;
}

.mascotte-bubble.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    pointer-events: auto;
}

.mascotte-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid rgba(255, 255, 255, 0.95);
}

/* Mode sombre - fond #20122B */
[data-theme="dark"] .mascotte-bubble,
html[data-theme="dark"] .mascotte-bubble {
    background: #20122B !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    color: #e8b4f8 !important;
    border: 1px solid rgba(100, 70, 130, 0.5) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .mascotte-bubble::after,
html[data-theme="dark"] .mascotte-bubble::after {
    border-top-color: #20122B !important;
}

/* ===== CHOIX ===== */
.mascotte-choices {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    justify-content: center;
}

.mascotte-choice {
    background: linear-gradient(135deg, rgba(200, 125, 255, 0.25), rgba(150, 80, 200, 0.25));
    border: 1px solid rgba(200, 125, 255, 0.5);
    color: #f0eaf5;
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.mascotte-choice:hover {
    background: linear-gradient(135deg, rgba(200, 125, 255, 0.45), rgba(150, 80, 200, 0.45));
    transform: scale(1.08);
    box-shadow: 0 4px 20px rgba(200, 125, 255, 0.4);
}

.mascotte-choice:active {
    transform: scale(0.95);
}

body:not(.dark-mode) .mascotte-choice {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.15), rgba(123, 31, 162, 0.15));
    border-color: rgba(156, 39, 176, 0.4);
    color: #1a1a2e;
}

body:not(.dark-mode) .mascotte-choice:hover {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.3), rgba(123, 31, 162, 0.3));
    box-shadow: 0 4px 20px rgba(156, 39, 176, 0.3);
}

/* ===== PERSONNAGE ===== */
.mascotte-character {
    position: relative;
    width: 180px;
    height: 180px;
}

.mascotte-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* ===== VISAGE ===== */
.mascotte-face {
    position: absolute;
    top: 28%;
    left: 27%;
    width: 40%;
    height: 26%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.eyes-container {
    display: flex;
    gap: 12px;
    margin-bottom: 3px;
    position: relative;
}

.eye {
    width: 24px;
    height: 24px;
    background: #1a1a2e;
    border-radius: 50%;
    position: relative;
    transition: all 0.15s ease;
    --pupil-x: 0px;
    --pupil-y: 0px;
}

.eye::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    background: white;
    border-radius: 50%;
    top: calc(4px + var(--pupil-y, 0px));
    right: calc(4px - var(--pupil-x, 0px));
    transition: all 0.1s ease;
}

.mouth {
    width: 14px;
    height: 7px;
    border-bottom: 3px solid #1a1a2e;
    border-radius: 0 0 10px 10px;
    transition: all 0.15s ease;
    position: relative;
}

/* ===== ANIMATIONS ===== */
@keyframes mascotte-shake {
    0%, 100% { transform: translateX(0) rotate(0); }
    20% { transform: translateX(-10px) rotate(-3deg); }
    40% { transform: translateX(10px) rotate(3deg); }
    60% { transform: translateX(-6px) rotate(-2deg); }
    80% { transform: translateX(6px) rotate(2deg); }
}

@keyframes mascotte-wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-6deg); }
    75% { transform: rotate(6deg); }
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.2); }
    30% { transform: scale(1); }
    45% { transform: scale(1.15); }
    60% { transform: scale(1); }
}

@keyframes star-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.3); }
}

@keyframes at-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rage-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

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

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 10px currentColor; }
    50% { box-shadow: 0 0 25px currentColor; }
}

@keyframes money-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.15); }
}

/* ===== EXPRESSIONS ===== */

/* NORMAL */
.expression-normal-1 .eye { }
.expression-normal-1 .mouth { }

.expression-normal-3 .mouth { border: none; width: 5px; height: 5px; background: #1a1a2e; border-radius: 50%; }

/* CONTENT */
.expression-happy-2 .eye { height: 7px; border-radius: 15px 15px 0 0; }
.expression-happy-2 .eye::after { display: none; }
.expression-happy-2 .mouth { width: 18px; height: 10px; }

.expression-happy-3 .eye { height: 5px; width: 26px; border-radius: 15px 15px 0 0; }
.expression-happy-3 .eye::after { display: none; }
.expression-happy-3 .mouth { width: 24px; height: 12px; border: 3px solid #1a1a2e; border-top: none; border-radius: 0 0 18px 18px; background: transparent; }

/* AMOUREUX */
.expression-love-1 .eye {
    width: 20px;
    height: 18px;
    background: transparent;
    border-radius: 0;
    animation: heartbeat 0.8s ease-in-out infinite;
}
.expression-love-1 .eye::before,
.expression-love-1 .eye::after {
    content: '';
    position: absolute;
    top: 0;
    width: 11px;
    height: 15px;
    background: #e74c3c;
    border-radius: 11px 11px 0 0;
}
.expression-love-1 .eye::before {
    left: 10px;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}
.expression-love-1 .eye::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}
.expression-love-1 .mouth { width: 20px; height: 9px; margin-top: 5px; }

/* SURPRIS */
.expression-surprised-1 .eye { width: 28px; height: 28px; }
.expression-surprised-1 .eye::after { width: 5px; height: 5px; }
.expression-surprised-1 .mouth { width: 12px; height: 12px; border: 3px solid #1a1a2e; border-radius: 50%; background: transparent; }

.expression-surprised-eyebrows .eye { width: 26px; height: 26px; }
.expression-surprised-eyebrows .eye::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 3px;
    background: #1a1a2e;
    border-radius: 2px;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
}
.expression-surprised-eyebrows .mouth { width: 14px; height: 14px; border: 3px solid #1a1a2e; border-radius: 50%; background: transparent; }

/* TRISTE */
.expression-sad-1 .eye::after { top: 10px; }
.expression-sad-1 .mouth { border-bottom: none; border-top: 3px solid #1a1a2e; border-radius: 12px 12px 0 0; }

.expression-sad-2 .eye::after { top: 12px; width: 5px; height: 5px; }
.expression-sad-2 .eye::before {
    content: '';
    position: absolute;
    width: 5px;
    height: 8px;
    background: #5dade2;
    border-radius: 0 0 5px 5px;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.8;
}
.expression-sad-2 .mouth { border-bottom: none; border-top: 3px solid #1a1a2e; border-radius: 10px 10px 0 0; width: 16px; }

.expression-sad-eyebrows .eye::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 3px;
    background: #1a1a2e;
    border-radius: 2px;
    top: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(-12deg);
}
.expression-sad-eyebrows .eye.right::before { transform: translateX(-50%) rotate(12deg); }
.expression-sad-eyebrows .mouth { border-bottom: none; border-top: 3px solid #1a1a2e; border-radius: 10px 10px 0 0; }

/* PLEURE */
.expression-crying-1 .eye::after { top: 10px; }
.expression-crying-1 .eye::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 12px;
    background: linear-gradient(to bottom, #6CB4EE, #4A90C2);
    border-radius: 0 0 4px 4px;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    animation: tearDrop 1s infinite;
}
.expression-crying-1 .mouth { border-bottom: none; border-top: 3px solid #1a1a2e; border-radius: 12px 12px 0 0; width: 14px; }

.expression-crying-2 .eye::after { top: 12px; width: 5px; height: 5px; }
.expression-crying-2 .eye::before {
    content: '';
    position: absolute;
    width: 5px;
    height: 16px;
    background: linear-gradient(to bottom, #6CB4EE, #4A90C2);
    border-radius: 0 0 5px 5px;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    animation: tearDrop 0.8s infinite;
}
.expression-crying-2 .mouth { 
    border-bottom: none; 
    border-top: 3px solid #1a1a2e; 
    border-radius: 10px 10px 0 0; 
    width: 18px;
    animation: tremble 0.1s infinite;
}

@keyframes tearDrop {
    0%, 100% { opacity: 0.8; height: 12px; }
    50% { opacity: 1; height: 16px; }
}

@keyframes tremble {
    0%, 100% { transform: translateX(-50%); }
    50% { transform: translateX(-48%); }
}

/* EN COLÈRE */
.expression-angry-1 .eye { clip-path: polygon(0 40%, 100% 0%, 100% 100%, 0% 100%); }
.expression-angry-1 .eye.left { clip-path: polygon(0 0%, 100% 40%, 100% 100%, 0% 100%); }
.expression-angry-1 .mouth { width: 16px; border-radius: 0 0 4px 4px; }

.expression-angry-2 .eye { clip-path: polygon(0 50%, 100% 0%, 100% 100%, 0% 100%); animation: rage-shake 0.3s ease infinite; }
.expression-angry-2 .eye.left { clip-path: polygon(0 0%, 100% 50%, 100% 100%, 0% 100%); }
.expression-angry-2 .eye::after { background: #e74c3c; }
.expression-angry-2 .mouth { width: 20px; height: 6px; border: 3px solid #1a1a2e; border-radius: 0; background: transparent; }

.expression-angry-3 .eye { width: 26px; height: 10px; border-radius: 0; }
.expression-angry-3 .eye::after { display: none; }
.expression-angry-3 .mouth { border: none; width: 16px; height: 3px; background: #1a1a2e; }

/* RAGE */
.expression-rage .eyes-container { animation: rage-shake 0.15s ease infinite; }
.expression-rage .eye { width: 8px; height: 8px; background: #e74c3c; box-shadow: 0 0 15px #e74c3c; }
.expression-rage .eye::after { display: none; }
.expression-rage .mouth { width: 26px; height: 10px; border: 3px solid #1a1a2e; border-radius: 0; background: #e74c3c; animation: rage-shake 0.15s ease infinite; }

/* EXCITÉ */
.expression-excited-2 .eye { background: transparent; }
.expression-excited-2 .eye::before {
    content: '★';
    position: absolute;
    font-size: 20px;
    color: #f1c40f;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: star-pulse 1.5s ease-in-out infinite;
}
.expression-excited-2 .eye::after { display: none; }
.expression-excited-2 .mouth { width: 22px; height: 12px; border: 3px solid #1a1a2e; border-top: none; border-radius: 0 0 18px 18px; background: transparent; }

.expression-excited-3 .eye { width: 28px; height: 28px; animation: shake 0.3s ease infinite; }
.expression-excited-3 .eye::after { width: 4px; height: 4px; }
.expression-excited-3 .mouth { width: 26px; height: 14px; border: 3px solid #1a1a2e; border-top: none; border-radius: 0 0 20px 20px; background: transparent; }

/* MINDBLOWN */
.expression-mindblown .eye {
    width: 28px;
    height: 28px;
    background: radial-gradient(circle, #ff6b6b 0%, #ee5a24 50%, #1a1a2e 70%);
    box-shadow: 0 0 15px rgba(238, 90, 36, 0.5);
}
.expression-mindblown .eye::after { display: none; }
.expression-mindblown .mouth { width: 16px; height: 16px; border: 3px solid #1a1a2e; border-radius: 50%; background: transparent; }

/* RÉFLÉCHIT */
.expression-thinking-1 .eye.right { width: 20px; height: 20px; }
.expression-thinking-1 .eye::after { top: 6px; right: 6px; }
.expression-thinking-1 .mouth { width: 10px; height: 6px; transform: translateX(6px); border-radius: 0 0 6px 6px; }

.expression-thinking-2 .eye.left::after { top: 2px; }
.expression-thinking-2 .eye.right::after { top: 8px; }
.expression-thinking-2 .mouth { border: none; width: 12px; height: 3px; background: #1a1a2e; border-radius: 2px; transform: rotate(-8deg); }

/* LOUCHE */
.expression-suspicious .eye.left { width: 26px; }
.expression-suspicious .eye.right { width: 16px; height: 16px; }
.expression-suspicious .eye::after { top: 8px; }
.expression-suspicious .mouth { width: 14px; transform: rotate(5deg) translateX(4px); }

/* FATIGUÉ */
.expression-tired-1 .eye { height: 10px; border-radius: 0 0 15px 15px; }
.expression-tired-1 .eye::after { top: 2px; width: 5px; height: 5px; }
.expression-tired-1 .mouth { border: none; width: 10px; height: 3px; background: #1a1a2e; border-radius: 2px; }

.expression-tired-2 .eye { height: 5px; width: 26px; border-radius: 0 0 12px 12px; }
.expression-tired-2 .eye::after { display: none; }
.expression-tired-2 .mouth { border: none; width: 14px; height: 3px; background: #1a1a2e; border-radius: 2px; }

/* LUNDI */
.expression-monday .eye { height: 7px; width: 24px; border-radius: 0 0 12px 12px; }
.expression-monday .eye::after { display: none; }
.expression-monday .eye::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 3px;
    background: #1a1a2e;
    border-radius: 2px;
    top: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(-8deg);
}
.expression-monday .eye.right::before { transform: translateX(-50%) rotate(8deg); }
.expression-monday .mouth { border-bottom: none; border-top: 3px solid #1a1a2e; border-radius: 8px 8px 0 0; width: 14px; }

/* CONFUS */
.expression-confused-2 .eye.left::after { top: 2px; }
.expression-confused-2 .eye.right::after { top: 10px; }
.expression-confused-2 .mouth::before {
    content: '?';
    position: absolute;
    font-size: 14px;
    color: #1a1a2e;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
}
.expression-confused-2 .mouth { border: none; }

/* IVRE */
.expression-dizzy .eye { width: 24px; height: 24px; background: transparent; }
.expression-dizzy .eye::before {
    content: '@';
    position: absolute;
    font-size: 18px;
    color: #1a1a2e;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: at-spin 1s linear infinite;
}
.expression-dizzy .eye::after { display: none; }
.expression-dizzy .mouth { width: 14px; height: 6px; transform: rotate(5deg); }

/* FIER */
.expression-proud-3 .eye { width: 6px; height: 20px; border-radius: 3px; }
.expression-proud-3 .eye::after { display: none; }
.expression-proud-3 .mouth { width: 24px; height: 8px; border: 3px solid #1a1a2e; border-top: none; border-radius: 0 0 12px 12px; background: transparent; }

/* SUFFISANT */
.expression-smug .eye.left { width: 22px; height: 20px; }
.expression-smug .eye.right { width: 18px; height: 16px; clip-path: polygon(0 25%, 100% 25%, 100% 100%, 0% 100%); }
.expression-smug .eye.right::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 3px;
    background: #1a1a2e;
    border-radius: 2px;
    top: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(10deg);
}
.expression-smug .eye::after { width: 5px; height: 5px; top: 5px; }
.expression-smug .mouth { width: 18px; height: 0; border-bottom: 3px solid #1a1a2e; border-radius: 0 0 6px 6px; transform: rotate(-8deg) translateX(3px); }

/* DIVA */
.expression-diva .eye { width: 20px; height: 16px; clip-path: polygon(0 30%, 100% 30%, 100% 100%, 0% 100%); }
.expression-diva .eye::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 3px;
    background: #1a1a2e;
    border-radius: 2px;
    top: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(6deg);
}
.expression-diva .eye.left::before { transform: translateX(-50%) rotate(-6deg); }
.expression-diva .eye::after { top: 5px; width: 5px; height: 5px; }
.expression-diva .mouth { width: 10px; height: 0; border-bottom: 3px solid #1a1a2e; border-radius: 0 0 5px 5px; transform: rotate(-8deg) translateX(5px); }

/* EFFRAYÉ */
.expression-scared-1 .eye { width: 14px; height: 24px; }
.expression-scared-1 .eye::after { width: 4px; height: 4px; top: 3px; }
.expression-scared-1 .mouth { width: 16px; height: 10px; border: 3px solid #1a1a2e; border-radius: 40%; background: transparent; }

.expression-scared-2 .eye { width: 24px; height: 28px; animation: shake 0.2s ease infinite; }
.expression-scared-2 .eye::after { width: 3px; height: 3px; }
.expression-scared-2 .mouth { width: 14px; height: 14px; border: 3px solid #1a1a2e; border-radius: 50%; background: transparent; animation: shake 0.2s ease infinite; }

/* MALICIEUX */
.expression-mischievous-1 .eye.right { width: 22px; height: 18px; }
.expression-mischievous-1 .eye.left { width: 24px; height: 22px; }
.expression-mischievous-1 .mouth { width: 18px; height: 0; border-bottom: 3px solid #1a1a2e; border-radius: 0 0 8px 8px; transform: rotate(-8deg) translateX(3px); }

.expression-mischievous-2 .eye { width: 20px; height: 16px; clip-path: polygon(0 20%, 100% 0%, 100% 100%, 0% 100%); }
.expression-mischievous-2 .eye.left { clip-path: polygon(0 0%, 100% 20%, 100% 100%, 0% 100%); }
.expression-mischievous-2 .eye::after { top: 5px; right: 3px; }
.expression-mischievous-2 .mouth { width: 16px; height: 0; border-bottom: 3px solid #1a1a2e; border-radius: 0 0 8px 8px; transform: rotate(-5deg); }

/* ENNUYÉ */
.expression-bored-1 .eye { width: 20px; height: 20px; }
.expression-bored-1 .eye::after { top: 8px; }
.expression-bored-1 .mouth { border: none; width: 12px; height: 3px; background: #1a1a2e; border-radius: 2px; }

.expression-bored-2 .eye { height: 12px; border-radius: 0 0 15px 15px; }
.expression-bored-2 .eye::after { top: 2px; width: 5px; height: 5px; }
.expression-bored-2 .mouth { border: none; width: 14px; height: 3px; background: #1a1a2e; border-radius: 2px; }

/* POKER FACE */
.expression-poker .eye::after { top: 8px; right: 8px; }
.expression-poker .mouth { border: none; width: 14px; height: 3px; background: #1a1a2e; border-radius: 2px; }

/* MALADE */
.expression-sick-1 .eye::after { top: 8px; }
.expression-sick-1 .mouth { border-bottom: none; border-top: 3px solid #1a1a2e; border-radius: 8px 8px 0 0; width: 12px; }

.expression-sick-2 .eye::after { background: #e74c3c; }
.expression-sick-2 .mouth { width: 14px; transform: rotate(5deg); }

.expression-sick-3 .eye { background: transparent; }
.expression-sick-3 .eye::before {
    content: '×';
    position: absolute;
    font-size: 24px;
    color: #27ae60;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.expression-sick-3 .eye::after { display: none; }
.expression-sick-3 .mouth { width: 14px; height: 8px; border: 3px solid #27ae60; border-top: none; border-radius: 0 0 12px 12px; background: transparent; }

/* KO */
.expression-ko .eye { background: transparent; }
.expression-ko .eye::before {
    content: '×';
    position: absolute;
    font-size: 20px;
    color: #1a1a2e;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.expression-ko .eye::after { display: none; }
.expression-ko .mouth { width: 14px; height: 6px; border: 3px solid #1a1a2e; border-top: none; border-radius: 0 0 12px 12px; background: transparent; }

/* CÉLÉBRATION */
.expression-celebrating-3 .eye { height: 5px; width: 24px; border-radius: 12px 12px 0 0; }
.expression-celebrating-3 .eye::after { display: none; }
.expression-celebrating-3 .eye::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 10px;
    background: #5dade2;
    border-radius: 0 0 6px 6px;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
}
.expression-celebrating-3 .mouth { width: 24px; height: 12px; border: 3px solid #1a1a2e; border-top: none; border-radius: 0 0 16px 16px; background: transparent; }

/* COUPABLE */
.expression-guilty .eye { width: 20px; height: 20px; }
.expression-guilty .eye.left::after { top: 3px; right: 8px; }
.expression-guilty .eye.right::after { top: 3px; right: 3px; }
.expression-guilty .mouth { width: 16px; height: 3px; background: #1a1a2e; border: none; border-radius: 2px; transform: rotate(5deg); }

/* INNOCENT */
.expression-innocent .eye { width: 28px; height: 28px; background: radial-gradient(circle at 30% 30%, white 15%, #1a1a2e 50%); }
.expression-innocent .eye::after { width: 8px; height: 8px; }
.expression-innocent .mouth { width: 6px; height: 3px; border-radius: 3px; background: #1a1a2e; border: none; }

/* JALOUX */
.expression-jealous .eye { background: #27ae60; }
.expression-jealous .eye::after { width: 5px; height: 5px; top: 6px; right: 6px; }
.expression-jealous .mouth { border: none; width: 12px; height: 3px; background: #1a1a2e; border-radius: 2px; }

/* ANGE */
.expression-angel .eye { width: 24px; height: 24px; background: radial-gradient(circle at 30% 30%, white 10%, #1a1a2e 45%); }
.expression-angel .eye::after { width: 8px; height: 8px; }
.expression-angel .mouth { width: 14px; height: 6px; }

/* LASER */
.expression-laser .eye { width: 24px; height: 14px; background: linear-gradient(90deg, #e74c3c, #ff6b6b); border-radius: 2px; box-shadow: 0 0 15px #e74c3c; }
.expression-laser .eye::after { display: none; }
.expression-laser .mouth { width: 12px; border-radius: 0 0 4px 4px; }

/* MONEY */
.expression-money .eye { background: transparent; }
.expression-money .eye::before {
    content: '$';
    position: absolute;
    font-size: 20px;
    color: #27ae60;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: money-pulse 0.5s ease infinite;
}
.expression-money .eye::after { display: none; }
.expression-money .mouth { width: 22px; height: 10px; border: 3px solid #1a1a2e; border-top: none; border-radius: 0 0 16px 16px; background: transparent; }

/* GELÉ */
.expression-frozen .eye { background: #5dade2; }
.expression-frozen .eye::after { background: #aed6f1; }
.expression-frozen .mouth { width: 14px; height: 3px; background: #5dade2; border: none; border-radius: 2px; }

/* IDÉE */
.expression-idea .eye { width: 26px; height: 26px; }
.expression-idea .eyes-container::before {
    content: '💡';
    position: absolute;
    font-size: 16px;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    animation: float 1s ease infinite;
}
.expression-idea .mouth { width: 10px; height: 10px; border: 3px solid #1a1a2e; border-radius: 50%; background: transparent; }

/* LOADING */
.expression-loading .eye {
    width: 24px;
    height: 24px;
    background: transparent;
    border: 3px solid rgba(26, 26, 46, 0.3);
    border-top-color: #1a1a2e;
    animation: spin-slow 1s linear infinite;
}
.expression-loading .eye::after { display: none; }
.expression-loading .mouth {
    border: none;
    display: flex;
    justify-content: center;
}
.expression-loading .mouth::before {
    content: 'Loading...';
    font-size: 6px;
    color: #1a1a2e;
}

/* NINJA */
.expression-ninja .eye { width: 28px; height: 10px; background: #1a1a2e; clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%); }
.expression-ninja .eye::after { width: 3px; height: 3px; top: 3px; right: 6px; }
.expression-ninja .mouth { display: none; }