:root {
    --ink: #40362f;
    --soft-ink: #71685e;
    --sage: #929b84;
    --gold: #e8b851;
    --rose: #c96f70;
    --cream: #fffaf0;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    min-height: 100%;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    background: #f3efe5;
}

body {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: clip;
    color: var(--ink);
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    background-color: #f3efe5;
    background-image: url("assets/page-background.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

button {
    border: 0;
    color: inherit;
    font: inherit;
    background: none;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

button:focus-visible {
    outline: 3px solid rgba(231, 181, 72, 0.95);
    outline-offset: 3px;
    border-radius: 22%;
}

.game-stage {
    position: relative;
    isolation: isolate;
    container-type: inline-size;
    width: min(100vw, calc(100svh * 1.7768), 1672px);
    aspect-ratio: 1672 / 941;
    flex: 0 0 auto;
    overflow: visible;
    filter: drop-shadow(0 16px 24px rgba(70, 58, 48, 0.15));
}

.stage-art,
.stage-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.stage-art {
    z-index: 0;
}

.stage-art img {
    object-fit: fill;
}

.title-layer {
    position: absolute;
    z-index: 7;
    left: 16%;
    top: -14%;
    height: 45%;
    width: auto;
    aspect-ratio: 1400 / 623;
    pointer-events: none;
}

.title-layer img {
    height: 100%;
    width: auto;
    max-width: none;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 4px 5px rgba(67, 53, 44, 0.2));
}

.counter {
    position: absolute;
    z-index: 9;
    left: 70.5%;
    top: 12.2%;
    width: 7.6%;
    height: 8.1%;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    color: #49372e;
    font-size: 1.03cqw;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transform: rotate(15deg);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-shadow: 0 1px rgba(255, 255, 255, 0.65);
}

.counter span {
    margin-left: 0.14em;
}

.cards-container {
    position: absolute;
    z-index: 4;
    left: 18.1%;
    top: 25.8%;
    width: 63.8%;
    height: 29.4%;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.2%;
    perspective: 1000px;
}

.card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    border-radius: 10%;
    display: block;
    overflow: visible;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    filter: drop-shadow(0 7px 6px rgba(63, 51, 42, 0.21));
    transform-origin: 50% 82%;
    transition: transform 180ms ease, filter 180ms ease;
}

.card:nth-of-type(1) { background-image: url("assets/card-1.png"); }
.card:nth-of-type(2) { background-image: url("assets/card-2.png"); }
.card:nth-of-type(3) { background-image: url("assets/card-3.png"); }
.card:nth-of-type(4) { background-image: url("assets/card-4.png"); }

.card::after {
    content: "";
    position: absolute;
    z-index: 4;
    inset: 6.5% 6.5% 7.5%;
    border: max(2px, 0.17cqw) dashed rgba(229, 176, 60, 0.98);
    border-radius: 9%;
    box-shadow: 0 0 0.7cqw rgba(236, 186, 72, 0.55), inset 0 0 0.7cqw rgba(255, 247, 210, 0.68);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
}

.card::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 4.8%;
    border-radius: 9%;
    background: rgba(128, 143, 119, 0.49);
    box-shadow: inset 0 0 1.25cqw rgba(77, 87, 69, 0.24);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.card:hover:not(.used) {
    transform: translateY(-0.28cqw) scale(1.025);
    filter: brightness(1.035) drop-shadow(0 10px 8px rgba(63, 51, 42, 0.24));
}

.card:active:not(.used) {
    transform: translateY(0.08cqw) scale(0.97);
    filter: drop-shadow(0 3px 3px rgba(63, 51, 42, 0.19));
}

.card.selected {
    z-index: 6;
    transform: translateY(-0.5cqw) scale(1.025);
    filter: brightness(1.035) drop-shadow(0 0 0.65cqw rgba(234, 181, 61, 0.78));
}

.card.selected::after,
.card.auto-highlight::after {
    opacity: 1;
}

.cards-container.awaiting-second .card:not(.selected):not(.used) {
    animation: validCardGlow 1.15s ease-in-out infinite alternate;
}

.card.used {
    pointer-events: none;
    filter: saturate(0.5) drop-shadow(0 4px 4px rgba(63, 51, 42, 0.15));
    transform: translateY(0.12cqw) scale(0.985);
}

.card.used::before {
    opacity: 1;
}

.card.invalid,
.card.error {
    animation: cardError 360ms ease both;
}

.card.invalid::after,
.card.error::after {
    border-color: rgba(191, 104, 104, 0.95);
    box-shadow: 0 0 0.75cqw rgba(184, 99, 99, 0.42);
    opacity: 1;
}

.card-value,
.card-suit {
    position: absolute;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    line-height: 1;
    pointer-events: none;
}

.card-value {
    top: 21%;
    color: #32332f;
    font-family: "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
    font-size: 5cqw;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

.card-value.long-value {
    top: 26%;
    font-size: 3.75cqw;
}

.card-value.result-pop {
    animation: resultPop 330ms cubic-bezier(.2,.85,.3,1.25);
}

.card-suit {
    top: 57%;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3.6cqw;
    font-weight: 700;
}

.card-suit.red { color: #ca666b; }
.card-suit.black { color: #34362f; }

.controls {
    position: absolute;
    z-index: 5;
    left: 28.5%;
    top: 54.4%;
    width: 44.8%;
    height: 11.3%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.operator-btn {
    position: relative;
    width: 18.8%;
    aspect-ratio: 1;
    border-radius: 50%;
    transition: transform 150ms ease, filter 150ms ease;
}

.operator-btn img,
.action-btn img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

.operator-btn:hover {
    transform: translateY(-0.28cqw) scale(1.025);
    filter: brightness(1.04) drop-shadow(0 0.3cqw 0.25cqw rgba(62, 50, 42, 0.18));
}

.operator-btn:active {
    transform: translateY(0.1cqw) scale(0.955);
    filter: brightness(0.97) drop-shadow(0 0.1cqw 0.1cqw rgba(62, 50, 42, 0.16));
}

.operator-btn.selected,
.operator-btn.auto-highlight {
    transform: translateY(-0.32cqw) scale(1.055);
    filter: brightness(1.05) drop-shadow(0 0 0.58cqw rgba(236, 183, 63, 0.9));
}

.operator-btn.selected::after,
.operator-btn.auto-highlight::after {
    content: "";
    position: absolute;
    inset: 7%;
    border: max(2px, 0.14cqw) dashed #f0c866;
    border-radius: 50%;
    pointer-events: none;
}

.no-solution-btn {
    width: 20.2%;
}

.no-solution-btn.wobble {
    animation: eggWobble 430ms ease;
}

.calculation-display {
    position: absolute;
    z-index: 6;
    left: 28.2%;
    top: 68.1%;
    width: 43.4%;
    height: 10.4%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.1% 2.1%;
    overflow: hidden;
    text-align: center;
    overflow-wrap: anywhere;
    color: #877f75;
    font-size: 1.36cqw;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.015em;
}

.action-buttons {
    position: absolute;
    z-index: 6;
    left: 32.2%;
    top: 79.4%;
    width: 35.4%;
    height: 19.1%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.action-btn {
    width: 29.3%;
    aspect-ratio: 0.93;
    border-radius: 20%;
    transition: transform 160ms ease, filter 160ms ease;
}

.action-btn:hover {
    transform: translateY(-0.35cqw);
    filter: brightness(1.035) drop-shadow(0 0.45cqw 0.35cqw rgba(65, 52, 43, 0.2));
}

.action-btn:active {
    transform: translateY(0.12cqw) scale(0.96);
    filter: drop-shadow(0 0.12cqw 0.1cqw rgba(65, 52, 43, 0.16));
}

.message-container {
    position: fixed;
    z-index: 100;
    left: 50%;
    top: max(14px, env(safe-area-inset-top));
    transform: translateX(-50%);
    width: min(86vw, 430px);
    pointer-events: none;
}

.message {
    margin-bottom: 8px;
    border: 1px solid rgba(115, 102, 88, 0.22);
    border-radius: 999px;
    padding: 10px 18px;
    opacity: 0;
    transform: translateY(-12px) scale(0.97);
    text-align: center;
    color: #4d423a;
    background: rgba(255, 250, 240, 0.96);
    box-shadow: 0 7px 18px rgba(71, 59, 49, 0.16);
    transition: opacity 220ms ease, transform 220ms ease;
    font-size: 14px;
    font-weight: 700;
}

.message.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.message.success { border-color: rgba(140, 157, 121, 0.55); }
.message.error { border-color: rgba(196, 109, 109, 0.55); }

.celebration {
    position: fixed;
    z-index: 80;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.confetti {
    position: absolute;
    top: -5vh;
    width: 14px;
    height: 9px;
    border-radius: 70% 20% 70% 25%;
    opacity: 0;
}

@keyframes validCardGlow {
    to { filter: brightness(1.065) drop-shadow(0 8px 7px rgba(92, 80, 61, 0.22)); }
}

@keyframes cardError {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-0.45cqw) rotate(-1deg); }
    55% { transform: translateX(0.42cqw) rotate(1deg); }
    78% { transform: translateX(-0.22cqw); }
}

@keyframes resultPop {
    0% { transform: translateX(-50%) rotateY(80deg) scale(0.86); opacity: 0.35; }
    70% { transform: translateX(-50%) rotateY(-6deg) scale(1.08); }
    100% { transform: translateX(-50%) rotateY(0) scale(1); opacity: 1; }
}

@keyframes eggWobble {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-7deg) scale(0.98); }
    55% { transform: rotate(6deg) scale(1.02); }
    78% { transform: rotate(-3deg); }
}

@keyframes confettiFall {
    0% { transform: translate3d(0, -5vh, 0) rotate(0); opacity: 0; }
    10% { opacity: 0.92; }
    100% { transform: translate3d(var(--drift), 108vh, 0) rotate(var(--rotation)); opacity: 0; }
}

@media (max-width: 720px) {
    body {
        min-height: 100vh;
        min-height: 100dvh;
        display: block;
        background-position: center top;
        background-size: 100vw auto;
        background-repeat: repeat-y;
        background-attachment: scroll;
	padding-top: 8vw;
    }

    .game-stage {
        width: 100vw;
        aspect-ratio: 2 / 3;
        margin: 0 auto;
	overflow: visible;
        filter: drop-shadow(0 10px 18px rgba(70, 58, 48, 0.14));
    }

    .title-layer {
        left: 2%;
        top: -4%;
        width: 75%;
        height: auto;
    }

    .counter {
        left: 73.3%;
        top: 7.5%;
        width: 13%;
        height: 7.2%;
        font-size: 0.8cqw;
	transform: rotate(17deg);
        transform-origin: center center;
    }

    .cards-container {
        left: 7.1%;
        top: 19%;
        width: 85.8%;
        height: 22.5%;
        gap: 0.75%;
    }

    .card::after {
        border-width: max(2px, 0.38cqw);
        box-shadow: 0 0 1.5cqw rgba(236, 186, 72, 0.55), inset 0 0 1.4cqw rgba(255, 247, 210, 0.62);
    }

    .card:hover:not(.used) {
        transform: translateY(-0.7cqw) scale(1.025);
    }

    .card.selected {
        transform: translateY(-1.15cqw) scale(1.025);
        filter: brightness(1.035) drop-shadow(0 0 1.4cqw rgba(234, 181, 61, 0.8));
    }

    .card-value {
        top: 20.5%;
        font-size: 11cqw;
    }

    .card-value.long-value {
        top: 25%;
        font-size: 8cqw;
    }

    .card-suit {
        top: 57%;
        font-size: 6cqw;
    }

    .controls {
        left: 5.4%;
        top: 39.8%;
        width: 89.2%;
        height: 10.9%;
    }

    .operator-btn {
        width: 18.3%;
    }

    .operator-btn:hover {
        transform: translateY(-0.7cqw) scale(1.025);
    }

    .operator-btn.selected,
    .operator-btn.auto-highlight {
        transform: translateY(-0.8cqw) scale(1.055);
        filter: brightness(1.05) drop-shadow(0 0 1.25cqw rgba(236, 183, 63, 0.9));
    }

    .no-solution-btn {
        width: 20.1%;
    }

    .calculation-display {
        left: 24.4%;
        top: 58.2%;
        width: 51.2%;
        height: 10.6%;
        padding: 1.2% 2.6%;
        font-size: 3.25cqw;
        line-height: 1.5;
    }

    .action-buttons {
        left: 0;
        top: 75.2%;
        width: 100%;
        height: 16.7%;
        display: block;
    }

    .action-btn {
        position: absolute;
        top: 0;
        width: 17.5%;
    }

    .action-btn:nth-child(1) { left: 23.5%; }
    .action-btn:nth-child(2) { left: 42%; }
    .action-btn:nth-child(3) { left: 62.4%; }

    .action-btn:hover {
        transform: translateY(-0.8cqw);
    }

    .message-container {
        top: max(10px, env(safe-area-inset-top));
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}

@media (min-width: 721px) {
    body {
        align-items: flex-start;
        padding-top: 14svh;
    }
}