/* ============================================================
   ELEMENTAL ARENA — game-like design system (2026-07-15)
   Single, deliberate visual world: a dark neon battle arena.
   Reuses every existing class name so all pages upgrade at once.
   ============================================================ */

@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(data:font/woff2;base64,d09GMgABAAAAAC34ABMAAAAAZvgAAC2NAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGoF/G5sKHCg/SFZBUoRnBmA/U1RBVHQnJgCEWC9gEQgK0jy+JguCeAAwuiIBNgIkA4VsBCAFh0AHg2MbIloF3Bh6twNQJLrWEkW9GpxSk/8PCdoYodTvQG2C2uIDodxM71TXvhkqb92dLLLdjtI+bDqnxphLU6DwoTnyvvn/zuqzbAbZGtcQ4WChZmylKSvX+ZUUt7k5QmOf5MLz3/9c/T6nqq7UjdwYNiEdWtLiQJsBo+LB5onZ31vQ4yrx4Xm3/XkItOX1Q3NgAbk/jhRwlbJc492nQGoIggNEMSVra2NvPznqj7FsoK3557D+t7F+/puzPyOZmUxEgQTLQELFg7ZOddrwXL9ENJdpu2JGdx8rioWKLnWgDVDEgmUiRiAGkyHK3+Nm9x5pQmXjCRXEI4T6KIcQEokgnP80V/6X2Rz8Nz9TQgeoAFVdHSeZu8sVGNbuVhJJAlQgXFVtB+eFnAceVBAoitt+zJE3U5oGgUcWcaYdwjFw5BUA/2dq2v7B3ErLo2wTlxQinwSHTIdePMdUVH5q/frdmVksZgYLgEueCewSjKcn4MCnAxbHd0fwZGNBBQCORzkohECnjEDrkRcVUuqcqhy7FGoXTefOnfvONlapA16bU+sSNEpsvq3v9t/nOwmDs9yZrpJKEBtsKnIrdpM3f7X7MaZWnMnu8o0TCfOUEwj1bedDMBS9/K92BIciihDBkyBkKaCoCERRE4ZilkgUc0SjmCceRb+pKNZToxiUjWIbJSh2VYniQBYUh6hHcQwXigk9fLjYaT4IcDIOUAVSHAQBmvYrBgSE3Nnb5x0YHB4ZG5/2zcz7A8FQOBKLJxaTS8updCabW1mV8jJGWBeEkU9y+aLJXGAtLrdV2B3rNm2ubti1Zz/+g7qsEsLqDRW2mjpQCKynAgE8DSqcoc0KSuF7zIHuJvhiAVovKCDo0Ye2NEHYXX0exYJyscoV+NjEzx8h8veIoWTMaLYa3wNFe+nT+A6lXr44Cr71H93e++Le59DnR/5w39d58MFm2/nIbqqLg4CCHTv9Rdh3/8jsv22+q2r9xzIEJnuqZtRoL9VlCEA4Gjpg7+WRUpXjdRH8W734t/ifgd8t59hO+SW+Gv3X5ZB+emFwiEdgXzwOB2MRDsFSLMOxOBEnYxVWy6zzqC2+cSjwu0MsE7r1OI1DhODankIHLLnPTkyJPolOaH/Vf/haqbt8vI9w5H/k+GYsrCN+M74/PhRHMwvMs1FzVM046FfDX4f+VJx6MfhKAMWC4oCLVJjJp+1ekjJXmGfNo6YYH8JPqgULY8flr5KAqVlO/CBlBsUSFDGeDFmKxvETJJhIiAnEIkSJ9jKZyRIkklNKkkFFQytHrjz5GASrVBkDkypmFlY2dg4N3djRIitt48PO4KtYD7A/IfYlKOaCXwDFkckiYMYFAcvWP+Vo8wNbgT8MtvCUYr2Aa2z5JMZ2gZGjKvwH0KInAV+DNbK4rEQUYTi4ada9HjNIi5QO5pzd5n3bwwbxM/iyTDp3oCJ9uuNpYEvgIHkQ30c+ELvYB5QB+zAU3hLMroCepYQutkJwArZscLYNfg+ETYAsRbXF/YEGzFDjHS3H0OwsxJK/OtmTrYFvQkHGJvy8Ue/9icbIuDc8IabnlIqdcoElQaSUCzqHMjyzNLAwlRN36m+ihdKhQcPE8Dk+w9pWEXUunWUZRL1k4OnfaQg15LUxS8nHi86jlLhZrPwnC7aCXd+RTpYuyLnwjmJ9kdro2u4JflV7i0YFt1dZgVljA0RnYSvcodiFXe977IhOCY5dDskTY311hK8FEfkcOI5Wyi00nCu3iuTWSczKXTloaAUfKG0I2kEez6mzCmPmvDQcAWx5SmjZEy8ckn8+hcuAwLNYPgFdGAh/yWJk+Byg7YIMyza1IjIgvA5b+HmUlejHwwFFJENHR7j2K1B6XWTrsZe05f+yCXka0De7GcWpiHV2MfrE7Xne6P7hELnZYzCUEDlTqfe4IVIa9EtAM6UfKrmDF/0L+4P9oy4I2rAVUtIhpSC9oVNRwFqO/ENAURPAMnYoEWmDy/2zhFNo8JTT1OlZt4Dg1/Ld6bAyVVoKsgzIIBwdVzmuTZ+r5+j8yGfCPQpXXnZbraqBtnJhfYTn4wb00Ql1V2hr8ZTRLK9lGbjvZr5NX4YB/sqWvIMmSTthP1WJIGjAXUcL7hVyumNaJoCtNEw4K8RpZ9bnST7Mb62qCSeZ2WsBmqwlOnet+CeROnL3uLlMXLDBsVwY4VV4AK/B6/CgtbIBh+dq3lTzTpGR7ufyk3wMBRPdoomVy2lTOUA8F84OlEoyWGrySbYOJwSjOgYcNXPP4WTsokMxYR9DE+E8xKzciMVl0sA3zIrHEJuRwNk1SQc2J9QvsgNpl8OXXVehC5yHGPHTwe+PcrPSK5hbcYslg8y0qmT/ZjzPxWIpp+aC6MsgH9wF//0K5t1xsCPzMa6NQ9L8mQcwmgrYle24+5ARYZXx7eGZSuRupN9TcvfBTNxqECVfWibkccEFak2haTKwnBkwYMLcxiZv2JHAPA6gYRuYq4B8EeqamWPd+nVQzQTkStNXMJJwhJ3ZT/4luJ97pMRvu6GGRh/KeuBqVJlL+BaXYQpMgQsdES7hqXg2ruIc6ilW+jf1MEC5BsOZ8yXkhiTta3S0PSBdfhHJDLK9qVfoWHpIAlueCza1k4sjPIQ3Qyt2ZIhbE3lYEugDaC/tRiCteXnEG6iGE3wCPfNAL5NfKmfIL73jz5rOCSzHBRkAG5RmQ6Q1ZgyKd+qBit5wBqAFeuWDrsXQTDqwNEwGVC4AAV6Olgg7YqpusR9og0rZQO347N4J6Szd5+mGvySZow8kcHaKjKsXhAPbXeTWwFvgbdE2rS21jcTvJKw/nvfcjr118uQWOCyeqnwpu9Be0F7wcp2gPUxMI9vbUXQB0y+QBniwHZwPD4kaJO4INxWIQ7nuH7nYy2EZyAljphPn7gWtOh+I/wki3y/Gl51ByoBFFzikNSOccGeJi2cOYADpwildMLctNEfmPDXdRzBwl5eBf5pGMiOJy6RBYpOsAjZLCyO7uxsHZEOGC1ZXQUuFaU+fIrld5kAcJqjXwq7VSxCFGzrPy0YCxxQWbm5uYhRA9ka4jtbuWOneWULi9fEFFqhoHjg6qXyy5WujUgJQp9x5YGtgCyDTBCheIAwCVT4s3j5C8vURygPKwCYXKL1VNJbJWtBtXo0p4cpLgHlFhiFvWb80ZIfb7j11WDHPavUTrdkyCcU58qTGLtxcmOb3N16AwNX7lkwkJiE1Sagw4SJEruKbx4gVJ34ll4rQPlmKVGmmmCp9RZfqsLlOpizZy/pnL1CoSLGStX1PegZG05SrUGlS05d4WR02r6mtq1/nv70bm1zNM1pa3TPbZs2eM3fe/AUL2zsARJhQxoVUVE03TMt2XM8PwihO0iwvyqpu2q4fxmlerpseinXbj/O6n/f7aQnvooAHUUDmHE6sl693wBE9UPHq0xyeg9leywcOL332bMnzdgKFBz0P33JyAoJ7e+lug4Q340Pdh34oVv7swM6t/jsb8UB/WiNg63h+2Y+EVEIv3YTDgQHkv1NoiI+Jn0Vzv2Vw+xYlCRAAHVIvoI6DIEQIUMYHqjinH17vpgBkqIokp1LAB1AR+TXodYAAiMpncl+je1TbvH2dqa8JzFgeQngTFWGHmfvbyzt3vz/9WDlP1Ne39NzmvzooYIAyH5df81wdAgxQ4aEslGK6hY7odMrr3vS286645R8PSGRqsbD6pV7Xm4YyxkT1cr2z3l2fWm/UJ569WjKoi5eqykGdetm09ZF+19wxKHtRCMbbl+od9Sp9pMDA95gA0krCeb9OLdeWwPc/0oQ0Ln0gfSi1TP87/BvcNm2ZNk79PfkIFAPAfo76HngDAHglHMlJmyhFA0A2g+zoz9ptt8xex3XasfKyS+03L7pzLV+h8uja0lDvxP/+9YXle4osv/zXWmGdTV7/JeChWu2kNY7ZpcMe+7zDYzEeiiHEEhCRUPCSVqB3dCcK9Yg8LKUPiveCOYVqab4vOFWqFtNq2T7PKvF0rl6Fd+OVKX1IvT9LNQrnGPUHH0W99IiHjeSLInQSQaTJI6Eo4NwjkRgoPBKLhcIjXhwU6yWRgIEtmfwfuyXLA3AtgJwGuA6SPpD5E5gcyFcAoGjrnUIipRqXZikfviaz9DHopEdpEGQuwm+1QY+soH4JavXqT83u2XnS0jIpZUybFJVapx/moNmJnwSBfRUTN9RxxxjJkcSnOWm4lu0KiV8iTNO2DJ0ZOSfDbcvzMz5pKZmjg1PEhft5ZTw+8i34UaUwKByZT9vzdId/qZpWHM/lXJoLKVXSjkIiSPN0Lm1hcfi1qCV+4bBowcoMd86UrG9PoTA125H7xI7XfcsxabcbFra312rxiGYZvYNbaGanT/KjpmV5Bdc1Wgr9Crz1omx0dpznVdLLA5umv8PATQ1LU+tG6mtM63e/0pqfb3O8yxKtgqtfUd+4JE3Qo1lvyTA8gWzpaQ7O3QXam+LwyT7XJ8XhW580i9a8CpDzcvhy1eRh48sdcVND0PuoscBMdBqxNFMcVJ+bQph1S1mF5T8lFSrK11UYy2KmTIKjhrqWNeo0KEP1YfjShqsoy1eIHqZH8swUV6zaHkuXr6zpjh3pXDtrz59dcGOYH8B6ewk5299vQwff6ibG+tQGRCEZv0966GKnZBP69DY7+Y/+bEbECDty28qQegTxmuvXCqYr9Ya1XLOOq6v2gkWfC6/Whd0EVq0EOyujevbqMLiVcDZenhDYlSHI9iA59+ONwJ4eAanfX08cZPAyw49wp+wpkPaAY0Mme3vJZd3UEtdLK2WC02u++jYbHT/e9L39eTEek1p52xUDWzwoKfMhz7l6r2dT90hRtMOdXS3AaBt4euc2Z1HqreRRLniNX3MOawvnitZQzoxNdIvu65psZcJo2IHd1IhsWSYpmgAHbFpQX01HZZ5+RZkJZwWDWqEGOhdhMmeP9B5cBng0qm5lOpdUee0GmOq3wOObMypoRfTSx6bs/sRI6NPpPJGen+3z8045PO46tAygBo4ij7b9KZfTMCq9WAwqpEYmoXa/fMUqsRDl+sG7obNadalFVDs6t9ktx4SfEb0SJyGra2S5iZl9S+GUCPn6zdiWIS6Za9y2GA58Dj6oMh6ZYJxsEPjqgh6/ZYFcXP7O1OyCR2lCUVbCnJiVmA1kzouz5thnAcoVOhnxfeKYgvq5eLr+jSX4glG/MPj0P4HZq4v4Uh/5eT15MSjYit+04Hw0RC9ZKOdce1ZVazoaDXf0f4vF9Vkla1bEZ5UtzGlk2DAjdAxTkekmrz6l+tZyOUW2ruirGmsNyaY4rFqhjPWZC1BikReXRFSwDDK3lRTN1+jzCEseAuv6h+NjwDWFixuBKoxsFlpocBgEzcMs5hzTkQaqc8sLOZ4DscQxN81U9MR1BtSaKZkqPMQ+k9OyECigmlK/+XKk8GhVpi6fBX9XYJHQC61JEzKioF9lfoJ70oT5aX6gzcThAOHSej6akg4I2s98KUZJA1j2Vbt1va5aiK5Y6MvQUVk7mC5ZegXiclPjmEL5Q5IpnYySM2ksjDPeP5b9wsX+ffKiL+0Qi4USXd+gWhFkPczMX7YUS2QZwvVcJouXLGvof2tjGE6wWfxic4rck2Ljrv7bK5sPMDBN54H1OtCQglhb1D0BAysGpXoZyhr67FyQbHfCYVg0E0bz8odIbC2XG0ZscbIJKc964/W6/ivHnsLgnjUt1NRpstL6Ro/Tp1Mt5XjbLJMgV6CVLZgR/tthC1GyWBGZJwstj76GZ6f7Ktm8nLyks678RLf7uGrjqH1sEcj9imKMogd+LlwrVQt0H91FH86fGfceOo+eQKpRMuSS3JW4hiRGZljsMKbEEAu6lr7bJgAl+jTbyaj+Pk/O/61iNq19kBGZk+ZNGV+yy9dRUVIV2DnCMc4qucrOfrRaKMj6hNbTu5oGVOvU4tRIcZcirWf0vTV1DFK9xlZ5h1H5l26Ib5Kl7IGVMaGpymmEMCGjPfSrrxIf7jmDFC+TUVLES0QSGu9hY/641SlMStrIGHtra41+HZVeT8lqY2opu1rs1wyk9DMd7QySva5oa30ml5dx5ywX7ocTglY3U9kGPQIdP3Ws7m6feU8zt4Ppu2jyeaPE/L/kguR/s2TY6PDptKqGvqDLH/MaLA9t10ebmDf5fkl2/j7e8Yc/1cdWnJwmLWJEj+GQJskoeYjH8e6xIErRrmK8TEY7ejBVxwjstb+Lz3HwfFVzh6uj6sB5RIF3Xj+g7ldXn5JetbGTzL5TWzcgFlSM4QvqH0c+iqzXEBuxR+3eEA0Q5H083b9qXFXVzStAIlytAujJZUl0S8x8ycDTDn0tfYlcknYK+i4xS054ugn0xPhQd7Q/3W+p1ioYmkqTYfaPDyt9dGX0QgkO+XApSy+R8M2SCqZDkgG8TY60oeuy+iK5OOUyuYxN0q7NpUs+JJxLhJal5cSulEoMz+h5MDxPgK2gwCrpkEs6ebPMJ+TJPbb8CNZx36ZhCYvkkES5fF5maYWSU7kK6T7SJ3mjPsihIzqmF6TY0NQL8O49sP9bGnzAfiDlm6Wc1iMZWDJFw7cO/vDQSfHFPDHVoAYOZgEOriKrSqpJNZTQPZeisI/po9voQW/3sc8T92pkQL3LIvjUNw1Vv9JIke45DKmSoVrjvG1LMJjMWRXyjYqfEH2ZnOfSnyOSyo30T/h5Ce/zvBR9Mal05OibwM0iWWqIVw7p4WT4IDGtSh5b07TQF3qzWEoUyyIFeim1+kkkSrcfibx6Oap7ZGoemXdF3fa87BrazX/iaBlCC1eRD5+QJ3O6yYvkYqpgQl2x6fPLkKE1C+7XJ8us0mIYftAae3vf7XV+2XOkZ9p1bfaV22duIxbUYNhgMOV878b7NxqoweB7YZTz/V/e+wVbf8ISdqa/Id8ooSnRI/RMKNH836JlUlyx8apo8pY2+ie29JYi2Z9EDDjxWQ8l2BDxFbUYbsDdtLTh/bvNXqTAl8Clk/WKhiMiImKCX9Hf8G0YNxH0wpamWbq/PDHf/A3Bd0T0hRPEBlln+y+k5iHpDl9H3oqooBNsbgye4t2hyj/erfyimTS/e3sU1ulFToeQEIbIkzWtuMKaYnILXTfOSVx8qYcB6y9uy2bfZX1UbOMQ3C0IC9Q9bfRFuhYjYTj0ZaJG1EC/lUf4cGDgkXDLXB8wush+Iuq5xiCCUXUE6Shhv0UTD7qDfhTO8pBok/jJFOluKR8ofNteAgEsWpp+KNduS8ViXCLVwYVqKB49lEzlnUhos8e7MzLCYUnDv9LRtFXKt+ARHvMtG1pPLgVrWwI7v0a0lO+SvETX0p+2cV4pF2KgT2mLG818PVKsVVx8qjEfO0nHk/h/KeWkDxhu0qRP8EmdSOQXIgoMCfEThQRicyo0sdMWbIwdX7Q5fjfZtTEuqGhT7LT56rjyuSiGwlND2rNuHCcfJx1hko/wKkkzmdPPO0DekXuIJcKl0eKn8Ok25IIPx73pdfWD0+Geachp5d+3scDkvSXlmyUh7OyjW8cJISFIBhE9yolYkaQZwePNEnyUXuLIn+Zfj9JNOclqWJ1nNCSKkFQb2qwaBfoaMcqGo9erbh42TAZK9G9fcGQ60v/GaGVadns/Up+DLCdQPAOZ9h31AwNXW8T+j+rgIqbtUnUOag8UT3CJbd6wl49LJHcgHuqBmXDivaTFWrL2r2/9SK3b4FtLaaOd2OvsrL3Gapa6z96na+maTrazrpN0NrrS++Q+JrSgddmiBSp3vmwFWfGUfepZJU9bL3++zLNs5c8D2wy09L3SR/r+7nuZL97XSlq/kbTzMYoJpuvob/7qrGvmt6daRJx1Fv+vrywD30BQSx+k2wTfIALEPmgn9k+kmxYnMftLBazgyuPaLfzETMyDXoJOK/bsJDt3kV17yd494F07Eww7vtjz9SRn/Qb7Bod811c7vtQ7lDbow1jTxHUifGbz+J+SVBMIj3C/quShG1UZb9dGVZt+tmC7AJt+sSjamEHkf5M0dDul0RF1YZ2TIrOl2ZOCxHFRsolYBWdf+TsNX+oFc4wqSkXmJrVCWirJO4OrAEQMpW36Es6OMomowhAvW+2WVL2PK3DWTOv0hkx7+x7fFS8dm944w7iq5S0fmDV1Pzt1SvFVgIXM73uv+JfHrFbYEDptj0hUZE9ipSt8D67nmuH8NeT4sqKclQUP7zd+ZH4aaXU9A8RwZQO+gyBehK5zkgfNTF4iWC1YZI4XxTOc+wI3Y7VoNY5vVHmgcrUMFl1tAUULPiAfYHJ7IBEjvyUg1l7pakayGrEHVJzXtg8lK4vBP03TU+rT6hG81f+5vzJYyXHBVxpuJncKDDRG43GFTqaRKcLVqdFBS4/AZIV6CppWh+8uDttdPvQXyErAaUABIRvnsLV3b37hHKqd0Gsn0fsi5WI0MhtwCURrTA28XhmD1yljfGxNMvZ7840a3/xCztoJWJOwJrjBWyyxA7xfEeN9itjHtZOsXFwrM+ot6y3rLbPkjDdbSQi6gJJkNTGFX6+dpN4XKRdHVd0OvIp2oAIwWOWg8OvWJMkCm8GNx/FmXLhXT2hyElaZC1xuGSoHp7XyisEyJij8eu0kKRdbNiN3OgCDVQkKv25NkuUsrWYAEyzu9Ft6kqdJNkbyBgcvOp3Bi337UIVc8l8ArHvcevHf9NK/L+/iX3o5AMCUb6lgvPkTK5fW209Tbu75AMn7l+HrQw703hxKymtxE0F6gouQt8uAN1hdsYNPIKqDv0NygYnMAyixOjB/Ui6tsx+f0Fwk5iGB/GAdnVHLIubqAFkKvLCGxP1LF1enwlNm1LIIfTdMsDrBRupoJbtfm4jWwvSPOkAE8FdCS1eNj+YpM8IKs6rn5aAKBR8jFi+LGOwAHTtnizsbOrK2pSNNgFrbNU/L26FTcn/K8D8vpENxxxwi7om4jYa4/YtjaBQgCMjPvQcgvwQSGmQSpciQKV+93V7zjkt+9LtBaVJGSb9oJV8YMYpJbDJPNmRXPHknH+UH+U3+lSHRfBXHdQZ+WF26TW/hw3gET+I5AgjKFAg7sYM4ZoqNybSZ+WaJecA8Zp4xL5keYpZYITFbI/eRR2yhLbUVdobdZd+3HnuRvEr2kgPkKBkiZYVBsUGxW3HQ1blG53ZzXYc76TrdoGKRIoIV1C+D9mBr8HLQErwftAUXKC8VoMkwCYu0g/5SWBkuCc+Ed+gMU8FsZf4QHYhao67oc+Yes8AsMnllufJAXBo7463x6/EHcY9yXCmxJexatobdzR72Rd7gm/xi/4R/zX/gu/x538MGzqayk3vZ5FFe43N+5h/+9eL39Cf8L//frCa1WEsxnc23XXbETtgFu2g37IE9t7f1Wb/MOAxp24k4bUmQ/OtjToT/TAoMzWZZgbJeHoQaHFyd/ESY6mwa2lyXtY3ZXW5sLoOYzBz4No23t48XAj7E+AmJFJdqAiaMqycOgBvJa/WlMB/E4s2ssnoWbsDZji9c0TFR9QVt+KzQXjXWBD4IsNuplWHujZeg24q5yTRDf47AzDDWkUJ61j72URW47JNdXZPyWqKSzFwqvSKplHGVgaYmB4yMgIOEVAdLsH4ptNTMCMqUSxF9aMgFTaROIMUoby6caVa202FnTh/etKn+8QPoF7BFBd6YiBWRywakTM9WCpSpPHYMqcEkIHfsAK0bKASS0qZltmn7AtNhIThJ4Ae160iZMmD63IRfBrDNbS8EMX1GZA8nqgzK4YEZT+fGNxCWnnUTTHUug3RRnhX8C2lqckyuK2UANFjIdZnU5mpCFcLG3hD9mWEmJhwO4T6NwJJOWOTVc8RnCfJlID3nVkbRKJNZQHmSYbXlTsT6lMolDPNgzOUSmrGqKoTfhDqEjY0dHxpgAUueaMZ+w2gOWEuVztylpaXW1tzoBWC/cKDlks/Jv11wZC4Zxp1tbQjvG5Jt5GmhMc8iOWxYVzZB7bcKciOQEmTE5uyUgVwJHye188G6gZJREtAKGeToyuusmnC+4Dac6OozTxISsKeLBkhOqaL2rQpszKVJa6TLhuaklOib3rhRwTiqYAHVbkcRrNpZILl898YCLMFyhehf9zQBNLDJaSsAmSrL9nEFDwZcJOS7HDfu89UKSTM4eIoeDhyCkUpNTbVuUxHbbrtmsrNzUhWYZIo/RyS+ZqxTKfGNn3JnmepBRB4XGxubSc9lkMZpMnJVVbnSxxD6bEtc2jCKoIpopx26oLDLK4kaW0dxOAOGZSdVUFiYEfKbxX6HXRDgryc7AiUN2S93zhnG/7+0dCXnnI818gxqmhxo1aNeVA675+BF7A7qrkq1jGUfIXcICK+FWwh2I/wW1CG4fFyLJPFIaXSvJn9zrcMhIMgnOPSeJBcB8y1gpLHVJDTy5AmEb2tvR3i/M0LxQEa1KGB0+X+kpIOCzs7JBUniOvkmS3c4pj0QFfk4F6Os2hCpBWQGRFL2smxQKKLkjo4J+dWPbg1kebjD1nFkg+yqRfj2p2Q3KVdjpM3GxHEHD3yc0/cGPdORb85Uh/4WzRz/elqS0vM2e2xt4/lmdVa00MDzHHUNB4ZpkwkVUwEK6Y48tyqk1BGzQDE3D4RyHgICCwAGKaWoWUW1d+Y5a/5+OZ53E0aLmG2mSWyN05MThYFOQPhD1lmQpJyw0D2iM4iNiuMdCWqXLwTOhxt6yy87D4WphJWiM5gbbEZCptPO8Xa+wq0UIxno6poCD8BwsXW5mIAxkRcEy5IfT3VZm3V0pz8jyxE/N/Wxdhe8qgKU/jgQnhWLkOZgtGPmRN2woBnyr6ekP0fzoChbTmBVRwoTYafy8AXNWFcBJJXk7HjegZAJ+vGQMkaEfG26EZuGbp+F+uXgTrsdumJc4xE1v/nyEEn2KRRPLL9mBAFzONB1G2qeMj4OhnURjeUWJuyg4ejRilo7Uo/BOB6FgPVZtajKFCO7bCZn7h94pH1B09MTsR1BrO7kWxljEGYkN5hPZwryaaukfLGwxmzbCJ5wPi2lFywyfAW1zxVOYieHXUPVEnBpQxBQ9iFdZWanqdlAm6yvfeTcYZsx13gUOYptzNp6WDqfk+MKmvkIIzGeLEdEme2Vu6ppIoMk5MoArEkw6o0YZtgKjxhsSneaOF7L9wpRIHDgw6rb4ptMAKfcNLUpKtCWhXSeM+eQyacX3Jqx2PyoJTE+PrskZpE2K3pFyUoOR5n6C5Qf7BzsLt2k+49RJVsOdzFW75g/Ei48exTPe5dvnTp1K98px7uxQK65MJ+OiaGlVRBr63S/1bro6+72cbEK4qSxiAVxJwO8fbXUvt5N0R1R8OB79oia7KCAMpMdUnoB2pOoE5YcyI8tgEEe5Ka1yS9XHrSlhLIMJYa7lRFW+VOgdCm1q32KvvXy/IJnaSNEURoTEPzXn3LecSAw1MxJeClqkULxGOF0XU7og9quPnAqPVC+LqexXwYr83WjiObrZ0KKND/ctx6MKl4w2FxYGH4VOVociafVI0ySGuEZkScgfLPH49NenucMTdtBrSZGyDIlq3d0Pjx7DUe91v3wGDxG3Tpzqmj229QomwjxNp4XkEJdrZwPZQRFJjRfWapuzn4Vz7RzwzN/PKkjfXtCCLajQGhE5iew/jvf2ZvS2GrFzvdBJ7Zs7kwrFZq7Vmx9fTNkOvGSQOxt3BsOe7X1hguUxRUVOZu8hktiVpbFxZERiIlw5JRTK2BK87t/N3ntUwsNR47Ybra03Az3t7b2244grdEyHIiX/ZZS4ZB33uvmaEsjz8n8vfLydAHyu2bF2OLS8gpFYerYIoCI/tn9u3ZX44U47IfHZQ+VXSPvz8L+Rrld2zjkrMqkExV0a5EobEP4ydK7ZnJuM22pif6lQ7LHM50qL1fz9u3ufIcyB4x0UqT4qJKY0ekd3l0Qcsl0k8mSEiXhdpHcQvleskuNWdBe8fx8WiJ93ZALvMFXO2etNUCsEkBN/2rZKhHhe9BcMtdcxli9YgAIcBanK3kFwBoPJeXS8ehSjkqpaHRPEEpSrT1DEmezZYwfzRBocDcpBr6kCEcZIgQtr21XiQHPZHvfeae3hCVMpWRIjEbFIXuP7FfaWcy1PM/pRDGGzSWJOmJbgZVA0x/q8zWFLwGPtq0Jii87qzVBNaLz+d27uSJaEkgd1dbg6Ao88zGtMKICiSqmUShbbFFnhqPH6Odf0Ly2WL6TpsLrKOE1Lyh02Xz49g36nOv49N14vutwYgTBFnAMFfQYKJZxIa/V1O+PyAj/c4B78fg9Zqt/qz5btqWuTjtzGrAgFYmYedjBYkMP0loT5D3ByyyrHy9eIrn4mnAXH80krdkcYeYHbt9eekdlCWsfQFXZvT43jucdjjx9N71ktS6l7243HyIKmzYtTkBRIrFjR+GGL+0AM1iR7saN5YFrGmsyadFcG1i68T7UTwoPgEYiC6g0N7i6Gp5zNpxpAyoQiJmj0VXy9OWb6w8dut7CCaggmdy589o1nU7kS9PaSBsnEM027Oxk4Qjp8kaIUZZdmDchnQz0prqQfgsZGkK4k1XyvHAdwdbjW6cYP49p6e2gUGSw7AFldI/BjcepAUR2X+PjUABFAwn7OqIu2tjX0unytQ179zasNTGgrnVKC4223/0ERsAiQ/gkitmSQKojz1hvbWz8mb9F1nq33mhZTVkLA9Dd7Qsx6zg+rgylOoJ2nbFumcl3p1J9nFfm2LOnoSH8HusdOr6+ThnxdUOgqDgrWWhUIf349/B7CNnDd6kpWMVfLQOlKvZxNCnB7OONa5fWHjlHCMt3/tFD/Einmpvqf8gbnIc4rvYbP/sZe3Mhlb8wNr8snSdgdmNGLVQP22uGfJ+p8hffqvsZMzh0ru2rBhyLTvr9OZFyLX9UcX0uuXouxFEmeYbvNx0lt+Gsv5uEvy3Mlm9vtZCL7dVIqpjw4G6CL1KZ0fX0qpHQwP6KkURGl9XYxGSLTCIB9VkSTFDfkGvZoA+6DUbLYOlwueibjy0fLh3kHFNUoYNeLH0vFBUjaq+QSZFfoPZx5J1srlv4M3JI7uTR8yVjAj9Ve53GDsu3UTOqMZOTz5j68Q3JI6VGahdxQ+6UmmihhzKW3rX2j84HQ+GWm6lWRmfv9VpXIhW2pPVGy5tMs4ap7utERsqWU5H0XCSLINbPz0bmLkx32WBbtL+IfM9ez3V1TeWO8pw8rKPufbsFYmqRgvQHJ5gX4ssffjiob1A0LLsJ/hFroFmZC1wIXbkSst7lYUvM3n+lgncg6CxxFlLjdo19fBEwC2v+WUllOTsjQbVGLKvYYS8TNU5Bn0yWyeMsu5pln5fLk8kLSYFP0KgZ/VwxvbZ+/ipqeeKIHDYBgfnFlCiJvrAzCMZbwgi0Iqy4WKCnpqrhtk0XE1Cdh1itiGj276wDniemtfWCE224FY7QpFRSitjiCpvFoNNNd6iI0eLExLC3dLWZKtSqDYm9ga5Bh1oTsURLXhRFm5bR0XU4k5Mwm3c9s6HkDjzwg9O93ac/+OnOjd1fF2cnRp91YlYc9fkDPf2+UXHXrvufbX2WZ+/ftZksvg6bBbTPyeRvJ0QxGE+HEumMe+Z0IpSOB0W0vnu36/m3Pa3fft61ej3LZopWtck6Pt9qUluNahYdqav7h7/yXB2dvOr51b4uR4EvbNKoAhyXzJ+Y26SAChuLoKfAG6YxcDoOGP1GJBoMbilKwszZ15itW2N7yhsUyCEmYLGYC0pWCXK0QBLffdHnnzeFL+a83twawNCfpqvFSAvTpq/lSgNMXRyeCsVjsVZ32IX+4g37r0VLSyg0PDzY3+/lDsoVcqVsFFlaWrmNR/42Aamo1LK7tKxJzgTiK0JBPh3r7fXd6UbzOz74isOxvnbSF0XqD7aosZ+/erX3PLddJURs5trmYcypXp0gyYIH4zxZOy+qHxmZToyGFmEEKt57724u+iJ2+W8g/n32dTRaVPrKSr3KLg8Py3aXy9Rze8obLD8Q71RPj8EQvPbGG9eC7nEePHZdj+Z3r2DNe33nzD455ATI7x/77LM3iyJHv6Bav5RRec3QDlReLHzqqWU24kWJQ7fvXzGMbac+9Yrgn54yiwxKlcyfJUg8L/+Bf7iHH8YyzNhC6d0s/iwQloNn+uhdZvgPX0Wjmfw1H31P5K3F47dew/0+0AR9EDSO+O7lsTEtjxSLLzu9BvPU6zVho/NPS55BFMyrvdTcx1NrvmAQ2VPhRjPechbFewnSmjEVfQ9APBkDz5R35Me6KZ+fj3kLwD0zZjGA59/Y38mHl3KbmXOAAAVA4Ef/E25/Uv9L6KPv5Rfr2vkP8+hIvdO226AcFWmjJBlHpSG1z+FC36RbCllSXKYBpHfsMohNRc1orOkmZUa50EHJo3qbU1AWvJhQzHggt0ypf/mJfYC5JPMHk84efrGRETvhiN9RChL7Jnne2U3RPTTetyRC18Hxfb0SdpkdFD0pqnspecnbQ1NQEi3kR/hnD3e5RU3sJjOAsm+Tz8qHHmcXeXdSpoSFLukRP2pS4us9vEXTxh+/E8ckbIxtt2hk36UczW7PFSizlpRJda/Dlz3lpHQrHzOQmUKiy6z6hMU6eDqyN6Ua2Htyj5vYI8allY3zB4ETgrgjCDTCSQV5/EmOhPGRkJhxKCMksTxW9XOUozyHsTQQ1wqVOkkcH2XcpLmLA0KDG2SmMKnzkYwQaW8TkdPG2kyXoshTjF1o5zfojlyDJ78XMF8SPyqU46EYNcl5S4z/FFrzgN5H/WgV6gH9vzw5XgawTRq1LpmSd9j8RpotxPmPb7skDgVci8VjEHcepKZ2VQkHg9gY+CJfy5CQ5u2QkpP/S9MqQ8hST2nI0ZVUHsyUoCNy9Pt5ikCGZ1Altn2ipDwQMqQ+DFkirgg5io6GAjx/lWE9hlBEzfxQzFTlIU8XVShhOtGfX4YqsL0W1ezcWrg0iaHhZGHVoLuZZie4xchd6T3YjuOrfnJZNRrZD1SIbHwmm15mqWzGlUz9FtygpX2fjXS/0WJ3s1Rxha2sWthH3K2DsVq5U3LX5AurE6dYlgKHiPC6SLylWugHsqWcZBSKJYgVX+tPLl6LuDz7xy1NkWJFMqXV9CcqF0jtph6YE26buKJ1ssnESodQM5s7WSK4wyCtZSm1mYB62t6IWGT/rNbg1rFnpWaqpmIrl0ZxyVQNZ5MWp7xmhmrruR6nRpERm2XDuiNbuynbzs8Ry8qlfrJFLBonKLW+1H+RVCwOL4+ytVeCR+ZaYLpvfKVaN6seG4UJZxMhUo2vfavvZ5/Mf8ZZ55zfu8Rr0/fr1a/OBb1ObWHa/KJL6l3exsT/SDvSsWvg5NCk0cEgXUE29zQ+YzeTe4V7m1L1zC1NfHaSczYr8bkpfnpnk1wVNl+owyLt25su/0/vmr5X6oEbS0C3CU7i8j9Sh60whoCiDKPIsB+zdCr0XqW4Jkzw8HxP+LXFmGGM8+VD/+oiJjGRxXCmGcGPLVE1XHESSCiRxOL5Ja11rrrlmutu32YeZ4+P37CIm3lqi+sd505ctDz+19xqa/5PtNwIy8Ez3cLQrd5j3g2x+0in7bB7lwE=) format('woff2');
}

