:root { color-scheme: light; --purple:#7635dd; --ink:#271348; }
* { box-sizing: border-box; }
html,body { margin:0; width:100%; height:100%; }
body { font-family: Arial, Helvetica, sans-serif; background:#f3effa; }
.app { width:100%; max-width:480px; height:100vh; height:100dvh; margin:0 auto;
  display:flex; flex-direction:column; background:#fff; overflow:hidden; }
.map-scroll { min-height:0; flex:1 1 auto; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; touch-action:pan-y; }
.map-image { width:100%; height:auto; display:block; user-select:none; -webkit-user-drag:none; }
.nav { flex:0 0 auto; padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:10px;
  background:rgba(255,255,255,.98); border-top:1px solid #eee7f6; box-shadow:0 -2px 12px #2a134014; }
.nav a { min-height:46px; padding:9px 12px; border-radius:13px; background:var(--purple);
  color:white; text-align:center; text-decoration:none; display:flex; align-items:center; justify-content:center;
  gap:6px; font-size:14px; font-weight:700; line-height:1.2; -webkit-tap-highlight-color:transparent; }
.nav a:focus-visible { outline:3px solid #ebbd40; outline-offset:2px; }
.nav .disabled { background:#eeeaf4; color:#aaa3b3; cursor:default; }
.floor-count { white-space:nowrap; font-size:12px; font-weight:700; color:var(--ink); }
@media (min-width:650px) { .app { box-shadow:0 0 30px #2613431f; } }
@media (max-width:350px) { .nav { gap:6px; padding-left:8px; padding-right:8px; }
  .nav a { padding:9px 6px; font-size:12px; } .floor-count { font-size:11px; } }