/* ─── Kipyatok mini-app ─────────────────────────────────────────
   Warm cream paper + red vintage accents. No AI gradients.        */

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

:root{
  --paper:      #f4ebde;
  --paper-soft: #efe4d2;
  --paper-deep: #e6d7bd;
  --ink:        #22160e;
  --ink-soft:   #5a4636;
  --red:        #a3161c;
  --red-deep:   #7d0f14;
  --red-soft:   #c94d52;
  --gold:       #b98a3d;
  --line:       rgba(163,22,28,.35);
  --shadow:     0 12px 30px rgba(50,20,10,.18);
  --shadow-soft:0 4px 14px rgba(50,20,10,.12);
  --radius-lg:  22px;
  --radius:     14px;
  --safe-bottom: max(env(safe-area-inset-bottom, 0), 12px);
  --safe-top: max(env(safe-area-inset-top, 0), 8px);
}

body{
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  background: var(--paper);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* paper texture */
#paper{
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1200px 800px at 20% -10%, #f9f0e2 0%, transparent 60%),
    radial-gradient(900px 700px at 110% 10%, #efe1c9 0%, transparent 55%),
    var(--paper);
  pointer-events: none;
}
#paper::after{
  content:""; position:absolute; inset:0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='7'/><feColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.09  0 0 0 0 0.04  0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .35; mix-blend-mode: multiply;
}
#edge{
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  box-shadow: inset 0 0 80px rgba(90, 40, 20, .18);
}

/* ── Top bar & tabs ──────────────────────────────────────────── */

.topbar{
  padding: calc(var(--safe-top) + 6px) 18px 6px;
  display: flex; flex-direction: column; gap: 10px;
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(to bottom, rgba(244,235,222,.94), rgba(244,235,222,.72));
  backdrop-filter: blur(6px);
}
.brand{ display:flex; align-items:center; justify-content:center; padding: 4px 0 2px; }
.brand-logo{
  height: 62px; width: auto; max-width: 82%;
  filter: drop-shadow(0 3px 6px rgba(160,20,25,.16));
  user-select: none; -webkit-user-drag: none;
}

.tabs{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding: 4px; border-radius: 14px;
  background: var(--paper-soft); border: 1px solid rgba(163,22,28,.15);
}
.tabs button{
  border: 0; background: transparent; padding: 9px 6px;
  font: 600 14px/1 'Manrope', sans-serif;
  color: var(--ink-soft); border-radius: 10px; cursor: pointer;
  transition: background .2s, color .2s, transform .12s;
}
.tabs button:active{ transform: scale(.97); }
.tabs button.active{
  background: var(--paper); color: var(--red);
  box-shadow: var(--shadow-soft);
}
.tabs button{ position: relative; }
.tab-badge{
  position: absolute; top: 2px; right: 4px;
  background: var(--red); color: #fff5e6;
  font: 700 10.5px/1 'Manrope', sans-serif;
  padding: 3px 6px; border-radius: 999px;
  min-width: 16px; text-align: center;
  box-shadow: 0 2px 4px rgba(160,20,25,.35);
}
.tab-badge.hidden{ display: none; }

/* ── Section base ────────────────────────────────────────────── */

main{ padding: 18px 18px calc(var(--safe-bottom) + 40px); }
.tab{ display: none; animation: fadeUp .5s ease both; }
.tab.active{ display: block; }

@keyframes fadeUp{
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ── Ornate heading ──────────────────────────────────────────── */

.ornate{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 34px;
  line-height: 1.02;
  margin: 4px 0 8px;
  color: var(--ink);
  text-align: center;
}
.ornate.small{ font-size: 26px; }
.ornate span{ color: var(--ink); font-weight: 500; }
.ornate em{
  display: block;
  font-style: italic;
  color: var(--red);
  font-size: 1.08em;
}
.ornate::before, .ornate::after{
  content: "❦"; color: var(--red); opacity: .55;
  display: block; font-size: 18px; margin: 4px 0;
}

.hero{ text-align: center; padding: 6px 4px 12px; }
.lead{
  color: var(--ink-soft); text-align: center;
  font-size: 15px; line-height: 1.45; max-width: 32ch; margin: 6px auto 12px;
}

.pills{ display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pill{
  padding: 7px 12px; border-radius: 100px;
  background: var(--paper-soft); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-soft);
}
.pill b{ color: var(--red-deep); font-weight: 700; }
.pill.hidden{ display: none; }

/* ── Stage with cups ─────────────────────────────────────────── */

.stage{
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1.02;
  margin: 18px auto 4px;
  position: relative;
  perspective: 900px;
}
.stage::before,
.stage::after{  /* two wood counter shadow lines under each row */
  content:""; position: absolute; left: 4%; right: 4%;
  height: 8px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(45,20,10,.28), rgba(45,20,10,0) 70%);
  filter: blur(1px);
}
.stage::before{ top: 48%; }
.stage::after { bottom: 4%; }

.cup{
  --r: 0;   /* row 0 = top, 1 = bottom */
  --c: 0;   /* column 0..2 */
  position: absolute;
  width: 24%;
  top:  calc(4% + var(--r) * 48%);
  left: calc(7% + var(--c) * 31%);   /* 7 + 3*24 + 2*7 + 7 = 100 → symmetric */
  transform-origin: 50% 92%;
  cursor: pointer;
  transition: transform .25s ease, top .55s cubic-bezier(.5,.05,.3,1), left .55s cubic-bezier(.5,.05,.3,1);
  filter: drop-shadow(0 10px 12px rgba(50,25,10,.22));
  will-change: transform, left, top;
}
.cup img{ width: 100%; display: block; user-select: none; -webkit-user-drag: none; }

.cup:hover{ transform: translateY(-3px) rotate(-1.5deg); }
.cup.picked{ transform: translateY(-4px) rotate(0deg); }
.cup.disabled{ pointer-events: none; opacity: .6; filter: grayscale(.4); }
.cup.lifted{ animation: cupLift .9s cubic-bezier(.2,.9,.2,1) forwards; }
.cup.fallen{ animation: cupFall .5s ease both; }
.cup.picked-once{ animation: pickBounce .4s ease; }

@keyframes cupLift{
  0%   { transform: translateY(0) rotate(0deg); }
  40%  { transform: translateY(-22%) rotate(-6deg); }
  70%  { transform: translateY(-46%) rotate(-14deg); }
  100% { transform: translateY(-70%) rotate(-22deg); opacity: 0; }
}
@keyframes cupFall{
  from { transform: translateY(-4px); opacity: .8; }
  to   { transform: translateY(0);    opacity: .55; }
}
@keyframes pickBounce{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px) rotate(-2deg); }
}

.hint{
  text-align: center; color: var(--ink-soft); font-size: 13.5px;
  margin: 10px auto 6px; max-width: 34ch;
}

.cta-row{
  display: flex; gap: 10px; justify-content: center;
  margin-top: 14px; flex-wrap: wrap;
}
.btn-primary,.btn-ghost,.btn-linky{
  font: 600 15px/1 'Manrope', sans-serif;
  padding: 13px 20px; border-radius: 12px;
  cursor: pointer; transition: transform .12s, box-shadow .2s, background .2s;
}
.btn-primary{
  background: var(--red); color: #fff5e6;
  border: 1px solid var(--red-deep);
  box-shadow: 0 6px 16px rgba(160,20,25,.28);
}
.btn-primary:active{ transform: translateY(1px); }
.btn-primary:disabled{ opacity: .55; cursor: default; box-shadow:none; }
.btn-ghost{
  background: transparent; color: var(--red);
  border: 1px solid var(--red);
}
.btn-ghost:active{ background: rgba(163,22,28,.06); transform: translateY(1px); }
.btn-linky{
  background: transparent; color: var(--ink-soft);
  border: 0; text-decoration: underline;
}

/* ── Reveal overlay + coupon ─────────────────────────────────── */

.reveal{
  position: fixed; inset: 0; z-index: 60;
  background: radial-gradient(circle at 50% 30%, rgba(37,20,10,.55), rgba(20,10,4,.85));
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding: max(env(safe-area-inset-top), 16px) 16px max(env(safe-area-inset-bottom), 16px);
  animation: revealBg .4s ease both;
  overflow: auto;
}
.reveal.hidden{ display: none; }
@keyframes revealBg{ from { opacity: 0; } to { opacity: 1; } }

.coupon-wrap{
  width: min(90vw, 340px);
  display: block;
  animation: couponIn .8s cubic-bezier(.2,.85,.25,1) both;
}
.coupon-wrap > * + * { margin-top: 14px; }
@keyframes couponIn{
  0%   { transform: translateY(60px) scale(.55) rotate(-6deg); opacity: 0; }
  60%  { transform: translateY(-6px) scale(1.03) rotate(1deg); opacity: 1; }
  100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
}

.coupon{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 900 / 506;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.55));
}
.coupon-bg{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  user-select: none; -webkit-user-drag: none;
}
.coupon-text{
  position: absolute; inset: 10% 12% 30% 12%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 3px; color: var(--ink);
}
.coupon-eyebrow{
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--red); opacity: .85;
}
.coupon-title{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700; font-size: clamp(17px, 4.6vw, 22px);
  line-height: 1.05; color: var(--red-deep);
  max-width: 100%;
}
.coupon-sub{
  font-size: 10.5px; color: var(--ink-soft); line-height: 1.25; max-width: 30ch;
}
.coupon-code-row{
  margin-top: 4px; display: flex; align-items: center; gap: 6px;
  padding: 3px 8px; border: 1.2px dashed var(--red-soft); border-radius: 8px;
  background: rgba(255,245,224,.7);
}
.coupon-code-row.hidden{ display: none; }
.coupon-code-row span{ font-size: 9px; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-soft); }
.coupon-code-row code{
  font: 700 13px/1 'Manrope', sans-serif; color: var(--red-deep); letter-spacing: .08em;
}
.coupon-timer{ font-size: 10px; color: var(--ink-soft); margin-top: 2px; }
.coupon-timer.hidden{ display: none; }
.coupon-timer b{ color: var(--red-deep); font-weight: 700; }
.coupon-timer.urgent b{ color: var(--red); animation: pulseUrgent 1.2s ease infinite; }
@keyframes pulseUrgent{ 50%{ opacity: .35; } }

.reveal-actions{
  display: flex; flex-direction: column; gap: 10px;
  align-items: stretch;
  width: 100%;
}
/* On the dark reveal overlay the ghost + linky buttons need light strokes. */
.reveal-actions .btn-primary{
  text-align: center;
  background: var(--red);
  color: #fff5e6;
  border: 1px solid #ffd8ac;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.reveal-actions .btn-ghost{
  text-align: center;
  background: rgba(255, 249, 237, .12);
  color: #fff5e6;
  border: 1px solid rgba(255, 245, 230, .55);
  backdrop-filter: blur(2px);
}
.reveal-actions .btn-ghost:active{
  background: rgba(255, 249, 237, .22);
}
.reveal-actions .btn-linky{
  text-align: center;
  color: #f4d9b9;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Fullscreen cashier ──────────────────────────────────────── */

.cashier{
  position: fixed; inset: 0; z-index: 80;
  background: linear-gradient(180deg, #fff8ec, #f2e5cf);
  display: grid; place-items: center;
  animation: fadeUp .35s ease both;
}
.cashier.hidden{ display: none; }
.cashier-inner{
  width: min(90vw, 440px); text-align: center; padding: 32px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.cashier-brand{
  font-family: 'Cormorant Garamond', serif; font-size: 24px; color: var(--red);
  letter-spacing: .16em; text-transform: uppercase;
}
.cashier-prize{
  font-family: 'Cormorant Garamond', serif; font-weight: 700;
  font-size: clamp(30px, 8vw, 44px); color: var(--red-deep); line-height: 1;
}
.cashier-code{
  font: 800 clamp(30px, 8vw, 44px)/1 'Manrope', sans-serif;
  color: var(--ink); letter-spacing: .18em;
  padding: 14px 22px; border: 2px dashed var(--red); border-radius: 14px;
  background: #fff9ee;
}
.cashier-hint{ color: var(--ink-soft); font-size: 14px; }

/* ── Sub gate ───────────────────────────────────────────────── */
.sub-gate{
  position: fixed; inset: 0; z-index: 70;
  background: radial-gradient(circle at 50% 30%, rgba(37,20,10,.65), rgba(20,10,4,.9));
  display: grid; place-items: center; padding: 16px;
  animation: revealBg .35s ease both;
}
.sub-gate.hidden{ display: none; }
.sub-card{
  width: min(92vw, 360px);
  background: var(--paper);
  border-radius: 22px;
  padding: 26px 22px 22px;
  text-align: center;
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 10px; align-items: stretch;
  animation: couponIn .55s cubic-bezier(.2,.85,.25,1) both;
}
.sub-eyebrow{
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--red);
}
.sub-card h3{
  margin: 0;
  font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 30px;
  color: var(--red-deep); line-height: 1.1;
}
.sub-card h3 span{ color: var(--ink); font-style: italic; }
.sub-card p{
  margin: 4px 0 8px; font-size: 14px; line-height: 1.4; color: var(--ink-soft);
}

/* ── Others row (what could have been) ──────────────────────── */
.others-row{
  width: 100%; padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 249, 237, .08);
  border: 1px dashed rgba(255, 245, 230, .35);
  text-align: center;
}
.others-row.hidden{ display: none; }
.others-title{
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  color: #f4d9b9; font-size: 14px; margin-bottom: 8px;
}
.others-list{
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.others-list span{
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 245, 230, .12);
  color: #fff5e6; font-size: 12px; font-weight: 500;
  border: 1px solid rgba(255, 245, 230, .2);
}

/* ── Confetti canvas ─────────────────────────────────────────── */
#confetti{
  position: fixed; inset: 0; pointer-events: none; z-index: 55;
}

