/* Character Assistant and Result Modal */

/* 더 작은 모바일 화면을 위한 추가 조정 */
@media (max-width: 480px) {
    :is(#character-assistant, [data-character-assistant]) {
        width: 62px;
        height: 62px;
        bottom: 10px;
        right: 10px;
    }

    /* 캐릭터 내부 요소들 크기 조정 */
    :is(#character-assistant, [data-character-assistant]) .mushroom-cap .dot {
        width: 8px;
        height: 8px;
        border: 1px solid #000;
    }

    :is(#character-assistant, [data-character-assistant]) .character-eye {
        width: 4px;
        height: 5px;
    }
}

/* 매우 작은 화면 (iPhone SE 등)을 위한 최소 크기 조정 */
@media (max-width: 375px) {
    :is(#character-assistant, [data-character-assistant]) {
        width: 54px;
        height: 54px;
        bottom: 8px;
        right: 8px;
    }

    /* 더 작은 내부 요소들 */
    :is(#character-assistant, [data-character-assistant]) .mushroom-cap .dot {
        width: 6px;
        height: 6px;
        border: 1px solid #000;
    }

    :is(#character-assistant, [data-character-assistant]) .character-eye {
        width: 3px;
        height: 4px;
    }

    :is(#character-assistant, [data-character-assistant]) .mushroom-cap {
        border: 2px solid #000;
    }

    :is(#character-assistant, [data-character-assistant]) .mushroom-stem {
        border: 2px solid #000;
        border-bottom: none;
    }
}

/* 모바일 가로 모드에서 캐릭터가 화면 밖으로 나가지 않도록 조정 */
@media (max-height: 500px) and (orientation: landscape) {
    :is(#character-assistant, [data-character-assistant]) {
        width: 58px;
        height: 58px;
        bottom: 5px;
        right: 5px;
    }
}

