/* ============================================================
   HB Battle — HIGH CLASS v19 "OBSIDIAN & GOLD" (ELITE EDITION)
   Loads LAST, after highclass.css. Pushes the dark arena theme
   further: richer depth, gold-foil detailing, refined type
   rhythm, gradient-bordered cards, and calmer, more expensive
   motion. Marketing site only — app.html is untouched.
   ============================================================ */

:root{
  --el-gold:#e9c06b;
  --el-gold2:#c99a3f;
  --el-emerald:#22c17e;
  --el-emerald-dim:#0f5132;
  --el-ink:#070d0a;
  --el-panel:#0e1a14;
  --el-line:rgba(233,192,107,.16);
  --el-ease:cubic-bezier(.16,1,.3,1);
}

/* ---- 0. Fine film-grain overlay for depth (fixed, non-interactive) ---- */
body{position:relative}
body::before{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
header,.hero,section,footer{position:relative;z-index:2}

/* ---- 1. Type rhythm: tighter, larger, more confident ---- */
.hero h1{
  font-size:clamp(2.3rem,4.6vw,3.4rem)!important;
  letter-spacing:-.02em!important;
  line-height:1.08!important;
  font-weight:800!important;
}
.hero p{max-width:52ch!important}
h2{letter-spacing:-.01em}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-weight:700;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--el-gold)!important;
  padding-bottom:2px;
}
.kicker::before{content:'';width:16px;height:1px;background:linear-gradient(90deg,var(--el-gold),transparent)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--el-line);border-radius:99px;padding:6px 14px 6px 10px;
  background:rgba(233,192,107,.05);
}
.eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--el-emerald);
  box-shadow:0 0 0 3px rgba(34,193,126,.18),0 0 12px rgba(34,193,126,.7)}

/* ---- 2. Header: crisper hairline, gold wordmark accent ---- */
header{border-bottom:1px solid var(--el-line)!important}
.brand span{
  background:linear-gradient(100deg,#fff 30%,var(--el-gold) 60%,#fff 90%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
}
.links a.cta{
  background:linear-gradient(135deg,var(--el-emerald),var(--el-emerald-dim))!important;
  border:1px solid rgba(233,192,107,.35)!important;
  box-shadow:0 6px 18px -6px rgba(34,193,126,.5)!important;
}

/* ---- 3. Hero: layered vignette + slow gold sweep, calmer than v18 ---- */
.hero{
  padding-top:96px!important;
  background:
    radial-gradient(1000px 520px at 84% -8%,rgba(233,192,107,.10),transparent 62%),
    radial-gradient(760px 480px at -6% 8%,rgba(34,193,126,.22),transparent 58%),
    radial-gradient(900px 900px at 50% 120%,rgba(34,193,126,.10),transparent 60%),
    linear-gradient(180deg,#070d0a,#0d1712 55%,#070d0a)!important;
}
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(7,13,10,.9));
}
.hero h1{
  background:linear-gradient(100deg,#ffffff 15%,#f3dda0 38%,#22c17e 52%,#ffffff 72%,#f3dda0 88%)!important;
  background-size:260% auto!important;
  animation:hc-shimmer 9s linear infinite!important;
}

/* ---- 4. Showcase match-card: gold-foil frame, ribbon, softer glass ---- */
.hero-showcase::before{display:none}
.match-card{
  position:relative;
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.015))!important;
  border:1px solid rgba(233,192,107,.28)!important;
  border-radius:20px!important;
  box-shadow:0 50px 100px -32px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.02) inset,
    0 0 70px -26px rgba(34,193,126,.4)!important;
  backdrop-filter:blur(10px);
  overflow:hidden;
}
.match-card::before{
  content:'LIVE PREVIEW';position:absolute;top:14px;right:-34px;transform:rotate(35deg);
  background:linear-gradient(135deg,var(--el-gold),var(--el-gold2));color:#1a1204;
  font:800 10px/1 var(--font-head);letter-spacing:.09em;padding:5px 40px;
  box-shadow:0 6px 14px rgba(0,0,0,.35);
}
.mc-prize{
  font-family:var(--font-head);font-weight:800;font-size:1.5rem!important;
  background:linear-gradient(100deg,#fff,var(--el-gold));-webkit-background-clip:text;
  background-clip:text;color:transparent!important;
}
.mc-bar{background:rgba(255,255,255,.08)!important;border-radius:99px;overflow:hidden}
.mc-bar i{background:linear-gradient(90deg,var(--el-emerald),var(--el-gold))!important;display:block;height:100%}
.mc-live{
  color:var(--el-gold)!important;font-weight:800;letter-spacing:.05em;font-size:.72rem;
  display:inline-flex;align-items:center;gap:6px;
}
.mc-live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--el-gold);
  box-shadow:0 0 8px var(--el-gold);animation:hc-pulse 1.6s ease-in-out infinite}
