:root{--brand:#111;--accent:#c6a76a;--bg:#f4f1ed;--card:#fff;--muted:#70675f;--text:#171717}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:var(--text)}
body{min-height:100%;margin:0;padding:14px 12px calc(28px + env(safe-area-inset-bottom));background:var(--bg)}
button{font:inherit;cursor:pointer}
img{display:block;max-width:100%}
[hidden]{display:none!important}
.shell{width:100%;max-width:430px;margin:0 auto}
.feedback-card{min-height:180px;margin-top:18vh;padding:30px 22px;border:1px solid #ebe5de;border-radius:22px;background:#fff;box-shadow:0 12px 34px rgba(0,0,0,.08);display:grid;place-items:center;text-align:center}
.feedback-card p{margin:8px 0 0;color:var(--muted);font-size:.875rem;line-height:1.5}
.feedback-card h1{margin:10px 0 0;font-size:1.35rem}
.feedback-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#f5ece8;color:#8b2e1f;font-size:1.25rem;font-weight:900}
.spinner{width:32px;height:32px;border:3px solid #e8e2dc;border-top-color:#222;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero{min-height:188px;border-radius:28px 28px 20px 20px;color:#fff;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;padding:22px 18px;background:var(--brand);box-shadow:0 18px 45px rgba(0,0,0,.13)}
.hero-photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.2));pointer-events:none}
.hero-content{position:relative;z-index:2}
.logo{width:96px;height:96px;border-radius:50%;background:#fff;margin:0 auto 10px;border:4px solid var(--accent);overflow:hidden;display:grid;place-items:center;color:var(--brand);font-size:1.25rem;font-weight:900}
.logo img{width:100%;height:100%;object-fit:contain}
.hero strong{display:block;font-size:1.0625rem}
.hero span{display:block;margin-top:4px;font-size:.8125rem;opacity:.88}
.campaign-card{background:var(--card);border-radius:22px;padding:17px;margin-top:14px;box-shadow:0 12px 34px rgba(0,0,0,.08)}
.campaign-card h1{font-size:1.45rem;line-height:1.2;text-align:center;margin:0}
.subtitle{font-size:.875rem;line-height:1.5;color:var(--muted);text-align:center;margin:8px 0 14px}
.scratch-stage{position:relative;height:185px;border-radius:18px;overflow:hidden;border:1px solid #e7d8b7;background:linear-gradient(145deg,#fff2c9,#fffaf0)}
.result{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px}
.result-icon{font-size:2.625rem}
.result strong{font-size:1.25rem;margin-top:6px}
.result span:last-child{font-size:.8125rem;color:#766d64;line-height:1.45;margin-top:6px}
canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.reveal-button,.prize-button,.close-button{width:100%;border-radius:12px;padding:12px;font-weight:900}
.reveal-button{margin-top:10px;border:1px solid #ded7cf;background:#fff;color:#333}
.prize-button{margin-top:10px;border:1px solid #d8c08b;background:#fff}
.status{margin-top:11px;border-radius:14px;padding:12px;font-size:.875rem;line-height:1.45}
.status.win{background:#fff1c4;border:1px solid #efd57d;color:#5f4908}
.status.lose{background:#f4f0eb;border:1px solid #e2d8cf;color:#6d6258}
.stamps{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin:10px 0 14px}
.stamp{aspect-ratio:1;display:grid;place-items:center;border:2px dashed var(--stamp-empty-border,#d5c9bd);background:var(--stamp-empty,#fff);color:var(--stamp-check,#fff);font-weight:900}
.stamp.done{border-style:solid;border-color:var(--stamp-done,#111);background:var(--stamp-done,#111)}
.stamp.next{border-style:solid;border-color:var(--stamp-next-border,#111);background:var(--stamp-next,#fff);color:var(--stamp-next-border,#111)}
.loyalty-rule,.loyalty-prize,.loyalty-note{margin:8px 0;text-align:center;line-height:1.45}
.loyalty-rule{font-size:.875rem;color:var(--muted)}
.loyalty-prize{padding:11px;border-radius:12px;background:#fff3cd;color:#604c12;font-weight:800}
.loyalty-note{font-size:.75rem;color:#8a8178}
.screenpage-footer{margin-top:14px;background:#fff;border:1px solid #ebe5de;border-radius:16px;padding:11px 12px;display:flex;align-items:center;justify-content:center;gap:10px}
.screenpage-mark{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#111;color:#fff;font-size:.875rem;font-weight:900;letter-spacing:.04em}
.screenpage-footer strong{font-size:.8125rem;display:block}
.screenpage-footer span{font-size:.6875rem;color:#777;display:block;margin-top:2px}
.modal{position:fixed;inset:0;background:rgba(17,17,17,.92);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal-card{width:100%;max-width:390px;background:#fff;border-radius:24px;padding:18px;text-align:center}
.modal-card h2{margin:0 0 6px;font-size:1.35rem}
.modal-card p{margin:0 0 12px;color:#777;font-size:.875rem;line-height:1.45}
.prize-image,.no-image{width:100%;aspect-ratio:1;border-radius:17px;background:#f2f2f2}
.prize-image{object-fit:cover}
.no-image{border:1px dashed #ddd;display:grid;place-items:center;color:#999;font-size:.8125rem}
.close-button{border:0;background:#111;color:#fff;margin-top:12px}
.confetti{position:fixed;top:-20px;width:9px;height:16px;border-radius:2px;animation:fall linear forwards;z-index:60;pointer-events:none}
@keyframes fall{to{transform:translate3d(var(--drift),110vh,0) rotate(720deg);opacity:.85}}
button:focus-visible,canvas:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:350px){.stamps{grid-template-columns:repeat(4,1fr)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}