/* GENERATED by pipeline/assets/ui/game/make_look.py from data/ui_colors.json and
   pipeline/assets/ui/game/manifest.json. Do not edit: change theme_rules.css or the script. */

:root {
  /* game colours (file:line in the decompile, or the measured sprite) */
  --c-panel-bg: rgba(63, 82, 151, 0.7);  /* Terraria.GameContent.UI.Elements/UIPanel.cs:20 */
  --c-panel-border: #000000;  /* Terraria.GameContent.UI.Elements/UIPanel.cs:18 */
  --c-panel-hover-bg: #495eab;  /* Terraria.GameContent.UI.States/UICharacterSelect.cs:125 */
  --c-accent: #ffe745;  /* Terraria/Main.cs:886 */
  --c-window-bg: rgba(33, 43, 79, 0.8);  /* Terraria.GameContent.UI.States/UIBestiaryTest.cs:85 */
  --c-title-bg: #495eab;  /* Terraria.GameContent.UI.States/UICharacterSelect.cs:63 */
  --c-info-bg: #495eab;  /* Terraria.GameContent.UI.Elements/UIBestiaryEntryInfoPage.cs:34 */
  --c-info-border: #5974d5;  /* Terraria.GameContent.UI.Elements/UIBestiaryEntryInfoPage.cs:33 */
  --c-stat-bg: #2b3865;  /* Terraria.GameContent.Bestiary/FlavorTextBestiaryInfoElement.cs:29 */
  --c-search-bg: #232853;  /* Terraria.GameContent.UI.Elements/UIWrappedSearchBar.cs:118 */
  --c-search-border: #232853;  /* Terraria.GameContent.UI.Elements/UIWrappedSearchBar.cs:119 */
  --c-filter-bg: rgba(73, 94, 171, 0.9);  /* Terraria.GameContent.UI.Elements/UIBestiaryFilteringOptionsGrid.cs:56 */
  --c-filter-border: rgba(89, 116, 213, 0.9);  /* Terraria.GameContent.UI.Elements/UIBestiaryFilteringOptionsGrid.cs:55 */
  --c-tip-bg: rgba(23, 25, 81, 0.925);  /* Terraria/Main.cs:20585 */
  --c-invbg: rgba(63, 65, 151, 0.785);  /* Terraria/Utils.cs:2718 */
  --c-slot-tint: rgba(220, 220, 220, 0.8627);  /* Terraria/Main.cs:67684 */
  --c-menu-hover: #ffd700;  /* Terraria/Main.cs:52517 */
  --c-progress-fill: #3389ff;  /* Terraria.GameContent.UI.States/UIBestiaryTest.cs:174 */
  --c-progress-empty: #232b51;  /* Terraria.GameContent.UI.States/UIBestiaryTest.cs:175 */
  --c-tip-bad: #be7878;  /* Terraria/Main.cs:20820 */
  --c-tip-good: #78be78;  /* Terraria/Main.cs:20821 */
  --c-coin-platinum: #dcdcc6;  /* Terraria.ID/Colors.cs:31 */
  --c-coin-gold: #e0c95c;  /* Terraria.ID/Colors.cs:33 */
  --c-coin-silver: #b5c0c1;  /* Terraria.ID/Colors.cs:35 */
  --c-coin-copper: #f68a60;  /* Terraria.ID/Colors.cs:37 */
  --c-mode-expert: #ff9900;  /* Terraria.ID/Colors.cs:43 */
  --c-mode-master: #ff261a;  /* Terraria.ID/Colors.cs:45 */
  --c-text-shadow: #000000;  /* Terraria.GameContent.UI.Elements/UIText.cs:25 */
  --c-ink: #ffffff;  /* Terraria.GameContent.UI.Elements/UIText.cs:23 */
  --c-ink-soft: #bebebe;  /* Terraria/Main.cs:18404 */
  --c-hint: #808080;  /* Terraria.GameContent.UI.Elements/UISearchBar.cs:74 */
  --c-rare-m1: #828282;  /* Terraria/Main.cs:20759 */
  --c-rare-0: #ffffff;  /* Terraria/Main.cs:20744 */
  --c-rare-1: #9696ff;  /* Terraria/Main.cs:20763 */
  --c-rare-2: #96ff96;  /* Terraria/Main.cs:20767 */
  --c-rare-3: #ffc896;  /* Terraria/Main.cs:20771 */
  --c-rare-4: #ff9696;  /* Terraria/Main.cs:20775 */
  --c-rare-5: #ff96ff;  /* Terraria/Main.cs:20779 */
  --c-rare-6: #d2a0ff;  /* Terraria/Main.cs:20783 */
  --c-rare-7: #96ff0a;  /* Terraria/Main.cs:20787 */
  --c-rare-8: #ffff0a;  /* Terraria/Main.cs:20791 */
  --c-rare-9: #05c8ff;  /* Terraria/Main.cs:20795 */
  --c-rare-10: #ff2864;  /* Terraria/Main.cs:20799 */
  --c-rare-11: #b428ff;  /* Terraria/Main.cs:20803 */
  --c-rare-m11: #ffaf00;  /* Terraria/Main.cs:20755 */
  --c-rare-m13: #ffc800;  /* Terraria/Main.cs:20747 */
  --c-sky-top: #352bf3;  /* Background_0.png pixel (0, 0) */
  --c-sky-bottom: #84aaf8;  /* Background_0.png pixel (0, 1399) */
  --c-forest-ground: #286f58;  /* Background_11.png median of rows 400..480 */

  /* game sprites (tints baked) */
  --s-panel: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAyklEQVR42mNkIAz+M5AGGPFJMjHQGbAQ8pGeTf4hBgYGBkExjY/4DHr/6gY/AwMDw6UjE//j8zHdfciI7jMFLd9LDAwMDFKKds8YGBgYWNl5fpNi4O+fX1gZGBgYnt0/JMXAwMDw4NpmPWS7Bj4OyfUZDMD0wcxB8uHAxeF/UlIjqQAp9doNbBxS22e4zKW7D0ctHLVw8FvIgl4i0KqkGTz1oZV39w5Kagv0evHY1lKPwVUfwmpqatX4A55KGWnQarMbtK224dnyBgCPb09Z/hhsOQAAAABJRU5ErkJggg==");
  --s-panel-hover: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAA0UlEQVR42mNkIAD+P3f9z0ACYJTczYhPnomBzoCFkI/yJgUxMDAwMNx5KoLXIBXpN1D9DP/x+ZjuPmRE99nkdbYMDAwMDIcuKjMwMDAwfP3BRpKB3By/GBgYGBjs9O8yMDAwMOQGHUbx6cDHIbk+gwGYPpg5MB8OXCqFxR0sNZLrM1w+hZkLS70DF4eE8hm5AN1cuvtw1MJRCwe/hSzo9Rm18yPM3MFTH4bWJ1ClTIXVi6sbFwyy+hBWU1Orxh/wVMpI7VbbpLx1DIOz1TZsW94AvedZA/1F3AEAAAAASUVORK5CYII=");
  --s-window: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAy0lEQVR42mNkIAz+M5AGGPFJMjHQGbAQ8pGkos11BgYGBg4u4W/4DPrx7S0XAwMDw/P7R/7j8zHdfciI7jMhce2HDAwMDLyCcu8ZGBgYmJjZ/pJi4L+/v5gZGBgYPr9/JMjAwMDw7uVVeWS7Bj4OyfUZPI6g+mDmIPlw4OLwPympkVSAlHo1BzYOqe0zXObS3YejFo5aOPgtZEEvEWhV0gye+lBew/MCJbUFer348MZ2g8FVH8JqamrV+AOeShlp0GrTHLSttuHZ8gYA8IRPMxW0SKAAAAAASUVORK5CYII=");
  --s-title: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAwUlEQVR42mNkIAz+M5AGGPFJMjHQGTAS8pGVdycDAwMDA7+wEl6DPr69x8DAwMBwbGs5XjsG1If/GRgYGHQs0hkYGBgYJBWsGBgYGBhY2LhIMvDPr28MDAwMDM8fHGNgYGBguHJiJopddPchC7oAuT6DGwjVBzMHyYcDF4f/SUmNpAL01DtwcUhtn+Eyl+4+HLVw1MLBbyELeolAq5Jm8NSHrhELKaot0OvF3SviB1l9CKupqVXjj7baBsSHw6vlDQAT6jpN3iuo+QAAAABJRU5ErkJggg==");
  --s-row: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAzElEQVR42mNkIAAiS67+ZyABLO/RZsQnz8RAZ8BIyEdvn186xMDAwPDz+4eP+Axi5xTgZ2BgYBCW1LPD5+OB8yHMZ5/fP7jEwMDA8PXT82cMDAwM//7+/k2KgUzMrKwMDAwM3HySUgwMDAy8ggp6yD6luw9Z0AXI9RkMwPTBzIH5cODiEBZ3xKZGUgF66h24OKS2z3CZS3cfjlo4auHgt5AFvUSgVUkzeOrDFw+P76CktkCvFyXkLT0GV30Iq6mpVeOPttro78Nh1/IGAC24aq4LYdmbAAAAAElFTkSuQmCC");
  --s-row-hover: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAA2ElEQVR42mNkIAD+P3f9z0ACYJTczYhPnomBzoCFkI+KJ9kcYmBgYDh7U+wjPoOM1V/xQ/Qz/MfnY7r7kBHdZ/O2aF1iYGBg2HRY8RkDAwPDhy/sv0kxUIDnJysDAwODn+19KQYGBoYkn2t6yD4d+Dgk12cwANMHMwfmw4FLpbC4g6VGcn2Gy6cwc2Gpd+DikFA+Ixegm0t3H45aOGrh4LeQBb0+o3Z+hJk7eOrDgHLvHdQoU2H14obOrR6Dqz6E1dTUqvEHPJUyUrvV1pt3xG5wttqGbcsbAF5SbbAWlBQaAAAAAElFTkSuQmCC");
  --s-stat: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAYAAAAfrhY5AAAAnUlEQVR42u3XoQ5BYRiA4cev2myCckwVRMVMlV2FK1BF1RXI7kGSzCTtVInNZjubO1DODQjOX773Bp78tmA8XRXYYY7C/3rijHV53T9b4+lqhAt6mqvCLGHbMKz2tgkLeVokdDPh3SRjgQceeOCBBx544IEH/jP+yWR/Ek6Z8FPCpn6nJquwab8ft3d/MDlgWD9U54/oC0csy+v+/gU1WBwGxMnG3AAAAABJRU5ErkJggg==");
  --s-search: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAT0lEQVR42mNkIACUNYL/M5AA7t5Yy4hPnomBzoCRUh+R6uOB8yG1fYbLp3T34fC3kJHWcTfygnTUwlELRy0ciWXpaH04fOJw+Lfahm3LGwDKuRnPOwf8TgAAAABJRU5ErkJggg==");
  --s-tip: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAYAAADFeBvrAAAAk0lEQVR42u3aMQ6DMBAEQJs6JSIv4tW8KCgldULlBgmcIoiLM9vSMFpvdzlVkrvbMwXK+7X0R9+71FhyrZHhPob64fkxHTbWbkOlmWiNfNpYaaq5hoDCb+hXt7O3JU8OCAgICAgICAgICAgICAgICAgICAgICAgICAjoxLhT8OSAvrSh7ZZKXGNFa6jW2NX5u4vGFcBPKF22FwlwAAAAAElFTkSuQmCC");
  --s-invbox: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAYAAADFeBvrAAAAl0lEQVR42u3asQ2DMBQEUBMhMQKrRLAcyxGxCiNEoqBygxScIlE+zruWhqfzdb9JhbRdv6RA2Z7r/ez7LVWWptTIOEyhfnh+TKeN1dtQbiZaI+82lpuqriGg8Bu66nZebcmTAwICAgICAgICAgICAgICAgICAgICAgICAgIC+mLcKXhyQB/a0HFLOa6xojVUauzX+buLxh3DtihMIVyGGwAAAABJRU5ErkJggg==");
  --s-slot: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAYAAADFeBvrAAAAmElEQVR42u3asQ2DMBQEUJMFWIECKcpaGSxrISQKVmCDVG6QwCmC+Jh3LQ1P5+t+kwpp225KgbIsc7/3/ZEqS1Nq5Pl6h/rhcfjsNlZvQ7mZaI382lhuqrqGgMJv6Krb2dqSJwcEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBHRg3Cl4ckB/2tB6SzmusaI1VGrs7NzuovELZhkofMFz1jQAAAAASUVORK5CYII=");
  --s-slot-sel: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAYAAADFeBvrAAABqUlEQVR42u2aTU7DMBBGv3HcE7AqC3IGNtyHLcfiOEhIXKEIiQ03qLBZpMH5qT12BOp8iNnYUqyqLy8zTuQRKHGz30UYitf3o5SuO/yxEM3I4aUHRIalIsM9cA6QDnDdMIqbzLt0fTmXDsAOgG8c07y/figa8zpzBOIJPQKQAIST2zBxXDM/ewt/ydBo5vC8TzZmZsSUqWTsfmZqbSjGZANTM6Aw5dVHjAyqbIgQSr5z5+mqkC/2c2qsfr5ohtCUz5dnTqg2QwRQE0MBiI4eamGIH+pMDnFDZXKIF8oXX0IJoZQqxwdVsQ9xQVXuQzxQDW8KHFCNbwr2oeZAAD3U+pEjh/Ltn962ofy2T2+DUFVFgRBKL9tkUHVlmwGqeWO1DrVpYyWAat9YrUKtgAIARwy1AvocT4y4oeaGQAyVNcQKVTREDJU3xAZVZYgJqtoQC1STIQaoZkPWoTYZsgy12ZBVqGyfwuNxqBod6kb17FXq18BVrku/2d++KX0KbKbUY/2A9jAE9TNAl4TK9fosc2kMaznV333M/m97N5a1nNI6SbQF/x2NF44vbrF8vESjgkcAAAAASUVORK5CYII=");
  --s-icon-search: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAABiUlEQVR42rWVP0gCURzHP14HbUEhR9LU1lB4LTdVNATVFDTVEA2FR4NT0WS1uEVFOCU1SEuTW9hWUDQE4R0d1FRjZEJpkXfmaYNhSCqdZ1948P5++L3v+733oKwAUGpRCQB4vit7K2tXmJaNG5mWzf7uEIDqAUpLy5d85Aqknk1XYFH08JZNc3Y8iwiQyeZ5ec3jVoVCibyVAUDgnyQ2GrxLqlXtvsE99+C7pMr25ja6rgOgaRp6Uv0zXGgE9Y1PMbG6zu3AMO1zQfz9/l+7cAQGKpECZI/KaSjLMgCpxyt3Hu8kTitQp6obsaZpAHTMtLERG6vqa/rwuroX0I0D/IcRZFnm5OYcS9PozD3hFWyKzYIln1L22ThAN3689go2/b09GA9R+J7j2GOpxsIiYDxECU6PEIkv4vXvN3d4teApIBKPEpqfJByrD3d8pSWfQlEKEI4lGqae2EwqST6FlJs8dmqTKyscXZC398+WwDIv91hmmqqvSRndwi7kXMOvL0IAlZeq5Z/pF2VhsbJyhmC6AAAAAElFTkSuQmCC");
  --s-star: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABCklEQVR42pWSMUvDQBiGn2qHLoIRunTpUCSU2xyyOUhvKB07ZCy4xP/gcGiGTv0DugiO/gKFQqG/IEOLSxVELIKDawbD59KEJFxj/bZ7732+u+/egy1lfCX8t4yvRJJIquC9HfoEO4HGV6I9FwDtuRhf3djAevk62nNp9ePCGih4wodlrQ4wMm063XG28fJ8CUCrH9PpjjnN6ffhG0BQA9DKEXN+lhnLDQDWjw3CuxnT5fcFwD7A61d8/f7xeXVycMzP4RNHzV4lBNxaY5AkkvlkKKvFQCSJRCtHNq8bWLNLjavFQLRyZD4ZZk028PbQUwgI8nDu1GJp5RSg1GTRscK2WSpn/OuLlfVfAj6VR0VQkXYAAAAASUVORK5CYII=");
  --s-star-dim: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAA5ElEQVR42o2SQW6FIBCGP6grTAiLifEAXqc9hu9M7QGVGFYuSIwJdvFagtZn/XcM8w0z/wAvJCIbF9KvoK7rLmHN/+pvgSKyWWsBsNYiIp9nYHVsx1qL1np3BnY5IQRVATjnEJHy4tmO1ogITdPk+DAMAL0CMMZsbdvmxGMBgJQS3ntijI88Y4xRee9JKeXkKwj4ysPEGNU8z/nFlNKvWX8ggLfSTeccxhhCCIzjSF3X1HWNUoplWd7Xdf04XYeIZANijA/vPdM0ZXPKnVZFqzuomH0r13MqY8z2U7W/E7/1xY7xb5CEfoHzsTO7AAAAAElFTkSuQmCC");
  --s-sky: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAV4CAIAAABpU8l2AAAEUElEQVR42u3bwQ0CIRAFUDDbjWf7L8oC9Gi4aIibZWZ4VvDC/P0Cq/1xf7ZIn1sL9jlab1Yo18i6FRJqIBkCil2MMgSkGO2HgBQjkFArRiDFCCTUilGGZjPUrRCQHpIhIDtGIyu9QopRqI1MhqyQYpQhIKHWQzKkGIGAxh4SaiDFCCRDNmhAihFIhhQjkGIEclAE0kNGBqQYgfQQENBMMfrFOZBiBFrcQ0ItQ4rRyICcXIEUo5EBKUYgxWiF9JCReeyNDOhbDwm1DClGIwNSjDKkGI0MSDHKkGK0QpEfexny2AMJtWKUIY890PWh9hN4B0VPme8yKwSkGGVIMVohPSTUQg0kQ4pRhoCAhNoGTYaAgNKGWg/JkJEBCbVi1ENAMmRkilGogWTIYw+kGIFkSDFWy5AfeAMpRsUIZIMGJNSKEUgxGtlWK6SHhNrIZMgKKUahNjIZ0kMyJNRGBjT2kAwB6SEgIMUIpBiBgBQjkGIEMrKpYpQhoTay/fZDfnEOpBiNDMhBEUgPAQEpRiDFCBS6h4RahhSjkQEpRhlSjEbmoGhkQHoIyH5IhoCEGkgxypAeskJAilGGFKMVAlKMMgT0yZCfwOd67H25euyBhFoxGhmQHjIyxShDQIrRCjm5yhCQDAEpRqEGAgICAgICArKFNTIgICAgR2kgICAgICAgICCgLHtqtx9AQEBAQEBAQEBAQEBAQLnP9t6X/Vohtx9AQEBAQEBAQEBAQEBAQEBAV35cxwABAQEBAQFtvx/yAg8ICAgICKj6t73bDyAgICAgICAgICAgICAgIKArP65jgOqF2htFICAgICAgICAgICAgoOGg6PYDCAgICAgICAgICGizY5D3ZUBAQKt7yHUMEBAQEBAQEBAQEBAQEBBQaZDbDyAgICCg9N9l3igCAQEBAQEBAQEl28K6jgECAgICAgICAgICAgICAjrzc/T+skJAQEBAQEBAQEBAQEBAQEB1QX5qAQQEBAQEBAQElG0L6w9vQEBAQEDZv8tcxwABAQEBAQEBAQEBAQEBAZUGuf0AAgJa3kPeKAIBAQEBAQEBAQEBbXYMch0DBAQEBAQEBAQEBAQENBwUvS8DKhdqtx9AQEBAQEBAQEBAQEBAQEClQW4/gICAgICAyn/be4EHBAQEBAQEBBRsg+Y6BggICAgICAgICAgICAgIqDTI7Ue+kXmjCAQEBAQEBAQEBAQEBASU+2zvOgYICAgICAgICAjovz2192VAQEBA0Zva7QcQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQUGjQGwlFD5SYv9ViAAAAAElFTkSuQmCC");
  --s-slot-bestiary: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAYAAABxLuKEAAAA0ElEQVR42u3csQ2DUBRDUX+UIegyCCuwR2bKHlmBQeiYItBEqR6pIqA4HsG6z/aXEC0f9cNjDWWZni1JOlbUakipdQtbdozJmws1MY0LNTFuqZJW2j8lxCCGMU4JMZavHYMYxAhfxtgxJGO0koyRMYhBDGOckrpGjOVLwlfGOCXEyJiTjfEVCGIMPMQgBjEXGnhqCTEyBjGMcUpe15eva84wxsDTSsJXxtgxMgYxjNFKWokYI2NkDGMONcbj2vJFzB/0taW/j9BJsswv/6j6pQ2Sl0Vra+ToHgAAAABJRU5ErkJggg==");
  --s-stat-hp: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAfCAYAAAAY7MgsAAAB5UlEQVR42u2ay0sCURTGvzMzRYUkFWgPCoRyQIMWGkWPZVC06A9IooL2QeAfEQQtW1bU31ArNz02FtQmepGL0F4gGC7ErNvizgRNmUqoTJ1vd+65M4tvvt/cwzAEAN6+mY6autoVEI0A6ACrnIpDiP2XTHbp8nQzTnpwXlc15ZBAzexN5SQgkq+5tyHV3RlYI6IAW1JZEaieiFoVAo2xHVV7CGMKCE62ompPwKkV2tN4tP7t+nNwtqg+62cpbEF1pRVK/qLbDQDob2v/1J+29K1aNfpMAhNgLwLyJd8TmpQbDs4AANt5brh122BczyQwAXY+A74k39SwT64bZSwWk7VHroQg6+id7CeIjLHoAQDgaHSz60yADQj4kPHON5P/UVtkkmCeAbrG5jIBdiYgepf4VHvyJN46/bCYAHsTkPBOyPn9ckfO8wVuYE2+rl0DAMKPj3KhZ5xdZgJsRIA5pxci4SLXXVLyef5nAuw1BVlJCF/tAgCWXS5OPhPwd0T+wQVRzMa08S0HFhI4+UzA/yAgHwmcfCbA5lOQQKqUX1PMhKc5+b+XQEoBiQg7Ua0DQETIPzDnE6Tu8b+hlQ6/SJJ4HVWf4idPTS2924qmdgFoJiIH21NG44W4B7Cby2Snzo83bt4BtpCWEMbp1RoAAAAASUVORK5CYII=");
  --s-stat-attack: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAfCAYAAAAY7MgsAAAB9UlEQVR42u2aQUsbURSFvzszlSrSoIVEELNwoVAFQVMiIeLKtassFSv4A4pd5ico3Xaplq6Cpe5cCWLIypZ2VxQEtYGqIKSIiFWfi/hIJ6SIyCRMvGc37y0Gzjvf3HsfIwB9Q9Pdz563LCKSBrpRBakixuT/XlzO7/xYKUp/Yrbf9ZyCIJ3qTf1kMKfXVzcpN9Yz8kFERtSS+kqQVhHp8gSZCOQNpa3a65Exdb9yCBMOQkStaNgJRLygkr+08tG3PDM9BcDZnyMA2l/E9AAARy1orLygkp/NZgGIx+PqshLQzATck/xCvrx/Jn3qthIQIgKOd1cBiEajtfv4u+S/nX/3oORr96MEhKsGpNLlxCeTSQDeLy74kp/L5TT5SkCIh+GB0TlTa8NOrOdHeQCGE68ByGQymnwl4AnUgEpy0wB82y6T8Otg31cDbE3Q5CsBzdkF2RqQ6O0BYHvv0FcDqknQ+34lINwE2AnYanI8BcDaZgGAtpi/JlTfdup9vxIQbgLs3Y+dgL98XvUl38o+2/3Kut56KgHN0AXZyfb/8wG+OUGlBISUAEPp319Tqifa+77p2u08QoaSg5gNdaJBErMhA8k3r4y4W/pvaL3Db07FXI+5J8XvJx0vBz85nhsHOkWkXe0J0HhjfgPrVxeXkz+/Lu/dApaOnF8biXnfAAAAAElFTkSuQmCC");
  --s-stat-defense: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAfCAYAAAAY7MgsAAAB9ElEQVR42u2aP0hCURTGv3N9QUUkFVRQ2VRBQUuQZTo2N4RbS0PQHhSBa0RFe0NrkxXh1CSU/XPLLQoCJaEIAqMhSO9pusUT8xmVmpxve+/e9x587/vdcy5cAoD+8fmuOq03NbFfAV0Q/Zk0kFZMJ29KLVyfb6VpeGJmIJurPyNQq9hTPjH4yXK9+lxt3aNbBBoRS8orAjVoWJ0Wa5okcpidif3sa+6AOF6IAk2TShHcYkVlpAhuq5Tknx4dFxy+SSaLPp5IJAAAy0uLAID2vmlxPf8niAWVlVVK8ncjEQBAPB4v+rJUKmW79ng8AIDVtXUhQQj4TwTkrfEm+RsrKyhlvlEoFAIAeL1e2/2X5wcAQFNzhxAgGaxiAkwX81XC+3p7bTVCJATUFgG/JafuSQgQVScBJrmmv8+vCU4Jv0slbfsBkRBQdaKhsTnOv/nRp/M1AMDnD9hICAaDRQk4O4nZnjvY3wMANHb4bfNkHyAEVGcNMMl8eS6c6HA4XJAESb4QUBs14Ls1wXQ7knwhoDYJcCLBSJIvBNTWTtipOzKJN5LkCwH/jwDNyHz3aMpnsv0O46Ji0oyMUsRRsaJCyw9xlIa8s4NMrpicDS2vGPxEnAu4HtOXjy09ozuKtAfMrUTUJPb8ofGs76FwmCVr6upi+/Ydbxq/rNLTqgAAAAAASUVORK5CYII=");
  --s-stat-knockback: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAfCAYAAAAY7MgsAAACMklEQVR42u1Zv0tbURT+zstTFNL6a4ggbZeig2IHHYpEnBzSJZTOdtAK2XX0T9A9gx3aktHBRTsJwZBJoXUSKYUOAUVItekgqfF0ePek3EviE8TEV8+3vB/n3Duc933nx30EAMMv3g51dHWugSgJYAiKu0QJzIU/F9Wlo68fSzQyOT8S870igfo1Nq0Dg8u1y6upWOLJRJaIJjQkrQWBuolo0CPQrIajbR9h1gehxzWkecN63qQ3DTcQvzB72D4P+Av0eBqF9sK/zpiZmQpu8hu3smfzRQDA718nAID444RG3kAVcB8VUM/VhtnLnzIBg9cPLEbH340bv6LFeHm/OpcFAOQqSY20KiCCNWD721nAbMN8YfayufY9mzYKsdeJUmQ9TMrX3K8KiJYCUs97rZzvMr9SnTTPgf/PH7uWv6zPVTTQqoAoKUAmWLercZkvcJWQmTmwN8wXgu4KOgmrAqI4B0ifL92OMF2Y/6hzr2ENEPybA3QSVgVEcQ7YXHhlvRemu92PQGpH+v2WzgGqgP9gDpAuyD0LkpogZz5u15QyfjoHqAKiPQcIw6UmiDJEEfV1JuennNNRnQNUAdGsAdl6Dk9a3Uw9pxtmh9kF+kdMFXDvQKMvF7mZURgraMbcMGbfdJ+HqQDGuYahTWCc+yDeAeh1I/tNmRrmp4xvln94xwPXVhhc1mi0mvxcBtdWYqelL6d9A2M5z489BdBPRHENzx0GnvkYwOfLi2r6cP/D97+sGNXbO6NA8QAAAABJRU5ErkJggg==");
  --s-scene: url("../ui/scene.webp?v=00d91591e5");
  --s-logo: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJcAAABUCAYAAACP46VjAAAGjElEQVR42u2dX2gcRRzHv1OiJVAo/muDD1KjWExDKyRQ1NbaPIhcoEqbgFCkaJ6qFCpNqiCpNsGHmhaDoEEx1SJKwfZFSUBrGkxDQU2otKig1Zr6YFpfLARFLY4Pu5PcbPbP7N7M3V7u+4Gj3dvZ2Zud331/f3ZuI5AdGfKeACEZjEEzJikX25YQIu8GJvklyJ9xyTBjChhV7g1LjaEKvgQ1Y1yRhhVjVNKxu8zaf1C5XH9OGldWlxihAIuMMdCueILDJjdxfwn9p+mHlDHmMnUvMiYe0wwzbHJN94e1T+o/RT80MAvUOY5rIic4LoaL21/kijMdn7Yfkh/jCp3cIjWQaSY4ZL8wTTLCjg+0F6b9kGwsc+53FyZYRsQ3xS/T/YsMIiZ+EjFuLqofWluejUsIobnGoLuMPizRXWmuN9g+hbuL7YdUgXJFBcpJChGxP21MJw0/F+gac2ZccRMYolbCleHmpR9SunHFuS4R4aZoWDVIKZMed59OJpwj6R6fad9R44k63qTA6uTLQAghhBBCCCGEEEIIIYQQQgghhBBClgpVu7Skc/eI0UKsj4bauXymQtTxEtQcslxCU3XGpRRrsG+z9n79L3Pa9tauAZpRhVnGS0Bq3i0GFevAri9D2w0cXMdZjXGFMb9kT1qaTuUiVC5jugqnJAD09W3UFGtkqkdr197qxViTP1znrFahcbn+DRZLBnYzvkRXWLPKNa9YxzZq2aDa7sMEAKBl3UOhx9/y2xmaILNFUqtusWzSqrKVDeuf07K+nkCMdfNNjQCAU5PvabHWYzvXAgAG924HAJz+faqa3KwVNxfI+KhchAG9c5RijQ97CtXz0reaYq1u2AoAuDI7rsVgVa5YNR1zzT88TT3DytWrRjM+Cf+xUGGv4jYZs+9Fc1dOMv+RA4tZoZYFTn/2BwBg0z26qDa1F7QYq3D4RgDAG1v2VatimcRQ4QeatRclnIsVerJ0Yi6ryhCsYwUr7yrGUjGYUiyVRXZs2VasWGldhwuVkynPKwyyPOHac1jyUoLKRXIbc9nKCiUAjI4dDFUspVBq++3XPtZisI7CtrAYS+Zg3LKE89qqc9k61oodVfNK1MwFXsPlJak6NfkMGZa1pBpj4Nn/md2oretZNuVSihWsY6k6lVKmFFlhKcaFChlX5niqxDGmyjRtXU/GXCQX2WImpVIcOP64p1jdeuUd8Ne6+wqWkBXa8acG7sPFvdSo89qKg1woo4miRY2LykXyr1yqbqVQsZJitPsfTbE273jF2z6pK9i8YhXsKxZZIm6xUhli2kC2pPzbwG3ZOm8pAbeLcTk1ruAvngt7wpVKEVSsMydfDM0KXcRYpDIw5iL5cYtJv3gO/tJZrb9KUixbqxtc15viurXUT94QaTJcKhcpr1UmsbKjN9RU6yc+0bbVvcChwc8BACtaV9tULCtr+ku5B2erH5MAvZzruVyMq2aechOTAUlLhrmUro+VcSUa160v7Pcv/t8AgOmeewEAR36+AwBwzG/3wMydABbuEb7vK9bc1BUAC+uzCLNFQtwpl4qxpnsatfdbBr73/+f9e8Pd3ta5idcBADuf8bY/ePNRAMDkJu/ZDb2HLjjJDlO4v8wxDqFykWpRrmsn+gUAPPVFqwSA811tWsxV998OrX3TxeWhCnZuxtv+bmQUADCOH3nVa924ykhZCo5p0/eogmHMcp08+9TMhVCnxqViorZh3wh85XqyyVOy7ide9ZRpyLt3uOGIl1WevXgJAFA/4/Xz15oVXqzVNB9r8avNmIsQR8rVdpsec+351Fvt8ODtrQCAw8f3AwDefflZ7bhdzz8MYKEOZuqmsmSFUW7LMKNkiujI3VO5SOVjroaj1yUAnH36EQDAmnc6AQDN6PRbXtaO29d4WVMuFaONXf2aV53GlZM0x1Jhk64wh8bVtHa7BID779oNABg56mWFH/r71w+fBgC0BOpgC5X85VQsZouElEm5GlbdpyuWvwZ+9uo3ft2rTvoxmZdVDvsH+sr1r1+xv3ai33dL/Zk9moHLkzb6iWpv+BSazMem7T/D56nIuKhcxF28HLXCtPnXPwEAP10a0xQrrERSvLGyo1dTLBuf0aCNC+Uy6V9YOjZt/7b+rJ3TcdU5mHxZgYxM5Lh/4aB/UQ3jmleu829567ZUBf6rvUNJikUIs0VSoWwxuG6refQQAGBOeh5zlteIULlI7rLF4BtqFYSCz2wgVC6SO/4H2uQgS4x7gaMAAAAASUVORK5CYII=");
  --logo-w: 151px;
  --logo-h: 84px;
}
/* END GENERATED TOKENS */

