/* Fonts are embedded as data URIs so the game also runs from file:// (double-click index.html). */
/* Gnome, Line & Sinker design system
   Flat colours only (no gradients), 2px ink outlines, hard 3px drop shadows, 4px radius,
   one pixel typeface, text aligned left. Colour meaning:
   --accent = main action, --gold = coins, --pearl = pearls, --green = good news. */
@font-face { font-family: 'Pixelify'; src: url(data:font/woff2;base64,d09GMgABAAAAABAQABAAAAAAMaAAAA+wAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGlgboXwcegZgP1NUQVQuAIEuEQgKsCSjWwE2AiQDgxwLgVAABCAFhEYHIAwHG28psxFRwzgpUoL/ywE3hoIfVnWFCmCmEoRayWCCbEG2TqU3EvZ22Xrk2rPoX4ef13iNh55K5RQacJevll92Gn/RBgsfjZBkFp54//79NXN49xMRGhWEKnldzEr+Akfmhlp7Y6+oyVUQjZlGpWV4/vuLnfv+0hqs0Jq13kycUOJFUeIR3yndjMtHzFGfYe3VhDW9QOmSjFhWmIGwL1wRh8pvQsr1P4AwQf+/nK+TtJ2EPWG2g6sSLlYjl6x7p6j3JsdyOUirLnZA25wvlaUJ2y7vPhTAP5R0kKrPJSpXoHz8HD4+DoeXw8PLa9CpTwEK7XGXNYQS7MAMrhYwCCVuwVvg+l+qacsn3J1ChJ070TEUXcylazcNsfvB5eJriTsoglBMFygqBYBLa0A4xFRJlUNm6RBSrcq1e4+azqWL2rbFEJX5MQp22WXXL8Z882tWH1XdMzcuxhghhHgRQlEcz7W7H197CBAQDDKBsogsIkc1UaOBCuWIly5dqVLa/rogbJK3UC5D0hyZJVs5B8E3zVZJz47d+2O6xsyfiYkNGDy73SbMnYkG1ePZtKzMfoSXcj5/vVtmPH/+kdhsUMxDQ7XcDDUbSK2n/2amtT60XCvcWmidsjPtd5xCZ7nzmot7eJ3d6e4W95R7x/3CM9SDHzPTO+o99/7x//xvAhMD7wQ+MkvNUDPebDCtjyteW5UrUEFIfx9wuWy+CI4oqcKky5ekSLVsjZop1UJL5Vor8OutK2y4pQjDsjyhN/OyStbGNrW5LW3VMDKoIObT05HxRIAWjpGk+PEW3K5DGIrAgIMACao3DYyLtThhF4IWTUsMslaUYXVoqqEB7sJe5yxulL3F1wH++eEV/Yoj/ZFFfhWlLNXSLO3SLYOJ92vTZ34thpU+rLite4o31x/HL/i3JvfeXmmDyoDp/Z9srouuEctLrJgkkmf62JEWx2WuOnAXoK1V7SC7ijH8ioBDEXZwyFGgXFdFg2jR6b7jIVyQClYfbd2bfBA/FhA1ZeukS6vQy+ZhEcSiEjn3cdOxfFYFqayzZQS8CI1BQPk1AEQ4D0cGjsU6Jmgn3fNMYSwSkgQy8Mmx8fzJR16grw8iAqgJbCEJFLgmESJkqELY0dEYdB5k9Phui5ocohjf4C56oz54OPD8DxuL7LfNPeh3P0vMBowfHwnyQFf6V5ZxgpX51j3HQCsaDV1g0pkw31wYNZFMlIl3I7RH5zl6iu/iOT9AEMYkS3J7STG6YvjDrd4x6l0MthXjaxowWHQC3akjwVO2FofSAFe7A0HgvLFZHUriQODycSRhYhf0I9If0nOpQZeATSHlnLQRc6pHjIwfidhNbsMeWYjIMn4wYqCYb2QQnvMMNWBQIOO5g0+UIyMMWJiCLArMFMygGpoDmYwUZUIZCCltzvjFiTsvhmHijMnI6opDpCWThHDCCGkRq6fIBPli+TT6rfMLzLDu4I4HLbGQ8XGZbrNaIia5hJ0arIzR3eMNEbL3W5WgbscRGMmTS8Skh0J3ZnGqsoSxSkvATgUN2n6crQbNiZPYR4t88KIb39+ahxrMDXaRfhpq/FG/sK7QMgnjQ0s+C4wAJrEE4JzLwutXvyDyI5U9qEjWle2sOsPit9lASAd9QfyQ1S81lc/2BvPEn2DdpFsjreM8Tg23/wUNEO6wIN0jfCyyNSzsTsmjOrgxOxqqq9hV88gYR1B4G/YDC6FjpaeV3f3WeOc5tqsovKzk1VS1Ob1Yafd3HbhkuVSlE2pxtOz+ZPbOlW/pgUXSavoeVZxUbzfjWCRy1LLZuO3tLsaqZzdh9/y2Yz7rE1m0eaGWjImJffViiMKLhdu7DRXWmFaToEQpTRsxMYD/KS79+hKd9tKAZMUpNJZriLhwb7Pyb+vewpnviUI38Yb/jkwkC0mFpU67Wv9qtCHKCWWx+QKMIMFChAoTIUq0GHGSpEiVLkOmLNly5MqTr0ixEqXKVKjSqNk/UNe1lpMfKP24niUp0YeFJ4IPACCS6gwHgJZntsQwAIj9sXGSQTwRwuZI5BICQCQBJw5mJIyHVYO9GizXo48WhIMkWJD4huH01JdqefoI4PBFnZ35zAHBfADXJghxBWz2WHiQ2FhGw4SLxGqDmw+uAQQezeXOtx7afALA+i+Qm15TJo2BzVKiVpj9MsGiJcuUr5YlXZa643KuGhrX0y5uoOkK+Wh7cmQbDvSrG4BNy0HLn0p/4aYPxP+r4WP5ke7i2vffF7BekoHYG/npNSCdRTZX8OMEJNP7pMnzBUBZQCOyDZh+oiTLWOzEdiB5HB7lzy/ToLW5rbu3b4F05Rq1sbDzaA0b/H+rt5NdSIgoRb3T+v9bezVTLStHCzN9A01rZV0lbRVVOxtbdXNjHRMHPbChpZE9Ken/wgBMIgEeA9vhfcB/Ai6IB6CUEkqKfrW2+6WdiIVpmxOxbHtn97xk9wDodgoGgbWhlux7/NvOKIkCHHUn2BInpZwLOCz9CmouPx1wU2BK3umEO2k7CcPyDlMYKtfBK/CqKWJFXu67itQY9G4s9yeO+oG+Grq988LJCX7RuHKxzbtbkcXS/IaFFOV9qdbfBVzrfYedau+qlY2FAHBepSSshOvAoVCYUGCWwa59g5D0phpaQlnYtEpmBxCjkLCRpctZcVKtQhXVhDkB+uxQvIrW4rTU5vq6ZpPAkNwoSwFWDgsuSzEZdGISRSomrXAUn9cXZYSzFSnvX7sCsOoLgbzBBurHkKXqV+OEjWBLVyshdL8vdQJJnm+jJF5VXsk5whBJNefS8T30FFJjNTDL5IlGdS8kfRyFXYjyVnmk/JEyxUZjxYSUIDegJCk/xBfyRGKE8MieE78VCKKi2jOSbRarX8uUeD9Wq4huELQRC11JPsgholqMe/2oN1aQkaXXyGpxRn7Rw3pu7FGnTd+lEWQV6xFCE15lfakw10JtMQlbJkoR6v4IVLnmq9Sdr6Mz1R31cjvr+By2jttSuLyxfTXeyq5Ztt9QDJvDiwh24qwPWytkimxoyeF5Sm3CJXuUzMxwEqGQUTnLz8FY5jAV8gNphcQ2dCjVa7AN5Vzhua630IdUbyqyFuwokxygYYwvAVE0amE2c2yhA0HLmomIJs9LQhgIlmjVmibIXXzYvfmJz+13fI3jqaYqm5OCYYbuAqbTmPQMoVJv5dhNgkpBCcqRoNLIPc4Dz3NaHKN3xYfpPGsXnOfHiCmgEg3agA9ctaBHC3khduWeT6oOI7qQx6/4CNHpXqjYlHY2BYQVBm5S2PhooujntEA/c1uKP6tZccw4Nm9dgrW4rXQUP13kZ1j5Yy2/xvmP7X/bX9s/aXYNvN/VWQKMBMJsbG271c4AfcDsWQHOklsZxsGHaUCnsHUqUmXPaY6NvW9TvLbcXL21TWxoSygz2qKuPWH5mtNbImyVilRbRuXlzpwsdlffLQNDEfN0ix+jzjPSu3grOuvEVeF96jYN94MINE812ftOHwlml55dUhSVZwBUW4HgA/HxJDDQJz3dBeVf+kUZWt8GKtGVnVkTnLjQ+J0YpycQOv4f7xlRSd95MPuQvM37mqz/482BrlXs49Z0n+SBoB8EMhSdTZzdj2YQQeBVrpB/LVXa2oFjByOXP429zA8rds5Qac/3O+0ku/YebSyQeEqH5bT9hGE8Feqgfg6fwmpZHVK2S3qAIqQmgKu9EzwaqhJtv310uvEg3UpeUdygqQQ4UUn35dY4CUBpItiZuask6ORMZiK4J80TAm+536ATSdB/VCVLQFu0jmFLOJViDBcR1j4Zv/kc1rRb74JmnzRlNtwyfKiZVEVTqH+dJdUackxuI2cJd2pJteTT+acMp2JZA9vN6qzsUNUlWkkvNqlLPU1e0HPo88QoASlLt1me6Nsz9K3p99xGzz+JU1L+VGLl7Z3xGfG72vKe1ctd3OyBe6LhfpUbq5se/OrOb+wbrdvmXz1l82uV5qqMMkcW5Fn5yDsGfdI9HYWttGtlrV369OTcfFpLW8bTaunzFiaOtYlwZhPHIQm7SVmX0C2ngT/hE3B6IgMobt7PWV6tzFkE3g1PT7tFO0s62qNrbMLg18jCpcMM2VqJQ/dRMHezVVu0Lu6Mpv1Zrz46Fd0T+6N0daeEetL6o/nQngq7VNsbU3VNScZ0TdP7v0XYcfD24OFSWRA9GBzktt1bH1i15cMBT78FuUh2l4zBH2CaVrSjMQkETm+NttjHPQJgmr19jU93xT7xbz7auLB9NHhiEJfF+1J9XH03/RrW/P7+4OPB2x/lb+f5YKQLj95Oj+g5fud1bWGz7w3KaPDFOUHz/K6fnD9z3Nm/2bGnQNHMq6r8Jipm8tKn6Z4RrStORc1uv+6D5kd7/XB7nCrbqHozQG0kqryM8R53hmMOenBg8cjGoadHpDmskthUt7GlUG9774gak7qqzdUXb14+F4olK46/Sez/21Y1zfU1NT/8eBcNJ8zmdhXuhIlJ+bFZeIdVcr0yYcId75oXJelYpLjJDxRB1qGnyygKmkUlocK+g0enf94KRoL3rwLNnhfILjGVtD5t5h1N69M6BbukKbszHHfuGnn0qYz/x3e3yXeq77/nxeMEvjhK/lhicMvPgyYwgzM4/Dx86Ax7j91PcpEH8RFq77Hlazj/5dmTZ51qEL6/6JUwFECXMHAgctZjcf6of32h9XhvefqfkcUTf3nByCxHf1ZG8/tbM6200zhNkmbM9D16Va98I1fFtC2VJEj6I3FNWRe/UBuBaC2nOV4uEaDiV6KoC6HK5WuoOfnPya+OH+B0fH3iQC6arUmDTMLy6SskCJTyBhFeWgMBtxFas58fvnhHonLoiPhIoyo6SinxgA/c5Q/XBAcT1aFvPsE81sMIELzW4hkwSmz+q49aXwB8mDZ3BHxucmvFtZUt1l+BSwEI/nVMv6VS5SMgtbzVk+Y646cryfKesqt1G//ndE4ff8y+TvDevHxfs8jYJR+xNX76/HW+tNvpHCW5CziloMyxwjRBCLMiyqb0AMiV4IXz0dY8rdbNMy6hK8llM5gCguovBB/6hDVuAibEHCYCJolyBZMIqf5xxkpysgWAc6idLBKdO1mFenyypaV3TrYVJvFkR2Lan+zKz8iTQtVmzdkEgnONRfr7tsNg3fAwCJQIVKlcpQrp+jeAdG/py11BSBjYDaifHZqwVZ5oZeAghz1u41Q12jFP43zxDxOxBHFlykyCfW0+2XMbN6GpFhNiGGSPfOVRHu+6rTaoL9MHQZyQdng+pcqLdc301BmPWJIQUVuBa+7YejtGMgZZ1phrOpX+ftFs71QyzyEYzWYicGskJLe3GtH27qWsaQIKLyF3cHP/n6fSppfy/+pT2wwAAAA=) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Pixelify'; src: url(data:font/woff2;base64,d09GMgABAAAAABCMABAAAAAAMYAAABAvAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGlgboXwcegZgP1NUQVQqAIEuEQgKr1yjWwE2AiQDgxwLgVAABCAFhHQHIAwHG5kpRQdi2DgAgbx8BP/XCdwYKtVAfwkggUYD4SQtDSOoSUUltc21Uf7kSN/4FAe54HcXRS1i/vLfqQGVV2IfLjocT42OGiHJrB9fZ72q3/mZ6eHKvVI0Mnqy66xwInEiTrB4/vn7fuuc+/6fmyYKLKHM+t7AJRJBM+UBRrx1w3WsGDFKZIeFVIfHmf27lvMhBzNJkYVsjdjnC7ktg9Id0FuTFXWvvwL4h6+1R62NjhKlOkZUn/56Ie701+sKpwfqFuKeHqibq5zlHCkVa0NwCLal9cp7eVmuygvQDk13jxUA8IyrNFMXb1AXQAcAJJ+V8BsPyBsA8Ozvnon//9NSqhtFmU26kg7tPsfIgKUVZBgcmsP1i+bP1/MfbWkaubVtrlVlnPNXm1Z3U1kruJWGDWB4TlhoAAvA4TjmTMa1mDJR2C1N4y0O8TXffFuOk5mkvXGpMUJotW+FULXG7f3x1WMAArgC2gGYQNojHXkjPgIwdwZNaTQmJtz/sgBRUN0Fk1RUoaAevc3qDoKv2oEN38YmZ8N9VzG4H9wpAEyeg+5qHP3gBM0LKHgWU9craCTnk/o7ta7GK3+AduoUhvrE7mxRCyNmzdT+K6rhfFFI4SmGil1KO+WOoZthtOG2hLwxxss+cobcJc/IF0bVGE/fp59xnfG68Q8Lnd441zrfcX6kjlQL1Wp1ihp+HLTmOFsL5oL0xwEkSdErM6sQ61ycEzlLZRY7OmldXPXuXkar1dbf3w4pEmrTD6MkrW9DG9vU5gaTQcAY6wmMMZIALT96UoOf7ADpCBiDGDAQoMCAvz4RkNmoDFrYB6s5aD6CoEVlQhqKaqyB+zBHrMXus5zF1R7//v4RvIQRf0giPbKSl2Kplnppls7Eq7XhbbxNwKyPL9z3fSU+efsCv+hvTeyv5pQ6cNGhkoGUSNBn9cekZyaMKD3TC2dZmJTRa6/5kAutaovJVkzgenjki5CDQ4oMuS4UXTFqNLoFdeGCTLD6hJFPPr6MH7GIGscIfyge6iz9YUiI5SVw7sOGx/Q2F1CzToYRMDw0kgOyxwDg4dwXCTgG41pCu5k8FhnGcpYlkGSfXBvHHzvwAm2rE+FA2wAyQAMERGMMDgIkLuyqaBy0DTK61oWo6TGKyT00H63RGNwXSP4njArZL8w98Oyx0kzAiZv7hnz2Lf4tyXgIK/Kt2xidXNFo6MIHxm/AtOYi8EZKJBGldsDusJPoJqw98V0yi8vQCJmTDt7tlUUbiokHu0bHaHRxMDuivw0TBoNOoTp1lnzNMhZLpgFuDAeCwLaxSQMqxQHHpeVISuIQePD0x4xcZtKloFIocy61EVKsJxk5P1LOVm7jnlkIpGU8cfhEMVdkEG73NviEQYGc5y4hUcyMOGBxDLI8YFMwgWoIDmQyU5QJZSDGtSnhVydumwvDxBmTmTUpDkktkSSEEkZMiJR6ioSTL5HJok/NDzBDuYNdA7VkIbX4pO28Fo9JLHGnBrPRhrtmcBDYb1WCJluOwIhNLhGTEYo9mNWxykoyo7RS3qmQk9bDGxk0RU5iZop08qKptVN5qsHUYBfrZqFqS/3AulKLJNQiFzsLjAAisRLAXZeH48kTJP3IZA+qknVlO69OgPiN1hCyQV+YMGT1Q03ls9igjf4KNpl0azB1bSPU1oy/oAGJO/EB2kX4UHD6AsP0u744JAdLxm4vtFPHXVVEweIUM53SA0U4aqVHkNnDXs02x+UqCi8veQ00uqeFctpdHQd+5PpJosjtJ1rl/uT2Tul3+d92sSk1fbupOGW7qGCVSFi08tm48e0uTqleeVbKPS+nnEYuDmkxR8ubWAIn5q9VDFGNVyZvl1iYTE5CobZFtTBtxMQB9EPxyRVKdDpKJ0g03EJjSIfHhX2jlf+y4a085fai0E28odeRiWQ1qShuy12t/xeAUwAX0swcSdUsWbZKIlNoLA6XLxCKxBKpTK5Sa7Q6g8nRycXV3cPTy8fq5w9gzvEwq3AAHAOtkxGg60WHTSQAzr/vBdvGJUCTij0oY4CyD5wWKLiqodagRQsjMPhMGzhItyQ+do/ivjTq+lUbMzPeplIWnatmAP7E0HwD4p6YKaUJy5YDK0SsAly7tgCsZmqGJMvU7t0HARD/Arn2zq5XQCGq4cvNfh5XDbXUThe+BE17fsezOvHBiT/OkgBsPqEPVtrK+TAA//AUANOW503/sPmFmz3g/1fDh+IUzcGx6N8LEK/UFvH1QX98DIBGoM0n+HACtMT3et1gAgBm+YPzwzQJhhHMVLEkdeQZ4w83CxCuULmRxjqYAI1FoAhFKozq7QIV/p8a63QeKECY4O+G/3eLliBfihLVihTIlCVZqVjpYqSKE69CmXKJCuVKk6dKhlrZiuWoRCjhAQB0AHAZMBuMb4DTMwAJaAoAGGOEUeVxad+jQpFiZllJidzrFUwQFdDtFAwEUUB1xFbJQSBIr2ixjjsUo46aANzsuM49rmDLrorXCUCF3IXltW05x+6nMzrDIHbtFr+iPfR2YOaqC9l2Y2NnA5kv2/74SIzUnEOk3qvS9+ny5LWVOoSMgBGnEXP+ZRc7m53RIFFHr32GbGkbXWCcGEqTceAsHBXRpZjiqF6li7LmmKSTVD6VQsmgD6agNdAFE4SoCpBzjCnx6mTQ1Uk0oRjIlHvIO16zoGRJnAGdCkCuzwXsgI3cj56gGjap+ha9vFWrRJj8SW8RSPBCG44xr7wS5dHoheiaxGfMFKlGbmBpyCt7oi/px5HbhSlvlUfKHyFTGTRhG8ZLmISokiz4IWRENgRGCx4Vxi+Fw95MpqTmM5LvVrhfUgufauXRaeBRIX+0fITZmMKNi34za0MNMqIWnSqPXCIXl1bdKJGUIZ7VuCG3aqw8SQKHZTlfljruVD0mGkgNosOjD1S51lBpJZ/3TBuOVnM773g/y3EhhZo3ZSSTvcJVsVVHMQqHqZF4R/35ZWutdaijzZ79jqZnkz2ZzNx0YrcSGhVFvI9Gme0F3kHh/XRdSJ5YRMijX3Le8biKVBR1+fwrz6Qcj3h7fnGIqkUPt9uPIb8y0fJmeoku3dVB0VHFnm64gDNgIvwGnKDwcvDwp++XX/2M8TRSlc9JRc/QShDpjGKXGWaVcKqrYWKqCoo8cjl1WAzS2WQWc/TW+DJt19Z5d7Zvj4gZIIcGfSAEblgwiwDkGpb8lA+D4vGLs3ugzqenik1p51MgsWLhpg3PPhpVHk8TPFovlLCoojhmjK2XpqHcDnXyfFXZt1j2R8t+wvmXvf0Hcri7bQ4mRHXzlwSIHUQQX6rUpmV7G0EIxHoqp68I16EYikB8JnghthvzOE/sOezs6rtspj5bwzbfWhR7pZJA5IO4B/TjZve219cKbJLH+UYLyvCs7slq5+oHVQlF3OGDp/g+0qlBB2qOulU51mGbNd1FpmjEXUILDH8ms2qPay6Jvlq3rhBKQ0nbugWIygg3C0Qg8CCtOGILa0+cBtKFCi/9NCjSWipQIVbahXoqHOkkUQGjHhFa82pvsmtYYOfPnL66ScGbfU20/3RRoJuW7Q+WHf0uF4j054GTGBeKnIPLVdRt3sKLuVx+KyPBbnS9NXSw1+V34zA2KhROIHV/qFawk7oqoH0Vjn3qyoiyMKNIdUUfOfUda5mYK+eKrO62A+SKK721vgefTlOGAaZkJFIapoTKiDSJsts2Sv2wT0+wY4RA0zL7Ntk5U9MCMIogkLZ3EwtyupuZXu7eaRoSXrNMsA5a80grXr9Vzo8SaJfMBVEWpxSjW8TGFvLOhN0nHstU0LpghyA3edWGLG9qPlWf8DCQljCTjCENCYpAXxG43djMvFt8J4iuinqc9vpSftne20hTdlwcs6oXqSnjF7xuVOM5KC34YHKQoWZuUXqGvrX8ikWowS7Abjt6KCoET7airviQjZ5z9uUOhW+eaLuvrulsfHrfq+75veev3oY2d21+qYht1udXXaSYYEpfELgozJ0edkjbs8lsTI/9OOPatlMyspGaCp1fP5vo0275BmX1DN/o7G71kbPNX8IGfOBDUXsK+S5eS8Ao4CRyz8aIh5xeNEsIVh9DzHm6cEnOm5knJ+Q1tkMRuPqbSydQVMd0HGN1LCJFsssgHjiqEE3hWU98QbfjjPaZK6ogYQRfzgJ5Kq5Qy16ZamgcuVWFPV32lKJ9m43mh1Z/o+WEbXs3TqpbY8/b2oyzr0GKkz1Jz8Ht2dNqev6QHik74s5bzy/ZHx4zbRZefY2/1mo7eq9x/qJvzAXN0UlqRk3AQZc/TF/FslllzcuajUsbu4nm+eabba+naQMaPnh9G9v8o0EZjW44J6rnd6uL+cRofm3sg17D81l4YvYa7de01OzivYJ/ztgWvKbntWetAqnu2a/kV+03DmejZ4d5YlOpvoojqq47KjHG53vpqF/3/+k4zz/O9477Zd/fjjjW299jSP2UJHHfXqYyoUUixisr3uPDXtJjj4VMXbZfxpR7/CvP/8AUDaubhmGjRzZhSkPq4xudYSvDhPpimi15ZJr6lFBGQ/lG8upDkdImtvNCJIdi/o1AAWrJw3kUkBOiNIhMXoho2lh3MMB5dd7WSO51BO83RtYLAJogvlPnv+aG/WUGvw70Di4mBLDyS8E/C0LTwVKz5O1bGS24fdylR7GLX1r1Z/MY9uLH/aXL9viev+x/7fXGvfXXjvvLlp40//D5d89ffOvi+Y/PX3jVsvXjR671fO9Xb8Guce9NXyXnnH6OUzsgBgiUJAYNfSW2YCJSdcS2wd0hUHUqHy2P3POK59zxx54DHWjkKAg/JZs59fmBHryr3s11/jy7aJVJzG3vHd6F1S80AokTikDAIwguMApoNUIrFkQrYc/WNog6igUgiknC/lKisv65hGEvH9/wkneId9yGl/1DfBb+t6aBmklILivoCt/YFZGIpQnoIs4h+k5svXhX9jVajvQodH8PZw9wyfe8k4/1/LLf3COAVOPABzv2wS1wv7eAAAQfOcf3sjP4K4V4AQAPrx0WAJ6vO/lqnm+M4a8LSAwACP4ypr8kJ5gGZHmh9b6M6s5BSH07tbZ9F4aR1xkdOzstXT4M1Z9WsUy55LRJsNEHx5G63E7nZa2zgOO0zB0rTNMSod0agfU2VY3mdTan8eWcNnW30Tb3uck4JNSV5OrORyijzguNNtP/QcOOEEBwtUAwAuj8Sa4oQtn+MFcLCDQ5A9gHrXmkh33zmLsH84Rw72yFOs+geZnmSd0qfp4733LA09s0tx7POrMLAa51vZDof9so/Q0wgoOdrs5gGhsLGytNdoIanS59vuFq9GFXawRNlgr9DNpGHPrrBaoSSSIM8bouIweNuogngw0Ik0BmSnV24vsNUcmkSn99mdVo6Bph+uHMyrWeN74rlM7K0TeJ1F/7fNUy1dAN0UcFBysTSzUSJFXamDZGkKzaLr4ncrm5xK6/aGnrDSRV6ArzVBVCMsDgiEwqaR8mH19InVmaWMnWizfkNSLtEw6u6/9+2Gx/qP6/7MJ0) format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --ink: #14121c;
  --ink-2: #2b2836;
  --ink-3: #4a4558;
  --paper: #f3ead7;
  --paper-2: #e6d8bb;
  --paper-3: #cdb995;
  --muted: #776d63;
  --accent: #ff6b3d;
  --accent-2: #ffa46b;
  --gold: #f5b82e;
  --gold-ink: #6b4300;
  --pearl: #b8a8ff;
  --green: #3f9f58;
  --red: #e0473a;
  --night: #101a2b;
  --night-2: #1a2840;
  --night-3: #273a58;
  --sea: #8fd3e8;
  --shell: #f7a8b8;
  --r: 4px;
  --line: 2px solid var(--ink);
  --shadow: 0 3px 0 var(--ink);
  --u: clamp(9px, 2.4vh, 15px);           /* spacing unit; landscape phones are short */
  --tap: max(44px, calc(var(--u) * 3.4));
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --acc: transparent;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night); color: var(--ink);
  font-family: 'Pixelify', ui-monospace, monospace; font-size: calc(var(--u) * 1.15); line-height: 1.25;
  -webkit-user-select: none; user-select: none; touch-action: none; overscroll-behavior: none; }
