.match-page { max-width: 42rem; padding-top: 0; }
.match-page .page-content h1 { font-size: clamp(2.4rem, 7vw, 3.7rem); margin-bottom: .65rem; }
.match-page .page-content p { max-width: 27rem; margin: 0 auto 1.6rem; text-align: center; font-size: 1rem; line-height: 1.6; text-wrap: balance; }
.love-match { max-width: 30rem; margin: 0 auto; text-align: center; }
.love-match [hidden] { display: none !important; }
.match-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.match-card { min-width: 0; min-height: 6.3rem; aspect-ratio: 4 / 5; padding: .6rem .3rem; border: 1px solid #ad183f45; border-radius: .9rem; color: var(--ink); background: #fff7f8; cursor: pointer; touch-action: manipulation; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .55rem; box-shadow: 0 .2rem .5rem #61162b08; transition: background .15s, border-color .15s; }
.match-card:not(.is-open) { background: repeating-linear-gradient(135deg, #fff7f8, #fff7f8 10px, #fceaf0 10px, #fceaf0 11px); }
.match-card:hover:not([aria-disabled="true"]) { border-color: var(--red); }
.match-card:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.match-symbol { font: 2rem/1 Georgia, serif; color: var(--red); }
.match-label { font: 600 .8rem/1.3 Arial, sans-serif; overflow-wrap: anywhere; }
.match-card.is-matched { background: #f4b9cb; border-color: var(--red); cursor: default; }
.match-card.is-matched .match-label::after { content: ' ✓'; }
.match-status { min-height: 4.5em; margin-bottom: 1rem; }
@media (max-width: 480px) {
  .match-board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .match-card { aspect-ratio: 1; }
}
@media (prefers-reduced-motion: reduce) { .match-card { transition: none; } }