:root {
    --card-small-w: clamp(76px, 20vw, 96px);
    --card-small-h: clamp(82px, 22vw, 104px);
    --card-medium-w: clamp(92px, 24vw, 116px);
    --card-medium-h: clamp(104px, 28vw, 132px);
    --card-large-w: clamp(108px, 28vw, 138px);
    --card-large-h: clamp(126px, 34vw, 166px);
    --card-radius: 18px;
    --card-bg: #2d1b4e;
    --card-border: #7c3aed;
    --card-shadow: #5b21b6;
    --text-color: #fef3c7;
    --cream: #fff7ed;
    --orange: #f97316;
    --amber: #fbbf24;
    --teal: #14b8a6;
}

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

body {
    min-height: 100dvh;
    background:
        radial-gradient(circle at 16% 18%, rgba(20, 184, 166, 0.28), transparent 24%),
        radial-gradient(circle at 88% 76%, rgba(251, 191, 36, 0.24), transparent 28%),
        linear-gradient(150deg, #431407 0%, #9a3412 48%, #f97316 100%);
    color: #fff;
    font-family: 'Fredoka One', 'Nunito', cursive;
    overflow: visible;
    user-select: none;
    -webkit-user-select: none;
}

button {
    font: inherit;
}

.score-display {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    min-width: 82px;
    min-height: 44px;
    font-size: clamp(1.25rem, 4vw, 1.8rem);
    line-height: 1;
}

.star {
    display: inline-block;
    animation: score-pop 0.36s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.order-main {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 4vh, 34px);
    padding: 96px 16px 28px;
}

.direction-banner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 3vw, 16px);
    min-height: 74px;
    max-width: min(92vw, 560px);
    padding: 12px 22px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.16);
    border: 2px solid rgba(255, 255, 255, 0.26);
    box-shadow: 0 16px 36px rgba(67, 20, 7, 0.28);
    backdrop-filter: blur(10px);
}

.direction-arrow {
    display: inline-block;
    font-size: clamp(2rem, 8vw, 3.1rem);
    line-height: 1;
    transition: transform 0.28s ease;
    filter: drop-shadow(0 4px 0 rgba(67, 20, 7, 0.18));
}

.direction-banner.desc .direction-arrow {
    transform: scaleY(-1);
}