button { font: inherit; color: inherit; }
h2 { margin: 0; font-size: calc(var(--u) * 1.6); font-weight: 600; letter-spacing: .02em; }
p { margin: 0; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.ic { width: 1.4em; height: 1.4em; flex: none; display: block; }
.grow { flex: 1; }
.row { display: flex; gap: calc(var(--u) * .8); }

canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }

/* ---------- buttons ---------- */
.btn { --acc: var(--paper-2); display: inline-flex; align-items: center; gap: .5em; min-height: var(--tap);
  padding: 0 calc(var(--u) * 1.2); background: var(--paper); border: var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); cursor: pointer; font-weight: 600; white-space: nowrap; position: relative;
  transition: transform .06s, box-shadow .06s; }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.icon { width: var(--tap); padding: 0; justify-content: center; }
.btn-primary { background: var(--accent); --acc: var(--accent-2); }
.btn-gold { background: var(--gold); --acc: #ffe08a; }
.btn-pearl { background: var(--pearl); --acc: #e2dbff; }
.btn-dark { background: var(--night-2); color: var(--paper); border-color: var(--ink); --acc: var(--night-3); }

/* ---------- HUD ---------- */
.hud { position: fixed; top: calc(var(--u) * .9); left: calc(var(--u) * .9 + var(--safe-l)); display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.wallet { display: flex; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: calc(var(--tap) * .82); padding: 0 calc(var(--u) * 1) 0 calc(var(--u) * .5);
  background: var(--paper); border: var(--line); border-radius: var(--r); box-shadow: var(--shadow); font-size: calc(var(--u) * 1.45); }
.pill b { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 2ch; }
.pill-coin { --acc: var(--gold); }
.pill-pearl { --acc: var(--pearl); }
.pill-dark { background: var(--night-2); color: var(--paper); --acc: var(--accent); }
.pill.bump { animation: bump .25s; }
@keyframes bump { 40% { transform: translateY(-3px); } }
.sub { font-size: calc(var(--u) * 1.05); color: var(--paper); text-shadow: 0 2px 0 var(--ink); padding-left: 4px; }
.hud-right { position: fixed; top: calc(var(--u) * .9); right: calc(var(--u) * .9 + var(--safe-r)); display: flex; gap: 8px; }
.cast-info { position: fixed; top: calc(var(--u) * .9); right: calc(var(--u) * .9 + var(--safe-r)); }
.hint { position: fixed; left: calc(var(--u) * 5 + var(--safe-l)); bottom: calc(var(--u) * 1.2 + var(--safe-b)); max-width: 44ch;
  background: var(--paper); border: var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 8px 12px; font-size: calc(var(--u) * 1.15); }
.banner { position: fixed; left: calc(var(--u) * 5 + var(--safe-l)); top: calc(var(--u) * 5.5); background: var(--ink); color: var(--paper);
  padding: 8px 14px 10px; border-radius: var(--r); box-shadow: 0 3px 0 rgba(0,0,0,.35); animation: slidein .3s; }
.banner small { display: block; color: var(--accent-2); font-size: .8em; letter-spacing: .08em; text-transform: uppercase; }
.banner b { font-size: 1.5em; font-weight: 600; }
@keyframes slidein { from { transform: translateX(-12px); opacity: 0; } }

/* ---------- joystick (touch, while casting) ---------- */
.stick { position: fixed; right: calc(var(--u) * 2 + var(--safe-r)); bottom: calc(var(--u) * 1.6 + var(--safe-b));
  width: max(108px, calc(var(--u) * 10)); height: max(108px, calc(var(--u) * 10)); touch-action: none; z-index: 5; }
.stick-base { position: absolute; inset: 0; border-radius: 50%; border: var(--line); background: rgba(20, 18, 28, .35);
  box-shadow: var(--shadow), inset 0 0 0 calc(var(--u) * 1.6) rgba(243, 234, 215, .12); }
.stick-knob { position: absolute; left: 50%; top: 50%; width: 44%; height: 44%; margin: -22% 0 0 -22%; border-radius: 50%;
  background: var(--accent); border: var(--line); box-shadow: 0 3px 0 var(--ink); }
.stick.on .stick-knob { background: var(--accent-2); }
body.stick-on .hint { bottom: calc(var(--u) * 1.2 + var(--safe-b)); right: calc(max(108px, var(--u) * 10) + var(--u) * 3.5 + var(--safe-r)); }

/* ---------- dock ---------- */
.dock { position: fixed; left: calc(var(--u) * .9 + var(--safe-l)); right: calc(var(--u) * .9 + var(--safe-r)); bottom: calc(var(--u) * .9 + var(--safe-b));
  display: flex; align-items: flex-end; gap: calc(var(--u) * .8); pointer-events: none; }
.dock > * { pointer-events: auto; }
.btn-tree { --acc: var(--accent); font-size: calc(var(--u) * 1.3); }
.badge { position: absolute; top: -10px; right: -10px; min-width: 24px; height: 24px; padding: 0 5px; border: var(--line); border-radius: 12px;
  background: var(--accent); font-style: normal; font-size: 14px; display: grid; place-items: center; }
.btn-auto[aria-pressed="true"] { background: var(--ink); color: var(--paper); --acc: var(--accent); }
.dock-stats { flex: 1; align-self: center; color: var(--paper); text-shadow: 0 2px 0 var(--ink); font-size: calc(var(--u) * 1.05); pointer-events: none; }
.dock-stats span { margin-right: 1.2em; white-space: nowrap; }
.btn-cast { min-height: calc(var(--tap) * 1.1); padding: 0 calc(var(--u) * 1.4); font-size: calc(var(--u) * 1.3); background: var(--night-2); color: var(--paper);
  border-style: dashed; border-color: var(--paper); box-shadow: none; --acc: var(--accent); animation: nudge 2.4s ease-in-out infinite; }
.btn-cast .ic { width: 1.2em; height: 1.2em; }
@keyframes nudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-3px); } 90% { transform: translateY(1px); } }