:root {
  color-scheme: dark;   /* audit 2026-07-25: native inputs render dark, no white boxes */
  --bg: #0a0d13;
  --bg-raised: #121826;
  --bg-card: rgba(24, 31, 47, 0.72);
  --bg-card-solid: #181f2f;
  --border: #283246;
  --border-glow: #38506e;
  --text: #eaf0f8;
  --text-dim: #8b97ab;
  --accent: #3fe0ff;
  --accent-2: #7a5cff;
  --gold: #ffce3a;
  --danger: #ff5a6a;
  --ok: #59d98e;

  --fire: #ff6a2b;
  --water: #3d8bff;
  --air: #8fe0ff;
  --earth: #c69a5b;
  --lightning: #ffd23d;
  --ice: #4ff0ea;
  --poison: #b96bff;

  --font-display: 'Orbitron', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius: 14px;
  --ring: 0 0 0 2px var(--accent) inset, 0 0 18px -2px var(--accent);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Ambient arena background: fixed layered energy glows + faint grid + vignette.
   Two drifting radial fields give the page depth without touching content. */
body::before, body::after {
  content: ""; position: fixed; inset: -20%; z-index: -2; pointer-events: none;
}
body::before {
  background:
    radial-gradient(42vw 42vw at 18% 12%, rgba(63,224,255,0.16), transparent 60%),
    radial-gradient(48vw 48vw at 85% 8%, rgba(122,92,255,0.15), transparent 60%),
    radial-gradient(50vw 50vw at 70% 95%, rgba(185,107,255,0.12), transparent 62%),
    radial-gradient(46vw 46vw at 10% 88%, rgba(61,139,255,0.12), transparent 62%);
  animation: arena-drift 26s ease-in-out infinite alternate;
}
body::after {
  z-index: -1;
  background-image:
    linear-gradient(rgba(63,224,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63,224,255,0.035) 1px, transparent 1px);
  background-size: 46px 46px; background-position: center;
  mask-image: radial-gradient(120vw 90vh at 50% 0%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(120vw 90vh at 50% 0%, #000 30%, transparent 85%);
  opacity: 0.6;
}
@keyframes arena-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.06); }
}

