/* ========================================================= ODD WILD WEST — foglio di stile Corsa orizzontale su 4 corsie. Grafica originale: solo CSS, forme geometriche ed emoji. ========================================================= */ /* ---------- Carattere display, incorporato ---------- Rye (Open Font License), sottoinsieme latino, in base64 dentro il foglio di stile. Un file .woff2 accanto alla pagina verrebbe bloccato da Chrome per CORS quando il gioco si apre con doppio clic (origine `file://`, opaca): il data URI è same-origin e funziona anche senza server né rete. ------------------------------------------------------------------------- */ @font-face { font-family: 'Rye'; font-style: normal; font-weight: 400; font-display: swap; src: url(data:font/woff2;base64,d09GMgABAAAAAFlgAAwAAAABEAQAAFkMAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYGYACBLBEICoSHEIOYcguDMAABNgIkA4ZcBCAFhgoHg2UbYNazItg4ACAknm5UBBsHiOH/MMH/Kbk5xNxBtHzggZBOLLlF2FUcTrcuHmRPWKNcF4OOip15n90fy6gfxSgqq7i8YKayrqyZHqbFjNkQzsC2kT/JyQuP/2O/u73tI2oheiIks86hEZo3Ml4CkUYTkaRVrMIboG129lRMEFFAKRWRFMQoMgUUUSzQxsyZm9Grdpsrnf5cZP/Wv+2X9b/mKdvjXndn7n69b4JRaEGC0xgDRXHb/5lAAgqAArYwrPu/mlpVzq16cpPYkVFyq2WKWTKGLQMWBIY8GQbbuvza5SrnNhACsoPUXb0Ixz3vy7r0XykkP8K4DGM/cMfaQ/d1uPX/z60+KPtW9WVEZfV1PaZYFS0mFGySXoZzZhUlWFMJRAgBygjiPYUVlLz37qgt1tPQP6/79m9kF14Qb72na1alA69sdQh6TtIh4iVsjWuDs5O//2nuNbGtfXcX6KYSLgCoAaFCKNvVDpJfBLq7yAlXO+L53092eXxWNIxusIZNEGx/ZaDZjZXDQuiW5t/btEq7Zdi2lsizABSEB0DR1QURkPS6pVb/Lxla9thqD3hanltbHlJrsO0BkQUz6yGUFpDs9qA8KC2hD4Cou+842rrIu5tEG17IECaXXnaXXTzZBdnFiI+leTgwupFSQsbj3/H/cOYj1PRSGWWUEPiInihsvoytrrjvFEGpURt1+jHmvjX/2hbkBjTW4b38bQoB0kk2rQjCzdyD/c0QO/C1gw6Qqt0mwrmRhZ8czXz2VgKmAU0AOu1m2/vZMBaxWNWeDk++ATRqETS3dZG5KexYLelwwXP5Dgta3pYVrtaGbQU6s5P+CG00e2Jv790LgvJF+aEwqEBUFGpLLf2JzF3VVllzEtYHo2AoRE7kGdX4Go/GkVj+D/x6/nocsanMlhfz1fv9LqwDgMYdoyxsuKVkndI3avC/dOJ3Hq+cmjNCKk7pcwFIseucvQaINJxE5zAiAJgzj5SE3WYp9vNwBGeYq46ACgXTpGwPJ7ixLBk27Cxaz2E5RlxhmRcaHUNQKBsrKVxh+FU4SVIwRzgZEwqIlRUneiwpgOJPEKtsiAR7lkV+vEAu/w1Qks5Cw8pj4WI1SJPVhEKhkTgSV7a/xrBuAfJIHPSZWB6JmxsTui3CsWQ9jZ49li18iuNdksPGncWwYXiKqzHOpShQHdfTcD9hdR8ylrhteSulQiehjAB73Axv1gWmkHaV1VXpN5kXdLEMNe+IttJpekr9WXoGYMwd1JFaNpKnzbz8ZEzpIe3B2Od0Le80fGvYqPN4tr7Oi/wibgdhB/iyxEfYVJdJrEtcX8/JEbKlyFnFQku10AY9X+wy/eZcPo91jIW6MYAuj1KP1+u6dPgu4C18x3i57s7k5/l00wBFE6CZzQ49naGmax5go0prSohSmuxmWfDeNhRty/G0Jo/tOtyEjvAgDDZzoXETXcJkiXCNsdmGmV+H2Gyl1QIK4bNDPPueUTrjRAVOsK1O8T+YxftO+U0mu5HH3igdEtiKsisUe0o6uCJbKQh3cKICyGfXM7I3SsdcB/JinDoqr+XsKMWekg62Cmcr+70U8ZgollEvT9gzSm+cqkAB23VjPGp7fFHx/CBgI6FReiAvXqI6p8gp0gBWL41Yz6/8VNUFPwh7I6FReuY63NAttmF2Kd8FPMxbHmGe9PBNRWeyXLmOI3CGm/zTSC1mocWeXVGMaINQHJSQNUfLkyvBQA8JOxKY6MwYqgnE0lD6qXpeHs6EDGXx8lAvm+nBPf0MmcxhuO8PPBYIzY7Fbd8yw3l2N2iuS2RqyxfZRlnAnO/yQAtwR2zdOr+xkInFjDEJH+FQd3GTnncli6jnmcbmgLjaTceVwyA2OQtKX5DPr8ABJWmEJcJUBJdP9P0yLwOr6p8NOS5YRkoDKwi/cvP53fOyf9lzHhElTByEpnK8IINMT6frwDqxZQGYLsIJ0cAmJtXnlpRBN4h5QTOUsG7uzDfKb8iQS68dWWA5SIcEVaARpWzJu77L7aOO1HTY245uNXfbPyMiacwwQhGdYxXHsUMprPhuegthP20ggZxKzaQpKjLDmOdmyEdI8XcM88rEChwEWAjf5iFbc90B9Kc5jIhEZxEaitBELipgquVMC/fWBMidCrmauiJgDEbYmBCiYu8wiqdYOgi/xvqM3WwKDci0wGvT3kJUs3NlAihFomnNPHfA9+tAEF7m4N+17jKvqieJCqkqK1JKOCc1uKmoPUGBvKpzVPBAcx/aCAWYQT54hFdNwAIqGsyaP2KGUpqlMTLJb1SSsrGWfFx56q4PsE3qFfbsC+gGfMNBNESM9EugpE/jl7Uhkzwvbdli6k808qYWKshqMpZNjYXs4zbIdPEh20u3rGcA6hVBk0GSAogiZFRPIiqCQu+WqnZVpJeDSKbw4dCHOKZbb+tIOayB8VzViMeM4YRvdAvhgms3yVNAymVBs2lVDrqIbaQImEmqbBOqKEdB8ixERac/tP5htlBXRkEG4gvI5AhvWWZEJ4pDD7ZHoHoQ4KWDEKfYvU2oVhSvJRx9tOxemVfZys61KPXX4t8GkdOsBucHVHTdHkR0VXzvY2KEf60QuuheMKGVodMo/f7O32DsUshZnvZQPvnN68QFUq/79yrM0O9cingUd8OzjtbsAN5HtCA44Eupz48FTC2ZN2xyKGnXz/v8PbM+G6i+9X7+dqqKCeuWxTztFDhkWrifVpm8bHRB7GodfA8F1ntenZRGgXSDITuPyrOc4aBLq6ibYwE/Nyb0qUzuyXaI9w6jiaLpA/UYPwiXZbDEL2aHayKKfjaqqQ1nKkugbboLctBtWU6KiOV+0N4gZnhwQhGduG4Honid367IpgU9LjfgvAOWBF3Ro9LRTCHk74C7Qt5VS+TWnYP4U2QoO4VmOLvBZ81Y+62QkScUNaE0ZUxTnuNIpZGLOfp1UI9ydynCZFRN3hw32heei46IaBzqZSmoqY1UU6pNUXNW5DEkxR57ypAbmEiqbwMo3BMbIju386hSSH20BDQSfy0XtwX0j3imtpviDlyUF6PPomL+VT3WqQd8na0dnsVh5CABg6hnKeofk9GCZSZBRAMyE9Cnpb+DnJloMXaI8mNOmvAkrFm8cpPgE+Ukt/QZMzEwDgC5MYv3o01016kq6p4nEovQLugo0GyszyAdLAcsHaqgThQT5EwymaFzYLUMe0eCelb2UvTKmG2g1pWvcuU2ocsf6CRlZtO/UZWdM6bgwGkOuqJ2tSP8RORM5vqmCMXXXmQ0ITFCNauf7cTk4I++gPnODy1jYjk9rDvwyWUNB542NuAc8Wa0Vo/SzUwP5xitKaOOETewK1IV0C9EJp9NOMH4jcHLRLm9CImy1rBOTlW6XUJFfxJgxTrWCqbtPf8rWoR1snQ0PT7ify1fCL+MAwGNflkG0XcdAaLW6vMt0leLmyFotd0hMLN2dCM97RgpIqpezcxw0NUkasMgYOZiy6XxNjYwrMHeJ7m47W8K56p25naedB0lFHifGj20PH6sL2LHbR+gvrVHbEokxnw+UmcGpeBBPS9qTShqxGgDNeU5XvYSE+ql2e9BBJaN9mL8USYHdeQgNlplyeh3WqX6RhLkDVUH0IKFZLJmH6ACLsge5VNE7lLtDJQlZ750/syG3aQFkSZG5kJLLwXEsEa5e8PlpLBxbyfeRS/UoU4q0jNnMZMQ+94UMxx5wzUWUaWCBvVyiZ09g6grlBQt3Z9hhh6r0GfVkxbv+xiouJkcnxrHZcyMAB8iTLY1ybsIL/d9bXbD94dbVbsKsxXw7kAmS/NCxT0qEhUbksfK5BJ0aeoW4U3cC759gjlcOayRonhKTU4VHI2fMag3o3m1gLX/nN9OYO9zzMsNClOV23sSJyN9vPI7ZHAQpcUeNkIXpyOa+UTtvPotMvPr1lf+juH5rYA3YB6cDGHkiR5jGoiEPTLdgI4jZ/olAoaqi8CiHcvjfpAHO1owlASzir5PcC2+f3v+ZNwIa1KYFn9FHciwrifdoF/GcKg7FsGCSo3JXrOmz8x050x7yU9CVzFTk0HLrzaCEsqYouzJ6q4rnsCn6ozvVU9nKkqwpXIV9TEcuhkly89vCL7dT2L8j6GQ4iNdfAiz37OzHzyb24T8H6HcjBQ2azJpiYnq8NZ6e+omhWh3CwdDU3XXnqD6CCP1mOMbipmTscJk5usrQeZST4rPzUxSg/uW2wHnDyiQNFlCqnO+/1duhEMYL0HWypoVcl6rCa9l7MwSxjOS5oLFpUoKUSVkJ+jQljNK0OHhcM2cdFIeKtI3uoTbDUPtf4rq4WugWOeDwavzNG3lB3a+NCa4eUV04NECjtE3ztiSm4L7Zelm5CxG9oNSOYxyKOAW7/p+BWB4WRnhC4IGV17q5RK/uA+2VeYbulAOMGYYyKVzjm4luzAgxslZXoiKWSDB9FVV6gkJz0/H1M1IR3cI6iCps0iHDrRNkDEpeJdn+GS1yJW9VPB2jNDNcn1S3tuRZYOSWZxMoYOuR00miwc9jmIt3MZ/Kpd7Bs0Y92CQ0eoam0TL+VDedQnsw6qmEaN6k98yczlnU3TmC/TROYWjpvQvLUR1ea7EvxZx1XR4x8Xugz7JV4ekb/Vjtwcqp5e98XegTj6hE89NULJICt+uCyvlT0TL2fGx6lbSQQ9Q7ewtObDriLzAsYpocYzXKIvLynkuJXr5BImb3bUfTvXvJJLzlkrTkzV9NYjxYmYCBaWuQSwhlvJbbvORpjJjBMM3Lad7loPsDiEQFKjSMzkkkFVDWh0Z3NfDIsRf5m1otfPX6TQ6rKWfKgBZorvn7fe0QOAqzqolot3MMEnjNY8ChkfYCXKvgOFr753V8DUrWt2nAOmYelyRgNSAzAaKWr3xMugFrKC5lr6oY2vYeLhMEE9WS0e1fLyarUf8mzKyb8KxL4DMfznVL4U8aH/rHQovWV4ukRSyCLu6/MK7wvUTooI+Fp1ZNRhs9p6wSVvgatbTJaMl6rnpHJO7xkH7CgIJCWvNiIaeCMrMo+KaasEGDy8JJHsryAalvPiaXPw/DTEmfJp8W1s79ysNv9458GzrIHNcrBVA1dI7jwJfJWkOownssKxp6OInsWLCfDZhMQwdO8+VGMhMR7cCNdh4oouJ82xZvub8hWolKEXM439u8OaP1EqiNRzM2QdEfedRS+w8xkxXEyPI6uWT7q9WqJr8odMcXaJeKYPda6qatpBpfTRMFohdVyx0QYGDxbIVGw5prQpIiybbUwUGFWQbFrJVzLPX5Wf9nvg09O/EaMSlMZz7GzMcUau6OKjtdtLQeK6yOWGaz6ny8OzSj2AwNN0vk/xSX+99g5ge+K5XYaKGJnq7Bh3UKb9QtAMhNaLacLrVJ4oxb0Gueu4UfhPihx+aQrTgM63n5dRugyMmaFRlYI/rEQ8zfazBLdftRc5GxJnA2gMbxo/jvzqRuYRO2JNtG78UwPOzelkqTNvhd9uRTNo0gCpZha8VnCmHBJ1Ym4pSUUtMVMzKZy3o2bYeSV7FaWQmtDOyj7zJok0Bv1r2lqKJ3u17HvPiLBeMzEEekLYzHHotXis7TV5Ftb5o2Zt+SMON30wjevono0cMISx9hzYNoC9FiPNeFTaW1yjJhrACvvzU27HFR1Lv9pluVuMteSeiejP5gzEJEmG2WzKuXxvNd6Pti5ere1OpV6465T0NJ8uD89KF7zj2omIR5zgAVMslFglTBna57mmKXUeLvXZXr1fLBq70rgoCLm4AUDhljLNGHKPlqouKxHvxAgnqHtXVCDa499Fq1sQfS7rvHQ7jZjw4HvDQIthabyHoIKufdexYD7YIA2F4QKO/cwFjcwPtfh2FjJRXLnJfQKowOpVfv9ukHqiq6pPaqs7JsxP115qLOE1V8OX9E8zJDBJLUrFQeR01yx4ElhORiK2rQXffyMPZiX39AhPSlLFIpiWI08TlA20L8kANNMmKs8Csqli06xSnG6gRuRBccUFTK6kRXwsgqhA51zctL1x3vY5nKNUgDIrpblnupCOvpLMAe2anVLORPPT3z6cbVaSQOzxdnnycqyUBIxSg241RLiIKdIlLMm8Wj2hKxxUZoD8UeJYfZHWXBHsIMKgVY0HLYJRcobx0x6rSJPkXilYKDf+zW+6q7SSyxBW7TkU6jOLPEJFjerpQQphCr9nSSWAZVW+T7ueBa9iLUa7V6nSlFKGgHV4Z3nFE9w9j6BRO5xlxHQuQ5al6NRWxLdfoQJ+6TUiZSwhpI/kiUahNFbUSypWwJIlHl8h4aGXNYcIM05XFiVG6qyKFp93tsvh6UwxHdGvDACVBb/cj/JT0tHstqNH/YfWFVw/UZbif3iUGO4fxVbFM7gxvemy2X0r4zuSTdWmXwi2T41fC94hz7e5L2aYb/cTnMzPM6nna6aq7dhtlrZuujaXmDnDCayOII4622YYtHbW7VhXM5ba8A0kFSokSuzju0iWfkmhGkDuchuRFV87BFkkR2qoD6MMonq2ruxQdRhMoD/peivW2n6RSjNBMMNskUNeaJzlsZysTGq3Y+AohQRp5otrdG2pmegFitRhBbB4V6NaHDIuns8m/M6t6h39OZf73gp5UbZwzd1GNScjCT+xisyeRyT3IARPqLDtWA8Gek6AXr2TRb2KbyX4QL8OLBDlzkvzD9BHWm7WZylEnj/hvKT2XIioL0ZEZ6xRGJ3Sbx4QNSp+GIf/2RSfuHC9e+Blce27WRMpPfwq47w+xTG5ucTPYqiKBPkA3hxTYQwdjags5PvVuzefp6Iy1kBlKLb3fIy3HJ6nLdMJJDJZn95sZdI91/pgVt3A2uNEvSYStDQpYPS7bx7T9HpNLYkOCnV7v6Uc8+oeonkX14nabqVc+0XsQEUXot8N5uKWU0qmakIWf1smo224LtIOLbNF5eA9qMmNnC29H/n7WHrZ5rpbWyw/VFT/Yjgw77UJ8rRlnyP/O7/ndtBXq5Ilwy/ignI3H4ntPkkttRzefYBXMmvlKJNxRHR7BTWbIVk4g9vY8j5nCLizCaAJaUGbCtXva9EQwR3SM/Cxb7V6IUUXVqE/fE7+uCZDeTqwRRPJLV/DRsyi+L/GlSHCRoMcdQ0Mi+q3rT/W/TTpmP+AbszWUFLl/euieOTt5/OD+FuzPO8JdcT6aKUbkQTRc9p06fmFdQeww3CAUa2Z3V10VPrIXQYa57TdUExsC/OAqm0ud0NHVCIgq3PFem2+jQGkUPXCKyhY2XhhFin+/WX6GWICz7rpE7h/FkjiWaDrxM0YMbdHdLI8eDvnmaiQlxYckoScxweNgtc8Tz7pb6VlEdCExHGZ8i4kh7GJZg0HjVBQzUf6xj2ZPlucYsrc8K41qmyESWfY4TV5p+MqSm1oi80KNl1R17/8mGDQIAPqtbQupkEw5U+8eEapla/CZvbTHkc6KSUkBxlQkIFRBlhQiu439tYH4P/53SirCA+BnIR6RDY5WlfFgsdHtMdTrS6fBt7K8hoqWkt98C26wPLcx5SR4c76HskB0lVk8IR0N/JMs2WMm6p7pifk4UeLOvsF0IvxLBbac2usdPx0jakyxT8h4JqvWqj0ItqAL77JAsU1RxhppPHpxXzlllJ0Q9yz0+uCQ6MnTQDpTZ3wbJlnw5UQNXh8QK3Hainqt2eZIVg1BpdgTh3Yuol2pD1BBMXyi2MttoDL/EcitA8fTpQnlqyZQqCChf5DV6RjuQx3SrjL5Q6uniSitc8GbIlT3y99dFWSoRvGFZVvK2+D8KMd4vxajW1D1qDkTwUuFvZxclcR8y9RzZ2Z1ktVg9ZEeNzOjwHqDnsBF/QiyAEp0mbIV+n1WrQV0nSFNO+k5eaDf9l5kKJKZZ+hB7pEsomIk8DuKWoYX0mi+s6E3M6Yn2CWx2FrZLH/HUgdoq4TMcTkWTZSrsWPOkFliV3UkPqlsiVLJ23BYe7Ygt/KaHvcygo5zwEkq8Ud85XkIhBkPjpTblnSZnqgmcEGqVekaCUQxySJDGUinSaEqiGJadKG43k9x9kUDjg7qIu94nGooglTGd4E3YxAq796s7APiBqW40L8+x4i2dHuzB2K1p13DBc/m7XyrgoiWl4A0nMeEL9YsAwrSfE5H5Sw3cyBo06NY6EP1ulie8E7Qauiz2hSQlMpr2T0eiUO37iwb16kHIh5ygC315YOhD1/k/qAZkIiarR5VzXLwDVWxEBBsNLMMbJHmsyoyS9TEgiCrxbp2P14oQZUUP0dlv91hDompQZAByIj0lo5qlf1ldgUBtK0LP7D+oSBjACa6d4BEqgDYkAnuqFtpbqTu2ugT2i/dWHk481w9LQ2lA5pyWNjXK/b18LPAjJ9Wh6Lr/o6KofD+kajlK0r6+b3YMKmQDKuL54P1kMdc7AlhIyQcc03r7Prn7KY6/3jXHA0ZfakkFqIq9DwRpHlD1p27UZYHi7qeZXzhUkUzEpen54y47XORr/Cv3PVIkc4qFkmfXQpjo8+smXDfyzzGqv7Fm8LjaGUCzFvoXeEQkv4C/Sm2/uIhMKaQXNMVdJL3ykwoGtPPC0nM1Eg9hWf6ktsqIMU9Pj+RYsv3gmb5HgxUeER5Dp1HpCR3IlpjQoU4ntO9LGxJbHrdwFQBI7ej85KllYelC8gUilQDKku9cH9n+y9GNJqzolSDbntfv7j2CMZ0tUKCWEMqr6dEe7FpcU3VU7tCw/M6MbicsutLGHCOfrkQgj1cxmoww96WN71OEBoFnPHBkI//EaN6FmTrg9Uy0cTQ3xKTXpKTBzvwl2rX7OiBSvkvVKoRmVrj63P0d9ua2t1GinmyXnD0Sa7G36MHpIi2BJ1hUJc1lAeQYc7ueHS/sPV0GW1DynRdKnHZmRDaHpgV4Yl8U9El4T6NA3NLIHN+3P09eQcL3eGLduU2k0EWtMM6D9WB9DoMAZ8GIjEWG7JB/Lc8ION46LowqymR21Ri7yspDNA+tW3CpxsxVe+C0JGJTx7NN96YS7HqEGO4pABMlfnjlwMeGS8UtqMszGkyf15BYxrU6bH2gKqznpZuTt9AUYqoJsTgaljqXIFGo6Q1TKXroq+JFLhdhtWOmYJhT/sUGF+edJpEHXXotxsAmc/EG67xowr1JDocw4VU1GhfooyqiKTFYkPtNAmytCgN163G2q8ay5Sg56HDAa9rUUCqcIiM7NX1Tsa/wQbRCjKjKQdVW8t19acD0z7nWghmhSSaEU6SW0OYMbPYc2BEGQV/vFoHCFm6sgMj0e7ecAUqcOSYToRSlJLvSyEhdFvAX6O15Kjzmx14oso5wqXrEpDCQC8MIbbRrwnutvBErAb7e84L6+qy/kJJsRgT3itF5FQMQv+n+kSGf4qAQroz8ZtHvajiknSNCC8vE37pkul16vpU3N4GGl7TOB0gRfpEAR/puhIkR6Tf78F1htoMgz1GCPMfVUS1RvMk99VpXgb2MG3J2fcEh4i79PzWGpAOPbbdh2GSVlL0FjX4F9jRE66jR6MFAw7NrFbAwTvKQijcdcNTOw1itgmTeodwDfnkkzT+Pidv1EWis3C9OhTRtetbZqQVdV8OfLpVGRB7sStuMWHVeFBv4cMAP0aM77l0qsGYPRHXzAcu0i5AADVi6EL9pGnE03/xBbOuMaosFbUqIv9RlngW9Xp6n7ZrpQOhG2S55CAiIutaSsoALzvNmmadmJXyX51cj43QyJ0o7CNmPAyEVb749TYdZ2gaWLRkKaOY3SruD6YR/XKLx6pGtbEYmZ4cjuT7N9yXBXhOv96sKV3gGyA3eqm3kphh/qhjkHMbGD+2/wNDw/OdIhXtNaojxuRLzMsCdsjEQ2Hs0n7oNdbbK/LCL9mUFmzFCAjKUaMiwvCiQhAsd+rpVdE1n9VjPv83vKBR0SAZgArKL7ec9+Jb+gbGfiFBSBwMYlI/GqnrnxUF+f3UjtoqpoKbLPNL0nvJbb1bQjdB9VhcGq2EKTDGsY9gbALCYcm364hVQoWMy+AvhvaZuLwJF5Ay5CoIHwFdyHJaQ30YgWdL/6mhNy6x/kfpcbgdbLr4cXNi8cpNKhgSws+RaumXY8uu2/gfPIRIIXkduyHIGYFp4EBH2XEj/ty46miedlikQ9bTfIVmxnU0PyryV1UKBoahEyo9f5jtV6UyhGgrqPTcKmoXgXTCvhjHCngIjkI7J4U4kLP4CUTzUWuG0DN3ORKy891GmIc+a5UxONJOuU7qhw3D0CD1ixKmMmlAnND0SgNi6FuTUZERaOrW5Uv+i5e9Fy56LlEYN4n8aL3VxhODOT0de7fmCXS/vQSUwlGzHMUwlE+zEoapk5qVMkRV1ax0KtIPTfIqVWjTxHVB6qxEQe0MxzQR58hvkZb2ElK/J0bRl5FVvAyc+8P0YlKEDe0UZXoR19D3og6k4REAAe77Im7LAWcaFA5v51IMt4CmaZQfqWfwZhgJBq3Kl6pNNGY4Pk/xoTooDsOYnK+gac83vLiZsw6Be/dd3EfMxHradoO21uglqKhz02pVjDvDI2h+ErrlbYuZ9aVeYmhANUjVVCxZDpGliOjfqKsnES9cCveZlOiW4stJgUFZa9Acq9BbYSxS4udevYqETPbuzv8jtZwYa3C0uTDEkP6i/BQ3Dr+rU7U04Zg0VYsRRsel5oOatHx4j3jGLN+toXfhtxNVnXzEp5uFqs4acitQ1UFNJl3kYG6ph9b3oN6M7Hype8c21Wy/BcLP8LJWtVf4eWRmpXjd14WWLGFB1dYlAe8aJ6zyZfH7zRXAEVQyXR25kbgOIMaRvZqrhKUcvoao5bSh64ZKzheyVqjkoLn6VH83LPk/UPedpic0K30v2oCuZ2+4xnfehVvYkIm1EI3D9Cj4n4/guIyp3pOfCRVQ1lrhQIevBFqRKwwt0YpAIauRVg4qatwaQ7HDqNcg40OCjfsiWubhWrruCH+zRjbh+lYmxwnHUYdoRG/cwKPs2TLcq3caKwY9cw2B4vOLFX+RHcMNXzDq/gZ4Kl08WrP62hJ6iMlwzyzh5aRO92M3yvGF0x+5HjesgDmy/Sh9R0XDWvodw3p+hmreZsJDowCLaLFBNaKY6asLspLI8a3LoLWpmfkaKtGJZMdj4aD4X9glhHfZ9y8XoiFO/wU0JWWjrM2NmrLdhY8Yk4OdH09OygKmPo94FkTbeC8+jv8Xud2hR58EgcODcGQLC//JZUYmUdzpOo43HHEfpq6Ie4cKIHuZMQIFK24VcFBzn48F+SOkYLkHsSExKjp2h8+/jLGz73WqdVzovLN4DF7WOqviN5bbt7dkryAoVRMxATmKK0vWuBYG+qChn8YMPdG27FndPrU40Y5njlX88jOzG1NDmaU0Y5A45/nyDVkkhTaKTk+L6jv88jihSKmHug+vqQvZ/v96r61EwxHAE0z2ar3nUeGp99afhkkRGhmMhVrKTM6naUh47ghaBkNoYNKQfu8lBy1/c1VXDceefep55Kb/0BF06g+ePYB0ZKSJw2KzujM8XvlmN3oujtN5vIVfhCTuXszhV5tO/Sb4ZhJWujvGT3BlF/bwervNnd2PARmBaqWQ/KEwws3eFtGw0koO5UQsULuFrSFXbkxOGs5i0YThZhGCwS+VJ8Ywwr5bE50orMlV/t1bm4h1zaq0XlzuTU40i3XnYRA96cwDyB8OBVJNfpFZPpcOrNZVIePjFteHPD1/wTd4v0Mq3siS8VtUId9YtNJFhpg/oZHbbaO9Tqa4eLH2rI4rYqbN7UsrNlVuwDNf/b3ftO6R6EOqA+RKOqdvx2rnk45IWTHEV0zanM9Po/GscgJEbIkoUB6TIDzdnzFZbmhRlgJpd+ZVasrUPjXHL89wUCnB8FKfnHxZlXbpknJtjtQ3F16aEsxBRRh9y/i5YcWaV5+v41gsuaAqnrC6szluJ3UVx1C5nKB8tjvDO4zOEaUXfnTIthUY7JxtKtMcptFd7v7MFn4NTuvggqqSi/znifV6sU8sDIO/c9S8YZZETPC7nOL/MyogQzsQYNmQSbq9PfJzATFDsysgjxJQ+KI3db44fFXNPt7UzVgpeWnSB0kIqoyS+DRWLmUMhAbU+0gJkhBMXVIyy7+HP0Xx4brSSZflp9Md3wleHmiKbbWhP36LS+JA5jUrt6lhhUnClawV+xt0hBp5CKtqxaBaxI8tTkqNzeZrJWW7/JSSlpC9mXUMQf9Zp5vQTqnkpZIP/5sfIfLlUncbT2s3dyRuTD9/rAEk3LTw7oEX0x4q9VZhd33oYK/RdtKntHIxw3McJfPdZXBMzgaJPt/G7+6afpHpyeaA+Eie1/8e97vigaCn330yOexgy5MPwh5X8XY/7wsY8Xrv1uhtgTJ+f0lN6YEt8zUK6+9tktrYpjkaTxyii+7hWMZRhq4Om9gUowPELH+IQGNBbPdW0NazxRhx1x1E+CieWSuxFixcAKz7aMYAb3f3u9AxBVrGD82t6SqPfsxx6PPKUuHttAOxHaOjWBG0F59nDIAEqJTzZ3uKxyzZ5X5sDwG2wEHeJeiKv54bzpLE8GMIldowFnFXbAqkC70LOA9KHEk0LTH1XtcASWO/b+hx3ETIerWMKiAoc/6GJujA+qgujbpchxlG6Ix9ct9GpS+O60db6RcVnd2g+IIvdkkF5GNRdZYLnZLMeCgHLSgBwc78jBG4B7YXt7u2JQYn4v1+G29L5EtW/gwORgWAavT4RAIKYXwnUS9Y/3/n2us5i9ND3wUo0soKcnL1liVFoVwoFyJVv+Ygbh12KnAyb/vnXzeoglHLfhk+lud79GUkLt9rJri6NhgbFp6LA3KcKW0USlKzbGMQZFKFSUZLX5ADromwXL9wKA24qbc03SH+CydwVMhmjkZhqnDhkcNhrv7+0Vy/WOEmmtCe6yfCMo+SX6ClyRjVZFBm9J3q3whP2xK7kl6g2opN4Xa0+fcoZ1QzjQcpQKLzcKZrYME+6wHqwG9d8ZnaWhUtITp7Ge5kNp8vkdhSsmihCcimT5zSpP/5KE9BmK/hihfcD6LOQr0fQU7VsnkL/EVPpoNMounxigW7DYtT/tOLPRU93hENnlweRomcMUas++Bdb603LL5BAW5fT60YAod5bB8QJ0xPwDk1COnSzZmNL1IbEbEjMP1thfPapfnkS0mBYUmfBB7X+LPW5tlcKwBJDwFu2Pqwpx+D0v/mVZZj9XzGUjaCE8pqOTkQeTgzEU5RioaLCoNZzVeXOqYFbpCHrvXr+eFB1w/H8hyS+yi9vzKOzD7zIzReQymTr3tfLFOedWLedc+vB65l2EMLAh/PlaMawDxJiIwAlePnzGObAvpme2v+V5BkBMbW6gE5eYnxTHMpKcgdGYq6On8jeIuWDX2xaRFpev7o/LIbgBTh7/vuy4takNirIuuKI2vr1MyTCPjctA22KQwHIeCiS0ZLodAYoW8wnYtqD6Kx5bHq1CI9vUI68UOq8zuONB5t5Pm9LOL8wnCRvA3h0wOtA9Phatc7QYh0Torf1X+tsn2hxq2KuV1NsRijdNPtZ9mzS6cvborhQnC+Zc6itlsnJxCALzZQivGszfpSWK/OS+TjNkP3A1WrTqriNw2FLQ3W9l3M4Xm3mCBsn2M+lTaFtjbmgh/S8c6gL2u9slVRL5+xU2Gp373j/3trQyYmn2fPPpcBFxYGsrqUp9m1pwLZsMKEewFYDdlNHPqyzdiSAiwrIYW7I0Ntt6cJAxcZySTrXt/lBjud2qnjKTeudP2jAGkgaBq+pDL3VLKXhZcOqHWj8cWiNBLh7W0Ulxa4T3QqKUhhEIbOzYnn8kWdkxmM51swXHxPAmknWCUJkQQzDqjXfuus/Ta6mBNR7THlIOYVHS+gIWwqLusle5YCVZXb0QgsJHcFazOoPyUSssjnlgx7/oALwmFNXtOeb9a3qa46wK5DxejcWU5/NTAy5L2yt9WR5ckl0jnUlh9RS48yqmcmoeukc5B93a3uKVmnksE18flAosMiEVgH1SexV21awPD+rwjxeSEalBWudfa3gjWvovSLwWneT8g0m4Icvxpni1PkJDkOH8UNQguoZt7o/MoujGoSn4mos3xOIkGuN4D11e6cU6DDOlwz8SkUI9OcTDqTi5RugQNfS9OHifOTPkhCwDykpUtXu6JKFFYRheTCyx9H0etMeWxUY3zPH4gfRcuPrMJIBItyOJ0kWZXpueZe3iV+IHtn9rCA3J3y/NdcA+RTwAm6JSEq7QH/15nYWAWLwX3a3RPCNoyWS4sCpDKo5OeSk9uOgvyUEQKudftaD4/sDXNcv6XiWhl/jc8ztYqTs31Jzl6dUuFVn/uis8rPgc/zXndYtmdwzq1pwaZQONMsMLieLOh4z15bnR2gB/GdAxq2J7z4K3COP/9xKVATY6oWDCBUoSSNRHhzxw3yxCfbOFlIn2vmcgWCyqNZzDt/kfiMkeKgdwcTqDICfaJiriRkWCO7p5JL54/6QVxnJ+b6rnVI+yW7/rqCQx9UDP41/dYgwTTeTKHsLY7gaG8XESsjNoyjbhMR6ldoc9bpbj+/YJ4T9DaHTjFH7ZDo9SLU/Iikv8NDed48SJuV2s+hvu7prZWOItfkTDIhHx+8cY8EbB8j5hPxPqVUNhm2NosuGv/xNTkq/QVZxMZEj4QUbxq9aUc1mVwNOI0tAkaAnDStQOKR//nQyx35ihz6ppQTlWnNIQa2Sip3luZW2uLyvu3fs348vlJY65idgvr1jEyJ2TI3hzCsEyAzHaIffur116Wk/9Mpmq7LdvMWCIL//zP67ZkvLEhNZhqFmcpwOCyoAK15R4YOV+hddVsMyHdLzV3fP6KCi+EqGrsEbly2rNnP8uFFuYtKB+HPwu6G/f9i1bxHkBMSzT0JQzGJ0H209F8hD/S7ujnG3mM+qJ2/Zr6HjrAWV562OluZWv7pQ+wpy+S8gcTQ7YVtZnGeeGRJSnVy+c6o69xb5J8V8pPTuaOJG1PV4Ee6LDDt83zriWWYJd4egDYBxCRKF5lik/qOu47HNVoIsG/8By37t/Eto8/tnB1Ylw9e2G8yPVusYuz376sD5SCEoc1HlCOXzuQftaa7gSMEnJIVYV3P0Uv9RWF1zeuhqKBFdUl71BN71/OWisZC6SPUgny2vwDauHqhu/SHbxxnk+98eBPBt7Q2K5+8ROC9LrmCFnMSqRlwPXm5kCGuUcweGSeqrHHRM8EUrmcgBai2l6TPZq04pFtP718L5g34puhgCuRHKCLZUvpdnzBMCnJN73P0mb/zvw4RLQRyIMOfCza0LPKWpRM27zahOD7lB/5cMcweJ15786vxMq394aF6ZagfYv0qRHSN9DeSfXeg6tDq+PtZcyOMuz1c221cuTY9nz3xAgg7oDKoHePgwXN5Xdjftn9p7B4v/tiZ1ZwPEO7QfkSC4ZUXcBjM4USFZk4KuiHCcPwEUOp6tKy8Oes17lSWgFFMvjtDEAWu0AR2eolFWFW4pzB4eQtlLz3icF6/29En2noSieO6q81ZxFCwTaVeXJD/LPZbZfqJiuDo1Qt90NKRmwcXIkSbNmcUPi9qXHHILVl/uJ3Is5CnpvqANgfrqgyH1IM3kWj642S3ToEsWMh/kxwlC0iZgKoPHvSrOva/LzfE6GEyWX6l/gUpi11NAbioi+TCmowfOUx2t2iEzRyuuWM3PrZpHMN079cG/+t9yr2PslAx11IuCJ6vP3W0JbNcj17kJm1d+PTysbG3TKPJjr1xzN8R//f7WM9ZQZeb0mzk325ww3Im6UttBGfKLBQLo/a/AwtirKvz/OubCktWq0FvA+w/Vq6CVWHOLPXqZzamUHm5Q4i3hqCvWfOh15NR0v3bdkzgqlKxp4umvqysjAtiq7rQ8cytN45Brpa4WTCFjCy+KqEY8/Gf94skl+bTrRbABXvwvs4+c8J/3j2HT0UU9ILru94LRl6Efrqo34YS9x7clZMf2JsrAuu9P7kh8E65M4m7CvHjFTn7I8kP9iEJHjspxcwESdkCWb0YxmsPiP3nY2fyqIIojPXjXl9DplfG36/eZlOMAYcrGZ8js9fv41YoOhYRa+YyD2yqR6jASxkBu4s48Mif8jKWgoG4HgYlEyiPionwLBxjOWIp8h81NlYA2yluznqWidl9gy9JXk/I4PzWlFd1N21ObnHQ4kweWPdaqMR4r7HxItvj0nQQ9v0ZaVbhfRC7vn8rz3DhA9PDaq1hrL9IZG99V9V8cA9Q5N8eG+nZJmeEp12JrbZTCjJgi8NIDxN1CTsmMWGurXm0VX/7mvtG+cHl6JNdhkYNsssdbz9RSRceHUvhR2pnbeyIdCCwZ6laXIzgWUFXmlU2YpaHNKjGLWo9e2sGakmvz2sIshylPMPwVJvimIXEn8Xnl0uW/4jCwzZliNBcEYkFU01CgpPp43Qa8l83aHAa5tGCT1Gb3fbZy8xlnE0eTYnULX4VgQVCnPyaL1ISVarwQiEP2qHHl8xHnSxrfjWpolxscXsXpYuYxu9ToeU+Evdb7j4SOVq1D29CJDOj3lGaLrrpHezRla1XyAgp+fvYnRHV0gxq3C42Ud5F6USrJ1vF7ZbbuSRGhkdiPy17XwjSFLc5OfBi22j3Xh5MzezsoYMTP+r7CirZmFHPhe/Wk8+muksZcisXxLDvTI6dLkjFNvK5wf5Z/XFtkU+WRfzVXry6QEC+xPSbetUO7bnw3AFkBxmGOp/5G+MYCCUs9y/nsv1Iq99+E2wc3LqEceAtdqVkG/PS17FzWPesrs8v67Moktl6deT2wuDgRF9fQd/LYNYKATw84FXZ5cz7T0Brf8l7H9szX3Gr4b3NlY9Yx2EGznXQ8ZcY+alFjw0+DpEfVPUEfKj1oD+PnHhk8EKqYXWxdGnqjUkkgdB1J3U7O8/0hX/RL2WxOIs2aoMv7b/eU+DIqywhWdwy/PPyqW5STOiSUuA3At81433+QlynMK8KMSJM4HUKsK05gUBdRvD46VPOAvRPzDHffv2PkXp/goOPOsNZXTPR/+oaDpUmucAN+FXsBpmvYIvL7J3yLoblttxTxIeZThAy/fits3zmoc3IKyR2aAJKP+XuHf+tQKi5nYU38pBJCeNrAqSfkbj96SybUmebWcAvtpMmvPbh3qK9NsDTfgbXDE1lXT4c+2rjz7DAY0YaEXdBjOWhGdYhY/kcio6v1JwfnEIoSJvs5MwO0I2HgC+JcaqQ9z1Ejx9YtpydInOFgqimf4/avQ8TJA2sxN3Aa5tlTv81Ii9o1VKh//jjAmScdgng9CLng/dNasLx4cxcLPe0ir/W/bTZuHhqpZ//zd3K38v4QaFbO+3jsnlaMNfCqA0e6yI1pSngZ3dbgmsLGYW0knclrNhThsWhLU7R78rc58E15yvDUOzluGPmoE0iw0GxTe4964JtBdJuwOicr99Mbr+Wd/cIBojaymbeQskK/rY9UkRfWEidIi2paufJaSuytym04OaNGg+tF7wdcLhB2gwc5fJg10XFVA2IcEyU52V6VC6WLiKbqLmwvgDOch4Ue4JqNOES3qzwXzlxBoCvz2ZlLIr4L4CYSvffeUgh4WlRl5uLQn8n+KRsQzwM35Ad2j5M/FqQjvVPA0/r9jf28K/xJ+jKvDXbYk5+//pPny4vh4YJEbyzXMd8gGMjNGu13YBp9nwpJYB30zikrlTUOpBYHSAP8U6nHj9KNfvGa9iJ1eah1OB9nPq+Nc05OuOWhiTCTcX1ppN5g5Jn7bwd0VXPfAUyjGoy6mmzS9j4ofmLGa0Ziw9pz2TjmnIxL0/H+/GXOLYXeM+pdWKxi1bPeJpjV1NIZr4lnsenBxvZHevZTp424XF9SlUSkB6oVIoufTyuazalGAczOExhVM7u6WpYMO/qbMvJOnPgqnBv3uUjFztuORlcubhZhfrFfnl1V7icF7NwzqfNoAAgndu9Y2z7Kws73QYHJeYequEZtzb6Z5a6UFtUGalyL2JJQNAzQ7y6XXJOMVGa9LkbMn/t4sQGm2qTpSVXl8n0KmStJ8Y11wmPcPt0rtJv2Wp0G7s1NpPSvZhcGR/cs9pXXC1OzUsAs/Fz4jC7fu2mzm1WGYsJry7FvQ2eeUsCJOPSYJNuX0hOmObDc0l5ua3q/ytILrfjhcy+ou1e2e/J8K4zyDWCwtJEnp5vjo9vU9q/tfH8XNBSsp+IvZ8QkEQANpGi0EOdYtnuJnHdZReB1PndQzhhhHzhvMUucVyIGLl/CmPe8Sl0qKUDVs27Efd/uAqZSIGBv00e5hFRQ5WWYkzMA0q3n0LfKDuNvLoPjQ+CtG8AcxvY4/pDK1iqdMHXjH+360Ukb1OOl3XoIVY6PXjXQWY/3Ud6Yo4g2IDWas4GpF45fgSo4pYyMxBq1M9TGMPEp/D+w52wai/NA/AoK7z3qHQSODdqx0e5MB3VBx4P584ppssbvYOuf+TZPc1OleNYa/ruNuptMLKfKbBh7tv47o+5f2rFXMMc+S31/mJ8KID3aE412nhZ80QLYAtcb/JJkQZBrhW/7WE0PVJ7DF95KdML5PttzisqTqokZGtRyacOD9gxuzLsTZ8lz4AeYGa6Y5mkHkxaOuWavD+m/lH/uB4POqHLF2LIlPld0rFD61OGmtfbdl5GG3+9nejDnueCz/MLMzfpYcm3EQI6bYBTtWZxODqiAcHQAXQWKPp0mSz6Bv3a42Svr8IK9dDRcMM7Rw1DYt288CgGIRYeN7dw3oEcrHEmnCb04vgJMeHXyMed+930cAq85jeCazvXkThO9TtXTpCg74yGhNCiq7Zf4cDaC6VBgKvro/SLb86QvMdnk7/Cg0iJt1buD3HwzkJXItIDXn48rES1KVzje2IY0+RKcRZt5GNk6yifpSu3f1ImbfUAelgz+OYNwXt8KDzm992QtJEIqNgjQgBTeVqMePWdXQZG6/KsOdEqj/IYPfW5iU0OCaU5t2NiYSA3cGHAvK88N2aJcU+A2N12TvjB0GOqP9J/ASo/gh/AeEAo2AHDTqio55b5Ge2Pz47F56iqiegdBYRNpvD9EmEk72X7t8q7XvKUYyndF24CHLvit2dG2qWpfz4SZbOEzoE2K8lpg5hBDLszwakdQqbHRT9jht8EwmdvGukbAfyyi+GxKd5FghZNTjVvWUNYfjiQFp/glnfbRxav/PZiUHjv/KchjtOeAOyy41wVQGOlG2p23C/u+N+DvxjBFqL8DKh0GSGBeNI23UHEcytYYFKlrFPE0BVKKzc5DxJo41vdWWXl8jjoxQ3kpLOsWNGZdilZehUmyFTTXMZeQ9eQiAgJE6O6Etle7raVC5K/pT9aYH2cUATIrG2aVA6lCQQPJbJZHB4D5ws+m1ws7vM3LnB2u01LqW5/ElJwwqOzLRjpJmKwkT916GoAxC9KLsvON9gUUqBE7KQUx/fHABRmuRGjuhLMV34YmhvNi88t2iKTzUbmNc7BIk0p0FeO9SWhAkzQcBrifVp5buPx7AImyn7ttrYOJ/aiJSg7q11WVoV1F6DpdHV+BGf8/Y59iZi92NnEehB3m1eU/qZqAUT2NsPpDkDkZXJyNF7lI8VJ76koD1JRZ7YJWPFts33/zvh8jYfOp7g1+hwYLO4uPLG5Mrc4s1WMvcQEf8KwPXiBccvOKlV2s3hucglsG5KlFok33n66qZVozFB4ry3gQJSQ267QVvyyBgdeljP3aisIdns4ZPyBWK8X4zZQUgCWOyQnwiJQV/sEYq5UdOTXgx7CodeFmKowxwe8FSPF6SctyvA1+Jsq2WT6P0O1TB7/4H7I6sLrmDJr3D3aEZ42JnuAY6UmWCmDnDzcbKwBiZOVxipFVNYGvrnq1Y6dtSEIbkHYKh6wqyTQGWqyknGLdQ78TJDwcO7G7slAjFo9TQdI2bFayp9zY2/sEXDiik2IO+8LJwZ663LDYVsXNYzW7DzQ0znYfdrBxQ5xGeob8/0jhJ6cUcnnslnZhayQ0zz3bYkwzoprhj2pd1ufbRf673l6yQHrW60kQpIlysDf+UFVOwx9RYWJgnEYROx+iYN810YFrW6QN4cIYp/XLG5Zc/2hbmCzi/5V98Mo0KeCiFwVN8jajvB89w568oNNpP2Z88Q7Z9NgG4NDWqTLgi+AqLy3fH8JDnOASEaKxETVFQLIObh+uLUKuQzBhc40HdzIjrXuARRxuckVOP/RGzD+AHAzUMjOGtliLFXQN9la95+HMoSBFYL8mnrdkTgOyKUoQaqWFbcmcT79b6NkQ526Cgidr4NdBWJ8dsqUV3hUqefEdjltPapUHygPHBypC9v476rtFVq4LT10OWEAwgLxMkITssB4Vc+BUWOPkrrO9BExP3W2qlmrley0vJqKnnpyKtMrc/8XeVdvfQSVej+wT7CXZy6o21k6yzcO4pvrm5KZ4ZuS6wpzrGrFtayKY4qJYI1PPnhorodNIYUZ5Mrl8xBTCzyURsSG/cR97jq/AHS1j2cRwWO5wE/Hy2GWx+54yJHhKEej2GWgbFViBNujwhVA2mH9UHSuMnBYD2VAqfgmY+buT959L4GBS9HzclIcWIgksQrV+xVBpdvFsuWWzGEK9HWmNxGlPZqGvIXNw1sOh89BEb0zX/OHsyz9pWDkOYdMglU+yNkQQLHKtJplue+lvjhAGBibaTy4YR57gHQG9zpX+fJG7gckO4/yAe+qEHpaWN/EyRvekF8kXSq16372kQLk8/OnjhLl2jBLR5FEH3D70Zp6wvb/10NWEQ1HbHSDK+sn8Vk8EXweVjUjugVWjNInJzFsbq5bfIhKAksnjq02zDIbrAyCu7jC3dwcnW14ybu92Btfgr7DZvfds0tVSpVbsGxBVG3Mr4qmuDkZzb02D1V+Jb1keZFZ8Kqkka2VaatH8hUFynqyhF7b6ZSCCl1eQ5eN/K8ngg9IF/CS67aa6btnl+wEiK0qiYRPMKQPKO1AAHvjS5fvM40H9wGeNi2k/xe7ZxOMlI9yYnNjZJ2Q/OLhzNTUqRfxAcs3Ke2XkNcNUpP2jnP1IjQO/2PcFleIXltMN8aunmssSjCqUbz8qHDNQMexPcV3hZZ8rmCzrYdjXLzZAYei+nOOtaWdPwnA/Jwxyy7Q31PDRCs3F32HnHc9Gd6caMzVqGUe0JmCa5b1CZLIOtUCH/SkwCJFoEsg3dUI+L3XLfDiABI0nfMJLozqpWXoPMmScUpJbz1jVWL2jDXHRCiia3g0SW9DBRVuF0tAPfSrzbTnz1yU1k3n0SYsP1Pca8CexXIdrzurrRpvWvHjHjalNharuDuRomtNeHSMJhwr1oP5Z2GfzGdi9hu7NBthZMu8OhdhoEUn3Qh4rY8Iv3aHxNgFls+Ep9FTtxWdqWeUyjN2czTJ+ufWiy80Fy7fb57RkTS/F6K73fmOyuZdj3SLsXh+O+N7wm02UjS7wQPrWppBCKSbI9w6GOwbxLNtgPnYp9iwgN9bRVvdmsYuDuWJJnz+Cnh/7NxI3UC18NIxgICc5aIi1pT4v3L4fPd111z0to3a73vfb9z8fm86NpclLs4RVy4BtDb47qFqDGmjdrEuvCrfxv07KBTN8NyGwiGrbunWEt9FJmUrjBcFK4XKh6U1ruBodbKoZBioWN4obKH0/gnIKgKx+8wJFfvf2WX7AFKrTUAqWunuau9jm+XkFDOpDcW9ZwDGbGVK7o9V/GJEz0Fk32+9Ts1Z5xJVGh2R0fDC/LCyLpxox3hKEn1odVN25idi9yuAL/Uuesf51SBeoHLfwcaZscGDkzE9DiZJ6gNEjfaEDqbUCV3rwiu1ZkwMuytlFXWbvtzOOvu6yNUhqrBp7Z0Cgj84gw8Oo+DgeLhdmb0Tml2lrmMEpar4fAvb7F6IXHNZ5VJVTa1l5VGyvquTs12ukxN7w4nc8ANCii0LwHpzWfHY0znkwhO/6kelK6N5RR5VJL9jW5oISQo5u7yFmnonchkPLQzhUdNixedjlII4ITaAuyiusrtav8fAcWNuVPyDDFLD3uytjz24O6O0ldHiE/LyojSI+2ShKpsyRjnx+ASHR4RHbT4IRl6frSeLicIpeSOH2JN6Yo4j+Pj5FnW5Xqh0847964rIvlCyOb+KuJ0ZoPRQT64fk7t1A+/XpXKjiy85Bf6dHZVpV6QdhiRfQskq6yk59Jwoc3VsSush9pPZDZXPUJKF4gh3RTifsZpPLxRerptUIHPDrPd3++4dmQtIXV3wSMAAFLhbVyXv9oroHST0j800HZwGWCxIv9OR0JQthScbwtqUpl1xcIiaY5WT0HPiQExuUe+BpIC9/EZRhpP2uxhuWYJz/3cKZKZ0W3vKWE60t7r0lgZEIW7T7QfRnpzqLn2KV99qb3iqBcmA/JpDU/pr/9Auf43q/Wa+tsk9wLR6KumTfVD17a8hKZ1+ChIS558QPljvclKl2sTSVoHba6YelnzGw96W+TDp0PKzXnsQs/Q6vPXqWHW6f3wayZjkxolGVXwPxVNLidjkiaRtdnwXl/B2Zr080xuoeeLQJA37z/2N8PIqmsv+LRA5pF2KGphCJYi8qiGPY1+8t+PbB1Vf/brSiJsvjCUvlH7H5za8XijE6nWXp8tnE8yoioWdg6z/UyYOR2ecavZJcdnq8kMZiS+ddEFUaVahxykJkB1vJqythTIun0qU3R4MpXEEoyf8asQEeF/y1LxuqvT0pK8kYnrqbwaMWkGrdlRJ7rqdWhGJsvvCVbZ/6904K5qifwyyw+Un3PnPxl+7YlSbKJN7z+TfLSq57GG4B5fgYW8zEfjDOz12gQx869Ux5XpijDr5RcztMzv4K5oYe4x+Dy7BsNscui9ekeZp8/moqUba5bLvsaEBS06GTKNPSaxXe+tNVKUy1Wls59bQkVhlmfu8i3BC8RpA8dnBSM2gtvolotMAfs+OQmSgYPucdUcyoAlZUkN5kiw8KU4XVk1xb/P+Ifxz4ZxcQeK28HEJS+/3x2elKpbxMJHBKGVU/2LXm0rVXpcDd26XgdurDx0qZTEc7e+VMVw8npbcnr0mLggz4pyZ7h9vkMI1bo7eMZcqil3w1EFmI7nS7sdDy3nuwtjUVtk2YDm4yM7oMfXC1w+jCeQutEEHzPs7Ey3mdh1fbAt0mTAlOkER4/NOBu3Bl4wzPbpzzWHgN7+CfYQhUAwqdI0adyUNfZjOzmzN0PhC9zohIoPkxZdG4aYC59ZWBL9phtIznoz/yJEUU779R0A/+GKM+6WI+0CHvrPGu2f1jdPfZ2/68TPM5qTADyVlhwPoOz+R1fKuJ1dS9voH9qZ2YgI4oL4AFfDyziuKH9mBke9TWaen3qcsPyzNE/rM2NvPjDLGioI6vIRUXXljoQ/NiSx/tQCCOwh1dYgyRyFotWeKdPZ35oWwq36wCtfPfZUYTzwohZUFYSwrIzNqgLjcU1VH4yNc4thFZ2wKwqPMUQ6u0IMRtutz1gDbz64BUmxu8tgsFmB/9PUX40V5fjvg+V/0WHETI3ddsqq8v6uuvZrtogljIVdG8lukCM0cI7NgJllWuGikKVPDTZVu7Gfygc8nRgaUTK7D4DO+5xTvJ3qbIx809IzATtAHIrNOZenHwMZvye73OCZpE1R5ofYQHp/iJcEIWsrijMouT4uexIxdc6831BXs3i0MCt7f+0lHyJyXol5oZzzXF0qPwssanvqYVp6oswtgFV7t7RazMnUbsCqzrmpbt4zNjUwpTIgUh1bS7rnqENqIibdNnmmtUtrYLcHwlZbcUxR2mDx9eZFbim+mNSaPn8nvF9cxD3zEJRiSecqVVoPEjB8ZTHYJPa1VLy6Zgdt+VbNF3CuC46SBoxA9mSN6plXiqnrW0UZBGruK41HlmaJS1pSHAAj7ANYR76eQ7rytr7zxLz/tj+DszWf1lXffGql3k0i3XjWU33zOSf/Fy7j1oqG8M4oRoPv1M3k5veN7HlpzP45lMr5lswG6OygVwX/NFVV82xNmen0o1whi21JmRwZvoWhGiBKuyrMIwbKwLCreD+W/jP6a3sv0JwJrM9eHOM3wPddI5MaVHQ1BA15HWboQ26IZ9g3vvv59zqmneLgjXZ6l3rlIIxTHpTGvUZzOizHRJVpk34foWdmah421huBY6cmWORZkt2XkNyt23au7s55q6cJuCG0kLs+k4vZb/pldrBSJVDY5FRI2mPWUp91q6pKJVT/FcWkRiyp4oE8DgYs/sjoU6Cw0H3S1uI9VK4P+pAm65VCM4EZdsYiXim1M4TyM/Icl2pa9rwiuqwXCOzVq6otA1vELkNk4npJESSdpv+9aMb+WlpySn7yNbiB9bSlq2skLdDTw3SG3jMP5/6+9afrYFJQ8BXh+tGzyrH/CYJK3ZtzWKmc2gzwndqzZ9MV12+TUpp+oyamNmzus8sUzbHbP3LtXOuZ2zL19q3tOV+fFu739XXNb41HiFFEADy8NP9RA3mdIW7ciLTFFu6ZQFC4IU2F3waiXJsLUlPy607PzSU2RMVq4ZCjZry7vtHdL9SAhH8C0O8QL/4zOvV9oqbbeahOcQb8Xw5MuRbHcfKmEVSuQaXoye0MaU3a2q22/mv9qE29l5rbRkBTSCU/rLPssG0+bCrucp2b09OEsF5SgqTDjjy9ckm/hbn50C6qqj16zNgNQGu4fWx2SvfDshxWmTAdPRe+HFQvPZoeMOR37/N4fqFkhGFryewuQrSk9LOdye/vvXZvft6D/7uPBBV0Dpx/MGxrqu1aa2B0Bziuc2FJUUFgwttVSWli0doulqLiIuPm+P4/oNm8xtLyiHLp4nhuRh/kQOZmr7ucSlgJIAgSCODKAX1wXGfXxIy0aIUUGYv27FyJ+0JqfYqsXbDMkNDs0FbA/ngvs47JXd2oAOvY9Ji+AoxTXFEllClV7tUQoE9VVKyQyUWS1VJ4dBq6Ni8mrNeWEVgPnS8YP/Fiau0RXLRgRAC4dKTzQ2d0BvicbMQrLqkpWOvP93hKem39EfTvnzI1kBqcQr2nWcIeskzrO5fiL0Vz2r4wSVV+Z55IU0Jn2cJ+aiK+Wt14Rt3epuTs00MfOGmqBIX3GedVpVah1NPBP7v9Bz2/9p/M1GIF/vig+INpVMpnSn73OTxgvWSGFh5GdnyPQYdr29tIK5uVbKXRWBk5RnMRd/JXbaVCLg3dz4RnwtKo5jGybbMmEygjz8PUwcfuT1HEcd2+hJpRnG2IzePdGP9lPY3564yHgEsQI1+djjVuMxLISbU6z/8lYOCRKHLN+Hct2HL9FXfKdlBuSwcqmuAAbkF+xuYyE82DeMu2b1rd3LL+d3oDxh2NqtensIqY21hz3BdblLbSlPB/duAHKuPP60vVX5G9c3zZNd8CP7vhtk4EHZFbTQCI6akmvqzQgvutg08xM08FdAO29vkiNAmvUrogeaOOOQ9D4i2xK4qOadteGNJ44McHOIMIS/cszhOmCb3Iin7ici/87y6DKdAG6tQhxIgH+eGN1SEORGYJSFV1I4Mcr9yx+5zqXYQpp+VUXavr90XdTzZyj/loE+xmYS/tHN4BdjIJwd99mw28+P5uWFnCxAICU7nJk1SSlERJKEgWNOyll9xkz+w+gRMD1EaLxz0rjdAhkUsWH0ndmKSakPry6gOGb6fH57SuhfNUkezBrx5C1XZ6dpt7Bk8LpaAOsDqSvYlbXVNhcstpXZqkoPX6kNLci3+a01e2akpJc+M28ZCybuahEH/yDvo0gNPQvEir/c4cOe0nY5QhRmgPI8dBhT6ssaJaNlXWFHZCo5JfRqRmsgV0XuX6P/zee8Pp+iTk1W6X7z2pzVCgRSTMg1AJN9rMb1Pz2BJNVLuphEv7glmR+bDjjwV5rQyb2Iep+UKnH5lN61WT8h2xlenoGKvdDCGRU6PzIKQaW3xO09OS1yw48lVcRxR2TcQI7bM6s/bKrIDof/0xBXjaHllyWf1Vu9lzJPs/2QpSIYpmWL8ODR+Bt3WIuLzYL9WXhjNLYYq7irKcnhlOj7XlrYLK5Ne6+Oyv4dfp77wfR8WzWaz4kL4vTIoyDw6VxP8s7jC0i/wJKNGS3q2dNIHc1rIBtNS7euLejQIYN4YYzDCSX7eKxqHbH4rQcOvcShp8aQdmLWf6v5wkuQiipp50qyonTri7K4cTHPCxyWOeivYTAq7sKEMotyw1sewVOhOOHPKF+a7yye3FZTXpeRuAb7zrWE6sWPT9ihMflRSo22nrWJQnoGjTbr0pXL1pi65nXdgrmL3HzdasAzr/AfzWhOsxbdrwxnRvPZWWZOPHc+IxMbjw7NqOIUruRTJm7mEKpWUylbH7SMblDDlDVVsUfkj2t/iEKQHseazd5fsq4g5x4lkveDX3pCALqC0Wp/osb44s6l/sJ12XYLNucsgLG6/1V8eJlaa362gWYmufUvRur4Mvt1ZuWF03X9d/ZSPONx+fV9nfp5YIfK2tLaXKmBxLQOmfpF0d6h5/9trcWDg3v2gtwhrC7WRsWOHN2ObJrhM7XctSyC9T5yZgkO+0XI/QuzwQLBZvtdYhqPL5jE0WvskTxILFiIwFGaW1Lhf5XKyTu6RVatj4dGHdSZuVM5rhPB/YJ2tilF8NPB2Rup/7Hw7KKNto5EnfmbfdNbQwsKVYLaN6jjX2CNtce2bc2hGqnPra7LDCIl/KhM28Mjyn6x0gW0Ig6NR/SQ6/VU7jZA76Neyn8xLumJ8f9O9JxDOhoIYPXRc3k5A2WWJxQOqTrgab0qhp7szA/3/eILv2xeQ/PZUm3+P6o09Od+o+JPyv9ibLuNJEkjprvEw90R4akQJ/OTxy6s0/Qo1MQZXRnBBdPQHa+YdFeyXxEqh1oVOPoaGNrNtN8JyeTKd/Wxmw2aXMBdH6qdFqgPGny/F9YxU//YYF5LlreEt0LAcVuxUX6s5Mmp1egMEqq218VOhoIAptjFLV8J6n/Kt57+sp3hVwVchDUzepRs0viuO3UdKZH40gK3H7LXo/2CXqtM+71SIZ2GppN9369aOZp1zZflz/Wnp+cJOzSeE1uDeThB3XkDa2mzwjlHWJ8j2y/UOixJ4tL5DzdvX26PRQpJbzcIM05QqIlFbUByddJlaXmJVdvL9/tM+xp5kF5ULck31FAM/BJUfz0o8T3PX0+Di2Yv/Tr2tNDFca0LI4g1HJp9e9j1yfqzFUZhzoShVp+anRLF42p5mtZHpwSQfxIYvuaZkPagbDEwrCE+ipj3nWOaHWZULOYuTBQCdg9/RRnVxAPVlNwTVY9VrrWkHOxIcB8rMIoGR7QnvesdU2ixaORzA+hWtNLs8XcnrrsCi3suOvlxLicCOKaTyVzAxZmdzIlm466j2Yqsz5vfnS4z4jz+/pi5ocp7e6WPrvWua7J3E4DtBvLhq4p4b0w7ycDFRK2ON6YJmXJWCXV8ng5K92kiJXFludSupdRKN0TZHLPUiq1dhlAnzJXNZ6/VdBxy4O3GMFWYOGJub+BTwLiKVuzY77Ec7rbnGAYG1OHQqtPn+ZSi6viGLXVyjn1GW0ZC2vRZsT/rEv3N7m44ieRs9ubQRAujtIJgyAsvpwrNppX4l6WVjrL8+Cen60Hvz51IcFyhdj6T/Oq0/rSVS+wOu4oP5FOqo+KVCxWoxK3BImnS76kLm24USnWhxfAEygQ+n6W0T0n0kXyPsKRFnvSppAgbzSMjq9hHPeI902H2m7sSxr6iSrPaFvsZLgsgJYRbQ85wSBzUabQtrAXWPS1t8fH7unc5MdWUYyM3lXSnK9usl91ipOMWZ2ldqnOoSTodfWEvalUIxfUo4N2lIb4yzsZk4TsCdr5hKZyMUoTXKvWHmEykA/6W3uaz1+YWz3c7Pcy4/NTLkqB9dXXILUppRzCcMp+FQcGrYnK0GUpkG2r1iM3UpprL/mnudBKf+7bOGsUBhR9pLUHF6d4udJN7imIZUd3TzmIQVWSs5u+iPaZAl8HbXov+vJ1WfjMR87vfPbdHXmbycGWGmoj+JcqcOtf+3AcHXpyp4k2wkbEZCRNDK9xXMuOJgQb3xBcftHEoC5i7SvDHe4L9ljhO/WBo6HQSFuPnMiYfQ/THD7ZacjgXYIRAdz+/MnxTI4Ol8sBDVprjsoQrFxa7/+n4LOyP3UkYs9mJAimMzPNwtU76vwugXDU2XLvOjDILzt6eY12Jbah536N1z4mDc1d5vUaH3gyQF+y4oHGRU6QYNoVKTQ+3HaKxrb6o67UbCbFLoDvRrHu7fRWmOO6VGOkGhDpWkNqHuNlbnmQJjMpSjxGkEW8rS01c4+1pSZ0vBk6d48Xv21y7C+eQARUCHZ6bW3bWYfxnBU+frWpDtt0jvVMJQzk1OCa73HT09OJroB5UeujMb9kWRDALvWqx0PuJas1Gzf7B39c+Mvgba1868o/G8pohwfm5wT0fU5TBjXitCvhNrR3I/NXdgU3rAU7vaPwxG9hRY0al1KrHT+sTR13CGJvDbBKk9pKbpfnofyTsv4W13BRiUHemsdS92hVf9XWA72dA28eLc/jclYShotOfru0aLxN3/23kzli8N6f+VEwzuSxI06bvux4El+148vn7hfB451YXSDZ12USpdn1pNDkQP6NeFWtnbhW6Z4oOR0u18HhzJ71bHbsdLH0I8R4rVKuVbO2/uahB7bHsdllpfF5B9notecjDGoHj0ajdPtNjFDsjVCsCsEus6WtyB8A7Ow0bPSh2Nyy8ti8SyyUDBY7IWlZpJRlQm5CMomUEltxggNVGbRRRr/kUrsJrhyeRGS4Fxr64UgpJ0ZmEjRauevr06XB1CQ0RS4ozGXzeOKiApGUL87IFQqE/DVDCyr1jAmpu3d4PhFIXrW2mmYi7XQgmnImKqQRZ7ynIZdCq0cNrZZNBCQeV9u5U3aLBjmMwfK7HWNSpsVr5Oqn1zwyEgl95ESbaK0RP1ev+2tn8K228obCLUwm25/9IyM7KC9XqxuZDh31ENxcRy4QG9mb28upQw09c+urE6XJimriH+1fH0Qi+yxlwc9J6rabQUdnz7hFAjxvy74Y+gGOpTJ7Kh2rSHeLmdrXsrMg8fCn3/dPwdGXMPmb9+tJ+sf7BEAySs38DzZFGb0m6vcF2PofTOk2tDsSv6c7dFEFC99S+Xmm+O2k62zWPwL49aaaLuLesi4aU+3sp99UbbOeYmnY3flpi6WaCtabewwdYu3XaLeLzCPFbQHpdng6mtb7t7XR2sQXdTALepKygqB/tcc/kBbP7zA5t5qSwprD8Ge3r99Gmst9T9hdT/mQcU499glC7hAppo4HyHCG+xT2gDS3u4PJZR3wzPa4vP0+D37tdYludqcFK1a75l6rhLlW8pqLkGT4JlIqxxZxEzFyBqolIuYc0jz47+nQ3H30B6Ct+aiyN6V5yI28e37KkYKTsC2c/Bspx7qXROrSrvXd9nTSdoqYvVSDc8r1Vlao1gQkTYnIUKrayttDehIC0lW1A13DvM/oMmwGr5wH2KG2wRHmOSfbUYYtYpAJRCitFnbukfWMXEWKrYEMq3nwSPcfpEfNkMX9C3/QYyo5GEwC5vDrAA2LesUfIykKiGRxsHB8kUzih2gk3UHacq7wB+2oawsdmMOvW3PuIxG+XhW6Ch4M5IAI4AEygMUPg0lEzxPSB5bn+KmDv1XwW8k8ywh2inlfAmwHoJtU+Aryd7NzV+39SDHjVLSmpt0ADccG3fq3/pDhH4KWQB00mTE2iL1b5wdnzm0oJNjaUMlkY8NAh/oNjULmDZ1SEi6h5zC4zFYDMK6SrFsqCsW7gkm5fJmrlJYnq+CKOFeicrm25pUEZBLUyUZyXLbjqoxcpucSRVxO6V2iGArtPkclDhrdpUJxihucKXFF6vICmVyRnYgKhQ4IcCjbeDTEYF+uEqXq5MC58g2IgmcSTM9RBVeWOoY1klUUyheY0zZcyhlYuVBqkKxkBMEV8nHVjDM7LJASeAyokMkiW2wXmQvh+u5Pnq+CArhyOQKuERooGUJcBASXbXZUcOGqEJv5YpQgOJuJS0zmsFLU2GIOsTJGBDG4MeAYoQQMyp8VCptgdOQLxGVxrkjBNcxRpngsBZjMxHHJnKumON8cKMug/iDiTJEr2NTnUKUhG97tmKA4lMQBRhzg2zDqpTLC/yt2P0cyKaSSRjoZZJJFNg+ewCC8QHmD8eELDgHJjz8UNAwsnACBguAFIwhBREJGcSNXKHr7/ioMU7gIkaJEixErTjwWNg4uHj4BIRExCSkZOQUlFbUEGlo6iZLoJTNIkcooTboMmbYY06HTfgs812VAr+U2WvuyMe+2dqM++qTfQnMddd8HK2zyxWdfrTHhtJMmZTEZYnZWtlPOuOic8y54IcdVl1y2Va73ht1wzXV5XnmjW4F8hSyKFFulRJlSl2q+SqVqNV6qVe/vXxo0abTLai2azdbqtbf2uGnKtL/dc8tfttlhp2NmbHfcHJsdcPBl6+NW3dfm1lNpfYHNa/+LegA=) format('woff2'); } /* ---------- Variabili di tema (palette western cartoon) ---------- */ :root { --sky-top: #f9e9cb; --sky-bottom: #deb182; --sand: #e8b96f; --sand-dark: #c8944a; --road: #b9803f; --road-dark: #9c6631; --wood: #7a4b23; --cream: #fff5e1; --ink: #3b2312; --ink-muted: #765638; --paper: #fff8e9; --terracotta: #ad482a; --green: #3fbf6f; --red: #e04b3f; --blue: #3d7fd6; --shadow: 0 3px 6px rgba(59, 35, 18, .16); --radius: 14px; /* Ora d'oro: il cielo dentro il campo, dal caldo alto al bruciato basso */ --sky-high: #ffe6a8; --sky-mid: #ffb877; --sky-low: #f08a54; --sun-core: #fff6d0; --sun-glow: #ffd25e; /* Piani di profondità: più lontano, più chiaro e più smorzato */ --mesa-far: #d99a72; --mesa-mid: #b9743f; --mesa-top: #cf8a52; --mesa-near: #8a5228; /* Ostacoli: un'unica famiglia cromatica, coerente col manto del pony */ --cactus: #4e9a52; --cactus-dk: #35703b; --bloom: #f2758d; --stone: #ab8a68; --stone-dk: #7d6145; --bone: #f6ecd4; --bone-dk: #d9c49c; } * { box-sizing: border-box; margin: 0; padding: 0; } /* La voce display: legno intagliato da insegna. Mai sulle cifre in gioco. */ .hud-title span, .panel h1, .btn, #pauseBadge { font-family: "Rye", "Trebuchet MS", Georgia, serif; font-weight: 400; } /* Il foglio delle icone non occupa spazio: serve solo a definire i simboli */ .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } html, body { height: 100%; /* Rye è la voce display (insegne, titoli). Il corpo e soprattutto le cifre restano su una grottesca leggibile: la parità va letta in un istante. */ font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif; color: var(--ink); background: radial-gradient(ellipse at 50% 15%, var(--sky-top) 0%, var(--sky-bottom) 72%, #c59369 100%); overflow: hidden; -webkit-tap-highlight-color: transparent; } /* Il sole vive dentro al campo, non dietro alla pagina: qui resta solo il riverbero caldo che tiene insieme la cornice. */ body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(60% 42% at 50% 8%, rgba(255,231,168,.5), rgba(255,231,168,0) 70%); pointer-events: none; } /* ---------- Layout generale ---------- */ #game { position: relative; height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 10px; } /* ---------- HUD ---------- */ .hud { width: min(900px, 100%); display: flex; align-items: stretch; justify-content: space-between; gap: 8px; } /* Le due targhe sono assi di legno inchiodate, non riquadri generici */ .hud-box { position: relative; flex: 0 1 220px; display: flex; align-items: center; gap: 7px; padding: 8px 14px; color: var(--ink); background: linear-gradient(to bottom, #fffaf0, var(--cream) 62%, #f1dfc0); border: 3px solid var(--wood); border-radius: var(--radius); box-shadow: var(--shadow), inset 0 -6px 10px -6px rgba(122,75,35,.35); font-size: clamp(.75rem, 2.6vw, .95rem); transition: transform .12s ease, background-color .2s ease; } /* I due chiodi che la tengono su */ .hud-box::before, .hud-box::after { content: ""; position: absolute; top: 5px; width: 5px; height: 5px; border-radius: 50%; background: rgba(59,35,18,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); } .hud-box::before { left: 6px; } .hud-box::after { right: 6px; } .hud-box strong { margin-left: auto; font-size: 1.2em; font-variant-numeric: tabular-nums; } .hud-label { opacity: .72; } .hud-icon { flex: 0 0 auto; width: 1.15em; height: 1.15em; fill: var(--wood); } .hud-icon.bad { fill: var(--red); } .hud-title { display: flex; align-items: center; gap: 7px; padding: 0 10px; font-size: clamp(.8rem, 2.6vw, 1.15rem); letter-spacing: .5px; color: var(--ink); text-shadow: 0 1px 0 rgba(255,248,233,.7); white-space: nowrap; } .title-mark { width: 1.5em; height: 1.5em; transform: rotate(180deg); /* ferro con l'apertura in alto, come si appende */ fill: var(--wood); filter: drop-shadow(0 1px 0 rgba(255,248,233,.7)); } /* Animazioni di feedback sull'HUD */ .hud-box.pop-good { animation: popGood .35s ease; } .hud-box.pop-bad { animation: popBad .45s ease; } @keyframes popGood { 0% { transform: scale(1); background: var(--cream); } 40% { transform: scale(1.14); background: #c9f5d8; } 100% { transform: scale(1); background: var(--cream); } } @keyframes popBad { 0% { transform: scale(1) rotate(0); background: var(--cream); } 25% { transform: scale(1.12) rotate(-3deg); background: #ffcdc8; } 60% { transform: scale(1.06) rotate(3deg); background: #ffcdc8; } 100% { transform: scale(1) rotate(0); background: var(--cream); } } /* ---------- Campo di gioco: formato orizzontale ---------- */ #field { position: relative; width: min(900px, 100%); aspect-ratio: 16 / 9; max-height: 74dvh; min-height: 220px; --horizon: 22%; /* tenuto in sincronia da script.js (HORIZON_RATIO) */ border: 5px solid var(--wood); border-radius: 18px; overflow: hidden; /* Il cielo è il fondo del campo: la pista lo copre da --horizon in giù */ background: linear-gradient(to bottom, var(--sky-high) 0%, var(--sky-mid) 55%, var(--sky-low) 100%); box-shadow: 0 5px 8px rgba(59,35,18,.20), 0 18px 36px rgba(59,35,18,.18), inset 0 0 50px rgba(122,75,35,.14); touch-action: none; /* swipe verticale = cambio corsia, non scroll pagina */ cursor: pointer; } /* Scossa alla collisione */ #field.shake { animation: shake .38s cubic-bezier(.36,.07,.19,.97); } @keyframes shake { 10%, 90% { transform: translate(-3px, 1px) rotate(-.4deg); } 20%, 80% { transform: translate(5px, -2px) rotate(.5deg); } 30%, 50%, 70% { transform: translate(-7px, 2px) rotate(-.6deg); } 40%, 60% { transform: translate(7px, -1px) rotate(.6deg); } } /* ========================================================= IL PAESAGGIO --------------------------------------------------------- Tre piani sopra il cielo, ciascuno una piastrella SVG che si ripete in orizzontale. script.js li trasla a frazioni diverse della velocità di gioco: è la parallasse a dare profondità al campo. Le piastrelle combaciano ai bordi, quindi lo scorrimento è infinito senza salti. ========================================================= */ .scenery { position: absolute; left: 0; right: 0; top: 0; height: var(--horizon); overflow: hidden; pointer-events: none; z-index: 1; } /* Il sole basso all'orizzonte, dentro il campo e non più dietro */ .sun { position: absolute; right: 16%; bottom: -6%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--sun-core) 0 38%, var(--sun-glow) 52%, rgba(255,210,94,0) 72%); filter: blur(.5px); } .scenery-near { z-index: 2; } /* davanti alla sabbia */ .ground { z-index: 1; } .scenery-far, .scenery-mid, .scenery-near { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; background-repeat: repeat-x; background-position: left bottom; will-change: transform; backface-visibility: hidden; } /* Piano lontano: la catena sfumata sul fondo, schiarita dalla foschia */ .scenery-far { opacity: .62; background-size: 520px min(76px, 100%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 100' preserveAspectRatio='none'%3E%3Cpath fill='%23d99a72' d='M0,100 L0,74 L48,58 L96,68 L150,44 L200,58 L246,38 L300,56 L352,42 L404,62 L452,50 L520,74 Z'/%3E%3C/svg%3E"); } /* Piano intermedio: le mesa dal profilo piatto, firma del paesaggio */ .scenery-mid { opacity: .82; background-size: 420px min(96px, 100%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 100' preserveAspectRatio='none'%3E%3Cg fill='%23b9743f'%3E%3Cpath d='M34,100 L34,46 L42,36 L112,36 L120,46 L120,100 Z'/%3E%3Cpath d='M196,100 L196,62 L202,54 L250,54 L256,62 L256,100 Z'/%3E%3Cpath d='M312,100 L326,64 L352,64 L366,100 Z'/%3E%3C/g%3E%3Cg fill='%23cf8a52'%3E%3Cpath d='M42,36 L112,36 L120,46 L34,46 Z'/%3E%3Cpath d='M202,54 L250,54 L256,62 L196,62 Z'/%3E%3C/g%3E%3C/svg%3E"); } /* Piano vicino: arbusti, saguari e pali, appoggiati sulla linea dell'orizzonte */ .scenery-near { background-size: 380px min(58px, 100%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 58' preserveAspectRatio='none'%3E%3Cg fill='%238a5228'%3E%3Cpath d='M26,58 L26,20 C26,15 36,15 36,20 L36,58 Z M26,36 L17,36 C11,36 8,31 8,25 L8,20 C8,15 16,15 16,20 L16,25 C16,28 19,29 26,29 Z M36,30 L45,30 C50,30 52,26 52,21 L52,15 C52,10 60,10 60,15 L60,23 C60,31 53,37 45,37 L36,37 Z'/%3E%3Cpath d='M118,58 C104,58 96,53 96,47 C96,41 104,37 118,37 C132,37 140,41 140,47 C140,53 132,58 118,58 Z'/%3E%3Cpath d='M100,42 C100,36 106,32 112,32 C118,32 122,36 122,42 Z M126,44 C126,39 131,36 136,36 C141,36 144,39 144,44 Z'/%3E%3Crect x='212' y='14' width='7' height='44'/%3E%3Crect x='252' y='18' width='7' height='40'/%3E%3Crect x='206' y='26' width='60' height='5'/%3E%3Crect x='206' y='42' width='60' height='5'/%3E%3Cpath d='M322,58 C312,58 306,54 306,49 C306,44 312,41 322,41 C332,41 338,44 338,49 C338,54 332,58 322,58 Z'/%3E%3Cpath d='M352,58 L352,30 M352,38 L344,28 M352,40 L362,30 M352,46 L343,42 M352,44 L361,38' stroke='%238a5228' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E"); } /* La sabbia dell'orizzonte: sale dietro le sagome e sfuma nel cielo, così la pista non taglia il paesaggio con una cucitura netta. */ .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(to bottom, rgba(226,176,120,0) 0%, rgba(220,167,110,.8) 45%, var(--sand-dark) 100%); } /* Aria calda che trema sulla linea dell'orizzonte: velo sottilissimo */ .heat { position: absolute; left: 0; right: 0; bottom: -2%; height: 14%; background: linear-gradient(to bottom, rgba(255,232,182,0), rgba(255,232,182,.5)); animation: heatShimmer 5.5s ease-in-out infinite; } @keyframes heatShimmer { 0%, 100% { transform: scaleY(1); opacity: .55; } 50% { transform: scaleY(1.35); opacity: .85; } } /* Pista: fasce orizzontali di terra battuta */ #road { position: absolute; left: 0; right: 0; bottom: 0; top: var(--horizon); /* script.js sovrascrive con il valore in px */ background: /* luce radente che entra da destra, dove sta il sole */ radial-gradient(120% 90% at 100% 0%, rgba(255,214,140,.42) 0%, rgba(255,214,140,0) 60%), linear-gradient(to bottom, var(--sand-dark) 0%, var(--road) 7%, var(--road-dark) 52%, var(--road) 93%, var(--sand-dark) 100%); box-shadow: inset 0 5px 10px rgba(59,35,18,.22); /* il ciglio della pista */ } /* Solchi orizzontali che scorrono. Sono elementi larghi il doppio traslati con transform invece che con background-position: la traslazione è composita e non costringe il browser a ridipingere tutta la pista a ogni frame. */ .road-dirt { position: absolute; top: 0; left: 0; width: 200%; height: 100%; /* Chiazze di terra battuta, non bande verticali: ellissi schiacciate sparse su due passi (70 e 35 px) che leggono come polvere e non come palizzata. Entrambi i passi dividono i 70 px dello scorrimento, quindi non saltano. */ background-image: radial-gradient(ellipse 24px 6px at 16% 26%, rgba(96,58,26,.16), transparent 72%), radial-gradient(ellipse 30px 7px at 58% 64%, rgba(96,58,26,.13), transparent 72%), radial-gradient(ellipse 18px 5px at 86% 88%, rgba(96,58,26,.11), transparent 72%), radial-gradient(ellipse 14px 4px at 34% 46%, rgba(255,242,214,.11), transparent 72%), radial-gradient(ellipse 10px 3px at 78% 16%, rgba(255,242,214,.09), transparent 72%); background-size: 70px 100%, 70px 100%, 70px 100%, 35px 100%, 35px 100%; will-change: transform; } /* Separatori di corsia: solchi lasciati dalle ruote dei carri, non trattini da autostrada. Un solco scavato (scuro) con il ciglio illuminato sopra. */ .lane-line { position: absolute; left: 0; width: 200%; height: 7px; margin-top: -3px; background-image: repeating-linear-gradient(to right, rgba(255,245,225,.55) 0px, rgba(255,245,225,.55) 40px, rgba(255,245,225,0) 40px, rgba(255,245,225,0) 74px), repeating-linear-gradient(to right, rgba(74,44,20,.45) 0px, rgba(74,44,20,.45) 40px, rgba(74,44,20,0) 40px, rgba(74,44,20,0) 74px); background-size: 74px 2px, 74px 3px; background-position: left top, left 3px; background-repeat: repeat-x, repeat-x; pointer-events: none; will-change: transform; backface-visibility: hidden; } /* ========================================================= IL PONY EXPRESS — personaggio disegnato in SVG --------------------------------------------------------- #player riceve da JS una font-size in px: la sprite scala di conseguenza. --gait è la durata di un ciclo di galoppo, aggiornata da JS in base alla velocità di gioco. ========================================================= */ #player { position: absolute; left: 0; top: 0; z-index: 5; --gait: .45s; --tilt: 0deg; /* inclinazione nel cambio corsia, applicata dentro bodyBob */ --coat: #b5723f; --coat-mid: #9c5c2e; --coat-dark: #7d4520; --coat-deep: #5e3115; --hair: #40230e; --hoofc: #2b1a0a; --skin: #f4c795; --denim: #3f7ad2; --denim-dk: #2a5697; --leather: #8a5a22; --leather-dk:#5d3a12; will-change: transform; } /* Ombra a terra */ #player::after { content: ""; position: absolute; left: 50%; top: 88%; width: 1.1em; height: .15em; margin-left: -.55em; border-radius: 50%; background: rgba(59,35,18,.3); filter: blur(2px); animation: shadowPulse var(--gait) ease-in-out infinite; } @keyframes shadowPulse { 0%, 100% { transform: scaleX(1); opacity: .3; } 50% { transform: scaleX(.85); opacity: .2; } } /* Contenitore del disegno */ .pony { position: absolute; left: 50%; top: 50%; width: 1.75em; height: 1.42em; margin: -.78em 0 0 -.9em; animation: bodyBob var(--gait) ease-in-out infinite; } .pony-svg { width: 100%; height: 100%; overflow: visible; } @keyframes bodyBob { 0%, 100% { transform: translateY(.014em) rotate(calc(-1.4deg + var(--tilt, 0deg))); } 50% { transform: translateY(-.05em) rotate(calc( 1.6deg + var(--tilt, 0deg))); } } /* --- Colori delle parti --- */ .coat { fill: var(--coat); } .head { fill: var(--coat); } .coat-dark { fill: var(--coat-dark); } .coat-shade { fill: var(--coat-mid); opacity: .2; } .belly { fill: #d79a5e; opacity: .35; } .muzzle { fill: var(--coat-deep); } .hair { fill: var(--hair); } .eye { fill: #201205; } .eye-spark { fill: #fff; opacity: .85; } .nostril { fill: #1d1005; } .star { fill: #f6e6c8; opacity: .9; } .bridle { fill: none; stroke: #3a2410; stroke-width: 2.4; stroke-linecap: round; } .rein { fill: none; stroke: #4a2f16; stroke-width: 2.2; stroke-linecap: round; animation: reinPump var(--gait) ease-in-out infinite; transform-box: view-box; transform-origin: 150px 55px; } @keyframes reinPump { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } } /* --- Zampe --- */ .limb { fill: none; stroke: var(--coat-dark); stroke-width: 15; stroke-linecap: round; } .limb.thin { stroke-width: 10; stroke: var(--coat-deep); } .limb.sock { stroke: #f3e4c8; } .hoof { fill: var(--hoofc); } .leg, .leg .lower { transform-box: view-box; animation-duration: var(--gait); animation-timing-function: linear; animation-iteration-count: infinite; } .leg { animation-name: legSwing; } .leg .lower{ animation-name: shinSwing; } .leg-hf { transform-origin: 50px 74px; } .leg-hn { transform-origin: 60px 78px; } .leg-ff { transform-origin: 128px 76px; } .leg-fn { transform-origin: 138px 78px; } .leg-hf .lower { transform-origin: 40px 110px; } .leg-hn .lower { transform-origin: 50px 114px; } .leg-ff .lower { transform-origin: 126px 112px; } .leg-fn .lower { transform-origin: 136px 114px; } /* Le zampe lontane sono più scure e stanno dietro al corpo */ .leg-hf .limb, .leg-ff .limb { stroke: var(--coat-deep); } .leg-hf .hoof, .leg-ff .hoof { fill: #1e1206; } /* Sfasamento: galoppo trasverso */ .leg-hf, .leg-hf .lower { animation-delay: calc(var(--gait) * -0.02); } .leg-hn, .leg-hn .lower { animation-delay: calc(var(--gait) * -0.14); } .leg-ff, .leg-ff .lower { animation-delay: calc(var(--gait) * -0.52); } .leg-fn, .leg-fn .lower { animation-delay: calc(var(--gait) * -0.64); } @keyframes legSwing { 0% { transform: rotate(-34deg); } 25% { transform: rotate(2deg); } 50% { transform: rotate(28deg); } 75% { transform: rotate(4deg); } 100% { transform: rotate(-34deg); } } @keyframes shinSwing { 0% { transform: rotate(36deg); } 28% { transform: rotate(8deg); } 52% { transform: rotate(-6deg); } 80% { transform: rotate(42deg); } 100% { transform: rotate(36deg); } } /* --- Criniera, coda, orecchie: dettagli animati --- */ .mane, .mane-tuft { transform-box: view-box; transform-origin: 155px 14px; animation: maneWave calc(var(--gait) * 1.5) ease-in-out infinite; } @keyframes maneWave { 0%, 100% { transform: rotate(2deg) skewX(3deg); } 50% { transform: rotate(-3deg) skewX(-5deg); } } .tail { transform-box: view-box; transform-origin: 48px 62px; animation: tailSway calc(var(--gait) * 2) ease-in-out infinite; } @keyframes tailSway { 0%, 100% { transform: rotate(11deg); } 50% { transform: rotate(-13deg); } } .ear { transform-box: view-box; transform-origin: 172px 18px; animation: earFlick calc(var(--gait) * 5) ease-in-out infinite; } @keyframes earFlick { 0%, 84%, 100% { transform: rotate(0); } 90% { transform: rotate(-22deg); } } .eye { transform-box: view-box; transform-origin: 182px 31px; animation: blink calc(var(--gait) * 8) ease-in-out infinite; } @keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97.5% { transform: scaleY(.1); } } /* --- Finimenti --- */ .blanket { fill: #c8452f; } .blanket-trim { fill: #f6e6c8; } .saddle { fill: var(--leather); stroke: var(--leather-dk); stroke-width: 2; } .saddle-horn { fill: var(--leather-dk); } .bag-body { fill: #d9a95f; stroke: var(--leather-dk); stroke-width: 2.4; } .bag-flap { fill: var(--leather); stroke: var(--leather-dk); stroke-width: 2.4; } .bag-stud { fill: #f6e6c8; stroke: var(--leather-dk); stroke-width: 1.6; } .bag { transform-box: view-box; transform-origin: 70px 66px; animation: bagBounce var(--gait) ease-in-out infinite; } @keyframes bagBounce { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(.8px); } } /* --- Cavaliere --- */ .rider { transform-box: view-box; transform-origin: 106px 60px; animation: riderBob var(--gait) ease-in-out infinite; } @keyframes riderBob { 0%, 100% { transform: translateY(-1.5px) rotate(2.5deg); } 50% { transform: translateY(2px) rotate(-1deg); } } .torso { fill: var(--denim); } .torso-shade { fill: var(--denim-dk); opacity: .55; } .belt { fill: #5d3a12; } .arm { fill: none; stroke: var(--denim); stroke-width: 11; stroke-linecap: round; transform-box: view-box; transform-origin: 114px 36px; animation: armPump var(--gait) ease-in-out infinite; } @keyframes armPump { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(3deg); } } .hand { fill: var(--skin); } .rider-head { fill: var(--skin); } .scarf { fill: #e04b3f; } .rider-leg { fill: none; stroke: var(--denim-dk); stroke-width: 12; stroke-linecap: round; } .boot { fill: #4a2a12; } .stirrup { fill: none; stroke: #4a3a22; stroke-width: 3; } .hat-brim { fill: var(--leather); } .hat-crown { fill: #9a6a2c; } .hat-band { fill: #40260c; } .hat { transform-box: view-box; transform-origin: 108px 8px; animation: hatBob var(--gait) ease-in-out infinite; } @keyframes hatBob { 0%, 100% { transform: translateY(-1px) rotate(-3deg); } 50% { transform: translateY(1px) rotate(1deg); } } /* --- Polvere sollevata dagli zoccoli --- */ .dust circle { fill: #e8b96f; opacity: 0; transform-box: view-box; animation: puff calc(var(--gait) * 2) linear infinite; } .dust .p1 { transform-origin: 44px 150px; animation-delay: 0s; } .dust .p2 { transform-origin: 28px 152px; animation-delay: calc(var(--gait) * .66); } .dust .p3 { transform-origin: 14px 150px; animation-delay: calc(var(--gait) * 1.33); } @keyframes puff { 0% { opacity: .75; transform: translate(0,0) scale(.3); } 100% { opacity: 0; transform: translate(-40px,-16px) scale(1.5); } } /* Elementi aggiunti nella versione dettagliata */ .hair-light { fill: #553014; } .tail-hi { transform-box: view-box; transform-origin: 48px 62px; animation: tailSway calc(var(--gait) * 2) ease-in-out infinite; } .ear-inner { fill: var(--coat-deep); } .girth { fill: none; stroke: var(--leather-dk); stroke-width: 4; stroke-linecap: round; opacity: .9; } .saddle-dark { fill: var(--leather-dk); } .bag-strap { fill: none; stroke: var(--leather-dk); stroke-width: 4; stroke-linecap: round; } .bag-mark { fill: none; stroke: var(--leather-dk); stroke-width: 2; stroke-linecap: round; opacity: .6; } .rider-shin { fill: none; stroke: var(--denim-dk); stroke-width: 11; stroke-linecap: round; } .stirrup-strap { fill: none; stroke: #4a3a22; stroke-width: 3; } .rider-leg-group{ transform-box: view-box; transform-origin: 104px 58px; animation: riderBob var(--gait) ease-in-out infinite; } /* --- Stati speciali --- */ #player.paused .pony, #player.paused .pony *, #player.paused::after { animation-play-state: paused; } #player.bump .pony { animation: bump .32s ease; } #player.hurt .pony { animation: hurt .42s ease; } @keyframes bump { 0%, 100% { transform: scale(1) rotate(0); } 45% { transform: scale(1.14) rotate(-7deg) translateY(-.05em); } } @keyframes hurt { 0%, 100% { transform: rotate(0); filter: none; } 30% { transform: rotate(-14deg) translateY(-.04em); filter: brightness(1.4) saturate(1.8); } 65% { transform: rotate(8deg); filter: brightness(1.4) saturate(1.8) drop-shadow(0 0 .08em var(--red)); } } /* ---------- Entità ---------- */ .entity { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; will-change: transform; /* Layer GPU dedicato: niente sfarfallio del testo in corsa. Niente `contain: paint`: ritagliava i correnti che sporgono dalla staccionata. */ backface-visibility: hidden; z-index: 3; } /* Gettone numerato: identico per pari e dispari — la parità va letta! */ .number { border-radius: 50%; /* Leggibilità in movimento: cifre larghe, spesse e a passo fisso. */ font-family: Verdana, "DejaVu Sans", Tahoma, "Trebuchet MS", sans-serif; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1; color: #24160a; /* Fondo quasi piatto: un gradiente marcato abbassa il contrasto sotto la cifra. */ background: radial-gradient(circle at 50% 50%, #fff8e6 0 62%, #f0dcb0 100%); border: 3px solid var(--wood); box-shadow: 0 3px 0 rgba(59,35,18,.45), inset 0 0 0 2px rgba(255,255,255,.65); /* anello chiaro: stacca la cifra dal bordo */ /* Un solo contorno netto: gli aloni duplicavano il bordo durante la corsa. */ text-shadow: none; /* Rendering nitido durante lo scorrimento orizzontale. */ text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; } /* ---------- Ostacoli disegnati ---------- Stesso linguaggio del pony: campiture piene, nessun contorno, un lato in ombra. L'ombra a terra li appoggia sulla pista invece di farli galleggiare. */ .obstacle { filter: drop-shadow(0 3px 3px rgba(59,35,18,.45)); } .obs-svg { width: 100%; height: 100%; overflow: visible; } .o-body { fill: var(--stone); } .o-shade { fill: var(--stone-dk); } .o-hi { fill: rgba(255,245,225,.3); } .o-crack { fill: none; stroke: var(--stone-dk); stroke-width: 2.5; stroke-linecap: round; opacity: .7; } .obs-cactus .o-body { fill: var(--cactus); } .obs-cactus .o-shade { fill: var(--cactus-dk); } .o-bloom { fill: var(--bloom); } .o-rib { fill: none; stroke: var(--cactus-dk); stroke-width: 3; stroke-linecap: round; opacity: .55; } .obs-botte .o-body { fill: #b0762f; } .obs-botte .o-shade { fill: #8a5820; } .o-band { fill: #5d4a33; } .o-bone { fill: var(--bone); } .o-horn { fill: var(--bone-dk); } .o-socket { fill: #4a331d; } .obs-ceppo .o-body { fill: #a4703c; } .obs-ceppo .o-shade { fill: #7d5029; } .o-top { fill: #d8ac72; } .o-ring { fill: none; stroke: #9c6a36; stroke-width: 2.5; } .o-bark { fill: none; stroke: #6d4522; stroke-width: 3; stroke-linecap: round; opacity: .55; } .o-branch { fill: #7d5029; } /* ---------- Staccionate: assi e palo, non una barra a strisce ---------- */ .wall { /* Deve restare fuori dal flusso come tutte le .entity. Con position:relative la comparsa/rimozione di un'altra staccionata spostava la sua origine e produceva il teletrasporto visibile durante la corsa. */ position: absolute; background: none; overflow: visible; } /* Il palo occupa tutta la larghezza dell'entità: la staccionata ha hitbox piena, quindi ogni pixel di collisione deve avere del legno sotto. */ .wall .post { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(to right, #7d4d24, #a86f38 42%, #5c3617); border-radius: 2px 2px 0 0; box-shadow: -4px 0 0 rgba(59,35,18,.3); z-index: 2; } /* I due correnti, che sporgono oltre il palo e dichiarano la staccionata. La sporgenza resta contenuta: legno visibile fuori dall'hitbox significa colpi che non arrivano, l'errore opposto a quello appena corretto. */ .wall .rail { position: absolute; left: -26%; right: -26%; height: 15%; background: linear-gradient(to bottom, #c08a4c, #9a6531 55%, #6b4220); border-radius: 3px; box-shadow: 0 3px 0 rgba(59,35,18,.38); z-index: 1; } .wall .rail:nth-child(1) { top: 20%; transform: rotate(-1.2deg); } .wall .rail:nth-child(2) { top: 58%; transform: rotate(.8deg); } /* L'ostacolo che ha chiuso la corsa resta in scena, marcato: alla schermata di Game Over si deve poter vedere che cosa è stato. */ .entity.killer { z-index: 6; animation: killerPulse .55s ease-out 3; } @keyframes killerPulse { 0% { filter: drop-shadow(0 0 0 rgba(224,75,63,.95)) brightness(1.35); } 100% { filter: drop-shadow(0 0 14px rgba(224,75,63,0)) brightness(1); } } /* ---------- Feedback ---------- */ .float { position: absolute; left: 0; top: 0; font-weight: bold; font-size: clamp(15px, 2.4vw, 20px); pointer-events: none; z-index: 8; text-shadow: 0 2px 0 rgba(0,0,0,.4); animation: floatUp .85s ease-out forwards; white-space: nowrap; } .float.good { color: #b6ffcd; } .float.bad { color: #ffc0b8; } @keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 0) scale(.7); } 20% { opacity: 1; transform: translate(-50%, -12px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -60px) scale(1); } } .ring { position: absolute; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 4px solid var(--green); pointer-events: none; z-index: 7; animation: ringOut .45s ease-out forwards; } .ring.bad { border-color: var(--red); } @keyframes ringOut { from { opacity: .95; transform: scale(.3); } to { opacity: 0; transform: scale(2.2); } } #flash { position: absolute; inset: 0; background: var(--red); opacity: 0; pointer-events: none; z-index: 9; } #flash.on { animation: flashHit .4s ease-out; } #flash.on-good { animation: flashGood .3s ease-out; background: var(--green); } @keyframes flashHit { 0% { opacity: .55; } 100% { opacity: 0; } } @keyframes flashGood { 0% { opacity: .22; } 100% { opacity: 0; } } /* ---------- Overlay (start / game over) ---------- */ .overlay { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(49, 35, 24, .54); backdrop-filter: blur(2px); animation: fadeIn .25s ease; } .overlay.hidden { display: none; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Il pannello è un manifesto da taglia inchiodato a una tavola: carta ingiallita, doppia cornice tipografica, chiodi agli angoli. */ .panel { position: relative; width: 100%; max-width: 430px; max-height: 100%; overflow-y: auto; text-align: center; padding: 20px 24px 16px; color: var(--ink); background: radial-gradient(115% 80% at 50% 0%, rgba(122,75,35,.09), rgba(122,75,35,0) 62%), radial-gradient(90% 70% at 12% 100%, rgba(122,75,35,.12), rgba(122,75,35,0) 55%), linear-gradient(to bottom, var(--paper), #f5e5c8); border: 3px solid var(--wood); border-radius: 4px; box-shadow: 0 5px 8px rgba(59,35,18,.24), 0 18px 40px rgba(36,25,16,.30), inset 0 0 0 1px rgba(255,255,255,.6); transform: rotate(-.5deg); animation: posterIn .32s cubic-bezier(.2,.9,.25,1) both; scrollbar-width: thin; scrollbar-color: var(--wood) var(--paper); } /* La cornice interna del manifesto */ .panel::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(122,75,35,.5); border-radius: 2px; pointer-events: none; } /* I due chiodi in alto */ .panel::after { content: ""; position: absolute; top: 9px; left: 50%; width: 100%; max-width: 340px; height: 8px; transform: translateX(-50%); background: radial-gradient(circle at 4px 4px, #6b4220 0 3.5px, rgba(0,0,0,0) 4px), radial-gradient(circle at calc(100% - 4px) 4px, #6b4220 0 3.5px, rgba(0,0,0,0) 4px); pointer-events: none; } @keyframes posterIn { from { opacity: 0; transform: rotate(-.5deg) translateY(14px) scale(.97); } to { opacity: 1; transform: rotate(-.5deg) translateY(0) scale(1); } } .panel-mark { width: 54px; height: 54px; margin-bottom: 2px; fill: var(--wood); transform: rotate(180deg); /* il ferro si appende con l'apertura in alto */ } /* Il teschio del Game Over sta dritto */ #overEmoji { transform: none; } .panel h1 { margin: 2px 0 4px; font-size: clamp(1.45rem, 5.4vw, 2rem); line-height: 1.1; letter-spacing: .5px; color: var(--wood); text-wrap: balance; } /* Le due regolette che incorniciano il titolo, come su un vero manifesto */ .panel h1::after { content: ""; display: block; width: 68%; height: 3px; margin: 7px auto 0; background: var(--wood); border-bottom: 1px solid var(--wood); border-top: 3px double var(--wood); opacity: .55; } .tagline { font-size: .88rem; color: var(--ink-muted); margin-bottom: 12px; line-height: 1.5; } .reason { font-size: .95rem; margin: 6px 0 12px; } .note { font-size: .78rem; font-style: italic; color: var(--ink-muted); margin-bottom: 12px; line-height: 1.5; } .rules { list-style: none; text-align: left; display: grid; gap: 8px; margin: 0 0 10px; font-size: .84rem; } .rules li { display: flex; align-items: center; gap: 8px; } .rules li > span:last-child { min-width: 0; line-height: 1.45; } .chip { flex: 0 0 auto; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; font-weight: bold; font-size: .8rem; border: 2px solid var(--wood); } /* Il gettone della legenda è identico a quello in gioco: nessun indizio cromatico */ .chip.token { background: radial-gradient(circle at 34% 28%, #fffaf0, #e0c288); color: var(--ink); } .chip.obs { background: var(--cactus-dk); } .chip.spd { background: var(--wood); } .chip svg { width: 15px; height: 15px; fill: var(--cream); } .controls { font-size: .8rem; line-height: 1.7; margin-bottom: 12px; } .touch-hint { color: var(--ink-muted); } kbd { display: inline-block; padding: 1px 6px; margin: 0 1px; background: var(--paper); border: 2px solid var(--wood); border-bottom-width: 3px; border-radius: 5px; font-size: .78em; font-family: inherit; } .final-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; } .final-stats div { background: rgba(122,75,35,.06); border-bottom: 1px solid rgba(122,75,35,.25); padding: 10px 3px; } .final-stats span { display: block; font-size: .65rem; color: var(--ink-muted); margin-bottom: 4px; } .final-stats strong { font-size: 1.2rem; color: var(--wood); font-variant-numeric: tabular-nums; } /* ---------- Pulsante ---------- */ .btn { font-family: inherit; font-size: 1rem; font-weight: bold; color: var(--cream); background: linear-gradient(#bd5533, var(--terracotta)); border: 3px solid var(--wood); border-radius: 8px; padding: 12px 26px; letter-spacing: .5px; cursor: pointer; box-shadow: 0 3px 0 #743920, 0 6px 10px rgba(59,35,18,.18), inset 0 1px 0 rgba(255,248,233,.2); transition: transform .12s ease, box-shadow .12s ease, filter .15s ease; } @media (hover: hover) { .btn:hover { filter: brightness(1.06); transform: translateY(-1px); } } .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #743920; } .btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; } ::selection { background: var(--wood); color: var(--paper); } /* ---------- Suggerimenti e pausa ---------- */ .footer-hint { font-size: .75rem; color: var(--ink); line-height: 1.6; text-align: center; } #pauseBadge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 30; padding: 10px 24px; font-size: 1.1rem; letter-spacing: 1px; color: var(--cream); background: rgba(59,35,18,.88); border: 3px solid var(--cream); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.4); } #pauseBadge.hidden { display: none; } /* ---------- Schermi piccoli / bassi ---------- */ @media (max-height: 560px) { .hud-title { display: none; } .rules { font-size: .76rem; } .panel-mark { width: 38px; height: 38px; } #field { max-height: 66dvh; min-height: 190px; } } /* Su schermi stretti il campo 16/9 è troppo basso per contenere il manifesto: l'overlay esce dal campo e prende tutta la finestra, così il pulsante di avvio resta sempre raggiungibile senza scorrere. */ @media (max-width: 760px) { .overlay { position: fixed; padding: 16px; } .panel { max-height: calc(100dvh - 32px); } } @media (max-width: 420px) { .hud-label { display: none; } .final-stats { grid-template-columns: repeat(2, 1fr); } .panel { padding: 16px 14px 14px; } .rules { font-size: .8rem; } } /* Chi chiede meno movimento riceve meno movimento. La parallasse e lo scorrimento sono il gioco e restano; si spengono gli effetti ambientali decorativi, che non portano informazione. */ @media (prefers-reduced-motion: reduce) { #field.shake, #player.bump, #player.hurt { animation: none !important; } .heat, .panel, .entity.killer { animation: none; } .btn { transition: none; } } /* ========================================================= SCHERMATA DI CARICAMENTO --------------------------------------------------------- Prima cosa che si vede: l'insegna del gioco su un tramonto del deserto. Riusa i token del cielo di gioco, così il passaggio al campo non è un taglio ma una dissolvenza. ========================================================= */ .loading { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 5vh 5vw; overflow: hidden; background: var(--sky-low); transition: opacity .55s ease, transform .55s ease; } /* A fine caricamento l'overlay si allontana verso l'orizzonte */ .loading.is-done { opacity: 0; transform: scale(1.06); pointer-events: none; } /* ---------- Il cielo, dal chiaro dell'alto al fuoco basso ---------- */ .loading-sky { position: absolute; inset: 0; } .loading-sky::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, #4a2b3f 0%, #8f4a3c 26%, var(--sky-low) 48%, var(--sky-mid) 66%, var(--sky-high) 78%, var(--sand) 78.1%, var(--sand-dark) 100%); } /* Sole basso dietro il logo: alone morbido, respiro lentissimo */ .loading-sun { position: absolute; left: 50%; top: 40%; width: min(78vmin, 520px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, var(--sun-core) 0 26%, var(--sun-glow) 38%, rgba(255,183,119,.55) 56%, rgba(255,183,119,0) 72%); animation: loadSun 6s ease-in-out infinite; } @keyframes loadSun { 0%, 100% { opacity: .82; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } } /* Mesa: due creste piatte in controluce, la vicina più scura. Bastano due gradienti conici a sagomare i profili squadrati. */ .loading-mesa { position: absolute; left: -10%; right: -10%; bottom: 22%; height: 20vmin; } .loading-mesa-far { background: var(--mesa-mid); opacity: .42; clip-path: polygon(0 100%, 0 62%, 8% 62%, 12% 40%, 26% 40%, 30% 66%, 44% 66%, 50% 34%, 66% 34%, 70% 58%, 84% 58%, 88% 44%, 100% 44%, 100% 100%); } .loading-mesa-near { bottom: 18%; height: 15vmin; background: var(--mesa-near); opacity: .75; clip-path: polygon(0 100%, 0 74%, 14% 74%, 18% 46%, 34% 46%, 38% 70%, 58% 70%, 62% 38%, 78% 38%, 82% 62%, 100% 62%, 100% 100%); } /* La striscia di sabbia su cui poggia tutto */ .loading-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(to bottom, var(--sand), var(--sand-dark)); box-shadow: inset 0 3px 0 rgba(255,246,208,.4); } /* Polvere che attraversa la scena: dà movimento senza rubare l'occhio */ .loading-dust { position: absolute; left: -50%; right: -50%; bottom: 21%; height: 16%; background: radial-gradient(circle at 10% 60%, rgba(255,246,208,.30) 0 5px, rgba(0,0,0,0) 6px), radial-gradient(circle at 32% 30%, rgba(255,246,208,.22) 0 8px, rgba(0,0,0,0) 9px), radial-gradient(circle at 55% 70%, rgba(255,246,208,.26) 0 6px, rgba(0,0,0,0) 7px), radial-gradient(circle at 78% 40%, rgba(255,246,208,.18) 0 10px, rgba(0,0,0,0) 11px); background-size: 60% 100%; animation: loadDust 9s linear infinite; } @keyframes loadDust { from { transform: translateX(0); } to { transform: translateX(-60%); } } /* ---------- Blocco centrale: insegna, barra, stato ---------- */ .loading-inner { position: relative; z-index: 1; width: min(680px, 100%); display: grid; justify-items: center; gap: clamp(14px, 3vh, 26px); } /* L'insegna entra come un cartello piantato nella sabbia: arriva dall'alto, rimbalza una volta e poi respira. */ .loading-logo { width: min(100%, 620px); height: auto; filter: drop-shadow(0 10px 18px rgba(48,22,10,.45)); animation: signIn .85s cubic-bezier(.18,.9,.28,1.06) both, signFloat 4.5s ease-in-out 1s infinite; } @keyframes signIn { 0% { opacity: 0; transform: translateY(-34px) scale(.9) rotate(-2.5deg); } 60% { opacity: 1; transform: translateY(6px) scale(1.02) rotate(.8deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } } @keyframes signFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-.6deg); } } /* La barra è un'asse di legno con dentro una corda che si tende */ .loading-track { position: relative; width: min(100%, 420px); height: 20px; border: 3px solid var(--wood); border-radius: 999px; background: linear-gradient(to bottom, #55361c, #6d4423); box-shadow: inset 0 2px 4px rgba(0,0,0,.45), 0 3px 0 rgba(59,35,18,.35), 0 8px 18px rgba(36,25,16,.35); overflow: visible; } .loading-fill { position: absolute; inset: 0; width: 0; border-radius: 999px; background: repeating-linear-gradient(115deg, rgba(255,246,208,.22) 0 10px, rgba(255,246,208,0) 10px 20px), linear-gradient(to bottom, #ffd25e, #e8a33c 55%, var(--terracotta)); background-size: 40px 100%, 100% 100%; box-shadow: 0 0 12px rgba(255,210,94,.55), inset 0 1px 0 rgba(255,255,255,.45); animation: loadStripes .7s linear infinite; } @keyframes loadStripes { from { background-position: 0 0, 0 0; } to { background-position: 40px 0, 0 0; } } /* Il ferro di cavallo in testa alla barra */ .loading-knob { position: absolute; top: 50%; left: 0; width: 34px; height: 34px; display: grid; place-items: center; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fffaf0, #e0c288); border: 3px solid var(--wood); box-shadow: 0 3px 8px rgba(36,25,16,.45); } .loading-knob svg { width: 17px; height: 17px; fill: var(--wood); transform: rotate(180deg); /* aperto verso l'alto, come nel resto del gioco */ animation: knobTrot .5s steps(2, end) infinite; } @keyframes knobTrot { from { transform: rotate(180deg) translateY(0); } to { transform: rotate(180deg) translateY(-1.5px); } } /* ---------- Riga di stato: messaggio a sinistra, percentuale a destra ---------- */ .loading-status { width: min(100%, 420px); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .85rem; color: var(--ink); text-shadow: 0 1px 0 rgba(255,246,208,.75); } .loading-msg { display: inline-block; /* uno span inline ignorerebbe il transform */ font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif; letter-spacing: .3px; } /* Il cambio di messaggio è un piccolo scatto verso l'alto, non una dissolvenza: se le animazioni sono congelate (scheda in background) il testo resta comunque leggibile invece di restare a opacità zero. */ .loading-msg.swap { animation: msgIn .4s cubic-bezier(.2,.9,.25,1); } @keyframes msgIn { from { transform: translateY(7px); } to { transform: translateY(0); } } .loading-pct { font-variant-numeric: tabular-nums; font-size: 1.05rem; font-weight: bold; color: var(--terracotta); } /* Schermi bassi: l'insegna cede spazio alla barra, non viceversa */ @media (max-height: 520px) { .loading-logo { width: min(78%, 420px); } .loading-inner { gap: 12px; } } /* Chi ha chiesto meno movimento vede la stessa scena, ferma. La barra resta l'unica cosa che si muove: è l'informazione. */ @media (prefers-reduced-motion: reduce) { .loading-sun, .loading-dust, .loading-logo, .loading-fill, .loading-knob svg, .loading-msg.swap { animation: none; } .loading { transition: opacity .3s ease; } .loading.is-done { transform: none; } } /* ---------- Interruttore audio ---------- Un bottone di legno inchiodato nell'angolo del campo. Sta sopra agli overlay (z 25 contro 20) perché deve restare raggiungibile anche a partita ferma, quando il manifesto copre tutto il resto. */ .sound-toggle { position: absolute; top: 10px; right: 10px; z-index: 25; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; color: var(--cream); background: linear-gradient(#8b5a2c, var(--wood)); border: 3px solid #5d3a12; border-radius: 10px; cursor: pointer; box-shadow: 0 2px 0 #4a2d10, 0 4px 10px rgba(36,25,16,.35), inset 0 1px 0 rgba(255,248,233,.22); transition: transform .12s ease, box-shadow .12s ease, filter .15s ease; } .sound-toggle svg { grid-area: 1 / 1; /* le due icone si sovrappongono, ne appare una */ width: 19px; height: 19px; fill: currentColor; } .sound-toggle .ico-off { display: none; } .sound-toggle.is-off { color: #e8cfae; filter: saturate(.5); } .sound-toggle.is-off .ico-on { display: none; } .sound-toggle.is-off .ico-off { display: block; } @media (hover: hover) { .sound-toggle:hover { filter: brightness(1.1); transform: translateY(-1px); } .sound-toggle.is-off:hover { filter: saturate(.5) brightness(1.1); } } .sound-toggle:active { transform: translateY(2px); box-shadow: 0 0 0 #4a2d10; } .sound-toggle:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }