/* Зооферма — бонусная карта (макет). Палитра и крафт-карта взяты с сайта zoofermaa.ru */
@font-face{font-family:Nunito;src:url(fonts/nunito-cyr.woff2) format('woff2');font-weight:300 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Nunito;src:url(fonts/nunito-lat.woff2) format('woff2');font-weight:300 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --green-900:#33481b;
  --green-800:#3f5a22;
  --green-700:#4d6b2a;
  --green-600:#5f8233;
  --green-100:#e7eed9;
  --cream:#fbf7ef;
  --brown-700:#7a5f39;
  --ink:#2c3424;
  --ink-2:#5c6452;
  --ease:cubic-bezier(.22,1,.36,1);
  --flip:cubic-bezier(.5,0,.15,1);

  /* Геометрия: карта сверху, шторка занимает остаток экрана */
  --vh:var(--tg-viewport-stable-height,100vh);
  --top:calc(18px + env(safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px) + var(--tg-safe-area-inset-top,0px));
  --card-w:min(calc(100vw - 48px),360px);
  --card-h:calc(var(--card-w) / 1.586);

  /* Шторка: плотное кремовое стекло (Thick) */
  --sheet-fill:rgba(251,247,239,.84);
  --sheet-solid:#f6f0e3;

  --paw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='6' cy='10' rx='2.2' ry='2.8'/%3E%3Cellipse cx='18' cy='10' rx='2.2' ry='2.8'/%3E%3Cellipse cx='9.3' cy='5.6' rx='2.1' ry='2.7'/%3E%3Cellipse cx='14.7' cy='5.6' rx='2.1' ry='2.7'/%3E%3Cpath d='M12 11.5c-3 0-6 3.6-6 6.2 0 1.7 1.3 2.6 2.8 2.6 1.3 0 2-.7 3.2-.7s1.9.7 3.2.7c1.5 0 2.8-.9 2.8-2.6 0-2.6-3-6.2-6-6.2z'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:Nunito,-apple-system,system-ui,sans-serif;
  color:var(--cream);
  background:radial-gradient(120% 80% at 85% 0%,#6d9140 0%,var(--green-700) 45%,var(--green-900) 100%) fixed,var(--green-800);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
}
[hidden]{display:none!important}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}

/* Тени листьев на фоне: дают стеклу шторки «что-то за собой» */
.ambient{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.amb-leaf{position:absolute;opacity:.22;filter:brightness(.25) blur(7px);animation:sway 14s ease-in-out infinite alternate}
.amb-leaf.a1{width:62vw;max-width:340px;right:-18vw;top:-6vh;rotate:200deg}
.amb-leaf.a2{width:58vw;max-width:320px;left:-22vw;bottom:8vh;rotate:-25deg;animation-delay:-5s}
.amb-leaf.a3{width:44vw;max-width:240px;right:-12vw;bottom:-6vh;rotate:30deg;animation-delay:-9s}
@keyframes sway{to{translate:0 14px;scale:1.04}}

.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}

/* ---------- Экран 1: номер ---------- */
.verify-box{width:100%;max-width:360px;text-align:center;animation:rise .7s var(--ease) both}
.emblem-badge{width:116px;height:116px;margin:0 auto 22px;border-radius:50%;background:var(--cream);display:grid;place-items:center;
  box-shadow:0 18px 40px -16px rgba(20,30,10,.6),inset 0 -3px 0 rgba(122,95,57,.12)}