a { color: var(--accent); text-decoration: none; transition: color .15s, text-shadow .15s; }
a:hover { text-decoration: none; text-shadow: 0 0 12px rgba(63,224,255,0.55); }

/* ---------------- Top bar ---------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px; position: sticky; top: 0; z-index: 20;
  background: rgba(10,13,19,0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(63,224,255,0.10), 0 8px 30px -18px rgba(0,0,0,0.9);
}
.topbar .brand {
  font-family: var(--font-display); font-weight: 800; font-size: 1.12rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: linear-gradient(92deg, var(--accent), #bfe9ff 40%, var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(63,224,255,0.35));
}
.topbar nav { display: flex; align-items: center; flex-wrap: wrap; }
.topbar nav a {
  margin-left: 6px; padding: 6px 11px; border-radius: 9px;
  color: var(--text-dim); font-size: 0.92rem; font-weight: 600;
  transition: color .15s, background .15s, box-shadow .15s;
}
.topbar nav a:hover { color: var(--text); background: rgba(63,224,255,0.10); text-shadow: none; }

.wallet-chip {
  display: inline-flex; gap: 10px; align-items: center;
  padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: rgba(20,26,40,0.8); font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.wallet-chip:hover { border-color: var(--accent); box-shadow: 0 0 16px -4px var(--accent); }
.wallet-sparks { color: var(--gold); font-weight: 700; }
.wallet-energy { color: var(--accent); font-weight: 700; }
.wallet-verified { color: var(--ok); font-weight: 700; }

.economy-panel {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; margin-bottom: 20px; backdrop-filter: blur(8px);
}
.economy-panel .row { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.economy-stat { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.economy-stat small { display: block; font-size: 0.72rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }

.page { max-width: 980px; margin: 0 auto; padding: 24px 16px 72px; }
/* Staggered entrance for top-level page blocks. */
.page > * { animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }
.page > *:nth-child(2) { animation-delay: .04s; }
.page > *:nth-child(3) { animation-delay: .08s; }
.page > *:nth-child(4) { animation-delay: .12s; }
.page > *:nth-child(5) { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.footer {
  text-align: center; color: var(--text-dim); padding: 28px; font-size: 0.85rem;
  border-top: 1px solid var(--border); margin-top: 40px;
  font-family: var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem;
}

h1 { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; margin: 0 0 10px; letter-spacing: 0.01em; text-wrap: balance; }
h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin: 28px 0 12px; letter-spacing: 0.02em; }
h3 { text-wrap: balance; }
p { color: var(--text-dim); }