/* 작은 높이에서는 캐릭터 크기를 더 줄임 */
@media (max-height: 400px) {
    :is(#character-assistant, [data-character-assistant]) {
        width: 50px;
        height: 50px;
        bottom: 5px;
        right: 5px;
    }

    :is(#character-assistant, [data-character-assistant]) .mushroom-cap .dot {
        width: 4px;
        height: 4px;
        border: 1px solid #000;
    }

    :is(#character-assistant, [data-character-assistant]) .character-eye {
        width: 2px;
        height: 3px;
    }

    :is(#character-assistant, [data-character-assistant]) .mushroom-cap,
    :is(#character-assistant, [data-character-assistant]) .mushroom-stem {
        border: 1px solid #000;
    }

    :is(#character-assistant, [data-character-assistant]) .mushroom-stem {
        border-bottom: none;
    }
}

/* Character Assistant Styles */
:is(#character-assistant, [data-character-assistant]) {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 108px;
    height: 108px;
    z-index: 99;
    pointer-events: auto;
    transition:
        transform 0.28s ease,
        filter 0.28s ease;
    filter: drop-shadow(0 10px 0 rgba(13, 21, 43, 0.12));
    isolation: isolate;
    will-change: transform, filter;
}

:is(#character-assistant, [data-character-assistant])::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 54%;
    height: 11%;
    border-radius: 50%;
    background: rgba(13, 21, 43, 0.22);
    transform: translateX(-50%) scaleX(var(--shadow-scale, 1));
    opacity: var(--shadow-opacity, 0.48);
    z-index: -1;
    filter: blur(1px);
}

.mushroom {
    --sprite-y: 0%;
    width: 100%;
    height: 100%;
    position: relative;
    background-image: url("../mushroom-sprite-sheet-colored.png?v=grid-fix-2");
    background-repeat: no-repeat;
    background-size: 400% 800%;
    background-position: 0% var(--sprite-y);
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    transform-origin: 50% 88%;
    transition: transform 0.3s ease-out;
    will-change: background-position, transform;
}

:is(#character-assistant, [data-character-assistant]) .mushroom-cap,
:is(#character-assistant, [data-character-assistant]) .mushroom-stem,
:is(#character-assistant, [data-character-assistant]) .devil-horns,
:is(#character-assistant, [data-character-assistant]) .fire-effect {
    display: none !important;
}

.mushroom-cap {
    width: 100%;
    height: 65%;
    background: var(--primary); /* #DC143C - 웹사이트 포인트 컬러 */
    border: 3px solid #000;
    border-radius: 50% 50% 20% 20%;
    position: absolute;
    top: 0;
    z-index: 2;
    transition: background-color 0.3s, box-shadow 0.3s;
}
.mushroom-cap .dot {
    position: absolute;
    width: 15px;
    height: 15px;
    background: white;
    border-radius: 50%;
    border: 2px solid #000;
}
.mushroom-cap .dot:nth-child(1) {
    top: 15%;
    left: 25%;
}
.mushroom-cap .dot:nth-child(2) {
    top: 30%;
    left: 60%;
}
.mushroom-cap .dot:nth-child(3) {
    top: 45%;
    left: 20%;
}

.mushroom-stem {
    width: 50%;
    height: 50%;
    background: #f7e5d3;
    border: 3px solid #000;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
.character-eye {
    position: absolute;
    width: 6px;
    height: 8px;
    background-color: #000;
    border-radius: 50%;
    top: 40%;
    transition: all 0.2s ease;
    z-index: 3;
}
.character-eye.left {
    left: 30%;
}
.character-eye.right {
    right: 30%;
}

.spore {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0;
    animation: spore-float 1.2s ease-out forwards;
}

/* Character Animations */
@keyframes mascot-sprite-frames {
    0%,
    24.99% {
        background-position: 0% var(--sprite-y);
    }
    25%,
    49.99% {
        background-position: 33.3333% var(--sprite-y);
    }
    50%,
    74.99% {
        background-position: 66.6667% var(--sprite-y);
    }
    75%,
    100% {
        background-position: 100% var(--sprite-y);
    }
}

:is(#character-assistant, [data-character-assistant]).idle .mushroom {
    --sprite-y: 0%;
    animation: idle-rock 2.8s ease-in-out infinite;
}

@keyframes idle-rock {
    0%,
    100% {
        transform: rotate(-2deg);
    }
    50% {
        transform: rotate(2deg);
    }
}

:is(#character-assistant, [data-character-assistant]).happy .mushroom {
    --sprite-y: 14.2857%;
    animation:
        mascot-sprite-frames 0.92s steps(1) infinite,
        happy-hop 0.92s cubic-bezier(0.18, 0.9, 0.22, 1.22) infinite;
}
:is(#character-assistant, [data-character-assistant]).happy {
    --shadow-scale: 0.82;
    --shadow-opacity: 0.32;
    filter: drop-shadow(0 11px 0 rgba(13, 21, 43, 0.1))
        drop-shadow(0 0 13px rgba(255, 90, 126, 0.22));
}
@keyframes happy-hop {
    0%,
    100% {
        transform: translateY(0) scale(1, 1);
    }
    20% {
        transform: translateY(5px) scale(1.1, 0.9);
    } /* Squish down */
    50% {
        transform: translateY(-20px) scale(0.9, 1.1);
    } /* Jump up and stretch */
    80% {
        transform: translateY(2px) scale(1.05, 0.95);
    } /* Land and squish again */
}

@keyframes spore-float {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 0.5;
    }
    20% {
        transform: translate(var(--x-1), -20px) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--x-2), -80px) scale(0);
        opacity: 0;
    }
}

:is(#character-assistant, [data-character-assistant]).sad .mushroom-cap {
    background-color: rgba(10, 18, 42, 0.8); /* 네이비 - 슬픔 상태에서 어둡게 */
}
:is(#character-assistant, [data-character-assistant]).sad .mushroom {
    --sprite-y: 28.5714%;
    animation:
        mascot-sprite-frames 1.8s steps(1) infinite,
        idle-rock 2.8s ease-in-out infinite;
}
:is(#character-assistant, [data-character-assistant]).sad {
    --shadow-scale: 1.08;
    --shadow-opacity: 0.56;
    filter: grayscale(0.18) drop-shadow(0 8px 0 rgba(13, 21, 43, 0.16));
}

:is(#character-assistant, [data-character-assistant]).worried .mushroom {
    --sprite-y: 42.8571%;
    animation:
        mascot-sprite-frames 1.05s steps(1) infinite,
        worried-shake 0.72s cubic-bezier(0.36, 0.07, 0.19, 0.97)
            infinite;
}
:is(#character-assistant, [data-character-assistant]).worried {
    --shadow-scale: 0.96;
    --shadow-opacity: 0.42;
}
@keyframes worried-shake {
    0%,
    100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-2px);
    }
    75% {
        transform: translateX(2px);
    }
}

