/* Touch-friendly layouts, including narrow phones and landscape keyboards. */
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
button, .tiny-link, .text-button, .icon-button, .close { min-height: 44px; }
.close { min-width: 44px; }
.view, .intro-copy, .memory, .envelope { min-width: 0; }
.voucher-details { max-width: 540px; margin: 0 auto 23px; }
.voucher-details h3 { font-size: 25px; margin-bottom: 8px; }
.voucher-details p { font-size: 14px; line-height: 1.7; color: #e0e6d7; margin-bottom: 6px; }
.voucher-details a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; text-underline-offset: 4px; }
.tiny-link { display: flex; align-items: center; justify-content: center; }
dialog { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* Explicit viewport bounds prevent intrinsic button widths expanding Safari dialogs. */
dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  box-sizing: border-box;
  min-width: 0;
  width: min(490px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  overflow-x: hidden;
}
dialog > *, #quiz-options > * { min-width: 0; max-width: 100%; }
#quiz-options { grid-template-columns: minmax(0, 1fr); }
.quiz-option, #quiz-next, dialog h2, dialog p {
  white-space: normal;
  overflow-wrap: anywhere;
}
.quiz-option { width: 100%; }
body:has(dialog[open]) { overflow: hidden; }
.check { min-height: 48px; }
@media (max-width: 800px) {
  .topbar { gap: 12px; }
  .brand-caption { letter-spacing: 1.4px; }
  .intro { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .intro h1 { font-size: clamp(40px,7.6vw,65px); }
  .photo-index { right: -20px; }
  footer { justify-content: center; text-align: center; gap: 8px 20px; }
  footer > span:nth-child(2) { flex-basis: 100%; font-size: 11px; }
  .text-button { font-size: 12px; padding: 10px; }
}
@media (max-width: 600px) {
  .topbar { margin: 0; padding: max(10px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 10px max(18px,env(safe-area-inset-left)); height: auto; min-height: 78px; }
  .wordmark { font-size: 30px; flex-shrink: 1; }
  .brand-caption { font-size: 8px; max-width: 108px; line-height: 1.6; margin-left: 9px; }
  .top-actions { flex-shrink: 0; gap: 0; }
  .icon-button { gap: 5px; padding: 9px 11px; }
  .icon-button span { font-size: 10px; letter-spacing: 0; }
  main { min-height: calc(100svh - 210px); padding: 30px max(22px,env(safe-area-inset-left)); }
  .intro { grid-template-columns: 1fr; }
  .intro h1 { font-size: clamp(39px,10.5vw,62px); line-height: 1.08; letter-spacing: -1.5px; }
  .intro .lede, .choose .lede { font-size: 14px; line-height: 1.75; }
  .intro .primary { width: 100%; min-width: 0; gap: 14px; }
  .memory { position: relative; right: auto; bottom: auto; width: min(65%,230px); margin: 16px auto 10px; opacity: 1; z-index: auto; }
  .memory img { height: 240px; }
  .memory figcaption { font-size: 13px; }
  .password-gate { min-height: 100dvh; padding: max(24px,env(safe-area-inset-top)) 22px max(24px,env(safe-area-inset-bottom)); }
  .password-card { padding: 16px 0; }
  .password-card h1 { font-size: clamp(40px,11vw,62px); line-height: 1.08; letter-spacing: -1.2px; }
  .password-card .lede { font-size: 14px; }
  .password-card label { font-size: 13px; }
  .password-card input { font-size: 20px; }
  .primary, .secondary { font-size: 14px; min-height: 52px; padding: 15px 18px; gap: 16px; }
  .fine { font-size: 12px; opacity: .8; }
  .eyebrow, .choose .eyebrow, .reveal .eyebrow { font-size: 10px; letter-spacing: 1.6px; line-height: 1.7; }
  .choose h2, .reveal h2 { font-size: clamp(33px,9.5vw,48px); line-height: 1.12; }
  .round-label { font-size: 10px; letter-spacing: 1px; }
  .envelopes { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 34px 2px 29px; }
  .envelope { aspect-ratio: .57; padding: 0; }
  .envelope .number { font-size: 11px; top: 17px; }
  .envelope .label { font-size: clamp(16px,4.7vw,23px); bottom: 33px; }
  .envelope .hint { font-size: 7px; letter-spacing: .6px; bottom: 19px; }
  .seal { width: 44px; height: 44px; margin-top: 0; }
  .voucher-frame { margin: 24px 0 18px; }
  .voucher-details h3 { font-size: 27px; }
  .voucher-details p { font-size: 15px; }
  .claim-note { font-size: 13px; }
  .status-pill { font-size: 10px; letter-spacing: .8px; }
  .actions { flex-direction: column; }
  .actions > button { width: 100%; }
  dialog { width: calc(100vw - 32px); max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 36px 20px 24px; }
  dialog h2, #quiz-title { font-size: clamp(30px,8.6vw,40px); }
  dialog p, dialog .small, .rules-list { font-size: 14px; line-height: 1.6; }
  dialog .fine { font-size: 12px; }
  dialog .eyebrow { font-size: 9px; letter-spacing: 1.4px; }
  .quiz-option { font-size: 15px; min-height: 52px; padding: 14px; }
  #quiz-feedback { font-size: 19px; }
  .check { font-size: 14px; gap: 12px; padding: 13px 0; }
  .check input { width: 22px; height: 22px; }
  .close { top: 5px; right: 5px; }
  footer { margin: 0 20px; padding-bottom: max(16px,env(safe-area-inset-bottom)); }
}
@media (hover: none) {
  .envelope:hover { transform: rotate(var(--angle)); box-shadow: 0 22px 35px #0d1e214d; }
  .envelope:active { transform: scale(.97); }
  .primary:not(:disabled):hover { transform: none; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .password-gate { align-items: start; }
  .password-card { padding-top: 10px; }
  .password-card h1 { font-size: 38px; }
  .password-card .dialog-symbol { display: none; }
  dialog { margin: 10px auto; max-height: calc(100dvh - 20px); }
  main { min-height: 0; }
}