{"id":16640,"date":"2026-03-30T08:26:02","date_gmt":"2026-03-30T08:26:02","guid":{"rendered":"https:\/\/maspartner.com\/?page_id=16640"},"modified":"2026-05-25T08:07:37","modified_gmt":"2026-05-25T08:07:37","slug":"play-now","status":"publish","type":"page","link":"https:\/\/maspartner.com\/en-us\/play-now\/","title":{"rendered":"April Fool Game"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nFOCUS \u2014 Precision Reaction Challenge<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=DM+Sans:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n ROOT TOKENS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n:root {\r\n --ink: #05070f;\r\n --ink2: #0b0e1e;\r\n --glass: rgba(11,14,30,0.78);\r\n --glass2: rgba(255,255,255,0.035);\r\n --rim: rgba(255,255,255,0.07);\r\n --rim-hi: rgba(255,255,255,0.14);\r\n\r\n --gold: #c8a86a;\r\n --gold-hi: #e8cc8e;\r\n --gold-lo: rgba(200,168,106,0.14);\r\n --gold-glow: rgba(200,168,106,0.28);\r\n --gold-ring: rgba(200,168,106,0.22);\r\n\r\n --slate: #1c2540;\r\n --blue: #2f6af5;\r\n --blue-lo: rgba(47,106,245,0.12);\r\n --green: #28c78e;\r\n --red: #e8485a;\r\n --amber: #e09040;\r\n\r\n --ink-text: #e8ecf8;\r\n --ink-text2: rgba(232,236,248,0.52);\r\n --ink-text3: rgba(232,236,248,0.26);\r\n\r\n --r: 20px;\r\n --spring: cubic-bezier(.34,1.56,.64,1);\r\n --ease: cubic-bezier(.4,0,.2,1);\r\n\r\n --font-d: 'Cormorant Garamond', Georgia, serif;\r\n --font-b: 'DM Sans', system-ui, sans-serif;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESET\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\nhtml, body {\r\n height: 100%;\r\n background: var(--ink);\r\n color: var(--ink-text);\r\n font-family: var(--font-b);\r\n -webkit-font-smoothing: antialiased;\r\n overflow-x: hidden;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n ATMOSPHERIC BACKGROUND\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#atmo {\r\n position: fixed; inset: 0;\r\n pointer-events: none; z-index: 0;\r\n overflow: hidden;\r\n}\r\n.atmo-blob {\r\n position: absolute;\r\n border-radius: 50%;\r\n filter: blur(90px);\r\n animation: blobDrift ease-in-out infinite;\r\n}\r\n.atmo-blob:nth-child(1){\r\n width:700px;height:700px;\r\n top:-220px;left:-180px;\r\n background:radial-gradient(circle,rgba(47,106,245,.18) 0%,transparent 70%);\r\n animation-duration:28s;\r\n}\r\n.atmo-blob:nth-child(2){\r\n width:600px;height:600px;\r\n bottom:-200px;right:-150px;\r\n background:radial-gradient(circle,rgba(200,168,106,.14) 0%,transparent 70%);\r\n animation-duration:22s;\r\n animation-direction:reverse;\r\n}\r\n.atmo-blob:nth-child(3){\r\n width:450px;height:450px;\r\n top:45%;left:42%;\r\n background:radial-gradient(circle,rgba(40,199,142,.08) 0%,transparent 70%);\r\n animation-duration:35s;\r\n}\r\n@keyframes blobDrift {\r\n 0%,100%{transform:translate(0,0) scale(1)}\r\n 33% {transform:translate(28px,-18px) scale(1.06)}\r\n 66% {transform:translate(-18px,22px) scale(.94)}\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SHELL\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#shell {\r\n position:relative;z-index:1;\r\n min-height:100vh;\r\n display:flex;align-items:center;justify-content:center;\r\n padding:24px 16px 48px;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SCREEN SYSTEM\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.scr {\r\n display:none;\r\n flex-direction:column;\r\n align-items:center;\r\n width:100%;\r\n}\r\n.scr.on {\r\n display:flex;\r\n animation:scrIn .5s var(--spring) both;\r\n}\r\n@keyframes scrIn {\r\n from{opacity:0;transform:translateY(26px) scale(.97)}\r\n to {opacity:1;transform:translateY(0) scale(1)}\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n CARD\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.card {\r\n width:100%; max-width:500px;\r\n background:var(--glass);\r\n border:1px solid var(--rim);\r\n border-radius:var(--r);\r\n padding:44px 40px;\r\n backdrop-filter:blur(32px);\r\n -webkit-backdrop-filter:blur(32px);\r\n box-shadow:\r\n 0 0 0 1px rgba(255,255,255,0.04) inset,\r\n 0 50px 100px rgba(0,0,0,.7),\r\n 0 1px 0 rgba(255,255,255,0.07) inset;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n EYEBROW CHIP\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.chip {\r\n display:inline-flex;align-items:center;gap:8px;\r\n padding:5px 14px;\r\n background:var(--gold-lo);\r\n border:1px solid var(--gold-ring);\r\n border-radius:100px;\r\n font-size:11px;font-weight:700;\r\n letter-spacing:.12em;text-transform:uppercase;\r\n color:var(--gold);\r\n margin-bottom:20px;\r\n}\r\n.chip-dot {\r\n width:5px;height:5px;border-radius:50%;\r\n background:var(--gold);\r\n animation:chipBlink 2s ease infinite;\r\n}\r\n@keyframes chipBlink{0%,100%{opacity:1}50%{opacity:.3}}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n TYPOGRAPHY\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nh1 {\r\n font-family:var(--font-d);\r\n font-size:clamp(32px,7vw,52px);\r\n font-weight:600;\r\n line-height:1.05;\r\n letter-spacing:-.01em;\r\n margin-bottom:12px;\r\n}\r\n.gold {color:var(--gold-hi);}\r\n\r\n.sub {\r\n font-size:15px;font-weight:400;\r\n color:#ffffff;\r\n line-height:1.68;\r\n margin-bottom:30px;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n FORM\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.f-group { margin-bottom:16px; }\r\n.f-group label {\r\n display:block;\r\n font-size:11px;font-weight:700;\r\n letter-spacing:.1em;text-transform:uppercase;\r\n color:rgba(255,255,255,0.75);\r\n margin-bottom:8px;\r\n}\r\n.f-group input {\r\n width:100%;\r\n padding:13px 16px;\r\n background:rgba(255,255,255,.04);\r\n border:1px solid var(--rim);\r\n border-radius:11px;\r\n color:var(--ink-text);\r\n font-family:var(--font-b);\r\n font-size:15px;\r\n outline:none;\r\n transition:border-color .2s,background .2s,box-shadow .2s;\r\n}\r\n.f-group input::placeholder{color:var(--ink-text3);}\r\n.f-group input:focus{\r\n border-color:var(--gold);\r\n background:var(--gold-lo);\r\n box-shadow:0 0 0 3px var(--gold-lo);\r\n}\r\n.ferr {\r\n font-size:12px;color:var(--red);\r\n margin-top:5px;\r\n max-height:0;overflow:hidden;\r\n transition:max-height .2s;\r\n}\r\n.ferr.on{max-height:22px;}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n BUTTONS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.btn-main {\r\n width:100%;\r\n padding:15px 24px;\r\n background:linear-gradient(135deg,var(--gold),#9a7a38);\r\n border:none;border-radius:12px;\r\n color:#ffffff;\r\n font-family:var(--font-b);\r\n font-size:15px;font-weight:700;\r\n cursor:pointer;letter-spacing:-.01em;\r\n position:relative;overflow:hidden;\r\n transition:transform .18s var(--spring),box-shadow .2s;\r\n}\r\n.btn-main::before{\r\n content:'';position:absolute;inset:0;\r\n background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,transparent 60%);\r\n}\r\n.btn-main:hover{\r\n transform:translateY(-3px);\r\n box-shadow:0 14px 40px var(--gold-glow);\r\n}\r\n.btn-main:active{transform:translateY(-1px) scale(.99);}\r\n\r\n.btn-ghost {\r\n width:100%;margin-top:10px;\r\n padding:13px 24px;\r\n background:transparent;\r\n border:1px solid var(--rim);\r\n border-radius:12px;\r\n color:#ffffff;\r\n font-family:var(--font-b);\r\n font-size:14px;font-weight:500;\r\n cursor:pointer;\r\n transition:border-color .2s,color .2s,background .2s;\r\n}\r\n.btn-ghost:hover{\r\n border-color:var(--rim-hi);\r\n color:#ffffff;\r\n background:var(--glass2);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n INTRO STAT TRIO\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.trio {\r\n display:grid;grid-template-columns:repeat(3,1fr);\r\n gap:10px;margin-bottom:24px;\r\n}\r\n.trio-item {\r\n background:var(--glass2);\r\n border:1px solid var(--rim);\r\n border-radius:14px;\r\n padding:16px 10px;text-align:center;\r\n}\r\n.trio-item .tv{\r\n font-family:var(--font-d);\r\n font-size:24px;font-weight:600;\r\n color:var(--gold-hi);margin-bottom:4px;\r\n}\r\n.trio-item .tl{\r\n font-size:11px;color:rgba(255,255,255,0.75);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RULE LIST\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.rules{list-style:none;margin-bottom:26px;}\r\n.rules li{\r\n display:flex;align-items:flex-start;gap:12px;\r\n padding:11px 0;\r\n border-bottom:1px solid rgba(255,255,255,.06);\r\n font-size:14px;color:#ffffff;line-height:1.55;\r\n}\r\n.rules li:last-child{border-bottom:none;}\r\n.rules li strong{color:#ffffff;}\r\n.rn{\r\n flex-shrink:0;\r\n width:22px;height:22px;border-radius:50%;\r\n background:var(--gold-lo);\r\n border:1px solid var(--gold-ring);\r\n display:flex;align-items:center;justify-content:center;\r\n font-size:11px;font-weight:700;color:var(--gold);\r\n margin-top:1px;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n COUNTDOWN\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#s-count{justify-content:center;min-height:55vh;}\r\n#cdown-n {\r\n font-family:var(--font-d);\r\n font-size:130px;font-weight:300;\r\n letter-spacing:-.04em;line-height:1;\r\n color:var(--gold-hi);\r\n text-shadow:0 0 80px var(--gold-glow);\r\n animation:cdownPop .9s var(--spring);\r\n}\r\n@keyframes cdownPop{\r\n 0%{transform:scale(1.4);opacity:.2}\r\n 60%{transform:scale(.96);opacity:1}\r\n 100%{transform:scale(1);opacity:1}\r\n}\r\n#cdown-l{\r\n font-family:var(--font-d);\r\n font-size:18px;font-weight:400;\r\n color:var(--ink-text2);\r\n letter-spacing:.18em;text-transform:uppercase;\r\n margin-top:18px;text-align:center;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n GAME SCREEN\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#s-game{\r\n max-width:680px;\r\n align-items:stretch;\r\n}\r\n\r\n\/* HUD strip *\/\r\n.hud {\r\n display:flex;align-items:center;justify-content:space-between;\r\n padding:14px 20px;\r\n background:var(--glass);\r\n border:1px solid var(--rim);\r\n border-radius:15px;\r\n margin-bottom:12px;\r\n backdrop-filter:blur(24px);\r\n}\r\n.hs{text-align:center;min-width:70px;}\r\n.hs .hl{\r\n font-size:10px;font-weight:700;\r\n letter-spacing:.12em;text-transform:uppercase;\r\n color:rgba(255,255,255,0.65);margin-bottom:3px;\r\n}\r\n.hs .hv{\r\n font-family:var(--font-d);\r\n font-size:26px;font-weight:600;\r\n line-height:1;color:var(--ink-text);\r\n transition:color .2s;\r\n}\r\n.hs .hv.lit{\r\n animation:hudLit .35s ease;\r\n}\r\n@keyframes hudLit{\r\n 0% {transform:scale(1); color:var(--ink-text);}\r\n 45% {transform:scale(1.28); color:var(--gold-hi);}\r\n 100%{transform:scale(1); color:var(--ink-text);}\r\n}\r\n\r\n\/* Timer ring *\/\r\n.t-ring{\r\n position:relative;\r\n width:66px;height:66px;flex-shrink:0;\r\n}\r\n.t-svg{transform:rotate(-90deg);}\r\n.t-bg {fill:none;stroke:rgba(255,255,255,.07);stroke-width:5;}\r\n.t-arc{\r\n fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;\r\n stroke-dasharray:163.36; \/* 2\u03c0\u00d726 *\/\r\n stroke-dashoffset:0;\r\n transition:stroke-dashoffset 1s linear,stroke .5s ease;\r\n}\r\n.t-lbl{\r\n position:absolute;inset:0;\r\n display:flex;align-items:center;justify-content:center;\r\n font-family:var(--font-d);\r\n font-size:18px;font-weight:600;\r\n transition:color .3s;\r\n}\r\n\r\n\/* Combo display *\/\r\n.combo-wrap{display:flex;flex-direction:column;align-items:center;gap:2px;}\r\n.combo-lbl{\r\n font-size:10px;font-weight:700;\r\n letter-spacing:.12em;text-transform:uppercase;\r\n color:rgba(255,255,255,0.65);\r\n}\r\n.combo-num{\r\n font-family:var(--font-d);\r\n font-size:22px;font-weight:600;\r\n color:var(--ink-text3);\r\n transition:color .2s,transform .2s;\r\n}\r\n.combo-num.hot{\r\n color:var(--gold-hi);\r\n text-shadow:0 0 20px var(--gold-glow);\r\n animation:comboHot .3s var(--spring);\r\n}\r\n@keyframes comboHot{\r\n 0%{transform:scale(1.3);}\r\n 100%{transform:scale(1);}\r\n}\r\n\r\n\/* Canvas wrapper *\/\r\n.cv-wrap{\r\n position:relative;\r\n width:100%;\r\n background:rgba(5,7,15,.65);\r\n border:1px solid var(--rim);\r\n border-radius:18px;\r\n overflow:hidden;\r\n height:clamp(290px,48vw,460px);\r\n box-shadow:\r\n 0 0 0 1px rgba(255,255,255,.04) inset,\r\n 0 30px 70px rgba(0,0,0,.6);\r\n}\r\n#cv{\r\n display:block;width:100%;height:100%;\r\n cursor:crosshair;touch-action:none;\r\n user-select:none;-webkit-user-select:none;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n FLOATING SCORE POP\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.spop{\r\n position:absolute;\r\n font-family:var(--font-d);\r\n font-size:20px;font-weight:600;\r\n pointer-events:none;\r\n animation:spopFly .85s ease forwards;\r\n z-index:30;white-space:nowrap;\r\n text-shadow:0 0 24px currentColor;\r\n}\r\n@keyframes spopFly{\r\n 0% {opacity:1;transform:translate(-50%,-50%) scale(1)}\r\n 60% {opacity:1;transform:translate(-50%,-160%) scale(1.08)}\r\n 100%{opacity:0;transform:translate(-50%,-230%) scale(.8)}\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n TOAST\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#toast{\r\n position:fixed;top:18px;left:50%;\r\n transform:translateX(-50%) translateY(-70px);\r\n background:rgba(5,7,15,.9);\r\n border:1px solid var(--rim);\r\n border-radius:100px;\r\n padding:9px 22px;\r\n font-size:13px;font-weight:600;\r\n color:var(--ink-text);\r\n z-index:9999;\r\n backdrop-filter:blur(24px);\r\n transition:transform .3s var(--spring);\r\n pointer-events:none;white-space:nowrap;\r\n box-shadow:0 10px 36px rgba(0,0,0,.5);\r\n}\r\n#toast.on{transform:translateX(-50%) translateY(0);}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n MISS FLASH OVERLAY\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.miss-flash{\r\n position:absolute;inset:0;border-radius:18px;\r\n background:rgba(232,72,90,.08);\r\n pointer-events:none;\r\n animation:mflash .35s ease forwards;\r\n z-index:20;\r\n}\r\n@keyframes mflash{0%{opacity:1}100%{opacity:0}}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESULT SCREEN\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.res-hero{text-align:center;padding:0 0 22px;}\r\n.res-icon{\r\n width:72px;height:72px;border-radius:50%;\r\n background:var(--gold-lo);\r\n border:2px solid var(--gold-ring);\r\n display:flex;align-items:center;justify-content:center;\r\n font-size:30px;\r\n margin:0 auto 18px;\r\n animation:iconPop .5s .1s var(--spring) both;\r\n}\r\n@keyframes iconPop{\r\n from{transform:scale(0) rotate(-25deg);opacity:0}\r\n to {transform:scale(1) rotate(0);opacity:1}\r\n}\r\n.res-pts{\r\n font-family:var(--font-d);\r\n font-size:clamp(60px,14vw,80px);\r\n font-weight:300;letter-spacing:-.04em;line-height:1;\r\n color:var(--gold-hi);\r\n text-shadow:0 0 50px var(--gold-glow);\r\n}\r\n.res-lbl{\r\n font-size:11px;font-weight:700;\r\n letter-spacing:.15em;text-transform:uppercase;\r\n color:rgba(255,255,255,0.7);margin-top:5px;\r\n}\r\n.rank-pill{\r\n display:inline-flex;align-items:center;gap:7px;\r\n padding:7px 16px;border-radius:100px;\r\n font-size:13px;font-weight:600;margin-top:12px;\r\n}\r\n.rp-gold {background:rgba(200,168,106,.14);border:1px solid rgba(200,168,106,.32);color:var(--gold-hi);}\r\n.rp-sil {background:rgba(180,195,225,.1); border:1px solid rgba(180,195,225,.28);color:#c5cfe8;}\r\n.rp-brnz {background:rgba(190,130,75,.1); border:1px solid rgba(190,130,75,.28); color:#d4a06e;}\r\n.rp-entry {background:var(--blue-lo); border:1px solid rgba(47,106,245,.28); color:#7aa8fb;}\r\n\r\n.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0;}\r\n.rg-item{\r\n background:var(--glass2);border:1px solid var(--rim);\r\n border-radius:13px;padding:14px 8px;text-align:center;\r\n}\r\n.rg-item .rv{\r\n font-family:var(--font-d);\r\n font-size:22px;font-weight:600;color:var(--ink-text);\r\n}\r\n.rg-item .rl{font-size:11px;color:rgba(255,255,255,0.7);margin-top:3px;}\r\n\r\n\/* Save strip *\/\r\n.save-strip{\r\n display:flex;align-items:center;gap:9px;\r\n padding:11px 14px;\r\n background:var(--glass2);border:1px solid var(--rim);\r\n border-radius:11px;\r\n font-size:13px;color:#ffffff;\r\n margin-bottom:14px;\r\n transition:border-color .4s;\r\n}\r\n.sv-dot{\r\n width:7px;height:7px;border-radius:50%;\r\n background:var(--gold);flex-shrink:0;\r\n animation:chipBlink 1.5s ease infinite;\r\n}\r\n.sv-dot.ok{animation:none;background:var(--green);}\r\n\r\n\/* Privacy *\/\r\n.priv{\r\n text-align:center;font-size:12px;\r\n color:rgba(255,255,255,0.6);margin-top:16px;line-height:1.5;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESPONSIVE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media(max-width:520px){\r\n .card{padding:26px 18px;}\r\n h1{font-size:32px;}\r\n .res-pts{font-size:60px;}\r\n .hud{padding:12px 14px;}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- Atmospheric background -->\r\n<div id=\"atmo\">\r\n <div class=\"atmo-blob\"><\/div>\r\n <div class=\"atmo-blob\"><\/div>\r\n <div class=\"atmo-blob\"><\/div>\r\n<\/div>\r\n\r\n<!-- Toast notification -->\r\n<div id=\"toast\"><\/div>\r\n\r\n<div id=\"shell\">\r\n\r\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SCREEN 1 \u2014 REGISTRATION\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <div class=\"scr on\" id=\"s-reg\">\r\n <div class=\"card\">\r\n <div class=\"chip\"><div class=\"chip-dot\"><\/div>Exclusive Challenge<\/div>\r\n\r\n <h1>Test your<br><span class=\"gold\">reaction speed.<\/span><\/h1>\r\n <p class=\"sub\">45 seconds. Vanishing targets. The faster your instincts \u2014 the higher your score. Think you can keep up?<\/p>\r\n\r\n <div class=\"f-group\">\r\n <label>Full Name<\/label>\r\n <input type=\"text\" id=\"in-name\" placeholder=\"e.g. Olivia Harrington\" autocomplete=\"name\">\r\n <div class=\"ferr\" id=\"err-name\">Please enter your full name<\/div>\r\n <\/div>\r\n\r\n <div class=\"f-group\">\r\n <label>Work Email<\/label>\r\n <input type=\"email\" id=\"in-email\" placeholder=\"you@company.com\" autocomplete=\"email\">\r\n <div class=\"ferr\" id=\"err-email\">Please enter a valid email address<\/div>\r\n <\/div>\r\n\r\n <button class=\"btn-main\" id=\"btn-reg\">Enter the Challenge →<\/button>\r\n\r\n <p class=\"priv\">\ud83d\udd12 Your information is private and will never be shared or sold.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SCREEN 2 \u2014 HOW TO PLAY\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <div class=\"scr\" id=\"s-intro\">\r\n <div class=\"card\">\r\n <div class=\"chip\"><div class=\"chip-dot\"><\/div>How to Play<\/div>\r\n\r\n <h1>Ready, <span class=\"gold\" id=\"p-name\">Player<\/span>?<\/h1>\r\n <p class=\"sub\">Master your instincts. Tap every glowing target before it disappears.<\/p>\r\n\r\n <div class=\"trio\">\r\n <div class=\"trio-item\">\r\n <div class=\"tv\">45s<\/div>\r\n <div class=\"tl\">Time Limit<\/div>\r\n <\/div>\r\n <div class=\"trio-item\">\r\n <div class=\"tv\">100+<\/div>\r\n <div class=\"tl\">Per Hit<\/div>\r\n <\/div>\r\n <div class=\"trio-item\">\r\n <div class=\"tv\">3\u00d7<\/div>\r\n <div class=\"tl\">Combo Max<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <ul class=\"rules\">\r\n <li>\r\n <div class=\"rn\">1<\/div>\r\n Glowing orbs appear across the arena. <strong>Click or tap<\/strong> each one before it fades out.\r\n <\/li>\r\n <li>\r\n <div class=\"rn\">2<\/div>\r\n <strong>Speed bonus:<\/strong> the faster you react after an orb appears, the more points you earn per hit.\r\n <\/li>\r\n <li>\r\n <div class=\"rn\">3<\/div>\r\n Chain <strong>3 hits in a row<\/strong> without missing to activate a score multiplier \u2014 up to \u00d73.\r\n <\/li>\r\n <li>\r\n <div class=\"rn\">4<\/div>\r\n Orbs <strong>shrink and vanish<\/strong> over ~1.6 seconds. Miss one and your combo resets.\r\n <\/li>\r\n <\/ul>\r\n\r\n <button class=\"btn-main\" id=\"btn-play\">Start — I’m Ready<\/button>\r\n <button class=\"btn-ghost\" id=\"btn-back\">\u2190 Back<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SCREEN 3 \u2014 COUNTDOWN\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <div class=\"scr\" id=\"s-count\">\r\n <div id=\"cdown-n\">3<\/div>\r\n <div id=\"cdown-l\">Get Ready<\/div>\r\n <\/div>\r\n\r\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SCREEN 4 \u2014 GAMEPLAY\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <div class=\"scr\" id=\"s-game\">\r\n\r\n <div class=\"hud\">\r\n <div class=\"hs\">\r\n <div class=\"hl\">Score<\/div>\r\n <div class=\"hv\" id=\"h-score\">0<\/div>\r\n <\/div>\r\n\r\n <div style=\"display:flex;flex-direction:column;align-items:center;gap:5px;\">\r\n <div class=\"t-ring\">\r\n <svg class=\"t-svg\" width=\"66\" height=\"66\" viewBox=\"0 0 66 66\">\r\n <circle class=\"t-bg\" cx=\"33\" cy=\"33\" r=\"26\"\/>\r\n <circle class=\"t-arc\" cx=\"33\" cy=\"33\" r=\"26\" id=\"t-arc\"\/>\r\n <\/svg>\r\n <div class=\"t-lbl\" id=\"t-lbl\">45<\/div>\r\n <\/div>\r\n <div class=\"combo-wrap\">\r\n <div class=\"combo-lbl\">Combo<\/div>\r\n <div class=\"combo-num\" id=\"h-combo\">\u00d71<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hs\" style=\"text-align:right;\">\r\n <div class=\"hl\">Hits<\/div>\r\n <div class=\"hv\" id=\"h-hits\">0<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"cv-wrap\" id=\"cv-wrap\">\r\n <canvas id=\"cv\"><\/canvas>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SCREEN 5 \u2014 RESULTS\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <div class=\"scr\" id=\"s-result\">\r\n <div class=\"card\">\r\n\r\n <div class=\"res-hero\">\r\n <div class=\"res-icon\" id=\"r-icon\">\ud83c\udfaf<\/div>\r\n <div class=\"res-pts\" id=\"r-pts\">0<\/div>\r\n <div class=\"res-lbl\">Final Score<\/div>\r\n <div id=\"r-rank\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"rgrid\">\r\n <div class=\"rg-item\">\r\n <div class=\"rv\" id=\"r-hits\">0<\/div>\r\n <div class=\"rl\">Orbs Hit<\/div>\r\n <\/div>\r\n <div class=\"rg-item\">\r\n <div class=\"rv\" id=\"r-acc\">0%<\/div>\r\n <div class=\"rl\">Accuracy<\/div>\r\n <\/div>\r\n <div class=\"rg-item\">\r\n <div class=\"rv\" id=\"r-combo\">\u00d71<\/div>\r\n <div class=\"rl\">Best Combo<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"save-strip\" id=\"save-strip\">\r\n <div class=\"sv-dot\" id=\"sv-dot\"><\/div>\r\n <span id=\"sv-txt\">Saving your result…<\/span>\r\n <\/div>\r\n\r\n <button class=\"btn-main\" id=\"btn-replay\">Play Again  \u21ba<\/button>\r\n <button class=\"btn-ghost\" id=\"btn-export\">\u2193 Export Score (JSON)<\/button>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n<\/div><!-- #shell -->\r\n\r\n<script>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n CONFIGURATION\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n SETUP INSTRUCTIONS:\r\n\r\n GOOGLE APPS SCRIPT (free, connects to Google Sheets):\r\n 1. Open script.google.com \u2192 New project\r\n 2. Replace the default code with:\r\n\r\n function doPost(e) {\r\n var d = JSON.parse(e.postData.contents);\r\n SpreadsheetApp\r\n .openById('YOUR_GOOGLE_SHEET_ID')\r\n .getActiveSheet()\r\n .appendRow([d.timestamp, d.name, d.email,\r\n d.score, d.hits, d.accuracy, d.bestCombo]);\r\n return ContentService.createTextOutput('OK');\r\n }\r\n\r\n 3. Deploy \u2192 New deployment \u2192 Web App\r\n Execute as: Me | Access: Anyone\r\n 4. Copy the URL into GAS_URL below and set SUBMIT_METHOD to 'gas'\r\n\r\n FORMSPREE (free, 50\/month):\r\n 1. Sign up at formspree.io \u2192 create form\r\n 2. Copy endpoint URL into FORMSPREE below\r\n 3. Set SUBMIT_METHOD to 'formspree'\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nconst CFG = {\r\n SUBMIT_METHOD: 'gas',\r\n\r\n \/\/ Google Apps Script deployment URL\r\n GAS_URL: 'https:\/\/script.google.com\/macros\/s\/AKfycby_PKmTsvbljg0MJzNUp3yJgghci7qvXw7uotR2sMQWu3DJLbhTKvpETGhQgpA46Wli\/exec',\r\n\r\n \/\/ \u2190 Paste your Formspree form endpoint here\r\n FORMSPREE: 'https:\/\/formspree.io\/f\/YOUR_FORM_ID_HERE',\r\n\r\n \/* Game tuning *\/\r\n SECS: 45,\r\n TARGET_LIFE: 1600, \/\/ ms a target stays alive\r\n SPAWN_MS: 920, \/\/ base ms between spawns\r\n MAX_ORBS: 3, \/\/ max simultaneous orbs\r\n BASE_PTS: 100,\r\n SPEED_BONUS: 60, \/\/ max extra pts for quick clicks\r\n COMBO_THRESH: 3, \/\/ streak needed for multiplier\r\n};\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n STATE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nlet G = {\r\n name:'', email:'',\r\n score:0, hits:0, misses:0,\r\n streak:0, bestStreak:0,\r\n timeLeft: CFG.SECS,\r\n orbs: [],\r\n timerID: null,\r\n spawnTO: null,\r\n spawnMs: CFG.SPAWN_MS,\r\n raf: null,\r\n live: false,\r\n};\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n CANVAS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nconst CV = document.getElementById('cv');\r\nconst CTX = CV.getContext('2d');\r\nconst WRAP = document.getElementById('cv-wrap');\r\nlet CW = 0, CH = 0, DPR = Math.min(window.devicePixelRatio || 1, 2);\r\n\r\nfunction resizeCV() {\r\n const r = WRAP.getBoundingClientRect();\r\n CW = r.width; CH = r.height;\r\n CV.width = CW * DPR;\r\n CV.height = CH * DPR;\r\n CV.style.width = CW + 'px';\r\n CV.style.height = CH + 'px';\r\n CTX.setTransform(DPR, 0, 0, DPR, 0, 0);\r\n}\r\nwindow.addEventListener('resize', () => { if (G.live) resizeCV(); });\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n DOM UTILS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nconst $ = id => document.getElementById(id);\r\nconst SCRS = {\r\n reg: $('s-reg'),\r\n intro: $('s-intro'),\r\n count: $('s-count'),\r\n game: $('s-game'),\r\n result: $('s-result'),\r\n};\r\n\r\nfunction show(name) {\r\n Object.values(SCRS).forEach(s => { s.classList.remove('on'); s.style.display = 'none'; });\r\n const el = SCRS[name];\r\n el.style.display = 'flex';\r\n void el.offsetWidth;\r\n el.classList.add('on');\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n REGISTRATION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n$('btn-reg').addEventListener('click', () => {\r\n const name = $('in-name').value.trim();\r\n const email = $('in-email').value.trim();\r\n let ok = true;\r\n\r\n $('err-name').classList.remove('on');\r\n $('err-email').classList.remove('on');\r\n\r\n if (name.length < 2) { $('err-name').classList.add('on'); ok = false; }\r\n if (!\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email)) { $('err-email').classList.add('on'); ok = false; }\r\n if (!ok) return;\r\n\r\n G.name = name;\r\n G.email = email;\r\n $('p-name').textContent = name.split(' ')[0];\r\n show('intro');\r\n});\r\n\r\n$('in-name').addEventListener('keydown', e => { if (e.key === 'Enter') $('in-email').focus(); });\r\n$('in-email').addEventListener('keydown', e => { if (e.key === 'Enter') $('btn-reg').click(); });\r\n\r\n$('btn-back').addEventListener('click', () => show('reg'));\r\n$('btn-play').addEventListener('click', startCountdown);\r\n$('btn-replay').addEventListener('click', () => { stopGame(); startCountdown(); });\r\n$('btn-export').addEventListener('click', exportJSON);\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n COUNTDOWN\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfunction startCountdown() {\r\n Object.assign(G, {\r\n score:0, hits:0, misses:0,\r\n streak:0, bestStreak:0,\r\n timeLeft:CFG.SECS,\r\n orbs:[],live:false,\r\n spawnMs:CFG.SPAWN_MS,\r\n timerID:null,spawnTO:null,raf:null,\r\n });\r\n\r\n show('count');\r\n let n = 3;\r\n render();\r\n\r\n function render() {\r\n $('cdown-n').textContent = n;\r\n $('cdown-n').style.animation = 'none';\r\n void $('cdown-n').offsetWidth;\r\n $('cdown-n').style.animation = 'cdownPop .9s var(--spring)';\r\n if (n === 1) $('cdown-l').textContent = 'Go!';\r\n else $('cdown-l').textContent = 'Get Ready';\r\n }\r\n\r\n const id = setInterval(() => {\r\n n--;\r\n if (n > 0) { render(); }\r\n else { clearInterval(id); launchGame(); }\r\n }, 1000);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n GAME LAUNCH\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfunction launchGame() {\r\n show('game');\r\n setTimeout(() => {\r\n resizeCV();\r\n G.live = true;\r\n\r\n $('h-score').textContent = '0';\r\n $('h-hits').textContent = '0';\r\n $('h-combo').textContent = '\u00d71';\r\n $('h-combo').classList.remove('hot');\r\n $('t-lbl').textContent = G.timeLeft;\r\n $('t-arc').style.stroke = 'var(--gold)';\r\n $('t-lbl').style.color = 'var(--ink-text)';\r\n\r\n startTimer();\r\n scheduleSpawn();\r\n G.raf = requestAnimationFrame(loop);\r\n }, 120);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n TIMER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfunction startTimer() {\r\n const C = 163.36;\r\n G.timerID = setInterval(() => {\r\n if (!G.live) return;\r\n G.timeLeft--;\r\n $('t-lbl').textContent = G.timeLeft;\r\n $('t-arc').style.strokeDashoffset = C * (1 - G.timeLeft \/ CFG.SECS);\r\n\r\n \/* Difficulty ramp *\/\r\n const elapsed = CFG.SECS - G.timeLeft;\r\n if (elapsed > 0 && elapsed % 10 === 0) {\r\n G.spawnMs = Math.max(480, CFG.SPAWN_MS - (elapsed \/ 10) * 90);\r\n }\r\n\r\n if (G.timeLeft <= 10) {\r\n $('t-arc').style.stroke = 'var(--red)';\r\n $('t-lbl').style.color = 'var(--red)';\r\n } else if (G.timeLeft <= 20) {\r\n $('t-arc').style.stroke = 'var(--amber)';\r\n }\r\n\r\n if (G.timeLeft <= 0) endGame();\r\n }, 1000);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n ORB SPAWNING\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfunction scheduleSpawn() {\r\n if (!G.live) return;\r\n if (G.orbs.filter(o => !o.hit).length < CFG.MAX_ORBS) spawnOrb();\r\n const jitter = (Math.random() - 0.5) * 280;\r\n G.spawnTO = setTimeout(scheduleSpawn, G.spawnMs + jitter);\r\n}\r\n\r\nfunction spawnOrb() {\r\n const elapsed = CFG.SECS - G.timeLeft;\r\n const pad = 52;\r\n const rMax = Math.max(18, 30 - Math.floor(elapsed \/ 12) * 3);\r\n const rMin = 16;\r\n const r = rMin + Math.random() * (rMax - rMin);\r\n\r\n G.orbs.push({\r\n id: Date.now() + Math.random(),\r\n x: pad + Math.random() * (CW - pad * 2),\r\n y: pad + Math.random() * (CH - pad * 2),\r\n r,\r\n born: performance.now(),\r\n life: CFG.TARGET_LIFE + Math.random() * 200,\r\n p: 0, \/\/ 0\u21921 progress (age)\r\n hit: false,\r\n ripple: 0, \/\/ 0\u21921 click ripple expansion\r\n });\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n MAIN GAME LOOP\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfunction loop() {\r\n if (!G.live) return;\r\n drawFrame();\r\n G.raf = requestAnimationFrame(loop);\r\n}\r\n\r\nfunction drawFrame() {\r\n CTX.clearRect(0, 0, CW, CH);\r\n drawBg();\r\n\r\n const now = performance.now();\r\n const dead = [];\r\n\r\n G.orbs.forEach((orb, i) => {\r\n orb.p = (now - orb.born) \/ orb.life;\r\n\r\n if (orb.hit) {\r\n \/\/ Animate click ripple then remove\r\n if (orb.ripple < 1) {\r\n drawRipple(orb);\r\n orb.ripple += 0.07;\r\n } else {\r\n dead.push(i);\r\n }\r\n } else if (orb.p >= 1) {\r\n \/\/ Expired \u2014 miss\r\n dead.push(i);\r\n onMiss();\r\n } else {\r\n drawOrb(orb);\r\n }\r\n });\r\n\r\n \/\/ Remove in reverse order\r\n for (let i = dead.length - 1; i >= 0; i--) G.orbs.splice(dead[i], 1);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n DRAW HELPERS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfunction drawBg() {\r\n \/* Subtle dot grid *\/\r\n CTX.save();\r\n CTX.fillStyle = 'rgba(255,255,255,.025)';\r\n const step = 44;\r\n for (let x = step\/2; x < CW; x += step)\r\n for (let y = step\/2; y < CH; y += step) {\r\n CTX.beginPath();\r\n CTX.arc(x, y, .9, 0, Math.PI * 2);\r\n CTX.fill();\r\n }\r\n\r\n \/* Corner vignette *\/\r\n const vg = CTX.createRadialGradient(CW\/2, CH\/2, CH * .3, CW\/2, CH\/2, CH);\r\n vg.addColorStop(0, 'transparent');\r\n vg.addColorStop(1, 'rgba(5,7,15,.55)');\r\n CTX.fillStyle = vg;\r\n CTX.fillRect(0, 0, CW, CH);\r\n CTX.restore();\r\n}\r\n\r\nfunction drawOrb(o) {\r\n const { x, y, r, p } = o;\r\n const fade = 1 - p * .75;\r\n const rCur = r * (1 - p * .18);\r\n const rRipp = r + p * r * 2.8;\r\n\r\n CTX.save();\r\n\r\n \/* Outer halo glow *\/\r\n const grd = CTX.createRadialGradient(x, y, 0, x, y, rCur * 3);\r\n grd.addColorStop(0, `rgba(200,168,106,${.1 * fade})`);\r\n grd.addColorStop(1, 'rgba(200,168,106,0)');\r\n CTX.beginPath();\r\n CTX.arc(x, y, rCur * 3, 0, Math.PI * 2);\r\n CTX.fillStyle = grd;\r\n CTX.fill();\r\n\r\n \/* Expanding ripple ring *\/\r\n CTX.beginPath();\r\n CTX.arc(x, y, rRipp, 0, Math.PI * 2);\r\n CTX.strokeStyle = `rgba(200,168,106,${(1 - p) * .45})`;\r\n CTX.lineWidth = 1.5;\r\n CTX.stroke();\r\n\r\n \/* Main circle fill *\/\r\n CTX.beginPath();\r\n CTX.arc(x, y, rCur, 0, Math.PI * 2);\r\n CTX.fillStyle = `rgba(200,168,106,${.12 * fade})`;\r\n CTX.fill();\r\n\r\n \/* Border *\/\r\n CTX.beginPath();\r\n CTX.arc(x, y, rCur, 0, Math.PI * 2);\r\n CTX.strokeStyle = `rgba(232,204,142,${fade})`;\r\n CTX.lineWidth = 1.8;\r\n CTX.stroke();\r\n\r\n \/* Inner bright core *\/\r\n const core = CTX.createRadialGradient(x, y, 0, x, y, rCur * .45);\r\n core.addColorStop(0, `rgba(255,230,160,${fade})`);\r\n core.addColorStop(1, 'rgba(255,230,160,0)');\r\n CTX.beginPath();\r\n CTX.arc(x, y, rCur * .45, 0, Math.PI * 2);\r\n CTX.fillStyle = core;\r\n CTX.fill();\r\n\r\n \/* Countdown arc (life remaining) *\/\r\n const sA = -Math.PI \/ 2;\r\n const eA = sA + Math.PI * 2 * (1 - p);\r\n CTX.beginPath();\r\n CTX.arc(x, y, rCur + 5, sA, eA);\r\n CTX.strokeStyle = `rgba(232,204,142,${.38 * fade})`;\r\n CTX.lineWidth = 2.5;\r\n CTX.lineCap = 'round';\r\n CTX.stroke();\r\n\r\n CTX.restore();\r\n}\r\n\r\nfunction drawRipple(o) {\r\n const { x, y, r, ripple } = o;\r\n const rr = r + ripple * r * 5;\r\n const a = (1 - ripple) * .7;\r\n\r\n CTX.save();\r\n CTX.beginPath();\r\n CTX.arc(x, y, rr, 0, Math.PI * 2);\r\n CTX.strokeStyle = `rgba(232,204,142,${a})`;\r\n CTX.lineWidth = 1.8;\r\n CTX.stroke();\r\n\r\n \/* Flash burst *\/\r\n if (ripple < .25) {\r\n const inner = CTX.createRadialGradient(x, y, 0, x, y, r);\r\n inner.addColorStop(0, `rgba(255,245,200,${(.25 - ripple) * 4})`);\r\n inner.addColorStop(1, 'rgba(255,245,200,0)');\r\n CTX.beginPath();\r\n CTX.arc(x, y, r, 0, Math.PI * 2);\r\n CTX.fillStyle = inner;\r\n CTX.fill();\r\n }\r\n CTX.restore();\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n INPUT\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfunction getPt(e) {\r\n const rect = CV.getBoundingClientRect();\r\n const src = e.changedTouches ? e.changedTouches[0] : e;\r\n return { x: src.clientX - rect.left, y: src.clientY - rect.top };\r\n}\r\n\r\nfunction handleTap(e) {\r\n if (!G.live) return;\r\n e.preventDefault();\r\n\r\n const pt = getPt(e);\r\n const now = performance.now();\r\n let hit = false;\r\n\r\n \/* Iterate newest first for top-of-stack priority *\/\r\n for (let i = G.orbs.length - 1; i >= 0; i--) {\r\n const o = G.orbs[i];\r\n if (o.hit) continue;\r\n\r\n const dx = pt.x - o.x;\r\n const dy = pt.y - o.y;\r\n const dist = Math.sqrt(dx * dx + dy * dy);\r\n\r\n if (dist <= o.r + 10) {\r\n hit = true;\r\n o.hit = true;\r\n o.ripple = 0;\r\n\r\n const age = (now - o.born) \/ o.life;\r\n const spBonus = Math.round((1 - age) * CFG.SPEED_BONUS);\r\n G.streak++;\r\n if (G.streak > G.bestStreak) G.bestStreak = G.streak;\r\n const mult = getMult();\r\n const pts = Math.round((CFG.BASE_PTS + spBonus) * mult);\r\n G.score += pts;\r\n G.hits++;\r\n\r\n updateHUD(pts, pt.x, pt.y);\r\n toast(hitMsg(G.streak));\r\n break;\r\n }\r\n }\r\n\r\n if (!hit) {\r\n \/* Tapped empty canvas \u2014 reset combo, no miss penalty *\/\r\n G.streak = 0;\r\n updateComboHUD();\r\n }\r\n}\r\n\r\nCV.addEventListener('click', handleTap);\r\nCV.addEventListener('touchstart', handleTap, { passive: false });\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n MISS HANDLER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfunction onMiss() {\r\n G.misses++;\r\n G.streak = 0;\r\n updateComboHUD();\r\n\r\n \/* Brief red flash *\/\r\n const flash = document.createElement('div');\r\n flash.className = 'miss-flash';\r\n WRAP.appendChild(flash);\r\n setTimeout(() => flash.remove(), 380);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n HUD UPDATES\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfunction getMult() {\r\n if (G.streak >= 8) return 3;\r\n if (G.streak >= 5) return 2;\r\n if (G.streak >= CFG.COMBO_THRESH) return 1.5;\r\n return 1;\r\n}\r\n\r\nfunction updateHUD(pts, px, py) {\r\n \/* Score *\/\r\n const sc = $('h-score');\r\n sc.textContent = G.score;\r\n sc.classList.remove('lit');\r\n void sc.offsetWidth;\r\n sc.classList.add('lit');\r\n\r\n \/* Hits *\/\r\n $('h-hits').textContent = G.hits;\r\n\r\n updateComboHUD();\r\n\r\n \/* Floating score pop *\/\r\n const pop = document.createElement('div');\r\n pop.className = 'spop';\r\n pop.textContent = `+${pts}`;\r\n pop.style.color = pts > CFG.BASE_PTS ? 'var(--gold-hi)' : 'var(--ink-text)';\r\n pop.style.left = px + 'px';\r\n pop.style.top = py + 'px';\r\n WRAP.appendChild(pop);\r\n setTimeout(() => pop.remove(), 950);\r\n}\r\n\r\nfunction updateComboHUD() {\r\n const mult = getMult();\r\n const el = $('h-combo');\r\n const prev = el.textContent;\r\n el.textContent = `\u00d7${mult === 1 ? 1 : mult}`;\r\n el.classList.toggle('hot', G.streak >= CFG.COMBO_THRESH);\r\n if (el.textContent !== prev) {\r\n el.classList.remove('hot');\r\n void el.offsetWidth;\r\n el.classList.toggle('hot', G.streak >= CFG.COMBO_THRESH);\r\n }\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n TOAST\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nlet _tid;\r\nfunction toast(msg) {\r\n const el = $('toast');\r\n el.textContent = msg;\r\n el.classList.add('on');\r\n clearTimeout(_tid);\r\n _tid = setTimeout(() => el.classList.remove('on'), 1700);\r\n}\r\n\r\nfunction hitMsg(streak) {\r\n if (streak >= 10) return `\u26a1 ${streak} chain! Unstoppable!`;\r\n if (streak >= 7) return `\ud83d\udd25 ${streak} in a row! On fire!`;\r\n if (streak >= 5) return `\u2728 ${streak} streak! \u00d72 active!`;\r\n if (streak >= CFG.COMBO_THRESH) return `\ud83c\udfaf ${streak} hit combo \u2014 ${getMult()}\u00d7 engaged!`;\r\n const pool = ['Perfect!','Sharp!','Locked in.','Clean hit.','Got it!'];\r\n return pool[Math.floor(Math.random() * pool.length)];\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n STOP \/ END GAME\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfunction stopGame() {\r\n G.live = false;\r\n clearInterval(G.timerID);\r\n clearTimeout(G.spawnTO);\r\n cancelAnimationFrame(G.raf);\r\n G.orbs = [];\r\n G.timerID = G.spawnTO = G.raf = null;\r\n}\r\n\r\nfunction endGame() {\r\n stopGame();\r\n\r\n const total = G.hits + G.misses;\r\n const acc = total ? Math.round(G.hits \/ total * 100) : 0;\r\n\r\n let emo, rank, rClass;\r\n if (G.score >= 5500){ emo='\ud83c\udfc6'; rank='Elite Reflexes'; rClass='rp-gold'; }\r\n else if (G.score >= 3200){ emo='\u26a1'; rank='Sharp Instincts'; rClass='rp-sil'; }\r\n else if (G.score >= 1600){ emo='\ud83c\udfaf'; rank='Focused Performer'; rClass='rp-brnz'; }\r\n else { emo='\ud83d\udcc8'; rank='Room to Grow'; rClass='rp-entry'; }\r\n\r\n $('r-icon').textContent = emo;\r\n $('r-rank').innerHTML = `<div class=\"rank-pill ${rClass}\">${rank}<\/div>`;\r\n $('r-hits').textContent = G.hits;\r\n $('r-acc').textContent = acc + '%';\r\n $('r-combo').textContent = `\u00d7${getMaxMult(G.bestStreak)}`;\r\n\r\n countUp('r-pts', 0, G.score, 1100);\r\n show('result');\r\n\r\n \/* Reset submission strip *\/\r\n $('sv-dot').classList.remove('ok');\r\n $('sv-dot').style.animation = '';\r\n $('sv-txt').textContent = 'Saving your result\\u2026';\r\n $('save-strip').style.borderColor = '';\r\n\r\n submitData({\r\n name: G.name,\r\n email: G.email,\r\n score: G.score,\r\n hits: G.hits,\r\n accuracy: acc,\r\n bestCombo: G.bestStreak,\r\n timestamp: new Date().toISOString(),\r\n });\r\n}\r\n\r\nfunction getMaxMult(streak) {\r\n if (streak >= 8) return 3;\r\n if (streak >= 5) return 2;\r\n if (streak >= CFG.COMBO_THRESH) return 1.5;\r\n return 1;\r\n}\r\n\r\nfunction countUp(id, from, to, ms) {\r\n const el = $(id);\r\n const t0 = performance.now();\r\n const step = now => {\r\n const p = Math.min((now - t0) \/ ms, 1);\r\n el.textContent = Math.round(from + (to - from) * (1 - Math.pow(1 - p, 3)));\r\n if (p < 1) requestAnimationFrame(step);\r\n };\r\n requestAnimationFrame(step);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n DATA SUBMISSION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nasync function submitData(data) {\r\n \/* Always persist locally as backup *\/\r\n try {\r\n const k = 'focus_game_results';\r\n const arr = JSON.parse(localStorage.getItem(k) || '[]');\r\n arr.push(data);\r\n localStorage.setItem(k, JSON.stringify(arr));\r\n } catch(_) { \/* incognito \/ blocked *\/ }\r\n\r\n const strip = $('save-strip');\r\n const dot = $('sv-dot');\r\n const txt = $('sv-txt');\r\n\r\n if (CFG.SUBMIT_METHOD === 'gas') {\r\n \/*\r\n GOOGLE APPS SCRIPT\r\n Sends JSON via POST. Replace CFG.GAS_URL with your\r\n deployment URL. Use Content-Type 'text\/plain' to\r\n avoid a CORS preflight request.\r\n *\/\r\n try {\r\n await fetch(CFG.GAS_URL, {\r\n method: 'POST',\r\n mode: 'no-cors', \/\/ required \u2014 GAS blocks cross-origin requests otherwise\r\n headers: { 'Content-Type': 'text\/plain' },\r\n body: JSON.stringify(data),\r\n });\r\n \/\/ no-cors returns opaque response \u2014 can't read it, but data IS sent\r\n strip.style.borderColor = 'rgba(40,199,142,.3)';\r\n dot.classList.add('ok');\r\n txt.textContent = '\u2713 Saved to Google Sheets';\r\n } catch {\r\n txt.textContent = '\u26a0 Saved locally \u2014 check your Apps Script URL';\r\n }\r\n\r\n } else if (CFG.SUBMIT_METHOD === 'formspree') {\r\n \/*\r\n FORMSPREE\r\n Free tier: 50 submissions per month.\r\n Replace CFG.FORMSPREE with your form endpoint.\r\n *\/\r\n try {\r\n const fd = new FormData();\r\n Object.entries(data).forEach(([k, v]) => fd.append(k, v));\r\n const res = await fetch(CFG.FORMSPREE, {\r\n method: 'POST',\r\n body: fd,\r\n headers: { Accept: 'application\/json' },\r\n });\r\n if (!res.ok) throw new Error();\r\n strip.style.borderColor = 'rgba(40,199,142,.3)';\r\n dot.classList.add('ok');\r\n txt.textContent = '\u2713 Score saved successfully';\r\n } catch {\r\n txt.textContent = '\u26a0 Saved locally \u2014 check your Formspree ID';\r\n }\r\n\r\n } else {\r\n \/* LOCAL ONLY \u2014 default *\/\r\n setTimeout(() => {\r\n strip.style.borderColor = 'rgba(40,199,142,.3)';\r\n dot.classList.add('ok');\r\n dot.style.animation = 'none';\r\n txt.textContent = '\u2713 Score saved locally';\r\n }, 700);\r\n }\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n JSON EXPORT\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfunction exportJSON() {\r\n const payload = {\r\n player: G.name,\r\n email: G.email,\r\n score: G.score,\r\n hits: G.hits,\r\n bestCombo: G.bestStreak,\r\n timestamp: new Date().toISOString(),\r\n };\r\n const b = new Blob([JSON.stringify(payload, null, 2)], { type: 'application\/json' });\r\n const u = URL.createObjectURL(b);\r\n const a = Object.assign(document.createElement('a'), {\r\n href: u,\r\n download: `focus-${G.name.replace(\/\\s+\/g, '-').toLowerCase()}.json`,\r\n });\r\n a.click();\r\n URL.revokeObjectURL(u);\r\n}\r\n\r\n\/* init *\/\r\nshow('reg');\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>FOCUS \u2014 Precision Reaction Challenge Exclusive Challenge Test yourreaction speed. 45 seconds. Vanishing targets. The\u2026<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-16640","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/maspartner.com\/en-us\/wp-json\/wp\/v2\/pages\/16640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maspartner.com\/en-us\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maspartner.com\/en-us\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maspartner.com\/en-us\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/maspartner.com\/en-us\/wp-json\/wp\/v2\/comments?post=16640"}],"version-history":[{"count":12,"href":"https:\/\/maspartner.com\/en-us\/wp-json\/wp\/v2\/pages\/16640\/revisions"}],"predecessor-version":[{"id":17448,"href":"https:\/\/maspartner.com\/en-us\/wp-json\/wp\/v2\/pages\/16640\/revisions\/17448"}],"wp:attachment":[{"href":"https:\/\/maspartner.com\/en-us\/wp-json\/wp\/v2\/media?parent=16640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}