/* Jeu « Tu préfères » (/guides/tu-preferes/) : écran du haut, niveaux, carte de vote, résultats, bilan et défi entre potes. */

/* Carte Vérité de l'app redessinée en HTML : le texte reste net et lisible à la taille du téléphone. */
.tp-hero-media {
  container-type: inline-size;
  margin-bottom: 56px;
}

/* La bulle passe sous le téléphone pour laisser voir les boutons Raté et Réussi. */
.tp-hero-media figcaption {
  bottom: -56px;
  width: 190px;
}

.tp-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  aspect-ratio: 1000 / 2046;
  overflow: hidden;
  padding: 1.7em 1.2em 1.4em;
  border-radius: 23px;
  background:
    radial-gradient(80% 34% at 50% 54%, rgba(236, 72, 153, 0.3), transparent 72%),
    radial-gradient(110% 30% at 50% 0%, rgba(124, 58, 237, 0.42), transparent 75%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 205' fill='none' stroke='%23fff' stroke-opacity='.12' stroke-width='.45'%3E%3Cpath d='M7 22l9 7-8 4zM64 44l13-8 7 18 10 5M9 70l9-11 5 10M80 104l9-5 6 11M24 118l9 12 10-4M6 150l12 4 4 14M60 158l12-8 10 16M38 190l14-6 12 8'/%3E%3Cg fill='%23fff' fill-opacity='.22' stroke='none'%3E%3Ccircle cx='16' cy='29' r='1'/%3E%3Ccircle cx='77' cy='36' r='1'/%3E%3Ccircle cx='84' cy='54' r='1'/%3E%3Ccircle cx='18' cy='59' r='1'/%3E%3Ccircle cx='89' cy='99' r='1'/%3E%3Ccircle cx='33' cy='130' r='1'/%3E%3Ccircle cx='18' cy='154' r='1'/%3E%3Ccircle cx='72' cy='150' r='1'/%3E%3Ccircle cx='52' cy='184' r='1'/%3E%3C/g%3E%3C/svg%3E")
      center / 100% auto no-repeat,
    #171d29;
  color: var(--white);
  font-size: 10px;
  font-size: 5.1cqi;
  line-height: 1.15;
  text-align: center;
}

.tp-screen-type {
  font-size: 1.5em;
  font-weight: 700;
}

.tp-screen-player {
  margin-top: 0.25em;
  font-size: 3.1em;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-shadow: 0 0.12em 0.4em rgba(124, 58, 237, 0.55);
}

.tp-screen-question {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45em;
  margin: auto 0;
  font-size: 2.05em;
  font-weight: 800;
  text-wrap: balance;
}

.tp-screen-lead {
  font-size: 0.6em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}

.tp-screen-or {
  padding: 0.3em 0.9em;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--violet), var(--fuchsia));
  font-size: 0.5em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tp-screen-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8em;
  width: 100%;
}

.tp-screen-buttons span {
  padding: 0.85em 0;
  border-radius: 0.9em;
  background: #c4078e;
  font-size: 1.3em;
  font-weight: 700;
}

.tp-game {
  margin: 28px 0 36px;
  padding: 24px;
  border: 1px solid rgba(196, 181, 253, 0.28);
  border-radius: 24px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(124, 58, 237, 0.28), transparent 60%),
    radial-gradient(120% 90% at 100% 100%, rgba(236, 72, 153, 0.2), transparent 60%),
    rgba(15, 10, 30, 0.72);
  scroll-margin-top: 90px;
}

.tp-game-head h2 {
  margin: 4px 0 18px;
}

.tp-total {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -6px 0 18px;
  color: #f9a8d4;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tp-total::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--fuchsia);
  box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.2);
}

.tp-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.tp-level {
  padding: 9px 14px;
  border: 1px solid var(--ring);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition:
    background 0.15s var(--ease),
    border-color 0.15s var(--ease);
}

.tp-level:hover {
  background: rgba(255, 255, 255, 0.1);
}

.tp-level[aria-pressed="true"] {
  border-color: transparent;
  background: var(--violet);
}

.tp-level-adult {
  border-color: rgba(236, 72, 153, 0.55);
}

.tp-level-adult[aria-pressed="true"] {
  background: linear-gradient(90deg, var(--violet), var(--fuchsia));
}

.tp-consent,
.tp-challenge {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid rgba(236, 72, 153, 0.4);
  border-radius: 16px;
  background: rgba(131, 24, 67, 0.25);
}

.tp-consent-title {
  margin: 0 0 10px;
  font-weight: 700;
}

.tp-consent-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 14px;
  color: var(--muted);
  cursor: pointer;
}

.tp-consent-check input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--fuchsia);
}

.tp-consent .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.tp-challenge {
  border-color: rgba(196, 181, 253, 0.4);
  background: rgba(76, 29, 149, 0.3);
  font-weight: 600;
}

