@layer base, layout, components, motion;

@layer base {
    :root {
        --bg-sky: #8ec5ff;
        --bg-mint: #9ef0c0;
        --bg-cream: #fff7d1;
        --card-bg: rgba(255, 255, 255, 0.88);
        --card-border: rgba(255, 255, 255, 0.75);
        --title-main: #ff5c7a;
        --title-sub: #2d7dff;
        --accent: #ff8a3d;
        --accent-dark: #d66b2f;
        --text: #213049;
        --success: #2fbf5f;
        --error: #ef4a64;
        --display-font: "Jua", sans-serif;
        --body-font: "Nunito", "Noto Sans KR", sans-serif;
    }

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: var(--body-font);
        min-height: 100vh;
        display: grid;
        place-content: center;
        color: var(--text);
        background:
            radial-gradient(circle at 12% 15%, #ffffffa8 0 10%, transparent 11%),
            radial-gradient(circle at 85% 18%, #fff8cfa8 0 12%, transparent 13%),
            radial-gradient(circle at 78% 78%, #ffffff82 0 9%, transparent 10%),
            linear-gradient(145deg, var(--bg-sky), var(--bg-mint) 55%, var(--bg-cream));
        padding: 18px;
    }
}

@layer layout {
    #game-container {
        width: min(640px, 100%);
        padding: 2.2rem 1.4rem 1.6rem;
        background: var(--card-bg);
        border: 3px solid var(--card-border);
        border-radius: 30px;
        box-shadow:
            0 25px 60px rgba(27, 53, 93, 0.25),
            0 10px 22px rgba(27, 53, 93, 0.15);
        backdrop-filter: blur(6px);
        text-align: center;
        transition: filter 0.3s ease;
    }

    body.popup-open #game-container {
        filter: blur(5px) saturate(0.9);
    }

    #problem {
        margin: 1.8rem 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.8rem;
        flex-wrap: wrap;
        padding: 1rem;
        border-radius: 20px;
        background: linear-gradient(180deg, #ffffffd9, #f7fbffcf);
        border: 2px dashed #90b9ff;
    }

    #mode-picker {
        margin: 0.9rem auto 0;
        width: min(320px, 100%);
        position: relative;
    }

    #mode-menu-toggle {
        width: 100%;
        min-height: 50px;
        font-size: 1.08rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #mode-menu-toggle::after {
        content: "▾";
        font-size: 0.95rem;
        opacity: 0.85;
    }

    #mode-menu-list {
        list-style: none;
        position: absolute;
        left: 0;
        top: calc(100% + 8px);
        width: 100%;
        background: #ffffff;
        border-radius: 14px;
        border: 2px solid #c4d7ff;
        box-shadow: 0 14px 26px rgba(37, 72, 130, 0.18);
        padding: 0.45rem;
        z-index: 15;
    }

    #mode-menu-list.hidden {
        display: none;
    }

    .mode-item {
        border-radius: 10px;
        padding: 0.6rem 0.7rem;
        font-family: var(--display-font);
        font-size: 1.05rem;
        color: var(--text);
        cursor: pointer;
        transition: background-color 0.15s ease;
    }

    .mode-item:hover {
        background: #eaf2ff;
    }

    .mode-item.selected {
        background: #dceaff;
        color: #1958c9;
    }

    #choices-area {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem;
        margin-bottom: 0.75rem;
    }

    #contact-section {
        width: min(640px, 100%);
        margin: 1rem auto 0;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.8);
        border: 2px solid rgba(255, 255, 255, 0.8);
        border-radius: 18px;
        box-shadow: 0 10px 22px rgba(27, 53, 93, 0.12);
    }

    #contact-form {
        margin-top: 0.65rem;
        display: grid;
        gap: 0.55rem;
    }

    #comments-section {
        width: min(640px, 100%);
        margin: 1rem auto 0;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.8);
        border: 2px solid rgba(255, 255, 255, 0.8);
        border-radius: 18px;
        box-shadow: 0 10px 22px rgba(27, 53, 93, 0.12);
    }

    #disqus_thread {
        margin-top: 0.65rem;
    }
}

