:root{--paper:#F6F2EA;--ink:#16120E;--mute:#7A7064;--or:#F26A1B}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#dfe7ee}
body{font:14px/1.4 'Inter Tight',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
canvas{display:block;outline:none;touch-action:none}
.ui{position:fixed;z-index:5}
.card{background:rgba(250,247,242,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);box-shadow:0 12px 40px rgba(20,24,40,.16)}
.mono{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.gt{font-weight:800;letter-spacing:-.04em;line-height:1;white-space:nowrap}
.gt i{font-style:normal;color:var(--or)}
.gt small{font-size:.55em;letter-spacing:-.01em}
#brand{left:18px;top:18px;padding:12px 16px 12px 12px;display:flex;align-items:center;gap:14px}
#brand svg{width:112px;height:auto;display:block}
#brand .gt{font-size:17px}
#brand a{color:var(--ink);font-size:12px;text-underline-offset:3px}
#brand .meta{display:grid;gap:3px}
#modes{right:18px;top:18px;padding:5px;display:flex;gap:4px;align-items:center}
.seg{display:flex;gap:2px;padding:2px;background:rgba(22,18,14,.06)}
button{font:500 12.5px 'Inter Tight';border:0;background:none;color:var(--mute);cursor:pointer;padding:7px 12px;white-space:nowrap;transition:background .15s,color .15s}
button:hover{color:var(--ink)}
button.on{background:var(--ink);color:var(--paper)}
.tg.on{background:var(--or);color:#fff}
#views{left:50%;bottom:20px;transform:translateX(-50%);padding:5px;display:flex;gap:2px;max-width:calc(100% - 32px);overflow-x:auto;scrollbar-width:none}
#views button{padding:10px 14px;font-size:13px}
#hint{left:20px;bottom:26px;color:rgba(22,18,14,.55);font-size:12px;pointer-events:none}
#stalls{right:18px;bottom:20px;width:260px;padding:14px 16px}
#stalls h3{font-size:13px;font-weight:600;display:flex;justify-content:space-between;align-items:baseline}
#stalls h3 span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--mute);font-weight:400}
#stalls p{font-size:12px;color:#5b5248;margin-top:6px}
#sel{display:flex;flex-wrap:wrap;gap:5px}
#sel:not(:empty){margin-top:10px}
#sel span{font-family:'JetBrains Mono',monospace;font-size:11px;padding:4px 7px;background:var(--ink);color:var(--paper);cursor:pointer}
#sel span:hover{background:var(--or)}
#clr{padding:0;margin-top:10px;text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
#tip{position:fixed;z-index:6;pointer-events:none;background:var(--ink);color:var(--paper);padding:8px 11px;font-size:12px;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}
#tip.on{opacity:1;transform:none}
#tip b{display:block;font-size:13px;font-weight:600}
#labels{position:fixed;inset:0;pointer-events:none;z-index:2}
.lb{position:absolute;left:0;top:0;padding:5px 10px;background:rgba(250,247,242,.94);color:var(--ink);font:600 11px 'Inter Tight';white-space:nowrap;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.14);transition:opacity .25s,background .15s;pointer-events:auto;cursor:pointer}
.lb:hover{background:var(--ink);color:var(--paper)}
.lb::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:12px;background:rgba(22,18,14,.45)}
.lb.o{background:var(--or);color:#fff}
.lb.d{background:rgba(22,18,14,.82);color:#F6F2EA}
.lb.hide{pointer-events:none}
#load{position:fixed;inset:0;z-index:10;background:var(--paper);display:grid;place-items:center;transition:opacity .9s .2s}
#load .in{display:grid;justify-items:center;gap:22px}
#load .gt{font-size:64px}
#load .bar{width:220px;height:2px;background:rgba(22,18,14,.1);overflow:hidden}
#load .bar b{display:block;height:100%;width:0;background:var(--or);transition:width .4s}
#load.done{opacity:0;pointer-events:none}
@media(max-width:860px){
  #brand{left:10px;top:10px;padding:8px 10px 8px 8px;gap:10px}#brand svg{width:80px}#brand .meta{display:none}
  #modes{right:10px;top:10px}
  #views{bottom:10px}#views button{padding:9px 11px}
  #hint{display:none}
  #stalls{left:10px;right:10px;width:auto;bottom:64px;padding:10px 12px}
  #stalls p{display:none}
  #load .gt{font-size:44px}
}

/* ---- revamped controls: dark glass dock, pills, joystick pads ---- */
:root{--glass:rgba(24,21,18,.8)}
#modes,#views,#stalls,#nav{background:var(--glass);color:#f6f2ea;border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 16px 44px rgba(0,0,0,.28)}
#modes button,#views button,#nav button{color:rgba(246,242,234,.7);border-radius:11px}
#modes button:hover,#views button:hover,#nav button:hover{color:#fff;background:rgba(255,255,255,.08)}
#modes button.on,#views button.on,#nav button.on{background:#fff;color:var(--ink)}
#modes .tg.on{background:var(--or);color:#fff}
#modes .seg{background:rgba(255,255,255,.08);border-radius:12px}
#views{padding:6px;gap:4px}
#views button{padding:10px 15px;font-weight:600;font-size:13px}
#views .walkbtn{background:var(--or);color:#fff;padding:10px 18px}
#views .walkbtn:hover{background:#ff7d33;color:#fff}
#stalls h3 span,#stalls p{color:rgba(246,242,234,.7)}
#stalls #clr{color:#fff}
#nav{left:18px;bottom:20px;padding:6px;display:flex;gap:4px;align-items:center}
#nav button{width:40px;height:40px;padding:0;font-size:20px;font-weight:500}
#nav .sep{width:1px;height:24px;background:rgba(255,255,255,.14);margin:0 4px}
#nav .seg2{display:flex;gap:2px}
#nav .seg2 button{width:auto;padding:0 14px;font-size:12.5px;font-weight:600}
#hint{left:18px;bottom:78px;max-width:440px;color:rgba(22,18,14,.62)}
#walkbar{left:50%;top:18px;transform:translateX(-50%);display:none;align-items:center;gap:14px;background:var(--glass);color:#f6f2ea;padding:7px 8px 7px 8px;border-radius:16px}
#walkbar button{background:var(--or);color:#fff;border-radius:11px;padding:9px 16px;font-weight:700}
#walkbar .mono{color:rgba(246,242,234,.7);padding-right:10px}
.pad{display:none;width:132px;height:132px;border-radius:50%;background:rgba(24,21,18,.45);border:1.5px solid rgba(255,255,255,.35);backdrop-filter:blur(6px);touch-action:none;user-select:none}
.pad b{position:absolute;left:0;right:0;bottom:-20px;text-align:center;font:600 10px 'JetBrains Mono';letter-spacing:.14em;color:rgba(22,18,14,.55)}
.pad .knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 4px 14px rgba(0,0,0,.35)}
#padL{left:36px;bottom:60px}#padR{right:36px;bottom:60px}
body.walking .pad{display:block}body.walking #walkbar{display:flex}
body.walking #views,body.walking #stalls,body.walking #hint,body.walking #nav,body.walking #labels{display:none}
@media(max-width:860px){#nav{bottom:70px;left:10px}#hint{display:none}#views{bottom:10px}#views button{padding:9px 11px}#walkbar .mono{display:none}#padL{left:22px;bottom:40px}#padR{right:22px;bottom:40px}}

/* ---- cleaner layout ---- */
#modes .tg .ic{display:none}
#stalls{cursor:default}
#stalls h3{cursor:pointer;gap:14px}
#stalls.collapsed{width:auto;padding:10px 14px}
#stalls.collapsed p,#stalls.collapsed #sel,#stalls.collapsed #clr{display:none}
#stalls h3::after{content:"▴";font-size:10px;opacity:.6;margin-left:6px}
#stalls.collapsed h3::after{content:"▾"}
@media(max-width:860px){
  #brand{padding:6px 8px}#brand svg{width:64px}
  #modes{padding:4px;gap:2px;border-radius:14px}#modes button{padding:7px 10px;font-size:12px}
  #modes .tg .tx{display:none}#modes .tg .ic{display:inline;font-size:14px}
  #nav{bottom:66px;left:10px;padding:4px;gap:2px;border-radius:14px}#nav button{width:36px;height:36px;font-size:18px}#nav .seg2 button{width:auto;padding:0 11px;font-size:12px}#nav #reset,#nav .sep{display:none}
  #views{left:10px;right:10px;transform:none;bottom:10px;max-width:none;padding:4px;border-radius:14px}
  #views button{padding:9px 12px;font-size:12.5px}
  #stalls{left:auto;right:10px;bottom:116px;width:auto;max-width:calc(100% - 140px);padding:8px 12px}
  #stalls.collapsed{padding:8px 12px}
  #stalls:not(.collapsed){left:10px;max-width:none}
  #walkbar{top:10px}
  #padL{left:26px;bottom:34px}
}

/* phones and touch screens: a blur over a canvas that redraws is the single most expensive thing here, so use plain glass */
@media(max-width:860px),(pointer:coarse){
  .card,.pad,.ui,.lb{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .card{background:rgba(250,247,242,.97)}
  #modes #map2d .tx{display:inline;font-size:12px}#modes #map2d .ic{display:none}
}