/* GENERATED by pipeline/assets/ui/game/make_look.py. Font roles of the look (docs/LOOK.md "Fonts").
   The pixel font (logo and big titles only) is crisp at 29 px and 58 px; body text is the system sans. */

@font-face {
  font-family: "Terraria Zenith Text";  /* built from the game font atlas Fonts/Mouse_Text.xnb */
  src: url("../fonts/mouse-text.woff2?v=0a32552556") format("woff2");
  font-display: swap;
}

:root {
  /* body text, tables, menus: the reader's own system sans (owner 2026-09-26: the pixel font hurt
     the eyes on iPhone). The game's pixel font only for the logo and the big titles. */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-head: var(--font-body);
  --font-small: var(--font-body);  /* kept for lane sheets */
  --font-pixel: "Terraria Zenith Text", var(--font-body);
  --fs-s: 0.875rem;
  --fs-0: 1.0625rem;
  --fs-1: 1.125rem;
  --fs-2: 1.375rem;
  --lh: 1.5;
  /* pixel sizes: the atlas line height (29 px) x 1 or x 2 only, so every atlas pixel is whole */
  --px-1: 29px;
  --px-2: 58px;
  --px-lh-1: 35px;   /* 29 + 6: half-leading 3 px keeps the baseline on a whole pixel */
  --px-lh-2: 64px;   /* 58 + 6 */
  --lh-s: 1.3125rem; /* small text line (kept for lane sheets) */
}


