:root {
    --app-vh: 100dvh;
    --app-vw: 100dvw;
    --text-main: #25304d;
    --text-dim: #4f5f86;

    --bg-a: #f7f1ff;
    --bg-b: #e8f6ff;

    --brow: #8d6aa8;
    --eye-ring: #8ea8ff;
    --eye-ring-soft: #c4d3ff;
    --eye-white: #ffffff;
    --pupil-a: #6d86f0;
    --pupil-b: #4867d9;

    --mouth: #7e5cd0;
    --tongue: #ffb7d8;
    --accent-listen: #38d9c7;
    --accent-think: #ffb84d;
    --accent-heart: #ff6fa3;
}

* { box-sizing: border-box; }

html,
body {
    width: 100%;
    min-height: 100%;
}

html.immersive-lock,
body.immersive-lock {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: #05070f;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

body {
    margin: 0;
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
    color: var(--text-main);
    background:
        radial-gradient(980px 480px at 10% 0%, rgba(255, 194, 230, 0.55) 0%, rgba(255, 194, 230, 0) 62%),
        radial-gradient(860px 520px at 90% 10%, rgba(182, 226, 255, 0.65) 0%, rgba(182, 226, 255, 0) 66%),
        linear-gradient(180deg, var(--bg-a) 0%, var(--bg-b) 100%);
}

.app-screen {
    width: 100%;
    min-height: var(--app-vh);
    display: grid;
    place-items: center;
    padding: clamp(14px, 2.8vw, 28px);
    background:
        radial-gradient(980px 480px at 10% 0%, rgba(255, 194, 230, 0.55) 0%, rgba(255, 194, 230, 0) 62%),
        radial-gradient(860px 520px at 90% 10%, rgba(182, 226, 255, 0.65) 0%, rgba(182, 226, 255, 0) 66%),
        linear-gradient(180deg, var(--bg-a) 0%, var(--bg-b) 100%);
}

.robot-stage {
    width: min(1100px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 2.4vw, 20px);
}

.robot-face {
    width: clamp(320px, 84vw, 940px);
    aspect-ratio: 16 / 10;
    position: relative;
    animation: hover-face 3.4s ease-in-out infinite;
    transition: transform 220ms ease, filter 220ms ease;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.face-shell,
.face-screen {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.3s ease;
}

.brows {
    position: absolute;
    width: 62%;
    left: 19%;
    top: clamp(18px, 3.6vw, 40px);
    display: flex;
    justify-content: space-between;
    animation: brows-breathe 2.8s ease-in-out infinite;
}

.brow {
    width: clamp(72px, 11vw, 120px);
    height: clamp(24px, 3.6vw, 38px);
    border-top: clamp(7px, 0.9vw, 11px) solid var(--brow);
    border-radius: 80% 80% 35% 35%;
    transform-origin: center;
    opacity: 0.92;
}

.brow.left { transform: rotate(-8deg); }
.brow.right { transform: rotate(8deg); }

.eyes {
    position: absolute;
    width: 82%;
    left: 9%;
    top: clamp(66px, 14vw, 156px);
    display: flex;
    justify-content: space-between;
}

.eye {
    width: 41%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: relative;
    border: clamp(5px, 0.7vw, 9px) solid var(--eye-ring);
    background: var(--eye-white);
    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, 0.72),
        0 12px 24px rgba(95, 118, 188, 0.2),
        0 0 0 8px rgba(196, 211, 255, 0.35);
    overflow: hidden;
    transition: all 200ms ease;
}

.eye::before,
.eye::after {
    content: "";
    position: absolute;
    width: clamp(16px, 2.2vw, 24px);
    height: clamp(4px, 0.65vw, 6px);
    border-radius: 999px;
    background: var(--brow);
    top: clamp(14px, 2.2vw, 20px);
    opacity: 0.8;
}

.eye:first-child::before { left: -7%; transform: rotate(-28deg); }
.eye:first-child::after { left: -5%; top: clamp(30px, 4vw, 40px); transform: rotate(-12deg); }
.eye:last-child::before { right: -7%; transform: rotate(28deg); }
.eye:last-child::after { right: -5%; top: clamp(30px, 4vw, 40px); transform: rotate(12deg); }

.eyeball {
    width: 84%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: absolute;
    left: 8%;
    top: 8%;
    background: linear-gradient(180deg, var(--pupil-a) 0%, var(--pupil-b) 100%);
    animation: look-around 6.4s infinite;
    transition: all 220ms ease;
}

.robot-face.eye-rainbow .eyeball {
    background: conic-gradient(from 20deg, #ff4d6d, #ffbd3d, #55d66b, #35c9ff, #815cff, #ff5bc7, #ff4d6d);
    animation: look-around 6.4s infinite, moco-eye-rainbow-shift 2.8s linear infinite;
}

.robot-face.eye-rainbow .eye {
    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, 0.72),
        0 12px 24px rgba(95, 118, 188, 0.2),
        0 0 0 9px rgba(255, 142, 198, 0.26);
}

.robot-face.eye-color-pop .eye {
    animation: moco-eye-color-pop 0.5s ease-out 1;
}

.eyeball::before,
.eyeball::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: #eaf4fb;
}

.eyeball::before {
    width: 22%;
    height: 22%;
    left: 21%;
    top: 16%;
}

.eyeball::after {
    width: 14%;
    height: 14%;
    right: 20%;
    top: 48%;
}

.sparkle {
    position: absolute;
    background: #fff;
    clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.78));
    z-index: 5;
    transition: opacity 180ms ease;
}

.sparkle.one {
    width: 18%;
    aspect-ratio: 1 / 1;
    left: 22%;
    bottom: 23%;
}

.sparkle.two {
    width: 12%;
    aspect-ratio: 1 / 1;
    right: 21%;
    bottom: 16%;
}

.lid {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    background: rgba(233, 239, 255, 0.98);
    transform: scaleY(0);
    animation: blink 5.3s infinite;
    z-index: 8;
}

.lid.top { top: 0; transform-origin: top; }
.lid.bottom { bottom: 0; transform-origin: bottom; }

.mouth-wrap {
    position: absolute;
    left: 50%;
    bottom: clamp(22px, 3.8vw, 46px);
    transform: translateX(-50%);
    width: clamp(66px, 9.8vw, 108px);
    height: clamp(42px, 6.2vw, 68px);
}

.mouth {
    position: absolute;
    inset: 0;
    border: 0;
    transform-origin: center;
    transition: all 180ms ease;
}

.mouth::before,
.mouth::after {
    content: "";
    position: absolute;
}

.mouth::before {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    height: 82%;
    border: clamp(4px, 0.55vw, 6px) solid var(--mouth);
    border-top: 0;
    border-radius: 0 0 999px 999px;
}

.mouth::after {
    left: 50%;
    bottom: clamp(3px, 0.35vw, 5px);
    transform: translateX(-50%);
    width: 40%;
    height: 46%;
    border: clamp(2px, 0.35vw, 4px) solid var(--mouth);
    border-top: 0;
    border-radius: 0 0 999px 999px;
    background: var(--tongue);
}

/* Expressions */
.robot-face.happy .sparkle { animation: twinkle 1.8s ease-in-out infinite; }

.robot-face.mood-happy {
    filter: drop-shadow(0 0 14px rgba(255, 150, 205, 0.22));
}

.robot-face.mood-curious {
    --eye-ring-soft: #b7e7ff;
}

.robot-face.mood-curious .eye {
    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, 0.72),
        0 12px 24px rgba(95, 118, 188, 0.2),
        0 0 0 8px rgba(130, 210, 255, 0.24);
}

.robot-face.mood-sleepy {
    animation-duration: 4.8s;
    filter: drop-shadow(0 0 12px rgba(118, 132, 192, 0.22)) saturate(0.88);
}

.robot-face.mood-sleepy .brows {
    opacity: 0.72;
}

.robot-face.mood-sleepy .lid {
    animation-duration: 3.6s;
}

.robot-face.mood-playful .sparkle {
    animation: twinkle 0.7s ease-in-out infinite;
}

.robot-face.mood-proud .face-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 26% 63%, rgba(255, 151, 196, 0.16), rgba(255, 151, 196, 0) 15%),
        radial-gradient(circle at 74% 63%, rgba(255, 151, 196, 0.16), rgba(255, 151, 196, 0) 15%);
    z-index: 1;
}

.robot-face.curious {
    animation: moco-curious-tilt 2.4s ease-in-out infinite;
    filter: drop-shadow(0 0 16px rgba(64, 176, 220, 0.34));
}

.robot-face.curious::after {
    content: "?";
    position: absolute;
    right: 6%;
    top: 4%;
    color: #4a7ee8;
    font-size: clamp(30px, 7vw, 76px);
    font-weight: 900;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    animation: moco-question-float 1.8s ease-out infinite;
    filter: drop-shadow(0 8px 12px rgba(74, 126, 232, 0.22));
}

.robot-face.curious .brow.left { transform: rotate(-18deg) translateY(3px); }
.robot-face.curious .brow.right { transform: rotate(-2deg) translateY(-10px); }
.robot-face.curious .eye { transform: scale(1.04); }
.robot-face.curious .eyeball { animation-duration: 3.2s; transform: translate(6%, -4%); }
.robot-face.curious .mouth {
    width: 72%;
    height: 70%;
    left: 14%;
    top: 10%;
}

.robot-face.surprised {
    animation: moco-surprise-pop 1.35s ease-out infinite;
    filter: drop-shadow(0 0 22px rgba(255, 177, 73, 0.48));
}

.robot-face.surprised::after {
    content: "";
    position: absolute;
    inset: -7%;
    border: clamp(3px, 0.5vw, 7px) solid rgba(255, 184, 77, 0.46);
    border-radius: 45%;
    opacity: 0;
    pointer-events: none;
    animation: moco-surprise-ring 1.35s ease-out infinite;
}

