/* =========================================================
   VLOOP MINIAPP — Premium Minimal UI (safe-area friendly)
   ========================================================= */

/*
  ВАЖНО ПРО ВЫСОТУ ВЕРХА:

  1) --top-safe-extra  : добавка сверху (опускает контент ниже)
  2) .topbar padding-top: фактический верхний отступ topbar
  3) .content padding-top: отступ контента под topbar

  Если “верх не видно” — увеличивай:
  --top-safe-extra или .content padding-top
*/

:root{
  --bg0:#0A0C10;
  --bg1:#0D1016;
  --card:rgba(255,255,255,.045);
  --stroke:rgba(255,255,255,.085);

  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.60);

  --accent:#6B9CFF;
  --good:#2EE59D;
  --bad:#FF5E7A;

  --r:18px;
  --r2:14px;

  --s1: 0 10px 26px rgba(0,0,0,.40);
  --s2: 0 22px 80px rgba(0,0,0,.62);
  --ring: 0 0 0 2px rgba(107,156,255,.14);

  --pad:14px;
  --gap:12px;

  /* SAFE AREA */
  --top-safe-extra: 45px; /* <-- УВЕЛИЧИВАЙ, если верх режется */

  /* CASE */
  --itemW: 140px;
  --itemH: 90px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  background:
    radial-gradient(900px 600px at 10% -10%, rgba(107,156,255,.16), transparent 55%),
    radial-gradient(800px 600px at 95% 0%, rgba(46,229,157,.08), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow:hidden;
}

.hidden{display:none!important;}
.muted{color:var(--muted);font-size:12px;line-height:1.35;}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
a{color:inherit;}

.app{height:100%;display:flex;flex-direction:column;}

/* ===== Topbar ===== */
.topbar{
  padding:
    calc(env(safe-area-inset-top, 0px) + var(--top-safe-extra))
    var(--pad)
    10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.brand{display:flex;align-items:center;gap:10px;min-width:0;}
.brandText{min-width:0;}
.brandTitle{
  font-weight:950;
  font-size:14px;
  letter-spacing:.25px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brandSub{
  margin-top:2px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Avatar (bigger) */
.avatarWrap{
  width:48px;height:48px;border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--s1);
  flex:0 0 auto;
}
.avatarImg{width:100%;height:100%;object-fit:cover;display:block;}
.avatarFallback{
  width:100%;height:100%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), transparent 52%),
    linear-gradient(135deg, rgba(107,156,255,.95), rgba(107,156,255,.30));
}

.topActions{display:flex;gap:8px;}
.iconBtn{
  width:40px;height:40px;border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.86);
  box-shadow: var(--s1);
  display:flex;align-items:center;justify-content:center;
}
.iconBtn:active{transform:translateY(1px);}

/* ===== Banner ===== */
.banner{
  margin: 0 var(--pad) 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,94,122,.20);
  background: rgba(255,94,122,.10);
  color: rgba(255,255,255,.92);
  font-size:13px;
}

