/* ============================================================
   TeypyBONUS — gold / black casino landing
   ============================================================ */
:root{
  --bg:        #0a0806;
  --bg-2:      #110c07;
  --panel:     rgba(28, 21, 11, 0.72);
  --panel-2:   rgba(40, 30, 15, 0.55);
  --line:      rgba(212, 175, 55, 0.22);
  --gold:      #d4af37;
  --gold-2:    #f7d774;
  --gold-3:    #ffe9a8;
  --gold-deep: #8a6d1f;
  --ink:       #f4ecd8;
  --ink-soft:  #b6ac95;
  --live:      #ff3b5c;
  --twitch:    #a970ff;
  --tg:        #2aa3e0;
  --grad-gold: linear-gradient(135deg, #f7d774 0%, #d4af37 38%, #b8860b 70%, #f7d774 100%);
  /* vertical metallic sheen for glossy gold text */
  --grad-gloss: linear-gradient(180deg, #fff6d6 0%, #f7d774 30%, #d4af37 52%, #a87f1e 74%, #f4d069 100%);
  --shadow:    0 24px 60px -20px rgba(0,0,0,.85);
  --r:         18px;
  font-synthesis: none;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  font-family:'Sora', system-ui, sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  overflow-x:hidden;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none }
.brand__accent{
  background:var(--grad-gloss);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));
}

