/*
 * Ekoloko World — in-game chrome (HUD, chat bar, map, player card, popups, toasts): readability, RTL and accessibility.
 * Global sheet, loaded after the bundle sheets by the entry pages. Versioned in the file name: never edit in place, ship vN+1.
 * Rule followed (docs/ekoloko-design-language.md, "הכלל האחד"): the original Flash chrome with modern capabilities inside it.
 * No new art, colours outside the documented tokens, gradients, blur or rounded chrome; every rule names the defect it fixes.
 *
 * v4 (2026-10-06): the phone-portrait player-card zoom (8) moved to eko-world-hud.v1.js, which now fits every menu panel.
 * v3 (2026-10-06), first linked version (v1 and v2 were preview-only and never linked):
 *  1. Keyboard focus was invisible everywhere in the game: the bundle's `.source-viewport :focus-visible{outline:none!important}`
 *     even cancels the map's own `.smap-hit:focus-visible` outline. Restored for keyboard focus only (:focus-visible) as
 *     `outline:3px solid #fff` + offset (design-language: "הטאב חייב outline:3px solid #fff"; chrome spec §10 "focus-visible
 *     בעובי 3px עם outline-offset") with a 2px #18384f ring (text token) so it reads on the light HUD art too, and the
 *     button's own _over art is shown on focus as on hover ("_over על :hover וגם :focus-visible"). Mouse/touch never see it.
 *  2. Chat placeholder: #b5b5b5 on #f1f1f1 (1.9:1). Now the muted-text token #4a6076 at 90% (about 5:1).
 *  3. Popup text (random events, notices, the maintenance notice): balanced line breaks, so a long notice no longer ends
 *     on a one-word line.
 *  4. Toasts (eco-phone, Eko-bit) were stacked above the modal "חדש באקולוקו!" window (z 60/70 over 55) and drew on it.
 *     While that modal is open they sit under its dimmed backdrop and come back on top when it closes.
 *  5. Player card: a Latin name with leading underscores was reordered by the RTL card ("__bob_1" read "bob_1__").
 *     The name is now its own bidi paragraph, as the <bdi> the account panel already uses.
 *  Phone portrait (html.eko-mobile-dock), where the 960x600 desktop stage is scaled to width/960 (0.39 on a 375 px phone):
 *  6. Chat bar was 127x10 px with 6 px text. It now spans the phone above the button tray, 40 px high, 16 px text, keeping
 *     chat-background.svg and the send button. Stage length L shows as L/k px; --eko-hud-k = 960/width per width band.
 *     The "rotate the phone" hint moves up so it does not sit on the bar.
 *  7. Popups (alerts, random events, exit confirm, maintenance) were 6 px text: drawn 1.4x larger and re-centred.
 *  8. Player card was 178 px wide with 5 px labels: drawn 1.8x larger, centred.
 *  9. The map's only close control (pull tab) was a 98x10 px target: its hit area grows to about 114x42 px, mostly below it.
 * 10. The maintenance countdown pill (restart-clock, top centre) covered the four side buttons for its whole minute:
 *     it now sits just below them.
 */

/* 1. visible keyboard focus in the game chrome (the dock keeps its own focus style) */
html .source-viewport :is(button, a, [role=button], [role=tab], [tabindex]:not([tabindex="-1"])):focus-visible,
html .source-stage :is(button, a, [role=button], [role=tab], [tabindex]:not([tabindex="-1"])):focus-visible,
html .source-side button:focus-visible,
html .pcard :is(button, [tabindex]:not([tabindex="-1"])):focus-visible,
html .upd-layer :is(button, a):focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #18384f;
}
html .source-hud-button.has-states:focus-visible:not(:active) > .source-hud-button__up { visibility: hidden; }
html .source-hud-button.has-states:focus-visible:not(:active) > .source-hud-button__over { display: block; }
html .source-random-button:focus-visible:not(:active) .source-random-button__up { display: none; }
html .source-random-button:focus-visible:not(:active) .source-random-button__over { display: block; }
html button:focus-visible:not(:disabled):not(:active) .social-source-art > .social-source-art__over { visibility: visible; }