/* ===== Main ===== */
.content{
  flex:1;
  overflow:auto;
  padding:
    10px
    var(--pad)
    calc(110px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling:touch;
}

/* ===== Cards ===== */
.card{
  border-radius: var(--r);
  background: var(--card);
  border:1px solid var(--stroke);
  box-shadow: var(--s2);
  padding: 14px;
  position:relative;
  overflow:hidden;
}
.card + .card{margin-top: var(--gap);}

.cardTitle{
  font-weight:950;
  font-size:13px;
  letter-spacing:.22px;
  margin-bottom:10px;
}

/* ===== Hero ===== */
.heroCard{position:relative;}
.heroGlow{
  position:absolute; inset:-120px -140px auto auto;
  width:320px;height:320px;
  background: radial-gradient(circle, rgba(107,156,255,.16), transparent 62%);
  filter: blur(10px);
  pointer-events:none;
}
.heroMain{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}
.heroTitle{color:var(--muted);font-size:12px;margin-bottom:4px;}
.heroUser{font-weight:980;font-size:18px;letter-spacing:.2px;}
.heroPills{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.pill{
  padding: 8px 12px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  font-size:12px;
  white-space:nowrap;
}
.pill.ok{border-color: rgba(46,229,157,.22); background: rgba(46,229,157,.08);}
.pill.bad{border-color: rgba(255,94,122,.22); background: rgba(255,94,122,.08);}

.heroActions{display:flex;gap:10px;margin-top:12px;}
.btnPrimary{
  flex:1;
  border:none;
  border-radius: var(--r2);
  padding: 13px 12px;
  font-weight:950;
  font-size:14px;
  letter-spacing:.2px;
  cursor:pointer;
  user-select:none;
  color:#08101E;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 55%),
    linear-gradient(135deg, rgba(107,156,255,.95), rgba(107,156,255,.45));
  box-shadow: var(--s1);
}
.btnPrimary:active{transform:translateY(1px);}
.btnPrimary:disabled{opacity:.55; cursor:not-allowed;}

.btnGhost{
  border-radius: var(--r2);
  padding: 13px 12px;
  font-weight:950;
  font-size:14px;
  letter-spacing:.2px;
  cursor:pointer;
  user-select:none;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
}
.btnGhost:active{transform:translateY(1px);}

.payHint{
  margin-top:12px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.80);
  font-size:13px;
}

/* ===== Head / news ===== */
.sectionHead{margin-top:14px;display:flex;align-items:baseline;justify-content:space-between;}
.sectionTitle{font-weight:950;font-size:13px;}
.sectionHint{color:var(--muted);font-size:12px;}

.newsGrid{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.newsCard .newsMedia{
  position: relative;
  width: 100%;

  /* ВЕРТИКАЛЬНЫЙ ФОРМАТ */
  aspect-ratio: 3 / 4;        /* <-- ГЛАВНОЕ */
  /* альтернативы:
     9 / 16  — очень вытянуто (stories)
     4 / 5   — Instagram-like
  */

  border-radius: 18px;
  overflow: hidden;           /* <-- ОБРЕЗКА */
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}

.newsBody{padding:12px;display:flex;flex-direction:column;gap:6px;flex:1;}
.newsTitle{font-weight:950;font-size:13px;letter-spacing:.18px;}
.newsText{color:var(--muted);font-size:12px;line-height:1.35;}
.miniLink{
  align-self:flex-start;
  margin-top:4px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.90);
  font-weight:950;
}
.miniLink:active{transform:translateY(1px);}

/* ===== Metrics ===== */
.splitGrid{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.bigNumber{margin-top:6px;font-weight:980;font-size:24px;}
.smallHint{margin-top:8px;color:var(--muted);font-size:12px;}

/* ===== Inputs / promo / ref ===== */
.payRow,.refLinkRow{display:flex;gap:10px;margin-top:10px;align-items:center;}
.input{
  flex:1;
  border-radius: 16px;
  padding: 12px 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.92);
  outline:none;
}
.input:focus{border-color: rgba(107,156,255,.30); box-shadow: var(--ring);}

.resultBox{
  margin-top:12px;
  border-radius:16px;
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.ok{color: rgba(46,229,157,.92); font-weight:980;}
.bad{color: rgba(255,94,122,.92); font-weight:980;}

.subCard{
  margin-top:12px;
  padding:12px;
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}
.subTitle{font-weight:950;font-size:13px;margin-bottom:8px;}

/* ===== Lists ===== */
.listRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  margin-top:8px;
}
.lr{width:22px;color:rgba(255,255,255,.55);font-weight:950;font-size:12px;}
.lt{color:rgba(255,255,255,.86);font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rt{color:rgba(255,255,255,.92);font-weight:980;font-size:12px;}

/* ===== Case ===== */
.caseStage{
  margin-top:10px;
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.22);
  overflow:hidden;
  box-shadow: var(--s2);
  position:relative;
}
.caseStage::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05), transparent 25%, transparent 75%, rgba(255,255,255,.05)),
    radial-gradient(800px 220px at 50% 0%, rgba(107,156,255,.10), transparent 60%);
  pointer-events:none;
}

.pointer{
  width:0;height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:14px solid rgba(255,255,255,.88);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
  margin: 12px auto 6px;
}

.reelWrap{padding: 10px 14px 16px; position:relative;}
.reel{
  display:flex;
  gap:12px;
  transform: translateX(0px);
  will-change: transform;
  transition: transform 6400ms cubic-bezier(.08,.92,.08,1);
}

