/** * Dungeon theme: stone walls, torches, embers and stone/wood menu buttons. * Loaded after main.css and mobile.css so it can restyle the menus without touching them. * All textures are inline pixel SVGs (no extra requests), rendered crisp. */ :root { /* 8-bit stone bricks: 16x8 art pixels, drawn at 8px per pixel (128x64) */ --dungeon-wall: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='6' height='1' fill='%236e6156'/%3E%3Crect x='6' y='0' width='1' height='1' fill='%234b4139'/%3E%3Crect x='7' y='0' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='8' y='0' width='6' height='1' fill='%236e6156'/%3E%3Crect x='14' y='0' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='0' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%236e6156'/%3E%3Crect x='1' y='1' width='2' height='1' fill='%234b4139'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%233a322c'/%3E%3Crect x='4' y='1' width='2' height='1' fill='%234b4139'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%232f2823'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%236e6156'/%3E%3Crect x='9' y='1' width='5' height='1' fill='%234b4139'/%3E%3Crect x='14' y='1' width='1' height='1' fill='%232f2823'/%3E%3Crect x='15' y='1' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%234b4139'/%3E%3Crect x='1' y='2' width='6' height='1' fill='%232f2823'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%234b4139'/%3E%3Crect x='9' y='2' width='3' height='1' fill='%232f2823'/%3E%3Crect x='12' y='2' width='1' height='1' fill='%233a322c'/%3E%3Crect x='13' y='2' width='2' height='1' fill='%232f2823'/%3E%3Crect x='15' y='2' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='3' width='16' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='4' width='2' height='1' fill='%236e6156'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%234b4139'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='4' y='4' width='6' height='1' fill='%236e6156'/%3E%3Crect x='10' y='4' width='1' height='1' fill='%234b4139'/%3E%3Crect x='11' y='4' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='12' y='4' width='4' height='1' fill='%236e6156'/%3E%3Crect x='0' y='5' width='2' height='1' fill='%234b4139'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%232f2823'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%236e6156'/%3E%3Crect x='5' y='5' width='3' height='1' fill='%234b4139'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%233a322c'/%3E%3Crect x='9' y='5' width='1' height='1' fill='%234b4139'/%3E%3Crect x='10' y='5' width='1' height='1' fill='%232f2823'/%3E%3Crect x='11' y='5' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='12' y='5' width='1' height='1' fill='%236e6156'/%3E%3Crect x='13' y='5' width='3' height='1' fill='%234b4139'/%3E%3Crect x='0' y='6' width='3' height='1' fill='%232f2823'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%234b4139'/%3E%3Crect x='5' y='6' width='6' height='1' fill='%232f2823'/%3E%3Crect x='11' y='6' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='12' y='6' width='1' height='1' fill='%234b4139'/%3E%3Crect x='13' y='6' width='3' height='1' fill='%232f2823'/%3E%3Crect x='0' y='7' width='16' height='1' fill='%230d0a08'/%3E%3C/svg%3E"); /* 32x32 rough slab texture for buttons */ --dungeon-slab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Crect width='32' height='32' fill='%23362f2a'/%3E%3Crect x='4' y='6' width='2' height='2' fill='%232e2823'/%3E%3Crect x='20' y='4' width='4' height='2' fill='%233d352f'/%3E%3Crect x='12' y='18' width='2' height='2' fill='%232e2823'/%3E%3Crect x='26' y='22' width='2' height='2' fill='%233d352f'/%3E%3Crect x='6' y='26' width='4' height='2' fill='%23302924'/%3E%3C/svg%3E"); --dungeon-gold: #ffcf4a; --torch-light: rgba(255, 150, 60, 0.22); } /* BEGIN generated by tools/art/dungeon-frame.mjs, do not edit by hand */ :root { --px-lintel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='24' height='1' fill='%2316120f'/%3E%3Crect x='0' y='1' width='12' height='1' fill='%239a8b7c'/%3E%3Crect x='12' y='1' width='1' height='1' fill='%234b4139'/%3E%3Crect x='13' y='1' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='14' y='1' width='8' height='1' fill='%239a8b7c'/%3E%3Crect x='22' y='1' width='1' height='1' fill='%234b4139'/%3E%3Crect x='23' y='1' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%239a8b7c'/%3E%3Crect x='1' y='2' width='11' height='1' fill='%237d7064'/%3E%3Crect x='12' y='2' width='1' height='1' fill='%234b4139'/%3E%3Crect x='13' y='2' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='14' y='2' width='8' height='1' fill='%237d7064'/%3E%3Crect x='22' y='2' width='1' height='1' fill='%234b4139'/%3E%3Crect x='23' y='2' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%239a8b7c'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='3' width='6' height='1' fill='%236e6156'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%2362564c'/%3E%3Crect x='9' y='3' width='3' height='1' fill='%236e6156'/%3E%3Crect x='12' y='3' width='1' height='1' fill='%234b4139'/%3E%3Crect x='13' y='3' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='14' y='3' width='1' height='1' fill='%237d7064'/%3E%3Crect x='15' y='3' width='6' height='1' fill='%236e6156'/%3E%3Crect x='21' y='3' width='1' height='1' fill='%2362564c'/%3E%3Crect x='22' y='3' width='1' height='1' fill='%234b4139'/%3E%3Crect x='23' y='3' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%239a8b7c'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='4' width='9' height='1' fill='%236e6156'/%3E%3Crect x='11' y='4' width='1' height='1' fill='%2362564c'/%3E%3Crect x='12' y='4' width='1' height='1' fill='%234b4139'/%3E%3Crect x='13' y='4' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='14' y='4' width='1' height='1' fill='%237d7064'/%3E%3Crect x='15' y='4' width='1' height='1' fill='%236e6156'/%3E%3Crect x='16' y='4' width='1' height='1' fill='%2362564c'/%3E%3Crect x='17' y='4' width='4' height='1' fill='%236e6156'/%3E%3Crect x='21' y='4' width='2' height='1' fill='%234b4139'/%3E%3Crect x='23' y='4' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%239a8b7c'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='5' width='2' height='1' fill='%236e6156'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%2362564c'/%3E%3Crect x='5' y='5' width='7' height='1' fill='%236e6156'/%3E%3Crect x='12' y='5' width='1' height='1' fill='%234b4139'/%3E%3Crect x='13' y='5' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='14' y='5' width='1' height='1' fill='%237d7064'/%3E%3Crect x='15' y='5' width='6' height='1' fill='%236e6156'/%3E%3Crect x='21' y='5' width='1' height='1' fill='%2362564c'/%3E%3Crect x='22' y='5' width='1' height='1' fill='%234b4139'/%3E%3Crect x='23' y='5' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%239a8b7c'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='6' width='7' height='1' fill='%236e6156'/%3E%3Crect x='9' y='6' width='1' height='1' fill='%234b4139'/%3E%3Crect x='10' y='6' width='2' height='1' fill='%236e6156'/%3E%3Crect x='12' y='6' width='1' height='1' fill='%234b4139'/%3E%3Crect x='13' y='6' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='14' y='6' width='1' height='1' fill='%237d7064'/%3E%3Crect x='15' y='6' width='4' height='1' fill='%236e6156'/%3E%3Crect x='19' y='6' width='1' height='1' fill='%2362564c'/%3E%3Crect x='20' y='6' width='2' height='1' fill='%236e6156'/%3E%3Crect x='22' y='6' width='1' height='1' fill='%234b4139'/%3E%3Crect x='23' y='6' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%239a8b7c'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='7' width='6' height='1' fill='%236e6156'/%3E%3Crect x='8' y='7' width='1' height='1' fill='%234b4139'/%3E%3Crect x='9' y='7' width='1' height='1' fill='%232f2823'/%3E%3Crect x='10' y='7' width='2' height='1' fill='%236e6156'/%3E%3Crect x='12' y='7' width='1' height='1' fill='%234b4139'/%3E%3Crect x='13' y='7' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='14' y='7' width='1' height='1' fill='%237d7064'/%3E%3Crect x='15' y='7' width='7' height='1' fill='%236e6156'/%3E%3Crect x='22' y='7' width='1' height='1' fill='%234b4139'/%3E%3Crect x='23' y='7' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%239a8b7c'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%2362564c'/%3E%3Crect x='2' y='8' width='9' height='1' fill='%236e6156'/%3E%3Crect x='11' y='8' width='1' height='1' fill='%2362564c'/%3E%3Crect x='12' y='8' width='1' height='1' fill='%234b4139'/%3E%3Crect x='13' y='8' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='14' y='8' width='1' height='1' fill='%237d7064'/%3E%3Crect x='15' y='8' width='1' height='1' fill='%2362564c'/%3E%3Crect x='16' y='8' width='6' height='1' fill='%236e6156'/%3E%3Crect x='22' y='8' width='1' height='1' fill='%234b4139'/%3E%3Crect x='23' y='8' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='9' width='1' height='1' fill='%239a8b7c'/%3E%3Crect x='1' y='9' width='11' height='1' fill='%234b4139'/%3E%3Crect x='12' y='9' width='1' height='1' fill='%232f2823'/%3E%3Crect x='13' y='9' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='14' y='9' width='1' height='1' fill='%237d7064'/%3E%3Crect x='15' y='9' width='6' height='1' fill='%234b4139'/%3E%3Crect x='21' y='9' width='2' height='1' fill='%232f2823'/%3E%3Crect x='23' y='9' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='10' width='13' height='1' fill='%232f2823'/%3E%3Crect x='13' y='10' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='14' y='10' width='9' height='1' fill='%232f2823'/%3E%3Crect x='23' y='10' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='11' width='24' height='1' fill='%230d0a08'/%3E%3C/svg%3E"); --px-keystone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='12' height='1' fill='%2316120f'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='1' width='9' height='1' fill='%239a8b7c'/%3E%3Crect x='10' y='1' width='1' height='1' fill='%234b4139'/%3E%3Crect x='11' y='1' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%239a8b7c'/%3E%3Crect x='2' y='2' width='8' height='1' fill='%237d7064'/%3E%3Crect x='10' y='2' width='1' height='1' fill='%234b4139'/%3E%3Crect x='11' y='2' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%239a8b7c'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%237d7064'/%3E%3Crect x='3' y='3' width='7' height='1' fill='%236e6156'/%3E%3Crect x='10' y='3' width='1' height='1' fill='%234b4139'/%3E%3Crect x='11' y='3' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%239a8b7c'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%237d7064'/%3E%3Crect x='3' y='4' width='2' height='1' fill='%236e6156'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%2362564c'/%3E%3Crect x='6' y='4' width='4' height='1' fill='%236e6156'/%3E%3Crect x='10' y='4' width='1' height='1' fill='%234b4139'/%3E%3Crect x='11' y='4' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%239a8b7c'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%237d7064'/%3E%3Crect x='3' y='5' width='7' height='1' fill='%236e6156'/%3E%3Crect x='10' y='5' width='1' height='1' fill='%234b4139'/%3E%3Crect x='11' y='5' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%239a8b7c'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%237d7064'/%3E%3Crect x='3' y='6' width='4' height='1' fill='%236e6156'/%3E%3Crect x='7' y='6' width='1' height='1' fill='%2362564c'/%3E%3Crect x='8' y='6' width='2' height='1' fill='%236e6156'/%3E%3Crect x='10' y='6' width='1' height='1' fill='%234b4139'/%3E%3Crect x='11' y='6' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%2316120f'/%3E%3Crect x='2' y='7' width='1' height='1' fill='%239a8b7c'/%3E%3Crect x='3' y='7' width='7' height='1' fill='%236e6156'/%3E%3Crect x='10' y='7' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%2316120f'/%3E%3Crect x='2' y='8' width='1' height='1' fill='%239a8b7c'/%3E%3Crect x='3' y='8' width='2' height='1' fill='%236e6156'/%3E%3Crect x='5' y='8' width='1' height='1' fill='%2362564c'/%3E%3Crect x='6' y='8' width='3' height='1' fill='%236e6156'/%3E%3Crect x='9' y='8' width='1' height='1' fill='%234b4139'/%3E%3Crect x='10' y='8' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='9' width='1' height='1' fill='%2316120f'/%3E%3Crect x='2' y='9' width='1' height='1' fill='%239a8b7c'/%3E%3Crect x='3' y='9' width='5' height='1' fill='%236e6156'/%3E%3Crect x='8' y='9' width='2' height='1' fill='%234b4139'/%3E%3Crect x='10' y='9' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='10' width='1' height='1' fill='%2316120f'/%3E%3Crect x='2' y='10' width='1' height='1' fill='%239a8b7c'/%3E%3Crect x='3' y='10' width='6' height='1' fill='%234b4139'/%3E%3Crect x='9' y='10' width='1' height='1' fill='%232f2823'/%3E%3Crect x='10' y='10' width='1' height='1' fill='%2316120f'/%3E%3Crect x='2' y='11' width='1' height='1' fill='%2316120f'/%3E%3Crect x='3' y='11' width='6' height='1' fill='%232f2823'/%3E%3Crect x='9' y='11' width='1' height='1' fill='%2316120f'/%3E%3Crect x='2' y='12' width='1' height='1' fill='%2316120f'/%3E%3Crect x='3' y='12' width='6' height='1' fill='%232f2823'/%3E%3Crect x='9' y='12' width='1' height='1' fill='%2316120f'/%3E%3Crect x='2' y='13' width='8' height='1' fill='%2316120f'/%3E%3C/svg%3E"); --px-bracket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='8' height='1' fill='%2316120f'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='1' width='6' height='1' fill='%234d4b49'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%234d4b49'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%238a8178'/%3E%3Crect x='3' y='2' width='2' height='1' fill='%234d4b49'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%238a8178'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%234d4b49'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='3' width='6' height='1' fill='%234d4b49'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='4' width='6' height='1' fill='%232b2a2a'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='5' width='6' height='1' fill='%234d4b49'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='6' width='6' height='1' fill='%234d4b49'/%3E%3Crect x='7' y='6' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='7' width='6' height='1' fill='%232b2a2a'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='8' width='6' height='1' fill='%234d4b49'/%3E%3Crect x='7' y='8' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='9' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='9' width='1' height='1' fill='%234d4b49'/%3E%3Crect x='2' y='9' width='1' height='1' fill='%238a8178'/%3E%3Crect x='3' y='9' width='2' height='1' fill='%234d4b49'/%3E%3Crect x='5' y='9' width='1' height='1' fill='%238a8178'/%3E%3Crect x='6' y='9' width='1' height='1' fill='%234d4b49'/%3E%3Crect x='7' y='9' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='10' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='10' width='6' height='1' fill='%234d4b49'/%3E%3Crect x='7' y='10' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='11' width='8' height='1' fill='%2316120f'/%3E%3C/svg%3E"); --px-pillar-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='14' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='4' height='1' fill='%239a8b7c'/%3E%3Crect x='4' y='0' width='1' height='1' fill='%234b4139'/%3E%3Crect x='5' y='0' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%237d7064'/%3E%3Crect x='1' y='1' width='3' height='1' fill='%236e6156'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%234b4139'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%237d7064'/%3E%3Crect x='1' y='2' width='2' height='1' fill='%236e6156'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%2362564c'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%234b4139'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%237d7064'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%2362564c'/%3E%3Crect x='2' y='3' width='2' height='1' fill='%236e6156'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%234b4139'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%237d7064'/%3E%3Crect x='1' y='4' width='3' height='1' fill='%236e6156'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%234b4139'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='5' width='4' height='1' fill='%234b4139'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%232f2823'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='6' width='6' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='7' width='4' height='1' fill='%239a8b7c'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%234b4139'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%237d7064'/%3E%3Crect x='1' y='8' width='2' height='1' fill='%236e6156'/%3E%3Crect x='3' y='8' width='1' height='1' fill='%2362564c'/%3E%3Crect x='4' y='8' width='1' height='1' fill='%234b4139'/%3E%3Crect x='5' y='8' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='9' width='1' height='1' fill='%237d7064'/%3E%3Crect x='1' y='9' width='3' height='1' fill='%236e6156'/%3E%3Crect x='4' y='9' width='1' height='1' fill='%234b4139'/%3E%3Crect x='5' y='9' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='10' width='1' height='1' fill='%237d7064'/%3E%3Crect x='1' y='10' width='2' height='1' fill='%236e6156'/%3E%3Crect x='3' y='10' width='1' height='1' fill='%234b4139'/%3E%3Crect x='4' y='10' width='1' height='1' fill='%236e6156'/%3E%3Crect x='5' y='10' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='11' width='1' height='1' fill='%237d7064'/%3E%3Crect x='1' y='11' width='3' height='1' fill='%236e6156'/%3E%3Crect x='4' y='11' width='1' height='1' fill='%234b4139'/%3E%3Crect x='5' y='11' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='12' width='4' height='1' fill='%234b4139'/%3E%3Crect x='4' y='12' width='1' height='1' fill='%232f2823'/%3E%3Crect x='5' y='12' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='13' width='6' height='1' fill='%230d0a08'/%3E%3C/svg%3E"); --px-pillar-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='14' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='1' y='0' width='4' height='1' fill='%239a8b7c'/%3E%3Crect x='5' y='0' width='1' height='1' fill='%234b4139'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='1' width='3' height='1' fill='%236e6156'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%234b4139'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='2' width='2' height='1' fill='%236e6156'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%2362564c'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%234b4139'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%2362564c'/%3E%3Crect x='3' y='3' width='2' height='1' fill='%236e6156'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%234b4139'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='4' width='3' height='1' fill='%236e6156'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%234b4139'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='1' y='5' width='4' height='1' fill='%234b4139'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%232f2823'/%3E%3Crect x='0' y='6' width='6' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='1' y='7' width='4' height='1' fill='%239a8b7c'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%234b4139'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='8' width='2' height='1' fill='%236e6156'/%3E%3Crect x='4' y='8' width='1' height='1' fill='%2362564c'/%3E%3Crect x='5' y='8' width='1' height='1' fill='%234b4139'/%3E%3Crect x='0' y='9' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='1' y='9' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='9' width='3' height='1' fill='%236e6156'/%3E%3Crect x='5' y='9' width='1' height='1' fill='%234b4139'/%3E%3Crect x='0' y='10' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='1' y='10' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='10' width='2' height='1' fill='%236e6156'/%3E%3Crect x='4' y='10' width='1' height='1' fill='%234b4139'/%3E%3Crect x='5' y='10' width='1' height='1' fill='%236e6156'/%3E%3Crect x='0' y='11' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='1' y='11' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='11' width='3' height='1' fill='%236e6156'/%3E%3Crect x='5' y='11' width='1' height='1' fill='%234b4139'/%3E%3Crect x='0' y='12' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='1' y='12' width='4' height='1' fill='%234b4139'/%3E%3Crect x='5' y='12' width='1' height='1' fill='%232f2823'/%3E%3Crect x='0' y='13' width='6' height='1' fill='%230d0a08'/%3E%3C/svg%3E"); --px-wall-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='9' height='1' fill='%239a8b7c'/%3E%3Crect x='9' y='0' width='1' height='1' fill='%234b4139'/%3E%3Crect x='10' y='0' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='11' y='0' width='3' height='1' fill='%239a8b7c'/%3E%3Crect x='14' y='0' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='0' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='1' width='9' height='1' fill='%237d7064'/%3E%3Crect x='9' y='1' width='1' height='1' fill='%234b4139'/%3E%3Crect x='10' y='1' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='11' y='1' width='3' height='1' fill='%237d7064'/%3E%3Crect x='14' y='1' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='1' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%237d7064'/%3E%3Crect x='1' y='2' width='3' height='1' fill='%236e6156'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%2362564c'/%3E%3Crect x='5' y='2' width='4' height='1' fill='%236e6156'/%3E%3Crect x='9' y='2' width='1' height='1' fill='%234b4139'/%3E%3Crect x='10' y='2' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='11' y='2' width='1' height='1' fill='%237d7064'/%3E%3Crect x='12' y='2' width='2' height='1' fill='%236e6156'/%3E%3Crect x='14' y='2' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='2' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%237d7064'/%3E%3Crect x='1' y='3' width='6' height='1' fill='%236e6156'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%233a322c'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%236e6156'/%3E%3Crect x='9' y='3' width='1' height='1' fill='%234b4139'/%3E%3Crect x='10' y='3' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='11' y='3' width='1' height='1' fill='%237d7064'/%3E%3Crect x='12' y='3' width='1' height='1' fill='%2362564c'/%3E%3Crect x='13' y='3' width='1' height='1' fill='%236e6156'/%3E%3Crect x='14' y='3' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='3' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%237d7064'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%236e6156'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%233a322c'/%3E%3Crect x='3' y='4' width='5' height='1' fill='%236e6156'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%2362564c'/%3E%3Crect x='9' y='4' width='1' height='1' fill='%234b4139'/%3E%3Crect x='10' y='4' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='11' y='4' width='1' height='1' fill='%237d7064'/%3E%3Crect x='12' y='4' width='2' height='1' fill='%236e6156'/%3E%3Crect x='14' y='4' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='4' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%237d7064'/%3E%3Crect x='1' y='5' width='7' height='1' fill='%236e6156'/%3E%3Crect x='8' y='5' width='2' height='1' fill='%234b4139'/%3E%3Crect x='10' y='5' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='11' y='5' width='1' height='1' fill='%237d7064'/%3E%3Crect x='12' y='5' width='2' height='1' fill='%236e6156'/%3E%3Crect x='14' y='5' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='5' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='6' width='9' height='1' fill='%234b4139'/%3E%3Crect x='9' y='6' width='1' height='1' fill='%232f2823'/%3E%3Crect x='10' y='6' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='11' y='6' width='4' height='1' fill='%234b4139'/%3E%3Crect x='15' y='6' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='7' width='16' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='8' width='3' height='1' fill='%239a8b7c'/%3E%3Crect x='3' y='8' width='1' height='1' fill='%234b4139'/%3E%3Crect x='4' y='8' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='5' y='8' width='9' height='1' fill='%239a8b7c'/%3E%3Crect x='14' y='8' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='8' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='9' width='3' height='1' fill='%237d7064'/%3E%3Crect x='3' y='9' width='1' height='1' fill='%234b4139'/%3E%3Crect x='4' y='9' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='5' y='9' width='9' height='1' fill='%237d7064'/%3E%3Crect x='14' y='9' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='9' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='10' width='1' height='1' fill='%237d7064'/%3E%3Crect x='1' y='10' width='2' height='1' fill='%236e6156'/%3E%3Crect x='3' y='10' width='1' height='1' fill='%234b4139'/%3E%3Crect x='4' y='10' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='5' y='10' width='1' height='1' fill='%237d7064'/%3E%3Crect x='6' y='10' width='2' height='1' fill='%236e6156'/%3E%3Crect x='8' y='10' width='1' height='1' fill='%2362564c'/%3E%3Crect x='9' y='10' width='4' height='1' fill='%236e6156'/%3E%3Crect x='13' y='10' width='1' height='1' fill='%233a322c'/%3E%3Crect x='14' y='10' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='10' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='11' width='1' height='1' fill='%237d7064'/%3E%3Crect x='1' y='11' width='1' height='1' fill='%2362564c'/%3E%3Crect x='2' y='11' width='1' height='1' fill='%236e6156'/%3E%3Crect x='3' y='11' width='1' height='1' fill='%234b4139'/%3E%3Crect x='4' y='11' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='5' y='11' width='1' height='1' fill='%237d7064'/%3E%3Crect x='6' y='11' width='8' height='1' fill='%236e6156'/%3E%3Crect x='14' y='11' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='11' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='12' width='1' height='1' fill='%237d7064'/%3E%3Crect x='1' y='12' width='2' height='1' fill='%236e6156'/%3E%3Crect x='3' y='12' width='1' height='1' fill='%234b4139'/%3E%3Crect x='4' y='12' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='5' y='12' width='1' height='1' fill='%237d7064'/%3E%3Crect x='6' y='12' width='1' height='1' fill='%236e6156'/%3E%3Crect x='7' y='12' width='1' height='1' fill='%233a322c'/%3E%3Crect x='8' y='12' width='4' height='1' fill='%236e6156'/%3E%3Crect x='12' y='12' width='1' height='1' fill='%2362564c'/%3E%3Crect x='13' y='12' width='1' height='1' fill='%236e6156'/%3E%3Crect x='14' y='12' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='12' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='13' width='1' height='1' fill='%237d7064'/%3E%3Crect x='1' y='13' width='1' height='1' fill='%236e6156'/%3E%3Crect x='2' y='13' width='1' height='1' fill='%233a322c'/%3E%3Crect x='3' y='13' width='1' height='1' fill='%234b4139'/%3E%3Crect x='4' y='13' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='5' y='13' width='1' height='1' fill='%237d7064'/%3E%3Crect x='6' y='13' width='8' height='1' fill='%236e6156'/%3E%3Crect x='14' y='13' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='13' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='14' width='4' height='1' fill='%234b4139'/%3E%3Crect x='4' y='14' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='5' y='14' width='9' height='1' fill='%234b4139'/%3E%3Crect x='14' y='14' width='1' height='1' fill='%232f2823'/%3E%3Crect x='15' y='14' width='1' height='1' fill='%230d0a08'/%3E%3Crect x='0' y='15' width='16' height='1' fill='%230d0a08'/%3E%3C/svg%3E"); --px-gate-closed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='16' height='1' fill='%2316120f'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='1' width='13' height='1' fill='%239a8b7c'/%3E%3Crect x='14' y='1' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='1' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='2' width='2' height='1' fill='%236e6156'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%2362564c'/%3E%3Crect x='5' y='2' width='6' height='1' fill='%236e6156'/%3E%3Crect x='11' y='2' width='1' height='1' fill='%233a322c'/%3E%3Crect x='12' y='2' width='2' height='1' fill='%236e6156'/%3E%3Crect x='14' y='2' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='2' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='3' width='14' height='1' fill='%234b4139'/%3E%3Crect x='15' y='3' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%234b4139'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%2316120f'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%238a8178'/%3E%3Crect x='5' y='4' width='2' height='1' fill='%2316120f'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%238a8178'/%3E%3Crect x='8' y='4' width='2' height='1' fill='%2316120f'/%3E%3Crect x='10' y='4' width='1' height='1' fill='%238a8178'/%3E%3Crect x='11' y='4' width='2' height='1' fill='%2316120f'/%3E%3Crect x='13' y='4' width='1' height='1' fill='%237d7064'/%3E%3Crect x='14' y='4' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='4' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%234b4139'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%2316120f'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%238a8178'/%3E%3Crect x='5' y='5' width='2' height='1' fill='%2316120f'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%238a8178'/%3E%3Crect x='8' y='5' width='2' height='1' fill='%2316120f'/%3E%3Crect x='10' y='5' width='1' height='1' fill='%238a8178'/%3E%3Crect x='11' y='5' width='2' height='1' fill='%2316120f'/%3E%3Crect x='13' y='5' width='1' height='1' fill='%237d7064'/%3E%3Crect x='14' y='5' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='5' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%2362564c'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%234b4139'/%3E%3Crect x='3' y='6' width='10' height='1' fill='%238a8178'/%3E%3Crect x='13' y='6' width='1' height='1' fill='%237d7064'/%3E%3Crect x='14' y='6' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='6' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='7' width='1' height='1' fill='%234b4139'/%3E%3Crect x='3' y='7' width='10' height='1' fill='%232b2a2a'/%3E%3Crect x='13' y='7' width='1' height='1' fill='%237d7064'/%3E%3Crect x='14' y='7' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='7' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='8' width='1' height='1' fill='%234b4139'/%3E%3Crect x='3' y='8' width='1' height='1' fill='%2316120f'/%3E%3Crect x='4' y='8' width='1' height='1' fill='%238a8178'/%3E%3Crect x='5' y='8' width='2' height='1' fill='%2316120f'/%3E%3Crect x='7' y='8' width='1' height='1' fill='%238a8178'/%3E%3Crect x='8' y='8' width='2' height='1' fill='%2316120f'/%3E%3Crect x='10' y='8' width='1' height='1' fill='%238a8178'/%3E%3Crect x='11' y='8' width='2' height='1' fill='%2316120f'/%3E%3Crect x='13' y='8' width='1' height='1' fill='%2362564c'/%3E%3Crect x='14' y='8' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='8' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='9' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='9' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='9' width='1' height='1' fill='%234b4139'/%3E%3Crect x='3' y='9' width='1' height='1' fill='%2316120f'/%3E%3Crect x='4' y='9' width='1' height='1' fill='%238a8178'/%3E%3Crect x='5' y='9' width='2' height='1' fill='%2316120f'/%3E%3Crect x='7' y='9' width='1' height='1' fill='%238a8178'/%3E%3Crect x='8' y='9' width='2' height='1' fill='%2316120f'/%3E%3Crect x='10' y='9' width='1' height='1' fill='%238a8178'/%3E%3Crect x='11' y='9' width='2' height='1' fill='%2316120f'/%3E%3Crect x='13' y='9' width='1' height='1' fill='%237d7064'/%3E%3Crect x='14' y='9' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='9' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='10' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='10' width='1' height='1' fill='%233a322c'/%3E%3Crect x='2' y='10' width='1' height='1' fill='%234b4139'/%3E%3Crect x='3' y='10' width='1' height='1' fill='%2316120f'/%3E%3Crect x='4' y='10' width='1' height='1' fill='%238a8178'/%3E%3Crect x='5' y='10' width='2' height='1' fill='%2316120f'/%3E%3Crect x='7' y='10' width='1' height='1' fill='%238a8178'/%3E%3Crect x='8' y='10' width='2' height='1' fill='%2316120f'/%3E%3Crect x='10' y='10' width='1' height='1' fill='%238a8178'/%3E%3Crect x='11' y='10' width='2' height='1' fill='%2316120f'/%3E%3Crect x='13' y='10' width='1' height='1' fill='%237d7064'/%3E%3Crect x='14' y='10' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='10' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='11' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='11' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='11' width='1' height='1' fill='%234b4139'/%3E%3Crect x='3' y='11' width='10' height='1' fill='%238a8178'/%3E%3Crect x='13' y='11' width='1' height='1' fill='%237d7064'/%3E%3Crect x='14' y='11' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='11' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='12' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='12' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='12' width='1' height='1' fill='%234b4139'/%3E%3Crect x='3' y='12' width='10' height='1' fill='%232b2a2a'/%3E%3Crect x='13' y='12' width='1' height='1' fill='%237d7064'/%3E%3Crect x='14' y='12' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='12' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='13' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='13' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='13' width='1' height='1' fill='%234b4139'/%3E%3Crect x='3' y='13' width='1' height='1' fill='%2316120f'/%3E%3Crect x='4' y='13' width='1' height='1' fill='%238a8178'/%3E%3Crect x='5' y='13' width='2' height='1' fill='%2316120f'/%3E%3Crect x='7' y='13' width='1' height='1' fill='%238a8178'/%3E%3Crect x='8' y='13' width='2' height='1' fill='%2316120f'/%3E%3Crect x='10' y='13' width='1' height='1' fill='%238a8178'/%3E%3Crect x='11' y='13' width='2' height='1' fill='%2316120f'/%3E%3Crect x='13' y='13' width='1' height='1' fill='%237d7064'/%3E%3Crect x='14' y='13' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='13' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='14' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='14' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='14' width='1' height='1' fill='%234b4139'/%3E%3Crect x='3' y='14' width='1' height='1' fill='%2316120f'/%3E%3Crect x='4' y='14' width='1' height='1' fill='%239a8b7c'/%3E%3Crect x='5' y='14' width='2' height='1' fill='%2316120f'/%3E%3Crect x='7' y='14' width='1' height='1' fill='%239a8b7c'/%3E%3Crect x='8' y='14' width='2' height='1' fill='%2316120f'/%3E%3Crect x='10' y='14' width='1' height='1' fill='%239a8b7c'/%3E%3Crect x='11' y='14' width='2' height='1' fill='%2316120f'/%3E%3Crect x='13' y='14' width='1' height='1' fill='%237d7064'/%3E%3Crect x='14' y='14' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='14' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='15' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='15' width='2' height='1' fill='%232f2823'/%3E%3Crect x='3' y='15' width='10' height='1' fill='%2316120f'/%3E%3Crect x='13' y='15' width='2' height='1' fill='%232f2823'/%3E%3Crect x='15' y='15' width='1' height='1' fill='%2316120f'/%3E%3C/svg%3E"); --px-gate-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='16' height='1' fill='%2316120f'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='1' width='13' height='1' fill='%239a8b7c'/%3E%3Crect x='14' y='1' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='1' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='2' width='2' height='1' fill='%236e6156'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%2362564c'/%3E%3Crect x='5' y='2' width='6' height='1' fill='%236e6156'/%3E%3Crect x='11' y='2' width='1' height='1' fill='%233a322c'/%3E%3Crect x='12' y='2' width='2' height='1' fill='%236e6156'/%3E%3Crect x='14' y='2' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='2' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='3' width='14' height='1' fill='%234b4139'/%3E%3Crect x='15' y='3' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%234b4139'/%3E%3Crect x='3' y='4' width='10' height='1' fill='%238a8178'/%3E%3Crect x='13' y='4' width='1' height='1' fill='%237d7064'/%3E%3Crect x='14' y='4' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='4' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%234b4139'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%2316120f'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%238a8178'/%3E%3Crect x='5' y='5' width='2' height='1' fill='%2316120f'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%238a8178'/%3E%3Crect x='8' y='5' width='2' height='1' fill='%2316120f'/%3E%3Crect x='10' y='5' width='1' height='1' fill='%238a8178'/%3E%3Crect x='11' y='5' width='2' height='1' fill='%2316120f'/%3E%3Crect x='13' y='5' width='1' height='1' fill='%237d7064'/%3E%3Crect x='14' y='5' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='5' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%234b4139'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%239a8b7c'/%3E%3Crect x='7' y='6' width='1' height='1' fill='%239a8b7c'/%3E%3Crect x='10' y='6' width='1' height='1' fill='%239a8b7c'/%3E%3Crect x='13' y='6' width='1' height='1' fill='%237d7064'/%3E%3Crect x='14' y='6' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='6' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='7' width='1' height='1' fill='%234b4139'/%3E%3Crect x='13' y='7' width='1' height='1' fill='%237d7064'/%3E%3Crect x='14' y='7' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='7' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%2362564c'/%3E%3Crect x='2' y='8' width='1' height='1' fill='%234b4139'/%3E%3Crect x='13' y='8' width='1' height='1' fill='%237d7064'/%3E%3Crect x='14' y='8' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='8' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='9' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='9' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='9' width='1' height='1' fill='%234b4139'/%3E%3Crect x='13' y='9' width='1' height='1' fill='%237d7064'/%3E%3Crect x='14' y='9' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='9' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='10' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='10' width='1' height='1' fill='%233a322c'/%3E%3Crect x='2' y='10' width='1' height='1' fill='%234b4139'/%3E%3Crect x='13' y='10' width='1' height='1' fill='%2362564c'/%3E%3Crect x='14' y='10' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='10' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='11' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='11' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='11' width='1' height='1' fill='%234b4139'/%3E%3Crect x='13' y='11' width='1' height='1' fill='%237d7064'/%3E%3Crect x='14' y='11' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='11' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='12' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='12' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='12' width='1' height='1' fill='%234b4139'/%3E%3Crect x='13' y='12' width='1' height='1' fill='%237d7064'/%3E%3Crect x='14' y='12' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='12' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='13' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='13' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='13' width='1' height='1' fill='%234b4139'/%3E%3Crect x='13' y='13' width='1' height='1' fill='%237d7064'/%3E%3Crect x='14' y='13' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='13' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='14' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='14' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='14' width='1' height='1' fill='%234b4139'/%3E%3Crect x='13' y='14' width='1' height='1' fill='%237d7064'/%3E%3Crect x='14' y='14' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='14' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='15' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='15' width='2' height='1' fill='%232f2823'/%3E%3Crect x='13' y='15' width='2' height='1' fill='%232f2823'/%3E%3Crect x='15' y='15' width='1' height='1' fill='%2316120f'/%3E%3C/svg%3E"); --px-plate-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='16' height='1' fill='%2316120f'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='1' width='13' height='1' fill='%239a8b7c'/%3E%3Crect x='14' y='1' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='1' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='2' width='12' height='1' fill='%2316120f'/%3E%3Crect x='14' y='2' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='2' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%2316120f'/%3E%3Crect x='3' y='3' width='9' height='1' fill='%238a8178'/%3E%3Crect x='12' y='3' width='1' height='1' fill='%234d4b49'/%3E%3Crect x='13' y='3' width='1' height='1' fill='%2316120f'/%3E%3Crect x='14' y='3' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='3' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%2316120f'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%238a8178'/%3E%3Crect x='12' y='4' width='1' height='1' fill='%232b2a2a'/%3E%3Crect x='13' y='4' width='1' height='1' fill='%2316120f'/%3E%3Crect x='14' y='4' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='4' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%2316120f'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%238a8178'/%3E%3Crect x='12' y='5' width='1' height='1' fill='%232b2a2a'/%3E%3Crect x='13' y='5' width='1' height='1' fill='%2316120f'/%3E%3Crect x='14' y='5' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='5' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%2316120f'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%238a8178'/%3E%3Crect x='12' y='6' width='1' height='1' fill='%232b2a2a'/%3E%3Crect x='13' y='6' width='1' height='1' fill='%2316120f'/%3E%3Crect x='14' y='6' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='6' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='7' width='1' height='1' fill='%2316120f'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%238a8178'/%3E%3Crect x='12' y='7' width='1' height='1' fill='%232b2a2a'/%3E%3Crect x='13' y='7' width='1' height='1' fill='%2316120f'/%3E%3Crect x='14' y='7' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='7' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='8' width='1' height='1' fill='%2316120f'/%3E%3Crect x='3' y='8' width='1' height='1' fill='%238a8178'/%3E%3Crect x='12' y='8' width='1' height='1' fill='%232b2a2a'/%3E%3Crect x='13' y='8' width='1' height='1' fill='%2316120f'/%3E%3Crect x='14' y='8' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='8' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='9' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='9' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='9' width='1' height='1' fill='%2316120f'/%3E%3Crect x='3' y='9' width='1' height='1' fill='%238a8178'/%3E%3Crect x='12' y='9' width='1' height='1' fill='%232b2a2a'/%3E%3Crect x='13' y='9' width='1' height='1' fill='%2316120f'/%3E%3Crect x='14' y='9' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='9' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='10' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='10' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='10' width='1' height='1' fill='%2316120f'/%3E%3Crect x='3' y='10' width='1' height='1' fill='%238a8178'/%3E%3Crect x='12' y='10' width='1' height='1' fill='%232b2a2a'/%3E%3Crect x='13' y='10' width='1' height='1' fill='%2316120f'/%3E%3Crect x='14' y='10' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='10' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='11' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='11' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='11' width='1' height='1' fill='%2316120f'/%3E%3Crect x='3' y='11' width='1' height='1' fill='%238a8178'/%3E%3Crect x='12' y='11' width='1' height='1' fill='%232b2a2a'/%3E%3Crect x='13' y='11' width='1' height='1' fill='%2316120f'/%3E%3Crect x='14' y='11' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='11' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='12' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='12' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='12' width='1' height='1' fill='%2316120f'/%3E%3Crect x='3' y='12' width='1' height='1' fill='%234d4b49'/%3E%3Crect x='4' y='12' width='9' height='1' fill='%232b2a2a'/%3E%3Crect x='13' y='12' width='1' height='1' fill='%2316120f'/%3E%3Crect x='14' y='12' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='12' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='13' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='13' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='13' width='12' height='1' fill='%2316120f'/%3E%3Crect x='14' y='13' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='13' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='14' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='14' width='14' height='1' fill='%234b4139'/%3E%3Crect x='15' y='14' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='15' width='16' height='1' fill='%2316120f'/%3E%3C/svg%3E"); --px-plate-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='16' height='1' fill='%2316120f'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='1' width='13' height='1' fill='%239a8b7c'/%3E%3Crect x='14' y='1' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='1' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='2' width='12' height='1' fill='%2316120f'/%3E%3Crect x='14' y='2' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='2' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%2316120f'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23ffd34d'/%3E%3Crect x='4' y='3' width='8' height='1' fill='%232b2a2a'/%3E%3Crect x='12' y='3' width='1' height='1' fill='%23ffd34d'/%3E%3Crect x='13' y='3' width='1' height='1' fill='%2316120f'/%3E%3Crect x='14' y='3' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='3' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%2316120f'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%232b2a2a'/%3E%3Crect x='12' y='4' width='1' height='1' fill='%238a8178'/%3E%3Crect x='13' y='4' width='1' height='1' fill='%2316120f'/%3E%3Crect x='14' y='4' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='4' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%2316120f'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%232b2a2a'/%3E%3Crect x='12' y='5' width='1' height='1' fill='%238a8178'/%3E%3Crect x='13' y='5' width='1' height='1' fill='%2316120f'/%3E%3Crect x='14' y='5' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='5' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%2316120f'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%232b2a2a'/%3E%3Crect x='12' y='6' width='1' height='1' fill='%238a8178'/%3E%3Crect x='13' y='6' width='1' height='1' fill='%2316120f'/%3E%3Crect x='14' y='6' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='6' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='7' width='1' height='1' fill='%2316120f'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%232b2a2a'/%3E%3Crect x='12' y='7' width='1' height='1' fill='%238a8178'/%3E%3Crect x='13' y='7' width='1' height='1' fill='%2316120f'/%3E%3Crect x='14' y='7' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='7' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='8' width='1' height='1' fill='%2316120f'/%3E%3Crect x='3' y='8' width='1' height='1' fill='%232b2a2a'/%3E%3Crect x='12' y='8' width='1' height='1' fill='%238a8178'/%3E%3Crect x='13' y='8' width='1' height='1' fill='%2316120f'/%3E%3Crect x='14' y='8' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='8' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='9' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='9' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='9' width='1' height='1' fill='%2316120f'/%3E%3Crect x='3' y='9' width='1' height='1' fill='%232b2a2a'/%3E%3Crect x='12' y='9' width='1' height='1' fill='%238a8178'/%3E%3Crect x='13' y='9' width='1' height='1' fill='%2316120f'/%3E%3Crect x='14' y='9' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='9' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='10' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='10' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='10' width='1' height='1' fill='%2316120f'/%3E%3Crect x='3' y='10' width='1' height='1' fill='%232b2a2a'/%3E%3Crect x='12' y='10' width='1' height='1' fill='%238a8178'/%3E%3Crect x='13' y='10' width='1' height='1' fill='%2316120f'/%3E%3Crect x='14' y='10' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='10' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='11' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='11' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='11' width='1' height='1' fill='%2316120f'/%3E%3Crect x='3' y='11' width='1' height='1' fill='%232b2a2a'/%3E%3Crect x='12' y='11' width='1' height='1' fill='%238a8178'/%3E%3Crect x='13' y='11' width='1' height='1' fill='%2316120f'/%3E%3Crect x='14' y='11' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='11' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='12' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='12' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='12' width='1' height='1' fill='%2316120f'/%3E%3Crect x='3' y='12' width='1' height='1' fill='%23ffd34d'/%3E%3Crect x='4' y='12' width='8' height='1' fill='%238a8178'/%3E%3Crect x='12' y='12' width='1' height='1' fill='%23ffd34d'/%3E%3Crect x='13' y='12' width='1' height='1' fill='%2316120f'/%3E%3Crect x='14' y='12' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='12' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='13' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='13' width='1' height='1' fill='%237d7064'/%3E%3Crect x='2' y='13' width='12' height='1' fill='%2316120f'/%3E%3Crect x='14' y='13' width='1' height='1' fill='%234b4139'/%3E%3Crect x='15' y='13' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='14' width='1' height='1' fill='%2316120f'/%3E%3Crect x='1' y='14' width='14' height='1' fill='%234b4139'/%3E%3Crect x='15' y='14' width='1' height='1' fill='%2316120f'/%3E%3Crect x='0' y='15' width='16' height='1' fill='%2316120f'/%3E%3C/svg%3E"); } /* END generated */ /* ===== Backdrop ===== */ body { background-color: #0b0908; background-image: radial-gradient(ellipse at 50% 0%, rgba(255, 140, 50, 0.08), transparent 60%), linear-gradient(rgba(8, 6, 5, 0.55), rgba(8, 6, 5, 0.75)), var(--dungeon-wall); background-size: auto, auto, 128px 64px; background-attachment: fixed; } .screen { background: transparent; } /* Main menu gets a brighter, torch-lit wall */ #main-menu { position: relative; background: radial-gradient(ellipse at 15% 12%, var(--torch-light), transparent 35%), radial-gradient(ellipse at 85% 12%, var(--torch-light), transparent 35%), linear-gradient(rgba(10, 8, 6, 0.15), rgba(10, 8, 6, 0.6)), var(--dungeon-wall); background-size: auto, auto, auto, 128px 64px; overflow-x: hidden; } /* ===== The gate (menu container) ===== * Everything is drawn inside the container (no overflow tricks), so it also works where the * container scrolls on its own (iOS). Art: tools/art/dungeon-frame.mjs, 4px per art pixel. * lintel: 48px stone course across the top, iron straps on both ends, keystone in the middle * pillars: 24px stone blocks down both sides */ #main-menu .menu-container { position: relative; margin-top: 8px; padding-top: calc(64px + 0.75rem); padding-left: calc(24px + 1.5rem); padding-right: calc(24px + 1.5rem); border: none; border-radius: 0; background: radial-gradient(ellipse at 50% 60px, rgba(255, 160, 70, 0.16), transparent 55%), linear-gradient(180deg, rgba(5, 4, 3, 0.92), rgba(12, 9, 7, 0.96)); box-shadow: 0 0 0 4px #0d0a08, 8px 8px 0 4px rgba(0, 0, 0, 0.55), inset 0 0 40px rgba(0, 0, 0, 0.9); } /* Pillars, from under the lintel down to the floor */ #main-menu .menu-container::before { content: ''; position: absolute; top: 48px; bottom: 0; left: 0; right: 0; background: var(--px-pillar-left) left top / 24px 56px repeat-y, var(--px-pillar-right) right top / 24px 56px repeat-y, linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent) left top / 100% 16px no-repeat; pointer-events: none; z-index: 1; } /* Lintel with iron straps and the keystone */ #main-menu .menu-container::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 56px; background: var(--px-bracket) left 8px top 0 / 32px 48px no-repeat, var(--px-bracket) right 8px top 0 / 32px 48px no-repeat, var(--px-keystone) center top / 48px 56px no-repeat, var(--px-lintel) left top / 96px 48px repeat-x; pointer-events: none; z-index: 2; } /* ===== Title ===== */ /* Colours come from the month theme (styles/themes.css sets --title-*) */ #main-menu .game-title { position: relative; color: var(--title-color, var(--dungeon-gold)); text-shadow: 2px 2px 0 var(--title-shade, #7a4a00), 4px 4px 0 #000; animation: torch-glow 3s steps(6) infinite; } @keyframes torch-glow { 0%, 100% { filter: drop-shadow(0 0 6px var(--title-glow-soft, rgba(255, 170, 60, 0.55))); } 30% { filter: drop-shadow(0 0 12px var(--title-glow-strong, rgba(255, 150, 40, 0.7))); } 55% { filter: drop-shadow(0 0 8px var(--title-glow-soft, rgba(255, 190, 80, 0.6))); } 80% { filter: drop-shadow(0 0 14px var(--title-glow-strong, rgba(255, 140, 40, 0.75))); } } #main-menu .game-subtitle { color: #a58f74; margin-bottom: 1rem; } /* ===== Torches ===== */ .torch { position: absolute; top: 92px; width: 8px; height: 28px; background: linear-gradient(90deg, #4a2c14 0 50%, #331d0c 50% 100%); box-shadow: -4px 0 0 #2b2a2a, 4px 0 0 #2b2a2a, 0 -4px 0 #4d4b49; pointer-events: none; z-index: 2; transform: scale(1.5); transform-origin: 50% 0; } .torch-left { left: 8px; } .torch-right { right: 8px; } /* Flame: 4px pixels drawn with box-shadow, three frames */ .torch-flame { position: absolute; left: 2px; top: -8px; width: 4px; height: 4px; animation: flame 0.45s steps(1) infinite; } .torch-right .torch-flame { animation-delay: -0.2s; } @keyframes flame { 0% { box-shadow: 0 -16px 0 #ffe27a, -4px -12px 0 #ff9a1f, 0 -12px 0 #ffe066, 4px -12px 0 #ff9a1f, -4px -8px 0 #ff7a12, 0 -8px 0 #fff3a0, 4px -8px 0 #ff7a12, -8px -4px 0 #d9480f, -4px -4px 0 #ff9a1f, 0 -4px 0 #ffe066, 4px -4px 0 #ff9a1f, 8px -4px 0 #d9480f, -4px 0 0 #d9480f, 0 0 0 #ff7a12, 4px 0 0 #d9480f; } 33% { box-shadow: 4px -20px 0 #ffd34d, 0 -16px 0 #ff9a1f, 4px -16px 0 #ffe066, -4px -12px 0 #ff7a12, 0 -12px 0 #fff3a0, 4px -12px 0 #ff9a1f, -4px -8px 0 #ff9a1f, 0 -8px 0 #ffe066, 4px -8px 0 #ff7a12, 8px -8px 0 #d9480f, -8px -4px 0 #d9480f, -4px -4px 0 #ff7a12, 0 -4px 0 #ffe066, 4px -4px 0 #ff9a1f, -4px 0 0 #d9480f, 0 0 0 #ff7a12, 4px 0 0 #d9480f; } 66% { box-shadow: -4px -20px 0 #ffd34d, -4px -16px 0 #ffe066, 0 -16px 0 #ff9a1f, -4px -12px 0 #ff9a1f, 0 -12px 0 #fff3a0, 4px -12px 0 #ff7a12, -8px -8px 0 #d9480f, -4px -8px 0 #ff7a12, 0 -8px 0 #ffe066, 4px -8px 0 #ff9a1f, -4px -4px 0 #ff9a1f, 0 -4px 0 #ffe066, 4px -4px 0 #ff7a12, 8px -4px 0 #d9480f, -4px 0 0 #d9480f, 0 0 0 #ff7a12, 4px 0 0 #d9480f; } } /* Warm light pool around each torch */ .torch::after { content: ''; position: absolute; left: 50%; top: -14px; width: 120px; height: 120px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 150, 50, 0.28), transparent 65%); animation: torch-flicker 1.6s steps(4) infinite; } @keyframes torch-flicker { 0%, 100% { opacity: 0.85; } 25% { opacity: 1; } 50% { opacity: 0.7; } 75% { opacity: 0.95; } } /* ===== Hero standing in the doorway ===== */ .menu-hero-stage { display: flex; justify-content: center; align-items: flex-end; height: 72px; margin: 0 auto 1.25rem; width: 160px; background: radial-gradient(ellipse at 50% 92%, rgba(0, 0, 0, 0.7) 0 18%, transparent 19%), linear-gradient(180deg, transparent 80%, #2a2420 80%, #2a2420 86%, transparent 86%); } .menu-hero-stage .menu-hero { width: 64px; height: 72px; overflow: visible; animation: hero-idle 1.2s steps(2) infinite; } .menu-hero-stage .menu-hero::before { top: 40%; transform: translate(-50%, -50%) scale(1.75); } @keyframes hero-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* ===== Embers rising through the room ===== */ .dungeon-embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .dungeon-embers span { position: absolute; bottom: -8px; width: 4px; height: 4px; background: #ff9a1f; box-shadow: 0 0 6px #ff7a12; opacity: 0; animation: ember-rise 9s linear infinite; } .dungeon-embers span:nth-child(1) { left: 6%; animation-delay: 0s; } .dungeon-embers span:nth-child(2) { left: 18%; animation-delay: 2.5s; animation-duration: 11s; } .dungeon-embers span:nth-child(3) { left: 31%; animation-delay: 5s; } .dungeon-embers span:nth-child(4) { left: 44%; animation-delay: 1.2s; animation-duration: 12s; background: #ffd34d; } .dungeon-embers span:nth-child(5) { left: 57%; animation-delay: 6.5s; } .dungeon-embers span:nth-child(6) { left: 69%; animation-delay: 3.4s; animation-duration: 10s; } .dungeon-embers span:nth-child(7) { left: 81%; animation-delay: 7.7s; background: #ffd34d; } .dungeon-embers span:nth-child(8) { left: 93%; animation-delay: 4.2s; animation-duration: 13s; } @keyframes ember-rise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 0.9; } 50% { transform: translate(16px, -50vh); } 80% { opacity: 0.6; } 100% { transform: translate(-8px, -100vh); opacity: 0; } } #main-menu .menu-container { z-index: 1; } #main-menu .torch { z-index: 3; } /* ===== Buttons: stone slabs ===== */ .menu-play-btn { position: relative; background-color: #362f2a; background-image: var(--dungeon-slab); background-size: 32px 32px; border: 4px solid #15110e; color: #efe3cf; box-shadow: inset 4px 4px 0 #554b42, inset -4px -4px 0 #231e1a, 4px 4px 0 rgba(0, 0, 0, 0.6); } /* Main menu icons a bit larger, at 2x the 12px pixel grid so they stay crisp */ #main-menu .menu-play-btn > .pixel-emoji, #modes-screen .menu-play-btn > .pixel-emoji { width: 24px; height: 24px; margin-right: 0.2em; vertical-align: -6px; } @media (min-width: 700px) { #main-menu .menu-play-btn > .pixel-emoji, #modes-screen .menu-play-btn > .pixel-emoji { width: 36px; height: 36px; vertical-align: -10px; } } /* Iron rivets in the corners */ .menu-play-btn::before, .menu-play-btn::after { content: ''; position: absolute; top: 8px; width: 4px; height: 4px; background: #8a8178; box-shadow: 0 0 0 1px #1a1613, 0 calc(100% + 0px) 0 0 transparent; pointer-events: none; } .menu-play-btn::before { left: 8px; } .menu-play-btn::after { right: 8px; } .menu-play-btn:hover { border-color: #15110e; background-color: #3f3731; box-shadow: inset 4px 4px 0 #6a5d50, inset -4px -4px 0 #231e1a, 6px 6px 0 rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 150, 60, 0.25); } .menu-play-btn:active { box-shadow: inset 4px 4px 0 #231e1a, inset -4px -4px 0 #554b42, 2px 2px 0 rgba(0, 0, 0, 0.6); } .menu-play-btn:focus-visible { outline: 4px solid var(--dungeon-gold); outline-offset: 2px; } .menu-play-btn .btn-subtitle { color: #a99a86; } /* Daily: an iron-banded wooden door with gold trim */ .menu-play-btn.primary { color: var(--dungeon-gold); border-color: #2a1606; background-color: #6b4423; background-image: linear-gradient(180deg, transparent 18%, #2c2520 18%, #2c2520 calc(18% + 4px), transparent calc(18% + 4px), transparent calc(82% - 4px), #2c2520 calc(82% - 4px), #2c2520 82%, transparent 82%), repeating-linear-gradient(90deg, #6b4423 0 20px, #5c3a1d 20px 22px, #4a2e16 22px 24px); background-size: auto; box-shadow: inset 4px 4px 0 #8a5a2e, inset -4px -4px 0 #3a230f, 0 0 0 4px #b08a2c, 4px 4px 0 4px rgba(0, 0, 0, 0.6); } .menu-play-btn.primary:hover { background-color: #77502b; box-shadow: inset 4px 4px 0 #9c6a39, inset -4px -4px 0 #3a230f, 0 0 0 4px var(--dungeon-gold), 6px 6px 0 4px rgba(0, 0, 0, 0.6), 0 0 24px rgba(255, 190, 60, 0.4); } .menu-play-btn.primary .btn-subtitle, .menu-play-btn.primary .daily-date { color: #f6dfa8; } /* Completed daily: the door is open, moss-green trim */ .menu-play-btn.primary.daily-completed { color: #9fdc8f; background-color: #3f4a2a; background-image: linear-gradient(180deg, transparent 18%, #1f251a 18%, #1f251a calc(18% + 4px), transparent calc(18% + 4px), transparent calc(82% - 4px), #1f251a calc(82% - 4px), #1f251a 82%, transparent 82%), repeating-linear-gradient(90deg, #4a5a33 0 20px, #3e4c2b 20px 22px, #2f3b20 22px 24px); box-shadow: inset 4px 4px 0 #5f7244, inset -4px -4px 0 #232c18, 0 0 0 4px #6aaa64, 4px 4px 0 4px rgba(0, 0, 0, 0.6); } .menu-play-btn.primary.daily-completed .btn-subtitle, .menu-play-btn.primary.daily-completed .daily-date { color: #b9e6ad; } /* Challenge: stone over glowing lava */ .menu-play-btn.danger { color: #ff8a5c; border-color: #1a0a06; background-color: #3a2420; background-image: linear-gradient(0deg, rgba(255, 80, 20, 0.45), transparent 45%), var(--dungeon-slab); background-size: auto, 32px 32px; box-shadow: inset 4px 4px 0 #5a3a32, inset -4px -4px 0 #200f0b, 4px 4px 0 rgba(0, 0, 0, 0.6); animation: lava-pulse 2.4s steps(6) infinite; } .menu-play-btn.danger:hover { border-color: #1a0a06; box-shadow: inset 4px 4px 0 #6a443a, inset -4px -4px 0 #200f0b, 6px 6px 0 rgba(0, 0, 0, 0.6), 0 0 24px rgba(255, 90, 30, 0.45); } @keyframes lava-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } } .menu-play-btn.secondary, .menu-play-btn.logout { color: #d8ccb8; } /* Auth divider becomes a row of stones */ #main-menu .auth-section { border-top: 4px solid #3d352e !important; box-shadow: 0 -8px 0 -4px #16120f; } /* ===== Sub screens share the stone look ===== */ .screen:not(#main-menu) .menu-container { border: none; border-radius: 0; background: linear-gradient(180deg, rgba(8, 6, 5, 0.92), rgba(14, 11, 9, 0.95)); box-shadow: 0 0 0 4px #5e554b, 0 0 0 8px #3d352e, 0 0 0 12px #16120f, 0 16px 48px rgba(0, 0, 0, 0.85); } .submenu-header { background: rgba(18, 14, 11, 0.96); border-bottom: 4px solid #3d352e; box-shadow: 0 4px 0 #16120f; } /* ===== Splash screen (shown while the app loads) ===== * The hero walks across a row of floor tiles and lights each one he steps on, like clearing a level. * Walk and light share one 7-step loop so they stay in sync. */ #splash-screen { --splash-tile: 30px; --splash-loop: 2.1s; position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: #0b0908; background-image: radial-gradient(ellipse at 50% 42%, rgba(255, 140, 50, 0.16), transparent 55%), linear-gradient(rgba(8, 6, 5, 0.5), rgba(8, 6, 5, 0.85)), var(--dungeon-wall); background-size: auto, auto, 128px 64px; transition: opacity 0.35s ease-out; } #splash-screen .dungeon-embers span { animation-duration: 6s; } #splash-screen .dungeon-embers span:nth-child(1) { animation-delay: -1s; } #splash-screen .dungeon-embers span:nth-child(2) { animation-delay: -3.5s; } #splash-screen .dungeon-embers span:nth-child(3) { animation-delay: -2.2s; } #splash-screen .dungeon-embers span:nth-child(4) { animation-delay: -4.6s; } #splash-screen .dungeon-embers span:nth-child(5) { animation-delay: -0.4s; } #splash-screen .dungeon-embers span:nth-child(6) { animation-delay: -5.3s; } .splash-stage { position: relative; z-index: 1; width: 280px; padding-top: 8px; display: flex; flex-direction: column; align-items: center; gap: 28px; } .splash-stage .torch { top: 34px; transform: scale(1.25); } .splash-stage .torch-left { left: 0; } .splash-stage .torch-right { right: 0; } .splash-title { display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--retro-font, 'Press Start 2P', monospace); font-size: 1.6rem; line-height: 1; color: var(--dungeon-gold); text-transform: uppercase; text-shadow: 3px 3px 0 #6b3d0a, 6px 6px 0 #000; } .splash-run { position: relative; width: calc(var(--splash-tile) * 7); height: 62px; } .splash-walker { position: absolute; left: 0; bottom: 12px; width: var(--splash-tile); height: 50px; animation: splash-walk var(--splash-loop) steps(7, jump-none) infinite; } .splash-hero.char-card-preview { width: var(--splash-tile); height: 50px; overflow: visible; animation: splash-hop calc(var(--splash-loop) / 7) steps(2) infinite; } .splash-hero.char-card-preview::before { transform: translate(-50%, -50%) scale(1.25); } /* Floor: stone tiles; the gold layer grows one tile per step behind the hero */ .splash-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background-color: #3a322c; background-image: repeating-linear-gradient(90deg, transparent 0 calc(var(--splash-tile) - 2px), #0d0a08 calc(var(--splash-tile) - 2px) var(--splash-tile)), linear-gradient(#0d0a08, #0d0a08), linear-gradient(#ffe066 0 3px, #ffb52e 3px 100%); background-size: auto, 100% 2px, var(--splash-tile) 100%; background-position: 0 0, 0 100%, 0 0; background-repeat: repeat, no-repeat, no-repeat; box-shadow: inset 0 3px 0 #6e6156, 0 0 18px rgba(255, 180, 60, 0.25); animation: splash-light var(--splash-loop) steps(7, jump-none) infinite; } .splash-text { font-family: var(--retro-font, 'Press Start 2P', monospace); font-size: 0.55rem; color: #a58f74; letter-spacing: 1px; } .splash-dots span { animation: splash-dot 1.2s steps(1) infinite; } .splash-dots span:nth-child(2) { animation-delay: 0.2s; } .splash-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes splash-walk { from { transform: translateX(0); } to { transform: translateX(calc(var(--splash-tile) * 6)); } } @keyframes splash-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes splash-light { from { background-size: auto, 100% 2px, var(--splash-tile) 100%; } to { background-size: auto, 100% 2px, calc(var(--splash-tile) * 7) 100%; } } @keyframes splash-dot { 0% { opacity: 0; } 30%, 100% { opacity: 1; } } @media (max-width: 360px) { .splash-title { font-size: 1.3rem; } } /* ===== Accessibility ===== */ @media (prefers-reduced-motion: reduce) { .torch-flame, .torch::after, .dungeon-embers span, .menu-hero-stage .menu-hero, #main-menu .game-title, .splash-walker, .splash-hero.char-card-preview, .splash-floor, .splash-dots span, .menu-play-btn.danger { animation: none; } .torch-flame { box-shadow: 0 -16px 0 #ffe27a, -4px -12px 0 #ff9a1f, 0 -12px 0 #ffe066, 4px -12px 0 #ff9a1f, -4px -8px 0 #ff7a12, 0 -8px 0 #fff3a0, 4px -8px 0 #ff7a12, -8px -4px 0 #d9480f, -4px -4px 0 #ff9a1f, 0 -4px 0 #ffe066, 4px -4px 0 #ff9a1f, 8px -4px 0 #d9480f, -4px 0 0 #d9480f, 0 0 0 #ff7a12, 4px 0 0 #d9480f; } .dungeon-embers { display: none; } } @media (max-width: 480px) { #main-menu { padding-left: 4px; padding-right: 4px; } #main-menu .menu-container { padding-left: calc(24px + 0.5rem); padding-right: calc(24px + 0.5rem); } .menu-hero-stage { height: 64px; margin-bottom: 1rem; } } /* ===== Gameplay effects (js/ui/effects.js) ===== */ .fx-dust { position: fixed; width: 4px; height: 4px; margin: -2px 0 0 -2px; pointer-events: none; z-index: 100; animation: fx-dust 0.45s steps(5) forwards; } @keyframes fx-dust { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } } .fx-shake { animation: fx-shake 0.4s steps(8); } @keyframes fx-shake { 0%, 100% { transform: translate(0, 0); } 12% { transform: translate(-6px, 2px); } 25% { transform: translate(6px, -2px); } 37% { transform: translate(-4px, -2px); } 50% { transform: translate(4px, 2px); } 62% { transform: translate(-2px, 0); } 75% { transform: translate(2px, 0); } } .fx-damage-flash { position: fixed; inset: 0; pointer-events: none; z-index: 9000; box-shadow: inset 0 0 80px 20px rgba(220, 30, 20, 0.55); animation: fx-flash 0.45s ease-out forwards; } @keyframes fx-flash { from { opacity: 1; } to { opacity: 0; } } /* ===== Game screen ===== */ /* Same month-theme colours as the main menu title */ header h1 { color: var(--title-color, var(--dungeon-gold)); text-shadow: 2px 2px 0 var(--title-shade, #7a4a00), 4px 4px 0 #000; } #grid-container { background: rgba(10, 8, 6, 0.9); border: none; border-radius: 0; box-shadow: 0 0 0 4px #5e554b, 0 0 0 8px #3d352e, 0 0 0 12px #16120f, 0 12px 32px rgba(0, 0, 0, 0.8); } /* ===== Skin tiles: shop, weekly deal, skin picker, hero cards ===== * Stone slab cards with a bevelled rim in the rarity colour, notched 8-bit corners * (clip-path) and a sunken brick niche the sprite stands in. Hard edges only, no blur. */ .shop-skin-card, .skin-item, .char-card { --rim-hi: #8a8178; --rim-lo: #4d4b49; position: relative; background-color: #2a2420; background-image: var(--dungeon-slab); background-size: 32px 32px; border: 4px solid; border-color: var(--rim-hi) var(--rim-lo) var(--rim-lo) var(--rim-hi); border-radius: 0; box-shadow: inset 4px 4px 0 #4a413a, inset -4px -4px 0 #15110e; clip-path: polygon( 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px ); image-rendering: pixelated; transition: none; } .shop-skin-card[data-rarity="common"], .skin-item[data-rarity="common"] { --rim-hi: #a59c92; --rim-lo: #5e574f; } .shop-skin-card[data-rarity="rare"], .skin-item[data-rarity="rare"] { --rim-hi: #5a9cff; --rim-lo: #1f4f99; } .shop-skin-card[data-rarity="epic"], .skin-item[data-rarity="epic"] { --rim-hi: #c27bff; --rim-lo: #6a2aa8; } .shop-skin-card[data-rarity="legendary"], .skin-item[data-rarity="legendary"] { --rim-hi: #ffb347; --rim-lo: #a65400; } .shop-skin-card[data-rarity="mythical"], .skin-item[data-rarity="mythical"] { --rim-hi: #ff6b5a; --rim-lo: #a3150b; } .shop-skin-card[data-rarity="mythical"], .skin-item[data-rarity="mythical"] { box-shadow: inset 4px 4px 0 #4a413a, inset -4px -4px 0 #15110e, inset 0 0 0 8px rgba(255, 60, 40, 0.18); } .shop-skin-card:hover, .skin-item:hover:not(.skin-locked), .char-card:hover { transform: translateY(-4px); background-color: #352d28; background-image: var(--dungeon-slab); box-shadow: inset 4px 4px 0 #5a4f46, inset -4px -4px 0 #15110e; } .skin-item:hover:not(.skin-locked) { border-color: var(--rim-hi) var(--rim-lo) var(--rim-lo) var(--rim-hi); } /* Equipped / selected: gold rim */ .skin-item.skin-equipped, .shop-skin-card.equipped, .char-card.active { --rim-hi: #ffcf4a; --rim-lo: #8a5a00; border-color: var(--rim-hi) var(--rim-lo) var(--rim-lo) var(--rim-hi); background-color: #3a3020; background-image: var(--dungeon-slab); box-shadow: inset 4px 4px 0 #6b5a32, inset -4px -4px 0 #1f1808; } .skin-item.skin-equipped::after { border-radius: 0; background: #3f6b2a; color: #d9f5c6; box-shadow: 0 0 0 2px #0d0a08, inset 2px 2px 0 #6aaa64; top: 8px; right: 8px; } /* The niche: sunken brick wall with a floor stone */ .shop-skin-card .skin-preview-container, .weekly-deal-body .skin-preview-container, .skin-item .skin-preview, .char-card .char-card-preview { background: linear-gradient(180deg, transparent 76%, #3d352e 76%, #3d352e calc(76% + 4px), #241f1b calc(76% + 4px)), linear-gradient(rgba(6, 5, 4, 0.72), rgba(6, 5, 4, 0.72)), var(--dungeon-wall) center top / 64px 32px; border: 4px solid; border-color: #0d0a08 #5e554b #5e554b #0d0a08; border-radius: 0; box-shadow: inset 4px 4px 0 rgba(0, 0, 0, 0.45); image-rendering: pixelated; } /* Rarity colour is on the card rim now; the niche stays stone */ .shop-skin-card[data-rarity] .skin-preview-container, .skin-item[data-rarity] .skin-preview { border-color: #0d0a08 #5e554b #5e554b #0d0a08; } /* Center the sprite in its niche (sprites sit a bit below their anchor) */ .shop-skin-card .skin-preview::before { transform: translate(-50%, -50%) translateY(-6px) scale(1.5) !important; } /* Text: chunky with a hard shadow */ .shop-skin-card .skin-name, .skin-item .skin-name, .weekly-deal-info .skin-name { color: #efe3cf; text-shadow: 2px 2px 0 #000; } /* Long names ("Brazilian Challenger") wrap inside their card instead of running out of it */ .weekly-deal-info { min-width: 0; } .shop-skin-card .skin-name, .shop-skin-card .skin-rarity, .weekly-deal-info .skin-name, .weekly-deal-info .skin-rarity { max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; line-height: 1.4; } .shop-skin-card .skin-rarity, .weekly-deal-info .skin-rarity { padding: 2px 6px; border: 2px solid currentColor; background: rgba(0, 0, 0, 0.45); box-shadow: 2px 2px 0 #000; } .skin-item .skin-rarity { font-family: var(--retro-font); font-size: 8px; display: inline-block; padding: 2px 6px; border: 2px solid currentColor; background: rgba(0, 0, 0, 0.45); } .skin-unlock-req { color: #a99a86; } .skin-progress-bar { height: 12px; border-radius: 0; border: 2px solid #0d0a08; background: #1a1512; box-shadow: inset 2px 2px 0 #000; } .skin-progress-fill { border-radius: 0; background: repeating-linear-gradient(90deg, #6aaa64 0 6px, #4d8a47 6px 8px); } /* Buy button: a gold bar with a bevel */ .shop-buy-btn { background: #6b4f12; color: #ffe9a8; border: 4px solid; border-color: #ffcf4a #7a4a00 #7a4a00 #ffcf4a; box-shadow: inset 2px 2px 0 #8c6a1c, inset -2px -2px 0 #4a3408; text-shadow: 2px 2px 0 #000; clip-path: polygon( 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px ); transition: none; } .shop-buy-btn:hover:not(.disabled) { background: #7d5c16; border-color: #ffe27a #8a5a00 #8a5a00 #ffe27a; transform: translateY(-2px); box-shadow: inset 2px 2px 0 #a07c26, inset -2px -2px 0 #4a3408; } .shop-buy-btn:active:not(.disabled) { transform: translateY(2px); border-color: #7a4a00 #ffcf4a #ffcf4a #7a4a00; box-shadow: inset 2px 2px 0 #4a3408; } .shop-buy-btn.disabled { background: #2f2823; color: #7d7064; border-color: #4b4139 #1a1613 #1a1613 #4b4139; box-shadow: none; text-shadow: none; } .shop-skin-card.too-expensive { opacity: 0.8; } /* Hero cards on the character screen */ .char-card { padding: 1.25rem 1rem 1rem; } .char-card .char-card-preview { width: 88px; height: 88px; } .char-card .char-card-preview::before { transform: translate(-50%, -50%) translateY(-6px) scale(1.5); } .char-card-skin-btn { border-radius: 0; } /* Skin picker modal: a stone panel like the menu screens */ .skin-selector-content { border: none; border-radius: 0; background: linear-gradient(180deg, #080605, #0e0b09); box-shadow: 0 0 0 4px #5e554b, 0 0 0 8px #3d352e, 0 0 0 12px #16120f; } .skin-selector-header h2 { color: var(--dungeon-gold); text-shadow: 2px 2px 0 #7a4a00, 4px 4px 0 #000; } .skin-selector-close { border-radius: 0; background: #362f2a; border: 4px solid; border-color: #6a5d50 #15110e #15110e #6a5d50; transition: none; } .skin-selector-close:hover { background: #4a3f37; border-color: #8a7d70 #15110e #15110e #8a7d70; } .skin-item.skin-locked::before { filter: none; } /* Shop character tabs: small stone slabs; the active one keeps its character colour */ .shop-char-tab { background-color: #2f2823; background-image: var(--dungeon-slab); background-size: 32px 32px; border: 4px solid; border-color: #5e554b #15110e #15110e #5e554b; color: #a99a86; box-shadow: none; transition: none; } .shop-char-tab:hover { border-color: #7d7064 #15110e #15110e #7d7064; color: #efe3cf; box-shadow: none; } .shop-char-tab.active { border-color: currentColor #15110e #15110e currentColor; text-shadow: 2px 2px 0 #000; } /* Close button on the skin tip in Heroes & Skins */ #skin-tip-close { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.3); border: 2px solid #4a6a8a; color: #b8c5d6; font-size: 18px !important; line-height: 1; cursor: pointer; } #skin-tip-close:hover, #skin-tip-close:focus-visible { color: #fff; border-color: #8fb4d8; } /* Chronomant's Rewind (the ability button in Challenge Mode): sand-gold, counter of rewinds left */ .ability-btn.rewind-btn .rewind-count { font-size: 0.85em; opacity: 0.85; } .ability-btn.rewind-btn:disabled { opacity: 0.4; cursor: default; transform: none; } /* ===== Challenge Mode: level cleared message ===== * A small stone gate like the menu: lintel with the level number, a row of floor tiles that light up * one by one (like clearing a level), stats and pixel hearts. */ .level-complete-notification { border: none; border-radius: 0; padding: 0 1.25rem 1.25rem; overflow: hidden; background: radial-gradient(ellipse at 50% 30px, rgba(255, 160, 70, 0.18), transparent 60%), linear-gradient(180deg, #080605, #0e0b09); box-shadow: 0 0 0 4px #5e554b, 0 0 0 8px #3d352e, 0 0 0 12px #16120f, 0 16px 48px rgba(0, 0, 0, 0.85); transition: opacity 0.2s steps(4), transform 0.2s steps(4); } .level-complete-notification.victory-screen { padding-top: 1.25rem; } .level-complete-notification h2 { color: var(--dungeon-gold); text-shadow: 2px 2px 0 #7a4a00, 4px 4px 0 #000; animation: torch-glow 3s steps(6) infinite; margin-bottom: 1rem; } .lc-lintel { height: 48px; margin: 0 -1.25rem 1rem; display: flex; align-items: center; justify-content: center; background: var(--px-lintel) left top / 96px 48px repeat-x; box-shadow: 0 4px 0 #0d0a08; } .lc-level { font-family: var(--retro-font, 'Press Start 2P', monospace); font-size: 0.6rem; color: #efe3cf; padding: 6px 10px; background: #231e1a; box-shadow: 0 0 0 2px #0d0a08, inset 2px 2px 0 #3d352e; text-shadow: 2px 2px 0 #000; letter-spacing: 1px; } .lc-floor { display: flex; justify-content: center; gap: 4px; margin: 0 auto 1.25rem; } .lc-floor span { width: 18px; height: 10px; background: #3a322c; box-shadow: inset 0 2px 0 #6e6156, 0 2px 0 #0d0a08; animation: lc-tile-light 0.15s steps(1) forwards; } .lc-floor span:nth-child(1) { animation-delay: 0.1s; } .lc-floor span:nth-child(2) { animation-delay: 0.2s; } .lc-floor span:nth-child(3) { animation-delay: 0.3s; } .lc-floor span:nth-child(4) { animation-delay: 0.4s; } .lc-floor span:nth-child(5) { animation-delay: 0.5s; } .lc-floor span:nth-child(6) { animation-delay: 0.6s; } .lc-floor span:nth-child(7) { animation-delay: 0.7s; } @keyframes lc-tile-light { to { background: #ffb52e; box-shadow: inset 0 3px 0 #ffe066, 0 2px 0 #0d0a08, 0 0 8px rgba(255, 180, 60, 0.45); } } .level-complete-notification .notification-stats { gap: 0.5rem; margin-bottom: 1rem; } .level-complete-notification .notification-stat { flex: 1 1 0; min-width: 0; padding: 0.6rem 0.25rem; background-color: #362f2a; background-image: var(--dungeon-slab); background-size: 32px 32px; box-shadow: inset 3px 3px 0 #554b42, inset -3px -3px 0 #231e1a, 0 0 0 3px #15110e; } .level-complete-notification .notification-label { color: #a99a86; } .level-complete-notification .notification-value { color: #efe3cf; font-size: 0.9rem; } /* 7x6 pixel hearts, drawn with box-shadow (no emoji, so they match on every device) */ .lc-hearts { display: flex; justify-content: center; gap: 3px; min-height: 1rem; align-items: center; } .lc-heart { position: relative; width: 14px; height: 12px; --h: #e8433a; --hl: #ff8a7a; } .lc-heart.lost { --h: #3d352e; --hl: #554b42; } .lc-heart::before { content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 2px; background: transparent; box-shadow: 2px 0 var(--h), 4px 0 var(--h), 8px 0 var(--h), 10px 0 var(--h), 0 2px var(--h), 2px 2px var(--hl), 4px 2px var(--h), 6px 2px var(--h), 8px 2px var(--h), 10px 2px var(--h), 12px 2px var(--h), 0 4px var(--h), 2px 4px var(--h), 4px 4px var(--h), 6px 4px var(--h), 8px 4px var(--h), 10px 4px var(--h), 12px 4px var(--h), 2px 6px var(--h), 4px 6px var(--h), 6px 6px var(--h), 8px 6px var(--h), 10px 6px var(--h), 4px 8px var(--h), 6px 8px var(--h), 8px 8px var(--h), 6px 10px var(--h); } .level-complete-notification .notification-next { color: #a58f74; font-size: 0.55rem; animation: none; } @media (max-width: 380px) { .level-complete-notification .notification-label { font-size: 0.45rem; } .level-complete-notification .notification-value { font-size: 0.75rem; } } @media (prefers-reduced-motion: reduce) { .level-complete-notification h2 { animation: none; } .lc-floor span { animation-duration: 0s; animation-delay: 0s; } }