/* ---------- atmosphere layers ---------- */
.bg-glow{
  position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% -8%, rgba(212,175,55,.22), transparent 60%),
    radial-gradient(45% 40% at 88% 12%, rgba(184,134,11,.16), transparent 60%),
    radial-gradient(50% 45% at 8% 85%, rgba(212,175,55,.10), transparent 60%),
    linear-gradient(180deg, #0a0806 0%, #0d0a06 45%, #080603 100%);
}
.bg-grain{
  position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.chips{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden }
.chip{
  position:absolute; width:42px; height:42px; border-radius:50%;
  opacity:.0; will-change:transform, opacity;
  animation:floatUp linear infinite;
}
.chip svg{ width:100%; height:100% }
@keyframes floatUp{
  0%{ transform:translateY(110vh) rotate(0deg); opacity:0 }
  8%{ opacity:.55 }
  92%{ opacity:.4 }
  100%{ transform:translateY(-15vh) rotate(360deg); opacity:0 }
}

/* ---------- buttons ---------- */
.btn{
  --pad:.85rem 1.5rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:var(--pad); border-radius:999px; font-weight:700;
  font-size:.95rem; letter-spacing:.02em; line-height:1;
  transition:transform .18s ease, box-shadow .25s ease, filter .2s ease;
  position:relative; white-space:nowrap;
}
.btn--gold{
  background:var(--grad-gold); color:#241a05;
  box-shadow:0 10px 26px -8px rgba(212,175,55,.6), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--gold:hover{ transform:translateY(-2px); filter:brightness(1.07);
  box-shadow:0 16px 34px -8px rgba(212,175,55,.7), inset 0 1px 0 rgba(255,255,255,.5) }
.btn--gold:active{ transform:translateY(0) scale(.98) }
.btn--ghost{
  border:1px solid var(--line); color:var(--gold-3);
  background:rgba(255,255,255,.02); backdrop-filter:blur(6px);
}
.btn--ghost:hover{ border-color:var(--gold); transform:translateY(-2px); background:rgba(212,175,55,.08) }
.btn--block{ width:100%; padding:.95rem 1.5rem; font-size:1rem }

/* ---------- age gate ---------- */
.agegate{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  padding:1.5rem;
  background:rgba(4,3,1,.86); backdrop-filter:blur(14px);
  opacity:1; transition:opacity .45s ease;
}
.agegate.is-hidden{ opacity:0; pointer-events:none }
.agegate__card{
  width:min(440px, 100%);
  background:linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--line); border-radius:26px;
  padding:2.4rem 1.8rem 1.6rem; text-align:center;
  box-shadow:var(--shadow);
  animation:popIn .5s cubic-bezier(.2,.9,.25,1.2) both;
}
@keyframes popIn{ from{ transform:translateY(18px) scale(.94); opacity:0 } to{ transform:none; opacity:1 } }
.agegate__ring{
  width:84px; height:84px; margin:0 auto 1.1rem; border-radius:50%;
  display:grid; place-items:center; font-family:'Sora', system-ui, sans-serif; font-weight:800; font-size:1.5rem;
  color:#241a05; background:var(--grad-gold);
  box-shadow:0 0 0 6px rgba(212,175,55,.14), 0 14px 30px -10px rgba(212,175,55,.6);
  animation:pulseRing 2.4s ease-in-out infinite;
}
@keyframes pulseRing{ 50%{ box-shadow:0 0 0 12px rgba(212,175,55,.05), 0 14px 30px -10px rgba(212,175,55,.6) } }
.agegate__card h2{ font-family:'Sora', system-ui, sans-serif; font-size:1.55rem; margin-bottom:.6rem; color:var(--gold-3) }
.agegate__card p{ color:var(--ink-soft); font-size:.95rem; margin-bottom:1.4rem }
.agegate__actions{ display:flex; flex-direction:column; gap:.7rem }
.agegate__warn{ display:block; margin-top:1.1rem; font-size:.72rem; letter-spacing:.06em; color:var(--ink-soft); text-transform:uppercase }

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(10,8,6,.82), rgba(10,8,6,.32) 70%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(212,175,55,.12);
}
.topbar__inner{
  max-width:1120px; margin:0 auto; padding:.65rem clamp(.9rem,3vw,1.4rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{ display:flex; align-items:center; gap:.7rem }
.brand__avatar{ position:relative; width:42px; height:42px; flex:0 0 auto }
.brand__avatar img{
  width:100%; height:100%; border-radius:50%; object-fit:cover;
  border:2px solid var(--gold); box-shadow:0 4px 14px -4px rgba(212,175,55,.6);
  animation:bobMini 3.2s ease-in-out infinite;
}
@keyframes bobMini{ 50%{ transform:translateY(-3px) } }
.status-dot{
  position:absolute; right:-1px; bottom:-1px; width:13px; height:13px; border-radius:50%;
  background:var(--ink-soft); border:2.5px solid var(--bg);
}
.status-dot.is-live{ background:var(--live); box-shadow:0 0 0 0 rgba(255,59,92,.7); animation:livePulse 1.6s infinite }
@keyframes livePulse{ 70%{ box-shadow:0 0 0 7px rgba(255,59,92,0) } 100%{ box-shadow:0 0 0 0 rgba(255,59,92,0) } }
.brand__text{ font-family:'Sora', system-ui, sans-serif; font-weight:700; font-size:1.18rem; letter-spacing:.01em }
.topbar__right{ display:flex; align-items:center; gap:.6rem }

/* ---------- socials ---------- */
.socials{ display:flex; gap:.4rem }
.social{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  border:1px solid var(--line); background:rgba(255,255,255,.02);
  transition:transform .18s ease, border-color .2s ease, background .2s ease;
  position:relative;
}
.social svg{ width:18px; height:18px; fill:var(--gold-3); transition:fill .2s }
.social:hover{ transform:translateY(-3px); border-color:var(--gold); background:rgba(212,175,55,.1) }
.social:hover svg{ fill:var(--gold-2) }
.social[data-tip]::after{
  content:attr(data-tip); position:absolute; top:calc(100% + 8px); right:0;
  background:#15100a; color:var(--gold-3); font-size:.7rem; padding:.3rem .55rem;
  border-radius:8px; border:1px solid var(--line); white-space:nowrap;
  opacity:0; transform:translateY(-4px); pointer-events:none; transition:.2s; z-index:5;
}
.social[data-tip]:hover::after{ opacity:1; transform:none }

/* ---------- language switch ---------- */
.langswitch{
  display:flex; border:1px solid var(--line); border-radius:11px; overflow:hidden;
  background:rgba(255,255,255,.02);
}
.langswitch button{
  padding:.42rem .62rem; font-size:.76rem; font-weight:700; color:var(--ink-soft);
  transition:.2s; letter-spacing:.04em;
}
.langswitch button.is-active{ background:var(--grad-gold); color:#241a05 }

/* ---------- hero ---------- */
.hero{ position:relative; max-width:1120px; margin:0 auto; padding:0 clamp(.9rem,3vw,1.4rem) }
.hero__banner{
  position:absolute; inset:0 0 auto; height:340px; border-radius:0 0 28px 28px;
  background-size:cover; background-position:center; opacity:.4;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 55%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 55%, transparent 100%);
  z-index:0;
}
.hero__inner{
  position:relative; z-index:1; text-align:center;
  padding:2.6rem 0 1rem; display:flex; flex-direction:column; align-items:center;
}
.hero__avatar-wrap{ position:relative; margin-bottom:1.1rem }
.hero__avatar{
  width:140px; height:140px; border-radius:50%; padding:4px;
  background:var(--grad-gold);
  box-shadow:0 18px 50px -14px rgba(212,175,55,.7);
  animation:floatAvatar 5s ease-in-out infinite;
}
.hero__avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; border:3px solid var(--bg) }
@keyframes floatAvatar{ 0%,100%{ transform:translateY(0) rotate(-1deg) } 50%{ transform:translateY(-12px) rotate(1deg) } }
.livebadge{
  position:absolute; left:50%; bottom:-12px; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.32rem .7rem; border-radius:999px; font-size:.72rem; font-weight:800; letter-spacing:.08em;
  background:#15100a; border:1px solid var(--line); color:var(--ink-soft); text-transform:uppercase;
  white-space:nowrap;
}
.livebadge__dot{ width:8px; height:8px; border-radius:50%; background:var(--ink-soft) }
.livebadge.is-live{ color:#fff; border-color:rgba(255,59,92,.5); background:linear-gradient(180deg,#2a0c12,#15100a) }
.livebadge.is-live .livebadge__dot{ background:var(--live); animation:livePulse 1.6s infinite }

.hero__eyebrow{
  font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
  margin:.6rem 0 .3rem; font-weight:600;
}
.hero__title{ font-family:'Sora', system-ui, sans-serif; font-weight:800; font-size:clamp(2.4rem,8vw,3.6rem); line-height:1.02; letter-spacing:.01em }
.hero__lead{
  max-width:640px; margin:.9rem auto 0;
  font-size:clamp(1.1rem,3.6vw,1.5rem); font-weight:800; letter-spacing:.005em;
  background:var(--grad-gloss);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 6px rgba(212,175,55,.28));
}
.hero__lead strong{ color:var(--gold-3) }
.codechip{
  font-family:'Sora', system-ui, sans-serif; font-weight:700; color:#241a05; background:var(--grad-gold);
  padding:.05em .45em; border-radius:7px; letter-spacing:.05em;
}

/* ---------- stats ---------- */
.stats{
  display:flex; gap:.7rem; margin:1.6rem 0 .4rem; flex-wrap:wrap; justify-content:center; width:100%;
}
.stat{
  flex:1 1 130px; max-width:200px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:1rem .8rem; backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .2s ease, border-color .2s ease;
}
.stat:hover{ transform:translateY(-4px); border-color:var(--gold) }
.stat__num{
  display:block; font-family:'Sora', system-ui, sans-serif; font-weight:800; font-size:1.7rem;
  background:var(--grad-gloss); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.3));
}
.stat__label{ font-size:.78rem; color:var(--ink-soft); letter-spacing:.04em }

