/* The heads-up display (js/hud.js): smoked glass over the world, in fixed regions of one grid, so nothing on screen
   ever covers anything else. Everything over the world is dark see-through glass with white text, readable over any
   sky by day or night; full menus (dialogs) keep the light or dark theme. Panels turn solid when see-through is off,
   with high contrast, in battery saver, or when the system asks for less transparency. */
:root{
  --glass-1:rgba(14,16,32,.48);--glass-2:rgba(14,16,32,.6);--glass-3:rgba(12,14,28,.74);--glass-solid:#15182F;
  --glass-line:rgba(255,255,255,.14);--glass-line-2:rgba(255,255,255,.26);--glass-hi:inset 0 1px 0 rgba(255,255,255,.08);
  --glass-blur:18px;--glass-sat:1.4;--glass-shadow:0 10px 32px rgba(0,0,0,.28);
  --hud-ink:#F4F6FF;--hud-ink-2:rgba(232,236,255,.74);
  --c-trip:#22D3EE;--c-party:#34D399;--c-live:#FF5C93;--c-match:#E63946;--c-rose:#FF7EAD;
  --g-primary:linear-gradient(135deg,#6A5AE0,#8A4FE6);
  --r-sm:10px;--r-md:16px;--r-lg:22px;--r-pill:999px;
  --sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.5rem;
  --dur-1:120ms;--dur-2:200ms;--dur-3:320ms;--ease:cubic-bezier(.2,.8,.2,1);
  --pad:.75rem;--drawer-w:min(clamp(19rem,30vw,23rem),calc(100vw - 1.5rem))
}
:root[data-motion="reduce"]{--dur-1:0ms;--dur-2:0ms;--dur-3:0ms}
:root[data-gfx="balanced"]{--glass-blur:9px}

/* ---------- glass ---------- */
/* Inside glass the theme's colours are redeclared, so every button, chip, card, list and field turns smoked too. */
.glass,.drawer,.pop,.ctx,.pills,#toasts,#quickSlot,#ticker,.results,.bigmap,.veil-card{
  --surface:rgba(255,255,255,.07);--surface-2:rgba(255,255,255,.1);--ink:var(--hud-ink);--ink-2:var(--hud-ink-2);--line:var(--glass-line);
  --accent:#A193FF;--accent-ink:#0E1230;--accent-soft:rgba(161,147,255,.24);--rose:var(--c-rose);--ok:#5EE39C;--danger:#FF8A8A;--shadow:none;
  color:var(--ink);color-scheme:dark}
