*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#213b4a;color:#fff5d5;font-family:'Courier New',monospace}canvas#game{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:none}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:2px solid #ffe3a0;outline-offset:5px}#hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:28px 32px;gap:20px;background:linear-gradient(#192c465e,transparent);pointer-events:none;text-shadow:2px 2px #23334855}.brand{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:bold;letter-spacing:3px}.mark{display:grid;place-items:center;border:2px solid #eac789;width:38px;height:42px;font-size:27px;color:#f8dda3;box-shadow:3px 3px 0 #203c4850}.brand small,small{display:block;font-size:9px;letter-spacing:2px;font-weight:normal}.brand small{margin-top:7px;font-size:8px;letter-spacing:1.7px}.metrics{display:flex;gap:28px;align-items:center}.metrics small{margin-bottom:5px;color:#fce9c2}.metrics b{font-size:28px;letter-spacing:3px}.metrics span{font-size:12px}.metrics i{height:30px;width:1px;background:#ffeecc50}.tools{display:flex;align-items:center;gap:9px;pointer-events:auto}.best{text-align:right;margin-right:13px}.best span{display:block;font-size:17px;margin-top:6px;color:#ffe0a2}.tools button,.panel-top button{width:36px;height:36px;background:#193e4866;border:1px solid #fff1d447;font-size:20px;display:grid;place-items:center}.tools button:hover{background:#28616b}.tools svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:miter}#districtToast{position:absolute;top:24%;left:0;right:0;text-align:center;pointer-events:none;text-shadow:2px 2px #443d5860;transition:opacity 1s;opacity:0}#districtToast.show{opacity:1}#districtToast span{display:block;font-size:9px;letter-spacing:5px;margin-bottom:12px}#districtToast strong{font-size:23px;letter-spacing:6px}#districtToast em{display:block;font-size:11px;letter-spacing:2px;margin-top:12px;font-style:normal}#hint{position:absolute;bottom:75px;left:50%;transform:translateX(-50%);background:#17353ae8;border:1px solid #e5d39a80;border-bottom:3px solid #c39f65;padding:15px 24px;text-align:center;white-space:nowrap;transition:opacity .6s;pointer-events:none}.hint-title{display:block;font-size:10px;letter-spacing:3px;margin-bottom:12px;color:#f2ce86}#hint>span+span{font-size:11px}kbd{font:10px 'Courier New',monospace;border:1px solid #d9d8b575;box-shadow:0 2px #9fb5ac70;padding:3px 5px;margin-right:4px;color:#fff5d5}#hint i{margin:0 10px;font-style:normal}#hint small{margin-top:12px;font-size:8px;letter-spacing:1px;color:#b7c8c0}.bottomline{position:absolute;bottom:22px;left:32px;right:32px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:2px;pointer-events:none;text-shadow:1px 2px #102d3c}.bottomline i{font-style:normal;color:#e9c785}.live-dot{display:inline-block;background:#9dddc0;width:5px;height:5px;margin-right:8px;box-shadow:0 0 0 3px #82c6b030}#collect{color:#ffde8c}.hidden{display:none!important}.panel{position:absolute;right:30px;top:85px;width:285px;background:#173841f5;border:1px solid #d1b880;padding:18px;box-shadow:6px 6px #15253065}.panel-top{display:flex;align-items:center;justify-content:space-between}.panel-top button{height:25px;width:25px}.panel h2{font-size:17px;font-weight:normal;margin:15px 0 20px}.panel p{font-size:9px;color:#a8c4bc;line-height:1.6}#suitChoices{display:grid;gap:7px}.suit-choice{display:flex;align-items:center;gap:15px;padding:8px;border:1px solid #74938b40;background:#204550;text-align:left;font-size:11px}.suit-choice.selected{border-color:#ebcd89;background:#315558}.suit-choice canvas{image-rendering:pixelated;width:32px;height:48px}.suit-choice small{font-size:8px;letter-spacing:1px;color:#b4c6bc;margin-top:5px}#overlay{position:absolute;inset:0;background:#102b3c80;display:grid;place-items:center;backdrop-filter:brightness(.75)}.result{width:420px;max-width:calc(100% - 32px);padding:34px;background:#153943f5;border:2px solid #d2b77e;box-shadow:8px 8px #10263280;text-align:center}.eyebrow{font-size:9px;letter-spacing:3px;color:#e7c68c}.result h1{font-size:27px;font-weight:normal;margin:20px 0 12px}.result p{color:#b0c7bf;font-size:11px;line-height:1.7}.result-stats{display:flex;justify-content:space-between;border-top:1px solid #b3c1a42b;border-bottom:1px solid #b3c1a42b;padding:24px 0;margin:24px 0}.result-stats small{font-size:8px;letter-spacing:1px;color:#b2c1b7}.result-stats b{display:block;font-size:20px;margin-top:9px;color:#ffe3a5}#restart{width:100%;padding:15px 20px;background:#ebce90;color:#173841;border:0;border-bottom:4px solid #aa8d59;text-align:left;font-size:11px;letter-spacing:2px;font-weight:bold}#restart span{float:right}.restart-hint{margin-top:18px;font-size:8px;color:#a5bdb4}@media(max-width:1000px){#hud{padding:18px 16px;gap:10px}.brand{font-size:12px;letter-spacing:1px}.brand small{font-size:6px;letter-spacing:.7px}.mark{width:28px;height:32px;font-size:22px}.metrics{gap:12px}.metrics b{font-size:20px}.metrics small{font-size:7px;letter-spacing:1px}.best{display:none}.tools{gap:5px}.tools button{width:30px;height:30px}.bottomline{left:16px;right:16px;font-size:7px;letter-spacing:1px}.bottomline>span:last-child{display:none}#hint{padding:14px 12px;bottom:60px}#hint>span+span{font-size:9px}#hint i{margin:0 4px}#districtToast strong{font-size:17px;letter-spacing:3px}}@media(max-width:480px){.brand .mark{display:none}.brand{font-size:10px}.brand small{max-width:100px;line-height:1.5}.metrics{gap:8px}.metrics b{font-size:16px;letter-spacing:1px}.metrics small{font-size:6px}.tools button{width:27px}.metrics i{display:none}#hint{width:94%;white-space:normal;line-height:2}#districtToast{top:26%}}
#hint{top:110px;bottom:auto} @media(max-width:1000px){#hint{top:85px;bottom:auto}}

