/* Contextual activity HUDs on phones (wave 4, lane U08): jet/aircraft instruments, race timer, golden-coqui counter,
   the traversal course card, flow combo meter, multiplayer notices, carjack lines, ship telegraph and photo mode.

   Loaded AFTER mobile-play.css and namespaced by body.mobile, so desktop is untouched. Every placement below is
   expressed through four slot variables so the base HUD owner can retune one place instead of eleven rules:
     --act-left/--act-right  the free column to the right of the minimap column (portrait) / between the left column
                             and the pause button (phone landscape)
     --act-top               top edge of the "activity slot" (where the place name starts)
     --act-band              bottom edge of the transient notice band just under the slot
   While an activity owns the slot, the exploration readouts it replaces (place name, speed) are visibility:hidden,
   the same precedent mobile-play.css sets for the sports board and the ship telegraph. */
body.mobile {
  --act-left:calc(var(--mobile-left) + 140px);
  --act-right:calc(var(--mobile-right) + 14px);
  --act-top:calc(var(--mobile-top) + 112px);
  --act-band:calc(var(--mobile-top) + 240px);
}
@media(min-width:640px) and (max-height:560px) {
  body.mobile {
    --act-left:calc(var(--mobile-left) + 126px);
    --act-right:calc(var(--mobile-right) + 70px);
    --act-top:calc(var(--mobile-top) + 66px);
    --act-band:calc(var(--mobile-top) + 232px);
  }
}

/* ---- Flight instruments (jet-hud.js) ------------------------------------------------------------------------------
   Portrait: speed and altitude share the activity slot side by side (the old 30%/40% placement sat on the wallet and the
   objective card); heading and warnings stack under them. The speed readout of the base HUD is the same number: hide it. */