/* ── Toast ───────────────────────────────────────────────────── */
.toast{
  position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 16px);
  transform: translateX(-50%);
  background: #221812; color: #fff5e6; padding: 10px 16px;
  border-radius: 10px; font-size: 14px; z-index: 90;
  box-shadow: var(--shadow); opacity: 0; transition: opacity .3s;
}
.toast.show{ opacity: 1; }
.toast.hidden{ opacity: 0; pointer-events: none; }

/* ── Prizes list ─────────────────────────────────────────────── */

.prize-list{ display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.prize-card{
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  position: relative; overflow: hidden;
  transition: transform .12s, box-shadow .2s;
}
.prize-card:active{ transform: scale(.985); }
.prize-title{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700; font-size: 22px; color: var(--red-deep);
  line-height: 1.15;
}
.prize-code{
  font: 700 15px/1.2 'Manrope', sans-serif;
  color: var(--ink);
  letter-spacing: .12em;
  padding: 2px 10px;
  border: 1.5px dashed var(--red-soft);
  border-radius: 8px;
  background: #fff9ee;
  margin-top: 4px;
}
.prize-time{
  margin-top: 8px;
  padding-top: 8px;
  width: 100%;
  border-top: 1px dashed var(--line);
  font: 600 12.5px/1.2 'Manrope', sans-serif;
  color: var(--ink-soft);
  text-align: center;
}
.prize-time b{ color: var(--red-deep); font-weight: 700; margin-left: 4px; }
.prize-time.urgent b{ color: var(--red); animation: pulseUrgent 1.2s ease infinite; }
.prize-empty{
  text-align: center; padding: 24px 8px; color: var(--ink-soft);
  border: 1px dashed var(--line); border-radius: 16px;
  background: rgba(255, 250, 240, .5);
}

/* ── About card ──────────────────────────────────────────────── */

.about-card{
  background: var(--paper-soft); border: 1px solid var(--line);
  border-radius: 18px; padding: 12px 16px; margin-top: 12px;
  box-shadow: var(--shadow-soft);
}
.about-row{
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px dashed var(--line);
  font-size: 14px;
}
.about-row:last-child{ border-bottom: 0; }
.about-row span{ color: var(--ink-soft); }
.about-row b{ color: var(--ink); text-align: right; }
.about-row code{ background: #fff9ee; padding: 1px 6px; border-radius: 6px; font: 600 12.5px/1.4 'Manrope'; }

/* ── util ────────────────────────────────────────────────────── */
.hidden{ display: none !important; }