/* Secret Crush Match — the "crush" theme (orchid pink) and the parts only this
   game has: the male/female picker, the "what stays secret" card, the match
   screen and the maker's two numbers. Loaded on this game's pages and for its
   card in the hub; the class comes from `theme` in config/crush_match.php. */
.crush {
  --blue: #c9379d;
  --blue-deep: #9c1f78;
  --line: #eaa6d6;
  --soft: #f8dcef;
}
body.crush {
  background-color: #f9e4f2;
  background-image: url("../shared/sky.svg"), linear-gradient(180deg, #f3cfe8 0%, #f9e5f3 40%, #fdf6fb 100%);
}
.crush .tbtn:not(.tbtn-pink):not(.tbtn-green):not(.tbtn-white) { --face: linear-gradient(180deg, #de62b8, #c9379d); }
.crush .tbtn .arrow { color: var(--blue); }
.crush .tbtn-pink .arrow { color: var(--pink); }
.crush .note::before { background-image: radial-gradient(circle at 12px 12px, #f9e4f2 0 6px, #e3b4d3 6px 8px, transparent 8.5px); }
.crush .review li { background: #fdf3fa; }
.crush .howto li:nth-child(1) .tile { background: #f3def0; }
.crush .field > label { font-size: 17px; }
.crush .field > label small { font-weight: 600; font-size: 13.5px; color: var(--blue-deep); }
.crush .tcard .field + .field { margin-top: 6px; }
.crush .board-count { align-self: center; }

/* — male / female — */
.genders { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gender {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 8px; cursor: pointer; text-align: center;
  font-weight: 700; font-size: 17px;
  background: #fff; border: 3px solid var(--soft); border-radius: 22px;
  box-shadow: 0 5px 0 var(--soft);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.gender input { position: absolute; opacity: 0; pointer-events: none; }
.gender-emoji { font-size: 38px; line-height: 1.1; }
.gender:hover { transform: translateY(-2px); }
.gender.is-male:has(input:checked) { color: #fff; background: #3b9bff; border-color: #fff; box-shadow: 0 5px 0 #1d6fd1; }
.gender.is-female:has(input:checked) { color: #fff; background: #ff5c93; border-color: #fff; box-shadow: 0 5px 0 #d6336c; }
.gender:has(input:checked)::after {
  content: "✓"; position: absolute; top: -10px; right: -6px;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-size: 16px; color: #fff; background: var(--ink); border: 3px solid #fff;
}
.gender:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }

/* — the promise card — */
.promise { background: #fffafd; border-style: dashed; }
.promise h2 { font-size: 19px; }
.promise ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15.5px; line-height: 1.45; color: var(--ink-soft); }
.promise b { color: var(--ink); }

/* — match screen — */
.match-pair { display: flex; align-items: center; justify-content: center; }
.match-pair .avatar { width: 124px; height: 124px; animation: bob 2.6s ease-in-out infinite; }
.match-pair .avatar:last-child { animation-delay: -1.3s; }
.match-heart { margin: 0 -14px; z-index: 1; font-size: 54px; line-height: 1; animation: crush-beat 1.2s ease-in-out infinite; }
.result-top p small { display: block; font-size: 14px; color: var(--ink-soft); }
@keyframes crush-beat { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.22); } 40% { transform: scale(1); } 60% { transform: scale(1.12); } }

/* — the maker's two numbers — */
.crush-stats { flex-direction: row; gap: 0; padding: 18px 8px; text-align: center; }
.crush-stats div { flex: 1; display: flex; flex-direction: column; }
.crush-stats div + div { border-left: 2px dashed var(--soft); }
.crush-stats strong { font-size: 40px; line-height: 1.1; color: var(--blue-deep); }
.crush-stats span { font-size: 15px; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .match-pair .avatar, .match-heart { animation: none; }
  .gender { transition: none; }
}