/* Multiplayer: the invite card, the four seats, and the podium.
   Laid out for a 375 px phone first — that is what the children are holding. */

/* ------------------------------------------------------------ invite */
.invite-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  padding: var(--s5);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(0, 229, 255, .14), rgba(12, 20, 45, .8));
  border: 1px solid var(--line);
}
.invite-label { font-size: 12px; font-weight: 800; opacity: .7; letter-spacing: 2px; }
.invite-code {
  font-family: var(--fd);
  font-weight: 900;
  font-size: clamp(40px, 12vmin, 68px);
  letter-spacing: .18em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 30px rgba(0, 229, 255, .7), 0 4px 0 rgba(0, 0, 0, .4);
  /* The letter-spacing would otherwise push the last glyph off-centre. */
  padding-inline-start: .18em;
}
.invite-hint { margin: 0; font-size: 12px; opacity: .7; font-weight: 600; text-align: center; }
.invite-qr {
  background: #fff;
  padding: var(--s2);
  border-radius: 14px;
  line-height: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.share-row { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; width: 100%; }
.share-row .btn { flex: 1 1 auto; text-align: center; text-decoration: none; }
.btn.share-wa {
  background: linear-gradient(180deg, #7ef0a4, #25d366);
  color: #04240f;
  box-shadow: 0 8px 0 #128c3c, 0 14px 26px rgba(37, 211, 102, .35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn.share-wa:active { box-shadow: 0 3px 0 #128c3c; }

/* ------------------------------------------------------------- seats */
.seats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
@media (min-width: 620px) { .seats { grid-template-columns: repeat(4, 1fr); } }
.seat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  padding: var(--s3) var(--s2);
  border-radius: 16px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--line);
  min-height: 132px;
  justify-content: center;
  transition: border-color .2s, background .2s;
}
.seat.ready { border-color: rgba(182, 255, 60, .55); background: rgba(182, 255, 60, .1); }
.seat.me { box-shadow: inset 0 0 0 2px rgba(0, 229, 255, .55); }
.seat.empty { opacity: .45; border-style: dashed; }
.seat b { font-size: 13px; font-weight: 900; text-align: center; overflow-wrap: anywhere; }
.seat small { font-size: 12px; opacity: .7; font-weight: 700; }
.seat-slot { font-size: 30px; line-height: 1; opacity: .5; }
.seat-av { position: relative; }
.seat-crown, .seat-off {
  position: absolute; top: -6px; inset-inline-end: -6px;
  font-size: 15px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8));
}
.seat-off { inset-inline-end: auto; inset-inline-start: -6px; }
.seat-car { width: 26px; height: 8px; border-radius: 99px; box-shadow: 0 0 10px currentColor; }

/* ------------------------------------------------------- lobby config */
.lobby-config { display: flex; flex-direction: column; gap: var(--s3); text-align: start; }
.lobby-config-read {
  display: flex; flex-direction: column; gap: var(--s1); align-items: flex-start;
  padding: var(--s3) var(--s4); border-radius: 14px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line); text-align: start;
}
.lobby-config-read span { font-size: 13px; opacity: .75; font-weight: 600; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip-btn {
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .07);
  color: #dce9ff;
  font-family: var(--f);
  font-weight: 800;
  font-size: 13px;
  padding: var(--s2) var(--s4);
  min-height: var(--tap);
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.chip-btn.on { background: rgba(0, 229, 255, .22); border-color: rgba(0, 229, 255, .6); color: #fff; }
.diff-chip {
  align-self: flex-start;
  font-size: 12px; font-weight: 800; padding: 2px var(--s2); border-radius: 999px;
  background: rgba(0, 229, 255, .18); border: 1px solid rgba(0, 229, 255, .4);
}
.lobby-note { font-size: 12px; opacity: .68; font-weight: 600; align-self: center; }

.colour-row { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }
.colour-dot {
  width: var(--tap); height: var(--tap);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .25);
  cursor: pointer;
  transition: transform .12s, border-color .2s;
}
.colour-dot.on { border-color: #fff; transform: scale(1.12); box-shadow: 0 0 0 3px rgba(255, 255, 255, .2); }

/* ------------------------------------------------------------ podium */
.podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: var(--s2);
  margin: var(--s5) 0 var(--s3);
}
.podium-step { display: flex; flex-direction: column; align-items: center; gap: var(--s1); }
.podium-medal { font-size: 26px; line-height: 1; }
.podium-step b { font-size: 13px; font-weight: 900; text-align: center; overflow-wrap: anywhere; }
.podium-step small { font-size: 12px; opacity: .75; font-family: var(--fd); }
.podium-block {
  width: 100%;
  border-radius: 12px 12px 0 0;
  display: grid;
  place-items: center;
  font-family: var(--fd);
  font-weight: 900;
  font-size: 22px;
  color: rgba(255, 255, 255, .85);
  margin-top: var(--s1);
  /* Height, not transform: these blocks are static, so there is nothing to animate. */
}
.podium-step.p1 .podium-block { height: 96px; background: linear-gradient(180deg, #ffe08a, #ffc63d); color: #3a2a00; }
.podium-step.p2 .podium-block { height: 70px; background: linear-gradient(180deg, #e8eefc, #b9c6de); color: #1d2536; }
.podium-step.p3 .podium-block { height: 54px; background: linear-gradient(180deg, #ffbe8f, #d98246); color: #2f1602; }
.podium-step.me b { color: var(--neon); }

.podium-fourth {
  display: flex; align-items: center; gap: var(--s2); justify-content: center;
  padding: var(--s2) var(--s4); border-radius: 14px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line);
}
.podium-fourth b { font-size: 13px; }
.podium-fourth small { font-size: 12px; opacity: .7; font-family: var(--fd); }
.podium-fourth.me { box-shadow: inset 0 0 0 2px rgba(0, 229, 255, .55); }

.standings { display: flex; flex-direction: column; gap: var(--s2); }
.standing-row {
  display: grid;
  grid-template-columns: 24px 30px 1fr auto;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  font-size: 13px;
}
.standing-row > span:nth-of-type(2), .standing-row > span:nth-of-type(3) { display: none; }
@media (min-width: 520px) {
  .standing-row { grid-template-columns: 24px 30px 1fr auto auto auto; }
  .standing-row > span:nth-of-type(2), .standing-row > span:nth-of-type(3) { display: inline; opacity: .72; font-weight: 700; }
}
.standing-row.me { border-color: rgba(0, 229, 255, .55); background: rgba(0, 229, 255, .1); }
.standing-place { font-family: var(--fd); font-weight: 900; color: var(--gold); }
.standing-row b { overflow-wrap: anywhere; }
.standing-score { font-family: var(--fd); font-weight: 900; color: #8ef7ff; }

/* --------------------------------------------------- multiplayer entry */
.mp-entry { display: flex; flex-direction: column; gap: var(--s4); }
.mp-join { display: flex; gap: var(--s2); align-items: flex-end; }
.mp-join .field { flex: 1; }
.input.code {
  font-family: var(--fd);
  font-size: 24px;
  letter-spacing: .3em;
  text-align: center;
  text-transform: uppercase;
  direction: ltr;
}