.robot-face.surprised .brow.left { transform: rotate(-2deg) translateY(-10px); }
.robot-face.surprised .brow.right { transform: rotate(2deg) translateY(-10px); }
.robot-face.surprised .eye {
    transform: scale(1.07);
    border-color: #ffbd5c;
}
.robot-face.surprised .eyeball {
    width: 72%;
    left: 14%;
    top: 14%;
    animation: none;
}
.robot-face.surprised .mouth {
    width: 54%;
    height: 66%;
    left: 23%;
    top: 10%;
}
.robot-face.surprised .mouth::before {
    height: 100%;
    border: clamp(4px, 0.55vw, 6px) solid var(--mouth);
    border-radius: 50%;
}
.robot-face.surprised .mouth::after { opacity: 0; }

.robot-face.proud {
    animation: moco-proud-lift 2.2s ease-in-out infinite;
    filter: drop-shadow(0 0 18px rgba(255, 111, 163, 0.36));
}

.robot-face.proud .face-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 26% 62%, rgba(255, 151, 196, 0.25), rgba(255, 151, 196, 0) 16%),
        radial-gradient(circle at 74% 62%, rgba(255, 151, 196, 0.25), rgba(255, 151, 196, 0) 16%);
    z-index: 1;
}

.robot-face.proud .face-screen::after {
    content: "";
    position: absolute;
    inset: -4%;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 22%, rgba(255, 255, 255, 0.95) 0 2%, transparent 3%),
        radial-gradient(circle at 82% 28%, rgba(255, 255, 255, 0.9) 0 1.8%, transparent 2.8%),
        radial-gradient(circle at 52% 10%, rgba(255, 214, 102, 0.9) 0 1.8%, transparent 3%),
        radial-gradient(circle at 38% 78%, rgba(255, 255, 255, 0.9) 0 1.5%, transparent 2.5%);
    animation: moco-proud-sparkles 1.6s ease-in-out infinite;
    z-index: 13;
}

.robot-face.proud .brows { transform: translateY(-7px); }
.robot-face.proud .eye { border-color: #ff9dc8; }
.robot-face.proud .eyeball {
    transform: translateY(-4%) scale(0.96, 0.82);
    animation: none;
}
.robot-face.proud .sparkle { animation: twinkle 0.9s ease-in-out infinite; }

.robot-face.gentle {
    animation: moco-gentle-breathe 4.2s ease-in-out infinite;
    filter: drop-shadow(0 0 16px rgba(118, 174, 202, 0.26)) saturate(0.94);
}

.robot-face.gentle .face-screen {
    background: radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 46%);
}

.robot-face.gentle .brows {
    opacity: 0.72;
    transform: translateY(6px);
    animation-duration: 4s;
}
.robot-face.gentle .eye {
    transform: scale(0.96, 0.88);
    border-color: #a9c8ef;
    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, 0.72),
        0 10px 20px rgba(95, 118, 188, 0.14),
        0 0 0 8px rgba(169, 200, 239, 0.2);
}
.robot-face.gentle .eyeball { animation-duration: 7.5s; opacity: 0.86; }
.robot-face.gentle .mouth {
    width: 58%;
    height: 52%;
    left: 21%;
    top: 24%;
}

.robot-face.playful {
    animation: moco-playful-wiggle 0.72s ease-in-out 1, hover-face 3.4s ease-in-out 0.72s infinite;
    filter: drop-shadow(0 0 20px rgba(128, 98, 255, 0.42));
}

.robot-face.playful::after {
    content: "";
    position: absolute;
    inset: -5%;
    pointer-events: none;
    border-radius: 45%;
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.76) 49%, rgba(255, 255, 255, 0) 63%, transparent 100%);
    transform: translateX(-130%);
    animation: moco-playful-shine 0.9s ease-out 1;
}

.robot-face.playful .brows { animation-duration: 0.85s; }
.robot-face.playful .lid { animation: blink 1.25s infinite; }
.robot-face.playful .eye { border-color: #a18cff; }
.robot-face.playful .sparkle { animation: twinkle 0.55s ease-in-out infinite; }
.robot-face.playful .mouth { animation: talk-mouth 0.26s infinite ease-in-out; }

.robot-face.listening {
    transform: scale(1.03);
    filter: drop-shadow(0 0 18px rgba(56, 217, 199, 0.52));
}

.robot-face.listening .eye {
    border-color: #71f0df;
    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, 0.72),
        0 12px 24px rgba(95, 118, 188, 0.2),
        0 0 0 10px rgba(113, 240, 223, 0.26);
}

.robot-face.listening .eyeball { animation-duration: 2.2s; }
.robot-face.listening .brows { transform: translateY(2px); }

.robot-face.thinking {
    filter: drop-shadow(0 0 14px rgba(255, 184, 77, 0.42));
}

.robot-face.thinking .brow.left { transform: rotate(-18deg) translateY(5px); }
.robot-face.thinking .brow.right { transform: rotate(18deg) translateY(5px); }
.robot-face.thinking .eyeball { transform: translateY(-6%); }

.robot-face.thinking .mouth {
    width: 64%;
    height: 64%;
    left: 18%;
    top: 14%;
}

.robot-face.thinking .mouth::before {
    border-top: clamp(4px, 0.55vw, 6px) solid var(--mouth);
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
}

.robot-face.thinking .mouth::after { opacity: 0; }

.robot-face.talking .mouth { animation: talk-mouth 0.32s infinite ease-in-out; }
.robot-face.talking .mouth::after { animation: tongue-bounce 0.32s infinite ease-in-out; }
.robot-face.talking {
    filter: drop-shadow(0 0 16px rgba(84, 130, 230, 0.34));
}
.robot-face.talking .eye {
    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, 0.72),
        0 12px 24px rgba(95, 118, 188, 0.2),
        0 0 0 8px rgba(107, 145, 245, 0.25);
}

.robot-face.happy .mouth { animation: mouth-breathe 2.4s ease-in-out infinite; }

.robot-face.oops {
    animation: moco-oops-shake 0.38s ease-out 1;
    filter: drop-shadow(0 0 18px rgba(255, 116, 145, 0.38));
}

.robot-face.oops::after {
    content: "!";
    position: absolute;
    right: 9%;
    top: 7%;
    color: #e8537b;
    font-size: clamp(28px, 6vw, 68px);
    font-weight: 900;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    animation: moco-oops-mark 1.2s ease-out 1;
}

.robot-face.oops .brow.left { transform: rotate(10deg) translateY(8px); }
.robot-face.oops .brow.right { transform: rotate(-10deg) translateY(8px); }
.robot-face.oops .eye {
    transform: scale(0.96);
    border-color: #ff9db6;
}
.robot-face.oops .eyeball {
    transform: scale(0.84) translateY(7%);
    animation: none;
}
.robot-face.oops .mouth {
    width: 58%;
    height: 50%;
    left: 21%;
    top: 28%;
}
.robot-face.oops .mouth::before {
    border-top: clamp(4px, 0.55vw, 6px) solid #d95f86;
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
}
.robot-face.oops .mouth::after { opacity: 0; }

.robot-face.talking .mouth {
    animation: talk-mouth 0.32s infinite ease-in-out !important;
}

.robot-face.talking .mouth::after {
    opacity: 1;
    animation: tongue-bounce 0.32s infinite ease-in-out !important;
}

.robot-face.heart {
    filter: drop-shadow(0 0 16px rgba(255, 111, 163, 0.45));
}

.robot-face.heart .eyeball {
    left: 12%;
    top: 12%;
    width: 76%;
    background: linear-gradient(180deg, #ff9ac4 0%, #ff5e9a 100%);
    clip-path: polygon(50% 92%, 10% 52%, 10% 28%, 24% 12%, 40% 12%, 50% 24%, 60% 12%, 76% 12%, 90% 28%, 90% 52%);
}

.robot-face.heart .sparkle { opacity: 0; }

.robot-face.excited {
    transform: scale(1.04);
    filter: drop-shadow(0 0 20px rgba(156, 132, 255, 0.45));
}

.robot-face.excited .brows { animation-duration: 1.2s; }
.robot-face.excited .sparkle { animation: twinkle 0.7s ease-in-out infinite; }
.robot-face.excited .mouth { animation: talk-mouth 0.24s infinite ease-in-out; }

.robot-face.giggle {
    animation: moco-giggle-bounce 0.58s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(255, 143, 194, 0.42));
}

.robot-face.giggle .brows { transform: translateY(-4px); }
.robot-face.giggle .eye {
    transform: scale(0.98, 0.76);
    border-color: #ff9dc8;
}
.robot-face.giggle .eyeball {
    transform: translateY(12%) scale(0.9, 0.64);
    animation: none;
}
.robot-face.giggle .mouth {
    width: 82%;
    height: 74%;
    left: 9%;
    top: 7%;
    animation: moco-giggle-mouth 0.58s ease-in-out infinite;
}
.robot-face.giggle .mouth::before {
    height: 72%;
    border-color: #d95fca;
}

.robot-face.wink {
    animation: moco-wink-bob 2.2s ease-in-out infinite;
    filter: drop-shadow(0 0 18px rgba(128, 98, 255, 0.34));
}

.robot-face.wink::after {
    content: "";
    position: absolute;
    right: 6%;
    top: 12%;
    width: clamp(26px, 5vw, 58px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95) 0 12%, transparent 13%),
        conic-gradient(from 0deg, #ff8fc2, #ffd666, #71f0df, #a18cff, #ff8fc2);
    opacity: 0.86;
    transform: rotate(12deg);
    animation: moco-wink-badge 1.6s ease-in-out infinite;
}
.robot-face.wink .eye:first-child .lid.top,
.robot-face.wink .eye:first-child .lid.bottom {
    transform: scaleY(1);
    animation: none;
}
.robot-face.wink .eye:first-child .eyeball { opacity: 0; }
.robot-face.wink .eye:first-child {
    transform: scale(0.98, 0.42);
    border-color: #a18cff;
}
.robot-face.wink .eye:last-child {
    transform: scale(1.05);
    border-color: #a18cff;
}
.robot-face.wink .mouth {
    width: 74%;
    height: 64%;
    left: 13%;
    top: 16%;
    transform: rotate(-5deg);
}