/* ---------- start menu ---------- */
.menu { position: fixed; inset: 0; z-index: 40; display: flex; align-items: stretch; pointer-events: none; }
.menu.hidden { display: none; }
.menu-panel { pointer-events: auto; margin: calc(var(--u) * .9); margin-left: calc(var(--u) * .9 + var(--safe-l)); width: min(430px, 46vw);
  background: var(--paper); border: var(--line); border-radius: var(--r); box-shadow: 0 4px 0 var(--ink); display: flex; flex-direction: column;
  padding: calc(var(--u) * 1.4); gap: calc(var(--u) * .9); overflow-y: auto; animation: slidein .35s; }
.logo { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 1); align-items: end; padding-bottom: calc(var(--u) * .8); border-bottom: var(--line); }
.logo img { image-rendering: pixelated; width: calc(var(--u) * 4.4); height: auto; }
.logo h1 { margin: 0; font-size: calc(var(--u) * 2.5); line-height: .95; font-weight: 600; letter-spacing: -.01em; }
.logo h1 em { font-style: normal; color: var(--accent); }
.logo p { margin: 4px 0 0; font-size: calc(var(--u) * 1); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.slot { display: flex; gap: 10px; align-items: center; background: var(--paper-2); border: var(--line); border-radius: var(--r); padding: 8px 10px; font-size: calc(var(--u) * 1.05); --acc: var(--sea); }
.slot .ic { flex: none; }
.menu-btns { display: flex; flex-direction: column; gap: calc(var(--u) * .7); }
.menu-btns .btn { justify-content: flex-start; min-height: calc(var(--tap) * 1.05); font-size: calc(var(--u) * 1.3); --acc: var(--paper-3); }
.menu-btns .btn-primary { --acc: var(--accent-2); font-size: calc(var(--u) * 1.6); min-height: calc(var(--tap) * 1.3); }
.menu-btns .row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--u) * .7); }
.menu-btns .row2 .btn { min-width: 0; font-size: calc(var(--u) * 1.15); }
.menu-btns .row2 .btn span { overflow: hidden; text-overflow: ellipsis; }
.menu-foot { margin-top: auto; font-size: calc(var(--u) * .95); color: var(--muted); }
.credits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.credits li { border-left: 4px solid var(--accent); padding-left: 10px; }
.credits b { display: block; font-weight: 600; }
.credits a { color: var(--ink); }