/* Terraria look: component rules (lane LOOK). Source of truth: docs/LOOK.md.
   Only var() colours and sprites here; the generated :root block above holds every value.
   Every frame is a game sprite with its tint baked (make_look.py), drawn as a 9-slice at 1x with
   the game's own corner size, pixelated. Text carries the game's black outline: UIText draws the
   string 4 times in black at +-1.5 px (ChatManager.ShadowDirections x spread 1.5), then the text. */

:root {
  /* kit tokens (base.css) mapped to the game colours */
  --c-bg: var(--c-sky-bottom);
  --c-surface: var(--c-stat-bg);
  --c-surface-2: var(--c-panel-hover-bg);
  --c-line: var(--c-info-border);
  --c-link: var(--c-accent);
  --c-focus: var(--c-accent);
  --c-hl: var(--c-panel-hover-bg);
  --c-shadow: transparent;
  --c-scrim: transparent;
  --c-conf-ok: var(--c-tip-good);
  --c-conf-ok-bg: transparent;
  --c-conf-unsure: var(--c-coin-gold);
  --c-conf-unsure-bg: transparent;
  --c-conf-code: var(--c-rare-9);
  --c-conf-code-bg: transparent;
  --c-conf-none: var(--c-rare-4);
  --c-conf-none-bg: transparent;
  --radius: 0;
  /* .btn and .chip are declared once, in base.css; the theme feeds them through these tokens
     (UIPanel sprite, corner 12; pressed = the hover plate with the gold rim) */
  --frame-btn: var(--s-panel);
  --frame-btn-on: var(--s-panel-hover);
  --frame-btn-slice: 12 fill;
  --frame-btn-bw: 12px;
  --c-accent-ink: var(--c-ink);

  /* foreground set: surfaces restate these (retint block at the end) */
  --fg: var(--c-ink);
  --fg-soft: var(--c-ink-soft);
  --fg-link: var(--c-accent);
  --fg-hover: var(--c-menu-hover);
  --outline: -1.5px 0 var(--c-text-shadow), 1.5px 0 var(--c-text-shadow), 0 -1.5px var(--c-text-shadow), 0 1.5px var(--c-text-shadow);

  /* fonts: fonts.css */
  --slot: 52px;
}

