body {
    font-family: 'Times New Roman', 'Georgia', 'Playfair Display', serif;
    background: 
        linear-gradient(135deg, 
            #fef7ff 0%, 
            #f0f9ff 25%, 
            #f0fff4 50%, 
            #fffbeb 75%, 
            #fdf2f8 100%
        );
    background-size: 400% 400%;
    animation: pastelFlow 20s ease-in-out infinite;
    background-image: 
        url("data:image/svg+xml,%3Csvg width='350' height='350' viewBox='0 0 350 350' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23ff6b9d'/%3E%3Cstop offset='100%25' stop-color='%2300d4ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ctext x='20' y='200' font-size='140' font-weight='900' fill='url(%23g1)' opacity='0.13' transform='rotate(15 175 175)'%3E5%3C/text%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='350' height='350' viewBox='0 0 350 350' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g2' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23ffd93d'/%3E%3Cstop offset='100%25' stop-color='%23ff4081'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ctext x='230' y='140' font-size='125' font-weight='900' fill='url(%23g2)' opacity='0.13' transform='rotate(-25 175 175)'%3E€%3C/text%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='350' height='350' viewBox='0 0 350 350' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g3' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2300f5ff'/%3E%3Cstop offset='100%25' stop-color='%2310e956'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ctext x='80' y='280' font-size='130' font-weight='900' fill='url(%23g3)' opacity='0.13' transform='rotate(45 175 175)'%3E↪%3C/text%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='350' height='350' viewBox='0 0 350 350' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g4' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23ff9a56'/%3E%3Cstop offset='100%25' stop-color='%236a5acd'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ctext x='390' y='170' font-size='135' font-weight='900' fill='url(%23g4)' opacity='0.13' transform='rotate(-40 175 175)'%3E▣%3C/text%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='350' height='350' viewBox='0 0 350 350' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g5' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23a855f7'/%3E%3Cstop offset='100%25' stop-color='%2300c9ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ctext x='50' y='90' font-size='132' font-weight='900' fill='url(%23g5)' opacity='0.13' transform='rotate(30 175 175)'%3E◈%3C/text%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='350' height='350' viewBox='0 0 350 350' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g6' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23f43f5e'/%3E%3Cstop offset='100%25' stop-color='%23fbbf24'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ctext x='220' y='320' font-size='128' font-weight='900' fill='url(%23g6)' opacity='0.13' transform='rotate(-15 175 175)'%3E∑%3C/text%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='350' height='350' viewBox='0 0 350 350' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g7' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2314b8a6'/%3E%3Cstop offset='100%25' stop-color='%23ec4899'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ctext x='150' y='170' font-size='138' font-weight='900' fill='url(%23g7)' opacity='0.13' transform='rotate(60 175 175)'%3E?%3C/text%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='350' height='350' viewBox='0 0 350 350' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g8' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23facc15'/%3E%3Cstop offset='100%25' stop-color='%238b5cf6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ctext x='260' y='20' font-size='131' font-weight='900' fill='url(%23g8)' opacity='0.13' transform='rotate(-50 175 175)'%3E◪%3C/text%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='350' height='350' viewBox='0 0 350 350' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g9' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2306b6d4'/%3E%3Cstop offset='100%25' stop-color='%23f59e0b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ctext x='90' y='350' font-size='134' font-weight='900' fill='url(%23g9)' opacity='0.13' transform='rotate(20 175 175)'%3E⋈%3C/text%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='350' height='350' viewBox='0 0 350 350' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g10' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23ef4444'/%3E%3Cstop offset='100%25' stop-color='%2322d3ee'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ctext x='180' y='80' font-size='127' font-weight='900' fill='url(%23g10)' opacity='0.13' transform='rotate(75 175 175)'%3Eϴ%3C/text%3E%3C/svg%3E");
    background-position: 
        0 0, 
        456px 723px, 
        234px 1089px, 
        789px 345px, 
        123px 1456px, 
        967px 891px,
        345px 156px,
        1234px 567px,
        678px 1298px,
        1089px 234px;
    background-size: 350px 350px;
    animation: symbolScroll 180s linear infinite, pastelFlow 40s ease-in-out infinite;
    color: #333;
    margin: 0;
    padding: 20px;
    overflow: hidden; /* Disable scrolling */
    height: 100vh; /* Lock to viewport height */
}

html {
    overflow: hidden; /* Also disable scrolling on html element */
    height: 100vh;
}

.logo {
    position: fixed;
    top: 2vh; /* Responsive top positioning */
    left: 2vw; /* Responsive left positioning */
    z-index: 1000;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px; /* More rounded corners */
    padding: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    transform: rotate(-12deg);
}

.logo img {
    height: 15vh; /* Responsive to viewport height */
    width: auto;
    display: block;
    border-radius: 16px; /* Round the image itself too */
}

h1 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 40px;
}

.container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-left: 10vw; /* Responsive margin based on viewport width */
    margin-top: 5vh; /* Responsive top margin based on viewport height */
    padding-top: 20px;
}

.card-container {
    perspective: 1200px;
    width: min(90vw, 80vw); /* Responsive width based on viewport */
    height: min(80vh, 70vh); /* Responsive height based on viewport */
}

.floating-wrapper {
    width: 100%;
    height: 100%;
    animation: float 6s ease-in-out infinite;
    transform-style: preserve-3d;
}

.card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s ease-in-out;
}

.card.flipped {
    transform: rotateY(180deg) rotateX(5deg);
}

