/*
 * Ekoloko World — touch targets and phone-portrait panel fit (client audit 2026-10-07, v6: rangers' hide-and-seek card on screen, 44 px quest rows; v5: pioneers pop-up fits the phone and is centred (its art sits 19 stage px right of the stage centre); v3: ::before when ::after is taken, hit area above overlying text, bit/emote origin).
 * Global sheet, linked after eko-world-hud.v4.css. Versioned in the file name: never edit in place, ship vN+1.
 * Rule followed (docs/ekoloko-design-language.md, "הכלל האחד"): the original art and layout stay as they are; only what a
 * thumb or a mouse can hit grows. Every block names the defect measured on https://ekoloko.world at 390x844 (touch) and 1440x900.
 *
 * 1. Hit areas under 44 px. The desktop mute/exit buttons were 36x32 and 35x34 screen px; on a phone the close buttons were
 *    14x12 (eco-bit), 15x15 (accounts), 23x14 (pop-ups), 28x28 (eco-phone home), the tab rows 26x12 and the arrows 9x12.
 *    eko-world-hud.v2.js measures every control, grows an invisible ::after to 44 px per side (never into a neighbour, never
 *    off-screen) and writes the growth in the control's own pixels (--eko-ht/hr/hb/hl). No art or layout changes.
 */
html .eko-hit:not(.eko-hit--b)::after,
html .eko-hit--b::before {
  content: "";
  position: absolute;
  top: calc(var(--eko-ht, 0) * -1px);
  right: calc(var(--eko-hr, 0) * -1px);
  bottom: calc(var(--eko-hb, 0) * -1px);
  left: calc(var(--eko-hl, 0) * -1px);
  background: transparent;
  z-index: 2;   /* above text laid over the control's neighbourhood (a title or label would otherwise own those pixels) */
}

@media (orientation: portrait) and (max-width: 600px) {
  /*
   * 2. Panels the menu-stage fitter does not own. The basket was scaled 1.8 (eko-world-shop.v2.css), which is 411 px of a
   *    390 px phone: its left edge was cut off and the storage drawer peeked in from the right. 1.64 is the same
   *    "97% of the width" rule for the basket's real 562-stage-px width (960/562 x 0.97).
   *    The eco-bit panel (230 px) and the accounts panel (284 px) were left at the stage scale: 6 px text, 12 px tabs.
   *    They are enlarged about their own centre to about 96% of the width, like every other panel.
   */
  html .source-viewport--menu section.source-inventory { transform: scale(1.64); transform-origin: 50% 50%; }
  html.eko-mobile-dock .source-viewport--modal section.bit { scale: 1.6; transform-origin: 50% 50%; }
  html.eko-mobile-dock .source-viewport--modal section.acct { scale: 1.3; transform-origin: 50% 50%; }
  /* the emote grid: 17 px tiles at the stage scale; 2.4x makes them 41 px and the panel 259 px wide, growing up from its bottom-left corner */
  /* the pioneers' pop-up (emotes, pets and potions for non-pioneers) was 453 px of a 390 px phone: its edges and the message were cut. 0.82 fits it with a margin. */
  html.eko-mobile-dock section.source-premium { scale: .82; transform-origin: 27% 50%; }
  /* the rangers' hide-and-seek card sat 206 stage px left of the rangers' message panel, outside the 390 px phone (cut by up to 117 px).
     On a phone it opens above the panel, centred. */
  html.eko-mobile-dock .source-ranger > .hsk-card { left: 50%; right: auto; top: auto; bottom: calc(100% + 8px); translate: -50% 0; }
  /* quest list rows were 22 px high (24 px apart); a row is a full-width target, so it grows to 44 px (the list scrolls) */
  html.eko-mobile-dock .source-journal .source-npc__group { min-height: calc(44px * var(--eko-hud-k)); display: flex; align-items: center; }
  html.eko-mobile-dock .source-emotes { scale: 2.4; transform-origin: 0 100%; }
}