/* ===================================================================== STAGE-STARS.CSS — Petit ciel étoilé animé dans les bandes noires autour du cadre du jeu (visible seulement si l'écran n'est pas exactement au format 16:9 du jeu). Technique : chaque "étoile" est un point de 1 ou 2px dessiné avec un très grand nombre de box-shadow (un classique en CSS pur, pas besoin d'image ni de JavaScript). Le champ d'étoiles est plus grand qu'un écran, il se répète donc naturellement si besoin (peu probable en pratique) sans laisser de bord visible. 3 calques superposés : - .stage-stars-a : petites étoiles fixes, discrètes, toujours visibles. - .stage-stars-b : étoiles qui scintillent doucement (elles s'éteignent puis se rallument, chacune à son propre rythme grâce au délai). - .stage-stars-c : quelques étoiles dorées, plus rares, pour une touche de couleur qui rappelle le reste de la charte (or / magie). ===================================================================== */ .game-stage { /* Le ciel étoilé doit rester DERRIÈRE le cadre du jeu (qui est opaque) : position relative + z-index bas suffisent, puisque .game-shell n'a pas de z-index et arrive après lui dans le HTML (donc déjà au-dessus). */ position: fixed; overflow: hidden; } /* Calque commun aux 3 : plein écran, ne bloque aucun clic */ .stage-stars-a, .stage-stars-b, .stage-stars-c { /* Position fixe en (0,0) : les coordonnées de chaque étoile (dans le box-shadow ci-dessous) sont calculées depuis ce point d'origine. */ position: absolute; top: 0; left: 0; width: 2px; height: 2px; border-radius: 50%; pointer-events: none; } /* Calque 1 : petites étoiles fixes, discrètes */ .stage-stars-a { background: transparent; box-shadow: 456px 51px #fff, 1126px 501px #fff, 914px 285px #fff, 419px 1385px #fff, 2233px 178px #fff, 1728px 65px #fff, 122px 191px #fff, 895px 476px #fff, 2069px 1232px #fff, 108px 1149px #fff, 814px 1330px #fff, 2232px 859px #fff, 902px 919px #fff, 1139px 13px #fff, 653px 865px #fff, 1393px 569px #fff, 636px 440px #fff, 1378px 209px #fff, 379px 778px #fff, 396px 735px #fff, 1408px 1236px #fff, 1083px 88px #fff, 1881px 1098px #fff, 511px 775px #fff, 322px 1130px #fff, 1200px 1287px #fff, 1481px 1182px #fff, 787px 142px #fff, 187px 1354px #fff, 933px 592px #fff, 326px 476px #fff, 413px 778px #fff, 1138px 928px #fff, 1494px 333px #fff, 1516px 727px #fff, 858px 1372px #fff, 1093px 1399px #fff, 292px 1247px #fff, 700px 1093px #fff, 1002px 334px #fff, 1893px 777px #fff, 1105px 1310px #fff, 2281px 449px #fff, 1328px 114px #fff, 938px 65px #fff, 1292px 821px #fff, 1096px 135px #fff, 864px 1161px #fff, 1288px 435px #fff, 2044px 810px #fff, 1879px 292px #fff, 1084px 285px #fff, 1010px 1149px #fff, 2207px 538px #fff, 2394px 877px #fff, 2390px 817px #fff, 1482px 449px #fff, 566px 1043px #fff, 2021px 186px #fff, 192px 224px #fff, 626px 1285px #fff, 655px 1393px #fff, 1729px 1221px #fff, 260px 788px #fff, 1563px 1220px #fff, 1917px 1083px #fff, 1029px 1133px #fff, 47px 1393px #fff, 469px 1396px #fff, 2199px 546px #fff, 1393px 228px #fff, 1202px 890px #fff, 647px 929px #fff, 13px 539px #fff, 2050px 365px #fff, 2079px 217px #fff, 1222px 1308px #fff, 2079px 1247px #fff, 814px 313px #fff, 1531px 330px #fff, 2209px 1086px #fff, 2px 1226px #fff, 1327px 1000px #fff, 79px 229px #fff, 1486px 629px #fff, 980px 118px #fff, 986px 1161px #fff, 322px 175px #fff, 1990px 141px #fff, 2181px 257px #fff, 525px 1351px #fff, 1946px 1125px #fff, 676px 542px #fff, 2161px 1242px #fff, 1733px 433px #fff, 2208px 411px #fff, 1276px 817px #fff, 1529px 897px #fff, 2119px 924px #fff, 495px 507px #fff, 920px 131px #fff, 1384px 43px #fff, 2268px 471px #fff, 902px 14px #fff, 290px 1292px #fff, 241px 468px #fff, 276px 64px #fff, 1353px 145px #fff, 2105px 487px #fff, 1140px 1370px #fff, 1988px 438px #fff, 2208px 270px #fff, 2338px 1180px #fff, 1936px 497px #fff, 1937px 833px #fff, 779px 193px #fff, 397px 1349px #fff, 1765px 725px #fff, 1734px 841px #fff, 1912px 110px #fff, 403px 124px #fff, 1649px 694px #fff, 447px 509px #fff, 784px 389px #fff, 2196px 918px #fff, 574px 864px #fff, 751px 570px #fff, 1894px 511px #fff, 308px 907px #fff, 2254px 200px #fff, 207px 1335px #fff, 2214px 30px #fff, 382px 484px #fff, 681px 832px #fff, 1989px 985px #fff, 875px 821px #fff, 240px 337px #fff, 1552px 4px #fff, 1599px 543px #fff, 1863px 584px #fff; opacity: 0.55; } /* Calque 2 : étoiles qui scintillent (le délai de chaque étoile est fixé par son décalage dans la liste ; --twinkle-delay est calculé plus bas) */ .stage-stars-b { background: transparent; box-shadow: 1732px 1138px rgba(255,255,255,.9), 1993px 317px rgba(255,255,255,.9), 777px 607px rgba(255,255,255,.9), 891px 119px rgba(255,255,255,.9), 2372px 1110px rgba(255,255,255,.9), 249px 642px rgba(255,255,255,.9), 234px 102px rgba(255,255,255,.9), 2392px 976px rgba(255,255,255,.9), 2059px 1087px rgba(255,255,255,.9), 644px 116px rgba(255,255,255,.9), 2080px 164px rgba(255,255,255,.9), 761px 140px rgba(255,255,255,.9), 278px 1382px rgba(255,255,255,.9), 963px 826px rgba(255,255,255,.9), 491px 1166px rgba(255,255,255,.9), 1008px 1185px rgba(255,255,255,.9), 162px 1268px rgba(255,255,255,.9), 335px 858px rgba(255,255,255,.9), 2390px 1157px rgba(255,255,255,.9), 2141px 647px rgba(255,255,255,.9), 1068px 418px rgba(255,255,255,.9), 1286px 488px rgba(255,255,255,.9), 1087px 810px rgba(255,255,255,.9), 536px 1375px rgba(255,255,255,.9), 1228px 936px rgba(255,255,255,.9), 1295px 148px rgba(255,255,255,.9), 38px 938px rgba(255,255,255,.9), 2306px 204px rgba(255,255,255,.9), 300px 1101px rgba(255,255,255,.9), 873px 1036px rgba(255,255,255,.9), 1086px 271px rgba(255,255,255,.9), 1429px 140px rgba(255,255,255,.9), 1000px 756px rgba(255,255,255,.9), 1167px 323px rgba(255,255,255,.9), 1794px 1112px rgba(255,255,255,.9), 1239px 1252px rgba(255,255,255,.9), 2166px 16px rgba(255,255,255,.9), 2271px 613px rgba(255,255,255,.9), 424px 275px rgba(255,255,255,.9), 1083px 236px rgba(255,255,255,.9), 438px 1133px rgba(255,255,255,.9), 636px 557px rgba(255,255,255,.9), 1154px 1238px rgba(255,255,255,.9), 862px 702px rgba(255,255,255,.9), 833px 1298px rgba(255,255,255,.9), 1081px 1035px rgba(255,255,255,.9), 2001px 514px rgba(255,255,255,.9), 208px 189px rgba(255,255,255,.9), 1734px 566px rgba(255,255,255,.9), 180px 7px rgba(255,255,255,.9), 1366px 267px rgba(255,255,255,.9), 1072px 330px rgba(255,255,255,.9), 1809px 1129px rgba(255,255,255,.9), 1751px 1148px rgba(255,255,255,.9), 39px 229px rgba(255,255,255,.9), 308px 305px rgba(255,255,255,.9), 2234px 73px rgba(255,255,255,.9), 1512px 1192px rgba(255,255,255,.9), 2263px 303px rgba(255,255,255,.9), 1760px 261px rgba(255,255,255,.9), 171px 631px rgba(255,255,255,.9), 1493px 81px rgba(255,255,255,.9), 1465px 430px rgba(255,255,255,.9), 1022px 1365px rgba(255,255,255,.9), 421px 724px rgba(255,255,255,.9), 2293px 832px rgba(255,255,255,.9), 633px 484px rgba(255,255,255,.9), 665px 362px rgba(255,255,255,.9), 1688px 50px rgba(255,255,255,.9), 734px 680px rgba(255,255,255,.9); animation: stage-twinkle 4s ease-in-out infinite; } /* Calque 3 : quelques étoiles dorées, plus rares */ .stage-stars-c { background: transparent; box-shadow: 1686px 1371px #ffe18a, 1016px 546px #ffe18a, 652px 221px #ffe18a, 1566px 79px #ffe18a, 1927px 455px #ffe18a, 817px 942px #ffe18a, 1432px 625px #ffe18a, 932px 456px #ffe18a, 96px 1351px #ffe18a, 791px 816px #ffe18a, 1344px 570px #ffe18a, 284px 571px #ffe18a, 1438px 1313px #ffe18a, 2086px 818px #ffe18a, 2196px 678px #ffe18a, 113px 236px #ffe18a, 1069px 365px #ffe18a, 2378px 543px #ffe18a; opacity: 0.75; animation: stage-twinkle 6s ease-in-out infinite reverse; } @keyframes stage-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } } /* Accessibilité : pas de scintillement pour qui préfère moins d'animations */ @media (prefers-reduced-motion: reduce) { .stage-stars-b, .stage-stars-c { animation: none; opacity: 0.6; } }