PageSourceSearch

https://www.numbergame.it/

html numbergame.it collected 2026-10-02 01:58:30 UTC 39,210 bytes, 1,072 lines download raw bytes

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.