1<!DOCTYPE html> 2<html lang="it"> 3 4<head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" 7 content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" /> 8 <title>Numbergame | Allena la mente con i puzzle matematici</title> 9 <meta name="description" content="Numbergame.it: gioco gratuito di logica matematica, duelli 1vs1, classifiche globali e blog sul calcolo mentale. Allena la mente con puzzle numerici ogni giorno." /> 10 <link rel="canonical" href="https://numbergame.it/" /> 11 <link rel="icon" type="image/png" href="/Faviconottagonook.png"> 12 <link rel="shortcut icon" type="image/png" href="/Faviconottagonook.png"> 13 <link rel="apple-touch-icon" href="/Faviconottagonook.png"> 14 <link rel="apple-touch-icon-precomposed" href="/Faviconottagonook.png"> 15 <link rel="manifest" href="/manifest.json"> 16 <meta name="apple-mobile-web-app-capable" content="yes"> 17 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 18 <meta name="mobile-web-app-capable" content="yes"> 19 <meta name="theme-color" content="#FF8800"> 20
20<script src="https://cdn.tailwindcss.com"></script>
20 21 <link 22 href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;600;800&display=swap" 23 rel="stylesheet"> 24
24<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8620196010585213" 25 crossorigin="anonymous"></script>
25 26 27 <!-- Google Search Console Verification --> 28 <meta name="google-site-verification" content="1wGPWrEmUOc4JrOPIe9vc2MuI62VN4HqcQ38iuvbwQU" /> 29 30 <!-- Google Analytics (GA4) -->
vendor: 66 bytes, lines 30-31
30 31 <script async src="https://www.googletagmanager.com/gtag/js?id=
31G-YW7KE80KWL
vendor: 14 bytes, lines 31-32
31"></script> 32
32<script> 33
vendor: 139 bytes, lines 33-36
33window.dataLayer = window.dataLayer || []; 34 function gtag(){dataLayer.push(arguments);} 35 gtag('js', new Date()); 36 gtag('config', '
36G-YW7KE80KWL
vendor: 6 bytes, lines 36-37
36'); 37
37</script>
37 38
38<script> 39 // Shim avanzato per process.env: previene crash in librerie esterne (es. Google GenAI) 40 // che cercano l'oggetto globale process durante l'inizializzazione. 41 window.process = { 42 env: { 43 API_KEY: "" // Verrà popolato dall'ambiente se disponibile 44 }, 45 nextTick: function (fn) { setTimeout(fn, 0); } 46 }; 47 </script>
47 48
48<script> 49 window.onerror = function (msg, url, lineNo, columnNo, error) { 50 if (msg.includes('ResizeObserver')) return; 51 console.warn('ð Silenziato Errore App non critico:', msg, url, lineNo); 52 return false; 53 }; 54 window.addEventListener('unhandledrejection', function (event) { 55 console.warn('ð Silenziata Promise non gestita:', event.reason); 56 }); 57 </script>
57 58 <style> 59 :root { 60 --app-safe-top: env(safe-area-inset-top, 0px); 61 --app-safe-bottom: env(safe-area-inset-bottom, 0px); 62 --app-safe-left: env(safe-area-inset-left, 0px); 63 --app-safe-right: env(safe-area-inset-right, 0px); 64 --chrome-extra: 8px; 65 --hud-top: calc(var(--app-safe-top) + var(--chrome-extra)); 66 --hex-scale: 1.70; 67 /* Cristalli: saturazione ridotta per evitare arancione eccessivo */ 68 --hex-crystal-brightness: 1.25; 69 --hex-crystal-contrast: 1.05; 70 --hex-crystal-saturate: 0.88; 71 --hex-num-orange-glow: 0; 72 --hex-num-orange-glow-selected: 0.20; 73 /* Boost selezione celle attive */ 74 --hex-select-brightness: 1.14; 75 --hex-select-contrast: 1.10; 76 --hex-select-saturate: 1.12; 77 --hex-select-glow-alpha: 0.22; 78 --hex-select-glow-spread: 12px; 79 --game-bg-saturate: 1.05; 80 --game-bg-contrast: 1.13; 81 } 82 83 /* Telefono / touch: ulteriore desaturazione (OLED e Safari amplificano i colori) */ 84 @media (hover: none) and (pointer: coarse) { 85 :root { 86 --app-safe-top: max(env(safe-area-inset-top, 0px), 28px); 87 --app-safe-bottom: max(env(safe-area-inset-bottom, 0px), 12px); 88 --chrome-extra: 14px; 89 --hud-top: calc(var(--app-safe-top) + var(--chrome-extra)); 90 --hex-crystal-saturate: 0.75; 91 --hex-crystal-brightness: 1.25; 92 --hex-crystal-contrast: 1.05; 93 --hex-num-orange-glow: 0; 94 --hex-num-orange-glow-selected: 0.11; 95 --hex-select-brightness: 1.12; 96 --hex-select-contrast: 1.08; 97 --hex-select-saturate: 1.10; 98 --hex-select-glow-alpha: 0.18; 99 --hex-select-glow-spread: 10px; 100 } 101 } 102 103 @media (max-width: 1024px) { 104 :root { 105 --hex-scale: 1.60; 106 } 107 } 108 109 @media (max-width: 768px) { 110 :root { 111 --hex-scale: 1.50; 112 } 113 } 114 115 @media (max-width: 480px) { 116 :root { 117 --hex-scale: 1.25; 118 } 119 } 120 121 @media (max-width: 410px) { 122 :root { 123 --hex-scale: 1.15; 124 } 125 } 126 127 @media (max-width: 380px) { 128 :root { 129 --hex-scale: 1.00; 130 } 131 } 132 133 @media (max-width: 340px) { 134 :root { 135 --hex-scale: 0.85; 136 } 137 } 138 139 /* Regole avanzate per altezze di schermi Android nativi / schermi pieghevoli */ 140 @media (max-height: 850px) { 141 :root { 142 --hex-scale: 1.15; 143 } 144 } 145 146 @media (max-height: 750px) { 147 :root { 148 --hex-scale: 1.05; 149 } 150 } 151 152 @media (max-height: 660px) { 153 :root { 154 --hex-scale: 0.95; 155 } 156 } 157 158 @media (max-height: 580px) { 159 :root { 160 --hex-scale: 0.80; 161 } 162 } 163 164 html, body, #root { 165 margin: 0; 166 padding: 0; 167 width: 100%; 168 height: 100dvh; 169 min-height: 100dvh; 170 min-height: -webkit-fill-available; 171 overflow: hidden; 172 } 173 174 html, body { 175 font-family: 'Inter', sans-serif; 176 background-color: #020617; 177 background-image: url('/sfondo.png'); 178 background-size: cover; 179 background-position: center; 180 background-repeat: no-repeat; 181 background-attachment: fixed; 182 color: #f8fafc; 183 touch-action: none; 184 -webkit-overflow-scrolling: touch; 185 box-sizing: border-box; 186 position: fixed; 187 } 188 189 *, 190 *::before, 191 *::after { 192 box-sizing: inherit; 193 } 194 195 /* Sito web (home + menu): sblocca lo scroll. /play resta locked. */ 196 html.allow-scroll { 197 position: relative !important; 198 overflow-x: hidden !important; 199 overflow-y: auto !important; 200 height: auto !important; 201 min-height: 100dvh !important; 202 min-height: -webkit-fill-available; 203 touch-action: pan-y !important; 204 } 205 206 html.allow-scroll body, 207 html.allow-scroll #root, 208 #root.allow-scroll { 209 position: relative !important; 210 overflow: visible !important; 211 height: auto !important; 212 min-height: 100dvh !important; 213 min-height: -webkit-fill-available; 214 touch-action: pan-y !important; 215 } 216 217 @media (max-width: 767px) { 218 html.allow-scroll #root { 219 padding-bottom: 72px; 220 } 221 } 222 223 .font-orbitron { 224 font-family: 'Orbitron', sans-serif; 225 } 226 227 .hexagon-clip { 228 clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 229 } 230 231 .octagon-clip { 232 clip-path: polygon(29.29% 0%, 70.71% 0%, 100% 29.29%, 100% 70.71%, 70.71% 100%, 29.29% 100%, 0% 70.71%, 0% 29.29%); 233 } 234
235 @keyframes rotate-energy { 236 0% { 237 transform: rotate(0deg); 238 } 239 240 100% { 241 transform: rotate(360deg); 242 } 243 } 244 245 @keyframes screen-in { 246 from { 247 opacity: 0; 248 transform: translateY(20px); 249 filter: blur(10px); 250 } 251 252 to { 253 opacity: 1; 254 transform: translateY(0); 255 filter: blur(0); 256 } 257 } 258 259 .animate-screen-in { 260 animation: screen-in 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards; 261 } 262 263 @keyframes float { 264 265 0%, 266 100% { 267 transform: translateY(0px) rotate(0deg); 268 } 269 270 50% { 271 transform: translateY(-12px) rotate(2deg); 272 } 273 } 274 275 .animate-float { 276 animation: float 5s ease-in-out infinite; 277 } 278 279 .glass-panel { 280 background: rgba(15, 23, 42, 0.6); 281 -webkit-backdrop-filter: blur(20px); 282 backdrop-filter: blur(20px); 283 border: 1px solid rgba(255, 255, 255, 0.1); 284 box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5); 285 } 286 287 .energy-ring { 288 position: absolute; 289 inset: -150%; 290 background: conic-gradient(from 0deg, 291 transparent 20%, 292 #22d3ee 45%, 293 #6366f1 50%, 294 #22d3ee 55%, 295 transparent 80%); 296 animation: rotate-energy 3s linear infinite; 297 z-index: -1; 298 filter: blur(25px); 299 opacity: 0.8; 300 } 301 302 .logo-inner-glow { 303 position: absolute; 304 inset: 0; 305 background: radial-gradient(circle at center, rgba(34, 211, 238, 0.3) 0%, transparent 85%); 306 pointer-events: none; 307 } 308 309 .logo-outline { 310 position: absolute; 311 inset: 0; 312 border: 2px solid rgba(34, 211, 238, 0.4); 313 clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 314 pointer-events: none; 315 } 316 317 @keyframes hex-entry { 318 0% { 319 opacity: 0; 320 transform: translateY(-200px) scale(0); 321 } 322 323 70% { 324 transform: translateY(15px) scale(1.1); 325 } 326 327 100% { 328 opacity: 1; 329 transform: translateY(0) scale(1); 330 } 331 } 332 333 .animate-hex-entry { 334 animation: hex-entry 0.62s cubic-bezier(0.34, 1.45, 0.64, 1) forwards; 335 opacity: 0; 336 } 337 338 @keyframes hex-select { 339 0% { 340 transform: scale(1); 341 } 342 343 50% { 344 transform: scale(1.2); 345 } 346 347 100% { 348 transform: scale(1.1); 349 } 350 } 351 352 /* Selezione istantanea con zoom hardware-accelerato senza sfarfallio */ 353 .animate-hex-select { 354 transform: scale(1.1) translate3d(0,0,0) !important; 355 transition: transform 0.08s cubic-bezier(0.25, 1, 0.5, 1) !important; 356 } 357 358 .animate-hex-deselect { 359 transform: scale(1) translate3d(0,0,0) !important; 360 transition: transform 0.08s cubic-bezier(0.25, 1, 0.5, 1) !important; 361 } 362 363 /* Effetto Palloncino 3D (Inflate & Deflate +40%) - correct path celebration */ 364 @keyframes hex-correct-bounce { 365 0% { transform: scale3d(1, 1, 1); } 366 30% { transform: scale3d(1.4, 1.4, 1); } /* Gonfiamento sferico massimo (+40%) */ 367 48% { transform: scale3d(1.35, 1.45, 1); } /* Deformazione d'aria verticale */ 368 65% { transform: scale3d(1.45, 1.35, 1); } /* Deformazione d'aria orizzontale */ 369 82% { transform: scale3d(0.92, 0.92, 1); } /* Sgonfiamento fulmineo e rimbalzo a vuoto */ 370 100% { transform: scale3d(1, 1, 1); } /* Stato stabile iniziale */ 371 } 372 .animate-hex-correct-bounce { 373 transform-origin: bottom center !important; /* Mantiene la base immobile */ 374 animation: hex-correct-bounce 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 375 } 376 /* Spazzamento del Riflesso Luminoso Bianco (Step 2: Glass Shine Sweep) */ 377 @keyframes hex-shine-sweep { 378 0% { left: -150%; } 379 20% { left: -150%; } 380 40% { left: 150%; } 381 100% { left: 150%; } 382 } 383 384 /* Coreografia Celebrazione Target in 4 Fasi (Step 1-4) */ 385 @keyframes hex-target-star-bounce { 386 /* STEP 1: Pop in dal nulla elastico (0% - 20%) */ 387 0% { transform: scale3d(0, 0, 1); opacity: 0; } 388 10% { transform: scale3d(1.2, 1.2, 1); opacity: 1; } 389 20% { transform: scale3d(1, 1, 1); opacity: 1; } 390 391 /* STEP 2: Specular reflect sweep - Target immobile per far passare il riflesso (20% - 85%) */ 392 20% { transform: scale3d(1, 1, 1) translateY(0) rotate(0deg); } 393 85% { transform: scale3d(1, 1, 1) translateY(0) rotate(0deg); } 394 395 /* STEP 4: Rimpicciolimento rapido fino a sparire nel nulla (85% - 100%) */ 396 85% { transform: translateY(0) scale3d(1, 1, 1) rotate(0deg); opacity: 1; } 397 92% { transform: translateY(0) scale3d(1.12, 1.12, 1) rotate(4deg);
397 opacity: 1; } 398 100% { transform: translateY(0) scale3d(0, 0, 1) rotate(-10deg); opacity: 0; } 399 } 400 401 .animate-hex-correct-bounce-delayed { 402 position: relative; 403 overflow: hidden; 404 transform-origin: bottom center !important; /* Ancoraggio fisso alla base */ 405 animation: hex-target-star-bounce 0.47s cubic-bezier(0.25, 1, 0.5, 1) forwards; 406 animation-delay: 25ms !important; /* Ritardo di cascata dinamica */ 407 } 408 409 /* Pseudo-elemento per il riflesso di luce lucido (Step 2 pseudo shine sweep) */ 410 .animate-hex-correct-bounce-delayed::after { 411 content: ''; 412 position: absolute; 413 top: -20%; 414 left: -150%; 415 width: 120%; 416 height: 140%; 417 background: linear-gradient( 418 90deg, 419 transparent, 420 rgba(255, 255, 255, 0.75), 421 transparent 422 ); 423 transform: skewX(-25deg); 424 pointer-events: none; 425 z-index: 30; 426 animation: hex-shine-sweep 0.47s linear forwards; 427 animation-delay: 25ms !important; 428 } 429 430 /* Flash Reflect - white specular flash for correct and wrong */ 431 @keyframes hex-flash-reflect { 432 0% { opacity: 0; } 433 25% { opacity: 0.44; } 434 60% { opacity: 0.28; } 435 100% { opacity: 0; } 436 } 437 .animate-hex-flash-reflect { 438 animation: hex-flash-reflect 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards; 439 } 440 441 @keyframes fallen { 442 0% { 443 opacity: 1; 444 transform: scale(1) translateY(0); 445 filter: blur(0); 446 } 447 448 100% { 449 opacity: 0; 450 transform: scale(0.2) translateY(100px); 451 filter: blur(10px); 452 } 453 } 454 455 .animate-fallen { 456 animation: fallen 0.48s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards; 457 pointer-events: none; 458 } 459 460 /* Grid finale â win: radial burst from center, outer â inner wave */ 461 @keyframes crystalFinaleBurst { 462 0% { 463 opacity: 1; 464 transform: translate(0, 0) scale(1) rotate(0deg); 465 filter: blur(0); 466 } 467 10% { 468 opacity: 1; 469 transform: translate(calc(var(--burst-x) * 0.06), calc(var(--burst-y) * 0.06)) scale(1.05) rotate(calc(var(--burst-rot) * 0.08)); 470 filter: blur(0); 471 } 472 38% { 473 opacity: 1; 474 transform: translate(calc(var(--burst-x) * 0.32), calc(var(--burst-y) * 0.32)) scale(1.08) rotate(calc(var(--burst-rot) * 0.28)); 475 filter: blur(0); 476 } 477 68% { 478 opacity: 0.9; 479 transform: translate(calc(var(--burst-x) * 0.68), calc(var(--burst-y) * 0.68)) scale(0.82) rotate(calc(var(--burst-rot) * 0.62)); 480 filter: blur(1px); 481 } 482 88% { 483 opacity: 0.45; 484 transform: translate(calc(var(--burst-x) * 0.9), calc(var(--burst-y) * 0.9)) scale(0.55) rotate(calc(var(--burst-rot) * 0.85)); 485 filter: blur(3px); 486 } 487 100% { 488 opacity: 0; 489 transform: translate(var(--burst-x), var(--burst-y)) scale(0.38) rotate(var(--burst-rot)); 490 filter: blur(7px); 491 } 492 } 493 494 .animate-crystal-finale-burst { 495 animation: crystalFinaleBurst var(--burst-duration, 1.75s) cubic-bezier(0.22, 0.61, 0.36, 1) forwards; 496 pointer-events: none; 497 z-index: 30; 498 } 499 500 /* Grid finale â lose: random detach and fall */ 501 @keyframes crystalFinaleFall { 502 0% { 503 opacity: 1; 504 transform: translate(0, 0) rotate(0deg) scale(1); 505 filter: blur(0); 506 } 507 12% { 508 transform: translate(calc(var(--fall-drift) * 0.25), -8px) rotate(calc(var(--fall-rot) * 0.12)) scale(1.04); 509 } 510 100% { 511 opacity: 0; 512 transform: translate(var(--fall-drift), 260px) rotate(var(--fall-rot)) scale(0.3); 513 filter: blur(8px); 514 } 515 } 516 517 .animate-crystal-finale-fall { 518 animation: crystalFinaleFall 1.1s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards; 519 pointer-events: none; 520 } 521 522 @keyframes gridFinaleTitlePop { 523 0% { 524 opacity: 0; 525 transform: scale(0.6); 526 } 527 60% { 528 opacity: 1; 529 transform: scale(1.06); 530 } 531 100% { 532 opacity: 1; 533 transform: scale(1); 534 } 535 } 536 537 .grid-finale-title { 538 opacity: 0; 539 transform: scale(0.6); 540 width: 100%; 541 padding: 0 1rem; 542 box-sizing: border-box; 543 } 544 545 .grid-finale-title-visible { 546 animation: gridFinaleTitlePop 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; 547 } 548 549 .grid-finale-title-win span, 550 .grid-finale-title-lose span { 551 display: block; 552 font-family: 'Orbitron', sans-serif; 553 font-size: clamp(1.15rem, calc((100vw - 3rem) / 10.5), 2.65rem); 554 font-weight: 900; 555 line-height: 1.05; 556 letter-spacing: clamp(0.02em, 0.5vw, 0.05em); 557 text-transform: uppercase; 558 text-align: center; 559 max-width: calc(100vw - 2rem); 560 margin: 0 auto; 561 white-space: nowrap; 562 -webkit-background-clip: text; 563 background-clip: text; 564 color: transparent; 565 background-color: transparent; 566 } 567 568 .grid-finale-title-win.grid-finale-title-visible span { 569 background-image: linear-gradient(168deg, #fffef5 0%, #ffe8a8 18%, #ffaa33 42%, #ff7700 68%, #ff4400 100%); 570 } 571 572 .grid-finale-title-lose.grid-finale-title-visible span { 573 background-image: linear-gradient(168deg, #fff8f8 0%, #ffcccc 20%, #ff5555 48%, #dd2222 72%, #991111 100%); 574 } 575
576 @keyframes vibrate { 577 0% { 578 transform: translate(0, 0) rotate(0); 579 } 580 581 20% { 582 transform: translate(-2px, 1px) rotate(-0.5deg); 583 } 584 585 40% { 586 transform: translate(-2px, -1px) rotate(0.5deg); 587 } 588 589 60% { 590 transform: translate(2px, 1px) rotate(-0.5deg); 591 } 592 593 80% { 594 transform: translate(2px, -1px) rotate(0.5deg); 595 } 596 597 100% { 598 transform: translate(0, 0) rotate(0); 599 } 600 } 601 602 .animate-vibrate { 603 animation: vibrate 0.15s linear infinite; 604 } 605 606 /* Custom Scrollbar - Neon Green Style */ 607 .custom-scroll::-webkit-scrollbar { 608 width: 5px; 609 } 610 611 .custom-scroll::-webkit-scrollbar-track { 612 background: rgba(0, 0, 0, 0.2); 613 border-radius: 10px; 614 } 615 616 .custom-scroll::-webkit-scrollbar-thumb { 617 background: #10b981; 618 border-radius: 10px; 619 box-shadow: 0 0 10px #10b981, 0 0 20px #10b981; 620 } 621 622 .custom-scroll::-webkit-scrollbar-thumb:hover { 623 background: #34d399; 624 box-shadow: 0 0 15px #34d399, 0 0 30px #34d399; 625 } 626 627 /* Custom Scrollbar - Neon Style */ 628 *::-webkit-scrollbar {
629 display: block; 630 width: 6px; 631 } 632 633 *::-webkit-scrollbar-track { 634 background: rgba(2, 6, 23, 0.8); 635 } 636 637 *::-webkit-scrollbar-thumb { 638 background: #FF8800; 639 border-radius: 10px; 640 box-shadow: 0 0 10px rgba(255, 136, 0, 0.3); 641 } 642 643 *::-webkit-scrollbar-thumb:hover { 644 background: #FF9900; 645 } 646 647 * { 648 -ms-overflow-style: auto; 649 scrollbar-width: thin; 650 scrollbar-color: #FF8800 rgba(2, 6, 23, 0.8); 651 } 652 653 .no-scrollbar::-webkit-scrollbar { 654 display: none; 655 } 656 .no-scrollbar { 657 -ms-overflow-style: none; 658 scrollbar-width: none; 659 } 660 body.in-game nav { 661 display: none !important; 662 } 663 664 [data-game-root] { 665 width: 100%; 666 height: 100dvh; 667 min-height: 100dvh; 668 min-height: -webkit-fill-available; 669 } 670 671 .viewport-bg-layer { 672 position: fixed; 673 inset: 0; 674 width: 100%; 675 height: 100dvh; 676 min-height: 100dvh; 677 min-height: -webkit-fill-available; 678 } 679 680 @media (hover: hover) and (pointer: fine) { 681 :root { 682 --app-safe-top: env(safe-area-inset-top, 0px); 683 --app-safe-bottom: 0px; 684 --chrome-extra: 6px; 685 --hud-top: calc(var(--app-safe-top) + var(--chrome-extra)); 686 } 687 688 .home-idle-shell { 689 padding-bottom: 0.5rem; 690 } 691 692 .game-play-shell { 693 padding-bottom: 0.25rem; 694 } 695 } 696 697 .game-board-lift { 698 transform: translateY(-22px); 699 } 700 701 .home-top-fab { 702 top: calc(var(--hud-top) + 4px); 703 right: calc(1.25rem + var(--app-safe-right)); 704 } 705 706 .home-idle-shell { 707 padding-top: var(--hud-top); 708 padding-bottom: calc(1rem + var(--app-safe-bottom)); 709 padding-left: calc(1rem + var(--app-safe-left)); 710 padding-right: calc(1rem + var(--app-safe-right)); 711 min-height: 100%; 712 box-sizing: border-box; 713 } 714 715 .game-play-shell { 716 padding-top: var(--hud-top); 717 padding-left: calc(1rem + var(--app-safe-left)); 718 padding-right: calc(1rem + var(--app-safe-right)); 719 padding-bottom: calc(0.75rem + var(--app-safe-bottom)); 720 box-sizing: border-box; 721 } 722 723 .top-chrome-bar { 724 padding-top: 4px; 725 } 726 </style> 727 728 729 730 731
731<script type="importmap"> 732 { 733 "imports": { 734 "react": "https://esm.sh/react@^19.2.3", 735 "react/": "https://esm.sh/react@^19.2.3/", 736 "@google/genai": "https://esm.sh/@google/genai@^1.34.0", 737 "react-dom/": "https://esm.sh/react-dom@^19.2.3/", 738 "lucide-react": "https://esm.sh/lucide-react@^0.562.0" 739 } 740 } 741 </script>
741 742
742<script type="module" crossorigin src="/assets/index-DAu-wZeC.js"></script>
742 743 744 <meta name="description" content="Sfida la tua mente con Numbergame.it, il gioco di logica matematica più avanzato. Allena il tuo cervello, partecipa a duelli 1vs1 online e migliora il tuo QI." /> 745 <meta name="keywords" content="numbergame, gioco logica matematica, allenamento mentale, cervello, duelli logica, calcolo mentale" /> 746 <meta property="og:type" content="website" /> 747 <meta property="og:title" content="Numbergame | Allena la mente con i puzzle matematici" /> 748 <meta property="og:description" content="Sfida la tua mente con Numbergame.it, il gioco di logica matematica più avanzato. Allena il tuo cervello, partecipa a duelli 1vs1 online e migliora il tuo QI." /> 749 <meta property="og:site_name" content="Numbergame" /> 750</head> 751 752<body> 753 <div id="root"> 754 755<div style="background-color: #020617; color: #ffffff; min-height: 100vh; font-family: 'Inter', sans-serif;"> 756 757<header style="background: rgba(15, 23, 42, 0.9); border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding: 16px 24px; display: flex; justify-content: space-between; align-items: center;"> 758 <div style="display: flex; align-items: center; gap: 8px;"> 759 <div style="width: 32px; height: 32px; background: #FF8800; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 900; color: white; font-style: italic;">N</div> 760 <a href="/" style="font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 20px; color: #FF8800; text-decoration: none;">number</a> 761 </div> 762 <nav style="display: flex; gap: 24px;"> 763 <a href="/" style="color: #cbd5e1; text-decoration: none; font-weight: 600; font-size: 14px;">Home</a> 764 <a href="/play" style="color: #ffffff; text-decoration: none; font-weight: 900; font-size: 14px;">Gioca</a> 765 <a href="/blog" style="color: #cbd5e1; text-decoration: none; font-weight: 600; font-size: 14px;">Blog</a> 766 <a href="/about" style="color: #cbd5e1; text-decoration: none; font-weight: 600; font-size: 14px;">About</a> 767 </nav> 768</header> 769 770 <main style="max-width: 1200px; margin: 0 auto; padding: 80px 24px; text-align: center;"> 771 <span style="background: rgba(255, 136, 0, 0.1); border: 1px solid rgba(255, 136, 0, 0.2); color: #FF8800; padding: 6px 16px; border-radius: 9999px; font-size: 12px; font-weight: 900; letter-spacing: 2px;">NEURAL MATH GAMING ⢠V2.0</span> 772 <h1 style="font-family: 'Orbitron', sans-serif; font-size: 48px; font-weight: 900; margin-top: 24px; margin-bottom: 16px; line-height: 1.1;">Sfida la tua Mente con la Logica Matematica</h1> 773 <p style="color: #94a3b8; font-size: 18px; max-width: 600px; margin: 0 auto 40px auto; line-height: 1.6;">Il gioco di logica numerica più avanzato. Allena il tuo quoziente intellettivo (QI), partecipa a duelli neurali 1vs1 e scala la classifica globale.</p> 774 <a href="/play" style="background: #FF8800; color: #000000; padding: 16px 40px; border-radius: 12px; font-weight: 900; text-decoration: none; display: inline-block; font-size: 18px; box-shadow: 0 0 30px rgba(255,136,0,0.3);">INIZIA A GIOCARE ORA</a> 775 </main> 776 777 <section style="background: rgba(15, 23, 42, 0.4); padding: 80px 24px; border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05);"> 778 <div style="max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 48px;"> 779 <div style="text-align: center;"> 780 <h3 style="font-family: 'Orbitron', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 12px; color: #FF8800;">Allena la Logica</h3> 781 <p style="color: #94a3b8; line-height: 1.6;">Risolvi enigmi matematici sempre più complessi per stimolare la neuro
781plasticità cerebrale e migliorare la concentrazione.</p> 782 </div> 783 <div style="text-align: center;"> 784 <h3 style="font-family: 'Orbitron', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 12px; color: #38bdf8;">Neural Duel 1vs1</h3> 785 <p style="color: #94a3b8; line-height: 1.6;">Sfida altri giocatori online in tempo reale nelle modalità Standard o Blitz ad alta velocità .</p> 786 </div> 787 <div style="text-align: center;"> 788 <h3 style="font-family: 'Orbitron', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 12px; color: #c084fc;">Scala i Ranking</h3> 789 <p style="color: #94a3b8; line-height: 1.6;">Accumula punti, sblocca badge unici e confrontati con una community globale di amanti dei numeri.</p> 790 </div> 791 </div> 792 </section> 793 794 <section style="max-width: 1200px; margin: 0 auto; padding: 60px 24px 80px;"> 795 <h2 style="font-family: 'Orbitron', sans-serif; font-size: 28px; font-weight: 900; text-align: center; margin-bottom: 12px;">Blog e approfondimenti</h2> 796 <p style="color: #94a3b8; text-align: center; max-width: 640px; margin: 0 auto 32px; line-height: 1.7;">Articoli originali su calcolo mentale, neuroplasticità , strategie di studio e benessere cognitivo. Contenuti pensati per chi vuole allenare la mente oltre la partita.</p> 797 <div style="text-align: center;"> 798 <a href="/blog" style="color: #FF8800; font-weight: 900; text-decoration: none; margin-right: 24px;">Vai al Blog â</a> 799 <a href="/about" style="color: #cbd5e1; font-weight: 700; text-decoration: none;">Chi Siamo</a> 800 </div> 801 </section> 802 803<footer style="background: #020617; border-top: 1px solid rgba(255, 255, 255, 0.05); padding: 48px 24px; margin-top: 80px;"> 804 <div style="max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; color: #94a3b8; font-family: 'Inter', sans-serif;"> 805 <div> 806 <h4 style="color: #ffffff; font-weight: 700; margin-bottom: 16px;">numbergame.it</h4> 807 <p style="font-size: 14px; line-height: 1.6;">La piattaforma definitiva per gli amanti dei numeri. Allenamento cognitivo, competizione e divertimento.</p> 808 </div> 809 <div> 810 <h4 style="color: #FF8800; font-weight: 700; margin-bottom: 16px;">Link Utili</h4> 811 <ul style="list-style: none; padding: 0; margin: 0; font-size: 14px; line-height: 2;"> 812 <li><a href="/play" style="color: #94a3b8; text-decoration: none;">Gioca Ora</a></li> 813 <li><a href="/blog" style="color: #94a3b8; text-decoration: none;">Blog & News</a></li> 814 <li><a href="/about" style="color: #94a3b8; text-decoration: none;">Chi Siamo</a></li> 815 </ul> 816 </div> 817 <div> 818 <h4 style="color: #FF8800; font-weight: 700; margin-bottom: 16px;">Legale</h4> 819 <ul style="list-style: none; padding: 0; margin: 0; font-size: 14px; line-height: 2;"> 820 <li><a href="/privacy" style="color: #94a3b8; text-decoration: none;">Privacy Policy</a></li> 821 <li><a href="/cookies" style="color: #94a3b8; text-decoration: none;">Cookie Policy</a></li> 822 <li><a href="/terms" style="color: #94a3b8; text-decoration: none;">Termini d'uso</a></li> 823 </ul> 824 </div> 825 </div> 826 <div style="text-align: center; color: #475569; font-size: 11px; margin-top: 48px; border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 24px;"> 827 © 2026 GIULINCY SRL ⢠ALL RIGHTS RESERVED ⢠MATH IS POWER 828 </div> 829</footer> 830 831</div> 832 833 834 <div 835 style="height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; background: transparent; color: #FF8800; font-family: 'Orbitron', monospace; flex-direction: column;"> 836 <h1 style="font-size: 24px; margin-bottom: 20px;">SYSTEM BOOT</h1> 837 <div style="font-size: 12px; opacity: 0.7;">LOADING MODULES...</div> 838 </div> 839 </div> 840 <!-- Caricamento del modulo principale --> 841 842 <style> 843 /* Prevent blue tap highlight and selection for native feel */ 844 * { 845 -webkit-tap-highlight-color: transparent; 846 user-select: none; 847 -webkit-user-select: none; 848 } 849 850 input, 851 textarea { 852 user-select: text !important; 853 -webkit-user-select: text !important; 854 } 855 856 /* ============================================ 857 PLASMA ENERGY CORE VFX â Two-Phase Animation 858 Phase 1 (0â0.9s): Sphere appears & pulses 859 Phase 2 (0.9â1.6s): Explosion & fade out 860 Target collapse starts with 1.2s delay 861 ============================================ */ 862 863 /* PHASE 1+2: Outer bloom â pulses then expands outward */
864 @keyframes plasmaBloomLife { 865 0% { transform: scale(0); opacity: 0; filter: blur(10px); } 866 10% { transform: scale(1.2); opacity: 0.7; filter: blur(8px); } 867 30% { transform: scale(1.0); opacity: 0.5; filter: blur(10px); } 868 50% { transform: scale(1.3); opacity: 0.75; filter: blur(8px); } 869 65% { transform: scale(1.0); opacity: 0.55; filter: blur(10px); } 870 /* â Explosion starts â */ 871 75% { transform: scale(1.2); opacity: 0.7; filter: blur(6px); } 872 100% { transform: scale(3.5); opacity: 0; filter: blur(22px); } 873 } 874 875 /* PHASE 1+2: Cyan sphere â appears, pulses with glow, then bursts */ 876 @keyframes plasmaSphereLife { 877 0% { transform: scale(0); opacity: 0; box-shadow: 0 0 0px rgba(0,235,255,0); } 878 8% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 30px rgba(0,235,255,0.9), inset 0 0 16px rgba(0,235,255,0.8); } 879 22% { transform: scale(0.9); opacity: 0.85; box-shadow: 0 0 15px rgba(0,235,255,0.5), inset 0 0 8px rgba(0,235,255,0.4); } 880 38% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 35px rgba(0,235,255,1), inset 0 0 20px rgba(0,235,255,0.9); } 881 55% { transform: scale(0.92); opacity: 0.9; box-shadow: 0 0 18px rgba(0,235,255,0.6), inset 0 0 10px rgba(0,235,255,0.5); } 882 68% { transform: scale(1.05); opacity: 1; box-shadow: 0 0 28px rgba(0,235,255,0.85),inset 0 0 15px rgba(0,235,255,0.75); } 883 /* â Explosion starts â */ 884 78% { transform: scale(1.2); opacity: 1; } 885 100% { transform: scale(2.8); opacity: 0; filter: blur(10px); } 886 } 887 888 /* PHASE 1+2: White nucleus â pulses brightly then implodes */ 889 @keyframes plasmaNucleusLife { 890 0% { transform: scale(0); opacity: 0; box-shadow: 0 0 0 #fff; } 891 8% { transform: scale(1.4); opacity: 1; box-shadow: 0 0 16px #fff, 0 0 32px #00ebff; } 892 22% { transform: scale(0.8); opacity: 0.8; box-shadow: 0 0 8px #fff, 0 0 16px #00ebff; } 893 38% { transform: scale(1.5); opacity: 1; box-shadow: 0 0 20px #fff, 0 0 40px #00ebff; } 894 55% { transform: scale(0.8); opacity: 0.9; box-shadow: 0 0 10px #fff, 0 0 20px #00ebff; } 895 68% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 18px #fff, 0 0 36px #00ebff; } 896 /* â Explosion: nucleus flares then vanishes â */ 897 78% { transform: scale(2.0); opacity: 1; box-shadow: 0 0 30px #fff, 0 0 60px #00ebff; } 898 100% { transform: scale(0.1); opacity: 0; box-shadow: 0 0 0 #fff; } 899 } 900 901 /* PHASE 1: Particles orbit tightly; PHASE 2: scatter outward */ 902 @keyframes plasmaOrbit1 { 903 0% { transform: translate(-50%,-50%) rotate(0deg) translate(7px) scale(0); opacity: 0; } 904 10% { transform: translate(-50%,-50%) rotate(30deg) translate(7px) scale(1); opacity: 1; } 905 65% { transform: translate(-50%,-50%) rotate(250deg) translate(7px) scale(1); opacity: 1; } 906 100% { transform: translate(-50%,-50%) rotate(405deg) translate(40px) scale(0); opacity: 0; } 907 } 908 @keyframes plasmaOrbit2 { 909 0% { transform: translate(-50%,-50%) rotate(45deg) translate(7px) scale(0); opacity: 0; } 910 10% { transform: translate(-50%,-50%) rotate(75deg) translate(7px) scale(1); opacity: 1; } 911 65% { transform: translate(-50%,-50%) rotate(295deg) translate(7px) scale(1); opacity: 1; } 912 100% { transform: translate(-50%,-50%) rotate(450deg) translate(40px) scale(0); opacity: 0; } 913 } 914 @keyframes plasmaOrbit3 { 915 0% { transform: translate(-50%,-50%) rotate(90deg) translate(7px) scale(0); opacity: 0; } 916 10% { transform: translate(-50%,-50%) rotate(120deg) translate(7px) scale(1); opacity: 1; } 917 65% { transform: translate(-50%,-50%) rotate(340deg) translate(7px) scale(1); opacity: 1; } 918 100% { transform: translate(-50%,-50%) rotate(495deg) translate(40px) scale(0); opacity: 0; } 919 } 920 @keyframes plasmaOrbit4 { 921 0% { transform: translate(-50%,-50%) rotate(135deg) translate(7px) scale(0); opacity: 0; } 922 10% { transform: translate(-50%,-50%) rotate(165deg) translate(7px) scale(1); opacity: 1; } 923 65% { transform: translate(-50%,-50%) rotate(385deg) translate(7px) scale(1); opacity: 1; } 924 100% { transform: translate(-50%,-50%) rotate(540deg) translate(40px) scale(0); opacity: 0; } 925 }
926 @keyframes plasmaOrbit5 { 927 0% { transform: translate(-50%,-50%) rotate(180deg) translate(7px) scale(0); opacity: 0; } 928 10% { transform: translate(-50%,-50%) rotate(210deg) translate(7px) scale(1); opacity: 1; } 929 65% { transform: translate(-50%,-50%) rotate(430deg) translate(7px) scale(1); opacity: 1; } 930 100% { transform: translate(-50%,-50%) rotate(585deg) translate(40px) scale(0); opacity: 0; } 931 } 932 @keyframes plasmaOrbit6 { 933 0% { transform: translate(-50%,-50%) rotate(225deg) translate(7px) scale(0); opacity: 0; } 934 10% { transform: translate(-50%,-50%) rotate(255deg) translate(7px) scale(1); opacity: 1; } 935 65% { transform: translate(-50%,-50%) rotate(475deg) translate(7px) scale(1); opacity: 1; } 936 100% { transform: translate(-50%,-50%) rotate(630deg) translate(40px) scale(0); opacity: 0; } 937 } 938 @keyframes plasmaOrbit7 { 939 0% { transform: translate(-50%,-50%) rotate(270deg) translate(7px) scale(0); opacity: 0; } 940 10% { transform: translate(-50%,-50%) rotate(300deg) translate(7px) scale(1); opacity: 1; } 941 65% { transform: translate(-50%,-50%) rotate(520deg) translate(7px) scale(1); opacity: 1; } 942 100% { transform: translate(-50%,-50%) rotate(675deg) translate(40px) scale(0); opacity: 0; } 943 } 944 @keyframes plasmaOrbit8 { 945 0% { transform: translate(-50%,-50%) rotate(315deg) translate(7px) scale(0); opacity: 0; } 946 10% { transform: translate(-50%,-50%) rotate(345deg) translate(7px) scale(1); opacity: 1; } 947 65% { transform: translate(-50%,-50%) rotate(565deg) translate(7px) scale(1); opacity: 1; } 948 100% { transform: translate(-50%,-50%) rotate(720deg) translate(40px) scale(0); opacity: 0; } 949 } 950 951 /* Target collapses AFTER plasma finishes (1.2s delay) */ 952 @keyframes targetCollapse { 953 0% { opacity: 1; width: auto; max-width: 100px; min-width: 0; margin: 0 4px; padding: 0; } 954 60% { opacity: 0; width: 56px; min-width: 56px; margin: 0 4px; padding: 0; } 955 100% { 956 opacity: 0; width: 0px; min-width: 0px; max-width: 0px; 957 margin: 0px -4px; padding: 0px; 958 border: none; box-shadow: none; 959 visibility: hidden; pointer-events: none; 960 } 961 } 962 963 .animate-target-completed { 964 animation: targetCollapse 0.7s ease-in 1.4s forwards !important; 965 } 966 967 /* ---- Component Styles ---- */ 968 .plasma-core-wrapper { 969 position: absolute; 970 inset: 0; 971 display: flex; 972 align-items: center; 973 justify-content: center; 974 overflow: visible; 975 background: radial-gradient(circle, rgba(5,15,35,0.92) 0%, rgba(2,6,23,0.98) 100%) !important; 976 z-index: 10; 977 border-radius: inherit; 978 pointer-events: none; 979 } 980 981 .plasma-bloom { 982 position: absolute; 983 width: 150%; 984 height: 150%; 985 border-radius: 50%; 986 background: radial-gradient(circle, 987 rgba(0,235,255,0.5) 0%, 988 rgba(0,200,255,0.2) 40%, 989 rgba(0,150,255,0.05) 65%, 990 transparent 80% 991 ); 992 filter: blur(10px); 993 animation: plasmaBloomLife 1.6s ease-in-out forwards; 994 } 995 996 .plasma-sphere { 997 position: absolute; 998 width: 62%; 999 height: 62%; 1000 border-radius: 50%; 1001 background: radial-gradient(circle, 1002 rgba(180,255,255,0.08) 0%, 1003 rgba(0,235,255,0.55) 55%, 1004 rgba(0,200,255,0.92) 100% 1005 ); 1006 border: 1.5px solid rgba(0,235,255,0.6); 1007 box-shadow: 1008 0 0 18px rgba(0,235,255,0.7), 1009 0 0 40px rgba(0,200,255,0.3), 1010 inset 0 0 14px rgba(0,235,255,0.55); 1011 animation: plasmaSphereLife 1.6s ease-in-out forwards; 1012 } 1013 1014 .plasma-sphere::after { 1015 content: ''; 1016 position: absolute; 1017 inset: 0; 1018 border-radius: 50%; 1019 background-image: radial-gradient(circle, rgba(255,255,255,0.35) 1px, transparent 1px); 1020 background-size: 3px 3px; 1021 opacity: 0.65; 1022 mix-blend-mode: overlay; 1023 animation: textureTurbulence 0.6s linear infinite; 1024 } 1025 1026 @keyframes textureTurbulence { 1027 0% { background-position: 0px 0px; } 1028 100% { background-position: 10px 10px; } 1029 } 1030 1031 .plasma-nucleus { 1032 position: absolute; 1033 width: 18%; 1034 height: 18%; 1035 border-radius: 50%; 1036 background: radial-gradient(circle, #ffffff 0%, #d0f8ff 80%); 1037 box-shadow: 0 0 10px #ffffff, 0 0 22px rgba(0,235,255,0.9); 1038 z-index: 2; 1039 animation: plasmaNucleusLife 1.6s ease-in-out forwards; 1040 } 1041 1042 .plasma-cluster { 1043 position: absolute; 1044 width: 100%; 1045 height: 100%; 1046 overflow: visible; 1047 z-index: 3; 1048 } 1049 1050 .plasma-cluster .micro-particle { 1051 position: absolute; 1052 top: 50%; 1053 left: 50%; 1054 width: 4px; 1055 height: 4px; 1056 background: #ffffff; 1057 border-radius: 50%; 1058 box-shadow: 0 0 5px #ffffff, 0 0 10px #00ebff, 0 0 18px rgba(0,235,255,0.6); 1059 } 1060 1061 .plasma-cluster .mp1 { animation: plasmaOrbit1 1.6s cubic-bezier(0.4,0,0.2,1) forwards; } 1062 .plasma-cluster .mp2 { animation: plasmaOrbit2 1.6s cubic-bezier(0.4,0,0.2,1) forwards; } 1063 .plasma-cluster .mp3 { animation: plasmaOrbit3 1.6s cubic-bezier(0.4,0,0.2,1) forwards; } 1064 .plasma-cluster .mp4 { animation: plasmaOrbit4 1.6s cubic-bezier(0.4,0,0.2,1) forwards; } 1065 .plasma-cluster .mp5 { animation: plasmaOrbit5 1.6s cubic-bezier(0.4,0,0.2,1) forwards; } 1066 .plasma-cluster .mp6 { animation: plasmaOrbit6 1.6s cubic-bezier(0.4,0,0.2,1) forwards; } 1067 .plasma-cluster .mp7 { animation: plasmaOrbit7 1.6s cubic-bezier(0.4,0,0.2,1) forwards; } 1068 .plasma-cluster .mp8 { animation: plasmaOrbit8 1.6s cubic-bezier(0.4,0,0.2,1) forwards; } 1069 </style> 1070</body> 1071 1072</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.