/* ---------------- Hero (premium redesign 2026-07-22) ---------------- */
.hero {
  position: relative; text-align: center; padding: 48px 20px 40px;
  border-radius: 22px; margin-bottom: 28px; overflow: hidden;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 30px 80px -50px rgba(169,112,255,0.5);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 50% -10%, rgba(169,112,255,0.20), transparent 62%);
}
.hero h1 {
  position: relative; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.05;
  letter-spacing: -0.01em; text-transform: none;
  background: linear-gradient(96deg, #ff6a2b, #a970ff 48%, #46d6e6);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(169,112,255,0.30)); animation: grad 7s ease infinite;
}
.hero p { position: relative; max-width: 600px; margin: 12px auto 22px; font-size: 1.05rem; color: #c2ccdb; }

/* ---------------- Buttons ---------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 12px; border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(40,50,70,0.9), rgba(24,31,47,0.9));
  color: var(--text); cursor: pointer; font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.01em; overflow: hidden; isolation: isolate;
  transition: transform .12s, box-shadow .18s, border-color .18s, background .18s;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.28) 50%, transparent 80%);
  transform: translateX(-120%); transition: opacity .2s;
}
.btn:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 24px -8px rgba(63,224,255,0.6); text-decoration: none; }
.btn:hover::before { opacity: 1; animation: shine .7s ease; }
.btn:active { transform: translateY(0); }
@keyframes shine { to { transform: translateX(120%); } }
.btn.primary {
  background: linear-gradient(90deg, #ff6a2b, #a970ff); background-size: 180% auto;
  color: #fff; border-color: transparent;
  box-shadow: 0 10px 26px -10px rgba(169,112,255,0.7);
}
.btn.primary:hover { transform: translateY(-2px); background-position: 100%;
  box-shadow: 0 14px 34px -10px rgba(169,112,255,0.9); filter: brightness(1.05); }
.btn.danger { border-color: var(--danger); color: var(--danger); background: rgba(255,90,106,0.08); }
.btn.danger:hover { box-shadow: 0 8px 24px -8px rgba(255,90,106,0.6); border-color: var(--danger); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.small { padding: 7px 13px; font-size: 0.85rem; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }

/* ---------------- Selectable tiles ---------------- */
.element-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 12px; margin: 12px 0 22px; }
.element-tile, .beast-tile, .gender-tile {
  position: relative; border: 1.5px solid var(--border); border-radius: 14px;
  padding: 15px 10px; text-align: center; cursor: pointer;
  background: linear-gradient(180deg, rgba(30,38,56,0.7), rgba(18,24,38,0.7));
  font-weight: 700; transition: transform .14s, border-color .18s, box-shadow .2s;
}
.element-tile:hover, .beast-tile:hover, .gender-tile:hover {
  transform: translateY(-3px);
  border-color: var(--tile-color, var(--accent));
  box-shadow: 0 10px 26px -12px var(--tile-color, var(--accent)), 0 0 0 1px var(--tile-color, var(--accent)) inset;
}
.element-tile input, .beast-tile input, .gender-tile input { display: none; }
.element-tile.selected, .beast-tile.selected, .gender-tile.selected {
  border-color: var(--tile-color, var(--accent));
  box-shadow: 0 0 0 2px var(--tile-color, var(--accent)) inset, 0 0 26px -6px var(--tile-color, var(--accent));
  background: linear-gradient(180deg, color-mix(in srgb, var(--tile-color, var(--accent)) 16%, rgba(30,38,56,0.7)), rgba(18,24,38,0.7));
}
.beast-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; margin: 12px 0 22px; }
.beast-tile { font-size: 0.85rem; }
.beast-tile .beast-icon { display: block; font-size: 1.7rem; line-height: 1.2; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
.beast-tile .beast-label { display: block; margin-top: 3px; text-transform: capitalize; }
.gender-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0 22px; max-width: 440px; }
.gender-tile .gender-icon { display: block; font-size: 1.5rem; line-height: 1.2; }
.gender-tile .gender-label { display: block; margin-top: 3px; text-transform: capitalize; font-size: 0.85rem; }
.gender-tile.selected { color: var(--accent); }

.trait-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 22px; }
.trait-chip {
  border: 1px solid var(--border); border-radius: 999px; padding: 7px 15px; cursor: pointer;
  background: rgba(24,31,47,0.7); font-size: 0.9rem; font-weight: 600; transition: all .15s;
}
.trait-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.trait-chip.selected { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 16px -4px var(--accent), 0 0 0 1px var(--accent) inset; }

/* ---------------- Cards ---------------- */
.card {
  position: relative; background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--card-color, var(--border));
  border-radius: var(--radius); padding: 18px; margin-bottom: 14px;
  backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%);
  transition: transform .16s, box-shadow .22s, border-color .2s;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px;
  background: var(--card-color, transparent);
  box-shadow: 0 0 16px 0 var(--card-color, transparent); opacity: 0.9;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -22px rgba(0,0,0,0.9), 0 0 30px -18px var(--card-color, var(--accent)); }
.card h3 { margin: 0 0 4px; font-size: 1.12rem; }
.card .lore { font-style: italic; color: var(--text-dim); margin: 6px 0 10px; }
.card .stat-row { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.9rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.card .skills { margin-top: 10px; font-size: 0.9rem; }
.card .skill { display: flex; justify-content: space-between; padding: 4px 0; border-top: 1px dashed var(--border); }
.card .rarity-common { color: var(--text-dim); }
.card .rarity-rare { color: var(--accent); }
.card .rarity-epic { color: var(--lightning); font-weight: 800; text-shadow: 0 0 12px rgba(244,217,43,0.5); }

.sprite-wrap { display: flex; justify-content: center; margin-bottom: 10px; position: relative; }
.sprite-wrap.summoning { min-height: 120px; }
.summon-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 0.85rem; text-align: center; color: var(--text-dim); }
.sprite-wrap.summon-failed .summon-status { color: var(--danger); }
.summon-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(63,224,255,0.15); border-top-color: var(--accent); animation: summon-spin 0.8s linear infinite; box-shadow: 0 0 18px -4px var(--accent); }
@keyframes summon-spin { to { transform: rotate(360deg); } }
.sprite { image-rendering: pixelated; image-rendering: crisp-edges; border-radius: 12px; background: #05070c; border: 1px solid var(--border); box-shadow: 0 0 30px -12px var(--card-color, var(--accent)); }
.sprite.placeholder { opacity: 0.85; }

/* ---- Aliveness wave A (audit 2026-07-21): the characters themselves move. */
/* Idle breathing bob, staggered per card so a grid breathes asynchronously
   (the pitch deck's trick, amplitude kept small: the GIF bobs internally). */
@keyframes idle-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.sprite, .sprite-mini { animation: idle-bob 4.2s ease-in-out infinite; }
.card:nth-child(2n) .sprite, .card:nth-child(2n) .sprite-mini { animation-delay: -1.4s; }
.card:nth-child(3n) .sprite, .card:nth-child(3n) .sprite-mini { animation-delay: -2.6s; }
/* p2 faces its opponent (it used to lunge AWAY from the fight). Composed with
   the bob via a wrapper-free trick: mirrored bob keyframes. */
@keyframes idle-bob-flip { 0%,100% { transform: translateY(0) scaleX(-1); } 50% { transform: translateY(-5px) scaleX(-1); } }
.sprite.facing-left { animation-name: idle-bob-flip; }
/* Impact: hit shake + attack lunge on the whole card. */
@keyframes card-shake { 0%,100% { transform: translateX(0); } 15%,45%,75% { transform: translateX(-7px); } 30%,60%,90% { transform: translateX(6px); } }
@keyframes card-lunge { 0%,100% { transform: translateX(0); } 35% { transform: translateX(14px) scale(1.02); } }
.card.anim-hit { animation: card-shake 0.5s ease-in-out; }
.card.anim-attack { animation: card-lunge 0.55s ease-out; }
/* Floating damage number. */
@keyframes dmg-rise { 0% { opacity: 0; transform: translateY(6px) scale(0.8); } 15% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 0; transform: translateY(-42px) scale(1); } }
.dmg-float { position: absolute; top: 20%; left: 50%; margin-left: -12px; font-weight: 800; font-size: 1.5rem; color: var(--danger); text-shadow: 0 2px 8px rgba(0,0,0,0.7); animation: dmg-rise 0.9s ease-out forwards; pointer-events: none; z-index: 5; }
/* Element FX overlay on the defender (the Phase-3 GIF packs, finally on web). */
.fx-overlay { position: absolute; inset: 0; margin: auto; width: 160px; height: 160px; pointer-events: none; z-index: 4; mix-blend-mode: screen; }
/* VS pulse + battle ending. */
@keyframes vs-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.vs-label { animation: vs-pulse 1.6s ease-in-out infinite; }
@keyframes winner-ring { 0% { box-shadow: 0 0 0 0 rgba(255,214,90,0.8); } 100% { box-shadow: 0 0 40px 14px rgba(255,214,90,0); } }
.card.winner-glow { animation: winner-ring 1.2s ease-out 3; border-color: #ffd65a; }
.card.loser-dim .sprite { filter: grayscale(0.7) brightness(0.75); transition: filter 1.2s ease; }
/* Level-up moment (character page). */
@keyframes levelup-pop { 0% { opacity: 0; transform: scale(0.6); } 30% { opacity: 1; transform: scale(1.15); } 70% { transform: scale(1); } 100% { opacity: 0; } }
.levelup-banner { position: fixed; top: 24%; left: 50%; transform: translateX(-50%); font-size: 2rem; font-weight: 800; color: #ffd65a; text-shadow: 0 2px 16px rgba(0,0,0,0.8); animation: levelup-pop 2.4s ease-out forwards; pointer-events: none; z-index: 50; }
@media (prefers-reduced-motion: reduce) {
  .sprite, .sprite-mini, .vs-label { animation: none; }
  .sprite.facing-left { transform: scaleX(-1); }
}
.sprite-mini { image-rendering: pixelated; image-rendering: crisp-edges; border-radius: 6px; background: #05070c; border: 1px solid var(--border); vertical-align: middle; margin-right: 6px; }
.battle-vs-mini { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.replay-controls { flex-wrap: wrap; margin-bottom: 10px; }
.replay-controls span { color: var(--text-dim); font-size: 0.9rem; min-width: 110px; text-align: center; }

.tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; border: 1px solid var(--tag-color, var(--border)); color: var(--tag-color, var(--text-dim)); margin-right: 4px; letter-spacing: 0.02em; box-shadow: 0 0 14px -6px var(--tag-color, transparent); }

.rank-badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 800; font-size: 0.8rem;
  font-family: var(--font-display); color: #04121a; background: var(--accent); margin-left: 4px;
  box-shadow: 0 0 16px -4px var(--accent); font-variant-numeric: tabular-nums;
}
.rank-badge.rank-first { background: linear-gradient(180deg, #ffe89a, var(--gold)); color: #2a1e00; box-shadow: 0 0 20px -3px var(--gold); }

/* ---------------- Forms ---------------- */
form.stacked label { display: block; margin: 12px 0 5px; font-size: 0.9rem; color: var(--text-dim); font-weight: 600; }
form.stacked input[type=text], form.stacked input[type=password], form.stacked input[type=number], .practice-controls select, .action-row select, .action-row input, form.stacked select {
  width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: rgba(10,13,19,0.7); color: var(--text); font-size: 1rem; transition: border-color .15s, box-shadow .15s;
}
form.stacked input:focus, .practice-controls select:focus, .action-row select:focus, .action-row input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(63,224,255,0.18);
}


/* audit 2026-07-25: global input baseline — messages/market/devices/settings
   inputs used to render as bright native OS controls on the dark UI and zoom
   on iOS focus. Only base styling; the form.stacked rule still refines. */
input[type=text], input[type=password], input[type=number], input[type=time],
input[type=email], textarea, select {
  font-size: 1rem;
  color: var(--text);
  background: rgba(10,13,19,0.7);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }

/* ---------------- Battle ---------------- */
.hpbar { position: relative; height: 16px; border-radius: 9px; background: rgba(10,13,19,0.8); overflow: hidden; border: 1px solid var(--border); }
.hpbar > div { height: 100%; background: linear-gradient(90deg, #2ecf7a, var(--ok)); box-shadow: 0 0 14px -2px var(--ok); transition: width 0.4s cubic-bezier(.2,.7,.2,1); position: relative; }
.hpbar > div::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); transform: translateX(-100%); animation: hp-shimmer 2.4s ease-in-out infinite; }
@keyframes hp-shimmer { to { transform: translateX(100%); } }
.hpbar.low > div { background: linear-gradient(90deg, #ff3b52, var(--danger)); box-shadow: 0 0 14px -2px var(--danger); }

.battle-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: start; margin-bottom: 22px; }
.battle-vs .vs-label { align-self: center; font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--gold); text-shadow: 0 0 20px rgba(255,206,58,0.6); letter-spacing: 0.04em; }
.battle-sidepanel { position: sticky; top: 60px; z-index: 5; background: linear-gradient(180deg, var(--bg) 70%, transparent); padding: 8px 0 12px; }
.mana-line { color: var(--text-dim); font-size: 0.9rem; margin: 2px 0 0; font-variant-numeric: tabular-nums; }

.log { background: rgba(10,13,19,0.7); border: 1px solid var(--border); border-radius: 12px; padding: 14px; max-height: 340px; overflow-y: auto; }
.log .round { margin-bottom: 12px; padding-left: 10px; border-left: 2px solid var(--border); }
.log .round .rnum { color: var(--accent); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-display); }
.log .round p { color: var(--text); margin: 3px 0; }

.practice-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.action-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.action-row select, .action-row input[type=range] { width: auto; }
.action-toggle { display: flex; gap: 4px; }
.action-toggle .btn.selected { background: linear-gradient(180deg, #5fe6ff, var(--accent)); color: #04121a; border-color: transparent; box-shadow: 0 0 16px -4px var(--accent); }
.mana-budget { font-weight: 800; margin: 10px 0; font-variant-numeric: tabular-nums; }
.mana-budget.over { color: var(--danger); }
.deadline { color: var(--text-dim); min-height: 1.2em; }
.deadline.urgent { color: var(--danger); font-weight: 800; }

/* ---------------- Tables ---------------- */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table th, table td { text-align: left; padding: 10px; border-bottom: 1px solid var(--border); }
table th { color: var(--accent); font-weight: 700; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-display); }
table tbody tr { transition: background .15s; }
table tbody tr:hover { background: rgba(63,224,255,0.05); }

.flash { background: var(--bg-card); border: 1px solid var(--accent); border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; box-shadow: 0 0 24px -10px var(--accent); backdrop-filter: blur(8px); }
.flash.error { border-color: var(--danger); color: var(--danger); box-shadow: 0 0 24px -10px var(--danger); }

/* ---------------- Setup / help ---------------- */
details.setup-card { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 12px; }
details.setup-card summary { cursor: pointer; font-weight: 700; color: var(--accent); list-style: none; padding: 6px 0; user-select: none; }
details.setup-card summary::-webkit-details-marker { display: none; }
details.setup-card summary::before { content: "\25B8"; display: inline-block; margin-right: 8px; transition: transform 0.15s ease; }
details.setup-card[open] summary::before { transform: rotate(90deg); }
.setup-intro { margin: 8px 0 12px; }

/* Homepage transparent emotion showcase (2026-07-22). */
.emotion-showcase{display:flex;justify-content:center;gap:min(5vw,40px);flex-wrap:wrap;margin:6px 0 18px}
.emotion-showcase img{width:clamp(90px,15vw,130px);height:auto;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.45));animation:showcase-float 4.4s ease-in-out infinite}
.emotion-showcase img:nth-child(2){animation-delay:-1.1s}
.emotion-showcase img:nth-child(3){animation-delay:-2.2s}
.emotion-showcase img:nth-child(4){animation-delay:-3.3s}
@keyframes showcase-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-13px) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.emotion-showcase img{animation:none}}