:is(#character-assistant, [data-character-assistant]).cheer .mushroom {
    --sprite-y: 57.1429%;
    animation:
        mascot-sprite-frames 0.86s steps(1) infinite,
        cheer-dance 0.86s cubic-bezier(0.18, 0.9, 0.2, 1.25) infinite;
}
:is(#character-assistant, [data-character-assistant]).cheer {
    --shadow-scale: 0.9;
    --shadow-opacity: 0.35;
    filter: drop-shadow(0 12px 0 rgba(13, 21, 43, 0.1))
        drop-shadow(0 0 16px rgba(255, 213, 79, 0.34));
}
@keyframes cheer-dance {
    0%,
    100% {
        transform: rotate(0);
    }
    25% {
        transform: rotate(-20deg);
    }
    75% {
        transform: rotate(20deg);
    }
}

/* Combo Growth Styles */
:is(#character-assistant, [data-character-assistant]).combo-level-1 .mushroom {
    --sprite-y: 71.4286%;
    animation:
        mascot-sprite-frames 1s steps(1) infinite,
        combo-grow-1 1s ease-in-out infinite;
}
:is(#character-assistant, [data-character-assistant]).combo-level-2 .mushroom {
    --sprite-y: 71.4286%;
    animation:
        mascot-sprite-frames 0.86s steps(1) infinite,
        combo-grow-2 0.86s ease-in-out infinite;
}
:is(#character-assistant, [data-character-assistant]).combo-level-2 .mushroom-cap {
    box-shadow: 0 0 10px gold, 0 0 15px gold;
}
:is(#character-assistant, [data-character-assistant]).combo-level-3 .mushroom {
    --sprite-y: 71.4286%;
    animation:
        mascot-sprite-frames 0.72s steps(1) infinite,
        combo-grow-3 0.72s ease-in-out infinite;
}
:is(#character-assistant, [data-character-assistant]).combo-level-3 .mushroom-cap {
    animation: rainbow-glow 2s infinite alternate;
}

@keyframes rainbow-glow {
    0% {
        box-shadow: 0 0 8px #ff0000, 0 0 12px #ff7f00;
    }
    20% {
        box-shadow: 0 0 8px #ff7f00, 0 0 12px #ffff00;
    }
    40% {
        box-shadow: 0 0 8px #ffff00, 0 0 12px #00ff00;
    }
    60% {
        box-shadow: 0 0 8px #00ff00, 0 0 12px #0000ff;
    }
    80% {
        box-shadow: 0 0 8px #0000ff, 0 0 12px #4b0082;
    }
    100% {
        box-shadow: 0 0 8px #4b0082, 0 0 12px #9400d3;
    }
}

@keyframes sad-slump {
    0%,
    100% {
        transform: translateY(0) rotate(0deg) scale(1, 1);
    }
    35%,
    72% {
        transform: translateY(4px) rotate(-3deg) scale(1.02, 0.96);
    }
    86% {
        transform: translateY(2px) rotate(-2deg) scale(1.01, 0.98);
    }
}

@keyframes combo-grow-1 {
    0%,
    100% {
        transform: translateY(0) scale(1.08);
    }
    50% {
        transform: translateY(-3px) scale(1.13);
    }
}

@keyframes combo-grow-2 {
    0%,
    100% {
        transform: translateY(0) rotate(-2deg) scale(1.16);
    }
    50% {
        transform: translateY(-5px) rotate(2deg) scale(1.23);
    }
}

@keyframes combo-grow-3 {
    0%,
    100% {
        transform: translateY(0) rotate(-4deg) scale(1.24);
    }
    50% {
        transform: translateY(-7px) rotate(4deg) scale(1.34);
    }
}

