/* 🎨 Palette taken from your TAPITO Bot Brand Book v1.1 */
:root{
  --nz-purple-deep:#241046;
  --nz-purple:#4D2E8B;
  --nz-purple-600:#5E3CA3;
  --nz-purple-200:#CDC3DB;
  --nz-navy:#232366;
  --tp-yellow:#FAC800;
  --tp-yellow-shadow:#C99F00;
  --tp-teal:#12A5A5;
  --tp-pink:#E82870;
  --rh-lime:#7AC143;
  --korzinka:#E31E24;

  --r-card:28px;
  --r-btn:16px;
  --r-tile:20px;
  --r-pill:999px;
  --gutter:16px;
  --gap:12px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

body{
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* deeper, glossier ground to match the 3D toon key art */
  background:
    radial-gradient(120% 60% at 50% -8%, #3A1F6E 0%, transparent 60%),
    radial-gradient(90% 45% at 50% 104%, #3A1F6E 0%, transparent 62%),
    var(--nz-purple-deep);
  background-attachment:fixed;
  color:#fff;
  padding-bottom:96px;
  overscroll-behavior-y:contain;
  position:relative;
}

/* ---------- custom vector icons (no emoji anywhere) ---------- */
.ico{
  width:22px;height:22px;fill:currentColor;flex:none;display:block;
  --ico-knock:var(--nz-purple-deep);   /* colour the cut-out details take */
}
.ico-sm{width:17px;height:17px;display:inline-block;vertical-align:-3px;margin-right:7px}
/* on the yellow button the cut-outs must read as yellow, not purple */
.btn-primary .ico{width:20px;height:20px;--ico-knock:var(--tp-yellow)}
.draw-card .ico{--ico-knock:var(--tp-pink)}

/* ---------- floating chocos ---------- */
.wafer-field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.wf{
  position:absolute;width:54px;height:86px;opacity:.20;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.5));
  animation:drift var(--dur,17s) ease-in-out infinite;
  will-change:transform;
}
.wf.w1{top:6%;  left:-10%;  --r:-16deg; --dur:15s; animation-delay:0s;   width:58px;height:93px}
.wf.w2{top:22%; right:-12%; --r:20deg;  --dur:19s; animation-delay:-4s;  width:66px;height:106px}
.wf.w3{top:40%; left:-12%;  --r:9deg;   --dur:14s; animation-delay:-8s;  width:48px;height:77px;opacity:.15}
.wf.w4{top:56%; right:-8%;  --r:-13deg; --dur:21s; animation-delay:-11s; width:60px;height:96px}
.wf.w5{top:72%; left:-9%;   --r:24deg;  --dur:16s; animation-delay:-6s;  width:44px;height:70px;opacity:.14}
.wf.w6{top:88%; right:-11%; --r:-22deg; --dur:18s; animation-delay:-14s; width:56px;height:90px}
.wf.w7{top:14%; left:38%;   --r:34deg;  --dur:23s; animation-delay:-17s; width:40px;height:64px;opacity:.11}
/* a proper wiggle: drift, tilt and bob */
@keyframes drift{
  0%  {transform:translate3d(0,0,0)         rotate(var(--r))}
  25% {transform:translate3d(18px,-24px,0)  rotate(calc(var(--r) + 9deg))}
  50% {transform:translate3d(-8px,-42px,0)  rotate(calc(var(--r) - 7deg))}
  75% {transform:translate3d(-20px,-18px,0) rotate(calc(var(--r) + 5deg))}
  100%{transform:translate3d(0,0,0)         rotate(var(--r))}
}
@media (prefers-reduced-motion: reduce){
  .wf{animation:none;transform:rotate(var(--r))}
}

/* ---------- Nazari tile pattern (the real artwork, not generated) ---------- */
.hero-tiles{
  position:absolute;top:var(--hdr,56px);left:0;width:100%;height:230px;z-index:0;
  background:url("/assets/vectors/nazari_tile.png") repeat;
  background-size:150px 150px;
  opacity:.34;
  -webkit-mask-image:linear-gradient(#000 0%, rgba(0,0,0,.22) 50%, transparent 100%);
          mask-image:linear-gradient(#000 0%, rgba(0,0,0,.22) 50%, transparent 100%);
}

/* everything else sits above the decoration */
.topbar,main,.tabbar,.sheet{position:relative;z-index:1}
.tabbar{z-index:30}

/* ---------- top bar ---------- */
.topbar{
  display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) var(--gutter) 10px;
  position:sticky;top:0;z-index:20;
  background:var(--nz-purple-deep);
}
.brands{display:flex;align-items:center;gap:10px;margin:0 auto}
.brand-nazari{height:26px}
.brand-rahmani{height:15px;opacity:.9}
.divider{width:1px;height:18px;background:rgba(255,255,255,.3)}
.spacer{width:44px}

.pill{
  background:rgba(255,255,255,.12);color:#fff;border:0;
  border-radius:var(--r-pill);padding:6px 12px;
  font:700 12px/1 inherit;cursor:pointer;
}
.pill.owned{background:var(--tp-yellow);color:var(--nz-purple-deep);padding:5px 10px}

/* ---------- layout ---------- */
main{padding:0 var(--gutter)}
/* greeting is ONE line: a quiet "Salom," then the name in bold —
   the marker stroke underlines ONLY the name, not the prefix */
.greet{margin:6px 0 14px;font-size:30px;font-weight:800}
.greet .hello{color:var(--nz-purple-200);font-size:17px;font-weight:600}
.greet .uname{display:inline-block;position:relative}
.greet .uname::after{
  content:"";position:absolute;left:-2px;right:-6px;bottom:-9px;height:12px;
  background:no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='118' height='12' viewBox='0 0 118 12' fill='none'%3E%3Cpath d='M2 8.6C20 4.6 48 2.4 76 3.2c14 .4 28 2 40 4.8' stroke='%23FAC800' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* 🖌️ Hand-drawn marker stroke from the brand book — a curved brush,
   not a flat line. It's an SVG painted under the text. */
.name, .section-head h2{
  display:inline-block;position:relative;
  font-weight:800;margin-bottom:14px;
}
.name{font-size:30px}
.name::after, .section-head h2::after{
  content:"";position:absolute;left:-2px;right:-6px;bottom:-9px;height:12px;
  background:no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='118' height='12' viewBox='0 0 118 12' fill='none'%3E%3Cpath d='M2 8.6C20 4.6 48 2.4 76 3.2c14 .4 28 2 40 4.8' stroke='%23FAC800' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.hidden{display:none !important}
.muted{color:var(--nz-purple-200);font-size:12px}
.mt{margin-top:8px}

.card{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-card);
  padding:16px;margin-bottom:var(--gap);
}
.label{
  color:var(--nz-purple-200);font-size:10px;
  letter-spacing:.14em;font-weight:800;
}

/* ---------- countdown ---------- */
.countdown-card{background:#fff;color:var(--nz-purple-deep)}
.countdown-card .label{color:#7d6f95}
.countdown{display:flex;align-items:flex-end;gap:6px;margin:8px 0 12px}
.countdown div{display:flex;flex-direction:column;align-items:center;flex:1}
.countdown b{font-size:32px;font-weight:800;line-height:1}
.countdown span{font-size:9px;letter-spacing:.1em;color:#7d6f95;font-weight:700}
.countdown i{font-style:normal;font-size:24px;color:#c9c1d6;padding-bottom:14px}
.countdown .accent{color:var(--tp-pink)}
.campaign-row{
  display:flex;justify-content:space-between;
  border-top:1px solid #eee;padding-top:10px;
  font-size:12px;color:#7d6f95;font-weight:700;
}

/* ---------- stats ---------- */
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.stat{margin-bottom:var(--gap)}
.big{font-size:40px;font-weight:800;line-height:1.1;display:block}
.mid{font-size:24px;font-weight:800;display:block}
.yellow{color:var(--tp-yellow)}

/* ---------- buttons ---------- */
.btn-primary{
  width:100%;border:0;cursor:pointer;
  background:var(--tp-yellow);color:var(--nz-purple-deep);
  border-radius:var(--r-btn);padding:17px;
  font:800 17px/1 inherit;
  display:flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:0 4px 0 var(--tp-yellow-shadow);
  margin-bottom:20px;
}
.btn-primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--tp-yellow-shadow)}

/* ---------- collection tiles ---------- */
.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.section-head h2{font-size:20px}
/* counter chip: small text never sits on the raw pattern (brief §4) */
.section-head .muted{
  background:rgba(36,16,70,.72);padding:4px 10px;border-radius:var(--r-pill);
}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-bottom:var(--gap)}
.tile{
  background:#fff;color:var(--nz-purple-deep);
  border-radius:var(--r-tile);padding:12px;
  display:flex;flex-direction:column;gap:8px;
}
.tile.locked{opacity:.45}
.tile-art{
  height:78px;border-radius:12px;background:#f4f1fa;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
}
.tile-art img{width:100%;height:100%;object-fit:contain;padding:6px}
.tile-art img.ghost{filter:grayscale(1) brightness(.85);opacity:.5}
.tier{
  position:absolute;top:6px;left:6px;
  font-size:8px;font-weight:800;letter-spacing:.08em;
  padding:3px 6px;border-radius:99px;color:#3a2b00;
}
.tier-1{background:#e6ddf0;color:#5b4a7a}
.tier-2{background:linear-gradient(135deg,#e8e8ee,#b9bcc7);color:#33384a}
.tier-3{background:linear-gradient(135deg,#ffe58a,#e8b040);color:#5a3d00}
.tier-4{background:linear-gradient(135deg,#12A5A5,#7AC143,#E82870);color:#fff}
.tile b{font-size:13px;font-weight:800}
.segs{display:flex;gap:4px}
.seg{height:6px;flex:1;border-radius:99px;background:#e3ddef}
.seg.on{background:var(--nz-purple)}
.seg.gold{background:var(--tp-yellow)}

/* ---------- badge / draw ---------- */
.badge{display:flex;align-items:center;gap:12px}
.badge-dot{
  width:44px;height:44px;border-radius:14px;flex:none;
  background:linear-gradient(135deg,var(--tp-teal),var(--rh-lime));
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.draw-card{background:var(--tp-pink);border-color:transparent}
.draw-card b{font-size:15px}
.draw-card .muted{color:rgba(255,255,255,.85);margin-top:4px}

/* ---------- retailers ---------- */
/* Tiny "AVAILABLE AT" pinned left, out of the flow so it can never
   collide with the logos. The × sits on the page's true centre line:
   equal 1fr columns each side push it to the exact middle. */
.retailers{
  display:flex;flex-direction:column;align-items:stretch;gap:9px;
  padding:24px 0 12px;
}
/* tiny label on its own line — can never collide with the logos */
.retailers .muted{
  font-size:8.5px;letter-spacing:.18em;font-weight:800;
  opacity:.45;text-align:left;
}
.retailer-logos{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;column-gap:16px;
}
.retailer-logos img:first-of-type{justify-self:end}   /* korzinka → right */
.retailer-logos .olma{justify-self:start}             /* olma     → left  */
.cross{
  justify-self:center;
  font-size:13px;font-weight:700;color:var(--nz-purple-200);opacity:.55;
}
.retailers img{height:17px;opacity:.92}
.retailers .olma{height:23px}

/* ---------- prizes: swipeable carousel ---------- */
.draws-line{margin-bottom:14px;font-size:13px}
.carousel{position:relative;margin:0 calc(var(--gutter) * -1)}
.track{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px var(--gutter) 6px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.track::-webkit-scrollbar{display:none}
.prize{
  flex:0 0 78%;max-width:320px;scroll-snap-align:center;margin:0;
  background:linear-gradient(170deg,rgba(255,255,255,.10),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.12);
  border-radius:26px;overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.36);
}
.prize-art{position:relative;aspect-ratio:1/1;background:var(--nz-purple-deep)}
.prize-art img{width:100%;height:100%;object-fit:cover;display:block}
.prize .qty{
  position:absolute;top:11px;right:11px;
  background:var(--tp-yellow);color:var(--nz-purple-deep);
  font-size:12.5px;font-weight:800;padding:4px 11px;border-radius:999px;
  box-shadow:0 3px 10px rgba(0,0,0,.3);
}
.prize figcaption{padding:14px 16px 17px;text-align:center}
.prize figcaption b{display:block;font-size:16px;line-height:1.25}
.prize figcaption small{
  display:block;margin-top:4px;font-size:11.5px;color:var(--nz-purple-200);
}

/* 🏆 the grand prize — gold everything, so it can never be mistaken for
   one of the ordinary cards in the same swipe */
.prize.grand{
  border:2px solid var(--tp-yellow);
  background:linear-gradient(170deg,rgba(250,200,0,.20),rgba(250,200,0,.05));
  box-shadow:0 14px 38px rgba(0,0,0,.42), 0 0 30px rgba(250,200,0,.28);
}
.prize.grand .prize-art{background:#2C1550}
.prize.grand .qty{background:#fff;color:var(--nz-purple-deep)}
.prize .crown{
  position:absolute;top:11px;left:11px;
  background:var(--tp-yellow);color:var(--nz-purple-deep);
  font-size:11px;font-weight:900;letter-spacing:.5px;
  padding:4px 10px;border-radius:999px;
  box-shadow:0 3px 10px rgba(0,0,0,.35);
}
.prize figcaption em.gold{
  display:block;margin-top:6px;font-style:normal;
  font-size:11.5px;font-weight:800;color:var(--tp-yellow);
}
/* arrows */
.cnav{
  position:absolute;top:38%;transform:translateY(-50%);
  width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(36,16,70,.82);color:var(--tp-yellow);
  display:grid;place-items:center;font-size:20px;font-weight:800;
  box-shadow:0 4px 14px rgba(0,0,0,.4);z-index:2;
}
.cnav.prev{left:4px} .cnav.next{right:4px}
.cnav:disabled{opacity:.25;cursor:default}
/* dots */
.dots{display:flex;justify-content:center;gap:7px;margin-top:14px}
.dots i{
  width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.28);
  transition:all .22s ease;cursor:pointer;
}
.dots i.on{background:var(--tp-yellow);width:22px}

/* ---------- lists ---------- */
.list{display:flex;flex-direction:column;gap:8px}
.row{
  background:rgba(255,255,255,.07);border-radius:14px;padding:12px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.row small{color:var(--nz-purple-200);font-size:11px;display:block}
.row.me{background:rgba(250,200,0,.18);border:1px solid var(--tp-yellow)}
.rank-no{
  width:26px;height:26px;border-radius:9px;flex:none;
  background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;
}
.tag{font-size:11px;font-weight:800;padding:4px 9px;border-radius:var(--r-pill)}
.tag.accepted{background:var(--rh-lime);color:#00401A}
.tag.rejected{background:#ff6b6b;color:#4a0000}
.tag.pending{background:var(--tp-yellow);color:var(--nz-purple-deep)}

/* ---------- tab bar ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:rgba(36,16,70,.97);
  border-top:1px solid rgba(255,255,255,.1);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  backdrop-filter:blur(12px);
}
.tabbtn{
  background:none;border:0;color:var(--nz-purple-200);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:9px 4px;border-radius:14px;font:inherit;
  transition:color .18s ease, background .18s ease;
}
.tabbtn small{font-size:10px;font-weight:800;letter-spacing:.01em}
.tabbtn.active{color:var(--tp-yellow);background:rgba(250,200,0,.13)}
.tabbtn.active .ico{transform:translateY(-1px) scale(1.06)}
.tabbtn .ico{transition:transform .18s cubic-bezier(.2,1.3,.4,1)}

/* ---------- bottom sheet ---------- */
.sheet{
  position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.6);
  display:flex;align-items:flex-end;
}
.sheet-inner{
  background:var(--nz-purple);width:100%;
  border-radius:26px 26px 0 0;padding:22px var(--gutter)
    calc(26px + env(safe-area-inset-bottom));
  position:relative;animation:up .22s ease;
  max-height:88vh;overflow:auto;
}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-close{
  position:absolute;right:14px;top:14px;border:0;cursor:pointer;
  background:rgba(255,255,255,.15);color:#fff;
  width:30px;height:30px;border-radius:50%;font-size:14px;
}
.sheet h3{font-size:20px;margin-bottom:10px}
.sheet p{color:var(--nz-purple-200);font-size:14px;line-height:1.5;margin-bottom:14px}
.sheet input{
  width:100%;padding:14px;border-radius:var(--r-btn);
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.2);color:#fff;font:inherit;font-size:14px;
  margin-bottom:12px;
}
.sheet input::placeholder{color:rgba(255,255,255,.4)}
/* the two big scan choices */
.big-choice{
  justify-content:flex-start;text-align:left;gap:14px;
  padding:15px 16px;margin-bottom:12px;
}
.big-choice b{display:block;font-size:16px;line-height:1.2}
.big-choice small{
  display:block;font-size:11.5px;font-weight:600;opacity:.72;margin-top:3px;
}
.choice-ico{font-size:26px;flex:none}
.big-choice.alt{
  background:rgba(255,255,255,.14);color:#fff;
  box-shadow:0 4px 0 rgba(0,0,0,.22);
}
.link-toggle{
  display:block;margin:4px auto 10px;background:none;border:0;cursor:pointer;
  color:var(--nz-purple-200);font:600 13px/1 inherit;text-decoration:underline;
}
.result-emoji{font-size:44px;text-align:center;margin-bottom:8px}
.win{color:var(--tp-yellow);font-size:26px;font-weight:800;text-align:center}
.prod-line{
  display:flex;justify-content:space-between;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:14px;
}
.spin{
  width:34px;height:34px;margin:14px auto;
  border:3px solid rgba(255,255,255,.25);border-top-color:var(--tp-yellow);
  border-radius:50%;animation:sp .8s linear infinite;
}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- centred mode (scanning + win) ---------- */
.sheet.centered{align-items:center;justify-content:center;padding:20px}
.sheet.centered .sheet-inner{
  border-radius:32px;max-width:340px;width:100%;
  padding:28px 22px 30px;animation:pop .25s cubic-bezier(.2,1.2,.35,1);
  background:linear-gradient(160deg,var(--nz-purple),var(--nz-purple-deep));
  border:1px solid rgba(255,255,255,.12);
}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}

/* 🔎 the big scanner square */
.scanner{
  position:relative;width:230px;height:230px;margin:4px auto 22px;
  border-radius:34px;overflow:hidden;background:#fff;
  box-shadow:0 0 0 3px rgba(250,200,0,.28), 0 18px 44px rgba(0,0,0,.42);
  animation:breathe 2s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{box-shadow:0 0 0 3px rgba(250,200,0,.25), 0 18px 44px rgba(0,0,0,.42)}
  50%    {box-shadow:0 0 0 8px rgba(250,200,0,.10), 0 18px 52px rgba(0,0,0,.5)}
}
.check-vid{width:100%;height:100%;object-fit:cover}

/* sweeping light beam */
.beam{
  position:absolute;left:0;right:0;height:38%;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(250,200,0,0) 0%,
    rgba(250,200,0,.28) 55%,
    rgba(250,200,0,.95) 82%,
    rgba(255,255,255,.95) 88%,
    rgba(250,200,0,0) 100%);
  animation:beam 1.8s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes beam{0%{top:-38%}100%{top:100%}}

/* viewfinder corners */
.corner{
  position:absolute;width:26px;height:26px;pointer-events:none;
  border:3px solid var(--tp-yellow);
}
.corner.tl{top:12px;left:12px;border-right:0;border-bottom:0;border-radius:12px 0 0 0}
.corner.tr{top:12px;right:12px;border-left:0;border-bottom:0;border-radius:0 12px 0 0}
.corner.bl{bottom:12px;left:12px;border-right:0;border-top:0;border-radius:0 0 0 12px}
.corner.br{bottom:12px;right:12px;border-left:0;border-top:0;border-radius:0 0 12px 0}

.scan-title{
  text-align:center;font-size:18px;margin-bottom:12px;
  transition:opacity .18s ease;min-height:24px;
}
/* the win number pops in so the reveal feels like a moment */
.win{animation:winpop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes winpop{
  0%{transform:scale(.4);opacity:0}
  60%{transform:scale(1.15)}
  100%{transform:scale(1);opacity:1}
}

/* ---------- 🎉 prize rain on a successful scan ----------
   The 4 real SKUs + the geometric Otte biscuit tumble down the screen,
   like confetti — the moment the receipt is accepted. */
.rain{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.rain img{
  position:absolute;top:-18%;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));
  animation:rainfall linear forwards;
}
@keyframes rainfall{
  0%  {transform:translateY(0) rotate(var(--r0,0deg));opacity:1}
  92% {opacity:1}
  100%{transform:translateY(135vh) rotate(var(--r1,300deg));opacity:.9}
}
@media (prefers-reduced-motion: reduce){.rain{display:none}}

/* three bouncing dots — scoped so they never hijack the carousel dots */
.scan-dots{display:flex;justify-content:center;gap:7px}
.scan-dots i{
  width:9px;height:9px;border-radius:50%;background:var(--tp-yellow);
  animation:bounce 1s ease-in-out infinite;
}
.scan-dots i:nth-child(2){animation-delay:.16s}
.scan-dots i:nth-child(3){animation-delay:.32s}
@keyframes bounce{
  0%,80%,100%{transform:translateY(0);opacity:.45}
  40%{transform:translateY(-9px);opacity:1}
}

/* ---------- 🎆 chocolate fountain (successful scan) ---------- */
.fountain{
  position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden;
  transition:opacity .6s ease;
}
.fountain.fade{opacity:0}
.drop{
  position:absolute;bottom:-90px;height:auto;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.45));
  animation:erupt 2.4s cubic-bezier(.16,.62,.34,1) forwards;
  will-change:transform,opacity;
}
/* up like a fountain jet, then fall back down under gravity */
@keyframes erupt{
  0%   {transform:translate3d(0,0,0) rotate(0deg) scale(.7); opacity:0}
  12%  {opacity:1}
  55%  {transform:translate3d(calc(var(--sway) * .6), calc(var(--rise) * -1), 0)
                 rotate(calc(var(--spin) * .6)) scale(1)}
  100% {transform:translate3d(var(--sway), 14vh, 0)
                 rotate(var(--spin)) scale(.9); opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .drop{animation-duration:.9s}
}

/* ---------- receipt result: real pack thumbnail per SKU ---------- */
.pl-left{display:flex;align-items:center;gap:10px;min-width:0}
.pl-thumb{
  width:44px;height:30px;object-fit:contain;flex:none;
  transform:rotate(-11deg);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));
}

/* ---------- win screen: the number is the hero ---------- */
.tick{width:64px;height:64px;margin:2px auto 10px}
.tick svg{width:100%;height:100%;overflow:visible}
.tick circle{fill:none;stroke:var(--rh-lime);stroke-width:4;
  stroke-dasharray:151;stroke-dashoffset:151;
  animation:tickRing .5s cubic-bezier(.2,.8,.3,1) forwards}
.tick path{fill:none;stroke:var(--rh-lime);stroke-width:5;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:40;stroke-dashoffset:40;
  animation:tickMark .35s cubic-bezier(.2,.8,.3,1) .34s forwards}
@keyframes tickRing{to{stroke-dashoffset:0}}
@keyframes tickMark{to{stroke-dashoffset:0}}

.sheet .win{
  font-size:46px;line-height:1.05;font-weight:800;
  color:var(--tp-yellow);text-align:center;margin:0;
}
.sheet .win-sub{
  text-align:center;margin:4px 0 16px;
  font-size:15px;font-weight:700;color:var(--nz-purple-200);
}

/* gift tokens mixed into the fountain */
.drop-gift{display:grid;place-items:center}
.drop-gift svg{width:100%;height:auto;fill:var(--tp-yellow);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}

/* ================= brand-tile design devices =================
   The Nazari pattern used as a *material*, not wallpaper: it fills
   punched shapes — a ticket stub, a chip, a corner notch — so the
   identity shows up in the furniture of the interface. */
.tilefill{
  background:url("/assets/vectors/nazari_tile.png") repeat;
  background-size:74px 74px;
}

/* --- greeting row: name centred, ticket-style ID pinned right --- */
.greet-row{
  /* hello sits left, the name is absolutely centred on the page so the
     side items can never push it off, the id pins right */
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  min-height:46px;margin:10px 0 18px;
}
.greet-row .hello{
  color:var(--nz-purple-200);font-size:15px;font-weight:600;
  flex:none;z-index:1;
}
.greet-row .uname{
  position:absolute;left:50%;transform:translateX(-50%);
  margin:0;font-size:29px;font-weight:800;white-space:nowrap;
  max-width:52%;overflow:hidden;text-overflow:ellipsis;
}
.greet-row .uname::after{
  content:"";position:absolute;left:-2px;right:-6px;bottom:-8px;height:11px;
  background:no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='118' height='12' viewBox='0 0 118 12' fill='none'%3E%3Cpath d='M2 8.6C20 4.6 48 2.4 76 3.2c14 .4 28 2 40 4.8' stroke='%23FAC800' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* participant number in a Nazari-tile pill */
.idchip{
  position:relative;isolation:isolate;flex:none;z-index:1;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;
  font-variant-numeric:tabular-nums;
  background:url("/assets/vectors/nazari_tile.png") repeat;
  background-size:52px 52px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.9), 0 3px 10px rgba(0,0,0,.35);
}
.idchip::before{
  content:"";position:absolute;inset:0;border-radius:999px;
  background:rgba(255,255,255,.74);z-index:-1;
}
.idchip i{
  font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.14em;
  color:#6B5C8A;
}
.idchip b{font-size:12.5px;font-weight:800;color:var(--nz-purple-deep)}

/* --- the countdown card as a torn ticket, tile band down its edge --- */
.countdown-card{position:relative;overflow:hidden}
.countdown-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:14px;
  background:url("/assets/vectors/nazari_tile.png") repeat;
  background-size:58px 58px;
}
.countdown-card::after{           /* the perforation, like a real stub */
  content:"";position:absolute;left:14px;top:0;bottom:0;width:2px;
  background:repeating-linear-gradient(#fff 0 6px, #d9d0e8 6px 12px);
}
.countdown-card > *{position:relative;padding-left:12px}

/* --- section heading gets a small tile square, like a bullet --- */
.section-head h2::before{
  content:"";display:inline-block;vertical-align:-2px;
  width:15px;height:15px;border-radius:4px;margin-right:9px;
  background:url("/assets/vectors/nazari_tile.png") repeat;
  background-size:34px 34px;
}

/* --- retailers: each shop sits beside its own logo, bases aligned,
       and the x lands on the page centre line --- */
.retailers{
  display:flex;flex-direction:column;align-items:stretch;gap:12px;
  padding:26px 0 14px;
}
.retail-label{
  font-size:8.5px;letter-spacing:.18em;font-weight:800;opacity:.45;
}
.retailer-logos{
  /* two equal halves; the x is pinned to the true centre so it can never
     drift when one shop's lockup is wider than the other */
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  align-items:end;column-gap:40px;width:100%;
}


.retailers .cross{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:16px;margin:0;padding:0;
}

/* logo and storefront side by side, sitting on the same baseline.
   Heights follow a golden ratio: 58 / 1.618 ~= 36 */



/* golden ratio against the storefront: 50 / 1.618 ~= 31 for Olma's mark */


.retailers .cross{
  color:var(--nz-purple-200);opacity:.55;font-size:15px;font-weight:700;
}

/* --- ribbon in the fountain --- */
.drop-ribbon{display:grid;place-items:center}
.drop-ribbon svg{width:100%;height:auto;
  filter:drop-shadow(0 4px 9px rgba(0,0,0,.45))}

/* ---- stat cards wear the tile as an L along the top and left edge ---- */
.stat{position:relative;overflow:hidden;isolation:isolate}
.stat::before,.stat::after{
  content:"";position:absolute;z-index:-1;
  background:url("/assets/vectors/nazari_tile.png") repeat;
  background-size:62px 62px;
}
.stat::before{top:0;left:0;right:0;height:11px}   /* top rail  */
.stat::after {top:0;left:0;bottom:0;width:11px}   /* left rail */
.stat > *{position:relative}
.stat .label:first-of-type{padding-left:8px}
.stat .big,.stat .mid{padding-left:8px}
.stat .label.mt{padding-left:8px}