/*
 * The scene of the home page. Still, it shows the retour de flamme, the promise of the game: motion.css plays the rest.
 */

/* ---------- The table: a phone in the middle, the players around it, as on the app's icon ---------- */

.table {
  position: relative;
  width: min(100%, 37rem);
  margin-inline: auto;
  aspect-ratio: 1 / 1.08;
  container-type: inline-size;
}

.waves {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 124%;
  aspect-ratio: 1;
  translate: -50% -50%;
}

.waves i {
  position: absolute;
  inset: 0;
  border: 1px solid var(--bf-violet);
  border-radius: 50%;
  opacity: 0.3;
}

.waves i:nth-child(1) {
  inset: 21%;
}

.waves i:nth-child(2) {
  inset: 14%;
}

.waves i:nth-child(3) {
  inset: 7%;
}

.seat {
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: grid;
  gap: 2cqw;
  justify-items: center;
  color: var(--bf-text);
  font-size: clamp(0.72rem, 3.1cqw, 0.95rem);
  font-weight: var(--bf-weight-bold);
  translate: -50% -50%;
}

.seat-token {
  display: grid;
  place-items: center;
  width: clamp(2.6rem, 12.5cqw, 4.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--p);
  color: var(--bf-on-color);
  box-shadow: 0 0.6cqw 0 color-mix(in srgb, var(--p) 55%, var(--bf-bg));
}

.seat-token .glyph {
  width: 48%;
  height: 48%;
}

.seat-lea .seat-token {
  position: relative;
  transform-origin: bottom;
}

.seat-lea .seat-token::after {
  position: absolute;
  inset: -12%;
  border: 0.55cqw solid var(--bf-callback);
  border-radius: 50%;
  content: '';
}

.seat-1 {
  --x: 10%;
  --y: 17%;
}
.seat-2 {
  --x: 90%;
  --y: 13%;
}
.seat-3 {
  --x: 6.5%;
  --y: 50%;
}
.seat-4 {
  --x: 93.5%;
  --y: 52%;
}
.seat-5 {
  --x: 11%;
  --y: 83%;
}
.seat-6 {
  --x: 89%;
  --y: 81%;
}

.phone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52%;
  aspect-ratio: 9 / 18.6;
  padding: 1.6cqw;
  border: 1px solid var(--bf-plum);
  border-radius: 8.5cqw;
  background: var(--bf-surface-1);
  box-shadow:
    0 2.5cqw 7cqw color-mix(in srgb, var(--bf-violet) 26%, transparent),
    0 1cqw 0 var(--bf-plum-deep);
  rotate: -4deg;
  translate: -50% -50%;
}

.screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 7cqw;
  background: var(--bf-bg);
  container-type: inline-size;
}

/* The still page shows the retour de flamme: it is the promise of the game. */
.scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 4.4cqw;
  padding: 7.5cqw 6cqw 6cqw;
  background: var(--bf-bg);
  opacity: 0;
}

.scene-flame {
  opacity: 1;
}

.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--bf-accent);
  font-family: var(--bf-family-display);
  font-size: 3.7cqw;
  font-weight: var(--bf-weight-display);
  text-transform: uppercase;
}

.hud-pass {
  padding: 1.5cqw 3.6cqw;
  border: 1px solid var(--bf-plum);
  border-radius: var(--bf-radius-chip);
  color: var(--bf-text);
  font-size: 3cqw;
}

.vote-question {
  font-size: 7cqw;
  font-weight: var(--bf-weight-bold);
  line-height: 1.16;
}

.vote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6cqw;
}

.vote {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2.2cqw;
  min-height: 13cqw;
  padding-inline: 2.8cqw;
  overflow: hidden;
  border: 0.45cqw solid var(--p);
  border-radius: 4.2cqw;
  background: var(--bf-surface-2);
  font-size: 4.9cqw;
  font-weight: var(--bf-weight-medium);
}

.vote .glyph {
  width: 4.8cqw;
  height: 4.8cqw;
  color: var(--p);
}

.vote-hint {
  margin-block-start: auto;
  padding: 3cqw;
  border: 1px solid var(--bf-text-muted);
  border-radius: 4.2cqw;
  color: var(--bf-text);
  font-size: 3.8cqw;
  text-align: center;
}

.card {
  display: grid;
  gap: 2.6cqw;
  padding: 5.4cqw 5cqw;
  border-radius: 7cqw;
  background: var(--bf-card);
  box-shadow: 0 1.2cqw 0 var(--bf-violet);
}

.card-label {
  color: var(--bf-accent);
  font-size: 2.9cqw;
  font-weight: var(--bf-weight-bold);
  letter-spacing: var(--bf-tracking-label);
  line-height: 1.3;
  text-transform: uppercase;
}

.card-title {
  font-family: var(--bf-family-display);
  font-size: 7.9cqw;
  font-weight: var(--bf-weight-display);
  line-height: 1.05;
  text-transform: uppercase;
}

.card-prompt {
  font-size: 5.1cqw;
  line-height: 1.28;
}

.card-hint {
  color: var(--bf-text-muted);
  font-size: 4.1cqw;
  line-height: 1.25;
}

.go {
  display: grid;
  place-items: center;
  min-height: 14cqw;
  margin-block-start: auto;
  border-radius: 5cqw;
  background: var(--bf-accent);
  color: var(--bf-on-accent);
  font-family: var(--bf-family-display);
  font-size: 5.6cqw;
  font-weight: var(--bf-weight-display);
  text-transform: uppercase;
}

.chrono {
  margin-block-start: auto;
  color: var(--bf-timer);
  font-family: var(--bf-family-display);
  font-size: 24cqw;
  font-variant-numeric: tabular-nums;
  font-weight: var(--bf-weight-display);
  line-height: 1;
  text-align: center;
}

.scene-flame {
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 0.9cqw var(--bf-callback);
  text-align: center;
}

.flame-pill {
  position: absolute;
  top: 10cqw;
  padding: 2cqw 4.4cqw;
  border-radius: var(--bf-radius-chip);
  background: var(--bf-surface-2);
  font-size: 4.2cqw;
  font-weight: var(--bf-weight-bold);
}

.flame-title {
  display: grid;
  justify-items: center;
  gap: 1cqw;
  color: var(--bf-callback);
  font-family: var(--bf-family-display);
  font-size: 9.2cqw;
  font-weight: var(--bf-weight-medium);
  line-height: 1.08;
  text-transform: uppercase;
}

.typed {
  position: relative;
  display: block;
}

.flame-mech {
  font-family: var(--bf-family-display);
  font-size: 5cqw;
  font-weight: var(--bf-weight-medium);
  text-transform: uppercase;
}

.flame-sweep {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 7%;
  background: var(--bf-callback);
  opacity: 0;
}

.motion {
  position: absolute;
  top: 100%;
  right: 0;
  display: none;
  margin-block-start: var(--bf-space-1);
}