/* Devil Mode Styles */
.devil-horns,
.fire-effect {
    display: none;
}
:is(#character-assistant, [data-character-assistant]).devil-mode .devil-horns {
    display: block;
}
:is(#character-assistant, [data-character-assistant]).devil-mode .mushroom {
    --sprite-y: 0%;
    background-image: url("../mushroom-sprite-devil-generated.png?v=devil-redesign-1");
    background-size: 400% 100%;
    background-position: 0% 0%;
    animation: idle-rock 2.8s ease-in-out infinite;
}
:is(#character-assistant, [data-character-assistant]).devil-mode.happy .mushroom {
    --sprite-y: 0%;
    background-image: url("../mushroom-sprite-devil-generated.png?v=devil-redesign-1");
    background-size: 400% 100%;
    animation:
        mascot-sprite-frames 0.78s steps(1) infinite,
        happy-hop 0.78s cubic-bezier(0.18, 0.9, 0.22, 1.22) infinite;
}
:is(#character-assistant, [data-character-assistant]).devil-mode.sad .mushroom {
    --sprite-y: 0%;
    background-image: url("../mushroom-sprite-devil-generated.png?v=devil-redesign-1");
    background-size: 400% 100%;
    background-position: 0% 0%;
    animation: idle-rock 2.8s ease-in-out infinite;
}
:is(#character-assistant, [data-character-assistant]).devil-mode {
    --shadow-scale: 0.86;
    --shadow-opacity: 0.5;
    transform: scale(0.96);
    transform-origin: right bottom;
    filter: drop-shadow(0 11px 0 rgba(13, 21, 43, 0.16))
        drop-shadow(0 0 16px rgba(255, 43, 43, 0.26));
}
:is(#character-assistant, [data-character-assistant]).devil-mode .mushroom-cap {
    background: #a00000;
}
:is(#character-assistant, [data-character-assistant]).devil-mode.happy .fire-effect {
    display: flex;
}

:is(#character-assistant, [data-character-assistant]).devil-mode.sad .mushroom-cap {
    background: #2c003e; /* Very dark, menacing purple */
    box-shadow: 0 0 15px #ff0000, inset 0 0 10px #000;
}
:is(#character-assistant, [data-character-assistant]).devil-mode.sad .character-eye {
    background: #ff0000; /* Glowing red eyes */
    box-shadow: 0 0 10px #ff0000;
}

.devil-horns {
    position: absolute;
    width: 100%;
    top: -5px;
    z-index: 3;
}
.horn {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 20px solid #4d0000;
}
.horn.left {
    left: 10px;
    transform: rotate(-20deg);
}
.horn.right {
    right: 10px;
    transform: rotate(20deg);
}

.fire-effect {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 150%;
    height: 50px;
    justify-content: center;
    filter: blur(1px);
    z-index: 0;
}
.flame {
    width: 15px;
    height: 25px;
    background: orangered;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: burn 0.8s forwards infinite;
    margin: 0 -4px;
}
.flame:nth-child(2) {
    animation-delay: 0.2s;
}
.flame:nth-child(3) {
    animation-delay: 0.1s;
}
.flame:nth-child(4) {
    animation-delay: 0.3s;
}
.flame:nth-child(5) {
    animation-delay: 0.15s;
}

@keyframes burn {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.9;
    }
    50% {
        transform: translateY(-40px) scale(1.5);
        opacity: 1;
    }
    100% {
        transform: translateY(-80px) scale(0);
        opacity: 0;
    }
}

@keyframes devil-hover {
    0%,
    100% {
        transform: translateY(0) rotate(-2deg) scale(1.03);
    }
    50% {
        transform: translateY(-7px) rotate(3deg) scale(1.08);
    }
}

@media (max-width: 600px) {
    :is(#character-assistant, [data-character-assistant]) {
        width: 74px;
        height: 74px;
        bottom: 15px;
        right: 15px;
    }
}

@media (max-width: 768px) {
    :is(#character-assistant, [data-character-assistant]) {
        width: 74px;
        height: 74px;
        bottom: 10px;
        right: 10px;
    }
}

@media (max-width: 480px) {
    :is(#character-assistant, [data-character-assistant]) {
        width: 62px;
        height: 62px;
        bottom: 10px;
        right: 10px;
    }
}

@media (max-width: 375px) {
    :is(#character-assistant, [data-character-assistant]) {
        width: 54px;
        height: 54px;
        bottom: 8px;
        right: 8px;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    :is(#character-assistant, [data-character-assistant]) {
        width: 58px;
        height: 58px;
        bottom: 5px;
        right: 5px;
    }
}

@media (max-height: 400px) {
    :is(#character-assistant, [data-character-assistant]) {
        width: 50px;
        height: 50px;
        bottom: 5px;
        right: 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(#character-assistant, [data-character-assistant]),
    :is(#character-assistant, [data-character-assistant]) .mushroom,
    :is(#character-assistant, [data-character-assistant])::after {
        animation: none !important;
        transition: none !important;
    }
}