/* =============================================
   ☀️ SKY THEME — Bầu trời trong xanh
   Palette: xanh cerulean · trắng mây · vàng nắng · periwinkle
   Cảm giác: nhẹ nhàng · trong sáng · thoáng đãng · tinh khiết
   ============================================= */

:root {
    --c-sky-top:   #b8e4f9;  /* xanh trời nhạt trên cao  */
    --c-cerulean:  #2980b9;  /* xanh cerulean chính       */
    --c-azure:     #1abc9c;  /* azure trong xanh          */
    --c-periwi:    #6baed6;  /* periwinkle nhạt           */
    --c-sun:       #ffe066;  /* vàng nắng nhẹ             */
    --c-cloud:     #ffffff;  /* trắng mây tinh khiết      */
    --c-horizon:   #74b9ff;  /* xanh chân trời            */
    --intro-text:  #0e2d5e;  /* xanh đậm navy chữ         */
    --intro-muted: #2c5f8a;  /* xanh trung bình phụ       */
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }

body {
    font-family: "Quicksand", Arial, sans-serif;
    background: linear-gradient(180deg, #d6eeff 0%, #b8e4f9 60%, #e8f7ff 100%);
    color: var(--intro-text);
}

/* ---- Welcome & Help screens ---- */
#welcomeScreen,
#helpScreen {
    position: fixed;
    inset: 0; z-index: 99999;
    display: flex; flex-direction: column;
    width: 100%; min-height: 100vh;
    overflow: hidden;
    /*
     * Bầu trời trong xanh:
     * Đỉnh: trắng kem nhẹ (ánh nắng sáng sớm)
     * Giữa: xanh cerulean trong trẻo
     * Chân trời: xanh nhạt hơn, mờ sương nhẹ
     */
    background:
        /* Vầng sáng mặt trời ở góc phải trên */
        radial-gradient(ellipse 60% 40% at 85% 5%,
            rgba(255,240,160,0.55) 0%,
            rgba(255,220,80,0.15) 40%,
            transparent 70%),
        /* Nền trời gradient chính */
        linear-gradient(180deg,
            #fdfbea 0%,
            #b8dcf8 12%,
            #5baee8 40%,
            #2980b9 72%,
            #1a6fa8 100%);
    color: var(--intro-text);
}
#helpScreen { z-index: 99998; display: none; }

#welcomeScreen.fade-out,
#helpScreen.fade-out {
    pointer-events: none; opacity: 0; transform: scale(1.06);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* ---- Mặt trời & emoji ---- */
#welcomeScreen::before {
    content: "☀️";
    position: absolute; top: 3%; right: 8%;
    font-size: 4rem; z-index: 1;
    animation: sunSpin 20s linear infinite;
    filter: drop-shadow(0 0 18px rgba(255,224,0,0.7)) drop-shadow(0 0 40px rgba(255,200,0,0.4));
}
#welcomeScreen::after {
    content: "🌤️";
    position: absolute; bottom: 15%; left: 6%;
    font-size: 3.5rem; z-index: 1;
    animation: floatCloud 8s ease-in-out infinite; animation-delay: 1s;
    filter: drop-shadow(0 4px 12px rgba(100,180,255,0.4));
}

@keyframes sunSpin {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.08); }
    100% { transform: rotate(360deg) scale(1); }
}
@keyframes floatCloud {
    0%,100% { transform: translateX(0) translateY(0); }
    30%      { transform: translateX(10px) translateY(-10px); }
    70%      { transform: translateX(-8px) translateY(-16px); }
}

/* ---- Đám mây bồng bềnh ---- */
.stars {
    position: absolute; top: 0; left: 0;
    z-index: 0; width: 100%; height: 100%;
    overflow: hidden; pointer-events: none;
}

/* ============================================================
   ☁️ ĐÁM MÂY CUMULUS — SVG path, đúng hình dạng như ảnh tham chiếu
   Mỗi pseudo-element = 1 đám mây trắng đục, viền gồ ghề, bóng mềm
   ============================================================ */