/* ------------------------------------------------------------------ page and backdrop */

body {
  color: var(--fg);
  background-color: var(--c-sky-bottom);
  background-image: var(--s-sky);
  background-repeat: repeat-x;
  background-position: top left;
  text-shadow: var(--outline);
}
a { color: var(--fg-link); text-decoration: none; }
a:hover { color: var(--fg-hover); text-decoration: underline; }
h1, h2, h3, h4 { color: var(--fg); font-weight: 700; }
/* big titles in the game's pixel font, at 2x on wide screens and 1x on phones (whole pixels) */
h1, .k-home .group > h2, .k-home .tools > h2 {
  font-family: var(--font-pixel); font-weight: 400; font-synthesis: none; -webkit-font-smoothing: none;
  font-size: var(--px-2); line-height: var(--px-lh-2);
}
@media (max-width: 719px) {
  h1, .k-home .group > h2, .k-home .tools > h2 { font-size: var(--px-1); line-height: var(--px-lh-1); }
}
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.skip { background-color: var(--c-tip-bg); color: var(--fg); }
input, button, select { text-shadow: var(--outline); }

/* 9-slice frames (corner 12 = UIPanel._cornerSize, Stat_Panel 12, DrawInvBG 10) */
.site-head .search input[type="search"], .namebox, .filters input[type="search"], .dt-bar input[type="search"],
#results-q, .field, input[type="text"], select {
  background: var(--c-search-bg);
  color: var(--fg);
  border: 6px solid transparent;
  border-image: var(--s-search) 12 fill / 12px stretch;
  border-radius: 0;
  image-rendering: pixelated;
}
input::placeholder { color: var(--c-ink-soft); opacity: 1; }