.direction-text {
    font-family: 'Nunito', sans-serif;
    font-size: clamp(0.95rem, 3.1vw, 1.26rem);
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    color: #fff;
    text-shadow: 0 2px 4px rgba(67, 20, 7, 0.26);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.difficulty-badge {
    min-height: 40px;
    padding: 8px 22px;
    border: 3px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    color: #431407;
    background: var(--amber);
    box-shadow: 0 6px 0 rgba(146, 64, 14, 0.36), 0 12px 22px rgba(67, 20, 7, 0.18);
    font-family: 'Fredoka One', 'Nunito', cursive;
    font-size: clamp(0.95rem, 3.7vw, 1.22rem);
    letter-spacing: 0.04em;
}

.difficulty-badge.level-up {
    animation: level-up-pop 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.number-cards {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(10px, 3.2vw, 22px);
    width: 100%;
    min-height: var(--card-large-h);
}

.number-card {
    width: var(--card-medium-w);
    height: var(--card-medium-h);
    border: 3px solid var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    box-shadow: 0 8px 0 var(--card-shadow), 0 12px 24px rgba(0, 0, 0, 0.32);
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.2s, border-color 0.2s;
    letter-spacing: 2px;
}

.number-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
    border-radius: 15px;
    pointer-events: none;
    overflow: hidden;
}

.number-card.size-small {
    width: var(--card-small-w);
    height: var(--card-small-h);
}

.number-card.size-medium {
    width: var(--card-medium-w);
    height: var(--card-medium-h);
}

.number-card.size-large {
    width: var(--card-large-w);
    height: var(--card-large-h);
}

.number-cards.difficulty-2 {
    --card-small-w: clamp(82px, 22vw, 104px);
    --card-small-h: clamp(94px, 25vw, 118px);
    --card-medium-w: clamp(88px, 23vw, 110px);
    --card-medium-h: clamp(104px, 27vw, 128px);
    --card-large-w: clamp(94px, 24vw, 116px);
    --card-large-h: clamp(114px, 29vw, 138px);
}

.number-cards.difficulty-3 {
    --card-small-w: clamp(86px, 22.5vw, 106px);
    --card-small-h: clamp(101px, 26vw, 124px);
    --card-medium-w: clamp(90px, 23vw, 110px);
    --card-medium-h: clamp(107px, 27vw, 130px);
    --card-large-w: clamp(94px, 23.5vw, 114px);
    --card-large-h: clamp(113px, 28vw, 136px);
}

.number-cards.difficulty-4 {
    --card-small-w: clamp(88px, 22.8vw, 108px);
    --card-small-h: clamp(104px, 26.5vw, 127px);
    --card-medium-w: clamp(90px, 23vw, 110px);
    --card-medium-h: clamp(107px, 27vw, 130px);
    --card-large-w: clamp(92px, 23.2vw, 112px);
    --card-large-h: clamp(110px, 27.5vw, 133px);
}

.number-card:active {
    transform: translateY(5px);
    box-shadow: 0 3px 0 var(--card-shadow), 0 6px 14px rgba(0, 0, 0, 0.3);
}

.card-num {
    position: relative;
    z-index: 1;
    font-size: clamp(2.8rem, 10vw, 5rem);
    line-height: 1;
    text-shadow: 0 4px 0 rgba(91, 33, 182, 0.65);
}

.size-small .card-num {
    font-size: clamp(2.5rem, 8vw, 3.7rem);
}

.size-medium .card-num {
    font-size: clamp(2.9rem, 9.5vw, 4.4rem);
}

.size-large .card-num {
    font-size: clamp(3.3rem, 11vw, 5.15rem);
}

.difficulty-2 .size-small .card-num {
    font-size: clamp(2.8rem, 8.8vw, 4rem);
}

.difficulty-2 .size-medium .card-num {
    font-size: clamp(3rem, 9.2vw, 4.2rem);
}

.difficulty-2 .size-large .card-num {
    font-size: clamp(3.2rem, 9.6vw, 4.4rem);
}

.difficulty-3 .size-small .card-num {
    font-size: clamp(3rem, 9vw, 4.15rem);
}

.difficulty-3 .size-medium .card-num {
    font-size: clamp(3.1rem, 9.2vw, 4.25rem);
}

.difficulty-3 .size-large .card-num {
    font-size: clamp(3.2rem, 9.4vw, 4.35rem);
}

.difficulty-4 .size-small .card-num,
.difficulty-4 .size-medium .card-num,
.difficulty-4 .size-large .card-num {
    font-size: clamp(3.1rem, 9.2vw, 4.25rem);
}

.order-badge {
    position: absolute;
    top: -9px;
    right: -9px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    opacity: 0;
    transform: scale(0);
    box-shadow: 0 3px 8px rgba(34, 197, 94, 0.32);
    transition: opacity 0.2s, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2;
}

.number-card.is-correct {
    background: rgba(74, 222, 128, 0.32);
    border-color: #4ade80;
    color: #bbf7d0;
    box-shadow:
        0 8px 0 #15803d,
        0 0 24px rgba(74, 222, 128, 0.5);
    animation: card-correct 0.35s ease forwards;
}

.number-card.is-correct .order-badge {
    opacity: 1;
    transform: scale(1);
}

.number-card.is-correct .card-num {
    color: #dcfce7;
    text-shadow: 0 4px 0 rgba(21, 128, 61, 0.68);
}

.number-card.is-error {
    background: rgba(248, 113, 113, 0.25);
    border-color: #f87171;
    color: #fecaca;
    animation: card-error 0.4s ease;
}

.round-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    min-height: 20px;
}

.round-dots .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    box-shadow: inset 0 1px 2px rgba(67, 20, 7, 0.22);
    transition: background 0.24s, transform 0.24s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.round-dots .dot.filled {
    background: var(--amber);
    transform: scale(1.28);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

@keyframes card-correct {
    0% { transform: scale(1); }
    42% { transform: scale(1.09); }
    74% { transform: scale(0.98); }
    100% { transform: scale(1); }
}

@keyframes card-error {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-8px); }
    35% { transform: translateX(8px); }
    55% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes score-pop {
    from {
        transform: scale(0.35);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes level-up-pop {
    0% { transform: scale(0.72); opacity: 0.45; }
    55% { transform: scale(1.22); opacity: 1; box-shadow: 0 6px 0 rgba(146, 64, 14, 0.36), 0 0 36px rgba(251, 191, 36, 0.9); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes confetti-fall {
    0% {
        transform: translateY(-10vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) rotate(720deg);
        opacity: 0;
    }
}

.confetti {
    position: fixed;
    top: -10px;
    width: 10px;
    height: 14px;
    z-index: 1000;
    pointer-events: none;
    animation-name: confetti-fall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@media (max-width: 420px) {
    :root {
        --card-small-w: 72px;
        --card-small-h: 82px;
        --card-medium-w: 88px;
        --card-medium-h: 108px;
        --card-large-w: 102px;
        --card-large-h: 132px;
    }

    .order-main {
        padding-left: 10px;
        padding-right: 10px;
        gap: 18px;
    }

    .direction-banner {
        min-height: 68px;
        padding: 10px 14px;
    }
}