/*
 * Ekoloko World — play surfaces (UX5): game launch, invites, game frames, lobbies.
 * Versioned in the file name: never edit in place, ship vN+1.
 * Design language: /var/www/ekoloko/docs/ekoloko-design-language.md — the original's art, colours and
 * sizes win; no blur, no new gradients, no rounded chrome; text #18384f, Arial; "_over" art on :hover
 * AND :focus-visible, plus a real focus outline (the art change alone is not a focus signal).
 * Selectors carry an extra class: the bundle's own sheets are loaded lazily and come later in <head>.
 */

/* ---------------------------------------------------------------------------------------------
 * 1. NPC games tab (the original NpcDialog "games" list): keyboard focus and a pressed state.
 *    The bundle gives only :hover (brightness 1.08). Flash buttons have up/over/down.
 * ------------------------------------------------------------------------------------------- */
.source-npc .source-npc__game:focus-visible{filter:brightness(1.08);outline:3px solid #fff;outline-offset:-3px;box-shadow:inset 0 0 0 5px #18384f}
.source-npc .source-npc__game:active{filter:brightness(.94);transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){.source-npc .source-npc__game:active{transform:none}}

/* ---------------------------------------------------------------------------------------------
 * 2. 1:1 game invite card (request-received/-sent art). A Latin name that starts or ends with a
 *    neutral character ("__kid_", "dani!") was laid out RTL and its underscores jumped to the wrong
 *    end: the name is isolated and takes its own direction from its first strong letter.
 *    On a phone the card sits inside the 960x600 stage scaled to 0.39 (portrait) / 0.625 (landscape):
 *    the accept/decline buttons were 12x11 CSS px. The card is zoomed up and the buttons get the same
 *    invisible hit margin the bundle already uses for the multiplayer-task seats (.mpt-seat__button).
 * ------------------------------------------------------------------------------------------- */
.rcards .rcard .rcard__text b{unicode-bidi:plaintext}
.rcards .rcard .rcard__btn::after{content:"";position:absolute;inset:-8px -6px}
.rcards .rcard .rcard__btn:focus-visible{outline:3px solid #fff;outline-offset:1px;box-shadow:0 0 0 5px #18384f}
@media (pointer:coarse) and (orientation:portrait) and (max-width:640px){
  .rcards .rcard.rcard--game{zoom:2.2;transform-origin:100% 0}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  .rcards .rcard.rcard--game{zoom:1.45}
}

/* ---------------------------------------------------------------------------------------------
 * 3. Game frame on a phone held upright: the "rotate" line floated at the very top of the screen,
 *    far from the game it is about. It now sits right above the game (the stage is centred and is
 *    100vw * 600/960 tall) and carries the same rotate art the world's own hint uses
 *    (.mdock-turn: /ui/source/eco/refreshBut-up.svg), so both hints read as one instruction.
 * ------------------------------------------------------------------------------------------- */
@media (orientation:portrait) and (max-width:640px){
  .gscreen .gscreen__turn{top:max(calc(env(safe-area-inset-top) + .6rem),calc(50% - 31.25vw - 4.6rem));display:flex;align-items:center;justify-content:center;gap:.55rem;font:700 1rem/1.25 Arial,sans-serif}
  .gscreen .gscreen__turn::before{content:"";flex:none;width:2.6rem;height:2.6rem;background:url(/ui/source/eco/refreshBut-up.svg) center/contain no-repeat;animation:eko-play-turn 2.4s ease-in-out infinite}
}
@keyframes eko-play-turn{0%,55%,100%{transform:rotate(0)}75%{transform:rotate(-90deg)}}
@media (prefers-reduced-motion:reduce){.gscreen .gscreen__turn::before{animation:none}}

/* ---------------------------------------------------------------------------------------------
 * 4. Multiplayer-task lobby (MultiplayerTaskLobby): seat names get the same direction isolation as
 *    the invite card, and the seat/exit buttons a visible keyboard focus.
 * ------------------------------------------------------------------------------------------- */
.mpt-lobby .mpt-seat .mpt-seat__name{unicode-bidi:plaintext}
.mpt-lobby .mpt-seat__button:focus-visible,.mpt-lobby .mpt-exit:focus-visible{filter:brightness(1.12);outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px #18384f}