/* ============================================================
   HB Battle — HIGH CLASS v18.2 "ARENA NIGHT" (BOLD EDITION)
   Loads LAST. Full dark-arena transformation of the public
   site: flips the light theme via CSS variables, adds glow
   borders, gold gradient type and cinematic depth.
   ============================================================ */

/* ---- 1. FLIP THEME: one variable swap turns the whole site dark ---- */
:root{
  --bg:#0a1510;
  --card:#111f18;
  --text:#eef4f0;
  --muted:#8fab9d;
  --brand:#22c17e;
  --brand2:#0f5132;
  --line:rgba(255,255,255,.09);
  --accent:#e3b34c;
  --hc-gold:#e3b34c;
  --hc-gold-soft:rgba(227,179,76,.14);
  --hc-ink:#0a1510;
  --hc-ink2:#0f2018;
  --hc-ease:cubic-bezier(.22,1,.36,1);
}

/* ---- 2. Cinematic page background: layered emerald/gold nebula ---- */
body{
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(34,193,126,.16), transparent 60%),
    radial-gradient(800px 500px at -10% 30%, rgba(227,179,76,.07), transparent 55%),
    radial-gradient(700px 700px at 50% 110%, rgba(34,193,126,.10), transparent 60%),
    linear-gradient(180deg, #0a1510, #0c1a13 45%, #0a1510) !important;
  background-attachment: fixed;
}
section{position:relative}