/*
 * SVG Cloud A — 4 gồ, cân đối, kích cỡ vừa
 * Dùng cho: stars1::before
 */
.stars1::before {
    content: "";
    position: absolute;
    width: 220px; height: 88px;
    top: 14%; left: -240px;
    animation: driftCloud 30s linear infinite;
    animation-delay: 0s;
    border-radius: 0; background-color: transparent;
    box-shadow: none; filter: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 88'%3E%3Cdefs%3E%3Cfilter id='sh'%3E%3CfeDropShadow dx='0' dy='5' stdDeviation='4' flood-color='rgba(0%2C80%2C160%2C0.18)'/%3E%3C/filter%3E%3C/defs%3E%3Cpath fill='white' filter='url(%23sh)' d='M22 70 Q22 82 36 82 L184 82 Q198 82 198 70 Q198 56 186 52 Q190 32 172 26 Q168 8 148 16 Q136 2 116 12 Q98 2 82 16 Q66 8 56 28 Q38 24 30 44 Q20 48 22 62 Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/*
 * SVG Cloud B — 3 gồ, thấp và rộng, dẹt
 * Dùng cho: stars1::after
 */
.stars1::after {
    content: "";
    position: absolute;
    width: 160px; height: 62px;
    top: 32%; left: -180px;
    animation: driftCloud 22s linear infinite;
    animation-delay: -9s;
    border-radius: 0; background-color: transparent;
    box-shadow: none; filter: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 62'%3E%3Cdefs%3E%3Cfilter id='sh'%3E%3CfeDropShadow dx='0' dy='4' stdDeviation='3' flood-color='rgba(0%2C80%2C160%2C0.16)'/%3E%3C/filter%3E%3C/defs%3E%3Cpath fill='white' filter='url(%23sh)' d='M16 50 Q16 60 28 60 L132 60 Q144 60 144 50 Q144 40 134 36 Q136 20 122 16 Q116 4 100 10 Q88 2 74 10 Q60 4 52 18 Q38 14 30 28 Q16 32 16 44 Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/*
 * SVG Cloud C — 5 gồ, rộng, to nhất, chậm nhất
 * Dùng cho: stars2::before
 */
.stars2::before {
    content: "";
    position: absolute;
    width: 280px; height: 100px;
    top: 8%; left: -300px;
    animation: driftCloud 38s linear infinite;
    animation-delay: -16s;
    border-radius: 0; background-color: transparent;
    box-shadow: none; filter: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 100'%3E%3Cdefs%3E%3Cfilter id='sh'%3E%3CfeDropShadow dx='0' dy='6' stdDeviation='5' flood-color='rgba(0%2C80%2C160%2C0.18)'/%3E%3C/filter%3E%3C/defs%3E%3Cpath fill='white' filter='url(%23sh)' d='M22 80 Q22 92 36 92 L244 92 Q258 92 258 80 Q258 66 246 62 Q250 42 232 36 Q232 16 210 20 Q200 4 180 14 Q164 4 146 14 Q130 4 112 16 Q96 6 82 24 Q64 18 54 38 Q34 34 26 54 Q18 60 22 72 Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/*
 * SVG Cloud D — 3 gồ, nhỏ, bồng bềnh, nhanh
 * Dùng cho: stars2::after
 */
.stars2::after {
    content: "";
    position: absolute;
    width: 120px; height: 52px;
    top: 50%; left: -140px;
    animation: driftCloud 16s linear infinite;
    animation-delay: -4s;
    border-radius: 0; background-color: transparent;
    box-shadow: none; filter: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 52'%3E%3Cdefs%3E%3Cfilter id='sh'%3E%3CfeDropShadow dx='0' dy='3' stdDeviation='3' flood-color='rgba(0%2C80%2C160%2C0.15)'/%3E%3C/filter%3E%3C/defs%3E%3Cpath fill='white' filter='url(%23sh)' d='M12 40 Q12 50 22 50 L98 50 Q108 50 108 40 Q108 30 100 28 Q102 14 88 12 Q82 2 68 8 Q56 0 44 8 Q32 2 24 16 Q12 18 12 30 Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/*
 * SVG Cloud E — 4 gồ, trung bình, hơi cao
 * Dùng cho: stars3::before (helpScreen); welcomeScreen ghi đè thành tia nắng
 */
.stars3::before {
    content: "";
    position: absolute;
    width: 190px; height: 80px;
    top: 24%; left: -210px;
    animation: driftCloud 34s linear infinite;
    animation-delay: -22s;
    border-radius: 0; background-color: transparent;
    box-shadow: none; filter: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 80'%3E%3Cdefs%3E%3Cfilter id='sh'%3E%3CfeDropShadow dx='0' dy='5' stdDeviation='4' flood-color='rgba(0%2C80%2C160%2C0.17)'/%3E%3C/filter%3E%3C/defs%3E%3Cpath fill='white' filter='url(%23sh)' d='M18 62 Q18 74 30 74 L160 74 Q172 74 172 62 Q172 50 162 46 Q166 26 150 22 Q146 6 128 12 Q116 2 98 10 Q82 2 68 14 Q52 8 44 26 Q28 24 22 40 Q16 46 18 56 Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/*
 * SVG Cloud F — 3 gồ, nhỏ xinh, nhanh nhất
 * Dùng cho: stars3::after (helpScreen); welcomeScreen ghi đè thành tia nắng
 */
.stars3::after {
    content: "";
    position: absolute;
    width: 100px; height: 44px;
    top: 40%; left: -120px;
    animation: driftCloud 14s linear infinite;
    animation-delay: -2s;
    border-radius: 0; background-color: transparent;
    box-shadow: none; filter: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 44'%3E%3Cdefs%3E%3Cfilter id='sh'%3E%3CfeDropShadow dx='0' dy='3' stdDeviation='2.5' flood-color='rgba(0%2C80%2C160%2C0.15)'/%3E%3C/filter%3E%3C/defs%3E%3Cpath fill='white' filter='url(%23sh)' d='M10 34 Q10 42 20 42 L80 42 Q90 42 90 34 Q90 26 82 24 Q84 12 72 10 Q66 2 54 6 Q44 0 34 8 Q22 4 16 18 Q8 20 10 28 Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* Mây trôi từ trái sang phải qua màn hình */
@keyframes driftCloud {
    0%   { transform: translateX(0); }
    100% { transform: translateX(calc(100vw + 320px)); }
}

/* ---- Tia nắng nhẹ (sun rays) ở góc trên phải — CHỈ cho welcomeScreen ---- */
#welcomeScreen .stars3::before {
    width: 2px; height: 140px;
    top: 2%; right: 12%; left: auto;
    background-image: none;
    background: linear-gradient(180deg, rgba(255,224,80,0.6) 0%, transparent 100%);
    box-shadow: none; filter: none; opacity: 0.5;
    transform-origin: top center;
    animation: rayGlow 4s ease-in-out infinite;
    animation-delay: 0.5s;
}
#welcomeScreen .stars3::after {
    width: 2px; height: 100px;
    top: 2%; right: 15%; left: auto;
    background-image: none;
    background: linear-gradient(180deg, rgba(255,224,80,0.5) 0%, transparent 100%);
    box-shadow: none; filter: none; opacity: 0.4;
    transform-origin: top center;
    transform: rotate(12deg);
    animation: rayGlow 5s ease-in-out infinite;
    animation-delay: 1.5s;
}
@keyframes rayGlow {
    0%,100% { opacity: 0.4; transform: rotate(0deg) scaleY(1); }
    50%      { opacity: 0.75; transform: rotate(-3deg) scaleY(1.1); }
}

/* ---- Header / Logo ---- */
.ws-header {
    position: absolute; top: 0; left: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 1rem;
}
.ws-logo-container {
    position: relative; display: flex;
    align-items: center; justify-content: center;
    margin-top: 15px; margin-left: 15px;
}
.ws-logo-container::before {
    content: "";
    position: absolute; top: 50%; left: 50%; z-index: -1;
    width: 150px; height: 150px; border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255,240,160,0.65) 0,
        rgba(100,180,255,0.3) 55%,
        transparent 75%);
    filter: blur(14px);
    transform: translate(-50%,-50%);
    animation: pulseGlow 5s ease-in-out infinite alternate;
}
.ws-logo {
    max-width: 120px; height: auto;
    filter:
        drop-shadow(0 4px 14px rgba(41,128,185,0.4))
        drop-shadow(0 0 12px rgba(255,230,100,0.5));
    animation: floatLogo 7s ease-in-out infinite;
}
@keyframes pulseGlow {
    from { opacity: 0.5; transform: translate(-50%,-50%) scale(0.85); }
    to   { opacity: 1;   transform: translate(-50%,-50%) scale(1.12); }
}
@keyframes floatLogo {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

/* ---- Layout ---- */
.ws-main {
    position: relative; z-index: 1;
    display: flex; flex: 1; flex-direction: column;
    align-items: center; justify-content: center; padding: 1rem;
}
.ws-content-wrapper {
    width: 100%; max-width: 1000px;
    padding: 2rem; text-align: center;
    animation: fadeInScale 1s ease-out forwards;
}
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* ---- Title — Gradient bầu trời ---- */
.ws-game-title {
    margin: 0;
    font-family: "Baloo 2","Quicksand",Arial,sans-serif;
    font-size: clamp(2.4rem,7vw,5rem); line-height: 1.15;
    background: linear-gradient(90deg,
        #ffffff,
        #ffe066,
        #74b9ff,
        #2980b9,
        #0e2d5e,
        #74b9ff,
        #ffffff);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 10px rgba(41,128,185,0.5));
    animation: skyText 8s linear infinite;
}
#helpScreen .ws-game-title { font-size: clamp(2rem,6vw,3rem); }
@keyframes skyText {
    from { background-position: 0 center; }
    to   { background-position: 300% center; }
}

/* ---- Subtitle ---- */
.ws-game-subtitle {
    max-width: 740px; margin: 0.6rem auto 0;
    color: var(--intro-text);
    font-size: clamp(1rem,3vw,1.25rem); font-weight: 700; line-height: 1.6;
    opacity: 0; animation: fadeUp 1.5s ease-out 0.4s forwards;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Button group ---- */
.ws-button-group {
    display: flex; flex-direction: column;
    align-items: center; gap: 1rem; margin-top: 2.5rem;
}

/* ---- Primary Button — Trời xanh cerulean ---- */
.ws-btn-primary-cosmic {
    position: relative; z-index: 1;
    min-height: 62px; padding: 1rem 3rem;
    color: #fff;
    font-family: "Baloo 2","Quicksand",Arial,sans-serif;
    font-size: clamp(1rem,4vw,1.5rem); font-weight: 800;
    background: linear-gradient(135deg, #74b9ff 0%, #2980b9 50%, #1a6fa8 100%);
    background-size: 200% auto;
    border: 0; border-radius: 50px; cursor: pointer;
    box-shadow:
        0 6px 28px rgba(41,128,185,0.5),
        0 2px 0 rgba(255,255,255,0.25) inset;
    transition: transform 0.2s, box-shadow 0.2s; text-transform: none;
    animation: shimmerBtn 3.5s linear infinite;
    text-shadow: 0 2px 6px rgba(10,40,80,0.3);
}
.ws-btn-primary-cosmic::before,
.ws-btn-primary-cosmic::after { display: none; }
.ws-btn-primary-cosmic span {
    position: relative; z-index: 2; display: inline-block; transition: transform 0.2s;
}
.ws-btn-primary-cosmic:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow:
        0 16px 36px rgba(41,128,185,0.55),
        0 0 0 4px rgba(255,255,255,0.3);
}
.ws-btn-primary-cosmic:active { transform: scale(0.96); }
@keyframes shimmerBtn {
    0%   { background-position: 0 center; }
    100% { background-position: 200% center; }
}

/* ---- Help screen buttons ---- */
#helpScreen .btn-fullscreen,
#helpScreen .btn-play {
    min-height: 52px; color: var(--intro-text);
    font-family: "Baloo 2","Quicksand",Arial,sans-serif;
    font-size: 1.05rem; font-weight: 800;
    border: 0; cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s;
}
#helpScreen .btn-fullscreen::before, #helpScreen .btn-fullscreen::after,
#helpScreen .btn-play::before,       #helpScreen .btn-play::after { display: none; }

/* Fullscreen: vàng nắng nhẹ */
#helpScreen .btn-fullscreen {
    background: linear-gradient(135deg, #ffe066, #f9ca24);
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(249,202,36,0.5);
    color: #3a2a00;
}
/* Play: cerulean đậm */
#helpScreen .btn-play {
    background: linear-gradient(135deg, #2980b9, #0e2d5e);
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(41,128,185,0.5);
    color: #fff;
}
#helpScreen .btn-fullscreen span,
#helpScreen .btn-play span { position: relative; z-index: 2; display: inline-block; }
#helpScreen .btn-fullscreen:hover,
#helpScreen .btn-play:hover { transform: translateY(-3px) scale(1.03); }

/* ---- More games link ---- */
.ws-more-games-link {
    display: inline-block; padding: 0.5rem 1.4rem;
    color: var(--intro-text); font-size: 1rem; font-weight: 700;
    text-decoration: none;
    border: 2px solid rgba(41,128,185,0.35); border-radius: 50px;
    background: rgba(255,255,255,0.65);
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}
.ws-more-games-link:hover {
    color: #fff;
    background: var(--c-cerulean); border-color: var(--c-cerulean);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(41,128,185,0.45);
}

/* ---- Credit ---- */
.ws-credit {
    position: absolute; bottom: 1rem; left: 0;
    z-index: 10; width: 100%;
    color: rgba(14,45,94,0.45); font-size: 0.9rem; text-align: center;
}
.ws-credit a {
    color: var(--c-cerulean); font-weight: 700; text-decoration: none;
}

/* ---- Instruction box ---- */
.instruction-box,
.question-count {
    border: 2px solid rgba(255,255,255,0.65); border-radius: 20px;
    background: rgba(255,255,255,0.65); backdrop-filter: blur(12px);
    box-shadow:
        0 6px 28px rgba(41,128,185,0.12),
        0 1px 0 rgba(255,255,255,0.95) inset;
    color: var(--intro-text);
}
#helpScreen h5 { color: var(--c-cerulean); }
#helpScreen .text-white-50 { color: var(--intro-muted) !important; opacity: 1; }
.instruction-box h5, .instruction-box p { overflow-wrap: anywhere; }
.instruction-box p { opacity: 0.9; }
.check-icon {
    margin-top: 2px; font-size: 1.4rem;
    color: var(--c-cerulean);
    filter: drop-shadow(0 2px 4px rgba(41,128,185,0.35));
}
.question-count {
    color: var(--intro-text); font-weight: 700; font-size: 1.05rem;
}

/* ---- Game screen root ---- */
.game-screen-root {
    min-height: 100vh; padding: 2rem;
    background: linear-gradient(180deg, #d6eeff 0%, #b8e4f9 60%, #e8f7ff 100%);
}
.game-placeholder {
    display: flex; min-height: calc(100vh - 4rem);
    flex-direction: column; align-items: center;
    justify-content: center; gap: 1rem; text-align: center;
    color: var(--intro-text);
}

/* ---- Responsive ---- */
@media (max-width: 575.98px) {
    .ws-logo-container { margin-top: 4px; margin-left: 4px; }
    .ws-logo { max-width: 96px; }
    .ws-content-wrapper { padding: 1rem; }
    .instruction-box { padding: 1.25rem !important; }
    .ws-credit { font-size: 0.8rem; }
}