#hud{z-index:3}.panel{z-index:5;width:370px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 115px);display:flex;flex-direction:column;overflow:hidden}.panel h2{margin:12px 0}.shop-wallet{font-size:12px;color:#ffdda0;padding:10px 0 15px}.shop-wallet span{display:block;font-size:9px;color:#a5c4b9;margin-top:6px}.suit-copy{flex:1;min-width:0}.suit-copy strong{font-size:12px;font-weight:normal}.suit-choice{flex-shrink:0;align-items:flex-start;padding:12px}.suit-choice canvas{width:39px;height:60px;flex-shrink:0}.suit-copy em{display:block;font-size:10px;line-height:1.65;font-style:normal;color:#b9cdc1;margin:9px 0}.suit-copy small{line-height:1.6;font-size:7px}.suit-price{font-size:9px;letter-spacing:1px;color:#f2d08c}.suit-choice.locked{background:#1c3d49}.suit-choice:hover{border-color:#d9bb80;background:#31545a}#suitChoices{overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#a28d67 #1b3b44;min-height:0}#shopMessage{min-height:29px;margin-bottom:0}#walletButton{display:flex;align-items:center;gap:7px;width:auto;min-width:86px;padding:0 10px;color:#ffe2a0;background:#203d48c9}#walletButton small{font-size:7px;letter-spacing:1px}#walletButton b{font-size:15px}#overlay{z-index:4}#hud:has(~ #overlay:not(.hidden)){z-index:5}#hint{max-width:94vw}#hint small{white-space:normal;line-height:1.6}@media(max-width:1000px){#walletButton{min-width:55px;padding:0 6px;gap:4px}#walletButton small{display:none}#walletButton b{font-size:12px}.panel{right:14px;top:70px;max-height:calc(100dvh - 90px)}}@media(max-width:480px){.brand{display:none}.metrics{margin-right:auto}#hud{gap:6px}.bottomline{font-size:6px}.bottomline>span:last-child{display:block;max-width:110px;text-align:right}.panel{width:calc(100vw - 28px)}}