@layer components {
    h1 {
        font-family: var(--display-font);
        font-size: clamp(2rem, 6vw, 3rem);
        letter-spacing: 0.5px;
        color: var(--title-main);
        text-shadow:
            0 4px 0 #ffffff,
            0 8px 18px rgba(45, 125, 255, 0.25);
        line-height: 1.1;
    }

    #contact-section h2 {
        font-family: var(--display-font);
        color: var(--title-sub);
        font-size: clamp(1.3rem, 4vw, 1.7rem);
    }

    #comments-section h2 {
        font-family: var(--display-font);
        color: var(--title-sub);
        font-size: clamp(1.3rem, 4vw, 1.7rem);
    }

    #contact-form label {
        text-align: left;
        font-weight: 800;
        font-size: 0.95rem;
    }

    #contact-form input,
    #contact-form textarea {
        width: 100%;
        border: 2px solid #b8cdfa;
        border-radius: 12px;
        padding: 0.65rem 0.75rem;
        font-family: var(--body-font);
        font-size: 1rem;
        color: var(--text);
        background: #fff;
    }

    #contact-form textarea {
        resize: vertical;
        min-height: 100px;
    }

    #contact-form input:focus,
    #contact-form textarea:focus {
        outline: none;
        border-color: #5f8ff0;
        box-shadow: 0 0 0 3px rgba(95, 143, 240, 0.2);
    }

    .operator,
    .answer-box {
        font-family: var(--display-font);
        font-size: clamp(2rem, 7vw, 3rem);
        color: var(--title-sub);
    }

    .answer-box {
        background: #ffffff;
        border-radius: 14px;
        padding: 0.2rem 0.55rem;
        border: 2px solid #8ab2ff;
        min-width: 1.75ch;
    }

    button {
        border: none;
        border-radius: 14px;
        padding: 0.66rem 1.25rem;
        background: linear-gradient(180deg, #ff9f55, var(--accent));
        color: #fff;
        font-family: var(--display-font);
        font-size: 1.2rem;
        letter-spacing: 0.3px;
        cursor: pointer;
        box-shadow:
            0 5px 0 var(--accent-dark),
            0 10px 20px #ff8a3d4d;
        transform: translateY(0);
        transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
    }

    button:hover {
        filter: brightness(1.06);
        transform: translateY(-1px);
    }

    button:active {
        transform: translateY(2px);
        box-shadow:
            0 3px 0 var(--accent-dark),
            0 6px 14px #ff8a3d3d;
    }

    .choice-btn {
        width: 100%;
        font-size: 1.45rem;
        font-weight: 900;
        min-height: 58px;
    }

    .choice-btn:disabled {
        cursor: default;
        filter: none;
    }

    .choice-btn.wrong-choice {
        background: linear-gradient(180deg, #ff7f95, #ef4a64);
        box-shadow:
            0 5px 0 #c43753,
            0 10px 20px rgba(239, 74, 100, 0.28);
    }

    .choice-btn.correct-choice {
        background: linear-gradient(180deg, #56d887, #2fbf5f);
        box-shadow:
            0 5px 0 #1f9852,
            0 10px 20px rgba(47, 191, 95, 0.28);
    }

    #feedback {
        min-height: 32px;
        margin-top: 0.9rem;
        font-size: 1.24rem;
        font-weight: 900;
    }

    .correct {
        color: var(--success);
    }

    .incorrect {
        color: var(--error);
    }

    #hogi-popup {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.74);
        display: flex;
        justify-content: center;
        align-items: center;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.4s ease, visibility 0.4s ease;
        z-index: 100;
    }

    #hogi-popup:not(.hidden) {
        visibility: visible;
        opacity: 1;
    }

    #hogi-popup img {
        width: 100vw;
        height: 100vh;
        object-fit: cover;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        transform: scale(0.5);
        opacity: 0;
        transition: transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity 0.4s;
    }

    #hogi-popup.show-animation img {
        animation: hogi-grow-fade 2s forwards;
    }

    number-block {
        display: inline-block;
        filter: drop-shadow(0 8px 14px rgba(48, 64, 96, 0.18));
    }
}

@layer motion {
    #game-container {
        animation: pop-in 450ms ease-out;
    }

    @keyframes pop-in {
        from {
            opacity: 0;
            transform: translateY(10px) scale(0.98);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes hogi-grow-fade {
        0% {
            transform: scale(0.5);
            opacity: 0;
        }
        20% {
            transform: scale(1);
            opacity: 1;
        }
        100% {
            transform: scale(2);
            opacity: 0;
        }
    }
}

@media (max-width: 640px) {
    #game-container {
        padding: 1.45rem 0.9rem 1.1rem;
        border-radius: 22px;
    }

    #problem {
        margin: 1.3rem 0;
        gap: 0.45rem;
        padding: 0.75rem;
    }

    #mode-picker {
        width: 100%;
    }

    #choices-area {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .choice-btn {
        min-height: 52px;
    }
}