:root { --ink: #3b2518; --cream: #fff9ec; --orange: #f28c28; --deep: #d85d18; --green: #248d68; }
* { box-sizing: border-box; }
html { background: rgb(244, 230, 207); }
body { color: var(--ink); margin: 0px; font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.coupon-page { background: radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.9) 0px, rgba(255, 255, 255, 0.9) 5%, rgba(0, 0, 0, 0) 20%), radial-gradient(circle at 90% 22%, rgba(255, 204, 108, 0.35), rgba(0, 0, 0, 0) 26%), linear-gradient(155deg, rgb(255, 248, 234) 0%, rgb(248, 231, 200) 52%, rgb(244, 211, 155) 100%); min-height: 100svh; padding: 22px 18px 126px; position: relative; overflow: hidden; }
.brand { z-index: 2; align-items: center; gap: 11px; width: min(100%, 460px); margin: 0px auto 16px; display: flex; position: relative; }
.brand-mark { aspect-ratio: 1 / 1; color: rgb(255, 255, 255); background: var(--orange); border-radius: 50% 50% 44% 48%; place-items: center; width: 45px; font-size: 22px; font-weight: 900; display: grid; box-shadow: rgba(201, 88, 20, 0.2) 0px 7px 16px; }
.brand p { letter-spacing: 0.16em; color: rgb(135, 92, 58); margin: 0px; font-size: 10px; }
.brand h1 { letter-spacing: 0.06em; margin: 1px 0px 0px; font-size: 20px; }
.hero-card, .ticket { z-index: 2; width: min(100%, 460px); margin: 0px auto; position: relative; }
.hero-card { text-align: center; backdrop-filter: blur(8px); background: rgba(255, 253, 246, 0.9); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 34px; padding: 24px 22px 22px; box-shadow: rgba(111, 66, 25, 0.16) 0px 22px 60px, rgb(255, 255, 255) 0px 1px inset; }
.date-pill { color: rgb(255, 248, 232); letter-spacing: 0.08em; background: rgb(63, 42, 29); border-radius: 999px; padding: 7px 14px; font-size: 12px; font-weight: 800; display: inline-flex; }
.mascot-wrap { justify-content: center; align-items: flex-end; width: 194px; height: 172px; margin: 14px auto 0px; display: flex; position: relative; }
.mascot-wrap img { object-fit: contain; object-position: center bottom; filter: drop-shadow(rgba(105, 57, 28, 0.18) 0px 13px 11px); width: 158px; height: 164px; }
.mascot-slogan { z-index: 1; color: rgb(168, 64, 23); background: rgb(255, 250, 240); border: 2px solid rgb(246, 196, 124); border-radius: 17px 17px 17px 5px; max-width: 92px; padding: 7px 10px; font-size: 12px; font-weight: 900; line-height: 1.35; position: absolute; top: 5px; right: -18px; }
.eyebrow { color: var(--deep); letter-spacing: 0.15em; margin: 3px 0px 6px; font-size: 12px; font-weight: 900; }
.hero-card h2 { letter-spacing: -0.04em; margin: 0px; font-size: clamp(34px, 10vw, 47px); line-height: 1.16; }
.hero-card h2 em { color: var(--deep); font-style: normal; }
.gift-line { margin: 11px 0px 0px; font-size: 17px; }
.gift-line b { color: var(--green); }
.divider { color: rgb(215, 176, 113); align-items: center; gap: 10px; height: 30px; display: flex; }
.divider::before, .divider::after { content: ""; background: rgb(231, 207, 170); flex: 1 1 0%; height: 1px; }
.rules { text-align: left; color: rgb(107, 75, 52); width: fit-content; margin: 2px auto 18px; padding: 0px; font-size: 13px; line-height: 2; list-style: none; }
.rules li::before { content: "✓"; color: var(--green); margin-right: 8px; font-weight: 900; }
.redeem-note { color: rgb(108, 59, 32); text-align: left; background: rgb(255, 244, 222); border: 1px solid rgb(240, 197, 138); border-radius: 14px; margin: 0px 0px 16px; padding: 12px 13px; }
.redeem-note strong { color: rgb(189, 78, 24); margin-bottom: 5px; font-size: 13px; display: block; }
.redeem-note p { margin: 2px 0px; font-size: 12px; line-height: 1.55; }
.primary-button, .redeem-toggle, .confirm-redeem, .share-button { border: 0px; border-radius: 16px; width: 100%; font-weight: 900; }
.primary-button { color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(246, 163, 50), rgb(223, 102, 29)); min-height: 55px; font-size: 17px; box-shadow: rgba(215, 91, 20, 0.28) 0px 10px 22px; }
.fine-print { color: rgb(154, 119, 91); margin: 13px 0px 0px; font-size: 10px; }
.sticky-share { z-index: 20; width: min(100% - 24px, 440px); min-height: 74px; left: 50%; bottom: max(12px,env(safe-area-inset-bottom)); backdrop-filter: blur(12px); background: rgba(255, 253, 247, 0.96); border: 1px solid rgba(255, 255, 255, 0.95); border-radius: 22px; align-items: center; gap: 11px; padding: 10px 11px 10px 15px; display: flex; position: fixed; transform: translateX(-50%); box-shadow: rgba(68, 45, 23, 0.24) 0px 12px 36px; }
.sticky-share-copy { text-align: left; flex: 1 1 0%; }
.sticky-share-copy strong { color: rgb(7, 138, 59); font-size: 13px; display: block; }
.sticky-share-copy span { color: rgb(118, 87, 66); font-size: 10px; }
.share-button { color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(22, 196, 91), rgb(7, 150, 63)); justify-content: center; align-items: center; gap: 9px; min-width: 122px; min-height: 48px; padding: 0px 13px; font-size: 14px; display: flex; }
.share-button span { color: rgb(7, 150, 63); background: rgb(255, 255, 255); border-radius: 7px; place-items: center; width: 35px; height: 24px; font-size: 9px; display: grid; }
.ticket { filter: drop-shadow(rgba(99, 56, 24, 0.2) 0px 24px 34px); border-radius: 30px; }
.ticket-top, .ticket-bottom { text-align: center; background: rgb(255, 253, 248); }
.ticket-top { border-radius: 30px 30px 0px 0px; padding: 24px 22px 20px; }
.ticket-bottom { border-radius: 0px 0px 30px 30px; padding: 20px 22px 24px; }
.ticket-state { color: var(--green); background: rgb(227, 244, 236); border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 900; }
.ticket-top p { color: rgb(139, 108, 86); margin: 17px 0px 5px; font-size: 12px; }
.ticket-top h2 { margin: 0px; font-size: 28px; }
.quantity { color: var(--deep); justify-content: center; align-items: baseline; margin: 13px 0px 0px; display: flex; }
.quantity b { font-size: 72px; line-height: 0.9; }
.quantity span { margin-left: 5px; font-weight: 900; }
.ticket-top .no-purchase { color: var(--green); margin: 7px 0px 0px; font-size: 15px; font-weight: 900; }
.ticket-cut { background: linear-gradient(90deg, rgb(255, 253, 248) 0px, rgb(255, 253, 248) 20px, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 0) calc(100% - 20px), rgb(255, 253, 248) calc(100% - 20px)); height: 18px; position: relative; }
.ticket-cut::after { content: ""; border-top: 2px dashed rgb(232, 213, 189); position: absolute; top: 50%; left: 22px; right: 22px; }
.ticket-cut span { z-index: 2; background: rgb(244, 223, 189); border-radius: 50%; width: 18px; height: 18px; position: absolute; }
.ticket-cut span:first-child { left: -9px; }
.ticket-cut span:last-child { right: -9px; }
.validity { color: rgb(118, 87, 66); margin: 0px 0px 11px; font-size: 12px; font-weight: 700; }
.claim-code { font: 800 18px / 1 monospace; letter-spacing: 0.08em; background: rgb(255, 249, 239); border: 1px solid rgb(236, 217, 190); border-radius: 12px; padding: 12px; }
.show-staff { color: rgb(139, 108, 86); margin: 13px 0px; font-size: 12px; }
.redeem-toggle { color: rgb(255, 255, 255); background: rgb(63, 42, 29); min-height: 44px; }
.redeem-panel { text-align: left; background: rgb(248, 236, 218); border-radius: 16px; gap: 12px; margin-top: 14px; padding: 15px; display: grid; }
.redeem-panel label { color: rgb(96, 69, 50); gap: 6px; font-size: 12px; font-weight: 800; display: grid; }
.redeem-panel select, .redeem-panel input { width: 100%; min-height: 46px; background: rgb(255, 255, 255); border: 1px solid rgb(217, 191, 160); border-radius: 12px; padding: 0px 12px; }
.confirm-redeem { color: rgb(255, 255, 255); background: var(--green); min-height: 48px; }
.redeemed .ticket-state { color: rgb(128, 111, 99); background: rgb(238, 233, 226); }
footer { text-align: center; color: rgb(138, 106, 79); width: min(100%, 460px); margin: 18px auto 0px; font-size: 10px; display: grid; gap: 5px; }
.steam { filter: blur(2px); border-width: 22px; border-style: solid; border-color: rgba(255, 255, 255, 0.33) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); border-image: none; border-radius: 50%; width: 220px; height: 220px; position: fixed; }
.steam-one { top: -82px; right: -62px; }
.steam-two { bottom: -96px; left: -88px; }
@media (width >= 640px) {
  .coupon-page { padding-top: 34px; }
  .hero-card { padding: 28px 34px 26px; }
}
.sticky-share-copy{min-width:0;overflow:hidden}.sticky-share .share-button{flex:0 0 auto;width:auto;min-width:122px;min-height:48px;padding:0 13px}.sticky-share-copy strong,.sticky-share-copy span{white-space:normal;word-break:keep-all}@media(max-width:380px){.sticky-share{gap:8px;padding-left:12px}.sticky-share .share-button{min-width:108px;padding:0 10px}.sticky-share-copy strong{font-size:12px}.sticky-share-copy span{font-size:9px}}