/* Homepage "what your companion can do" feature grid (2026-07-22). */
.feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px; margin: 10px 0 6px;
}
.feature-card {
  background: var(--card, rgba(255,255,255,0.03));
  border: 1px solid var(--border, rgba(255,255,255,0.09));
  border-radius: 14px; padding: 16px 18px;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.feature-card:hover {
  transform: translateY(-3px); border-color: var(--border-glow, rgba(63,224,255,0.4));
  box-shadow: 0 10px 30px -14px var(--accent, #3fe0ff);
}
.feature-emoji { font-size: 1.7rem; line-height: 1; letter-spacing: 2px; margin-bottom: 8px; }
.feature-card h3 { color: var(--text); margin: 2px 0 6px; font-size: 1.05rem; }
.feature-card p { margin: 0; color: var(--text-dim); font-size: 0.92rem; line-height: 1.5; }

.setup-steps { margin: 8px 0 0; padding-left: 0; list-style: none; counter-reset: step; }
.setup-steps > li { margin-bottom: 14px; color: var(--text-dim); position: relative; padding-left: 46px; }
.setup-steps > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 0.85rem;
  color: var(--accent); background: rgba(63,224,255,0.10); border: 1px solid var(--border-glow);
  box-shadow: 0 0 16px -6px var(--accent);
}
.setup-steps > li strong { color: var(--text); }
.setup-steps > li h3 { color: var(--text); margin: 2px 0 4px; font-size: 1.06rem; }
.setup-steps > li p { margin: 0 0 6px; }
.setup-journey { margin-top: 16px; }
.setup-journey > li { margin-bottom: 22px; }
.setup-examples, .setup-troubleshooting { margin: 6px 0 0; padding-left: 20px; }
.setup-examples li, .setup-troubleshooting li { margin-bottom: 6px; color: var(--text-dim); }
.setup-examples li strong, .setup-troubleshooting li strong { color: var(--text); }

code.copybox {
  display: block; margin: 6px 0; padding: 10px 14px; background: rgba(5,7,12,0.8);
  border: 1px solid var(--border); border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem;
  color: var(--accent); word-break: break-all; user-select: all; cursor: pointer; position: relative;
}
code.copybox:hover { border-color: var(--accent); box-shadow: 0 0 18px -8px var(--accent); }
code.copybox.copied::after { content: "copied"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 0.7rem; color: var(--ok); font-family: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 600px) {
  .battle-vs { grid-template-columns: 1fr; }
  .battle-sidepanel { position: static; top: auto; z-index: auto; }
  /* Nav (2026-07-24 redesign): primary links hide on mobile; the burger
     menu takes over. Wallet chip compacts. */
  .topbar { flex-wrap: nowrap; align-items: center; gap: 8px; padding: 8px 12px; }
  .topbar .brand { flex: 0 0 auto; font-size: 1rem; }
  .nav-primary { display: none; }
  .burger-menu { display: block; }
  .wallet-chip .wallet-energy { display: none; }  /* keep chip tight on phones */
  .page { padding: 16px 12px 56px; }
  .hero { padding: 32px 14px; }
  .card { padding: 14px; }
  .card .stat-row { gap: 8px 14px; }
  table th, table td { padding: 7px; font-size: 0.85rem; }
  .grid { grid-template-columns: 1fr; }
  .practice-controls select, .practice-controls .btn { width: 100%; margin-bottom: 6px; }
  .beast-tiles { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
  /* --- Premium landing (lx-*) mobile tuning: tighter rhythm, no overflow --- */
  .lx-hero { padding: 36px 14px 16px; }
  .lx-section { margin: 46px 0 4px; }
  .lx-cta { gap: 8px; }
  .lx-btn { padding: 12px 18px; }
  .lx-creatures { gap: 12px; margin-top: 16px; }
  .lx-battle { gap: 14px; min-height: 0; margin: 16px 0 4px; }
  .lx-fighter { width: clamp(88px, 30vw, 150px); }
  .feature-grid { gap: 10px; }
  .lx-emos { gap: 6px; }
}

/* ------------------------------------------------------------------ */
/* Unified sign-in (2026-07-15): Google/Telegram buttons + "or" divider */
/* on /login and /create, and the sign-in-methods list on /me/settings. */
/* ------------------------------------------------------------------ */
.auth-methods {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 0 0 6px;
}
.auth-methods .auth-btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}
/* The Telegram widget renders its own iframe button; center it. */
.auth-methods iframe {
  margin: 0 auto;
}
.or-divider {
  display: flex;
  align-items: center;
  text-align: center;
  gap: 12px;
  color: var(--text-dim);
  font-size: 0.85rem;
  margin: 16px 0;
}
.or-divider::before,
.or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.signin-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.signin-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.signin-list li:last-child { border-bottom: none; }
.signin-name {
  font-weight: 600;
  min-width: 130px;
}
.signin-status { color: var(--text-dim); }
.signin-status.linked { color: var(--ok); }
.signin-inline {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}
.signin-inline input {
  width: 120px;
}

/* ============================================================
   Premium landing redesign (2026-07-22) — glass, morphing
   aurora blobs, gradient buttons, parallax, scroll-reveal.
   Prefixed .lx-* / .glass / .reveal so it never fights the app.
   ============================================================ */

/* Glass nav */
.topbar{position:sticky;top:0;z-index:40;background:rgba(10,12,20,.55);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.07)}
/* "Coming soon" marketing link — a subtle gradient pill so it reads as a CTA
   among the plain nav links, on every arena page. */
.nav-soon{border:1px solid rgba(169,112,255,.5);border-radius:100px;padding:4px 12px!important;
  color:#d7c3ff!important;background:linear-gradient(90deg,rgba(255,106,43,.14),rgba(169,112,255,.16));
  font-weight:600;white-space:nowrap}
.nav-soon:hover{border-color:rgba(169,112,255,.85);color:#fff!important;
  box-shadow:0 6px 18px -8px rgba(169,112,255,.7)}

/* Morphing aurora background */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aurora .blob{position:absolute;width:50vw;height:50vw;border-radius:42% 58% 63% 37%/45% 45% 55% 55%;
  filter:blur(75px);opacity:.42;mix-blend-mode:screen;animation:morph 18s ease-in-out infinite}
.aurora .b1{top:-8vw;left:-6vw;background:#ff6a2b;animation-delay:0s}
.aurora .b2{top:6vw;right:-8vw;background:#46d6e6;animation-delay:-6s}
.aurora .b3{bottom:-12vw;left:30vw;background:#a970ff;animation-delay:-12s}
@keyframes morph{
  0%,100%{border-radius:42% 58% 63% 37%/45% 45% 55% 55%;transform:translate(0,0) rotate(0deg) scale(1)}
  33%{border-radius:63% 37% 40% 60%/54% 62% 38% 46%;transform:translate(4vw,3vw) rotate(60deg) scale(1.08)}
  66%{border-radius:37% 63% 56% 44%/62% 40% 60% 38%;transform:translate(-3vw,5vw) rotate(120deg) scale(.94)}
}

/* Hero */
.lx-hero{position:relative;text-align:center;padding:56px 20px 28px;margin-bottom:14px}
.lx-eyebrow{display:inline-block;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:#c9a7ff;border:1px solid rgba(169,112,255,.4);border-radius:100px;padding:5px 14px}
.lx-h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.1rem,6vw,3.8rem);line-height:1.05;
  letter-spacing:-.01em;margin:16px auto 10px;max-width:14ch;text-wrap:balance;color:var(--text)}
.lx-grad{background:linear-gradient(96deg,#ff6a2b,#a970ff 48%,#46d6e6);-webkit-background-clip:text;background-clip:text;
  color:transparent;background-size:200% auto;animation:grad 7s ease infinite}
@keyframes grad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.lx-sub{color:var(--text-dim);font-size:clamp(1.02rem,2.2vw,1.24rem);max-width:640px;margin:0 auto 20px}
.lx-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:6px}

/* Gradient buttons (premium) */
.lx-btn{border-radius:12px;font-weight:700;padding:13px 24px;transition:transform .16s,box-shadow .16s,filter .16s}
.lx-btn.primary,.btn.primary.lx-btn{border:none;color:#fff;
  background:linear-gradient(90deg,#ff6a2b,#a970ff);background-size:180% auto}
.lx-btn.primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px #a970ff;filter:brightness(1.06);background-position:100%}
.lx-btn.ghost{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:var(--text)}
.lx-btn.ghost:hover{transform:translateY(-2px);border-color:rgba(169,112,255,.5);box-shadow:0 12px 30px -14px #a970ff}

/* Hero floating creatures with element glow */
.lx-creatures{display:flex;justify-content:center;gap:min(4vw,30px);flex-wrap:wrap;margin-top:26px;will-change:transform}
.lx-creature{position:relative;width:clamp(94px,16vw,146px);animation:lxfloat 5.2s ease-in-out infinite}
.lx-creature:nth-child(2){animation-delay:-1.3s}.lx-creature:nth-child(3){animation-delay:-2.6s}.lx-creature:nth-child(4){animation-delay:-3.9s}
.lx-creature::before{content:"";position:absolute;inset:12% 8% 6% 8%;border-radius:50%;filter:blur(26px);opacity:.6;z-index:0}
.lx-creature.fire::before{background:#ff6a2b}.lx-creature.ice::before{background:#46d6e6}
.lx-creature.poison::before{background:#a970ff}.lx-creature.lightning::before{background:#f4c430}
.lx-creature img{position:relative;z-index:1;width:100%;height:auto;filter:drop-shadow(0 12px 22px rgba(0,0,0,.5))}
@keyframes lxfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}

/* Section headings */
.lx-section{text-align:center;font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2.1rem);margin:74px 0 4px;letter-spacing:-.01em}
.lx-section-sub{text-align:center;color:var(--text-dim);max-width:620px;margin:0 auto 12px}

/* Emotion gallery */
.lx-emos{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin:24px 0 6px}
.lx-emo{position:relative;text-align:center;padding:14px 6px 10px;border-radius:18px;transition:background .2s}
.lx-emo:hover{background:rgba(255,255,255,.04)}
.lx-emo .lx-halo{position:absolute;left:50%;top:44%;width:70%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;filter:blur(26px);opacity:.5;z-index:0}
.lx-emo img{position:relative;z-index:1;width:100%;max-width:118px;height:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.4));animation:lxwob 3.6s ease-in-out infinite}
.lx-emo:nth-child(2n) img{animation-delay:-1.1s}.lx-emo:nth-child(3n) img{animation-delay:-2.2s}
.lx-emo span{position:relative;z-index:1;display:block;margin-top:4px;font-size:.82rem;color:var(--text-dim);font-weight:600}
@keyframes lxwob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-9px) rotate(1.5deg)}}

