/* Moved out of app.css as it was, rule for rule and in the same order (#547), so the picker can
   choose this file's specs: The wide Players screen, the spinner, and online play: the code chip, the toast (a match's
   messages too), the waiting room.
   index.html loads it right after match-hud.css, where these rules stood. */

/* ------------------------------------------------------------ menus: wide Players screen, spinner */

.menu.wide .columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26em), 1fr));
  gap: 0.6em 1em;
  width: min(60em, 96vw);
}

.menu.wide .columns > div {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.menu.wide .panel {
  width: 100%;
}

.row.wrap {
  flex-wrap: wrap;
}

.chip.small {
  margin-inline-start: auto;
  padding: 0.1em 0.6em;
  font-size: max(var(--fs-small), 0.8em);
}

.seat .chip.small {
  color: var(--ui-text);
}

.spinner {
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  border: 0.3em solid var(--ui-line);
  border-top-color: var(--ui-text);
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

.reduced-motion .spinner {
  animation-duration: 3s;
}

/* ------------------------------------------------------------ online: code chip, toast, waiting room */

.code-chip {
  position: absolute;
  top: calc(2.6em + var(--sa-t, 0px));
  inset-inline-start: calc(1.1em + var(--sa-s, 0px));
  padding: 0.35em 0.8em;
  border-radius: 0.7em;
  border: 1px solid var(--ui-line);
  background: var(--ui);
  font-size: max(var(--fs-small), 0.8em);
  font-weight: 800;
  letter-spacing: 0.03em;
}

.code-chip b {
  font-weight: 900;
  letter-spacing: 0.15em;
}

.toast {
  position: absolute;
  top: 5.6em;
  left: 50%;
  transform: translate(-50%, -0.4em);
  padding: 0.4em 1em;
  border-radius: var(--r-l);
  border: 1px solid var(--ui-line);
  background: var(--bg);
  font-size: max(var(--fs-small), 0.85em);
  font-weight: 800;
  max-width: min(40em, 92vw);
  width: max-content;
  text-align: center;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}

/* As a banner: it fades in and goes at once, so the hints that come back where it was never lie
   under a message still fading out (#552). */
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
  transition:
    opacity 0.2s,
    transform 0.2s;
}

.reduced-motion .toast {
  transition: none;
}

/* The link dropped mid-match: the frozen match stays, with this note over it until it is back. */
.reconnect {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0.8em;
  max-width: min(36em, 92vw);
  width: max-content;
  padding: 0.8em 1.2em;
  border-radius: 0.9em;
  border: 1px solid var(--ui-line);
  background: var(--ui);
  font-weight: 800;
  z-index: 5;
  pointer-events: none;
}

.spinner.small {
  flex: none;
  width: 1.4em;
  height: 1.4em;
  border-width: 0.2em;
}

.pg-dialog.lobby {
  max-width: min(48em, 94vw);
}

.lobby-body {
  display: flex;
  gap: 1.4em;
  align-items: flex-start;
  text-align: start;
}

.lobby-qr .qr {
  display: block;
  width: 11em;
  height: 11em;
  border-radius: 0.5em;
}

.lobby-cover {
  width: 11em;
  min-height: 11em;
  flex: none;
  /* Solid, as the QR code's white tile was: the game behind the see-through dialog stays out. */
  background: var(--bg);
}

.lobby-code-row {
  justify-content: flex-start;
}

.lobby-info {
  min-width: 0;
  flex: 1;
}

.lobby-code {
  font-size: 3.2em;
  font-weight: 900;
  letter-spacing: 0.25em;
  line-height: calc(1 * var(--line-k));
}

.lobby-link {
  font-size: max(var(--fs-small), 0.8em);
  color: var(--ui-dim);
  word-break: break-all;
}

.lobby-link b {
  color: var(--ui-text);
}

/* The note when phones can reach no link (#70): words, so break only between words. */
.lobby-link.lobby-lan {
  word-break: normal;
  overflow-wrap: anywhere;
}

.lobby-seats {
  list-style: none;
  margin: 0.4em 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  font-size: max(var(--fs-small), 0.85em);
}

.lobby-seats li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.2em 0.5em;
  border-radius: var(--r-m);
  background: var(--ui-raised);
}

/* Each seat's shape as a badge ringed in its colour, as in the top bar and setup (#410). */
.lobby-seats li > svg {
  flex: none;
  box-sizing: content-box;
  width: 0.95em;
  height: 0.95em;
  padding: 0.25em;
  border-radius: 50%;
  background: var(--ui-key);
  box-shadow: 0 0 0 2px var(--c);
}

.high-contrast .lobby-seats li {
  border: 2px solid var(--ui-text);
}

.lobby-seats em {
  margin-inline-start: auto;
  font-style: normal;
  color: var(--ui-dim);
}

.lobby-seats em.on {
  color: var(--ok);
  font-weight: 900;
}