.robot-face.starry {
    animation: moco-starry-float 1.9s ease-in-out infinite;
    filter: drop-shadow(0 0 24px rgba(255, 214, 102, 0.5));
}

.robot-face.starry::after {
    content: "";
    position: absolute;
    inset: -5%;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 24%, rgba(255, 214, 102, 0.95) 0 2.2%, transparent 3.4%),
        radial-gradient(circle at 78% 20%, rgba(255, 255, 255, 0.95) 0 1.8%, transparent 3%),
        radial-gradient(circle at 86% 58%, rgba(255, 214, 102, 0.9) 0 2.2%, transparent 3.4%),
        radial-gradient(circle at 30% 76%, rgba(255, 255, 255, 0.95) 0 1.8%, transparent 3%);
    animation: moco-starry-sparkle 0.9s ease-in-out infinite;
    z-index: 14;
}
.robot-face.starry .eyeball {
    background: #ffd85a;
    clip-path: polygon(50% 0%, 61% 34%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 34%);
    animation: moco-starry-eyes 1.2s ease-in-out infinite;
}
.robot-face.starry .eye { border-color: #ffd666; }
.robot-face.starry .sparkle { opacity: 0; }

.robot-face.confused {
    animation: moco-confused-sway 2.4s ease-in-out infinite;
    filter: drop-shadow(0 0 16px rgba(255, 184, 77, 0.36));
}

.robot-face.confused::after {
    content: "?";
    position: absolute;
    left: 7%;
    top: 8%;
    color: #ffad4d;
    font-size: clamp(28px, 6vw, 68px);
    font-weight: 900;
    opacity: 0.86;
    animation: moco-confused-mark 1.4s ease-in-out infinite;
}
.robot-face.confused .brow.left { transform: rotate(20deg) translateY(5px); }
.robot-face.confused .brow.right { transform: rotate(-22deg) translateY(-7px); }
.robot-face.confused .eye:first-child { transform: scale(1.02, 0.88); }
.robot-face.confused .eye:last-child { transform: scale(0.88, 1.04); }
.robot-face.confused .eyeball { animation-duration: 1.35s; }
.robot-face.confused .mouth {
    width: 58%;
    height: 52%;
    left: 21%;
    top: 24%;
    transform: rotate(4deg);
}
.robot-face.confused .mouth::before {
    border-top: clamp(4px, 0.55vw, 6px) solid var(--mouth);
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
}
.robot-face.confused .mouth::after { opacity: 0; }

.robot-face.shy {
    animation: moco-shy-hide 3.2s ease-in-out infinite;
    filter: drop-shadow(0 0 17px rgba(255, 143, 194, 0.34)) saturate(0.96);
}

.robot-face.shy .face-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 26% 63%, rgba(255, 111, 163, 0.28), rgba(255, 111, 163, 0) 15%),
        radial-gradient(circle at 74% 63%, rgba(255, 111, 163, 0.28), rgba(255, 111, 163, 0) 15%);
    z-index: 1;
}
.robot-face.shy .brows { opacity: 0.7; transform: translateY(8px); }
.robot-face.shy .eye {
    transform: scale(0.9, 0.68);
    border-color: #ffb1d3;
}
.robot-face.shy .eyeball {
    transform: translateY(14%) scale(0.8);
    animation: none;
}
.robot-face.shy .mouth {
    width: 50%;
    height: 42%;
    left: 25%;
    top: 30%;
}
.robot-face.shy .mouth::after { opacity: 0; }

.robot-face.celebrate {
    animation: moco-celebrate-pop 0.82s ease-in-out infinite;
    filter: drop-shadow(0 0 26px rgba(84, 214, 127, 0.42));
}

.robot-face.celebrate::after {
    content: "";
    position: absolute;
    inset: -2%;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 18%, rgba(113, 240, 223, 0.9) 0 1.3%, transparent 1.8%),
        radial-gradient(circle at 24% 8%, rgba(255, 214, 102, 0.9) 0 1.1%, transparent 1.7%),
        radial-gradient(circle at 78% 10%, rgba(255, 143, 194, 0.88) 0 1.2%, transparent 1.8%),
        radial-gradient(circle at 90% 24%, rgba(113, 240, 223, 0.82) 0 1.1%, transparent 1.7%),
        radial-gradient(circle at 10% 78%, rgba(255, 143, 194, 0.72) 0 1%, transparent 1.6%),
        radial-gradient(circle at 88% 78%, rgba(255, 214, 102, 0.78) 0 1.1%, transparent 1.7%);
    animation: moco-confetti-fall 1.2s ease-in-out infinite;
    z-index: 4;
}
.robot-face.celebrate .brows { animation-duration: 0.8s; }
.robot-face.celebrate .eye {
    border-color: #54d67f;
    transform: scale(1.04);
}
.robot-face.celebrate .mouth { animation: talk-mouth 0.2s infinite ease-in-out; }
.robot-face.celebrate .sparkle { animation: twinkle 0.45s ease-in-out infinite; }

.robot-face.love {
    animation: moco-love-pulse 1.15s ease-in-out infinite;
    filter: drop-shadow(0 0 22px rgba(255, 93, 153, 0.48));
}

.robot-face.love .eyeball {
    left: 12%;
    top: 12%;
    width: 76%;
    background: linear-gradient(180deg, #ff9ac4 0%, #ff5e9a 100%);
    clip-path: polygon(50% 92%, 10% 52%, 10% 28%, 24% 12%, 40% 12%, 50% 24%, 60% 12%, 76% 12%, 90% 28%, 90% 52%);
    animation: moco-love-heartbeat 0.8s ease-in-out infinite;
}
.robot-face.love::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 7%;
    width: clamp(24px, 5vw, 56px);
    height: clamp(24px, 5vw, 56px);
    background: linear-gradient(180deg, #ff9cc7, #ff5d99);
    transform: translateX(-50%) rotate(45deg);
    border-radius: 10px 10px 4px 10px;
    opacity: 0;
    animation: moco-love-float 1.4s ease-out infinite;
}
.robot-face.love::before {
    content: "";
    position: absolute;
    left: calc(50% - clamp(12px, 2.5vw, 28px));
    top: 7%;
    width: clamp(24px, 5vw, 56px);
    height: clamp(24px, 5vw, 56px);
    background: linear-gradient(180deg, #ff9cc7, #ff5d99);
    border-radius: 50%;
    opacity: 0;
    animation: moco-love-float 1.4s ease-out infinite;
}
.robot-face.love .sparkle { opacity: 0; }

.robot-face.sleepy-deep {
    animation: moco-sleep-breathe 3.8s ease-in-out infinite;
    filter: drop-shadow(0 0 16px rgba(120, 140, 210, 0.22)) saturate(0.78);
}

.robot-face.sleepy-deep::after {
    content: "Zzz";
    position: absolute;
    right: 6%;
    top: 7%;
    color: rgba(94, 111, 205, 0.92);
    font-size: clamp(24px, 5vw, 58px);
    font-weight: 900;
    animation: moco-sleepy-word 2s ease-in-out infinite;
}
.robot-face.sleepy-deep .brows { opacity: 0.56; transform: translateY(9px); }
.robot-face.sleepy-deep .eye {
    transform: scale(1, 0.18);
    border-color: #b8c3ee;
    background: rgba(255, 255, 255, 0.58);
}
.robot-face.sleepy-deep .eyeball,
.robot-face.sleepy-deep .sparkle {
    opacity: 0;
}
.robot-face.sleepy-deep .lid { animation: none; }
.robot-face.sleepy-deep .mouth {
    width: 52%;
    height: 50%;
    left: 24%;
    top: 24%;
}
.robot-face.sleepy-deep .mouth::before {
    height: 100%;
    border: clamp(4px, 0.55vw, 6px) solid #8c7acb;
    border-radius: 50%;
    opacity: 0.72;
}
.robot-face.sleepy-deep .mouth::after { opacity: 0; }

.robot-face.focus {
    animation: moco-focus-lock 2.2s ease-in-out infinite;
    filter: drop-shadow(0 0 19px rgba(84, 130, 230, 0.34));
}

.robot-face.focus .brow.left { transform: rotate(-4deg) translateY(8px); }
.robot-face.focus .brow.right { transform: rotate(4deg) translateY(8px); }
.robot-face.focus .eye {
    transform: scale(0.94, 1.04);
    border-color: #6ea4ff;
}
.robot-face.focus .eyeball {
    transform: scale(0.76);
    animation: moco-focus-scan 1.2s ease-in-out infinite;
}
.robot-face.focus .mouth {
    width: 46%;
    height: 36%;
    left: 27%;
    top: 34%;
}
.robot-face.focus .mouth::before {
    height: 0;
    bottom: 50%;
    border-top: clamp(4px, 0.55vw, 6px) solid var(--mouth);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 999px;
}
.robot-face.focus .mouth::after { opacity: 0; }

.robot-face.angry-soft {
    animation: moco-serious-pulse 1.4s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(255, 100, 122, 0.4)) saturate(1.08);
}

.robot-face.angry-soft .brow.left { transform: rotate(18deg) translateY(12px); }
.robot-face.angry-soft .brow.right { transform: rotate(-18deg) translateY(12px); }
.robot-face.angry-soft .eye {
    transform: scale(1, 0.82);
    border-color: #ff7a7a;
}
.robot-face.angry-soft .eyeball {
    transform: translateY(8%) scale(0.86);
    background: linear-gradient(180deg, #ff8a8a 0%, #df2f45 100%);
    animation: none;
}
.robot-face.angry-soft .mouth {
    width: 62%;
    height: 44%;
    left: 19%;
    top: 34%;
}
.robot-face.angry-soft .mouth::before {
    border-top: clamp(4px, 0.55vw, 6px) solid #df2f45;
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
}
.robot-face.angry-soft .mouth::after { opacity: 0; }

.robot-face.sleeping {
    animation: moco-sleep-breathe 3.2s ease-in-out infinite;
    filter: drop-shadow(0 0 18px rgba(120, 140, 210, 0.28)) saturate(0.82);
}

.robot-face.sleeping .brows {
    opacity: 0.62;
    transform: translateY(8px);
}

.robot-face.sleeping .eye {
    border-color: #b8c3ee;
    background: rgba(255, 255, 255, 0.66);
}

.robot-face.sleeping .eyeball,
.robot-face.sleeping .sparkle {
    opacity: 0;
}

.robot-face.sleeping .lid {
    animation: none;
}

.robot-face.sleeping .lid.top,
.robot-face.sleeping .lid.bottom {
    transform: scaleY(1);
}

.robot-face.sleeping .mouth {
    width: 62%;
    height: 54%;
    left: 19%;
    top: 20%;
}

.robot-face.sleeping .mouth::before {
    border-top: clamp(4px, 0.55vw, 6px) solid #8c7acb;
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
    opacity: 0.7;
}

.robot-face.sleeping .mouth::after {
    opacity: 0;
}

.robot-face.touch-happy {
    animation: moco-touch-pop 0.38s ease-out, hover-face 3.4s ease-in-out 0.38s infinite;
    filter: drop-shadow(0 0 20px rgba(255, 111, 163, 0.42));
}

.robot-face.touch-happy .eye {
    border-color: #ff9dc8;
    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, 0.82),
        0 12px 26px rgba(255, 111, 163, 0.2),
        0 0 0 10px rgba(255, 111, 163, 0.2),
        0 0 22px rgba(255, 255, 255, 0.95);
}

.robot-face.petting {
    animation: moco-petting 0.9s ease-in-out infinite;
    filter: drop-shadow(0 0 22px rgba(156, 132, 255, 0.45));
}

.robot-face.petting .face-screen::after {
    content: "";
    position: absolute;
    inset: -8%;
    border-radius: 45%;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.74) 48%, rgba(255, 255, 255, 0) 64%, transparent 100%);
    transform: translateX(-130%);
    animation: moco-shimmer 1.2s ease-in-out infinite;
    z-index: 12;
}