@keyframes hc-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---- 5. Trust strip: recast as elevated stat tiles ---- */
.trust-strip{padding:26px 0!important}
.trust-strip .wrap{
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.01))!important;
  border:1px solid var(--el-line)!important;border-radius:18px!important;
  box-shadow:0 20px 50px -28px rgba(0,0,0,.7);
}
.trust-strip .wrap>div{position:relative}
.trust-strip .wrap>div+div{border-left:1px solid var(--el-line)!important}
.trust-strip strong{
  color:var(--el-gold)!important;font-size:.98rem!important;letter-spacing:-.01em;
}

/* ---- 6. Cards: gradient hairline border via mask, richer hover lift ---- */
.card{
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.012))!important;
  border:1px solid var(--el-line)!important;
  border-radius:18px!important;
  box-shadow:0 28px 60px -32px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05)!important;
  transition:transform .5s var(--el-ease),box-shadow .5s var(--el-ease),border-color .5s var(--el-ease)!important;
}
.card:hover{
  transform:translateY(-6px)!important;
  border-color:rgba(233,192,107,.4)!important;
  box-shadow:0 36px 80px -30px rgba(0,0,0,.8),0 0 46px -20px rgba(34,193,126,.35)!important;
}
.card .ico{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:13px;background:linear-gradient(155deg,rgba(34,193,126,.18),rgba(34,193,126,.03));
  border:1px solid rgba(34,193,126,.3);color:var(--el-emerald)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
}
.card .ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.card .ico.amber{
  background:linear-gradient(155deg,rgba(233,192,107,.22),rgba(233,192,107,.03));
  border-color:rgba(233,192,107,.4);color:var(--el-gold)!important;
}
.card.game::before{background:linear-gradient(90deg,var(--el-emerald),var(--el-gold))!important}
.card.game.amber::before{background:linear-gradient(90deg,var(--el-gold),#fff2cf)!important}

/* ---- 7. Feature list icons: same badge treatment, tighter grid feel ---- */
.feature{display:flex;gap:16px;align-items:flex-start}
.feature .ico{
  flex:none;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:13px;background:linear-gradient(155deg,rgba(34,193,126,.18),rgba(34,193,126,.03));
  border:1px solid rgba(34,193,126,.3);color:var(--el-emerald);
}
.feature .ico.amber{
  background:linear-gradient(155deg,rgba(233,192,107,.22),rgba(233,192,107,.03));
  border-color:rgba(233,192,107,.4);color:var(--el-gold);
}
.feature .ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.feature h3{color:#fff;margin:0 0 4px}
.feature p{color:#9db3a6;margin:0}

/* ---- 8. Phone previews: gold-rimmed glass frame with soft glow ---- */
.phone{
  border-radius:32px!important;
  border:1px solid rgba(233,192,107,.3)!important;
  box-shadow:0 40px 90px -34px rgba(0,0,0,.85),0 0 60px -28px rgba(34,193,126,.4)!important;
  overflow:hidden;position:relative;
}
.phone::after{
  content:'';position:absolute;inset:0;border-radius:32px;pointer-events:none;
  background:linear-gradient(165deg,rgba(255,255,255,.14),transparent 40%);
}
.phone-wrap h3{color:#fff}
.phone-wrap p{color:#9db3a6}

/* ---- 9. Steps: connected gold numerals ---- */
.steps{position:relative}
.step{
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.012))!important;
  border:1px solid var(--el-line)!important;border-radius:18px!important;
  box-shadow:0 22px 46px -28px rgba(0,0,0,.7)!important;
}
.step .num{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:10px;font-family:var(--font-head);font-weight:800;font-size:.95rem;
  color:#1a1204!important;background:linear-gradient(135deg,var(--el-gold),var(--el-gold2))!important;
  box-shadow:0 8px 18px -6px rgba(233,192,107,.55);
}
.step h3{color:#fff}

/* ---- 10. FAQ accordion: obsidian panel, gold marker ---- */
.faq-item{
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.012))!important;
  border:1px solid var(--el-line)!important;border-radius:14px!important;
}
.faq-item summary{color:#eef4f0!important;font-weight:600}
.faq-item summary::after{color:var(--el-gold)!important}
.faq-item[open]{border-color:rgba(233,192,107,.35)!important}
.faq-a p{color:#9db3a6!important}

/* ---- 11. Guide list: gold arrow accent ---- */
.guide-list a{
  border:1px solid var(--el-line)!important;background:rgba(255,255,255,.02)!important;color:#eef4f0!important;
}
.guide-list a::after{color:var(--el-gold)!important}
.guide-list a:hover{border-color:rgba(233,192,107,.35)!important;background:rgba(233,192,107,.06)!important}

/* ---- 12. CTA band: gold-emerald duotone, gentler than pure green ---- */
.cta-band .wrap{
  background:linear-gradient(120deg,#0f5132,#0c1a13 55%,#1a1204)!important;
  border:1px solid rgba(233,192,107,.25)!important;
}
.cta-band .btn{
  background:linear-gradient(135deg,var(--el-gold),var(--el-gold2))!important;
  color:#1a1204!important;font-weight:800!important;
  box-shadow:0 14px 32px -10px rgba(233,192,107,.55)!important;
}
.cta-band .btn:hover{color:#1a1204!important;background:linear-gradient(135deg,#f3dda0,var(--el-gold))!important}

/* ---- 13. Note callout: gold pin instead of flat panel ---- */
.note{
  border-left:3px solid var(--el-gold)!important;
  background:linear-gradient(135deg,rgba(233,192,107,.09),rgba(233,192,107,.015))!important;
}

/* ---- 14. Section rhythm: thin gradient hairline between major sections ---- */
section+section::before{
  content:'';display:block;width:min(1120px,100% - 40px);margin:0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(233,192,107,.16),transparent);
}
.hero+section::before,.trust-strip+section::before{display:none}

/* ---- 15. Footer: deeper ink, gold hairline top, calmer link motion ---- */
footer{background:#070d0a!important}
footer::before{background:linear-gradient(90deg,transparent,var(--el-gold),transparent)!important}
.f-brand p{color:#7f9a8b}
footer .col h4{color:#eef4f0;font-family:var(--font-head);font-size:.86rem;letter-spacing:.04em;
  text-transform:uppercase;margin:0 0 10px}
footer .col a:hover{color:var(--el-gold)!important}

/* ---- 16. Back-to-top: gold ring, obsidian core ---- */
.hc-top{
  border-color:rgba(233,192,107,.5)!important;background:rgba(14,26,20,.92)!important;color:var(--el-gold)!important;
}
.hc-top:hover{background:var(--el-gold)!important;color:#1a1204!important}

/* ---- 17. Calmer, more expensive motion throughout ---- */
.btn,.card,.faq-item,.guide-list a,.links a,.phone{
  transition-timing-function:var(--el-ease)!important;
}

@media (max-width:760px){
  .trust-strip .wrap>div+div{border-left:none!important;border-top:1px solid var(--el-line)!important}
  .match-card::before{top:10px;right:-38px}
}

@media (prefers-reduced-motion:reduce){
  body::before{display:none}
  .mc-live::before{animation:none}
}