/* ---------- sheets (side panels, never centred modals) ---------- */
.scrim { position: fixed; inset: 0; background: rgba(10, 12, 20, .35); opacity: 0; pointer-events: none; transition: opacity .2s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; top: calc(var(--u) * .9); bottom: calc(var(--u) * .9 + var(--safe-b)); width: min(440px, 48vw); display: flex; flex-direction: column;
  background: var(--paper); border: var(--line); border-radius: var(--r); box-shadow: 0 4px 0 var(--ink); z-index: 20; transition: transform .25s cubic-bezier(.2,.9,.3,1.1); }
.sheet-right { right: calc(var(--u) * .9 + var(--safe-r)); transform: translateX(calc(100% + 40px)); }
.sheet-left { left: calc(var(--u) * .9 + var(--safe-l)); transform: translateX(calc(-100% - 40px)); }
.sheet.open { transform: none; }
.sheet-head { display: flex; align-items: center; gap: 12px; padding: calc(var(--u) * .9) calc(var(--u) * 1.2); border-bottom: var(--line); background: var(--paper-2); }
.sheet-head h2 { flex: 1; }
.sheet-body { padding: calc(var(--u) * 1.2); display: flex; flex-direction: column; gap: calc(var(--u) * .9); overflow: auto; }

.haul-list { list-style: none; margin: 0; padding: 4px 0; overflow: auto; flex: 1; }
.haul-list li { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px; padding: 5px calc(var(--u) * 1.2);
  border-bottom: 1px dashed var(--paper-3); animation: rowin .22s backwards; }