body.mobile:has(#jet-hud.on) .location,
body.mobile:has(#jet-hud.on) .flight-hud { visibility:hidden; }
body.mobile #jet-hud .cell {
  width:calc((100vw - var(--act-left) - var(--act-right) - 8px) / 2);min-width:0;box-sizing:border-box;transform:none;
}
body.mobile #jet-hud #jh-speed { top:var(--act-top);left:var(--act-left);right:auto; }
body.mobile #jet-hud #jh-alt { top:var(--act-top);right:var(--act-right);left:auto; }
body.mobile #jet-hud .cell .sub { white-space:normal;letter-spacing:.06em; }
body.mobile #jet-hud #jh-head { top:calc(var(--act-top) + 76px);font-size:11px; }
body.mobile #jet-hud #jh-warn {
  top:calc(var(--act-top) + 102px);left:var(--act-left);right:var(--act-right);transform:none;width:auto;max-width:none;
  box-sizing:border-box;font-size:12px;letter-spacing:.04em;padding:4px 8px;
}
@media(min-width:640px) and (max-height:560px) {
  /* Phone landscape: the cells flank the attitude ladder, clear of the left column (126px) and of the right-hand
     ENTRAR/SALIR and ACCIÓN buttons (150px); the old 250px offsets made the two cells overlap at 667px wide. */
  body.mobile #jet-hud .cell { width:clamp(104px,17vw,140px); }
  body.mobile #jet-hud #jh-speed { top:calc(var(--mobile-top) + 190px);left:calc(var(--mobile-left) + 126px);transform:translateY(-50%); }
  body.mobile #jet-hud #jh-alt { top:calc(var(--mobile-top) + 190px);right:calc(var(--mobile-right) + 152px);transform:translateY(-50%); }
  body.mobile #jet-hud #jh-head { top:calc(var(--mobile-top) + 70px); }
  body.mobile #jet-hud #jh-warn { top:calc(var(--mobile-top) + 100px);left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:min(300px,calc(100vw - 340px)); }
  body.mobile #jet-hud canvas { width:min(46vmin,440px);height:min(46vmin,440px); }
  /* The mission objective sits in the same top band as the heading chip. */
  body.mobile:has(#jet-hud.on) .mi-track { display:none; }
}
/* V3: at 640-699px wide the speed / altitude cells reached into the centre 30% box (the 17vw width plus the 126/152px
   offsets leave only 20% of the width free); narrower cells pulled outwards keep the middle for the attitude ladder. */
@media(min-width:640px) and (max-width:699px) and (max-height:560px) {
  body.mobile #jet-hud .cell { width:98px; }
  body.mobile #jet-hud #jh-speed { left:calc(var(--mobile-left) + 122px); }
  body.mobile #jet-hud #jh-alt { right:calc(var(--mobile-right) + 118px); }
}

/* ---- Race timer (activities.js, #race-hud) ---------------------------------------------------------------------
   The desktop timer is a centred 3-line card at top:82px that lands on the place name, the speed readout and the tool
   strip on a phone. Here it is a two-column chip in the activity slot: big time on the left, name and medal on the
   right (ellipsis, never wrapping), so it is 48px tall and the speed readout below it stays visible. */
body.mobile #race-hud:not([hidden]) {
  top:var(--act-top);left:var(--act-left);right:var(--act-right);transform:none;display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"time name" "time meta";column-gap:10px;row-gap:0;align-items:center;justify-items:start;text-align:left;
  padding:3px 12px 4px;box-sizing:border-box;
}
body.mobile #race-hud .race-time { grid-area:time;font-size:30px; }
body.mobile #race-hud .race-name,body.mobile #race-hud .race-meta { min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px;letter-spacing:1px; }
body.mobile #race-hud .race-name { grid-area:name; }
body.mobile #race-hud .race-meta { grid-area:meta; }
body.mobile:has(#race-hud:not([hidden])) .location { visibility:hidden; }
@media(min-width:640px) and (max-height:560px) {
  body.mobile #race-hud:not([hidden]) { right:auto;width:min(320px,calc(100vw - var(--act-left) - var(--act-right))); }
  body.mobile:has(#race-hud:not([hidden])) .mi-track { display:none; }
}

/* ---- Golden coquí counter -----------------------------------------------------------------------------------------
   It popped at 38% of the screen height, right over the player, and its pop animation resets transform, which also
   dropped the translateX(-50%) centring for half a second. On phones it is a left-aligned line in the notice band. */
body.mobile #coqui-counter:not([hidden]) {
  top:calc(var(--act-band) - 30px);left:var(--act-left);right:var(--act-right);transform:none;text-align:left;font-size:24px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---- Flow / combo meter (#flow-hud) ----------------------------------------------------------------------------
   mobile-play.css moved it to left:14px but kept the desktop translateX(-50%) centring, so on a phone the left half of
   the score sat off-screen (x = -122..151 at 390px wide), and in phone landscape its 240px bottom offset put it on the
   minimap. It is now a left-aligned block above the stick; the popups open to its right instead of upward. */
body.mobile #flow-hud {
  transform:none;width:min(200px,calc(100vw - var(--mobile-left) - var(--mobile-right) - 150px));justify-items:start;
}
body.mobile #flow-hud .flow-feed { bottom:0;left:calc(100% + 10px);margin:0;align-items:flex-start;white-space:nowrap; }
@media(min-width:640px) and (max-height:560px) {
  body.mobile #flow-hud { bottom:auto;top:calc(var(--mobile-top) + 152px);left:calc(var(--mobile-left) + 126px); }
}

/* ---- Traversal course card (traversal-course.js) ------------------------------------------------------------------
   Portrait: it sat at left:12px/top:97px, 270px wide, covering the minimap, wallet and place name for the whole run.
   It now takes the activity slot (right of the minimap column); the readouts it replaces are hidden while it is up.
   Landscape keeps its own centred card (traversal-course.css) and only clears the readouts underneath it. */
body.mobile.course-running .location,
body.mobile.course-running .flight-hud,
/* V3: keyed on the card itself, not only on the per-frame course-running class: the card is also up while the run is
   relocating/finishing and before the first frame after a start, and the readouts must never show through it. */
body.mobile:has(.traversal-course-card:not([hidden])) .location,
body.mobile:has(.traversal-course-card:not([hidden])) .flight-hud { visibility:hidden; }
body.mobile .traversal-course-card:not([hidden]) {
  top:var(--act-top);left:var(--act-left);right:var(--act-right);width:auto;box-sizing:border-box;
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:8px;align-items:center;
}
/* Title row and clock row share the pause button's height instead of stacking (saves ~24px of a 236px-wide card). */
body.mobile .traversal-course-card .course-card-top,body.mobile .traversal-course-card .course-card-meta { display:contents; }
body.mobile .traversal-course-card .course-eyebrow { grid-column:1/3;grid-row:1;align-self:end; }
body.mobile .traversal-course-card .course-pause { grid-column:3;grid-row:1/3; }
body.mobile .traversal-course-card .course-step { grid-column:1;grid-row:2;align-self:start; }
body.mobile .traversal-course-card .course-clock { grid-column:2;grid-row:2;align-self:start; }
body.mobile .traversal-course-card>h2,body.mobile .traversal-course-card>p,body.mobile .traversal-course-card>.course-progress { grid-column:1/-1; }
body.mobile .traversal-course-card .course-target-detail { margin-top:5px; }
/* Checkpoint / retry / leave live in the pause dialog (the pause button above) and open by themselves after a fall,
   so the 3-button row is dropped: it made the card 60px taller and reach the middle of a 640px-tall screen. */
body.mobile .traversal-course-card .course-card-actions { display:none; }
/* The mph (player list) button is anchored in the same column; keep it clear of the card while a run is active. */
body.mobile.course-running .mph-root.has-peers .mph-btn { top:calc(var(--act-top) + 232px); }
body.mobile.course-running #destination { visibility:hidden; }
@media(min-width:640px) and (max-height:560px) {
  body.mobile .traversal-course-card:not([hidden]) { right:auto;left:50%;top:calc(var(--mobile-top) + 62px);display:block; }
  body.mobile .traversal-course-card .course-card-top,body.mobile .traversal-course-card .course-card-meta { display:flex; }
  body.mobile.course-running .mph-root.has-peers .mph-btn { top:calc(var(--mobile-top) + 70px); }
  body.mobile.course-running #destination { visibility:visible; }
}

/* ---- Multiplayer notices (mp-hud.js feed) ----------------------------------------------------------------------
   The feed stacks upward from the top edge of the minimap (its default anchor). On a phone the minimap is under the tool
   strip, so joins and splat notices were painted over the strip and the place name (measured: GRUPOS / MI SWAG covered).
   mobile-play.css already defines --mp-feed-left/--mp-feed-bottom for this, but main.js always passes the minimap
   anchor and fitFeed() writes inline left/bottom, so those variables never applied. The feed is now a one-row window
   in the notice band (the newest notice; older ones scroll out of the clipped box), right of the minimap column;
   in phone landscape it is right-aligned under the player-list button. */
body.mobile .mph-feed {
  left:var(--act-left)!important;right:auto!important;bottom:auto!important;top:calc(var(--act-band) - 31px);
  width:calc(100vw - var(--act-left) - var(--act-right));max-width:none!important;height:31px;overflow:hidden;
}
body.mobile .mph-feed.r .mph-item { left:0;right:auto; }
@media(min-width:640px) and (max-height:560px) {
  body.mobile .mph-feed { left:auto!important;right:var(--act-right)!important;top:calc(var(--mobile-top) + 119px);width:min(260px,calc(100vw - 420px)); }
  body.mobile .mph-feed .mph-item { left:auto;right:0; }
}

/* ---- Ship telegraph (ship-hud.js) ---------------------------------------------------------------------------------
   mobile-play.css hides the minimap, place name and speed while the telegraph is up but left the wallet and the
   objective card, which the full-width panel paints over (cash visible through the translucent panel). The big event banner
   (boarding, docking) sat at 22% of the height, on top of the telegraph rows: the panel steps aside while it shows. */
body.mobile:has(.shd:not([hidden])) .mi-wallet,
body.mobile:has(.shd:not([hidden])) .mi-track { visibility:hidden; }
body.mobile:has(.shd-toast.show) .shd { visibility:hidden; }

/* ---- Sports (sports-ui.js) ----------------------------------------------------------------------------------------
   The control hint was a single clipped line that ran under the SALIR button; it now wraps inside the free band left of
   the right-hand button column. In phone landscape the goal/half-time banner (34% of the height) covered the scoreboard:
   it moves to the lower centre and shrinks with the screen height. */
body.mobile .sp-banner { top:max(34%,calc(var(--mobile-top) + 250px)); }
body.mobile .sp-hint { white-space:normal;max-width:calc(100vw - 136px);text-align:center;line-height:1.2; }
@media(min-width:640px) and (max-height:560px) {
  body.mobile .sp-hint { max-width:40vw; }
  body.mobile .sp-banner { top:56%; }
  body.mobile .sp-banner b { font-size:clamp(30px,13vh,56px); }
  body.mobile .sp-banner span { font-size:18px; }
}

/* ---- Wild rides captions (wild-ui.js) ------------------------------------------------------------------------------
   They sat at 26% of the height, exactly where the ride's own toast and hints stack (bottom ~250px), and 88vw wide, so
   they ran under the player-list/ride buttons. Portrait: lifted above that stack and kept to the activity column;
   landscape: kept to the gap between the stick column and the right-hand buttons. */
body.mobile .wild-caption {
  bottom:calc(var(--mobile-bottom) + 320px);left:var(--act-left);right:var(--act-right);transform:translateY(8px);max-width:none;
  box-sizing:border-box;font-size:14px;
}
body.mobile .wild-caption.show { transform:none; }
@media(min-width:640px) and (max-height:560px) {
  body.mobile .wild-caption { bottom:26%;left:calc(var(--mobile-left) + 140px);right:calc(var(--mobile-right) + 160px);font-size:14px; }
}

/* ---- Carjack lines (carjack.js) ----------------------------------------------------------------------------------------
   The off-screen variant (subtitle) sat 170px above the bottom edge, in the middle of the ride/interact buttons. It now
   uses the notice band like the other transient lines. */
body.mobile .cj-bubble.sub {
  left:calc((var(--act-left) + 100vw - var(--act-right)) / 2)!important;top:calc(var(--act-band) - 52px)!important;bottom:auto;
  max-width:calc(100vw - var(--act-left) - var(--act-right));font-size:17px;
}

/* ---- Photo mode ------------------------------------------------------------------------------------------------------
   The exit button carried the desktop "P" key cap and sat 25px from the right edge regardless of the notch. */
body.mobile #exit-photo { right:calc(var(--mobile-right) + 16px); }
body.mobile #exit-photo kbd { display:none; }