@keyframes pastelFlow {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes symbolScroll {
    0% {
        background-position: 
            0 0, 
            456px 723px, 
            234px 1089px, 
            789px 345px, 
            123px 1456px, 
            967px 891px,
            345px 156px,
            1234px 567px,
            678px 1298px,
            1089px 234px;
    }
    100% {
        background-position: 
            -350px -350px, 
            106px 373px, 
            -116px 739px, 
            439px -5px, 
            -227px 1106px, 
            617px 541px,
            -5px -194px,
            884px 217px,
            328px 948px,
            739px -116px;
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    25% {
        transform: translateY(-8px) translateX(3px) rotateX(2deg) rotateY(0deg) rotateZ(0.5deg);
    }
    50% {
        transform: translateY(-5px) translateX(-2px) rotateX(-1deg) rotateY(0deg) rotateZ(-0.3deg);
    }
    75% {
        transform: translateY(-12px) translateX(1px) rotateX(1.5deg) rotateY(0deg) rotateZ(0.2deg);
    }
}

@keyframes shake {
    0% { transform: translateX(0) translateY(0) rotate(0deg); }
    5% { transform: translateX(-6px) translateY(-4px) rotate(-0.5deg); }
    10% { transform: translateX(6px) translateY(4px) rotate(0.5deg); }
    15% { transform: translateX(-8px) translateY(-3px) rotate(-0.7deg); }
    20% { transform: translateX(8px) translateY(5px) rotate(0.7deg); }
    25% { transform: translateX(-7px) translateY(-6px) rotate(-0.5deg); }
    30% { transform: translateX(7px) translateY(3px) rotate(0.5deg); }
    35% { transform: translateX(-6px) translateY(-4px) rotate(-0.4deg); }
    40% { transform: translateX(6px) translateY(4px) rotate(0.4deg); }
    45% { transform: translateX(-5px) translateY(-3px) rotate(-0.3deg); }
    50% { transform: translateX(5px) translateY(3px) rotate(0.3deg); }
    55% { transform: translateX(-4px) translateY(-2px) rotate(-0.2deg); }
    60% { transform: translateX(4px) translateY(2px) rotate(0.2deg); }
    65% { transform: translateX(-3px) translateY(-2px) rotate(-0.15deg); }
    70% { transform: translateX(3px) translateY(2px) rotate(0.15deg); }
    75% { transform: translateX(-2px) translateY(-1px) rotate(-0.1deg); }
    80% { transform: translateX(2px) translateY(1px) rotate(0.1deg); }
    85% { transform: translateX(-1px) translateY(-1px) rotate(-0.05deg); }
    90% { transform: translateX(1px) translateY(1px) rotate(0.05deg); }
    95% { transform: translateX(-0.5px) translateY(-0.5px) rotate(-0.02deg); }
    100% { transform: translateX(0) translateY(0) rotate(0deg); }
}

@keyframes reveal {
    0% { 
        transform: scale(0.9) rotateY(180deg);
    }
    30% {
        transform: scale(0.95) rotateY(180deg);
    }
    60% {
        transform: scale(1.02) rotateY(180deg);
    }
    100% { 
        transform: scale(1) rotateY(180deg);
    }
}

.card.flipped {
    transform: rotateY(180deg);
    animation: none; /* Pause floating during flip */
}

.card.flipped.float {
    animation: float 6s ease-in-out infinite;
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}

.card-front {
    background: linear-gradient(135deg, #fefcf0 0%, #f5f2e8 100%);
    color: #4a5568;
    border-radius: 16px;
    padding: 20px;
    box-sizing: border-box;
}

.card-inner {
    border: 10px double #4a5568;
    border-radius: 10px;
    padding: 10px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Amatic SC', cursive;
    font-weight: 700;
    line-height: 0.9;
    position: relative;
    box-sizing: border-box;
}

/* Corner emoji for playing card effect */
.card-inner::before,
.card-inner::after {
    content: var(--corner-emoji);
    position: absolute;
    font-size: 8vw; /* Responsive font size based on viewport width */
    color: #4a5568;
    font-weight: bold;
}

.card-inner::before {
    top: -10px;
    left: -10px;
}

.card-inner::after {
    bottom: -10px;
    right: -10px;
    transform: rotate(180deg);
}

.card-back {
    background: url('cardback.png') center/120% no-repeat;
    transform: rotateY(180deg);
    padding: 0;
    border: 12px solid #b5601f;
    box-sizing: border-box;
}

.card.flipped .card-back {
    animation: reveal 2.5s ease-out;
}

.card.flipped ~ .card-container {
    animation: shake 2s ease-in-out 1s;
}

/* Alternative approach - apply shake to card-container when any flipped card is inside */
.card-container:has(.card.flipped) {
    animation: shake 2s ease-in-out 1s;
}

#question-text {
    font-size: 2rem; /* Starting size, will be adjusted by JS */
    line-height: 1.1;
    font-weight: 700;
    font-family: 'Amatic SC', cursive;
    color: #4a5568;
    word-wrap: break-word;
    overflow-wrap: break-word;
    letter-spacing: 0.5px;
    margin: 0;
    padding: 0;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .logo {
        top: 1vh;
        left: 1vw;
        transform: rotate(-12deg) scale(0.6); /* Scale down with -12 degree rotation */
    }
    
    .logo img {
        height: 12vh; /* Smaller responsive size for mobile */
    }
    
    .container {
        margin-left: 0;
        padding-top: 18vh; /* Responsive padding for mobile */
    }
    
    .card-container {
        width: min(95vw, 85vw); /* More responsive on mobile */
        height: min(75vh, 65vh); /* More responsive height on mobile */
    }
}

@media (max-width: 480px) {
    .logo {
        transform: rotate(-12deg) scale(0.4); /* Even smaller on very small screens with -12 degrees */
    }
    
    .container {
        padding-top: 15vh; /* Responsive padding for very small screens */
    }
}