@keyframes rowin { from { transform: translateX(10px); opacity: 0; } }
.haul-list .nm { font-weight: 600; }
.haul-list .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.haul-empty { padding: calc(var(--u) * 1.4) !important; display: block !important; color: var(--muted); }
.spr { width: auto; height: auto; image-rendering: pixelated; display: block; justify-self: center; margin: auto; }
.tag { display: inline-block; font-size: .78em; padding: 0 5px; border: 1.5px solid var(--ink); border-radius: 3px; margin-left: 6px; vertical-align: 1px; background: var(--paper-2); }
.tag-big { background: #9ad1ff; } .tag-gold { background: var(--gold); } .tag-prism { background: #ff9ae0; } .tag-titan { background: var(--accent); color: var(--ink); }
.tag-new { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tag-twin { background: var(--paper); }
.haul-foot { border-top: var(--line); padding: calc(var(--u) * .9) calc(var(--u) * 1.2); display: flex; flex-direction: column; gap: calc(var(--u) * .7); background: var(--paper-2); }
.haul-bonus { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .9em; color: var(--muted); }
.haul-total { display: flex; align-items: center; justify-content: space-between; font-size: calc(var(--u) * 1.6); }
.haul-total b { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; --acc: var(--gold); }

/* ---------- full screens ---------- */
.screen { position: fixed; inset: 0; z-index: 10; display: none; }
.screen.open { display: block; animation: fade .18s; }
@keyframes fade { from { opacity: 0; } }
#tree { background-color: var(--night); background-image: radial-gradient(var(--night-3) 1.5px, transparent 1.6px); background-size: 24px 24px; color: var(--paper); }
.tree-view { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; }
.tree-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.tree-links { position: absolute; overflow: visible; left: 0; top: 0; }
.tree-links path { fill: none; stroke: var(--night-3); stroke-width: 4; }
.tree-links path.on { stroke: var(--paper-3); }
.tree-links path.pearl { stroke-dasharray: 4 6; }
.node { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 2px solid var(--ink); border-radius: 6px; background: var(--night-2);
  color: var(--paper); display: grid; place-items: center; box-shadow: 0 3px 0 var(--ink); cursor: pointer; --acc: var(--night-3); padding: 0; }
.node .ic { width: 34px; height: 34px; }
.node .lv { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); font-size: 12px; background: var(--ink); color: var(--paper); padding: 0 5px; border-radius: 3px; line-height: 17px; white-space: nowrap; }
.node.open { background: var(--paper-3); color: var(--ink); --acc: var(--paper); }
.node.buy { background: var(--paper); color: var(--ink); --acc: var(--accent); animation: ready 1.6s infinite; }
@keyframes ready { 50% { box-shadow: 0 3px 0 var(--ink), 0 0 0 4px rgba(255,107,61,.45); } }
.node.owned { background: var(--accent); color: var(--ink); --acc: var(--paper); }
.node.maxed { background: var(--gold); color: var(--ink); --acc: var(--paper); }
.node.peek { background: var(--night); color: var(--night-3); border-style: dashed; border-color: var(--night-3); box-shadow: none; --acc: transparent; }
.node.pearl.open, .node.pearl.buy { --acc: var(--pearl); }
.node.pearl.owned { background: var(--pearl); }
.node.root { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: var(--paper); color: var(--ink); --acc: var(--accent); }
.node.sel { outline: 3px solid var(--paper); outline-offset: 3px; }
.node.pop { animation: pop .3s; }
@keyframes pop { 40% { transform: scale(1.18); } }
.tree-top { position: absolute; top: calc(var(--u) * .9); left: calc(var(--u) * .9 + var(--safe-l)); right: calc(min(330px, 38vw) + var(--u) * 1.8 + var(--safe-r)); display: flex; justify-content: space-between; pointer-events: none; }
.tree-top > * { pointer-events: auto; }
.tree-top .btn, .tree-top .pill { color: var(--ink); }
.tree-tools { display: flex; gap: 8px; }
.node-panel { position: absolute; top: calc(var(--u) * .9); bottom: calc(var(--u) * .9 + var(--safe-b)); right: calc(var(--u) * .9 + var(--safe-r)); width: min(330px, 38vw);
  background: var(--paper); color: var(--ink); border: var(--line); border-radius: var(--r); box-shadow: 0 4px 0 var(--ink); display: flex; flex-direction: column; overflow: hidden; }
.np-head { display: flex; gap: 12px; align-items: center; padding: calc(var(--u) * 1) calc(var(--u) * 1.2); background: var(--paper-2); border-bottom: var(--line); }
.np-icon { width: 52px; height: 52px; border: var(--line); border-radius: 6px; display: grid; place-items: center; background: var(--accent); --acc: var(--paper); flex: none; }
.np-icon .ic { width: 32px; height: 32px; }
.np-head h3 { margin: 0; font-size: calc(var(--u) * 1.35); font-weight: 600; line-height: 1.1; }
.np-lv { font-size: .9em; color: var(--muted); }
.np-body { padding: calc(var(--u) * 1.1) calc(var(--u) * 1.2); display: flex; flex-direction: column; gap: calc(var(--u) * .8); flex: 1; overflow: auto; }
.np-fx { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; border: 1.5px dashed var(--paper-3); border-radius: var(--r); padding: 8px 10px; }
.np-fx dt { color: var(--muted); } .np-fx dd { margin: 0; font-weight: 600; }
.np-pips { display: flex; gap: 4px; }
.np-pips i { width: 14px; height: 8px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--paper-2); }
.np-pips i.on { background: var(--accent); }
.np-foot { padding: calc(var(--u) * .9) calc(var(--u) * 1.2); border-top: var(--line); background: var(--paper-2); display: flex; flex-direction: column; gap: 8px; }
.np-foot .btn { justify-content: space-between; --acc: var(--gold); }
.np-foot .btn.pearlbuy { --acc: var(--pearl); }
.np-season { border-top: var(--line); padding: calc(var(--u) * .9) calc(var(--u) * 1.2); background: var(--night-2); color: var(--paper); display: flex; flex-direction: column; gap: 8px; font-size: .92em; }
.np-season .btn { --acc: var(--pearl); justify-content: space-between; }