.suit-choice.classic .suit-copy em{display:none}.suit-choice.classic canvas{width:30px;height:46px}.suit-choice.classic .suit-price{display:block;margin-top:7px}.brand{flex-shrink:0}.metrics{flex-shrink:0}.tools{flex-shrink:0}

.touch-controls{display:none}body{overscroll-behavior:none}#hud{padding-top:max(18px,env(safe-area-inset-top));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}.bottomline{bottom:max(22px,env(safe-area-inset-bottom))}@media(pointer:coarse),(max-width:480px){.desktop-controls{display:none}.touch-controls{display:block;font-size:10px;line-height:1.9}.tools button{width:36px;height:40px}#walletButton{min-width:63px}.tools{gap:4px}.panel-top button{width:36px;height:36px}.panel{top:max(75px,calc(env(safe-area-inset-top) + 55px))}#hint{top:88px}}

/* A pixel marquee suspended over the live city on arrival. */
#welcome{position:absolute;inset:0;z-index:10;width:100%;height:100%;border:0;padding:0 18px 10vh;background:#10293624;display:flex;flex-direction:column;justify-content:center;align-items:center;touch-action:manipulation;cursor:pointer}.welcome-sign{position:relative;display:block;width:min(780px,88vw,112vh);filter:drop-shadow(6px 9px 0 #10273355)}#titleArt{display:block;width:100%;height:auto;image-rendering:pixelated}.author{position:absolute;top:83.5%;left:0;width:100%;font-size:clamp(9px,2.3vw,19px);line-height:1.3;color:#f3dca2;letter-spacing:2px}.author b{font-weight:bold}.start-prompt{margin-top:26px;padding:12px 18px;background:#143740e8;box-shadow:0 3px 0 #9b7848;font-size:clamp(10px,1.6vw,14px);letter-spacing:3px;color:#fff0c6}.start-prompt i{font-style:normal;color:#d6ad6b;margin:0 8px}.welcome-tagline{font-size:clamp(7px,1.2vw,10px);letter-spacing:2px;margin-top:18px;color:#fff1d1;text-shadow:2px 2px #173943}.awaiting-run #hud,.awaiting-run .bottomline,.awaiting-run #districtToast,.awaiting-run #hint{visibility:hidden}@media(max-height:500px){#welcome{padding-bottom:0}.welcome-sign{width:min(520px,85vw,105vh)}.start-prompt{margin-top:6px;padding:8px}.welcome-tagline{margin-top:10px}.author{font-size:12px}}
.author{top:88.7%;transform:translateY(-50%)}

#boostButton{position:absolute;z-index:3;bottom:55px;right:28px;width:200px;padding:12px 14px;background:#173b45e8;border:1px solid #a48c60;box-shadow:3px 3px #15323b80;text-align:left;font-size:9px;letter-spacing:1px;color:#f1d69c}#boostButton:disabled{cursor:default;color:#c5cbbd}#boostButton i{display:block;height:3px;margin-top:10px;background:linear-gradient(to right,#e5c57e var(--charge,0%),#46616a var(--charge,0%))}#boostButton.charged{border-color:#ffe1a1;background:#355655}.awaiting-run #boostButton{visibility:hidden}@media(max-width:480px){#boostButton{right:14px;bottom:55px;width:170px;font-size:8px}}

#boostHelp{display:block;margin-top:9px;font-size:8px;letter-spacing:.6px;color:#dcc391}#boostButton.coin-charge{border-color:#ffe8ab;box-shadow:0 0 0 2px #ddc08255,3px 3px #15323b80}#boostButton.coin-charge #boostHelp{color:#fff1b6}.boost-instruction{display:inline-block;margin-top:14px;color:#f4d697}#hint{z-index:2}#districtToast{top:37%}@media(max-width:480px){#boostHelp{font-size:7px}}