/*
 * Ekoloko World — social and progression panels (UX4): player card, request cards, trade window,
 * eco-phone, quest journal and NPC dialog, adoption centre, card albums.
 * Global sheet, loaded after the bundle's base sheets; lazily loaded bundle sheets come later, so every
 * rule carries extra specificity (context class or doubled class) instead of relying on order.
 * Versioned in the file name: never edit in place, ship vN+1.
 * Rules applied (cited in the UX4 report): design-language "the one rule" (the original with modern
 * abilities), tokens #18384f / #4a6076 / Arial, "keyboard focus visible at every Tab stop",
 * "period-appropriate hover/down states, respect prefers-reduced-motion", "use original artwork where it exists".
 */

/* ---------------------------------------------------------------------------------------------
 * 1. Player names in an RTL page. A name is the player's own text and is often Latin with leading or
 *    trailing "_" / digits ("__dana_12"): inside an RTL run those neutrals jump to the wrong side and an
 *    ellipsis cuts the START of the name. Each name element takes its own direction from its first
 *    strong letter (unicode-bidi:plaintext), so Hebrew names stay RTL and Latin names read as typed.
 *    Elements that were start-aligned are pinned to the right, so the column still reads RTL.
 * ------------------------------------------------------------------------------------------- */
.source-invite .source-invite__name,
.native-trade-myname.native-trade-myname,
.native-trade-peername.native-trade-peername,
section.fon .fon-chat__start b,
.fon-toasts .fon-toast__words b {
  unicode-bidi: plaintext;
}
section.fon :is(.fon-hello b, .fon-me__words b, .fon-friend__words b, .fon-head__words h2, .fon-who__words b,
  .fon-post__who b, .fon-view__who, .fon-msg__name, .fon-msg__who, .fon-readers__who, .fon-calls__who,
  .fon-poll__who, .fon-group__name, .fon-found__title),
.fon-toasts .fon-toast__words b {
  unicode-bidi: plaintext;
  text-align: right;
}
/* the camera's "with …" line lists names separated by commas: isolate each paragraph, keep it RTL */
section.fon .fon-head__words small { unicode-bidi: isolate; }
section.fon .fon-stories__one b { unicode-bidi: plaintext; text-align: center; }

/* ---------------------------------------------------------------------------------------------
 * 2. Keyboard focus. The world stage blanks every focus ring (".source-stage :focus-visible
 *    {outline:none!important}"), so a keyboard player cannot see where they are in any panel.
 *    Same ring as the rest of the world sheets (white 3px + #18384f navy halo, readable on lime, blue,
 *    violet and orange panels); keyboard only. Player-name bidi on .pcard__name / .rcard__text and the
 *    request-card buttons' ring are owned by eko-world-hud / eko-world-play and are not repeated here.
 * ------------------------------------------------------------------------------------------- */
:is(.source-viewport, .source-stage) :is(.pcard, .source-npc, .source-firstpet, .source-adopt, .petw,
  .source-cards-menu, .source-card-book, .source-quest-finished, .chaseboard, [class*="native-trade"]) :focus-visible:not(.source-npc__game),
:is(.source-viewport, .source-stage) [class*="native-trade"]:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #18384f;
}
/* buttons only: the phone's text fields keep their own focus look */
:is(section.fon, .fon-toasts) :is(button, a, [role="button"], [role="switch"], [role="radio"], [role="tab"]):focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #18384f;
}

/* ---------------------------------------------------------------------------------------------
 * 3. Hover and press on the Flash-skinned quest controls (QuestGroupSlotMC / QuestSubGroupSlotMC, the
 *    green accept tick): they had no pointer feedback at all. A brighter face on hover and a 1px drop on
 *    press, the same treatment the bundle already gives its other Flash buttons (.rcard__btn, adoption slots).
 *    The individual `translate` property is used so the bundle's own transforms are never replaced.
 * ------------------------------------------------------------------------------------------- */