/* fishdex */
.screen-paper { background: var(--paper); }
#book.open { display: flex; }
.book-rail { width: min(230px, 26vw); background: var(--ink); color: var(--paper); padding: calc(var(--u) * .9); padding-left: calc(var(--u) * .9 + var(--safe-l)); display: flex; flex-direction: column; gap: 6px; overflow: auto; }
.rail-btn { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; text-align: left; background: transparent; border: 2px solid transparent; border-radius: var(--r); color: inherit; padding: 8px 10px; cursor: pointer; min-height: var(--tap); }
.rail-btn i { width: 14px; height: 14px; border: 2px solid var(--paper); border-radius: 2px; }
.rail-btn small { color: var(--paper-3); font-variant-numeric: tabular-nums; }
.rail-btn.on { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.rail-btn.on small { color: var(--muted); }
.rail-btn.lock { opacity: .4; }
.book-main { flex: 1; display: flex; flex-direction: column; padding: calc(var(--u) * .9) calc(var(--u) * 1.2); padding-right: calc(var(--u) * 1.2 + var(--safe-r)); gap: calc(var(--u) * .8); min-width: 0; }
.book-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.book-grid { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-auto-rows: max-content; gap: 10px; align-content: start; padding: 2px 2px 8px; }
.card { background: var(--paper); border: var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 8px 10px; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 10px; align-items: center; min-width: 0; }
.card .spr { grid-row: span 2; }
.card .nm { font-weight: 600; line-height: 1.1; overflow-wrap: anywhere; min-width: 0; }
.card .meta { font-size: .85em; color: var(--muted); overflow-wrap: anywhere; min-width: 0; }
.card .muts { grid-column: 1 / -1; display: flex; gap: 4px; align-items: center; font-size: .8em; }
.card .muts i { width: 12px; height: 12px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--paper-2); }
.card .muts i.big.on { background: #9ad1ff; } .card .muts i.gold.on { background: var(--gold); } .card .muts i.prism.on { background: #ff9ae0; } .card .muts i.titan.on { background: var(--accent); }
.card .stars { margin-left: auto; display: flex; gap: 1px; --acc: var(--gold); }
.card .stars .ic { width: 14px; height: 14px; }
.card .stars .off { --acc: var(--paper-2); color: var(--paper-3); }
.card.unknown { background: var(--paper-2); box-shadow: none; border-style: dashed; color: var(--muted); }
.book-hint { font-size: .9em; max-width: 80ch; }

/* settings + modal content */
.set-list { padding: calc(var(--u) * .6) 0; overflow: auto; flex: 1; }
.set-row { display: flex; align-items: center; gap: 12px; padding: 6px calc(var(--u) * 1.2); min-height: var(--tap); --acc: var(--paper-2); }
.set-row > span:not(.seg) { flex: 1; }
.seg { display: inline-flex; border: var(--line); border-radius: var(--r); overflow: hidden; }
.seg button { border: 0; background: var(--paper); padding: 0 14px; min-height: 38px; cursor: pointer; font-weight: 600; }
.seg button + button { border-left: var(--line); }
.seg button.on { background: var(--ink); color: var(--paper); }
.set-note { padding: calc(var(--u) * .8) calc(var(--u) * 1.2); font-size: .85em; color: var(--muted); }
.modal-big { font-size: calc(var(--u) * 2.4); font-weight: 600; display: flex; align-items: center; gap: 10px; --acc: var(--gold); }
.modal-big .ic { width: 1em; height: 1em; }

.toasts { position: fixed; left: calc(var(--u) * 5 + var(--safe-l)); top: calc(var(--u) * 5.6); display: flex; flex-direction: column; gap: 6px; z-index: 30; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; background: var(--paper); border: var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 4px 12px 4px 6px; animation: slidein .25s; }
.toast .spr { max-height: 32px; }
.toast small { display: block; color: var(--muted); font-size: .78em; text-transform: uppercase; letter-spacing: .06em; }
.toast.out { opacity: 0; transform: translateX(-8px); transition: .3s; }

/* asks to turn the phone when the orientation picked in Settings does not match */
.rotate { position: fixed; inset: 0; z-index: 200; background: var(--night); color: var(--paper); display: none; padding: 10vw; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; --acc: var(--accent); }
.rotate .ic { width: 64px; height: 64px; }
.rotate .btn { color: var(--ink); margin-top: 8px; }
body.need-rotate .rotate { display: flex; }

@media (max-height: 420px) and (orientation: landscape) {
  .sheet { width: min(400px, 50vw); }
  .haul-list li { padding-top: 2px; padding-bottom: 2px; }
  .node-panel { width: min(300px, 40vw); }
  .tree-top { right: calc(min(300px, 40vw) + var(--u) * 1.8 + var(--safe-r)); }
}

/* ---------- trophies, activity, share, shop (js/trophies.js) ---------- */
.pill-shell { --acc: var(--shell); pointer-events: auto; cursor: pointer; font: inherit; color: inherit; }
.hud-right .btn { position: relative; }
.hud-right .badge { top: -8px; right: -8px; min-width: 20px; height: 20px; font-size: .75em; }
.badge.dot { min-width: 14px; width: 14px; height: 14px; padding: 0; top: -5px; right: -5px; background: var(--shell); }
.btn-shell { background: var(--shell); --acc: #ffd9e1; }
.btn-wa { --acc: #7fd99b; }
.rail-btn .rail-ic { width: 16px; height: 16px; --acc: var(--paper-3); }
.rail-btn.on .rail-ic { --acc: var(--accent); }
.rail-btn:has(.rail-ic) { grid-template-columns: 16px 1fr auto; }
.rail-wallet { margin-top: auto; padding: 8px 4px 2px; }
.rail-wallet .pill { color: var(--ink); }
.tier-chip { display: inline-block; margin: 2px 6px 0 0; padding: 0 6px; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--tc); color: var(--ink); font-size: .85em; }
.card.ach { grid-template-columns: 44px minmax(0, 1fr); align-items: start; }
.ach-ic { grid-row: span 2; width: 44px; height: 44px; display: grid; place-items: center; background: var(--paper-2); border: var(--line); border-radius: var(--r); --acc: var(--paper-3); color: var(--muted); }
.ach-ic .ic { width: 26px; height: 26px; }
.card.ach.done .ach-ic { background: var(--tc); color: var(--ink); --acc: var(--paper); }
.card.ach:not(.done) { background: var(--paper-2); box-shadow: none; }
.card.ach:not(.done) .nm { color: var(--ink-3); }
.ach-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: .8em; min-width: 0; }
.ach-foot small { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tier-tag { padding: 0 5px; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--tc); white-space: nowrap; }
.ach-ok { color: var(--muted); white-space: nowrap; }
.ach-pay { margin-left: auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.bar { flex: 1; min-width: 30px; height: 10px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--paper); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--tc); border-right: 1.5px solid var(--ink); }
.stat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-flow: row dense; }
.stat { background: var(--paper); border: var(--line); border-radius: var(--r); padding: 8px 10px; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 8px; align-items: center; --acc: var(--paper-2); }
.stat .ic { width: 20px; height: 20px; grid-row: span 2; }
.stat small { color: var(--muted); font-size: .8em; line-height: 1.1; overflow-wrap: anywhere; }
.stat b { font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-big { grid-column: span 2; grid-template-columns: 76px minmax(0, 1fr); }
.stat-big .spr { grid-row: span 3; }
.share-wrap { flex: 1; min-height: 0; display: flex; gap: calc(var(--u) * 1.2); align-items: flex-start; overflow: auto; }
.share-img { height: 100%; max-height: 100%; width: auto; max-width: 52%; border: var(--line); border-radius: var(--r); box-shadow: var(--shadow); image-rendering: pixelated; }
.share-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-width: 34ch; }
.share-side .btn { justify-content: flex-start; }
.share-side p { font-size: .9em; }
.gear-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card.gear { grid-template-columns: 120px minmax(0, 1fr); align-items: start; gap: 4px 12px; }
.gear-pic { grid-row: span 2; width: 120px; height: 72px; image-rendering: pixelated; background: var(--sea); border: var(--line); border-radius: var(--r); }
.card.gear .btn { grid-column: 1 / -1; justify-content: flex-start; min-height: calc(var(--tap) * .85); font-size: .9em; }
.card.gear .btn[data-act=buy] { justify-content: space-between; }
.card.gear .btn .cost { display: inline-flex; gap: 4px; align-items: center; --acc: var(--shell); }
.card.gear.locked { background: var(--paper-2); box-shadow: none; border-style: dashed; }
.card.gear.locked .gear-pic { filter: grayscale(1) brightness(.75); }
.card.gear.worn { outline: 3px solid var(--accent); outline-offset: -1px; }
.toast-ach .ach-ic { width: 34px; height: 34px; background: var(--tc); color: var(--ink); --acc: var(--paper); }
.toast-ach .ach-ic .ic { width: 20px; height: 20px; }
.toast-ach .ach-pay { margin-left: 6px; }

