/* ===== Reset / base (mobile-first) ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --text:#ffffff;
  --head-text:#4e444a;
  --gift:#3ee06b;
  --green-1:#7dfb98;
  --green-2:#2dd35f;
  --green-glow:rgba(74,240,120,.55);
  --gold-1:#f7da8b;
  --gold-2:#e2a93f;
  --gold-text:#4a3206;
  --card-bg:rgba(255,255,255,.05);
  --card-border:rgba(255,255,255,.14);
}
html{-webkit-text-size-adjust:100%;background:#05100a}
body{
  font-family:Inter,-apple-system,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#0c1d15 0%,#0a140e 45%,#05100a 100%);
  min-height:100vh;
  line-height:1.45;
}

/* Page fills the *visible* viewport; banner flexes to absorb leftover space
   so the offers and CTA are always in view on load (no toolbar overlap). */
.page{
  max-width:600px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  height:100vh;
  height:100svh;
  height:100dvh;
}

/* ===== Header: logo + welcome ===== */
.topbar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:transparent;
  padding:12px 16px;
}
.logo-box{flex:0 0 auto;display:flex;align-items:center;height:40px}
.logo-box img{height:40px;width:auto;display:block}
.welcome{
  font-size:1.6rem;
  font-weight:800;
  color:#fff;
  white-space:nowrap;
}

/* ===== Hero banner (full-bleed, flexes to fill) ===== */
.hero{position:relative;line-height:0;flex:1 1 auto;min-height:72px}
.hero img{display:block;width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-1px;height:38%;
  background:linear-gradient(180deg,rgba(7,16,10,0) 0%,#0a140e 92%);
  pointer-events:none;
}

/* ===== Bonus + rollover + CTA (anchored to bottom of viewport) ===== */
.content{
  position:relative;z-index:1;
  flex:0 0 auto;
  margin-top:-18px;
  padding:0 14px calc(10px + env(safe-area-inset-bottom));
}
.bonus{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:2px 16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 14px rgba(0,0,0,.35);
}
.bonus-list{list-style:none}
.row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.row:last-child{border-bottom:0}
.deposit{color:#fff;font-weight:800;font-size:1.15rem}
.gift{color:var(--gift);font-weight:800;font-size:1.15rem}
.code{
  margin-left:auto;
  color:var(--gold-text);
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2));
  border-radius:50px;
  padding:8px 15px;
  font-size:.92rem;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.55);
}

/* ===== Rollover line ===== */
.rollover{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:10px;
  padding:11px 14px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;
  font-size:1.05rem;
  font-weight:700;
  color:#fff;
}
.rollover .drop{flex:0 0 auto;display:flex}

/* ===== CTA (glowing green pill) ===== */
.cta{
  display:block;
  text-align:center;
  text-decoration:none;
  margin-top:12px;
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:.04em;
  color:#093218;
  background:linear-gradient(180deg,var(--green-1),var(--green-2));
  border-radius:50px;
  padding:16px;
  box-shadow:0 0 24px var(--green-glow),0 8px 18px rgba(0,0,0,.4);
  animation:pulse 1.9s ease-in-out infinite;
}
.cta:active{transform:translateY(2px)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@media (prefers-reduced-motion:reduce){.cta{animation:none}}

/* ===== Desktop: revert to normal flow, centered column (refine later) ===== */
@media (min-width:768px){
  .page{height:auto;min-height:100vh;display:block}
  .topbar{padding:14px 18px;gap:14px}
  .logo-box,.logo-box img{height:44px}
  .welcome{font-size:1.8rem}
  .hero{flex:none}
  .hero img{height:auto;max-height:300px;object-fit:cover}
  .content{display:block;margin-top:-22px;padding:0 16px 26px}
  .row{padding:13px 0}
  .deposit,.gift{font-size:1.28rem}
  .code{font-size:1rem;padding:10px 18px}
  .rollover{font-size:1.12rem;margin-top:14px;padding:11px 14px}
  .cta{font-size:1.65rem;margin-top:18px;padding:16px}
}