/* HB Battle Ultimate V16 — visual-only premium layer. */
:root{
  --hb-ink:#08110d;--hb-ink2:#0d1b15;--hb-green:#16a36b;--hb-green2:#25d391;
  --hb-gold:#f5b942;--hb-white:#fff;--hb-muted:#718078;
  --hb-shadow:0 22px 70px rgba(5,20,13,.12);--hb-radius:22px;
}
*{scrollbar-width:thin;scrollbar-color:rgba(22,163,107,.55) transparent}
html{scroll-behavior:smooth}
body{background:linear-gradient(180deg,#fbfdfc 0,#f5f8f6 100%);color:#102019}
::selection{background:rgba(37,211,145,.24);color:#06120d}
.site-header{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);background:rgba(255,255,255,.82)!important;border-bottom:1px solid rgba(8,30,20,.07)!important;box-shadow:0 8px 30px rgba(5,25,15,.05);position:sticky;top:0;z-index:1000}
.site-header .nav{min-height:72px}
.brand{font-weight:800;letter-spacing:-.03em}
.brand img{border-radius:12px;box-shadow:0 8px 22px rgba(22,163,107,.18)}
.links a{transition:transform .2s ease,background .2s ease,color .2s ease}
.links a:hover{transform:translateY(-1px)}
.links .cta{box-shadow:0 10px 25px rgba(22,163,107,.2)!important}
.hero{background:radial-gradient(circle at 15% 15%,rgba(37,211,145,.16),transparent 34%),radial-gradient(circle at 90% 20%,rgba(245,185,66,.12),transparent 28%),linear-gradient(135deg,#07130e 0,#0c2118 55%,#07110d 100%)!important;min-height:680px}
.hero:after{content:"";position:absolute;inset:auto -10% -45% -10%;height:55%;background:radial-gradient(ellipse,rgba(37,211,145,.16),transparent 65%);pointer-events:none}
.hero-copy h1{letter-spacing:-.055em;line-height:.98;text-wrap:balance}
.hero-copy p{max-width:680px;line-height:1.75;color:rgba(255,255,255,.72)}
.eyebrow,.kicker{letter-spacing:.16em;font-weight:800}
.btn{border-radius:14px!important;box-shadow:0 12px 30px rgba(22,163,107,.18);transition:transform .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(22,163,107,.24)}
.btn.alt{backdrop-filter:blur(10px);background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.15)!important}
.game-chips a{border-radius:999px!important;transition:all .2s ease}
.game-chips a:hover{transform:translateY(-2px);background:rgba(37,211,145,.13)}
.match-card{border:1px solid rgba(255,255,255,.12)!important;background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.04))!important;box-shadow:0 30px 80px rgba(0,0,0,.28)!important;backdrop-filter:blur(18px);transform:rotate(1deg)}
.trust-strip{background:#fff!important;border-bottom:1px solid #e7eee9}
.card,.step,.faq-item,.guide-list li,.note{border:1px solid rgba(10,40,25,.08)!important;box-shadow:0 14px 45px rgba(10,35,23,.07)!important;border-radius:20px!important;background:rgba(255,255,255,.9)!important}
.card,.step{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.card:hover,.step:hover{transform:translateY(-5px);box-shadow:0 24px 60px rgba(10,35,23,.12)!important;border-color:rgba(22,163,107,.18)!important}
.cta-band{background:linear-gradient(135deg,#092017,#0e3827)!important;border-top:1px solid rgba(255,255,255,.06)}
.site-footer{background:#07110d!important}

/* App shell */
body:has(#splashScreen),body:has(#dashboardScreen){background:#f5f7f6}
.screen{animation:hbFade .25s ease both}
@keyframes hbFade{from{opacity:.65;transform:translateY(4px)}to{opacity:1;transform:none}}
.home-hero{background:radial-gradient(circle at 10% 10%,rgba(37,211,145,.15),transparent 30%),linear-gradient(145deg,#07120e,#0c2118)!important;border-radius:0 0 30px 30px!important;padding:28px 18px 32px!important;box-shadow:0 18px 55px rgba(0,0,0,.16)!important}
.home-greeting{color:rgba(255,255,255,.55)!important;font-size:12px!important;letter-spacing:.08em;text-transform:uppercase}
.home-name{color:#fff!important;letter-spacing:-.035em}
#dashAvatar{background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.18)!important;color:#fff!important;box-shadow:0 10px 25px rgba(0,0,0,.18)}
.home-wallet-card{background:linear-gradient(135deg,#18a86f,#087b4d)!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:22px!important;box-shadow:0 18px 45px rgba(5,90,55,.27)!important;margin-top:22px!important;transition:transform .2s ease}
.home-wallet-card:active{transform:scale(.985)}
.home-wallet-label{color:rgba(255,255,255,.7)!important}
.home-wallet-amt{color:#fff!important;letter-spacing:-.04em}
.home-card-float{background:rgba(255,255,255,.96)!important;border:1px solid rgba(8,40,24,.08)!important;border-radius:20px!important;box-shadow:0 15px 40px rgba(0,0,0,.1)!important}
.home-stat-val{color:#102019!important}
.home-promo{border-radius:20px!important;background:linear-gradient(135deg,#12291e,#183c2b)!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 16px 40px rgba(0,0,0,.12)!important}
.qa-grid{gap:11px!important}
.qa-card{border:1px solid rgba(9,35,22,.08)!important;background:rgba(255,255,255,.94)!important;border-radius:18px!important;box-shadow:0 10px 28px rgba(8,30,19,.07)!important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important}
.qa-card:active{transform:scale(.97)!important}
.qa-card:hover{border-color:rgba(22,163,107,.18)!important;box-shadow:0 16px 35px rgba(8,30,19,.1)!important}
.qa-card-icon{border-radius:14px!important}
.sec-title{font-weight:800!important;letter-spacing:-.02em}
.bottom-nav{background:rgba(255,255,255,.9)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid rgba(10,35,23,.09)!important;box-shadow:0 -12px 35px rgba(8,30,19,.08)!important}
.nav-fab{background:linear-gradient(135deg,#18a86f,#0a7f4f)!important;box-shadow:0 14px 28px rgba(10,130,80,.3)!important;border:4px solid #f5f7f6!important}
.nav-item{transition:transform .2s ease,color .2s ease}
.nav-item:active{transform:scale(.9)}
.modal{backdrop-filter:blur(8px)}
.modal-content,.modal-box{border-radius:24px!important;border:1px solid rgba(8,35,22,.08)!important;box-shadow:0 35px 90px rgba(0,0,0,.2)!important}
.form-input,select,textarea{border-radius:14px!important;border:1px solid #dfe8e3!important;transition:border-color .18s ease,box-shadow .18s ease}
.form-input:focus,select:focus,textarea:focus{border-color:#19a86e!important;box-shadow:0 0 0 4px rgba(25,168,110,.11)!important;outline:none!important}
.btn-red,.btn-primary{border-radius:14px!important}
.toast{border-radius:14px!important;box-shadow:0 18px 45px rgba(0,0,0,.18)!important}

/* Mobile */
@media(max-width:700px){
 .site-header .nav{min-height:64px}.hero{min-height:650px}.hero-copy h1{font-size:clamp(40px,12vw,60px)}
 .hero-showcase{margin-top:28px}.trust-strip{gap:18px!important}.content{padding-left:18px!important;padding-right:18px!important}
 .home-hero{padding-top:22px!important}.home-wallet-card{margin-left:0!important;margin-right:0!important}
 .qa-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.qa-card{min-height:78px!important}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}