/* ---------- portrait (body.port, set from the real window shape) ----------
   Thumb zone first: navigation moves to a bottom bar, sheets become bottom sheets, side rails
   become a tab strip on top, and the camera pans across the sea (see R.ox). */
body.port { --u: clamp(9px, 3.3vw, 14px); --tap: max(44px, calc(var(--u) * 3.5)); }
.port .wallet { flex-wrap: wrap; max-width: calc(100vw - var(--u) * 1.8); }
.port .pill { font-size: calc(var(--u) * 1.3); height: calc(var(--tap) * .78); }
.port .hud-right { top: auto; left: calc(var(--u) * .9 + var(--safe-l)); bottom: calc(var(--u) * .9 + var(--safe-b));
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.port .hud-right .btn.icon { width: auto; }
.port .cast-info { top: calc(var(--u) * .9); }
.port .dock { bottom: calc(var(--tap) + var(--u) * 1.7 + var(--safe-b)); flex-wrap: wrap; align-items: stretch; gap: calc(var(--u) * .6); }
.port .dock-stats { order: 0; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 0 1em; }
.port .dock-stats span { margin: 0; }
.port .btn-cast { order: 1; flex: 1 1 100%; justify-content: center; }
.port .btn-tree { order: 2; flex: 1; justify-content: center; }
.port .btn-auto { order: 3; flex: 1; justify-content: center; }
.port .hint { left: calc(var(--u) * .9 + var(--safe-l)); right: calc(var(--u) * .9 + var(--safe-r)); max-width: none; }
.port .stick { right: auto; left: 50%; margin-left: calc(var(--u) * -5.5); width: calc(var(--u) * 11); height: calc(var(--u) * 11); bottom: calc(var(--u) * 2 + var(--safe-b)); }
body.port.stick-on .hint { right: calc(var(--u) * .9 + var(--safe-r)); bottom: calc(var(--u) * 14.5 + var(--safe-b)); }
.port .banner { left: calc(var(--u) * .9 + var(--safe-l)); top: calc(var(--u) * 9); }
.port .toasts { left: calc(var(--u) * .9 + var(--safe-l)); right: calc(var(--u) * .9); top: calc(var(--u) * 5.2); }
.port .toast { max-width: 100%; }

.port .sheet { top: auto; left: calc(var(--u) * .6 + var(--safe-l)); right: calc(var(--u) * .6 + var(--safe-r)); bottom: calc(var(--u) * .6 + var(--safe-b));
  width: auto; max-height: 80vh; transform: translateY(calc(100% + 40px)); }
.port .sheet.open { transform: none; }
.port #haul { max-height: 60vh; }

.port .menu { align-items: flex-end; }
.port .menu-panel { flex: 1; width: auto; max-height: calc(100% - var(--u) * 1.8); margin: calc(var(--u) * .9); margin-bottom: calc(var(--u) * .9 + var(--safe-b)); animation-name: slideup; }
@keyframes slideup { from { transform: translateY(16px); opacity: 0; } }
.port .menu-foot { margin-top: 0; }

.port .tree-top { right: calc(var(--u) * .9 + var(--safe-r)); }
.port .node-panel { top: auto; left: calc(var(--u) * .9 + var(--safe-l)); width: auto; max-height: 48vh; }

.port #book.open { flex-direction: column; }
.port .book-rail { width: auto; flex: none; flex-direction: row; align-items: center; overflow-x: auto; overflow-y: hidden; padding: calc(var(--u) * .6); scrollbar-width: none; }
.port .book-rail h2 { display: none; }
.port .rail-btn { flex: none; min-height: calc(var(--tap) * .85); padding: 4px 10px; gap: 8px; }
.port .rail-wallet { margin: 0 0 0 auto; padding: 0 0 0 8px; }
.port .book-main { min-height: 0; padding: calc(var(--u) * .8) calc(var(--u) * .9) calc(var(--u) * .4 + var(--safe-b)); }
.port .book-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.port .stat-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.port .share-wrap { flex-direction: column; align-items: stretch; }
.port .share-img { max-width: 100%; max-height: 56vh; width: auto; height: auto; align-self: flex-start; }
.port .share-side { max-width: none; }
.set-wrap { flex-wrap: wrap; }
.port .rail-btn:not(.on) small { display: none; }

/* the whole sea (global counter): its own card in the bottom-right corner of the start menu */
.menu-global { pointer-events: auto; position: absolute; right: calc(var(--u) * .9 + var(--safe-r, 0px)); bottom: calc(var(--u) * .9 + var(--safe-b));
  width: min(240px, 36vw); background: var(--night-2); color: var(--paper); border: var(--line); border-radius: var(--r); box-shadow: 0 3px 0 var(--ink);
  padding: calc(var(--u) * .8) calc(var(--u) * 1); display: flex; flex-direction: column; gap: calc(var(--u) * .45); --acc: var(--sea); animation: slidein .35s; }
.menu-global.hidden { display: none; }
.menu-global > b { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: calc(var(--u) * 1.05); letter-spacing: .06em; text-transform: uppercase; color: var(--sea); }
.menu-global > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-top: 1px solid rgba(255,255,255,.08); padding-top: calc(var(--u) * .4); }
.menu-global small { color: var(--paper-3); font-size: calc(var(--u) * .9); line-height: 1.2; }
.menu-global span { flex: none; font-size: calc(var(--u) * 1.3); font-weight: 600; font-variant-numeric: tabular-nums; }
.menu-global .g-big { flex-direction: column; align-items: flex-start; gap: 2px; border-top: 0; padding-top: 0; }
.menu-global .g-big span { font-size: calc(var(--u) * 2.4); line-height: 1; color: var(--gold); }
.port .menu-global { top: calc(var(--u) * .9 + var(--safe-t, 0px)); bottom: auto; width: min(200px, 52vw); padding: calc(var(--u) * .6) calc(var(--u) * .8); }
.port .menu-global .g-big span { font-size: calc(var(--u) * 1.8); }