/* Battle tableau */
.lx-battle{position:relative;display:flex;align-items:center;justify-content:center;gap:min(10vw,90px);margin:24px 0 6px;min-height:220px}
.lx-fighter{position:relative;width:clamp(120px,24vw,188px)}
.lx-fighter::before{content:"";position:absolute;inset:14% 6% 8% 6%;border-radius:50%;filter:blur(30px);opacity:.55;z-index:0}
.lx-fighter.fire::before{background:#ff6a2b}.lx-fighter.lightning::before{background:#f4c430}
.lx-fighter img{position:relative;z-index:1;width:100%;height:auto;filter:drop-shadow(0 14px 26px rgba(0,0,0,.5))}
.lx-fighter.left img{transform:scaleX(-1);animation:lxlunge 2.4s ease-in-out infinite}
.lx-fighter.right img{animation:lxreel 2.4s ease-in-out infinite}
@keyframes lxlunge{0%,100%{transform:scaleX(-1) translateX(0)}40%{transform:scaleX(-1) translateX(18px)}}
@keyframes lxreel{0%,100%{transform:translateX(0) rotate(0)}42%{transform:translateX(14px) rotate(4deg)}}
.lx-vs{position:relative;z-index:2;font-family:var(--font-display);font-weight:900;font-size:clamp(1.6rem,5vw,2.6rem);
  background:linear-gradient(90deg,#ff6a2b,#f4c430);-webkit-background-clip:text;background-clip:text;color:transparent;animation:lxvs 1.5s ease-in-out infinite}
@keyframes lxvs{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}

/* Glassmorphism surfaces */
.glass{background:rgba(255,255,255,.045)!important;
  backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid rgba(255,255,255,.09)!important}
.feature-card.glass:hover{transform:translateY(-4px);border-color:rgba(169,112,255,.42)!important;box-shadow:0 16px 40px -18px #a970ff}

/* Scroll-reveal transitions */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .aurora .blob,.lx-creature,.lx-emo img,.lx-fighter img,.lx-vs,.lx-grad{animation:none}
  .lx-fighter.left img{transform:scaleX(-1)}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ============================================================
   ORB-OPEN intro reveal (2026-07-22) — our capture orb cracks
   open on first visit and reveals the site. Original IP: dark
   sphere, element-colored ring, violet core (NOT a pokeball).
   ============================================================ */
body.orb-locked{overflow:hidden}
.orb-intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:radial-gradient(60% 60% at 50% 45%,#12101d,#05060b 70%);
  transition:opacity .55s ease}
.orb-intro.gone{opacity:0;pointer-events:none}
.orb{position:relative;width:min(46vw,220px);aspect-ratio:1}
.orb-glow{position:absolute;inset:-30%;border-radius:50%;
  background:radial-gradient(circle,rgba(169,112,255,.55),transparent 62%);
  filter:blur(14px);animation:orbpulse 1.2s ease-in-out infinite}
@keyframes orbpulse{0%,100%{transform:scale(.94);opacity:.7}50%{transform:scale(1.06);opacity:1}}
/* Two shell halves that together form ONE sphere. Fix 2026-07-25: each half used
   to paint its own full radial gradient, so the top highlight repeated on the
   bottom half and the orb read as two stacked lumps with a doubled shadow at the
   seam. The gradient is now sized to the WHOLE sphere (200% of a half's height)
   and anchored top/bottom, so the shading is continuous across the equator. */
.orb-half{position:absolute;left:0;width:100%;height:50%;overflow:hidden;z-index:2;
  background-image:
    radial-gradient(60% 42% at 34% 20%, rgba(255,255,255,.34), transparent 60%),
    radial-gradient(120% 120% at 42% 26%, #574e73 0%, #2c2542 46%, #120f1c 100%);
  background-size:100% 200%, 100% 200%;
  transition:transform 1s cubic-bezier(.55,-0.25,.3,1), opacity .8s ease}
.orb-half.top{top:0;border-radius:50% 50% 0 0 / 100% 100% 0 0;
  background-position:top, top}
.orb-half.bottom{bottom:0;border-radius:0 0 50% 50% / 0 0 100% 100%;
  background-position:bottom, bottom}
/* one contact shadow + rim light for the whole ball, not per half */
.orb::after{content:"";position:absolute;left:50%;bottom:-9%;width:70%;height:12%;
  transform:translateX(-50%);border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);filter:blur(5px)}
.orb::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:5;
  pointer-events:none;box-shadow:inset 0 0 30px rgba(0,0,0,.5),
  inset 0 -14px 26px -10px rgba(150,120,255,.35)}
.orb-intro.open .orb::before,.orb-intro.open .orb::after{opacity:0;transition:opacity .4s}
/* single subtle split line at the equator */
.orb-seam{position:absolute;top:50%;left:6%;width:88%;height:2px;transform:translateY(-50%);z-index:3;
  border-radius:2px;background:linear-gradient(90deg,transparent,rgba(230,220,255,.85),transparent);
  box-shadow:0 0 16px rgba(169,112,255,.7);transition:opacity .5s ease}
/* tidy element-color ring wrapping the core (the clean brand mark, not a smear) */
.orb-ring{position:absolute;top:50%;left:50%;width:40%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:3;
  border-radius:50%;padding:3px;
  background:conic-gradient(from -90deg,#ff6a2b,#f4c430,#7bd66a,#46d6e6,#5aa8ff,#a970ff,#ff6a2b);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  box-shadow:0 0 22px rgba(169,112,255,.5);animation:orbspin 6s linear infinite;transition:opacity .5s ease}
@keyframes orbspin{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* glowing violet core gem */
.orb-core{position:absolute;top:50%;left:50%;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:4;
  border-radius:50%;background:radial-gradient(circle at 38% 32%,#f2e6ff,#a970ff 52%,#5b2a9e);
  box-shadow:0 0 26px rgba(169,112,255,.95);animation:orbpulse 1.2s ease-in-out infinite}
/* white burst */
.orb-flash{position:absolute;top:50%;left:50%;width:10px;height:10px;transform:translate(-50%,-50%);
  border-radius:50%;background:#fff;opacity:0;z-index:5}
/* --- open sequence --- */
.orb-intro.open .orb-half.top{transform:translateY(-140vh) rotate(-10deg)}
.orb-intro.open .orb-half.bottom{transform:translateY(140vh) rotate(10deg)}
.orb-intro.open .orb-seam,.orb-intro.open .orb-ring{opacity:0}
.orb-intro.open .orb-core{animation:coreburst .5s ease-out forwards}
.orb-intro.open .orb-flash{animation:flashburst .6s ease-out forwards}
@keyframes coreburst{0%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-50%) scale(3);opacity:0}}
@keyframes flashburst{0%{opacity:0;transform:translate(-50%,-50%) scale(1)}
  30%{opacity:.95;transform:translate(-50%,-50%) scale(38)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(60)}}


/* Beast rank badges (owner 2026-07-23): C..SSS ladder; SSS gets the gold glow. */
.rank-tag{font-weight:800;letter-spacing:.04em}
.rank-C{--tag-color:#8b93a3}.rank-B{--tag-color:#6fb96f}.rank-A{--tag-color:#46d6e6}
.rank-S{--tag-color:#a970ff}.rank-SS{--tag-color:#ff8a3c}
.rank-SSS{--tag-color:#f4c430;box-shadow:0 0 12px rgba(244,196,48,.65);
  background:linear-gradient(90deg,rgba(244,196,48,.25),rgba(255,138,60,.25))}


/* ============================================================
   Top-bar nav redesign (owner 2026-07-24: "I hate it in both
   desktop and mobile view"). Primary destinations inline on
   desktop; personal links live in an account dropdown; mobile
   gets a real hamburger panel. <details>-based = zero-JS-required,
   keyboard accessible; the tiny script just closes on outside tap.
   ============================================================ */
.topbar{display:flex;align-items:center;gap:14px}
.topbar .brand{font-weight:800;letter-spacing:-.01em;white-space:nowrap}
/* The navbar now carries every DESTINATION (owner 2026-07-27), which is a lot of
   links -- so it wraps rather than overflowing, tightens its padding, and hides
   the lowest-priority items first as the window narrows. */
/* `.topbar nav` (0,1,1) sets flex-wrap:wrap earlier in this file and outranks a
   bare `.nav-primary` (0,1,0) -- which is why the bar grew a second row at
   1200px however many times nowrap was declared. Scoped to outrank it. */
.topbar nav.nav-primary{display:flex;align-items:center;gap:1px;margin-left:4px;
  flex-wrap:nowrap;min-width:0}
.nav-primary a,.nav-primary .nav-group>summary{
  padding:7px 10px;border-radius:10px;font-weight:600;font-size:.94rem;
  color:var(--text-dim);transition:color .15s,background .15s;white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;list-style:none}
.nav-primary a:hover,.nav-primary .nav-group>summary:hover{
  color:var(--text);background:rgba(255,255,255,.06)}
.nav-primary .nav-group>summary::-webkit-details-marker{display:none}
.nav-primary .nav-group[open]>summary{color:var(--text);background:rgba(255,255,255,.08)}
.nav-primary .nav-group .menu-panel{right:auto;left:0;min-width:190px}
/* the current page reads as current -- with 9 links you need to know where you are */
.nav-primary a[aria-current="page"]{color:var(--text);background:rgba(169,112,255,.16)}
.nav-primary .nav-unread{margin-left:2px}
/* Progressive disclosure, in reverse priority order. The rule that makes this
   SAFE rather than lossy: the burger comes back the moment the first link is
   hidden, so a link that leaves the bar is still one tap away. Without that, the
   first version of this made Market unreachable between 600px and 1040px --
   exactly the width of a small laptop. Verified at 6 widths by the nav test. */
@media (max-width:1200px){
  .burger-menu{display:block}
  .nav-primary .nav-soon{display:none}
}
@media (max-width:1120px){ .nav-primary a[href="/market"]{display:none} }
@media (max-width:1030px){ .nav-primary a[href="/guide"]{display:none} }
@media (max-width:950px){ .nav-primary a[href="/me/contacts"]{display:none} }
@media (max-width:870px){ .nav-primary .nav-group{display:none} }
@media (max-width:790px){ .nav-primary a[href="/me/messages"]{display:none} }
.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav-login{white-space:nowrap}

/* wallet chip: one tidy pill */
.wallet-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:100px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font-size:.88rem;
  white-space:nowrap}
.wallet-chip:hover{border-color:rgba(169,112,255,.5)}
.wallet-gems{color:#7ee0ff}

/* dropdown machinery (details/summary) */
.nav-menu{position:relative}
.nav-menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:5px;
  padding:6px;border-radius:10px;user-select:none}
.nav-menu>summary::-webkit-details-marker{display:none}
.nav-menu>summary:hover{background:rgba(255,255,255,.06)}
.nav-menu[open]>summary{background:rgba(255,255,255,.08)}
.menu-caret{font-size:.7rem;color:var(--text-dim)}
.avatar-dot{position:relative;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:.85rem;color:#fff;
  background:linear-gradient(135deg,#ff6a2b,#a970ff)}
/* Unread-messages badges (audit 2026-07-25 P2 — nav had no unread indicator). */
.nav-unread-dot{position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;
  background:#ff5a5f;border:2px solid rgba(16,18,30,.96);box-sizing:content-box}
.nav-unread{display:inline-block;margin-left:6px;min-width:18px;padding:0 6px;border-radius:99px;
  font-size:.68rem;font-weight:800;line-height:18px;text-align:center;color:#fff;background:#ff5a5f}
.nav-unread[hidden],.nav-unread-dot[hidden]{display:none}
.menu-panel{position:absolute;right:0;top:calc(100% + 8px);min-width:215px;z-index:60;
  display:flex;flex-direction:column;padding:6px;border-radius:14px;
  background:rgba(16,18,30,.96);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 44px -12px rgba(0,0,0,.65);
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
.menu-panel a{display:block;padding:10px 12px;border-radius:9px;color:var(--text);
  font-weight:500;white-space:nowrap}
.menu-panel a:hover{background:rgba(169,112,255,.14)}
.menu-head{padding:8px 12px 4px;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-dim)}
.menu-sep{height:1px;margin:5px 8px;background:rgba(255,255,255,.08)}

/* burger icon */
.burger{display:flex;flex-direction:column;gap:4px;padding:4px 2px}
.burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--text);
  transition:transform .2s,opacity .2s}
.burger-menu[open] .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger-menu[open] .burger span:nth-child(2){opacity:0}
.burger-menu[open] .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Desktop: burger hidden, primary shown. 1201px, NOT 601px -- this rule sits
   after the progressive-disclosure block above and was overriding it, so between
   601px and 1200px the burger stayed hidden while links were being hidden from the
   bar, and /market simply could not be reached on a small laptop. */
@media (min-width: 1201px){
  .burger-menu{display:none}
  .menu-panel{animation:menuIn .16s ease}
}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* mobile: full-width panel under the bar */
@media (max-width: 600px){
  /* phones: primary links live in the burger panel only. !important because a
     cascade subtlety kept the unscoped flex rule winning in some engines. */
  nav.nav-primary{display:none !important}
  .menu-panel{position:fixed;left:10px;right:10px;top:56px;min-width:0}
  .menu-panel a{padding:13px 14px;font-size:1.02rem}
  .account-menu .menu-caret{display:none}
  /* login + account both live in the burger panel on phones -- keeping the
     inline ones caused overlap over the burger (caught by UI test). */
  .nav-login{display:none}
  .account-menu{display:none}
  .nav-right{gap:6px;min-width:0}
  .wallet-chip{overflow:hidden;text-overflow:ellipsis}
}

/* Shop item art (2026-07-24) */
.item-art{display:grid;place-items:center;margin:2px 0 10px}
.item-art img{width:110px;height:110px;object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.item-art-sm img{width:64px;height:64px}


/* Platform modal (2026-07-24): replaces native browser confirm() everywhere. */
.arena-modal{border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:22px 22px 18px;
  max-width:400px;width:calc(100vw - 48px);color:var(--text);
  background:rgba(16,18,30,.97);box-shadow:0 24px 70px -18px rgba(0,0,0,.8)}
.arena-modal::backdrop{background:rgba(4,6,12,.66);backdrop-filter:blur(6px)}
.arena-modal .am-title{font-weight:800;font-size:1.08rem;margin-bottom:8px}
.arena-modal .am-body{color:var(--text-dim);font-size:.95rem;line-height:1.5;margin-bottom:16px}
.arena-modal .am-actions{display:flex;gap:10px;justify-content:flex-end}


/* Reforging egg (owner 2026-07-24): shown wherever the sprite would be while
   a merge's art regeneration runs; hatches when the new form is ready. */
.egg{position:relative;width:96px;height:116px;margin:6px auto;
  border-radius:50% 50% 50% 50%/62% 62% 40% 40%;
  background:radial-gradient(circle at 36% 28%, #fdfaf2, #d9d2c2 55%, #a89f8a);
  box-shadow:0 0 26px var(--egg-glow, #a970ff), inset -8px -10px 22px rgba(0,0,0,.25);
  animation:eggwob 2.8s ease-in-out infinite}
.egg-shine{position:absolute;top:16%;left:24%;width:22%;height:16%;border-radius:50%;
  background:rgba(255,255,255,.85);filter:blur(2px)}
@keyframes eggwob{0%,100%{transform:rotate(-3deg)}12%{transform:rotate(3deg)}
  24%{transform:rotate(-2deg)}36%,90%{transform:rotate(0)}}
.egg.egg-sm{width:64px;height:78px}

/* ============================================================
   Public experience refinement (2026-08-19)
   Faster browsing, clearer decisions, and keyboard-safe controls.
   ============================================================ */

.skip-link {
  position: fixed; left: 14px; top: 10px; z-index: 10000; padding: 9px 14px;
  border-radius: 10px; color: #061017; background: var(--accent); font-weight: 800;
  transform: translateY(-160%); transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); outline-color: #fff; }
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
#main-content:focus { outline: none; }
[hidden] { display: none !important; }

.page-hero { padding: 34px 20px; margin-bottom: 22px; }
.page-hero h1 { margin-top: 5px; }
.page-hero p { margin-bottom: 0; }
.section-kicker {
  display: inline-block; color: #cdbaff; font-size: .7rem; font-weight: 800;
  letter-spacing: .13em; line-height: 1.3; text-transform: uppercase;
}
.hero-meta, .lx-proof {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 18px;
}
.hero-meta span, .lx-proof span {
  padding: 6px 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px;
  color: var(--text-dim); background: rgba(255,255,255,.035); font-size: .8rem;
}
.hero-meta strong, .lx-proof strong { color: var(--text); }
.lx-proof { margin: 12px 0 0; }

/* Compact, readable live-battle feed. The whole row is now the target. */
.battle-feed { display: grid; gap: 9px; }
.battle-feed-card { display: block; color: var(--text); margin: 0; padding: 12px 14px; }
.battle-feed-card:hover { text-shadow: none; }
.battle-feed-card .stat-row { align-items: center; }
.battle-feed-card .battle-vs-mini { margin-right: auto; }
.battle-feed-vs { color: var(--gold); font-family: var(--font-display); font-size: .7rem; }
.battle-result { color: var(--text); font-weight: 700; }
.battle-round { color: var(--text-dim); }

/* Shared collection controls: Arena and Shop stay useful as their data grows. */
.collection-toolbar {
  position: sticky; top: 66px; z-index: 15; display: flex; align-items: center; gap: 9px;
  margin: 0 0 16px; padding: 10px; border: 1px solid rgba(255,255,255,.1);
  border-radius: 15px; background: rgba(13,17,27,.9); box-shadow: 0 14px 36px -24px #000;
  backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25);
}
.collection-toolbar label { margin: 0; }
.collection-toolbar .search-control { flex: 1 1 220px; }
.collection-toolbar input[type=search], .collection-toolbar select {
  width: 100%; min-height: 42px; margin: 0; padding: 8px 11px; border-radius: 10px;
  color: var(--text); background: rgba(5,8,14,.72); border: 1px solid var(--border);
}
.collection-toolbar select { min-width: 148px; text-transform: capitalize; }
.collection-toolbar input[type=search]:focus, .collection-toolbar select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(63,224,255,.13); outline: 0;
}
.collection-count {
  flex: 0 0 auto; padding: 0 4px; color: var(--text-dim); font-size: .82rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.arena-onboarding {
  display: flex; align-items: center; gap: 18px; margin: 0 0 28px; padding: 17px 18px;
  border: 1px solid rgba(63,224,255,.2); border-radius: 15px;
  background: linear-gradient(110deg, rgba(63,224,255,.08), rgba(169,112,255,.07));
}
.arena-onboarding > div { flex: 1; }
.arena-onboarding strong { display: block; margin: 2px 0; font-size: 1.05rem; }
.arena-onboarding p { margin: 0; font-size: .9rem; }
.fighter-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: stretch; }
.fighter-entry { display: flex; min-width: 0; flex-direction: column; }
.fighter-entry .character-card { flex: 1 1 auto; }
.fighter-entry .challenge-btn { width: 100%; justify-content: center; margin-top: -4px; }
.character-card--compact { display: flex; flex-direction: column; min-height: 100%; }
.character-card--compact .sprite-wrap { margin-bottom: 8px; }
.character-card--compact .sprite { width: 108px; height: 108px; }
.character-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }
.character-tags .tag { margin: 0; }
.character-card--compact .lore {
  display: -webkit-box; min-height: 4.35em; margin-bottom: 12px; overflow: hidden;
  -webkit-box-orient: vertical; -webkit-line-clamp: 3;
}
.character-card--compact .stat-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: auto;
}
.character-card--compact .stat-row > span {
  padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.035); font-size: .78rem;
}
.character-card--compact .rank-badge { padding: 1px 6px; font-size: .68rem; }
.character-profile-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 11px; font-size: .86rem;
  font-weight: 800;
}

.empty-state {
  padding: 34px 22px; border: 1px dashed rgba(255,255,255,.16); border-radius: 16px;
  text-align: center; background: rgba(255,255,255,.025);
}
.empty-state strong { display: block; color: var(--text); font-size: 1.05rem; }
.empty-state p { max-width: 470px; margin: 5px auto 0; }
.empty-state-icon { display: block; margin-bottom: 8px; font-size: 2rem; }
.empty-state-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 16px; }

/* Shop cards surface the decision-making information instead of raw key names. */
.shop-toolbar { margin-top: 22px; }
.catalog-section { margin-top: 30px; }
.section-heading-row {
  display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 12px;
}
.section-heading-row h2 { margin: 3px 0 0; }
.section-heading-row > p { max-width: 420px; margin: 0; text-align: right; font-size: .88rem; }
.shop-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.shop-card { display: flex; min-width: 0; min-height: 100%; flex-direction: column; padding: 16px; }
.shop-card.rarity-legendary { border-color: rgba(244,196,48,.48) !important; }
.shop-card.rarity-epic { border-color: rgba(169,112,255,.42) !important; }
.shop-card .item-art { margin: -2px 0 8px; }
.shop-card .item-art img { width: 104px; height: 104px; }
.item-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.item-card-head h3 { margin: 0; font-size: 1.02rem; }
.rarity-label {
  color: #9aa6bd; font-size: .66rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase;
}
.rarity-legendary .rarity-label { color: #f4c430; }
.rarity-epic .rarity-label { color: #b98cff; }
.rarity-rare .rarity-label { color: #46d6e6; }
.item-lore { min-height: 2.9em; margin: 6px 0 10px !important; }
.item-effects { display: flex; flex-wrap: wrap; gap: 5px; }
.item-effects span {
  padding: 3px 7px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-dim); background: rgba(5,8,14,.42); font-size: .7rem;
}
.item-effects .item-slot { color: var(--accent); text-transform: capitalize; }
.item-supply { margin: 9px 0 0 !important; color: var(--gold) !important; font-size: .76rem !important; }
.item-supply.sold-out { color: var(--danger) !important; font-weight: 800; }
.item-card-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 14px;
}
.item-card-footer form { margin: 0; }
.item-price { color: var(--text); font-size: .82rem; white-space: nowrap; }

/* Character creation: native inputs remain keyboard-focusable under the tiles. */
.element-tile input, .beast-tile input, .gender-tile input, .trait-chip input {
  display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; opacity: 0;
}
.element-tile:has(input:focus-visible), .beast-tile:has(input:focus-visible),
.gender-tile:has(input:focus-visible), .trait-chip:has(input:focus-visible) {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.forge-form > h2 { margin-bottom: 2px; }
.choice-hint { margin: 0 0 10px; color: var(--text-dim); font-size: .88rem; }
.selection-count {
  display: inline-block; margin-left: 8px; color: var(--accent); font-family: var(--font-body);
  font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.trait-chip.unavailable { opacity: .38; cursor: not-allowed; transform: none; }
.forge-form #archetype { width: 100%; max-width: 360px; }
.forge-submit { justify-content: center; min-width: 240px; margin-top: 28px; }

@media (max-width: 700px) {
  .collection-toolbar { position: static; flex-wrap: wrap; }
  .collection-toolbar .search-control { flex-basis: 100%; }
  .collection-toolbar label:not(.search-control) { flex: 1 1 135px; }
  .collection-toolbar select { min-width: 0; }
  .collection-count { flex-basis: 100%; text-align: right; }
  .arena-onboarding { align-items: stretch; flex-direction: column; }
  .arena-onboarding .btn { justify-content: center; }
  .section-heading-row { align-items: start; flex-direction: column; gap: 5px; }
  .section-heading-row > p { text-align: left; }
}

@media (max-width: 600px) {
  .page-hero { padding: 28px 16px; }
  .page-hero h1 { font-size: clamp(1.9rem, 9vw, 2.5rem); }
  .hero-meta span, .lx-proof span { font-size: .74rem; }
  .lx-proof { gap: 6px; }
  .fighter-grid, .shop-grid { grid-template-columns: 1fr; }
  .character-card--compact .lore { min-height: 0; -webkit-line-clamp: 2; }
  .character-card--compact .sprite { width: 100px; height: 100px; }
  .battle-feed-card .stat-row { display: grid; grid-template-columns: 1fr auto; }
  .battle-feed-card .battle-vs-mini { grid-column: 1 / -1; }
  .item-lore { min-height: 0; }
  .forge-submit { width: 100%; margin-top: 26px; }
}

/* ============================================================
   Profiles, battles, and sign-in refinement (2026-08-19)
   The high-intent game surfaces now read as purpose-built screens.
   ============================================================ */

/* Character profile */
.profile-hero {
  position: relative; display: grid; grid-template-columns: 260px minmax(0, 1fr);
  grid-template-areas: "portrait intro" "stats stats" "progress progress";
  gap: 24px 30px; padding: 28px; overflow: hidden; border: 1px solid rgba(255,255,255,.11);
  border-radius: 24px; background:
    radial-gradient(500px 300px at 8% 12%, color-mix(in srgb, var(--character-color) 19%, transparent), transparent 68%),
    linear-gradient(145deg, rgba(29,36,53,.9), rgba(14,18,29,.86));
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 30px 80px -52px var(--character-color);
}
.profile-portrait { grid-area: portrait; position: relative; display: grid; min-height: 260px; place-items: center; }
.profile-aura {
  position: absolute; width: 220px; height: 220px; border-radius: 50%; pointer-events: none;
  background: color-mix(in srgb, var(--character-color) 20%, transparent);
  filter: blur(30px); opacity: .75;
}
.profile-sprite { position: relative; width: 240px; height: 240px; object-fit: contain; border-color: color-mix(in srgb, var(--character-color) 45%, var(--border)); }
.profile-intro { grid-area: intro; align-self: center; min-width: 0; }
.profile-backlink { display: inline-flex; gap: 7px; align-items: center; margin-bottom: 18px; color: var(--text-dim); font-size: .82rem; font-weight: 750; }
.profile-backlink:hover { color: var(--accent); text-decoration: none; }
.profile-tags { margin-bottom: 12px; }
.profile-intro > .section-kicker { margin: 3px 0 7px; color: var(--character-color); }
.profile-intro h1 { margin: 0; font-size: clamp(2.25rem, 5.3vw, 4rem); line-height: .98; }
.profile-lore { max-width: 53ch; margin: 15px 0 8px; color: #d9e1ee; font-size: 1.04rem; line-height: 1.65; }
.profile-personality { max-width: 58ch; margin-top: 10px; }
.profile-personality summary { width: max-content; cursor: pointer; color: var(--text-dim); font-size: .82rem; font-weight: 750; }
.profile-personality summary:hover { color: var(--accent); }
.profile-personality p { margin: 8px 0 0; color: var(--text-dim); font-size: .86rem; font-style: italic; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.profile-stat-grid { grid-area: stats; display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: rgba(4,8,14,.36); }
.profile-stat-grid > div { min-width: 0; padding: 14px 17px; border-right: 1px solid rgba(255,255,255,.08); }
.profile-stat-grid > div:last-child { border: 0; }
.profile-stat-grid span, .profile-stat-grid small { display: block; color: var(--text-dim); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.profile-stat-grid strong { display: inline-block; margin: 3px 5px 1px 0; color: var(--text); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.profile-stat-grid small { display: inline; letter-spacing: 0; text-transform: none; }
.profile-progress { grid-area: progress; }
.profile-progress-head { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 7px; color: var(--text-dim); font-size: .78rem; }
.profile-progress-head strong { color: var(--text); }
.progress-track { height: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 99px; background: rgba(5,8,14,.7); }
.progress-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--character-color), #a970ff); box-shadow: 0 0 14px var(--character-color); }
.profile-progress > p { margin: 7px 0 0; font-size: .76rem; }
.profile-section { margin-top: 34px; }
.profile-section .section-heading-row h2 { margin: 3px 0 0; }
.profile-moves { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.move-card { padding: 17px 18px; border: 1px solid var(--border); border-radius: 15px; background: linear-gradient(145deg, rgba(27,34,49,.72), rgba(14,18,28,.65)); }
.move-card-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: var(--text-dim); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.move-kind { color: var(--accent); }
.move-card h3 { margin: 0 0 3px; font-size: 1.04rem; }
.move-card p { margin: 0; font-size: .82rem; }
.profile-growth { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 18px; padding: 16px 18px; border: 1px solid rgba(169,112,255,.25); border-radius: 15px; background: rgba(169,112,255,.07); }
.profile-growth > div { display: flex; align-items: center; gap: 12px; }
.profile-growth-icon { font-size: 1.65rem; }
.profile-growth h2 { margin: 0 0 2px; font: 800 .96rem/1.3 var(--font-body); }
.profile-growth p { margin: 0; font-size: .82rem; }
.profile-growth > strong { color: #cdbaff; white-space: nowrap; }
.memory-section > h2 { margin: 3px 0 5px; }
.memory-section > p { max-width: 62ch; margin-top: 0; }
.memory-list { display: grid; gap: 7px; padding: 0; list-style: none; }
.memory-list li { padding: 10px 13px; border-left: 2px solid #a970ff; border-radius: 0 9px 9px 0; color: var(--text-dim); background: rgba(255,255,255,.035); }

/* Battle screen */
.battle-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 10px; }
.battle-heading .profile-backlink { display: flex; width: max-content; margin-bottom: 17px; }
.battle-heading .section-kicker { display: block; margin: 0 0 7px; }
.battle-heading h1 { margin: 5px 0 0; font-size: clamp(2rem, 5vw, 3.15rem); line-height: 1; }
.battle-heading h1 span { color: var(--gold); font-size: .45em; text-transform: uppercase; }
.battle-state { display: flex; align-items: center; gap: 10px; padding-bottom: 3px; color: var(--text-dim); font-size: .78rem; white-space: nowrap; }
.status-chip { padding: 7px 11px; border: 1px solid rgba(126,224,255,.3); border-radius: 999px; color: var(--text); background: rgba(63,224,255,.08); font-weight: 800; }
.battle-deadline:empty { display: none; }
.battle-vs { gap: 13px; align-items: stretch; }
.battle-sidepanel { top: 58px; padding-top: 10px; background: linear-gradient(180deg, var(--bg) 82%, transparent); }
.battle-fighter-card { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 15px; align-items: center; min-width: 0; margin: 0; padding: 14px; }
.battle-fighter-card:hover { transform: none; }
.battle-fighter-card .sprite-wrap { margin: 0; }
.battle-fighter-card .sprite { width: 126px; height: 126px; object-fit: contain; }
.battle-fighter-body { min-width: 0; }
.battle-fighter-name { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.battle-fighter-name h3 { margin: 1px 0 0; font-size: 1.15rem; }
.fighter-side { padding: 3px 6px; border-radius: 6px; color: var(--text-dim); background: rgba(255,255,255,.05); font: 700 .62rem/1 var(--font-display); }
.meter-label { display: flex; justify-content: space-between; gap: 12px; margin: 7px 1px 5px; color: var(--text-dim); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.meter-label strong { color: var(--text); font-variant-numeric: tabular-nums; }
.battle-fighter-card .hpbar { height: 10px; }
.battle-fighter-card .mombar { height: 6px; margin-top: 0; }
.battle-fighter-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin: 9px 0 2px; color: var(--text-dim); font-size: .72rem; }
.battle-fighter-meta strong { color: var(--text); font-variant-numeric: tabular-nums; }
.ultimate-ready { display: inline-block; margin-top: 6px; color: var(--gold); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.battle-notice { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 13px; background: rgba(255,255,255,.035); }
.battle-notice > span { font-size: 1.4rem; }
.battle-notice strong { display: block; }
.battle-notice p { margin: 2px 0 0; font-size: .84rem; }
.replay-section { margin-top: 28px; }
.replay-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.replay-heading-row h2 { margin: 3px 0 0; }
.replay-heading-row p { max-width: 420px; margin: 0; text-align: right; font-size: .85rem; }
.replay { overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: rgba(10,13,19,.48); }
.replay-controls { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0; padding: 12px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.025); }
.replay-controls #replay-round-label { min-width: 125px; color: var(--text); text-align: center; font-size: .82rem; font-variant-numeric: tabular-nums; }
.replay-story { display: grid; grid-template-columns: 1.4fr 1fr 1fr; min-height: 148px; max-height: none; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.replay-story .round { margin: 0; padding: 16px; border: 0; border-right: 1px solid var(--border); }
.replay-story .round:last-child { border: 0; }
.replay-story .round p { font-size: .82rem; }
.rematch-form { margin-top: 12px; text-align: right; }
.battle-history { margin-top: 22px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.025); }
.battle-history > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; cursor: pointer; color: var(--text); font-weight: 800; list-style: none; }
.battle-history > summary::-webkit-details-marker { display: none; }
.battle-history > summary::after { content: "+"; margin-left: auto; color: var(--accent); font-size: 1.2rem; }
.battle-history[open] > summary::after { content: "−"; }
.battle-history > summary small { color: var(--text-dim); font-weight: 500; }
.battle-history .log { max-height: none; margin: 0 12px 12px; }

/* Sign-in */
.auth-shell { display: grid; min-height: min(650px, calc(100vh - 190px)); place-items: center; padding: 22px 0 36px; }
.auth-card { width: min(100%, 510px); padding: 32px; border: 1px solid rgba(255,255,255,.11); border-radius: 22px; background: linear-gradient(145deg, rgba(27,33,49,.92), rgba(13,17,27,.9)); box-shadow: 0 34px 90px -52px #a970ff, inset 0 1px rgba(255,255,255,.06); }
.auth-heading { text-align: center; }
.auth-mark { display: grid; width: 48px; height: 48px; margin: 0 auto 15px; place-items: center; border: 1px solid rgba(63,224,255,.35); border-radius: 14px; color: var(--accent); background: linear-gradient(145deg, rgba(63,224,255,.12), rgba(169,112,255,.12)); font: 800 .75rem/1 var(--font-display); box-shadow: 0 0 28px -12px var(--accent); }
.auth-heading h1 { margin: 5px 0 8px; font-size: clamp(2rem, 7vw, 2.7rem); }
.auth-heading > p:last-child { max-width: 39ch; margin: 0 auto 24px; font-size: .91rem; }
.auth-card .auth-methods { margin-bottom: 5px; }
.auth-card .auth-btn { min-height: 48px; }
.provider-mark { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; color: #172033; background: #fff; font-weight: 900; }
.auth-card .or-divider { margin: 19px 0 14px; }
.auth-card .or-divider span { white-space: nowrap; }
.auth-form label { margin-top: 0; }
.auth-form input { min-height: 48px; }
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-top: 15px; }
.auth-label-row label { margin: 0 !important; }
.auth-label-row span { color: var(--text-dim); font-size: .7rem; }
.auth-submit { width: 100%; justify-content: center; margin-top: 20px; }
.auth-new { margin: 19px 0 0; text-align: center; font-size: .84rem; }

@media (max-width: 760px) {
  .profile-hero { grid-template-columns: 1fr; grid-template-areas: "portrait" "intro" "stats" "progress"; padding: 22px; }
  .profile-portrait { min-height: 210px; }
  .profile-sprite { width: 205px; height: 205px; }
  .profile-intro { text-align: center; }
  .profile-intro .character-tags, .profile-actions { justify-content: center; }
  .profile-backlink { margin-bottom: 14px; }
  .profile-lore, .profile-personality { margin-left: auto; margin-right: auto; }
  .profile-personality summary { margin: 0 auto; }
  .profile-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-stat-grid > div { border-bottom: 1px solid rgba(255,255,255,.08); }
  .profile-stat-grid > div:nth-child(2n) { border-right: 0; }
  .profile-stat-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
  .battle-heading { align-items: start; flex-direction: column; gap: 10px; }
  .battle-state { padding: 0; }
  .battle-sidepanel { position: static; background: transparent; }
  .battle-vs { grid-template-columns: 1fr; }
  .battle-vs .vs-label { justify-self: center; margin: -2px 0; font-size: .85rem; }
  .replay-heading-row { align-items: start; flex-direction: column; gap: 4px; }
  .replay-heading-row p { text-align: left; }
  .replay-story { grid-template-columns: 1fr; }
  .replay-story .round { border: 0; border-bottom: 1px solid var(--border); }
}

@media (max-width: 520px) {
  .profile-hero { padding: 18px; border-radius: 18px; }
  .profile-portrait { min-height: 180px; }
  .profile-sprite { width: 175px; height: 175px; }
  .profile-intro h1 { font-size: 2.35rem; }
  .profile-actions .btn { width: 100%; justify-content: center; }
  .profile-stat-grid > div { padding: 12px; }
  .profile-stat-grid strong { font-size: 1.15rem; }
  .profile-progress-head { align-items: start; flex-direction: column; gap: 2px; }
  .profile-moves { grid-template-columns: 1fr; }
  .profile-growth { align-items: start; flex-direction: column; }
  .battle-heading h1 { font-size: 1.75rem; }
  .battle-fighter-card { grid-template-columns: 94px minmax(0,1fr); gap: 12px; padding: 12px; }
  .battle-fighter-card .sprite { width: 90px; height: 90px; }
  .battle-fighter-name { margin-bottom: 8px; }
  .battle-fighter-meta { margin-top: 7px; }
  .replay-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .replay-controls #replay-round-label { grid-column: 1 / -1; grid-row: 1; }
  .replay-controls #replay-play { grid-column: 1 / -1; justify-content: center; }
  .replay-controls .btn { justify-content: center; padding-left: 10px; padding-right: 10px; }
  .auth-shell { min-height: 0; padding: 0; }
  .auth-card { padding: 25px 18px; border-radius: 18px; }
  .auth-label-row { align-items: start; flex-direction: column; gap: 2px; }
  .guide .gnav .gprogress { order: 4; width: 100%; }
  .guide .gnav .gdots { order: 5; width: 100%; }
}