:root {
  color-scheme: light;
  --red: #e42619;
  --red-dark: #7b0908;
  --cream: #fffaf0;
  --ink: #24130f;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #eee8e4; }
body { margin: 0; min-height: 100svh; color: var(--ink); background: #eee8e4; }
button, input { font: inherit; }
button { touch-action: manipulation; }
.is-hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

#app { position: relative; width: min(100%, 520px); min-height: 100svh; margin: 0 auto; overflow: hidden; background: white; box-shadow: 0 0 44px rgba(44, 18, 10, .16); }
.loading-view { min-height: 100svh; background: white; }
.page { min-height: 100svh; }

/* The source image is clipped to artwork only. The keypad below is real DOM, so there is one interaction layer. */
.hero-crop { position: relative; width: 100%; aspect-ratio: 1280 / 1370; overflow: hidden; background: #e52b1b; }
.hero-crop img { display: block; width: 100%; height: auto; transform: translateY(-10.3%); }
.code-card { position: relative; z-index: 2; margin-top: -14px; padding: 22px 18px calc(24px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; background: #fff0d8; }
.code-card h1 { margin: 0 0 16px; color: #17100c; font-size: 21px; font-weight: 700; letter-spacing: .18em; text-align: center; }
.code-input { display: block; width: 76%; height: 62px; margin: 0 auto 18px; padding: 0 18px; border: 2px solid #b7130b; border-radius: 8px; color: #fff; background: linear-gradient(#c60000, #a40000); box-shadow: inset 0 2px 3px rgba(70, 0, 0, .32); font-size: 30px; font-weight: 700; letter-spacing: .42em; text-align: center; }
.code-input:focus-visible, button:focus-visible { outline: 3px solid #246dcd; outline-offset: 3px; }
.keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.keypad button { min-height: 68px; border: 1px solid #b51b12; border-radius: 12px; color: white; background: linear-gradient(#f23b25, #e22216); box-shadow: 0 4px 0 #a81710; font-size: 27px; font-weight: 700; cursor: pointer; }
.keypad button:active { transform: translateY(2px); box-shadow: 0 2px 0 #a81710; }
.keypad .key-text { font-size: 20px; }

.page-choice { position: relative; padding: max(24px, env(safe-area-inset-top)) 14px calc(28px + env(safe-area-inset-bottom)); background: radial-gradient(circle at 50% 22%, #32100e 0, #190303 46%, #080000 100%); }
.choice-backdrop { position: relative; min-height: 165px; padding-top: 10px; color: white; text-align: center; background: linear-gradient(180deg, rgba(130, 20, 15, .34), transparent); }
.choice-backdrop::before { content: "口味王\A会员中心"; position: absolute; top: 4px; left: 8px; white-space: pre; color: #ff2c22; font-size: 22px; font-weight: 900; line-height: 1.05; text-align: left; text-shadow: 0 2px 0 #fff; }
.choice-backdrop::after { content: "活动\A规则"; position: absolute; top: 28px; right: -14px; display: grid; width: 78px; height: 86px; place-items: center; white-space: pre; border: 2px solid #fff; border-right: 0; border-radius: 50% 0 0 50%; color: #fff; font-size: 17px; line-height: 1.25; }
.choice-backdrop p, .choice-backdrop h1 { display: none; }
.choice-sheet { position: relative; padding: 54px 10px 20px; border-radius: 20px; background: transparent; }
.choice-sheet > h2 { position: absolute; top: -6px; left: 50%; margin: 0; transform: translateX(-50%); color: #fff; font-size: clamp(42px, 13vw, 60px); text-shadow: 0 4px 0 #e78200, 0 0 12px #ffba32; white-space: nowrap; }
.fixed-reward-note { margin: 0 4px 14px; color: rgba(255,244,213,.68); font-size: 12px; line-height: 1.5; text-align: center; }
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.choice-grid button { min-height: 176px; padding: 12px 8px; border: 2px solid #fff; border-radius: 22px; color: #e9231c; background: linear-gradient(145deg, #fff9df, #ffe9c0); box-shadow: 0 3px 0 #bfa98a, 0 10px 16px rgba(0,0,0,.35), inset 0 0 0 1px rgba(210, 140, 80, .4); cursor: pointer; }
.choice-grid.is-covered button { position: relative; overflow: hidden; border-color: #fff; background: linear-gradient(145deg, #fff9df, #ffe9c0); box-shadow: 0 3px 0 #bfa98a, 0 10px 16px rgba(0,0,0,.35), inset 0 0 0 1px rgba(210, 140, 80, .4); }
.choice-grid.is-covered button::before { content: "口味王"; position: absolute; inset: 0; display: grid; place-items: center; color: #ed211b; font-family: "Microsoft YaHei", sans-serif; font-size: 27px; font-weight: 900; letter-spacing: .02em; writing-mode: horizontal-tb; text-shadow: none; }
.choice-grid.is-covered button:nth-child(6)::after { content: "👆"; position: absolute; z-index: 2; right: 8%; bottom: 10%; color: #fff; font-size: 46px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); animation: tap-finger 1.35s ease-in-out infinite; }
.choice-grid.is-covered button:nth-child(6) { overflow: visible; }
.choice-grid.is-covered button:nth-child(6)::before { border-radius: 50%; animation: tap-ripple 1.35s ease-out infinite; }
.choice-grid.is-flipping .choice-grid.is-covered button, .choice-grid.is-flipping button { pointer-events: none; }
.choice-grid.is-flipping button.is-flipping-card { animation: card-flip 720ms cubic-bezier(.22,.72,.26,1) both; }
@keyframes tap-finger { 0%, 100% { transform: translate(8px, 8px) scale(.92); opacity: .75; } 45% { transform: translate(0, 0) scale(1); opacity: 1; } 60% { transform: translate(0, 0) scale(.9); opacity: 1; } }
@keyframes tap-ripple { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } 45% { box-shadow: 0 0 0 8px rgba(255,255,255,.35), 0 0 0 18px rgba(255,255,255,0); } }
@keyframes card-flip { 0% { transform: perspective(700px) rotateY(0); } 45% { transform: perspective(700px) rotateY(90deg) scale(.94); } 55% { transform: perspective(700px) rotateY(-90deg) scale(.94); } 100% { transform: perspective(700px) rotateY(0); } }
.choice-grid.is-covered button > * { visibility: hidden; }
.choice-grid button[aria-pressed="true"] { border: 6px solid white; box-shadow: 0 0 0 5px #333, 0 0 25px 9px white; transform: translateY(-2px); }
.choice-grid span, .choice-grid strong, .choice-grid b, .choice-grid em { display: block; }
.choice-grid span { font-size: 13px; line-height: 1.45; }
.choice-grid strong { margin-top: 8px; color: #c30d08; font-size: 31px; }
.choice-grid small { margin-left: 2px; color: #33211d; font-size: 12px; }
.choice-grid b { margin-top: 5px; color: #b40f0b; font-size: 14px; line-height: 1.45; }
.choice-grid em { margin-top: 6px; color: #b40f0b; font-size: 12px; font-style: normal; }
.choice-grid .result-note { display: block; width: fit-content; margin: 8px auto 0; padding: 2px 7px; border-radius: 999px; color: #695344; background: #f2dfbd; font-size: 12px; font-style: normal; }
.choice-grid .result-note.is-selected { color: white; background: #c30d08; }
.next-button { display: block; min-width: 150px; min-height: 50px; margin: 22px auto 0; padding: 0 28px; border: 2px solid white; border-radius: 999px; color: white; background: transparent; font-size: 20px; cursor: pointer; }
.next-button:disabled { opacity: .4; cursor: not-allowed; }

.page-reward { position: relative; padding: max(24px, env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom)); background: radial-gradient(circle at 50% 14%, #fff, #e9f1ff 58%, #dbe6fb); }
.page-reward.is-entering { perspective: 900px; }
.page-reward.is-entering .reward-title { animation: reward-card-entry 900ms cubic-bezier(.2,.8,.2,1) both; transform-origin: center center; }
.page-reward.is-entering .member-card, .page-reward.is-entering .safety-bar, .page-reward.is-entering .product-banner { animation: reward-content-entry 600ms ease-out 420ms both; }
@keyframes reward-card-entry { 0% { opacity: 0; transform: rotateY(90deg) scale(.72); } 55% { opacity: 1; transform: rotateY(-12deg) scale(1.03); } 100% { opacity: 1; transform: rotateY(0) scale(1); } }
@keyframes reward-content-entry { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.page-reward::before { content: "微信\A微信支付\A你收到一笔活动奖励"; position: relative; display: block; width: calc(100% + 32px); margin: -24px -16px 18px; padding: 18px 24px; white-space: pre; border-radius: 0 0 22px 22px; color: #fff; background: rgba(92, 97, 106, .72); font-size: 16px; font-weight: 700; line-height: 1.45; }
.reward-header { display: flex; flex-direction: column; width: fit-content; color: #ee2018; }
.reward-header strong { font-size: 27px; }
.reward-header span { font-size: 14px; font-weight: 800; letter-spacing: .24em; }
.reward-title { display: grid; width: min(72%, 330px); min-height: 360px; margin: 28px auto 32px; place-content: center; justify-items: center; border: 4px solid #d6352d; border-radius: 30px; background: #fff9e9; box-shadow: 0 14px 0 #8e2a25, 0 22px 25px rgba(74,34,31,.28), inset 0 0 0 7px white; }
.reward-title > span { align-self: start; margin-top: -4px; padding: 8px 46px 12px; border-radius: 0 0 20px 20px; color: white; background: #dd2f27; font-size: 22px; font-weight: 800; }
.reward-title h1 { margin: 70px 0 0; color: #d3221b; font-family: Georgia, serif; font-size: 76px; font-weight: 500; }
.reward-title small { margin-left: 8px; color: #16100e; font-family: inherit; font-size: 28px; font-weight: 700; }
.member-card { padding: 14px; border: 5px solid #a90c0c; border-radius: 18px; background: white; box-shadow: 0 3px 0 rgba(113, 10, 10, .25); }
.member-card > p { margin: 0; padding: 10px 12px; color: white; background: #d11314; font-size: 15px; font-weight: 700; }
.member-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 10px; }
.member-benefits > div { display: grid; grid-template-columns: auto 1fr; align-items: baseline; padding: 16px 12px; border: 1px solid #e6e2df; background: white; }
.member-benefits strong { color: #cf1a15; font-size: 34px; }
.member-benefits b { font-size: 16px; }
.member-benefits span { grid-column: 1 / -1; margin-top: 8px; color: #777; font-size: 13px; }
.safety-bar { display: flex; align-items: center; gap: 10px; margin: 14px 0; padding: 12px; border: 2px solid #5793c6; border-radius: 8px; color: #5d666d; background: #bfe0ff; }
.safety-bar > span { display: grid; width: 46px; aspect-ratio: 1; place-items: center; color: white; background: #267cc1; clip-path: polygon(50% 0, 95% 22%, 84% 78%, 50% 100%, 16% 78%, 5% 22%); font-size: 12px; font-weight: 800; }
.safety-bar strong { font-size: 14px; }
.product-banner { display: flex; flex-direction: column; min-height: 130px; justify-content: center; padding: 18px 20px; color: #ffe8a6; background: linear-gradient(135deg, #d11310, #f22d17 60%, #9e100c); text-shadow: 0 2px 0 #8a150d; }
.product-banner strong { font-size: 28px; }
.product-banner span { font-size: 22px; font-weight: 800; }
.claim-button { display: none; width: 100%; min-height: 58px; margin-top: 18px; border: 0; border-radius: 12px; color: white; background: #e42118; box-shadow: 0 7px 0 #a8150f; font-size: 20px; font-weight: 800; cursor: pointer; }
.claim-button:disabled { opacity: .62; cursor: wait; }

.page-success { position: relative; min-height: 100svh; padding: 24px 22px 36px; background: radial-gradient(circle at 50% 8%, #fff, #e8f0ff 62%, #d9e4fa); }
.success-backdrop { position: relative; padding-top: 2px; color: #ef2018; text-align: left; }
.success-backdrop .reward-title { margin: 28px auto 32px; }
.success-dialog { position: relative; z-index: 2; width: 100%; padding-bottom: 28px; text-align: center; }
.success-paid { margin: 0 -22px 16px; padding: 10px; color: #555; background: rgba(255,255,255,.72); font-size: 14px; }
.success-dialog .member-card { text-align: left; }
.success-safety { margin: 14px 0; text-align: left; }
.success-safety small { font-size: 13px; font-weight: 500; }
.success-safety button { margin-left: auto; padding: 8px 14px; border: 0; border-radius: 20px; color: white; background: #147cf5; font-size: 14px; }
.success-ad { position: relative; min-height: 126px; margin: 14px 0; overflow: hidden; color: white; background: #d9100b; font-size: 20px; font-weight: 800; text-align: left; }
.ad-slide { position: absolute; inset: 0; padding: 28px 18px; opacity: 0; animation: ad-carousel 12s infinite; }
.ad-slide-1 { background: linear-gradient(90deg, #ed160c, #ff3a10 60%, #d9100b); animation-delay: 0s; }
.ad-slide-2 { background: linear-gradient(90deg, #16070c, #741522 60%, #16070c); animation-delay: -9s; }
.ad-slide-3 { background: linear-gradient(90deg, #bd321b, #e97839 60%, #8e1c13); animation-delay: -6s; }
.ad-slide-4 { background: linear-gradient(90deg, #d11310, #f22d17 60%, #9e100c); animation-delay: -3s; }
.ad-slide strong { float: right; color: #e82917; background: #fff9dd; padding: 10px 14px; border-radius: 12px; font-size: 16px; }
.ad-slide small { display: block; margin-top: 8px; font-size: 12px; font-weight: 400; }
@keyframes ad-carousel { 0%, 21% { opacity: 1; } 25%, 96% { opacity: 0; } 100% { opacity: 1; } }
.product-info { padding: 18px 20px 24px; border-radius: 24px; background: white; text-align: left; }
.product-info h3 { margin: 0 0 18px; padding: 8px 12px; color: white; background: #d20e12; font-size: 24px; }
.product-info p { margin: 12px 0; color: #383838; font-size: 16px; }

.page-message { position: fixed; z-index: 20; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); width: min(calc(100% - 32px), 460px); margin: 0; padding: 12px 16px; transform: translateX(-50%); border-radius: 10px; color: white; background: rgba(24, 15, 12, .92); font-size: 14px; line-height: 1.5; text-align: center; box-shadow: 0 8px 26px rgba(0,0,0,.28); }
.fatal-view { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 28px; background: white; text-align: center; }
.fatal-view button { min-width: 140px; min-height: 48px; border: 0; border-radius: 10px; color: white; background: #dc251b; font-weight: 700; }

@media (max-width: 380px) {
  .keypad button { min-height: 60px; }
  .choice-grid { gap: 8px; }
  .choice-grid button { min-height: 142px; padding-inline: 5px; }
  .choice-grid b { font-size: 12px; }
  .reward-title { min-height: 320px; }
}

@media (min-width: 768px) {
  body { padding: 28px 0; }
  #app { border-radius: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}