.robot-face.petting .sparkle {
    animation: twinkle 0.55s ease-in-out infinite;
}

.robot-face.annoyed {
    animation: moco-annoyed-shake 0.34s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0s 6;
    filter: drop-shadow(0 0 24px rgba(255, 64, 112, 0.58)) saturate(1.22) hue-rotate(-12deg);
}

.robot-face.annoyed .face-shell {
    animation: moco-annoyed-face-wobble 0.34s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0s 6;
}

.robot-face.annoyed .face-screen {
    background:
        radial-gradient(circle at 50% 28%, rgba(255, 107, 150, 0.34), rgba(255, 107, 150, 0) 44%);
}

.robot-face.annoyed .brow.left {
    transform: rotate(16deg) translateY(12px);
}

.robot-face.annoyed .brow.right {
    transform: rotate(-16deg) translateY(12px);
}

.robot-face.annoyed .eye {
    border-color: #ff6f9d;
    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, 0.72),
        0 12px 24px rgba(188, 95, 122, 0.22),
        0 0 0 10px rgba(255, 111, 157, 0.24);
}

.robot-face.annoyed .eyeball {
    transform: scale(0.86) translateY(8%);
    background: linear-gradient(180deg, #ff7a9d 0%, #e24172 100%);
}

.robot-face.annoyed .sparkle {
    opacity: 0.35;
}

.robot-face.annoyed .mouth {
    width: 72%;
    height: 54%;
    left: 14%;
    top: 28%;
}

.robot-face.annoyed .mouth::before {
    border-top: clamp(4px, 0.55vw, 6px) solid #e24172;
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
}

.robot-face.annoyed .mouth::after {
    opacity: 0;
}

.moco-touch-heart {
    position: fixed;
    left: var(--heart-x);
    top: var(--heart-y);
    width: clamp(20px, 4vw, 38px);
    height: clamp(20px, 4vw, 38px);
    pointer-events: none;
    z-index: 40;
    transform: translate(-50%, -50%) rotate(var(--heart-rotate));
    animation: moco-heart-float 1.15s ease-out forwards;
}

.moco-touch-heart::before,
.moco-touch-heart::after {
    content: "";
    position: absolute;
    width: 58%;
    height: 86%;
    left: 50%;
    top: 12%;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(180deg, #ff9cc7, #ff5d99);
    transform-origin: 0 100%;
    filter: drop-shadow(0 6px 8px rgba(255, 93, 153, 0.24));
}

.moco-touch-heart::before {
    transform: rotate(-45deg);
}

.moco-touch-heart::after {
    transform: rotate(45deg);
}

.moco-battery {
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.62);
    box-shadow: 0 10px 24px rgba(47, 65, 130, 0.16);
    color: #31406b;
    font-weight: 900;
    font-size: 0.82rem;
    line-height: 1;
    pointer-events: none;
}

.moco-battery-shell {
    position: relative;
    width: 34px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 5px;
    padding: 2px;
}

.moco-battery-shell::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 4px;
    width: 4px;
    height: 8px;
    border-radius: 0 3px 3px 0;
    background: currentColor;
}

.moco-battery-fill {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #43d98f, #38d9c7);
    transform-origin: left center;
    transform: scaleX(1);
    transition: transform 240ms linear, background 180ms ease;
}

.moco-battery.low .moco-battery-fill {
    background: linear-gradient(90deg, #ffb84d, #ff7a7a);
}

.moco-battery.empty .moco-battery-fill {
    background: #ff5d7e;
}

.app-screen.moco-rest-locked .ear-icon,
.app-screen.moco-rest-locked .listen-btn {
    opacity: 0.45 !important;
}

.app-screen.moco-rest-locked::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 8500;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.05), rgba(7, 11, 28, 0.34) 46%, rgba(4, 7, 18, 0.48) 100%),
        rgba(3, 6, 18, 0.26);
    animation: moco-sleep-dim-in 260ms ease both;
}

.moco-sleep-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: grid;
    place-items: end center;
    padding: 0 18px max(26px, env(safe-area-inset-bottom));
    pointer-events: none;
    opacity: 0;
    transition: opacity 220ms ease;
}

.moco-sleep-overlay.active {
    opacity: 1;
}

.moco-sleep-card {
    width: min(92vw, 430px);
    padding: 16px 18px;
    border-radius: 18px;
    text-align: center;
    color: #31406b;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.62);
    box-shadow: 0 16px 36px rgba(47, 65, 130, 0.2);
    backdrop-filter: blur(10px);
}

.moco-sleep-title {
    font-weight: 900;
    font-size: 1rem;
    margin-bottom: 5px;
}

.moco-sleep-text {
    font-size: 0.86rem;
    line-height: 1.35;
    color: rgba(49, 64, 107, 0.78);
}

.moco-sleep-countdown {
    margin-top: 8px;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    color: #6850b8;
}

.moco-sleep-zzz {
    position: fixed;
    left: min(65vw, calc(50vw + 210px));
    top: max(14vh, 72px);
    z-index: 8900;
    display: flex;
    align-items: flex-start;
    gap: 2px;
    color: rgba(94, 111, 205, 0.92);
    font-weight: 900;
    letter-spacing: 0;
    pointer-events: none;
    opacity: 0;
    filter: drop-shadow(0 6px 12px rgba(54, 70, 150, 0.2));
    transform: translate3d(0, 8px, 0);
}

.moco-sleep-zzz span {
    display: inline-block;
    animation: moco-sleep-zzz-float 2.1s ease-in-out infinite;
}

.moco-sleep-zzz span:nth-child(1) {
    font-size: clamp(1.05rem, 2.2vw, 1.6rem);
    animation-delay: 0s;
}

.moco-sleep-zzz span:nth-child(2) {
    font-size: clamp(1.35rem, 2.9vw, 2.1rem);
    animation-delay: 0.22s;
}

.moco-sleep-zzz span:nth-child(3) {
    font-size: clamp(1.72rem, 3.7vw, 2.7rem);
    animation-delay: 0.44s;
}

.app-screen.moco-rest-locked .moco-sleep-zzz {
    opacity: 1;
}

/* Status/UI */
.status-text {
    margin: 0;
    color: var(--text-dim);
    font-size: clamp(0.95rem, 1.9vw, 1.05rem);
    text-align: center;
}

.voice-note {
    margin: -6px 0 0;
    color: rgba(79, 97, 138, 0.82);
    font-size: 0.82rem;
    text-align: center;
}

.controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.listen-btn {
    border: 0;
    border-radius: 999px;
    padding: 13px 28px;
    font-size: clamp(0.95rem, 1.8vw, 1rem);
    font-weight: 700;
    background: linear-gradient(135deg, #ff8fc2 0%, #6ea4ff 100%);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(148, 109, 180, 0.3);
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.listen-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 24px rgba(148, 109, 180, 0.35);
}

.listen-btn:active { transform: translateY(0); }

.listen-btn.ghost {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(108, 139, 196, 0.35);
    color: #2d3d68;
    box-shadow: 0 8px 18px rgba(120, 145, 185, 0.2);
}

.listen-btn.ghost:hover { box-shadow: 0 10px 22px rgba(120, 145, 185, 0.32); }

.desktop-command-form {
    width: min(760px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.desktop-command-input {
    min-width: 0;
    border: 1px solid rgba(108, 139, 196, 0.35);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #2d3d68;
    font: inherit;
    font-size: 1rem;
    padding: 13px 18px;
    outline: none;
    box-shadow: 0 8px 18px rgba(120, 145, 185, 0.14);
}

.desktop-command-input:focus {
    border-color: rgba(104, 126, 232, 0.72);
    box-shadow: 0 0 0 4px rgba(104, 126, 232, 0.16), 0 8px 18px rgba(120, 145, 185, 0.18);
}

.desktop-command-input::placeholder {
    color: rgba(79, 97, 138, 0.72);
}

.desktop-command-btn {
    border: 0;
    border-radius: 999px;
    padding: 13px 22px;
    font-size: 1rem;
    font-weight: 800;
    background: #31406b;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(49, 64, 107, 0.22);
    transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}

.desktop-command-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(49, 64, 107, 0.3);
}

.desktop-command-btn:disabled,
.desktop-command-input:disabled {
    opacity: 0.58;
    cursor: not-allowed;
}

.transcript-box {
    width: min(760px, 100%);
    min-height: 56px;
    border-radius: 16px;
    border: 1px solid rgba(138, 165, 207, 0.35);
    background: rgba(255, 255, 255, 0.66);
    color: #34405f;
    padding: 12px 16px;
    backdrop-filter: blur(2px);
    line-height: 1.45;
}

.english-word-board {
    width: min(760px, 100%);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: -2px;
}

.english-word-board[hidden] {
    display: none !important;
}

.english-word-label {
    color: rgba(79, 97, 138, 0.86);
    font-size: 0.88rem;
    font-weight: 700;
}

.english-word-chip {
    min-width: 84px;
    border-radius: 14px;
    border: 1px solid rgba(255, 143, 194, 0.38);
    background: rgba(255, 255, 255, 0.88);
    color: #223053;
    padding: 10px 16px;
    text-align: center;
    font-size: clamp(1.35rem, 4vw, 2.15rem);
    font-weight: 900;
    line-height: 1.05;
    box-shadow: 0 10px 24px rgba(120, 145, 185, 0.18);
}

/* Fullscreen */
.app-screen.immersive-mode {
    position: fixed;
    inset: 0;
    z-index: 9999;
    width: var(--app-vw);
    height: var(--app-vh);
    min-height: 0;
    padding: 0;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #05070f;
    touch-action: none;
}

.app-screen.immersive-mode:fullscreen {
    width: 100vw;
    height: 100vh;
}

.app-screen:fullscreen::backdrop,
.app-screen:-webkit-full-screen::backdrop {
    background: #05070f;
}

.app-screen.immersive-mode .robot-stage {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    gap: 0;
    overflow: hidden;
}

.app-screen.immersive-mode .robot-face {
    width: min(96vw, 96dvw, calc(var(--app-vh) * 1.55));
    max-width: none;
    margin: 0;
    aspect-ratio: 16 / 10;
    animation: hover-face 3.4s ease-in-out infinite;
}

.app-screen.immersive-mode .face-shell,
.app-screen.immersive-mode .face-screen {
    transform: none !important;
}

.app-screen.immersive-mode .status-text,
.app-screen.immersive-mode .voice-note,
.app-screen.immersive-mode .controls,
.app-screen.immersive-mode .desktop-command-form,
.app-screen.immersive-mode .transcript-box,
.app-screen.immersive-mode .english-word-board {
    display: none !important;
}

.app-screen.immersive-mode.portrait-immersive .robot-stage {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--app-vh);
    height: var(--app-vw);
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
}

.app-screen.immersive-mode.portrait-immersive .robot-face {
    width: min(calc(var(--app-vh) * 0.96), calc(var(--app-vw) * 1.55));
}

@media (orientation: landscape) {
    .app-screen.immersive-mode .robot-face {
        width: min(calc(var(--app-vw) * 0.96), calc(var(--app-vh) * 1.55));
    }
}

/* Animations */
@keyframes blink {
    0%, 42%, 46%, 48%, 100% { transform: scaleY(0); }
    44%, 47% { transform: scaleY(1); }
}

@keyframes look-around {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(8%, -2%); }
    50% { transform: translate(-5%, 6%); }
    75% { transform: translate(4%, -5%); }
}

@keyframes moco-eye-rainbow-shift {
    0% { filter: hue-rotate(0deg) saturate(1.14); }
    100% { filter: hue-rotate(360deg) saturate(1.14); }
}

@keyframes moco-eye-color-pop {
    0%, 100% { transform: scale(1); }
    42% { transform: scale(1.055); }
}

@keyframes talk-mouth {
    0%, 100% { transform: scale(0.94, 0.88); }
    50% { transform: scale(1.06, 1.14); }
}

@keyframes tongue-bounce {
    0%, 100% { transform: translateX(-50%) scaleY(0.88); }
    50% { transform: translateX(-50%) scaleY(1.12); }
}

@keyframes twinkle {
    0%, 100% { opacity: 0.84; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.16); }
}

@keyframes hover-face {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes brows-breathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(2px); }
}

@keyframes mouth-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04, 0.98); }
}

@keyframes moco-curious-tilt {
    0%, 100% { transform: translateY(0) rotate(-1.2deg); }
    50% { transform: translateY(-4px) rotate(2.2deg); }
}

@keyframes moco-question-float {
    0% { opacity: 0; transform: translateY(12px) scale(0.82) rotate(-8deg); }
    24% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-34px) scale(1.08) rotate(8deg); }
}

@keyframes moco-surprise-pop {
    0%, 100% { transform: translateY(0) scale(1); }
    18% { transform: translateY(-13px) scale(1.035); }
    34% { transform: translateY(0) scale(1); }
}

@keyframes moco-surprise-ring {
    0% { opacity: 0.65; transform: scale(0.86); }
    70% { opacity: 0; transform: scale(1.08); }
    100% { opacity: 0; transform: scale(1.08); }
}

@keyframes moco-proud-lift {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-7px) scale(1.008); }
}

@keyframes moco-proud-sparkles {
    0%, 100% { opacity: 0.45; transform: scale(0.96); }
    50% { opacity: 1; transform: scale(1.02); }
}

@keyframes moco-gentle-breathe {
    0%, 100% { transform: translateY(0) scale(0.996); }
    50% { transform: translateY(3px) scale(1.002); }
}

@keyframes moco-playful-wiggle {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    20% { transform: translateY(-7px) rotate(-4deg) scale(1.018); }
    48% { transform: translateY(-3px) rotate(4deg) scale(1.012); }
    72% { transform: translateY(-5px) rotate(-2deg) scale(1.01); }
}

@keyframes moco-playful-shine {
    0% { opacity: 0; transform: translateX(-135%) rotate(-7deg); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translateX(135%) rotate(-7deg); }
}

@keyframes moco-oops-shake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    20% { transform: translateX(-9px) rotate(-1.5deg); }
    42% { transform: translateX(8px) rotate(1.3deg); }
    64% { transform: translateX(-5px) rotate(-0.8deg); }
}

@keyframes moco-oops-mark {
    0% { opacity: 0; transform: translateY(10px) scale(0.82); }
    24% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-20px) scale(1.06); }
}

@keyframes moco-sleep-breathe {
    0%, 100% { transform: translateY(0) scale(0.992); }
    50% { transform: translateY(4px) scale(1.004); }
}

@keyframes moco-sleep-dim-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes moco-sleep-zzz-float {
    0% { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.86); }
    20% { opacity: 1; }
    68% { opacity: 0.92; }
    100% { opacity: 0; transform: translate3d(12px, -28px, 0) scale(1.08); }
}

@keyframes moco-touch-pop {
    0% { transform: scale(1); }
    42% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

@keyframes moco-heart-float {
    0% { opacity: 0; transform: translate(-50%, -20%) scale(0.72) rotate(var(--heart-rotate)); }
    18% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--heart-drift)), -150%) scale(1.2) rotate(var(--heart-rotate)); }
}

@keyframes moco-annoyed-shake {
    0%, 100% { transform: translateX(0) rotate(0deg) scale(1); }
    15% { transform: translateX(-18px) rotate(-3.2deg) scale(1.01); }
    30% { transform: translateX(16px) rotate(2.8deg) scale(1.012); }
    45% { transform: translateX(-13px) rotate(-2.4deg) scale(1.006); }
    60% { transform: translateX(11px) rotate(2deg) scale(1.008); }
    75% { transform: translateX(-7px) rotate(-1.4deg) scale(1.004); }
}

@keyframes moco-annoyed-face-wobble {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    20% { transform: translateX(8px) rotate(1.8deg); }
    40% { transform: translateX(-7px) rotate(-1.6deg); }
    60% { transform: translateX(5px) rotate(1.2deg); }
    80% { transform: translateX(-4px) rotate(-0.9deg); }
}

@keyframes moco-petting {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.015); }
}

@keyframes moco-shimmer {
    0% { transform: translateX(-135%) rotate(-5deg); opacity: 0; }
    22% { opacity: 1; }
    70% { opacity: 0.85; }
    100% { transform: translateX(135%) rotate(-5deg); opacity: 0; }
}

@keyframes moco-giggle-bounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(-8px) rotate(-1.8deg); }
    62% { transform: translateY(-3px) rotate(1.5deg); }
}

@keyframes moco-giggle-mouth {
    0%, 100% { transform: scale(0.96, 0.86); }
    50% { transform: scale(1.08, 1.12); }
}

@keyframes moco-wink-bob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-4px) rotate(-1.2deg); }
}

@keyframes moco-wink-badge {
    0%, 100% { transform: translateY(0) rotate(12deg) scale(0.96); }
    50% { transform: translateY(-8px) rotate(-8deg) scale(1.05); }
}

@keyframes moco-starry-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.012); }
}

@keyframes moco-starry-sparkle {
    0%, 100% { opacity: 0.55; transform: scale(0.96) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.04) rotate(8deg); }
}

@keyframes moco-starry-eyes {
    0%, 100% { transform: scale(0.92) rotate(-4deg); }
    50% { transform: scale(1.04) rotate(5deg); }
}

@keyframes moco-confused-sway {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-3px) rotate(2deg); }
}