/* ---- 3. Header: floating dark glass with gold base line ---- */
header{
  background:rgba(10,21,16,.82) !important;
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid rgba(227,179,76,.22) !important;
  box-shadow:0 10px 34px -18px rgba(0,0,0,.7);
}
.brand{color:#fff !important;font-size:1.3rem}
.links a{color:#8fab9d;font-weight:600}
.links a:hover{color:#22c17e;text-decoration:none}
.links a.hc-active{color:#e3b34c}
.links a.hc-active::after{right:0;background:linear-gradient(90deg,#e3b34c,transparent)}

/* ---- 4. Cards & content panels: glass + emerald glow border ---- */
.card, .content{
  background:linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.015)) !important;
  border:1px solid rgba(34,193,126,.22) !important;
  border-radius:18px !important;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(6px);
}
.card h3, .content h2{color:#fff}
.card p, .content p, .content li{color:#b9ccc2}
.card a, .content a{color:#22c17e;font-weight:600;text-decoration:none;
  background-image:linear-gradient(90deg,#e3b34c,#e3b34c);background-size:0% 1.5px;
  background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .3s var(--hc-ease)}
.card a:hover, .content a:hover{background-size:100% 1.5px}
.content h1{
  font-size:clamp(1.9rem,4vw,2.7rem);color:#fff;position:relative;
  padding-bottom:16px;margin-bottom:18px;line-height:1.15;
}
.content h1::after{content:'';position:absolute;left:0;bottom:0;width:80px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,#22c17e,#e3b34c)}
.content h2{position:relative;padding-left:14px;margin-top:36px;color:#fff}
.content h2::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:2px;
  background:linear-gradient(180deg,#22c17e,#e3b34c)}
.content ul{list-style:none;padding-left:4px}
.content ul li{position:relative;padding-left:26px;margin-bottom:10px;color:#b9ccc2}
.content ul li::before{content:'\25C6';position:absolute;left:0;top:2px;color:#e3b34c;font-size:.6rem}
.note{background:linear-gradient(135deg, rgba(227,179,76,.12), rgba(227,179,76,.03)) !important;
  border:1px solid rgba(227,179,76,.35) !important;border-left:4px solid #e3b34c !important;color:#e8d9b8}
.meta{color:#6f8a7d !important}
.guide-list li{border-bottom:1px solid rgba(255,255,255,.08)}
.guide-list a{color:#22c17e}

/* ---- 5. Hero (index): bigger drama ---- */
.hero{
  background:
    radial-gradient(900px 500px at 82% -10%, rgba(34,193,126,.4), transparent 60%),
    radial-gradient(600px 400px at 8% 110%, rgba(227,179,76,.18), transparent 55%),
    linear-gradient(160deg,#08120d,#0f2018 60%) !important;
  border-bottom:1px solid rgba(227,179,76,.2);
  padding-top:88px;
}
.hero h1{
  text-shadow:none;
  background:linear-gradient(115deg,#ffffff 22%,#f6d789 42%,#22c17e 58%,#ffffff 78%);
  background-size:240% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hc-shimmer 7s linear infinite;
}
@keyframes hc-shimmer{to{background-position:240% center}}
.hero p{color:#8fab9d;font-size:1.12rem}
.hero .eyebrow{color:#e3b34c !important;letter-spacing:2px}

/* match card: animated conic border */
.match-card{
  border:1px solid rgba(227,179,76,.35) !important;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8), 0 0 60px -20px rgba(34,193,126,.35) !important;
}

/* ---- 6. Buttons: neon glow ---- */
.btn{
  background:linear-gradient(135deg,#22c17e,#0f5132) !important;
  box-shadow:0 8px 26px -8px rgba(34,193,126,.55), inset 0 1px 0 rgba(255,255,255,.25);
  border-radius:12px !important;position:relative;overflow:hidden;isolation:isolate;
  transition:transform .25s var(--hc-ease), box-shadow .25s var(--hc-ease), filter .25s ease;
}
.btn:hover{filter:brightness(1.12);transform:translateY(-2px);
  box-shadow:0 14px 34px -8px rgba(34,193,126,.7)}
.btn::after{content:'';position:absolute;top:-60%;left:-45%;width:38%;height:220%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-22deg);transition:left .55s var(--hc-ease);pointer-events:none}
.btn:hover::after{left:140%}

/* ---- 7. Trust strip: darker band with gold ticks ---- */
.trust-strip{background:#0c1a13 !important;border-bottom:1px solid rgba(227,179,76,.16) !important}
.trust-strip .wrap > div strong{color:#e3b34c}

/* ---- 8. Footer: deep ink with gold hairline ---- */
footer{position:relative;background:#0f2018 !important;border-top:none !important;
  padding:44px 0 34px !important;margin-top:64px !important}
footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,#e3b34c,transparent)}
footer .wrap{color:#8fab9d}
footer .col a{color:#8fab9d;font-weight:600;transition:color .25s ease}
footer .col a:hover{color:#e3b34c;text-decoration:none}
footer .meta{color:rgba(255,255,255,.38) !important;margin-top:18px}

/* ---- 9. Scrollbar + selection + focus ---- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0f2018}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#22c17e,#0f5132);border-radius:99px;border:2px solid #0f2018}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#e3b34c,#0f5132)}
html{scrollbar-color:#1fae72 #0f2018;scrollbar-width:thin}
::selection{background:rgba(227,179,76,.9);color:#0a1510}
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid #e3b34c;outline-offset:3px;border-radius:6px}

/* ---- 10. Scroll reveal + back-to-top ---- */
.hc-reveal{opacity:0;transform:translateY(28px);
  transition:opacity .75s var(--hc-ease),transform .75s var(--hc-ease)}
.hc-reveal.in{opacity:1;transform:none}
.hc-top{position:fixed;right:22px;bottom:22px;z-index:60;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(227,179,76,.5);background:rgba(15,32,24,.9);backdrop-filter:blur(8px);
  color:#e3b34c;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.6);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity .35s var(--hc-ease),transform .35s var(--hc-ease),background .25s ease}
.hc-top.show{opacity:1;transform:none;pointer-events:auto}
.hc-top:hover{background:#e3b34c;color:#0a1510}
@media (prefers-reduced-motion:reduce){
  .hc-reveal{opacity:1 !important;transform:none !important;transition:none !important}
  .hero h1{animation:none}
  .btn::after{display:none}
}
@media (hover:hover){.card{transition:transform .3s var(--hc-ease),box-shadow .3s var(--hc-ease)}.card:hover{transform:translateY(-5px)}}