.reelItem{
  width: var(--itemW);
  height: var(--itemH);
  flex: 0 0 auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.035);
  box-shadow: 0 14px 34px rgba(0,0,0,.40);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
}
.reelItem::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 40%, rgba(0,0,0,.10));
  pointer-events:none;
}
.riImg{
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.45));
  position:relative;
  z-index:1;
}

.reelItem.win{
  border-color: rgba(46,229,157,.26);
  box-shadow: 0 0 0 2px rgba(46,229,157,.14), 0 18px 60px rgba(0,0,0,.60);
}

/* Confetti */
#confetti{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0;
  transition: opacity .18s ease;
  background:
    radial-gradient(circle at 12% 20%, rgba(107,156,255,.92) 0 3px, transparent 4px),
    radial-gradient(circle at 42% 18%, rgba(255,255,255,.86) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 26%, rgba(46,229,157,.92) 0 3px, transparent 4px),
    radial-gradient(circle at 30% 70%, rgba(255,94,122,.92) 0 3px, transparent 4px),
    radial-gradient(circle at 84% 78%, rgba(255,255,255,.82) 0 2px, transparent 3px);
}
#confetti.boom{opacity:.65}

.rowBetween{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;}
.bigInline{font-size:18px;font-weight:980;}

.winsList{display:flex;flex-direction:column;gap:8px;}
.winRow{display:flex;justify-content:space-between;gap:10px;padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03);}

/* ===== Bottom tabs (raised + icon-only) ===== */
.tabs{
  position:fixed;
  left:0;right:0;
  bottom: 0; /* <-- до самого низа экрана */
  padding:
    10px 12px
    calc(10px + env(safe-area-inset-bottom, 0px));

  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;

  /* Замутнение и затемнение до самого низа */
  background: linear-gradient(180deg,
    rgba(0,0,0,.00) 0%,
    rgba(0,0,0,.22) 20%,
    rgba(0,0,0,.46) 65%,
    rgba(0,0,0,.62) 100%
  );
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.tab{
  border-radius: 20px;
  height: 54px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.90);
  font-weight:950;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tab:active{transform:translateY(1px);}
.tab.active{
  border-color: rgba(107,156,255,.26);
  background: rgba(107,156,255,.11);
  box-shadow: var(--ring), var(--s1);
}
.tabIcon{
  font-size:22px;
  line-height:1;
}
/* ===== Referrals extras ===== */
.refConditions{
  font-weight: 950;             /* жирно */
  font-size: 13px;
  letter-spacing: .15px;
  line-height: 1.35;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.035);
}

.refLinkRow{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
}
/* ================================
   QUICK JUMPS — Images (case/promo/ref)
   Files:
   /app/assets/case.webp
   /app/assets/promo.webp
   /app/assets/ref.webp
   ================================ */

/* Если у тебя уже есть .newsMedia — этот блок просто усилит стиль */
.newsCard .newsMedia{
  position: relative;
  width: 100%;
  height: 200px;                 /* <-- ВЫСОТА КАРТИНКИ (можешь менять) */
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.04);
  box-shadow: 0 16px 44px rgba(0,0,0,.45);
}

/* Слой картинки + лёгкая анимация */
.newsCard .newsMedia::before{
  content:"";
  position:absolute;
  inset:0;

  background-size: cover;     /* <-- КЛЮЧЕВО */
  background-position: center;
  background-repeat: no-repeat;

  transform: scale(1.04);     /* лёгкий “зум”, чтобы края не были пустыми */
  transition: transform 700ms cubic-bezier(.12,.95,.10,1);
}

/* Лёгкий “премиум” градиент поверх */
.newsCard .newsMedia::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 200px at 25% 0%, rgba(107,156,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.35));
  pointer-events:none;
}

/* hover/press — чуть приближаем */
.newsCard:active .newsMedia::before{
  transform: scale(1.06);
}

/* Привязка картинок к карточкам по классу */
.newsCard.n1 .newsMedia::before{ background-image: url("/app/assets/case.webp"); }
.newsCard.n2 .newsMedia::before{ background-image: url("/app/assets/promo.webp"); }
.newsCard.n3 .newsMedia::before{ background-image: url("/app/assets/ref.webp"); }

/* Если у тебя кнопка перехода — чуть “дороже” вид */
.newsCard .miniLink,
.newsCard .newsBtn{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}