@keyframes moco-confused-mark {
    0%, 100% { transform: translateY(0) rotate(-8deg) scale(0.94); opacity: 0.64; }
    50% { transform: translateY(-9px) rotate(8deg) scale(1.08); opacity: 1; }
}

@keyframes moco-shy-hide {
    0%, 100% { transform: translateY(0) scale(0.996); }
    50% { transform: translateY(5px) scale(0.988); }
}

@keyframes moco-celebrate-pop {
    0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
    35% { transform: translateY(-11px) scale(1.025) rotate(-1.8deg); }
    70% { transform: translateY(-4px) scale(1.01) rotate(1.8deg); }
}

@keyframes moco-confetti-fall {
    0% { transform: translateY(-10px); opacity: 0.6; }
    50% { opacity: 1; }
    100% { transform: translateY(18px); opacity: 0.55; }
}

@keyframes moco-love-pulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.018); }
}

@keyframes moco-love-heartbeat {
    0%, 100% { transform: scale(1); }
    38% { transform: scale(1.12); }
    62% { transform: scale(0.98); }
}

@keyframes moco-love-float {
    0% { opacity: 0; transform: translate(-50%, 14px) rotate(45deg) scale(0.72); }
    24% { opacity: 0.92; }
    100% { opacity: 0; transform: translate(-50%, -38px) rotate(45deg) scale(1.16); }
}

@keyframes moco-sleepy-word {
    0%, 100% { opacity: 0; transform: translateY(12px) scale(0.84); }
    28% { opacity: 1; }
    78% { opacity: 0.72; }
}

@keyframes moco-focus-lock {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes moco-focus-scan {
    0%, 100% { transform: translate(-7%, 0) scale(0.76); }
    50% { transform: translate(7%, 0) scale(0.76); }
}

@keyframes moco-serious-pulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.006); }
}

/* Responsive */
@media (max-width: 900px) {
    .robot-face { width: min(96vw, 880px); }
    .eyes { width: 84%; left: 8%; }
}

@media (max-width: 640px) {
    .robot-face { aspect-ratio: 4 / 3; }
    .brows { width: 72%; left: 14%; top: 16px; }
    .eyes { width: 88%; left: 6%; top: 58px; }
    .mouth-wrap { bottom: 20px; }

    .listen-btn {
        width: 100%;
        max-width: 340px;
    }

    .transcript-box { font-size: 0.95rem; }
    .english-word-chip {
        min-width: 72px;
        padding: 9px 13px;
    }
}

@media (max-width: 900px), (pointer: coarse) {
    .desktop-command-form {
        display: none !important;
    }
}

.app-screen.pwa-app-mode .desktop-command-form,
.app-screen.landscape-game-mode .desktop-command-form {
    display: none !important;
}

/* Admin (unchanged) */
.admin-screen {
    min-height: 100vh;
    color: #eff6ff;
    background: radial-gradient(circle at top, #111a2c 0%, #05070f 55%);
}

.admin-card {
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: linear-gradient(180deg, rgba(18, 27, 43, 0.95) 0%, rgba(11, 17, 28, 0.95) 100%);
    color: #edf6ff;
}

.form-control,
.form-control:focus,
.form-select,
.form-select:focus,
textarea.form-control,
textarea.form-control:focus {
    background-color: rgba(11, 19, 33, 0.95);
    color: #eff6ff;
    border-color: rgba(255, 255, 255, 0.15);
}

 /* New Magic CSS */
.robot-face.dancing {
    animation: dance-wiggle 0.8s ease-in-out infinite;
}
@keyframes dance-wiggle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-15px) rotate(-6deg); }
    75% { transform: translateY(-15px) rotate(6deg); }
}

.robot-face.spin-magic {
    animation: spin-crazy 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
@keyframes spin-crazy {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.4) rotate(360deg); }
    100% { transform: scale(1) rotate(720deg); }
}

.ear-icon {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    color: #38d9c7;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: auto;
    z-index: 10000;
    filter: drop-shadow(0 0 8px rgba(56, 217, 199, 0.6));
    display: none;
    place-items: center;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.app-screen.pwa-app-mode .ear-icon,
.app-screen.immersive-mode .ear-icon {
    display: grid;
    opacity: 0.86;
}
.app-screen.pwa-app-mode .ear-icon.active,
.app-screen.immersive-mode .ear-icon.active {
    opacity: 1;
    color: #fff;
    background: #38d9c7;
    animation: pulse-ear 1.5s infinite;
}
@keyframes pulse-ear {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(56, 217, 199, 0.6)); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 16px rgba(56, 217, 199, 0.9)); }
}

/* Final fullscreen guard: keep the whole face visible even when mobile browser bars remain. */
.app-screen.immersive-mode {
    background: #05070f !important;
}

.app-screen.immersive-mode .robot-face {
    width: min(calc(var(--app-vw) * 0.90), calc(var(--app-vh) * 1.24)) !important;
    aspect-ratio: 16 / 10 !important;
    max-width: none !important;
    max-height: calc(var(--app-vh) * 0.78) !important;
    margin: 0 !important;
}

.app-screen.immersive-mode.portrait-immersive .robot-face {
    width: min(calc(var(--app-vh) * 0.90), calc(var(--app-vw) * 1.24)) !important;
    max-height: calc(var(--app-vw) * 0.78) !important;
}

.app-screen.immersive-mode .brows {
    top: 8%;
}

.app-screen.immersive-mode .eyes {
    top: 28%;
}

.app-screen.immersive-mode .mouth-wrap {
    bottom: 6%;
}

.moco-install-prompt[hidden] {
    display: none !important;
}

.moco-install-prompt {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    align-items: end;
    justify-items: center;
    padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: rgba(5, 7, 15, 0.68);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: auto;
}


