/* The 3D rooms: labels, the lines that join them to objects, and the layout on a phone held sideways. */
.world-lead { position:absolute; height:1px; background:#d8dcc9aa; transform-origin:0 50%; pointer-events:none; }
.world-lead::after { content:''; position:absolute; right:-3px; top:-2px; width:5px; height:5px; border-radius:50%; background:#d8dcc9; }
.world-label.objective-target { z-index:1; }

/* Phones: smaller labels so they fit beside small objects. The ::before keeps the tap area 44px tall (26px inside the border, plus 9px above and below). */
@media(max-width:650px),(max-height:500px) {
  .world-label { min-height:28px; padding:4px 9px; font-size:11px; gap:6px; }
  .world-label::before { content:''; position:absolute; inset:-9px -4px; }
  .world-label.objective-target { min-height:34px; padding:6px 10px; font-size:12px; }
}

/* A phone held sideways: the text sits in a column on the left and the room takes the rest. */
@media(orientation:landscape) and (max-height:500px) {
  .hud { padding:10px max(14px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left)); background:none; }
  .hud-brand { font-size:18px; }
  .hud-brand small { display:none; }
  .location-tag { top:40px; left:max(16px,env(safe-area-inset-left)); }
  .location-tag h2 { font-size:21px; margin:2px 0; }
  .objective { top:98px; bottom:auto; left:max(16px,env(safe-area-inset-left)); right:auto; width:280px; max-width:none; max-height:calc(100% - 106px); overflow:auto; }
}