/* Lobby-toasten (lobby-toast.js, 08.10.2026): kort, selvlukkende beskjed
 * nederst i skallet — «Du byttet hall …», «Kunne ikke starte spillet …».
 *
 * Skallets burgunder/gull: flaten og kanten er lobbyens popover (hallvelgeren:
 * --th-modal / --th-modal-line, reserve #3a0e11), teksten er kremhvit
 * (--th-text, reserve #f7eedd) og info-ikonet er gull (--th-accent, reserve
 * #d4a64a). Uten data-theme blir det burgunder/gull, med et tema følger toasten
 * temaets popover. Feil er rød som Min sides toast (rgba(180, 28, 28, 0.92)):
 * rød betyr feil, ikke tema. Ikonet (i / !) skiller de to uten farge.
 * Kontrast: #f7eedd på #3a0e11 ≈ 14,6 : 1, hvit på feilrødt ≥ 6 : 1.
 *
 * Tekst ganges med --mk-ts (Min sides «Stor» på terminalen, 1,2 ×). --lobby-ts
 * settes bare på #lobby-screen/#lobby-back-bar og når ikke en toast på <body>.
 *
 * z-index 10950: over Min side (10800) og bekreftelsesdialogen dens (10900), så
 * et hallbytte gjort fra Min side midt i en runde faktisk vises, og over
 * innloggingen (10000) for «Logg inn på nytt.». Under passordbyttet (99980), den
 * obligatoriske pausen (99999) og skjermtastaturet.
 *
 * pointer-events: none: toasten tar aldri et trykk fra lobbyen under. `lobby-`
 * prefikset følger showLobbyToast; ingen regler i lobbyen treffer klassene.
 */
.lobby-toast-dock {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 10950;
  width: min(520px, calc(100vw - 32px));
  transform: translateX(-50%);
  pointer-events: none;
}

.lobby-toast-region {
  display: flex;
  justify-content: center;
}

.lobby-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px 18px 12px 14px;
  border: 1px solid var(--th-modal-line, rgba(247, 238, 221, 0.18));
  border-radius: 14px;
  background: var(--th-modal, #3a0e11);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(247, 238, 221, 0.04);
  color: var(--th-text, #f7eedd);
  font-size: calc(15px * var(--mk-ts, 1));
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
  animation: lobby-toast-in 220ms ease-out;
}

.lobby-toast__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: calc(20px * var(--mk-ts, 1));
  height: calc(20px * var(--mk-ts, 1));
  border: 2px solid var(--th-accent, #d4a64a);
  border-radius: 50%;
  color: var(--th-accent, #d4a64a);
  font-size: calc(12px * var(--mk-ts, 1));
  font-weight: 800;
  line-height: 1;
}

.lobby-toast--error {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(180, 28, 28, 0.92);
  color: #ffffff;
}

.lobby-toast--error .lobby-toast__icon {
  border-color: #ffffff;
  color: #ffffff;
}

.lobby-toast.is-leaving {
  animation: lobby-toast-out 200ms ease-in forwards;
}

@keyframes lobby-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes lobby-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(8px); }
}

/* Ingen bevegelse: toasten står bare der, og forsvinner uten å gli ut. */
@media (prefers-reduced-motion: reduce) {
  .lobby-toast,
  .lobby-toast.is-leaving {
    animation: none;
  }

  .lobby-toast.is-leaving {
    opacity: 0;
  }
}

/* Windows høykontrast: bakgrunnen overstyres, så kanten må bære formen. */
@media (forced-colors: active) {
  .lobby-toast {
    border: 2px solid CanvasText;
  }

  .lobby-toast__icon {
    border-color: CanvasText;
    color: CanvasText;
  }
}