.emblem-badge img{width:82px}
h1{font-size:30px;font-weight:900;letter-spacing:-.01em}
.lead{margin:10px auto 28px;max-width:20em;font-size:16px;line-height:1.45;color:rgba(251,247,239,.82)}
.step{display:flex;flex-direction:column;gap:10px;animation:rise .5s var(--ease) both}
.btn{height:54px;border-radius:16px;font-weight:800;font-size:17px;transition:scale .15s,opacity .2s}
.btn:active{scale:.97}
.btn.primary{background:linear-gradient(135deg,#e6d6b4,#cfb689);color:var(--green-800);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 14px 28px -14px rgba(20,30,10,.7)}
.btn.primary:disabled{opacity:.45}
.btn.link{height:44px;font-size:15px;font-weight:700;color:rgba(251,247,239,.85);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(251,247,239,.35)}
.btn:focus-visible,.code input:focus-visible,.card:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.field{display:flex;flex-direction:column;gap:6px;text-align:left}
.field span{font-size:13px;font-weight:700;color:rgba(251,247,239,.75);padding-left:4px}
.field input,.code input{font:inherit;border:0;background:var(--cream);color:var(--ink);border-radius:14px;
  box-shadow:inset 0 2px 4px rgba(44,52,36,.08)}
.field input{height:54px;padding:0 16px;font-size:18px;font-weight:700;letter-spacing:.02em}
.field input::placeholder{color:#a9a08c}
.hint{font-size:15px;color:rgba(251,247,239,.82)}
.hint.demo{font-size:13px;color:rgba(251,247,239,.55)}
.code{display:flex;justify-content:center;gap:10px;margin:16px 0 14px}
.code input{width:56px;height:66px;text-align:center;font-size:28px;font-weight:900}

/* ---------- Экран 2: лапки ---------- */
.paws{display:flex;gap:10px;margin-bottom:16px}
.paws i{width:26px;height:26px;background:var(--cream);-webkit-mask:var(--paw) center/contain no-repeat;mask:var(--paw) center/contain no-repeat;
  opacity:.2;animation:step 1.2s ease-in-out infinite}
.paws i:nth-child(odd){translate:0 -6px;rotate:-12deg}
.paws i:nth-child(even){rotate:12deg}
.paws i:nth-child(2){animation-delay:.15s}.paws i:nth-child(3){animation-delay:.3s}.paws i:nth-child(4){animation-delay:.45s}
@keyframes step{40%{opacity:1}80%,100%{opacity:.2}}

/* ---------- Экран 3: карта ---------- */
#wallet{justify-content:flex-start;padding:0}
.card-wrap{position:absolute;left:50%;top:var(--top);width:var(--card-w);margin-left:calc(var(--card-w) / -2);
  /* до переворота карта по центру экрана, после — уезжает наверх */
  transform:translateY(calc((var(--vh) - var(--card-h)) / 2 - var(--top) - 30px));
  transition:transform .75s var(--ease)}
#wallet.open .card-wrap{transform:none}

.card-lift{width:100%;height:var(--card-h);perspective:1100px;opacity:0;translate:0 40px;scale:.92;
  transition:opacity .6s ease,translate .9s var(--ease),scale .9s var(--ease)}
#wallet.in .card-lift{opacity:1;translate:0 0;scale:1}
.card-lift.lifting{animation:lift .9s ease-in-out}
@keyframes lift{45%{scale:1.07}}

.card{position:relative;width:100%;height:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  transition:transform .9s var(--flip);cursor:pointer;outline:none;border-radius:16px}
.card.flipped{transform:rotateY(180deg)}

.face{position:absolute;inset:0;border-radius:16px;overflow:hidden;container-type:size;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 2px 0 rgba(255,255,255,.35) inset,0 30px 50px -22px rgba(20,30,10,.7),0 8px 16px -8px rgba(20,30,10,.35)}
.back{transform:rotateY(180deg) translateZ(1px)}
.front{transform:translateZ(1px)}
/* Safari в Telegram на iPhone игнорирует backface-visibility, когда внутри стороны есть
   mix-blend-mode (листья, картон) — лицо просвечивало зеркально. Поэтому стороны ещё и
   переключаются видимостью ровно в момент 90°: при кривой --flip это 37% от 0.9 с = 0.33 с. */
.face{transition:visibility 0s linear .33s}
.back{visibility:hidden}
.card.flipped .front{visibility:hidden}
.card.flipped .back{visibility:visible}

/* крафт-картон как на сайте */
.kraft{background:linear-gradient(135deg,#dcc8a2 0%,#d2bb90 55%,#c9b083 100%);color:var(--green-800)}
.kraft::before{content:"";position:absolute;inset:0;mix-blend-mode:multiply;opacity:.9;
  background:
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .55' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .16 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
.leaf{position:absolute;z-index:1;mix-blend-mode:multiply;opacity:.55;filter:saturate(.8) blur(.3px);pointer-events:none}
.leaf.tr{width:46cqw;right:-11cqw;top:-14cqw;rotate:200deg}
.leaf.br{width:42cqw;right:-13cqw;bottom:-12cqw;rotate:-30deg}
.leaf.br2{width:27cqw;right:17cqw;bottom:-10cqw;rotate:20deg;opacity:.4}
.leaf.bl{width:40cqw;right:-12cqw;top:-14cqw;rotate:200deg;opacity:.4}

.front-body{position:absolute;inset:0;z-index:2;display:flex;align-items:center;gap:3.5cqw;padding:0 6cqw}
.emblem{width:25cqw;flex-shrink:0;mix-blend-mode:multiply;filter:saturate(1.1) brightness(.85)}
.brand{display:flex;flex-direction:column;line-height:1}
.brand b{font-size:9.8cqw;font-weight:900;letter-spacing:.01em;text-shadow:0 1px 0 rgba(255,255,255,.25)}
.brand small{margin-top:2cqw;font-size:5.2cqw;font-weight:700;color:#5b6a3a;text-align:center}

.back-body{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;padding:5.5cqw 6.5cqw 5cqw}
.back-top{display:flex;justify-content:space-between;align-items:baseline;gap:3cqw}
#holder{font-size:4cqw;font-weight:800;white-space:nowrap}
.back-body .label{font-size:4.2cqw;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brown-700)}
.balance{margin-top:1cqw;font-size:14cqw;font-weight:900;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 0 rgba(255,255,255,.3)}
.rate{margin-top:1.4cqw;font-size:3.6cqw;font-weight:700;color:#5b6a3a}
/* белая плашка: сканеру нужен чистый контраст и пустые поля по краям */
.barcode{margin-top:auto;align-self:stretch;background:#fff;border-radius:2.6cqw;padding:2cqw 7cqw 1.2cqw;
  box-shadow:0 1px 3px rgba(51,72,27,.18)}
.barcode svg{display:block;width:100%;height:15cqw}
.barcode .digits{display:flex;justify-content:center;margin-top:.6cqw;font-size:3.6cqw;font-weight:700;letter-spacing:.35em;color:#111;font-variant-numeric:tabular-nums}

/* блик пробегает по карте при перевороте */
.glare{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 48%,transparent 61%) no-repeat;
  background-size:260% 100%;background-position:130% 0}
.card-lift.lifting .glare,#wallet.in .front .glare{animation:glare 1.1s var(--ease) .1s both}
@keyframes glare{from{background-position:130% 0}to{background-position:-30% 0}}

.tap-hint{margin-top:26px;text-align:center;font-size:14px;font-weight:700;color:rgba(251,247,239,.78);
  transition:opacity .3s;animation:breathe 2.4s ease-in-out 1.2s infinite}
.tap-hint.gone{opacity:0;animation:none}
@keyframes breathe{50%{opacity:.45}}

/* ---------- Шторка с историей ---------- */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:5;
  height:calc(var(--vh) - var(--top) - var(--card-h) - 20px);
  display:flex;flex-direction:column;padding:6px 14px 0;
  border-radius:28px 28px 0 0;color:var(--ink);background:var(--sheet-solid);
  box-shadow:0 -12px 40px -10px rgba(20,30,10,.35),inset 0 1px 0 rgba(255,255,255,.75);
  transform:translateY(104%);transition:transform .7s var(--ease);will-change:transform}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sheet{background:var(--sheet-fill);-webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%)}
}
#wallet.open .sheet{transform:none}
.grabber{width:40px;height:5px;border-radius:999px;background:rgba(44,52,36,.18);margin:4px auto 12px;flex:none}
.sheet-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 6px 12px;flex:none}
.sheet-head h2{font-size:20px;font-weight:900;color:var(--green-800)}
.sheet-sub{font-size:13px;font-weight:700;color:var(--ink-2)}
.list{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}

/* строки — заливка внутри стекла, не второй слой стекла */
.item{display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:8px;border-radius:16px;background:rgba(255,253,249,.72);
  box-shadow:0 1px 2px rgba(51,72,27,.06)}
#wallet.open .item{animation:rise .55s var(--ease) both;animation-delay:calc(.28s + var(--i) * 55ms)}
.ico{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--green-100)}
.ico::before{content:"";width:18px;height:18px;background:var(--green-700);-webkit-mask:var(--paw) center/contain no-repeat;mask:var(--paw) center/contain no-repeat}
.ico.minus{background:#f1e6d3}
.ico.minus::before{background:var(--brown-700)}
.item-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.item-main b{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-main span{font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn.logout{display:block;margin:6px auto 4px;height:44px;padding:0 16px;font-size:14px;font-weight:700;color:var(--ink-2);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(44,52,36,.25)}
.pts{font-size:17px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.pts.plus{color:var(--green-700)}
.pts.minus{color:#9a5a2c}

@keyframes rise{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}

/* ---------- Доступность ---------- */
@media (prefers-reduced-motion:reduce){
  .amb-leaf,.tap-hint{animation:none}
  .card{transition:none}
  .card.flipped{transform:none}
  .face{transition:opacity .22s}
  .back{transform:none;opacity:0}
  .card.flipped .back{opacity:1}
  .card.flipped .front{opacity:0}
  .card-lift.lifting,.card-lift.lifting .glare,#wallet.in .front .glare{animation:none}
  .card-wrap,.card-lift{transition:opacity .3s}
  .sheet{transition:opacity .25s;transform:none;opacity:0;pointer-events:none}
  #wallet.open .sheet{opacity:1;pointer-events:auto}
  #wallet.open .item{animation:none}
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .sheet{background:var(--sheet-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
}