/* lag.css — the "Feeling choppy?" offer.
 *
 * Its own file rather than a tail on hud.css, because it is not HUD chrome: the
 * HUD is what the match is telling you continuously, and this is a one-time
 * question the game asks and then forgets. hud.css was also 18 lines over budget
 * with it appended, and the rule is split rather than raise.
 *
 * Written for the youngest player in the room. It has to be possible to ignore
 * it completely, so: bottom-centre where it covers no score, no clock, no
 * standings and none of the middle of the arena where the fight is; quiet
 * colours; no red; no shake; no sound. It removes itself after 14 seconds
 * whether or not anyone touches it.
 *
 * Both hit areas are at least 40px, which is the phone-thumb floor in
 * docs/ui-rules.xml, because the people most likely to be lagging are the people
 * most likely to be on a phone.
 */
.lag-toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px;
  background: rgba(16, 20, 34, .92); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px; padding: 4px 4px 4px 6px; z-index: 60;
  animation: lagIn .28s ease-out both;
  /* The shell sets a narrow default width on buttons in places; without this the
     label wraps into an 80px column 111px tall, which measures as a tap target
     and reads as a mistake. */
  /* max-content, not shrink-to-fit. A fixed element with only `left` set resolved
     its width to the padding alone (12px measured) and let both buttons overflow
     it, so the pill background sat behind nothing. */
  width: max-content; max-width: calc(100vw - 24px);
}
.lag-toast.out { animation: lagOut .35s ease-in both; }
.lag-toast.sent { border-color: rgba(94, 224, 138, .5); }
.lag-toast .lag-send {
  background: none; border: 0; color: #e8ecf8; font: inherit; font-size: 14px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer; min-height: 40px;
  /* Set HERE, not inherited from the container: the shell resets white-space on
     buttons, so relying on inheritance wrapped the label into an 80px column
     111px tall. Measured, not guessed. */
  white-space: nowrap;
}
.lag-toast .lag-send:hover { background: rgba(255, 255, 255, .08); }
.lag-toast.sent .lag-send { color: #5ee08a; }
.lag-toast .lag-no {
  background: none; border: 0; color: #8f9ab8; font: inherit; font-size: 18px;
  line-height: 1; cursor: pointer; padding: 0 12px; min-height: 40px; min-width: 40px;
}
.lag-toast .lag-no:hover { color: #e8ecf8; }
.lag-toast button:focus-visible { outline: 2px solid #8fb6ff; outline-offset: 2px; }
@keyframes lagIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes lagOut { to { opacity: 0; transform: translate(-50%, 8px); } }
/* Motion safety: the offer still arrives, it just does not slide in. */
@media (prefers-reduced-motion: reduce) {
  .lag-toast, .lag-toast.out { animation: none; }
  .lag-toast.out { opacity: 0; }
}