/* MathGuru Welcome Screen - shared styles (extracted from the standalone). */
        /* ════════════════════════════════════════════════════════════
           MathGuru — Welcome (Family B · Number-sense register)
           ════════════════════════════════════════════════════════════ */
        .ws-screen, .fs-screen {
            --navy:       #0F1729;
            --navy-2:     #1A2440;
            --brand-navy: #1F2747;
            --cream:      #FFF6E6;
            --cream-deep: #FFEFD5;
            --cream-edge: #ECDDBC;
            --ink:        #1F2747;
            --ink-soft:   #4B547A;
            --ink-mute:   #8A8FA3;
            --hue-1:#FF6B6B; --hue-2:#FFD23F; --hue-3:#4ECDC4;
            --hue-4:#4A90E2; --hue-5:#9B59B6; --hue-6:#F47286;
            --hue-3-d:#2EA399; --hue-4-d:#2A6BB8; --hue-5-d:#6E3C84;
            --cta-from:#FFC73B; --cta-to:#F08A1E; --cta-ink:#2A1A05;
            --gold:#FFC73B;
            --display:"Fredoka", system-ui, sans-serif;
            --ui:"Poppins", system-ui, sans-serif;
            --r-md:14px; --r-lg:22px; --r-xl:32px; --r-pill:999px;
            --sh-card:   0 5px 0 var(--cream-edge), 0 26px 50px -22px rgba(7, 12, 28, 0.7);
            --sh-circle: 0 3px 0 rgba(0,0,0,0.12), 0 7px 14px -4px rgba(7,12,28,0.4);
            --sh-button: 0 5px 0 var(--cta-ink), 0 14px 24px -8px rgba(240,138,30,0.55);
        }

        .ws-screen {
            position: fixed; inset: 0;
            overflow-y: auto; z-index: 10050;   /* above the floating audio/theme buttons (9999) */
            font-family: var(--ui); color: var(--ink);
            background:
                radial-gradient(ellipse 90% 55% at 50% -8%, rgba(255,201,90,0.13) 0%, transparent 55%),
                radial-gradient(ellipse 70% 50% at 88% 108%, rgba(78,205,196,0.10) 0%, transparent 55%),
                linear-gradient(140deg, var(--navy) 0%, var(--navy-2) 52%, var(--navy) 100%);
            animation: wsFadeIn 0.5s ease;
        }
        .ws-screen::before {
            content: ""; position: fixed; inset: 0; pointer-events: none;
            background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1px, transparent 0);
            background-size: 24px 24px;
        }
        .ws-screen.hidden { animation: wsFadeOut 0.5s ease forwards; pointer-events: none; }
        @keyframes wsFadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes wsFadeOut { from { opacity: 1; } to { opacity: 0; } }
        @keyframes wsScaleIn { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

        /* ───────────── Logo (MathGuru wordmark + sun mark) ───────────── */
        .mg-logo { display: inline-flex; align-items: center; gap: 0; text-decoration: none; }
        .mg-logo-mark {
            width: 28px; height: 28px; flex: none;
            margin-right: -2px;
            transform-origin: 24px 24px;
            transition: transform 0.2s cubic-bezier(.34,1.5,.6,1);
        }
        .mg-logo:hover .mg-logo-mark { transform: scale(1.08); }
        @keyframes mgLogoSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .mg-logo-word {
            font-family: var(--display); font-weight: 700; font-size: 23px;
            letter-spacing: -0.01em; line-height: 1;
            display: inline-flex; align-items: baseline;
        }
        .mg-logo-word .m   { color: var(--cream); }
        .mg-logo-word .g   { color: var(--gold); }
        .mg-logo-word .tld { color: rgba(255,246,230,0.42); font-size: 12.5px; font-weight: 500; margin-left: 2px; letter-spacing: 0; }

        /* Top bar */
        .ws-topbar {
            position: absolute; top: 0; left: 0; right: 0; z-index: 3;
            max-width: 1100px; margin: 0 auto;
            padding: 16px 24px 0;
            display: flex; justify-content: space-between; align-items: center; gap: 16px;
        }
        .ws-topbar-right { display: flex; align-items: center; gap: 10px; }
        .ws-back-link {
            display: inline-flex; align-items: center; gap: 6px;
            color: var(--cream); opacity: 0.78; text-decoration: none;
            font-family: var(--ui); font-weight: 500; font-size: 13.5px;
            padding: 9px 15px; border-radius: var(--r-pill);
            background: rgba(255,255,255,0.05);
            border: 1.5px solid rgba(255,255,255,0.12);
            transition: background 0.15s, opacity 0.15s;
        }
        .ws-back-link:hover { background: rgba(255,255,255,0.1); opacity: 1; }
        .ws-sound-btn {
            background: rgba(255,255,255,0.06); color: var(--cream);
            border: 1.5px solid rgba(255,255,255,0.16);
            width: 40px; height: 40px; border-radius: 50%;
            display: inline-flex; align-items: center; justify-content: center;
            cursor: pointer; font-size: 16px; transition: background 0.15s;
        }
        .ws-sound-btn:hover { background: rgba(255,255,255,0.14); }

        /* Kid section */
        .ws-kid-section {
            position: relative; z-index: 2;
            min-height: 100vh;
            display: flex; align-items: center; justify-content: center;
            padding: 24px 20px 24px;
        }
        .ws-card {
            position: relative;
            background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
            padding: 44px 44px 40px;
            border-radius: var(--r-xl);
            box-shadow: var(--sh-card);
            max-width: 580px; width: 100%;
            text-align: center;
            animation: wsScaleIn 0.6s cubic-bezier(.2,1.1,.5,1);
            overflow: hidden;
        }
        /* warm bloom inside the card */
        .ws-card::after {
            content: ""; position: absolute; z-index: 0;
            top: -40%; left: 50%; transform: translateX(-50%);
            width: 120%; height: 80%;
            background: radial-gradient(ellipse at center, rgba(255,210,120,0.22) 0%, transparent 60%);
            pointer-events: none;
        }
        /* rainbow tier stripe */
        .ws-card::before {
            content: ""; position: absolute; z-index: 2;
            top: 0; left: 0; right: 0; height: 6px;
            background: linear-gradient(90deg, var(--hue-1), var(--hue-2), var(--hue-3), var(--hue-4), var(--hue-5), var(--hue-6));
        }
        .ws-card > * { position: relative; z-index: 1; }

        /* Integrated natural landscape along the card's lower edge */
        .ws-card > .ws-landscape {
            position: absolute; left: 0; right: 0; bottom: 0;
            height: 250px; z-index: 0; pointer-events: none; overflow: hidden;
            border-radius: 0 0 var(--r-xl) var(--r-xl);
        }
        .ws-landscape svg { width: 100%; height: 100%; display: block; }
        @keyframes lsBflyDrift {
            0%   { transform: translate(0,0) rotate(0deg); }
            25%  { transform: translate(11px,-9px) rotate(6deg); }
            50%  { transform: translate(3px,-16px) rotate(-5deg); }
            75%  { transform: translate(-9px,-6px) rotate(5deg); }
            100% { transform: translate(0,0) rotate(0deg); }
        }
        @keyframes lsSway { 0%,100% { transform: rotate(-1.6deg); } 50% { transform: rotate(2deg); } }
        .ws-landscape .ls-bfly { animation: lsBflyDrift 9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
        .ws-landscape .ls-flower { animation: lsSway 5.5s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
        @media (prefers-reduced-motion: reduce) { .ws-landscape .ls-bfly, .ws-landscape .ls-flower { animation: none; } }
        @media (max-width: 560px) { .ws-card > .ws-landscape { height: 200px; } }

        .ws-start-badge {
            display: inline-flex; align-items: center; gap: 7px;
            background: var(--hue-1); color: #fff;
            font-family: var(--ui); font-weight: 600; font-size: 12.5px; letter-spacing: 0.05em;
            padding: 7px 15px 7px 12px; border-radius: var(--r-pill);
            box-shadow: 0 3px 0 #B53A3A, 0 6px 12px -4px rgba(193,61,61,0.5);
            margin-bottom: 20px; transform: rotate(-2deg);
        }
        .ws-start-badge svg { width: 14px; height: 14px; }

        .ws-cluster {
            display: inline-flex; gap: 6px;
            font-family: var(--ui); font-size: 11px; font-weight: 600;
            letter-spacing: 0.22em; text-transform: uppercase;
            color: var(--ink-mute); margin-bottom: 14px;
        }
        .ws-cluster b { color: var(--brand-navy); font-weight: 700; }

        .ws-card h1 {
            font-family: var(--display);
            font-size: clamp(44px, 7vw, 64px);
            line-height: 1.0; font-weight: 700;
            letter-spacing: -0.01em; color: var(--ink);
            margin: 0 0 14px;
        }
        .ws-rainbow {
            background: linear-gradient(90deg, #FF6B6B, #FFC93C, #5DD3A9, #6BB6FF, #A78BFA, #F472B6);
            background-size: 300% 100%;
            -webkit-background-clip: text; background-clip: text; color: transparent;
            -webkit-text-stroke: 2.5px var(--brand-navy); paint-order: stroke fill;
            animation: mgRainbow 8s linear infinite;
            filter: drop-shadow(0 3px 0 rgba(31,39,71,0.16));
        }
        @keyframes mgRainbow { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }

        .ws-tagline {
            font-family: var(--display); font-size: 17px; font-weight: 500; color: var(--ink-soft);
            max-width: 440px; margin: 0 auto 18px; line-height: 1.5;
        }
        .ws-tagline b { font-weight: 700; }
        .ws-tagline .t-num   { color: var(--hue-4); }
        .ws-tagline .t-bloom { color: var(--hue-6); }
        .ws-tagline .t-pv    { color: var(--hue-3-d); }

        .ws-chips { display: flex; gap: 8px; justify-content: center; margin-bottom: 26px; flex-wrap: wrap; }
        .ws-chip {
            display: inline-flex; align-items: center; gap: 7px;
            background: var(--cream); border: 1.5px solid var(--cream-edge);
            color: var(--ink-soft); font-family: var(--ui);
            font-size: 12px; font-weight: 600;
            padding: 7px 13px; border-radius: var(--r-pill);
            box-shadow: 0 2px 0 var(--cream-edge);
        }
        .ws-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hue-3); }
        .ws-chip.class .dot { background: var(--hue-4); }

        /* Mascot */
        .ws-mascot { position: relative; width: 188px; height: 188px; margin: 0 auto 28px; }
        .ws-mascot::before {
            content: ""; position: absolute; bottom: 4px; left: 50%;
            width: 164px; height: 15px;
            background: radial-gradient(ellipse at center, rgba(10,18,40,0.18), transparent 70%);
            transform: translateX(-50%); border-radius: 50%;
        }
        .ws-mascot .floaters { position: absolute; inset: -12px -34px; pointer-events: none; }
        .ws-mascot .f {
            position: absolute; width: 42px; height: 42px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-family: var(--display); font-weight: 700; font-size: 18px;
            color: #fff; text-shadow: 0 1.5px 1px rgba(31,39,71,0.4);
            background:
                radial-gradient(circle at 34% 27%,
                    color-mix(in srgb, var(--c) 40%, #fff) 0%,
                    var(--c) 44%,
                    color-mix(in srgb, var(--c) 62%, #000) 100%);
            border: 2.5px solid var(--cream);
            box-shadow:
                0 5px 10px -2px rgba(7,12,28,0.5),
                inset 0 -5px 7px rgba(0,0,0,0.3),
                inset 0 3px 5px rgba(255,255,255,0.5);
            animation: mgFloat 4.5s ease-in-out infinite;
        }
        /* specular highlight — turns the flat disc into a glossy bead */
        .ws-mascot .f::before {
            content: ""; position: absolute; top: 13%; left: 17%;
            width: 44%; height: 34%; border-radius: 50%;
            background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.1) 75%, rgba(255,255,255,0) 100%);
            pointer-events: none;
        }
        @keyframes mgFloat { 0%,100% { transform: translateY(0) rotate(var(--rot,0deg)); } 50% { transform: translateY(-9px) rotate(var(--rot,0deg)); } }
        .ws-mascot .f.a { top: 10%; left: -5%;  --c: var(--hue-2); color: #5A4708; text-shadow: 0 1px 0 rgba(255,255,255,0.55); --rot: -8deg; animation-delay: 0s; }
        .ws-mascot .f.b { top: -2%; right: -1%; --c: var(--hue-4); width: 48px; height: 48px; --rot: 6deg; animation-delay: 0.8s; }
        .ws-mascot .f.c { bottom: 14%; left: -1%; --c: var(--hue-3); color: #07403C; text-shadow: 0 1px 0 rgba(255,255,255,0.4); width: 34px; height: 34px; font-size: 14px; --rot: 10deg; animation-delay: 1.5s; }
        .ws-mascot .f.d { bottom: 2%; right: -5%; --c: var(--hue-5); width: 38px; height: 38px; font-size: 15px; --rot: -6deg; animation-delay: 2.1s; }

        .ws-mascot .ws-sun {
            position: relative; width: 100%; height: 100%; z-index: 1; overflow: visible;
            filter: drop-shadow(0 7px 12px rgba(245,180,0,0.34));
            animation: ws-sun-breathe 5.5s ease-in-out infinite; transform-origin: center;
        }
        @keyframes ws-sun-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
        .ws-mascot .ws-sun .sun-rays { transform-origin: 100px 100px; animation: ws-sun-rays-spin 28s linear infinite; }
        @keyframes ws-sun-rays-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .ws-mascot .ws-sun .sun-eyes { transform-origin: 100px 100px; animation: ws-sun-blink 4.5s ease-in-out infinite; }
        @keyframes ws-sun-blink { 0%,92%,100% { transform: scaleY(1); } 94%,96% { transform: scaleY(0.08); } }

        /* CTA */
        .ws-cta-group { display: flex; flex-direction: column; align-items: center; gap: 16px; }
        .ws-cta {
            position: relative; overflow: hidden;
            display: inline-flex; align-items: center; gap: 11px;
            background: linear-gradient(180deg, #FFE08A 0%, var(--cta-from) 40%, var(--cta-to) 100%);
            color: var(--cta-ink); font-family: var(--display);
            font-weight: 700; font-size: 22px; letter-spacing: 0.01em;
            padding: 18px 36px; border: none; border-radius: var(--r-pill);
            box-shadow: var(--sh-button), inset 0 2px 0 rgba(255,255,255,0.55), inset 0 -5px 8px rgba(176,90,8,0.28);
            cursor: pointer;
            transition: transform 0.14s cubic-bezier(.34,1.5,.6,1), box-shadow 0.14s ease;
            animation: ctaBounce 2.8s ease-in-out infinite;
        }
        /* glossy candy cap */
        .ws-cta::before {
            content: ""; position: absolute; z-index: 0; pointer-events: none;
            top: 4px; left: 8%; right: 8%; height: 42%;
            background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.12) 70%, rgba(255,255,255,0) 100%);
            border-radius: 999px 999px 60% 60% / 16px 16px 100% 100%;
        }
        .ws-cta > * { position: relative; z-index: 1; }
        @keyframes ctaBounce { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.018); } }
        .ws-cta:hover { animation: none; transform: translateY(-3px) scale(1.035); box-shadow: 0 8px 0 var(--cta-ink), 0 22px 32px -8px rgba(240,138,30,0.62), inset 0 2px 0 rgba(255,255,255,0.6), inset 0 -5px 8px rgba(176,90,8,0.28); }
        .ws-cta:active { animation: none; transform: translateY(4px) scale(0.99); box-shadow: 0 1px 0 var(--cta-ink), 0 5px 12px -8px rgba(240,138,30,0.5), inset 0 2px 0 rgba(255,255,255,0.5), inset 0 -3px 6px rgba(176,90,8,0.3); }
        .ws-cta .arrow {
            width: 28px; height: 28px; background: var(--cta-ink); color: var(--cta-from);
            border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
        }
        .ws-cta-secondary-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
        /* Playful chunky secondary pills — soft velvet body (tinted, not white) + glossy icon chip */
        .ws-cta-secondary {
            display: inline-flex; align-items: center; gap: 9px;
            background: linear-gradient(180deg, #FFFBF0 0%, #F4E7CC 100%);
            border: 2px solid #EAD9B6;
            color: var(--ink); font-family: var(--display);
            font-weight: 600; font-size: 14px;
            padding: 8px 18px 8px 9px; border-radius: var(--r-pill); white-space: nowrap;
            box-shadow:
                0 4px 0 #E0CEA6,
                0 10px 18px -9px rgba(7,12,28,0.6),
                inset 0 2px 2px rgba(255,255,255,0.9),
                inset 0 -7px 11px rgba(176,140,80,0.2);
            cursor: pointer;
            transition: transform 0.14s cubic-bezier(.34,1.5,.6,1), box-shadow 0.14s ease, background 0.14s ease, filter 0.14s ease;
        }
        .ws-cta-secondary:hover { transform: translateY(-2px); filter: brightness(1.03); box-shadow: 0 6px 0 #E0CEA6, 0 15px 22px -9px rgba(7,12,28,0.62), inset 0 2px 2px rgba(255,255,255,0.9), inset 0 -7px 11px rgba(176,140,80,0.2); }
        .ws-cta-secondary:active { transform: translateY(3px); box-shadow: 0 1px 0 #E0CEA6, 0 4px 9px -6px rgba(7,12,28,0.5), inset 0 2px 2px rgba(255,255,255,0.85), inset 0 -4px 8px rgba(176,140,80,0.22); }
        /* per-button velvet tint */
        .ws-cta-secondary.about {
            background: linear-gradient(180deg, #ECF5FD 0%, #D3E6F8 100%);
            border-color: #BFD8F0; color: #214E73;
            box-shadow: 0 4px 0 #B6D0EC, 0 10px 18px -9px rgba(7,12,28,0.55), inset 0 2px 2px rgba(255,255,255,0.85), inset 0 -7px 11px rgba(42,107,184,0.16);
        }
        .ws-cta-secondary.about:hover { box-shadow: 0 6px 0 #B6D0EC, 0 15px 22px -9px rgba(7,12,28,0.58), inset 0 2px 2px rgba(255,255,255,0.85), inset 0 -7px 11px rgba(42,107,184,0.16); }
        .ws-cta-secondary.about:active { box-shadow: 0 1px 0 #B6D0EC, 0 4px 9px -6px rgba(7,12,28,0.5), inset 0 2px 2px rgba(255,255,255,0.8), inset 0 -4px 8px rgba(42,107,184,0.2); }
        .ws-cta-secondary.learn {
            background: linear-gradient(180deg, #FFF6D8 0%, #FBEAB0 100%);
            border-color: #EFDCA0; color: #6B4E08;
            box-shadow: 0 4px 0 #E7CF86, 0 10px 18px -9px rgba(7,12,28,0.55), inset 0 2px 2px rgba(255,255,255,0.85), inset 0 -7px 11px rgba(201,155,20,0.18);
        }
        .ws-cta-secondary.learn:hover { box-shadow: 0 6px 0 #E7CF86, 0 15px 22px -9px rgba(7,12,28,0.58), inset 0 2px 2px rgba(255,255,255,0.85), inset 0 -7px 11px rgba(201,155,20,0.18); }
        .ws-cta-secondary.learn:active { box-shadow: 0 1px 0 #E7CF86, 0 4px 9px -6px rgba(7,12,28,0.5), inset 0 2px 2px rgba(255,255,255,0.8), inset 0 -4px 8px rgba(201,155,20,0.22); }
        .ws-cta-secondary .chip {
            width: 30px; height: 30px; flex: none; border-radius: 50%;
            display: inline-flex; align-items: center; justify-content: center;
            color: #fff;
            box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), inset 0 -3px 5px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.18);
        }
        .ws-cta-secondary .chip svg { width: 16px; height: 16px; }
        .ws-cta-secondary.about .chip { background: linear-gradient(180deg, #84C2EC, var(--hue-4)); }
        .ws-cta-secondary.learn .chip { background: linear-gradient(180deg, #FFE894, var(--hue-2)); color: #6B4E08; }

        /* ───── Flash screens (About / Learning outcomes) ───── */
        .fs-screen {
            position: fixed; inset: 0; overflow-y: auto; z-index: 10060; display: none;
            font-family: var(--ui); color: var(--cream);
            background:
                radial-gradient(ellipse 90% 50% at 50% -8%, rgba(255,201,90,0.1) 0%, transparent 55%),
                linear-gradient(140deg, var(--navy) 0%, var(--navy-2) 52%, var(--navy) 100%);
        }
        .fs-screen::before {
            content: ""; position: fixed; inset: 0; pointer-events: none;
            background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1px, transparent 0);
            background-size: 24px 24px;
        }
        .fs-screen.open { display: block; animation: wsFadeIn 0.35s ease; }
        .fs-screen.closing { animation: wsFadeOut 0.3s ease forwards; }

        .fs-topbar {
            position: sticky; top: 0; z-index: 2;
            background: linear-gradient(180deg, var(--navy) 68%, rgba(15,23,41,0));
            padding: 18px 24px 22px;
            display: flex; align-items: center; justify-content: space-between; gap: 14px;
            max-width: 760px; margin: 0 auto;
        }
        .fs-title { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--cream); letter-spacing: -0.01em; white-space: nowrap; }
        .fs-close-btn {
            background: rgba(255,255,255,0.06); color: var(--cream);
            border: 1.5px solid rgba(255,255,255,0.16);
            width: 40px; height: 40px; border-radius: 50%;
            display: inline-flex; align-items: center; justify-content: center;
            cursor: pointer; font-size: 16px; font-weight: 700; transition: background 0.15s; flex: none;
        }
        .fs-close-btn:hover { background: rgba(255,255,255,0.14); }
        .fs-content { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 0 24px 80px; }

        /* Tabbed About modal */
        .fs-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 720px; margin: 0 auto 20px; }
        .fs-tab {
            font-family: var(--ui); font-weight: 600; font-size: 13.5px;
            color: rgba(255,246,230,0.72);
            background: rgba(255,255,255,0.06);
            border: 1.5px solid rgba(255,255,255,0.14);
            padding: 9px 17px; border-radius: var(--r-pill);
            cursor: pointer; white-space: nowrap;
            transition: transform 0.14s cubic-bezier(.34,1.5,.6,1), background 0.15s, color 0.15s, box-shadow 0.15s;
        }
        .fs-tab:hover { background: rgba(255,255,255,0.12); color: #fff; transform: translateY(-1px); }
        .fs-tab.active {
            color: var(--cta-ink);
            background: linear-gradient(180deg, var(--cta-from) 0%, var(--cta-to) 100%);
            border-color: transparent;
            box-shadow: 0 3px 0 #B05A08, 0 8px 14px -6px rgba(240,138,30,0.5), inset 0 1.5px 0 rgba(255,255,255,0.5);
        }
        .fs-panel { display: none; }
        .fs-panel.active { display: block; animation: wsFadeIn 0.3s ease; }

        .ws-block {
            background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
            color: var(--ink); border-radius: var(--r-lg);
            padding: 32px 36px; margin-bottom: 18px;
            box-shadow: 0 4px 0 var(--cream-edge), 0 18px 40px -22px rgba(0,0,0,0.5);
        }
        .ws-block h2 {
            font-family: var(--display); font-size: 26px; font-weight: 700;
            color: var(--ink); margin: 0 0 16px; letter-spacing: -0.01em;
            display: inline-block;
        }
        .ws-block h2::after {
            content: ""; display: block; height: 4px; width: 46px; margin-top: 7px;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--hue-1), var(--hue-2));
        }
        .ws-block h3 { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--ink); margin: 18px 0 6px; }
        .ws-block p { font-family: var(--ui); font-size: 15px; line-height: 1.62; color: var(--ink-soft); margin: 0 0 12px; }
        .ws-block p strong, .ws-block li strong { color: var(--ink); font-weight: 700; }
        .ws-block ul { margin: 8px 0 14px 22px; padding: 0; }
        .ws-block li { font-family: var(--ui); font-size: 14.5px; line-height: 1.58; color: var(--ink-soft); margin-bottom: 8px; }
        .ws-block em { font-style: italic; color: var(--ink); }
        .ws-block .lede { font-size: 16px; color: var(--ink); font-weight: 500; margin-bottom: 14px; }
        .ws-block .t-num   { color: var(--hue-4);   font-weight: 700; }
        .ws-block .t-bloom { color: var(--hue-6);   font-weight: 700; }
        .ws-block .t-pv    { color: var(--hue-3-d); font-weight: 700; }
        .ws-block .t-star  { color: var(--hue-5);   font-weight: 700; }
        /* Colourful bold lead-ins for the How-to-play / What's-inside bullet lists —
           these were flat --ink, which made those tabs look dull next to About. Cycle
           the readable hues (skipping yellow, which is weak on cream). */
        .ws-block li:nth-child(5n+1) strong { color: var(--hue-4); }    /* blue */
        .ws-block li:nth-child(5n+2) strong { color: var(--hue-6); }    /* pink */
        .ws-block li:nth-child(5n+3) strong { color: var(--hue-3-d); }  /* teal */
        .ws-block li:nth-child(5n+4) strong { color: var(--hue-5); }    /* purple */
        .ws-block li:nth-child(5n+5) strong { color: var(--hue-1); }    /* coral */

        .ws-cbse {
            margin-top: 18px; padding: 15px 18px;
            background: var(--cream-deep);
            border-left: 4px solid var(--hue-4); border-radius: 10px;
        }
        .ws-cbse h3 { margin-top: 0; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
        .ws-cbse li { font-size: 14px; }

        .ws-related-head { text-align: center; font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--cream); margin: 38px 0 16px; }
        .ws-related { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 28px; }
        .ws-related-link {
            display: flex; align-items: center; gap: 13px;
            background: rgba(255,255,255,0.055);
            border: 1.5px solid rgba(255,255,255,0.14); color: var(--cream);
            text-decoration: none; padding: 13px 15px; border-radius: 16px;
            box-shadow: 0 3px 0 rgba(0,0,0,0.22);
            transition: transform 0.15s cubic-bezier(.34,1.4,.6,1), background 0.15s, box-shadow 0.15s;
        }
        .ws-related-link:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); box-shadow: 0 5px 0 rgba(0,0,0,0.26); }
        .ws-related-link:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,0.22); }
        .ws-related-link .r-chip {
            width: 36px; height: 36px; flex: none; border-radius: 50%;
            display: inline-flex; align-items: center; justify-content: center; color: #fff;
            box-shadow: inset 0 2px 0 rgba(255,255,255,0.45), inset 0 -3px 5px rgba(0,0,0,0.22), 0 2px 5px rgba(0,0,0,0.3);
        }
        .ws-related-link .r-chip svg { width: 18px; height: 18px; }
        .ws-related-link .r-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
        .ws-related-link .r-text b { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--cream); }
        .ws-related-link .r-text small { font-family: var(--ui); font-size: 12px; color: rgba(255,246,230,0.55); font-weight: 400; }
        .ws-related-link .arrow {
            margin-left: auto; flex: none; width: 26px; height: 26px; border-radius: 50%;
            background: rgba(255,255,255,0.1); color: var(--cream); opacity: 0.85;
            display: inline-flex; align-items: center; justify-content: center;
            transition: background 0.15s, transform 0.15s;
        }
        .ws-related-link:hover .arrow { background: rgba(255,255,255,0.18); transform: translateX(2px); }
        .r-chip.c1 { background: linear-gradient(180deg, #FFE894, var(--hue-2)); color: #6B4E08; }
        .r-chip.c2 { background: linear-gradient(180deg, #84C2EC, var(--hue-4)); }
        .r-chip.c3 { background: linear-gradient(180deg, #9BEAE4, var(--hue-3)); color: #07403C; }
        .r-chip.c4 { background: linear-gradient(180deg, #C99BDD, var(--hue-5)); }

        .ws-footer-back { text-align: center; margin-top: 14px; }
        .ws-footer-back a {
            display: inline-flex; align-items: center; gap: 7px;
            background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.14);
            color: var(--cream); opacity: 0.85; text-decoration: none;
            padding: 10px 18px; border-radius: var(--r-pill);
            font-family: var(--ui); font-weight: 500; font-size: 13.5px;
            transition: background 0.15s, transform 0.15s, opacity 0.15s;
        }
        .ws-footer-back a:hover { opacity: 1; background: rgba(255,255,255,0.12); transform: translateY(-1px); }

        /* Mobile */
        @media (max-width: 560px) {
            .ws-card { padding: 38px 24px 32px; }
            .ws-card h1 { font-size: 40px; }
            .ws-mascot { width: 156px; height: 156px; }
            .mg-logo-word { font-size: 20px; }
            .ws-block { padding: 24px 22px; }
            .ws-block h2 { font-size: 22px; }
            .ws-topbar { padding: 14px 16px 0; }
            .ws-back-link { font-size: 12.5px; padding: 8px 12px; }
            .fs-topbar { padding: 14px 16px 18px; }
            .fs-title { font-size: 18px; }
            .fs-content { padding: 0 14px 60px; }
        }