.hero__cta{ display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center; margin-top:1.5rem }

/* ---------- section heads ---------- */
.section-head{ text-align:center; margin:0 auto 1.6rem; max-width:620px }
.kicker{
  display:inline-block; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); padding:.3rem .8rem; border:1px solid var(--line); border-radius:999px;
  margin-bottom:.7rem; background:rgba(212,175,55,.06);
}
.section-head h2{
  font-family:'Sora', system-ui, sans-serif; font-weight:800; font-size:clamp(1.6rem,5vw,2.2rem);
  background:var(--grad-gloss); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 5px rgba(212,175,55,.22));
}

/* ---------- deals ---------- */
.deals{ max-width:1120px; margin:2.6rem auto 0; padding:0 clamp(.9rem,3vw,1.4rem) }
.deal-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; align-items:stretch;
}
.deal{
  position:relative; display:flex; flex-direction:column; gap:1.1rem;
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line); border-radius:24px; padding:1.6rem 1.3rem 1.3rem;
  backdrop-filter:blur(10px); box-shadow:var(--shadow);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  overflow:hidden;
}
.deal::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .3s;
  background:radial-gradient(80% 60% at 50% 0%, rgba(212,175,55,.16), transparent 70%);
  pointer-events:none;
}
.deal:hover{ transform:translateY(-6px); border-color:var(--gold) }
.deal:hover::before{ opacity:1 }
.deal--featured{
  border-color:rgba(212,175,55,.5);
  box-shadow:0 0 0 1px rgba(212,175,55,.25), var(--shadow);
}
.deal--featured::after{
  content:""; position:absolute; inset:-1px; border-radius:24px; padding:1px; pointer-events:none;
  background:linear-gradient(135deg, rgba(247,215,116,.7), transparent 40%, transparent 60%, rgba(247,215,116,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.deal__rank{
  align-self:flex-start; font-size:.74rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:.34rem .7rem; border-radius:999px; color:#241a05; background:var(--grad-gold);
  box-shadow:0 6px 16px -6px rgba(212,175,55,.6);
}
.deal__rank--alt{ color:var(--gold-3); background:rgba(212,175,55,.1); border:1px solid var(--line) }
.deal__logo{
  flex:1; min-height:120px; display:grid; place-items:center;
  border-radius:16px; padding:1.3rem; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.05);
}
.deal__logo img{ max-height:64px; width:auto; object-fit:contain }
.deal__logo--biggg{ background:#1a1320 }
.deal__code{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.5rem .55rem .5rem .9rem; border-radius:13px;
  border:1px dashed var(--line); background:rgba(0,0,0,.25);
}
.deal__code-label{ font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-soft) }
.codebtn{
  display:inline-flex; align-items:center; gap:.45rem; font-family:'Sora', system-ui, sans-serif; font-weight:700;
  font-size:1rem; letter-spacing:.06em; padding:.4rem .7rem; border-radius:9px;
  background:var(--grad-gold); color:#241a05; transition:transform .15s ease, filter .2s;
}
.codebtn svg{ width:15px; height:15px; fill:#241a05; opacity:.8 }
.codebtn:hover{ filter:brightness(1.08); transform:translateY(-1px) }
.codebtn:active{ transform:scale(.96) }
.codebtn.copied{ animation:flash .5s }
@keyframes flash{ 50%{ filter:brightness(1.4) } }
.deals__note{ text-align:center; margin-top:1.4rem; color:var(--ink-soft); font-size:.92rem }
.deals__note strong{ color:var(--gold-3) }

/* ---------- connect ---------- */
.connect{ max-width:1120px; margin:3rem auto 0; padding:0 clamp(.9rem,3vw,1.4rem) }
.connect-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem }
.conn{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:.45rem; text-align:center;
  background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:1.5rem 1rem;
  backdrop-filter:blur(8px); transition:transform .2s ease, border-color .2s ease, background .2s;
}
.conn svg{ width:30px; height:30px; fill:var(--gold-2); margin-bottom:.2rem }
.conn:hover{ transform:translateY(-5px); border-color:var(--gold); background:rgba(212,175,55,.07) }
.conn__name{ font-family:'Sora', system-ui, sans-serif; font-weight:700; font-size:1.05rem }
.conn__handle{ font-size:.82rem; color:var(--ink-soft); word-break:break-all }
.conn__copied{
  position:absolute; inset:0; display:grid; place-items:center; border-radius:20px;
  background:linear-gradient(180deg, rgba(212,175,55,.95), rgba(184,134,11,.95)); color:#241a05;
  font-weight:800; opacity:0; pointer-events:none; transition:opacity .25s; font-family:'Sora', system-ui, sans-serif;
}
.conn.copied .conn__copied{ opacity:1 }

/* ---------- footer ---------- */
.footer{
  margin-top:3.4rem; border-top:1px solid rgba(212,175,55,.12);
  background:linear-gradient(180deg, transparent, rgba(10,8,6,.7) 40%);
}
.footer__inner{
  max-width:1120px; margin:0 auto; padding:2rem clamp(.9rem,3vw,1.4rem) 2.4rem;
  display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center;
}
.footer__brand{ display:flex; align-items:center; gap:.6rem; font-family:'Sora', system-ui, sans-serif; font-weight:700; font-size:1.15rem }
.footer__brand img{ width:34px; height:34px; border-radius:50%; border:1.5px solid var(--gold) }
.footer__warn{ font-size:.78rem; color:var(--ink-soft); letter-spacing:.02em }
.footer__rights{ font-size:.82rem; color:var(--ink-soft) }
.footer__rights span{ opacity:.85 }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%, 20px);
  background:linear-gradient(180deg,#1c1409,#120d06); border:1px solid var(--gold);
  color:var(--gold-3); padding:.8rem 1.3rem; border-radius:13px; font-weight:600; font-size:.9rem;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.3s; z-index:90;
}
.toast.show{ opacity:1; transform:translate(-50%,0) }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1) }
.reveal.in{ opacity:1; transform:none }

/* ---------- responsive ---------- */
@media (max-width:720px){
  .deal-grid{ grid-template-columns:1fr }
  .connect-grid{ grid-template-columns:1fr }
  .socials--top{ display:none }
  .hero__banner{ height:260px }
  .hero__avatar{ width:118px; height:118px }
  .brand__text{ font-size:1.05rem }
}
@media (max-width:380px){
  .stat{ flex-basis:100% }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.001s !important; scroll-behavior:auto }
  .chips{ display:none }
}