/* Couple & Bestie Test — the "love" theme. Same layout as shared/games.css,
   rose-coloured. Loaded on this game's pages and for its card in the hub; the
   class comes from `theme` in config/quiz_games.php. */
.love {
  --blue: #ff3d77;
  --blue-deep: #c81f58;
  --line: #ff9dbd;
  --soft: #ffd3e2;
  --pink: #8f5cff;
  --pink-deep: #6b35c9;
}
body.love {
  background-color: #ffe3ec;
  background-image: url("../shared/sky.svg"), linear-gradient(180deg, #ffd0e0 0%, #ffe6ee 40%, #fff6f9 100%);
}
.love .tbtn:not(.tbtn-pink):not(.tbtn-green):not(.tbtn-white) { --face: linear-gradient(180deg, #ff7aa2, #ff3d77); }
.love .tbtn-pink { --face: linear-gradient(180deg, #b594ff, #8f5cff); }
.love .tbtn .arrow { color: var(--blue); }
.love .tbtn-pink .arrow { color: var(--pink); }
.love .note { background-color: #fffafc; }
.love .note::before { background-image: radial-gradient(circle at 12px 12px, #ffe3ec 0 6px, #f4b6cb 6px 8px, transparent 8.5px); }
.love .progress { background: #ffe3ec; }
.love .board-rank { background: #ffe3ec; }
.love .board-row.is-me { background: #fff3f7; }
.love .choice:has(input:checked) { background: #fff0f5; }
.love .review li { background: #fff6f9; }
.love .howto li:nth-child(2) .tile { background: #ffe1ec; }
.love .howto li:nth-child(1) .tile { background: #efe6ff; }

/* The couple drawing is wider than the animal faces: give it more room and
   the thought bubble a little less. */
.love .hero-top { gap: 0; }
.love .hero-top .mascot { width: min(55vw, 240px); margin-right: -10px; }
.love.toon .hero-top .bubble { max-width: 158px; padding: 20px 14px; font-size: 17px; }
.game-card .avatar.couple { width: 172px; height: 129px; margin-top: 0; }
@media (min-width: 620px) {
  .love.toon .hero-top .bubble { max-width: 220px; font-size: 21px; }
}