*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;
  font:14px/1.35 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#1d2b36;
  background:linear-gradient(180deg,#c9d9e8 0%,#dce6ee 42%,#e8dcc8 100%);
  touch-action:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.label{font:600 12px/1.2 ui-sans-serif,system-ui,sans-serif;color:#1d2b36;
  background:rgba(255,253,247,.93);padding:3px 8px;border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.18);white-space:nowrap;
  transform:translate(-50%,-120%);letter-spacing:.01em}
.label.place{font-weight:700}
.label.street{font-weight:600;background:rgba(255,253,247,.86);font-size:11px}

#topbar{position:fixed;top:12px;left:12px;right:12px;display:flex;gap:10px;align-items:center;pointer-events:none;z-index:5}
#topbar>*{pointer-events:auto}
.brand{background:rgba(255,255,255,.92);padding:8px 12px;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.15);white-space:nowrap}
.logo{color:#d0452f}.muted{color:#6b7a86;margin-left:4px}
.badge{margin-left:auto;background:#1d2b36;color:#fff;font-size:11px;letter-spacing:.04em;padding:6px 10px;border-radius:10px;opacity:.85}
.toplink{background:rgba(255,255,255,.92);padding:6px 10px;border-radius:10px;font-size:12px;font-weight:600;color:#1d2b36;text-decoration:none;box-shadow:0 2px 10px rgba(0,0,0,.15);white-space:nowrap}
.toplink:hover{background:#fff}

#modebar{position:fixed;left:12px;top:64px;display:flex;gap:0;background:rgba(255,255,255,.92);padding:4px;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.15);z-index:5}
#modebar button{border:0;background:transparent;padding:6px 10px;border-radius:9px;font:600 12px/1.2 inherit;color:#1d2b36;cursor:pointer}
#modebar button.on{background:#1d2b36;color:#fff}
#modebar button:not(.on):hover{background:#f3efe4}

#controls{position:fixed;right:12px;top:64px;display:flex;flex-direction:column;gap:6px;align-items:center;background:rgba(255,255,255,.92);padding:8px;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.15);z-index:5}
#controls button{width:36px;height:36px;border:0;border-radius:10px;background:#f3efe4;font-size:18px;cursor:pointer;color:#1d2b36}
#controls button:hover{background:#e7e0cf}

#hint{position:fixed;left:50%;bottom:36px;transform:translateX(-50%);background:rgba(29,43,54,.78);color:#fff;padding:6px 12px;border-radius:10px;font-size:12px;pointer-events:none;z-index:5;white-space:nowrap;transition:opacity .6s}
#hint.hide{opacity:0}
#status{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(255,253,247,.94);padding:10px 16px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:6;font-weight:600}
#status[hidden]{display:none}

#credits{position:fixed;left:0;right:0;bottom:0;padding:6px 12px;font-size:11px;color:#55636e;background:rgba(246,241,228,.85);text-align:center;z-index:5}

@media (max-width:640px){
  .brand .muted,.badge{display:none}
  #modebar{top:58px;padding:3px}
  #modebar button{padding:5px 8px;font-size:11px}
  #hint{display:none}
  #credits{font-size:10px;padding:5px 8px 8px}
  .toplink{padding:6px 8px;font-size:11px}
}