/* Pages for Start here, Flip archive and Which is bigger? */
header.play-hero { padding: 48px 0 10px; text-align: center; border-bottom: 0; }
header.play-hero h1 { max-width: none; margin: 4px auto 0; font-size: clamp(34px, 5vw, 56px); }
header.play-hero .intro { margin: 14px auto 0; max-width: 36rem; text-wrap: balance; }
.play-page { max-width: 820px; margin: 0 auto; padding-top: 24px; }
.play-kind { color: #8F5E00; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.play-more { text-align: center; margin-top: 28px; }
.play-more a { color: #1A3E6E; font-weight: 700; }

.start-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.start-step { display: grid; grid-template-columns: 44px 170px 1fr; gap: 18px; align-items: center; padding: 14px 18px 14px 14px; border: 1px solid #d5cfbf; border-radius: 16px; background: #fbf9f4; color: #172536; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease; }
.start-step:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(23, 37, 54, 0.08); }
.start-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #1A3E6E; color: #fff; font-weight: 800; }
.start-step img { width: 170px; height: 100px; object-fit: cover; object-position: top; border-radius: 8px; background: #fff; }
.start-copy { display: grid; gap: 4px; }
.start-copy strong { font-size: 1.1rem; line-height: 1.25; color: #172536; }
.start-why { color: #536474; font-size: .92rem; line-height: 1.45; }

.flip-archive { display: grid; gap: 16px; }
.archive-flip { max-width: 760px; margin: 0 auto; width: 100%; }

.bigger { max-width: 680px; margin: 0 auto; padding: 28px 24px; border: 1px solid #bfd8d4; border-radius: 18px; background: #eaf5f3; text-align: center; }
.bigger-count { margin: 0 0 6px; color: #536474; font-size: .8rem; font-weight: 700; }
.bigger-q { margin: 0 0 16px; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; color: #172536; }
.bigger-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bigger-choice { appearance: none; font: inherit; font-size: 1.05rem; font-weight: 750; min-height: 84px; padding: 14px; border: 1.5px solid #9fc4bf; border-radius: 14px; background: #fff; color: #172536; cursor: pointer; }
.bigger-choice:hover:not(:disabled) { border-color: #1A3E6E; }
.bigger-choice:disabled { cursor: default; opacity: .6; }
.bigger-choice.selected { opacity: 1; border-color: #07858d; }
.bigger-choice.is-answer { opacity: 1; background: #1A3E6E; border-color: #1A3E6E; color: #fff; }
.bigger-answer { margin-top: 16px; }
.bigger-answer p { margin: 0 auto 12px; max-width: 34rem; line-height: 1.5; color: #172536; }
.bigger-answer[hidden] { display: none; }
.bigger-score { margin: 14px 0 0; color: #536474; font-size: .85rem; min-height: 1.2em; }
.flip-actions { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.flip-share { appearance: none; border: 1.5px solid #1A3E6E; border-radius: 999px; background: transparent; color: #1A3E6E; font: inherit; font-size: .85rem; font-weight: 750; padding: 7px 14px; cursor: pointer; }
.flip-share:hover { background: #1A3E6E; color: #fff; }
.daily-reveal { color: #172536; font-weight: 750; text-decoration: none; }

@media (max-width: 640px) {
  .start-step { grid-template-columns: 36px 1fr; }
  .start-step img { display: none; }
  .start-num { width: 34px; height: 34px; }
  .bigger { padding: 22px 14px; }
}
.bigger .daily-reveal { position: static !important; display: inline-block !important; }