*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:'Courier New',monospace;background:#121819;color:#e8e0cb}#city{position:absolute;inset:0}#city canvas{display:block;width:100%;height:100%;touch-action:none}#interface{position:absolute;inset:0;pointer-events:none;text-shadow:1px 2px 0 #171c1acc}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 17px;background:linear-gradient(#171d1eea,#171d1e99 76%,transparent);border-top:3px solid #ba7e50}.brand{font-weight:900;letter-spacing:1px;font-size:14px;white-space:nowrap}.brand strong{font-size:19px;color:#fff8de}.brand small{font-size:9px;color:#f0b575;display:block;margin-left:32px;letter-spacing:3px}.star{color:#ea9556;font-size:22px}.accent{color:#e18c52}.tag{border:1px solid #806b51;padding:8px 11px;color:#d9cfaa;background:#1a1e1cbd;font-size:10px;font-weight:900;white-space:nowrap}.dot{color:#c86a3a}.leftboard{position:absolute;top:94px;left:17px;max-width:355px;background:#1b221fd9;border:1px solid #867159;border-left:4px solid #cf8b55;padding:13px 15px;box-shadow:4px 5px #13171980}.label{color:#e3a474;font-size:10px;font-weight:bold;letter-spacing:2px}.status{color:#f5ecd8;font-size:12px;margin:9px 0;line-height:1.45}.legend{color:#bebda6;font-size:10px;line-height:1.5}.controls{position:absolute;right:16px;top:102px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px;max-width:250px;pointer-events:auto}.controls button,.touchpad button,#fatal button{cursor:pointer;font:900 12px 'Courier New',monospace;border:1px solid #d3b58f;background:#242723e5;color:#e9dac1;padding:10px 11px;box-shadow:2px 3px #1119;touch-action:none}.controls button:active,.touchpad button.pressed{background:#8d5032;color:white}.help{position:absolute;bottom:45px;left:17px;font-size:10px;color:#f4dfb2;background:#191b19ad;padding:8px 10px}.help span{color:#b8815e}footer{position:absolute;bottom:0;left:0;right:0;padding:9px 17px;display:flex;justify-content:space-between;gap:20px;background:#131a1de6;border-top:1px solid #8e684c;font-size:10px;color:#d2b89a}footer a{color:#f8bf81;pointer-events:auto}.touchpad{display:none;position:absolute;bottom:73px;left:14px;width:153px;height:150px;pointer-events:auto}.touchpad button{position:absolute;width:49px;height:49px;font-size:23px;padding:0}.touchpad .up{top:0;left:52px}.touchpad .left{top:51px;left:0}.touchpad .down{top:100px;left:52px}.touchpad .right{top:51px;left:104px}#fatal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;background:#242a29;border:2px solid #d68b59;padding:20px;max-width:340px;font:14px/1.5 'Courier New';box-shadow:0 10px 50px #000a}#fatal[hidden]{display:none}#fatal strong{color:#ffb786}@media(hover:none),(pointer:coarse){.touchpad{display:block}.help{display:none}}@media(max-width:780px){.topbar{padding:7px 9px}.brand{font-size:10px}.brand strong{font-size:15px}.brand small{font-size:7px;margin-left:17px}.tag{font-size:8px;padding:5px}.leftboard{top:69px;left:9px;max-width:210px;padding:8px 9px}.status{font-size:10px;margin:4px 0}.legend,.label{font-size:9px}.controls{top:69px;right:7px;max-width:135px}.controls button{font-size:10px;padding:8px 6px}footer{font-size:8px;padding:7px 9px}.footer-right{display:none}}
/* La ciudad se sigue calculando como 3D: solo la imagen final se escala sin interpolación. */
#city canvas{image-rendering:pixelated}
.controls #pixels[aria-pressed="true"]{background:#654330;border-color:#f3cb91;color:#fff0c9}
.controls #pixels[aria-pressed="false"]{background:#273039;border-color:#7f9ba1;color:#d5eced}