/* Shared arcade chat + emotes block (js/ui/social.js) — the /game grammar
   mounted on the six arcade match views and the N-seat tables. Loaded after
   game.css and chat.css: the children reuse their rules verbatim
   (.g-react-scroll/.g-react-btn/.g-react-door, .chat-*, .g-emote), this file
   only owns what differs from /game. */

/* /game shows the strip on phones only (a popover card serves the desktop);
   the arcade views have no popover, so their strip is on at every width.
   Beats game.css's `.g-react-row { display: none }` default by specificity
   and by source order.

   The chat door used to share this line with a hidden-scrollbar flex rail.
   In a 407px game sidebar it left only 266px for ten reactions: three were
   completely hidden and the next one was cut in half against the door.  A
   reaction pack made the invisible tail still longer.  The arcade block has
   no second picker, so hiding choices here means hiding the product.  Keep the
   door on its own row and let the reaction buttons wrap into honest rows. */
.g-react-row.soc-react {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}
.soc-react .g-react-scroll {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
  gap: 5px;
  overflow: visible;
  padding-bottom: 0;
}
.soc-react .g-react-btn { width: 100%; }
.soc-react .g-react-door {
  width: 100%;
  margin-left: 0;
}

/* The floating-emote layer: the host view drops it into its positioned board
   wrapper; bubbles ride .g-emote (game.css) inside it. Narrower side margins
   than /game's .board-emotes — the arcade boards own their full width. */
.board-emotes.soc-emotes { inset: -4% -2%; }
.soc-emotes .g-emote { display: grid; justify-items: center; gap: 3px; }
.soc-emotes .g-emote > span { font-size: inherit; }
.soc-emotes .g-emote > small { max-width: 116px; overflow: hidden; padding: 2px 6px; border-radius: 999px; background: rgba(6,8,11,.84); color: #f1e4c5; font: 750 9px/1.1 var(--font-body); text-overflow: ellipsis; text-shadow: 0 1px 4px #000; white-space: nowrap; }

/* The chat card in an arcade side column: keep the feed from towering over
   the move log the column also carries. */
.soc-chat .chat-feed { max-height: 180px; overflow-anchor: none; }
.soc-msg-actions { position: relative; margin-left: auto; }
.soc-msg-actions > summary { cursor: pointer; list-style: none; color: #aaa; }
.soc-msg-actions > summary::-webkit-details-marker { display: none; }
.soc-msg-actions[open] { display: flex; flex-wrap: wrap; gap: 5px; width: 100%; }
.soc-msg-actions[open] > summary { width: 100%; text-align: right; }
.soc-msg-actions button { min-height: 36px; padding: 0 10px; border: 1px solid #ffffff20; border-radius: 8px; color: #eee; background: #17191e; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Meaning survives reduced motion: the reaction becomes a calm static badge
   for the same lifecycle instead of being animated to opacity zero. */
@media (prefers-reduced-motion: reduce) {
  .board-emotes.soc-emotes .g-emote { top: 18%; opacity: .96; animation: none; will-change: auto; }
}