.source-npc :is(.source-npc__group, .source-npc__chapter):hover { filter: brightness(1.07); }
.source-npc :is(.source-npc__group, .source-npc__chapter):active { translate: 0 1px; filter: brightness(.97); }
.source-npc .source-npc__accept:hover { filter: brightness(1.08) drop-shadow(0 0 4px #fff); }
.source-npc .source-npc__accept:active { translate: 0 1px; }
.source-npc .source-npc__tab:not([aria-selected="true"]):hover { filter: brightness(1.12); }
.source-npc .source-quest-guide:hover { filter: brightness(1.05); }
/* card albums and the card store */
.source-cards-menu .cards-button:hover { translate: 0 -2px; filter: brightness(1.06); }
.source-cards-menu .cards-button:active { translate: 0 1px; filter: brightness(.96); }
@media (prefers-reduced-motion: reduce) {
  .source-npc :is(.source-npc__group, .source-npc__chapter, .source-npc__accept):active,
  .source-cards-menu .cards-button:is(:hover, :active) { translate: none; }
}

/* ---------------------------------------------------------------------------------------------
 * 4. Quest text that scrolls. The journal's quest description is a 66px box (3.6 lines of 18.4px) with
 *    its scrollbar hidden: the fourth line is cut through the middle and nothing says there is more.
 *    The original QuestDataPane paged long text with arrows; here the box snaps to four whole lines and
 *    shows a thin scrollbar in the panel's own violet, so "more text" is visible again.
 * ------------------------------------------------------------------------------------------- */
.source-journal .source-journal__description { height: 73.6px; }
.source-journal :is(.source-journal__description, .source-journal__target) {
  scrollbar-width: thin;
  scrollbar-color: #8a63b8 transparent;
  overscroll-behavior: contain;
}
.source-journal .source-journal__subtext { scrollbar-width: thin; scrollbar-color: #8a63b8 transparent; overflow-y: auto; }

/* ---------------------------------------------------------------------------------------------
 * 5. Empty phone lists get the original art. A first-time player opens "חברים" and "הודעות" to a bare
 *    sentence on blue; the original buddy art (BuddyImageMC, the friend-request symbol) and the player
 *    card's message bubble (OtherPlayerData chatBut) say at a glance what belongs there.
 * ------------------------------------------------------------------------------------------- */
section.fon :is(.fon__app--friends, .fon__app--messages) .fon-empty::before {
  content: "";
  display: block;
  width: 74px;
  height: 64px;
  background: url("/ui/source/social/BuddyImageMC.svg") center / contain no-repeat;
  filter: drop-shadow(0 2px 0 rgba(3, 26, 77, .35));
}
section.fon .fon__app--messages .fon-empty::before {
  background-image: url("/ui/source/social/card-chatBut-up.svg");
}

/* ===================== v2 ===================== */
/* 6. Phone conversation readability: plain text messages at 14/19 (was 13/17) in the original ink
 *    #18384f, and each message takes its own direction from its first letter, so an English or mixed
 *    message no longer reads back to front inside the RTL thread. Big-emoji/sticker bubbles untouched. */
section.fon .fon-msg:not(.is-big):not(.is-sticker) .fon-msg__bubble > p {
  font-size: 14px; line-height: 19px; color: #18384f; unicode-bidi: plaintext; text-align: right;
}
/* 7. Trade window: the two owners' names in bold ink, so whose side is whose reads at a glance. */
.native-trade-myname.native-trade-myname, .native-trade-peername.native-trade-peername { font-weight: 700; color: #18384f; }
/* 8. Quest finished: long reward text scrolls with a visible bar in the popup's own orange; the
 *    player-name line takes its own direction; the OK tick answers hover and press. */
.source-quest-finished .source-quest-finished__text { scrollbar-width: thin; scrollbar-color: #c86400 transparent; overscroll-behavior: contain; }
.source-quest-finished .source-quest-finished__name { unicode-bidi: plaintext; }
.source-quest-finished .source-quest-finished__ok:hover { filter: brightness(1.08) drop-shadow(0 0 4px #fff); }
.source-quest-finished .source-quest-finished__ok:active { translate: 0 1px; }
/* 9. NPC dialog: its story text gets the same visible violet scrollbar as the journal. */
.source-npc .source-npc__text { scrollbar-width: thin; scrollbar-color: #8a63b8 transparent; }
/* 10. Pet care and card albums: period-appropriate hover/press on every enabled button. */
:is(.petw, .source-card-book) button:not(:disabled):hover { filter: brightness(1.06); }
:is(.petw, .source-card-book) button:not(:disabled):active { translate: 0 1px; }
@media (prefers-reduced-motion: reduce) {
  :is(.petw, .source-card-book) button:active, .source-quest-finished .source-quest-finished__ok:active { translate: none; }
}
/* ===================== v3 ===================== */
/* 11. Pet care (MyAnimalPanel): the food/games/bath lists cut their last row with no sign of more;
 *     a thin scrollbar in the panel's own green says the list goes on. */
.petw .petw__pane, .petw .petw__pane * { scrollbar-width: thin; scrollbar-color: #6f8f12 transparent; }