/* rooms: styles for this area of the web app (see styles.css for the shared tokens and components). */

/* Friends: the activity picker (5 a row on a phone) and the two room modes (side by side on a desktop). */
.rooms-picker { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.rooms-modes { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 900px) {
  .rooms-picker { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .rooms-modes { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Lobby: the code and the people, one above the other on a phone, side by side on a desktop. */
.lobby-cards { display: flex; flex-direction: column; gap: 14px; }
.lobby-dot { animation: lobbyDot 0.5s ease-in-out infinite alternate; }
@keyframes lobbyDot { from { opacity: 0.25; } to { opacity: 1; } }
@media (min-width: 900px) {
  .lobby-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
}

/* A challenge drops in from the top, wherever the learner is. */
.challenge-host {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--safe-top) + 8px);
  display: flex;
  justify-content: center;
  padding: 0 12px;
  z-index: 45;
  pointer-events: none;
}
.challenge-banner {
  width: 100%;
  max-width: 520px;
  pointer-events: auto;
  box-shadow: 0 12px 34px rgba(30, 27, 75, 0.22);
  /* Backwards, not both: no transform is held once it's in, so the ⋯ menu's catcher covers the window. */
  animation: challengeDrop 0.5s cubic-bezier(.3, 1.5, .5, 1) backwards;
}
/* The ⋯ in the banner's top-right corner (Report, Block). */
.challenge-more { align-self: flex-start; margin: -8px -8px 0 0; }
.challenge-wiggle { animation: challengeWiggle 1.4s ease-in-out infinite; }
.challenge-timer {
  height: 100%;
  border-radius: 999px;
  background: var(--danger);
  animation-name: challengeTimer;
  animation-timing-function: linear;
  animation-fill-mode: both;
}
@keyframes challengeDrop { from { transform: translateY(-140%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes challengeWiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(8deg); } 75% { transform: rotate(-8deg); } }
/* Violet while there's time, red for the last quarter. */
@keyframes challengeTimer {
  from { width: 100%; background: #8B5CF6; }
  74.9% { background: #8B5CF6; }
  75% { background: var(--danger); }
  to { width: 2%; background: var(--danger); }
}

/* Duels: a score pill bumps when its score changes. */
.duel-pop { animation: duelPop 0.4s cubic-bezier(.3, 1.8, .5, 1) both; }
@keyframes duelPop { from { transform: scale(1.12); } to { transform: none; } }

/* Duel activities: banners laid over a board (a claim at the top, "wait for the next card" lower down); taps go through. */
.duel-top-banner,
.duel-bottom-banner,
.duel-center-banner {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 0 12px;
  pointer-events: none;
  z-index: 5;
}
.duel-top-banner { top: 0; }
.duel-bottom-banner { bottom: 0; }
.duel-center-banner { top: 0; bottom: 0; align-items: center; }
/* Children in one cell, the box as big as the biggest (Compose's Box): Parrot Says' perch and its banner. */
.duel-stack { display: grid; justify-items: center; max-width: 100%; }
.duel-stack > * { grid-area: 1 / 1; }
.duel-stack-bottom { align-self: end; max-width: 100%; pointer-events: none; z-index: 5; }
.duel-wait { color: #fff; background: rgba(30, 27, 75, 0.85); border-radius: 999px; padding: 8px 16px; }
/* Whose turn it is, on a pill in their colour. */
.duel-turn { padding: 7px 18px; border-radius: 999px; transition: background-color 0.3s ease; }
.duel-dot { transition: background-color 0.3s ease; }

/* Balloon Pop duel on a desktop: the sky runs down to the window's edge, where the balloons rise from. */
@media (min-width: 900px) {
  .game-split.balloon-duel-split { padding-bottom: 0; }
}

/* Memory Match duel on a desktop: the last pair takes the right of the top row, so it may shrink (its meaning ellipsised). */
@media (min-width: 900px) {
  .memory-hud.memory-hud-duel { grid-template-columns: minmax(max-content, 1fr) minmax(0, 440px) minmax(0, 1fr); }
}