.moco-install-panel {
    width: min(100%, 560px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    color: #263456;
    box-shadow: 0 18px 36px rgba(61, 78, 140, 0.22);
    pointer-events: auto;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.moco-install-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: block;
    box-shadow: 0 6px 14px rgba(80, 92, 150, 0.16);
}

.moco-install-copy {
    min-width: 0;
}

.moco-install-title {
    font-size: 0.98rem;
    line-height: 1.2;
    font-weight: 800;
}

.moco-install-text {
    margin-top: 2px;
    font-size: 0.82rem;
    line-height: 1.28;
    color: #536184;
}

.moco-install-primary {
    min-height: 40px;
    border: 0;
    border-radius: 8px;
    padding: 0 12px;
    font: inherit;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.moco-install-primary {
    color: #ffffff;
    background: #304279;
    box-shadow: 0 8px 18px rgba(48, 66, 121, 0.2);
}

.moco-install-primary:disabled {
    opacity: 0.78;
    cursor: default;
    background: #5a668f;
    box-shadow: none;
}

.app-screen.pwa-app-mode .moco-install-prompt {
    display: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .moco-install-prompt {
        display: none !important;
    }
}

@media (max-width: 560px) {
    .moco-install-panel {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .moco-install-icon {
        width: 44px;
        height: 44px;
    }

    .moco-install-primary {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* v1.0.5 robot-screen redesign: keep the app background, redraw Moco as a compact robot display. */
.robot-face {
    width: clamp(300px, 58vw, 660px);
    aspect-ratio: 1.65 / 1;
}

.face-shell {
    display: grid;
    place-items: center;
    border-radius: 34% / 42%;
    background:
        radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 32%),
        linear-gradient(145deg, #f7fbff 0%, #dce7f0 48%, #aebfce 100%);
    box-shadow:
        inset 0 12px 22px rgba(255, 255, 255, 0.78),
        inset 0 -16px 26px rgba(102, 129, 154, 0.28),
        0 26px 48px rgba(55, 78, 115, 0.24);
}

.face-shell::before,
.face-shell::after {
    content: "";
    position: absolute;
    top: 31%;
    width: 8%;
    height: 34%;
    border-radius: 45% / 35%;
    background:
        radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.65), transparent 28%),
        linear-gradient(180deg, #b8cfdf 0%, #7f9cb4 100%);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.36),
        0 8px 18px rgba(42, 70, 100, 0.22);
    z-index: -1;
}

.face-shell::before { left: -4.5%; }
.face-shell::after { right: -4.5%; }

.face-screen {
    width: 82%;
    height: 64%;
    overflow: hidden;
    border-radius: 26% / 34%;
    background:
        radial-gradient(circle at 28% 24%, rgba(61, 242, 255, 0.16), transparent 28%),
        radial-gradient(circle at 72% 58%, rgba(95, 137, 255, 0.12), transparent 34%),
        linear-gradient(180deg, #11233a 0%, #071522 100%);
    box-shadow:
        inset 0 0 0 clamp(5px, 0.8vw, 10px) rgba(167, 199, 218, 0.34),
        inset 0 8px 18px rgba(255, 255, 255, 0.08),
        inset 0 -12px 22px rgba(0, 0, 0, 0.3);
}

.face-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 42%);
    z-index: 0;
}

.brows {
    width: 48%;
    left: 26%;
    top: 21%;
    z-index: 5;
}

.brow {
    width: clamp(34px, 6vw, 74px);
    height: clamp(12px, 1.7vw, 20px);
    border-top-width: clamp(3px, 0.42vw, 5px);
    border-color: #6df4ff;
    box-shadow: 0 0 12px rgba(64, 230, 255, 0.55);
    opacity: 0.92;
}

.eyes {
    width: 48%;
    left: 26%;
    top: 35%;
    z-index: 6;
}

.eye {
    width: 30%;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.eye::before,
.eye::after,
.lid {
    display: none;
}

.eyeball {
    width: clamp(18px, 4vw, 46px);
    height: clamp(18px, 4vw, 46px);
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 38% 34%, #bafcff 0 16%, #24e8ff 45%, #0fa8e9 100%);
    box-shadow:
        0 0 12px rgba(36, 232, 255, 0.9),
        0 0 28px rgba(36, 232, 255, 0.38);
    animation: moco-screen-eye-idle 4.8s ease-in-out infinite;
}

.eyeball::before,
.eyeball::after,
.sparkle {
    display: none;
}

.mouth-wrap {
    bottom: 21%;
    width: clamp(52px, 8vw, 96px);
    height: clamp(28px, 4vw, 48px);
    z-index: 7;
}

.mouth::before {
    width: 100%;
    height: 64%;
    border-width: clamp(3px, 0.42vw, 5px);
    border-color: #6df4ff;
    box-shadow: 0 0 12px rgba(64, 230, 255, 0.46);
}

.mouth::after {
    display: none;
}

.robot-face.happy .mouth::before,
.robot-face.gentle .mouth::before,
.robot-face.love .mouth::before,
.robot-face.celebrate .mouth::before,
.robot-face.giggle .mouth::before {
    border-color: #6df4ff;
    border-top: 0;
    border-bottom: clamp(3px, 0.42vw, 5px) solid #6df4ff;
    border-left: clamp(3px, 0.42vw, 5px) solid #6df4ff;
    border-right: clamp(3px, 0.42vw, 5px) solid #6df4ff;
    border-radius: 0 0 999px 999px;
}

.robot-face.talking .mouth::before,
.robot-face.playful .mouth::before,
.robot-face.excited .mouth::before {
    height: 74%;
    border: clamp(3px, 0.42vw, 5px) solid #6df4ff;
    border-radius: 50%;
}

.robot-face.curious .brow.left { transform: rotate(-16deg) translateY(4px); }
.robot-face.curious .brow.right { transform: rotate(16deg) translateY(-5px); }
.robot-face.confused .brow.left { transform: rotate(20deg) translateY(5px); }
.robot-face.confused .brow.right { transform: rotate(-22deg) translateY(-7px); }

.robot-face.curious .mouth::before,
.robot-face.confused .mouth::before,
.robot-face.oops .mouth::before,
.robot-face.angry-soft .mouth::before,
.robot-face.thinking .mouth::before {
    border-color: #6df4ff;
    border-top: clamp(3px, 0.42vw, 5px) solid #6df4ff;
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
}

.robot-face.surprised .eyeball {
    transform: translate(-50%, -50%) scale(1.25);
}

.robot-face.surprised .mouth::before,
.robot-face.sleepy-deep .mouth::before {
    height: 100%;
    border: clamp(3px, 0.42vw, 5px) solid #6df4ff;
    border-radius: 50%;
}

.robot-face.proud .eyeball,
.robot-face.starry .eyeball {
    background: #ffd85a;
    clip-path: polygon(50% 0%, 61% 34%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 34%);
    box-shadow: 0 0 14px rgba(255, 216, 90, 0.92), 0 0 30px rgba(255, 216, 90, 0.42);
}

.robot-face.heart .eyeball,
.robot-face.love .eyeball {
    width: clamp(22px, 4.5vw, 50px);
    height: clamp(22px, 4.5vw, 50px);
    background: linear-gradient(180deg, #ff7ba7 0%, #ff3f7e 100%);
    clip-path: polygon(50% 92%, 10% 52%, 10% 28%, 24% 12%, 40% 12%, 50% 24%, 60% 12%, 76% 12%, 90% 28%, 90% 52%);
    box-shadow: 0 0 16px rgba(255, 63, 126, 0.82), 0 0 30px rgba(255, 63, 126, 0.36);
}

.robot-face.sleeping .eye,
.robot-face.sleepy-deep .eye,
.robot-face.giggle .eye,
.robot-face.wink .eye:first-child {
    transform: none;
}

.robot-face.sleeping .eyeball,
.robot-face.sleepy-deep .eyeball,
.robot-face.giggle .eyeball,
.robot-face.wink .eye:first-child .eyeball,
.robot-face[data-moco-expression="sleeping"] .eyeball,
.robot-face[data-moco-expression="sleepy-deep"] .eyeball,
.robot-face[data-moco-expression="giggle"] .eyeball,
.robot-face[data-moco-expression="wink"] .eye:first-child .eyeball {
    width: clamp(30px, 6vw, 72px);
    height: 0;
    border-radius: 999px;
    border-top: clamp(4px, 0.55vw, 6px) solid #6df4ff;
    background: transparent;
    box-shadow: 0 0 12px rgba(64, 230, 255, 0.58);
    clip-path: none;
}

.robot-face.wink .eye:last-child .eyeball {
    transform: translate(-50%, -50%) scale(1.08);
}

.robot-face.focus .eyeball {
    width: clamp(42px, 7vw, 84px);
    height: clamp(8px, 1.2vw, 14px);
    border-radius: 999px;
    background: #6df4ff;
    box-shadow: 0 0 14px rgba(64, 230, 255, 0.66);
}

.robot-face.angry-soft .brow,
.robot-face.annoyed .brow {
    border-color: #ff4f86;
    box-shadow: 0 0 13px rgba(255, 79, 134, 0.62);
}

.robot-face.angry-soft .eyeball,
.robot-face.annoyed .eyeball {
    background: radial-gradient(circle at 38% 34%, #ffb0c5 0 16%, #ff4f86 48%, #d92f64 100%);
    box-shadow: 0 0 14px rgba(255, 79, 134, 0.88), 0 0 30px rgba(255, 79, 134, 0.35);
}

.robot-face.angry-soft .mouth::before,
.robot-face.annoyed .mouth::before {
    border-color: #ff4f86;
    border-top: clamp(3px, 0.42vw, 5px) solid #ff4f86;
    border-bottom: 0;
}

.robot-face.shy .face-screen::before,
.robot-face.proud .face-screen::before,
.robot-face.mood-proud .face-screen::before {
    background:
        radial-gradient(circle at 24% 66%, rgba(255, 105, 150, 0.22), transparent 14%),
        radial-gradient(circle at 76% 66%, rgba(255, 105, 150, 0.22), transparent 14%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 42%);
}

@keyframes moco-screen-eye-idle {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.18); }
}

/* Final expression cleanup: simple cute neon glyphs like the reference sheet. */
.robot-face .brows {
    width: 42%;
    left: 29%;
    top: 27%;
}

.robot-face .brow {
    width: clamp(32px, 5vw, 58px);
    height: clamp(10px, 1.4vw, 16px);
    border: 0;
    border-top: clamp(4px, 0.52vw, 6px) solid #56f1ff;
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(86, 241, 255, 0.72);
    opacity: 0.9;
}

.robot-face .eyes {
    width: 40%;
    left: 30%;
    top: 40%;
}

.robot-face .eye {
    width: 34%;
    aspect-ratio: 1 / 1;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
}

.robot-face .eye::before,
.robot-face .eye::after,
.robot-face .eyeball::before,
.robot-face .eyeball::after {
    display: none !important;
}

.robot-face .eyeball {
    width: clamp(18px, 3.2vw, 34px) !important;
    height: clamp(18px, 3.2vw, 34px) !important;
    left: 50% !important;
    top: 50% !important;
    border: 0 !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: radial-gradient(circle at 38% 32%, #c8ffff 0 14%, #43efff 42%, #14c4ff 100%) !important;
    box-shadow:
        0 0 10px rgba(67, 239, 255, 0.95),
        0 0 24px rgba(67, 239, 255, 0.38) !important;
    clip-path: none !important;
    opacity: 1 !important;
    animation: moco-screen-eye-idle 3.8s ease-in-out infinite !important;
}

.robot-face .mouth-wrap {
    bottom: 24%;
    width: clamp(48px, 7vw, 76px);
    height: clamp(26px, 3.8vw, 42px);
}

.robot-face .mouth::before {
    left: 50% !important;
    bottom: 8% !important;
    width: 100% !important;
    height: 58% !important;
    transform: translateX(-50%) !important;
    border: clamp(4px, 0.52vw, 6px) solid #56f1ff !important;
    border-top: 0 !important;
    border-radius: 0 0 999px 999px !important;
    background: transparent !important;
    box-shadow: 0 0 12px rgba(86, 241, 255, 0.62) !important;
    opacity: 1 !important;
}

.robot-face .mouth::after {
    display: none !important;
}

.robot-face.happy .brow.left,
.robot-face.gentle .brow.left { transform: rotate(-5deg); }
.robot-face.happy .brow.right,
.robot-face.gentle .brow.right { transform: rotate(5deg); }

.robot-face.happy .eyeball,
.robot-face[data-moco-expression="happy"] .eyeball {
    width: clamp(28px, 4.4vw, 52px) !important;
    height: clamp(16px, 2.4vw, 28px) !important;
    border: 0 !important;
    border-top: clamp(4px, 0.52vw, 6px) solid #56f1ff !important;
    border-radius: 999px 999px 0 0 !important;
    background: transparent !important;
    box-shadow: 0 -5px 12px rgba(86, 241, 255, 0.6) !important;
    transform: translate(-50%, -44%) !important;
}

.robot-face.happy .mouth-wrap,
.robot-face[data-moco-expression="happy"] .mouth-wrap {
    bottom: 22%;
}

.robot-face.happy .mouth::before,
.robot-face[data-moco-expression="happy"] .mouth::before {
    width: clamp(42px, 6vw, 66px) !important;
    height: 52% !important;
    border: clamp(4px, 0.52vw, 6px) solid #56f1ff !important;
    border-top: 0 !important;
    border-radius: 0 0 999px 999px !important;
    box-shadow: 0 5px 12px rgba(86, 241, 255, 0.58) !important;
}

.robot-face.giggle .eyeball,
.robot-face.sleeping .eyeball,
.robot-face.sleepy-deep .eyeball,
.robot-face.wink .eye:first-child .eyeball {
    width: clamp(30px, 5vw, 58px) !important;
    height: clamp(13px, 2vw, 22px) !important;
    border-radius: 0 !important;
    border-top: clamp(4px, 0.52vw, 6px) solid #56f1ff !important;
    background: transparent !important;
    box-shadow: 0 -3px 12px rgba(86, 241, 255, 0.62) !important;
    transform: translate(-50%, -50%) !important;
}

.robot-face.giggle .mouth::before,
.robot-face.celebrate .mouth::before {
    height: 68% !important;
    width: 112% !important;
}

.robot-face.heart .eyeball,
.robot-face.love .eyeball,
.robot-face[data-moco-expression="heart"] .eyeball,
.robot-face[data-moco-expression="love"] .eyeball {
    width: clamp(26px, 4.4vw, 48px) !important;
    height: clamp(26px, 4.4vw, 48px) !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, #ff7eb0 0%, #ff3f82 100%) !important;
    clip-path: polygon(50% 92%, 10% 52%, 10% 28%, 24% 12%, 40% 12%, 50% 24%, 60% 12%, 76% 12%, 90% 28%, 90% 52%) !important;
    box-shadow:
        0 0 12px rgba(255, 80, 142, 0.95),
        0 0 26px rgba(255, 80, 142, 0.45) !important;
}

.robot-face.proud .eyeball,
.robot-face.starry .eyeball,
.robot-face[data-moco-expression="proud"] .eyeball,
.robot-face[data-moco-expression="starry"] .eyeball {
    width: clamp(26px, 4.4vw, 48px) !important;
    height: clamp(26px, 4.4vw, 48px) !important;
    border-radius: 0 !important;
    background: #ffd85a !important;
    clip-path: polygon(50% 0%, 61% 34%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 34%) !important;
    box-shadow:
        0 0 12px rgba(255, 216, 90, 0.95),
        0 0 26px rgba(255, 216, 90, 0.42) !important;
}

.robot-face.focus .eyeball,
.robot-face[data-moco-expression="focus"] .eyeball {
    width: clamp(34px, 5vw, 58px) !important;
    height: 0 !important;
    border-radius: 999px !important;
    border-top: clamp(4px, 0.52vw, 6px) solid #56f1ff !important;
    background: transparent !important;
    box-shadow: 0 0 12px rgba(86, 241, 255, 0.62) !important;
}

.robot-face.surprised .eyeball,
.robot-face[data-moco-expression="surprised"] .eyeball {
    transform: translate(-50%, -50%) scale(1.18) !important;
}

.robot-face.curious .brow.left,
.robot-face.confused .brow.left,
.robot-face[data-moco-expression="curious"] .brow.left,
.robot-face[data-moco-expression="confused"] .brow.left { transform: rotate(-18deg) translateY(3px) !important; }
.robot-face.curious .brow.right,
.robot-face.confused .brow.right,
.robot-face[data-moco-expression="curious"] .brow.right,
.robot-face[data-moco-expression="confused"] .brow.right { transform: rotate(16deg) translateY(-4px) !important; }

.robot-face.confused .mouth::before,
.robot-face.oops .mouth::before,
.robot-face.thinking .mouth::before,
.robot-face[data-moco-expression="confused"] .mouth::before,
.robot-face[data-moco-expression="oops"] .mouth::before,
.robot-face[data-moco-expression="thinking"] .mouth::before {
    border: clamp(4px, 0.52vw, 6px) solid #56f1ff !important;
    border-bottom: 0 !important;
    border-radius: 999px 999px 0 0 !important;
    bottom: 25% !important;
}

.robot-face.angry-soft .brow,
.robot-face.annoyed .brow,
.robot-face[data-moco-expression="angry-soft"] .brow {
    border-top-color: #ff4f86 !important;
    box-shadow: 0 0 12px rgba(255, 79, 134, 0.75) !important;
}

.robot-face.angry-soft .brow.left,
.robot-face.annoyed .brow.left,
.robot-face[data-moco-expression="angry-soft"] .brow.left { transform: rotate(20deg) translateY(7px) !important; }
.robot-face.angry-soft .brow.right,
.robot-face.annoyed .brow.right,
.robot-face[data-moco-expression="angry-soft"] .brow.right { transform: rotate(-20deg) translateY(7px) !important; }

.robot-face.angry-soft .eyeball,
.robot-face.annoyed .eyeball,
.robot-face[data-moco-expression="angry-soft"] .eyeball {
    background: radial-gradient(circle at 38% 32%, #ffafc8 0 14%, #ff4f86 42%, #d92f64 100%) !important;
    box-shadow:
        0 0 12px rgba(255, 79, 134, 0.95),
        0 0 24px rgba(255, 79, 134, 0.42) !important;
}

.robot-face.angry-soft .mouth::before,
.robot-face.annoyed .mouth::before,
.robot-face[data-moco-expression="angry-soft"] .mouth::before {
    border: clamp(4px, 0.52vw, 6px) solid #ff4f86 !important;
    border-bottom: 0 !important;
    border-radius: 999px 999px 0 0 !important;
    bottom: 25% !important;
}

.robot-face.talking .mouth {
    animation: moco-screen-talk-mouth 0.24s ease-in-out infinite !important;
}

.robot-face.talking .eyeball {
    animation-duration: 2.2s !important;
}

.robot-face.curious::after,
.robot-face.confused::after,
.robot-face.oops::after,
.robot-face.sleepy-deep::after {
    content: none !important;
    display: none !important;
}

@keyframes moco-screen-talk-mouth {
    0%, 100% { transform: scale(0.94, 0.86); }
    50% { transform: scale(1.08, 1.18); }
}

/* Fix line-eye expressions: keep eyes and mouth separated and intentional. */
.robot-face.giggle .eyeball,
.robot-face.sleeping .eyeball,
.robot-face.sleepy-deep .eyeball,
.robot-face[data-moco-expression="giggle"] .eyeball,
.robot-face[data-moco-expression="sleeping"] .eyeball,
.robot-face[data-moco-expression="sleepy-deep"] .eyeball {
    width: clamp(24px, 4vw, 46px) !important;
    height: clamp(14px, 2.1vw, 24px) !important;
    border: 0 !important;
    border-bottom: clamp(4px, 0.52vw, 6px) solid #56f1ff !important;
    border-radius: 0 0 999px 999px !important;
    background: transparent !important;
    box-shadow: 0 5px 12px rgba(86, 241, 255, 0.58) !important;
    transform: translate(-50%, -58%) !important;
}

.robot-face.wink .eye:first-child .eyeball,
.robot-face[data-moco-expression="wink"] .eye:first-child .eyeball {
    width: clamp(24px, 4vw, 46px) !important;
    height: clamp(12px, 1.8vw, 20px) !important;
    border: 0 !important;
    border-top: clamp(4px, 0.52vw, 6px) solid #56f1ff !important;
    border-radius: 999px 999px 0 0 !important;
    background: transparent !important;
    box-shadow: 0 -4px 12px rgba(86, 241, 255, 0.58) !important;
    transform: translate(-50%, -50%) !important;
}

.robot-face.focus .eyeball,
.robot-face[data-moco-expression="focus"] .eyeball {
    width: clamp(18px, 2.9vw, 32px) !important;
    height: clamp(24px, 4vw, 44px) !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 42% 28%, #d8ffff 0 12%, #56f1ff 38%, #12bde8 100%) !important;
    box-shadow:
        0 0 12px rgba(86, 241, 255, 0.9),
        0 0 28px rgba(86, 241, 255, 0.36) !important;
    transform: translate(-50%, -50%) scaleX(0.72) !important;
}

.robot-face.focus .mouth::before,
.robot-face[data-moco-expression="focus"] .mouth::before {
    width: clamp(34px, 4.8vw, 54px) !important;
    height: 0 !important;
    bottom: 42% !important;
    border: 0 !important;
    border-top: clamp(3px, 0.42vw, 5px) solid #56f1ff !important;
    border-radius: 999px !important;
    opacity: 0.9 !important;
}

.robot-face.focus .brow.left,
.robot-face[data-moco-expression="focus"] .brow.left {
    transform: rotate(-8deg) translateY(6px) !important;
}

.robot-face.focus .brow.right,
.robot-face[data-moco-expression="focus"] .brow.right {
    transform: rotate(8deg) translateY(6px) !important;
}

.robot-face.sad .brow,
.robot-face[data-moco-expression="sad"] .brow {
    border-top-color: #7fefff !important;
    opacity: 0.78;
}

.robot-face.sad .brow.left,
.robot-face[data-moco-expression="sad"] .brow.left {
    transform: rotate(18deg) translateY(8px) !important;
}

.robot-face.sad .brow.right,
.robot-face[data-moco-expression="sad"] .brow.right {
    transform: rotate(-18deg) translateY(8px) !important;
}

.robot-face.sad .eyeball,
.robot-face[data-moco-expression="sad"] .eyeball {
    width: clamp(16px, 2.7vw, 30px) !important;
    height: clamp(16px, 2.7vw, 30px) !important;
    transform: translate(-50%, -38%) !important;
    background: radial-gradient(circle at 38% 32%, #c8ffff 0 14%, #43efff 42%, #14c4ff 100%) !important;
    box-shadow:
        0 0 10px rgba(67, 239, 255, 0.88),
        0 0 22px rgba(67, 239, 255, 0.32) !important;
}

.robot-face.sad .mouth::before,
.robot-face[data-moco-expression="sad"] .mouth::before {
    width: clamp(42px, 6vw, 66px) !important;
    height: 46% !important;
    bottom: 28% !important;
    border: clamp(4px, 0.52vw, 6px) solid #7fefff !important;
    border-bottom: 0 !important;
    border-radius: 999px 999px 0 0 !important;
    box-shadow: 0 -3px 12px rgba(86, 241, 255, 0.54) !important;
}

.robot-face.giggle .mouth-wrap,
.robot-face.sleeping .mouth-wrap,
.robot-face.sleepy-deep .mouth-wrap,
.robot-face[data-moco-expression="giggle"] .mouth-wrap,
.robot-face[data-moco-expression="sleeping"] .mouth-wrap,
.robot-face[data-moco-expression="sleepy-deep"] .mouth-wrap {
    bottom: 20%;
}