/* Tu préfères and Qui de nous deux played in the member space (template/generator/tu-preferes.php and
   qui-de-nous-deux.php, with $inSpace): their cards in the night of the app, as the cards of Action ou Vérité in the
   space (static/css/espace.css), instead of white. Loaded only there; the pages of the site keep their look. The two
   choices keep their colours (violet as Vérité, pink as Action); what is not chosen sinks into the night. */

/* ---- The deck on the table: backs of the night, with a gold edge ---- */
.tp-page,
.qd-page {
  --td-back:
    radial-gradient(80% 60% at 20% 10%, rgba(255, 217, 138, .16), transparent 60%),
    linear-gradient(160deg, #4f2075 0%, #35134d 55%, #22092e 100%);
}

.tp-page .td-deck span,
.qd-page .td-deck span {
  box-shadow: 0 18px 44px rgba(10, 2, 18, .5), inset 0 0 0 1px rgba(255, 217, 138, .22);
}

.tp-page .td-card__back::before,
.qd-page .td-card__back::before {
  border-color: rgba(255, 217, 138, .45);
}

.tp-page .td-card__back span,
.qd-page .td-card__back span {
  color: #ffd98a;
}

/* ---- The card: deep violet, a fine grain, a pink glow below, a gold frame, white words ---- */
.tp-card .td-card__front,
.qd-card .td-card__front {
  --glow-a: 139, 92, 255;
  --glow-b: 247, 37, 133;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(110% 70% at 0% 0%, rgba(var(--glow-a), .5), rgba(var(--glow-a), 0) 58%),
    radial-gradient(90% 60% at 100% 100%, rgba(var(--glow-b), .3), rgba(var(--glow-b), 0) 62%),
    linear-gradient(160deg, #3d2194 0%, #26115f 55%, #160939 100%);
  box-shadow: 0 30px 70px rgba(10, 2, 18, .6), 0 0 80px rgba(var(--glow-a), .2), inset 0 1px 0 rgba(255, 255, 255, .16);
  color: #ffffff;
}

/* The naughty level glows pink. */
.tp-card.td-card--dare .td-card__front,
.qd-card.td-card--dare .td-card__front {
  --glow-a: 247, 37, 133;
  --glow-b: 255, 150, 90;
}

/* The gold frame, in place of the halo of the cards of the site. */
.tp-card .td-card__front::before,
.qd-card .td-card__front::before {
  inset: 9px;
  width: auto;
  aspect-ratio: auto;
  border: 1px solid rgba(255, 217, 138, .4);
  border-radius: 19px;
  background: none;
  pointer-events: none;
}

.tp-card .td-card-kicker,
.qd-card .td-card-kicker {
  padding: 7px 12px;
  border: 1px solid rgba(255, 217, 138, .55);
  background: rgba(255, 217, 138, .12);
  color: #ffd98a;
  font-size: 11.5px;
  letter-spacing: .14em;
}

.tp-card .td-card__level,
.qd-card .td-card__level {
  color: rgba(255, 255, 255, .62);
}

.tp-card .td-card-text,
.qd-card .td-card-text {
  color: #ffffff;
  text-shadow: 0 2px 22px rgba(10, 2, 18, .35);
}

.tp-card .td-card__brand,
.qd-card .td-card__brand {
  color: rgba(255, 217, 138, .82);
}

.tp-card .td-card__brand::before,
.qd-card .td-card__brand::before {
  color: #ffd98a;
}

/* ---- Tu préfères: « ou » in gold on the seam, the half not chosen sinks into the night ---- */
.tp-or {
  background: radial-gradient(circle at 30% 25%, #4a1d6e, #22092e);
  color: #ffd98a;
  box-shadow: 0 8px 20px rgba(10, 2, 18, .5), 0 0 0 1.5px rgba(255, 217, 138, .6), 0 0 0 6px rgba(255, 217, 138, .12);
}

.tp-half::after {
  background: linear-gradient(150deg, #2e1546 0%, #1c0a2c 100%);
}

.tp-half.is-other {
  color: rgba(255, 255, 255, .58);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

.tp-half.is-other .tp-half__pct {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .74);
}

/* ---- Qui de nous deux: the line and its heart in the night, the side not chosen too ---- */
.qd-link {
  background: rgba(255, 255, 255, .14);
}

.qd-link__heart {
  background: radial-gradient(circle at 30% 25%, #4a1d6e, #22092e);
  color: #ff6fa8;
  box-shadow: 0 8px 18px rgba(10, 2, 18, .5), 0 0 0 1.5px rgba(255, 217, 138, .55), 0 0 0 6px rgba(247, 37, 133, .12);
}

.qd-side::after {
  background: linear-gradient(150deg, #2e1546 0%, #1c0a2c 100%);
}

.qd-side.is-other {
  color: rgba(255, 255, 255, .58);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}