.glass,.drawer,.pop,.results{background:var(--glass-2);border:1px solid var(--glass-line);box-shadow:var(--glass-hi),var(--glass-shadow);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat))}
.drawer,.pop,.results{background:var(--glass-3)}
:is(.glass,.drawer,.pop,.ctx,#toasts) .btn.primary{background:var(--g-primary);border-color:transparent;color:#fff}
:is(.glass,.drawer,.pop) :is(.btn,.icon-btn,.chip,.input){border-width:1px}
:is(.glass,.drawer,.pop) .btn:hover{border-color:var(--glass-line-2)}
:is(.glass,.drawer,.pop) .item:hover{background:rgba(255,255,255,.08)}
:is(.glass,.drawer,.pop) .input::placeholder{color:rgba(232,236,255,.55)}
:is(.glass,.drawer,.pop) .glyph{background:#5B4FD0}
:is(.glass,.drawer,.pop) .tag.live{background:var(--c-live);border-color:var(--c-live);color:#fff}
:is(.glass,.drawer,.pop) a{color:#C9C1FF}
/* Solid panels instead. */
:root[data-glass="solid"] :is(.glass,.drawer,.pop,.results){background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
@media (prefers-reduced-transparency:reduce){:is(.glass,.drawer,.pop,.results){background:var(--glass-solid)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
@media (prefers-contrast:more){:is(.glass,.drawer,.pop,.results){background:#0B0D1C!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-color:#fff!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:is(.glass,.drawer,.pop,.results){background:rgba(14,16,32,.82)}}
:root[data-contrast="high"] :is(.glass,.drawer,.pop,.results){background:#0B0D1C;border:2px solid #fff}

/* ---------- the frame ---------- */
#overlay{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
#hudRoot{position:absolute;inset:0;z-index:10;pointer-events:none}
/* Only what you can see catches the pointer; everywhere else, drags and clicks reach the world. */
#hudRoot :is(.glass,.drawer,button,a,input,select,textarea,label,form,[role="button"],[tabindex],.credits,.joy,.minimap,.ctx>*){pointer-events:auto}
#hudGrid{position:absolute;inset:0;container:hud/size;
  padding:max(var(--pad),env(safe-area-inset-top)) max(var(--pad),env(safe-area-inset-right)) max(.3rem,env(safe-area-inset-bottom)) max(var(--pad),env(safe-area-inset-left));
  transition:padding var(--dur-3) var(--ease)}
/* An open drawer pushes the HUD aside, so nothing goes under it. */
body:not([data-layout="phone"])[data-left] #hudGrid{padding-left:calc(max(var(--pad),env(safe-area-inset-left)) + var(--drawer-w) + var(--pad))}
body:not([data-layout="phone"])[data-right] #hudGrid{padding-right:calc(max(var(--pad),env(safe-area-inset-right)) + var(--drawer-w) + var(--pad))}
/* Two columns on tablets and narrow windows: the banner gets its own row and the dock goes along the bottom. */
.hud-in{height:100%;display:grid;gap:var(--sp-3);min-height:0;
  grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto minmax(0,1fr) auto auto auto;
  grid-template-areas:"chip bar" "tc tc" "stack mini" "bl br" "bc bc" "cred cred"}
.hud-in>*{min-width:0;min-height:0}
/* Three columns on wide screens: the banner at the top centre between your place and the toolbar. */
@container hud (min-width:68rem){.hud-in{grid-template-columns:minmax(21rem,1fr) minmax(0,34rem) minmax(21rem,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"chip tc bar" "stack tc mini" "bl bc br" "cred cred cred"}}
/* Phones: one column of rows, the joystick and jump either side of what you can do, the dock along the bottom. The
   chat lines and the car's dashboard get a row each, so the car's never squeezes your place and the search. */
@container hud (max-width:36rem){
  .hud-in{gap:var(--sp-2);grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto minmax(0,1fr) auto auto auto auto auto;
    grid-template-areas:"chip chip bar" "tc tc tc" "stack stack mini" "tk tk tk" "drv drv drv" "joy ctx jump" "dock dock dock" "cred cred cred"}
}

/* ---------- regions ---------- */
.r-chip{grid-area:chip;display:grid;gap:var(--sp-2);align-content:start;width:min(26rem,100%)}
.r-tc{grid-area:tc;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}
.r-tc>:not(.pills){width:min(34rem,100%)}
.r-bar{grid-area:bar;justify-self:end;align-self:start}
.r-stack{grid-area:stack;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding-bottom:.25rem}
.r-stack>*{width:min(22rem,100%);flex:none}
.r-mini{grid-area:mini;justify-self:end;align-self:start}
.r-bl{grid-area:bl;align-self:end;justify-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
.r-bc{grid-area:bc;align-self:end;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}
.r-br{grid-area:br;align-self:end;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-2)}
.r-cred{grid-area:cred;display:flex;justify-content:center;text-align:center}
.r-cred .credits{opacity:.92}

/* ---------- your place and the search (top left) ---------- */
.chip-row{display:flex;gap:var(--sp-2);align-items:center;min-width:0}
.brand.glass{width:2.9rem;height:2.9rem;border-radius:50%;display:grid;place-items:center;padding:0;flex:none;cursor:pointer}
.brand .brand-mark{width:26px;height:26px}.brand .brand-mark::after{border-color:#14182F}
.search.glass{flex:1;min-width:0;height:2.9rem;border-radius:var(--r-pill);padding:0 .4rem 0 .85rem;gap:.5rem;align-items:center}
.search .ic{width:1.15rem;height:1.15rem;opacity:.75;flex:none}
.search input{color:var(--ink);padding:.35rem 0}.search input::placeholder{color:rgba(232,236,255,.62)}
.search:focus-within{border-color:rgba(161,147,255,.75);box-shadow:0 0 0 3px rgba(161,147,255,.22),var(--glass-shadow)}
.search .hint{flex:none;min-width:1.5rem;padding:.05rem .4rem;border:1px solid var(--glass-line);border-radius:6px;font:700 .72rem/1.4 var(--font);text-align:center;color:var(--ink-2)}
.search:focus-within .hint{display:none}
.results{border-radius:var(--r-md)}
.res[aria-selected="true"],.res:hover{background:rgba(255,255,255,.1)}
.place{display:flex;align-items:center;gap:.55rem;padding:.25rem .25rem .25rem .85rem;border-radius:var(--r-pill);min-width:0;justify-self:start;max-width:100%}
.place .where{flex:1 1 auto;min-width:0;font-size:.88rem}
.place .wx{font-size:.84rem;font-weight:600;color:var(--ink-2)}
.place .modes{gap:2px;padding:2px;border-radius:var(--r-pill);background:rgba(255,255,255,.08)}
.place .modes .btn{min-height:2rem;padding:.15em .7em;border:0;background:transparent;font-size:.8rem;gap:.3em}
.place .modes .btn[aria-pressed="true"]{background:rgba(255,255,255,.2)}
.place .modes .ic{width:1rem;height:1rem}

/* ---------- the toolbar (top right) ---------- */
.r-bar{display:flex;align-items:center;gap:.1rem;padding:.25rem;border-radius:var(--r-pill)}
.r-bar .icon-btn{width:2.5rem;height:2.5rem;border:0;background:transparent;font-size:1rem}
.r-bar .icon-btn:hover,.r-bar .me-btn:hover,.r-bar .status:hover{background:rgba(255,255,255,.1)}
.r-bar .status{border:0;background:transparent;color:var(--ink-2);min-height:2.5rem;padding:.25rem .7rem}
.r-bar .me-btn{border:0;background:transparent;padding:.15rem;min-height:2.5rem}.r-bar .me-btn img{width:2.2rem;height:2.2rem}
.icon-btn .badge{border-color:#14182F;color:#fff}
.ic{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
b.ic{display:grid;place-items:center;font-size:.85rem;line-height:1}

/* ---------- the mini map ---------- */
.r-mini .minimap{width:10.25rem;height:10.25rem;border:1px solid var(--glass-line-2);box-shadow:0 0 0 .3rem rgba(14,16,32,.38),0 10px 28px rgba(0,0,0,.35)}

/* ---------- cards: around you (left) and the banner (top centre) ---------- */
#hudRoot :is(.cornerhud,.tabletalk,.tourcard,.tripcard,.partycard){border-radius:var(--r-lg);box-shadow:inset 0 2px 0 var(--card-accent,transparent),var(--glass-hi),var(--glass-shadow)}
.tripcard{--card-accent:var(--c-trip)}.matchcard{--card-accent:var(--c-match)}.partycard{--card-accent:var(--c-party)}
.tabletalk,.venuecard,.walkcard{--card-accent:var(--c-rose)}.tourcard{--card-accent:#A193FF}
#hudRoot .tripcard .glyph{background:#0E7490}
@starting-style{#hudRoot :is(.cornerhud,.tabletalk,.tourcard,.tripcard,.partycard){opacity:0;transform:translateY(-6px)}}
#hudRoot :is(.cornerhud,.tabletalk,.tourcard,.tripcard,.partycard){transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
#hudRoot .arrival{z-index:5}
#hudRoot :is(.cornerhud,.tabletalk,.tourcard,.tripcard) h2{font-size:1.12rem}
#hudRoot :is(.cornerhud,.tabletalk,.tourcard,.tripcard,.partycard) .btn.small{min-height:2.1rem}
#hudRoot .venuecard h2{font-size:1.15rem}
/* Cards waiting their turn: pills you can tap to bring one forward (js/hud.js). */
[data-collapsed]{display:none!important}
.pills{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center}
.r-stack .pills{justify-content:flex-start}
.pill{display:inline-flex;align-items:center;gap:.45rem;min-height:2.3rem;max-width:17rem;padding:.25rem .85rem .25rem .7rem;border-radius:var(--r-pill);border:1px solid var(--glass-line);background:var(--glass-2);color:var(--ink);font:700 .82rem/1.2 var(--font);cursor:pointer;box-shadow:var(--glass-hi),0 4px 14px rgba(0,0,0,.22)}
.pill::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--card-accent,#A193FF);flex:none}
.pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill:hover{border-color:var(--glass-line-2);background:rgba(14,16,32,.72)}
/* The chat ticker (bottom left): the last few lines while the chat is shut. Never over anyone's head. */
.tk-wrap{display:grid;gap:.4rem;width:min(24rem,100%)}
#ticker{display:grid;gap:.3rem;justify-items:start}
#ticker:empty{display:none}
.tk-line{display:flex;gap:.45rem;align-items:flex-start;max-width:100%;padding:.3rem .7rem .3rem .3rem;border:0;border-radius:var(--r-md);background:rgba(14,16,32,.58);color:var(--hud-ink);font:400 .86rem/1.35 var(--font);text-align:left;box-shadow:0 4px 14px rgba(0,0,0,.22);cursor:pointer;animation:tkin var(--dur-2) var(--ease)}
.tk-line img{width:1.4rem;height:1.4rem;border-radius:50%;flex:none;background:rgba(255,255,255,.1)}
.tk-line .txt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tk-line b{font-weight:700;margin-right:.35rem}.tk-line .tg{font-size:.68rem;font-weight:700;opacity:.65;margin-right:.35rem}
.tk-line.out{opacity:0;transform:translateX(-8px);transition:opacity .45s,transform .45s}
@keyframes tkin{from{opacity:0;transform:translateY(6px)}}
body[data-right] #ticker,body[data-talk] #ticker{display:none}
/* Enter: a slim composer in the same corner, so you can talk without opening the chat. */
#quickSlot:empty{display:none}
#quickSlot .composer{display:grid;gap:.4rem;width:min(26rem,calc(100vw - 2rem));padding:.45rem;border:1px solid var(--glass-line);border-radius:var(--r-lg);background:var(--glass-2);box-shadow:var(--glass-hi),var(--glass-shadow);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));pointer-events:auto}
#quickSlot .composer .input{border-width:1px}
:root[data-glass="solid"] #quickSlot .composer{background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---------- the trip banner (js/journey.js): the next turn, when you'll arrive, how far you've come ---------- */
.nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.7rem;align-items:center}
.nav-ic{width:2.9rem;height:2.9rem;border-radius:15px;display:grid;place-items:center;background:linear-gradient(160deg,#0891B2,#0E7490);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 14px rgba(8,145,178,.35)}
.nav-ic .ic{width:1.85rem;height:1.85rem;stroke-width:2.3}
.nav-ic.emoji{font-size:1.45rem}
.nav-txt{min-width:0;display:grid;gap:.1rem}
.nav-big{font:800 1.04rem/1.25 var(--display);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nav-big b{color:#67E8F9;margin-right:.4rem;font-weight:800}
.nav-sub{font-size:.82rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-acts{display:flex;gap:.3rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav-acts .icon-btn.small{width:2.2rem;height:2.2rem;border:0;background:rgba(255,255,255,.09);font-size:.95rem}
.nav-acts .icon-btn.small:hover{background:rgba(255,255,255,.16)}
.nav-acts .icon-btn .ic{width:1.05rem;height:1.05rem}
.meter{height:4px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.meter i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#22D3EE,#A193FF);transition:width .5s linear}
@container hud (max-width:36rem){.nav{grid-template-columns:auto minmax(0,1fr)}.nav-acts{grid-column:1/-1}}
/* The destination on screen (js/nav.js): its name over the door, or an arrow at the edge pointing to it. */
.dest-label{position:absolute;left:0;top:0;display:flex;align-items:center;gap:.5rem;padding:.3rem .8rem .3rem .3rem;border-radius:var(--r-pill);background:rgba(5,34,46,.8);border:1px solid rgba(34,211,238,.55);color:#fff;box-shadow:0 8px 26px rgba(0,0,0,.35);white-space:nowrap;will-change:transform;font-family:var(--font)}
.dest-label::after{content:"";position:absolute;left:50%;bottom:-6px;width:11px;height:11px;margin-left:-6px;background:rgba(5,34,46,.92);border-right:1px solid rgba(34,211,238,.55);border-bottom:1px solid rgba(34,211,238,.55);transform:rotate(45deg)}
.dest-label .dl-e{width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;background:#0E7490;font-size:1rem}
.dest-label b{display:block;font-size:.86rem;line-height:1.2;max-width:15rem;overflow:hidden;text-overflow:ellipsis}.dest-label small{display:block;font-size:.74rem;opacity:.85;line-height:1.2}
.dest-edge{position:absolute;left:0;top:0;display:grid;justify-items:center;gap:.2rem;will-change:transform}
.dest-edge .de-a{width:2.7rem;height:2.7rem;border-radius:50%;display:grid;place-items:center;background:rgba(5,34,46,.82);border:1px solid rgba(34,211,238,.6);color:#67E8F9;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.dest-edge .de-a .ic{width:1.45rem;height:1.45rem;stroke-width:2.3}
.dest-edge small{font:700 .72rem/1 var(--font);color:#fff;background:rgba(5,34,46,.82);padding:.2rem .45rem;border-radius:999px}

/* ---------- drawers: Explore (left), the chat (right), Messages and the property agent ---------- */
.drawer{position:absolute;z-index:20;top:max(var(--pad),env(safe-area-inset-top));bottom:max(var(--pad),env(safe-area-inset-bottom));width:var(--drawer-w);border-radius:var(--r-lg);overflow:hidden;min-height:0;
  transition:transform var(--dur-3) var(--ease),visibility 0s linear var(--dur-3)}
.drawer.left{left:max(var(--pad),env(safe-area-inset-left))}.drawer.right{right:max(var(--pad),env(safe-area-inset-right))}
.drawer[data-open="false"]{visibility:hidden}
.drawer.left[data-open="false"]{transform:translateX(calc(-100% - 2rem))}.drawer.right[data-open="false"]{transform:translateX(calc(100% + 2rem))}
.drawer[data-open="true"]{transition:transform var(--dur-3) var(--ease),visibility 0s}
@starting-style{.drawer.left:not([data-open]){transform:translateX(calc(-100% - 2rem))}}
.drawer:not([data-open]){transition:transform var(--dur-3) var(--ease)}
.dr-head,.chat-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.7rem .75rem .3rem 1rem}
.dr-head h2,.chat-head h2{font-size:1.2rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer .icon-btn.small{border:0;background:rgba(255,255,255,.08)}
.drawer .tabs{border-bottom-color:var(--glass-line)}
.drawer .tab[aria-selected="true"]{border-bottom-color:#A193FF}
.drawer .composer{border-top-color:var(--glass-line)}
.drawer .card{background:rgba(255,255,255,.06);border:1px solid var(--glass-line)}
/* Phones: bottom sheets, above the dock so it stays in reach. */
body[data-layout="phone"] .drawer{left:0;right:0;width:auto;top:auto;bottom:var(--dock-h,4.6rem);height:min(55%,calc(100% - var(--dock-h,4.6rem) - 4rem));border-radius:var(--r-lg) var(--r-lg) 0 0}
body[data-layout="phone"] #chat{height:min(62%,calc(100% - var(--dock-h,4.6rem) - 4rem))}
body[data-layout="phone"] :is(#msgs,#agentPanel){height:calc(100% - var(--dock-h,4.6rem) - 3rem)}
body[data-layout="phone"] #placeSheet{height:min(72%,calc(100% - var(--dock-h,4.6rem) - 3rem))}
body[data-layout="phone"] .drawer[data-open="false"]{transform:translateY(calc(100% + var(--dock-h,4.6rem)))}
/* With a sheet up, only the top row and the dock show around it. */
body[data-layout="phone"]:is([data-left],[data-right]) .hud-in>:is(.r-tc,.r-stack,.r-mini){visibility:hidden}

/* ---------- who's with you (js/party.js): faces, what they're doing, a wave or a hug ---------- */
#partyCard{display:grid;gap:.35rem;padding:.55rem .6rem}
.cp{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.55rem;align-items:center}
.cp-av{position:relative;width:2.5rem;height:2.5rem;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.1);box-shadow:0 0 0 2px rgba(52,211,153,.6)}
.cp-av img{width:100%;height:100%;object-fit:cover}
.cp-av.talking{box-shadow:0 0 0 2px #fff,0 0 0 5px rgba(52,211,153,.55);animation:cptalk 1s ease-in-out infinite alternate}
.cp-av.talking::after{content:"💬";position:absolute;right:-.15rem;bottom:-.1rem;font-size:.8rem}
@keyframes cptalk{to{box-shadow:0 0 0 2px #fff,0 0 0 7px rgba(52,211,153,.25)}}
.cp-t{display:grid;min-width:0}.cp-n{display:flex;align-items:center;gap:.35rem;min-width:0}.cp-t b{font-size:.9rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-t small{font-size:.74rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-acts{display:flex;gap:.2rem}.cp-acts .icon-btn.small{width:2rem;height:2rem;border:0;background:rgba(255,255,255,.08);font-size:.85rem}.cp-acts .icon-btn.small:hover{background:rgba(255,255,255,.16)}
.cp-foot{display:flex;justify-content:space-between;align-items:center;gap:.4rem}

/* ---------- in a car (js/drivehud.js): speed, gear, the view, getting out ---------- */
.dh{display:flex;align-items:center;gap:.7rem;padding:.5rem .6rem .5rem .8rem;border-radius:var(--r-lg)}
.dh-speed{display:grid;justify-items:center;line-height:1;min-width:3.4rem}.dh-speed b{font:800 1.9rem/1 var(--display);font-variant-numeric:tabular-nums}.dh-speed small{font-size:.68rem;color:var(--ink-2);margin-top:.15rem}
.dh-gear{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:8px;background:rgba(255,255,255,.1);font:800 .95rem/1 var(--font);color:#67E8F9}
.dh-side{display:grid;gap:.25rem;justify-items:start}.dh-who,.dh-crew{font-size:.78rem;color:var(--ink-2)}
.dh-btns{display:flex;gap:.3rem;flex-wrap:wrap}.dh-btns .btn{gap:.35rem}.dh-btns .ic{width:1rem;height:1rem}.dh-btns kbd{font:700 .6rem/1 var(--font);border:1px solid var(--glass-line);border-radius:4px;padding:.1rem .25rem;margin-left:.15rem;color:var(--ink-2)}

/* ---------- the dock (bottom centre) ---------- */
.dock{display:flex;align-items:center;gap:.15rem;padding:.3rem;border-radius:var(--r-pill);background:var(--glass-1);max-width:100%;overflow-x:auto;scrollbar-width:none}
.d-btn{position:relative;display:grid;justify-items:center;align-content:center;gap:.14rem;min-width:3.5rem;min-height:3.1rem;padding:.3rem .55rem;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink);font:700 .68rem/1.1 var(--font);cursor:pointer;flex:none;transition:background var(--dur-1)}
.d-btn .ic{width:1.35rem;height:1.35rem}
.d-btn:hover{background:rgba(255,255,255,.09)}
.d-btn[aria-expanded="true"]{background:rgba(255,255,255,.17)}
.d-btn.primary{display:flex;align-items:center;gap:.45rem;padding:.3rem 1.05rem;background:var(--g-primary);color:#fff;font-size:.86rem;box-shadow:0 6px 20px rgba(122,92,240,.45)}
.d-btn.primary:hover{filter:brightness(1.08)}
.d-btn .dot{position:absolute;top:.35rem;right:.75rem;width:.6rem;height:.6rem;border-radius:50%;background:var(--c-live);border:2px solid #14182F}
.dock .sep{width:1px;align-self:stretch;margin:.45rem .1rem;background:var(--glass-line);flex:none}
.d-btn.safety{color:#FFC2D4}
body:not(.street) [data-street]{display:none!important}
.dobtn.fresh{animation:dopulse 1.8s ease-out 5}

/* ---------- the dock's menus ---------- */
[popover].pop{position:fixed;inset:auto;margin:0;padding:.4rem;border-radius:var(--r-lg);width:min(19rem,calc(100vw - 1rem));color:var(--ink);
  opacity:1;transform:none;transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),display var(--dur-2) allow-discrete,overlay var(--dur-2) allow-discrete}
[popover].pop:not(:popover-open){opacity:0;transform:translateY(6px) scale(.98)}
@starting-style{[popover].pop:popover-open{opacity:0;transform:translateY(6px) scale(.98)}}
.pop-emotes{display:grid;grid-template-columns:repeat(6,1fr);gap:.25rem;padding:.1rem .05rem .4rem;margin-bottom:.3rem;border-bottom:1px solid var(--glass-line)}
.pop-emotes button{position:relative;display:grid;place-items:center;height:2.9rem;border-radius:var(--r-md);border:0;background:rgba(255,255,255,.07);font-size:1.3rem;cursor:pointer;color:var(--ink)}
.pop-emotes button:hover{background:rgba(255,255,255,.14)}
.pop kbd{font:700 .62rem/1 var(--font);color:var(--ink-2);border:1px solid var(--glass-line);border-radius:5px;padding:.15rem .3rem}
.pop-emotes kbd{position:absolute;right:3px;bottom:3px;border:0;padding:0;font-size:.55rem}
.pop-item{display:flex;align-items:center;gap:.65rem;width:100%;min-height:2.75rem;padding:.45rem .6rem;border:0;border-radius:var(--r-md);background:transparent;color:var(--ink);font:600 .92rem/1.2 var(--font);text-align:left;cursor:pointer}
.pop-item:hover{background:rgba(255,255,255,.09)}
.pop-item .ic{width:1.2rem;height:1.2rem;opacity:.9}
.pop-item span{flex:1}
.pop-item[aria-pressed="true"]{background:var(--accent-soft)}
.pop hr{border:0;border-top:1px solid var(--glass-line);margin:.3rem .2rem}
.phone-only{display:none!important}
body[data-compact] .phone-only{display:flex!important}body[data-compact] hr.phone-only{display:block!important}

/* ---------- what you can do right here (above the dock) ---------- */
.ctx .btn{background:var(--glass-2);border:1px solid var(--glass-line);color:var(--hud-ink);box-shadow:var(--glass-hi),0 4px 16px rgba(0,0,0,.25)}
.ctx .btn:hover{border-color:var(--glass-line-2);background:rgba(14,16,32,.72)}

/* ---------- toasts: under the banner at the top ---------- */
#toasts{position:fixed;left:50%;top:var(--toast-top,4.5rem);bottom:auto;transform:translateX(-50%);display:grid;gap:.4rem;z-index:60;width:min(28rem,calc(100vw - 1.5rem));pointer-events:none}
.toast{display:flex;gap:.55rem;align-items:center;padding:.5rem .45rem .5rem .95rem;border-radius:var(--r-md);background:rgba(14,16,32,.86);border:1px solid var(--glass-line);color:var(--hud-ink);box-shadow:0 10px 30px rgba(0,0,0,.35);pointer-events:auto;font-size:.92rem;line-height:1.35;animation:toastin var(--dur-2) var(--ease);transition:opacity var(--dur-2),transform var(--dur-2)}
.toast .t-txt{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.toast .n{font-weight:700;opacity:.7}
.toast .btn{min-height:2rem;padding:.2em .85em;flex:none}
.toast .t-x{flex:none;width:1.9rem;height:1.9rem;border:0;border-radius:50%;background:transparent;color:var(--ink-2);font-size:.8rem;cursor:pointer}
.toast .t-x:hover{background:rgba(255,255,255,.1);color:var(--ink)}
.toast.out{opacity:0;transform:translateY(-6px) scale(.98)}
@keyframes toastin{from{opacity:0;transform:translateY(-8px) scale(.98)}}

/* ---------- a place's card (js/sheet.js): in the left drawer's place, or over the big map ---------- */
.sheet{display:flex;flex-direction:column;gap:.6rem;overflow-y:auto;overscroll-behavior:contain;padding:0 0 .9rem}
.sheet>:not(.ps-photo){margin-inline:1rem}
.ps-photo{position:relative;flex:none;aspect-ratio:16/9;max-height:12rem;overflow:hidden;background:#0B0E1E}
.ps-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ps-cred{position:absolute;right:.5rem;bottom:.4rem;font-size:.66rem;color:#fff;background:rgba(0,0,0,.5);padding:.1rem .45rem;border-radius:999px}
.ps-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.65rem;align-items:center;padding-top:.9rem}
.ps-emo{width:2.6rem;height:2.6rem;border-radius:14px;display:grid;place-items:center;font-size:1.35rem;background:rgba(255,255,255,.1)}
.ps-title h2{font-size:1.18rem;line-height:1.2;overflow-wrap:anywhere}.ps-kind{font-size:.84rem;color:var(--ink-2)}
.ps-facts{display:flex;flex-wrap:wrap;gap:.35rem}
.ps-f{font-size:.78rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--glass-line)}
.ps-f.ok{color:#86EFAC}.ps-f.no{color:#FCA5A5}.ps-f.live{background:rgba(255,92,147,.2);border-color:rgba(255,92,147,.5)}
.ps-blurb{font-size:.88rem;line-height:1.5}.ps-blurb a{font-weight:700}
.ps-on{display:grid;gap:.15rem;font-size:.84rem}.ps-on b{font-size:.72rem;color:var(--ink-2);text-transform:uppercase;letter-spacing:.07em}
.ps-go{display:grid;grid-template-columns:repeat(auto-fit,minmax(3.6rem,1fr));gap:.35rem}
.ps-opt{display:grid;justify-items:center;gap:.05rem;padding:.5rem .3rem;border-radius:var(--r-md);border:1px solid var(--glass-line);background:rgba(255,255,255,.06);color:var(--ink);cursor:pointer;font:inherit;min-width:0}
.ps-opt span{font-size:1.2rem}.ps-opt b{font-size:.92rem}.ps-opt small{font-size:.72rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ps-opt:hover{background:rgba(255,255,255,.12)}.ps-opt.best{border-color:rgba(161,147,255,.6)}.ps-opt.on{background:rgba(161,147,255,.26);border-color:#A193FF}
.ps-prev{display:grid;gap:.5rem;padding:.65rem;border-radius:var(--r-md);background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.35)}
.ps-prev-h{font-size:.9rem}.ps-prev-h b{color:#67E8F9}
.ps-steps{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;max-height:11rem;overflow-y:auto}
.ps-steps li{display:grid;grid-template-columns:1.3rem minmax(0,1fr) auto;gap:.5rem;align-items:center;font-size:.84rem}
.ps-steps .ic{width:1.15rem;height:1.15rem;color:#67E8F9}.ps-steps small{color:var(--ink-2)}
.ps-start{width:100%}.ps-acts{display:flex;flex-wrap:wrap;gap:.35rem}.ps-wait{animation:pswait 1.2s ease-in-out infinite alternate}@keyframes pswait{to{opacity:.45}}
/* ---------- the area guide (js/guide.js): the Here tab ---------- */
.g-head{display:grid;gap:.2rem;padding:.2rem .3rem .4rem}
.g-kicker{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#A193FF}
.g-area{font-size:1.5rem;line-height:1.1}.g-sub{font-size:.84rem;color:var(--ink-2)}.g-blurb{font-size:.84rem}
.g-high{display:flex;gap:.55rem;overflow-x:auto;padding:.1rem .1rem .45rem;scroll-snap-type:x mandatory;scrollbar-width:thin}
.g-card{flex:none;width:9.5rem;display:grid;gap:.15rem;text-align:left;padding:0 0 .45rem;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--glass-line);background:rgba(255,255,255,.06);color:var(--ink);cursor:pointer;scroll-snap-align:start;font:inherit}
.g-card img,.g-card .g-ph{width:100%;height:5.6rem;object-fit:cover;display:grid;place-items:center;font-size:2rem;background:linear-gradient(160deg,#2B3474,#16193E)}
.g-card b{font-size:.84rem;line-height:1.2;padding:0 .5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.g-card small{font-size:.72rem;color:var(--ink-2);padding:0 .5rem}
.g-card:hover{border-color:var(--glass-line-2)}
.g-cats{flex-wrap:nowrap;overflow-x:auto;padding:.1rem .1rem .3rem;scrollbar-width:none;margin:.3rem 0}
.g-cats .chip{flex:none}.g-cats .chip .n{font-size:.72rem;opacity:.7;margin-left:.15rem}.g-cats .chip[aria-pressed="true"]{background:color-mix(in srgb,var(--cat) 55%,transparent);border-color:var(--cat)}
.g-row{width:100%;display:grid;grid-template-columns:2.25rem minmax(0,1fr) auto;gap:.6rem;align-items:center;text-align:left;padding:.45rem .5rem;border-radius:var(--r-md);border:0;background:transparent;color:var(--ink);cursor:pointer;font:inherit}
.g-row:hover{background:rgba(255,255,255,.08)}
.g-ic{width:2.25rem;height:2.25rem;border-radius:12px;display:grid;place-items:center;font-size:1.05rem}
.g-t{min-width:0;display:grid}.g-t b{font-size:.92rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.g-t small{font-size:.76rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-d{display:grid;justify-items:center;gap:.05rem;min-width:3rem}.g-d small{font-size:.72rem;color:var(--ink-2)}
.g-arrow{display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:rgba(34,211,238,.14);color:#67E8F9;transition:transform .25s}
.g-arrow .ic{width:1rem;height:1rem;stroke-width:2.4}
/* ---------- look around (js/lens.js): labels over the places in view ---------- */
.lens-l{position:absolute;left:0;top:0;display:flex;align-items:center;gap:.45rem;padding:.25rem .7rem .25rem .3rem;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.22);background:rgba(14,16,32,.74);color:#fff;font:inherit;white-space:nowrap;cursor:pointer;pointer-events:auto;box-shadow:0 6px 20px rgba(0,0,0,.3);transition:opacity .18s;will-change:transform;max-width:15rem}
.lens-l:hover,.lens-l:focus-visible{background:rgba(14,16,32,.9);border-color:rgba(161,147,255,.8)}
.lens-l.t0{border-color:rgba(253,230,138,.7)}.lens-l.t0 b{color:#FDE68A}
.lens-l .ll-e{width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);font-size:.95rem;flex:none}
.lens-l .ll-t{display:grid;min-width:0}.lens-l b{font-size:.8rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis}.lens-l small{font-size:.68rem;opacity:.8;line-height:1.2;overflow:hidden;text-overflow:ellipsis}
.lens-l .ll-stem{position:absolute;left:50%;top:100%;width:1px;height:var(--stem,0);background:rgba(255,255,255,.55)}
.lens-l::after{content:"";position:absolute;left:50%;top:100%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(14,16,32,.6);transform:translateY(calc(var(--stem,0px) + 3px))}
#btnLens[aria-pressed="true"]{background:rgba(161,147,255,.3);color:#fff}

/* ---------- the big map and the curtain ---------- */
.bigmap{background:#0F1626;border-color:var(--glass-line)}
.bm-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.5rem .65rem;align-items:center;padding:.55rem .7rem;background:rgba(255,255,255,.04);border-bottom:1px solid var(--glass-line)}
.bm-title{display:flex;align-items:center;gap:.4rem;font-family:var(--display);font-size:1.05rem}
.bm-search{position:relative;display:flex;align-items:center;gap:.45rem;height:2.5rem;padding:0 .8rem;border-radius:var(--r-pill);background:rgba(255,255,255,.08);border:1px solid var(--glass-line)}
.bm-search .ic{width:1.1rem;height:1.1rem;opacity:.75}.bm-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font-size:.95rem}.bm-search input:focus{outline:none}.bm-search input::placeholder{color:rgba(232,236,255,.55)}
.bm-search:focus-within{border-color:rgba(161,147,255,.75)}
.bm-search .results{position:absolute;top:calc(100% + .35rem);left:0;right:0;z-index:5;max-height:50vh;overflow-y:auto;padding:.3rem}
button.res{width:100%;border:0;background:transparent;color:var(--ink);text-align:left;font:inherit}button.res:focus-visible{outline:2px solid #A193FF;outline-offset:-2px}
.bm-cats{grid-column:1/-1;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.bm-cats .chip{flex:none}
.bm-top .chip[aria-pressed="true"]{background:#5B4FD0;border-color:#5B4FD0;color:#fff}
.bm-attr{position:absolute;right:.5rem;bottom:.35rem;font-size:.66rem;color:#CBD5E1;max-width:calc(100% - 1rem);text-align:right;background:rgba(10,14,26,.72);padding:.15rem .5rem;border-radius:999px}.bm-attr a{color:#E2E8F0}
.bm-zoom{top:7.4rem}
.bm-zoom .icon-btn,.bm-card{background:var(--glass-2);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--glass-hi),var(--glass-shadow)}
.bm-zoom .icon-btn .ic{width:1.15rem;height:1.15rem}
.bm-card{background:var(--glass-3)}
.bigmap .bm-card.sheet{position:absolute;left:.75rem;right:auto;bottom:1.9rem;top:auto;transform:none;display:flex;width:min(24rem,calc(100% - 1.5rem));max-height:calc(100% - 9.5rem);padding:0 0 .9rem;border-radius:var(--r-lg)}
body[data-layout="phone"] .bigmap .bm-card.sheet{left:0;width:100%;bottom:0;max-height:62%;border-radius:var(--r-lg) var(--r-lg) 0 0}
.veil-card{background:rgba(255,255,255,.06);border:1px solid var(--glass-line);box-shadow:var(--glass-hi),0 18px 50px rgba(0,0,0,.35)}
.veil-spin{border-color:rgba(255,255,255,.18);border-top-color:#A193FF}

/* ---------- first-run tips (js/tips.js) ---------- */
.tip{position:fixed;z-index:65;display:grid;gap:.3rem;width:min(18rem,calc(100vw - 1rem));padding:.7rem .8rem;border-radius:var(--r-md);background:var(--glass-3);color:var(--hud-ink);border:1px solid rgba(161,147,255,.55);box-shadow:0 12px 34px rgba(0,0,0,.4);animation:tipin var(--dur-3) var(--ease)}
.tip b{font-family:var(--display);font-size:1rem}.tip span{font-size:.88rem;line-height:1.4}
.tip-acts{display:flex;gap:.35rem;align-items:center;justify-content:flex-end;margin-top:.2rem}.tip-acts .small{margin-right:auto}
.tip::after{content:"";position:absolute;left:var(--ax,50%);top:-6px;width:11px;height:11px;margin-left:-6px;background:inherit;border-left:1px solid rgba(161,147,255,.55);border-top:1px solid rgba(161,147,255,.55);transform:rotate(45deg)}
.tip.up::after{top:auto;bottom:-6px;transform:rotate(225deg)}
@keyframes tipin{from{opacity:0;transform:translateY(6px)}}

/* ---------- focus mode (H): nothing but the world ---------- */
#focusBar{display:none;gap:.4rem;align-items:center}
body[data-focus] #hudGrid,body[data-focus] .drawer,body[data-focus] #overlay{visibility:hidden}
body[data-focus] .r-cred,body[data-focus] #focusBar{visibility:visible}
body[data-focus] #focusBar{display:flex}
#focusBar .btn kbd{font:700 .62rem/1 var(--font);border:1px solid var(--glass-line);border-radius:5px;padding:.12rem .3rem;margin-left:.2rem}

/* ---------- smaller screens ---------- */
/* Below three columns: your place keeps its name, the weather and the view names step back (their buttons stay). */
@container hud (max-width:68rem){.place .wx,.r-bar .status span,.place .modes .btn span{display:none}.r-bar .status{padding:.25rem .55rem}}
@container hud (max-width:36rem){
  .r-bl,.r-bc,.r-br{display:contents}
  .tk-wrap{grid-area:tk;align-self:end}.joy{grid-area:joy;align-self:end}.ctx{grid-area:ctx;align-self:end}.dock{grid-area:dock;justify-self:stretch;justify-content:space-between}
  #driveHud,#focusBar{grid-area:drv;justify-self:end;align-self:end}.jumpbtn{grid-area:jump;align-self:end}
  #driveHud{justify-self:stretch}#driveHud .dh{width:100%}#driveHud .dh-side{flex:1;justify-items:end}#driveHud .dh-btns{justify-content:flex-end}#driveHud kbd{display:none}
  .r-bar .wide-only,.r-bar .status span,.place .wx,.place .modes .btn span,.search .hint{display:none}
  .r-bar .status{padding:.25rem .55rem}
  .r-chip{width:100%}
  .r-mini .minimap{width:6.75rem;height:6.75rem}
  .r-stack>*,.r-tc>:not(.pills){width:100%}
  .d-btn{min-width:2.9rem;padding:.3rem .3rem}
  .d-btn.primary{padding:.3rem .75rem;font-size:.78rem}
  .dock .sep{display:none}
}
@container hud (max-width:24rem){.d-btn:not(.primary) span{display:none}.d-btn{min-height:2.75rem}}