:root{
  --ink:#2B1B12; --cream:#FFF6E9; --sky:#7EC8FF; --green:#22B573; --green-dk:#168A55;
  --red:#FF4B3A; --gold:#FFC83D; --foil-a:#F6B52E; --foil-b:#FFD866; --blue:#3B82F6;
  --brown:#5C4636; --muted:#8A6E5A; --divider:#EADFCF; --cam:#1A1410; --cam-2:#2E2520;
  --body-ink:#3A2A1A;
  --head:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:#EFE7DA;font-family:var(--body);color:var(--ink);-webkit-font-smoothing:antialiased;overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* ---------- device frame ---------- */
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#phone{position:relative;width:390px;height:844px;overflow:hidden;background:var(--sky);
  border-radius:44px;box-shadow:0 0 0 10px var(--ink),0 30px 60px rgba(43,27,18,.25);transform-origin:center}
@media (max-width:500px){
  #phone{width:100vw;height:100vh;height:100dvh;border-radius:0;box-shadow:none}
}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(34px + var(--safe-top)) 16px 0;
  background:var(--sky);color:var(--ink);overflow:hidden;container-type:size}
.screen.dark{background:var(--cam);color:#fff}
.screen.enter{animation:screenIn .38s cubic-bezier(.2,.8,.2,1) both}
.screen.leave{animation:screenOut .28s ease-in both;pointer-events:none}
.screen.enter.back{animation-name:screenInBack}
.screen.leave.back{animation-name:screenOutBack}
@keyframes screenIn{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes screenOut{to{transform:translateX(-40px);opacity:0}}
@keyframes screenInBack{from{transform:translateX(-40px);opacity:0}to{transform:none;opacity:1}}
@keyframes screenOutBack{to{transform:translateX(40px);opacity:0}}

/* ---------- shared bits ---------- */
.row{display:flex;align-items:center}
.between{justify-content:space-between}
.wordmark{font:800 24px var(--head);letter-spacing:-.04em;line-height:1}
.chip{border:3px solid var(--ink);border-radius:999px;padding:5px 10px;font-size:11px;font-weight:800;white-space:nowrap;line-height:1.2;display:inline-flex;align-items:center;gap:4px}
.chip.red{background:var(--red);color:#fff}
.chip.gold{background:var(--gold);color:var(--ink)}
.chip.green{background:var(--green);color:#fff}
.chip.white{background:#fff;color:var(--ink)}
.chip.bounce{animation:chipBounce .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes chipBounce{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

.cta-wrap{margin-top:auto;padding:0 12px 20px}
.cta{width:100%;height:50px;border-radius:999px;background:var(--green);color:#fff;border:4px solid var(--ink);
  display:flex;align-items:center;justify-content:center;gap:10px;font:800 18px/1 var(--head);
  animation:pulse 1.8s ease-in-out infinite;transition:opacity .12s,transform .12s}
.cta:active{opacity:.85;transform:scale(.98)}
.cta.ghost{background:#fff;color:var(--ink);border-width:3px;height:48px;font-size:15px;animation:none}
/* v2 pulse: white ring + ink ring, on the one primary pill per screen */
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink)}50%{box-shadow:0 0 0 6px #fff,0 0 0 9px var(--ink)}}
.cam-ico{width:28px;height:21px;border-radius:5px;border:3px solid #fff;position:relative;flex:none}
.cam-ico::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}

.menu{margin:0 -16px;display:flex;justify-content:space-around;padding:12px 0 calc(22px + var(--safe-bot));
  background:var(--ink);border-top:5px solid var(--ink);color:#fff;font-size:11px;font-weight:800;flex:none}
.menu button{color:rgba(255,255,255,.65);font-weight:800;font-size:11px;padding:2px 10px}
.menu button.on{color:var(--gold)}

/* ---------- intro ---------- */
.intro{padding:calc(34px + var(--safe-top)) 20px calc(24px + var(--safe-bot))}
.intro .skip{font-size:12px;font-weight:800;color:var(--brown);padding:6px 0 6px 12px}
.intro-track{flex:1;display:flex;margin:0 -20px;touch-action:pan-y;will-change:transform}
.intro-slide{flex:0 0 100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 20px 40px}
.intro-slide .intro-art{zoom:var(--cz,1);height:358px;flex:none}
.intro-art{position:relative;display:flex;align-items:center;justify-content:center}
.intro-title{margin-left:-8px;margin-right:-8px;text-align:center;font:800 30px/1.05 var(--head);letter-spacing:-.04em}
.intro-body{margin:14px auto 0;text-align:center;font-size:15px;line-height:1.45;font-weight:700;color:var(--body-ink);max-width:300px}
.intro-slide .intro-art,.intro-slide .intro-copy{opacity:0}
.intro-slide.in .intro-art{animation:artPop .4s cubic-bezier(.3,1.5,.5,1) both}
.intro-slide.in .intro-copy{animation:copyUp .4s .08s ease-out both}
@keyframes artPop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.06);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes copyUp{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.intro-foot{display:flex;flex-direction:column;gap:18px;align-items:center}
.dots{display:flex;gap:8px}
.dots i{display:block;width:8px;height:8px;border-radius:4px;background:#fff;border:2px solid var(--ink);transition:width .3s cubic-bezier(.3,1.4,.5,1),background .2s}
.dots i.on{width:24px;background:var(--ink)}

.sunburst{position:absolute;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,200,61,.5) 0 9deg,transparent 9deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 68%);mask:radial-gradient(circle,#000 30%,transparent 68%);
  animation:spin 20s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.bob{animation:bob 2.4s ease-in-out infinite}
.corner{position:absolute;width:33px;height:33px;border:0 solid var(--green)}
.corner.tl{left:-12px;top:-12px;border-top-width:5px;border-left-width:5px;border-radius:10px 0 0 0}
.corner.tr{right:-12px;top:-12px;border-top-width:5px;border-right-width:5px;border-radius:0 10px 0 0}
.corner.bl{left:-12px;bottom:-12px;border-bottom-width:5px;border-left-width:5px;border-radius:0 0 0 10px}
.corner.br{right:-12px;bottom:-12px;border-bottom-width:5px;border-right-width:5px;border-radius:0 0 10px 0}

.coin{display:block;width:100%;height:auto;overflow:visible}
.coin-ring{border-radius:50%;box-shadow:0 0 0 3px var(--gold)}

/* ---------- red card + foil panel ---------- */
/* v2: one scratch-card size everywhere: 220 frame, inner card 5:8 */
.red-card{position:relative;width:220px;background:var(--red);border:4px solid var(--ink);border-radius:24px;padding:20px 12px 12px;display:flex;flex-direction:column}
.card-foot{height:33px;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--gold);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:6px 12px;font:800 13px var(--head)}
.foil{position:relative;border-radius:14px;background:var(--gold);border:3px solid var(--ink);overflow:hidden;display:flex;align-items:center;justify-content:center;isolation:isolate}
.foil-rays{position:absolute;inset:-60px;background:repeating-conic-gradient(from 0deg,var(--foil-a) 0 12deg,var(--foil-b) 12deg 24deg);animation:spin 18s linear infinite}
.confetti{position:absolute;border:2px solid var(--ink)}
.confetti.dot{width:10px;height:10px;border-radius:50%}
.confetti.bar{width:14px;height:6px;border-radius:2px}
.foil-glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.35)}
.foil-shine{position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:shimmer 2.4s ease-in-out infinite}
@keyframes shimmer{0%{transform:translateX(-120%) skewX(-20deg)}100%{transform:translateX(260%) skewX(-20deg)}}
.scratch-pill{position:relative;background:var(--red);color:#fff;border-radius:999px;padding:11px 22px;font:800 20px var(--head);border:4px solid var(--ink);letter-spacing:-.02em;white-space:nowrap}
.scratch-pill.sm{padding:8px 16px;font-size:15px;border-width:3px}
.foil-cta{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;animation:bob 1.6s ease-in-out infinite}
.foil-chip{font:800 11px var(--body);letter-spacing:.08em;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:4px 10px}
.foil-note{font-size:11px;font-weight:800}

/* ---------- game card (shared: Screen 1, Screen 7) ---------- */
.title-26{text-align:center;font:800 26px/1.05 var(--head);letter-spacing:-.03em}
.card-stage{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;padding-bottom:12px}
.card-zoom{zoom:var(--cz,1);position:relative}
.red-card.ribbon{padding:20px 12px 12px}
.ribbon-chip{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:4px 12px;font-size:11px;font-weight:800;white-space:nowrap;z-index:3}
.panel{width:100%;aspect-ratio:5/8;flex:none;position:relative;border-radius:14px;border:3px solid var(--ink);background:var(--cream);overflow:hidden;display:flex;align-items:center;justify-content:center}
.scratch-cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;z-index:1}
/* coins leave room for the 1.08x pop + gold ring on matches, so rows never overlap */
/* 2 columns x 3 rows filling the inner card; coins are perfect circles */
.coins{position:absolute;inset:0;padding:12px;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:8px 12px;align-items:center;justify-items:center}
.cell{width:100%;max-height:100%;aspect-ratio:1;border-radius:50%;transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
.cell.pop{animation:coinPop .5s ease-out both}
.cell.hit{box-shadow:0 0 0 3px var(--gold),0 0 0 6px var(--ink);transform:scale(1.05)}
/* BAWI jackpot: gold winners glow, everything else greys out */
.cell.jackpot{box-shadow:0 0 0 3px #fff,0 0 12px 4px rgba(255,255,255,.85);transform:scale(1.05)}
.cell.lose{filter:grayscale(1);opacity:.45;transition:filter .3s,opacity .3s}
@keyframes coinPop{0%{transform:scale(.4)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.foil-labels{position:absolute;inset:0;z-index:2;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;animation:bob 1.6s ease-in-out infinite;transition:opacity .25s,transform .25s}
.scratching .foil-labels{opacity:0;transform:translateY(-8px) scale(.9);animation:none}
.result-banner{position:absolute;left:50%;bottom:-20px;transform:translateX(-50%) scale(.4);opacity:0;z-index:4;border:4px solid var(--ink);border-radius:999px;padding:6px 20px;font:800 24px/1 var(--head);letter-spacing:-.02em;white-space:nowrap}
.result-banner.gold{background:var(--gold);color:var(--ink)}
.result-banner.red{background:var(--red);color:#fff}
.result-banner.cream{background:var(--cream);color:var(--muted)}
.result-banner.show{animation:bannerPop .4s cubic-bezier(.3,1.6,.5,1) both}
@keyframes bannerPop{0%{transform:translateX(-50%) scale(.4);opacity:0}70%{transform:translateX(-50%) scale(1.12);opacity:1}100%{transform:translateX(-50%) scale(1);opacity:1}}
.win-rays{position:absolute;left:50%;top:50%;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .6s;
  background:repeating-conic-gradient(from 0deg,rgba(255,200,61,.55) 0 9deg,transparent 9deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 25%,transparent 66%);mask:radial-gradient(circle,#000 25%,transparent 66%);animation:spin 16s linear infinite}
.won .win-rays{opacity:1}
.under-card{position:relative;align-self:stretch;height:40px;margin-top:22px;display:flex;align-items:center;justify-content:center}
.link{font-size:12px;font-weight:700;color:var(--brown);text-decoration:underline;padding:8px;transition:opacity .2s}
.scratching .link,.scratched .link{opacity:0;pointer-events:none}
.win-sub{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;opacity:0;transform:translateY(8px);transition:opacity .3s .2s,transform .3s .2s}
.won .win-sub{opacity:1;transform:none}

/* ---------- review nav (demo only) ---------- */
#devnav{position:fixed;left:12px;bottom:12px;display:flex;gap:6px;flex-wrap:wrap;max-width:220px;font:700 11px var(--body)}
#devnav button{background:#fff;border:2px solid var(--ink);border-radius:8px;padding:4px 7px}
@media (max-width:500px){#devnav{display:none}}

/* ===================== Screens 2–8 ===================== */
.grow{flex:1;display:flex;flex-direction:column;min-width:0;text-align:left}
.nowrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.round-btn{width:34px;height:34px;border-radius:50%;background:#fff;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font:800 18px var(--body);color:var(--ink);flex:none;line-height:1}
.round-btn.lg{width:40px;height:40px;font-size:20px}
.round-btn:disabled{opacity:.35}
.round-btn:active{transform:scale(.94)}

/* Home */
.counter-dark{margin-top:14px;background:var(--ink);color:#fff;border:3px solid var(--ink);border-radius:20px;padding:16px 14px;display:flex;justify-content:space-between;align-items:center}
.counter-dark .col,.counter-light .col{display:flex;flex-direction:column}
.counter-dark .col.end,.counter-light .col.end{align-items:flex-end}
.counter-dark .lbl{font-size:10px;font-weight:800;opacity:.7}
.counter-dark .big{font:800 30px/1 var(--head)}
.counter-dark .small{font:800 13px/1.2 var(--head)}
.counter-dark .sep{width:3px;height:34px;background:rgba(255,255,255,.2);border-radius:2px}
.green{color:var(--green)} .blue{color:var(--blue)} .gold{color:var(--gold)}
.rows{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.status-row{width:100%;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:9px 12px;display:flex;align-items:center;gap:10px;font-family:var(--body);color:var(--ink);text-align:left}
button.status-row:active{transform:scale(.98)}
.row-title{font-weight:800;font-size:13px}
.row-sub{font-size:11px;font-weight:700;color:var(--brown)}
.tile{width:34px;height:34px;border-radius:10px;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;flex:none}
.tile.red{background:var(--red);color:var(--gold);font:800 9px var(--head)}
.tile.cream{background:var(--cream)}
.mini-receipt{width:16px;height:20px;background:#fff;border:2px solid var(--ink);border-radius:2px}
.tick{width:24px;height:24px;border-radius:50%;background:var(--green);border:2px solid var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex:none}
.chev{font:800 16px var(--body);flex:none}
.go-pill{background:var(--green);color:#fff;border:2px solid var(--ink);border-radius:999px;padding:5px 10px;font-size:11px;font-weight:800;flex:none}
.status-row.ready{border-color:var(--green);box-shadow:0 0 0 2px var(--ink)}
.home-ask{margin-top:auto;padding:0 12px 24px}
.ask-title{text-align:center;font:800 26px/1.1 var(--head);letter-spacing:-.04em}
.ask-sub{margin:10px 0 20px;text-align:center;font-size:13px;line-height:1.4;font-weight:700;opacity:.85}

/* Send */
.send-title{margin-top:40px;text-align:center;font:800 32px/1.05 var(--head);letter-spacing:-.04em}
.send-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;min-height:0}
.send-art{zoom:var(--cz,1);padding:10px}
.send-art .corner{width:31px;height:31px}
.send-art .corner.tl{left:-10px;top:-10px}.send-art .corner.tr{right:-10px;top:-10px}.send-art .corner.bl{left:-10px;bottom:-10px}.send-art .corner.br{right:-10px;bottom:-10px}
.send-cap{text-align:center;font-size:13px;font-weight:800;opacity:.9;line-height:1.35}

/* Camera */
.cam-title{font-weight:800;font-size:15px}
.s-camera .round-btn{width:36px;height:36px}
.viewfinder{flex:1;margin:14px -4px 0;border-radius:20px;background:var(--cam-2);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0}
.viewfinder video,.viewfinder .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.live video{opacity:1}
.captured .still{opacity:1}
.live .vf-placeholder{opacity:0}
.vf-placeholder{transition:opacity .3s}
.ph-receipt{width:150px;height:250px;background:var(--cream);border-radius:6px;display:flex;flex-direction:column;gap:9px;padding:18px 14px;transform:rotate(-3deg)}
.ph-receipt i{display:block;height:5px;border-radius:3px;background:#D9CBB8}
.ph-receipt i:first-child{height:8px;width:60%;background:#B9A592}
.ph-receipt i:nth-child(2){width:85%}.ph-receipt i:nth-child(3){width:70%}.ph-receipt i:nth-child(4){width:85%}.ph-receipt i:nth-child(5){width:65%}.ph-receipt i:nth-child(6){width:75%}
.ph-receipt b{margin-top:auto;height:9px;width:55%;align-self:flex-end;background:var(--ink);border-radius:4px}
.corner.vf{width:39px;height:39px;z-index:2}
.corner.vf.tl{left:18px;top:18px}.corner.vf.tr{right:18px;top:18px;left:auto}.corner.vf.bl{left:18px;bottom:18px;top:auto}.corner.vf.br{right:18px;bottom:18px;left:auto;top:auto}
.vf-chip{position:absolute;top:28px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;border:3px solid var(--ink);border-radius:999px;padding:5px 12px;font-weight:800;font-size:12px;white-space:nowrap;z-index:3;transition:opacity .25s,background .2s;max-width:86%;overflow:hidden;text-overflow:ellipsis}
.vf-chip.warn{background:var(--gold);color:var(--ink)}
.viewfinder.bonk{animation:bonk .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes bonk{0%{transform:scale(1)}35%{transform:scale(.96)}100%{transform:scale(1)}}
.flash .viewfinder::after{content:"";position:absolute;inset:0;background:#fff;opacity:.85;animation:flash .25s ease-out forwards;z-index:4}
@keyframes flash{to{opacity:0}}
.scanline{position:absolute;left:8%;right:8%;top:8%;height:4px;border-radius:2px;background:var(--green);box-shadow:0 0 18px 6px rgba(34,181,115,.55);opacity:0;transition:top .55s cubic-bezier(.4,0,.2,1),opacity .2s;z-index:3}
.is-reading .scanline{opacity:1}
.read-panel{position:absolute;left:14px;right:14px;bottom:14px;z-index:3;background:rgba(26,20,16,.82);border:3px solid var(--ink);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s;pointer-events:none}
.s-camera.is-reading .read-panel{opacity:1;transform:none}
.captured .vf-placeholder{opacity:0}
.read-label{font-weight:800;font-size:13px;color:#fff}
.read-bar{height:8px;border-radius:4px;background:rgba(255,255,255,.18);overflow:hidden}
.read-bar i{display:block;height:100%;width:0;background:var(--green);border-radius:4px;transition:width .5s ease-out}
.read-total{position:absolute;right:14px;top:-26px;background:var(--gold);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:4px 14px;font:800 22px var(--head);transform:scale(0);opacity:0}
.read-total.pop{animation:bannerPopPlain .45s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes bannerPopPlain{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1}}
.shutter-row{display:flex;justify-content:center;align-items:center;padding:16px 0 20px}
.shutter{width:84px;height:84px;border-radius:50%;background:var(--green);border:4px solid var(--ink);box-shadow:0 0 0 6px #fff,0 0 0 10px var(--ink);transition:transform .12s}
.shutter:active{transform:scale(.92)}
.s-camera.is-reading .shutter{opacity:.5;pointer-events:none}

/* bottom sheet (Use a code) */
.sheet-wrap{position:absolute;inset:0;z-index:20;background:rgba(26,20,16,.55);display:flex;align-items:flex-end;animation:fadeIn .2s}
.sheet-wrap.out{animation:fadeOut .25s forwards}
@keyframes fadeIn{from{opacity:0}} @keyframes fadeOut{to{opacity:0}}
.sheet{width:100%;background:var(--cream);color:var(--ink);border-top:4px solid var(--ink);border-radius:24px 24px 0 0;padding:20px 20px calc(24px + var(--safe-bot));display:flex;flex-direction:column;gap:16px;align-items:center;animation:sheetUp .3s cubic-bezier(.2,1.2,.4,1)}
@keyframes sheetUp{from{transform:translateY(100%)}}
.sheet-title{font:800 20px var(--head);letter-spacing:-.02em}
.code-boxes{display:flex;gap:10px}
.code-boxes input{width:84px;height:56px;border:3px solid var(--ink);border-radius:14px;text-align:center;font:800 22px var(--head);letter-spacing:.12em;text-transform:uppercase;background:#fff;color:var(--ink);-webkit-user-select:text;user-select:text}
.code-boxes input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(34,181,115,.3)}
.sheet .cta:disabled{opacity:.45;animation:none}

/* Pick */
.chip.green{background:var(--green);color:#fff}
.receipt-row{margin-top:14px;background:#fff;border:3px solid var(--ink);border-radius:18px;padding:9px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.receipt-row .col{display:flex;flex-direction:column;min-width:0}
.rr-store{font-size:11px;font-weight:800;color:var(--brown);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-label{font-size:13px;font-weight:800}
.rr-total{font:800 26px/1 var(--head);letter-spacing:-.03em;white-space:nowrap}
.note{margin-top:8px;font-size:11px;font-weight:700;color:var(--brown);text-align:center}
.pick-title{margin-top:14px;text-align:center;font:800 24px/1 var(--head);letter-spacing:-.03em}
.picker{margin-top:18px;background:#fff;border:3px solid var(--ink);border-radius:22px;padding:16px 14px 14px;display:flex;flex-direction:column;align-items:center;gap:10px}
.stepper{display:flex;gap:14px;align-items:center}
.step{width:52px;height:52px;border-radius:16px;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font:800 26px var(--body);transition:transform .1s,opacity .2s}
.step.minus{background:var(--divider);color:var(--ink)} .step.plus{background:var(--green);color:#fff}
.step:active{transform:scale(.92)} .step:disabled{opacity:.35}
.count{display:flex;flex-direction:column;align-items:center;width:84px}
.count .n{font:800 48px/1 var(--head);letter-spacing:-.04em;display:inline-block}
.count .n.bounce{animation:chipBounce .4s cubic-bezier(.3,1.6,.5,1)}
.count .sub{font-size:12px;font-weight:800;opacity:.7;white-space:nowrap}
.pk-line{text-align:center;font-size:12px;font-weight:800;line-height:1.3}
.pk-price{font-size:10px;font-weight:700;opacity:.6}
.cta .spinner{width:18px;height:18px;border-radius:50%;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .8s linear infinite}
.cta.paying{animation:none;opacity:.9}

/* Pay */
.summary-row{margin-top:14px;background:#fff;border:3px solid var(--ink);border-radius:20px;padding:10px 16px;display:flex;align-items:center;gap:14px}
.sum-name{flex:1;font:800 18px var(--head);white-space:nowrap}
.sum-price{font:800 22px/1 var(--head);letter-spacing:-.03em}
.pay-title{margin-top:14px;text-align:center;font:800 24px/1.1 var(--head);letter-spacing:-.03em}
.methods{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.method{display:flex;align-items:center;gap:12px;height:52px;padding:0 14px;border-radius:16px;background:#fff;border:3px solid var(--ink);color:var(--ink);font-family:var(--body);transition:border-color .15s}
.method.on{border-color:var(--green)}
.method .logo{width:32px;height:32px;border-radius:10px;color:#fff;display:flex;align-items:center;justify-content:center;font:800 12px var(--head);flex:none}
.m-name{font-weight:800;font-size:14px} .m-sub{font-size:10px;font-weight:700;opacity:.65}
.radio{width:22px;height:22px;border-radius:50%;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;flex:none}
.method.on .radio{border-color:var(--green)}
.radio i{width:10px;height:10px;border-radius:50%;background:var(--green);transform:scale(0);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.method.on .radio i{transform:scale(1)}
.qr-panel{display:none;margin:12px auto 0;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:10px;flex-direction:column;align-items:center;gap:6px;font-size:11px;font-weight:800}
.qr-panel.show{display:flex;animation:bannerPopPlain .35s cubic-bezier(.3,1.5,.5,1)}
.s-pay .qr-panel svg{width:118px;height:118px}

/* Cards */
.counter-light{margin-top:12px;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:8px 14px;display:flex;justify-content:space-between;align-items:center}
.counter-light .lbl{font-size:10px;font-weight:800;opacity:.65}
.counter-light .big{font:800 24px/1 var(--head);display:inline-block}
.s-cards .card-stage{padding:16px 0 0}
.card-slot{position:relative;display:flex;justify-content:center}
.card-slot .card-zoom{transition:transform .38s cubic-bezier(.22,1.25,.36,1),opacity .3s}
.card-slot .card-zoom.out-left,.card-slot .card-zoom.out-right{position:absolute;top:0}
.card-zoom.out-left{transform:translateX(-120%) rotate(-8deg);opacity:0}
.card-zoom.out-right{transform:translateX(120%) rotate(8deg);opacity:0}
.card-zoom.in-right{animation:cardIn .42s cubic-bezier(.22,1.25,.36,1)}
.card-zoom.in-left{animation:cardInL .42s cubic-bezier(.22,1.25,.36,1)}
@keyframes cardIn{from{transform:translateX(110%) rotate(8deg);opacity:0}}
@keyframes cardInL{from{transform:translateX(-110%) rotate(-8deg);opacity:0}}
.red-card.deal{animation:deal .5s cubic-bezier(.22,1.3,.36,1) both}
@keyframes deal{from{transform:translateY(60px) scale(.85) rotate(-4deg);opacity:0}}
.red-card.special{background:#1A1410;box-shadow:0 0 0 3px var(--gold) inset}
.red-card.special .ribbon-chip{background:var(--ink);color:var(--gold);border-color:var(--gold)}
.result-banner.blue{background:var(--blue);color:#fff}
.result-banner.cream{font-size:20px}
.browse{margin:14px 0 14px;display:flex;justify-content:space-between;align-items:center;padding:0 4px}
.state-dots{display:flex;gap:8px;align-items:center}
.sdot{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font:800 8px var(--head);color:var(--ink);padding:0;transition:transform .2s}
.sdot.gold{background:var(--gold)} .sdot.blue{background:var(--blue);color:#fff} .sdot.red{background:var(--red);color:#fff}
.sdot.current{width:30px;height:30px;background:var(--red);outline:3px solid var(--gold);outline-offset:2px}
.state-dots .sdot:active{transform:scale(.9)}
.confetti-layer{position:absolute;inset:-20px 0 0;pointer-events:none;z-index:5;overflow:hidden}
.confetti-layer i{position:absolute;top:-16px;border:2px solid var(--ink);opacity:0;animation:fallBig linear forwards}
.confetti-layer i.cf-dot{width:10px;height:10px;border-radius:50%;background:var(--red)}
.confetti-layer i.cf-bar{width:14px;height:6px;border-radius:2px}
@keyframes fallBig{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(520px) rotate(420deg);opacity:0}}
.bawi .cell.jackpot{animation:coinPop .5s ease-out both,bob 1.4s .6s ease-in-out infinite}

/* Payoff */
.won-head{margin-top:12px;position:relative;text-align:center}
.won-rays{position:absolute;inset:-30px -60px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,200,61,.4) 0 9deg,transparent 9deg 18deg);-webkit-mask:radial-gradient(circle,#000 25%,transparent 68%);mask:radial-gradient(circle,#000 25%,transparent 68%);animation:spin 16s linear infinite;pointer-events:none}
.won-lbl{position:relative;font:800 13px var(--body);opacity:.8}
.won-amt{position:relative;font:800 40px/1 var(--head);letter-spacing:-.04em;animation:bannerPopPlain .6s ease-out}
.won-chip{position:relative;margin-top:4px;font-size:11px;font-weight:800;background:var(--gold);display:inline-block;padding:3px 10px;border-radius:999px;border:2px solid var(--ink)}
.minis{flex:1;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;min-height:0}
.mini-row{display:flex;gap:10px}
.mini-card{width:calc(64px * var(--cz,1));aspect-ratio:206/328;border-radius:12px;border:3px solid var(--ink);background:var(--red);position:relative;animation:deal .5s cubic-bezier(.22,1.3,.36,1) both}
.mini-card.special{background:#1A1410;box-shadow:0 0 0 2px var(--gold) inset}
.mini-face{position:absolute;inset:6px;border-radius:8px;border:2px solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;padding:4px}
.mini-face b{font:800 17px/1 var(--head);letter-spacing:-.03em}
.mini-face span{font-size:8px;font-weight:800;line-height:1.15}
.mini-face.gold{background:var(--gold);color:var(--ink)} .mini-face.blue{background:var(--blue);color:#fff}
.mini-face.cream{background:var(--divider);color:var(--muted)} .mini-face.red{background:var(--red);color:#fff}
.cta-wrap.two{display:flex;flex-direction:column;gap:8px}

/* Prizes / Rules */
.page-title{margin-top:20px;text-align:center;font:800 26px/1.05 var(--head);letter-spacing:-.03em}
.prize-list{margin-top:14px;flex:1;overflow:auto;display:flex;flex-direction:column;gap:8px;padding-bottom:14px}
.prize-row{background:#fff;border:3px solid var(--ink);border-radius:16px;padding:9px 12px;display:flex;align-items:center;gap:10px}
.prize-amt{font:800 18px var(--head);color:var(--green-dk)}
.empty{text-align:center;font-weight:700;color:var(--brown);margin-top:24px}
.rules{margin-top:16px;display:flex;flex-direction:column;gap:10px;flex:1;overflow:auto}
.rule{background:#fff;border:3px solid var(--ink);border-radius:16px;padding:10px 12px;display:flex;gap:12px;align-items:flex-start;font-size:13px;font-weight:700;line-height:1.4}
.rule b{width:26px;height:26px;border-radius:50%;background:var(--gold);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font:800 13px var(--head);flex:none}
.link.replay{margin:6px auto 14px;display:block}

/* held / void prizes */
.held-line{margin-top:8px;text-align:center;font-size:11px;font-weight:800;color:var(--brown);background:rgba(255,255,255,.55);border-radius:999px;padding:4px 10px;align-self:center}
.counter-light{position:relative}
.held-pill{display:none;position:absolute;left:50%;top:-11px;transform:translateX(-50%);background:var(--gold);border:2px solid var(--ink);border-radius:999px;padding:1px 8px;font-size:9px;font-weight:800;white-space:nowrap}
.s-cards.held .held-pill{display:block}
.held-note{position:relative;margin-top:6px;font-size:11px;font-weight:800;color:var(--brown)}
.tag{display:inline-block;margin-left:4px;font-size:9px;font-weight:800;border:2px solid var(--ink);border-radius:999px;padding:0 6px;vertical-align:1px}
.tag.held{background:var(--gold)} .tag.void{background:var(--divider);color:var(--muted)}
.prize-amt.held{color:var(--muted)} .prize-amt.void{color:var(--muted);text-decoration:line-through}

/* ===================== v2 revised screens ===================== */
/* S3 card picker */
.s-pick .pick-title{margin-top:16px;text-align:center;font:800 30px/1.05 var(--head);letter-spacing:-.04em}
.pick-chip{margin-top:10px;display:flex;justify-content:center}
.pick-chip .chip{padding:4px 12px}
.pick-mid{margin:auto 0;display:flex;flex-direction:column;align-items:center}
.s-pick .stepper{display:flex;align-items:center;gap:18px}
.s-pick .step{width:56px;height:56px;border-radius:50%;border:3px solid var(--ink);font:800 26px var(--body);display:flex;align-items:center;justify-content:center}
.s-pick .step.minus{background:#fff;color:var(--ink)}
.s-pick .step.plus{background:var(--green);color:#fff}
.s-pick .n{min-width:80px;text-align:center;font:800 76px/1 var(--head);letter-spacing:-.05em;display:inline-block}
.s-pick .n.bounce{animation:chipBounce .4s cubic-bezier(.3,1.6,.5,1)}
.s-pick .pk-line{margin-top:14px;font:800 14px/1.2 var(--head);letter-spacing:-.02em;text-align:center}
.s-pick .cta{letter-spacing:.04em}
.s-pick .cta-wrap{margin-top:0}

/* S4 scratch: stats strip, arrows on the card edges */
.s-cards .counter-light{margin-top:10px;padding:6px 14px}
.s-cards .counter-light .big{font-size:22px}
.s-cards .card-stage{padding:14px 0 0}
.card-row{position:relative;width:268px;display:flex;justify-content:center}
.card-slot{position:relative;display:flex;justify-content:center}
.card-slot .card-anim{transition:transform .38s cubic-bezier(.22,1.25,.36,1),opacity .3s}
.card-slot .card-anim.out-left,.card-slot .card-anim.out-right{position:absolute;top:0}
.card-anim.out-left{transform:translateX(-120%) rotate(-8deg);opacity:0}
.card-anim.out-right{transform:translateX(120%) rotate(8deg);opacity:0}
.card-anim.in-right{animation:cardIn .42s cubic-bezier(.22,1.25,.36,1)}
.card-anim.in-left{animation:cardInL .42s cubic-bezier(.22,1.25,.36,1)}
.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:36px;height:36px;border-radius:50%;background:#fff;border:3px solid var(--ink);font:800 20px/1 var(--body);color:var(--ink);display:flex;align-items:center;justify-content:center;padding:0 0 2px}
.arrow.prev{left:-6px} .arrow.next{right:-6px}
.arrow:disabled{opacity:.35}
.arrow:active{transform:translateY(-50%) scale(.92)}

/* S5 payoff */
.s-payoff .won-head{margin-top:22px}
.s-payoff .won-rays{background:repeating-conic-gradient(from 0deg,rgba(255,200,61,.45) 0 9deg,transparent 9deg 18deg)}
.s-payoff .won-lbl{font:800 14px var(--body);letter-spacing:.06em;opacity:1}
.s-payoff .won-amt{font:800 56px/1 var(--head);letter-spacing:-.05em}
.s-payoff .won-chip{margin-top:6px;font-size:11px;padding:4px 12px;border-width:3px}
.stats-panel{position:relative;margin-top:18px;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:8px 14px;display:flex;justify-content:space-between;align-items:center}
.stats-panel .col{display:flex;flex-direction:column}
.stats-panel .col.end{align-items:flex-end}
.stats-panel .lbl{font-size:10px;font-weight:800;opacity:.65}
.stats-panel .big{font:800 24px/1 var(--head)}
.payoff-title{margin-top:16px;text-align:center;font:800 32px/1.05 var(--head);letter-spacing:-.04em}
.s-payoff .cta-wrap.two{gap:16px}
.cta.ghost{height:50px;font-size:18px;border-width:4px}