.tp-card {
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: rgba(30, 41, 59, 0.55);
}

.tp-progress {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}

.tp-ask {
  margin: 0 0 16px;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 800;
}

.tp-options {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 12px;
}

.tp-or {
  align-self: center;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.tp-option {
  --tp-share: 0%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 132px;
  padding: 20px 18px;
  overflow: hidden;
  border: 2px solid rgba(196, 181, 253, 0.35);
  border-radius: 18px;
  background: rgba(124, 58, 237, 0.14);
  color: var(--white);
  font: inherit;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition:
    transform 0.15s var(--ease),
    border-color 0.2s var(--ease),
    background 0.2s var(--ease),
    opacity 0.2s var(--ease);
}

.tp-option:not([disabled]):hover {
  border-color: var(--fuchsia);
  background: rgba(124, 58, 237, 0.24);
}

.tp-option:not([disabled]):active {
  transform: scale(0.98);
}

.tp-option[disabled] {
  cursor: default;
}

.tp-option-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--tp-share);
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.45), rgba(236, 72, 153, 0.45));
  transition: width 0.9s var(--ease);
}

.tp-option.no-anim .tp-option-fill {
  transition: none;
}

.tp-option-text,
.tp-option-stat,
.tp-option-count {
  position: relative;
}

.tp-option-stat {
  font-size: 1.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.tp-option-count {
  margin-top: -6px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tp-option-stat:empty,
.tp-option-count:empty {
  display: none;
}

.tp-option.is-chosen {
  border-color: var(--fuchsia);
  box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.18);
}

.tp-option.is-chosen .tp-option-text::after {
  content: " ✓";
  color: #f9a8d4;
}

.tp-option.is-other {
  opacity: 0.85;
}

.tp-option.is-other .tp-option-fill {
  background: rgba(148, 163, 184, 0.3);
}

.tp-verdict {
  min-height: 1.4em;
  margin: 16px 0 0;
  font-weight: 600;
}

.tp-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.tp-summary {
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: rgba(30, 41, 59, 0.55);
}

.tp-summary h3 {
  margin: 4px 0 8px;
  font-size: 1.5rem;
}

.tp-summary h3:focus {
  outline: none;
}

.tp-share {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.tp-share .btn {
  justify-self: start;
}

.tp-share-done {
  margin: 0;
  color: #f9a8d4;
  overflow-wrap: anywhere;
}

.tp-summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.tp-link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.tp-noscript {
  margin: 0;
  color: var(--muted);
}

.tp-divide {
  margin-top: 22px;
}

.tp-divide h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.tp-divide ol {
  margin: 0;
  padding-left: 1.2em;
  color: var(--muted);
}

.tp-divide li {
  margin: 4px 0;
}

.tp-list-stat {
  margin: 0;
  color: #f9a8d4;
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tp-item {
  scroll-margin-top: 90px;
}

/* La liste complète, repliée sous le jeu : lisible sans JavaScript et par les moteurs, discrète pour les joueurs. */
.tp-all {
  margin: 40px 0 0;
  border: 1px solid rgba(196, 181, 253, 0.22);
  border-radius: 20px;
  background: rgba(15, 10, 30, 0.45);
  scroll-margin-top: 90px;
}

.tp-all-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: center;
  padding: 20px 22px;
  border-radius: 20px;
  cursor: pointer;
  list-style: none;
}

.tp-all-summary::-webkit-details-marker {
  display: none;
}

.tp-all-summary > * {
  grid-column: 1;
}

.tp-all-summary::after {
  content: "+";
  display: grid;
  grid-column: 2;
  grid-row: 1 / span 3;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.3);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.tp-all[open] > .tp-all-summary::after {
  content: "−";
}

.tp-all-summary:hover::after {
  background: var(--violet);
}

.tp-all-summary h2 {
  margin: 0;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
}

.tp-all-hint {
  color: var(--muted);
  font-size: 0.95rem;
}

.tp-all > .prompt-section,
.tp-all > .level-transition {
  margin-right: 22px;
  margin-left: 22px;
}

.tp-all > :last-child {
  margin-bottom: 24px;
}

.tp-item:target {
  border-color: var(--fuchsia);
}

[hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  .tp-game {
    padding: 18px 14px;
  }

  .tp-card,
  .tp-summary {
    padding: 18px 14px;
  }

  .tp-options {
    grid-template-columns: 1fr;
  }

  .tp-or {
    justify-self: center;
  }

  .tp-option {
    min-height: 104px;
  }

  .tp-all-summary {
    padding: 16px 14px;
  }

  .tp-all > .prompt-section,
  .tp-all > .level-transition {
    margin-right: 12px;
    margin-left: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tp-option,
  .tp-option-fill,
  .tp-level {
    transition: none;
  }
}