/* -- passing notices -----------------------------------------------------------
 * Toasts, a whisper's card and a party offer's card, all put on screen through
 * one lane (notices/lane.mjs). On a desktop the lane is `display: contents`
 * and each keeps its corner. On a phone every corner is a game's -- its
 * d-pad, its fire button, its pause -- so the lane hangs under the bar at the
 * top, stacks what is in it, and takes no taps at all (see the end of this
 * file). The offer card's own rules are in friends/friends.css. */

.notices { display: contents; }

/* A toast has nothing to press, so it never takes a press: one drawn where a
   game keeps a button used to swallow the tap meant for it. Its width is its
   text's, up to a limit -- `left: 50%` alone let a long one wrap into a tall
   narrow column on a phone. */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: max-content;
  max-width: min(34rem, calc(100vw - 2rem));
  text-align: center;
  background: var(--bg-lift-2);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: .75rem 1.4rem;
  font-weight: 600;
  box-shadow: var(--shadow);
  z-index: 40;
  pointer-events: none;
  animation: rise .25s ease;
}
.toast.out { opacity: 0; transition: opacity .5s ease; }
@keyframes rise {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* -- whisper notifications ------------------------------------------------- */

.whisper-toast {
  position: fixed;
  right: calc(1.25rem + env(safe-area-inset-right, 0px));
  top: calc(1.25rem + env(safe-area-inset-top, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: .75rem;
  width: min(340px, calc(100vw - 2.5rem));
  padding: .8rem .9rem;
  text-align: left;
  background: var(--bg-lift);
  border: 1px solid var(--tile, var(--accent));
  border-radius: 16px;
  box-shadow: var(--shadow);
  animation: drop .25s ease;
  transition: opacity .55s ease, transform .55s ease;
}
@keyframes drop {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}
.whisper-toast:hover { filter: brightness(1.1); }
.whisper-toast.out { opacity: 0; transform: translateY(-10px); }
.whisper-body { display: grid; gap: .1rem; min-width: 0; }
.whisper-from { font-weight: 700; font-size: .92rem; }
.whisper-text {
  color: var(--muted);
  font-size: .88rem;
  /* Two lines at most: a card that grows with the message is a card that
     covers whatever is being played. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.whisper-mark { margin-left: auto; font-size: 1.1rem; }

/* -- on a phone ----------------------------------------------------------------
 * The query is chat.mjs PHONE_CHAT, written out: narrow, or a touch screen
 * turned on its side. Keep every copy alike (scripts/shell/notices-phone-check
 * compares them). lane.mjs measures the bar on screen into --notices-top.
 * Under the bar the lane lies over the top of a game, where games keep tabs
 * and pause buttons, so nothing in it takes a tap: a toast has nothing to
 * press, a whisper is opened from the bar's chat button (which counts it and
 * nudges), and an offer is answered under the bar's Friends button. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-height: 540px) {
  .notices {
    position: fixed;
    top: calc(max(var(--notices-top, 0px), env(safe-area-inset-top, 0px)) + .4rem);
    left: calc(env(safe-area-inset-left, 0px) + .5rem);
    right: calc(env(safe-area-inset-right, 0px) + .5rem);
    z-index: 44;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    pointer-events: none;
  }
  .notices > * { position: static; max-width: 100%; pointer-events: none; }
  .notices > .toast {
    transform: none;
    animation: drop .25s ease;
    padding: .5rem .95rem;
    border-radius: 14px;
    font-size: .88rem;
  }
  .notices > .whisper-toast { width: min(340px, 100%); padding: .5rem .7rem; gap: .55rem; }
  .notices .whisper-text { -webkit-line-clamp: 1; }
}