/* ------------------------------------------------------------------ header: HUD over the sky */

.site-head {
  background: transparent;
  border: 0;
  border-image: none;
  padding: 10px var(--gutter) 6px;
  gap: 8px 16px;
}
/* brand: the title panel of a menu window (UICharacterSelect "Select Player": (73,94,171), black rim) */
.site-head .brand {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--fg); font-family: var(--font-pixel); font-size: var(--px-1); line-height: var(--px-lh-1);
  font-weight: 400; font-synthesis: none; -webkit-font-smoothing: none;
  padding: 0 8px;
  background: var(--c-title-bg);
  border: 6px solid transparent;
  border-image: var(--s-title) 12 fill / 12px stretch;
  image-rendering: pixelated;
}
.site-head .brand::before {
  /* the site logo (owner pick: variant A), 1x; its size is the PNG's own */
  content: ""; width: var(--logo-w); height: var(--logo-h); flex: none;
  background: var(--s-logo) center / var(--logo-w) var(--logo-h) no-repeat;
  image-rendering: pixelated;
}
.site-head .brand { padding: 6px 12px; }
.site-head .brand .brand-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.site-head .brand:hover { color: var(--fg); text-decoration: none; border-image: var(--s-panel-hover) 12 fill / 12px stretch; }
.site-head .search { position: relative; }
.site-head .search::before {
  content: ""; position: absolute; left: 8px; top: 50%; margin-top: -11px;
  width: 22px; height: 22px; background: var(--s-icon-search) no-repeat; image-rendering: pixelated;
  pointer-events: none; z-index: 1;
}
.site-head .search input[type="search"] { padding-left: 34px; }

