:root{color-scheme:light;--ink:#243f3b;--muted:#526762;--green:#24634f}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#f5faf7;font-family:system-ui,-apple-system,"Malgun Gothic",sans-serif;line-height:1.5}main{width:min(100%,480px);min-height:0;margin:auto;padding:max(24px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:20px}.tour-area{flex:none;display:flex;flex-direction:column;justify-content:flex-start;gap:24px}header{text-align:center}.brand{font-size:21px;font-weight:800;letter-spacing:-.5px}.brand span{font-size:14px;padding-left:8px}.event{font-size:11px;color:var(--muted);margin:8px 0}h1{font-size:clamp(23px,6.3vw,29px);line-height:1.3;letter-spacing:-1px;margin:0}h2,p{margin:0}.courses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.course{text-align:center;padding:15px 2px;border:1px solid #dce7e0;border-radius:20px;background:white;min-width:0}.stamp{width:clamp(56px,16vw,76px);aspect-ratio:1;margin:0 auto 12px;display:grid;place-items:center;border-radius:50%;border:2px dashed #bdc9c2;background:#f1f4f2;filter:grayscale(1);font-size:clamp(28px,8vw,38px)}.course h2{font-size:clamp(11px,3.1vw,14px);white-space:nowrap;margin-bottom:7px}.status{display:inline-block;font-size:11px;color:var(--muted)}.course.done .stamp{filter:none;background:#e1f3e9;border:2px solid #98cbb5}.course.done[data-course="2"] .stamp{background:#e6f2fc;border-color:#a3c9e8}.course.done[data-course="3"] .stamp{background:#eee9fb;border-color:#c7b7e8}.course.done .status{color:#205640;font-weight:700}.course.just-earned .stamp{animation:stamp-in .5s ease-out}.progress-panel{padding:0 4px}.progress-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}.progress-heading strong{font-size:22px}progress{display:block;width:100%;height:8px;border:0;border-radius:10px;overflow:hidden;margin:8px 0 0;background:#d7e7dd}progress::-webkit-progress-bar{background:#d7e7dd}progress::-webkit-progress-value{background:#35765d;border-radius:10px}progress::-moz-progress-bar{background:#35765d;border-radius:10px}.instructions,.ticket{flex:none;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:18px 14px;border:2px dashed #a8cbb6;background:#eaf6ee;border-radius:22px;gap:10px}.instructions{min-height:88px}.instructions strong{font-size:16px}.instructions p{font-size:12px;color:var(--muted)}.ticket h2{font-size:23px;letter-spacing:-.6px}.ticket p{font-size:13px;color:var(--muted)}.ticket.redeemed{border-style:solid;background:#e1f0e7}button{font:inherit;min-height:44px;cursor:pointer;border:0;border-radius:12px;padding:10px 14px;background:var(--green);color:white;font-weight:700}button:focus-visible{outline:3px solid #387ad1;outline-offset:3px}button:disabled{background:#e8eee9;color:#52625c;cursor:default}#redeem{width:100%;font-size:14px}#redeem span{font-size:11px;font-weight:400;margin-left:6px}.notice{position:fixed;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);padding:10px 16px;border-radius:12px;background:#243f3b;color:white;font-size:13px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:5}.notice.visible{opacity:1}dialog{width:min(90%,400px);border:0;border-radius:20px;padding:24px;color:var(--ink)}dialog::backdrop{background:#172d2855}dialog h2{font-size:19px}dialog p{font-size:13px;color:var(--muted);margin:12px 0 20px}.dialog-actions{display:flex;gap:8px;justify-content:flex-end}.dialog-actions button{font-size:13px}#cancel-gift{background:#edf1ee;color:var(--ink)}.test-panel{padding:12px;border:2px dashed #ad95ca;border-radius:16px}.test-panel h2{font-size:12px}.test-buttons{display:flex;gap:8px;margin:8px 0}.test-panel button{font-size:12px}.warning{padding:12px;border-radius:12px;background:#fff0d5;color:#674810;font-size:12px}[hidden]{display:none!important}@keyframes stamp-in{0%{transform:scale(1.2) rotate(-12deg)}65%{transform:scale(.95)}100%{transform:scale(1)}}@media(max-height:600px){main{gap:16px;padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}.tour-area{gap:20px}.course{padding:12px 2px}.stamp{margin-bottom:8px}.instructions,.ticket{padding:14px 12px;gap:8px}}@media(max-width:350px){main{padding-left:14px;padding-right:14px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.brand{display:block;font-size:clamp(19px,5.2vw,23px);letter-spacing:-.5px;font-weight:700;margin-bottom:8px}
header .event{font-size:clamp(10px,2.6vw,11.5px);letter-spacing:-.2px;margin:0 0 7px}
.spark{font-size:.8em;margin-left:4px}
/* Completed tour: a paper coupon with perforation and punched edges. */
.ticket{position:relative;isolation:isolate;background:#fff7df;border:1px solid #dcc58b;border-radius:16px;box-shadow:0 5px 0 #eadbb4;padding:18px 20px 20px;gap:8px;overflow:hidden}
.ticket::before,.ticket::after{content:"";position:absolute;top:50%;width:24px;height:24px;border:1px solid #dcc58b;border-radius:50%;background:#f5faf7;transform:translateY(-50%)}
.ticket::before{left:-13px}.ticket::after{right:-13px}
.coupon-label{font-size:10px;letter-spacing:1.6px;color:#785e24;font-weight:700}
.ticket h2{color:#664c18}.ticket p{color:#715e37}
.ticket #redeem{margin-top:4px;padding-top:12px;border-top:2px dashed #dcc58b;background:#73591f}
.ticket.redeemed{background:#e1f0e7;border-color:#a8cbb6;box-shadow:none}
.ticket.redeemed::before,.ticket.redeemed::after{border-color:#a8cbb6}
.ticket.redeemed h2{color:#24634f}.ticket.redeemed .coupon-label{color:#526762}
/* The stamp lands on its own course, leaving a ring and an ink mark. */
.stamp{position:relative}.course.just-earned .stamp{animation:stamp-press 950ms cubic-bezier(.2,.7,.3,1) both;z-index:1}
.course.just-earned .stamp::before{content:"";position:absolute;inset:-4px;border:3px solid #35765d;border-radius:50%;animation:ink-ring 1.1s ease-out both;pointer-events:none}
.course.just-earned .stamp::after{content:"\2713";position:absolute;right:-5px;bottom:-4px;display:grid;place-items:center;width:24px;height:24px;background:#24634f;color:white;border:2px solid white;border-radius:50%;font-size:14px;font-weight:800;animation:ink-check 1.1s ease-out both}
@keyframes stamp-press{0%{transform:translateY(-30px) scale(1.55) rotate(-18deg);opacity:0}28%{opacity:1}46%{transform:translateY(3px) scale(.87) rotate(-8deg)}64%{transform:translateY(-3px) scale(1.07) rotate(3deg)}82%{transform:translateY(0) scale(.98) rotate(-2deg)}100%{transform:translateY(0) scale(1) rotate(0)}}
@keyframes ink-ring{0%,40%{opacity:0;transform:scale(.85)}48%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
@keyframes ink-check{0%,45%{opacity:0;transform:scale(0) rotate(-25deg)}65%{opacity:1;transform:scale(1.2) rotate(8deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@media(prefers-reduced-motion:reduce){.course.just-earned .stamp,.course.just-earned .stamp::before,.course.just-earned .stamp::after{animation:none!important}.course.just-earned .stamp::before{display:none}}
/* Mint coupon and operator confirmation. */
.ticket{background:#eaf6ee;border-color:#a8cbb6;box-shadow:0 5px 0 #d5e9dd}
.ticket::before,.ticket::after{border-color:#a8cbb6}
.coupon-label{color:#526762}.ticket h2{color:#243f3b}
.ticket #redeem{background:#24634f;border-top-color:#a8cbb6}
.ticket .gift-warning p{color:#a32b32;font-size:12px;line-height:1.6;text-align:left;font-weight:600}
.gift-warning{display:grid;gap:6px}
#gift-dialog .dialog-actions{margin-top:20px;flex-wrap:wrap}
#confirm-gift{background:#b52d37;color:#fff}
#confirm-gift:hover{background:#95232c}

.ticket .gift-warning p{word-break:keep-all;overflow-wrap:normal}


.ticket .gift-warning{width:100%;max-width:32ch;margin:4px auto 6px;padding:0 4px}.ticket .gift-warning p{color:#963d43;font-weight:600;line-height:1.7;text-align:left}


.ticket .gift-warning{width:100%;max-width:none;padding:0 8px;margin:4px auto 6px}


.ticket .gift-warning{grid-template-columns:auto minmax(0,1fr);gap:4px;align-items:start}.warning-mark{color:#963d43;font-size:12px;font-weight:600;line-height:1.7}


.ticket .exchange-pending{color:#963d43;font-size:12px;word-break:keep-all}


.ticket #redeem:disabled{color:#fff;background:#24634f;opacity:1;cursor:wait;-webkit-text-fill-color:#fff}


/* Keep the coupon label at the same top position before and after exchange. */
.ticket{justify-content:flex-start}.ticket.redeemed h2{margin-top:8px}


.gift-celebration{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);font-size:58px;line-height:1;pointer-events:none}


/* Preserve the same ticket surface and shadow after exchange. */
.ticket.redeemed{background:#eaf6ee;border:1px solid #a8cbb6;box-shadow:0 5px 0 #d5e9dd}


/* Keep the label fixed; center the completion title and gift as one group. */
.ticket.redeemed{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto 1fr;row-gap:0}.ticket.redeemed .coupon-label{grid-row:1}.ticket.redeemed h2{grid-row:2;align-self:end;margin:0 0 14px}.ticket.redeemed .gift-celebration{grid-row:3;position:static;transform:none;font-size:58px;line-height:1.15;justify-self:center}