:root{
  --vh: 1vh; /* fallback; точное значение задаётся из main.js для iOS Safari */
  --bg0:#070a12;
  --bg1:#0b1020;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.08);
  --text:#eaf0ff;
  --muted:rgba(234,240,255,.72);
  --muted2:rgba(234,240,255,.55);
  --good:#12B76A;
  --bad:#ff5a72;
  --accent:#ff4fd8;
  --accent2:#ff2aa6;
  --ring:rgba(255, 79, 216, .55);
  --shadow:0 14px 60px rgba(0,0,0,.45);
  --radius:20px;
}

*{box-sizing:border-box}
html{
  height:100%;
  height:-webkit-fill-available;
}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text", Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--text);
  background:
    radial-gradient(980px 620px at 18% 8%, rgba(255,79,216,.30), transparent 62%),
    radial-gradient(780px 520px at 78% 22%, rgba(255,42,166,.22), transparent 64%),
    radial-gradient(600px 400px at 80% 30%, rgba(18,183,106,.16), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100%;
  min-height:-webkit-fill-available;
}

.page{
  /* Без горизонтального padding у страницы — секции на всю ширину экрана */
  padding:
    calc(16px + env(safe-area-inset-top))
    0
    calc(18px + env(safe-area-inset-bottom))
    0;
  min-height:100%;
  min-height:100vh;
  min-height:100dvh;
  min-height:-webkit-fill-available;
}

.section{
  max-width:720px;
  width:100%;
  margin:0 auto 18px auto;
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
  box-sizing:border-box;
}
/* Полноэкранная секция по высоте (лучше работает на iOS Safari, чем один только CSS-vh) */
.section--screen{
  min-height:calc(
    (var(--vh, 1vh) * 100)
    - env(safe-area-inset-top)
    - env(safe-area-inset-bottom)
    - 34px
  );
  display:flex;
  flex-direction:column;
}
.section--screen > .card{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
}
.hero.section--screen{
  justify-content:center;
}
.hero.section--screen > .card{
  flex:0 0 auto;
}
.hero{display:flex;align-items:center}

.card{
  background:linear-gradient(180deg, var(--card), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  backdrop-filter: blur(10px);
}

.badge{
  display:inline-flex;
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.3px;
  color:rgba(234,240,255,.88);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
}

.hero__title{margin:12px 0 10px;font-size:30px;line-height:1.05}
.hero__text{margin:0 0 14px;font-size:16px;line-height:1.45;color:var(--muted)}
.fineprint{margin:12px 0 0;font-size:12.5px;line-height:1.35;color:var(--muted2)}

.btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  background:rgba(255,255,255,.08);
  padding:14px 16px;
  border-radius:14px;
  font-weight:700;
  font-size:16px;
  line-height:1;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn:focus{outline:none}
.btn:focus-visible{box-shadow:0 0 0 4px var(--ring)}
.btn:active{transform: translateY(1px)}

.btn--primary{
  background:linear-gradient(180deg, rgba(255,79,216,.95), rgba(255,42,166,.95));
  border-color:rgba(255,79,216,.65);
}
.btn--ghost{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
}
.hero__cta{width:100%}

.section__title{margin:0 0 6px;font-size:22px;line-height:1.15}
.section__subtitle{margin:0 0 14px;color:var(--muted);line-height:1.4}

.playground{
  position:relative;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border:1px dashed rgba(255,255,255,.18);
  padding:14px;
  height:360px;
  overflow:hidden;
  touch-action:none; /* critical: prevent iOS scroll while dragging */
}

.receiver{
  position:absolute;
  right:14px;
  top:14px;
  width:112px;
}
.receiver__frame{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.receiver__img{
  width:100%;
  height:112px;
  object-fit:cover;
  display:block;
  filter:saturate(1.05) contrast(1.03);
}
.receiver__label{
  margin-top:6px;
  font-size:11px;
  color:rgba(234,240,255,.78);
}

.gift{
  position:absolute;
  left:14px;
  bottom:14px;
  width:48px;
  height:48px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.14);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  box-shadow:0 14px 40px rgba(0,0,0,.35);
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
  transform: translate3d(0,0,0);
  will-change: transform;
}
.gift.is-dragging{
  box-shadow:0 22px 65px rgba(0,0,0,.48);
  border-color:rgba(255,255,255,.22);
}
.gift__label{font-size:10px;color:rgba(234,240,255,.75);font-weight:650}
.gift__icon svg{width:30px;height:30px}

.status{
  margin-top:12px;
  padding:12px 12px;
  border-radius:14px;
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(234,240,255,.83);
  line-height:1.35;
  min-height:44px;
}
.status.is-bad{border-color:rgba(255,90,114,.35); background:rgba(255,90,114,.10)}
.status.is-good{border-color:rgba(18,183,106,.35); background:rgba(18,183,106,.10)}

.next[hidden]{display:none}
.runzone{
  position:relative;
  height:200px;
  border-radius:18px;
  border:none;
  background:transparent;
  overflow:visible;
}
.runBtn{
  position:absolute;
  left:16px;
  top:16px;
  width:calc(100% - 32px);
  max-width:380px;
}

.modal[hidden]{display:none}
.modal{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  min-height:100vh;
  min-height:100dvh;
  min-height:-webkit-fill-available;
  z-index:2147483000;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:
    env(safe-area-inset-top)
    calc(16px + env(safe-area-inset-right))
    env(safe-area-inset-bottom)
    calc(16px + env(safe-area-inset-left));
  box-sizing:border-box;
}
.modal__backdrop{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.modal__panel{
  position:relative;
  z-index:1;
  width:min(520px, 100%);
  max-height:min(72dvh, calc(100dvh - 32px));
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow:0 24px 90px rgba(0,0,0,.55);
  padding:18px;
}
.modal__title{margin:0 0 8px;font-size:18px}
.modal__text{margin:0 0 14px;color:var(--muted);line-height:1.45}
.modal__btn{width:100%}

@media (max-width: 380px){
  .playground{height:340px}
  .receiver{width:104px}
  .receiver__img{height:104px}
  .gift{width:46px;height:46px}
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .gift, .btn{transition:none !important}
}