/* main navigation: menu buttons (UITextPanel over UIPanel, the Back / New buttons of the
   character select screen). Rest: panel fill, black rim. Hover: brighter fill, gold rim. */
.site-nav { flex: 1 1 100%; order: 4; }
.site-nav ul { gap: 6px; }
.site-nav a, .site-menu nav a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap); line-height: 1.2; padding: 0 10px;
  color: var(--fg);
  border: 6px solid transparent;
  border-image: var(--s-panel) 12 fill / 12px stretch;
  image-rendering: pixelated;
}
/* phone: the section buttons fold behind one Menu button (same panel), closed by default */
.site-menu { display: none; order: 4; flex: 1 1 100%; }
.site-menu > summary {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px;
  list-style: none; cursor: pointer; color: var(--fg);
  border: 6px solid transparent;
  border-image: var(--s-panel) 12 fill / 12px stretch;
  image-rendering: pixelated;
}
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu[open] > summary, .site-menu > summary:hover { border-image: var(--s-panel-hover) 12 fill / 12px stretch; }
.site-menu nav ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
@media (max-width: 719px) {
  .site-nav { display: none; }
  .site-menu { display: block; }
}
.site-nav a:hover, .site-nav a[aria-current], .site-menu nav a:hover {
  color: var(--fg); text-decoration: none;
  border-image: var(--s-panel-hover) 12 fill / 12px stretch;
}

/* ------------------------------------------------------------------ the page window */

main, .page {
  margin: 8px auto 16px;
  padding: 18px 20px 24px;
  max-width: calc(var(--page-max) + 40px);
  border: 12px solid transparent;
  border-image: var(--s-window) 12 fill / 12px stretch;
  image-rendering: pixelated;
}
@media (max-width: 719px) {
  main, .page { margin: 6px 8px 12px; padding: 8px 6px 16px; }
}
.crumbs, .crumbs ol { color: var(--fg-soft); }
.crumbs a { color: var(--fg-soft); }
.crumbs a:hover { color: var(--fg-hover); }
.crumbs li + li::before { color: var(--fg-soft); }
.lead, .kicker, .count, .job, .sub, .note, .conf-note, .unofficial, .stamp, .lab, .status, .empty, .how, .explain, .dt-note, .dt-odds, .sr-kind {
  color: var(--fg-soft);
}

/* cards: Bestiary Stat_Panel (flavour text, kill counter panels) */
.card, .panel, .filter-empty {
  background: var(--c-stat-bg);
  border: 12px solid transparent;
  border-image: var(--s-stat) 12 fill / 12px stretch;
  border-radius: 0;
  padding: 2px 6px;
  image-rendering: pixelated;
}
.card > h2:first-child, .panel > h2:first-child { margin-top: 0; }
.card h2 { font-size: var(--fs-2); }

/* entity head: the item tooltip box (Utils.DrawInvBG, InventoryBack13 x (23,25,81) x 0.925) */
.ent-head {
  background: var(--c-tip-bg);
  border: 10px solid transparent;
  border-image: var(--s-tip) 10 fill / 10px stretch;
  padding: 8px 10px;
  image-rendering: pixelated;
}
.ent-head .art {
  width: 80px; height: 80px; padding: 8px;
  border: 4px solid transparent;
  border-image: var(--s-slot) 12 fill / 12px stretch;
  object-fit: contain;
}
.ent-head .chips { margin: 0 0 6px; }
.ent-head .chip { cursor: default; }

/* item name colours: Main.MouseText_DrawItemTooltip_GetItemNameColor, only as large text on the
   tooltip fill (LOOK.md contrast table). Hook: data-rare="<rare>" on the head or the tip name. */
