/* Qui de nous deux (template/generator/qui-de-nous-deux.php, static/js/qui-de-nous-deux.js), on the table of the
   online Truth or Dare game (static/css/truth-dare-game.css): the card of a question and, at its foot, the two of you
   face to face, Moi (violet, as Truth) and Toi (pink, as Dare), joined by a heart. Once a side is touched, or the card
   slid towards it, the side picked stays bright and the other one fades; each shows the share of players who gave its
   answer, and the line between them shares itself out, the heart sliding to the border. The verdict under the card
   and the cards below the game come from Tu préfères (static/css/tu-preferes.css). */

/* ---- The card: the question, then the two of you ---- */
/* Clipped rather than hidden, so that nothing (a focus, a script) can scroll the card's contents sideways. */
.qd-card__front {
  gap: 10px;
  overflow: clip;
}

/* The two of you take the place of the sign in the background. */
.qd-card .td-card__front::after {
  content: none;
}

/* The question is the star of the card. Long words (German, Greek) break with a hyphen where the language allows. */
.qd-question {
  min-height: 0;
  font-size: clamp(1.45rem, 6.6vw, 2.05rem);
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Japanese breaks lines between phrases where the browser knows how. */
.qd-page:lang(ja) .qd-question,
.qd-page:lang(ja) .tp-verdict {
  word-break: auto-phrase;
}

.qd-duel {
  display: flex;
  align-items: center;
  padding: 2px 4px 4px;
}

.qd-side {
  position: relative;
  isolation: isolate;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s var(--td-ease), color .45s ease, box-shadow .45s ease;
}

.qd-side--me {
  background:
    radial-gradient(80% 70% at 25% 15%, rgba(255, 255, 255, .24), transparent 60%),
    linear-gradient(150deg, #6c4dff 0%, #9b3dff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 24px rgba(108, 77, 255, .32);
}

.qd-side--you {
  background:
    radial-gradient(80% 70% at 75% 85%, rgba(255, 255, 255, .18), transparent 60%),
    linear-gradient(150deg, #e0156f 0%, #f0503a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 24px rgba(240, 40, 100, .32);
}

.qd-side:hover {
  transform: translateY(-2px);
}

.qd-side:active {
  transform: scale(.95);
}

.qd-side:focus-visible {
  outline: 3px solid rgba(255, 185, 56, .95);
  outline-offset: 3px;
}

.qd-side__name {
  display: block;
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-shadow: 0 1px 10px rgba(42, 15, 51, .25);
  transition: font-size .4s var(--td-ease), text-shadow .45s ease;
}

/* The line that joins the two of you, and the heart on it. */
.qd-link {
  position: relative;
  flex: 1;
  height: 6px;
  margin: 0 -3px;
  border-radius: 999px;
  background: #efe7f5;
}

.qd-link__me,
.qd-link__you {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  transition: width .7s var(--td-ease);
}

.qd-link__me {
  left: 0;
  border-radius: 999px 0 0 999px;
  background: linear-gradient(90deg, #6c4dff, #9b3dff);
}

.qd-link__you {
  right: 0;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, #e0156f, #f0503a);
}

.qd-link__heart {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: #fff;
  color: var(--td-pink);
  font-size: 1.2rem;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(59, 22, 63, .2), 0 0 0 5px rgba(247, 37, 133, .09);
  transition: left .7s var(--td-ease);
  animation: qd-beat 1.8s ease-in-out infinite;
}

@keyframes qd-beat {
  0%, 60%, 100% { transform: scale(1); }
  15% { transform: scale(1.14); }
  30% { transform: scale(1.04); }
  45% { transform: scale(1.1); }
}

/* While the card is slid, the side it goes to steps forward and the heart leans towards it. */
.qd-duel[data-lean="me"] .qd-side--me,
.qd-duel[data-lean="you"] .qd-side--you {
  transform: scale(1.08);
}

.qd-duel[data-lean="me"] .qd-link__heart {
  left: 34%;
}

.qd-duel[data-lean="you"] .qd-link__heart {
  left: 66%;
}

/* ---- The answer: the side picked stays bright, the other one turns lilac grey ---- */
.qd-card[data-step="reveal"] .qd-side {
  cursor: default;
}

.qd-card[data-step="reveal"] .qd-side:hover,
.qd-card[data-step="reveal"] .qd-side:active {
  transform: none;
}

.qd-side.is-mine {
  animation: qd-picked .5s var(--td-ease);
}

.qd-side--me.is-mine {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 24px rgba(108, 77, 255, .36), 0 0 0 6px rgba(108, 77, 255, .16), 0 0 30px rgba(155, 61, 255, .45);
}

.qd-side--you.is-mine {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 24px rgba(240, 40, 100, .36), 0 0 0 6px rgba(240, 40, 100, .14), 0 0 30px rgba(247, 37, 133, .45);
}

@keyframes qd-picked {
  40% { transform: scale(1.12); }
}

/* A tick on the side picked, in its colour. */
.qd-side.is-mine::before {
  content: "\2713\FE0E";
  position: absolute;
  z-index: 1;
  top: -2px;
  right: -2px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: #6c4dff;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(59, 22, 63, .28);
  animation: qd-tick .4s var(--td-ease) .12s backwards;
}

.qd-side--you.is-mine::before {
  color: #e0156f;
}

@keyframes qd-tick {
  from { opacity: 0; scale: .3; }
}

/* The grey of the other side is a layer under its words, so that it fades in. */
.qd-side::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(150deg, #f3eff7 0%, #e6dfee 100%);
  opacity: 0;
  transition: opacity .45s ease;
}

.qd-side.is-other {
  color: #6b5a74;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 16px rgba(59, 22, 63, .1);
}

.qd-side.is-other::after {
  opacity: 1;
}

.qd-side.is-other .qd-side__name {
  text-shadow: none;
}

.qd-card[data-step="reveal"] .qd-link__heart {
  animation: none;
}

/* The share of players, under the name once the answers are in: the name glides up to make room. */
.qd-side__pct {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-height: 0;
  overflow: hidden;
  font-size: 1.3rem;
  font-weight: 950;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  scale: .8;
  transition: max-height .4s var(--td-ease), opacity .3s ease .1s, scale .4s var(--td-ease) .1s;
}

.qd-card.has-counts .qd-side__name {
  font-size: .92rem;
}

.qd-card.has-counts .qd-side__pct {
  max-height: 1.6em;
  opacity: 1;
  scale: 1;
}

/* « Votre réponse », for screen readers, on the side picked. */
.qd-side__mine {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.qd-side:not(.is-mine) .qd-side__mine {
  display: none;
}

/* The end of a level: the two of you with the times each was named, the one named most with a star; without a single
   answer, the words of the end alone. */
.qd-card[data-step="end"]:not(.has-counts) .qd-duel {
  display: none;
}

.qd-card[data-step="end"] .qd-side {
  cursor: default;
}

.qd-card[data-step="end"] .qd-side.is-mine::before {
  content: "\2605\FE0E";
}

.qd-card[data-step="end"] .qd-link {
  background: rgba(255, 255, 255, .22);
}

/* The verdict under the card keeps the height of two lines, whatever its words: the card never moves when they change. */
.qd-page .tp-verdict {
  display: grid;
  place-items: center;
  min-height: 3.1rem;
}

/* The next question comes by itself: once the answer shows, the button fills like a progress bar, in the colour of
   the answer (static/js/qui-de-nous-deux.js moves it, frame by frame). */
.qd-page .td-next-button {
  isolation: isolate;
}

.qd-next-fill {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #e0156f, #f0503a);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.td-next-button[data-side="me"] .qd-next-fill {
  background: linear-gradient(90deg, #6c4dff, #9b3dff);
}

.td-next-button.is-counting {
  border-color: rgba(255, 255, 255, .34);
}

/* Short screens: smaller faces, the card keeps to the essentials. */
@media (max-height: 720px) {
  .qd-question {
    font-size: clamp(1.25rem, 5.8vw, 1.65rem);
  }

  .qd-side {
    width: 82px;
    height: 82px;
  }

  .qd-side__name {
    font-size: 1.22rem;
  }

  .qd-side__pct {
    font-size: 1.14rem;
  }

  .qd-link__heart {
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    font-size: 1.05rem;
  }
}

@media (max-width: 599px) and (max-height: 720px) {
  .qd-card .td-card__brand {
    display: none;
  }
}

/* The name of the game on the card stays on one line: tighter on phones, and alone under 360 px, where the level it
   repeats is already on its tab (the Greek and German names are the longest). */
.qd-card .td-card-kicker {
  flex: none;
  white-space: nowrap;
}

/* The level beside it gives way first, down to an ellipsis (Greek, between 360 and 400 px). */
.qd-card .td-card__level {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 400px) {
  .qd-card .td-card-kicker {
    letter-spacing: .04em;
  }
}

/* Narrow phones: the faces shrink a little, the line between them stays visible. */
@media (max-width: 359px) {
  .qd-card .td-card__level {
    display: none;
  }

  .qd-side {
    width: 76px;
    height: 76px;
  }
}

/* Wider screens: without the two buttons of Truth or Dare under it, the card can take a little more of the height. */
@media (min-width: 600px) {
  .qd-page .td-card-area {
    height: clamp(300px, calc(100svh - 350px), 440px);
  }

  .qd-page.td-has-sticky .td-card-area {
    height: clamp(280px, calc(100svh - 460px), 440px);
  }

  .qd-question {
    font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  }

  .qd-duel {
    padding: 4px 18px 6px;
  }

  .qd-side {
    width: 104px;
    height: 104px;
  }

  .qd-side__name {
    font-size: 1.5rem;
  }

  .qd-card.has-counts .qd-side__name {
    font-size: 1rem;
  }

  .qd-side__pct {
    font-size: 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qd-side,
  .qd-side::after,
  .qd-side__name,
  .qd-side__pct,
  .qd-link__me,
  .qd-link__you,
  .qd-link__heart {
    transition: none;
  }

  .qd-side.is-mine,
  .qd-side.is-mine::before,
  .qd-link__heart {
    animation: none;
  }
}