{"id":695,"date":"2026-07-05T05:39:44","date_gmt":"2026-07-05T05:39:44","guid":{"rendered":"https:\/\/dflwf.com\/academy\/?page_id=695"},"modified":"2026-07-09T08:40:11","modified_gmt":"2026-07-09T08:40:11","slug":"maths-is-fun","status":"publish","type":"page","link":"https:\/\/dflwf.com\/academy\/maths-is-fun\/","title":{"rendered":"Math&#8217;s is fun"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"695\" class=\"elementor elementor-695\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a9ab7d3 e-con e-atomic-element e-flexbox-base e-dfd1746 \" data-id=\"a9ab7d3\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"a9ab7d3\">\n    \t\t<div class=\"elementor-element elementor-element-97856f8 elementor-widget elementor-widget-html\" data-id=\"97856f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- DFL MathSprint 3D Hero Block Start -->\r\n<style>\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Fredoka:wght@500;600;700&family=Poppins:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap');\r\n\r\n    #dfl-arena-hero {\r\n        --paper: #ffffff;\r\n        --paper-tint: #f5f7fc;\r\n        --ink-900: #0f1b3d;\r\n        --ink-700: #33406b;\r\n        --ink-500: #6b7592;\r\n        --navy-800: #101f4c;\r\n        --navy-700: #1c3677;\r\n        --navy-600: #24408f;\r\n        --navy-500: #3a56a8;\r\n        --gold: #ffcd00;\r\n        --gold-deep: #d9a600;\r\n        --gold-pale: #fff4c8;\r\n        --line: rgba(28,54,119,0.10);\r\n\r\n        position: relative;\r\n        width: 100%;\r\n        padding: 90px 24px 80px;\r\n        background-color: var(--paper);\r\n        overflow: hidden;\r\n        font-family: 'Poppins', system-ui, -apple-system, sans-serif !important;\r\n    }\r\n\r\n    #dfl-arena-hero * { box-sizing: border-box; }\r\n\r\n    \/* Faint graph-paper texture, fading toward the edges *\/\r\n    .arena-texture {\r\n        position: absolute;\r\n        inset: 0;\r\n        z-index: 0;\r\n        background-image:\r\n            linear-gradient(var(--line) 1px, transparent 1px),\r\n            linear-gradient(90deg, var(--line) 1px, transparent 1px);\r\n        background-size: 46px 46px;\r\n        -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0,0,0,0.9) 0%, transparent 75%);\r\n        mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0,0,0,0.9) 0%, transparent 75%);\r\n        pointer-events: none;\r\n    }\r\n\r\n    .arena-wrap {\r\n        position: relative;\r\n        z-index: 5;\r\n        max-width: 1160px;\r\n        margin: 0 auto;\r\n        display: grid;\r\n        grid-template-columns: 1.05fr 0.95fr;\r\n        align-items: center;\r\n        gap: 40px;\r\n    }\r\n\r\n    \/* ---------- Left column: copy ---------- *\/\r\n    .arena-copy { position: relative; z-index: 4; }\r\n\r\n    .arena-badge {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 9px;\r\n        background: linear-gradient(135deg, #ffe066 0%, var(--gold) 100%);\r\n        color: var(--navy-800);\r\n        font-family: 'Space Grotesk', sans-serif;\r\n        font-size: 0.8rem;\r\n        font-weight: 700;\r\n        padding: 7px 18px;\r\n        border-radius: 50px;\r\n        margin-bottom: 24px;\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        box-shadow: 0 6px 16px rgba(217,166,0,0.28);\r\n    }\r\n    .arena-badge .dot {\r\n        width: 7px; height: 7px; border-radius: 50%;\r\n        background: var(--navy-800);\r\n        animation: arena-pulse 1.4s ease-in-out infinite;\r\n    }\r\n\r\n    .arena-copy h1 {\r\n        font-family: 'Fredoka', sans-serif;\r\n        font-size: 3.6rem;\r\n        font-weight: 700;\r\n        color: var(--ink-900);\r\n        line-height: 1.05;\r\n        margin: 0 0 6px 0;\r\n        letter-spacing: -0.5px;\r\n    }\r\n    .arena-copy h1 .accent {\r\n        color: var(--navy-700);\r\n        position: relative;\r\n        display: inline-block;\r\n    }\r\n    .arena-copy h1 .accent::after {\r\n        content: '';\r\n        position: absolute;\r\n        left: -2px; right: -2px; bottom: 6px;\r\n        height: 14px;\r\n        background: var(--gold-pale);\r\n        z-index: -1;\r\n        border-radius: 4px;\r\n    }\r\n\r\n    .arena-copy h2 {\r\n        font-family: 'Fredoka', sans-serif;\r\n        font-size: 1.4rem;\r\n        font-weight: 500;\r\n        color: var(--ink-700);\r\n        margin: 0 0 22px 0;\r\n    }\r\n\r\n    .arena-copy p {\r\n        font-size: 1.05rem;\r\n        font-weight: 400;\r\n        color: var(--ink-500);\r\n        line-height: 1.7;\r\n        margin: 0 0 32px 0;\r\n        max-width: 480px;\r\n    }\r\n\r\n    .arena-cta-row {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 20px;\r\n        flex-wrap: wrap;\r\n        margin-bottom: 42px;\r\n    }\r\n\r\n    .arena-btn {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        background: linear-gradient(135deg, var(--navy-600) 0%, var(--navy-800) 100%);\r\n        color: var(--gold);\r\n        font-family: 'Space Grotesk', sans-serif;\r\n        font-size: 1.05rem;\r\n        font-weight: 700;\r\n        padding: 16px 34px;\r\n        border-radius: 50px;\r\n        text-decoration: none;\r\n        letter-spacing: 0.3px;\r\n        transition: transform 0.25s ease, box-shadow 0.25s ease;\r\n        box-shadow: 0 16px 30px rgba(16,31,76,0.28), 0 2px 0 rgba(255,255,255,0.08) inset;\r\n    }\r\n    .arena-btn:hover {\r\n        transform: translateY(-3px);\r\n        box-shadow: 0 20px 36px rgba(16,31,76,0.34), 0 2px 0 rgba(255,255,255,0.08) inset;\r\n    }\r\n    .arena-btn svg { width: 18px; height: 18px; }\r\n\r\n    .arena-stats {\r\n        display: flex;\r\n        gap: 34px;\r\n        flex-wrap: wrap;\r\n        padding-top: 26px;\r\n        border-top: 1px solid var(--line);\r\n    }\r\n    .arena-stat { display: flex; flex-direction: column; }\r\n    .arena-stat .num {\r\n        font-family: 'Space Grotesk', sans-serif;\r\n        font-size: 1.6rem;\r\n        font-weight: 700;\r\n        color: var(--navy-700);\r\n        line-height: 1.1;\r\n    }\r\n    .arena-stat .lbl {\r\n        font-size: 0.8rem;\r\n        font-weight: 500;\r\n        color: var(--ink-500);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n        margin-top: 3px;\r\n    }\r\n\r\n    \/* ---------- Right column: 3D scene ---------- *\/\r\n    .arena-scene-outer {\r\n        position: relative;\r\n        z-index: 3;\r\n        height: 440px;\r\n        perspective: 1300px;\r\n    }\r\n\r\n    .arena-ring {\r\n        position: absolute;\r\n        top: 50%; left: 50%;\r\n        width: 340px; height: 340px;\r\n        margin: -170px 0 0 -170px;\r\n        border-radius: 50%;\r\n        border: 1.5px dashed rgba(28,54,119,0.18);\r\n        animation: arena-ring-spin 30s linear infinite;\r\n    }\r\n    .arena-ring::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: -3px; left: 50%;\r\n        width: 8px; height: 8px;\r\n        margin-left: -4px;\r\n        border-radius: 50%;\r\n        background: var(--gold);\r\n        box-shadow: 0 0 0 4px var(--gold-pale);\r\n    }\r\n\r\n    .arena-podium-shadow {\r\n        position: absolute;\r\n        top: 62%; left: 50%;\r\n        width: 220px; height: 46px;\r\n        margin-left: -110px;\r\n        background: radial-gradient(ellipse at center, rgba(16,31,76,0.22) 0%, transparent 72%);\r\n        border-radius: 50%;\r\n        z-index: 0;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .arena-parallax {\r\n        position: relative;\r\n        width: 100%;\r\n        height: 100%;\r\n        transform-style: preserve-3d;\r\n        transition: transform 0.15s ease-out;\r\n    }\r\n\r\n    \/* The rotating die *\/\r\n    .arena-cube-holder {\r\n        position: absolute;\r\n        top: 48%; left: 50%;\r\n        width: 150px; height: 150px;\r\n        margin: -75px 0 0 -75px;\r\n        transform-style: preserve-3d;\r\n    }\r\n    .arena-cube {\r\n        position: relative;\r\n        width: 100%; height: 100%;\r\n        transform-style: preserve-3d;\r\n        animation: arena-spin 16s linear infinite;\r\n    }\r\n    .arena-face {\r\n        position: absolute;\r\n        width: 150px; height: 150px;\r\n        display: flex; align-items: center; justify-content: center;\r\n        font-family: 'Fredoka', sans-serif;\r\n        font-size: 3.6rem;\r\n        font-weight: 600;\r\n        border-radius: 22px;\r\n        backface-visibility: hidden;\r\n        box-shadow: 0 2px 0 rgba(255,255,255,0.18) inset;\r\n    }\r\n    .face-navy {\r\n        background: linear-gradient(150deg, var(--navy-500) 0%, var(--navy-800) 100%);\r\n        color: var(--gold);\r\n        border: 1px solid rgba(255,255,255,0.08);\r\n    }\r\n    .face-gold {\r\n        background: linear-gradient(150deg, #ffe066 0%, var(--gold) 55%, var(--gold-deep) 100%);\r\n        color: var(--navy-800);\r\n        border: 1px solid rgba(16,31,76,0.08);\r\n    }\r\n    .face-front  { transform: translateZ(75px); }\r\n    .face-back   { transform: rotateY(180deg) translateZ(75px); }\r\n    .face-right  { transform: rotateY(90deg) translateZ(75px); }\r\n    .face-left   { transform: rotateY(-90deg) translateZ(75px); }\r\n    .face-top    { transform: rotateX(90deg) translateZ(75px); }\r\n    .face-bottom { transform: rotateX(-90deg) translateZ(75px); }\r\n\r\n    \/* Floating tiles orbiting the die *\/\r\n    .arena-tile {\r\n        position: absolute;\r\n        display: flex; align-items: center; justify-content: center;\r\n        font-family: 'Space Grotesk', sans-serif;\r\n        font-weight: 700;\r\n        border-radius: 16px;\r\n        transform-style: preserve-3d;\r\n    }\r\n    .tile-1 {\r\n        top: 6%; left: 4%;\r\n        width: 76px; height: 76px;\r\n        font-size: 1.9rem;\r\n        background: var(--paper);\r\n        color: var(--navy-700);\r\n        border: 1.5px solid var(--line);\r\n        box-shadow: 0 14px 28px rgba(16,31,76,0.14);\r\n        transform: translateZ(50px) rotate(-8deg);\r\n        animation: arena-float-a 5s ease-in-out infinite;\r\n    }\r\n    .tile-2 {\r\n        bottom: 16%; left: -1%;\r\n        width: 62px; height: 62px;\r\n        font-size: 1.5rem;\r\n        background: linear-gradient(150deg, #ffe066 0%, var(--gold) 100%);\r\n        color: var(--navy-800);\r\n        box-shadow: 0 12px 22px rgba(217,166,0,0.30);\r\n        transform: translateZ(70px) rotate(10deg);\r\n        animation: arena-float-b 4.5s ease-in-out infinite;\r\n    }\r\n    .tile-3 {\r\n        top: 10%; right: 2%;\r\n        width: 68px; height: 68px;\r\n        font-size: 1.5rem;\r\n        background: var(--paper);\r\n        color: var(--navy-700);\r\n        border: 1.5px solid var(--line);\r\n        box-shadow: 0 14px 28px rgba(16,31,76,0.14);\r\n        transform: translateZ(30px) rotate(6deg);\r\n        animation: arena-float-a 5.5s ease-in-out infinite reverse;\r\n    }\r\n    .tile-4 {\r\n        bottom: 8%; right: 6%;\r\n        width: 80px; height: 80px;\r\n        font-size: 2rem;\r\n        background: linear-gradient(150deg, var(--navy-500) 0%, var(--navy-800) 100%);\r\n        color: var(--gold);\r\n        box-shadow: 0 16px 30px rgba(16,31,76,0.26);\r\n        transform: translateZ(60px) rotate(-6deg);\r\n        animation: arena-float-b 6s ease-in-out infinite;\r\n    }\r\n\r\n    @keyframes arena-spin {\r\n        0%   { transform: rotateX(0deg) rotateY(0deg); }\r\n        100% { transform: rotateX(360deg) rotateY(360deg); }\r\n    }\r\n    @keyframes arena-ring-spin {\r\n        0%   { transform: rotate(0deg); }\r\n        100% { transform: rotate(360deg); }\r\n    }\r\n    @keyframes arena-float-a {\r\n        0%, 100% { transform: translateZ(50px) rotate(-8deg) translateY(0px); }\r\n        50%      { transform: translateZ(50px) rotate(-8deg) translateY(-16px); }\r\n    }\r\n    @keyframes arena-float-b {\r\n        0%, 100% { transform: translateZ(70px) rotate(10deg) translateY(0px); }\r\n        50%      { transform: translateZ(70px) rotate(10deg) translateY(-14px); }\r\n    }\r\n    @keyframes arena-pulse {\r\n        0%, 100% { opacity: 1; }\r\n        50%      { opacity: 0.3; }\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n        .arena-cube, .arena-ring, .tile-1, .tile-2, .tile-3, .tile-4, .arena-badge .dot {\r\n            animation: none !important;\r\n        }\r\n    }\r\n\r\n    \/* ---------- Responsive ---------- *\/\r\n    @media (max-width: 980px) {\r\n        .arena-wrap { grid-template-columns: 1fr; text-align: center; }\r\n        .arena-copy p { margin-left: auto; margin-right: auto; }\r\n        .arena-cta-row, .arena-stats { justify-content: center; }\r\n        .arena-scene-outer { height: 320px; order: -1; }\r\n        .arena-copy h1 { font-size: 2.6rem; }\r\n    }\r\n    @media (max-width: 480px) {\r\n        #dfl-arena-hero { padding: 60px 16px 50px; }\r\n        .arena-copy h1 { font-size: 2.1rem; }\r\n        .arena-copy h2 { font-size: 1.15rem; }\r\n        .arena-btn { font-size: 0.95rem; padding: 14px 26px; width: 100%; justify-content: center; }\r\n        .arena-stats { gap: 24px; }\r\n        .arena-ring { width: 240px; height: 240px; margin: -120px 0 0 -120px; }\r\n        .arena-cube-holder { width: 110px; height: 110px; margin: -55px 0 0 -55px; }\r\n        .arena-face { width: 110px; height: 110px; font-size: 2.6rem; }\r\n    }\r\n<\/style>\r\n\r\n<section id=\"dfl-arena-hero\">\r\n    <div class=\"arena-texture\"><\/div>\r\n\r\n    <div class=\"arena-wrap\">\r\n        <div class=\"arena-copy\">\r\n            <div class=\"arena-badge\"><span class=\"dot\"><\/span> Live Daily Challenge<\/div>\r\n\r\n            <h1>Math's <span class=\"accent\">Arena<\/span><\/h1>\r\n            <h2>The 60-second speed championship<\/h2>\r\n\r\n            <p>Sharpen your calculation speed, climb the live leaderboard, and unlock DFL Academy badges. One round is sixty seconds &mdash; see how many you can crack.<\/p>\r\n\r\n            <div class=\"arena-cta-row\">\r\n                <a href=\"#dfl-mathsprint-widget\" class=\"arena-btn\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon><\/svg>\r\n                    Enter the Arena\r\n                <\/a>\r\n            <\/div>\r\n\r\n            <div class=\"arena-stats\">\r\n                <div class=\"arena-stat\"><span class=\"num\">100+<\/span><span class=\"lbl\">Players today<\/span><\/div>\r\n                <div class=\"arena-stat\"><span class=\"num\">60 sec<\/span><span class=\"lbl\">Per round<\/span><\/div>\r\n                <div class=\"arena-stat\"><span class=\"num\">V&ndash;X<\/span><span class=\"lbl\">ICSE &amp; CBSE<\/span><\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"arena-scene-outer\" id=\"arena-scene-outer\">\r\n            <div class=\"arena-podium-shadow\"><\/div>\r\n            <div class=\"arena-ring\"><\/div>\r\n            <div class=\"arena-parallax\" id=\"arena-parallax\">\r\n                <div class=\"arena-tile tile-1\">7<\/div>\r\n                <div class=\"arena-tile tile-2\">&times;<\/div>\r\n                <div class=\"arena-tile tile-3\">42<\/div>\r\n                <div class=\"arena-tile tile-4\">&divide;<\/div>\r\n\r\n                <div class=\"arena-cube-holder\">\r\n                    <div class=\"arena-cube\">\r\n                        <div class=\"arena-face face-navy face-front\">+<\/div>\r\n                        <div class=\"arena-face face-gold face-back\">&minus;<\/div>\r\n                        <div class=\"arena-face face-gold face-right\">&times;<\/div>\r\n                        <div class=\"arena-face face-navy face-left\">&divide;<\/div>\r\n                        <div class=\"arena-face face-navy face-top\">=<\/div>\r\n                        <div class=\"arena-face face-gold face-bottom\">%<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function () {\r\n    var sceneOuter = document.getElementById('arena-scene-outer');\r\n    var parallax = document.getElementById('arena-parallax');\r\n    if (!sceneOuter || !parallax) return;\r\n\r\n    var reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n    if (reduceMotion) return;\r\n\r\n    var bounds = null;\r\n    function updateBounds() { bounds = sceneOuter.getBoundingClientRect(); }\r\n    updateBounds();\r\n    window.addEventListener('resize', updateBounds);\r\n\r\n    function handleMove(clientX, clientY) {\r\n        if (!bounds) updateBounds();\r\n        var relX = (clientX - bounds.left) \/ bounds.width;\r\n        var relY = (clientY - bounds.top) \/ bounds.height;\r\n        var rotateY = (relX - 0.5) * 22;\r\n        var rotateX = (0.5 - relY) * 18;\r\n        parallax.style.transform = 'rotateY(' + rotateY + 'deg) rotateX(' + rotateX + 'deg)';\r\n    }\r\n\r\n    sceneOuter.addEventListener('mousemove', function (e) {\r\n        handleMove(e.clientX, e.clientY);\r\n    });\r\n    sceneOuter.addEventListener('mouseleave', function () {\r\n        parallax.style.transform = 'rotateY(0deg) rotateX(0deg)';\r\n    });\r\n    sceneOuter.addEventListener('touchmove', function (e) {\r\n        if (e.touches && e.touches[0]) {\r\n            handleMove(e.touches[0].clientX, e.touches[0].clientY);\r\n        }\r\n    }, { passive: true });\r\n})();\r\n<\/script>\r\n<!-- DFL MathSprint 3D Hero Block End -->\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-9479b2d e-con e-atomic-element e-flexbox-base e-3252f97 \" data-id=\"9479b2d\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"9479b2d\">\n    \t\t<div class=\"elementor-element elementor-element-fa5b6d2 elementor-widget elementor-widget-html\" data-id=\"fa5b6d2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- DFL MathSprint Block Widget Start -->\r\n<style>\r\n    \/* Importing Poppins to match the website's geometric sans-serif typography *\/\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');\r\n\r\n    \/* Scoped CSS: Prefixed to prevent conflicts with your main site *\/\r\n    #dfl-mathsprint-widget {\r\n        \/* Brand Colors based on the provided image *\/\r\n        --dfl-blue: #1c3677;    \/* The deep navy blue *\/\r\n        --dfl-yellow: #ffcd00;  \/* The bright yellow *\/\r\n        --dfl-dark: #111827;    \r\n        --dfl-gray-light: #f9fafb;\r\n        --dfl-gray-border: #e5e7eb;\r\n        --dfl-white: #ffffff;\r\n        --dfl-green: #10b981;\r\n        --dfl-red: #ef4444;\r\n        \r\n        width: 100%;\r\n        max-width: 700px;\r\n        margin: 40px auto;\r\n        position: relative;\r\n        background-color: var(--dfl-white);\r\n        border: 1px solid var(--dfl-gray-border);\r\n        border-radius: 16px;\r\n        box-shadow: 0 10px 30px rgba(28, 54, 119, 0.08);\r\n        overflow: hidden;\r\n        color: var(--dfl-dark);\r\n        \/* Enforcing the font *\/\r\n        font-family: 'Poppins', system-ui, -apple-system, sans-serif !important;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    #dfl-mathsprint-widget * {\r\n        box-sizing: border-box;\r\n        font-family: 'Poppins', system-ui, -apple-system, sans-serif !important;\r\n    }\r\n\r\n    \/* --- Header Section --- *\/\r\n    #dfl-mathsprint-widget header {\r\n        text-align: center;\r\n        padding: 25px 20px 20px 20px;\r\n        background: var(--dfl-white);\r\n        border-bottom: 4px solid var(--dfl-yellow);\r\n    }\r\n\r\n    #dfl-mathsprint-widget h1 { \r\n        color: var(--dfl-blue);\r\n        font-size: 2.2rem; \r\n        text-transform: uppercase; \r\n        font-weight: 900 !important;\r\n        margin: 0 0 5px 0;\r\n        line-height: 1.2;\r\n        letter-spacing: 0.5px;\r\n    }\r\n    \r\n    #dfl-mathsprint-widget .subtitle { \r\n        font-size: 1.1rem; \r\n        color: var(--dfl-dark); \r\n        font-weight: 700 !important;\r\n        margin: 0;\r\n    }\r\n\r\n    #dfl-mathsprint-widget .container {\r\n        padding: 30px 20px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        background-color: var(--dfl-gray-light);\r\n    }\r\n\r\n    \/* --- Screens & Animations --- *\/\r\n    #dfl-mathsprint-widget .screen { display: none; animation: ms-fadeIn 0.4s ease forwards; }\r\n    #dfl-mathsprint-widget .screen.active { display: block; }\r\n\r\n    @keyframes ms-fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\r\n    @keyframes ms-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }\r\n    @keyframes ms-pop { 0% { transform: scale(1); } 50% { transform: scale(1.15); color: var(--dfl-blue);} 100% { transform: scale(1); } }\r\n\r\n    \/* --- Cards --- *\/\r\n    #dfl-mathsprint-widget .card {\r\n        background: var(--dfl-white);\r\n        padding: 35px;\r\n        border-radius: 12px;\r\n        box-shadow: 0 4px 6px rgba(0,0,0,0.05);\r\n        border: 1px solid var(--dfl-gray-border);\r\n    }\r\n\r\n    \/* --- Forms & Inputs --- *\/\r\n    #dfl-mathsprint-widget .form-group { margin-bottom: 20px; text-align: left; }\r\n    #dfl-mathsprint-widget label { display: block; margin-bottom: 8px; color: var(--dfl-blue); font-weight: 700 !important; font-size: 0.95rem; }\r\n    #dfl-mathsprint-widget input, #dfl-mathsprint-widget select {\r\n        width: 100%; padding: 14px; border-radius: 8px; border: 2px solid var(--dfl-gray-border);\r\n        background: var(--dfl-white); color: var(--dfl-dark); font-size: 1rem; font-weight: 500 !important;\r\n        transition: all 0.2s ease;\r\n    }\r\n    #dfl-mathsprint-widget input:focus, #dfl-mathsprint-widget select:focus { outline: none; border-color: var(--dfl-blue); }\r\n\r\n    \/* --- Buttons --- *\/\r\n    #dfl-mathsprint-widget .btn {\r\n        width: 100%; padding: 16px; border: none; border-radius: 50px;\r\n        background: var(--dfl-yellow); color: var(--dfl-dark); font-size: 1.1rem;\r\n        font-weight: 800 !important; cursor: pointer; transition: all 0.2s ease; \r\n        text-transform: uppercase; letter-spacing: 0.5px;\r\n        box-shadow: 0 4px 10px rgba(255, 205, 0, 0.3);\r\n    }\r\n    #dfl-mathsprint-widget .btn:hover { background: #e6b800; transform: translateY(-2px); }\r\n    #dfl-mathsprint-widget .btn-secondary { background: var(--dfl-blue); color: var(--dfl-white); box-shadow: 0 4px 10px rgba(28, 54, 119, 0.2); margin-top: 15px; }\r\n    #dfl-mathsprint-widget .btn-secondary:hover { background: #132552; }\r\n\r\n    \/* --- Dashboard UI --- *\/\r\n    #dfl-mathsprint-widget .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px; }\r\n    #dfl-mathsprint-widget .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 15px; }\r\n    #dfl-mathsprint-widget .topic-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));\r\n        gap: 10px;\r\n        margin-top: 15px;\r\n    }\r\n    \r\n    @media (max-width: 480px) {\r\n        #dfl-mathsprint-widget .grid-3 { grid-template-columns: 1fr; }\r\n        #dfl-mathsprint-widget .topic-grid { grid-template-columns: 1fr 1fr; }\r\n    }\r\n    \r\n    #dfl-mathsprint-widget .mode-card, #dfl-mathsprint-widget .topic-card {\r\n        background: var(--dfl-white); border: 2px solid var(--dfl-gray-border); border-radius: 12px;\r\n        padding: 15px 10px; text-align: center; cursor: pointer; transition: all 0.2s ease; font-weight: 700 !important; color: var(--dfl-blue);\r\n    }\r\n    #dfl-mathsprint-widget .mode-card.selected, #dfl-mathsprint-widget .topic-card.selected { \r\n        border-color: var(--dfl-blue); background: rgba(28, 54, 119, 0.05); color: var(--dfl-blue);\r\n    }\r\n    #dfl-mathsprint-widget .mode-card small, #dfl-mathsprint-widget .topic-card small { display: block; font-size: 0.72rem; color: #6b7280; margin-top: 5px; font-weight: 500 !important;}\r\n\r\n    #dfl-mathsprint-widget .player-stats {\r\n        display: flex; justify-content: space-between; align-items: center; background: var(--dfl-blue); color: var(--dfl-white);\r\n        padding: 15px 20px; border-radius: 12px; margin-bottom: 25px;\r\n    }\r\n\r\n    \/* --- Game UI --- *\/\r\n    #dfl-mathsprint-widget .game-header { display: flex; justify-content: space-between; margin-bottom: 15px; font-weight: 700 !important; color: var(--dfl-blue); font-size: 1.1rem;}\r\n    #dfl-mathsprint-widget .timer { font-size: 1.6rem; color: var(--dfl-dark); font-weight: 900 !important; background: var(--dfl-yellow); padding: 5px 15px; border-radius: 50px; }\r\n    #dfl-mathsprint-widget .question-box { font-size: 4.5rem; text-align: center; margin: 20px 0; font-weight: 900 !important; color: var(--dfl-blue); letter-spacing: 2px; }\r\n    #dfl-mathsprint-widget .answer-display {\r\n        background: var(--dfl-gray-light); border: 2px solid var(--dfl-gray-border); height: 70px;\r\n        border-radius: 12px; margin-bottom: 25px; display: flex; align-items: center;\r\n        justify-content: center; font-size: 2.5rem; font-weight: 800 !important; color: var(--dfl-dark);\r\n    }\r\n\r\n    #dfl-mathsprint-widget .numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }\r\n    #dfl-mathsprint-widget .num-btn {\r\n        background: var(--dfl-white); color: var(--dfl-blue); font-size: 1.5rem; font-weight: 800 !important;\r\n        padding: 15px; border: 2px solid var(--dfl-gray-border); border-radius: 12px; cursor: pointer; transition: 0.1s;\r\n    }\r\n    #dfl-mathsprint-widget .num-btn:hover { border-color: var(--dfl-blue); background: rgba(28, 54, 119, 0.05); }\r\n    #dfl-mathsprint-widget .num-btn:active { background: var(--dfl-blue); color: var(--dfl-white); }\r\n    #dfl-mathsprint-widget .num-btn.zero { grid-column: span 2; }\r\n    #dfl-mathsprint-widget .num-btn.clear-btn { background: var(--dfl-red); color: white; border-color: var(--dfl-red); }\r\n    \r\n    #dfl-mathsprint-widget .feedback-text { text-align: center; font-size: 1.2rem; min-height: 30px; color: var(--dfl-blue); font-weight: 800 !important; }\r\n    \r\n    #dfl-mathsprint-widget .correct-anim { border-color: var(--dfl-green); background: rgba(16, 185, 129, 0.05); box-shadow: 0 0 0 2px var(--dfl-green);}\r\n    #dfl-mathsprint-widget .wrong-anim { animation: ms-shake 0.4s; border-color: var(--dfl-red); background: rgba(239, 68, 68, 0.05); box-shadow: 0 0 0 2px var(--dfl-red);}\r\n\r\n    \/* --- Report UI --- *\/\r\n    #dfl-mathsprint-widget .report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 25px 0; }\r\n    #dfl-mathsprint-widget .stat-box { background: var(--dfl-gray-light); padding: 15px; border-radius: 12px; text-align: center; border: 1px solid var(--dfl-gray-border); font-weight: 700 !important; font-size: 0.9rem;}\r\n    #dfl-mathsprint-widget .stat-box span { display: block; font-size: 1.5rem; color: var(--dfl-blue); font-weight: 900 !important; margin-top: 5px; }\r\n    \r\n    #dfl-mathsprint-widget .level-badge {\r\n        background: var(--dfl-yellow); color: var(--dfl-dark); padding: 10px 30px; border-radius: 50px;\r\n        display: inline-block; font-weight: 800 !important; font-size: 1.3rem; margin: 15px 0;\r\n        text-transform: uppercase;\r\n    }\r\n\r\n    #dfl-mathsprint-widget #apiStatus { text-align: center; margin-top: 20px; font-weight: 700 !important; padding: 12px; border-radius: 8px; background: var(--dfl-white); border: 1px solid var(--dfl-gray-border);}\r\n    #dfl-mathsprint-widget .status-success { color: var(--dfl-green); border-color: var(--dfl-green) !important; background: rgba(16,185,129,0.1) !important;}\r\n    #dfl-mathsprint-widget .status-error { color: var(--dfl-red); border-color: var(--dfl-red) !important; background: rgba(239,68,68,0.1) !important;}\r\n    \r\n    #ms-confetti-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; }\r\n    \r\n    #dfl-mathsprint-widget h2, #dfl-mathsprint-widget h3 { margin: 0 0 15px 0; color: var(--dfl-blue); font-weight: 800 !important;}\r\n<\/style>\r\n\r\n<div id=\"dfl-mathsprint-widget\">\r\n    <canvas id=\"ms-confetti-canvas\"><\/canvas>\r\n\r\n    <header>\r\n        <h1>DFL Math's Arena<\/h1>\r\n        <div class=\"subtitle\">Math's is fun<\/div>\r\n    <\/header>\r\n\r\n    <div class=\"container\">\r\n        <!-- REGISTRATION SCREEN -->\r\n        <div id=\"ms-registration-screen\" class=\"screen active\">\r\n            <div class=\"card\">\r\n                <h2 style=\"text-align: center; margin-bottom: 25px;\">Player Profile<\/h2>\r\n                <div class=\"form-group\">\r\n                    <label>Full Name *<\/label>\r\n                    <input type=\"text\" id=\"ms-regName\" placeholder=\"Enter your name\" required>\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label>WhatsApp Number * (10 Digits)<\/label>\r\n                    <input type=\"tel\" id=\"ms-regPhone\" placeholder=\"e.g. 9876543210\" maxlength=\"10\" required>\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label>Class \/ Category *<\/label>\r\n                    <select id=\"ms-regClass\">\r\n                        <option value=\"V\">Class V<\/option>\r\n                        <option value=\"VI\">Class VI<\/option>\r\n                        <option value=\"VII\">Class VII<\/option>\r\n                        <option value=\"VIII\">Class VIII<\/option>\r\n                        <option value=\"IX\">Class IX<\/option>\r\n                        <option value=\"X\">Class X<\/option>\r\n                        <option value=\"XI\">Class XI<\/option>\r\n                        <option value=\"XII\">Class XII<\/option>\r\n                        <option value=\"College\">College Student<\/option>\r\n                        <option value=\"Parent\">Parent \/ Working Professional<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label>School\/College Name (Optional)<\/label>\r\n                    <input type=\"text\" id=\"ms-regSchool\" placeholder=\"Your institution name\">\r\n                <\/div>\r\n                <button class=\"btn\" style=\"margin-top: 10px;\" onclick=\"ms_registerPlayer()\">Enter Challenge<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- DASHBOARD SCREEN -->\r\n        <div id=\"ms-dashboard-screen\" class=\"screen\">\r\n            <div class=\"card\">\r\n                <div class=\"player-stats\">\r\n                    <div>\r\n                        <span id=\"ms-dashName\" style=\"font-weight:800; color:var(--dfl-yellow); font-size: 1.2rem;\">Player<\/span><br>\r\n                        <span style=\"font-size: 0.9rem; font-weight: 500;\">Level: <\/span><span id=\"ms-dashLevel\" style=\"font-weight: 700;\">Rookie<\/span>\r\n                    <\/div>\r\n                    <div style=\"text-align: right;\">\r\n                        <span style=\"font-size: 0.9rem; font-weight: 500;\">XP: <\/span><span id=\"ms-dashXP\" style=\"font-weight: 800; color:var(--dfl-yellow);\">0<\/span><br>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <h3>Select Sprint Time<\/h3>\r\n                <div class=\"grid-3\" id=\"ms-modeSelector\">\r\n                    <div class=\"mode-card selected\" onclick=\"ms_selectMode(60)\">60s Sprint<small>Fast Paced<\/small><\/div>\r\n                    <div class=\"mode-card\" onclick=\"ms_selectMode(120)\">120s Endurance<small>Medium<\/small><\/div>\r\n                    <div class=\"mode-card\" onclick=\"ms_selectMode(180)\">180s Marathon<small>Challenge<\/small><\/div>\r\n                <\/div>\r\n\r\n                <h3 style=\"margin-top: 25px;\">Select Topic<\/h3>\r\n                <div class=\"topic-grid\" id=\"ms-topicSelector\">\r\n                    <div class=\"topic-card selected\" onclick=\"ms_selectTopic('addition')\">Addition<\/div>\r\n                    <div class=\"topic-card\" onclick=\"ms_selectTopic('subtraction')\">Subtraction<\/div>\r\n                    <div class=\"topic-card\" onclick=\"ms_selectTopic('multiplication')\">Multiplication<\/div>\r\n                    <div class=\"topic-card\" onclick=\"ms_selectTopic('division')\">Division<\/div>\r\n                    <div class=\"topic-card\" onclick=\"ms_selectTopic('squares')\">Squares, Cubes & Roots<\/div>\r\n                    <div class=\"topic-card\" onclick=\"ms_selectTopic('percentage')\">Percentage<\/div>\r\n                    <div class=\"topic-card\" onclick=\"ms_selectTopic('mixed')\">Mixed Maths<\/div>\r\n                <\/div>\r\n\r\n                <button class=\"btn\" style=\"margin-top: 30px;\" onclick=\"ms_initGame()\">Start Mission<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- GAME SCREEN -->\r\n        <div id=\"ms-game-screen\" class=\"screen\">\r\n            <div class=\"game-header\">\r\n                <div>Score: <span id=\"ms-gameScore\" style=\"color:var(--dfl-yellow); font-weight: 900;\">0<\/span><\/div>\r\n                <div class=\"timer\" id=\"ms-gameTimer\">01:00<\/div>\r\n                <div>Streak: <span style=\"color:var(--dfl-green);\">x<span id=\"ms-gameCombo\">1<\/span><\/span><\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"feedback-text\" id=\"ms-feedbackText\">Ready?<\/div>\r\n            \r\n            <div class=\"card\" id=\"ms-gameCard\" style=\"padding: 20px 30px 30px 30px;\">\r\n                <div class=\"question-box\" id=\"ms-questionDisplay\">5 + 5<\/div>\r\n                <div class=\"answer-display\" id=\"ms-answerDisplay\"><\/div>\r\n                \r\n                <div class=\"numpad\">\r\n                    <button class=\"num-btn\" onclick=\"ms_inputNumber(1)\">1<\/button>\r\n                    <button class=\"num-btn\" onclick=\"ms_inputNumber(2)\">2<\/button>\r\n                    <button class=\"num-btn\" onclick=\"ms_inputNumber(3)\">3<\/button>\r\n                    <button class=\"num-btn\" onclick=\"ms_inputNumber(4)\">4<\/button>\r\n                    <button class=\"num-btn\" onclick=\"ms_inputNumber(5)\">5<\/button>\r\n                    <button class=\"num-btn\" onclick=\"ms_inputNumber(6)\">6<\/button>\r\n                    <button class=\"num-btn\" onclick=\"ms_inputNumber(7)\">7<\/button>\r\n                    <button class=\"num-btn\" onclick=\"ms_inputNumber(8)\">8<\/button>\r\n                    <button class=\"num-btn\" onclick=\"ms_inputNumber(9)\">9<\/button>\r\n                    <button class=\"num-btn zero\" onclick=\"ms_inputNumber(0)\">0<\/button>\r\n                    <button class=\"num-btn clear-btn\" onclick=\"ms_clearAnswer()\">C<\/button>\r\n                <\/div>\r\n                <button class=\"btn btn-secondary\" style=\"margin-top: 20px;\" onclick=\"ms_submitAnswer()\">Submit Answer<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- REPORT SCREEN -->\r\n        <div id=\"ms-report-screen\" class=\"screen\">\r\n            <div class=\"card\" style=\"text-align: center;\">\r\n                <h2>Mission Complete!<\/h2>\r\n                <div class=\"level-badge\" id=\"ms-reportTitle\">Maths Ninja<\/div>\r\n                \r\n                <div class=\"report-grid\">\r\n                    <div class=\"stat-box\">Score <span id=\"ms-repScore\">0<\/span><\/div>\r\n                    <div class=\"stat-box\">Accuracy <span id=\"ms-repAcc\">0%<\/span><\/div>\r\n                    <div class=\"stat-box\">XP Earned <span id=\"ms-repXP\" style=\"color: var(--dfl-green);\">+0<\/span><\/div>\r\n                    <div class=\"stat-box\">Avg Time <span id=\"ms-repTime\">0s<\/span><\/div>\r\n                    <div class=\"stat-box\">Best Streak <span id=\"ms-repStreak\">0<\/span><\/div>\r\n                    <div class=\"stat-box\">Sums Attempted <span id=\"ms-repSums\" style=\"color: var(--dfl-blue);\">0<\/span><\/div>\r\n                <\/div>\r\n\r\n                <div id=\"ms-apiStatus\">Saving data securely...<\/div>\r\n                \r\n                <button class=\"btn\" style=\"margin-top: 25px;\" onclick=\"ms_showScreen('ms-dashboard-screen')\">Play Again<\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    \/* Javascript is prefixed with ms_ to avoid conflicts with your main website scripts *\/\r\n    \r\n    const MS_WEBHOOK_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbyiOzhb1M32QHs-L1jI9IROr9Jlq5GW7SvOA9-LReNhyblM3zuwtnMhSCgpwFSQfgLN\/exec\"; \r\n\r\n    const ms_player = { name: '', phone: '', studentClass: '', school: '', xp: 0, coins: 0, level: 'Rookie' };\r\n    const ms_session = { mode: 60, topic: 'addition', difficulty: 1, questions: 0, correct: 0, wrong: 0, streak: 0, bestStreak: 0, score: 0, timeTakenArray: [], currentQStartTime: 0, currentAnswer: null, timerInterval: null, timeLeft: 60 };\r\n    const ms_MOTIVATION = [\"Excellent!\", \"Great Job!\", \"Brilliant!\", \"Amazing!\", \"Unstoppable!\", \"Maths Champion!\", \"Fantastic!\", \"Incredible Speed!\"];\r\n\r\n    \/\/ Class \/ Category -> difficulty base mapping (V through Parent\/Professional)\r\n    function ms_getClassBase(cl) {\r\n        const map = { 'V': 1, 'VI': 2, 'VII': 3, 'VIII': 4, 'IX': 5, 'X': 6, 'XI': 7, 'XII': 8, 'College': 9, 'Parent': 10 };\r\n        return map[cl] || 1;\r\n    }\r\n\r\n    let ms_audioCtx;\r\n    function ms_initAudio() { if(!ms_audioCtx) { ms_audioCtx = new (window.AudioContext || window.webkitAudioContext)(); } if(ms_audioCtx.state === 'suspended') ms_audioCtx.resume(); }\r\n    \r\n    function ms_playTone(freq, type, duration) {\r\n        if(!ms_audioCtx) return;\r\n        const osc = ms_audioCtx.createOscillator();\r\n        const gain = ms_audioCtx.createGain();\r\n        osc.type = type; osc.frequency.setValueAtTime(freq, ms_audioCtx.currentTime);\r\n        gain.gain.setValueAtTime(0.1, ms_audioCtx.currentTime);\r\n        gain.gain.exponentialRampToValueAtTime(0.001, ms_audioCtx.currentTime + duration);\r\n        osc.connect(gain); gain.connect(ms_audioCtx.destination);\r\n        osc.start(); osc.stop(ms_audioCtx.currentTime + duration);\r\n    }\r\n    function ms_playCorrectSound() { ms_playTone(600, 'sine', 0.1); setTimeout(() => ms_playTone(800, 'sine', 0.15), 100); }\r\n    function ms_playWrongSound() { ms_playTone(300, 'sawtooth', 0.3); }\r\n\r\n    function ms_showScreen(screenId) {\r\n        document.querySelectorAll('#dfl-mathsprint-widget .screen').forEach(s => s.classList.remove('active'));\r\n        document.getElementById(screenId).classList.add('active');\r\n    }\r\n    \r\n    \/\/ Dynamic infinite level generation based on XP\r\n    function ms_getPlayerLevel(xp) {\r\n        if (xp < 500) return \"Rookie\";\r\n        if (xp < 1000) return \"Explorer\";\r\n        if (xp < 2000) return \"Calculator\";\r\n        if (xp < 3500) return \"Speed Genius\";\r\n        if (xp < 5000) return \"Brain Master\";\r\n        if (xp < 7500) return \"Maths Ninja\";\r\n        if (xp < 10000) return \"DFL Champion\";\r\n        \r\n        let prestige = Math.floor((xp - 10000) \/ 5000) + 1;\r\n        return `Grand Master ${prestige}`;\r\n    }\r\n\r\n    function ms_registerPlayer() {\r\n        const name = document.getElementById('ms-regName').value.trim();\r\n        const phone = document.getElementById('ms-regPhone').value.trim();\r\n        if (!name) return alert(\"Please enter your name.\");\r\n        if (!\/^\\d{10}$\/.test(phone)) return alert(\"WhatsApp number must be exactly 10 digits.\");\r\n\r\n        ms_player.name = name; ms_player.phone = phone;\r\n        ms_player.studentClass = document.getElementById('ms-regClass').value;\r\n        ms_player.school = document.getElementById('ms-regSchool').value.trim();\r\n        ms_initAudio();\r\n        ms_updateDashboardUI();\r\n        ms_showScreen('ms-dashboard-screen');\r\n    }\r\n\r\n    function ms_updateDashboardUI() {\r\n        ms_player.level = ms_getPlayerLevel(ms_player.xp);\r\n        document.getElementById('ms-dashName').innerText = ms_player.name;\r\n        document.getElementById('ms-dashLevel').innerText = ms_player.level;\r\n        document.getElementById('ms-dashXP').innerText = ms_player.xp;\r\n    }\r\n\r\n    function ms_selectMode(seconds) {\r\n        ms_session.mode = seconds;\r\n        document.querySelectorAll('#dfl-mathsprint-widget .mode-card').forEach(el => el.classList.remove('selected'));\r\n        event.currentTarget.classList.add('selected');\r\n    }\r\n\r\n    function ms_selectTopic(topic) {\r\n        ms_session.topic = topic;\r\n        document.querySelectorAll('#dfl-mathsprint-widget .topic-card').forEach(el => el.classList.remove('selected'));\r\n        event.currentTarget.classList.add('selected');\r\n    }\r\n\r\n    \/\/ --- Function to check daily attempt limit based on Phone Number (Set to 5) ---\r\n    function ms_checkDailyLimit() {\r\n        const today = new Date().toDateString();\r\n        \/\/ Create a unique key per user based on phone and today's date\r\n        const storageKey = `ms_attempts_${ms_player.phone}_${today}`;\r\n        \r\n        let attempts = parseInt(localStorage.getItem(storageKey)) || 0;\r\n\r\n        if (attempts >= 5) { \/\/ Maximum 5 attempts\r\n            alert(\"You have reached your daily limit of 5 attempts. Please come back tomorrow!\");\r\n            return false; \/\/ Tells the game not to start\r\n        }\r\n\r\n        \/\/ Increment attempt and save it back\r\n        localStorage.setItem(storageKey, attempts + 1);\r\n        return true; \/\/ Tells the game to continue\r\n    }\r\n\r\n    function ms_initGame() {\r\n        \/\/ Run the limit check BEFORE setting up the game\r\n        if (!ms_checkDailyLimit()) {\r\n            return; \/\/ Stops the function here if they hit the limit\r\n        }\r\n\r\n        ms_session.questions = 0; ms_session.correct = 0; ms_session.wrong = 0;\r\n        ms_session.streak = 0; ms_session.bestStreak = 0; ms_session.score = 0; ms_session.difficulty = 1; ms_session.timeTakenArray = [];\r\n        ms_session.timeLeft = ms_session.mode; \r\n        \r\n        let mins = Math.floor(ms_session.timeLeft \/ 60).toString().padStart(2, '0');\r\n        let secs = (ms_session.timeLeft % 60).toString().padStart(2, '0');\r\n        document.getElementById('ms-gameTimer').innerText = `${mins}:${secs}`;\r\n        \r\n        ms_updateGameUI();\r\n        ms_showScreen('ms-game-screen');\r\n        ms_session.timerInterval = setInterval(ms_gameTick, 1000);\r\n        ms_nextQuestion();\r\n    }\r\n\r\n    function ms_gameTick() {\r\n        ms_session.timeLeft--;\r\n        let mins = Math.floor(ms_session.timeLeft \/ 60).toString().padStart(2, '0');\r\n        let secs = (ms_session.timeLeft % 60).toString().padStart(2, '0');\r\n        document.getElementById('ms-gameTimer').innerText = `${mins}:${secs}`;\r\n        if (ms_session.timeLeft <= 0) ms_endGame();\r\n    }\r\n\r\n    \/\/ ---------- Individual sum generators (each returns {ans, displayString}) ----------\r\n\r\n    function ms_genAddition(diff, classBase) {\r\n        let maxVal = 10 * diff * classBase;\r\n        let num1 = Math.floor(Math.random() * maxVal) + (5 * classBase);\r\n        let num2 = Math.floor(Math.random() * maxVal) + (5 * classBase);\r\n        if (classBase >= 3 && Math.random() > 0.4) {\r\n            let num3 = Math.floor(Math.random() * maxVal) + (5 * classBase);\r\n            return { ans: num1 + num2 + num3, displayString: `${num1} + ${num2} + ${num3}` };\r\n        }\r\n        return { ans: num1 + num2, displayString: `${num1} + ${num2}` };\r\n    }\r\n\r\n    function ms_genSubtraction(diff, classBase) {\r\n        let maxVal = 15 * diff * classBase;\r\n        let num1 = Math.floor(Math.random() * maxVal) + (10 * classBase);\r\n        let num2 = Math.floor(Math.random() * num1);\r\n        if (classBase >= 4 && Math.random() > 0.4 && num1 > 50) {\r\n            let half = Math.floor(num1 \/ 2);\r\n            num2 = Math.floor(Math.random() * half);\r\n            let num3 = Math.floor(Math.random() * (half - 1)); \/\/ keeps ans positive\r\n            return { ans: num1 - num2 - num3, displayString: `${num1} - ${num2} - ${num3}` };\r\n        }\r\n        return { ans: num1 - num2, displayString: `${num1} - ${num2}` };\r\n    }\r\n\r\n    function ms_genMultiplication(diff, classBase) {\r\n        let num1, num2;\r\n        if (classBase >= 5) {\r\n            if (Math.random() > 0.5) {\r\n                num1 = (Math.floor(Math.random() * 9) + 1) * 10; \/\/ trick math: round numbers\r\n                num2 = Math.floor(Math.random() * (10 + diff * 2)) + 5;\r\n            } else {\r\n                num1 = Math.floor(Math.random() * (15 + diff)) + 5;\r\n                num2 = Math.floor(Math.random() * (15 + diff)) + 5;\r\n            }\r\n        } else {\r\n            let max1 = (classBase * 2) + diff + 2;\r\n            let max2 = classBase + diff + 2;\r\n            num1 = Math.floor(Math.random() * max1) + 2;\r\n            num2 = Math.floor(Math.random() * max2) + 2;\r\n        }\r\n        return { ans: num1 * num2, displayString: `${num1} \u00d7 ${num2}` };\r\n    }\r\n\r\n    function ms_genDivision(diff, classBase) {\r\n        let divisorMax = 5 + classBase * 2 + Math.floor(diff \/ 2);\r\n        let quotientMax = 5 + classBase * 3 + diff;\r\n        let divisor = Math.floor(Math.random() * divisorMax) + 2;\r\n        let quotient = Math.floor(Math.random() * quotientMax) + 2;\r\n        let dividend = divisor * quotient; \/\/ always divides evenly\r\n        return { ans: quotient, displayString: `${dividend} \u00f7 ${divisor}` };\r\n    }\r\n\r\n    function ms_genSquares(diff, classBase) {\r\n        let maxN = 4 + classBase * 2 + Math.floor(diff \/ 2);\r\n        let n = Math.floor(Math.random() * maxN) + 2;\r\n        \/\/ Higher classes\/college\/parents occasionally see roots or cubes for variety\r\n        if (classBase >= 7 && Math.random() > 0.6) {\r\n            return { ans: n, displayString: `\u221a${n * n}` };\r\n        }\r\n        if (classBase >= 9 && Math.random() > 0.7) {\r\n            return { ans: n * n * n, displayString: `${n}\u00b3` };\r\n        }\r\n        return { ans: n * n, displayString: `${n}\u00b2` };\r\n    }\r\n\r\n    function ms_genPercentage(diff, classBase) {\r\n        let pOptionsLow = [10, 20, 25, 50];\r\n        let pOptionsMid = [10, 15, 20, 25, 30, 40, 50, 75];\r\n        let pOptionsHigh = [5, 15, 20, 25, 30, 35, 40, 45, 60, 65, 75, 80, 85, 90];\r\n        let pOptions = classBase <= 3 ? pOptionsLow : (classBase <= 6 ? pOptionsMid : pOptionsHigh);\r\n        let p = pOptions[Math.floor(Math.random() * pOptions.length)];\r\n        \/\/ y is a multiple of 20 (with p a multiple of 5) so p% of y is always a whole number\r\n        let y = (Math.floor(Math.random() * (4 + classBase * 3 + diff)) + 1) * 20;\r\n        let ans = (p * y) \/ 100;\r\n        return { ans: ans, displayString: `${p}% of ${y}` };\r\n    }\r\n\r\n    function ms_generateSum(topic, diff, classBase) {\r\n        switch (topic) {\r\n            case 'addition': return ms_genAddition(diff, classBase);\r\n            case 'subtraction': return ms_genSubtraction(diff, classBase);\r\n            case 'multiplication': return ms_genMultiplication(diff, classBase);\r\n            case 'division': return ms_genDivision(diff, classBase);\r\n            case 'squares': return ms_genSquares(diff, classBase);\r\n            case 'percentage': return ms_genPercentage(diff, classBase);\r\n            default: return ms_genAddition(diff, classBase);\r\n        }\r\n    }\r\n\r\n    const MS_MIXED_POOL = ['addition', 'subtraction', 'multiplication', 'division', 'squares', 'percentage'];\r\n\r\n    function ms_nextQuestion() {\r\n        ms_session.currentQStartTime = Date.now();\r\n        document.getElementById('ms-answerDisplay').innerText = '';\r\n        let diff = ms_session.difficulty;\r\n        let classBase = ms_getClassBase(ms_player.studentClass);\r\n\r\n        let activeTopic = ms_session.topic;\r\n        if (activeTopic === 'mixed') {\r\n            activeTopic = MS_MIXED_POOL[Math.floor(Math.random() * MS_MIXED_POOL.length)];\r\n        }\r\n\r\n        const result = ms_generateSum(activeTopic, diff, classBase);\r\n        ms_session.currentAnswer = result.ans;\r\n\r\n        \/\/ Dynamically adjust font size for longer equations\r\n        const qBox = document.getElementById('ms-questionDisplay');\r\n        qBox.innerText = result.displayString;\r\n        if (result.displayString.length > 10) qBox.style.fontSize = \"2.8rem\";\r\n        else if (result.displayString.length > 7) qBox.style.fontSize = \"3.5rem\";\r\n        else qBox.style.fontSize = \"4.5rem\";\r\n    }\r\n\r\n    function ms_inputNumber(num) {\r\n        const display = document.getElementById('ms-answerDisplay');\r\n        if(display.innerText.length < 6) display.innerText += num;\r\n    }\r\n    function ms_clearAnswer() { document.getElementById('ms-answerDisplay').innerText = ''; }\r\n\r\n    function ms_submitAnswer() {\r\n        const display = document.getElementById('ms-answerDisplay');\r\n        if(display.innerText === '') return;\r\n        const userAns = parseInt(display.innerText);\r\n        ms_session.questions++;\r\n        ms_session.timeTakenArray.push((Date.now() - ms_session.currentQStartTime) \/ 1000);\r\n\r\n        const card = document.getElementById('ms-gameCard');\r\n        const feedback = document.getElementById('ms-feedbackText');\r\n\r\n        if(userAns === ms_session.currentAnswer) {\r\n            ms_playCorrectSound(); ms_session.correct++; ms_session.streak++;\r\n            if(ms_session.streak > ms_session.bestStreak) ms_session.bestStreak = ms_session.streak;\r\n            ms_session.score += (10 * ms_session.streak * ms_session.difficulty);\r\n            card.classList.add('correct-anim');\r\n            feedback.innerText = ms_MOTIVATION[Math.floor(Math.random() * ms_MOTIVATION.length)];\r\n            if(ms_session.streak % 3 === 0 && ms_session.difficulty < 15) ms_session.difficulty++;\r\n        } else {\r\n            ms_playWrongSound(); ms_session.wrong++; ms_session.streak = 0;\r\n            ms_session.difficulty = Math.max(1, ms_session.difficulty - 1);\r\n            card.classList.add('wrong-anim');\r\n            feedback.innerText = `Oops! Answer: ${ms_session.currentAnswer}`;\r\n            feedback.style.color = 'var(--dfl-red)';\r\n        }\r\n\r\n        ms_updateGameUI();\r\n        \r\n        setTimeout(() => {\r\n            card.classList.remove('correct-anim', 'wrong-anim');\r\n            feedback.innerText = 'Ready?';\r\n            feedback.style.color = 'var(--dfl-blue)';\r\n            ms_nextQuestion();\r\n        }, 500);\r\n    }\r\n\r\n    function ms_updateGameUI() {\r\n        document.getElementById('ms-gameScore').innerText = ms_session.score;\r\n        document.getElementById('ms-gameCombo').innerText = ms_session.streak;\r\n        document.getElementById('ms-gameScore').style.animation = 'none';\r\n        setTimeout(() => document.getElementById('ms-gameScore').style.animation = 'ms-pop 0.3s', 10);\r\n    }\r\n\r\n    function ms_endGame() {\r\n        clearInterval(ms_session.timerInterval);\r\n        const accuracy = ms_session.questions > 0 ? Math.round((ms_session.correct \/ ms_session.questions) * 100) : 0;\r\n        const avgTime = ms_session.questions > 0 ? (ms_session.timeTakenArray.reduce((a,b)=>a+b,0) \/ ms_session.questions).toFixed(1) : 0;\r\n        \r\n        const classBase = ms_getClassBase(ms_player.studentClass);\r\n\r\n        \/\/ XP Calculation based solely on Accuracy and Number of Sums attempted, boosted by class difficulty\r\n        const xpEarned = Math.floor(ms_session.questions * 10 * (accuracy \/ 100) * classBase);\r\n        \r\n        ms_player.xp += xpEarned; \r\n        ms_player.level = ms_getPlayerLevel(ms_player.xp);\r\n\r\n        document.getElementById('ms-reportTitle').innerText = ms_player.level;\r\n        document.getElementById('ms-repScore').innerText = ms_session.score;\r\n        document.getElementById('ms-repAcc').innerText = `${accuracy}%`;\r\n        document.getElementById('ms-repXP').innerText = `+${xpEarned}`;\r\n        document.getElementById('ms-repTime').innerText = `${avgTime}s`;\r\n        document.getElementById('ms-repStreak').innerText = ms_session.bestStreak;\r\n        document.getElementById('ms-repSums').innerText = ms_session.questions;\r\n\r\n        ms_updateDashboardUI();\r\n        ms_showScreen('ms-report-screen');\r\n        ms_triggerConfetti();\r\n        ms_saveGameData(accuracy, avgTime, xpEarned);\r\n    }\r\n\r\n    async function ms_saveGameData(accuracy, avgTime, xpEarned) {\r\n        const statusEl = document.getElementById('ms-apiStatus');\r\n        statusEl.innerText = \"Transmitting to Database...\"; \r\n        statusEl.className = \"\";\r\n        \r\n        const payload = {\r\n            name: ms_player.name, whatsapp: ms_player.phone, studentClass: ms_player.studentClass, school: ms_player.school,\r\n            topic: ms_session.topic, mode: `${ms_session.mode}s Sprint`, attempted: ms_session.questions, correct: ms_session.correct,\r\n            wrong: ms_session.wrong, accuracy: `${accuracy}%`, averageTime: `${avgTime}s`, bestStreak: ms_session.bestStreak,\r\n            xp: xpEarned, level: ms_player.level, totalScore: ms_session.score\r\n        };\r\n\r\n        const formData = new URLSearchParams(payload).toString();\r\n\r\n        try {\r\n            await fetch(MS_WEBHOOK_URL, { \r\n                method: 'POST', \r\n                mode: 'no-cors', \r\n                headers: { 'Content-Type': 'application\/x-www-form-urlencoded' }, \r\n                body: formData \r\n            });\r\n            statusEl.innerText = \"\u2714 Data Saved Successfully\"; \r\n            statusEl.className = \"status-success\";\r\n        } catch (error) {\r\n            statusEl.innerText = \"\u274c Connection Error. Data not saved.\"; \r\n            statusEl.className = \"status-error\";\r\n        }\r\n    }\r\n\r\n    function ms_triggerConfetti() {\r\n        const canvas = document.getElementById('ms-confetti-canvas');\r\n        const widget = document.getElementById('dfl-mathsprint-widget');\r\n        const ctx = canvas.getContext('2d');\r\n        canvas.width = widget.clientWidth;\r\n        canvas.height = widget.clientHeight;\r\n\r\n        let particles = [];\r\n        for(let i=0; i<80; i++) {\r\n            particles.push({ \r\n                x: canvas.width\/2, y: canvas.height\/2, \r\n                r: Math.random()*5+2, dx: Math.random()*10-5, dy: Math.random()*-15-5, \r\n                color: ['#1c3677', '#ffcd00', '#10b981', '#ef4444'][Math.floor(Math.random()*4)] \r\n            });\r\n        }\r\n\r\n        function animate() {\r\n            requestAnimationFrame(animate);\r\n            ctx.clearRect(0,0,canvas.width, canvas.height);\r\n            particles.forEach((p, i) => {\r\n                p.x += p.dx; p.y += p.dy; p.dy += 0.3; \r\n                ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI*2); ctx.fillStyle = p.color; ctx.fill();\r\n                if(p.y > canvas.height) particles.splice(i, 1);\r\n            });\r\n        }\r\n        animate();\r\n        setTimeout(() => { particles = []; ctx.clearRect(0,0,canvas.width, canvas.height); }, 3000);\r\n    }\r\n\r\n    window.addEventListener('keydown', (e) => {\r\n        if(document.getElementById('ms-game-screen').classList.contains('active')) {\r\n            if(e.key >= '0' && e.key <= '9') ms_inputNumber(e.key);\r\n            if(e.key === 'Backspace') ms_clearAnswer();\r\n            if(e.key === 'Enter') ms_submitAnswer();\r\n        }\r\n    });\r\n<\/script>\r\n<!-- DFL MathSprint Block Widget End -->\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-9509944 e-con e-atomic-element e-flexbox-base e-9339f3f \" data-id=\"9509944\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"9509944\">\n    \t\t<div class=\"elementor-element elementor-element-5c07793 elementor-widget elementor-widget-html\" data-id=\"5c07793\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- DFL Leaderboard Block Start -->\r\n<style>\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');\r\n\r\n    #dfl-leaderboard-section {\r\n        --dfl-blue: #1c3677;\r\n        --dfl-yellow: #ffcd00;\r\n        --dfl-dark: #111827;\r\n        --dfl-gray-light: #f9fafb;\r\n        --dfl-white: #ffffff;\r\n        \r\n        position: relative;\r\n        overflow: hidden;\r\n        width: 100%;\r\n        padding: 60px 20px;\r\n        background-color: var(--dfl-white);\r\n        font-family: 'Poppins', system-ui, -apple-system, sans-serif !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        text-align: center;\r\n    }\r\n\r\n    #dfl-leaderboard-section * {\r\n        box-sizing: border-box;\r\n        font-family: 'Poppins', system-ui, -apple-system, sans-serif !important;\r\n    }\r\n\r\n    .lb-badge, #dfl-leaderboard-section h2, .lb-btn, .lb-container {\r\n        position: relative;\r\n        z-index: 10; \r\n    }\r\n\r\n    .confetti {\r\n        position: absolute;\r\n        width: 8px;\r\n        height: 8px;\r\n        opacity: 0.8;\r\n        border-radius: 2px;\r\n        z-index: 1;\r\n        animation: confetti-fall linear infinite;\r\n    }\r\n    \r\n    @keyframes confetti-fall {\r\n        0% {\r\n            transform: translateY(-10vh) rotate(0deg);\r\n            opacity: 1;\r\n        }\r\n        100% {\r\n            transform: translateY(110vh) rotate(720deg);\r\n            opacity: 0;\r\n        }\r\n    }\r\n\r\n    .lb-badge {\r\n        display: inline-block;\r\n        background-color: var(--dfl-yellow);\r\n        color: var(--dfl-dark);\r\n        font-size: 0.95rem;\r\n        font-weight: 800;\r\n        padding: 8px 24px;\r\n        border-radius: 50px;\r\n        margin-bottom: 15px;\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        box-shadow: 0 4px 10px rgba(255, 205, 0, 0.3);\r\n    }\r\n\r\n    #dfl-leaderboard-section h2 {\r\n        font-size: 3rem;\r\n        font-weight: 900 !important;\r\n        color: var(--dfl-blue);\r\n        line-height: 1.1;\r\n        margin: 0 0 30px 0;\r\n        letter-spacing: -0.5px;\r\n        text-transform: uppercase;\r\n    }\r\n\r\n    #dfl-leaderboard-section h2 span {\r\n        color: var(--dfl-yellow);\r\n        -webkit-text-stroke: 1.5px var(--dfl-blue);\r\n    }\r\n\r\n    .lb-btn {\r\n        display: inline-block;\r\n        background-color: var(--dfl-blue);\r\n        color: var(--dfl-white);\r\n        font-size: 1rem;\r\n        font-weight: 800;\r\n        padding: 12px 30px;\r\n        border-radius: 50px;\r\n        border: none;\r\n        cursor: pointer;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n        transition: all 0.3s ease;\r\n        box-shadow: 0 8px 20px rgba(28, 54, 119, 0.2);\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    .lb-btn:hover {\r\n        background-color: #132552;\r\n        transform: translateY(-3px);\r\n        box-shadow: 0 12px 25px rgba(28, 54, 119, 0.3);\r\n    }\r\n\r\n    .lb-container {\r\n        width: 100%;\r\n        max-width: 850px;\r\n        background: var(--dfl-white);\r\n        border-radius: 16px;\r\n        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);\r\n        overflow: hidden;\r\n        border: 1px solid #e5e7eb;\r\n    }\r\n\r\n    #dfl-leaderboard-table {\r\n        width: 100%;\r\n        border-collapse: collapse;\r\n        display: none;\r\n    }\r\n\r\n    #dfl-leaderboard-table th {\r\n        background-color: var(--dfl-gray-light);\r\n        color: var(--dfl-blue);\r\n        font-weight: 800;\r\n        text-transform: uppercase;\r\n        padding: 18px 20px;\r\n        text-align: left;\r\n        border-bottom: 2px solid #e5e7eb;\r\n        font-size: 0.9rem;\r\n        letter-spacing: 0.5px;\r\n    }\r\n\r\n    #dfl-leaderboard-table td {\r\n        padding: 16px 20px;\r\n        text-align: left;\r\n        border-bottom: 1px solid #f3f4f6;\r\n        font-weight: 600;\r\n        color: var(--dfl-dark);\r\n        font-size: 1.05rem;\r\n        vertical-align: middle;\r\n    }\r\n\r\n    #dfl-leaderboard-table tr:hover td {\r\n        background-color: #f8fafc;\r\n    }\r\n\r\n    .rank-1 { color: #ffbc00; font-size: 1.3rem; font-weight: 900; }\r\n    .rank-2 { color: #94a3b8; font-size: 1.2rem; font-weight: 800; }\r\n    .rank-3 { color: #b45309; font-size: 1.1rem; font-weight: 800; }\r\n\r\n    .sub-label {\r\n        font-size: 0.8rem;\r\n        color: #6b7280;\r\n        font-weight: 500;\r\n        margin-top: 2px;\r\n    }\r\n\r\n    .lb-message {\r\n        font-weight: 700;\r\n        color: var(--dfl-blue);\r\n        padding: 30px;\r\n        font-size: 1.2rem;\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        #dfl-leaderboard-section { padding: 50px 15px; }\r\n        #dfl-leaderboard-section h2 { font-size: 2.2rem; }\r\n        #dfl-leaderboard-table th, #dfl-leaderboard-table td { padding: 12px 10px; font-size: 0.9rem; }\r\n        .sub-label { font-size: 0.75rem; }\r\n    }\r\n<\/style>\r\n\r\n<section id=\"dfl-leaderboard-section\">\r\n    <div class=\"lb-badge\">\ud83c\udfc6 TOP SCORERS<\/div>\r\n    <h2>Global <span>Leaderboard<\/span><\/h2>\r\n    <button id=\"refresh-leaderboard\" class=\"lb-btn\">Refresh Standings<\/button>\r\n\r\n    <div class=\"lb-container\">\r\n        <div id=\"lb-loading-message\" class=\"lb-message\">Syncing Live Scores...<\/div>\r\n        <table id=\"dfl-leaderboard-table\">\r\n            <thead>\r\n                <tr>\r\n                    <th>Rank<\/th>\r\n                    <th>Math Ninja<\/th>\r\n                    <th>Total Score<\/th>\r\n                    <th>Avg Time<\/th>\r\n                <\/tr>\r\n            <\/thead>\r\n            <tbody id=\"lb-body\"><\/tbody>\r\n        <\/table>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n    const sheetID = \"1ZvDPHYVtdezqoYW92LfjyfPtw30zXT_YnQlyiNLKYoQ\";\r\n    const MAX_DISPLAY = 25; \/\/ Define the max top scorers to display\r\n\r\n    \/\/ Column indices mapping\r\n    const nameCol = 1;        \/\/ Column B (Index 1)\r\n    const correctPctCol = 10; \/\/ Column K (Index 10)\r\n    const avgTimeCol = 11;    \/\/ Column L (Index 11)\r\n    const xpCol = 13;         \/\/ Column N (Index 13)\r\n    const levelCol = 15;      \/\/ Column P (Index 15)\r\n    const scoreCol = 16;      \/\/ Column Q (Index 16) - TotalScore\r\n\r\n    const section = document.getElementById(\"dfl-leaderboard-section\");\r\n    const table = document.getElementById(\"dfl-leaderboard-table\");\r\n    const tbody = document.getElementById(\"lb-body\");\r\n    const messageDiv = document.getElementById(\"lb-loading-message\");\r\n    const refreshBtn = document.getElementById(\"refresh-leaderboard\");\r\n\r\n    \/\/ Initialize Celebration Confetti\r\n    function startCelebration() {\r\n        const colors = ['#1c3677', '#ffcd00', '#ff5722', '#00bcd4', '#4caf50'];\r\n        for (let i = 0; i < 40; i++) {\r\n            const confetti = document.createElement(\"div\");\r\n            confetti.classList.add(\"confetti\");\r\n            confetti.style.left = Math.random() * 100 + \"%\";\r\n            confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];\r\n            confetti.style.animationDuration = (Math.random() * 3 + 2) + \"s\";\r\n            confetti.style.animationDelay = Math.random() * 4 + \"s\";\r\n            section.appendChild(confetti);\r\n        }\r\n    }\r\n    startCelebration();\r\n\r\n    \/\/ Fallback Demo Data\r\n    const demoData = [\r\n        { name: \"Aarav Sharma\", score: 2000, xp: 450, avgTime: \"2.5s\", level: \"Level 8\", correctPct: \"95%\" },\r\n        { name: \"Diya Patel\", score: 1850, xp: 420, avgTime: \"2.8s\", level: \"Level 7\", correctPct: \"92%\" },\r\n        { name: \"Rohan Chatterjee\", score: 1720, xp: 390, avgTime: \"3.1s\", level: \"Level 7\", correctPct: \"89%\" },\r\n        { name: \"Ananya Iyer\", score: 1600, xp: 350, avgTime: \"3.4s\", level: \"Level 6\", correctPct: \"88%\" },\r\n        { name: \"Kabir Singh\", score: 1450, xp: 310, avgTime: \"3.9s\", level: \"Level 5\", correctPct: \"85%\" },\r\n        { name: \"Meera Reddy\", score: 1300, xp: 280, avgTime: \"4.2s\", level: \"Level 4\", correctPct: \"82%\" },\r\n        { name: \"Ishaan Gupta\", score: 1100, xp: 240, avgTime: \"4.8s\", level: \"Level 3\", correctPct: \"78%\" }\r\n    ];\r\n\r\n    async function fetchLeaderboard() {\r\n        messageDiv.style.display = \"block\";\r\n        messageDiv.innerText = \"Syncing Live Scores...\";\r\n        table.style.display = \"none\";\r\n        tbody.innerHTML = \"\";\r\n\r\n        const timestamp = new Date().getTime();\r\n        const csvUrl = `https:\/\/docs.google.com\/spreadsheets\/d\/${sheetID}\/export?format=csv&gid=0&t=${timestamp}`;\r\n\r\n        try {\r\n            const response = await fetch(csvUrl, { cache: \"no-store\" });\r\n            if (!response.ok) throw new Error(\"Could not fetch the Google Sheet.\");\r\n            \r\n            const csvText = await response.text();\r\n            processCSV(csvText);\r\n        } catch (error) {\r\n            console.error(\"Failed to load live data, defaulting to demo data.\", error);\r\n            \/\/ Default to demo data, slice if it somehow exceeded max\r\n            renderTable(demoData.slice(0, MAX_DISPLAY)); \r\n        }\r\n    }\r\n\r\n    function processCSV(csvText) {\r\n        const rows = csvText.split('\\n').filter(row => row.trim().length > 0);\r\n        const playerScores = new Map();\r\n        \r\n        \/\/ Analyze ALL rows in the spreadsheet\r\n        for (let i = 1; i < rows.length; i++) {\r\n            const cols = rows[i].split(\/,(?=(?:(?:[^\"]*\"){2})*[^\"]*$)\/);\r\n            \r\n            if (cols.length > Math.max(nameCol, scoreCol, xpCol, avgTimeCol, levelCol, correctPctCol)) {\r\n                \r\n                const name = cols[nameCol] ? cols[nameCol].replace(\/[\"']\/g, \"\").trim() : \"\";\r\n                const avgTime = cols[avgTimeCol] ? cols[avgTimeCol].replace(\/[\"']\/g, \"\").trim() : \"-\";\r\n                \r\n                const correctPctRaw = cols[correctPctCol] ? cols[correctPctCol].replace(\/[\"']\/g, \"\").trim() : \"-\";\r\n                const correctPct = (correctPctRaw !== \"-\" && !correctPctRaw.includes(\"%\")) ? correctPctRaw + \"%\" : correctPctRaw;\r\n\r\n                const level = cols[levelCol] ? cols[levelCol].replace(\/[\"']\/g, \"\").trim() : \"-\";\r\n\r\n                const xpStr = cols[xpCol] ? cols[xpCol].replace(\/[\"']\/g, \"\").trim() : \"\";\r\n                const xp = parseInt(xpStr, 10) || 0;\r\n\r\n                const scoreStr = cols[scoreCol] ? cols[scoreCol].replace(\/[\"']\/g, \"\").trim() : \"\";\r\n                const score = parseFloat(scoreStr); \r\n                \r\n                if (name && !isNaN(score)) {\r\n                    const nameKey = name.toLowerCase();\r\n                    \r\n                    if (!playerScores.has(nameKey) || playerScores.get(nameKey).score < score) {\r\n                        playerScores.set(nameKey, { \r\n                            name: name, \r\n                            score: score, \r\n                            xp: xp, \r\n                            avgTime: avgTime,\r\n                            level: level,\r\n                            correctPct: correctPct\r\n                        });\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        let parsedData = Array.from(playerScores.values());\r\n\r\n        if (parsedData.length === 0) {\r\n            parsedData = demoData;\r\n        } else {\r\n            \/\/ Sort by TotalScore descending for the entire dataset\r\n            parsedData.sort((a, b) => b.score - a.score);\r\n        }\r\n\r\n        \/\/ Limit the displayed data to top 25 players\r\n        parsedData = parsedData.slice(0, MAX_DISPLAY);\r\n\r\n        renderTable(parsedData);\r\n    }\r\n\r\n    function renderTable(data) {\r\n        tbody.innerHTML = \"\";\r\n        \r\n        data.forEach((player, index) => {\r\n            const rank = index + 1;\r\n            let rankDisplay = `#${rank}`;\r\n            \r\n            if(rank === 1) rankDisplay = `<span class=\"rank-1\">\ud83e\udd47 1st<\/span>`;\r\n            if(rank === 2) rankDisplay = `<span class=\"rank-2\">\ud83e\udd48 2nd<\/span>`;\r\n            if(rank === 3) rankDisplay = `<span class=\"rank-3\">\ud83e\udd49 3rd<\/span>`;\r\n\r\n            const row = document.createElement(\"tr\");\r\n            row.innerHTML = `\r\n                <td>${rankDisplay}<\/td>\r\n                <td>\r\n                    <div>${player.name}<\/div>\r\n                    <div class=\"sub-label\">${player.level}<\/div>\r\n                <\/td>\r\n                <td>\r\n                    <div>${player.score}<\/div>\r\n                    <div class=\"sub-label\">${player.xp} XP<\/div>\r\n                <\/td>\r\n                <td>\r\n                    <div>${player.avgTime}<\/div>\r\n                    <div class=\"sub-label\">${player.correctPct} Correct<\/div>\r\n                <\/td>\r\n            `;\r\n            tbody.appendChild(row);\r\n        });\r\n\r\n        messageDiv.style.display = \"none\";\r\n        table.style.display = \"table\";\r\n    }\r\n\r\n    refreshBtn.addEventListener(\"click\", fetchLeaderboard);\r\n    fetchLeaderboard();\r\n});\r\n<\/script>\r\n<!-- DFL Leaderboard Block End -->\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-d4f95ac e-con e-atomic-element e-flexbox-base e-bbc3f03 \" data-id=\"d4f95ac\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"d4f95ac\">\n    \t\t<div class=\"elementor-element elementor-element-6d0a54c elementor-widget elementor-widget-html\" data-id=\"6d0a54c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- DFL Arena-Style Notice Block Start -->\r\n<style>\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Fredoka:wght@500;600;700&family=Poppins:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap');\r\n\r\n    .arena-notice-container {\r\n        --ink-900: #0f1b3d;\r\n        --ink-700: #33406b;\r\n        --ink-500: #6b7592;\r\n        --navy-800: #101f4c;\r\n        --navy-700: #1c3677;\r\n        --gold: #ffcd00;\r\n        --gold-pale: #fff4c8;\r\n        --line: rgba(28,54,119,0.15);\r\n        \r\n        max-width: 850px;\r\n        margin: 0 auto 40px auto;\r\n        background-color: #ffffff;\r\n        border: 1.5px solid var(--line);\r\n        border-left: 6px solid var(--gold);\r\n        border-radius: 16px;\r\n        padding: 32px 40px;\r\n        box-shadow: 0 14px 30px rgba(16, 31, 76, 0.06);\r\n        font-family: 'Poppins', system-ui, -apple-system, sans-serif;\r\n        position: relative;\r\n    }\r\n\r\n    .arena-notice-badge {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        background: linear-gradient(135deg, #ffe066 0%, var(--gold) 100%);\r\n        color: var(--navy-800);\r\n        font-family: 'Space Grotesk', sans-serif;\r\n        font-size: 0.75rem;\r\n        font-weight: 700;\r\n        padding: 6px 16px;\r\n        border-radius: 50px;\r\n        margin-bottom: 20px;\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        box-shadow: 0 4px 12px rgba(217,166,0,0.2);\r\n    }\r\n\r\n    .arena-notice-badge .dot {\r\n        width: 6px; height: 6px; border-radius: 50%;\r\n        background: var(--navy-800);\r\n        animation: arena-notice-pulse 1.4s ease-in-out infinite;\r\n    }\r\n\r\n    @keyframes arena-notice-pulse {\r\n        0%, 100% { opacity: 1; }\r\n        50%      { opacity: 0.3; }\r\n    }\r\n\r\n    .arena-notice-title {\r\n        font-family: 'Fredoka', sans-serif;\r\n        font-size: 1.6rem;\r\n        font-weight: 600;\r\n        color: var(--ink-900);\r\n        margin: 0 0 12px 0;\r\n        line-height: 1.3;\r\n    }\r\n\r\n    .arena-notice-title .accent {\r\n        color: var(--navy-700);\r\n        position: relative;\r\n        display: inline-block;\r\n    }\r\n\r\n    .arena-notice-title .accent::after {\r\n        content: '';\r\n        position: absolute;\r\n        left: -2px; right: -2px; bottom: 6px;\r\n        height: 10px;\r\n        background: var(--gold-pale);\r\n        z-index: -1;\r\n        border-radius: 4px;\r\n    }\r\n\r\n    .arena-notice-desc {\r\n        font-size: 1.05rem;\r\n        font-weight: 400;\r\n        color: var(--ink-500);\r\n        line-height: 1.7;\r\n        margin: 0 0 24px 0;\r\n    }\r\n\r\n    .arena-notice-divider {\r\n        border: none;\r\n        border-top: 1.5px dashed var(--line);\r\n        margin: 24px 0;\r\n    }\r\n\r\n    .arena-notice-subtitle {\r\n        font-family: 'Fredoka', sans-serif;\r\n        font-size: 1.25rem;\r\n        font-weight: 500;\r\n        color: var(--ink-700);\r\n        margin: 0 0 16px 0;\r\n    }\r\n\r\n    .arena-notice-list {\r\n        margin: 0;\r\n        padding-left: 20px;\r\n        color: var(--ink-500);\r\n        font-size: 0.95rem;\r\n        line-height: 1.6;\r\n    }\r\n\r\n    .arena-notice-list li {\r\n        margin-bottom: 12px;\r\n    }\r\n\r\n    .arena-notice-list li:last-child {\r\n        margin-bottom: 0;\r\n    }\r\n\r\n    .arena-notice-list strong {\r\n        font-family: 'Space Grotesk', sans-serif;\r\n        color: var(--navy-800);\r\n        font-weight: 700;\r\n        letter-spacing: 0.3px;\r\n        font-size: 1rem;\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        .arena-notice-container { padding: 24px 20px; }\r\n        .arena-notice-title { font-size: 1.35rem; }\r\n        .arena-notice-desc { font-size: 0.95rem; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"arena-notice-container\">\r\n    <div class=\"arena-notice-badge\"><span class=\"dot\"><\/span> Practice Smart<\/div>\r\n    \r\n    <h3 class=\"arena-notice-title\">Maximum <span class=\"accent\">5 Attempts<\/span> Daily<\/h3>\r\n    \r\n    <p class=\"arena-notice-desc\">\r\n        Each player can play a maximum of 5 times per day. Use these attempts to sharpen your calculation speed, not to waste time! Make every sprint count.\r\n    <\/p>\r\n    \r\n    <hr class=\"arena-notice-divider\">\r\n    \r\n    <h4 class=\"arena-notice-subtitle\">How the Leaderboard Works<\/h4>\r\n    \r\n    <ul class=\"arena-notice-list\">\r\n        <li>\r\n            <strong>Total Score (Rank):<\/strong> This is your highest score achieved in a single sprint. The leaderboard is ranked strictly by this score. Only your <em>personal best<\/em> is kept on the board!\r\n        <\/li>\r\n        <li>\r\n            <strong>XP & Levels:<\/strong> Experience Points (XP) represent your total dedication. Every game you play adds cumulative XP, which helps you level up over time, even if you don't beat your high score.\r\n        <\/li>\r\n        <li>\r\n            <strong>Tie-Breakers:<\/strong> If two players have the exact same Total Score, the player with the faster Average Time and higher % Correct will have the advantage.\r\n        <\/li>\r\n    <\/ul>\r\n<\/div>\r\n<!-- DFL Arena-Style Notice Block End -->\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Live Daily Challenge Math&#8217;s Arena The 60-second speed championship Sharpen your calculation speed, climb the live leaderboard, and unlock DFL Academy badges. One round is sixty seconds &mdash; see how many you can crack. Enter the Arena 100+Players today 60 secPer round V&ndash;XICSE &amp; CBSE 7 &times; 42 &divide; + &minus; &times; &divide; = %&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-695","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dflwf.com\/academy\/wp-json\/wp\/v2\/pages\/695","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dflwf.com\/academy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dflwf.com\/academy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dflwf.com\/academy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dflwf.com\/academy\/wp-json\/wp\/v2\/comments?post=695"}],"version-history":[{"count":133,"href":"https:\/\/dflwf.com\/academy\/wp-json\/wp\/v2\/pages\/695\/revisions"}],"predecessor-version":[{"id":854,"href":"https:\/\/dflwf.com\/academy\/wp-json\/wp\/v2\/pages\/695\/revisions\/854"}],"wp:attachment":[{"href":"https:\/\/dflwf.com\/academy\/wp-json\/wp\/v2\/media?parent=695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}