[data-rare="-1"] h1, h1[data-rare="-1"], .tip-name[data-rare="-1"] { color: var(--c-rare-m1); }
[data-rare="1"] h1, h1[data-rare="1"], .tip-name[data-rare="1"] { color: var(--c-rare-1); }
[data-rare="2"] h1, h1[data-rare="2"], .tip-name[data-rare="2"] { color: var(--c-rare-2); }
[data-rare="3"] h1, h1[data-rare="3"], .tip-name[data-rare="3"] { color: var(--c-rare-3); }
[data-rare="4"] h1, h1[data-rare="4"], .tip-name[data-rare="4"] { color: var(--c-rare-4); }
[data-rare="5"] h1, h1[data-rare="5"], .tip-name[data-rare="5"] { color: var(--c-rare-5); }
[data-rare="6"] h1, h1[data-rare="6"], .tip-name[data-rare="6"] { color: var(--c-rare-6); }
[data-rare="7"] h1, h1[data-rare="7"], .tip-name[data-rare="7"] { color: var(--c-rare-7); }
[data-rare="8"] h1, h1[data-rare="8"], .tip-name[data-rare="8"] { color: var(--c-rare-8); }
[data-rare="9"] h1, h1[data-rare="9"], .tip-name[data-rare="9"] { color: var(--c-rare-9); }
[data-rare="10"] h1, h1[data-rare="10"], .tip-name[data-rare="10"] { color: var(--c-rare-10); }
[data-rare="11"] h1, h1[data-rare="11"], .tip-name[data-rare="11"] { color: var(--c-rare-11); }
[data-rare="-11"] h1, h1[data-rare="-11"], .tip-name[data-rare="-11"] { color: var(--c-rare-m11); }
[data-rare="-13"] h1, h1[data-rare="-13"], .tip-name[data-rare="-13"] { color: var(--c-rare-m13); }
/* rarity -12 (expert): the game cycles the name through Main.DiscoR/G/B (Main.cs:20751); a still
   page shows the same hues as a gradient of the rarity tokens (moved here from items.css so every
   hover card gets it) */
[data-rare="-12"] h1, h1[data-rare="-12"], .tip-name[data-rare="-12"] {
  background-image: linear-gradient(90deg, var(--c-rare-4), var(--c-rare-3), var(--c-rare-8), var(--c-rare-2), var(--c-rare-9), var(--c-rare-5));
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
}

/* ------------------------------------------------------------------ buttons and chips */

.sr-empty button, details.fold > summary {
  background: var(--c-panel-bg);
  color: var(--fg);
  border: 6px solid transparent;
  border-image: var(--s-panel) 12 fill / 12px stretch;
  border-radius: 0;
  image-rendering: pixelated;
}
.btn:hover, .chip:hover, .chip[aria-pressed="true"], details.fold > summary:hover {
  background: var(--c-panel-hover-bg);
  color: var(--fg);
  text-decoration: none;
  border-image: var(--s-panel-hover) 12 fill / 12px stretch;
}
.btn-primary { background: var(--c-panel-hover-bg); color: var(--fg); border-image: var(--s-panel-hover) 12 fill / 12px stretch; }
details.fold > summary { display: inline-flex; align-items: center; min-height: var(--tap); line-height: 1.2; padding: 0 10px; margin: 4px 0; list-style: none; }
details.fold > summary::-webkit-details-marker { display: none; }
fieldset.facet legend { color: var(--fg-soft); }

/* ------------------------------------------------------------------ lists: Bestiary drop lines */

.grid > li, .tool a, .hub-list > li, .sr-inline .sr-opt {
  background: var(--c-panel-bg);
  border: 6px solid transparent;
  border-image: var(--s-row) 12 fill / 12px stretch;
  border-radius: 0;
  padding: 4px 6px;
  image-rendering: pixelated;
  --fg-soft: var(--c-ink);
}
.grid > li:hover, .tool a:hover, .hub-list > li:hover {
  border-image: var(--s-row-hover) 12 fill / 12px stretch;
}
.tool a { color: var(--fg); }
.tool a:hover { text-decoration: none; }
.tool strong { color: var(--fg-link); }
.tool a:hover strong { color: var(--fg-hover); }
.grid .ent { color: var(--fg); }
.grid .ent:hover { color: var(--fg-hover); }

/* item icons in lists sit in an inventory slot (InventoryBack x Main.inventoryBack) */
.grid .ent img, .grid .ent-icon, .sr-opt img {
  width: 52px; height: 52px; padding: 8px;
  border: 4px solid transparent;
  border-image: var(--s-slot) 12 fill / 12px stretch;
  box-sizing: border-box;
  object-fit: contain;
  image-rendering: pixelated;
}
/* inline icons in prose stay bare, like item tags [i:] in chat */
.ent img, .ent-icon { image-rendering: pixelated; }

/* ------------------------------------------------------------------ tables */

table.numbers th, table.numbers td, table.drops th, table.drops td, table.data th, table.data td {
  border-bottom: 2px solid var(--c-info-border);
}
table.numbers th { color: var(--fg-soft); font-weight: 400; }
table.drops thead th, table.data thead th { background: var(--c-info-bg); color: var(--fg); }
.th-sort { color: var(--fg); }

/* ------------------------------------------------------------------ hover card and search pop-up:
   the item tooltip box (DrawInvBG with the tooltip colour) */

.tip, .sr-pop, .sp-ask {
  background: var(--c-tip-bg);
  color: var(--fg);
  border: 10px solid transparent;
  border-image: var(--s-tip) 10 fill / 10px stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
}
.tip { padding: 4px 6px; }
.tip-name { color: var(--fg); font-size: 1.5rem; line-height: 1.15; font-weight: 700; }
.tip-name:hover { color: var(--fg); }
.sr-pop { padding: 2px; }
.sr-inline { background: transparent; border: 0; border-image: none; }
.sr-opt { color: var(--fg); border-radius: 0; }
.sr-opt[aria-selected="true"], .sr-opt:hover { background: var(--c-panel-hover-bg); color: var(--fg); text-decoration: none; }
.sr-mark { background: var(--c-panel-bg); color: var(--fg); border-radius: 0; }

/* ------------------------------------------------------------------ confidence labels */

.conf { background: transparent; border-radius: 0; padding: 0; }

/* ------------------------------------------------------------------ footer */

.site-foot {
  color: var(--fg);
  max-width: calc(var(--page-max) + 40px);
  margin: 0 auto 16px;
  padding: 4px 10px;
  background: var(--c-window-bg);
  border: 12px solid transparent;
  border-image: var(--s-window) 12 fill / 12px stretch;
  image-rendering: pixelated;
}
@media (max-width: 719px) { .site-foot { margin: 0 8px 12px; } }
.site-foot .foot-nav a { color: var(--fg-link); }

/* ------------------------------------------------------------------ home: the main menu
   Title over the surface forest (Background_0 sky, Background_7/8 mountains, 9/10/11 trees),
   section names as the main menu items (white, gold on hover), the rest in menu windows. */