/* 2. chat placeholder contrast (muted-text token) */
html .source-chat .chat__bar input::placeholder { color: #4a6076; opacity: .9; }

/* 3. balanced popup lines */
html .source-random-text { text-wrap: balance; }

/* 4. toasts never draw on the modal welcome window */
html:has(.upd-layer) :is(.fon-toasts, .bit-toasts) { z-index: 54; }

/* 5. the player card's name is a bidi island */
html .pcard .pcard__name { unicode-bidi: plaintext; }

/* ---- phone portrait ---- */
@media (orientation: portrait) and (max-width: 599px) { html.eko-mobile-dock { --eko-hud-k: 2.56; } }
@media (orientation: portrait) and (max-width: 339px) { html.eko-mobile-dock { --eko-hud-k: 3; } }
@media (orientation: portrait) and (min-width: 340px) and (max-width: 369px) { html.eko-mobile-dock { --eko-hud-k: 2.67; } }
@media (orientation: portrait) and (min-width: 370px) and (max-width: 399px) { html.eko-mobile-dock { --eko-hud-k: 2.5; } }
@media (orientation: portrait) and (min-width: 400px) and (max-width: 439px) { html.eko-mobile-dock { --eko-hud-k: 2.28; } }
@media (orientation: portrait) and (min-width: 440px) and (max-width: 519px) { html.eko-mobile-dock { --eko-hud-k: 2.05; } }
@media (orientation: portrait) and (min-width: 520px) and (max-width: 599px) { html.eko-mobile-dock { --eko-hud-k: 1.72; } }

@media (orientation: portrait) and (max-width: 599px) {
  /* 6. the bar: 8 px from the left, clear of the tray handle (44 px at right 8 px), 6 px above the tray, 40 px high */
  html.eko-mobile-dock .source-stage--at-bottom .source-chat {
    left: calc(8px * var(--eko-hud-k));
    top: calc(600px - 46px * var(--eko-hud-k));
    width: calc(960px - 68px * var(--eko-hud-k));
    height: calc(40px * var(--eko-hud-k));
  }
  /* the white field of chat-background.svg: x 17.55..342.5, y 8..33 of 397.25x44.6 */
  html.eko-mobile-dock .source-stage--at-bottom .source-chat .chat__bar input {
    left: 4.42%;
    top: 17.9%;
    width: 81.8%;
    height: 56%;
    font-size: calc(16px * var(--eko-hud-k));
  }
  html.eko-mobile-dock .source-stage--at-bottom .source-chat .chat__bar input::placeholder {
    font-size: calc(13px * var(--eko-hud-k));
  }
  /* the send button stays round: 34x34 of 44.6 high, 6 px from the right */
  html.eko-mobile-dock .source-stage--at-bottom .source-chat .chat__send {
    right: 1.51%;
    top: 11.2%;
    height: 76.2%;
    width: auto;
    aspect-ratio: 1;
  }
  html.eko-mobile-dock .mdock-turn { translate: 0 -48px; }

  /* 7. popups 1.4x the stage scale; their art sits about 35 stage px left of the stage centre */
  html.eko-mobile-dock .source-viewport--popup > .source-stage {
    transform: translate(calc(-50% + 19px), -50%) scale(calc(1.4 / var(--eko-hud-k))) !important;
  }

  /* 10. the maintenance countdown below the side buttons (8 px + 45 px buttons) */
  html.eko-mobile-dock .restart-clock { top: 60px; }

  /* 9. the map's pull-tab close: a larger invisible hit area, mostly below the tab */
  html.eko-mobile-dock .source-map .smap-close::after {
    content: "";
    position: absolute;
    left: -20px;
    right: -20px;
    top: -14px;
    bottom: -56px;
  }
}