.k-home { background-color: var(--c-forest-ground); background-image: var(--s-scene); background-repeat: repeat-x; background-position: top center; }
.k-home main { border: 0; border-image: none; background: transparent; text-align: center; padding-top: 24px; }
.k-home main > h1, .k-home main > .lead {
  display: table; margin-left: auto; margin-right: auto;
  border: 12px solid transparent;
  image-rendering: pixelated;
}
.k-home main > h1 { margin-top: 8px; margin-bottom: 8px; padding: 0 12px; background: var(--c-title-bg); border-image: var(--s-title) 12 fill / 12px stretch; }
.k-home main > .lead { color: var(--fg); max-width: 40rem; margin-bottom: 220px; padding: 0 8px; background: var(--c-window-bg); border-image: var(--s-window) 12 fill / 12px stretch; }
.k-home .tools, .k-home .group {
  text-align: left;
  background: var(--c-window-bg);
  border: 12px solid transparent;
  border-image: var(--s-window) 12 fill / 12px stretch;
  padding: 6px 10px;
  margin: 0 0 16px;
  image-rendering: pixelated;
}
.k-home .group > h2, .k-home .tools > h2 { margin: 0 0 4px; text-align: center; }
.k-home .group > h2 a { color: var(--fg); }
.k-home .group > h2 a:hover { color: var(--fg-hover); text-decoration: none; }
.k-home .group > .job { text-align: center; }
@media (max-width: 719px) {
  .k-home { background-color: var(--c-sky-bottom); background-image: var(--s-sky); }
  .k-home main > .lead { margin-bottom: 24px; }
}

/* ------------------------------------------------------------------ retint: surfaces with a
   fill brighter than the window restate the soft text (LOOK.md contrast table) */

.grid > li, .tool a, .hub-list > li, .sr-opt { --fg-soft: var(--c-ink); }

/* NPC pages: the portrait sits on the Bestiary entry slot (UIBestiaryEntryButton Slot_Back, 70 px) */
.kind-npc .ent-head .art {
  width: 70px; height: 70px; padding: 3px;
  border: 0; border-image: none;
  background: var(--s-slot-bestiary) center / 70px 70px no-repeat;
}

/* ------------------------------------------------------------------ number and text inputs
   (Bestiary search bar atom): room for the digits, game fill, no white native box */

input[type="number"], input[type="text"], select, .field {
  min-height: var(--tap);
  min-width: 5.5em;
  padding: 0 8px;
  background: var(--c-search-bg);
  color: var(--fg);
  font: var(--fs-0) / var(--lh) var(--font-body);
  border: 6px solid transparent;
  border-image: var(--s-search) 12 fill / 12px stretch;
  border-radius: 0;
  image-rendering: pixelated;
}
input[type="number"] { width: 6em; -moz-appearance: textfield; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--c-accent); }

/* ------------------------------------------------------------------ NPC rarity stars: Bestiary
   Icon_Rank_Light / Icon_Rank_Dim, 14 px, next star 10 px on (NPCPortraitInfoElement.cs:110-113),
   drawn at 2x. Markup: <span class="stars" role="img" aria-label="Rarity 3 of 5">
   <i class="star"></i><i class="star"></i><i class="star"></i><i class="star dim"></i><i class="star dim"></i></span> */

.stars { display: inline-flex; align-items: center; vertical-align: middle; padding-right: 8px; }
.stars .star {
  width: 28px; height: 28px; flex: none; margin-right: -8px;
  background: var(--s-star) center / 28px 28px no-repeat;
  image-rendering: pixelated;
}
.stars .star.dim { background-image: var(--s-star-dim); }

/* ------------------------------------------------------------------ hotbar navigation
   Inventory slots (InventoryBack, open = InventoryBack14) with a game icon, the group name under
   it; a group opens its panel (Utils.DrawInvBG default box). Markup: docs/LOOK.md "Hotbar". */

.site-head { position: relative; }
.site-nav ul:has(> .hb-slot) {
  display: inline-flex; flex-wrap: nowrap; gap: 6px; align-items: flex-start;
  /* the labels sit on a window plate (Bestiary window fill): on the bare sky they read 1.77:1 */
  padding: 0 4px;
  background: var(--c-window-bg);
  border: 6px solid transparent;
  border-image: var(--s-window) 12 fill / 12px stretch;
  image-rendering: pixelated;
}
.hb-slot { position: relative; list-style: none; }
.hb-slot > details > summary, .hb-slot > a.hb-link {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  min-width: 52px; padding: 0; margin: 0;
  border: 0; border-image: none; background: none;
  color: var(--fg); cursor: pointer; list-style: none; text-decoration: none;
}
.hb-slot > details > summary::-webkit-details-marker { display: none; }
.hb-slot .hb-icon-box {
  display: grid; place-items: center; width: 52px; height: 52px;
  border: 12px solid transparent;
  border-image: var(--s-slot) 12 fill / 12px stretch;
  image-rendering: pixelated;
}
.hb-slot .hb-icon-box img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; margin: -2px; }
.hb-slot > details[open] > summary .hb-icon-box, .hb-slot > details > summary:hover .hb-icon-box,
.hb-slot > a.hb-link:hover .hb-icon-box, .hb-slot > a.hb-link[aria-current] .hb-icon-box {
  border-image: var(--s-slot-sel) 12 fill / 12px stretch;
}
.hb-slot > details > summary:hover .hb-label, .hb-slot > a.hb-link:hover .hb-label { color: var(--fg-hover); }
.hb-panel {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 50;
  min-width: 17rem; margin: 0; padding: 2px;
  list-style: none;
  background: var(--c-invbg);
  border: 10px solid transparent;
  border-image: var(--s-invbox) 10 fill / 10px stretch;
  image-rendering: pixelated;
}
.hb-panel li { margin: 0; }
.hb-panel a { display: flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 6px; color: var(--fg); white-space: nowrap; }
.hb-panel a:hover { color: var(--fg-hover); text-decoration: none; background: var(--c-panel-hover-bg); }
.hb-panel img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; flex: none; }
/* phones: slots at the game's inventory scale (52 x 0.85 = 44 px), small labels; the row never
   pushes the page sideways: with more groups than fit, it scrolls inside its own plate */
@media (max-width: 719px) {
  .site-nav { min-width: 0; max-width: 100%; }
  .site-nav ul:has(> .hb-slot) { display: flex; max-width: 100%; overflow-x: auto; gap: 4px; padding: 0 2px; }
  .hb-slot .hb-icon-box { width: 44px; height: 44px; border-width: 10px; border-image-width: 12px; }
  .hb-slot .hb-icon-box img { width: 32px; height: 32px; margin: -4px; }
  .hb-slot > details > summary, .hb-slot > a.hb-link { min-width: 44px; }
  .hb-label { font-size: 0.75rem; line-height: 1.3; }
  .hb-slot { position: static; }
  .hb-panel { left: var(--gutter); right: var(--gutter); top: 100%; min-width: 0; }
  .hb-panel a { white-space: normal; }
}
/* until the grouped markup ships, the flat list keeps the phone Menu fold */
.site-head:has(.hb-slot) .site-menu { display: none !important; }
.site-head:has(.hb-slot) .site-nav { display: block !important; }
.site-nav .hb-panel a { border: 0; border-image: none; min-height: var(--tap); }
/* the game box is 78.5% opaque over the world; the page text under it would show through, so the
   panel gets the Bestiary stat fill beneath it (LOOK.md Deviations) */
.hb-panel { background-color: var(--c-stat-bg); }

/* links on the bright plate fill (73,94,171: table heads, title and info plates, pressed or
   selected chips and tabs) hover white + underline: the menu gold reads 4.28:1 there */
thead th, .ent-head .chips, .k-home main > h1, [aria-pressed="true"], [aria-selected="true"],
.chips .chip:hover, .facet .chip:hover, .hb-panel a:hover, .sr-opt:hover, .sr-opt[aria-selected="true"] {
  --fg-hover: var(--c-ink);
}